@prometheus-ai/agent 0.5.3 → 0.5.8

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

@@ -15,7 +15,7 @@ import {
 import type { TreeFilterMode } from "../../config/settings-schema";
 import { theme } from "../../modes/theme/theme";
 import { matchesAppInterrupt, matchesSelectDown, matchesSelectUp } from "../../modes/utils/keybinding-matchers";
-import type { SessionTreeNode } from "../../session/session-manager";
+import type { SessionTreeNode } from "../../session/session-entries";
 import { shortenPath } from "../../tools/render-utils";
 import { toPathList } from "../../tools/search";
 import { DynamicBorder } from "./dynamic-border";
@@ -438,7 +438,7 @@ class TreeList implements Component {
 		}
 	}
 
-	render(width: number): string[] {
+	render(width: number): readonly string[] {
 		const lines: string[] = [];
 
 		if (this.#filteredNodes.length === 0) {
@@ -518,6 +518,16 @@ class TreeList implements Component {
 			const renderedIndent = Math.min(displayIndent, maxIndentLevels);
 			const scrollOffset = displayIndent - renderedIndent;
 			const connectorPositionDisplay = hasConnector ? renderedIndent - 1 : -1;
+			// Chain rows (no connector of their own) under a last-sibling (`└─`)
+			// branch stay anchored by a vertical drawn one level RIGHT of the
+			// suppressed gutter — the column where the row's own connector would
+			// sit, directly below the branch head's content. Drawing it in the
+			// `└─` column itself contradicts the corner and leaves dangling,
+			// drifting verticals once the chain branches deeper (#2298, #2325).
+			// Chains under `├─` heads need no extra anchor: the sibling line
+			// (`show: true` gutter) already ties them to their branch.
+			const nearestGutter = !hasConnector ? flatNode.gutters[flatNode.gutters.length - 1] : undefined;
+			const chainAnchorLevel = nearestGutter && !nearestGutter.show ? nearestGutter.position + 1 : -1;
 
 			// Build prefix char by char, placing gutters and connector at their positions
 			const totalChars = renderedIndent * 3;
@@ -530,11 +540,16 @@ class TreeList implements Component {
 				// Check if there's a gutter at this level (translated to original tree depth)
 				const gutter = flatNode.gutters.find(g => g.position === originalLevel);
 				if (gutter) {
+					// Gutters follow standard tree semantics: `│` only while more
+					// siblings continue below (`show`), space below a `└─`.
 					if (posInLevel === 0) {
 						prefixChars.push(gutter.show ? theme.tree.vertical : " ");
 					} else {
 						prefixChars.push(" ");
 					}
+				} else if (originalLevel === chainAnchorLevel) {
+					// Chain anchor for rows under a `└─` branch head.
+					prefixChars.push(posInLevel === 0 ? theme.tree.vertical : " ");
 				} else if (hasConnector && level === connectorPositionDisplay) {
 					// Connector at this level
 					if (posInLevel === 0) {
@@ -835,7 +850,7 @@ class SearchLine implements Component {
 
 	invalidate(): void {}
 
-	render(width: number): string[] {
+	render(width: number): readonly string[] {
 		const query = this.treeList.getSearchQuery();
 		if (query) {
 			return [truncateToWidth(`  ${theme.fg("muted", "Search:")} ${theme.fg("accent", query)}`, width)];
@@ -864,7 +879,7 @@ class LabelInput implements Component {
 
 	invalidate(): void {}
 
-	render(width: number): string[] {
+	render(width: number): readonly string[] {
 		const lines: string[] = [];
 		const indent = "  ";
 		const availableWidth = width - indent.length;

package/src/modes/components/ttsr-notification.ts

@@ -2,16 +2,24 @@ import { Box, Container, Spacer, Text } from "@prometheus-ai/tui";
 import type { Rule } from "../../capability/rule";
 import { theme } from "../../modes/theme/theme";
 
+/** Collapsed view shows at most this many rules before eliding the rest. */
+const MAX_COLLAPSED_RULES = 4;
+
 /**
  * Component that renders a TTSR (Time Traveling Stream Rules) notification.
  * Shows when a rule violation is detected and the stream is being rewound.
+ * One block can carry several rules: a single event may match multiple rules,
+ * and consecutive notifications merge into the previous block via
+ * {@link addRules} while it is still the live transcript tail.
  */
 export class TtsrNotificationComponent extends Container {
 	#box: Box;
 	#expanded = false;
+	#rules: Rule[];
 
-	constructor(private readonly rules: Rule[]) {
+	constructor(rules: Rule[]) {
 		super();
+		this.#rules = [...rules];
 
 		this.addChild(new Spacer(1));
 
@@ -22,6 +30,17 @@ export class TtsrNotificationComponent extends Container {
 		this.#rebuild();
 	}
 
+	/** Merge additional rules into this block (deduped by rule name). */
+	addRules(rules: Rule[]): void {
+		let changed = false;
+		for (const rule of rules) {
+			if (this.#rules.some(existing => existing.name === rule.name)) continue;
+			this.#rules.push(rule);
+			changed = true;
+		}
+		if (changed) this.#rebuild();
+	}
+
 	setExpanded(expanded: boolean): void {
 		if (this.#expanded !== expanded) {
 			this.#expanded = expanded;
@@ -35,46 +54,69 @@ export class TtsrNotificationComponent extends Container {
 
 	#rebuild(): void {
 		this.#box.clear();
+		// fg colors conflict with inverse, so styling inside the block is limited
+		// to bold (names) and italic (descriptions).
+		if (this.#rules.length === 1) {
+			this.#rebuildSingle(this.#rules[0]!);
+		} else {
+			this.#rebuildMulti();
+		}
+	}
 
-		// Build header: warning symbol + rule name + rewind icon
-		const ruleNames = this.rules.map(r => theme.bold(r.name)).join(", ");
-		const label = this.rules.length === 1 ? "rule" : "rules";
-		const header = `${theme.icon.warning} Injecting ${label}: ${ruleNames}`;
+	#rebuildSingle(rule: Rule): void {
+		const header = `${theme.icon.warning} Injecting rule: ${theme.bold(rule.name)}  ${theme.icon.rewind}`;
+		this.#box.addChild(new Text(header, 0, 0));
 
-		// Create header with rewind icon on the right
-		const rewindIcon = theme.icon.rewind;
+		const desc = (rule.description || rule.content)?.trim();
+		if (!desc) return;
 
-		this.#box.addChild(new Text(`${header}  ${rewindIcon}`, 0, 0));
+		let displayText = desc;
+		let truncated = false;
+		if (!this.#expanded) {
+			const lines = desc.split("\n");
+			if (lines.length > 2) {
+				displayText = `${lines.slice(0, 2).join("\n")}…`;
+				truncated = true;
+			}
+		}
 
-		// Show description(s) - italic and truncated
-		for (const rule of this.rules) {
-			const desc = rule.description || rule.content;
-			if (desc) {
-				this.#box.addChild(new Spacer(1));
+		this.#box.addChild(new Spacer(1));
+		this.#box.addChild(new Text(theme.italic(displayText), 0, 0));
+		if (truncated) {
+			this.#box.addChild(new Text(theme.italic(" (ctrl+o to expand)"), 0, 0));
+		}
+	}
+
+	#rebuildMulti(): void {
+		const header = `${theme.icon.warning} Injecting ${this.#rules.length} rules:  ${theme.icon.rewind}`;
+		this.#box.addChild(new Text(header, 0, 0));
+		this.#box.addChild(new Spacer(1));
 
-				let displayText = desc.trim();
+		const visible = this.#expanded ? this.#rules : this.#rules.slice(0, MAX_COLLAPSED_RULES);
+		let elidedDetail = false;
+		for (const rule of visible) {
+			const desc = (rule.description || rule.content)?.trim();
+			let line = theme.bold(rule.name);
+			if (desc) {
+				let displayText = desc;
 				if (!this.#expanded) {
-					// Truncate to first 2 lines
-					const lines = displayText.split("\n");
-					if (lines.length > 2) {
-						displayText = `${lines.slice(0, 2).join("\n")}…`;
+					// One line per rule when collapsed; full description when expanded.
+					const newline = desc.indexOf("\n");
+					if (newline !== -1) {
+						displayText = `${desc.slice(0, newline).trimEnd()}…`;
+						elidedDetail = true;
 					}
 				}
-
-				// Use italic for subtle distinction (fg colors conflict with inverse)
-				this.#box.addChild(new Text(theme.italic(displayText), 0, 0));
+				line += `: ${theme.italic(displayText)}`;
 			}
+			this.#box.addChild(new Text(line, 0, 0));
 		}
 
-		// Show expand hint if collapsed and there's more content
-		if (!this.#expanded) {
-			const hasMoreContent = this.rules.some(r => {
-				const desc = r.description || r.content;
-				return desc && desc.split("\n").length > 2;
-			});
-			if (hasMoreContent) {
-				this.#box.addChild(new Text(theme.italic(" (ctrl+o to expand)"), 0, 0));
-			}
+		const hidden = this.#rules.length - visible.length;
+		if (hidden > 0) {
+			this.#box.addChild(new Text(theme.italic(`… +${hidden} more (ctrl+o to expand)`), 0, 0));
+		} else if (elidedDetail) {
+			this.#box.addChild(new Text(theme.italic(" (ctrl+o to expand)"), 0, 0));
 		}
 	}
 }

package/src/modes/components/usage-row.ts

@@ -0,0 +1,18 @@
+import type { Usage } from "@prometheus-ai/ai";
+import { Container, Spacer, Text } from "@prometheus-ai/tui";
+import { formatNumber } from "@prometheus-ai/utils";
+import { theme } from "../../modes/theme/theme";
+
+export function createUsageRowBlock(usage: Usage): Container {
+	const totalInput = usage.input + usage.cacheWrite;
+	const parts: string[] = [];
+	parts.push(`${theme.icon.input} ${formatNumber(totalInput)}`);
+	parts.push(`${theme.icon.output} ${formatNumber(usage.output)}`);
+	if (usage.cacheRead > 0) {
+		parts.push(`cache: ${formatNumber(usage.cacheRead)}`);
+	}
+	const block = new Container();
+	block.addChild(new Spacer(1));
+	block.addChild(new Text(theme.fg("dim", parts.join("  ")), 1, 0));
+	return block;
+}

package/src/modes/components/user-message-selector.ts

@@ -82,7 +82,7 @@ class UserMessageList implements Component {
 		return true;
 	}
 
-	render(width: number): string[] {
+	render(width: number): readonly string[] {
 		const lines: string[] = [];
 
 		if (this.messages.length === 0) {

package/src/modes/components/user-message.ts

@@ -1,21 +1,30 @@
-import { Container, Markdown, Spacer } from "@prometheus-ai/tui";
+import { Container, Markdown } from "@prometheus-ai/tui";
 import { getMarkdownTheme, theme } from "../../modes/theme/theme";
-import { imageReferenceHyperlink, renderImageReferences } from "../image-references";
+import { imageReferenceHyperlink, renderPlaceholders } from "../image-references";
 import { highlightMagicKeywords } from "../magic-keywords";
 
 // OSC 133 shell integration: marks prompt zones for terminal multiplexers
+// Do not emit OSC 133 C ("command start") here: the transcript has no matching
+// command-finished marker, so terminals can group later assistant/tool output
+// under the first submitted prompt.
 const OSC133_ZONE_START = "\x1b]133;A\x07";
 const OSC133_ZONE_END = "\x1b]133;B\x07";
-const OSC133_ZONE_FINAL = "\x1b]133;C\x07";
 
 /**
  * Component that renders a user message
  */
 export class UserMessageComponent extends Container {
+	// Memoized OSC 133 zone wrapping keyed on the underlying container render
+	// (same source ref ⇒ identical rows ⇒ reuse the wrapped copy). Keeps this
+	// component reference-stable for the transcript's incremental assembly and
+	// never mutates the container's cached array.
+	#zoneSource: readonly string[] | undefined;
+	#zoneLines: string[] | undefined;
+
 	constructor(text: string, synthetic = false, imageLinks?: readonly (string | undefined)[]) {
 		super();
 		const bgColor = (value: string) => theme.bg("userMessageBg", value);
-		// Paint the magic keywords ("ultrathink"/"orchestrate"/"workflow") inside the rendered
+		// Paint the magic keywords ("ultrathink"/"orchestrate"/"workflowz") inside the rendered
 		// bubble too — matching the live editor glow. The Markdown component routes code spans and
 		// fenced blocks through its own code styling (never `color`), so those are already excluded;
 		// `highlightMagicKeywords` additionally restores the bubble's own foreground after each
@@ -26,11 +35,13 @@ export class UserMessageComponent extends Container {
 			: (value: string) => theme.fg("userMessageText", highlightMagicKeywords(value, keywordReset));
 		const imageLabel = (value: string) => theme.fg("accent", `\x1b[1m\x1b[4m${value}\x1b[24m\x1b[22m`);
 		const color = (value: string) =>
-			renderImageReferences(value, {
+			renderPlaceholders(value, {
 				renderText: baseText,
-				renderReference: (label, index) => imageReferenceHyperlink(label, index, imageLinks, imageLabel),
+				renderReference: (label, kind, index) =>
+					kind === "image"
+						? imageReferenceHyperlink(label, index, imageLinks, imageLabel)
+						: theme.fg("accent", `\x1b[1m${label}\x1b[22m`),
 			});
-		this.addChild(new Spacer(1));
 		this.addChild(
 			new Markdown(text, 1, 1, getMarkdownTheme(), {
 				bgColor,
@@ -39,14 +50,19 @@ export class UserMessageComponent extends Container {
 		);
 	}
 
-	override render(width: number): string[] {
+	override render(width: number): readonly string[] {
 		const lines = super.render(width);
 		if (lines.length === 0) {
 			return lines;
 		}
-
-		lines[0] = OSC133_ZONE_START + lines[0];
-		lines[lines.length - 1] = lines[lines.length - 1] + OSC133_ZONE_END + OSC133_ZONE_FINAL;
-		return lines;
+		if (this.#zoneSource === lines && this.#zoneLines !== undefined) {
+			return this.#zoneLines;
+		}
+		const wrapped = lines.slice();
+		wrapped[0] = OSC133_ZONE_START + wrapped[0];
+		wrapped[wrapped.length - 1] = wrapped[wrapped.length - 1] + OSC133_ZONE_END;
+		this.#zoneSource = lines;
+		this.#zoneLines = wrapped;
+		return wrapped;
 	}
 }

package/src/modes/components/visual-truncate.ts

@@ -6,7 +6,7 @@ import { Text } from "@prometheus-ai/tui";
 
 export interface VisualTruncateResult {
 	/** The visual lines to display */
-	visualLines: string[];
+	visualLines: readonly string[];
 	/** Number of visual lines that were skipped (hidden) */
 	skippedCount: number;
 }

package/src/modes/components/welcome.ts

@@ -17,6 +17,18 @@ const TIPS: readonly string[] = tipsText
 	.map(line => line.trim())
 	.filter(line => line.length > 0);
 
+/**
+ * Fixed number of session rows in the welcome box so its height stays stable
+ * across recent-session updates.
+ */
+export const WELCOME_SESSION_SLOTS = 4;
+
+/**
+ * Fixed number of LSP-server rows, for the same reason. Overflow is sliced so
+ * the box height is constant regardless of how many servers a project has.
+ */
+export const WELCOME_LSP_SLOTS = 4;
+
 export function renderWelcomeTip(tip: string, boxWidth: number): string[] {
 	const label = "Tip: ";
 	const labelWidth = visibleWidth(label);
@@ -48,7 +60,7 @@ export interface RecentSession {
 
 export interface LspServerInfo {
 	name: string;
-	status: "ready" | "error" | "connecting";
+	status: "ready" | "error" | "connecting" | "available";
 	fileTypes: string[];
 }
 
@@ -60,6 +72,11 @@ export class WelcomeComponent implements Component {
 	#animTimer: ReturnType<typeof setInterval> | null = null;
 	/** Tip chosen once per instance so re-renders (intro, LSP updates) don't shuffle it. */
 	readonly #tip: string | undefined = TIPS.length > 0 ? TIPS[Math.floor(Math.random() * TIPS.length)] : undefined;
+	// Render cache: the welcome box is the first transcript-area component, so
+	// returning a stable array reference keeps the whole frame prefix stable.
+	// Bypassed while the intro animation runs (every frame differs).
+	#cachedWidth = -1;
+	#cachedLines: string[] | undefined;
 
 	constructor(
 		private readonly version: string,
@@ -69,7 +86,10 @@ export class WelcomeComponent implements Component {
 		private lspServers: LspServerInfo[] = [],
 	) {}
 
-	invalidate(): void {}
+	invalidate(): void {
+		this.#cachedWidth = -1;
+		this.#cachedLines = undefined;
+	}
 
 	/**
 	 * Play a one-shot intro that sweeps the gradient through every phase
@@ -95,22 +115,43 @@ export class WelcomeComponent implements Component {
 			this.#animTimer = null;
 		}
 		this.#animStart = null;
+		// The settled (resting) frame differs from the last intro frame.
+		this.invalidate();
 	}
 
 	setModel(modelName: string, providerName: string): void {
 		this.modelName = modelName;
 		this.providerName = providerName;
+		this.invalidate();
 	}
 
 	setRecentSessions(sessions: RecentSession[]): void {
 		this.recentSessions = sessions;
+		this.invalidate();
 	}
 
 	setLspServers(servers: LspServerInfo[]): void {
 		this.lspServers = servers;
+		this.invalidate();
 	}
 
-	render(termWidth: number): string[] {
+	render(termWidth: number): readonly string[] {
+		const animating = this.#animStart != null;
+		if (!animating && this.#cachedLines && this.#cachedWidth === termWidth) {
+			return this.#cachedLines;
+		}
+		const lines = this.#renderLines(termWidth);
+		if (animating) {
+			this.#cachedLines = undefined;
+			this.#cachedWidth = -1;
+		} else {
+			this.#cachedLines = lines;
+			this.#cachedWidth = termWidth;
+		}
+		return lines;
+	}
+
+	#renderLines(termWidth: number): string[] {
 		// Box dimensions - responsive with max width and small-terminal support
 		const maxWidth = 100;
 		const boxWidth = Math.min(maxWidth, Math.max(0, termWidth - 2));
@@ -165,7 +206,7 @@ export class WelcomeComponent implements Component {
 			// absorbs whatever space is left.
 			const bulletPrefix = ` ${theme.md.bullet} `;
 			const prefixWidth = visibleWidth(bulletPrefix);
-			for (const session of this.recentSessions.slice(0, 3)) {
+			for (const session of this.recentSessions.slice(0, WELCOME_SESSION_SLOTS)) {
 				const timeSuffixRaw = ` (${session.timeAgo})`;
 				const timeWidth = visibleWidth(timeSuffixRaw);
 				const nameBudget = Math.max(1, rightCol - prefixWidth - timeWidth);
@@ -176,23 +217,33 @@ export class WelcomeComponent implements Component {
 				);
 			}
 		}
+		// Pad to the fixed slot count so the box height doesn't depend on session count.
+		while (sessionLines.length < WELCOME_SESSION_SLOTS) {
+			sessionLines.push("");
+		}
 
 		// LSP servers content
 		const lspLines: string[] = [];
 		if (this.lspServers.length === 0) {
 			lspLines.push(` ${theme.fg("dim", "No LSP servers")}`);
 		} else {
-			for (const server of this.lspServers) {
+			for (const server of this.lspServers.slice(0, WELCOME_LSP_SLOTS)) {
 				const icon =
 					server.status === "ready"
-						? theme.styledSymbol("status.success", "success")
-						: server.status === "connecting"
-							? theme.styledSymbol("status.pending", "muted")
-							: theme.styledSymbol("status.error", "error");
+						? theme.styledSymbol("status.enabled", "success")
+						: server.status === "available"
+							? theme.styledSymbol("status.enabled", "dim")
+							: server.status === "connecting"
+								? theme.styledSymbol("status.pending", "muted")
+								: theme.styledSymbol("status.error", "error");
 				const exts = server.fileTypes.slice(0, 3).join(" ");
 				lspLines.push(` ${icon} ${theme.fg("muted", server.name)} ${theme.fg("dim", exts)}`);
 			}
 		}
+		// Pad to the fixed slot count so the box height doesn't depend on server count.
+		while (lspLines.length < WELCOME_LSP_SLOTS) {
+			lspLines.push("");
+		}
 
 		// Right column
 		const rightLines = [
@@ -310,22 +361,11 @@ export class WelcomeComponent implements Component {
 		if (this.#animStart == null) return REST_FRAME;
 		const elapsed = performance.now() - this.#animStart;
 		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;
-		// 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(PROMETHEUS_LOGO, phase, { strength: shineStrength, pos: shinePos });
+		return introLogoFrame(elapsed / INTRO_MS);
 	}
 }
 
-export const PROMETHEUS_LOGO = ["  ▄██████▄  ", " ███    ███ ", "██        ██", " ███    ███ ", "  ▀██████▀  "];
+export const PROMETHEUS_LOGO = ["▀██████████▀", " ╘██    ██  ", "  ██    ██  ", "  ██    ██  ", " ▄██▄  ▄██▄ "];
 
 /** Multi-stop palette for the diagonal gradient. */
 const GRADIENT_STOPS: ReadonlyArray<readonly [number, number, number]> = [
@@ -431,5 +471,23 @@ const INTRO_SWEEPS = 2.5;
 /** Number of times the shine highlight crosses the diagonal across the intro. */
 const INTRO_SHINE_TRAVERSALS = 3;
 
+/**
+ * Logo frame for a normalized intro progress in [0, 1).
+ *
+ * Ease-out cubic so the spin decelerates into the resting state. The gradient
+ * sweeps backward through INTRO_SWEEPS full rotations (`eased == 1` → phase =
+ * 0 = resting frame) while the shine traverses the diagonal at a steady pace,
+ * decoupled from the gradient phase so the two layers parallax; its strength
+ * fades with the same ease-out curve so the highlight is gone by the resting
+ * frame.
+ */
+function introLogoFrame(progress: number): string[] {
+	const eased = 1 - (1 - progress) ** 3;
+	const phase = ((((1 - eased) * INTRO_SWEEPS) % 1) + 1) % 1;
+	const shinePos = (((progress * INTRO_SHINE_TRAVERSALS) % 1) + 1) % 1;
+	const shineStrength = (1 - eased) ** 1.5;
+	return gradientLogo(PROMETHEUS_LOGO, phase, { strength: shineStrength, pos: shinePos });
+}
+
 /** Resting gradient frame, cached for re-renders outside of the intro. */
 const REST_FRAME = gradientLogo(PROMETHEUS_LOGO, 0);

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

@@ -7,10 +7,11 @@
  * wording, and add-flow logic stay in the per-controller files because they
  * diverge in workflow.
  */
-import { Spacer, Text } from "@prometheus-ai/tui";
+import { Text } from "@prometheus-ai/tui";
 import type { SourceMeta } from "../../capability/types";
 import { shortenPath } from "../../tools/render-utils";
 import { DynamicBorder } from "../components/dynamic-border";
+import { TranscriptBlock } from "../components/transcript-container";
 import { parseCommandArgs } from "../shared";
 import type { InteractiveModeContext } from "../types";
 
@@ -100,9 +101,9 @@ export function* groupBySource<T>(
  * container and request a render.
  */
 export function showCommandMessage(ctx: InteractiveModeContext, text: string): void {
-	ctx.chatContainer.addChild(new Spacer(1));
-	ctx.chatContainer.addChild(new DynamicBorder());
-	ctx.chatContainer.addChild(new Text(text, 1, 1));
-	ctx.chatContainer.addChild(new DynamicBorder());
-	ctx.ui.requestRender();
+	const block = new TranscriptBlock();
+	block.addChild(new DynamicBorder());
+	block.addChild(new Text(text, 1, 1));
+	block.addChild(new DynamicBorder());
+	ctx.present(block);
 }