effective-progress 0.8.1 → 0.10.0

package/dist/index.mjs

@@ -1,9 +1,11 @@
-import { Brand, Cause, Clock, Context, Data, Effect, Exit, FiberRef, Hash, Layer, Option, Schema } from "effect";
+import { Brand, Cause, Clock, Context, Effect, Exit, FiberRef, Layer, Option, Schema } from "effect";
 import { dual } from "effect/Function";
 import { Box, Text, render } from "ink";
-import { useEffect, useRef, useState, useSyncExternalStore } from "react";
 import stringWidth from "fast-string-width";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import cliSpinners from "cli-spinners";
+import { createContext, memo, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { VirtualList } from "ink-virtual-list";
 
 //#region src/types.ts
 const TaskIdSchema = Schema.Number.pipe(Schema.brand("TaskId"));
@@ -16,7 +18,7 @@ const TaskUnitsSchema = Schema.Struct({
 	processed: Schema.Number,
 	total: Schema.optional(Schema.Number)
 });
-var TaskSnapshot = class extends Schema.TaggedClass()("TaskSnapshot", {
+const TaskSnapshotSchema = Schema.Struct({
 	id: TaskIdSchema,
 	parentId: Schema.NullOr(TaskIdSchema),
 	description: Schema.String,
@@ -26,7 +28,8 @@ var TaskSnapshot = class extends Schema.TaggedClass()("TaskSnapshot", {
 	units: TaskUnitsSchema,
 	startedAt: Schema.Number,
 	completedAt: Schema.NullOr(Schema.Number)
-}) {};
+});
+const TaskSnapshot = (snapshot) => snapshot;
 var Task = class extends Context.Tag("stromseng.dev/effective-progress/Task")() {};
 var TaskAddedEvent = class extends Schema.TaggedClass()("TaskAdded", {
 	taskId: TaskIdSchema,
@@ -58,60 +61,7 @@ const ProgressTaskEventSchema = Schema.Union(TaskAddedEvent, TaskUpdatedEvent, T
 const decodeProgressTaskEvent = Schema.decodeUnknownSync(ProgressTaskEventSchema);
 
 //#endregion
-//#region src/ink-renderer/snapshot/render-snapshot.ts
-const orderedVisibleTasks = (store) => store.renderOrder.flatMap((row) => {
-	const snapshot = store.tasks.get(row.id);
-	if (!snapshot || snapshot.transient && snapshot.status !== "running") return [];
-	return [{
-		snapshot,
-		depth: row.depth
-	}];
-});
-const computeTreeInfo = (ordered) => {
-	const hasNextSiblingByIndex = Array.from({ length: ordered.length }, () => false);
-	for (let i = 0; i < ordered.length; i++) {
-		const depth = ordered[i].depth;
-		for (let j = i + 1; j < ordered.length; j++) {
-			const candidateDepth = ordered[j].depth;
-			if (candidateDepth < depth) break;
-			if (candidateDepth === depth) {
-				hasNextSiblingByIndex[i] = true;
-				break;
-			}
-		}
-	}
-	const ancestorStateByDepth = [];
-	return ordered.map((entry, index) => {
-		const depth = entry.depth;
-		ancestorStateByDepth.length = depth;
-		const hasChildren = index + 1 < ordered.length && ordered[index + 1] !== void 0 && ordered[index + 1].depth > depth;
-		const tree = {
-			depth,
-			hasNextSibling: hasNextSiblingByIndex[index] ?? false,
-			hasChildren,
-			ancestorHasNextSibling: [...ancestorStateByDepth]
-		};
-		ancestorStateByDepth[depth] = hasNextSiblingByIndex[index] ?? false;
-		return {
-			...entry,
-			tree
-		};
-	});
-};
-const toRenderSnapshot = (store) => {
-	const visibleTasks = orderedVisibleTasks(store);
-	const hasRunningTasks = visibleTasks.some((entry) => entry.snapshot.status === "running");
-	return {
-		rows: computeTreeInfo(visibleTasks).map((entry) => ({
-			task: entry.snapshot,
-			tree: entry.tree
-		})),
-		hasRunningTasks
-	};
-};
-
-//#endregion
-//#region src/ink-renderer/store.ts
+//#region src/renderer/store.ts
 const hasExplicitTotal = (options) => Object.prototype.hasOwnProperty.call(options, "total");
 const sanitizeTotalOnAdd = (total) => {
 	if (total === void 0) return;
@@ -142,7 +92,7 @@ const updatedSnapshot = (snapshot, options) => {
 		failed: options.failed ?? currentUnits.failed,
 		total: hasExplicitTotal(options) ? sanitizeTotalOnUpdate(options.total) : currentUnits.total
 	});
-	return new TaskSnapshot({
+	return TaskSnapshot({
 		id: snapshot.id,
 		parentId: snapshot.parentId,
 		description: options.description ?? snapshot.description,
@@ -154,7 +104,7 @@ const updatedSnapshot = (snapshot, options) => {
 		completedAt: snapshot.completedAt
 	});
 };
-const withTransient = (snapshot, transient) => new TaskSnapshot({
+const withTransient = (snapshot, transient) => TaskSnapshot({
 	id: snapshot.id,
 	parentId: snapshot.parentId,
 	description: snapshot.description,
@@ -193,14 +143,26 @@ const removeFromRenderOrder = (renderOrder, taskId) => {
 	next.splice(idx, end - idx);
 	return next;
 };
-const SNAPSHOT_PUBLISH_INTERVAL_MILLIS = 50;
+const subtreeTaskIds = (renderOrder, taskId) => {
+	const idx = renderOrder.findIndex((row) => row.id === taskId);
+	if (idx === -1) return [];
+	const taskDepth = renderOrder[idx].depth;
+	let end = idx + 1;
+	while (end < renderOrder.length && renderOrder[end].depth > taskDepth) end++;
+	return renderOrder.slice(idx, end).map((row) => row.id);
+};
+const SNAPSHOT_PUBLISH_INTERVAL_MILLIS = 100;
 const makeProgressRenderStore = () => {
 	let nextTaskId = 0;
 	let state = {
 		tasks: /* @__PURE__ */ new Map(),
 		renderOrder: []
 	};
-	let publishedSnapshot = toRenderSnapshot(state);
+	let pendingEvents = [];
+	let publishedPublication = {
+		snapshot: state,
+		events: []
+	};
 	let hasPendingPublish = false;
 	let lastPublishAt = 0;
 	let publishTimeout;
@@ -209,10 +171,15 @@ const makeProgressRenderStore = () => {
 		for (const listener of listeners) listener();
 	};
 	const publishNow = () => {
+		const nextPublication = {
+			snapshot: state,
+			events: [...pendingEvents]
+		};
 		hasPendingPublish = false;
-		lastPublishAt = Date.now();
-		publishedSnapshot = toRenderSnapshot(state);
+		publishedPublication = nextPublication;
 		notifyListeners();
+		pendingEvents = [];
+		lastPublishAt = Date.now();
 	};
 	const clearScheduledPublish = () => {
 		if (publishTimeout === void 0) return;
@@ -235,9 +202,10 @@ const makeProgressRenderStore = () => {
 			publishNow();
 		}, waitMillis);
 	};
-	const publish = (nextState) => {
-		if (nextState === state) return;
-		state = nextState;
+	const publish = (update) => {
+		if (update.state === state) return;
+		state = update.state;
+		if (update.events.length > 0) pendingEvents.push(...update.events);
 		hasPendingPublish = true;
 		schedulePublish();
 	};
@@ -245,7 +213,7 @@ const makeProgressRenderStore = () => {
 		publish(transform(state));
 	};
 	return {
-		getSnapshot: () => publishedSnapshot,
+		getSnapshot: () => publishedPublication,
 		subscribe: (listener) => {
 			listeners.add(listener);
 			return () => {
@@ -268,7 +236,7 @@ const makeProgressRenderStore = () => {
 			const now = yield* Clock.currentTimeMillis;
 			const parentId = options.parentId ?? null;
 			const countDisplay = options.countDisplay ?? parentSnapshot?.countDisplay ?? "detailed";
-			const task = new TaskSnapshot({
+			const task = TaskSnapshot({
 				id: taskId,
 				parentId,
 				description: options.description,
@@ -289,45 +257,70 @@ const makeProgressRenderStore = () => {
 					depth
 				});
 				return {
-					tasks: nextTasks,
-					renderOrder: nextRenderOrder
+					state: {
+						tasks: nextTasks,
+						renderOrder: nextRenderOrder
+					},
+					events: [new TaskAddedEvent({
+						taskId,
+						parentId,
+						description: task.description,
+						total: task.units.total,
+						transient: task.transient,
+						countDisplay: task.countDisplay
+					})]
 				};
 			});
 			return taskId;
 		}),
-		updateTask: (taskId, options) => Effect.gen(function* () {
-			const currentTask = state.tasks.get(taskId);
-			if (!currentTask) return;
-			const nextTask = updatedSnapshot(currentTask, options);
+		updateTask: (taskId, options) => Effect.sync(() => {
 			updateState((current) => {
-				if (!current.tasks.get(taskId)) return current;
+				const currentTask = current.tasks.get(taskId);
+				if (!currentTask) return {
+					state: current,
+					events: []
+				};
+				const nextTask = updatedSnapshot(currentTask, options);
 				const nextTasks = new Map(current.tasks);
 				nextTasks.set(taskId, nextTask);
-				if (options.transient !== void 0) for (const [candidateId, candidate] of current.tasks.entries()) {
-					if (candidateId === taskId) continue;
-					let parentId = candidate.parentId;
-					let isDescendant = false;
-					while (parentId !== null) {
-						if (parentId === taskId) {
-							isDescendant = true;
-							break;
-						}
-						parentId = current.tasks.get(parentId)?.parentId ?? null;
-					}
-					if (isDescendant) nextTasks.set(candidateId, withTransient(candidate, nextTask.transient));
+				const events = [new TaskUpdatedEvent({
+					taskId,
+					description: options.description ?? void 0,
+					succeeded: options.succeeded ?? void 0,
+					failed: options.failed ?? void 0,
+					processed: options.succeeded !== void 0 || options.failed !== void 0 ? nextTask.units.processed : void 0,
+					total: hasExplicitTotal(options) ? nextTask.units.total : void 0,
+					transient: options.transient ?? void 0,
+					countDisplay: options.countDisplay ?? void 0
+				})];
+				if (options.transient !== void 0) for (const candidateId of subtreeTaskIds(current.renderOrder, taskId).slice(1)) {
+					const candidate = current.tasks.get(candidateId);
+					if (!candidate) continue;
+					const nextCandidate = withTransient(candidate, nextTask.transient);
+					nextTasks.set(candidateId, nextCandidate);
+					events.push(new TaskUpdatedEvent({
+						taskId: candidateId,
+						transient: nextCandidate.transient
+					}));
 				}
 				return {
-					tasks: nextTasks,
-					renderOrder: current.renderOrder
+					state: {
+						tasks: nextTasks,
+						renderOrder: current.renderOrder
+					},
+					events
 				};
 			});
 		}),
 		incrementSucceeded: (taskId, amount = 1) => Effect.sync(() => {
 			updateState((current) => {
 				const currentTask = current.tasks.get(taskId);
-				if (!currentTask) return current;
+				if (!currentTask) return {
+					state: current,
+					events: []
+				};
 				const nextTasks = new Map(current.tasks);
-				nextTasks.set(taskId, new TaskSnapshot({
+				nextTasks.set(taskId, TaskSnapshot({
 					id: currentTask.id,
 					parentId: currentTask.parentId,
 					description: currentTask.description,
@@ -343,17 +336,27 @@ const makeProgressRenderStore = () => {
 					completedAt: currentTask.completedAt
 				}));
 				return {
-					tasks: nextTasks,
-					renderOrder: current.renderOrder
+					state: {
+						tasks: nextTasks,
+						renderOrder: current.renderOrder
+					},
+					events: [new TaskAdvancedEvent({
+						taskId,
+						amount,
+						kind: "succeeded"
+					})]
 				};
 			});
 		}),
 		incrementFailed: (taskId, amount = 1) => Effect.sync(() => {
 			updateState((current) => {
 				const currentTask = current.tasks.get(taskId);
-				if (!currentTask) return current;
+				if (!currentTask) return {
+					state: current,
+					events: []
+				};
 				const nextTasks = new Map(current.tasks);
-				nextTasks.set(taskId, new TaskSnapshot({
+				nextTasks.set(taskId, TaskSnapshot({
 					id: currentTask.id,
 					parentId: currentTask.parentId,
 					description: currentTask.description,
@@ -369,8 +372,15 @@ const makeProgressRenderStore = () => {
 					completedAt: currentTask.completedAt
 				}));
 				return {
-					tasks: nextTasks,
-					renderOrder: current.renderOrder
+					state: {
+						tasks: nextTasks,
+						renderOrder: current.renderOrder
+					},
+					events: [new TaskAdvancedEvent({
+						taskId,
+						amount,
+						kind: "failed"
+					})]
 				};
 			});
 		}),
@@ -378,16 +388,23 @@ const makeProgressRenderStore = () => {
 			const now = yield* Clock.currentTimeMillis;
 			updateState((current) => {
 				const currentTask = current.tasks.get(taskId);
-				if (!currentTask) return current;
+				if (!currentTask) return {
+					state: current,
+					events: []
+				};
 				const nextTasks = new Map(current.tasks);
 				if (currentTask.transient) {
-					nextTasks.delete(taskId);
+					const removedTaskIds = subtreeTaskIds(current.renderOrder, taskId);
+					for (const removedTaskId of removedTaskIds) nextTasks.delete(removedTaskId);
 					return {
-						tasks: nextTasks,
-						renderOrder: removeFromRenderOrder(current.renderOrder, taskId)
+						state: {
+							tasks: nextTasks,
+							renderOrder: removeFromRenderOrder(current.renderOrder, taskId)
+						},
+						events: [new TaskCompletedEvent({ taskId }), ...removedTaskIds.map((removedTaskId) => new TaskRemovedEvent({ taskId: removedTaskId }))]
 					};
 				}
-				nextTasks.set(taskId, new TaskSnapshot({
+				nextTasks.set(taskId, TaskSnapshot({
 					id: currentTask.id,
 					parentId: currentTask.parentId,
 					description: currentTask.description,
@@ -407,8 +424,11 @@ const makeProgressRenderStore = () => {
 					completedAt: now
 				}));
 				return {
-					tasks: nextTasks,
-					renderOrder: current.renderOrder
+					state: {
+						tasks: nextTasks,
+						renderOrder: current.renderOrder
+					},
+					events: [new TaskCompletedEvent({ taskId })]
 				};
 			});
 		}),
@@ -416,16 +436,23 @@ const makeProgressRenderStore = () => {
 			const now = yield* Clock.currentTimeMillis;
 			updateState((current) => {
 				const currentTask = current.tasks.get(taskId);
-				if (!currentTask) return current;
+				if (!currentTask) return {
+					state: current,
+					events: []
+				};
 				const nextTasks = new Map(current.tasks);
 				if (currentTask.transient) {
-					nextTasks.delete(taskId);
+					const removedTaskIds = subtreeTaskIds(current.renderOrder, taskId);
+					for (const removedTaskId of removedTaskIds) nextTasks.delete(removedTaskId);
 					return {
-						tasks: nextTasks,
-						renderOrder: removeFromRenderOrder(current.renderOrder, taskId)
+						state: {
+							tasks: nextTasks,
+							renderOrder: removeFromRenderOrder(current.renderOrder, taskId)
+						},
+						events: [new TaskFailedEvent({ taskId }), ...removedTaskIds.map((removedTaskId) => new TaskRemovedEvent({ taskId: removedTaskId }))]
 					};
 				}
-				nextTasks.set(taskId, new TaskSnapshot({
+				nextTasks.set(taskId, TaskSnapshot({
 					id: currentTask.id,
 					parentId: currentTask.parentId,
 					description: currentTask.description,
@@ -437,8 +464,11 @@ const makeProgressRenderStore = () => {
 					completedAt: now
 				}));
 				return {
-					tasks: nextTasks,
-					renderOrder: current.renderOrder
+					state: {
+						tasks: nextTasks,
+						renderOrder: current.renderOrder
+					},
+					events: [new TaskFailedEvent({ taskId })]
 				};
 			});
 		}),
@@ -448,46 +478,11 @@ 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;
-		}
-	};
-};
+//#region src/renderer/shared/determinate.ts
+const isDeterminate$2 = (task) => task.units.total !== void 0;
 
 //#endregion
-//#region src/ink-renderer/format.ts
-const SPINNER_FRAMES = [
-	"⠋",
-	"⠙",
-	"⠹",
-	"⠸",
-	"⠼",
-	"⠴",
-	"⠦",
-	"⠧",
-	"⠇",
-	"⠏"
-];
+//#region src/renderer/shared/format.ts
 const isDeterminate$1 = (task) => task.units.total !== void 0;
 const showsUnknownTotalCounts = (task) => task.units.total === void 0 && task.units.processed > 0;
 const formatDurationSeconds = (seconds) => {
@@ -513,37 +508,6 @@ const formatEta = (task, now) => {
 	const elapsedMillis = Math.max(1, now - task.startedAt);
 	return formatDurationSeconds(Math.max(0, Math.floor(elapsedMillis / processed * remaining)) / 1e3);
 };
-const getTaskIndicator = (task, tick) => {
-	if (task.status === "running") return {
-		symbol: SPINNER_FRAMES[tick % SPINNER_FRAMES.length] ?? SPINNER_FRAMES[0],
-		color: "yellow"
-	};
-	if (task.status === "failed") return {
-		symbol: "✗",
-		color: "red"
-	};
-	if (!isDeterminate$1(task)) return {
-		symbol: "✓",
-		color: "green"
-	};
-	const { succeeded, failed, processed, total } = task.units;
-	if (failed === 0 && processed === total) return {
-		symbol: "✓",
-		color: "green"
-	};
-	if (failed > 0 && succeeded > 0) return {
-		symbol: "~",
-		color: "yellow"
-	};
-	if (failed > 0 && succeeded === 0) return {
-		symbol: "✗",
-		color: "red"
-	};
-	return {
-		symbol: "✓",
-		color: "green"
-	};
-};
 const formatDeterminateAmountParts = (task) => {
 	if (!isDeterminate$1(task)) return;
 	const totalText = `${task.units.total}`;
@@ -556,16 +520,6 @@ 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);
@@ -582,780 +536,808 @@ const formatAmount = (task, _tick) => {
 };
 
 //#endregion
-//#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)
-	};
+//#region src/renderer/shared/text-width.ts
+const WIDTH_CACHE_LIMIT = 8192;
+const widthCache = /* @__PURE__ */ new Map();
+const textWidth = (text) => {
+	const cached = widthCache.get(text);
+	if (cached !== void 0) return cached;
+	const width = stringWidth(text);
+	if (widthCache.size >= WIDTH_CACHE_LIMIT) widthCache.clear();
+	widthCache.set(text, width);
+	return width;
 };
 
 //#endregion
-//#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);
+//#region src/renderer/columns/amount-column.tsx
+const hasUnknownTotalCounts = (task) => task.units.total === void 0 && task.units.processed > 0;
+const hasCountedAmount = (task) => isDeterminate$2(task) || hasUnknownTotalCounts(task);
+const totalTextFor = (task) => task.units.total === void 0 ? "?" : `${task.units.total}`;
+const emptyAmountLayout = {
+	hasDetailedRows: false,
+	countWidth: 0,
+	processedWidth: 0,
+	totalWidth: 0,
+	preferredWidth: 0
+};
+const measureAmountLayout = (rows) => {
+	const countedTasks = rows.flatMap((row) => hasCountedAmount(row.task) ? [row.task] : []);
+	const hasDetailedRows = countedTasks.some((task) => task.countDisplay === "detailed");
+	if (countedTasks.length === 0) {
+		const preferredWidth = rows.reduce((max, row) => Math.max(max, textWidth(formatAmount(row.task, 0))), 0);
+		return {
+			...emptyAmountLayout,
+			preferredWidth
+		};
+	}
+	const processedWidth = countedTasks.reduce((max, task) => Math.max(max, `${task.units.processed}`.length), 1);
+	const totalWidth = countedTasks.reduce((max, task) => Math.max(max, totalTextFor(task).length), 1);
+	const countWidth = hasDetailedRows ? countedTasks.reduce((max, task) => Math.max(max, processedWidth, totalWidth, `${task.units.succeeded}`.length, `${task.units.failed}`.length), 1) : 0;
+	const countedWidth = (hasDetailedRows ? countWidth + 1 + countWidth + 1 : 0) + processedWidth + 1 + totalWidth;
 	return {
-		...measure,
-		preferred,
-		max
+		hasDetailedRows,
+		countWidth,
+		processedWidth,
+		totalWidth,
+		preferredWidth: rows.reduce((max, row) => {
+			if (hasCountedAmount(row.task)) return Math.max(max, countedWidth);
+			return Math.max(max, textWidth(formatAmount(row.task, 0)));
+		}, countedWidth)
 	};
 };
-const commitStickyWidth = ({ key, measure, stickyWidths }) => {
-	stickyWidths.set(key, measure.preferred);
+const renderAmount = (task, layout) => {
+	if (!hasCountedAmount(task)) return formatAmount(task, 0);
+	const processed = `${task.units.processed}`.padStart(layout.processedWidth, " ");
+	const total = totalTextFor(task).padStart(layout.totalWidth, " ");
+	if (!layout.hasDetailedRows) return `${processed}/${total}`;
+	if (task.countDisplay !== "detailed") return `${" ".repeat(layout.countWidth)} ${" ".repeat(layout.countWidth)} ${processed}/${total}`;
+	const succeeded = `${task.units.succeeded}`.padStart(layout.countWidth, " ");
+	const failed = `${task.units.failed}`.padStart(layout.countWidth, " ");
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(Text, {
+			color: "green",
+			children: succeeded
+		}),
+		/* @__PURE__ */ jsx(Text, { children: ` ` }),
+		/* @__PURE__ */ jsx(Text, {
+			color: "red",
+			children: failed
+		}),
+		/* @__PURE__ */ jsx(Text, { children: ` ${processed}/${total}` })
+	] });
+};
+const defaultAmountColumnConfig = {
+	minWidth: 4,
+	sticky: true
 };
-const createStickyColumn = ({ frame, measure: baseMeasure, render, stickyKey }) => {
-	const measure = stickyKey === void 0 ? baseMeasure : applyStickyWidth({
-		key: stickyKey,
-		measure: baseMeasure,
-		stickyWidths: frame.stickyWidths
-	});
+const createAmountColumn = (config) => {
+	const resolvedConfig = {
+		...defaultAmountColumnConfig,
+		...config
+	};
+	let amountLayout = emptyAmountLayout;
 	return {
-		measure,
-		commitStickyWidth: stickyKey === void 0 ? void 0 : () => {
-			commitStickyWidth({
-				key: stickyKey,
-				measure,
-				stickyWidths: frame.stickyWidths
-			});
+		Component: ({ row }) => /* @__PURE__ */ jsx(Text, {
+			wrap: "truncate-end",
+			children: renderAmount(row.task, amountLayout)
+		}),
+		measure: ({ rows }) => {
+			amountLayout = measureAmountLayout(rows);
+			return {
+				minWidth: amountLayout.preferredWidth > 0 ? Math.min(resolvedConfig.minWidth, amountLayout.preferredWidth) : 0,
+				preferredWidth: amountLayout.preferredWidth,
+				maxWidth: amountLayout.preferredWidth
+			};
 		},
-		render
+		noWrap: false,
+		sticky: resolvedConfig.sticky
 	};
 };
 
 //#endregion
-//#region src/ink-renderer/columns/text-width.ts
-const WIDTH_CACHE_LIMIT = 4096;
-const widthCache = /* @__PURE__ */ new Map();
-const textWidth = (text) => {
-	const cached = widthCache.get(text);
-	if (cached !== void 0) return cached;
-	const width = stringWidth(text);
-	if (widthCache.size >= WIDTH_CACHE_LIMIT) widthCache.clear();
-	widthCache.set(text, width);
-	return width;
+//#region src/renderer/columns/bar-column.tsx
+const DEFAULT_BAR_WIDTH = 30;
+const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+const renderProgressBar = (task, width) => {
+	if (!isDeterminate$2(task)) return /* @__PURE__ */ jsx(Text, { children: ` `.repeat(Math.max(0, width)) });
+	const displayTotal = Math.max(task.units.total, task.units.succeeded + task.units.failed);
+	const succeededEnd = displayTotal === 0 ? width : Math.round(task.units.succeeded / displayTotal * width);
+	const failedEnd = displayTotal === 0 ? width : Math.round((task.units.succeeded + task.units.failed) / displayTotal * width);
+	const succeededLength = clamp(succeededEnd, 0, width);
+	const failedLength = clamp(failedEnd, succeededLength, width) - succeededLength;
+	const remainingLength = Math.max(0, width - succeededLength - failedLength);
+	return /* @__PURE__ */ jsxs(Text, {
+		wrap: "truncate-end",
+		children: [
+			/* @__PURE__ */ jsx(Text, {
+				color: "green",
+				children: "━".repeat(succeededLength)
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				color: "red",
+				children: "━".repeat(failedLength)
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				color: "gray",
+				children: "─".repeat(remainingLength)
+			})
+		]
+	});
 };
-
-//#endregion
-//#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 defaultBarColumnConfig = {
+	minWidth: 4,
+	barWidth: DEFAULT_BAR_WIDTH,
+	sticky: true
 };
-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
+const createBarColumn = (config) => {
+	const resolvedConfig = {
+		...defaultBarColumnConfig,
+		...config
+	};
+	return {
+		Component: ({ row, width }) => /* @__PURE__ */ jsx(Text, {
+			wrap: "truncate-end",
+			children: renderProgressBar(row.task, width)
+		}),
+		measure: ({ rows }) => {
+			const hasDeterminateRows = rows.some((row) => row.derived.isDeterminate);
+			const preferredWidth = hasDeterminateRows ? resolvedConfig.barWidth : 0;
+			return {
+				minWidth: hasDeterminateRows ? Math.min(resolvedConfig.minWidth, preferredWidth) : 0,
+				preferredWidth,
+				maxWidth: preferredWidth
+			};
 		},
-		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}`
-				]
-			});
-		}
-	});
+		noWrap: false,
+		sticky: resolvedConfig.sticky
+	};
 };
-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)
-				})
-			});
-		}
-	});
+//#region src/renderer/hooks/use-spinner-clock.ts
+const normalizeIntervalMillis = (intervalMillis) => Math.max(1, intervalMillis);
+const getSpinnerTickAtTime = (baseTick, startedAt, now, intervalMillis) => {
+	const elapsedMillis = Math.max(0, now - startedAt);
+	return baseTick + Math.floor(elapsedMillis / normalizeIntervalMillis(intervalMillis));
+};
+const useSpinnerClock = (active, intervalMillis) => {
+	const [tick, setTick] = useState(0);
+	const tickRef = useRef(tick);
+	useEffect(() => {
+		tickRef.current = tick;
+	}, [tick]);
+	useEffect(() => {
+		if (!active) return;
+		const baseTick = tickRef.current;
+		const startedAt = Date.now();
+		const updateTick = () => {
+			setTick(getSpinnerTickAtTime(baseTick, startedAt, Date.now(), intervalMillis));
+		};
+		updateTick();
+		const interval = setInterval(() => {
+			updateTick();
+		}, normalizeIntervalMillis(intervalMillis));
+		return () => {
+			clearInterval(interval);
+		};
+	}, [active, intervalMillis]);
+	return tick;
 };
-const ElapsedRootColumn = createColumnDefinition({ _tag: "elapsed" }, (frame) => ElapsedColumn(frame));
 
 //#endregion
-//#region src/ink-renderer/columns/determinate.ts
-const isDeterminate = (task) => task.units.total !== void 0;
+//#region src/renderer/context/spinner-context.tsx
+const DEFAULT_SPINNER_INTERVAL_MILLIS = cliSpinners.dots.interval;
+const SpinnerContext = createContext(0);
+const SpinnerProvider = ({ active, children, intervalMillis = DEFAULT_SPINNER_INTERVAL_MILLIS, tickOverride }) => {
+	const liveTick = useSpinnerClock(active, intervalMillis);
+	const tick = tickOverride ?? liveTick;
+	return /* @__PURE__ */ jsx(SpinnerContext.Provider, {
+		value: tick,
+		children
+	});
+};
+const useSpinnerTick = () => useContext(SpinnerContext);
 
 //#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 : "--";
+//#region src/renderer/columns/description-column.tsx
+const MIN_TREE_DESCRIPTION_TEXT_WIDTH = 6;
+const defaultDescriptionColumnConfig = {
+	minWidth: 1,
+	spinnerType: "dots",
+	sticky: true
 };
-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 isDeterminate = (task) => task.units.total !== void 0;
+const getSpinnerFrame = (tick, spinnerType) => {
+	const frames = cliSpinners[spinnerType].frames;
+	return frames[(tick % frames.length + frames.length) % frames.length] ?? frames[0] ?? "";
 };
-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)));
-	}
+const getTaskIndicator = (task, tick, spinnerType = defaultDescriptionColumnConfig.spinnerType) => {
+	if (task.status === "running") return {
+		symbol: getSpinnerFrame(tick, spinnerType),
+		color: "yellow"
+	};
+	if (task.status === "failed") return {
+		symbol: "✗",
+		color: "red"
+	};
+	if (!isDeterminate(task)) return {
+		symbol: "✓",
+		color: "green"
+	};
+	const { succeeded, failed, processed, total } = task.units;
+	if (failed === 0 && processed === total) return {
+		symbol: "✓",
+		color: "green"
+	};
+	if (failed > 0 && succeeded > 0) return {
+		symbol: "~",
+		color: "yellow"
+	};
+	if (failed > 0 && succeeded === 0) return {
+		symbol: "✗",
+		color: "red"
+	};
 	return {
-		hasEta,
-		prefixedWidth,
-		durationWidth: Math.max(2, durationWidth),
-		primaryUnitWidth: Math.max(2, primaryUnitWidth)
+		symbol: "✓",
+		color: "green"
 	};
 };
-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",
-			color: "gray",
-			children: renderEtaText(frame.getTask(taskId), frame.now, width)
-		})
+const TaskIndicatorGlyph = ({ task, spinnerType = defaultDescriptionColumnConfig.spinnerType }) => {
+	const indicator = getTaskIndicator(task, useSpinnerTick(), spinnerType);
+	return /* @__PURE__ */ jsx(Text, {
+		color: indicator.color,
+		children: indicator.symbol
 	});
 };
-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 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}`));
-			totalWidth = Math.max(totalWidth, textWidth(isDeterminate(task) ? `${task.units.total}` : "?"));
-			if (task.countDisplay === "detailed") hasDetailed = true;
-			continue;
-		}
-		simpleTextWidth = Math.max(simpleTextWidth, textWidth(formatAmount(task, frame.tick)));
-	}
+const createDescriptionColumn = (config) => {
+	const resolvedConfig = {
+		...defaultDescriptionColumnConfig,
+		...config,
+		spinnerType: config?.spinnerType ?? defaultDescriptionColumnConfig.spinnerType
+	};
+	let minTreeWidth = MIN_TREE_DESCRIPTION_TEXT_WIDTH + 2;
+	const Component = ({ row, width }) => {
+		const showTree = width >= minTreeWidth;
+		const treePrefix = showTree ? row.derived.treePrefix : "";
+		if (!showTree && width <= 1) return /* @__PURE__ */ jsx(TaskIndicatorGlyph, {
+			task: row.task,
+			spinnerType: resolvedConfig.spinnerType
+		});
+		if (!showTree && width === 2) return /* @__PURE__ */ jsxs(Text, {
+			wrap: "truncate-end",
+			children: [/* @__PURE__ */ jsx(TaskIndicatorGlyph, {
+				task: row.task,
+				spinnerType: resolvedConfig.spinnerType
+			}), "…"]
+		});
+		return /* @__PURE__ */ jsxs(Text, {
+			wrap: "truncate-end",
+			children: [
+				treePrefix,
+				/* @__PURE__ */ jsx(TaskIndicatorGlyph, {
+					task: row.task,
+					spinnerType: resolvedConfig.spinnerType
+				}),
+				` ${row.task.description}`
+			]
+		});
+	};
 	return {
-		hasStructuredCounts,
-		hasDetailed,
-		hasDeterminate,
-		countDigits: Math.max(1, countDigits),
-		totalWidth: Math.max(1, totalWidth),
-		simpleTextWidth
+		Component,
+		measure: ({ rows }) => {
+			const hasNestedRows = rows.some((row) => row.tree.depth > 0);
+			minTreeWidth = rows.reduce((max, row) => Math.max(max, row.derived.treePrefixWidth + 2 + MIN_TREE_DESCRIPTION_TEXT_WIDTH), MIN_TREE_DESCRIPTION_TEXT_WIDTH + 2);
+			return {
+				minWidth: resolvedConfig.minWidth,
+				preferredWidth: Math.max(rows.reduce((max, row) => Math.max(max, row.derived.treePrefixedDescriptionWidth + 2), resolvedConfig.minWidth), hasNestedRows ? minTreeWidth : resolvedConfig.minWidth),
+				maxWidth: void 0
+			};
+		},
+		noWrap: false,
+		sticky: resolvedConfig.sticky,
+		stickyMaxWidth: resolvedConfig.stickyMaxWidth
 	};
 };
-const processedAmountWidth = (metrics) => metrics.countDigits + 1 + metrics.totalWidth;
-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)
-	});
+//#region src/renderer/hooks/use-now-clock.ts
+const useNowClock = (active, intervalMillis) => {
+	const [now, setNow] = useState(() => Date.now());
+	useEffect(() => {
+		if (!active) return;
+		setNow(Date.now());
+		const interval = setInterval(() => {
+			setNow(Date.now());
+		}, intervalMillis);
+		return () => {
+			clearInterval(interval);
+		};
+	}, [active, intervalMillis]);
+	return now;
 };
-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)
+
+//#endregion
+//#region src/renderer/context/now-context.tsx
+const NOW_INTERVAL_MILLIS = 1e3;
+const NowContext = createContext(Date.now());
+const NowProvider = ({ active, children, nowOverride }) => {
+	const liveNow = useNowClock(active, NOW_INTERVAL_MILLIS);
+	const now = nowOverride ?? liveNow;
+	return /* @__PURE__ */ jsx(NowContext.Provider, {
+		value: now,
+		children
 	});
 };
-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 useNow = () => useContext(NowContext);
+
+//#endregion
+//#region src/renderer/columns/elapsed-column.tsx
+const defaultElapsedColumnConfig = {
+	minWidth: 2,
+	justify: "right",
+	sticky: true
 };
-const structuredAmount = (task, tick, width, layout) => {
-	if (!shouldShowCountAmount(task)) return /* @__PURE__ */ jsx(Text, {
+const ElapsedText = ({ task, width }) => {
+	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)
-		]
+		color: "gray",
+		children: formatElapsed(task, useNow()).slice(0, Math.max(0, width))
 	});
 };
-const AmountColumn = (frame, config) => {
-	const metrics = config.metrics ?? computeProgressMetrics(frame);
-	const detailedWidth = detailedAmountWidth(metrics);
-	const processedWidth = processedAmountWidth(metrics);
-	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)
+const createElapsedColumn = (config) => {
+	const resolvedConfig = {
+		...defaultElapsedColumnConfig,
+		...config
 	};
-	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
-			});
-		}
+	const Component = ({ row, width }) => /* @__PURE__ */ jsx(ElapsedText, {
+		task: row.task,
+		width
 	});
+	return {
+		Component,
+		measure: ({ rows, now }) => {
+			const width = rows.reduce((max, row) => Math.max(max, formatElapsed(row.task, now).length), resolvedConfig.minWidth);
+			return {
+				minWidth: resolvedConfig.minWidth,
+				preferredWidth: width,
+				maxWidth: width
+			};
+		},
+		getLayoutDependency: ({ rows, now }) => rows.reduce((max, row) => Math.max(max, formatElapsed(row.task, now).length), 0),
+		justify: resolvedConfig.justify,
+		noWrap: true,
+		sticky: resolvedConfig.sticky
+	};
 };
 
 //#endregion
-//#region src/ink-renderer/columns/progress/bar-column.tsx
-const segmentLengths = (width, total, succeeded, failed) => {
-	if (total === 0) return {
-		succeeded: width,
-		failed: 0,
-		remaining: 0
+//#region src/renderer/columns/eta-column.tsx
+const primaryUnit = (duration) => duration.split(" ")[0] ?? duration;
+const cropTextToWidth = (text, width) => {
+	if (width <= 0) return "";
+	return text.slice(0, width);
+};
+const etaDurationText = (row, now) => {
+	const eta = formatEta(row.task, now);
+	return eta === "" ? void 0 : eta;
+};
+const renderEtaText = (row, now, width) => {
+	const duration = etaDurationText(row, now);
+	if (duration === void 0) return {
+		mode: "compact",
+		text: ""
+	};
+	const prefixed = `ETA: ${duration}`;
+	if (width >= prefixed.length) return {
+		mode: "prefixed",
+		text: prefixed
+	};
+	if (width >= duration.length) return {
+		mode: "duration",
+		text: duration
 	};
-	const displayTotal = Math.max(total, succeeded + failed);
-	const succeededEnd = Math.round(succeeded / displayTotal * width);
-	const failedEnd = Math.round((succeeded + failed) / displayTotal * width);
-	const succeededLength = Math.max(0, Math.min(width, succeededEnd));
-	const failedLength = Math.max(0, Math.min(width, failedEnd) - succeededLength);
 	return {
-		succeeded: succeededLength,
-		failed: failedLength,
-		remaining: Math.max(0, width - succeededLength - failedLength)
+		mode: "compact",
+		text: cropTextToWidth(primaryUnit(duration), width)
 	};
 };
-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 defaultEtaColumnConfig = {
+	minWidth: 3,
+	justify: "right",
+	sticky: true
 };
-
-//#endregion
-//#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, {
+const EtaText = ({ row, width, justify }) => {
+	const rendered = renderEtaText(row, useNow(), width);
+	return /* @__PURE__ */ jsx(Box, {
+		width,
+		justifyContent: rendered.mode === "prefixed" ? justify === "right" ? "flex-end" : "flex-start" : "flex-start",
+		children: /* @__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/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
-	};
-	return {
-		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
-	};
+			color: "gray",
+			children: rendered.text
+		})
+	});
 };
-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 {
-		kind: "bar-amount",
-		bar,
-		barWidth: Math.max(bar.measure.min, available - amountWidth),
-		amountWidth
+const createEtaColumn = (config) => {
+	const resolvedConfig = {
+		...defaultEtaColumnConfig,
+		...config
 	};
-};
-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;
+	const Component = ({ row, width }) => /* @__PURE__ */ jsx(EtaText, {
+		row,
+		width,
+		justify: resolvedConfig.justify
+	});
 	return {
-		measure: {
-			min: !model.metrics.hasDeterminate ? amount.measure.min : fullMin,
-			preferred,
-			max
-		},
-		commitStickyWidth: () => {
-			model.bar?.commitStickyWidth?.();
-			amount.commitStickyWidth?.();
+		Component,
+		measure: ({ rows, now }) => {
+			const width = rows.reduce((max, row) => {
+				const duration = etaDurationText(row, now);
+				if (duration === void 0) return max;
+				return Math.max(max, `ETA: ${duration}`.length);
+			}, resolvedConfig.minWidth);
+			return {
+				minWidth: resolvedConfig.minWidth,
+				preferredWidth: width,
+				maxWidth: width
+			};
 		},
-		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)
-					})
-				]
-			});
-		}
+		getLayoutDependency: ({ rows, now }) => rows.reduce((max, row) => {
+			const duration = etaDurationText(row, now);
+			if (duration === void 0) return max;
+			return Math.max(max, `ETA: ${duration}`.length);
+		}, 0),
+		justify: resolvedConfig.justify,
+		noWrap: true,
+		sticky: resolvedConfig.sticky
 	};
 };
-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/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 ROOT_LAYOUTS = [
-	[
-		DescriptionTreeRootColumn,
-		ProgressRootColumn,
-		ElapsedRootColumn,
-		EtaRootColumn
-	],
-	[
-		DescriptionPlainRootColumn,
-		ProgressRootColumn,
-		ElapsedRootColumn,
-		EtaRootColumn
-	],
-	[
-		DescriptionPlainRootColumn,
-		ProgressPercentRootColumn,
-		ElapsedRootColumn,
-		EtaRootColumn
-	],
-	[
-		DescriptionPlainRootColumn,
-		ProgressPercentRootColumn,
-		ElapsedRootColumn
-	],
-	[DescriptionPlainRootColumn, ProgressPercentRootColumn],
-	[DescriptionCompactRootColumn, ProgressPercentRootColumn],
-	[DescriptionCompactRootColumn],
-	[DescriptionSpinnerRootColumn]
+//#region src/renderer/default-columns.tsx
+const defaultRendererv2Columns = [
+	createDescriptionColumn(),
+	createBarColumn(),
+	createAmountColumn(),
+	createElapsedColumn(),
+	createEtaColumn()
 ];
-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, {
+
+//#endregion
+//#region src/renderer/width-allocator.ts
+const RENDERER_COLUMN_GAP = 1;
+const clampWidth = (width, minWidth, maxWidth) => maxWidth === void 0 ? Math.max(minWidth, width) : Math.max(minWidth, Math.min(maxWidth, width));
+const normalizeMeasurement = (definition, context) => {
+	if (definition.fixedWidth !== void 0) {
+		const width = Math.max(0, definition.fixedWidth);
+		return {
+			definition,
+			minWidth: width,
+			maxWidth: width,
+			preferredWidth: width,
+			sticky: definition.sticky === true,
+			stickyLimit: width
+		};
+	}
+	const measured = definition.measure(context);
+	const minWidth = Math.max(0, measured.minWidth);
+	const maxWidth = measured.maxWidth === void 0 ? void 0 : Math.max(minWidth, measured.maxWidth);
+	const preferredWidth = clampWidth(measured.preferredWidth, minWidth, maxWidth);
+	const stickyLimit = definition.sticky !== true ? void 0 : definition.stickyMaxWidth !== void 0 ? Math.max(minWidth, definition.stickyMaxWidth) : maxWidth;
+	return {
 		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 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;
+		minWidth,
+		maxWidth,
+		preferredWidth,
+		sticky: definition.sticky === true,
+		stickyLimit
 	};
-	return candidateRootLayouts(columnsById).map(resolveLayout).filter((columns) => columns !== void 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 visibleIndices = (widths) => widths.flatMap((width, index) => width > 0 ? [index] : []);
+const totalVisibleWidth = (widths) => {
+	const indices = visibleIndices(widths);
+	if (indices.length === 0) return 0;
+	return indices.reduce((sum, index, visibleIndex) => {
+		const padding = visibleIndex < indices.length - 1 ? RENDERER_COLUMN_GAP : 0;
+		return sum + widths[index] + padding;
+	}, 0);
 };
-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 shrinkWidestFirst = (widths, columns, targetWidth, canShrink) => {
+	while (totalVisibleWidth(widths) > targetWidth) {
 		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);
+			width,
+			minWidth: columns[index].minWidth
+		})).filter(({ index, width, minWidth }) => width > minWidth && canShrink(index)).sort((left, right) => right.width - left.width || right.index - left.index);
 		if (shrinkable.length === 0) break;
+		const overflow = totalVisibleWidth(widths) - targetWidth;
 		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 cohort = shrinkable.filter((entry) => entry.width === widest);
+		const maxUniformDrop = widest - Math.max(nextDistinctWidth(shrinkable, widest) ?? 0, ...cohort.map((entry) => entry.minWidth));
 		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;
+			for (const { index } of cohort) widths[index] = Math.max(columns[index].minWidth, widths[index] - uniformDrop);
 			continue;
 		}
 		let changed = false;
-		for (const { index, minimum } of cohort) {
-			if (overflow <= 0) break;
-			if (widths[index] <= minimum) continue;
+		for (const { index, minWidth } of cohort) {
+			if (totalVisibleWidth(widths) <= targetWidth) break;
+			if (widths[index] <= minWidth) continue;
 			widths[index] = widths[index] - 1;
-			overflow -= 1;
 			changed = true;
 		}
 		if (!changed) break;
 	}
 	return widths;
 };
-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 forceFitFromRight = (widths, columns, targetWidth, canShrink) => {
+	while (totalVisibleWidth(widths) > targetWidth) {
+		const rightmostVisibleIndex = widths.findLastIndex((width, index) => width > 0 && canShrink(index));
+		if (rightmostVisibleIndex < 0) break;
+		widths[rightmostVisibleIndex] = widths[rightmostVisibleIndex] - 1;
+	}
+	return widths;
+};
+const applyStickyGrowth = (widths, columns, targetWidth, previousStickyWidths) => {
+	const stickyTargets = columns.map((column, index) => {
+		if (!column.sticky) return;
+		return clampWidth(Math.max(previousStickyWidths.get(index) ?? 0, column.preferredWidth), column.minWidth, column.stickyLimit);
+	});
+	if (targetWidth === void 0) stickyTargets.forEach((target, index) => {
+		if (target !== void 0) widths[index] = Math.max(widths[index], target);
+	});
+	else {
+		let remaining = targetWidth - totalVisibleWidth(widths);
+		if (remaining > 0) stickyTargets.forEach((target, index) => {
+			if (target === void 0 || remaining <= 0) return;
+			const deficit = Math.max(0, target - widths[index]);
+			const growth = Math.min(deficit, remaining);
+			widths[index] = widths[index] + growth;
+			remaining -= growth;
+		});
+	}
+	const nextStickyWidths = /* @__PURE__ */ new Map();
+	stickyTargets.forEach((target, index) => {
+		if (target === void 0) return;
+		nextStickyWidths.set(index, clampWidth(Math.max(target, widths[index]), columns[index].minWidth, columns[index].stickyLimit));
+	});
+	return {
+		widths,
+		nextStickyWidths
+	};
 };
-const emptyRootColumn = (stickyWidths) => {
-	stickyWidths.clear();
-	return { render: () => null };
+const planColumnLayout = (definitions, rows, now, terminalColumns, previousStickyWidths) => {
+	const measureContext = {
+		rows,
+		now
+	};
+	const columns = definitions.map((definition) => normalizeMeasurement(definition, measureContext));
+	let widths = columns.map((column) => column.preferredWidth);
+	if (terminalColumns !== void 0) {
+		widths = shrinkWidestFirst([...widths], columns, terminalColumns, (index) => columns[index].definition.fixedWidth === void 0);
+		if (totalVisibleWidth(widths) > terminalColumns) widths = forceFitFromRight([...widths], columns, terminalColumns, (index) => columns[index].definition.fixedWidth === void 0);
+	}
+	const stickyResult = applyStickyGrowth(widths, columns, terminalColumns, previousStickyWidths);
+	return {
+		columns: stickyResult.widths.map((width, index) => ({
+			definition: columns[index].definition,
+			width
+		})).filter(({ width }) => width > 0),
+		nextStickyWidths: stickyResult.nextStickyWidths
+	};
 };
-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: rowWidth,
-		children: columns.map((column, index) => /* @__PURE__ */ jsx(Box, {
-			flexDirection: "column",
+
+//#endregion
+//#region src/renderer/public-api.tsx
+const ProgressRow = memo(({ row, rowIndex, terminalColumns, columns }) => /* @__PURE__ */ jsx(Box, {
+	flexDirection: "row",
+	width: terminalColumns,
+	columnGap: RENDERER_COLUMN_GAP,
+	children: columns.map((column, columnIndex) => {
+		const Component = column.definition.Component;
+		return /* @__PURE__ */ jsx(Box, {
+			height: 1,
 			width: 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))
-	}) };
+			minWidth: column.width,
+			flexBasis: column.width,
+			flexGrow: 0,
+			flexShrink: 0,
+			justifyContent: column.definition.justify === "right" ? "flex-end" : "flex-start",
+			children: /* @__PURE__ */ jsx(Component, {
+				row,
+				rowIndex,
+				width: column.width
+			})
+		}, columnIndex);
+	})
+}), (previousProps, nextProps) => previousProps.row === nextProps.row && previousProps.rowIndex === nextProps.rowIndex && previousProps.terminalColumns === nextProps.terminalColumns && previousProps.columns === nextProps.columns);
+const layoutDependencyKeyFor = (columns, context) => columns.map((column, index) => `${index}:${column.getLayoutDependency?.(context) ?? "static"}`).join("|");
+const CreateProgressRenderer = (columns) => {
+	return ({ rows, terminalColumns, terminalRows }) => {
+		const stickyWidthsRef = useRef(/* @__PURE__ */ new Map());
+		const now = useNow();
+		const layout = useMemo(() => rows.length === 0 ? {
+			columns: [],
+			nextStickyWidths: /* @__PURE__ */ new Map()
+		} : planColumnLayout(columns, rows, now, terminalColumns, stickyWidthsRef.current), [
+			columns,
+			layoutDependencyKeyFor(columns, {
+				rows,
+				now
+			}),
+			rows,
+			terminalColumns
+		]);
+		useEffect(() => {
+			stickyWidthsRef.current = rows.length === 0 ? /* @__PURE__ */ new Map() : layout.nextStickyWidths;
+		}, [layout.nextStickyWidths, rows.length]);
+		if (layout.columns.length === 0) return null;
+		return /* @__PURE__ */ jsx(VirtualList, {
+			items: rows,
+			keyExtractor: (row) => `${row.task.id}`,
+			selectedIndex: Math.max(0, rows.length - 1),
+			height: terminalRows ?? "auto",
+			itemHeight: 1,
+			showOverflowIndicators: true,
+			renderItem: ({ item: row, index: rowIndex }) => /* @__PURE__ */ jsx(ProgressRow, {
+				row,
+				rowIndex,
+				terminalColumns,
+				columns: layout.columns
+			})
+		});
+	};
 };
 
 //#endregion
-//#region src/ink-renderer/view/hooks/use-now-clock.ts
-const useNowClock = (active, intervalMillis) => {
-	const [now, setNow] = useState(() => Date.now());
-	useEffect(() => {
-		if (!active) return;
-		setNow(Date.now());
-		const interval = setInterval(() => {
-			setNow(Date.now());
-		}, intervalMillis);
-		return () => {
-			clearInterval(interval);
+//#region src/renderer/store/render-snapshot.ts
+const orderedVisibleTasks = (store) => store.renderOrder.flatMap((row) => {
+	const snapshot = store.tasks.get(row.id);
+	if (!snapshot || snapshot.transient && snapshot.status !== "running") return [];
+	return [{
+		snapshot,
+		depth: row.depth
+	}];
+});
+const treeAncestorPrefix = (ancestorHasNextSibling) => ancestorHasNextSibling.slice(1).map((hasNextSibling) => hasNextSibling ? "│  " : "   ").join("");
+const renderTreePrefix = (tree) => {
+	if (tree.depth <= 0) return "";
+	return `${treeAncestorPrefix(tree.ancestorHasNextSibling)}${tree.hasNextSibling ? "├─ " : "└─ "}`;
+};
+const arraysEqual = (left, right) => {
+	if (left.length !== right.length) return false;
+	for (let i = 0; i < left.length; i++) if (left[i] !== right[i]) return false;
+	return true;
+};
+const sameTreePrefixInputs = (left, right) => left.depth === right.depth && left.hasNextSibling === right.hasNextSibling && arraysEqual(left.ancestorHasNextSibling, right.ancestorHasNextSibling);
+const sameTree = (left, right) => sameTreePrefixInputs(left, right) && left.hasChildren === right.hasChildren;
+const deriveRow = (task, tree, previousRow) => {
+	if (previousRow !== void 0 && previousRow.task === task && sameTree(previousRow.tree, tree)) return previousRow.derived;
+	const treePrefix = previousRow !== void 0 && sameTreePrefixInputs(previousRow.tree, tree) ? previousRow.derived.treePrefix : renderTreePrefix(tree);
+	const treePrefixWidth = previousRow !== void 0 && sameTreePrefixInputs(previousRow.tree, tree) ? previousRow.derived.treePrefixWidth : treePrefix.length;
+	const descriptionWidth = previousRow !== void 0 && previousRow.task.description === task.description ? previousRow.derived.descriptionWidth : textWidth(task.description);
+	const isDeterminate = previousRow !== void 0 && previousRow.task.units.total === task.units.total ? previousRow.derived.isDeterminate : task.units.total !== void 0;
+	const hasRenderableProgress = previousRow !== void 0 && previousRow.task.units.total === task.units.total && previousRow.task.units.processed === task.units.processed ? previousRow.derived.hasRenderableProgress : task.units.total !== void 0 || task.units.processed > 0;
+	return {
+		treePrefix,
+		treePrefixWidth,
+		descriptionWidth,
+		treePrefixedDescriptionWidth: treePrefixWidth + descriptionWidth,
+		hasRenderableProgress,
+		isDeterminate
+	};
+};
+const computeTreeInfo = (ordered, previousRows) => {
+	const hasNextSiblingByIndex = Array.from({ length: ordered.length }, () => false);
+	const seenByDepth = [];
+	for (let i = ordered.length - 1; i >= 0; i--) {
+		const depth = ordered[i].depth;
+		hasNextSiblingByIndex[i] = seenByDepth[depth] ?? false;
+		seenByDepth[depth] = true;
+		seenByDepth.length = depth + 1;
+	}
+	const ancestorStateByDepth = [];
+	const previousRowsByTaskId = new Map(previousRows.map((row) => [row.task.id, row]));
+	return ordered.map((entry, index) => {
+		const depth = entry.depth;
+		ancestorStateByDepth.length = depth;
+		const hasChildren = index + 1 < ordered.length && ordered[index + 1] !== void 0 && ordered[index + 1].depth > depth;
+		const tree = {
+			depth,
+			hasNextSibling: hasNextSiblingByIndex[index] ?? false,
+			hasChildren,
+			ancestorHasNextSibling: [...ancestorStateByDepth]
 		};
-	}, [active, intervalMillis]);
-	return now;
+		const previousRow = previousRowsByTaskId.get(entry.snapshot.id);
+		ancestorStateByDepth[depth] = hasNextSiblingByIndex[index] ?? false;
+		if (previousRow !== void 0 && previousRow.task === entry.snapshot && sameTree(previousRow.tree, tree)) return previousRow;
+		const derived = deriveRow(entry.snapshot, tree, previousRow);
+		return {
+			task: entry.snapshot,
+			tree: previousRow !== void 0 && sameTree(previousRow.tree, tree) ? previousRow.tree : tree,
+			derived
+		};
+	});
+};
+const toRenderSnapshot = (store, previousSnapshot) => {
+	const visibleTasks = orderedVisibleTasks(store);
+	const hasRunningTasks = visibleTasks.some((entry) => entry.snapshot.status === "running");
+	return {
+		rows: computeTreeInfo(visibleTasks, previousSnapshot?.rows ?? []),
+		hasRunningTasks
+	};
 };
 
 //#endregion
-//#region src/ink-renderer/view/hooks/use-spinner-clock.ts
-const useSpinnerClock = (active, intervalMillis) => {
-	const [tick, setTick] = useState(0);
+//#region src/renderer/store/use-progress-render-view.ts
+const useRenderSnapshot = (storeSnapshot) => {
+	const previousSnapshotRef = useRef(void 0);
+	const renderSnapshot = useMemo(() => toRenderSnapshot(storeSnapshot, previousSnapshotRef.current), [storeSnapshot]);
 	useEffect(() => {
-		if (!active) return;
-		const interval = setInterval(() => {
-			setTick((current) => current + 1);
-		}, intervalMillis);
-		return () => {
-			clearInterval(interval);
-		};
-	}, [active, intervalMillis]);
-	return tick;
+		previousSnapshotRef.current = renderSnapshot;
+	}, [renderSnapshot]);
+	return renderSnapshot;
+};
+const useProgressRenderView = (store) => {
+	const publication = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+	const renderSnapshot = useRenderSnapshot(publication.snapshot);
+	return {
+		publication,
+		renderSnapshot,
+		hasRunningTasks: renderSnapshot.rows.some((row) => row.task.status === "running")
+	};
 };
 
 //#endregion
-//#region src/ink-renderer/view/render-root.tsx
-const SPINNER_INTERVAL_MILLIS = 100;
-const NOW_INTERVAL_MILLIS = 1e3;
-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);
-	const stickyWidths = useRef(/* @__PURE__ */ new Map());
-	return RootColumn(snapshot.rows, now, tick, getTerminalColumns(), stickyWidths.current).render();
+//#region src/renderer/renderer-service.tsx
+const MAX_FPS = 24;
+const CreateProgressRoot = (columns) => {
+	const ProgressRenderer = CreateProgressRenderer(columns);
+	return ({ store, getTerminalColumns, getTerminalRows }) => {
+		const { renderSnapshot, hasRunningTasks } = useProgressRenderView(store);
+		return /* @__PURE__ */ jsx(SpinnerProvider, {
+			active: hasRunningTasks,
+			children: /* @__PURE__ */ jsx(NowProvider, {
+				active: hasRunningTasks,
+				children: /* @__PURE__ */ jsx(ProgressRenderer, {
+					rows: renderSnapshot.rows,
+					terminalColumns: getTerminalColumns(),
+					terminalRows: getTerminalRows()
+				})
+			})
+		});
+	};
+};
+const makeRendererv2InkRendererService = (columns) => {
+	const ProgressRoot = CreateProgressRoot(columns);
+	return { run: (store, stdio, isTTY) => {
+		const proot = /* @__PURE__ */ jsx(ProgressRoot, {
+			store,
+			getTerminalColumns: () => isTTY ? stdio.stderr.columns : void 0,
+			getTerminalRows: () => isTTY ? stdio.stderr.rows : void 0
+		});
+		return Effect.sync(() => render(proot, {
+			stdout: stdio.stdout,
+			stderr: stdio.stderr,
+			patchConsole: true,
+			exitOnCtrlC: false,
+			debug: false,
+			maxFps: MAX_FPS
+		})).pipe(Effect.flatMap((instance) => Effect.never.pipe(Effect.ensuring(Effect.gen(function* () {
+			store.flush();
+			instance.rerender(proot);
+			yield* Effect.sync(() => {
+				instance.unmount();
+			});
+		})))));
+	} };
 };
 
 //#endregion
 //#region src/services/ink-renderer.tsx
-const MAX_FPS = 12;
-const makeDefaultInkRenderer = () => ({ run: (store, stdio, isTTY) => Effect.sync(() => render(/* @__PURE__ */ jsx(ProgressRoot, {
-	store,
-	getTerminalColumns: () => isTTY ? stdio.stderr.columns : void 0
-}), {
-	stdout: stdio.stdout,
-	stderr: stdio.stderr,
-	patchConsole: true,
-	exitOnCtrlC: false,
-	debug: false,
-	maxFps: MAX_FPS
-})).pipe(Effect.flatMap((instance) => Effect.never.pipe(Effect.ensuring(Effect.gen(function* () {
-	store.flush();
-	yield* Effect.sleep("0 millis");
-	yield* Effect.sync(() => {
-		instance.unmount();
-	});
-}))))) });
 var InkRenderer = class InkRenderer extends Context.Tag("stromseng.dev/effective-progress/InkRenderer")() {
-	static Default = Layer.succeed(InkRenderer, InkRenderer.of(makeDefaultInkRenderer()));
+	static Default = Layer.succeed(InkRenderer, InkRenderer.of(makeRendererv2InkRendererService(defaultRendererv2Columns)));
 };
 
 //#endregion
@@ -1533,4 +1515,4 @@ const forEach = dual(3, (iterable, f, options) => provideProgress(Effect.gen(fun
 })));
 
 //#endregion
-export { Progress, ProgressStdio, ProgressTaskEventSchema, Task, TaskAddedEvent, TaskAdvancedEvent, TaskCompletedEvent, TaskCountDisplaySchema, TaskFailedEvent, TaskId, TaskRemovedEvent, TaskSnapshot, TaskStatusSchema, TaskUnitsSchema, TaskUpdatedEvent, all, decodeProgressTaskEvent, forEach, task };
+export { Progress, ProgressStdio, ProgressTaskEventSchema, Task, TaskAddedEvent, TaskAdvancedEvent, TaskCompletedEvent, TaskCountDisplaySchema, TaskFailedEvent, TaskId, TaskRemovedEvent, TaskSnapshot, TaskSnapshotSchema, TaskStatusSchema, TaskUnitsSchema, TaskUpdatedEvent, all, decodeProgressTaskEvent, forEach, task };