diff --git a/package-lock.json b/package-lock.json
index 5dab86d0f..a9f140c6f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19729,11 +19729,11 @@
     },
     "packages/bruno-electron": {
       "name": "bruno",
-      "version": "v1.16.1",
+      "version": "v1.17.0",
       "dependencies": {
         "@aws-sdk/credential-providers": "3.525.0",
         "@usebruno/common": "0.1.0",
-        "@usebruno/js": "0.11.0",
+        "@usebruno/js": "0.12.0",
         "@usebruno/lang": "0.12.0",
         "@usebruno/schema": "0.7.0",
         "about-window": "^1.15.2",
@@ -20762,33 +20762,6 @@
         "node": ">=14.0.0"
       }
     },
-    "packages/bruno-electron/node_modules/@usebruno/js": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/@usebruno/js/-/js-0.11.0.tgz",
-      "integrity": "sha512-csbKAnFtLTupG46aMIahRWeNW8/rdDeaZPtvr4kIzcHDPNmKNowcFcrIR4VSpceh47Ltpm8n0sgzrHzw8P8Yjg==",
-      "dependencies": {
-        "@usebruno/query": "0.1.0",
-        "ajv": "^8.12.0",
-        "ajv-formats": "^2.1.1",
-        "atob": "^2.1.2",
-        "axios": "^1.5.1",
-        "btoa": "^1.2.1",
-        "chai": "^4.3.7",
-        "chai-string": "^1.5.0",
-        "crypto-js": "^4.1.1",
-        "handlebars": "^4.7.8",
-        "json-query": "^2.2.2",
-        "lodash": "^4.17.21",
-        "moment": "^2.29.4",
-        "nanoid": "3.3.4",
-        "node-fetch": "2.*",
-        "node-vault": "^0.10.2",
-        "uuid": "^9.0.0"
-      },
-      "peerDependencies": {
-        "@n8n/vm2": "^3.9.23"
-      }
-    },
     "packages/bruno-electron/node_modules/ajv": {
       "version": "8.13.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.13.0.tgz",
@@ -26185,7 +26158,7 @@
       "requires": {
         "@aws-sdk/credential-providers": "3.525.0",
         "@usebruno/common": "0.1.0",
-        "@usebruno/js": "0.11.0",
+        "@usebruno/js": "0.12.0",
         "@usebruno/lang": "0.12.0",
         "@usebruno/schema": "0.7.0",
         "about-window": "^1.15.2",
@@ -27040,8 +27013,7 @@
           }
         },
         "@usebruno/js": {
-          "version": "0.11.0",
-          "resolved": "https://registry.npmjs.org/@usebruno/js/-/js-0.11.0.tgz",
+          "version": "https://registry.npmjs.org/@usebruno/js/-/js-0.11.0.tgz",
           "integrity": "sha512-csbKAnFtLTupG46aMIahRWeNW8/rdDeaZPtvr4kIzcHDPNmKNowcFcrIR4VSpceh47Ltpm8n0sgzrHzw8P8Yjg==",
           "requires": {
             "@usebruno/query": "0.1.0",
diff --git a/packages/bruno-app/src/components/Sidebar/index.js b/packages/bruno-app/src/components/Sidebar/index.js
index 7902eac65..00ce4345c 100644
--- a/packages/bruno-app/src/components/Sidebar/index.js
+++ b/packages/bruno-app/src/components/Sidebar/index.js
@@ -129,7 +129,7 @@ const Sidebar = () => {
                   Star
                 </GitHubButton> */}
               </div>
-              <div className="flex flex-grow items-center justify-end text-xs mr-2">v1.16.1</div>
+              <div className="flex flex-grow items-center justify-end text-xs mr-2">v1.17.0</div>
             </div>
           </div>
         </div>
diff --git a/packages/bruno-app/src/providers/App/useTelemetry.js b/packages/bruno-app/src/providers/App/useTelemetry.js
index c3588c010..98ba63fc3 100644
--- a/packages/bruno-app/src/providers/App/useTelemetry.js
+++ b/packages/bruno-app/src/providers/App/useTelemetry.js
@@ -60,7 +60,7 @@ const trackStart = () => {
     event: 'start',
     properties: {
       os: platformLib.os.family,
-      version: '1.16.1'
+      version: '1.17.0'
     }
   });
 };
diff --git a/packages/bruno-electron/package.json b/packages/bruno-electron/package.json
index 866cb70ab..3c187d145 100644
--- a/packages/bruno-electron/package.json
+++ b/packages/bruno-electron/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "v1.16.1",
+  "version": "v1.17.0",
   "name": "bruno",
   "description": "Opensource API Client for Exploring and Testing APIs",
   "homepage": "https://www.usebruno.com",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@aws-sdk/credential-providers": "3.525.0",
     "@usebruno/common": "0.1.0",
-    "@usebruno/js": "0.11.0",
+    "@usebruno/js": "0.12.0",
     "@usebruno/lang": "0.12.0",
     "@usebruno/schema": "0.7.0",
     "about-window": "^1.15.2",
diff --git a/packages/bruno-tests/collection/echo/supermetrics.bru b/packages/bruno-tests/collection/echo/supermetrics.bru
new file mode 100644
index 000000000..20c4eb281
--- /dev/null
+++ b/packages/bruno-tests/collection/echo/supermetrics.bru
@@ -0,0 +1,139 @@
+meta {
+  name: supermetrics json visualize
+  type: http
+  seq: 5
+}
+
+post {
+  url: https://testbench-sanity.usebruno.com/api/echo/json
+  body: json
+  auth: none
+}
+
+headers {
+  foo: bar
+}
+
+auth:basic {
+  username: asd
+  password: j
+}
+
+auth:bearer {
+  token: 
+}
+
+body:json {
+  {
+    "notes": {
+      "runtime_sec": 5,
+      "result_rows": 4,
+      "query_count": 6    
+    },
+    "fields": [
+      {
+        "name": "Count",
+        "type": "number",
+        "data_type": "number"
+      },
+      {
+        "name": "Name",
+        "type": "string",
+        "data_type": "string"
+      },
+      {
+        "name": "Age",
+        "type": "number",
+        "data_type": "number"
+      },
+      {
+        "name": "Email",
+        "type": "email",
+        "data_type": "string"
+      },
+      {
+        "name": "Place",
+        "type": "string",
+        "data_type": "string"
+      }
+    ],
+    "data": [
+      {
+        "id": null,
+        "name": "Name",
+        "age": "Age",
+        "email": "Email",
+        "city": "City"
+      },
+      {
+        "id": 1,
+        "name": "John Doe",
+        "age": 30,
+        "email": "john@example.com",
+        "city": "New York"
+      },
+      {
+        "id": 2,
+        "name": "Jane Smith",
+        "age": 25,
+        "email": "jane@example.com",
+        "city": "Los Angeles"
+      },
+      {
+        "id": 3,
+        "name": "Bob Johnson",
+        "age": 35,
+        "email": "bob@example.com",
+        "city": "Chicago"
+      },
+      {
+        "id": 4,
+        "name": "Alice Williams",
+        "age": 28,
+        "email": "alice@example.com",
+        "city": "San Francisco"
+      }
+    ]
+  }
+  
+}
+
+assert {
+  res.status: eq 200
+}
+
+script:pre-request {
+  const { URL } = require('url');
+  
+  const reqUrl = new URL(req.url);
+  
+  reqUrl.searchParams.delete('returnQueryIDafterSeconds');
+  reqUrl.searchParams.delete('separateFetchQuery');
+  reqUrl.searchParams.delete('pretty');
+  reqUrl.searchParams.delete('displayLog');
+  reqUrl.searchParams.delete('triggerID');
+  reqUrl.searchParams.delete('hashForQIDFDB');
+  reqUrl.searchParams.delete('queryType');
+  reqUrl.searchParams.delete('queryCount');
+  
+  reqUrl.searchParams.append("cacheBuster", new Date().toISOString());
+  
+  req.setUrl(reqUrl.href);
+  
+}
+
+script:post-response {
+  const visualizeNotes = require("./lib/notes");
+  
+  bru.visualize(visualizeNotes(res));
+}
+
+tests {
+  test("should return json", function() {
+    const data = res.getBody();
+    expect(res.getBody()).to.eql({
+      "hello": "bruno"
+    });
+  });
+  
+}
diff --git a/packages/bruno-tests/collection/lib/notes.js b/packages/bruno-tests/collection/lib/notes.js
new file mode 100644
index 000000000..800a49a25
--- /dev/null
+++ b/packages/bruno-tests/collection/lib/notes.js
@@ -0,0 +1,180 @@
+const visualizeNotes = (res) => {
+  let response = res.body;
+
+  let notes = response?.notes || {};
+  let responseRuntime = notes.runtime_sec || 0;
+
+  notes.runtime = new Date(responseRuntime * 1000).toISOString().substr(11, 8);
+
+  if (typeof response?.data === 'undefined' && typeof response?.rows === 'object') {
+    response.data = response?.rows?.map(function (data) {
+      return data?.values;
+    });
+  }
+
+  const templateScript = `
+    <script id="template" type="text/x-handlebars-template">
+      {{#if response.data}}
+          <div>
+              <p>Total rows: {{notes.result_rows}}</p>
+              <p>Query count: {{notes.query_count}}</p>
+              <p>Duration: {{notes.runtime}}</p>
+          </div>
+          <table id="data_table">
+              {{#each response.data}}
+                  {{#if @first}}
+                      <tr>
+                          {{#each this}}
+                              <th>
+                                  {{#with (lookup ../../response.fields @index)~}}
+                                      <small>
+                                          {{name}} ({{type}})<br>
+                                          {{data_type}}<br>
+                                      </small>
+                                  {{/with}}
+                                  {{this}}
+                              </th>
+                          {{/each}}
+                      </tr>
+                  {{else}}
+                      <tr id="row_{{@key}}" class="data_row">
+                          {{#each this}}
+                              <td>{{this}}</td>
+                          {{/each}}
+                      </tr>
+                  {{/if}}
+              {{/each}}
+          </table>
+      {{else if response.results}}
+          <table id="data_table">
+              <tr>
+                  {{#each response.results.[0]}}
+                      <th>{{@key}}</th>
+                  {{/each}}
+              </tr>
+              {{#each response.results}}
+                  <tr id="row_{{@key}}" class="data_row">
+                      {{#each this}}
+                          <td>{{this}}</td>
+                      {{/each}}
+                  </tr>
+              {{/each}}
+          </table>
+      {{else}}
+          <div class="error">
+              <h1>Error</h1>
+              {{#if response.notes}}
+                  {{response.notes.error}}
+              {{else}}
+                  No response
+              {{/if}}
+          </div>
+      {{/if}}
+    </script>
+  `;
+
+  const mainScript = `
+    <script>
+      document.addEventListener("DOMContentLoaded", function() {
+        let data = ${JSON.stringify({
+          response,
+          notes
+        })}
+        let source = document.getElementById("template").innerHTML;
+        let template = Handlebars.compile(source);
+        document.body.innerHTML = template(data);
+        document.getElementById('data_table').addEventListener('click', function(e) {
+          var row = e.target.closest('tr.data_row');
+          if (row) {
+              row.classList.toggle('marked');
+          }
+        });
+      });
+    </script>
+  `;
+
+  const style = `
+    <style type="text/css">
+        div {
+            margin-bottom: 8px;
+        }
+        div p {
+            font-family: courier;
+            font-size: 12px;
+            line-height: 1.2;
+            color: #afafaf;
+            margin: 0;
+        }
+        div.error {
+            padding: 20px;
+            background-color: #ffcece;
+            color: #792626;
+            font-size: 18px;
+        }
+        div.error h1 {
+            color: #dd4545;
+            line-height: 50px;
+            font-size: 28px;
+            font-weight: bold;
+            text-transform: uppercase;
+        }
+        table {
+            background-color: #454545;
+            color: #dedede;
+            font-size: 12px;
+            width: 100%;
+            border: 1px solid #cdcdcd;
+            border-collapse: collapse;
+        }
+        table th, table td {
+            border: 1px solid #797979;
+        }
+        table th {
+            font-size: 14px;
+            font-weight: bold;
+            background-color: #565656;
+            text-align: left;
+            vertical-align: bottom;
+        }
+        table th, table th:first-child, table th:last-child {
+            padding: 4px;
+        }
+        table th small {
+            font-size: 10px;
+            color: #afafaf;
+        }
+        table tr:hover {
+            background-color:#505050;
+        }
+        table tr.marked:nth-child(even) {
+            background-color: #707070;
+        }
+        table tr.marked:nth-child(odd) {
+            background-color: #696969;
+        }
+        table td {
+            padding: 2px;
+        }
+        table td, table td:first-child, table td:last-child {
+            padding: 3px;
+        }
+    </style>
+  `;
+
+  const htmlString = `
+    <html>
+      <head>
+        ${style}
+      </head>
+      <body>
+        <script src="https://rawgit.com/components/handlebars.js/master/handlebars.js"></script>
+        ${templateScript}
+        ${mainScript}
+      </body>
+    </html>
+  `;
+
+  return htmlString;
+};
+
+module.exports = visualizeNotes;