norn-cli 1.2.3 → 1.2.5

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 All notable changes to the "Norn" extension will be documented in this file.
 
+## [1.2.5] - 2026-02-07
+
+### Improved
+- **Rich HTML Reports**: Completely redesigned HTML report output for QA professionals
+  - **Pass rate badge**: Large visual indicator showing pass percentage (green/yellow/red)
+  - **Filter bar**: Search tests by name, filter by All/Passed/Failed
+  - **Clickable stat cards**: Click total/passed/failed to filter results
+  - **Expand/Collapse All**: Buttons to quickly expand or collapse all test details
+  - **Failures first**: Failed tests automatically sorted to top and expanded
+  - **Friendly assertion names**: Shows `user.body.status` instead of `$1.body.status`
+  - **JSON path context**: Failed assertions show the path that failed
+  - **Variable labels on requests**: Shows `user = GET /api/users` instead of `$1`
+  - **Environment display**: Shows which environment was used in report header
+
+## [1.2.4] - 2026-02-07
+
+### Improved
+- **Enhanced failure experience**: Failed assertions now display much richer context
+  - **Friendly variable names**: Shows `user.body.status` instead of `$1.body.status` when response was assigned to a variable
+  - **Auto-expand failures**: Failed assertions automatically expand to show details
+  - **Inline response preview**: Failed assertions include a collapsible preview of the related response body
+  - **JSON path highlighting**: The failing field is highlighted in the response preview
+  - **Request labels**: Request steps in sequences show variable names (e.g., `user`) instead of `$1`
+- Same improvements apply to CLI output and Test Explorer
+
 ## [1.2.3] - 2026-02-07
 
 ### Added

package/README.md

@@ -79,7 +79,7 @@ sequence Example
     GET https://api.example.com/users/{{userId}}
     var userName = $1.body.name
     
-    print Result | {{message}}, Name: {{userName}}
+    print "Result" | "{{message}}, Name: {{userName}}"
 end sequence
 ```
 
@@ -133,14 +133,14 @@ sequence Login
     Content-Type: application/json
     {"username": "admin", "password": "secret"}
     var token = $1.body.accessToken
-    print Logged in | Token: {{token}}
+    print "Logged in" | "Token: {{token}}"
 end sequence
 
 # Define reusable teardown sequence
 sequence Logout
     POST {{baseUrl}}/auth/logout
     Authorization: Bearer {{token}}
-    print Logged out
+    print "Logged out"
 end sequence
 
 # Main test sequence uses setup/teardown
@@ -171,7 +171,7 @@ Sequences can accept parameters with optional default values:
 ```bash
 # Required parameter
 sequence Greet(name)
-    print Hello, {{name}}!
+    print "Hello, {{name}}!"
 end sequence
 
 # Optional parameter with default
@@ -218,8 +218,8 @@ sequence MyTests
     var user = run FetchUser("123")
     
     # Access individual fields
-    print User name: {{user.name}}
-    print User email: {{user.email}}
+    print "User name" | "{{user.name}}"
+    print "User email" | "{{user.email}}"
     
     # Use in requests
     POST {{baseUrl}}/messages
@@ -434,7 +434,7 @@ sequence UserTests
     
     # Capture response to variable
     var user = GET GetUser(1) Json
-    print User | {{user.body.name}}
+    print "User" | "{{user.body.name}}"
     
     # Use variables in endpoint parameters
     var userId = 5
@@ -551,7 +551,7 @@ sequence AuthFlow
     
     # Run another named request
     run GetProfile
-    print Profile | Welcome, {{$2.body.name}}!
+    print "Profile" | "Welcome, {{$2.body.name}}!"
 end sequence
 ```
 
@@ -565,7 +565,7 @@ sequence ConditionalFlow
     
     # Execute block only if condition is true
     if $1.status == 200
-        print Success | User found!
+        print "Success" | "User found!"
         
         GET https://api.example.com/users/1/orders
         assert $2.status == 200
@@ -573,12 +573,12 @@ sequence ConditionalFlow
     
     # Check for errors
     if $1.status == 404
-        print Error | User not found
+        print "Error" | "User not found"
     end if
     
     # Conditions support all assertion operators
     if $1.body.role == "admin"
-        print Admin | User has admin privileges
+        print "Admin" | "User has admin privileges"
     end if
 end sequence
 ```
@@ -592,7 +592,7 @@ sequence RateLimitedFlow
     POST https://api.example.com/jobs
     var jobId = $1.body.id
     
-    print Waiting | Job submitted, waiting for completion...
+    print "Waiting" | "Job submitted, waiting for completion..."
     
     # Wait 2 seconds
     wait 2s
@@ -616,19 +616,19 @@ sequence DataDrivenTest
     var config = run readJson ./test-config.json
     
     # Access properties
-    print Config | Using API: {{config.baseUrl}}
+    print "Config" | "Using API: {{config.baseUrl}}"
     
     # Use in requests
     GET {{config.baseUrl}}/users/{{config.testUser.id}}
     
     # Access nested values and arrays
-    print First Role | {{config.testUser.roles[0]}}
+    print "First Role" | "{{config.testUser.roles[0]}}"
     
     # Modify loaded data inline
     config.baseUrl = https://api.updated.com
     config.testUser.name = Updated Name
     
-    print Updated | New URL: {{config.baseUrl}}
+    print "Updated" | "New URL: {{config.baseUrl}}"
 end sequence
 ```
 
@@ -674,7 +674,7 @@ sequence DatabaseQuery
     var dbResult = run powershell ./scripts/query-db.ps1
     
     # Access properties from the JSON output
-    print User Found | ID: {{dbResult.id}}, Name: {{dbResult.name}}
+    print "User Found" | "ID: {{dbResult.id}}, Name: {{dbResult.name}}"
     
     # Use in requests
     GET https://api.example.com/users/{{dbResult.id}}
@@ -697,18 +697,18 @@ Add debug output to your sequences:
 
 ```bash
 sequence DebugFlow
-    print Starting authentication...
+    print "Starting authentication..."
     
     POST https://api.example.com/login
     Content-Type: application/json
     {"user": "admin"}
     
     var token = $1.token
-    print Token received | Value: {{token}}
+    print "Token received" | "Value: {{token}}"
 end sequence
 ```
 
-Use `print Title | Body content` for expandable messages in the result view.
+Use `print "Title" | "Body content"` for expandable messages in the result view.
 
 ## CLI Usage
 
@@ -942,8 +942,8 @@ end sequence
 | `var x = run js ./script.js` | Run script and capture output |
 | `var data = run readJson ./file.json` | Load JSON file into variable |
 | `data.property = value` | Update loaded JSON property |
-| `print Message` | Print a message |
-| `print Title \| Body` | Print with expandable body |
+| `print "Message"` | Print a message |
+| `print "Title" \| "Body"` | Print with expandable body |
 
 ### Environments (.nornenv)
 

package/dist/cli.js

@@ -12216,11 +12216,12 @@ function findUnquotedPipe(str) {
   }
   return -1;
 }
-function resolveValue(expr, responses, variables, getValueByPath2) {
+function resolveValue(expr, responses, variables, getValueByPath2, responseIndexToVariable) {
   const trimmed = expr.trim();
   const refMatch = trimmed.match(/^\$(\d+)\.(.+)$/);
   if (refMatch) {
-    const responseIndex = parseInt(refMatch[1], 10) - 1;
+    const responseIdx = parseInt(refMatch[1], 10);
+    const responseIndex = responseIdx - 1;
     const path4 = refMatch[2];
     if (responseIndex < 0 || responseIndex >= responses.length) {
       return {
@@ -12228,8 +12229,15 @@ function resolveValue(expr, responses, variables, getValueByPath2) {
         error: `Response $${refMatch[1]} does not exist (only ${responses.length} responses so far)`
       };
     }
-    const value = getValueByPath2(responses[responseIndex], path4);
-    return { value };
+    const response = responses[responseIndex];
+    const value = getValueByPath2(response, path4);
+    return {
+      value,
+      responseIndex: responseIdx,
+      response,
+      jsonPath: path4,
+      variableName: responseIndexToVariable?.get(responseIdx)
+    };
   }
   if (/^\$\d+$/.test(trimmed)) {
     return {
@@ -12246,14 +12254,20 @@ function resolveValue(expr, responses, variables, getValueByPath2) {
       if (typeof varValue === "object" && varValue !== null) {
         const path4 = pathPart.replace(/^\./, "");
         const value = getNestedValue2(varValue, path4);
-        return { value };
+        const isHttpResponse = "status" in varValue && "body" in varValue;
+        return {
+          value,
+          variableName: varName,
+          jsonPath: path4,
+          response: isHttpResponse ? varValue : void 0
+        };
       }
       if (typeof varValue === "string") {
         try {
           const parsed = JSON.parse(varValue);
           const path4 = pathPart.replace(/^\./, "");
           const value = getNestedValue2(parsed, path4);
-          return { value };
+          return { value, variableName: varName, jsonPath: path4 };
         } catch {
           return { value: void 0, error: `Cannot access path on non-object variable: ${varName}` };
         }
@@ -12317,8 +12331,14 @@ function getNestedValue2(obj, path4) {
   }
   return current;
 }
-function evaluateAssertion(assertion, responses, variables, getValueByPath2) {
-  const leftResult = resolveValue(assertion.leftExpr, responses, variables, getValueByPath2);
+function evaluateAssertion(assertion, responses, variables, getValueByPath2, responseIndexToVariable) {
+  const leftResult = resolveValue(assertion.leftExpr, responses, variables, getValueByPath2, responseIndexToVariable);
+  const buildFailureContext = () => ({
+    responseIndex: leftResult.responseIndex,
+    friendlyName: leftResult.variableName,
+    relatedResponse: leftResult.response,
+    jsonPath: leftResult.jsonPath
+  });
   if (leftResult.error) {
     return {
       passed: false,
@@ -12328,28 +12348,33 @@ function evaluateAssertion(assertion, responses, variables, getValueByPath2) {
       leftValue: void 0,
       leftExpression: assertion.leftExpr,
       rightExpression: assertion.rightExpr,
-      error: leftResult.error
+      error: leftResult.error,
+      ...buildFailureContext()
     };
   }
   const leftValue = leftResult.value;
   if (assertion.operator === "exists") {
+    const passed2 = leftValue !== void 0 && leftValue !== null;
     return {
-      passed: leftValue !== void 0 && leftValue !== null,
+      passed: passed2,
       expression: formatExpression(assertion),
       message: assertion.message,
       operator: assertion.operator,
       leftValue,
-      leftExpression: assertion.leftExpr
+      leftExpression: assertion.leftExpr,
+      ...!passed2 ? buildFailureContext() : {}
     };
   }
   if (assertion.operator === "!exists") {
+    const passed2 = leftValue === void 0 || leftValue === null;
     return {
-      passed: leftValue === void 0 || leftValue === null,
+      passed: passed2,
       expression: formatExpression(assertion),
       message: assertion.message,
       operator: assertion.operator,
       leftValue,
-      leftExpression: assertion.leftExpr
+      leftExpression: assertion.leftExpr,
+      ...!passed2 ? buildFailureContext() : {}
     };
   }
   if (!assertion.rightExpr) {
@@ -12360,7 +12385,8 @@ function evaluateAssertion(assertion, responses, variables, getValueByPath2) {
       operator: assertion.operator,
       leftValue,
       leftExpression: assertion.leftExpr,
-      error: `Operator ${assertion.operator} requires a right-hand value`
+      error: `Operator ${assertion.operator} requires a right-hand value`,
+      ...buildFailureContext()
     };
   }
   if (assertion.operator === "isType") {
@@ -12373,18 +12399,20 @@ function evaluateAssertion(assertion, responses, variables, getValueByPath2) {
     } else {
       actualType = typeof leftValue;
     }
+    const passed2 = actualType === expectedType;
     return {
-      passed: actualType === expectedType,
+      passed: passed2,
       expression: formatExpression(assertion),
       message: assertion.message,
       operator: assertion.operator,
       leftValue,
       rightValue: expectedType,
       leftExpression: assertion.leftExpr,
-      rightExpression: assertion.rightExpr
+      rightExpression: assertion.rightExpr,
+      ...!passed2 ? buildFailureContext() : {}
     };
   }
-  const rightResult = resolveValue(assertion.rightExpr, responses, variables, getValueByPath2);
+  const rightResult = resolveValue(assertion.rightExpr, responses, variables, getValueByPath2, responseIndexToVariable);
   if (rightResult.error) {
     return {
       passed: false,
@@ -12395,7 +12423,8 @@ function evaluateAssertion(assertion, responses, variables, getValueByPath2) {
       rightValue: void 0,
       leftExpression: assertion.leftExpr,
       rightExpression: assertion.rightExpr,
-      error: rightResult.error
+      error: rightResult.error,
+      ...buildFailureContext()
     };
   }
   const rightValue = rightResult.value;
@@ -12449,7 +12478,8 @@ function evaluateAssertion(assertion, responses, variables, getValueByPath2) {
           rightValue,
           leftExpression: assertion.leftExpr,
           rightExpression: assertion.rightExpr,
-          error: `Invalid regex pattern: ${rightValue}`
+          error: `Invalid regex pattern: ${rightValue}`,
+          ...buildFailureContext()
         };
       }
       break;
@@ -12462,7 +12492,8 @@ function evaluateAssertion(assertion, responses, variables, getValueByPath2) {
     leftValue,
     rightValue,
     leftExpression: assertion.leftExpr,
-    rightExpression: assertion.rightExpr
+    rightExpression: assertion.rightExpr,
+    ...!passed ? buildFailureContext() : {}
   };
 }
 function formatExpression(assertion) {
@@ -20995,6 +21026,7 @@ async function runSequenceWithJar(sequenceContent, fileVariables, cookieJar, wor
     responses.push(response);
     runtimeVariables[`$${responses.length}`] = response;
   };
+  const responseIndexToVariable = /* @__PURE__ */ new Map();
   const steps = extractStepsFromSequence(sequenceContent);
   const captures = extractCaptureDirectives(sequenceContent);
   const totalSteps = steps.length;
@@ -21061,7 +21093,7 @@ async function runSequenceWithJar(sequenceContent, fileVariables, cookieJar, wor
           duration: Date.now() - startTime
         };
       }
-      const result = evaluateAssertion(parsed, responses, runtimeVariables, getValueByPath);
+      const result = evaluateAssertion(parsed, responses, runtimeVariables, getValueByPath, responseIndexToVariable);
       assertionResults.push(result);
       const stepResult = {
         type: "assertion",
@@ -21358,13 +21390,15 @@ async function runSequenceWithJar(sequenceContent, fileVariables, cookieJar, wor
         const requestParsed = parserHttpRequest(requestText, runtimeVariables);
         const response = cookieJar ? await sendRequestWithJar(requestParsed, cookieJar) : await sendRequest(requestParsed);
         addResponse(response);
+        responseIndexToVariable.set(responses.length, parsed.varName);
         runtimeVariables[parsed.varName] = response;
         const stepResult = {
           type: "request",
           stepIndex: stepIdx,
           response,
           requestMethod: parsed.method,
-          requestUrl: resolvedUrl
+          requestUrl: resolvedUrl,
+          variableName: parsed.varName
         };
         orderedSteps.push(stepResult);
         reportProgress(stepIdx, "request", `var ${parsed.varName} = ${requestDescription}`, stepResult);
@@ -22297,7 +22331,11 @@ function formatAssertion(assertion, options) {
   const { colors, verbose } = options;
   const lines = [];
   const icon = assertion.passed ? colors.checkmark : colors.cross;
-  const displayMessage = assertion.message || assertion.expression;
+  let displayExpr = assertion.expression;
+  if (assertion.friendlyName && assertion.responseIndex) {
+    displayExpr = displayExpr.replace("$" + assertion.responseIndex, assertion.friendlyName);
+  }
+  const displayMessage = assertion.message || displayExpr;
   lines.push(`${icon} assert ${displayMessage}`);
   if (!assertion.passed || verbose) {
     if (assertion.error) {
@@ -22639,7 +22677,7 @@ function formatTimestamp() {
   return (/* @__PURE__ */ new Date()).toISOString().replace("T", " ").replace(/\.\d+Z$/, " UTC");
 }
 function generateHtmlReport(results, options) {
-  const { outputPath, redaction, title = "Norn Test Report" } = options;
+  const { outputPath, redaction, title = "Norn Test Report", environment } = options;
   const totalSequences = results.length;
   const passedSequences = results.filter((r) => r.success).length;
   const failedSequences = totalSequences - passedSequences;
@@ -22648,6 +22686,11 @@ function generateHtmlReport(results, options) {
   const failedAssertions = totalAssertions - passedAssertions;
   const totalRequests = results.reduce((sum, r) => sum + r.steps.filter((s) => s.type === "request").length, 0);
   const totalDuration = results.reduce((sum, r) => sum + r.duration, 0);
+  const sortedResults = [...results].sort((a, b) => {
+    if (a.success !== b.success) return a.success ? 1 : -1;
+    return a.name.localeCompare(b.name);
+  });
+  const passRate = totalSequences > 0 ? Math.round(passedSequences / totalSequences * 100) : 100;
   const html = `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -22662,23 +22705,32 @@ function generateHtmlReport(results, options) {
     <div class="container">
         <header>
             <h1>${escapeHtml(title)}</h1>
-            <p class="timestamp">Generated: ${formatTimestamp()}</p>
+            <div class="header-meta">
+                <span class="timestamp">Generated: ${formatTimestamp()}</span>
+                ${environment ? `<span class="environment">Environment: <strong>${escapeHtml(environment)}</strong></span>` : ""}
+            </div>
         </header>
         
         <section class="summary">
-            <h2>Summary</h2>
+            <div class="summary-header">
+                <h2>Summary</h2>
+                <div class="pass-rate ${passRate === 100 ? "perfect" : passRate >= 80 ? "good" : "poor"}">
+                    <span class="rate-value">${passRate}%</span>
+                    <span class="rate-label">Pass Rate</span>
+                </div>
+            </div>
             <div class="stats-grid">
-                <div class="stat-card ${failedSequences > 0 ? "has-failures" : "all-passed"}">
-                    <div class="stat-value">${passedSequences}/${totalSequences}</div>
-                    <div class="stat-label">Sequences Passed</div>
+                <div class="stat-card clickable ${failedSequences > 0 ? "has-failures" : "all-passed"}" onclick="filterByStatus('all')" data-filter="all">
+                    <div class="stat-value">${totalSequences}</div>
+                    <div class="stat-label">Total Tests</div>
                 </div>
-                <div class="stat-card ${failedAssertions > 0 ? "has-failures" : "all-passed"}">
-                    <div class="stat-value">${passedAssertions}/${totalAssertions}</div>
-                    <div class="stat-label">Assertions Passed</div>
+                <div class="stat-card clickable ${passedSequences > 0 ? "all-passed" : ""}" onclick="filterByStatus('passed')" data-filter="passed">
+                    <div class="stat-value">${passedSequences}</div>
+                    <div class="stat-label">Passed</div>
                 </div>
-                <div class="stat-card">
-                    <div class="stat-value">${totalRequests}</div>
-                    <div class="stat-label">Total Requests</div>
+                <div class="stat-card clickable ${failedSequences > 0 ? "has-failures" : ""}" onclick="filterByStatus('failed')" data-filter="failed">
+                    <div class="stat-value">${failedSequences}</div>
+                    <div class="stat-label">Failed</div>
                 </div>
                 <div class="stat-card">
                     <div class="stat-value">${formatDuration2(totalDuration)}</div>
@@ -22692,9 +22744,29 @@ function generateHtmlReport(results, options) {
             </div>
         </section>
         
+        <section class="controls">
+            <div class="filter-bar">
+                <input type="text" id="search-input" placeholder="Search tests..." onkeyup="filterTests()">
+                <div class="filter-buttons">
+                    <button class="filter-btn active" data-filter="all" onclick="setFilter('all')">All (${totalSequences})</button>
+                    <button class="filter-btn" data-filter="passed" onclick="setFilter('passed')">Passed (${passedSequences})</button>
+                    <button class="filter-btn" data-filter="failed" onclick="setFilter('failed')">Failed (${failedSequences})</button>
+                </div>
+            </div>
+            <div class="action-buttons">
+                <button class="action-btn" onclick="expandAll()">Expand All</button>
+                <button class="action-btn" onclick="collapseAll()">Collapse All</button>
+            </div>
+        </section>
+        
         <section class="results">
             <h2>Test Results</h2>
-            ${results.map((r, i) => generateSequenceHtml(r, i, redaction)).join("\n")}
+            <div id="results-container">
+                ${sortedResults.map((r, i) => generateSequenceHtml(r, i, redaction)).join("\n")}
+            </div>
+            <div id="no-results" class="no-results" style="display: none;">
+                No tests match your filter criteria.
+            </div>
         </section>
     </div>
     
@@ -22759,11 +22831,13 @@ function generateRequestHtml(step, seqIndex, reqIndex, redaction) {
   const statusClass = isSuccess ? "passed" : "failed";
   const method = step.requestMethod || "REQUEST";
   const url2 = step.requestUrl ? redactUrl(step.requestUrl, redaction) : "unknown";
+  const varLabel = step.variableName ? `<span class="var-label">${escapeHtml(step.variableName)}</span><span class="var-equals">=</span>` : "";
   const bodyHtml = response.body ? generateBodyHtml(response.body, redaction) : "<em>No body</em>";
   const headersHtml = response.headers ? generateHeadersHtml(response.headers, redaction) : "";
   return `
         <div class="step request ${statusClass}">
             <div class="step-header" onclick="toggleStep('step-${seqIndex}-${reqIndex}')">
+                ${varLabel}
                 <span class="method">${escapeHtml(method)}</span>
                 <span class="url">${escapeHtml(url2)}</span>
                 <span class="status-code">${response.status} ${escapeHtml(response.statusText)}</span>
@@ -22802,20 +22876,32 @@ function generateAssertionHtml(step, redaction) {
   const assertion = step.assertion;
   const statusClass = assertion.passed ? "passed" : "failed";
   const statusIcon = assertion.passed ? "\u2713" : "\u2717";
-  const displayText = assertion.message || assertion.expression;
+  const displayText = assertion.friendlyName || assertion.message || assertion.expression;
   let detailsHtml = "";
   if (!assertion.passed) {
+    let actualDisplay = "";
+    if (assertion.leftValue === void 0) {
+      actualDisplay = "undefined";
+    } else if (assertion.leftValue === null) {
+      actualDisplay = "null";
+    } else if (typeof assertion.leftValue === "object") {
+      actualDisplay = JSON.stringify(assertion.leftValue, null, 2);
+    } else {
+      actualDisplay = String(assertion.leftValue);
+    }
+    const pathInfo = assertion.jsonPath ? `<div class="assertion-path"><strong>Path:</strong> <code>${escapeHtml(assertion.jsonPath)}</code></div>` : "";
     detailsHtml = `
             <div class="assertion-details">
-                <div><strong>Expected:</strong> ${escapeHtml(String(assertion.rightExpression || assertion.rightValue))}</div>
-                <div><strong>Actual:</strong> ${escapeHtml(JSON.stringify(assertion.leftValue))}</div>
+                ${pathInfo}
+                <div><strong>Expected:</strong> <code>${escapeHtml(String(assertion.rightExpression || assertion.rightValue))}</code></div>
+                <div><strong>Actual:</strong> <code>${escapeHtml(actualDisplay)}</code></div>
                 ${assertion.error ? `<div class="error"><strong>Error:</strong> ${escapeHtml(redactString(assertion.error, redaction))}</div>` : ""}
             </div>`;
   }
   return `
         <div class="step assertion ${statusClass}">
             <span class="status-icon">${statusIcon}</span>
-            <span class="assertion-text">assert ${escapeHtml(displayText)}</span>
+            <span class="assertion-text">${escapeHtml(displayText)}</span>
             ${detailsHtml}
         </div>`;
 }
@@ -22855,17 +22941,48 @@ function getEmbeddedCSS() {
         .container { max-width: 1200px; margin: 0 auto; padding: 20px; }
         header { text-align: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid #333; }
         header h1 { color: #fff; font-size: 2em; margin-bottom: 10px; }
+        .header-meta { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
         .timestamp { color: #888; font-size: 0.9em; }
+        .environment { color: #888; font-size: 0.9em; }
+        .environment strong { color: #569cd6; }
         h2 { color: #fff; margin-bottom: 15px; font-size: 1.4em; }
         
-        .summary { background: #252526; border-radius: 8px; padding: 20px; margin-bottom: 30px; }
+        .summary { background: #252526; border-radius: 8px; padding: 20px; margin-bottom: 20px; }
+        .summary-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
+        .pass-rate { text-align: center; padding: 10px 20px; border-radius: 8px; }
+        .pass-rate.perfect { background: #1e3a2f; }
+        .pass-rate.good { background: #2a3a1e; }
+        .pass-rate.poor { background: #3a1e1e; }
+        .rate-value { display: block; font-size: 2em; font-weight: bold; }
+        .pass-rate.perfect .rate-value { color: #4ec9b0; }
+        .pass-rate.good .rate-value { color: #b5cea8; }
+        .pass-rate.poor .rate-value { color: #f14c4c; }
+        .rate-label { font-size: 0.8em; color: #888; }
+        
         .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin-bottom: 20px; }
-        .stat-card { background: #1e1e1e; border-radius: 6px; padding: 15px; text-align: center; }
+        .stat-card { background: #1e1e1e; border-radius: 6px; padding: 15px; text-align: center; transition: transform 0.2s, box-shadow 0.2s; }
+        .stat-card.clickable { cursor: pointer; }
+        .stat-card.clickable:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
         .stat-card.all-passed { border-left: 4px solid #4ec9b0; }
         .stat-card.has-failures { border-left: 4px solid #f14c4c; }
         .stat-value { font-size: 2em; font-weight: bold; color: #fff; }
         .stat-label { color: #888; font-size: 0.85em; margin-top: 5px; }
         
+        .controls { background: #252526; border-radius: 8px; padding: 15px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
+        .filter-bar { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; flex: 1; }
+        #search-input { background: #1e1e1e; border: 1px solid #333; border-radius: 4px; padding: 8px 12px; color: #d4d4d4; min-width: 200px; font-size: 0.9em; }
+        #search-input:focus { outline: none; border-color: #569cd6; }
+        #search-input::placeholder { color: #666; }
+        .filter-buttons { display: flex; gap: 5px; }
+        .filter-btn { background: #1e1e1e; border: 1px solid #333; border-radius: 4px; padding: 8px 16px; color: #888; cursor: pointer; font-size: 0.9em; transition: all 0.2s; }
+        .filter-btn:hover { border-color: #569cd6; color: #d4d4d4; }
+        .filter-btn.active { background: #264f78; border-color: #264f78; color: #fff; }
+        .action-buttons { display: flex; gap: 10px; }
+        .action-btn { background: transparent; border: 1px solid #444; border-radius: 4px; padding: 8px 16px; color: #888; cursor: pointer; font-size: 0.85em; transition: all 0.2s; }
+        .action-btn:hover { border-color: #666; color: #d4d4d4; }
+        
+        .no-results { text-align: center; padding: 40px; color: #888; font-size: 1.1em; }
+        
         .progress-bar { height: 8px; background: #333; border-radius: 4px; overflow: hidden; }
         .progress-fill { height: 100%; transition: width 0.3s; }
         .progress-fill.all-passed { background: #4ec9b0; }
@@ -22902,6 +23019,8 @@ function getEmbeddedCSS() {
         
         .step-header { display: flex; align-items: center; gap: 10px; cursor: pointer; }
         .step-header:hover { opacity: 0.9; }
+        .var-label { color: #4fc1ff; font-family: monospace; font-weight: 500; }
+        .var-equals { color: #d4d4d4; margin-right: 5px; }
         .method { background: #264f78; color: #fff; padding: 2px 6px; border-radius: 3px; font-size: 0.8em; font-weight: 600; }
         .url { flex: 1; color: #9cdcfe; font-family: monospace; font-size: 0.9em; word-break: break-all; }
         .status-code { font-weight: 600; }
@@ -22921,6 +23040,9 @@ function getEmbeddedCSS() {
         .assertion-text { font-family: monospace; }
         .assertion-details { width: 100%; margin-top: 8px; padding: 10px; background: #1a1a1a; border-radius: 4px; font-size: 0.9em; }
         .assertion-details div { margin-bottom: 5px; }
+        .assertion-details code { background: #2d2d2d; padding: 2px 6px; border-radius: 3px; font-family: monospace; color: #ce9178; }
+        .assertion-path { color: #888; }
+        .assertion-path code { color: #9cdcfe; }
         
         .print-icon { font-size: 1em; }
         .print-text { color: #dcdcaa; }
@@ -22937,6 +23059,8 @@ function getEmbeddedCSS() {
 }
 function getEmbeddedJS() {
   return `
+        let currentFilter = 'all';
+        
         function toggleSequence(index) {
             const body = document.getElementById('sequence-body-' + index);
             const sequence = body.closest('.sequence');
@@ -22962,6 +23086,69 @@ function getEmbeddedJS() {
             }
         }
         
+        function setFilter(filter) {
+            currentFilter = filter;
+            document.querySelectorAll('.filter-btn').forEach(btn => {
+                btn.classList.toggle('active', btn.dataset.filter === filter);
+            });
+            filterTests();
+        }
+        
+        function filterByStatus(filter) {
+            setFilter(filter);
+        }
+        
+        function filterTests() {
+            const searchTerm = document.getElementById('search-input').value.toLowerCase();
+            const sequences = document.querySelectorAll('.sequence');
+            let visibleCount = 0;
+            
+            sequences.forEach(seq => {
+                const name = seq.querySelector('.sequence-name').textContent.toLowerCase();
+                const isPassed = seq.classList.contains('passed');
+                const isFailed = seq.classList.contains('failed');
+                
+                let matchesFilter = currentFilter === 'all' ||
+                    (currentFilter === 'passed' && isPassed) ||
+                    (currentFilter === 'failed' && isFailed);
+                
+                let matchesSearch = !searchTerm || name.includes(searchTerm);
+                
+                if (matchesFilter && matchesSearch) {
+                    seq.style.display = 'block';
+                    visibleCount++;
+                } else {
+                    seq.style.display = 'none';
+                }
+            });
+            
+            document.getElementById('no-results').style.display = visibleCount === 0 ? 'block' : 'none';
+        }
+        
+        function expandAll() {
+            document.querySelectorAll('.sequence').forEach(seq => {
+                if (seq.style.display !== 'none') {
+                    const index = seq.dataset.sequence;
+                    const body = document.getElementById('sequence-body-' + index);
+                    if (body) {
+                        body.style.display = 'block';
+                        seq.classList.add('open');
+                    }
+                }
+            });
+        }
+        
+        function collapseAll() {
+            document.querySelectorAll('.sequence').forEach(seq => {
+                const index = seq.dataset.sequence;
+                const body = document.getElementById('sequence-body-' + index);
+                if (body) {
+                    body.style.display = 'none';
+                    seq.classList.remove('open');
+                }
+            });
+        }
+        
         // Expand all failed sequences by default
         document.querySelectorAll('.sequence.failed').forEach((seq, i) => {
             const index = seq.dataset.sequence;

package/package.json

@@ -2,7 +2,7 @@
   "name": "norn-cli",
   "displayName": "Norn - REST Client",
   "description": "A powerful REST client for making HTTP requests with sequences, variables, scripts, and cookie support",
-  "version": "1.2.3",
+  "version": "1.2.5",
   "publisher": "Norn-PeterKrustanov",
   "author": {
     "name": "Peter Krastanov"