diff --git a/CHANGELOG.md b/CHANGELOG.md
index d7edd463..9994316a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,29 @@ auto-generated per-PR notes; this file is the curated, human-readable history.
 ## [Unreleased]
 
 ### Changed
+- **The SQL editor is now CodeMirror 6** (#21) — the deliberate 4th bundled
+  runtime dependency, replacing the hand-rolled textarea editor wholesale
+  behind the #143 `EditorPort` seam (`src/editor/codemirror-adapter.js`;
+  `main.js` swaps one injected factory). What changes for users: **per-tab
+  undo history** (the shared textarea undo stack couldn't do this), real
+  IME/touch editing, CM6's find/replace panel (`⌘F`), and measured-text
+  rendering (no more fixed-glyph-width geometry). Highlighting still tracks
+  the connected server's `system.keywords`/`functions` — the sets now feed a
+  ClickHouse `SQLDialect` swapped via a Compartment on connect — and
+  completion keeps the pure `core/completions.js` candidate set + ranking
+  (CM6 renders the UI; `filter: false` preserves our order). Global shortcuts
+  (`⌘↵` run, `⌘⇧↵` format, `⌘S`/`⌘⇧S`) stay on the document handler — CM6's
+  conflicting `Mod-Enter` binding is stripped so an open completion can never
+  swallow the run chord. Deleted with the cutover: the textarea adapter,
+  `editor-complete/intel/search`, `core/editor-{marks,geometry,brackets,search}`
+  and the `maskLiterals`-based literal masking (~2,600 LOC incl. tests) —
+  execCommand undo, four-way scroll sync, and the editor's `html{zoom}`
+  popover bridging all go with them. Signature help is dropped in this parity
+  v0 (#60 rebuilds docs properly); function docs show as the completion info
+  tooltip and on hover. Bundle: **+402,911 B raw (+83%) / +132,903 B gzip
+  (+85%)** (484,674 → 887,585 raw; 155,810 → 288,713 gzip) — over the issue's
+  raw estimate, accepted at the plan gate as the price of the Phase-4 editor
+  foundation (#84 schema-aware autocomplete builds directly on this).
 - **The SQL editor now sits behind an injected `EditorPort` seam** (#143): the
   hand-rolled textarea editor moved from `src/ui/` to `src/editor/` and is the
   first adapter (`createTextareaEditor`) of a small port interface
diff --git a/CLAUDE.md b/CLAUDE.md
index c8c0ef3f..1e5f63c4 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -1,7 +1,7 @@
 # Contributor guide — altinity-sql-browser
 
 A modular ES-module SPA that builds to one self-contained HTML file served from
-ClickHouse. No framework; runtime deps are rare and deliberate (currently three,
+ClickHouse. No framework; runtime deps are rare and deliberate (currently four,
 all bundled — see hard rule 4). Quality is held by tests.
 
 ## Hard rules
@@ -25,7 +25,8 @@ all bundled — see hard rule 4). Quality is held by tests.
    (see README "Configuring OAuth").
 4. **The build is esbuild only; runtime deps are rare and deliberate.** Source
    files are the tested files; esbuild bundles `src/main.js` → `dist/sql.html`.
-   There are **three** bundled runtime dependencies — **Chart.js** (the Chart
+   There are **four** bundled runtime dependencies — **CodeMirror 6** (the SQL
+   editor, behind the `EditorPort` seam — #21), **Chart.js** (the Chart
    result view), **@dagrejs/dagre** (the EXPLAIN pipeline-graph layout), and
    **@preact/signals-core** (the reactivity primitive — see
    `docs/ADR-0001-reactivity.md`) — all inlined into the artifact, so the page
@@ -35,8 +36,10 @@ all bundled — see hard rule 4). Quality is held by tests.
    keep the testable logic pure in `src/core/` (chart axis/role/pivot math in
    `src/core/chart-data.js`; DOT→positions in `src/core/dot-layout.js`, both
    100%-covered) and make the library call an **injected seam** (`app.Chart` /
-   `app.Dagre`, like the fetch/crypto seams) so the DOM wrapper stays fully tested
-   rather than dropping below the coverage gate.
+   `app.Dagre` / `env.Editor`, like the fetch/crypto seams) so the DOM wrapper
+   stays fully tested rather than dropping below the coverage gate. (The CM6
+   adapter is the port-shaped variant: the *factory* is injected, and the
+   adapter is unit-tested against the real library under happy-dom.)
 5. **No UI framework; signals for state, imperative adapters for islands.** State
    reactivity is `@preact/signals-core` (`signal`/`effect`/`computed`/`batch`),
    migrated slice-by-slice (ADR-0001). **No React/Preact/Solid** — a Preact spike
@@ -45,9 +48,9 @@ all bundled — see hard rule 4). Quality is held by tests.
    paradigm the roadmap doesn't justify. The hard, third-party, or
    high-frequency-pointer surfaces (the editor, the EXPLAIN/schema graphs,
    Chart.js, result-grid resize/sort) stay **imperative behind an injected seam** —
-   signals coordinate state, they don't own every mousemove. CodeMirror 6 is the
-   pre-approved next runtime dep, behind an `EditorPort` seam, to land when
-   schema-aware autocomplete (#84) does (#21). When a *second* consumer of a
+   signals coordinate state, they don't own every mousemove. The editor is
+   **CodeMirror 6** behind the `EditorPort` seam (#21, landed ahead of #84 —
+   the completion source swaps to from-scope data there). When a *second* consumer of a
    complex UI pattern appears, extract a shared primitive (e.g. `EditorPort`,
    `GraphSurface`, a result-view registry, `Drawer`) rather than copy it — but
    don't build a primitive speculatively for a single caller.
diff --git a/README.md b/README.md
index f8982b3d..85190f26 100644
--- a/README.md
+++ b/README.md
@@ -8,9 +8,10 @@ schema-aware autocomplete, streaming results with table / JSON / chart views,
 saved queries, history, and shareable links. It ships as a
 **single self-contained HTML file served from ClickHouse itself** (no Node
 server, no CDN, no external fonts) — the page makes **zero third-party
-requests** and renders in the OS's native UI font. Its two bundled runtime
-dependencies — **Chart.js** (the chart result view) and **@dagrejs/dagre** (the
-EXPLAIN pipeline-graph layout) — are inlined into that one file.
+requests** and renders in the OS's native UI font. Its four bundled runtime
+dependencies — **CodeMirror 6** (the SQL editor), **Chart.js** (the chart
+result view), **@dagrejs/dagre** (the EXPLAIN pipeline-graph layout), and
+**@preact/signals-core** (state reactivity) — are inlined into that one file.
 
 Refactored from a single-file SPA into a fully modular, test-first codebase
 held at **100% test coverage**.
@@ -34,29 +35,37 @@ only moving parts are ClickHouse's HTTP handlers and your OAuth provider.
 
 ## SQL editor
 
-The editor is a hand-rolled `<textarea>` over a syntax-highlighted `<pre>` (no
-editor library — it adds nothing to the single served file). On top of that:
+The editor is **CodeMirror 6** behind an injected `EditorPort` seam (#143/#21)
+— bundled and inlined like the other runtime deps, so the page still makes
+zero third-party requests. On top of it:
 
-- **Find / replace** — `Cmd/Ctrl+F` opens a panel with a live match count,
-  prev/next (Enter / Shift+Enter), case / whole-word / regex toggles, and a
-  replace row. Matches highlight via a transparent overlay layered below the
-  syntax tokens, so highlighting and search never interfere.
+- **Per-tab undo** — each query tab keeps its own edit history; switching tabs
+  parks and restores it.
+- **Find / replace** — `Cmd/Ctrl+F` opens CM6's search panel (app-styled) with
+  prev/next, case / whole-word / regex toggles, and replace.
 - **Bracket matching + auto-close** — typing `(` `[` or a quote inserts the
   pair (or wraps the selection); typing a closer or quote steps over it;
-  Backspace inside an empty pair deletes both. The pair adjacent to the caret
-  is highlighted. (`{`/`}` auto-close is intentionally omitted.)
-- **Autocomplete** — typing a word (or after `table.`) opens a ranked dropdown
-  of keywords, functions, databases, tables, and already-loaded columns;
-  ↑/↓/Enter/Tab/Esc and click to accept; functions insert `name(`.
-- **Signature help + hover docs** — inside a function call, a popover shows the
-  signature with the active argument bolded; hovering a function or a
-  ClickHouse keyword shows its signature/description. Both read the same cached
-  reference data — `system.functions.{syntax,description}` (loaded with #25) and
-  a small built-in keyword-doc set — so they never query on the keystroke path.
+  Backspace inside an empty pair deletes both; the pair adjacent to the caret
+  is highlighted. Auto-close stays quiet inside strings and comments, and
+  `{`/`}` is intentionally omitted — it would fight the `{name:Type}` query
+  variables.
+- **Autocomplete** — typing a word (or after `table.`) opens a ranked list of
+  keywords, functions, databases, tables, and already-loaded columns —
+  the candidate set and ranking are the app's own (`core/completions.js`),
+  rendered through CM6's completion UI; ↑/↓/Enter/Tab/Esc and click to accept;
+  functions insert `name()` with the caret between the parens, and the active
+  row's description shows in an info tooltip.
+- **Hover docs** — hovering a function or a ClickHouse keyword shows its
+  signature/description from the same cached reference data —
+  `system.functions.{syntax,description}` (loaded with #25) and a small
+  built-in keyword-doc set — so they never query on the keystroke path.
+  (In-call signature help was dropped in the CM6 parity cut; the reference
+  docs pane (#60) rebuilds it properly.)
 - **Drag to insert** — drag a schema table/column, or a **Library/History** row,
-  onto the editor: a schema identifier drops as text at the caret, and a
-  saved/history query drops as a `( … )` subquery at the drop point (its trailing
-  `FORMAT`/`;` stripped). Undoable; click-to-load still works for keyboard users.
+  onto the editor: a schema identifier drops as text at the drop point (the
+  drop cursor tracks the pointer), and a saved/history query drops there as a
+  `( … )` subquery (its trailing `FORMAT`/`;` stripped). Undoable;
+  click-to-load still works for keyboard users.
   Dragging a **database or table onto the results pane** instead renders a
   [data flow graph](#data-flow-graph).
 - **Query variables** — write a ClickHouse typed placeholder like
@@ -77,8 +86,8 @@ the server's keyword and function lists — is fetched **once per connection**
 from `system.keywords` and `system.functions` (best-effort; it falls back to a
 built-in set on older ClickHouse), cached in memory, and merged with the
 in-memory schema. Highlighting then tracks the connected server's actual
-keyword/function set, so it's version-correct. Folding and multi-cursor are out
-of scope for a textarea and tracked separately (CodeMirror, issue #21).
+keyword/function set — the lists feed a ClickHouse `SQLDialect` that is
+reconfigured on connect — so it's version-correct.
 
 > Design source of truth: the "Altinity Play" Claude Design project (external).
 > Production is the vanilla ES-module code under `src/` — there is no React in
@@ -418,14 +427,13 @@ Preview the rendered artifacts without touching ClickHouse:
 ```
 src/
   core/      pure logic — format, jwt, pkce, sql-highlight, share, sort,
-             stream, storage, chart-data, and the editor logic: completions
-             (reference data + ranking), editor-search (find), editor-brackets
-             (match/auto-close), editor-marks (overlay), editor-geometry
-             (caret) — no DOM, no globals
+             stream, storage, chart-data, completions (editor reference data
+             + ranking) — no DOM, no globals
   net/       oauth-config, oauth, ch-client (injected fetch seam)
-  ui/        dom (hyperscript), icons, + render modules (login, editor +
-             editor-search/editor-complete, tabs, schema, results,
-             saved-history, shortcuts, splitters, toast, app)
+  editor/    the EditorPort seam (editor-port) + its CodeMirror 6 adapter
+             (codemirror-adapter) — injected via createApp(env)
+  ui/        dom (hyperscript), icons, + render modules (login, tabs, schema,
+             results, saved-history, shortcuts, splitters, toast, app)
   state.js   state model + pure operations
   main.js    bootstrap (OAuth callback, share-links, initial render)
   styles.css
@@ -453,7 +461,7 @@ Engines do diverge on one thing — **viewport units under `zoom`**: Chromium's
 on both (#70). An engine that can't parse `zoom` at all falls back via
 `@supports not (zoom: 1)` to a consistent 1× layout.
 
-CI exercises the editor-alignment, editor-insertion, schema-graph and
+CI exercises the editor (CM6 behaviors + insertion paths), schema-graph and
 EXPLAIN-pipeline specs on all three engines (`webkit` added in #69), plus a
 panel-sizing spec. **Caveat:** Playwright's WebKit applies `zoom` to
 `getBoundingClientRect`/viewport units like Chromium, *not* like real Safari, so
@@ -495,11 +503,10 @@ suite needs no mocking libraries.
 
 ### End-to-end (real browser)
 
-happy-dom has no real layout or scrollbars, so render-layer bugs (e.g. the
-editor highlight drifting behind the selection when a scrollbar shrinks the
-textarea's client box) can't be caught by the unit suite. A small Playwright
-harness mounts the real `src/` modules in **Chromium, Firefox and WebKit** for
-those cases — WebKit is the Safari proxy and the engine most likely to diverge
+happy-dom has no real layout or scrollbars, so render-layer bugs (keyboard
+routing through the real engine, completion popup timing, drop-point geometry)
+can't be caught by the unit suite. A small Playwright harness mounts the real
+`src/` modules in **Chromium, Firefox and WebKit** for those cases — WebKit is the Safari proxy and the engine most likely to diverge
 on the `html{zoom}`-based layout (see [Supported browsers](#supported-browsers)).
 
 ```bash
diff --git a/THIRD-PARTY-NOTICES.md b/THIRD-PARTY-NOTICES.md
index 1b1f08f3..7b76d6d9 100644
--- a/THIRD-PARTY-NOTICES.md
+++ b/THIRD-PARTY-NOTICES.md
@@ -1,9 +1,10 @@
 # Third-party notices
 
 The Altinity SQL Browser is licensed under Apache-2.0 (see `LICENSE`). The built
-single-file artifact (`dist/sql.html`) inlines the three runtime dependencies
-below; this file reproduces their MIT license texts as required, and the same
-notices are embedded as a comment at the top of the built artifact.
+single-file artifact (`dist/sql.html`) inlines the four runtime dependencies
+below (CodeMirror 6 ships as several packages); this file reproduces their MIT
+license texts as required, and the same notices are embedded as a comment at
+the top of the built artifact.
 
 ---
 
@@ -46,3 +47,32 @@ Permission is hereby granted, free of charge, to any person obtaining a copy of
 The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+---
+
+## CodeMirror 6 (the SQL editor) and its dependencies
+
+The editor is composed of these MIT-licensed packages, all inlined into the
+artifact. Each carries the license text below with its own copyright line:
+
+- `@codemirror/state` — v6.7.0, `@codemirror/view` — v6.43.4,
+  `@codemirror/commands` — v6.10.4, `@codemirror/language` — v6.12.4,
+  `@codemirror/lang-sql` — v6.10.0, `@codemirror/autocomplete` — v6.20.3,
+  `@codemirror/search` — v6.7.1 — Copyright (C) 2018-2021 by Marijn Haverbeke
+  <marijn@haverbeke.berlin> and others
+- `@lezer/common` — v1.5.2, `@lezer/highlight` — v1.2.3, `@lezer/lr` — v1.4.10,
+  `style-mod` — v4.1.3 — Copyright (C) 2018 by Marijn Haverbeke
+  <marijn@haverbeke.berlin> and others
+- `w3c-keyname` — v2.2.8 — Copyright (C) 2016 by Marijn Haverbeke
+  <marijn@haverbeke.berlin> and others
+- `crelt` — v1.0.7 — Copyright (C) 2020 by Marijn Haverbeke <marijn@haverbeke.berlin>
+- `@marijn/find-cluster-break` — v1.0.3 — Copyright (C) 2024 by Marijn Haverbeke
+  <marijn@haverbeke.berlin>
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/docs/ADR-0001-reactivity.md b/docs/ADR-0001-reactivity.md
index 7ca8c8ca..5fb9c754 100644
--- a/docs/ADR-0001-reactivity.md
+++ b/docs/ADR-0001-reactivity.md
@@ -183,3 +183,24 @@ edit, not a new `effect()`. Housing them in `state.js` rather than on `app`
 matches every other slice in this file; #88's "last slice" note above refers to
 the schema panel specifically, not every remaining plain field in the
 codebase — this is a smaller, unrelated follow-up tidying three of those.
+
+## Addendum — the editor is CodeMirror 6 behind the EditorPort seam (#143/#21)
+
+The decision's "imperative adapters behind injected seams for the hard,
+third-party, or high-frequency-pointer surfaces" clause is now realized for the
+editor: #143 extracted the `EditorPort` interface (mount / getValue /
+getSelection / insertAtCursor / replaceDocument / revealOffset / syncFromState /
+refreshReference / onDocChange, injected as `env.Editor`), and #21 swapped the
+adapter from the hand-rolled textarea to **CodeMirror 6** — the fourth bundled
+runtime dependency. Signals still coordinate the state (`hasSelection`,
+tab/effect wiring, the app-level `onDocChange` subscriber owns the
+`tab.sql`/dirty writes); CM6 owns every keystroke, selection, undo, and
+measurement inside the port. Per-tab `EditorState`s give per-tab undo — a
+capability the shared-textarea design structurally lacked — and the adapter is
+unit-tested against the real CM6 under happy-dom (the coverage gate holds
+without a fake-editor seam). The tokenizer stays in `core/sql-highlight.js` for
+completion context; the CM6 dialect gets the same server keyword/function sets
+via a `Compartment` reconfigure. Nothing about the state model changed — this
+addendum records that the editor island now has its intended long-term
+implementation, and that #84 (schema-aware autocomplete) plugs into the CM6
+completion source rather than growing new overlay machinery.
diff --git a/package.json b/package.json
index f086cb1f..97f6efb2 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,15 @@
     "vitest": "^2.1.8"
   },
   "dependencies": {
+    "@codemirror/autocomplete": "^6.20.3",
+    "@codemirror/commands": "^6.10.4",
+    "@codemirror/lang-sql": "^6.10.0",
+    "@codemirror/language": "^6.12.4",
+    "@codemirror/search": "^6.7.1",
+    "@codemirror/state": "^6.7.0",
+    "@codemirror/view": "^6.43.4",
     "@dagrejs/dagre": "^3.0.0",
+    "@lezer/highlight": "^1.2.3",
     "@preact/signals-core": "^1.14.3",
     "chart.js": "^4.5.1"
   }
diff --git a/src/core/completions.js b/src/core/completions.js
index 6e22bb4a..fe96de1c 100644
--- a/src/core/completions.js
+++ b/src/core/completions.js
@@ -239,29 +239,3 @@ export function wordAt(value, pos) {
   if (s === e) return null;
   return { word: value.slice(s, e), from: s, to: e };
 }
-
-/**
- * If `pos` is inside a function call `name(… )`, return {name, argIdx} — the
- * enclosing function and which argument the caret is on (commas counted at
- * depth 0). Used by signature help (#27). Returns null outside a call; a `;` or
- * newline at depth 0 ends the search (don't cross statements/lines).
- */
-export function signatureContext(value, pos) {
-  let depth = 0;
-  let argIdx = 0;
-  for (let i = pos - 1; i >= 0; i--) {
-    const c = value[i];
-    if (c === ')') depth++;
-    else if (c === '(') {
-      if (depth === 0) {
-        let e = i;
-        while (e > 0 && /[A-Za-z0-9_]/.test(value[e - 1])) e--;
-        const name = value.slice(e, i);
-        return name ? { name, argIdx } : null;
-      }
-      depth--;
-    } else if (c === ',' && depth === 0) argIdx++;
-    else if ((c === ';' || c === '\n') && depth === 0) return null;
-  }
-  return null;
-}
diff --git a/src/core/editor-brackets.js b/src/core/editor-brackets.js
deleted file mode 100644
index a565d24a..00000000
--- a/src/core/editor-brackets.js
+++ /dev/null
@@ -1,86 +0,0 @@
-// Pure bracket logic for the editor (#24): caret-adjacent pair matching and the
-// auto-close / wrap / type-over / pair-delete decision. No DOM.
-
-// Auto-close pairs. `{`/`}` is deliberately excluded (niche ClickHouse JSON
-// context) per the resolved Phase-1b decision; bracket *matching* still spans
-// it (MATCH_* below) since highlighting a `{}` pair is harmless and useful.
-const OPEN = { '(': ')', '[': ']' };
-const QUOTES = new Set(["'", '"', '`']);
-const CLOSERS = new Set([')', ']', '}']);
-const MATCH_OPEN = { '(': ')', '[': ']', '{': '}' };
-const MATCH_CLOSE = { ')': '(', ']': '[', '}': '{' };
-
-// Walk from `idx` in `dir` (+1 from an opener, -1 from a closer) tracking nesting
-// depth; return [openIdx, closeIdx] for the matched pair, or null if unbalanced
-// or `idx` is not the expected bracket.
-function scan(value, idx, dir) {
-  const ch = value[idx];
-  if (dir === 1 && MATCH_OPEN[ch]) {
-    let depth = 0;
-    for (let k = idx; k < value.length; k++) {
-      if (value[k] === ch) depth++;
-      else if (value[k] === MATCH_OPEN[ch]) { depth--; if (depth === 0) return [idx, k]; }
-    }
-  } else if (dir === -1 && MATCH_CLOSE[ch]) {
-    let depth = 0;
-    for (let k = idx; k >= 0; k--) {
-      if (value[k] === ch) depth++;
-      else if (value[k] === MATCH_CLOSE[ch]) { depth--; if (depth === 0) return [k, idx]; }
-    }
-  }
-  return null;
-}
-
-/**
- * The bracket pair adjacent to `caret`: an opener at value[caret] (scan forward)
- * or a closer at value[caret-1] (scan backward). Returns [openIdx, closeIdx] or
- * null.
- */
-export function matchBracketAt(value, caret) {
-  return scan(value, caret, 1) || (caret > 0 ? scan(value, caret - 1, -1) : null);
-}
-
-/**
- * Decide the edit for a key pressed at selection [s, e]. Returns
- * { value, selStart, selEnd } to apply, or null when the key isn't a bracket
- * action (the caller falls through to its normal handling).
- *   • opener: wrap a selection, else insert the pair with the caret inside
- *   • quote: wrap a selection, type over an existing quote, else auto-close
- *   • closer: type over an existing matching closer
- *   • Backspace inside an empty ()/[]/'' pair: delete both halves
- * When `inLiteral` (the caret sits inside a string/comment), auto-pairing is
- * suppressed — typing `(` in 'O(' must not insert a stray `)` — but type-over of
- * an existing quote/closer still works so the literal can be closed normally.
- */
-export function bracketEdit(value, s, e, key, inLiteral = false) {
-  if (OPEN[key] && !inLiteral) {
-    const close = OPEN[key];
-    if (s !== e) {
-      return { value: value.slice(0, s) + key + value.slice(s, e) + close + value.slice(e), selStart: s + 1, selEnd: e + 1 };
-    }
-    return { value: value.slice(0, s) + key + close + value.slice(e), selStart: s + 1, selEnd: s + 1 };
-  }
-  if (QUOTES.has(key)) {
-    if (s === e && value[s] === key) {
-      return { value, selStart: s + 1, selEnd: s + 1 }; // type over an existing quote (closes the literal)
-    }
-    if (!inLiteral) {
-      if (s !== e) {
-        return { value: value.slice(0, s) + key + value.slice(s, e) + key + value.slice(e), selStart: s + 1, selEnd: e + 1 };
-      }
-      return { value: value.slice(0, s) + key + key + value.slice(e), selStart: s + 1, selEnd: s + 1 };
-    }
-    // inside a literal and not a type-over → let the quote type normally
-  }
-  if (CLOSERS.has(key) && s === e && value[s] === key) {
-    return { value, selStart: s + 1, selEnd: s + 1 }; // type over the auto-inserted closer
-  }
-  if (key === 'Backspace' && s === e && s > 0) {
-    const prev = value[s - 1];
-    const next = value[s];
-    if ((OPEN[prev] && next === OPEN[prev]) || (QUOTES.has(prev) && next === prev)) {
-      return { value: value.slice(0, s - 1) + value.slice(s + 1), selStart: s - 1, selEnd: s - 1 };
-    }
-  }
-  return null;
-}
diff --git a/src/core/editor-geometry.js b/src/core/editor-geometry.js
deleted file mode 100644
index 2224102b..00000000
--- a/src/core/editor-geometry.js
+++ /dev/null
@@ -1,46 +0,0 @@
-// Pure caret geometry for positioning the autocomplete popover (#26). No DOM.
-//
-// The editor is `white-space: pre` in a fixed-size monospace font, so a caret's
-// pixel offset is plain line/column arithmetic — char width is passed in by the
-// caller (a constant tuned to the font; see CHAR_WIDTH_PX in editor.js) rather
-// than measured, keeping this fully testable. If a proportional font or soft
-// wrapping is ever introduced, switch to a mirror-div measurement.
-
-/** Zero-based {line, col} of caret position `pos` within `value`. */
-export function caretLineCol(value, pos) {
-  const before = value.slice(0, pos);
-  return { line: before.split('\n').length - 1, col: pos - (before.lastIndexOf('\n') + 1) };
-}
-
-/**
- * Pixel offset of the caret within the editor's text area, accounting for
- * padding and the current scroll.
- * @param m { charWidth, lhPx, padX, padY, scrollTop, scrollLeft }
- */
-export function caretXY(value, pos, m) {
-  const { line, col } = caretLineCol(value, pos);
-  return {
-    x: m.padX + col * m.charWidth - (m.scrollLeft || 0),
-    y: m.padY + line * m.lhPx - (m.scrollTop || 0),
-  };
-}
-
-/**
- * Inverse of caretXY for hover (#27): the text offset at a point, where relX/relY
- * are already in CSS px relative to the text origin (after padding + scroll).
- * Returns null when the point is outside the text's lines, OR past the end of a
- * short line's glyphs — otherwise a dwell in the blank space right of e.g.
- * `SELECT count` would map to the end of `count` and pop a phantom hover card
- * nowhere near a token (#27). A half-column tolerance keeps the last glyph live.
- */
-export function offsetFromXY(value, relX, relY, m) {
-  const lines = value.split('\n');
-  const line = Math.floor(relY / m.lhPx);
-  if (line < 0 || line >= lines.length) return null;
-  const rawCol = relX / m.charWidth;
-  if (rawCol > lines[line].length + 0.5) return null; // beyond the line's glyphs
-  const col = Math.max(0, Math.min(Math.round(rawCol), lines[line].length));
-  let pos = 0;
-  for (let k = 0; k < line; k++) pos += lines[k].length + 1;
-  return pos + col;
-}
diff --git a/src/core/editor-marks.js b/src/core/editor-marks.js
deleted file mode 100644
index 458b5e65..00000000
--- a/src/core/editor-marks.js
+++ /dev/null
@@ -1,30 +0,0 @@
-// Pure segmentation for the editor's transparent mark overlay (#23 search
-// highlights, #24 bracket pair). No DOM.
-//
-// The overlay is a second `color: transparent` <pre> layered below the token
-// <pre>; only the marked spans carry a background, so the token render path is
-// never touched. This splits `value` into ordered {text, cls} segments — the
-// DOM painter renders cls != null with a `mark-<cls>` background span and the
-// rest as plain (transparent) text, keeping the overlay's layout identical to
-// the editor's for pixel-aligned highlights.
-
-/**
- * @param value the full editor text
- * @param marks [{start, end, cls}] — half-open ranges, **sorted by start and
- *   non-overlapping**. They always are here: search matches come back in order
- *   and disjoint, and the bracket pair (the only other source, never mixed with
- *   search marks) is two sorted width-1 ranges. The single linear pass keeps the
- *   keystroke path off a quadratic per-segment scan.
- * @returns [{text, cls|null}] covering the whole string in order.
- */
-export function buildMarkSegments(value, marks) {
-  const out = [];
-  let pos = 0;
-  for (const m of marks) {
-    if (m.start > pos) out.push({ text: value.slice(pos, m.start), cls: null });
-    out.push({ text: value.slice(m.start, m.end), cls: m.cls });
-    pos = m.end;
-  }
-  if (pos < value.length || !out.length) out.push({ text: value.slice(pos), cls: null });
-  return out;
-}
diff --git a/src/core/editor-search.js b/src/core/editor-search.js
deleted file mode 100644
index db58e012..00000000
--- a/src/core/editor-search.js
+++ /dev/null
@@ -1,39 +0,0 @@
-// Pure find/replace matching for the in-editor search panel (#23). No DOM.
-
-/**
- * All matches of `query` in `value`, in order, as [{start, end}]. Plain mode
- * escapes the query; regex mode compiles it directly. Whole-word fences the
- * pattern with `\b…\b` in BOTH modes (regex is wrapped in a non-capturing group
- * so the boundaries apply to the whole pattern). Case-insensitive unless
- * `caseSensitive`. An empty query or an invalid regex yields [] (the panel
- * surfaces the error separately). Zero-width matches (e.g. `a*`, `^`, `$`) are
- * skipped — they have no text to highlight or replace — while still advancing
- * the scan; the total is capped so a pathological pattern can't hang typing.
- */
-export function findMatches(value, query, opts = {}) {
-  if (!query) return [];
-  const { caseSensitive = false, regex = false, wholeWord = false } = opts;
-  let re;
-  try {
-    let pat = regex ? query : query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-    if (wholeWord) pat = '\\b' + (regex ? '(?:' + pat + ')' : pat) + '\\b';
-    re = new RegExp(pat, caseSensitive ? 'g' : 'gi');
-  } catch {
-    return [];
-  }
-  const matches = [];
-  let m;
-  let guard = 0;
-  while ((m = re.exec(value)) !== null) {
-    if (++guard > 10000) break;
-    if (m.index === re.lastIndex) { re.lastIndex++; continue; } // skip zero-width, keep advancing
-    matches.push({ start: m.index, end: m.index + m[0].length });
-  }
-  return matches;
-}
-
-/** Whether `query` is usable (only meaningful in regex mode). */
-export function validRegex(query, regex) {
-  if (!regex || !query) return true;
-  try { new RegExp(query); return true; } catch { return false; }
-}
diff --git a/src/core/sql-highlight.js b/src/core/sql-highlight.js
index 2729cc32..142628cd 100644
--- a/src/core/sql-highlight.js
+++ b/src/core/sql-highlight.js
@@ -105,26 +105,9 @@ export function tokenize(sql, { keywords = SQL_KEYWORDS, funcs = SQL_FUNCS } = {
   return out;
 }
 
-// A same-length copy of `sql` with every string-literal, comment, and
-// backtick-quoted-identifier character replaced by NUL ('\0'). Bracket matching
-// (#24), signature help (#27), and auto-close decisions run on this so that
-// brackets/quotes/commas inside literals don't pair, count as arguments, or
-// trigger auto-close. NUL is none of `(),;\n`, so the raw-char scanners skip it.
-// Offsets are preserved (same length), so indices map back to the real text.
-export function maskFromTokens(tokens) {
-  let out = '';
-  for (const [t, v] of tokens) {
-    const literal = t === 'string' || t === 'comment' || (t === 'ident' && v[0] === '`');
-    out += literal ? '\0'.repeat(v.length) : v;
-  }
-  return out;
-}
-
-// Convenience wrapper that tokenizes then masks. Callers on the keystroke path
-// that already tokenized for highlighting should reuse maskFromTokens with that
-// token list instead, to avoid a second pass (#5 review). String/comment
-// classification is independent of the keyword/func sets, so a token list built
-// with server keyword overrides yields the same mask.
-export function maskLiterals(sql) {
-  return maskFromTokens(tokenize(sql));
-}
+// maskFromTokens/maskLiterals used to live here for the hand-rolled editor's
+// bracket/auto-close/signature paths — all superseded by CM6 (#21), which
+// classifies literals through its syntax tree. The tokenizer itself stays: it
+// feeds completions.js (open-backtick detection) and the highlight fallback
+// sets; #84's from-scope work moves surviving consumers onto core/sql-spans.js
+// rules (#141).
diff --git a/src/editor/codemirror-adapter.js b/src/editor/codemirror-adapter.js
new file mode 100644
index 00000000..97483fa0
--- /dev/null
+++ b/src/editor/codemirror-adapter.js
@@ -0,0 +1,444 @@
+// The CodeMirror 6 EditorPort adapter (#21): replaces the hand-rolled
+// textarea editor behind the #143 seam. CM6 owns the DOM — undo history,
+// measured text, IME/touch, search panel, completion UI — while the app keeps
+// talking through the same EditorPort, and the SQL knowledge stays pure in
+// core (`completions.js` ranking, reference data). Injected via
+// `createApp(env)` (`env.Editor`, the Chart/Dagre precedent) exactly like the
+// textarea adapter it replaces; app-level tests keep running on
+// `createNoopPort`.
+//
+// Testing note: the adapter is unit-tested against the REAL CM6 under
+// happy-dom (construct/dispatch/undo all work headless). The inner pieces —
+// dialect builder, completion source, hover source, drop handler, input
+// handler, Tab command — are exported for direct invocation where headless
+// measurement (`coordsAtPos`/`posAtCoords`) makes event-driven coverage
+// unreliable.
+
+import { EditorState, Compartment, Annotation, Transaction, Prec } from '@codemirror/state';
+import { EditorView, keymap, lineNumbers, drawSelection, dropCursor, hoverTooltip } from '@codemirror/view';
+import { history, historyKeymap, defaultKeymap } from '@codemirror/commands';
+import { bracketMatching, syntaxHighlighting, syntaxTree, HighlightStyle } from '@codemirror/language';
+import { sql, SQLDialect } from '@codemirror/lang-sql';
+import { autocompletion, closeBrackets, closeBracketsKeymap, acceptCompletion } from '@codemirror/autocomplete';
+import { search, searchKeymap } from '@codemirror/search';
+import { tags } from '@lezer/highlight';
+import { h } from '../ui/dom.js';
+import { completionContext, rankCompletions, wordAt } from '../core/completions.js';
+import { toSubquery, clamp } from '../core/format.js';
+import { activeTab } from '../state.js';
+import { IDENT_MIME, SUBQUERY_MIME } from '../ui/dnd-mime.js';
+
+// Programmatic state syncs (tab switch, external tab.sql reconcile) must not
+// reach onDocChange subscribers — the app-level subscriber writes tab.sql +
+// dirty, and a tab switch dirtying the incoming tab would be a bug. User edits
+// and port edits (insertAtCursor/replaceDocument/drop) DO emit, matching the
+// textarea adapter's input-event semantics. Sync transactions also stay out
+// of the undo history: ⌘Z must not resurrect a doc the app already replaced.
+export const syncTx = Annotation.define(); // exported for the mixed-update emit spec
+const syncAnnotations = () => [syncTx.of(true), Transaction.addToHistory.of(false)];
+// The whole-document change spec — shared by replaceDocument and both
+// syncFromState reconcile paths so their shapes can't drift.
+const fullReplace = (state, text) => ({ changes: { from: 0, to: state.doc.length, insert: text } });
+
+// Map the lang-sql token tags onto the EXISTING .sql-* stylesheet classes
+// (styles.css) — token colors and light/dark theming stay in the stylesheet,
+// zero duplicated color values. `class:` entries generate no CSS of their own.
+const sqlClasses = HighlightStyle.define([
+  { tag: tags.keyword, class: 'sql-keyword' },
+  { tag: tags.standard(tags.name), class: 'sql-func' }, // dialect `builtin` = server function names
+  { tag: tags.string, class: 'sql-string' },
+  { tag: tags.special(tags.string), class: 'sql-ident' }, // `quoted` identifiers
+  { tag: tags.number, class: 'sql-number' },
+  { tag: tags.bool, class: 'sql-keyword' },
+  { tag: tags.null, class: 'sql-keyword' },
+  { tag: tags.comment, class: 'sql-comment' },
+  { tag: tags.operator, class: 'sql-op' },
+]);
+
+// String/comment/backtick-ident syntax nodes — the contexts where bracket
+// auto-close and hover docs must stay quiet (the old adapter's maskLiterals
+// role, now answered by CM6's syntax tree).
+const LITERAL_NODE = /String|Comment|QuotedIdentifier/;
+
+/**
+ * The ClickHouse-flavored SQL language extension for the current reference
+ * data: server keywords/function names when loaded (#25), the built-in
+ * fallback sets otherwise. Both word lists are lowercased — lang-sql looks
+ * dialect words up via `word.toLowerCase()`, so a verbatim `toDateTime` would
+ * never match. Backticks and double quotes are identifier quotes in
+ * ClickHouse; strings take backslash escapes. Auto-close covers `(`, `[`, and
+ * the three quotes (parity with the deleted core/editor-brackets.js) — `{`
+ * deliberately doesn't pair (it would fight the #134 `{name:Type}` variables).
+ */
+export function langExtensionFor(app) {
+  const ref = app.refData;
+  const dialect = SQLDialect.define({
+    keywords: (ref ? ref.keywords : []).join(' ').toLowerCase(),
+    builtin: Object.keys(ref ? ref.functions : {}).join(' ').toLowerCase(),
+    backslashEscapes: true,
+    identifierQuotes: '`"',
+  });
+  return [
+    sql({ dialect }),
+    dialect.language.data.of({ closeBrackets: { brackets: ['(', '[', "'", '"', '`'] } }),
+  ];
+}
+
+// Closers and quotes our input guard steps over when typed directly before
+// that same character.
+const STEP_OVER = new Set([')', ']', "'", '"', '`']);
+
+/**
+ * Pairing guards CM6 doesn't provide (editor-brackets.js parity), run ahead
+ * of closeBrackets (Prec.high):
+ * - type-over: a closer/quote typed directly before that same character steps
+ *   over it — including pre-existing text (CM6's closedBracketAt only tracks
+ *   pairs it inserted this session) and inside literals, so a string can
+ *   always be closed normally;
+ * - brackets never pair inside String/Comment/QuotedIdentifier (closeBrackets
+ *   is only tree-aware for same-char quotes);
+ * - quotes never pair inside Comment/QuotedIdentifier, and a quote typed over
+ *   a selection inside a String replaces it instead of wrapping.
+ * Mirrors closeBrackets' own bail-outs first: never rewrite the DOM mid-IME
+ * composition, and only act when the reported range IS the selection (a
+ * browser-generated correction elsewhere must not be re-anchored to it).
+ */
+export function inputGuards(view, from, to, text) {
+  if (text.length !== 1) return false;
+  if (view.compositionStarted || view.state.readOnly) return false;
+  const sel = view.state.selection.main;
+  if (from !== sel.from || to !== sel.to) return false;
+  if (from === to && STEP_OVER.has(text) && view.state.sliceDoc(to, to + 1) === text) {
+    view.dispatch({ selection: { anchor: to + 1 }, userEvent: 'input.type', scrollIntoView: true });
+    return true;
+  }
+  const isBracket = text === '(' || text === '[';
+  const isQuote = text === "'" || text === '"' || text === '`';
+  if (!isBracket && !isQuote) return false;
+  const node = syntaxTree(view.state).resolveInner(from, -1).name;
+  const quiet = isBracket
+    ? LITERAL_NODE.test(node)
+    : /Comment|QuotedIdentifier/.test(node) || (from !== to && /String/.test(node));
+  if (!quiet) return false;
+  view.dispatch(view.state.replaceSelection(text), { userEvent: 'input.type', scrollIntoView: true });
+  return true;
+}
+
+/**
+ * Completion source: CM6's UI over the pure core ranking (#26 parity v0).
+ * `filter: false` keeps `rankCompletions`' order (CM6 would fuzzy-rescore and
+ * dedup otherwise). Candidates come from `app.completions` at call time, so
+ * schema/reference updates need no reconfigure. Never queries — `info` resolves
+ * through app.entityDoc's lazy cache, and only for the row the user rests on.
+ */
+export function completionSourceFor(app) {
+  return (ctx) => {
+    // completionContext reads at most to the end of the caret's token — slice
+    // to the line end instead of serializing the whole rope per keystroke
+    // (cutting AT the caret would misread an open backtick-identifier whose
+    // escaped-backtick ends up last-before-the-cut as already closed).
+    const doc = ctx.state.sliceDoc(0, ctx.state.doc.lineAt(ctx.pos).to);
+    const c = completionContext(doc, ctx.pos);
+    if (!c.qualified && c.word.length < 1 && !ctx.explicit) return null;
+    const items = rankCompletions(app.completions || [], c);
+    if (!items.length) return null;
+    return {
+      from: c.from,
+      to: c.to,
+      filter: false,
+      options: items.map((it) => ({
+        label: it.label,
+        detail: it.detail || undefined,
+        type: it.kind, // chip glyph via .cm-completionIcon-<kind>; unknown kinds get the base '·'
+        apply: applyFor(it),
+        info: infoFor(app, it),
+      })),
+    };
+  };
+}
+
+// How accepting a candidate edits the doc. Functions insert `name()` with the
+// caret pulled between the parens (`caretBack`), so it needs a custom apply —
+// a plain string apply would land the caret after the `)`.
+export function applyFor(it) {
+  if (!it.caretBack) return it.insert === it.label ? undefined : it.insert;
+  return (view, _completion, from, to) => {
+    view.dispatch({
+      changes: { from, to, insert: it.insert },
+      selection: { anchor: from + it.insert.length - it.caretBack },
+      userEvent: 'input.complete',
+    });
+  };
+}
+
+// The active row's description: static keyword docs immediately, function
+// docs lazily via app.entityDoc (cached, one query per name ever — #27).
+// CM6 shows it as a side tooltip (the old dropdown used a footer). An `info`
+// FUNCTION must yield a DOM node (a bare string is only legal when `info`
+// itself is the string) — CM6's addInfoPane appendChild()s the result.
+export function infoFor(app, it) {
+  const doc = (text) => (text ? h('div', null, text) : null);
+  if (it.kind === 'keyword') {
+    return () => doc(app.refData && app.refData.keywordDocs[it.label.toUpperCase()]);
+  }
+  if (it.kind === 'fn' || it.kind === 'agg' || it.kind === 'cast') {
+    if (!app.entityDoc) return undefined;
+    return () => Promise.resolve(app.entityDoc(it.label)).then(doc);
+  }
+  return undefined;
+}
+
+// SQL function calls are case-insensitive: resolve the hovered word against
+// the reference keys the way the old editor-intel lookupFn did (#27) — exact,
+// then lower (server keys are mostly canonical-lowercase), then UPPER. Own
+// properties only: a column named `constructor` must not hover a phantom card
+// off Object.prototype.
+const own = (m, k) => (Object.prototype.hasOwnProperty.call(m, k) ? m[k] : undefined);
+const lookupFn = (functions, word) =>
+  own(functions, word) || own(functions, word.toLowerCase()) || own(functions, word.toUpperCase());
+
+/**
+ * Hover docs (#27 parity v0): keyword docs from the static set, function
+ * signature + return type + lazily-fetched description. Quiet inside
+ * strings/comments/quoted identifiers (no phantom docs over literal prose).
+ * Signature help (the caret-following arg highlighter) is dropped in v0 —
+ * #60 rebuilds docs properly on this foundation.
+ */
+export function hoverSourceFor(app) {
+  return (view, pos) => {
+    if (!app.refData) return null;
+    if (LITERAL_NODE.test(syntaxTree(view.state).resolveInner(pos, 0).name)) return null;
+    // Identifiers can't span lines — scan the line, not the whole doc.
+    const line = view.state.doc.lineAt(pos);
+    const w = wordAt(line.text, pos - line.from);
+    if (!w) return null;
+    const kwDoc = app.refData.keywordDocs[w.word.toUpperCase()];
+    const fn = lookupFn(app.refData.functions, w.word);
+    if (!kwDoc && !fn) return null;
+    return {
+      pos: line.from + w.from,
+      end: line.from + w.to,
+      create: () => {
+        const dom = h('div', { class: 'hover-card' });
+        if (fn) {
+          dom.appendChild(h('div', { class: 'hover-sig' }, fn.sig || w.word + '()',
+            fn.ret ? h('span', { class: 'hover-ret' }, ' → ' + fn.ret) : null));
+          const doc = h('div', { class: 'hover-doc' }, fn.desc || '');
+          dom.appendChild(doc);
+          if (!fn.desc && app.entityDoc) {
+            Promise.resolve(app.entityDoc(w.word)).then((d) => { if (d) doc.textContent = d; });
+          }
+        } else {
+          dom.appendChild(h('div', { class: 'hover-doc' }, kwDoc));
+        }
+        return { dom };
+      },
+    };
+  };
+}
+
+/**
+ * Drop handler for the app's drag sources (schema identifiers, saved/history
+ * queries). Both land at the POINTER position (falling back to the caret when
+ * the point doesn't map to text) — the dropCursor extension shows the user
+ * exactly that target while dragging. Returns true when it consumed the event
+ * (so CM6's native text drop can't double-insert). Exported for direct tests —
+ * happy-dom's posAtCoords can't exercise the coordinate fallback via real
+ * events.
+ */
+export function handleDrop(app, view, e) {
+  const dt = e.dataTransfer;
+  if (!dt) return false;
+  const insertAt = (text) => {
+    const at = view.posAtCoords({ x: e.clientX, y: e.clientY });
+    const pos = at == null ? view.state.selection.main.head : at;
+    e.preventDefault();
+    view.dispatch({
+      changes: { from: pos, to: pos, insert: text },
+      selection: { anchor: pos + text.length },
+      userEvent: 'input.drop',
+      scrollIntoView: true,
+    });
+    view.focus();
+    return true;
+  };
+  const ident = dt.getData(IDENT_MIME);
+  if (ident) return insertAt(ident);
+  const sub = dt.getData(SUBQUERY_MIME);
+  if (sub) {
+    const text = toSubquery(sub);
+    if (!text) return false;
+    return insertAt(text);
+  }
+  return false; // not our drag — leave native behavior alone
+}
+
+// Tab inserts two literal spaces (parity with the textarea editor — no indent
+// magic); an open completion's Tab-accept is bound ahead of it.
+export function insertTwoSpaces(view) {
+  view.dispatch(view.state.replaceSelection('  '), { userEvent: 'input.type', scrollIntoView: true });
+  return true;
+}
+
+/**
+ * The CM6 editor behind the EditorPort seam. Port methods tolerate pre-mount
+ * calls (no view yet → no-op / empty results). mount() is re-runnable: a
+ * renderApp re-run (e.g. sign-out → sign-in) passes a fresh container and the
+ * live view.dom is reparented into it — same view, same subscriptions, no
+ * zombies. destroy() is terminal (see editor-port.js).
+ * @returns {import('./editor-port.js').EditorPort}
+ */
+export function createCodeMirrorEditor(app) {
+  const subs = new Set();
+  const emit = (value) => { for (const cb of subs) cb(value); };
+  const langCompartment = new Compartment();
+  const tabStates = new Map(); // tabId → parked EditorState (per-tab undo)
+  // Resolved lazily at first mount, NOT at factory time: createApp constructs
+  // the port before it assembles the built-in fallback refData, and an eager
+  // snapshot here would mount an empty dialect (no keywords at all).
+  let langExt = null;
+  let view = null;
+  let shownTabId = null;
+
+  const extensions = () => [
+    lineNumbers(),
+    history(),
+    drawSelection(),
+    dropCursor(),
+    bracketMatching(),
+    Prec.high(EditorView.inputHandler.of(inputGuards)),
+    closeBrackets(),
+    syntaxHighlighting(sqlClasses),
+    langCompartment.of(langExt),
+    autocompletion({ override: [completionSourceFor(app)] }),
+    hoverTooltip(hoverSourceFor(app)),
+    search({ top: true }),
+    keymap.of([
+      { key: 'Tab', run: acceptCompletion },
+      { key: 'Tab', run: insertTwoSpaces },
+      ...closeBracketsKeymap,
+      ...searchKeymap,
+      ...historyKeymap,
+      // Global chords (⌘↵ run, ⌘⇧↵ format, ⌘S/⌘⇧S, Esc) live on the document
+      // handler (main.js) — drop CM6's Mod-Enter (insertBlankLine) so ⌘↵
+      // bubbles out unhandled, and its Escape (simplifySelection) so Esc with
+      // a selection still cancels a running query instead of being consumed
+      // (completion/search bind their own Escape and keep working).
+      ...defaultKeymap.filter((b) => b.key !== 'Mod-Enter' && b.key !== 'Escape'),
+    ]),
+    EditorView.updateListener.of((u) => {
+      // Suppress only when EVERY transaction is a sync — an update that
+      // coalesces a user edit with a reconcile must still reach tab.sql.
+      if (u.docChanged && !u.transactions.every((tr) => tr.annotation(syncTx))) {
+        emit(u.state.doc.toString());
+      }
+    }),
+    EditorView.domEventHandlers({
+      dragover: (e) => { e.preventDefault(); return false; },
+      drop: (e, v) => handleDrop(app, v, e),
+    }),
+  ];
+
+  const freshState = (doc) => {
+    if (!langExt) langExt = langExtensionFor(app);
+    return EditorState.create({ doc, extensions: extensions() });
+  };
+
+  return {
+    mount: (container) => {
+      if (!view) {
+        const tab = activeTab(app.state); // state guarantees ≥1 tab
+        shownTabId = tab.id;
+        view = new EditorView({ state: freshState(tab.sql) });
+      }
+      // renderApp resets app.dom on every run — re-register the reach-in ref
+      // (e2e/debug only; the app itself talks through the port).
+      app.dom.editorView = view;
+      container.replaceChildren(view.dom);
+    },
+    destroy: () => {
+      subs.clear();
+      tabStates.clear();
+      if (view) view.destroy();
+      view = null;
+    },
+    focus: () => { if (view) view.focus(); },
+    hasFocus: () => !!view && view.hasFocus,
+    getValue: () => (view ? view.state.doc.toString() : ''),
+    getSelection: () => {
+      if (!view) return { start: 0, end: 0, text: '' };
+      const { from, to } = view.state.selection.main;
+      return { start: from, end: to, text: view.state.sliceDoc(from, to) };
+    },
+    insertAtCursor: (text) => {
+      if (!view) return;
+      view.dispatch(view.state.replaceSelection(text), { userEvent: 'input.paste', scrollIntoView: true });
+      view.focus();
+    },
+    replaceDocument: (text) => {
+      if (!view) return;
+      if (view.state.doc.length === text.length && view.state.doc.toString() === text) return; // idempotent Format re-run
+      view.dispatch({
+        ...fullReplace(view.state, text),
+        selection: { anchor: text.length },
+        userEvent: 'input.replace',
+        scrollIntoView: true,
+      });
+      // Toolbar-initiated replaces (Format, SHOW CREATE) must leave ⌘Z live —
+      // the old adapter focused too. Deferred a microtask: happy-dom delivers
+      // selectionchange synchronously, and a focused view + an immediately
+      // following range-selection dispatch would re-enter CM6's update.
+      const v = view;
+      queueMicrotask(() => { if (view === v) v.focus(); });
+    },
+    revealOffset: (pos) => {
+      if (!view) return;
+      view.dispatch({ selection: { anchor: clamp(pos | 0, 0, view.state.doc.length) }, scrollIntoView: true });
+      view.focus();
+    },
+    syncFromState: () => {
+      if (!view) return;
+      const tab = activeTab(app.state);
+      const ids = new Set(app.state.tabs.value.map((t) => t.id));
+      for (const id of tabStates.keys()) if (!ids.has(id)) tabStates.delete(id); // closed tabs
+      if (shownTabId === tab.id) {
+        // Same tab (the effect also fires on unrelated tab-list changes):
+        // reconcile only an external tab.sql change; equal doc = strict no-op
+        // (selection/scroll/completion untouched). Length check first — the
+        // effect fires on every tab op and O(doc) compares add up.
+        if (view.state.doc.length !== tab.sql.length || view.state.doc.toString() !== tab.sql) {
+          view.dispatch({ ...fullReplace(view.state, tab.sql), annotations: syncAnnotations() });
+        }
+        return;
+      }
+      if (ids.has(shownTabId)) tabStates.set(shownTabId, view.state); // park the outgoing tab (undo intact); a just-closed tab isn't kept
+      let next = tabStates.get(tab.id) || null;
+      if (next) {
+        // A parked state may predate a refData arrival or an external tab.sql
+        // write — re-apply the current language and reconcile the doc via
+        // detached updates (undo history survives; no view listener fires).
+        next = next.update({ effects: langCompartment.reconfigure(langExt) }).state;
+        if (next.doc.length !== tab.sql.length || next.doc.toString() !== tab.sql) {
+          next = next.update({ ...fullReplace(next, tab.sql), annotations: syncAnnotations() }).state;
+        }
+        // Collapse the restored selection to its head: an invisible parked
+        // selection would silently retarget ⌘↵/Export (which read
+        // getSelection() without a focus check) — the old adapter's
+        // value-reassignment collapsed it too.
+        const head = clamp(next.selection.main.head, 0, next.doc.length);
+        next = next.update({ selection: { anchor: head }, annotations: syncAnnotations() }).state;
+      } else {
+        next = freshState(tab.sql);
+      }
+      shownTabId = tab.id;
+      view.setState(next); // setState is not a transaction — nothing emits
+    },
+    refreshReference: () => {
+      // Server keyword/function sets arrived (#25): swap the dialect on the
+      // live view. Parked tab states get it on restore (syncFromState).
+      langExt = langExtensionFor(app);
+      if (view) view.dispatch({ effects: langCompartment.reconfigure(langExt) });
+    },
+    onDocChange: (cb) => { subs.add(cb); return () => subs.delete(cb); },
+  };
+}
diff --git a/src/editor/editor-complete.js b/src/editor/editor-complete.js
deleted file mode 100644
index e1caabac..00000000
--- a/src/editor/editor-complete.js
+++ /dev/null
@@ -1,165 +0,0 @@
-// Autocomplete dropdown (#26). Reads the in-memory completion candidates built
-// once per connection (#25) and ranks them client-side — never a query on the
-// keystroke path. The editor wires this in: it calls refresh() on every text
-// change, delegates nav keys via handleKeydown(), and supplies the caret anchor
-// + an undoable replaceRange for accepting a candidate.
-//
-// host = {
-//   textarea,
-//   getCompletions(),                 // () => candidate list (or [])
-//   replaceRange(from, to, text, caretBack?), // undoable edit; caretBack pulls
-//                                              // the caret left from the end
-//   caretAnchor(),                    // () => {x, y, lineHeight} in screen px
-//   appendPopover(el),                // mount the dropdown
-//   suppressed(),                     // () => true to stay hidden (e.g. find open)
-//   fetchDoc(name),                   // () => Promise<string> — lazy, cached function doc
-//   getKeywordDocs(),                 // () => { KEYWORD: doc } for the footer
-// }
-
-import { h } from '../ui/dom.js';
-import { completionContext, rankCompletions } from '../core/completions.js';
-
-// Debounce the footer's function-description fetch so holding ↓ through a long
-// list doesn't fire a query per row — only the row you settle on is fetched
-// (then cached). Keyword docs are static and render with no delay.
-const FOOTER_DOC_DELAY = 150;
-
-// Kind → glyph + color for the row chip (presentation; the data is in core).
-const KIND_META = {
-  keyword: { glyph: 'K', color: '#C586C0' },
-  fn: { glyph: 'ƒ', color: '#DCDCAA' },
-  agg: { glyph: 'Σ', color: '#E0B341' },
-  cast: { glyph: '⇄', color: '#4FC1FF' },
-  table: { glyph: '▦', color: 'var(--accent)' },
-  column: { glyph: '▪', color: '#92E1D8' },
-  db: { glyph: '◈', color: '#A0A0A8' },
-  format: { glyph: '≡', color: '#A0A0A8' },
-};
-
-export function createComplete(host) {
-  const ta = host.textarea;
-  const state = { open: false, items: [], active: 0, ctx: null };
-  let pop = null;          // { el, list, footer } — built lazily
-  let accepting = false;   // guards the input fired by our own accept edit
-  let footerTimer = null;  // debounce for the lazy function-doc fetch
-  let footerSeq = 0;       // ignore a doc fetch that resolves after the active row moved
-
-  const hide = () => {
-    if (!state.open) return;
-    state.open = false;
-    clearTimeout(footerTimer);
-    if (pop) { pop.el.remove(); pop = null; }
-  };
-
-  // Render the footer's description line (or hide the footer when there's none).
-  const setFooter = (doc) => {
-    pop.footer.replaceChildren();
-    if (doc) {
-      pop.footer.appendChild(h('div', { class: 'ac-doc' }, doc));
-      pop.footer.style.display = '';
-    } else {
-      pop.footer.style.display = 'none';
-    }
-  };
-
-  // Re-evaluate completion at the caret and show/hide the dropdown.
-  const refresh = () => {
-    if (accepting || host.suppressed() || ta.selectionStart !== ta.selectionEnd) { hide(); return; }
-    const ctx = completionContext(ta.value, ta.selectionStart);
-    if (!ctx.qualified && ctx.word.length < 1) { hide(); return; } // need ≥1 char or a dot
-    const items = rankCompletions(host.getCompletions(), ctx);
-    if (!items.length) { hide(); return; }
-    state.open = true;
-    state.items = items;
-    state.active = 0;
-    state.ctx = ctx;
-    render();
-  };
-
-  const accept = (item) => {
-    accepting = true; // the resulting 'input' must not re-trigger the dropdown
-    host.replaceRange(state.ctx.from, state.ctx.to, item.insert, item.caretBack || 0);
-    accepting = false;
-    hide();
-  };
-
-  const move = (delta) => {
-    state.active = (state.active + delta + state.items.length) % state.items.length;
-    render();
-  };
-
-  const CARET_MOVERS = new Set(['ArrowLeft', 'ArrowRight', 'Home', 'End', 'PageUp', 'PageDown']);
-  const handleKeydown = (e) => {
-    if (!state.open) return false;
-    if (e.key === 'ArrowDown') { e.preventDefault(); move(1); return true; }
-    if (e.key === 'ArrowUp') { e.preventDefault(); move(-1); return true; }
-    if (e.key === 'Enter' || e.key === 'Tab') {
-      // A modified Enter/Tab is a run/format/blur chord, not "accept" — dismiss
-      // and let it bubble (otherwise ⌘↵ would splice a token *and* run).
-      if (e.metaKey || e.ctrlKey || e.altKey) { hide(); return false; }
-      e.preventDefault(); accept(state.items[state.active]); return true;
-    }
-    if (e.key === 'Escape') { e.preventDefault(); hide(); return true; }
-    // A caret-moving key makes the tracked word range stale (refresh only runs
-    // on input) — dismiss and let the caret move, so a later accept can't
-    // overwrite text at the old position.
-    if (CARET_MOVERS.has(e.key)) { hide(); return false; }
-    return false;
-  };
-
-  function render() {
-    if (!pop) {
-      const list = h('div', { class: 'ac-list' });
-      const footer = h('div', { class: 'ac-footer' });
-      pop = { el: h('div', { class: 'ac-dropdown' }, list, footer), list, footer };
-      host.appendPopover(pop.el);
-    }
-    const anchor = host.caretAnchor();
-    pop.el.style.left = Math.round(anchor.x) + 'px';
-    pop.el.style.top = Math.round(anchor.y + anchor.lineHeight) + 'px';
-
-    // replaceChildren resets scrollTop to 0; track the active row so we can pull
-    // it back into view below (otherwise it stays hidden below the fold).
-    pop.list.replaceChildren();
-    let activeRow = null;
-    state.items.forEach((it, i) => {
-      const meta = KIND_META[it.kind] || KIND_META.fn;
-      const row = h('div', {
-        class: 'ac-row' + (i === state.active ? ' on' : ''),
-        // mousedown (not click) so we beat the textarea's blur-driven hide.
-        onmousedown: (ev) => { ev.preventDefault(); accept(it); },
-      },
-        h('span', { class: 'ac-chip', style: { color: meta.color } }, meta.glyph),
-        h('span', { class: 'ac-label' }, it.label),
-        h('span', { class: 'ac-detail' }, it.detail || ''));
-      if (i === state.active) activeRow = row;
-      pop.list.appendChild(row);
-    });
-    if (activeRow) activeRow.scrollIntoView({ block: 'nearest' });
-
-    // Footer = the active entry's DESCRIPTION (the params already show in the row's
-    // detail column, so we don't repeat them). Keyword docs are static; function
-    // docs are fetched lazily + cached, debounced so navigating doesn't spam queries.
-    const cur = state.items[state.active];
-    clearTimeout(footerTimer);
-    if (cur.kind === 'keyword') {
-      setFooter(host.getKeywordDocs()[cur.label.toUpperCase()] || '');
-    } else if (cur.kind === 'fn' || cur.kind === 'agg' || cur.kind === 'cast') {
-      setFooter(''); // hide until the lazily-fetched description arrives
-      const seq = ++footerSeq;
-      footerTimer = setTimeout(() => {
-        Promise.resolve(host.fetchDoc(cur.label)).then((doc) => {
-          if (doc && seq === footerSeq && pop) setFooter(doc);
-        });
-      }, FOOTER_DOC_DELAY);
-    } else {
-      setFooter(''); // tables/columns/db: the detail column already shows what we know
-    }
-  }
-
-  // Dismiss when focus leaves (deferred so a row mousedown can land) or on scroll.
-  ta.addEventListener('blur', () => setTimeout(hide, 120));
-  ta.addEventListener('scroll', hide);
-
-  return { isOpen: () => state.open, refresh, hide, handleKeydown };
-}
diff --git a/src/editor/editor-intel.js b/src/editor/editor-intel.js
deleted file mode 100644
index 18bd84fa..00000000
--- a/src/editor/editor-intel.js
+++ /dev/null
@@ -1,133 +0,0 @@
-// Editor intelligence (#27): signature help + hover docs, both driven off the
-// in-memory reference data loaded once per connection (#25) — never a query on
-// the keystroke path. Signature help follows the caret inside a function call;
-// hover docs come from the textarea's mousemove (the only layer with pointer
-// events — .sql-pre / the overlay are pointer-events:none).
-//
-// host = {
-//   textarea,
-//   maskedValue(),          // () => the text with string/comment chars masked (#2)
-//   getFunctions(),         // () => { name: {sig, ret, kind} }
-//   getKeywordDocs(),       // () => { KEYWORD: doc }
-//   fetchDoc(name),         // () => Promise<string> — lazy, cached hover doc for a function
-//   caretAnchor(),          // () => {x, y, lineHeight} in screen px (shared with #26)
-//   offsetAt(cx, cy),       // map mouse client coords → text offset (or null)
-//   clientToLocal(cx, cy),  // map mouse client coords → the popover's local CSS px (zoom)
-//   appendPopover(el),
-//   suppressed(),           // () => true to stay hidden (find / autocomplete open)
-// }
-
-const HOVER_DWELL_MS = 350;
-
-import { h } from '../ui/dom.js';
-import { signatureContext, wordAt } from '../core/completions.js';
-
-export function createIntel(host) {
-  const ta = host.textarea;
-  let sigEl = null;          // signature popover
-  let hoverEl = null;        // hover card
-  let hoverTimer = null;
-
-  const hideSig = () => { if (sigEl) { sigEl.remove(); sigEl = null; } };
-  const hideHover = () => { if (hoverEl) { hoverEl.remove(); hoverEl = null; } };
-  const hide = () => { hideSig(); hideHover(); };
-
-  // Functions are keyed by the server's canonical name (usually lowercase: count,
-  // substring; a few uppercase: CAST). SQL is case-insensitive for function calls,
-  // so resolve the typed word against exact/lower/upper — matching autocomplete,
-  // which lower-cases both sides (#27). Returns { name: canonical, meta } or null.
-  const lookupFn = (word) => {
-    const fns = host.getFunctions();
-    if (fns[word]) return { name: word, meta: fns[word] };
-    const lo = word.toLowerCase();
-    if (fns[lo]) return { name: lo, meta: fns[lo] };
-    const up = word.toUpperCase();
-    if (fns[up]) return { name: up, meta: fns[up] };
-    return null;
-  };
-
-  // ── signature help (caret-driven) ──────────────────────────────────────────
-  const refreshSignature = () => {
-    if (host.suppressed() || ta.selectionStart !== ta.selectionEnd) { hideSig(); return; }
-    // Scan the string/comment-masked text so a comma inside a literal isn't
-    // counted as an argument separator (#2 review). Function names are code, so
-    // ctx.name is intact in the mask.
-    const ctx = signatureContext(host.maskedValue(), ta.selectionStart);
-    const found = ctx && lookupFn(ctx.name);
-    if (!found) { hideSig(); return; }
-    const meta = found.meta;
-    const sig = meta.sig; // always "name(…)" — the loader guarantees a () fallback
-    // Strip the optional-param brackets ClickHouse syntax uses (`name(a, b[, c])`)
-    // before splitting on commas, so the parts align with signatureContext's
-    // depth-0 comma count and the active-arg highlight lands right (#2 review).
-    const inner = sig.slice(sig.indexOf('(') + 1, sig.lastIndexOf(')')).replace(/[[\]]/g, '');
-    const args = inner.split(',');
-    const parts = [h('span', { class: 'sig-name' }, ctx.name), '('];
-    args.forEach((a, i) => {
-      parts.push(h('span', { class: i === ctx.argIdx ? 'sig-arg on' : 'sig-arg' }, a.trim()));
-      if (i < args.length - 1) parts.push(', ');
-    });
-    parts.push(')');
-    if (meta.ret) parts.push(h('span', { class: 'sig-ret' }, ' → ' + meta.ret));
-    if (!sigEl) { sigEl = h('div', { class: 'sig-help' }); host.appendPopover(sigEl); }
-    sigEl.replaceChildren(...parts);
-    const anchor = host.caretAnchor();
-    sigEl.style.left = Math.round(anchor.x) + 'px';
-    sigEl.style.top = Math.round(Math.max(4, anchor.y - anchor.lineHeight - 6)) + 'px'; // above the caret
-  };
-
-  // ── hover docs (mouse-driven, dwell; doc text fetched lazily + cached) ──────
-  let hoverToken = 0; // bumped each dwell so a late doc fetch for a stale word is ignored
-  const onMouseMove = (e) => {
-    clearTimeout(hoverTimer);
-    if (host.suppressed()) { hideHover(); return; }
-    const cx = e.clientX;
-    const cy = e.clientY;
-    hoverTimer = setTimeout(() => {
-      const pos = host.offsetAt(cx, cy);
-      // Resolve the hovered word from the string/comment-masked text (literal
-      // chars are NUL), so hovering a word inside a string or comment shows no
-      // phantom doc card — consistent with signature help (#1 review).
-      const w = pos == null ? null : wordAt(host.maskedValue(), pos);
-      if (!w) { hideHover(); return; }
-      const token = ++hoverToken;
-      const found = lookupFn(w.word);
-      const kw = host.getKeywordDocs()[w.word.toUpperCase()];
-      if (found) {
-        // Show the signature immediately; the description is fetched on demand by
-        // the canonical name (a separate query, cached per entity) and filled in
-        // when it arrives — unless the pointer has since moved to another token.
-        const meta = found.meta;
-        renderHover({ sig: meta.sig, ret: meta.ret, doc: '', x: cx, y: cy });
-        Promise.resolve(host.fetchDoc(found.name)).then((doc) => {
-          if (doc && token === hoverToken && hoverEl) renderHover({ sig: meta.sig, ret: meta.ret, doc, x: cx, y: cy });
-        });
-      } else if (kw) {
-        renderHover({ sig: w.word.toUpperCase(), doc: kw, x: cx, y: cy });
-      } else {
-        hideHover();
-      }
-    }, HOVER_DWELL_MS);
-  };
-  const onMouseLeave = () => { clearTimeout(hoverTimer); hideHover(); };
-
-  function renderHover({ sig, ret, doc, x, y }) {
-    if (!hoverEl) { hoverEl = h('div', { class: 'hover-card' }); host.appendPopover(hoverEl); }
-    hoverEl.replaceChildren(...[
-      h('div', { class: 'hover-sig' }, sig, ret ? h('span', { class: 'hover-ret' }, ' → ' + ret) : null),
-      doc ? h('div', { class: 'hover-doc' }, doc) : null,
-    ].filter(Boolean));
-    const loc = host.clientToLocal(x, y);
-    hoverEl.style.left = Math.round(loc.x) + 'px';
-    hoverEl.style.top = Math.round(loc.y + 16) + 'px';
-  }
-
-  // Esc dismisses the signature popover (only when it's showing, so a running
-  // query's Esc-to-cancel still works otherwise).
-  const handleKeydown = (e) => {
-    if (e.key === 'Escape' && sigEl) { e.preventDefault(); hideSig(); return true; }
-    return false;
-  };
-
-  return { refreshSignature, onMouseMove, onMouseLeave, handleKeydown, hide };
-}
diff --git a/src/editor/editor-search.js b/src/editor/editor-search.js
deleted file mode 100644
index 95c9889b..00000000
--- a/src/editor/editor-search.js
+++ /dev/null
@@ -1,181 +0,0 @@
-// In-editor find/replace panel (#23). A floating panel over the editor, driven
-// by the pure matcher in core/editor-search.js. Match highlights are drawn by
-// the editor's transparent mark overlay — this module only owns the panel UI,
-// the search state, and the Cmd/Ctrl+F trigger; it hands its marks to the
-// editor via `host.repaintMarks()` and edits text via `host.replaceRange`.
-//
-// host = {
-//   area,                         // .sql-area element to mount the panel into
-//   textarea,                     // the editor <textarea>
-//   padY, lineHeightPx,           // editor metrics for centering a match
-//   replaceRange(start, end, txt),// undoable edit that fires 'input'
-//   syncScroll(),                 // re-sync overlay/pre/gutter after we scroll
-//   repaintMarks(),               // ask the editor to repaint the mark overlay
-// }
-
-import { h } from '../ui/dom.js';
-import { Icon } from '../ui/icons.js';
-import { findMatches, validRegex } from '../core/editor-search.js';
-import { caretLineCol } from '../core/editor-geometry.js';
-
-export function createSearch(host) {
-  const ta = host.textarea;
-  const state = {
-    open: false, query: '', replace: '', showReplace: false,
-    opts: { caseSensitive: false, wholeWord: false, regex: false },
-    matches: [], active: 0,
-  };
-  let panel = null; // built lazily on first open; cleared on close
-
-  // Re-run the matcher against the current text and clamp the active index, then
-  // refresh the panel (so editing the editor updates the count). The editor
-  // calls this on every text change; the overlay repaint is the caller's job.
-  const recompute = () => {
-    state.matches = state.open && state.query
-      ? findMatches(ta.value, state.query, state.opts)
-      : [];
-    if (state.active >= state.matches.length) {
-      state.active = state.matches.length ? state.matches.length - 1 : 0;
-    }
-    updatePanel();
-  };
-
-  // The marks the editor overlays: every match 'match', the active one 'active'.
-  const marks = () => (state.open
-    ? state.matches.map((m, i) => ({ start: m.start, end: m.end, cls: i === state.active ? 'active' : 'match' }))
-    : []);
-
-  const refresh = () => { recompute(); host.repaintMarks(); };
-  // A new query / option set invalidates the current position — start at the
-  // first match so the active highlight + count don't point at a stale index.
-  const refreshFromStart = () => { state.active = 0; refresh(); };
-
-  const scrollToActive = () => {
-    const m = state.matches[state.active]; // goto/doReplace guarantee a match first
-    const { line } = caretLineCol(ta.value, m.start);
-    const top = host.padY + line * host.lineHeightPx; // pixel top within the scrolled content
-    if (top < ta.scrollTop || top + host.lineHeightPx > ta.scrollTop + ta.clientHeight) {
-      ta.scrollTop = Math.max(0, top - ta.clientHeight / 2);
-      host.syncScroll();
-    }
-  };
-
-  const goto = (idx) => {
-    if (!state.matches.length) return;
-    state.active = (idx + state.matches.length) % state.matches.length;
-    scrollToActive();
-    host.repaintMarks();
-    updatePanel();
-  };
-
-  const doReplace = () => {
-    const m = state.matches[state.active];
-    if (!m) return;
-    host.replaceRange(m.start, m.end, state.replace); // fires input → editor recomputes
-    if (state.matches.length) scrollToActive(); // bring the now-active match into view
-    panel.input.focus();
-  };
-  const doReplaceAll = () => {
-    if (!state.matches.length) return;
-    let out = '';
-    let last = 0;
-    for (const m of state.matches) { out += ta.value.slice(last, m.start) + state.replace; last = m.end; }
-    out += ta.value.slice(last);
-    host.replaceRange(0, ta.value.length, out);
-    panel.input.focus();
-  };
-
-  function updatePanel() {
-    if (!panel) return;
-    const bad = !validRegex(state.query, state.opts.regex);
-    panel.input.classList.toggle('bad', bad);
-    panel.counter.classList.toggle('bad', bad);
-    panel.counter.textContent = bad ? 'bad re'
-      : state.matches.length ? (state.active + 1) + '/' + state.matches.length : '0/0';
-    for (const k of Object.keys(panel.toggles)) panel.toggles[k].classList.toggle('on', state.opts[k]);
-    panel.disc.classList.toggle('open', state.showReplace);
-    const shown = panel.rows.contains(panel.replaceRow);
-    if (state.showReplace && !shown) panel.rows.appendChild(panel.replaceRow);
-    else if (!state.showReplace && shown) panel.replaceRow.remove();
-  }
-
-  function buildPanel() {
-    const input = h('input', {
-      class: 'srch-field', placeholder: 'Find', spellcheck: 'false',
-      oninput: (e) => { state.query = e.target.value; refreshFromStart(); },
-      onkeydown: (e) => {
-        if (e.key === 'Enter') { e.preventDefault(); goto(state.active + (e.shiftKey ? -1 : 1)); }
-        else if (e.key === 'Escape') { e.preventDefault(); close(); }
-      },
-    });
-    const counter = h('span', { class: 'srch-count' });
-    const navBtn = (label, title, onclick) => h('button', { class: 'srch-nav', title, onclick }, label);
-    const togBtn = (key, label, title) => h('button', {
-      class: 'srch-tog', title,
-      onclick: () => { state.opts[key] = !state.opts[key]; refreshFromStart(); },
-    }, label);
-    const toggles = {
-      caseSensitive: togBtn('caseSensitive', 'Aa', 'Match case'),
-      wholeWord: togBtn('wholeWord', 'W', 'Whole word'),
-      regex: togBtn('regex', '.*', 'Regular expression'),
-    };
-    const findRow = h('div', { class: 'srch-row' },
-      input, counter,
-      navBtn('↑', 'Previous (⇧⏎)', () => goto(state.active - 1)),
-      navBtn('↓', 'Next (⏎)', () => goto(state.active + 1)),
-      h('div', { class: 'srch-togs' }, toggles.caseSensitive, toggles.wholeWord, toggles.regex),
-      h('button', { class: 'srch-nav', title: 'Close (Esc)', onclick: close }, Icon.close()));
-
-    const replaceInput = h('input', {
-      class: 'srch-field', placeholder: 'Replace', spellcheck: 'false',
-      oninput: (e) => { state.replace = e.target.value; },
-      onkeydown: (e) => {
-        if (e.key === 'Enter') { e.preventDefault(); doReplace(); }
-        else if (e.key === 'Escape') { e.preventDefault(); close(); }
-      },
-    });
-    const replaceRow = h('div', { class: 'srch-row' },
-      replaceInput,
-      h('button', { class: 'srch-btn', title: 'Replace (⏎)', onclick: doReplace }, 'Replace'),
-      h('button', { class: 'srch-btn primary', title: 'Replace all', onclick: doReplaceAll }, 'All'));
-
-    const disc = h('button', {
-      class: 'srch-disc', title: 'Toggle replace',
-      onclick: () => { state.showReplace = !state.showReplace; updatePanel(); },
-    }, Icon.chev());
-    const rows = h('div', { class: 'srch-rows' }, findRow);
-    const el = h('div', { class: 'sql-search' }, disc, rows);
-    panel = { el, input, counter, toggles, disc, rows, replaceRow };
-    host.area.appendChild(el);
-  }
-
-  const open = () => {
-    if (!state.open) {
-      state.open = true;
-      if (!panel) buildPanel();
-      else host.area.appendChild(panel.el);
-      refresh();
-    }
-    panel.input.focus();
-    panel.input.select();
-  };
-
-  function close() {
-    if (!state.open) return;
-    state.open = false;
-    if (panel) panel.el.remove();
-    host.repaintMarks(); // clear the highlights
-    ta.focus();
-  }
-
-  // Cmd/Ctrl+F on the textarea — registered here so the browser's native find
-  // can't intercept it before a global handler (resolved design decision).
-  ta.addEventListener('keydown', (e) => {
-    if ((e.metaKey || e.ctrlKey) && (e.key === 'f' || e.key === 'F')) {
-      e.preventDefault();
-      open();
-    }
-  });
-
-  return { isOpen: () => state.open, marks, recompute, open, close };
-}
diff --git a/src/editor/textarea-adapter.js b/src/editor/textarea-adapter.js
deleted file mode 100644
index 5ecc8bd1..00000000
--- a/src/editor/textarea-adapter.js
+++ /dev/null
@@ -1,463 +0,0 @@
-// The textarea EditorPort adapter (#143): a textarea overlaid on a
-// syntax-highlighted <pre>, with a line-number gutter. Highlighting reuses the
-// pure tokenizer in core. The app talks to the editor only through the
-// EditorPort returned by `createTextareaEditor` (see editor-port.js);
-// everything else in this file is adapter-internal. Replaced wholesale by the
-// CodeMirror 6 adapter when #21 lands.
-
-import { h, zoomScale } from '../ui/dom.js';
-import { tokenize, maskFromTokens } from '../core/sql-highlight.js';
-import { buildMarkSegments } from '../core/editor-marks.js';
-import { matchBracketAt, bracketEdit } from '../core/editor-brackets.js';
-import { caretXY, caretLineCol, offsetFromXY } from '../core/editor-geometry.js';
-import { toSubquery } from '../core/format.js';
-import { createSearch } from './editor-search.js';
-import { createComplete } from './editor-complete.js';
-import { createIntel } from './editor-intel.js';
-import { activeTab } from '../state.js';
-import { IDENT_MIME, SUBQUERY_MIME } from '../ui/dnd-mime.js';
-
-// Editor layout metrics (kept in lockstep with .sql-editor in styles.css):
-// integer line-height so the textarea and overlay <pre>s lay out identically.
-const LINE_HEIGHT_PX = 22;
-const PAD_Y = 12;
-const PAD_X = 14;
-// Width of one monospace glyph at the editor's 13px font — a constant (the font
-// is fixed) used only to anchor the autocomplete popover near the caret (#26).
-const CHAR_WIDTH_PX = 7.8;
-
-/**
- * Paint tokenized SQL into `preEl` (whitespace as text, tokens as spans).
- * `opts` (optional) forwards dynamic keyword/function sets to the tokenizer so
- * highlighting tracks the connected server's `system.keywords`/`functions`
- * (#25); omitted → the tokenizer's built-in sets.
- */
-export function renderHighlightInto(preEl, sql, opts) {
-  renderTokensInto(preEl, tokenize(sql, opts));
-}
-
-// Paint an already-tokenized stream into `preEl`. Split out so the editor's
-// keystroke path can tokenize ONCE and feed both the highlighter and the
-// literal mask, instead of tokenizing the buffer twice per keystroke (#5 review).
-export function renderTokensInto(preEl, tokens) {
-  preEl.replaceChildren();
-  for (const [t, v] of tokens) {
-    if (t === 'ws') {
-      preEl.appendChild(document.createTextNode(v));
-    } else {
-      const sp = document.createElement('span');
-      sp.className = 'sql-' + t;
-      sp.textContent = v;
-      preEl.appendChild(sp);
-    }
-  }
-  preEl.appendChild(document.createTextNode('\n'));
-}
-
-function gutterLines(sql) {
-  const count = sql.split('\n').length;
-  return Array.from({ length: count }, (_, i) => h('div', null, String(i + 1)));
-}
-
-/**
- * The textarea editor behind the EditorPort seam (#143). Port methods read the
- * `app.dom.editor*` refs at call time — never closure state from a particular
- * mount — so they tolerate pre-mount calls and re-mounting (renderApp resets
- * `app.dom`, then mount() re-registers fresh internals). A future adapter
- * (#21) must keep that property: closing over one mount's internals goes stale
- * on the next renderApp. destroy() is terminal (see editor-port.js).
- * @returns {import('./editor-port.js').EditorPort}
- */
-export function createTextareaEditor(app) {
-  // Doc-change subscribers: the adapter emits on every text change; the
-  // app-level subscriber owns the state writes (tab.sql/dirty) and the
-  // dependent repaints the input handler used to perform itself.
-  const subs = new Set();
-  const emit = (value) => { for (const cb of subs) cb(value); };
-  return {
-    mount: (container) => mountEditor(app, container, emit),
-    destroy: () => { subs.clear(); },
-    focus: () => { const ta = app.dom.editorTextarea; if (ta) ta.focus(); },
-    hasFocus: () => {
-      const ta = app.dom.editorTextarea;
-      return !!ta && app.document.activeElement === ta;
-    },
-    getValue: () => { const ta = app.dom.editorTextarea; return ta ? ta.value : ''; },
-    getSelection: () => {
-      const ta = app.dom.editorTextarea;
-      if (!ta) return { start: 0, end: 0, text: '' };
-      return { start: ta.selectionStart, end: ta.selectionEnd, text: ta.value.slice(ta.selectionStart, ta.selectionEnd) };
-    },
-    insertAtCursor: (text) => insertAtCursor(app, text),
-    replaceDocument: (text) => replaceEditor(app, text),
-    revealOffset: (pos) => { if (app.dom.editorRevealCaret) app.dom.editorRevealCaret(pos); },
-    syncFromState: () => { if (app.dom.editorSync) app.dom.editorSync(); },
-    // Zero-behavior-change (#143): refData arrival runs the same full sync()
-    // the old app.dom.editorSync call site did — including hiding the popovers
-    // and reassigning ta.value. A caret/popover-preserving re-tokenize is
-    // deliberately deferred to the CM6 adapter (#21).
-    refreshReference: () => { if (app.dom.editorSync) app.dom.editorSync(); },
-    onDocChange: (cb) => { subs.add(cb); return () => subs.delete(cb); },
-  };
-}
-
-/**
- * Mount the editor into `container`. Registers app.dom.editor* refs and an
- * app.dom.editorSync() that re-reads the active tab into the view.
- * `emitDocChange(value)` fires on every text change (see createTextareaEditor).
- */
-function mountEditor(app, container, emitDocChange = () => {}) {
-  const gutter = h('div', { class: 'sql-gutter' });
-  // Mark overlay: a transparent <pre> below the token <pre>, carrying only the
-  // search/bracket highlight backgrounds (#23/#24) — the token render path is
-  // never touched. DOM order = paint order: overlay, then tokens, then textarea.
-  const markPre = document.createElement('pre');
-  markPre.className = 'sql-mark-overlay';
-  markPre.setAttribute('aria-hidden', 'true');
-  const pre = document.createElement('pre');
-  pre.className = 'sql-pre';
-  const ta = document.createElement('textarea');
-  ta.className = 'sql-textarea';
-  ta.spellcheck = false;
-  const area = h('div', { class: 'sql-area' }, markPre, pre, ta);
-  container.replaceChildren(h('div', { class: 'sql-editor' }, gutter, area));
-
-  // Tokenize the buffer ONCE per (text, reference-data) change and reuse the
-  // token list for BOTH the syntax highlighter and the literal mask, instead of
-  // tokenizing twice per keystroke (#5 review). Re-tokenize when app.refData
-  // changes too (server keyword/func sets arrive after connect), else the
-  // re-highlight would use stale tokens. String/comment classification is
-  // opt-independent, so the highlighter's token list is valid for the mask.
-  let tokVal = null;
-  let tokRef = null;
-  let tokList = [];
-  let maskOut = '';
-  const recompute = () => {
-    const ref = app.refData;
-    if (ta.value === tokVal && ref === tokRef) return;
-    tokVal = ta.value;
-    tokRef = ref;
-    tokList = tokenize(ta.value, ref ? { keywords: ref.keywordSet, funcs: ref.funcSet } : undefined);
-    maskOut = maskFromTokens(tokList);
-  };
-  const paintTokens = (sql) => {
-    recompute(); // sql === ta.value at every call site (sync sets ta.value first)
-    renderTokensInto(pre, tokList);
-    gutter.replaceChildren(...gutterLines(sql));
-  };
-  // The text with string/comment/backtick-ident chars masked to NUL. Bracket
-  // matching, signature help, and the auto-close decision run on this so
-  // literals' brackets/quotes/commas don't pair or count (#2 review).
-  const masked = () => { recompute(); return maskOut; };
-  // All highlight sources, aggregated for the overlay: search matches (#23) or,
-  // when search is closed and the caret is collapsed, the bracket pair adjacent
-  // to the caret (#24).
-  const computeMarks = () => {
-    const marks = search.marks();
-    if (!search.isOpen() && ta.selectionStart === ta.selectionEnd) {
-      const bp = matchBracketAt(masked(), ta.selectionStart);
-      if (bp) {
-        marks.push({ start: bp[0], end: bp[0] + 1, cls: 'bracket' });
-        marks.push({ start: bp[1], end: bp[1] + 1, cls: 'bracket' });
-      }
-    }
-    return marks;
-  };
-  const paintMarks = () => {
-    const marks = computeMarks();
-    // Common case (no search, caret not on a bracket): keep the keystroke path
-    // cheap — clear the overlay once and skip rebuilding a full-document node.
-    if (!marks.length) {
-      if (markPre.firstChild) markPre.replaceChildren();
-      return;
-    }
-    markPre.replaceChildren();
-    for (const seg of buildMarkSegments(ta.value, marks)) {
-      if (seg.cls) {
-        const sp = document.createElement('span');
-        sp.className = 'mark-' + seg.cls;
-        sp.textContent = seg.text;
-        markPre.appendChild(sp);
-      } else {
-        markPre.appendChild(document.createTextNode(seg.text));
-      }
-    }
-    markPre.appendChild(document.createTextNode('\n'));
-  };
-  const syncScroll = () => {
-    pre.scrollTop = ta.scrollTop;
-    pre.scrollLeft = ta.scrollLeft;
-    markPre.scrollTop = ta.scrollTop;
-    markPre.scrollLeft = ta.scrollLeft;
-    gutter.scrollTop = ta.scrollTop;
-  };
-  // Set the textarea selection to a range and replace it (undoable, fires input).
-  // `caretBack` pulls the caret left from the end of the inserted text — used by
-  // function completion to land it between the just-inserted `()`.
-  const replaceRange = (start, end, text, caretBack = 0) => {
-    ta.focus();
-    ta.selectionStart = start;
-    ta.selectionEnd = end;
-    applyEdit(ta, text);
-    if (caretBack) ta.selectionStart = ta.selectionEnd = start + text.length - caretBack;
-  };
-  // Apply a structural bracket edit (#24) while PRESERVING the native undo stack.
-  // A direct `ta.value = …` assignment wipes ⌘Z, so instead express the edit as a
-  // single execCommand over the changed range (insertText, or delete for an
-  // empty-pair Backspace) — the same undo-friendly path applyEdit uses — derived
-  // by diffing the old/new value. Type-over (no value change) is a pure caret
-  // move. Then place the structural caret and re-sync the caret-driven UI
-  // (execCommand fired 'input' at the post-edit caret; a type-over fires none).
-  const applyBracketEdit = (edit) => {
-    const before = ta.value;
-    if (before !== edit.value) {
-      const { from, to, ins } = bracketDiff(before, edit.value);
-      ta.focus();
-      ta.selectionStart = from;
-      ta.selectionEnd = to;
-      try {
-        if (ins) ta.ownerDocument.execCommand('insertText', false, ins);
-        else ta.ownerDocument.execCommand('delete', false);
-      } catch { /* unsupported */ }
-      // Same Firefox guard as applyEdit: execCommand can report success without
-      // touching the <textarea>, so fall back on the *value*, not the return.
-      if (ta.value === before) { ta.value = edit.value; ta.dispatchEvent(new Event('input')); }
-    }
-    ta.selectionStart = edit.selStart;
-    ta.selectionEnd = edit.selEnd;
-    paintMarks();
-    intel.refreshSignature();
-  };
-
-  const search = createSearch({
-    area, textarea: ta, padY: PAD_Y, lineHeightPx: LINE_HEIGHT_PX,
-    replaceRange, syncScroll, repaintMarks: paintMarks,
-  });
-
-  // Screen-space caret position for the autocomplete popover.
-  const caretAnchor = () => {
-    const { x, y } = caretXY(ta.value, ta.selectionStart, {
-      charWidth: CHAR_WIDTH_PX, lhPx: LINE_HEIGHT_PX, padX: PAD_X, padY: PAD_Y,
-      scrollTop: ta.scrollTop, scrollLeft: ta.scrollLeft,
-    });
-    const rect = ta.getBoundingClientRect();
-    // getBoundingClientRect is in post-zoom px while x/y are CSS px; bridge the
-    // html{zoom} gap via the shared zoomScale helper (also used by results.js).
-    const scale = zoomScale(ta);
-    return { x: rect.left / scale + x, y: rect.top / scale + y, lineHeight: LINE_HEIGHT_PX };
-  };
-  const complete = createComplete({
-    textarea: ta,
-    getCompletions: () => app.completions || [],
-    replaceRange,
-    caretAnchor,
-    appendPopover: (el) => area.appendChild(el),
-    suppressed: () => search.isOpen(),
-    fetchDoc: (name) => app.entityDoc(name), // lazy + cached function description (#27)
-    getKeywordDocs: () => (app.refData ? app.refData.keywordDocs : {}),
-  });
-
-  // Map a mouse position to a text offset for hover docs (#27). Mirrors
-  // caretAnchor's html{zoom} handling, inverted.
-  const offsetAt = (clientX, clientY) => {
-    const rect = ta.getBoundingClientRect();
-    const scale = zoomScale(ta);
-    const relX = (clientX - rect.left) / scale - PAD_X + ta.scrollLeft;
-    const relY = (clientY - rect.top) / scale - PAD_Y + ta.scrollTop;
-    return offsetFromXY(ta.value, relX, relY, { charWidth: CHAR_WIDTH_PX, lhPx: LINE_HEIGHT_PX });
-  };
-  // Client (post-zoom) coords → the popover's local CSS px. The popovers are
-  // fixed children of the html{zoom} tree, so their left/top are scaled on
-  // paint; divide by the same scale offsetAt/caretAnchor use so the hover card
-  // lands on the cursor (#27).
-  const clientToLocal = (clientX, clientY) => {
-    const scale = zoomScale(ta);
-    return { x: clientX / scale, y: clientY / scale };
-  };
-  const intel = createIntel({
-    textarea: ta,
-    maskedValue: masked, // string/comment-masked text for signatureContext (#2 review)
-    getFunctions: () => (app.refData ? app.refData.functions : {}),
-    getKeywordDocs: () => (app.refData ? app.refData.keywordDocs : {}),
-    fetchDoc: (name) => app.entityDoc(name),
-    caretAnchor,
-    offsetAt,
-    clientToLocal,
-    appendPopover: (el) => area.appendChild(el),
-    suppressed: () => search.isOpen() || complete.isOpen(),
-  });
-
-  const sync = () => {
-    // A tab switch reassigns ta.value; dismiss the autocomplete dropdown and the
-    // signature popover so their tracked offsets can't act on the new tab's text.
-    complete.hide();
-    intel.hide();
-    const tab = activeTab(app.state);
-    ta.value = tab.sql;
-    paintTokens(tab.sql);
-    search.recompute();
-    paintMarks();
-  };
-
-  ta.addEventListener('input', () => {
-    // Report the change FIRST: the app-level onDocChange subscriber owns the
-    // tab.sql/dirty writes (#143), and the pre-port handler committed those
-    // before any repaint — keeping that order means an exception in the
-    // paint/popover path below can never leave state behind the visible text
-    // (⌘↵/⌘S must always see what the user sees).
-    emitDocChange(ta.value);
-    paintTokens(ta.value);
-    search.recompute(); // text changed → refresh match positions, then overlay
-    paintMarks();
-    complete.refresh(); // re-evaluate autocomplete at the new caret (#26)
-    intel.refreshSignature(); // and signature help (#27)
-  });
-  ta.addEventListener('scroll', () => { syncScroll(); intel.hide(); });
-  ta.addEventListener('mousemove', (e) => intel.onMouseMove(e));
-  ta.addEventListener('mouseleave', () => intel.onMouseLeave());
-  ta.addEventListener('keydown', (e) => {
-    // Autocomplete nav (↑/↓/Enter/Tab/Esc while the dropdown is open) wins first.
-    if (complete.handleKeydown(e)) return;
-    if (intel.handleKeydown(e)) return; // Esc dismisses signature help
-    // (handled below: command-chord / IME guard, then brackets, then Tab)
-    // A command chord (⌘/Ctrl) or an IME composition isn't bracket/Tab input —
-    // leave it for the global shortcuts (run/format) or the IME. AltGr (Ctrl+Alt
-    // on some EU layouts) *does* type real brackets, so don't treat it as a chord.
-    const altGraph = typeof e.getModifierState === 'function' && e.getModifierState('AltGraph');
-    if (e.isComposing || e.metaKey || (e.ctrlKey && !altGraph)) return;
-    // Bracket auto-close / wrap / type-over / pair-delete (#24) takes priority;
-    // a non-bracket key returns null and falls through to the Tab handler.
-    // Suppress auto-pairing inside a string/comment (the char before the caret is
-    // masked to NUL) so e.g. typing `(` in 'O(' doesn't insert a stray `)`.
-    const s = ta.selectionStart;
-    const inLiteral = s > 0 && masked()[s - 1] === '\0';
-    const edit = bracketEdit(ta.value, s, ta.selectionEnd, e.key, inLiteral);
-    if (edit) {
-      e.preventDefault();
-      applyBracketEdit(edit);
-      return;
-    }
-    if (e.key === 'Tab') {
-      e.preventDefault();
-      applyEdit(ta, '  ');
-    }
-  });
-  // Caret moves don't fire 'input' — repaint the overlay so the bracket-pair
-  // highlight (#24) tracks the caret. A mouse click also moves the caret, which
-  // makes any open completion's tracked word range stale, so dismiss it there.
-  const onCaretMove = () => { paintMarks(); intel.refreshSignature(); };
-  // keyup only handles caret-only moves; a printable key already repainted via
-  // 'input', and selection changes fire 'select' — so don't repaint twice here.
-  const CARET_KEYS = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown']);
-  ta.addEventListener('keyup', (e) => { if (CARET_KEYS.has(e.key)) onCaretMove(); });
-  ta.addEventListener('click', () => { complete.hide(); paintMarks(); intel.refreshSignature(); });
-  ta.addEventListener('select', onCaretMove);
-  // Accept schema identifiers dragged from the tree; insert at the cursor.
-  ta.addEventListener('dragover', (e) => e.preventDefault());
-  ta.addEventListener('drop', (e) => {
-    const dt = e.dataTransfer;
-    if (!dt) return;
-    // Schema identifier → insert verbatim at the caret (existing behavior).
-    const ident = dt.getData(IDENT_MIME);
-    if (ident) { e.preventDefault(); insertAtCursor(app, ident); return; }
-    // A saved/history query → wrap as a subquery and drop it at the cursor's
-    // landing point in the text (falling back to the caret when the drop is past
-    // the text, e.g. the blank area below the last line).
-    const sub = dt.getData(SUBQUERY_MIME);
-    if (sub) {
-      const text = toSubquery(sub);
-      if (!text) return;
-      e.preventDefault();
-      const off = offsetAt(e.clientX, e.clientY);
-      if (Number.isFinite(off)) replaceRange(off, off, text);
-      else insertAtCursor(app, text);
-    }
-    // otherwise: not our drag — leave native behavior alone.
-  });
-
-  app.dom.editorTextarea = ta;
-  app.dom.editorPre = pre;
-  app.dom.editorMarkPre = markPre;
-  app.dom.editorGutter = gutter;
-  app.dom.editorSearch = search;
-  app.dom.editorComplete = complete;
-  app.dom.editorIntel = intel;
-  app.dom.editorSync = sync;
-  // Move the caret to a character offset and scroll its line into view — used to
-  // jump to a format/parse error position (#format-error).
-  app.dom.editorRevealCaret = (pos) => {
-    const p = Math.max(0, Math.min(pos | 0, ta.value.length));
-    ta.focus();
-    ta.selectionStart = ta.selectionEnd = p;
-    complete.hide();
-    const top = PAD_Y + caretLineCol(ta.value, p).line * LINE_HEIGHT_PX;
-    if (top < ta.scrollTop) ta.scrollTop = Math.max(0, top - LINE_HEIGHT_PX);
-    else if (top + LINE_HEIGHT_PX > ta.scrollTop + ta.clientHeight) ta.scrollTop = top + LINE_HEIGHT_PX - ta.clientHeight;
-    syncScroll();
-    paintMarks();
-  };
-  sync();
-}
-
-/**
- * Replace the textarea's current selection with `text`. Prefers
- * execCommand('insertText') so the edit joins the native undo stack (⌘Z / ⌘⇧Z),
- * then falls back to a manual splice + 'input' dispatch. The fallback triggers
- * whenever execCommand didn't actually change the value — it's absent (happy-dom)
- * OR a no-op: Firefox returns `true` from execCommand('insertText') on a
- * <textarea> yet inserts nothing, which is why a schema double-click did nothing
- * and left the caret stranded. Checking the value (not execCommand's return)
- * makes the insert land and keeps the caret + 'input'-driven highlight in sync.
- */
-function applyEdit(ta, text) {
-  ta.focus();
-  const before = ta.value;
-  try { ta.ownerDocument.execCommand('insertText', false, text); } catch { /* unsupported */ }
-  if (ta.value !== before) return; // the edit landed via execCommand
-  const { selectionStart: s, selectionEnd: e } = ta;
-  ta.value = ta.value.slice(0, s) + text + ta.value.slice(e);
-  ta.selectionStart = ta.selectionEnd = s + text.length;
-  ta.dispatchEvent(new Event('input'));
-}
-
-// Minimal prefix/suffix diff: the replaced range in `a` and the inserted text
-// that turns it into `b`. Lets applyBracketEdit apply a bracket edit as one
-// execCommand over a range (undo-preserving) instead of a `.value =` assignment.
-function bracketDiff(a, b) {
-  let p = 0;
-  while (p < a.length && p < b.length && a[p] === b[p]) p++;
-  let s = 0;
-  while (s < a.length - p && s < b.length - p && a[a.length - 1 - s] === b[b.length - 1 - s]) s++;
-  return { from: p, to: a.length - s, ins: b.slice(p, b.length - s) };
-}
-
-/** Insert `text` at the textarea cursor (undoable). Port: insertAtCursor. */
-function insertAtCursor(app, text) {
-  const ta = app.dom.editorTextarea;
-  if (!ta) return;
-  applyEdit(ta, text);
-}
-
-/**
- * Replace the whole editor content with `text` (undoable). Targets the value
- * directly rather than trusting "did the value change?": when `text` already
- * equals the content (an idempotent Format re-run), execCommand('insertText') is
- * a legitimate no-op that ALSO collapses the selection to the end — so a
- * change-detection fallback would splice at the caret and *append*. We instead
- * no-op when already on target, and only fall back when execCommand failed to
- * reach it. Port: replaceDocument.
- */
-function replaceEditor(app, text) {
-  const ta = app.dom.editorTextarea;
-  if (!ta) return;
-  if (ta.value === text) return; // already the target — nothing to do (no append)
-  ta.focus();
-  ta.select();
-  try { ta.ownerDocument.execCommand('insertText', false, text); } catch { /* unsupported */ }
-  if (ta.value === text) return; // execCommand reached the target (joins the undo stack)
-  // Fallback (execCommand absent or a no-op): force the full replacement. Undo
-  // isn't preserved here, but the content is always correct — never appended.
-  ta.value = text;
-  ta.selectionStart = ta.selectionEnd = text.length;
-  ta.dispatchEvent(new Event('input'));
-}
diff --git a/src/main.js b/src/main.js
index 6dbc5c10..d9a859d3 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,7 +6,7 @@
 import Chart from 'chart.js/auto';
 import Dagre from '@dagrejs/dagre';
 import { createApp } from './ui/app.js';
-import { createTextareaEditor } from './editor/textarea-adapter.js';
+import { createCodeMirrorEditor } from './editor/codemirror-adapter.js';
 import { handleKeydown } from './ui/shortcuts.js';
 import { exchangeCodeForTokens, bearerFromTokens } from './net/oauth.js';
 import { decodeShare } from './core/share.js';
@@ -88,7 +88,7 @@ export async function bootstrap(app, env) {
 
 /* c8 ignore start -- browser entry side-effect, exercised via the live app */
 if (typeof document !== 'undefined' && !globalThis.__ASB_NO_AUTOSTART__) {
-  const app = createApp({ Chart, Dagre, Editor: createTextareaEditor, build: '__ASB_BUILD__' });
+  const app = createApp({ Chart, Dagre, Editor: createCodeMirrorEditor, build: '__ASB_BUILD__' });
   document.addEventListener('keydown', (e) => handleKeydown(e, app));
   bootstrap(app, {
     location: window.location,
diff --git a/src/styles.css b/src/styles.css
index 5ec4accc..d37fe12d 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1158,62 +1158,7 @@ body.detached-tab .graph-overlay-panel {
 .tb-btn.is-disabled:hover { background: transparent; color: var(--fg-mute); }
 
 /* ------------ SQL editor ------------ */
-.sql-editor {
-  position: relative;
-  display: flex; width: 100%; height: 100%;
-  font-family: var(--mono);
-  /* Integer px line-height (not unitless): the editor overlays a <textarea> on a
-     highlight <pre>, and a fractional line box (1.7 * 13px = 22.1px) was rounded
-     differently by the textarea's internal layout vs the block <pre>, so the
-     native selection drifted upward from the painted glyphs, growing with line
-     number. An integer line-height makes both lay out identically. */
-  font-size: 13px; line-height: 22px;
-  background: var(--bg-editor); color: var(--fg);
-  overflow: hidden;
-}
-.sql-gutter {
-  flex-shrink: 0; width: 44px;
-  padding: 12px 8px 12px 0;
-  text-align: right; color: var(--fg-faint);
-  user-select: none;
-  background: var(--bg-gutter);
-  border-right: 1px solid var(--border);
-  overflow: hidden;
-  font-variant-numeric: tabular-nums;
-}
-.sql-gutter > div { height: 22px; }
-.sql-area { position: relative; flex: 1; overflow: hidden; }
-.sql-pre {
-  position: absolute; inset: 0; margin: 0;
-  padding: 12px 14px;
-  font-family: inherit; font-size: inherit; line-height: inherit;
-  color: inherit;
-  white-space: pre;
-  tab-size: 2; /* match .sql-textarea so tabs in pasted SQL align with the glyphs */
-  overflow: hidden;
-  pointer-events: none;
-}
-.sql-textarea {
-  position: absolute; inset: 0; margin: 0;
-  padding: 12px 14px;
-  border: none; outline: none;
-  background: transparent;
-  color: transparent;
-  caret-color: var(--accent);
-  font-family: inherit; font-size: inherit; line-height: inherit;
-  resize: none;
-  white-space: pre;
-  overflow: auto;
-  tab-size: 2;
-  /* Hide the textarea's own scrollbars. A long line gives the textarea a
-     horizontal scrollbar that eats ~10px of its clientHeight, so its max
-     vertical scrollTop grew larger than the highlight <pre>'s (overflow:hidden,
-     no scrollbar). Scrolling to the bottom then clamped pre.scrollTop below
-     ta.scrollTop and the selection drifted off the painted glyphs. Hiding the
-     scrollbars keeps both client boxes equal so the layers scroll in lockstep. */
-  scrollbar-width: none; /* Firefox */
-}
-.sql-textarea::-webkit-scrollbar { display: none; } /* WebKit/Blink */
+/* Token colors — applied by the CM6 adapter's HighlightStyle (class: entries). */
 .sql-keyword { color: #C586C0; font-weight: 500; }
 [data-theme='light'] .sql-keyword { color: #AF00DB; }
 .sql-func { color: #DCDCAA; }
@@ -1227,121 +1172,93 @@ body.detached-tab .graph-overlay-panel {
 .sql-ident { color: var(--fg); }
 .sql-op { color: var(--fg-mute); }
 
-/* Mark overlay (#23 search highlights, #24 bracket pair): transparent <pre>
-   below the token <pre>; only the marked spans paint a background. */
-.sql-mark-overlay {
-  position: absolute; inset: 0; margin: 0;
-  padding: 12px 14px;
-  font-family: inherit; font-size: inherit; line-height: inherit;
-  color: transparent;
-  white-space: pre;
-  tab-size: 2; /* match .sql-textarea so highlights line up on tabbed lines */
-  overflow: hidden;
-  pointer-events: none;
-}
-.mark-match { background: color-mix(in oklab, var(--accent) 24%, transparent); border-radius: 2px; }
-.mark-active { background: color-mix(in oklab, var(--accent) 55%, transparent); border-radius: 2px; }
-.mark-bracket { background: color-mix(in oklab, var(--accent) 34%, transparent); border-radius: 2px; }
-
-/* Find/replace panel (#23) — floats over the top-right of the editor. */
-.sql-search {
-  position: absolute; top: 8px; right: 14px; z-index: 5;
-  display: flex; gap: 6px; align-items: flex-start;
-  background: var(--bg-modal); border: 1px solid var(--border);
-  border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .32); padding: 7px;
-}
-.srch-disc {
-  width: 18px; align-self: stretch; border: none; background: transparent;
-  color: var(--fg-faint); cursor: pointer; border-radius: 4px;
-  display: flex; align-items: center; justify-content: center;
-  transform: rotate(-90deg); transition: transform .15s;
+/* ------------ SQL editor chrome (CodeMirror 6, #21) ------------
+   The adapter maps lang-sql's tokens onto the .sql-* classes above via a
+   HighlightStyle, so token colors + light/dark theming stay in this file.
+   Everything below is editor chrome: layout, gutter, selection, panels. */
+.editor-region .cm-editor { height: 100%; background: var(--bg-editor); color: var(--fg); font-size: 13px; }
+.cm-editor.cm-focused { outline: none; }
+.cm-editor .cm-scroller { font-family: var(--mono); line-height: 22px; }
+/* Hide the scroller's native bars (wheel/trackpad/keys still scroll) — the
+   textarea editor always did. The app's styled ::-webkit-scrollbar renders as
+   a classic always-painted bar whenever an element is scrollable, and under
+   real-Safari zoom rounding the scroller can read as scrollable by a few
+   phantom px, painting both bars over a query that visibly fits (#21). */
+.cm-editor .cm-scroller { scrollbar-width: none; }
+.cm-editor .cm-scroller::-webkit-scrollbar { display: none; }
+.cm-editor .cm-content { padding: 12px 0; caret-color: var(--accent); tab-size: 2; }
+.cm-editor .cm-line { padding: 0 14px; }
+.cm-editor .cm-cursor { border-left-color: var(--accent); }
+.cm-editor .cm-selectionBackground,
+.cm-editor.cm-focused .cm-selectionBackground {
+  background: color-mix(in oklab, var(--accent) 28%, transparent);
+}
+.cm-editor .cm-gutters {
+  background: var(--bg-gutter); color: var(--fg-faint);
+  border-right: 1px solid var(--border);
+  font-variant-numeric: tabular-nums;
 }
-.srch-disc.open { transform: none; }
-.srch-rows { display: flex; flex-direction: column; gap: 6px; }
-.srch-row { display: flex; align-items: center; gap: 4px; }
-.srch-field {
-  width: 180px; height: 26px; padding: 0 8px;
+.cm-editor .cm-lineNumbers .cm-gutterElement { min-width: 44px; padding: 0 8px 0 0; }
+/* Bracket-pair highlight at the caret (#24 parity). */
+.cm-editor .cm-matchingBracket { background: color-mix(in oklab, var(--accent) 34%, transparent); border-radius: 2px; }
+.cm-editor .cm-nonmatchingBracket { background: color-mix(in oklab, #ef4444 30%, transparent); border-radius: 2px; }
+/* Find/replace panel (#23 parity — CM6's panel, app-styled). */
+.cm-editor .cm-panels { background: var(--bg-modal); color: var(--fg); border: none; z-index: 5; }
+.cm-editor .cm-panels-top { border-bottom: 1px solid var(--border); }
+.cm-panel.cm-search { font-family: var(--ui); font-size: 12px; padding: 7px 10px; }
+.cm-panel.cm-search input[type='checkbox'] { accent-color: var(--accent); }
+.cm-panel.cm-search .cm-textfield {
   background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px;
   color: var(--fg); font-size: 12px; font-family: var(--mono); outline: none;
+  height: 26px; padding: 0 8px;
 }
-.srch-field.bad { border-color: #ef4444; }
-.srch-count {
-  min-width: 50px; text-align: center; font-size: 11px;
-  font-family: var(--mono); color: var(--fg-faint);
-}
-.srch-count.bad { color: #ef4444; }
-.srch-nav {
-  width: 24px; height: 22px; border: none; border-radius: 4px;
-  background: transparent; color: var(--fg-mute); cursor: pointer;
-  display: flex; align-items: center; justify-content: center; font-size: 12px;
-}
-.srch-nav:hover { background: var(--bg-hover); color: var(--fg); }
-.srch-togs { display: flex; gap: 2px; margin-left: 2px; }
-.srch-tog {
-  width: 24px; height: 22px; border: none; border-radius: 4px;
-  background: var(--bg-chip); color: var(--fg-mute); cursor: pointer;
-  font-family: var(--mono); font-size: 11px; font-weight: 600;
-}
-.srch-tog.on { background: var(--accent); color: #fff; }
-.srch-btn {
-  height: 22px; padding: 0 8px; border: none; border-radius: 4px;
+.cm-panel.cm-search .cm-button {
+  height: 24px; padding: 0 8px; border: none; border-radius: 4px;
   background: var(--bg-chip); color: var(--fg); cursor: pointer; font-size: 11px;
-}
-.srch-btn.primary { background: var(--accent); color: #fff; }
-
-/* Autocomplete dropdown (#26) — fixed-positioned at the caret. */
-.ac-dropdown {
-  position: fixed; z-index: 50; width: 320px; max-height: 248px;
-  display: flex; flex-direction: column; overflow: hidden;
+  background-image: none;
+}
+.cm-panel.cm-search .cm-button:hover { background: var(--bg-hover); }
+.cm-panel.cm-search [name='close'] { color: var(--fg-mute); font-size: 16px; padding: 0 6px; cursor: pointer; }
+.cm-editor .cm-searchMatch { background: color-mix(in oklab, var(--accent) 24%, transparent); border-radius: 2px; }
+.cm-editor .cm-searchMatch-selected { background: color-mix(in oklab, var(--accent) 55%, transparent); }
+/* Tooltips: completion list, completion info, hover docs. */
+.cm-tooltip {
   background: var(--bg-modal); border: 1px solid var(--border);
-  border-radius: 8px; box-shadow: 0 12px 34px rgba(0, 0, 0, .4);
-  font-family: var(--ui);
-}
-.ac-list { flex: 1; min-height: 0; overflow-y: auto; padding: 4px; }
-.ac-row {
-  display: flex; align-items: center; gap: 9px;
-  padding: 5px 8px; border-radius: 5px; cursor: pointer;
-}
-.ac-row.on { background: color-mix(in oklab, var(--accent) 20%, transparent); }
-.ac-chip {
-  width: 17px; height: 17px; flex-shrink: 0; border-radius: 4px;
-  display: flex; align-items: center; justify-content: center;
-  background: var(--bg-chip); font-family: var(--mono); font-size: 11px; font-weight: 700;
+  border-radius: 8px; color: var(--fg);
+  box-shadow: 0 12px 34px rgba(0, 0, 0, .4);
 }
-.ac-label { font-family: var(--mono); font-size: 12.5px; color: var(--fg); flex-shrink: 0; }
-.ac-detail {
+.cm-tooltip.cm-tooltip-autocomplete { font-family: var(--ui); overflow: hidden; }
+.cm-tooltip-autocomplete > ul { font-family: var(--mono); font-size: 12.5px; max-height: 248px; padding: 4px; }
+.cm-tooltip-autocomplete > ul > li { padding: 4px 8px; border-radius: 5px; display: flex; align-items: center; gap: 9px; }
+.cm-tooltip-autocomplete > ul > li[aria-selected] { background: color-mix(in oklab, var(--accent) 20%, transparent); color: var(--fg); }
+.cm-tooltip-autocomplete .cm-completionLabel { flex-shrink: 0; }
+.cm-tooltip-autocomplete .cm-completionDetail {
   margin-left: auto; max-width: 150px; text-align: right;
-  font-family: var(--mono); font-size: 10.5px; color: var(--fg-faint);
+  font-size: 10.5px; font-style: normal; color: var(--fg-faint);
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
-.ac-footer {
-  flex-shrink: 0; padding: 7px 10px; background: var(--bg-chip);
-  border-top: 1px solid var(--border-faint);
-  font-size: 11px; color: var(--fg-mute); line-height: 1.45;
-  display: flex; flex-direction: column; gap: 3px;
-}
-/* The footer shows the active entry's description (#27). Clamp it so a long
-   description can't balloon the footer and squeeze the scrolling list. */
-.ac-doc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
-
-/* Signature help + hover docs (#27) — fixed-positioned near the caret/mouse. */
-.sig-help {
-  position: fixed; z-index: 55; max-width: 360px;
-  padding: 6px 10px; border-radius: 7px;
-  background: var(--bg-modal); border: 1px solid var(--border);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
-  font-family: var(--mono); font-size: 12px; color: var(--fg-mute); white-space: nowrap;
-}
-.sig-name { color: var(--fg); }
-.sig-arg.on { color: var(--accent); font-weight: 700; }
-.sig-ret { color: var(--fg-faint); }
-.hover-card {
-  position: fixed; z-index: 55; width: 280px;
-  padding: 9px 11px; border-radius: 8px;
-  background: var(--bg-modal); border: 1px solid var(--border);
-  box-shadow: 0 12px 34px rgba(0, 0, 0, .4);
-  font-family: var(--ui); pointer-events: none;
-}
+/* Kind chips — same glyphs/colors as the old dropdown (K ƒ Σ ⇄ ▦ ▪ ◈ ≡). */
+.cm-completionIcon {
+  width: 17px; height: 17px; flex-shrink: 0; border-radius: 4px; box-sizing: border-box;
+  background: var(--bg-chip); font-size: 11px; font-weight: 700; font-family: var(--mono);
+  display: flex; align-items: center; justify-content: center; padding: 0; opacity: 1;
+}
+.cm-completionIcon::after { content: '·'; }
+.cm-completionIcon-keyword::after { content: 'K'; color: #C586C0; }
+.cm-completionIcon-fn::after { content: 'ƒ'; color: #DCDCAA; }
+.cm-completionIcon-agg::after { content: 'Σ'; color: #E0B341; }
+.cm-completionIcon-cast::after { content: '⇄'; color: #4FC1FF; }
+.cm-completionIcon-table::after { content: '▦'; color: var(--accent); }
+.cm-completionIcon-column::after { content: '▪'; color: #92E1D8; }
+.cm-completionIcon-db::after { content: '◈'; color: #A0A0A8; }
+.cm-completionIcon-format::after { content: '≡'; color: #A0A0A8; }
+.cm-tooltip.cm-completionInfo {
+  padding: 7px 10px; max-width: 280px;
+  font-family: var(--ui); font-size: 11px; color: var(--fg-mute); line-height: 1.45;
+}
+/* Hover docs (#27) — the CM6 hoverTooltip renders .hover-card inside
+   .cm-tooltip, which already carries the modal background/border/shadow. */
+.cm-tooltip .hover-card { width: 280px; padding: 9px 11px; font-family: var(--ui); }
 .hover-sig { font-family: var(--mono); font-size: 12px; color: var(--fg); margin-bottom: 5px; }
 .hover-ret { color: var(--fg-faint); }
 .hover-doc { font-size: 11.5px; color: var(--fg-mute); line-height: 1.5; }
@@ -1813,7 +1730,7 @@ table.res-table tbody tr:hover td.idx { background: var(--bg-hover); }
      overflow:hidden, so an overflow would clip rather than scroll). */
   .login-card { width: auto; max-width: 100%; }
   .file-menu { width: auto; max-width: calc(100vw - 24px); }
-  .ac-dropdown { max-width: calc(100vw - 16px); }
+  .cm-tooltip { max-width: calc(100vw - 16px); }
   .save-popover { max-width: calc(100vw - 16px); }
   /* Cell-detail drawer → full-width, non-resizable (its handle is hidden above). */
   .cd-panel { width: 100vw !important; min-width: 0; }
diff --git a/src/ui/shortcuts.js b/src/ui/shortcuts.js
index 9ea984ea..d91fecc8 100644
--- a/src/ui/shortcuts.js
+++ b/src/ui/shortcuts.js
@@ -56,6 +56,10 @@ export function openShortcuts(app) {
  * `app` provides state + the action callbacks; `signedIn` gates editing keys.
  */
 export function handleKeydown(e, app) {
+  // A key the editor already consumed (CM6 preventDefaults what it handles —
+  // e.g. Esc closing the completion popup or search panel) must not ALSO
+  // trigger a global action like cancelling the running query.
+  if (e.defaultPrevented) return null;
   const mod = e.metaKey || e.ctrlKey;
   const signedIn = app.isSignedIn();
   // Esc cancels an in-flight query (aborts the stream + KILL QUERY).
diff --git a/tests/e2e/editor-alignment.spec.js b/tests/e2e/editor-alignment.spec.js
deleted file mode 100644
index cdcd4c30..00000000
--- a/tests/e2e/editor-alignment.spec.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-// Regression guard for the editor's highlight/selection alignment.
-//
-// The bug: a long line gives the <textarea> a horizontal scrollbar, which
-// shrinks its clientHeight (~10px). That made the textarea's max vertical
-// scrollTop larger than the highlight <pre>'s (overflow:hidden, no scrollbar),
-// so scrolling to the bottom clamped pre.scrollTop below ta.scrollTop and the
-// painted glyphs lagged the native selection — worst on the last line.
-// Repro shape: shift-click a CREATE TABLE, scroll down, select the last line.
-//
-// This can only be caught in a real engine — happy-dom has no scrollbar layout.
-test.describe('editor highlight/selection alignment', () => {
-  test('highlight tracks the textarea scrolled to the bottom with a long line', async ({ page }) => {
-    await page.goto('/tests/e2e/editor.html');
-    await page.waitForFunction(() => window.__ready === true);
-
-    // Tall content whose LAST line is long enough to force a horizontal scrollbar.
-    const sql = [
-      ...Array.from({ length: 30 }, (_, i) => `SELECT col_${i} FROM t WHERE x = ${i}`),
-      `COMMENT '${'x'.repeat(400)}'`,
-    ].join('\n');
-    await page.evaluate((s) => window.__setSql(s), sql);
-
-    const m = await page.evaluate(() => {
-      const ta = window.__app.dom.editorTextarea;
-      const pre = window.__app.dom.editorPre;
-      ta.focus();
-      ta.scrollTop = ta.scrollHeight; // scroll to the very bottom
-      ta.dispatchEvent(new Event('scroll'));
-      return {
-        taClientH: ta.clientHeight,
-        preClientH: pre.clientHeight,
-        taScrollTop: ta.scrollTop,
-        preScrollTop: pre.scrollTop,
-      };
-    });
-
-    // The textarea must not reserve scrollbar space the highlight lacks…
-    expect(m.taClientH).toBe(m.preClientH);
-    // …so the highlight reaches the same offset instead of clamping behind it.
-    expect(Math.abs(m.taScrollTop - m.preScrollTop)).toBeLessThan(1);
-  });
-});
diff --git a/tests/e2e/editor-cm6.spec.js b/tests/e2e/editor-cm6.spec.js
new file mode 100644
index 00000000..d53c968e
--- /dev/null
+++ b/tests/e2e/editor-cm6.spec.js
@@ -0,0 +1,97 @@
+import { test, expect } from '@playwright/test';
+
+// CM6 adapter behaviors that need a real engine (#21): keyboard-driven
+// highlighting, the ⌘↵-never-swallowed acceptance rule, per-tab undo across
+// syncFromState, and the search panel. (The old editor-alignment.spec.js
+// guarded the textarea/pre scroll-sync bug class — CM6 has one scroll
+// container, so that class of bug is structurally gone.)
+
+test.describe('CM6 editor', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/tests/e2e/editor.html');
+    await page.waitForFunction(() => window.__ready === true);
+    await page.click('.cm-content');
+  });
+
+  test('typing paints SQL highlighting through the .sql-* classes', async ({ page }) => {
+    await page.keyboard.type('select sum(x) from t -- note');
+    await expect(page.locator('.cm-content .sql-keyword').first()).toHaveText('select');
+    await expect(page.locator('.cm-content .sql-func').first()).toHaveText('sum');
+    await expect(page.locator('.cm-content .sql-comment').first()).toHaveText('-- note');
+  });
+
+  test('typing opens completion; ⌘↵ is never swallowed by it (bubbles to the document)', async ({ page }) => {
+    await page.evaluate(() => {
+      window.__chords = [];
+      document.addEventListener('keydown', (e) => {
+        if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+          window.__chords.push({ prevented: e.defaultPrevented, shift: e.shiftKey });
+        }
+      });
+    });
+    await page.keyboard.type('sel');
+    await expect(page.locator('.cm-tooltip-autocomplete')).toBeVisible();
+    await page.keyboard.press('Control+Enter'); // the run chord, completion still open
+    const chords = await page.evaluate(() => window.__chords);
+    expect(chords).toEqual([{ prevented: false, shift: false }]); // reached the global handler, unprevented
+    const value = await page.evaluate(() => window.__app.dom.editorView.state.doc.toString());
+    expect(value).toBe('sel'); // no blank line inserted, no completion accepted
+  });
+
+  test('Enter accepts an open completion (parity with the old dropdown)', async ({ page }) => {
+    await page.keyboard.type('sel');
+    // wait for a *selected* option, then sit out CM6's interactionDelay —
+    // an Enter within ~75ms of the list opening is deliberately ignored
+    // (accidental-accept guard); automation is fast enough to hit it.
+    await expect(page.locator('.cm-tooltip-autocomplete li[aria-selected]')).toBeVisible();
+    await page.waitForTimeout(150);
+    await page.keyboard.press('Enter');
+    const value = await page.evaluate(() => window.__app.dom.editorView.state.doc.toString());
+    expect(value.toUpperCase()).toBe('SELECT');
+  });
+
+  test('auto-pairing: pairs in code, steps over closers, stays quiet inside literals', async ({ page }) => {
+    await page.keyboard.type('select (');   // ( pairs in code
+    await page.keyboard.type(')');          // typing the closer steps over, no double
+    await page.keyboard.type(" '");         // quote pairs in code
+    await page.keyboard.type('a(');         // ( inside the string must NOT inject a stray )
+    const value = await page.evaluate(() => window.__app.dom.editorView.state.doc.toString());
+    expect(value).toBe("select () 'a('");
+  });
+
+  test('tab switches keep per-tab undo histories', async ({ page }) => {
+    const doc = () => window.__app.dom.editorView.state.doc.toString();
+    const switchTab = (id) => {
+      window.__app.state.activeTabId.value = id;
+      window.__port.syncFromState();
+    };
+    await page.keyboard.type('one');
+    await page.evaluate(() => {
+      const { state } = window.__app;
+      state.tabs.value = [...state.tabs.value, { id: 't2', name: 'T2', sql: '', dirty: false, result: null, savedId: null, chartCfg: null, chartKey: null }];
+      state.activeTabId.value = 't2';
+      window.__port.syncFromState();
+    });
+    await page.click('.cm-content');
+    await page.keyboard.type('two');
+    // round-trip t2 → t1 → t2, THEN undo: only a parked per-tab history can
+    // undo the 'two' typing here — a fresh-state impostor would leave 'two'.
+    await page.evaluate(`(${switchTab.toString()})('t1')`);
+    const t1 = await page.evaluate(doc);
+    expect(t1).toBe('one');
+    await page.evaluate(`(${switchTab.toString()})('t2')`);
+    await page.click('.cm-content');
+    await page.keyboard.press('Control+z');
+    const t2AfterUndo = await page.evaluate(doc);
+    expect(t2AfterUndo).toBe(''); // t2's history survived the round trip
+    await page.evaluate(`(${switchTab.toString()})('t1')`);
+    expect(await page.evaluate(doc)).toBe('one'); // t1 untouched by t2's undo
+  });
+
+  test('⌘F opens the app-styled search panel; Esc closes it', async ({ page }) => {
+    await page.keyboard.press('Control+f');
+    await expect(page.locator('.cm-panel.cm-search')).toBeVisible();
+    await page.keyboard.press('Escape');
+    await expect(page.locator('.cm-panel.cm-search')).toHaveCount(0);
+  });
+});
diff --git a/tests/e2e/editor-insert.spec.js b/tests/e2e/editor-insert.spec.js
index 6b192d05..f5dc21d8 100644
--- a/tests/e2e/editor-insert.spec.js
+++ b/tests/e2e/editor-insert.spec.js
@@ -1,14 +1,22 @@
 import { test, expect } from '@playwright/test';
 
-// Regression guard for the schema double-click → editor insertion path, which
-// funnels through applyEdit()'s document.execCommand('insertText', …) in
-// editor.js. That API is Firefox-fragile on <textarea>, and users reported that
-// in Firefox double-clicking a schema table did nothing and left the editor
-// caret in a mess. These run on both engines (see playwright.config.js).
-//
-// Each case checks the textarea VALUE *and* the caret (selectionStart) — a
-// silent execCommand no-op shows up as a wrong value; a botched caret shows up
-// as a wrong selectionStart (the "cursor mess").
+// Regression guard for the schema double-click → editor insertion path,
+// running against the CM6 adapter (#21). The execCommand fragility these
+// originally guarded died with the textarea, but the behaviors are port
+// acceptance: value, caret, and highlight must all land, including from a
+// real dblclick gesture on an outside element (the reported Firefox bug's
+// shape) and a real drag-drop with browser geometry (posAtCoords). These run
+// on all engines (see playwright.config.js).
+
+// Serialized into page.evaluate calls — reads the editor through the CM6 view.
+const readEditor = () => {
+  const view = window.__app.dom.editorView;
+  return {
+    value: view.state.doc.toString(),
+    caret: view.state.selection.main.head,
+    content: view.dom.querySelector('.cm-content').textContent,
+  };
+};
 
 test.describe('editor insertion (schema double-click path)', () => {
   test.beforeEach(async ({ page }) => {
@@ -17,49 +25,41 @@ test.describe('editor insertion (schema double-click path)', () => {
   });
 
   test('insertAtCursor splices at the caret and leaves the caret after the text', async ({ page }) => {
-    const r = await page.evaluate(() => {
-      window.__setSql('SELECT  FROM t');           // caret target = index 7 (the 2nd space)
-      const ta = window.__app.dom.editorTextarea;
-      ta.focus();
-      ta.selectionStart = ta.selectionEnd = 7;
-      window.__insertAtCursor('count(*)');         // what a column/db double-click does
-      return { value: ta.value, caret: ta.selectionStart, pre: window.__app.dom.editorPre.textContent };
+    await page.evaluate(() => {
+      window.__setSql('SELECT  FROM t');
+      window.__app.dom.editorView.dispatch({ selection: { anchor: 7 } }); // caret at the 2nd space
+      window.__insertAtCursor('count(*)');           // what a column/db double-click does
     });
+    const r = await page.evaluate(readEditor);
     expect(r.value).toBe('SELECT count(*) FROM t');
-    expect(r.caret).toBe(15);                      // 7 + 'count(*)'.length(8)
-    expect(r.pre).toContain('count(*)');           // highlight overlay stayed in sync
+    expect(r.caret).toBe(15);                        // 7 + 'count(*)'.length(8)
+    expect(r.content).toContain('count(*)');         // the rendered doc stayed in sync
   });
 
   test('replaceEditor replaces the whole buffer and puts the caret at the end', async ({ page }) => {
-    const r = await page.evaluate(() => {
+    await page.evaluate(() => {
       window.__setSql('old query that should go away');
-      const ta = window.__app.dom.editorTextarea;
-      window.__replaceEditor('SELECT * FROM t LIMIT 100');   // what a table double-click does
-      return { value: ta.value, caret: ta.selectionStart, pre: window.__app.dom.editorPre.textContent };
+      window.__replaceEditor('SELECT * FROM t LIMIT 100'); // what a table double-click does
     });
+    const r = await page.evaluate(readEditor);
     expect(r.value).toBe('SELECT * FROM t LIMIT 100');
     expect(r.caret).toBe('SELECT * FROM t LIMIT 100'.length);
-    expect(r.pre).toContain('LIMIT');
+    expect(r.content).toContain('LIMIT');
   });
 
   test('replaceEditor with identical text never appends (repeated Format regression)', async ({ page }) => {
-    // The Format bug: re-formatting already-formatted SQL calls replaceEditor with
-    // text identical to the content. execCommand('insertText') then no-ops AND
-    // collapses the selection to the end, so the old change-detection fallback
-    // spliced at the caret and appended a second copy each click.
-    const r = await page.evaluate(() => {
-      const ta = window.__app.dom.editorTextarea;
+    await page.evaluate(() => {
       window.__setSql('SELECT 1');
       window.__replaceEditor('SELECT\n    1\n');  // first format
       window.__replaceEditor('SELECT\n    1\n');  // idempotent re-format
       window.__replaceEditor('SELECT\n    1\n');  // and again
-      return { value: ta.value };
     });
+    const r = await page.evaluate(readEditor);
     expect(r.value).toBe('SELECT\n    1\n'); // not doubled/tripled
   });
 
   test('a real double-click on an outside element replaces the editor (the reported bug)', async ({ page }) => {
-    // Mount a stand-in for a schema row: a separate element whose dblclick runs
+    // A stand-in for a schema row: a separate element whose dblclick runs
     // replaceEditor synchronously — same gesture/selection context as the app,
     // where a double-click first selects the row's own text.
     await page.evaluate(() => {
@@ -72,29 +72,27 @@ test.describe('editor insertion (schema double-click path)', () => {
       document.body.appendChild(row);
     });
     await page.dblclick('#fake-schema-row');
-    const r = await page.evaluate(() => {
-      const ta = window.__app.dom.editorTextarea;
-      return { value: ta.value, caret: ta.selectionStart };
-    });
+    const r = await page.evaluate(readEditor);
     expect(r.value).toBe('SELECT * FROM mytable LIMIT 100');
     expect(r.caret).toBe('SELECT * FROM mytable LIMIT 100'.length);
   });
 
   test('dropping a saved/history query inserts it as a ( … ) subquery (real DnD geometry)', async ({ page }) => {
-    // Real DragEvent + DataTransfer over the textarea — exercises the offsetFromXY
-    // geometry happy-dom can't compute. Drops a query carrying a trailing FORMAT,
-    // which must be stripped, wrapped in parens, and spliced at the drop point.
+    // Real DragEvent + DataTransfer over the editor — exercises posAtCoords
+    // geometry happy-dom can't compute. Drops a query carrying a trailing
+    // FORMAT, which must be stripped, wrapped in parens, and spliced at the
+    // drop point.
     const value = await page.evaluate(() => {
-      const ta = window.__app.dom.editorTextarea;
+      const view = window.__app.dom.editorView;
       window.__setSql('SELECT * FROM t');
-      const rect = ta.getBoundingClientRect();
+      const rect = view.contentDOM.getBoundingClientRect();
       const dt = new DataTransfer();
       dt.setData('application/x-asb-subquery', 'SELECT 99 FORMAT JSON');
-      ta.dispatchEvent(new DragEvent('drop', {
+      view.contentDOM.dispatchEvent(new DragEvent('drop', {
         bubbles: true, cancelable: true, dataTransfer: dt,
         clientX: rect.left + 60, clientY: rect.top + 10,
       }));
-      return ta.value;
+      return view.state.doc.toString();
     });
     expect(value).toContain('(\nSELECT 99\n)'); // wrapped subquery, trailing FORMAT stripped
     expect(value).not.toContain('FORMAT');
diff --git a/tests/e2e/editor.html b/tests/e2e/editor.html
index dcbadcfc..b822b96a 100644
--- a/tests/e2e/editor.html
+++ b/tests/e2e/editor.html
@@ -3,35 +3,55 @@
 <head>
   <meta charset="utf-8" />
   <title>editor harness</title>
-  <!-- the real stylesheet, so .sql-textarea / .sql-pre lay out exactly as shipped -->
+  <!-- the real stylesheet, so the CM6 editor lays out exactly as shipped -->
   <link rel="stylesheet" href="/src/styles.css" />
   <style>
     html, body { margin: 0; background: #111; }
-    /* .sql-editor is height/width:100%, so the mount host needs a fixed box. */
+    /* the app mounts into a sized editor-region; give the host the same box */
     #host { width: 680px; height: 340px; }
+    #host .cm-editor { height: 100%; }
   </style>
 </head>
 <body data-theme="dark">
   <div id="host"></div>
-  <!-- Mount the real editor module with a minimal stub controller. No bundling:
-       the browser resolves the /src ESM graph directly. -->
-  <!-- Resolve the bare `@preact/signals-core` specifier that src/state.js imports.
-       esbuild inlines it for the shipped artifact; raw ESM in the browser needs
-       this map (the e2e server serves the repo root, so /node_modules is live). -->
+  <!-- Mount the real CM6 adapter with a minimal stub controller. No bundling:
+       the browser resolves the /src ESM graph directly, so every bare
+       specifier the graph imports needs an import-map entry (the #89
+       unbundled-harness gotcha) — esbuild inlines these for the shipped
+       artifact. -->
   <script type="importmap">
-    { "imports": { "@preact/signals-core": "/node_modules/@preact/signals-core/dist/signals-core.mjs" } }
+    { "imports": {
+      "@preact/signals-core": "/node_modules/@preact/signals-core/dist/signals-core.mjs",
+      "@codemirror/state": "/node_modules/@codemirror/state/dist/index.js",
+      "@codemirror/view": "/node_modules/@codemirror/view/dist/index.js",
+      "@codemirror/commands": "/node_modules/@codemirror/commands/dist/index.js",
+      "@codemirror/language": "/node_modules/@codemirror/language/dist/index.js",
+      "@codemirror/lang-sql": "/node_modules/@codemirror/lang-sql/dist/index.js",
+      "@codemirror/autocomplete": "/node_modules/@codemirror/autocomplete/dist/index.js",
+      "@codemirror/search": "/node_modules/@codemirror/search/dist/index.js",
+      "@lezer/common": "/node_modules/@lezer/common/dist/index.js",
+      "@lezer/highlight": "/node_modules/@lezer/highlight/dist/index.js",
+      "@lezer/lr": "/node_modules/@lezer/lr/dist/index.js",
+      "style-mod": "/node_modules/style-mod/src/style-mod.js",
+      "w3c-keyname": "/node_modules/w3c-keyname/index.js",
+      "crelt": "/node_modules/crelt/index.js",
+      "@marijn/find-cluster-break": "/node_modules/@marijn/find-cluster-break/src/index.js"
+    } }
   </script>
   <script type="module">
-    import { createTextareaEditor } from '/src/editor/textarea-adapter.js';
+    import { createCodeMirrorEditor } from '/src/editor/codemirror-adapter.js';
     import { createState, activeTab } from '/src/state.js';
+    import { assembleReferenceData, buildCompletions } from '/src/core/completions.js';
 
     const state = createState({ loadStr: (k, d) => d, loadJSON: (k, d) => d });
-    const app = { state, dom: {}, document };
+    const refData = assembleReferenceData(null);
+    const app = { state, dom: {}, document, refData, completions: buildCompletions(refData, []) };
     window.__app = app;
-    const port = createTextareaEditor(app);
+    const port = createCodeMirrorEditor(app);
+    window.__port = port;
     // Mirror app.js's onDocChange subscriber (#143) so the harness tab tracks
-    // the view — without it, a syncFromState()/re-mount in a spec would snap
-    // ta.value back to the tab's stale (empty) sql.
+    // the view — without it, a syncFromState() in a spec would snap the doc
+    // back to the tab's stale (empty) sql.
     port.onDocChange((value) => {
       const tab = activeTab(state);
       tab.sql = value;
@@ -39,18 +59,11 @@
     });
     port.mount(document.getElementById('host'));
 
-    // Expose the real insertion primitives the schema double-clicks use, so the
-    // e2e can drive them synchronously (inside a real dblclick handler) — that's
-    // the gesture/selection context where Firefox's execCommand path misbehaves.
+    // The real insertion primitives the schema double-clicks use, so specs can
+    // drive them synchronously inside a real gesture handler.
     window.__insertAtCursor = (t) => port.insertAtCursor(t);
     window.__replaceEditor = (t) => port.replaceDocument(t);
-
-    // Set editor content the way typing/replace does (drives paint()).
-    window.__setSql = (sql) => {
-      const ta = app.dom.editorTextarea;
-      ta.value = sql;
-      ta.dispatchEvent(new Event('input', { bubbles: true }));
-    };
+    window.__setSql = (sql) => port.replaceDocument(sql);
     window.__ready = true;
   </script>
 </body>
diff --git a/tests/unit/app.test.js b/tests/unit/app.test.js
index fde355e5..c6af268a 100644
--- a/tests/unit/app.test.js
+++ b/tests/unit/app.test.js
@@ -2,7 +2,7 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { webcrypto } from 'node:crypto';
 import dagre from '@dagrejs/dagre';
 import { createApp } from '../../src/ui/app.js';
-import { createTextareaEditor } from '../../src/editor/textarea-adapter.js';
+import { createCodeMirrorEditor } from '../../src/editor/codemirror-adapter.js';
 import { AST_PROGRESSIVE_THRESHOLD } from '../../src/net/ch-client.js';
 
 function jwt(payload) {
@@ -103,7 +103,7 @@ function env(over = {}) {
     sessionStorage: memSession({ oauth_id_token: validToken }),
     crypto: webcrypto,
     Dagre: dagre,
-    Editor: createTextareaEditor, // the real adapter — app tests exercise editor-backed flows (#143)
+    Editor: createCodeMirrorEditor, // the real adapter — app tests exercise editor-backed flows (#143/#21)
     fetch: makeFetch([]),
     now: () => 0,
     retryMs: 0, // instant script-statement retry in tests (no real 250ms wait)
@@ -184,7 +184,7 @@ describe('renderApp shell', () => {
     const { app } = rendered();
     expect(app.root.querySelector('.app-header')).not.toBeNull();
     expect(app.root.querySelector('.sidebar')).not.toBeNull();
-    expect(app.root.querySelector('.sql-editor')).not.toBeNull();
+    expect(app.root.querySelector('.cm-editor')).not.toBeNull();
     // user control shows the short name (local-part) + full email on hover
     expect(app.dom.userBtn.querySelector('.user-short').textContent).toBe('me');
     expect(app.dom.userBtn.getAttribute('title')).toBe('me@example.com');
@@ -487,9 +487,8 @@ describe('query run', () => {
   });
   it('typing drives the real onDocChange subscriber: tab.sql/dirty, tab strip, Save button, var strip (#143)', () => {
     const { app } = appForRun([]);
-    const ta = app.dom.editorTextarea;
-    ta.value = 'SELECT {p:UInt8}';
-    ta.dispatchEvent(new Event('input'));
+    const view = app.dom.editorView;
+    view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: 'SELECT {p:UInt8}' } });
     // the subscriber (registered once in createApp) owns the state writes…
     expect(app.activeTab().sql).toBe('SELECT {p:UInt8}');
     expect(app.activeTab().dirty).toBe(true);
@@ -859,9 +858,8 @@ describe('query run', () => {
 
   it('a comment-only selection is a no-op (nothing is sent)', async () => {
     const { app } = appForRun([]);
-    const ta = app.dom.editorTextarea;
-    ta.value = '-- just a note';
-    ta.selectionStart = 0; ta.selectionEnd = ta.value.length;
+    app.editor.replaceDocument('-- just a note');
+    app.dom.editorView.dispatch({ selection: { anchor: 0, head: app.editor.getValue().length } });
     app.activeTab().sql = 'SELECT 1';
     await app.actions.run();
     expect(app.activeTab().result).toBeNull(); // no run started
@@ -988,10 +986,8 @@ describe('query run', () => {
     const { app } = appForRun([
       [(u, sql) => /SELECT 1/.test(sql), resp({ body: streamBody(['{"meta":[{"name":"a","type":"UInt8"}]}\n', '{"row":{"a":"1"}}\n']) })],
     ]);
-    const ta = app.dom.editorTextarea;
-    ta.value = 'SELECT 1; SELECT 2';
-    ta.selectionStart = 0; ta.selectionEnd = 8; // "SELECT 1"
-    app.activeTab().sql = ta.value;
+    app.editor.replaceDocument('SELECT 1; SELECT 2');
+    app.dom.editorView.dispatch({ selection: { anchor: 0, head: 8 } }); // "SELECT 1"
     await app.actions.run();
     expect(app.activeTab().result.rows).toEqual([['1']]); // single-statement rich path, not the script grid
     expect(app.activeTab().result.script).toBeUndefined();
@@ -1016,19 +1012,19 @@ describe('query run', () => {
 
   it('syncSelection drives hasSelection; setRunBtn flips to "Run selection"', () => {
     const { app } = appForRun([]);
-    const ta = app.dom.editorTextarea;
-    ta.value = 'SELECT 1; SELECT 2';
-    ta.focus();
-    ta.selectionStart = 0; ta.selectionEnd = 8;
+    let focused = true;
+    let sel = { start: 0, end: 8, text: 'SELECT 1' };
+    app.editor = { ...app.editor, hasFocus: () => focused, getSelection: () => sel };
     app.syncSelection();
     expect(app.state.hasSelection.value).toBe(true);
     app.setRunBtn(false);
     expect(app.dom.runBtn.textContent).toContain('Run selection');
-    // collapsed selection → false; missing textarea → false
-    ta.selectionEnd = 0;
+    // collapsed selection → false; unfocused editor → false
+    sel = { start: 0, end: 0, text: '' };
     app.syncSelection();
     expect(app.state.hasSelection.value).toBe(false);
-    app.dom.editorTextarea = null;
+    sel = { start: 0, end: 8, text: 'SELECT 1' };
+    focused = false;
     app.syncSelection();
     expect(app.state.hasSelection.value).toBe(false);
   });
@@ -1094,7 +1090,7 @@ describe('formatQuery', () => {
     await app.actions.formatQuery();
     // withStatementBreak appends a newline so the caret lands past the last
     // token — otherwise the replace re-opens autocomplete on it (#format bug).
-    expect(app.dom.editorTextarea.value).toBe('SELECT\n  1\n');
+    expect(app.editor.getValue()).toBe('SELECT\n  1\n');
   });
   it('no-ops on empty SQL', async () => {
     const { app, e } = appFor([]);
@@ -1115,13 +1111,13 @@ describe('formatQuery', () => {
       [(u, sql) => /formatQuery/.test(sql), resp({ ok: false, status: 500, text: '{"exception":"Code: 62. DB::Exception: Syntax error: failed at position 8 (BEWEEN): BEWEEN 2. Expected one of: BETWEEN, …. (SYNTAX_ERROR)"}' })],
     ]);
     app.activeTab().sql = 'select x BEWEEN 2';
-    app.dom.editorTextarea.value = 'select x BEWEEN 2';
+    app.editor.replaceDocument('select x BEWEEN 2');
     await app.actions.formatQuery();
-    expect(app.dom.editorTextarea.value).toBe('select x BEWEEN 2'); // editor unchanged
+    expect(app.editor.getValue()).toBe('select x BEWEEN 2'); // editor unchanged
     const err = app.root.querySelector('.results-error');
     expect(err).not.toBeNull();
     expect(err.textContent).toContain('Code: 62. DB::Exception: Syntax error: failed at position 8 (BEWEEN): BEWEEN 2. Expected one of: BETWEEN, …. (SYNTAX_ERROR)'); // full original message, untruncated
-    expect(app.dom.editorTextarea.selectionStart).toBe(7); // caret jumped to the offending token (pos 8 → offset 7)
+    expect(app.dom.editorView.state.selection.main.head).toBe(7); // caret jumped to the offending token (pos 8 → offset 7)
     expect(app.activeTab().result.formatError).toBe(true);
   });
   it('a later successful format clears a prior format error', async () => {
@@ -1144,7 +1140,7 @@ describe('formatQuery', () => {
     ]);
     app.activeTab().sql = 'create table t (a Int8); select count() from t';
     await app.actions.formatQuery();
-    expect(app.dom.editorTextarea.value).toBe('CREATE TABLE t\n(\n    a Int8\n);\n\nSELECT count()\nFROM t\n');
+    expect(app.editor.getValue()).toBe('CREATE TABLE t\n(\n    a Int8\n);\n\nSELECT count()\nFROM t\n');
   });
   it('multi-statement format is best-effort: an unformattable statement keeps its original text', async () => {
     const { app } = appFor([
@@ -1153,7 +1149,7 @@ describe('formatQuery', () => {
     ]);
     app.activeTab().sql = 'create table t (a Int8); bad syntax here';
     await app.actions.formatQuery();
-    expect(app.dom.editorTextarea.value).toContain('bad syntax here'); // original kept
+    expect(app.editor.getValue()).toContain('bad syntax here'); // original kept
     expect(app.root.querySelector('.results-error')).toBeNull(); // no scary error for the script
   });
   it('a multi-statement format clears a prior single-statement format error', async () => {
@@ -1194,7 +1190,7 @@ describe('insertCreate', () => {
       [(u, sql) => /formatQuery/.test(sql), resp({ json: { data: [{ q: 'CREATE TABLE db.t\n(\n  a Int\n)' }] } })],
     ]);
     await app.actions.insertCreate('db.t');
-    expect(app.dom.editorTextarea.value).toBe('CREATE TABLE db.t\n(\n  a Int\n)');
+    expect(app.editor.getValue()).toBe('CREATE TABLE db.t\n(\n  a Int\n)');
   });
   it('falls back to the raw DDL when formatting fails', async () => {
     const { app } = appFor([
@@ -1202,23 +1198,23 @@ describe('insertCreate', () => {
       [(u, sql) => /formatQuery/.test(sql), resp({ ok: false, status: 500, text: '{"exception":"x"}' })],
     ]);
     await app.actions.insertCreate('db.t');
-    expect(app.dom.editorTextarea.value).toBe('CREATE TABLE db.t (a Int)');
+    expect(app.editor.getValue()).toBe('CREATE TABLE db.t (a Int)');
   });
   it('no-ops when SHOW CREATE returns no statement', async () => {
     const { app } = appFor([
       [(u, sql) => /SHOW CREATE/.test(sql), resp({ json: { data: [] } })],
     ]);
-    app.dom.editorTextarea.value = 'keep';
+    app.editor.replaceDocument('keep');
     await app.actions.insertCreate('db.t');
-    expect(app.dom.editorTextarea.value).toBe('keep');
+    expect(app.editor.getValue()).toBe('keep');
   });
   it('surfaces a SHOW CREATE failure without changing the editor', async () => {
     const { app } = appFor([
       [(u, sql) => /SHOW CREATE/.test(sql), resp({ ok: false, status: 500, text: '{"exception":"DB::Exception: no table"}' })],
     ]);
-    app.dom.editorTextarea.value = 'keep';
+    app.editor.replaceDocument('keep');
     await app.actions.insertCreate('db.t');
-    expect(app.dom.editorTextarea.value).toBe('keep');
+    expect(app.editor.getValue()).toBe('keep');
     expect(document.body.querySelector('.share-toast')).not.toBeNull();
   });
   it('signs out when there is no usable token', async () => {
@@ -2252,10 +2248,8 @@ describe('script export (issue #99)', () => {
     const showDirectoryPicker = vi.fn(async () => { throw Object.assign(new Error('x'), { name: 'AbortError' }); });
     const app = createApp(env({ window: fakeWin(), showSaveFilePicker, showDirectoryPicker, isSecureContext: true }));
     app.renderApp();
-    const ta = app.dom.editorTextarea;
-    ta.value = 'SELECT 1; SELECT 2';
-    ta.selectionStart = 0; ta.selectionEnd = 8; // "SELECT 1" — a single statement
-    app.activeTab().sql = ta.value;
+    app.editor.replaceDocument('SELECT 1; SELECT 2');
+    app.dom.editorView.dispatch({ selection: { anchor: 0, head: 8 } }); // "SELECT 1" — a single statement
     await app.actions.exportEntry();
     expect(showSaveFilePicker).toHaveBeenCalledTimes(1); // one selected statement → single-file path
     expect(showDirectoryPicker).not.toHaveBeenCalled();
diff --git a/tests/unit/codemirror-adapter.test.js b/tests/unit/codemirror-adapter.test.js
new file mode 100644
index 00000000..49a3fa0e
--- /dev/null
+++ b/tests/unit/codemirror-adapter.test.js
@@ -0,0 +1,637 @@
+import { describe, it, expect, vi } from 'vitest';
+import { undoDepth, undo } from '@codemirror/commands';
+import { EditorState } from '@codemirror/state';
+import {
+  createCodeMirrorEditor, langExtensionFor, completionSourceFor, applyFor,
+  infoFor, hoverSourceFor, handleDrop, insertTwoSpaces, inputGuards, syncTx,
+} from '../../src/editor/codemirror-adapter.js';
+import { activeTab, newTabObj } from '../../src/state.js';
+import { assembleReferenceData } from '../../src/core/completions.js';
+import { IDENT_MIME, SUBQUERY_MIME } from '../../src/ui/dnd-mime.js';
+import { makeApp as baseApp } from '../helpers/fake-app.js';
+
+// The CM6 adapter runs against the REAL CodeMirror under happy-dom — no fake
+// editor. Construction, dispatch, undo, and keymaps all work headless; only
+// coordinate measurement doesn't, which is why the inner sources/handlers are
+// exported and invoked directly where needed.
+
+// The shared fake-app, narrowed to what the adapter reads: a fresh dom bag
+// (mount registers editorView into it), reference data, and NO entityDoc by
+// default (infoFor treats a missing loader as "no info").
+const makeApp = (over = {}) => baseApp({
+  dom: {},
+  refData: assembleReferenceData(null),
+  completions: [],
+  entityDoc: undefined,
+  ...over,
+});
+
+// Mount a fresh port + view; subscribe like app.js does (#143) so tab.sql
+// tracks the view.
+function mounted(over = {}) {
+  const app = makeApp(over);
+  const port = createCodeMirrorEditor(app);
+  const changes = [];
+  port.onDocChange((v) => {
+    changes.push(v);
+    const tab = activeTab(app.state);
+    tab.sql = v;
+    tab.dirty = true;
+  });
+  const host = document.createElement('div');
+  document.body.appendChild(host);
+  port.mount(host);
+  return { app, port, host, changes, view: app.dom.editorView };
+}
+
+describe('EditorPort surface (pre-mount tolerance)', () => {
+  it('every method no-ops / returns the empty shape before mount()', () => {
+    const port = createCodeMirrorEditor(makeApp());
+    expect(port.getValue()).toBe('');
+    expect(port.getSelection()).toEqual({ start: 0, end: 0, text: '' });
+    expect(port.hasFocus()).toBe(false);
+    expect(port.focus()).toBeUndefined();
+    expect(port.insertAtCursor('x')).toBeUndefined();
+    expect(port.replaceDocument('y')).toBeUndefined();
+    expect(port.revealOffset(3)).toBeUndefined();
+    expect(port.syncFromState()).toBeUndefined();
+    expect(port.refreshReference()).toBeUndefined(); // updates the pending lang ext, no view
+    expect(port.destroy()).toBeUndefined();
+  });
+});
+
+describe('mount / re-mount / destroy', () => {
+  it('mounts a CM6 view showing the active tab and reparents on re-mount (same view, subscriptions intact)', () => {
+    const app = makeApp();
+    activeTab(app.state).sql = 'SELECT 1';
+    const port = createCodeMirrorEditor(app);
+    const seen = [];
+    port.onDocChange((v) => seen.push(v));
+    const a = document.createElement('div');
+    port.mount(a);
+    const view = app.dom.editorView;
+    expect(a.querySelector('.cm-editor')).toBe(view.dom);
+    expect(port.getValue()).toBe('SELECT 1');
+    // renderApp re-run (sign-out → sign-in): new container, same live view.
+    const b = document.createElement('div');
+    port.mount(b);
+    expect(app.dom.editorView).toBe(view);
+    expect(b.querySelector('.cm-editor')).toBe(view.dom);
+    expect(a.querySelector('.cm-editor')).toBe(null);
+    view.dispatch({ selection: { anchor: view.state.doc.length } });
+    port.insertAtCursor('!');
+    expect(seen).toEqual(['SELECT 1!']); // the pre-re-mount subscription still fires
+  });
+
+  it('destroy() is terminal: drops subscriptions and the view', () => {
+    const { port, changes } = mounted();
+    port.destroy();
+    expect(port.getValue()).toBe('');
+    expect(port.hasFocus()).toBe(false);
+    port.insertAtCursor('x'); // no view — silent no-op, no emit
+    expect(changes).toEqual([]);
+    expect(port.destroy()).toBeUndefined(); // idempotent
+  });
+});
+
+describe('document edits through the port', () => {
+  it('insertAtCursor replaces the selection, moves the caret after the text, and emits', () => {
+    const { port, view, app, changes } = mounted();
+    port.replaceDocument('SELECT  FROM t');
+    view.dispatch({ selection: { anchor: 7 } });
+    port.insertAtCursor('count(*)');
+    expect(port.getValue()).toBe('SELECT count(*) FROM t');
+    expect(view.state.selection.main.head).toBe(15);
+    expect(changes.at(-1)).toBe('SELECT count(*) FROM t');
+    expect(activeTab(app.state).sql).toBe('SELECT count(*) FROM t');
+  });
+
+  it('replaceDocument replaces the whole doc with the caret at the end, preserving undo', () => {
+    const { port, view } = mounted();
+    port.replaceDocument('one');
+    port.replaceDocument('two');
+    expect(port.getValue()).toBe('two');
+    expect(view.state.selection.main.head).toBe(3);
+    undo(view);
+    expect(port.getValue()).toBe('one'); // history survived the full replace
+  });
+
+  it('replaceDocument with identical text is a strict no-op (idempotent Format re-run)', () => {
+    const { port, view, changes } = mounted();
+    port.replaceDocument('SELECT\n    1\n');
+    const depth = undoDepth(view.state);
+    const emitted = changes.length;
+    port.replaceDocument('SELECT\n    1\n');
+    port.replaceDocument('SELECT\n    1\n');
+    expect(port.getValue()).toBe('SELECT\n    1\n'); // never doubled
+    expect(undoDepth(view.state)).toBe(depth);       // no phantom undo entries
+    expect(changes.length).toBe(emitted);            // no phantom emits
+  });
+
+  it('getSelection reflects the CM selection; revealOffset clamps and moves the caret', () => {
+    const { port, view } = mounted();
+    port.replaceDocument('SELECT 1 FROM t');
+    view.dispatch({ selection: { anchor: 0, head: 6 } });
+    expect(port.getSelection()).toEqual({ start: 0, end: 6, text: 'SELECT' });
+    port.revealOffset(9999);
+    expect(view.state.selection.main.head).toBe(15); // clamped to doc length
+    port.revealOffset(-5);
+    expect(view.state.selection.main.head).toBe(0);
+  });
+
+  it('replaceDocument refocuses the editor so ⌘Z works right after a toolbar Format', async () => {
+    const { port, view } = mounted();
+    port.replaceDocument('SELECT 1');
+    await Promise.resolve(); // the focus is microtask-deferred (happy-dom selectionchange re-entrancy)
+    expect(document.activeElement).toBe(view.contentDOM);
+    port.destroy();
+    port.replaceDocument('x'); // and the deferred focus is view-guarded — no zombie focus after destroy
+    await Promise.resolve();
+  });
+
+  it('hasFocus tracks the view focus state', () => {
+    const { port, view } = mounted();
+    expect(port.hasFocus()).toBe(view.hasFocus);
+    port.focus();
+    expect(port.hasFocus()).toBe(view.hasFocus);
+  });
+});
+
+describe('global-chord bubbling (the ⌘↵ acceptance rule)', () => {
+  it('plain Enter is handled by CM6; Mod-Enter bubbles out unprevented', () => {
+    const { view } = mounted();
+    const enter = new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true });
+    view.contentDOM.dispatchEvent(enter);
+    expect(enter.defaultPrevented).toBe(true); // newline — CM6 owns it
+    const run = new KeyboardEvent('keydown', { key: 'Enter', ctrlKey: true, bubbles: true, cancelable: true });
+    view.contentDOM.dispatchEvent(run);
+    expect(run.defaultPrevented).toBe(false); // insertBlankLine stripped — reaches the document handler
+  });
+
+  it('Tab inserts two literal spaces (no completion open)', () => {
+    const { port, view } = mounted();
+    port.replaceDocument('a');
+    view.dispatch({ selection: { anchor: 1 } });
+    const tab = new KeyboardEvent('keydown', { key: 'Tab', bubbles: true, cancelable: true });
+    view.contentDOM.dispatchEvent(tab);
+    expect(tab.defaultPrevented).toBe(true);
+    expect(port.getValue()).toBe('a  ');
+    expect(insertTwoSpaces(view)).toBe(true); // direct: always claims the key
+  });
+});
+
+describe('per-tab EditorState (syncFromState)', () => {
+  const addTab = (app, id, sqlText) => {
+    const t = newTabObj(id);
+    t.sql = sqlText;
+    app.state.tabs.value = [...app.state.tabs.value, t];
+    return t;
+  };
+
+  it('same tab + equal doc is a no-op that preserves the selection', () => {
+    const { port, view, app, changes } = mounted();
+    port.replaceDocument('SELECT 1');
+    view.dispatch({ selection: { anchor: 3 } });
+    const emitted = changes.length;
+    port.syncFromState(); // the effect also fires on unrelated tab-list changes
+    expect(view.state.selection.main.head).toBe(3);
+    expect(changes.length).toBe(emitted);
+    expect(activeTab(app.state).dirty).toBe(true); // untouched, not re-written
+  });
+
+  it('same tab + external tab.sql change reconciles the doc WITHOUT emitting (no false dirty)', () => {
+    const { port, view, app, changes } = mounted();
+    activeTab(app.state).sql = 'SELECT 42';
+    port.syncFromState();
+    expect(port.getValue()).toBe('SELECT 42');
+    expect(changes).toEqual([]); // annotation-guarded — a sync is not a user edit
+    undo(view);
+    expect(port.getValue()).toBe('SELECT 42'); // the reconcile never entered the undo history
+  });
+
+  it('tab switches park and restore per-tab undo history', () => {
+    const { port, view, app } = mounted();
+    port.replaceDocument('tab one');
+    addTab(app, 't2', 'tab two');
+    app.state.activeTabId.value = 't2';
+    port.syncFromState();
+    expect(port.getValue()).toBe('tab two');
+    expect(undoDepth(view.state)).toBe(0); // fresh tab, fresh history
+    port.replaceDocument('tab two edited');
+    app.state.activeTabId.value = 't1';
+    port.syncFromState();
+    expect(port.getValue()).toBe('tab one');
+    undo(view);
+    expect(port.getValue()).toBe(''); // t1's own history — the replace undone
+    app.state.activeTabId.value = 't2';
+    port.syncFromState();
+    expect(port.getValue()).toBe('tab two edited'); // t2 state restored intact
+    undo(view);
+    expect(port.getValue()).toBe('tab two');
+  });
+
+  it('a restored tab reconciles an external tab.sql change silently', () => {
+    const { port, app, changes } = mounted();
+    addTab(app, 't2', 'two');
+    app.state.activeTabId.value = 't2';
+    port.syncFromState();
+    app.state.activeTabId.value = 't1';
+    port.syncFromState();
+    app.state.tabs.value.find((t) => t.id === 't2').sql = 'two rewritten';
+    const emitted = changes.length;
+    app.state.activeTabId.value = 't2';
+    port.syncFromState();
+    expect(port.getValue()).toBe('two rewritten');
+    expect(changes.length).toBe(emitted);
+  });
+
+  it('closing the shown tab drops its state instead of parking it', () => {
+    const { port, app } = mounted();
+    addTab(app, 't2', 'doomed');
+    app.state.activeTabId.value = 't2';
+    port.syncFromState();
+    // close t2 while it is shown; t1 becomes active
+    app.state.tabs.value = app.state.tabs.value.filter((t) => t.id !== 't2');
+    app.state.activeTabId.value = 't1';
+    port.syncFromState();
+    expect(port.getValue()).toBe('');
+    // re-open an unrelated tab with the recycled id — it must start fresh
+    addTab(app, 't2', 'fresh');
+    app.state.activeTabId.value = 't2';
+    port.syncFromState();
+    expect(port.getValue()).toBe('fresh');
+  });
+
+  it("a restored tab's parked selection is collapsed (no invisible run/export target)", () => {
+    const { port, view, app } = mounted();
+    port.replaceDocument('SELECT 1; SELECT 2');
+    view.dispatch({ selection: { anchor: 10, head: 18 } }); // select 'SELECT 2'
+    addTab(app, 't2', 'two');
+    app.state.activeTabId.value = 't2';
+    port.syncFromState();
+    app.state.activeTabId.value = 't1';
+    port.syncFromState();
+    expect(port.getSelection()).toEqual({ start: 18, end: 18, text: '' }); // caret kept, range gone
+  });
+
+  it('an update mixing a user edit with a sync transaction still emits (tab.sql must not go stale)', () => {
+    const { view, changes } = mounted();
+    const user = view.state.update({ changes: { from: 0, to: 0, insert: 'user' } });
+    const sync = user.state.update({ changes: { from: 0, to: 0, insert: 'x' }, annotations: syncTx.of(true) });
+    view.update([user, sync]); // one coalesced view update, two transactions
+    expect(changes).toEqual(['xuser']); // the user edit reached onDocChange
+  });
+
+  it('refreshReference() reconfigures the live view and parked states on restore', () => {
+    const { port, app } = mounted();
+    port.replaceDocument('select magicword from t');
+    const t2 = newTabObj('t2');
+    t2.sql = 'select 2';
+    app.state.tabs.value = [...app.state.tabs.value, t2];
+    app.state.activeTabId.value = 't2';
+    port.syncFromState(); // t1 parked with the OLD dialect
+    app.refData = assembleReferenceData({
+      keywords: ['MAGICWORD', 'SELECT', 'FROM'],
+      functions: { magicfn: { kind: 'fn', sig: 'magicfn()', ret: '', desc: '' } },
+      formats: ['CSV'],
+    });
+    port.refreshReference(); // live view reconfigured
+    app.state.activeTabId.value = 't1';
+    port.syncFromState(); // restore re-applies the current dialect to the parked state
+    expect(port.getValue()).toBe('select magicword from t');
+    const kw = app.dom.editorView.dom.querySelectorAll('.sql-keyword');
+    const texts = [...kw].map((n) => n.textContent);
+    expect(texts).toContain('magicword'); // the new server keyword set took effect
+  });
+});
+
+describe('langExtensionFor', () => {
+  it('builds an empty-set dialect when refData is absent', () => {
+    const ext = langExtensionFor({ refData: null });
+    expect(Array.isArray(ext)).toBe(true);
+    const st = EditorState.create({ doc: 'x', extensions: ext });
+    expect(st.languageDataAt('closeBrackets', 0)[0]).toEqual({ brackets: ['(', '[', "'", '"', '`'] }); // quotes pair (editor-brackets.js parity)
+  });
+});
+
+describe('completionSourceFor', () => {
+  const ref = assembleReferenceData(null);
+  const app = makeApp({
+    completions: [
+      { label: 'SELECT', kind: 'keyword', insert: 'SELECT', detail: 'keyword' },
+      { label: 'sum', kind: 'agg', insert: 'sum()', caretBack: 1, detail: '()' },
+      { label: 'trips', kind: 'table', insert: 'trips', detail: 'table', parent: 'db1' },
+      { label: 'fare', kind: 'column', insert: 'fare', parent: 'trips' },
+      { label: 'odd', kind: 'mystery', insert: 'odd' },
+    ],
+    refData: ref,
+  });
+  const src = completionSourceFor(app);
+  const ctx = (doc, pos, explicit = false) => ({ state: EditorState.create({ doc }), pos, explicit });
+
+  it('returns null before the first character unless explicit', () => {
+    expect(src(ctx('', 0))).toBe(null);
+    expect(src(ctx('', 0, true))).not.toBe(null); // Ctrl-Space on empty → keywords+tables
+  });
+
+  it('serves the core ranking unfiltered with our from/to', () => {
+    const r = src(ctx('sel', 3));
+    expect(r.filter).toBe(false);
+    expect(r.from).toBe(0);
+    expect(r.to).toBe(3);
+    expect(r.options[0].label).toBe('SELECT');
+    expect(r.options[0].type).toBe('keyword');
+    expect(r.options.find((o) => o.label === 'odd')).toBeUndefined();
+  });
+
+  it('passes the kind through as the icon type and omits missing detail', () => {
+    const r = src(ctx('odd', 3));
+    const o = r.options.find((x) => x.label === 'odd');
+    expect(o.type).toBe('mystery'); // unknown kinds render the base '·' chip via CSS
+    expect(o.detail).toBeUndefined();
+  });
+
+  it('qualified table.column completion', () => {
+    const r = src(ctx('SELECT trips.f', 14));
+    expect(r.options.map((o) => o.label)).toEqual(['fare']);
+  });
+
+  it('an escaped backtick before the caret does not fake a closed identifier (no spurious popup)', () => {
+    // Slicing AT the caret made the open `a\`b token end in a backtick, so it
+    // read as CLOSED → word '' → a spurious keyword/table popup whose accept
+    // would splice INSIDE the identifier. Slicing to line end keeps the
+    // open-identifier word ('a\\`' — matches nothing) and stays silent.
+    expect(src(ctx('SELECT `a\\`b` FROM trips', 11, true))).toBe(null);
+  });
+
+  it('returns null when nothing matches', () => {
+    expect(src(ctx('zzzznope', 8))).toBe(null);
+    expect(completionSourceFor(makeApp({ completions: undefined }))(ctx('se', 2))).toBe(null);
+  });
+});
+
+describe('applyFor', () => {
+  it('label-identical inserts use the default apply; differing inserts are strings', () => {
+    expect(applyFor({ label: 'SELECT', insert: 'SELECT' })).toBeUndefined();
+    expect(applyFor({ label: 'weird name', insert: '`weird name`' })).toBe('`weird name`');
+  });
+
+  it('caretBack items dispatch an edit that lands the caret between the parens', () => {
+    const { view } = mounted();
+    view.dispatch({ changes: { from: 0, to: 0, insert: 'su' }, selection: { anchor: 2 } });
+    const apply = applyFor({ label: 'sum', insert: 'sum()', caretBack: 1 });
+    apply(view, null, 0, 2);
+    expect(view.state.doc.toString()).toBe('sum()');
+    expect(view.state.selection.main.head).toBe(4); // between the parens
+  });
+});
+
+describe('infoFor', () => {
+  const ref = assembleReferenceData(null);
+  it('keywords resolve the static doc as a DOM node (CM6 appendChild()s an info fn result)', () => {
+    const app = makeApp({ refData: ref });
+    const node = infoFor(app, { kind: 'keyword', label: 'FORMAT' })();
+    expect(node.nodeType).toBe(1); // a bare string would throw in CM6's addInfoPane
+    expect(node.textContent).toMatch(/output format/);
+    expect(infoFor(app, { kind: 'keyword', label: 'ZZZ' })()).toBe(null);
+    expect(infoFor(makeApp({ refData: null }), { kind: 'keyword', label: 'FORMAT' })()).toBe(null);
+  });
+  it('functions fetch lazily through app.entityDoc; empty doc → null', async () => {
+    const app = makeApp({ entityDoc: vi.fn(async (n) => (n === 'sum' ? 'adds things' : '')) });
+    const node = await infoFor(app, { kind: 'agg', label: 'sum' })();
+    expect(node.nodeType).toBe(1);
+    expect(node.textContent).toBe('adds things');
+    await expect(infoFor(app, { kind: 'fn', label: 'nope' })()).resolves.toBe(null);
+  });
+  it('no entityDoc / other kinds → no info', () => {
+    expect(infoFor(makeApp(), { kind: 'fn', label: 'sum' })).toBeUndefined();
+    expect(infoFor(makeApp(), { kind: 'table', label: 't' })).toBeUndefined();
+  });
+});
+
+describe('hoverSourceFor', () => {
+  const ref = assembleReferenceData({
+    keywords: ['PREWHERE'],
+    functions: {
+      described: { kind: 'fn', sig: 'described(x)', ret: 'UInt8', desc: 'has a doc' },
+      bare: { kind: 'fn', sig: '', ret: '', desc: '' },
+    },
+    formats: ['CSV'],
+  });
+
+  it('returns null off-word or without refData', () => {
+    const { view } = mounted({ refData: ref });
+    const hover = hoverSourceFor({ refData: ref });
+    view.dispatch({ changes: { from: 0, to: 0, insert: '   ' } });
+    expect(hover(view, 1)).toBe(null); // whitespace
+    expect(hoverSourceFor({ refData: null })(view, 1)).toBe(null);
+  });
+
+  it('unknown words get no tooltip; keywords get their static doc (multi-line offsets)', () => {
+    const { view } = mounted({ refData: ref });
+    const hover = hoverSourceFor({ refData: ref });
+    // Line 3 — pins the line.from offset arithmetic (word lookup AND tooltip range)
+    view.dispatch({ changes: { from: 0, to: 0, insert: '\n\nmystery PREWHERE' } });
+    expect(hover(view, 4)).toBe(null);
+    const tip = hover(view, 12);
+    expect(tip.pos).toBe(10);
+    expect(tip.end).toBe(18);
+    expect(tip.create().dom.textContent).toMatch(/before reading other columns/);
+  });
+
+  it('functions show sig → ret + description; missing desc fetches via entityDoc', async () => {
+    const entityDoc = vi.fn(async () => 'fetched doc');
+    const { view } = mounted({ refData: ref });
+    const hover = hoverSourceFor({ refData: ref, entityDoc });
+    view.dispatch({ changes: { from: 0, to: 0, insert: 'described bare' } });
+    const rich = hover(view, 3).create().dom;
+    expect(rich.textContent).toContain('described(x)');
+    expect(rich.textContent).toContain('→ UInt8');
+    expect(rich.textContent).toContain('has a doc');
+    expect(entityDoc).not.toHaveBeenCalled(); // desc already known — no fetch
+    const lazy = hover(view, 12).create().dom;
+    expect(lazy.textContent).toContain('bare()'); // sig fallback
+    await Promise.resolve();
+    expect(lazy.querySelector('.hover-doc').textContent).toBe('fetched doc');
+    // no entityDoc injected → the empty desc just stays empty
+    const noFetch = hoverSourceFor({ refData: ref })(view, 12).create().dom;
+    expect(noFetch.querySelector('.hover-doc').textContent).toBe('');
+  });
+});
+
+describe('handleDrop', () => {
+  const evt = (data, coords = { clientX: 0, clientY: 0 }) => ({
+    dataTransfer: { getData: (t) => data[t] || '' },
+    preventDefault: vi.fn(),
+    ...coords,
+  });
+
+  it('ignores events without dataTransfer or without our MIME types', () => {
+    const { view, app } = mounted();
+    expect(handleDrop(app, view, { dataTransfer: null })).toBe(false);
+    const e = evt({ 'text/plain': 'hi' });
+    expect(handleDrop(app, view, e)).toBe(false);
+    expect(e.preventDefault).not.toHaveBeenCalled();
+  });
+
+  it('inserts a schema identifier at the pointer position (what dropCursor promised)', () => {
+    const { view, app, changes } = mounted();
+    view.dispatch({ changes: { from: 0, to: 0, insert: 'SELECT  FROM t' }, selection: { anchor: 0 } });
+    view.posAtCoords = () => 7; // the pointer, not the parked caret
+    const e = evt({ [IDENT_MIME]: 'fare' });
+    expect(handleDrop(app, view, e)).toBe(true);
+    expect(e.preventDefault).toHaveBeenCalled();
+    expect(view.state.doc.toString()).toBe('SELECT fare FROM t');
+    expect(view.state.selection.main.head).toBe(11); // caret after the dropped text
+    expect(changes.at(-1)).toBe('SELECT fare FROM t'); // drop is a real edit — it emits
+  });
+
+  it('falls back to the caret when the identifier drop point maps to no position', () => {
+    const { view, app } = mounted();
+    view.dispatch({ changes: { from: 0, to: 0, insert: 'ab' }, selection: { anchor: 1 } });
+    view.posAtCoords = () => null;
+    expect(handleDrop(app, view, evt({ [IDENT_MIME]: 'X' }))).toBe(true);
+    expect(view.state.doc.toString()).toBe('aXb');
+  });
+
+  it('drops a saved query as a subquery at the pointer position', () => {
+    const { view, app } = mounted();
+    view.dispatch({ changes: { from: 0, to: 0, insert: 'xx' }, selection: { anchor: 0 } });
+    view.posAtCoords = () => 2; // pointer maps past the caret
+    const e = evt({ [SUBQUERY_MIME]: 'SELECT 1' });
+    expect(handleDrop(app, view, e)).toBe(true);
+    expect(view.state.doc.toString()).toBe('xx(\nSELECT 1\n)');
+    expect(view.state.selection.main.head).toBe(view.state.doc.length);
+  });
+
+  it('is wired into the view: real dragover/drop events route through the handlers', () => {
+    const { view } = mounted();
+    const over = new Event('dragover', { bubbles: true, cancelable: true });
+    view.contentDOM.dispatchEvent(over);
+    expect(over.defaultPrevented).toBe(true); // dragover accepts the drop target
+    const drop = new Event('drop', { bubbles: true, cancelable: true });
+    Object.defineProperty(drop, 'dataTransfer', { value: { getData: (t) => (t === IDENT_MIME ? 'col1' : '') } });
+    Object.defineProperty(drop, 'clientX', { value: 0 });
+    Object.defineProperty(drop, 'clientY', { value: 0 });
+    view.contentDOM.dispatchEvent(drop);
+    expect(view.state.doc.toString()).toBe('col1');
+  });
+
+  it('falls back to the caret when the pointer maps to no position, and rejects an empty subquery', () => {
+    const { view, app } = mounted();
+    view.dispatch({ changes: { from: 0, to: 0, insert: 'ab' }, selection: { anchor: 1 } });
+    view.posAtCoords = () => null;
+    expect(handleDrop(app, view, evt({ [SUBQUERY_MIME]: 'SELECT 2' }))).toBe(true);
+    expect(view.state.doc.toString()).toBe('a(\nSELECT 2\n)b');
+    expect(handleDrop(app, view, evt({ [SUBQUERY_MIME]: '   ' }))).toBe(false);
+  });
+});
+
+describe('reference-data lifecycle', () => {
+  it('mount resolves the dialect lazily — refData assigned after the factory still paints (createApp order)', () => {
+    const app = makeApp({ refData: null });
+    const port = createCodeMirrorEditor(app); // createApp builds the port BEFORE assembling refData
+    app.refData = assembleReferenceData(null); // …then assigns the built-in fallback pre-render
+    activeTab(app.state).sql = 'select 1 from t';
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    port.mount(host);
+    const kw = [...app.dom.editorView.dom.querySelectorAll('.sql-keyword')].map((n) => n.textContent);
+    expect(kw).toContain('select'); // NOT an empty dialect at first paint
+  });
+
+  it('camelCase server function names highlight (dialect words are lowercased on both sides)', () => {
+    const app = makeApp({
+      refData: assembleReferenceData({
+        keywords: ['SELECT', 'FROM'],
+        functions: { toDateTime: { kind: 'fn', sig: 'toDateTime(x)', ret: '', desc: '' } },
+        formats: ['CSV'],
+      }),
+    });
+    const port = createCodeMirrorEditor(app);
+    activeTab(app.state).sql = 'select toDateTime(x) from t';
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    port.mount(host);
+    const fns = [...app.dom.editorView.dom.querySelectorAll('.sql-func')].map((n) => n.textContent);
+    expect(fns).toContain('toDateTime'); // lang-sql looks words up lowercased
+  });
+});
+
+describe('input guards (the old editor-brackets.js role)', () => {
+  it('types a bare bracket inside strings/comments and defers elsewhere', () => {
+    const { view } = mounted();
+    view.dispatch({ changes: { from: 0, to: 0, insert: "SELECT 'a b' -- note" } });
+    view.dispatch({ selection: { anchor: 10 } }); // inside the string
+    expect(inputGuards(view, 10, 10, '(')).toBe(true);
+    expect(view.state.doc.toString()).toBe("SELECT 'a (b' -- note"); // bare ( — no stray )
+    const end = view.state.doc.length;
+    view.dispatch({ selection: { anchor: end } }); // inside the trailing comment
+    expect(inputGuards(view, end, end, '[')).toBe(true);
+    expect(view.state.doc.toString().endsWith('note[')).toBe(true);
+    view.dispatch({ selection: { anchor: 6 } }); // plain code → closeBrackets' turn
+    expect(inputGuards(view, 6, 6, '(')).toBe(false);
+    expect(inputGuards(view, 6, 6, 'x')).toBe(false); // not a pairing char at all
+  });
+
+  it('quotes stay quiet inside comments and backtick identifiers, and replace a selection inside a string', () => {
+    const { view } = mounted();
+    view.dispatch({ changes: { from: 0, to: 0, insert: '-- rock ' } });
+    view.dispatch({ selection: { anchor: 8 } });
+    expect(inputGuards(view, 8, 8, "'")).toBe(true); // no '' pair in the comment
+    expect(view.state.doc.toString()).toBe("-- rock '");
+    view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: "SELECT 'hello world'" }, selection: { anchor: 14, head: 19 } }); // 'world' selected
+    expect(inputGuards(view, 14, 19, "'")).toBe(true); // replaced, not wrapped
+    expect(view.state.doc.toString()).toBe("SELECT 'hello ''");
+    // in plain code a quote defers to closeBrackets (pairing/wrapping is its job)
+    view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: 'abc' }, selection: { anchor: 0 } });
+    expect(inputGuards(view, 0, 0, "'")).toBe(false);
+  });
+
+  it('steps over a pre-existing closer or quote (not just pairs CM6 inserted itself)', () => {
+    const { view } = mounted();
+    view.dispatch({ changes: { from: 0, to: 0, insert: "f(x)'s'" } });
+    view.dispatch({ selection: { anchor: 3 } }); // before the )
+    expect(inputGuards(view, 3, 3, ')')).toBe(true);
+    expect(view.state.doc.toString()).toBe("f(x)'s'"); // nothing inserted…
+    expect(view.state.selection.main.head).toBe(4);    // …caret stepped over
+    view.dispatch({ selection: { anchor: 6 } }); // before the closing quote
+    expect(inputGuards(view, 6, 6, "'")).toBe(true);
+    expect(view.state.doc.toString()).toBe("f(x)'s'");
+    expect(view.state.selection.main.head).toBe(7);
+  });
+
+  it('bails out like closeBrackets does: multi-char input, readOnly, or a range that is not the selection', () => {
+    const { view } = mounted();
+    view.dispatch({ changes: { from: 0, to: 0, insert: "'ab'" }, selection: { anchor: 2 } });
+    expect(inputGuards(view, 2, 2, '((')).toBe(false); // multi-char
+    expect(inputGuards(view, 1, 1, '(')).toBe(false);  // range ≠ selection (browser-generated correction)
+    const ro = new (view.constructor)({ state: EditorState.create({ doc: "'a'", extensions: [EditorState.readOnly.of(true)] }) });
+    expect(inputGuards(ro, 1, 1, '(')).toBe(false);    // readOnly
+    ro.destroy();
+  });
+
+  it('hover stays quiet inside strings and comments (no phantom docs over prose)', () => {
+    const ref = assembleReferenceData(null);
+    const { view } = mounted({ refData: ref });
+    view.dispatch({ changes: { from: 0, to: 0, insert: "SELECT 'count' -- count rows" } });
+    const hover = hoverSourceFor({ refData: ref });
+    expect(hover(view, 10)).toBe(null); // 'count' inside the string
+    expect(hover(view, 20)).toBe(null); // 'count' inside the comment
+    view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: 'SELECT count(x)' } });
+    expect(hover(view, 9)).not.toBe(null); // the real call still documents
+  });
+
+  it('hover resolves function names case-insensitively (SQL calls are case-insensitive)', () => {
+    const ref = assembleReferenceData({
+      keywords: ['SELECT'],
+      functions: { sum: { kind: 'agg', sig: 'sum(x)', ret: '', desc: 'adds' } },
+      formats: ['CSV'],
+    });
+    const { view } = mounted({ refData: ref });
+    view.dispatch({ changes: { from: 0, to: 0, insert: 'SELECT SUM(x)' } });
+    const tip = hoverSourceFor({ refData: ref })(view, 9);
+    expect(tip).not.toBe(null);
+    expect(tip.create().dom.textContent).toContain('sum(x)');
+  });
+});
diff --git a/tests/unit/completions.test.js b/tests/unit/completions.test.js
index 678991bc..704311a9 100644
--- a/tests/unit/completions.test.js
+++ b/tests/unit/completions.test.js
@@ -1,7 +1,7 @@
 import { describe, it, expect } from 'vitest';
 import {
   assembleReferenceData, buildCompletions, completionContext, rankCompletions,
-  wordAt, signatureContext,
+  wordAt,
 } from '../../src/core/completions.js';
 import { SQL_KEYWORDS, SQL_FUNCS } from '../../src/core/sql-highlight.js';
 
@@ -43,22 +43,6 @@ describe('wordAt', () => {
   });
 });
 
-describe('signatureContext', () => {
-  it('finds the enclosing function and the active argument index', () => {
-    expect(signatureContext('sum(a', 5)).toEqual({ name: 'sum', argIdx: 0 });
-    expect(signatureContext('sum(a, b', 8)).toEqual({ name: 'sum', argIdx: 1 });
-  });
-  it('counts only commas at the call depth (skips nested calls)', () => {
-    expect(signatureContext('if(x, foo(a,b), ', 16)).toEqual({ name: 'if', argIdx: 2 });
-  });
-  it('returns null outside a call, for an anonymous (, and across ; or newline', () => {
-    expect(signatureContext('select 1', 8)).toBeNull();
-    expect(signatureContext('(a', 2)).toBeNull();         // no name before '('
-    expect(signatureContext('sum(a); x', 9)).toBeNull();  // ';' at depth 0 stops the scan
-    expect(signatureContext('a\nb', 3)).toBeNull();        // newline at depth 0 stops the scan
-  });
-});
-
 describe('buildCompletions', () => {
   const ref = {
     keywords: ['SELECT'],
diff --git a/tests/unit/editor-brackets.test.js b/tests/unit/editor-brackets.test.js
deleted file mode 100644
index 0f178a3b..00000000
--- a/tests/unit/editor-brackets.test.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { matchBracketAt, bracketEdit } from '../../src/core/editor-brackets.js';
-
-describe('matchBracketAt', () => {
-  it('matches forward from an opener at the caret', () => {
-    expect(matchBracketAt('(a)', 0)).toEqual([0, 2]);
-  });
-  it('matches backward from a closer just before the caret', () => {
-    expect(matchBracketAt('(a)', 3)).toEqual([0, 2]);
-  });
-  it('handles nesting', () => {
-    expect(matchBracketAt('(())', 0)).toEqual([0, 3]);
-  });
-  it('matches braces too (matching spans {} even though auto-close does not)', () => {
-    expect(matchBracketAt('{x}', 0)).toEqual([0, 2]);
-  });
-  it('returns null for an unbalanced opener (and caret 0 has nothing behind it)', () => {
-    expect(matchBracketAt('((', 0)).toBeNull();
-  });
-  it('returns null for an unbalanced closer behind the caret', () => {
-    expect(matchBracketAt('a)', 2)).toBeNull();
-  });
-  it('returns null when the caret is not adjacent to a bracket', () => {
-    expect(matchBracketAt('abc', 1)).toBeNull();
-  });
-});
-
-describe('bracketEdit', () => {
-  it('auto-closes an opener with the caret inside', () => {
-    expect(bracketEdit('', 0, 0, '(')).toEqual({ value: '()', selStart: 1, selEnd: 1 });
-  });
-  it('wraps a selection with an opener', () => {
-    expect(bracketEdit('abc', 0, 3, '[')).toEqual({ value: '[abc]', selStart: 1, selEnd: 4 });
-  });
-  it('auto-closes a quote', () => {
-    expect(bracketEdit('', 0, 0, "'")).toEqual({ value: "''", selStart: 1, selEnd: 1 });
-  });
-  it('wraps a selection with a quote', () => {
-    expect(bracketEdit('abc', 0, 3, '"')).toEqual({ value: '"abc"', selStart: 1, selEnd: 4 });
-  });
-  it('types over an existing quote instead of inserting', () => {
-    expect(bracketEdit("''", 1, 1, "'")).toEqual({ value: "''", selStart: 2, selEnd: 2 });
-  });
-  it('types over an existing closer', () => {
-    expect(bracketEdit('()', 1, 1, ')')).toEqual({ value: '()', selStart: 2, selEnd: 2 });
-  });
-  it('returns null for a closer with no matching char ahead', () => {
-    expect(bracketEdit('ab', 1, 1, ')')).toBeNull();
-  });
-  it('Backspace removes both halves of an empty bracket pair', () => {
-    expect(bracketEdit('()', 1, 1, 'Backspace')).toEqual({ value: '', selStart: 0, selEnd: 0 });
-  });
-  it('Backspace removes both halves of an empty quote pair', () => {
-    expect(bracketEdit("x''y", 2, 2, 'Backspace')).toEqual({ value: 'xy', selStart: 1, selEnd: 1 });
-  });
-  it('Backspace not inside a pair → null', () => {
-    expect(bracketEdit('ab', 1, 1, 'Backspace')).toBeNull();
-    expect(bracketEdit('()', 0, 0, 'Backspace')).toBeNull(); // s = 0 guard
-    expect(bracketEdit('()', 0, 2, 'Backspace')).toBeNull(); // selection, not collapsed
-  });
-  it('{ is excluded from auto-close (Phase 1b), and ordinary keys are no-ops', () => {
-    expect(bracketEdit('', 0, 0, '{')).toBeNull();
-    expect(bracketEdit('ab', 1, 1, 'x')).toBeNull();
-    expect(bracketEdit('ab', 1, 1, 'Tab')).toBeNull();
-  });
-  describe('inLiteral suppresses auto-pairing but not type-over (#2 review)', () => {
-    it('does not auto-close an opener inside a string/comment', () => {
-      expect(bracketEdit("'O'", 2, 2, '(', true)).toBeNull(); // type '(' literally, no stray ')'
-    });
-    it('does not wrap a selection with an opener inside a literal', () => {
-      expect(bracketEdit("'abc'", 1, 4, '(', true)).toBeNull();
-    });
-    it('does not auto-pair a quote inside a literal', () => {
-      expect(bracketEdit("'ab", 3, 3, "'", true)).toBeNull();
-    });
-    it('still types over an existing quote inside a literal (closes it)', () => {
-      expect(bracketEdit("'ab'", 3, 3, "'", true)).toEqual({ value: "'ab'", selStart: 4, selEnd: 4 });
-    });
-    it('still types over a closer, and still pair-deletes, inside a literal', () => {
-      expect(bracketEdit('()', 1, 1, ')', true)).toEqual({ value: '()', selStart: 2, selEnd: 2 });
-      expect(bracketEdit('()', 1, 1, 'Backspace', true)).toEqual({ value: '', selStart: 0, selEnd: 0 });
-    });
-  });
-});
diff --git a/tests/unit/editor-geometry.test.js b/tests/unit/editor-geometry.test.js
deleted file mode 100644
index 752bdb26..00000000
--- a/tests/unit/editor-geometry.test.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { caretLineCol, caretXY, offsetFromXY } from '../../src/core/editor-geometry.js';
-
-describe('caretLineCol', () => {
-  it('computes line/col on the first line', () => {
-    expect(caretLineCol('select a', 3)).toEqual({ line: 0, col: 3 });
-  });
-  it('computes line/col after newlines', () => {
-    expect(caretLineCol('ab\ncd\nef', 7)).toEqual({ line: 2, col: 1 });
-  });
-});
-
-describe('caretXY', () => {
-  const m = { charWidth: 8, lhPx: 22, padX: 14, padY: 12, scrollTop: 0, scrollLeft: 0 };
-  it('offsets by padding + column/line', () => {
-    expect(caretXY('abcd', 2, m)).toEqual({ x: 14 + 2 * 8, y: 12 });
-  });
-  it('subtracts scroll when present', () => {
-    expect(caretXY('a\nb', 3, { ...m, scrollTop: 5, scrollLeft: 3 }))
-      .toEqual({ x: 14 + 8 - 3, y: 12 + 22 - 5 });
-  });
-  it('treats missing scroll as 0', () => {
-    expect(caretXY('ab', 1, { charWidth: 8, lhPx: 22, padX: 14, padY: 12 }))
-      .toEqual({ x: 22, y: 12 });
-  });
-});
-
-describe('offsetFromXY', () => {
-  const m = { charWidth: 8, lhPx: 22 };
-  it('maps a point to a text offset', () => {
-    expect(offsetFromXY('abc\ndef', 16, 0, m)).toBe(2);  // line 0, col 2
-    expect(offsetFromXY('abc\ndef', 8, 22, m)).toBe(5);  // line 1, col 1 → 'abc\n' (4) + 1
-  });
-  it('returns null well past a short line (no phantom hover), clamps a small overshoot (#10)', () => {
-    expect(offsetFromXY('ab\ncdef', 800, 0, m)).toBeNull();   // far past 'ab' → no token here
-    expect(offsetFromXY('ab\ncdef', 8 * 2 + 2, 0, m)).toBe(2); // within ½ char of the end → clamps to end
-    expect(offsetFromXY('ab\ncdef', -50, 0, m)).toBe(0);       // negative → col 0
-  });
-  it('returns null above or below the text', () => {
-    expect(offsetFromXY('abc', 0, -5, m)).toBeNull();
-    expect(offsetFromXY('abc', 0, 999, m)).toBeNull();
-  });
-});
diff --git a/tests/unit/editor-marks.test.js b/tests/unit/editor-marks.test.js
deleted file mode 100644
index c4ebf7e4..00000000
--- a/tests/unit/editor-marks.test.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { buildMarkSegments } from '../../src/core/editor-marks.js';
-
-// Contract: marks are sorted by start and non-overlapping (search matches come
-// back ordered + disjoint; the bracket pair is two sorted width-1 ranges and is
-// never mixed with search marks).
-describe('buildMarkSegments', () => {
-  it('returns a single plain segment when there are no marks', () => {
-    expect(buildMarkSegments('hello', [])).toEqual([{ text: 'hello', cls: null }]);
-  });
-  it('handles empty text with no marks', () => {
-    expect(buildMarkSegments('', [])).toEqual([{ text: '', cls: null }]);
-  });
-  it('splits text around a single mark, with a trailing plain segment', () => {
-    expect(buildMarkSegments('hello', [{ start: 1, end: 3, cls: 'match' }])).toEqual([
-      { text: 'h', cls: null }, { text: 'el', cls: 'match' }, { text: 'lo', cls: null },
-    ]);
-  });
-  it('emits no empty trailing segment for a mark that reaches the end', () => {
-    expect(buildMarkSegments('ab', [{ start: 0, end: 2, cls: 'match' }])).toEqual([{ text: 'ab', cls: 'match' }]);
-  });
-  it('keeps the gap between separated marks unmarked', () => {
-    expect(buildMarkSegments('a b c', [
-      { start: 0, end: 1, cls: 'match' }, { start: 4, end: 5, cls: 'match' },
-    ])).toEqual([
-      { text: 'a', cls: 'match' }, { text: ' b ', cls: null }, { text: 'c', cls: 'match' },
-    ]);
-  });
-  it('renders an adjacent (touching) pair with no gap segment, e.g. ()', () => {
-    expect(buildMarkSegments('()', [
-      { start: 0, end: 1, cls: 'bracket' }, { start: 1, end: 2, cls: 'bracket' },
-    ])).toEqual([{ text: '(', cls: 'bracket' }, { text: ')', cls: 'bracket' }]);
-  });
-});
diff --git a/tests/unit/editor-search.test.js b/tests/unit/editor-search.test.js
deleted file mode 100644
index 608b1d98..00000000
--- a/tests/unit/editor-search.test.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { findMatches, validRegex } from '../../src/core/editor-search.js';
-
-describe('findMatches', () => {
-  it('returns [] for an empty query', () => {
-    expect(findMatches('abc', '')).toEqual([]);
-  });
-  it('finds plain matches, case-insensitive by default', () => {
-    expect(findMatches('aAbA', 'a')).toEqual([
-      { start: 0, end: 1 }, { start: 1, end: 2 }, { start: 3, end: 4 },
-    ]);
-  });
-  it('honors caseSensitive', () => {
-    expect(findMatches('aA', 'a', { caseSensitive: true })).toEqual([{ start: 0, end: 1 }]);
-  });
-  it('escapes regex metacharacters in plain mode', () => {
-    expect(findMatches('a.b a.b', 'a.b')).toHaveLength(2);
-    expect(findMatches('axb', 'a.b')).toEqual([]); // '.' is a literal dot
-  });
-  it('wholeWord fences with boundaries', () => {
-    expect(findMatches('cat category', 'cat', { wholeWord: true })).toEqual([{ start: 0, end: 3 }]);
-  });
-  it('wholeWord fences in regex mode too (#4)', () => {
-    // \d+ as a whole word: matches the standalone 12 and 34, not the 12 inside a12
-    expect(findMatches('12 a12 34', '\\d+', { regex: true, wholeWord: true }))
-      .toEqual([{ start: 0, end: 2 }, { start: 7, end: 9 }]);
-  });
-  it('regex mode compiles the pattern', () => {
-    expect(findMatches('a1b2', '\\d', { regex: true })).toEqual([{ start: 1, end: 2 }, { start: 3, end: 4 }]);
-  });
-  it('regex mode honors caseSensitive', () => {
-    expect(findMatches('aA', 'a', { regex: true, caseSensitive: true })).toEqual([{ start: 0, end: 1 }]);
-  });
-  it('an invalid regex yields []', () => {
-    expect(findMatches('abc', '(', { regex: true })).toEqual([]);
-  });
-  it('drops zero-width matches (nothing to highlight or replace) without looping (#6)', () => {
-    expect(findMatches('ab', 'x*', { regex: true })).toEqual([]); // every match is zero-width
-    expect(findMatches('a\nb', '$', { regex: true })).toEqual([]);
-    // real matches around a zero-width-capable pattern are still kept
-    expect(findMatches('xax', 'a*', { regex: true })).toEqual([{ start: 1, end: 2 }]);
-  });
-  it('caps the match count to guard the keystroke path', () => {
-    expect(findMatches('a'.repeat(20000), 'a').length).toBe(10000);
-  });
-});
-
-describe('validRegex', () => {
-  it('is true when not in regex mode (even for a bad pattern)', () => {
-    expect(validRegex('(', false)).toBe(true);
-  });
-  it('is true for an empty query', () => {
-    expect(validRegex('', true)).toBe(true);
-  });
-  it('is true for a valid pattern, false for an invalid one', () => {
-    expect(validRegex('a+', true)).toBe(true);
-    expect(validRegex('(', true)).toBe(false);
-  });
-});
diff --git a/tests/unit/editor.test.js b/tests/unit/editor.test.js
deleted file mode 100644
index 51690f06..00000000
--- a/tests/unit/editor.test.js
+++ /dev/null
@@ -1,1022 +0,0 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { renderHighlightInto, createTextareaEditor } from '../../src/editor/textarea-adapter.js';
-import { IDENT_MIME, SUBQUERY_MIME } from '../../src/ui/dnd-mime.js';
-import { makeApp } from '../helpers/fake-app.js';
-
-// Port-backed stand-ins for the pre-#143 module-level API: each test mounts
-// through a fresh EditorPort exactly the way app.js does — including the
-// app-level onDocChange subscriber that now owns the tab.sql/dirty writes —
-// and the old helper names keep the specs below readable.
-const mountEditor = (app, container) => {
-  app.editor = createTextareaEditor(app);
-  app.editor.onDocChange((value) => {
-    const tab = app.activeTab();
-    tab.sql = value;
-    tab.dirty = true;
-  });
-  app.editor.mount(container);
-  return app.editor;
-};
-const insertAtCursor = (app, text) => app.editor.insertAtCursor(text);
-const replaceEditor = (app, text) => app.editor.replaceDocument(text);
-
-describe('renderHighlightInto', () => {
-  it('paints tokens as spans and whitespace as text, ending with newline', () => {
-    const pre = document.createElement('pre');
-    renderHighlightInto(pre, 'SELECT 1');
-    expect(pre.querySelector('.sql-keyword').textContent).toBe('SELECT');
-    expect(pre.querySelector('.sql-number').textContent).toBe('1');
-    expect(pre.textContent.endsWith('\n')).toBe(true);
-  });
-  it('forwards dynamic keyword/func sets to the tokenizer (#25)', () => {
-    const pre = document.createElement('pre');
-    renderHighlightInto(pre, 'FOO bar', { keywords: new Set(['FOO']), funcs: new Set(['bar']) });
-    expect(pre.querySelector('.sql-keyword').textContent).toBe('FOO');
-    expect(pre.querySelector('.sql-func').textContent).toBe('bar');
-  });
-});
-
-describe('mountEditor', () => {
-  function mount() {
-    const app = makeApp();
-    app.activeTab().sql = 'SELECT 1';
-    const container = document.createElement('div');
-    mountEditor(app, container);
-    return { app, container, ta: app.dom.editorTextarea };
-  }
-
-  it('builds the editor and syncs the active tab', () => {
-    const { container, app } = mount();
-    expect(container.querySelector('.sql-editor')).not.toBeNull();
-    expect(app.dom.editorTextarea.value).toBe('SELECT 1');
-    expect(app.dom.editorGutter.children.length).toBe(1);
-  });
-  it('highlights with the connection reference sets when app.refData is present (#25)', () => {
-    const app = makeApp();
-    app.refData = { keywordSet: new Set(['FOO']), funcSet: new Set() };
-    app.activeTab().sql = 'FOO';
-    mountEditor(app, document.createElement('div'));
-    expect(app.dom.editorPre.querySelector('.sql-keyword').textContent).toBe('FOO');
-  });
-  it('re-highlights when reference data arrives after connect — same text, new sets (#5 review)', () => {
-    const app = makeApp();
-    app.activeTab().sql = 'FOO';
-    mountEditor(app, document.createElement('div'));
-    expect(app.dom.editorPre.querySelector('.sql-keyword')).toBeNull(); // FOO is a plain ident pre-connect
-    app.refData = { keywordSet: new Set(['FOO']), funcSet: new Set() };
-    app.dom.editorSync(); // what loadReference calls when server sets arrive
-    // the shared token cache must invalidate on the refData change (not just on text change)
-    expect(app.dom.editorPre.querySelector('.sql-keyword').textContent).toBe('FOO');
-  });
-  it('typing repaints and reports the change through onDocChange (#143)', () => {
-    const { app, ta } = mount();
-    // The adapter only emits; the state writes (tab.sql/dirty) live in the
-    // subscriber (the mountEditor helper wires the same one app.js registers).
-    const seen = [];
-    app.editor.onDocChange((value) => seen.push(value));
-    ta.value = 'SELECT 2\nFROM t';
-    ta.dispatchEvent(new Event('input'));
-    expect(seen).toEqual(['SELECT 2\nFROM t']);
-    expect(app.activeTab().sql).toBe('SELECT 2\nFROM t');
-    expect(app.activeTab().dirty).toBe(true);
-    expect(app.dom.editorGutter.children.length).toBe(2);
-  });
-  it('onDocChange unsubscribe stops delivery; destroy() drops all subscribers', () => {
-    const { app, ta } = mount();
-    const seen = [];
-    const unsub = app.editor.onDocChange((value) => seen.push(value));
-    ta.value = 'a';
-    ta.dispatchEvent(new Event('input'));
-    unsub();
-    ta.value = 'b';
-    ta.dispatchEvent(new Event('input'));
-    expect(seen).toEqual(['a']);
-    const kept = [];
-    app.editor.onDocChange((value) => kept.push(value));
-    app.editor.destroy();
-    ta.value = 'c';
-    ta.dispatchEvent(new Event('input')); // emit after destroy → no-op
-    expect(kept).toEqual([]);
-  });
-  it('scroll syncs pre + gutter to the textarea on both axes', () => {
-    const { app, ta } = mount();
-    ta.scrollTop = 12;
-    ta.scrollLeft = 4;
-    ta.dispatchEvent(new Event('scroll'));
-    expect(app.dom.editorPre.scrollTop).toBe(12);
-    expect(app.dom.editorPre.scrollLeft).toBe(4); // horizontal sync (long lines)
-    expect(app.dom.editorGutter.scrollTop).toBe(12);
-    // NOTE: the real-world misalignment fixed alongside this was a render-layer
-    // bug — the textarea's own scrollbar shrank its clientHeight, so the pre
-    // (overflow:hidden, no scrollbar) couldn't scroll as far and the highlight
-    // clamped behind the selection. The fix is CSS (hide the textarea
-    // scrollbars so both client boxes match); happy-dom has no scrollbar layout,
-    // so that part is verified in a real browser, not here. This guards the
-    // sync wiring both layers depend on.
-  });
-  it('Tab key inserts two spaces at the cursor', () => {
-    const { ta } = mount();
-    ta.value = 'ab';
-    ta.selectionStart = ta.selectionEnd = 1;
-    const e = new KeyboardEvent('keydown', { key: 'Tab', cancelable: true });
-    ta.dispatchEvent(e);
-    expect(ta.value).toBe('a  b');
-    expect(e.defaultPrevented).toBe(true);
-  });
-  it('non-Tab keydown is ignored', () => {
-    const { ta } = mount();
-    const before = ta.value;
-    ta.dispatchEvent(new KeyboardEvent('keydown', { key: 'x' }));
-    expect(ta.value).toBe(before);
-  });
-  it('dragover prevents default so the textarea accepts drops', () => {
-    const { ta } = mount();
-    const e = new Event('dragover', { cancelable: true });
-    ta.dispatchEvent(e);
-    expect(e.defaultPrevented).toBe(true);
-  });
-  it('dropping a schema identifier inserts it at the cursor', () => {
-    const { app, ta } = mount();
-    ta.value = 'SELECT  FROM t';
-    ta.selectionStart = ta.selectionEnd = 7;
-    const e = new Event('drop', { cancelable: true });
-    e.dataTransfer = { getData: (m) => (m === IDENT_MIME ? 'db.tbl' : '') };
-    ta.dispatchEvent(e);
-    expect(ta.value).toBe('SELECT db.tbl FROM t');
-    expect(e.defaultPrevented).toBe(true);
-  });
-  it('dropping a saved/history query inserts it as a ( … ) subquery at the drop position', () => {
-    const { ta } = mount();
-    ta.value = 'X';
-    ta.selectionStart = ta.selectionEnd = 1; // caret at end — drop position must win
-    const e = new Event('drop', { cancelable: true });
-    e.clientX = 14; e.clientY = 13; // maps to text offset 0 (PAD_X/PAD_Y origin)
-    e.dataTransfer = { getData: (m) => (m === SUBQUERY_MIME ? 'SELECT 1 FORMAT JSON' : '') };
-    ta.dispatchEvent(e);
-    expect(ta.value).toBe('(\nSELECT 1\n)X'); // at offset 0 (not the caret), FORMAT stripped
-    expect(e.defaultPrevented).toBe(true);
-  });
-  it('falls back to the caret when the subquery is dropped past the text', () => {
-    const { ta } = mount();
-    ta.value = 'X';
-    ta.selectionStart = ta.selectionEnd = 1;
-    const e = new Event('drop', { cancelable: true });
-    e.clientX = 14; e.clientY = 9999; // below the last line → offsetFromXY null
-    e.dataTransfer = { getData: (m) => (m === SUBQUERY_MIME ? 'SELECT 1' : '') };
-    ta.dispatchEvent(e);
-    expect(ta.value).toBe('X(\nSELECT 1\n)'); // inserted at the caret
-    expect(e.defaultPrevented).toBe(true);
-  });
-  it('a subquery drop of empty SQL is a no-op (native handling)', () => {
-    const { ta } = mount();
-    const before = ta.value;
-    const e = new Event('drop', { cancelable: true });
-    e.dataTransfer = { getData: (m) => (m === SUBQUERY_MIME ? '   ' : '') };
-    ta.dispatchEvent(e);
-    expect(ta.value).toBe(before);
-    expect(e.defaultPrevented).toBe(false);
-  });
-  it('a drop without our identifier is left to native handling', () => {
-    const { ta } = mount();
-    const before = ta.value;
-    const e = new Event('drop', { cancelable: true });
-    e.dataTransfer = { getData: () => '' };
-    ta.dispatchEvent(e);
-    expect(ta.value).toBe(before);
-    expect(e.defaultPrevented).toBe(false);
-  });
-  it('a drop with no dataTransfer is a no-op', () => {
-    const { ta } = mount();
-    const before = ta.value;
-    const e = new Event('drop', { cancelable: true });
-    ta.dispatchEvent(e);
-    expect(ta.value).toBe(before);
-    expect(e.defaultPrevented).toBe(false);
-  });
-});
-
-describe('insertAtCursor', () => {
-  it('inserts text at the cursor and fires input', () => {
-    const app = makeApp();
-    mountEditor(app, document.createElement('div'));
-    const ta = app.dom.editorTextarea;
-    ta.value = 'SELECT  FROM t';
-    ta.selectionStart = ta.selectionEnd = 7;
-    insertAtCursor(app, 'x');
-    expect(ta.value).toBe('SELECT x FROM t');
-    expect(app.activeTab().sql).toBe('SELECT x FROM t');
-  });
-  it('no-ops without a textarea (port created, not yet mounted)', () => {
-    const port = createTextareaEditor(makeApp());
-    expect(() => port.insertAtCursor('x')).not.toThrow();
-  });
-  it('tries execCommand first but splices manually when it is a no-op (Firefox <textarea>)', () => {
-    const app = makeApp();
-    mountEditor(app, document.createElement('div'));
-    const ta = app.dom.editorTextarea;
-    ta.value = 'AB';
-    ta.selectionStart = ta.selectionEnd = 1;
-    const spy = vi.fn(() => true); // returns true but never edits — Firefox's quirk
-    document.execCommand = spy;
-    try {
-      insertAtCursor(app, 'x');
-      expect(spy).toHaveBeenCalledWith('insertText', false, 'x'); // execCommand attempted first
-      expect(ta.value).toBe('AxB'); // …and since nothing changed, the manual splice lands the text
-      expect(ta.selectionStart).toBe(2); // caret left right after the inserted text
-    } finally {
-      delete document.execCommand;
-    }
-  });
-});
-
-describe('replaceEditor', () => {
-  function mounted(sql = '') {
-    const app = makeApp();
-    app.activeTab().sql = sql;
-    mountEditor(app, document.createElement('div'));
-    return { app, ta: app.dom.editorTextarea };
-  }
-  it('swaps the whole content (fallback path when execCommand is unavailable)', () => {
-    const { ta, app } = mounted('select 1');
-    replaceEditor(app, 'SELECT\n  1');
-    expect(ta.value).toBe('SELECT\n  1');
-    expect(app.activeTab().sql).toBe('SELECT\n  1');
-  });
-  it('is a no-op when the content already equals the target (repeated Format never appends)', () => {
-    const { ta, app } = mounted('SELECT 1\n');
-    replaceEditor(app, 'SELECT 1\n'); // identical → must not append/duplicate
-    expect(ta.value).toBe('SELECT 1\n');
-  });
-  it('keeps the execCommand result when it reaches the target (undo-friendly path)', () => {
-    const { ta, app } = mounted('select 1');
-    const orig = document.execCommand;
-    document.execCommand = (_cmd, _ui, val) => { ta.value = val; return true; }; // simulate a real insertText
-    try { replaceEditor(app, 'SELECT 1'); } finally { document.execCommand = orig; }
-    expect(ta.value).toBe('SELECT 1');
-  });
-  it('no-ops without a textarea (port created, not yet mounted)', () => {
-    const port = createTextareaEditor(makeApp());
-    expect(() => port.replaceDocument('x')).not.toThrow();
-  });
-});
-
-describe('the EditorPort surface (#143)', () => {
-  it('tolerates every method before mount — createApp wires consumers first', () => {
-    const port = createTextareaEditor(makeApp());
-    expect(port.getValue()).toBe('');
-    expect(port.getSelection()).toEqual({ start: 0, end: 0, text: '' });
-    expect(port.hasFocus()).toBe(false);
-    expect(() => port.focus()).not.toThrow();
-    expect(() => port.revealOffset(3)).not.toThrow();
-    expect(() => port.syncFromState()).not.toThrow();
-    expect(() => port.refreshReference()).not.toThrow();
-    expect(() => port.destroy()).not.toThrow();
-  });
-  it('reflects the mounted textarea: value, selection, focus, reveal, sync', () => {
-    const app = makeApp();
-    app.activeTab().sql = 'SELECT abc FROM t';
-    const container = document.createElement('div');
-    document.body.appendChild(container); // focus/activeElement needs attachment
-    try {
-      const port = createTextareaEditor(app);
-      port.mount(container);
-      const ta = app.dom.editorTextarea;
-      expect(port.getValue()).toBe('SELECT abc FROM t');
-      ta.selectionStart = 7;
-      ta.selectionEnd = 10;
-      expect(port.getSelection()).toEqual({ start: 7, end: 10, text: 'abc' });
-      port.focus();
-      expect(port.hasFocus()).toBe(true);
-      port.revealOffset(0);
-      expect(ta.selectionStart).toBe(0);
-      // syncFromState / refreshReference both run the full sync() — the
-      // zero-behavior-change contract for refData arrival (#143; relaxed in #21).
-      app.activeTab().sql = 'SELECT 2';
-      port.syncFromState();
-      expect(ta.value).toBe('SELECT 2');
-      app.activeTab().sql = 'SELECT 3';
-      port.refreshReference();
-      expect(ta.value).toBe('SELECT 3');
-    } finally {
-      document.body.removeChild(container);
-    }
-  });
-});
-
-describe('in-editor find/replace (#23)', () => {
-  function mounted(sql = 'select a from t') {
-    const app = makeApp();
-    app.activeTab().sql = sql;
-    const container = document.createElement('div');
-    mountEditor(app, container);
-    return { app, container, ta: app.dom.editorTextarea };
-  }
-  const panel = (c) => c.querySelector('.sql-search');
-  const findInput = (c) => c.querySelector('.sql-search .srch-field');
-  const count = (c) => c.querySelector('.srch-count').textContent;
-  const type = (input, v) => { input.value = v; input.dispatchEvent(new Event('input')); };
-  const key = (el, k, opts = {}) => el.dispatchEvent(new KeyboardEvent('keydown', { key: k, cancelable: true, ...opts }));
-
-  it('Cmd+F (and Ctrl+F / uppercase F) opens the panel', () => {
-    const { container, ta } = mounted();
-    expect(panel(container)).toBeNull();
-    key(ta, 'f', { metaKey: true });
-    expect(panel(container)).not.toBeNull();
-    const b = mounted();
-    key(b.ta, 'F', { ctrlKey: true });
-    expect(panel(b.container)).not.toBeNull();
-  });
-
-  it('typing a query highlights matches in the overlay and shows the count', () => {
-    const { app, container, ta } = mounted('a a a');
-    key(ta, 'f', { metaKey: true });
-    type(findInput(container), 'a');
-    expect(count(container)).toBe('1/3');
-    expect(app.dom.editorMarkPre.querySelector('.mark-active')).not.toBeNull();
-    expect(app.dom.editorMarkPre.querySelectorAll('.mark-match').length).toBe(2);
-  });
-
-  it('next/prev cycle the active match (Enter, Shift+Enter, and the buttons)', () => {
-    const { container, ta } = mounted('a a a');
-    key(ta, 'f', { metaKey: true });
-    const input = findInput(container);
-    type(input, 'a');
-    key(input, 'Enter');                       // → 2/3
-    expect(count(container)).toBe('2/3');
-    key(input, 'Enter', { shiftKey: true });   // → 1/3
-    expect(count(container)).toBe('1/3');
-    container.querySelector('.srch-nav[title^="Previous"]').dispatchEvent(new Event('click')); // wrap → 3/3
-    expect(count(container)).toBe('3/3');
-    container.querySelector('.srch-nav[title^="Next"]').dispatchEvent(new Event('click'));      // wrap → 1/3
-    expect(count(container)).toBe('1/3');
-  });
-
-  it('next with no matches is a no-op', () => {
-    const { container, ta } = mounted('abc');
-    key(ta, 'f', { metaKey: true });
-    expect(() => container.querySelector('.srch-nav[title^="Next"]').dispatchEvent(new Event('click'))).not.toThrow();
-    expect(count(container)).toBe('0/0');
-  });
-
-  it('case / whole-word / regex toggles re-filter and reflect state', () => {
-    const { container, ta } = mounted('a A a');
-    key(ta, 'f', { metaKey: true });
-    type(findInput(container), 'a');
-    expect(count(container)).toBe('1/3');
-    const aa = container.querySelector('.srch-tog[title="Match case"]');
-    aa.dispatchEvent(new Event('click'));
-    expect(aa.classList.contains('on')).toBe(true);
-    expect(count(container)).toBe('1/2'); // only the two lowercase a's
-
-    const ww = mounted('cat category');
-    key(ww.ta, 'f', { metaKey: true });
-    type(findInput(ww.container), 'cat');
-    expect(count(ww.container)).toBe('1/2');
-    ww.container.querySelector('.srch-tog[title="Whole word"]').dispatchEvent(new Event('click'));
-    expect(count(ww.container)).toBe('1/1');
-  });
-
-  it('regex toggle + invalid pattern shows the bad-re state', () => {
-    const { container, ta } = mounted('a1 b2');
-    key(ta, 'f', { metaKey: true });
-    container.querySelector('.srch-tog[title="Regular expression"]').dispatchEvent(new Event('click'));
-    const input = findInput(container);
-    type(input, '\\d');
-    expect(count(container)).toBe('1/2');
-    type(input, '(');                          // invalid regex
-    expect(count(container)).toBe('bad re');
-    expect(input.classList.contains('bad')).toBe(true);
-  });
-
-  it('replace swaps the active match; replace-all swaps the rest', () => {
-    const { container, ta } = mounted('a a a');
-    key(ta, 'f', { metaKey: true });
-    type(findInput(container), 'a');
-    container.querySelector('.srch-disc').dispatchEvent(new Event('click')); // reveal replace row
-    const replaceInput = container.querySelectorAll('.sql-search .srch-field')[1];
-    type(replaceInput, 'X');
-    container.querySelector('.srch-btn').dispatchEvent(new Event('click'));  // Replace active
-    expect(ta.value).toBe('X a a');
-    container.querySelector('.srch-btn.primary').dispatchEvent(new Event('click')); // Replace all
-    expect(ta.value).toBe('X X X');
-  });
-
-  it('replace via Enter in the replace field, and replace/all no-op without matches', () => {
-    const { container, ta } = mounted('a a');
-    key(ta, 'f', { metaKey: true });
-    type(findInput(container), 'a');
-    container.querySelector('.srch-disc').dispatchEvent(new Event('click'));
-    const replaceInput = container.querySelectorAll('.sql-search .srch-field')[1];
-    type(replaceInput, 'Z');
-    key(replaceInput, 'Enter');
-    expect(ta.value).toBe('Z a');
-
-    const none = mounted('abc');
-    key(none.ta, 'f', { metaKey: true });
-    none.container.querySelector('.srch-disc').dispatchEvent(new Event('click'));
-    const before = none.ta.value;
-    none.container.querySelector('.srch-btn').dispatchEvent(new Event('click'));
-    none.container.querySelector('.srch-btn.primary').dispatchEvent(new Event('click'));
-    expect(none.ta.value).toBe(before);
-  });
-
-  it('Escape and the close button close the panel and clear highlights', () => {
-    const { app, container, ta } = mounted('a a');
-    expect(app.dom.editorSearch.isOpen()).toBe(false);
-    key(ta, 'f', { metaKey: true });
-    expect(app.dom.editorSearch.isOpen()).toBe(true);
-    type(findInput(container), 'a');
-    expect(app.dom.editorMarkPre.querySelector('.mark-active')).not.toBeNull();
-    key(findInput(container), 'Escape');
-    expect(app.dom.editorSearch.isOpen()).toBe(false);
-    expect(panel(container)).toBeNull();
-    expect(app.dom.editorMarkPre.querySelector('.mark-active')).toBeNull();
-    // reopen (reuses the panel element) and close via the × button
-    key(ta, 'f', { metaKey: true });
-    expect(panel(container)).not.toBeNull();
-    key(ta, 'f', { metaKey: true }); // already open → just refocus
-    container.querySelector('.srch-nav[title^="Close"]').dispatchEvent(new Event('click'));
-    expect(panel(container)).toBeNull();
-  });
-
-  it('Escape in the replace field closes the panel', () => {
-    const { container, ta } = mounted('a');
-    key(ta, 'f', { metaKey: true });
-    container.querySelector('.srch-disc').dispatchEvent(new Event('click'));
-    key(container.querySelectorAll('.sql-search .srch-field')[1], 'Escape');
-    expect(panel(container)).toBeNull();
-  });
-
-  it('toggling the replace disclosure shows then hides the replace row', () => {
-    const { container, ta } = mounted('a');
-    key(ta, 'f', { metaKey: true });
-    const disc = container.querySelector('.srch-disc');
-    expect(container.querySelectorAll('.sql-search .srch-field').length).toBe(1);
-    disc.dispatchEvent(new Event('click'));
-    expect(container.querySelectorAll('.sql-search .srch-field').length).toBe(2);
-    expect(disc.classList.contains('open')).toBe(true);
-    disc.dispatchEvent(new Event('click'));
-    expect(container.querySelectorAll('.sql-search .srch-field').length).toBe(1);
-  });
-
-  it('editing the text recomputes matches and the overlay mirrors the value', () => {
-    const { app, container, ta } = mounted('a a');
-    key(ta, 'f', { metaKey: true });
-    type(findInput(container), 'a');
-    expect(count(container)).toBe('1/2');
-    ta.value = 'a a a a'; // user types in the editor
-    ta.dispatchEvent(new Event('input'));
-    expect(count(container)).toBe('1/4');
-    expect(app.dom.editorMarkPre.textContent).toContain('a a a a');
-  });
-
-  it('editing the query resets the active match to the first', () => {
-    const { container, ta } = mounted('a a a');
-    key(ta, 'f', { metaKey: true });
-    const input = findInput(container);
-    type(input, 'a');
-    key(input, 'Enter'); key(input, 'Enter'); // → 3/3
-    expect(count(container)).toBe('3/3');
-    type(input, 'a'); // re-typing the query re-searches from the top
-    expect(count(container)).toBe('1/3');
-  });
-});
-
-describe('bracket matching + auto-close (#24)', () => {
-  function mounted(sql = '') {
-    const app = makeApp();
-    app.activeTab().sql = sql;
-    const container = document.createElement('div');
-    mountEditor(app, container);
-    const ta = app.dom.editorTextarea;
-    ta.value = sql;
-    return { app, container, ta };
-  }
-  const press = (ta, k, opts = {}) => {
-    const e = new KeyboardEvent('keydown', { key: k, cancelable: true, ...opts });
-    ta.dispatchEvent(e);
-    return e;
-  };
-
-  it('auto-closes an opener and places the caret inside', () => {
-    const { ta } = mounted('');
-    ta.selectionStart = ta.selectionEnd = 0;
-    const e = press(ta, '(');
-    expect(e.defaultPrevented).toBe(true);
-    expect(ta.value).toBe('()');
-    expect(ta.selectionStart).toBe(1);
-  });
-  it('wraps a selection with the opener', () => {
-    const { ta } = mounted('abc');
-    ta.selectionStart = 0; ta.selectionEnd = 3;
-    press(ta, '[');
-    expect(ta.value).toBe('[abc]');
-    expect(ta.selectionStart).toBe(1);
-    expect(ta.selectionEnd).toBe(4);
-  });
-  it('auto-closes a quote, then types over the closer', () => {
-    const { ta } = mounted('');
-    ta.selectionStart = ta.selectionEnd = 0;
-    press(ta, "'");
-    expect(ta.value).toBe("''");
-    expect(ta.selectionStart).toBe(1);
-    press(ta, "'"); // step over
-    expect(ta.value).toBe("''");
-    expect(ta.selectionStart).toBe(2);
-  });
-  it('types over an existing closing bracket', () => {
-    const { ta } = mounted('()');
-    ta.selectionStart = ta.selectionEnd = 1;
-    press(ta, ')');
-    expect(ta.value).toBe('()');
-    expect(ta.selectionStart).toBe(2);
-  });
-  it('Backspace inside an empty pair deletes both halves', () => {
-    const { ta } = mounted('()');
-    ta.selectionStart = ta.selectionEnd = 1;
-    press(ta, 'Backspace');
-    expect(ta.value).toBe('');
-  });
-  it('does not auto-close a bracket typed inside a string literal (#2 review)', () => {
-    const { ta } = mounted("''");
-    ta.selectionStart = ta.selectionEnd = 1; // caret inside the string
-    const e = press(ta, '(');
-    expect(e.defaultPrevented).toBe(false); // not handled as a bracket → the '(' types literally
-    expect(ta.value).toBe("''");            // no stray ')' inserted
-  });
-  it('matches the real bracket pair, not one inside a string (#2 review)', () => {
-    const { app, ta } = mounted("'(' (a)");
-    ta.selectionStart = ta.selectionEnd = 4; // caret on the real '(' (index 4); the string's is masked
-    ta.dispatchEvent(new MouseEvent('click')); // repaint at the caret (not gated, keeps the caret)
-    expect(app.dom.editorMarkPre.querySelectorAll('.mark-bracket').length).toBe(2);
-  });
-  it('a non-bracket key falls through — Tab still inserts two spaces', () => {
-    const { ta } = mounted('ab');
-    ta.selectionStart = ta.selectionEnd = 1;
-    const e = press(ta, 'Tab');
-    expect(e.defaultPrevented).toBe(true);
-    expect(ta.value).toBe('a  b');
-  });
-  it('highlights the bracket pair adjacent to the caret on caret moves', () => {
-    const { app, ta } = mounted('(a)');
-    ta.selectionStart = ta.selectionEnd = 0; // caret before '('
-    ta.dispatchEvent(new Event('keyup'));
-    expect(app.dom.editorMarkPre.querySelectorAll('.mark-bracket').length).toBe(2);
-    ta.selectionStart = ta.selectionEnd = 1; // between '(' and a → not adjacent in match sense
-    ta.dispatchEvent(new MouseEvent('click'));
-    // caret after 'a' is not on a bracket boundary; no pair highlight
-    expect(app.dom.editorMarkPre.querySelectorAll('.mark-bracket').length).toBe(0);
-  });
-  it('suppresses bracket marks while the search panel is open', () => {
-    const { app, ta } = mounted('(a)');
-    press(ta, 'f', { metaKey: true }); // open search
-    ta.selectionStart = ta.selectionEnd = 0;
-    app.dom.editorSync(); // repaint overlay
-    expect(app.dom.editorMarkPre.querySelectorAll('.mark-bracket').length).toBe(0);
-  });
-  it('a ⌘ chord is not bracket input (lets the shortcut through)', () => {
-    const { ta } = mounted('');
-    ta.selectionStart = ta.selectionEnd = 0;
-    const e = press(ta, '[', { metaKey: true });
-    expect(e.defaultPrevented).toBe(false);
-    expect(ta.value).toBe('');
-  });
-  it('a plain Ctrl chord is not bracket input (no AltGraph)', () => {
-    const { ta } = mounted('');
-    ta.selectionStart = ta.selectionEnd = 0;
-    const e = new KeyboardEvent('keydown', { key: '[', ctrlKey: true, cancelable: true });
-    Object.defineProperty(e, 'getModifierState', { value: undefined }); // env without the API
-    ta.dispatchEvent(e);
-    expect(ta.value).toBe('');
-  });
-  it('an AltGr-typed bracket still auto-closes (real input, not a chord)', () => {
-    const { ta } = mounted('');
-    ta.selectionStart = ta.selectionEnd = 0;
-    const e = new KeyboardEvent('keydown', { key: '(', ctrlKey: true, altKey: true, cancelable: true });
-    e.getModifierState = (k) => k === 'AltGraph';
-    ta.dispatchEvent(e);
-    expect(ta.value).toBe('()');
-  });
-  it('an IME composition keydown does not auto-close', () => {
-    const { ta } = mounted('');
-    ta.selectionStart = ta.selectionEnd = 0;
-    const e = new KeyboardEvent('keydown', { key: '(', cancelable: true });
-    Object.defineProperty(e, 'isComposing', { value: true });
-    ta.dispatchEvent(e);
-    expect(ta.value).toBe('');
-    expect(e.defaultPrevented).toBe(false);
-  });
-});
-
-describe('autocomplete dropdown (#26)', () => {
-  const CANDIDATES = [
-    { label: 'SELECT', kind: 'keyword', insert: 'SELECT', detail: 'keyword' },
-    { label: 'count', kind: 'agg', insert: 'count()', caretBack: 1, detail: 'count([x])', ret: 'UInt64', doc: 'Counts rows.' },
-    { label: 'concat', kind: 'fn', insert: 'concat()', caretBack: 1, detail: 'concat(s, …)', ret: 'String' }, // sig, no doc
-    { label: 'cobalt', kind: 'mystery', insert: 'cobalt', detail: '?' }, // unknown kind → glyph fallback
-    { label: 'ontime', kind: 'table', insert: 'ontime', detail: 'table', parent: 'airline' },
-    { label: 'Year', kind: 'column', insert: 'Year', detail: 'UInt16', parent: 'ontime' },
-    { label: 'Month', kind: 'column', insert: 'Month', detail: 'UInt8', parent: 'ontime' },
-  ];
-  function mounted(sql = '', completions = CANDIDATES) {
-    const app = makeApp();
-    app.completions = completions;
-    app.activeTab().sql = sql;
-    const container = document.createElement('div');
-    mountEditor(app, container);
-    const ta = app.dom.editorTextarea;
-    ta.value = sql;
-    return { app, container, ta };
-  }
-  const dropdown = (c) => c.querySelector('.ac-dropdown');
-  const rows = (c) => [...c.querySelectorAll('.ac-row')];
-  const labels = (c) => rows(c).map((r) => r.querySelector('.ac-label').textContent);
-  const typeAt = (ta, value, pos) => {
-    ta.value = value; ta.selectionStart = ta.selectionEnd = pos;
-    ta.dispatchEvent(new Event('input'));
-  };
-  const press = (ta, k, opts = {}) => {
-    const e = new KeyboardEvent('keydown', { key: k, cancelable: true, ...opts });
-    ta.dispatchEvent(e);
-    return e;
-  };
-
-  it('shows ranked candidates after typing ≥1 word char', () => {
-    const { container, ta } = mounted();
-    typeAt(ta, 'co', 2);
-    expect(dropdown(container)).not.toBeNull();
-    expect(labels(container)).toEqual(expect.arrayContaining(['concat', 'count', 'cobalt']));
-    expect(labels(container)).not.toContain('Year'); // no 'co'
-  });
-  it('does not trigger on an empty word', () => {
-    const { container, ta } = mounted();
-    typeAt(ta, 'select ', 7); // caret after the space → empty word
-    expect(dropdown(container)).toBeNull();
-  });
-  it('does not complete over a non-empty selection', () => {
-    const { container, ta } = mounted();
-    ta.value = 'count'; ta.selectionStart = 0; ta.selectionEnd = 5;
-    ta.dispatchEvent(new Event('input'));
-    expect(dropdown(container)).toBeNull();
-  });
-  it('a qualified word (table.) lists only that table\'s columns', () => {
-    const { container, ta } = mounted();
-    typeAt(ta, 'ontime.', 7);
-    expect(labels(container).sort()).toEqual(['Month', 'Year']);
-  });
-  it('arrows move the active row (wrapping); Enter accepts a function as name() with the caret inside', () => {
-    const { app, container, ta } = mounted();
-    expect(app.dom.editorComplete.isOpen()).toBe(false);
-    typeAt(ta, 'co', 2);
-    expect(app.dom.editorComplete.isOpen()).toBe(true);
-    expect(rows(container)[0].classList.contains('on')).toBe(true);
-    press(ta, 'ArrowUp'); // wrap to last
-    expect(rows(container)[rows(container).length - 1].classList.contains('on')).toBe(true);
-    press(ta, 'ArrowDown'); // wrap back to first
-    expect(rows(container)[0].classList.contains('on')).toBe(true);
-    const accepted = labels(container)[0];
-    press(ta, 'Enter');
-    expect(app.dom.editorComplete.isOpen()).toBe(false);
-    expect(dropdown(container)).toBeNull();
-    expect(ta.value).toContain(accepted + '()');        // function → matched name()
-    expect(ta.value[ta.selectionStart - 1]).toBe('(');  // caret left between the parens
-    expect(ta.value[ta.selectionStart]).toBe(')');
-  });
-  it('Tab accepts a column as-is; Escape dismisses', () => {
-    const { container, ta } = mounted();
-    typeAt(ta, 'Yea', 3);
-    press(ta, 'Escape');
-    expect(dropdown(container)).toBeNull();
-    typeAt(ta, 'Yea', 3);
-    press(ta, 'Tab');
-    expect(ta.value).toBe('Year');
-  });
-  it('a non-nav key while open falls through and leaves the dropdown up', () => {
-    const { container, ta } = mounted();
-    typeAt(ta, 'co', 2);
-    press(ta, 'x'); // not consumed by the dropdown
-    expect(dropdown(container)).not.toBeNull();
-  });
-  it('clicking (mousedown) a row accepts it', () => {
-    const { container, ta } = mounted();
-    typeAt(ta, 'ont', 3);
-    rows(container).find((r) => r.querySelector('.ac-label').textContent === 'ontime')
-      .dispatchEvent(new MouseEvent('mousedown', { cancelable: true }));
-    expect(ta.value).toBe('ontime');
-    expect(dropdown(container)).toBeNull();
-  });
-  describe('footer description (#27 — lazy + cached; not the params)', () => {
-    beforeEach(() => vi.useFakeTimers());
-    afterEach(() => vi.useRealTimers());
-    const flush = async () => { await Promise.resolve(); await Promise.resolve(); };
-    const acDoc = (c) => c.querySelector('.ac-doc');
-
-    it('shows a function description (lazy + debounced) and never repeats the params', async () => {
-      const { app, container, ta } = mounted();
-      app.entityDoc = vi.fn(async (n) => (n === 'count' ? 'Counts rows.' : ''));
-      typeAt(ta, 'cou', 3); // 'count' is the active match
-      expect(container.querySelector('.ac-sig')).toBeNull(); // params no longer duplicated below
-      expect(acDoc(container)).toBeNull();                   // debounced — not fetched yet
-      vi.advanceTimersByTime(200);
-      await flush();
-      expect(app.entityDoc).toHaveBeenCalledWith('count');
-      expect(acDoc(container).textContent).toBe('Counts rows.');
-    });
-    it('shows a keyword doc from the static map (no fetch)', () => {
-      const { app, container, ta } = mounted();
-      app.refData = { keywordDocs: { SELECT: 'Selects rows.' } };
-      typeAt(ta, 'SEL', 3);
-      expect(acDoc(container).textContent).toBe('Selects rows.');
-      expect(app.entityDoc).not.toHaveBeenCalled();
-    });
-    it('hides the footer for a function whose description is empty', async () => {
-      const { app, container, ta } = mounted();
-      app.entityDoc = vi.fn(async () => '');
-      typeAt(ta, 'conc', 4); // 'concat' → fn, empty doc
-      vi.advanceTimersByTime(200);
-      await flush();
-      expect(acDoc(container)).toBeNull();
-      expect(container.querySelector('.ac-footer').style.display).toBe('none');
-    });
-    it('hides the footer for entries with no description source (table/column)', () => {
-      const { container, ta } = mounted();
-      typeAt(ta, 'ont', 3); // 'ontime' → table
-      expect(container.querySelector('.ac-footer').style.display).toBe('none');
-    });
-    it('ignores a doc fetch that resolves after the dropdown closed', async () => {
-      const { app, container, ta } = mounted();
-      app.entityDoc = vi.fn(async () => 'late doc');
-      typeAt(ta, 'cou', 3);
-      vi.advanceTimersByTime(200); // fetch now in flight
-      press(ta, 'Escape');         // close before it resolves
-      await flush();
-      expect(dropdown(container)).toBeNull(); // no crash, nothing resurrected
-    });
-  });
-  it('no matching candidates → no dropdown', () => {
-    const { container, ta } = mounted();
-    typeAt(ta, 'zzz', 3);
-    expect(dropdown(container)).toBeNull();
-  });
-  it('is suppressed while the search panel is open', () => {
-    const { container, ta } = mounted();
-    press(ta, 'f', { metaKey: true }); // open search
-    typeAt(ta, 'co', 2);
-    expect(dropdown(container)).toBeNull();
-  });
-  it('scroll dismisses; blur is wired', () => {
-    const { container, ta } = mounted();
-    typeAt(ta, 'co', 2);
-    ta.dispatchEvent(new Event('blur')); // covers the deferred-hide listener
-    ta.dispatchEvent(new Event('scroll'));
-    expect(dropdown(container)).toBeNull();
-  });
-  it('a tab switch (editorSync) dismisses an open dropdown (#7 review)', () => {
-    const { app, container, ta } = mounted();
-    typeAt(ta, 'co', 2);
-    expect(dropdown(container)).not.toBeNull();
-    app.dom.editorSync(); // switching tabs reassigns ta.value
-    expect(dropdown(container)).toBeNull();
-  });
-  it('tolerates an unset app.completions (defaults to empty, no crash)', () => {
-    const app = makeApp(); // no app.completions
-    const container = document.createElement('div');
-    mountEditor(app, container);
-    const ta = app.dom.editorTextarea;
-    expect(() => typeAt(ta, 'co', 2)).not.toThrow();
-    expect(container.querySelector('.ac-dropdown')).toBeNull();
-  });
-  it('a modified Enter (⌘↵) dismisses without accepting, so it bubbles to Run', () => {
-    const { container, ta } = mounted();
-    typeAt(ta, 'co', 2);
-    const e = press(ta, 'Enter', { metaKey: true });
-    expect(ta.value).toBe('co');            // no token spliced in
-    expect(dropdown(container)).toBeNull(); // dismissed
-    expect(e.defaultPrevented).toBe(false); // not consumed → global Run shortcut fires
-  });
-  it('a caret-moving key (ArrowLeft) dismisses the dropdown', () => {
-    const { container, ta } = mounted();
-    typeAt(ta, 'co', 2);
-    press(ta, 'ArrowLeft');
-    expect(dropdown(container)).toBeNull();
-  });
-  it('clicking in the editor dismisses the dropdown', () => {
-    const { container, ta } = mounted();
-    typeAt(ta, 'co', 2);
-    ta.dispatchEvent(new MouseEvent('click'));
-    expect(dropdown(container)).toBeNull();
-  });
-  it('anchors the popover in CSS px, bridging html{zoom} via the rect/offsetWidth scale', () => {
-    const { container, ta } = mounted();
-    ta.getBoundingClientRect = () => ({ left: 120, top: 60, width: 120, height: 24, right: 240, bottom: 84 });
-    Object.defineProperty(ta, 'offsetWidth', { value: 100, configurable: true });
-    typeAt(ta, 'co', 2);
-    // scale = 120/100 = 1.2; x = 14 + 2*7.8 = 29.6; left = round(120/1.2 + 29.6) = 130
-    expect(dropdown(container).style.left).toBe('130px');
-  });
-});
-
-describe('signature help + hover docs (#27)', () => {
-  const REF = {
-    functions: {
-      sum: { kind: 'agg', sig: 'sum(x)', ret: 'numeric', desc: 'Sum of values.' },
-      substring: { kind: 'fn', sig: 'substring(s, off, len)', ret: 'String', desc: 'A substring.' },
-      now: { kind: 'fn', sig: 'now()', ret: 'DateTime', desc: '' }, // signature, no description
-      CAST: { kind: 'cast', sig: 'CAST(x, T)', ret: '', desc: '' }, // canonically uppercase
-      lpad: { kind: 'fn', sig: 'lpad(s, len[, pad])', ret: 'String', desc: '' }, // optional/bracketed param
-    },
-    keywordDocs: { PREWHERE: 'Filter applied before reading other columns.' },
-    keywordSet: new Set(['PREWHERE']),
-    funcSet: new Set(['sum', 'substring']),
-  };
-  // Hover descriptions are fetched lazily per entity (#27); stub the loader.
-  const DOCS = { sum: 'Sum of values.', substring: 'A substring.' };
-  function mounted(sql = '') {
-    const app = makeApp();
-    app.refData = REF;
-    app.entityDoc = vi.fn(async (name) => DOCS[name] || '');
-    app.completions = []; // no candidates → no dropdown to suppress signature help
-    app.activeTab().sql = sql;
-    const container = document.createElement('div');
-    mountEditor(app, container);
-    const ta = app.dom.editorTextarea;
-    ta.value = sql;
-    return { app, container, ta };
-  }
-  // Flush the microtasks the lazy doc fetch resolves on (fake timers don't fake promises).
-  const flush = async () => { await Promise.resolve(); await Promise.resolve(); };
-  const sig = (c) => c.querySelector('.sig-help');
-  const card = (c) => c.querySelector('.hover-card');
-  const caretMove = (ta, pos) => { ta.selectionStart = ta.selectionEnd = pos; ta.dispatchEvent(new Event('keyup')); };
-
-  it('shows signature help with the active argument bolded inside a call', () => {
-    const { container, ta } = mounted('substring(a, b');
-    caretMove(ta, 'substring(a, '.length); // caret on the 2nd argument
-    const el = sig(container);
-    expect(el).not.toBeNull();
-    expect(el.querySelector('.sig-name').textContent).toBe('substring');
-    expect(el.querySelector('.sig-arg.on').textContent).toBe('off'); // arg index 1
-    expect(el.textContent).toContain('→ String');
-  });
-  it('dismisses signature help when the caret leaves the call', () => {
-    const { container, ta } = mounted('sum(a)');
-    caretMove(ta, 4);
-    expect(sig(container)).not.toBeNull();
-    caretMove(ta, 6); // after the ')'
-    expect(sig(container)).toBeNull();
-  });
-  it('is suppressed while the autocomplete dropdown is open', () => {
-    const { app, container, ta } = mounted();
-    app.completions = [{ label: 'avg', kind: 'agg', insert: 'avg(', detail: 'avg(x)' }];
-    ta.value = 'sum(a'; ta.selectionStart = ta.selectionEnd = 5;
-    ta.dispatchEvent(new Event('input'));
-    expect(container.querySelector('.ac-dropdown')).not.toBeNull();
-    expect(sig(container)).toBeNull();
-  });
-  it('Esc dismisses the signature popover (and is consumed)', () => {
-    const { container, ta } = mounted('sum(a');
-    caretMove(ta, 5);
-    expect(sig(container)).not.toBeNull();
-    const e = new KeyboardEvent('keydown', { key: 'Escape', cancelable: true });
-    ta.dispatchEvent(e);
-    expect(sig(container)).toBeNull();
-    expect(e.defaultPrevented).toBe(true);
-  });
-  it('resolves the function case-insensitively — UPPER and lower (#3 review)', () => {
-    const a = mounted('SUM(x'); // typed upper; canonical key is lowercase 'sum'
-    caretMove(a.ta, 4);
-    expect(sig(a.container)).not.toBeNull();
-    expect(sig(a.container).querySelector('.sig-name').textContent).toBe('SUM');
-    const b = mounted('cast(x'); // typed lower; canonical key is uppercase 'CAST'
-    caretMove(b.ta, 5);
-    expect(sig(b.container)).not.toBeNull();
-    expect(sig(b.container).textContent).toContain('x, T'); // CAST(x, T) metadata resolved via toUpperCase
-  });
-  it('ignores a comma inside a string literal when counting arguments (#2 review)', () => {
-    const v = "substring('a, b', "; // the real 2nd-arg comma is the one after the string
-    const { container, ta } = mounted(v);
-    caretMove(ta, v.length);
-    const el = sig(container);
-    expect(el).not.toBeNull();
-    expect(el.querySelector('.sig-arg.on').textContent).toBe('off'); // arg index 1, not miscounted by the string's comma
-  });
-  it('splits bracketed/optional params cleanly so the active arg aligns (#2 review)', () => {
-    const v = 'lpad(a, b, '; // sig is lpad(s, len[, pad]) — caret on the 3rd arg
-    const { container, ta } = mounted(v);
-    caretMove(ta, v.length);
-    const el = sig(container);
-    expect(el).not.toBeNull();
-    const argTexts = [...el.querySelectorAll('.sig-arg')].map((a) => a.textContent);
-    expect(argTexts).toEqual(['s', 'len', 'pad']); // not ['s','len[',' pad]'] — brackets stripped
-    expect(el.querySelector('.sig-arg.on').textContent).toBe('pad'); // arg index 2 aligns
-  });
-
-  describe('hover docs', () => {
-    beforeEach(() => vi.useFakeTimers());
-    afterEach(() => vi.useRealTimers());
-    const move = (ta, clientX, clientY = 14) => ta.dispatchEvent(new MouseEvent('mousemove', { clientX, clientY }));
-
-    it('shows the signature immediately and fills in the lazily-fetched description', async () => {
-      const { app, container, ta } = mounted('sum(x)');
-      // equal rect/offsetWidth → scale 1 via the real ratio (not the fallback)
-      ta.getBoundingClientRect = () => ({ left: 0, top: 0, width: 100, right: 100, bottom: 24, height: 24 });
-      Object.defineProperty(ta, 'offsetWidth', { value: 100, configurable: true });
-      move(ta, 22); // → col 1 → the 'sum' token
-      vi.advanceTimersByTime(360);
-      expect(card(container).textContent).toContain('sum(x)'); // signature shown synchronously
-      expect(card(container).querySelector('.hover-doc')).toBeNull(); // doc not fetched yet
-      await flush();
-      expect(app.entityDoc).toHaveBeenCalledWith('sum');
-      expect(card(container).textContent).toContain('Sum of values.'); // lazy doc filled in
-    });
-    it('ignores a late doc fetch once the pointer has left the token', async () => {
-      const { container, ta } = mounted('sum(x)');
-      ta.getBoundingClientRect = () => ({ left: 0, top: 0, width: 100, right: 100, bottom: 24, height: 24 });
-      Object.defineProperty(ta, 'offsetWidth', { value: 100, configurable: true });
-      move(ta, 22);
-      vi.advanceTimersByTime(360); // sig shown, doc fetch in flight
-      ta.dispatchEvent(new MouseEvent('mouseleave')); // hover dismissed
-      await flush(); // the doc resolves but must not resurrect the card
-      expect(card(container)).toBeNull();
-    });
-    it('shows no card when hovering a function word inside a string literal (#1 review)', async () => {
-      const { container, ta } = mounted("x = 'sum'"); // 'sum' is inside the string
-      ta.getBoundingClientRect = () => ({ left: 0, top: 0, width: 100, right: 100, bottom: 24, height: 24 });
-      Object.defineProperty(ta, 'offsetWidth', { value: 100, configurable: true });
-      move(ta, 14 + 6 * 7.8); // col 6 → the 'u' of 'sum', inside the string
-      vi.advanceTimersByTime(360);
-      await flush();
-      expect(card(container)).toBeNull(); // masked text → wordAt returns null → no phantom card
-    });
-    it('hovering a keyword shows its built-in doc', () => {
-      const { container, ta } = mounted('PREWHERE x');
-      move(ta, 14 + 2 * 7.8); // → col 2 → 'PREWHERE'
-      vi.advanceTimersByTime(360);
-      expect(card(container).textContent).toContain('Filter applied before reading');
-    });
-    it('no card over an unknown word, or above the text; mouseleave clears it', () => {
-      const { container, ta } = mounted('sum(zzz)');
-      move(ta, 14 + 5 * 7.8); // → 'zzz' (unknown)
-      vi.advanceTimersByTime(360);
-      expect(card(container)).toBeNull();
-      move(ta, 22, -100); // above the text → offset null
-      vi.advanceTimersByTime(360);
-      expect(card(container)).toBeNull();
-      move(ta, 22); // 'sum' → shows
-      vi.advanceTimersByTime(360);
-      expect(card(container)).not.toBeNull();
-      ta.dispatchEvent(new MouseEvent('mouseleave'));
-      expect(card(container)).toBeNull();
-    });
-    it('hover is suppressed while find is open, and the scroll handler hides popovers', () => {
-      const { container, ta } = mounted('sum(x)');
-      ta.dispatchEvent(new KeyboardEvent('keydown', { key: 'f', metaKey: true, cancelable: true })); // open find
-      move(ta, 22);
-      vi.advanceTimersByTime(360);
-      expect(card(container)).toBeNull(); // suppressed while find open
-    });
-    it('a function whose lazy doc is empty shows just its signature (no stray text)', async () => {
-      const { container, ta } = mounted('now()');
-      move(ta, 14 + 1 * 7.8); // → 'now'
-      vi.advanceTimersByTime(360);
-      await flush(); // entityDoc('now') → '' → no doc div added, no literal "null"
-      const el = card(container);
-      expect(el.textContent).toBe('now() → DateTime'); // signature only, nothing appended
-      expect(el.textContent).not.toContain('null'); // the #2 regression: a null child was rendered as "null"
-      expect(el.querySelector('.hover-doc')).toBeNull();
-    });
-    it('tolerates hovering before reference data has loaded (no refData)', () => {
-      const app = makeApp(); // no app.refData → getFunctions/getKeywordDocs default to {}
-      const container = document.createElement('div');
-      mountEditor(app, container);
-      const ta = app.dom.editorTextarea;
-      ta.value = 'sum(x)';
-      ta.dispatchEvent(new MouseEvent('mousemove', { clientX: 22, clientY: 14 }));
-      vi.advanceTimersByTime(360);
-      expect(container.querySelector('.hover-card')).toBeNull();
-    });
-  });
-});
-
-describe('editorRevealCaret (jump to a format-error position)', () => {
-  it('sets the caret to the offset, clamps out-of-range, and scrolls the line into view', () => {
-    const app = makeApp();
-    mountEditor(app, document.createElement('div'));
-    const ta = app.dom.editorTextarea;
-    ta.value = 'line0\nline1\nline2\nline3';
-    // a caret below the viewport scrolls down to reveal it
-    ta.scrollTop = 0;
-    app.dom.editorRevealCaret(20); // on the last line
-    expect(ta.selectionStart).toBe(20);
-    expect(ta.selectionEnd).toBe(20);
-    expect(ta.scrollTop).toBeGreaterThan(0);
-    // a caret above the viewport scrolls back up
-    ta.scrollTop = 1000;
-    app.dom.editorRevealCaret(0);
-    expect(ta.selectionStart).toBe(0);
-    expect(ta.scrollTop).toBe(0);
-    // an out-of-range offset clamps to the end
-    app.dom.editorRevealCaret(99999);
-    expect(ta.selectionStart).toBe(ta.value.length);
-  });
-});
diff --git a/tests/unit/shortcuts.test.js b/tests/unit/shortcuts.test.js
index cccdbc88..92c78e8c 100644
--- a/tests/unit/shortcuts.test.js
+++ b/tests/unit/shortcuts.test.js
@@ -73,6 +73,15 @@ describe('handleKeydown', () => {
     expect(handleKeydown(ev({ metaKey: true, key: 'Enter' }), app)).toBe('run');
     expect(app.actions.run).toHaveBeenCalled();
   });
+  it('a key the editor already consumed (defaultPrevented) never triggers a global action', () => {
+    const app = makeApp();
+    app.state.running.value = true;
+    // e.g. Esc that just closed the CM6 completion popup / search panel (#21)
+    expect(handleKeydown(ev({ key: 'Escape', defaultPrevented: true }), app)).toBeNull();
+    expect(app.actions.cancel).not.toHaveBeenCalled();
+    expect(handleKeydown(ev({ metaKey: true, key: 'Enter', defaultPrevented: true }), app)).toBeNull();
+    expect(app.actions.run).not.toHaveBeenCalled();
+  });
   it('Escape cancels a running query, and is a no-op otherwise', () => {
     const app = makeApp();
     app.state.running.value = false;
diff --git a/tests/unit/sql-highlight.test.js b/tests/unit/sql-highlight.test.js
index f45e45e7..658c5e33 100644
--- a/tests/unit/sql-highlight.test.js
+++ b/tests/unit/sql-highlight.test.js
@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { tokenize, maskLiterals, SQL_KEYWORDS, SQL_FUNCS } from '../../src/core/sql-highlight.js';
+import { tokenize, SQL_KEYWORDS, SQL_FUNCS } from '../../src/core/sql-highlight.js';
 
 const types = (sql) => tokenize(sql).map((t) => t[0]);
 const text = (sql) => tokenize(sql).map((t) => t[1]).join('');
@@ -65,21 +65,3 @@ describe('keyword/func sets', () => {
     expect(SQL_FUNCS.has('count')).toBe(true);
   });
 });
-
-describe('maskLiterals (#2 review)', () => {
-  const NUL = '\0';
-  it('replaces string, comment, and backtick-ident chars with NUL, keeping code + length', () => {
-    const src = "a('(', b) -- )\n`c,d` /* x */";
-    const out = maskLiterals(src);
-    expect(out.length).toBe(src.length);          // offsets preserved
-    expect(out.slice(0, 2)).toBe('a(');           // code untouched
-    expect(out.slice(2, 5)).toBe(NUL.repeat(3));  // the string '(' → NUL (its bracket won't pair)
-    expect(out[5]).toBe(',');                     // the comma OUTSIDE the string stays code
-    expect(out.includes('c,d')).toBe(false);      // the comma inside the backtick ident is masked
-    expect(out.includes('--')).toBe(false);       // line comment masked
-    expect(out.includes('/*')).toBe(false);       // block comment masked
-  });
-  it('leaves a string of pure code unchanged', () => {
-    expect(maskLiterals('count(x, y)')).toBe('count(x, y)');
-  });
-});