fix: wire response + init error handling

components/http/Headers.vue

@@ -49,9 +49,9 @@
         :spellcheck="false"
         :value="header.key"
         autofocus
-        @change="
+        @input="
           updateHeader(index, {
-            key: $event.target.value,
+            key: $event,
             value: header.value,
             active: header.active,
           })

components/http/Response.vue

@@ -1,6 +1,6 @@
 <template>
   <AppSection label="response">
-    <HttpResponseMeta v-if="!loading" :response="response" />
+    <HttpResponseMeta :response="response" />
     <LensesResponseBodyRenderer v-if="!loading" :response="response" />
   </AppSection>
 </template>

components/http/ResponseMeta.vue

@@ -1,33 +1,39 @@
 <template>
-  <div
-    class="
-      flex
-      sticky
-      top-0
-      z-10
-      bg-primary
-      items-center
-      p-4
-      font-mono font-semibold
-      space-x-8
-    "
-  >
-    <i v-if="response.type === 'loading'" class="animate-spin material-icons">
-      refresh
-    </i>
-    <div v-else :class="statusCategory.className">
-      <span v-if="response.statusCode">
-        <span class="text-secondaryDark"> Status: </span>
-        {{ response.statusCode || $t("waiting_send_req") }}
-      </span>
-      <span v-if="response.meta.responseDuration" class="text-xs">
-        <span class="text-secondaryDark"> Time: </span>
-        {{ `${response.meta.responseDuration} ms` }}
-      </span>
-      <span v-if="response.meta.responseSize" class="text-xs">
-        <span class="text-secondaryDark"> Size: </span>
-        {{ `${response.meta.responseSize} B` }}
-      </span>
+  <div>
+    <span v-if="response == null">
+      {{ $t("waiting_send_req") }}
+    </span>
+    <div
+      v-else
+      class="
+        flex
+        sticky
+        top-0
+        z-10
+        bg-primary
+        items-center
+        p-4
+        font-mono font-semibold
+        space-x-8
+      "
+    >
+      <i v-if="response.type === 'loading'" class="animate-spin material-icons">
+        refresh
+      </i>
+      <div v-else :class="statusCategory.className">
+        <span v-if="response.statusCode">
+          <span class="text-secondaryDark"> Status: </span>
+          {{ response.statusCode || $t("waiting_send_req") }}
+        </span>
+        <span v-if="response.meta.responseDuration" class="text-xs">
+          <span class="text-secondaryDark"> Time: </span>
+          {{ `${response.meta.responseDuration} ms` }}
+        </span>
+        <span v-if="response.meta.responseSize" class="text-xs">
+          <span class="text-secondaryDark"> Size: </span>
+          {{ `${response.meta.responseSize} B` }}
+        </span>
+      </div>
     </div>
   </div>
 </template>