larats 1.0.2 → 1.1.0

package/README.md

@@ -1,7 +1,7 @@
 # LaraTS ⚡
 
 > **Smart Architecture Visualizer & Contextual Module Scaffolder CLI**  
-> Tailor-made for **Laravel** & **TypeScript** (Node.js / Express / React / Monorepo) projects.
+> Tailor-made for **Laravel**, **TypeScript**, and **JavaScript (Node.js)** projects.
 
 [![npm version](https://img.shields.io/npm/v/larats.svg)](https://www.npmjs.com/package/larats)
 [![CI](https://github.com/SidiqFatuh187/Larats/actions/workflows/ci.yml/badge.svg)](https://github.com/SidiqFatuh187/Larats/actions/workflows/ci.yml)
@@ -30,9 +30,12 @@ Run instantly without installation via `npx`:
 # Interactive menu mode
 npx larats
 
-# Or scan architecture directly
+# Scan architecture & display terminal pipeline
 npx larats scan
 
+# Open interactive Mermaid diagram in your browser
+npx larats view
+
 # Or scaffold a new module directly
 npx larats scaffold Payment
 ```
@@ -44,6 +47,38 @@ npm install -g larats
 larats
 ```
 
+
+---
+
+## 👀 How to View Your Project Architecture
+
+LaraTS makes your codebase architecture visible in 4 convenient ways:
+
+1. 🌐 **Interactive Local Browser (`larats view` / `larats scan --view`)**:
+   Spawns a local browser tab displaying the interactive Mermaid flowchart, component counts, and directory tree.
+   ```bash
+   npx larats view
+   # or scan and open viewer immediately
+   npx larats scan --view
+   ```
+
+2. 📟 **Terminal Architecture Pipeline**:
+   Every time you run `larats scan`, LaraTS prints an ASCII pipeline of your request lifecycle directly in the terminal:
+   ```text
+   Client ──> Routes [4] ──> Controllers [4] ──> Services [2] ──> Models [6] ──> Database
+   ```
+
+3. 🐙 **GitHub & GitLab Native Preview**:
+   Commit and push `ARCHITECTURE.md` to your repository. GitHub natively renders Mermaid.js flowcharts into interactive graphics directly on the web page.
+
+4. 💻 **VS Code & Cursor**:
+   Open `ARCHITECTURE.md` and press `Ctrl+Shift+V` (`Cmd+Shift+V` on macOS) to open the built-in Markdown Preview.
+
+5. 📄 **Standalone HTML Export (`--html`)**:
+   Generate a self-contained `ARCHITECTURE.html` file that can be opened in any web browser without any server:
+   ```bash
+   npx larats scan --html
+   ```
 ---
 
 ## ✨ Key Features
@@ -106,19 +141,22 @@ USAGE:
 
 COMMANDS:
   scan                 Scan repository & generate ARCHITECTURE.md
+  view, preview        Open interactive architecture diagram in local browser
   scaffold, make [name] Scaffold a new module or feature with clean boilerplate
   info                 Show detected project type & architectural flavor
   help                 Display help message
 
 OPTIONS:
-  -o, --output <file>    Output markdown path for scan (default: ARCHITECTURE.md)
+  -o, --output <file>    Output path for scan (default: ARCHITECTURE.md)
+  --view                 Open local browser viewer immediately after scanning
+  -t, --tree             Print directory tree in terminal
+  --html                 Also export standalone ARCHITECTURE.html
   -m, --modular          Enforce modular directory structure
   -s, --standard         Enforce standard/layered directory structure
   --dry-run              Simulate generation without writing files
   -f, --force            Overwrite files if they already exist
   -v, --version          Display CLI version
   -h, --help             Display help message
-```
 
 ### Examples
 

package/dist/index.js

@@ -3,6 +3,8 @@
 // src/index.ts
 import fs3 from "fs";
 import path4 from "path";
+import os2 from "os";
+import { exec } from "child_process";
 import { parseArgs } from "util";
 import * as p from "@clack/prompts";
 import pc from "picocolors";
@@ -69,7 +71,7 @@ async function detectProjectType(targetDir = process.cwd()) {
       summary
     };
   }
-  if (hasTsConfig && hasPackageJson) {
+  if (hasPackageJson) {
     const pkg = readJsonSafe(packageJsonPath);
     const allDeps = {
       ...pkg?.dependencies || {},
@@ -91,13 +93,15 @@ async function detectProjectType(targetDir = process.cwd()) {
     const hasSrc = fs.existsSync(path.join(resolvedDir, "src"));
     const srcDir = hasSrc ? "src" : ".";
     const isModular = fs.existsSync(path.join(resolvedDir, srcDir, "modules")) || fs.existsSync(path.join(resolvedDir, "modules"));
-    const extras = [framework !== "node-vanilla" ? framework : "TypeScript"];
+    const isTypeScript = hasTsConfig || "typescript" in allDeps;
+    const stackLabel = isTypeScript ? "TypeScript" : "JavaScript / Node.js";
+    const extras = [framework !== "node-vanilla" ? framework : stackLabel];
     if (hasPrisma) extras.push("Prisma");
     if (hasTypeORM) extras.push("TypeORM");
     if (hasDrizzle) extras.push("Drizzle");
     if (isMonorepo) extras.push("Monorepo");
     if (isModular) extras.push("Modular");
-    const summary = `TypeScript (${extras.join(", ")})`;
+    const summary = isTypeScript ? `TypeScript (${extras.join(", ")})` : `JavaScript / Node.js (${extras.join(", ")})`;
     return {
       type: "typescript",
       name: pkg?.name || dirName,
@@ -109,7 +113,8 @@ async function detectProjectType(targetDir = process.cwd()) {
         hasDrizzle,
         isMonorepo,
         isModular,
-        srcDir
+        srcDir,
+        isTypeScript
       },
       summary
     };
@@ -505,7 +510,7 @@ ${f}`;
 }
 function mermaidLabel(str, maxLen = 40) {
   if (!str) return "";
-  let cleaned = str.replace(/"/g, "'").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/`/g, "'").replace(/[\r\n]+/g, " ").trim();
+  let cleaned = str.replace(/"/g, "'").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/`/g, "'").replace(/[\[\]\(\)\{\}]/g, "").replace(/[\r\n]+/g, " ").trim();
   if (cleaned.length > maxLen) {
     cleaned = cleaned.slice(0, maxLen - 3) + "...";
   }
@@ -908,6 +913,183 @@ ${fence(directoryTree || "(Empty directory structure)", "text")}
 ${securityNotice}
 `;
 }
+function renderTerminalFlow(scanResult) {
+  const { projectInfo, components } = scanResult;
+  const steps = [];
+  if (projectInfo.type === "laravel") {
+    steps.push("Client");
+    const routes = components["Routes"]?.count ?? 0;
+    if (routes > 0) steps.push(`Routes [${routes}]`);
+    const requests = components["Form Requests"]?.count ?? 0;
+    if (requests > 0) steps.push(`Requests [${requests}]`);
+    const controllers = components["Controllers"]?.count ?? 0;
+    if (controllers > 0) steps.push(`Controllers [${controllers}]`);
+    const services = (components["Services"]?.count ?? 0) + (components["Actions"]?.count ?? 0);
+    if (services > 0) steps.push(`Services [${services}]`);
+    const models = components["Models"]?.count ?? 0;
+    if (models > 0) steps.push(`Models [${models}]`);
+    steps.push("Database");
+  } else if (projectInfo.type === "typescript") {
+    const hasAnyLayer = ["Controllers", "Services", "Repositories", "Routes", "DTOs & Schemas", "Models & Entities", "UI Components"].some((k) => (components[k]?.count ?? 0) > 0);
+    if (hasAnyLayer) {
+      steps.push("Client");
+      const ui = components["UI Components"]?.count ?? 0;
+      if (ui > 0) steps.push(`UI [${ui}]`);
+      const routes = components["Routes"]?.count ?? 0;
+      if (routes > 0) steps.push(`Router [${routes}]`);
+      const dtos = components["DTOs & Schemas"]?.count ?? 0;
+      if (dtos > 0) steps.push(`DTOs [${dtos}]`);
+      const controllers = components["Controllers"]?.count ?? 0;
+      if (controllers > 0) steps.push(`Controllers [${controllers}]`);
+      const services = components["Services"]?.count ?? 0;
+      if (services > 0) steps.push(`Services [${services}]`);
+      const data = (components["Repositories"]?.count ?? 0) + (components["Models & Entities"]?.count ?? 0);
+      if (data > 0) steps.push(`Data Layer [${data}]`);
+      steps.push("Database");
+    } else {
+      const src = components["Source Files"]?.count ?? 0;
+      const tests = components["Test Files"]?.count ?? 0;
+      steps.push("CLI / Entrypoint");
+      if (src > 0) steps.push(`Source Modules [${src}]`);
+      if (tests > 0) steps.push(`Test Suites [${tests}]`);
+    }
+  } else {
+    const src = components["Source Files"]?.count ?? 0;
+    const tests = components["Test Files"]?.count ?? 0;
+    steps.push("Project Root");
+    if (src > 0) steps.push(`Source [${src}]`);
+    if (tests > 0) steps.push(`Tests [${tests}]`);
+  }
+  return steps.join(" \u2500\u2500> ");
+}
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function generateArchitectureHtml(scanResult) {
+  const { projectInfo, totalFilesScanned, components, modules, directoryTree } = scanResult;
+  const mermaid = generateMermaidDiagram(scanResult);
+  const componentRowsHtml = Object.entries(components).map(([, comp]) => {
+    const samples = comp.files.slice(0, 3).map((f) => `<code>${escapeHtml(f)}</code>`).join(", ");
+    const more = comp.files.length > 3 ? ` <span class="muted">(+${comp.files.length - 3} more)</span>` : "";
+    return `<tr>
+        <td><strong>${escapeHtml(comp.name)}</strong></td>
+        <td><span class="badge">${comp.count}</span></td>
+        <td>${escapeHtml(comp.description)}</td>
+        <td>${samples ? samples + more : "-"}</td>
+      </tr>`;
+  }).join("\n");
+  const modulesHtml = modules.length > 0 ? `<div class="card">
+        <h2>\u{1F4E6} Detected Modules & Domains (${modules.length})</h2>
+        <div class="modules-grid">
+          ${modules.map((m) => `<div class="module-item"><code>${escapeHtml(m)}</code></div>`).join("\n")}
+        </div>
+      </div>` : "";
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>LaraTS Architecture: ${escapeHtml(projectInfo.name)}</title>
+  <style>
+    :root {
+      --bg: #0f172a;
+      --card-bg: #1e293b;
+      --text: #f8fafc;
+      --muted: #94a3b8;
+      --border: #334155;
+      --primary: #38bdf8;
+      --accent: #818cf8;
+    }
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      background: var(--bg);
+      color: var(--text);
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      line-height: 1.5;
+      padding: 2rem 1rem;
+    }
+    .container { max-width: 1080px; margin: 0 auto; }
+    header { margin-bottom: 2rem; border-bottom: 1px solid var(--border); padding-bottom: 1.5rem; }
+    .header-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
+    h1 { font-size: 1.8rem; font-weight: 700; color: #fff; }
+    .pill { background: #0284c7; color: #fff; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.85rem; font-weight: 600; }
+    .subtitle { color: var(--muted); margin-top: 0.5rem; font-size: 0.95rem; }
+    .card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 1.5rem; margin-bottom: 2rem; }
+    h2 { font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; color: #e2e8f0; }
+    table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; font-size: 0.9rem; }
+    th, td { text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); }
+    th { color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
+    .badge { background: #334155; padding: 0.2rem 0.6rem; border-radius: 4px; font-weight: 600; font-size: 0.85rem; }
+    code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; background: #090d16; padding: 0.15rem 0.4rem; border-radius: 4px; font-size: 0.85rem; color: #38bdf8; }
+    pre { background: #090d16; padding: 1rem; border-radius: 6px; overflow-x: auto; font-size: 0.85rem; border: 1px solid var(--border); line-height: 1.4; }
+    .mermaid-box { display: flex; justify-content: center; background: #090d16; border-radius: 8px; padding: 2rem 1rem; overflow-x: auto; border: 1px solid var(--border); }
+    .modules-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+    .module-item { background: #090d16; border: 1px solid var(--border); border-radius: 6px; padding: 0.5rem 1rem; }
+    .muted { color: var(--muted); font-size: 0.85rem; }
+    footer { text-align: center; color: var(--muted); font-size: 0.85rem; margin-top: 3rem; }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <header>
+      <div class="header-top">
+        <div>
+          <h1>\u{1F3DB}\uFE0F Architecture Overview: ${escapeHtml(projectInfo.name)}</h1>
+          <p class="subtitle">Stack: <strong>${escapeHtml(projectInfo.summary)}</strong> &bull; Total Files: <strong>${totalFilesScanned}</strong></p>
+        </div>
+        <span class="pill">LaraTS Architecture Map</span>
+      </div>
+    </header>
+
+    <div class="card">
+      <h2>\u{1F5FA}\uFE0F Interactive Architecture Flowchart</h2>
+      <div class="mermaid-box">
+        <pre class="mermaid">${mermaid}</pre>
+      </div>
+    </div>
+
+    <div class="card">
+      <h2>\u{1F4CA} Architectural Component Statistics</h2>
+      <table>
+        <thead>
+          <tr>
+            <th>Component Layer</th>
+            <th>Files</th>
+            <th>Description</th>
+            <th>Sample Files</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${componentRowsHtml || '<tr><td colspan="4">No architectural components detected</td></tr>'}
+        </tbody>
+      </table>
+    </div>
+
+    ${modulesHtml}
+
+    <div class="card">
+      <h2>\u{1F332} Directory Structure Tree</h2>
+      <pre><code>${escapeHtml(directoryTree || "(Empty directory)")}</code></pre>
+    </div>
+
+    <footer>
+      Generated locally &amp; offline with \u2764\uFE0F by <strong>LaraTS CLI</strong>
+    </footer>
+  </div>
+
+  <script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
+  <script>
+    if (typeof mermaid !== 'undefined') {
+      mermaid.initialize({
+        startOnLoad: true,
+        theme: 'dark',
+        flowchart: { curve: 'basis' }
+      });
+    }
+  </script>
+</body>
+</html>`;
+}
 
 // src/generator/scaffolder.ts
 import fs2 from "fs";
@@ -1850,7 +2032,7 @@ async function scaffoldModule(projectInfo, options) {
 }
 
 // src/index.ts
-var VERSION = true ? "1.0.2" : "1.0.1";
+var VERSION = true ? "1.1.0" : "1.1.0";
 function showHelp() {
   console.log(`
 ${pc.bold(pc.cyan("LaraTS CLI"))} ${pc.gray(`v${VERSION}`)}
@@ -1862,19 +2044,22 @@ ${pc.bold("USAGE:")}
 
 ${pc.bold("COMMANDS:")}
   ${pc.green("scan")}                 Scan repository & generate ARCHITECTURE.md
+  ${pc.green("view")}, ${pc.green("preview")}          Open interactive architecture diagram in local browser
   ${pc.green("scaffold")}, ${pc.green("make")} [name] Scaffold a new module or feature with clean boilerplate
   ${pc.green("info")}                 Show detected project type & architectural flavor
   ${pc.green("help")}                 Display this help message
 
 ${pc.bold("OPTIONS:")}
-  ${pc.yellow("-o, --output")} <file>    Output markdown path for scan (default: ARCHITECTURE.md)
+  ${pc.yellow("-o, --output")} <file>    Output path for scan (default: ARCHITECTURE.md)
+  ${pc.yellow("--view")}                 Open local browser viewer immediately after scanning
+  ${pc.yellow("-t, --tree")}             Print directory tree in terminal
+  ${pc.yellow("--html")}                 Also export standalone ARCHITECTURE.html
   ${pc.yellow("-m, --modular")}          Enforce modular directory structure
   ${pc.yellow("-s, --standard")}         Enforce standard/layered directory structure
   ${pc.yellow("--dry-run")}              Simulate generation without writing files
   ${pc.yellow("-f, --force")}            Overwrite files if they already exist
   ${pc.yellow("-v, --version")}          Display CLI version
   ${pc.yellow("-h, --help")}             Display this help message
-
 ${pc.bold("EXAMPLES:")}
   ${pc.cyan("$")} larats
   ${pc.cyan("$")} larats scan
@@ -1887,6 +2072,43 @@ function handleCancel() {
   p.cancel(pc.yellow("Operation cancelled. See you next time! \u{1F44B}"));
   process.exit(0);
 }
+function checkAndPromptStar() {
+  try {
+    const configDir = path4.join(os2.homedir(), ".larats");
+    const statsFile = path4.join(configDir, "stats.json");
+    if (!fs3.existsSync(configDir)) {
+      fs3.mkdirSync(configDir, { recursive: true });
+    }
+    let stats = {};
+    if (fs3.existsSync(statsFile)) {
+      stats = JSON.parse(fs3.readFileSync(statsFile, "utf-8"));
+    }
+    const runs = (stats.runs || 0) + 1;
+    stats.runs = runs;
+    fs3.writeFileSync(statsFile, JSON.stringify(stats, null, 2), "utf-8");
+    if (runs === 2 || runs === 3) {
+      console.log(
+        `
+${pc.yellow("\u2B50 Enjoying LaraTS?")} If you find this CLI useful, please consider giving it a star on GitHub:
+   ${pc.bold(pc.cyan("\u{1F449} https://github.com/SidiqFatuh187/larats-cli"))}
+`
+      );
+    }
+  } catch {
+  }
+}
+function openViewer(destination) {
+  const startCmd = process.platform === "win32" ? `start "" "${destination}"` : process.platform === "darwin" ? `open "${destination}"` : `xdg-open "${destination}"`;
+  try {
+    exec(startCmd, (err) => {
+      if (err) {
+        p.log.warn(`Could not open browser automatically. Please open ${pc.cyan(destination)} manually.`);
+      }
+    });
+  } catch {
+    p.log.warn(`Could not open browser automatically. Please open ${pc.cyan(destination)} manually.`);
+  }
+}
 async function runScan(projectInfo, outputPath = "ARCHITECTURE.md", options = {}) {
   const spinner2 = p.spinner();
   spinner2.start("Scanning codebase structure & components (strict ignore list active)...");
@@ -1915,15 +2137,25 @@ To protect user files from accidental overwrites, use --force to overwrite.`
     const scanResult = await scanProject(projectInfo);
     const nonZeroLayers = Object.values(scanResult.components).filter((c) => c.count > 0).length;
     const totalComponents = Object.values(scanResult.components).reduce((sum, c) => sum + c.count, 0);
+    const terminalFlow = renderTerminalFlow(scanResult);
     if (options.dryRun) {
       spinner2.stop(pc.green(`Scan completed in ${scanResult.scanDurationMs}ms (dry run)`));
       p.note(
-        `${pc.bold("Scanned Files:")} ${scanResult.totalFilesScanned}
+        `${pc.bold("Architecture Flow:")}
+  ${pc.cyan(terminalFlow)}
+
+${pc.bold("Scanned Files:")} ${scanResult.totalFilesScanned}
 ${pc.bold("Total Components:")} ${totalComponents} across ${nonZeroLayers} active architectural layers
 ${pc.bold("Modules Detected:")} ${scanResult.modules.length > 0 ? scanResult.modules.join(", ") : "None (monolithic structure)"}
 ${pc.bold("Simulated Output:")} Would write ARCHITECTURE.md to ${pc.cyan(outputPath)} (dry run: no files written)`,
         pc.green("Architecture Map (Dry Run) \u{1F5FA}\uFE0F")
       );
+      if (options.tree) {
+        console.log(`
+${pc.bold("Directory Tree:")}
+${scanResult.directoryTree}
+`);
+      }
       p.outro(pc.cyan("Dry run completed: no files written."));
       return;
     }
@@ -1934,14 +2166,38 @@ ${pc.bold("Simulated Output:")} Would write ARCHITECTURE.md to ${pc.cyan(outputP
       fs3.mkdirSync(parentDir, { recursive: true });
     }
     fs3.writeFileSync(destination, markdown, "utf-8");
+    const shouldWriteHtml = options.html || options.view;
+    if (shouldWriteHtml) {
+      const htmlDestination = destination.replace(/\.md$/i, "") + ".html";
+      fs3.writeFileSync(htmlDestination, generateArchitectureHtml(scanResult), "utf-8");
+      p.log.success(`HTML architecture saved to ${pc.cyan(path4.relative(projectInfo.rootPath, htmlDestination) || htmlDestination)}`);
+      if (options.view) {
+        openViewer(htmlDestination);
+        p.log.info(pc.green("\u{1F310} Opened interactive architecture diagram in your browser!"));
+      }
+    }
+    if (options.tree) {
+      console.log(`
+${pc.bold("Directory Tree:")}
+${scanResult.directoryTree}
+`);
+    }
     p.note(
-      `${pc.bold("Scanned Files:")} ${scanResult.totalFilesScanned}
+      `${pc.bold("Architecture Flow:")}
+  ${pc.cyan(terminalFlow)}
+
+${pc.bold("Scanned Files:")} ${scanResult.totalFilesScanned}
 ${pc.bold("Total Components:")} ${totalComponents} across ${nonZeroLayers} active architectural layers
 ${pc.bold("Modules Detected:")} ${scanResult.modules.length > 0 ? scanResult.modules.join(", ") : "None (monolithic structure)"}
-${pc.bold("Documentation:")} Saved to ${pc.cyan(path4.relative(projectInfo.rootPath, destination) || outputPath)}`,
+${pc.bold("Documentation:")} Saved to ${pc.cyan(path4.relative(projectInfo.rootPath, destination) || outputPath)}
+
+${pc.bold("\u{1F4A1} How to view diagram:")}
+  \u2022 On GitHub: Push ${outputPath} (Mermaid renders automatically)
+  \u2022 In VS Code: Press ${pc.yellow("Ctrl+Shift+V")} for Markdown Preview
+  \u2022 In Browser: Run ${pc.cyan("npx larats view")} for instant local web preview`,
       pc.green("Architecture Map Generated! \u{1F5FA}\uFE0F")
     );
-    p.outro(pc.cyan(`Open ${outputPath} to view your project structure & Mermaid diagram!`));
+    p.outro(pc.cyan(`Done! Open ${outputPath} or run "npx larats view" to inspect architecture!`));
   } catch (err) {
     spinner2.stop(pc.red("Scan failed"));
     p.log.error(err.message || String(err));
@@ -2172,6 +2428,9 @@ async function main() {
         standard: { type: "boolean", short: "s" },
         force: { type: "boolean", short: "f" },
         "dry-run": { type: "boolean" },
+        view: { type: "boolean" },
+        tree: { type: "boolean", short: "t" },
+        html: { type: "boolean" },
         version: { type: "boolean", short: "v" },
         help: { type: "boolean", short: "h" }
       },
@@ -2193,8 +2452,16 @@ async function main() {
     return;
   }
   const command = parsed.positionals[0];
-  const VALID_COMMANDS = /* @__PURE__ */ new Set(["scan", "scaffold", "make", "info", "help"]);
-  if (command && !VALID_COMMANDS.has(command)) {
+  const VALID_COMMANDS = {
+    scan: true,
+    view: true,
+    preview: true,
+    scaffold: true,
+    make: true,
+    info: true,
+    help: true
+  };
+  if (command && !VALID_COMMANDS[command]) {
     console.error(pc.red(`Error: Unknown command "${command}".`));
     showHelp();
     process.exitCode = 1;
@@ -2205,14 +2472,41 @@ async function main() {
   const isStandardFlag = parsed.values.standard;
   const isForceFlag = parsed.values.force;
   const isDryRunFlag = parsed.values["dry-run"];
+  const isViewFlag = parsed.values.view;
+  const isTreeFlag = parsed.values.tree;
+  const isHtmlFlag = parsed.values.html;
   const projectInfo = await detectProjectType(process.cwd());
   if (command === "scan") {
     p.intro(`${pc.bgCyan(pc.black(" LaraTS "))} ${pc.gray(`v${VERSION}`)} - Scanning Architecture`);
     p.log.info(`Detected: ${pc.green(projectInfo.summary)}`);
     await runScan(projectInfo, outputPath, {
       force: isForceFlag,
-      dryRun: isDryRunFlag
+      dryRun: isDryRunFlag,
+      view: isViewFlag,
+      tree: isTreeFlag,
+      html: isHtmlFlag
     });
+    checkAndPromptStar();
+    return;
+  }
+  if (command === "view" || command === "preview") {
+    p.intro(`${pc.bgCyan(pc.black(" LaraTS "))} ${pc.gray(`v${VERSION}`)} - Architecture Viewer`);
+    p.log.info(`Target: ${pc.green(projectInfo.summary)}`);
+    const spinner2 = p.spinner();
+    spinner2.start("Scanning repository & generating architecture map...");
+    const scanResult = await scanProject(projectInfo);
+    spinner2.stop(pc.green(`Scanned ${scanResult.totalFilesScanned} files in ${scanResult.scanDurationMs}ms`));
+    const htmlDestination = path4.resolve(projectInfo.rootPath, "ARCHITECTURE.html");
+    fs3.writeFileSync(htmlDestination, generateArchitectureHtml(scanResult), "utf-8");
+    openViewer(htmlDestination);
+    p.note(
+      `${pc.bold("File:")} ${pc.cyan("ARCHITECTURE.html")}
+Interactive Mermaid.js flowchart & component breakdown loaded in your browser.
+Double-click ${pc.cyan("ARCHITECTURE.html")} anytime to view offline!`,
+      pc.green("Opened in Browser! \u{1F310}")
+    );
+    p.outro(pc.cyan("Done!"));
+    checkAndPromptStar();
     return;
   }
   if (command === "scaffold" || command === "make") {
@@ -2225,12 +2519,14 @@ async function main() {
       force: isForceFlag,
       dryRun: isDryRunFlag
     });
+    checkAndPromptStar();
     return;
   }
   if (command === "info") {
     p.intro(`${pc.bgCyan(pc.black(" LaraTS "))} ${pc.gray(`v${VERSION}`)}`);
     showProjectInfo(projectInfo);
     p.outro(pc.cyan("Done."));
+    checkAndPromptStar();
     return;
   }
   if (!process.stdin.isTTY) {
@@ -2248,6 +2544,11 @@ async function main() {
         label: "\u{1F50D} Scan Architecture & Generate ARCHITECTURE.md",
         hint: "Creates component stats, directory tree & Mermaid flowchart"
       },
+      {
+        value: "view",
+        label: "\u{1F310} Open Interactive Architecture Viewer in Browser",
+        hint: "Spawns local browser tab with Mermaid flowchart & stats"
+      },
       {
         value: "scaffold",
         label: "\u{1F3D7}\uFE0F  Scaffold New Feature / Module",
@@ -2270,8 +2571,20 @@ async function main() {
   if (action === "scan") {
     await runScan(projectInfo, outputPath, {
       force: isForceFlag,
-      dryRun: isDryRunFlag
+      dryRun: isDryRunFlag,
+      view: isViewFlag,
+      tree: isTreeFlag,
+      html: isHtmlFlag
     });
+  } else if (action === "view") {
+    const spinner2 = p.spinner();
+    spinner2.start("Scanning repository & generating architecture map...");
+    const scanResult = await scanProject(projectInfo);
+    spinner2.stop(pc.green(`Scanned in ${scanResult.scanDurationMs}ms`));
+    const htmlDestination = path4.resolve(projectInfo.rootPath, "ARCHITECTURE.html");
+    fs3.writeFileSync(htmlDestination, generateArchitectureHtml(scanResult), "utf-8");
+    openViewer(htmlDestination);
+    p.outro(pc.green("\u{1F310} Opened interactive architecture diagram in your browser!"));
   } else if (action === "scaffold") {
     await runScaffold(projectInfo, void 0, {
       modular: isModularFlag,
@@ -2283,9 +2596,13 @@ async function main() {
     showProjectInfo(projectInfo);
     p.outro(pc.cyan("Done!"));
   }
+  checkAndPromptStar();
 }
 main().catch((err) => {
   p.log.error(pc.red(`Fatal error: ${err.message || String(err)}`));
   process.exit(1);
 });
+export {
+  checkAndPromptStar
+};
 //# sourceMappingURL=index.js.map