chore(cli): replace chalk and boxen with native formatting (#2003)

Use Node's native styleText for CLI colors and a small local formatter
for the experiment summary box. Also pin @braintrust/browser to the
workspace braintrust package so local dependency changes are reflected
during installs.

Our SDK is Node 20+, so these changes are safe.

Author: AbhiPrasad

integrations/browser-js/package.json

@@ -25,11 +25,10 @@
   },
   "dependencies": {
     "als-browser": "^1.0.1",
-    "braintrust": ">=3.0.0-rc.29"
+    "braintrust": "workspace:^"
   },
   "devDependencies": {
     "@types/node": "^20.10.5",
-    "braintrust": "workspace:*",
     "tsup": "^8.5.1",
     "typescript": "^5.3.3",
     "vitest": "4.1.5"

js/package.json

@@ -200,8 +200,6 @@
     "@vercel/functions": "^1.0.2",
     "ajv": "^8.20.0",
     "argparse": "^2.0.1",
-    "boxen": "^8.0.1",
-    "chalk": "^4.1.2",
     "cli-progress": "^3.12.0",
     "cli-table3": "^0.6.5",
     "cors": "^2.8.5",

js/src/cli/index.ts

@@ -5,7 +5,7 @@ import * as dotenv from "dotenv";
 import fs from "node:fs";
 import os from "node:os";
 import path from "node:path";
-import util from "node:util";
+import util, { styleText } from "node:util";
 import * as fsWalk from "@nodelib/fs.walk";
 import { minimatch } from "minimatch";
 import { ArgumentParser } from "argparse";
@@ -25,7 +25,6 @@ import {
   BarProgressReporter,
   SimpleProgressReporter,
 } from "./reporters/progress";
-import chalk from "chalk";
 import { terminalLink } from "termi-link";
 
 // Re-use the module resolution logic from Jest
@@ -129,8 +128,8 @@ async function initExperiment(
     : "locally";
   // eslint-disable-next-line no-restricted-properties -- preserving intentional console usage.
   console.error(
-    chalk.cyan("▶") +
-      ` Experiment ${chalk.bold(info.experimentName)} is running at ${linkText}`,
+    styleText("cyan", "▶") +
+      ` Experiment ${styleText("bold", info.experimentName)} is running at ${linkText}`,
   );
   return logger;
 }
@@ -596,8 +595,9 @@ async function runOnce(
 
   // eslint-disable-next-line no-restricted-properties -- preserving intentional console usage.
   console.error(
-    chalk.dim(
-      `Processing ${chalk.bold(resultPromises.length)} evaluator${resultPromises.length === 1 ? "" : "s"}...`,
+    styleText(
+      "dim",
+      `Processing ${styleText("bold", String(resultPromises.length))} evaluator${resultPromises.length === 1 ? "" : "s"}...`,
     ),
   );
   const allEvalsResults = await Promise.all(resultPromises);

js/src/cli/reporters/eval.ts

@@ -1,6 +1,5 @@
-import chalk from "chalk";
+import { stripVTControlCharacters, styleText } from "node:util";
 import { terminalLink } from "termi-link";
-import boxen from "boxen";
 import Table from "cli-table3";
 import pluralize from "pluralize";
 
@@ -9,10 +8,45 @@ import type { ReporterDef } from "../../reporters/types";
 import { EvaluatorDef, EvalResultWithSummary } from "../../framework";
 import { isEmpty } from "../../util";
 
+function visibleLength(text: string) {
+  return stripVTControlCharacters(text).length;
+}
+
+function padEndVisible(text: string, targetLength: number) {
+  return text + " ".repeat(Math.max(0, targetLength - visibleLength(text)));
+}
+
+function formatSummaryBox(content: string) {
+  const title = styleText("gray", " Experiment summary ");
+  const lines = content.split("\n");
+  const contentWidth = Math.max(
+    visibleLength(title),
+    ...lines.map((line) => visibleLength(line) + 2),
+  );
+
+  const horizontal = "─";
+  const top =
+    styleText("gray", "╭") +
+    title +
+    styleText(
+      "gray",
+      horizontal.repeat(contentWidth - visibleLength(title)) + "╮",
+    );
+  const body = lines
+    .map(
+      (line) =>
+        `${styleText("gray", "│")} ${padEndVisible(line, contentWidth - 2)} ${styleText("gray", "│")}`,
+    )
+    .join("\n");
+  const bottom = styleText("gray", "╰" + horizontal.repeat(contentWidth) + "╯");
+
+  return top + "\n" + body + "\n" + bottom;
+}
+
 function formatExperimentSummaryFancy(summary: ExperimentSummary) {
   let comparisonLine = "";
   if (summary.comparisonExperimentName) {
-    comparisonLine = `${summary.comparisonExperimentName} ${chalk.gray("(baseline)")} ← ${summary.experimentName} ${chalk.gray("(comparison)")}\n\n`;
+    comparisonLine = `${summary.comparisonExperimentName} ${styleText("gray", "(baseline)")} ← ${summary.experimentName} ${styleText("gray", "(comparison)")}\n\n`;
   }
 
   const tableParts: string[] = [];
@@ -22,13 +56,13 @@ function formatExperimentSummaryFancy(summary: ExperimentSummary) {
   const hasComparison = !!summary.comparisonExperimentName;
 
   if (hasScores || hasMetrics) {
-    const headers = [chalk.gray("Name"), chalk.gray("Value")];
+    const headers = [styleText("gray", "Name"), styleText("gray", "Value")];
 
     if (hasComparison) {
       headers.push(
-        chalk.gray("Change"),
-        chalk.gray("Improvements"),
-        chalk.gray("Regressions"),
+        styleText("gray", "Change"),
+        styleText("gray", "Improvements"),
+        styleText("gray", "Regressions"),
       );
     }
 
@@ -62,28 +96,28 @@ function formatExperimentSummaryFancy(summary: ExperimentSummary) {
     const scoreValues: ScoreSummary[] = Object.values(summary.scores);
     for (const score of scoreValues) {
       const scorePercent = (score.score * 100).toFixed(2);
-      const scoreValue = chalk.white(`${scorePercent}%`);
+      const scoreValue = styleText("white", `${scorePercent}%`);
 
       let diffString = "";
       if (!isEmpty(score.diff)) {
         const diffPercent = (score.diff! * 100).toFixed(2);
         const diffSign = score.diff! > 0 ? "+" : "";
-        const diffColor = score.diff! > 0 ? chalk.green : chalk.red;
-        diffString = diffColor(`${diffSign}${diffPercent}%`);
+        const diffColor = score.diff! > 0 ? "green" : "red";
+        diffString = styleText(diffColor, `${diffSign}${diffPercent}%`);
       } else {
-        diffString = chalk.gray("-");
+        diffString = styleText("gray", "-");
       }
 
       const improvements =
         score.improvements > 0
-          ? chalk.dim.green(score.improvements)
-          : chalk.gray("-");
+          ? styleText(["dim", "green"], String(score.improvements))
+          : styleText("gray", "-");
       const regressions =
         score.regressions > 0
-          ? chalk.dim.red(score.regressions)
-          : chalk.gray("-");
+          ? styleText(["dim", "red"], String(score.regressions))
+          : styleText("gray", "-");
 
-      const row = [`${chalk.blue("◯")} ${score.name}`, scoreValue];
+      const row = [`${styleText("blue", "◯")} ${score.name}`, scoreValue];
       if (hasComparison) {
         row.push(diffString, improvements, regressions);
       }
@@ -94,7 +128,8 @@ function formatExperimentSummaryFancy(summary: ExperimentSummary) {
     for (const metric of metricValues) {
       const fractionDigits = Number.isInteger(metric.metric) ? 0 : 2;
       const formattedValue = metric.metric.toFixed(fractionDigits);
-      const metricValue = chalk.white(
+      const metricValue = styleText(
+        "white",
         metric.unit === "$"
           ? `${metric.unit}${formattedValue}`
           : `${formattedValue}${metric.unit}`,
@@ -104,22 +139,22 @@ function formatExperimentSummaryFancy(summary: ExperimentSummary) {
       if (!isEmpty(metric.diff)) {
         const diffPercent = (metric.diff! * 100).toFixed(2);
         const diffSign = metric.diff! > 0 ? "+" : "";
-        const diffColor = metric.diff! > 0 ? chalk.green : chalk.red;
-        diffString = diffColor(`${diffSign}${diffPercent}%`);
+        const diffColor = metric.diff! > 0 ? "green" : "red";
+        diffString = styleText(diffColor, `${diffSign}${diffPercent}%`);
       } else {
-        diffString = chalk.gray("-");
+        diffString = styleText("gray", "-");
       }
 
       const improvements =
         metric.improvements > 0
-          ? chalk.dim.green(metric.improvements)
-          : chalk.gray("-");
+          ? styleText(["dim", "green"], String(metric.improvements))
+          : styleText("gray", "-");
       const regressions =
         metric.regressions > 0
-          ? chalk.dim.red(metric.regressions)
-          : chalk.gray("-");
+          ? styleText(["dim", "red"], String(metric.regressions))
+          : styleText("gray", "-");
 
-      const row = [`${chalk.magenta("◯")} ${metric.name}`, metricValue];
+      const row = [`${styleText("magenta", "◯")} ${metric.name}`, metricValue];
       if (hasComparison) {
         row.push(diffString, improvements, regressions);
       }
@@ -141,23 +176,10 @@ function formatExperimentSummaryFancy(summary: ExperimentSummary) {
 
   const boxContent = [content, footer].filter(Boolean).join("\n\n");
 
-  try {
-    return (
-      "\n" +
-      boxen(boxContent, {
-        title: chalk.gray("Experiment summary"),
-        titleAlignment: "left",
-        padding: 0.5,
-        borderColor: "gray",
-        borderStyle: "round",
-      })
-    );
-  } catch {
-    return "\n" + chalk.gray("Experiment summary") + "\n" + boxContent + "\n";
-  }
+  return "\n" + formatSummaryBox(boxContent);
 }
 
-export const warning = chalk.yellow;
+export const warning = (text: string) => styleText("yellow", text);
 
 export const fancyReporter: ReporterDef<boolean> = {
   name: "Braintrust fancy reporter",

js/src/cli/reporters/progress.ts

@@ -1,4 +1,4 @@
-import chalk from "chalk";
+import { styleText } from "node:util";
 import * as cliProgress from "cli-progress";
 
 import type { ProgressReporter } from "../../reporters/types";
@@ -22,7 +22,7 @@ export class BarProgressReporter implements ProgressReporter {
   constructor() {
     this.multiBar = new cliProgress.MultiBar(
       {
-        format: `${chalk.blueBright("{bar}")} ${chalk.blue("{evaluator}")} {percentage}% ${chalk.gray("{value}/{total} {eta_formatted}")}`,
+        format: `${styleText("blueBright", "{bar}")} ${styleText("blue", "{evaluator}")} {percentage}% ${styleText("gray", "{value}/{total} {eta_formatted}")}`,
         hideCursor: true,
         barsize: 10,
       },