fix(alerts): pretty-print + highlight raw SQL, stop raw-query chart flash

[Makisuo]

What

On the alert detail Overview (/alerts/$ruleId), two fixes for raw SQL rules:

1. Raw SQL is now pretty-printed and syntax-highlighted. It was an unstyled, right-aligned monospace blob squeezed into a config cell. It now renders as a full-width code block with ClickHouse-aware highlighting that matches the dashboard SQL editor.
2. No more "no chart for raw query" flash. Raw-SQL rules chart from their recorded checks, but the chart briefly showed the "Raw SQL has no live preview" placeholder before the separate listRuleChecks query resolved — a confusing "says no chart, then shows one" moment.

Why

useAlertRuleChart returns chartLoading: false immediately for raw queries (they have no warehouse preview), and the route only passed loading={chartLoading}. So on first paint data=[], checks=[], loading=false → the raw placeholder showed, then checks loaded and the chart replaced it.

How

• apps/web/src/lib/sql-format.ts (new) — formatSql(): a conservative, dependency-free, ClickHouse-aware pretty-printer. Breaks top-level clauses / SELECT columns / WHERE AND/OR onto their own lines while keeping string literals, comments, $__macros, Map['key'] access, and function-call commas (quantile(0.95)(Duration / 1e6)) atomic. Falls back to the original text on any error.
• apps/web/src/lib/sql-format.test.ts (new) — 9 unit tests, including an exact-output assertion for the canonical alert query plus footgun coverage (nested vs top-level AND, map access, macros, string literals, GROUP BY, idempotency, no-throw on odd input).
• apps/web/src/routes/alerts/$ruleId.tsx — render the Raw SQL via tokenizeSql(formatSql(...)) as a full-width highlighted block; gate the hero chart's loading on Result.isInitial(checksResult) for raw_query rules so the placeholder no longer flashes. The genuine "no checks recorded yet" empty state is unchanged.

Before:

SELECT quantile(0.95)(Duration / 1e6) AS value, count() AS samples FROM traces WHERE ServiceName = 'api-v2' AND SpanName = 'ChartService.getChartData' AND SpanAttributes['cache.fluxSeconds'] = '604800' AND $__timeFilter(Timestamp) AND $__orgFilter

After:

SELECT
  quantile(0.95)(Duration / 1e6) AS value,
  count() AS samples
FROM traces
WHERE ServiceName = 'api-v2'
  AND SpanName = 'ChartService.getChartData'
  AND SpanAttributes['cache.fluxSeconds'] = '604800'
  AND $__timeFilter(Timestamp)
  AND $__orgFilter

Verification

• vitest run apps/web/src/lib/sql-format.test.ts → 9/9 pass.
• bun --filter=@maple/web typecheck → clean.
• Live browser pass was blocked by the local dev-server cap (another session held the slots); the formatter's exact output is asserted in tests and the route edits are mechanical.

🤖 Generated with Claude Code

---

[pullfrog]

Your LLM provider API key was rejected. Rotate the key in your provider dashboard, then update the matching GitHub Actions secret.

Update repo secret → · Model settings → · Setup docs → · Ask in Discord →

  ^{｜ ⚠️ this action is pinned to a commit SHA, which freezes the cleanup step — switch to @v0 or keep the SHA fresh with Dependabot ｜ Rerun failed job ➔ ｜ View workflow run ｜ via Pullfrog ｜ Using Claude Opus ｜ 𝕏}

[devin-ai-integration]

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no bugs or issues to report.