@tng-sh/js 0.1.8 → 0.2.0

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) => {
@@ -244,7 +284,7 @@ program
                     const binaryPath = session._binaryPath;
 
                     const { spawnSync } = require('child_process');
-                    spawnSync(binaryPath, ['trace-results', '--file', tmpFile], {
+                    spawnSync(binaryPath, ['js-trace-results', '--file', tmpFile], {
                         stdio: 'inherit'
                     });
 
@@ -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);
@@ -525,17 +611,20 @@ async function generateTest(filePath, methodName, testType, auditMode = false, j
                 if (saved) {
                     jsonSession.emitEvent('test_saved', {
                         file_path: saved.file_path,
+                        absolute_path: saved.absolute_path,
                         message: `Test saved to: ${saved.file_path}`
                     });
                 } else {
-                    jsonSession.displayError('Failed to save test file');
+                    const details = saveTestFile.lastError ? `: ${saveTestFile.lastError}` : '';
+                    jsonSession.displayError(`Failed to save test file${details}`);
                 }
                 jsonSession.stop();
             } else {
                 if (saved) {
                     console.log(chalk.green(`✓ Test saved to: ${saved.file_path}`));
                 } else {
-                    console.log(chalk.yellow('Failed to save test file'));
+                    const details = saveTestFile.lastError ? `: ${saveTestFile.lastError}` : '';
+                    console.log(chalk.yellow(`Failed to save test file${details}`));
                 }
             }
         }
@@ -558,6 +647,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`));
         }
     }
 
@@ -703,7 +700,7 @@ class GenerateTestsUI {
             if (result && result.success && result.file) {
                 // 2. Show Trace UI
                 const { spawnSync } = require('child_process');
-                spawnSync(this.goUiSession._binaryPath, ['trace-results', '--file', result.file], {
+                spawnSync(this.goUiSession._binaryPath, ['js-trace-results', '--file', result.file], {
                     stdio: 'inherit'
                 });
 

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/lib/saveFile.js

@@ -4,6 +4,7 @@ const chalk = require('chalk');
 const prettier = require('prettier');
 
 const saveTestFile = async (testContent) => {
+    saveTestFile.lastError = null;
     try {
         const parsed = typeof testContent === 'string' ? JSON.parse(testContent) : testContent;
 
@@ -31,6 +32,14 @@ const saveTestFile = async (testContent) => {
             return null;
         }
 
+        // Quick sanity check for likely truncation (common when API cuts the response)
+        const trimmedContent = contentStr.trim();
+        if (trimmedContent.includes('describe(') && !/}\);\s*$/.test(trimmedContent)) {
+            const msg = 'Generated test content appears truncated (missing closing `});`)';
+            console.log(chalk.red.bold(`❌ ${msg}`));
+            return null;
+        }
+
         // Resolve file path
         let filePath = metaSource.test_file_path || metaSource.file_path || metaSource.file_name || metaSource.file ||
             parsed.test_file_path || parsed.file_path || 'generated_test.js';
@@ -60,14 +69,66 @@ const saveTestFile = async (testContent) => {
 
         // Format with Prettier
         let formattedContent = contentStr;
-        try {
+        const tryFormat = async (input) => {
             const prettierOptions = (await prettier.resolveConfig(absolutePath)) || { semi: true, singleQuote: true, parser: 'babel' };
-            // Fallback parser if filepath doesn't help
             if (!prettierOptions.parser) prettierOptions.parser = 'babel';
-            formattedContent = prettier.format(contentStr, { ...prettierOptions, filepath: absolutePath });
+            return prettier.format(input, { ...prettierOptions, filepath: absolutePath });
+        };
+
+        const sanitizeExpectStringHelpers = (input) => {
+            const targets = ['expect.stringContaining("', 'expect.stringMatching("'];
+            let output = '';
+            let idx = 0;
+
+            while (idx < input.length) {
+                let nextIndex = -1;
+                let matched = '';
+                for (const t of targets) {
+                    const i = input.indexOf(t, idx);
+                    if (i !== -1 && (nextIndex === -1 || i < nextIndex)) {
+                        nextIndex = i;
+                        matched = t;
+                    }
+                }
+                if (nextIndex === -1) {
+                    output += input.slice(idx);
+                    break;
+                }
+
+                output += input.slice(idx, nextIndex);
+                const start = nextIndex + matched.length;
+                const end = input.indexOf('")', start);
+                if (end === -1) {
+                    output += input.slice(nextIndex);
+                    break;
+                }
+
+                const inner = input.slice(start, end);
+                const escaped = inner.replace(/`/g, '\\`');
+                const helper = matched.startsWith('expect.stringMatching')
+                    ? 'expect.stringMatching'
+                    : 'expect.stringContaining';
+                output += `${helper}(String.raw\`${escaped}\`)`;
+                idx = end + 2;
+            }
+
+            return output;
+        };
+
+        try {
+            formattedContent = await tryFormat(contentStr);
         } catch (prettierError) {
-            // Best effort formatting
-            console.log(chalk.yellow(`⚠ Prettier formatting failed, saving raw: ${prettierError.message}`));
+            // Try a targeted sanitize pass for malformed string literals, then re-format
+            const sanitized = sanitizeExpectStringHelpers(contentStr);
+            if (sanitized !== contentStr) {
+                try {
+                    formattedContent = await tryFormat(sanitized);
+                } catch (secondError) {
+                    console.log(chalk.yellow(`⚠ Prettier formatting failed after sanitize, saving raw: ${secondError.message}`));
+                }
+            } else {
+                console.log(chalk.yellow(`⚠ Prettier formatting failed, saving raw: ${prettierError.message}`));
+            }
         }
 
         fs.writeFileSync(absolutePath, formattedContent);
@@ -78,9 +139,12 @@ const saveTestFile = async (testContent) => {
             framework: metaSource.framework || parsed.framework || 'jest'
         };
     } catch (error) {
-        console.log(chalk.red.bold(`❌ Failed to save test file: ${error.message}`));
+        saveTestFile.lastError = error?.message || 'Unknown error';
+        console.log(chalk.red.bold(`❌ Failed to save test file: ${saveTestFile.lastError}`));
         return null;
     }
 };
 
+saveTestFile.lastError = null;
+
 module.exports = { saveTestFile };

package/package.json

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