@oh-my-pi/pi-coding-agent 15.2.2 → 15.2.4

package/src/modes/components/welcome.ts

@@ -45,7 +45,7 @@ export class WelcomeComponent implements Component {
 				this.#stopAnimation();
 			}
 			requestRender();
-		}, INTRO_MS / INTRO_PHASES);
+		}, INTRO_TICK_MS);
 	}
 
 	#stopAnimation(): void {
@@ -253,55 +253,97 @@ export class WelcomeComponent implements Component {
 
 	/** Pick the logo frame for the current intro phase, or the resting frame. */
 	#currentLogoFrame(): readonly string[] {
-		if (this.#animStart == null) return LOGO_FRAMES[0];
+		if (this.#animStart == null) return REST_FRAME;
 		const elapsed = performance.now() - this.#animStart;
-		if (elapsed >= INTRO_MS) return LOGO_FRAMES[0];
-		// Ease-out cubic so the sweep settles into the resting frame instead of
-		// stopping abruptly. Sweeps backward through the phase ring → lands on 0.
+		if (elapsed >= INTRO_MS) return REST_FRAME;
+		// Ease-out cubic so the spin decelerates into the resting state.
 		const progress = elapsed / INTRO_MS;
 		const eased = 1 - (1 - progress) ** 3;
-		const stepsDone = Math.min(INTRO_PHASES - 1, Math.floor(eased * INTRO_PHASES));
-		const idx = (INTRO_PHASES - stepsDone) % INTRO_PHASES;
-		return LOGO_FRAMES[idx];
+		// Sweep backward through INTRO_SWEEPS full rotations so the gradient
+		// visibly spins multiple times. `eased == 1` → phase = 0 = resting frame.
+		const phase = ((((1 - eased) * INTRO_SWEEPS) % 1) + 1) % 1;
+		// Shine traverses the diagonal at a steady pace, decoupled from the
+		// gradient phase so the two layers parallax. Strength fades out with
+		// the same ease-out curve so the highlight is gone by the resting frame.
+		const shinePos = (((progress * INTRO_SHINE_TRAVERSALS) % 1) + 1) % 1;
+		const shineStrength = (1 - eased) ** 1.5;
+		return gradientLogo(PI_LOGO, phase, { strength: shineStrength, pos: shinePos });
 	}
 }
 
 // biome-ignore format: preserve ASCII art layout
 const PI_LOGO = ["▀██████████▀", " ╘██    ██  ", "  ██    ██  ", "  ██    ██  ", " ▄██▄  ▄██▄ "];
 
+/** Multi-stop palette for the diagonal gradient. */
+const GRADIENT_STOPS: ReadonlyArray<readonly [number, number, number]> = [
+	[255, 92, 200], // hot pink
+	[200, 110, 255], // violet
+	[120, 130, 255], // periwinkle
+	[60, 200, 255], // bright cyan
+	[120, 255, 220], // mint
+];
+
+/** 256-color ramp fallback when truecolor isn't available. */
+const GRADIENT_RAMP_256 = [199, 171, 135, 99, 75, 51, 87];
+
+/** Half-width of the shine highlight band, expressed in gradient-t units. */
+const SHINE_HALF_WIDTH = 0.18;
+
+interface ShineConfig {
+	/** Overall opacity of the shine overlay, in [0, 1]. */
+	strength: number;
+	/** Center of the shine band along the diagonal, in [0, 1]. */
+	pos: number;
+}
+
 /**
- * Apply magenta→cyan diagonal gradient (bottom-left → top-right) across multi-line art.
- * `phase` (0..1) shifts the gradient along the diagonal, wrapping at 1.
+ * Apply a multi-stop diagonal gradient (bottom-left → top-right) plus an
+ * optional sliding shine band across multi-line art. `phase` (0..1) shifts the
+ * gradient along the diagonal, wrapping at 1. When `shine` is provided, a soft
+ * white highlight is composited on top, centered at `shine.pos`.
  */
-function gradientLogo(lines: readonly string[], phase = 0): string[] {
+function gradientLogo(lines: readonly string[], phase = 0, shine?: ShineConfig): string[] {
 	const reset = "\x1b[0m";
 	const rows = lines.length;
 	const cols = Math.max(...lines.map(l => l.length));
 	// span+1 so `base` stays strictly < 1: avoids the wrap-around at the
-	// far corner mapping back to t=0 (magenta) on the resting frame.
+	// far corner mapping back to t=0 (hot pink) on the resting frame.
 	const span = Math.max(1, cols + rows - 1);
+	const shineStrength = shine && shine.strength > 0 ? shine.strength : 0;
+	const shinePos = shine ? shine.pos : 0;
 	const colorAt = TERMINAL.trueColor
 		? (t: number): string => {
-				// Multi-stop gradient: hot magenta → light violet → bright cyan.
-				// Picked stops avoid the deep-blue valley a naive HSL lerp falls into.
-				const stops: [number, number, number][] = [
-					[255, 62, 201], // hot magenta-pink
-					[180, 120, 255], // light violet
-					[62, 230, 255], // bright cyan
-				];
+				// 5-stop palette widens the visible color range and avoids the
+				// deep-blue valley a naive HSL lerp falls into.
+				const stops = GRADIENT_STOPS;
 				const seg = t * (stops.length - 1);
 				const i = Math.min(stops.length - 2, Math.floor(seg));
 				const f = seg - i;
 				const a = stops[i];
 				const b = stops[i + 1];
-				const r = Math.round(a[0] + (b[0] - a[0]) * f);
-				const g = Math.round(a[1] + (b[1] - a[1]) * f);
-				const bl = Math.round(a[2] + (b[2] - a[2]) * f);
-				return `\x1b[38;2;${r};${g};${bl}m`;
+				let r = a[0] + (b[0] - a[0]) * f;
+				let g = a[1] + (b[1] - a[1]) * f;
+				let bl = a[2] + (b[2] - a[2]) * f;
+				if (shineStrength > 0) {
+					const dist = Math.abs(t - shinePos);
+					const intensity = Math.max(0, 1 - dist / SHINE_HALF_WIDTH) * shineStrength;
+					if (intensity > 0) {
+						r += (255 - r) * intensity;
+						g += (255 - g) * intensity;
+						bl += (255 - bl) * intensity;
+					}
+				}
+				return `\x1b[38;2;${Math.round(r)};${Math.round(g)};${Math.round(bl)}m`;
 			}
 		: (t: number): string => {
-				const ramp = [199, 171, 135, 99, 75, 51];
-				const idx = Math.min(ramp.length - 1, Math.max(0, Math.floor(t * (ramp.length - 1) + 0.5)));
+				const ramp = GRADIENT_RAMP_256;
+				let idx = Math.min(ramp.length - 1, Math.max(0, Math.floor(t * (ramp.length - 1) + 0.5)));
+				if (shineStrength > 0) {
+					const dist = Math.abs(t - shinePos);
+					const intensity = Math.max(0, 1 - dist / SHINE_HALF_WIDTH) * shineStrength;
+					// Promote to the brightest ramp slot when the shine band peaks here.
+					if (intensity > 0.5) idx = ramp.length - 1;
+				}
 				return `\x1b[38;5;${ramp[idx]}m`;
 			};
 	return lines.map((line, y) => {
@@ -321,14 +363,14 @@ function gradientLogo(lines: readonly string[], phase = 0): string[] {
 	});
 }
 
-/** Intro animation: how many discrete gradient phases and total duration. */
-const INTRO_PHASES = 60;
-const INTRO_MS = 2000;
+/** Total length of the intro animation. */
+const INTRO_MS = 3000;
+/** Render cadence during the intro (~30fps). */
+const INTRO_TICK_MS = 33;
+/** Number of full gradient rotations the sweep performs before settling. */
+const INTRO_SWEEPS = 2.5;
+/** Number of times the shine highlight crosses the diagonal across the intro. */
+const INTRO_SHINE_TRAVERSALS = 3;
 
-/**
- * Pre-rendered logo frames, one per phase. Frame 0 is the resting state;
- * the intro sweeps frames in reverse so it lands on frame 0.
- */
-const LOGO_FRAMES: readonly (readonly string[])[] = Array.from({ length: INTRO_PHASES }, (_, i) =>
-	gradientLogo(PI_LOGO, i / INTRO_PHASES),
-);
+/** Resting gradient frame, cached for re-renders outside of the intro. */
+const REST_FRAME = gradientLogo(PI_LOGO, 0);

package/src/modes/controllers/event-controller.ts

@@ -18,6 +18,7 @@ import type { PlanApprovalDetails } from "../../plan-mode/approved-plan";
 import type { AgentSessionEvent } from "../../session/agent-session";
 import { isSilentAbort, readPendingDisplayTag } from "../../session/messages";
 import type { ResolveToolDetails } from "../../tools/resolve";
+import { interruptHint } from "../shared";
 
 type AgentSessionEventKind = AgentSessionEvent["type"];
 
@@ -133,7 +134,7 @@ export class EventController {
 		const trimmed = intent.trim();
 		if (!trimmed || trimmed === this.#lastIntent) return;
 		this.#lastIntent = trimmed;
-		this.ctx.setWorkingMessage(`${trimmed} (esc to interrupt)`);
+		this.ctx.setWorkingMessage(`${trimmed}${interruptHint()}`);
 	}
 
 	subscribeToAgent(): void {

package/src/modes/controllers/mcp-command-controller.ts

@@ -763,17 +763,18 @@ export class MCPCommandController {
 		if (!this.ctx.mcpManager) return "disconnected";
 
 		this.ctx.chatContainer.addChild(new Spacer(1));
-		const statusText = new Text(theme.fg("muted", `| Connecting to "${name}"...`), 1, 0);
+		const frames = theme.spinnerFrames;
+		const initialFrame = frames[0] ?? "|";
+		const statusText = new Text(theme.fg("muted", `${initialFrame} Connecting to "${name}"...`), 1, 0);
 		this.ctx.chatContainer.addChild(statusText);
 		this.ctx.ui.requestRender();
 
-		const frames = ["|", "/", "-", "\\"];
 		let frame = 0;
 		const interval = setInterval(() => {
 			statusText.setText(theme.fg("muted", `${frames[frame % frames.length]} Connecting to "${name}"...`));
 			frame++;
 			this.ctx.ui.requestRender();
-		}, 120);
+		}, 80);
 
 		try {
 			try {

package/src/modes/interactive-mode.ts

@@ -26,7 +26,7 @@ import {
 	TUI,
 	visibleWidth,
 } from "@oh-my-pi/pi-tui";
-import { APP_NAME, getProjectDir, hsvToRgb, isEnoent, logger, postmortem, prompt } from "@oh-my-pi/pi-utils";
+import { APP_NAME, adjustHsv, getProjectDir, hsvToRgb, isEnoent, logger, postmortem, prompt } from "@oh-my-pi/pi-utils";
 import chalk from "chalk";
 import { KeybindingsManager } from "../config/keybindings";
 import { isSettingsInitialized, Settings, settings } from "../config/settings";
@@ -98,6 +98,7 @@ import {
 } from "./loop-limit";
 import { OAuthManualInputManager } from "./oauth-manual-input";
 import { SessionObserverRegistry } from "./session-observer-registry";
+import { interruptHint } from "./shared";
 import { type ShimmerPalette, shimmerSegments, shimmerText } from "./theme/shimmer";
 import type { Theme } from "./theme/theme";
 import {
@@ -111,18 +112,43 @@ import {
 import type { CompactionQueuedMessage, InteractiveModeContext, SubmittedUserInput, TodoItem, TodoPhase } from "./types";
 import { UiHelpers } from "./utils/ui-helpers";
 
-const WORKING_INTERRUPT_HINT = " (esc to interrupt)";
-
 const HINT_SHIMMER_PALETTE: ShimmerPalette = {
 	low: "dim",
 	mid: "muted",
 	high: "borderAccent",
 };
 
-function renderWorkingMessage(message: string): string {
-	if (!message.endsWith(WORKING_INTERRUPT_HINT)) return shimmerText(message, theme);
-	const header = message.slice(0, -WORKING_INTERRUPT_HINT.length);
-	return shimmerSegments([{ text: header }, { text: WORKING_INTERRUPT_HINT, palette: HINT_SHIMMER_PALETTE }], theme);
+interface WorkingMessageAccent {
+	main: string;
+	dim: string;
+}
+
+function renderWorkingMessage(message: string, accent?: WorkingMessageAccent): string {
+	const palette = accent
+		? ({
+				low: "dim",
+				mid: { ansi: accent.main },
+				high: { ansi: accent.main },
+				bold: true,
+			} satisfies ShimmerPalette)
+		: undefined;
+	const hint = interruptHint();
+	if (!message.endsWith(hint)) return shimmerText(message, theme, palette);
+	const header = message.slice(0, -hint.length);
+	const hintPalette = accent
+		? ({
+				low: "dim",
+				mid: { ansi: accent.dim },
+				high: { ansi: accent.dim },
+			} satisfies ShimmerPalette)
+		: HINT_SHIMMER_PALETTE;
+	return shimmerSegments(
+		[
+			{ text: header, palette },
+			{ text: hint, palette: hintPalette },
+		],
+		theme,
+	);
 }
 
 const EDITOR_MAX_HEIGHT_MIN = 6;
@@ -232,7 +258,9 @@ export class InteractiveMode implements InteractiveModeContext {
 	autoCompactionLoader: Loader | undefined = undefined;
 	retryLoader: Loader | undefined = undefined;
 	#pendingWorkingMessage: string | undefined;
-	readonly #defaultWorkingMessage = `Working… (esc to interrupt)`;
+	get #defaultWorkingMessage(): string {
+		return `Working…${interruptHint()}`;
+	}
 	autoCompactionEscapeHandler?: () => void;
 	retryEscapeHandler?: () => void;
 	unsubscribe?: () => void;
@@ -2189,13 +2217,26 @@ export class InteractiveMode implements InteractiveModeContext {
 		this.ui.requestRender();
 	}
 
+	#getWorkingMessageAccent(): WorkingMessageAccent | undefined {
+		const accentEnabled = !isSettingsInitialized() || settings.get("statusLine.sessionAccent") !== false;
+		const sessionName = accentEnabled ? this.sessionManager.getSessionName() : undefined;
+		if (!sessionName) return undefined;
+		const hex = getSessionAccentHex(sessionName);
+		const main = getSessionAccentAnsi(hex);
+		const dim = getSessionAccentAnsi(adjustHsv(hex, { s: 0.55, v: 0.65 }));
+		return main && dim ? { main, dim } : undefined;
+	}
+
 	ensureLoadingAnimation(): void {
 		if (!this.loadingAnimation) {
 			this.statusContainer.clear();
 			this.loadingAnimation = new Loader(
 				this.ui,
-				spinner => theme.fg("accent", spinner),
-				renderWorkingMessage,
+				spinner => {
+					const accent = this.#getWorkingMessageAccent();
+					return accent ? `${accent.main}${spinner}\x1b[39m` : theme.fg("accent", spinner);
+				},
+				message => renderWorkingMessage(message, this.#getWorkingMessageAccent()),
 				this.#defaultWorkingMessage,
 				getSymbolTheme().spinnerFrames,
 			);

package/src/modes/shared.ts

@@ -36,4 +36,20 @@ export function getTabBarTheme(): TabBarTheme {
 	};
 }
 
+// ═══════════════════════════════════════════════════════════════════════════
+// Working-message hint
+// ═══════════════════════════════════════════════════════════════════════════
+
+/**
+ * Suffix appended to the loader's working message to remind users they can
+ * abort with Esc. Rendered with the active theme's bracket glyphs so it stays
+ * visually consistent with badges and other bracketed UI affordances.
+ *
+ * The leading space separates the hint from the message body and is consumed
+ * by `endsWith`/`slice` matching in the loader renderer.
+ */
+export function interruptHint(): string {
+	return ` ${theme.format.bracketLeft}esc${theme.format.bracketRight}`;
+}
+
 export { parseCommandArgs } from "../utils/command-args";

package/src/modes/theme/shimmer.ts

@@ -1,19 +1,43 @@
+import { isSettingsInitialized, settings } from "../../config/settings";
 import type { Theme, ThemeColor } from "./theme";
 
-const SHIMMER_PADDING = 10;
-const SHIMMER_SWEEP_MS = 2000;
-const SHIMMER_BAND_HALF_WIDTH = 5;
+// ─── Classic sweep tunables ──────────────────────────────────────────────────
+const CLASSIC_PADDING = 10;
+const CLASSIC_SWEEP_MS = 1400;
+const CLASSIC_BAND_HALF_WIDTH = 6;
 
-type ShimmerTheme = Pick<Theme, "bold" | "fg">;
+// ─── KITT scanner tunables ───────────────────────────────────────────────────
+// 1.5s round trip ≈ classic 1982 K.I.T.T. scanner cadence (~0.75s per direction).
+const KITT_CYCLE_MS = 1500;
+const KITT_HEAD_HALF = 0.6;
+const KITT_TRAIL_LEN = 7;
+
+// ─── Tier thresholds ─────────────────────────────────────────────────────────
+const TIER_HIGH = 0.65;
+const TIER_MID = 0.22;
+
+// ─── Raw ANSI codes ──────────────────────────────────────────────────────────
+const FG_RESET = "\x1b[39m";
+const BOLD_OPEN = "\x1b[1m";
+const BOLD_CLOSE = "\x1b[22m";
+
+type ShimmerTheme = Pick<Theme, "bold" | "fg" | "getFgAnsi">;
+type ShimmerMode = "classic" | "kitt" | "disabled";
+
+type ShimmerPaletteTier = ThemeColor | { ansi: string };
+
+function resolveTierAnsi(theme: ShimmerTheme, tier: ShimmerPaletteTier): string {
+	return typeof tier === "string" ? theme.getFgAnsi(tier) : tier.ansi;
+}
 
 /** Three-tier color stack a shimmer character cycles through as the band sweeps. */
 export interface ShimmerPalette {
-	/** Color for chars outside / at the edge of the band (intensity < 0.2). */
-	low: ThemeColor;
-	/** Color for chars approaching the crest (0.2 <= intensity < 0.6). */
-	mid: ThemeColor;
-	/** Color at the band's crest (intensity >= 0.6). */
-	high: ThemeColor;
+	/** Color for chars outside / at the edge of the band (intensity < ~0.22). */
+	low: ShimmerPaletteTier;
+	/** Color for chars approaching the crest (~0.22 ≤ intensity < ~0.65). */
+	mid: ShimmerPaletteTier;
+	/** Color at the band's crest (intensity ≥ ~0.65). */
+	high: ShimmerPaletteTier;
 	/** Whether to bold the crest tier. Default `false`. */
 	bold?: boolean;
 }
@@ -31,47 +55,163 @@ export const DEFAULT_SHIMMER_PALETTE: ShimmerPalette = {
 	bold: true,
 };
 
-function shimmerIntensity(index: number, length: number): number {
-	const period = length + SHIMMER_PADDING * 2;
-	const pos = Math.floor(((Date.now() % SHIMMER_SWEEP_MS) / SHIMMER_SWEEP_MS) * period);
-	const dist = Math.abs(index + SHIMMER_PADDING - pos);
-	if (dist > SHIMMER_BAND_HALF_WIDTH) return 0;
+// ─── Palette compilation cache ───────────────────────────────────────────────
+// Resolving ANSI codes for every character was the dominant per-frame cost.
+// We resolve once per (theme, palette) pair into ready-to-concat prefix/suffix
+// strings, then coalesce same-tier runs at render time so each frame emits a
+// handful of escape sequences instead of one per code point.
+//
+// The cache is stashed as a Symbol-keyed slot directly on the palette object
+// — no module-level sidecar — and invalidates when the active Theme changes.
+interface TierSeq {
+	open: string;
+	close: string;
+}
+interface CompiledPalette {
+	low: TierSeq;
+	mid: TierSeq;
+	high: TierSeq;
+}
+
+const kCompiledFor = Symbol("shimmer.compiledFor");
+const kCompiled = Symbol("shimmer.compiled");
+interface PaletteCache {
+	[kCompiledFor]?: ShimmerTheme;
+	[kCompiled]?: CompiledPalette;
+}
 
-	const x = Math.PI * (dist / SHIMMER_BAND_HALF_WIDTH);
-	return 0.5 * (1 + Math.cos(x));
+function compile(theme: ShimmerTheme, palette: ShimmerPalette): CompiledPalette {
+	const p = palette as ShimmerPalette & PaletteCache;
+	const cached = p[kCompiled];
+	if (cached && p[kCompiledFor] === theme) return cached;
+	const lowOpen = resolveTierAnsi(theme, palette.low);
+	const midOpen = resolveTierAnsi(theme, palette.mid);
+	const highColorOpen = resolveTierAnsi(theme, palette.high);
+	const highOpen = palette.bold ? `${BOLD_OPEN}${highColorOpen}` : highColorOpen;
+	const highClose = palette.bold ? `${BOLD_CLOSE}${FG_RESET}` : FG_RESET;
+	const out: CompiledPalette = {
+		low: { open: lowOpen, close: FG_RESET },
+		mid: { open: midOpen, close: FG_RESET },
+		high: { open: highOpen, close: highClose },
+	};
+	p[kCompiledFor] = theme;
+	p[kCompiled] = out;
+	return out;
 }
 
-function styleShimmerChar(ch: string, intensity: number, theme: ShimmerTheme, palette: ShimmerPalette): string {
-	if (intensity < 0.2) return theme.fg(palette.low, ch);
-	if (intensity < 0.6) return theme.fg(palette.mid, ch);
-	const styled = theme.fg(palette.high, ch);
-	return palette.bold ? theme.bold(styled) : styled;
+// ─── Intensity profiles ──────────────────────────────────────────────────────
+/** Smooth cosine bump sweeping left → right with edge padding. */
+function classicIntensity(time: number, index: number, length: number): number {
+	const period = length + CLASSIC_PADDING * 2;
+	// Fractional position — kept un-floored so the band glides at the host's
+	// frame rate instead of stepping discretely.
+	const pos = ((time % CLASSIC_SWEEP_MS) / CLASSIC_SWEEP_MS) * period;
+	const dist = Math.abs(index + CLASSIC_PADDING - pos);
+	if (dist >= CLASSIC_BAND_HALF_WIDTH) return 0;
+	return 0.5 * (1 + Math.cos((Math.PI * dist) / CLASSIC_BAND_HALF_WIDTH));
 }
 
 /**
- * Apply a shimmer sweep across one or more segments, treating them as a single
- * continuous string for band positioning. Each segment can supply its own
- * palette so the gradient stays in lockstep while the colors differ.
+ * Knight Rider K.I.T.T. scanner: a single bright head ping-pongs across the
+ * bar with a quadratic-decay trail behind it. No leading glow — LEDs don't
+ * predict the future.
+ */
+function kittIntensity(time: number, index: number, length: number): number {
+	const range = length - 1;
+	if (range <= 0) return 1;
+	const phase = (time % KITT_CYCLE_MS) / KITT_CYCLE_MS;
+	const goingRight = phase < 0.5;
+	const head = goingRight ? phase * 2 * range : (1 - phase) * 2 * range;
+	const delta = index - head;
+	const abs = delta < 0 ? -delta : delta;
+	if (abs <= KITT_HEAD_HALF) return 1;
+	// Only chars *behind* the head light up — direction-dependent.
+	const behind = goingRight ? -delta : delta;
+	if (behind <= KITT_HEAD_HALF) return 0;
+	const t = (behind - KITT_HEAD_HALF) / KITT_TRAIL_LEN;
+	if (t >= 1) return 0;
+	const f = 1 - t;
+	return f * f;
+}
+
+type Tier = "low" | "mid" | "high";
+
+function tierFor(intensity: number): Tier {
+	if (intensity >= TIER_HIGH) return "high";
+	if (intensity >= TIER_MID) return "mid";
+	return "low";
+}
+
+function resolveMode(): ShimmerMode {
+	if (!isSettingsInitialized()) return "classic";
+	return settings.get("display.shimmer");
+}
+
+/**
+ * Apply a shimmer sweep across one or more segments, treating them as a
+ * single continuous string for band positioning. Each segment can supply
+ * its own palette so the gradient stays in lockstep while the colors
+ * differ.
+ *
+ * Performance shape (per call, dominant cost):
+ *   - One `Date.now()` read.
+ *   - One `compile()` lookup per segment (Symbol-keyed cache slot, hot path
+ *     skipped after first frame).
+ *   - One ANSI open/close pair per **run of same-tier chars**, not per char.
+ *   - No per-char allocations beyond the run buffer.
  */
 export function shimmerSegments(segments: readonly ShimmerSegment[], theme: ShimmerTheme): string {
+	const mode = resolveMode();
+
+	// Pre-scan: total code-point count (positions the band) and resolved palette.
 	let total = 0;
-	const expanded: Array<{ chars: string[]; palette: ShimmerPalette }> = [];
+	const perSeg: { chars: string[]; palette: ShimmerPalette }[] = [];
 	for (const seg of segments) {
-		const chars = [...seg.text];
+		const chars = Array.from(seg.text);
 		total += chars.length;
-		expanded.push({ chars, palette: seg.palette ?? DEFAULT_SHIMMER_PALETTE });
+		perSeg.push({ chars, palette: seg.palette ?? DEFAULT_SHIMMER_PALETTE });
 	}
 	if (total === 0) return "";
 
-	const out: string[] = [];
+	// Disabled: no animation, no per-char work. Paint each segment in its mid
+	// tier so the working line stays legible without movement.
+	if (mode === "disabled") {
+		let out = "";
+		for (const { chars, palette } of perSeg) {
+			const seq = compile(theme, palette).mid;
+			out += `${seq.open}${chars.join("")}${seq.close}`;
+		}
+		return out;
+	}
+
+	const time = Date.now();
+	const intensityFn = mode === "kitt" ? kittIntensity : classicIntensity;
+
+	let out = "";
 	let index = 0;
-	for (const { chars, palette } of expanded) {
-		for (const ch of chars) {
-			out.push(styleShimmerChar(ch, shimmerIntensity(index, total), theme, palette));
+	for (const { chars, palette } of perSeg) {
+		const compiled = compile(theme, palette);
+		let runTier: Tier | null = null;
+		let runBuf = "";
+		for (let i = 0; i < chars.length; i++) {
+			const tier = tierFor(intensityFn(time, index, total));
+			if (tier !== runTier) {
+				if (runTier !== null) {
+					const seq = compiled[runTier];
+					out += `${seq.open}${runBuf}${seq.close}`;
+					runBuf = "";
+				}
+				runTier = tier;
+			}
+			runBuf += chars[i];
 			index++;
 		}
+		if (runTier !== null && runBuf.length > 0) {
+			const seq = compiled[runTier];
+			out += `${seq.open}${runBuf}${seq.close}`;
+		}
 	}
-	return out.join("");
+	return out;
 }
 
 export function shimmerText(text: string, theme: ShimmerTheme, palette?: ShimmerPalette): string {

package/src/modes/utils/ui-helpers.ts

@@ -113,21 +113,39 @@ export class UiHelpers {
 								type?: "bash" | "task";
 								label?: string;
 								durationMs?: number;
+								jobs?: Array<{
+									jobId?: string;
+									type?: "bash" | "task";
+									label?: string;
+									durationMs?: number;
+								}>;
 							}>
 						).details;
-						const jobId = details?.jobId ?? "unknown";
-						const typeLabel = details?.type ? `[${details.type}]` : "[job]";
-						const duration =
-							typeof details?.durationMs === "number" ? formatDuration(details.durationMs) : undefined;
-						const line = [
-							theme.fg("success", `${theme.status.success} Background job completed`),
-							theme.fg("dim", typeLabel),
-							theme.fg("accent", jobId),
-							duration ? theme.fg("dim", `(${duration})`) : undefined,
-						]
-							.filter(Boolean)
-							.join(" ");
-						this.ctx.chatContainer.addChild(new Text(line, 1, 0));
+						const jobs =
+							details?.jobs && details.jobs.length > 0
+								? details.jobs
+								: [
+										{
+											jobId: details?.jobId,
+											type: details?.type,
+											label: details?.label,
+											durationMs: details?.durationMs,
+										},
+									];
+						for (const job of jobs) {
+							const jobId = job.jobId ?? "unknown";
+							const typeLabel = job.type ? `[${job.type}]` : "[job]";
+							const duration = typeof job.durationMs === "number" ? formatDuration(job.durationMs) : undefined;
+							const line = [
+								theme.fg("success", `${theme.status.success} Background job completed`),
+								theme.fg("dim", typeLabel),
+								theme.fg("accent", jobId),
+								duration ? theme.fg("dim", `(${duration})`) : undefined,
+							]
+								.filter(Boolean)
+								.join(" ");
+							this.ctx.chatContainer.addChild(new Text(line, 1, 0));
+						}
 						break;
 					}
 					if (message.customType === SKILL_PROMPT_MESSAGE_TYPE) {

package/src/prompts/tools/async-result.md

@@ -1,5 +1,8 @@
 <system-notice>
-Background job {{jobId}} has completed. Resume your work using the result below.
+{{#if multiple}}{{jobs.length}} background jobs have completed. Resume your work using the results below.
 
-{{result}}
+{{else}}Background job {{jobs.[0].jobId}} has completed. Resume your work using the result below.
+{{/if}}{{#each jobs}}{{#if @root.multiple}}── Job {{this.jobId}}{{#if this.label}} ({{this.label}}){{/if}} ──
+{{/if}}{{this.result}}{{#unless @last}}
+{{/unless}}{{/each}}
 </system-notice>