osdy-pi 0.1.3 → 0.1.5

package/README.md

@@ -1,22 +1,32 @@
 # Osdy Pi
 
-![Osdy Pi preview](https://raw.githubusercontent.com/OsdyOrtiz/Osdy-Pi/main/mapche1.png)
+<img width="1857" height="847" alt="image" src="https://github.com/user-attachments/assets/028eeb14-3f43-4f1c-9603-0c55a8d2856d" />
 
 Theme package for [Pi](https://github.com/earendil-works/pi) with the Osdy terminal style: neon pink/purple colors, a custom ASCII header, and a framed editor experience.
 
+Visit the Osdy landing page: [landing-osdy.vercel.app](https://landing-osdy.vercel.app/).
+
 ## What you get
 
 - **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
@@ -43,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`:
@@ -53,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
 
@@ -63,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
 
@@ -83,16 +103,31 @@ To install it from a local path:
 pi install /absolute/path/to/Osdy-Pi
 ```
 
+![Osdy Pi preview](https://raw.githubusercontent.com/OsdyOrtiz/Osdy-Pi/main/mapche1.png)
+
 ## Package contents
 
 ```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

@@ -0,0 +1,99 @@
+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";
+
+const ANIMATION_OVERRIDE_MAP: Record<string, AnimationMode> = {
+	"0": "off",
+	"1": "continuous",
+	off: "off",
+	on: "continuous",
+	intro: "intro",
+	continuous: "continuous",
+};
+
+function getAnimationOverrideMode(
+	override: string | undefined,
+): AnimationMode | undefined {
+	return override ? ANIMATION_OVERRIDE_MAP[override] : undefined;
+}
+
+export function asciiAnimationMode(): AnimationMode {
+	if (!ANIMATION_ENABLED) return "off";
+	return getAnimationOverrideMode(process.env.OSDY_PI_ANIMATION) ?? "intro";
+}
+
+function getAnimatedAsciiColor(
+	wave: number,
+	baseColor: string,
+	highlightColor: string,
+	trailColor: string,
+): string {
+	if (wave <= 3) return highlightColor;
+	if (wave <= 8) return trailColor;
+	return baseColor;
+}
+
+export function animateAsciiLine(
+	line: string,
+	lineIndex: number,
+	frame: number,
+	theme: SimpleTheme,
+	baseColor: string,
+	highlightColor: string,
+	trailColor: string,
+	style: AsciiAnimationStyle,
+): string {
+	if (style === "static") return theme.fg(baseColor, line);
+	return Array.from(line)
+		.map((char, charIndex) => {
+			if (char === " ") return char;
+			const wave = positiveModulo(charIndex + lineIndex * 2 - frame * 5, 44);
+			return theme.fg(
+				getAnimatedAsciiColor(wave, baseColor, highlightColor, trailColor),
+				char,
+			);
+		})
+		.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/border.ts

@@ -0,0 +1,49 @@
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+
+function borderOverflows(left: string, right: string, width: number): boolean {
+	const fixedWidth = 2;
+	const minGap = 1;
+	return fixedWidth + visibleWidth(left) + visibleWidth(right) + minGap > width;
+}
+
+function trimBorderText(value: string): string {
+	return truncateToWidth(value, Math.max(0, visibleWidth(value) - 1), "");
+}
+
+function shrinkBorderTexts(
+	left: string,
+	right: string,
+	width: number,
+): { leftText: string; rightText: string } {
+	let leftText = left;
+	let rightText = right;
+	while (
+		borderOverflows(leftText, rightText, width) &&
+		visibleWidth(rightText) > 0
+	) {
+		rightText = trimBorderText(rightText);
+	}
+	while (
+		borderOverflows(leftText, rightText, width) &&
+		visibleWidth(leftText) > 0
+	) {
+		leftText = trimBorderText(leftText);
+	}
+	return { leftText, rightText };
+}
+
+export function fitBorder(
+	left: string,
+	right: string,
+	width: number,
+	color: (text: string) => string,
+): string {
+	if (width <= 0) return "";
+	if (width === 1) return color("─");
+	const { leftText, rightText } = shrinkBorderTexts(left, right, width);
+	const fillWidth = Math.max(
+		0,
+		width - 2 - visibleWidth(leftText) - visibleWidth(rightText),
+	);
+	return `${color("─")}${leftText}${color("─".repeat(fillWidth))}${rightText}${color("─")}`;
+}

package/extensions/osdy-pi/constants.ts

@@ -0,0 +1,338 @@
+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;
+export const ANIMATION_INTERVAL_MS = 30;
+export const INTRO_ANIMATION_FRAMES = 28;
+export const WORKING_SPINNER_FRAMES = [
+	"⠋",
+	"⠙",
+	"⠹",
+	"⠸",
+	"⠼",
+	"⠴",
+	"⠦",
+	"⠧",
+	"⠇",
+	"⠏",
+];
+export const WORKING_WIDGET_KEY = "osdy-pi-working";
+export const MASCOT_MIN_ROWS = 34;
+export const MASCOT_GAP = 0;
+
+const HTML_MASCOT = [
+	"                                         ▓▓▓▓▒            ",
+	"                                     ░ ▓▓▓  ▒▓            ",
+	"                                  ░░░▓▓▓     ▓▓           ",
+	"                    ▒ ▒ ▒▒    ▒  ░░ ▓▓▓▓    ░▒▓▓          ",
+	"▓▓▓▓▓▓▓▓░░░░░     ░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒    ░░▒▓           ",
+	"▓▓    ▓▓▓▓▓░░░ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░   ░░▒▒           ",
+	"▓▓░    ▒▓▓▓▒░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓▒▒▒▒▒▒▒░░ ░▒▒            ",
+	" ▓▒░░    ▒░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓█▓▓█▓▓▓▓▓▒▒▒░▒▒░            ",
+	"  ▓▒░░   ░▒▒▒▒▒▓▓▓▓▓▒█▒▒▒▒▒▓▓▓▓ ░░░  ▓▓▓▓▒▒▒░░            ",
+	"   ▒▒░░ ░▒▒▒▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒▓▓     ░       ▓ ▒▒░░          ",
+	"    ▒▒▒▒░▒▒▓▓▓▓░     ░▓▒▒▒▒▒   ░▒▒█▓        ▒▓▓▓░▒        ",
+	"     ░ ░▒▒▓▓▒   ▓░░            ░░ ░            ▓▓▓▒       ",
+	"      ░░▒▓░  ░▒░▓▓        ░░                     ░▓▓▒     ",
+	"      ░▒ ▒   ░▒▒▒        ▒▒▒▒ ░                  ▒▒▒      ",
+	"    ░▒▓▓░               ▓▓░░░ █▓ ▒             ░▒▒▒       ",
+	"   ▒▓▓▓░               ▓▓     ▓▓▓▓▓▓▓▓▓       ░░▒         ",
+	"   ▓▓▓░            ░ ▓▓▓▓▓▓▒▓▓▓▓ ▓▓▓▓▓▓▓▒░░░░ ░           ",
+	"  ▒▒▒▒            ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▒▒░░░░               ",
+	"    ▓▒▒░░        ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒▒░░ ▓                  ",
+	"          ░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▒▒  ░░░                      ",
+	"                 ░    ░░░░░░░░░░░▒▒░░       ░ ░ ░  ▓      ",
+	"                ░░░░░▒▒▒▒░░▒░ ▒▒▒▒▒░░     ░░▒▒▒░░░░░░░░   ",
+	"              ▒▒▒▒▒░░░▒▒▒▒▒▒▒▒▒▒▒▒░░░  ▒░░▒▒▒▒▓▓▓▓░░░░    ",
+	"              ░▒▒▒▒▒░ ░░▒▒▒▒▒▒▒▒░░░        ░░▒▓▓▓▓▒▒░░    ",
+	"             ▓░░░░░░ ░ ░░░░░░░░░░░        ░░░░░░▓▒▒▒▒    ░",
+	"              ░░░▒▒▓▓▓▓▓▒░░░░░░░░░░  ░░▒▒▒▒░░░░░░░▒▒░░    ",
+	"              ░▒▒▒▓▓▓▓▓▓▓▓▓▓▒▒▒▒░░░   ░▒▒▒▓▓▒░░░   ░░░▒   ",
+	"             ▒░▒▒▒▓▓▓▓▓▓▓▓▓▓▒▒▒▒▒░░░    ░▒▒▓▓▒░     ░     ",
+	"             ░░▒▒▒▒▒▒▓▓▓▓▓▓▒▒▒▒▒▒░░░░    ░▒▒▒▒▒     ░     ",
+	"             ▒░░░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░░░░░     ▒▒░▒           ",
+	"              ░░░░░░░░░░▒░░▒░▒▒░░░░ ░      ░░░░           ",
+	"                ░░░░      ░░░░░░░░░░░     ░░░░            ",
+	"                  ░          ░░░░░░      ▓                ",
+	"             ░░░░░              ░░░░░░                    ",
+	"                                 ░ ░                      ",
+] as const;
+
+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;
+
+const HEADER_CLASSIC = [
+	"░█████╗░░██████╗██████╗░██╗░░░██╗░░░░░░██████╗░██╗",
+	"██╔══██╗██╔════╝██╔══██╗╚██╗░██╔╝░░░░░░██╔══██╗  ║",
+	"██║░░██║╚█████╗░██║░░██║░╚████╔╝░█████╗██████╔╝██║",
+	"██║░░██║░╚═══██╗██║░░██║░░╚██╔╝░░╚════╝██╔═══╝░██║",
+	"╚█████╔╝██████╔╝██████╔╝░░░██║░░░░░░░░░██║░░░░░██║",
+	"░╚════╝░╚═════╝░╚═════╝░░░░╚═╝░░░░░░░░░╚═╝░░░░░╚═╝",
+	"                                ╭━╮╱╱╱╱╱╱╭╮╱╱╱╱╱╭╮╱╱╱╱╱╭╮╱╱╭╮╭╮╱╱╱╱╭━╮",
+	"                                ┃╭╋━┳━━┳━╋╋╮╭━╮╭╯┣━┳┳╮╭╯┣━╮┣╋╯┣━┳━╮┃━┫",
+	"                                ┃╰┫╋┃┃┃┃╋┃┃╰┫╋╰┫╋┃╋┃╭╯┃╋┃┻┫┃┃╋┃┻┫╋╰╋━┃",
+	"                                ╰━┻━┻┻┻┫╭┻┻━┻━━┻━┻━┻╯╱╰━┻━╯╰┻━┻━┻━━┻━╯",
+	"                                ╱╱╱╱╱╱╱╰╯                        </>",
+] as const;
+
+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",
+] as const;

package/extensions/osdy-pi/format.ts

@@ -0,0 +1,42 @@
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+
+export function formatPath(cwd: string): string {
+	const home = process.env.HOME;
+	return home && cwd.startsWith(home) ? `~${cwd.slice(home.length)}` : cwd;
+}
+
+function getMiddleWidths(maxWidth: number): {
+	headWidth: number;
+	tailWidth: number;
+} {
+	const headWidth = Math.max(1, Math.ceil((maxWidth - 1) / 2));
+	return {
+		headWidth,
+		tailWidth: Math.max(1, maxWidth - 1 - headWidth),
+	};
+}
+
+function getTrailingText(value: string, tailWidth: number): string {
+	const reversedValue = Array.from(value).reverse().join("");
+	return truncateToWidth(reversedValue, tailWidth, "")
+		.split("")
+		.reverse()
+		.join("");
+}
+
+export function truncateMiddle(value: string, maxWidth: number): string {
+	if (maxWidth <= 0) return "";
+	if (visibleWidth(value) <= maxWidth) return value;
+	if (maxWidth <= 3) return truncateToWidth(value, maxWidth);
+	const { headWidth, tailWidth } = getMiddleWidths(maxWidth);
+	const head = truncateToWidth(value, headWidth, "");
+	const tail = getTrailingText(value, tailWidth);
+	return `${head}…${tail}`;
+}
+
+export function shortNumber(value: number): string {
+	if (!Number.isFinite(value)) return "0";
+	if (Math.abs(value) < 1_000) return Math.round(value).toString();
+	if (Math.abs(value) < 1_000_000) return `${(value / 1_000).toFixed(1)}k`;
+	return `${(value / 1_000_000).toFixed(1)}m`;
+}