osdy-pi 0.1.2 → 0.1.4

package/README.md

@@ -1,9 +1,11 @@
 # Osdy Pi
 
-<img width="1857" height="847" alt="image" src="https://github.com/user-attachments/assets/84907a2b-4913-41a1-bc6e-1840490d5404" />
+<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.
@@ -14,7 +16,6 @@ Theme package for [Pi](https://github.com/earendil-works/pi) with the Osdy termi
 
 <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:
@@ -84,6 +85,8 @@ 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

package/extensions/osdy-pi/animation.ts

@@ -0,0 +1,59 @@
+import { ANIMATION_ENABLED } from "./constants.js";
+import type { AnimationMode, SimpleTheme } from "./types.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("");
+}

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,75 @@
+import { visibleWidth } from "@earendil-works/pi-tui";
+
+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;
+
+export const MASCOT = [
+	"                  %%  %%%@@             @@%%% @%%",
+	"                 %= --- -=#% @@@@@@@@@%%%-- ----#%",
+	"                 %- -*#@ =+**-------:-**- %%#*--#%",
+	"                 %- -*#%*-----------------*%#*--#%",
+	"                  %+-#*---------------------**-+%",
+	"                   %#=--=-  ==-------=   ----=*%",
+	"                  %+--  ***** ------  ****   -=*%",
+	"                @%%  ****%% %*=-----**% %****# #%%@",
+	"               @%# ******%%%%*=--==-**%%%%*****#--%",
+	"                %%#*******##*# %%%%  **%#*******%%@",
+	"                  %%%#******  %@%%@%   ******#%@%",
+	"                     %%%::               ::#%@    %%%%%",
+	"                        %%%**::::::::::%%%     %%#-****%%",
+	"                       %#---: :   :: ::-=+%%%%%=-::::+*#%",
+	"                      %%----- :     ::----*%%%*****-:::#%",
+	"                      #*------ :   ::-----**#+-:=+***=-*%",
+	"                   %%%+*=+------ ::------+*=+%-:::-*##+%%",
+	"                   %*---**-----*  **----+*--=+%=---=*#%",
+	"                   %**+==%*----*==%=----##==+*%#+--*%%",
+	"                    %%#%#%@+=+++%%++++==%##%#%#%%%%",
+	"                ----=+%%%#%%#%*##%###*#%%##%%==---------",
+	"                           ##****=*****==",
+] as const;
+
+export const MASCOT_WIDTH = MASCOT.reduce(
+	(maxWidth, line) => Math.max(maxWidth, visibleWidth(line)),
+	0,
+);
+
+export const HEADER = [
+	"░█████╗░░██████╗██████╗░██╗░░░██╗░░░░░░██████╗░██╗",
+	"██╔══██╗██╔════╝██╔══██╗╚██╗░██╔╝░░░░░░██╔══██╗  ║",
+	"██║░░██║╚█████╗░██║░░██║░╚████╔╝░█████╗██████╔╝██║",
+	"██║░░██║░╚═══██╗██║░░██║░░╚██╔╝░░╚════╝██╔═══╝░██║",
+	"╚█████╔╝██████╔╝██████╔╝░░░██║░░░░░░░░░██║░░░░░██║",
+	"░╚════╝░╚═════╝░╚═════╝░░░░╚═╝░░░░░░░░░╚═╝░░░░░╚═╝",
+	"                                ╭━╮╱╱╱╱╱╱╭╮╱╱╱╱╱╭╮╱╱╱╱╱╭╮╱╱╭╮╭╮╱╱╱╱╭━╮",
+	"                                ┃╭╋━┳━━┳━╋╋╮╭━╮╭╯┣━┳┳╮╭╯┣━╮┣╋╯┣━┳━╮┃━┫",
+	"                                ┃╰┫╋┃┃┃┃╋┃┃╰┫╋╰┫╋┃╋┃╭╯┃╋┃┻┫┃┃╋┃┻┫╋╰╋━┃",
+	"                                ╰━┻━┻┻┻┫╭┻┻━┻━━┻━┻━┻╯╱╰━┻━╯╰┻━┻━┻━━┻━╯",
+	"                                ╱╱╱╱╱╱╱╰╯                        </>",
+] as const;
+
+export const HEADER_WIDTH = HEADER.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`;
+}

package/extensions/osdy-pi/metrics.ts

@@ -0,0 +1,210 @@
+import {
+	type ExtensionAPI,
+	type ExtensionContext,
+	VERSION,
+} from "@earendil-works/pi-coding-agent";
+import { truncateToWidth } from "@earendil-works/pi-tui";
+import { formatPath, shortNumber, truncateMiddle } from "./format.js";
+import type {
+	AssistantSessionEntry,
+	HeaderMetaRow,
+	OsdyState,
+	SimpleTheme,
+} from "./types.js";
+import { centerVisible, fitCenterVisible } from "./utils.js";
+
+function isAssistantSessionEntry(
+	entry: unknown,
+): entry is AssistantSessionEntry {
+	if (!entry || typeof entry !== "object") return false;
+	const candidate = entry as { type?: unknown; message?: unknown };
+	if (candidate.type !== "message") return false;
+	if (!candidate.message || typeof candidate.message !== "object") return false;
+	const message = candidate.message as { role?: unknown };
+	return message.role === "assistant";
+}
+
+export function modelLabel(ctx: ExtensionContext): string {
+	const model = ctx.model;
+	if (!model) return "no model";
+	return model.provider ? `${model.provider}/${model.id}` : model.id;
+}
+
+function getContextLabel(ctx: ExtensionContext): string {
+	const context = ctx.getContextUsage();
+	const contextWindow = context?.contextWindow ?? ctx.model?.contextWindow;
+	const percent = context?.percent ?? null;
+	return contextWindow
+		? `ctx ${percent === null ? "?" : Math.round(percent)}%/${shortNumber(contextWindow)}`
+		: "ctx ?";
+}
+
+function getCacheLabel(totals: UsageTotals): string {
+	return totals.cacheRead || totals.cacheWrite
+		? ` R${shortNumber(totals.cacheRead)} W${shortNumber(totals.cacheWrite)}`
+		: "";
+}
+
+export function usageLabel(ctx: ExtensionContext): string {
+	const totals = collectUsageTotals(ctx);
+	const cacheText = getCacheLabel(totals);
+	const ctxText = getContextLabel(ctx);
+	return ` tok ↑${shortNumber(totals.input)} ↓${shortNumber(totals.output)}${cacheText} · $${totals.cost.toFixed(4)} · ${ctxText} `;
+}
+
+type UsageTotals = {
+	input: number;
+	output: number;
+	cacheRead: number;
+	cacheWrite: number;
+	cost: number;
+};
+
+function createUsageTotals(): UsageTotals {
+	return {
+		input: 0,
+		output: 0,
+		cacheRead: 0,
+		cacheWrite: 0,
+		cost: 0,
+	};
+}
+
+function mergeUsageTotals(
+	totals: UsageTotals,
+	entry: AssistantSessionEntry,
+): UsageTotals {
+	const usage = entry.message?.usage;
+	if (!usage) return totals;
+	return {
+		input: totals.input + (usage.input ?? 0),
+		output: totals.output + (usage.output ?? 0),
+		cacheRead: totals.cacheRead + (usage.cacheRead ?? 0),
+		cacheWrite: totals.cacheWrite + (usage.cacheWrite ?? 0),
+		cost: totals.cost + (usage.cost?.total ?? 0),
+	};
+}
+
+function collectUsageTotals(ctx: ExtensionContext): UsageTotals {
+	return ctx.sessionManager
+		.getEntries()
+		.reduce<UsageTotals>((totals, entry) => {
+			return isAssistantSessionEntry(entry)
+				? mergeUsageTotals(totals, entry)
+				: totals;
+		}, createUsageTotals());
+}
+
+function getToolSources(pi: ExtensionAPI) {
+	return pi.getAllTools().map((tool) => ({
+		name: tool.name.toLowerCase(),
+		origin: tool.sourceInfo?.origin?.toLowerCase() ?? "",
+		source: tool.sourceInfo?.source?.toLowerCase() ?? "",
+		path: tool.sourceInfo?.path?.toLowerCase() ?? "",
+	}));
+}
+
+function isMcpTool(tool: ReturnType<typeof getToolSources>[number]): boolean {
+	return tool.name.includes("mcp") || tool.source.includes("mcp");
+}
+
+function getToolServerKey(
+	tool: ReturnType<typeof getToolSources>[number],
+): string {
+	return tool.source || tool.path || tool.name;
+}
+
+function getMcpServerCount(pi: ExtensionAPI): number {
+	const serverKeys = new Set(
+		getToolSources(pi).filter(isMcpTool).map(getToolServerKey),
+	);
+	return serverKeys.size;
+}
+
+function countToolsByOrigin(pi: ExtensionAPI, origin: string): number {
+	return getToolSources(pi).filter((tool) => tool.origin === origin).length;
+}
+
+function countToolsBySource(pi: ExtensionAPI, source: string): number {
+	return getToolSources(pi).filter((tool) => tool.source.includes(source))
+		.length;
+}
+
+function getPathWidth(width: number): number {
+	return width < 110 ? 34 : 52;
+}
+
+export function renderHeaderMetadata(
+	pi: ExtensionAPI,
+	ctx: ExtensionContext,
+	state: OsdyState,
+	width: number,
+): HeaderMetaRow[] {
+	const allTools = pi.getAllTools().length;
+	const git = state.gitLabel === "no-git" ? "Not a git repo" : state.gitLabel;
+	const path = truncateMiddle(formatPath(ctx.cwd), getPathWidth(width));
+	const mcpServerCount = getMcpServerCount(pi);
+	const pluginCount = countToolsByOrigin(pi, "package");
+	const extensionCount = countToolsBySource(pi, "extension");
+	return [
+		{
+			leftLabel: "GIT:",
+			leftValue: git,
+			rightLabel: "PATH:",
+			rightValue: path,
+		},
+		{
+			leftLabel: "MCP:",
+			leftValue: `${mcpServerCount} servers`,
+			rightLabel: "PLUGINS:",
+			rightValue: `${pluginCount} package`,
+		},
+		{
+			leftLabel: "AGENTS:",
+			leftValue: `${state.agentsLabel} loaded`,
+			rightLabel: "EXTENSIONS:",
+			rightValue: `${extensionCount} active`,
+		},
+		{
+			leftLabel: "VER:",
+			leftValue: VERSION,
+			rightLabel: "TOOLS:",
+			rightValue: `${allTools} customs`,
+		},
+	];
+}
+
+export function renderMetaRows(
+	rows: HeaderMetaRow[],
+	width: number,
+	theme: SimpleTheme,
+): string[] {
+	const labelWidth = 11;
+	const leftValueWidth = 32;
+	const rightValueWidth = 52;
+	const gapWidth = 10;
+	const blockWidth =
+		labelWidth +
+		1 +
+		leftValueWidth +
+		gapWidth +
+		labelWidth +
+		1 +
+		rightValueWidth;
+	return rows.map((row) => {
+		const leftLabel = theme.fg("mdLink", row.leftLabel.padEnd(labelWidth));
+		const leftValue = theme.fg(
+			"accent",
+			truncateToWidth(row.leftValue, leftValueWidth).padEnd(leftValueWidth),
+		);
+		const rightLabel = theme.fg("mdLink", row.rightLabel.padEnd(labelWidth));
+		const rightValue = theme.fg(
+			"accent",
+			truncateToWidth(row.rightValue, rightValueWidth).padEnd(rightValueWidth),
+		);
+		const rowText = `${leftLabel} ${leftValue}${" ".repeat(gapWidth)}${rightLabel} ${rightValue}`;
+		return width >= blockWidth
+			? centerVisible(rowText, width)
+			: fitCenterVisible(rowText, width);
+	});
+}

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

@@ -0,0 +1,101 @@
+import type {
+	ExtensionAPI,
+	ExtensionContext,
+} from "@earendil-works/pi-coding-agent";
+import { asciiAnimationMode } from "./animation.js";
+import { THEME_NAME, WORKING_WIDGET_KEY } from "./constants.js";
+import { modelLabel, usageLabel } from "./metrics.js";
+import type { OsdyState, WorkingWidgetState } from "./types.js";
+import {
+	createEditorComponent,
+	createFooterComponent,
+	createHeaderComponent,
+	createWorkingWidgetFactory,
+} from "./ui.js";
+
+function shouldRememberTheme(
+	previousThemeName: string | undefined,
+	currentTheme: string | undefined,
+): currentTheme is string {
+	return (
+		previousThemeName === undefined &&
+		currentTheme !== undefined &&
+		currentTheme !== THEME_NAME
+	);
+}
+
+export function rememberPreviousTheme(
+	ctx: ExtensionContext,
+	state: OsdyState,
+): void {
+	const currentTheme = ctx.ui.theme.name;
+	if (shouldRememberTheme(state.previousThemeName, currentTheme)) {
+		state.previousThemeName = currentTheme;
+	}
+}
+
+export function applyOsdyTheme(ctx: ExtensionContext): void {
+	const osdyTheme = ctx.ui.getTheme(THEME_NAME);
+	const themeResult = osdyTheme
+		? ctx.ui.setTheme(osdyTheme)
+		: ctx.ui.setTheme(THEME_NAME);
+	if (!themeResult.success) {
+		ctx.ui.notify(
+			`osdy-pi theme failed: ${themeResult.error ?? "unknown error"}`,
+			"warning",
+		);
+	}
+}
+
+export function mountOsdyUi(
+	pi: ExtensionAPI,
+	ctx: ExtensionContext,
+	state: OsdyState,
+	workingState: WorkingWidgetState,
+): void {
+	ctx.ui.setHeader(createHeaderComponent(pi, ctx, state));
+	ctx.ui.setFooter((_tui, theme, footerData) =>
+		createFooterComponent(ctx, footerData, theme),
+	);
+	ctx.ui.setWorkingVisible(false);
+	ctx.ui.setWidget(
+		WORKING_WIDGET_KEY,
+		createWorkingWidgetFactory(workingState),
+		{ placement: "aboveEditor" },
+	);
+	ctx.ui.setEditorComponent(createEditorComponent(pi, ctx));
+}
+
+export function applyOsdyPi(
+	pi: ExtensionAPI,
+	ctx: ExtensionContext,
+	state: OsdyState,
+	workingState: WorkingWidgetState,
+	notify = false,
+): void {
+	if (!ctx.hasUI) return;
+	rememberPreviousTheme(ctx, state);
+	applyOsdyTheme(ctx);
+	mountOsdyUi(pi, ctx, state, workingState);
+	if (notify) ctx.ui.notify("osdy-pi enabled", "info");
+}
+
+export function disableOsdyPi(ctx: ExtensionContext, state: OsdyState): void {
+	if (!ctx.hasUI) return;
+	ctx.ui.setHeader(undefined);
+	ctx.ui.setEditorComponent(undefined);
+	ctx.ui.setFooter(undefined);
+	ctx.ui.setWidget(WORKING_WIDGET_KEY, undefined);
+	ctx.ui.setWorkingVisible(true);
+	const targetTheme = state.previousThemeName ?? "dark";
+	const result = ctx.ui.setTheme(targetTheme);
+	if (!result.success && targetTheme !== "dark") ctx.ui.setTheme("dark");
+	ctx.ui.notify("osdy-pi disabled", "info");
+}
+
+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()}`,
+		"info",
+	);
+}