feat(frontend): results panel (AGGrid + preview/export)

Add ResultsPanel component with AGGrid v36 for tabular preview results,
bold scalar display for 1×1 results, limit selector (10 / tutti), and
Esporta CSV button delegating export to the backend. MSW-tested with 3
passing scenarios (grid cells, scalar, export endpoint call).

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

frontend/src/viewers/ResultsPanel.test.tsx

@@ -0,0 +1,109 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { http, HttpResponse } from "msw";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { server } from "../test/msw";
+import { ResultsPanel } from "./ResultsPanel";
+
+const BASE = "http://localhost:8787";
+
+function makeClient() {
+  return new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+}
+
+function wrap(ui: React.ReactElement) {
+  return (
+    <QueryClientProvider client={makeClient()}>{ui}</QueryClientProvider>
+  );
+}
+
+// (a) 2-col × 2-row preview → AGGrid renders cell values
+test("(a) renders grid cells for a 2×2 preview result", async () => {
+  server.use(
+    http.post(`${BASE}/sessions/sess-1/sql/preview`, () =>
+      HttpResponse.json({
+        columns: ["name", "age"],
+        rows: [
+          ["Alice", 30],
+          ["Bob", 25],
+        ],
+        execution_ms: 5,
+        truncated: false,
+        limit: 10,
+        offset: 0,
+      })
+    )
+  );
+
+  render(wrap(<ResultsPanel sessionId="sess-1" />));
+
+  // Wait for data to load; check known cell values
+  await screen.findByText("Alice");
+  expect(screen.getByText("Bob")).toBeInTheDocument();
+  expect(screen.getByText("30")).toBeInTheDocument();
+  expect(screen.getByText("25")).toBeInTheDocument();
+
+  // Grid must be present, not bold scalar
+  expect(screen.queryByRole("strong")).not.toBeInTheDocument();
+});
+
+// (b) 1×1 preview → bold scalar shown, no grid
+test("(b) renders bold scalar for a 1×1 result", async () => {
+  server.use(
+    http.post(`${BASE}/sessions/sess-2/sql/preview`, () =>
+      HttpResponse.json({
+        columns: ["count"],
+        rows: [[42]],
+        execution_ms: 2,
+        truncated: false,
+        limit: 10,
+        offset: 0,
+      })
+    )
+  );
+
+  render(wrap(<ResultsPanel sessionId="sess-2" />));
+
+  // Should show the scalar value in bold
+  const bold = await screen.findByRole("strong");
+  expect(bold).toHaveTextContent("42");
+
+  // No grid
+  expect(screen.queryByRole("treegrid")).not.toBeInTheDocument();
+  expect(screen.queryByRole("grid")).not.toBeInTheDocument();
+});
+
+// (c) clicking "Esporta CSV" calls the export endpoint
+test("(c) Esporta CSV button calls the export endpoint", async () => {
+  let exportCalled = false;
+
+  server.use(
+    http.post(`${BASE}/sessions/sess-3/sql/preview`, () =>
+      HttpResponse.json({
+        columns: ["id"],
+        rows: [[1], [2]],
+        execution_ms: 3,
+        truncated: false,
+        limit: 10,
+        offset: 0,
+      })
+    ),
+    http.post(`${BASE}/sessions/sess-3/sql/export`, () => {
+      exportCalled = true;
+      return HttpResponse.json({ path: "/tmp/export.csv" });
+    })
+  );
+
+  const user = userEvent.setup();
+  render(wrap(<ResultsPanel sessionId="sess-3" />));
+
+  // Wait for preview to load (use role to avoid ambiguity with paging panel)
+  await waitFor(() => expect(screen.getAllByRole("gridcell")).not.toHaveLength(0));
+
+  const btn = screen.getByRole("button", { name: /esporta csv/i });
+  await user.click(btn);
+
+  await waitFor(() => expect(exportCalled).toBe(true));
+});

frontend/src/viewers/ResultsPanel.tsx

@@ -0,0 +1,78 @@
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { AgGridReact } from "ag-grid-react";
+import { AllCommunityModule, ModuleRegistry } from "ag-grid-community";
+import { sqlPreview, sqlExport } from "../api/sql";
+
+// Register AG Grid modules once at module load time
+ModuleRegistry.registerModules([AllCommunityModule]);
+
+interface Props {
+  sessionId: string;
+}
+
+export function ResultsPanel({ sessionId }: Props) {
+  const [limit, setLimit] = useState<number>(10);
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["preview", sessionId, limit],
+    queryFn: () => sqlPreview(sessionId, { limit, offset: 0 }),
+  });
+
+  async function handleExport() {
+    await sqlExport(sessionId);
+  }
+
+  const isScalar =
+    data != null && data.columns.length === 1 && data.rows.length === 1;
+
+  const columnDefs = data
+    ? data.columns.map((col) => ({ field: col, headerName: col }))
+    : [];
+
+  const rowData = data
+    ? data.rows.map((row) => {
+        const obj: Record<string, unknown> = {};
+        data.columns.forEach((col, i) => {
+          obj[col] = row[i];
+        });
+        return obj;
+      })
+    : [];
+
+  return (
+    <div>
+      {/* Limit selector */}
+      <div style={{ marginBottom: 8, display: "flex", gap: 8, alignItems: "center" }}>
+        <select
+          value={limit}
+          onChange={(e) =>
+            setLimit(e.target.value === "tutti" ? 1_000_000 : Number(e.target.value))
+          }
+          aria-label="Righe da visualizzare"
+        >
+          <option value={10}>10</option>
+          <option value="tutti">tutti</option>
+        </select>
+
+        <button onClick={handleExport}>Esporta CSV</button>
+      </div>
+
+      {/* Loading / error states */}
+      {isLoading && <div>Caricamento...</div>}
+      {error && <div>Errore: {String(error)}</div>}
+
+      {/* Scalar result: 1 col × 1 row → bold value */}
+      {data && isScalar && (
+        <strong role="strong">{String(data.rows[0][0])}</strong>
+      )}
+
+      {/* Grid for everything else */}
+      {data && !isScalar && (
+        <div className="ag-theme-alpine" style={{ height: 400, width: "100%" }}>
+          <AgGridReact columnDefs={columnDefs} rowData={rowData} />
+        </div>
+      )}
+    </div>
+  );
+}