m8flow 1.1.5 → 1.1.6

package/lib/logger.js

@@ -1,19 +1,25 @@
 /**
- * Unified logger — wraps chalk + ora so every other module
- * imports from one place and the style stays consistent.
+ * Unified logger — consistent symbol language, correct box alignment.
+ *
+ * Symbol convention:
+ *   ✔  success / complete
+ *   ℹ  info / neutral
+ *   ⚠  warning
+ *   ✖  error / fatal
+ *   spinning dots — active task (ora)
  */
 import chalk from 'chalk';
 import ora   from 'ora';
 
 // ── Palette ───────────────────────────────────────────────────────────────────
 const c = {
-  brand:   chalk.hex('#6366f1'),   // indigo — M8Flow brand colour
-  ok:      chalk.hex('#22c55e'),   // green
-  warn:    chalk.hex('#f59e0b'),   // amber
-  error:   chalk.hex('#ef4444'),   // red
-  dim:     chalk.dim,
-  bold:    chalk.bold,
-  white:   chalk.white,
+  brand: chalk.hex('#6366f1'),
+  ok:    chalk.hex('#22c55e'),
+  warn:  chalk.hex('#f59e0b'),
+  error: chalk.hex('#ef4444'),
+  info:  chalk.hex('#38bdf8'),
+  dim:   chalk.dim,
+  bold:  chalk.bold,
 };
 
 // ── Symbols ───────────────────────────────────────────────────────────────────
@@ -21,10 +27,23 @@ export const sym = {
   ok:    c.ok('✔'),
   warn:  c.warn('⚠'),
   error: c.error('✖'),
+  info:  c.info('ℹ'),
   arrow: c.brand('›'),
-  dot:   c.dim('·'),
 };
 
+// ── Strip ANSI for accurate visible-width measurement ─────────────────────────
+const ANSI_RE = /\x1b\[[0-9;]*m/g;
+
+function visibleLen(s) {
+  return s.replace(ANSI_RE, '').length;
+}
+
+/** Pad `str` so its VISIBLE length equals `width`, then return the padded string. */
+function padVisible(str, width) {
+  const extra = width - visibleLen(str);
+  return extra > 0 ? str + ' '.repeat(extra) : str;
+}
+
 // ── Banner ────────────────────────────────────────────────────────────────────
 export function banner(version) {
   console.log();
@@ -42,9 +61,9 @@ export function banner(version) {
 // ── Step spinner ──────────────────────────────────────────────────────────────
 export function spin(text) {
   const spinner = ora({
-    text: `  ${text}`,
-    spinner: 'dots',
-    color: 'magenta',
+    text:       `  ${text}`,
+    spinner:    'dots',
+    color:      'magenta',
     prefixText: ' ',
   }).start();
 
@@ -52,6 +71,7 @@ export function spin(text) {
     succeed: (msg) => spinner.succeed(chalk.white(`  ${msg ?? text}`)),
     fail:    (msg) => spinner.fail(c.error(`  ${msg ?? text}`)),
     warn:    (msg) => spinner.warn(c.warn(`  ${msg ?? text}`)),
+    info:    (msg) => spinner.info(c.info(`  ${msg ?? text}`)),
     update:  (msg) => { spinner.text = `  ${msg}`; },
     stop:    ()    => spinner.stop(),
   };
@@ -59,28 +79,62 @@ export function spin(text) {
 
 // ── Simple log helpers ────────────────────────────────────────────────────────
 export const log = {
-  info:    (...a) => console.log(`  ${sym.arrow} `, ...a),
-  ok:      (...a) => console.log(`  ${sym.ok}   `, ...a),
-  warn:    (...a) => console.warn(`  ${sym.warn}  `, ...a),
-  error:   (...a) => console.error(`  ${sym.error}  `, ...a),
-  section: (t)   => console.log(`\n  ${c.bold(c.brand(t))}\n`),
+  ok:      (...a) => console.log(`  ${sym.ok}  `, ...a),
+  info:    (...a) => console.log(`  ${sym.info} `, ...a),
+  warn:    (...a) => console.warn(`  ${sym.warn} `, ...a),
+  error:   (...a) => console.error(`  ${sym.error} `, ...a),
+  section: (t)   => {
+    console.log();
+    console.log(`  ${c.bold(c.brand('─── ' + t))}`);
+    console.log();
+  },
   blank:   ()    => console.log(),
   dim:     (...a) => console.log(`       ${c.dim(a.join(' '))}`),
+  tree:    (last, msg) => console.log(`  ${c.dim(last ? '└─' : '├─')} ${msg}`),
 };
 
-// ── Ready box ─────────────────────────────────────────────────────────────────
-export function readyBox(frontendUrl, backendUrl) {
-  const line = (label, url) =>
-    `  ${c.dim(label.padEnd(12))} ${c.brand(url)}`;
+// ── Ready box — pixel-perfect alignment via visible-width padding ──────────────
+export function readyBox(frontendUrl, backendUrl, timings = {}) {
+  const W  = 46;   // visible content width inside the box (between the ║ chars)
+  const br = c.brand;
+
+  /** Build one padded box row — content is measured BEFORE ANSI codes */
+  const row = (content) => {
+    const inner = padVisible(content, W);
+    return br('  ║') + inner + br('║');
+  };
+
+  const sep  = br('  ╠' + '═'.repeat(W) + '╣');
+  const top  = br('  ╔' + '═'.repeat(W) + '╗');
+  const bot  = br('  ╚' + '═'.repeat(W) + '╝');
+
+  const appLine  = `  ${c.dim('App')}  ${c.dim('→')}  ${c.brand(frontendUrl)}`;
+  const apiLine  = `  ${c.dim('API')}  ${c.dim('→')}  ${c.brand(backendUrl)}`;
+
+  console.log();
+  console.log(top);
+  console.log(row(''));
+  console.log(row(`  ✨  ${c.bold('M8Flow is running!')}`));
+  console.log(row(''));
+  console.log(sep);
+  console.log(row(appLine));
+  console.log(row(apiLine));
+  console.log(row(''));
+  if (timings.total) {
+    console.log(row(`  ${c.dim('Started in')}  ${c.ok(timings.total + 's')}`));
+    console.log(row(''));
+  }
+  console.log(row(`  ${c.dim('Press Ctrl+C to stop')}`));
+  console.log(bot);
+  console.log();
+}
 
+// ── Shutdown sequence ─────────────────────────────────────────────────────────
+export function printShutdown() {
   console.log();
-  console.log(chalk.hex('#6366f1')('  ╔══════════════════════════════════════════════╗'));
-  console.log(chalk.hex('#6366f1')('  ║') + c.bold('  ✨  M8Flow is running!                     ') + chalk.hex('#6366f1')('║'));
-  console.log(chalk.hex('#6366f1')('  ║') + '                                              ' + chalk.hex('#6366f1')('║'));
-  console.log(chalk.hex('#6366f1')('  ║') + line('  App  →', frontendUrl).padEnd(54) + chalk.hex('#6366f1')('║'));
-  console.log(chalk.hex('#6366f1')('  ║') + line('  API  →', backendUrl).padEnd(54)  + chalk.hex('#6366f1')('║'));
-  console.log(chalk.hex('#6366f1')('  ║') + '                                              ' + chalk.hex('#6366f1')('║'));
-  console.log(chalk.hex('#6366f1')('  ║') + c.dim('  Press Ctrl+C to stop.                      ') + chalk.hex('#6366f1')('║'));
-  console.log(chalk.hex('#6366f1')('  ╚══════════════════════════════════════════════╝'));
+  console.log(`  ${c.dim('Shutting down M8Flow…')}`);
+  console.log(`  ${c.dim('├─')} Stopping backend…`);
+  console.log(`  ${c.dim('├─')} Stopping frontend…`);
+  console.log(`  ${c.dim('└─')} ${c.ok('Done.')}  Goodbye! 👋`);
   console.log();
 }

package/lib/run.js

@@ -1,17 +1,5 @@
 /**
- * `m8flow run` — full startup orchestration.
- *
- * Steps:
- *   1. Validate Python
- *   2. Create storage dirs
- *   3. Ensure venv
- *   4. pip install (skip when requirements unchanged)
- *   5. Resolve ports (auto-shift if busy)
- *   6. Start FastAPI backend
- *   7. Serve React frontend
- *   8. Wait for backend health
- *   9. Open browser
- *  10. Keep alive until Ctrl+C
+ * `m8flow run` — full startup orchestration with timing metrics.
  */
 import path           from 'path';
 import os             from 'os';
@@ -24,7 +12,7 @@ import { checkPython, ensureVenv, installDeps } from './setup.js';
 import { spawnBackend }                          from './backend.js';
 import { serveStatic }                           from './server.js';
 import { resolvePort, waitForPort, killProcessOnPort } from './ports.js';
-import { banner, log, spin, readyBox }           from './logger.js';
+import { banner, log, spin, readyBox, printShutdown } from './logger.js';
 
 const require   = createRequire(import.meta.url);
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
@@ -34,110 +22,126 @@ const BACKEND_DIR  = path.join(PKG_DIR, 'bundled', 'backend');
 const FRONTEND_DIR = path.join(PKG_DIR, 'bundled', 'frontend-dist');
 const M8FLOW_HOME  = path.join(os.homedir(), '.m8flow');
 
+/** Returns elapsed seconds since `start` (Date.now()) as a string like "2.4s" */
+function elapsed(start) { return ((Date.now() - start) / 1000).toFixed(1) + 's'; }
+
 export async function run({
   frontendPort = 3000,
   backendPort  = 8000,
   openBrowser  = true,
   verbose      = false,
 } = {}) {
-  // Ensure any unhandled failure prints cleanly and exits — no lingering process
   process.on('uncaughtException', (err) => {
     log.error(err.message);
     process.exit(1);
   });
 
+  const totalStart = Date.now();
   const pkg = require('../package.json');
   banner(pkg.version);
 
-  // ── Guard: bundled assets present ────────────────────────────────────────
   assertBundled();
 
-  // ── 1. Python ────────────────────────────────────────────────────────────
-  log.section('Environment');
+  // ── Environment ──────────────────────────────────────────────────────────────
+  log.section('Checking environment');
+
+  let t = Date.now();
   const sp1 = spin('Locating Python 3.8+…');
   const pythonExe = await checkPython().catch((e) => { sp1.fail(e.message); throw e; });
-  sp1.succeed(`Python found  (${pythonExe})`);
+  sp1.succeed(`Python found  (${pythonExe})  ${elapsed(t)}`);
 
-  // ── 2. Storage dirs ───────────────────────────────────────────────────────
   ensureStorageDirs();
-  log.ok(`Storage ready  (${M8FLOW_HOME})`);
+  log.ok(`Storage dirs ready  (${M8FLOW_HOME})`);
 
-  // ── 3. Venv ───────────────────────────────────────────────────────────────
-  const venvPython = await ensureVenv(pythonExe, M8FLOW_HOME);
+  // ── Runtime setup ─────────────────────────────────────────────────────────────
+  log.section('Preparing runtime');
 
-  // ── 4. pip install ────────────────────────────────────────────────────────
+  t = Date.now();
+  const venvPython = await ensureVenv(pythonExe, M8FLOW_HOME);
   await installDeps(venvPython, BACKEND_DIR, M8FLOW_HOME);
 
-  // ── 5. Ports — kill stale backends first ────────────────────────────────────
-  log.section('Network');
+  // ── Resolving ports ───────────────────────────────────────────────────────────
+  log.section('Resolving ports');
 
-  // Kill any leftover process from a previous session BEFORE checking port availability.
-  // On Windows, Ctrl+C sometimes leaves the Python/uvicorn process running.
   await killProcessOnPort(backendPort);
   await killProcessOnPort(frontendPort);
 
   const fe = await resolvePort(frontendPort, 'frontend');
   const be = await resolvePort(backendPort,  'backend');
 
-  if (fe.changed) log.warn(`Port ${fe.from} still busy after cleanup → using ${fe.port}`);
-  if (be.changed) log.warn(`Port ${be.from} still busy after cleanup → using ${be.port}`);
+  if (fe.changed) log.warn(`Port ${fe.from} busy → using ${fe.port}`);
+  if (be.changed) log.warn(`Port ${be.from} busy → using ${be.port}`);
 
-  log.ok(`Frontend  → http://localhost:${fe.port}`);
-  log.ok(`Backend   → http://localhost:${be.port}`);
+  log.ok(`Frontend  →  http://localhost:${fe.port}`);
+  log.ok(`Backend   →  http://localhost:${be.port}`);
 
-  // ── 6. Backend (Docker-first, venv fallback) ─────────────────────────────
-  log.section('Starting servers');
-  const sp6 = spin('Launching backend…');
-  const { proc: backendProc, mode: backendMode } = await spawnBackend(
-    venvPython, BACKEND_DIR, be.port, M8FLOW_HOME, verbose
-  );
+  // ── Starting servers ──────────────────────────────────────────────────────────
+  log.section('Initializing ML engine');
 
-  if (backendMode === 'docker') {
-    sp6.update('Docker backend starting (warm — no cold-start)…');
-  } else {
-    sp6.update('Starting FastAPI backend (venv)…');
-  }
+  // Warn about Docker fallback BEFORE the spinner so it reads naturally
+  const { proc: backendProc, mode: backendMode } = await (async () => {
+    const { execa } = await import('execa');
+    const dockerOk = await execa('docker', ['info'], { reject: false, timeout: 3_000 })
+      .then(r => r.exitCode === 0).catch(() => false);
+    if (!dockerOk) {
+      log.info('Docker not found — falling back to Python venv');
+    }
+    return spawnBackend(venvPython, BACKEND_DIR, be.port, M8FLOW_HOME, verbose);
+  })();
+
+  const beStart = Date.now();
+  const sp6 = spin(
+    backendMode === 'docker'
+      ? 'Starting backend  (Docker — warm environment)…'
+      : 'Starting backend  (Python venv)…'
+  );
 
   backendProc.on('exit', (code) => {
-    if (code !== 0 && code !== null) process.exit(1);   // propagate crash
+    if (code !== 0 && code !== null) process.exit(1);
   });
 
-  // ── 7. Frontend ───────────────────────────────────────────────────────────
+  const feStart = Date.now();
+  const sp7 = spin('Starting frontend server…');
   const httpServer = await serveStatic(FRONTEND_DIR, fe.port);
+  sp7.succeed(`Frontend ready  ${elapsed(feStart)}`);
 
-  // ── 8. Health-check backend ─────────────────────────────────────────────────
-  // 120 s gives Docker image pull + container start enough headroom on first run.
-  // The frontend shows its own "Initializing" overlay during this window.
-  sp6.update('Waiting for backend to accept connections…');
+  // ── Health check ──────────────────────────────────────────────────────────────
+  sp6.update('Performing health checks…');
   await waitForPort(be.port, '127.0.0.1', 120_000).catch(() => {
     log.warn('Backend is taking longer than expected — the UI will retry automatically.');
   });
-  sp6.succeed(`Backend is up  (${backendMode === 'docker' ? '🐳 Docker — warm' : 'Python venv'})`);
-  console.log();
+  sp6.succeed(
+    backendMode === 'docker'
+      ? `Backend ready  (Docker — warm)  ${elapsed(beStart)}`
+      : `Backend ready  (Python venv)    ${elapsed(beStart)}`
+  );
+
+  const totalTime = ((Date.now() - totalStart) / 1000).toFixed(1);
+  log.ok(`M8Flow launched in ${totalTime}s`);
 
-  // ── 9. Open browser ───────────────────────────────────────────────────────
+  // ── Ready ─────────────────────────────────────────────────────────────────────
   const appUrl = `http://localhost:${fe.port}`;
   const apiUrl = `http://localhost:${be.port}`;
 
-  readyBox(appUrl, apiUrl);
+  readyBox(appUrl, apiUrl, { total: totalTime });
+
+  log.info('Open the browser to start building pipelines');
+  log.info('Drag nodes onto the canvas to create ML workflows');
+  log.blank();
 
   if (openBrowser) {
     try {
       const { default: open } = await import('open');
       await open(appUrl);
     } catch {
-      log.dim(`Open your browser at  ${appUrl}`);
+      log.dim(`Navigate to  ${appUrl}`);
     }
   }
 
-  // ── 10. Graceful shutdown ─────────────────────────────────────────────────
-  const shutdown = (signal) => {
-    log.blank();
-    log.info(`Received ${signal} — shutting down…`);
+  // ── Graceful shutdown ─────────────────────────────────────────────────────────
+  const shutdown = (_signal) => {
+    printShutdown();
 
-    // On Windows, .kill() only kills the execa wrapper — the Python subprocess
-    // often survives, leaving the port busy on the next run.
-    // Use taskkill /T to kill the entire process tree.
     if (process.platform === 'win32' && backendProc.pid) {
       try { execSync(`taskkill /PID ${backendProc.pid} /F /T`, { stdio: 'ignore' }); } catch {}
     } else {
@@ -145,14 +149,12 @@ export async function run({
     }
 
     try { httpServer.close(); } catch {}
-    log.ok('Goodbye!\n');
     process.exit(0);
   };
 
   process.on('SIGINT',  () => shutdown('SIGINT'));
   process.on('SIGTERM', () => shutdown('SIGTERM'));
 
-  // Keep the Node process alive
   await new Promise(() => {});
 }
 
@@ -168,14 +170,10 @@ function assertBundled() {
   const missing = [];
   if (!fs.existsSync(BACKEND_DIR))  missing.push('bundled/backend');
   if (!fs.existsSync(FRONTEND_DIR)) missing.push('bundled/frontend-dist');
-
   if (missing.length === 0) return;
-
   throw new Error(
     `Missing bundled assets: ${missing.join(', ')}\n\n` +
-    `  If you cloned the repo, run:\n` +
-    `    node cli/scripts/build.js\n\n` +
-    `  Then install locally:\n` +
-    `    cd cli && npm install -g .`
+    `  Run:  node cli/scripts/build.js\n` +
+    `  Then: cd cli && npm install -g .`
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "m8flow",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "description": "AI-powered visual machine learning workflow builder with local execution, pipeline orchestration, and zero-config setup.",
   "keywords": [
     "machine-learning",