feat(ci): style top-level logs

packages/ci/package.json

@@ -29,6 +29,7 @@
     "@code-pushup/models": "0.91.0",
     "@code-pushup/portal-client": "^0.16.0",
     "@code-pushup/utils": "0.91.0",
+    "ansis": "^3.3.2",
     "glob": "^11.0.1",
     "simple-git": "^3.20.0",
     "yaml": "^2.5.1",

packages/ci/src/lib/cli/exec.ts

@@ -8,15 +8,56 @@ import {
 } from '@code-pushup/utils';
 import type { CommandContext } from './context.js';
 
+/**
+ * Executes Code PushUp CLI command and logs output in a way that's more readable in CI.
+ * @param args Arguments for Code PushUp CLI
+ * @param context Command context
+ * @param options Optional information on whether all persist formats are set (if known)
+ */
 export async function executeCliCommand(
   args: string[],
   context: CommandContext,
   options?: { hasFormats: boolean },
 ): Promise<void> {
+  const { logOutputChunk, logOutputEnd, logSilencedOutput } =
+    createLogCallbacks(context);
+
+  const observer: ProcessObserver = {
+    onStdout: logOutputChunk,
+    onStderr: logOutputChunk,
+    onComplete: logOutputEnd,
+    onError: logOutputEnd,
+  };
+
+  const config: ProcessConfig = {
+    command: context.bin,
+    args: combineArgs(args, context, options),
+    cwd: context.directory,
+    observer,
+    silent: true,
+  };
+  const bin = serializeCommandWithArgs(config);
+
+  try {
+    await logger.command(bin, async () => {
+      try {
+        await executeProcess(config);
+      } catch (error) {
+        // ensure output of failed process is always logged for debugging
+        logSilencedOutput();
+        throw error;
+      }
+    });
+  } finally {
+    logger.newline();
+  }
+}
+
+function createLogCallbacks(context: Pick<CommandContext, 'silent'>) {
   // eslint-disable-next-line functional/no-let
   let output = '';
 
-  const logRaw = (message: string) => {
+  const logOutputChunk = (message: string) => {
     if (!context.silent) {
       if (!output) {
         logger.newline();
@@ -26,43 +67,23 @@ export async function executeCliCommand(
     output += message;
   };
 
-  const logEnd = () => {
+  const logOutputEnd = () => {
     if (!context.silent && output) {
       logger.newline();
     }
   };
 
-  const observer: ProcessObserver = {
-    onStdout: logRaw,
-    onStderr: logRaw,
-    onComplete: logEnd,
-    onError: logEnd,
-  };
-
-  const config: ProcessConfig = {
-    command: context.bin,
-    args: combineArgs(args, context, options),
-    cwd: context.directory,
-    observer,
-    silent: true,
-  };
-  const bin = serializeCommandWithArgs(config);
-
-  await logger.command(bin, async () => {
-    try {
-      await executeProcess(config);
-    } catch (error) {
-      // ensure output of failed process is always logged for debugging
-      if (context.silent) {
+  const logSilencedOutput = () => {
+    if (context.silent) {
+      logger.newline();
+      logger.info(output, { noIndent: true });
+      if (!output.endsWith('\n')) {
         logger.newline();
-        logger.info(output, { noIndent: true });
-        if (!output.endsWith('\n')) {
-          logger.newline();
-        }
       }
-      throw error;
     }
-  });
+  };
+
+  return { logOutputChunk, logOutputEnd, logSilencedOutput };
 }
 
 function combineArgs(

packages/ci/src/lib/cli/exec.unit.test.ts

@@ -130,6 +130,7 @@ describe('executeCliCommand', () => {
       `
 - $ npx code-pushup
 ✔ $ npx code-pushup (42 ms)
+
 `.trimStart(),
     );
   });
@@ -152,6 +153,7 @@ WARN: API key is missing, skipping upload
 Collected report files in .code-pushup directory
 
 ✔ $ npx code-pushup (42 ms)
+
 `.trimStart(),
     );
   });
@@ -197,6 +199,7 @@ Collected report
 Uploaded report to portal
 
 ✔ $ npx code-pushup (42 ms)
+
 `.trimStart(),
     );
   });
@@ -222,6 +225,7 @@ Code PushUp CLI v0.42.0
 ERROR: Config file not found
 
 ✖ $ npx code-pushup
+
 `.trimStart(),
     );
   });
@@ -236,6 +240,7 @@ ERROR: Config file not found
       `
 - $ npx code-pushup
 ✔ $ npx code-pushup (42 ms)
+
 `.trimStart(),
     );
   });
@@ -261,6 +266,7 @@ Code PushUp CLI v0.42.0
 ERROR: Config file not found
 
 ✖ $ npx code-pushup
+
 `.trimStart(),
     );
   });

packages/ci/src/lib/comment.ts

@@ -1,5 +1,5 @@
 import { readFile } from 'node:fs/promises';
-import { logger } from '@code-pushup/utils';
+import { logDebug, logInfo, logWarning } from './log.js';
 import type { ProviderAPIClient, Settings } from './models.js';
 
 export async function commentOnPR(
@@ -17,32 +17,32 @@ export async function commentOnPR(
   );
 
   const comments = await api.listComments();
-  logger.debug(`Fetched ${comments.length} comments for pull request`);
+  logDebug(`Fetched ${comments.length} comments for pull request`);
 
   const prevComment = comments.find(comment =>
     comment.body.includes(identifier),
   );
-  logger.debug(
+  logDebug(
     prevComment
       ? `Found previous comment ${prevComment.id} from Code PushUp`
       : 'Previous Code PushUp comment not found',
   );
 
   if (prevComment) {
     const updatedComment = await api.updateComment(prevComment.id, body);
-    logger.info(`Updated body of comment ${updatedComment.url}`);
+    logInfo(`Updated body of comment ${updatedComment.url}`);
     return updatedComment.id;
   }
 
   const createdComment = await api.createComment(body);
-  logger.info(`Created new comment ${createdComment.url}`);
+  logInfo(`Created new comment ${createdComment.url}`);
   return createdComment.id;
 }
 
 function truncateBody(body: string, max: number): string {
   const truncateWarning = '...*[Comment body truncated]*';
   if (body.length > max) {
-    logger.warn(`Comment body is too long. Truncating to ${max} characters.`);
+    logWarning(`Comment body is too long. Truncating to ${max} characters.`);
     return body.slice(0, max - truncateWarning.length) + truncateWarning;
   }
   return body;

packages/ci/src/lib/comment.unit.test.ts

@@ -1,3 +1,4 @@
+import ansis from 'ansis';
 import { vol } from 'memfs';
 import { writeFile } from 'node:fs/promises';
 import path from 'node:path';
@@ -112,7 +113,7 @@ describe('commentOnPR', () => {
       expect.stringContaining('...*[Comment body truncated]*'),
     );
     expect(logger.warn).toHaveBeenCalledWith(
-      'Comment body is too long. Truncating to 1000000 characters.',
+      `${ansis.bold.blue('<✓>')} Comment body is too long. Truncating to 1000000 characters.\n`,
     );
   });
 });

packages/ci/src/lib/log.ts

@@ -0,0 +1,59 @@
+import ansis from 'ansis';
+import {
+  CODE_PUSHUP_UNICODE_LOGO,
+  logger,
+  transformLines,
+} from '@code-pushup/utils';
+
+const LOG_PREFIX = ansis.bold.blue(CODE_PUSHUP_UNICODE_LOGO);
+
+/**
+ * Logs error message with top-level CI log styles (lines prefixed with logo, ends in empty line).
+ * @param message Log message
+ */
+export function logError(message: string): void {
+  log('error', message);
+}
+
+/**
+ * Logs warning message with top-level CI log styles (lines prefixed with logo, ends in empty line).
+ * @param message Log message
+ */
+export function logWarning(message: string): void {
+  log('warn', message);
+}
+
+/**
+ * Logs info message with top-level CI log styles (lines prefixed with logo, ends in empty line).
+ * @param message Log message
+ */
+export function logInfo(message: string): void {
+  log('info', message);
+}
+
+/**
+ * Logs debug message with top-level CI log styles (lines prefixed with logo, ends in empty line).
+ * @param message Log message
+ */
+export function logDebug(message: string): void {
+  log('debug', message);
+}
+
+/**
+ * Prefixes CI logs with logo and ensures each CI log is followed by an empty line.
+ * This is to make top-level CI logs more visually distinct from printed process logs.
+ * @param level Log level
+ * @param message Log message
+ */
+export function log(
+  level: 'error' | 'warn' | 'info' | 'debug',
+  message: string,
+): void {
+  const prefixedLines = transformLines(
+    message.trim(),
+    line => `${LOG_PREFIX} ${line}`,
+  );
+  const styledMessage = `${prefixedLines}\n`;
+
+  logger[level](styledMessage);
+}

packages/ci/src/lib/log.unit.test.ts

@@ -0,0 +1,31 @@
+import ansis from 'ansis';
+import { logger } from '@code-pushup/utils';
+import { log } from './log.js';
+
+describe('log', () => {
+  it('should add logo prefix and ending line-break to message', () => {
+    log('info', 'Running Code PushUp in standalone mode');
+    expect(logger.info).toHaveBeenCalledWith(
+      `${ansis.bold.blue('<✓>')} Running Code PushUp in standalone mode\n`,
+    );
+  });
+
+  it('should add logo prefix to each line', () => {
+    log('debug', 'Found 3 Nx projects:\n- api\n- backoffice\n- frontoffice');
+    expect(logger.debug).toHaveBeenCalledWith(
+      `
+${ansis.bold.blue('<✓>')} Found 3 Nx projects:
+${ansis.bold.blue('<✓>')} - api
+${ansis.bold.blue('<✓>')} - backoffice
+${ansis.bold.blue('<✓>')} - frontoffice
+`.trimStart(),
+    );
+  });
+
+  it('should not add final line-break if already present', () => {
+    log('warn', 'Comment body is too long, truncating to 1000 characters\n');
+    expect(logger.warn).toHaveBeenCalledWith(
+      `${ansis.bold.blue('<✓>')} Comment body is too long, truncating to 1000 characters\n`,
+    );
+  });
+});

packages/ci/src/lib/monorepo/list-projects.ts

@@ -1,6 +1,6 @@
 import { glob } from 'glob';
 import path from 'node:path';
-import { logger } from '@code-pushup/utils';
+import { logDebug, logInfo } from '../log.js';
 import type { Settings } from '../models.js';
 import { detectMonorepoTool } from './detect-tool.js';
 import { getToolHandler } from './handlers/index.js';
@@ -31,8 +31,8 @@ export async function listMonorepoProjects(
   if (tool) {
     const handler = getToolHandler(tool);
     const projects = await handler.listProjects(options);
-    logger.info(`Found ${projects.length} projects in ${tool} monorepo`);
-    logger.debug(`Projects: ${projects.map(({ name }) => name).join(', ')}`);
+    logInfo(`Found ${projects.length} projects in ${tool} monorepo`);
+    logDebug(`Projects: ${projects.map(({ name }) => name).join(', ')}`);
     return {
       tool,
       projects,
@@ -70,15 +70,15 @@ async function resolveMonorepoTool(
   }
 
   if (typeof settings.monorepo === 'string') {
-    logger.info(`Using monorepo tool "${settings.monorepo}" from inputs`);
+    logInfo(`Using monorepo tool "${settings.monorepo}" from inputs`);
     return settings.monorepo;
   }
 
   const tool = await detectMonorepoTool(options);
   if (tool) {
-    logger.info(`Auto-detected monorepo tool ${tool}`);
+    logInfo(`Auto-detected monorepo tool ${tool}`);
   } else {
-    logger.info("Couldn't auto-detect any supported monorepo tool");
+    logInfo("Couldn't auto-detect any supported monorepo tool");
   }
 
   return tool;
@@ -110,12 +110,12 @@ async function listProjectsByGlobs(args: {
     { cwd },
   );
 
-  logger.info(
+  logInfo(
     `Found ${directories.length} project folders matching "${patterns.join(
       ', ',
     )}" from configuration`,
   );
-  logger.debug(`Projects: ${directories.join(', ')}`);
+  logDebug(`Projects: ${directories.join(', ')}`);
 
   return directories.toSorted().map(directory => ({
     name: directory,
@@ -132,8 +132,8 @@ async function listProjectsByNpmPackages(args: {
 
   const packages = await listPackages(cwd);
 
-  logger.info(`Found ${packages.length} NPM packages in repository`);
-  logger.debug(`Projects: ${packages.map(({ name }) => name).join(', ')}`);
+  logInfo(`Found ${packages.length} NPM packages in repository`);
+  logDebug(`Projects: ${packages.map(({ name }) => name).join(', ')}`);
 
   return packages.map(({ name, directory }) => ({
     name,