norn-cli 1.3.17 → 1.3.19

package/out/responsePanel.js

@@ -0,0 +1,4674 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResponsePanel = void 0;
+const vscode = __importStar(require("vscode"));
+const path = __importStar(require("path"));
+const compareContentProvider_1 = require("./compareContentProvider");
+const schemaGenerator_1 = require("./schemaGenerator");
+class ResponsePanel {
+    static currentPanel;
+    _panel;
+    _disposables = [];
+    _sequenceName = '';
+    _totalSteps = 0;
+    _startTime = 0;
+    _baselineResponse = null;
+    _sourceFilePath = '';
+    constructor(panel) {
+        this._panel = panel;
+        this._panel.onDidDispose(() => this.dispose(), null, this._disposables);
+        // Handle messages from the webview for response comparison
+        this._panel.webview.onDidReceiveMessage(async (message) => {
+            switch (message.type) {
+                case 'setBaseline':
+                    this._baselineResponse = message.body;
+                    break;
+                case 'compare':
+                    if (this._baselineResponse) {
+                        await this._openDiff(this._baselineResponse, message.body);
+                        this._baselineResponse = null;
+                        // Tell webview to reset compare state
+                        this._panel.webview.postMessage({ type: 'resetCompare' });
+                    }
+                    break;
+                case 'assertSchema':
+                    await this._generateSchemaAndInsertAssertion(message.body, message.method, message.url, message.variableName);
+                    break;
+                case 'assertProperty':
+                    await this._insertPropertyAssertion(message.path, message.value, message.variableName);
+                    break;
+                case 'openContractView':
+                    // Open the Contract View with the schema validation data
+                    vscode.commands.executeCommand('norn.openContractView', {
+                        schemaPath: message.schemaPath,
+                        errors: message.errors,
+                        responseBody: message.responseBody,
+                        schema: message.schema,
+                        sourceFile: this._sourceFilePath
+                    });
+                    break;
+            }
+        }, null, this._disposables);
+    }
+    /**
+     * Generate a JSON Schema from response body and insert assertion into the source file
+     */
+    async _generateSchemaAndInsertAssertion(body, method, url, variableName) {
+        if (!this._sourceFilePath) {
+            vscode.window.showErrorMessage('Cannot generate schema: source file path not available');
+            return;
+        }
+        try {
+            // Parse body if it's a string
+            const bodyObj = typeof body === 'string' ? JSON.parse(body) : body;
+            // Generate schema file name from endpoint
+            const schemaFileName = (0, schemaGenerator_1.generateSchemaFileName)(method, url);
+            // Create schemas directory path
+            const sourceDir = path.dirname(this._sourceFilePath);
+            const schemasDir = path.join(sourceDir, 'schemas');
+            const schemaFilePath = path.join(schemasDir, schemaFileName);
+            const relativeSchemaPath = `./schemas/${schemaFileName}`;
+            // Generate schema from body
+            const schema = (0, schemaGenerator_1.generateJsonSchema)(bodyObj, `${method} ${url} response`);
+            // Save schema file
+            (0, schemaGenerator_1.saveSchema)(schema, schemaFilePath);
+            // Build the assertion line
+            const assertLine = `assert ${variableName}.body matchesSchema "${relativeSchemaPath}"`;
+            // Insert assertion at the end of the sequence in the source file
+            await this._insertAssertionInSequence(assertLine);
+            // Show success message
+            vscode.window.showInformationMessage(`Schema generated: ${relativeSchemaPath}`);
+            // Open the schema file for review
+            const schemaDoc = await vscode.workspace.openTextDocument(schemaFilePath);
+            await vscode.window.showTextDocument(schemaDoc, { viewColumn: vscode.ViewColumn.Beside, preview: true });
+        }
+        catch (e) {
+            const error = e instanceof Error ? e.message : String(e);
+            vscode.window.showErrorMessage(`Failed to generate schema: ${error}`);
+        }
+    }
+    /**
+     * Insert an assertion line at the end of the current sequence in the source file
+     */
+    async _insertAssertionInSequence(assertLine) {
+        if (!this._sourceFilePath || !this._sequenceName) {
+            return;
+        }
+        const doc = await vscode.workspace.openTextDocument(this._sourceFilePath);
+        const text = doc.getText();
+        const lines = text.split('\n');
+        // Find the sequence by name
+        let sequenceStartLine = -1;
+        let sequenceEndLine = -1;
+        for (let i = 0; i < lines.length; i++) {
+            const line = lines[i].trim();
+            // Match sequence header (with optional tags)
+            if (line.match(new RegExp(`^(test\\s+)?sequence\\s+${this._escapeRegex(this._sequenceName)}(\\s|$)`))) {
+                sequenceStartLine = i;
+                // Find the end of the sequence (next sequence definition or end of file)
+                for (let j = i + 1; j < lines.length; j++) {
+                    const nextLine = lines[j].trim();
+                    // Only another sequence definition ends the current sequence
+                    if (nextLine.match(/^(test\s+)?sequence\s+\S/)) {
+                        // Found next sequence - current sequence ends before this
+                        sequenceEndLine = j - 1;
+                        break;
+                    }
+                }
+                if (sequenceEndLine === -1) {
+                    sequenceEndLine = lines.length - 1;
+                }
+                break;
+            }
+        }
+        if (sequenceStartLine === -1) {
+            vscode.window.showWarningMessage(`Could not find sequence "${this._sequenceName}" to insert assertion`);
+            return;
+        }
+        // Look for explicit "end sequence" marker within the sequence bounds
+        let endSequenceLine = -1;
+        for (let j = sequenceStartLine + 1; j <= sequenceEndLine; j++) {
+            if (lines[j].trim().match(/^end\s+sequence\s*$/i)) {
+                endSequenceLine = j;
+                break;
+            }
+        }
+        let insertLine;
+        if (endSequenceLine !== -1) {
+            // Insert before "end sequence"
+            insertLine = endSequenceLine;
+        }
+        else {
+            // Find the last non-empty line within the sequence
+            insertLine = sequenceEndLine;
+            while (insertLine > sequenceStartLine && lines[insertLine].trim() === '') {
+                insertLine--;
+            }
+            // Insert after the last non-empty line
+            insertLine = insertLine + 1;
+        }
+        const insertPosition = new vscode.Position(insertLine, 0);
+        const edit = new vscode.WorkspaceEdit();
+        edit.insert(doc.uri, insertPosition, `    ${assertLine}\n`);
+        await vscode.workspace.applyEdit(edit);
+        // Save the document
+        await doc.save();
+    }
+    /**
+     * Escape special regex characters in a string
+     */
+    _escapeRegex(str) {
+        return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    }
+    /**
+     * Insert an assertion for a specific property value clicked in the response panel
+     */
+    async _insertPropertyAssertion(path, value, variableName) {
+        // Format the value appropriately for the assertion
+        let valueString;
+        if (typeof value === 'string') {
+            valueString = `"${value.replace(/"/g, '\\"')}"`;
+        }
+        else if (value === null) {
+            valueString = 'null';
+        }
+        else {
+            valueString = String(value);
+        }
+        const assertLine = `assert ${variableName}.${path} == ${valueString}`;
+        await this._insertAssertionInSequence(assertLine);
+        vscode.window.showInformationMessage(`Assertion added: ${path}`);
+    }
+    /**
+     * Open VS Code diff view comparing two response bodies
+     */
+    async _openDiff(baseline, current) {
+        const provider = (0, compareContentProvider_1.getCompareContentProvider)();
+        // Pretty-print JSON if possible
+        const formatJson = (str) => {
+            try {
+                const parsed = JSON.parse(str);
+                return JSON.stringify(parsed, null, 2);
+            }
+            catch {
+                return str;
+            }
+        };
+        const baselineUri = provider.setContent('baseline.json', formatJson(baseline));
+        const currentUri = provider.setContent('current.json', formatJson(current));
+        await vscode.commands.executeCommand('vscode.diff', baselineUri, currentUri, 'Response Comparison (Baseline ↔ Current)');
+    }
+    static show(extensionUri, method, url, response) {
+        const column = vscode.ViewColumn.Beside;
+        // If we already have a panel, show it
+        if (ResponsePanel.currentPanel) {
+            ResponsePanel.currentPanel._panel.reveal(column);
+            ResponsePanel.currentPanel._update(method, url, response);
+            return;
+        }
+        // Otherwise, create a new panel
+        const panel = vscode.window.createWebviewPanel('nornResponse', 'Response', column, {
+            enableScripts: true,
+            retainContextWhenHidden: true,
+        });
+        ResponsePanel.currentPanel = new ResponsePanel(panel);
+        ResponsePanel.currentPanel._update(method, url, response);
+    }
+    static showError(extensionUri, method, url, errorMessage) {
+        const column = vscode.ViewColumn.Beside;
+        // If we already have a panel, show it
+        if (ResponsePanel.currentPanel) {
+            ResponsePanel.currentPanel._panel.reveal(column);
+            ResponsePanel.currentPanel._updateError(method, url, errorMessage);
+            return;
+        }
+        // Otherwise, create a new panel
+        const panel = vscode.window.createWebviewPanel('nornResponse', 'Error', column, {
+            enableScripts: true,
+            retainContextWhenHidden: true,
+        });
+        ResponsePanel.currentPanel = new ResponsePanel(panel);
+        ResponsePanel.currentPanel._updateError(method, url, errorMessage);
+    }
+    static showSequenceResult(extensionUri, result) {
+        const column = vscode.ViewColumn.Beside;
+        // If we already have a panel, show it
+        if (ResponsePanel.currentPanel) {
+            ResponsePanel.currentPanel._panel.reveal(column);
+            ResponsePanel.currentPanel._updateSequence(result);
+            return;
+        }
+        // Otherwise, create a new panel
+        const panel = vscode.window.createWebviewPanel('nornResponse', 'Sequence Result', column, {
+            enableScripts: true,
+            retainContextWhenHidden: true,
+        });
+        ResponsePanel.currentPanel = new ResponsePanel(panel);
+        ResponsePanel.currentPanel._updateSequence(result);
+    }
+    /**
+     * Show aggregated results for multiple runs of the same sequence (e.g. @data/@theory cases).
+     */
+    static showMultiSequenceResult(extensionUri, sequenceName, runs) {
+        const column = vscode.ViewColumn.Beside;
+        const normalizedRuns = runs.map((run, index) => ({
+            label: run.label || `Case ${index + 1}`,
+            result: run.result
+        }));
+        // If we already have a panel, show it
+        if (ResponsePanel.currentPanel) {
+            ResponsePanel.currentPanel._panel.reveal(column);
+            ResponsePanel.currentPanel._updateMultiSequence(sequenceName, normalizedRuns);
+            return;
+        }
+        // Otherwise, create a new panel
+        const panel = vscode.window.createWebviewPanel('nornResponse', 'Sequence Result', column, {
+            enableScripts: true,
+            retainContextWhenHidden: true,
+        });
+        ResponsePanel.currentPanel = new ResponsePanel(panel);
+        ResponsePanel.currentPanel._updateMultiSequence(sequenceName, normalizedRuns);
+    }
+    /**
+     * Start a sequence run - shows the panel with running state and prepares for incremental updates
+     */
+    static startSequenceRun(extensionUri, sequenceName, totalSteps, sourceFilePath) {
+        const column = vscode.ViewColumn.Beside;
+        // If we already have a panel, reuse it
+        if (ResponsePanel.currentPanel) {
+            ResponsePanel.currentPanel._panel.reveal(column);
+        }
+        else {
+            // Create a new panel
+            const panel = vscode.window.createWebviewPanel('nornResponse', `Running: ${sequenceName}`, column, {
+                enableScripts: true,
+                retainContextWhenHidden: true,
+            });
+            ResponsePanel.currentPanel = new ResponsePanel(panel);
+        }
+        ResponsePanel.currentPanel._sequenceName = sequenceName;
+        ResponsePanel.currentPanel._totalSteps = totalSteps;
+        ResponsePanel.currentPanel._startTime = Date.now();
+        ResponsePanel.currentPanel._sourceFilePath = sourceFilePath || '';
+        ResponsePanel.currentPanel._panel.title = `⏳ ${sequenceName}`;
+        ResponsePanel.currentPanel._panel.webview.html = ResponsePanel.currentPanel._getStreamingSequenceHtml(sequenceName, totalSteps);
+        // Send reset message to clear any previous state (handles retainContextWhenHidden)
+        ResponsePanel.currentPanel._panel.webview.postMessage({
+            type: 'reset',
+            totalSteps: totalSteps
+        });
+    }
+    /**
+     * Add a step result to the running sequence display
+     */
+    static addSequenceStep(stepResult, progressInfo) {
+        if (!ResponsePanel.currentPanel) {
+            return;
+        }
+        // Send the step to the webview via postMessage
+        ResponsePanel.currentPanel._panel.webview.postMessage({
+            type: 'addStep',
+            step: stepResult,
+            progress: progressInfo,
+            elapsed: Date.now() - ResponsePanel.currentPanel._startTime
+        });
+    }
+    /**
+     * Finalize the sequence run - update header to show success/failure
+     */
+    static finalizeSequence(result) {
+        if (!ResponsePanel.currentPanel) {
+            return;
+        }
+        ResponsePanel.currentPanel._panel.title = `${result.success ? '✓' : '✗'} ${result.name}`;
+        ResponsePanel.currentPanel._panel.webview.postMessage({
+            type: 'finalize',
+            success: result.success,
+            errors: result.errors,
+            duration: result.duration
+        });
+    }
+    /**
+     * Show the Contract View for schema validation errors
+     * Provides a rich UI for navigating validation failures
+     */
+    static showContractView(extensionUri, data) {
+        const column = vscode.ViewColumn.Beside;
+        // If we already have a panel, reuse it
+        if (ResponsePanel.currentPanel) {
+            ResponsePanel.currentPanel._panel.reveal(column);
+        }
+        else {
+            // Create a new panel
+            const panel = vscode.window.createWebviewPanel('nornResponse', 'Contract View', column, {
+                enableScripts: true,
+                retainContextWhenHidden: true,
+            });
+            ResponsePanel.currentPanel = new ResponsePanel(panel);
+        }
+        const errorCount = data.errors.length;
+        const schemaName = path.basename(data.schemaPath);
+        ResponsePanel.currentPanel._panel.title = `⚠ ${errorCount} violation${errorCount !== 1 ? 's' : ''} - ${schemaName}`;
+        ResponsePanel.currentPanel._sourceFilePath = data.sourceFile || '';
+        ResponsePanel.currentPanel._panel.webview.html = ResponsePanel.currentPanel._getContractViewHtml(data);
+    }
+    /**
+     * Show the Contract Report - a visual comparison of response against schema
+     * Shows matched properties with checkmarks and highlights differences
+     */
+    static showContractReport(extensionUri, data) {
+        const column = vscode.ViewColumn.Beside;
+        // If we already have a panel, reuse it
+        if (ResponsePanel.currentPanel) {
+            ResponsePanel.currentPanel._panel.reveal(column);
+        }
+        else {
+            // Create a new panel
+            const panel = vscode.window.createWebviewPanel('nornResponse', 'Contract Report', column, {
+                enableScripts: true,
+                retainContextWhenHidden: true,
+            });
+            ResponsePanel.currentPanel = new ResponsePanel(panel);
+        }
+        const errorCount = data.errors.length;
+        const schemaName = path.basename(data.schemaPath);
+        const titleIcon = errorCount === 0 ? '✓' : '⚠';
+        const titleText = errorCount === 0 ? 'All OK' : `${errorCount} issue${errorCount !== 1 ? 's' : ''}`;
+        ResponsePanel.currentPanel._panel.title = `${titleIcon} ${titleText} - ${schemaName}`;
+        ResponsePanel.currentPanel._sourceFilePath = data.sourceFile || '';
+        ResponsePanel.currentPanel._panel.webview.html = ResponsePanel.currentPanel._getContractReportHtml(data);
+    }
+    _update(method, url, response) {
+        this._panel.title = `${response.status} ${method} Response`;
+        this._panel.webview.html = this._getHtmlContent(method, url, response);
+    }
+    _updateSequence(result) {
+        this._panel.title = `${result.success ? '✓' : '✗'} ${result.name}`;
+        this._panel.webview.html = this._getSequenceHtmlContent(result);
+    }
+    _updateMultiSequence(sequenceName, runs) {
+        const passedRuns = runs.filter(r => r.result.success).length;
+        const allPassed = passedRuns === runs.length;
+        this._panel.title = `${allPassed ? '✓' : '✗'} ${sequenceName} (${runs.length} runs)`;
+        this._panel.webview.html = this._getMultiSequenceHtmlContent(sequenceName, runs);
+    }
+    /**
+     * Get the HTML for streaming sequence results
+     */
+    _getStreamingSequenceHtml(sequenceName, totalSteps) {
+        return /*html*/ `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sequence Result</title>
+    <style>
+        * { box-sizing: border-box; }
+        
+        body {
+            font-family: var(--vscode-font-family);
+            font-size: var(--vscode-font-size);
+            color: var(--vscode-foreground);
+            background-color: var(--vscode-editor-background);
+            padding: 0;
+            margin: 0;
+        }
+        
+        .container { padding: 16px; }
+        
+        .sequence-header {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            padding: 16px;
+            background: var(--vscode-editor-inactiveSelectionBackground);
+            border-radius: 6px;
+            margin-bottom: 16px;
+        }
+        
+        .sequence-name {
+            font-size: 1.2em;
+            font-weight: bold;
+        }
+        
+        .sequence-status {
+            padding: 4px 12px;
+            border-radius: 4px;
+            font-weight: bold;
+        }
+        
+        .status-running { background: #569cd6; color: #fff; }
+        .status-success { background: #4ec9b0; color: #000; }
+        .status-warning { background: #cca700; color: #000; }
+        .status-error { background: linear-gradient(135deg, #c9555a 0%, #a84347 100%); color: #fff; }
+        .status-redirect { background: #dcdcaa; color: #000; }
+        .status-client-error { background: #ce9178; color: #000; }
+        .status-server-error { background: linear-gradient(135deg, #c9555a 0%, #a84347 100%); color: #fff; }
+        
+        .meta { color: var(--vscode-descriptionForeground); }
+        
+        .progress-info {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        
+        .spinner {
+            width: 16px;
+            height: 16px;
+            border: 2px solid var(--vscode-descriptionForeground);
+            border-top-color: #569cd6;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+        
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        
+        /* Contract View button for schema validation failures */
+        .contract-view-actions {
+            margin-top: 12px;
+        }
+        .contract-view-btn {
+            padding: 8px 16px;
+            font-size: 13px;
+            font-weight: 500;
+            border: 1px solid var(--vscode-button-border, var(--vscode-focusBorder));
+            background-color: var(--vscode-button-secondaryBackground);
+            color: var(--vscode-button-secondaryForeground);
+            border-radius: 4px;
+            cursor: pointer;
+            transition: background-color 0.15s;
+        }
+        .contract-view-btn:hover {
+            background-color: var(--vscode-button-secondaryHoverBackground);
+        }
+        
+        .response-item {
+            border: 1px solid var(--vscode-panel-border);
+            border-radius: 6px;
+            margin-bottom: 8px;
+            overflow: hidden;
+            animation: slideIn 0.2s ease-out;
+        }
+        
+        @keyframes slideIn {
+            from {
+                opacity: 0;
+                transform: translateY(-10px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        
+        .response-header {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 12px;
+            cursor: pointer;
+            background: var(--vscode-editor-inactiveSelectionBackground);
+        }
+        
+        .response-header:hover {
+            background: var(--vscode-list-hoverBackground);
+        }
+        
+        .response-index {
+            font-family: var(--vscode-editor-font-family);
+            font-weight: bold;
+            color: var(--vscode-symbolIcon-variableForeground, #9cdcfe);
+        }
+        
+        .status-code {
+            padding: 2px 8px;
+            border-radius: 3px;
+            font-size: 0.9em;
+        }
+        
+        .expand-icon {
+            margin-left: auto;
+            transition: transform 0.2s;
+        }
+        
+        .expand-icon.expanded {
+            transform: rotate(90deg);
+        }
+        
+        .response-body {
+            padding: 12px;
+            border-top: 1px solid var(--vscode-panel-border);
+        }
+
+        pre {
+            margin: 0;
+            background: transparent;
+            font-family: var(--vscode-editor-font-family);
+            font-size: var(--vscode-editor-font-size);
+            line-height: 1.5;
+            overflow-x: auto;
+        }
+        
+        pre code { background: none; }
+        
+        .errors-section {
+            margin-top: 16px;
+            padding: 12px 16px;
+            background: linear-gradient(135deg, rgba(201, 85, 90, 0.2) 0%, rgba(168, 67, 71, 0.15) 100%);
+            border-radius: 6px;
+            border-left: 3px solid #c9555a;
+        }
+        
+        .errors-section h3 { margin-top: 0; color: var(--vscode-foreground); }
+        .errors-section ul { margin: 0; padding-left: 20px; }
+        .errors-section .error { color: var(--vscode-foreground); white-space: pre-wrap; line-height: 1.5; }
+        .errors-section .warning { color: #cca700; }
+        
+        /* JSON Syntax Highlighting */
+        .json-key { color: #9cdcfe; background: none; }
+        .json-string { color: #ce9178; background: none; }
+        .json-number { color: #b5cea8; background: none; }
+        .json-boolean { color: #569cd6; background: none; }
+        .json-null { color: #569cd6; background: none; }
+        
+        /* Clickable JSON values */
+        .json-clickable {
+            cursor: pointer;
+            border-radius: 3px;
+            padding: 1px 3px;
+            margin: -1px -3px;
+            position: relative;
+            transition: background-color 0.15s, box-shadow 0.15s;
+        }
+        .json-clickable:hover {
+            background: var(--vscode-editor-selectionBackground);
+            box-shadow: 0 0 0 1px var(--vscode-focusBorder);
+        }
+        .json-clickable::after {
+            content: '+';
+            position: absolute;
+            right: -16px;
+            top: 50%;
+            transform: translateY(-50%);
+            font-size: 10px;
+            font-weight: bold;
+            color: var(--vscode-button-background);
+            background: var(--vscode-button-foreground);
+            border-radius: 50%;
+            width: 14px;
+            height: 14px;
+            line-height: 14px;
+            text-align: center;
+            opacity: 0;
+            transition: opacity 0.15s;
+        }
+        .json-clickable:hover::after {
+            opacity: 1;
+        }
+        
+        /* Script Result Styling */
+        .script-item { border-left: 3px solid #dcdcaa; }
+        .script-icon { font-size: 1.1em; }
+        .script-type {
+            font-family: var(--vscode-editor-font-family);
+            padding: 2px 8px;
+            background: #dcdcaa22;
+            border-radius: 3px;
+            color: #dcdcaa;
+            font-size: 0.85em;
+            text-transform: uppercase;
+        }
+        .script-path {
+            font-family: var(--vscode-editor-font-family);
+            color: var(--vscode-descriptionForeground);
+        }
+        .capture-var {
+            font-family: var(--vscode-editor-font-family);
+            color: #9cdcfe;
+            font-weight: bold;
+        }
+        .script-output {
+            margin-bottom: 12px;
+        }
+        .script-output:last-child { margin-bottom: 0; }
+        .output-label {
+            font-size: 0.85em;
+            color: var(--vscode-descriptionForeground);
+            margin-bottom: 4px;
+            text-transform: uppercase;
+        }
+        .script-output.stderr .output-label { color: #f14c4c; }
+        .script-output.stderr pre { color: #f14c4c; }
+        
+        .step-number {
+            font-family: var(--vscode-editor-font-family);
+            font-weight: bold;
+            color: var(--vscode-descriptionForeground);
+            min-width: 24px;
+        }
+        
+        /* Print styling */
+        .print-item {
+            border-left: 3px solid #569cd6;
+        }
+        .print-item .response-header {
+            background: var(--vscode-editor-inactiveSelectionBackground);
+        }
+        .print-content {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 12px;
+            background: var(--vscode-editor-inactiveSelectionBackground);
+        }
+        .print-icon {
+            font-size: 1em;
+        }
+        .print-title {
+            font-family: var(--vscode-editor-font-family);
+            color: #569cd6;
+            flex: 1;
+        }
+        .print-body {
+            background: var(--vscode-editor-background);
+        }
+        .print-body pre {
+            margin: 0;
+            white-space: pre-wrap;
+            word-wrap: break-word;
+        }
+        
+        /* Assertion styling */
+        .assertion-item {
+            border-left: 3px solid var(--vscode-descriptionForeground);
+        }
+        .assertion-item.assertion-passed {
+            border-left-color: #4ec9b0;
+        }
+        .assertion-item.assertion-failed {
+            border-left-color: #f14c4c;
+        }
+        .assertion-icon {
+            font-size: 1.1em;
+            font-weight: bold;
+        }
+        .assertion-icon.status-success { color: #4ec9b0; }
+        .assertion-icon.status-error { color: #f14c4c; }
+        .assertion-expr {
+            font-family: var(--vscode-editor-font-family);
+            flex: 1;
+        }
+        .assertion-expr code {
+            background: var(--vscode-textCodeBlock-background);
+            padding: 2px 6px;
+            border-radius: 3px;
+        }
+        .assertion-body {
+            padding: 12px 16px;
+            background: var(--vscode-editor-background);
+        }
+        .assertion-message {
+            color: var(--vscode-descriptionForeground);
+            margin-bottom: 8px;
+            font-style: italic;
+        }
+        .assertion-details {
+            font-family: var(--vscode-editor-font-family);
+            font-size: 0.9em;
+        }
+        .assertion-expected, .assertion-actual {
+            margin: 4px 0;
+        }
+        .assertion-expected code, .assertion-actual code {
+            background: var(--vscode-textCodeBlock-background);
+            padding: 2px 6px;
+            border-radius: 3px;
+        }
+        .assertion-error {
+            color: #f14c4c;
+            font-family: var(--vscode-editor-font-family);
+        }
+        .response-header.no-expand {
+            cursor: default;
+        }
+        .response-header.no-expand:hover {
+            background: var(--vscode-editor-inactiveSelectionBackground);
+        }
+        
+        /* Inline response preview for failed assertions */
+        .assertion-response-preview {
+            margin-top: 12px;
+            border: 1px solid var(--vscode-panel-border);
+            border-radius: 4px;
+            overflow: hidden;
+        }
+        .assertion-response-preview .preview-header {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 8px 12px;
+            background: var(--vscode-editor-inactiveSelectionBackground);
+            cursor: pointer;
+            font-family: var(--vscode-editor-font-family);
+            font-size: 0.9em;
+        }
+        .assertion-response-preview .preview-header:hover {
+            background: var(--vscode-list-hoverBackground);
+        }
+        .assertion-response-preview .preview-body {
+            max-height: 300px;
+            overflow: auto;
+            background: var(--vscode-editor-background);
+            padding: 8px 12px;
+        }
+        .assertion-response-preview .preview-body pre {
+            margin: 0;
+            font-size: 0.85em;
+        }
+        
+        /* JSON path highlighting */
+        .json-highlighted {
+            background: rgba(255, 200, 0, 0.25);
+            border-radius: 2px;
+            padding: 1px 2px;
+        }
+        
+        .step-description {
+            color: var(--vscode-descriptionForeground);
+            font-family: var(--vscode-editor-font-family);
+            font-size: 0.9em;
+        }
+        
+        /* Sub-sequence grouping */
+        .sequence-group {
+            border: 1px solid var(--vscode-panel-border);
+            border-radius: 6px;
+            margin-bottom: 8px;
+            overflow: hidden;
+            animation: slideIn 0.2s ease-out;
+        }
+        .sequence-group-header {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 10px 12px;
+            cursor: pointer;
+            background: linear-gradient(135deg, rgba(86, 156, 214, 0.15) 0%, rgba(78, 201, 176, 0.1) 100%);
+            border-bottom: 1px solid var(--vscode-panel-border);
+            width: 100%;
+            box-sizing: border-box;
+        }
+        .sequence-group-header .expand-icon {
+            margin-left: 0;
+        }
+        .sequence-group-header:hover {
+            background: linear-gradient(135deg, rgba(86, 156, 214, 0.25) 0%, rgba(78, 201, 176, 0.15) 100%);
+        }
+        .sequence-group-icon {
+            font-size: 1em;
+        }
+        .sequence-group-name {
+            font-family: var(--vscode-editor-font-family);
+            font-weight: bold;
+            color: #569cd6;
+        }
+        .sequence-group-status {
+            font-size: 0.85em;
+            padding: 2px 8px;
+            border-radius: 3px;
+            background: rgba(86, 156, 214, 0.2);
+            color: #569cd6;
+            margin-left: auto;
+        }
+        .sequence-group-status.running {
+            background: rgba(86, 156, 214, 0.2);
+            color: #569cd6;
+        }
+        .sequence-group-status.completed {
+            background: rgba(78, 201, 176, 0.2);
+            color: #4ec9b0;
+        }
+        .sequence-group-content {
+            padding: 8px;
+            background: var(--vscode-editor-background);
+        }
+        .sequence-group-content .response-item {
+            margin-bottom: 6px;
+        }
+        .sequence-group-content .response-item:last-child {
+            margin-bottom: 0;
+        }
+        
+        .toggle-all-btn {
+            background: var(--vscode-button-secondaryBackground);
+            color: var(--vscode-button-secondaryForeground);
+            border: none;
+            padding: 4px 10px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 0.85em;
+            margin-left: auto;
+        }
+        .toggle-all-btn:hover {
+            background: var(--vscode-button-secondaryHoverBackground);
+        }
+        
+        /* Sequence Request Details */
+        .seq-request-url {
+            padding: 6px 12px;
+            background: var(--vscode-textCodeBlock-background);
+            border-bottom: 1px solid var(--vscode-panel-border);
+            font-family: var(--vscode-editor-font-family);
+            font-size: 0.9em;
+            color: var(--vscode-foreground);
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .seq-request-url .method {
+            font-weight: bold;
+            padding: 2px 6px;
+            border-radius: 3px;
+            font-size: 0.85em;
+        }
+        .seq-request-url .method.GET { background: #4ec9b022; color: #4ec9b0; }
+        .seq-request-url .method.POST { background: #dcdcaa22; color: #dcdcaa; }
+        .seq-request-url .method.PUT { background: #569cd622; color: #569cd6; }
+        .seq-request-url .method.PATCH { background: #c586c022; color: #c586c0; }
+        .seq-request-url .method.DELETE { background: #f14c4c22; color: #f14c4c; }
+        .seq-tabs {
+            display: flex;
+            gap: 0;
+            padding: 0 12px;
+            background: var(--vscode-editor-inactiveSelectionBackground);
+            border-bottom: 1px solid var(--vscode-panel-border);
+        }
+        .seq-tab {
+            padding: 6px 12px;
+            background: transparent;
+            border: none;
+            color: var(--vscode-foreground);
+            cursor: pointer;
+            font-size: 0.85em;
+            border-bottom: 2px solid transparent;
+            transition: all 0.15s;
+        }
+        .seq-tab:hover {
+            background: var(--vscode-list-hoverBackground);
+        }
+        .seq-tab.active {
+            border-bottom-color: var(--vscode-focusBorder);
+            color: var(--vscode-textLink-foreground);
+        }
+        .seq-tab-content {
+            display: none;
+            padding: 12px;
+        }
+        .seq-tab-content.active {
+            display: block;
+        }
+        .seq-body-container {
+            position: relative;
+        }
+        .seq-copy-btn {
+            position: absolute;
+            top: 0;
+            right: 0;
+            background: var(--vscode-button-secondaryBackground);
+            color: var(--vscode-button-secondaryForeground);
+            border: none;
+            padding: 4px 8px;
+            cursor: pointer;
+            font-size: 0.8em;
+            border-radius: 3px;
+            z-index: 1;
+        }
+        .seq-copy-btn:hover {
+            background: var(--vscode-button-secondaryHoverBackground);
+        }
+        .seq-compare-btn {
+            position: absolute;
+            top: 0;
+            right: 60px;
+            background: var(--vscode-button-secondaryBackground);
+            color: var(--vscode-button-secondaryForeground);
+            border: none;
+            padding: 4px 8px;
+            cursor: pointer;
+            font-size: 0.8em;
+            border-radius: 3px;
+            z-index: 1;
+        }
+        .seq-compare-btn:hover {
+            background: var(--vscode-button-secondaryHoverBackground);
+        }
+        .seq-compare-btn.comparing {
+            background: var(--vscode-inputValidation-infoBackground);
+            border: 1px solid var(--vscode-inputValidation-infoBorder);
+        }
+        .norn-toast {
+            position: fixed;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: var(--vscode-notifications-background);
+            color: var(--vscode-notifications-foreground);
+            border: 1px solid var(--vscode-notifications-border);
+            padding: 10px 20px;
+            border-radius: 4px;
+            z-index: 1000;
+            opacity: 0;
+            transition: opacity 0.3s;
+            pointer-events: none;
+        }
+        .norn-toast.visible {
+            opacity: 1;
+        }
+        .seq-schema-btn {
+            position: absolute;
+            top: 0;
+            right: 140px;
+            background: var(--vscode-button-secondaryBackground);
+            color: var(--vscode-button-secondaryForeground);
+            border: none;
+            padding: 4px 8px;
+            cursor: pointer;
+            font-size: 0.8em;
+            border-radius: 3px;
+            z-index: 1;
+        }
+        .seq-schema-btn:hover {
+            background: var(--vscode-button-secondaryHoverBackground);
+        }
+        .seq-headers-table,
+        .seq-cookies-table {
+            width: 100%;
+            border-collapse: collapse;
+            font-family: var(--vscode-editor-font-family);
+            font-size: 0.9em;
+        }
+        .seq-headers-table th,
+        .seq-headers-table td,
+        .seq-cookies-table th,
+        .seq-cookies-table td {
+            padding: 6px 8px;
+            text-align: left;
+            border-bottom: 1px solid var(--vscode-panel-border);
+        }
+        .seq-headers-table th,
+        .seq-cookies-table th {
+            background: var(--vscode-editor-inactiveSelectionBackground);
+            color: var(--vscode-descriptionForeground);
+            font-weight: normal;
+            font-size: 0.85em;
+        }
+        .seq-no-data {
+            color: var(--vscode-descriptionForeground);
+            font-style: italic;
+            padding: 12px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="sequence-header" id="sequence-header">
+            <span class="sequence-status status-running" id="status-badge">RUNNING</span>
+            <span class="sequence-name">${this._escapeHtml(sequenceName)}</span>
+            <span class="meta" id="step-count">0/${totalSteps} steps</span>
+            <span class="meta" id="elapsed-time">⏱ 0ms</span>
+            <button class="toggle-all-btn" id="toggle-all-btn" onclick="toggleAll()">Expand All</button>
+            <div class="progress-info" id="spinner">
+                <div class="spinner"></div>
+            </div>
+        </div>
+        
+        <div class="steps-list" id="steps-list">
+            <!-- Steps will be added here dynamically -->
+        </div>
+        
+        <div class="errors-section" id="errors-section" style="display: none;">
+            <h3>Errors & Warnings</h3>
+            <ul id="errors-list"></ul>
+        </div>
+        
+        <div id="norn-toast" class="norn-toast"></div>
+    </div>
+    
+    <script>
+        const vscode = acquireVsCodeApi();
+        let stepCount = 0;
+        let requestCounter = 0;
+        let allExpanded = false;
+        const totalSteps = ${totalSteps};
+        
+        // Track sequence group stack for nested sequences
+        let sequenceStack = [];
+        let sequenceGroupCounter = 0;
+        
+        // Response comparison state
+        let compareBaseline = null;
+        
+        function showToast(message) {
+            const toast = document.getElementById('norn-toast');
+            toast.textContent = message;
+            toast.classList.add('visible');
+            setTimeout(() => toast.classList.remove('visible'), 3000);
+        }
+        
+        function compareResponse(stepId) {
+            const bodyEl = document.getElementById(stepId + '-body-text');
+            if (!bodyEl) return;
+            
+            const body = bodyEl.value || bodyEl.textContent || '';
+            
+            if (!compareBaseline) {
+                // First click - set baseline
+                compareBaseline = { stepId, body };
+                showToast('Select another response to compare');
+                // Highlight the button
+                document.querySelectorAll('.seq-compare-btn').forEach(btn => btn.classList.remove('comparing'));
+                const btn = document.querySelector('[data-compare-step="' + stepId + '"]');
+                if (btn) btn.classList.add('comparing');
+            } else {
+                // Second click - send compare request
+                vscode.postMessage({ type: 'setBaseline', body: compareBaseline.body });
+                vscode.postMessage({ type: 'compare', body: body });
+                compareBaseline = null;
+                document.querySelectorAll('.seq-compare-btn').forEach(btn => btn.classList.remove('comparing'));
+            }
+        }
+        
+        // Listen for reset compare message from extension
+        window.addEventListener('message', event => {
+            const message = event.data;
+            if (message.type === 'resetCompare') {
+                compareBaseline = null;
+                document.querySelectorAll('.seq-compare-btn').forEach(btn => btn.classList.remove('comparing'));
+            }
+        });
+        
+        function assertSchema(stepId, method, url, variableName) {
+            const bodyEl = document.getElementById(stepId + '-body-text');
+            if (!bodyEl) return;
+            
+            const body = bodyEl.value || bodyEl.textContent || '';
+            vscode.postMessage({ 
+                type: 'assertSchema', 
+                body: body,
+                method: method,
+                url: url,
+                variableName: variableName
+            });
+            showToast('Generating schema...');
+        }
+        
+        function assertProperty(path, value, variableName) {
+            vscode.postMessage({
+                type: 'assertProperty',
+                path: path,
+                value: value,
+                variableName: variableName
+            });
+            showToast('Assertion added for ' + path);
+        }
+        
+        // Global store for contract data to avoid escaping issues
+        const contractDataStore = {};
+        
+        function openContractView(contractId) {
+            const contractData = contractDataStore[contractId];
+            if (!contractData) {
+                console.error('Contract data not found for ID:', contractId);
+                return;
+            }
+            vscode.postMessage({
+                type: 'openContractView',
+                schemaPath: contractData.schemaPath,
+                errors: contractData.errors,
+                responseBody: contractData.responseBody,
+                schema: contractData.schema
+            });
+        }
+        
+        function openContractViewFromButton(button) {
+            const contractDataBase64 = button.getAttribute('data-contract');
+            if (!contractDataBase64) {
+                console.error('No contract data on button');
+                return;
+            }
+            try {
+                const contractData = JSON.parse(decodeURIComponent(atob(contractDataBase64)));
+                vscode.postMessage({
+                    type: 'openContractView',
+                    schemaPath: contractData.schemaPath,
+                    errors: contractData.errors,
+                    responseBody: contractData.responseBody,
+                    schema: contractData.schema
+                });
+            } catch (e) {
+                console.error('Failed to parse contract data:', e);
+            }
+        }
+        
+        function storeContractData(id, data) {
+            contractDataStore[id] = data;
+        }
+        
+        function escapeHtml(text) {
+            const div = document.createElement('div');
+            div.textContent = text;
+            return div.innerHTML;
+        }
+        
+        function escapeJsString(text) {
+            return String(text || '').replace(/\\\\/g, '\\\\\\\\').replace(/'/g, "\\\\'");
+        }
+        
+        function getStatusClass(status) {
+            if (status >= 200 && status < 300) return 'status-success';
+            if (status >= 300 && status < 400) return 'status-redirect';
+            if (status >= 400 && status < 500) return 'status-client-error';
+            if (status >= 500) return 'status-server-error';
+            return '';
+        }
+        
+        function formatJson(obj) {
+            if (typeof obj !== 'object' || obj === null) {
+                return escapeHtml(String(obj));
+            }
+            try {
+                const json = JSON.stringify(obj, null, 2);
+                return json.replace(/"([^"]+)":/g, '<span class="json-key">"$1"</span>:')
+                    .replace(/: "([^"]*)"/g, ': <span class="json-string">"$1"</span>')
+                    .replace(/: (\\d+\\.?\\d*)/g, ': <span class="json-number">$1</span>')
+                    .replace(/: (true|false)/g, ': <span class="json-boolean">$1</span>')
+                    .replace(/: (null)/g, ': <span class="json-null">$1</span>');
+            } catch {
+                return escapeHtml(String(obj));
+            }
+        }
+        
+        function formatJsonWithHighlight(obj, highlightPath) {
+            if (typeof obj !== 'object' || obj === null) {
+                return escapeHtml(String(obj));
+            }
+            try {
+                const json = JSON.stringify(obj, null, 2);
+                let result = json.replace(/"([^"]+)":/g, '<span class="json-key">"$1"</span>:')
+                    .replace(/: "([^"]*)"/g, ': <span class="json-string">"$1"</span>')
+                    .replace(/: (\\d+\\.?\\d*)/g, ': <span class="json-number">$1</span>')
+                    .replace(/: (true|false)/g, ': <span class="json-boolean">$1</span>')
+                    .replace(/: (null)/g, ': <span class="json-null">$1</span>');
+                
+                // Highlight the specific path if provided (e.g., "body.status" -> highlight "status")
+                if (highlightPath) {
+                    const pathParts = highlightPath.replace(/^body\\.?/, '').split('.');
+                    const leafKey = pathParts[pathParts.length - 1];
+                    if (leafKey) {
+                        // Highlight the key that was checked
+                        const keyRegex = new RegExp('(<span class="json-key">"' + leafKey + '"</span>:)', 'g');
+                        result = result.replace(keyRegex, '<span class="json-highlighted">$1</span>');
+                    }
+                }
+                return result;
+            } catch {
+                return escapeHtml(String(obj));
+            }
+        }
+        
+        function formatJsonInteractive(obj, variableName, basePath) {
+            basePath = basePath || 'body';
+            
+            function encodeData(val) {
+                // Base64 encode JSON to avoid all escaping issues
+                return btoa(JSON.stringify(val));
+            }
+            
+            function renderValue(val, path) {
+                const dataAttrs = 'data-path="' + escapeHtml(path) + '" data-var="' + escapeHtml(variableName) + '"';
+                
+                if (val === null) {
+                    return '<span class="json-null json-clickable" ' + dataAttrs + ' data-value="' + encodeData(null) + '">null</span>';
+                }
+                if (typeof val === 'boolean') {
+                    return '<span class="json-boolean json-clickable" ' + dataAttrs + ' data-value="' + encodeData(val) + '">' + val + '</span>';
+                }
+                if (typeof val === 'number') {
+                    return '<span class="json-number json-clickable" ' + dataAttrs + ' data-value="' + encodeData(val) + '">' + val + '</span>';
+                }
+                if (typeof val === 'string') {
+                    return '<span class="json-string json-clickable" ' + dataAttrs + ' data-value="' + encodeData(val) + '">"' + escapeHtml(val) + '"</span>';
+                }
+                if (Array.isArray(val)) {
+                    if (val.length === 0) return '[]';
+                    const items = val.map((item, i) => renderValue(item, path + '[' + i + ']'));
+                    return '[\\n' + items.map(item => '  ' + item.split('\\n').join('\\n  ')).join(',\\n') + '\\n]';
+                }
+                if (typeof val === 'object') {
+                    const keys = Object.keys(val);
+                    if (keys.length === 0) return '{}';
+                    const pairs = keys.map(k => {
+                        const newPath = path + '.' + k;
+                        const renderedVal = renderValue(val[k], newPath);
+                        return '  <span class="json-key">"' + escapeHtml(k) + '"</span>: ' + renderedVal.split('\\n').join('\\n  ');
+                    });
+                    return '{\\n' + pairs.join(',\\n') + '\\n}';
+                }
+                return escapeHtml(String(val));
+            }
+            
+            try {
+                return renderValue(obj, basePath);
+            } catch (e) {
+                console.error('formatJsonInteractive error:', e);
+                return formatJson(obj);
+            }
+        }
+        
+        // Event delegation for clickable JSON values
+        document.addEventListener('click', function(e) {
+            const target = e.target;
+            if (target && target.classList && target.classList.contains('json-clickable')) {
+                const path = target.getAttribute('data-path');
+                const varName = target.getAttribute('data-var');
+                const encodedValue = target.getAttribute('data-value');
+                if (path && varName && encodedValue) {
+                    try {
+                        const value = JSON.parse(atob(encodedValue));
+                        assertProperty(path, value, varName);
+                    } catch (err) {
+                        console.error('Failed to parse clickable JSON value:', err);
+                    }
+                }
+            }
+        });
+        
+        function toggleResponsePreview(headerEl) {
+            const previewBody = headerEl.nextElementSibling;
+            const icon = headerEl.querySelector('.expand-icon');
+            if (previewBody) {
+                if (previewBody.style.display === 'none') {
+                    previewBody.style.display = 'block';
+                    if (icon) icon.classList.add('expanded');
+                } else {
+                    previewBody.style.display = 'none';
+                    if (icon) icon.classList.remove('expanded');
+                }
+            }
+        }
+        
+        function formatHeaders(headers) {
+            if (!headers || Object.keys(headers).length === 0) {
+                return '<p class="seq-no-data">No headers</p>';
+            }
+            const rows = Object.entries(headers).map(([key, value]) => 
+                '<tr><td>' + escapeHtml(key) + '</td><td>' + escapeHtml(String(value)) + '</td></tr>'
+            ).join('');
+            return '<table class="seq-headers-table"><thead><tr><th>Name</th><th>Value</th></tr></thead><tbody>' + rows + '</tbody></table>';
+        }
+        
+        function formatCookies(cookies) {
+            if (!cookies || cookies.length === 0) {
+                return '<p class="seq-no-data">No cookies</p>';
+            }
+            const rows = cookies.map(c => 
+                '<tr><td>' + escapeHtml(c.name) + '</td><td title="' + escapeHtml(c.value) + '">' + 
+                escapeHtml(c.value.length > 30 ? c.value.substring(0, 30) + '...' : c.value) + 
+                '</td><td>' + escapeHtml(c.domain || '') + '</td><td>' + escapeHtml(c.path || '/') + '</td></tr>'
+            ).join('');
+            return '<table class="seq-cookies-table"><thead><tr><th>Name</th><th>Value</th><th>Domain</th><th>Path</th></tr></thead><tbody>' + rows + '</tbody></table>';
+        }
+        
+        function switchTab(stepId, tabName) {
+            const container = document.getElementById(stepId);
+            if (!container) return;
+            
+            // Update tab buttons
+            const tabs = container.querySelectorAll('.seq-tab');
+            tabs.forEach(t => {
+                if (t.dataset.tab === tabName) {
+                    t.classList.add('active');
+                } else {
+                    t.classList.remove('active');
+                }
+            });
+            
+            // Update tab contents
+            const contents = container.querySelectorAll('.seq-tab-content');
+            contents.forEach(c => {
+                if (c.id === stepId + '-' + tabName) {
+                    c.classList.add('active');
+                } else {
+                    c.classList.remove('active');
+                }
+            });
+        }
+        
+        function copyResponseBody(stepId) {
+            const bodyEl = document.getElementById(stepId + '-body-text');
+            if (bodyEl) {
+                navigator.clipboard.writeText(bodyEl.value || bodyEl.textContent || '');
+            }
+        }
+        
+        function toggleResponse(id) {
+            const body = document.getElementById(id);
+            const icon = document.getElementById('icon-' + id);
+            
+            if (!body) return;
+            
+            if (body.style.display === 'none') {
+                body.style.display = 'block';
+                if (icon) icon.classList.add('expanded');
+            } else {
+                body.style.display = 'none';
+                if (icon) icon.classList.remove('expanded');
+            }
+        }
+        
+        function toggleSequenceGroup(id) {
+            const content = document.getElementById('seq-content-' + id);
+            const icon = document.getElementById('seq-icon-' + id);
+            
+            if (!content) return;
+            
+            if (content.style.display === 'none') {
+                content.style.display = 'block';
+                if (icon) icon.classList.add('expanded');
+            } else {
+                content.style.display = 'none';
+                if (icon) icon.classList.remove('expanded');
+            }
+        }
+        
+        function startSequenceGroup(sequenceName) {
+            const groupId = 'seq-' + (++sequenceGroupCounter);
+            const container = sequenceStack.length > 0 
+                ? document.getElementById('seq-content-' + sequenceStack[sequenceStack.length - 1])
+                : document.getElementById('steps-list');
+            
+            const html = \`
+                <div class="sequence-group" id="\${groupId}">
+                    <div class="sequence-group-header" onclick="toggleSequenceGroup('\${groupId}')">
+                        <span class="expand-icon" id="seq-icon-\${groupId}">▶</span>
+                        <span class="sequence-group-icon">📦</span>
+                        <span class="sequence-group-name">\${escapeHtml(sequenceName)}</span>
+                        <span class="sequence-group-status running" id="seq-status-\${groupId}">running...</span>
+                    </div>
+                    <div class="sequence-group-content" id="seq-content-\${groupId}" style="display: none;">
+                    </div>
+                </div>
+            \`;
+            
+            container.insertAdjacentHTML('beforeend', html);
+            sequenceStack.push(groupId);
+        }
+        
+        function endSequenceGroup() {
+            if (sequenceStack.length > 0) {
+                const groupId = sequenceStack.pop();
+                const statusEl = document.getElementById('seq-status-' + groupId);
+                if (statusEl) {
+                    statusEl.textContent = 'completed';
+                    statusEl.classList.remove('running');
+                    statusEl.classList.add('completed');
+                }
+            }
+        }
+        
+        function getCurrentContainer() {
+            if (sequenceStack.length > 0) {
+                return document.getElementById('seq-content-' + sequenceStack[sequenceStack.length - 1]);
+            }
+            return document.getElementById('steps-list');
+        }
+        
+        function toggleAll() {
+            const bodies = document.querySelectorAll('.response-body');
+            const seqContents = document.querySelectorAll('.sequence-group-content');
+            const icons = document.querySelectorAll('.expand-icon');
+            const btn = document.getElementById('toggle-all-btn');
+            
+            allExpanded = !allExpanded;
+            
+            bodies.forEach(body => {
+                body.style.display = allExpanded ? 'block' : 'none';
+            });
+            
+            seqContents.forEach(content => {
+                content.style.display = allExpanded ? 'block' : 'none';
+            });
+            
+            icons.forEach(icon => {
+                if (allExpanded) {
+                    icon.classList.add('expanded');
+                } else {
+                    icon.classList.remove('expanded');
+                }
+            });
+            
+            btn.textContent = allExpanded ? 'Collapse All' : 'Expand All';
+        }
+        
+        function addStepHtml(step, stepIndex, elapsed, progress) {
+            const container = getCurrentContainer();
+            const stepId = 'step-' + stepIndex + '-' + Date.now();
+            
+            let html = '';
+            
+            if (step.type === 'print' && step.print) {
+                const hasBody = step.print.body && step.print.body.trim();
+                
+                if (hasBody) {
+                    html = \`
+                        <div class="response-item print-item">
+                            <div class="response-header" onclick="toggleResponse('\${stepId}')">
+                                <span class="step-number">\${stepIndex + 1}.</span>
+                                <span class="print-icon">📝</span>
+                                <span class="print-title">\${escapeHtml(step.print.title)}</span>
+                                <span class="meta">@ \${elapsed}ms</span>
+                                <span class="expand-icon" id="icon-\${stepId}">▶</span>
+                            </div>
+                            <div class="response-body print-body" id="\${stepId}" style="display: none;">
+                                <pre><code>\${escapeHtml(step.print.body)}</code></pre>
+                            </div>
+                        </div>
+                    \`;
+                } else {
+                    html = \`
+                        <div class="response-item print-item">
+                            <div class="print-content">
+                                <span class="step-number">\${stepIndex + 1}.</span>
+                                <span class="print-icon">📝</span>
+                                <span class="print-title">\${escapeHtml(step.print.title)}</span>
+                                <span class="meta">@ \${elapsed}ms</span>
+                            </div>
+                        </div>
+                    \`;
+                }
+            } else if (step.type === 'request' && step.response) {
+                requestCounter++;
+                const response = step.response;
+                const statusClass = getStatusClass(response.status);
+                // Show variable name if available, otherwise fall back to $N
+                const responseLabel = step.variableName || ('$' + requestCounter);
+                const bodyContent = typeof response.body === 'object' 
+                    ? formatJsonInteractive(response.body, responseLabel, 'body') 
+                    : escapeHtml(String(response.body || ''));
+                const rawBody = typeof response.body === 'object'
+                    ? JSON.stringify(response.body, null, 2)
+                    : String(response.body || '');
+                const method = step.requestMethod || 'GET';
+                const url = step.requestUrl || '';
+                const headersHtml = formatHeaders(response.headers);
+                const cookiesHtml = formatCookies(response.cookies);
+                
+                // Show retry info if request was retried
+                const retryInfo = response.retryInfo && response.retryInfo.attemptsMade > 1
+                    ? \`<span class="retry-info">🔄 retried \${response.retryInfo.attemptsMade - 1}x</span>\`
+                    : '';
+                
+                html = \`
+                    <div class="response-item">
+                        <div class="response-header" onclick="toggleResponse('\${stepId}')">
+                            <span class="step-number">\${stepIndex + 1}.</span>
+                            <span class="response-index">\${responseLabel}</span>
+                            <span class="status-code \${statusClass}">\${response.status} \${escapeHtml(response.statusText || '')}</span>
+                            <span class="meta">⏱ \${response.duration}ms</span>
+                            \${retryInfo}
+                            <span class="expand-icon" id="icon-\${stepId}">▶</span>
+                        </div>
+                        <div class="response-body" id="\${stepId}" style="display: none;">
+                            <div class="seq-request-url">
+                                <span class="method \${method}">\${method}</span>
+                                <span>\${escapeHtml(url)}</span>
+                            </div>
+                            <div class="seq-tabs">
+                                <button class="seq-tab active" data-tab="body" onclick="switchTab('\${stepId}', 'body')">Body</button>
+                                <button class="seq-tab" data-tab="headers" onclick="switchTab('\${stepId}', 'headers')">Headers</button>
+                                <button class="seq-tab" data-tab="cookies" onclick="switchTab('\${stepId}', 'cookies')">Cookies</button>
+                            </div>
+                            <div id="\${stepId}-body" class="seq-tab-content active">
+                                <div class="seq-body-container">
+                                    <button class="seq-schema-btn" onclick="assertSchema('\${stepId}', '\${escapeJsString(method)}', '\${escapeJsString(url)}', '\${escapeJsString(responseLabel)}')">📐 Assert Schema</button>
+                                    <button class="seq-compare-btn" data-compare-step="\${stepId}" onclick="compareResponse('\${stepId}')">⇄ Compare</button>
+                                    <button class="seq-copy-btn" onclick="copyResponseBody('\${stepId}')">📋 Copy</button>
+                                    <pre><code>\${bodyContent}</code></pre>
+                                    <textarea id="\${stepId}-body-text" style="display:none;">\${escapeHtml(rawBody)}</textarea>
+                                </div>
+                            </div>
+                            <div id="\${stepId}-headers" class="seq-tab-content">
+                                \${headersHtml}
+                            </div>
+                            <div id="\${stepId}-cookies" class="seq-tab-content">
+                                \${cookiesHtml}
+                            </div>
+                        </div>
+                    </div>
+                \`;
+            } else if (step.type === 'script' && step.script) {
+                const script = step.script;
+                const hasStderr = script.error && script.error.trim();
+                const scriptStatusClass = !script.success ? 'status-error' : (hasStderr ? 'status-warning' : 'status-success');
+                const scriptStatusText = !script.success ? 'Exit ' + script.exitCode : (hasStderr ? 'Warning' : 'OK');
+                const hasOutput = (script.output && script.output.trim()) || (script.error && script.error.trim());
+                
+                html = \`
+                    <div class="response-item script-item">
+                        <div class="response-header" onclick="toggleResponse('\${stepId}')">
+                            <span class="step-number">\${stepIndex + 1}.</span>
+                            <span class="script-icon">⚡</span>
+                            <span class="script-type">\${escapeHtml(script.type)}</span>
+                            <span class="script-path">\${escapeHtml(script.scriptPath)}</span>
+                            \${script.captureVar ? '<span class="capture-var">→ ' + escapeHtml(script.captureVar) + '</span>' : ''}
+                            <span class="status-code \${scriptStatusClass}">\${scriptStatusText}</span>
+                            <span class="meta">⏱ \${script.duration}ms</span>
+                            <span class="expand-icon" id="icon-\${stepId}">\${hasOutput ? '▶' : ''}</span>
+                        </div>
+                        \${hasOutput ? \`
+                        <div class="response-body" id="\${stepId}" style="display: none;">
+                            \${script.output && script.output.trim() ? '<div class="script-output"><div class="output-label">stdout:</div><pre><code>' + escapeHtml(script.output) + '</code></pre></div>' : ''}
+                            \${script.error && script.error.trim() ? '<div class="script-output stderr"><div class="output-label">stderr:</div><pre><code>' + escapeHtml(script.error) + '</code></pre></div>' : ''}
+                        </div>
+                        \` : ''}
+                    </div>
+                \`;
+            } else if (step.type === 'assertion' && step.assertion) {
+                const assertion = step.assertion;
+                const assertionClass = assertion.passed ? 'status-success' : 'status-error';
+                const assertionIcon = assertion.passed ? '✓' : '✗';
+                const hasDetails = !assertion.passed || assertion.message;
+                const isFailed = !assertion.passed;
+                const isSchemaAssertion = assertion.operator === 'matchesSchema';
+                
+                // Build display expression with friendly name when available
+                let displayExpr = assertion.expression;
+                if (assertion.friendlyName && assertion.responseIndex) {
+                    // Replace $N with the friendly variable name
+                    displayExpr = displayExpr.replace('$' + assertion.responseIndex, assertion.friendlyName);
+                }
+                
+                let detailsHtml = '';
+                if (hasDetails) {
+                    if (assertion.message) {
+                        detailsHtml = '<div class="assertion-message">' + escapeHtml(assertion.message) + '</div>';
+                    }
+                    if (assertion.error) {
+                        detailsHtml += '<div class="assertion-error">' + escapeHtml(assertion.error) + '</div>';
+                        
+                        // Add Contract View button for failed schema assertions
+                        if (isSchemaAssertion && isFailed && assertion.schemaErrors) {
+                            const contractId = 'contract-' + stepId;
+                            const contractData = {
+                                schemaPath: assertion.schemaPath || assertion.rightValue,
+                                errors: assertion.schemaErrors,
+                                responseBody: assertion.leftValue,
+                                schema: assertion.schema
+                            };
+                            // Store contract data using base64 encoding in data attribute to avoid escaping issues
+                            const contractDataBase64 = btoa(encodeURIComponent(JSON.stringify(contractData)));
+                            detailsHtml += \`
+                                <div class="contract-view-actions">
+                                    <button class="contract-view-btn" data-contract-id="\${contractId}" data-contract="\${contractDataBase64}" onclick="openContractViewFromButton(this)">
+                                        📋 View Contract Details
+                                    </button>
+                                </div>
+                            \`;
+                        }
+                    } else if (isFailed) {
+                        detailsHtml += '<div class="assertion-details">' +
+                            '<div class="assertion-expected">Expected: <code>' + escapeHtml(assertion.rightExpression || assertion.operator) + '</code></div>' +
+                            '<div class="assertion-actual">Actual: <code>' + escapeHtml(JSON.stringify(assertion.leftValue)) + '</code></div>' +
+                            '</div>';
+                        
+                        // Add inline response preview for failures
+                        if (assertion.relatedResponse) {
+                            const resp = assertion.relatedResponse;
+                            const respStatusClass = getStatusClass(resp.status);
+                            const bodyPreview = typeof resp.body === 'object' 
+                                ? formatJsonWithHighlight(resp.body, assertion.jsonPath)
+                                : escapeHtml(String(resp.body || ''));
+                            const varLabel = assertion.friendlyName || ('$' + assertion.responseIndex);
+                            
+                            detailsHtml += \`
+                                <div class="assertion-response-preview">
+                                    <div class="preview-header" onclick="toggleResponsePreview(this)">
+                                        <span class="expand-icon">▶</span>
+                                        <span>\${varLabel} Response</span>
+                                        <span class="status-code \${respStatusClass}">\${resp.status}</span>
+                                    </div>
+                                    <div class="preview-body" style="display: none;">
+                                        <pre><code>\${bodyPreview}</code></pre>
+                                    </div>
+                                </div>
+                            \`;
+                        }
+                    }
+                }
+                
+                // Auto-expand failed assertions
+                const expandedByDefault = isFailed;
+                
+                html = \`
+                    <div class="response-item assertion-item \${assertion.passed ? 'assertion-passed' : 'assertion-failed'}">
+                        <div class="response-header\${hasDetails ? '' : ' no-expand'}" \${hasDetails ? 'onclick="toggleResponse(\\'' + stepId + '\\')"' : ''}>
+                            <span class="step-number">\${stepIndex + 1}.</span>
+                            <span class="assertion-icon \${assertionClass}">\${assertionIcon}</span>
+                            <span class="assertion-expr">assert <code>\${escapeHtml(displayExpr)}</code></span>
+                            \${hasDetails ? '<span class="expand-icon' + (expandedByDefault ? ' expanded' : '') + '" id="icon-' + stepId + '">▶</span>' : ''}
+                        </div>
+                        \${hasDetails ? \`
+                        <div class="response-body assertion-body" id="\${stepId}" style="display: \${expandedByDefault ? 'block' : 'none'};">
+                            \${detailsHtml}
+                        </div>
+                        \` : ''}
+                    </div>
+                \`;
+            }
+            
+            if (html && container) {
+                container.insertAdjacentHTML('beforeend', html);
+            }
+            stepCount++;
+            document.getElementById('step-count').textContent = stepCount + '/${totalSteps} steps';
+            document.getElementById('elapsed-time').textContent = '⏱ ' + elapsed + 'ms';
+        }
+        
+        function finalize(success, errors, duration) {
+            // Update status badge
+            const badge = document.getElementById('status-badge');
+            badge.textContent = success ? 'PASSED' : 'FAILED';
+            badge.className = 'sequence-status ' + (success ? 'status-success' : 'status-error');
+            
+            // Hide spinner
+            document.getElementById('spinner').style.display = 'none';
+            
+            // Update elapsed time
+            document.getElementById('elapsed-time').textContent = '⏱ ' + duration + 'ms total';
+            
+            // Show errors if any
+            if (errors && errors.length > 0) {
+                const errorsSection = document.getElementById('errors-section');
+                const errorsList = document.getElementById('errors-list');
+                errorsSection.style.display = 'block';
+                
+                errors.forEach(err => {
+                    const li = document.createElement('li');
+                    li.className = err.startsWith('Warning') ? 'warning' : 'error';
+                    li.textContent = err;
+                    errorsList.appendChild(li);
+                });
+            }
+        }
+        
+        // Listen for messages from the extension
+        window.addEventListener('message', event => {
+            const message = event.data;
+            
+            if (message.type === 'reset') {
+                // Clear all state for a fresh run
+                stepCount = 0;
+                requestCounter = 0;
+                allExpanded = false;
+                sequenceStack = [];
+                sequenceGroupCounter = 0;
+                document.getElementById('steps-list').innerHTML = '';
+                document.getElementById('step-count').textContent = '0/' + message.totalSteps + ' steps';
+                document.getElementById('elapsed-time').textContent = '⏱ 0ms';
+                document.getElementById('status-badge').textContent = 'RUNNING';
+                document.getElementById('status-badge').className = 'sequence-status status-running';
+                document.getElementById('spinner').style.display = 'flex';
+                document.getElementById('toggle-all-btn').textContent = 'Expand All';
+                document.getElementById('errors-section').style.display = 'none';
+                document.getElementById('errors-list').innerHTML = '';
+            } else if (message.type === 'addStep') {
+                const progress = message.progress || {};
+                
+                // Handle sequence start/end
+                if (progress.stepType === 'sequenceStart' && progress.sequenceName) {
+                    startSequenceGroup(progress.sequenceName);
+                } else if (progress.stepType === 'sequenceEnd') {
+                    endSequenceGroup();
+                } else if (message.step) {
+                    // Regular step
+                    addStepHtml(message.step, message.step.stepIndex, message.elapsed, progress);
+                }
+            } else if (message.type === 'finalize') {
+                finalize(message.success, message.errors, message.duration);
+            }
+        });
+    </script>
+</body>
+</html>`;
+    }
+    _getMultiSequenceHtmlContent(sequenceName, runs) {
+        const passedRuns = runs.filter(r => r.result.success).length;
+        const totalDuration = runs.reduce((sum, run) => sum + run.result.duration, 0);
+        const allPassed = passedRuns === runs.length;
+        const statusClass = allPassed ? 'status-success' : 'status-error';
+        const statusText = allPassed ? 'PASSED' : 'FAILED';
+        const runsHtml = runs.map((run, index) => {
+            const runId = `run-${index}`;
+            const runStatusClass = run.result.success ? 'status-success' : 'status-error';
+            const runStatusText = run.result.success ? 'PASSED' : 'FAILED';
+            const stepCount = run.result.steps?.length || run.result.responses.length;
+            const expandedByDefault = !run.result.success || index === 0;
+            const runStepsHtml = run.result.steps && run.result.steps.length > 0
+                ? this._renderOrderedSteps(run.result.steps, `${runId}-step`)
+                : this._renderGroupedResults(run.result, `${runId}-legacy`);
+            const runErrorsHtml = run.result.errors.length > 0 ? `
+                <div class="errors-section">
+                    <h3>Errors & Warnings</h3>
+                    <ul>
+                        ${run.result.errors.map(e => `<li class="${e.startsWith('Warning') ? 'warning' : 'error'}">${this._escapeHtml(e)}</li>`).join('')}
+                    </ul>
+                </div>
+            ` : '';
+            return `
+                <div class="run-group">
+                    <div class="run-group-header" onclick="toggleRunGroup('${runId}')">
+                        <span class="expand-icon ${expandedByDefault ? 'expanded' : ''}" id="icon-${runId}">▶</span>
+                        <span class="run-group-name">Run ${index + 1}: ${this._escapeHtml(run.label)}</span>
+                        <span class="run-group-meta">${stepCount} step${stepCount !== 1 ? 's' : ''}</span>
+                        <span class="status-code ${runStatusClass}">${runStatusText}</span>
+                        <span class="run-group-meta">⏱ ${run.result.duration}ms</span>
+                    </div>
+                    <div class="run-group-content" id="${runId}" style="display: ${expandedByDefault ? 'block' : 'none'};">
+                        <div class="steps-list">
+                            ${runStepsHtml}
+                        </div>
+                        ${runErrorsHtml}
+                    </div>
+                </div>
+            `;
+        }).join('');
+        return /*html*/ `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sequence Result</title>
+    <style>
+        * { box-sizing: border-box; }
+        
+        body {
+            font-family: var(--vscode-font-family);
+            font-size: var(--vscode-font-size);
+            color: var(--vscode-foreground);
+            background-color: var(--vscode-editor-background);
+            padding: 0;
+            margin: 0;
+        }
+        
+        .container { padding: 16px; }
+        
+        .sequence-header {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            padding: 16px;
+            background: var(--vscode-editor-inactiveSelectionBackground);
+            border-radius: 6px;
+            margin-bottom: 16px;
+        }
+        
+        .sequence-name {
+            font-size: 1.2em;
+            font-weight: bold;
+        }
+        
+        .sequence-status {
+            padding: 4px 12px;
+            border-radius: 4px;
+            font-weight: bold;
+        }
+        
+        .status-success { background: #4ec9b0; color: #000; }
+        .status-warning { background: #cca700; color: #000; }
+        .status-error { background: linear-gradient(135deg, #c9555a 0%, #a84347 100%); color: #fff; }
+        .status-redirect { background: #dcdcaa; color: #000; }
+        .status-client-error { background: #ce9178; color: #000; }
+        .status-server-error { background: linear-gradient(135deg, #c9555a 0%, #a84347 100%); color: #fff; }
+        
+        .meta { color: var(--vscode-descriptionForeground); }
+        
+        .run-group {
+            border: 1px solid var(--vscode-panel-border);
+            border-radius: 6px;
+            margin-bottom: 12px;
+            overflow: hidden;
+        }
+        .run-group-header {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 10px 12px;
+            cursor: pointer;
+            background: linear-gradient(135deg, rgba(86, 156, 214, 0.15) 0%, rgba(78, 201, 176, 0.1) 100%);
+            border-bottom: 1px solid var(--vscode-panel-border);
+        }
+        .run-group-header:hover {
+            background: linear-gradient(135deg, rgba(86, 156, 214, 0.25) 0%, rgba(78, 201, 176, 0.15) 100%);
+        }
+        .run-group-name {
+            font-family: var(--vscode-editor-font-family);
+            font-weight: bold;
+            color: #569cd6;
+            flex: 1;
+        }
+        .run-group-meta {
+            color: var(--vscode-descriptionForeground);
+            font-size: 0.9em;
+        }
+        .run-group-content {
+            padding: 8px;
+            background: var(--vscode-editor-background);
+        }
+        
+        .retry-info { 
+            color: #dcdcaa;
+            font-size: 0.85em;
+        }
+        
+        .response-item {
+            border: 1px solid var(--vscode-panel-border);
+            border-radius: 6px;
+            margin-bottom: 8px;
+            overflow: hidden;
+        }
+        
+        .response-header {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 12px;
+            cursor: pointer;
+            background: var(--vscode-editor-inactiveSelectionBackground);
+        }
+        
+        .response-header:hover {
+            background: var(--vscode-list-hoverBackground);
+        }
+        
+        .response-index {
+            font-family: var(--vscode-editor-font-family);
+            font-weight: bold;
+            color: var(--vscode-symbolIcon-variableForeground, #9cdcfe);
+        }
+        
+        .status-code {
+            padding: 2px 8px;
+            border-radius: 3px;
+            font-size: 0.9em;
+        }
+        
+        .expand-icon {
+            margin-left: auto;
+            transition: transform 0.2s;
+        }
+        
+        .expand-icon.expanded {
+            transform: rotate(90deg);
+        }
+        
+        .response-body {
+            padding: 12px;
+            border-top: 1px solid var(--vscode-panel-border);
+        }
+
+        .seq-request-url {
+            padding: 6px 12px;
+            background: var(--vscode-textCodeBlock-background);
+            border-bottom: 1px solid var(--vscode-panel-border);
+            font-family: var(--vscode-editor-font-family);
+            font-size: 0.9em;
+            color: var(--vscode-foreground);
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin: -12px -12px 12px -12px;
+        }
+        .seq-request-url .method {
+            font-weight: bold;
+            padding: 2px 6px;
+            border-radius: 3px;
+            font-size: 0.85em;
+        }
+        .seq-request-url .method.GET { background: #4ec9b022; color: #4ec9b0; }
+        .seq-request-url .method.POST { background: #dcdcaa22; color: #dcdcaa; }
+        .seq-request-url .method.PUT { background: #569cd622; color: #569cd6; }
+        .seq-request-url .method.PATCH { background: #c586c022; color: #c586c0; }
+        .seq-request-url .method.DELETE { background: #f14c4c22; color: #f14c4c; }
+
+        .seq-body-container {
+            position: relative;
+        }
+        .seq-copy-btn {
+            position: absolute;
+            top: 0;
+            right: 0;
+            background: var(--vscode-button-secondaryBackground);
+            color: var(--vscode-button-secondaryForeground);
+            border: none;
+            padding: 4px 8px;
+            cursor: pointer;
+            font-size: 0.8em;
+            border-radius: 3px;
+            z-index: 1;
+        }
+        .seq-copy-btn:hover {
+            background: var(--vscode-button-secondaryHoverBackground);
+        }
+        .seq-compare-btn {
+            position: absolute;
+            top: 0;
+            right: 60px;
+            background: var(--vscode-button-secondaryBackground);
+            color: var(--vscode-button-secondaryForeground);
+            border: none;
+            padding: 4px 8px;
+            cursor: pointer;
+            font-size: 0.8em;
+            border-radius: 3px;
+            z-index: 1;
+        }
+        .seq-compare-btn:hover {
+            background: var(--vscode-button-secondaryHoverBackground);
+        }
+        .seq-compare-btn.comparing {
+            background: var(--vscode-inputValidation-infoBackground);
+            border: 1px solid var(--vscode-inputValidation-infoBorder);
+        }
+
+        .norn-toast {
+            position: fixed;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: var(--vscode-notifications-background);
+            color: var(--vscode-notifications-foreground);
+            border: 1px solid var(--vscode-notifications-border);
+            padding: 10px 20px;
+            border-radius: 4px;
+            z-index: 1000;
+            opacity: 0;
+            transition: opacity 0.3s;
+            pointer-events: none;
+        }
+        .norn-toast.visible {
+            opacity: 1;
+        }
+        
+        pre {
+            margin: 0;
+            background: transparent;
+            font-family: var(--vscode-editor-font-family);
+            font-size: var(--vscode-editor-font-size);
+            line-height: 1.5;
+            overflow-x: auto;
+        }
+        
+        pre code { background: none; }
+        
+        .errors-section {
+            margin-top: 12px;
+            padding: 12px 16px;
+            background: linear-gradient(135deg, rgba(201, 85, 90, 0.2) 0%, rgba(168, 67, 71, 0.15) 100%);
+            border-radius: 6px;
+            border-left: 3px solid #c9555a;
+        }
+        
+        .errors-section h3 { margin-top: 0; color: var(--vscode-foreground); }
+        .errors-section ul { margin: 0; padding-left: 20px; }
+        .errors-section .error { color: var(--vscode-foreground); white-space: pre-wrap; line-height: 1.5; }
+        .errors-section .warning { color: #cca700; }
+        
+        .json-key { color: #9cdcfe; background: none; }
+        .json-string { color: #ce9178; background: none; }
+        .json-number { color: #b5cea8; background: none; }
+        .json-boolean { color: #569cd6; background: none; }
+        .json-null { color: #569cd6; background: none; }
+        
+        .script-item { border-left: 3px solid #dcdcaa; }
+        .script-icon { font-size: 1.1em; }
+        .script-type {
+            font-family: var(--vscode-editor-font-family);
+            padding: 2px 8px;
+            background: #dcdcaa22;
+            border-radius: 3px;
+            color: #dcdcaa;
+            font-size: 0.85em;
+            text-transform: uppercase;
+        }
+        .script-path {
+            font-family: var(--vscode-editor-font-family);
+            color: var(--vscode-descriptionForeground);
+        }
+        .capture-var {
+            font-family: var(--vscode-editor-font-family);
+            color: #9cdcfe;
+            font-weight: bold;
+        }
+        .script-output {
+            margin-bottom: 12px;
+        }
+        .script-output:last-child { margin-bottom: 0; }
+        .output-label {
+            font-size: 0.85em;
+            color: var(--vscode-descriptionForeground);
+            margin-bottom: 4px;
+            text-transform: uppercase;
+        }
+        .script-output.stderr .output-label { color: #f14c4c; }
+        .script-output.stderr pre { color: #f14c4c; }
+        
+        .step-number {
+            font-family: var(--vscode-editor-font-family);
+            font-weight: bold;
+            color: var(--vscode-descriptionForeground);
+            min-width: 24px;
+        }
+        
+        .print-item {
+            border-left: 3px solid #569cd6;
+        }
+        .print-item .response-header {
+            background: var(--vscode-editor-inactiveSelectionBackground);
+        }
+        .print-content {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 12px;
+            background: var(--vscode-editor-inactiveSelectionBackground);
+        }
+        .print-icon {
+            font-size: 1em;
+        }
+        .print-title {
+            font-family: var(--vscode-editor-font-family);
+            color: #569cd6;
+            flex: 1;
+        }
+        .print-body {
+            background: var(--vscode-editor-background);
+        }
+        .print-body pre {
+            margin: 0;
+            white-space: pre-wrap;
+            word-wrap: break-word;
+        }
+        
+        .assertion-item {
+            border-left: 3px solid var(--vscode-descriptionForeground);
+        }
+        .assertion-item.assertion-passed {
+            border-left-color: #4ec9b0;
+        }
+        .assertion-item.assertion-failed {
+            border-left-color: #f14c4c;
+        }
+        .assertion-icon {
+            font-size: 1.1em;
+            font-weight: bold;
+        }
+        .assertion-icon.status-success { color: #4ec9b0; }
+        .assertion-icon.status-error { color: #f14c4c; }
+        .assertion-expr {
+            font-family: var(--vscode-editor-font-family);
+            flex: 1;
+        }
+        .assertion-expr code {
+            background: var(--vscode-textCodeBlock-background);
+            padding: 2px 6px;
+            border-radius: 3px;
+        }
+        .assertion-body {
+            padding: 12px 16px;
+            background: var(--vscode-editor-background);
+        }
+        .assertion-message {
+            color: var(--vscode-descriptionForeground);
+            margin-bottom: 8px;
+            font-style: italic;
+        }
+        .assertion-details {
+            font-family: var(--vscode-editor-font-family);
+            font-size: 0.9em;
+        }
+        .assertion-expected, .assertion-actual {
+            margin: 4px 0;
+        }
+        .assertion-expected code, .assertion-actual code {
+            background: var(--vscode-textCodeBlock-background);
+            padding: 2px 6px;
+            border-radius: 3px;
+        }
+        .assertion-error {
+            color: #f14c4c;
+            font-family: var(--vscode-editor-font-family);
+        }
+        .response-header.no-expand {
+            cursor: default;
+        }
+        .response-header.no-expand:hover {
+            background: var(--vscode-editor-inactiveSelectionBackground);
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="sequence-header">
+            <span class="sequence-status ${statusClass}">${statusText}</span>
+            <span class="sequence-name">${this._escapeHtml(sequenceName)}</span>
+            <span class="meta">${runs.length} run${runs.length !== 1 ? 's' : ''}</span>
+            <span class="meta">${passedRuns}/${runs.length} passed</span>
+            <span class="meta">⏱ ${totalDuration}ms total</span>
+        </div>
+        
+        ${runsHtml}
+
+        <div id="norn-toast" class="norn-toast"></div>
+    </div>
+    
+    <script>
+        const vscode = acquireVsCodeApi();
+        let compareBaseline = null;
+
+        function showToast(message) {
+            const toast = document.getElementById('norn-toast');
+            if (!toast) return;
+            toast.textContent = message;
+            toast.classList.add('visible');
+            setTimeout(() => toast.classList.remove('visible'), 3000);
+        }
+
+        function copyResponseBody(stepId) {
+            const bodyEl = document.getElementById(stepId + '-body-text');
+            if (!bodyEl) return;
+            const body = bodyEl.value || bodyEl.textContent || '';
+            navigator.clipboard.writeText(body).then(() => {
+                showToast('Copied response body');
+            }).catch(() => {
+                showToast('Copy failed');
+            });
+        }
+
+        function compareResponse(stepId) {
+            const bodyEl = document.getElementById(stepId + '-body-text');
+            if (!bodyEl) return;
+            const body = bodyEl.value || bodyEl.textContent || '';
+            
+            if (!compareBaseline) {
+                compareBaseline = { stepId, body };
+                document.querySelectorAll('.seq-compare-btn').forEach(btn => btn.classList.remove('comparing'));
+                const btn = document.querySelector('[data-compare-step="' + stepId + '"]');
+                if (btn) btn.classList.add('comparing');
+                showToast('Select another response to compare');
+            } else {
+                vscode.postMessage({ type: 'setBaseline', body: compareBaseline.body });
+                vscode.postMessage({ type: 'compare', body: body });
+                compareBaseline = null;
+                document.querySelectorAll('.seq-compare-btn').forEach(btn => btn.classList.remove('comparing'));
+            }
+        }
+
+        function toggleResponse(id) {
+            const body = document.getElementById(id);
+            const icon = document.getElementById('icon-' + id);
+            
+            if (!body) return;
+            
+            if (body.style.display === 'none') {
+                body.style.display = 'block';
+                if (icon) icon.classList.add('expanded');
+            } else {
+                body.style.display = 'none';
+                if (icon) icon.classList.remove('expanded');
+            }
+        }
+
+        function toggleRunGroup(id) {
+            const body = document.getElementById(id);
+            const icon = document.getElementById('icon-' + id);
+            
+            if (!body) return;
+            
+            if (body.style.display === 'none') {
+                body.style.display = 'block';
+                if (icon) icon.classList.add('expanded');
+            } else {
+                body.style.display = 'none';
+                if (icon) icon.classList.remove('expanded');
+            }
+        }
+
+        window.addEventListener('message', event => {
+            const message = event.data;
+            if (message.type === 'resetCompare') {
+                compareBaseline = null;
+                document.querySelectorAll('.seq-compare-btn').forEach(btn => btn.classList.remove('comparing'));
+            }
+        });
+    </script>
+</body>
+</html>`;
+    }
+    _getSequenceHtmlContent(result) {
+        const statusClass = result.success ? 'status-success' : 'status-error';
+        const statusText = result.success ? 'PASSED' : 'FAILED';
+        // Use ordered steps if available, otherwise fall back to grouped display
+        const stepsHtml = result.steps && result.steps.length > 0
+            ? this._renderOrderedSteps(result.steps)
+            : this._renderGroupedResults(result);
+        const errorsHtml = result.errors.length > 0 ? `
+            <div class="errors-section">
+                <h3>Errors & Warnings</h3>
+                <ul>
+                    ${result.errors.map(e => `<li class="${e.startsWith('Warning') ? 'warning' : 'error'}">${this._escapeHtml(e)}</li>`).join('')}
+                </ul>
+            </div>
+        ` : '';
+        return /*html*/ `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sequence Result</title>
+    <style>
+        * { box-sizing: border-box; }
+        
+        body {
+            font-family: var(--vscode-font-family);
+            font-size: var(--vscode-font-size);
+            color: var(--vscode-foreground);
+            background-color: var(--vscode-editor-background);
+            padding: 0;
+            margin: 0;
+        }
+        
+        .container { padding: 16px; }
+        
+        .sequence-header {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            padding: 16px;
+            background: var(--vscode-editor-inactiveSelectionBackground);
+            border-radius: 6px;
+            margin-bottom: 16px;
+        }
+        
+        .sequence-name {
+            font-size: 1.2em;
+            font-weight: bold;
+        }
+        
+        .sequence-status {
+            padding: 4px 12px;
+            border-radius: 4px;
+            font-weight: bold;
+        }
+        
+        .status-success { background: #4ec9b0; color: #000; }
+        .status-warning { background: #cca700; color: #000; }
+        .status-error { background: linear-gradient(135deg, #c9555a 0%, #a84347 100%); color: #fff; }
+        .status-redirect { background: #dcdcaa; color: #000; }
+        .status-client-error { background: #ce9178; color: #000; }
+        .status-server-error { background: linear-gradient(135deg, #c9555a 0%, #a84347 100%); color: #fff; }
+        
+        .meta { color: var(--vscode-descriptionForeground); }
+        
+        .retry-info { 
+            color: #dcdcaa;
+            font-size: 0.85em;
+        }
+        
+        .response-item {
+            border: 1px solid var(--vscode-panel-border);
+            border-radius: 6px;
+            margin-bottom: 8px;
+            overflow: hidden;
+        }
+        
+        .response-header {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 12px;
+            cursor: pointer;
+            background: var(--vscode-editor-inactiveSelectionBackground);
+        }
+        
+        .response-header:hover {
+            background: var(--vscode-list-hoverBackground);
+        }
+        
+        .response-index {
+            font-family: var(--vscode-editor-font-family);
+            font-weight: bold;
+            color: var(--vscode-symbolIcon-variableForeground, #9cdcfe);
+        }
+        
+        .status-code {
+            padding: 2px 8px;
+            border-radius: 3px;
+            font-size: 0.9em;
+        }
+        
+        .expand-icon {
+            margin-left: auto;
+            transition: transform 0.2s;
+        }
+        
+        .expand-icon.expanded {
+            transform: rotate(90deg);
+        }
+        
+        .response-body {
+            padding: 12px;
+            border-top: 1px solid var(--vscode-panel-border);
+        }
+
+        .seq-request-url {
+            padding: 6px 12px;
+            background: var(--vscode-textCodeBlock-background);
+            border-bottom: 1px solid var(--vscode-panel-border);
+            font-family: var(--vscode-editor-font-family);
+            font-size: 0.9em;
+            color: var(--vscode-foreground);
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin: -12px -12px 12px -12px;
+        }
+        .seq-request-url .method {
+            font-weight: bold;
+            padding: 2px 6px;
+            border-radius: 3px;
+            font-size: 0.85em;
+        }
+        .seq-request-url .method.GET { background: #4ec9b022; color: #4ec9b0; }
+        .seq-request-url .method.POST { background: #dcdcaa22; color: #dcdcaa; }
+        .seq-request-url .method.PUT { background: #569cd622; color: #569cd6; }
+        .seq-request-url .method.PATCH { background: #c586c022; color: #c586c0; }
+        .seq-request-url .method.DELETE { background: #f14c4c22; color: #f14c4c; }
+
+        .seq-body-container {
+            position: relative;
+        }
+        .seq-copy-btn {
+            position: absolute;
+            top: 0;
+            right: 0;
+            background: var(--vscode-button-secondaryBackground);
+            color: var(--vscode-button-secondaryForeground);
+            border: none;
+            padding: 4px 8px;
+            cursor: pointer;
+            font-size: 0.8em;
+            border-radius: 3px;
+            z-index: 1;
+        }
+        .seq-copy-btn:hover {
+            background: var(--vscode-button-secondaryHoverBackground);
+        }
+        .seq-compare-btn {
+            position: absolute;
+            top: 0;
+            right: 60px;
+            background: var(--vscode-button-secondaryBackground);
+            color: var(--vscode-button-secondaryForeground);
+            border: none;
+            padding: 4px 8px;
+            cursor: pointer;
+            font-size: 0.8em;
+            border-radius: 3px;
+            z-index: 1;
+        }
+        .seq-compare-btn:hover {
+            background: var(--vscode-button-secondaryHoverBackground);
+        }
+        .seq-compare-btn.comparing {
+            background: var(--vscode-inputValidation-infoBackground);
+            border: 1px solid var(--vscode-inputValidation-infoBorder);
+        }
+
+        .norn-toast {
+            position: fixed;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: var(--vscode-notifications-background);
+            color: var(--vscode-notifications-foreground);
+            border: 1px solid var(--vscode-notifications-border);
+            padding: 10px 20px;
+            border-radius: 4px;
+            z-index: 1000;
+            opacity: 0;
+            transition: opacity 0.3s;
+            pointer-events: none;
+        }
+        .norn-toast.visible {
+            opacity: 1;
+        }
+        
+        pre {
+            margin: 0;
+            background: transparent;
+            font-family: var(--vscode-editor-font-family);
+            font-size: var(--vscode-editor-font-size);
+            line-height: 1.5;
+            overflow-x: auto;
+        }
+        
+        pre code { background: none; }
+        
+        .errors-section {
+            margin-top: 16px;
+            padding: 12px 16px;
+            background: linear-gradient(135deg, rgba(201, 85, 90, 0.2) 0%, rgba(168, 67, 71, 0.15) 100%);
+            border-radius: 6px;
+            border-left: 3px solid #c9555a;
+        }
+        
+        .errors-section h3 { margin-top: 0; color: var(--vscode-foreground); }
+        .errors-section ul { margin: 0; padding-left: 20px; }
+        .errors-section .error { color: var(--vscode-foreground); white-space: pre-wrap; line-height: 1.5; }
+        .errors-section .warning { color: #cca700; }
+        
+        /* JSON Syntax Highlighting */
+        .json-key { color: #9cdcfe; background: none; }
+        .json-string { color: #ce9178; background: none; }
+        .json-number { color: #b5cea8; background: none; }
+        .json-boolean { color: #569cd6; background: none; }
+        .json-null { color: #569cd6; background: none; }
+        
+        /* Script Result Styling */
+        .script-item { border-left: 3px solid #dcdcaa; }
+        .script-icon { font-size: 1.1em; }
+        .script-type {
+            font-family: var(--vscode-editor-font-family);
+            padding: 2px 8px;
+            background: #dcdcaa22;
+            border-radius: 3px;
+            color: #dcdcaa;
+            font-size: 0.85em;
+            text-transform: uppercase;
+        }
+        .script-path {
+            font-family: var(--vscode-editor-font-family);
+            color: var(--vscode-descriptionForeground);
+        }
+        .capture-var {
+            font-family: var(--vscode-editor-font-family);
+            color: #9cdcfe;
+            font-weight: bold;
+        }
+        .script-output {
+            margin-bottom: 12px;
+        }
+        .script-output:last-child { margin-bottom: 0; }
+        .output-label {
+            font-size: 0.85em;
+            color: var(--vscode-descriptionForeground);
+            margin-bottom: 4px;
+            text-transform: uppercase;
+        }
+        .script-output.stderr .output-label { color: #f14c4c; }
+        .script-output.stderr pre { color: #f14c4c; }
+        
+        .step-number {
+            font-family: var(--vscode-editor-font-family);
+            font-weight: bold;
+            color: var(--vscode-descriptionForeground);
+            min-width: 24px;
+        }
+        
+        /* Print styling */
+        .print-item {
+            border-left: 3px solid #569cd6;
+        }
+        .print-item .response-header {
+            background: var(--vscode-editor-inactiveSelectionBackground);
+        }
+        .print-content {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 12px;
+            background: var(--vscode-editor-inactiveSelectionBackground);
+        }
+        .print-icon {
+            font-size: 1em;
+        }
+        .print-title {
+            font-family: var(--vscode-editor-font-family);
+            color: #569cd6;
+            flex: 1;
+        }
+        .print-body {
+            background: var(--vscode-editor-background);
+        }
+        .print-body pre {
+            margin: 0;
+            white-space: pre-wrap;
+            word-wrap: break-word;
+        }
+        
+        /* Assertion styling */
+        .assertion-item {
+            border-left: 3px solid var(--vscode-descriptionForeground);
+        }
+        .assertion-item.assertion-passed {
+            border-left-color: #4ec9b0;
+        }
+        .assertion-item.assertion-failed {
+            border-left-color: #f14c4c;
+        }
+        .assertion-icon {
+            font-size: 1.1em;
+            font-weight: bold;
+        }
+        .assertion-icon.status-success { color: #4ec9b0; }
+        .assertion-icon.status-error { color: #f14c4c; }
+        .assertion-expr {
+            font-family: var(--vscode-editor-font-family);
+            flex: 1;
+        }
+        .assertion-expr code {
+            background: var(--vscode-textCodeBlock-background);
+            padding: 2px 6px;
+            border-radius: 3px;
+        }
+        .assertion-body {
+            padding: 12px 16px;
+            background: var(--vscode-editor-background);
+        }
+        .assertion-message {
+            color: var(--vscode-descriptionForeground);
+            margin-bottom: 8px;
+            font-style: italic;
+        }
+        .assertion-details {
+            font-family: var(--vscode-editor-font-family);
+            font-size: 0.9em;
+        }
+        .assertion-expected, .assertion-actual {
+            margin: 4px 0;
+        }
+        .assertion-expected code, .assertion-actual code {
+            background: var(--vscode-textCodeBlock-background);
+            padding: 2px 6px;
+            border-radius: 3px;
+        }
+        .assertion-error {
+            color: #f14c4c;
+            font-family: var(--vscode-editor-font-family);
+        }
+        .response-header.no-expand {
+            cursor: default;
+        }
+        .response-header.no-expand:hover {
+            background: var(--vscode-editor-inactiveSelectionBackground);
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="sequence-header">
+            <span class="sequence-status ${statusClass}">${statusText}</span>
+            <span class="sequence-name">${this._escapeHtml(result.name)}</span>
+            <span class="meta">${result.steps?.length || result.responses.length} step${(result.steps?.length || result.responses.length) !== 1 ? 's' : ''}</span>
+            <span class="meta">⏱ ${result.duration}ms total</span>
+        </div>
+        
+        <div class="steps-list">
+            ${stepsHtml}
+        </div>
+        
+        ${errorsHtml}
+
+        <div id="norn-toast" class="norn-toast"></div>
+    </div>
+    
+    <script>
+        const vscode = acquireVsCodeApi();
+        let compareBaseline = null;
+
+        function showToast(message) {
+            const toast = document.getElementById('norn-toast');
+            if (!toast) return;
+            toast.textContent = message;
+            toast.classList.add('visible');
+            setTimeout(() => toast.classList.remove('visible'), 3000);
+        }
+
+        function copyResponseBody(stepId) {
+            const bodyEl = document.getElementById(stepId + '-body-text');
+            if (!bodyEl) return;
+            const body = bodyEl.value || bodyEl.textContent || '';
+            navigator.clipboard.writeText(body).then(() => {
+                showToast('Copied response body');
+            }).catch(() => {
+                showToast('Copy failed');
+            });
+        }
+
+        function compareResponse(stepId) {
+            const bodyEl = document.getElementById(stepId + '-body-text');
+            if (!bodyEl) return;
+            const body = bodyEl.value || bodyEl.textContent || '';
+            
+            if (!compareBaseline) {
+                compareBaseline = { stepId, body };
+                document.querySelectorAll('.seq-compare-btn').forEach(btn => btn.classList.remove('comparing'));
+                const btn = document.querySelector('[data-compare-step="' + stepId + '"]');
+                if (btn) btn.classList.add('comparing');
+                showToast('Select another response to compare');
+            } else {
+                vscode.postMessage({ type: 'setBaseline', body: compareBaseline.body });
+                vscode.postMessage({ type: 'compare', body: body });
+                compareBaseline = null;
+                document.querySelectorAll('.seq-compare-btn').forEach(btn => btn.classList.remove('comparing'));
+            }
+        }
+
+        function toggleResponse(id) {
+            const body = document.getElementById(id);
+            const icon = document.getElementById('icon-' + id);
+            
+            if (!body) return;
+            
+            if (body.style.display === 'none') {
+                body.style.display = 'block';
+                if (icon) icon.classList.add('expanded');
+            } else {
+                body.style.display = 'none';
+                if (icon) icon.classList.remove('expanded');
+            }
+        }
+
+        window.addEventListener('message', event => {
+            const message = event.data;
+            if (message.type === 'resetCompare') {
+                compareBaseline = null;
+                document.querySelectorAll('.seq-compare-btn').forEach(btn => btn.classList.remove('comparing'));
+            }
+        });
+    </script>
+</body>
+</html>`;
+    }
+    _renderOrderedSteps(steps, stepIdPrefix = 'step') {
+        let requestCounter = 0;
+        return steps.map((step, index) => {
+            const stepId = `${stepIdPrefix}-${index}`;
+            if (step.type === 'print' && step.print) {
+                const hasBody = step.print.body && step.print.body.trim();
+                if (hasBody) {
+                    // Print with expandable body
+                    return `
+                        <div class="response-item print-item">
+                            <div class="response-header" onclick="toggleResponse('${stepId}')">
+                                <span class="step-number">${index + 1}.</span>
+                                <span class="print-icon">📝</span>
+                                <span class="print-title">${this._escapeHtml(step.print.title)}</span>
+                                <span class="meta">@ ${step.print.timestamp}ms</span>
+                                <span class="expand-icon" id="icon-${stepId}">▶</span>
+                            </div>
+                            <div class="response-body print-body" id="${stepId}" style="display: none;">
+                                <pre><code>${this._escapeHtml(step.print.body)}</code></pre>
+                            </div>
+                        </div>
+                    `;
+                }
+                else {
+                    // Print without body - simple display
+                    return `
+                        <div class="response-item print-item">
+                            <div class="print-content">
+                                <span class="step-number">${index + 1}.</span>
+                                <span class="print-icon">📝</span>
+                                <span class="print-title">${this._escapeHtml(step.print.title)}</span>
+                                <span class="meta">@ ${step.print.timestamp}ms</span>
+                            </div>
+                        </div>
+                    `;
+                }
+            }
+            else if (step.type === 'request' && step.response) {
+                requestCounter++;
+                const response = step.response;
+                const respStatusClass = this._getStatusClass(response.status);
+                const bodyContent = this._formatBody(response.body);
+                const rawBody = typeof response.body === 'object'
+                    ? JSON.stringify(response.body, null, 2)
+                    : String(response.body ?? '');
+                const method = step.requestMethod || 'GET';
+                const url = step.requestUrl || '';
+                return `
+                    <div class="response-item">
+                        <div class="response-header" onclick="toggleResponse('${stepId}')">
+                            <span class="step-number">${index + 1}.</span>
+                            <span class="response-index">$${requestCounter}</span>
+                            <span class="status-code ${respStatusClass}">${response.status} ${response.statusText}</span>
+                            <span class="meta">⏱ ${response.duration}ms</span>
+                            <span class="expand-icon" id="icon-${stepId}">▶</span>
+                        </div>
+                        <div class="response-body" id="${stepId}" style="display: none;">
+                            <div class="seq-request-url">
+                                <span class="method ${method}">${method}</span>
+                                <span>${this._escapeHtml(url)}</span>
+                            </div>
+                            <div class="seq-body-container">
+                                <button class="seq-compare-btn" data-compare-step="${stepId}" onclick="compareResponse('${stepId}')">⇄ Compare</button>
+                                <button class="seq-copy-btn" onclick="copyResponseBody('${stepId}')">📋 Copy</button>
+                                <pre><code>${bodyContent}</code></pre>
+                                <textarea id="${stepId}-body-text" style="display:none;">${this._escapeHtml(rawBody)}</textarea>
+                            </div>
+                        </div>
+                    </div>
+                `;
+            }
+            else if (step.type === 'script' && step.script) {
+                const script = step.script;
+                const hasStderr = script.error && script.error.trim();
+                // Show error status if exit code non-zero, or warning if there's stderr output
+                const scriptStatusClass = !script.success ? 'status-error' : (hasStderr ? 'status-warning' : 'status-success');
+                const scriptStatusText = !script.success ? `Exit ${script.exitCode}` : (hasStderr ? 'Warning' : 'OK');
+                const hasOutput = script.output.trim() || script.error.trim();
+                return `
+                    <div class="response-item script-item">
+                        <div class="response-header" onclick="toggleResponse('${stepId}')">
+                            <span class="step-number">${index + 1}.</span>
+                            <span class="script-icon">⚡</span>
+                            <span class="script-type">${script.type}</span>
+                            <span class="script-path">${this._escapeHtml(script.scriptPath)}</span>
+                            ${script.captureVar ? `<span class="capture-var">→ ${this._escapeHtml(script.captureVar)}</span>` : ''}
+                            <span class="status-code ${scriptStatusClass}">${scriptStatusText}</span>
+                            <span class="meta">⏱ ${script.duration}ms</span>
+                            <span class="expand-icon" id="icon-${stepId}">${hasOutput ? '▶' : ''}</span>
+                        </div>
+                        ${hasOutput ? `
+                        <div class="response-body" id="${stepId}" style="display: none;">
+                            ${script.output.trim() ? `<div class="script-output"><div class="output-label">stdout:</div><pre><code>${this._escapeHtml(script.output)}</code></pre></div>` : ''}
+                            ${script.error.trim() ? `<div class="script-output stderr"><div class="output-label">stderr:</div><pre><code>${this._escapeHtml(script.error)}</code></pre></div>` : ''}
+                        </div>
+                        ` : ''}
+                    </div>
+                `;
+            }
+            else if (step.type === 'assertion' && step.assertion) {
+                const assertion = step.assertion;
+                const assertionClass = assertion.passed ? 'status-success' : 'status-error';
+                const assertionIcon = assertion.passed ? '✓' : '✗';
+                const hasDetails = !assertion.passed || assertion.message;
+                let detailsHtml = '';
+                if (hasDetails) {
+                    if (assertion.error) {
+                        detailsHtml = `<div class="assertion-error">${this._escapeHtml(assertion.error)}</div>`;
+                    }
+                    else if (!assertion.passed) {
+                        detailsHtml = `<div class="assertion-details">` +
+                            `<div class="assertion-expected">Expected: <code>${this._escapeHtml(assertion.rightExpression || assertion.operator)}</code></div>` +
+                            `<div class="assertion-actual">Actual: <code>${this._escapeHtml(JSON.stringify(assertion.leftValue))}</code></div>` +
+                            `</div>`;
+                    }
+                    if (assertion.message) {
+                        detailsHtml = `<div class="assertion-message">${this._escapeHtml(assertion.message)}</div>` + detailsHtml;
+                    }
+                }
+                return `
+                    <div class="response-item assertion-item ${assertion.passed ? 'assertion-passed' : 'assertion-failed'}">
+                        <div class="response-header${hasDetails ? '' : ' no-expand'}"${hasDetails ? ` onclick="toggleResponse('${stepId}')"` : ''}>
+                            <span class="step-number">${index + 1}.</span>
+                            <span class="assertion-icon ${assertionClass}">${assertionIcon}</span>
+                            <span class="assertion-expr">assert <code>${this._escapeHtml(assertion.expression)}</code></span>
+                            ${hasDetails ? `<span class="expand-icon" id="icon-${stepId}">▶</span>` : ''}
+                        </div>
+                        ${hasDetails ? `
+                        <div class="response-body assertion-body" id="${stepId}" style="display: none;">
+                            ${detailsHtml}
+                        </div>
+                        ` : ''}
+                    </div>
+                `;
+            }
+            return '';
+        }).join('');
+    }
+    _renderGroupedResults(result, idPrefix = 'grouped') {
+        // Fallback for older results without ordered steps
+        const responsesHtml = result.responses.map((response, index) => {
+            const responseId = `${idPrefix}-resp-${index}`;
+            const respStatusClass = this._getStatusClass(response.status);
+            const bodyContent = this._formatBody(response.body);
+            const rawBody = typeof response.body === 'object'
+                ? JSON.stringify(response.body, null, 2)
+                : String(response.body ?? '');
+            return `
+                <div class="response-item">
+                    <div class="response-header" onclick="toggleResponse('${responseId}')">
+                        <span class="response-index">$${index + 1}</span>
+                        <span class="status-code ${respStatusClass}">${response.status} ${response.statusText}</span>
+                        <span class="meta">⏱ ${response.duration}ms</span>
+                        <span class="expand-icon" id="icon-${responseId}">▶</span>
+                    </div>
+                    <div class="response-body" id="${responseId}" style="display: none;">
+                        <div class="seq-body-container">
+                            <button class="seq-compare-btn" data-compare-step="${responseId}" onclick="compareResponse('${responseId}')">⇄ Compare</button>
+                            <button class="seq-copy-btn" onclick="copyResponseBody('${responseId}')">📋 Copy</button>
+                            <pre><code>${bodyContent}</code></pre>
+                            <textarea id="${responseId}-body-text" style="display:none;">${this._escapeHtml(rawBody)}</textarea>
+                        </div>
+                    </div>
+                </div>
+            `;
+        }).join('');
+        const scriptResultsHtml = result.scriptResults && result.scriptResults.length > 0 ? result.scriptResults.map((script, index) => {
+            const scriptId = `${idPrefix}-script-${index}`;
+            const hasStderr = script.error && script.error.trim();
+            // Show error status if exit code non-zero, or warning if there's stderr output
+            const scriptStatusClass = !script.success ? 'status-error' : (hasStderr ? 'status-warning' : 'status-success');
+            const scriptStatusText = !script.success ? `Exit ${script.exitCode}` : (hasStderr ? 'Warning' : 'OK');
+            const hasOutput = script.output.trim() || script.error.trim();
+            return `
+                <div class="response-item script-item">
+                    <div class="response-header" onclick="toggleResponse('${scriptId}')">
+                        <span class="script-icon">⚡</span>
+                        <span class="script-type">${script.type}</span>
+                        <span class="script-path">${this._escapeHtml(script.scriptPath)}</span>
+                        ${script.captureVar ? `<span class="capture-var">→ ${this._escapeHtml(script.captureVar)}</span>` : ''}
+                        <span class="status-code ${scriptStatusClass}">${scriptStatusText}</span>
+                        <span class="meta">⏱ ${script.duration}ms</span>
+                        <span class="expand-icon" id="icon-${scriptId}">${hasOutput ? '▶' : ''}</span>
+                    </div>
+                    ${hasOutput ? `
+                    <div class="response-body" id="${scriptId}" style="display: none;">
+                        ${script.output.trim() ? `<div class="script-output"><div class="output-label">stdout:</div><pre><code>${this._escapeHtml(script.output)}</code></pre></div>` : ''}
+                        ${script.error.trim() ? `<div class="script-output stderr"><div class="output-label">stderr:</div><pre><code>${this._escapeHtml(script.error)}</code></pre></div>` : ''}
+                    </div>
+                    ` : ''}
+                </div>
+            `;
+        }).join('') : '';
+        return responsesHtml + scriptResultsHtml;
+    }
+    _updateError(method, url, errorMessage) {
+        this._panel.title = `Error - ${method}`;
+        this._panel.webview.html = this._getErrorHtmlContent(method, url, errorMessage);
+    }
+    _getErrorHtmlContent(method, url, errorMessage) {
+        return /*html*/ `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Error</title>
+    <style>
+        * {
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: var(--vscode-font-family);
+            font-size: var(--vscode-font-size);
+            color: var(--vscode-foreground);
+            background-color: var(--vscode-editor-background);
+            padding: 0;
+            margin: 0;
+        }
+        
+        .container {
+            padding: 16px;
+            max-width: 100%;
+        }
+        
+        .error-bar {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            padding: 12px 16px;
+            background: linear-gradient(135deg, #c9555a 0%, #a84347 100%);
+            border: none;
+            border-radius: 6px;
+            margin-bottom: 16px;
+        }
+        
+        .error-icon {
+            font-size: 1.5em;
+            filter: brightness(0) invert(1);
+        }
+        
+        .error-title {
+            font-weight: bold;
+            color: #ffffff;
+        }
+        
+        .request-info {
+            font-family: var(--vscode-editor-font-family);
+            font-size: 0.85em;
+            color: var(--vscode-descriptionForeground);
+            word-break: break-all;
+            margin-bottom: 16px;
+        }
+        
+        .method {
+            font-weight: bold;
+            color: var(--vscode-symbolIcon-methodForeground, #dcdcaa);
+        }
+        
+        .error-message {
+            background: rgba(201, 85, 90, 0.15);
+            padding: 16px;
+            border-radius: 6px;
+            font-family: var(--vscode-editor-font-family);
+            font-size: var(--vscode-editor-font-size);
+            line-height: 1.6;
+            color: var(--vscode-foreground);
+            border-left: 3px solid #c9555a;
+            white-space: pre-wrap;
+            word-break: break-word;
+        }
+        
+        .help-section {
+            margin-top: 24px;
+            padding: 16px;
+            background: var(--vscode-editor-inactiveSelectionBackground);
+            border-radius: 6px;
+        }
+        
+        .help-title {
+            font-weight: bold;
+            margin-bottom: 8px;
+        }
+        
+        .help-list {
+            margin: 0;
+            padding-left: 20px;
+        }
+        
+        .help-list li {
+            margin-bottom: 4px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="error-bar">
+            <span class="error-icon">⚠️</span>
+            <span class="error-title">Request Failed</span>
+        </div>
+        
+        <div class="request-info">
+            <span class="method">${method}</span> ${this._escapeHtml(url)}
+        </div>
+        
+        <div class="error-message">
+            ${this._escapeHtml(errorMessage)}
+        </div>
+        
+        <div class="help-section">
+            <div class="help-title">Common causes:</div>
+            <ul class="help-list">
+                <li>Invalid or malformed URL</li>
+                <li>Network connectivity issues</li>
+                <li>Server is unreachable or down</li>
+                <li>DNS resolution failed</li>
+                <li>Request timed out</li>
+                <li>SSL/TLS certificate issues</li>
+            </ul>
+        </div>
+    </div>
+</body>
+</html>`;
+    }
+    _getHtmlContent(method, url, response) {
+        const statusClass = this._getStatusClass(response.status);
+        const bodyContent = this._formatBody(response.body);
+        const headersHtml = this._formatHeaders(response.headers);
+        const cookiesHtml = this._formatCookies(response.cookies);
+        const bodySize = this._getBodySize(response.body);
+        return /*html*/ `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Response</title>
+    <style>
+        :root {
+            --success-color: #4ec9b0;
+            --redirect-color: #dcdcaa;
+            --client-error-color: #ce9178;
+            --server-error-color: #f14c4c;
+        }
+        
+        * {
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: var(--vscode-font-family);
+            font-size: var(--vscode-font-size);
+            color: var(--vscode-foreground);
+            background-color: var(--vscode-editor-background);
+            padding: 0;
+            margin: 0;
+        }
+        
+        .container {
+            padding: 16px;
+            max-width: 100%;
+        }
+        
+        .status-bar {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            padding: 12px 16px;
+            background: var(--vscode-editor-inactiveSelectionBackground);
+            border-radius: 6px;
+            margin-bottom: 16px;
+            flex-wrap: wrap;
+        }
+        
+        .status-code {
+            font-weight: bold;
+            font-size: 1.2em;
+            padding: 4px 12px;
+            border-radius: 4px;
+        }
+        
+        .status-success { background: var(--success-color); color: #000; }
+        .status-warning { background: #cca700; color: #000; }
+        .status-redirect { background: var(--redirect-color); color: #000; }
+        .status-client-error { background: var(--client-error-color); color: #000; }
+        .status-server-error { background: var(--server-error-color); color: #000; }
+        
+        .meta {
+            color: var(--vscode-descriptionForeground);
+            font-size: 0.9em;
+        }
+        
+        .request-info {
+            font-family: var(--vscode-editor-font-family);
+            font-size: 0.85em;
+            color: var(--vscode-descriptionForeground);
+            word-break: break-all;
+        }
+        
+        .method {
+            font-weight: bold;
+            color: var(--vscode-symbolIcon-methodForeground, #dcdcaa);
+        }
+        
+        .tabs {
+            display: flex;
+            gap: 0;
+            border-bottom: 1px solid var(--vscode-panel-border);
+            margin-bottom: 16px;
+        }
+        
+        .tab {
+            padding: 8px 16px;
+            cursor: pointer;
+            border: none;
+            background: transparent;
+            color: var(--vscode-foreground);
+            opacity: 0.7;
+            border-bottom: 2px solid transparent;
+            font-size: inherit;
+            font-family: inherit;
+        }
+        
+        .tab:hover {
+            opacity: 1;
+        }
+        
+        .tab.active {
+            opacity: 1;
+            border-bottom-color: var(--vscode-focusBorder);
+        }
+        
+        .tab-content {
+            display: none;
+        }
+        
+        .tab-content.active {
+            display: block;
+        }
+        
+        .body-container {
+            position: relative;
+        }
+        
+        .copy-btn {
+            position: absolute;
+            top: 8px;
+            right: 8px;
+            padding: 6px 12px;
+            background: var(--vscode-button-background);
+            color: var(--vscode-button-foreground);
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 0.85em;
+        }
+        
+        .copy-btn:hover {
+            background: var(--vscode-button-hoverBackground);
+        }
+        
+        .compare-btn {
+            position: absolute;
+            top: 8px;
+            right: 80px;
+            padding: 6px 12px;
+            background: var(--vscode-button-secondaryBackground);
+            color: var(--vscode-button-secondaryForeground);
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 0.85em;
+        }
+        
+        .compare-btn:hover {
+            background: var(--vscode-button-secondaryHoverBackground);
+        }
+        
+        .compare-btn.comparing {
+            background: var(--vscode-inputValidation-infoBackground);
+            border: 1px solid var(--vscode-inputValidation-infoBorder);
+        }
+        
+        .norn-toast {
+            position: fixed;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: var(--vscode-notifications-background);
+            color: var(--vscode-notifications-foreground);
+            border: 1px solid var(--vscode-notifications-border);
+            padding: 10px 20px;
+            border-radius: 4px;
+            z-index: 1000;
+            opacity: 0;
+            transition: opacity 0.3s;
+            pointer-events: none;
+        }
+        
+        .norn-toast.visible {
+            opacity: 1;
+        }
+
+        pre {
+            background: transparent;
+            padding: 16px;
+            border-radius: 6px;
+            overflow-x: auto;
+            margin: 0;
+            font-family: var(--vscode-editor-font-family);
+            font-size: var(--vscode-editor-font-size);
+            line-height: 1.5;
+        }
+        
+        pre code {
+            background: none;
+        }
+        
+        .headers-table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+        
+        .headers-table th,
+        .headers-table td {
+            padding: 8px 12px;
+            text-align: left;
+            border-bottom: 1px solid var(--vscode-panel-border);
+        }
+        
+        .headers-table th {
+            background: var(--vscode-editor-inactiveSelectionBackground);
+            font-weight: 600;
+        }
+        
+        .header-name {
+            color: var(--vscode-symbolIcon-propertyForeground, #9cdcfe);
+            font-family: var(--vscode-editor-font-family);
+        }
+        
+        .header-value {
+            color: var(--vscode-foreground);
+            font-family: var(--vscode-editor-font-family);
+            word-break: break-all;
+        }
+
+        /* Cookies */
+        .cookies-table td {
+            font-size: 0.9em;
+        }
+        
+        .cookie-name {
+            color: var(--vscode-symbolIcon-propertyForeground, #9cdcfe);
+            font-family: var(--vscode-editor-font-family);
+        }
+        
+        .cookie-value {
+            color: var(--vscode-foreground);
+            font-family: var(--vscode-editor-font-family);
+            max-width: 200px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            cursor: help;
+        }
+        
+        .cookie-flags {
+            text-align: center;
+        }
+        
+        .cookies-container {
+            padding: 8px 0;
+        }
+        
+        .cookie-summary {
+            color: var(--vscode-foreground);
+            font-weight: 500;
+            margin-bottom: 16px;
+            padding: 8px 12px;
+            background: var(--vscode-editor-inactiveSelectionBackground);
+            border-radius: 4px;
+        }
+        
+        .cookie-domain-section {
+            margin-bottom: 16px;
+        }
+        
+        .cookie-domain-header {
+            color: var(--vscode-foreground);
+            font-size: 1em;
+            margin: 0 0 8px 0;
+            padding: 4px 0;
+            border-bottom: 1px solid var(--vscode-panel-border);
+        }
+        
+        .cookie-count {
+            color: var(--vscode-descriptionForeground);
+            font-weight: normal;
+            font-size: 0.9em;
+        }
+        
+        .no-cookies {
+            color: var(--vscode-descriptionForeground);
+            font-style: italic;
+            padding: 16px;
+        }
+        
+        .cookie-info {
+            color: var(--vscode-descriptionForeground);
+            font-size: 0.9em;
+            margin-top: 16px;
+            padding: 8px;
+            background: var(--vscode-editor-inactiveSelectionBackground);
+            border-radius: 4px;
+        }
+        
+        .cookie-info code {
+            background: var(--vscode-textCodeBlock-background);
+            padding: 2px 6px;
+            border-radius: 3px;
+        }
+
+        /* JSON Syntax Highlighting */
+        .json-key { color: #9cdcfe; background: none; }
+        .json-string { color: #ce9178; background: none; }
+        .json-number { color: #b5cea8; background: none; }
+        .json-boolean { color: #569cd6; background: none; }
+        .json-null { color: #569cd6; background: none; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="status-bar">
+            <span class="status-code ${statusClass}">${response.status} ${response.statusText}</span>
+            <span class="meta">⏱ ${response.duration}ms</span>
+            <span class="meta">📦 ${bodySize}</span>
+        </div>
+        
+        <div class="request-info">
+            <span class="method">${method}</span> ${this._escapeHtml(url)}
+        </div>
+        
+        <div class="tabs">
+            <button class="tab active" data-tab="body">Body</button>
+            <button class="tab" data-tab="headers">Headers</button>
+            <button class="tab" data-tab="cookies">Cookies</button>
+        </div>
+        
+        <div id="body" class="tab-content active">
+            <div class="body-container">
+                <button class="compare-btn" onclick="compareBody()">⇄ Compare</button>
+                <button class="copy-btn" onclick="copyBody()">📋 Copy</button>
+                <pre><code>${bodyContent}</code></pre>
+            </div>
+        </div>
+        
+        <div id="headers" class="tab-content">
+            ${headersHtml}
+        </div>
+
+        <div id="cookies" class="tab-content">
+            ${cookiesHtml}
+        </div>
+        
+        <div id="norn-toast" class="norn-toast"></div>
+    </div>
+    
+    <script>
+        const vscode = acquireVsCodeApi();
+        const tabs = document.querySelectorAll('.tab');
+        const contents = document.querySelectorAll('.tab-content');
+        
+        tabs.forEach(tab => {
+            tab.addEventListener('click', () => {
+                tabs.forEach(t => t.classList.remove('active'));
+                contents.forEach(c => c.classList.remove('active'));
+                
+                tab.classList.add('active');
+                document.getElementById(tab.dataset.tab).classList.add('active');
+            });
+        });
+        
+        const rawBody = decodeURIComponent("${encodeURIComponent(typeof response.body === 'object' ? JSON.stringify(response.body, null, 2) : String(response.body))}");
+        
+        // Response comparison state
+        let compareBaseline = null;
+        
+        function showToast(message) {
+            const toast = document.getElementById('norn-toast');
+            toast.textContent = message;
+            toast.classList.add('visible');
+            setTimeout(() => toast.classList.remove('visible'), 3000);
+        }
+        
+        function copyBody() {
+            navigator.clipboard.writeText(rawBody).then(() => {
+                const btn = document.querySelector('.copy-btn');
+                btn.textContent = '✓ Copied!';
+                setTimeout(() => btn.textContent = '📋 Copy', 2000);
+            });
+        }
+        
+        function compareBody() {
+            const btn = document.querySelector('.compare-btn');
+            
+            if (!compareBaseline) {
+                // First click - set baseline
+                compareBaseline = rawBody;
+                btn.classList.add('comparing');
+                showToast('Select another response to compare');
+            } else {
+                // Second click - send compare request
+                vscode.postMessage({ type: 'setBaseline', body: compareBaseline });
+                vscode.postMessage({ type: 'compare', body: rawBody });
+                compareBaseline = null;
+                btn.classList.remove('comparing');
+            }
+        }
+        
+        // Listen for reset compare message from extension
+        window.addEventListener('message', event => {
+            const message = event.data;
+            if (message.type === 'resetCompare') {
+                compareBaseline = null;
+                const btn = document.querySelector('.compare-btn');
+                if (btn) btn.classList.remove('comparing');
+            }
+        });
+    </script>
+</body>
+</html>`;
+    }
+    _getStatusClass(status) {
+        if (status >= 200 && status < 300) {
+            return 'status-success';
+        }
+        if (status >= 300 && status < 400) {
+            return 'status-redirect';
+        }
+        if (status >= 400 && status < 500) {
+            return 'status-client-error';
+        }
+        return 'status-server-error';
+    }
+    _formatBody(body) {
+        if (typeof body === 'object') {
+            return this._syntaxHighlightJson(JSON.stringify(body, null, 2));
+        }
+        const stringBody = String(body);
+        // Check if it looks like HTML
+        if (stringBody.trim().startsWith('<') && stringBody.includes('>')) {
+            return this._escapeHtml(stringBody);
+        }
+        return this._escapeHtml(stringBody);
+    }
+    _syntaxHighlightJson(json) {
+        return json
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?)/g, (match) => {
+            let cls = 'json-string';
+            if (match.endsWith(':')) {
+                cls = 'json-key';
+            }
+            return `<span class="${cls}">${match}</span>`;
+        })
+            .replace(/\b(true|false)\b/g, '<span class="json-boolean">$1</span>')
+            .replace(/\bnull\b/g, '<span class="json-null">null</span>')
+            .replace(/\b(-?\d+\.?\d*)\b/g, '<span class="json-number">$1</span>');
+    }
+    _formatHeaders(headers) {
+        const rows = Object.entries(headers)
+            .map(([key, value]) => `
+                <tr>
+                    <td class="header-name">${this._escapeHtml(key)}</td>
+                    <td class="header-value">${this._escapeHtml(String(value))}</td>
+                </tr>
+            `).join('');
+        return `
+            <table class="headers-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Value</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    ${rows}
+                </tbody>
+            </table>
+        `;
+    }
+    _getBodySize(body) {
+        const str = typeof body === 'object' ? JSON.stringify(body) : String(body);
+        const bytes = new TextEncoder().encode(str).length;
+        if (bytes < 1024) {
+            return `${bytes} B`;
+        }
+        if (bytes < 1024 * 1024) {
+            return `${(bytes / 1024).toFixed(1)} KB`;
+        }
+        return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+    }
+    _formatCookies(cookies) {
+        if (!cookies || cookies.length === 0) {
+            return '<p class="no-cookies">No cookies stored in session</p>';
+        }
+        // Group cookies by domain
+        const byDomain = {};
+        for (const cookie of cookies) {
+            const domain = cookie.domain || 'unknown';
+            if (!byDomain[domain]) {
+                byDomain[domain] = [];
+            }
+            byDomain[domain].push(cookie);
+        }
+        const sections = Object.entries(byDomain).map(([domain, domainCookies]) => {
+            const rows = domainCookies.map(cookie => `
+                <tr>
+                    <td class="cookie-name">${this._escapeHtml(cookie.name)}</td>
+                    <td class="cookie-value" title="${this._escapeHtml(cookie.value)}">${this._escapeHtml(cookie.value.length > 40 ? cookie.value.substring(0, 40) + '...' : cookie.value)}</td>
+                    <td>${this._escapeHtml(cookie.path)}</td>
+                    <td>${cookie.expires ? new Date(cookie.expires).toLocaleDateString() : 'Session'}</td>
+                    <td class="cookie-flags">${cookie.httpOnly ? '🔒' : ''}${cookie.secure ? '🔐' : ''}</td>
+                </tr>
+            `).join('');
+            return `
+                <div class="cookie-domain-section">
+                    <h4 class="cookie-domain-header">🌐 ${this._escapeHtml(domain)} <span class="cookie-count">(${domainCookies.length})</span></h4>
+                    <table class="headers-table cookies-table">
+                        <thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Value</th>
+                                <th>Path</th>
+                                <th>Expires</th>
+                                <th>Flags</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            ${rows}
+                        </tbody>
+                    </table>
+                </div>
+            `;
+        }).join('');
+        return `
+            <div class="cookies-container">
+                <p class="cookie-summary">🍪 ${cookies.length} cookie${cookies.length !== 1 ? 's' : ''} stored across ${Object.keys(byDomain).length} domain${Object.keys(byDomain).length !== 1 ? 's' : ''}</p>
+                ${sections}
+                <p class="cookie-info">💡 Cookies persist across requests. Use <code>Norn: Clear Cookies</code> command to reset.</p>
+            </div>
+        `;
+    }
+    /**
+     * Generate the HTML for the Contract View panel
+     * Shows schema validation errors in a rich, navigable UI
+     */
+    _getContractViewHtml(data) {
+        const errorCount = data.errors.length;
+        const schemaName = path.basename(data.schemaPath);
+        // Group errors by severity
+        const errorErrors = data.errors.filter(e => e.severity === 'error');
+        const warningErrors = data.errors.filter(e => e.severity === 'warning');
+        const infoErrors = data.errors.filter(e => e.severity === 'info');
+        // Build errorsByPath map for annotated JSON
+        const errorsByPath = new Map();
+        for (const err of data.errors) {
+            const path = err.instancePath || '/';
+            if (!errorsByPath.has(path)) {
+                errorsByPath.set(path, []);
+            }
+            errorsByPath.get(path).push(err);
+        }
+        // Generate annotated JSON view (same as Contract Report)
+        const annotatedJson = this._generateAnnotatedJson(data.responseBody, errorsByPath, data.schema);
+        // Format schema for display (schema doesn't need error annotations)
+        const schemaStr = data.schema
+            ? JSON.stringify(data.schema, null, 2)
+            : '(Schema not available)';
+        // For raw copy functionality
+        const responseBodyStr = typeof data.responseBody === 'string'
+            ? data.responseBody
+            : JSON.stringify(data.responseBody, null, 2);
+        // Build violations list HTML
+        const violationsHtml = data.errors.map((err, idx) => {
+            const severityClass = `severity-${err.severity}`;
+            const severityBadge = err.severity === 'error' ? '❌' : err.severity === 'warning' ? '⚠️' : 'ℹ️';
+            const actualDisplay = err.actual !== undefined
+                ? this._escapeHtml(typeof err.actual === 'object' ? JSON.stringify(err.actual) : String(err.actual))
+                : '(missing)';
+            const expectedDisplay = err.expected ? this._escapeHtml(err.expected) : '';
+            return `
+                <div class="violation-item ${severityClass}" data-index="${idx}">
+                    <div class="violation-header">
+                        <span class="severity-badge">${severityBadge}</span>
+                        <span class="violation-path">${this._escapeHtml(err.instancePath)}</span>
+                        <span class="violation-keyword">${this._escapeHtml(err.keyword)}</span>
+                    </div>
+                    <div class="violation-message">${this._escapeHtml(err.message)}</div>
+                    <div class="violation-details">
+                        ${expectedDisplay ? `<div class="violation-expected"><strong>Expected:</strong> ${expectedDisplay}</div>` : ''}
+                        <div class="violation-actual"><strong>Actual:</strong> <code>${actualDisplay}</code></div>
+                    </div>
+                    <div class="violation-actions">
+                        <button class="action-btn" onclick="jumpToResponse('${this._escapeHtml(err.instancePath)}')">Jump to Response</button>
+                        <button class="action-btn" onclick="jumpToSchema('${this._escapeHtml(err.schemaPath)}')">Jump to Schema</button>
+                    </div>
+                </div>
+            `;
+        }).join('');
+        return /*html*/ `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Contract View</title>
+    <style>
+        :root {
+            --vscode-font-family: var(--vscode-editor-font-family, 'Consolas', 'Courier New', monospace);
+        }
+        
+        body {
+            font-family: var(--vscode-font-family);
+            padding: 16px;
+            color: var(--vscode-foreground);
+            background-color: var(--vscode-editor-background);
+            line-height: 1.5;
+        }
+        
+        .contract-header {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            margin-bottom: 16px;
+            padding-bottom: 12px;
+            border-bottom: 1px solid var(--vscode-panel-border);
+        }
+        
+        .contract-icon {
+            font-size: 24px;
+        }
+        
+        .contract-title {
+            flex: 1;
+        }
+        
+        .contract-title h1 {
+            margin: 0;
+            font-size: 18px;
+            font-weight: 600;
+        }
+        
+        .contract-title .schema-path {
+            font-size: 12px;
+            color: var(--vscode-descriptionForeground);
+            margin-top: 4px;
+        }
+        
+        .summary {
+            display: flex;
+            gap: 16px;
+            margin-bottom: 16px;
+        }
+        
+        .summary-item {
+            padding: 8px 12px;
+            border-radius: 4px;
+            font-size: 13px;
+            font-weight: 500;
+        }
+        
+        .summary-errors {
+            background-color: rgba(244, 67, 54, 0.15);
+            color: #f44336;
+        }
+        
+        .summary-warnings {
+            background-color: rgba(255, 193, 7, 0.15);
+            color: #ffc107;
+        }
+        
+        .summary-info {
+            background-color: rgba(33, 150, 243, 0.15);
+            color: #2196f3;
+        }
+        
+        .tabs {
+            display: flex;
+            border-bottom: 1px solid var(--vscode-panel-border);
+            margin-bottom: 16px;
+        }
+        
+        .tab {
+            padding: 8px 16px;
+            cursor: pointer;
+            border-bottom: 2px solid transparent;
+            color: var(--vscode-foreground);
+            opacity: 0.7;
+            transition: opacity 0.2s, border-color 0.2s;
+        }
+        
+        .tab:hover {
+            opacity: 1;
+        }
+        
+        .tab.active {
+            opacity: 1;
+            border-bottom-color: var(--vscode-focusBorder);
+        }
+        
+        .tab-content {
+            display: none;
+        }
+        
+        .tab-content.active {
+            display: block;
+        }
+        
+        .violation-item {
+            margin-bottom: 12px;
+            padding: 12px;
+            border-radius: 6px;
+            border-left: 4px solid;
+        }
+        
+        .violation-item.severity-error {
+            background-color: rgba(244, 67, 54, 0.08);
+            border-left-color: #f44336;
+        }
+        
+        .violation-item.severity-warning {
+            background-color: rgba(255, 193, 7, 0.08);
+            border-left-color: #ffc107;
+        }
+        
+        .violation-item.severity-info {
+            background-color: rgba(33, 150, 243, 0.08);
+            border-left-color: #2196f3;
+        }
+        
+        .violation-header {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin-bottom: 8px;
+        }
+        
+        .severity-badge {
+            font-size: 14px;
+        }
+        
+        .violation-path {
+            font-family: var(--vscode-editor-font-family);
+            font-weight: 600;
+            color: var(--vscode-textLink-foreground);
+        }
+        
+        .violation-keyword {
+            font-size: 11px;
+            padding: 2px 6px;
+            border-radius: 3px;
+            background-color: var(--vscode-badge-background);
+            color: var(--vscode-badge-foreground);
+        }
+        
+        .violation-message {
+            margin-bottom: 8px;
+        }
+        
+        .violation-details {
+            font-size: 12px;
+            color: var(--vscode-descriptionForeground);
+            margin-bottom: 8px;
+        }
+        
+        .violation-details code {
+            background-color: var(--vscode-textCodeBlock-background);
+            padding: 2px 4px;
+            border-radius: 3px;
+        }
+        
+        .violation-actions {
+            display: flex;
+            gap: 8px;
+        }
+        
+        .action-btn {
+            padding: 4px 8px;
+            font-size: 11px;
+            border: 1px solid var(--vscode-button-secondaryBorder, var(--vscode-button-border));
+            background-color: var(--vscode-button-secondaryBackground);
+            color: var(--vscode-button-secondaryForeground);
+            border-radius: 4px;
+            cursor: pointer;
+        }
+        
+        .action-btn:hover {
+            background-color: var(--vscode-button-secondaryHoverBackground);
+        }
+        
+        .code-container {
+            border: 1px solid var(--vscode-panel-border);
+            border-radius: 4px;
+            background: var(--vscode-editor-background);
+        }
+        
+        .code-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            border-bottom: 1px solid var(--vscode-panel-border);
+            background: var(--vscode-sideBar-background);
+        }
+        
+        .code-label {
+            font-size: 12px;
+            font-weight: 500;
+        }
+        
+        .copy-btn {
+            padding: 4px 8px;
+            font-size: 11px;
+            border: none;
+            background-color: transparent;
+            color: var(--vscode-foreground);
+            cursor: pointer;
+            opacity: 0.7;
+        }
+        
+        .copy-btn:hover {
+            opacity: 1;
+        }
+        
+        pre {
+            margin: 0;
+            padding: 12px;
+            overflow: auto;
+            max-height: 400px;
+            font-size: 12px;
+            line-height: 1.4;
+            background: transparent !important;
+        }
+        
+        pre code {
+            font-family: var(--vscode-editor-font-family);
+            background: transparent !important;
+        }
+        
+        .json-formatted {
+            background: transparent !important;
+        }        /* JSON syntax highlighting - explicit colors with !important for reliability */
+        .json-key { color: #9cdcfe !important; }
+        .json-string { color: #ce9178 !important; }
+        .json-number { color: #b5cea8 !important; }
+        .json-boolean { color: #569cd6 !important; }
+        .json-null { color: #569cd6 !important; }
+        .json-punctuation { color: var(--vscode-foreground); }
+        
+        /* Annotated JSON styles (same as Contract Report) */
+        .annotated-json {
+            font-family: var(--vscode-editor-font-family, 'Consolas', 'Courier New', monospace);
+            font-size: 13px;
+            line-height: 1.5;
+            background: var(--vscode-editor-background);
+            border: 1px solid var(--vscode-panel-border);
+            border-radius: 4px;
+            padding: 12px;
+            overflow-x: auto;
+            white-space: pre;
+        }
+        
+        .json-line {
+            display: block;
+            white-space: pre;
+        }
+        
+        /* Property status highlights */
+        .prop-status {
+            border-radius: 3px;
+            padding: 1px 3px;
+            margin: -1px -3px;
+        }
+        
+        .prop-pass {
+            /* No highlight for passing properties */
+        }
+        
+        .prop-fail {
+            background: rgba(244, 67, 54, 0.25);
+            box-shadow: 0 0 0 1px rgba(244, 67, 54, 0.6);
+        }
+        
+        .prop-warn {
+            background: rgba(255, 193, 7, 0.25);
+            box-shadow: 0 0 0 1px rgba(255, 193, 7, 0.6);
+        }
+        
+        /* JSON formatted in pre code blocks (for schema) */
+        .json-formatted {
+            font-family: var(--vscode-editor-font-family);
+        }
+        
+        .highlight-path {
+            background-color: rgba(255, 235, 59, 0.3);
+            border-radius: 2px;
+        }
+        
+        .empty-state {
+            text-align: center;
+            padding: 40px;
+            color: var(--vscode-descriptionForeground);
+        }
+        
+        .empty-state-icon {
+            font-size: 48px;
+            margin-bottom: 16px;
+        }
+    </style>
+</head>
+<body>
+    <div class="contract-header">
+        <span class="contract-icon">📋</span>
+        <div class="contract-title">
+            <h1>Contract Validation</h1>
+            <div class="schema-path">${this._escapeHtml(data.schemaPath)}</div>
+        </div>
+    </div>
+    
+    <div class="summary">
+        ${errorErrors.length > 0 ? `<div class="summary-item summary-errors">${errorErrors.length} error${errorErrors.length !== 1 ? 's' : ''}</div>` : ''}
+        ${warningErrors.length > 0 ? `<div class="summary-item summary-warnings">${warningErrors.length} warning${warningErrors.length !== 1 ? 's' : ''}</div>` : ''}
+        ${infoErrors.length > 0 ? `<div class="summary-item summary-info">${infoErrors.length} info</div>` : ''}
+    </div>
+    
+    <div class="tabs">
+        <div class="tab active" onclick="switchTab('violations')">Violations (${errorCount})</div>
+        <div class="tab" onclick="switchTab('response')">Response</div>
+        <div class="tab" onclick="switchTab('schema')">Schema</div>
+    </div>
+    
+    <div id="tab-violations" class="tab-content active">
+        ${errorCount > 0 ? violationsHtml : `
+            <div class="empty-state">
+                <div class="empty-state-icon">✅</div>
+                <p>No violations found</p>
+            </div>
+        `}
+    </div>
+    
+    <div id="tab-response" class="tab-content">
+        <div class="code-container">
+            <div class="code-header">
+                <span class="code-label">Response Body</span>
+                <button class="copy-btn" onclick="copyCode('response')">📋 Copy</button>
+            </div>
+            <div class="annotated-json" id="response-code">${annotatedJson}</div>
+        </div>
+        <textarea id="response-raw" style="display:none;">${this._escapeHtml(responseBodyStr)}</textarea>
+    </div>
+    
+    <div id="tab-schema" class="tab-content">
+        <div class="code-container">
+            <div class="code-header">
+                <span class="code-label">JSON Schema</span>
+                <button class="copy-btn" onclick="copyCode('schema')">📋 Copy</button>
+            </div>
+            <pre><code id="schema-code" class="json-formatted">${this._formatJsonHtml(schemaStr)}</code></pre>
+        </div>
+        <textarea id="schema-raw" style="display:none;">${this._escapeHtml(schemaStr)}</textarea>
+    </div>
+    
+    <script>
+        function switchTab(tabName) {
+            // Update tab buttons
+            document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));
+            event.target.classList.add('active');
+            
+            // Update tab content
+            document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
+            document.getElementById('tab-' + tabName).classList.add('active');
+        }
+        
+        function copyCode(type) {
+            const textarea = document.getElementById(type + '-raw');
+            const text = textarea.value || textarea.textContent || '';
+            navigator.clipboard.writeText(text).then(() => {
+                const btn = event.target;
+                const originalText = btn.textContent;
+                btn.textContent = '✓ Copied!';
+                setTimeout(() => btn.textContent = originalText, 1500);
+            });
+        }
+        
+        function jumpToResponse(jsonPath) {
+            switchTab('response');
+            // Highlight the path in the response (basic implementation)
+            const codeEl = document.getElementById('response-code');
+            // For now, just switch to the tab - advanced highlighting could be added later
+            codeEl.scrollIntoView({ behavior: 'smooth' });
+        }
+        
+        function jumpToSchema(schemaPath) {
+            switchTab('schema');
+            const codeEl = document.getElementById('schema-code');
+            codeEl.scrollIntoView({ behavior: 'smooth' });
+        }
+    </script>
+</body>
+</html>`;
+    }
+    /**
+     * Generate HTML for the Contract Report view
+     * Shows response body with inline status indicators for each property
+     */
+    _getContractReportHtml(data) {
+        const errorCount = data.errors.length;
+        const schemaName = path.basename(data.schemaPath);
+        // Build a map of paths to errors for quick lookup
+        const errorsByPath = new Map();
+        for (const err of data.errors) {
+            const path = err.instancePath || '/';
+            if (!errorsByPath.has(path)) {
+                errorsByPath.set(path, []);
+            }
+            errorsByPath.get(path).push(err);
+        }
+        // Get list of all paths that have been validated (from schema properties)
+        const schemaPaths = this._extractSchemaPaths(data.schema);
+        const matchedCount = schemaPaths.length - errorCount;
+        // Format response body for display
+        const responseBodyStr = typeof data.responseBody === 'string'
+            ? data.responseBody
+            : JSON.stringify(data.responseBody, null, 2);
+        // Format schema for display  
+        const schemaStr = data.schema
+            ? JSON.stringify(data.schema, null, 2)
+            : '(Schema not available)';
+        // Generate annotated JSON view
+        const annotatedJson = this._generateAnnotatedJson(data.responseBody, errorsByPath, data.schema);
+        // Group errors by severity for summary
+        const breakingErrors = data.errors.filter(e => e.keyword === 'required' ||
+            e.keyword === 'type' ||
+            e.keyword === 'additionalProperties');
+        const warningErrors = data.errors.filter(e => e.keyword !== 'required' &&
+            e.keyword !== 'type' &&
+            e.keyword !== 'additionalProperties');
+        return /*html*/ `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Contract Report</title>
+    <style>
+        :root {
+            --vscode-font-family: var(--vscode-editor-font-family, 'Consolas', 'Courier New', monospace);
+        }
+        
+        body {
+            font-family: var(--vscode-font-family);
+            padding: 16px;
+            color: var(--vscode-foreground);
+            background-color: var(--vscode-editor-background);
+            line-height: 1.5;
+        }
+        
+        .report-header {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            margin-bottom: 20px;
+            padding-bottom: 16px;
+            border-bottom: 1px solid var(--vscode-panel-border);
+        }
+        
+        .status-icon {
+            font-size: 48px;
+        }
+        
+        .status-icon.pass { color: #4caf50; }
+        .status-icon.fail { color: #f44336; }
+        
+        .report-info h1 {
+            margin: 0;
+            font-size: 20px;
+            font-weight: 600;
+        }
+        
+        .report-info .schema-path {
+            font-size: 12px;
+            color: var(--vscode-descriptionForeground);
+            margin-top: 4px;
+        }
+        
+        .summary-cards {
+            display: flex;
+            gap: 12px;
+            margin-bottom: 20px;
+        }
+        
+        .summary-card {
+            padding: 12px 16px;
+            border-radius: 6px;
+            flex: 1;
+            text-align: center;
+        }
+        
+        .summary-card.matched {
+            background-color: rgba(76, 175, 80, 0.15);
+            border: 1px solid rgba(76, 175, 80, 0.3);
+        }
+        
+        .summary-card.breaking {
+            background-color: rgba(244, 67, 54, 0.15);
+            border: 1px solid rgba(244, 67, 54, 0.3);
+        }
+        
+        .summary-card.warnings {
+            background-color: rgba(255, 193, 7, 0.15);
+            border: 1px solid rgba(255, 193, 7, 0.3);
+        }
+        
+        .summary-card .number {
+            font-size: 28px;
+            font-weight: bold;
+        }
+        
+        .summary-card.matched .number { color: #4caf50; }
+        .summary-card.breaking .number { color: #f44336; }
+        .summary-card.warnings .number { color: #ffc107; }
+        
+        .summary-card .label {
+            font-size: 12px;
+            color: var(--vscode-descriptionForeground);
+            margin-top: 4px;
+        }
+        
+        .tabs {
+            display: flex;
+            border-bottom: 1px solid var(--vscode-panel-border);
+            margin-bottom: 16px;
+        }
+        
+        .tab {
+            padding: 8px 16px;
+            cursor: pointer;
+            border-bottom: 2px solid transparent;
+            color: var(--vscode-foreground);
+            opacity: 0.7;
+            transition: opacity 0.2s, border-color 0.2s;
+        }
+        
+        .tab:hover { opacity: 1; }
+        .tab.active {
+            opacity: 1;
+            border-bottom-color: var(--vscode-focusBorder);
+        }
+        
+        .tab-content { display: none; }
+        .tab-content.active { display: block; }
+        
+        /* Annotated JSON styles */
+        .annotated-json {
+            font-family: var(--vscode-editor-font-family, 'Consolas', 'Courier New', monospace);
+            font-size: 13px;
+            line-height: 1.5;
+            background: var(--vscode-editor-background);
+            border: 1px solid var(--vscode-panel-border);
+            border-radius: 4px;
+            padding: 12px;
+            overflow-x: auto;
+            white-space: pre;
+        }
+        
+        .json-line {
+            display: block;
+            white-space: pre;
+        }
+        
+        /* Property status highlights - similar to assert hover */
+        .prop-status {
+            border-radius: 3px;
+            padding: 1px 3px;
+            margin: -1px -3px;
+        }
+        
+        .prop-pass {
+            /* No highlight for passing properties - clean look */
+        }
+        
+        .prop-fail {
+            background: rgba(244, 67, 54, 0.25);
+            box-shadow: 0 0 0 1px rgba(244, 67, 54, 0.6);
+        }
+        
+        .prop-warn {
+            background: rgba(255, 193, 7, 0.25);
+            box-shadow: 0 0 0 1px rgba(255, 193, 7, 0.6);
+        }
+        
+        .prop-error {
+            background: rgba(244, 67, 54, 0.15);
+            border-radius: 3px;
+            padding: 0 4px;
+        }
+        
+        .prop-warning {
+            background: rgba(255, 193, 7, 0.15);
+            border-radius: 3px;
+            padding: 0 4px;
+        }
+        
+        .error-tooltip {
+            display: none;
+            position: absolute;
+            background: var(--vscode-editorWidget-background);
+            border: 1px solid var(--vscode-editorWidget-border);
+            padding: 8px 12px;
+            border-radius: 4px;
+            font-size: 12px;
+            max-width: 400px;
+            z-index: 100;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+        }
+        
+        .json-line:hover .error-tooltip {
+            display: block;
+        }
+        
+        /* Issues list styles */
+        .issue-item {
+            margin-bottom: 12px;
+            padding: 12px;
+            border-radius: 6px;
+            border-left: 4px solid;
+        }
+        
+        .issue-item.breaking {
+            background-color: rgba(244, 67, 54, 0.08);
+            border-left-color: #f44336;
+        }
+        
+        .issue-item.warning {
+            background-color: rgba(255, 193, 7, 0.08);
+            border-left-color: #ffc107;
+        }
+        
+        .issue-header {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-weight: 500;
+        }
+        
+        .issue-path {
+            font-family: var(--vscode-font-family);
+            color: var(--vscode-textLink-foreground);
+        }
+        
+        .issue-message {
+            margin-top: 4px;
+            color: var(--vscode-descriptionForeground);
+        }
+        
+        .issue-details {
+            margin-top: 8px;
+            font-size: 12px;
+        }
+        
+        .issue-expected, .issue-actual {
+            margin-top: 4px;
+        }
+        
+        /* JSON syntax highlighting - explicit colors for reliability */
+        .json-key { color: #9cdcfe !important; }
+        .json-string { color: #ce9178 !important; }
+        .json-number { color: #b5cea8 !important; }
+        .json-boolean { color: #569cd6 !important; }
+        .json-null { color: #569cd6 !important; }
+        .json-punctuation { color: var(--vscode-foreground); }
+        
+        .code-container {
+            border: 1px solid var(--vscode-panel-border);
+            border-radius: 4px;
+            background: var(--vscode-editor-background);
+        }
+        
+        .code-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            border-bottom: 1px solid var(--vscode-panel-border);
+            background: var(--vscode-sideBar-background);
+        }
+        
+        .code-label {
+            font-weight: 500;
+            font-size: 12px;
+            color: var(--vscode-descriptionForeground);
+        }
+        
+        .copy-btn {
+            background: transparent;
+            border: 1px solid var(--vscode-button-secondaryBackground);
+            color: var(--vscode-foreground);
+            padding: 4px 8px;
+            border-radius: 3px;
+            cursor: pointer;
+            font-size: 11px;
+        }
+        
+        .copy-btn:hover {
+            background: var(--vscode-button-secondaryHoverBackground);
+        }
+        
+        pre {
+            margin: 0;
+            padding: 12px;
+            overflow-x: auto;
+            background: transparent;
+            white-space: pre;
+        }
+        
+        code {
+            font-family: var(--vscode-editor-font-family, 'Consolas', 'Courier New', monospace);
+            font-size: 13px;
+            background: transparent;
+            white-space: pre;
+            line-height: 1.5;
+        }
+        
+        /* Formatted JSON in schema tab */
+        code.json-formatted {
+            display: block;
+            white-space: pre;
+            line-height: 1.5;
+            background: transparent;
+        }
+        
+        /* Ensure spans don't have background */
+        code span {
+            background: transparent;
+        }
+    </style>
+</head>
+<body>
+    <!-- Header -->
+    <div class="report-header">
+        <div class="status-icon ${errorCount === 0 ? 'pass' : 'fail'}">
+            ${errorCount === 0 ? '✓' : '⚠'}
+        </div>
+        <div class="report-info">
+            <h1>${errorCount === 0 ? 'Contract Validation Passed' : `${errorCount} Issue${errorCount !== 1 ? 's' : ''} Found`}</h1>
+            <div class="schema-path">${this._escapeHtml(data.schemaPath)}</div>
+        </div>
+    </div>
+    
+    <!-- Summary Cards -->
+    <div class="summary-cards">
+        <div class="summary-card matched">
+            <div class="number">${matchedCount >= 0 ? matchedCount : '?'}</div>
+            <div class="label">Matched</div>
+        </div>
+        <div class="summary-card breaking">
+            <div class="number">${breakingErrors.length}</div>
+            <div class="label">Breaking</div>
+        </div>
+        <div class="summary-card warnings">
+            <div class="number">${warningErrors.length}</div>
+            <div class="label">Warnings</div>
+        </div>
+    </div>
+    
+    <!-- Tabs -->
+    <div class="tabs">
+        <div class="tab active" onclick="switchTab('annotated')">Annotated Response</div>
+        <div class="tab" onclick="switchTab('issues')">Issues (${errorCount})</div>
+        <div class="tab" onclick="switchTab('schema')">Schema</div>
+    </div>
+    
+    <!-- Annotated Response Tab -->
+    <div id="tab-annotated" class="tab-content active">
+        <div class="annotated-json">
+            ${annotatedJson}
+        </div>
+    </div>
+    
+    <!-- Issues Tab -->
+    <div id="tab-issues" class="tab-content">
+        ${errorCount === 0 ? '<p style="color: var(--vscode-descriptionForeground);">No issues found - all properties match the schema!</p>' : ''}
+        
+        ${breakingErrors.length > 0 ? `
+            <h3 style="color: #f44336; margin-top: 0;">Breaking Changes</h3>
+            ${breakingErrors.map(err => `
+                <div class="issue-item breaking">
+                    <div class="issue-header">
+                        <span>❌</span>
+                        <span class="issue-path">${this._escapeHtml(err.instancePath || '/')}</span>
+                        <span style="color: var(--vscode-descriptionForeground);">(${err.keyword})</span>
+                    </div>
+                    <div class="issue-message">${this._escapeHtml(err.message)}</div>
+                    <div class="issue-details">
+                        ${err.expected ? `<div class="issue-expected"><strong>Expected:</strong> ${this._escapeHtml(err.expected)}</div>` : ''}
+                        ${err.actual !== undefined ? `<div class="issue-actual"><strong>Actual:</strong> <code>${this._escapeHtml(typeof err.actual === 'object' ? JSON.stringify(err.actual) : String(err.actual))}</code></div>` : ''}
+                    </div>
+                </div>
+            `).join('')}
+        ` : ''}
+        
+        ${warningErrors.length > 0 ? `
+            <h3 style="color: #ffc107; margin-top: ${breakingErrors.length > 0 ? '24px' : '0'};">Warnings</h3>
+            ${warningErrors.map(err => `
+                <div class="issue-item warning">
+                    <div class="issue-header">
+                        <span>⚠️</span>
+                        <span class="issue-path">${this._escapeHtml(err.instancePath || '/')}</span>
+                        <span style="color: var(--vscode-descriptionForeground);">(${err.keyword})</span>
+                    </div>
+                    <div class="issue-message">${this._escapeHtml(err.message)}</div>
+                    <div class="issue-details">
+                        ${err.expected ? `<div class="issue-expected"><strong>Expected:</strong> ${this._escapeHtml(err.expected)}</div>` : ''}
+                        ${err.actual !== undefined ? `<div class="issue-actual"><strong>Actual:</strong> <code>${this._escapeHtml(typeof err.actual === 'object' ? JSON.stringify(err.actual) : String(err.actual))}</code></div>` : ''}
+                    </div>
+                </div>
+            `).join('')}
+        ` : ''}
+    </div>
+    
+    <!-- Schema Tab -->
+    <div id="tab-schema" class="tab-content">
+        <div class="code-container">
+            <div class="code-header">
+                <span class="code-label">JSON Schema</span>
+                <button class="copy-btn" onclick="copySchema()">📋 Copy</button>
+            </div>
+            <pre><code class="json-formatted">${this._formatJsonHtml(schemaStr)}</code></pre>
+        </div>
+        <textarea id="schema-raw" style="display:none;">${this._escapeHtml(schemaStr)}</textarea>
+    </div>
+    
+    <script>
+        function switchTab(tabName) {
+            document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));
+            event.target.classList.add('active');
+            document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
+            document.getElementById('tab-' + tabName).classList.add('active');
+        }
+        
+        function copySchema() {
+            const text = document.getElementById('schema-raw').value;
+            navigator.clipboard.writeText(text).then(() => {
+                const btn = event.target;
+                const originalText = btn.textContent;
+                btn.textContent = '✓ Copied!';
+                setTimeout(() => btn.textContent = originalText, 1500);
+            });
+        }
+    </script>
+</body>
+</html>`;
+    }
+    /**
+     * Extract all property paths from a JSON Schema
+     */
+    _extractSchemaPaths(schema, prefix = '') {
+        if (!schema || typeof schema !== 'object')
+            return [];
+        const paths = [];
+        if (schema.properties) {
+            for (const [key, prop] of Object.entries(schema.properties)) {
+                const path = prefix ? `${prefix}/${key}` : `/${key}`;
+                paths.push(path);
+                paths.push(...this._extractSchemaPaths(prop, path));
+            }
+        }
+        if (schema.items) {
+            paths.push(...this._extractSchemaPaths(schema.items, `${prefix}/0`));
+        }
+        return paths;
+    }
+    /**
+     * Generate annotated JSON HTML with status indicators per line
+     */
+    _generateAnnotatedJson(data, errorsByPath, schema) {
+        if (!data || typeof data !== 'object') {
+            const hasError = errorsByPath.has('/') || errorsByPath.has('');
+            const lineClass = hasError ? 'line-fail' : 'line-pass';
+            return `<div class="json-line ${lineClass}">${this._escapeHtml(JSON.stringify(data))}</div>`;
+        }
+        const lines = [];
+        this._annotateJsonRecursive(data, errorsByPath, '', 0, lines);
+        return lines.join('');
+    }
+    /**
+     * Recursively annotate JSON object with status indicators
+     */
+    _annotateJsonRecursive(data, errorsByPath, currentPath, indent, lines) {
+        const indentStr = '  '.repeat(indent);
+        if (Array.isArray(data)) {
+            lines.push(this._createJsonLine(currentPath, errorsByPath, `${indentStr}<span class="json-punctuation">[</span>`, true, ''));
+            for (let i = 0; i < data.length; i++) {
+                const itemPath = `${currentPath}/${i}`;
+                const item = data[i];
+                const isLast = i === data.length - 1;
+                if (typeof item === 'object' && item !== null) {
+                    this._annotateJsonRecursive(item, errorsByPath, itemPath, indent + 1, lines);
+                    // Add comma if not last
+                    if (!isLast) {
+                        const lastLine = lines[lines.length - 1];
+                        lines[lines.length - 1] = lastLine.replace('</span></div>', ',</span></div>');
+                    }
+                }
+                else {
+                    const valueStr = this._formatJsonValue(item);
+                    const itemIndent = '  '.repeat(indent + 1);
+                    lines.push(this._createJsonLine(itemPath, errorsByPath, `${valueStr}${isLast ? '' : ','}`, false, itemIndent));
+                }
+            }
+            lines.push(this._createJsonLine(currentPath, errorsByPath, `${indentStr}<span class="json-punctuation">]</span>`, true, ''));
+        }
+        else if (typeof data === 'object' && data !== null) {
+            lines.push(this._createJsonLine(currentPath, errorsByPath, `${indentStr}<span class="json-punctuation">{</span>`, true, ''));
+            const keys = Object.keys(data);
+            for (let i = 0; i < keys.length; i++) {
+                const key = keys[i];
+                const value = data[key];
+                const propPath = `${currentPath}/${key}`;
+                const isLast = i === keys.length - 1;
+                const propIndent = '  '.repeat(indent + 1);
+                if (typeof value === 'object' && value !== null) {
+                    // Nested object - key line is structural, no highlight
+                    lines.push(this._createJsonLine(propPath, errorsByPath, `${propIndent}<span class="json-key">"${this._escapeHtml(key)}"</span><span class="json-punctuation">:</span> `, true, ''));
+                    this._annotateJsonRecursive(value, errorsByPath, propPath, indent + 1, lines);
+                    if (!isLast) {
+                        const lastLine = lines[lines.length - 1];
+                        lines[lines.length - 1] = lastLine.replace('</span></div>', ',</span></div>');
+                    }
+                }
+                else {
+                    // Primitive value - highlight the key:value pair
+                    const valueStr = this._formatJsonValue(value);
+                    lines.push(this._createJsonLine(propPath, errorsByPath, `<span class="json-key">"${this._escapeHtml(key)}"</span><span class="json-punctuation">:</span> ${valueStr}${isLast ? '' : ','}`, false, propIndent));
+                }
+            }
+            lines.push(this._createJsonLine(currentPath, errorsByPath, `${indentStr}<span class="json-punctuation">}</span>`, true, ''));
+        }
+    }
+    /**
+     * Create a single annotated JSON line with property highlight
+     */
+    _createJsonLine(path, errorsByPath, content, isBracket = false, indent = '') {
+        // For brackets, just return the line without any highlight
+        if (isBracket) {
+            return `<div class="json-line">${content}</div>`;
+        }
+        const errors = errorsByPath.get(path);
+        let propClass = 'prop-pass';
+        let tooltip = '';
+        if (errors && errors.length > 0) {
+            const isBreaking = errors.some(e => e.keyword === 'required' ||
+                e.keyword === 'type' ||
+                e.keyword === 'additionalProperties');
+            propClass = isBreaking ? 'prop-fail' : 'prop-warn';
+            tooltip = errors.map((e) => `${e.keyword}: ${e.message}`).join('\n');
+        }
+        // Indent outside the highlighted span, property content inside
+        return `<div class="json-line">${indent}<span class="prop-status ${propClass}" ${tooltip ? `title="${this._escapeHtml(tooltip)}"` : ''}>${content}</span></div>`;
+    }
+    /**
+     * Format a primitive JSON value with syntax highlighting
+     */
+    _formatJsonValue(value) {
+        if (value === null) {
+            return '<span class="json-null">null</span>';
+        }
+        if (typeof value === 'boolean') {
+            return `<span class="json-boolean">${value}</span>`;
+        }
+        if (typeof value === 'number') {
+            return `<span class="json-number">${value}</span>`;
+        }
+        if (typeof value === 'string') {
+            return `<span class="json-string">"${this._escapeHtml(value)}"</span>`;
+        }
+        return this._escapeHtml(String(value));
+    }
+    /**
+     * Format JSON string with syntax highlighting HTML
+     */
+    _formatJsonHtml(json) {
+        // Do syntax highlighting first, then escape only the values
+        // This preserves the HTML tags we're adding
+        return json
+            // First, escape any < > & in the actual content
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            // Now apply syntax highlighting (quotes are still intact)
+            .replace(/"([^"]+)":/g, '<span class="json-key">"$1"</span>:')
+            .replace(/: "([^"]*)"/g, ': <span class="json-string">"$1"</span>')
+            .replace(/: (-?\d+\.?\d*)\b/g, ': <span class="json-number">$1</span>')
+            .replace(/: (true|false)\b/g, ': <span class="json-boolean">$1</span>')
+            .replace(/: (null)\b/g, ': <span class="json-null">$1</span>')
+            // Handle array values (not just after colon)
+            .replace(/\[\s*"([^"]*)"/g, '[ <span class="json-string">"$1"</span>')
+            .replace(/,\s*"([^"]*)"(?=\s*[,\]])/g, ', <span class="json-string">"$1"</span>');
+    }
+    _escapeHtml(text) {
+        return text
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&#039;');
+    }
+    dispose() {
+        ResponsePanel.currentPanel = undefined;
+        this._panel.dispose();
+        while (this._disposables.length) {
+            const disposable = this._disposables.pop();
+            if (disposable) {
+                disposable.dispose();
+            }
+        }
+    }
+}
+exports.ResponsePanel = ResponsePanel;
+//# sourceMappingURL=responsePanel.js.map