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

package/src/config/settings-schema.ts

@@ -601,6 +601,22 @@ export const SETTINGS_SCHEMA = {
 		default: 3,
 	},
 
+	"display.shimmer": {
+		type: "enum",
+		values: ["classic", "kitt", "disabled"] as const,
+		default: "classic",
+		ui: {
+			tab: "appearance",
+			label: "Shimmer",
+			description: "Animation style for working/loading messages",
+			options: [
+				{ value: "classic", label: "Classic", description: "Soft cosine wave sweeping across the text" },
+				{ value: "kitt", label: "KITT Scanner", description: "Knight Rider 1982 red light bouncing left-right" },
+				{ value: "disabled", label: "Disabled", description: "No animation; static muted text" },
+			],
+		},
+	},
+
 	"display.showTokenUsage": {
 		type: "boolean",
 		default: false,

package/src/modes/components/mcp-add-wizard.ts

@@ -1157,10 +1157,11 @@ export class MCPAddWizard extends Container {
 			this.#contentContainer.addChild(new Text(theme.fg("success", "✓ Authentication successful!"), 0, 0));
 			this.#contentContainer.addChild(new Spacer(1));
 			this.#contentContainer.addChild(new Text(theme.fg("muted", "Running connection health check..."), 0, 0));
-			const healthText = new Text(theme.fg("muted", "| Checking server connection..."), 0, 0);
+			const spinnerFrames = theme.spinnerFrames;
+			const initialFrame = spinnerFrames[0] ?? "|";
+			const healthText = new Text(theme.fg("muted", `${initialFrame} Checking server connection...`), 0, 0);
 			this.#contentContainer.addChild(healthText);
 
-			const spinnerFrames = ["|", "/", "-", "\\"];
 			let spinnerIndex = 0;
 			const spinner = setInterval(() => {
 				healthText.setText(
@@ -1168,7 +1169,7 @@ export class MCPAddWizard extends Container {
 				);
 				spinnerIndex++;
 				this.#requestRender();
-			}, 120);
+			}, 80);
 
 			let healthPassed = true;
 			let healthError = "";

package/src/modes/components/settings-selector.ts

@@ -495,14 +495,6 @@ export class SettingsSelectorComponent extends Container {
 	 */
 	#showSettingsTab(tabId: SettingTab): void {
 		const defs = getSettingsForTab(tabId);
-		const items: SettingItem[] = [];
-
-		for (const def of defs) {
-			const item = this.#defToItem(def);
-			if (item) {
-				items.push(item);
-			}
-		}
 
 		// Add status line preview for appearance tab
 		if (tabId === "appearance") {
@@ -516,7 +508,7 @@ export class SettingsSelectorComponent extends Container {
 		}
 
 		this.#currentList = new SettingsList(
-			items,
+			this.#buildItemsForDefs(defs),
 			10,
 			getSettingsListTheme(),
 			(id, newValue) => {
@@ -537,7 +529,12 @@ export class SettingsSelectorComponent extends Container {
 					settings.set(path, newValue as never);
 					this.callbacks.onChange(path, newValue);
 				}
-				// Submenu types are handled in createSubmenu
+				// Submenu/text types already persisted the value inside their own
+				// done callbacks before SettingsList re-dispatches here. Re-run the
+				// definition-to-item mapping so condition-gated settings (e.g. the
+				// Hindsight cluster guarded by memory.backend) appear/disappear
+				// immediately instead of waiting for the next tab switch.
+				this.#refreshCurrentTabItems(defs);
 			},
 			() => this.callbacks.onCancel(),
 		);
@@ -545,6 +542,22 @@ export class SettingsSelectorComponent extends Container {
 		this.addChild(this.#currentList);
 	}
 
+	/** Map a definition list to UI items, dropping any whose condition is false. */
+	#buildItemsForDefs(defs: SettingDef[]): SettingItem[] {
+		const items: SettingItem[] = [];
+		for (const def of defs) {
+			const item = this.#defToItem(def);
+			if (item) items.push(item);
+		}
+		return items;
+	}
+
+	/** Re-evaluate condition gates against the current settings and refresh the active list. */
+	#refreshCurrentTabItems(defs: SettingDef[]): void {
+		if (this.#currentTabId === "plugins" || !this.#currentList) return;
+		this.#currentList.setItems(this.#buildItemsForDefs(defs));
+	}
+
 	/**
 	 * Get the status line preview string.
 	 */

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/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/theme/shimmer.ts

@@ -1,18 +1,36 @@
+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";
 
 /** 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). */
+	/** Color for chars outside / at the edge of the band (intensity < ~0.22). */
 	low: ThemeColor;
-	/** Color for chars approaching the crest (0.2 <= intensity < 0.6). */
+	/** Color for chars approaching the crest (~0.22 ≤ intensity < ~0.65). */
 	mid: ThemeColor;
-	/** Color at the band's crest (intensity >= 0.6). */
+	/** Color at the band's crest (intensity ≥ ~0.65). */
 	high: ThemeColor;
 	/** Whether to bold the crest tier. Default `false`. */
 	bold?: boolean;
@@ -31,47 +49,160 @@ 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;
+}
+
+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 highOpen = palette.bold ? `${BOLD_OPEN}${theme.getFgAnsi(palette.high)}` : theme.getFgAnsi(palette.high);
+	const highClose = palette.bold ? `${BOLD_CLOSE}${FG_RESET}` : FG_RESET;
+	const out: CompiledPalette = {
+		low: { open: theme.getFgAnsi(palette.low), close: FG_RESET },
+		mid: { open: theme.getFgAnsi(palette.mid), close: FG_RESET },
+		high: { open: highOpen, close: highClose },
+	};
+	p[kCompiledFor] = theme;
+	p[kCompiled] = out;
+	return out;
+}
+
+// ─── 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));
+}
+
+/**
+ * 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";
 
-	const x = Math.PI * (dist / SHIMMER_BAND_HALF_WIDTH);
-	return 0.5 * (1 + Math.cos(x));
+function tierFor(intensity: number): Tier {
+	if (intensity >= TIER_HIGH) return "high";
+	if (intensity >= TIER_MID) return "mid";
+	return "low";
 }
 
-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;
+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.
+ * 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>