refactor(sql): migrate SQL editor from Monaco to CodeMirror 6

Replace Monaco with @uiw/react-codemirror + @codemirror/lang-sql for the
SQL workspace editor. Schema-aware, alias-aware completion driven by the
catalog tree; catalog arrow notation (catalog=>table) suggestions; Tab to
accept, Mod-Enter to run, Shift-Alt-f / Format via sql-formatter; light/dark
themes from design tokens. Replace the layout useEffect with a callback ref.

Dedupe @codemirror/* via package.json overrides to fix duplicate
@codemirror/state instances. Drop the Monaco SQL language registration and
the monaco-editor sql module shim; Monaco stays for the YAML/TS surfaces.

Author: c-julin

frontend/bun.lock

@@ -63,12 +63,18 @@
     "@chakra-ui/portal": "^2.1",
     "@chakra-ui/react-use-disclosure": "^2.1",
     "@chakra-ui/system": "^2.1",
+    "@codemirror/autocomplete": "^6.20.3",
+    "@codemirror/lang-sql": "^6.10.0",
+    "@codemirror/language": "^6.12.3",
+    "@codemirror/state": "^6.6.0",
+    "@codemirror/view": "^6.43.1",
     "@connectrpc/connect": "^2.1.0",
     "@connectrpc/connect-query": "^2.2.0",
     "@connectrpc/connect-web": "^2.1.0",
     "@emotion/css": "^11.13.5",
     "@hookform/resolvers": "^5.2.2",
     "@icons-pack/react-simple-icons": "^13.8.0",
+    "@lezer/highlight": "^1.2.3",
     "@milkdown/kit": "^7.18.0",
     "@milkdown/react": "^7.18.0",
     "@modelcontextprotocol/sdk": "^1.29.0",
@@ -86,6 +92,7 @@
     "@tanstack/react-virtual": "^3.13.12",
     "@tanstack/zod-adapter": "^1.167.0",
     "@types/prismjs": "^1.26.5",
+    "@uiw/react-codemirror": "^4.25.10",
     "@xyflow/react": "^12.9.2",
     "ai": "^6.0.168",
     "array-move": "^4.0.0",
@@ -200,6 +207,13 @@
     "vitest-browser-react": "^2.2.0"
   },
   "overrides": {
+    "@codemirror/autocomplete": "^6.20.3",
+    "@codemirror/commands": "^6.10.3",
+    "@codemirror/language": "^6.12.3",
+    "@codemirror/lint": "^6.9.7",
+    "@codemirror/search": "^6.7.0",
+    "@codemirror/state": "^6.6.0",
+    "@codemirror/view": "^6.43.1",
     "dompurify": "^3.4.0",
     "prismjs": "^1.30.0",
     "baseline-browser-mapping": "2.10.33"

frontend/package.json

@@ -186,7 +186,7 @@ export default defineConfig({
           semicolons: true,
         }),
         new MonacoWebpackPlugin({
-          languages: ['yaml', 'json', 'typescript', 'javascript', 'protobuf', 'sql'],
+          languages: ['yaml', 'json', 'typescript', 'javascript', 'protobuf'],
           customLanguages: [
             {
               label: 'yaml',

frontend/rsbuild.config.ts

@@ -15,8 +15,9 @@ import { beforeEach, describe, expect, test, vi } from 'vitest';
 import { SqlEditor } from './sql-editor';
 import type { SqlRole } from './sql-types';
 
-// Monaco doesn't run in jsdom; the editor surface is exercised manually/e2e.
-vi.mock('components/misc/kowl-editor', () => ({
+// CodeMirror's layout/measure loop doesn't run in jsdom; the editor surface is
+// exercised manually/e2e.
+vi.mock('@uiw/react-codemirror', () => ({
   default: ({ value }: { value: string }) => <div data-testid="editor">{value}</div>,
 }));
 
@@ -27,7 +28,7 @@ const QUERY_2_TAB = /Query 2/;
 const RUN_BUTTON = /Run (Ctrl|⌘)/;
 
 const renderEditor = (onRun = vi.fn()) => {
-  render(<SqlEditor identifiers={[]} initialQuery="SELECT 1;" onRun={onRun} role={ADMIN} />);
+  render(<SqlEditor catalogs={[]} initialQuery="SELECT 1;" onRun={onRun} role={ADMIN} />);
   return onRun;
 };