feat(frontend): SQL/CTE viewer with shiki highlighting

TDD: SqlViewer renders collapsible CTE blocks with name/field-count/
test-status badges, shiki-highlighted SQL body (dangerouslySetInnerHTML),
per-field comments, and a vertical/horizontal layout toggle.
highlight.ts wraps shiki as a lazy singleton; tests mock it for
determinism (pattern mirrors mermaid.ts).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/viewers/highlight.ts

@@ -0,0 +1,21 @@
+import type { Highlighter } from "shiki";
+
+let _highlighter: Highlighter | null = null;
+
+async function getHighlighter(): Promise<Highlighter> {
+  if (_highlighter) return _highlighter;
+  const { createHighlighter } = await import("shiki");
+  _highlighter = await createHighlighter({
+    themes: ["github-light", "github-dark"],
+    langs: ["sql"],
+  });
+  return _highlighter;
+}
+
+export async function highlightSql(code: string): Promise<string> {
+  const hl = await getHighlighter();
+  return hl.codeToHtml(code, {
+    lang: "sql",
+    themes: { light: "github-light", dark: "github-dark" },
+  });
+}