@romanmatena/browsermonitor 2.0.0

package/src/templates/section-heading.mjs

@@ -0,0 +1,141 @@
+/**
+ * Shared section heading – box-style title (HTTP API, CLI, Interactive).
+ * All boxes use boxen for correct border alignment.
+ */
+
+import boxen from 'boxen';
+import { C } from '../utils/colors.mjs';
+import { createTable, printTable } from './table-helper.mjs';
+
+/** Shared boxen options – single border, dim gray, no padding, left margin for alignment with other blocks. */
+export const BOXEN_OPTS = {
+  borderStyle: 'single',
+  padding: { top: 0, right: 0, bottom: 0, left: 0 },
+  margin: { top: 0, right: 0, bottom: 0, left: 2 },
+  borderColor: 'gray',
+  dimBorder: true,
+};
+
+/**
+ * Wrap content in boxen and return indented string.
+ * @param {string} content - Text (may contain ANSI)
+ * @param {string} [indent='']
+ */
+export function renderBox(content, indent = '') {
+  const box = boxen(content, BOXEN_OPTS);
+  return box.split('\n').map((l) => indent + l).join('\n');
+}
+
+/** Strip ANSI escape codes for display length calculation. */
+function stripAnsi(s) {
+  return String(s).replace(/\x1b\[[0-9;]*m/g, '');
+}
+
+/**
+ * Print a section heading in a small box.
+ * @param {string} title - e.g. "HTTP API", "CLI", "Interactive", or "HTTP API URL: http://..."
+ * @param {string} [indent='']
+ */
+export function printSectionHeading(title, indent = '') {
+  const content = ` ${C.bold}${C.cyan}${title}${C.reset} `;
+  console.log(renderBox(content, indent));
+}
+
+/**
+ * Wrap text to max width; returns array of lines.
+ * Works on plain text (ANSI stripped) – use for paths/messages that have no/simple colors.
+ */
+function wrapPlainText(text, maxLen) {
+  const plain = stripAnsi(text);
+  if (plain.length <= maxLen) return [text];
+  const lines = [];
+  let remaining = plain;
+  while (remaining.length > 0) {
+    if (remaining.length <= maxLen) {
+      lines.push(remaining);
+      break;
+    }
+    let breakAt = maxLen;
+    const chunk = remaining.slice(0, maxLen);
+    const lastSpace = chunk.lastIndexOf(' ');
+    if (lastSpace > maxLen * 0.5) breakAt = lastSpace + 1;
+    lines.push(remaining.slice(0, breakAt));
+    remaining = remaining.slice(breakAt).replace(/^\s+/, '');
+  }
+  return lines;
+}
+
+/**
+ * Print a bullet box – info lines (UNC/CMD, Profile path) as a single-cell table.
+ * Long lines wrap to stay within BULLET_BOX_MAX_WIDTH.
+ * @param {string[]} lines - Raw lines (no bullets; we add • )
+ * @param {string} [indent='  ']
+ */
+const MAX_LINE_WIDTH = 71; // wrap long lines at this (prefix excluded)
+
+export function printBulletBox(lines, indent = '  ') {
+  if (lines.length === 0) return;
+  const bullet = ' • ';
+  const contentWidth = MAX_LINE_WIDTH;
+  const contentLines = [];
+  for (const line of lines) {
+    const plain = stripAnsi(line);
+    const wrapped = plain.length <= contentWidth ? [line] : wrapPlainText(plain, contentWidth);
+    for (let i = 0; i < wrapped.length; i++) {
+      const prefix = i === 0 ? `${C.cyan}${bullet}${C.reset}` : '   ';
+      const chunk = wrapped[i];
+      const display = i === 0 && wrapped.length === 1 ? line : chunk;
+      contentLines.push(`${prefix}${display}`);
+    }
+  }
+  const content = contentLines.join('\n');
+  const table = createTable({
+    colWidths: [74],
+    tableOpts: { wordWrap: true, maxWidth: 80 },
+  });
+  table.push([content]);
+  printTable(table, indent);
+}
+
+/**
+ * Print mode heading – Open mode / Join mode with blue background.
+ * Call as soon as mode is chosen (o or j), before any connection logic.
+ * @param {'Open mode' | 'Join mode'} mode
+ * @param {string} [indent='  ']
+ */
+export function printModeHeading(mode, indent = '  ') {
+  const titleLine = `  ${mode}  `;
+  const content = `${C.bgCyan}${C.bold}${C.white}${titleLine}${C.reset}`;
+  console.log('');
+  console.log(renderBox(content, indent));
+}
+
+/**
+ * Print Interactive menu block – title with blue background filling full width.
+ * Options are printed outside the box by the caller.
+ * @param {string} titleLine - e.g. "  Interactive   Chrome not started – choose action"
+ * @param {string} [indent='  ']
+ */
+export function printInteractiveMenuBlock(titleLine, indent = '  ') {
+  const content = `${C.bgCyan}${C.bold}${C.white}${titleLine}${C.reset}`;
+  console.log(renderBox(content, indent));
+}
+
+/**
+ * Print Join connected block – WSL title (blue bg) + monitored URL. Shown when join succeeds.
+ * Single-cell table.
+ * @param {string} windowsHostIp - e.g. "172.29.96.1"
+ * @param {string} url - Monitored page URL
+ * @param {string} [indent='  ']
+ */
+export function printJoinConnectedBlock(windowsHostIp, url, indent = '  ') {
+  const titleLine = `  WSL detected, using Windows host IP: ${windowsHostIp}`;
+  const content = `${C.bgCyan}${C.bold}${C.white}${titleLine}${C.reset}\n ${C.cyan}${url}${C.reset}`;
+  console.log('');
+  const table = createTable({
+    colWidths: [74],
+    tableOpts: { wordWrap: true, maxWidth: 80 },
+  });
+  table.push([content]);
+  printTable(table, indent);
+}

package/src/templates/table-helper.mjs

@@ -0,0 +1,73 @@
+/**
+ * Shared CLI table rendering via cli-table3.
+ * Supports max width, word wrap, and consistent indent.
+ */
+
+import Table from 'cli-table3';
+
+const INDENT = '  ';
+const DEFAULT_MAX_WIDTH = 80;
+
+/** Default table style – dim borders, no built-in header colors (we use C.xxx in content). */
+const DEFAULT_TABLE_STYLE = {
+  head: [],
+  border: [],
+  'padding-left': 1,
+  'padding-right': 1,
+};
+
+/**
+ * Compute max table width from terminal or param.
+ * @param {number} [maxWidth] - Override max width; 0 = use terminal width
+ * @returns {number}
+ */
+function getMaxWidth(maxWidth) {
+  if (maxWidth != null && maxWidth > 0) return maxWidth;
+  const cols = process.stdout.columns;
+  if (cols && cols > 20) return Math.min(cols - 4, 100); // reserve space for indent
+  return DEFAULT_MAX_WIDTH;
+}
+
+/**
+ * Create a table with our default style.
+ * @param {Object} opts - cli-table3 options (colWidths, head, style, chars, etc.)
+ * @param {{ maxWidth?: number, wordWrap?: boolean }} [opts.tableOpts] - maxWidth, wordWrap
+ * @returns {Table}
+ */
+export function createTable(opts = {}) {
+  const { tableOpts = {}, colWidths, style: styleOverride, ...rest } = opts;
+  const { maxWidth, wordWrap = false } = tableOpts;
+  const style = { ...DEFAULT_TABLE_STYLE, ...styleOverride };
+  const options = { style, ...rest };
+  if (wordWrap) {
+    options.wordWrap = true;
+    const mw = getMaxWidth(maxWidth);
+    const left = colWidths?.[0] ?? 12;
+    options.colWidths = colWidths ?? [left, mw - left - 6];
+  } else if (colWidths) {
+    options.colWidths = colWidths;
+  }
+  return new Table(options);
+}
+
+/**
+ * Render table to string with indent applied to each line.
+ * @param {Table} table
+ * @param {string} [indent]
+ * @returns {string}
+ */
+export function formatTable(table, indent = INDENT) {
+  const out = table.toString();
+  return out.split('\n').map((l) => indent + l).join('\n');
+}
+
+/**
+ * Print table with indent.
+ * @param {Table} table
+ * @param {string} [indent]
+ */
+export function printTable(table, indent = INDENT) {
+  console.log(formatTable(table, indent));
+}
+
+export { INDENT };

package/src/templates/wait-for-chrome.mjs

@@ -0,0 +1,19 @@
+/**
+ * Unified "wait for Chrome" block – variable title, common prompt.
+ * Used when Chrome is not ready and user must start it or fix config.
+ */
+
+import { C } from '../utils/colors.mjs';
+
+/** Common prompt line shown in all wait-for-Chrome scenarios. */
+export const WAIT_FOR_CHROME_PROMPT =
+  `${C.yellow}[Monitor]${C.reset} Press ${C.bgGreen}${C.white}${C.bold} ENTER ${C.reset} when Chrome is running, or ${C.red}Ctrl+C${C.reset} to cancel...`;
+
+/**
+ * Build full content for wait block: title (context) + common prompt.
+ * @param {string} [titleContent] - Variable part (e.g. "Chrome found but not accessible...")
+ * @returns {string}
+ */
+export function buildWaitForChromeContent(titleContent) {
+  return titleContent ? `${titleContent}\n\n${WAIT_FOR_CHROME_PROMPT}` : WAIT_FOR_CHROME_PROMPT;
+}

package/src/utils/ask.mjs

@@ -0,0 +1,49 @@
+/**
+ * CLI prompt helpers (yes/no, port, etc.).
+ */
+
+import readline from 'readline';
+import { C } from './colors.mjs';
+
+/**
+ * Ask user a yes/no question.
+ * @param {string} prompt
+ * @returns {Promise<boolean>} true for y/yes, false otherwise
+ */
+export function askYesNo(prompt) {
+  return new Promise((resolve) => {
+    const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+    rl.question(`${prompt} [y/N]: `, (answer) => {
+      rl.close();
+      const normalized = (answer || '').trim().toLowerCase();
+      resolve(normalized === 'y' || normalized === 'yes');
+    });
+  });
+}
+
+const DEFAULT_HTTP_PORT = 60001;
+
+/**
+ * Ask user for HTTP API port; default 60001.
+ * @param {number} [defaultPort=60001]
+ * @returns {Promise<number>} port 1–65535
+ */
+export function askHttpPort(defaultPort = DEFAULT_HTTP_PORT) {
+  return new Promise((resolve) => {
+    const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+    rl.question(`  ${C.cyan}HTTP API port${C.reset} (${C.green}Enter${C.reset} = ${defaultPort}): `, (answer) => {
+      rl.close();
+      const trimmed = (answer || '').trim();
+      if (trimmed === '') {
+        resolve(defaultPort);
+        return;
+      }
+      const num = parseInt(trimmed, 10);
+      if (Number.isNaN(num) || num < 1 || num > 65535) {
+        resolve(defaultPort);
+        return;
+      }
+      resolve(num);
+    });
+  });
+}

package/src/utils/chrome-profile-path.mjs

@@ -0,0 +1,37 @@
+/**
+ * Where the Chrome profile is stored for open mode.
+ * Depends on platform: native Linux/Mac = project dir; WSL = Windows path (same drive or LOCALAPPDATA).
+ */
+
+import path from 'path';
+import { isWsl } from './env.mjs';
+import { getWindowsProfilePath } from '../os/wsl/chrome.mjs';
+
+/**
+ * Get Chrome profile path and a short description for the current platform.
+ * @param {string} projectDir - Project root (outputDir)
+ * @returns {{ path: string, where: string }}
+ */
+export function getChromeProfileLocation(projectDir) {
+  if (!isWsl()) {
+    return {
+      path: path.join(projectDir, '.browsermonitor-profile'),
+      where: 'Project directory',
+    };
+  }
+
+  if (projectDir.startsWith('/mnt/')) {
+    const winPath = projectDir
+      .replace(/^\/mnt\/([a-z])\//, (_, d) => `${d.toUpperCase()}:\\`)
+      .replace(/\//g, '\\');
+    return {
+      path: `${winPath}\\.browsermonitor-profile`,
+      where: 'Windows (same drive as project)',
+    };
+  }
+
+  return {
+    path: getWindowsProfilePath(projectDir),
+    where: 'Windows (LOCALAPPDATA\\browsermonitor\\)',
+  };
+}

package/src/utils/colors.mjs

@@ -0,0 +1,49 @@
+/**
+ * ANSI color codes and logging helpers for terminal output.
+ */
+
+// ANSI color codes
+export const C = {
+  reset: '\x1b[0m',
+  bold: '\x1b[1m',
+  dim: '\x1b[2m',
+  // Colors
+  red: '\x1b[31m',
+  green: '\x1b[32m',
+  yellow: '\x1b[33m',
+  blue: '\x1b[34m',
+  magenta: '\x1b[35m',
+  cyan: '\x1b[36m',
+  white: '\x1b[37m',
+  // Bright colors
+  brightRed: '\x1b[91m',
+  brightGreen: '\x1b[92m',
+  brightYellow: '\x1b[93m',
+  brightBlue: '\x1b[94m',
+  brightMagenta: '\x1b[95m',
+  brightCyan: '\x1b[96m',
+  // Background
+  bgRed: '\x1b[41m',
+  bgGreen: '\x1b[42m',
+  bgYellow: '\x1b[43m',
+  bgBlue: '\x1b[44m',
+  bgMagenta: '\x1b[45m',
+  bgCyan: '\x1b[46m',
+};
+
+// Helper functions for colored output
+export const log = {
+  info: (msg) => console.log(`${C.cyan}[Monitor]${C.reset} ${msg}`),
+  success: (msg) => console.log(`${C.green}[Monitor]${C.reset} ${C.green}${msg}${C.reset}`),
+  warn: (msg) => console.log(`${C.yellow}[Monitor]${C.reset} ${C.yellow}${msg}${C.reset}`),
+  error: (msg) => console.error(`${C.red}[Monitor]${C.reset} ${C.red}${msg}${C.reset}`),
+  dim: (msg) => console.log(`${C.dim}[Monitor] ${msg}${C.reset}`),
+  header: (msg) => console.log(`\n${C.bold}${C.brightCyan}═══════════════════════════════════════════════════════════════════════════════${C.reset}`),
+  title: (msg) => console.log(`${C.bold}${C.brightCyan}  ${msg}${C.reset}`),
+  section: (msg) => console.log(`\n${C.bold}${C.white}> ${msg}${C.reset}`),
+  key: (key, value) => console.log(`  ${C.cyan}${key}:${C.reset} ${value}`),
+  keyHighlight: (key, value) => console.log(`  ${C.cyan}${key}:${C.reset} ${C.brightGreen}${value}${C.reset}`),
+  cmd: (msg) => console.log(`  ${C.bgBlue}${C.white} ${msg} ${C.reset}`),
+  bullet: (msg) => console.log(`  ${C.dim}-${C.reset} ${msg}`),
+  status: (label, value, color = C.white) => console.log(`  ${C.dim}${label}:${C.reset} ${color}${value}${C.reset}`),
+};

package/src/utils/env.mjs

@@ -0,0 +1,30 @@
+/**
+ * Platform / environment detection (Windows, Linux, WSL).
+ * Single place for isWindows, isLinux, isWsl so UI and profile path logic can depend on it.
+ */
+
+import fs from 'fs';
+
+export function isWindows() {
+  return process.platform === 'win32';
+}
+
+export function isLinux() {
+  return process.platform === 'linux';
+}
+
+/**
+ * Check if running in WSL (Linux under Windows).
+ * @returns {boolean}
+ */
+export function isWsl() {
+  if (process.platform !== 'linux') return false;
+  if (process.env.WSL_DISTRO_NAME) return true;
+  if (fs.existsSync('/proc/sys/fs/binfmt_misc/WSLInterop')) return true;
+  try {
+    const v = fs.readFileSync('/proc/version', 'utf8').toLowerCase();
+    return v.includes('microsoft') || v.includes('wsl');
+  } catch {
+    return false;
+  }
+}

package/src/utils/profile-id.mjs

@@ -0,0 +1,23 @@
+/**
+ * Global helper for Chrome profile ID derivation.
+ * Profile ID = projectName_hash where hash represents the full project path.
+ * Ensures consistent profile naming across open-mode, join-mode, and WSL.
+ */
+
+import path from 'path';
+import crypto from 'crypto';
+
+/**
+ * Compute profile ID components from project directory.
+ * projectName = basename (e.g. cadcloud-ui); hash = md5 of full absolute path.
+ *
+ * @param {string} projectDir - Project root (outputDir), any form
+ * @returns {{ projectName: string, hash: string, profileId: string }}
+ */
+export function getProfileIdFromProjectDir(projectDir) {
+  const absolutePath = path.resolve(projectDir);
+  const projectName = path.basename(absolutePath).replace(/[^a-zA-Z0-9_-]/g, '_');
+  const hash = crypto.createHash('md5').update(absolutePath).digest('hex').substring(0, 12);
+  const profileId = `${projectName}_${hash}`;
+  return { projectName, hash, profileId };
+}

package/src/utils/status-line.mjs

@@ -0,0 +1,47 @@
+/**
+ * Single-line status output – overwrites same line, no line inflation.
+ * Use during long operations (join, connect, etc.) to show progress.
+ */
+
+/** Strip ANSI codes for display length. */
+function stripAnsi(s) {
+  return String(s).replace(/\x1b\[[0-9;]*m/g, '');
+}
+
+let lastLength = 0;
+const INDENT = '  ';
+
+/**
+ * Write status message on current line (overwrites previous).
+ * Only works when stdout is TTY.
+ * @param {string} msg - Message (may contain ANSI)
+ */
+export function writeStatusLine(msg) {
+  if (!process.stdout.isTTY) return;
+  const plain = stripAnsi(msg);
+  const full = INDENT + msg;
+  const pad = lastLength > plain.length + INDENT.length ? ' '.repeat(lastLength - plain.length - INDENT.length) : '';
+  lastLength = Math.max(lastLength, plain.length + INDENT.length);
+  process.stdout.write('\r' + full + pad);
+}
+
+/**
+ * Clear status line. Optionally add newline so next output starts on fresh line.
+ * Call before prompts or when done.
+ * @param {boolean} [ensureNewline=false] - If true, write \\n after clearing
+ */
+export function clearStatusLine(ensureNewline = false) {
+  if (!process.stdout.isTTY || lastLength === 0) return;
+  process.stdout.write('\r' + ' '.repeat(lastLength) + '\r');
+  if (ensureNewline) process.stdout.write('\n');
+  lastLength = 0;
+}
+
+/**
+ * Finish status line with newline (keeps the message visible).
+ */
+export function finishStatusLine() {
+  if (!process.stdout.isTTY || lastLength === 0) return;
+  process.stdout.write('\n');
+  lastLength = 0;
+}