fix(widget-editor): SQL placeholder swap + stable preview Run button

[alfredo1996]

Summary

Fixes two widget-editor query bugs reported during manual use:

1. SQL placeholder stuck on Cypher — switching a connection from Neo4j to SQL kept showing the Neo4j (MATCH (n) RETURN …) example query in the editor placeholder. The placeholder was baked into CodeMirror at mount and never updated on language change. Fixed by giving the placeholder its own Compartment + a useEffect([placeholder]) that reconfigures it in place, mirroring the existing language-switch pattern.

2. Preview "Run" button shifts on query error — the error icon was a third child in the justify-between header row, so on error the row re-spread its items and pushed Run inward. Wrapped the error icon + Run button in a single right-aligned group so the header always has exactly two children and Run stays pinned.

Changes

• component/src/components/composed/query-editor.tsx — placeholder compartment + reconfigure effect
• app/src/components/widget-editor/widget-preview-panel.tsx — group error icon with Run button

Testing

• Component unit: query-editor 29/29 (new placeholder-reconfigure regression test)
• App jsdom: widget-preview-panel 11/11 (new "Run stays grouped on error" regression test)
• E2E: code-completion + widgets specs pass (4 auth-warmup flakes passed clean on single-worker re-run)
• Typecheck clean

Notes

A third report ("edit is Cmd+E not Cmd+N") was investigated and is a non-bug — the code already uses Cmd/Ctrl+E everywhere. The only "N" shortcut is Cmd+Shift+N (Add Widget).

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features
  • The query editor now updates its placeholder text when switching editor types, keeping the prompt in sync after changes.
• Bug Fixes
  • Improved the preview panel layout so the error indicator no longer shifts the Run button.
  • Preview actions now stay aligned consistently even when the query fails.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 5921f0a9-22d0-4563-abf8-f9a70311a8d8

📥 Commits

Reviewing files that changed from the base of the PR and between 5588db9 and 7919025.

📒 Files selected for processing (4)

• app/src/components/widget-editor/__tests__/widget-preview-panel.test.tsx
• app/src/components/widget-editor/widget-preview-panel.tsx
• component/src/components/composed/__tests__/query-editor.test.tsx
• component/src/components/composed/query-editor.tsx

---

Walkthrough

This PR contains two unrelated changes: WidgetPreviewPanel's header layout is restructured so the Run button and error tooltip share a flex container, preventing layout shift, with an accompanying test; and QueryEditor's CodeMirror placeholder is moved to a dedicated compartment for in-place reconfiguration after mount, avoiding editor recreation, with a corresponding test.

Changes

Widget Preview Panel Layout

Layer / File(s)	Summary
Group Run button and error icon app/src/components/widget-editor/widget-preview-panel.tsx, app/src/components/widget-editor/__tests__/widget-preview-panel.test.tsx	Error tooltip trigger moved into the same flex container as the Run button, keeping Run's disabled logic unchanged; test verifies both share a parent element when the query errors.

Query Editor Placeholder Reconfiguration

Layer / File(s)	Summary
buildExtensions placeholder compartment param component/src/components/composed/query-editor.tsx	buildExtensions gains a placeholderCompartment parameter and installs the placeholder via compartment.of(...) instead of directly.
Track refs and create compartment on init component/src/components/composed/query-editor.tsx	Adds placeholderRef and placeholderCompartmentRef, syncs the ref on prop change, creates the compartment during initEditor, and passes both into buildExtensions.
In-place reconfiguration on placeholder change component/src/components/composed/query-editor.tsx, component/src/components/composed/__tests__/query-editor.test.tsx	initEditor's dependency array drops placeholder; a new effect reconfigures the placeholder compartment via dynamic import when the prop changes; test asserts the dispatched reconfiguration effect.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Possibly related PRs

• alfredo1996/neoboard#63: Builds on the same query-editor.tsx CodeMirror extensions/placeholder setup that this PR refactors into a compartment-based approach.
• alfredo1996/neoboard#584: Both modify the Run/error control rendering in widget-preview-panel.tsx.
• alfredo1996/neoboard#1083: Both modify widget-preview-panel.tsx rendering logic gated by waitingForParams.

Suggested labels: priority:P2

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately captures both main widget-editor fixes: SQL placeholder swapping and a stable preview Run button.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/query-editor-sql-placeholder-and-preview-run-shift

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
96.2% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud