feat(code-editor): add a CodeMirror-based code and merge editor [1/21]

package.json

@@ -29,7 +29,17 @@
     "node": "^20"
   },
   "dependencies": {
+    "@codemirror/commands": "^6.11.1",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-yaml": "^6.1.3",
+    "@codemirror/language": "^6.12.4",
+    "@codemirror/lint": "^6.9.7",
+    "@codemirror/merge": "^6.12.2",
+    "@codemirror/search": "^6.7.2",
+    "@codemirror/state": "^6.7.6",
+    "@codemirror/view": "^6.43.13",
     "@heroicons/vue": "^2.2.0",
+    "@lezer/highlight": "^1.2.5",
     "@tailwindcss/vite": "^4.1.14",
     "@types/chart.js": "^2.9.41",
     "@vueuse/core": "^13.5.0",
@@ -41,6 +51,7 @@
     "chartjs-adapter-luxon": "^1.3.1",
     "date-fns": "^4.1.0",
     "decamelize-keys": "^2.0.1",
+    "js-yaml": "^4.3.2",
     "luxon": "^3.7.2",
     "pinia": "^2.3.1",
     "pinia-plugin-persistedstate": "^3.2.3",
@@ -58,6 +69,7 @@
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.19",
     "@tsconfig/node20": "^20.1.6",
+    "@types/js-yaml": "^4.0.9",
     "@types/jsdom": "^21.1.7",
     "@types/node": "^20.19.19",
     "@vitejs/plugin-vue": "^5.2.4",

src/components/agents/config/__tests__/codeEditorMock.ts

@@ -0,0 +1,30 @@
+// Synchronous stand-ins for the async CodeMirror components (@/components/code-editor).
+// Usage in a spec: vi.mock('@/components/code-editor', () => import('./codeEditorMock'));
+import { defineComponent, h } from 'vue';
+
+export const CodeEditor = defineComponent({
+  name: 'CodeEditor',
+  props: ['modelValue', 'readonly', 'language', 'diagnostics', 'label'],
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
+    return () =>
+      h('textarea', {
+        class: 'code-editor-stub',
+        'data-language': props.language,
+        'data-diagnostics': JSON.stringify(props.diagnostics ?? []),
+        readonly: props.readonly,
+        value: props.modelValue,
+        onInput: (e: Event) =>
+          emit('update:modelValue', (e.target as HTMLTextAreaElement).value),
+      });
+  },
+});
+
+export const CodeMergeView = defineComponent({
+  name: 'CodeMergeView',
+  props: ['original', 'modified', 'language', 'mode'],
+  setup(props) {
+    return () =>
+      h('div', { class: 'merge-stub' }, `${props.original}|${props.modified}`);
+  },
+});