@tng-sh/js 0.1.8 → 0.1.9

package/bin/tng.js

@@ -28,7 +28,35 @@ process.on('uncaughtException', (err) => {
 program
     .name('tng')
     .description('TNG - Advanced Code Audit, Test Generation, Visualization, Clone Detection, and Dead Code Analysis for JavaScript/TypeScript')
-    .version('0.1.8');
+    .version('0.1.9');
+
+/**
+ * Copy text to system clipboard
+ */
+function copyToClipboard(text) {
+    const { execSync } = require('child_process');
+    try {
+        if (process.platform === 'darwin') {
+            execSync('pbcopy', { input: text });
+            return true;
+        } else if (process.platform === 'linux') {
+            try {
+                execSync('xclip -selection clipboard', { input: text });
+                return true;
+            } catch (e) {
+                try {
+                    execSync('xsel --clipboard --input', { input: text });
+                    return true;
+                } catch (e2) {
+                    return false;
+                }
+            }
+        }
+    } catch (e) {
+        return false;
+    }
+    return false;
+}
 
 /**
  * @command init
@@ -153,6 +181,7 @@ program
     .description('Generate X-Ray visualization')
     .option('-f, --file <path>', 'Input file path')
     .option('-m, --method <name>', 'Method name to visualize')
+    .option('-j, --json', 'Output results in JSON format')
     .action(async (options) => {
         if (!options.file || !options.method) {
             console.log(chalk.red('Error: Both --file and --method are required for X-Ray.'));
@@ -183,18 +212,28 @@ program
                 callback
             );
 
+            if (options.json) {
+                console.log(resultJson);
+                return;
+            }
+
             let mermaidCode = "";
+            let explanation = "";
             try {
                 const parsed = JSON.parse(resultJson);
                 mermaidCode = parsed.mermaid_code || resultJson;
+                explanation = parsed.explanation || "";
             } catch (e) {
                 mermaidCode = resultJson;
             }
 
-            console.log(chalk.bold('\n--- X-Ray Result (Mermaid.js) ---\n'));
-            console.log(chalk.blue(mermaidCode));
-            console.log(chalk.bold('\n---------------------------------\n'));
-            console.log(chalk.green('✓ Copy the code above and paste into https://mermaid.live'));
+            // Copy to clipboard
+            copyToClipboard(mermaidCode);
+
+            // Launch Premium UI
+            const GoUISession = require('../lib/goUiSession');
+            const session = new GoUISession();
+            await session.showXrayResults(options.method, '', mermaidCode, explanation);
 
         } catch (e) {
             console.log(chalk.red(`Error: ${e.message}`));
@@ -214,6 +253,7 @@ program
     .option('-c, --clones', 'Run duplicate code detection')
     .option('-l, --level <level>', 'Set clone detection level (1: token, 2: structural, 3: fuzzy, or all)', 'all')
     .option('-d, --deadcode', 'Run dead code detection (JS/TS/React)')
+    .option('--xray', 'Generate X-Ray visualization (Mermaid flowchart)')
     .option('--json', 'Output results as JSON events (machine-readable)')
 
     .action(async (options) => {
@@ -258,6 +298,52 @@ program
                 return;
             }
 
+            if (options.xray) {
+                const config = loadConfig();
+                const { generateTest: nativeGenerateTest } = require('../index');
+
+                try {
+                    const resultJson = nativeGenerateTest(
+                        path.resolve(options.file),
+                        options.method,
+                        null,
+                        'visualize',
+                        JSON.stringify(config),
+                        (msg, percent) => {
+                            if (options.json) return;
+                            if (percent % 20 === 0) console.log(chalk.dim(`[${percent}%] ${msg}`));
+                        }
+                    );
+
+                    if (options.json) {
+                        console.log(resultJson);
+                        return;
+                    }
+
+                    // For global --xray, we just launch the Premium UI directly if not JSON
+                    const GoUISession = require('../lib/goUiSession');
+                    const session = new GoUISession();
+                    let mermaidCode = "";
+                    let explanation = "";
+                    try {
+                        const parsed = JSON.parse(resultJson);
+                        mermaidCode = parsed.mermaid_code || resultJson;
+                        explanation = parsed.explanation || "";
+                    } catch (e) {
+                        mermaidCode = resultJson;
+                    }
+
+                    // Copy to clipboard
+                    copyToClipboard(mermaidCode);
+
+                    await session.showXrayResults(options.method, '', mermaidCode, explanation);
+                } catch (e) {
+                    console.log(chalk.red(`X-Ray failed: ${e.message}`));
+                    process.exit(1);
+                }
+                return;
+            }
+
             if (!options.type && !options.audit) {
                 console.log(chalk.red('Error: --type <type> is required.'));
                 process.exit(1);
@@ -558,6 +644,11 @@ program.on('--help', () => {
     console.log('  3: Fuzzy (Fuzzy structural, catches patterns with small variations)');
     console.log('  all: Runs all detection levels (default)');
     console.log('');
+    console.log('X-Ray Visualization:');
+    console.log('  tng src/components/MyComponent.js render --xray');
+    console.log('  tng --file=api/handler.js --method=post --xray --json');
+    console.log('  tng xray -f src/utils.js -m processData');
+    console.log('');
 });
 
 program.parse(process.argv);

package/lib/generateTestsUi.js

@@ -461,17 +461,19 @@ class GenerateTestsUI {
                 // For 'visualize' type, existing backend generates a file or JSON.
                 // We should parse it.
                 let mermaidCode = "";
+                let explanation = "";
                 try {
                     const parsed = JSON.parse(resultJson);
-                    if (parsed.mermaid_code) mermaidCode = parsed.mermaid_code;
-                    else mermaidCode = resultJson; // Fallback
+                    mermaidCode = parsed.mermaid_code || resultJson;
+                    explanation = parsed.explanation || "";
                 } catch (e) {
                     mermaidCode = resultJson;
                 }
 
                 return {
                     success: true,
-                    mermaidCode: mermaidCode
+                    mermaidCode: mermaidCode,
+                    explanation: explanation
                 };
             } catch (e) {
                 progress.error(`Failed to generate X-Ray: ${e.message}`);
@@ -482,21 +484,16 @@ class GenerateTestsUI {
         const result = await this.goUiSession.showProgress(`${actionName} ${displayName}`, progressHandler);
 
         if (result && result.mermaidCode) {
-            console.log(chalk.bold('\n--- X-Ray Result (Mermaid.js) ---\n'));
-            // Simple highlighting for terminal
-            console.log(chalk.blue(result.mermaidCode));
-            console.log(chalk.bold('\n---------------------------------\n'));
-
-            // Prompt user action
-            this._copyToClipboard(result.mermaidCode);
-            console.log(chalk.green('✓ Copied to clipboard! Paste into https://mermaid.live'));
-
-            // Wait for user confirmation to return
-            const { execSync } = require('child_process');
-            try {
-                // Just a pause hack if we want, but showListView might be better.
-                // For now, let's just return.
-            } catch (e) { }
+            // Copy to clipboard first so it's ready for the user
+            this._copyToClipboard(result.mermaidCode, true);
+
+            // Show Premium X-Ray UI
+            await this.goUiSession.showXrayResults(
+                method.name,
+                method.class_name || '',
+                result.mermaidCode,
+                result.explanation || 'Logic flow visualization generated by TNG.'
+            );
         }
 
         return result;
@@ -614,12 +611,12 @@ class GenerateTestsUI {
         return { passed, failed, errors, total };
     }
 
-    _copyToClipboard(text) {
+    _copyToClipboard(text, silent = false) {
         const { execSync } = require('child_process');
         try {
             if (process.platform === 'darwin') {
                 execSync('pbcopy', { input: text });
-                this.goUiSession.showClipboardSuccess(text);
+                if (!silent) this.goUiSession.showClipboardSuccess(text);
             } else if (process.platform === 'linux') {
                 // Try xclip then xsel
                 try {
@@ -627,12 +624,12 @@ class GenerateTestsUI {
                 } catch (e) {
                     execSync('xsel --clipboard --input', { input: text });
                 }
-                this.goUiSession.showClipboardSuccess(text);
+                if (!silent) this.goUiSession.showClipboardSuccess(text);
             } else {
-                console.log(chalk.cyan(`\n📋 Please copy this command: ${text}\n`));
+                if (!silent) console.log(chalk.cyan(`\n📋 Please copy this command: ${text}\n`));
             }
         } catch (e) {
-            console.error(chalk.yellow(`\n⚠️  Failed to copy to clipboard. Command: ${text}\n`));
+            if (!silent) console.error(chalk.yellow(`\n⚠️  Failed to copy to clipboard. Command: ${text}\n`));
         }
     }
 

package/lib/goUiSession.js

@@ -369,6 +369,29 @@ class GoUISession {
         }
     }
 
+    async showXrayResults(methodName, className, mermaidCode, explanation) {
+        const data = {
+            method_name: methodName,
+            class_name: className,
+            mermaid_code: mermaidCode,
+            explanation: explanation
+        };
+        const inputFile = this._trackTempFile(this._createTempFile('xray-data', '.json'));
+
+        try {
+            fs.writeFileSync(inputFile, JSON.stringify(data));
+
+            spawnSync(this._binaryPath, ['xray-results', '--file', inputFile], {
+                stdio: 'inherit',
+                env: process.env
+            });
+        } catch (error) {
+            console.error('X-Ray results display error:', error.message);
+        } finally {
+            this._cleanupTempFile(inputFile);
+        }
+    }
+
     async showDeadCodeResults(filePath, resultsJson) {
         const issues = JSON.parse(resultsJson);
         const data = {

package/lib/jsonSession.js

@@ -66,6 +66,10 @@ class JsonSession {
         this.emitEvent('result', auditResult || {});
     }
 
+    showXrayResults(xrayResult) {
+        this.emitEvent('result', xrayResult || {});
+    }
+
     showClones(filePath, results) {
         this.emitEvent('clones', { file_path: filePath, matches: results });
     }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@tng-sh/js",
-    "version": "0.1.8",
+    "version": "0.1.9",
     "description": "TNG JavaScript CLI",
     "repository": {
         "type": "git",