test(frontend): settle async highlight in SqlViewer test (pristine output) + assert toggle flip

Test (a) now drains pending highlightSql microtasks inside act() via
waitFor before synchronous header assertions, eliminating the React
act() warning. Test (c) asserts the layout toggle label flips
Orizzontale -> Verticale rather than merely existing.

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

frontend/src/viewers/SqlViewer.test.tsx

@@ -24,7 +24,11 @@ const blocks = [
 
 test("(a) renders headers with name, field count, and test-status badge", async () => {
   render(<SqlViewer blocks={blocks} />);
-  // Headers should be visible immediately
+  // Drain the pending highlightSql microtasks inside act() before asserting,
+  // so no React act() warning is emitted (pristine output).
+  await waitFor(() => expect(screen.getAllByTestId("hl")).toHaveLength(2));
+
+  // Headers should be visible
   expect(screen.getByText("base_orders")).toBeInTheDocument();
   expect(screen.getByText("final_query")).toBeInTheDocument();
 
@@ -62,14 +66,21 @@ test("(b) bodies start expanded and clicking header collapses then re-expands",
   });
 });
 
-test("(c) layout toggle switches between vertical and horizontal", async () => {
+test("(c) layout toggle flips its label between Orizzontale and Verticale", async () => {
   render(<SqlViewer blocks={blocks} />);
+  await waitFor(() => expect(screen.getAllByTestId("hl")).toHaveLength(2));
 
-  const toggle = screen.getByRole("button", { name: /orizzontale|verticale/i });
+  // Default layout is vertical, so the toggle offers "Orizzontale".
+  const toggle = screen.getByRole("button", { name: /orizzontale/i });
   expect(toggle).toBeInTheDocument();
+
   await userEvent.click(toggle);
-  // After click the label should flip
+
+  // After switching to horizontal, the toggle now offers "Verticale".
   expect(
-    screen.getByRole("button", { name: /orizzontale|verticale/i })
+    screen.getByRole("button", { name: /verticale/i })
   ).toBeInTheDocument();
+  expect(
+    screen.queryByRole("button", { name: /orizzontale/i })
+  ).not.toBeInTheDocument();
 });