feat: integrate Monaco Editor for enhanced code editing experience and add dark mode support

Author: maesse

frontend/package-lock.json

@@ -18,8 +18,9 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@tailwindcss/vite": "^4.1.16",
+    "@guolao/vue-monaco-editor": "^1.6.0",
     "@mdi/font": "^7.4.47",
+    "@tailwindcss/vite": "^4.1.16",
     "date-fns": "^4.1.0",
     "pinia": "^3.0.3",
     "tailwindcss": "^4.1.16",
@@ -39,14 +40,15 @@
     "eslint-plugin-oxlint": "~1.23.0",
     "eslint-plugin-vue": "~10.5.0",
     "jiti": "^2.6.1",
+    "monaco-editor": "^0.54.0",
     "npm-run-all2": "^8.0.4",
     "oxlint": "~1.23.0",
     "prettier": "3.6.2",
-    "typescript": "~5.9.0",
     "sass": "^1.79.0",
+    "typescript": "~5.9.0",
     "vite": "npm:rolldown-vite@latest",
-    "vite-plugin-vuetify": "^2.0.3",
     "vite-plugin-vue-devtools": "^8.0.3",
+    "vite-plugin-vuetify": "^2.0.3",
     "vue-tsc": "^3.1.1"
   }
 }

frontend/package.json

@@ -1,19 +1,23 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { useTheme } from 'vuetify'
+import { useApiStore } from './stores/apiStore'
 
 const theme = useTheme()
 // Initialize from system preference
 if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
   theme.global.name.value = 'dark'
+  useApiStore().darkMode = theme.global.name.value === 'dark'
 }
 // Listen to system changes
 const media = window.matchMedia?.('(prefers-color-scheme: dark)')
 media?.addEventListener('change', (e) => {
   theme.global.name.value = e.matches ? 'dark' : 'light'
+  useApiStore().darkMode = theme.global.name.value === 'dark'
 })
 function toggleTheme() {
   theme.global.name.value = theme.global.name.value === 'dark' ? 'light' : 'dark'
+  useApiStore().darkMode = theme.global.name.value === 'dark'
 }
 // Full inbound URL (proxied in dev, same origin in prod)
 const inboundUrl = computed(() => `${location.origin}/inbound`)

frontend/src/App.vue

@@ -7,6 +7,7 @@ import router from './router'
 import 'vuetify/styles'
 import { createVuetify } from 'vuetify'
 import { aliases, mdi } from 'vuetify/iconsets/mdi'
+import { install as VueMonacoEditorPlugin } from '@guolao/vue-monaco-editor'
 import '@mdi/font/css/materialdesignicons.css'
 
 const vuetify = createVuetify({
@@ -23,11 +24,14 @@ const vuetify = createVuetify({
     sets: { mdi },
   },
 })
-
 const app = createApp(App)
 
 app.use(createPinia())
 app.use(router)
 app.use(vuetify)
-
+app.use(VueMonacoEditorPlugin, {
+  paths: {
+    vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@latest/min/vs',
+  },
+})
 app.mount('#app')

frontend/src/main.ts

@@ -57,6 +57,7 @@ export const useApiStore = defineStore('api', () => {
   const isLoadingList = ref(false)
   const selectedLoadingId = ref<number | null>(null)
   const isWsConnected = ref(false)
+  const darkMode = ref(false)
 
   async function updateRequestList() {
     console.log('[api] updateRequestList: start')
@@ -208,5 +209,6 @@ export const useApiStore = defineStore('api', () => {
     isLoadingList,
     selectedLoadingId,
     isWsConnected,
+    darkMode,
   }
 })

frontend/src/stores/apiStore.ts

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue'
+import { ref, computed, watch, shallowRef } from 'vue'
 import { useApiStore } from '@/stores/apiStore'
+import type * as monaco from 'monaco-editor'
 import { formatISO9075 } from 'date-fns'
 const apiStore = useApiStore()
 apiStore.updateRequestList()
@@ -10,6 +11,23 @@ apiStore.connectWS()
 const headersOpen = ref(true)
 const headerCount = computed(() => Object.keys(apiStore.selectedRequest?.headers || {}).length)
 
+const MONACO_EDITOR_OPTIONS = {
+  automaticLayout: true,
+}
+// watch(
+//   () => apiStore.darkMode,
+//   (newVal) => {
+//     console.log('Theme changed:', newVal)
+//     if (monacoIns.value) {
+//       console.log(monacoIns.value)
+//       ;(monacoIns.value as any).editor.setTheme(newVal ? 'vs-dark' : 'vs')
+//     }
+//     // if (editor.value) {
+//     //   editor.value.updateOptions({ theme: newVal ? 'vs-dark' : 'vs' })
+//     // }
+//   },
+// )
+
 // Authorization reveal toggle
 const showAuth = ref(false)
 watch(
@@ -59,6 +77,37 @@ function decodeBasicAuth(value: string): { isBasic: boolean; user?: string; pass
     return { isBasic: false }
   }
 }
+
+const editor = shallowRef<monaco.editor.IStandaloneCodeEditor>()
+const monacoIns = shallowRef<unknown>()
+function handleMount(monacoEditor: monaco.editor.IStandaloneCodeEditor, monacoInstance: unknown) {
+  editor.value = monacoEditor
+  monacoIns.value = monacoInstance
+}
+
+// Derive Monaco language from Content-Type header
+function detectLanguageFromContentType(ct?: string | null): string {
+  if (!ct) return 'plaintext'
+  const base = ct.split(';')[0]?.trim().toLowerCase() || ''
+  // Broad matches first
+  if (base.includes('json')) return 'json'
+  if (base.includes('xml')) return 'xml'
+  if (base.includes('html')) return 'html'
+  if (base.includes('markdown')) return 'markdown'
+  if (base.includes('yaml') || base.endsWith('/yml')) return 'yaml'
+  if (base.includes('javascript') || base.endsWith('/js')) return 'javascript'
+  if (base.includes('typescript') || base.endsWith('/ts')) return 'typescript'
+  if (base.includes('css')) return 'css'
+  if (base.includes('sql')) return 'sql'
+  if (base.includes('form-urlencoded')) return 'plaintext'
+  if (base.startsWith('text/')) return 'plaintext'
+  return 'plaintext'
+}
+
+const monacoLanguage = computed(() => {
+  const ct = apiStore.selectedRequest?.headers?.['content-type']
+  return detectLanguageFromContentType(ct)
+})
 </script>
 
 <template>
@@ -149,7 +198,7 @@ function decodeBasicAuth(value: string): { isBasic: boolean; user?: string; pass
       </v-card>
     </div>
     <!-- Main Content -->
-    <div class="flex-1 p-4 pane-scroll">
+    <div class="flex-1 p-4" style="height: 100%">
       <v-fade-transition v-if="apiStore.selectedRequest" mode="out-in">
         <v-card
           density="compact"
@@ -426,25 +475,22 @@ function decodeBasicAuth(value: string): { isBasic: boolean; user?: string; pass
                   >
                 </template>
               </p>
+
               <v-sheet
                 :elevation="2"
                 border
                 rounded
                 class="font-mono pa-2 text-xs rounded mb-2"
                 tag="pre"
-                >{{ apiStore.selectedRequest.body_text }}</v-sheet
               >
-              <template v-if="apiStore.selectedRequest.body_bytes_b64">
-                <p><strong>Body (Base64):</strong></p>
-                <v-sheet
-                  :elevation="2"
-                  border
-                  rounded
-                  class="font-mono pa-2 text-xs rounded mb-2"
-                  tag="pre"
-                  >{{ apiStore.selectedRequest.body_bytes_b64 }}</v-sheet
-                >
-              </template>
+                <vue-monaco-editor
+                  v-model:value="apiStore.selectedRequest.body_text"
+                  :theme="apiStore.darkMode ? 'vs-dark' : 'vs'"
+                  :language="monacoLanguage"
+                  :options="MONACO_EDITOR_OPTIONS"
+                  style="min-height: 300px"
+                  @mount="handleMount"
+              /></v-sheet>
             </template>
           </div>
         </v-card>