refactor(ui): implement version with minimal core impact

- No changes made to runWebpack, serve, build, or watch logic.
- No Pagination and legacy terminal output flow remain untouched.

Author: ThierryRakotomanana

packages/webpack-cli/src/ui-renderer.ts

@@ -59,6 +59,18 @@ export interface CommandHelpData {
   globalOptions: HelpOption[];
 }
 
+/** Passed to `renderCommandHeader` to describe the running command. */
+export interface CommandMeta {
+  name: string;
+  description: string;
+}
+
+/** One section emitted by `renderInfoOutput`, e.g. "System" or "Binaries". */
+export interface InfoSection {
+  title: string;
+  rows: Row[];
+}
+
 // ─── Layout constants ─────────────────────────────────────────────
 export const MAX_WIDTH = 80;
 export const INDENT = 2;
@@ -127,6 +139,29 @@ export function renderRows(
   }
 }
 
+export function renderCommandHeader(meta: CommandMeta, opts: RenderOptions): void {
+  const { colors, log } = opts;
+  const termWidth = Math.min(opts.columns || MAX_WIDTH, MAX_WIDTH);
+
+  log("");
+  log(`${indent(INDENT)}${colors.bold(colors.cyan("⬡"))} ${colors.bold(`webpack ${meta.name}`)}`);
+  log(divider(termWidth, colors));
+
+  if (meta.description) {
+    const descWidth = termWidth - INDENT * 2;
+    for (const line of wrapValue(meta.description, descWidth)) {
+      log(`${indent(INDENT)}${line}`);
+    }
+    log("");
+  }
+}
+
+export function renderCommandFooter(opts: RenderOptions): void {
+  const termWidth = Math.min(opts.columns, MAX_WIDTH);
+  opts.log(divider(termWidth, opts.colors));
+  opts.log("");
+}
+
 function _renderHelpOptions(
   options: HelpOption[],
   colors: Colors,
@@ -236,6 +271,108 @@ export function renderAliasHelp(data: AliasHelpData, opts: RenderOptions): void
   renderOptionHelp(data.optionHelp, opts);
 }
 
+export function renderError(message: string, opts: RenderOptions): void {
+  const { colors, log } = opts;
+  log(`${indent(INDENT)}${colors.red("✖")} ${colors.bold(message)}`);
+}
+
+export function renderSuccess(message: string, opts: RenderOptions): void {
+  const { colors, log } = opts;
+  log(`${indent(INDENT)}${colors.green("✔")} ${colors.bold(message)}`);
+}
+
+export function renderWarning(message: string, opts: RenderOptions): void {
+  const { colors, log } = opts;
+  log(`${indent(INDENT)}${colors.yellow("⚠")} ${message}`);
+}
+
+export function renderInfo(message: string, opts: RenderOptions): void {
+  const { colors, log } = opts;
+  log(`${indent(INDENT)}${colors.cyan("ℹ")} ${message}`);
+}
+
+export function parseEnvinfoSections(raw: string): InfoSection[] {
+  const sections: InfoSection[] = [];
+  let current: InfoSection | null = null;
+
+  for (const line of raw.split("\n")) {
+    const sectionMatch = line.match(/^ {2}([^:]+):\s*$/);
+    if (sectionMatch) {
+      if (current) sections.push(current);
+      current = { title: sectionMatch[1].trim(), rows: [] };
+      continue;
+    }
+
+    const rowMatch = line.match(/^ {4}([^:]+):\s+(.+)$/);
+    if (rowMatch && current) {
+      current.rows.push({ label: rowMatch[1].trim(), value: rowMatch[2].trim() });
+      continue;
+    }
+
+    const emptyRowMatch = line.match(/^ {4}([^:]+):\s*$/);
+    if (emptyRowMatch && current) {
+      current.rows.push({ label: emptyRowMatch[1].trim(), value: "N/A", color: (str) => str });
+    }
+  }
+
+  if (current) sections.push(current);
+  return sections.filter((section) => section.rows.length > 0);
+}
+
+export function renderInfoOutput(rawEnvinfo: string, opts: RenderOptions): void {
+  const { colors, log } = opts;
+  const termWidth = Math.min(opts.columns, MAX_WIDTH);
+  const div = divider(termWidth, colors);
+  const sections = parseEnvinfoSections(rawEnvinfo);
+
+  log("");
+
+  for (const section of sections) {
+    log(
+      `${indent(INDENT)}${colors.bold(colors.cyan("⬡"))} ${colors.bold(colors.cyan(section.title))}`,
+    );
+    log(div);
+    renderRows(section.rows, colors, log, termWidth);
+    log(div);
+    log("");
+  }
+}
+
+export function renderVersionOutput(rawEnvinfo: string, opts: RenderOptions): void {
+  const { colors, log } = opts;
+  const termWidth = Math.min(opts.columns, MAX_WIDTH);
+  const div = divider(termWidth, colors);
+  const sections = parseEnvinfoSections(rawEnvinfo);
+
+  for (const section of sections) {
+    log("");
+    log(
+      `${indent(INDENT)}${colors.bold(colors.cyan("⬡"))} ${colors.bold(colors.cyan(section.title))}`,
+    );
+    log(div);
+
+    const labelWidth = Math.max(...section.rows.map((row) => row.label.length));
+
+    for (const { label, value } of section.rows) {
+      const arrowIdx = value.indexOf("=>");
+
+      if (arrowIdx !== -1) {
+        const requested = value.slice(0, arrowIdx).trim();
+        const resolved = value.slice(arrowIdx + 2).trim();
+        log(
+          `${indent(INDENT)}${colors.bold(label.padEnd(labelWidth))}${indent(COL_GAP)}` +
+            `${colors.cyan(requested.padEnd(12))}  ${colors.cyan("→")}  ${colors.green(colors.bold(resolved))}`,
+        );
+      } else {
+        log(
+          `${indent(INDENT)}${colors.bold(label.padEnd(labelWidth))}${indent(COL_GAP)}${colors.green(value)}`,
+        );
+      }
+    }
+    log(div);
+  }
+}
+
 export function renderFooter(opts: RenderOptions, footer: FooterOptions = {}): void {
   const { colors, log } = opts;
 

packages/webpack-cli/src/webpack-cli.ts

@@ -36,9 +36,16 @@ import {
   HelpOption,
   RenderOptions,
   renderAliasHelp,
+  renderCommandFooter,
+  renderCommandHeader,
   renderCommandHelp,
+  renderError,
   renderFooter,
+  renderInfoOutput,
   renderOptionHelp,
+  renderSuccess,
+  renderVersionOutput,
+  renderWarning,
 } from "./ui-renderer.js";
 
 const WEBPACK_PACKAGE_IS_CUSTOM = Boolean(process.env.WEBPACK_PACKAGE);
@@ -1824,9 +1831,28 @@ class WebpackCLI {
         },
       ],
       action: async (options: { output?: string }) => {
-        const info = await this.#renderVersion(options);
+        const renderOpts = this.#renderOptions();
 
-        this.logger.raw(info);
+        if (options.output) {
+          // Machine-readable output requested, bypass the visual renderer entirely.
+          const info = await this.#renderVersion(options);
+          this.logger.raw(info);
+          return;
+        }
+
+        renderCommandHeader(
+          { name: "version", description: "Installed package versions." },
+          renderOpts,
+        );
+
+        const rawInfo = await this.#getInfoOutput({
+          information: {
+            npmPackages: `{${DEFAULT_WEBPACK_PACKAGES.map((item) => `*${item}*`).join(",")}}`,
+          },
+        });
+
+        renderVersionOutput(rawInfo, renderOpts);
+        renderFooter(renderOpts);
       },
     },
     info: {
@@ -1857,9 +1883,23 @@ class WebpackCLI {
         },
       ],
       action: async (options: { output?: string; additionalPackage?: string[] }) => {
+        const renderOpts = this.#renderOptions();
+
+        if (!options.output) {
+          renderCommandHeader(
+            { name: "info", description: "System and environment information." },
+            renderOpts,
+          );
+        }
+
         const info = await this.#getInfoOutput(options);
 
-        this.logger.raw(info);
+        if (options.output) {
+          this.logger.raw(info);
+          return;
+        }
+
+        renderInfoOutput(info, renderOpts);
       },
     },
     configtest: {
@@ -1881,6 +1921,7 @@ class WebpackCLI {
           configPath ? { env, argv, webpack, config: [configPath] } : { env, argv, webpack },
         );
         const configPaths = new Set<string>();
+        const renderOpts = this.#renderOptions();
 
         if (Array.isArray(config.options)) {
           for (const options of config.options) {
@@ -1899,25 +1940,32 @@ class WebpackCLI {
         }
 
         if (configPaths.size === 0) {
-          this.logger.error("No configuration found.");
+          renderError("No configuration found.", renderOpts);
           process.exit(2);
         }
 
-        this.logger.info(`Validate '${[...configPaths].join(" ,")}'.`);
+        renderCommandHeader(
+          { name: "configtest", description: "Validating your webpack configuration." },
+          renderOpts,
+        );
+
+        const pathList = [...configPaths].join(", ");
+        renderWarning(`Validating: ${pathList}`, renderOpts);
 
         try {
           cmd.context.webpack.validate(config.options);
         } catch (error) {
           if (this.isValidationError(error as Error)) {
-            this.logger.error((error as Error).message);
+            renderError((error as Error).message, renderOpts);
           } else {
-            this.logger.error(error);
+            renderError(String(error), renderOpts);
           }
 
           process.exit(2);
         }
 
-        this.logger.success("There are no validation errors in the given webpack configuration.");
+        renderSuccess("No validation errors found.", renderOpts);
+        renderCommandFooter(renderOpts);
       },
     },
   };