fix(cli): indent multiline diagnostic help output (#4)

Author: ben-million

packages/react-doctor/src/scan.ts

@@ -23,6 +23,7 @@ import { checkReducedMotion } from "./utils/check-reduced-motion.js";
 import { runKnip } from "./utils/run-knip.js";
 import { runOxlint } from "./utils/run-oxlint.js";
 import { spinner } from "./utils/spinner.js";
+import { indentMultilineText } from "./utils/indent-multiline-text.js";
 
 const SEVERITY_ORDER: Record<Diagnostic["severity"], number> = {
   error: 0,
@@ -68,7 +69,7 @@ const printDiagnostics = (diagnostics: Diagnostic[], isVerbose: boolean): void =
 
     logger.log(`  ${icon} ${firstDiagnostic.message}${countLabel}`);
     if (firstDiagnostic.help) {
-      logger.dim(`    ${firstDiagnostic.help}`);
+      logger.dim(indentMultilineText(firstDiagnostic.help, "    "));
     }
 
     if (isVerbose) {

packages/react-doctor/src/utils/indent-multiline-text.ts

@@ -0,0 +1,5 @@
+export const indentMultilineText = (text: string, linePrefix: string): string =>
+  text
+    .split("\n")
+    .map((lineText) => `${linePrefix}${lineText}`)
+    .join("\n");

packages/react-doctor/tests/indent-multiline-text.test.ts

@@ -0,0 +1,21 @@
+import { describe, expect, it } from "vitest";
+import { indentMultilineText } from "../src/utils/indent-multiline-text.js";
+
+describe("indentMultilineText", () => {
+  it("adds the prefix to a single line", () => {
+    const indentedText = indentMultilineText("Error: Something happened", "    ");
+
+    expect(indentedText).toBe("    Error: Something happened");
+  });
+
+  it("adds the prefix to every line in multiline text", () => {
+    const explanation =
+      "Error: Calling setState synchronously within an effect can trigger cascading renders\n\nEffects are intended to synchronize state between React and external systems.\n* Update external systems with the latest state from React.\n* Subscribe for updates from external systems and set state in a callback.";
+
+    const indentedText = indentMultilineText(explanation, "    ");
+
+    expect(indentedText).toBe(
+      "    Error: Calling setState synchronously within an effect can trigger cascading renders\n    \n    Effects are intended to synchronize state between React and external systems.\n    * Update external systems with the latest state from React.\n    * Subscribe for updates from external systems and set state in a callback.",
+    );
+  });
+});