ui: SQL Query & SQL View — editor-first layout with live results

[andyguz17]

Follow-up of #756 (drafts approved in the 2026-09-01 review). Track B — SQL Query / SQL View, step 1 of 5.

Design reference: SQL on FHIR UI Drafts → page Approved, artboards "SQL Query — approved layout", "SQL View — approved layout", "SQL Query — empty", "SQL View — empty". This issue builds the page skeleton and the live results; the Details section (#840), the Parameters card (#841) and the Tables panel (#842) plug into it afterwards — leave their slots in the layout.

Summary

Both pages share crates/ui/templates/pages/sql-library.html and today look like a form dump: title row with Run / Duplicate / Delete / Create New, a short SQL textarea, the whole Library JSON in a <details> fold, a Save row, a results table. Rebuild the page around the SQL: title row → (Details slot) → SQL editor → (Parameters slot, SQL Query only) → (Tables slot) → Results, with the results refreshing as you type and no Run button — the direction #752 sets for View Definitions.

Requirements

1. Title row (.page-head--row): the page's icon, the Library title, a .tag--type chip (SQL Query / SQL View), the status as a .tag--{status} chip; actions Duplicate / Delete / Create New. No rename control — the name is edited in Details (ui: SQL Query & SQL View — Details: JSON editor + guided form over the Library, above the SQL #840).
2. Kind identity. Kind-specific lede on the page head, editor heading (SQL vs View definition (SQL)), results heading (Results vs Preview), empty-state copy that says what a view is. Both come from the existing SqlLibraryKind table, not from template branches on strings.
3. SQL card. The CodeMirror SQL editor from ui: add SQL to the vendored CodeMirror bundle and mount it on the SQL panes #838 in a .card with a .editor-legend__live hint ("Runs as you type — results follow the current SQL, saved or not"); Save in .form-actions.
4. Live run. Editing the SQL re-runs $sql-run (debounced, ~500 ms, hx-post to a fragment endpoint that returns the results card) against the current editor content, saved or not — conformance.sql_run already takes the resource inline. The fragment swaps only the results card; the editor is never re-rendered. Without JavaScript: Save re-renders the page with results for the saved SQL (replaces today's ?run=1 link; remove the vd-run usage here).
5. Results / Preview card. .card.table-card with .card-head__meta N rows · T ms; SQL Query additionally gets an Export as files action (.btn → /ui/sql/export/new?subject=Library/{id}, see the create form issue). Limit stays 50 rows.
6. Failed run. The existing .notice--warn with the server message and, when the message carries a line, the line tinted in the editor; the SQL is left untouched and the last successful results stay, labelled "last successful run".
7. Empty state. Rail says "No queries yet." / "No views yet."; centre card offers Create New.
8. Remove the JSON <details> fold from this template (Details replaces it in ui: SQL Query & SQL View — Details: JSON editor + guided form over the Library, above the SQL #840; until then the raw JSON is reachable through the Resource Editor link in the overflow, or keep a plain link "Edit as JSON").
9. Rail behaviour (Recently used, pagination) comes from PR feat(ui): remember rail selection and recents server-side (#754, #755) #822 — rebase on it; do not re-implement.
10. i18n for every new/changed string (en/es/de); drop keys that become unused.

Acceptance criteria

• Both pages render the approved layout; design-system.spec.ts passes.
• Typing a valid query updates the results card without a full page load; typing an invalid one shows the notice and keeps the previous results.
• With JavaScript disabled, Save shows results for the saved SQL.
• Export as files opens the export form with the query pre-checked.
• Rust router_http tests for the fragment endpoint (success, error, unsaved content); Playwright for the live-run flow on each page; nojs passes.

Pointers

crates/ui/templates/pages/sql-library.html, crates/ui/src/lib.rs (sql_library_page, sql_library_save, SqlLibraryKind), crates/ui/src/conformance.rs::sql_run, crates/ui/src/sql_libraries.rs (extract_sql / embed_sql), #752 for the same direction on View Definitions.

Design reference (screenshots)

Full-page renders of the approved artboards (branch docs/756-design-references, docs/images/sql-ui-drafts/). The canvas linked above is the editable source.

SQL Query — approved layout

SQL View — approved layout

SQL Query — empty

SQL View — empty