@oh-my-pi/pi-tui 18.0.9 → 18.0.11

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 ## [Unreleased]
 
+## [18.0.11] - 2026-08-29
+
+### Added
+
+- Added `setTerminalHyperlinks()` to let hosts control OSC 8 hyperlink behavior in rendered Markdown links.
+
+### Fixed
+
+- Fixed inline color swatches appearing for words with hex-like prefixes, such as `#each`; swatches now appear only when the entire word is a valid color.
+
+## [18.0.10] - 2026-08-28
+
+### Added
+
+- Press the Right Arrow at the end of a line to accept autocomplete suggestions, inline ghost-text completions, and spelling corrections, just like Tab.
+- Added a smooth brand-color transition and an elapsed turn timer to the status line while the agent is working.
+- Added a full-width “band” composer style for flush status lines.
+
 ## [18.0.9] - 2026-08-28
 
 ### Added

package/dist/types/components/composer/band.d.ts

@@ -0,0 +1,2 @@
+import type { ComposerStyle } from "./types.js";
+export declare const bandComposerStyle: ComposerStyle;

package/dist/types/components/composer/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./band.js";
 export * from "./borderless.js";
 export * from "./box.js";
 export * from "./claude.js";

package/dist/types/components/composer/registry.d.ts

@@ -1,6 +1,13 @@
 import type { ComposerStyle, EditorBorderStyle } from "./types.js";
 /** Whether an id names a composer style shipped by pi-tui. */
 export declare function isBuiltinComposerStyle(id: string): boolean;
+/**
+ * Whether a style paints its own row foreground.
+ *
+ * Extensions registered before `filledSurface` existed received undecorated
+ * row text, so an omitted flag remains filled for extension-owned ids.
+ */
+export declare function isFilledComposerStyle(style: ComposerStyle): boolean;
 /**
  * Register one extension-owned composer style for this process.
  *

package/dist/types/components/composer/types.d.ts

@@ -10,7 +10,7 @@ import type { SymbolTheme } from "../../symbols.js";
 /** Box-drawing glyph set used for composer chrome (the theme's `boxRound`). */
 export type ComposerBox = SymbolTheme["boxRound"];
 /** Built-in composer shape identifiers shipped by pi-tui. */
-export declare const BUILTIN_EDITOR_BORDER_STYLES: readonly ["box", "claude", "pi", "borderless", "rule", "field", "rail"];
+export declare const BUILTIN_EDITOR_BORDER_STYLES: readonly ["box", "band", "claude", "pi", "borderless", "rule", "field", "rail"];
 /** Identifier for a built-in composer shape. */
 export type BuiltinEditorBorderStyle = (typeof BUILTIN_EDITOR_BORDER_STYLES)[number];
 /** Composer shape identifier; extensions may register additional strings. */
@@ -60,14 +60,20 @@ export interface ComposerRowContext extends ComposerChromeContext {
 }
 export interface ComposerStyle {
     readonly id: EditorBorderStyle;
+    /**
+     * True when rows paint their own foreground through `surfaceColor`.
+     * Built-ins default to transparent; registered extensions that omit this
+     * field retain the pre-field behavior and receive undecorated row text.
+     */
+    readonly filledSurface?: boolean;
     /** Content rows carry left/right border glyphs; drives the cursor-reserve
      *  column, IME-safe layout, and the right-border scrollbar. */
     readonly sideBorders: boolean;
     /** Rows consumed by top+bottom chrome (drives maxHeight budgeting). */
     readonly verticalChrome: 0 | 1 | 2;
     /** Where the host should attach the status bar: embedded in the top border,
-     * docked onto a top rule, or detached into a standalone bottom bar. */
-    readonly statusAttachment: "top-border" | "top-rule-chip" | "none";
+     * rendered as a flush soft-capped band above the input, docked onto a top rule, or detached into a standalone bottom bar. */
+    readonly statusAttachment: "top-border" | "top-band" | "top-rule-chip" | "none";
     /** Which segment groups the standalone bottom status bar shows. */
     readonly bottomBar: "none" | "left" | "full";
     /** Insert a blank spacer row between the editor and the standalone bottom

package/dist/types/components/editor.d.ts

@@ -10,6 +10,8 @@ export interface EditorTheme {
     accentColor?: (str: string) => string;
     /** Background fill used by filled composer styles. */
     surfaceColor?: (str: string) => string;
+    /** Foreground used when the composer shape leaves its text surface transparent. */
+    textColor?: (str: string) => string;
     selectList: SelectListTheme;
     symbols: SymbolTheme;
     editorPaddingX?: number;

package/dist/types/components/loader.d.ts

@@ -1,5 +1,7 @@
 import type { TUI } from "../tui.js";
 import { Text } from "./text.js";
+/** Milliseconds between spinner-frame advances; exported so time-derived spinners elsewhere tick at the Loader cadence. */
+export declare const SPINNER_ADVANCE_MS = 80;
 type ColorFn = (str: string) => string;
 /**
  * Styles Loader message fragments without changing their visible text or width.
@@ -22,6 +24,10 @@ export declare class Loader extends Text {
     stop(): void;
     /** Lifecycle teardown: stop the animation timer. Idempotent. */
     dispose(): void;
+    /** Install a lazy right-docked suffix for the spinner row (e.g. a styled
+     * session title). Re-evaluated every paint; dropped when the row leaves
+     * less than a two-cell gap. */
+    setTrailer(trailer: (() => string | undefined) | undefined): void;
     setMessage(message: string): void;
 }
 export {};

package/dist/types/terminal-capabilities.d.ts

@@ -206,6 +206,15 @@ export declare function setTerminalScreenToScrollback(enabled: boolean): void;
  * capability); tests flip it directly to exercise the scaled-heading path.
  */
 export declare function setTerminalTextSizing(enabled: boolean): void;
+/**
+ * Override OSC 8 hyperlink capability at runtime. The coding-agent calls this
+ * from the `tui.hyperlinks` setting so its resolved policy (`off`/`auto`/`always`)
+ * drives every renderer that gates on {@link TERMINAL}`.hyperlinks` — notably the
+ * Markdown component's `[text](url)`/bare-URL links — consistently with the
+ * path/resource links that already consult the setting directly. Tests flip it
+ * to exercise the OSC 8 and plain-text paths deterministically.
+ */
+export declare function setTerminalHyperlinks(enabled: boolean): void;
 export declare function getTerminalInfo(terminalId: TerminalId, platform?: NodeJS.Platform, env?: NodeJS.ProcessEnv): TerminalInfo;
 export interface CellDimensions {
     widthPx: number;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"name": "@oh-my-pi/pi-tui",
-	"version": "18.0.9",
+	"version": "18.0.11",
 	"description": "Terminal User Interface library with differential rendering for efficient text-based applications",
 	"homepage": "https://omp.sh",
 	"author": "Stencil Labs, Inc.",
@@ -37,8 +37,8 @@
 		"fmt": "biome format --write ."
 	},
 	"dependencies": {
-		"@oh-my-pi/pi-natives": "18.0.9",
-		"@oh-my-pi/pi-utils": "18.0.9"
+		"@oh-my-pi/pi-natives": "18.0.11",
+		"@oh-my-pi/pi-utils": "18.0.11"
 	},
 	"devDependencies": {
 		"kitty-vt-wasm": "^0.2.0"

package/src/components/composer/band.ts

@@ -0,0 +1,42 @@
+/**
+ * Soft status band composer (the rust omp default): the full status line sits
+ * flush against the terminal's left edge as a filled powerline band with a
+ * soft opening cap — no frame, rules, or corners — above an unboxed prompt
+ * anchored by a single curved `╰─ ` cue.
+ */
+import { truncateToWidth } from "../../utils";
+import type { ComposerChromeContext, ComposerRowContext, ComposerStyle } from "./types";
+
+export const bandComposerStyle: ComposerStyle = {
+	id: "band",
+	sideBorders: false,
+	verticalChrome: 1,
+	statusAttachment: "top-band",
+	bottomBar: "none",
+	bottomBarGap: false,
+	defaultPromptGutter: "╰─ ",
+
+	defaultPaddingX(): number {
+		return 0;
+	},
+
+	sideChromeWidth(): number {
+		return 0;
+	},
+
+	renderTop(ctx: ComposerChromeContext): string | undefined {
+		const { topBorder, width } = ctx;
+		if (!topBorder?.content) return undefined;
+		// The band builder already sizes its groups + gauge to the full width;
+		// truncation only guards against a stale provider during resize.
+		return topBorder.width > width ? truncateToWidth(topBorder.content, width) : topBorder.content;
+	},
+
+	renderRow(ctx: ComposerRowContext): string[] {
+		return [(ctx.gutter ? ctx.borderColor(ctx.gutter) : "") + ctx.text + ctx.pad];
+	},
+
+	renderBottom(): undefined {
+		return undefined;
+	},
+};

package/src/components/composer/field.ts

@@ -11,6 +11,7 @@ const RIGHT_CAP = "▌";
 /** One-row filled field with accent caps. */
 export const fieldComposerStyle: ComposerStyle = {
 	id: "field",
+	filledSurface: true,
 	sideBorders: true,
 	verticalChrome: 0,
 	statusAttachment: "none",

package/src/components/composer/index.ts

@@ -1,3 +1,4 @@
+export * from "./band";
 export * from "./borderless";
 export * from "./box";
 export * from "./claude";

package/src/components/composer/rail.ts

@@ -10,6 +10,7 @@ const ACCENT_RAIL = "▎";
 /** Filled composer surface anchored by a single left accent rail. */
 export const railComposerStyle: ComposerStyle = {
 	id: "rail",
+	filledSurface: true,
 	sideBorders: true,
 	verticalChrome: 0,
 	statusAttachment: "none",

package/src/components/composer/registry.ts

@@ -1,3 +1,4 @@
+import { bandComposerStyle } from "./band";
 import { borderlessComposerStyle } from "./borderless";
 import { boxComposerStyle } from "./box";
 import { claudeComposerStyle } from "./claude";
@@ -9,6 +10,7 @@ import type { ComposerStyle, EditorBorderStyle } from "./types";
 
 const BUILTIN_COMPOSER_STYLES: Readonly<Record<string, ComposerStyle>> = {
 	box: boxComposerStyle,
+	band: bandComposerStyle,
 	claude: claudeComposerStyle,
 	pi: piComposerStyle,
 	borderless: borderlessComposerStyle,
@@ -23,6 +25,16 @@ export function isBuiltinComposerStyle(id: string): boolean {
 	return Object.hasOwn(BUILTIN_COMPOSER_STYLES, id);
 }
 
+/**
+ * Whether a style paints its own row foreground.
+ *
+ * Extensions registered before `filledSurface` existed received undecorated
+ * row text, so an omitted flag remains filled for extension-owned ids.
+ */
+export function isFilledComposerStyle(style: ComposerStyle): boolean {
+	return style.filledSurface ?? !isBuiltinComposerStyle(style.id);
+}
+
 /**
  * Register one extension-owned composer style for this process.
  *

package/src/components/composer/types.ts

@@ -12,7 +12,16 @@ import type { SymbolTheme } from "../../symbols";
 export type ComposerBox = SymbolTheme["boxRound"];
 
 /** Built-in composer shape identifiers shipped by pi-tui. */
-export const BUILTIN_EDITOR_BORDER_STYLES = ["box", "claude", "pi", "borderless", "rule", "field", "rail"] as const;
+export const BUILTIN_EDITOR_BORDER_STYLES = [
+	"box",
+	"band",
+	"claude",
+	"pi",
+	"borderless",
+	"rule",
+	"field",
+	"rail",
+] as const;
 
 /** Identifier for a built-in composer shape. */
 export type BuiltinEditorBorderStyle = (typeof BUILTIN_EDITOR_BORDER_STYLES)[number];
@@ -68,14 +77,20 @@ export interface ComposerRowContext extends ComposerChromeContext {
 
 export interface ComposerStyle {
 	readonly id: EditorBorderStyle;
+	/**
+	 * True when rows paint their own foreground through `surfaceColor`.
+	 * Built-ins default to transparent; registered extensions that omit this
+	 * field retain the pre-field behavior and receive undecorated row text.
+	 */
+	readonly filledSurface?: boolean;
 	/** Content rows carry left/right border glyphs; drives the cursor-reserve
 	 *  column, IME-safe layout, and the right-border scrollbar. */
 	readonly sideBorders: boolean;
 	/** Rows consumed by top+bottom chrome (drives maxHeight budgeting). */
 	readonly verticalChrome: 0 | 1 | 2;
 	/** Where the host should attach the status bar: embedded in the top border,
-	 * docked onto a top rule, or detached into a standalone bottom bar. */
-	readonly statusAttachment: "top-border" | "top-rule-chip" | "none";
+	 * rendered as a flush soft-capped band above the input, docked onto a top rule, or detached into a standalone bottom bar. */
+	readonly statusAttachment: "top-border" | "top-band" | "top-rule-chip" | "none";
 	/** Which segment groups the standalone bottom status bar shows. */
 	readonly bottomBar: "none" | "left" | "full";
 	/** Insert a blank spacer row between the editor and the standalone bottom

package/src/components/editor.ts

@@ -32,6 +32,7 @@ import {
 	type EditorBorderStyle,
 	type EditorTopBorder,
 	getComposerStyle,
+	isFilledComposerStyle,
 } from "./composer";
 
 export type { EditorBorderStyle, EditorTopBorder };
@@ -401,6 +402,8 @@ export interface EditorTheme {
 	accentColor?: (str: string) => string;
 	/** Background fill used by filled composer styles. */
 	surfaceColor?: (str: string) => string;
+	/** Foreground used when the composer shape leaves its text surface transparent. */
+	textColor?: (str: string) => string;
 	selectList: SelectListTheme;
 	symbols: SymbolTheme;
 	editorPaddingX?: number;
@@ -1271,13 +1274,16 @@ export class Editor implements Component, Focusable {
 					displayWidth = visibleWidth(displayText);
 				}
 			}
+			const renderedText = isFilledComposerStyle(style)
+				? displayText
+				: (this.#theme.textColor ?? PASSTHROUGH_COLOR)(displayText);
 
 			const linePad = padding(Math.max(0, lineContentWidth - displayWidth));
 
 			result.push(
 				...style.renderRow({
 					...chromeCtx,
-					text: displayText,
+					text: renderedText,
 					pad: linePad,
 					gutter: gutterText,
 					isLastRow: visibleIndex === visibleLayoutLines.length - 1,
@@ -1403,11 +1409,17 @@ export class Editor implements Component, Focusable {
 				this.#cancelAutocomplete(true);
 				return;
 			}
+			// Right arrow at end of line accepts the selection like Tab (fish-style).
+			// Mid-line, right arrow keeps its cursor-movement role and falls through.
+			const rightArrowAccepts =
+				kb.matchesCanonical(canonical, "tui.editor.cursorRight") &&
+				this.#state.cursorCol >= (this.#state.lines[this.#state.cursorLine] ?? "").length;
 			if (
 				this.#autocompleteState === "assist" &&
 				(kb.matchesCanonical(canonical, "tui.input.submit") ||
 					data === "\n" ||
-					kb.matchesCanonical(canonical, "tui.input.tab"))
+					kb.matchesCanonical(canonical, "tui.input.tab") ||
+					rightArrowAccepts)
 			) {
 				this.#applySpellingSuggestion();
 				return;
@@ -1420,7 +1432,8 @@ export class Editor implements Component, Focusable {
 				kb.matchesCanonical(canonical, "tui.select.pageDown") ||
 				kb.matchesCanonical(canonical, "tui.input.submit") ||
 				data === "\n" ||
-				kb.matchesCanonical(canonical, "tui.input.tab")
+				kb.matchesCanonical(canonical, "tui.input.tab") ||
+				rightArrowAccepts
 			) {
 				// Only pass navigation keys to the list, not Enter/Tab (we handle those directly)
 				if (
@@ -1435,7 +1448,7 @@ export class Editor implements Component, Focusable {
 				}
 
 				// If Tab was pressed, always apply the selection
-				if (kb.matchesCanonical(canonical, "tui.input.tab")) {
+				if (kb.matchesCanonical(canonical, "tui.input.tab") || rightArrowAccepts) {
 					const selected = this.#autocompleteList.getSelectedItem();
 					// Check for stale autocomplete state due to buffer edits since last refresh
 					// (destructive keys or paste can outrun the debounced update).
@@ -1731,6 +1744,13 @@ export class Editor implements Component, Focusable {
 			}
 		} else if (kb.matchesCanonical(canonical, "tui.editor.cursorRight")) {
 			// Right
+			// At end of line, accept the inline ghost word completion (IME-style) like Tab.
+			if (
+				this.#state.cursorCol >= (this.#state.lines[this.#state.cursorLine] ?? "").length &&
+				this.#acceptWordCompletion()
+			) {
+				return;
+			}
 			this.#moveCursor(0, 1);
 		} else if (kb.matchesCanonical(canonical, "tui.editor.cursorLeft")) {
 			// Left
@@ -3435,13 +3455,7 @@ export class Editor implements Component, Focusable {
 	}
 
 	async #handleTabCompletion(): Promise<void> {
-		const wordCompletion = this.#getWordCompletion();
-		if (wordCompletion) {
-			const currentLine = this.#state.lines[this.#state.cursorLine] ?? "";
-			const after = currentLine.slice(this.#state.cursorCol);
-			this.#insertTextAtCursor(wordCompletion + (/^[\s.,;:!?"\])}]/.test(after) ? "" : " "));
-			return;
-		}
+		if (this.#acceptWordCompletion()) return;
 		if (!this.#autocompleteProvider) return;
 
 		const currentLine = this.#state.lines[this.#state.cursorLine] || "";
@@ -3458,6 +3472,16 @@ export class Editor implements Component, Focusable {
 			await this.#forceFileAutocomplete();
 		}
 	}
+	/** Insert the inline ghost word completion at the cursor, if any. Shared by Tab and right-arrow accept. */
+	#acceptWordCompletion(): boolean {
+		const wordCompletion = this.#getWordCompletion();
+		if (!wordCompletion) return false;
+		const currentLine = this.#state.lines[this.#state.cursorLine] ?? "";
+		const after = currentLine.slice(this.#state.cursorCol);
+		this.#insertTextAtCursor(wordCompletion + (/^[\s.,;:!?"\])}]/.test(after) ? "" : " "));
+		return true;
+	}
+
 	async #showSpellingSuggestions(): Promise<void> {
 		const cursorLine = this.#state.cursorLine;
 		const cursorCol = this.#state.cursorCol;

package/src/components/loader.ts

@@ -1,9 +1,10 @@
 import type { TUI } from "../tui";
-import { getPaddingX, sliceByColumn, visibleWidth } from "../utils";
+import { getPaddingX, padding, sliceByColumn, visibleWidth } from "../utils";
 import { Text } from "./text";
 
 const RENDER_INTERVAL_MS = 1000 / 30;
-const SPINNER_ADVANCE_MS = 80;
+/** Milliseconds between spinner-frame advances; exported so time-derived spinners elsewhere tick at the Loader cadence. */
+export const SPINNER_ADVANCE_MS = 80;
 const RENDER_BACKPRESSURE_MULTIPLIER = 9;
 const MAX_BACKPRESSURE_FRAME_COST_MS = 200;
 
@@ -28,6 +29,7 @@ export class Loader extends Text {
 	#layout?: readonly { leading: string; content: string; trailing: string }[];
 	#layoutFrames: readonly string[];
 	#layoutFrame: string;
+	#trailer?: () => string | undefined;
 
 	constructor(
 		ui: TUI,
@@ -102,6 +104,15 @@ export class Loader extends Text {
 				lines.push(`${leading}${content ? this.messageColorFn(content) : ""}${trailing}`);
 			}
 		}
+		if (this.#trailer && lines.length > 1) {
+			const trailer = this.#trailer();
+			if (trailer) {
+				// Text pads rows to full width; drop that pad before docking right.
+				const body = lines[1].trimEnd();
+				const gap = width - visibleWidth(body) - visibleWidth(trailer);
+				if (gap >= 2) lines[1] = body + padding(gap) + trailer;
+			}
+		}
 		return lines;
 	}
 
@@ -124,6 +135,12 @@ export class Loader extends Text {
 	dispose() {
 		this.stop();
 	}
+	/** Install a lazy right-docked suffix for the spinner row (e.g. a styled
+	 * session title). Re-evaluated every paint; dropped when the row leaves
+	 * less than a two-cell gap. */
+	setTrailer(trailer: (() => string | undefined) | undefined): void {
+		this.#trailer = trailer;
+	}
 
 	setMessage(message: string) {
 		if (message === this.message) {

package/src/components/markdown.ts

@@ -1515,11 +1515,11 @@ const DEFAULT_COLOR_SWATCH_GLYPH = "■";
 
 // `#` + 3-8 hex digits, not glued to a surrounding word/`#`/`&` (avoids HTML
 // entities like ☃ and paths like foo#fff), not the start of a canonical
-// UUID, and not trailed by more hex (so over-long runs never produce a
-// misleading swatch). Length/letter rules are enforced in classifyHexColor
-// since the alternation can't express "exactly 3, 6, or 8".
-const HEX_COLOR_REGEX =
-	/(?<![\w#&])#(?![0-9a-fA-F]{8}(?:-[0-9a-fA-F]{4}){3}-[0-9a-fA-F]{12})([0-9a-fA-F]{3,8})(?![0-9a-fA-F])/g;
+// UUID, and not trailed by another word char (over-long runs and word
+// fragments like the "#eac" of "#each" never produce a misleading swatch).
+// Length/letter rules are enforced in classifyHexColor since the alternation
+// can't express "exactly 3, 6, or 8".
+const HEX_COLOR_REGEX = /(?<![\w#&])#(?![0-9a-fA-F]{8}(?:-[0-9a-fA-F]{4}){3}-[0-9a-fA-F]{12})([0-9a-fA-F]{3,8})(?!\w)/g;
 const HEX_COLOR_EXACT_REGEX = /^#([0-9a-fA-F]{3,8})$/;
 
 /**

package/src/terminal-capabilities.ts

@@ -676,6 +676,18 @@ export function setTerminalTextSizing(enabled: boolean): void {
 	TERMINAL.textSizing = enabled;
 }
 
+/**
+ * Override OSC 8 hyperlink capability at runtime. The coding-agent calls this
+ * from the `tui.hyperlinks` setting so its resolved policy (`off`/`auto`/`always`)
+ * drives every renderer that gates on {@link TERMINAL}`.hyperlinks` — notably the
+ * Markdown component's `[text](url)`/bare-URL links — consistently with the
+ * path/resource links that already consult the setting directly. Tests flip it
+ * to exercise the OSC 8 and plain-text paths deterministically.
+ */
+export function setTerminalHyperlinks(enabled: boolean): void {
+	TERMINAL.hyperlinks = enabled;
+}
+
 export function getTerminalInfo(
 	terminalId: TerminalId,
 	platform: NodeJS.Platform = process.platform,