react-doctor-cli-dev 1.0.2 → 1.0.3

package/cli/dist/commands/dashboard.js

@@ -0,0 +1,152 @@
+"use strict";
+// ─────────────────────────────────────────────────────────────
+// cli/src/commands/dashboard.ts
+//
+// react-doctor dashboard
+//
+// Opens the React Doctor dashboard in the browser.
+//
+// WHAT IT DOES:
+//   1. Checks if the backend is already running on the port
+//   2. If not — starts it automatically (same logic as --upload)
+//   3. Opens http://localhost:PORT in the default browser
+//
+// This command is the natural companion to --upload.
+// Workflow:
+//   react-doctor full ./my-app --upload   ← runs analysis + saves report
+//   react-doctor dashboard                ← opens the dashboard to view it
+//
+// Or in one shot:
+//   react-doctor full ./my-app --upload && react-doctor dashboard
+// ─────────────────────────────────────────────────────────────
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.registerDashboardCommand = registerDashboardCommand;
+const path_1 = __importDefault(require("path"));
+const fs_1 = __importDefault(require("fs"));
+const axios_1 = __importDefault(require("axios"));
+const child_process_1 = require("child_process");
+const chalk_1 = __importDefault(require("chalk"));
+const ui_1 = require("../ui");
+function registerDashboardCommand(program) {
+    program
+        .command("dashboard")
+        .description("Open the React Doctor dashboard (auto-starts backend if needed)")
+        .option("--port <port>", "Port the backend runs on", "3000")
+        .option("--api-key <key>", "API key for the backend", process.env.REACT_DOCTOR_API_KEY || "react-doctor-secret-key-change-this")
+        .option("--no-banner", "Skip the banner")
+        .action(async (options) => {
+        if (!options.noBanner)
+            (0, ui_1.printBanner)();
+        const port = options.port;
+        const apiUrl = `http://localhost:${port}`;
+        (0, ui_1.printSection)("Dashboard");
+        (0, ui_1.printInfo)("Backend URL", apiUrl);
+        console.log();
+        const spin = (0, ui_1.spinner)("Checking backend status...");
+        try {
+            // ── 1. Check if backend is already up ─────────────────
+            let backendRunning = false;
+            try {
+                await axios_1.default.get(`${apiUrl}/health`, { timeout: 2000 });
+                backendRunning = true;
+            }
+            catch {
+                backendRunning = false;
+            }
+            // ── 2. Start backend if not running ───────────────────
+            if (!backendRunning) {
+                spin.text = "  Backend not running — starting automatically...";
+                // Locate backend folder (sibling of cli/)
+                const projectRoot = path_1.default.resolve(__dirname, "..", "..", "..");
+                const backendRoot = path_1.default.resolve(projectRoot, "backend");
+                const backendDist = path_1.default.join(backendRoot, "dist", "index.js");
+                const backendSrc = path_1.default.join(backendRoot, "src", "index.ts");
+                let command;
+                let args;
+                if (fs_1.default.existsSync(backendDist)) {
+                    command = "node";
+                    args = [backendDist];
+                }
+                else if (fs_1.default.existsSync(backendSrc)) {
+                    command = "npx";
+                    args = ["ts-node", backendSrc];
+                }
+                else {
+                    spin.fail(chalk_1.default.red("Backend not found"));
+                    (0, ui_1.printFail)(`Could not find backend at: ${backendRoot}\n\n` +
+                        `  Make sure the 'backend/' folder exists next to 'cli/'.`);
+                    process.exit(1);
+                }
+                // Create data dir inside npm global cache for the backend DB
+                const dataDir = path_1.default.join(backendRoot, "data");
+                fs_1.default.mkdirSync(dataDir, { recursive: true });
+                (0, child_process_1.spawn)(command, args, {
+                    stdio: "ignore",
+                    detached: true,
+                    env: {
+                        ...process.env,
+                        API_KEY: options.apiKey,
+                        PORT: port,
+                        DB_PATH: path_1.default.join(dataDir, "reports.db"),
+                    },
+                    cwd: backendRoot,
+                }).unref(); // let CLI exit without killing the server
+                // Wait for backend to be ready (up to 15 seconds)
+                let ready = false;
+                let retries = 0;
+                while (!ready && retries < 15) {
+                    try {
+                        await axios_1.default.get(`${apiUrl}/health`, { timeout: 1000 });
+                        ready = true;
+                    }
+                    catch {
+                        await new Promise(r => setTimeout(r, 1000));
+                        retries++;
+                    }
+                }
+                if (!ready) {
+                    spin.fail(chalk_1.default.red("Backend failed to start"));
+                    (0, ui_1.printFail)("Backend did not respond after 15 seconds.");
+                    process.exit(1);
+                }
+                spin.succeed(chalk_1.default.green("Backend started successfully"));
+            }
+            else {
+                spin.succeed(chalk_1.default.green("Backend already running"));
+            }
+            // ── 3. Open dashboard in default browser ──────────────
+            const dashboardUrl = apiUrl;
+            console.log();
+            (0, ui_1.printInfo)("Opening", dashboardUrl);
+            console.log();
+            // Cross-platform browser open
+            const openCmd = process.platform === "win32" ? ["cmd", ["/c", "start", dashboardUrl]] :
+                process.platform === "darwin" ? ["open", [dashboardUrl]] :
+                    ["xdg-open", [dashboardUrl]];
+            (0, child_process_1.spawn)(openCmd[0], openCmd[1], {
+                stdio: "ignore",
+                detached: true,
+            }).unref();
+            (0, ui_1.printDone)(`Dashboard opened at ${chalk_1.default.cyan(dashboardUrl)}`);
+            // ── 4. Show quick API reference ───────────────────────
+            console.log(chalk_1.default.gray("  Available endpoints:"));
+            console.log(chalk_1.default.cyan(`    GET  ${apiUrl}/health`));
+            console.log(chalk_1.default.cyan(`    GET  ${apiUrl}/api/reports`));
+            console.log(chalk_1.default.cyan(`    GET  ${apiUrl}/api/reports/:id`));
+            console.log(chalk_1.default.cyan(`    GET  ${apiUrl}/api/reports/project/:name`));
+            console.log(chalk_1.default.cyan(`    POST ${apiUrl}/api/reports/upload`));
+            console.log();
+            console.log(chalk_1.default.gray("  Tip: run ") +
+                chalk_1.default.cyan("react-doctor full ./ --upload") +
+                chalk_1.default.gray(" to add a new report.\n"));
+        }
+        catch (err) {
+            spin.fail(chalk_1.default.red("Dashboard failed to open"));
+            console.log(chalk_1.default.red(`\n  ${err.message}\n`));
+            process.exit(1);
+        }
+    });
+}

package/cli/dist/index.js

@@ -1,77 +1,51 @@
 #!/usr/bin/env node
 "use strict";
 // ─────────────────────────────────────────────────────────────
-// cli/src/index.ts
-//
-// The CLI entry point. This is the file that runs when the
-// user types "react-doctor" in their terminal.
-//
-// HOW IT WORKS:
-// 1. Commander.js parses the command and flags from argv
-// 2. The matching command handler is called
-// 3. The handler imports core modules and runs the pipeline
-//
-// HOW THE BINARY REGISTRATION WORKS:
-// package.json has a "bin" field:
-//   "bin": { "react-doctor": "./dist/index.js" }
-//
-// After "npm link" (dev) or "npm install" (production),
-// npm creates a symlink from the system's bin directory
-// to this file. That's what makes "react-doctor" a real
-// terminal command available anywhere.
-//
-// THE SHEBANG (#!/usr/bin/env node) on line 1:
-// This tells the OS to run this file with Node.js when
-// called directly as a script. Without it, the OS doesn't
-// know which interpreter to use.
+// cli/src/index.ts  —  CLI entry point
 // ─────────────────────────────────────────────────────────────
 Object.defineProperty(exports, "__esModule", { value: true });
 const commander_1 = require("commander");
 const analyze_1 = require("./commands/analyze");
 const profile_1 = require("./commands/profile");
 const full_1 = require("./commands/full");
-const install_1 = require("./commands/install");
+const dashboard_1 = require("./commands/dashboard");
 const program = new commander_1.Command();
 // ── Program metadata ──────────────────────────────────────────
 program
     .name("react-doctor")
     .description("React performance analyzer — static analysis + runtime profiling + smart suggestions")
-    .version("1.0.0");
-// ── Register all commands ─────────────────────────────────────
-// Each function adds one command to the program.
-// The order here is the order they appear in --help output.
+    .version("1.0.2");
+// ── Register commands ─────────────────────────────────────────
 (0, full_1.registerFullCommand)(program); // react-doctor full
 (0, analyze_1.registerAnalyzeCommand)(program); // react-doctor analyze
 (0, profile_1.registerProfileCommand)(program); // react-doctor profile
-(0, install_1.registerInstallCommand)(program); // react-doctor install
-// ── Usage examples shown at bottom of --help ─────────────────
+(0, dashboard_1.registerDashboardCommand)(program); // react-doctor dashboard
+// ── Usage examples ────────────────────────────────────────────
 program.addHelpText("after", `
 Examples:
-  $ react-doctor full ./my-app                       Desktop only (default)
-  $ react-doctor full ./my-app --mobile              Mobile only
-  $ react-doctor full ./my-app --desktop --mobile    Both desktop and mobile
-  $ react-doctor full ./my-app --cpu 4               Simulate slow Android device
-  $ react-doctor full ./my-app --throttle slow4g     Simulate slow 4G network
-  $ react-doctor full ./my-app --throttle 3g         Simulate 3G network
-  $ react-doctor full ./my-app --cpu 4 --throttle 3g Slow device + slow network
-  $ react-doctor full ./my-app --upload              Upload results to dashboard
+  $ react-doctor full ./my-app                          Run full diagnostic (desktop)
+  $ react-doctor full ./my-app --mobile                 Include mobile viewport
+  $ react-doctor full ./my-app --desktop --mobile       Both desktop and mobile
+  $ react-doctor full ./my-app --cpu 4                  Simulate slow Android device
+  $ react-doctor full ./my-app --throttle slow4g        Simulate slow 4G network
+  $ react-doctor full ./my-app --throttle 3g            Simulate 3G network
+  $ react-doctor full ./my-app --cpu 4 --throttle 3g   Slow device + slow network
+  $ react-doctor full ./my-app --upload                 Run + save report to dashboard
 
-  $ react-doctor analyze ./my-app                    Static code analysis only
-  $ react-doctor analyze ./my-app --full             Static + runtime + rules
+  $ react-doctor analyze ./my-app                       Static code analysis only
+  $ react-doctor analyze ./my-app --full                Static + runtime + rules
 
-  $ react-doctor profile ./my-app                    Desktop only (default)
-  $ react-doctor profile ./my-app --mobile           Mobile only
-  $ react-doctor profile ./my-app --desktop --mobile Both devices
-  $ react-doctor profile ./my-app --cpu 4            4x CPU slowdown simulation
-  $ react-doctor profile ./my-app --throttle slow4g  Simulate slow 4G network
-  $ react-doctor profile ./my-app --throttle 3g      Simulate 3G network
+  $ react-doctor profile ./my-app                       Runtime profiling only (desktop)
+  $ react-doctor profile ./my-app --mobile              Mobile viewport
+  $ react-doctor profile ./my-app --desktop --mobile    Both devices
+  $ react-doctor profile ./my-app --cpu 4               4x CPU slowdown simulation
+  $ react-doctor profile ./my-app --throttle slow4g     Simulate slow 4G network
+  $ react-doctor profile ./my-app --throttle 3g         Simulate 3G network
 
-  $ react-doctor install                       Install from GitHub into a project
-  $ react-doctor install --path ./my-app       Install into a specific folder
+  $ react-doctor dashboard                              Open dashboard (auto-starts backend)
+  $ react-doctor dashboard --port 4000                  Use custom port
 `);
 // ── Show help if called with no arguments ─────────────────────
-// Without this, calling "react-doctor" with no command just
-// exits silently, which is confusing. This prints help instead.
 if (process.argv.length < 3) {
     program.help();
 }

package/cli/src/commands/dashboard.ts

@@ -0,0 +1,179 @@
+// ─────────────────────────────────────────────────────────────
+// cli/src/commands/dashboard.ts
+//
+// react-doctor dashboard
+//
+// Opens the React Doctor dashboard in the browser.
+//
+// WHAT IT DOES:
+//   1. Checks if the backend is already running on the port
+//   2. If not — starts it automatically (same logic as --upload)
+//   3. Opens http://localhost:PORT in the default browser
+//
+// This command is the natural companion to --upload.
+// Workflow:
+//   react-doctor full ./my-app --upload   ← runs analysis + saves report
+//   react-doctor dashboard                ← opens the dashboard to view it
+//
+// Or in one shot:
+//   react-doctor full ./my-app --upload && react-doctor dashboard
+// ─────────────────────────────────────────────────────────────
+
+import { Command } from "commander";
+import path        from "path";
+import fs          from "fs";
+import axios       from "axios";
+import { spawn }   from "child_process";
+import chalk       from "chalk";
+import {
+  printBanner, printSection,
+  printDone, printFail, printInfo, spinner,
+} from "../ui";
+
+export function registerDashboardCommand(program: Command): void {
+  program
+    .command("dashboard")
+    .description("Open the React Doctor dashboard (auto-starts backend if needed)")
+    .option(
+      "--port <port>",
+      "Port the backend runs on",
+      "3000",
+    )
+    .option(
+      "--api-key <key>",
+      "API key for the backend",
+      process.env.REACT_DOCTOR_API_KEY || "react-doctor-secret-key-change-this",
+    )
+    .option("--no-banner", "Skip the banner")
+    .action(async (options) => {
+
+      if (!options.noBanner) printBanner();
+
+      const port   = options.port;
+      const apiUrl = `http://localhost:${port}`;
+
+      printSection("Dashboard");
+      printInfo("Backend URL", apiUrl);
+      console.log();
+
+      const spin = spinner("Checking backend status...");
+
+      try {
+        // ── 1. Check if backend is already up ─────────────────
+        let backendRunning = false;
+        try {
+          await axios.get(`${apiUrl}/health`, { timeout: 2000 });
+          backendRunning = true;
+        } catch {
+          backendRunning = false;
+        }
+
+        // ── 2. Start backend if not running ───────────────────
+        if (!backendRunning) {
+          spin.text = "  Backend not running — starting automatically...";
+
+          // Locate backend folder (sibling of cli/)
+          const projectRoot  = path.resolve(__dirname, "..", "..", "..");
+          const backendRoot  = path.resolve(projectRoot, "backend");
+          const backendDist  = path.join(backendRoot, "dist", "index.js");
+          const backendSrc   = path.join(backendRoot, "src",  "index.ts");
+
+          let command: string;
+          let args: string[];
+
+          if (fs.existsSync(backendDist)) {
+            command = "node";
+            args    = [backendDist];
+          } else if (fs.existsSync(backendSrc)) {
+            command = "npx";
+            args    = ["ts-node", backendSrc];
+          } else {
+            spin.fail(chalk.red("Backend not found"));
+            printFail(
+              `Could not find backend at: ${backendRoot}\n\n` +
+              `  Make sure the 'backend/' folder exists next to 'cli/'.`,
+            );
+            process.exit(1);
+          }
+
+          // Create data dir inside npm global cache for the backend DB
+          const dataDir = path.join(backendRoot, "data");
+          fs.mkdirSync(dataDir, { recursive: true });
+
+          spawn(command, args, {
+            stdio: "ignore",
+            detached: true,
+            env: {
+              ...process.env,
+              API_KEY: options.apiKey,
+              PORT:    port,
+              DB_PATH: path.join(dataDir, "reports.db"),
+            },
+            cwd: backendRoot,
+          }).unref(); // let CLI exit without killing the server
+
+          // Wait for backend to be ready (up to 15 seconds)
+          let ready   = false;
+          let retries = 0;
+          while (!ready && retries < 15) {
+            try {
+              await axios.get(`${apiUrl}/health`, { timeout: 1000 });
+              ready = true;
+            } catch {
+              await new Promise(r => setTimeout(r, 1000));
+              retries++;
+            }
+          }
+
+          if (!ready) {
+            spin.fail(chalk.red("Backend failed to start"));
+            printFail("Backend did not respond after 15 seconds.");
+            process.exit(1);
+          }
+
+          spin.succeed(chalk.green("Backend started successfully"));
+        } else {
+          spin.succeed(chalk.green("Backend already running"));
+        }
+
+        // ── 3. Open dashboard in default browser ──────────────
+        const dashboardUrl = apiUrl;
+
+        console.log();
+        printInfo("Opening", dashboardUrl);
+        console.log();
+
+        // Cross-platform browser open
+        const openCmd =
+          process.platform === "win32"  ? ["cmd",  ["/c", "start", dashboardUrl]] :
+          process.platform === "darwin" ? ["open", [dashboardUrl]] :
+                                          ["xdg-open", [dashboardUrl]];
+
+        spawn(openCmd[0] as string, openCmd[1] as string[], {
+          stdio: "ignore",
+          detached: true,
+        }).unref();
+
+        printDone(`Dashboard opened at ${chalk.cyan(dashboardUrl)}`);
+
+        // ── 4. Show quick API reference ───────────────────────
+        console.log(chalk.gray("  Available endpoints:"));
+        console.log(chalk.cyan(`    GET  ${apiUrl}/health`));
+        console.log(chalk.cyan(`    GET  ${apiUrl}/api/reports`));
+        console.log(chalk.cyan(`    GET  ${apiUrl}/api/reports/:id`));
+        console.log(chalk.cyan(`    GET  ${apiUrl}/api/reports/project/:name`));
+        console.log(chalk.cyan(`    POST ${apiUrl}/api/reports/upload`));
+        console.log();
+        console.log(
+          chalk.gray("  Tip: run ") +
+          chalk.cyan("react-doctor full ./ --upload") +
+          chalk.gray(" to add a new report.\n"),
+        );
+
+      } catch (err: any) {
+        spin.fail(chalk.red("Dashboard failed to open"));
+        console.log(chalk.red(`\n  ${err.message}\n`));
+        process.exit(1);
+      }
+    });
+}

package/cli/src/index.ts

@@ -1,35 +1,13 @@
 #!/usr/bin/env node
 // ─────────────────────────────────────────────────────────────
-// cli/src/index.ts
-//
-// The CLI entry point. This is the file that runs when the
-// user types "react-doctor" in their terminal.
-//
-// HOW IT WORKS:
-// 1. Commander.js parses the command and flags from argv
-// 2. The matching command handler is called
-// 3. The handler imports core modules and runs the pipeline
-//
-// HOW THE BINARY REGISTRATION WORKS:
-// package.json has a "bin" field:
-//   "bin": { "react-doctor": "./dist/index.js" }
-//
-// After "npm link" (dev) or "npm install" (production),
-// npm creates a symlink from the system's bin directory
-// to this file. That's what makes "react-doctor" a real
-// terminal command available anywhere.
-//
-// THE SHEBANG (#!/usr/bin/env node) on line 1:
-// This tells the OS to run this file with Node.js when
-// called directly as a script. Without it, the OS doesn't
-// know which interpreter to use.
+// cli/src/index.ts  —  CLI entry point
 // ─────────────────────────────────────────────────────────────
 
 import { Command } from "commander";
-import { registerAnalyzeCommand } from "./commands/analyze";
-import { registerProfileCommand } from "./commands/profile";
-import { registerFullCommand }    from "./commands/full";
-import { registerInstallCommand }  from "./commands/install";
+import { registerAnalyzeCommand }   from "./commands/analyze";
+import { registerProfileCommand }   from "./commands/profile";
+import { registerFullCommand }      from "./commands/full";
+import { registerDashboardCommand } from "./commands/dashboard";
 
 const program = new Command();
 
@@ -37,46 +15,41 @@ const program = new Command();
 program
   .name("react-doctor")
   .description("React performance analyzer — static analysis + runtime profiling + smart suggestions")
-  .version("1.0.0");
+  .version("1.0.2");
 
-// ── Register all commands ─────────────────────────────────────
-// Each function adds one command to the program.
-// The order here is the order they appear in --help output.
+// ── Register commands ─────────────────────────────────────────
+registerFullCommand(program);       // react-doctor full
+registerAnalyzeCommand(program);    // react-doctor analyze
+registerProfileCommand(program);    // react-doctor profile
+registerDashboardCommand(program);  // react-doctor dashboard
 
-registerFullCommand(program);      // react-doctor full
-registerAnalyzeCommand(program);   // react-doctor analyze
-registerProfileCommand(program);   // react-doctor profile
-registerInstallCommand(program);   // react-doctor install
-
-// ── Usage examples shown at bottom of --help ─────────────────
+// ── Usage examples ────────────────────────────────────────────
 program.addHelpText("after", `
 Examples:
-  $ react-doctor full ./my-app                       Desktop only (default)
-  $ react-doctor full ./my-app --mobile              Mobile only
-  $ react-doctor full ./my-app --desktop --mobile    Both desktop and mobile
-  $ react-doctor full ./my-app --cpu 4               Simulate slow Android device
-  $ react-doctor full ./my-app --throttle slow4g     Simulate slow 4G network
-  $ react-doctor full ./my-app --throttle 3g         Simulate 3G network
-  $ react-doctor full ./my-app --cpu 4 --throttle 3g Slow device + slow network
-  $ react-doctor full ./my-app --upload              Upload results to dashboard
-
-  $ react-doctor analyze ./my-app                    Static code analysis only
-  $ react-doctor analyze ./my-app --full             Static + runtime + rules
-
-  $ react-doctor profile ./my-app                    Desktop only (default)
-  $ react-doctor profile ./my-app --mobile           Mobile only
-  $ react-doctor profile ./my-app --desktop --mobile Both devices
-  $ react-doctor profile ./my-app --cpu 4            4x CPU slowdown simulation
-  $ react-doctor profile ./my-app --throttle slow4g  Simulate slow 4G network
-  $ react-doctor profile ./my-app --throttle 3g      Simulate 3G network
-
-  $ react-doctor install                       Install from GitHub into a project
-  $ react-doctor install --path ./my-app       Install into a specific folder
+  $ react-doctor full ./my-app                          Run full diagnostic (desktop)
+  $ react-doctor full ./my-app --mobile                 Include mobile viewport
+  $ react-doctor full ./my-app --desktop --mobile       Both desktop and mobile
+  $ react-doctor full ./my-app --cpu 4                  Simulate slow Android device
+  $ react-doctor full ./my-app --throttle slow4g        Simulate slow 4G network
+  $ react-doctor full ./my-app --throttle 3g            Simulate 3G network
+  $ react-doctor full ./my-app --cpu 4 --throttle 3g   Slow device + slow network
+  $ react-doctor full ./my-app --upload                 Run + save report to dashboard
+
+  $ react-doctor analyze ./my-app                       Static code analysis only
+  $ react-doctor analyze ./my-app --full                Static + runtime + rules
+
+  $ react-doctor profile ./my-app                       Runtime profiling only (desktop)
+  $ react-doctor profile ./my-app --mobile              Mobile viewport
+  $ react-doctor profile ./my-app --desktop --mobile    Both devices
+  $ react-doctor profile ./my-app --cpu 4               4x CPU slowdown simulation
+  $ react-doctor profile ./my-app --throttle slow4g     Simulate slow 4G network
+  $ react-doctor profile ./my-app --throttle 3g         Simulate 3G network
+
+  $ react-doctor dashboard                              Open dashboard (auto-starts backend)
+  $ react-doctor dashboard --port 4000                  Use custom port
 `);
 
 // ── Show help if called with no arguments ─────────────────────
-// Without this, calling "react-doctor" with no command just
-// exits silently, which is confusing. This prints help instead.
 if (process.argv.length < 3) {
   program.help();
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-doctor-cli-dev",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "React performance analyzer with static analysis, runtime profiling, rule engine, and dashboard upload",
   "main": "index.js",
   "type": "commonjs",