ui: make the View Definitions page a live playground — drop Run, drop the JSON fold, reuse the editor's highlighted JSON view

[smunini]

Summary

The View Definitions workspace (/ui/sql/view-definitions) should behave like a live playground: edit the ViewDefinition JSON and the results table updates on its own. Today it needs an explicit Run click, the JSON sits in a plain <textarea> inside a collapsible fold, and the editor box is a fixed-height control that does not match the Resource Editor's JSON view.

Four changes on that page:

1. Remove the Run button; re-run automatically as the definition changes.
2. Fix the height of the ViewDefinition input box.
3. Remove the collapsible (<details>) wrapper around the JSON.
4. Use the same syntax-highlighting approach as the Edit Resource page.

Current behavior

• Run is a manual, full-page round trip. crates/ui/templates/pages/sql-view-definitions.html:65 renders Run as a plain link to ?vd=<id>&run=1; crates/ui/src/lib.rs:2003 only calls sql_run when run=1 is present. Nothing happens while you type, and the results table disappears again on the next navigation.
• Run only previews the stored definition. The handler runs selected_value, which comes from the fetched resource (crates/ui/src/lib.rs:1968-1997) — not the textarea content. Editing the JSON and clicking Run previews the old definition until you Save first.
• The JSON is a bare textarea in a collapsible fold. crates/ui/templates/pages/sql-view-definitions.html:89-102: <details class="card json-fold" open> wrapping <textarea class="json-editor" rows="18">. No line numbers, no highlighting, no folding.
• The box height is fixed by two competing declarations. rows="18" on the textarea plus .json-editor { min-height: 320px; resize: vertical; } at crates/ui/assets/app.css:2425-2440. Short definitions leave a large empty box; long ones require inner scrolling or a manual drag.

Expected behavior

• No Run button. Editing the ViewDefinition JSON re-runs $sql-run (debounced) and refreshes the Results table in place, against the current editor content — saved or not.
• Invalid JSON or a failed run reports inline (the existing vd-run-failed notice) without clearing the editor or losing what was typed.
• The JSON pane is always visible — no disclosure to expand.
• The JSON pane is line-numbered, syntax-highlighted, and foldable, matching the Edit Resource page.
• The pane's height is sized deliberately for a code view rather than left to rows="18" + min-height: 320px.

Evidence

• crates/ui/templates/pages/sql-view-definitions.html:65 — Run link (?run=1)
• crates/ui/templates/pages/sql-view-definitions.html:89-102 — <details class="card json-fold"> + <textarea class="json-editor" rows="18">
• crates/ui/src/lib.rs:2003-2011 — run=1 gate around state.conformance.sql_run(...)
• crates/ui/assets/app.css:2425-2440 — .json-editor sizing; crates/ui/assets/app.css:2462-2473 — details.json-fold chevron rules (dead once the fold is gone, if nothing else uses it)
• crates/ui/src/conformance.rs:51-58 — sql_run(&self, view_definition: &Value, limit, version, tenant) already takes the definition inline, so running unsaved editor content needs no new backend operation
• crates/ui/e2e/tests/sql-view-definitions.spec.ts:43 — page.locator("a[href*='run=1']").click() asserts the Run link and must be rewritten
• locales/en/main.ftl:795 — vd-run; the i18n test (crates/ui/src/i18n.rs:323) requires every locale catalog to carry the same key set, so removing it means removing it everywhere

Suggested approach

Syntax highlighting — reuse the Resource Editor's machinery rather than adding a client-side highlighter:

• crates/ui/src/json_view.rs renders JSON into JsonLines (line numbers, token kinds, fold ids) server-side.
• crates/ui/templates/partials/json-view.html lays them out; crates/ui/assets/json-view.js folds them.
• crates/ui/templates/partials/editor-body.html:30-55 shows the pattern: the highlighted view is the default, with a raw <textarea class="editor__source"> one toggle away (editor-json__raw / #editor-json-edit) for actual editing.

The View Definitions page needs to edit the JSON, so the same split applies: highlighted view for reading, textarea for typing, re-render on change. Sizing then follows the .editor-json / .json-view panes instead of .json-editor.

Live run — add an htmx fragment endpoint that accepts a posted ViewDefinition body and returns just the Results card, and swap it on a debounced input from the editor (a few hundred ms). sql_run already accepts an inline definition, so the handler is a thin wrapper around the existing call with the same 50-row preview cap. Save stays as it is — the playground previews, it does not persist.

Progressive enhancement: the page currently works with JavaScript disabled by design (see the template's header comment). Decide explicitly whether that guarantee still holds — either keep a no-JS submit path for the results, or note in the template comment that the playground now requires JS.

Scope / out of scope

• In scope: the View Definitions page only (/ui/sql/view-definitions), plus the e2e and i18n fallout listed above.
• Out of scope unless the same treatment is wanted there: crates/ui/templates/pages/sql-library.html:61 uses the identical ?lib=<id>&run=1 link and shares the vd-run / vd-run-failed strings. If vd-run is deleted, that page has to change too — at minimum keep it compiling.

[smunini]

Make these changes also for the SQLView and SQLQuery pages.

[andyguz17]

Rescoped after the #756 design review (2026-09-01), and sequenced as the first View Definitions step, before #843 (guided form beside the JSON editor).

• Items 1–3 stand: no Run button — $sql-run re-runs debounced as the definition changes, against the current editor content (saved or not); no <details> fold; a deliberate editor height instead of rows="18" + min-height.
• Item 4 ("use the same syntax-highlighting approach as Edit Resource") is superseded: Investigate a richer ViewDefinition editing surface (Monaco or similar) to replace the plain textarea #753 / PR feat(sof,ui): ViewDefinition editor seed — CodeMirror 6 with server-side lint (#753) #820 already made CodeMirror 6 the ViewDefinition editor, with FHIRPath highlighting and server-side lint. Keep that editor; do not reintroduce json_view here.
• Invalid JSON / failed run keep reporting inline (vd-run-failed) without touching the editor, keeping the last successful results labelled as such — the same rule the SQL Query / SQL View pages follow in ui: SQL Query & SQL View — editor-first layout with live results #839.
• Depends on feat(ui): remember rail selection and recents server-side (#754, #755) #822 (rail recents / last selection) landing first, since it touches the same template.

Design reference: https://claude.ai/code/artifact/8dbf81a5-9bea-4caf-9768-a94071dc735e (page Approved; the SQL Query artboards show the live-results idiom).