osdy-pi 1.4.0 → 1.4.1

package/README.md

@@ -33,6 +33,15 @@ Osdy Pi gives [Pi](https://github.com/earendil-works/pi) a themed, responsive te
    pi install git:github.com/OsdyOrtiz/Osdy-Pi
    ```
 
+   Already installed a pinned `npm:osdy-pi@1.3.0` or `npm:osdy-pi@1.4.0` in **normal Pi**? Once 1.4.1 is published, replace the older pin (no uninstall or `--local` needed):
+
+   ```bash
+   pi install npm:osdy-pi@1.4.1
+   pi list
+   ```
+
+   Check that `pi list` shows `npm:osdy-pi@1.4.1`, then restart Pi or run `/reload`. `pi update` does not move a pinned npm version. Installing Osdy does not automatically install Joker; use the [explicit agents setup](#explicit-joker-agents-setup-in-normal-pi) after updating if you want Joker in normal Pi.
+
 2. Start Pi:
 
    ```bash
@@ -208,7 +217,7 @@ Before rename or removal, close this Pi process when it uses the target and **ma
 | Header and mascot | Independently selectable `osdy-theme`/`neon` headers and `current`/`bts` mascots |
 | Messages | Pi-native, theme-aware user and assistant message cards |
 | Input | Responsive auto editor by default, with selectable simple Pi-native or extended framed modes |
-| Status | Custom working spinner, responsive footer metrics, dynamic extension statuses, and Codex subscription quota with low-capacity emphasis |
+| Status | Theme-aware Braille spinner and animated working label, responsive footer metrics, dynamic extension statuses, and Codex subscription quota with low-capacity emphasis |
 | Git | Working-tree summary and a centered, filterable diff panel |
 | Audio | Optional event sounds on macOS and Windows |
 
@@ -326,7 +335,7 @@ The default `auto` editor mode preserves the responsive behavior: it uses the fr
 
 In auto or extended mode at a non-small width, the framed editor shows the model and thinking level in its title and session usage in its footer. For an account-profile launch, the left title shows the active profile name instead of `Osdy-Pi`. When the native editor is effective (simple mode or any small terminal), the Osdy footer instead shows model, active profile when present, thinking, and usage rows before its path/branch and status rows. It uses the currently active Pi/Osdy theme palette; no separate editor theme selector exists. Usage covers input, output, cache read, cache write when present, cost, and context. If Pi supports autocomplete, the editor uses Pi's native autocomplete rendering while the completion UI is visible.
 
-A custom spinner appears above the editor while work is active. Osdy Pi hides Pi's built-in working row while enabled to avoid a duplicate indicator.
+While work is active, Osdy Pi shows the original Braille spinner above the editor in the selected theme's accent color. A highlight travels across the `Working...` and `Running ...` letters using the active theme's accent and text colors; the spinner and label update when the theme changes. Osdy Pi hides Pi's built-in working row while enabled to avoid a duplicate indicator.
 
 ## Working tree and diff
 

package/extensions/osdy-pi/ui.ts

@@ -39,9 +39,9 @@ import {
 	STACKED_HEADER_MIN_ROWS,
 	type MascotConfig,
 	type ScaledHeaderArt,
-	WORKING_SPINNER_FRAMES,
 } from "./constants.js";
 import { formatPath } from "./format.js";
+import { renderWorkingWidget } from "./working-animation.js";
 import { contextUsageData, modelLabel } from "./metrics.js";
 import {
 	formatModelMetadata,
@@ -363,13 +363,7 @@ class OsdyWorkingWidget implements Component {
 	}
 
 	render(width: number): string[] {
-		if (!this.state.active) return [];
-		const frame =
-			WORKING_SPINNER_FRAMES[this.state.frame % WORKING_SPINNER_FRAMES.length] ??
-			WORKING_SPINNER_FRAMES[0] ??
-			"⠋";
-		const line = `${this.theme.fg("accent", frame)} ${this.theme.fg("muted", this.state.label)}`;
-		return [fitCenterVisible(line, width)];
+		return renderWorkingWidget(this.state, this.theme, width);
 	}
 
 	invalidate(): void {}

package/extensions/osdy-pi/working-animation.test.ts

@@ -0,0 +1,101 @@
+import assert from "node:assert/strict";
+import { registerHooks } from "node:module";
+import test from "node:test";
+import { visibleWidth } from "@earendil-works/pi-tui";
+import type { SimpleTheme, WorkingWidgetState } from "./types.js";
+
+registerHooks({
+	resolve(specifier, context, nextResolve) {
+		if (
+			context.parentURL?.includes("/extensions/osdy-pi/") &&
+			specifier.startsWith("./") &&
+			specifier.endsWith(".js")
+		) {
+			return nextResolve(`${specifier.slice(0, -3)}.ts`, context);
+		}
+		return nextResolve(specifier, context);
+	},
+});
+
+// @ts-expect-error Node's native TypeScript runner resolves test-only TypeScript source imports.
+const { renderWorkingWidget } = await import("./working-animation.ts");
+// @ts-expect-error Node's native TypeScript runner resolves test-only TypeScript source imports.
+const { WORKING_SPINNER_FRAMES } = await import("./constants.ts");
+
+function state(label: string, frame = 0, active = true): WorkingWidgetState {
+	return { active, label, frame, timer: undefined, tui: undefined };
+}
+
+function theme(base: string, accent: string, muted: string): SimpleTheme {
+	return {
+		fg(name, text) {
+			const color = name === "accent" ? accent : name === "muted" ? muted : base;
+			return `\u001B[${color}m${text}\u001B[0m`;
+		},
+	};
+}
+
+const palette = theme("37", "33", "90");
+void test("original Braille frames advance every 80ms tick, wrap at ten, and use theme accent", () => {
+	assert.equal(WORKING_SPINNER_FRAMES.length, 10);
+	for (let frame = 0; frame <= WORKING_SPINNER_FRAMES.length; frame += 1) {
+		const glyph = WORKING_SPINNER_FRAMES[frame % WORKING_SPINNER_FRAMES.length] ?? "";
+		const spinner = palette.fg("accent", glyph);
+		const line = renderWorkingWidget(state("Working...", frame), palette, 40)[0] ?? "";
+		assert.ok(line.includes(`${spinner} `), `frame ${frame} uses accent Braille ${glyph}`);
+		assert.equal(visibleWidth(spinner), 1);
+	}
+	const at = (frame: number) => renderWorkingWidget(state("Working...", frame), palette, 40)[0] ?? "";
+	assert.ok(at(0).includes(`${palette.fg("accent", WORKING_SPINNER_FRAMES[0] ?? "")} ${palette.fg("accent", "W")}${palette.fg("text", "o")}`));
+	assert.ok(at(1).includes(`${palette.fg("accent", WORKING_SPINNER_FRAMES[1] ?? "")} ${palette.fg("text", "W")}${palette.fg("accent", "o")}`));
+	const runningAt = (frame: number) => renderWorkingWidget(state("Running build...", frame), palette, 40)[0] ?? "";
+	assert.notEqual(runningAt(0), runningAt(10), "letter wave advances when the spinner wraps");
+});
+
+void test("Running label skips spaces, wraps its one highlighted grapheme, and follows theme on next render", () => {
+	const label = "Running build...";
+	const changedTheme = theme("36", "35", "34");
+	const first = renderWorkingWidget(state(label, 7), palette, 40)[0] ?? "";
+	const changed = renderWorkingWidget(state(label, 7), changedTheme, 40)[0] ?? "";
+	assert.ok(first.includes(`${palette.fg("accent", WORKING_SPINNER_FRAMES[7] ?? "")} `));
+	assert.ok(changed.includes(`${changedTheme.fg("accent", WORKING_SPINNER_FRAMES[7] ?? "")} `));
+	assert.ok(first.includes(`${palette.fg("text", "g")} ${palette.fg("accent", "b")}`));
+	assert.ok(changed.includes(`${changedTheme.fg("text", "g")} ${changedTheme.fg("accent", "b")}`));
+	assert.ok(changed.includes(changedTheme.fg("text", "R")));
+	assert.ok(renderWorkingWidget(state("A B", 1), palette, 20)[0]?.includes(
+		`${palette.fg("text", "A")} ${palette.fg("accent", "B")}`,
+	));
+	assert.ok(renderWorkingWidget(state("AB", 2), palette, 20)[0]?.includes(
+		`${palette.fg("accent", "A")}${palette.fg("text", "B")}`,
+	));
+});
+
+void test("tab-separated label skips whitespace when advancing the highlight", () => {
+	const label = "A\tB";
+	const line = renderWorkingWidget(state(label, 1), palette, 20)[0] ?? "";
+	assert.ok(line.includes(`${palette.fg("accent", WORKING_SPINNER_FRAMES[1] ?? "")} ${palette.fg("text", "A")}\t${palette.fg("accent", "B")}`));
+	assert.equal(visibleWidth(line.trimStart()), 2 + visibleWidth(label));
+});
+
+void test("combining marks and ZWJ emoji remain whole graphemes in the traveling wave", () => {
+	const label = "A\u0301👩‍💻 B";
+	for (const [frame, expected] of [
+		[0, `${palette.fg("accent", "A\u0301")}${palette.fg("text", "👩‍💻")} ${palette.fg("text", "B")}`],
+		[1, `${palette.fg("text", "A\u0301")}${palette.fg("accent", "👩‍💻")} ${palette.fg("text", "B")}`],
+		[2, `${palette.fg("text", "A\u0301")}${palette.fg("text", "👩‍💻")} ${palette.fg("accent", "B")}`],
+	] as const) {
+		const line = renderWorkingWidget(state(label, frame), palette, 40)[0] ?? "";
+		assert.ok(line.includes(`${palette.fg("accent", WORKING_SPINNER_FRAMES[frame] ?? "")} ${expected}`), `frame ${frame} preserves graphemes`);
+		assert.equal(visibleWidth(line.trimStart()), 2 + visibleWidth(label));
+	}
+});
+
+void test("inactive widget renders nothing; narrow output fits and full output stays centered", () => {
+	assert.deepEqual(renderWorkingWidget(state("Working...", 18, false), palette, 20), []);
+	for (const frame of [0, 2, 4, 6]) {
+		const line = renderWorkingWidget(state("Working...", frame), palette, 5)[0] ?? "";
+		assert.equal(visibleWidth(line), 5);
+	}
+	const centered = renderWorkingWidget(state("Working..."), palette, 20)[0] ?? "";
+	assert.equal(centered.match(/^ */)?.[0].length, 4);
+});

package/extensions/osdy-pi/working-animation.ts

@@ -0,0 +1,27 @@
+import { WORKING_SPINNER_FRAMES } from "./constants.js";
+import type { SimpleTheme, WorkingWidgetState } from "./types.js";
+import { fitCenterVisible } from "./utils.js";
+const graphemes = new Intl.Segmenter(undefined, { granularity: "grapheme" });
+const isWhitespace = (segment: string) => /\s/u.test(segment);
+
+/** Render the theme-accent Braille spinner beside a theme-aware traveling letter highlight. */
+export function renderWorkingWidget(
+	state: WorkingWidgetState,
+	theme: SimpleTheme,
+	width: number,
+): string[] {
+	if (!state.active) return [];
+	const spinner = WORKING_SPINNER_FRAMES[state.frame % WORKING_SPINNER_FRAMES.length] ?? "";
+	const segments = [...graphemes.segment(state.label)].map(({ segment }) => segment);
+	const letterCount = segments.filter((segment) => !isWhitespace(segment)).length;
+	const highlighted = letterCount > 0 ? state.frame % letterCount : -1;
+	let letterIndex = 0;
+	const label = segments
+		.map((segment) => {
+			if (isWhitespace(segment)) return segment;
+			const color = letterIndex++ === highlighted ? "accent" : "text";
+			return theme.fg(color, segment);
+		})
+		.join("");
+	return [fitCenterVisible(`${theme.fg("accent", spinner)} ${label}`, width)];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "osdy-pi",
-	"version": "1.4.0",
+	"version": "1.4.1",
 	"description": "Osdy Pi package: themes, header, and custom editor for Pi.",
 	"license": "MIT",
 	"type": "module",