effective-progress 0.8.0 → 0.9.0

package/dist/index.mjs

@@ -1,7 +1,7 @@
-import { Brand, Cause, Clock, Context, Effect, Exit, FiberRef, Layer, Option, Schema } from "effect";
+import { Brand, Cause, Clock, Context, Data, Effect, Exit, FiberRef, Hash, Layer, Option, Schema } from "effect";
 import { dual } from "effect/Function";
 import { Box, Text, render } from "ink";
-import { useEffect, useState, useSyncExternalStore } from "react";
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
 import stringWidth from "fast-string-width";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
@@ -447,6 +447,33 @@ const makeProgressRenderStore = () => {
 	};
 };
 
+//#endregion
+//#region src/ink-renderer/columns/frame.ts
+const createRenderFrame = (rows, now, tick, stickyWidths) => {
+	const tasks = /* @__PURE__ */ new Map();
+	const trees = /* @__PURE__ */ new Map();
+	for (const row of rows) {
+		tasks.set(row.task.id, row.task);
+		trees.set(row.task.id, row.tree);
+	}
+	return {
+		taskIds: rows.map((row) => row.task.id),
+		now,
+		tick,
+		stickyWidths,
+		getTask: (taskId) => {
+			const task = tasks.get(taskId);
+			if (task === void 0) throw new Error(`Unknown task id: ${taskId}`);
+			return task;
+		},
+		getTree: (taskId) => {
+			const tree = trees.get(taskId);
+			if (tree === void 0) throw new Error(`Unknown task tree: ${taskId}`);
+			return tree;
+		}
+	};
+};
+
 //#endregion
 //#region src/ink-renderer/format.ts
 const SPINNER_FRAMES = [
@@ -529,6 +556,16 @@ const formatDeterminateAmountParts = (task) => {
 		total: totalText
 	};
 };
+const getDeterminateProcessedColor = (task) => {
+	if (!isDeterminate$1(task)) return "whiteBright";
+	const { succeeded, failed, processed, total } = task.units;
+	if (task.status === "failed" && processed < total) return "red";
+	if (processed >= total && failed === 0) return "green";
+	if (processed >= total && failed > 0 && succeeded === 0) return "red";
+	if (succeeded > 0 && failed > 0) return "yellow";
+	if (failed > 0 && succeeded === 0) return "red";
+	return "whiteBright";
+};
 const formatAmount = (task, _tick) => {
 	if (isDeterminate$1(task)) {
 		const parts = formatDeterminateAmountParts(task);
@@ -545,12 +582,49 @@ const formatAmount = (task, _tick) => {
 };
 
 //#endregion
-//#region src/ink-renderer/columns/determinate.ts
-const isDeterminate = (task) => task.units.total !== void 0;
-const hasDeterminateRows = (rows) => rows.some((row) => isDeterminate(row.task));
+//#region src/ink-renderer/columns/node.ts
+const createColumnDefinition = (config, create) => {
+	return {
+		id: Hash.hash(Data.struct(config)).toString(36),
+		build: (frame) => create(frame, config)
+	};
+};
 
 //#endregion
-//#region src/ink-renderer/columns/spec.ts
+//#region src/ink-renderer/columns/sticky-width.ts
+const applyStickyWidth = ({ key, measure, stickyWidths }) => {
+	const preferred = Math.max(measure.preferred, stickyWidths.get(key) ?? 0);
+	const max = measure.max === void 0 ? void 0 : Math.max(measure.max, preferred);
+	return {
+		...measure,
+		preferred,
+		max
+	};
+};
+const commitStickyWidth = ({ key, measure, stickyWidths }) => {
+	stickyWidths.set(key, measure.preferred);
+};
+const createStickyColumn = ({ frame, measure: baseMeasure, render, stickyKey }) => {
+	const measure = stickyKey === void 0 ? baseMeasure : applyStickyWidth({
+		key: stickyKey,
+		measure: baseMeasure,
+		stickyWidths: frame.stickyWidths
+	});
+	return {
+		measure,
+		commitStickyWidth: stickyKey === void 0 ? void 0 : () => {
+			commitStickyWidth({
+				key: stickyKey,
+				measure,
+				stickyWidths: frame.stickyWidths
+			});
+		},
+		render
+	};
+};
+
+//#endregion
+//#region src/ink-renderer/columns/text-width.ts
 const WIDTH_CACHE_LIMIT = 4096;
 const widthCache = /* @__PURE__ */ new Map();
 const textWidth = (text) => {
@@ -561,140 +635,187 @@ const textWidth = (text) => {
 	widthCache.set(text, width);
 	return width;
 };
-const resolveColumnSpec = (spec, resistance) => ({
-	id: spec.id,
-	grow: spec.grow,
-	canHide: spec.canHide,
-	variants: spec.variants.map((variant) => ({
-		id: variant.id,
-		minWidth: variant.minWidth,
-		idealWidth: variant.idealWidth,
-		maxWidth: variant.maxWidth,
-		shrinkResistance: resistance.shrink(spec.id, variant.id),
-		demoteResistance: resistance.demote(spec.id, variant.id),
-		hideResistance: resistance.hide(spec.id, variant.id),
-		renderCell: variant.renderCell
-	}))
-});
-const resolveColumnSpecs = (specs, resistance) => specs.flatMap((spec) => spec.variants.length > 0 ? [resolveColumnSpec(spec, resistance)] : []);
 
 //#endregion
-//#region src/ink-renderer/columns/amount-column.tsx
-const padLeft = (value, width) => value.padStart(Math.max(0, width), " ");
-const padRight = (value, width) => value.padEnd(Math.max(0, width), " ");
-const blank = (width) => " ".repeat(Math.max(0, width));
-const shouldShowCountAmount = (task) => task.units.total !== void 0 || task.units.processed > 0;
-const shouldShowDetailedCounts = (task) => shouldShowCountAmount(task) && task.countDisplay === "detailed";
-const SucceededCountColumn = ({ task, width }) => {
-	if (width <= 0) return null;
-	if (!shouldShowCountAmount(task)) return /* @__PURE__ */ jsx(Text, { children: blank(width) });
-	if (!shouldShowDetailedCounts(task)) return /* @__PURE__ */ jsx(Text, { children: blank(width) });
-	return /* @__PURE__ */ jsx(Text, {
-		color: "green",
-		children: padLeft(`${task.units.succeeded}`, width)
+//#region src/ink-renderer/columns/description-column.tsx
+const MIN_PLAIN_DESCRIPTION_WIDTH = 8;
+const MIN_COMPACT_DESCRIPTION_WIDTH = 3;
+const MIN_SPINNER_WIDTH = 1;
+const MIN_TREE_DESCRIPTION_TEXT_WIDTH = 6;
+const DESCRIPTION_TREE_STICKY_KEY = Symbol("description.tree");
+const DESCRIPTION_PLAIN_STICKY_KEY = Symbol("description.plain");
+const DESCRIPTION_COMPACT_STICKY_KEY = Symbol("description.compact");
+const treeAncestorPrefix = (tree) => tree.ancestorHasNextSibling.slice(1).map((hasNext) => hasNext ? "│  " : "   ").join("");
+const renderTreePrefix = (tree) => {
+	if (tree.depth <= 0) return "";
+	return `${treeAncestorPrefix(tree)}${tree.hasNextSibling ? "├─ " : "└─ "}`;
+};
+const maxDescriptionWidth = (frame, showTree) => frame.taskIds.reduce((max, taskId) => {
+	const treePrefix = showTree ? renderTreePrefix(frame.getTree(taskId)) : "";
+	return Math.max(max, textWidth(`${treePrefix}${frame.getTask(taskId).description}`) + 2);
+}, MIN_PLAIN_DESCRIPTION_WIDTH);
+const minTreeDescriptionWidth = (frame) => frame.taskIds.reduce((max, taskId) => {
+	const treePrefixWidth = textWidth(renderTreePrefix(frame.getTree(taskId)));
+	return Math.max(max, treePrefixWidth + 2 + MIN_TREE_DESCRIPTION_TEXT_WIDTH);
+}, MIN_PLAIN_DESCRIPTION_WIDTH);
+const DescriptionColumn = (frame, config = {}) => {
+	const variant = config.variant ?? "plain";
+	const showTree = variant === "tree";
+	const stickyKey = variant === "tree" ? DESCRIPTION_TREE_STICKY_KEY : variant === "plain" ? DESCRIPTION_PLAIN_STICKY_KEY : variant === "compact" ? DESCRIPTION_COMPACT_STICKY_KEY : void 0;
+	const min = variant === "spinner" ? MIN_SPINNER_WIDTH : variant === "compact" ? MIN_COMPACT_DESCRIPTION_WIDTH : variant === "tree" ? minTreeDescriptionWidth(frame) : MIN_PLAIN_DESCRIPTION_WIDTH;
+	const preferred = variant === "spinner" ? MIN_SPINNER_WIDTH : Math.max(min, maxDescriptionWidth(frame, showTree));
+	return createStickyColumn({
+		frame,
+		measure: {
+			min,
+			preferred,
+			max: preferred
+		},
+		stickyKey,
+		render: (taskId) => {
+			const task = frame.getTask(taskId);
+			const tree = frame.getTree(taskId);
+			const treePrefix = showTree ? renderTreePrefix(tree) : "";
+			const indicator = getTaskIndicator(task, frame.tick);
+			if (variant === "spinner") return /* @__PURE__ */ jsx(Text, {
+				color: indicator.color,
+				children: indicator.symbol
+			});
+			return /* @__PURE__ */ jsxs(Text, {
+				wrap: "truncate-end",
+				children: [
+					treePrefix,
+					/* @__PURE__ */ jsx(Text, {
+						color: indicator.color,
+						children: indicator.symbol
+					}),
+					` ${task.description}`
+				]
+			});
+		}
 	});
 };
-const FailedCountColumn = ({ task, width }) => {
-	if (width <= 0) return null;
-	if (!shouldShowCountAmount(task)) return /* @__PURE__ */ jsx(Text, { children: blank(width) });
-	if (!shouldShowDetailedCounts(task)) return /* @__PURE__ */ jsx(Text, { children: blank(width) });
-	return /* @__PURE__ */ jsx(Text, {
-		color: "red",
-		children: padLeft(`${task.units.failed}`, width)
+const createDescriptionRootColumn = (variant) => createColumnDefinition({
+	_tag: "description",
+	variant
+}, (frame, config) => DescriptionColumn(frame, config));
+const DescriptionTreeRootColumn = createDescriptionRootColumn("tree");
+const DescriptionPlainRootColumn = createDescriptionRootColumn("plain");
+const DescriptionCompactRootColumn = createDescriptionRootColumn("compact");
+const DescriptionSpinnerRootColumn = createDescriptionRootColumn("spinner");
+
+//#endregion
+//#region src/ink-renderer/columns/elapsed-column.tsx
+const MIN_ELAPSED_WIDTH = Array.from("10s").length;
+const ELAPSED_STICKY_KEY = Symbol("elapsed");
+const maxElapsedWidth = (frame) => frame.taskIds.reduce((max, taskId) => Math.max(max, textWidth(formatElapsed(frame.getTask(taskId), frame.now))), MIN_ELAPSED_WIDTH);
+const ElapsedColumn = (frame) => {
+	const elapsedContentWidth = maxElapsedWidth(frame);
+	return createStickyColumn({
+		frame,
+		stickyKey: ELAPSED_STICKY_KEY,
+		measure: {
+			min: MIN_ELAPSED_WIDTH,
+			preferred: elapsedContentWidth,
+			max: elapsedContentWidth
+		},
+		render: (taskId, width) => {
+			const formatted = formatElapsed(frame.getTask(taskId), frame.now);
+			return /* @__PURE__ */ jsx(Box, {
+				width,
+				justifyContent: "flex-end",
+				children: /* @__PURE__ */ jsx(Text, {
+					color: "gray",
+					children: textWidth(formatted) <= width ? formatted : formatted.slice(0, width)
+				})
+			});
+		}
 	});
 };
-const ProcessedCountColumn = ({ task, width }) => {
-	if (width <= 0) return null;
-	if (!shouldShowCountAmount(task)) return /* @__PURE__ */ jsx(Text, { children: blank(width) });
-	return /* @__PURE__ */ jsx(Text, { children: padLeft(`${task.units.processed}`, width) });
+const ElapsedRootColumn = createColumnDefinition({ _tag: "elapsed" }, (frame) => ElapsedColumn(frame));
+
+//#endregion
+//#region src/ink-renderer/columns/determinate.ts
+const isDeterminate = (task) => task.units.total !== void 0;
+
+//#endregion
+//#region src/ink-renderer/columns/eta-column.tsx
+const primaryUnit = (duration) => duration.split(" ")[0] ?? duration;
+const ETA_STICKY_KEY = Symbol("eta");
+const etaDurationText = (task, now) => {
+	if (task.status !== "running" || !isDeterminate(task)) return;
+	const eta = formatEta(task, now);
+	return eta.length > 0 ? eta : "--";
 };
-const AmountSeparatorColumn = ({ task, tick }) => {
-	if (shouldShowCountAmount(task)) return /* @__PURE__ */ jsx(Text, { children: "/" });
-	const symbol = formatAmount(task, tick);
-	if (task.status === "failed") return /* @__PURE__ */ jsx(Text, {
-		color: "red",
-		children: symbol
-	});
-	if (task.status === "running") return /* @__PURE__ */ jsx(Text, {
-		color: "yellow",
-		children: symbol
-	});
-	return /* @__PURE__ */ jsx(Text, { children: symbol });
+const renderEtaText = (task, now, width) => {
+	const duration = etaDurationText(task, now);
+	if (duration === void 0) return "";
+	const prefixed = `ETA: ${duration}`;
+	if (width >= textWidth(prefixed)) return prefixed;
+	if (width >= textWidth(duration)) return duration;
+	return primaryUnit(duration);
 };
-const TotalCountColumn = ({ task, width }) => {
-	if (width <= 0) return null;
-	if (!shouldShowCountAmount(task)) return /* @__PURE__ */ jsx(Text, { children: blank(width) });
-	return /* @__PURE__ */ jsx(Text, { children: padRight(isDeterminate(task) ? `${task.units.total}` : "?", width) });
+const RESERVED_ETA_WIDTH_UP_TO_ONE_HOUR = Array.from("ETA: 59m 59s").length;
+const computeEtaMetrics = (frame) => {
+	let hasEta = false;
+	let prefixedWidth = 0;
+	let durationWidth = 0;
+	let primaryUnitWidth = 0;
+	for (const taskId of frame.taskIds) {
+		const duration = etaDurationText(frame.getTask(taskId), frame.now);
+		if (duration === void 0) continue;
+		hasEta = true;
+		const prefixed = `ETA: ${duration}`;
+		prefixedWidth = Math.max(prefixedWidth, textWidth(prefixed));
+		durationWidth = Math.max(durationWidth, textWidth(duration));
+		primaryUnitWidth = Math.max(primaryUnitWidth, textWidth(primaryUnit(duration)));
+	}
+	return {
+		hasEta,
+		prefixedWidth,
+		durationWidth: Math.max(2, durationWidth),
+		primaryUnitWidth: Math.max(2, primaryUnitWidth)
+	};
 };
-const AmountColumn = ({ task, tick, layout }) => {
-	if (layout.kind === "text") {
-		const text = formatAmount(task, tick);
-		if (task.status === "failed") return /* @__PURE__ */ jsx(Text, {
-			wrap: "truncate-end",
-			color: "red",
-			children: text
-		});
-		if (task.status === "running") return /* @__PURE__ */ jsx(Text, {
-			wrap: "truncate-end",
-			color: "yellow",
-			children: text
-		});
-		return /* @__PURE__ */ jsx(Text, {
+const EtaColumn = (frame) => {
+	const metrics = computeEtaMetrics(frame);
+	if (!metrics.hasEta) return;
+	return createStickyColumn({
+		frame,
+		stickyKey: ETA_STICKY_KEY,
+		measure: {
+			min: metrics.primaryUnitWidth,
+			preferred: Math.max(metrics.prefixedWidth, RESERVED_ETA_WIDTH_UP_TO_ONE_HOUR),
+			max: Math.max(metrics.prefixedWidth, RESERVED_ETA_WIDTH_UP_TO_ONE_HOUR)
+		},
+		render: (taskId, width) => /* @__PURE__ */ jsx(Text, {
 			wrap: "truncate-end",
-			children: text
-		});
-	}
-	if (layout.kind === "processed") return /* @__PURE__ */ jsxs(Box, {
-		flexDirection: "row",
-		children: [
-			/* @__PURE__ */ jsx(ProcessedCountColumn, {
-				task,
-				width: layout.processedWidth
-			}),
-			/* @__PURE__ */ jsx(AmountSeparatorColumn, {
-				task,
-				tick
-			}),
-			/* @__PURE__ */ jsx(TotalCountColumn, {
-				task,
-				width: layout.totalWidth
-			})
-		]
-	});
-	return /* @__PURE__ */ jsxs(Box, {
-		flexDirection: "row",
-		children: [
-			layout.succeededWidth > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SucceededCountColumn, {
-				task,
-				width: layout.succeededWidth
-			}), /* @__PURE__ */ jsx(Text, { children: ` ` })] }) : null,
-			layout.failedWidth > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FailedCountColumn, {
-				task,
-				width: layout.failedWidth
-			}), /* @__PURE__ */ jsx(Text, { children: ` ` })] }) : null,
-			/* @__PURE__ */ jsx(ProcessedCountColumn, {
-				task,
-				width: layout.processedWidth
-			}),
-			/* @__PURE__ */ jsx(AmountSeparatorColumn, {
-				task,
-				tick
-			}),
-			/* @__PURE__ */ jsx(TotalCountColumn, {
-				task,
-				width: layout.totalWidth
-			})
-		]
+			color: "gray",
+			children: renderEtaText(frame.getTask(taskId), frame.now, width)
+		})
 	});
 };
-const computeAmountMetrics = (rows, tick) => {
+const EtaRootColumn = createColumnDefinition({ _tag: "eta" }, (frame) => EtaColumn(frame));
+
+//#endregion
+//#region src/ink-renderer/columns/progress/shared.ts
+const DEFAULT_BAR_WIDTH = 30;
+const PERCENT_FALLBACK_WIDTH = 10;
+const padLeft = (value, width) => value.padStart(Math.max(0, width), " ");
+const padRight = (value, width) => value.padEnd(Math.max(0, width), " ");
+const blank = (width) => " ".repeat(Math.max(0, width));
+const shouldShowCountAmount = (task) => task.units.total !== void 0 || task.units.processed > 0;
+const shouldShowDetailedCounts = (task) => shouldShowCountAmount(task) && task.countDisplay === "detailed";
+const computeProgressMetrics = (frame) => {
 	let hasStructuredCounts = false;
 	let hasDetailed = false;
+	let hasDeterminate = false;
 	let countDigits = 0;
 	let totalWidth = 0;
 	let simpleTextWidth = 0;
-	for (const row of rows) {
-		const { task } = row;
+	for (const taskId of frame.taskIds) {
+		const task = frame.getTask(taskId);
+		hasDeterminate ||= isDeterminate(task);
 		if (shouldShowCountAmount(task)) {
 			hasStructuredCounts = true;
 			countDigits = Math.max(countDigits, textWidth(`${task.units.succeeded}`), textWidth(`${task.units.failed}`), textWidth(`${task.units.processed}`));
@@ -702,85 +823,124 @@ const computeAmountMetrics = (rows, tick) => {
 			if (task.countDisplay === "detailed") hasDetailed = true;
 			continue;
 		}
-		simpleTextWidth = Math.max(simpleTextWidth, textWidth(formatAmount(task, tick)));
+		simpleTextWidth = Math.max(simpleTextWidth, textWidth(formatAmount(task, frame.tick)));
 	}
 	return {
 		hasStructuredCounts,
 		hasDetailed,
+		hasDeterminate,
 		countDigits: Math.max(1, countDigits),
 		totalWidth: Math.max(1, totalWidth),
 		simpleTextWidth
 	};
 };
-const detailedAmountLayout = (metrics) => ({
-	kind: "detailed",
-	succeededWidth: metrics.hasDetailed ? metrics.countDigits : 0,
-	failedWidth: metrics.hasDetailed ? metrics.countDigits : 0,
-	processedWidth: metrics.countDigits,
-	totalWidth: metrics.totalWidth
-});
-const processedAmountLayout = (metrics) => ({
-	kind: "processed",
-	processedWidth: metrics.countDigits,
-	totalWidth: metrics.totalWidth
-});
-const detailedAmountWidth = (metrics) => metrics.countDigits + 1 + metrics.totalWidth + (metrics.hasDetailed ? metrics.countDigits + 1 + metrics.countDigits + 1 : 0);
 const processedAmountWidth = (metrics) => metrics.countDigits + 1 + metrics.totalWidth;
-const createAmountColumnSpec = (context) => {
-	const metrics = computeAmountMetrics(context.rows, context.tick);
-	if (!metrics.hasStructuredCounts && metrics.simpleTextWidth <= 0) return;
-	const detailedLayout = detailedAmountLayout(metrics);
-	const processedLayout = processedAmountLayout(metrics);
+const detailedAmountWidth = (metrics) => metrics.countDigits + 1 + metrics.totalWidth + (metrics.hasDetailed ? metrics.countDigits + 1 + metrics.countDigits + 1 : 0);
+const percentText = (task) => {
+	if (!isDeterminate(task)) return formatAmount(task, 0);
+	if (task.units.total === 0) return "100%";
+	const displayTotal = Math.max(task.units.total, task.units.processed);
+	return `${Math.max(0, Math.min(100, Math.round(task.units.processed / displayTotal * 100)))}%`;
+};
+
+//#endregion
+//#region src/ink-renderer/columns/progress/amount-column.tsx
+const succeededCount = (task, width) => {
+	if (width <= 0 || !shouldShowCountAmount(task) || !shouldShowDetailedCounts(task)) return /* @__PURE__ */ jsx(Text, { children: blank(width) });
+	return /* @__PURE__ */ jsx(Text, {
+		color: "green",
+		children: padLeft(`${task.units.succeeded}`, width)
+	});
+};
+const failedCount = (task, width) => {
+	if (width <= 0 || !shouldShowCountAmount(task) || !shouldShowDetailedCounts(task)) return /* @__PURE__ */ jsx(Text, { children: blank(width) });
+	return /* @__PURE__ */ jsx(Text, {
+		color: "red",
+		children: padLeft(`${task.units.failed}`, width)
+	});
+};
+const processedCount = (task, width) => {
+	if (width <= 0 || !shouldShowCountAmount(task)) return /* @__PURE__ */ jsx(Text, { children: blank(width) });
+	return /* @__PURE__ */ jsx(Text, { children: padLeft(`${task.units.processed}`, width) });
+};
+const totalCount = (task, width) => {
+	if (width <= 0 || !shouldShowCountAmount(task)) return /* @__PURE__ */ jsx(Text, { children: blank(width) });
+	return /* @__PURE__ */ jsx(Text, { children: padRight(isDeterminate(task) ? `${task.units.total}` : "?", width) });
+};
+const structuredAmount = (task, tick, width, layout) => {
+	if (!shouldShowCountAmount(task)) return /* @__PURE__ */ jsx(Text, {
+		wrap: "truncate-end",
+		children: formatAmount(task, tick)
+	});
+	if (layout.kind === "processed") return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "row",
+		width,
+		children: [
+			processedCount(task, layout.processedWidth),
+			/* @__PURE__ */ jsx(Text, { children: "/" }),
+			totalCount(task, layout.totalWidth)
+		]
+	});
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "row",
+		width,
+		children: [
+			layout.succeededWidth > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [succeededCount(task, layout.succeededWidth), /* @__PURE__ */ jsx(Text, { children: ` ` })] }) : null,
+			layout.failedWidth > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [failedCount(task, layout.failedWidth), /* @__PURE__ */ jsx(Text, { children: ` ` })] }) : null,
+			processedCount(task, layout.processedWidth),
+			/* @__PURE__ */ jsx(Text, { children: "/" }),
+			totalCount(task, layout.totalWidth)
+		]
+	});
+};
+const AmountColumn = (frame, config) => {
+	const metrics = config.metrics ?? computeProgressMetrics(frame);
 	const detailedWidth = detailedAmountWidth(metrics);
 	const processedWidth = processedAmountWidth(metrics);
-	return {
-		id: "amount",
-		grow: 0,
-		canHide: true,
-		variants: metrics.hasStructuredCounts && metrics.hasDetailed ? [{
-			id: "detailed",
-			minWidth: detailedWidth,
-			idealWidth: detailedWidth,
-			renderCell: (row) => /* @__PURE__ */ jsx(AmountColumn, {
-				task: row.task,
-				tick: context.tick,
-				layout: detailedLayout
-			})
-		}, {
-			id: "processed",
-			minWidth: processedWidth,
-			idealWidth: processedWidth,
-			renderCell: (row) => /* @__PURE__ */ jsx(AmountColumn, {
-				task: row.task,
-				tick: context.tick,
-				layout: processedLayout
-			})
-		}] : metrics.hasStructuredCounts ? [{
-			id: "processed",
-			minWidth: processedWidth,
-			idealWidth: processedWidth,
-			renderCell: (row) => /* @__PURE__ */ jsx(AmountColumn, {
-				task: row.task,
-				tick: context.tick,
-				layout: processedLayout
-			})
-		}] : [{
-			id: "text",
-			minWidth: 0,
-			idealWidth: metrics.simpleTextWidth,
-			renderCell: (row) => /* @__PURE__ */ jsx(AmountColumn, {
-				task: row.task,
-				tick: context.tick,
-				layout: { kind: "text" }
-			})
-		}]
+	const preferredWidth = metrics.hasStructuredCounts ? metrics.hasDetailed ? detailedWidth : processedWidth : Math.max(1, metrics.simpleTextWidth);
+	const minWidth = metrics.hasStructuredCounts ? processedWidth : Math.max(1, metrics.simpleTextWidth);
+	const summary = {
+		hasDetailed: metrics.hasDetailed,
+		countDigits: metrics.countDigits,
+		totalWidth: metrics.totalWidth,
+		detailedWidth,
+		processedWidth,
+		preferredWidth,
+		minWidth,
+		simpleTextWidth: Math.max(1, metrics.simpleTextWidth)
 	};
+	return createStickyColumn({
+		frame,
+		measure: {
+			min: summary.minWidth,
+			preferred: summary.preferredWidth,
+			max: summary.preferredWidth
+		},
+		stickyKey: config.stickyWidth === true ? config.key : void 0,
+		render: (taskId, width) => {
+			const task = frame.getTask(taskId);
+			if (!shouldShowCountAmount(task)) return /* @__PURE__ */ jsx(Text, {
+				wrap: "truncate-end",
+				children: formatAmount(task, frame.tick)
+			});
+			if (summary.hasDetailed && width >= summary.detailedWidth) return structuredAmount(task, frame.tick, width, {
+				kind: "detailed",
+				succeededWidth: summary.countDigits,
+				failedWidth: summary.countDigits,
+				processedWidth: summary.countDigits,
+				totalWidth: summary.totalWidth
+			});
+			return structuredAmount(task, frame.tick, width, {
+				kind: "processed",
+				processedWidth: summary.countDigits,
+				totalWidth: summary.totalWidth
+			});
+		}
+	});
 };
 
 //#endregion
-//#region src/ink-renderer/columns/bar-column.tsx
-const DEFAULT_BAR_WIDTH = 30;
-const MIN_BAR_WIDTH = 8;
+//#region src/ink-renderer/columns/progress/bar-column.tsx
 const segmentLengths = (width, total, succeeded, failed) => {
 	if (total === 0) return {
 		succeeded: width,
@@ -798,576 +958,335 @@ const segmentLengths = (width, total, succeeded, failed) => {
 		remaining: Math.max(0, width - succeededLength - failedLength)
 	};
 };
-const BarColumn = ({ task, width }) => {
-	if (!isDeterminate(task)) return /* @__PURE__ */ jsx(Text, {});
-	const lengths = segmentLengths(Math.max(1, Math.floor(width)), task.units.total, task.units.succeeded, task.units.failed);
-	return /* @__PURE__ */ jsxs(Text, {
-		wrap: "truncate-end",
-		children: [
-			/* @__PURE__ */ jsx(Text, {
-				color: "green",
-				children: "━".repeat(lengths.succeeded)
-			}),
-			/* @__PURE__ */ jsx(Text, {
-				color: "red",
-				children: "━".repeat(lengths.failed)
-			}),
-			/* @__PURE__ */ jsx(Text, {
-				color: "gray",
-				children: "─".repeat(lengths.remaining)
-			})
-		]
+const BarColumn = (frame, config) => {
+	return createStickyColumn({
+		frame,
+		measure: {
+			min: 4,
+			preferred: DEFAULT_BAR_WIDTH,
+			max: config.fullWidth ? void 0 : DEFAULT_BAR_WIDTH
+		},
+		stickyKey: config.stickyWidth === true ? config.key : void 0,
+		render: (taskId, width) => {
+			const task = frame.getTask(taskId);
+			if (!isDeterminate(task)) return /* @__PURE__ */ jsx(Text, { children: blank(width) });
+			const lengths = segmentLengths(Math.max(1, Math.floor(width)), task.units.total, task.units.succeeded, task.units.failed);
+			return /* @__PURE__ */ jsxs(Text, {
+				wrap: "truncate-end",
+				children: [
+					/* @__PURE__ */ jsx(Text, {
+						color: "green",
+						children: "━".repeat(lengths.succeeded)
+					}),
+					/* @__PURE__ */ jsx(Text, {
+						color: "red",
+						children: "━".repeat(lengths.failed)
+					}),
+					/* @__PURE__ */ jsx(Text, {
+						color: "gray",
+						children: "─".repeat(lengths.remaining)
+					})
+				]
+			});
+		}
 	});
 };
-const createBarColumnSpec = (context, isTTY) => {
-	if (!hasDeterminateRows(context.rows)) return;
-	return {
-		id: "bar",
-		grow: 0,
-		canHide: true,
-		variants: [{
-			id: "full",
-			minWidth: MIN_BAR_WIDTH,
-			idealWidth: DEFAULT_BAR_WIDTH,
-			maxWidth: DEFAULT_BAR_WIDTH,
-			renderCell: (row, width) => /* @__PURE__ */ jsx(BarColumn, {
-				task: row.task,
-				tree: row.tree,
-				now: context.now,
-				tick: context.tick,
-				isTTY,
-				width: Math.max(1, Math.min(width, DEFAULT_BAR_WIDTH))
-			})
-		}, {
-			id: "compact",
-			minWidth: 1,
-			idealWidth: MIN_BAR_WIDTH,
-			maxWidth: MIN_BAR_WIDTH,
-			renderCell: (row, width) => /* @__PURE__ */ jsx(BarColumn, {
-				task: row.task,
-				tree: row.tree,
-				now: context.now,
-				tick: context.tick,
-				isTTY,
-				width: Math.max(1, width)
-			})
-		}]
-	};
-};
 
 //#endregion
-//#region src/ink-renderer/view/tree-prefix.ts
-const treeAncestorPrefix = (tree) => tree.ancestorHasNextSibling.slice(1).map((hasNext) => hasNext ? "│  " : "   ").join("");
-const renderTreePrefix = (tree) => {
-	if (tree.depth <= 0) return "";
-	return `${treeAncestorPrefix(tree)}${tree.hasNextSibling ? "├─ " : "└─ "}`;
-};
+//#region src/ink-renderer/columns/progress/percent-column.tsx
+const PercentColumn = (frame) => ({
+	measure: {
+		min: 4,
+		preferred: 4,
+		max: 4
+	},
+	render: (taskId, _width) => {
+		const task = frame.getTask(taskId);
+		const determinateColor = isDeterminate(task) ? getDeterminateProcessedColor(task) : void 0;
+		return /* @__PURE__ */ jsx(Text, {
+			wrap: "truncate-end",
+			color: determinateColor === "green" || determinateColor === "yellow" || determinateColor === "red" ? determinateColor : void 0,
+			children: percentText(task)
+		});
+	}
+});
 
 //#endregion
-//#region src/ink-renderer/columns/description-column.tsx
-const DescriptionColumn = ({ task, tree, showTree, tick }) => {
-	const treePrefix = showTree ? renderTreePrefix(tree) : "";
-	const indicator = getTaskIndicator(task, tick);
-	return /* @__PURE__ */ jsxs(Text, {
-		wrap: "truncate-end",
-		children: [
-			treePrefix,
-			/* @__PURE__ */ jsx(Text, {
-				color: indicator.color,
-				children: indicator.symbol
-			}),
-			` ${task.description}`
-		]
-	});
-};
-const MIN_DESCRIPTION_WIDTH = 8;
-const MIN_DESCRIPTION_WITH_TREE_WIDTH = 20;
-const DESCRIPTION_PADDING_GROWTH_LIMIT = 20;
-const maxDescriptionWidth = (rows, showTree) => rows.reduce((max, row) => {
-	const treePrefix = showTree ? renderTreePrefix(row.tree) : "";
-	return Math.max(max, textWidth(`${treePrefix}${row.task.description}`) + 2);
-}, MIN_DESCRIPTION_WIDTH);
-const createDescriptionColumnSpec = (context, isTTY) => {
-	const treeIdeal = maxDescriptionWidth(context.rows, true);
-	const plainIdeal = maxDescriptionWidth(context.rows, false);
-	const treeVariantIdeal = Math.max(MIN_DESCRIPTION_WITH_TREE_WIDTH, treeIdeal);
-	const plainVariantIdeal = Math.max(MIN_DESCRIPTION_WIDTH, plainIdeal);
-	return {
-		id: "description",
-		grow: 1,
-		canHide: false,
-		variants: [{
-			id: "tree",
-			minWidth: MIN_DESCRIPTION_WITH_TREE_WIDTH,
-			idealWidth: treeVariantIdeal,
-			maxWidth: Math.max(DESCRIPTION_PADDING_GROWTH_LIMIT, treeVariantIdeal),
-			renderCell: (row) => /* @__PURE__ */ jsx(DescriptionColumn, {
-				task: row.task,
-				tree: row.tree,
-				now: context.now,
-				tick: context.tick,
-				isTTY,
-				showTree: true
-			})
-		}, {
-			id: "plain",
-			minWidth: MIN_DESCRIPTION_WIDTH,
-			idealWidth: plainVariantIdeal,
-			maxWidth: Math.max(DESCRIPTION_PADDING_GROWTH_LIMIT, plainVariantIdeal),
-			renderCell: (row) => /* @__PURE__ */ jsx(DescriptionColumn, {
-				task: row.task,
-				tree: row.tree,
-				now: context.now,
-				tick: context.tick,
-				isTTY,
-				showTree: false
-			})
-		}]
+//#region src/ink-renderer/columns/progress-metrics-column.tsx
+const PROGRESS_BAR_STICKY_KEY = Symbol("progress.bar");
+const PROGRESS_AMOUNT_STICKY_KEY = Symbol("progress.amount");
+const createProgressColumnModel = (frame, mode) => {
+	const metrics = computeProgressMetrics(frame);
+	const percent = PercentColumn(frame);
+	if (mode === "percent" && metrics.hasDeterminate) return {
+		metrics,
+		percent
 	};
-};
-
-//#endregion
-//#region src/ink-renderer/columns/elapsed-column.tsx
-const ElapsedColumn = ({ task, now }) => /* @__PURE__ */ jsx(Text, {
-	wrap: "truncate-end",
-	color: "gray",
-	children: formatElapsed(task, now)
-});
-const MIN_ELAPSED_WIDTH = 2;
-const RESERVED_ELAPSED_WIDTH_UP_TO_ONE_HOUR = Array.from("59m 59s").length;
-const maxElapsedWidth = (rows, now) => rows.reduce((max, row) => Math.max(max, textWidth(formatElapsed(row.task, now))), MIN_ELAPSED_WIDTH);
-const createElapsedColumnSpec = (context, isTTY) => {
-	const elapsedContentWidth = maxElapsedWidth(context.rows, context.now);
 	return {
-		id: "elapsed",
-		grow: 0,
-		canHide: false,
-		variants: [{
-			id: "stable",
-			minWidth: elapsedContentWidth,
-			idealWidth: hasDeterminateRows(context.rows) ? Math.max(elapsedContentWidth, RESERVED_ELAPSED_WIDTH_UP_TO_ONE_HOUR) : elapsedContentWidth,
-			renderCell: (row) => /* @__PURE__ */ jsx(ElapsedColumn, {
-				task: row.task,
-				tree: row.tree,
-				now: context.now,
-				tick: context.tick,
-				isTTY
-			})
-		}, {
-			id: "compact",
-			minWidth: MIN_ELAPSED_WIDTH,
-			idealWidth: elapsedContentWidth,
-			renderCell: (row) => /* @__PURE__ */ jsx(ElapsedColumn, {
-				task: row.task,
-				tree: row.tree,
-				now: context.now,
-				tick: context.tick,
-				isTTY
-			})
-		}]
+		metrics,
+		percent,
+		amount: AmountColumn(frame, {
+			key: PROGRESS_AMOUNT_STICKY_KEY,
+			metrics,
+			stickyWidth: true
+		}),
+		bar: metrics.hasDeterminate ? BarColumn(frame, {
+			key: PROGRESS_BAR_STICKY_KEY,
+			fullWidth: false,
+			stickyWidth: true
+		}) : void 0
 	};
 };
-
-//#endregion
-//#region src/ink-renderer/columns/eta-column.tsx
-const primaryUnit = (duration) => duration.split(" ")[0] ?? duration;
-const etaDurationText = (task, now) => {
-	if (task.status !== "running" || !isDeterminate(task)) return;
-	const eta = formatEta(task, now);
-	return eta.length > 0 ? eta : "--";
-};
-const EtaColumn = ({ task, now, mode }) => {
-	const duration = etaDurationText(task, now);
-	if (duration === void 0) return /* @__PURE__ */ jsx(Text, {});
-	return /* @__PURE__ */ jsx(Text, {
-		wrap: "truncate-end",
-		color: "gray",
-		children: mode === "prefixed" ? `ETA: ${duration}` : mode === "primary" ? primaryUnit(duration) : duration
-	});
-};
-const RESERVED_ETA_WIDTH_UP_TO_ONE_HOUR = Array.from("ETA: 59m 59s").length;
-const computeEtaMetrics = (rows, now) => {
-	let hasEta = false;
-	let prefixedWidth = 0;
-	let durationWidth = 0;
-	let primaryUnitWidth = 0;
-	for (const row of rows) {
-		const duration = etaDurationText(row.task, now);
-		if (duration === void 0) continue;
-		hasEta = true;
-		const prefixed = `ETA: ${duration}`;
-		prefixedWidth = Math.max(prefixedWidth, textWidth(prefixed));
-		durationWidth = Math.max(durationWidth, textWidth(duration));
-		primaryUnitWidth = Math.max(primaryUnitWidth, textWidth(primaryUnit(duration)));
-	}
+const layoutForWidth = (width, model) => {
+	if (!model.metrics.hasDeterminate || model.amount === void 0) return { kind: "amount-only" };
+	const bar = model.bar;
+	if (bar === void 0) return { kind: "percent" };
+	if (width < bar.measure.min + 1 + model.amount.measure.min || width < PERCENT_FALLBACK_WIDTH) return { kind: "percent" };
+	const available = Math.max(0, width - 1);
+	const amountWidth = Math.min(model.amount.measure.preferred, Math.max(model.amount.measure.min, available - bar.measure.min));
 	return {
-		hasEta,
-		prefixedWidth,
-		durationWidth: Math.max(2, durationWidth),
-		primaryUnitWidth: Math.max(2, primaryUnitWidth)
+		kind: "bar-amount",
+		bar,
+		barWidth: Math.max(bar.measure.min, available - amountWidth),
+		amountWidth
 	};
 };
-const createEtaColumnSpec = (context, isTTY) => {
-	const metrics = computeEtaMetrics(context.rows, context.now);
-	if (!metrics.hasEta) return;
+const ProgressMetricsColumn = (frame, config = {}) => {
+	const mode = config.mode ?? "full";
+	const model = createProgressColumnModel(frame, mode);
+	if (!model.metrics.hasStructuredCounts && !model.metrics.hasDeterminate) return;
+	if (mode === "percent" && model.metrics.hasDeterminate) return model.percent;
+	const amount = model.amount;
+	if (amount === void 0) return;
+	const preferred = model.metrics.hasDeterminate && model.bar !== void 0 ? model.bar.measure.preferred + 1 + amount.measure.preferred : amount.measure.preferred;
+	const fullMin = model.metrics.hasDeterminate && model.bar !== void 0 ? model.bar.measure.min + 1 + amount.measure.min : amount.measure.min;
+	const max = !model.metrics.hasDeterminate || model.bar === void 0 || model.bar.measure.max === void 0 ? amount.measure.max : model.bar.measure.max + 1 + amount.measure.preferred;
 	return {
-		id: "eta",
-		grow: 0,
-		canHide: true,
-		variants: [
-			{
-				id: "prefixed",
-				minWidth: metrics.prefixedWidth,
-				idealWidth: Math.max(metrics.prefixedWidth, RESERVED_ETA_WIDTH_UP_TO_ONE_HOUR),
-				renderCell: (row) => /* @__PURE__ */ jsx(EtaColumn, {
-					task: row.task,
-					tree: row.tree,
-					now: context.now,
-					tick: context.tick,
-					isTTY,
-					mode: "prefixed"
-				})
-			},
-			{
-				id: "duration",
-				minWidth: metrics.durationWidth,
-				idealWidth: metrics.durationWidth,
-				renderCell: (row) => /* @__PURE__ */ jsx(EtaColumn, {
-					task: row.task,
-					tree: row.tree,
-					now: context.now,
-					tick: context.tick,
-					isTTY,
-					mode: "duration"
-				})
-			},
-			{
-				id: "primary",
-				minWidth: metrics.primaryUnitWidth,
-				idealWidth: metrics.primaryUnitWidth,
-				renderCell: (row) => /* @__PURE__ */ jsx(EtaColumn, {
-					task: row.task,
-					tree: row.tree,
-					now: context.now,
-					tick: context.tick,
-					isTTY,
-					mode: "primary"
-				})
-			}
-		]
+		measure: {
+			min: !model.metrics.hasDeterminate ? amount.measure.min : fullMin,
+			preferred,
+			max
+		},
+		commitStickyWidth: () => {
+			model.bar?.commitStickyWidth?.();
+			amount.commitStickyWidth?.();
+		},
+		render: (taskId, width) => {
+			const layout = layoutForWidth(width, model);
+			if (layout.kind === "percent") return model.percent.render(taskId, width);
+			if (layout.kind === "amount-only") return amount.render(taskId, width);
+			return /* @__PURE__ */ jsxs(Box, {
+				flexDirection: "row",
+				width,
+				children: [
+					/* @__PURE__ */ jsx(Box, {
+						width: layout.barWidth,
+						children: layout.bar.render(taskId, layout.barWidth)
+					}),
+					/* @__PURE__ */ jsx(Box, { marginRight: 1 }),
+					/* @__PURE__ */ jsx(Box, {
+						width: layout.amountWidth,
+						children: amount.render(taskId, layout.amountWidth)
+					})
+				]
+			});
+		}
 	};
 };
+const createProgressRootColumn = (mode) => createColumnDefinition({
+	_tag: "progress",
+	mode
+}, (frame, config) => ProgressMetricsColumn(frame, config));
+const ProgressRootColumn = createProgressRootColumn("full");
+const ProgressPercentRootColumn = createProgressRootColumn("percent");
 
 //#endregion
-//#region src/ink-renderer/columns/planner.ts
-const clampInt = (value, min, max) => Math.max(min, Math.min(max, Math.floor(value)));
-const activeColumns = (columns) => columns.filter((column) => !column.hidden);
-const visibleColumns = (columns) => columns.filter((column) => !column.hidden && column.width > 0);
-const visibleGapWidth = (columns) => Math.max(0, visibleColumns(columns).length - 1);
-const totalWidth = (columns) => visibleColumns(columns).reduce((sum, column) => sum + column.width, 0) + visibleGapWidth(columns);
-const currentVariant = (column) => column.variants[column.variantIndex];
-const variantMaxWidth = (column) => {
-	const variant = currentVariant(column);
-	return variant.maxWidth === void 0 ? Number.POSITIVE_INFINITY : Math.max(variant.minWidth, variant.maxWidth);
+//#region src/ink-renderer/columns/root-column.tsx
+const ROOT_GAP = 1;
+const visibleWidth = (widths, gap) => {
+	const visible = widths.filter((width) => width > 0);
+	return visible.reduce((sum, width) => sum + width, 0) + Math.max(0, visible.length - 1) * gap;
 };
-const reduceOverflowByShrink = (columns, overflow) => {
-	let remaining = overflow;
-	const candidates = activeColumns(columns).filter((column) => column.width > currentVariant(column).minWidth).sort((a, b) => currentVariant(a).shrinkResistance - currentVariant(b).shrinkResistance);
-	for (const column of candidates) {
-		if (remaining <= 0) break;
-		const variant = currentVariant(column);
-		const reducible = column.width - variant.minWidth;
-		if (reducible <= 0) continue;
-		const delta = Math.min(reducible, remaining);
-		column.width -= delta;
-		remaining -= delta;
-	}
-	return remaining;
+const ROOT_LAYOUTS = [
+	[
+		DescriptionTreeRootColumn,
+		ProgressRootColumn,
+		ElapsedRootColumn,
+		EtaRootColumn
+	],
+	[
+		DescriptionPlainRootColumn,
+		ProgressRootColumn,
+		ElapsedRootColumn,
+		EtaRootColumn
+	],
+	[
+		DescriptionPlainRootColumn,
+		ProgressPercentRootColumn,
+		ElapsedRootColumn,
+		EtaRootColumn
+	],
+	[
+		DescriptionPlainRootColumn,
+		ProgressPercentRootColumn,
+		ElapsedRootColumn
+	],
+	[DescriptionPlainRootColumn, ProgressPercentRootColumn],
+	[DescriptionCompactRootColumn, ProgressPercentRootColumn],
+	[DescriptionCompactRootColumn],
+	[DescriptionSpinnerRootColumn]
+];
+const ROOT_COLUMNS = [...new Map(ROOT_LAYOUTS.flat().map((column) => [column.id, column])).values()];
+const measureColumns = (frame) => new Map(ROOT_COLUMNS.flatMap((definition) => {
+	const column = definition.build(frame);
+	if (column === void 0) return [];
+	const measure = column.measure;
+	return [[definition.id, {
+		definition,
+		id: definition.id,
+		measure,
+		preferredWidth: measure.preferred,
+		commitStickyWidth: column.commitStickyWidth,
+		render: column.render
+	}]];
+}));
+const candidateRootLayouts = (columnsById) => {
+	const hasProgress = columnsById.has(ProgressRootColumn.id);
+	const hasPercentProgress = columnsById.has(ProgressPercentRootColumn.id);
+	const hasEta = columnsById.has(EtaRootColumn.id);
+	return [
+		...hasProgress && hasEta ? [[
+			DescriptionTreeRootColumn,
+			ProgressRootColumn,
+			ElapsedRootColumn,
+			EtaRootColumn
+		], [
+			DescriptionPlainRootColumn,
+			ProgressRootColumn,
+			ElapsedRootColumn,
+			EtaRootColumn
+		]] : [],
+		...hasProgress && !hasEta ? [[
+			DescriptionTreeRootColumn,
+			ProgressRootColumn,
+			ElapsedRootColumn
+		], [
+			DescriptionPlainRootColumn,
+			ProgressRootColumn,
+			ElapsedRootColumn
+		]] : [],
+		...hasPercentProgress && hasEta ? [[
+			DescriptionPlainRootColumn,
+			ProgressPercentRootColumn,
+			ElapsedRootColumn,
+			EtaRootColumn
+		]] : [],
+		...hasPercentProgress ? [
+			[
+				DescriptionPlainRootColumn,
+				ProgressPercentRootColumn,
+				ElapsedRootColumn
+			],
+			[DescriptionPlainRootColumn, ProgressPercentRootColumn],
+			[DescriptionCompactRootColumn, ProgressPercentRootColumn]
+		] : [],
+		...!hasProgress && !hasPercentProgress ? [
+			[DescriptionTreeRootColumn, ElapsedRootColumn],
+			[DescriptionPlainRootColumn, ElapsedRootColumn],
+			[DescriptionPlainRootColumn]
+		] : [],
+		[DescriptionCompactRootColumn],
+		[DescriptionSpinnerRootColumn]
+	];
 };
-const nextDemoteCandidate = (columns) => activeColumns(columns).filter((column) => column.variantIndex + 1 < column.variants.length).sort((a, b) => currentVariant(a).demoteResistance - currentVariant(b).demoteResistance)[0];
-const applyDemote = (column) => {
-	const nextVariant = column.variants[column.variantIndex + 1];
-	column.variantIndex += 1;
-	const nextMaxWidth = nextVariant.maxWidth === void 0 ? Number.POSITIVE_INFINITY : Math.max(nextVariant.minWidth, nextVariant.maxWidth);
-	column.width = Math.max(nextVariant.minWidth, Math.min(column.width, nextVariant.idealWidth, nextMaxWidth));
+const resolveRootLayouts = (columnsById) => {
+	const resolveLayout = (definitions) => {
+		const columns = [];
+		for (const definition of definitions) {
+			const column = columnsById.get(definition.id);
+			if (column === void 0) return;
+			columns.push(column);
+		}
+		return columns;
+	};
+	return candidateRootLayouts(columnsById).map(resolveLayout).filter((columns) => columns !== void 0);
 };
-const nextHideCandidate = (columns) => activeColumns(columns).filter((column) => column.spec.canHide).sort((a, b) => currentVariant(a).hideResistance - currentVariant(b).hideResistance)[0];
-const applyHide = (column) => {
-	column.hidden = true;
-	column.width = 0;
+const minimumWidthForSet = (columns) => visibleWidth(columns.map((column) => column.measure.min), ROOT_GAP);
+const selectColumnSet = (columnSets, terminalColumns) => {
+	if (columnSets.length === 0) return [];
+	if (terminalColumns === void 0) return columnSets[0] ?? [];
+	return columnSets.find((columns) => minimumWidthForSet(columns) <= terminalColumns) ?? columnSets.at(-1) ?? [];
 };
-const distributeGrowth = (columns, extra) => {
-	if (extra <= 0) return;
-	let remaining = extra;
-	while (remaining > 0) {
-		const candidates = activeColumns(columns).filter((column) => column.spec.grow > 0 && column.width < variantMaxWidth(column));
-		if (candidates.length === 0) break;
-		const growSum = candidates.reduce((sum, column) => sum + Math.max(0, column.spec.grow), 0);
-		if (growSum <= 0) break;
-		let distributed = 0;
-		for (const column of candidates) {
-			const weight = Math.max(0, column.spec.grow);
-			if (weight <= 0) continue;
-			const headroom = Math.max(0, variantMaxWidth(column) - column.width);
-			if (headroom <= 0) continue;
-			const share = Math.min(headroom, Math.floor(remaining * weight / growSum));
-			if (share <= 0) continue;
-			column.width += share;
-			distributed += share;
-		}
-		if (distributed === 0) {
-			for (const column of candidates) {
-				if (remaining <= 0) break;
-				if (Math.max(0, variantMaxWidth(column) - column.width) <= 0) continue;
-				column.width += 1;
-				distributed += 1;
-				remaining -= 1;
-			}
-			if (distributed === 0) break;
+const preferredWidthsForSet = (columns) => columns.map((column) => Math.max(column.measure.min, column.preferredWidth));
+const nextDistinctWidth = (entries, widest) => entries.find((entry) => entry.width < widest)?.width;
+const reduceOverflowRichStyle = (widths, minimums, targetWidth) => {
+	let overflow = visibleWidth(widths, ROOT_GAP) - targetWidth;
+	while (overflow > 0) {
+		const shrinkable = widths.map((width, index) => ({
+			width,
+			index,
+			minimum: minimums[index] ?? width
+		})).filter(({ width, minimum }) => width > minimum).sort((left, right) => right.width - left.width || left.index - right.index);
+		if (shrinkable.length === 0) break;
+		const widest = shrinkable[0].width;
+		const cohort = shrinkable.filter(({ width }) => width === widest);
+		const nextWidth = nextDistinctWidth(shrinkable, widest);
+		const maxUniformDrop = widest - Math.max(nextWidth ?? 0, ...cohort.map(({ minimum }) => minimum));
+		const uniformDrop = Math.min(maxUniformDrop, Math.floor(overflow / cohort.length));
+		if (uniformDrop > 0) {
+			for (const { index } of cohort) widths[index] = widths[index] - uniformDrop;
+			overflow -= uniformDrop * cohort.length;
 			continue;
 		}
-		remaining -= distributed;
-	}
-};
-const planColumns = ({ context, baselineWidth, columns }) => {
-	const mutable = columns.flatMap((column) => {
-		if (column.variants.length === 0) return [];
-		const first = column.variants[0];
-		return [{
-			spec: column,
-			variants: column.variants,
-			variantIndex: 0,
-			width: Math.max(first.minWidth, Math.min(first.idealWidth, first.maxWidth === void 0 ? Number.POSITIVE_INFINITY : Math.max(first.minWidth, first.maxWidth))),
-			hidden: false
-		}];
-	});
-	if (mutable.length === 0) return {
-		rowWidth: 0,
-		columns: []
-	};
-	const naturalWidth = totalWidth(mutable);
-	const clampedTerminal = context.terminalColumns === void 0 ? void 0 : clampInt(context.terminalColumns, 1, Number.POSITIVE_INFINITY);
-	const baselineTarget = Math.max(1, Math.max(baselineWidth, naturalWidth));
-	const target = clampedTerminal === void 0 ? baselineTarget : Math.min(baselineTarget, clampedTerminal);
-	if (naturalWidth < target) distributeGrowth(mutable, target - naturalWidth);
-	else if (naturalWidth > target) {
-		let overflow = naturalWidth - target;
-		let progressed = true;
-		while (overflow > 0 && progressed) {
-			const before = overflow;
-			overflow = reduceOverflowByShrink(mutable, overflow);
+		let changed = false;
+		for (const { index, minimum } of cohort) {
 			if (overflow <= 0) break;
-			const demoteCandidate = nextDemoteCandidate(mutable);
-			const hideCandidate = nextHideCandidate(mutable);
-			if (demoteCandidate === void 0 && hideCandidate === void 0) {
-				progressed = before !== overflow;
-				continue;
-			}
-			if ((demoteCandidate === void 0 ? Number.POSITIVE_INFINITY : currentVariant(demoteCandidate).demoteResistance) <= (hideCandidate === void 0 ? Number.POSITIVE_INFINITY : currentVariant(hideCandidate).hideResistance) && demoteCandidate !== void 0) applyDemote(demoteCandidate);
-			else if (hideCandidate !== void 0) applyHide(hideCandidate);
-			overflow = Math.max(0, totalWidth(mutable) - target);
-			progressed = true;
+			if (widths[index] <= minimum) continue;
+			widths[index] = widths[index] - 1;
+			overflow -= 1;
+			changed = true;
 		}
-		const compactedWidth = totalWidth(mutable);
-		if (compactedWidth < target) distributeGrowth(mutable, target - compactedWidth);
+		if (!changed) break;
 	}
-	const visible = visibleColumns(mutable);
-	return {
-		rowWidth: totalWidth(mutable),
-		columns: visible.map((column) => {
-			const variant = currentVariant(column);
-			return {
-				id: column.spec.id,
-				variantId: variant.id,
-				width: column.width,
-				renderCell: variant.renderCell
-			};
-		})
-	};
+	return widths;
 };
-
-//#endregion
-//#region src/ink-renderer/columns/layout.tsx
-/**
-* Frame planning algorithm (per render tick):
-*
-* 1. Ask each column module to produce a logical column spec (variants + measured widths).
-* 2. Apply shared resistance rules (shrink / demote / hide) to those variants.
-* 3. Feed resolved columns into `planColumns`.
-* 4. `planColumns` shrinks, demotes, and hides until the row fits target width.
-* 5. Render rows with the selected variant and width for each visible column.
-*/
-const BASELINE_ROW_WIDTH = 150;
-const DEFAULT_RESISTANCE = 1e3;
-const variantOrderKey = ({ columnId, variantId }) => `${columnId}:${variantId}`;
-const SHRINK_ORDER = [
-	{
-		columnId: "eta",
-		variantId: "prefixed"
-	},
-	{
-		columnId: "elapsed",
-		variantId: "stable"
-	},
-	{
-		columnId: "eta",
-		variantId: "duration"
-	},
-	{
-		columnId: "eta",
-		variantId: "primary"
-	},
-	{
-		columnId: "bar",
-		variantId: "compact"
-	},
-	{
-		columnId: "bar",
-		variantId: "full"
-	},
-	{
-		columnId: "amount",
-		variantId: "text"
-	},
-	{
-		columnId: "elapsed",
-		variantId: "compact"
-	},
-	{
-		columnId: "description",
-		variantId: "tree"
-	},
-	{
-		columnId: "amount",
-		variantId: "detailed"
-	},
-	{
-		columnId: "amount",
-		variantId: "processed"
-	},
-	{
-		columnId: "description",
-		variantId: "plain"
-	}
-];
-const DEMOTE_ORDER = [
-	{
-		columnId: "description",
-		variantId: "tree"
-	},
-	{
-		columnId: "eta",
-		variantId: "prefixed"
-	},
-	{
-		columnId: "eta",
-		variantId: "duration"
-	},
-	{
-		columnId: "elapsed",
-		variantId: "stable"
-	},
-	{
-		columnId: "bar",
-		variantId: "full"
-	},
-	{
-		columnId: "amount",
-		variantId: "detailed"
-	}
-];
-const HIDE_ORDER = [
-	{
-		columnId: "eta",
-		variantId: "primary"
-	},
-	{
-		columnId: "eta",
-		variantId: "prefixed"
-	},
-	{
-		columnId: "eta",
-		variantId: "duration"
-	},
-	{
-		columnId: "bar",
-		variantId: "full"
-	},
-	{
-		columnId: "bar",
-		variantId: "compact"
-	},
-	{
-		columnId: "amount",
-		variantId: "text"
-	},
-	{
-		columnId: "amount",
-		variantId: "detailed"
-	},
-	{
-		columnId: "amount",
-		variantId: "processed"
-	}
-];
-const toResistanceLookup = (order) => new Map(order.map((item, index) => [variantOrderKey(item), index + 1]));
-const shrinkResistanceLookup = toResistanceLookup(SHRINK_ORDER);
-const demoteResistanceLookup = toResistanceLookup(DEMOTE_ORDER);
-const hideResistanceLookup = toResistanceLookup(HIDE_ORDER);
-const resistanceFor = (lookup, columnId, variantId) => lookup.get(`${columnId}:${variantId}`) ?? DEFAULT_RESISTANCE;
-const buildColumns = (context, isTTY) => {
-	return resolveColumnSpecs([
-		createDescriptionColumnSpec(context, isTTY),
-		createBarColumnSpec(context, isTTY),
-		createAmountColumnSpec(context),
-		createElapsedColumnSpec(context, isTTY),
-		createEtaColumnSpec(context, isTTY)
-	].filter((spec) => spec !== void 0), {
-		shrink: (columnId, variantId) => resistanceFor(shrinkResistanceLookup, columnId, variantId),
-		demote: (columnId, variantId) => resistanceFor(demoteResistanceLookup, columnId, variantId),
-		hide: (columnId, variantId) => resistanceFor(hideResistanceLookup, columnId, variantId)
-	});
+const widthForSelectedSet = (columns, targetWidth) => {
+	if (columns.length === 0) return [];
+	if (targetWidth === void 0) return preferredWidthsForSet(columns);
+	const minimums = columns.map((column) => column.measure.min);
+	const widths = preferredWidthsForSet(columns);
+	if (visibleWidth(widths, ROOT_GAP) <= targetWidth) return widths;
+	return reduceOverflowRichStyle(widths, minimums, targetWidth);
 };
-const computeFrameLayout = (rows, now, tick, terminalColumns, isTTY) => {
-	const context = {
-		rows,
-		now,
-		tick,
-		terminalColumns
-	};
-	return planColumns({
-		context,
-		columns: buildColumns(context, isTTY),
-		baselineWidth: hasDeterminateRows(rows) ? BASELINE_ROW_WIDTH : 1
-	});
+const emptyRootColumn = (stickyWidths) => {
+	stickyWidths.clear();
+	return { render: () => null };
 };
-
-//#endregion
-//#region src/ink-renderer/view/task-row.tsx
-const TaskRow = ({ row, layout }) => {
-	return /* @__PURE__ */ jsx(Box, {
+const RootColumn = (rows, now, tick, terminalColumns, stickyWidths = /* @__PURE__ */ new Map()) => {
+	if (rows.length === 0) return emptyRootColumn(stickyWidths);
+	const selectedColumns = selectColumnSet(resolveRootLayouts(measureColumns(createRenderFrame(rows, now, tick, stickyWidths))), terminalColumns);
+	for (const column of selectedColumns) column.commitStickyWidth?.();
+	const columns = widthForSelectedSet(selectedColumns, terminalColumns === void 0 ? visibleWidth(selectedColumns.map((column) => column.preferredWidth), ROOT_GAP) : terminalColumns).map((width, index) => ({
+		id: selectedColumns[index].id,
+		width,
+		render: selectedColumns[index].render
+	})).filter((column) => column.width > 0);
+	const taskIds = rows.map((row) => row.task.id);
+	const rowWidth = visibleWidth(columns.map((column) => column.width), ROOT_GAP);
+	return { render: () => /* @__PURE__ */ jsx(Box, {
 		flexDirection: "row",
-		minWidth: layout.rowWidth,
-		children: layout.columns.map((column, index) => /* @__PURE__ */ jsx(Box, {
+		minWidth: rowWidth,
+		children: columns.map((column, index) => /* @__PURE__ */ jsx(Box, {
+			flexDirection: "column",
 			width: column.width,
-			flexShrink: column.id === "description" ? 1 : 0,
-			marginRight: index < layout.columns.length - 1 ? 1 : 0,
-			children: column.renderCell(row, column.width)
+			marginRight: index < columns.length - 1 ? ROOT_GAP : 0,
+			children: taskIds.map((taskId) => /* @__PURE__ */ jsx(Box, {
+				width: column.width,
+				height: 1,
+				children: column.render(taskId, column.width)
+			}, taskId))
 		}, column.id))
-	});
-};
-
-//#endregion
-//#region src/ink-renderer/view/progress-view.tsx
-const ProgressView = ({ rows, now, tick, isTTY, terminalColumns }) => {
-	const layout = computeFrameLayout(rows, now, tick, terminalColumns, isTTY);
-	return /* @__PURE__ */ jsx(Box, {
-		flexDirection: "column",
-		children: rows.map((row) => /* @__PURE__ */ jsx(TaskRow, {
-			row,
-			layout
-		}, row.task.id))
-	});
+	}) };
 };
 
 //#endregion
@@ -1407,17 +1326,12 @@ const useSpinnerClock = (active, intervalMillis) => {
 //#region src/ink-renderer/view/render-root.tsx
 const SPINNER_INTERVAL_MILLIS = 100;
 const NOW_INTERVAL_MILLIS = 1e3;
-const ProgressRoot = ({ store, isTTY, getTerminalColumns }) => {
+const ProgressRoot = ({ store, getTerminalColumns }) => {
 	const snapshot = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
 	const tick = useSpinnerClock(snapshot.hasRunningTasks, SPINNER_INTERVAL_MILLIS);
 	const now = useNowClock(snapshot.hasRunningTasks, NOW_INTERVAL_MILLIS);
-	return /* @__PURE__ */ jsx(ProgressView, {
-		rows: snapshot.rows,
-		now,
-		tick,
-		isTTY,
-		terminalColumns: getTerminalColumns()
-	});
+	const stickyWidths = useRef(/* @__PURE__ */ new Map());
+	return RootColumn(snapshot.rows, now, tick, getTerminalColumns(), stickyWidths.current).render();
 };
 
 //#endregion
@@ -1425,7 +1339,6 @@ const ProgressRoot = ({ store, isTTY, getTerminalColumns }) => {
 const MAX_FPS = 12;
 const makeDefaultInkRenderer = () => ({ run: (store, stdio, isTTY) => Effect.sync(() => render(/* @__PURE__ */ jsx(ProgressRoot, {
 	store,
-	isTTY,
 	getTerminalColumns: () => isTTY ? stdio.stderr.columns : void 0
 }), {
 	stdout: stdio.stdout,