mcp-pentester-cli 1.0.0

package/dist/ui/tui.js

@@ -0,0 +1,872 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TUI = void 0;
+const blessed_1 = __importDefault(require("blessed"));
+class TUI {
+    constructor() {
+        this.currentView = 'tools';
+        this.trafficLines = [];
+        this.trafficPairs = [];
+        this.activePanel = 'sidebar';
+        this.pendingRequests = new Map(); // Track requests waiting for responses
+        this.currentPopupContent = null;
+        this.showRawInPopup = false;
+        this.screen = blessed_1.default.screen({
+            smartCSR: true,
+            title: 'MCP Pentester CLI - IntegSec',
+        });
+        this.layout = this.createLayout();
+        this.setupKeyBindings();
+    }
+    showSplashScreen() {
+        const splash = blessed_1.default.box({
+            parent: this.screen,
+            top: 'center',
+            left: 'center',
+            width: 70,
+            height: 18,
+            border: { type: 'line' },
+            style: {
+                border: { fg: 'cyan', bold: true },
+            },
+            content: `{center}{cyan-fg}{bold}
+ ██▓ ███▄    █ ▄▄▄█████▓▓█████   ▄████   ██████ ▓█████  ▄████▄
+▓██▒ ██ ▀█   █ ▓  ██▒ ▓▒▓█   ▀  ██▒ ▀█▒▒██    ▒ ▓█   ▀ ▒██▀ ▀█
+▒██▒▓██  ▀█ ██▒▒ ▓██░ ▒░▒███   ▒██░▄▄▄░░ ▓██▄   ▒███   ▒▓█    ▄
+░██░▓██▒  ▐▌██▒░ ▓██▓ ░ ▒▓█  ▄ ░▓█  ██▓  ▒   ██▒▒▓█  ▄ ▒▓▓▄ ▄██▒
+░██░▒██░   ▓██░  ▒██▒ ░ ░▒████▒░▒▓███▀▒▒██████▒▒░▒████▒▒ ▓███▀ ░
+░▓  ░ ▒░   ▒ ▒   ▒ ░░   ░░ ▒░ ░ ░▒   ▒ ▒ ▒▓▒ ▒ ░░░ ▒░ ░░ ░▒ ▒  ░
+ ▒ ░░ ░░   ░ ▒░    ░     ░ ░  ░  ░   ░ ░ ░▒  ░ ░ ░ ░  ░  ░  ▒
+ ▒ ░   ░   ░ ░   ░         ░   ░ ░   ░ ░  ░  ░     ░   ░
+ ░           ░             ░  ░      ░       ░     ░  ░░ ░
+{/bold}{/cyan-fg}
+{bold}{yellow-fg}MCP Pentester CLI v1.0.0{/yellow-fg}{/bold}
+{green-fg}{bold}integsec.com{/bold}{/green-fg} {gray-fg}|{/gray-fg} {white-fg}Security Testing{/white-fg}
+{gray-fg}© 2025 IntegSec - All Rights Reserved{/gray-fg}
+{green-fg}Press any key (auto-closes in 2s)...{/green-fg}{/center}`,
+            tags: true,
+        });
+        this.screen.render();
+        const closeHandler = () => {
+            if (!splash.detached) {
+                splash.destroy();
+                this.screen.render();
+            }
+        };
+        // Auto-close after 2 seconds
+        setTimeout(closeHandler, 2000);
+        // Or close on any keypress
+        this.screen.once('keypress', closeHandler);
+    }
+    createLayout() {
+        // IntegSec Logo (top right)
+        const logo = blessed_1.default.box({
+            parent: this.screen,
+            top: 0,
+            right: 0,
+            width: 20,
+            height: 5,
+            tags: true,
+            content: '{right}{cyan-fg}{bold}IntegSec{/bold}\n{gray-fg}Security\nTesting{/gray-fg}{/cyan-fg}{/right}',
+            style: {
+                fg: 'cyan',
+            },
+        });
+        // Sidebar (left panel) - Navigation
+        const sidebar = blessed_1.default.list({
+            parent: this.screen,
+            label: ' Navigation ',
+            tags: true,
+            top: 0,
+            left: 0,
+            width: '20%',
+            height: '70%',
+            border: { type: 'line' },
+            style: {
+                border: { fg: 'cyan' },
+                selected: { bg: 'blue', fg: 'white' },
+                item: { fg: 'white' },
+            },
+            keys: true,
+            vi: true,
+            mouse: true,
+            items: [
+                '{cyan-fg}Tools{/cyan-fg}',
+                '{cyan-fg}Resources{/cyan-fg}',
+                '{cyan-fg}Prompts{/cyan-fg}',
+                '{cyan-fg}Traffic Log{/cyan-fg}',
+            ],
+        });
+        // Main panel (center) - Content display (using list for interactivity)
+        const main = blessed_1.default.list({
+            parent: this.screen,
+            label: ' Content ',
+            tags: true,
+            top: 0,
+            left: '20%',
+            width: '80%',
+            height: '70%',
+            border: { type: 'line' },
+            style: {
+                border: { fg: 'cyan' },
+                selected: { bg: 'blue', fg: 'white' },
+                item: { fg: 'white' },
+            },
+            scrollable: true,
+            alwaysScroll: true,
+            keys: true,
+            vi: true,
+            mouse: true,
+            scrollbar: {
+                ch: ' ',
+                style: { bg: 'cyan' },
+            },
+            interactive: true,
+        });
+        // Status bar
+        const status = blessed_1.default.box({
+            parent: this.screen,
+            top: '70%',
+            left: 0,
+            width: '100%',
+            height: 3,
+            tags: true,
+            border: { type: 'line' },
+            style: {
+                border: { fg: 'yellow' },
+            },
+            content: '{yellow-fg}Status:{/yellow-fg} Disconnected',
+        });
+        // Traffic log (bottom panel)
+        const traffic = blessed_1.default.box({
+            parent: this.screen,
+            label: ' Traffic Log ',
+            tags: true,
+            top: '73%',
+            left: 0,
+            width: '100%',
+            height: '24%',
+            border: { type: 'line' },
+            style: {
+                border: { fg: 'green' },
+            },
+            scrollable: true,
+            alwaysScroll: true,
+            keys: true,
+            vi: true,
+            mouse: true,
+            scrollbar: {
+                ch: ' ',
+                style: { bg: 'green' },
+            },
+            content: '',
+        });
+        // Input box (hidden by default)
+        const input = blessed_1.default.textbox({
+            parent: this.screen,
+            label: ' Input ',
+            top: 'center',
+            left: 'center',
+            width: '60%',
+            height: 3,
+            border: { type: 'line' },
+            style: {
+                border: { fg: 'magenta' },
+                focus: { border: { fg: 'blue' } },
+            },
+            hidden: true,
+            inputOnFocus: true,
+            keys: true,
+            mouse: true,
+        });
+        return { sidebar, main, status, traffic, input };
+    }
+    setupKeyBindings() {
+        // F10 - Quit application
+        this.screen.key(['f10', 'C-c'], () => {
+            return process.exit(0);
+        });
+        // Navigate sidebar
+        this.layout.sidebar.on('select', (item, index) => {
+            switch (index) {
+                case 0:
+                    this.showTools();
+                    break;
+                case 1:
+                    this.showResources();
+                    break;
+                case 2:
+                    this.showPrompts();
+                    break;
+                case 3:
+                    this.showTrafficLog();
+                    break;
+            }
+            // Auto-focus the content pane after selecting from sidebar
+            this.activePanel = 'main';
+            this.updatePanelHighlight();
+            this.layout.main.focus();
+            this.screen.render();
+        });
+        // F5 - Refresh current view
+        this.screen.key(['f5'], async () => {
+            if (this.client) {
+                await this.client.refreshAll();
+                this.updateCurrentView();
+            }
+        });
+        // F1 - Focus sidebar
+        this.screen.key(['f1'], () => {
+            this.activePanel = 'sidebar';
+            this.updatePanelHighlight();
+            this.layout.sidebar.focus();
+            this.screen.render();
+        });
+        // F2 - Focus main panel
+        this.screen.key(['f2'], () => {
+            this.activePanel = 'main';
+            this.updatePanelHighlight();
+            this.layout.main.focus();
+            this.screen.render();
+        });
+        // F3 - Focus traffic panel
+        this.screen.key(['f3'], () => {
+            this.activePanel = 'traffic';
+            this.updatePanelHighlight();
+            this.layout.traffic.focus();
+            this.screen.render();
+        });
+        // Handle selection in main panel
+        this.layout.main.key(['enter'], async () => {
+            await this.handleMainSelection();
+        });
+        // Clear traffic log with 'c' when focused
+        this.layout.traffic.key(['c'], () => {
+            if (this.client) {
+                this.client.clearTrafficLog();
+                this.trafficLines = [];
+                this.layout.traffic.setContent('');
+                this.screen.render();
+            }
+        });
+    }
+    setClient(client) {
+        this.client = client;
+        // Set up event handlers
+        client.on('connected', (result) => {
+            const serverName = result.serverInfo?.name || 'Unknown';
+            const serverVersion = result.serverInfo?.version || '?';
+            this.layout.status.setContent(`{green-fg}Connected{/green-fg} to ${this.escapeBlessedTags(serverName)} v${serverVersion} | ` +
+                `{cyan-fg}F1{/cyan-fg}=Nav {cyan-fg}F2{/cyan-fg}=Content {cyan-fg}F3{/cyan-fg}=Traffic {cyan-fg}F4{/cyan-fg}=Close {cyan-fg}F5{/cyan-fg}=Refresh {cyan-fg}F10{/cyan-fg}=Quit | ` +
+                `{bold}{cyan-fg}IntegSec{/cyan-fg}{/bold} {gray-fg}({green-fg}integsec.com{/green-fg}) - Need pentesting? Contact us!{/gray-fg}`);
+            this.updateCurrentView();
+            this.screen.render();
+        });
+        client.on('disconnected', () => {
+            this.layout.status.setContent('{red-fg}Status:{/red-fg} Disconnected');
+            this.screen.render();
+        });
+        client.on('error', (error) => {
+            this.addTrafficLine(`{red-fg}ERROR:{/red-fg} ${error.message}`);
+            this.screen.render();
+        });
+        client.on('traffic', ({ direction, data }) => {
+            const timestamp = new Date().toISOString().substr(11, 12);
+            if (direction === 'sent' && 'method' in data) {
+                // This is a request
+                const method = data.method;
+                let details = '';
+                if (data.method === 'tools/call' && data.params) {
+                    details = ` tool=${data.params.name}`;
+                    if (data.params.arguments) {
+                        const argKeys = Object.keys(data.params.arguments);
+                        if (argKeys.length > 0) {
+                            details += ` args=${argKeys.join(',')}`;
+                        }
+                    }
+                }
+                else if (data.method === 'resources/read' && data.params) {
+                    details = ` uri=${data.params.uri}`;
+                }
+                else if (data.method === 'prompts/get' && data.params) {
+                    details = ` prompt=${data.params.name}`;
+                }
+                const requestLine = `{cyan-fg}[${timestamp}]{/cyan-fg} {yellow-fg}>>>{/yellow-fg} ${this.escapeBlessedTags(method + details)}`;
+                if ('id' in data && data.id !== undefined) {
+                    // Store request, waiting for response - store full data for detail view
+                    this.pendingRequests.set(data.id, { line: requestLine, data, timestamp: new Date() });
+                }
+                else {
+                    // Notification (no response expected)
+                    this.addTrafficLine(requestLine);
+                }
+            }
+            else if (direction === 'received') {
+                // This is a response
+                const responseId = ('id' in data) ? data.id : null;
+                let responseLine = '';
+                if ('error' in data && data.error) {
+                    const errorMsg = this.escapeBlessedTags(String(data.error.message || 'Unknown error'));
+                    responseLine = `{cyan-fg}[${timestamp}]{/cyan-fg} {red-fg}<<<{/red-fg} ERROR: ${errorMsg}`;
+                }
+                else {
+                    const resultPreview = ('result' in data && data.result)
+                        ? this.formatResultPreview(data.result)
+                        : 'OK';
+                    responseLine = `{cyan-fg}[${timestamp}]{/cyan-fg} {green-fg}<<<{/green-fg} ${resultPreview}`;
+                }
+                if (responseId !== null && this.pendingRequests.has(responseId)) {
+                    // Found matching request - show summary in log, store full data for detail view
+                    const { line: requestLine, data: requestData, timestamp: reqTime } = this.pendingRequests.get(responseId);
+                    this.pendingRequests.delete(responseId);
+                    // Add summary to traffic log
+                    this.addTrafficPair(requestLine, responseLine);
+                    // Store full data for detail view
+                    this.trafficPairs.unshift({ request: requestData, response: data, timestamp: reqTime });
+                    if (this.trafficPairs.length > 50) {
+                        this.trafficPairs = this.trafficPairs.slice(0, 50);
+                    }
+                }
+                else {
+                    // No matching request or notification
+                    this.addTrafficLine(responseLine);
+                }
+            }
+            this.screen.render();
+        });
+    }
+    updatePanelHighlight() {
+        // Reset all borders to normal
+        this.layout.sidebar.style.border = { fg: 'cyan' };
+        this.layout.main.style.border = { fg: 'cyan' };
+        this.layout.traffic.style.border = { fg: 'green' };
+        // Highlight active panel with bold yellow border
+        switch (this.activePanel) {
+            case 'sidebar':
+                this.layout.sidebar.style.border = { fg: 'yellow', bold: true };
+                break;
+            case 'main':
+                this.layout.main.style.border = { fg: 'yellow', bold: true };
+                break;
+            case 'traffic':
+                this.layout.traffic.style.border = { fg: 'yellow', bold: true };
+                break;
+        }
+    }
+    showTools() {
+        this.currentView = 'tools';
+        this.updateCurrentView();
+    }
+    showResources() {
+        this.currentView = 'resources';
+        this.updateCurrentView();
+    }
+    showPrompts() {
+        this.currentView = 'prompts';
+        this.updateCurrentView();
+    }
+    showTrafficLog() {
+        this.currentView = 'traffic';
+        this.updateCurrentView();
+    }
+    updateCurrentView() {
+        if (!this.client)
+            return;
+        const state = this.client.getState();
+        switch (this.currentView) {
+            case 'tools':
+                this.displayTools(state.tools);
+                break;
+            case 'resources':
+                this.displayResources(state.resources);
+                break;
+            case 'prompts':
+                this.displayPrompts(state.prompts);
+                break;
+            case 'traffic':
+                this.displayTraffic();
+                break;
+        }
+    }
+    displayTools(tools) {
+        this.layout.main.setLabel(` Tools (${tools.length}) - Press Enter to execute `);
+        if (tools.length === 0) {
+            this.layout.main.setItems(['{yellow-fg}No tools available - Press F5 to refresh{/yellow-fg}']);
+        }
+        else {
+            const items = tools.map((tool, idx) => {
+                let label = `${idx + 1}. {bold}${tool.name}{/bold}`;
+                if (tool.description) {
+                    label += ` - ${tool.description}`;
+                }
+                return label;
+            });
+            this.layout.main.setItems(items);
+        }
+        this.screen.render();
+    }
+    displayResources(resources) {
+        this.layout.main.setLabel(` Resources (${resources.length}) - Press Enter to read `);
+        if (resources.length === 0) {
+            this.layout.main.setItems(['{yellow-fg}No resources available - Press F5 to refresh{/yellow-fg}']);
+        }
+        else {
+            const items = resources.map((resource, idx) => {
+                let label = `${idx + 1}. {bold}${resource.name}{/bold} - {gray-fg}${resource.uri}{/gray-fg}`;
+                if (resource.description) {
+                    label += ` - ${resource.description}`;
+                }
+                return label;
+            });
+            this.layout.main.setItems(items);
+        }
+        this.screen.render();
+    }
+    displayPrompts(prompts) {
+        this.layout.main.setLabel(` Prompts (${prompts.length}) - Press Enter to use `);
+        if (prompts.length === 0) {
+            this.layout.main.setItems(['{yellow-fg}No prompts available - Press F5 to refresh{/yellow-fg}']);
+        }
+        else {
+            const items = prompts.map((prompt, idx) => {
+                let label = `${idx + 1}. {bold}${prompt.name}{/bold}`;
+                if (prompt.description) {
+                    label += ` - ${prompt.description}`;
+                }
+                return label;
+            });
+            this.layout.main.setItems(items);
+        }
+        this.screen.render();
+    }
+    displayTraffic() {
+        if (!this.client)
+            return;
+        const logs = this.client.getTrafficLog();
+        this.layout.main.setLabel(` Traffic Details (${logs.length}) - Full Request/Response `);
+        if (logs.length === 0) {
+            this.layout.main.setItems(['{yellow-fg}No traffic logged yet{/yellow-fg}']);
+        }
+        else {
+            // Build full request/response pairs with details
+            const items = [];
+            const processedIds = new Set();
+            // Process in reverse order (most recent first)
+            for (let i = 0; i < Math.min(logs.length, 20); i++) {
+                const log = logs[i];
+                // Skip if we already processed this request/response pair
+                if ('id' in log.data) {
+                    const logId = log.data.id;
+                    if (processedIds.has(logId))
+                        continue;
+                    processedIds.add(logId);
+                }
+                // Find matching request/response pair
+                let requestLog = log;
+                let responseLog = null;
+                if (log.direction === 'received' && 'id' in log.data) {
+                    const requestId = log.data.id;
+                    // Find the request
+                    for (let j = i + 1; j < logs.length; j++) {
+                        if (logs[j].direction === 'sent' && 'id' in logs[j].data &&
+                            logs[j].data.id === requestId) {
+                            requestLog = logs[j];
+                            responseLog = log;
+                            break;
+                        }
+                    }
+                }
+                else if (log.direction === 'sent' && 'id' in log.data) {
+                    const requestId = log.data.id;
+                    // Find the response
+                    for (let j = i - 1; j >= 0; j--) {
+                        if (logs[j].direction === 'received' && 'id' in logs[j].data &&
+                            logs[j].data.id === requestId) {
+                            responseLog = logs[j];
+                            break;
+                        }
+                    }
+                }
+                // Format as compact single-line entry with timestamp and method
+                const timestamp = requestLog.timestamp.toISOString().substr(11, 12);
+                const method = ('method' in requestLog.data) ? requestLog.data.method : 'unknown';
+                const respStatus = responseLog
+                    ? ('error' in responseLog.data ? '{red-fg}ERROR{/red-fg}' : '{green-fg}OK{/green-fg}')
+                    : '{gray-fg}pending{/gray-fg}';
+                items.push(`{gray-fg}[${timestamp}]{/gray-fg} {yellow-fg}${this.escapeBlessedTags(method)}{/yellow-fg} → ${respStatus}`);
+            }
+            this.layout.main.setItems(items);
+        }
+        this.screen.render();
+    }
+    escapeBlessedTags(text) {
+        // Escape curly braces so blessed doesn't try to parse them as tags
+        return text.replace(/{/g, '\\{').replace(/}/g, '\\}');
+    }
+    formatResultPreview(result) {
+        let preview;
+        if (typeof result === 'string') {
+            preview = result.length > 50 ? result.substring(0, 47) + '...' : result;
+        }
+        else if (Array.isArray(result)) {
+            preview = `Array[${result.length}]`;
+        }
+        else if (typeof result === 'object' && result !== null) {
+            const keys = Object.keys(result);
+            if (keys.length === 0)
+                return '{}';
+            preview = `{${keys.slice(0, 3).join(',')}}`;
+        }
+        else {
+            preview = String(result);
+        }
+        return this.escapeBlessedTags(preview);
+    }
+    addTrafficPair(requestLine, responseLine) {
+        // Add simple summary lines to the small traffic log
+        this.trafficLines.unshift(responseLine);
+        this.trafficLines.unshift(requestLine);
+        // Keep only last 100 lines
+        if (this.trafficLines.length > 100) {
+            this.trafficLines = this.trafficLines.slice(0, 100);
+        }
+        // Update the traffic box content
+        this.layout.traffic.setContent(this.trafficLines.join('\n'));
+        this.layout.traffic.setScrollPerc(0);
+    }
+    addTrafficLine(line) {
+        this.trafficLines.unshift(line);
+        if (this.trafficLines.length > 100) {
+            this.trafficLines = this.trafficLines.slice(0, 100);
+        }
+        this.layout.traffic.setContent(this.trafficLines.join('\n'));
+    }
+    render() {
+        // Set up the main UI first
+        this.activePanel = 'sidebar';
+        this.updatePanelHighlight();
+        this.layout.sidebar.focus();
+        this.screen.render();
+        // Show splash screen as overlay (auto-closes)
+        this.showSplashScreen();
+    }
+    async prompt(label) {
+        return new Promise((resolve) => {
+            this.layout.input.setLabel(` ${label} `);
+            this.layout.input.show();
+            this.layout.input.focus();
+            this.layout.input.on('submit', (value) => {
+                this.layout.input.hide();
+                this.layout.input.clearValue();
+                this.layout.sidebar.focus();
+                this.screen.render();
+                resolve(value || '');
+            });
+            this.layout.input.on('cancel', () => {
+                this.layout.input.hide();
+                this.layout.input.clearValue();
+                this.layout.sidebar.focus();
+                this.screen.render();
+                resolve('');
+            });
+            this.screen.render();
+        });
+    }
+    async handleMainSelection() {
+        if (!this.client)
+            return;
+        const selectedIndex = this.layout.main.selected || 0;
+        const state = this.client.getState();
+        try {
+            switch (this.currentView) {
+                case 'tools':
+                    if (selectedIndex < state.tools.length) {
+                        await this.executeTool(state.tools[selectedIndex]);
+                    }
+                    break;
+                case 'resources':
+                    if (selectedIndex < state.resources.length) {
+                        await this.readResource(state.resources[selectedIndex]);
+                    }
+                    break;
+                case 'prompts':
+                    if (selectedIndex < state.prompts.length) {
+                        await this.usePrompt(state.prompts[selectedIndex]);
+                    }
+                    break;
+                case 'traffic':
+                    const logs = this.client.getTrafficLog().slice(-50);
+                    if (selectedIndex < logs.length) {
+                        await this.showTrafficDetail(logs[selectedIndex]);
+                    }
+                    break;
+            }
+        }
+        catch (error) {
+            this.showMessage('Error', error.message || String(error), 'red');
+        }
+    }
+    async executeTool(tool) {
+        // Build arguments
+        const args = {};
+        if (tool.inputSchema?.properties) {
+            const props = tool.inputSchema.properties;
+            const required = tool.inputSchema.required || [];
+            for (const paramName of Object.keys(props)) {
+                const isRequired = required.includes(paramName);
+                const prompt = `${paramName}${isRequired ? ' (required)' : ' (optional)'}:`;
+                const value = await this.prompt(prompt);
+                if (value || isRequired) {
+                    // Try to parse as JSON for complex types
+                    try {
+                        args[paramName] = JSON.parse(value);
+                    }
+                    catch {
+                        args[paramName] = value;
+                    }
+                }
+            }
+        }
+        const result = await this.client.callTool(tool.name, args);
+        const formatted = this.formatForDisplay(result);
+        this.showMessage(`Tool Result: ${tool.name}`, formatted, 'green');
+    }
+    async readResource(resource) {
+        let uri = resource.uri;
+        // Check if URI contains parameters like {id}, {path}, etc.
+        const paramMatches = uri.match(/\{([^}]+)\}/g);
+        if (paramMatches) {
+            // Extract parameter names and prompt for values
+            for (const paramMatch of paramMatches) {
+                const paramName = paramMatch.slice(1, -1); // Remove { and }
+                const value = await this.prompt(`Enter value for {${paramName}}:`);
+                if (!value) {
+                    this.showMessage('Error', `Parameter {${paramName}} is required`, 'red');
+                    return;
+                }
+                // Replace the parameter in the URI
+                uri = uri.replace(paramMatch, value);
+            }
+        }
+        const result = await this.client.readResource(uri);
+        const formatted = this.formatForDisplay(result);
+        this.showMessage(`Resource: ${resource.name}`, formatted, 'cyan');
+    }
+    async usePrompt(prompt) {
+        const args = {};
+        if (prompt.arguments && prompt.arguments.length > 0) {
+            for (const arg of prompt.arguments) {
+                const isRequired = arg.required || false;
+                const promptText = `${arg.name}${isRequired ? ' (required)' : ' (optional)'}:`;
+                const value = await this.prompt(promptText);
+                if (value || isRequired) {
+                    args[arg.name] = value;
+                }
+            }
+        }
+        const result = await this.client.getPrompt(prompt.name, args);
+        const formatted = this.formatForDisplay(result);
+        this.showMessage(`Prompt: ${prompt.name}`, formatted, 'magenta');
+    }
+    async showTrafficDetail(log) {
+        // Find matching request/response pair
+        const logs = this.client.getTrafficLog();
+        const logIndex = logs.indexOf(log);
+        let requestLog = log;
+        let responseLog = null;
+        // If this is a response, find its request
+        if (log.direction === 'received' && 'id' in log.data) {
+            const requestId = log.data.id;
+            if (requestId !== undefined && requestId !== null) {
+                // Look backwards for the request with matching ID
+                for (let i = logIndex + 1; i < logs.length; i++) {
+                    const logData = logs[i].data;
+                    if (logs[i].direction === 'sent' && 'id' in logs[i].data &&
+                        logData.id !== undefined && logData.id === requestId) {
+                        requestLog = logs[i];
+                        responseLog = log;
+                        break;
+                    }
+                }
+            }
+        }
+        // If this is a request, find its response
+        else if (log.direction === 'sent' && 'id' in log.data) {
+            const requestId = log.data.id;
+            if (requestId !== undefined && requestId !== null) {
+                // Look backwards for response with matching ID
+                for (let i = logIndex - 1; i >= 0; i--) {
+                    const logData = logs[i].data;
+                    if (logs[i].direction === 'received' && 'id' in logs[i].data &&
+                        logData.id !== undefined && logData.id === requestId) {
+                        responseLog = logs[i];
+                        break;
+                    }
+                }
+            }
+        }
+        // Format request and response JSON (already formatted with indentation)
+        const requestJson = this.formatForDisplay(requestLog.data);
+        const responseJson = responseLog
+            ? this.formatForDisplay(responseLog.data)
+            : '(pending - no response yet)';
+        // Split into lines for side-by-side display
+        const requestLines = requestJson.split('\n');
+        const responseLines = responseJson.split('\n');
+        const maxLines = Math.max(requestLines.length, responseLines.length);
+        // Calculate column width (half of 90% screen width, minus separator)
+        const colWidth = 60;
+        // Build side-by-side display
+        const lines = [];
+        lines.push(`{bold}{yellow-fg}REQUEST{/yellow-fg}{/bold} - ${requestLog.timestamp.toISOString()}`.padEnd(colWidth) +
+            ' {gray-fg}│{/gray-fg} ' +
+            `{bold}{green-fg}RESPONSE{/green-fg}{/bold}${responseLog ? ' - ' + responseLog.timestamp.toISOString() : ''}`);
+        lines.push(`{gray-fg}${'─'.repeat(colWidth)}{/gray-fg} {gray-fg}┼{/gray-fg} {gray-fg}${'─'.repeat(colWidth)}{/gray-fg}`);
+        for (let i = 0; i < maxLines; i++) {
+            const reqLine = requestLines[i] || '';
+            const respLine = responseLines[i] || '';
+            // Pad request line to column width
+            const paddedReq = reqLine.padEnd(colWidth).substring(0, colWidth);
+            lines.push(paddedReq + ' {gray-fg}│{/gray-fg} ' + respLine);
+        }
+        this.showMessage('Traffic Detail - Request/Response Pair', lines.join('\n'), 'cyan');
+    }
+    formatXML(xml) {
+        // Simple XML formatter with indentation
+        let formatted = '';
+        let indent = 0;
+        const tab = '  ';
+        xml.split(/>\s*</).forEach((node, index) => {
+            // Add back the angle brackets
+            if (index > 0)
+                node = '<' + node;
+            if (index < xml.split(/>\s*</).length - 1)
+                node = node + '>';
+            // Check if it's a closing tag
+            if (node.match(/^<\/\w/)) {
+                indent--;
+            }
+            // Add the indented line
+            formatted += tab.repeat(Math.max(0, indent)) + node + '\n';
+            // Check if it's an opening tag (not self-closing and not closing)
+            if (node.match(/^<\w[^>]*[^\/]>$/)) {
+                indent++;
+            }
+        });
+        // Add syntax highlighting for XML
+        return formatted
+            .replace(/<(\/?[\w:]+)/g, '{cyan-fg}<$1{/cyan-fg}') // Tag names
+            .replace(/([\w:]+)=/g, '{yellow-fg}$1{/yellow-fg}=') // Attributes
+            .replace(/="([^"]*)"/g, '="{green-fg}$1{/green-fg}"') // Attribute values
+            .replace(/>/g, '{cyan-fg}>{/cyan-fg}'); // Closing brackets
+    }
+    formatForDisplay(data) {
+        // Smart formatter for better readability
+        if (typeof data === 'string') {
+            // Check if it's XML
+            if (data.trim().startsWith('<') && data.trim().includes('</')) {
+                try {
+                    return this.formatXML(data);
+                }
+                catch {
+                    // If XML formatting fails, continue to JSON attempt
+                }
+            }
+            // Try to parse as JSON for better formatting
+            try {
+                const parsed = JSON.parse(data);
+                const json = JSON.stringify(parsed, null, 2);
+                // Add color hints for better readability
+                return json
+                    .replace(/"([^"]+)":/g, '{cyan-fg}"$1"{/cyan-fg}:') // Property names
+                    .replace(/: "([^"]*?)"/g, ': {green-fg}"$1"{/green-fg}') // String values
+                    .replace(/: (\d+)/g, ': {yellow-fg}$1{/yellow-fg}') // Numbers
+                    .replace(/: (true|false|null)/g, ': {magenta-fg}$1{/magenta-fg}'); // Keywords
+            }
+            catch {
+                // Not JSON, return as-is
+                return data;
+            }
+        }
+        if (typeof data === 'object' && data !== null) {
+            // Format objects with syntax highlighting hints
+            const json = JSON.stringify(data, null, 2);
+            // Add color hints for better readability
+            return json
+                .replace(/"([^"]+)":/g, '{cyan-fg}"$1"{/cyan-fg}:') // Property names
+                .replace(/: "([^"]*?)"/g, ': {green-fg}"$1"{/green-fg}') // String values
+                .replace(/: (\d+)/g, ': {yellow-fg}$1{/yellow-fg}') // Numbers
+                .replace(/: (true|false|null)/g, ': {magenta-fg}$1{/magenta-fg}'); // Keywords
+        }
+        return String(data);
+    }
+    showMessage(title, content, color) {
+        // Store both raw and rendered versions
+        const rawContent = content;
+        const renderedContent = content.replace(/\\n/g, '\n').replace(/\\t/g, '  ');
+        // Store for toggling
+        this.currentPopupContent = { raw: rawContent, rendered: renderedContent, title, color };
+        this.showRawInPopup = false;
+        const msg = blessed_1.default.box({
+            parent: this.screen,
+            top: 'center',
+            left: 'center',
+            width: '90%',
+            height: '85%',
+            label: ` ${title} - F4/ESC=close W=toggle PgUp/PgDn=scroll `,
+            tags: true,
+            border: { type: 'line' },
+            style: {
+                border: { fg: color, bold: true },
+            },
+            scrollable: true,
+            alwaysScroll: true,
+            keys: true,
+            vi: true,
+            mouse: true,
+            scrollbar: {
+                ch: '█',
+                track: {
+                    ch: '░',
+                },
+                style: {
+                    fg: color,
+                    bg: 'black',
+                },
+            },
+            content: this.showRawInPopup ? rawContent : renderedContent,
+        });
+        // Page Up/Page Down for scrolling
+        msg.key(['pageup'], () => {
+            msg.scroll(-10);
+            this.screen.render();
+        });
+        msg.key(['pagedown'], () => {
+            msg.scroll(10);
+            this.screen.render();
+        });
+        // W to toggle between raw and rendered
+        msg.key(['w', 'W'], () => {
+            this.showRawInPopup = !this.showRawInPopup;
+            if (this.currentPopupContent) {
+                msg.setContent(this.showRawInPopup ? this.currentPopupContent.raw : this.currentPopupContent.rendered);
+                msg.setLabel(` ${this.currentPopupContent.title} - Press F4/ESC to close, W to toggle raw/rendered ${this.showRawInPopup ? '(RAW)' : '(RENDERED)'} `);
+                this.screen.render();
+            }
+        });
+        // F4 or ESC to close
+        msg.key(['f4', 'escape', 'enter'], () => {
+            this.currentPopupContent = null;
+            this.showRawInPopup = false;
+            msg.destroy();
+            this.screen.render();
+        });
+        msg.focus();
+        this.screen.render();
+    }
+}
+exports.TUI = TUI;
+//# sourceMappingURL=tui.js.map