From 4451e75fbea6ed82c66b584c84afb9e23a2fe8bc Mon Sep 17 00:00:00 2001
From: Traxx <31518769+crowbait@users.noreply.github.com>
Date: Sat, 14 Dec 2024 18:53:48 +0100
Subject: [PATCH] fix: move request handling to backend; fixes CORS-only
 headers

---
 .vscodeignore                                 |   1 -
 src/Call-Temporary.ts                         |   2 +-
 src/Call.ts                                   |   2 +-
 src/CallEdit.html                             |  11 +-
 src/CallEdit.ts                               |   4 +-
 src/CallRun.html                              | 343 +++++++++---------
 src/CallRun.ts                                | 123 ++++++-
 src/TreeDataProvider.ts                       |   4 +-
 src/helpers/WebViewHelpers.ts                 |   6 +-
 .../{statusCodes.jspart => statusCodes.ts}    |   4 +-
 10 files changed, 304 insertions(+), 196 deletions(-)
 rename src/helpers/{statusCodes.jspart => statusCodes.ts} (99%)

diff --git a/.vscodeignore b/.vscodeignore
index 1be8d74..eaabadd 100644
--- a/.vscodeignore
+++ b/.vscodeignore
@@ -12,7 +12,6 @@ vsc-extension-quickstart.md
 src/**
 !src/helpers/jsontree.css
 !src/helpers/jsontree.js
-!src/helpers/statusCodes.jspart
 !src/*.html
 
 node_modules
diff --git a/src/Call-Temporary.ts b/src/Call-Temporary.ts
index f38ad1d..37fba14 100644
--- a/src/Call-Temporary.ts
+++ b/src/Call-Temporary.ts
@@ -34,7 +34,7 @@ class RESTCall_Temporary {
     this.log.appendLine(`Running ${this.label}`);
     if (this.runView) {
       this.runView.webview.reveal();
-      this.runView.run();
+      this.runView.prepareRun();
       return;
     }
     this.runView = new CallRun(this, () => this.runView = undefined);
diff --git a/src/Call.ts b/src/Call.ts
index 417f085..8f16da1 100644
--- a/src/Call.ts
+++ b/src/Call.ts
@@ -58,7 +58,7 @@ class RESTCall extends ListEntry {
     this.provider.log.appendLine(`Running ${this.label}`);
     if (this.runView) {
       this.runView.webview.reveal();
-      this.runView.run();
+      this.runView.prepareRun();
       return;
     }
     this.runView = new CallRun(this, () => this.runView = undefined);
diff --git a/src/CallEdit.html b/src/CallEdit.html
index 2f154d1..5cb489e 100644
--- a/src/CallEdit.html
+++ b/src/CallEdit.html
@@ -69,8 +69,14 @@
         border: 1px solid var(--vscode-widget-border);
         border-radius: 4px;
       }
+      #body-errors {
+        color: darkorange;
+        font-family: var(--vscode-editor-font-family);
+        background: var(--vscode-textPreformat-background);
+        padding: 0.25rem;
+      }
 
-      #json-errors, #body-errors {
+      #json-errors {
         color: lightcoral;
         font-family: var(--vscode-editor-font-family);
         background: darkred;
@@ -300,7 +306,7 @@ <h3 id="title-sub"></h3>
         } catch (error) {
           vscode.postMessage({channel: 'err', value: `Error parsing body: ${error.message}`});
           body_errors.hidden = false;
-          body_errors.innerText = error.message;
+          body_errors.innerText = `Warning: ${error.message}`;
         }
       }
       input_body.onchange = (e) => {
@@ -349,7 +355,6 @@ <h3 id="title-sub"></h3>
       // -----------------
       (function() {
         window.addEventListener('message', event => { 
-          vscode.postMessage({channel: 'log', value: `Message from host: ${JSON.stringify(event.data)}`});
           switch (event.data.channel) {
             case 'call-data':
               data = event.data.value;
diff --git a/src/CallEdit.ts b/src/CallEdit.ts
index c4c89e5..fe9afd8 100644
--- a/src/CallEdit.ts
+++ b/src/CallEdit.ts
@@ -38,11 +38,11 @@ export class CallEdit {
   webview: vscode.WebviewPanel;
 
   private webviewSendMessage = (message: any): void => {
-    this.log.appendLine(`Sending to webview edit: ${JSON.stringify(message)}`);
+    this.log.appendLine(`Sending to webview edit: ${JSON.stringify(message.channel)}`);
     this.webview.webview.postMessage(message);
   };
   private webviewReceiveMessage = (message: any): void => {
-    this.log.appendLine(`Receiving from webview edit: ${JSON.stringify(message)}`);
+    this.log.appendLine(`Receiving from webview edit: ${JSON.stringify(message.channel)}`);
     switch (message.channel) {
       case 'event':
         switch (message.value) {
diff --git a/src/CallRun.html b/src/CallRun.html
index c9fff4d..9daee8b 100644
--- a/src/CallRun.html
+++ b/src/CallRun.html
@@ -35,6 +35,14 @@
       vscode-table {
         --vscode-font-family: var(--vscode-editor-font-family);
       }
+      vscode-table-body {
+        padding-top: 0.25rem;
+      }
+      vscode-table-cell {
+        word-wrap: break-word;
+        white-space: normal;
+        vertical-align: top;
+      }
 
       #status-container {
         display: flex;
@@ -104,9 +112,8 @@ <h1>
       </h1>
       <h3 id="title-sub"></h3>
 
-      <div id="loading-wrapper" style="display: flex; flex-direction: row; justify-items: center; margin-top: 4rem; position: relative;">
-        <vscode-icon name="loading" spin spin-duration="1" size="128" style="margin: auto;"></vscode-icon>
-        <span id="timekeeper" style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--vscode-editor-font-family);"></span>
+      <div id="loading-wrapper" style="margin-top: 4rem; position: relative;">
+        <vscode-icon name="loading" spin spin-duration="1" size="128" style="display: block; width: fit-content; margin: auto;"></vscode-icon>
       </div>
 
       <div id="container-results" style="display: none;">
@@ -116,7 +123,6 @@ <h3 id="title-sub"></h3>
 
     
     <script>
-      const statusCodes = replace_statusCodes;
       const vscode = acquireVsCodeApi();
       let data = { /* getJsonObject() */ };
 
@@ -125,186 +131,179 @@ <h3 id="title-sub"></h3>
       const title_sub = document.getElementById('title-sub');
 
       const loadingWrapper = document.getElementById('loading-wrapper');
-      const timekeeperSpan = document.getElementById('timekeeper');
 
       const containerResults = document.getElementById('container-results');
 
-      const run = async () => {
+      const runStart = async () => {
         loadingWrapper.style.display = 'block';
         containerResults.style.display = 'none';
         containerResults.replaceChildren();
+      }
 
-        const headers = new Headers();
-        if (data.auth) headers.set('Authorization', data.auth);
-        data.headers.forEach((x, i) => headers.set(x.header, x.value));
-
-        let done = 0;
-        const start = Date.now();
-        const timekeeper = setInterval(() => {
-          timekeeperSpan.innerText = `${((Date.now() - start) / 1000).toFixed(1)} s`;	
-        }, 100);
-
-        const setCommonParts = (status, message) => {
-          clearInterval(timekeeper);
-
-          const statusContainer = document.createElement('div');
-          statusContainer.id = "status-container";
-          const statusSpan = document.createElement('span');
-          const severity = status === 'Error' ? 'error' : status < 300 ? 'ok' : status < 400 ? 'warning' : 'error';
-          statusSpan.id = "status";
-          statusSpan.classList.add(severity);
-          statusSpan.innerHTML = `${status}: <span>${message ?? statusCodes[status]?.message}</span>`;
-          statusContainer.appendChild(statusSpan);
-
-          const button_run = document.createElement('vscode-button');
-          button_run.id = 'button-run';
-          button_run.setAttribute('icon', 'run');
-          button_run.innerText = 'Run again';
-          button_run.onclick = () => run();
-          statusContainer.appendChild(button_run);
-
-          const timeSpan = document.createElement('span');
-          timeSpan.id = "timeSpan";
-          const seconds = ((done - start) / 1000);
-          timeSpan.innerHTML = seconds > 10 ? `${seconds.toFixed(1)} s` : `${(seconds * 1000).toFixed(0)} ms`;
-          statusContainer.appendChild(timeSpan);
-
-          containerResults.appendChild(statusContainer);
-        };
-
-
+      const runSuccess = (runData) => {
+        const statusContainer = document.createElement('div');
+        statusContainer.id = "status-container";
+        const statusSpan = document.createElement('span');
+        const severity = runData.status < 300 ? 'ok' : runData.status < 400 ? 'warning' : 'error';
+        statusSpan.id = "status";
+        statusSpan.classList.add(severity);
+        statusSpan.innerHTML = `${runData.status}: <span>${runData.statusMessage}</span>`;
+        statusContainer.appendChild(statusSpan);
+
+        const button_run = document.createElement('vscode-button');
+        button_run.id = 'button-run';
+        button_run.setAttribute('icon', 'run');
+        button_run.innerText = 'Run again';
+        button_run.onclick = () => vscode.postMessage({channel: 'event', value: 'ready'});
+        statusContainer.appendChild(button_run);
+
+        const timeSpan = document.createElement('span');
+        timeSpan.id = "timeSpan";
+        const seconds = (runData.milliseconds / 1000);
+        timeSpan.innerHTML = seconds > 10 ? `${seconds.toFixed(1)} s` : `${(seconds * 1000).toFixed(0)} ms`;
+        statusContainer.appendChild(timeSpan);
+
+        containerResults.appendChild(statusContainer);
+          
 
-        try {
-          const createCachebuster = (url) => {
-            let ret = '';
-            if (url.includes('?')) {
-              ret = `${url}&${Date.now().toString().substring(7)}`;
-            } else ret = `${url}?${Date.now().toString().substring(7)}`;
-            title_sub.innerHTML = `${data.method}&nbsp;&nbsp;&nbsp;${ret}`;
-            return ret;
-          }
-          const response = await fetch(
-            data.bustCache ? createCachebuster(data.url) : data.url, {
-            method: data.method,
-            headers: headers,
-            body: data.body ? data.body : undefined
-          });
-          done = Date.now();
-          setCommonParts(response.status);
-
-          const createCollapsible = (title, content, open) => {
-            const collapsible = document.createElement('vscode-collapsible');
-            collapsible.title = title;
-            collapsible.open = open ?? false;
-            if (Array.isArray(content)) {
-              content.forEach(x => collapsible.appendChild(x));
-            } else collapsible.appendChild(content);
-            return collapsible;
-          }
+        const createCollapsible = (title, content, open) => {
+          const collapsible = document.createElement('vscode-collapsible');
+          collapsible.title = title;
+          collapsible.open = open ?? false;
+          if (Array.isArray(content)) {
+            content.forEach(x => collapsible.appendChild(x));
+          } else collapsible.appendChild(content);
+          return collapsible;
+        }
 
-          const createHeadersTable = (headers) => {
-            if (headers.keys().toArray().length > 0) {
-              const table = document.createElement('vscode-table');
-              const tableBody = document.createElement('vscode-table-body');
-              tableBody.slot = 'body';
-              headers.forEach((x, i) => {
-                const row = document.createElement('vscode-table-row');
-                const cellHeader = document.createElement('vscode-table-cell');
-                cellHeader.innerText = i;
-                const cellValue = document.createElement('vscode-table-cell');
-                cellValue.innerText = x;
-                row.appendChild(cellHeader);
-                row.appendChild(cellValue);
-                tableBody.appendChild(row);
-              });
-              table.appendChild(tableBody);
-              return table;
-            } else {
-              const headersWrapper = document.createElement('div');
-              headersWrapper.style = 'font-family: var(--vscode-editor-font-family); margin: 1rem; font-style: italic;';
-              headersWrapper.innerText = 'No headers';
-              return headersWrapper;
-            }
+        const createHeadersTable = (headers) => {
+          if (headers.keys().toArray().length > 0) {
+            const table = document.createElement('vscode-table');
+            const tableBody = document.createElement('vscode-table-body');
+            tableBody.slot = 'body';
+            headers.forEach((h) => {
+              const row = document.createElement('vscode-table-row');
+              const cellHeader = document.createElement('vscode-table-cell');
+              cellHeader.innerText = h.header;
+              const cellValue = document.createElement('vscode-table-cell');
+              cellValue.innerText = h.value;
+              row.appendChild(cellHeader);
+              row.appendChild(cellValue);
+              tableBody.appendChild(row);
+            });
+            table.appendChild(tableBody);
+            return table;
+          } else {
+            const headersWrapper = document.createElement('div');
+            headersWrapper.style = 'font-family: var(--vscode-editor-font-family); margin: 1rem; font-style: italic;';
+            headersWrapper.innerText = 'No headers';
+            return headersWrapper;
           }
+        }
 
-          const createBodyField = (body, raw) => {
-            const bodyWrapper = document.createElement('div');
-            if (body) {
-              if (typeof body === 'string') {
-                if (!raw && (body.startsWith('<!DOCTYPE html>') || body.startsWith('<html>'))) {
-                  const iframe = document.createElement('iframe');
-                  iframe.srcdoc = body;
-                  iframe.sandbox = 'allow-scripts';
-                  iframe.style = 'width: 100%; height: 24rem; border: 1px solid var(--vscode-widget-border); border-radius: 4px;';
-                  bodyWrapper.appendChild(iframe);
-                } else {
-                  bodyWrapper.style = 'font-family: var(--vscode-editor-font-family); margin: 1rem; padding: 0.5rem;';
-                  bodyWrapper.innerText = body;
-                }
+        const createBodyField = (body, raw) => {
+          const bodyWrapper = document.createElement('div');
+          if (body) {
+            if (typeof body === 'string') {
+              if (!raw && (body.startsWith('<!DOCTYPE html>') || body.startsWith('<html>'))) {
+                const iframe = document.createElement('iframe');
+                iframe.srcdoc = body;
+                iframe.sandbox = 'allow-scripts';
+                iframe.style = 'width: 100%; height: 24rem; border: 1px solid var(--vscode-widget-border); border-radius: 4px;';
+                bodyWrapper.appendChild(iframe);
               } else {
-                if (typeof body === 'object') {
-                  bodyWrapper.style = 'font-family: var(--vscode-editor-font-family); margin: 1rem; padding: 0.5rem;';
-                  bodyWrapper.innerHTML = JSONTree.create(body);
-                }
+                bodyWrapper.style = 'font-family: var(--vscode-editor-font-family); margin: 1rem; padding: 0.5rem;';
+                bodyWrapper.innerText = body;
               }
             } else {
-              bodyWrapper.style = 'font-family: var(--vscode-editor-font-family); margin: 1rem; font-style: italic;';
-              bodyWrapper.innerText = 'No body';
+              if (typeof body === 'object') {
+                bodyWrapper.style = 'font-family: var(--vscode-editor-font-family); margin: 1rem; padding: 0.5rem;';
+                bodyWrapper.innerHTML = JSONTree.create(body);
+              }
             }
-            return bodyWrapper;
+          } else {
+            bodyWrapper.style = 'font-family: var(--vscode-editor-font-family); margin: 1rem; font-style: italic;';
+            bodyWrapper.innerText = 'No body';
           }
+          return bodyWrapper;
+        }
 
-          containerResults.appendChild(document.createElement('vscode-divider'));
-          const requestContainer = document.createElement('div');
-          const requestHeader = document.createElement('h4');
-          requestHeader.innerText = 'Request';
-          requestContainer.appendChild(requestHeader);
-          requestContainer.appendChild(createCollapsible('Headers', createHeadersTable(headers), true));
-          requestContainer.appendChild(createCollapsible('Body', createBodyField(data.body), !!data.body));
-          containerResults.appendChild(requestContainer);
-
-          let body = '';
-          let bodyJson = undefined;
-          try {
-            body = await response.text();
-            bodyJson = JSON.parse(body);
-          } catch (error) {
-            // ignore
-          }
+        containerResults.appendChild(document.createElement('vscode-divider'));
+        const requestContainer = document.createElement('div');
+        const requestHeader = document.createElement('h4');
+        requestHeader.innerText = 'Request';
+        requestContainer.appendChild(requestHeader);
+        requestContainer.appendChild(createCollapsible('Headers', createHeadersTable(runData.request.headers), false));
+        requestContainer.appendChild(createCollapsible('Body', createBodyField(runData.request.body), false));
+        containerResults.appendChild(requestContainer);
 
-          containerResults.appendChild(document.createElement('vscode-divider'));
-          const responseContainer = document.createElement('div');
-          const responseHeader = document.createElement('h4');
-          responseHeader.innerText = 'Response';
-          responseContainer.appendChild(responseHeader);
-          responseContainer.appendChild(createCollapsible('Headers', createHeadersTable(response.headers), true));
-          
-          const responseTabs = document.createElement('vscode-tabs');
-          responseTabs.style = 'margin-top: 1rem;';
-
-          const tabHeaderParsed = document.createElement('vscode-tab-header');
-          tabHeaderParsed.slot = 'header';
-          tabHeaderParsed.innerText = 'Content';
-          responseTabs.appendChild(tabHeaderParsed);
-          const tabBodyParsed = document.createElement('vscode-tab-panel');
-          tabBodyParsed.appendChild(createBodyField(bodyJson ?? body));
-          responseTabs.appendChild(tabBodyParsed);
-
-          const tabHeaderRaw = document.createElement('vscode-tab-header');
-          tabHeaderRaw.slot = 'header';
-          tabHeaderRaw.innerText = 'Raw';
-          responseTabs.appendChild(tabHeaderRaw);
-          const tabBodyRaw = document.createElement('vscode-tab-panel');
-          tabBodyRaw.appendChild(createBodyField(body, true));
-          responseTabs.appendChild(tabBodyRaw);
-
-          responseContainer.appendChild(responseTabs);
-          containerResults.appendChild(responseContainer);
+        let bodyJson = undefined;
+        try {
+          bodyJson = JSON.parse(runData.body);
         } catch (error) {
-          done = date.now();
-          setCommonParts('Error', error.message);
+          // ignore
         }
 
+        containerResults.appendChild(document.createElement('vscode-divider'));
+        const responseContainer = document.createElement('div');
+        const responseHeader = document.createElement('h4');
+        responseHeader.innerText = 'Response';
+        responseContainer.appendChild(responseHeader);
+        responseContainer.appendChild(createCollapsible('Headers', createHeadersTable(runData.headers), true));
+
+        const responseTabs = document.createElement('vscode-tabs');
+        responseTabs.style = 'margin-top: 1rem;';
+
+        const tabHeaderParsed = document.createElement('vscode-tab-header');
+        tabHeaderParsed.slot = 'header';
+        tabHeaderParsed.innerText = 'Content';
+        responseTabs.appendChild(tabHeaderParsed);
+        const tabBodyParsed = document.createElement('vscode-tab-panel');
+        tabBodyParsed.appendChild(createBodyField(bodyJson ?? runData.body));
+        responseTabs.appendChild(tabBodyParsed);
+
+        const tabHeaderRaw = document.createElement('vscode-tab-header');
+        tabHeaderRaw.slot = 'header';
+        tabHeaderRaw.innerText = 'Raw';
+        responseTabs.appendChild(tabHeaderRaw);
+        const tabBodyRaw = document.createElement('vscode-tab-panel');
+        tabBodyRaw.appendChild(createBodyField(runData.body, true));
+        responseTabs.appendChild(tabBodyRaw);
+
+        responseContainer.appendChild(responseTabs);
+        containerResults.appendChild(responseContainer);
+
+        loadingWrapper.style.display = 'none';
+        containerResults.style.display = 'block';
+      }
+
+      const runError = (msg) => {
+        const statusContainer = document.createElement('div');
+        statusContainer.id = "status-container";
+        const statusSpan = document.createElement('span');
+        statusSpan.id = "status";
+        statusSpan.classList.add('error');
+        statusSpan.innerHTML = 'Error';
+        statusContainer.appendChild(statusSpan);
+
+        const button_run = document.createElement('vscode-button');
+        button_run.id = 'button-run';
+        button_run.setAttribute('icon', 'run');
+        button_run.innerText = 'Run again';
+        button_run.onclick = () => vscode.postMessage({channel: 'event', value: 'ready'});
+        statusContainer.appendChild(button_run);
+
+        const timeSpan = document.createElement('span');
+        timeSpan.innerHTML = ' ';
+        statusContainer.appendChild(timeSpan);
+
+        containerResults.appendChild(statusContainer);
+
+        containerResults.appendChild(document.createElement('vscode-divider'));
+        const errorMsgSpan = document.createElement('span');
+        errorMsgSpan.innerText = msg;
+        containerResults.appendChild(errorMsgSpan);
+
         loadingWrapper.style.display = 'none';
         containerResults.style.display = 'block';
       }
@@ -314,18 +313,30 @@ <h3 id="title-sub"></h3>
       // -----------------
       (function() {
         window.addEventListener('message', event => { 
-          vscode.postMessage({channel: 'log', value: `Message from host: ${JSON.stringify(event.data)}`});
           switch (event.data.channel) {
             case 'call-data':
               data = event.data.value;
               title.innerText = data.label;
               title_sub.innerHTML = `${data.method}&nbsp;&nbsp;&nbsp;${data.url}`;
-              run();
+              vscode.postMessage({channel: 'event', value: 'prepared'});
+              runStart();
+              break;
+
+            case 'run-success':
+              console.log(event.data);
+              // 'success' in this context only means the call succeeded, not that it was a 2xx status
+              runSuccess(event.data.value);
+              break;
+
+            case 'run-err':
+              console.error('Run failed: ' + event.data.channel);
+              vscode.postMessage({channel: 'err', value: `Run failed: ${event.data.value}`});
+              runError(event.data.value);
               break;
           
             default: 
               console.error('Unknown channel: ' + event.data.channel); 
-              vscode.postMessage({channel: 'err', value: `Unknwnown channel: ${event.data.channel}`});
+              vscode.postMessage({channel: 'err', value: `Unknwnown channel: ${event.data.channel}, data: ${JSON.stringify(event.data.value)}`});
               break;
           }
         });
diff --git a/src/CallRun.ts b/src/CallRun.ts
index deb0f62..15d3be8 100644
--- a/src/CallRun.ts
+++ b/src/CallRun.ts
@@ -1,13 +1,30 @@
 import {readFileSync} from 'fs';
+import http from 'http';
+import https from 'https';
 import path from 'path';
 import * as vscode from 'vscode';
-import RESTCall from './Call';
+import RESTCall, {JSONCallObject} from './Call';
 import RESTCall_Temporary from './Call-Temporary';
-import {replaceHtmlParts, replaceRessources} from './helpers/WebViewHelpers';
+import {replaceRessources} from './helpers/WebViewHelpers';
+import statusCodes from './helpers/statusCodes';
+
+interface CallResultData {
+  status: number
+  statusMessage: string
+  milliseconds: number
+  request: {
+    headers: JSONCallObject['headers']
+    body: string
+  }
+  headers: JSONCallObject['headers']
+  body: string
+}
 
 export class CallRun {
   constructor(
+    /** A reference to the Call / Temporary Call that owns this Run */
     call: RESTCall | RESTCall_Temporary,
+    /** Callback to execute when the run (webview) is destroyed */
     destructor: () => void
   ) {
     this.call = call;
@@ -21,7 +38,10 @@ export class CallRun {
         retainContextWhenHidden: true
       }
     );
-    this.webview.onDidDispose(this.destructor);
+    this.webview.onDidDispose(() => {
+      if (this.request) this.request.destroy();
+      this.destructor();
+    });
     this.webview.webview.onDidReceiveMessage(this.webviewReceiveMessage);
     if (call.identifier === 'call_temporary') {
       this.webview.webview.html = this.getHTML((call as RESTCall_Temporary).context);
@@ -37,25 +57,98 @@ export class CallRun {
   destructor: () => void;
   webview: vscode.WebviewPanel;
 
+  request: http.ClientRequest | undefined;
+  preparedData: JSONCallObject | undefined;
+
+  /**
+   * Prepares stored data to be used in run, eg. variable substitution
+   */
+  prepareRun = (): void => {
+    const createCachebuster = (url: string): string => {
+      let ret = '';
+      if (url.includes('?')) {
+        ret = `${url}&${Date.now().toString().substring(7)}`;
+      } else ret = `${url}?${Date.now().toString().substring(7)}`;
+      return ret;
+    };
+    this.preparedData = this.call.getJsonObject();
+    this.preparedData.auth = this.call.constructAuthHeader(this.preparedData.auth);
+    if (this.preparedData.auth) this.preparedData.headers.push({header: 'Authorization', value: this.preparedData.auth});
+    this.preparedData.headers = this.preparedData.headers.map((x) => ({header: x.header.toLowerCase(), value: this.call.transformVariableStrings(x.value)}));
+    this.preparedData.body = this.call.transformVariableStrings(this.preparedData.body);
+    this.preparedData.url = this.call.transformVariableStrings(this.preparedData.url);
+    if (this.call.bustCache) this.preparedData.url = createCachebuster(this.preparedData.url);
+    this.webviewSendMessage({channel: 'call-data', value: this.preparedData});
+  };
+
+  /**
+   * Creates an HTTP(S) request, runs it and provides parsed response data to the webview
+   */
   run = (): void => {
-    const data = this.call.getJsonObject();
-    data.auth = this.call.constructAuthHeader(data.auth);
-    data.body = this.call.transformVariableStrings(data.body);
-    data.headers = data.headers.map((x) => ({header: x.header, value: this.call.transformVariableStrings(x.value)}));
-    data.url = this.call.transformVariableStrings(data.url);
-    this.webviewSendMessage({channel: 'call-data', value: data});
+    if (!this.preparedData) return this.call.err('Prepared data empty on call. This is a bug.');
+    let start: number | undefined;
+    
+    const options: http.RequestOptions = {
+      method: this.preparedData.method,
+      auth: undefined,
+      headers: this.preparedData.headers.reduce((sum, cur) => {sum[cur.header] = cur.value; return sum;}, {} as Record<string, string>)
+    };
+    const callback = (res: http.IncomingMessage): void => {
+      const done = Date.now();
+      const ret: CallResultData = {
+        status: res.statusCode ?? -1,
+        statusMessage: statusCodes[res.statusCode ?? 0]?.message ?? '',
+        milliseconds: done - start!,
+        request: {
+          headers: this.preparedData!.headers,
+          body: this.preparedData!.body
+        },
+        headers: Object.entries(res.headers).map((h) => ({header: h[0], value: Array.isArray(h[1]) ? h[1].join(', ') : h[1] ?? ''})),
+        body: ''
+      };
+      res.setEncoding('utf8');
+      res.on('data', (chunk) => {if (typeof chunk === 'string') ret.body += chunk; return;});
+      res.on('end', () => this.webviewSendMessage({channel: 'run-success', value: ret}));
+    };
+
+    try {
+      if (this.preparedData?.url.startsWith('http://')) {
+        this.request = http.request(this.preparedData.url, options, callback);
+      } else {
+        this.request = https.request(this.preparedData.url, options, callback);
+      }
+
+      if (this.preparedData.body) this.request.write(this.preparedData.body);
+
+      this.request.on('error', (err) => this.webviewSendMessage({channel: 'run-err', value: err.message}));
+      start = Date.now();
+      this.request.end();
+    } catch (err) {
+      this.webviewSendMessage({channel: 'run-err', value: (err as Error).message});
+    }
   };
 
-  private webviewSendMessage = (message: any): void => {
-    this.log.appendLine(`Sending to webview run: ${JSON.stringify(message)}`);
+  /**
+   * Posts a message to the webview
+   * @param message channel: channel name; value: any serializable object
+   */
+  private webviewSendMessage = (message: {channel: string, value: any}): void => {
+    this.log.appendLine(`Sending to webview run: ${JSON.stringify(message.channel)}`);
     this.webview.webview.postMessage(message);
   };
+  /**
+   * Called when the webview posts a message. Param *should* adhere to the priciples set in `webviewSendMessage`, but
+   * this cannot be guaranteed.
+   */
   private webviewReceiveMessage = (message: any): void => {
-    this.log.appendLine(`Receiving from webview edit: ${JSON.stringify(message)}`);
+    this.log.appendLine(`Receiving from webview edit: ${JSON.stringify(message.channel)}`);
     switch (message.channel) {
       case 'event':
         switch (message.value) {
           case 'ready':
+            this.prepareRun();
+            break;
+          case 'prepared':
             this.run();
             break;
         }
@@ -73,10 +166,14 @@ export class CallRun {
     }
   };
 
+  /**
+   * Gets and prepares HTML to use for the webview
+   * @param context Context of the extension, used to generate paths
+   * @returns HTML
+   */
   private getHTML = (context: vscode.ExtensionContext): string => {
     let html = readFileSync(context.asAbsolutePath(path.join('src', 'CallRun.html')), 'utf-8');
     html = replaceRessources(html, this.webview.webview, context);
-    html = replaceHtmlParts(html, context);
     return html;
   };
 }
\ No newline at end of file
diff --git a/src/TreeDataProvider.ts b/src/TreeDataProvider.ts
index 43ba02b..211c30b 100644
--- a/src/TreeDataProvider.ts
+++ b/src/TreeDataProvider.ts
@@ -62,10 +62,10 @@ class TreeDataProvider implements vscode.TreeDataProvider<ListEntry>, vscode.Tre
     if (this.currentList.length === 0) {
       const stored = JSON.parse(existsSync(this.filepath) ? readFileSync(this.filepath, 'utf-8') : '[]') as IListEntryCore[];
       const transformed = stored.map((x) => x.contextValue === 'call' ? new RESTCall(this, x as JSONCallObject) : new Folder(this, x));
-      transformed.sort(ListEntry.sorter);
-      this.log.appendLine(`Read saved list: ${JSON.stringify(stored)}`);
+      this.log.appendLine(`Read saved list: ${JSON.stringify(stored.map((e) => e.identifier))}`);
       this.currentList = transformed;
     }
+    this.currentList.sort(ListEntry.sorter);
     if (element) {
       if (element.contextValue !== 'folder') return Promise.resolve([]);
       const ret = new Folder(this, element).getChildren();
diff --git a/src/helpers/WebViewHelpers.ts b/src/helpers/WebViewHelpers.ts
index 7e4237a..1c258dc 100644
--- a/src/helpers/WebViewHelpers.ts
+++ b/src/helpers/WebViewHelpers.ts
@@ -1,11 +1,7 @@
-import {readFileSync} from 'fs';
 import * as vscode from 'vscode';
 
 export const replaceRessources = (html: string, webview: vscode.Webview, context: vscode.ExtensionContext): string => html
     .replaceAll('{{vscode-elements}}', webview.asWebviewUri(vscode.Uri.file(context.asAbsolutePath('node_modules/@vscode-elements/elements/dist/bundled.js'))).toString())
     .replaceAll('{{vscode-codicon}}', webview.asWebviewUri(vscode.Uri.file(context.asAbsolutePath('node_modules/@vscode/codicons/dist/codicon.css'))).toString())
     .replaceAll('{{json-tree-js}}', webview.asWebviewUri(vscode.Uri.file(context.asAbsolutePath('src/helpers/jsontree.js'))).toString())
-    .replaceAll('{{json-tree-css}}', webview.asWebviewUri(vscode.Uri.file(context.asAbsolutePath('src/helpers/jsontree.css'))).toString());
-
-export const replaceHtmlParts = (html: string, context: vscode.ExtensionContext): string => html
-    .replaceAll('replace_statusCodes', readFileSync(context.asAbsolutePath('src/helpers/statusCodes.jspart'), 'utf-8'));
\ No newline at end of file
+    .replaceAll('{{json-tree-css}}', webview.asWebviewUri(vscode.Uri.file(context.asAbsolutePath('src/helpers/jsontree.css'))).toString());
\ No newline at end of file
diff --git a/src/helpers/statusCodes.jspart b/src/helpers/statusCodes.ts
similarity index 99%
rename from src/helpers/statusCodes.jspart
rename to src/helpers/statusCodes.ts
index 6cc9039..d7c5820 100644
--- a/src/helpers/statusCodes.jspart
+++ b/src/helpers/statusCodes.ts
@@ -1,4 +1,4 @@
-{
+export default {
   100: {
     code: 100,
     message: 'Continue',
@@ -424,4 +424,4 @@
     message: 'Network Read Timeout Error',
     description: 'Used by some HTTP proxies to signal a network read timeout behind the proxy to a client in front of the proxy.'
   }
-};
\ No newline at end of file
+} as {[Key in number]: {code: Key, message: string, description: string}};
\ No newline at end of file