ripencli 0.3.3 → 0.3.4

package/dist/cli.js

@@ -3,12 +3,12 @@ import { Box, Text, render, useApp, useInput, useStdout } from "ink";
 import { createRequire } from "module";
 import { existsSync, mkdirSync, readFileSync, writeFileSync } from "fs";
 import { join } from "path";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { execa } from "execa";
 import { homedir } from "os";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { exec } from "child_process";
 import { ScrollView } from "ink-scroll-view";
+import { exec } from "child_process";
 //#region src/detector.ts
 function detectPackageManager(cwd) {
 	if (existsSync(join(cwd, "bun.lock"))) return "bun";
@@ -47,6 +47,64 @@ function getProjectInfo(cwd) {
 	};
 }
 //#endregion
+//#region src/lib/versions.ts
+/**
+* Semver version parsing, comparison, and range utilities.
+*
+* Centralises logic that was previously duplicated across registry.ts and fetcher.ts.
+*/
+/**
+* Parse a version string into [major, minor, patch].
+* Strips any non-numeric prefix ("v", "next@", "package@v", etc.)
+* and any pre-release suffix ("-beta.1", etc.).
+*/
+function parseVersion(v) {
+	return v.replace(/^[^0-9]*/, "").replace(/-.*$/, "").split(".").map(Number);
+}
+/**
+* Compare two parsed version arrays.
+* Returns negative if a < b, positive if a > b, 0 if equal.
+*/
+function compareVersions(a, b) {
+	const pa = parseVersion(a);
+	const pb = parseVersion(b);
+	for (let i = 0; i < 3; i++) {
+		const diff = (pa[i] ?? 0) - (pb[i] ?? 0);
+		if (diff !== 0) return diff;
+	}
+	return 0;
+}
+/**
+* Returns true when `latest` is a newer version than `current`.
+*
+* Pre-release suffixes are stripped for the base comparison.
+* When base versions are equal, a pre-release current is considered
+* older than a stable latest (e.g. "3.0.0-beta.8" < "3.0.0").
+*/
+function isNewerVersion(current, latest) {
+	const cmp = compareVersions(latest, current);
+	if (cmp > 0) return true;
+	if (cmp < 0) return false;
+	if (current.includes("-") && !latest.includes("-")) return true;
+	return false;
+}
+/**
+* Strip semver range prefixes to extract the base version and prefix.
+* e.g. "^9.3.0" → { version: "9.3.0", prefix: "^" }
+* Returns null for unparseable ranges (*, latest, git URLs, file: paths).
+*/
+function parseBaseVersion(range) {
+	let v = range.replace(/^workspace:/, "");
+	const prefixMatch = v.match(/^([~^>=<]+)/);
+	const prefix = prefixMatch ? prefixMatch[1] : "";
+	v = v.replace(/^[~^>=<]+/, "").trim();
+	if (/^\d+\.\d+\.\d+/.test(v)) return {
+		version: v,
+		prefix
+	};
+	return null;
+}
+//#endregion
 //#region src/registry.ts
 async function fetchVersions(packageName) {
 	try {
@@ -62,9 +120,8 @@ async function fetchVersions(packageName) {
 			date: times[v] ? new Date(times[v]).toISOString().split("T")[0] : "",
 			tag: tagByVersion[v]
 		})).sort((a, b) => {
-			const pa = a.version.replace(/-.*$/, "").split(".").map(Number);
-			const pb = b.version.replace(/-.*$/, "").split(".").map(Number);
-			for (let i = 0; i < 3; i++) if ((pb[i] ?? 0) !== (pa[i] ?? 0)) return (pb[i] ?? 0) - (pa[i] ?? 0);
+			const cmp = compareVersions(b.version, a.version);
+			if (cmp !== 0) return cmp;
 			const aHas = a.version.includes("-");
 			const bHas = b.version.includes("-");
 			if (aHas && !bHas) return 1;
@@ -79,27 +136,14 @@ async function fetchChangelog(packageName, fromVersion, toVersion) {
 	try {
 		const res = await fetch(`https://registry.npmjs.org/${encodeURIComponent(packageName)}/latest`);
 		if (!res.ok) return [];
-		const data = await res.json();
-		const match = (typeof data.repository === "string" ? data.repository : data.repository?.url ?? "").match(/github\.com[/:]([^/]+\/[^/]+)/);
-		if (!match) return [];
-		const repo = match[1].replace(/\.git$/, "");
+		const repo = extractGitHubRepo(await res.json());
+		if (!repo) return [];
 		const ghRes = await fetch(`https://api.github.com/repos/${repo}/releases?per_page=30`, { headers: { Accept: "application/vnd.github+json" } });
 		if (!ghRes.ok) return [];
 		const releases = await ghRes.json();
-		const parseVer = (v) => v.replace(/^[^0-9]*/, "").split(".").map(Number);
-		const cmpVer = (a, b) => {
-			for (let i = 0; i < 3; i++) {
-				const diff = (a[i] ?? 0) - (b[i] ?? 0);
-				if (diff !== 0) return diff;
-			}
-			return 0;
-		};
-		const from = parseVer(fromVersion);
-		const to = parseVer(toVersion);
 		const filtered = releases.filter((r) => {
 			if (r.draft || r.prerelease) return false;
-			const ver = parseVer(r.tag_name);
-			return cmpVer(ver, from) > 0 && cmpVer(ver, to) <= 0;
+			return compareVersions(r.tag_name, fromVersion) > 0 && compareVersions(r.tag_name, toVersion) <= 0;
 		}).map((r) => ({
 			version: r.tag_name,
 			body: r.body?.trim() ?? "No release notes.",
@@ -127,50 +171,27 @@ async function fetchLatestVersion(packageName) {
 		return null;
 	}
 }
-function isNewerVersion(current, latest) {
-	const baseA = current.replace(/-.*$/, "");
-	const baseB = latest.replace(/-.*$/, "");
-	const a = baseA.split(".").map(Number);
-	const b = baseB.split(".").map(Number);
-	for (let i = 0; i < 3; i++) {
-		if ((b[i] ?? 0) > (a[i] ?? 0)) return true;
-		if ((b[i] ?? 0) < (a[i] ?? 0)) return false;
-	}
-	const currentHasPrerelease = current.includes("-");
-	const latestHasPrerelease = latest.includes("-");
-	if (currentHasPrerelease && !latestHasPrerelease) return true;
-	return false;
-}
 async function fetchRepoUrl(packageName) {
 	try {
 		const res = await fetch(`https://registry.npmjs.org/${encodeURIComponent(packageName)}/latest`);
 		if (!res.ok) return "";
-		const data = await res.json();
-		const match = (typeof data.repository === "string" ? data.repository : data.repository?.url ?? "").match(/github\.com[/:]([^/]+\/[^/]+)/);
-		if (!match) return "";
-		return `https://github.com/${match[1].replace(/\.git$/, "")}`;
+		const repo = extractGitHubRepo(await res.json());
+		return repo ? `https://github.com/${repo}` : "";
 	} catch {
 		return "";
 	}
 }
-//#endregion
-//#region src/fetcher.ts
 /**
-* Strip semver range prefixes to extract the base version and prefix.
-* e.g. "^9.3.0" → { version: "9.3.0", prefix: "^" }
-* Returns null for unparseable ranges (*, latest, git URLs, file: paths).
+* Extract "owner/repo" from npm registry package data.
+* Handles both string and object repository fields.
 */
-function parseBaseVersion(range) {
-	let v = range.replace(/^workspace:/, "");
-	const prefixMatch = v.match(/^([~^>=<]+)/);
-	const prefix = prefixMatch ? prefixMatch[1] : "";
-	v = v.replace(/^[~^>=<]+/, "").trim();
-	if (/^\d+\.\d+\.\d+/.test(v)) return {
-		version: v,
-		prefix
-	};
-	return null;
+function extractGitHubRepo(data) {
+	const match = (typeof data.repository === "string" ? data.repository : data.repository?.url ?? "").match(/github\.com[/:]([^/]+\/[^/]+)/);
+	if (!match) return null;
+	return match[1].replace(/\.git$/, "");
 }
+//#endregion
+//#region src/fetcher.ts
 function readPackageJsonDeps(cwd) {
 	const raw = readFileSync(join(cwd, "package.json"), "utf-8");
 	const pkg = JSON.parse(raw);
@@ -576,7 +597,7 @@ function incrementFrequency(packageNames) {
 	} catch {}
 }
 //#endregion
-//#region src/ui/PackageList.tsx
+//#region src/ui/package-list/types.ts
 const TYPE_COLORS = {
 	dependencies: "cyan",
 	devDependencies: "magenta",
@@ -592,8 +613,8 @@ const GROUP_ORDER = [
 	"devDependencies",
 	"global"
 ];
-const CHROME_LINES = 8;
-const GROUP_CHROME = 5;
+//#endregion
+//#region src/ui/package-list/build-rows.ts
 function getScope(name) {
 	return name.match(/^(@[^/]+)\//)?.[1] ?? null;
 }
@@ -628,7 +649,8 @@ function buildDisplayRows(packages, groupByScope = false, groupScopes = [], grou
 			kind: "header",
 			groupType: type,
 			label,
-			packages: allPkgs
+			packages: allPkgs,
+			packageIndices: items.map((i) => i.index)
 		});
 		if (groupByScope && groupScopes.length > 0) {
 			const scopeMap = /* @__PURE__ */ new Map();
@@ -825,11 +847,13 @@ function groupCheckbox(packages) {
 	};
 }
 function computeMaxPerGroup(terminalRows, groupCount) {
-	const available = terminalRows - CHROME_LINES - groupCount * (GROUP_CHROME + 2) - 2;
+	const available = terminalRows - 8 - groupCount * 7 - 2;
 	const perGroup = Math.floor(available / groupCount);
 	return Math.max(3, perGroup);
 }
-function PackageList({ packages, onToggle, onToggleGroup, onToggleMany, onSelectVersion, onViewChangelog, onConfirm, onOpenSettings, groupByScope = false, groupScopes, groupsOnTop = false, frequencySort = false, frequency = {}, separateDevDeps = true, isActive = true }) {
+//#endregion
+//#region src/ui/package-list/PackageList.tsx
+function PackageList({ packages, onToggle, onToggleMany, onSelectVersion, onViewChangelog, onConfirm, onOpenSettings, groupByScope = false, groupScopes, groupsOnTop = false, frequencySort = false, frequency = {}, separateDevDeps = true, isActive = true }) {
 	const [focusedIndex, setFocusedIndex] = useState(0);
 	const allRows = useMemo(() => buildDisplayRows(packages, groupByScope, groupScopes, groupsOnTop, frequencySort, frequency, separateDevDeps), [
 		packages,
@@ -853,7 +877,8 @@ function PackageList({ packages, onToggle, onToggleGroup, onToggleMany, onSelect
 			setInitialized(true);
 		}
 	}, [allScopeKeys, initialized]);
-	const visibleRows = useMemo(() => filterCollapsed(allRows, collapsedScopes), [allRows, collapsedScopes]);
+	const effectiveCollapsed = !initialized && allScopeKeys.size > 0 ? allScopeKeys : collapsedScopes;
+	const visibleRows = useMemo(() => filterCollapsed(allRows, effectiveCollapsed), [allRows, effectiveCollapsed]);
 	const groups = useMemo(() => buildGroups(visibleRows), [visibleRows]);
 	const { stdout } = useStdout();
 	const terminalRows = stdout?.rows ?? 24;
@@ -872,6 +897,16 @@ function PackageList({ packages, onToggle, onToggleGroup, onToggleMany, onSelect
 		if (focusedIndex >= visibleRows.length) setFocusedIndex(Math.max(0, visibleRows.length - 1));
 	}, [visibleRows.length, focusedIndex]);
 	const toggleCollapse = (scopeKey) => {
+		if (!initialized && allScopeKeys.size > 0) {
+			setCollapsedScopes(() => {
+				const next = new Set(allScopeKeys);
+				if (next.has(scopeKey)) next.delete(scopeKey);
+				else next.add(scopeKey);
+				return next;
+			});
+			setInitialized(true);
+			return;
+		}
 		setCollapsedScopes((prev) => {
 			const next = new Set(prev);
 			if (next.has(scopeKey)) next.delete(scopeKey);
@@ -896,16 +931,16 @@ function PackageList({ packages, onToggle, onToggleGroup, onToggleMany, onSelect
 		if (!focused) return;
 		if (focused.kind === "scope-header") {
 			const scopeKey = `${focused.groupType}::${focused.scope}`;
-			if (key.leftArrow && !collapsedScopes.has(scopeKey)) {
+			if (key.leftArrow && !effectiveCollapsed.has(scopeKey)) {
 				toggleCollapse(scopeKey);
 				return;
 			}
-			if (key.rightArrow && collapsedScopes.has(scopeKey)) {
+			if (key.rightArrow && effectiveCollapsed.has(scopeKey)) {
 				toggleCollapse(scopeKey);
 				return;
 			}
 		}
-		if (input === " ") if (focused.kind === "header") onToggleGroup(focused.groupType);
+		if (input === " ") if (focused.kind === "header") onToggleMany(focused.packageIndices);
 		else if (focused.kind === "scope-header") onToggleMany(focused.packageIndices);
 		else onToggle(focused.packageIndex);
 		if (input === "v" && !key.ctrl && focused.kind === "package") onSelectVersion(focused.packageIndex);
@@ -987,199 +1022,13 @@ function PackageList({ packages, onToggle, onToggleGroup, onToggleMany, onSelect
 					})
 				})]
 			}),
-			groups.map((group) => {
-				const check = groupCheckbox(group.allPackages);
-				const headerFocused = focusedIndex === group.headerVisibleIndex;
-				const typeColor = TYPE_COLORS[group.type] ?? "white";
-				const offset = scrollOffsetsRef.current[group.type] ?? 0;
-				const visibleItems = group.items.slice(offset, offset + maxVisible);
-				const totalItems = group.items.length;
-				const needsScroll = totalItems > maxVisible;
-				const focusedLocalIndex = group.items.findIndex((item) => item.visibleIndex === focusedIndex);
-				return /* @__PURE__ */ jsxs(Box, {
-					flexDirection: "column",
-					marginBottom: 1,
-					children: [/* @__PURE__ */ jsxs(Box, {
-						gap: 1,
-						children: [
-							/* @__PURE__ */ jsx(Text, {
-								color: "greenBright",
-								children: headerFocused ? "❯" : " "
-							}),
-							/* @__PURE__ */ jsx(Text, {
-								color: check.color,
-								children: check.symbol
-							}),
-							/* @__PURE__ */ jsx(Text, {
-								bold: headerFocused,
-								color: typeColor,
-								children: group.label
-							}),
-							/* @__PURE__ */ jsxs(Text, {
-								color: "gray",
-								children: [
-									"(",
-									group.allPackages.length,
-									")"
-								]
-							}),
-							needsScroll && focusedLocalIndex >= 0 && /* @__PURE__ */ jsxs(Text, {
-								color: "gray",
-								children: [
-									focusedLocalIndex + 1,
-									"/",
-									totalItems
-								]
-							})
-						]
-					}), /* @__PURE__ */ jsxs(Box, {
-						flexDirection: "column",
-						borderStyle: "round",
-						borderColor: headerFocused ? typeColor : "gray",
-						paddingX: 1,
-						children: [
-							/* @__PURE__ */ jsxs(Box, {
-								gap: 2,
-								marginBottom: 0,
-								children: [
-									/* @__PURE__ */ jsx(Text, {
-										color: "gray",
-										children: "  "
-									}),
-									/* @__PURE__ */ jsx(Box, {
-										width: 28,
-										children: /* @__PURE__ */ jsx(Text, {
-											color: "gray",
-											children: "package"
-										})
-									}),
-									/* @__PURE__ */ jsx(Box, {
-										width: 14,
-										children: /* @__PURE__ */ jsx(Text, {
-											color: "gray",
-											children: "current"
-										})
-									}),
-									/* @__PURE__ */ jsx(Box, {
-										width: 14,
-										children: /* @__PURE__ */ jsx(Text, {
-											color: "gray",
-											children: "target"
-										})
-									}),
-									/* @__PURE__ */ jsx(Box, {
-										width: 14,
-										children: /* @__PURE__ */ jsx(Text, {
-											color: "gray",
-											children: "latest"
-										})
-									})
-								]
-							}),
-							needsScroll && /* @__PURE__ */ jsx(Text, {
-								color: "gray",
-								children: offset > 0 ? `  ↑ ${offset} more above` : " "
-							}),
-							visibleItems.map((item) => {
-								const { row } = item;
-								const isFocused = item.visibleIndex === focusedIndex;
-								if (row.kind === "scope-header") {
-									const scopeKey = `${row.groupType}::${row.scope}`;
-									const isCollapsed = collapsedScopes.has(scopeKey);
-									const scopeCheck = groupCheckbox(row.packages);
-									return /* @__PURE__ */ jsxs(Box, {
-										gap: 2,
-										children: [
-											/* @__PURE__ */ jsx(Text, {
-												color: "greenBright",
-												children: isFocused ? "❯" : " "
-											}),
-											/* @__PURE__ */ jsx(Text, {
-												color: "gray",
-												children: isCollapsed ? "▶" : "▼"
-											}),
-											/* @__PURE__ */ jsx(Text, {
-												color: scopeCheck.color,
-												children: scopeCheck.symbol
-											}),
-											/* @__PURE__ */ jsxs(Text, {
-												bold: isFocused,
-												color: isFocused ? "whiteBright" : "white",
-												children: [
-													row.scope,
-													" (",
-													row.packages.length,
-													")"
-												]
-											})
-										]
-									}, scopeKey);
-								}
-								if (row.kind !== "package") return null;
-								const pkg = row.pkg;
-								const isMajorBump = parseInt(pkg.latest) > parseInt(pkg.current);
-								return /* @__PURE__ */ jsxs(Box, {
-									gap: 2,
-									children: [
-										/* @__PURE__ */ jsx(Text, {
-											color: "greenBright",
-											children: isFocused ? "❯" : " "
-										}),
-										row.indented && /* @__PURE__ */ jsx(Text, { children: " " }),
-										/* @__PURE__ */ jsx(Text, {
-											color: pkg.selected ? "greenBright" : "gray",
-											children: pkg.selected ? "◉" : "○"
-										}),
-										/* @__PURE__ */ jsx(Box, {
-											width: row.indented ? 24 : 26,
-											children: /* @__PURE__ */ jsx(Text, {
-												bold: isFocused,
-												color: isFocused ? "whiteBright" : "white",
-												children: (() => {
-													const maxLen = row.indented ? 24 : 26;
-													return pkg.name.length > maxLen ? pkg.name.slice(0, maxLen - 2) + "…" : pkg.name;
-												})()
-											})
-										}),
-										/* @__PURE__ */ jsx(Box, {
-											width: 14,
-											children: /* @__PURE__ */ jsx(Text, {
-												color: "red",
-												children: pkg.current
-											})
-										}),
-										/* @__PURE__ */ jsx(Box, {
-											width: 14,
-											children: /* @__PURE__ */ jsx(Text, {
-												color: "greenBright",
-												children: pkg.targetVersion ?? pkg.latest
-											})
-										}),
-										/* @__PURE__ */ jsx(Box, {
-											width: 14,
-											children: /* @__PURE__ */ jsx(Text, {
-												color: "gray",
-												children: pkg.latest
-											})
-										}),
-										/* @__PURE__ */ jsx(Box, {
-											width: 9,
-											children: isMajorBump ? /* @__PURE__ */ jsx(Text, {
-												color: "yellow",
-												children: "⚠ major"
-											}) : /* @__PURE__ */ jsx(Text, { children: " " })
-										})
-									]
-								}, pkg.name);
-							}),
-							needsScroll && /* @__PURE__ */ jsx(Text, {
-								color: "gray",
-								children: offset + maxVisible < totalItems ? `  ↓ ${totalItems - offset - maxVisible} more below` : " "
-							})
-						]
-					})]
-				}, group.type);
-			}),
+			groups.map((group) => /* @__PURE__ */ jsx(PackageGroupBox, {
+				group,
+				focusedIndex,
+				collapsedScopes,
+				scrollOffset: scrollOffsetsRef.current[group.type] ?? 0,
+				maxVisible
+			}, group.type)),
 			/* @__PURE__ */ jsx(Box, {
 				flexDirection: "column",
 				children: /* @__PURE__ */ jsxs(Box, {
@@ -1208,6 +1057,198 @@ function PackageList({ packages, onToggle, onToggleGroup, onToggleMany, onSelect
 		]
 	});
 }
+function PackageGroupBox({ group, focusedIndex, collapsedScopes, scrollOffset, maxVisible }) {
+	const check = groupCheckbox(group.allPackages);
+	const headerFocused = focusedIndex === group.headerVisibleIndex;
+	const typeColor = TYPE_COLORS[group.type] ?? "white";
+	const visibleItems = group.items.slice(scrollOffset, scrollOffset + maxVisible);
+	const totalItems = group.items.length;
+	const needsScroll = totalItems > maxVisible;
+	const focusedLocalIndex = group.items.findIndex((item) => item.visibleIndex === focusedIndex);
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		marginBottom: 1,
+		children: [/* @__PURE__ */ jsxs(Box, {
+			gap: 1,
+			children: [
+				/* @__PURE__ */ jsx(Text, {
+					color: "greenBright",
+					children: headerFocused ? "❯" : " "
+				}),
+				/* @__PURE__ */ jsx(Text, {
+					color: check.color,
+					children: check.symbol
+				}),
+				/* @__PURE__ */ jsx(Text, {
+					bold: headerFocused,
+					color: typeColor,
+					children: group.label
+				}),
+				/* @__PURE__ */ jsxs(Text, {
+					color: "gray",
+					children: [
+						"(",
+						group.allPackages.length,
+						")"
+					]
+				}),
+				needsScroll && focusedLocalIndex >= 0 && /* @__PURE__ */ jsxs(Text, {
+					color: "gray",
+					children: [
+						focusedLocalIndex + 1,
+						"/",
+						totalItems
+					]
+				})
+			]
+		}), /* @__PURE__ */ jsxs(Box, {
+			flexDirection: "column",
+			borderStyle: "round",
+			borderColor: headerFocused ? typeColor : "gray",
+			paddingX: 1,
+			children: [
+				/* @__PURE__ */ jsxs(Box, {
+					gap: 2,
+					marginBottom: 0,
+					children: [
+						/* @__PURE__ */ jsx(Text, {
+							color: "gray",
+							children: "  "
+						}),
+						/* @__PURE__ */ jsx(Box, {
+							width: 28,
+							children: /* @__PURE__ */ jsx(Text, {
+								color: "gray",
+								children: "package"
+							})
+						}),
+						/* @__PURE__ */ jsx(Box, {
+							width: 14,
+							children: /* @__PURE__ */ jsx(Text, {
+								color: "gray",
+								children: "current"
+							})
+						}),
+						/* @__PURE__ */ jsx(Box, {
+							width: 14,
+							children: /* @__PURE__ */ jsx(Text, {
+								color: "gray",
+								children: "target"
+							})
+						}),
+						/* @__PURE__ */ jsx(Box, {
+							width: 14,
+							children: /* @__PURE__ */ jsx(Text, {
+								color: "gray",
+								children: "latest"
+							})
+						})
+					]
+				}),
+				needsScroll && /* @__PURE__ */ jsx(Text, {
+					color: "gray",
+					children: scrollOffset > 0 ? `  ↑ ${scrollOffset} more above` : " "
+				}),
+				visibleItems.map((item) => {
+					const { row } = item;
+					const isFocused = item.visibleIndex === focusedIndex;
+					if (row.kind === "scope-header") {
+						const scopeKey = `${row.groupType}::${row.scope}`;
+						const isCollapsed = collapsedScopes.has(scopeKey);
+						const scopeCheck = groupCheckbox(row.packages);
+						return /* @__PURE__ */ jsxs(Box, {
+							gap: 2,
+							children: [
+								/* @__PURE__ */ jsx(Text, {
+									color: "greenBright",
+									children: isFocused ? "❯" : " "
+								}),
+								/* @__PURE__ */ jsx(Text, {
+									color: "gray",
+									children: isCollapsed ? "▶" : "▼"
+								}),
+								/* @__PURE__ */ jsx(Text, {
+									color: scopeCheck.color,
+									children: scopeCheck.symbol
+								}),
+								/* @__PURE__ */ jsxs(Text, {
+									bold: isFocused,
+									color: isFocused ? "whiteBright" : "white",
+									children: [
+										row.scope,
+										" (",
+										row.packages.length,
+										")"
+									]
+								})
+							]
+						}, scopeKey);
+					}
+					if (row.kind !== "package") return null;
+					const pkg = row.pkg;
+					const isMajorBump = parseInt(pkg.latest) > parseInt(pkg.current);
+					return /* @__PURE__ */ jsxs(Box, {
+						gap: 2,
+						children: [
+							/* @__PURE__ */ jsx(Text, {
+								color: "greenBright",
+								children: isFocused ? "❯" : " "
+							}),
+							row.indented && /* @__PURE__ */ jsx(Text, { children: " " }),
+							/* @__PURE__ */ jsx(Text, {
+								color: pkg.selected ? "greenBright" : "gray",
+								children: pkg.selected ? "◉" : "○"
+							}),
+							/* @__PURE__ */ jsx(Box, {
+								width: row.indented ? 24 : 26,
+								children: /* @__PURE__ */ jsx(Text, {
+									bold: isFocused,
+									color: isFocused ? "whiteBright" : "white",
+									children: (() => {
+										const maxLen = row.indented ? 24 : 26;
+										return pkg.name.length > maxLen ? pkg.name.slice(0, maxLen - 2) + "…" : pkg.name;
+									})()
+								})
+							}),
+							/* @__PURE__ */ jsx(Box, {
+								width: 14,
+								children: /* @__PURE__ */ jsx(Text, {
+									color: "red",
+									children: pkg.current
+								})
+							}),
+							/* @__PURE__ */ jsx(Box, {
+								width: 14,
+								children: /* @__PURE__ */ jsx(Text, {
+									color: "greenBright",
+									children: pkg.targetVersion ?? pkg.latest
+								})
+							}),
+							/* @__PURE__ */ jsx(Box, {
+								width: 14,
+								children: /* @__PURE__ */ jsx(Text, {
+									color: "gray",
+									children: pkg.latest
+								})
+							}),
+							/* @__PURE__ */ jsx(Box, {
+								width: 9,
+								children: isMajorBump ? /* @__PURE__ */ jsx(Text, {
+									color: "yellow",
+									children: "⚠ major"
+								}) : /* @__PURE__ */ jsx(Text, { children: " " })
+							})
+						]
+					}, pkg.name);
+				}),
+				needsScroll && /* @__PURE__ */ jsx(Text, {
+					color: "gray",
+					children: scrollOffset + maxVisible < totalItems ? `  ↓ ${totalItems - scrollOffset - maxVisible} more below` : " "
+				})
+			]
+		})]
+	}, group.type);
+}
 //#endregion
 //#region src/ui/VersionPicker.tsx
 function VersionPicker({ pkg, onSelect, onCancel }) {
@@ -1371,6 +1412,12 @@ function VersionPicker({ pkg, onSelect, onCancel }) {
 	});
 }
 //#endregion
+//#region src/lib/utils.ts
+/** Open a URL in the user's default browser (cross-platform). */
+function openInBrowser(url) {
+	exec(process.platform === "win32" ? `start "" "${url}"` : process.platform === "darwin" ? `open "${url}"` : `xdg-open "${url}"`);
+}
+//#endregion
 //#region src/ui/MarkdownLine.tsx
 function parseInline(raw) {
 	const segments = [];
@@ -1439,9 +1486,6 @@ function MarkdownLine({ line, baseColor = "white", baseDim = false }) {
 }
 //#endregion
 //#region src/ui/ChangelogPanel.tsx
-function openInBrowser(url) {
-	exec(process.platform === "win32" ? `start "" "${url}"` : process.platform === "darwin" ? `open "${url}"` : `xdg-open "${url}"`);
-}
 function ChangelogPanel({ pkg, onClose }) {
 	const [entries, setEntries] = useState([]);
 	const [repoUrl, setRepoUrl] = useState("");
@@ -1472,6 +1516,14 @@ function ChangelogPanel({ pkg, onClose }) {
 		setTimeout(() => setOpened(false), 2e3);
 	};
 	const currentEntry = entries[activeEntry];
+	const clampedScrollBy = (delta) => {
+		const sv = scrollRef.current;
+		if (!sv) return;
+		const maxOffset = sv.getBottomOffset();
+		const current = sv.getScrollOffset();
+		const target = Math.max(0, Math.min(maxOffset, current + delta));
+		sv.scrollTo(target);
+	};
 	useInput((input, key) => {
 		if (key.escape || input === "q" || input === "c") {
 			onClose();
@@ -1487,16 +1539,10 @@ function ChangelogPanel({ pkg, onClose }) {
 			setActiveEntry((prev) => Math.min(entries.length - 1, prev + 1));
 			return;
 		}
-		if (key.upArrow) scrollRef.current?.scrollBy(-1);
-		if (key.downArrow) scrollRef.current?.scrollBy(1);
-		if (key.pageUp) {
-			const h = scrollRef.current?.getViewportHeight() ?? 10;
-			scrollRef.current?.scrollBy(-h);
-		}
-		if (key.pageDown) {
-			const h = scrollRef.current?.getViewportHeight() ?? 10;
-			scrollRef.current?.scrollBy(h);
-		}
+		if (key.upArrow) clampedScrollBy(-1);
+		if (key.downArrow) clampedScrollBy(1);
+		if (key.pageUp) clampedScrollBy(-(scrollRef.current?.getViewportHeight() ?? 10));
+		if (key.pageDown) clampedScrollBy(scrollRef.current?.getViewportHeight() ?? 10);
 		if (input === "r" && releasesPageUrl) triggerOpen(releasesPageUrl);
 		if (input === "o" && currentEntry?.url) triggerOpen(currentEntry.url);
 	});
@@ -1609,7 +1655,7 @@ function ChangelogPanel({ pkg, onClose }) {
 					children: " Check the package repository manually."
 				})]
 			}) : currentEntry ? /* @__PURE__ */ jsx(Box, {
-				height: 18,
+				height: Math.min(currentEntry.body.split("\n").length, 18),
 				flexDirection: "column",
 				children: /* @__PURE__ */ jsx(ScrollView, {
 					ref: scrollRef,
@@ -1763,6 +1809,46 @@ function UpdateResults({ results, onDone }) {
 	});
 }
 //#endregion
+//#region src/ui/SettingsToggle.tsx
+function SettingsToggle({ label, description, checked, focused, disabled = false }) {
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		marginBottom: 1,
+		children: [/* @__PURE__ */ jsxs(Box, {
+			gap: 1,
+			children: [
+				/* @__PURE__ */ jsx(Text, {
+					dimColor: disabled,
+					color: "greenBright",
+					children: focused ? ">" : " "
+				}),
+				/* @__PURE__ */ jsxs(Text, {
+					dimColor: disabled,
+					color: checked && !disabled ? "greenBright" : "gray",
+					children: [
+						"[",
+						checked ? "x" : " ",
+						"]"
+					]
+				}),
+				/* @__PURE__ */ jsx(Text, {
+					dimColor: disabled,
+					bold: focused,
+					color: disabled ? "gray" : focused ? "whiteBright" : "white",
+					children: label
+				})
+			]
+		}), /* @__PURE__ */ jsx(Box, {
+			marginLeft: 6,
+			children: /* @__PURE__ */ jsx(Text, {
+				dimColor: disabled,
+				color: "gray",
+				children: description
+			})
+		})]
+	});
+}
+//#endregion
 //#region src/ui/Settings.tsx
 function Settings({ config, onConfigChange, onClose }) {
 	const [inputMode, setInputMode] = useState(false);
@@ -1851,10 +1937,6 @@ function Settings({ config, onConfigChange, onClose }) {
 		}
 		if (key.escape || input === "s") onClose();
 	});
-	const freqToggleFocused = currentRow?.type === "toggle-frequency";
-	const separateDevFocused = currentRow?.type === "toggle-separate-dev";
-	const groupToggleFocused = currentRow?.type === "toggle-group";
-	const groupsTopFocused = currentRow?.type === "toggle-groups-top";
 	const listHeaderFocused = currentRow?.type === "list-header";
 	return /* @__PURE__ */ jsxs(Box, {
 		flexDirection: "column",
@@ -1875,137 +1957,30 @@ function Settings({ config, onConfigChange, onClose }) {
 					]
 				})
 			}),
-			/* @__PURE__ */ jsxs(Box, {
-				flexDirection: "column",
-				marginBottom: 1,
-				children: [/* @__PURE__ */ jsxs(Box, {
-					gap: 1,
-					children: [
-						/* @__PURE__ */ jsx(Text, {
-							color: "greenBright",
-							children: freqToggleFocused ? ">" : " "
-						}),
-						/* @__PURE__ */ jsxs(Text, {
-							color: config.frequencySort ? "greenBright" : "gray",
-							children: [
-								"[",
-								config.frequencySort ? "x" : " ",
-								"]"
-							]
-						}),
-						/* @__PURE__ */ jsx(Text, {
-							bold: freqToggleFocused,
-							color: freqToggleFocused ? "whiteBright" : "white",
-							children: "Sort by update frequency"
-						})
-					]
-				}), /* @__PURE__ */ jsx(Box, {
-					marginLeft: 6,
-					children: /* @__PURE__ */ jsx(Text, {
-						color: "gray",
-						children: "Packages you update often appear at the top"
-					})
-				})]
+			/* @__PURE__ */ jsx(SettingsToggle, {
+				label: "Sort by update frequency",
+				description: "Packages you update often appear at the top",
+				checked: config.frequencySort,
+				focused: currentRow?.type === "toggle-frequency"
 			}),
-			/* @__PURE__ */ jsxs(Box, {
-				flexDirection: "column",
-				marginBottom: 1,
-				children: [/* @__PURE__ */ jsxs(Box, {
-					gap: 1,
-					children: [
-						/* @__PURE__ */ jsx(Text, {
-							color: "greenBright",
-							children: separateDevFocused ? ">" : " "
-						}),
-						/* @__PURE__ */ jsxs(Text, {
-							color: config.separateDevDeps ? "greenBright" : "gray",
-							children: [
-								"[",
-								config.separateDevDeps ? "x" : " ",
-								"]"
-							]
-						}),
-						/* @__PURE__ */ jsx(Text, {
-							bold: separateDevFocused,
-							color: separateDevFocused ? "whiteBright" : "white",
-							children: "Separate dev dependencies"
-						})
-					]
-				}), /* @__PURE__ */ jsx(Box, {
-					marginLeft: 6,
-					children: /* @__PURE__ */ jsx(Text, {
-						color: "gray",
-						children: "Show dependencies and devDependencies in separate groups"
-					})
-				})]
+			/* @__PURE__ */ jsx(SettingsToggle, {
+				label: "Separate dev dependencies",
+				description: "Show dependencies and devDependencies in separate groups",
+				checked: config.separateDevDeps,
+				focused: currentRow?.type === "toggle-separate-dev"
 			}),
-			/* @__PURE__ */ jsxs(Box, {
-				flexDirection: "column",
-				marginBottom: 1,
-				children: [/* @__PURE__ */ jsxs(Box, {
-					gap: 1,
-					children: [
-						/* @__PURE__ */ jsx(Text, {
-							color: "greenBright",
-							children: groupToggleFocused ? ">" : " "
-						}),
-						/* @__PURE__ */ jsxs(Text, {
-							color: config.groupByScope ? "greenBright" : "gray",
-							children: [
-								"[",
-								config.groupByScope ? "x" : " ",
-								"]"
-							]
-						}),
-						/* @__PURE__ */ jsx(Text, {
-							bold: groupToggleFocused,
-							color: groupToggleFocused ? "whiteBright" : "white",
-							children: "Enable scope grouping"
-						})
-					]
-				}), /* @__PURE__ */ jsx(Box, {
-					marginLeft: 6,
-					children: /* @__PURE__ */ jsx(Text, {
-						color: "gray",
-						children: "Group scoped packages listed below under their scope prefix"
-					})
-				})]
+			/* @__PURE__ */ jsx(SettingsToggle, {
+				label: "Enable scope grouping",
+				description: "Group scoped packages listed below under their scope prefix",
+				checked: config.groupByScope,
+				focused: currentRow?.type === "toggle-group"
 			}),
-			/* @__PURE__ */ jsxs(Box, {
-				flexDirection: "column",
-				marginBottom: 1,
-				children: [/* @__PURE__ */ jsxs(Box, {
-					gap: 1,
-					children: [
-						/* @__PURE__ */ jsx(Text, {
-							dimColor: !config.groupByScope,
-							color: "greenBright",
-							children: groupsTopFocused ? ">" : " "
-						}),
-						/* @__PURE__ */ jsxs(Text, {
-							dimColor: !config.groupByScope,
-							color: config.groupsOnTop && config.groupByScope ? "greenBright" : "gray",
-							children: [
-								"[",
-								config.groupsOnTop ? "x" : " ",
-								"]"
-							]
-						}),
-						/* @__PURE__ */ jsx(Text, {
-							dimColor: !config.groupByScope,
-							bold: groupsTopFocused,
-							color: !config.groupByScope ? "gray" : groupsTopFocused ? "whiteBright" : "white",
-							children: "Show grouped scopes on top"
-						})
-					]
-				}), /* @__PURE__ */ jsx(Box, {
-					marginLeft: 6,
-					children: /* @__PURE__ */ jsx(Text, {
-						dimColor: !config.groupByScope,
-						color: "gray",
-						children: "Grouped scope packages appear before ungrouped ones"
-					})
-				})]
+			/* @__PURE__ */ jsx(SettingsToggle, {
+				label: "Show grouped scopes on top",
+				description: "Grouped scope packages appear before ungrouped ones",
+				checked: config.groupsOnTop,
+				focused: currentRow?.type === "toggle-groups-top",
+				disabled: !config.groupByScope
 			}),
 			/* @__PURE__ */ jsxs(Box, {
 				flexDirection: "column",
@@ -2197,78 +2172,213 @@ function SelfUpdatePrompt({ currentVersion, latestVersion, updating, error, onUp
 	});
 }
 //#endregion
-//#region src/ui/App.tsx
-function App({ project, global, version, installManager }) {
-	const { exit } = useApp();
-	useInput((_input, key) => {
-		if (key.ctrl && _input === "c") setScreen("cancelled");
+//#region src/ui/TerminalOutputBox.tsx
+function TerminalOutputBox({ message, command, outputLines, maxLines }) {
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		padding: 1,
+		children: [
+			/* @__PURE__ */ jsxs(Text, {
+				color: "greenBright",
+				bold: true,
+				children: [" ", "ripen"]
+			}),
+			/* @__PURE__ */ jsx(Box, {
+				marginTop: 1,
+				children: /* @__PURE__ */ jsx(Text, {
+					color: "gray",
+					children: message
+				})
+			}),
+			/* @__PURE__ */ jsxs(Box, {
+				flexDirection: "column",
+				marginTop: 1,
+				borderStyle: "round",
+				borderColor: "gray",
+				paddingX: 1,
+				width: 64,
+				height: maxLines + 3,
+				overflow: "hidden",
+				children: [command !== "" && /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Text, {
+					color: "gray",
+					children: "$ "
+				}), /* @__PURE__ */ jsx(Text, {
+					color: "gray",
+					children: command
+				})] }), outputLines.map((line, i) => /* @__PURE__ */ jsx(Text, {
+					color: line.includes("WARN") || line.includes("ERR") ? "yellow" : "gray",
+					wrap: "truncate",
+					children: line
+				}, i))]
+			})
+		]
 	});
-	const [screen, setScreen] = useState("self-update-check");
+}
+//#endregion
+//#region src/ui/hooks/use-self-update.ts
+function useSelfUpdate(currentVersion, installManager) {
 	const [latestVersion, setLatestVersion] = useState(null);
-	const [selfUpdateError, setSelfUpdateError] = useState(null);
 	const [selfUpdating, setSelfUpdating] = useState(false);
-	const [config, setConfig] = useState(() => loadConfig());
-	const [frequency, setFrequency] = useState(() => loadFrequency());
-	const [packages, setPackages] = useState([]);
-	const [activeIndex, setActiveIndex] = useState(0);
-	const [results, setResults] = useState([]);
-	const [errorMsg, setErrorMsg] = useState("");
-	const [loadingMsg, setLoadingMsg] = useState("Checking for outdated packages…");
-	const MAX_TERMINAL_LINES = 3;
-	const [outputLines, setOutputLines] = useState([]);
-	const [terminalCmd, setTerminalCmd] = useState(global ? "Checking all package managers…" : "Checking npm registry…");
+	const [selfUpdateError, setSelfUpdateError] = useState(null);
+	const [checkComplete, setCheckComplete] = useState(false);
+	const [hasUpdate, setHasUpdate] = useState(false);
 	useEffect(() => {
 		let cancelled = false;
 		fetchLatestVersion("ripencli").then((latest) => {
 			if (cancelled) return;
-			if (latest && isNewerVersion(version, latest)) {
+			if (latest && isNewerVersion(currentVersion, latest)) {
 				setLatestVersion(latest);
-				setScreen("self-update");
-			} else setScreen("loading");
+				setHasUpdate(true);
+			}
+			setCheckComplete(true);
 		});
 		return () => {
 			cancelled = true;
 		};
 	}, []);
+	const performUpdate = async () => {
+		setSelfUpdating(true);
+		try {
+			await execa(installManager, installManager === "yarn" ? [
+				"global",
+				"add",
+				`ripencli@${latestVersion}`
+			] : [
+				"add",
+				"--global",
+				`ripencli@${latestVersion}`
+			]);
+			setSelfUpdating(false);
+			return true;
+		} catch (err) {
+			setSelfUpdateError(err.message ?? "Unknown error");
+			setSelfUpdating(false);
+			return false;
+		}
+	};
+	return {
+		latestVersion,
+		selfUpdating,
+		selfUpdateError,
+		checkComplete,
+		hasUpdate,
+		performUpdate
+	};
+}
+//#endregion
+//#region src/ui/hooks/use-packages.ts
+function usePackages() {
+	const [packages, setPackages] = useState([]);
+	return {
+		packages,
+		setPackages,
+		toggleOne: useCallback((index) => {
+			setPackages((prev) => prev.map((p, i) => i === index ? {
+				...p,
+				selected: !p.selected
+			} : p));
+		}, []),
+		toggleMany: useCallback((indices) => {
+			setPackages((prev) => {
+				const allSelected = indices.every((i) => prev[i]?.selected);
+				return prev.map((p, i) => indices.includes(i) ? {
+					...p,
+					selected: !allSelected
+				} : p);
+			});
+		}, []),
+		chooseVersion: useCallback((activeIndex, version) => {
+			setPackages((prev) => prev.map((p, i) => i === activeIndex ? {
+				...p,
+				targetVersion: version,
+				selected: true
+			} : p));
+		}, [])
+	};
+}
+//#endregion
+//#region src/ui/hooks/use-terminal-output.ts
+const DEFAULT_MAX_LINES = 3;
+function useTerminalOutput(maxLines = DEFAULT_MAX_LINES) {
+	const [outputLines, setOutputLines] = useState([]);
+	const [terminalCmd, setTerminalCmd] = useState("");
+	const [loadingMsg, setLoadingMsg] = useState("");
+	return {
+		outputLines,
+		terminalCmd,
+		loadingMsg,
+		setTerminalCmd,
+		setLoadingMsg,
+		onLine: useCallback((line) => {
+			setOutputLines((prev) => [...prev.slice(-(maxLines - 1)), line]);
+		}, [maxLines]),
+		reset: useCallback(() => {
+			setOutputLines([]);
+			setTerminalCmd("");
+			setLoadingMsg("");
+		}, []),
+		maxLines
+	};
+}
+//#endregion
+//#region src/ui/hooks/use-exit-on-screen.ts
+/**
+* Exit the Ink app after a delay when the screen matches one of the target screens.
+*/
+function useExitOnScreen(screen, targetScreens, exit, options) {
+	const { delay = 300, beforeExit } = options ?? {};
 	useEffect(() => {
-		if (screen !== "self-update-done") return;
-		const timer = setTimeout(() => {
-			exit();
-			process.exit(0);
-		}, 300);
-		return () => clearTimeout(timer);
-	}, [screen]);
-	useEffect(() => {
-		if (screen !== "empty") return;
+		if (!targetScreens.includes(screen)) return;
 		const timer = setTimeout(() => {
 			exit();
+			beforeExit?.();
 			process.exit(0);
-		}, 300);
+		}, delay);
 		return () => clearTimeout(timer);
 	}, [screen]);
+}
+//#endregion
+//#region src/ui/App.tsx
+function App({ project, global, version, installManager }) {
+	const { exit } = useApp();
+	const [screen, setScreen] = useState("self-update-check");
+	const [config, setConfig] = useState(() => loadConfig());
+	const [frequency, setFrequency] = useState(() => loadFrequency());
+	const [activeIndex, setActiveIndex] = useState(0);
+	const [errorMsg, setErrorMsg] = useState("");
+	const selfUpdate = useSelfUpdate(version, installManager);
+	const { packages, setPackages, toggleOne, toggleMany, chooseVersion } = usePackages();
+	const terminal = useTerminalOutput();
+	useInput((_input, key) => {
+		if (key.ctrl && _input === "c") setScreen("cancelled");
+	});
+	useExitOnScreen(screen, ["self-update-done", "empty"], exit);
+	useExitOnScreen(screen, ["cancelled"], exit, {
+		delay: 200,
+		beforeExit: () => console.log("  \x1B[32mCancelled.\x1B[0m\n")
+	});
 	useEffect(() => {
-		if (screen !== "cancelled") return;
-		const timer = setTimeout(() => {
-			exit();
-			console.log("  \x1B[32mCancelled.\x1B[0m\n");
-			process.exit(0);
-		}, 200);
-		return () => clearTimeout(timer);
-	}, [screen]);
+		if (!selfUpdate.checkComplete) return;
+		if (screen !== "self-update-check") return;
+		setScreen(selfUpdate.hasUpdate ? "self-update" : "loading");
+	}, [selfUpdate.checkComplete]);
+	const handleSelfUpdate = async () => {
+		if (await selfUpdate.performUpdate()) setScreen("self-update-done");
+		else setTimeout(() => setScreen("loading"), 2e3);
+	};
 	const [fetchStarted, setFetchStarted] = useState(false);
 	useEffect(() => {
 		if (screen !== "loading" || fetchStarted) return;
 		setFetchStarted(true);
-		const onLine = (line) => {
-			setOutputLines((prev) => [...prev.slice(-(MAX_TERMINAL_LINES - 1)), line]);
-		};
-		(global ? getAllGlobalOutdated(project.cwd, onLine) : getOutdatedPackages(project.manager, project.cwd, false, onLine)).then((result) => {
+		terminal.setLoadingMsg("Checking for outdated packages…");
+		terminal.setTerminalCmd(global ? "Checking all package managers…" : "Checking npm registry…");
+		(global ? getAllGlobalOutdated(project.cwd, terminal.onLine) : getOutdatedPackages(project.manager, project.cwd, false, terminal.onLine)).then((result) => {
 			if (!result.ok) {
 				setErrorMsg(result.error);
 				setScreen("error");
 				return;
 			}
-			setOutputLines([]);
+			terminal.reset();
 			if (result.packages.length === 0) setScreen("empty");
 			else {
 				setPackages(result.packages);
@@ -2276,81 +2386,18 @@ function App({ project, global, version, installManager }) {
 			}
 		});
 	}, [screen]);
-	const handleToggle = (index) => {
-		setPackages((prev) => prev.map((p, i) => i === index ? {
-			...p,
-			selected: !p.selected
-		} : p));
-	};
-	const handleToggleGroup = (groupType) => {
-		setPackages((prev) => {
-			const allSelected = prev.filter((p) => p.type === groupType).every((p) => p.selected);
-			return prev.map((p) => p.type === groupType ? {
-				...p,
-				selected: !allSelected
-			} : p);
-		});
-	};
-	const handleToggleMany = (indices) => {
-		setPackages((prev) => {
-			const allSelected = indices.every((i) => prev[i]?.selected);
-			return prev.map((p, i) => indices.includes(i) ? {
-				...p,
-				selected: !allSelected
-			} : p);
-		});
-	};
 	const handleConfigChange = (newConfig) => {
 		setConfig(newConfig);
 		saveConfig(newConfig);
 	};
-	const handleSelectVersion = (index) => {
-		setActiveIndex(index);
-		setScreen("version-picker");
-	};
-	const handleViewChangelog = (index) => {
-		setActiveIndex(index);
-		setScreen("changelog");
-	};
-	const handleVersionChosen = (version) => {
-		setPackages((prev) => prev.map((p, i) => i === activeIndex ? {
-			...p,
-			targetVersion: version,
-			selected: true
-		} : p));
-		setScreen("list");
-	};
-	const handleSelfUpdate = async () => {
-		setSelfUpdating(true);
-		try {
-			await execa(installManager, installManager === "yarn" ? [
-				"global",
-				"add",
-				`ripencli@${latestVersion}`
-			] : [
-				"add",
-				"--global",
-				`ripencli@${latestVersion}`
-			]);
-			setSelfUpdating(false);
-			setScreen("self-update-done");
-		} catch (err) {
-			setSelfUpdateError(err.message ?? "Unknown error");
-			setSelfUpdating(false);
-			setTimeout(() => setScreen("loading"), 2e3);
-		}
-	};
+	const [results, setResults] = useState([]);
 	const handleConfirm = async () => {
 		const selected = packages.filter((p) => p.selected);
 		if (selected.length === 0) return;
-		setLoadingMsg(`Updating ${selected.length} package${selected.length > 1 ? "s" : ""}…`);
-		setTerminalCmd("");
-		setOutputLines([]);
+		terminal.setLoadingMsg(`Updating ${selected.length} package${selected.length > 1 ? "s" : ""}…`);
+		terminal.setTerminalCmd("");
 		setScreen("updating");
-		const onLine = (line) => {
-			setOutputLines((prev) => [...prev.slice(-(MAX_TERMINAL_LINES - 1)), line]);
-		};
-		const res = await updatePackages(project.manager, selected, project.cwd, global, onLine);
+		const res = await updatePackages(project.manager, selected, project.cwd, global, terminal.onLine);
 		setResults(res);
 		setScreen("results");
 		const successNames = res.filter((r) => r.success).map((r) => r.name);
@@ -2376,9 +2423,9 @@ function App({ project, global, version, installManager }) {
 	});
 	if (screen === "self-update") return /* @__PURE__ */ jsx(SelfUpdatePrompt, {
 		currentVersion: version,
-		latestVersion,
-		updating: selfUpdating,
-		error: selfUpdateError,
+		latestVersion: selfUpdate.latestVersion,
+		updating: selfUpdate.selfUpdating,
+		error: selfUpdate.selfUpdateError,
 		onUpdate: handleSelfUpdate,
 		onSkip: () => setScreen("loading")
 	});
@@ -2395,50 +2442,17 @@ function App({ project, global, version, installManager }) {
 				color: "green",
 				children: [
 					"✓ Updated to v",
-					latestVersion,
+					selfUpdate.latestVersion,
 					". Run ripen again to use the new version."
 				]
 			})
 		})]
 	});
-	if (screen === "loading") return /* @__PURE__ */ jsxs(Box, {
-		flexDirection: "column",
-		padding: 1,
-		children: [
-			/* @__PURE__ */ jsxs(Text, {
-				color: "greenBright",
-				bold: true,
-				children: [" ", "ripen"]
-			}),
-			/* @__PURE__ */ jsx(Box, {
-				marginTop: 1,
-				children: /* @__PURE__ */ jsx(Text, {
-					color: "gray",
-					children: loadingMsg
-				})
-			}),
-			/* @__PURE__ */ jsxs(Box, {
-				flexDirection: "column",
-				marginTop: 1,
-				borderStyle: "round",
-				borderColor: "gray",
-				paddingX: 1,
-				width: 64,
-				height: MAX_TERMINAL_LINES + 3,
-				overflow: "hidden",
-				children: [terminalCmd !== "" && /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Text, {
-					color: "gray",
-					children: "$ "
-				}), /* @__PURE__ */ jsx(Text, {
-					color: "gray",
-					children: terminalCmd
-				})] }), outputLines.map((line, i) => /* @__PURE__ */ jsx(Text, {
-					color: line.includes("WARN") || line.includes("ERR") ? "yellow" : "gray",
-					wrap: "truncate",
-					children: line
-				}, i))]
-			})
-		]
+	if (screen === "loading") return /* @__PURE__ */ jsx(TerminalOutputBox, {
+		message: terminal.loadingMsg,
+		command: terminal.terminalCmd,
+		outputLines: terminal.outputLines,
+		maxLines: terminal.maxLines
 	});
 	if (screen === "error") return /* @__PURE__ */ jsxs(Box, {
 		flexDirection: "column",
@@ -2491,44 +2505,11 @@ function App({ project, global, version, installManager }) {
 	});
 	const isListActive = screen === "list";
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		screen === "updating" && /* @__PURE__ */ jsxs(Box, {
-			flexDirection: "column",
-			padding: 1,
-			children: [
-				/* @__PURE__ */ jsxs(Text, {
-					color: "greenBright",
-					bold: true,
-					children: [" ", "ripen"]
-				}),
-				/* @__PURE__ */ jsx(Box, {
-					marginTop: 1,
-					children: /* @__PURE__ */ jsx(Text, {
-						color: "gray",
-						children: loadingMsg
-					})
-				}),
-				/* @__PURE__ */ jsxs(Box, {
-					flexDirection: "column",
-					marginTop: 1,
-					borderStyle: "round",
-					borderColor: "gray",
-					paddingX: 1,
-					width: 64,
-					height: MAX_TERMINAL_LINES + 3,
-					overflow: "hidden",
-					children: [terminalCmd !== "" && /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Text, {
-						color: "gray",
-						children: "$ "
-					}), /* @__PURE__ */ jsx(Text, {
-						color: "gray",
-						children: terminalCmd
-					})] }), outputLines.map((line, i) => /* @__PURE__ */ jsx(Text, {
-						color: line.includes("WARN") || line.includes("ERR") ? "yellow" : "gray",
-						wrap: "truncate",
-						children: line
-					}, i))]
-				})
-			]
+		screen === "updating" && /* @__PURE__ */ jsx(TerminalOutputBox, {
+			message: terminal.loadingMsg,
+			command: terminal.terminalCmd,
+			outputLines: terminal.outputLines,
+			maxLines: terminal.maxLines
 		}),
 		screen === "results" && /* @__PURE__ */ jsx(Box, {
 			padding: 1,
@@ -2552,7 +2533,10 @@ function App({ project, global, version, installManager }) {
 			padding: 1,
 			children: /* @__PURE__ */ jsx(VersionPicker, {
 				pkg: packages[activeIndex],
-				onSelect: handleVersionChosen,
+				onSelect: (v) => {
+					chooseVersion(activeIndex, v);
+					setScreen("list");
+				},
 				onCancel: () => setScreen("list")
 			})
 		}),
@@ -2568,11 +2552,16 @@ function App({ project, global, version, installManager }) {
 			display: isListActive ? "flex" : "none",
 			children: /* @__PURE__ */ jsx(PackageList, {
 				packages,
-				onToggle: handleToggle,
-				onToggleGroup: handleToggleGroup,
-				onToggleMany: handleToggleMany,
-				onSelectVersion: handleSelectVersion,
-				onViewChangelog: handleViewChangelog,
+				onToggle: toggleOne,
+				onToggleMany: toggleMany,
+				onSelectVersion: (i) => {
+					setActiveIndex(i);
+					setScreen("version-picker");
+				},
+				onViewChangelog: (i) => {
+					setActiveIndex(i);
+					setScreen("changelog");
+				},
 				onConfirm: handleConfirm,
 				onOpenSettings: () => setScreen("settings"),
 				groupByScope: config.groupByScope,