@oh-my-pi/pi-tui 18.2.10 → 18.2.11

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 ## [Unreleased]
 
+## [18.2.11] - 2026-09-23
+
+### Added
+
+- Added a Skills section to the settings.
+- Enabled OSC 8 hyperlinks in rio.
+
+### Fixed
+
+- Fixed scrolling startup release notes without requiring an initial Escape keypress.
+- Improved usage quota display so names remain distinguishable and readable in narrow and multi-column dashboards.
+
 ## [18.2.10] - 2026-09-22
 
 ### Changed

package/dist/types/render/render-utils.d.ts

@@ -96,6 +96,8 @@ export declare const TRUNCATE_LENGTHS: {
 };
 /** Human-readable key currently bound to tool-output expansion, e.g. `Ctrl+O`. */
 export declare function expandKeyHint(): string;
+/** Keep both ends of a single-line label without splitting wide characters. */
+export declare function truncateMiddleToWidth(text: string, maxWidth: number): string;
 /** Select a leading line window and count the lines hidden after it. */
 export declare function cappedHeadLines(lines: readonly string[], max: number): {
     lines: readonly string[];

package/dist/types/tools/task.d.ts

@@ -237,6 +237,8 @@ export interface AgentProgress {
     resolvedThinkingLevel?: ConfiguredThinkingLevel;
     /** True when {@link resolvedModel} is the target of an active retry fallback (not the originally configured model). Lets observer-only UIs (collab guests, Agent Hub rows with no live session) flag the fallback and keep the provider. */
     resolvedModelIsFallback?: boolean;
+    /** Extension routing note (e.g. model-pools) explaining why {@link resolvedModel} was chosen. */
+    resolvedModelRoute?: string;
     /** True when a live advisor was attached to this run's session, not merely enabled in settings. */
     advisor?: boolean;
     /** Data extracted by registered subprocess tool handlers (keyed by tool name) */
@@ -313,6 +315,8 @@ export interface SingleResult {
     resolvedThinkingLevel?: ConfiguredThinkingLevel;
     /** True when {@link resolvedModel} is the target of an active retry fallback. Mirrors {@link AgentProgress.resolvedModelIsFallback} onto the settled result. */
     resolvedModelIsFallback?: boolean;
+    /** Mirrors {@link AgentProgress.resolvedModelRoute} onto the settled result. */
+    resolvedModelRoute?: string;
     /** Retains {@link AgentProgress.advisor} after the advised session is disposed. */
     advisor?: boolean;
     error?: string;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"name": "@oh-my-pi/pi-tui",
-	"version": "18.2.10",
+	"version": "18.2.11",
 	"description": "Terminal User Interface library with differential rendering for efficient text-based applications",
 	"homepage": "https://omp.sh",
 	"author": "Stencil Labs, Inc.",
@@ -37,14 +37,14 @@
 		"fmt": "oxfmt --no-error-on-unmatched-pattern 'src/**/*.{ts,tsx}' '{test,bench,examples,scripts}/**/*.ts' '*.ts'"
 	},
 	"dependencies": {
-		"@oh-my-pi/omptype": "18.2.10",
-		"@oh-my-pi/pi-agent-core": "18.2.10",
-		"@oh-my-pi/pi-ai": "18.2.10",
-		"@oh-my-pi/pi-catalog": "18.2.10",
-		"@oh-my-pi/pi-natives": "18.2.10",
-		"@oh-my-pi/pi-utils": "18.2.10",
-		"@oh-my-pi/pi-wire": "18.2.10",
-		"@oh-my-pi/snapcompact": "18.2.10"
+		"@oh-my-pi/omptype": "18.2.11",
+		"@oh-my-pi/pi-agent-core": "18.2.11",
+		"@oh-my-pi/pi-ai": "18.2.11",
+		"@oh-my-pi/pi-catalog": "18.2.11",
+		"@oh-my-pi/pi-natives": "18.2.11",
+		"@oh-my-pi/pi-utils": "18.2.11",
+		"@oh-my-pi/pi-wire": "18.2.11",
+		"@oh-my-pi/snapcompact": "18.2.11"
 	},
 	"devDependencies": {
 		"kitty-vt-wasm": "^0.2.0"

package/src/overlays/settings-defs.ts

@@ -64,6 +64,7 @@ export const TAB_GROUPS: Record<SettingTab, readonly string[]> = {
 		"Power",
 		"Agent",
 		"Git",
+		"Skills",
 	],
 	context: ["General", "Compaction", "Rules (TTSR)", "Experimental"],
 	memory: ["General", "Auto-Learn", "Mnemopi", "Hindsight", "Sharpshooter"],

package/src/overlays/usage-dashboard.ts

@@ -7,7 +7,16 @@
  */
 import * as os from "node:os";
 import { resolveUsedFraction, type UsageLimit, type UsageReport } from "@oh-my-pi/pi-ai";
-import { type Component, matchesKey, replaceTabs, routeSgrMouseInput, truncateToWidth, visibleWidth } from "../index";
+import {
+	type Component,
+	matchesKey,
+	replaceTabs,
+	routeSgrMouseInput,
+	sliceWithWidth,
+	truncateToWidth,
+	visibleWidth,
+	wrapTextWithAnsi,
+} from "../index";
 import { colorLuma, formatDuration, hexToRgb, rgbToHex, sanitizeText } from "@oh-my-pi/pi-utils";
 import { formatProviderName } from "../chrome/format";
 import {
@@ -19,6 +28,8 @@ import {
 import { colorToAnsi } from "../theme/color";
 import { ensureThemeSync, theme } from "../theme/theme";
 import { formatAbsoluteOnlyAmount } from "../prompt/usage-amounts";
+import { truncateMiddleToWidth } from "../render/render-utils";
+import { sanitizeDisplayLine } from "./extensions/display-text";
 import {
 	matchesSelectCancel,
 	matchesSelectDown,
@@ -333,6 +344,16 @@ export function formatActivityErrorDetail(error: string, homeDir = os.homedir())
 const CARD_MIN_WIDTH = 32;
 const CARD_GUTTER = 3;
 const CARD_MAX_WINDOWS = 4;
+const CARD_MIN_BAR_WIDTH = 12;
+const CARD_MAX_LABEL_LINES = 2;
+
+interface CardRowLayout {
+	labelWidth: number;
+	resetWidth: number;
+	barWidth: number;
+	stacked: boolean;
+	labelHeights: number[];
+}
 
 export class UsageDashboardComponent implements Component {
 	#options: UsageDashboardOptions;
@@ -423,7 +444,7 @@ export class UsageDashboardComponent implements Component {
 		return `${theme.fg(this.#statusColor(status), bar)}${theme.fg("dim", empty)}`;
 	}
 
-	#renderCardLines(card: ProviderCard, width: number): string[] {
+	#renderCardLines(card: ProviderCard, width: number, labels: string[][], layout: CardRowLayout): string[] {
 		const lines: string[] = [];
 		const cardStatus = card.unlimited ? "ok" : aggregateStatus(card.windows);
 		const accountsText = card.accounts > 1 ? theme.fg("dim", `${card.accounts} accts`) : "";
@@ -457,35 +478,33 @@ export class UsageDashboardComponent implements Component {
 		}
 
 		const hidden = card.windows.length - CARD_MAX_WINDOWS;
-		const visibleWindows = card.windows.slice(0, CARD_MAX_WINDOWS);
-		// Fixed columns across every row of the card so bars all start and end
-		// at the same x: label | bar | pct | reset. The reset column sizes to
-		// the card's widest countdown instead of flexing per row.
-		const resetWidth = visibleWindows.reduce(
-			(max, window) => Math.max(max, window.resetMs !== undefined ? formatDuration(window.resetMs).length : 0),
-			0,
-		);
-		const labelWidth = Math.min(16, Math.max(6, width - 24));
-		const barWidth = Math.max(5, width - 2 - labelWidth - 1 - 5 - (resetWidth > 0 ? resetWidth + 1 : 0));
-		for (const window of visibleWindows) {
-			const tagPlain = window.windowTag
-				? truncateToWidth(window.windowTag, Math.max(2, Math.floor(labelWidth / 2) - 1))
-				: "";
-			const baseWidth = tagPlain ? labelWidth - visibleWidth(tagPlain) - 1 : labelWidth;
-			const basePlain = truncateToWidth(window.label, baseWidth).padEnd(baseWidth);
-			const label = tagPlain
-				? `${theme.fg("muted", basePlain)} ${theme.fg("dim", tagPlain)}`
-				: theme.fg("muted", basePlain);
+		const { labelWidth, resetWidth, barWidth, stacked, labelHeights } = layout;
+		const contentWidth = Math.max(1, width - 2);
+		for (let index = 0; index < Math.min(card.windows.length, CARD_MAX_WINDOWS); index++) {
+			const window = card.windows[index]!;
+			const labelLines = labels[index]!;
+			const label = labelLines[0] ?? "";
+			const prefix = stacked ? "" : `${label}${" ".repeat(labelWidth - visibleWidth(label))} `;
+			if (stacked) {
+				for (let line = 0; line < labelHeights[index]; line++) {
+					lines.push(`  ${labelLines[line] ?? ""}`);
+				}
+			}
 			if (window.fraction === undefined) {
 				const text = theme.fg("dim", window.usedText ?? "no data");
-				lines.push(truncateToWidth(`  ${label} ${text}`, width));
+				for (const line of wrapTextWithAnsi(`${prefix}${text}`, contentWidth)) lines.push(`  ${line}`);
 				continue;
 			}
 			const freePct = Math.max(0, Math.round((1 - window.fraction) * 100));
 			const pctText = theme.fg(this.#statusColor(window.status), `${freePct}%`.padStart(5));
 			const resetPlain = window.resetMs !== undefined ? formatDuration(window.resetMs) : "";
 			const resetText = resetWidth > 0 ? ` ${theme.fg("dim", resetPlain.padStart(resetWidth))}` : "";
-			lines.push(`  ${label} ${this.#miniBar(window.fraction, window.status, barWidth)}${pctText}${resetText}`);
+			for (const line of wrapTextWithAnsi(
+				`${prefix}${this.#miniBar(window.fraction, window.status, barWidth)}${pctText}${resetText}`,
+				contentWidth,
+			)) {
+				lines.push(`  ${line}`);
+			}
 		}
 		if (hidden > 0) lines.push(`  ${theme.fg("dim", `+${hidden} more`)}`);
 		return lines;
@@ -499,7 +518,62 @@ export class UsageDashboardComponent implements Component {
 		const cardWidth = Math.floor((innerWidth - (columns - 1) * CARD_GUTTER) / columns);
 		const lines: string[] = [];
 		for (let start = 0; start < active.length; start += columns) {
-			const rowCards = active.slice(start, start + columns).map(card => this.#renderCardLines(card, cardWidth));
+			const cards = active.slice(start, start + columns);
+			const windows = cards.map(card => card.windows.slice(0, CARD_MAX_WINDOWS));
+			const labels = windows.map(rows =>
+				rows.map(window => {
+					const label = theme.fg("muted", sanitizeDisplayLine(window.label));
+					const tag = window.windowTag ? sanitizeDisplayLine(window.windowTag) : "";
+					return tag ? `${label} ${theme.fg("dim", tag)}` : label;
+				}),
+			);
+			// One geometry per grid row: labels, bars, and resets share columns,
+			// and every card stacks together when inline bars would be too short.
+			const labelWidth = labels.reduce(
+				(max, rows) => rows.reduce((width, label) => Math.max(width, visibleWidth(label)), max),
+				0,
+			);
+			const resetWidth = windows.reduce(
+				(max, rows) =>
+					rows.reduce(
+						(width, window) =>
+							Math.max(width, window.resetMs !== undefined ? formatDuration(window.resetMs).length : 0),
+						max,
+					),
+				0,
+			);
+			const contentWidth = Math.max(1, cardWidth - 2);
+			const suffixWidth = 5 + (resetWidth > 0 ? resetWidth + 1 : 0);
+			const inlineBarWidth = contentWidth - labelWidth - 1 - suffixWidth;
+			const stacked = inlineBarWidth < CARD_MIN_BAR_WIDTH;
+			const labelLines = labels.map(rows =>
+				rows.map(label => {
+					if (!stacked) return [label];
+					// Bound wrapping work as well as height, keeping the suffix that
+					// distinguishes model-specific quota buckets.
+					const bounded = truncateMiddleToWidth(label, contentWidth * CARD_MAX_LABEL_LINES);
+					const lines = wrapTextWithAnsi(bounded, contentWidth);
+					if (lines.length <= CARD_MAX_LABEL_LINES) return lines;
+					// Word wrapping can waste enough cells to create a third line even
+					// when the label fits. Use a grapheme-safe column split in that case.
+					const first = sliceWithWidth(bounded, 0, contentWidth, true);
+					const rest = sliceWithWidth(bounded, first.width, visibleWidth(bounded) - first.width, true);
+					return [first.text, truncateMiddleToWidth(rest.text, contentWidth)];
+				}),
+			);
+			const labelHeights = Array.from({ length: CARD_MAX_WINDOWS }, (_, index) =>
+				Math.max(0, ...labelLines.map(rows => rows[index]?.length ?? 0)),
+			);
+			const layout: CardRowLayout = {
+				labelWidth,
+				resetWidth,
+				barWidth: Math.max(1, stacked ? contentWidth - suffixWidth : inlineBarWidth),
+				stacked,
+				labelHeights,
+			};
+			const rowCards = cards.map((card, index) =>
+				this.#renderCardLines(card, cardWidth, labelLines[index]!, layout),
+			);
 			const height = Math.max(...rowCards.map(card => card.length));
 			for (let lineIdx = 0; lineIdx < height; lineIdx++) {
 				const segments = rowCards.map(card => {

package/src/prompt/welcome.ts

@@ -185,10 +185,13 @@ export class WelcomeComponent implements Component {
 		this.#requestRender();
 		this.#animTimer = setInterval(() => {
 			const elapsed = performance.now() - (this.#animStart ?? 0);
+			const requestRender = this.#requestRender;
 			if (elapsed >= INTRO_MS) {
 				this.#stopAnimation();
 			}
-			this.#requestRender?.();
+			// Stopping clears the callback, but the settled frame must still paint
+			// so an oversized startup header can retire into native scrollback.
+			requestRender?.();
 		}, INTRO_TICK_MS);
 	}
 

package/src/render/render-utils.ts

@@ -211,7 +211,7 @@ export function expandKeyHint(): string {
 // Text Truncation Utilities
 // =============================================================================
 /** Keep both ends of a single-line label without splitting wide characters. */
-function truncateMiddleToWidth(text: string, maxWidth: number): string {
+export function truncateMiddleToWidth(text: string, maxWidth: number): string {
 	const width = visibleWidth(text);
 	if (width <= maxWidth) return text;
 	if (maxWidth <= 1) return maxWidth === 1 ? "…" : "";

package/src/status-line/component.ts

@@ -55,6 +55,18 @@ const BRAND_FADE_MS = 450;
 /** Repaint cadence while the brand fade is in flight (rust omp's `FADE_FRAME`). */
 const BRAND_FADE_FRAME_MS = 40;
 
+/**
+ * Providers whose subscription quota is a single monthly bucket, so their
+ * `monthly`/`30d` window is the one the usage segment must show. Providers that
+ * merely report a monthly side-counter (GitHub Copilot's premium requests) stay
+ * out: their monthly row is not the session quota.
+ */
+const MONTHLY_SUBSCRIPTION_PROVIDERS: Record<string, true> = {
+	"alibaba-token-plan": true,
+	cursor: true,
+	"opencode-go": true,
+};
+
 /** A displayable limit after provider, account, model, and window filtering. */
 interface UsageWindowCandidate {
 	id?: string;
@@ -1842,6 +1854,8 @@ export class StatusLineComponent<TSession extends StatusLineSession = StatusLine
 		const activeModelId = normalizeUsageScopeValue(context.modelId);
 		const activeAntigravityCounter =
 			context.provider === "google-antigravity" ? getAntigravityCounterKeyForModel(context.modelId) : undefined;
+		const monthlySubscriptionProvider =
+			context.provider !== undefined && MONTHLY_SUBSCRIPTION_PROVIDERS[context.provider] === true;
 		const scopeGroups = new Map<string, UsageScopeGroup>();
 		for (const report of reports) {
 			if (!report || typeof report !== "object") continue;
@@ -1904,10 +1918,7 @@ export class StatusLineComponent<TSession extends StatusLineSession = StatusLine
 										: undefined;
 				const windowClass =
 					subscriptionWindow ??
-					((context.provider === "cursor" || context.provider === "opencode-go") &&
-					(windowId === "monthly" || windowId === "30d")
-						? "monthly"
-						: undefined);
+					(monthlySubscriptionProvider && (windowId === "monthly" || windowId === "30d") ? "monthly" : undefined);
 				if (!windowClass) continue;
 
 				const modelId = normalizeUsageScopeValue("modelId" in scope ? scope.modelId : undefined);

package/src/status-line/segments.ts

@@ -881,9 +881,9 @@ const usageSegment: StatusLineSegment = {
 			parts.push(formatQuotaWindow(ctx, "7d", u.sevenDay.percent, u.sevenDay.resetHours, "h", "round"));
 		}
 		if (u.monthly) {
-			// Cursor and OpenCode Go (normalize gates monthly to those providers).
-			// Both floor used percents upstream (Cursor's dashboard shows 1.88 →
-			// "1% used"; OpenCode's endpoint already emits floored integers).
+			// Monthly-subscription providers only (the normalizer gates the class).
+			// Cursor and QwenCloud floor used percents upstream (Cursor's dashboard
+			// shows 1.88 → "1% used"; OpenCode's endpoint emits floored integers).
 			parts.push(formatQuotaWindow(ctx, "mo", u.monthly.percent, u.monthly.resetHours, "h", "floor"));
 		}
 		if (u.resetCredits) {

package/src/terminal-capabilities.ts

@@ -678,11 +678,20 @@ const KNOWN_TERMINALS = Object.freeze({
 	// OSC 66 text sizing are unverified, so those stay on conservative defaults;
 	// synchronized output is left to the runtime DECRQM probe.
 	otty: new TerminalInfo("otty", ImageProtocol.Kitty, true, true, NotifyProtocol.Osc99),
-	// rio ships the Kitty graphics protocol — direct placement plus U=1 Unicode
-	// placeholders verified by the reporter (#12205). Everything unproven stays
-	// conservative: hyperlinks, DECCARA, screen-to-scrollback, and notifications
-	// keep the base defaults until verified in that terminal.
-	rio: new TerminalInfo("rio", ImageProtocol.Kitty, true, false),
+	// rio publishes its supported escape sequences at
+	// rioterm.com/docs/escape-sequence-support: OSC 8 hyperlinks are opened via
+	// the hints system (Alt+click on Windows/Linux) — live-verified on
+	// rio 0.5.28/Win11 26100 where an OSC 8 span Alt+click opened the target
+	// URL in the browser, and an OSC 52 clipboard query round-tripped. Kitty
+	// graphics direct placement plus U=1 Unicode placeholders verified by the
+	// reporter (#12205). Notifications stay on BEL: rio parses OSC 9/777 into
+	// its own notifier, but its Windows path raises an unpackaged WinRT toast
+	// with AppId "Rio" that Windows silently drops without a registered AUMID
+	// shortcut — observed as a no-op live — so flipping it would only remove
+	// the D-Bus fallback for Linux rio users. DECCARA, screen-to-scrollback,
+	// OSC 99, and OSC 66 text sizing are outside rio's supported set and keep
+	// the conservative defaults.
+	rio: new TerminalInfo("rio", ImageProtocol.Kitty, true, true),
 });
 
 /** Resolve terminal identity from environment markers used by common emulators. */

package/src/tools/task.ts

@@ -636,6 +636,18 @@ function renderDescriptionLines(description: string, prefix: string, width: numb
 	return wrapTextWithAnsi(description, contentWidth).map(line => `${boundedPrefix}${theme.fg("dim", line)}`);
 }
 
+/** `routed:` note from a `before_subagent_spawn` model replacement; empty when unrouted. */
+function renderRouteLine(route: string | undefined, continuePrefix: string, maxWidth: number, theme: Theme): string[] {
+	if (!route) return [];
+	return [
+		truncateTaskRow(
+			`${continuePrefix}${theme.fg("dim", `routed: ${replaceTabs(sanitizeText(route))}`)}`,
+			maxWidth,
+			"",
+		),
+	];
+}
+
 /**
  * Render streaming progress for a single agent.
  */
@@ -688,6 +700,7 @@ function renderAgentProgress(
 	if (fullDescription && !row.descriptionShown) {
 		lines.push(...renderDescriptionLines(fullDescription, continuePrefix, maxWidth, theme));
 	}
+	lines.push(...renderRouteLine(progress.resolvedModelRoute, continuePrefix, maxWidth, theme));
 
 	lines.push(...renderTaskSection(progress.assignment ?? progress.task, continuePrefix, expanded, theme));
 
@@ -1029,6 +1042,7 @@ function renderAgentResult(
 	if (fullDescription && !description) {
 		lines.push(...renderDescriptionLines(fullDescription, continuePrefix, maxWidth, theme));
 	}
+	lines.push(...renderRouteLine(result.resolvedModelRoute, continuePrefix, maxWidth, theme));
 
 	lines.push(...renderTaskSection(result.assignment ?? result.task, continuePrefix, expanded, theme));
 
@@ -1858,6 +1872,8 @@ export interface AgentProgress {
 	resolvedThinkingLevel?: ConfiguredThinkingLevel;
 	/** True when {@link resolvedModel} is the target of an active retry fallback (not the originally configured model). Lets observer-only UIs (collab guests, Agent Hub rows with no live session) flag the fallback and keep the provider. */
 	resolvedModelIsFallback?: boolean;
+	/** Extension routing note (e.g. model-pools) explaining why {@link resolvedModel} was chosen. */
+	resolvedModelRoute?: string;
 	/** True when a live advisor was attached to this run's session, not merely enabled in settings. */
 	advisor?: boolean;
 	/** Data extracted by registered subprocess tool handlers (keyed by tool name) */
@@ -1935,6 +1951,8 @@ export interface SingleResult {
 	resolvedThinkingLevel?: ConfiguredThinkingLevel;
 	/** True when {@link resolvedModel} is the target of an active retry fallback. Mirrors {@link AgentProgress.resolvedModelIsFallback} onto the settled result. */
 	resolvedModelIsFallback?: boolean;
+	/** Mirrors {@link AgentProgress.resolvedModelRoute} onto the settled result. */
+	resolvedModelRoute?: string;
 	/** Retains {@link AgentProgress.advisor} after the advised session is disposed. */
 	advisor?: boolean;
 	error?: string;