osdy-pi 0.1.4 → 0.1.5

package/README.md

@@ -10,15 +10,23 @@ Visit the Osdy landing page: [landing-osdy.vercel.app](https://landing-osdy.verc
 
 - **Dark theme:** `osdy-pi-dark`, enabled by default when the package starts.
 - **Light theme:** `osdy-pi-light`, with the same Osdy palette adapted for light terminals.
-- **Custom header:** centered Osdy-Pi ASCII branding with responsive status metadata.
+- **Simple theme:** `osdy-pi-simple`, a blue/red/slate console theme for the full Pi interface.
+- **Custom header:** two selectable header styles with responsive status metadata: `osdy-theme` (default) and `classic`.
 - **Custom editor:** full-width framed input area with model, thinking, token, cost, and context status.
-- **Clean layout:** the built-in footer/working row is hidden while Osdy Pi is enabled to avoid duplicated UI.
+- **Custom working indicator:** a dedicated working widget/spinner appears above the text box, outside the editor frame.
+- **Clean layout:** the built-in working row is hidden while Osdy Pi is enabled to avoid duplicated UI.
 
 <img width="1280" height="433" alt="image" src="https://github.com/user-attachments/assets/20c7624d-9ad8-4494-97fb-6b6d81aaf328" />
 
 ## Install in Pi
 
-Install the package directly from GitHub:
+Install the published package from npm:
+
+```bash
+pi install npm:osdy-pi
+```
+
+You can also install it directly from GitHub:
 
 ```bash
 pi install git:github.com/OsdyOrtiz/Osdy-Pi
@@ -45,6 +53,7 @@ Then select one of these theme names:
 ```text
 osdy-pi-dark
 osdy-pi-light
+osdy-pi-simple
 ```
 
 You can also set it in your Pi `settings.json`:
@@ -55,7 +64,7 @@ You can also set it in your Pi `settings.json`:
 }
 ```
 
-Use `osdy-pi-light` instead if you prefer the light version.
+Use `osdy-pi-light` if you prefer the light version, or `osdy-pi-simple` if you want the blue/red/slate palette across the whole console.
 
 ## Commands
 
@@ -65,11 +74,20 @@ Osdy Pi includes a small command group:
 /osdy-pi enable
 /osdy-pi disable
 /osdy-pi status
+/osdy-pi osdy-theme
+/osdy-pi classic
+/osdy-pi-osdy-theme
+/osdy-pi-classic
 ```
 
 - `enable` applies the dark Osdy theme, custom header, custom editor, and clean layout.
 - `disable` restores Pi's built-in header, editor, footer, and working visibility, then switches back to the previous theme or `dark`.
-- `status` shows whether the Osdy Pi UI is currently enabled.
+- `status` shows whether the Osdy Pi UI is currently enabled, including the active style.
+- `osdy-theme` is the default OsdyTheme header with pink, cyan, and purple styling, plus the mascot glow on the right edge.
+- `classic` keeps the previous classic header shape with the shared mascot.
+- `/osdy-pi-osdy-theme` and `/osdy-pi-classic` are direct aliases.
+
+After changing a local extension, run `/reload` or restart Pi so the updated commands are registered.
 
 ## Local install
 
@@ -92,11 +110,24 @@ pi install /absolute/path/to/Osdy-Pi
 ```text
 themes/osdy-pi-dark.json
 themes/osdy-pi-light.json
+themes/osdy-pi-simple.json
 extensions/osdy-pi.ts
+extensions/osdy-pi/
 ```
 
+`extensions/osdy-pi.ts` is the package entrypoint. The implementation lives in the modular `extensions/osdy-pi/` folder (runtime, UI, metrics, working controller, animation, border, and formatting helpers).
+
 The Pi manifest is declared in `package.json` through `pi.themes` and `pi.extensions`, so Pi can discover the themes and extension after installation.
 
+## Development
+
+If you are working on the package locally, you can run:
+
+```bash
+npm run typecheck
+npm run lint
+```
+
 ## Uninstall or turn off
 
 To temporarily turn off the custom UI inside Pi:

package/extensions/osdy-pi/animation.ts

@@ -1,5 +1,6 @@
 import { ANIMATION_ENABLED } from "./constants.js";
 import type { AnimationMode, SimpleTheme } from "./types.js";
+import type { MascotTonePalette } from "./constants.js";
 import { positiveModulo } from "./utils.js";
 
 export type AsciiAnimationStyle = "static" | "animated";
@@ -57,3 +58,42 @@ export function animateAsciiLine(
 		})
 		.join("");
 }
+
+export function animateAsciiLineWithToneMap(
+	line: string,
+	toneMap: string,
+	lineIndex: number,
+	frame: number,
+	theme: SimpleTheme,
+	palette: MascotTonePalette,
+	style: AsciiAnimationStyle,
+): string {
+	return Array.from(line)
+		.map((char, charIndex) => {
+			if (char === " ") return char;
+			const tone = toneMap[charIndex];
+			if (
+				tone !== "b" &&
+				tone !== "h" &&
+				tone !== "l" &&
+				tone !== "m" &&
+				tone !== "d" &&
+				tone !== "p" &&
+				tone !== "c" &&
+				tone !== "v"
+			) {
+				return char;
+			}
+			const baseColor = palette[tone];
+			if (style === "static") return theme.fg(baseColor, char);
+			const wave = positiveModulo(charIndex + lineIndex * 2 - frame * 5, 44);
+			const highlightColor =
+				tone === "b" || tone === "h" || tone === "p" ? palette.h : palette.l;
+			const trailColor = tone === "d" ? palette.m : palette.b;
+			return theme.fg(
+				getAnimatedAsciiColor(wave, baseColor, highlightColor, trailColor),
+				char,
+			);
+		})
+		.join("");
+}

package/extensions/osdy-pi/constants.ts

@@ -1,4 +1,5 @@
 import { visibleWidth } from "@earendil-works/pi-tui";
+import type { HeaderVariant } from "./types.js";
 
 export const THEME_NAME = "osdy-pi-dark";
 export const ANIMATION_ENABLED = true;
@@ -20,37 +21,83 @@ export const WORKING_WIDGET_KEY = "osdy-pi-working";
 export const MASCOT_MIN_ROWS = 34;
 export const MASCOT_GAP = 0;
 
-export const MASCOT = [
-	"                  %%  %%%@@             @@%%% @%%",
-	"                 %= --- -=#% @@@@@@@@@%%%-- ----#%",
-	"                 %- -*#@ =+**-------:-**- %%#*--#%",
-	"                 %- -*#%*-----------------*%#*--#%",
-	"                  %+-#*---------------------**-+%",
-	"                   %#=--=-  ==-------=   ----=*%",
-	"                  %+--  ***** ------  ****   -=*%",
-	"                @%%  ****%% %*=-----**% %****# #%%@",
-	"               @%# ******%%%%*=--==-**%%%%*****#--%",
-	"                %%#*******##*# %%%%  **%#*******%%@",
-	"                  %%%#******  %@%%@%   ******#%@%",
-	"                     %%%::               ::#%@    %%%%%",
-	"                        %%%**::::::::::%%%     %%#-****%%",
-	"                       %#---: :   :: ::-=+%%%%%=-::::+*#%",
-	"                      %%----- :     ::----*%%%*****-:::#%",
-	"                      #*------ :   ::-----**#+-:=+***=-*%",
-	"                   %%%+*=+------ ::------+*=+%-:::-*##+%%",
-	"                   %*---**-----*  **----+*--=+%=---=*#%",
-	"                   %**+==%*----*==%=----##==+*%#+--*%%",
-	"                    %%#%#%@+=+++%%++++==%##%#%#%%%%",
-	"                ----=+%%%#%%#%*##%###*#%%##%%==---------",
-	"                           ##****=*****==",
+const HTML_MASCOT = [
+	"                                         ▓▓▓▓▒            ",
+	"                                     ░ ▓▓▓  ▒▓            ",
+	"                                  ░░░▓▓▓     ▓▓           ",
+	"                    ▒ ▒ ▒▒    ▒  ░░ ▓▓▓▓    ░▒▓▓          ",
+	"▓▓▓▓▓▓▓▓░░░░░     ░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒    ░░▒▓           ",
+	"▓▓    ▓▓▓▓▓░░░ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░   ░░▒▒           ",
+	"▓▓░    ▒▓▓▓▒░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓▒▒▒▒▒▒▒░░ ░▒▒            ",
+	" ▓▒░░    ▒░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓█▓▓█▓▓▓▓▓▒▒▒░▒▒░            ",
+	"  ▓▒░░   ░▒▒▒▒▒▓▓▓▓▓▒█▒▒▒▒▒▓▓▓▓ ░░░  ▓▓▓▓▒▒▒░░            ",
+	"   ▒▒░░ ░▒▒▒▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒▓▓     ░       ▓ ▒▒░░          ",
+	"    ▒▒▒▒░▒▒▓▓▓▓░     ░▓▒▒▒▒▒   ░▒▒█▓        ▒▓▓▓░▒        ",
+	"     ░ ░▒▒▓▓▒   ▓░░            ░░ ░            ▓▓▓▒       ",
+	"      ░░▒▓░  ░▒░▓▓        ░░                     ░▓▓▒     ",
+	"      ░▒ ▒   ░▒▒▒        ▒▒▒▒ ░                  ▒▒▒      ",
+	"    ░▒▓▓░               ▓▓░░░ █▓ ▒             ░▒▒▒       ",
+	"   ▒▓▓▓░               ▓▓     ▓▓▓▓▓▓▓▓▓       ░░▒         ",
+	"   ▓▓▓░            ░ ▓▓▓▓▓▓▒▓▓▓▓ ▓▓▓▓▓▓▓▒░░░░ ░           ",
+	"  ▒▒▒▒            ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▒▒░░░░               ",
+	"    ▓▒▒░░        ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒▒░░ ▓                  ",
+	"          ░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▒▒  ░░░                      ",
+	"                 ░    ░░░░░░░░░░░▒▒░░       ░ ░ ░  ▓      ",
+	"                ░░░░░▒▒▒▒░░▒░ ▒▒▒▒▒░░     ░░▒▒▒░░░░░░░░   ",
+	"              ▒▒▒▒▒░░░▒▒▒▒▒▒▒▒▒▒▒▒░░░  ▒░░▒▒▒▒▓▓▓▓░░░░    ",
+	"              ░▒▒▒▒▒░ ░░▒▒▒▒▒▒▒▒░░░        ░░▒▓▓▓▓▒▒░░    ",
+	"             ▓░░░░░░ ░ ░░░░░░░░░░░        ░░░░░░▓▒▒▒▒    ░",
+	"              ░░░▒▒▓▓▓▓▓▒░░░░░░░░░░  ░░▒▒▒▒░░░░░░░▒▒░░    ",
+	"              ░▒▒▒▓▓▓▓▓▓▓▓▓▓▒▒▒▒░░░   ░▒▒▒▓▓▒░░░   ░░░▒   ",
+	"             ▒░▒▒▒▓▓▓▓▓▓▓▓▓▓▒▒▒▒▒░░░    ░▒▒▓▓▒░     ░     ",
+	"             ░░▒▒▒▒▒▒▓▓▓▓▓▓▒▒▒▒▒▒░░░░    ░▒▒▒▒▒     ░     ",
+	"             ▒░░░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░░░░░     ▒▒░▒           ",
+	"              ░░░░░░░░░░▒░░▒░▒▒░░░░ ░      ░░░░           ",
+	"                ░░░░      ░░░░░░░░░░░     ░░░░            ",
+	"                  ░          ░░░░░░      ▓                ",
+	"             ░░░░░              ░░░░░░                    ",
+	"                                 ░ ░                      ",
 ] as const;
 
-export const MASCOT_WIDTH = MASCOT.reduce(
-	(maxWidth, line) => Math.max(maxWidth, visibleWidth(line)),
-	0,
-);
+const HTML_MASCOT_MAP = [
+	"                                         hhhhl            ",
+	"                                    dmmhhhmmlhm           ",
+	"                                 dmmmhhhdmmmmhh           ",
+	"                    ldldllddmdldmmmmhhlhddmmmlhh          ",
+	"hhhhhhhhmmmlm     llllllllllllllllllmlldddmmmll           ",
+	"hhmmmmlhhhhmmmdllllllllllllllllllllllllmddmmmll           ",
+	"hhmmmddlhhhlmlllllllllllllllllllhlllllllllmmlld           ",
+	" llmmmdddlmllllllllllllllllllhbhhbhhhhhllllllm            ",
+	" dllmmmddllllllhhhhhlblllllhhhhmmmmmmhhhhlllmm            ",
+	"  dllmmmlllllhhhhhhhhhhllllhhmmmmmmmmmddddhdlllm          ",
+	"    lllllllhhhhmmmmmmmhllllldmdlllbhmmmmddddlhhhlldd      ",
+	"     mdlllhhlmmdhmmmddmmdmmddmmmmdldddddddddmmmhhhl       ",
+	"      lllhmddmlmhhmmmmmddmmmddddddddddddddddmmdmmmhhl     ",
+	"     mlldldddmlllddddddddlllldmddddddddddddmmmddmlll      ",
+	"    llhhmddddmmdddddddddhhmmmdbhdldddddddddmmddmlll       ",
+	"   llhhmmmdddddddddddddhhddddmhhhhhhhhhmmdddddlml         ",
+	"   hhhmmmmmddddddddldhhhhhhlhhhhmhhhhhhhlmmmmmm           ",
+	"  llllmddmddddddddhhhhhhhhhhlhhhhhhhlllmmmm               ",
+	"    hllllmddddddmhhhhhhhhhhhhhllllllmmmh                  ",
+	"         dmmmmmmmmlllllllllllllmdmmm                      ",
+	"                 mmmmmmmmmmmmmmmlllmm                     ",
+	"               dlmmmmllllmmlmmllllllm    dmllllmmmmmmmm   ",
+	"              lllllmmlllllllllllllmmm  lmllllllllhlmmmmm  ",
+	"              mlllllmdmlllllllllmmmd  mddmmmmlhhhlllmmmmm ",
+	"              hmmmmmmdmdmmmmmmmmmmm  dddmmmmmmmmlllllmmdmm",
+	"              mmmlllllhllllmmmmmmmm dmmllllmmmmmmmlllmdm  ",
+	"              mlllhhhhhhhhlllllllmmdddmlllhllmmmmmmlmml   ",
+	"             llllllhhhhhhhllllllllmmdddmmlllllmmmmdmmd    ",
+	"             mllllllllhhllllllllllmmmddmmmlllllmdddmm     ",
+	"             lmllmlllllllllllllllmmmmmddmmmllllmdddd      ",
+	"              lmmmmmmllllmllllllmmmdmdddddmmmmmddmd       ",
+	"               dmmmmmmd dmmmmmmmmmmmmddddmmmmmdd          ",
+	"               dmmmmmd      dmmmmmmd     h                ",
+	"             mmmmmmmm         dmmmmmmm                    ",
+	"                               dmmmmmm                    ",
+] as const;
 
-export const HEADER = [
+const HEADER_CLASSIC = [
 	"░█████╗░░██████╗██████╗░██╗░░░██╗░░░░░░██████╗░██╗",
 	"██╔══██╗██╔════╝██╔══██╗╚██╗░██╔╝░░░░░░██╔══██╗  ║",
 	"██║░░██║╚█████╗░██║░░██║░╚████╔╝░█████╗██████╔╝██║",
@@ -64,11 +111,227 @@ export const HEADER = [
 	"                                ╱╱╱╱╱╱╱╰╯                        </>",
 ] as const;
 
-export const HEADER_WIDTH = HEADER.reduce(
-	(maxWidth, line) => Math.max(maxWidth, visibleWidth(line)),
-	0,
+const HEADER_SIMPLE = [
+	"    ███████                █████                             ███████████   ███ ",
+	"  ███░░░░░███             ░░███                             ░░███░░░░░███ ░░░  ",
+	" ███     ░░███  █████   ███████  █████ ████                  ░███    ░███ ████ ",
+	"░███      ░███ ███░░   ███░░███ ░░███ ░███     ██████████    ░██████████ ░░███ ",
+	"░███      ░███░░█████ ░███ ░███  ░███ ░███    ░░░░░░░░░░     ░███░░░░░░   ░███ ",
+	"░░███     ███  ░░░░███░███ ░███  ░███ ░███                   ░███         ░███ ",
+	" ░░░███████░   ██████ ░░████████ ░░███████                   █████        █████",
+	"   ░░░░░░░    ░░░░░░   ░░░░░░░░   ░░░░░███                  ░░░░░        ░░░░░ ",
+	"                                  ███ ░███",
+	"                                 ░░██████",
+	"                                  ░░░░░░                                     </>",
+] as const;
+
+type HeaderPalette = {
+	baseColor: string;
+	highlightColor: string;
+	trailColor: string;
+};
+
+export type MascotToneKey = "b" | "h" | "l" | "m" | "d" | "p" | "c" | "v";
+
+export type MascotTonePalette = Record<MascotToneKey, string>;
+
+type HeaderVariantConfig = {
+	label: string;
+	header: readonly string[];
+	headerMap?: readonly string[];
+	headerTonePalette?: MascotTonePalette;
+	minRowsForFull?: number;
+	fallbackHeader?: readonly string[];
+	fallbackLinePalette?: (lineIndex: number) => HeaderPalette;
+	mascot?: readonly string[];
+	mascotMap?: readonly string[];
+	linePalette: (lineIndex: number) => HeaderPalette;
+	mascotPalette: HeaderPalette;
+	mascotTonePalette?: MascotTonePalette;
+};
+
+const CLASSIC_PALETTE: HeaderPalette = {
+	baseColor: "accent",
+	highlightColor: "mdHeading",
+	trailColor: "mdLink",
+};
+
+const CLASSIC_LINK_PALETTE: HeaderPalette = {
+	baseColor: "mdLink",
+	highlightColor: "mdHeading",
+	trailColor: "mdLink",
+};
+
+const OSDY_THEME_PINK_PALETTE: HeaderPalette = {
+	baseColor: "accent",
+	highlightColor: "mdHeading",
+	trailColor: "mdLink",
+};
+
+const OSDY_THEME_CYAN_PALETTE: HeaderPalette = {
+	baseColor: "mdLink",
+	highlightColor: "accent",
+	trailColor: "mdHeading",
+};
+
+const OSDY_THEME_PURPLE_PALETTE: HeaderPalette = {
+	baseColor: "mdHeading",
+	highlightColor: "mdLink",
+	trailColor: "accent",
+};
+
+const OSDY_THEME_MASCOT_PALETTE: HeaderPalette = {
+	baseColor: "mdLink",
+	highlightColor: "accent",
+	trailColor: "mdHeading",
+};
+
+const HTML_MASCOT_TONES: MascotTonePalette = {
+	b: "mascotBg",
+	h: "mascotBright",
+	l: "mascotLight",
+	m: "mascotMid",
+	d: "mascotDark",
+	p: "htmlPink",
+	c: "mdLink",
+	v: "mdHeading",
+};
+
+type MascotArt = {
+	mascot: readonly string[];
+	toneMap: readonly string[];
+};
+
+function sampleIndex(
+	outputIndex: number,
+	outputCount: number,
+	inputCount: number,
+): number {
+	if (outputCount <= 1) return 0;
+	return Math.min(
+		inputCount - 1,
+		Math.round((outputIndex * (inputCount - 1)) / (outputCount - 1)),
+	);
+}
+
+function sampleLine(
+	line: string,
+	outputWidth: number,
+	inputWidth: number,
+): string {
+	const chars = Array.from(line.padEnd(inputWidth, " "));
+	return Array.from({ length: outputWidth }, (_value, outputIndex) => {
+		const inputIndex = sampleIndex(outputIndex, outputWidth, inputWidth);
+		return chars[inputIndex] ?? " ";
+	}).join("");
+}
+
+function scaleMascotArt(
+	mascot: readonly string[],
+	toneMap: readonly string[],
+	scale: number,
+): MascotArt {
+	const inputRows = Math.min(mascot.length, toneMap.length);
+	const inputWidth = Math.max(
+		...mascot.slice(0, inputRows).map((line) => Array.from(line).length),
+		...toneMap.slice(0, inputRows).map((line) => Array.from(line).length),
+	);
+	const outputRows = Math.max(1, Math.round(inputRows * scale));
+	const outputWidth = Math.max(1, Math.round(inputWidth * scale));
+
+	return Array.from({ length: outputRows }, (_value, outputIndex) => {
+		const inputIndex = sampleIndex(outputIndex, outputRows, inputRows);
+		return {
+			mascot: sampleLine(mascot[inputIndex] ?? "", outputWidth, inputWidth),
+			toneMap: sampleLine(toneMap[inputIndex] ?? "", outputWidth, inputWidth),
+		};
+	}).reduce<MascotArt>(
+		(accumulator, line) => ({
+			mascot: [...accumulator.mascot, line.mascot],
+			toneMap: [...accumulator.toneMap, line.toneMap],
+		}),
+		{ mascot: [], toneMap: [] },
+	);
+}
+
+function addRightEdgeGlow(
+	mascot: readonly string[],
+	toneMap: readonly string[],
+): readonly string[] {
+	return toneMap.map((lineMap, lineIndex) => {
+		const chars = Array.from(lineMap);
+		const mascotLine = mascot[lineIndex] ?? "";
+		const rightEdgeIndex = Math.max(
+			...Array.from(mascotLine).map((char, index) =>
+				char === " " ? -1 : index,
+			),
+		);
+		if (rightEdgeIndex < 0) return lineMap;
+		const glowTones = ["p", "c", "v"] as const;
+		for (let offset = 0; offset < glowTones.length; offset += 1) {
+			const glowTone = glowTones[offset];
+			const index = rightEdgeIndex - offset;
+			if (
+				glowTone &&
+				index >= 0 &&
+				index < chars.length &&
+				chars[index] !== " "
+			) {
+				chars[index] = glowTone;
+			}
+		}
+		return chars.join("");
+	});
+}
+
+const OSDY_THEME_MASCOT_ART = scaleMascotArt(HTML_MASCOT, HTML_MASCOT_MAP, 0.9);
+const OSDY_THEME_MASCOT_MAP = addRightEdgeGlow(
+	OSDY_THEME_MASCOT_ART.mascot,
+	OSDY_THEME_MASCOT_ART.toneMap,
 );
 
+function osdyThemePalette(lineIndex: number): HeaderPalette {
+	if (lineIndex < 4) return OSDY_THEME_PINK_PALETTE;
+	if (lineIndex < 8) return OSDY_THEME_CYAN_PALETTE;
+	return OSDY_THEME_PURPLE_PALETTE;
+}
+
+export const HEADER_VARIANTS: Record<HeaderVariant, HeaderVariantConfig> = {
+	"osdy-theme": {
+		label: "OsdyTheme",
+		header: HEADER_SIMPLE,
+		mascot: OSDY_THEME_MASCOT_ART.mascot,
+		mascotMap: OSDY_THEME_MASCOT_MAP,
+		linePalette: osdyThemePalette,
+		mascotPalette: OSDY_THEME_MASCOT_PALETTE,
+		mascotTonePalette: HTML_MASCOT_TONES,
+	},
+	classic: {
+		label: "Classic",
+		header: HEADER_CLASSIC,
+		mascot: HTML_MASCOT,
+		mascotMap: HTML_MASCOT_MAP,
+		linePalette: (lineIndex) =>
+			lineIndex >= 6 ? CLASSIC_LINK_PALETTE : CLASSIC_PALETTE,
+		mascotPalette: OSDY_THEME_MASCOT_PALETTE,
+		mascotTonePalette: HTML_MASCOT_TONES,
+	},
+};
+
+export function headerWidth(variant: HeaderVariant): number {
+	return HEADER_VARIANTS[variant].header.reduce(
+		(maxWidth, line) => Math.max(maxWidth, visibleWidth(line)),
+		0,
+	);
+}
+
+export function mascotWidth(variant: HeaderVariant): number {
+	return (HEADER_VARIANTS[variant].mascot ?? []).reduce(
+		(maxWidth, line) => Math.max(maxWidth, visibleWidth(line)),
+		0,
+	);
+}
+
 export const HEADER_FALLBACK = [
 	"OSDY - PI",
 	"</> Compilador de ideas",

package/extensions/osdy-pi/runtime-helpers.ts

@@ -95,7 +95,7 @@ export function disableOsdyPi(ctx: ExtensionContext, state: OsdyState): void {
 
 export function notifyStatus(ctx: ExtensionContext, state: OsdyState): void {
 	ctx.ui.notify(
-		`osdy-pi ${state.enabled ? "enabled" : "disabled"} · theme ${ctx.ui.theme.name ?? "unknown"} · animation ${asciiAnimationMode()} · ${modelLabel(ctx)} · ${usageLabel(ctx).trim()}`,
+		`osdy-pi ${state.enabled ? "enabled" : "disabled"} · theme ${ctx.ui.theme.name ?? "unknown"} · style ${state.headerVariant} · animation ${asciiAnimationMode()} · ${modelLabel(ctx)} · ${usageLabel(ctx).trim()}`,
 		"info",
 	);
 }

package/extensions/osdy-pi/runtime.ts

@@ -3,7 +3,7 @@ import type {
 	ExtensionContext,
 } from "@earendil-works/pi-coding-agent";
 import { applyOsdyPi, disableOsdyPi, notifyStatus } from "./runtime-helpers.js";
-import type { OsdyState, WorkingWidgetState } from "./types.js";
+import type { HeaderVariant, OsdyState, WorkingWidgetState } from "./types.js";
 import {
 	createWorkingController,
 	type WorkingController,
@@ -61,8 +61,14 @@ function loadSessionMetadata(
 		});
 }
 
-function parseCommandAction(args: string): string {
-	return args.trim().split(/\s+/, 1)[0] || "status";
+function parseCommandArgs(args: string): string[] {
+	return args.trim().split(/\s+/).filter(Boolean);
+}
+
+const HEADER_VARIANTS = ["osdy-theme", "classic"] as const;
+
+function isHeaderVariant(value: string): value is HeaderVariant {
+	return HEADER_VARIANTS.includes(value as HeaderVariant);
 }
 
 function enableOsdyPi(
@@ -87,6 +93,18 @@ function disableOsdyPiCommand(
 	disableOsdyPi(ctx, state);
 }
 
+function setHeaderVariant(
+	pi: ExtensionAPI,
+	ctx: ExtensionContext,
+	state: OsdyState,
+	workingState: WorkingWidgetState,
+	variant: HeaderVariant,
+): void {
+	state.headerVariant = variant;
+	if (state.enabled) applyOsdyPi(pi, ctx, state, workingState);
+	ctx.ui.notify(`osdy-pi style: ${variant}`, "info");
+}
+
 function registerCommand(
 	pi: ExtensionAPI,
 	state: OsdyState,
@@ -94,14 +112,21 @@ function registerCommand(
 	controller: WorkingController,
 ): void {
 	pi.registerCommand("osdy-pi", {
-		description: "Manage the Osdy Pi experience: enable, disable, or status.",
+		description:
+			"Manage the Osdy Pi experience: enable, disable, status, or style.",
 		getArgumentCompletions(prefix: string) {
-			return ["enable", "disable", "status"]
-				.filter((value) => value.startsWith(prefix.trim()))
-				.map((value) => ({ value, label: value }));
+			const trimmed = prefix.trim();
+			const parts = parseCommandArgs(trimmed);
+			if (parts.length <= 1) {
+				const valuePrefix = parts[0] ?? "";
+				return ["enable", "disable", "status", ...HEADER_VARIANTS]
+					.filter((value) => value.startsWith(valuePrefix))
+					.map((value) => ({ value, label: value }));
+			}
+			return null;
 		},
 		handler: (args, ctx) => {
-			const action = parseCommandAction(args);
+			const [action = "status"] = parseCommandArgs(args);
 			if (action === "enable") {
 				enableOsdyPi(pi, ctx, state, workingState, controller);
 				return Promise.resolve();
@@ -114,14 +139,36 @@ function registerCommand(
 				notifyStatus(ctx, state);
 				return Promise.resolve();
 			}
-			ctx.ui.notify("Usage: /osdy-pi enable | disable | status", "warning");
+			if (isHeaderVariant(action)) {
+				setHeaderVariant(pi, ctx, state, workingState, action);
+				return Promise.resolve();
+			}
+			ctx.ui.notify(
+				"Usage: /osdy-pi enable | disable | status | osdy-theme | classic",
+				"warning",
+			);
 			return Promise.resolve();
 		},
 	});
+
+	for (const variant of HEADER_VARIANTS) {
+		pi.registerCommand(`osdy-pi-${variant}`, {
+			description: `Switch Osdy Pi header to ${variant}.`,
+			handler: (_args, ctx) => {
+				setHeaderVariant(pi, ctx, state, workingState, variant);
+				return Promise.resolve();
+			},
+		});
+	}
 }
 
 export function registerOsdyPi(pi: ExtensionAPI): void {
-	const state: OsdyState = { enabled: true, gitLabel: "-", agentsLabel: "-" };
+	const state: OsdyState = {
+		enabled: true,
+		headerVariant: "osdy-theme",
+		gitLabel: "-",
+		agentsLabel: "-",
+	};
 	const workingState: WorkingWidgetState = {
 		active: false,
 		label: "Working...",

package/extensions/osdy-pi/types.ts

@@ -2,8 +2,11 @@ import type { TUI } from "@earendil-works/pi-tui";
 
 export type AnimationMode = "off" | "intro" | "continuous";
 
+export type HeaderVariant = "osdy-theme" | "classic";
+
 export type OsdyState = {
 	enabled: boolean;
+	headerVariant: HeaderVariant;
 	previousThemeName?: string;
 	gitLabel: string;
 	agentsLabel: string;

package/extensions/osdy-pi/ui.ts

@@ -12,18 +12,21 @@ import {
 	truncateToWidth,
 	visibleWidth,
 } from "@earendil-works/pi-tui";
-import { animateAsciiLine, asciiAnimationMode } from "./animation.js";
+import {
+	animateAsciiLine,
+	animateAsciiLineWithToneMap,
+	asciiAnimationMode,
+} from "./animation.js";
 import { fitBorder } from "./border.js";
 import {
 	ANIMATION_INTERVAL_MS,
-	HEADER,
+	headerWidth,
 	HEADER_FALLBACK,
-	HEADER_WIDTH,
+	HEADER_VARIANTS,
 	INTRO_ANIMATION_FRAMES,
-	MASCOT,
 	MASCOT_GAP,
 	MASCOT_MIN_ROWS,
-	MASCOT_WIDTH,
+	mascotWidth,
 	WORKING_SPINNER_FRAMES,
 } from "./constants.js";
 import { formatPath } from "./format.js";
@@ -130,39 +133,85 @@ export function createHeaderComponent(
 			render(width: number): string[] {
 				const animationStyle =
 					animateAscii && !animationComplete ? "animated" : "static";
+				const variant = HEADER_VARIANTS[state.headerVariant];
+				const fullHeaderWidth = headerWidth(state.headerVariant);
+				const canUseFullHeader =
+					width >= fullHeaderWidth &&
+					(variant.minRowsForFull === undefined ||
+						_tui.terminal.rows >= variant.minRowsForFull);
+				const mascotLinesSource = variant.mascot ?? [];
+				const mascotToneMap = variant.mascotMap ?? [];
+				const fullMascotWidth = mascotWidth(state.headerVariant);
 				const showMascot =
+					canUseFullHeader &&
+					mascotLinesSource.length > 0 &&
 					_tui.terminal.rows >= MASCOT_MIN_ROWS &&
-					width >= MASCOT_WIDTH + MASCOT_GAP + HEADER_WIDTH;
-				const useFullHeader = width >= HEADER_WIDTH;
-				const headerLines = useFullHeader ? [...HEADER] : [...HEADER_FALLBACK];
+					width >= fullMascotWidth + MASCOT_GAP + fullHeaderWidth;
+				const headerLines = canUseFullHeader
+					? [...variant.header]
+					: [...(variant.fallbackHeader ?? HEADER_FALLBACK)];
+				const headerToneMap = canUseFullHeader ? (variant.headerMap ?? []) : [];
 				const metadataRows = renderHeaderMetadata(pi, ctx, state, width);
 				const logoLines = headerLines.map((line, index) => {
-					const baseColor = useFullHeader && index >= 6 ? "mdLink" : "accent";
+					const toneLine = headerToneMap[index];
+					if (toneLine && variant.headerTonePalette) {
+						return animateAsciiLineWithToneMap(
+							line,
+							toneLine,
+							index,
+							frame,
+							theme,
+							variant.headerTonePalette,
+							animationStyle,
+						);
+					}
+					const palette = canUseFullHeader
+						? variant.linePalette(index)
+						: (variant.fallbackLinePalette?.(index) ??
+							variant.linePalette(index));
 					return animateAsciiLine(
 						line,
 						index,
 						frame,
 						theme,
-						baseColor,
-						"mdHeading",
-						"mdLink",
+						palette.baseColor,
+						palette.highlightColor,
+						palette.trailColor,
 						animationStyle,
 					);
 				});
-				const mascotLines = MASCOT.map((line, index) =>
-					animateAsciiLine(
+				const mascotLines = mascotLinesSource.map((line, index) => {
+					const toneLine = mascotToneMap[index];
+					if (toneLine && variant.mascotTonePalette) {
+						return animateAsciiLineWithToneMap(
+							line,
+							toneLine,
+							index,
+							frame,
+							theme,
+							variant.mascotTonePalette,
+							animationStyle,
+						);
+					}
+					return animateAsciiLine(
 						line,
 						index,
 						frame,
 						theme,
-						"muted",
-						"mdCode",
-						"muted",
+						variant.mascotPalette.baseColor,
+						variant.mascotPalette.highlightColor,
+						variant.mascotPalette.trailColor,
 						animationStyle,
-					),
-				);
+					);
+				});
 				const headerBlock = showMascot
-					? composeSideBySide(mascotLines, logoLines, width)
+					? composeSideBySide(
+							mascotLines,
+							fullMascotWidth,
+							logoLines,
+							width,
+							fullHeaderWidth,
+						)
 					: logoLines.map((line) => fitCenterVisible(line, width));
 				return [
 					"",

package/extensions/osdy-pi/utils.ts

@@ -1,6 +1,6 @@
 import type { TUI } from "@earendil-works/pi-tui";
 import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
-import { HEADER_WIDTH, MASCOT_GAP, MASCOT_WIDTH } from "./constants.js";
+import { MASCOT_GAP } from "./constants.js";
 
 export function sanitizeStatusText(text: string): string {
 	return text
@@ -26,27 +26,27 @@ export function padVisibleRight(line: string, width: number): string {
 	return `${line}${" ".repeat(Math.max(0, width - visibleWidth(line)))}`;
 }
 
-function getCombinedHeaderWidth(): number {
-	return MASCOT_WIDTH + MASCOT_GAP + HEADER_WIDTH;
-}
-
 export function composeSideBySide(
 	leftLines: string[],
+	leftWidth: number,
 	rightLines: string[],
 	width: number,
+	rightWidth: number,
 ): string[] {
-	const combinedWidth = getCombinedHeaderWidth();
+	const combinedWidth = leftWidth + MASCOT_GAP + rightWidth;
 	if (width < combinedWidth) return rightLines;
 	const leftPad = " ".repeat(
 		Math.max(0, Math.floor((width - combinedWidth) / 2)),
 	);
 	const rows = Math.max(leftLines.length, rightLines.length);
 	const topOffset = Math.max(0, Math.floor((rows - rightLines.length) / 2));
-	return Array.from({ length: rows }, (_, index) => {
-		const left = padVisibleRight(leftLines[index] ?? "", MASCOT_WIDTH);
+	const composedRows: string[] = [];
+	for (let index = 0; index < rows; index += 1) {
+		const left = padVisibleRight(leftLines[index] ?? "", leftWidth);
 		const right = rightLines[index - topOffset] ?? "";
-		return `${leftPad}${left}${" ".repeat(MASCOT_GAP)}${right}`;
-	});
+		composedRows.push(`${leftPad}${left}${" ".repeat(MASCOT_GAP)}${right}`);
+	}
+	return composedRows;
 }
 
 export function internalLineTarget(tui: TUI): number {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "osdy-pi",
-	"version": "0.1.4",
+	"version": "0.1.5",
 	"description": "Osdy Pi package: themes, header, and custom editor for Pi.",
 	"license": "MIT",
 	"type": "module",
@@ -24,7 +24,8 @@
 	"pi": {
 		"themes": [
 			"./themes/osdy-pi-dark.json",
-			"./themes/osdy-pi-light.json"
+			"./themes/osdy-pi-light.json",
+			"./themes/osdy-pi-simple.json"
 		],
 		"extensions": [
 			"./extensions/osdy-pi.ts"

package/themes/osdy-pi-dark.json

@@ -62,6 +62,12 @@
     "syntaxType": "violet",
     "syntaxOperator": "hotPink",
     "syntaxPunctuation": "lavenderGray",
+    "mascotBg": "#F9F7F2",
+    "mascotBright": "#F0E5D7",
+    "mascotLight": "#C7B4A1",
+    "mascotMid": "#7D6F67",
+    "mascotDark": "#2A2321",
+    "htmlPink": "#FF2E8C",
     "thinkingOff": "#3A2852",
     "thinkingMinimal": "lavenderGray",
     "thinkingLow": "purple",

package/themes/osdy-pi-light.json

@@ -62,6 +62,12 @@
     "syntaxType": "violet",
     "syntaxOperator": "hotPink",
     "syntaxPunctuation": "lavenderGray",
+    "mascotBg": "#8F7E73",
+    "mascotBright": "#E8DACB",
+    "mascotLight": "#B79F8E",
+    "mascotMid": "#74665F",
+    "mascotDark": "#2E2725",
+    "htmlPink": "#FF2E8C",
     "thinkingOff": "dimPurple",
     "thinkingMinimal": "lavenderGray",
     "thinkingLow": "purple",

package/themes/osdy-pi-simple.json

@@ -0,0 +1,83 @@
+{
+  "$schema": "https://raw.githubusercontent.com/earendil-works/pi-mono/main/packages/coding-agent/src/modes/interactive/theme/theme-schema.json",
+  "name": "osdy-pi-simple",
+  "vars": {
+    "slate900": "#0B1220",
+    "slate800": "#111827",
+    "slate700": "#1F2937",
+    "slate600": "#475569",
+    "steel": "#94A3B8",
+    "mist": "#CBD5E1",
+    "ice": "#E2E8F0",
+    "deepBlue": "#0A66FF",
+    "royalBlue": "#2563EB",
+    "cyanBlue": "#38BDF8",
+    "ferrari": "#FF2800",
+    "ember": "#FF5A36",
+    "roseRed": "#E11D48"
+  },
+  "colors": {
+    "accent": "ferrari",
+    "border": "royalBlue",
+    "borderAccent": "deepBlue",
+    "borderMuted": "slate600",
+    "success": "cyanBlue",
+    "error": "ember",
+    "warning": "ferrari",
+    "muted": "steel",
+    "dim": "slate600",
+    "text": "ice",
+    "thinkingText": "steel",
+    "selectedBg": "slate700",
+    "userMessageBg": "slate800",
+    "userMessageText": "ice",
+    "customMessageBg": "slate700",
+    "customMessageText": "ice",
+    "customMessageLabel": "deepBlue",
+    "toolPendingBg": "slate800",
+    "toolSuccessBg": "#10263A",
+    "toolErrorBg": "#3B1417",
+    "toolTitle": "deepBlue",
+    "toolOutput": "ice",
+    "mdHeading": "royalBlue",
+    "mdLink": "cyanBlue",
+    "mdLinkUrl": "mist",
+    "mdCode": "deepBlue",
+    "mdCodeBlock": "ice",
+    "mdCodeBlockBorder": "royalBlue",
+    "mdQuote": "steel",
+    "mdQuoteBorder": "slate600",
+    "mdHr": "slate600",
+    "mdListBullet": "ferrari",
+    "toolDiffAdded": "cyanBlue",
+    "toolDiffRemoved": "ember",
+    "toolDiffContext": "steel",
+    "syntaxComment": "slate600",
+    "syntaxKeyword": "ferrari",
+    "syntaxFunction": "cyanBlue",
+    "syntaxVariable": "ice",
+    "syntaxString": "mist",
+    "syntaxNumber": "royalBlue",
+    "syntaxType": "royalBlue",
+    "syntaxOperator": "ember",
+    "syntaxPunctuation": "steel",
+    "mascotBg": "#F4EEE5",
+    "mascotBright": "#E6D8C8",
+    "mascotLight": "#BFA998",
+    "mascotMid": "#7A6B63",
+    "mascotDark": "#241F1D",
+    "htmlPink": "#FF2E8C",
+    "thinkingOff": "slate600",
+    "thinkingMinimal": "steel",
+    "thinkingLow": "royalBlue",
+    "thinkingMedium": "deepBlue",
+    "thinkingHigh": "cyanBlue",
+    "thinkingXhigh": "ember",
+    "bashMode": "royalBlue"
+  },
+  "export": {
+    "pageBg": "slate900",
+    "cardBg": "slate800",
+    "infoBg": "slate700"
+  }
+}