openmagic 0.41.2 → 0.43.0

package/dist/cli.js

@@ -2,13 +2,15 @@
 
 // src/cli.ts
 import { Command } from "commander";
-import chalk from "chalk";
+import pc from "picocolors";
 import open from "open";
 import { resolve as resolve3, join as join6 } from "path";
 import { existsSync as existsSync6, readFileSync as readFileSync6 } from "fs";
 import { spawn as spawn5, execSync as execSync2 } from "child_process";
 import http2 from "http";
-import { createInterface } from "readline";
+import { createInterface, clearLine, cursorTo } from "readline";
+import { createSpinner } from "nanospinner";
+import terminalLink from "terminal-link";
 
 // src/proxy.ts
 import http from "http";
@@ -2868,13 +2870,106 @@ process.emitWarning = function(warning, ...args) {
   if (typeof warning === "string" && warning.includes("util._extend")) return;
   return origEmitWarning.call(process, warning, ...args);
 };
+var INDENT = "  ";
+var LABEL_WIDTH = 10;
+var activeStatusLine = false;
+function clearActiveStatus() {
+  if (!activeStatusLine || !process.stdout.isTTY) return;
+  clearLine(process.stdout, 0);
+  cursorTo(process.stdout, 0);
+  activeStatusLine = false;
+}
+function writeLine(line = "") {
+  clearActiveStatus();
+  process.stdout.write(line ? `${line}
+` : "\n");
+}
+function formatInfo(message) {
+  return pc.dim(`${INDENT}${message}`);
+}
+function formatPending(message) {
+  return pc.dim(`${INDENT}\u25CF  ${message}`);
+}
+function formatSuccess(message) {
+  return pc.green(`${INDENT}\u2713  ${message}`);
+}
+function formatReady(seconds = process.uptime()) {
+  return pc.green(`${INDENT}\u2713 Ready in ${seconds.toFixed(1)}s`);
+}
+function formatWarning(message) {
+  return pc.yellow(`${INDENT}\u25B2  ${message}`);
+}
+function formatError(message) {
+  return pc.red(`${INDENT}\u2717  ${message}`);
+}
+function printInfo(message) {
+  writeLine(formatInfo(message));
+}
+function printSuccess(message) {
+  writeLine(formatSuccess(message));
+}
+function printWarning(message) {
+  writeLine(formatWarning(message));
+}
+function printError(message) {
+  writeLine(formatError(message));
+}
+function printDetail(message, formatter = pc.dim) {
+  writeLine(formatter(`${INDENT}   ${message}`));
+}
+function printCommand(message) {
+  printDetail(message, pc.cyan);
+}
+function printLocation(label, value, brightValue = false) {
+  const prefix = pc.dim(`${INDENT}\u279C  ${`${label}:`.padEnd(LABEL_WIDTH)}`);
+  const linked = value.startsWith("http") ? terminalLink(value, value) : value;
+  const renderedValue = brightValue ? pc.bold(pc.white(linked)) : pc.dim(linked);
+  writeLine(`${prefix}${renderedValue}`);
+}
+var activeSpinner = null;
+function startInlineStatus(message) {
+  clearActiveStatus();
+  activeSpinner = createSpinner(message).start();
+}
+function finishInlineStatus(message) {
+  if (activeSpinner) {
+    activeSpinner.success({ text: message });
+    activeSpinner = null;
+  } else writeLine(formatSuccess(message));
+}
+function warnInlineStatus(message) {
+  if (activeSpinner) {
+    activeSpinner.warn({ text: message });
+    activeSpinner = null;
+  } else writeLine(formatWarning(message));
+}
+function failInlineStatus(message) {
+  if (activeSpinner) {
+    activeSpinner.error({ text: message });
+    activeSpinner = null;
+  } else writeLine(formatError(message));
+}
+function finishInlineReady() {
+  const msg = `Ready in ${process.uptime().toFixed(1)}s`;
+  if (activeSpinner) {
+    activeSpinner.success({ text: msg });
+    activeSpinner = null;
+  } else writeLine(formatReady());
+}
+function getDetectedFrameworkLabel() {
+  if (detectedFramework) return detectedFramework;
+  const scripts = detectDevScripts();
+  return scripts.length > 0 ? scripts[0].framework : null;
+}
 process.on("unhandledRejection", (err) => {
-  console.error(chalk.red("\n  [OpenMagic] Unhandled error:"), err?.message || err);
-  console.error(chalk.dim("  Please report this at https://github.com/Kalmuraee/OpenMagic/issues"));
+  writeLine();
+  printError(`Unhandled error: ${err?.message || err}`);
+  printDetail("Please report this at https://github.com/Kalmuraee/OpenMagic/issues");
 });
 process.on("uncaughtException", (err) => {
-  console.error(chalk.red("\n  [OpenMagic] Fatal error:"), err.message);
-  console.error(chalk.dim("  Please report this at https://github.com/Kalmuraee/OpenMagic/issues"));
+  writeLine();
+  printError(`Fatal error: ${err.message}`);
+  printDetail("Please report this at https://github.com/Kalmuraee/OpenMagic/issues");
   process.exit(1);
 });
 try {
@@ -2886,11 +2981,13 @@ try {
     }
     const newLimit = parseInt(execSync2("ulimit -n", { encoding: "utf-8", shell: true }).trim(), 10);
     if (newLimit < 4096) {
-      console.log(chalk.yellow("\n  \u26A0  File descriptor limit is " + fdLimit + " (need 4096+)."));
-      console.log(chalk.dim("     This causes EMFILE errors in large Next.js/Turbopack projects."));
-      console.log(chalk.dim("     Fix: add this to your ~/.zshrc (or ~/.bashrc):"));
-      console.log(chalk.cyan("       ulimit -n 65536"));
-      console.log(chalk.dim("     Then restart your terminal.\n"));
+      writeLine();
+      printWarning(`File descriptor limit is ${fdLimit} (need 4096+).`);
+      printDetail("This can cause EMFILE errors in large Next.js and Turbopack projects.");
+      printDetail("Add this to your shell profile:");
+      printCommand("ulimit -n 65536");
+      printDetail("Then restart your terminal.");
+      writeLine();
     }
   }
 } catch {
@@ -2995,15 +3092,13 @@ function runCommand(cmd, args, cwd = process.cwd()) {
       child.stdout?.on("data", (data) => {
         const lines = data.toString().trim().split("\n");
         for (const line of lines) {
-          if (line.trim()) process.stdout.write(chalk.dim(`  \u2502 ${line}
-`));
+          if (line.trim()) writeLine(pc.dim(`${INDENT}\u2502 ${line}`));
         }
       });
       child.stderr?.on("data", (data) => {
         const lines = data.toString().trim().split("\n");
         for (const line of lines) {
-          if (line.trim()) process.stdout.write(chalk.dim(`  \u2502 ${line}
-`));
+          if (line.trim()) writeLine(pc.dim(`${INDENT}\u2502 ${line}`));
         }
       });
       child.on("error", () => resolve4(false));
@@ -3021,20 +3116,17 @@ async function healthCheck(proxyPort, _targetPort) {
       signal: controller.signal
     });
     clearTimeout(timeout);
-    if (res.ok) {
-      console.log(chalk.green("  \u2713  Toolbar ready."));
-    } else {
-      console.log(chalk.yellow("  \u26A0  Proxy started but toolbar health check failed."));
-    }
+    if (res.ok) return null;
+    return {
+      message: "Proxy started, but the toolbar health check failed.",
+      details: ["Try refreshing the page in a few seconds."]
+    };
   } catch {
-    console.log(
-      chalk.yellow("  \u26A0  Could not verify proxy. The dev server may still be starting.")
-    );
-    console.log(
-      chalk.dim("     Try refreshing the page in a few seconds.")
-    );
+    return {
+      message: "Could not verify the proxy while it was starting.",
+      details: ["Try refreshing the page in a few seconds."]
+    };
   }
-  console.log("");
 }
 var detectedFramework = null;
 async function validateAppHealth(targetHost, targetPort) {
@@ -3055,39 +3147,36 @@ async function validateAppHealth(targetHost, targetPort) {
         continue;
       }
       if (status === 404) {
-        console.log(chalk.yellow('  \u26A0  Your app returned 404 for the root path ("/").'));
-        console.log(chalk.dim("     The dev server is running, but no page matched."));
-        console.log("");
+        printWarning("Your app returned 404 for the root path (/).");
+        printDetail("The dev server is running, but no page matched the root path.");
         if (detectedFramework === "Next.js") {
           const strayLockfiles = scanParentLockfiles(process.cwd());
           if (strayLockfiles.length > 0) {
-            console.log(chalk.yellow("     Found lockfiles in parent directories that confuse Turbopack:"));
+            printDetail("Found lockfiles in parent directories that can confuse Turbopack.");
             for (const f of strayLockfiles) {
-              console.log(chalk.dim(`       \u2022 ${f}`));
+              printDetail(`- ${f}`);
             }
-            console.log("");
-            console.log(chalk.dim("     Fix: remove them, or add to your next.config:"));
-            console.log(chalk.cyan("       turbopack: { root: __dirname }"));
+            printDetail("Fix it by removing those lockfiles, or add this to next.config:");
+            printCommand("turbopack: { root: __dirname }");
           } else {
-            console.log(chalk.dim("     Common Next.js causes:"));
-            console.log(chalk.dim("     \u2022 Missing src/app/page.tsx (App Router) or pages/index.tsx"));
-            console.log(chalk.dim("     \u2022 Middleware redirecting all routes to an auth provider"));
+            printDetail("Common Next.js causes:");
+            printDetail("- Missing src/app/page.tsx (App Router) or pages/index.tsx");
+            printDetail("- Middleware redirecting all routes to an auth provider");
           }
         } else if (detectedFramework === "Angular") {
-          console.log(chalk.dim("     Angular hint: ensure the base href matches the proxy path."));
+          printDetail("Angular hint: make sure the base href matches the proxy path.");
         } else if (detectedFramework === "Vite") {
-          console.log(chalk.dim("     Vite hint: check that index.html exists in the project root."));
+          printDetail("Vite hint: check that index.html exists in the project root.");
         } else {
-          console.log(chalk.dim("     Check your framework's routing configuration."));
+          printDetail("Check your framework's routing configuration.");
         }
-        console.log("");
-        console.log(chalk.dim("     The toolbar is still available \u2014 navigate to a working route."));
-        console.log("");
+        printDetail("The toolbar is still available \u2014 navigate to a working route.");
+        writeLine();
         return false;
       } else if (status >= 500) {
-        console.log(chalk.yellow(`  \u26A0  Your app returned HTTP ${status} on the root path.`));
-        console.log(chalk.dim("     There may be a server-side error. Check your dev server output."));
-        console.log("");
+        printWarning(`Your app returned HTTP ${status} on the root path.`);
+        printDetail("There may be a server-side error. Check your dev server output.");
+        writeLine();
         if (attempt < 4) {
           await new Promise((r) => setTimeout(r, 2e3));
           continue;
@@ -3112,12 +3201,9 @@ program.name("openmagic").description("AI-powered coding toolbar for any web app
   "-r, --root <paths...>",
   "Project root directories (defaults to cwd)"
 ).option("--no-open", "Don't auto-open browser").option("--host <host>", "Dev server host", "localhost").action(async (opts) => {
-  console.log("");
-  console.log(
-    "  \u{1FA84} " + chalk.bold.hex("#6c5ce7")("OpenMagic") + chalk.dim(` v${VERSION2}`) + " \u2728"
-  );
-  console.log(chalk.dim("  AI coding toolbar for any web app"));
-  console.log("");
+  writeLine();
+  writeLine(`${INDENT}${pc.white("OpenMagic")} ${pc.dim(`v${VERSION2}`)}`);
+  writeLine();
   let targetPort;
   let targetHost = opts.host;
   if (opts.port) {
@@ -3137,18 +3223,22 @@ program.name("openmagic").description("AI-powered coding toolbar for any web app
           targetHost = recheck.host;
         }
       }
+      const frameworkLabel = getDetectedFrameworkLabel() ?? "dev server";
+      printSuccess(`Found ${frameworkLabel} on port ${targetPort}`);
     }
   } else {
-    console.log(chalk.dim("  Scanning for dev server..."));
+    startInlineStatus("Scanning for dev server...");
     const detected = await detectDevServer();
     if (detected && detected.fromScripts) {
       const healthy = await isPortHealthy(detected.host, detected.port);
       if (healthy) {
         targetPort = detected.port;
         targetHost = detected.host;
+        const frameworkLabel = getDetectedFrameworkLabel() ?? "dev server";
+        finishInlineStatus(`Found ${frameworkLabel} on port ${detected.port}`);
       } else {
-        console.log(chalk.yellow(`  \u26A0  Dev server on port ${detected.port} is not responding properly.`));
-        console.log(chalk.dim("     Cleaning up orphaned process..."));
+        warnInlineStatus(`Dev server on port ${detected.port} is not responding`);
+        printDetail("Cleaning up the orphaned process...");
         killPortProcess(detected.port);
         const freed = await waitForPortClose(detected.port, 5e3);
         if (!freed) {
@@ -3179,27 +3269,33 @@ program.name("openmagic").description("AI-powered coding toolbar for any web app
             targetPort = redetected.port;
             targetHost = redetected.host;
           } else {
-            console.log(chalk.red("  \u2717  Could not detect the dev server after starting."));
-            console.log(chalk.dim("     Try specifying the port: npx openmagic --port 3000"));
+            printError("Could not detect the dev server after starting.");
+            printDetail("Try specifying the port manually:");
+            printCommand("npx openmagic --port 3000");
             process.exit(1);
           }
         }
+        const frameworkLabel = getDetectedFrameworkLabel() ?? "dev server";
+        printSuccess(`Found ${frameworkLabel} on port ${targetPort}`);
       }
     } else if (detected && !detected.fromScripts) {
+      finishInlineStatus(`Found dev server on port ${detected.port}`);
       const answer = await ask(
-        chalk.yellow(`  Found a server on port ${detected.port}. Is this your project's dev server? `) + chalk.dim("(y/n) ")
+        pc.yellow(`${INDENT}\u25B2  Found a server on port ${detected.port}. Is this your project's dev server? `) + pc.dim("(Y/n) ")
       );
       if (answer.toLowerCase() === "y" || answer.toLowerCase() === "yes" || answer === "") {
         targetPort = detected.port;
         targetHost = detected.host;
       } else {
-        console.log("");
-        console.log(chalk.dim("  Start your dev server, then run:"));
-        console.log(chalk.cyan("    npx openmagic --port <your-port>"));
-        console.log("");
+        writeLine(formatInfo("Cancelled dev server selection."));
+        writeLine();
+        printInfo("Start your dev server, then run:");
+        printCommand("npx openmagic --port <your-port>");
+        writeLine();
         process.exit(0);
       }
     } else {
+      warnInlineStatus("No dev server found. Starting one...");
       const started = await offerToStartDevServer();
       if (!started) {
         process.exit(1);
@@ -3209,34 +3305,34 @@ program.name("openmagic").description("AI-powered coding toolbar for any web app
       } else {
         const redetected = await detectDevServer();
         if (!redetected) {
-          console.log(chalk.red("  \u2717  Could not detect the dev server after starting."));
-          console.log(chalk.dim("     Try specifying the port: npx openmagic --port 3000"));
-          console.log("");
+          printError("Could not detect the dev server after starting.");
+          printDetail("Try specifying the port manually:");
+          printCommand("npx openmagic --port 3000");
+          writeLine();
           process.exit(1);
         }
         targetPort = redetected.port;
         targetHost = redetected.host;
       }
+      const frameworkLabel = getDetectedFrameworkLabel() ?? "dev server";
+      printSuccess(`Found ${frameworkLabel} on port ${targetPort}`);
     }
   }
   if (!detectedFramework) {
     const scripts = detectDevScripts();
     if (scripts.length > 0) detectedFramework = scripts[0].framework;
   }
-  console.log(
-    chalk.green(`  \u2713  Dev server running at ${targetHost}:${targetPort}`)
-  );
   if (detectedFramework === "Next.js") {
     const strayLockfiles = scanParentLockfiles(process.cwd());
     if (strayLockfiles.length > 0) {
-      console.log("");
-      console.log(chalk.yellow("  \u26A0  Lockfiles found in parent directories:"));
+      writeLine();
+      printWarning("Lockfiles found in parent directories.");
       for (const f of strayLockfiles) {
-        console.log(chalk.dim(`     \u2022 ${f}`));
+        printDetail(`- ${f}`);
       }
-      console.log(chalk.dim("     Next.js Turbopack may use the wrong workspace root, causing 404s."));
-      console.log(chalk.dim("     Fix: remove them, or add to next.config:"));
-      console.log(chalk.cyan("       turbopack: { root: __dirname }"));
+      printDetail("Next.js Turbopack may use the wrong workspace root and cause 404s.");
+      printDetail("Fix it by removing those lockfiles, or add this to next.config:");
+      printCommand("turbopack: { root: __dirname }");
     }
   }
   const roots = (opts.root || [process.cwd()]).map(
@@ -3245,35 +3341,41 @@ program.name("openmagic").description("AI-powered coding toolbar for any web app
   const config = loadConfig();
   saveConfig({ ...config, roots, targetPort });
   generateSessionToken();
-  let proxyPort = parseInt(opts.listen, 10);
+  const requestedProxyPort = parseInt(opts.listen, 10);
+  let proxyPort = requestedProxyPort;
   while (await isPortOpen(proxyPort)) {
     proxyPort++;
-    if (proxyPort > parseInt(opts.listen, 10) + 100) {
-      console.log(chalk.red("  Could not find an available port."));
+    if (proxyPort > requestedProxyPort + 100) {
+      printError("Could not find an available port for the OpenMagic proxy.");
       process.exit(1);
     }
   }
+  if (proxyPort !== requestedProxyPort) {
+    writeLine();
+    printWarning(`Port ${requestedProxyPort} is in use \u2014 starting on ${proxyPort}`);
+  }
   const proxyServer = createProxyServer(targetHost, targetPort, roots);
   proxyServer.listen(proxyPort, "localhost", async () => {
     const proxyUrl = `http://localhost:${proxyPort}`;
-    console.log("");
-    console.log(chalk.bold.green("  Ready!"));
-    console.log("");
-    console.log(
-      chalk.bold("  \u2192 ") + chalk.bold.underline.cyan(proxyUrl)
-    );
-    console.log("");
-    await healthCheck(proxyPort, targetPort);
-    console.log(chalk.dim("  Waiting for app to compile..."));
-    const appReady = await validateAppHealth(targetHost, targetPort);
-    if (appReady) {
-      console.log(chalk.green("  \u2713  App is ready."));
-    }
-    console.log(chalk.dim("  Press Ctrl+C to stop."));
-    console.log(
-      chalk.dim("  Errors below are from your dev server, not OpenMagic.")
-    );
-    console.log("");
+    const proxyWarning = await healthCheck(proxyPort, targetPort);
+    const frameworkLabel = getDetectedFrameworkLabel();
+    const targetLabel = frameworkLabel ? `${targetHost}:${targetPort} (${frameworkLabel})` : `${targetHost}:${targetPort}`;
+    printLocation("Local", proxyUrl, true);
+    printLocation("Target", targetLabel);
+    writeLine();
+    startInlineStatus("Waiting for app to compile...");
+    await validateAppHealth(targetHost, targetPort);
+    finishInlineReady();
+    if (proxyWarning) {
+      writeLine();
+      printWarning(proxyWarning.message);
+      for (const detail of proxyWarning.details || []) {
+        printDetail(detail);
+      }
+    }
+    writeLine();
+    printInfo("Press Ctrl+C to stop");
+    writeLine();
     if (opts.open !== false) {
       open(`http://localhost:${proxyPort}`).catch(() => {
       });
@@ -3283,8 +3385,8 @@ program.name("openmagic").description("AI-powered coding toolbar for any web app
   const shutdown = async () => {
     if (shuttingDown) return;
     shuttingDown = true;
-    console.log("");
-    console.log(chalk.dim("  Shutting down OpenMagic..."));
+    writeLine();
+    printInfo("Shutting down OpenMagic...");
     cleanupBackups();
     proxyServer.close();
     const alive = childProcesses.filter((cp) => cp.exitCode === null);
@@ -3300,7 +3402,7 @@ program.name("openmagic").description("AI-powered coding toolbar for any web app
     if (targetPort && await isPortOpen(targetPort)) {
       const freed = await waitForPortClose(targetPort, 4e3);
       if (!freed) {
-        console.log(chalk.dim("  Force-killing remaining processes..."));
+        printInfo("Force-killing remaining processes...");
         if (targetPort) {
           try {
             const pids = execSync2(`lsof -i :${targetPort} -sTCP:LISTEN -t 2>/dev/null`, {
@@ -3363,18 +3465,16 @@ async function offerToStartDevServer(expectedPort) {
   if (scripts.length === 0) {
     const htmlPath = join6(process.cwd(), "index.html");
     if (existsSync6(htmlPath)) {
-      console.log(
-        chalk.dim("  No dev scripts found, but index.html detected.")
-      );
-      console.log("");
+      printInfo("No dev scripts found, but index.html was detected.");
+      writeLine();
       const answer = await ask(
-        chalk.white("  Serve this directory as a static site? ") + chalk.dim("(Y/n) ")
+        pc.dim(`${INDENT}Serve this directory as a static site? `) + pc.dim("(Y/n) ")
       );
       if (answer.toLowerCase() === "n" || answer.toLowerCase() === "no") {
         return false;
       }
       const staticPort = expectedPort || 8080;
-      console.log(chalk.dim(`  Starting static server on port ${staticPort}...`));
+      startInlineStatus(`Starting static server on port ${staticPort}...`);
       const staticChild = spawn5("node", ["-e", `
         const http = require("http");
         const fs = require("fs");
@@ -3389,7 +3489,7 @@ async function offerToStartDevServer(expectedPort) {
             res.writeHead(200, {"Content-Type": mimes[ext] || "application/octet-stream"});
             res.end(data);
           });
-        }).listen(${staticPort}, "localhost", () => console.log("Static server ready on port ${staticPort}"));
+        }).listen(${staticPort}, "localhost");
       `], {
         cwd: process.cwd(),
         stdio: ["ignore", "pipe", "pipe"],
@@ -3398,99 +3498,90 @@ async function offerToStartDevServer(expectedPort) {
       childProcesses.push(staticChild);
       staticChild.stdout?.on("data", (d) => {
         for (const line of d.toString().trim().split("\n")) {
-          if (line.trim()) process.stdout.write(chalk.dim(`  \u2502 ${line}
-`));
+          if (line.trim()) writeLine(pc.dim(`${INDENT}\u2502 ${line}`));
         }
       });
       const up = await waitForPort(staticPort, 5e3);
       if (up) {
         lastDetectedPort = staticPort;
-        console.log(chalk.green(`  \u2713  Static server running on port ${staticPort}`));
+        finishInlineStatus(`Static server running on port ${staticPort}`);
         return true;
       }
-      console.log(chalk.red("  \u2717  Failed to start static server."));
+      failInlineStatus("Static server failed to start");
       return false;
     }
-    console.log(
-      chalk.yellow("  \u26A0  No dev server detected and no dev scripts found.")
-    );
-    console.log("");
-    console.log(chalk.white("  Start your dev server manually, then run:"));
-    console.log(chalk.cyan("    npx openmagic --port <your-port>"));
-    console.log("");
+    printWarning("No dev server detected and no dev scripts were found.");
+    writeLine();
+    printInfo("Start your dev server manually, then run:");
+    printCommand("npx openmagic --port <your-port>");
+    writeLine();
     return false;
   }
   const deps = checkDependenciesInstalled();
   if (!deps.installed) {
-    console.log(
-      chalk.yellow("  \u26A0  node_modules/ not found. Dependencies need to be installed.")
-    );
-    console.log("");
+    printWarning("node_modules was not found. Dependencies need to be installed.");
+    writeLine();
     const answer = await ask(
-      chalk.white(`  Run `) + chalk.cyan(deps.installCommand) + chalk.white("? ") + chalk.dim("(Y/n) ")
+      pc.white(`${INDENT}Run `) + pc.cyan(deps.installCommand) + pc.white("? ") + pc.dim("(Y/n) ")
     );
     if (answer.toLowerCase() === "n" || answer.toLowerCase() === "no") {
-      console.log("");
-      console.log(chalk.dim(`  Run ${deps.installCommand} manually, then try again.`));
-      console.log("");
+      writeLine();
+      printInfo(`Run ${deps.installCommand} manually, then try again.`);
+      writeLine();
       return false;
     }
-    console.log("");
-    console.log(chalk.dim(`  Installing dependencies with ${deps.packageManager}...`));
+    writeLine();
+    printInfo(`Installing dependencies with ${deps.packageManager}...`);
     const [installCmd, ...installArgs] = deps.installCommand.split(" ");
     const installed = await runCommand(installCmd, installArgs);
     if (!installed) {
-      console.log(chalk.red("  \u2717  Dependency installation failed."));
-      console.log(chalk.dim(`     Try running ${deps.installCommand} manually.`));
-      console.log("");
+      printError("Dependency installation failed.");
+      printDetail(`Try running ${deps.installCommand} manually.`);
+      writeLine();
       return false;
     }
-    console.log(chalk.green("  \u2713  Dependencies installed."));
-    console.log("");
+    printSuccess("Dependencies installed.");
+    writeLine();
   }
   let chosen = scripts[0];
   if (scripts.length === 1) {
-    console.log(
-      chalk.yellow("  \u26A0  No dev server detected.")
-    );
-    console.log("");
-    console.log(
-      chalk.white(`  Found `) + chalk.cyan(`npm run ${chosen.name}`) + chalk.white(` in ${projectName}`) + chalk.dim(` (${chosen.framework})`)
+    printWarning("No dev server detected.");
+    writeLine();
+    writeLine(
+      pc.white(`${INDENT}Found `) + pc.cyan(`npm run ${chosen.name}`) + pc.white(` in ${projectName}`) + pc.dim(` (${chosen.framework})`)
     );
-    console.log(chalk.dim(`     \u2192 ${chosen.command}`));
-    console.log("");
+    printDetail(`\u279C ${chosen.command}`);
+    writeLine();
     const answer = await ask(
-      chalk.white(`  Start it now? `) + chalk.dim("(Y/n) ")
+      pc.white(`${INDENT}Start it now? `) + pc.dim("(Y/n) ")
     );
     if (answer.toLowerCase() === "n" || answer.toLowerCase() === "no") {
-      console.log("");
-      console.log(chalk.dim("  Start your dev server first, then run openmagic again."));
-      console.log("");
+      writeLine();
+      printInfo("Start your dev server first, then run OpenMagic again.");
+      writeLine();
       return false;
     }
   } else {
-    console.log(
-      chalk.yellow("  \u26A0  No dev server detected.")
-    );
-    console.log("");
-    console.log(
-      chalk.white(`  Found ${scripts.length} dev scripts in ${projectName}:`)
+    printWarning("No dev server detected.");
+    writeLine();
+    writeLine(
+      pc.white(`${INDENT}Found ${scripts.length} dev scripts in ${projectName}:`)
     );
-    console.log("");
+    writeLine();
     scripts.forEach((s, i) => {
-      console.log(
-        chalk.cyan(`    ${i + 1}) `) + chalk.white(`npm run ${s.name}`) + chalk.dim(` \u2014 ${s.framework} (port ${s.defaultPort})`)
+      writeLine(
+        pc.cyan(`${INDENT}${i + 1}. `) + pc.white(`npm run ${s.name}`) + pc.dim(` (${s.framework}, port ${s.defaultPort})`)
       );
-      console.log(chalk.dim(`       ${s.command}`));
+      printDetail(s.command);
     });
-    console.log("");
+    writeLine();
     const answer = await ask(
-      chalk.white(`  Which one to start? `) + chalk.dim(`(1-${scripts.length}, or n to cancel) `)
+      pc.white(`${INDENT}Which one should OpenMagic start? `) + pc.dim(`(1-${scripts.length}, or n to cancel) `)
     );
     if (answer.toLowerCase() === "n" || answer.toLowerCase() === "no" || answer === "") {
-      console.log("");
-      console.log(chalk.dim("  Start your dev server first, then run openmagic again."));
-      console.log("");
+      writeLine();
+      printInfo("Start your dev server first, then run OpenMagic again.");
+      writeLine();
       return false;
     }
     const idx = parseInt(answer, 10) - 1;
@@ -3503,13 +3594,13 @@ async function offerToStartDevServer(expectedPort) {
   detectedFramework = chosen.framework;
   const compat = checkNodeCompatibility(chosen.framework);
   if (!compat.ok) {
-    console.log(chalk.red(`
-  \u2717  ${compat.message}`));
-    console.log("");
-    console.log(chalk.white("  Switch Node.js version before running:"));
-    console.log(chalk.cyan("    nvm use 20"));
-    console.log(chalk.dim("    # then re-run: npx openmagic"));
-    console.log("");
+    writeLine();
+    printError(compat.message);
+    writeLine();
+    printInfo("Switch Node.js before running:");
+    printCommand("nvm use 20");
+    printDetail("Then re-run: npx openmagic");
+    writeLine();
     return false;
   }
   let port = expectedPort || chosen.defaultPort;
@@ -3517,24 +3608,19 @@ async function offerToStartDevServer(expectedPort) {
   if (await isPortOpen(port)) {
     const owned = verifyPortOwnership(port, process.cwd());
     if (owned === true) {
-      console.log(chalk.green(`  \u2713  Dev server already running on port ${port}`));
+      printSuccess(`Dev server already running on port ${port}`);
       lastDetectedPort = port;
       return true;
     }
     const altPort = await findAvailablePort(port + 1);
-    console.log("");
-    console.log(
-      chalk.yellow(`  \u26A0  Port ${port} is already in use by another process.`)
-    );
-    console.log(
-      chalk.dim(`     Starting on port ${altPort} instead.`)
-    );
+    writeLine();
+    printWarning(`Port ${port} is in use \u2014 starting on ${altPort}`);
     port = altPort;
     portChanged = true;
   }
-  console.log("");
-  console.log(
-    chalk.dim(`  Starting `) + chalk.cyan(`npm run ${chosen.name}`) + (portChanged ? chalk.dim(` (port ${port})`) : "") + chalk.dim("...")
+  writeLine();
+  writeLine(
+    pc.dim(`${INDENT}\u25CF  Starting `) + pc.cyan(`npm run ${chosen.name}`) + (portChanged ? pc.dim(` (port ${port})`) : "") + pc.dim("...")
   );
   const depsInfo = checkDependenciesInstalled();
   const runCmd = depsInfo.packageManager === "yarn" ? "yarn" : depsInfo.packageManager === "pnpm" ? "pnpm" : depsInfo.packageManager === "bun" ? "bun" : "npm";
@@ -3562,21 +3648,21 @@ async function offerToStartDevServer(expectedPort) {
       }
     });
   } catch (e) {
-    console.log(chalk.red(`  \u2717  Failed to start: ${e.message}`));
+    printError(`Failed to start: ${e.message}`);
     return false;
   }
   childProcesses.push(child);
   let childExited = false;
   child.on("error", (err) => {
     childExited = true;
-    console.log(chalk.red(`
-  \u2717  Failed to start: ${err.message}`));
+    writeLine();
+    printError(`Failed to start: ${err.message}`);
   });
   child.on("exit", (code) => {
     childExited = true;
     if (code !== null && code !== 0) {
-      console.log(chalk.red(`
-  \u2717  Dev server exited with code ${code}`));
+      writeLine();
+      printError(`Dev server exited with code ${code}`);
     }
   });
   process.once("exit", () => {
@@ -3589,13 +3675,11 @@ async function offerToStartDevServer(expectedPort) {
       }
     }
   });
-  console.log(
-    chalk.dim(`  Waiting for dev server on port ${port}...`)
-  );
+  writeLine(formatPending(`Waiting for ${chosen.framework} on port ${port}...`));
   const isUp = await waitForPort(port, 6e4, () => childExited);
   if (isUp) {
     lastDetectedPort = port;
-    console.log("");
+    printSuccess(`${chosen.framework} is listening on port ${port}`);
     return true;
   }
   if (!childExited) {
@@ -3604,28 +3688,23 @@ async function offerToStartDevServer(expectedPort) {
       if (await isPortOpen(scanPort)) {
         const owned = verifyPortOwnership(scanPort, process.cwd());
         if (owned === false) continue;
-        console.log(
-          chalk.green(`
-  \u2713  Dev server found on port ${scanPort}.`)
-        );
+        printSuccess(`Found ${chosen.framework} on port ${scanPort}`);
         lastDetectedPort = scanPort;
         return true;
       }
     }
   }
   if (childExited) {
-    console.log(
-      chalk.red(`  \u2717  Dev server failed to start.`)
-    );
-    console.log("");
+    printError("Dev server failed to start");
+    writeLine();
     try {
       const pkgPath = join6(process.cwd(), "package.json");
       if (existsSync6(pkgPath)) {
         const pkg = JSON.parse(readFileSync6(pkgPath, "utf-8"));
         if (pkg.engines?.node) {
-          console.log(chalk.yellow(`  This project requires Node.js ${pkg.engines.node}`));
-          console.log(chalk.dim(`  You are running Node.js ${process.version}`));
-          console.log("");
+          printWarning(`This project requires Node.js ${pkg.engines.node}`);
+          printDetail(`You are running Node.js ${process.version}`);
+          writeLine();
         }
       }
     } catch {
@@ -3633,26 +3712,24 @@ async function offerToStartDevServer(expectedPort) {
     if (chosen?.framework) {
       const compat2 = checkNodeCompatibility(chosen.framework);
       if (!compat2.ok) {
-        console.log(chalk.yellow(`  ${compat2.message}`));
-        console.log(chalk.dim("  Switch with: nvm use 20"));
-        console.log("");
+        printWarning(compat2.message);
+        printDetail("Switch with:");
+        printCommand("nvm use 20");
+        writeLine();
       }
     }
-    console.log(chalk.white("  Options:"));
-    console.log(chalk.dim("  1. Fix the error above and try again"));
-    console.log(chalk.dim("  2. Start the server manually, then run:"));
-    console.log(chalk.cyan("     npx openmagic --port <your-port>"));
-    console.log("");
+    writeLine(pc.white(`${INDENT}Options:`));
+    printDetail("1. Fix the error above and try again");
+    printDetail("2. Start the server manually, then run:");
+    printCommand("npx openmagic --port <your-port>");
+    writeLine();
     return false;
   }
-  console.log(
-    chalk.yellow(`
-  \u26A0  Could not find the dev server after 60s.`)
-  );
-  console.log(chalk.dim(`     Check the output above for errors.`));
-  console.log(chalk.dim(`     Or start the server manually, then run:`));
-  console.log(chalk.cyan(`     npx openmagic --port <your-port>`));
-  console.log("");
+  printWarning("Could not find the dev server after 60s");
+  printDetail("Check the output above for errors.");
+  printDetail("Or start the server manually, then run:");
+  printCommand("npx openmagic --port <your-port>");
+  writeLine();
   return false;
 }
 program.parse();