feat(frontend): v2 artifact viewers for cte_plan/cte_result/phase

Add CtePlanViewer, CteResultViewer, and PhaseSummaryViewer to render the
structured v2 payloads (schema_version: 2) the harness now emits for
artifact-gate widgets, per contracts.md. Extract PreviewGrid from
ResultsPanel as a reusable AG Grid component shared by CteResultViewer.
ArtifactView dispatches to the new viewers on a schema_version/shape
guard, falling back to the existing legacy renderers unchanged for
older sessions and replay fixtures.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

frontend/src/viewers/ResultsPanel.tsx

@@ -1,11 +1,7 @@
 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]);
+import { PreviewGrid } from "./PreviewGrid";
 
 interface Props {
   sessionId: string;
@@ -26,20 +22,6 @@ export function ResultsPanel({ sessionId }: Props) {
   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 */}
@@ -76,11 +58,7 @@ export function ResultsPanel({ sessionId }: Props) {
       {/* Grid for everything else */}
       {data && !isScalar && (
         <>
-          <div className="overflow-hidden rounded-xl border border-border/70 shadow-xs">
-            <div className="ag-theme-alpine" style={{ height: 400, width: "100%" }}>
-              <AgGridReact columnDefs={columnDefs} rowData={rowData} />
-            </div>
-          </div>
+          <PreviewGrid columns={data.columns} rows={data.rows} />
           {data.truncated && <div>(results truncated)</div>}
         </>
       )}