pi-crew 0.1.43 → 0.1.45

package/src/ui/crew-select-list.ts

@@ -1,111 +1,111 @@
-import { pad, truncate } from "../utils/visual.ts";
-import type { CrewTheme } from "./theme-adapter.ts";
-
-export interface CrewSelectItem<T = string> {
-	value: T;
-	label: string;
-	description?: string;
-}
-
-export interface CrewSelectListOptions<T = string> {
-	onSelect: (item: CrewSelectItem<T>) => void;
-	onCancel: () => void;
-	onPreview?: (item: CrewSelectItem<T>) => void;
-	maxHeight?: number;
-}
-
-export class CrewSelectList<T = string> {
-	private readonly items: CrewSelectItem<T>[];
-	private readonly theme: CrewTheme;
-	private readonly options: CrewSelectListOptions<T>;
-	private selectedIndex = 0;
-	private scrollOffset = 0;
-
-	constructor(items: CrewSelectItem<T>[], theme: CrewTheme, options: CrewSelectListOptions<T>) {
-		this.items = [...items];
-		this.theme = theme;
-		this.options = options;
-		this.selectedIndex = this.items.length ? 0 : -1;
-	}
-
-	invalidate(): void {}
-
-	getSelected(): CrewSelectItem<T> | undefined {
-		return this.selectedIndex >= 0 ? this.items[this.selectedIndex] : undefined;
-	}
-
-	setSelectedIndex(index: number): void {
-		if (!this.items.length) {
-			this.selectedIndex = -1;
-			this.scrollOffset = 0;
-			return;
-		}
-		const next = Math.min(this.items.length - 1, Math.max(0, index));
-		const changed = next !== this.selectedIndex;
-		this.selectedIndex = next;
-		this.ensureVisible();
-		if (changed) {
-			const selected = this.getSelected();
-			if (selected) this.options.onPreview?.(selected);
-		}
-	}
-
-	handleInput(data: string): void {
-		if (data === "q" || data === "\u001b") {
-			this.options.onCancel();
-			return;
-		}
-		if (data === "j" || data === "\u001b[B") {
-			this.setSelectedIndex(this.selectedIndex + 1);
-			return;
-		}
-		if (data === "k" || data === "\u001b[A") {
-			this.setSelectedIndex(this.selectedIndex - 1);
-			return;
-		}
-		if (data === "\r" || data === "\n") {
-			const selected = this.getSelected();
-			if (selected) this.options.onSelect(selected);
-		}
-	}
-
-	render(width: number): string[] {
-		if (!this.items.length) return [this.theme.fg("muted", "(no items)")];
-		const maxHeight = Math.max(1, Math.floor(this.options.maxHeight ?? this.items.length));
-		this.ensureVisible();
-		const hasTop = this.scrollOffset > 0;
-		const availableWithoutBottom = Math.max(1, maxHeight - (hasTop ? 1 : 0));
-		const hasBottom = this.scrollOffset + availableWithoutBottom < this.items.length;
-		const slots = this.visibleItemSlots(maxHeight, hasTop, hasBottom);
-		const visibleItems = this.items.slice(this.scrollOffset, this.scrollOffset + slots);
-		const lines: string[] = [];
-		if (hasTop) lines.push(this.theme.fg("muted", `↑ ${this.scrollOffset} more`));
-		for (const [offset, item] of visibleItems.entries()) {
-			const index = this.scrollOffset + offset;
-			const prefix = index === this.selectedIndex ? " → " : "   ";
-			const suffix = item.description ? this.theme.fg("dim", ` — ${item.description}`) : "";
-			const raw = `${prefix}${item.label}${suffix}`;
-			const line = index === this.selectedIndex ? this.theme.inverse?.(raw) ?? raw : raw;
-			lines.push(pad(truncate(line, width, "..."), Math.max(1, width)));
-		}
-		if (hasBottom) lines.push(this.theme.fg("muted", `↓ ${this.items.length - (this.scrollOffset + slots)} more`));
-		return lines.slice(0, maxHeight);
-	}
-
-	private visibleItemSlots(maxHeight: number, hasTop: boolean, hasBottom: boolean): number {
-		return Math.max(1, maxHeight - (hasTop ? 1 : 0) - (hasBottom ? 1 : 0));
-	}
-
-	private ensureVisible(): void {
-		if (this.selectedIndex < 0) return;
-		const maxHeight = Math.max(1, Math.floor(this.options.maxHeight ?? this.items.length));
-		const reservedTop = this.scrollOffset > 0 ? 1 : 0;
-		const visibleSlots = Math.max(1, maxHeight - reservedTop - 1);
-		if (this.selectedIndex < this.scrollOffset) {
-			this.scrollOffset = this.selectedIndex;
-		} else if (this.selectedIndex >= this.scrollOffset + visibleSlots) {
-			this.scrollOffset = Math.max(0, this.selectedIndex - visibleSlots + 1);
-		}
-		this.scrollOffset = Math.min(this.scrollOffset, Math.max(0, this.items.length - 1));
-	}
-}
+import { pad, truncate } from "../utils/visual.ts";
+import type { CrewTheme } from "./theme-adapter.ts";
+
+export interface CrewSelectItem<T = string> {
+	value: T;
+	label: string;
+	description?: string;
+}
+
+export interface CrewSelectListOptions<T = string> {
+	onSelect: (item: CrewSelectItem<T>) => void;
+	onCancel: () => void;
+	onPreview?: (item: CrewSelectItem<T>) => void;
+	maxHeight?: number;
+}
+
+export class CrewSelectList<T = string> {
+	private readonly items: CrewSelectItem<T>[];
+	private readonly theme: CrewTheme;
+	private readonly options: CrewSelectListOptions<T>;
+	private selectedIndex = 0;
+	private scrollOffset = 0;
+
+	constructor(items: CrewSelectItem<T>[], theme: CrewTheme, options: CrewSelectListOptions<T>) {
+		this.items = [...items];
+		this.theme = theme;
+		this.options = options;
+		this.selectedIndex = this.items.length ? 0 : -1;
+	}
+
+	invalidate(): void {}
+
+	getSelected(): CrewSelectItem<T> | undefined {
+		return this.selectedIndex >= 0 ? this.items[this.selectedIndex] : undefined;
+	}
+
+	setSelectedIndex(index: number): void {
+		if (!this.items.length) {
+			this.selectedIndex = -1;
+			this.scrollOffset = 0;
+			return;
+		}
+		const next = Math.min(this.items.length - 1, Math.max(0, index));
+		const changed = next !== this.selectedIndex;
+		this.selectedIndex = next;
+		this.ensureVisible();
+		if (changed) {
+			const selected = this.getSelected();
+			if (selected) this.options.onPreview?.(selected);
+		}
+	}
+
+	handleInput(data: string): void {
+		if (data === "q" || data === "\u001b") {
+			this.options.onCancel();
+			return;
+		}
+		if (data === "j" || data === "\u001b[B") {
+			this.setSelectedIndex(this.selectedIndex + 1);
+			return;
+		}
+		if (data === "k" || data === "\u001b[A") {
+			this.setSelectedIndex(this.selectedIndex - 1);
+			return;
+		}
+		if (data === "\r" || data === "\n") {
+			const selected = this.getSelected();
+			if (selected) this.options.onSelect(selected);
+		}
+	}
+
+	render(width: number): string[] {
+		if (!this.items.length) return [this.theme.fg("muted", "(no items)")];
+		const maxHeight = Math.max(1, Math.floor(this.options.maxHeight ?? this.items.length));
+		this.ensureVisible();
+		const hasTop = this.scrollOffset > 0;
+		const availableWithoutBottom = Math.max(1, maxHeight - (hasTop ? 1 : 0));
+		const hasBottom = this.scrollOffset + availableWithoutBottom < this.items.length;
+		const slots = this.visibleItemSlots(maxHeight, hasTop, hasBottom);
+		const visibleItems = this.items.slice(this.scrollOffset, this.scrollOffset + slots);
+		const lines: string[] = [];
+		if (hasTop) lines.push(this.theme.fg("muted", `↑ ${this.scrollOffset} more`));
+		for (const [offset, item] of visibleItems.entries()) {
+			const index = this.scrollOffset + offset;
+			const prefix = index === this.selectedIndex ? " → " : "   ";
+			const suffix = item.description ? this.theme.fg("dim", ` — ${item.description}`) : "";
+			const raw = `${prefix}${item.label}${suffix}`;
+			const line = index === this.selectedIndex ? this.theme.inverse?.(raw) ?? raw : raw;
+			lines.push(pad(truncate(line, width, "..."), Math.max(1, width)));
+		}
+		if (hasBottom) lines.push(this.theme.fg("muted", `↓ ${this.items.length - (this.scrollOffset + slots)} more`));
+		return lines.slice(0, maxHeight);
+	}
+
+	private visibleItemSlots(maxHeight: number, hasTop: boolean, hasBottom: boolean): number {
+		return Math.max(1, maxHeight - (hasTop ? 1 : 0) - (hasBottom ? 1 : 0));
+	}
+
+	private ensureVisible(): void {
+		if (this.selectedIndex < 0) return;
+		const maxHeight = Math.max(1, Math.floor(this.options.maxHeight ?? this.items.length));
+		const reservedTop = this.scrollOffset > 0 ? 1 : 0;
+		const visibleSlots = Math.max(1, maxHeight - reservedTop - 1);
+		if (this.selectedIndex < this.scrollOffset) {
+			this.scrollOffset = this.selectedIndex;
+		} else if (this.selectedIndex >= this.scrollOffset + visibleSlots) {
+			this.scrollOffset = Math.max(0, this.selectedIndex - visibleSlots + 1);
+		}
+		this.scrollOffset = Math.min(this.scrollOffset, Math.max(0, this.items.length - 1));
+	}
+}

package/src/ui/crew-widget.ts

@@ -100,12 +100,12 @@ function agentsFor(run: TeamRunManifest): CrewAgentRecord[] {
 	}
 }
 
-export function activeWidgetRuns(cwd: string, manifestCache?: ManifestCache, snapshotCache?: RunSnapshotCache): WidgetRun[] {
-	const runs = manifestCache ? manifestCache.list(20) : listRecentRuns(cwd, 20);
+export function activeWidgetRuns(cwd: string, manifestCache?: ManifestCache, snapshotCache?: RunSnapshotCache, preloadedManifests?: TeamRunManifest[]): WidgetRun[] {
+	const runs = preloadedManifests ?? (manifestCache ? manifestCache.list(20) : listRecentRuns(cwd, 20));
 	return runs
 		.map((run) => {
 			try {
-				const snapshot = snapshotCache?.refreshIfStale(run.runId);
+				const snapshot = snapshotCache?.get(run.runId) ?? snapshotCache?.refreshIfStale(run.runId);
 				return snapshot ? { run: snapshot.manifest, agents: snapshot.agents, snapshot } : { run, agents: agentsFor(run) };
 			} catch {
 				return { run, agents: agentsFor(run) };
@@ -118,9 +118,11 @@ function statusSummary(runs: WidgetRun[]): string {
 	const agents = runs.flatMap((item) => item.agents);
 	const runningAgents = agents.filter((agent) => agent.status === "running").length;
 	const queuedAgents = agents.filter((agent) => agent.status === "queued").length;
+	const waitingAgents = agents.filter((agent) => agent.status === "waiting").length;
 	const completedAgents = agents.filter((agent) => agent.status === "completed").length;
 	const parts = [`${runningAgents} running`];
 	if (queuedAgents) parts.push(`${queuedAgents} queued`);
+	if (waitingAgents) parts.push(`${waitingAgents} waiting`);
 	if (completedAgents) parts.push(`${completedAgents}/${agents.length} done`);
 	return `Crew: ${parts.join(", ")}`;
 }
@@ -136,9 +138,11 @@ export function widgetHeader(runs: WidgetRun[], runningGlyph: string, maxLines =
 	const agents = runs.flatMap((item) => item.agents);
 	const runningAgents = agents.filter((agent) => agent.status === "running").length;
 	const queuedAgents = agents.filter((agent) => agent.status === "queued").length;
+	const waitingAgents = agents.filter((agent) => agent.status === "waiting").length;
 	const completedAgents = agents.filter((agent) => agent.status === "completed").length;
 	const parts = [`${runningAgents} running`];
 	if (queuedAgents) parts.push(`${queuedAgents} queued`);
+	if (waitingAgents) parts.push(`${waitingAgents} waiting`);
 	if (completedAgents) parts.push(`${completedAgents}/${agents.length} done`);
 	return `${runningGlyph} Crew agents${notificationBadge(notificationCount)} · ${parts.join(" · ")} · /team-dashboard`;
 }
@@ -153,7 +157,7 @@ export function buildCrewWidgetLines(cwd: string, frame = 0, maxLines = 8, provi
 	const runningGlyph = SPINNER[frame % SPINNER.length] ?? SPINNER[0];
 	const lines: string[] = [widgetHeader(runs, runningGlyph, maxLines, notificationCount)];
 	for (const { run, agents } of runs) {
-		const activeAgents = agents.filter((item) => item.status === "running" || item.status === "queued");
+		const activeAgents = agents.filter((item) => item.status === "running" || item.status === "queued" || item.status === "waiting");
 		const completed = agents.filter((agent) => agent.status === "completed").length;
 		const runGlyph = iconForStatus(run.status, { runningGlyph });
 		lines.push(`├─ ${runGlyph} ${shortRunLabel(run)} · ${completed}/${agents.length} done · ${run.runId.slice(-8)}`);
@@ -279,11 +283,12 @@ export function updateCrewWidget(
 	config?: CrewUiConfig,
 	manifestCache?: ManifestCache,
 	snapshotCache?: RunSnapshotCache,
+	preloadedManifests?: TeamRunManifest[],
 ): void {
 	if (!ctx.hasUI) return;
 	state.frame += 1;
 	const maxLines = config?.widgetMaxLines ?? MAX_LINES_DEFAULT;
-	const runs = activeWidgetRuns(ctx.cwd, manifestCache, snapshotCache);
+	const runs = activeWidgetRuns(ctx.cwd, manifestCache, snapshotCache, preloadedManifests);
 	const lines = buildCrewWidgetLines(ctx.cwd, state.frame, maxLines, runs, state.notificationCount ?? 0);
 	const placement = config?.widgetPlacement ?? "aboveEditor";
 	ctx.ui.setStatus(STATUS_KEY, lines.length ? statusSummary(runs) : undefined);

package/src/ui/dashboard-panes/mailbox-pane.ts

@@ -3,8 +3,9 @@ import type { RunUiSnapshot } from "../snapshot-types.ts";
 export function renderMailboxPane(snapshot: RunUiSnapshot | undefined): string[] {
 	if (!snapshot) return ["Mailbox pane: snapshot unavailable"];
 	const mailbox = snapshot.mailbox;
+	const approx = mailbox.approximate ? " · approximate (tail)" : "";
 	return [
-		`Mailbox pane: inbox unread=${mailbox.inboxUnread} · outbox pending=${mailbox.outboxPending} · attention=${mailbox.needsAttention}`,
+		`Mailbox pane: inbox unread=${mailbox.inboxUnread} · outbox pending=${mailbox.outboxPending} · attention=${mailbox.needsAttention}${approx}`,
 		mailbox.needsAttention > 0 ? "Needs attention: press Enter for detail · A ack · N nudge · C compose · X ack all." : "No mailbox items need attention. Press Enter for detail or C compose.",
 	];
 }

package/src/ui/dashboard-panes/metrics-pane.ts

@@ -1,34 +1,34 @@
-import type { MetricRegistry } from "../../observability/metric-registry.ts";
-import type { HistogramPoint, MetricLabels, MetricPoint } from "../../observability/metrics-primitives.ts";
-import type { RunUiSnapshot } from "../snapshot-types.ts";
-
-export interface MetricsPaneOptions {
-	registry?: MetricRegistry;
-	maxCounters?: number;
-}
-
-function labelsText(labels: MetricLabels): string {
-	const entries = Object.entries(labels);
-	return entries.length ? `{${entries.map(([key, value]) => `${key}=${value}`).join(",")}}` : "";
-}
-
-function isHistogramPoint(point: MetricPoint | HistogramPoint): point is HistogramPoint {
-	return "quantiles" in point;
-}
-
-export function renderMetricsPane(_snapshot: RunUiSnapshot | undefined, opts: MetricsPaneOptions = {}): string[] {
-	if (!opts.registry) return ["Metrics pane: registry unavailable"];
-	const snapshots = opts.registry.snapshot();
-	if (!snapshots.length) return ["Metrics pane: no metrics recorded"];
-	const lines = ["Metrics pane: top metrics"];
-	for (const snapshot of snapshots.slice(0, opts.maxCounters ?? 10)) {
-		const first = snapshot.values[0];
-		if (!first) {
-			lines.push(`${snapshot.name}: empty`);
-			continue;
-		}
-		if (isHistogramPoint(first)) lines.push(`${snapshot.name}${labelsText(first.labels)} count=${first.count} p95=${Number.isFinite(first.quantiles.p95) ? Math.round(first.quantiles.p95) : "n/a"}`);
-		else lines.push(`${snapshot.name}${labelsText(first.labels)} ${first.value}`);
-	}
-	return lines;
-}
+import type { MetricRegistry } from "../../observability/metric-registry.ts";
+import type { HistogramPoint, MetricLabels, MetricPoint } from "../../observability/metrics-primitives.ts";
+import type { RunUiSnapshot } from "../snapshot-types.ts";
+
+export interface MetricsPaneOptions {
+	registry?: MetricRegistry;
+	maxCounters?: number;
+}
+
+function labelsText(labels: MetricLabels): string {
+	const entries = Object.entries(labels);
+	return entries.length ? `{${entries.map(([key, value]) => `${key}=${value}`).join(",")}}` : "";
+}
+
+function isHistogramPoint(point: MetricPoint | HistogramPoint): point is HistogramPoint {
+	return "quantiles" in point;
+}
+
+export function renderMetricsPane(_snapshot: RunUiSnapshot | undefined, opts: MetricsPaneOptions = {}): string[] {
+	if (!opts.registry) return ["Metrics pane: registry unavailable"];
+	const snapshots = opts.registry.snapshot();
+	if (!snapshots.length) return ["Metrics pane: no metrics recorded"];
+	const lines = ["Metrics pane: top metrics"];
+	for (const snapshot of snapshots.slice(0, opts.maxCounters ?? 10)) {
+		const first = snapshot.values[0];
+		if (!first) {
+			lines.push(`${snapshot.name}: empty`);
+			continue;
+		}
+		if (isHistogramPoint(first)) lines.push(`${snapshot.name}${labelsText(first.labels)} count=${first.count} p95=${Number.isFinite(first.quantiles.p95) ? Math.round(first.quantiles.p95) : "n/a"}`);
+		else lines.push(`${snapshot.name}${labelsText(first.labels)} ${first.value}`);
+	}
+	return lines;
+}

package/src/ui/dynamic-border.ts

@@ -1,25 +1,25 @@
-import type { CrewTheme } from "./theme-adapter.ts";
-
-export interface DynamicCrewBorderOptions {
-	color?: (value: string) => string;
-	char?: string;
-}
-
-export class DynamicCrewBorder {
-	private readonly theme: CrewTheme;
-	private readonly color?: (value: string) => string;
-	private readonly char: string;
-
-	constructor(theme: CrewTheme, options: DynamicCrewBorderOptions = {}) {
-		this.theme = theme;
-		this.color = options.color;
-		this.char = options.char && options.char.length > 0 ? options.char : "─";
-	}
-
-	render(width: number): string[] {
-		const line = this.char.repeat(Math.max(0, width));
-		return [this.color ? this.color(line) : this.theme.fg("border", line)];
-	}
-
-	invalidate(): void {}
-}
+import type { CrewTheme } from "./theme-adapter.ts";
+
+export interface DynamicCrewBorderOptions {
+	color?: (value: string) => string;
+	char?: string;
+}
+
+export class DynamicCrewBorder {
+	private readonly theme: CrewTheme;
+	private readonly color?: (value: string) => string;
+	private readonly char: string;
+
+	constructor(theme: CrewTheme, options: DynamicCrewBorderOptions = {}) {
+		this.theme = theme;
+		this.color = options.color;
+		this.char = options.char && options.char.length > 0 ? options.char : "─";
+	}
+
+	render(width: number): string[] {
+		const line = this.char.repeat(Math.max(0, width));
+		return [this.color ? this.color(line) : this.theme.fg("border", line)];
+	}
+
+	invalidate(): void {}
+}

package/src/ui/layout-primitives.ts

@@ -1,106 +1,106 @@
-import { pad, wrapHard } from "../utils/visual.ts";
-
-export interface RenderableComponent {
-	invalidate(): void;
-	render(width: number): string[];
-}
-
-export class Container implements RenderableComponent {
-	private children: RenderableComponent[] = [];
-
-	addChild(child: RenderableComponent): void {
-		this.children.push(child);
-	}
-
-	clear(): void {
-		this.children = [];
-	}
-
-	invalidate(): void {
-		for (const child of this.children) {
-			child.invalidate();
-		}
-	}
-
-	render(width: number): string[] {
-		const lines: string[] = [];
-		for (const child of this.children) {
-			lines.push(...child.render(width));
-		}
-		return lines;
-	}
-}
-
-export class Box extends Container {
-	private readonly paddingX: number;
-	private readonly paddingY: number;
-
-	constructor(paddingX = 0, paddingY = 0) {
-		super();
-		this.paddingX = paddingX;
-		this.paddingY = paddingY;
-	}
-
-	render(width: number): string[] {
-		const innerWidth = Math.max(1, width - this.paddingX * 2);
-		const rows = super.render(innerWidth);
-		const paddedRows: string[] = [];
-		const left = " ".repeat(this.paddingX);
-		const right = " ".repeat(this.paddingX);
-		for (const row of rows) {
-			paddedRows.push(pad(`${left}${row}${right}`, width));
-		}
-		const emptyRow = pad("", width);
-		if (this.paddingY <= 0) return paddedRows;
-		if (this.paddingY > 0) {
-			const topAndBottom = Array.from({ length: this.paddingY }, () => emptyRow);
-			return [...topAndBottom, ...paddedRows, ...topAndBottom];
-		}
-		return paddedRows;
-	}
-}
-
-export class Text implements RenderableComponent {
-	private text: string;
-	private cachedWidth = 0;
-	private cachedResult: string[] = [];
-
-	constructor(text = "") {
-		this.text = text;
-	}
-
-	setText(text: string): void {
-		if (text === this.text) return;
-		this.text = text;
-		this.invalidate();
-	}
-
-	invalidate(): void {
-		this.cachedWidth = 0;
-		this.cachedResult = [];
-	}
-
-	render(width: number): string[] {
-		if (this.cachedWidth === width) return this.cachedResult;
-		const wrapped = wrapHard(this.text, Math.max(1, width));
-		const lines = wrapped.length ? wrapped : [""];
-		this.cachedWidth = width;
-		this.cachedResult = lines.map((line) => pad(line, width));
-		return this.cachedResult;
-	}
-}
-
-export class Spacer implements RenderableComponent {
-	private readonly rows: number;
-
-	constructor(rows = 0) {
-		this.rows = rows;
-	}
-
-	render(width: number): string[] {
-		if (this.rows <= 0) return [];
-		return Array.from({ length: Math.max(0, this.rows) }, () => pad("", width));
-	}
-
-	invalidate(): void {}
-}
+import { pad, wrapHard } from "../utils/visual.ts";
+
+export interface RenderableComponent {
+	invalidate(): void;
+	render(width: number): string[];
+}
+
+export class Container implements RenderableComponent {
+	private children: RenderableComponent[] = [];
+
+	addChild(child: RenderableComponent): void {
+		this.children.push(child);
+	}
+
+	clear(): void {
+		this.children = [];
+	}
+
+	invalidate(): void {
+		for (const child of this.children) {
+			child.invalidate();
+		}
+	}
+
+	render(width: number): string[] {
+		const lines: string[] = [];
+		for (const child of this.children) {
+			lines.push(...child.render(width));
+		}
+		return lines;
+	}
+}
+
+export class Box extends Container {
+	private readonly paddingX: number;
+	private readonly paddingY: number;
+
+	constructor(paddingX = 0, paddingY = 0) {
+		super();
+		this.paddingX = paddingX;
+		this.paddingY = paddingY;
+	}
+
+	render(width: number): string[] {
+		const innerWidth = Math.max(1, width - this.paddingX * 2);
+		const rows = super.render(innerWidth);
+		const paddedRows: string[] = [];
+		const left = " ".repeat(this.paddingX);
+		const right = " ".repeat(this.paddingX);
+		for (const row of rows) {
+			paddedRows.push(pad(`${left}${row}${right}`, width));
+		}
+		const emptyRow = pad("", width);
+		if (this.paddingY <= 0) return paddedRows;
+		if (this.paddingY > 0) {
+			const topAndBottom = Array.from({ length: this.paddingY }, () => emptyRow);
+			return [...topAndBottom, ...paddedRows, ...topAndBottom];
+		}
+		return paddedRows;
+	}
+}
+
+export class Text implements RenderableComponent {
+	private text: string;
+	private cachedWidth = 0;
+	private cachedResult: string[] = [];
+
+	constructor(text = "") {
+		this.text = text;
+	}
+
+	setText(text: string): void {
+		if (text === this.text) return;
+		this.text = text;
+		this.invalidate();
+	}
+
+	invalidate(): void {
+		this.cachedWidth = 0;
+		this.cachedResult = [];
+	}
+
+	render(width: number): string[] {
+		if (this.cachedWidth === width) return this.cachedResult;
+		const wrapped = wrapHard(this.text, Math.max(1, width));
+		const lines = wrapped.length ? wrapped : [""];
+		this.cachedWidth = width;
+		this.cachedResult = lines.map((line) => pad(line, width));
+		return this.cachedResult;
+	}
+}
+
+export class Spacer implements RenderableComponent {
+	private readonly rows: number;
+
+	constructor(rows = 0) {
+		this.rows = rows;
+	}
+
+	render(width: number): string[] {
+		if (this.rows <= 0) return [];
+		return Array.from({ length: Math.max(0, this.rows) }, () => pad("", width));
+	}
+
+	invalidate(): void {}
+}