@tng-sh/js 0.1.1 → 0.1.3

package/bin/tng.js

@@ -28,7 +28,7 @@ process.on('uncaughtException', (err) => {
 program
     .name('tng')
     .description('TNG - Automated Test Generation, and audit generation for JavaScript')
-    .version('0.1.1');
+    .version('0.1.3');
 
 /**
  * @command init
@@ -143,6 +143,65 @@ program
         launchInteractive();
     });
 
+/**
+ * @command xray
+ * Generate X-Ray (Mermaid Visualization)
+ */
+program
+    .command('xray')
+    .alias('x')
+    .description('Generate X-Ray visualization')
+    .option('-f, --file <path>', 'Input file path')
+    .option('-m, --method <name>', 'Method name to visualize')
+    .action(async (options) => {
+        if (!options.file || !options.method) {
+            console.log(chalk.red('Error: Both --file and --method are required for X-Ray.'));
+            console.log(chalk.yellow('Usage: tng xray -f <file> -m <method>'));
+            process.exit(1);
+        }
+
+        console.log(chalk.blue(`🔍 Generating X-Ray for ${options.method} in ${options.file}...`));
+
+        try {
+            const config = loadConfig();
+
+            // Re-use logic similar to _handleXrayFlow but tailored for CLI non-interactive output
+            const { generateTest } = require('../index');
+
+            // We use a custom callback to show progress
+            const callback = (msg, percent) => {
+                if (percent % 20 === 0) console.log(chalk.dim(`[${percent}%] ${msg}`));
+            };
+
+            // We pass 'visualize' as the test type
+            const resultJson = generateTest(
+                path.resolve(options.file),
+                options.method,
+                null,
+                'visualize',
+                JSON.stringify(config),
+                callback
+            );
+
+            let mermaidCode = "";
+            try {
+                const parsed = JSON.parse(resultJson);
+                mermaidCode = parsed.mermaid_code || resultJson;
+            } 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'));
+
+        } catch (e) {
+            console.log(chalk.red(`Error: ${e.message}`));
+            process.exit(1);
+        }
+    });
+
 /**
  * Main command handler (handles -f and -m)
  */
@@ -151,10 +210,51 @@ program
     .option('-f, --file <path>', 'JavaScript file path')
     .option('-t, --type <type>', 'Component type (react_component, express_handler, etc) [required]')
     .option('-a, --audit', 'Run audit mode instead of test generation')
+    .option('--trace', 'Run symbolic trace visualization')
     .option('--json', 'Output results as JSON events (machine-readable)')
 
     .action(async (options) => {
         if (options.method && options.file) {
+            if (options.trace) {
+                const { getSymbolicTrace } = require('../index');
+                const GoUISession = require('../lib/goUiSession');
+
+                try {
+                    const traceJson = getSymbolicTrace(
+                        path.resolve(options.file),
+                        options.method,
+                        null
+                    );
+
+                    if (options.json) {
+                        console.log(traceJson);
+                        return;
+                    }
+
+                    // Create temp file for the trace
+                    const tmpDir = require('os').tmpdir();
+                    const tmpFile = path.join(tmpDir, `trace-${Date.now()}.json`);
+                    fs.writeFileSync(tmpFile, traceJson);
+
+                    // Launch Go UI
+                    const session = new GoUISession();
+                    const binaryPath = session._binaryPath;
+
+                    const { spawnSync } = require('child_process');
+                    spawnSync(binaryPath, ['trace-results', '--file', tmpFile], {
+                        stdio: 'inherit'
+                    });
+
+                    // Cleanup
+                    try { fs.unlinkSync(tmpFile); } catch (e) { }
+
+                } catch (e) {
+                    console.log(chalk.red(`Trace failed: ${e.message}`));
+                    process.exit(1);
+                }
+                return;
+            }
+
             if (!options.type && !options.audit) {
                 console.log(chalk.red('Error: --type <type> is required.'));
                 process.exit(1);

package/index.d.ts

@@ -44,3 +44,5 @@ export declare function applyEditsAtomic(operationsJson: string): string
  * Analyzes code, submits a job, and polls for the final generated test.
  */
 export declare function generateTest(filePath: string, methodName: string, className: string | undefined | null, testType: string | undefined | null, configJson: string, callback: (...args: any[]) => any): string
+/** Analyzes a method and generates a symbolic execution trace. */
+export declare function getSymbolicTrace(filePath: string, methodName: string, className?: string | undefined | null): string

package/index.js

@@ -310,7 +310,7 @@ if (!nativeBinding) {
   throw new Error(`Failed to load native binding`)
 }
 
-const { getFileOutline, getProjectMetadata, findCallSites, ping, submitJob, getUserStats, runAudit, applyEdit, applyEditsAtomic, generateTest } = nativeBinding
+const { getFileOutline, getProjectMetadata, findCallSites, ping, submitJob, getUserStats, runAudit, applyEdit, applyEditsAtomic, generateTest, getSymbolicTrace } = nativeBinding
 
 module.exports.getFileOutline = getFileOutline
 module.exports.getProjectMetadata = getProjectMetadata
@@ -322,3 +322,4 @@ module.exports.runAudit = runAudit
 module.exports.applyEdit = applyEdit
 module.exports.applyEditsAtomic = applyEditsAtomic
 module.exports.generateTest = generateTest
+module.exports.getSymbolicTrace = getSymbolicTrace

package/lib/generateTestsUi.js

@@ -34,6 +34,12 @@ class GenerateTestsUI {
             } else if (choice === 'audit') {
                 const result = await this._showFileSelection(true);
                 if (result === 'exit') return 'exit';
+            } else if (choice === 'xray') {
+                const result = await this._showFileSelection(false, true);
+                if (result === 'exit') return 'exit';
+            } else if (choice === 'trace') {
+                const result = await this._showFileSelection(false, false, true);
+                if (result === 'exit') return 'exit';
             } else if (choice === 'stats') {
                 await this._showStats();
             } else if (choice === 'about') {
@@ -95,7 +101,7 @@ class GenerateTestsUI {
         });
     }
 
-    async _showFileSelection(isAudit = false) {
+    async _showFileSelection(isAudit = false, isXray = false, isTrace = false) {
         const files = await this._getUserFiles();
 
         if (files.length === 0) {
@@ -109,19 +115,23 @@ class GenerateTestsUI {
             path: path.dirname(file)
         }));
 
-        const title = isAudit ? 'Select JavaScript File to Audit' : 'Select JavaScript File';
+        let title = 'Select JavaScript File';
+        if (isAudit) title = 'Select JavaScript File to Audit';
+        else if (isXray) title = 'Select File for X-Ray';
+        else if (isTrace) title = 'Select File for Symbolic Trace';
+
         const selectedName = this.goUiSession.showListView(title, items);
 
         if (selectedName === 'back') return 'back';
         if (!selectedName || selectedName === 'exit') return 'exit';
 
         const selectedFile = path.resolve(cwd, selectedName);
-        const result = await this._showMethodsForFile(selectedFile, isAudit);
+        const result = await this._showMethodsForFile(selectedFile, isAudit, isXray, isTrace);
         if (result === 'main_menu') return 'main_menu';
         return result;
     }
 
-    async _showMethodsForFile(filePath, isAudit = false) {
+    async _showMethodsForFile(filePath, isAudit = false, isXray = false, isTrace = false) {
         let outline;
         try {
             const result = getFileOutline(filePath);
@@ -144,33 +154,48 @@ class GenerateTestsUI {
             methodData: m
         }));
 
-        const title = isAudit ? `Select Method to Audit for ${fileName}` : `Select Method for ${fileName}`;
+        let title = 'Select Method';
+        if (isAudit) title = `Select Method to Audit for ${fileName}`;
+        else if (isXray) title = `Select Method to X-Ray for ${fileName}`;
+        else if (isTrace) title = `Select Method to Trace for ${fileName}`;
+
         const selectedDisplay = this.goUiSession.showListView(title, items);
 
-        if (selectedDisplay === 'back' || !selectedDisplay) return this._showFileSelection(isAudit);
+        if (selectedDisplay === 'back' || !selectedDisplay) return this._showFileSelection(isAudit, isXray, isTrace);
 
         const selectedMethod = items.find(i => i.name === selectedDisplay)?.methodData;
 
         if (selectedMethod) {
+            if (isTrace) {
+                await this._launchTrace(filePath, selectedMethod.name);
+                return this._showFileSelection(isAudit, isXray, isTrace);
+            }
+
+            if (isXray) {
+                const choice = await this._generateTestsForMethod(filePath, selectedMethod, 'visualize', false, true);
+                if (choice === 'main_menu') return 'main_menu';
+                return this._showFileSelection(isAudit, isXray);
+            }
+
             const testType = this.goUiSession.showJsTestMenu();
-            if (testType === 'back') return this._showFileSelection(isAudit);
+            if (testType === 'back') return this._showFileSelection(isAudit, isXray);
 
             const finalType = testType === 'auto' ? null : testType;
             const choice = await this._generateTestsForMethod(filePath, selectedMethod, finalType, isAudit);
 
             if (isAudit) {
                 if (choice === 'main_menu') return 'main_menu';
-                return this._showFileSelection(isAudit);
+                return this._showFileSelection(isAudit, isXray);
             }
 
             if (choice && choice.file_path && !choice.error) {
                 this._showPostGenerationMenu(choice);
             }
         }
-        return this._showFileSelection(isAudit);
+        return this._showFileSelection(isAudit, isXray);
     }
 
-    async _generateTestsForMethod(filePath, method, testType, isAudit = false) {
+    async _generateTestsForMethod(filePath, method, testType, isAudit = false, isXray = false) {
         if (!this._hasApiKey()) {
             return { error: 'No API key' };
         }
@@ -179,6 +204,10 @@ class GenerateTestsUI {
             return this._handleAuditFlow(filePath, method, testType);
         }
 
+        if (isXray) {
+            return this._handleXrayFlow(filePath, method);
+        }
+
         const fileName = path.basename(filePath);
         const displayName = method.class_name ? `${method.class_name}#${method.name}` : `${fileName}#${method.name}`;
         return this._handleTestGenerationFlow(filePath, method, testType, displayName);
@@ -395,6 +424,78 @@ class GenerateTestsUI {
         return uiResult || null;
     }
 
+    async _handleXrayFlow(filePath, method) {
+        const actionName = 'Generating X-Ray for';
+        const displayName = method.name;
+
+        const progressHandler = async (progress) => {
+            progress.update('Analyzing method structure...');
+
+            try {
+                const config = loadConfig();
+                // Override test_type to 'visualize' which behaves like test generation but returns Mermaid code
+                const resultJson = generateTest(
+                    filePath,
+                    method.name,
+                    method.class_name || null,
+                    'visualize',
+                    JSON.stringify(config),
+                    (msg, percent) => {
+                        // Simple progress updates
+                        progress.update(msg, { percent });
+                    }
+                );
+
+                // The result is expected to be a JSON string containing the mermaid definition
+                // But generateTest returns the full file content usually.
+                // We need to clarify if Backend returns just Mermaid or a file.
+                // Assuming Backend returns JSON with { "visualize_result": "mermaid code..." } or similar
+                // or if it returns raw text, we handle it.
+
+                // For 'visualize' type, existing backend generates a file or JSON.
+                // We should parse it.
+                let mermaidCode = "";
+                try {
+                    const parsed = JSON.parse(resultJson);
+                    if (parsed.mermaid_code) mermaidCode = parsed.mermaid_code;
+                    else mermaidCode = resultJson; // Fallback
+                } catch (e) {
+                    mermaidCode = resultJson;
+                }
+
+                return {
+                    success: true,
+                    mermaidCode: mermaidCode
+                };
+            } catch (e) {
+                progress.error(`Failed to generate X-Ray: ${e.message}`);
+                return { error: e.message };
+            }
+        };
+
+        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) { }
+        }
+
+        return result;
+    }
+
     _updateProgress(progress, msg, percent) {
         const agentMap = {
             'context_agent_status': { label: 'Context Builder', step: 1 },
@@ -572,6 +673,41 @@ class GenerateTestsUI {
             return [];
         }
     }
+
+    async _launchTrace(filePath, methodName) {
+        const { getSymbolicTrace } = require('../index');
+        const fs = require('fs');
+        const path = require('path');
+        const chalk = require('chalk');
+
+        try {
+            // 1. Generate Trace (with Spinner)
+            const result = this.goUiSession.showSpinner(`Tracing ${methodName}...`, () => {
+                try {
+                    const traceJson = getSymbolicTrace(filePath, methodName, null);
+                    const tmpDir = require('os').tmpdir();
+                    const f = path.join(tmpDir, `trace-${Date.now()}.json`);
+                    fs.writeFileSync(f, traceJson);
+                    return { success: true, file: f };
+                } catch (e) {
+                    return { success: false, message: e.message };
+                }
+            });
+
+            if (result && result.success && result.file) {
+                // 2. Show Trace UI
+                const { spawnSync } = require('child_process');
+                spawnSync(this.goUiSession._binaryPath, ['trace-results', '--file', result.file], {
+                    stdio: 'inherit'
+                });
+
+                try { fs.unlinkSync(result.file); } catch (e) { }
+            }
+
+        } catch (e) {
+            console.error(chalk.red(`Trace error: ${e.message}`));
+        }
+    }
 }
 
 module.exports = GenerateTestsUI;

package/package.json

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