chore: chart polish, E2E speedup, and implementation guide

app/e2e/dashboard-portability.spec.ts

@@ -160,7 +160,7 @@
       timeout: 5_000,
     });
     await expect(dialog.getByText("E2E NeoDash Import Test")).toBeVisible();
-    await expect(dialog.getByText("4 widgets")).toBeVisible();
+    await expect(dialog.getByText("6 widgets")).toBeVisible();
 
     // No connection mapping should appear (NeoDash skips it)
     await expect(dialog.getByText("Map each connection")).not.toBeVisible();
@@ -173,9 +173,9 @@
     // Should redirect to the imported dashboard
     await page.waitForURL(/\/[\w-]+$/, { timeout: 15_000 });
 
-    // Verify 4 widget cards rendered (NeoDash report titles are not preserved
-    // as widget titles — the converter maps settings but not report.title)
-    await expect(page.locator("[data-testid='widget-card']")).toHaveCount(4, {
+    // Verify 6 widget cards rendered — includes gantt and graph3d→graph
+    // Report titles are now preserved as widget settings.title
+    await expect(page.locator("[data-testid='widget-card']")).toHaveCount(6, {
       timeout: 15_000,
     });
 
@@ -240,7 +240,7 @@
 
       // Should import without crashing — unknown type falls back to JSON Viewer
       await page.waitForURL(/\/[\w-]+$/, { timeout: 15_000 });
       await expect(page.getByText("JSON Viewer")).toBeVisible({
         timeout: 15_000,
       });
 

app/e2e/fixtures/imports/neodash-sample.json

@@ -52,6 +52,30 @@
           "height": 4,
           "settings": {},
           "parameters": {}
+        },
+        {
+          "id": "r5",
+          "title": "Movie Timeline",
+          "type": "gantt",
+          "query": "MATCH (m:Movie) RETURN m.title AS task, m.released AS start, m.released + 2 AS end LIMIT 5",
+          "x": 0,
+          "y": 8,
+          "width": 12,
+          "height": 4,
+          "settings": {},
+          "parameters": {}
+        },
+        {
+          "id": "r6",
+          "title": "3D Network",
+          "type": "graph3d",
+          "query": "MATCH (p:Person)-[r:ACTED_IN]->(m:Movie) RETURN p, r, m LIMIT 20",
+          "x": 0,
+          "y": 12,
+          "width": 12,
+          "height": 6,
+          "settings": {},
+          "parameters": {}
         }
       ]
     }

app/e2e/global-setup.ts

@@ -4,7 +4,7 @@ import * as path from "node:path";
 import * as crypto from "node:crypto";
 import * as net from "node:net";
 import * as http from "node:http";
-import { spawn } from "node:child_process";
+import { spawn, execSync } from "node:child_process";
 import postgres from "postgres";
 import { drizzle } from "drizzle-orm/postgres-js";
 import { migrate } from "drizzle-orm/postgres-js/migrator";
@@ -249,28 +249,59 @@ export default async function globalSetup() {
   process.env.TEST_NEO4J_BOLT_URL = `bolt://localhost:${neo4jBoltPort}`;
   process.env.TEST_PG_PORT = String(pgPort);
 
-  // ── Start the Next.js server on a dynamically allocated port ────────────
-  // Env vars are passed directly to the process — .env.local is never touched.
+  // ── Build & start the Next.js server on a dynamically allocated port ───
+  // Always use a production build + `next start` for consistent, fast E2E
+  // runs. `next dev` recompiles pages on demand which adds 10+ minutes of
+  // webpack overhead locally. A one-time `next build` (~2 min) then instant
+  // `next start` is what CI already does and is dramatically faster overall.
   const appDir = path.resolve(__dirname, "..");
-  const serverCmd = process.env.CI ? "start" : "dev";
-  console.log(
-    `⏳ Starting Next.js ${serverCmd} server on port ${serverPort}...`,
-  );
-  const args = ["next", serverCmd, "--port", String(serverPort)];
-  // Use webpack explicitly — Turbopack (Next.js 16 default) doesn't correctly
-  // resolve CJS/ESM interop for the @neoboard/connection package at runtime.
-  if (serverCmd === "dev") args.push("--webpack");
+  const serverEnv = {
+    ...process.env,
+    DATABASE_URL: databaseUrl,
+    ENCRYPTION_KEY: TEST_ENCRYPTION_KEY,
+    API_KEY_HMAC_SECRET: TEST_API_KEY_HMAC_SECRET,
+    NEXTAUTH_SECRET: TEST_NEXTAUTH_SECRET,
+    NEXTAUTH_URL: `http://localhost:${serverPort}`,
+  };
+
+  // Build once — skip if a previous build exists and E2E_SKIP_BUILD is set,
+  // OR if .next/BUILD_ID already exists (auto-detect cached build).
+  const buildIdPath = path.join(appDir, ".next", "BUILD_ID");
+  const hasCachedBuild = fs.existsSync(buildIdPath);
+
+  if (process.env.E2E_SKIP_BUILD && !hasCachedBuild) {
+    throw new Error(
+      "E2E_SKIP_BUILD is set but no prior build found at .next/BUILD_ID. " +
+        "Run `npx next build` once or unset E2E_SKIP_BUILD.",
+    );
+  }
+
+  if (process.env.E2E_SKIP_BUILD) {
+    console.log(
+      "⏩ Skipping build (E2E_SKIP_BUILD set, reusing existing .next)",
+    );
+  } else {
+    if (hasCachedBuild) {
+      console.log(
+        "⏳ Rebuilding Next.js (production)... (set E2E_SKIP_BUILD=1 to reuse previous build)",
+      );
+    } else {
+      console.log("⏳ Building Next.js (production)...");
+    }
+    execSync("npx next build", {
+      cwd: appDir,
+      stdio: "inherit",
+      env: serverEnv,
+    });
+    console.log("✅ Next.js build complete");
+  }
+
+  console.log(`⏳ Starting Next.js production server on port ${serverPort}...`);
+  const args = ["next", "start", "--port", String(serverPort)];
   const server = spawn("npx", args, {
     cwd: appDir,
     stdio: "pipe",
-    env: {
-      ...process.env,
-      DATABASE_URL: databaseUrl,
-      ENCRYPTION_KEY: TEST_ENCRYPTION_KEY,
-      API_KEY_HMAC_SECRET: TEST_API_KEY_HMAC_SECRET,
-      NEXTAUTH_SECRET: TEST_NEXTAUTH_SECRET,
-      NEXTAUTH_URL: `http://localhost:${serverPort}`,
-    },
+    env: serverEnv,
     detached: true,
   });
   server.unref();

app/e2e/new-charts.spec.ts

@@ -1,10 +1,16 @@
-import { test, expect, ALICE, createTestDashboard, typeInEditor } from "./fixtures";
+import {
+  test,
+  expect,
+  ALICE,
+  createTestDashboard,
+  typeInEditor,
+} from "./fixtures";
 
 // ---------------------------------------------------------------------------
-// New chart types (v0.8) — creation flow tests
+// New chart types — creation flow tests
 // ---------------------------------------------------------------------------
 // These tests verify the end-to-end creation flow for each new chart type:
-// Gauge, Sankey, Sunburst, Radar, Treemap.
+// Gauge, Sankey, Sunburst, Radar, Treemap, Gantt.
 //
 // We focus on the creation flow (dialog → query → add widget) rather than
 // visual rendering details — chart rendering is verified by unit tests.
@@ -50,7 +56,9 @@ test.describe("New chart types — creation flow", () => {
     );
 
     // The Add Widget button should be enabled (no Run required for this flow)
-    await expect(dialog.getByRole("button", { name: "Add Widget" })).toBeEnabled({
+    await expect(
+      dialog.getByRole("button", { name: "Add Widget" }),
+    ).toBeEnabled({
       timeout: 10_000,
     });
     await dialog.getByRole("button", { name: "Add Widget" }).click();
@@ -78,7 +86,9 @@ test.describe("New chart types — creation flow", () => {
       "MATCH (p:Person)-[:ACTED_IN]->(m:Movie) WITH m, count(p) AS cast RETURN m.title AS name, cast AS value ORDER BY cast DESC LIMIT 10",
     );
 
-    await expect(dialog.getByRole("button", { name: "Add Widget" })).toBeEnabled({
+    await expect(
+      dialog.getByRole("button", { name: "Add Widget" }),
+    ).toBeEnabled({
       timeout: 10_000,
     });
     await dialog.getByRole("button", { name: "Add Widget" }).click();
@@ -106,7 +116,9 @@ test.describe("New chart types — creation flow", () => {
       "MATCH (p:Person)-[r]->(m:Movie) WITH type(r) AS indicator, count(*) AS value RETURN indicator, value, 100 AS max",
     );
 
-    await expect(dialog.getByRole("button", { name: "Add Widget" })).toBeEnabled({
+    await expect(
+      dialog.getByRole("button", { name: "Add Widget" }),
+    ).toBeEnabled({
       timeout: 10_000,
     });
     await dialog.getByRole("button", { name: "Add Widget" }).click();
@@ -134,7 +146,9 @@ test.describe("New chart types — creation flow", () => {
       "MATCH (p:Person)-[r:ACTED_IN]->(m:Movie) RETURN p.name AS source, m.title AS target, 1 AS value LIMIT 15",
     );
 
-    await expect(dialog.getByRole("button", { name: "Add Widget" })).toBeEnabled({
+    await expect(
+      dialog.getByRole("button", { name: "Add Widget" }),
+    ).toBeEnabled({
       timeout: 10_000,
     });
     await dialog.getByRole("button", { name: "Add Widget" }).click();
@@ -162,7 +176,39 @@ test.describe("New chart types — creation flow", () => {
       "MATCH (p:Person)-[r]->(m:Movie) RETURN type(r) AS parent, m.title AS name, 1 AS value LIMIT 20",
     );
 
-    await expect(dialog.getByRole("button", { name: "Add Widget" })).toBeEnabled({
+    await expect(
+      dialog.getByRole("button", { name: "Add Widget" }),
+    ).toBeEnabled({
+      timeout: 10_000,
+    });
+    await dialog.getByRole("button", { name: "Add Widget" }).click();
+    await expect(dialog).not.toBeVisible({ timeout: 10_000 });
+  });
+
+  test("should create a Gantt widget", async ({ page }) => {
+    test.setTimeout(60_000);
+
+    await page.getByRole("button", { name: "Add Widget" }).first().click();
+    const dialog = page.getByRole("dialog", { name: "Add Widget" });
+
+    // Select Neo4j connection first
+    await dialog.getByRole("combobox").nth(0).click();
+    await page.getByRole("option").first().click();
+
+    // Select Gantt chart type
+    await dialog.getByRole("combobox").nth(1).click();
+    await page.getByRole("option", { name: "Gantt" }).click();
+
+    // Type query — tasks with start/end timestamps
+    await typeInEditor(
+      dialog,
+      page,
+      "MATCH (p:Person)-[:ACTED_IN]->(m:Movie) WITH m.title AS task, m.released AS start, m.released + 2 AS end RETURN task, start, end LIMIT 8",
+    );
+
+    await expect(
+      dialog.getByRole("button", { name: "Add Widget" }),
+    ).toBeEnabled({
       timeout: 10_000,
     });
     await dialog.getByRole("button", { name: "Add Widget" }).click();
@@ -182,11 +228,15 @@ test.describe("Widget Showcase seed dashboard", () => {
     await page.waitForURL(/\/[\w-]+$/, { timeout: 10_000 });
   });
 
-  test("should render the Widget Showcase dashboard with widget cards", async ({ page }) => {
+  test("should render the Widget Showcase dashboard with widget cards", async ({
+    page,
+  }) => {
     test.setTimeout(60_000);
 
     // At least one widget card should be visible on the page
-    await expect(page.locator("[data-testid='widget-card']").first()).toBeVisible({
+    await expect(
+      page.locator("[data-testid='widget-card']").first(),
+    ).toBeVisible({
       timeout: 15_000,
     });
   });
@@ -202,7 +252,9 @@ test.describe("Widget Showcase seed dashboard", () => {
   test("should show the Rule-Based Styling page tab", async ({ page }) => {
     test.setTimeout(30_000);
 
-    await expect(page.getByRole("tab", { name: "Rule-Based Styling" })).toBeVisible({
+    await expect(
+      page.getByRole("tab", { name: "Rule-Based Styling" }),
+    ).toBeVisible({
       timeout: 10_000,
     });
   });
@@ -214,18 +266,22 @@ test.describe("Widget Showcase seed dashboard", () => {
     await page.getByRole("tab", { name: "Simple Charts" }).click();
 
     // Multiple widget cards should be present (bar, line, pie, single-value, table, gauge, radar, sankey, treemap, sunburst)
-    await expect(page.locator("[data-testid='widget-card']").first()).toBeVisible({
+    await expect(
+      page.locator("[data-testid='widget-card']").first(),
+    ).toBeVisible({
       timeout: 15_000,
     });
 
     // At least 10 widgets should be on this page
-    const widgetCount = await page.locator("[data-testid='widget-card']").count();
+    const widgetCount = await page
+      .locator("[data-testid='widget-card']")
+      .count();
     expect(widgetCount).toBeGreaterThanOrEqual(10);
   });
 
   test("should show Color Palettes page tab", async ({ page }) => {
-    await expect(
-      page.getByRole("tab", { name: "Color Palettes" }),
-    ).toBeVisible({ timeout: 10_000 });
+    await expect(page.getByRole("tab", { name: "Color Palettes" })).toBeVisible(
+      { timeout: 10_000 },
+    );
   });
 });

app/playwright.config.ts

@@ -20,12 +20,10 @@ export default defineConfig({
   fullyParallel: true,
   forbidOnly: !!process.env.CI,
   retries: 1,
-  // CI: 2 workers for parallel execution against the production server.
-  // Locally: 4 workers — Playwright's auto-detect picks based on CPU cores
-  // but collapses to serial under Docker-testcontainer load, turning a
-  // ~11-minute run into a ~20-minute run. An explicit number keeps local
-  // timing deterministic regardless of host contention.
-  workers: process.env.CI ? 2 : 4,
+  // CI: 2 workers (constrained runner resources).
+  // Locally: 6 workers — balances parallelism with server/DB contention.
+  // Override with --workers=N on the CLI for experimentation.
+  workers: process.env.CI ? 2 : 6,
   // CI: github (PR annotations) + list (real-time stream) + blob (for cross-shard merge).
   // Local: interactive HTML report.
   reporter: process.env.CI ? [["github"], ["list"], ["blob"]] : "html",

app/src/components/widget-editor/__tests__/transform-editor.test.tsx

@@ -56,6 +56,19 @@ vi.mock("@neoboard/components", () => ({
   ),
 }));
 
+// Mock @radix-ui/react-select primitives used directly in transform-editor
+vi.mock("@radix-ui/react-select", () => ({
+  Item: ({ children, value }: { children: React.ReactNode; value: string }) => (
+    <option value={value}>{children}</option>
+  ),
+  ItemText: ({ children }: { children: React.ReactNode }) => (
+    <span>{children}</span>
+  ),
+  ItemIndicator: ({ children }: { children: React.ReactNode }) => (
+    <>{children}</>
+  ),
+}));
+
 // Mock ValueOrParamInput
 vi.mock("../value-or-param-input", () => ({
   ValueOrParamInput: (props: Record<string, unknown>) => (

app/src/components/widget-editor/chart-type-selector.tsx

@@ -18,6 +18,7 @@ import {
   Sun,
   Radar,
   LayoutGrid,
+  GanttChart as GanttChartIcon,
 } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import { Label, Combobox } from "@neoboard/components";
@@ -43,6 +44,7 @@ export const chartTypeIcons: Record<ChartType, LucideIcon> = {
   sunburst: Sun,
   radar: Radar,
   treemap: LayoutGrid,
+  gantt: GanttChartIcon,
 };
 
 /** Get label + Icon for a chart type. Label from registry, Icon from UI layer. */