Upgrade catalog explore editor to CodeMirror 6 with shared theme system

Replace the plain HTML textarea in the catalog explore SQL editor with a
full CodeMirror 6 instance featuring SQL syntax highlighting, line numbers,
bracket matching, and undo/redo history. Extract the duplicated Gruvpuccin
and Tokyo Night CM theme logic from sandbox-editor and synthesis-output
into a shared lib/cm-themes module so all three editors use the same
theme infrastructure and palette switching.

Author: sandboxws

dashboard/package.json

@@ -27,7 +27,7 @@
   ],
   "scripts": {
     "build": "vite build",
-    "build:static": "vite build && cp -r dist/ ../server/static/",
+    "build:static": "vite build && cp -r dist/ ../server/dashboard/",
     "dev": "vite --port 3001",
     "preview": "vite preview --port 3001",
     "lint": "biome check",
@@ -42,13 +42,14 @@
     "@codemirror/commands": "^6.10.3",
     "@codemirror/lang-javascript": "^6.2.5",
     "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-sql": "^6.10.0",
     "@codemirror/language": "^6.12.2",
     "@codemirror/state": "^6.6.0",
     "@codemirror/view": "^6.40.0",
+    "@flink-reactor/dsl": "0.1.8-rc.3",
     "@flink-reactor/instruments-ui": "workspace:*",
     "@flink-reactor/ui": "workspace:*",
     "@lezer/highlight": "^1.2.3",
-    "radix-ui": "^1.4.3",
     "@shikijs/core": "^4.0.2",
     "@shikijs/langs": "^4.0.2",
     "@shikijs/themes": "^4.0.2",
@@ -59,10 +60,10 @@
     "cmdk": "^1.1.1",
     "codemirror": "^6.0.2",
     "date-fns": "^4.1.0",
-    "@flink-reactor/dsl": "0.1.8-rc.3",
     "graphql": "^16.13.1",
     "lucide-react": "^0.563.0",
     "motion": "^12.36.0",
+    "radix-ui": "^1.4.3",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-icons": "^5.6.0",

dashboard/src/components/catalogs/explore-editor.tsx

@@ -1,42 +1,122 @@
 /**
  * @module explore-editor
  *
- * SQL editor textarea with run/cancel controls for the catalog explore page.
+ * CodeMirror 6 SQL editor with run/cancel controls for the catalog explore page.
  * Reads SQL text and execution status from {@link useCatalogExploreStore}.
- * Supports Cmd+Enter keyboard shortcut to execute queries.
+ * Supports Cmd+Enter keyboard shortcut to execute queries. Uses the same
+ * Gruvpuccin / Tokyo Night theme system as the sandbox editor.
  */
 
+import { defaultKeymap, history, historyKeymap } from "@codemirror/commands"
+import { sql } from "@codemirror/lang-sql"
+import { bracketMatching } from "@codemirror/language"
+import { EditorState } from "@codemirror/state"
+import {
+  EditorView,
+  highlightActiveLine,
+  keymap,
+  lineNumbers,
+  placeholder,
+} from "@codemirror/view"
 import { Button, Spinner } from "@flink-reactor/ui"
 import { Play, Square } from "lucide-react"
-import { useCallback } from "react"
+import { useEffect, useRef } from "react"
+import {
+  createThemeCompartment,
+  getActiveTheme,
+  useCmPaletteObserver,
+} from "@/lib/cm-themes"
 import { useCatalogExploreStore } from "@/stores/catalog-explore-store"
 
+const themeCompartment = createThemeCompartment()
+
 /**
  * SQL editor with status indicator, run button, and cancel button.
  *
  * Displays the current query status (idle, submitting, running, completed,
- * failed, cancelled) in the toolbar. The textarea supports Cmd+Enter to
- * execute and auto-disables controls while a query is in flight.
+ * failed, cancelled) in the toolbar. The CodeMirror editor supports
+ * Cmd+Enter to execute and syncs with the catalog explore store.
  */
 export function ExploreEditor() {
-  const sql = useCatalogExploreStore((s) => s.sql)
+  const sql$ = useCatalogExploreStore((s) => s.sql)
   const setSql = useCatalogExploreStore((s) => s.setSql)
   const status = useCatalogExploreStore((s) => s.status)
   const executeQuery = useCatalogExploreStore((s) => s.executeQuery)
   const cancelQuery = useCatalogExploreStore((s) => s.cancelQuery)
 
   const isRunning = status === "submitting" || status === "running"
 
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
-        e.preventDefault()
-        if (isRunning) return
-        executeQuery()
-      }
-    },
-    [executeQuery, isRunning],
-  )
+  const containerRef = useRef<HTMLDivElement>(null)
+  const viewRef = useRef<EditorView | null>(null)
+  const setSqlRef = useRef(setSql)
+  const executeQueryRef = useRef(executeQuery)
+  const isRunningRef = useRef(isRunning)
+
+  setSqlRef.current = setSql
+  executeQueryRef.current = executeQuery
+  isRunningRef.current = isRunning
+
+  // Create the CodeMirror editor on mount
+  useEffect(() => {
+    if (!containerRef.current) return
+
+    const state = EditorState.create({
+      doc: sql$,
+      extensions: [
+        lineNumbers(),
+        highlightActiveLine(),
+        bracketMatching(),
+        history(),
+        sql(),
+        placeholder("SELECT * FROM ..."),
+        themeCompartment.of(getActiveTheme()),
+        keymap.of([
+          ...defaultKeymap,
+          ...historyKeymap,
+          {
+            key: "Mod-Enter",
+            run: () => {
+              if (isRunningRef.current) return true
+              executeQueryRef.current()
+              return true
+            },
+          },
+        ]),
+        EditorView.updateListener.of((update) => {
+          if (update.docChanged) {
+            setSqlRef.current(update.state.doc.toString())
+          }
+        }),
+      ],
+    })
+
+    const view = new EditorView({
+      state,
+      parent: containerRef.current,
+    })
+
+    viewRef.current = view
+
+    return () => {
+      view.destroy()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  // Sync external value changes (e.g. template selector)
+  useEffect(() => {
+    const view = viewRef.current
+    if (!view) return
+    const current = view.state.doc.toString()
+    if (current !== sql$) {
+      view.dispatch({
+        changes: { from: 0, to: current.length, insert: sql$ },
+      })
+    }
+  }, [sql$])
+
+  // Watch for palette changes and reconfigure the theme compartment
+  useCmPaletteObserver(viewRef, themeCompartment)
 
   return (
     <div className="glass-card overflow-hidden">
@@ -81,21 +161,17 @@ export function ExploreEditor() {
             size="sm"
             variant="outline"
             onClick={executeQuery}
-            disabled={isRunning || !sql.trim()}
+            disabled={isRunning || !sql$.trim()}
             className="h-7 gap-1.5 text-xs"
           >
             {isRunning ? <Spinner size="sm" /> : <Play className="size-3" />}
             Run
           </Button>
         </div>
       </div>
-      <textarea
-        value={sql}
-        onChange={(e) => setSql(e.target.value)}
-        onKeyDown={handleKeyDown}
-        placeholder="SELECT * FROM ..."
-        spellCheck={false}
-        className="h-32 w-full resize-y bg-transparent p-3 font-mono text-sm text-zinc-200 placeholder:text-zinc-600 focus:outline-none"
+      <div
+        ref={containerRef}
+        className="[&_.cm-editor]:min-h-32 [&_.cm-editor]:outline-none [&_.cm-scroller]:max-h-96 [&_.cm-scroller]:overflow-y-auto"
       />
     </div>
   )

dashboard/src/components/sandbox/sandbox-editor.tsx

@@ -13,7 +13,6 @@ import { defaultKeymap, history, historyKeymap } from "@codemirror/commands"
 import { javascript } from "@codemirror/lang-javascript"
 import { bracketMatching } from "@codemirror/language"
 import {
-  Compartment,
   EditorState,
   RangeSet,
   StateEffect,
@@ -41,8 +40,11 @@ import {
   focusHighlightField,
   setFocusLines,
 } from "./focus-highlight"
-import { gruvpuccinCmTheme } from "./themes/gruvpuccin-cm-theme"
-import { tokyoNightCmTheme } from "./themes/tokyo-night-cm-theme"
+import {
+  createThemeCompartment,
+  getActiveTheme,
+  useCmPaletteObserver,
+} from "@/lib/cm-themes"
 
 // ---------------------------------------------------------------------------
 // Gutter marker classes — each instance carries its diagnostic message
@@ -273,14 +275,7 @@ interface SandboxEditorProps {
   focusComponents?: string[] | null
 }
 
-const themeCompartment = new Compartment()
-
-function getActiveTheme() {
-  if (typeof document === "undefined") return gruvpuccinCmTheme
-  return document.documentElement.dataset.palette === "tokyo-night"
-    ? tokyoNightCmTheme
-    : gruvpuccinCmTheme
-}
+const themeCompartment = createThemeCompartment()
 
 /**
  * CodeMirror editor with TSX/JSX support, DSL autocompletion, diagnostic
@@ -407,22 +402,7 @@ export function SandboxEditor({
   }, [focusComponents])
 
   // Watch for palette changes and reconfigure the theme compartment
-  useEffect(() => {
-    const observer = new MutationObserver(() => {
-      const view = viewRef.current
-      if (!view) return
-      view.dispatch({
-        effects: themeCompartment.reconfigure(getActiveTheme()),
-      })
-    })
-
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ["data-palette"],
-    })
-
-    return () => observer.disconnect()
-  }, [])
+  useCmPaletteObserver(viewRef, themeCompartment)
 
   return (
     <div

dashboard/src/components/sandbox/synthesis-output.tsx

@@ -6,7 +6,7 @@ import {
   foldGutter,
   foldService,
 } from "@codemirror/language"
-import { Compartment, EditorState } from "@codemirror/state"
+import { EditorState } from "@codemirror/state"
 import { EditorView, lineNumbers } from "@codemirror/view"
 import {
   Button,
@@ -40,21 +40,17 @@ import {
   setFocusLines,
 } from "./focus-highlight"
 import { SynthInspector } from "./synth-inspector"
-import { gruvpuccinCmTheme } from "./themes/gruvpuccin-cm-theme"
-import { tokyoNightCmTheme } from "./themes/tokyo-night-cm-theme"
+import {
+  createThemeCompartment,
+  getActiveTheme,
+  useCmPaletteObserver,
+} from "@/lib/cm-themes"
 
 // ---------------------------------------------------------------------------
 // Read-only CodeMirror viewer
 // ---------------------------------------------------------------------------
 
-const themeCompartment = new Compartment()
-
-function getActiveTheme() {
-  if (typeof document === "undefined") return gruvpuccinCmTheme
-  return document.documentElement.dataset.palette === "tokyo-night"
-    ? tokyoNightCmTheme
-    : gruvpuccinCmTheme
-}
+const themeCompartment = createThemeCompartment()
 
 /**
  * Fold service that tells CM6 where CREATE TABLE folds are possible.
@@ -255,22 +251,7 @@ function CodeViewer({
   ])
 
   // Watch for palette changes
-  useEffect(() => {
-    const observer = new MutationObserver(() => {
-      const view = viewRef.current
-      if (!view) return
-      view.dispatch({
-        effects: themeCompartment.reconfigure(getActiveTheme()),
-      })
-    })
-
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ["data-palette"],
-    })
-
-    return () => observer.disconnect()
-  }, [])
+  useCmPaletteObserver(viewRef, themeCompartment)
 
   return (
     <div

…ts/sandbox/themes/gruvpuccin-cm-theme.ts …src/lib/cm-themes/gruvpuccin-cm-theme.tsdashboard/src/components/sandbox/themes/gruvpuccin-cm-theme.ts renamed to dashboard/src/lib/cm-themes/gruvpuccin-cm-theme.ts dashboard/src/components/sandbox/themes/gruvpuccin-cm-theme.ts renamed to dashboard/src/lib/cm-themes/gruvpuccin-cm-theme.ts

@@ -0,0 +1,7 @@
+export { gruvpuccinCmTheme } from "./gruvpuccin-cm-theme"
+export { tokyoNightCmTheme } from "./tokyo-night-cm-theme"
+export {
+  createThemeCompartment,
+  getActiveTheme,
+  useCmPaletteObserver,
+} from "./use-cm-theme"

dashboard/src/lib/cm-themes/index.ts

@@ -0,0 +1,42 @@
+import { Compartment } from "@codemirror/state"
+import type { EditorView } from "@codemirror/view"
+import { useEffect } from "react"
+import { gruvpuccinCmTheme } from "./gruvpuccin-cm-theme"
+import { tokyoNightCmTheme } from "./tokyo-night-cm-theme"
+
+/** Returns the CodeMirror theme matching the current palette. */
+export function getActiveTheme() {
+  if (typeof document === "undefined") return gruvpuccinCmTheme
+  return document.documentElement.dataset.palette === "tokyo-night"
+    ? tokyoNightCmTheme
+    : gruvpuccinCmTheme
+}
+
+/** Factory — each EditorState needs its own Compartment instance. */
+export function createThemeCompartment() {
+  return new Compartment()
+}
+
+/**
+ * Observes `data-palette` mutations on `<html>` and reconfigures
+ * the given theme compartment on the referenced EditorView.
+ */
+export function useCmPaletteObserver(
+  viewRef: React.RefObject<EditorView | null>,
+  themeCompartment: Compartment,
+) {
+  useEffect(() => {
+    const observer = new MutationObserver(() => {
+      const view = viewRef.current
+      if (!view) return
+      view.dispatch({
+        effects: themeCompartment.reconfigure(getActiveTheme()),
+      })
+    })
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-palette"],
+    })
+    return () => observer.disconnect()
+  }, [viewRef, themeCompartment])
+}