refactor: Revise actual cleanup UX

Author: d3xter666

packages/cli/lib/cli/commands/cache.js

@@ -6,6 +6,7 @@ import baseMiddleware from "../middlewares/base.js";
 import {getUi5DataDir} from "../../framework/utils.js";
 import * as frameworkCache from "@ui5/project/ui5Framework/cache";
 import CacheManager from "@ui5/project/build/cache/CacheManager";
+import prettyHrtime from "pretty-hrtime";
 
 const cacheCommand = {
 	command: "cache",
@@ -86,6 +87,64 @@ function padLabel(label) {
 	return label.padEnd(LABEL_WIDTH);
 }
 
+const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+const PROGRESS_DEBOUNCE_MS = 150;
+// Reserve enough columns for the fixed parts of the progress line so the path
+// never causes the line to wrap on a standard 80-column terminal.
+const PATH_MAX_COLS = 40;
+
+/**
+ * Build a progress handler for framework cache deletion.
+ * Returns a function to pass as onProgress to cleanCache(), plus a finalise()
+ * to call when deletion completes (clears the in-progress line).
+ *
+ * The line is written to stderr with \r so it overwrites itself on each tick,
+ * producing a single updating line rather than a scrolling log.
+ *
+ * @param {string} label Short label shown on the progress line
+ * @param {[number, number]} startHrtime process.hrtime() snapshot taken when deletion began
+ * @param {function([number, number]): string} prettyHrtime Formatting function from the pretty-hrtime package
+ * @returns {{onProgress: function(string): void, finalise: function(): void}}
+ */
+function createProgressHandler(label, startHrtime, prettyHrtime) {
+	let lastPrintMs = 0;
+	let frameIndex = 0;
+	let lastVisibleLen = 0;
+
+	function onProgress(entryPath) {
+		const now = Date.now();
+		if (now - lastPrintMs < PROGRESS_DEBOUNCE_MS) return;
+		lastPrintMs = now;
+
+		const elapsed = prettyHrtime(process.hrtime(startHrtime));
+		const spinner = SPINNER_FRAMES[frameIndex % SPINNER_FRAMES.length];
+		frameIndex++;
+
+		// Trim path so the whole line stays within 80 columns
+		let displayPath = entryPath;
+		if (displayPath.length > PATH_MAX_COLS) {
+			displayPath = "…" + displayPath.slice(-(PATH_MAX_COLS - 1));
+		}
+
+		// Build visible text (no ANSI) first to get accurate length for overwrite padding
+		const visibleText = `  ${spinner} ${label}   ${displayPath}   ${elapsed}`;
+		// Then the styled version for actual output
+		const styledText = `  ${spinner} ${label}   ${chalk.dim(displayPath)}   ${elapsed}`;
+
+		// Pad to cover any longer previous line, then overwrite in place
+		const padded = styledText + " ".repeat(Math.max(0, lastVisibleLen - visibleText.length));
+		lastVisibleLen = visibleText.length;
+
+		process.stderr.write(`\r${padded}`);
+	}
+
+	function finalise() {
+		process.stderr.write(`\r${" ".repeat(lastVisibleLen)}\r`);
+	}
+
+	return {onProgress, finalise};
+}
+
 async function handleCache(argv) {
 	// Resolve UI5 data directory — uses the same resolution chain as ui5 build/serve:
 	// UI5_DATA_DIR env var → ui5DataDir config (~/.ui5rc) → default ~/.ui5
@@ -154,7 +213,16 @@ async function handleCache(argv) {
 	}
 
 	// Perform the actual cleanup (orchestrate both domains)
-	const frameworkResult = await frameworkCache.cleanCache(ui5DataDir);
+	let frameworkResult;
+	if (frameworkInfo) {
+		const startHrtime = process.hrtime();
+		const {onProgress, finalise} = createProgressHandler(LABEL_FRAMEWORK, startHrtime, prettyHrtime);
+		try {
+			frameworkResult = await frameworkCache.cleanCache(ui5DataDir, onProgress);
+		} finally {
+			finalise();
+		}
+	}
 	const buildResult = await CacheManager.cleanCache(ui5DataDir);
 
 	process.stderr.write("\n");

packages/project/lib/ui5Framework/cache.js

@@ -13,7 +13,6 @@ import {
  * package contents. Inner levels are parallelised with Promise.all to avoid serial
  * I/O on large caches.
  *
- *
  * @param {string} packagesDir Absolute path to the packages directory
  * @returns {Promise<{projects: number, libraries: number, versions: number}|null>}
  *   Null if the directory does not exist or contains no installed libraries.
@@ -63,9 +62,42 @@ async function getPackageStats(packagesDir) {
 		}
 	}));
 
-	return librarySet.size > 0
-		? {projects: totalProjects, libraries: librarySet.size, versions: versionSet.size}
-		: null;
+	return librarySet.size > 0 ?
+		{projects: totalProjects, libraries: librarySet.size, versions: versionSet.size} :
+		null;
+}
+
+/**
+ * Recursively remove a directory, calling onProgress(entryPath) for every
+ * entry (file or directory) just before it is deleted.
+ *
+ * Uses manual traversal instead of fs.rm so callers can observe deletion
+ * progress. Intentionally serial — parallelising unlink() calls does not
+ * improve throughput on a single filesystem and makes the progress callback
+ * ordering unpredictable.
+ *
+ * @param {string} dirPath Absolute path to the directory to remove
+ * @param {function(string): void} onProgress Called with the path of each
+ *   entry immediately before it is deleted
+ * @returns {Promise<void>}
+ */
+async function rmRecursive(dirPath, onProgress) {
+	let entries;
+	try {
+		entries = await fs.readdir(dirPath, {withFileTypes: true});
+	} catch {
+		return;
+	}
+	for (const entry of entries) {
+		const entryPath = path.join(dirPath, entry.name);
+		onProgress(entryPath);
+		if (entry.isDirectory()) {
+			await rmRecursive(entryPath, onProgress);
+			await fs.rmdir(entryPath);
+		} else {
+			await fs.unlink(entryPath);
+		}
+	}
 }
 
 /**
@@ -113,11 +145,14 @@ export async function isFrameworkLocked(ui5DataDir) {
  * deleting files while a download is in progress.
  *
  * @param {string} ui5DataDir Resolved absolute path to UI5 data directory
+ * @param {function(string): void} [onProgress] Optional callback invoked with
+ *   the absolute path of each entry just before it is deleted. Use for
+ *   progress display. Omit for silent deletion (falls back to fs.rm).
  * @returns {Promise<{path: string, libraryCount: number, projectCount: number, versionCount: number}|null>}
  *   Removal result, or null if nothing was installed.
  * @throws {Error} If a framework operation is currently active (active lockfiles detected)
  */
-export async function cleanCache(ui5DataDir) {
+export async function cleanCache(ui5DataDir, onProgress) {
 	const frameworkDir = getFrameworkDir(ui5DataDir);
 
 	try {
@@ -138,7 +173,13 @@ export async function cleanCache(ui5DataDir) {
 		);
 	}
 
-	await fs.rm(frameworkDir, {recursive: true, force: true});
+	if (onProgress) {
+		await rmRecursive(frameworkDir, onProgress);
+		await fs.rmdir(frameworkDir);
+	} else {
+		await fs.rm(frameworkDir, {recursive: true, force: true});
+	}
+
 	return {
 		path: FRAMEWORK_DIR_NAME,
 		libraryCount: stats.libraries,

packages/project/test/lib/ui5framework/cache.js

@@ -61,8 +61,8 @@ test("getCacheInfo: counts projects, libraries and versions", async (t) => {
 	t.truthy(result);
 	t.is(result.path, "framework");
 	t.is(result.projectCount, 2);
-	t.is(result.libraryCount, 2);  // sap.m counted once (deduplicated across projects)
-	t.is(result.versionCount, 3);  // 1.120.0, 1.148.0, 1.38.1
+	t.is(result.libraryCount, 2); // sap.m counted once (deduplicated across projects)
+	t.is(result.versionCount, 3); // 1.120.0, 1.148.0, 1.38.1
 });
 
 test("getCacheInfo: deduplicates library names across projects", async (t) => {