first functionable

src/components/ResponsePanel.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRequestStore } from '../stores/requestStore';
+import { Codemirror } from 'vue-codemirror';
+import { json } from '@codemirror/lang-json';
+import { oneDark } from '@codemirror/theme-one-dark';
+import { EditorView } from '@codemirror/view';
+
+const store = useRequestStore();
+
+const extensions = [json(), oneDark, EditorView.editable.of(false)];
+
+const formattedBody = computed(() => {
+    if (!store.activeRequest.response) return '';
+    try {
+        // Auto pretty print
+        return JSON.stringify(JSON.parse(store.activeRequest.response.body), null, 2);
+    } catch (e) {
+        return store.activeRequest.response.body;
+    }
+});
+
+const statusColor = computed(() => {
+    const s = store.activeRequest.response?.status || 0;
+    if (s >= 200 && s < 300) return 'text-emerald-400';
+    if (s >= 400) return 'text-rose-400';
+    return 'text-amber-400';
+});
+</script>
+
+<template>
+  <div class="flex flex-col h-full border-t border-slate-800 bg-slate-900">
+    <div v-if="store.activeRequest.response" class="flex flex-col h-full">
+        <!-- Meta Bar -->
+        <div class="px-4 py-2 border-b border-slate-800 flex gap-4 text-xs items-center bg-slate-950/50">
+            <div class="font-mono">
+                Status: <span :class="['font-bold', statusColor]">{{ store.activeRequest.response.status }}</span>
+            </div>
+            <div class="text-slate-500">
+                Time: <span class="text-slate-300">{{ store.activeRequest.response.time }}ms</span>
+            </div>
+            <div class="text-slate-500">
+                Size: <span class="text-slate-300">{{ (store.activeRequest.response.size / 1024).toFixed(2) }} KB</span>
+            </div>
+        </div>
+        
+        <!-- Output -->
+        <div class="flex-1 overflow-hidden">
+            <Codemirror
+                :model-value="formattedBody"
+                :style="{ height: '100%' }"
+                :extensions="extensions"
+            />
+        </div>
+    </div>
+    <div v-else class="flex-1 flex items-center justify-center text-slate-600 text-sm">
+        No response yet
+    </div>
+  </div>
+</template>