diff --git a/src/website_profiling/llm/providers/anthropic.py b/src/website_profiling/llm/providers/anthropic.py
index 6505e415..59d45752 100644
--- a/src/website_profiling/llm/providers/anthropic.py
+++ b/src/website_profiling/llm/providers/anthropic.py
@@ -2,10 +2,98 @@
 from __future__ import annotations
 
 import json
+import os
+import sys
 from typing import Any
 
 from ..base import ChatResult, TokenCallback, ToolCall, parse_json_response
 
+# Ephemeral (5-minute) prompt-cache marker. Placed on the static request prefix
+# (tools -> system -> conversation) so Anthropic bills repeated prefix tokens at
+# ~10% of base input price across the multi-round tool loop. Mirrors how Claude
+# Code caches its tool/system prefix.
+_CACHE_CONTROL = {"type": "ephemeral"}
+
+
+def _truthy(value: str | None, *, default: bool) -> bool:
+    raw = (value or "").strip().lower()
+    if not raw:
+        return default
+    return raw in ("1", "true", "yes", "on")
+
+
+def _prompt_cache_enabled() -> bool:
+    """Prompt caching is on by default; set WP_LLM_PROMPT_CACHE=0 to disable."""
+    return _truthy(os.environ.get("WP_LLM_PROMPT_CACHE"), default=True)
+
+
+def _cache_debug_enabled() -> bool:
+    return _truthy(os.environ.get("WP_LLM_DEBUG_CACHE"), default=False)
+
+
+def _log_cache_usage(usage: Any) -> None:
+    """When WP_LLM_DEBUG_CACHE is set, print cache token counts to stderr."""
+    if usage is None or not _cache_debug_enabled():
+        return
+    created = getattr(usage, "cache_creation_input_tokens", None)
+    read = getattr(usage, "cache_read_input_tokens", None)
+    inp = getattr(usage, "input_tokens", None)
+    print(
+        f"[wp-cache] input={inp} cache_creation={created} cache_read={read}",
+        file=sys.stderr,
+        flush=True,
+    )
+
+
+def _apply_prompt_caching(
+    system: str,
+    tools: list[dict[str, Any]],
+    messages: list[dict[str, Any]],
+) -> tuple[Any, list[dict[str, Any]], list[dict[str, Any]]]:
+    """Add cache_control breakpoints to the static request prefix.
+
+    Returns ``(system, tools, messages)`` unchanged when caching is disabled, so
+    behavior is byte-identical to the no-cache path. Otherwise places three
+    breakpoints (the limit is four) in Anthropic's prefix order:
+
+    1. the last tool definition (caches the whole tools array),
+    2. the system prompt (caches tools+system),
+    3. the last content block of the last message (rolls forward each round,
+       reading the prior conversation prefix from cache and writing the suffix).
+
+    Builds new copies — never mutates the caller's lists/dicts — so the pure
+    converter outputs stay clean.
+    """
+    if not _prompt_cache_enabled():
+        return system, tools, messages
+
+    # 1. System prompt -> single text block carrying the cache marker.
+    system_blocks: Any = [
+        {"type": "text", "text": system, "cache_control": _CACHE_CONTROL},
+    ]
+
+    # 2. Last tool definition.
+    tools_out = list(tools)
+    if tools_out:
+        tools_out[-1] = {**tools_out[-1], "cache_control": _CACHE_CONTROL}
+
+    # 3. Last content block of the last message.
+    messages_out = list(messages)
+    if messages_out:
+        last = dict(messages_out[-1])
+        content = last.get("content")
+        if isinstance(content, list) and content:
+            blocks = list(content)
+            blocks[-1] = {**blocks[-1], "cache_control": _CACHE_CONTROL}
+            last["content"] = blocks
+        elif isinstance(content, str):
+            last["content"] = [
+                {"type": "text", "text": content, "cache_control": _CACHE_CONTROL},
+            ]
+        messages_out[-1] = last
+
+    return system_blocks, tools_out, messages_out
+
 
 def _to_anthropic_messages(messages: list[dict[str, Any]]) -> tuple[str, list[dict[str, Any]]]:
     """Convert OpenAI-shaped chat messages to ``(system, anthropic_messages)``.
@@ -122,6 +210,9 @@ def chat_with_tools(
 
         system, anthropic_messages = _to_anthropic_messages(messages)
         anthropic_tools = _to_anthropic_tools(tools)
+        system, anthropic_tools, anthropic_messages = _apply_prompt_caching(
+            system, anthropic_tools, anthropic_messages,
+        )
 
         kwargs: dict[str, Any] = {
             "model": self._model,
@@ -154,6 +245,7 @@ def chat_with_tools(
                                 prev = tool_calls[-1].arguments.get("_partial", "")
                                 tool_calls[-1].arguments["_partial"] = prev + partial
                     final = stream.get_final_message()
+                _log_cache_usage(getattr(final, "usage", None))
                 for tc in tool_calls:
                     partial = tc.arguments.pop("_partial", "")
                     if partial:
@@ -168,6 +260,7 @@ def chat_with_tools(
                 return ChatResult(content="".join(content_parts) or "".join(text_parts), tool_calls=tool_calls)
 
             msg = client.messages.create(**kwargs)
+            _log_cache_usage(getattr(msg, "usage", None))
             content_parts: list[str] = []
             tool_calls = []
             for block in msg.content:
diff --git a/tests/test_llm_provider_anthropic.py b/tests/test_llm_provider_anthropic.py
index 86b5be9f..2f1daa28 100644
--- a/tests/test_llm_provider_anthropic.py
+++ b/tests/test_llm_provider_anthropic.py
@@ -7,11 +7,16 @@
 """
 from __future__ import annotations
 
+import pytest
+
 from website_profiling.llm.providers.anthropic import (
+    _apply_prompt_caching,
     _to_anthropic_messages,
     _to_anthropic_tools,
 )
 
+_EPHEMERAL = {"type": "ephemeral"}
+
 
 def test_assistant_tool_calls_become_matching_tool_use_blocks() -> None:
     messages = [
@@ -75,3 +80,97 @@ def test_to_anthropic_tools_maps_schema() -> None:
     assert _to_anthropic_tools(tools) == [
         {"name": "t", "description": "d", "input_schema": {"type": "object", "properties": {}}},
     ]
+
+
+# --- prompt caching --------------------------------------------------------
+
+
+@pytest.fixture(autouse=True)
+def _cache_on(monkeypatch: pytest.MonkeyPatch) -> None:
+    """Caching defaults to on; pin it for deterministic tests."""
+    monkeypatch.setenv("WP_LLM_PROMPT_CACHE", "1")
+
+
+def test_caching_marks_last_tool_only() -> None:
+    tools = [{"name": "a"}, {"name": "b"}, {"name": "c"}]
+    _, tools_out, _ = _apply_prompt_caching("sys", tools, [])
+    assert "cache_control" not in tools_out[0]
+    assert "cache_control" not in tools_out[1]
+    assert tools_out[-1]["cache_control"] == _EPHEMERAL
+    # original list/dicts are untouched
+    assert all("cache_control" not in t for t in tools)
+
+
+def test_caching_empty_tools_is_safe() -> None:
+    system, tools_out, _ = _apply_prompt_caching("sys", [], [])
+    assert tools_out == []
+    assert system == [{"type": "text", "text": "sys", "cache_control": _EPHEMERAL}]
+
+
+def test_caching_system_becomes_text_block() -> None:
+    system, _, _ = _apply_prompt_caching("the system prompt", [], [])
+    assert system == [
+        {"type": "text", "text": "the system prompt", "cache_control": _EPHEMERAL},
+    ]
+
+
+def test_caching_last_message_string_content_becomes_block() -> None:
+    messages = [
+        {"role": "user", "content": "first"},
+        {"role": "user", "content": "second"},
+    ]
+    _, _, out = _apply_prompt_caching("sys", [], messages)
+    # earlier message untouched
+    assert out[0] == {"role": "user", "content": "first"}
+    assert out[-1]["content"] == [
+        {"type": "text", "text": "second", "cache_control": _EPHEMERAL},
+    ]
+    # caller's list/dicts not mutated
+    assert messages[-1] == {"role": "user", "content": "second"}
+
+
+def test_caching_last_message_list_content_marks_last_block() -> None:
+    messages = [{
+        "role": "user",
+        "content": [
+            {"type": "tool_result", "tool_use_id": "c1", "content": "{}"},
+            {"type": "tool_result", "tool_use_id": "c2", "content": "{}"},
+        ],
+    }]
+    _, _, out = _apply_prompt_caching("sys", [], messages)
+    blocks = out[-1]["content"]
+    assert "cache_control" not in blocks[0]
+    assert blocks[-1]["cache_control"] == _EPHEMERAL
+    # original untouched
+    assert all("cache_control" not in b for b in messages[0]["content"])
+
+
+def test_caching_disabled_returns_inputs_unchanged(monkeypatch: pytest.MonkeyPatch) -> None:
+    monkeypatch.setenv("WP_LLM_PROMPT_CACHE", "0")
+    tools = [{"name": "a"}]
+    messages = [{"role": "user", "content": "hi"}]
+    system, tools_out, msgs_out = _apply_prompt_caching("sys", tools, messages)
+    assert system == "sys"  # stays a plain string
+    assert tools_out is tools
+    assert msgs_out is messages
+
+
+def test_caching_uses_at_most_four_breakpoints() -> None:
+    tools = [{"name": "a"}, {"name": "b"}]
+    messages = [
+        {"role": "user", "content": "u"},
+        {"role": "assistant", "content": [{"type": "text", "text": "a"}]},
+    ]
+    system, tools_out, msgs_out = _apply_prompt_caching("sys", tools, messages)
+
+    def _count(obj: object) -> int:
+        if isinstance(obj, dict):
+            n = 1 if obj.get("cache_control") == _EPHEMERAL else 0
+            return n + sum(_count(v) for v in obj.values())
+        if isinstance(obj, list):
+            return sum(_count(v) for v in obj)
+        return 0
+
+    total = _count(system) + _count(tools_out) + _count(msgs_out)
+    assert total == 3
+    assert total <= 4
diff --git a/web/app/api/chat/artifacts/[id]/route.ts b/web/app/api/chat/artifacts/[id]/route.ts
index 7b60731f..336162ec 100644
--- a/web/app/api/chat/artifacts/[id]/route.ts
+++ b/web/app/api/chat/artifacts/[id]/route.ts
@@ -82,13 +82,18 @@ export const GET: ApiRouteHandlerWithParams<{ id: string }> = async (
           return;
         }
         const body = Buffer.from(parsed.data_base64, 'base64');
-        const filename = parsed.filename || 'export.bin';
+        const rawName = parsed.filename || 'export.bin';
+        // Sanitize the ASCII fallback (strip non-printable/quote/slash chars so
+        // a CR/LF or quote can't break or inject the header) and provide an
+        // RFC 5987 filename* for the full UTF-8 name.
+        const asciiName =
+          rawName.replace(/[^\x20-\x7e]/g, '_').replace(/["\\/]/g, '_') || 'export.bin';
         const mime = parsed.mime_type || 'application/octet-stream';
         resolve(
           new NextResponse(body, {
             headers: {
               'Content-Type': mime,
-              'Content-Disposition': `attachment; filename="${filename}"`,
+              'Content-Disposition': `attachment; filename="${asciiName}"; filename*=UTF-8''${encodeURIComponent(rawName)}`,
             },
           }),
         );
diff --git a/web/app/api/chat/route.ts b/web/app/api/chat/route.ts
index ffed8cb0..f48b8d48 100644
--- a/web/app/api/chat/route.ts
+++ b/web/app/api/chat/route.ts
@@ -120,6 +120,31 @@ export const POST: ApiRouteHandler = async (request: NextRequest): Promise<Respo
   const chatTimeoutMs = await resolveChatTimeoutMs();
   const timeoutSec = Math.round(chatTimeoutMs / 1000);
 
+  // Track the spawned child so we can kill it if the client disconnects
+  // (ReadableStream.cancel) instead of leaking it until the timeout fires.
+  let activeProc: ReturnType<typeof spawn> | null = null;
+  let activeKillTimer: ReturnType<typeof setTimeout> | null = null;
+  let cancelled = false;
+
+  const cancelChild = () => {
+    cancelled = true;
+    const p = activeProc;
+    if (!p) return;
+    try {
+      p.kill('SIGTERM');
+      activeKillTimer = setTimeout(() => {
+        try {
+          p.kill('SIGKILL');
+        } catch {
+          /* already exited */
+        }
+      }, 2000);
+      (activeKillTimer as { unref?: () => void }).unref?.();
+    } catch {
+      /* already exited */
+    }
+  };
+
   const stream = new ReadableStream({
     start(controller) {
       const encoder = new TextEncoder();
@@ -170,6 +195,7 @@ export const POST: ApiRouteHandler = async (request: NextRequest): Promise<Respo
           shell: false,
         },
       );
+      activeProc = proc;
 
       const timer = setTimeout(() => {
         timedOut = true;
@@ -182,6 +208,14 @@ export const POST: ApiRouteHandler = async (request: NextRequest): Promise<Respo
         closeStream();
       }, chatTimeoutMs);
 
+      // Without an error listener, an EPIPE/ERR_STREAM_DESTROYED on the stdin
+      // pipe (child exits before reading) would surface as an unhandled stream
+      // error and crash the Node process instead of a clean chat error.
+      proc.stdin?.on('error', (err: Error) => {
+        clearTimeout(timer);
+        push('error', { message: `Failed to send request to assistant: ${err.message}` });
+        closeStream();
+      });
       proc.stdin?.write(stdinPayload);
       proc.stdin?.end();
 
@@ -265,7 +299,13 @@ export const POST: ApiRouteHandler = async (request: NextRequest): Promise<Respo
 
       proc.on('close', async (code: number | null) => {
         clearTimeout(timer);
-        if (timedOut) return;
+        if (activeKillTimer) {
+          clearTimeout(activeKillTimer);
+          activeKillTimer = null;
+        }
+        // On client cancel we drop the partial turn (the user navigated away);
+        // on timeout the error was already streamed.
+        if (timedOut || cancelled) return;
         exitCode = code;
 
         if (!sawError && !assistantText.trim() && !narrative) {
@@ -327,6 +367,11 @@ export const POST: ApiRouteHandler = async (request: NextRequest): Promise<Respo
         closeStream();
       });
     },
+    cancel() {
+      // Client disconnected mid-stream (reload/navigate/abort): terminate the
+      // agent process so it does not keep holding the LLM connection/CPU.
+      cancelChild();
+    },
   });
 
   return new Response(stream, {
diff --git a/web/app/api/chat/sessions/[id]/messages/route.ts b/web/app/api/chat/sessions/[id]/messages/route.ts
index e4f17d4c..59a5725c 100644
--- a/web/app/api/chat/sessions/[id]/messages/route.ts
+++ b/web/app/api/chat/sessions/[id]/messages/route.ts
@@ -1,13 +1,13 @@
 import { NextResponse, type NextRequest } from 'next/server';
 import { forbiddenIfNotLocal } from '@/server/localOnly';
 import { requireApiAuthForChat } from '@/server/auth';
-import { getChatMessages } from '@/server/chatDb';
+import { getChatMessages, getChatSession } from '@/server/chatDb';
 import type { ApiRouteHandler } from '@/types/api';
 
 export const runtime = 'nodejs';
 export const dynamic = 'force-dynamic';
 
-/** GET /api/chat/sessions/[id]/messages */
+/** GET /api/chat/sessions/[id]/messages?propertyId= */
 export const GET: ApiRouteHandler = async (
   request: NextRequest,
   context?: { params?: Promise<{ id: string }> },
@@ -22,8 +22,18 @@ export const GET: ApiRouteHandler = async (
   if (!sessionId) {
     return NextResponse.json({ error: 'invalid session id' }, { status: 400 });
   }
+  const propertyId = Number(request.nextUrl.searchParams.get('propertyId') || '0');
+  if (!propertyId) {
+    return NextResponse.json({ error: 'propertyId required' }, { status: 400 });
+  }
 
   try {
+    // Scope conversation history to the caller's property to avoid leaking
+    // another property's messages by enumerating session ids.
+    const session = await getChatSession(sessionId);
+    if (!session || session.property_id !== propertyId) {
+      return NextResponse.json({ error: 'session not found' }, { status: 404 });
+    }
     const messages = await getChatMessages(sessionId);
     return NextResponse.json({ messages });
   } catch (e) {
diff --git a/web/app/api/chat/sessions/[id]/route.ts b/web/app/api/chat/sessions/[id]/route.ts
index 366d1397..0ed68a00 100644
--- a/web/app/api/chat/sessions/[id]/route.ts
+++ b/web/app/api/chat/sessions/[id]/route.ts
@@ -1,6 +1,6 @@
 import { NextResponse, type NextRequest } from 'next/server';
 import { forbiddenIfNotLocal } from '@/server/localOnly';
-import { requireApiAuthForChat } from '@/server/auth';
+import { requireApiAuth, requireApiAuthForChat } from '@/server/auth';
 import { deleteChatSession, getChatSession } from '@/server/chatDb';
 import type { ApiRouteHandler } from '@/types/api';
 
@@ -35,14 +35,15 @@ export const GET: ApiRouteHandler = async (
   }
 };
 
-/** DELETE /api/chat/sessions/[id] */
+/** DELETE /api/chat/sessions/[id]?propertyId= */
 export const DELETE: ApiRouteHandler = async (
   request: NextRequest,
   context?: { params?: Promise<{ id: string }> },
 ): Promise<Response> => {
   const denied = forbiddenIfNotLocal(request);
   if (denied) return denied;
-  const authDenied = requireApiAuthForChat(request);
+  // Deleting a session is a destructive mutation: require a non-read-only role.
+  const authDenied = requireApiAuth(request);
   if (authDenied) return authDenied;
 
   const params = context?.params ? await context.params : { id: '' };
@@ -50,8 +51,17 @@ export const DELETE: ApiRouteHandler = async (
   if (!sessionId) {
     return NextResponse.json({ error: 'invalid session id' }, { status: 400 });
   }
+  const propertyId = Number(request.nextUrl.searchParams.get('propertyId') || '0');
+  if (!propertyId) {
+    return NextResponse.json({ error: 'propertyId required' }, { status: 400 });
+  }
 
   try {
+    // Scope the delete to the caller's property (consistent with POST /api/chat).
+    const session = await getChatSession(sessionId);
+    if (!session || session.property_id !== propertyId) {
+      return NextResponse.json({ error: 'session not found' }, { status: 404 });
+    }
     const deleted = await deleteChatSession(sessionId);
     if (!deleted) {
       return NextResponse.json({ error: 'session not found' }, { status: 404 });
diff --git a/web/app/api/chat/sessions/route.ts b/web/app/api/chat/sessions/route.ts
index 01cb9195..0a3cace5 100644
--- a/web/app/api/chat/sessions/route.ts
+++ b/web/app/api/chat/sessions/route.ts
@@ -32,6 +32,8 @@ export const GET: ApiRouteHandler = async (request: NextRequest): Promise<Respon
 export const POST: ApiRouteHandler = async (request: NextRequest): Promise<Response> => {
   const denied = forbiddenIfNotLocal(request);
   if (denied) return denied;
+  // Chat (incl. starting a session) is intentionally available to the
+  // read-only client role; only destructive deletes are restricted (see DELETE).
   const authDenied = requireApiAuthForChat(request);
   if (authDenied) return authDenied;
 
diff --git a/web/app/api/dashboards/ai-generate/route.ts b/web/app/api/dashboards/ai-generate/route.ts
deleted file mode 100644
index d5461d2d..00000000
--- a/web/app/api/dashboards/ai-generate/route.ts
+++ /dev/null
@@ -1,164 +0,0 @@
-import { NextResponse, type NextRequest } from 'next/server';
-import { spawn } from 'child_process';
-import { forbiddenIfNotLocal } from '@/server/localOnly';
-import { getRepoRoot, getPipelineSpawnEnv } from '@/server/pipelineSpawnEnv';
-import { resolvePythonExecutable, parsePythonJsonStdout } from '@/server/resolvePython';
-import { DASHBOARD_CATALOG, dimensions, measures } from '@/lib/dashboard/catalog/catalog';
-import { VIZ_LABELS } from '@/lib/dashboard/viz/labels';
-import { spawnAuditTool } from '@/server/spawnAuditTool';
-import type { ApiRouteHandler } from '@/types/api';
-
-export const runtime = 'nodejs';
-export const dynamic = 'force-dynamic';
-
-const DASHSCRIPT_HELP = `
-DashScript is a lightweight formula language for dashboard widgets.
-
-MEASURE (scalar formula, produces a single number or string):
-  field("key")            — value from root result by dot-path key
-  sum("col")              — sum of numeric column across all rows
-  avg("col")              — average
-  count()                 — number of rows
-  min("col") / max("col") — min / max of column
-  if(cond, thenVal, elseVal) — conditional
-  coalesce(a, b, c)       — first non-null value
-  Arithmetic: +  -  *  /  (division by zero returns null)
-  Comparison: ==  !=  <  <=  >  >=
-  Logical: &&  ||  !
-
-TRANSFORM (row pipeline, applied to rows array before rendering):
-  filter(expr)            — keep rows where expr is truthy (use row column names directly)
-  sort(col, asc|desc)     — sort rows by column (default asc)
-  take(N)                 — keep first N rows
-  skip(N)                 — drop first N rows
-  project(col1, col2)     — keep only listed columns
-  Stages are joined with  |   e.g.  filter(count > 0) | sort(count, desc) | take(10)
-
-Examples:
-  measure:   field("health_score")
-  measure:   sum("issues") / count()
-  transform: filter(severity == "critical") | sort(count, desc) | take(5)
-`.trim();
-
-const PYTHON_SCRIPT = `
-import json, sys
-from website_profiling.llm.dashboard_ai import generate_dashboard_ai
-payload = json.load(sys.stdin)
-print(json.dumps(generate_dashboard_ai(payload)))
-`;
-
-/**
- * POST /api/dashboards/ai-generate
- * Body: { mode, prompt, toolName?, propertyId?, reportId? }
- */
-export const POST: ApiRouteHandler = async (request: NextRequest): Promise<Response> => {
-  const denied = forbiddenIfNotLocal(request);
-  if (denied) return denied;
-
-  let body: {
-    mode?: string;
-    prompt?: string;
-    toolName?: string;
-    propertyId?: number;
-    reportId?: number | null;
-    current?: unknown;
-  };
-  try {
-    body = await request.json();
-  } catch {
-    return NextResponse.json({ error: 'Invalid JSON' }, { status: 400 });
-  }
-
-  const mode = String(body.mode || 'widget').trim().toLowerCase();
-  if (!['script', 'widget', 'dashboard'].includes(mode)) {
-    return NextResponse.json({ error: 'mode must be script, widget, or dashboard' }, { status: 400 });
-  }
-  const prompt = String(body.prompt || '').trim();
-  if (!prompt) {
-    return NextResponse.json({ error: 'prompt required' }, { status: 400 });
-  }
-
-  // Optionally fetch a sample result so the LLM knows the real schema
-  let sample: Record<string, unknown> | null = null;
-  const toolName = String(body.toolName || '').trim();
-  const propertyId = Number(body.propertyId || 0);
-  const reportId = body.reportId != null ? Number(body.reportId) : null;
-
-  if (toolName && propertyId && (mode === 'script' || mode === 'widget')) {
-    try {
-      const result = await spawnAuditTool({ toolName, propertyId, reportId });
-      if (result.ok) {
-        // Truncate to keep payload small — first 2 rows of arrays, top-level scalars
-        sample = truncateSample(result.data);
-      }
-    } catch {
-      // non-fatal — proceed without sample
-    }
-  }
-
-  const payload = {
-    mode,
-    prompt,
-    catalog: DASHBOARD_CATALOG.map((e) => ({
-      toolName: e.toolName,
-      label: e.label,
-      section: e.section,
-      fields: e.fields,
-      dimensions: dimensions(e).map((f) => ({ key: f.key, label: f.label, defaultAgg: f.defaultAgg, format: f.format })),
-      measures: measures(e).map((f) => ({ key: f.key, label: f.label, defaultAgg: f.defaultAgg, format: f.format })),
-      rowsPath: e.rowsPath,
-      compatibleViz: e.compatibleViz,
-    })),
-    viz_types: VIZ_LABELS,
-    dashscript_help: DASHSCRIPT_HELP,
-    current: body.current ?? null,
-    sample,
-  };
-
-  const repoRoot = getRepoRoot();
-  const pythonExe = resolvePythonExecutable(null, repoRoot);
-
-  return new Promise<Response>((resolve) => {
-    const proc = spawn(pythonExe, ['-c', PYTHON_SCRIPT], {
-      cwd: repoRoot,
-      env: getPipelineSpawnEnv(repoRoot),
-      shell: false,
-    });
-    let stdout = '';
-    proc.stdout?.on('data', (c: Buffer | string) => { stdout += c.toString(); });
-    proc.stdin?.write(JSON.stringify(payload));
-    proc.stdin?.end();
-    proc.on('error', () => {
-      clearTimeout(timer);
-      resolve(NextResponse.json({ error: 'AI generation failed: could not start Python process' }, { status: 500 }));
-    });
-    proc.on('close', (code) => {
-      clearTimeout(timer);
-      const parsed = parsePythonJsonStdout(stdout);
-      if (code === 0 && parsed) {
-        if ((parsed as { ok?: boolean }).ok === false) {
-          const err = parsed as { error?: string; missing?: boolean };
-          return resolve(NextResponse.json(parsed, { status: err.missing ? 503 : 500 }));
-        }
-        return resolve(NextResponse.json(parsed));
-      }
-      resolve(NextResponse.json({ error: 'AI generation failed' }, { status: 500 }));
-    });
-    const timer = setTimeout(() => {
-      try { proc.kill(); } catch { /* ignore */ }
-      resolve(NextResponse.json({ error: 'AI generation timed out after 120s' }, { status: 504 }));
-    }, 120_000);
-  });
-};
-
-function truncateSample(data: Record<string, unknown>): Record<string, unknown> {
-  const out: Record<string, unknown> = {};
-  for (const [k, v] of Object.entries(data)) {
-    if (Array.isArray(v)) {
-      out[k] = v.slice(0, 2);
-    } else {
-      out[k] = v;
-    }
-  }
-  return out;
-}
diff --git a/web/app/api/llm-config/route.ts b/web/app/api/llm-config/route.ts
index ba085610..204d22f0 100644
--- a/web/app/api/llm-config/route.ts
+++ b/web/app/api/llm-config/route.ts
@@ -1,5 +1,6 @@
 import { NextResponse, type NextRequest } from 'next/server';
 import { forbiddenIfNotLocal } from '@/server/localOnly';
+import { requireApiAuth, requireApiAuthForChat } from '@/server/auth';
 import { loadLlmConfig, saveLlmConfig } from '@/server/llmConfig';
 import { ALL_LLM_SCHEMA_KEYS, getLlmFieldByKey } from '@/lib/llmConfigSchema';
 import type { ApiRouteHandler, LlmConfigPutBody, LlmConfigState } from '@/types/api';
@@ -10,6 +11,8 @@ export const runtime = 'nodejs';
 export const GET: ApiRouteHandler = async (request: NextRequest): Promise<Response> => {
   const denied = forbiddenIfNotLocal(request);
   if (denied) return denied;
+  const authDenied = requireApiAuthForChat(request);
+  if (authDenied) return authDenied;
 
   try {
     const result = await loadLlmConfig();
@@ -24,6 +27,8 @@ export const GET: ApiRouteHandler = async (request: NextRequest): Promise<Respon
 export const PUT: ApiRouteHandler = async (request: NextRequest): Promise<Response> => {
   const denied = forbiddenIfNotLocal(request);
   if (denied) return denied;
+  const authDenied = requireApiAuth(request);
+  if (authDenied) return authDenied;
 
   let body: LlmConfigPutBody;
   try {
diff --git a/web/package-lock.json b/web/package-lock.json
index 04b7eef9..eccd015f 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -9,6 +9,9 @@
       "version": "0.1.0",
       "license": "MIT",
       "dependencies": {
+        "@dnd-kit/core": "^6.3.1",
+        "@dnd-kit/sortable": "^10.0.0",
+        "@dnd-kit/utilities": "^3.2.2",
         "@tanstack/react-virtual": "^3.13.23",
         "@tiptap/extension-image": "^3.26.1",
         "@tiptap/extension-link": "^3.26.1",
@@ -27,6 +30,7 @@
         "3d-force-graph": "^1.79.1",
         "chart.js": "^4.5.1",
         "d3": "^7.9.0",
+        "echarts": "^6.1.0",
         "lucide-react": "^0.577.0",
         "next": "15.5.14",
         "pg": "^8.21.0",
@@ -76,6 +80,59 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@dnd-kit/accessibility": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz",
+      "integrity": "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/core": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz",
+      "integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/accessibility": "^3.1.1",
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/sortable": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-10.0.0.tgz",
+      "integrity": "sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@dnd-kit/core": "^6.3.0",
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/utilities": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz",
+      "integrity": "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/@emnapi/core": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.9.1.tgz",
@@ -5162,6 +5219,22 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/echarts": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-6.1.0.tgz",
+      "integrity": "sha512-q0yaFPggC9FUdsWH4blavRWFmxdrIodbkoKNAjJudAI6CA9gNPxHtV2RcZNEepZVlk4yvBYkOkbk6HIVpIyHZA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "6.1.0"
+      }
+    },
+    "node_modules/echarts/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "license": "0BSD"
+    },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@@ -11263,6 +11336,21 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/zrender": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-6.1.0.tgz",
+      "integrity": "sha512-oEGMDB6pOP2S6OwRR4PdVv610zrjnA3Bh+JnSG12fYJlBKjtNAoEb5fSUoCOOINlH96I2fU38/A2UpRKs67xYQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
+    },
+    "node_modules/zrender/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "license": "0BSD"
+    },
     "node_modules/zwitch": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
diff --git a/web/package.json b/web/package.json
index 7cc274fe..682d4cc3 100644
--- a/web/package.json
+++ b/web/package.json
@@ -13,6 +13,9 @@
     "typecheck:strict": "tsc --noEmit -p tsconfig.strict.json"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@tanstack/react-virtual": "^3.13.23",
     "@tiptap/extension-image": "^3.26.1",
     "@tiptap/extension-link": "^3.26.1",
@@ -31,6 +34,7 @@
     "3d-force-graph": "^1.79.1",
     "chart.js": "^4.5.1",
     "d3": "^7.9.0",
+    "echarts": "^6.1.0",
     "lucide-react": "^0.577.0",
     "next": "15.5.14",
     "pg": "^8.21.0",
diff --git a/web/src/components/chat/ChatComposer.tsx b/web/src/components/chat/ChatComposer.tsx
index 745505f9..07c6f237 100644
--- a/web/src/components/chat/ChatComposer.tsx
+++ b/web/src/components/chat/ChatComposer.tsx
@@ -42,9 +42,15 @@ export default function ChatComposer({
   useEffect(() => {
     if (!draftMessage) return;
     setText(draftMessage);
-    resizeTextarea();
     onDraftApplied?.();
-    textareaRef.current?.focus();
+    // Resize/focus after the controlled value has committed to the DOM,
+    // otherwise scrollHeight reflects the previous (empty) content and a
+    // multi-line draft renders collapsed to a single row.
+    const raf = requestAnimationFrame(() => {
+      resizeTextarea();
+      textareaRef.current?.focus();
+    });
+    return () => cancelAnimationFrame(raf);
   }, [draftMessage, onDraftApplied, resizeTextarea]);
 
   const handleSubmit = (e: FormEvent) => {
@@ -102,7 +108,9 @@ export default function ChatComposer({
             isHero ? 'min-h-[2.5rem] text-[15px]' : 'min-h-[2.25rem] text-sm'
           }`}
           onKeyDown={(e) => {
-            if (e.key === 'Enter' && !e.shiftKey) {
+            // Ignore the Enter that confirms an IME composition (CJK etc.),
+            // otherwise a half-composed message gets submitted prematurely.
+            if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {
               e.preventDefault();
               handleSubmit(e);
             }
diff --git a/web/src/components/chat/ChatMessageList.tsx b/web/src/components/chat/ChatMessageList.tsx
index f6128eda..cf7dd425 100644
--- a/web/src/components/chat/ChatMessageList.tsx
+++ b/web/src/components/chat/ChatMessageList.tsx
@@ -32,6 +32,13 @@ export default function ChatMessageList({ messages, empty }: ChatMessageListProp
   useEffect(() => {
     const node = scrollRef.current;
     if (!node) return;
+    // Only stick to the bottom if the user is already near it; otherwise a
+    // user scrolling up to read history during streaming would be yanked down
+    // on every token.
+    const NEAR_BOTTOM_PX = 120;
+    const nearBottom =
+      node.scrollHeight - node.scrollTop - node.clientHeight <= NEAR_BOTTOM_PX;
+    if (!nearBottom) return;
     const raf = requestAnimationFrame(() => {
       node.scrollTop = node.scrollHeight;
     });
diff --git a/web/src/components/chat/deriveChatBlocks.ts b/web/src/components/chat/deriveChatBlocks.ts
index 42e53b94..a6bf48fb 100644
--- a/web/src/components/chat/deriveChatBlocks.ts
+++ b/web/src/components/chat/deriveChatBlocks.ts
@@ -229,7 +229,9 @@ export function blockKey(block: ChatBlock): string {
     case 'label_value_chart':
       return `label_value:${block.title}`;
     case 'health_trend':
-      return block.categoryId ? `health_trend:${block.categoryId}` : 'health_trend';
+      // Fall back to the title so a site-wide trend and an all-categories
+      // trend (both lacking a categoryId) don't collide and drop one another.
+      return block.categoryId ? `health_trend:${block.categoryId}` : `health_trend:${block.title}`;
     case 'file_download':
       return `file_download:${block.files.map((f) => f.filename).join(',')}`;
     case 'audit_run_confirm':
diff --git a/web/src/components/chat/preprocessChatMarkdown.ts b/web/src/components/chat/preprocessChatMarkdown.ts
index bd4345e8..5c8cdce3 100644
--- a/web/src/components/chat/preprocessChatMarkdown.ts
+++ b/web/src/components/chat/preprocessChatMarkdown.ts
@@ -105,8 +105,11 @@ export function preprocessChatMarkdown(content: string): string {
   let out = content.trim();
   if (!out) return out;
 
+  // NOTE: the leading character class already includes \s, so a trailing \s*
+  // here would overlap it and cause quadratic backtracking (ReDoS) on long
+  // whitespace-only lines. Keep the whitespace handled by the class only.
   out = out.replace(
-    /^[\p{Emoji_Presentation}\p{Extended_Pictographic}\s🔎📸💡]*\s*(Power Insights|Key takeaways|Executive summary)(?:\s+for\s+[\w.-]+)?\s*$/gimu,
+    /^[\p{Emoji_Presentation}\p{Extended_Pictographic}\s🔎📸💡]*(Power Insights|Key takeaways|Executive summary)(?:\s+for\s+[\w.-]+)?\s*$/gimu,
     '### $1',
   );
 
diff --git a/web/src/components/dashboards/DashboardGrid.tsx b/web/src/components/dashboards/DashboardGrid.tsx
deleted file mode 100644
index fc8f44c9..00000000
--- a/web/src/components/dashboards/DashboardGrid.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from '@/lib/dashboard/builder/DashboardGrid';
diff --git a/web/src/components/dashboards/DashboardSwitcher.tsx b/web/src/components/dashboards/DashboardSwitcher.tsx
deleted file mode 100644
index a8ab8f4a..00000000
--- a/web/src/components/dashboards/DashboardSwitcher.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from '@/lib/dashboard/builder/DashboardSwitcher';
diff --git a/web/src/components/dashboards/DashboardWidget.tsx b/web/src/components/dashboards/DashboardWidget.tsx
deleted file mode 100644
index 060fb682..00000000
--- a/web/src/components/dashboards/DashboardWidget.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from '@/lib/dashboard/builder/DashboardWidget';
diff --git a/web/src/components/dashboards/WidgetConfigPanel.tsx b/web/src/components/dashboards/WidgetConfigPanel.tsx
deleted file mode 100644
index 9a4ecaad..00000000
--- a/web/src/components/dashboards/WidgetConfigPanel.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from '@/lib/dashboard/builder/WidgetConfigPanel';
diff --git a/web/src/components/dashboards/WidgetPalette.tsx b/web/src/components/dashboards/WidgetPalette.tsx
deleted file mode 100644
index ee0812c8..00000000
--- a/web/src/components/dashboards/WidgetPalette.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from '@/lib/dashboard/builder/WidgetPalette';
diff --git a/web/src/lib/dashboard/ai/generate.test.ts b/web/src/lib/dashboard/ai/generate.test.ts
deleted file mode 100644
index 83e41324..00000000
--- a/web/src/lib/dashboard/ai/generate.test.ts
+++ /dev/null
@@ -1,214 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import {
-  sanitizeChartSpec,
-  validateMeasure,
-  validateTransform,
-  assignLayouts,
-  generateWidget,
-  AiGenerateError,
-} from '@/lib/dashboard/ai/generate';
-import type { Widget } from '@/lib/dashboard/types';
-
-// ──────────────────────────────────────────────────────────────────────────────
-// sanitizeChartSpec
-// ──────────────────────────────────────────────────────────────────────────────
-
-describe('sanitizeChartSpec', () => {
-  it('accepts a valid minimal spec', () => {
-    const spec = sanitizeChartSpec({ type: 'bar' });
-    expect(spec.type).toBe('bar');
-  });
-
-  it('throws when type is missing', () => {
-    expect(() => sanitizeChartSpec({ labelField: 'x' })).toThrow(/type/);
-  });
-
-  it('throws when input is not an object', () => {
-    expect(() => sanitizeChartSpec('bar')).toThrow();
-  });
-
-  it('drops undefined and function values via JSON round-trip', () => {
-    const raw = {
-      type: 'pie',
-      options: { onClick: undefined },
-    };
-    const spec = sanitizeChartSpec(raw);
-    // undefined props dropped by JSON serialization
-    expect(spec.options).not.toHaveProperty('onClick');
-  });
-
-  it('caps dataset labels at 500', () => {
-    const labels = Array.from({ length: 600 }, (_, i) => `label-${i}`);
-    const spec = sanitizeChartSpec({
-      type: 'bar',
-      data: { labels, datasets: [] },
-    });
-    expect(spec.data!.labels).toHaveLength(500);
-  });
-
-  it('caps dataset rows at 500 and datasets at 20', () => {
-    const manyDatasets = Array.from({ length: 25 }, (_, i) => ({
-      label: `ds-${i}`,
-      data: Array.from({ length: 600 }, (_, j) => j),
-    }));
-    const spec = sanitizeChartSpec({
-      type: 'radar',
-      data: { labels: [], datasets: manyDatasets },
-    });
-    expect(spec.data!.datasets).toHaveLength(20);
-    expect((spec.data!.datasets as { data: unknown[] }[])[0].data).toHaveLength(500);
-  });
-
-  it('caps series at 20', () => {
-    const series = Array.from({ length: 30 }, (_, i) => ({ label: `s${i}`, field: `f${i}` }));
-    const spec = sanitizeChartSpec({ type: 'line', series });
-    expect(spec.series).toHaveLength(20);
-  });
-
-  it('passes through chartSpec type unchanged', () => {
-    const spec = sanitizeChartSpec({ type: 'polarArea', series: [] });
-    expect(spec.type).toBe('polarArea');
-  });
-});
-
-// ──────────────────────────────────────────────────────────────────────────────
-// DashScript validation
-// ──────────────────────────────────────────────────────────────────────────────
-
-describe('validateMeasure', () => {
-  it('accepts a valid field call', () => {
-    expect(validateMeasure('field("health_score")')).toBeNull();
-  });
-
-  it('accepts arithmetic', () => {
-    expect(validateMeasure('sum("count") / count()')).toBeNull();
-  });
-
-  it('accepts an if expression', () => {
-    expect(validateMeasure('if(score >= 80, "Good", "Poor")')).toBeNull();
-  });
-
-  it('returns an error string for invalid syntax', () => {
-    expect(validateMeasure('field(')).not.toBeNull();
-  });
-
-  it('returns null for empty string', () => {
-    expect(validateMeasure('')).toBeNull();
-  });
-});
-
-describe('validateTransform', () => {
-  it('accepts a simple pipeline', () => {
-    expect(validateTransform('filter(count > 0) | sort(count, desc) | take(10)')).toBeNull();
-  });
-
-  it('returns null for empty string', () => {
-    expect(validateTransform('')).toBeNull();
-  });
-
-  it('returns an error for malformed pipeline', () => {
-    expect(validateTransform('filter( | sort')).not.toBeNull();
-  });
-});
-
-// ──────────────────────────────────────────────────────────────────────────────
-// assignLayouts
-// ──────────────────────────────────────────────────────────────────────────────
-
-describe('assignLayouts', () => {
-  type PartialWidget = Omit<Widget, 'id' | 'layout'> & { layout?: Widget['layout'] };
-  const base: PartialWidget = {
-    title: 'W',
-    viz: 'kpi' as const,
-    binding: { source: 'audit-tool' as const, toolName: 'get_report_summary' },
-  };
-
-  it('replaces Infinity y with bottomY', () => {
-    const widgets = assignLayouts([{ ...base, layout: { x: 0, y: Infinity, w: 3, h: 2 } }], 5);
-    expect(widgets[0].layout.y).toBe(5);
-  });
-
-  it('assigns unique ids', () => {
-    const widgets = assignLayouts([base, base]);
-    expect(widgets[0].id).not.toBe(widgets[1].id);
-  });
-
-  it('wraps widgets that exceed 12 columns', () => {
-    const wide: PartialWidget = { ...base, layout: { x: 0, y: 0, w: 8, h: 4 } };
-    const narrow: PartialWidget = { ...base, layout: { x: 0, y: 0, w: 8, h: 4 } };
-    const widgets = assignLayouts([wide, narrow], 0);
-    // Second widget should wrap to x: 0 on a new row
-    expect(widgets[1].layout.x).toBe(0);
-    expect(widgets[1].layout.y).toBeGreaterThan(0);
-  });
-
-  it('uses defaultWidgetLayout when layout is missing', () => {
-    const widgets = assignLayouts([base], 0);
-    expect(widgets[0].layout.w).toBeGreaterThan(0);
-    expect(Number.isFinite(widgets[0].layout.y)).toBe(true);
-  });
-});
-
-// ──────────────────────────────────────────────────────────────────────────────
-// generateWidget (mocked fetch)
-// ──────────────────────────────────────────────────────────────────────────────
-
-const mockFetch = vi.fn();
-vi.stubGlobal('fetch', mockFetch);
-
-beforeEach(() => {
-  mockFetch.mockReset();
-});
-
-describe('generateWidget', () => {
-  it('returns a widget with concrete layout', async () => {
-    mockFetch.mockResolvedValueOnce({
-      ok: true,
-      json: async () => ({
-        ok: true,
-        widget: {
-          title: 'Health',
-          toolName: 'get_report_summary',
-          viz: 'kpi',
-          binding: { source: 'audit-tool', toolName: 'get_report_summary', valueField: 'health_score' },
-          options: {},
-        },
-        explanation: 'Shows health score.',
-      }),
-    });
-    const { widget } = await generateWidget('show health score');
-    expect(widget.viz).toBe('kpi');
-    expect(widget.id).toBeTruthy();
-    expect(Number.isFinite(widget.layout.y)).toBe(true);
-  });
-
-  it('throws AiGenerateError on missing/disabled', async () => {
-    mockFetch.mockResolvedValueOnce({
-      ok: false,
-      json: async () => ({ ok: false, error: 'AI insights are disabled.', missing: true }),
-    });
-    await expect(generateWidget('test')).rejects.toBeInstanceOf(AiGenerateError);
-  });
-
-  it('sanitizes chartSpec in widget options', async () => {
-    const manyLabels = Array.from({ length: 600 }, (_, i) => `l-${i}`);
-    mockFetch.mockResolvedValueOnce({
-      ok: true,
-      json: async () => ({
-        ok: true,
-        widget: {
-          title: 'Custom',
-          toolName: 'get_report_summary',
-          viz: 'custom-chart',
-          binding: { source: 'audit-tool', toolName: 'get_report_summary' },
-          options: {
-            chartSpec: { type: 'bar', data: { labels: manyLabels, datasets: [] } },
-          },
-        },
-        explanation: 'Chart',
-      }),
-    });
-    const { widget } = await generateWidget('custom chart');
-    expect(widget.options?.chartSpec?.data?.labels).toHaveLength(500);
-  });
-});
diff --git a/web/src/lib/dashboard/ai/generate.ts b/web/src/lib/dashboard/ai/generate.ts
deleted file mode 100644
index 90d5e7f5..00000000
--- a/web/src/lib/dashboard/ai/generate.ts
+++ /dev/null
@@ -1,280 +0,0 @@
-/**
- * Client-side helpers for the Dashboard AI generation API.
- * Calls POST /api/dashboards/ai-generate and validates / sanitizes the response.
- */
-import { tokenize } from '@/lib/dashboard/script/lexer';
-import { Parser } from '@/lib/dashboard/script/parser';
-import { newWidgetId, defaultWidgetLayout } from '@/lib/dashboard/types';
-import type {
-  Widget,
-  WidgetBinding,
-  WidgetOptions,
-  DashboardDoc,
-  VizType,
-  CustomChartSpec,
-} from '@/lib/dashboard/types';
-
-// ---------------------------------------------------------------------------
-// Public types
-// ---------------------------------------------------------------------------
-
-export interface AiScriptResult {
-  measure?: string;
-  transform?: string;
-  chartSpec?: CustomChartSpec | null;
-  explanation: string;
-}
-
-export interface AiWidgetResult {
-  widget: Omit<Widget, 'id' | 'layout'> & { layout?: Widget['layout']; title: string; viz: VizType };
-  explanation: string;
-}
-
-export interface AiDashboardResult {
-  name: string;
-  widgets: (Omit<Widget, 'id' | 'layout'> & { layout?: Widget['layout'] })[];
-  explanation: string;
-}
-
-export interface AiGenerateOptions {
-  mode: 'script' | 'widget' | 'dashboard';
-  prompt: string;
-  toolName?: string;
-  propertyId?: number;
-  reportId?: number | null;
-  /** Current widget binding / options to pass as context for script mode. */
-  current?: { binding?: WidgetBinding; options?: WidgetOptions };
-}
-
-export class AiGenerateError extends Error {
-  constructor(
-    message: string,
-    public readonly missing?: boolean,
-  ) {
-    super(message);
-    this.name = 'AiGenerateError';
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Sanitization
-// ---------------------------------------------------------------------------
-
-/**
- * JSON-round-trip the spec to strip functions / undefined; validate required
- * fields and enforce size caps.
- */
-export function sanitizeChartSpec(raw: unknown): CustomChartSpec {
-  if (raw == null || typeof raw !== 'object') {
-    throw new Error('chartSpec must be an object');
-  }
-  // Round-trip through JSON to drop functions/undefined
-  const spec = JSON.parse(JSON.stringify(raw)) as Record<string, unknown>;
-
-  if (!spec.type || typeof spec.type !== 'string') {
-    throw new Error('chartSpec.type must be a non-empty string');
-  }
-
-  // Cap explicit dataset point counts
-  if (spec.data && typeof spec.data === 'object') {
-    const d = spec.data as { datasets?: { data?: unknown[] }[]; labels?: unknown[] };
-    if (Array.isArray(d.labels) && d.labels.length > 500) {
-      d.labels = d.labels.slice(0, 500);
-    }
-    if (Array.isArray(d.datasets)) {
-      d.datasets = d.datasets.slice(0, 20).map((ds) => ({
-        ...ds,
-        data: Array.isArray(ds.data) ? ds.data.slice(0, 500) : ds.data,
-      }));
-    }
-  }
-
-  // Cap series
-  if (Array.isArray(spec.series)) {
-    spec.series = (spec.series as unknown[]).slice(0, 20);
-  }
-
-  return spec as unknown as CustomChartSpec;
-}
-
-// ---------------------------------------------------------------------------
-// DashScript validation
-// ---------------------------------------------------------------------------
-
-/** Attempt to parse a measure expression; returns an error message or null on success. */
-export function validateMeasure(source: string): string | null {
-  if (!source.trim()) return null;
-  try {
-    const tokens = tokenize(source.trim());
-    new Parser(tokens).parseExpr();
-    return null;
-  } catch (e) {
-    return e instanceof Error ? e.message : String(e);
-  }
-}
-
-/** Attempt to parse a transform pipeline; returns an error message or null on success. */
-export function validateTransform(source: string): string | null {
-  if (!source.trim()) return null;
-  try {
-    const tokens = tokenize(source.trim());
-    new Parser(tokens).parsePipeline();
-    return null;
-  } catch (e) {
-    return e instanceof Error ? e.message : String(e);
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Layout assignment
-// ---------------------------------------------------------------------------
-
-/** Assign concrete bottom-row y positions to a list of widget layout hints. */
-export function assignLayouts(
-  widgets: (Omit<Widget, 'id' | 'layout'> & { layout?: Widget['layout'] })[],
-  bottomY = 0,
-): Widget[] {
-  let currentY = bottomY;
-  let rowMaxH = 0;
-  let rowX = 0;
-
-  return widgets.map((w) => {
-    const viz = w.viz as VizType;
-    const hint = w.layout ?? defaultWidgetLayout(viz);
-    const layout = { ...hint };
-
-    // Replace Infinity y with computed bottom
-    if (!Number.isFinite(layout.y)) {
-      layout.y = currentY;
-    }
-
-    // Ensure the widget fits in the row; wrap if needed
-    if (rowX + layout.w > 12) {
-      currentY += rowMaxH;
-      rowMaxH = 0;
-      rowX = 0;
-      layout.x = 0;
-      layout.y = currentY;
-    } else {
-      layout.x = rowX;
-    }
-
-    rowX += layout.w;
-    rowMaxH = Math.max(rowMaxH, layout.h);
-
-    const id = newWidgetId();
-    return { ...w, id, layout } as Widget;
-  });
-}
-
-// ---------------------------------------------------------------------------
-// API calls
-// ---------------------------------------------------------------------------
-
-async function callAiGenerate(opts: AiGenerateOptions): Promise<Record<string, unknown>> {
-  const res = await fetch('/api/dashboards/ai-generate', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({
-      mode: opts.mode,
-      prompt: opts.prompt,
-      toolName: opts.toolName,
-      propertyId: opts.propertyId,
-      reportId: opts.reportId,
-      current: opts.current,
-    }),
-  });
-  const data = (await res.json()) as Record<string, unknown>;
-  if (!res.ok || data.ok === false) {
-    const msg = String(data.error || 'AI generation failed');
-    const missing = Boolean(data.missing);
-    throw new AiGenerateError(msg, missing);
-  }
-  return data;
-}
-
-/**
- * Generate or improve a DashScript formula (+ optional chartSpec) for the widget being configured.
- */
-export async function generateWidgetScript(
-  prompt: string,
-  opts: Pick<AiGenerateOptions, 'toolName' | 'propertyId' | 'reportId' | 'current'> = {},
-): Promise<AiScriptResult> {
-  const data = await callAiGenerate({ mode: 'script', prompt, ...opts });
-  const measure = typeof data.measure === 'string' ? data.measure : '';
-  const transform = typeof data.transform === 'string' ? data.transform : '';
-  const explanation = typeof data.explanation === 'string' ? data.explanation : '';
-
-  // Validate DashScript
-  const measureErr = validateMeasure(measure);
-  if (measureErr) throw new AiGenerateError(`Invalid measure: ${measureErr}`);
-  const transformErr = validateTransform(transform);
-  if (transformErr) throw new AiGenerateError(`Invalid transform: ${transformErr}`);
-
-  let chartSpec: CustomChartSpec | null = null;
-  if (data.chartSpec) {
-    chartSpec = sanitizeChartSpec(data.chartSpec);
-  }
-
-  return { measure, transform, chartSpec, explanation };
-}
-
-/**
- * Generate a full single widget definition from a natural-language prompt.
- */
-export async function generateWidget(
-  prompt: string,
-  opts: Pick<AiGenerateOptions, 'toolName' | 'propertyId' | 'reportId' | 'current'> = {},
-  bottomY = 0,
-): Promise<{ widget: Widget; explanation: string }> {
-  const data = await callAiGenerate({ mode: 'widget', prompt, ...opts });
-
-  const raw = data.widget as Omit<Widget, 'id' | 'layout'> & { layout?: Widget['layout']; title: string; viz: VizType };
-  if (!raw || typeof raw !== 'object') {
-    throw new AiGenerateError('AI returned no widget definition');
-  }
-
-  // Sanitize chartSpec if present in options
-  if (raw.options?.chartSpec) {
-    raw.options = {
-      ...raw.options,
-      chartSpec: sanitizeChartSpec(raw.options.chartSpec),
-    };
-  }
-
-  const [widget] = assignLayouts([raw], bottomY);
-  widget.options = { ...(widget.options ?? {}), aiPrompt: prompt };
-
-  return { widget, explanation: String(data.explanation ?? '') };
-}
-
-/**
- * Generate a full dashboard (name + widgets) from a natural-language prompt.
- */
-export async function generateDashboard(
-  prompt: string,
-  opts: Pick<AiGenerateOptions, 'propertyId' | 'reportId'> = {},
-): Promise<{ name: string; doc: DashboardDoc; explanation: string }> {
-  const data = await callAiGenerate({ mode: 'dashboard', prompt, ...opts });
-
-  const name = String(data.name || 'AI Dashboard');
-  const rawWidgets = (
-    Array.isArray(data.widgets) ? data.widgets : []
-  ) as (Omit<Widget, 'id' | 'layout'> & { layout?: Widget['layout'] })[];
-
-  // Sanitize any chartSpecs
-  const sanitized = rawWidgets.map((w) => {
-    if (w.options?.chartSpec) {
-      return {
-        ...w,
-        options: { ...w.options, chartSpec: sanitizeChartSpec(w.options.chartSpec) },
-      };
-    }
-    return w;
-  });
-
-  const widgets = assignLayouts(sanitized, 0);
-  const doc: DashboardDoc = { version: 1, widgets };
-
-  return { name, doc, explanation: String(data.explanation ?? '') };
-}
diff --git a/web/src/lib/dashboard/builder/AiAssistModal.tsx b/web/src/lib/dashboard/builder/AiAssistModal.tsx
deleted file mode 100644
index d4dcae1a..00000000
--- a/web/src/lib/dashboard/builder/AiAssistModal.tsx
+++ /dev/null
@@ -1,301 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { X, Sparkles, AlertTriangle, ChevronDown, ChevronUp } from 'lucide-react';
-import {
-  generateWidgetScript,
-  generateWidget,
-  generateDashboard,
-  AiGenerateError,
-  type AiScriptResult,
-} from '@/lib/dashboard/ai/generate';
-import type { Widget, DashboardDoc, WidgetBinding, WidgetOptions } from '@/lib/dashboard/types';
-
-// ──────────────────────────────────────────────────────────────────────────────
-// Types
-// ──────────────────────────────────────────────────────────────────────────────
-
-type AiMode = 'script' | 'widget' | 'dashboard';
-
-interface AiAssistModalBaseProps {
-  propertyId?: number;
-  reportId?: number | null;
-  onClose: () => void;
-}
-
-interface ScriptModeProps extends AiAssistModalBaseProps {
-  mode: 'script';
-  toolName: string;
-  currentBinding: WidgetBinding;
-  currentOptions: WidgetOptions;
-  onApplyScript: (result: AiScriptResult) => void;
-}
-
-interface WidgetModeProps extends AiAssistModalBaseProps {
-  mode: 'widget';
-  bottomY?: number;
-  onAddWidget: (widget: Widget) => void;
-}
-
-interface DashboardModeProps extends AiAssistModalBaseProps {
-  mode: 'dashboard';
-  onCreateDashboard: (name: string, doc: DashboardDoc) => void;
-}
-
-export type AiAssistModalProps = ScriptModeProps | WidgetModeProps | DashboardModeProps;
-
-// ──────────────────────────────────────────────────────────────────────────────
-// Component
-// ──────────────────────────────────────────────────────────────────────────────
-
-const MODE_LABELS: Record<AiMode, string> = {
-  script: 'Improve script',
-  widget: 'Generate widget',
-  dashboard: 'Generate dashboard',
-};
-
-const PLACEHOLDERS: Record<AiMode, string> = {
-  script: 'e.g. "Show me the ratio of 4xx to total URLs as a percentage" or "Only count critical issues"',
-  widget: 'e.g. "Show top 10 broken links by page" or "KPI card for overall health score"',
-  dashboard: 'e.g. "Performance-focused dashboard with Core Web Vitals and Lighthouse scores"',
-};
-
-export default function AiAssistModal(props: AiAssistModalProps) {
-  const [prompt, setPrompt] = useState('');
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [explanation, setExplanation] = useState<string | null>(null);
-  const [showExplanation, setShowExplanation] = useState(true);
-  const [pending, setPending] = useState<{
-    script?: AiScriptResult;
-    widget?: Widget;
-    dashboard?: { name: string; doc: DashboardDoc };
-  } | null>(null);
-
-  const { mode, propertyId, reportId, onClose } = props;
-
-  const handleGenerate = async () => {
-    if (!prompt.trim()) return;
-    setLoading(true);
-    setError(null);
-    setPending(null);
-    setExplanation(null);
-
-    try {
-      if (mode === 'script') {
-        const sp = props as ScriptModeProps;
-        const result = await generateWidgetScript(prompt, {
-          toolName: sp.toolName,
-          propertyId,
-          reportId,
-          current: { binding: sp.currentBinding, options: sp.currentOptions },
-        });
-        setPending({ script: result });
-        setExplanation(result.explanation);
-      } else if (mode === 'widget') {
-        const wp = props as WidgetModeProps;
-        const { widget, explanation: expl } = await generateWidget(
-          prompt,
-          { propertyId, reportId },
-          wp.bottomY ?? 0,
-        );
-        setPending({ widget });
-        setExplanation(expl);
-      } else {
-        const { name, doc, explanation: expl } = await generateDashboard(
-          prompt,
-          { propertyId, reportId },
-        );
-        setPending({ dashboard: { name, doc } });
-        setExplanation(expl);
-      }
-    } catch (e) {
-      if (e instanceof AiGenerateError && e.missing) {
-        setError('AI insights are disabled. Enable them in Settings → AI insights.');
-      } else {
-        setError(e instanceof Error ? e.message : 'Generation failed');
-      }
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleApply = () => {
-    if (!pending) return;
-    if (mode === 'script' && pending.script) {
-      (props as ScriptModeProps).onApplyScript(pending.script);
-      onClose();
-    } else if (mode === 'widget' && pending.widget) {
-      (props as WidgetModeProps).onAddWidget(pending.widget);
-      onClose();
-    } else if (mode === 'dashboard' && pending.dashboard) {
-      const dp = props as DashboardModeProps;
-      dp.onCreateDashboard(pending.dashboard.name, pending.dashboard.doc);
-      onClose();
-    }
-  };
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
-      <div className="bg-brand-900 border border-default rounded-xl shadow-2xl w-full max-w-lg flex flex-col max-h-[85vh]">
-        {/* Header */}
-        <div className="flex items-center justify-between px-4 py-3 border-b border-default shrink-0">
-          <div className="flex items-center gap-2">
-            <Sparkles className="h-4 w-4 text-blue-400" />
-            <h2 className="font-bold text-bright text-sm">{MODE_LABELS[mode]}</h2>
-          </div>
-          <button
-            onClick={onClose}
-            className="p-1 rounded hover:bg-white/10 text-muted-foreground hover:text-bright transition-colors"
-          >
-            <X className="h-4 w-4" />
-          </button>
-        </div>
-
-        {/* Body */}
-        <div className="flex-1 overflow-y-auto p-4 space-y-4">
-          <div>
-            <label className="block text-xs font-semibold text-muted-foreground mb-1">
-              What do you want?
-            </label>
-            <textarea
-              value={prompt}
-              onChange={(e) => setPrompt(e.target.value)}
-              rows={3}
-              placeholder={PLACEHOLDERS[mode]}
-              className="w-full px-3 py-2 text-sm bg-brand-800 border border-default rounded-lg text-bright placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-blue-500 resize-y"
-              onKeyDown={(e) => {
-                if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) void handleGenerate();
-              }}
-            />
-            <p className="text-[10px] text-muted-foreground mt-1">⌘↵ to generate</p>
-          </div>
-
-          {error && (
-            <div className="flex items-start gap-2 px-3 py-2 rounded-lg bg-red-500/10 border border-red-500/30 text-sm text-red-400">
-              <AlertTriangle className="h-4 w-4 shrink-0 mt-0.5" />
-              <span>{error}</span>
-            </div>
-          )}
-
-          {explanation && (
-            <div className="rounded-lg border border-blue-500/20 bg-blue-500/5 overflow-hidden">
-              <button
-                type="button"
-                onClick={() => setShowExplanation((v) => !v)}
-                className="flex w-full items-center justify-between px-3 py-2 text-xs font-semibold text-blue-400 hover:text-blue-300 transition-colors"
-              >
-                <span>AI explanation</span>
-                {showExplanation ? <ChevronUp className="h-3.5 w-3.5" /> : <ChevronDown className="h-3.5 w-3.5" />}
-              </button>
-              {showExplanation && (
-                <p className="px-3 pb-3 text-xs text-muted-foreground leading-relaxed">{explanation}</p>
-              )}
-            </div>
-          )}
-
-          {pending?.script && (
-            <ScriptPreview result={pending.script} />
-          )}
-
-          {pending?.widget && (
-            <WidgetPreview widget={pending.widget} />
-          )}
-
-          {pending?.dashboard && (
-            <DashboardPreview name={pending.dashboard.name} doc={pending.dashboard.doc} />
-          )}
-        </div>
-
-        {/* Footer */}
-        <div className="px-4 py-3 border-t border-default shrink-0 flex gap-2">
-          <button
-            onClick={() => void handleGenerate()}
-            disabled={loading || !prompt.trim()}
-            className="flex items-center justify-center gap-2 flex-1 py-2 rounded-lg bg-blue-600 hover:bg-blue-500 disabled:opacity-50 disabled:cursor-not-allowed text-white text-sm font-medium transition-colors"
-          >
-            {loading ? (
-              <><span className="animate-spin">⟳</span> Generating…</>
-            ) : (
-              <><Sparkles className="h-3.5 w-3.5" /> Generate</>
-            )}
-          </button>
-          {pending && (
-            <button
-              onClick={handleApply}
-              className="flex-1 py-2 rounded-lg bg-green-600 hover:bg-green-500 text-white text-sm font-medium transition-colors"
-            >
-              Apply
-            </button>
-          )}
-          <button
-            onClick={onClose}
-            className="flex-1 py-2 rounded-lg border border-default hover:bg-white/5 text-sm text-foreground transition-colors"
-          >
-            Cancel
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// ──────────────────────────────────────────────────────────────────────────────
-// Previews
-// ──────────────────────────────────────────────────────────────────────────────
-
-function ScriptPreview({ result }: { result: AiScriptResult }) {
-  return (
-    <div className="space-y-2">
-      {result.measure && (
-        <div>
-          <p className="text-[10px] font-semibold text-muted-foreground mb-0.5">Measure</p>
-          <pre className="text-xs font-mono bg-brand-950/80 rounded px-2 py-1.5 text-blue-300 whitespace-pre-wrap overflow-x-auto">{result.measure}</pre>
-        </div>
-      )}
-      {result.transform && (
-        <div>
-          <p className="text-[10px] font-semibold text-muted-foreground mb-0.5">Transform</p>
-          <pre className="text-xs font-mono bg-brand-950/80 rounded px-2 py-1.5 text-blue-300 whitespace-pre-wrap overflow-x-auto">{result.transform}</pre>
-        </div>
-      )}
-      {result.chartSpec && (
-        <div>
-          <p className="text-[10px] font-semibold text-muted-foreground mb-0.5">Chart spec (type: {result.chartSpec.type})</p>
-          <pre className="text-[10px] font-mono bg-brand-950/80 rounded px-2 py-1.5 text-muted-foreground whitespace-pre-wrap overflow-x-auto max-h-32">{JSON.stringify(result.chartSpec, null, 2)}</pre>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function WidgetPreview({ widget }: { widget: Widget }) {
-  return (
-    <div className="rounded-lg border border-default bg-brand-800/40 px-3 py-2 space-y-1">
-      <p className="text-xs font-semibold text-bright">{widget.title}</p>
-      <p className="text-[10px] text-muted-foreground">
-        <span className="text-blue-400">{widget.viz}</span> · {widget.binding.toolName}
-      </p>
-      {widget.binding.valueField && (
-        <p className="text-[10px] text-muted-foreground">Value: {widget.binding.valueField}</p>
-      )}
-    </div>
-  );
-}
-
-function DashboardPreview({ name, doc }: { name: string; doc: DashboardDoc }) {
-  return (
-    <div className="rounded-lg border border-default bg-brand-800/40 px-3 py-2 space-y-2">
-      <p className="text-xs font-semibold text-bright">{name}</p>
-      <p className="text-[10px] text-muted-foreground">{doc.widgets.length} widget{doc.widgets.length !== 1 ? 's' : ''}</p>
-      <div className="space-y-1 max-h-48 overflow-y-auto">
-        {doc.widgets.map((w) => (
-          <div key={w.id} className="flex items-center gap-2 text-[10px] text-muted-foreground">
-            <span className="text-blue-400 shrink-0">{w.viz}</span>
-            <span className="truncate">{w.title}</span>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
diff --git a/web/src/lib/dashboard/builder/ConfigPanel.tsx b/web/src/lib/dashboard/builder/ConfigPanel.tsx
new file mode 100644
index 00000000..31a66ee4
--- /dev/null
+++ b/web/src/lib/dashboard/builder/ConfigPanel.tsx
@@ -0,0 +1,295 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import {
+  DndContext,
+  DragOverlay,
+  PointerSensor,
+  KeyboardSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+  type DragStartEvent,
+} from '@dnd-kit/core';
+import { X, Trash2, Search } from 'lucide-react';
+import { useDatasetRows } from '@/lib/dashboard/hooks/useWidgetQuery';
+import { getDataset } from '@/lib/dashboard/engine/datasets';
+import { dotGet } from '@/lib/dashboard/engine/coerce';
+import { measureLabel } from '@/lib/dashboard/engine/runQuery';
+import {
+  withCategory, withSeries, withMeasureAdded, withMeasureRemoved, withMeasureAgg,
+  withFilterAdded, withFilterRemoved, withFilterUpdated, withSort, withTopN, defaultFilter,
+} from '@/lib/dashboard/builder/specEdits';
+import { FieldChip } from '@/lib/dashboard/builder/FieldChip';
+import { Shelf } from '@/lib/dashboard/builder/Shelf';
+import { ShelfPill } from '@/lib/dashboard/builder/ShelfPill';
+import { FilterEditor } from '@/lib/dashboard/builder/FilterEditor';
+import { VizGallery } from '@/lib/dashboard/builder/VizGallery';
+import { FormatPanel } from '@/lib/dashboard/builder/FormatPanel';
+import { DatasetPicker } from '@/lib/dashboard/builder/DatasetPicker';
+import type { Widget } from '@/lib/dashboard/engine/doc';
+import type { FieldDef, VizType } from '@/lib/dashboard/engine/types';
+
+interface ConfigPanelProps {
+  widget: Widget;
+  onChange: (w: Widget) => void;
+  onClose: () => void;
+  onDelete: () => void;
+}
+
+export function ConfigPanel({ widget, onChange, onClose, onDelete }: ConfigPanelProps) {
+  const { fields, rows, def } = useDatasetRows(widget.datasetId);
+  const [tab, setTab] = useState<'data' | 'viz' | 'format'>('data');
+  const [search, setSearch] = useState('');
+  const [active, setActive] = useState<FieldDef | null>(null);
+
+  const byKey = useMemo(() => Object.fromEntries(fields.map((f) => [f.key, f])), [fields]);
+  const spec = widget.query;
+
+  const distinctByField = useMemo(() => {
+    const out: Record<string, string[]> = {};
+    for (const f of fields) {
+      if (f.role !== 'dimension') continue;
+      const set = new Set<string>();
+      for (const r of rows) {
+        const v = dotGet(r, f.key);
+        if (v != null && v !== '') set.add(String(v));
+        if (set.size > 500) break;
+      }
+      out[f.key] = [...set].sort();
+    }
+    return out;
+  }, [fields, rows]);
+
+  const q = search.trim().toLowerCase();
+  const match = (f: FieldDef) => !q || f.label.toLowerCase().includes(q) || f.key.toLowerCase().includes(q);
+  const dims = fields.filter((f) => f.role === 'dimension' && match(f));
+  const meas = fields.filter((f) => f.role === 'measure' && match(f));
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(KeyboardSensor),
+  );
+
+  const setQuery = (q2: Widget['query']) => onChange({ ...widget, query: q2 });
+
+  const dropField = (field: FieldDef, shelf: string) => {
+    if (shelf === 'values' && field.role === 'measure') {
+      setQuery(withMeasureAdded(spec, { field: field.key, agg: field.defaultAgg ?? 'sum', label: field.label, format: field.format }));
+    } else if (shelf === 'category' && field.role === 'dimension') {
+      setQuery(withCategory(spec, field.key));
+    } else if (shelf === 'legend' && field.role === 'dimension') {
+      setQuery(withSeries(spec, field.key));
+    } else if (shelf === 'filters') {
+      setQuery(withFilterAdded(spec, defaultFilter(field.key, field.role)));
+    }
+  };
+
+  const quickAdd = (field: FieldDef) => {
+    if (field.role === 'measure') return dropField(field, 'values');
+    if (!spec.groupBy) return dropField(field, 'category');
+    if (!spec.series) return dropField(field, 'legend');
+    return dropField(field, 'filters');
+  };
+
+  const onDragStart = (e: DragStartEvent) => setActive((e.active.data.current as { field?: FieldDef })?.field ?? null);
+  const onDragEnd = (e: DragEndEvent) => {
+    setActive(null);
+    const overId = e.over?.id?.toString();
+    const field = (e.active.data.current as { field?: FieldDef })?.field;
+    if (!overId || !field || !overId.startsWith('shelf:')) return;
+    dropField(field, overId.slice('shelf:'.length));
+  };
+
+  const changeDataset = (id: string) => {
+    const d = getDataset(id);
+    onChange({
+      ...widget,
+      datasetId: id,
+      query: { ...(d?.defaultSpec ?? { measures: [] }) },
+      viz: d?.viz[0] ?? widget.viz,
+    });
+  };
+
+  const measureLabels = (spec.measures ?? []).map(measureLabel);
+
+  return (
+    <div className="w-[340px] shrink-0 border-l border-default bg-brand-900 flex flex-col h-full">
+      <div className="flex items-center justify-between px-3 py-2.5 border-b border-default shrink-0">
+        <h2 className="font-bold text-bright text-sm truncate">{widget.title || def?.label || 'Widget'}</h2>
+        <button onClick={onClose} className="p-1 rounded hover:bg-white/10 text-muted-foreground hover:text-bright">
+          <X className="h-4 w-4" />
+        </button>
+      </div>
+
+      <div className="flex border-b border-default shrink-0 text-xs">
+        {(['data', 'viz', 'format'] as const).map((t) => (
+          <button
+            key={t}
+            onClick={() => setTab(t)}
+            className={`flex-1 py-2 font-medium capitalize transition-colors ${
+              tab === t ? 'text-blue-400 border-b-2 border-blue-500 -mb-px' : 'text-muted-foreground hover:text-bright'
+            }`}
+          >
+            {t === 'viz' ? 'Visual' : t}
+          </button>
+        ))}
+      </div>
+
+      <div className="flex-1 overflow-y-auto p-3 space-y-3">
+        {tab === 'data' && (
+          <DndContext sensors={sensors} onDragStart={onDragStart} onDragEnd={onDragEnd}>
+            <DatasetPicker value={widget.datasetId} onChange={changeDataset} />
+
+            <div>
+              <div className="relative mb-1.5">
+                <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3 w-3 text-muted-foreground" />
+                <input
+                  value={search}
+                  onChange={(e) => setSearch(e.target.value)}
+                  placeholder="Search fields…"
+                  className="w-full pl-7 pr-2 py-1 text-xs bg-brand-800 border border-default rounded-md text-bright focus:outline-none"
+                />
+              </div>
+              <div className="max-h-40 overflow-y-auto space-y-1 pr-1">
+                {dims.length > 0 && <p className="text-[9px] uppercase tracking-wide text-blue-400/80 font-bold">Dimensions</p>}
+                {dims.map((f) => <FieldChip key={f.key} field={f} onQuickAdd={quickAdd} />)}
+                {meas.length > 0 && <p className="text-[9px] uppercase tracking-wide text-emerald-400/80 font-bold mt-1.5">Measures</p>}
+                {meas.map((f) => <FieldChip key={f.key} field={f} onQuickAdd={quickAdd} />)}
+              </div>
+            </div>
+
+            <Shelf id="category" label="Category (X / group)" accepts={['dimension']} empty="Drag a dimension" hasItems={!!spec.groupBy}>
+              {spec.groupBy && (
+                <ShelfPill label={byKey[spec.groupBy]?.label ?? spec.groupBy} onRemove={() => setQuery(withCategory(spec, undefined))} />
+              )}
+            </Shelf>
+
+            <Shelf id="values" label="Values (measures)" accepts={['measure']} empty="Drag a measure" hasItems={(spec.measures ?? []).length > 0}>
+              {(spec.measures ?? []).map((m, i) => (
+                <ShelfPill
+                  key={`${m.field}-${i}`}
+                  label={byKey[m.field]?.label ?? m.label ?? m.field}
+                  agg={m.agg}
+                  onAgg={(a) => setQuery(withMeasureAgg(spec, i, a))}
+                  onRemove={() => setQuery(withMeasureRemoved(spec, i))}
+                />
+              ))}
+            </Shelf>
+
+            <Shelf id="legend" label="Legend / series (split)" accepts={['dimension']} empty="Optional dimension" hasItems={!!spec.series}>
+              {spec.series && (
+                <ShelfPill label={byKey[spec.series]?.label ?? spec.series} onRemove={() => setQuery(withSeries(spec, undefined))} />
+              )}
+            </Shelf>
+
+            <Shelf id="filters" label="Filters" accepts={['dimension', 'measure']} empty="Drag any field" hasItems={(spec.filters ?? []).length > 0}>
+              <div className="w-full space-y-1.5">
+                {(spec.filters ?? []).map((f, i) => (
+                  <FilterEditor
+                    key={`${f.field}-${i}`}
+                    filter={f}
+                    field={byKey[f.field]}
+                    options={distinctByField[f.field] ?? []}
+                    onChange={(patch) => setQuery(withFilterUpdated(spec, i, patch))}
+                    onRemove={() => setQuery(withFilterRemoved(spec, i))}
+                  />
+                ))}
+              </div>
+            </Shelf>
+
+            <div className="grid grid-cols-2 gap-2 pt-1">
+              <div>
+                <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground mb-1">Sort by</label>
+                <select
+                  value={spec.sort?.by ?? ''}
+                  onChange={(e) => (e.target.value ? setQuery(withSort(spec, e.target.value, spec.sort?.dir ?? 'desc')) : setQuery({ ...spec, sort: undefined }))}
+                  className="w-full px-2 py-1.5 text-xs bg-brand-800 border border-default rounded-lg text-bright focus:outline-none"
+                >
+                  <option value="">Data order</option>
+                  <option value="category">Category</option>
+                  {measureLabels.map((l) => <option key={l} value={l}>{l}</option>)}
+                </select>
+              </div>
+              <div>
+                <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground mb-1">Direction</label>
+                <select
+                  value={spec.sort?.dir ?? 'desc'}
+                  disabled={!spec.sort}
+                  onChange={(e) => spec.sort && setQuery(withSort(spec, spec.sort.by, e.target.value as 'asc' | 'desc'))}
+                  className="w-full px-2 py-1.5 text-xs bg-brand-800 border border-default rounded-lg text-bright focus:outline-none disabled:opacity-40"
+                >
+                  <option value="desc">Descending</option>
+                  <option value="asc">Ascending</option>
+                </select>
+              </div>
+              <div>
+                <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground mb-1">Top N</label>
+                <input
+                  type="number"
+                  min={0}
+                  value={spec.topN?.n ?? ''}
+                  placeholder="all"
+                  onChange={(e) => setQuery(withTopN(spec, e.target.value ? Number(e.target.value) : undefined, spec.topN?.other ?? false))}
+                  className="w-full px-2 py-1.5 text-xs bg-brand-800 border border-default rounded-lg text-bright focus:outline-none"
+                />
+              </div>
+              <label className="flex items-center gap-1.5 text-xs text-foreground self-end pb-1.5">
+                <input
+                  type="checkbox"
+                  checked={spec.topN?.other ?? false}
+                  disabled={!spec.topN}
+                  onChange={(e) => spec.topN && setQuery(withTopN(spec, spec.topN.n, e.target.checked))}
+                />
+                Group “Other”
+              </label>
+            </div>
+
+            <div>
+              <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground mb-1">Drill-down path</label>
+              <div className="flex flex-wrap gap-1">
+                {fields.filter((f) => f.role === 'dimension').map((f) => {
+                  const dd = widget.drillDimensions ?? [];
+                  const idx = dd.indexOf(f.key);
+                  const on = idx >= 0;
+                  return (
+                    <button
+                      key={f.key}
+                      onClick={() => {
+                        const next = on ? dd.filter((k) => k !== f.key) : [...dd, f.key];
+                        onChange({ ...widget, drillDimensions: next.length ? next : undefined });
+                      }}
+                      className={`px-1.5 py-0.5 rounded text-[11px] border transition-colors ${
+                        on ? 'border-blue-500 bg-blue-500/10 text-blue-300' : 'border-default text-muted-foreground hover:text-bright'
+                      }`}
+                    >
+                      {on ? `${idx + 1}. ${f.label}` : f.label}
+                    </button>
+                  );
+                })}
+              </div>
+              <p className="text-[10px] text-muted-foreground mt-1">Click dimensions in order — clicking a bar drills to the next level.</p>
+            </div>
+
+            <DragOverlay>{active && <FieldChip field={active} overlay />}</DragOverlay>
+          </DndContext>
+        )}
+
+        {tab === 'viz' && (
+          <VizGallery value={widget.viz} spec={spec} preferred={def?.viz} onChange={(v: VizType) => onChange({ ...widget, viz: v })} />
+        )}
+
+        {tab === 'format' && <FormatPanel widget={widget} onChange={onChange} />}
+      </div>
+
+      <div className="px-3 py-2.5 border-t border-default shrink-0">
+        <button
+          onClick={onDelete}
+          className="w-full flex items-center justify-center gap-1.5 py-2 rounded-lg border border-red-500/30 hover:bg-red-500/10 text-red-400 text-xs font-medium transition-colors"
+        >
+          <Trash2 className="h-3.5 w-3.5" /> Delete widget
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/web/src/lib/dashboard/builder/DashboardGrid.tsx b/web/src/lib/dashboard/builder/DashboardGrid.tsx
deleted file mode 100644
index 66c05ad7..00000000
--- a/web/src/lib/dashboard/builder/DashboardGrid.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-'use client';
-
-import { useMemo } from 'react';
-import GridLayout from 'react-grid-layout/legacy';
-import 'react-grid-layout/css/styles.css';
-import 'react-resizable/css/styles.css';
-import type { Layout, LayoutItem } from 'react-grid-layout';
-import type { Widget, DashboardFilter, CrossFilter } from '@/lib/dashboard/types';
-import DashboardWidget from '@/lib/dashboard/builder/DashboardWidget';
-
-interface DashboardGridProps {
-  widgets: Widget[];
-  propertyId: number;
-  reportId: number | null;
-  isEditing: boolean;
-  containerWidth: number;
-  activeFilters?: (DashboardFilter | CrossFilter)[];
-  onLayoutChange: (layout: Layout) => void;
-  onRemoveWidget: (id: string) => void;
-  onEditWidget: (id: string) => void;
-  onCrossFilter?: (field: string, value: string, sourceWidgetId: string) => void;
-  onDataReady?: (widgetId: string, rows: Record<string, unknown>[]) => void;
-}
-
-const COLS = 12;
-const ROW_HEIGHT = 80;
-
-export default function DashboardGrid({
-  widgets,
-  propertyId,
-  reportId,
-  isEditing,
-  containerWidth,
-  activeFilters,
-  onLayoutChange,
-  onRemoveWidget,
-  onEditWidget,
-  onCrossFilter,
-  onDataReady,
-}: DashboardGridProps) {
-  const layout = useMemo<LayoutItem[]>(
-    () =>
-      widgets.map((w) => ({
-        i: w.id,
-        x: w.layout.x,
-        y: w.layout.y,
-        w: w.layout.w,
-        h: w.layout.h,
-        minW: 2,
-        minH: 2,
-      })),
-    [widgets],
-  );
-
-  if (!widgets.length) {
-    return (
-      <div className="flex flex-col items-center justify-center min-h-[300px] border-2 border-dashed border-default rounded-xl text-muted-foreground text-sm gap-2">
-        <p className="font-medium">This dashboard is empty.</p>
-        {isEditing ? (
-          <p className="text-xs">Click <strong>Add widget</strong> to get started.</p>
-        ) : (
-          <p className="text-xs">Switch to <strong>Edit mode</strong> to add widgets.</p>
-        )}
-      </div>
-    );
-  }
-
-  return (
-    <GridLayout
-      className="layout"
-      layout={layout}
-      cols={COLS}
-      rowHeight={ROW_HEIGHT}
-      width={containerWidth}
-      isDraggable={isEditing}
-      isResizable={isEditing}
-      draggableHandle=".drag-handle"
-      onDragStop={onLayoutChange}
-      onResizeStop={onLayoutChange}
-      margin={[12, 12]}
-      containerPadding={[0, 0]}
-      resizeHandles={['se', 's', 'e']}
-    >
-      {widgets.map((widget) => (
-        <div key={widget.id} style={{ overflow: 'hidden' }}>
-          <DashboardWidget
-            widget={widget}
-            propertyId={propertyId}
-            reportId={reportId}
-            isEditing={isEditing}
-            onRemove={onRemoveWidget}
-            onEdit={onEditWidget}
-            activeFilters={activeFilters}
-            onCrossFilter={onCrossFilter ? (field, value) => onCrossFilter(field, value, widget.id) : undefined}
-            onDataReady={onDataReady}
-          />
-        </div>
-      ))}
-    </GridLayout>
-  );
-}
diff --git a/web/src/lib/dashboard/builder/DashboardSwitcher.tsx b/web/src/lib/dashboard/builder/DashboardSwitcher.tsx
deleted file mode 100644
index 9e687dfa..00000000
--- a/web/src/lib/dashboard/builder/DashboardSwitcher.tsx
+++ /dev/null
@@ -1,177 +0,0 @@
-'use client';
-
-import { useState, useEffect, useRef } from 'react';
-import { Plus, Check, Trash2, Star, ChevronDown, LayoutTemplate } from 'lucide-react';
-import type { DashboardRow } from '@/server/dashboardsDb';
-import { DASHBOARD_PRESETS } from '@/lib/dashboard/presets/presets';
-
-interface DashboardSwitcherProps {
-  dashboards: DashboardRow[];
-  activeDashboardId: number | null;
-  onSelect: (id: number) => void;
-  onCreate: (name: string) => void;
-  onCreateFromPreset: (presetId: string) => void;
-  onBrowsePresets: () => void;
-  onDelete: (id: number) => void;
-  onSetDefault: (id: number) => void;
-}
-
-export default function DashboardSwitcher({
-  dashboards,
-  activeDashboardId,
-  onSelect,
-  onCreate,
-  onCreateFromPreset,
-  onBrowsePresets,
-  onDelete,
-  onSetDefault,
-}: DashboardSwitcherProps) {
-  const [open, setOpen] = useState(false);
-  const [creating, setCreating] = useState(false);
-  const [newName, setNewName] = useState('');
-  const rootRef = useRef<HTMLDivElement>(null);
-
-  // Close dropdown when clicking outside
-  useEffect(() => {
-    if (!open) return;
-    const handler = (e: MouseEvent) => {
-      if (rootRef.current && !rootRef.current.contains(e.target as Node)) {
-        setOpen(false);
-        setCreating(false);
-      }
-    };
-    document.addEventListener('mousedown', handler);
-    return () => document.removeEventListener('mousedown', handler);
-  }, [open]);
-
-  const active = dashboards.find((d) => d.id === activeDashboardId);
-
-  const handleCreate = () => {
-    const name = newName.trim() || 'Untitled dashboard';
-    onCreate(name);
-    setNewName('');
-    setCreating(false);
-    setOpen(false);
-  };
-
-  return (
-    <div ref={rootRef} className="relative">
-      <button
-        onClick={() => setOpen((o) => !o)}
-        className="flex items-center gap-2 px-3 py-1.5 rounded-lg border border-default hover:bg-white/5 text-sm text-bright transition-colors min-w-[180px] max-w-xs"
-      >
-        <span className="truncate flex-1 text-left">
-          {active ? active.name : 'Select dashboard'}
-        </span>
-        {active?.isDefault && <Star className="h-3 w-3 shrink-0 text-yellow-400 fill-yellow-400" />}
-        <ChevronDown className={`h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform ${open ? 'rotate-180' : ''}`} />
-      </button>
-
-      {open && (
-        <div className="absolute left-0 top-full mt-1 w-72 bg-brand-900 border border-default rounded-xl shadow-2xl z-40 overflow-hidden">
-          {dashboards.length === 0 ? (
-            <p className="text-xs text-muted-foreground px-3 py-2">No dashboards yet.</p>
-          ) : (
-            <ul className="py-1 max-h-56 overflow-y-auto">
-              {dashboards.map((d) => (
-                <li
-                  key={d.id}
-                  className={`flex items-center gap-2 px-3 py-2 hover:bg-white/5 transition-colors group ${
-                    d.id === activeDashboardId ? 'bg-blue-500/10' : ''
-                  }`}
-                >
-                  <button
-                    className="flex-1 text-left text-sm text-bright truncate"
-                    onClick={() => { onSelect(d.id); setOpen(false); }}
-                  >
-                    {d.name}
-                  </button>
-                  {d.id === activeDashboardId && (
-                    <Check className="h-3.5 w-3.5 text-blue-400 shrink-0" />
-                  )}
-                  {d.isDefault && (
-                    <Star className="h-3 w-3 text-yellow-400 fill-yellow-400 shrink-0" />
-                  )}
-                  <div className="hidden group-hover:flex items-center gap-0.5 shrink-0">
-                    {!d.isDefault && (
-                      <button
-                        title="Set as default"
-                        onClick={(e) => { e.stopPropagation(); onSetDefault(d.id); }}
-                        className="p-0.5 rounded hover:bg-yellow-400/20 text-muted-foreground hover:text-yellow-400 transition-colors"
-                      >
-                        <Star className="h-3 w-3" />
-                      </button>
-                    )}
-                    <button
-                      title="Delete dashboard"
-                      onClick={(e) => { e.stopPropagation(); onDelete(d.id); }}
-                      className="p-0.5 rounded hover:bg-red-500/20 text-muted-foreground hover:text-red-400 transition-colors"
-                    >
-                      <Trash2 className="h-3 w-3" />
-                    </button>
-                  </div>
-                </li>
-              ))}
-            </ul>
-          )}
-
-          <div className="border-t border-default p-2 space-y-1">
-            <button
-              onClick={() => { onBrowsePresets(); setOpen(false); }}
-              className="flex items-center gap-1.5 w-full px-2 py-1.5 rounded-md hover:bg-white/5 text-sm text-muted-foreground hover:text-bright transition-colors"
-            >
-              <LayoutTemplate className="h-3.5 w-3.5" />
-              Browse templates…
-            </button>
-
-            {dashboards.length === 0 && (
-              <div className="pt-1 space-y-1">
-                <p className="px-2 text-[10px] uppercase tracking-wider font-bold text-muted-foreground">
-                  Quick start
-                </p>
-                {DASHBOARD_PRESETS.slice(0, 3).map((preset) => (
-                  <button
-                    key={preset.id}
-                    onClick={() => { onCreateFromPreset(preset.id); setOpen(false); }}
-                    className="w-full text-left px-2 py-1.5 rounded-md hover:bg-white/5 transition-colors"
-                  >
-                    <p className="text-sm text-bright truncate">{preset.name}</p>
-                    <p className="text-[11px] text-muted-foreground truncate">{preset.tagline}</p>
-                  </button>
-                ))}
-              </div>
-            )}
-
-            {creating ? (
-              <div className="flex gap-2">
-                <input
-                  autoFocus
-                  type="text"
-                  value={newName}
-                  onChange={(e) => setNewName(e.target.value)}
-                  onKeyDown={(e) => { if (e.key === 'Enter') handleCreate(); if (e.key === 'Escape') setCreating(false); }}
-                  placeholder="Dashboard name…"
-                  className="flex-1 px-2 py-1 text-sm bg-brand-800 border border-default rounded-md text-bright focus:outline-none focus:ring-1 focus:ring-blue-500"
-                />
-                <button
-                  onClick={handleCreate}
-                  className="px-2.5 py-1 rounded-md bg-blue-600 hover:bg-blue-500 text-white text-xs font-medium transition-colors"
-                >
-                  Create
-                </button>
-              </div>
-            ) : (
-              <button
-                onClick={() => setCreating(true)}
-                className="flex items-center gap-1.5 w-full px-2 py-1.5 rounded-md hover:bg-white/5 text-sm text-muted-foreground hover:text-bright transition-colors"
-              >
-                <Plus className="h-3.5 w-3.5" />
-                New dashboard
-              </button>
-            )}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/web/src/lib/dashboard/builder/DashboardWidget.tsx b/web/src/lib/dashboard/builder/DashboardWidget.tsx
deleted file mode 100644
index a7641280..00000000
--- a/web/src/lib/dashboard/builder/DashboardWidget.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import type { Widget, DashboardFilter, CrossFilter } from '@/lib/dashboard/types';
-import { fetchWidgetData, type WidgetData } from '@/lib/dashboard/data/fetchWidgetData';
-import { catalogEntry } from '@/lib/dashboard/catalog/catalog';
-import { renderViz, isDataViz } from '@/lib/dashboard/viz/registry';
-import { VizErrorBoundary } from '@/lib/dashboard/viz/VizErrorBoundary';
-import Card from '@/components/Card';
-import { Skeleton } from '@/components/Skeleton';
-import { AlertTriangle, RefreshCw, X, GripVertical, Settings } from 'lucide-react';
-
-interface DashboardWidgetProps {
-  widget: Widget;
-  propertyId: number;
-  reportId: number | null;
-  isEditing?: boolean;
-  onRemove?: (id: string) => void;
-  onEdit?: (id: string) => void;
-  activeFilters?: (DashboardFilter | CrossFilter)[];
-  onCrossFilter?: (field: string, value: string) => void;
-  /** Called whenever this widget's rows are fetched — used to collect dimension values for FilterBar. */
-  onDataReady?: (widgetId: string, rows: Record<string, unknown>[]) => void;
-}
-
-export default function DashboardWidget({
-  widget,
-  propertyId,
-  reportId,
-  isEditing = false,
-  onRemove,
-  onEdit,
-  activeFilters,
-  onCrossFilter,
-  onDataReady,
-}: DashboardWidgetProps) {
-  const [data, setData] = useState<WidgetData | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [retryCount, setRetryCount] = useState(0);
-
-  useEffect(() => {
-    if (!propertyId || !isDataViz(widget.viz)) {
-      setLoading(false);
-      return;
-    }
-    let cancelled = false;
-    setLoading(true);
-    setError(null);
-    fetchWidgetData(widget.binding, propertyId, reportId, activeFilters)
-      .then((result) => {
-        if (!cancelled) {
-          setData(result);
-          onDataReady?.(widget.id, result.rows);
-        }
-      })
-      .catch((e: unknown) => { if (!cancelled) setError(e instanceof Error ? e.message : String(e)); })
-      .finally(() => { if (!cancelled) setLoading(false); });
-    return () => { cancelled = true; };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [widget.binding, widget.viz, propertyId, reportId, retryCount, activeFilters]);
-
-  const catalog = catalogEntry(widget.binding.toolName);
-  const displayTitle = widget.title || catalog?.label || widget.binding.toolName;
-  const opts = widget.options ?? {};
-
-  const renderContent = () => {
-    if (widget.viz === 'markdown') {
-      return renderViz('markdown', { widget, data: data ?? { raw: {}, rows: [], kpiValue: null }, catalog, opts, onCrossFilter });
-    }
-
-    if (loading) {
-      return (
-        <div className="flex flex-col gap-2 pt-2">
-          <Skeleton className="h-8 w-32" />
-          <Skeleton className="h-24 w-full" />
-        </div>
-      );
-    }
-
-    if (error) {
-      return (
-        <div className="flex flex-col gap-2 items-start py-2">
-          <div className="flex items-center gap-1.5 text-red-400 text-xs font-medium">
-            <AlertTriangle className="h-3.5 w-3.5 shrink-0" />
-            <span className="break-all">{error}</span>
-          </div>
-          <button
-            onClick={() => setRetryCount((c) => c + 1)}
-            className="flex items-center gap-1 text-xs text-muted-foreground hover:text-bright transition-colors"
-          >
-            <RefreshCw className="h-3 w-3" /> Retry
-          </button>
-        </div>
-      );
-    }
-
-    if (!data) return renderViz(widget.viz, { widget, data: { raw: {}, rows: [], kpiValue: null }, catalog, opts, onCrossFilter });
-    return renderViz(widget.viz, { widget, data, catalog, opts, onCrossFilter });
-  };
-
-  return (
-    <Card padding="tight" className="h-full flex flex-col min-h-0 overflow-hidden relative group/widget">
-      <div className="flex items-start justify-between gap-2 mb-2 shrink-0">
-        <div className="flex items-center gap-1.5 min-w-0">
-          {isEditing && (
-            <span className="drag-handle cursor-grab active:cursor-grabbing shrink-0 text-muted-foreground">
-              <GripVertical className="h-4 w-4" />
-            </span>
-          )}
-          <p className="text-xs font-bold uppercase tracking-wider text-muted-foreground truncate">
-            {displayTitle}
-          </p>
-        </div>
-        {isEditing && (
-          <div className="flex items-center gap-1 shrink-0 opacity-0 group-hover/widget:opacity-100 transition-opacity">
-            {onEdit && (
-              <button
-                onClick={() => onEdit(widget.id)}
-                title="Configure widget"
-                className="p-0.5 rounded hover:bg-white/10 text-muted-foreground hover:text-bright transition-colors"
-              >
-                <Settings className="h-3.5 w-3.5" />
-              </button>
-            )}
-            {onRemove && (
-              <button
-                onClick={() => onRemove(widget.id)}
-                title="Remove widget"
-                className="p-0.5 rounded hover:bg-red-500/20 text-muted-foreground hover:text-red-400 transition-colors"
-              >
-                <X className="h-3.5 w-3.5" />
-              </button>
-            )}
-          </div>
-        )}
-      </div>
-      <div className="flex-1 min-h-0 overflow-auto">
-        <VizErrorBoundary resetKey={`${widget.viz}:${retryCount}`}>{renderContent()}</VizErrorBoundary>
-      </div>
-    </Card>
-  );
-}
diff --git a/web/src/lib/dashboard/builder/DatasetPicker.tsx b/web/src/lib/dashboard/builder/DatasetPicker.tsx
new file mode 100644
index 00000000..1b84b8cc
--- /dev/null
+++ b/web/src/lib/dashboard/builder/DatasetPicker.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import { datasetsByGroup } from '@/lib/dashboard/engine/datasets';
+
+interface DatasetPickerProps {
+  value: string;
+  onChange: (datasetId: string) => void;
+}
+
+export function DatasetPicker({ value, onChange }: DatasetPickerProps) {
+  const groups = datasetsByGroup();
+  return (
+    <div>
+      <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground mb-1">Data source</label>
+      <select
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        className="w-full px-2 py-1.5 text-sm bg-brand-800 border border-default rounded-lg text-bright focus:outline-none focus:ring-1 focus:ring-blue-500"
+      >
+        {groups.map((g) => (
+          <optgroup key={g.group} label={g.group}>
+            {g.datasets.map((d) => <option key={d.id} value={d.id}>{d.label}</option>)}
+          </optgroup>
+        ))}
+      </select>
+    </div>
+  );
+}
diff --git a/web/src/lib/dashboard/builder/FieldChip.tsx b/web/src/lib/dashboard/builder/FieldChip.tsx
new file mode 100644
index 00000000..4abf80dd
--- /dev/null
+++ b/web/src/lib/dashboard/builder/FieldChip.tsx
@@ -0,0 +1,47 @@
+'use client';
+
+import { useDraggable } from '@dnd-kit/core';
+import { GripVertical } from 'lucide-react';
+import type { FieldDef } from '@/lib/dashboard/engine/types';
+
+interface FieldChipProps {
+  field: FieldDef;
+  onQuickAdd?: (field: FieldDef) => void;
+  overlay?: boolean;
+}
+
+export function FieldChip({ field, onQuickAdd, overlay }: FieldChipProps) {
+  const draggable = useDraggable({ id: `field:${field.key}`, data: { field }, disabled: overlay });
+  const isMeasure = field.role === 'measure';
+  const cls = `flex items-center gap-1.5 w-full text-left px-2 py-1 rounded-md border text-xs transition-colors ${
+    isMeasure
+      ? 'border-emerald-500/30 bg-emerald-500/5 hover:border-emerald-500/60'
+      : 'border-blue-500/30 bg-blue-500/5 hover:border-blue-500/60'
+  } ${draggable.isDragging ? 'opacity-40' : ''} ${overlay ? 'shadow-lg cursor-grabbing' : 'cursor-grab'}`;
+
+  if (overlay) {
+    return (
+      <div className={cls}>
+        <GripVertical className="h-3 w-3 shrink-0 text-muted-foreground" />
+        <span className="truncate text-bright">{field.label}</span>
+      </div>
+    );
+  }
+
+  return (
+    <button
+      ref={draggable.setNodeRef}
+      {...draggable.listeners}
+      {...draggable.attributes}
+      onClick={() => onQuickAdd?.(field)}
+      className={cls}
+      title={`${field.key} — drag to a shelf, or click to add`}
+    >
+      <GripVertical className="h-3 w-3 shrink-0 text-muted-foreground" />
+      <span className="truncate text-bright">{field.label}</span>
+      <span className={`ml-auto text-[9px] uppercase tracking-wide ${isMeasure ? 'text-emerald-400' : 'text-blue-400'}`}>
+        {isMeasure ? '#' : 'Aa'}
+      </span>
+    </button>
+  );
+}
diff --git a/web/src/lib/dashboard/builder/FilterBar.tsx b/web/src/lib/dashboard/builder/FilterBar.tsx
deleted file mode 100644
index 574d38c2..00000000
--- a/web/src/lib/dashboard/builder/FilterBar.tsx
+++ /dev/null
@@ -1,316 +0,0 @@
-'use client';
-
-import { useState, useCallback } from 'react';
-import { X, Filter, Plus, ChevronDown } from 'lucide-react';
-import type { DashboardFilter, CrossFilter } from '@/lib/dashboard/types';
-import { catalogEntry, dimensions } from '@/lib/dashboard/catalog/catalog';
-import type { Widget } from '@/lib/dashboard/types';
-
-interface FilterBarProps {
-  filters: DashboardFilter[];
-  crossFilters: CrossFilter[];
-  widgets: Widget[];
-  isEditing: boolean;
-  /** Available distinct values per dimension key (collected from fetched data). */
-  dimensionValues: Record<string, string[]>;
-  onFiltersChange: (filters: DashboardFilter[]) => void;
-  onCrossFilterRemove: (id: string) => void;
-  onCrossFilterClearAll: () => void;
-}
-
-export function FilterBar({
-  filters,
-  crossFilters,
-  widgets,
-  isEditing,
-  dimensionValues,
-  onFiltersChange,
-  onCrossFilterRemove,
-  onCrossFilterClearAll,
-}: FilterBarProps) {
-  const [showAddFilter, setShowAddFilter] = useState(false);
-
-  const hasAny = filters.length > 0 || crossFilters.length > 0;
-  if (!hasAny && !isEditing) return null;
-
-  const handleFilterValueChange = (filterId: string, value: string | string[]) => {
-    onFiltersChange(
-      filters.map((f) => f.id === filterId ? { ...f, value } : f),
-    );
-  };
-
-  const handleRemoveFilter = (filterId: string) => {
-    onFiltersChange(filters.filter((f) => f.id !== filterId));
-  };
-
-  return (
-    <div className="flex flex-wrap items-center gap-2 px-4 py-2 border-b border-default bg-brand-950/60 min-h-[48px]">
-      <span className="flex items-center gap-1.5 text-xs font-semibold text-muted-foreground shrink-0">
-        <Filter className="h-3.5 w-3.5" />
-        Filters
-      </span>
-
-      {/* Board-level filters */}
-      {filters.map((f) => (
-        <FilterChip
-          key={f.id}
-          filter={f}
-          options={dimensionValues[f.field] ?? []}
-          onValueChange={(v) => handleFilterValueChange(f.id, v)}
-          onRemove={isEditing ? () => handleRemoveFilter(f.id) : undefined}
-        />
-      ))}
-
-      {/* Cross-filters from chart clicks */}
-      {crossFilters.map((cf) => (
-        <span
-          key={cf.id}
-          className="flex items-center gap-1 px-2 py-0.5 rounded-full text-xs bg-amber-500/15 text-amber-400 border border-amber-500/30"
-        >
-          <span className="font-mono opacity-70">{cf.field.split('.').pop()}:</span>
-          <span className="font-medium">{cf.value}</span>
-          <button
-            onClick={() => onCrossFilterRemove(cf.id)}
-            className="ml-0.5 hover:text-amber-200 transition-colors"
-            aria-label="Remove cross-filter"
-          >
-            <X className="h-2.5 w-2.5" />
-          </button>
-        </span>
-      ))}
-
-      {crossFilters.length > 1 && (
-        <button
-          onClick={onCrossFilterClearAll}
-          className="text-xs text-muted-foreground hover:text-bright transition-colors"
-        >
-          Clear all
-        </button>
-      )}
-
-      {isEditing && (
-        <div className="relative">
-          <button
-            onClick={() => setShowAddFilter((v) => !v)}
-            className="flex items-center gap-1 text-xs px-2 py-1 rounded-md border border-dashed border-default hover:border-blue-500/50 text-muted-foreground hover:text-bright transition-colors"
-          >
-            <Plus className="h-3 w-3" /> Add filter
-          </button>
-          {showAddFilter && (
-            <AddFilterPanel
-              widgets={widgets}
-              dimensionValues={dimensionValues}
-              onAdd={(f) => {
-                onFiltersChange([...filters, f]);
-                setShowAddFilter(false);
-              }}
-              onClose={() => setShowAddFilter(false)}
-            />
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ─── FilterChip ─────────────────────────────────────────────────────────────
-
-interface FilterChipProps {
-  filter: DashboardFilter;
-  options: string[];
-  onValueChange: (v: string | string[]) => void;
-  onRemove?: () => void;
-}
-
-function FilterChip({ filter, options, onValueChange, onRemove }: FilterChipProps) {
-  const [open, setOpen] = useState(false);
-
-  const displayValue =
-    Array.isArray(filter.value)
-      ? filter.value.length === 0 ? 'Any' : filter.value.join(', ')
-      : filter.value || 'Any';
-
-  return (
-    <div className="relative flex items-center gap-0 text-xs">
-      <button
-        onClick={() => setOpen((v) => !v)}
-        className="flex items-center gap-1 px-2 py-0.5 rounded-l-full border border-default hover:border-blue-500/50 bg-brand-800 text-bright transition-colors"
-      >
-        <span className="text-muted-foreground font-normal">{filter.label}:</span>
-        <span className="font-medium">{displayValue}</span>
-        <ChevronDown className="h-2.5 w-2.5 text-muted-foreground" />
-      </button>
-      {onRemove && (
-        <button
-          onClick={onRemove}
-          className="px-1.5 py-0.5 rounded-r-full border border-l-0 border-default hover:bg-red-500/10 text-muted-foreground hover:text-red-400 transition-colors"
-          aria-label="Remove filter"
-        >
-          <X className="h-2.5 w-2.5" />
-        </button>
-      )}
-      {open && (
-        <FilterDropdown
-          filter={filter}
-          options={options}
-          onValueChange={(v) => { onValueChange(v); setOpen(false); }}
-          onClose={() => setOpen(false)}
-        />
-      )}
-    </div>
-  );
-}
-
-interface FilterDropdownProps {
-  filter: DashboardFilter;
-  options: string[];
-  onValueChange: (v: string | string[]) => void;
-  onClose: () => void;
-}
-
-function FilterDropdown({ filter, options, onValueChange, onClose }: FilterDropdownProps) {
-  const selected = Array.isArray(filter.value)
-    ? filter.value
-    : filter.value
-    ? [filter.value]
-    : [];
-
-  if (filter.type === 'search') {
-    return (
-      <div className="absolute left-0 top-full mt-1 z-50 bg-brand-900 border border-default rounded-lg shadow-xl p-2 w-56">
-        <input
-          autoFocus
-          type="text"
-          placeholder="Search…"
-          defaultValue={typeof filter.value === 'string' ? filter.value : ''}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter') { onValueChange(e.currentTarget.value); }
-            if (e.key === 'Escape') { onClose(); }
-          }}
-          className="w-full px-2 py-1.5 text-xs bg-brand-800 border border-default rounded text-bright focus:outline-none focus:ring-1 focus:ring-blue-500"
-        />
-      </div>
-    );
-  }
-
-  return (
-    <div className="absolute left-0 top-full mt-1 z-50 bg-brand-900 border border-default rounded-lg shadow-xl p-2 max-h-60 overflow-y-auto w-48">
-      <button
-        onClick={() => onValueChange(filter.type === 'multiselect' ? [] : '')}
-        className="w-full text-left px-2 py-1 text-xs rounded hover:bg-white/5 text-muted-foreground"
-      >
-        Any
-      </button>
-      {options.map((opt) => {
-        const active =
-          filter.type === 'multiselect' ? selected.includes(opt) : filter.value === opt;
-        return (
-          <button
-            key={opt}
-            onClick={() => {
-              if (filter.type === 'multiselect') {
-                const next = active
-                  ? selected.filter((s) => s !== opt)
-                  : [...selected, opt];
-                onValueChange(next);
-              } else {
-                onValueChange(opt);
-              }
-            }}
-            className={`w-full text-left px-2 py-1 text-xs rounded transition-colors ${
-              active ? 'bg-blue-600 text-white' : 'hover:bg-white/5 text-foreground'
-            }`}
-          >
-            {opt}
-          </button>
-        );
-      })}
-    </div>
-  );
-}
-
-// ─── AddFilterPanel ──────────────────────────────────────────────────────────
-
-interface AddFilterPanelProps {
-  widgets: Widget[];
-  dimensionValues: Record<string, string[]>;
-  onAdd: (filter: DashboardFilter) => void;
-  onClose: () => void;
-}
-
-function AddFilterPanel({ widgets, dimensionValues, onAdd, onClose }: AddFilterPanelProps) {
-  const [selectedField, setSelectedField] = useState('');
-  const [filterType, setFilterType] = useState<DashboardFilter['type']>('select');
-
-  // Collect all dimension fields from widgets' catalog entries
-  const dimensionFields: { key: string; label: string; toolName: string }[] = [];
-  const seen = new Set<string>();
-  for (const w of widgets) {
-    const cat = catalogEntry(w.binding.toolName);
-    if (!cat) continue;
-    for (const f of dimensions(cat)) {
-      if (!seen.has(f.key)) {
-        seen.add(f.key);
-        dimensionFields.push({ key: f.key, label: f.label, toolName: w.binding.toolName });
-      }
-    }
-  }
-
-  const handleAdd = useCallback(() => {
-    if (!selectedField) return;
-    const fieldDef = dimensionFields.find((f) => f.key === selectedField);
-    const hasOptions = (dimensionValues[selectedField]?.length ?? 0) > 0;
-    onAdd({
-      id: `f-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 6)}`,
-      label: fieldDef?.label ?? selectedField.split('.').pop() ?? selectedField,
-      field: selectedField,
-      type: hasOptions ? filterType : 'search',
-    });
-  }, [selectedField, filterType, dimensionFields, dimensionValues, onAdd]);
-
-  return (
-    <div className="absolute left-0 top-full mt-1 z-50 bg-brand-900 border border-default rounded-lg shadow-xl p-3 w-64 space-y-2">
-      <p className="text-xs font-bold text-bright">Add filter</p>
-      <div>
-        <label className="text-[10px] text-muted-foreground mb-0.5 block">Dimension field</label>
-        <select
-          value={selectedField}
-          onChange={(e) => setSelectedField(e.target.value)}
-          className="w-full px-2 py-1.5 text-xs bg-brand-800 border border-default rounded text-bright focus:outline-none focus:ring-1 focus:ring-blue-500"
-        >
-          <option value="">— select —</option>
-          {dimensionFields.map((f) => (
-            <option key={f.key} value={f.key}>{f.label}</option>
-          ))}
-        </select>
-      </div>
-      <div>
-        <label className="text-[10px] text-muted-foreground mb-0.5 block">Filter type</label>
-        <select
-          value={filterType}
-          onChange={(e) => setFilterType(e.target.value as DashboardFilter['type'])}
-          className="w-full px-2 py-1.5 text-xs bg-brand-800 border border-default rounded text-bright focus:outline-none focus:ring-1 focus:ring-blue-500"
-        >
-          <option value="select">Single select</option>
-          <option value="multiselect">Multi select</option>
-          <option value="search">Text search</option>
-        </select>
-      </div>
-      <div className="flex gap-2 pt-1">
-        <button
-          onClick={handleAdd}
-          disabled={!selectedField}
-          className="flex-1 py-1.5 rounded bg-blue-600 hover:bg-blue-500 disabled:opacity-40 text-white text-xs font-medium transition-colors"
-        >
-          Add
-        </button>
-        <button
-          onClick={onClose}
-          className="flex-1 py-1.5 rounded border border-default hover:bg-white/5 text-xs text-muted-foreground transition-colors"
-        >
-          Cancel
-        </button>
-      </div>
-    </div>
-  );
-}
diff --git a/web/src/lib/dashboard/builder/FilterEditor.tsx b/web/src/lib/dashboard/builder/FilterEditor.tsx
new file mode 100644
index 00000000..f2aac0e9
--- /dev/null
+++ b/web/src/lib/dashboard/builder/FilterEditor.tsx
@@ -0,0 +1,110 @@
+'use client';
+
+import { X } from 'lucide-react';
+import type { Filter, FilterOp, FieldDef } from '@/lib/dashboard/engine/types';
+import { opsForRole } from '@/lib/dashboard/builder/specEdits';
+
+const OP_LABELS: Record<FilterOp, string> = {
+  eq: '=', neq: '≠', in: 'is any of', nin: 'is none of', contains: 'contains',
+  gt: '>', gte: '≥', lt: '<', lte: '≤', between: 'between',
+};
+
+interface FilterEditorProps {
+  filter: Filter;
+  field?: FieldDef;
+  options: string[];
+  onChange: (patch: Partial<Filter>) => void;
+  onRemove: () => void;
+}
+
+export function FilterEditor({ filter, field, options, onChange, onRemove }: FilterEditorProps) {
+  const role = field?.role ?? 'dimension';
+  const ops = opsForRole(role);
+  const between = filter.op === 'between';
+  const tuple = Array.isArray(filter.value) ? filter.value : [];
+
+  return (
+    <div className="w-full rounded-md border border-default bg-brand-800/60 p-1.5 space-y-1">
+      <div className="flex items-center gap-1">
+        <span className="text-xs font-medium text-bright truncate flex-1" title={field?.key}>{field?.label ?? filter.field}</span>
+        <select
+          value={filter.op}
+          onChange={(e) => onChange({ op: e.target.value as FilterOp })}
+          className="text-[11px] bg-brand-900 border border-default rounded px-1 py-0.5 text-muted-foreground focus:outline-none"
+        >
+          {ops.map((op) => <option key={op} value={op}>{OP_LABELS[op]}</option>)}
+        </select>
+        <button onClick={onRemove} title="Remove filter" className="p-0.5 rounded hover:bg-red-500/20 hover:text-red-400 text-muted-foreground">
+          <X className="h-3 w-3" />
+        </button>
+      </div>
+
+      {(filter.op === 'in' || filter.op === 'nin') && (
+        <select
+          multiple
+          value={(Array.isArray(filter.value) ? filter.value : []).map(String)}
+          onChange={(e) => onChange({ value: Array.from(e.target.selectedOptions).map((o) => o.value) })}
+          className="w-full text-xs bg-brand-900 border border-default rounded px-1 py-0.5 text-bright focus:outline-none h-20"
+        >
+          {options.map((o) => <option key={o} value={o}>{o}</option>)}
+        </select>
+      )}
+
+      {(filter.op === 'eq' || filter.op === 'neq') &&
+        (options.length ? (
+          <select
+            value={String(filter.value ?? '')}
+            onChange={(e) => onChange({ value: e.target.value })}
+            className="w-full text-xs bg-brand-900 border border-default rounded px-1 py-0.5 text-bright focus:outline-none"
+          >
+            <option value="">—</option>
+            {options.map((o) => <option key={o} value={o}>{o}</option>)}
+          </select>
+        ) : (
+          <input
+            type="text"
+            value={String(filter.value ?? '')}
+            onChange={(e) => onChange({ value: e.target.value })}
+            className="w-full text-xs bg-brand-900 border border-default rounded px-1 py-0.5 text-bright focus:outline-none"
+          />
+        ))}
+
+      {filter.op === 'contains' && (
+        <input
+          type="text"
+          value={String(filter.value ?? '')}
+          onChange={(e) => onChange({ value: e.target.value })}
+          placeholder="substring…"
+          className="w-full text-xs bg-brand-900 border border-default rounded px-1 py-0.5 text-bright focus:outline-none"
+        />
+      )}
+
+      {(filter.op === 'gt' || filter.op === 'gte' || filter.op === 'lt' || filter.op === 'lte') && (
+        <input
+          type="number"
+          value={typeof filter.value === 'number' ? filter.value : ''}
+          onChange={(e) => onChange({ value: Number(e.target.value) })}
+          className="w-full text-xs bg-brand-900 border border-default rounded px-1 py-0.5 text-bright focus:outline-none"
+        />
+      )}
+
+      {between && (
+        <div className="flex items-center gap-1">
+          <input
+            type="number"
+            value={typeof tuple[0] === 'number' ? (tuple[0] as number) : ''}
+            onChange={(e) => onChange({ value: [Number(e.target.value), Number(tuple[1] ?? 0)] })}
+            className="w-full text-xs bg-brand-900 border border-default rounded px-1 py-0.5 text-bright focus:outline-none"
+          />
+          <span className="text-muted-foreground text-xs">–</span>
+          <input
+            type="number"
+            value={typeof tuple[1] === 'number' ? (tuple[1] as number) : ''}
+            onChange={(e) => onChange({ value: [Number(tuple[0] ?? 0), Number(e.target.value)] })}
+            className="w-full text-xs bg-brand-900 border border-default rounded px-1 py-0.5 text-bright focus:outline-none"
+          />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/web/src/lib/dashboard/builder/FormatPanel.tsx b/web/src/lib/dashboard/builder/FormatPanel.tsx
new file mode 100644
index 00000000..d1342493
--- /dev/null
+++ b/web/src/lib/dashboard/builder/FormatPanel.tsx
@@ -0,0 +1,108 @@
+'use client';
+
+import type { Widget, VizOptions } from '@/lib/dashboard/engine/doc';
+import { PALETTE_IDS } from '@/lib/dashboard/charts/theme';
+
+const FORMATS = [
+  { value: '', label: 'Default' },
+  { value: '0', label: 'Integer' },
+  { value: '0.0', label: '1 decimal' },
+  { value: '0.00', label: '2 decimals' },
+  { value: 'score', label: 'Score /100' },
+  { value: '0.0%', label: 'Percent (fraction)' },
+  { value: 'pct', label: 'Percent (0–100)' },
+];
+
+const labelCls = 'block text-[10px] font-bold uppercase tracking-wider text-muted-foreground mb-1';
+const inputCls = 'w-full px-2 py-1.5 text-sm bg-brand-800 border border-default rounded-lg text-bright focus:outline-none focus:ring-1 focus:ring-blue-500';
+
+export function FormatPanel({ widget, onChange }: { widget: Widget; onChange: (w: Widget) => void }) {
+  const o = widget.vizOptions ?? {};
+  const setOpt = (patch: Partial<VizOptions>) => onChange({ ...widget, vizOptions: { ...o, ...patch } });
+  const viz = widget.viz;
+  const isChart = !['kpi', 'stat-card', 'gauge', 'table', 'text'].includes(viz);
+
+  return (
+    <div className="space-y-3">
+      <div>
+        <label className={labelCls}>Title</label>
+        <input
+          type="text"
+          value={widget.title}
+          placeholder="(auto)"
+          onChange={(e) => onChange({ ...widget, title: e.target.value })}
+          className={inputCls}
+        />
+      </div>
+
+      {viz === 'text' ? (
+        <div>
+          <label className={labelCls}>Markdown</label>
+          <textarea
+            value={o.text ?? ''}
+            onChange={(e) => setOpt({ text: e.target.value })}
+            rows={8}
+            className={`${inputCls} font-mono resize-y`}
+          />
+        </div>
+      ) : (
+        <>
+          {(viz === 'kpi' || viz === 'stat-card' || viz === 'gauge' || isChart) && (
+            <div>
+              <label className={labelCls}>Number format</label>
+              <select value={o.format ?? ''} onChange={(e) => setOpt({ format: e.target.value || undefined })} className={inputCls}>
+                {FORMATS.map((f) => <option key={f.value} value={f.value}>{f.label}</option>)}
+              </select>
+            </div>
+          )}
+
+          {viz === 'stat-card' && (
+            <div>
+              <label className={labelCls}>Subtitle</label>
+              <input type="text" value={o.subtitle ?? ''} onChange={(e) => setOpt({ subtitle: e.target.value || undefined })} className={inputCls} />
+            </div>
+          )}
+
+          {viz === 'gauge' && (
+            <div className="grid grid-cols-2 gap-2">
+              <div>
+                <label className={labelCls}>Min</label>
+                <input type="number" value={o.axisMin ?? 0} onChange={(e) => setOpt({ axisMin: Number(e.target.value) })} className={inputCls} />
+              </div>
+              <div>
+                <label className={labelCls}>Max</label>
+                <input type="number" value={o.axisMax ?? 100} onChange={(e) => setOpt({ axisMax: Number(e.target.value) })} className={inputCls} />
+              </div>
+            </div>
+          )}
+
+          {viz === 'table' && (
+            <div>
+              <label className={labelCls}>Max rows</label>
+              <input type="number" min={1} max={500} value={o.tableLimit ?? 50} onChange={(e) => setOpt({ tableLimit: Number(e.target.value) })} className={inputCls} />
+            </div>
+          )}
+
+          {isChart && (
+            <>
+              <div>
+                <label className={labelCls}>Color palette</label>
+                <select value={o.palette ?? 'default'} onChange={(e) => setOpt({ palette: e.target.value })} className={inputCls}>
+                  {PALETTE_IDS.map((p) => <option key={p} value={p}>{p}</option>)}
+                </select>
+              </div>
+              <label className="flex items-center gap-2 text-sm text-foreground">
+                <input type="checkbox" checked={o.showLegend ?? false} onChange={(e) => setOpt({ showLegend: e.target.checked })} />
+                Show legend
+              </label>
+              <label className="flex items-center gap-2 text-sm text-foreground">
+                <input type="checkbox" checked={o.dataLabels ?? false} onChange={(e) => setOpt({ dataLabels: e.target.checked })} />
+                Show data labels
+              </label>
+            </>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/web/src/lib/dashboard/builder/PresetPicker.tsx b/web/src/lib/dashboard/builder/PresetPicker.tsx
deleted file mode 100644
index d73f0127..00000000
--- a/web/src/lib/dashboard/builder/PresetPicker.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-'use client';
-
-import { X, LayoutTemplate } from 'lucide-react';
-import { DASHBOARD_PRESETS } from '@/lib/dashboard/presets/presets';
-
-interface PresetPickerProps {
-  onSelect: (presetId: string) => void;
-  onClose: () => void;
-}
-
-export default function PresetPicker({ onSelect, onClose }: PresetPickerProps) {
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60">
-      <div className="bg-brand-900 border border-default rounded-xl shadow-2xl w-full max-w-2xl max-h-[80vh] flex flex-col">
-        <div className="flex items-center justify-between px-4 py-3 border-b border-default shrink-0">
-          <div className="flex items-center gap-2">
-            <LayoutTemplate className="h-4 w-4 text-blue-400" />
-            <h2 className="font-bold text-bright">Dashboard templates</h2>
-          </div>
-          <button
-            onClick={onClose}
-            className="p-1 rounded hover:bg-white/10 text-muted-foreground hover:text-bright transition-colors"
-          >
-            <X className="h-4 w-4" />
-          </button>
-        </div>
-
-        <p className="px-4 py-2 text-xs text-muted-foreground border-b border-default shrink-0">
-          Start from a pre-built layout. You can customize widgets after creating.
-        </p>
-
-        <ul className="flex-1 overflow-y-auto p-3 space-y-2">
-          {DASHBOARD_PRESETS.map((preset) => (
-            <li key={preset.id}>
-              <button
-                onClick={() => onSelect(preset.id)}
-                className="w-full text-left px-4 py-3 rounded-lg border border-default hover:border-blue-500/50 hover:bg-brand-800/60 transition-colors group"
-              >
-                <div className="flex items-start justify-between gap-3">
-                  <div className="min-w-0">
-                    <p className="text-sm font-semibold text-bright group-hover:text-blue-300 transition-colors">
-                      {preset.name}
-                    </p>
-                    <p className="text-xs text-blue-400/80 mt-0.5">{preset.tagline}</p>
-                    <p className="text-xs text-muted-foreground mt-1.5">{preset.description}</p>
-                  </div>
-                  <span className="shrink-0 text-[10px] uppercase tracking-wider font-bold text-muted-foreground bg-brand-800 px-2 py-1 rounded">
-                    Use template
-                  </span>
-                </div>
-              </button>
-            </li>
-          ))}
-        </ul>
-      </div>
-    </div>
-  );
-}
diff --git a/web/src/lib/dashboard/builder/Shelf.tsx b/web/src/lib/dashboard/builder/Shelf.tsx
new file mode 100644
index 00000000..0600510b
--- /dev/null
+++ b/web/src/lib/dashboard/builder/Shelf.tsx
@@ -0,0 +1,36 @@
+'use client';
+
+import { useDroppable } from '@dnd-kit/core';
+import type { ReactNode } from 'react';
+import type { FieldRole } from '@/lib/dashboard/engine/types';
+
+interface ShelfProps {
+  id: 'category' | 'values' | 'legend' | 'filters';
+  label: string;
+  accepts: FieldRole[];
+  empty: string;
+  children?: ReactNode;
+  hasItems: boolean;
+}
+
+export function Shelf({ id, label, accepts, empty, children, hasItems }: ShelfProps) {
+  const { setNodeRef, isOver, active } = useDroppable({ id: `shelf:${id}`, data: { accepts } });
+  const activeRole = (active?.data.current as { field?: { role?: FieldRole } } | undefined)?.field?.role;
+  const compatible = !activeRole || accepts.includes(activeRole);
+  const highlight = isOver && compatible;
+  const dim = active && !compatible;
+
+  return (
+    <div className="space-y-1">
+      <label className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground">{label}</label>
+      <div
+        ref={setNodeRef}
+        className={`min-h-[34px] rounded-lg border p-1.5 flex flex-wrap gap-1.5 transition-colors ${
+          highlight ? 'border-blue-400 bg-blue-500/10' : 'border-dashed border-default'
+        } ${dim ? 'opacity-40' : ''}`}
+      >
+        {hasItems ? children : <span className="text-[11px] text-muted-foreground px-1 py-0.5">{empty}</span>}
+      </div>
+    </div>
+  );
+}
diff --git a/web/src/lib/dashboard/builder/ShelfPill.tsx b/web/src/lib/dashboard/builder/ShelfPill.tsx
new file mode 100644
index 00000000..37e0c3be
--- /dev/null
+++ b/web/src/lib/dashboard/builder/ShelfPill.tsx
@@ -0,0 +1,45 @@
+'use client';
+
+import { X } from 'lucide-react';
+import type { AggOp } from '@/lib/dashboard/engine/types';
+
+const AGG_OPTS: { value: AggOp; label: string }[] = [
+  { value: 'sum', label: 'Sum' },
+  { value: 'avg', label: 'Avg' },
+  { value: 'count', label: 'Count' },
+  { value: 'countDistinct', label: 'Count distinct' },
+  { value: 'min', label: 'Min' },
+  { value: 'max', label: 'Max' },
+  { value: 'median', label: 'Median' },
+];
+
+interface ShelfPillProps {
+  label: string;
+  onRemove: () => void;
+  agg?: AggOp;
+  onAgg?: (agg: AggOp) => void;
+}
+
+export function ShelfPill({ label, onRemove, agg, onAgg }: ShelfPillProps) {
+  return (
+    <span className="inline-flex items-center gap-1 rounded-md bg-brand-800 border border-default pl-2 pr-1 py-0.5 text-xs text-bright max-w-full">
+      {agg && onAgg && (
+        <select
+          value={agg}
+          onChange={(e) => onAgg(e.target.value as AggOp)}
+          onClick={(e) => e.stopPropagation()}
+          className="bg-transparent text-[10px] text-emerald-400 font-semibold focus:outline-none -ml-1 cursor-pointer"
+          title="Aggregation"
+        >
+          {AGG_OPTS.map((o) => (
+            <option key={o.value} value={o.value} className="bg-brand-900 text-bright">{o.label}</option>
+          ))}
+        </select>
+      )}
+      <span className="truncate" title={label}>{label}</span>
+      <button onClick={onRemove} title="Remove" className="p-0.5 rounded hover:bg-red-500/20 hover:text-red-400 text-muted-foreground">
+        <X className="h-3 w-3" />
+      </button>
+    </span>
+  );
+}
diff --git a/web/src/lib/dashboard/builder/VizGallery.tsx b/web/src/lib/dashboard/builder/VizGallery.tsx
new file mode 100644
index 00000000..9e546738
--- /dev/null
+++ b/web/src/lib/dashboard/builder/VizGallery.tsx
@@ -0,0 +1,57 @@
+'use client';
+
+import {
+  Hash, Gauge, Activity, BarChart3, LineChart, PieChart, Table, Type, Grid3x3, type LucideIcon,
+} from 'lucide-react';
+import type { VizType, QuerySpec } from '@/lib/dashboard/engine/types';
+import { ALL_VIZ, VIZ_META, vizFitsSpec } from '@/lib/dashboard/charts/vizMeta';
+
+const ICONS: Record<VizType, LucideIcon> = {
+  kpi: Hash, 'stat-card': Hash, gauge: Gauge, sparkline: Activity,
+  bar: BarChart3, 'horizontal-bar': BarChart3, 'stacked-bar': BarChart3,
+  line: LineChart, area: LineChart,
+  pie: PieChart, doughnut: PieChart, treemap: Grid3x3, funnel: BarChart3,
+  scatter: Activity, radar: Grid3x3, heatmap: Grid3x3,
+  table: Table, text: Type,
+};
+
+interface VizGalleryProps {
+  value: VizType;
+  spec: QuerySpec;
+  /** Datasets list their preferred viz first; others are still selectable. */
+  preferred?: VizType[];
+  onChange: (viz: VizType) => void;
+}
+
+export function VizGallery({ value, spec, preferred, onChange }: VizGalleryProps) {
+  const order = preferred && preferred.length
+    ? [...preferred, ...ALL_VIZ.filter((v) => !preferred.includes(v))]
+    : ALL_VIZ;
+
+  return (
+    <div className="grid grid-cols-3 gap-1.5">
+      {order.map((viz) => {
+        const Icon = ICONS[viz];
+        const fits = vizFitsSpec(viz, spec);
+        const active = value === viz;
+        return (
+          <button
+            key={viz}
+            onClick={() => onChange(viz)}
+            title={fits ? VIZ_META[viz].label : `${VIZ_META[viz].label} — needs more fields`}
+            className={`flex flex-col items-center gap-1 py-2 rounded-lg border text-[10px] transition-colors ${
+              active
+                ? 'border-blue-500 bg-blue-500/10 text-blue-300'
+                : fits
+                  ? 'border-default hover:border-blue-500/50 text-muted-foreground hover:text-bright'
+                  : 'border-default/50 text-muted-foreground/40'
+            }`}
+          >
+            <Icon className="h-4 w-4" />
+            {VIZ_META[viz].label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/web/src/lib/dashboard/builder/WidgetConfigPanel.tsx b/web/src/lib/dashboard/builder/WidgetConfigPanel.tsx
deleted file mode 100644
index e2cf90ff..00000000
--- a/web/src/lib/dashboard/builder/WidgetConfigPanel.tsx
+++ /dev/null
@@ -1,449 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { X, Sparkles } from 'lucide-react';
-import type { Widget, VizType, AggregateOp, ChartSortOrder, CustomChartSpec } from '@/lib/dashboard/types';
-import { catalogEntry, dimensions, measures } from '@/lib/dashboard/catalog/catalog';
-import { VIZ_LABELS } from '@/lib/dashboard/viz/labels';
-import { DASHSCRIPT_HELP } from '@/lib/dashboard/script/eval';
-import AiAssistModal from '@/lib/dashboard/builder/AiAssistModal';
-import type { AiScriptResult } from '@/lib/dashboard/ai/generate';
-import { sanitizeChartSpec } from '@/lib/dashboard/ai/generate';
-
-const AGG_LABELS: Record<AggregateOp, string> = {
-  none: 'None',
-  sum: 'Sum',
-  avg: 'Average',
-  count: 'Count',
-  max: 'Max',
-  min: 'Min',
-};
-
-const CHART_VIZ: VizType[] = [
-  'bar', 'horizontal-bar', 'ranked-bar', 'line', 'area', 'pie', 'doughnut', 'stacked-bar', 'sparkline',
-];
-const METRIC_VIZ: VizType[] = ['kpi', 'stat-card', 'gauge', 'sparkline'];
-
-interface WidgetConfigPanelProps {
-  widget: Widget;
-  onSave: (updated: Widget) => void;
-  onClose: () => void;
-  propertyId?: number;
-  reportId?: number | null;
-}
-
-export default function WidgetConfigPanel({ widget, onSave, onClose, propertyId, reportId }: WidgetConfigPanelProps) {
-  const catalog = catalogEntry(widget.binding.toolName);
-  const [title, setTitle] = useState(widget.title);
-  const [viz, setViz] = useState<VizType>(widget.viz);
-  const [xField, setXField] = useState(widget.binding.xField ?? '');
-  const [yField, setYField] = useState(widget.binding.yField ?? '');
-  const [seriesField, setSeriesField] = useState(widget.binding.seriesField ?? '');
-  const [valueField, setValueField] = useState(widget.binding.valueField ?? '');
-  const [aggregate, setAggregate] = useState<AggregateOp>(widget.binding.aggregate ?? 'none');
-  const [format, setFormat] = useState(widget.options?.format ?? '');
-  const [tableLimit, setTableLimit] = useState(widget.options?.tableLimit ?? 50);
-  const [chartMaxItems, setChartMaxItems] = useState(widget.options?.chartMaxItems ?? 20);
-  const [chartSort, setChartSort] = useState<ChartSortOrder>(widget.options?.chartSort ?? 'none');
-  const [showLegend, setShowLegend] = useState(widget.options?.showLegend ?? false);
-  const [subtitle, setSubtitle] = useState(widget.options?.subtitle ?? '');
-  const [markdownContent, setMarkdownContent] = useState(widget.options?.markdownContent ?? '');
-  const [useScript, setUseScript] = useState(widget.binding.useScript ?? false);
-  const [measure, setMeasure] = useState(widget.binding.measure ?? '');
-  const [transform, setTransform] = useState(widget.binding.transform ?? '');
-  const [configMode, setConfigMode] = useState<'simple' | 'script'>(useScript ? 'script' : 'simple');
-  const [chartSpecJson, setChartSpecJson] = useState(
-    widget.options?.chartSpec ? JSON.stringify(widget.options.chartSpec, null, 2) : '',
-  );
-  const [chartSpecError, setChartSpecError] = useState<string | null>(null);
-  const [showAiModal, setShowAiModal] = useState(false);
-
-  const baseCompatibleViz = catalog?.compatibleViz ?? Object.keys(VIZ_LABELS) as VizType[];
-  // Always include the current viz in the options so an AI-set 'custom-chart'
-  // (or any future viz not in the catalog) is visible in the dropdown.
-  const compatibleViz: VizType[] = baseCompatibleViz.includes(viz)
-    ? baseCompatibleViz
-    : [...baseCompatibleViz, viz];
-  const availableDimensions = catalog ? dimensions(catalog) : [];
-  const availableMeasures = catalog ? measures(catalog) : [];
-  const allFields = catalog?.fields ?? [];
-  const isChart = CHART_VIZ.includes(viz);
-  const isMetric = METRIC_VIZ.includes(viz);
-
-  const handleSave = () => {
-    // Validate chartSpec JSON if present
-    let parsedChartSpec: CustomChartSpec | undefined;
-    if (viz === 'custom-chart' && chartSpecJson.trim()) {
-      try {
-        parsedChartSpec = sanitizeChartSpec(JSON.parse(chartSpecJson));
-        setChartSpecError(null);
-      } catch (e) {
-        setChartSpecError(e instanceof Error ? e.message : 'Invalid JSON');
-        return;
-      }
-    }
-
-    onSave({
-      ...widget,
-      title,
-      viz,
-      binding: {
-        ...widget.binding,
-        xField: xField || undefined,
-        yField: yField || undefined,
-        seriesField: seriesField || undefined,
-        valueField: valueField || undefined,
-        aggregate: aggregate !== 'none' ? aggregate : undefined,
-        useScript: configMode === 'script' || undefined,
-        measure: configMode === 'script' && measure.trim() ? measure.trim() : undefined,
-        transform: configMode === 'script' && transform.trim() ? transform.trim() : undefined,
-      },
-      options: {
-        ...widget.options,
-        format: format || undefined,
-        tableLimit: tableLimit !== 50 ? tableLimit : undefined,
-        chartMaxItems: chartMaxItems !== 20 ? chartMaxItems : undefined,
-        chartSort: chartSort !== 'none' ? chartSort : undefined,
-        showLegend: showLegend || undefined,
-        subtitle: subtitle || undefined,
-        markdownContent: viz === 'markdown' ? markdownContent : undefined,
-        chartSpec: parsedChartSpec,
-        aiPrompt: widget.options?.aiPrompt,
-      },
-    });
-    onClose();
-  };
-
-  const handleApplyScript = (result: AiScriptResult) => {
-    if (result.measure) setMeasure(result.measure);
-    if (result.transform) setTransform(result.transform);
-    if (result.measure || result.transform) setConfigMode('script');
-    if (result.chartSpec) {
-      setChartSpecJson(JSON.stringify(result.chartSpec, null, 2));
-      setViz('custom-chart');
-    }
-  };
-
-  const makeSelect = (
-    value: string,
-    onChange: (v: string) => void,
-    fields: { key: string; label: string }[],
-    placeholder: string,
-    autoLabel = '— auto —',
-  ) =>
-    fields.length > 0 ? (
-      <select
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        className="w-full px-3 py-1.5 text-sm bg-brand-800 border border-default rounded-lg text-bright focus:outline-none focus:ring-1 focus:ring-blue-500"
-      >
-        <option value="">{autoLabel}</option>
-        {fields.map((f) => <option key={f.key} value={f.key}>{f.label}</option>)}
-      </select>
-    ) : (
-      <input
-        type="text"
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        placeholder={placeholder}
-        className="w-full px-3 py-1.5 text-sm bg-brand-800 border border-default rounded-lg text-bright focus:outline-none focus:ring-1 focus:ring-blue-500"
-      />
-    );
-
-  const dimensionSelect = (value: string, onChange: (v: string) => void, placeholder: string, autoLabel?: string) =>
-    makeSelect(value, onChange, availableDimensions, placeholder, autoLabel);
-  const measureSelect = (value: string, onChange: (v: string) => void, placeholder: string, autoLabel?: string) =>
-    makeSelect(value, onChange, availableMeasures, placeholder, autoLabel);
-  const anyFieldSelect = (value: string, onChange: (v: string) => void, placeholder: string, autoLabel?: string) =>
-    makeSelect(value, onChange, allFields, placeholder, autoLabel);
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-end p-4 bg-black/40">
-      <div className="bg-brand-900 border border-default rounded-xl shadow-2xl w-[28rem] max-h-[90vh] flex flex-col">
-        <div className="flex items-center justify-between px-4 py-3 border-b border-default shrink-0">
-          <h2 className="font-bold text-bright text-sm">Configure widget</h2>
-          <button onClick={onClose} className="p-1 rounded hover:bg-white/10 text-muted-foreground hover:text-bright transition-colors">
-            <X className="h-4 w-4" />
-          </button>
-        </div>
-
-        <div className="flex-1 overflow-y-auto p-4 space-y-4">
-          <div>
-            <label className="block text-xs font-semibold text-muted-foreground mb-1">Title</label>
-            <input
-              type="text"
-              value={title}
-              onChange={(e) => setTitle(e.target.value)}
-              className="w-full px-3 py-1.5 text-sm bg-brand-800 border border-default rounded-lg text-bright focus:outline-none focus:ring-1 focus:ring-blue-500"
-            />
-          </div>
-
-          <div>
-            <label className="block text-xs font-semibold text-muted-foreground mb-1">Visualization</label>
-            <select
-              value={viz}
-              onChange={(e) => setViz(e.target.value as VizType)}
-              className="w-full px-3 py-1.5 text-sm bg-brand-800 border border-default rounded-lg text-bright focus:outline-none focus:ring-1 focus:ring-blue-500"
-            >
-              {compatibleViz.map((v) => (
-                <option key={v} value={v}>{VIZ_LABELS[v]}</option>
-              ))}
-            </select>
-          </div>
-
-          {viz !== 'markdown' && viz !== 'custom-chart' && (
-            <div className="flex rounded-lg border border-default p-0.5 text-xs">
-              <button
-                type="button"
-                onClick={() => setConfigMode('simple')}
-                className={`flex-1 py-1.5 rounded-md transition-colors ${configMode === 'simple' ? 'bg-blue-600 text-white' : 'text-muted-foreground hover:text-bright'}`}
-              >
-                Simple
-              </button>
-              <button
-                type="button"
-                onClick={() => setConfigMode('script')}
-                className={`flex-1 py-1.5 rounded-md transition-colors ${configMode === 'script' ? 'bg-blue-600 text-white' : 'text-muted-foreground hover:text-bright'}`}
-              >
-                DashScript
-              </button>
-            </div>
-          )}
-
-          {viz === 'markdown' ? (
-            <div>
-              <label className="block text-xs font-semibold text-muted-foreground mb-1">Markdown content</label>
-              <textarea
-                value={markdownContent}
-                onChange={(e) => setMarkdownContent(e.target.value)}
-                rows={8}
-                className="w-full px-3 py-1.5 text-sm bg-brand-800 border border-default rounded-lg text-bright focus:outline-none focus:ring-1 focus:ring-blue-500 font-mono resize-y"
-              />
-            </div>
-          ) : viz === 'custom-chart' ? (
-            <>
-              <div>
-                <div className="flex items-center justify-between mb-1">
-                  <label className="text-xs font-semibold text-muted-foreground">Chart.js spec (JSON)</label>
-                  <button
-                    type="button"
-                    onClick={() => setShowAiModal(true)}
-                    className="flex items-center gap-1 text-[10px] px-2 py-0.5 rounded bg-blue-600/20 hover:bg-blue-600/30 text-blue-400 hover:text-blue-300 border border-blue-500/30 transition-colors"
-                  >
-                    <Sparkles className="h-2.5 w-2.5" /> Ask AI
-                  </button>
-                </div>
-                <textarea
-                  value={chartSpecJson}
-                  onChange={(e) => { setChartSpecJson(e.target.value); setChartSpecError(null); }}
-                  rows={12}
-                  placeholder={'{\n  "type": "radar",\n  "labelField": "category",\n  "series": [{ "label": "Score", "field": "score" }]\n}'}
-                  className="w-full px-3 py-1.5 text-sm bg-brand-800 border border-default rounded-lg text-bright focus:outline-none focus:ring-1 focus:ring-blue-500 font-mono resize-y"
-                />
-                {chartSpecError && (
-                  <p className="text-xs text-red-400 mt-1">{chartSpecError}</p>
-                )}
-                <p className="text-[10px] text-muted-foreground mt-1">
-                  Supported types: bar, line, pie, doughnut, radar, polarArea, bubble, scatter.
-                  Use <code className="font-mono">labelField</code> + <code className="font-mono">series[]</code> to bind data from rows,
-                  or provide a full Chart.js <code className="font-mono">data</code> object.
-                </p>
-              </div>
-            </>
-          ) : configMode === 'script' ? (
-            <>
-              <div>
-                <div className="flex items-center justify-between mb-1">
-                  <label className="text-xs font-semibold text-muted-foreground">
-                    Measure <span className="font-normal">(KPI / gauge / stat-card)</span>
-                  </label>
-                  <button
-                    type="button"
-                    onClick={() => setShowAiModal(true)}
-                    className="flex items-center gap-1 text-[10px] px-2 py-0.5 rounded bg-blue-600/20 hover:bg-blue-600/30 text-blue-400 hover:text-blue-300 border border-blue-500/30 transition-colors"
-                  >
-                    <Sparkles className="h-2.5 w-2.5" /> Ask AI
-                  </button>
-                </div>
-                <textarea
-                  value={measure}
-                  onChange={(e) => setMeasure(e.target.value)}
-                  rows={3}
-                  placeholder={'sum("count")\nfield("health_score")\nif(score >= 80, "Good", "Poor")'}
-                  className="w-full px-3 py-1.5 text-sm bg-brand-800 border border-default rounded-lg text-bright focus:outline-none focus:ring-1 focus:ring-blue-500 font-mono resize-y"
-                />
-              </div>
-              <div>
-                <label className="block text-xs font-semibold text-muted-foreground mb-1">
-                  Transform <span className="font-normal">(charts / tables)</span>
-                </label>
-                <textarea
-                  value={transform}
-                  onChange={(e) => setTransform(e.target.value)}
-                  rows={4}
-                  placeholder={'filter(count > 0) | sort(score, desc) | take(10)'}
-                  className="w-full px-3 py-1.5 text-sm bg-brand-800 border border-default rounded-lg text-bright focus:outline-none focus:ring-1 focus:ring-blue-500 font-mono resize-y"
-                />
-              </div>
-              <details className="text-xs text-muted-foreground">
-                <summary className="cursor-pointer text-blue-400 hover:text-blue-300">DashScript reference</summary>
-                <pre className="mt-2 p-2 rounded bg-brand-950/80 overflow-x-auto whitespace-pre-wrap text-[10px] leading-relaxed">{DASHSCRIPT_HELP}</pre>
-              </details>
-              {isChart && (
-                <>
-                  <div>
-                    <label className="block text-xs font-semibold text-muted-foreground mb-1">Label field (X / dimension)</label>
-                    {dimensionSelect(xField, setXField, 'e.g. category')}
-                  </div>
-                  <div>
-                    <label className="block text-xs font-semibold text-muted-foreground mb-1">Value field (Y / measure)</label>
-                    {measureSelect(yField, setYField, 'e.g. score')}
-                  </div>
-                  <div>
-                    <label className="block text-xs font-semibold text-muted-foreground mb-1">Series field (group by)</label>
-                    {dimensionSelect(seriesField, setSeriesField, 'e.g. category', '— none (single series) —')}
-                  </div>
-                </>
-              )}
-            </>
-          ) : (
-            <>
-              {isMetric && (
-                <div>
-                  <label className="block text-xs font-semibold text-muted-foreground mb-1">Value field</label>
-                  {anyFieldSelect(valueField, setValueField, 'e.g. score')}
-                </div>
-              )}
-
-              {viz === 'stat-card' && (
-                <div>
-                  <label className="block text-xs font-semibold text-muted-foreground mb-1">Subtitle</label>
-                  <input
-                    type="text"
-                    value={subtitle}
-                    onChange={(e) => setSubtitle(e.target.value)}
-                    className="w-full px-3 py-1.5 text-sm bg-brand-800 border border-default rounded-lg text-bright focus:outline-none focus:ring-1 focus:ring-blue-500"
-                  />
-                </div>
-              )}
-
-              {isChart && (
-                <>
-                  <div>
-                    <label className="block text-xs font-semibold text-muted-foreground mb-1">Label field (X / dimension)</label>
-                    {dimensionSelect(xField, setXField, 'e.g. category')}
-                  </div>
-                  <div>
-                    <label className="block text-xs font-semibold text-muted-foreground mb-1">Value field (Y / measure)</label>
-                    {measureSelect(yField, setYField, 'e.g. score')}
-                  </div>
-                  <div>
-                    <label className="block text-xs font-semibold text-muted-foreground mb-1">Series field (group by)</label>
-                    {dimensionSelect(seriesField, setSeriesField, 'e.g. category', '— none (single series) —')}
-                  </div>
-                  <div>
-                    <label className="block text-xs font-semibold text-muted-foreground mb-1">Max items</label>
-                    <input
-                      type="number"
-                      min={1}
-                      max={100}
-                      value={chartMaxItems}
-                      onChange={(e) => setChartMaxItems(Number(e.target.value))}
-                      className="w-full px-3 py-1.5 text-sm bg-brand-800 border border-default rounded-lg text-bright focus:outline-none focus:ring-1 focus:ring-blue-500"
-                    />
-                  </div>
-                  <div>
-                    <label className="block text-xs font-semibold text-muted-foreground mb-1">Sort by value</label>
-                    <select
-                      value={chartSort}
-                      onChange={(e) => setChartSort(e.target.value as ChartSortOrder)}
-                      className="w-full px-3 py-1.5 text-sm bg-brand-800 border border-default rounded-lg text-bright focus:outline-none focus:ring-1 focus:ring-blue-500"
-                    >
-                      <option value="none">Original order</option>
-                      <option value="desc">Highest first</option>
-                      <option value="asc">Lowest first</option>
-                    </select>
-                  </div>
-                  {(viz === 'line' || viz === 'area') && (
-                    <label className="flex items-center gap-2 text-sm text-foreground">
-                      <input type="checkbox" checked={showLegend} onChange={(e) => setShowLegend(e.target.checked)} />
-                      Show legend
-                    </label>
-                  )}
-                </>
-              )}
-
-              {viz === 'kpi' && (
-                <div>
-                  <label className="block text-xs font-semibold text-muted-foreground mb-1">Aggregation (from rows)</label>
-                  <select
-                    value={aggregate}
-                    onChange={(e) => setAggregate(e.target.value as AggregateOp)}
-                    className="w-full px-3 py-1.5 text-sm bg-brand-800 border border-default rounded-lg text-bright focus:outline-none focus:ring-1 focus:ring-blue-500"
-                  >
-                    {(Object.keys(AGG_LABELS) as AggregateOp[]).map((op) => (
-                      <option key={op} value={op}>{AGG_LABELS[op]}</option>
-                    ))}
-                  </select>
-                </div>
-              )}
-
-              <div>
-                <label className="block text-xs font-semibold text-muted-foreground mb-1">Number format</label>
-                <select
-                  value={format}
-                  onChange={(e) => setFormat(e.target.value)}
-                  className="w-full px-3 py-1.5 text-sm bg-brand-800 border border-default rounded-lg text-bright focus:outline-none focus:ring-1 focus:ring-blue-500"
-                >
-                  <option value="">Default</option>
-                  <option value="0">Integer</option>
-                  <option value="0.0">1 decimal</option>
-                  <option value="0.00">2 decimals</option>
-                  <option value="score">Score (/100)</option>
-                  <option value="0.0%">Percent (from fraction)</option>
-                  <option value="pct">Percent (already 0–100)</option>
-                </select>
-              </div>
-
-              {viz === 'table' && (
-                <div>
-                  <label className="block text-xs font-semibold text-muted-foreground mb-1">Max rows</label>
-                  <input
-                    type="number"
-                    min={1}
-                    max={500}
-                    value={tableLimit}
-                    onChange={(e) => setTableLimit(Number(e.target.value))}
-                    className="w-full px-3 py-1.5 text-sm bg-brand-800 border border-default rounded-lg text-bright focus:outline-none focus:ring-1 focus:ring-blue-500"
-                  />
-                </div>
-              )}
-            </>
-          )}
-        </div>
-
-        <div className="px-4 py-3 border-t border-default shrink-0 flex gap-2">
-          <button onClick={handleSave} className="flex-1 py-2 rounded-lg bg-blue-600 hover:bg-blue-500 text-white text-sm font-medium transition-colors">
-            Apply
-          </button>
-          <button onClick={onClose} className="flex-1 py-2 rounded-lg border border-default hover:bg-white/5 text-sm text-foreground transition-colors">
-            Cancel
-          </button>
-        </div>
-      </div>
-
-      {showAiModal && (
-        <AiAssistModal
-          mode="script"
-          toolName={widget.binding.toolName}
-          propertyId={propertyId}
-          reportId={reportId}
-          currentBinding={widget.binding}
-          currentOptions={widget.options ?? {}}
-          onApplyScript={handleApplyScript}
-          onClose={() => setShowAiModal(false)}
-        />
-      )}
-    </div>
-  );
-}
diff --git a/web/src/lib/dashboard/builder/WidgetPalette.tsx b/web/src/lib/dashboard/builder/WidgetPalette.tsx
deleted file mode 100644
index 108ccb52..00000000
--- a/web/src/lib/dashboard/builder/WidgetPalette.tsx
+++ /dev/null
@@ -1,170 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { X, Search } from 'lucide-react';
-import {
-  catalogBySection,
-  catalogBySectionSections,
-  defaultDimension,
-  defaultMeasure,
-  type CatalogEntry,
-} from '@/lib/dashboard/catalog/catalog';
-import type { VizType, Widget, WidgetBinding } from '@/lib/dashboard/types';
-import { defaultWidgetLayout, newWidgetId } from '@/lib/dashboard/types';
-import { VIZ_LABELS } from '@/lib/dashboard/viz/labels';
-
-interface WidgetPaletteProps {
-  onAdd: (widget: Widget) => void;
-  onClose: () => void;
-}
-
-export default function WidgetPalette({ onAdd, onClose }: WidgetPaletteProps) {
-  const [search, setSearch] = useState('');
-  const [selected, setSelected] = useState<CatalogEntry | null>(null);
-  const [viz, setViz] = useState<VizType>('kpi');
-
-  const sections = catalogBySectionSections();
-  const bySection = catalogBySection();
-
-  const filteredSections = sections.map((s) => ({
-    section: s,
-    entries: bySection[s].filter(
-      (e) =>
-        !search ||
-        e.label.toLowerCase().includes(search.toLowerCase()) ||
-        e.description.toLowerCase().includes(search.toLowerCase()),
-    ),
-  })).filter((s) => s.entries.length > 0);
-
-  const handleSelectEntry = (entry: CatalogEntry) => {
-    setSelected(entry);
-    setViz(entry.compatibleViz[0] ?? 'kpi');
-  };
-
-  const handleAdd = () => {
-    if (!selected) return;
-
-    const binding: WidgetBinding = {
-      source: 'audit-tool',
-      toolName: selected.toolName,
-      args: selected.defaultArgs,
-      valueField: defaultMeasure(selected),
-      xField: defaultDimension(selected),
-      yField: defaultMeasure(selected),
-      select: selected.rowsPath,
-    };
-
-    onAdd({
-      id: newWidgetId(),
-      title: selected.label,
-      viz,
-      binding,
-      layout: defaultWidgetLayout(viz),
-    });
-    onClose();
-  };
-
-  const handleAddMarkdown = () => {
-    onAdd({
-      id: newWidgetId(),
-      title: 'Note',
-      viz: 'markdown',
-      binding: { source: 'audit-tool', toolName: '' },
-      layout: defaultWidgetLayout('markdown'),
-      options: { markdownContent: '## Heading\n\nAdd your notes here…' },
-    });
-    onClose();
-  };
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60">
-      <div className="bg-brand-900 border border-default rounded-xl shadow-2xl w-full max-w-3xl max-h-[80vh] flex flex-col">
-        <div className="flex items-center justify-between px-4 py-3 border-b border-default shrink-0">
-          <h2 className="font-bold text-bright">Add widget</h2>
-          <button onClick={onClose} className="p-1 rounded hover:bg-white/10 text-muted-foreground hover:text-bright transition-colors">
-            <X className="h-4 w-4" />
-          </button>
-        </div>
-
-        <div className="px-4 py-2 border-b border-default shrink-0">
-          <div className="relative">
-            <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
-            <input
-              type="search"
-              placeholder="Search data sources…"
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-              className="w-full pl-8 pr-3 py-1.5 text-sm bg-brand-800 border border-default rounded-lg text-bright placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-blue-500"
-            />
-          </div>
-        </div>
-
-        <div className="flex flex-1 min-h-0 overflow-hidden">
-          <div className="flex-1 overflow-y-auto p-3 space-y-4">
-            {(!search || 'text note markdown'.includes(search.toLowerCase())) && (
-              <div>
-                <p className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-1.5 px-1">Content</p>
-                <button
-                  onClick={handleAddMarkdown}
-                  className="w-full text-left px-3 py-2 rounded-lg border border-default hover:border-blue-500/50 hover:bg-brand-800/60 transition-colors"
-                >
-                  <p className="text-sm font-medium text-bright">Text / Markdown</p>
-                  <p className="text-xs text-muted-foreground mt-0.5">Add free-text notes or headings.</p>
-                </button>
-              </div>
-            )}
-
-            {filteredSections.map(({ section, entries }) => (
-              <div key={section}>
-                <p className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-1.5 px-1">{section}</p>
-                <div className="space-y-1">
-                  {entries.map((entry) => (
-                    <button
-                      key={entry.toolName}
-                      onClick={() => handleSelectEntry(entry)}
-                      className={`w-full text-left px-3 py-2 rounded-lg border transition-colors ${
-                        selected?.toolName === entry.toolName
-                          ? 'border-blue-500 bg-blue-500/10 text-bright'
-                          : 'border-default hover:border-blue-500/40 hover:bg-brand-800/60'
-                      }`}
-                    >
-                      <p className="text-sm font-medium text-bright">{entry.label}</p>
-                      <p className="text-xs text-muted-foreground mt-0.5">{entry.description}</p>
-                    </button>
-                  ))}
-                </div>
-              </div>
-            ))}
-          </div>
-
-          {selected && (
-            <div className="w-60 shrink-0 border-l border-default p-3 flex flex-col gap-2 overflow-y-auto">
-              <p className="text-xs font-bold uppercase tracking-wider text-muted-foreground">Visualization</p>
-              <div className="space-y-1">
-                {selected.compatibleViz.map((v) => (
-                  <button
-                    key={v}
-                    onClick={() => setViz(v)}
-                    className={`w-full text-left px-2.5 py-1.5 rounded-md text-sm transition-colors ${
-                      viz === v ? 'bg-blue-600 text-white font-medium' : 'text-foreground hover:bg-white/5'
-                    }`}
-                  >
-                    {VIZ_LABELS[v]}
-                  </button>
-                ))}
-              </div>
-              <div className="mt-auto pt-2">
-                <button
-                  onClick={handleAdd}
-                  className="w-full py-2 rounded-lg bg-blue-600 hover:bg-blue-500 text-white text-sm font-medium transition-colors"
-                >
-                  Add to dashboard
-                </button>
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/web/src/lib/dashboard/builder/specEdits.test.ts b/web/src/lib/dashboard/builder/specEdits.test.ts
new file mode 100644
index 00000000..694dfc2f
--- /dev/null
+++ b/web/src/lib/dashboard/builder/specEdits.test.ts
@@ -0,0 +1,55 @@
+import { describe, it, expect } from 'vitest';
+import {
+  withCategory,
+  withSeries,
+  withMeasureAdded,
+  withMeasureRemoved,
+  withMeasureAgg,
+  withFilterAdded,
+  withFilterUpdated,
+  withTopN,
+  defaultFilter,
+  opsForRole,
+} from '@/lib/dashboard/builder/specEdits';
+import type { QuerySpec } from '@/lib/dashboard/engine/types';
+
+const base: QuerySpec = { measures: [] };
+
+describe('specEdits', () => {
+  it('sets/clears category and series immutably', () => {
+    const a = withCategory(base, 'status');
+    expect(a.groupBy).toBe('status');
+    expect(base.groupBy).toBeUndefined(); // immutable
+    expect(withCategory(a, '').groupBy).toBeUndefined();
+    expect(withSeries(a, 'depth').series).toBe('depth');
+  });
+
+  it('adds, retags, and removes measures', () => {
+    let s = withMeasureAdded(base, { field: 'clicks', agg: 'sum', label: 'Clicks' });
+    s = withMeasureAdded(s, { field: 'impressions', agg: 'sum', label: 'Impr' });
+    expect(s.measures).toHaveLength(2);
+    s = withMeasureAgg(s, 0, 'avg');
+    expect(s.measures![0].agg).toBe('avg');
+    s = withMeasureRemoved(s, 0);
+    expect(s.measures).toHaveLength(1);
+    expect(s.measures![0].field).toBe('impressions');
+  });
+
+  it('adds and updates filters', () => {
+    let s = withFilterAdded(base, { field: 'status', op: 'in', value: ['200'] });
+    s = withFilterUpdated(s, 0, { value: ['200', '404'] });
+    expect(s.filters![0].value).toEqual(['200', '404']);
+  });
+
+  it('topN: sets and clears', () => {
+    expect(withTopN(base, 10, true).topN).toEqual({ n: 10, other: true });
+    expect(withTopN(withTopN(base, 10, true), 0, false).topN).toBeUndefined();
+  });
+
+  it('defaultFilter + opsForRole by role', () => {
+    expect(defaultFilter('x', 'measure')).toEqual({ field: 'x', op: 'gte', value: 0 });
+    expect(defaultFilter('x', 'dimension').op).toBe('in');
+    expect(opsForRole('measure')).toContain('between');
+    expect(opsForRole('dimension')).toContain('contains');
+  });
+});
diff --git a/web/src/lib/dashboard/builder/specEdits.ts b/web/src/lib/dashboard/builder/specEdits.ts
new file mode 100644
index 00000000..80a24da8
--- /dev/null
+++ b/web/src/lib/dashboard/builder/specEdits.ts
@@ -0,0 +1,73 @@
+/**
+ * Pure, immutable edits to a QuerySpec, driven by the shelf UI. Keeping these
+ * separate from React makes the shelf logic trivially testable.
+ */
+import type { QuerySpec, MeasureSpec, AggOp, Filter, FilterOp, FilterValue } from '@/lib/dashboard/engine/types';
+
+export function withCategory(spec: QuerySpec, field: string | undefined): QuerySpec {
+  return { ...spec, groupBy: field || undefined };
+}
+
+export function withSeries(spec: QuerySpec, field: string | undefined): QuerySpec {
+  return { ...spec, series: field || undefined };
+}
+
+export function withMeasureAdded(spec: QuerySpec, m: MeasureSpec): QuerySpec {
+  return { ...spec, measures: [...(spec.measures ?? []), m] };
+}
+
+export function withMeasureRemoved(spec: QuerySpec, index: number): QuerySpec {
+  return { ...spec, measures: (spec.measures ?? []).filter((_, i) => i !== index) };
+}
+
+export function withMeasureAgg(spec: QuerySpec, index: number, agg: AggOp): QuerySpec {
+  return {
+    ...spec,
+    measures: (spec.measures ?? []).map((m, i) => (i === index ? { ...m, agg } : m)),
+  };
+}
+
+export function withFilterAdded(spec: QuerySpec, filter: Filter): QuerySpec {
+  return { ...spec, filters: [...(spec.filters ?? []), filter] };
+}
+
+export function withFilterRemoved(spec: QuerySpec, index: number): QuerySpec {
+  return { ...spec, filters: (spec.filters ?? []).filter((_, i) => i !== index) };
+}
+
+export function withFilterUpdated(
+  spec: QuerySpec,
+  index: number,
+  patch: Partial<Filter>,
+): QuerySpec {
+  return {
+    ...spec,
+    filters: (spec.filters ?? []).map((f, i) => (i === index ? { ...f, ...patch } : f)),
+  };
+}
+
+export function withSort(spec: QuerySpec, by: string | 'category', dir: 'asc' | 'desc'): QuerySpec {
+  return { ...spec, sort: { by, dir } };
+}
+
+export function withTopN(spec: QuerySpec, n: number | undefined, other: boolean): QuerySpec {
+  if (!n || n <= 0) {
+    const { topN: _drop, ...rest } = spec;
+    void _drop;
+    return rest;
+  }
+  return { ...spec, topN: { n, other } };
+}
+
+/** Default filter operator + value for a freshly-dropped field. */
+export function defaultFilter(field: string, role: 'dimension' | 'measure'): Filter {
+  if (role === 'measure') return { field, op: 'gte', value: 0 };
+  return { field, op: 'in', value: [] as FilterValue };
+}
+
+/** Operators offered for a field of the given role. */
+export function opsForRole(role: 'dimension' | 'measure'): FilterOp[] {
+  return role === 'measure'
+    ? ['gte', 'lte', 'gt', 'lt', 'between', 'eq', 'neq']
+    : ['in', 'eq', 'neq', 'contains'];
+}
diff --git a/web/src/lib/dashboard/canvas/DashboardCanvas.tsx b/web/src/lib/dashboard/canvas/DashboardCanvas.tsx
new file mode 100644
index 00000000..ea6724cf
--- /dev/null
+++ b/web/src/lib/dashboard/canvas/DashboardCanvas.tsx
@@ -0,0 +1,102 @@
+'use client';
+
+import { useMemo } from 'react';
+import GridLayout from 'react-grid-layout/legacy';
+import 'react-grid-layout/css/styles.css';
+import 'react-resizable/css/styles.css';
+import type { Layout, LayoutItem } from 'react-grid-layout';
+import { WidgetFrame } from '@/lib/dashboard/widgets/WidgetFrame';
+import type { Widget } from '@/lib/dashboard/engine/doc';
+import type { QuerySpec } from '@/lib/dashboard/engine/types';
+
+const COLS = 12;
+const ROW_HEIGHT = 80;
+
+interface DashboardCanvasProps {
+  widgets: Widget[];
+  isEditing: boolean;
+  containerWidth: number;
+  selectedWidgetId?: string | null;
+  /** Effective query per widget with board interactions folded in. */
+  specForWidget?: (widget: Widget) => QuerySpec;
+  /** Active drill path per widget (for the breadcrumb). */
+  drillForWidget?: (widget: Widget) => { path: { field: string; value: string }[] } | undefined;
+  onLayoutChange: (layout: Layout) => void;
+  onEditWidget?: (id: string) => void;
+  onRemoveWidget?: (id: string) => void;
+  onDuplicateWidget?: (id: string) => void;
+  onSelectWidget?: (id: string) => void;
+  onCrossFilter?: (widgetId: string, category: string, seriesKey?: string) => void;
+  onDrillUp?: (id: string) => void;
+}
+
+export function DashboardCanvas({
+  widgets,
+  isEditing,
+  containerWidth,
+  selectedWidgetId,
+  specForWidget,
+  drillForWidget,
+  onLayoutChange,
+  onEditWidget,
+  onRemoveWidget,
+  onDuplicateWidget,
+  onSelectWidget,
+  onCrossFilter,
+  onDrillUp,
+}: DashboardCanvasProps) {
+  const layout = useMemo<LayoutItem[]>(
+    () =>
+      widgets.map((w) => ({
+        i: w.id,
+        x: w.layout.x,
+        y: w.layout.y,
+        w: w.layout.w,
+        h: w.layout.h,
+        minW: 2,
+        minH: 2,
+      })),
+    [widgets],
+  );
+
+  return (
+    <GridLayout
+      className="layout"
+      layout={layout}
+      cols={COLS}
+      rowHeight={ROW_HEIGHT}
+      width={containerWidth}
+      isDraggable={isEditing}
+      isResizable={isEditing}
+      draggableHandle=".drag-handle"
+      onDragStop={onLayoutChange}
+      onResizeStop={onLayoutChange}
+      margin={[12, 12]}
+      containerPadding={[0, 0]}
+      resizeHandles={['se', 's', 'e']}
+    >
+      {widgets.map((widget) => (
+        <div
+          key={widget.id}
+          style={{ overflow: 'hidden' }}
+          onMouseDownCapture={isEditing && onSelectWidget ? () => onSelectWidget(widget.id) : undefined}
+        >
+          <WidgetFrame
+            widget={widget}
+            isEditing={isEditing}
+            selected={selectedWidgetId === widget.id}
+            specOverride={specForWidget?.(widget)}
+            drill={(() => {
+              const d = drillForWidget?.(widget);
+              return d && d.path.length ? { path: d.path, onUp: () => onDrillUp?.(widget.id) } : undefined;
+            })()}
+            onEdit={onEditWidget}
+            onRemove={onRemoveWidget}
+            onDuplicate={onDuplicateWidget}
+            onSelect={onCrossFilter}
+          />
+        </div>
+      ))}
+    </GridLayout>
+  );
+}
diff --git a/web/src/lib/dashboard/catalog/catalog.test.ts b/web/src/lib/dashboard/catalog/catalog.test.ts
deleted file mode 100644
index f3b79c9c..00000000
--- a/web/src/lib/dashboard/catalog/catalog.test.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import {
-  DASHBOARD_CATALOG,
-  catalogEntry,
-  dimensions,
-  measures,
-  fieldKeys,
-  defaultDimension,
-  defaultMeasure,
-} from '@/lib/dashboard/catalog/catalog';
-
-describe('CatalogField helpers', () => {
-  const entry = catalogEntry('get_category_scores')!;
-
-  it('dimensions() returns only dimension fields', () => {
-    const dims = dimensions(entry);
-    expect(dims.length).toBeGreaterThan(0);
-    for (const f of dims) {
-      expect(f.role).toBe('dimension');
-    }
-  });
-
-  it('measures() returns only measure fields', () => {
-    const ms = measures(entry);
-    expect(ms.length).toBeGreaterThan(0);
-    for (const f of ms) {
-      expect(f.role).toBe('measure');
-    }
-  });
-
-  it('dimensions() + measures() together cover all fields', () => {
-    const all = fieldKeys(entry);
-    const split = [...dimensions(entry), ...measures(entry)].map((f) => f.key);
-    expect(split.sort()).toEqual(all.sort());
-  });
-
-  it('defaultDimension() returns first dimension key', () => {
-    const d = defaultDimension(entry);
-    expect(d).toBe(dimensions(entry)[0]?.key);
-  });
-
-  it('defaultMeasure() returns first measure key', () => {
-    const m = defaultMeasure(entry);
-    expect(m).toBe(measures(entry)[0]?.key);
-  });
-});
-
-describe('DASHBOARD_CATALOG integrity', () => {
-  it('every entry has fields and at least one field with a role', () => {
-    for (const e of DASHBOARD_CATALOG) {
-      expect(e.fields.length, `${e.toolName} has no fields`).toBeGreaterThan(0);
-    }
-  });
-
-  it('chart-only entries have at least one measure', () => {
-    const chartViz = ['bar', 'horizontal-bar', 'ranked-bar', 'line', 'area', 'pie', 'doughnut', 'stacked-bar'];
-    for (const e of DASHBOARD_CATALOG) {
-      const hasChartViz = e.compatibleViz.some((v) => chartViz.includes(v));
-      if (hasChartViz) {
-        const ms = measures(e);
-        expect(ms.length, `${e.toolName} supports chart viz but has no measure fields`).toBeGreaterThan(0);
-      }
-    }
-  });
-
-  it('all field roles are valid', () => {
-    for (const e of DASHBOARD_CATALOG) {
-      for (const f of e.fields) {
-        expect(['dimension', 'measure']).toContain(f.role);
-      }
-    }
-  });
-
-  it('all field keys are non-empty strings', () => {
-    for (const e of DASHBOARD_CATALOG) {
-      for (const f of e.fields) {
-        expect(typeof f.key).toBe('string');
-        expect(f.key.length).toBeGreaterThan(0);
-        expect(typeof f.label).toBe('string');
-        expect(f.label.length).toBeGreaterThan(0);
-      }
-    }
-  });
-});
diff --git a/web/src/lib/dashboard/catalog/catalog.ts b/web/src/lib/dashboard/catalog/catalog.ts
deleted file mode 100644
index d18d46fa..00000000
--- a/web/src/lib/dashboard/catalog/catalog.ts
+++ /dev/null
@@ -1,256 +0,0 @@
-import type { VizType } from '@/lib/dashboard/types';
-import type { AggregateOp } from '@/lib/dashboard/types';
-
-export type FieldRole = 'dimension' | 'measure';
-
-export interface CatalogField {
-  /** Dot-path key, e.g. 'crawl_summary.count_4xx'. */
-  key: string;
-  /** Human-readable label shown in pickers. */
-  label: string;
-  /** 'dimension' = categorical (group-by / X axis); 'measure' = numeric (Y axis / KPI). */
-  role: FieldRole;
-  /** Default aggregation for measure fields when aggregating rows. */
-  defaultAgg?: AggregateOp;
-  /** Suggested number format string (same tokens as WidgetOptions.format). */
-  format?: string;
-}
-
-export interface CatalogEntry {
-  toolName: string;
-  label: string;
-  section: string;
-  description: string;
-  defaultArgs?: Record<string, unknown>;
-  /** Dot-path into the tool result that contains the rows array. */
-  rowsPath?: string;
-  fields: CatalogField[];
-  compatibleViz: VizType[];
-}
-
-// ─── helpers ───────────────────────────────────────────────────────────────
-
-export function dimensions(e: CatalogEntry): CatalogField[] {
-  return e.fields.filter((f) => f.role === 'dimension');
-}
-
-export function measures(e: CatalogEntry): CatalogField[] {
-  return e.fields.filter((f) => f.role === 'measure');
-}
-
-export function fieldKeys(e: CatalogEntry): string[] {
-  return e.fields.map((f) => f.key);
-}
-
-/** First dimension key, used as default X / series-split field. */
-export function defaultDimension(e: CatalogEntry): string | undefined {
-  return dimensions(e)[0]?.key;
-}
-
-/** First measure key, used as default Y / KPI value field. */
-export function defaultMeasure(e: CatalogEntry): string | undefined {
-  return measures(e)[0]?.key;
-}
-
-// ─── shorthand arrays ───────────────────────────────────────────────────────
-
-const CHART_VIZ: VizType[] = ['bar', 'horizontal-bar', 'ranked-bar', 'line', 'area', 'pie', 'doughnut', 'stacked-bar', 'table'];
-const METRIC_VIZ: VizType[] = ['kpi', 'stat-card', 'gauge', 'sparkline'];
-
-// ─── catalog ────────────────────────────────────────────────────────────────
-
-export const DASHBOARD_CATALOG: CatalogEntry[] = [
-  {
-    toolName: 'get_report_summary',
-    label: 'Audit summary',
-    section: 'Overview',
-    description: 'Top-level health score and page counts from the latest audit.',
-    fields: [
-      { key: 'health_score', label: 'Health score', role: 'measure', defaultAgg: 'avg', format: '0' },
-      { key: 'total_issues', label: 'Total issues', role: 'measure', defaultAgg: 'sum' },
-      { key: 'crawl_summary.total_urls', label: 'Total URLs', role: 'measure', defaultAgg: 'sum' },
-      { key: 'crawl_summary.count_2xx', label: '2xx URLs', role: 'measure', defaultAgg: 'sum' },
-      { key: 'crawl_summary.count_4xx', label: '4xx URLs', role: 'measure', defaultAgg: 'sum' },
-      { key: 'crawl_summary.count_5xx', label: '5xx URLs', role: 'measure', defaultAgg: 'sum' },
-    ],
-    compatibleViz: [...METRIC_VIZ, 'stacked-bar'],
-  },
-  {
-    toolName: 'get_category_scores',
-    label: 'Category scores',
-    section: 'Overview',
-    description: 'Score per audit category (SEO, performance, security, etc.).',
-    rowsPath: 'categories',
-    fields: [
-      { key: 'name', label: 'Category', role: 'dimension' },
-      { key: 'score', label: 'Score', role: 'measure', defaultAgg: 'avg', format: '0' },
-      { key: 'issue_count', label: 'Issue count', role: 'measure', defaultAgg: 'sum' },
-    ],
-    compatibleViz: [...CHART_VIZ, 'stat-card'],
-  },
-  {
-    toolName: 'get_critical_issues',
-    label: 'Critical issues',
-    section: 'Overview',
-    description: 'Most impactful issues found in the audit.',
-    rowsPath: 'issues',
-    defaultArgs: { limit: 20 },
-    fields: [
-      { key: 'message', label: 'Message', role: 'dimension' },
-      { key: 'category', label: 'Category', role: 'dimension' },
-      { key: 'priority', label: 'Priority', role: 'dimension' },
-      { key: 'url', label: 'URL', role: 'dimension' },
-      { key: 'impact_score', label: 'Impact score', role: 'measure', defaultAgg: 'avg' },
-    ],
-    compatibleViz: ['table', 'bar', 'horizontal-bar', 'ranked-bar'],
-  },
-  {
-    toolName: 'get_lighthouse_summary',
-    label: 'Lighthouse summary',
-    section: 'Performance',
-    description: 'Aggregate Lighthouse scores: performance, accessibility, SEO.',
-    fields: [
-      { key: 'summary.category_scores.performance', label: 'Performance', role: 'measure', defaultAgg: 'avg', format: 'pct' },
-      { key: 'summary.category_scores.accessibility', label: 'Accessibility', role: 'measure', defaultAgg: 'avg', format: 'pct' },
-      { key: 'summary.category_scores.seo', label: 'SEO', role: 'measure', defaultAgg: 'avg', format: 'pct' },
-      { key: 'pages_audited', label: 'Pages audited', role: 'measure', defaultAgg: 'sum' },
-    ],
-    compatibleViz: [...METRIC_VIZ],
-  },
-  {
-    toolName: 'list_broken_links',
-    label: 'Broken links',
-    section: 'Links',
-    description: 'Pages returning 4xx/5xx or error status codes.',
-    rowsPath: 'broken',
-    defaultArgs: { limit: 50 },
-    fields: [
-      { key: 'url', label: 'URL', role: 'dimension' },
-      { key: 'status', label: 'Status code', role: 'dimension' },
-    ],
-    compatibleViz: ['table'],
-  },
-  {
-    toolName: 'get_image_audit_summary',
-    label: 'Image SEO summary',
-    section: 'Images',
-    description: 'Overview of image alt text, dimensions, lazy-loading, and counts.',
-    fields: [
-      { key: 'pages_missing_alt', label: 'Pages missing alt', role: 'measure', defaultAgg: 'sum' },
-      { key: 'images_total_crawled', label: 'Images crawled', role: 'measure', defaultAgg: 'sum' },
-      { key: 'pages_missing_image_dimensions', label: 'Missing dimensions', role: 'measure', defaultAgg: 'sum' },
-      { key: 'pages_without_lazy_images', label: 'No lazy-load', role: 'measure', defaultAgg: 'sum' },
-      { key: 'og_image_missing_count', label: 'Missing OG image', role: 'measure', defaultAgg: 'sum' },
-    ],
-    compatibleViz: [...METRIC_VIZ, 'bar', 'horizontal-bar', 'stacked-bar', 'pie', 'doughnut'],
-  },
-  {
-    toolName: 'list_largest_images',
-    label: 'Largest images',
-    section: 'Images',
-    description: 'Images sorted by file size — largest first.',
-    rowsPath: 'items',
-    defaultArgs: { limit: 20 },
-    fields: [
-      { key: 'url', label: 'URL', role: 'dimension' },
-      { key: 'content_type', label: 'Content type', role: 'dimension' },
-      { key: 'size_bytes', label: 'Size (bytes)', role: 'measure', defaultAgg: 'sum' },
-    ],
-    compatibleViz: ['table', 'bar', 'horizontal-bar', 'ranked-bar'],
-  },
-  {
-    toolName: 'get_axe_audit_summary',
-    label: 'Accessibility summary',
-    section: 'Accessibility',
-    description: 'Pages with axe accessibility violations.',
-    fields: [
-      { key: 'pages_with_violations', label: 'Pages with violations', role: 'measure', defaultAgg: 'sum' },
-      { key: 'total_violations', label: 'Total violations', role: 'measure', defaultAgg: 'sum' },
-    ],
-    compatibleViz: [...METRIC_VIZ, 'stacked-bar', 'bar'],
-  },
-  {
-    toolName: 'get_geo_readiness_score',
-    label: 'GEO readiness score',
-    section: 'GEO / AEO',
-    description: 'AI answer-engine readiness score and sub-scores.',
-    fields: [
-      { key: 'band', label: 'Band', role: 'dimension' },
-      { key: 'geo_readiness_score', label: 'GEO readiness', role: 'measure', defaultAgg: 'avg', format: '0' },
-      { key: 'components.schema_coverage', label: 'Schema coverage', role: 'measure', defaultAgg: 'avg', format: 'pct' },
-      { key: 'components.faq_schema_coverage', label: 'FAQ schema', role: 'measure', defaultAgg: 'avg', format: 'pct' },
-      { key: 'components.robots_ai_access', label: 'Robots AI access', role: 'measure', defaultAgg: 'avg' },
-      { key: 'components.meta_tags', label: 'Meta tags', role: 'measure', defaultAgg: 'avg' },
-    ],
-    compatibleViz: [...METRIC_VIZ],
-  },
-  {
-    toolName: 'get_agent_readiness_score',
-    label: 'Agent readiness score',
-    section: 'GEO / AEO',
-    description: 'Score for agent/MCP discoverability.',
-    fields: [
-      { key: 'grade', label: 'Grade', role: 'dimension' },
-      { key: 'agent_readiness_score', label: 'Agent readiness', role: 'measure', defaultAgg: 'avg', format: '0' },
-      { key: 'percentage', label: 'Percentage', role: 'measure', defaultAgg: 'avg', format: 'pct' },
-    ],
-    compatibleViz: [...METRIC_VIZ],
-  },
-  {
-    toolName: 'get_citability_score',
-    label: 'Citability score',
-    section: 'GEO / AEO',
-    description: 'Measures how likely LLMs are to cite pages on this site.',
-    fields: [
-      { key: 'citability_score', label: 'Citability score', role: 'measure', defaultAgg: 'avg', format: '0' },
-      { key: 'total_pages', label: 'Total pages', role: 'measure', defaultAgg: 'sum' },
-      { key: 'pages_above_50', label: 'Pages above 50', role: 'measure', defaultAgg: 'sum' },
-      { key: 'pages_above_75', label: 'Pages above 75', role: 'measure', defaultAgg: 'sum' },
-    ],
-    compatibleViz: [...METRIC_VIZ, 'stacked-bar', 'pie'],
-  },
-  {
-    toolName: 'get_eeat_signals_summary',
-    label: 'E-E-A-T signals',
-    section: 'GEO / AEO',
-    description: 'Author, organization, and about/contact page signals from the crawl.',
-    fields: [
-      { key: 'pages_with_author_schema', label: 'Author schema', role: 'measure', defaultAgg: 'sum' },
-      { key: 'pages_with_organization_schema', label: 'Org schema', role: 'measure', defaultAgg: 'sum' },
-      { key: 'about_contact_pages', label: 'About/contact pages', role: 'measure', defaultAgg: 'sum' },
-    ],
-    compatibleViz: [...METRIC_VIZ, 'bar', 'stacked-bar'],
-  },
-  {
-    toolName: 'get_google_summary',
-    label: 'Google Search Console summary',
-    section: 'Search',
-    description: 'Clicks, impressions, CTR, and average position from GSC.',
-    fields: [
-      { key: 'gsc.summary.clicks', label: 'Clicks', role: 'measure', defaultAgg: 'sum' },
-      { key: 'gsc.summary.impressions', label: 'Impressions', role: 'measure', defaultAgg: 'sum' },
-      { key: 'gsc.summary.ctr', label: 'CTR', role: 'measure', defaultAgg: 'avg', format: '0.0%' },
-      { key: 'gsc.summary.position', label: 'Avg position', role: 'measure', defaultAgg: 'avg', format: '0.0' },
-    ],
-    compatibleViz: [...METRIC_VIZ, 'bar', 'horizontal-bar', 'stacked-bar', 'line'],
-  },
-];
-
-// ─── lookup utilities ───────────────────────────────────────────────────────
-
-export function catalogBySectionSections(): string[] {
-  return [...new Set(DASHBOARD_CATALOG.map((e) => e.section))];
-}
-
-export function catalogBySection(): Record<string, CatalogEntry[]> {
-  const out: Record<string, CatalogEntry[]> = {};
-  for (const entry of DASHBOARD_CATALOG) {
-    if (!out[entry.section]) out[entry.section] = [];
-    out[entry.section].push(entry);
-  }
-  return out;
-}
-
-export function catalogEntry(toolName: string): CatalogEntry | undefined {
-  return DASHBOARD_CATALOG.find((e) => e.toolName === toolName);
-}
diff --git a/web/src/lib/dashboard/charts/ChartRenderer.tsx b/web/src/lib/dashboard/charts/ChartRenderer.tsx
new file mode 100644
index 00000000..c046a017
--- /dev/null
+++ b/web/src/lib/dashboard/charts/ChartRenderer.tsx
@@ -0,0 +1,70 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import type { QueryResult, VizType } from '@/lib/dashboard/engine/types';
+import type { VizOptions } from '@/lib/dashboard/engine/doc';
+import { VIZ_TO_OPTION } from '@/lib/dashboard/charts/optionBuilders';
+import { buildChartTheme } from '@/lib/dashboard/charts/theme';
+import type { EChartsInstance } from '@/lib/dashboard/charts/echartsCore';
+
+export interface ChartRendererProps {
+  viz: VizType;
+  result: QueryResult;
+  options?: VizOptions;
+  /** Click on a category/segment → cross-filter. */
+  onSelect?: (category: string, seriesKey?: string) => void;
+  /** Receives the ECharts instance once ready (used for PNG export). */
+  onReady?: (chart: EChartsInstance) => void;
+}
+
+export default function ChartRenderer({ viz, result, options, onSelect, onReady }: ChartRendererProps) {
+  const elRef = useRef<HTMLDivElement>(null);
+  const chartRef = useRef<EChartsInstance | null>(null);
+  const [ready, setReady] = useState(false);
+
+  const onSelectRef = useRef(onSelect);
+  onSelectRef.current = onSelect;
+  const onReadyRef = useRef(onReady);
+  onReadyRef.current = onReady;
+
+  // Init once (client only); dispose on unmount.
+  useEffect(() => {
+    let disposed = false;
+    let ro: ResizeObserver | null = null;
+    void (async () => {
+      const echarts = (await import('@/lib/dashboard/charts/echartsCore')).default;
+      if (disposed || !elRef.current) return;
+      const chart = echarts.init(elRef.current, null, { renderer: 'canvas' });
+      chartRef.current = chart;
+      chart.on('click', (params: unknown) => {
+        const p = params as { name?: string; seriesName?: string };
+        if (p?.name != null) onSelectRef.current?.(String(p.name), p.seriesName);
+      });
+      ro = new ResizeObserver(() => chart.resize());
+      ro.observe(elRef.current);
+      onReadyRef.current?.(chart);
+      setReady(true);
+    })();
+    return () => {
+      disposed = true;
+      ro?.disconnect();
+      chartRef.current?.dispose();
+      chartRef.current = null;
+    };
+  }, []);
+
+  // (Re)render the option whenever data/options/viz change.
+  useEffect(() => {
+    const chart = chartRef.current;
+    if (!chart || !ready) return;
+    const builder = VIZ_TO_OPTION[viz];
+    if (!builder) {
+      chart.clear();
+      return;
+    }
+    const theme = buildChartTheme(options?.palette);
+    chart.setOption(builder(result, options ?? {}, theme), { notMerge: true });
+  }, [ready, viz, result, options]);
+
+  return <div ref={elRef} className="w-full h-full min-h-[120px]" aria-label={`${viz} chart`} />;
+}
diff --git a/web/src/lib/dashboard/charts/echartsCore.ts b/web/src/lib/dashboard/charts/echartsCore.ts
new file mode 100644
index 00000000..b46f9bde
--- /dev/null
+++ b/web/src/lib/dashboard/charts/echartsCore.ts
@@ -0,0 +1,59 @@
+/**
+ * The ONLY module allowed to import from `echarts/*`.
+ *
+ * It registers exactly the chart types + components the dashboard uses, so the
+ * bundle is tree-shaken. ChartRenderer imports this lazily (dynamic import), so
+ * ECharts ships only in the /dashboards route chunk, never on the server.
+ *
+ * Guard: do not import `echarts/*` anywhere else — see scripts/check (grep) in
+ * the verification step. Import from here instead.
+ */
+import * as echarts from 'echarts/core';
+import {
+  BarChart,
+  LineChart,
+  PieChart,
+  ScatterChart,
+  RadarChart,
+  TreemapChart,
+  FunnelChart,
+  GaugeChart,
+  HeatmapChart,
+} from 'echarts/charts';
+import {
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+  TitleComponent,
+  DatasetComponent,
+  VisualMapComponent,
+  DataZoomComponent,
+  MarkLineComponent,
+} from 'echarts/components';
+import { LabelLayout } from 'echarts/features';
+import { CanvasRenderer } from 'echarts/renderers';
+
+echarts.use([
+  BarChart,
+  LineChart,
+  PieChart,
+  ScatterChart,
+  RadarChart,
+  TreemapChart,
+  FunnelChart,
+  GaugeChart,
+  HeatmapChart,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+  TitleComponent,
+  DatasetComponent,
+  VisualMapComponent,
+  DataZoomComponent,
+  MarkLineComponent,
+  LabelLayout,
+  CanvasRenderer,
+]);
+
+export type EChartsInstance = ReturnType<typeof echarts.init>;
+export default echarts;
diff --git a/web/src/lib/dashboard/viz/formatters.ts b/web/src/lib/dashboard/charts/format.ts
similarity index 87%
rename from web/src/lib/dashboard/viz/formatters.ts
rename to web/src/lib/dashboard/charts/format.ts
index 5491bbfe..ddb99830 100644
--- a/web/src/lib/dashboard/viz/formatters.ts
+++ b/web/src/lib/dashboard/charts/format.ts
@@ -1,13 +1,13 @@
 /**
- * Format a numeric value for display.
+ * Number formatting for KPI / table / chart labels. Salvaged from the previous
+ * dashboard implementation (viz/formatters.ts) — the only logic worth keeping.
  *
  * Supported `format` tokens:
  *   (none)   — integers grouped, decimals shown to 1 place
  *   "0"      — integer, thousands-grouped
- *   "0.0"    — fixed 1 decimal      "0.00" — fixed 2 decimals (any number of 0s)
+ *   "0.0" / "0.00" — fixed decimals (any number of 0s)
  *   "0.0%"   — value is a FRACTION (0–1); scaled ×100 and suffixed with %
- *   "%"      — legacy fraction percent, 1 decimal
- *   "pct"    — value is ALREADY a percentage (0–100); suffixed with % as-is
+ *   "pct"    — value is ALREADY a percentage (0–100); suffixed with %
  *   "score"  — rendered as "N/100"
  */
 export function formatValue(raw: number | string | null, format?: string): string {
diff --git a/web/src/lib/dashboard/charts/optionBuilders.ts b/web/src/lib/dashboard/charts/optionBuilders.ts
new file mode 100644
index 00000000..7ecbc845
--- /dev/null
+++ b/web/src/lib/dashboard/charts/optionBuilders.ts
@@ -0,0 +1,240 @@
+/**
+ * Data-driven viz → ECharts option map. Each builder turns a normalized
+ * QueryResult + VizOptions + theme into an ECharts `option` object. Adding a new
+ * chart type = add one entry here. No `echarts/*` import (options are plain JSON).
+ */
+import type { QueryResult, VizType } from '@/lib/dashboard/engine/types';
+import type { VizOptions } from '@/lib/dashboard/engine/doc';
+import type { ChartTheme } from '@/lib/dashboard/charts/theme';
+
+export type ChartOption = Record<string, unknown>;
+type Builder = (r: QueryResult, o: VizOptions, t: ChartTheme) => ChartOption;
+
+function wantsLegend(r: QueryResult, o: VizOptions): boolean {
+  return o.showLegend ?? r.series.length > 1;
+}
+
+function baseTooltip(t: ChartTheme, trigger: 'axis' | 'item') {
+  return {
+    trigger,
+    axisPointer: trigger === 'axis' ? { type: 'shadow' } : undefined,
+    backgroundColor: t.tooltipBg,
+    borderWidth: 0,
+    textStyle: { color: t.tooltipText, fontSize: 12 },
+  };
+}
+
+function legendBlock(r: QueryResult, o: VizOptions, t: ChartTheme) {
+  if (!wantsLegend(r, o)) return undefined;
+  return { type: 'scroll', top: 0, textStyle: { color: t.text, fontSize: 11 }, icon: 'roundRect' };
+}
+
+function grid(r: QueryResult, o: VizOptions) {
+  return { left: 8, right: 14, top: wantsLegend(r, o) ? 30 : 12, bottom: 6, containLabel: true };
+}
+
+function catAxis(categories: string[], t: ChartTheme) {
+  return {
+    type: 'category',
+    data: categories,
+    axisLabel: { color: t.text, hideOverlap: true, rotate: categories.length > 8 ? 30 : 0 },
+    axisLine: { lineStyle: { color: t.axis } },
+    axisTick: { show: false },
+  };
+}
+
+function valAxis(t: ChartTheme) {
+  return {
+    type: 'value',
+    axisLabel: { color: t.text },
+    splitLine: { lineStyle: { color: t.split } },
+    axisLine: { show: false },
+  };
+}
+
+function dataLabel(o: VizOptions, t: ChartTheme) {
+  return o.dataLabels ? { show: true, color: t.text, fontSize: 10 } : { show: false };
+}
+
+const bars = (horizontal: boolean, stacked: boolean): Builder => (r, o, t) => {
+  const cat = catAxis(r.categories, t);
+  const val = valAxis(t);
+  return {
+    color: t.colors,
+    tooltip: baseTooltip(t, 'axis'),
+    legend: legendBlock(r, o, t),
+    grid: grid(r, o),
+    xAxis: horizontal ? val : cat,
+    yAxis: horizontal ? cat : val,
+    series: r.series.map((s) => ({
+      type: 'bar',
+      name: s.label,
+      data: s.values,
+      stack: stacked ? 'total' : undefined,
+      barMaxWidth: 48,
+      itemStyle: { borderRadius: stacked ? 0 : horizontal ? [0, 3, 3, 0] : [3, 3, 0, 0] },
+      label: dataLabel(o, t),
+    })),
+  };
+};
+
+const lines = (area: boolean, spark = false): Builder => (r, o, t) => ({
+  color: t.colors,
+  tooltip: spark ? undefined : baseTooltip(t, 'axis'),
+  legend: spark ? undefined : legendBlock(r, o, t),
+  grid: spark ? { left: 2, right: 2, top: 2, bottom: 2 } : grid(r, o),
+  xAxis: { ...catAxis(r.categories, t), show: !spark, boundaryGap: false },
+  yAxis: { ...valAxis(t), show: !spark },
+  series: r.series.map((s) => ({
+    type: 'line',
+    name: s.label,
+    data: s.values,
+    smooth: true,
+    showSymbol: !spark && r.categories.length <= 30,
+    symbolSize: 5,
+    areaStyle: area ? { opacity: 0.18 } : undefined,
+    lineStyle: { width: spark ? 1.5 : 2 },
+    label: spark ? { show: false } : dataLabel(o, t),
+  })),
+});
+
+const pies = (donut: boolean): Builder => (r, o, t) => {
+  const s0 = r.series[0];
+  return {
+    color: t.colors,
+    tooltip: baseTooltip(t, 'item'),
+    legend: legendBlock(r, o, t),
+    series: [
+      {
+        type: 'pie',
+        radius: donut ? ['42%', '70%'] : '70%',
+        center: ['50%', wantsLegend(r, o) ? '56%' : '50%'],
+        avoidLabelOverlap: true,
+        data: r.categories.map((c, i) => ({ name: c, value: s0?.values[i] ?? 0 })),
+        label: { color: t.text, show: o.dataLabels ?? r.categories.length <= 8 },
+        itemStyle: { borderColor: t.tooltipBg, borderWidth: 1 },
+      },
+    ],
+  };
+};
+
+const scatter: Builder = (r, o, t) => {
+  const xs = r.series[0]?.values ?? [];
+  const ys = r.series[1]?.values ?? [];
+  const hasY = r.series.length >= 2;
+  const data = r.categories.map((c, i) => [hasY ? xs[i] : i, hasY ? ys[i] : xs[i], c]);
+  return {
+    color: t.colors,
+    tooltip: { ...baseTooltip(t, 'item'), formatter: undefined },
+    grid: grid(r, o),
+    xAxis: { ...valAxis(t), name: hasY ? r.series[0]?.label : undefined, scale: true },
+    yAxis: { ...valAxis(t), name: hasY ? r.series[1]?.label : r.series[0]?.label, scale: true },
+    series: [{ type: 'scatter', data, symbolSize: 10 }],
+  };
+};
+
+const radar: Builder = (r, o, t) => {
+  const max = Math.max(1, ...r.series.flatMap((s) => s.values));
+  return {
+    color: t.colors,
+    tooltip: baseTooltip(t, 'item'),
+    legend: legendBlock(r, o, t),
+    radar: {
+      indicator: r.categories.map((c) => ({ name: c, max })),
+      axisName: { color: t.text, fontSize: 10 },
+      splitLine: { lineStyle: { color: t.split } },
+      axisLine: { lineStyle: { color: t.split } },
+    },
+    series: [
+      {
+        type: 'radar',
+        data: r.series.map((s) => ({ name: s.label, value: s.values, areaStyle: { opacity: 0.1 } })),
+      },
+    ],
+  };
+};
+
+const partition = (type: 'treemap' | 'funnel'): Builder => (r, o, t) => {
+  const s0 = r.series[0];
+  const data = r.categories.map((c, i) => ({ name: c, value: s0?.values[i] ?? 0 }));
+  return {
+    color: t.colors,
+    tooltip: baseTooltip(t, 'item'),
+    series: [
+      type === 'treemap'
+        ? { type: 'treemap', roam: false, breadcrumb: { show: false }, data, label: { color: '#fff' } }
+        : { type: 'funnel', sort: 'descending', data, label: { color: t.text, show: true } },
+    ],
+  };
+};
+
+const heatmap: Builder = (r, o, t) => {
+  // series = y rows; categories = x. data points [xIndex, yIndex, value].
+  const data: [number, number, number][] = [];
+  let max = 0;
+  r.series.forEach((s, y) => {
+    s.values.forEach((v, x) => {
+      data.push([x, y, v]);
+      if (v > max) max = v;
+    });
+  });
+  return {
+    tooltip: baseTooltip(t, 'item'),
+    grid: { left: 8, right: 14, top: 30, bottom: 6, containLabel: true },
+    xAxis: { type: 'category', data: r.categories, axisLabel: { color: t.text, rotate: r.categories.length > 8 ? 30 : 0 }, axisLine: { lineStyle: { color: t.axis } } },
+    yAxis: { type: 'category', data: r.series.map((s) => s.label), axisLabel: { color: t.text }, axisLine: { lineStyle: { color: t.axis } } },
+    visualMap: { min: 0, max: max || 1, calculable: true, orient: 'horizontal', left: 'center', bottom: 0, textStyle: { color: t.text }, inRange: { color: ['#1e293b', t.colors[0], t.colors[1]] } },
+    series: [{ type: 'heatmap', data, label: { show: o.dataLabels ?? false } }],
+  };
+};
+
+const gauge: Builder = (r, o, t) => {
+  const min = o.axisMin ?? 0;
+  const max = o.axisMax ?? 100;
+  const value = r.scalar ?? 0;
+  let axisColor: [number, string][] = [[1, t.colors[0]]];
+  if (o.thresholds?.length) {
+    const sorted = [...o.thresholds].sort((a, b) => a.value - b.value);
+    axisColor = sorted.map((th) => [Math.min(1, Math.max(0, (th.value - min) / (max - min || 1))), th.color]);
+    if (axisColor[axisColor.length - 1][0] < 1) axisColor.push([1, sorted[sorted.length - 1].color]);
+  }
+  return {
+    series: [
+      {
+        type: 'gauge',
+        min,
+        max,
+        progress: { show: false },
+        axisLine: { lineStyle: { width: 12, color: axisColor } },
+        axisTick: { show: false },
+        splitLine: { length: 10, lineStyle: { color: t.axis } },
+        axisLabel: { color: t.text, fontSize: 9, distance: 12 },
+        pointer: { itemStyle: { color: 'auto' } },
+        detail: { valueAnimation: true, color: t.text, fontSize: 22, offsetCenter: [0, '60%'], formatter: '{value}' },
+        data: [{ value: Math.round(value * 100) / 100 }],
+      },
+    ],
+  };
+};
+
+export const VIZ_TO_OPTION: Partial<Record<VizType, Builder>> = {
+  bar: bars(false, false),
+  'horizontal-bar': bars(true, false),
+  'stacked-bar': bars(false, true),
+  line: lines(false),
+  area: lines(true),
+  sparkline: lines(false, true),
+  pie: pies(false),
+  doughnut: pies(true),
+  scatter,
+  radar,
+  treemap: partition('treemap'),
+  funnel: partition('funnel'),
+  heatmap,
+  gauge,
+};
+
+/** True when this viz renders through ChartRenderer (ECharts) vs a dedicated widget. */
+export function isEChartsViz(viz: VizType): boolean {
+  return viz in VIZ_TO_OPTION;
+}
diff --git a/web/src/lib/dashboard/charts/theme.ts b/web/src/lib/dashboard/charts/theme.ts
new file mode 100644
index 00000000..ed4b61f2
--- /dev/null
+++ b/web/src/lib/dashboard/charts/theme.ts
@@ -0,0 +1,41 @@
+/**
+ * Resolve chart theme colors from the app's CSS variables (so dashboards match
+ * Lighthouse / Overview and follow dark/light + custom accent at runtime).
+ * Reuses the shared categorical palette.
+ */
+import { PALETTE_CATEGORICAL } from '@/utils/chartPalette';
+
+export interface ChartTheme {
+  colors: string[];
+  text: string;
+  axis: string;
+  split: string;
+  tooltipBg: string;
+  tooltipText: string;
+}
+
+function cssVar(name: string, fallback: string): string {
+  if (typeof window === 'undefined') return fallback;
+  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+  return v || fallback;
+}
+
+const PALETTES: Record<string, string[]> = {
+  default: PALETTE_CATEGORICAL,
+  cool: ['#4C72B0', '#6B8E9F', '#55A868', '#8172B3', '#3B82F6', '#06B6D4', '#0EA5E9', '#14B8A6'],
+  warm: ['#DD8452', '#C44E52', '#EAB308', '#F97316', '#EF4444', '#F59E0B', '#FB923C', '#937860'],
+  mono: ['#4C72B0', '#6E86B8', '#8F9BC0', '#3A5C95', '#5A77AE', '#7E93C2', '#2E4E86', '#9FAFD0'],
+};
+
+export function buildChartTheme(paletteId?: string): ChartTheme {
+  return {
+    colors: PALETTES[paletteId ?? 'default'] ?? PALETTE_CATEGORICAL,
+    text: cssVar('--app-text', '#334155'),
+    axis: cssVar('--chart-grid', 'rgba(148,163,184,0.4)'),
+    split: cssVar('--chart-grid', 'rgba(148,163,184,0.2)'),
+    tooltipBg: cssVar('--app-bg-elevated', '#111827'),
+    tooltipText: cssVar('--app-text-heading', '#e5e7eb'),
+  };
+}
+
+export const PALETTE_IDS = Object.keys(PALETTES);
diff --git a/web/src/lib/dashboard/charts/vizMeta.ts b/web/src/lib/dashboard/charts/vizMeta.ts
new file mode 100644
index 00000000..86fce22f
--- /dev/null
+++ b/web/src/lib/dashboard/charts/vizMeta.ts
@@ -0,0 +1,52 @@
+/** Display metadata + shelf requirements for each viz type (drives the gallery). */
+import type { VizType, QuerySpec } from '@/lib/dashboard/engine/types';
+
+export interface VizMeta {
+  label: string;
+  group: 'Metric' | 'Bar' | 'Trend' | 'Part' | 'Relationship' | 'Data';
+  /** Renders a single value (uses scalar). */
+  scalar?: boolean;
+  /** Needs a Category dimension (group-by). */
+  needsCategory?: boolean;
+  /** Minimum measures on the Values shelf. */
+  minMeasures?: number;
+  /** Needs a Legend/series dimension. */
+  needsSeries?: boolean;
+}
+
+export const VIZ_META: Record<VizType, VizMeta> = {
+  kpi: { label: 'KPI number', group: 'Metric', scalar: true, minMeasures: 1 },
+  'stat-card': { label: 'Stat card', group: 'Metric', scalar: true, minMeasures: 1 },
+  gauge: { label: 'Gauge', group: 'Metric', scalar: true, minMeasures: 1 },
+  sparkline: { label: 'Sparkline', group: 'Metric', needsCategory: true, minMeasures: 1 },
+  bar: { label: 'Bar', group: 'Bar', needsCategory: true, minMeasures: 1 },
+  'horizontal-bar': { label: 'Horizontal bar', group: 'Bar', needsCategory: true, minMeasures: 1 },
+  'stacked-bar': { label: 'Stacked bar', group: 'Bar', needsCategory: true, minMeasures: 1, needsSeries: true },
+  line: { label: 'Line', group: 'Trend', needsCategory: true, minMeasures: 1 },
+  area: { label: 'Area', group: 'Trend', needsCategory: true, minMeasures: 1 },
+  pie: { label: 'Pie', group: 'Part', needsCategory: true, minMeasures: 1 },
+  doughnut: { label: 'Doughnut', group: 'Part', needsCategory: true, minMeasures: 1 },
+  treemap: { label: 'Treemap', group: 'Part', needsCategory: true, minMeasures: 1 },
+  funnel: { label: 'Funnel', group: 'Part', needsCategory: true, minMeasures: 1 },
+  scatter: { label: 'Scatter', group: 'Relationship', minMeasures: 2 },
+  radar: { label: 'Radar', group: 'Relationship', needsCategory: true, minMeasures: 1 },
+  heatmap: { label: 'Heatmap', group: 'Relationship', needsCategory: true, needsSeries: true, minMeasures: 1 },
+  table: { label: 'Table', group: 'Data' },
+  text: { label: 'Text', group: 'Data' },
+};
+
+export const ALL_VIZ = Object.keys(VIZ_META) as VizType[];
+
+export const VIZ_LABELS: Record<VizType, string> = Object.fromEntries(
+  ALL_VIZ.map((v) => [v, VIZ_META[v].label]),
+) as Record<VizType, string>;
+
+/** Whether a viz can be satisfied by the current query spec (for greying out the gallery). */
+export function vizFitsSpec(viz: VizType, spec: QuerySpec): boolean {
+  const m = VIZ_META[viz];
+  const measures = spec.measures?.length ?? 0;
+  if (m.minMeasures && measures < m.minMeasures) return false;
+  if (m.needsCategory && !spec.groupBy) return false;
+  if (m.needsSeries && !spec.series) return false;
+  return true;
+}
diff --git a/web/src/lib/dashboard/data/fetchWidgetData.test.ts b/web/src/lib/dashboard/data/fetchWidgetData.test.ts
deleted file mode 100644
index e97ba5ee..00000000
--- a/web/src/lib/dashboard/data/fetchWidgetData.test.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { applyFilters } from '@/lib/dashboard/data/fetchWidgetData';
-import type { DashboardFilter, CrossFilter } from '@/lib/dashboard/types';
-
-const ROWS = [
-  { name: 'SEO', score: 80, status: 'good' },
-  { name: 'Performance', score: 50, status: 'warn' },
-  { name: 'Security', score: 20, status: 'poor' },
-];
-
-describe('applyFilters', () => {
-  it('returns all rows when no filters', () => {
-    expect(applyFilters(ROWS, [], 'get_category_scores')).toHaveLength(3);
-  });
-
-  it('filters by single select', () => {
-    const f: DashboardFilter = {
-      id: 'f1', label: 'Status', field: 'status', type: 'select', value: 'good',
-    };
-    const result = applyFilters(ROWS, [f], 'get_category_scores');
-    expect(result).toHaveLength(1);
-    expect(result[0]!.name).toBe('SEO');
-  });
-
-  it('filters by multiselect', () => {
-    const f: DashboardFilter = {
-      id: 'f1', label: 'Status', field: 'status', type: 'multiselect', value: ['good', 'warn'],
-    };
-    const result = applyFilters(ROWS, [f], 'get_category_scores');
-    expect(result).toHaveLength(2);
-  });
-
-  it('filters by search (substring)', () => {
-    const f: DashboardFilter = {
-      id: 'f1', label: 'Name', field: 'name', type: 'search', value: 'sec',
-    };
-    const result = applyFilters(ROWS, [f], 'get_category_scores');
-    expect(result).toHaveLength(1);
-    expect(result[0]!.name).toBe('Security');
-  });
-
-  it('filters by cross-filter (exact match)', () => {
-    const cf: CrossFilter = {
-      id: 'cf1', field: 'status', value: 'poor', sourceWidgetId: 'w1',
-    };
-    const result = applyFilters(ROWS, [cf], 'get_category_scores');
-    expect(result).toHaveLength(1);
-    expect(result[0]!.name).toBe('Security');
-  });
-
-  it('respects appliesTo — skips filter for non-matching toolName', () => {
-    const f: DashboardFilter = {
-      id: 'f1', label: 'Status', field: 'status', type: 'select', value: 'good',
-      appliesTo: ['other_tool'],
-    };
-    const result = applyFilters(ROWS, [f], 'get_category_scores');
-    expect(result).toHaveLength(3);
-  });
-
-  it('applies multiple filters as AND', () => {
-    const f1: DashboardFilter = {
-      id: 'f1', label: 'Status', field: 'status', type: 'select', value: 'warn',
-    };
-    const cf: CrossFilter = {
-      id: 'cf1', field: 'name', value: 'Performance', sourceWidgetId: 'w1',
-    };
-    const result = applyFilters(ROWS, [f1, cf], 'get_category_scores');
-    expect(result).toHaveLength(1);
-    expect(result[0]!.name).toBe('Performance');
-  });
-
-  it('empty select value passes all rows through', () => {
-    const f: DashboardFilter = {
-      id: 'f1', label: 'Status', field: 'status', type: 'select', value: '',
-    };
-    expect(applyFilters(ROWS, [f], 'get_category_scores')).toHaveLength(3);
-  });
-});
diff --git a/web/src/lib/dashboard/data/fetchWidgetData.ts b/web/src/lib/dashboard/data/fetchWidgetData.ts
deleted file mode 100644
index 03dd5a0d..00000000
--- a/web/src/lib/dashboard/data/fetchWidgetData.ts
+++ /dev/null
@@ -1,197 +0,0 @@
-import { fetchAuditTool } from '@/lib/fetchAuditTool';
-import type { WidgetBinding, AggregateOp, DashboardFilter, CrossFilter } from '@/lib/dashboard/types';
-import { evalMeasure, evalTransform } from '@/lib/dashboard/script/eval';
-import { DashScriptError } from '@/lib/dashboard/script/types';
-
-export interface WidgetData {
-  raw: Record<string, unknown>;
-  rows: Record<string, unknown>[];
-  kpiValue: number | string | null;
-}
-
-function getPath(obj: unknown, path: string | undefined): unknown {
-  if (!path) return obj;
-  return path.split('.').reduce<unknown>((cur, key) => {
-    if (cur == null || typeof cur !== 'object') return undefined;
-    return (cur as Record<string, unknown>)[key];
-  }, obj);
-}
-
-function asRows(val: unknown): Record<string, unknown>[] {
-  if (Array.isArray(val)) return val as Record<string, unknown>[];
-  if (val != null && typeof val === 'object') {
-    const obj = val as Record<string, unknown>;
-    const arr = Object.values(obj).find(Array.isArray);
-    if (arr) return arr as Record<string, unknown>[];
-  }
-  return [];
-}
-
-function aggregate(rows: Record<string, unknown>[], field: string | undefined, op: AggregateOp): number | null {
-  if (!field || !rows.length) return null;
-  const nums = rows.map((r) => Number(r[field] ?? 0)).filter(Number.isFinite);
-  if (!nums.length) return null;
-  switch (op) {
-    case 'sum': return nums.reduce((a, b) => a + b, 0);
-    case 'avg': return nums.reduce((a, b) => a + b, 0) / nums.length;
-    case 'count': return nums.length;
-    case 'max': return Math.max(...nums);
-    case 'min': return Math.min(...nums);
-    default: return null;
-  }
-}
-
-const IN_FLIGHT = new Map<string, Promise<Record<string, unknown>>>();
-const RESULT_CACHE = new Map<string, { at: number; value: Record<string, unknown> }>();
-
-/** How long a tool result is reused before refetching. Audit data is static between reports. */
-export const WIDGET_DATA_TTL_MS = 30_000;
-
-function cacheKey(toolName: string, propertyId: number, reportId: number | null | undefined, args: Record<string, unknown>): string {
-  return `${toolName}|${propertyId}|${reportId ?? ''}|${JSON.stringify(args)}`;
-}
-
-/**
- * Clear cached widget results. Call when the active report/property changes so
- * widgets refetch fresh data instead of serving a stale cached payload.
- */
-export function clearWidgetDataCache(): void {
-  RESULT_CACHE.clear();
-}
-
-// ─── applyFilters ───────────────────────────────────────────────────────────
-
-function getPathLocal(obj: unknown, path: string): unknown {
-  return path.split('.').reduce<unknown>((cur, key) => {
-    if (cur == null || typeof cur !== 'object') return undefined;
-    return (cur as Record<string, unknown>)[key];
-  }, obj);
-}
-
-/**
- * Apply board-level filters + cross-filters to a row array.
- * Filters are applied client-side (audit data is small and already row-based).
- * When `appliesTo` is set, the filter only runs for matching toolNames.
- */
-export function applyFilters(
-  rows: Record<string, unknown>[],
-  filters: (DashboardFilter | CrossFilter)[],
-  toolName: string,
-): Record<string, unknown>[] {
-  if (!filters.length) return rows;
-  return rows.filter((row) => {
-    for (const f of filters) {
-      // DashboardFilter has `appliesTo`; CrossFilter has `sourceWidgetId`
-      if ('appliesTo' in f && f.appliesTo && !f.appliesTo.includes(toolName)) continue;
-
-      const rawVal = getPathLocal(row, f.field);
-      const rowVal = rawVal == null ? '' : String(rawVal);
-
-      if ('value' in f && f.value !== undefined && f.value !== '') {
-        if ('type' in f) {
-          // DashboardFilter
-          const df = f as DashboardFilter;
-          if (df.type === 'multiselect' && Array.isArray(df.value)) {
-            if (df.value.length > 0 && !df.value.includes(rowVal)) return false;
-          } else if (df.type === 'search') {
-            const search = typeof df.value === 'string' ? df.value.toLowerCase() : '';
-            if (search && !rowVal.toLowerCase().includes(search)) return false;
-          } else {
-            const sel = typeof df.value === 'string' ? df.value : '';
-            if (sel && rowVal !== sel) return false;
-          }
-        } else {
-          // CrossFilter
-          const cf = f as CrossFilter;
-          if (cf.value && rowVal !== cf.value) return false;
-        }
-      }
-    }
-    return true;
-  });
-}
-
-async function fetchWithCache(
-  toolName: string,
-  propertyId: number,
-  reportId: number | null | undefined,
-  args: Record<string, unknown>,
-): Promise<Record<string, unknown>> {
-  const key = cacheKey(toolName, propertyId, reportId, args);
-
-  const cached = RESULT_CACHE.get(key);
-  if (cached && Date.now() - cached.at < WIDGET_DATA_TTL_MS) return cached.value;
-
-  const existing = IN_FLIGHT.get(key);
-  if (existing) return existing;
-
-  const promise = fetchAuditTool({ toolName, propertyId, reportId, args })
-    .then((value) => {
-      RESULT_CACHE.set(key, { at: Date.now(), value });
-      return value;
-    })
-    .finally(() => {
-      IN_FLIGHT.delete(key);
-    });
-  IN_FLIGHT.set(key, promise);
-  return promise;
-}
-
-export async function fetchWidgetData(
-  binding: WidgetBinding,
-  propertyId: number,
-  reportId: number | null | undefined,
-  activeFilters?: (DashboardFilter | CrossFilter)[],
-): Promise<WidgetData> {
-  const args = binding.args ?? {};
-  const raw = await fetchWithCache(binding.toolName, propertyId, reportId, args);
-
-  const selected = getPath(raw, binding.select);
-  const context = selected ?? raw;
-  const rowsRaw = asRows(context);
-
-  let kpiValue: number | string | null = null;
-  let rows = rowsRaw;
-
-  const scriptCtx = { raw, rows: rowsRaw };
-
-  // Apply board filters + cross-filters before scripting / aggregating
-  if (activeFilters?.length) {
-    rows = applyFilters(rows, activeFilters, binding.toolName);
-  }
-
-  if (binding.useScript && binding.transform?.trim()) {
-    try {
-      rows = evalTransform(binding.transform, scriptCtx);
-    } catch (e) {
-      if (e instanceof DashScriptError) throw e;
-      throw new Error(e instanceof Error ? e.message : String(e));
-    }
-  }
-
-  if (binding.useScript && binding.measure?.trim()) {
-    try {
-      kpiValue = evalMeasure(binding.measure, { raw, rows });
-    } catch (e) {
-      if (e instanceof DashScriptError) throw e;
-      throw new Error(e instanceof Error ? e.message : String(e));
-    }
-  } else {
-    if (binding.valueField) {
-      // Resolve against the selected context first, then fall back to the raw result.
-      // This lets a single tool feed both a rows-based chart (via `select`) and a
-      // scalar KPI from a top-level field, without the two bindings fighting.
-      const direct = getPath(context, binding.valueField) ?? getPath(raw, binding.valueField);
-      if (direct !== undefined && direct !== null) {
-        kpiValue = typeof direct === 'number' || typeof direct === 'string' ? direct : String(direct);
-      }
-    }
-
-    if (kpiValue === null && binding.aggregate && binding.aggregate !== 'none' && binding.yField) {
-      const agg = aggregate(rowsRaw, binding.yField, binding.aggregate);
-      if (agg !== null) kpiValue = agg;
-    }
-  }
-
-  return { raw, rows, kpiValue };
-}
diff --git a/web/src/lib/dashboard/engine/accessors.test.ts b/web/src/lib/dashboard/engine/accessors.test.ts
new file mode 100644
index 00000000..bd59ac83
--- /dev/null
+++ b/web/src/lib/dashboard/engine/accessors.test.ts
@@ -0,0 +1,75 @@
+import { describe, it, expect } from 'vitest';
+import {
+  fromParallel,
+  fromMap,
+  flattenCategoryIssues,
+  flattenLighthouseByUrl,
+  flatPrefix,
+} from '@/lib/dashboard/engine/accessors';
+
+describe('fromParallel', () => {
+  it('zips labels and values', () => {
+    expect(fromParallel(['a', 'b'], [1, 2])).toEqual([
+      { label: 'a', value: 1 },
+      { label: 'b', value: 2 },
+    ]);
+  });
+  it('defaults missing values to 0 and tolerates absent arrays', () => {
+    expect(fromParallel(['a', 'b'], [5])).toEqual([
+      { label: 'a', value: 5 },
+      { label: 'b', value: 0 },
+    ]);
+    expect(fromParallel(undefined, [1])).toEqual([]);
+  });
+});
+
+describe('fromMap', () => {
+  it('turns a record into label/value rows', () => {
+    expect(fromMap({ '200': 10, '404': 2 })).toEqual([
+      { label: '200', value: 10 },
+      { label: '404', value: 2 },
+    ]);
+  });
+  it('handles null/undefined', () => {
+    expect(fromMap(null)).toEqual([]);
+    expect(fromMap(undefined)).toEqual([]);
+  });
+});
+
+describe('flattenCategoryIssues', () => {
+  it('flattens issues and attaches category context', () => {
+    const rows = flattenCategoryIssues([
+      { name: 'SEO', score: 80, issues: [{ message: 'm1', priority: 'High' }] },
+      { name: 'Perf', score: 50, issues: [{ message: 'm2' }, { message: 'm3' }] },
+    ]);
+    expect(rows).toHaveLength(3);
+    expect(rows[0]).toMatchObject({ message: 'm1', priority: 'High', category: 'SEO', category_score: 80 });
+    expect(rows[2]).toMatchObject({ message: 'm3', category: 'Perf', category_score: 50 });
+  });
+  it('handles missing issues / input', () => {
+    expect(flattenCategoryIssues([{ name: 'X' }])).toEqual([]);
+    expect(flattenCategoryIssues(undefined)).toEqual([]);
+  });
+});
+
+describe('flattenLighthouseByUrl', () => {
+  it('produces one row per url with coerced scores', () => {
+    const rows = flattenLighthouseByUrl({
+      'https://a/': { category_scores: { performance: 0.9, seo: 1 }, median_metrics: { lcp_ms: 1200 } },
+    });
+    expect(rows).toHaveLength(1);
+    expect(rows[0]).toMatchObject({ url: 'https://a/', performance_score: 0.9, seo_score: 1, lcp_ms: 1200 });
+  });
+  it('handles empty input', () => {
+    expect(flattenLighthouseByUrl(undefined)).toEqual([]);
+  });
+});
+
+describe('flatPrefix', () => {
+  it('prefixes keys', () => {
+    expect(flatPrefix('gsc', { clicks: 1, ctr: 0.1 })).toEqual({ 'gsc.clicks': 1, 'gsc.ctr': 0.1 });
+  });
+  it('handles nullish', () => {
+    expect(flatPrefix('x', null)).toEqual({});
+  });
+});
diff --git a/web/src/lib/dashboard/engine/accessors.ts b/web/src/lib/dashboard/engine/accessors.ts
new file mode 100644
index 00000000..3d41a5e6
--- /dev/null
+++ b/web/src/lib/dashboard/engine/accessors.ts
@@ -0,0 +1,67 @@
+/**
+ * Adapters that turn the awkward shapes inside ReportPayload into uniform
+ * `Record<string, unknown>[]` row arrays the query engine can consume.
+ */
+import type {
+  ReportCategory,
+  LighthousePageSummary,
+} from '@/types/report';
+import { toNumber } from '@/lib/dashboard/engine/coerce';
+
+/** Parallel arrays → [{label, value}]. e.g. `mime_labels` + `mime_values`. */
+export function fromParallel(labels?: unknown[], values?: unknown[]): Record<string, unknown>[] {
+  if (!Array.isArray(labels)) return [];
+  return labels.map((l, i) => ({
+    label: String(l ?? ''),
+    value: toNumber(Array.isArray(values) ? values[i] : undefined) ?? 0,
+  }));
+}
+
+/** `Record<string, number>` → [{label, value}]. e.g. `status_counts`, `depth_distribution.by_depth`. */
+export function fromMap(map?: Record<string, unknown> | null): Record<string, unknown>[] {
+  if (!map || typeof map !== 'object') return [];
+  return Object.entries(map).map(([label, v]) => ({ label, value: toNumber(v) ?? 0 }));
+}
+
+/** Flatten `categories[].issues` into one row per issue, carrying category context. */
+export function flattenCategoryIssues(cats?: ReportCategory[]): Record<string, unknown>[] {
+  if (!Array.isArray(cats)) return [];
+  return cats.flatMap((c) =>
+    (c.issues ?? []).map((iss) => ({
+      ...iss,
+      category: c.name ?? c.id ?? '',
+      category_score: c.score ?? null,
+    })),
+  );
+}
+
+/** `lighthouse_by_url: Record<url, summary>` → one flattened row per URL. */
+export function flattenLighthouseByUrl(
+  byUrl?: Record<string, LighthousePageSummary>,
+): Record<string, unknown>[] {
+  if (!byUrl || typeof byUrl !== 'object') return [];
+  return Object.entries(byUrl).map(([url, s]) => {
+    const cat = (s?.category_scores ?? {}) as Record<string, unknown>;
+    const med = (s?.median_metrics ?? {}) as Record<string, unknown>;
+    return {
+      url,
+      strategy: s?.strategy ?? s?.device ?? '',
+      performance_score: toNumber(cat.performance),
+      accessibility_score: toNumber(cat.accessibility),
+      seo_score: toNumber(cat.seo),
+      best_practices_score: toNumber(cat['best-practices']),
+      lcp_ms: toNumber(med.lcp_ms),
+      cls: toNumber(med.cls),
+      tbt_ms: toNumber(med.tbt_ms),
+      fcp_ms: toNumber(med.fcp_ms),
+    };
+  });
+}
+
+/** Prefix every key of a flat object: `flatPrefix('gsc', {clicks: 1})` → `{'gsc.clicks': 1}`. */
+export function flatPrefix(prefix: string, obj?: Record<string, unknown> | null): Record<string, unknown> {
+  if (!obj || typeof obj !== 'object') return {};
+  const out: Record<string, unknown> = {};
+  for (const [k, v] of Object.entries(obj)) out[`${prefix}.${k}`] = v;
+  return out;
+}
diff --git a/web/src/lib/dashboard/engine/aggregate.test.ts b/web/src/lib/dashboard/engine/aggregate.test.ts
new file mode 100644
index 00000000..b3c79619
--- /dev/null
+++ b/web/src/lib/dashboard/engine/aggregate.test.ts
@@ -0,0 +1,55 @@
+import { describe, it, expect } from 'vitest';
+import { newAcc, step, mergeAcc, finalize } from '@/lib/dashboard/engine/aggregate';
+import { toNumber } from '@/lib/dashboard/engine/coerce';
+
+function feed(values: unknown[]) {
+  const acc = newAcc();
+  for (const v of values) step(acc, v, toNumber(v));
+  return acc;
+}
+
+describe('aggregate finalize', () => {
+  it('sum / avg / min / max / median over numbers', () => {
+    const acc = feed([1, 2, 3, 4]);
+    expect(finalize(acc, 'sum')).toBe(10);
+    expect(finalize(acc, 'avg')).toBe(2.5);
+    expect(finalize(acc, 'min')).toBe(1);
+    expect(finalize(acc, 'max')).toBe(4);
+    expect(finalize(acc, 'median')).toBe(2.5);
+  });
+
+  it('count counts presence, countDistinct counts unique', () => {
+    const acc = feed(['a', 'a', 'b', '', null]);
+    expect(finalize(acc, 'count')).toBe(3); // '' and null are absent
+    expect(finalize(acc, 'countDistinct')).toBe(2);
+  });
+
+  it('skips nulls in numeric aggregates (not coerced to 0)', () => {
+    const acc = feed([10, null, 'x', 20]); // 'x' -> null, null -> null
+    expect(finalize(acc, 'avg')).toBe(15); // (10+20)/2, not /4
+    expect(finalize(acc, 'sum')).toBe(30);
+    expect(finalize(acc, 'min')).toBe(10);
+  });
+
+  it('empty group: sum/count → 0, avg/min/max/median → null', () => {
+    const acc = newAcc();
+    expect(finalize(acc, 'sum')).toBe(0);
+    expect(finalize(acc, 'count')).toBe(0);
+    expect(finalize(acc, 'countDistinct')).toBe(0);
+    expect(finalize(acc, 'avg')).toBeNull();
+    expect(finalize(acc, 'min')).toBeNull();
+    expect(finalize(acc, 'max')).toBeNull();
+    expect(finalize(acc, 'median')).toBeNull();
+  });
+
+  it('mergeAcc produces a correct combined avg/median (for Top-N Other)', () => {
+    const a = feed([1, 2, 3]);
+    const b = feed([4, 5, 6, 7]);
+    mergeAcc(a, b);
+    expect(finalize(a, 'sum')).toBe(28);
+    expect(finalize(a, 'avg')).toBe(4); // 28 / 7 — true mean, not mean of means
+    expect(finalize(a, 'median')).toBe(4);
+    expect(finalize(a, 'max')).toBe(7);
+    expect(finalize(a, 'min')).toBe(1);
+  });
+});
diff --git a/web/src/lib/dashboard/engine/aggregate.ts b/web/src/lib/dashboard/engine/aggregate.ts
new file mode 100644
index 00000000..e2b065fd
--- /dev/null
+++ b/web/src/lib/dashboard/engine/aggregate.ts
@@ -0,0 +1,85 @@
+/**
+ * Streaming aggregators. One accumulator per (category × series × measure),
+ * fed row-by-row in a single pass, then finalized.
+ *
+ * Nulls are SKIPPED (not coerced to 0). `count` counts presence; numeric aggs
+ * ignore non-numeric values entirely.
+ */
+import type { AggOp } from '@/lib/dashboard/engine/types';
+import { percentile } from '@/lib/dashboard/engine/coerce';
+
+export interface Acc {
+  sum: number;
+  /** Count of values that contributed to a numeric aggregate. */
+  numN: number;
+  /** Count of present (non-null) values — used by `count`. */
+  presentN: number;
+  min: number;
+  max: number;
+  set: Set<unknown>;
+  vals: number[];
+}
+
+export function newAcc(): Acc {
+  return {
+    sum: 0,
+    numN: 0,
+    presentN: 0,
+    min: Infinity,
+    max: -Infinity,
+    set: new Set<unknown>(),
+    vals: [],
+  };
+}
+
+/**
+ * Feed one value into an accumulator.
+ * @param raw  the original (presence) value — drives `count` / `countDistinct`
+ * @param num  the coerced numeric value (or null) — drives numeric aggregates
+ */
+export function step(acc: Acc, raw: unknown, num: number | null): void {
+  const present = raw !== null && raw !== undefined && raw !== '';
+  if (present) {
+    acc.presentN += 1;
+    acc.set.add(raw);
+  }
+  if (num !== null) {
+    acc.sum += num;
+    acc.numN += 1;
+    if (num < acc.min) acc.min = num;
+    if (num > acc.max) acc.max = num;
+    acc.vals.push(num);
+  }
+}
+
+/** Merge `src` into `dst` (used to build the Top-N "Other" bucket correctly). */
+export function mergeAcc(dst: Acc, src: Acc): void {
+  dst.sum += src.sum;
+  dst.numN += src.numN;
+  dst.presentN += src.presentN;
+  if (src.min < dst.min) dst.min = src.min;
+  if (src.max > dst.max) dst.max = src.max;
+  for (const v of src.set) dst.set.add(v);
+  if (src.vals.length) dst.vals.push(...src.vals);
+}
+
+export function finalize(acc: Acc, op: AggOp): number | null {
+  switch (op) {
+    case 'sum':
+      return acc.numN ? acc.sum : 0;
+    case 'count':
+      return acc.presentN;
+    case 'countDistinct':
+      return acc.set.size;
+    case 'avg':
+      return acc.numN ? acc.sum / acc.numN : null;
+    case 'min':
+      return acc.numN ? acc.min : null;
+    case 'max':
+      return acc.numN ? acc.max : null;
+    case 'median':
+      return percentile(acc.vals, 0.5);
+    default:
+      return null;
+  }
+}
diff --git a/web/src/lib/dashboard/engine/coerce.test.ts b/web/src/lib/dashboard/engine/coerce.test.ts
new file mode 100644
index 00000000..119acc0f
--- /dev/null
+++ b/web/src/lib/dashboard/engine/coerce.test.ts
@@ -0,0 +1,68 @@
+import { describe, it, expect } from 'vitest';
+import { toNumber, dotGet, humanize, percentile } from '@/lib/dashboard/engine/coerce';
+
+describe('toNumber', () => {
+  it('passes finite numbers', () => {
+    expect(toNumber(3)).toBe(3);
+    expect(toNumber(0)).toBe(0);
+    expect(toNumber(-2.5)).toBe(-2.5);
+  });
+  it('rejects non-finite numbers', () => {
+    expect(toNumber(Infinity)).toBeNull();
+    expect(toNumber(NaN)).toBeNull();
+  });
+  it('parses numeric strings, rejects junk', () => {
+    expect(toNumber('42')).toBe(42);
+    expect(toNumber(' 3.5 ')).toBe(3.5);
+    expect(toNumber('')).toBeNull();
+    expect(toNumber('abc')).toBeNull();
+  });
+  it('coerces booleans, rejects null/objects', () => {
+    expect(toNumber(true)).toBe(1);
+    expect(toNumber(false)).toBe(0);
+    expect(toNumber(null)).toBeNull();
+    expect(toNumber(undefined)).toBeNull();
+    expect(toNumber({})).toBeNull();
+  });
+});
+
+describe('dotGet', () => {
+  const obj = { a: { b: { c: 5 } }, x: 1 };
+  it('reads shallow and nested paths', () => {
+    expect(dotGet(obj, 'x')).toBe(1);
+    expect(dotGet(obj, 'a.b.c')).toBe(5);
+  });
+  it('returns undefined for missing paths without throwing', () => {
+    expect(dotGet(obj, 'a.z.c')).toBeUndefined();
+    expect(dotGet(null, 'a')).toBeUndefined();
+    expect(dotGet(obj, 'a.b.c.d')).toBeUndefined();
+  });
+  it('returns the object itself for empty path', () => {
+    expect(dotGet(obj, '')).toBe(obj);
+  });
+});
+
+describe('humanize', () => {
+  it('uses last segment, replaces underscores, capitalizes', () => {
+    expect(humanize('crawl_summary.count_4xx')).toBe('Count 4xx');
+    expect(humanize('word_count')).toBe('Word count');
+    expect(humanize('url')).toBe('Url');
+  });
+});
+
+describe('percentile', () => {
+  it('computes median with interpolation', () => {
+    expect(percentile([1, 2, 3], 0.5)).toBe(2);
+    expect(percentile([1, 2, 3, 4], 0.5)).toBe(2.5);
+  });
+  it('handles single and empty', () => {
+    expect(percentile([7], 0.5)).toBe(7);
+    expect(percentile([], 0.5)).toBeNull();
+  });
+  it('ignores non-finite and does not mutate input', () => {
+    const input = [3, 1, 2];
+    expect(percentile([1, 2, NaN, 3], 0.5)).toBe(2);
+    percentile(input, 0.5);
+    expect(input).toEqual([3, 1, 2]);
+  });
+});
diff --git a/web/src/lib/dashboard/engine/coerce.ts b/web/src/lib/dashboard/engine/coerce.ts
new file mode 100644
index 00000000..29890949
--- /dev/null
+++ b/web/src/lib/dashboard/engine/coerce.ts
@@ -0,0 +1,62 @@
+/**
+ * Foundational pure helpers: numeric coercion, dot-path access, label
+ * humanization, percentile. No dependencies — the base of the engine.
+ */
+
+/**
+ * Coerce a value to a finite number, or null when it cannot be.
+ *
+ * Unlike the old engine, missing/invalid values become `null` (skipped by
+ * aggregations) rather than silently coerced to 0 — which was a whole class of
+ * "the numbers are wrong" bugs.
+ */
+export function toNumber(v: unknown): number | null {
+  if (typeof v === 'number') return Number.isFinite(v) ? v : null;
+  if (typeof v === 'boolean') return v ? 1 : 0;
+  if (typeof v === 'string') {
+    const t = v.trim();
+    if (t === '') return null;
+    const n = Number(t);
+    return Number.isFinite(n) ? n : null;
+  }
+  return null;
+}
+
+/** Read a (possibly nested) dot-path from an object. */
+export function dotGet(obj: unknown, path: string): unknown {
+  if (!path) return obj;
+  if (path.indexOf('.') === -1) {
+    return obj == null || typeof obj !== 'object'
+      ? undefined
+      : (obj as Record<string, unknown>)[path];
+  }
+  return path.split('.').reduce<unknown>((cur, key) => {
+    if (cur == null || typeof cur !== 'object') return undefined;
+    return (cur as Record<string, unknown>)[key];
+  }, obj);
+}
+
+/** Turn a field key into a human label: last dot segment, underscores → spaces, title-ish. */
+export function humanize(key: string): string {
+  const last = key.split('.').pop() ?? key;
+  const spaced = last.replace(/_/g, ' ').trim();
+  if (!spaced) return key;
+  return spaced.charAt(0).toUpperCase() + spaced.slice(1);
+}
+
+/**
+ * Linear-interpolated percentile of a numeric array. `q` in [0,1].
+ * Returns null for an empty input. Does not mutate the input.
+ */
+export function percentile(values: number[], q: number): number | null {
+  const nums = values.filter((n) => Number.isFinite(n));
+  if (!nums.length) return null;
+  if (nums.length === 1) return nums[0];
+  const sorted = [...nums].sort((a, b) => a - b);
+  const pos = (sorted.length - 1) * Math.min(1, Math.max(0, q));
+  const lo = Math.floor(pos);
+  const hi = Math.ceil(pos);
+  if (lo === hi) return sorted[lo];
+  const frac = pos - lo;
+  return sorted[lo] + (sorted[hi] - sorted[lo]) * frac;
+}
diff --git a/web/src/lib/dashboard/engine/computed.test.ts b/web/src/lib/dashboard/engine/computed.test.ts
new file mode 100644
index 00000000..3ff18f16
--- /dev/null
+++ b/web/src/lib/dashboard/engine/computed.test.ts
@@ -0,0 +1,28 @@
+import { describe, it, expect } from 'vitest';
+import { evalComputed } from '@/lib/dashboard/engine/computed';
+
+describe('evalComputed — ratio', () => {
+  it('computes a scaled ratio', () => {
+    expect(
+      evalComputed({ kind: 'ratio', numerator: 'a', denominator: 'b', scale: 100 }, { a: 1, b: 4 }),
+    ).toBe(25);
+  });
+  it('divide-by-zero and missing → null (never Infinity/NaN)', () => {
+    expect(evalComputed({ kind: 'ratio', numerator: 'a', denominator: 'b' }, { a: 1, b: 0 })).toBeNull();
+    expect(evalComputed({ kind: 'ratio', numerator: 'a', denominator: 'b' }, { a: 1 })).toBeNull();
+  });
+});
+
+describe('evalComputed — arithmetic', () => {
+  it('supports + - * / over fields and constants', () => {
+    const row = { x: 10, y: 2 };
+    expect(evalComputed({ kind: 'arithmetic', op: '+', left: { field: 'x' }, right: { field: 'y' } }, row)).toBe(12);
+    expect(evalComputed({ kind: 'arithmetic', op: '-', left: { field: 'x' }, right: { const: 3 } }, row)).toBe(7);
+    expect(evalComputed({ kind: 'arithmetic', op: '*', left: { field: 'x' }, right: { field: 'y' } }, row)).toBe(20);
+    expect(evalComputed({ kind: 'arithmetic', op: '/', left: { field: 'x' }, right: { field: 'y' } }, row)).toBe(5);
+  });
+  it('division by zero → null; missing operand → null', () => {
+    expect(evalComputed({ kind: 'arithmetic', op: '/', left: { field: 'x' }, right: { const: 0 } }, { x: 1 })).toBeNull();
+    expect(evalComputed({ kind: 'arithmetic', op: '+', left: { field: 'x' }, right: { field: 'z' } }, { x: 1 })).toBeNull();
+  });
+});
diff --git a/web/src/lib/dashboard/engine/computed.ts b/web/src/lib/dashboard/engine/computed.ts
new file mode 100644
index 00000000..53908c12
--- /dev/null
+++ b/web/src/lib/dashboard/engine/computed.ts
@@ -0,0 +1,39 @@
+/**
+ * Safe, structured computed measures — the replacement for the old DashScript
+ * DSL. No parser, no `eval`/`Function`: just two JSON shapes evaluated by a
+ * finite switch. Divide-by-zero and non-numeric inputs yield null (never
+ * Infinity/NaN), so a bad computed field can't corrupt a chart.
+ */
+import type { ComputedField, Operand } from '@/lib/dashboard/engine/types';
+import { dotGet, toNumber } from '@/lib/dashboard/engine/coerce';
+
+function operandValue(op: Operand, row: Record<string, unknown>): number | null {
+  if ('const' in op) return Number.isFinite(op.const) ? op.const : null;
+  return toNumber(dotGet(row, op.field));
+}
+
+/** Evaluate a computed field against a single row → a number or null. */
+export function evalComputed(cf: ComputedField, row: Record<string, unknown>): number | null {
+  if (cf.kind === 'ratio') {
+    const num = toNumber(dotGet(row, cf.numerator));
+    const den = toNumber(dotGet(row, cf.denominator));
+    if (num === null || den === null || den === 0) return null;
+    return (num / den) * (cf.scale ?? 1);
+  }
+  // arithmetic
+  const l = operandValue(cf.left, row);
+  const r = operandValue(cf.right, row);
+  if (l === null || r === null) return null;
+  switch (cf.op) {
+    case '+':
+      return l + r;
+    case '-':
+      return l - r;
+    case '*':
+      return l * r;
+    case '/':
+      return r === 0 ? null : l / r;
+    default:
+      return null;
+  }
+}
diff --git a/web/src/lib/dashboard/engine/datasets.test.ts b/web/src/lib/dashboard/engine/datasets.test.ts
new file mode 100644
index 00000000..50453b8d
--- /dev/null
+++ b/web/src/lib/dashboard/engine/datasets.test.ts
@@ -0,0 +1,111 @@
+import { describe, it, expect } from 'vitest';
+import { DATASETS, datasetById, datasetsByGroup } from '@/lib/dashboard/engine/datasets';
+import { SECTION_KEYS } from '@/lib/reportSections';
+import { measureLabel } from '@/lib/dashboard/engine/runQuery';
+import type { ReportPayload } from '@/types/report';
+
+/** A payload that touches every section a dataset reads from. (Cast: real link
+ *  rows carry more fields than the partial ReportLink interface declares.) */
+const PAYLOAD = {
+  summary: { total_urls: 100, count_2xx: 90, count_4xx: 8, count_5xx: 2, success_rate: 90, avg_outlinks: 5 },
+  seo_health: { missing_title: 3, missing_meta_desc: 4, thin_content: 6 },
+  social_coverage: { og_coverage_pct: 65 },
+  portfolio_benchmark: { property_health_score: 78 },
+  status_counts: { '200': 90, '404': 8, '500': 2 },
+  categories: [
+    { id: 'seo', name: 'Technical SEO', score: 80, issues: [{ message: 'm1', priority: 'High', impact_score: 5 }] },
+    { id: 'perf', name: 'Performance', score: 55, issues: [{ message: 'm2', priority: 'Low' }, { message: 'm3' }] },
+  ],
+  links: [
+    { url: 'https://x.com/a', status: '200', depth: 0, word_count: 500, inlinks: 3, outlinks: 10, response_time_ms: 120, images_total: 4, images_without_alt: 1 },
+    { url: 'https://x.com/blog/b', status: '404', depth: 2, word_count: 50, inlinks: 0, outlinks: 2, response_time_ms: 800, images_total: 0, images_without_alt: 0 },
+  ],
+  outbound_link_domains: [{ host: 'github.com', link_count: 12, page_count: 3 }],
+  google: {
+    gsc: {
+      summary: { clicks: 500, impressions: 9000, ctr: 0.055, position: 8.2 },
+      top_queries: [{ query: 'foo', clicks: 50, impressions: 900, ctr: 0.05, position: 4 }],
+      top_pages: [{ page: '/a', clicks: 30, impressions: 400, ctr: 0.075, position: 6 }],
+      daily: [{ date: '2024-01-01', clicks: 10, impressions: 200 }],
+    },
+    ga4: {
+      summary: { sessions: 1200, activeUsers: 900 },
+      top_pages: [{ path: '/a', sessions: 100, activeUsers: 80, screenPageViews: 130, engagementRate: 0.6 }],
+      by_channel: [{ channel: 'Organic', sessions: 800 }],
+      by_device: [{ device: 'mobile', sessions: 700 }],
+    },
+  },
+  keywords: { rows: [{ keyword: 'foo', intent: 'informational', difficulty: 20, gsc_clicks: 50, gsc_impressions: 900, gsc_position: 4, traffic_potential: 120 }] },
+  gsc_links: { top_linking_sites: [{ site: 'a.com', link_count: 5, target_page_count: 2 }] },
+  lighthouse_by_url: {
+    'https://x.com/a': { category_scores: { performance: 0.9, seo: 1, accessibility: 0.8 }, median_metrics: { lcp_ms: 1200, cls: 0.02, tbt_ms: 100 } },
+  },
+  content_analytics: {
+    thin_pages: [{ url: '/b', word_count: 50 }],
+    word_count_distribution: { '0-100': 5, '101-300': 10 },
+  },
+  depth_distribution: { by_depth: { '0': 1, '1': 5, '2': 20 } },
+  mime_labels: ['text/html', 'application/json'],
+  mime_values: [80, 20],
+  lighthouse_summary: { median_metrics: { performance_score: 88, seo_score: 95 } },
+} as unknown as ReportPayload;
+
+describe('dataset registry integrity', () => {
+  it('has unique ids and datasetById matches', () => {
+    const ids = DATASETS.map((d) => d.id);
+    expect(new Set(ids).size).toBe(ids.length);
+    expect(datasetById.size).toBe(ids.length);
+  });
+
+  it('every dataset declares a real SectionKey', () => {
+    for (const d of DATASETS) expect(SECTION_KEYS).toContain(d.section);
+  });
+
+  it('every measure field has a defaultAgg; non-empty viz list', () => {
+    for (const d of DATASETS) {
+      expect(d.viz.length).toBeGreaterThan(0);
+      for (const f of d.fields) {
+        if (f.role === 'measure') expect(f.defaultAgg, `${d.id}.${f.key}`).toBeTruthy();
+      }
+    }
+  });
+
+  it('defaultSpec.groupBy and measures reference declared fields', () => {
+    for (const d of DATASETS) {
+      const keys = new Set(d.fields.map((f) => f.key));
+      const spec = d.defaultSpec;
+      if (spec?.groupBy) expect(keys.has(spec.groupBy), `${d.id} groupBy ${spec.groupBy}`).toBe(true);
+      for (const m of spec?.measures ?? []) {
+        if (!m.computed) expect(keys.has(m.field), `${d.id} measure ${m.field}`).toBe(true);
+      }
+    }
+  });
+
+  it('every accessor runs on a full payload and returns an array', () => {
+    for (const d of DATASETS) {
+      const rows = d.accessor(PAYLOAD);
+      expect(Array.isArray(rows), d.id).toBe(true);
+    }
+  });
+
+  it('key datasets extract expected rows', () => {
+    expect(datasetById.get('links')!.accessor(PAYLOAD)).toHaveLength(2);
+    expect(datasetById.get('issues')!.accessor(PAYLOAD)).toHaveLength(3);
+    expect(datasetById.get('status_counts')!.accessor(PAYLOAD)).toHaveLength(3);
+    expect(datasetById.get('mime_types')!.accessor(PAYLOAD)).toHaveLength(2);
+    expect(datasetById.get('summary')!.accessor(PAYLOAD)[0].health_score).toBe(78);
+    // links accessor derives host/path
+    expect(datasetById.get('links')!.accessor(PAYLOAD)[0].host).toBe('x.com');
+  });
+
+  it('measureLabel falls back to agg(field)', () => {
+    expect(measureLabel({ field: 'x', agg: 'sum' })).toBe('sum(x)');
+    expect(measureLabel({ field: 'x', agg: 'sum', label: 'Total' })).toBe('Total');
+  });
+
+  it('datasetsByGroup buckets datasets', () => {
+    const groups = datasetsByGroup();
+    expect(groups.length).toBeGreaterThan(0);
+    expect(groups.flatMap((g) => g.datasets).length).toBe(DATASETS.length);
+  });
+});
diff --git a/web/src/lib/dashboard/engine/datasets.ts b/web/src/lib/dashboard/engine/datasets.ts
new file mode 100644
index 00000000..98afe2a8
--- /dev/null
+++ b/web/src/lib/dashboard/engine/datasets.ts
@@ -0,0 +1,497 @@
+/**
+ * Dataset registry: declarative projections of the report payload into rows +
+ * a curated dimension/measure field catalog. This is the "data source" list the
+ * builder shows; the query engine runs against `accessor(payload)` rows.
+ */
+import type { ReportPayload, ReportCategory, LighthousePageSummary } from '@/types/report';
+import type { DatasetDef, VizType } from '@/lib/dashboard/engine/types';
+import {
+  fromParallel,
+  fromMap,
+  flattenCategoryIssues,
+  flattenLighthouseByUrl,
+  flatPrefix,
+} from '@/lib/dashboard/engine/accessors';
+
+const METRIC: VizType[] = ['kpi', 'stat-card', 'gauge', 'sparkline'];
+const CATEGORICAL: VizType[] = [
+  'bar', 'horizontal-bar', 'stacked-bar', 'pie', 'doughnut', 'treemap', 'funnel', 'table',
+];
+const RANKED: VizType[] = ['bar', 'horizontal-bar', 'table', 'treemap', 'funnel'];
+const TIME: VizType[] = ['line', 'area', 'bar', 'table', 'sparkline'];
+
+function arr(v: unknown): Record<string, unknown>[] {
+  return Array.isArray(v) ? (v as Record<string, unknown>[]) : [];
+}
+
+/** Split a URL into host / path / first path segment for drill + grouping. */
+function urlParts(u: unknown): { host: string; path: string; path_segment: string } {
+  const s = String(u ?? '');
+  try {
+    const x = new URL(s);
+    const seg = x.pathname.split('/').filter(Boolean)[0] ?? '/';
+    return { host: x.host, path: x.pathname || '/', path_segment: `/${seg}` };
+  } catch {
+    return { host: '', path: s, path_segment: s };
+  }
+}
+
+export const DATASETS: DatasetDef[] = [
+  // ── Overview / core ───────────────────────────────────────────────────────
+  {
+    id: 'summary',
+    label: 'Site summary (KPIs)',
+    group: 'Overview',
+    section: 'core',
+    description: 'Scalar headline metrics: crawl totals, SEO health, search & Lighthouse summaries.',
+    preAggregated: true,
+    accessor: (d) => [
+      {
+        ...(d.summary ?? {}),
+        ...flatPrefix('seo_health', d.seo_health as Record<string, unknown> | undefined),
+        ...flatPrefix('gsc', d.google?.gsc?.summary as Record<string, unknown> | undefined),
+        ...flatPrefix('ga4', d.google?.ga4?.summary as Record<string, unknown> | undefined),
+        ...flatPrefix('lh', d.lighthouse_summary?.median_metrics as Record<string, unknown> | undefined),
+        ...flatPrefix('social', d.social_coverage as Record<string, unknown> | undefined),
+        health_score: d.portfolio_benchmark?.property_health_score ?? null,
+      },
+    ],
+    fields: [
+      { key: 'health_score', label: 'Health score', role: 'measure', defaultAgg: 'max', format: 'score' },
+      { key: 'total_urls', label: 'Total URLs', role: 'measure', defaultAgg: 'max', format: '0' },
+      { key: 'success_rate', label: 'Success rate', role: 'measure', defaultAgg: 'max', format: 'pct' },
+      { key: 'count_2xx', label: '2xx pages', role: 'measure', defaultAgg: 'max', format: '0' },
+      { key: 'count_3xx', label: '3xx pages', role: 'measure', defaultAgg: 'max', format: '0' },
+      { key: 'count_4xx', label: '4xx pages', role: 'measure', defaultAgg: 'max', format: '0' },
+      { key: 'count_5xx', label: '5xx pages', role: 'measure', defaultAgg: 'max', format: '0' },
+      { key: 'avg_outlinks', label: 'Avg outlinks', role: 'measure', defaultAgg: 'max', format: '0.0' },
+      { key: 'seo_health.missing_title', label: 'Missing titles', role: 'measure', defaultAgg: 'max', format: '0' },
+      { key: 'seo_health.missing_meta_desc', label: 'Missing meta desc', role: 'measure', defaultAgg: 'max', format: '0' },
+      { key: 'seo_health.thin_content', label: 'Thin content pages', role: 'measure', defaultAgg: 'max', format: '0' },
+      { key: 'gsc.clicks', label: 'GSC clicks', role: 'measure', defaultAgg: 'max', format: '0' },
+      { key: 'gsc.impressions', label: 'GSC impressions', role: 'measure', defaultAgg: 'max', format: '0' },
+      { key: 'gsc.ctr', label: 'GSC CTR', role: 'measure', defaultAgg: 'max', format: '0.0%' },
+      { key: 'gsc.position', label: 'GSC avg position', role: 'measure', defaultAgg: 'max', format: '0.0' },
+      { key: 'ga4.sessions', label: 'GA4 sessions', role: 'measure', defaultAgg: 'max', format: '0' },
+      { key: 'ga4.activeUsers', label: 'GA4 users', role: 'measure', defaultAgg: 'max', format: '0' },
+      { key: 'lh.performance_score', label: 'Lighthouse perf', role: 'measure', defaultAgg: 'max', format: 'score' },
+      { key: 'lh.seo_score', label: 'Lighthouse SEO', role: 'measure', defaultAgg: 'max', format: 'score' },
+      { key: 'social.og_coverage_pct', label: 'OG coverage', role: 'measure', defaultAgg: 'max', format: 'pct' },
+    ],
+    viz: [...METRIC],
+    defaultSpec: { measures: [{ field: 'health_score', agg: 'max', label: 'Health score', format: 'score' }] },
+  },
+  {
+    id: 'categories',
+    label: 'Category scores',
+    group: 'Overview',
+    section: 'core',
+    description: 'Audit score and issue count per category (Technical SEO, Performance, …).',
+    preAggregated: true,
+    accessor: (d) =>
+      ((d.categories as ReportCategory[] | undefined) ?? []).map((c) => ({
+        id: c.id ?? '',
+        name: c.name ?? c.id ?? '',
+        score: c.score ?? null,
+        issue_count: Array.isArray(c.issues) ? c.issues.length : 0,
+      })),
+    fields: [
+      { key: 'name', label: 'Category', role: 'dimension' },
+      { key: 'score', label: 'Score', role: 'measure', defaultAgg: 'avg', format: 'score' },
+      { key: 'issue_count', label: 'Issue count', role: 'measure', defaultAgg: 'sum', format: '0' },
+    ],
+    viz: [...CATEGORICAL, 'radar'],
+    defaultSpec: {
+      groupBy: 'name',
+      measures: [{ field: 'score', agg: 'avg', label: 'Score', format: 'score' }],
+      sort: { by: 'Score', dir: 'desc' },
+    },
+  },
+  {
+    id: 'issues',
+    label: 'Issues',
+    group: 'Overview',
+    section: 'core',
+    description: 'Every audit issue flattened across categories (priority, impact, traffic at risk).',
+    accessor: (d) => flattenCategoryIssues(d.categories as ReportCategory[] | undefined),
+    fields: [
+      { key: 'category', label: 'Category', role: 'dimension' },
+      { key: 'priority', label: 'Priority', role: 'dimension' },
+      { key: 'type', label: 'Type', role: 'dimension' },
+      { key: 'message', label: 'Message', role: 'dimension' },
+      { key: 'url', label: 'URL', role: 'dimension' },
+      { key: 'impact_score', label: 'Impact score', role: 'measure', defaultAgg: 'avg', format: '0.0' },
+      { key: 'gsc_clicks', label: 'GSC clicks', role: 'measure', defaultAgg: 'sum', format: '0' },
+      { key: 'gsc_impressions', label: 'GSC impressions', role: 'measure', defaultAgg: 'sum', format: '0' },
+      { key: 'ga4_sessions', label: 'GA4 sessions', role: 'measure', defaultAgg: 'sum', format: '0' },
+    ],
+    viz: [...CATEGORICAL, 'kpi', 'stat-card'],
+    defaultSpec: {
+      groupBy: 'category',
+      measures: [{ field: 'message', agg: 'count', label: 'Issues' }],
+      sort: { by: 'Issues', dir: 'desc' },
+    },
+  },
+  {
+    id: 'status_counts',
+    label: 'Status code distribution',
+    group: 'Overview',
+    section: 'core',
+    description: 'Pages per HTTP status code.',
+    preAggregated: true,
+    accessor: (d) => fromMap(d.status_counts as Record<string, unknown> | undefined),
+    fields: [
+      { key: 'label', label: 'Status code', role: 'dimension' },
+      { key: 'value', label: 'Pages', role: 'measure', defaultAgg: 'sum', format: '0' },
+    ],
+    viz: [...CATEGORICAL, 'kpi'],
+    defaultSpec: { groupBy: 'label', measures: [{ field: 'value', agg: 'sum', label: 'Pages' }] },
+  },
+
+  // ── Crawl / links ──────────────────────────────────────────────────────────
+  {
+    id: 'links',
+    label: 'Pages (crawl)',
+    group: 'Crawl',
+    section: 'links',
+    description: 'One row per crawled URL — the main detail table. Group by status, depth, host…',
+    accessor: (d) =>
+      arr(d.links).map((l) => ({ ...l, ...urlParts(l.url) })),
+    fields: [
+      { key: 'url', label: 'URL', role: 'dimension' },
+      { key: 'host', label: 'Host', role: 'dimension' },
+      { key: 'path', label: 'Path', role: 'dimension' },
+      { key: 'path_segment', label: 'Section', role: 'dimension' },
+      { key: 'status', label: 'Status', role: 'dimension' },
+      { key: 'depth', label: 'Depth', role: 'dimension' },
+      { key: 'content_type', label: 'Content type', role: 'dimension' },
+      { key: 'title', label: 'Title', role: 'dimension' },
+      { key: 'word_count', label: 'Word count', role: 'measure', defaultAgg: 'avg', format: '0' },
+      { key: 'inlinks', label: 'Inlinks', role: 'measure', defaultAgg: 'sum', format: '0' },
+      { key: 'outlinks', label: 'Outlinks', role: 'measure', defaultAgg: 'sum', format: '0' },
+      { key: 'response_time_ms', label: 'Response time (ms)', role: 'measure', defaultAgg: 'avg', format: '0' },
+      { key: 'pagerank', label: 'PageRank', role: 'measure', defaultAgg: 'avg', format: '0.00' },
+      { key: 'images_total', label: 'Images', role: 'measure', defaultAgg: 'sum', format: '0' },
+      { key: 'images_without_alt', label: 'Images w/o alt', role: 'measure', defaultAgg: 'sum', format: '0' },
+    ],
+    viz: ['table', 'bar', 'horizontal-bar', 'stacked-bar', 'pie', 'doughnut', 'line', 'scatter', 'kpi', 'stat-card'],
+    defaultSpec: {
+      groupBy: 'status',
+      measures: [{ field: 'url', agg: 'count', label: 'Pages' }],
+      sort: { by: 'Pages', dir: 'desc' },
+    },
+  },
+  {
+    id: 'outbound_link_domains',
+    label: 'Outbound link domains',
+    group: 'Crawl',
+    section: 'links',
+    description: 'External domains linked from the site, by link/page count.',
+    preAggregated: true,
+    accessor: (d) => arr(d.outbound_link_domains),
+    fields: [
+      { key: 'host', label: 'Domain', role: 'dimension' },
+      { key: 'link_count', label: 'Links', role: 'measure', defaultAgg: 'sum', format: '0' },
+      { key: 'page_count', label: 'Pages', role: 'measure', defaultAgg: 'sum', format: '0' },
+    ],
+    viz: [...RANKED],
+    defaultSpec: {
+      groupBy: 'host',
+      measures: [{ field: 'link_count', agg: 'sum', label: 'Links' }],
+      sort: { by: 'Links', dir: 'desc' },
+      topN: { n: 15, other: true },
+    },
+  },
+
+  // ── Search Console / Analytics ─────────────────────────────────────────────
+  {
+    id: 'gsc_top_queries',
+    label: 'GSC — top queries',
+    group: 'Search Console',
+    section: 'traffic',
+    description: 'Search queries by clicks, impressions, CTR, position.',
+    preAggregated: true,
+    accessor: (d) => arr(d.google?.gsc?.top_queries),
+    fields: [
+      { key: 'query', label: 'Query', role: 'dimension' },
+      { key: 'clicks', label: 'Clicks', role: 'measure', defaultAgg: 'sum', format: '0' },
+      { key: 'impressions', label: 'Impressions', role: 'measure', defaultAgg: 'sum', format: '0' },
+      { key: 'ctr', label: 'CTR', role: 'measure', defaultAgg: 'avg', format: '0.0%' },
+      { key: 'position', label: 'Avg position', role: 'measure', defaultAgg: 'avg', format: '0.0' },
+    ],
+    viz: [...RANKED, 'kpi'],
+    defaultSpec: {
+      groupBy: 'query',
+      measures: [{ field: 'clicks', agg: 'sum', label: 'Clicks' }],
+      sort: { by: 'Clicks', dir: 'desc' },
+      topN: { n: 10 },
+    },
+  },
+  {
+    id: 'gsc_top_pages',
+    label: 'GSC — top pages',
+    group: 'Search Console',
+    section: 'traffic',
+    description: 'Landing pages by clicks, impressions, CTR, position.',
+    preAggregated: true,
+    accessor: (d) => arr(d.google?.gsc?.top_pages),
+    fields: [
+      { key: 'page', label: 'Page', role: 'dimension' },
+      { key: 'clicks', label: 'Clicks', role: 'measure', defaultAgg: 'sum', format: '0' },
+      { key: 'impressions', label: 'Impressions', role: 'measure', defaultAgg: 'sum', format: '0' },
+      { key: 'ctr', label: 'CTR', role: 'measure', defaultAgg: 'avg', format: '0.0%' },
+      { key: 'position', label: 'Avg position', role: 'measure', defaultAgg: 'avg', format: '0.0' },
+    ],
+    viz: [...RANKED, 'kpi'],
+    defaultSpec: {
+      groupBy: 'page',
+      measures: [{ field: 'clicks', agg: 'sum', label: 'Clicks' }],
+      sort: { by: 'Clicks', dir: 'desc' },
+      topN: { n: 10 },
+    },
+  },
+  {
+    id: 'gsc_daily',
+    label: 'GSC — daily trend',
+    group: 'Search Console',
+    section: 'traffic',
+    description: 'Clicks & impressions per day.',
+    preAggregated: true,
+    accessor: (d) => arr(d.google?.gsc?.daily),
+    fields: [
+      { key: 'date', label: 'Date', role: 'dimension', isDate: true },
+      { key: 'clicks', label: 'Clicks', role: 'measure', defaultAgg: 'sum', format: '0' },
+      { key: 'impressions', label: 'Impressions', role: 'measure', defaultAgg: 'sum', format: '0' },
+    ],
+    viz: [...TIME],
+    defaultSpec: {
+      groupBy: 'date',
+      measures: [{ field: 'clicks', agg: 'sum', label: 'Clicks' }],
+      sort: { by: 'category', dir: 'asc' },
+    },
+  },
+  {
+    id: 'ga4_top_pages',
+    label: 'GA4 — top pages',
+    group: 'Analytics',
+    section: 'traffic',
+    description: 'Most-viewed pages by sessions, users, views.',
+    preAggregated: true,
+    accessor: (d) => arr(d.google?.ga4?.top_pages),
+    fields: [
+      { key: 'path', label: 'Path', role: 'dimension' },
+      { key: 'sessions', label: 'Sessions', role: 'measure', defaultAgg: 'sum', format: '0' },
+      { key: 'activeUsers', label: 'Users', role: 'measure', defaultAgg: 'sum', format: '0' },
+      { key: 'screenPageViews', label: 'Views', role: 'measure', defaultAgg: 'sum', format: '0' },
+      { key: 'engagementRate', label: 'Engagement rate', role: 'measure', defaultAgg: 'avg', format: '0.0%' },
+    ],
+    viz: [...RANKED, 'kpi'],
+    defaultSpec: {
+      groupBy: 'path',
+      measures: [{ field: 'sessions', agg: 'sum', label: 'Sessions' }],
+      sort: { by: 'Sessions', dir: 'desc' },
+      topN: { n: 10 },
+    },
+  },
+  {
+    id: 'ga4_by_channel',
+    label: 'GA4 — by channel',
+    group: 'Analytics',
+    section: 'traffic',
+    description: 'Sessions by acquisition channel.',
+    preAggregated: true,
+    accessor: (d) => arr(d.google?.ga4?.by_channel),
+    fields: [
+      { key: 'channel', label: 'Channel', role: 'dimension' },
+      { key: 'sessions', label: 'Sessions', role: 'measure', defaultAgg: 'sum', format: '0' },
+    ],
+    viz: [...CATEGORICAL],
+    defaultSpec: { groupBy: 'channel', measures: [{ field: 'sessions', agg: 'sum', label: 'Sessions' }], sort: { by: 'Sessions', dir: 'desc' } },
+  },
+  {
+    id: 'ga4_by_device',
+    label: 'GA4 — by device',
+    group: 'Analytics',
+    section: 'traffic',
+    description: 'Sessions by device category.',
+    preAggregated: true,
+    accessor: (d) => arr(d.google?.ga4?.by_device),
+    fields: [
+      { key: 'device', label: 'Device', role: 'dimension' },
+      { key: 'sessions', label: 'Sessions', role: 'measure', defaultAgg: 'sum', format: '0' },
+    ],
+    viz: ['pie', 'doughnut', 'bar', 'horizontal-bar', 'table'],
+    defaultSpec: { groupBy: 'device', measures: [{ field: 'sessions', agg: 'sum', label: 'Sessions' }] },
+  },
+
+  // ── Keywords ───────────────────────────────────────────────────────────────
+  {
+    id: 'keywords',
+    label: 'Keywords',
+    group: 'Keywords',
+    section: 'keywords',
+    description: 'Keyword research rows: intent, difficulty, GSC metrics, opportunity.',
+    accessor: (d) => arr(d.keywords?.rows),
+    fields: [
+      { key: 'keyword', label: 'Keyword', role: 'dimension' },
+      { key: 'intent', label: 'Intent', role: 'dimension' },
+      { key: 'parent_topic', label: 'Topic', role: 'dimension' },
+      { key: 'trend', label: 'Trend', role: 'dimension' },
+      { key: 'difficulty', label: 'Difficulty', role: 'measure', defaultAgg: 'avg', format: '0' },
+      { key: 'gsc_clicks', label: 'Clicks', role: 'measure', defaultAgg: 'sum', format: '0' },
+      { key: 'gsc_impressions', label: 'Impressions', role: 'measure', defaultAgg: 'sum', format: '0' },
+      { key: 'gsc_position', label: 'Position', role: 'measure', defaultAgg: 'avg', format: '0.0' },
+      { key: 'traffic_potential', label: 'Traffic potential', role: 'measure', defaultAgg: 'sum', format: '0' },
+    ],
+    viz: ['table', 'bar', 'horizontal-bar', 'pie', 'doughnut', 'scatter', 'kpi'],
+    defaultSpec: {
+      groupBy: 'intent',
+      measures: [{ field: 'keyword', agg: 'count', label: 'Keywords' }],
+      sort: { by: 'Keywords', dir: 'desc' },
+    },
+  },
+
+  // ── Backlinks ──────────────────────────────────────────────────────────────
+  {
+    id: 'gsc_top_linking_sites',
+    label: 'Top linking sites',
+    group: 'Backlinks',
+    section: 'gsc-links',
+    description: 'Referring domains by link & target-page count.',
+    preAggregated: true,
+    accessor: (d) => arr(d.gsc_links?.top_linking_sites),
+    fields: [
+      { key: 'site', label: 'Site', role: 'dimension' },
+      { key: 'link_count', label: 'Links', role: 'measure', defaultAgg: 'sum', format: '0' },
+      { key: 'target_page_count', label: 'Target pages', role: 'measure', defaultAgg: 'sum', format: '0' },
+    ],
+    viz: [...RANKED],
+    defaultSpec: {
+      groupBy: 'site',
+      measures: [{ field: 'link_count', agg: 'sum', label: 'Links' }],
+      sort: { by: 'Links', dir: 'desc' },
+      topN: { n: 15, other: true },
+    },
+  },
+
+  // ── Lighthouse ─────────────────────────────────────────────────────────────
+  {
+    id: 'lighthouse_by_url',
+    label: 'Lighthouse by page',
+    group: 'Performance',
+    section: 'lighthouse',
+    description: 'Per-URL Lighthouse scores and Core Web Vitals.',
+    accessor: (d) =>
+      flattenLighthouseByUrl(d.lighthouse_by_url as Record<string, LighthousePageSummary> | undefined),
+    fields: [
+      { key: 'url', label: 'URL', role: 'dimension' },
+      { key: 'strategy', label: 'Strategy', role: 'dimension' },
+      { key: 'performance_score', label: 'Performance', role: 'measure', defaultAgg: 'avg', format: '0.0' },
+      { key: 'accessibility_score', label: 'Accessibility', role: 'measure', defaultAgg: 'avg', format: '0.0' },
+      { key: 'seo_score', label: 'SEO', role: 'measure', defaultAgg: 'avg', format: '0.0' },
+      { key: 'best_practices_score', label: 'Best practices', role: 'measure', defaultAgg: 'avg', format: '0.0' },
+      { key: 'lcp_ms', label: 'LCP (ms)', role: 'measure', defaultAgg: 'avg', format: '0' },
+      { key: 'cls', label: 'CLS', role: 'measure', defaultAgg: 'avg', format: '0.00' },
+      { key: 'tbt_ms', label: 'TBT (ms)', role: 'measure', defaultAgg: 'avg', format: '0' },
+    ],
+    viz: ['table', 'bar', 'horizontal-bar', 'scatter', 'kpi', 'stat-card'],
+    defaultSpec: {
+      groupBy: 'url',
+      measures: [{ field: 'performance_score', agg: 'avg', label: 'Performance', format: '0.0' }],
+      sort: { by: 'Performance', dir: 'asc' },
+      topN: { n: 15 },
+    },
+  },
+
+  // ── Content ────────────────────────────────────────────────────────────────
+  {
+    id: 'thin_pages',
+    label: 'Thin pages',
+    group: 'Content',
+    section: 'content',
+    description: 'Pages with low word count.',
+    preAggregated: true,
+    accessor: (d) => arr(d.content_analytics?.thin_pages),
+    fields: [
+      { key: 'url', label: 'URL', role: 'dimension' },
+      { key: 'word_count', label: 'Word count', role: 'measure', defaultAgg: 'avg', format: '0' },
+    ],
+    viz: ['table', 'bar', 'horizontal-bar', 'kpi'],
+    defaultSpec: {
+      groupBy: 'url',
+      measures: [{ field: 'word_count', agg: 'avg', label: 'Word count' }],
+      sort: { by: 'Word count', dir: 'asc' },
+      topN: { n: 20 },
+    },
+  },
+  {
+    id: 'word_count_distribution',
+    label: 'Word-count distribution',
+    group: 'Content',
+    section: 'content',
+    description: 'Page counts per word-count bucket.',
+    preAggregated: true,
+    accessor: (d) => fromMap(d.content_analytics?.word_count_distribution as Record<string, unknown> | undefined),
+    fields: [
+      { key: 'label', label: 'Bucket', role: 'dimension' },
+      { key: 'value', label: 'Pages', role: 'measure', defaultAgg: 'sum', format: '0' },
+    ],
+    viz: ['bar', 'horizontal-bar', 'pie', 'doughnut', 'funnel', 'table'],
+    defaultSpec: { groupBy: 'label', measures: [{ field: 'value', agg: 'sum', label: 'Pages' }] },
+  },
+
+  // ── Structure / gallery ────────────────────────────────────────────────────
+  {
+    id: 'depth_distribution',
+    label: 'Crawl depth distribution',
+    group: 'Structure',
+    section: 'structure',
+    description: 'Page counts by crawl depth.',
+    preAggregated: true,
+    accessor: (d) => fromMap(d.depth_distribution?.by_depth as Record<string, unknown> | undefined),
+    fields: [
+      { key: 'label', label: 'Depth', role: 'dimension' },
+      { key: 'value', label: 'Pages', role: 'measure', defaultAgg: 'sum', format: '0' },
+    ],
+    viz: ['bar', 'horizontal-bar', 'funnel', 'line', 'area', 'table'],
+    defaultSpec: { groupBy: 'label', measures: [{ field: 'value', agg: 'sum', label: 'Pages' }], sort: { by: 'category', dir: 'asc' } },
+  },
+  {
+    id: 'mime_types',
+    label: 'Content types',
+    group: 'Structure',
+    section: 'gallery',
+    description: 'URL counts per MIME / content type.',
+    preAggregated: true,
+    accessor: (d) => fromParallel(d.mime_labels, d.mime_values),
+    fields: [
+      { key: 'label', label: 'Content type', role: 'dimension' },
+      { key: 'value', label: 'URLs', role: 'measure', defaultAgg: 'sum', format: '0' },
+    ],
+    viz: ['pie', 'doughnut', 'bar', 'horizontal-bar', 'treemap', 'table'],
+    defaultSpec: { groupBy: 'label', measures: [{ field: 'value', agg: 'sum', label: 'URLs' }], sort: { by: 'URLs', dir: 'desc' } },
+  },
+];
+
+export const datasetById = new Map<string, DatasetDef>(DATASETS.map((d) => [d.id, d]));
+
+export function getDataset(id: string): DatasetDef | undefined {
+  return datasetById.get(id);
+}
+
+/** Datasets grouped by their `group` for the picker, preserving first-seen order. */
+export function datasetsByGroup(): { group: string; datasets: DatasetDef[] }[] {
+  const out: { group: string; datasets: DatasetDef[] }[] = [];
+  const idx = new Map<string, number>();
+  for (const d of DATASETS) {
+    const g = d.group ?? 'Other';
+    let i = idx.get(g);
+    if (i === undefined) {
+      i = out.length;
+      idx.set(g, i);
+      out.push({ group: g, datasets: [] });
+    }
+    out[i].datasets.push(d);
+  }
+  return out;
+}
diff --git a/web/src/lib/dashboard/engine/doc.test.ts b/web/src/lib/dashboard/engine/doc.test.ts
new file mode 100644
index 00000000..f57bec13
--- /dev/null
+++ b/web/src/lib/dashboard/engine/doc.test.ts
@@ -0,0 +1,67 @@
+import { describe, it, expect } from 'vitest';
+import {
+  emptyDashboard,
+  migrateDocToV2,
+  defaultWidgetLayout,
+  newWidgetId,
+  type DashboardDoc,
+} from '@/lib/dashboard/engine/doc';
+
+describe('emptyDashboard', () => {
+  it('is a valid empty v2 doc', () => {
+    expect(emptyDashboard()).toEqual({ version: 2, widgets: [], slicers: [] });
+  });
+});
+
+describe('migrateDocToV2', () => {
+  it('normalizes a valid v2 doc and drops malformed widgets', () => {
+    const doc: DashboardDoc = {
+      version: 2,
+      widgets: [
+        { id: 'w1', title: 'A', datasetId: 'links', viz: 'bar', query: { measures: [] }, layout: { x: 0, y: 0, w: 6, h: 4 } },
+      ],
+      slicers: [],
+    };
+    const withJunk = { ...doc, widgets: [...doc.widgets, { id: 'bad' }] };
+    const out = migrateDocToV2(withJunk);
+    expect(out.widgets).toHaveLength(1);
+    expect(out.widgets[0].id).toBe('w1');
+  });
+
+  it('resets pre-v2 / garbage docs to an empty board (no crash)', () => {
+    expect(migrateDocToV2({ version: 1, widgets: [{ binding: { toolName: 'x' } }] })).toEqual(emptyDashboard());
+    expect(migrateDocToV2(null)).toEqual(emptyDashboard());
+    expect(migrateDocToV2('nonsense')).toEqual(emptyDashboard());
+    expect(migrateDocToV2({})).toEqual(emptyDashboard());
+  });
+
+  it('round-trips through JSON with no Infinity/NaN/functions', () => {
+    const doc = migrateDocToV2({
+      version: 2,
+      widgets: [{ id: 'w', title: 'T', datasetId: 'd', viz: 'kpi', query: { measures: [{ field: 'x', agg: 'sum' }] }, layout: { x: 0, y: 0, w: 3, h: 2 } }],
+      slicers: [],
+    });
+    const json = JSON.stringify(doc);
+    expect(json).not.toContain('null,null'); // sanity
+    expect(JSON.parse(json)).toEqual(doc);
+  });
+});
+
+describe('defaultWidgetLayout', () => {
+  it('returns finite sizes per viz', () => {
+    for (const v of ['kpi', 'gauge', 'table', 'text', 'bar'] as const) {
+      const l = defaultWidgetLayout(v);
+      expect(Number.isFinite(l.w) && Number.isFinite(l.h)).toBe(true);
+    }
+    expect(defaultWidgetLayout('table').w).toBe(8);
+  });
+});
+
+describe('newWidgetId', () => {
+  it('produces distinct ids', () => {
+    const a = newWidgetId();
+    const b = newWidgetId();
+    expect(a).not.toBe(b);
+    expect(a.startsWith('w-')).toBe(true);
+  });
+});
diff --git a/web/src/lib/dashboard/engine/doc.ts b/web/src/lib/dashboard/engine/doc.ts
new file mode 100644
index 00000000..f9412a36
--- /dev/null
+++ b/web/src/lib/dashboard/engine/doc.ts
@@ -0,0 +1,132 @@
+/**
+ * Dashboard document schema (v2) — JSON-serializable, stored verbatim in the
+ * `dashboards.layout_json` JSONB column. No functions, no Infinity/NaN.
+ */
+import type { QuerySpec, VizType, FilterOp, FormatHint } from '@/lib/dashboard/engine/types';
+
+/** Per-widget display options (cosmetic; the query drives the data). */
+export interface VizOptions {
+  /** Override the auto title shown in KPI/stat-card. */
+  subtitle?: string;
+  format?: FormatHint;
+  /** Decimal places override for chart axis/labels. */
+  showLegend?: boolean;
+  /** Stack series (bar/area). */
+  stacked?: boolean;
+  /** Show value labels on chart elements. */
+  dataLabels?: boolean;
+  /** Color palette id (resolved in the chart theme). */
+  palette?: string;
+  /** Per-board color overrides per series label. */
+  seriesColors?: Record<string, string>;
+  /** Threshold bands for KPI / gauge. */
+  thresholds?: { value: number; color: string }[];
+  /** Gauge/axis bounds. */
+  axisMin?: number;
+  axisMax?: number;
+  /** Max rows rendered by a table widget. */
+  tableLimit?: number;
+  /** Free text for the `text` viz. */
+  text?: string;
+}
+
+export interface Widget {
+  id: string;
+  title: string;
+  datasetId: string;
+  viz: VizType;
+  query: QuerySpec;
+  /** Ordered dimensions enabling click-to-drill (e.g. ['host','path_segment','url']). */
+  drillDimensions?: string[];
+  vizOptions?: VizOptions;
+  layout: { x: number; y: number; w: number; h: number };
+}
+
+export type SlicerControl = 'select' | 'multiselect' | 'search' | 'date-range';
+
+export interface BoardSlicer {
+  id: string;
+  label: string;
+  /** Field key matched against every widget's dataset (field-identity gate). */
+  field: string;
+  /** Dataset used to source the field's distinct values in the builder. */
+  datasetId: string;
+  control: SlicerControl;
+  /** Operator used when injecting the slice as a filter. */
+  op: FilterOp;
+}
+
+export interface BoardTheme {
+  palette?: string;
+  density?: 'comfortable' | 'compact';
+}
+
+export interface DashboardDoc {
+  version: 2;
+  widgets: Widget[];
+  slicers: BoardSlicer[];
+  theme?: BoardTheme;
+}
+
+export function emptyDashboard(): DashboardDoc {
+  return { version: 2, widgets: [], slicers: [] };
+}
+
+let _seq = 0;
+export function newWidgetId(): string {
+  _seq = (_seq + 1) % 1_000_000;
+  return `w-${Date.now().toString(36)}-${_seq.toString(36)}`;
+}
+
+/** Default grid size (12-col grid) for a freshly-added widget of a given viz. */
+export function defaultWidgetLayout(viz: VizType): { x: number; y: number; w: number; h: number } {
+  switch (viz) {
+    case 'kpi':
+    case 'stat-card':
+    case 'sparkline':
+      return { x: 0, y: 0, w: 3, h: 2 };
+    case 'gauge':
+      return { x: 0, y: 0, w: 3, h: 3 };
+    case 'table':
+      return { x: 0, y: 0, w: 8, h: 5 };
+    case 'text':
+      return { x: 0, y: 0, w: 6, h: 2 };
+    default:
+      return { x: 0, y: 0, w: 6, h: 4 };
+  }
+}
+
+/**
+ * Coerce an unknown stored document to a valid v2 doc.
+ *
+ * v2 docs are normalized (filling defaults). Pre-v2 (the old broken
+ * audit-tool/DashScript model) cannot be faithfully mapped, so it is reset to
+ * an empty board rather than crash the page.
+ */
+export function migrateDocToV2(raw: unknown): DashboardDoc {
+  if (!raw || typeof raw !== 'object') return emptyDashboard();
+  const doc = raw as Record<string, unknown>;
+  if (doc.version === 2 && Array.isArray(doc.widgets)) {
+    return {
+      version: 2,
+      widgets: (doc.widgets as Widget[]).filter(isValidWidget),
+      slicers: Array.isArray(doc.slicers) ? (doc.slicers as BoardSlicer[]) : [],
+      theme: (doc.theme as BoardTheme | undefined) ?? undefined,
+    };
+  }
+  return emptyDashboard();
+}
+
+function isValidWidget(w: unknown): w is Widget {
+  if (!w || typeof w !== 'object') return false;
+  const x = w as Record<string, unknown>;
+  return (
+    typeof x.id === 'string' &&
+    typeof x.datasetId === 'string' &&
+    typeof x.viz === 'string' &&
+    !!x.query &&
+    typeof x.query === 'object' &&
+    !!x.layout &&
+    typeof x.layout === 'object'
+  );
+}
diff --git a/web/src/lib/dashboard/engine/filter.test.ts b/web/src/lib/dashboard/engine/filter.test.ts
new file mode 100644
index 00000000..fea2113c
--- /dev/null
+++ b/web/src/lib/dashboard/engine/filter.test.ts
@@ -0,0 +1,66 @@
+import { describe, it, expect } from 'vitest';
+import { applyFilters, hasFilterValue } from '@/lib/dashboard/engine/filter';
+
+const rows = [
+  { url: '/a', status: '200', depth: 0, when: '2024-01-01' },
+  { url: '/b', status: 404, depth: 2, when: '2024-02-01' },
+  { url: '/c', status: '301', depth: 3, when: '2024-03-01' },
+];
+
+describe('applyFilters', () => {
+  it('no filters returns input unchanged', () => {
+    expect(applyFilters(rows)).toBe(rows);
+    expect(applyFilters(rows, [])).toBe(rows);
+  });
+
+  it('eq is type-loose (string "404" matches number 404)', () => {
+    expect(applyFilters(rows, [{ field: 'status', op: 'eq', value: 404 }])).toHaveLength(1);
+    expect(applyFilters(rows, [{ field: 'status', op: 'eq', value: '404' }])).toHaveLength(1);
+  });
+
+  it('in / nin', () => {
+    expect(applyFilters(rows, [{ field: 'status', op: 'in', value: ['200', '301'] }])).toHaveLength(2);
+    expect(applyFilters(rows, [{ field: 'status', op: 'nin', value: ['200'] }])).toHaveLength(2);
+  });
+
+  it('contains is case-insensitive substring', () => {
+    expect(applyFilters(rows, [{ field: 'url', op: 'contains', value: 'B' }])).toHaveLength(1);
+  });
+
+  it('numeric gt/gte/lt/between', () => {
+    expect(applyFilters(rows, [{ field: 'depth', op: 'gt', value: 0 }])).toHaveLength(2);
+    expect(applyFilters(rows, [{ field: 'depth', op: 'gte', value: 2 }])).toHaveLength(2);
+    expect(applyFilters(rows, [{ field: 'depth', op: 'between', value: [1, 2] }])).toHaveLength(1);
+  });
+
+  it('date comparison via asDate', () => {
+    const r = applyFilters(rows, [
+      { field: 'when', op: 'between', value: ['2024-01-15', '2024-02-15'], asDate: true },
+    ]);
+    expect(r).toHaveLength(1);
+    expect(r[0].url).toBe('/b');
+  });
+
+  it('empty filter values are no-ops', () => {
+    expect(applyFilters(rows, [{ field: 'status', op: 'in', value: [] }])).toHaveLength(3);
+    expect(applyFilters(rows, [{ field: 'url', op: 'contains', value: '' }])).toHaveLength(3);
+  });
+
+  it('multiple filters AND together', () => {
+    const r = applyFilters(rows, [
+      { field: 'depth', op: 'gte', value: 1 },
+      { field: 'status', op: 'eq', value: '301' },
+    ]);
+    expect(r).toHaveLength(1);
+    expect(r[0].url).toBe('/c');
+  });
+});
+
+describe('hasFilterValue', () => {
+  it('detects empty vs constraining', () => {
+    expect(hasFilterValue({ field: 'x', op: 'in', value: [] })).toBe(false);
+    expect(hasFilterValue({ field: 'x', op: 'contains', value: '' })).toBe(false);
+    expect(hasFilterValue({ field: 'x', op: 'eq', value: 0 })).toBe(true);
+    expect(hasFilterValue({ field: 'x', op: 'eq', value: 'a' })).toBe(true);
+  });
+});
diff --git a/web/src/lib/dashboard/engine/filter.ts b/web/src/lib/dashboard/engine/filter.ts
new file mode 100644
index 00000000..02e4a40e
--- /dev/null
+++ b/web/src/lib/dashboard/engine/filter.ts
@@ -0,0 +1,82 @@
+/**
+ * Row filtering. The single injection point for widget filters, board slicers,
+ * cross-filters, and drill — all expressed as `Filter[]`.
+ */
+import type { Filter } from '@/lib/dashboard/engine/types';
+import { dotGet, toNumber } from '@/lib/dashboard/engine/coerce';
+
+/** Loose equality: numeric when either side is numeric, else string compare. */
+function eqLoose(a: unknown, b: unknown): boolean {
+  if (a === b) return true;
+  const an = toNumber(a);
+  const bn = toNumber(b);
+  if (an !== null && bn !== null) return an === bn;
+  return String(a ?? '') === String(b ?? '');
+}
+
+function toComparable(v: unknown, asDate?: boolean): number | null {
+  if (asDate) {
+    const t = Date.parse(String(v ?? ''));
+    return Number.isFinite(t) ? t : null;
+  }
+  return toNumber(v);
+}
+
+function matchOne(raw: unknown, f: Filter): boolean {
+  switch (f.op) {
+    case 'eq':
+      return eqLoose(raw, f.value as unknown);
+    case 'neq':
+      return !eqLoose(raw, f.value as unknown);
+    case 'in':
+      return Array.isArray(f.value) && (f.value as unknown[]).some((v) => eqLoose(raw, v));
+    case 'nin':
+      return !(Array.isArray(f.value) && (f.value as unknown[]).some((v) => eqLoose(raw, v)));
+    case 'contains':
+      return String(raw ?? '')
+        .toLowerCase()
+        .includes(String(f.value ?? '').toLowerCase());
+    case 'gt':
+    case 'gte':
+    case 'lt':
+    case 'lte': {
+      const a = toComparable(raw, f.asDate);
+      const b = toComparable(f.value, f.asDate);
+      if (a === null || b === null) return false;
+      if (f.op === 'gt') return a > b;
+      if (f.op === 'gte') return a >= b;
+      if (f.op === 'lt') return a < b;
+      return a <= b;
+    }
+    case 'between': {
+      const a = toComparable(raw, f.asDate);
+      if (a === null || !Array.isArray(f.value) || f.value.length !== 2) return false;
+      const lo = toComparable(f.value[0], f.asDate);
+      const hi = toComparable(f.value[1], f.asDate);
+      if (lo === null || hi === null) return false;
+      const min = Math.min(lo, hi);
+      const max = Math.max(lo, hi);
+      return a >= min && a <= max;
+    }
+    default:
+      return true;
+  }
+}
+
+/** True when a filter actually constrains anything (empty values are no-ops). */
+export function hasFilterValue(f: Filter): boolean {
+  const v = f.value;
+  if (v == null) return false;
+  if (Array.isArray(v)) return v.length > 0;
+  if (typeof v === 'string') return v.trim() !== '';
+  return true; // numbers, booleans
+}
+
+export function applyFilters(
+  rows: Record<string, unknown>[],
+  filters?: Filter[],
+): Record<string, unknown>[] {
+  const active = (filters ?? []).filter(hasFilterValue);
+  if (!active.length) return rows;
+  return rows.filter((row) => active.every((f) => matchOne(dotGet(row, f.field), f)));
+}
diff --git a/web/src/lib/dashboard/engine/inferFields.test.ts b/web/src/lib/dashboard/engine/inferFields.test.ts
new file mode 100644
index 00000000..31bda80b
--- /dev/null
+++ b/web/src/lib/dashboard/engine/inferFields.test.ts
@@ -0,0 +1,42 @@
+import { describe, it, expect } from 'vitest';
+import { inferFields, mergeFields } from '@/lib/dashboard/engine/inferFields';
+import type { FieldDef } from '@/lib/dashboard/engine/types';
+
+describe('inferFields', () => {
+  it('classifies all-numeric as measure, mixed/string as dimension', () => {
+    const fields = inferFields([
+      { name: 'a', value: 10, mixed: 1 },
+      { name: 'b', value: 20, mixed: 'x' },
+    ]);
+    const byKey = Object.fromEntries(fields.map((f) => [f.key, f]));
+    expect(byKey.value.role).toBe('measure');
+    expect(byKey.name.role).toBe('dimension');
+    expect(byKey.mixed.role).toBe('dimension'); // had a string → dimension
+  });
+
+  it('detects date dimensions', () => {
+    const fields = inferFields([{ d: '2024-01-01' }, { d: '2024-02-01' }]);
+    expect(fields[0]).toMatchObject({ key: 'd', role: 'dimension', isDate: true });
+  });
+
+  it('omits object-only fields (not chartable) and handles empty input', () => {
+    expect(inferFields([])).toEqual([]);
+    const f = inferFields([{ nested: { a: 1 }, n: 5 }]);
+    expect(f.find((x) => x.key === 'nested')).toBeUndefined(); // object-only → dropped
+    expect(f.find((x) => x.key === 'n')?.role).toBe('measure');
+  });
+});
+
+describe('mergeFields', () => {
+  it('curated wins on collision; inferred fills gaps; curated first', () => {
+    const curated: FieldDef[] = [{ key: 'score', label: 'Score', role: 'measure', defaultAgg: 'avg' }];
+    const inferred: FieldDef[] = [
+      { key: 'score', label: 'score', role: 'dimension', inferred: true },
+      { key: 'extra', label: 'Extra', role: 'measure', inferred: true },
+    ];
+    const merged = mergeFields(curated, inferred);
+    expect(merged).toHaveLength(2);
+    expect(merged[0]).toEqual(curated[0]); // curated kept verbatim
+    expect(merged[1].key).toBe('extra');
+  });
+});
diff --git a/web/src/lib/dashboard/engine/inferFields.ts b/web/src/lib/dashboard/engine/inferFields.ts
new file mode 100644
index 00000000..838c89e4
--- /dev/null
+++ b/web/src/lib/dashboard/engine/inferFields.ts
@@ -0,0 +1,53 @@
+/**
+ * Auto-infer fields from row data so every dataset has a usable field list even
+ * where not curated. Curated fields always win on key collision.
+ */
+import type { FieldDef, FieldRole } from '@/lib/dashboard/engine/types';
+import { humanize } from '@/lib/dashboard/engine/coerce';
+
+const SAMPLE_N = 50;
+const DATE_RE = /^\d{4}-\d{2}-\d{2}([T ]|$)/;
+
+export function inferFields(rows: Record<string, unknown>[]): FieldDef[] {
+  if (!rows.length) return [];
+  const sample = rows.slice(0, SAMPLE_N);
+  const keys = new Set<string>();
+  for (const r of sample) for (const k of Object.keys(r)) keys.add(k);
+
+  const out: FieldDef[] = [];
+  for (const key of keys) {
+    let sawNumber = false;
+    let sawNonNumber = false;
+    let sawDate = false;
+    let present = 0;
+    for (const r of sample) {
+      const v = r[key];
+      if (v == null || v === '') continue;
+      // Skip nested objects/arrays — not directly chartable as a field.
+      if (typeof v === 'object') { sawNonNumber = true; continue; }
+      present += 1;
+      if (typeof v === 'number' && Number.isFinite(v)) sawNumber = true;
+      else {
+        sawNonNumber = true;
+        if (typeof v === 'string' && DATE_RE.test(v)) sawDate = true;
+      }
+    }
+    if (!present) continue;
+    const role: FieldRole = sawNumber && !sawNonNumber ? 'measure' : 'dimension';
+    out.push({
+      key,
+      label: humanize(key),
+      role,
+      defaultAgg: role === 'measure' ? 'sum' : undefined,
+      isDate: role === 'dimension' && sawDate ? true : undefined,
+      inferred: true,
+    });
+  }
+  return out;
+}
+
+/** Merge curated fields over inferred; curated wins, inferred fills gaps. Curated order first. */
+export function mergeFields(curated: FieldDef[], inferred: FieldDef[]): FieldDef[] {
+  const seen = new Set(curated.map((f) => f.key));
+  return [...curated, ...inferred.filter((f) => !seen.has(f.key))];
+}
diff --git a/web/src/lib/dashboard/engine/memo.ts b/web/src/lib/dashboard/engine/memo.ts
new file mode 100644
index 00000000..43b5bb1c
--- /dev/null
+++ b/web/src/lib/dashboard/engine/memo.ts
@@ -0,0 +1,56 @@
+/**
+ * Client-side memoization so a board of widgets is cheap:
+ *  - dataset row extraction is memoized per (datasetId, reportId) + payload identity
+ *    (shared across every widget on the same dataset within one data snapshot);
+ *  - query results are memoized per (rows identity, spec hash) via a WeakMap keyed
+ *    by the (stable) rows array.
+ */
+import type { ReportPayload } from '@/types/report';
+import type { QuerySpec, QueryResult } from '@/lib/dashboard/engine/types';
+import { datasetById } from '@/lib/dashboard/engine/datasets';
+import { runQuery } from '@/lib/dashboard/engine/runQuery';
+import { stableStringify } from '@/lib/dashboard/engine/specHash';
+
+interface RowsCacheEntry {
+  data: ReportPayload;
+  rows: Record<string, unknown>[];
+}
+const rowsCache = new Map<string, RowsCacheEntry>();
+
+/** Extract (and cache) a dataset's rows from the current report payload. */
+export function rowsForDataset(
+  data: ReportPayload,
+  datasetId: string,
+  reportId: number | null,
+): Record<string, unknown>[] {
+  const def = datasetById.get(datasetId);
+  if (!def) return [];
+  const key = `${datasetId}:${reportId ?? 'latest'}`;
+  const cached = rowsCache.get(key);
+  if (cached && cached.data === data) return cached.rows;
+  const rows = def.accessor(data) ?? [];
+  rowsCache.set(key, { data, rows });
+  return rows;
+}
+
+const queryCache = new WeakMap<Record<string, unknown>[], Map<string, QueryResult>>();
+
+/** Run a query with per-(rows, spec) memoization. */
+export function runQueryCached(rows: Record<string, unknown>[], spec: QuerySpec): QueryResult {
+  let perRows = queryCache.get(rows);
+  if (!perRows) {
+    perRows = new Map();
+    queryCache.set(rows, perRows);
+  }
+  const hash = stableStringify(spec);
+  const hit = perRows.get(hash);
+  if (hit) return hit;
+  const result = runQuery(rows, spec);
+  perRows.set(hash, result);
+  return result;
+}
+
+/** Test/maintenance helper. */
+export function clearDatasetRowCache(): void {
+  rowsCache.clear();
+}
diff --git a/web/src/lib/dashboard/engine/runQuery.test.ts b/web/src/lib/dashboard/engine/runQuery.test.ts
new file mode 100644
index 00000000..b6f6df01
--- /dev/null
+++ b/web/src/lib/dashboard/engine/runQuery.test.ts
@@ -0,0 +1,136 @@
+import { describe, it, expect } from 'vitest';
+import { runQuery } from '@/lib/dashboard/engine/runQuery';
+import type { QuerySpec } from '@/lib/dashboard/engine/types';
+
+describe('runQuery — ungrouped KPI', () => {
+  it('aggregates a single measure over all rows', () => {
+    const r = runQuery([{ x: 10 }, { x: 20 }, { x: 30 }], { measures: [{ field: 'x', agg: 'sum', label: 'X' }] });
+    expect(r.categories).toEqual(['']);
+    expect(r.series).toEqual([{ key: 'x', label: 'X', values: [60] }]);
+    expect(r.scalar).toBe(60);
+    expect(r.table).toEqual([{ X: 60 }]);
+  });
+  it('empty rows: avg → null scalar', () => {
+    const r = runQuery([], { measures: [{ field: 'x', agg: 'avg', label: 'X' }] });
+    expect(r.scalar).toBeNull();
+  });
+});
+
+describe('runQuery — grouped', () => {
+  it('counts rows per group (implicit count when no measures)', () => {
+    const rows = [{ status: '200' }, { status: '200' }, { status: '404' }];
+    const r = runQuery(rows, { groupBy: 'status' });
+    expect(r.categories).toEqual(['200', '404']);
+    expect(r.series[0].label).toBe('Count');
+    expect(r.series[0].values).toEqual([2, 1]);
+  });
+
+  it('averages a measure per group', () => {
+    const rows = [{ cat: 'a', v: 10 }, { cat: 'a', v: 20 }, { cat: 'b', v: 30 }];
+    const r = runQuery(rows, { groupBy: 'cat', measures: [{ field: 'v', agg: 'avg', label: 'Avg' }] });
+    expect(r.categories).toEqual(['a', 'b']);
+    expect(r.series[0].values).toEqual([15, 30]);
+  });
+
+  it('series-split produces one series per series value, aligned + zero-filled', () => {
+    const rows = [
+      { cat: 'a', s: 'x', v: 1 },
+      { cat: 'a', s: 'y', v: 2 },
+      { cat: 'b', s: 'x', v: 3 },
+    ];
+    const spec: QuerySpec = { groupBy: 'cat', series: 's', measures: [{ field: 'v', agg: 'sum', label: 'V' }] };
+    const r = runQuery(rows, spec);
+    expect(r.categories).toEqual(['a', 'b']);
+    expect(r.series).toEqual([
+      { key: 'x', label: 'x', values: [1, 3] },
+      { key: 'y', label: 'y', values: [2, 0] },
+    ]);
+    expect(r.table).toEqual([
+      { cat: 'a', x: 1, y: 2 },
+      { cat: 'b', x: 3, y: 0 },
+    ]);
+  });
+
+  it('pre-aggregated data (one row per category) is identity under sum', () => {
+    const rows = [{ label: '200', value: 10 }, { label: '404', value: 2 }];
+    const r = runQuery(rows, { groupBy: 'label', measures: [{ field: 'value', agg: 'sum', label: 'Pages' }] });
+    expect(r.categories).toEqual(['200', '404']);
+    expect(r.series[0].values).toEqual([10, 2]);
+  });
+});
+
+describe('runQuery — sort', () => {
+  it('sorts categories numerically when all keys are numbers', () => {
+    const rows = [{ d: '10', v: 1 }, { d: '2', v: 1 }, { d: '1', v: 1 }];
+    const r = runQuery(rows, { groupBy: 'd', measures: [{ field: 'v', agg: 'sum', label: 'V' }], sort: { by: 'category', dir: 'asc' } });
+    expect(r.categories).toEqual(['1', '2', '10']);
+  });
+  it('sorts ISO dates chronologically (lexical)', () => {
+    const rows = [{ d: '2024-03-01', v: 1 }, { d: '2024-01-01', v: 1 }, { d: '2024-02-01', v: 1 }];
+    const r = runQuery(rows, { groupBy: 'd', measures: [{ field: 'v', agg: 'sum', label: 'V' }], sort: { by: 'category', dir: 'asc' } });
+    expect(r.categories).toEqual(['2024-01-01', '2024-02-01', '2024-03-01']);
+  });
+  it('sorts by a measure value (desc)', () => {
+    const rows = [{ c: 'a', v: 3 }, { c: 'b', v: 9 }, { c: 'c', v: 5 }];
+    const r = runQuery(rows, { groupBy: 'c', measures: [{ field: 'v', agg: 'sum', label: 'V' }], sort: { by: 'V', dir: 'desc' } });
+    expect(r.categories).toEqual(['b', 'c', 'a']);
+  });
+});
+
+describe('runQuery — topN + Other', () => {
+  const rows = [
+    { c: 'a', v: 10 }, { c: 'b', v: 8 }, { c: 'c', v: 5 }, { c: 'd', v: 2 },
+  ];
+  it('keeps top N and drops the rest by default', () => {
+    const r = runQuery(rows, { groupBy: 'c', measures: [{ field: 'v', agg: 'sum', label: 'V' }], sort: { by: 'V', dir: 'desc' }, topN: { n: 2 } });
+    expect(r.categories).toEqual(['a', 'b']);
+  });
+  it('buckets the remainder into Other (additive)', () => {
+    const r = runQuery(rows, { groupBy: 'c', measures: [{ field: 'v', agg: 'sum', label: 'V' }], sort: { by: 'V', dir: 'desc' }, topN: { n: 2, other: true } });
+    expect(r.categories).toEqual(['a', 'b', 'Other']);
+    expect(r.series[0].values).toEqual([10, 8, 7]); // 5 + 2
+  });
+  it('Other computes a true mean for avg (merges accumulators)', () => {
+    const avgRows = [
+      { c: 'a', v: 10 }, { c: 'a', v: 10 },
+      { c: 'b', v: 8 },
+      { c: 'c', v: 4 }, { c: 'c', v: 4 }, { c: 'c', v: 4 }, { c: 'c', v: 4 },
+      { c: 'd', v: 2 },
+    ];
+    const r = runQuery(avgRows, {
+      groupBy: 'c',
+      measures: [{ field: 'v', agg: 'avg', label: 'Avg' }],
+      sort: { by: 'Avg', dir: 'desc' },
+      topN: { n: 2, other: true },
+    });
+    expect(r.categories).toEqual(['a', 'b', 'Other']);
+    // Other = c(4×4) + d(2) → (16+2)/5 = 3.6, NOT mean-of-means
+    expect(r.series[0].values[2]).toBeCloseTo(3.6, 5);
+  });
+});
+
+describe('runQuery — detail table mode', () => {
+  it('returns projected raw rows when no groupBy and no measures', () => {
+    const rows = [{ url: '/a', wc: 5, extra: 1 }, { url: '/b', wc: 9, extra: 2 }];
+    const r = runQuery(rows, { measures: [], columns: ['url', 'wc'] });
+    expect(r.categories).toEqual([]);
+    expect(r.series).toEqual([]);
+    expect(r.table).toEqual([{ url: '/a', wc: 5 }, { url: '/b', wc: 9 }]);
+    expect(r.scalar).toBe(2);
+  });
+});
+
+describe('runQuery — computed measure', () => {
+  it('aggregates a per-row ratio', () => {
+    const rows = [
+      { c: 'a', miss: 1, total: 4 },
+      { c: 'a', miss: 3, total: 6 },
+    ];
+    const r = runQuery(rows, {
+      groupBy: 'c',
+      measures: [{ field: 'altpct', agg: 'avg', label: 'Alt %', computed: { kind: 'ratio', numerator: 'miss', denominator: 'total', scale: 100 } }],
+    });
+    // row1 = 25, row2 = 50 → avg 37.5
+    expect(r.series[0].values[0]).toBeCloseTo(37.5, 5);
+  });
+});
diff --git a/web/src/lib/dashboard/engine/runQuery.ts b/web/src/lib/dashboard/engine/runQuery.ts
new file mode 100644
index 00000000..f340f111
--- /dev/null
+++ b/web/src/lib/dashboard/engine/runQuery.ts
@@ -0,0 +1,219 @@
+/**
+ * The query engine: a single pure function turning dataset rows + a QuerySpec
+ * into a normalized QueryResult that feeds charts, tables, and KPIs alike.
+ *
+ * Pipeline: filter → (detail | KPI | grouped) → aggregate → sort → topN(+Other).
+ */
+import type {
+  QuerySpec,
+  QueryResult,
+  QueryResultSeries,
+  MeasureSpec,
+  AggOp,
+} from '@/lib/dashboard/engine/types';
+import { dotGet, toNumber } from '@/lib/dashboard/engine/coerce';
+import { applyFilters } from '@/lib/dashboard/engine/filter';
+import { evalComputed } from '@/lib/dashboard/engine/computed';
+import { newAcc, step, mergeAcc, finalize, type Acc } from '@/lib/dashboard/engine/aggregate';
+
+const SINGLE = '__single__';
+
+export function measureLabel(m: MeasureSpec): string {
+  return m.label ?? `${m.agg}(${m.field})`;
+}
+
+/** Per-row value a measure contributes (computed field, count presence, or numeric). */
+function rowValue(row: Record<string, unknown>, m: MeasureSpec): { raw: unknown; num: number | null } {
+  if (m.computed) {
+    const v = evalComputed(m.computed, row);
+    return { raw: v, num: v };
+  }
+  const raw = dotGet(row, m.field);
+  return { raw, num: toNumber(raw) };
+}
+
+/** True when every category key parses as a finite number. */
+function allNumeric(keys: string[]): boolean {
+  return keys.length > 0 && keys.every((k) => k !== '' && Number.isFinite(Number(k)));
+}
+
+function compareKeys(a: string, b: string, numeric: boolean): number {
+  if (numeric) return Number(a) - Number(b);
+  return a < b ? -1 : a > b ? 1 : 0;
+}
+
+export function runQuery(rows: Record<string, unknown>[], spec: QuerySpec): QueryResult {
+  const filtered = applyFilters(rows, spec.filters);
+
+  // Normalize: a grouped query with no measures gets an implicit count.
+  let measures = spec.measures ?? [];
+  if (spec.groupBy && measures.length === 0) {
+    measures = [{ field: spec.groupBy, agg: 'count', label: 'Count' }];
+  }
+
+  // ── Detail-table mode: no groupBy, no measures → raw rows projected to columns.
+  if (!spec.groupBy && measures.length === 0) {
+    const cols = spec.columns;
+    const table = cols && cols.length
+      ? filtered.map((r) => {
+          const out: Record<string, unknown> = {};
+          for (const c of cols) out[c] = dotGet(r, c);
+          return out;
+        })
+      : filtered;
+    return { categories: [], series: [], table, scalar: filtered.length };
+  }
+
+  // ── Ungrouped KPI: measures over the whole (filtered) set.
+  if (!spec.groupBy) {
+    const raw = measures.map((m) => {
+      const acc = newAcc();
+      for (const row of filtered) {
+        const rv = rowValue(row, m);
+        step(acc, rv.raw, rv.num);
+      }
+      return { key: m.field || 'value', label: measureLabel(m), value: finalize(acc, m.agg) };
+    });
+    const tableRow: Record<string, unknown> = {};
+    for (const s of raw) tableRow[s.label] = s.value;
+    return {
+      categories: [''],
+      series: raw.map((s) => ({ key: s.key, label: s.label, values: [normNum(s.value)] })),
+      table: [tableRow],
+      scalar: numOrNull(raw[0]?.value),
+    };
+  }
+
+  // ── Grouped.
+  const seriesSplit = !!spec.series;
+  const catOrder: string[] = [];
+  const catSeen = new Set<string>();
+  const seriesOrder: string[] = [];
+  const seriesSeen = new Set<string>();
+  // cat -> seriesKey -> Acc[] (one per measure)
+  const accs = new Map<string, Map<string, Acc[]>>();
+
+  const newMeasureAccs = () => measures.map(() => newAcc());
+
+  for (const row of filtered) {
+    const catKey = String(dotGet(row, spec.groupBy) ?? '');
+    if (!catSeen.has(catKey)) { catSeen.add(catKey); catOrder.push(catKey); }
+    const sKey = seriesSplit ? String(dotGet(row, spec.series as string) ?? '') : SINGLE;
+    if (seriesSplit && !seriesSeen.has(sKey)) { seriesSeen.add(sKey); seriesOrder.push(sKey); }
+
+    let bySeries = accs.get(catKey);
+    if (!bySeries) { bySeries = new Map(); accs.set(catKey, bySeries); }
+    let mAccs = bySeries.get(sKey);
+    if (!mAccs) { mAccs = newMeasureAccs(); bySeries.set(sKey, mAccs); }
+
+    for (let mi = 0; mi < measures.length; mi++) {
+      const { raw, num } = rowValue(row, measures[mi]);
+      step(mAccs[mi], raw, num);
+    }
+  }
+
+  const seriesKeys = seriesSplit ? seriesOrder : [SINGLE];
+  const accFor = (cat: string, sKey: string, mi: number): Acc | undefined =>
+    accs.get(cat)?.get(sKey)?.[mi];
+  const valueFor = (cat: string, sKey: string, mi: number): number | null => {
+    const a = accFor(cat, sKey, mi);
+    return a ? finalize(a, measures[mi].agg) : null;
+  };
+
+  // ── Sort categories.
+  let ordered = [...catOrder];
+  const sort = spec.sort;
+  if (sort) {
+    const numericKeys = allNumeric(catOrder);
+    const idx = new Map(catOrder.map((c, i) => [c, i]));
+    if (sort.by === 'category') {
+      ordered.sort((a, b) => {
+        const c = compareKeys(a, b, numericKeys);
+        return (sort.dir === 'desc' ? -c : c) || (idx.get(a)! - idx.get(b)!);
+      });
+    } else {
+      const mi = Math.max(0, measures.findIndex((m) => measureLabel(m) === sort.by));
+      const sortVal = (cat: string) =>
+        seriesKeys.reduce((acc, sk) => acc + (valueFor(cat, sk, mi) ?? 0), 0);
+      ordered.sort((a, b) => {
+        const d = sortVal(a) - sortVal(b);
+        return (sort.dir === 'desc' ? -d : d) || (idx.get(a)! - idx.get(b)!);
+      });
+    }
+  }
+
+  // ── Top-N (+ Other bucket built by merging retained accumulators).
+  let otherCats: string[] = [];
+  if (spec.topN && spec.topN.n > 0 && ordered.length > spec.topN.n) {
+    otherCats = ordered.slice(spec.topN.n);
+    ordered = ordered.slice(0, spec.topN.n);
+  }
+  const otherLabel = spec.topN?.otherLabel ?? 'Other';
+  const includeOther = !!spec.topN?.other && otherCats.length > 0;
+
+  // Merged Other accs: seriesKey -> Acc[]
+  const otherAccs = new Map<string, Acc[]>();
+  if (includeOther) {
+    for (const sk of seriesKeys) {
+      const merged = measures.map(() => newAcc());
+      for (const cat of otherCats) {
+        for (let mi = 0; mi < measures.length; mi++) {
+          const a = accFor(cat, sk, mi);
+          if (a) mergeAcc(merged[mi], a);
+        }
+      }
+      otherAccs.set(sk, merged);
+    }
+  }
+
+  const finalCats = includeOther ? [...ordered, otherLabel] : ordered;
+  const valueAt = (cat: string, sKey: string, mi: number): number | null => {
+    if (includeOther && cat === otherLabel) {
+      const a = otherAccs.get(sKey)?.[mi];
+      return a ? finalize(a, measures[mi].agg) : null;
+    }
+    return valueFor(cat, sKey, mi);
+  };
+
+  // ── Emit series.
+  let series: QueryResultSeries[];
+  if (seriesSplit) {
+    // One series per series value; values = primary measure (measure[0]) across categories.
+    series = seriesKeys.map((sk) => ({
+      key: sk,
+      label: sk === '' ? '(none)' : sk,
+      values: finalCats.map((c) => normNum(valueAt(c, sk, 0))),
+    }));
+  } else {
+    series = measures.map((m, mi) => ({
+      key: m.field || `m${mi}`,
+      label: measureLabel(m),
+      values: finalCats.map((c) => normNum(valueAt(c, SINGLE, mi))),
+    }));
+  }
+
+  // ── Emit table (one row per category).
+  const catCol = spec.groupBy;
+  const table = finalCats.map((c, ci) => {
+    const row: Record<string, unknown> = { [catCol]: c === '' ? '(none)' : c };
+    for (const s of series) row[s.label] = s.values[ci];
+    return row;
+  });
+
+  return {
+    categories: finalCats.map((c) => (c === '' ? '(none)' : c)),
+    series,
+    table,
+    scalar: numOrNull(series[0]?.values[0]),
+  };
+}
+
+/** null → 0 for chart value arrays (charts expect numbers; gaps render as 0). */
+function normNum(v: number | null): number {
+  return v == null || !Number.isFinite(v) ? 0 : v;
+}
+
+/** Preserve null for the KPI scalar (so "no data" shows an em-dash, not 0). */
+function numOrNull(v: number | null | undefined): number | null {
+  return v == null || !Number.isFinite(v) ? null : v;
+}
diff --git a/web/src/lib/dashboard/engine/specHash.test.ts b/web/src/lib/dashboard/engine/specHash.test.ts
new file mode 100644
index 00000000..f5037ad4
--- /dev/null
+++ b/web/src/lib/dashboard/engine/specHash.test.ts
@@ -0,0 +1,15 @@
+import { describe, it, expect } from 'vitest';
+import { stableStringify } from '@/lib/dashboard/engine/specHash';
+
+describe('stableStringify', () => {
+  it('is invariant to key order', () => {
+    expect(stableStringify({ a: 1, b: 2 })).toBe(stableStringify({ b: 2, a: 1 }));
+    expect(stableStringify({ x: { p: 1, q: 2 } })).toBe(stableStringify({ x: { q: 2, p: 1 } }));
+  });
+  it('distinguishes different values', () => {
+    expect(stableStringify({ a: 1 })).not.toBe(stableStringify({ a: 2 }));
+  });
+  it('preserves array order', () => {
+    expect(stableStringify([1, 2, 3])).not.toBe(stableStringify([3, 2, 1]));
+  });
+});
diff --git a/web/src/lib/dashboard/engine/specHash.ts b/web/src/lib/dashboard/engine/specHash.ts
new file mode 100644
index 00000000..ce87e4d9
--- /dev/null
+++ b/web/src/lib/dashboard/engine/specHash.ts
@@ -0,0 +1,15 @@
+/** Stable JSON stringify (sorted keys) — used as a memo key for query specs. */
+export function stableStringify(value: unknown): string {
+  return JSON.stringify(sortKeys(value));
+}
+
+function sortKeys(value: unknown): unknown {
+  if (Array.isArray(value)) return value.map(sortKeys);
+  if (value && typeof value === 'object') {
+    const obj = value as Record<string, unknown>;
+    const out: Record<string, unknown> = {};
+    for (const k of Object.keys(obj).sort()) out[k] = sortKeys(obj[k]);
+    return out;
+  }
+  return value;
+}
diff --git a/web/src/lib/dashboard/engine/types.ts b/web/src/lib/dashboard/engine/types.ts
new file mode 100644
index 00000000..2b353a9b
--- /dev/null
+++ b/web/src/lib/dashboard/engine/types.ts
@@ -0,0 +1,176 @@
+/**
+ * Core engine types for the rebuilt dashboard.
+ *
+ * This module is pure (no React, no network) and owns the contracts shared by
+ * the dataset registry, the query engine, and the chart layer. The document
+ * schema (DashboardDoc / Widget) lives in `@/lib/dashboard/types` and imports
+ * `QuerySpec` / `VizType` from here — so there is no import cycle.
+ */
+import type { SectionKey } from '@/lib/reportSections';
+import type { ReportPayload } from '@/types/report';
+
+/** Visualization types a widget can render. */
+export type VizType =
+  | 'kpi'
+  | 'stat-card'
+  | 'gauge'
+  | 'bar'
+  | 'horizontal-bar'
+  | 'stacked-bar'
+  | 'line'
+  | 'area'
+  | 'sparkline'
+  | 'pie'
+  | 'doughnut'
+  | 'scatter'
+  | 'radar'
+  | 'treemap'
+  | 'funnel'
+  | 'heatmap'
+  | 'table'
+  | 'text';
+
+/** A field is either categorical (group-by / axis) or numeric (aggregated). */
+export type FieldRole = 'dimension' | 'measure';
+
+/** Aggregation applied when reducing many rows to one value. */
+export type AggOp = 'sum' | 'avg' | 'count' | 'countDistinct' | 'min' | 'max' | 'median';
+
+/** Number-format hint (tokens understood by viz/formatters.ts `formatValue`). */
+export type FormatHint =
+  | '0'
+  | '0.0'
+  | '0.00'
+  | '0.0%'
+  | 'pct'
+  | 'score'
+  | 'ms'
+  | 'bytes'
+  | string;
+
+export interface FieldDef {
+  /** Dot-path key, e.g. `lighthouse.median_metrics.seo_score`. */
+  key: string;
+  label: string;
+  role: FieldRole;
+  /** Default aggregation for measures. */
+  defaultAgg?: AggOp;
+  format?: FormatHint;
+  /** True when produced by auto-inference (curated fields win on merge). */
+  inferred?: boolean;
+  /** Dimension holds a date string — enables chronological sort + date filters. */
+  isDate?: boolean;
+}
+
+export interface DatasetDef {
+  /** Stable id stored on the widget. */
+  id: string;
+  label: string;
+  /** Section that must be loaded (via loadSection) before rows exist. */
+  section: SectionKey;
+  /** Extract this dataset's rows from the full report payload. */
+  accessor: (data: ReportPayload) => Record<string, unknown>[];
+  /** Rows are already one-per-category (distributions, GSC top-N). */
+  preAggregated?: boolean;
+  /** Curated fields, merged over inferred fields. */
+  fields: FieldDef[];
+  /** Viz types that make sense for this dataset. */
+  viz: VizType[];
+  /** Default query used when a widget is first created on this dataset. */
+  defaultSpec?: Partial<QuerySpec>;
+  /** Short description shown in the dataset picker. */
+  description?: string;
+  /** Grouping section shown in the dataset picker. */
+  group?: string;
+}
+
+export type FilterOp =
+  | 'eq'
+  | 'neq'
+  | 'in'
+  | 'nin'
+  | 'contains'
+  | 'gt'
+  | 'gte'
+  | 'lt'
+  | 'lte'
+  | 'between';
+
+export type FilterValue =
+  | string
+  | number
+  | boolean
+  | Array<string | number>
+  | [number, number];
+
+export interface Filter {
+  field: string;
+  op: FilterOp;
+  value: FilterValue;
+  /** Compare via Date.parse for gt/gte/lt/lte/between. */
+  asDate?: boolean;
+}
+
+/**
+ * Computed measure — the safe, structured replacement for the old DashScript DSL.
+ * No `eval`; evaluated by a finite switch, divide-by-zero → null.
+ */
+export type Operand = { field: string } | { const: number };
+
+export type ComputedField =
+  | { kind: 'ratio'; numerator: string; denominator: string; scale?: number }
+  | { kind: 'arithmetic'; op: '+' | '-' | '*' | '/'; left: Operand; right: Operand };
+
+export interface MeasureSpec {
+  /** Dot-path field; ignored when agg='count' with no field, or when `computed` is set. */
+  field: string;
+  agg: AggOp;
+  label?: string;
+  format?: FormatHint;
+  /** When set, a synthetic per-row column is computed then aggregated. */
+  computed?: ComputedField;
+}
+
+export interface SortSpec {
+  /** 'category' to sort by the group key, or a measure label to sort by its value. */
+  by: 'category' | string;
+  dir: 'asc' | 'desc';
+}
+
+export interface TopNSpec {
+  n: number;
+  /** Bucket the remainder into a single "Other" category. */
+  other?: boolean;
+  otherLabel?: string;
+}
+
+export interface QuerySpec {
+  filters?: Filter[];
+  /** Category dimension (X axis / table grouping). Omit for a single-value KPI. */
+  groupBy?: string;
+  /** Legend/series dimension (group-by split into multiple series). */
+  series?: string;
+  /** Omit (or empty) for a detail table; a grouped query with none gets an implicit count. */
+  measures?: MeasureSpec[];
+  sort?: SortSpec;
+  topN?: TopNSpec;
+  /** Detail-table column projection (used when there is no groupBy and no measures). */
+  columns?: string[];
+}
+
+export interface QueryResultSeries {
+  key: string;
+  label: string;
+  values: number[];
+}
+
+export interface QueryResult {
+  /** Group labels; a single '' entry when ungrouped. */
+  categories: string[];
+  /** One per series value (series-split), else one per measure. */
+  series: QueryResultSeries[];
+  /** Denormalized rows for tables / scatter / heatmap / CSV export. */
+  table: Record<string, unknown>[];
+  /** Single value for KPI / gauge (series[0].values[0]). */
+  scalar: number | null;
+}
diff --git a/web/src/lib/dashboard/export/csv.test.ts b/web/src/lib/dashboard/export/csv.test.ts
new file mode 100644
index 00000000..224f133c
--- /dev/null
+++ b/web/src/lib/dashboard/export/csv.test.ts
@@ -0,0 +1,23 @@
+import { describe, it, expect } from 'vitest';
+import { tableToCsv, sanitize } from '@/lib/dashboard/export/csv';
+
+describe('tableToCsv', () => {
+  it('emits a header row + data rows', () => {
+    const csv = tableToCsv([{ a: 1, b: 'x' }, { a: 2, b: 'y' }]);
+    expect(csv).toBe('a,b\n1,x\n2,y');
+  });
+  it('quotes values containing commas, quotes, or newlines', () => {
+    const csv = tableToCsv([{ a: 'has,comma', b: 'say "hi"' }]);
+    expect(csv).toBe('a,b\n"has,comma","say ""hi"""');
+  });
+  it('returns empty string for no rows', () => {
+    expect(tableToCsv([])).toBe('');
+  });
+});
+
+describe('sanitize', () => {
+  it('strips unsafe filename characters', () => {
+    expect(sanitize('Top queries / 2024')).toBe('Top_queries_2024');
+    expect(sanitize('')).toBe('export');
+  });
+});
diff --git a/web/src/lib/dashboard/export/csv.ts b/web/src/lib/dashboard/export/csv.ts
new file mode 100644
index 00000000..57f5e9d2
--- /dev/null
+++ b/web/src/lib/dashboard/export/csv.ts
@@ -0,0 +1,33 @@
+/** CSV export from a QueryResult.table — no dependencies. */
+
+export function tableToCsv(rows: Record<string, unknown>[]): string {
+  if (!rows.length) return '';
+  const cols = Object.keys(rows[0]);
+  const esc = (v: unknown) => {
+    const s = v == null ? '' : String(v);
+    return /[",\n]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s;
+  };
+  return [cols.join(','), ...rows.map((r) => cols.map((c) => esc(r[c])).join(','))].join('\n');
+}
+
+/** Trigger a client-side file download (browser only). */
+export function downloadText(filename: string, text: string, mime = 'text/csv;charset=utf-8'): void {
+  if (typeof document === 'undefined') return;
+  const blob = new Blob([text], { type: mime });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  URL.revokeObjectURL(url);
+}
+
+export function downloadCsv(name: string, rows: Record<string, unknown>[]): void {
+  downloadText(`${sanitize(name)}.csv`, tableToCsv(rows));
+}
+
+export function sanitize(name: string): string {
+  return (name || 'export').replace(/[^a-z0-9-_]+/gi, '_').slice(0, 80);
+}
diff --git a/web/src/lib/dashboard/export/png.ts b/web/src/lib/dashboard/export/png.ts
new file mode 100644
index 00000000..7436179f
--- /dev/null
+++ b/web/src/lib/dashboard/export/png.ts
@@ -0,0 +1,15 @@
+/** PNG export of an ECharts widget via its native getDataURL. */
+import type { EChartsInstance } from '@/lib/dashboard/charts/echartsCore';
+import { sanitize } from '@/lib/dashboard/export/csv';
+
+export function chartToPng(chart: EChartsInstance, name: string): void {
+  if (typeof document === 'undefined') return;
+  const bg = getComputedStyle(document.documentElement).getPropertyValue('--app-bg').trim() || '#0b0f19';
+  const url = chart.getDataURL({ type: 'png', pixelRatio: 2, backgroundColor: bg });
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = `${sanitize(name)}.png`;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+}
diff --git a/web/src/lib/dashboard/hooks/usePropertyForDomain.ts b/web/src/lib/dashboard/hooks/usePropertyForDomain.ts
new file mode 100644
index 00000000..2ec68037
--- /dev/null
+++ b/web/src/lib/dashboard/hooks/usePropertyForDomain.ts
@@ -0,0 +1,63 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useReport } from '@/context/useReport';
+import { useActivePropertyContext } from '@/hooks/useActivePropertyContext';
+import { apiUrl } from '@/lib/publicBase';
+
+interface PropertyRow {
+  id: number;
+  name?: string;
+  canonical_domain?: string;
+}
+
+function norm(s?: string | null): string {
+  return (s ?? '')
+    .toLowerCase()
+    .replace(/^https?:\/\//, '')
+    .replace(/^www\./, '')
+    .replace(/\/$/, '')
+    .trim();
+}
+
+/**
+ * Resolve the property whose dashboards we read/write, keyed by the `?domain=`
+ * URL param (via ReportContext.domainSlug). Falls back to the pipeline's active
+ * property, then the first property in the DB.
+ */
+export function usePropertyForDomain(): { propertyId: number | null; ready: boolean } {
+  const { domainSlug } = useReport();
+  const { propertyId: configPropertyId, contextReady } = useActivePropertyContext();
+  const [resolved, setResolved] = useState<number | null>(null);
+  const [done, setDone] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    setDone(false);
+    fetch(apiUrl('/properties'))
+      .then((r) => r.json())
+      .then((d: { properties?: PropertyRow[] }) => {
+        if (cancelled) return;
+        const props = d.properties ?? [];
+        const want = norm(domainSlug);
+        const match = want
+          ? props.find((p) => {
+              const cd = norm(p.canonical_domain);
+              return cd === want || cd.includes(want) || want.includes(cd);
+            })
+          : undefined;
+        setResolved(match?.id ?? configPropertyId ?? props[0]?.id ?? null);
+      })
+      .catch(() => {
+        if (!cancelled) setResolved(configPropertyId ?? null);
+      })
+      .finally(() => {
+        if (!cancelled) setDone(true);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [domainSlug, configPropertyId]);
+
+  return { propertyId: resolved, ready: contextReady && done };
+}
diff --git a/web/src/lib/dashboard/hooks/useWidgetQuery.ts b/web/src/lib/dashboard/hooks/useWidgetQuery.ts
new file mode 100644
index 00000000..20b05afe
--- /dev/null
+++ b/web/src/lib/dashboard/hooks/useWidgetQuery.ts
@@ -0,0 +1,67 @@
+'use client';
+
+import { useEffect, useMemo } from 'react';
+import { useReport } from '@/context/useReport';
+import { getDataset } from '@/lib/dashboard/engine/datasets';
+import { rowsForDataset, runQueryCached } from '@/lib/dashboard/engine/memo';
+import { inferFields, mergeFields } from '@/lib/dashboard/engine/inferFields';
+import type { DatasetDef, FieldDef, Filter, QuerySpec, QueryResult } from '@/lib/dashboard/engine/types';
+
+export type WidgetStatus = 'loading' | 'loaded' | 'error';
+
+interface DatasetRowsResult {
+  def: DatasetDef | undefined;
+  rows: Record<string, unknown>[];
+  fields: FieldDef[];
+  status: WidgetStatus;
+}
+
+/** Load a dataset's section (on demand) and return its rows + merged field catalog. */
+export function useDatasetRows(datasetId: string): DatasetRowsResult {
+  const { data, sectionStatus, loadSection, selectedReportId } = useReport();
+  const def = getDataset(datasetId);
+
+  useEffect(() => {
+    if (def && data && sectionStatus[def.section] === undefined) {
+      void loadSection(def.section, selectedReportId ?? null);
+    }
+  }, [def, data, sectionStatus, loadSection, selectedReportId]);
+
+  const rows = useMemo(
+    () => (def && data ? rowsForDataset(data, datasetId, selectedReportId ?? null) : []),
+    [def, data, datasetId, selectedReportId],
+  );
+  const fields = useMemo(() => (def ? mergeFields(def.fields, inferFields(rows)) : []), [def, rows]);
+
+  let status: WidgetStatus = 'loading';
+  if (!def) status = 'error';
+  else if (sectionStatus[def.section] === 'error') status = 'error';
+  else if (sectionStatus[def.section] === 'loaded') status = 'loaded';
+
+  return { def, rows, fields, status };
+}
+
+interface WidgetQueryResult {
+  def: DatasetDef | undefined;
+  status: WidgetStatus;
+  result: QueryResult;
+  fields: FieldDef[];
+}
+
+/** Run a widget's query against its (section-loaded) dataset rows, with memoization. */
+export function useWidgetQuery(
+  datasetId: string,
+  spec: QuerySpec,
+  injectedFilters?: Filter[],
+): WidgetQueryResult {
+  const { def, rows, fields, status } = useDatasetRows(datasetId);
+  const effSpec = useMemo<QuerySpec>(
+    () =>
+      injectedFilters && injectedFilters.length
+        ? { ...spec, filters: [...(spec.filters ?? []), ...injectedFilters] }
+        : spec,
+    [spec, injectedFilters],
+  );
+  const result = useMemo(() => runQueryCached(rows, effSpec), [rows, effSpec]);
+  return { def, status, result, fields };
+}
diff --git a/web/src/lib/dashboard/index.ts b/web/src/lib/dashboard/index.ts
index 379b51ae..4953afc3 100644
--- a/web/src/lib/dashboard/index.ts
+++ b/web/src/lib/dashboard/index.ts
@@ -1,40 +1,59 @@
 /**
- * Dashboard builder library — types, data layer, viz registry, and UI components.
+ * Dashboard module — public API.
  *
- * Structure:
- *   catalog/   — semantic data-source catalog for widget picker
- *   data/      — API clients + widget data fetching
- *   viz/       — chart/KPI renderers + registry
- *   builder/   — grid, palette, config panel UI
+ *   engine/   pure data engine: dataset registry, query engine, doc schema
+ *   charts/   ECharts renderer + option builders + theme (echarts isolated here)
+ *   widgets/  per-widget presenters (KPI/table/text/chart) + frame
+ *   canvas/   react-grid-layout board
+ *   builder/  drag-and-drop authoring (shelves, gallery, format)
+ *   interaction/ slicers, cross-filter, drill
+ *   hooks/    React adapters over ReportContext
+ *   data/     dashboards CRUD client
  */
 
+// Types + doc schema
 export * from '@/lib/dashboard/types';
-export * from '@/lib/dashboard/catalog/catalog';
-export * from '@/lib/dashboard/data/fetchWidgetData';
-export * from '@/lib/dashboard/data/fetchDashboards';
-export * from '@/lib/dashboard/viz/labels';
-export { extractMultiSeries, extractChartSeries } from '@/lib/dashboard/viz/series';
-export type { SeriesSet, ChartSeries } from '@/lib/dashboard/viz/series';
-export { renderViz, VIZ_REGISTRY } from '@/lib/dashboard/viz/registry';
-export { evalMeasure, evalTransform, DASHSCRIPT_HELP } from '@/lib/dashboard/script/eval';
-export { DashScriptError } from '@/lib/dashboard/script/types';
-
-export { FilterBar } from '@/lib/dashboard/builder/FilterBar';
-export { default as DashboardGrid } from '@/lib/dashboard/builder/DashboardGrid';
-export { default as DashboardWidget } from '@/lib/dashboard/builder/DashboardWidget';
-export { default as DashboardSwitcher } from '@/lib/dashboard/builder/DashboardSwitcher';
-export { default as WidgetPalette } from '@/lib/dashboard/builder/WidgetPalette';
-export { default as WidgetConfigPanel } from '@/lib/dashboard/builder/WidgetConfigPanel';
-export { default as PresetPicker } from '@/lib/dashboard/builder/PresetPicker';
-export { DASHBOARD_PRESETS, getDashboardPreset } from '@/lib/dashboard/presets/presets';
-export { default as AiAssistModal } from '@/lib/dashboard/builder/AiAssistModal';
+
+// Engine
+export { runQuery, measureLabel } from '@/lib/dashboard/engine/runQuery';
+export { runQueryCached, rowsForDataset, clearDatasetRowCache } from '@/lib/dashboard/engine/memo';
+export { inferFields, mergeFields } from '@/lib/dashboard/engine/inferFields';
+export { applyFilters, hasFilterValue } from '@/lib/dashboard/engine/filter';
+export { DATASETS, datasetById, getDataset, datasetsByGroup } from '@/lib/dashboard/engine/datasets';
+
+// Charts
+export { default as ChartRenderer } from '@/lib/dashboard/charts/ChartRenderer';
+export { isEChartsViz, VIZ_TO_OPTION } from '@/lib/dashboard/charts/optionBuilders';
+export { VIZ_META, VIZ_LABELS, ALL_VIZ, vizFitsSpec } from '@/lib/dashboard/charts/vizMeta';
+export { formatValue, thresholdColor } from '@/lib/dashboard/charts/format';
+export { buildChartTheme, PALETTE_IDS } from '@/lib/dashboard/charts/theme';
+export type { EChartsInstance } from '@/lib/dashboard/charts/echartsCore';
+
+// Widgets + canvas
+export { WidgetFrame } from '@/lib/dashboard/widgets/WidgetFrame';
+export { DashboardCanvas } from '@/lib/dashboard/canvas/DashboardCanvas';
+
+// Builder
+export { ConfigPanel } from '@/lib/dashboard/builder/ConfigPanel';
+
+// Presets + export
+export { DASHBOARD_PRESETS, getPreset } from '@/lib/dashboard/presets/presets';
+export { tableToCsv, downloadCsv } from '@/lib/dashboard/export/csv';
+export { chartToPng } from '@/lib/dashboard/export/png';
+
+// Interaction
+export { SlicerBar } from '@/lib/dashboard/interaction/SlicerBar';
 export {
-  generateWidgetScript,
-  generateWidget,
-  generateDashboard,
-  sanitizeChartSpec,
-  validateMeasure,
-  validateTransform,
-  assignLayouts,
-  AiGenerateError,
-} from '@/lib/dashboard/ai/generate';
+  applyInteractions,
+  advanceDrill,
+  type CrossFilter,
+  type DrillState,
+  type InteractionState,
+} from '@/lib/dashboard/interaction/applyInteractions';
+
+// Hooks
+export { usePropertyForDomain } from '@/lib/dashboard/hooks/usePropertyForDomain';
+export { useWidgetQuery, useDatasetRows, type WidgetStatus } from '@/lib/dashboard/hooks/useWidgetQuery';
+
+// Data CRUD
+export * from '@/lib/dashboard/data/fetchDashboards';
diff --git a/web/src/lib/dashboard/interaction/SlicerBar.tsx b/web/src/lib/dashboard/interaction/SlicerBar.tsx
new file mode 100644
index 00000000..7ee8bc75
--- /dev/null
+++ b/web/src/lib/dashboard/interaction/SlicerBar.tsx
@@ -0,0 +1,92 @@
+'use client';
+
+import { useMemo } from 'react';
+import { SlidersHorizontal, X } from 'lucide-react';
+import { SlicerControl } from '@/lib/dashboard/interaction/SlicerControl';
+import { DATASETS } from '@/lib/dashboard/engine/datasets';
+import type { BoardSlicer } from '@/lib/dashboard/engine/doc';
+import type { FilterValue } from '@/lib/dashboard/engine/types';
+import type { CrossFilter } from '@/lib/dashboard/interaction/applyInteractions';
+
+interface SlicerBarProps {
+  slicers: BoardSlicer[];
+  slicerValues: Record<string, FilterValue>;
+  crossFilter: CrossFilter | null;
+  editing: boolean;
+  onSetValue: (id: string, value: string[]) => void;
+  onAddSlicer: (field: string, datasetId: string, label: string) => void;
+  onRemoveSlicer: (id: string) => void;
+  onClearCrossFilter: () => void;
+}
+
+export function SlicerBar({
+  slicers,
+  slicerValues,
+  crossFilter,
+  editing,
+  onSetValue,
+  onAddSlicer,
+  onRemoveSlicer,
+  onClearCrossFilter,
+}: SlicerBarProps) {
+  // Distinct dimension fields across datasets, for the "add slicer" menu.
+  const dimOptions = useMemo(() => {
+    const seen = new Set<string>();
+    const opts: { key: string; datasetId: string; label: string; group: string }[] = [];
+    for (const d of DATASETS) {
+      for (const f of d.fields) {
+        if (f.role !== 'dimension' || seen.has(f.key)) continue;
+        seen.add(f.key);
+        opts.push({ key: f.key, datasetId: d.id, label: f.label, group: d.group ?? 'Other' });
+      }
+    }
+    return opts;
+  }, []);
+
+  if (!editing && slicers.length === 0 && !crossFilter) return null;
+
+  return (
+    <div className="flex items-center gap-2 flex-wrap px-1 py-2 border-b border-default">
+      <SlidersHorizontal className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+      {slicers.map((s) => (
+        <SlicerControl
+          key={s.id}
+          slicer={s}
+          value={slicerValues[s.id]}
+          editing={editing}
+          onChange={(v) => onSetValue(s.id, v)}
+          onRemove={() => onRemoveSlicer(s.id)}
+        />
+      ))}
+
+      {editing && (
+        <select
+          value=""
+          onChange={(e) => {
+            if (!e.target.value) return;
+            const opt = dimOptions.find((o) => o.key === e.target.value);
+            if (opt) onAddSlicer(opt.key, opt.datasetId, opt.label);
+            e.currentTarget.value = '';
+          }}
+          className="px-2 py-1 text-xs bg-brand-800 border border-dashed border-default rounded-lg text-muted-foreground hover:text-bright focus:outline-none cursor-pointer"
+        >
+          <option value="">+ Add slicer…</option>
+          {dimOptions.map((o) => (
+            <option key={o.key} value={o.key}>{o.label} ({o.group})</option>
+          ))}
+        </select>
+      )}
+
+      {crossFilter && (
+        <button
+          onClick={onClearCrossFilter}
+          className="flex items-center gap-1 px-2 py-1 rounded-lg bg-amber-500/15 border border-amber-500/30 text-amber-300 text-xs"
+          title="Clear cross-filter"
+        >
+          {crossFilter.field} = {crossFilter.value}
+          <X className="h-3 w-3" />
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/web/src/lib/dashboard/interaction/SlicerControl.tsx b/web/src/lib/dashboard/interaction/SlicerControl.tsx
new file mode 100644
index 00000000..3da5071d
--- /dev/null
+++ b/web/src/lib/dashboard/interaction/SlicerControl.tsx
@@ -0,0 +1,75 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import { ChevronDown, X } from 'lucide-react';
+import { useDatasetRows } from '@/lib/dashboard/hooks/useWidgetQuery';
+import { dotGet } from '@/lib/dashboard/engine/coerce';
+import type { BoardSlicer } from '@/lib/dashboard/engine/doc';
+import type { FilterValue } from '@/lib/dashboard/engine/types';
+
+interface SlicerControlProps {
+  slicer: BoardSlicer;
+  value: FilterValue | undefined;
+  editing: boolean;
+  onChange: (value: string[]) => void;
+  onRemove: () => void;
+}
+
+export function SlicerControl({ slicer, value, editing, onChange, onRemove }: SlicerControlProps) {
+  const { rows } = useDatasetRows(slicer.datasetId);
+  const [open, setOpen] = useState(false);
+  const selected = Array.isArray(value) ? value.map(String) : [];
+
+  const options = useMemo(() => {
+    const set = new Set<string>();
+    for (const r of rows) {
+      const v = dotGet(r, slicer.field);
+      if (v != null && v !== '') set.add(String(v));
+      if (set.size > 500) break;
+    }
+    return [...set].sort();
+  }, [rows, slicer.field]);
+
+  const toggle = (v: string) =>
+    onChange(selected.includes(v) ? selected.filter((x) => x !== v) : [...selected, v]);
+
+  return (
+    <div className="relative">
+      <div className="flex items-center">
+        <button
+          onClick={() => setOpen((o) => !o)}
+          className={`flex items-center gap-1 px-2 py-1 rounded-lg border text-xs transition-colors ${
+            selected.length ? 'border-blue-500 bg-blue-500/10 text-blue-300' : 'border-default text-muted-foreground hover:text-bright'
+          }`}
+        >
+          <span className="font-medium">{slicer.label}</span>
+          {selected.length > 0 && <span className="text-[10px] bg-blue-500/20 rounded px-1">{selected.length}</span>}
+          <ChevronDown className="h-3 w-3" />
+        </button>
+        {editing && (
+          <button onClick={onRemove} title="Remove slicer" className="ml-0.5 p-0.5 rounded hover:bg-red-500/20 text-muted-foreground hover:text-red-400">
+            <X className="h-3 w-3" />
+          </button>
+        )}
+      </div>
+      {open && (
+        <>
+          <div className="fixed inset-0 z-40" onClick={() => setOpen(false)} />
+          <div className="absolute z-50 mt-1 w-56 max-h-64 overflow-auto bg-brand-900 border border-default rounded-lg p-1.5 shadow-2xl">
+            <div className="flex items-center justify-between px-1 pb-1 mb-1 border-b border-default">
+              <span className="text-[10px] uppercase font-bold text-muted-foreground">{slicer.label}</span>
+              <button onClick={() => onChange([])} className="text-[10px] text-blue-400 hover:text-blue-300">Clear</button>
+            </div>
+            {options.length === 0 && <p className="text-xs text-muted-foreground px-1 py-1">No values</p>}
+            {options.map((o) => (
+              <label key={o} className="flex items-center gap-2 px-1 py-0.5 text-xs text-foreground hover:bg-white/5 rounded cursor-pointer">
+                <input type="checkbox" checked={selected.includes(o)} onChange={() => toggle(o)} />
+                <span className="truncate" title={o}>{o}</span>
+              </label>
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/web/src/lib/dashboard/interaction/applyInteractions.test.ts b/web/src/lib/dashboard/interaction/applyInteractions.test.ts
new file mode 100644
index 00000000..b681c9c7
--- /dev/null
+++ b/web/src/lib/dashboard/interaction/applyInteractions.test.ts
@@ -0,0 +1,89 @@
+import { describe, it, expect } from 'vitest';
+import {
+  applyInteractions,
+  slicerToFilter,
+  advanceDrill,
+  datasetFieldKeys,
+  type InteractionState,
+} from '@/lib/dashboard/interaction/applyInteractions';
+import type { Widget, BoardSlicer } from '@/lib/dashboard/engine/doc';
+
+const linkWidget: Widget = {
+  id: 'w1',
+  title: '',
+  datasetId: 'links',
+  viz: 'bar',
+  query: { groupBy: 'status', measures: [{ field: 'url', agg: 'count', label: 'Pages' }] },
+  layout: { x: 0, y: 0, w: 6, h: 4 },
+};
+
+const emptyState: InteractionState = { slicerValues: {}, crossFilter: null, drill: {} };
+
+describe('datasetFieldKeys', () => {
+  it('returns curated keys for a known dataset', () => {
+    const keys = datasetFieldKeys('links');
+    expect(keys.has('status')).toBe(true);
+    expect(keys.has('nonexistent')).toBe(false);
+  });
+});
+
+describe('slicerToFilter', () => {
+  const base: BoardSlicer = { id: 's', label: 'Status', field: 'status', datasetId: 'links', control: 'multiselect', op: 'in' };
+  it('multiselect → in (or null when empty)', () => {
+    expect(slicerToFilter(base, ['200', '404'])).toEqual({ field: 'status', op: 'in', value: ['200', '404'] });
+    expect(slicerToFilter(base, [])).toBeNull();
+  });
+  it('search → contains; select → eq', () => {
+    expect(slicerToFilter({ ...base, control: 'search' }, 'abc')).toMatchObject({ op: 'contains', value: 'abc' });
+    expect(slicerToFilter({ ...base, control: 'select', op: 'eq' }, '200')).toMatchObject({ op: 'eq', value: '200' });
+    expect(slicerToFilter({ ...base, control: 'select', op: 'eq' }, '')).toBeNull();
+  });
+});
+
+describe('applyInteractions', () => {
+  it('injects a compatible slicer filter', () => {
+    const slicers: BoardSlicer[] = [{ id: 's1', label: 'Status', field: 'status', datasetId: 'links', control: 'multiselect', op: 'in' }];
+    const state = { ...emptyState, slicerValues: { s1: ['200'] } };
+    const spec = applyInteractions(linkWidget, slicers, state);
+    expect(spec.filters).toContainEqual({ field: 'status', op: 'in', value: ['200'] });
+  });
+
+  it('skips slicers whose field is not in the dataset', () => {
+    const slicers: BoardSlicer[] = [{ id: 's1', label: 'Q', field: 'query', datasetId: 'gsc_top_queries', control: 'multiselect', op: 'in' }];
+    const spec = applyInteractions(linkWidget, slicers, { ...emptyState, slicerValues: { s1: ['x'] } });
+    expect(spec.filters ?? []).toHaveLength(0); // 'query' not a links field
+  });
+
+  it('injects cross-filter but not into the source widget', () => {
+    const cf = { field: 'status', value: '404', sourceWidgetId: 'other' };
+    const spec = applyInteractions(linkWidget, [], { ...emptyState, crossFilter: cf });
+    expect(spec.filters).toContainEqual({ field: 'status', op: 'eq', value: '404' });
+
+    const selfSpec = applyInteractions(linkWidget, [], { ...emptyState, crossFilter: { ...cf, sourceWidgetId: 'w1' } });
+    expect(selfSpec.filters ?? []).toHaveLength(0);
+  });
+
+  it('drill overrides groupBy and pushes path filters', () => {
+    const w = { ...linkWidget, drillDimensions: ['host', 'path_segment', 'url'] };
+    const state = { ...emptyState, drill: { w1: { level: 1, path: [{ field: 'host', value: 'x.com' }] } } };
+    const spec = applyInteractions(w, [], state);
+    expect(spec.groupBy).toBe('path_segment');
+    expect(spec.filters).toContainEqual({ field: 'host', op: 'eq', value: 'x.com' });
+  });
+
+  it('does not mutate the original widget query', () => {
+    applyInteractions(linkWidget, [], { ...emptyState, crossFilter: { field: 'status', value: '404', sourceWidgetId: 'other' } });
+    expect(linkWidget.query.filters).toBeUndefined();
+  });
+});
+
+describe('advanceDrill', () => {
+  const w = { ...linkWidget, drillDimensions: ['host', 'path_segment', 'url'] };
+  it('advances level and appends to path', () => {
+    expect(advanceDrill(w, undefined, 'x.com')).toEqual({ level: 1, path: [{ field: 'host', value: 'x.com' }] });
+  });
+  it('returns null at the deepest level or when fewer than 2 dims', () => {
+    expect(advanceDrill(w, { level: 2, path: [] }, 'z')).toBeNull();
+    expect(advanceDrill(linkWidget, undefined, 'z')).toBeNull();
+  });
+});
diff --git a/web/src/lib/dashboard/interaction/applyInteractions.ts b/web/src/lib/dashboard/interaction/applyInteractions.ts
new file mode 100644
index 00000000..c1814bde
--- /dev/null
+++ b/web/src/lib/dashboard/interaction/applyInteractions.ts
@@ -0,0 +1,98 @@
+/**
+ * Fold board-level interactions (slicers, cross-filter, drill) into a widget's
+ * effective QuerySpec. Pure + testable. A slice/cross-filter only applies to a
+ * widget whose dataset actually exposes the field (field-identity gate).
+ */
+import type { QuerySpec, Filter, FilterValue } from '@/lib/dashboard/engine/types';
+import type { BoardSlicer, Widget } from '@/lib/dashboard/engine/doc';
+import { getDataset } from '@/lib/dashboard/engine/datasets';
+
+export interface CrossFilter {
+  field: string;
+  value: string;
+  sourceWidgetId: string;
+}
+
+export interface DrillState {
+  level: number;
+  path: { field: string; value: string }[];
+}
+
+export interface InteractionState {
+  slicerValues: Record<string, FilterValue>;
+  crossFilter: CrossFilter | null;
+  drill: Record<string, DrillState>;
+}
+
+/** Curated field keys for a dataset (the safe compatibility set). */
+export function datasetFieldKeys(datasetId: string): Set<string> {
+  const def = getDataset(datasetId);
+  return new Set((def?.fields ?? []).map((f) => f.key));
+}
+
+export function slicerToFilter(slicer: BoardSlicer, value: FilterValue): Filter | null {
+  switch (slicer.control) {
+    case 'multiselect': {
+      const arr = Array.isArray(value) ? value : value == null || value === '' ? [] : [value];
+      if (!arr.length) return null;
+      return { field: slicer.field, op: 'in', value: arr as FilterValue };
+    }
+    case 'search':
+      return value ? { field: slicer.field, op: 'contains', value: String(value) } : null;
+    case 'date-range':
+      return Array.isArray(value) && value.length === 2
+        ? { field: slicer.field, op: 'between', value: value as FilterValue, asDate: true }
+        : null;
+    case 'select':
+    default:
+      return value === '' || value == null ? null : { field: slicer.field, op: slicer.op, value };
+  }
+}
+
+export function applyInteractions(
+  widget: Widget,
+  slicers: BoardSlicer[],
+  state: InteractionState,
+): QuerySpec {
+  const keys = datasetFieldKeys(widget.datasetId);
+  let spec: QuerySpec = widget.query;
+  const injected: Filter[] = [];
+
+  // Board slicers
+  for (const s of slicers) {
+    if (!keys.has(s.field)) continue;
+    const f = slicerToFilter(s, state.slicerValues[s.id]);
+    if (f) injected.push(f);
+  }
+
+  // Drill: path filters + groupBy override to the current level's dimension
+  const drill = state.drill[widget.id];
+  if (widget.drillDimensions?.length && drill) {
+    for (const step of drill.path) {
+      if (keys.has(step.field)) injected.push({ field: step.field, op: 'eq', value: step.value });
+    }
+    const gb = widget.drillDimensions[drill.level];
+    if (gb) spec = { ...spec, groupBy: gb };
+  }
+
+  // Cross-filter from another widget
+  const cf = state.crossFilter;
+  if (cf && cf.sourceWidgetId !== widget.id && keys.has(cf.field)) {
+    injected.push({ field: cf.field, op: 'eq', value: cf.value });
+  }
+
+  if (injected.length) spec = { ...spec, filters: [...(spec.filters ?? []), ...injected] };
+  return spec;
+}
+
+/** Compute the next drill state when a category is clicked on a drillable widget. */
+export function advanceDrill(widget: Widget, current: DrillState | undefined, clicked: string): DrillState | null {
+  const dims = widget.drillDimensions ?? [];
+  if (dims.length < 2) return null;
+  const cur = current ?? { level: 0, path: [] };
+  if (cur.level >= dims.length - 1) return null; // already at the deepest level
+  return {
+    level: cur.level + 1,
+    path: [...cur.path, { field: dims[cur.level], value: clicked }],
+  };
+}
diff --git a/web/src/lib/dashboard/presets/presets.test.ts b/web/src/lib/dashboard/presets/presets.test.ts
deleted file mode 100644
index 38ca2b28..00000000
--- a/web/src/lib/dashboard/presets/presets.test.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import {
-  DASHBOARD_PRESETS,
-  getDashboardPreset,
-} from '@/lib/dashboard/presets/presets';
-import { catalogEntry } from '@/lib/dashboard/catalog/catalog';
-
-describe('dashboard presets', () => {
-  it('defines at least four presets', () => {
-    expect(DASHBOARD_PRESETS.length).toBeGreaterThanOrEqual(4);
-  });
-
-  it('builds valid dashboard docs with unique widget ids', () => {
-    for (const preset of DASHBOARD_PRESETS) {
-      const doc = preset.build();
-      expect(doc.version).toBe(1);
-      expect(doc.widgets.length).toBeGreaterThan(0);
-      const ids = doc.widgets.map((w) => w.id);
-      expect(new Set(ids).size).toBe(ids.length);
-      for (const w of doc.widgets) {
-        expect(w.layout.y).not.toBe(Infinity);
-        expect(w.binding.source).toBe('audit-tool');
-        if (w.viz !== 'markdown') {
-          expect(catalogEntry(w.binding.toolName)).toBeDefined();
-        }
-      }
-    }
-  });
-
-  it('regenerates widget ids on each build', () => {
-    const preset = getDashboardPreset('audit-overview');
-    expect(preset).toBeDefined();
-    const a = preset!.build();
-    const b = preset!.build();
-    expect(a.widgets[0].id).not.toBe(b.widgets[0].id);
-  });
-
-  it('getDashboardPreset returns undefined for unknown id', () => {
-    expect(getDashboardPreset('missing')).toBeUndefined();
-  });
-});
diff --git a/web/src/lib/dashboard/presets/presets.ts b/web/src/lib/dashboard/presets/presets.ts
index 34c6858c..ba46e463 100644
--- a/web/src/lib/dashboard/presets/presets.ts
+++ b/web/src/lib/dashboard/presets/presets.ts
@@ -1,346 +1,100 @@
-import { catalogEntry, defaultDimension, defaultMeasure } from '@/lib/dashboard/catalog/catalog';
-import {
-  newWidgetId,
-  type DashboardDoc,
-  type VizType,
-  type Widget,
-  type WidgetBinding,
-  type WidgetLayout,
-  type WidgetOptions,
-} from '@/lib/dashboard/types';
+/**
+ * Starter dashboard templates, expressed in the v2 dataset/query model.
+ * Each preset builds a fresh DashboardDoc with new widget ids.
+ */
+import { newWidgetId, type DashboardDoc, type Widget } from '@/lib/dashboard/engine/doc';
+import { getDataset } from '@/lib/dashboard/engine/datasets';
+import type { QuerySpec, VizType } from '@/lib/dashboard/engine/types';
 
-export interface DashboardPreset {
-  id: string;
-  name: string;
-  description: string;
-  /** Short label for compact UI (e.g. switcher). */
-  tagline: string;
-  build: () => DashboardDoc;
-}
-
-type PresetWidgetDef = {
-  title?: string;
-  toolName: string;
+interface PresetWidgetDef {
+  datasetId: string;
   viz: VizType;
-  layout: WidgetLayout;
-  binding?: Partial<WidgetBinding>;
-  options?: WidgetOptions;
-};
+  title?: string;
+  layout: { x: number; y: number; w: number; h: number };
+  query?: Partial<QuerySpec>;
+}
 
-function buildWidget(def: PresetWidgetDef): Widget {
-  const cat = catalogEntry(def.toolName);
-  const binding: WidgetBinding = {
-    source: 'audit-tool',
-    toolName: def.toolName,
-    args: cat?.defaultArgs,
-    valueField: cat ? defaultMeasure(cat) : undefined,
-    xField: cat ? defaultDimension(cat) : undefined,
-    yField: cat ? defaultMeasure(cat) : undefined,
-    select: cat?.rowsPath,
-    ...def.binding,
-  };
+function mk(def: PresetWidgetDef): Widget | null {
+  const d = getDataset(def.datasetId);
+  if (!d) return null;
   return {
     id: newWidgetId(),
-    title: def.title ?? cat?.label ?? def.toolName,
+    title: def.title ?? '',
+    datasetId: def.datasetId,
     viz: def.viz,
-    binding,
+    query: { ...(d.defaultSpec ?? {}), ...(def.query ?? {}) } as QuerySpec,
+    vizOptions: {},
     layout: def.layout,
-    options: def.options,
   };
 }
 
-function buildDoc(widgets: PresetWidgetDef[]): DashboardDoc {
-  return { version: 1, widgets: widgets.map(buildWidget) };
+function build(defs: PresetWidgetDef[]): DashboardDoc {
+  return { version: 2, widgets: defs.map(mk).filter((w): w is Widget => w !== null), slicers: [] };
 }
 
-const AUDIT_OVERVIEW = buildDoc([
-  {
-    toolName: 'get_report_summary',
-    viz: 'kpi',
-    title: 'Health score',
-    layout: { x: 0, y: 0, w: 3, h: 2 },
-    binding: { valueField: 'health_score' },
-    options: { format: '0' },
-  },
-  {
-    toolName: 'get_report_summary',
-    viz: 'stat-card',
-    title: 'Total URLs',
-    layout: { x: 3, y: 0, w: 3, h: 2 },
-    binding: { valueField: 'crawl_summary.total_urls' },
-  },
-  {
-    toolName: 'get_report_summary',
-    viz: 'stat-card',
-    title: 'Total issues',
-    layout: { x: 6, y: 0, w: 3, h: 2 },
-    binding: { valueField: 'total_issues' },
-  },
-  {
-    toolName: 'get_report_summary',
-    viz: 'stat-card',
-    title: 'Pages OK (2xx)',
-    layout: { x: 9, y: 0, w: 3, h: 2 },
-    binding: { valueField: 'crawl_summary.count_2xx' },
-  },
-  {
-    toolName: 'get_category_scores',
-    viz: 'horizontal-bar',
-    title: 'Category scores',
-    layout: { x: 0, y: 2, w: 7, h: 4 },
-    binding: { select: 'categories', xField: 'name', yField: 'score' },
-    options: { chartSort: 'desc' },
-  },
-  {
-    toolName: 'get_critical_issues',
-    viz: 'table',
-    title: 'Top critical issues',
-    layout: { x: 7, y: 2, w: 5, h: 4 },
-    binding: { select: 'issues', args: { limit: 10 } },
-    options: { tableLimit: 10 },
-  },
-]);
-
-const PERFORMANCE = buildDoc([
-  {
-    toolName: 'get_lighthouse_summary',
-    viz: 'gauge',
-    title: 'Performance',
-    layout: { x: 0, y: 0, w: 4, h: 3 },
-    binding: { valueField: 'summary.category_scores.performance' },
-    options: {
-      thresholds: [
-        { value: 50, color: '#ef4444' },
-        { value: 90, color: '#eab308' },
-        { value: 100, color: '#22c55e' },
-      ],
-    },
-  },
-  {
-    toolName: 'get_lighthouse_summary',
-    viz: 'kpi',
-    title: 'Accessibility',
-    layout: { x: 4, y: 0, w: 2, h: 2 },
-    binding: { valueField: 'summary.category_scores.accessibility' },
-  },
-  {
-    toolName: 'get_lighthouse_summary',
-    viz: 'kpi',
-    title: 'Best practices',
-    layout: { x: 6, y: 0, w: 2, h: 2 },
-    binding: { valueField: 'summary.category_scores.best-practices' },
-  },
-  {
-    toolName: 'get_lighthouse_summary',
-    viz: 'kpi',
-    title: 'SEO',
-    layout: { x: 8, y: 0, w: 2, h: 2 },
-    binding: { valueField: 'summary.category_scores.seo' },
-  },
-  {
-    toolName: 'get_lighthouse_summary',
-    viz: 'stat-card',
-    title: 'Pages audited',
-    layout: { x: 10, y: 0, w: 2, h: 2 },
-    binding: { valueField: 'pages_audited' },
-  },
-]);
-
-const SEO_QUALITY = buildDoc([
-  {
-    toolName: 'get_image_audit_summary',
-    viz: 'kpi',
-    title: 'Pages missing alt',
-    layout: { x: 0, y: 0, w: 3, h: 2 },
-    binding: { valueField: 'pages_missing_alt' },
-  },
-  {
-    toolName: 'get_image_audit_summary',
-    viz: 'stat-card',
-    title: 'Images crawled',
-    layout: { x: 3, y: 0, w: 3, h: 2 },
-    binding: { valueField: 'images_total_crawled' },
-  },
-  {
-    toolName: 'get_axe_audit_summary',
-    viz: 'kpi',
-    title: 'A11y violations',
-    layout: { x: 6, y: 0, w: 3, h: 2 },
-    binding: { valueField: 'total_violations' },
-  },
-  {
-    toolName: 'get_axe_audit_summary',
-    viz: 'stat-card',
-    title: 'Pages with violations',
-    layout: { x: 9, y: 0, w: 3, h: 2 },
-    binding: { valueField: 'pages_with_violations' },
-  },
-  {
-    toolName: 'list_broken_links',
-    viz: 'table',
-    title: 'Broken links',
-    layout: { x: 0, y: 2, w: 8, h: 5 },
-    binding: { select: 'broken', args: { limit: 25 } },
-    options: { tableLimit: 25 },
-  },
-  {
-    toolName: 'list_largest_images',
-    viz: 'table',
-    title: 'Largest images',
-    layout: { x: 8, y: 2, w: 4, h: 5 },
-    binding: { select: 'items', args: { limit: 10 } },
-    options: { tableLimit: 10 },
-  },
-]);
-
-const GEO_AEO = buildDoc([
-  {
-    toolName: 'get_geo_readiness_score',
-    viz: 'gauge',
-    title: 'GEO readiness',
-    layout: { x: 0, y: 0, w: 4, h: 3 },
-    binding: { valueField: 'geo_readiness_score' },
-    options: {
-      thresholds: [
-        { value: 40, color: '#ef4444' },
-        { value: 70, color: '#eab308' },
-        { value: 100, color: '#22c55e' },
-      ],
-    },
-  },
-  {
-    toolName: 'get_agent_readiness_score',
-    viz: 'kpi',
-    title: 'Agent readiness',
-    layout: { x: 4, y: 0, w: 4, h: 2 },
-    binding: { valueField: 'agent_readiness_score' },
-  },
-  {
-    toolName: 'get_citability_score',
-    viz: 'kpi',
-    title: 'Citability',
-    layout: { x: 8, y: 0, w: 4, h: 2 },
-    binding: { valueField: 'citability_score' },
-  },
-  {
-    toolName: 'get_eeat_signals_summary',
-    viz: 'stat-card',
-    title: 'Pages w/ author schema',
-    layout: { x: 4, y: 2, w: 4, h: 2 },
-    binding: { valueField: 'pages_with_author_schema' },
-  },
-  {
-    toolName: 'get_geo_readiness_score',
-    viz: 'stat-card',
-    title: 'Schema coverage',
-    layout: { x: 0, y: 3, w: 3, h: 2 },
-    binding: { valueField: 'components.schema_coverage' },
-    options: { format: 'pct' },
-  },
-  {
-    toolName: 'get_geo_readiness_score',
-    viz: 'stat-card',
-    title: 'FAQ coverage',
-    layout: { x: 3, y: 3, w: 3, h: 2 },
-    binding: { valueField: 'components.faq_schema_coverage' },
-    options: { format: 'pct' },
-  },
-  {
-    toolName: 'get_geo_readiness_score',
-    viz: 'stat-card',
-    title: 'Robots AI access',
-    layout: { x: 6, y: 3, w: 3, h: 2 },
-    binding: { valueField: 'components.robots_ai_access' },
-    options: { format: 'pct' },
-  },
-  {
-    toolName: 'get_citability_score',
-    viz: 'stat-card',
-    title: 'Pages above 50',
-    layout: { x: 9, y: 2, w: 3, h: 3 },
-    binding: { valueField: 'pages_above_50' },
-  },
-]);
-
-const SEARCH_CONSOLE = buildDoc([
-  {
-    toolName: 'get_google_summary',
-    viz: 'kpi',
-    title: 'Total clicks',
-    layout: { x: 0, y: 0, w: 3, h: 2 },
-    binding: { valueField: 'gsc.summary.clicks' },
-  },
-  {
-    toolName: 'get_google_summary',
-    viz: 'stat-card',
-    title: 'Impressions',
-    layout: { x: 3, y: 0, w: 3, h: 2 },
-    binding: { valueField: 'gsc.summary.impressions' },
-  },
-  {
-    toolName: 'get_google_summary',
-    viz: 'stat-card',
-    title: 'Avg. position',
-    layout: { x: 6, y: 0, w: 3, h: 2 },
-    binding: { valueField: 'gsc.summary.position' },
-    options: { format: '0.0' },
-  },
-  {
-    toolName: 'get_google_summary',
-    viz: 'stat-card',
-    title: 'Avg. CTR',
-    layout: { x: 9, y: 0, w: 3, h: 2 },
-    binding: { valueField: 'gsc.summary.ctr' },
-    options: { format: '0.00%' },
-  },
-]);
+export interface DashboardPreset {
+  id: string;
+  name: string;
+  tagline: string;
+  description: string;
+  build: () => DashboardDoc;
+}
 
 export const DASHBOARD_PRESETS: DashboardPreset[] = [
   {
-    id: 'audit-overview',
+    id: 'overview',
     name: 'Audit overview',
-    tagline: 'Health, categories & issues',
-    description: 'Health score, page counts, category breakdown, and top critical issues.',
-    build: () => cloneDoc(AUDIT_OVERVIEW),
+    tagline: 'Health, status & issues',
+    description: 'Health score, page counts, status mix, category scores and top issues.',
+    build: () => build([
+      { datasetId: 'summary', viz: 'kpi', title: 'Health score', layout: { x: 0, y: 0, w: 3, h: 2 }, query: { measures: [{ field: 'health_score', agg: 'max', label: 'Health', format: 'score' }] } },
+      { datasetId: 'summary', viz: 'stat-card', title: 'Total URLs', layout: { x: 3, y: 0, w: 3, h: 2 }, query: { measures: [{ field: 'total_urls', agg: 'max', label: 'URLs' }] } },
+      { datasetId: 'summary', viz: 'stat-card', title: 'Issues', layout: { x: 6, y: 0, w: 3, h: 2 }, query: { measures: [{ field: 'seo_health.thin_content', agg: 'max', label: 'Thin pages' }] } },
+      { datasetId: 'status_counts', viz: 'doughnut', title: 'Status codes', layout: { x: 9, y: 0, w: 3, h: 4 } },
+      { datasetId: 'categories', viz: 'horizontal-bar', title: 'Category scores', layout: { x: 0, y: 2, w: 5, h: 4 } },
+      { datasetId: 'issues', viz: 'bar', title: 'Issues by category', layout: { x: 5, y: 2, w: 4, h: 4 } },
+      { datasetId: 'issues', viz: 'table', title: 'Issues', layout: { x: 0, y: 6, w: 12, h: 5 }, query: { groupBy: undefined, measures: [], columns: ['category', 'priority', 'message', 'url'] } },
+    ]),
   },
   {
     id: 'performance',
     name: 'Performance',
-    tagline: 'Lighthouse scores',
-    description: 'Core Lighthouse metrics with a performance gauge and score comparison chart.',
-    build: () => cloneDoc(PERFORMANCE),
-  },
-  {
-    id: 'seo-quality',
-    name: 'SEO & quality',
-    tagline: 'Images, links & a11y',
-    description: 'Image SEO, broken links, largest assets, and accessibility violations.',
-    build: () => cloneDoc(SEO_QUALITY),
-  },
-  {
-    id: 'geo-aeo',
-    name: 'GEO / AEO readiness',
-    tagline: 'AI & agent discoverability',
-    description: 'GEO readiness, agent citability, E-E-A-T, and sub-score breakdowns.',
-    build: () => cloneDoc(GEO_AEO),
-  },
-  {
-    id: 'search-console',
-    name: 'Search Console',
-    tagline: 'Clicks, impressions & CTR',
-    description: 'Google Search Console summary when GSC is connected.',
-    build: () => cloneDoc(SEARCH_CONSOLE),
+    tagline: 'Lighthouse & speed',
+    description: 'Lighthouse scores, per-page performance and slowest responses.',
+    build: () => build([
+      { datasetId: 'summary', viz: 'gauge', title: 'Lighthouse performance', layout: { x: 0, y: 0, w: 4, h: 3 }, query: { measures: [{ field: 'lh.performance_score', agg: 'max', label: 'Performance', format: 'score' }] } },
+      { datasetId: 'summary', viz: 'kpi', title: 'Lighthouse SEO', layout: { x: 4, y: 0, w: 4, h: 2 }, query: { measures: [{ field: 'lh.seo_score', agg: 'max', label: 'SEO', format: 'score' }] } },
+      { datasetId: 'lighthouse_by_url', viz: 'horizontal-bar', title: 'Performance by page', layout: { x: 0, y: 3, w: 6, h: 5 } },
+      { datasetId: 'lighthouse_by_url', viz: 'scatter', title: 'LCP vs CLS', layout: { x: 6, y: 3, w: 6, h: 5 }, query: { groupBy: 'url', measures: [{ field: 'lcp_ms', agg: 'avg', label: 'LCP' }, { field: 'cls', agg: 'avg', label: 'CLS' }] } },
+    ]),
+  },
+  {
+    id: 'traffic',
+    name: 'Search traffic',
+    tagline: 'GSC clicks & queries',
+    description: 'Google Search Console clicks, impressions, top queries and trend.',
+    build: () => build([
+      { datasetId: 'summary', viz: 'kpi', title: 'Clicks', layout: { x: 0, y: 0, w: 3, h: 2 }, query: { measures: [{ field: 'gsc.clicks', agg: 'max', label: 'Clicks' }] } },
+      { datasetId: 'summary', viz: 'stat-card', title: 'Impressions', layout: { x: 3, y: 0, w: 3, h: 2 }, query: { measures: [{ field: 'gsc.impressions', agg: 'max', label: 'Impr.' }] } },
+      { datasetId: 'gsc_daily', viz: 'area', title: 'Clicks over time', layout: { x: 6, y: 0, w: 6, h: 4 } },
+      { datasetId: 'gsc_top_queries', viz: 'horizontal-bar', title: 'Top queries', layout: { x: 0, y: 2, w: 6, h: 5 } },
+      { datasetId: 'gsc_top_pages', viz: 'table', title: 'Top pages', layout: { x: 6, y: 4, w: 6, h: 5 } },
+    ]),
+  },
+  {
+    id: 'content',
+    name: 'Content & crawl',
+    tagline: 'Words, depth & types',
+    description: 'Word-count distribution, crawl depth, content types and thin pages.',
+    build: () => build([
+      { datasetId: 'word_count_distribution', viz: 'bar', title: 'Word-count distribution', layout: { x: 0, y: 0, w: 6, h: 4 } },
+      { datasetId: 'depth_distribution', viz: 'funnel', title: 'Crawl depth', layout: { x: 6, y: 0, w: 6, h: 4 } },
+      { datasetId: 'mime_types', viz: 'pie', title: 'Content types', layout: { x: 0, y: 4, w: 5, h: 4 } },
+      { datasetId: 'thin_pages', viz: 'table', title: 'Thin pages', layout: { x: 5, y: 4, w: 7, h: 4 } },
+    ]),
   },
 ];
 
-/** Fresh widget IDs on each build so presets can be applied multiple times. */
-function cloneDoc(source: DashboardDoc): DashboardDoc {
-  return {
-    version: 1,
-    widgets: source.widgets.map((w) => ({ ...w, id: newWidgetId() })),
-  };
-}
-
-export function getDashboardPreset(id: string): DashboardPreset | undefined {
+export function getPreset(id: string): DashboardPreset | undefined {
   return DASHBOARD_PRESETS.find((p) => p.id === id);
 }
diff --git a/web/src/lib/dashboard/script/dashScript.test.ts b/web/src/lib/dashboard/script/dashScript.test.ts
deleted file mode 100644
index cc677f09..00000000
--- a/web/src/lib/dashboard/script/dashScript.test.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { evalMeasure, evalTransform } from '@/lib/dashboard/script/eval';
-import { DashScriptError } from '@/lib/dashboard/script/types';
-
-const ctx = {
-  raw: { health_score: 82, performance: 91, grade: 'B' },
-  rows: [
-    { category: 'SEO', score: 90, count: 12 },
-    { category: 'Perf', score: 70, count: 5 },
-    { category: 'Security', score: 85, count: 3 },
-  ],
-};
-
-describe('DashScript measures', () => {
-  it('reads field() from raw result', () => {
-    expect(evalMeasure('field("health_score")', ctx)).toBe(82);
-  });
-
-  it('supports dot-path field access', () => {
-    expect(evalMeasure('field("performance")', ctx)).toBe(91);
-  });
-
-  it('aggregates sum across rows', () => {
-    expect(evalMeasure('sum("count")', ctx)).toBe(20);
-  });
-
-  it('aggregates avg across rows', () => {
-    expect(evalMeasure('avg("score")', ctx)).toBe(81.66666666666667);
-  });
-
-  it('evaluates if() with comparison', () => {
-    expect(evalMeasure('if(field("health_score") >= 80, "Good", "Poor")', ctx)).toBe('Good');
-  });
-
-  it('supports arithmetic', () => {
-    expect(evalMeasure('field("health_score") * 100 / 100', ctx)).toBe(82);
-  });
-
-  it('coalesce returns first non-null', () => {
-    expect(evalMeasure('coalesce(field("missing"), field("health_score"))', ctx)).toBe(82);
-  });
-
-  it('division by zero returns null instead of 0', () => {
-    expect(evalMeasure('field("health_score") / 0', ctx)).toBeNull();
-  });
-});
-
-describe('DashScript transforms', () => {
-  it('filters rows by predicate', () => {
-    const out = evalTransform('filter(count > 10)', ctx);
-    expect(out).toHaveLength(1);
-    expect(out[0].category).toBe('SEO');
-  });
-
-  it('sorts and takes top N', () => {
-    const out = evalTransform('sort(score, desc) | take(2)', ctx);
-    expect(out.map((r) => r.category)).toEqual(['SEO', 'Security']);
-  });
-
-  it('projects selected columns', () => {
-    const out = evalTransform('project(category, score)', ctx);
-    expect(Object.keys(out[0]).sort()).toEqual(['category', 'score']);
-  });
-
-  it('filters by string equality', () => {
-    const rows = [
-      { severity: 'critical', count: 1 },
-      { severity: 'warning', count: 2 },
-    ];
-    const out = evalTransform('filter(severity == "critical")', { raw: {}, rows });
-    expect(out).toHaveLength(1);
-  });
-});
-
-describe('DashScript errors', () => {
-  it('throws on unknown function', () => {
-    expect(() => evalMeasure('unknown()', ctx)).toThrow(DashScriptError);
-  });
-
-  it('throws on bad syntax', () => {
-    expect(() => evalMeasure('field(', ctx)).toThrow(DashScriptError);
-  });
-});
diff --git a/web/src/lib/dashboard/script/eval.ts b/web/src/lib/dashboard/script/eval.ts
deleted file mode 100644
index 73e7fa9a..00000000
--- a/web/src/lib/dashboard/script/eval.ts
+++ /dev/null
@@ -1,233 +0,0 @@
-import type { Expr, EvalContext, EvalValue, PipelineStage } from '@/lib/dashboard/script/types';
-import { DashScriptError } from '@/lib/dashboard/script/types';
-import { tokenize } from '@/lib/dashboard/script/lexer';
-import { Parser } from '@/lib/dashboard/script/parser';
-
-function getPath(obj: unknown, path: string): unknown {
-  return path.split('.').reduce<unknown>((cur, key) => {
-    if (cur == null || typeof cur !== 'object') return undefined;
-    return (cur as Record<string, unknown>)[key];
-  }, obj);
-}
-
-function asNumber(v: EvalValue): number {
-  if (typeof v === 'number') return Number.isFinite(v) ? v : 0;
-  if (typeof v === 'boolean') return v ? 1 : 0;
-  if (typeof v === 'string') {
-    const n = Number(v);
-    return Number.isFinite(n) ? n : 0;
-  }
-  return 0;
-}
-
-function asBool(v: EvalValue): boolean {
-  if (typeof v === 'boolean') return v;
-  if (v === null) return false;
-  if (typeof v === 'number') return v !== 0 && !Number.isNaN(v);
-  if (typeof v === 'string') return v.length > 0;
-  return true;
-}
-
-function rowField(ctx: EvalContext, name: string): EvalValue {
-  if (ctx.row && name in ctx.row) return ctx.row[name] as EvalValue;
-  if (!(name in ctx.raw)) return null;
-  return ctx.raw[name] as EvalValue;
-}
-
-function evalExpr(expr: Expr, ctx: EvalContext): EvalValue {
-  switch (expr.kind) {
-    case 'number':
-      return Number.isNaN(expr.value) ? null : expr.value;
-    case 'string':
-      return expr.value;
-    case 'bool':
-      return expr.value;
-    case 'null':
-      return null;
-    case 'field':
-      return getPath(ctx.raw, expr.path) as EvalValue ?? null;
-    case 'rowField':
-      return rowField(ctx, expr.name);
-    case 'unop': {
-      const v = evalExpr(expr.arg, ctx);
-      if (expr.op === '-') return -asNumber(v);
-      if (expr.op === '!') return !asBool(v);
-      throw new DashScriptError(`Unknown unary op ${expr.op}`);
-    }
-    case 'binop': {
-      const l = evalExpr(expr.left, ctx);
-      const r = evalExpr(expr.right, ctx);
-      switch (expr.op) {
-        case '+': return asNumber(l) + asNumber(r);
-        case '-': return asNumber(l) - asNumber(r);
-        case '*': return asNumber(l) * asNumber(r);
-        case '/': return asNumber(r) === 0 ? null : asNumber(l) / asNumber(r);
-        case '>': return asNumber(l) > asNumber(r);
-        case '<': return asNumber(l) < asNumber(r);
-        case '>=': return asNumber(l) >= asNumber(r);
-        case '<=': return asNumber(l) <= asNumber(r);
-        case '==':
-          if (typeof l === 'string' || typeof r === 'string') return String(l ?? '') === String(r ?? '');
-          return asNumber(l) === asNumber(r);
-        case '!=':
-          if (typeof l === 'string' || typeof r === 'string') return String(l ?? '') !== String(r ?? '');
-          return asNumber(l) !== asNumber(r);
-        case '&&': return asBool(l) && asBool(r);
-        case '||': return asBool(l) || asBool(r);
-        default: throw new DashScriptError(`Unknown operator ${expr.op}`);
-      }
-    }
-    case 'call':
-      return evalCall(expr.name, expr.args, ctx);
-    default:
-      throw new DashScriptError('Invalid expression node');
-  }
-}
-
-function numsFromRows(rows: Record<string, unknown>[], field: string): number[] {
-  return rows.map((r) => Number(r[field] ?? 0)).filter(Number.isFinite);
-}
-
-function evalCall(name: string, args: Expr[], ctx: EvalContext): EvalValue {
-  const lower = name.toLowerCase();
-
-  if (lower === 'if') {
-    const cond = evalExpr(args[0], ctx);
-    return asBool(cond) ? evalExpr(args[1], ctx) : evalExpr(args[2], ctx);
-  }
-  if (lower === 'coalesce') {
-    for (const a of args) {
-      const v = evalExpr(a, ctx);
-      if (v !== null && v !== undefined && v !== '') return v;
-    }
-    return null;
-  }
-  if (lower === 'round') return Math.round(asNumber(evalExpr(args[0], ctx)));
-  if (lower === 'abs') return Math.abs(asNumber(evalExpr(args[0], ctx)));
-  if (lower === 'concat') return args.map((a) => String(evalExpr(a, ctx) ?? '')).join('');
-  if (lower === 'len') return String(evalExpr(args[0], ctx) ?? '').length;
-
-  // Aggregates over $rows
-  if (lower === 'sum') {
-    const field = fieldName(args[0], ctx);
-    const nums = numsFromRows(ctx.rows, field);
-    return nums.length ? nums.reduce((a, b) => a + b, 0) : null;
-  }
-  if (lower === 'avg') {
-    const field = fieldName(args[0], ctx);
-    const nums = numsFromRows(ctx.rows, field);
-    return nums.length ? nums.reduce((a, b) => a + b, 0) / nums.length : null;
-  }
-  if (lower === 'count') {
-    if (args.length === 0) return ctx.rows.length;
-    const field = fieldName(args[0], ctx);
-    return ctx.rows.filter((r) => r[field] != null && r[field] !== '').length;
-  }
-  if (lower === 'min') {
-    const field = fieldName(args[0], ctx);
-    const nums = numsFromRows(ctx.rows, field);
-    return nums.length ? Math.min(...nums) : null;
-  }
-  if (lower === 'max') {
-    const field = fieldName(args[0], ctx);
-    const nums = numsFromRows(ctx.rows, field);
-    return nums.length ? Math.max(...nums) : null;
-  }
-  if (lower === 'rows') return ctx.rows as EvalValue;
-  if (lower === 'raw') return ctx.raw as EvalValue;
-
-  throw new DashScriptError(`Unknown function "${name}"`);
-}
-
-function fieldName(expr: Expr, ctx: EvalContext): string {
-  if (expr.kind === 'string') return expr.value;
-  if (expr.kind === 'rowField') return expr.name;
-  return String(evalExpr(expr, ctx) ?? '');
-}
-
-function runPipeline(rows: Record<string, unknown>[], stages: PipelineStage[], ctx: EvalContext): Record<string, unknown>[] {
-  let cur = rows;
-  for (const stage of stages) {
-    const name = stage.name.toLowerCase();
-    if (name === 'filter' || name === 'where') {
-      cur = cur.filter((row) => {
-        const rowCtx: EvalContext = { ...ctx, rows: cur, row };
-        return asBool(evalExpr(stage.args[0], rowCtx));
-      });
-    } else if (name === 'sort') {
-      const field = fieldName(stage.args[0], ctx);
-      const order = stage.args[1] ? fieldName(stage.args[1], ctx).toLowerCase() : 'asc';
-      cur = [...cur].sort((a, b) => {
-        const av = asNumber(a[field] as EvalValue);
-        const bv = asNumber(b[field] as EvalValue);
-        return order === 'desc' ? bv - av : av - bv;
-      });
-    } else if (name === 'take' || name === 'limit') {
-      const n = Math.max(0, Math.floor(asNumber(evalExpr(stage.args[0], ctx))));
-      cur = cur.slice(0, n);
-    } else if (name === 'skip') {
-      const n = Math.max(0, Math.floor(asNumber(evalExpr(stage.args[0], ctx))));
-      cur = cur.slice(n);
-    } else if (name === 'project' || name === 'select') {
-      const fields = stage.args.map((a) => fieldName(a, ctx));
-      cur = cur.map((row) => {
-        const out: Record<string, unknown> = {};
-        for (const f of fields) out[f] = row[f];
-        return out;
-      });
-    } else if (name === 'map') {
-      const labelKey = fieldName(stage.args[0], ctx);
-      const valueKey = fieldName(stage.args[1], ctx);
-      cur = cur.map((row) => ({
-        [labelKey]: row[labelKey],
-        [valueKey]: row[valueKey],
-      }));
-    } else {
-      throw new DashScriptError(`Unknown pipeline stage "${stage.name}"`);
-    }
-  }
-  return cur;
-}
-
-/** Evaluate a scalar measure expression against fetched widget data. */
-export function evalMeasure(source: string, ctx: EvalContext): number | string | null {
-  if (!source.trim()) return null;
-  const tokens = tokenize(source.trim());
-  const expr = new Parser(tokens).parseExpr();
-  const result = evalExpr(expr, ctx);
-  if (result === null || typeof result === 'boolean') return result === null ? null : result ? 1 : 0;
-  if (typeof result === 'number' || typeof result === 'string') return result;
-  return null;
-}
-
-/** Apply a pipe-delimited transform pipeline to row data. */
-export function evalTransform(source: string, ctx: EvalContext): Record<string, unknown>[] {
-  if (!source.trim()) return ctx.rows;
-  const tokens = tokenize(source.trim());
-  const stages = new Parser(tokens).parsePipeline();
-  return runPipeline(ctx.rows, stages, ctx);
-}
-
-export { parseExpr, parsePipeline } from '@/lib/dashboard/script/parser';
-
-/** Built-in function reference for the script editor help panel. */
-export const DASHSCRIPT_HELP = `
-MEASURES (scalar values):
-  field("health_score")           — read from tool result
-  sum("count")                    — sum a column across rows
-  avg("score")  count()  min("x") max("x")
-  if(score >= 80, "Good", "Poor")
-  coalesce(field("score"), 0)
-
-TRANSFORMS (pipe stages on rows):
-  filter(count > 0)
-  | sort(score, desc)
-  | take(10)
-  | project(category, score)
-  | skip(5)
-
-Examples:
-  Measure:  sum("count")
-  Measure:  field("performance") * 100
-  Transform: filter(severity == "critical") | sort(count, desc) | take(5)
-`.trim();
diff --git a/web/src/lib/dashboard/script/lexer.ts b/web/src/lib/dashboard/script/lexer.ts
deleted file mode 100644
index f811bbcf..00000000
--- a/web/src/lib/dashboard/script/lexer.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import type { Token } from '@/lib/dashboard/script/types';
-import { DashScriptError } from '@/lib/dashboard/script/types';
-
-const KEYWORDS = new Set(['true', 'false', 'null', 'field', 'row']);
-
-export function tokenize(input: string): Token[] {
-  const tokens: Token[] = [];
-  let i = 0;
-
-  const peek = () => input[i] ?? '';
-  const advance = () => input[i++];
-
-  while (i < input.length) {
-    const ch = peek();
-    const start = i;
-
-    if (/\s/.test(ch)) { advance(); continue; }
-
-    if (ch === '/' && input[i + 1] === '/') {
-      while (i < input.length && input[i] !== '\n') i++;
-      continue;
-    }
-
-    if (ch === '"' || ch === "'") {
-      const quote = advance();
-      let s = '';
-      while (i < input.length && peek() !== quote) {
-        if (peek() === '\\') { advance(); s += advance(); }
-        else s += advance();
-      }
-      if (peek() !== quote) throw new DashScriptError('Unterminated string', start);
-      advance();
-      tokens.push({ type: 'string', value: s, pos: start });
-      continue;
-    }
-
-    if (/[0-9]/.test(ch) || (ch === '.' && /[0-9]/.test(input[i + 1] ?? ''))) {
-      let num = '';
-      while (/[0-9.]/.test(peek())) num += advance();
-      tokens.push({ type: 'number', value: num, pos: start });
-      continue;
-    }
-
-    if (/[a-zA-Z_@$]/.test(ch)) {
-      let id = '';
-      while (/[a-zA-Z0-9_@$]/.test(peek())) id += advance();
-      tokens.push({ type: 'ident', value: id, pos: start });
-      continue;
-    }
-
-    if (ch === '|' && input[i + 1] === '|') {
-      i += 2;
-      tokens.push({ type: 'op', value: '||', pos: start });
-      continue;
-    }
-    if (ch === '&' && input[i + 1] === '&') {
-      i += 2;
-      tokens.push({ type: 'op', value: '&&', pos: start });
-      continue;
-    }
-    if (ch === '|') {
-      advance();
-      tokens.push({ type: 'pipe', value: '|', pos: start });
-      continue;
-    }
-    if (ch === '(') { advance(); tokens.push({ type: 'lparen', value: '(', pos: start }); continue; }
-    if (ch === ')') { advance(); tokens.push({ type: 'rparen', value: ')', pos: start }); continue; }
-    if (ch === ',') { advance(); tokens.push({ type: 'comma', value: ',', pos: start }); continue; }
-    if (ch === '.') { advance(); tokens.push({ type: 'dot', value: '.', pos: start }); continue; }
-
-    const two = input.slice(i, i + 2);
-    if (['>=', '<=', '==', '!='].includes(two)) {
-      i += 2;
-      tokens.push({ type: 'op', value: two, pos: start });
-      continue;
-    }
-    if ('+-*/<>=!'.includes(ch)) {
-      advance();
-      tokens.push({ type: 'op', value: ch, pos: start });
-      continue;
-    }
-
-    throw new DashScriptError(`Unexpected character "${ch}"`, start);
-  }
-
-  tokens.push({ type: 'ident', value: 'eof', pos: i });
-  return tokens;
-}
-
-export function isKeyword(name: string): boolean {
-  return KEYWORDS.has(name);
-}
diff --git a/web/src/lib/dashboard/script/parser.ts b/web/src/lib/dashboard/script/parser.ts
deleted file mode 100644
index 319e5c06..00000000
--- a/web/src/lib/dashboard/script/parser.ts
+++ /dev/null
@@ -1,209 +0,0 @@
-import type { Expr, PipelineStage, Token } from '@/lib/dashboard/script/types';
-import { DashScriptError } from '@/lib/dashboard/script/types';
-import { tokenize } from '@/lib/dashboard/script/lexer';
-
-export class Parser {
-  private pos = 0;
-
-  constructor(private tokens: Token[]) {}
-
-  parseExpr(): Expr {
-    return this.orExpr();
-  }
-
-  parsePipeline(): PipelineStage[] {
-    const stages: PipelineStage[] = [];
-    stages.push(this.pipelineStage());
-    while (this.match('pipe')) {
-      stages.push(this.pipelineStage());
-    }
-    return stages;
-  }
-
-  private pipelineStage(): PipelineStage {
-    const name = this.consumeIdent('Expected pipeline stage name');
-    this.consume('lparen', 'Expected "(" after stage name');
-    const args: Expr[] = [];
-    if (!this.check('rparen')) {
-      args.push(this.parseExpr());
-      while (this.match('comma')) args.push(this.parseExpr());
-    }
-    this.consume('rparen', 'Expected ")"');
-    return { kind: 'call', name, args };
-  }
-
-  private orExpr(): Expr {
-    let left = this.andExpr();
-    while (this.matchOp('||')) left = { kind: 'binop', op: '||', left, right: this.andExpr() };
-    return left;
-  }
-
-  private andExpr(): Expr {
-    let left = this.cmpExpr();
-    while (this.matchOp('&&')) left = { kind: 'binop', op: '&&', left, right: this.cmpExpr() };
-    return left;
-  }
-
-  private cmpExpr(): Expr {
-    let left = this.addExpr();
-    while (true) {
-      const op = this.peekOp();
-      if (!op || !['>', '<', '>=', '<=', '==', '!='].includes(op)) break;
-      this.advance();
-      left = { kind: 'binop', op, left, right: this.addExpr() };
-    }
-    return left;
-  }
-
-  private addExpr(): Expr {
-    let left = this.mulExpr();
-    while (true) {
-      const op = this.peekOp();
-      if (op !== '+' && op !== '-') break;
-      this.advance();
-      left = { kind: 'binop', op, left, right: this.mulExpr() };
-    }
-    return left;
-  }
-
-  private mulExpr(): Expr {
-    let left = this.unary();
-    while (true) {
-      const op = this.peekOp();
-      if (op !== '*' && op !== '/') break;
-      this.advance();
-      left = { kind: 'binop', op, left, right: this.unary() };
-    }
-    return left;
-  }
-
-  private unary(): Expr {
-    const op = this.peekOp();
-    if (op === '!' || op === '-') {
-      this.advance();
-      return { kind: 'unop', op, arg: this.unary() };
-    }
-    return this.primary();
-  }
-
-  private primary(): Expr {
-    const t = this.tokens[this.pos];
-
-    if (this.match('number')) {
-      return { kind: 'number', value: Number(t.value) };
-    }
-    if (this.match('string')) {
-      return { kind: 'string', value: t.value };
-    }
-
-    if (this.matchIdent()) {
-      const name = t.value;
-      if (name === 'true') return { kind: 'bool', value: true };
-      if (name === 'false') return { kind: 'bool', value: false };
-      if (name === 'null') return { kind: 'null' };
-
-      if (name === 'field' && this.check('lparen')) {
-        this.advance();
-        const pathExpr = this.parseExpr();
-        this.consume('rparen', 'Expected ")" after field path');
-        if (pathExpr.kind !== 'string') throw new DashScriptError('field() requires a string path', t.pos);
-        return { kind: 'field', path: pathExpr.value };
-      }
-
-      if (name === 'row' && this.check('dot')) {
-        this.advance();
-        const field = this.consumeIdent('Expected row field name');
-        return { kind: 'rowField', name: field };
-      }
-
-      // bare identifier in row context → row field shorthand
-      if (this.check('dot')) {
-        let path = name;
-        while (this.match('dot')) {
-          path += `.${this.consumeIdent('Expected field after "."')}`;
-        }
-        return { kind: 'field', path };
-      }
-
-      if (this.check('lparen')) {
-        this.advance();
-        const args: Expr[] = [];
-        if (!this.check('rparen')) {
-          args.push(this.parseExpr());
-          while (this.match('comma')) args.push(this.parseExpr());
-        }
-        this.consume('rparen', 'Expected ")"');
-        return { kind: 'call', name, args };
-      }
-
-      // identifier alone → row field in filter context, or field on raw in measure context
-      return { kind: 'rowField', name };
-    }
-
-    if (this.match('lparen')) {
-      const e = this.parseExpr();
-      this.consume('rparen', 'Expected ")"');
-      return e;
-    }
-
-    throw new DashScriptError(`Unexpected token "${t.value}"`, t.pos);
-  }
-
-  private match(type: Token['type']): boolean {
-    if (this.tokens[this.pos]?.type !== type) return false;
-    this.pos++;
-    return true;
-  }
-
-  private matchOp(op: string): boolean {
-    if (this.tokens[this.pos]?.type !== 'op' || this.tokens[this.pos]?.value !== op) return false;
-    this.pos++;
-    return true;
-  }
-
-  private check(type: Token['type']): boolean {
-    return this.tokens[this.pos]?.type === type;
-  }
-
-  private peekOp(): string | null {
-    const t = this.tokens[this.pos];
-    return t?.type === 'op' ? t.value : null;
-  }
-
-  private advance(): Token {
-    return this.tokens[this.pos++];
-  }
-
-  private consume(type: Token['type'], msg: string): Token {
-    const t = this.tokens[this.pos];
-    if (t?.type !== type) throw new DashScriptError(msg, t?.pos);
-    this.pos++;
-    return t;
-  }
-
-  private matchIdent(): boolean {
-    const t = this.tokens[this.pos];
-    if (t?.type !== 'ident' || t.value === 'eof') return false;
-    this.pos++;
-    return true;
-  }
-
-  private consumeIdent(msg: string): string {
-    const t = this.tokens[this.pos];
-    if (t?.type !== 'ident' || t.value === 'eof') throw new DashScriptError(msg, t?.pos);
-    this.pos++;
-    return t.value;
-  }
-}
-
-export function parseExpr(source: string): Expr {
-  const tokens = tokenize(source.trim());
-  return new Parser(tokens).parseExpr();
-}
-
-export function parsePipeline(source: string): PipelineStage[] {
-  const trimmed = source.trim();
-  if (!trimmed) return [];
-  const tokens = tokenize(trimmed);
-  return new Parser(tokens).parsePipeline();
-}
diff --git a/web/src/lib/dashboard/script/types.ts b/web/src/lib/dashboard/script/types.ts
deleted file mode 100644
index 7eb937cb..00000000
--- a/web/src/lib/dashboard/script/types.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-/** DashScript — dashboard formula language (DAX-inspired, audit-data scoped). */
-
-export type TokenType =
-  | 'number'
-  | 'string'
-  | 'ident'
-  | 'op'
-  | 'pipe'
-  | 'lparen'
-  | 'rparen'
-  | 'comma'
-  | 'dot'
-  | 'eof';
-
-export interface Token {
-  type: TokenType;
-  value: string;
-  pos: number;
-}
-
-export type Expr =
-  | { kind: 'number'; value: number }
-  | { kind: 'string'; value: string }
-  | { kind: 'bool'; value: boolean }
-  | { kind: 'null' }
-  | { kind: 'field'; path: string }
-  | { kind: 'rowField'; name: string }
-  | { kind: 'binop'; op: string; left: Expr; right: Expr }
-  | { kind: 'unop'; op: string; arg: Expr }
-  | { kind: 'call'; name: string; args: Expr[] };
-
-export type PipelineStage =
-  | { kind: 'call'; name: string; args: Expr[] };
-
-export interface EvalContext {
-  raw: Record<string, unknown>;
-  rows: Record<string, unknown>[];
-  row?: Record<string, unknown>;
-}
-
-export type EvalValue = number | string | boolean | null | Record<string, unknown>[] | Record<string, unknown>;
-
-export class DashScriptError extends Error {
-  constructor(message: string, public pos?: number) {
-    super(pos != null ? `${message} (at ${pos})` : message);
-    this.name = 'DashScriptError';
-  }
-}
diff --git a/web/src/lib/dashboard/types.ts b/web/src/lib/dashboard/types.ts
index 8bd2e67d..b7c7ef13 100644
--- a/web/src/lib/dashboard/types.ts
+++ b/web/src/lib/dashboard/types.ts
@@ -1,162 +1,42 @@
-/** Visualization types available for dashboard widgets. */
-export type VizType =
-  | 'kpi'
-  | 'stat-card'
-  | 'gauge'
-  | 'bar'
-  | 'horizontal-bar'
-  | 'ranked-bar'
-  | 'stacked-bar'
-  | 'line'
-  | 'area'
-  | 'sparkline'
-  | 'pie'
-  | 'doughnut'
-  | 'table'
-  | 'markdown'
-  | 'custom-chart';
-
 /**
- * Raw Chart.js configuration emitted by the AI.
- * Must be pure JSON — no functions or executable code.
+ * Public type surface for the dashboard module.
+ *
+ * Kept at this path so existing importers (`@/types/dashboard`,
+ * `@/lib/dashboard/data/fetchDashboards`, `@/server/dashboardsDb`) resolve
+ * unchanged. The actual definitions live in the engine.
  */
-export interface CustomChartSpec {
-  /** Chart.js chart type (bar, line, pie, radar, polarArea, doughnut, bubble, scatter, …). */
-  type: string;
-  /** Optional fully-formed Chart.js data object (datasets, labels). Used as-is when present. */
-  data?: Record<string, unknown>;
-  /** Column name used as category labels when building data from rows. */
-  labelField?: string;
-  /** Series definitions used when building data from rows. */
-  series?: { label: string; field: string; backgroundColor?: string; borderColor?: string }[];
-  /** Passed through to Chart.js options (no functions allowed). */
-  options?: Record<string, unknown>;
-}
-
-/** Aggregation to apply when reducing an array result to a single number. */
-export type AggregateOp = 'sum' | 'avg' | 'count' | 'max' | 'min' | 'none';
-
-export type ChartSortOrder = 'none' | 'asc' | 'desc';
-
-/** Where the widget fetches its data. */
-export interface WidgetBinding {
-  source: 'audit-tool';
-  toolName: string;
-  args?: Record<string, unknown>;
-  select?: string;
-  xField?: string;
-  yField?: string;
-  /** Dimension field used to split rows into multiple series (group-by). */
-  seriesField?: string;
-  valueField?: string;
-  aggregate?: AggregateOp;
-  /**
-   * DashScript measure — scalar formula evaluated after data fetch.
-   * Example: `sum("count")`, `field("health_score")`, `if(score >= 80, "Good", "Poor")`
-   */
-  measure?: string;
-  /**
-   * DashScript transform pipeline applied to rows before chart/table render.
-   * Example: `filter(count > 0) | sort(score, desc) | take(10)`
-   */
-  transform?: string;
-  /** When true, measure/transform override simple field bindings. */
-  useScript?: boolean;
-}
-
-export interface WidgetLayout {
-  x: number;
-  y: number;
-  w: number;
-  h: number;
-}
-
-/** Per-widget display options (colors, format strings, thresholds, etc.). */
-export interface WidgetOptions {
-  format?: string;
-  title?: string;
-  thresholds?: { value: number; color: string }[];
-  tableLimit?: number;
-  markdownContent?: string;
-  /** Max categories/points shown in chart widgets. */
-  chartMaxItems?: number;
-  /** Sort chart rows by yField before rendering. */
-  chartSort?: ChartSortOrder;
-  /** Show Chart.js legend when supported. */
-  showLegend?: boolean;
-  /** Optional subtitle for stat-card widgets. */
-  subtitle?: string;
-  /**
-   * Raw Chart.js config for custom-chart viz.
-   * AI-generated; sanitized before use (no functions).
-   */
-  chartSpec?: CustomChartSpec;
-  /** The AI prompt that produced this widget — stored for re-generation. */
-  aiPrompt?: string;
-}
-
-export interface Widget {
-  id: string;
-  layout: WidgetLayout;
-  title: string;
-  viz: VizType;
-  binding: WidgetBinding;
-  options?: WidgetOptions;
-}
-
-/** Board-level global filter applied across all widgets that expose the dimension. */
-export interface DashboardFilter {
-  id: string;
-  label: string;
-  /** Dimension key (dot-path) this filter matches against. */
-  field: string;
-  type: 'select' | 'multiselect' | 'search';
-  /** If set, only widgets whose toolName is in this list are filtered. Undefined = all. */
-  appliesTo?: string[];
-  value?: string | string[];
-}
-
-/** Cross-filter produced by clicking a chart element. Persisted in doc so reloads preserve it. */
-export interface CrossFilter {
-  id: string;
-  field: string;
-  value: string;
-  sourceWidgetId: string;
-}
-
-export interface DashboardDoc {
-  version: 1;
-  widgets: Widget[];
-  filters?: DashboardFilter[];
-  crossFilters?: CrossFilter[];
-}
-
-export function emptyDashboard(): DashboardDoc {
-  return { version: 1, widgets: [] };
-}
-
-export function newWidgetId(): string {
-  return `w-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 7)}`;
-}
-
-/** Default grid size when adding a widget of a given viz type. */
-export function defaultWidgetLayout(viz: VizType): WidgetLayout {
-  switch (viz) {
-    case 'kpi':
-    case 'sparkline':
-    case 'stat-card':
-      return { x: 0, y: Infinity, w: 3, h: 2 };
-    case 'gauge':
-      return { x: 0, y: Infinity, w: 3, h: 3 };
-    case 'table':
-      return { x: 0, y: Infinity, w: 8, h: 5 };
-    case 'markdown':
-      return { x: 0, y: Infinity, w: 6, h: 3 };
-    case 'stacked-bar':
-      return { x: 0, y: Infinity, w: 6, h: 2 };
-    case 'custom-chart':
-      return { x: 0, y: Infinity, w: 6, h: 4 };
-    default:
-      return { x: 0, y: Infinity, w: 5, h: 4 };
-  }
-}
+export type {
+  VizType,
+  FieldRole,
+  AggOp,
+  FormatHint,
+  FieldDef,
+  DatasetDef,
+  FilterOp,
+  FilterValue,
+  Filter,
+  Operand,
+  ComputedField,
+  MeasureSpec,
+  SortSpec,
+  TopNSpec,
+  QuerySpec,
+  QueryResult,
+  QueryResultSeries,
+} from '@/lib/dashboard/engine/types';
+
+export type {
+  VizOptions,
+  Widget,
+  SlicerControl,
+  BoardSlicer,
+  BoardTheme,
+  DashboardDoc,
+} from '@/lib/dashboard/engine/doc';
+
+export {
+  emptyDashboard,
+  newWidgetId,
+  defaultWidgetLayout,
+  migrateDocToV2,
+} from '@/lib/dashboard/engine/doc';
diff --git a/web/src/lib/dashboard/viz/EmptyData.tsx b/web/src/lib/dashboard/viz/EmptyData.tsx
deleted file mode 100644
index 4fc4bf71..00000000
--- a/web/src/lib/dashboard/viz/EmptyData.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export function EmptyData({ message = 'No data available' }: { message?: string } = {}) {
-  return <p className="text-xs text-muted-foreground py-4 text-center">{message}</p>;
-}
diff --git a/web/src/lib/dashboard/viz/VizErrorBoundary.tsx b/web/src/lib/dashboard/viz/VizErrorBoundary.tsx
deleted file mode 100644
index a42f52ce..00000000
--- a/web/src/lib/dashboard/viz/VizErrorBoundary.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-'use client';
-
-import { Component, type ReactNode } from 'react';
-import { AlertTriangle } from 'lucide-react';
-
-interface Props {
-  children: ReactNode;
-  /** Changing this value resets the boundary (e.g. widget id or a retry counter). */
-  resetKey?: unknown;
-}
-
-interface State {
-  error: Error | null;
-}
-
-/**
- * Isolates a single widget's render so a throwing visualization (e.g. a malformed
- * Chart.js dataset) shows a local error instead of crashing the whole dashboard.
- */
-export class VizErrorBoundary extends Component<Props, State> {
-  state: State = { error: null };
-
-  static getDerivedStateFromError(error: Error): State {
-    return { error };
-  }
-
-  componentDidUpdate(prev: Props) {
-    if (prev.resetKey !== this.props.resetKey && this.state.error) {
-      this.setState({ error: null });
-    }
-  }
-
-  render() {
-    if (this.state.error) {
-      return (
-        <div className="flex items-center gap-1.5 text-amber-400 text-xs py-2">
-          <AlertTriangle className="h-3.5 w-3.5 shrink-0" />
-          <span className="break-all">Failed to render: {this.state.error.message}</span>
-        </div>
-      );
-    }
-    return this.props.children;
-  }
-}
diff --git a/web/src/lib/dashboard/viz/charts/BarViz.tsx b/web/src/lib/dashboard/viz/charts/BarViz.tsx
deleted file mode 100644
index c48911cb..00000000
--- a/web/src/lib/dashboard/viz/charts/BarViz.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-'use client';
-
-import { useMemo } from 'react';
-import { DashboardChart } from '@/lib/dashboard/viz/charts/DashboardChart';
-import { extractMultiSeries } from '@/lib/dashboard/viz/series';
-import { EmptyData } from '@/lib/dashboard/viz/EmptyData';
-import type { VizRenderProps } from '@/lib/dashboard/viz/types';
-
-export function BarViz({ widget, data, catalog, opts, onCrossFilter }: VizRenderProps) {
-  const ss = useMemo(
-    () => extractMultiSeries(widget, data, catalog, opts),
-    [widget, data, catalog, opts],
-  );
-  if (!ss) return <EmptyData />;
-  const xField = widget.binding.xField ?? catalog?.fields.find((f) => f.role === 'dimension')?.key ?? '';
-  return (
-    <DashboardChart
-      seriesSet={ss}
-      kind="bar"
-      options={{
-        showLegend: opts.showLegend,
-        onCategoryClick: onCrossFilter && xField ? (label) => onCrossFilter(xField, label) : undefined,
-      }}
-    />
-  );
-}
-
-export function HorizontalBarViz({ widget, data, catalog, opts, onCrossFilter }: VizRenderProps) {
-  const ss = useMemo(
-    () => extractMultiSeries(widget, data, catalog, opts),
-    [widget, data, catalog, opts],
-  );
-  if (!ss) return <EmptyData />;
-  const xField = widget.binding.xField ?? catalog?.fields.find((f) => f.role === 'dimension')?.key ?? '';
-  return (
-    <DashboardChart
-      seriesSet={ss}
-      kind="horizontal-bar"
-      options={{
-        showLegend: opts.showLegend,
-        onCategoryClick: onCrossFilter && xField ? (label) => onCrossFilter(xField, label) : undefined,
-      }}
-    />
-  );
-}
-
-export function RankedBarViz({ widget, data, catalog, opts, onCrossFilter }: VizRenderProps) {
-  const mergedOpts = { ...opts, chartSort: opts.chartSort ?? 'desc' as const };
-  const ss = useMemo(
-    () => extractMultiSeries(widget, data, catalog, mergedOpts),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [widget, data, catalog, opts],
-  );
-  if (!ss) return <EmptyData />;
-  const xField = widget.binding.xField ?? catalog?.fields.find((f) => f.role === 'dimension')?.key ?? '';
-  return (
-    <DashboardChart
-      seriesSet={ss}
-      kind="horizontal-bar"
-      options={{
-        heightClass: 'h-44',
-        onCategoryClick: onCrossFilter && xField ? (label) => onCrossFilter(xField, label) : undefined,
-      }}
-    />
-  );
-}
diff --git a/web/src/lib/dashboard/viz/charts/CustomChartViz.test.ts b/web/src/lib/dashboard/viz/charts/CustomChartViz.test.ts
deleted file mode 100644
index 976d859e..00000000
--- a/web/src/lib/dashboard/viz/charts/CustomChartViz.test.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-/**
- * Unit tests for CustomChartViz data-building logic.
- * We extract and test the pure data-building function without mounting React.
- */
-import { describe, it, expect } from 'vitest';
-
-// Replicate the buildChartData logic here so we can test it without JSDOM/Canvas.
-// This is a white-box test that mirrors the component's internal logic.
-
-const PALETTE = [
-  'rgba(59,130,246,0.8)',
-  'rgba(16,185,129,0.8)',
-  'rgba(245,158,11,0.8)',
-];
-
-interface ChartSpec {
-  type: string;
-  data?: Record<string, unknown>;
-  labelField?: string;
-  series?: { label: string; field: string; backgroundColor?: string }[];
-}
-
-function buildChartData(spec: ChartSpec, rows: Record<string, unknown>[]) {
-  if (spec.data) return spec.data;
-  const labelField = spec.labelField ?? 'label';
-  const labels = rows.map((r) => String(r[labelField] ?? ''));
-  const series = spec.series ?? [];
-  if (series.length > 0) {
-    return {
-      labels,
-      datasets: series.map((s, i) => ({
-        label: s.label,
-        data: rows.map((r) => (typeof r[s.field] === 'number' ? r[s.field] : 0)),
-        backgroundColor: s.backgroundColor ?? PALETTE[i % PALETTE.length],
-      })),
-    };
-  }
-  // Fallback: numeric columns
-  if (rows.length > 0) {
-    const numericCols = Object.entries(rows[0])
-      .filter(([k, v]) => k !== labelField && typeof v === 'number')
-      .map(([k]) => k);
-    return {
-      labels,
-      datasets: numericCols.map((col, i) => ({
-        label: col,
-        data: rows.map((r) => (typeof r[col] === 'number' ? r[col] : 0)),
-        backgroundColor: PALETTE[i % PALETTE.length],
-      })),
-    };
-  }
-  return { labels: [], datasets: [] };
-}
-
-describe('buildChartData', () => {
-  const rows = [
-    { category: 'Performance', score: 80 },
-    { category: 'SEO', score: 90 },
-    { category: 'Accessibility', score: 70 },
-  ];
-
-  it('uses spec.data as-is when provided', () => {
-    const customData = { labels: ['a'], datasets: [] };
-    const result = buildChartData({ type: 'bar', data: customData }, rows);
-    expect(result).toBe(customData);
-  });
-
-  it('builds labels from labelField', () => {
-    const result = buildChartData(
-      { type: 'bar', labelField: 'category', series: [{ label: 'Score', field: 'score' }] },
-      rows,
-    ) as { labels: string[]; datasets: { data: number[] }[] };
-    expect(result.labels).toEqual(['Performance', 'SEO', 'Accessibility']);
-  });
-
-  it('maps series fields to dataset values', () => {
-    const result = buildChartData(
-      { type: 'bar', labelField: 'category', series: [{ label: 'Score', field: 'score' }] },
-      rows,
-    ) as { datasets: { label: string; data: number[] }[] };
-    expect(result.datasets[0].label).toBe('Score');
-    expect(result.datasets[0].data).toEqual([80, 90, 70]);
-  });
-
-  it('uses default palette when no backgroundColor is given', () => {
-    const result = buildChartData(
-      { type: 'pie', labelField: 'category', series: [{ label: 'Score', field: 'score' }] },
-      rows,
-    ) as { datasets: { backgroundColor: string }[] };
-    expect(result.datasets[0].backgroundColor).toBe(PALETTE[0]);
-  });
-
-  it('falls back to numeric columns when no series is given', () => {
-    const result = buildChartData(
-      { type: 'bar', labelField: 'category' },
-      rows,
-    ) as { labels: string[]; datasets: { label: string }[] };
-    expect(result.datasets[0].label).toBe('score');
-  });
-
-  it('returns empty data for empty rows and no series', () => {
-    const result = buildChartData({ type: 'radar' }, []) as { labels: unknown[]; datasets: unknown[] };
-    expect(result.labels).toHaveLength(0);
-    expect(result.datasets).toHaveLength(0);
-  });
-});
diff --git a/web/src/lib/dashboard/viz/charts/CustomChartViz.tsx b/web/src/lib/dashboard/viz/charts/CustomChartViz.tsx
deleted file mode 100644
index 8b37c30a..00000000
--- a/web/src/lib/dashboard/viz/charts/CustomChartViz.tsx
+++ /dev/null
@@ -1,162 +0,0 @@
-'use client';
-
-import { useRef, useEffect, useMemo } from 'react';
-import {
-  Chart,
-  BarController,
-  BarElement,
-  LineController,
-  LineElement,
-  PointElement,
-  PieController,
-  ArcElement,
-  DoughnutController,
-  RadarController,
-  RadialLinearScale,
-  PolarAreaController,
-  BubbleController,
-  ScatterController,
-  CategoryScale,
-  LinearScale,
-  LogarithmicScale,
-  TimeScale,
-  Tooltip,
-  Legend,
-  Filler,
-  type ChartConfiguration,
-} from 'chart.js';
-import { EmptyData } from '@/lib/dashboard/viz/EmptyData';
-import type { VizRenderProps } from '@/lib/dashboard/viz/types';
-import type { CustomChartSpec } from '@/lib/dashboard/types';
-
-// Register all chart types so the AI can use any of them
-Chart.register(
-  BarController, BarElement,
-  LineController, LineElement, PointElement,
-  PieController, ArcElement,
-  DoughnutController,
-  RadarController, RadialLinearScale,
-  PolarAreaController,
-  BubbleController,
-  ScatterController,
-  CategoryScale, LinearScale, LogarithmicScale, TimeScale,
-  Tooltip, Legend, Filler,
-);
-
-const PALETTE = [
-  'rgba(59,130,246,0.8)',
-  'rgba(16,185,129,0.8)',
-  'rgba(245,158,11,0.8)',
-  'rgba(239,68,68,0.8)',
-  'rgba(139,92,246,0.8)',
-  'rgba(20,184,166,0.8)',
-  'rgba(249,115,22,0.8)',
-  'rgba(236,72,153,0.8)',
-];
-
-function buildChartData(
-  spec: CustomChartSpec,
-  rows: Record<string, unknown>[],
-): ChartConfiguration['data'] {
-  // Prefer explicit data from spec
-  if (spec.data) {
-    return spec.data as unknown as ChartConfiguration['data'];
-  }
-
-  const labelField = spec.labelField ?? 'label';
-  const labels = rows.map((r) => String(r[labelField] ?? ''));
-  const series = spec.series ?? [];
-
-  if (series.length > 0) {
-    return {
-      labels,
-      datasets: series.map((s, i) => ({
-        label: s.label,
-        data: rows.map((r) => {
-          const v = r[s.field];
-          return typeof v === 'number' ? v : 0;
-        }),
-        backgroundColor: s.backgroundColor ?? PALETTE[i % PALETTE.length],
-        borderColor: s.borderColor,
-        fill: false,
-      })),
-    };
-  }
-
-  // Fallback: treat numeric columns as datasets
-  if (rows.length > 0) {
-    const numericCols = Object.entries(rows[0])
-      .filter(([k, v]) => k !== labelField && typeof v === 'number')
-      .map(([k]) => k);
-    return {
-      labels,
-      datasets: numericCols.map((col, i) => ({
-        label: col,
-        data: rows.map((r) => (typeof r[col] === 'number' ? (r[col] as number) : 0)),
-        backgroundColor: PALETTE[i % PALETTE.length],
-        fill: false,
-      })),
-    };
-  }
-
-  return { labels: [], datasets: [] };
-}
-
-export function CustomChartViz({ data, opts, widget }: VizRenderProps) {
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const chartRef = useRef<Chart | null>(null);
-
-  const spec = opts.chartSpec as CustomChartSpec | undefined;
-  const rows = useMemo<Record<string, unknown>[]>(() => {
-    if (!data) return [];
-    if (Array.isArray(data.rows)) return data.rows as Record<string, unknown>[];
-    return [];
-  }, [data]);
-
-  const chartConfig = useMemo<ChartConfiguration | null>(() => {
-    if (!spec?.type) return null;
-    const chartData = buildChartData(spec, rows);
-    // Spread user options first so our required overrides always win.
-    // Then merge plugins carefully so the user's plugin config is preserved
-    // alongside our defaults.
-    const { plugins: userPlugins, ...restOptions } = spec.options ?? {};
-    return {
-      type: spec.type as ChartConfiguration['type'],
-      data: chartData,
-      options: {
-        ...restOptions,
-        responsive: true,
-        maintainAspectRatio: false,
-        plugins: {
-          legend: { display: true },
-          ...(userPlugins as object | undefined),
-        },
-      },
-    };
-  }, [spec, rows]);
-
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas || !chartConfig) return;
-    chartRef.current?.destroy();
-    try {
-      chartRef.current = new Chart(canvas, chartConfig);
-    } catch {
-      // destroyed before mount — ignore
-    }
-    return () => {
-      chartRef.current?.destroy();
-      chartRef.current = null;
-    };
-  }, [chartConfig]);
-
-  if (!spec?.type) {
-    return <EmptyData message="No chart spec — ask AI to generate one" />;
-  }
-
-  return (
-    <div className="relative w-full h-full min-h-[160px]" aria-label={`Custom chart: ${widget.title}`}>
-      <canvas ref={canvasRef} />
-    </div>
-  );
-}
diff --git a/web/src/lib/dashboard/viz/charts/DashboardChart.tsx b/web/src/lib/dashboard/viz/charts/DashboardChart.tsx
deleted file mode 100644
index 0682044e..00000000
--- a/web/src/lib/dashboard/viz/charts/DashboardChart.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-'use client';
-
-/**
- * Shared chart component for all dashboard chart visualizations.
- * Accepts a normalized SeriesSet and renders the correct Chart.js chart with
- * N datasets, palette per series, and shared theme defaults.
- */
-
-import { useMemo, useCallback } from 'react';
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  PointElement,
-  LineElement,
-  ArcElement,
-  Filler,
-  Title,
-  Tooltip,
-  Legend,
-} from 'chart.js';
-import { Bar, Line, Pie, Doughnut } from 'react-chartjs-2';
-import type { ChartEvent } from 'chart.js';
-import { palette } from '@/utils/chartPalette';
-import {
-  getGridColor,
-  getChartTitleColor,
-  getChartLegendLabelColor,
-  doughnutOptionsBottomLegend,
-} from '@/utils/chartJsDefaults';
-import { anyDoughnutOptions } from '@/utils/chartOptions';
-import { ChartPanel } from '@/components/charts/ChartPanel';
-import type { SeriesSet } from '@/lib/dashboard/viz/series';
-
-let _registered = false;
-function registerAll() {
-  if (_registered) return;
-  ChartJS.register(
-    CategoryScale, LinearScale, BarElement, PointElement,
-    LineElement, ArcElement, Filler, Title, Tooltip, Legend,
-  );
-  _registered = true;
-}
-
-export type ChartKind = 'bar' | 'horizontal-bar' | 'line' | 'area' | 'pie' | 'doughnut';
-
-export interface DashboardChartOptions {
-  stacked?: boolean;
-  showLegend?: boolean;
-  heightClass?: string;
-  /** If provided, onClick resolves the clicked category label and calls this. */
-  onCategoryClick?: (label: string) => void;
-}
-
-interface DashboardChartProps {
-  seriesSet: SeriesSet;
-  kind: ChartKind;
-  options?: DashboardChartOptions;
-}
-
-export function DashboardChart({ seriesSet, kind, options = {} }: DashboardChartProps) {
-  registerAll();
-
-  const { stacked = seriesSet.stacked, showLegend = false, heightClass = 'h-44', onCategoryClick } = options;
-  const colors = palette(Math.max(seriesSet.series.length, seriesSet.labels.length));
-
-  const handleClick = useCallback(
-    (event: ChartEvent, elements: { index: number }[]) => {
-      if (!onCategoryClick || !elements.length) return;
-      const idx = elements[0]?.index ?? -1;
-      if (idx >= 0 && idx < seriesSet.labels.length) {
-        onCategoryClick(seriesSet.labels[idx]);
-      }
-    },
-    [onCategoryClick, seriesSet.labels],
-  );
-
-  const grid = getGridColor();
-  const tickColor = getChartTitleColor();
-  const legendColor = getChartLegendLabelColor();
-
-  const datasets = useMemo(() => {
-    if (kind === 'pie' || kind === 'doughnut') {
-      // Pie/Doughnut: one dataset, one color per label
-      const s0 = seriesSet.series[0];
-      if (!s0) return [];
-      return [{ data: s0.values, backgroundColor: colors, borderWidth: 0 }];
-    }
-    return seriesSet.series.map((s, i) => {
-      const color = colors[i % colors.length];
-      if (kind === 'line' || kind === 'area') {
-        return {
-          label: s.label,
-          data: s.values,
-          borderColor: color,
-          backgroundColor: kind === 'area' ? `${color}33` : 'transparent',
-          fill: kind === 'area',
-          tension: 0.35,
-          pointRadius: 2,
-        };
-      }
-      return {
-        label: s.label,
-        data: s.values,
-        backgroundColor: color,
-        borderRadius: 3,
-      };
-    });
-  }, [seriesSet.series, colors, kind]);
-
-  // Pie / Doughnut
-  if (kind === 'pie' || kind === 'doughnut') {
-    const pieData = {
-      labels: seriesSet.labels,
-      datasets,
-    };
-    const pieOpts = anyDoughnutOptions({
-      ...doughnutOptionsBottomLegend(),
-      onClick: onCategoryClick ? handleClick : undefined,
-    });
-    return (
-      <div className={heightClass}>
-        {kind === 'doughnut'
-          ? <Doughnut data={pieData} options={pieOpts} />
-          : <Pie data={pieData} options={pieOpts} />}
-      </div>
-    );
-  }
-
-  // Bar / Line / Area
-  const chartData = {
-    labels: seriesSet.labels,
-    datasets,
-  };
-
-  const isHorizontal = kind === 'horizontal-bar';
-  const baseScales = isHorizontal
-    ? {
-        x: { stacked, beginAtZero: true, grid: { color: grid }, ticks: { color: tickColor } },
-        y: { stacked, grid: { color: grid }, ticks: { color: tickColor, maxRotation: 0 } },
-      }
-    : {
-        x: { stacked, grid: { color: grid }, ticks: { color: tickColor, maxRotation: 45 } },
-        y: { stacked, beginAtZero: true, grid: { color: grid }, ticks: { color: tickColor } },
-      };
-
-  const chartOpts = {
-    indexAxis: isHorizontal ? ('y' as const) : ('x' as const),
-    responsive: true,
-    maintainAspectRatio: false,
-    plugins: {
-      legend: {
-        display: showLegend || seriesSet.series.length > 1,
-        labels: { color: legendColor, font: { size: 11 }, padding: 10 },
-      },
-    },
-    scales: baseScales,
-    onClick: onCategoryClick ? handleClick : undefined,
-  };
-
-  if (kind === 'line' || kind === 'area') {
-    return (
-      <ChartPanel heightClass={heightClass}>
-        <Line data={chartData} options={chartOpts} />
-      </ChartPanel>
-    );
-  }
-
-  return (
-    <ChartPanel heightClass={heightClass}>
-      <Bar data={chartData} options={chartOpts} />
-    </ChartPanel>
-  );
-}
diff --git a/web/src/lib/dashboard/viz/charts/LineViz.tsx b/web/src/lib/dashboard/viz/charts/LineViz.tsx
deleted file mode 100644
index 79a4a8b7..00000000
--- a/web/src/lib/dashboard/viz/charts/LineViz.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-'use client';
-
-import { useMemo } from 'react';
-import { DashboardChart } from '@/lib/dashboard/viz/charts/DashboardChart';
-import { extractMultiSeries } from '@/lib/dashboard/viz/series';
-import { EmptyData } from '@/lib/dashboard/viz/EmptyData';
-import type { VizRenderProps } from '@/lib/dashboard/viz/types';
-
-export function LineViz({ widget, data, catalog, opts, onCrossFilter }: VizRenderProps) {
-  const ss = useMemo(
-    () => extractMultiSeries(widget, data, catalog, opts),
-    [widget, data, catalog, opts],
-  );
-  if (!ss) return <EmptyData />;
-  const xField = widget.binding.xField ?? catalog?.fields.find((f) => f.role === 'dimension')?.key ?? '';
-  return (
-    <DashboardChart
-      seriesSet={ss}
-      kind="line"
-      options={{
-        showLegend: opts.showLegend,
-        onCategoryClick: onCrossFilter && xField ? (label) => onCrossFilter(xField, label) : undefined,
-      }}
-    />
-  );
-}
-
-export function AreaViz({ widget, data, catalog, opts, onCrossFilter }: VizRenderProps) {
-  const ss = useMemo(
-    () => extractMultiSeries(widget, data, catalog, opts),
-    [widget, data, catalog, opts],
-  );
-  if (!ss) return <EmptyData />;
-  const xField = widget.binding.xField ?? catalog?.fields.find((f) => f.role === 'dimension')?.key ?? '';
-  return (
-    <DashboardChart
-      seriesSet={ss}
-      kind="area"
-      options={{
-        showLegend: opts.showLegend,
-        onCategoryClick: onCrossFilter && xField ? (label) => onCrossFilter(xField, label) : undefined,
-      }}
-    />
-  );
-}
diff --git a/web/src/lib/dashboard/viz/charts/PartViz.tsx b/web/src/lib/dashboard/viz/charts/PartViz.tsx
deleted file mode 100644
index a23dd2cd..00000000
--- a/web/src/lib/dashboard/viz/charts/PartViz.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-'use client';
-
-import { useMemo } from 'react';
-import { DashboardChart } from '@/lib/dashboard/viz/charts/DashboardChart';
-import { extractMultiSeries } from '@/lib/dashboard/viz/series';
-import { EmptyData } from '@/lib/dashboard/viz/EmptyData';
-import { CompactStackedBar } from '@/components/charts/compact/CompactStackedBar';
-import { palette } from '@/utils/chartPalette';
-import type { VizRenderProps } from '@/lib/dashboard/viz/types';
-
-export function PieViz({ widget, data, catalog, opts, onCrossFilter }: VizRenderProps) {
-  const ss = useMemo(
-    () => extractMultiSeries(widget, data, catalog, opts),
-    [widget, data, catalog, opts],
-  );
-  if (!ss) return <EmptyData />;
-  const xField = widget.binding.xField ?? catalog?.fields.find((f) => f.role === 'dimension')?.key ?? '';
-  return (
-    <DashboardChart
-      seriesSet={ss}
-      kind="pie"
-      options={{
-        onCategoryClick: onCrossFilter && xField ? (label) => onCrossFilter(xField, label) : undefined,
-      }}
-    />
-  );
-}
-
-export function DoughnutViz({ widget, data, catalog, opts, onCrossFilter }: VizRenderProps) {
-  const ss = useMemo(
-    () => extractMultiSeries(widget, data, catalog, opts),
-    [widget, data, catalog, opts],
-  );
-  if (!ss) return <EmptyData />;
-  const xField = widget.binding.xField ?? catalog?.fields.find((f) => f.role === 'dimension')?.key ?? '';
-  return (
-    <DashboardChart
-      seriesSet={ss}
-      kind="doughnut"
-      options={{
-        onCategoryClick: onCrossFilter && xField ? (label) => onCrossFilter(xField, label) : undefined,
-      }}
-    />
-  );
-}
-
-export function StackedBarViz({ widget, data, catalog, opts, onCrossFilter }: VizRenderProps) {
-  const ss = useMemo(
-    () => extractMultiSeries(widget, data, catalog, opts),
-    [widget, data, catalog, opts],
-  );
-  if (!ss) return <EmptyData />;
-
-  // For compact stacked-bar: use first series values mapped over labels as segments
-  const xField = widget.binding.xField ?? catalog?.fields.find((f) => f.role === 'dimension')?.key ?? '';
-  const colors = palette(ss.labels.length);
-  const segments = ss.labels.map((label, i) => ({
-    label,
-    value: ss.series[0]?.values[i] ?? 0,
-    color: colors[i],
-  }));
-
-  return (
-    <div
-      className="py-3 px-1 cursor-pointer"
-      onClick={() => {
-        // Stacked bar is a summary — clicking it has no specific category
-      }}
-    >
-      <CompactStackedBar segments={segments} />
-      {onCrossFilter && xField && (
-        <div className="mt-2 flex flex-wrap gap-1">
-          {ss.labels.map((label, i) => (
-            <button
-              key={label}
-              onClick={() => onCrossFilter(xField, label)}
-              className="text-[10px] px-1.5 py-0.5 rounded border border-default hover:border-blue-500/50 text-muted-foreground hover:text-bright transition-colors"
-            >
-              {label}
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/web/src/lib/dashboard/viz/data/MarkdownViz.tsx b/web/src/lib/dashboard/viz/data/MarkdownViz.tsx
deleted file mode 100644
index 724d0814..00000000
--- a/web/src/lib/dashboard/viz/data/MarkdownViz.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-'use client';
-
-import ReactMarkdown from 'react-markdown';
-import type { VizRenderProps } from '@/lib/dashboard/viz/types';
-
-export function MarkdownViz({ opts }: VizRenderProps) {
-  return (
-    <div className="prose prose-invert prose-sm max-w-none overflow-auto text-foreground">
-      <ReactMarkdown>{opts.markdownContent ?? '*No content. Edit this widget to add markdown.*'}</ReactMarkdown>
-    </div>
-  );
-}
diff --git a/web/src/lib/dashboard/viz/data/TableViz.tsx b/web/src/lib/dashboard/viz/data/TableViz.tsx
deleted file mode 100644
index 810acee4..00000000
--- a/web/src/lib/dashboard/viz/data/TableViz.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-'use client';
-
-import {
-  Table,
-  TableHead,
-  TableHeadCell,
-  TableBody,
-  TableRow,
-  TableCell,
-} from '@/components';
-import { EmptyData } from '@/lib/dashboard/viz/EmptyData';
-import type { VizRenderProps } from '@/lib/dashboard/viz/types';
-
-/** Render any cell value as readable text; collapse arrays/objects instead of "[object Object]". */
-function formatCell(value: unknown): string {
-  if (value == null || value === '') return '—';
-  if (Array.isArray(value)) return value.length ? `${value.length} item${value.length === 1 ? '' : 's'}` : '—';
-  if (typeof value === 'object') {
-    const text = JSON.stringify(value);
-    return text.length > 60 ? `${text.slice(0, 57)}…` : text;
-  }
-  if (typeof value === 'number') return value.toLocaleString();
-  return String(value);
-}
-
-export function TableViz({ data, opts }: VizRenderProps) {
-  const limit = opts.tableLimit ?? 50;
-  const capped = data.rows.slice(0, limit);
-  if (!capped.length) return <EmptyData />;
-
-  // Union of keys across all rows (rows can be heterogeneous), preserving first-seen order.
-  const cols: string[] = [];
-  const seen = new Set<string>();
-  for (const row of capped) {
-    for (const key of Object.keys(row)) {
-      if (!seen.has(key)) { seen.add(key); cols.push(key); }
-    }
-  }
-
-  return (
-    <div className="overflow-x-auto -mx-1">
-      <Table>
-        <TableHead>
-          <tr>
-            {cols.map((c) => <TableHeadCell key={c}>{c}</TableHeadCell>)}
-          </tr>
-        </TableHead>
-        <TableBody>
-          {capped.map((row, i) => (
-            <TableRow key={i}>
-              {cols.map((c) => (
-                <TableCell key={c}>{formatCell(row[c])}</TableCell>
-              ))}
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </div>
-  );
-}
diff --git a/web/src/lib/dashboard/viz/formatters.test.ts b/web/src/lib/dashboard/viz/formatters.test.ts
deleted file mode 100644
index e7d3b405..00000000
--- a/web/src/lib/dashboard/viz/formatters.test.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { formatValue, thresholdColor } from '@/lib/dashboard/viz/formatters';
-
-describe('formatValue', () => {
-  it('renders em-dash for null/undefined/non-finite', () => {
-    expect(formatValue(null)).toBe('—');
-    expect(formatValue(Infinity)).toBe('—');
-    expect(formatValue(NaN)).toBe('—');
-  });
-
-  it('passes strings through unchanged', () => {
-    expect(formatValue('A')).toBe('A');
-  });
-
-  it('default groups integers and shows one decimal for floats', () => {
-    expect(formatValue(1234)).toBe('1,234');
-    expect(formatValue(1.25)).toBe('1.3');
-  });
-
-  it('fixed-decimal patterns', () => {
-    expect(formatValue(1.2, '0')).toBe('1');
-    expect(formatValue(1.25, '0.0')).toBe('1.3');
-    expect(formatValue(1, '0.00')).toBe('1.00');
-  });
-
-  it('fraction percent scales by 100', () => {
-    expect(formatValue(0.0345, '0.0%')).toBe('3.5%');
-    expect(formatValue(0.5, '%')).toBe('50.0%');
-  });
-
-  it('pct treats value as already a percentage', () => {
-    expect(formatValue(85, 'pct')).toBe('85%');
-    expect(formatValue(85.4, 'pct')).toBe('85.4%');
-  });
-
-  it('score renders as N/100', () => {
-    expect(formatValue(91.6, 'score')).toBe('92/100');
-  });
-});
-
-describe('thresholdColor', () => {
-  const thresholds = [
-    { value: 50, color: 'red' },
-    { value: 90, color: 'green' },
-  ];
-
-  it('returns the highest threshold at or below the value', () => {
-    expect(thresholdColor(95, thresholds)).toBe('green');
-    expect(thresholdColor(60, thresholds)).toBe('red');
-  });
-
-  it('returns undefined below all thresholds or with no thresholds', () => {
-    expect(thresholdColor(10, thresholds)).toBeUndefined();
-    expect(thresholdColor(95, [])).toBeUndefined();
-    expect(thresholdColor(null, thresholds)).toBeUndefined();
-  });
-});
diff --git a/web/src/lib/dashboard/viz/labels.ts b/web/src/lib/dashboard/viz/labels.ts
deleted file mode 100644
index 7350d0b8..00000000
--- a/web/src/lib/dashboard/viz/labels.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import type { VizType } from '@/lib/dashboard/types';
-
-export const VIZ_LABELS: Record<VizType, string> = {
-  kpi: 'KPI (number)',
-  'stat-card': 'Stat card',
-  gauge: 'Gauge',
-  bar: 'Vertical bar chart',
-  'horizontal-bar': 'Horizontal bar chart',
-  'ranked-bar': 'Ranked bar chart',
-  'stacked-bar': 'Stacked proportion bar',
-  line: 'Line chart',
-  area: 'Area chart',
-  sparkline: 'Sparkline trend',
-  pie: 'Pie chart',
-  doughnut: 'Doughnut chart',
-  table: 'Table',
-  markdown: 'Text / Markdown',
-  'custom-chart': 'Custom chart (AI)',
-};
-
-/** Viz types grouped for the widget picker sidebar. */
-export const VIZ_GROUPS: { label: string; types: VizType[] }[] = [
-  { label: 'Metrics', types: ['kpi', 'stat-card', 'gauge', 'sparkline'] },
-  { label: 'Bars', types: ['bar', 'horizontal-bar', 'ranked-bar', 'stacked-bar'] },
-  { label: 'Trends', types: ['line', 'area'] },
-  { label: 'Parts', types: ['pie', 'doughnut'] },
-  { label: 'Data', types: ['table', 'markdown'] },
-  { label: 'AI', types: ['custom-chart'] },
-];
diff --git a/web/src/lib/dashboard/viz/metrics/GaugeViz.tsx b/web/src/lib/dashboard/viz/metrics/GaugeViz.tsx
deleted file mode 100644
index b03f3de1..00000000
--- a/web/src/lib/dashboard/viz/metrics/GaugeViz.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-'use client';
-
-import { scoreBandColor } from '@/utils/chartPalette';
-import type { VizRenderProps } from '@/lib/dashboard/viz/types';
-
-export function GaugeViz({ data }: VizRenderProps) {
-  const score = typeof data.kpiValue === 'number' ? data.kpiValue : Number(data.kpiValue);
-  const valid = Number.isFinite(score) ? score : null;
-  const clamped = valid != null ? Math.min(100, Math.max(0, valid)) : 0;
-  const color = scoreBandColor(valid);
-  return (
-    <div className="flex items-center justify-center py-2">
-      <div className="relative w-24 h-24">
-        <svg viewBox="0 0 36 36" className="w-24 h-24 -rotate-90">
-          <path
-            d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
-            fill="none" stroke="#1F2937" strokeWidth="3"
-          />
-          <path
-            d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
-            fill="none" stroke={color} strokeWidth="3"
-            strokeDasharray={valid != null ? `${clamped}, 100` : '0, 100'}
-            strokeLinecap="round"
-          />
-        </svg>
-        <div className="absolute inset-0 flex items-center justify-center text-xl font-bold text-bright">
-          {valid != null ? Math.round(valid) : '—'}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/web/src/lib/dashboard/viz/metrics/KpiViz.tsx b/web/src/lib/dashboard/viz/metrics/KpiViz.tsx
deleted file mode 100644
index 488e26bb..00000000
--- a/web/src/lib/dashboard/viz/metrics/KpiViz.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-'use client';
-
-import { formatValue, thresholdColor } from '@/lib/dashboard/viz/formatters';
-import type { VizRenderProps } from '@/lib/dashboard/viz/types';
-
-export function KpiViz({ data, opts }: VizRenderProps) {
-  const color = thresholdColor(data.kpiValue, opts.thresholds);
-  return (
-    <div className="flex flex-col justify-center py-1">
-      <p className="text-3xl font-bold tabular-nums" style={color ? { color } : undefined}>
-        {formatValue(data.kpiValue, opts.format)}
-      </p>
-    </div>
-  );
-}
-
-export function StatCardViz({ data, opts }: VizRenderProps) {
-  const color = thresholdColor(data.kpiValue, opts.thresholds);
-  return (
-    <div className="rounded-lg border border-default/80 bg-brand-900/50 px-3 py-2 h-full flex flex-col justify-center">
-      <p className="text-2xl font-bold tabular-nums" style={color ? { color } : undefined}>
-        {formatValue(data.kpiValue, opts.format)}
-      </p>
-      {opts.subtitle ? (
-        <p className="text-xs text-muted-foreground mt-1 truncate">{opts.subtitle}</p>
-      ) : null}
-    </div>
-  );
-}
diff --git a/web/src/lib/dashboard/viz/metrics/SparklineViz.tsx b/web/src/lib/dashboard/viz/metrics/SparklineViz.tsx
deleted file mode 100644
index 18ddd2da..00000000
--- a/web/src/lib/dashboard/viz/metrics/SparklineViz.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-'use client';
-
-import { CompactAreaSparkline } from '@/components/charts/compact/CompactAreaSparkline';
-import { extractChartSeries } from '@/lib/dashboard/viz/series';
-import { EmptyData } from '@/lib/dashboard/viz/EmptyData';
-import type { VizRenderProps } from '@/lib/dashboard/viz/types';
-
-export function SparklineViz(props: VizRenderProps) {
-  const series = extractChartSeries(props.widget, props.data, props.catalog, props.opts);
-  if (!series?.values.length) {
-    const n = Number(props.data.kpiValue);
-    if (Number.isFinite(n)) {
-      return (
-        <div className="flex items-center justify-center h-full py-2">
-          <CompactAreaSparkline points={[n * 0.9, n * 0.95, n]} heightClass="h-10" />
-        </div>
-      );
-    }
-    return <EmptyData />;
-  }
-  return (
-    <div className="flex items-center justify-center h-full py-2">
-      <CompactAreaSparkline points={series.values} heightClass="h-10" />
-    </div>
-  );
-}
diff --git a/web/src/lib/dashboard/viz/registry.tsx b/web/src/lib/dashboard/viz/registry.tsx
deleted file mode 100644
index 712a4a6d..00000000
--- a/web/src/lib/dashboard/viz/registry.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-'use client';
-
-import type { ComponentType } from 'react';
-import type { VizType } from '@/lib/dashboard/types';
-import type { VizRenderProps } from '@/lib/dashboard/viz/types';
-import { KpiViz, StatCardViz } from '@/lib/dashboard/viz/metrics/KpiViz';
-import { GaugeViz } from '@/lib/dashboard/viz/metrics/GaugeViz';
-import { SparklineViz } from '@/lib/dashboard/viz/metrics/SparklineViz';
-import { BarViz, HorizontalBarViz, RankedBarViz } from '@/lib/dashboard/viz/charts/BarViz';
-import { LineViz, AreaViz } from '@/lib/dashboard/viz/charts/LineViz';
-import { PieViz, DoughnutViz, StackedBarViz } from '@/lib/dashboard/viz/charts/PartViz';
-import { TableViz } from '@/lib/dashboard/viz/data/TableViz';
-import { MarkdownViz } from '@/lib/dashboard/viz/data/MarkdownViz';
-import { CustomChartViz } from '@/lib/dashboard/viz/charts/CustomChartViz';
-
-const VIZ_REGISTRY: Record<VizType, ComponentType<VizRenderProps>> = {
-  kpi: KpiViz,
-  'stat-card': StatCardViz,
-  gauge: GaugeViz,
-  sparkline: SparklineViz,
-  bar: BarViz,
-  'horizontal-bar': HorizontalBarViz,
-  'ranked-bar': RankedBarViz,
-  line: LineViz,
-  area: AreaViz,
-  pie: PieViz,
-  doughnut: DoughnutViz,
-  'stacked-bar': StackedBarViz,
-  table: TableViz,
-  markdown: MarkdownViz,
-  'custom-chart': CustomChartViz,
-};
-
-export function renderViz(viz: VizType, props: VizRenderProps) {
-  const Component = VIZ_REGISTRY[viz];
-  return <Component {...props} />;
-}
-
-export function isDataViz(viz: VizType): boolean {
-  return viz !== 'markdown';
-}
-
-export { VIZ_REGISTRY };
diff --git a/web/src/lib/dashboard/viz/series.test.ts b/web/src/lib/dashboard/viz/series.test.ts
deleted file mode 100644
index ebed6b0d..00000000
--- a/web/src/lib/dashboard/viz/series.test.ts
+++ /dev/null
@@ -1,117 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { extractMultiSeries } from '@/lib/dashboard/viz/series';
-import type { Widget } from '@/lib/dashboard/types';
-import type { CatalogEntry } from '@/lib/dashboard/catalog/catalog';
-import type { WidgetData } from '@/lib/dashboard/data/fetchWidgetData';
-
-function makeWidget(overrides: Partial<Widget['binding']> = {}): Widget {
-  return {
-    id: 'w-test',
-    title: 'Test',
-    viz: 'bar',
-    layout: { x: 0, y: 0, w: 6, h: 4 },
-    binding: {
-      source: 'audit-tool',
-      toolName: 'get_category_scores',
-      select: 'categories',
-      xField: 'name',
-      yField: 'score',
-      ...overrides,
-    },
-  };
-}
-
-const CATALOG: CatalogEntry = {
-  toolName: 'get_category_scores',
-  label: 'Category scores',
-  section: 'Overview',
-  description: '',
-  rowsPath: 'categories',
-  fields: [
-    { key: 'name', label: 'Category', role: 'dimension' },
-    { key: 'score', label: 'Score', role: 'measure' },
-  ],
-  compatibleViz: ['bar'],
-};
-
-const DATA: WidgetData = {
-  raw: {},
-  rows: [
-    { name: 'SEO', score: 80 },
-    { name: 'Performance', score: 65 },
-    { name: 'Security', score: 90 },
-  ],
-  kpiValue: null,
-};
-
-describe('extractMultiSeries (single-series)', () => {
-  it('returns single dataset when no seriesField', () => {
-    const ss = extractMultiSeries(makeWidget(), DATA, CATALOG, {});
-    expect(ss).not.toBeNull();
-    expect(ss!.series.length).toBe(1);
-    expect(ss!.labels).toEqual(['SEO', 'Performance', 'Security']);
-    expect(ss!.series[0]!.values).toEqual([80, 65, 90]);
-  });
-
-  it('respects chartSort desc', () => {
-    const ss = extractMultiSeries(makeWidget(), DATA, CATALOG, { chartSort: 'desc' });
-    expect(ss!.labels[0]).toBe('Security');
-    expect(ss!.labels[2]).toBe('Performance');
-  });
-
-  it('respects chartMaxItems', () => {
-    const ss = extractMultiSeries(makeWidget(), DATA, CATALOG, { chartMaxItems: 2 });
-    expect(ss!.labels.length).toBe(2);
-  });
-
-  it('returns null when no rows and no scalar data', () => {
-    const emptyData: WidgetData = { raw: {}, rows: [], kpiValue: null };
-    const ss = extractMultiSeries(makeWidget(), emptyData, CATALOG, {});
-    expect(ss).toBeNull();
-  });
-});
-
-describe('extractMultiSeries (multi-series pivot)', () => {
-  const MULTI_DATA: WidgetData = {
-    raw: {},
-    rows: [
-      { category: 'SEO', month: 'Jan', score: 80 },
-      { category: 'SEO', month: 'Feb', score: 85 },
-      { category: 'Perf', month: 'Jan', score: 60 },
-      { category: 'Perf', month: 'Feb', score: 70 },
-    ],
-    kpiValue: null,
-  };
-
-  it('pivots rows into multiple series by seriesField', () => {
-    const widget = makeWidget({ xField: 'month', yField: 'score', seriesField: 'category' });
-    const ss = extractMultiSeries(widget, MULTI_DATA, CATALOG, {});
-    expect(ss).not.toBeNull();
-    expect(ss!.labels).toEqual(['Jan', 'Feb']);
-    expect(ss!.series.length).toBe(2);
-    const seoSeries = ss!.series.find((s) => s.key === 'SEO');
-    expect(seoSeries).toBeDefined();
-    expect(seoSeries!.values).toEqual([80, 85]);
-    const perfSeries = ss!.series.find((s) => s.key === 'Perf');
-    expect(perfSeries!.values).toEqual([60, 70]);
-  });
-
-  it('fills missing pivot cells with 0', () => {
-    const sparseData: WidgetData = {
-      raw: {},
-      rows: [
-        { category: 'SEO', month: 'Jan', score: 80 },
-        { category: 'Perf', month: 'Feb', score: 70 },
-      ],
-      kpiValue: null,
-    };
-    const widget = makeWidget({ xField: 'month', yField: 'score', seriesField: 'category' });
-    const ss = extractMultiSeries(widget, sparseData, CATALOG, {});
-    const seoSeries = ss!.series.find((s) => s.key === 'SEO')!;
-    const perfSeries = ss!.series.find((s) => s.key === 'Perf')!;
-    // SEO has no Feb => 0
-    expect(seoSeries.values[1]).toBe(0);
-    // Perf has no Jan => 0
-    expect(perfSeries.values[0]).toBe(0);
-  });
-});
diff --git a/web/src/lib/dashboard/viz/series.ts b/web/src/lib/dashboard/viz/series.ts
deleted file mode 100644
index b972c6ca..00000000
--- a/web/src/lib/dashboard/viz/series.ts
+++ /dev/null
@@ -1,168 +0,0 @@
-import type { Widget, WidgetOptions } from '@/lib/dashboard/types';
-import type { CatalogEntry } from '@/lib/dashboard/catalog/catalog';
-import { measures } from '@/lib/dashboard/catalog/catalog';
-import type { WidgetData } from '@/lib/dashboard/data/fetchWidgetData';
-
-// ─── legacy ChartSeries (single-series) ────────────────────────────────────
-export interface ChartSeries {
-  labels: string[];
-  values: number[];
-}
-
-// ─── SeriesSet (multi-series, normalized) ──────────────────────────────────
-export interface SeriesSet {
-  /** Category axis (xField values, one per tick). */
-  labels: string[];
-  /** 1..N datasets. Single-series has exactly one element. */
-  series: { key: string; label: string; values: number[] }[];
-  /** Whether the chart should render as stacked. */
-  stacked?: boolean;
-}
-
-// ─── internal helpers ───────────────────────────────────────────────────────
-
-const SYNTH_X = '_label';
-const SYNTH_Y = '_value';
-
-function getPath(obj: unknown, path: string): unknown {
-  return path.split('.').reduce<unknown>((cur, key) => {
-    if (cur == null || typeof cur !== 'object') return undefined;
-    return (cur as Record<string, unknown>)[key];
-  }, obj);
-}
-
-/** Human label for a (possibly nested) field path: last segment, underscores → spaces. */
-function fieldLabel(path: string): string {
-  const last = path.split('.').pop() ?? path;
-  return last.replace(/_/g, ' ');
-}
-
-/**
- * Turn scalar tool results (e.g. lighthouse scores object) into chartable rows.
- * Uses typed measure fields from catalog when available.
- */
-function scalarBreakdownRows(data: WidgetData, catalog: CatalogEntry | undefined): Record<string, unknown>[] {
-  const measureFields = catalog ? measures(catalog).map((f) => f.key) : Object.keys(data.raw);
-  return measureFields
-    .map((f) => ({ field: f, value: getPath(data.raw, f) }))
-    .filter((e) => typeof e.value === 'number')
-    .map((e) => ({ [SYNTH_X]: fieldLabel(e.field), [SYNTH_Y]: e.value as number }));
-}
-
-function sortAndSlice(
-  rows: Record<string, unknown>[],
-  yField: string,
-  opts: WidgetOptions,
-): Record<string, unknown>[] {
-  const sort = opts.chartSort ?? 'none';
-  if (sort !== 'none') {
-    rows = [...rows].sort((a, b) => {
-      const av = Number(a[yField] ?? 0);
-      const bv = Number(b[yField] ?? 0);
-      return sort === 'asc' ? av - bv : bv - av;
-    });
-  }
-  return rows.slice(0, opts.chartMaxItems ?? 20);
-}
-
-// ─── extractMultiSeries ─────────────────────────────────────────────────────
-
-/**
- * Extract a normalized SeriesSet from widget data.
- *
- * - When `binding.seriesField` is set: pivot rows by distinct series values
- *   (one dataset per value) with `xField` as category axis and `yField` as numeric value.
- * - When `seriesField` is unset: returns a single-series SeriesSet — drop-in
- *   replacement for `extractChartSeries`.
- */
-export function extractMultiSeries(
-  widget: Widget,
-  data: WidgetData,
-  catalog: CatalogEntry | undefined,
-  opts: WidgetOptions,
-): SeriesSet | null {
-  const binding = widget.binding;
-  let xField = binding.xField ?? defaultDimensionKey(catalog) ?? '';
-  let yField = binding.yField ?? defaultMeasureKey(catalog) ?? '';
-  const seriesField = binding.seriesField;
-
-  let rows = data.rows.length ? [...data.rows] : scalarBreakdownRows(data, catalog);
-  if (!rows.length) return null;
-
-  // Resolve synthetic fields when we only have scalar breakdown rows
-  if (!xField || !yField) {
-    if (rows[0][SYNTH_X] != null) {
-      xField = xField || SYNTH_X;
-      yField = yField || SYNTH_Y;
-    } else {
-      return null;
-    }
-  }
-
-  // ── Multi-series (group-by) ──────────────────────────────────────────────
-  if (seriesField) {
-    // Collect all distinct x-axis labels and series values
-    const allLabels = [...new Set(rows.map((r) => String(r[xField] ?? '')))];
-    const allSeriesKeys = [...new Set(rows.map((r) => String(r[seriesField] ?? '')))];
-
-    // Index data: labelValue -> seriesValue -> numeric y
-    const grid: Record<string, Record<string, number>> = {};
-    for (const row of rows) {
-      const lk = String(row[xField] ?? '');
-      const sk = String(row[seriesField] ?? '');
-      if (!grid[lk]) grid[lk] = {};
-      grid[lk][sk] = Number(row[yField] ?? 0);
-    }
-
-    const maxItems = opts.chartMaxItems ?? 20;
-    const labels = allLabels.slice(0, maxItems);
-    const series = allSeriesKeys.map((sk) => ({
-      key: sk,
-      label: sk,
-      values: labels.map((lk) => grid[lk]?.[sk] ?? 0),
-    }));
-
-    return { labels, series };
-  }
-
-  // ── Single-series ────────────────────────────────────────────────────────
-  rows = sortAndSlice(rows, yField, opts);
-  return {
-    labels: rows.map((r) => String(r[xField] ?? '')),
-    series: [
-      {
-        key: yField,
-        label: fieldLabel(yField),
-        values: rows.map((r) => Number(r[yField] ?? 0)),
-      },
-    ],
-  };
-}
-
-/** First dimension key in catalog, used as default xField. */
-function defaultDimensionKey(catalog: CatalogEntry | undefined): string | undefined {
-  if (!catalog) return undefined;
-  return catalog.fields.find((f) => f.role === 'dimension')?.key;
-}
-
-/** First measure key in catalog, used as default yField. */
-function defaultMeasureKey(catalog: CatalogEntry | undefined): string | undefined {
-  if (!catalog) return undefined;
-  return catalog.fields.find((f) => f.role === 'measure')?.key;
-}
-
-// ─── legacy wrapper (kept for non-chart uses) ────────────────────────────────
-
-/** @deprecated Use extractMultiSeries. */
-export function extractChartSeries(
-  widget: Widget,
-  data: WidgetData,
-  catalog: CatalogEntry | undefined,
-  opts: WidgetOptions,
-): ChartSeries | null {
-  const ss = extractMultiSeries(widget, data, catalog, opts);
-  if (!ss) return null;
-  const s0 = ss.series[0];
-  if (!s0) return null;
-  return { labels: ss.labels, values: s0.values };
-}
diff --git a/web/src/lib/dashboard/viz/types.ts b/web/src/lib/dashboard/viz/types.ts
deleted file mode 100644
index 15c89e18..00000000
--- a/web/src/lib/dashboard/viz/types.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import type { WidgetData } from '@/lib/dashboard/data/fetchWidgetData';
-import type { Widget, WidgetOptions } from '@/lib/dashboard/types';
-import type { CatalogEntry } from '@/lib/dashboard/catalog/catalog';
-
-export interface VizRenderProps {
-  widget: Widget;
-  data: WidgetData;
-  catalog: CatalogEntry | undefined;
-  opts: WidgetOptions;
-  /** Called when the user clicks a chart element to apply a cross-filter. */
-  onCrossFilter?: (field: string, value: string) => void;
-}
diff --git a/web/src/lib/dashboard/widgets/KpiWidget.tsx b/web/src/lib/dashboard/widgets/KpiWidget.tsx
new file mode 100644
index 00000000..7f64d237
--- /dev/null
+++ b/web/src/lib/dashboard/widgets/KpiWidget.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import type { QueryResult } from '@/lib/dashboard/engine/types';
+import type { VizOptions } from '@/lib/dashboard/engine/doc';
+import { formatValue, thresholdColor } from '@/lib/dashboard/charts/format';
+
+interface KpiWidgetProps {
+  result: QueryResult;
+  options?: VizOptions;
+  variant?: 'kpi' | 'stat-card';
+}
+
+export function KpiWidget({ result, options, variant = 'kpi' }: KpiWidgetProps) {
+  const value = result.scalar;
+  const label = result.series[0]?.label;
+  const color = thresholdColor(value, options?.thresholds);
+  return (
+    <div className="flex flex-col justify-center h-full px-1">
+      <div
+        className="font-bold leading-none tracking-tight text-bright"
+        style={{ color, fontSize: variant === 'stat-card' ? '1.75rem' : '2.5rem' }}
+      >
+        {formatValue(value, options?.format)}
+      </div>
+      {(options?.subtitle || (variant === 'stat-card' && label)) && (
+        <div className="mt-1 text-xs text-muted-foreground truncate">
+          {options?.subtitle ?? label}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/web/src/lib/dashboard/widgets/TableWidget.tsx b/web/src/lib/dashboard/widgets/TableWidget.tsx
new file mode 100644
index 00000000..0667f491
--- /dev/null
+++ b/web/src/lib/dashboard/widgets/TableWidget.tsx
@@ -0,0 +1,47 @@
+'use client';
+
+import type { QueryResult } from '@/lib/dashboard/engine/types';
+import type { VizOptions } from '@/lib/dashboard/engine/doc';
+
+interface TableWidgetProps {
+  result: QueryResult;
+  options?: VizOptions;
+}
+
+function cell(v: unknown): string {
+  if (v == null) return '';
+  if (typeof v === 'number') return Number.isInteger(v) ? v.toLocaleString() : v.toLocaleString(undefined, { maximumFractionDigits: 2 });
+  return String(v);
+}
+
+export function TableWidget({ result, options }: TableWidgetProps) {
+  const rows = result.table.slice(0, options?.tableLimit ?? 50);
+  if (!rows.length) {
+    return <div className="flex items-center justify-center h-full text-xs text-muted-foreground">No rows</div>;
+  }
+  const cols = Object.keys(rows[0]);
+  return (
+    <div className="h-full overflow-auto text-xs">
+      <table className="w-full border-collapse">
+        <thead className="sticky top-0 bg-brand-900/95 backdrop-blur">
+          <tr className="text-left text-muted-foreground">
+            {cols.map((c) => (
+              <th key={c} className="px-2 py-1 font-semibold border-b border-default whitespace-nowrap">{c}</th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((r, i) => (
+            <tr key={i} className="hover:bg-white/5">
+              {cols.map((c) => (
+                <td key={c} className="px-2 py-1 border-b border-default/40 truncate max-w-[260px]" title={cell(r[c])}>
+                  {cell(r[c])}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
diff --git a/web/src/lib/dashboard/widgets/TextWidget.tsx b/web/src/lib/dashboard/widgets/TextWidget.tsx
new file mode 100644
index 00000000..4832e83f
--- /dev/null
+++ b/web/src/lib/dashboard/widgets/TextWidget.tsx
@@ -0,0 +1,18 @@
+'use client';
+
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import type { VizOptions } from '@/lib/dashboard/engine/doc';
+
+export function TextWidget({ options }: { options?: VizOptions }) {
+  const text = options?.text ?? '';
+  return (
+    <div className="prose prose-invert prose-sm max-w-none h-full overflow-auto text-sm text-foreground">
+      {text.trim() ? (
+        <ReactMarkdown remarkPlugins={[remarkGfm]}>{text}</ReactMarkdown>
+      ) : (
+        <p className="text-muted-foreground">Empty text widget — edit to add content.</p>
+      )}
+    </div>
+  );
+}
diff --git a/web/src/lib/dashboard/widgets/WidgetBody.tsx b/web/src/lib/dashboard/widgets/WidgetBody.tsx
new file mode 100644
index 00000000..203c2bc3
--- /dev/null
+++ b/web/src/lib/dashboard/widgets/WidgetBody.tsx
@@ -0,0 +1,67 @@
+'use client';
+
+import { AlertTriangle } from 'lucide-react';
+import ChartRenderer from '@/lib/dashboard/charts/ChartRenderer';
+import { isEChartsViz } from '@/lib/dashboard/charts/optionBuilders';
+import { KpiWidget } from '@/lib/dashboard/widgets/KpiWidget';
+import { TableWidget } from '@/lib/dashboard/widgets/TableWidget';
+import { TextWidget } from '@/lib/dashboard/widgets/TextWidget';
+import { Skeleton } from '@/components/Skeleton';
+import type { Widget } from '@/lib/dashboard/engine/doc';
+import type { QueryResult } from '@/lib/dashboard/engine/types';
+import type { WidgetStatus } from '@/lib/dashboard/hooks/useWidgetQuery';
+import type { EChartsInstance } from '@/lib/dashboard/charts/echartsCore';
+
+interface WidgetBodyProps {
+  widget: Widget;
+  result: QueryResult;
+  status: WidgetStatus;
+  onSelect?: (category: string, seriesKey?: string) => void;
+  onChartReady?: (chart: EChartsInstance) => void;
+}
+
+export function WidgetBody({ widget, result, status, onSelect, onChartReady }: WidgetBodyProps) {
+  if (widget.viz === 'text') return <TextWidget options={widget.vizOptions} />;
+
+  if (status === 'loading') {
+    return (
+      <div className="space-y-2 p-1">
+        <Skeleton className="h-6 w-24" />
+        <Skeleton className="h-20 w-full" />
+      </div>
+    );
+  }
+  if (status === 'error') {
+    return (
+      <div className="flex items-center gap-1.5 text-amber-500 text-xs p-2">
+        <AlertTriangle className="h-3.5 w-3.5 shrink-0" />
+        This dataset isn’t available for the current report.
+      </div>
+    );
+  }
+
+  if (widget.viz === 'kpi' || widget.viz === 'stat-card') {
+    return <KpiWidget result={result} options={widget.vizOptions} variant={widget.viz} />;
+  }
+  if (widget.viz === 'table') {
+    return <TableWidget result={result} options={widget.vizOptions} />;
+  }
+
+  const empty = result.categories.length === 0 && result.series.every((s) => s.values.length === 0);
+  if (empty || !isEChartsViz(widget.viz)) {
+    return (
+      <div className="flex items-center justify-center h-full text-xs text-muted-foreground">
+        No data for this configuration
+      </div>
+    );
+  }
+  return (
+    <ChartRenderer
+      viz={widget.viz}
+      result={result}
+      options={widget.vizOptions}
+      onSelect={onSelect}
+      onReady={onChartReady}
+    />
+  );
+}
diff --git a/web/src/lib/dashboard/widgets/WidgetErrorBoundary.tsx b/web/src/lib/dashboard/widgets/WidgetErrorBoundary.tsx
new file mode 100644
index 00000000..5e59c500
--- /dev/null
+++ b/web/src/lib/dashboard/widgets/WidgetErrorBoundary.tsx
@@ -0,0 +1,39 @@
+'use client';
+
+import { Component, type ReactNode } from 'react';
+import { AlertTriangle } from 'lucide-react';
+
+interface Props {
+  children: ReactNode;
+  resetKey?: string;
+}
+interface State {
+  error: string | null;
+}
+
+/** Isolates a single widget's render errors so one bad widget can't blank the board. */
+export class WidgetErrorBoundary extends Component<Props, State> {
+  state: State = { error: null };
+
+  static getDerivedStateFromError(err: unknown): State {
+    return { error: err instanceof Error ? err.message : String(err) };
+  }
+
+  componentDidUpdate(prev: Props) {
+    if (prev.resetKey !== this.props.resetKey && this.state.error) {
+      this.setState({ error: null });
+    }
+  }
+
+  render() {
+    if (this.state.error) {
+      return (
+        <div className="flex items-center gap-1.5 text-amber-500 text-xs p-2">
+          <AlertTriangle className="h-3.5 w-3.5 shrink-0" />
+          <span className="break-words">Render error: {this.state.error}</span>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
diff --git a/web/src/lib/dashboard/widgets/WidgetFrame.tsx b/web/src/lib/dashboard/widgets/WidgetFrame.tsx
new file mode 100644
index 00000000..7b75ed86
--- /dev/null
+++ b/web/src/lib/dashboard/widgets/WidgetFrame.tsx
@@ -0,0 +1,135 @@
+'use client';
+
+import { useRef } from 'react';
+import { GripVertical, Settings, Copy, X, Download, Image as ImageIcon } from 'lucide-react';
+import Card from '@/components/Card';
+import { useWidgetQuery } from '@/lib/dashboard/hooks/useWidgetQuery';
+import { WidgetBody } from '@/lib/dashboard/widgets/WidgetBody';
+import { WidgetErrorBoundary } from '@/lib/dashboard/widgets/WidgetErrorBoundary';
+import { getDataset } from '@/lib/dashboard/engine/datasets';
+import { isEChartsViz } from '@/lib/dashboard/charts/optionBuilders';
+import { downloadCsv } from '@/lib/dashboard/export/csv';
+import { chartToPng } from '@/lib/dashboard/export/png';
+import type { Widget } from '@/lib/dashboard/engine/doc';
+import type { QuerySpec } from '@/lib/dashboard/engine/types';
+import type { EChartsInstance } from '@/lib/dashboard/charts/echartsCore';
+
+export interface WidgetFrameProps {
+  widget: Widget;
+  isEditing: boolean;
+  selected?: boolean;
+  /** Effective query with board interactions (slicers/cross-filter/drill) folded in. */
+  specOverride?: QuerySpec;
+  /** Active drill path + drill-up handler. */
+  drill?: { path: { field: string; value: string }[]; onUp: () => void };
+  onEdit?: (id: string) => void;
+  onRemove?: (id: string) => void;
+  onDuplicate?: (id: string) => void;
+  /** Cross-filter: a category was clicked. */
+  onSelect?: (widgetId: string, category: string, seriesKey?: string) => void;
+}
+
+export function WidgetFrame({
+  widget,
+  isEditing,
+  selected,
+  specOverride,
+  drill,
+  onEdit,
+  onRemove,
+  onDuplicate,
+  onSelect,
+}: WidgetFrameProps) {
+  const { result, status } = useWidgetQuery(widget.datasetId, specOverride ?? widget.query);
+  const chartRef = useRef<EChartsInstance | null>(null);
+  const datasetLabel = getDataset(widget.datasetId)?.label ?? widget.datasetId;
+  const title = widget.title || datasetLabel;
+
+  return (
+    <Card
+      padding="tight"
+      className={`h-full flex flex-col min-h-0 overflow-hidden relative group/widget ${
+        selected ? 'ring-2 ring-blue-500/70' : ''
+      }`}
+    >
+      <div className="flex items-start justify-between gap-2 mb-1.5 shrink-0">
+        <div className="flex items-center gap-1.5 min-w-0">
+          {isEditing && (
+            <span className="drag-handle cursor-grab active:cursor-grabbing shrink-0 text-muted-foreground">
+              <GripVertical className="h-4 w-4" />
+            </span>
+          )}
+          <p className="text-xs font-bold uppercase tracking-wider text-muted-foreground truncate" title={title}>
+            {title}
+          </p>
+        </div>
+        <div className="flex items-center gap-1 shrink-0 opacity-0 group-hover/widget:opacity-100 transition-opacity">
+          {widget.viz !== 'text' && (
+            <button
+              onClick={() => downloadCsv(title, result.table)}
+              title="Export CSV"
+              className="p-0.5 rounded hover:bg-white/10 text-muted-foreground hover:text-bright transition-colors"
+            >
+              <Download className="h-3.5 w-3.5" />
+            </button>
+          )}
+          {isEChartsViz(widget.viz) && (
+            <button
+              onClick={() => chartRef.current && chartToPng(chartRef.current, title)}
+              title="Export PNG"
+              className="p-0.5 rounded hover:bg-white/10 text-muted-foreground hover:text-bright transition-colors"
+            >
+              <ImageIcon className="h-3.5 w-3.5" />
+            </button>
+          )}
+          {isEditing && onEdit && (
+            <button
+              onClick={() => onEdit(widget.id)}
+              title="Configure widget"
+              className="p-0.5 rounded hover:bg-white/10 text-muted-foreground hover:text-bright transition-colors"
+            >
+              <Settings className="h-3.5 w-3.5" />
+            </button>
+          )}
+          {isEditing && onDuplicate && (
+            <button
+              onClick={() => onDuplicate(widget.id)}
+              title="Duplicate widget"
+              className="p-0.5 rounded hover:bg-white/10 text-muted-foreground hover:text-bright transition-colors"
+            >
+              <Copy className="h-3.5 w-3.5" />
+            </button>
+          )}
+          {isEditing && onRemove && (
+            <button
+              onClick={() => onRemove(widget.id)}
+              title="Remove widget"
+              className="p-0.5 rounded hover:bg-red-500/20 text-muted-foreground hover:text-red-400 transition-colors"
+            >
+              <X className="h-3.5 w-3.5" />
+            </button>
+          )}
+        </div>
+      </div>
+      {drill && drill.path.length > 0 && (
+        <div className="flex items-center gap-1.5 mb-1 text-[10px] text-muted-foreground shrink-0">
+          <button onClick={drill.onUp} className="px-1 rounded border border-default hover:text-bright hover:border-blue-500/50" title="Drill up">↑</button>
+          <span className="truncate">{drill.path.map((p) => p.value).join(' › ')}</span>
+        </div>
+      )}
+      <div className="flex-1 min-h-0 overflow-hidden">
+        <WidgetErrorBoundary resetKey={`${widget.viz}:${widget.datasetId}`}>
+          <WidgetBody
+            widget={widget}
+            result={result}
+            status={status}
+            onSelect={onSelect ? (cat, sk) => onSelect(widget.id, cat, sk) : undefined}
+            onChartReady={(chart) => {
+              chartRef.current = chart;
+            }}
+          />
+        </WidgetErrorBoundary>
+      </div>
+    </Card>
+  );
+}
diff --git a/web/src/lib/dashboardCatalog.test.ts b/web/src/lib/dashboardCatalog.test.ts
deleted file mode 100644
index 530a6f8f..00000000
--- a/web/src/lib/dashboardCatalog.test.ts
+++ /dev/null
@@ -1,145 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import {
-  DASHBOARD_CATALOG,
-  catalogEntry,
-  catalogBySection,
-  catalogBySectionSections,
-  dimensions,
-  measures,
-  fieldKeys,
-  defaultDimension,
-  defaultMeasure,
-} from '@/lib/dashboardCatalog';
-
-describe('DASHBOARD_CATALOG integrity', () => {
-  it('has at least one entry', () => {
-    expect(DASHBOARD_CATALOG.length).toBeGreaterThan(0);
-  });
-
-  it('every entry has a non-empty toolName, label, section, description, and compatibleViz', () => {
-    for (const e of DASHBOARD_CATALOG) {
-      expect(e.toolName.length, `toolName empty for ${e.label}`).toBeGreaterThan(0);
-      expect(e.label.length, `label empty for ${e.toolName}`).toBeGreaterThan(0);
-      expect(e.section.length, `section empty for ${e.toolName}`).toBeGreaterThan(0);
-      expect(e.description.length, `description empty for ${e.toolName}`).toBeGreaterThan(0);
-      expect(e.compatibleViz.length, `compatibleViz empty for ${e.toolName}`).toBeGreaterThan(0);
-    }
-  });
-
-  it('toolNames are unique', () => {
-    const names = DASHBOARD_CATALOG.map((e) => e.toolName);
-    expect(new Set(names).size).toBe(names.length);
-  });
-});
-
-describe('catalogEntry', () => {
-  it('returns the matching entry by toolName', () => {
-    const entry = catalogEntry('get_report_summary');
-    expect(entry).toBeDefined();
-    expect(entry?.label).toBe('Audit summary');
-    expect(entry?.section).toBe('Overview');
-  });
-
-  it('returns undefined for an unknown tool', () => {
-    expect(catalogEntry('nonexistent_tool_xyz')).toBeUndefined();
-  });
-
-  it('returns the entry with expected compatibleViz', () => {
-    const entry = catalogEntry('get_category_scores');
-    expect(entry?.compatibleViz).toContain('bar');
-    expect(entry?.compatibleViz).toContain('table');
-  });
-});
-
-describe('catalogBySectionSections', () => {
-  it('returns a non-empty array of section strings', () => {
-    const sections = catalogBySectionSections();
-    expect(sections.length).toBeGreaterThan(0);
-    for (const s of sections) {
-      expect(typeof s).toBe('string');
-      expect(s.length).toBeGreaterThan(0);
-    }
-  });
-
-  it('contains no duplicate sections', () => {
-    const sections = catalogBySectionSections();
-    expect(new Set(sections).size).toBe(sections.length);
-  });
-
-  it('includes "Overview" and "Performance"', () => {
-    const sections = catalogBySectionSections();
-    expect(sections).toContain('Overview');
-    expect(sections).toContain('Performance');
-  });
-});
-
-describe('catalog field helpers', () => {
-  it('dimensions() returns only dimension-role fields', () => {
-    const entry = catalogEntry('get_category_scores')!;
-    const dims = dimensions(entry);
-    expect(dims.length).toBeGreaterThan(0);
-    for (const f of dims) expect(f.role).toBe('dimension');
-  });
-
-  it('measures() returns only measure-role fields', () => {
-    const entry = catalogEntry('get_category_scores')!;
-    const ms = measures(entry);
-    expect(ms.length).toBeGreaterThan(0);
-    for (const f of ms) expect(f.role).toBe('measure');
-  });
-
-  it('dimensions + measures cover all fieldKeys', () => {
-    const entry = catalogEntry('get_category_scores')!;
-    const all = fieldKeys(entry).sort();
-    const split = [...dimensions(entry), ...measures(entry)].map((f) => f.key).sort();
-    expect(split).toEqual(all);
-  });
-
-  it('defaultDimension returns first dimension key', () => {
-    const entry = catalogEntry('get_category_scores')!;
-    expect(defaultDimension(entry)).toBe(dimensions(entry)[0]?.key);
-  });
-
-  it('defaultMeasure returns first measure key', () => {
-    const entry = catalogEntry('get_category_scores')!;
-    expect(defaultMeasure(entry)).toBe(measures(entry)[0]?.key);
-  });
-
-  it('every DASHBOARD_CATALOG entry has at least one field', () => {
-    for (const e of DASHBOARD_CATALOG) {
-      expect(e.fields.length, `${e.toolName} must have at least one field`).toBeGreaterThan(0);
-    }
-  });
-
-  it('catalog entries supporting charts have at least one measure', () => {
-    const chartViz = ['bar', 'horizontal-bar', 'ranked-bar', 'line', 'area', 'pie', 'doughnut', 'stacked-bar'];
-    for (const e of DASHBOARD_CATALOG) {
-      if (e.compatibleViz.some((v) => chartViz.includes(v))) {
-        expect(measures(e).length, `${e.toolName} has chart viz but no measures`).toBeGreaterThan(0);
-      }
-    }
-  });
-});
-
-describe('catalogBySection', () => {
-  it('groups entries under their section', () => {
-    const bySection = catalogBySection();
-    expect(bySection['Overview']).toBeDefined();
-    expect(bySection['Overview'].length).toBeGreaterThan(0);
-    for (const entry of bySection['Overview']) {
-      expect(entry.section).toBe('Overview');
-    }
-  });
-
-  it('sections in the map match catalogBySectionSections()', () => {
-    const sections = catalogBySectionSections();
-    const bySection = catalogBySection();
-    expect(Object.keys(bySection).sort()).toEqual([...sections].sort());
-  });
-
-  it('total entries across all sections equals DASHBOARD_CATALOG length', () => {
-    const bySection = catalogBySection();
-    const total = Object.values(bySection).reduce((sum, arr) => sum + arr.length, 0);
-    expect(total).toBe(DASHBOARD_CATALOG.length);
-  });
-});
diff --git a/web/src/lib/dashboardCatalog.ts b/web/src/lib/dashboardCatalog.ts
deleted file mode 100644
index da0f3f84..00000000
--- a/web/src/lib/dashboardCatalog.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from '@/lib/dashboard/catalog/catalog';
diff --git a/web/src/lib/fetchDashboardData.test.ts b/web/src/lib/fetchDashboardData.test.ts
deleted file mode 100644
index 4aef551a..00000000
--- a/web/src/lib/fetchDashboardData.test.ts
+++ /dev/null
@@ -1,264 +0,0 @@
-import { describe, expect, it, vi, beforeEach } from 'vitest';
-import { fetchWidgetData, clearWidgetDataCache } from '@/lib/fetchDashboardData';
-import type { WidgetBinding } from '@/types/dashboard';
-
-vi.mock('@/lib/fetchAuditTool', () => ({
-  fetchAuditTool: vi.fn(),
-}));
-
-import { fetchAuditTool } from '@/lib/fetchAuditTool';
-const mockFetch = fetchAuditTool as ReturnType<typeof vi.fn>;
-
-const PROPERTY_ID = 1;
-const REPORT_ID = 10;
-
-function binding(overrides: Partial<WidgetBinding> = {}): WidgetBinding {
-  return {
-    source: 'audit-tool',
-    toolName: 'get_report_summary',
-    ...overrides,
-  };
-}
-
-beforeEach(() => {
-  mockFetch.mockReset();
-  // Reset the result cache so each test starts cold (cache keys are tool+property+report+args).
-  clearWidgetDataCache();
-});
-
-// ── getPath / select ─────────────────────────────────────────────────────────
-
-describe('fetchWidgetData – select (getPath)', () => {
-  it('uses the entire result when select is absent', async () => {
-    mockFetch.mockResolvedValue({ score: 78, total_pages: 200 });
-    const result = await fetchWidgetData(binding({ valueField: 'score' }), PROPERTY_ID, REPORT_ID);
-    expect(result.kpiValue).toBe(78);
-    expect(result.raw).toEqual({ score: 78, total_pages: 200 });
-  });
-
-  it('extracts a nested value via a dot-path select', async () => {
-    mockFetch.mockResolvedValue({ meta: { health_score: 91 } });
-    const result = await fetchWidgetData(
-      binding({ select: 'meta', valueField: 'health_score' }),
-      PROPERTY_ID,
-      REPORT_ID,
-    );
-    expect(result.kpiValue).toBe(91);
-  });
-
-  it('returns null kpiValue when the selected path does not exist', async () => {
-    mockFetch.mockResolvedValue({ other: 1 });
-    const result = await fetchWidgetData(
-      binding({ select: 'missing_path', valueField: 'score' }),
-      PROPERTY_ID,
-      REPORT_ID,
-    );
-    expect(result.kpiValue).toBeNull();
-  });
-});
-
-// ── asRows ───────────────────────────────────────────────────────────────────
-
-describe('fetchWidgetData – rows extraction (asRows)', () => {
-  it('treats a top-level array result as rows', async () => {
-    const rows = [{ url: '/a', score: 80 }, { url: '/b', score: 90 }];
-    mockFetch.mockResolvedValue(rows);
-    const result = await fetchWidgetData(binding(), PROPERTY_ID, REPORT_ID);
-    expect(result.rows).toEqual(rows);
-  });
-
-  it('follows select to find a nested array', async () => {
-    const pages = [{ url: '/a', lcp: 2.1 }, { url: '/b', lcp: 3.5 }];
-    mockFetch.mockResolvedValue({ pages, total: 2 });
-    const result = await fetchWidgetData(binding({ select: 'pages' }), PROPERTY_ID, REPORT_ID);
-    expect(result.rows).toEqual(pages);
-  });
-
-  it('auto-discovers the first array value on an object result', async () => {
-    const issues = [{ id: 1 }, { id: 2 }];
-    mockFetch.mockResolvedValue({ meta: 'info', issues });
-    const result = await fetchWidgetData(binding(), PROPERTY_ID, REPORT_ID);
-    expect(result.rows).toEqual(issues);
-  });
-
-  it('returns empty rows when the result has no array', async () => {
-    mockFetch.mockResolvedValue({ score: 78 });
-    const result = await fetchWidgetData(binding(), PROPERTY_ID, REPORT_ID);
-    expect(result.rows).toEqual([]);
-  });
-});
-
-// ── aggregate ────────────────────────────────────────────────────────────────
-
-describe('fetchWidgetData – aggregate', () => {
-  const rows = [
-    { page: '/a', size: 100 },
-    { page: '/b', size: 200 },
-    { page: '/c', size: 300 },
-  ];
-
-  beforeEach(() => {
-    mockFetch.mockResolvedValue(rows);
-  });
-
-  it('sum aggregates numeric yField across rows', async () => {
-    const result = await fetchWidgetData(
-      binding({ aggregate: 'sum', yField: 'size' }),
-      PROPERTY_ID,
-      REPORT_ID,
-    );
-    expect(result.kpiValue).toBe(600);
-  });
-
-  it('avg aggregates correctly', async () => {
-    const result = await fetchWidgetData(
-      binding({ aggregate: 'avg', yField: 'size' }),
-      PROPERTY_ID,
-      REPORT_ID,
-    );
-    expect(result.kpiValue).toBe(200);
-  });
-
-  it('count returns the number of rows', async () => {
-    const result = await fetchWidgetData(
-      binding({ aggregate: 'count', yField: 'size' }),
-      PROPERTY_ID,
-      REPORT_ID,
-    );
-    expect(result.kpiValue).toBe(3);
-  });
-
-  it('max returns the largest value', async () => {
-    const result = await fetchWidgetData(
-      binding({ aggregate: 'max', yField: 'size' }),
-      PROPERTY_ID,
-      REPORT_ID,
-    );
-    expect(result.kpiValue).toBe(300);
-  });
-
-  it('min returns the smallest value', async () => {
-    const result = await fetchWidgetData(
-      binding({ aggregate: 'min', yField: 'size' }),
-      PROPERTY_ID,
-      REPORT_ID,
-    );
-    expect(result.kpiValue).toBe(100);
-  });
-
-  it('aggregate is skipped when op is "none"', async () => {
-    const result = await fetchWidgetData(
-      binding({ aggregate: 'none', yField: 'size' }),
-      PROPERTY_ID,
-      REPORT_ID,
-    );
-    expect(result.kpiValue).toBeNull();
-  });
-
-  it('valueField takes precedence over aggregate', async () => {
-    mockFetch.mockResolvedValue({ score: 55, data: rows });
-    const result = await fetchWidgetData(
-      binding({ valueField: 'score', aggregate: 'sum', yField: 'size' }),
-      PROPERTY_ID,
-      REPORT_ID,
-    );
-    expect(result.kpiValue).toBe(55);
-  });
-});
-
-// ── kpiValue from scalar valueField ──────────────────────────────────────────
-
-describe('fetchWidgetData – kpiValue from scalar valueField', () => {
-  it('returns a numeric value directly from the result', async () => {
-    mockFetch.mockResolvedValue({ health_score: 87 });
-    const result = await fetchWidgetData(
-      binding({ valueField: 'health_score' }),
-      PROPERTY_ID,
-      REPORT_ID,
-    );
-    expect(result.kpiValue).toBe(87);
-  });
-
-  it('returns a string value as-is', async () => {
-    mockFetch.mockResolvedValue({ grade: 'A' });
-    const result = await fetchWidgetData(
-      binding({ valueField: 'grade' }),
-      PROPERTY_ID,
-      REPORT_ID,
-    );
-    expect(result.kpiValue).toBe('A');
-  });
-
-  it('returns null when valueField key is absent from result', async () => {
-    mockFetch.mockResolvedValue({ other_key: 42 });
-    const result = await fetchWidgetData(
-      binding({ valueField: 'missing' }),
-      PROPERTY_ID,
-      REPORT_ID,
-    );
-    expect(result.kpiValue).toBeNull();
-  });
-
-  it('resolves a top-level valueField even when select points at a rows array', async () => {
-    // A single tool feeding both a chart (rows via select) and a scalar KPI.
-    mockFetch.mockResolvedValue({ total_violations: 7, violations_by_rule: [{ rule_id: 'x', count: 7 }] });
-    const result = await fetchWidgetData(
-      binding({ select: 'violations_by_rule', valueField: 'total_violations' }),
-      PROPERTY_ID,
-      REPORT_ID,
-    );
-    expect(result.rows).toEqual([{ rule_id: 'x', count: 7 }]);
-    expect(result.kpiValue).toBe(7);
-  });
-
-  it('resolves a nested dot-path valueField from the raw result', async () => {
-    mockFetch.mockResolvedValue({ summary: { category_scores: { performance: 88 } } });
-    const result = await fetchWidgetData(
-      binding({ valueField: 'summary.category_scores.performance' }),
-      PROPERTY_ID,
-      REPORT_ID,
-    );
-    expect(result.kpiValue).toBe(88);
-  });
-});
-
-// ── in-flight dedup ───────────────────────────────────────────────────────────
-
-describe('fetchWidgetData – in-flight dedup', () => {
-  it('calls fetchAuditTool only once for concurrent identical requests', async () => {
-    mockFetch.mockResolvedValue({ score: 70 });
-    const b = binding({ toolName: 'get_dedup_test' });
-    await Promise.all([
-      fetchWidgetData(b, PROPERTY_ID, REPORT_ID),
-      fetchWidgetData(b, PROPERTY_ID, REPORT_ID),
-      fetchWidgetData(b, PROPERTY_ID, REPORT_ID),
-    ]);
-    expect(mockFetch).toHaveBeenCalledTimes(1);
-  });
-
-  it('serves a cached result for a second sequential request within the TTL', async () => {
-    mockFetch.mockResolvedValue({ score: 70 });
-    const b = binding({ toolName: 'get_seq_test' });
-    await fetchWidgetData(b, PROPERTY_ID, REPORT_ID);
-    await fetchWidgetData(b, PROPERTY_ID, REPORT_ID);
-    expect(mockFetch).toHaveBeenCalledTimes(1);
-  });
-
-  it('refetches after the cache is cleared', async () => {
-    mockFetch.mockResolvedValue({ score: 70 });
-    const b = binding({ toolName: 'get_clear_test' });
-    await fetchWidgetData(b, PROPERTY_ID, REPORT_ID);
-    clearWidgetDataCache();
-    await fetchWidgetData(b, PROPERTY_ID, REPORT_ID);
-    expect(mockFetch).toHaveBeenCalledTimes(2);
-  });
-});
-
-// ── error propagation ─────────────────────────────────────────────────────────
-
-describe('fetchWidgetData – error propagation', () => {
-  it('re-throws errors from fetchAuditTool', async () => {
-    mockFetch.mockRejectedValue(new Error('tool failed'));
-    await expect(fetchWidgetData(binding(), PROPERTY_ID, REPORT_ID)).rejects.toThrow('tool failed');
-  });
-});
diff --git a/web/src/lib/fetchDashboardData.ts b/web/src/lib/fetchDashboardData.ts
deleted file mode 100644
index 5823ed05..00000000
--- a/web/src/lib/fetchDashboardData.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from '@/lib/dashboard/data/fetchWidgetData';
diff --git a/web/src/server/chatDb.ts b/web/src/server/chatDb.ts
index fe64ee5c..41fdc748 100644
--- a/web/src/server/chatDb.ts
+++ b/web/src/server/chatDb.ts
@@ -107,24 +107,31 @@ export async function appendChatMessage(
   },
 ): Promise<number> {
   return withDb(async (client) => {
-    const cur = await client.query<{ id: string }>(
-      `INSERT INTO chat_messages
-         (session_id, role, content, tool_name, tool_args, tool_result, created_at)
-       VALUES ($1, $2, $3, $4, $5, $6, now()) RETURNING id`,
-      [
-        sessionId,
-        role,
-        content,
-        meta?.toolName ?? null,
-        meta?.toolArgs != null ? JSON.stringify(meta.toolArgs) : null,
-        meta?.toolResult != null ? JSON.stringify(meta.toolResult) : null,
-      ],
-    );
-    await client.query(
-      `UPDATE chat_sessions SET updated_at = now() WHERE id = $1`,
-      [sessionId],
-    );
-    return Number(cur.rows[0]?.id);
+    await client.query('BEGIN');
+    try {
+      const cur = await client.query<{ id: string }>(
+        `INSERT INTO chat_messages
+           (session_id, role, content, tool_name, tool_args, tool_result, created_at)
+         VALUES ($1, $2, $3, $4, $5, $6, now()) RETURNING id`,
+        [
+          sessionId,
+          role,
+          content,
+          meta?.toolName ?? null,
+          meta?.toolArgs != null ? JSON.stringify(meta.toolArgs) : null,
+          meta?.toolResult != null ? JSON.stringify(meta.toolResult) : null,
+        ],
+      );
+      await client.query(
+        `UPDATE chat_sessions SET updated_at = now() WHERE id = $1`,
+        [sessionId],
+      );
+      await client.query('COMMIT');
+      return Number(cur.rows[0]?.id);
+    } catch (e) {
+      await client.query('ROLLBACK');
+      throw e;
+    }
   });
 }
 
diff --git a/web/src/server/dashboardsDb.ts b/web/src/server/dashboardsDb.ts
index 8b3258eb..dc1e8a12 100644
--- a/web/src/server/dashboardsDb.ts
+++ b/web/src/server/dashboardsDb.ts
@@ -26,7 +26,7 @@ function toRow(r: DbRow): DashboardRow {
     id: r.id,
     propertyId: r.property_id,
     name: r.name,
-    layoutJson: r.layout_json ?? { version: 1, widgets: [] },
+    layoutJson: r.layout_json ?? { version: 2, widgets: [], slicers: [] },
     isDefault: r.is_default,
     createdAt: r.created_at,
     updatedAt: r.updated_at,
diff --git a/web/src/server/llmConfig.test.ts b/web/src/server/llmConfig.test.ts
new file mode 100644
index 00000000..b1df4dda
--- /dev/null
+++ b/web/src/server/llmConfig.test.ts
@@ -0,0 +1,50 @@
+import { describe, it, expect } from 'vitest';
+import { maskLlmStateForClient } from '@/server/llmConfig';
+
+describe('maskLlmStateForClient', () => {
+  it('masks the legacy llm_api_key AND every per-provider key (regression: H1)', () => {
+    const masked = maskLlmStateForClient({
+      llm_provider: 'openai',
+      llm_api_key: 'sk-secret-legacy-1234',
+      llm_api_key_openai: 'sk-openai-abcd1234',
+      llm_api_key_gemini: 'gem-secret-wxyz5678',
+      llm_api_key_anthropic: 'sk-ant-secret-7890',
+      llm_api_key_groq: 'gsk_secret_4321',
+    });
+
+    expect(masked.llm_api_key).toBe('••••1234');
+    expect(masked.llm_api_key_openai).toBe('••••1234');
+    expect(masked.llm_api_key_gemini).toBe('••••5678');
+    expect(masked.llm_api_key_anthropic).toBe('••••7890');
+    expect(masked.llm_api_key_groq).toBe('••••4321');
+
+    // The masked flag is set so the client knows a value is stored.
+    expect(masked.llm_api_key_openai_masked).toBe(true);
+
+    // No plaintext secret material survives masking.
+    for (const value of Object.values(masked)) {
+      expect(String(value)).not.toContain('secret');
+      expect(String(value)).not.toContain('sk-openai');
+    }
+
+    // Non-secret fields are untouched.
+    expect(masked.llm_provider).toBe('openai');
+  });
+
+  it('leaves empty/absent secrets empty and unflagged', () => {
+    const masked = maskLlmStateForClient({
+      llm_provider: 'none',
+      llm_api_key: '',
+      llm_api_key_openai: '',
+    });
+    expect(masked.llm_api_key).toBe('');
+    expect(masked.llm_api_key_openai).toBe('');
+    expect(masked.llm_api_key_masked).toBeUndefined();
+    expect(masked.llm_api_key_openai_masked).toBeUndefined();
+  });
+
+  it('does not double-mask an already-masked value', () => {
+    const masked = maskLlmStateForClient({ llm_api_key_openai: '••••1234' });
+    expect(masked.llm_api_key_openai).toBe('••••1234');
+  });
+});
diff --git a/web/src/server/llmConfig.ts b/web/src/server/llmConfig.ts
index 61cc79b5..bcf7fcc6 100644
--- a/web/src/server/llmConfig.ts
+++ b/web/src/server/llmConfig.ts
@@ -7,7 +7,6 @@ import {
   ALL_LLM_SCHEMA_KEYS,
   getLlmFieldByKey,
   buildInitialLlmConfigState,
-  maskLlmSecretForClient,
   isLlmSecretKey,
 } from '@/lib/llmConfigSchema';
 import {
@@ -96,11 +95,24 @@ function writeSecretEntry(
   if (entries[key]) secretKeys.add(key);
 }
 
+/** Mask any secret value (generic provider keys + the legacy llm_api_key). */
+function maskSecretValue(value: string | boolean | undefined): string {
+  if (!value || String(value).trim() === '') return '';
+  const s = String(value);
+  if (s.startsWith('••••')) return s;
+  if (s.length <= 4) return '••••';
+  return `••••${s.slice(-4)}`;
+}
+
 export function maskLlmStateForClient(state: LlmConfigState): LlmConfigState {
   const out: LlmConfigState = { ...state };
   for (const key of Object.keys(out)) {
-    if (isLlmSecretKey(key)) {
-      out[key] = maskLlmSecretForClient(key, out[key]);
+    // Mask BOTH the legacy llm_api_key and every per-provider key
+    // (llm_api_key_openai/_gemini/_anthropic/_groq). The latter were
+    // previously returned in plaintext because isLlmSecretKey only covers
+    // llm_api_key, even though the save path treats them as secrets.
+    if (isLlmSecretKey(key) || isLlmProviderApiKeyField(key)) {
+      out[key] = maskSecretValue(out[key]);
       if (out[key]) out[`${key}_masked`] = true;
     }
   }
diff --git a/web/src/types/dashboard.test.ts b/web/src/types/dashboard.test.ts
index 6cc020a0..ed5c906f 100644
--- a/web/src/types/dashboard.test.ts
+++ b/web/src/types/dashboard.test.ts
@@ -2,18 +2,23 @@ import { describe, expect, it } from 'vitest';
 import { emptyDashboard, newWidgetId } from '@/types/dashboard';
 
 describe('emptyDashboard', () => {
-  it('returns version 1 with an empty widget array', () => {
+  it('returns a v2 doc with empty widgets + slicers', () => {
     const d = emptyDashboard();
-    expect(d.version).toBe(1);
+    expect(d.version).toBe(2);
     expect(d.widgets).toEqual([]);
+    expect(d.slicers).toEqual([]);
   });
 
   it('returns a fresh object on each call (no shared reference)', () => {
     const a = emptyDashboard();
     const b = emptyDashboard();
     a.widgets.push({
-      id: 'w-1', title: 'test', viz: 'kpi', layout: { x: 0, y: 0, w: 4, h: 2 },
-      binding: { source: 'audit-tool', toolName: 'get_report_summary' },
+      id: 'w-1',
+      title: 'test',
+      datasetId: 'summary',
+      viz: 'kpi',
+      query: { measures: [{ field: 'health_score', agg: 'max' }] },
+      layout: { x: 0, y: 0, w: 3, h: 2 },
     });
     expect(b.widgets).toHaveLength(0);
   });
@@ -30,7 +35,6 @@ describe('newWidgetId', () => {
   });
 
   it('only contains alphanumeric and hyphen characters', () => {
-    const id = newWidgetId();
-    expect(id).toMatch(/^[a-z0-9-]+$/);
+    expect(newWidgetId()).toMatch(/^[a-z0-9-]+$/);
   });
 });
diff --git a/web/src/views/Chat.tsx b/web/src/views/Chat.tsx
index a8d0e798..b5fa04af 100644
--- a/web/src/views/Chat.tsx
+++ b/web/src/views/Chat.tsx
@@ -77,6 +77,7 @@ export default function ChatPage() {
   const [urlSyncEnabled, setUrlSyncEnabled] = useState(false);
   const messagesLoadGen = useRef(0);
   const sessionRestoredForProperty = useRef<number | null>(null);
+  const abortRef = useRef<AbortController | null>(null);
 
   const searchKey = searchParams.toString();
 
@@ -183,11 +184,11 @@ export default function ChatPage() {
     }
   }, []);
 
-  const loadMessages = useCallback(async (sid: number) => {
+  const loadMessages = useCallback(async (sid: number, pid: number) => {
     const gen = ++messagesLoadGen.current;
     setLoadingMessages(true);
     try {
-      const res = await fetch(apiUrl(`/chat/sessions/${sid}/messages`));
+      const res = await fetch(apiUrl(`/chat/sessions/${sid}/messages?propertyId=${pid}`));
       if (!res.ok) return;
       const data = (await res.json()) as {
         messages?: Array<{
@@ -287,9 +288,9 @@ export default function ChatPage() {
 
   useEffect(() => {
     if (busy) return;
-    if (sessionId) void loadMessages(sessionId);
-    else setMessages([]);
-  }, [sessionId, loadMessages, busy]);
+    if (sessionId && propertyId) void loadMessages(sessionId, propertyId);
+    else if (!sessionId) setMessages([]);
+  }, [sessionId, propertyId, loadMessages, busy]);
 
   useEffect(() => {
     if (!busy || !startedAt) {
@@ -302,6 +303,9 @@ export default function ChatPage() {
     return () => window.clearInterval(id);
   }, [busy, startedAt]);
 
+  // Abort any in-flight chat stream when the page unmounts.
+  useEffect(() => () => abortRef.current?.abort(), []);
+
   const createSession = async (): Promise<number | null> => {
     if (!propertyId) return null;
     const res = await fetch(apiUrl('/chat/sessions'), {
@@ -352,11 +356,16 @@ export default function ChatPage() {
       { id: assistantId, role: 'assistant', content: '', streaming: true, toolActivity: [] },
     ]);
 
+    abortRef.current?.abort();
+    const controller = new AbortController();
+    abortRef.current = controller;
+
     try {
       const res = await fetch(apiUrl('/chat'), {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ sessionId: sid, propertyId, message: text }),
+        signal: controller.signal,
       });
 
       if (!res.ok) {
@@ -483,9 +492,15 @@ export default function ChatPage() {
           toolActivity: tools,
         });
       }
-      if (sid) await loadMessages(sid);
+      if (sid && propertyId) await loadMessages(sid, propertyId);
       if (propertyId) await loadSessions(propertyId);
     } catch (e) {
+      // Aborted (session switch / delete / unmount): not a user-facing error.
+      // The message-load effect re-runs once busy clears and restores the
+      // correct session, so leave the assistant placeholder alone here.
+      if (e instanceof DOMException && e.name === 'AbortError') {
+        return;
+      }
       const msg = e instanceof Error ? e.message : String(e);
       setError(msg);
       setMessages((prev) =>
@@ -496,6 +511,7 @@ export default function ChatPage() {
         ),
       );
     } finally {
+      if (abortRef.current === controller) abortRef.current = null;
       setBusy(false);
       setActivityText('');
       setStartedAt(null);
@@ -503,12 +519,14 @@ export default function ChatPage() {
   };
 
   const handleDeleteSession = async (id: number) => {
-    await fetch(apiUrl(`/chat/sessions/${id}`), { method: 'DELETE' });
+    if (!propertyId) return;
+    if (sessionId === id) abortRef.current?.abort();
+    await fetch(apiUrl(`/chat/sessions/${id}?propertyId=${propertyId}`), { method: 'DELETE' });
     if (sessionId === id) {
       setSessionId(null);
       setMessages([]);
     }
-    if (propertyId) await loadSessions(propertyId);
+    await loadSessions(propertyId);
   };
 
   const modelPicker = llmEnabled ? (
@@ -560,6 +578,7 @@ export default function ChatPage() {
           properties={properties}
           propertyId={propertyId}
           onPropertyChange={(id) => {
+            abortRef.current?.abort();
             sessionRestoredForProperty.current = null;
             setUrlSyncEnabled(false);
             setPropertyId(id);
@@ -571,6 +590,7 @@ export default function ChatPage() {
           }}
           onNewChat={() => void handleNewChat()}
           onSelect={(id) => {
+            if (id !== sessionId) abortRef.current?.abort();
             setSessionId(id);
             setLoadingMessages(true);
           }}
diff --git a/web/src/views/Dashboards.tsx b/web/src/views/Dashboards.tsx
index fbd35005..5a3f0ea4 100644
--- a/web/src/views/Dashboards.tsx
+++ b/web/src/views/Dashboards.tsx
@@ -1,97 +1,122 @@
 'use client';
 
-import {
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-  useMemo,
-} from 'react';
-import { LayoutGrid, Plus, Eye, Pencil, Save, Copy, LayoutTemplate, Sparkles } from 'lucide-react';
-import { useActivePropertyContext } from '@/hooks/useActivePropertyContext';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { LayoutGrid, Plus, Eye, Pencil, Save, Trash2, Printer } from 'lucide-react';
+import type { Layout } from 'react-grid-layout';
 import { PageLayout, PageHeader, EmptyState } from '@/components';
+import type { ViewProps } from '@/types';
+import { usePropertyForDomain } from '@/lib/dashboard/hooks/usePropertyForDomain';
+import { DashboardCanvas } from '@/lib/dashboard/canvas/DashboardCanvas';
+import { getDataset, datasetsByGroup } from '@/lib/dashboard/engine/datasets';
+import {
+  emptyDashboard,
+  migrateDocToV2,
+  newWidgetId,
+  defaultWidgetLayout,
+  type DashboardDoc,
+  type Widget,
+} from '@/lib/dashboard/engine/doc';
+import type { QuerySpec, FilterValue } from '@/lib/dashboard/engine/types';
+import { SlicerBar } from '@/lib/dashboard/interaction/SlicerBar';
+import {
+  applyInteractions,
+  advanceDrill,
+  type CrossFilter,
+  type DrillState,
+  type InteractionState,
+} from '@/lib/dashboard/interaction/applyInteractions';
 import {
-  DashboardGrid,
-  DashboardSwitcher,
-  WidgetPalette,
-  WidgetConfigPanel,
-  PresetPicker,
   listDashboards,
   createDashboard,
   updateDashboard,
   deleteDashboard,
-  getDashboardPreset,
-  clearWidgetDataCache,
-  DASHBOARD_PRESETS,
   type DashboardRowClient,
-  emptyDashboard,
-  type Widget,
-  type DashboardDoc,
-  type DashboardFilter,
-  type CrossFilter,
-} from '@/lib/dashboard';
-import { FilterBar } from '@/lib/dashboard/builder/FilterBar';
-import AiAssistModal from '@/lib/dashboard/builder/AiAssistModal';
-import type { ViewProps } from '@/types';
-import { apiUrl } from '@/lib/publicBase';
-
-const AUTOSAVE_DELAY_MS = 1500;
+} from '@/lib/dashboard/data/fetchDashboards';
+import { ConfigPanel } from '@/lib/dashboard/builder/ConfigPanel';
+import { DASHBOARD_PRESETS, getPreset } from '@/lib/dashboard/presets/presets';
+
+const PRINT_CSS = `@media print {
+  body * { visibility: hidden !important; }
+  #dash-print-root, #dash-print-root * { visibility: visible !important; }
+  #dash-print-root { position: absolute !important; left: 0; top: 0; width: 100% !important; height: auto !important; overflow: visible !important; }
+  #dash-print-root .react-grid-item { break-inside: avoid; page-break-inside: avoid; }
+}`;
+
+const AUTOSAVE_MS = 1500;
+
+/** Build a widget seeded from a dataset's default query + first compatible viz. */
+function widgetForDataset(datasetId: string, y: number): Widget | null {
+  const def = getDataset(datasetId);
+  if (!def) return null;
+  const viz = def.viz[0] ?? 'bar';
+  return {
+    id: newWidgetId(),
+    title: '',
+    datasetId,
+    viz,
+    query: { ...(def.defaultSpec ?? {}) } as QuerySpec,
+    vizOptions: {},
+    layout: { ...defaultWidgetLayout(viz), x: 0, y },
+  };
+}
 
-export default function Dashboards({ searchQuery: _searchQuery = '' }: ViewProps) {
-  const { propertyId: configPropertyId, reportId, contextReady } = useActivePropertyContext();
-  // When active_property_id is not set in the pipeline config (e.g. user hasn't connected
-  // Google integrations), fall back to the first property found in the database.
-  const [autoPropertyId, setAutoPropertyId] = useState<number | null>(null);
-  const [autoResolveDone, setAutoResolveDone] = useState(false);
+/** A starter board so a freshly-created dashboard shows real charts immediately. */
+function starterDoc(): DashboardDoc {
+  const mk = (datasetId: string, viz: Widget['viz'], layout: Widget['layout']): Widget | null => {
+    const def = getDataset(datasetId);
+    if (!def) return null;
+    return {
+      id: newWidgetId(),
+      title: '',
+      datasetId,
+      viz,
+      query: { ...(def.defaultSpec ?? {}) } as QuerySpec,
+      vizOptions: {},
+      layout,
+    };
+  };
+  const widgets = [
+    mk('summary', 'kpi', { x: 0, y: 0, w: 3, h: 2 }),
+    mk('status_counts', 'doughnut', { x: 3, y: 0, w: 4, h: 5 }),
+    mk('categories', 'horizontal-bar', { x: 7, y: 0, w: 5, h: 5 }),
+  ].filter((w): w is Widget => w !== null);
+  return { version: 2, widgets, slicers: [] };
+}
 
-  useEffect(() => {
-    if (!contextReady || configPropertyId) { setAutoResolveDone(true); return; }
-    let cancelled = false;
-    fetch(apiUrl('/properties'))
-      .then((r) => r.json())
-      .then((d: { properties?: { id: number; name: string }[] }) => {
-        if (cancelled) return;
-        const first = d.properties?.[0] ?? null;
-        if (first) setAutoPropertyId(first.id);
-      })
-      .catch(() => { /* ignore — will show no-property state */ })
-      .finally(() => { if (!cancelled) setAutoResolveDone(true); });
-    return () => { cancelled = true; };
-  }, [contextReady, configPropertyId]);
-
-  const propertyId = configPropertyId ?? autoPropertyId;
-  // Gate: not ready until either config property is known OR auto-resolve has finished
-  const ready = contextReady && (!!configPropertyId || autoResolveDone);
-
-  // Drop cached widget results when the active report/property changes so widgets
-  // refetch fresh data instead of serving a stale cached payload.
-  useEffect(() => { clearWidgetDataCache(); }, [propertyId, reportId]);
+export default function Dashboards(_props: ViewProps) {
+  const { propertyId, ready } = usePropertyForDomain();
 
   const [dashboards, setDashboards] = useState<DashboardRowClient[]>([]);
-  const [activeDashboardId, setActiveDashboardId] = useState<number | null>(null);
+  const [activeId, setActiveId] = useState<number | null>(null);
   const [doc, setDoc] = useState<DashboardDoc>(emptyDashboard());
   const [loading, setLoading] = useState(true);
   const [loadError, setLoadError] = useState<string | null>(null);
   const [saving, setSaving] = useState(false);
   const [saveError, setSaveError] = useState<string | null>(null);
   const [isEditing, setIsEditing] = useState(false);
-  const [showPalette, setShowPalette] = useState(false);
-  const [showPresets, setShowPresets] = useState(false);
-  const [showAiAssist, setShowAiAssist] = useState(false);
-  const [aiAssistMode, setAiAssistMode] = useState<'widget' | 'dashboard'>('widget');
-  const [editingWidgetId, setEditingWidgetId] = useState<string | null>(null);
-  const [containerWidth, setContainerWidth] = useState(800);
-  // Dimension values collected from fetched widget data — used to populate filter option lists.
-  const [dimensionValues, setDimensionValues] = useState<Record<string, string[]>>({});
+  const [selectedWidgetId, setSelectedWidgetId] = useState<string | null>(null);
+  const [containerWidth, setContainerWidth] = useState(900);
+
+  // Ephemeral board interactions (not persisted — reset on dashboard switch/reload).
+  const [slicerValues, setSlicerValues] = useState<Record<string, FilterValue>>({});
+  const [crossFilter, setCrossFilter] = useState<CrossFilter | null>(null);
+  const [drill, setDrill] = useState<Record<string, DrillState>>({});
+
   const containerRef = useRef<HTMLDivElement>(null);
-  // Always-current snapshot of dashboards for use inside async callbacks without
-  // needing to add dashboards to every handler's dep array.
-  const dashboardsRef = useRef<DashboardRowClient[]>(dashboards);
-  useEffect(() => { dashboardsRef.current = dashboards; }, [dashboards]);
   const docRef = useRef(doc);
   useEffect(() => { docRef.current = doc; }, [doc]);
+  const drillRef = useRef(drill);
+  useEffect(() => { drillRef.current = drill; }, [drill]);
 
-  // Measure container for react-grid-layout
+  const resetInteractions = useCallback(() => {
+    setSlicerValues({});
+    setCrossFilter(null);
+    setDrill({});
+  }, []);
+  const autosaveTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(() => () => { if (autosaveTimer.current) clearTimeout(autosaveTimer.current); }, []);
+
+  // Measure container for react-grid-layout.
   useEffect(() => {
     if (!containerRef.current) return;
     const obs = new ResizeObserver((entries) => {
@@ -101,9 +126,8 @@ export default function Dashboards({ searchQuery: _searchQuery = '' }: ViewProps
     obs.observe(containerRef.current);
     setContainerWidth(containerRef.current.offsetWidth);
     return () => obs.disconnect();
-  }, []);
+  }, [loading, activeId]);
 
-  // Load dashboard list
   const loadDashboards = useCallback(async () => {
     if (!propertyId) { setLoading(false); return; }
     setLoading(true);
@@ -113,10 +137,10 @@ export default function Dashboards({ searchQuery: _searchQuery = '' }: ViewProps
       setDashboards(rows);
       const def = rows.find((r) => r.isDefault) ?? rows[0] ?? null;
       if (def) {
-        setActiveDashboardId(def.id);
-        setDoc(def.layoutJson ?? emptyDashboard());
+        setActiveId(def.id);
+        setDoc(migrateDocToV2(def.layoutJson));
       } else {
-        setActiveDashboardId(null);
+        setActiveId(null);
         setDoc(emptyDashboard());
       }
     } catch (e) {
@@ -126,310 +150,199 @@ export default function Dashboards({ searchQuery: _searchQuery = '' }: ViewProps
     }
   }, [propertyId]);
 
-  useEffect(() => {
-    if (!ready) return;
-    void loadDashboards();
-  }, [ready, loadDashboards]);
-
-  // Autosave debounce ref — cleared on unmount to avoid post-unmount state updates
-  const autosaveTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
-  useEffect(() => () => { if (autosaveTimer.current) clearTimeout(autosaveTimer.current); }, []);
-
-  const scheduleSave = useCallback(
-    (newDoc: DashboardDoc) => {
-      if (!activeDashboardId || !propertyId) return;
-      if (autosaveTimer.current) clearTimeout(autosaveTimer.current);
-      autosaveTimer.current = setTimeout(async () => {
-        setSaving(true);
-        setSaveError(null);
-        try {
-          const updated = await updateDashboard(activeDashboardId, propertyId, { layoutJson: newDoc });
-          setDashboards((prev) => prev.map((d) => d.id === updated.id ? updated : d));
-        } catch (e) {
-          setSaveError(e instanceof Error ? e.message : 'Save failed');
-        } finally {
-          setSaving(false);
-        }
-      }, AUTOSAVE_DELAY_MS);
-    },
-    [activeDashboardId, propertyId],
-  );
-
-  const updateDoc = useCallback(
-    (newDoc: DashboardDoc) => {
-      setDoc(newDoc);
-      scheduleSave(newDoc);
-    },
-    [scheduleSave],
-  );
-
-  // Persist grid positions only after drag/resize completes — not during drag.
-  // Updating controlled layout on every move fights RGL's internal state and causes jumps.
-  const handleLayoutChange = useCallback(
-    (layouts: import('react-grid-layout').Layout) => {
-      const current = docRef.current;
-      const newWidgets = current.widgets.map((w) => {
-        const l = Array.from(layouts).find((ll) => ll.i === w.id);
-        if (!l) return w;
-        return { ...w, layout: { x: l.x, y: l.y, w: l.w, h: l.h } };
-      });
-      updateDoc({ ...current, widgets: newWidgets });
-    },
-    [updateDoc],
-  );
-
-  const handleAddWidget = useCallback(
-    (widget: Widget) => {
-      // Place the new widget at the bottom of the grid. defaultWidgetLayout() uses
-      // y: Infinity (react-grid-layout's "append" sentinel), but Infinity serializes
-      // to null in JSON — which would corrupt the saved layout. Resolve it to a real
-      // row now so autosave persists a valid position.
-      const bottomY = doc.widgets.reduce(
-        (max, w) => Math.max(max, Number.isFinite(w.layout.y) ? w.layout.y + w.layout.h : 0),
-        0,
-      );
-      const placed: Widget = Number.isFinite(widget.layout.y)
-        ? widget
-        : { ...widget, layout: { ...widget.layout, x: 0, y: bottomY } };
-      updateDoc({ ...doc, widgets: [...doc.widgets, placed] });
-    },
-    [doc, updateDoc],
-  );
+  useEffect(() => { if (ready) void loadDashboards(); }, [ready, loadDashboards]);
 
-  const handleRemoveWidget = useCallback(
-    (id: string) => {
-      updateDoc({ ...doc, widgets: doc.widgets.filter((w) => w.id !== id) });
-    },
-    [doc, updateDoc],
-  );
-
-  const handleEditWidget = useCallback((id: string) => setEditingWidgetId(id), []);
-
-  const handleSaveWidget = useCallback(
-    (updated: Widget) => {
-      updateDoc({ ...doc, widgets: doc.widgets.map((w) => w.id === updated.id ? updated : w) });
-      setEditingWidgetId(null);
-    },
-    [doc, updateDoc],
-  );
-
-  const handleSelectDashboard = useCallback(
-    (id: number) => {
-      const found = dashboardsRef.current.find((d) => d.id === id);
-      if (!found) return;
-      setActiveDashboardId(id);
-      setDoc(found.layoutJson ?? emptyDashboard());
-      setIsEditing(false);
-    },
-    [],
-  );
-
-  const handleCreateDashboard = useCallback(
-    async (name: string) => {
-      if (!propertyId) return;
-      const newDoc = emptyDashboard();
-      try {
-        const created = await createDashboard(propertyId, name, newDoc);
-        setDashboards((prev) => [created, ...prev]);
-        setActiveDashboardId(created.id);
-        setDoc(newDoc);
-        setIsEditing(true);
-      } catch (e) {
-        setSaveError(e instanceof Error ? e.message : 'Create failed');
-      }
-    },
-    [propertyId],
-  );
-
-  const handleCreateFromPreset = useCallback(
-    async (presetId: string) => {
-      if (!propertyId) return;
-      const preset = getDashboardPreset(presetId);
-      if (!preset) return;
-      const newDoc = preset.build();
+  const scheduleSave = useCallback((next: DashboardDoc) => {
+    if (!activeId || !propertyId) return;
+    if (autosaveTimer.current) clearTimeout(autosaveTimer.current);
+    autosaveTimer.current = setTimeout(async () => {
+      setSaving(true);
+      setSaveError(null);
       try {
-        const created = await createDashboard(propertyId, preset.name, newDoc);
-        const isFirst = dashboardsRef.current.length === 0;
-        let row = created;
-        if (isFirst) {
-          row = await updateDashboard(created.id, propertyId, { isDefault: true });
-        }
-        setDashboards((prev) => {
-          const added = { ...row, isDefault: isFirst ? true : row.isDefault };
-          if (!isFirst) return [added, ...prev];
-          return [added, ...prev.map((d) => ({ ...d, isDefault: false }))];
-        });
-        setActiveDashboardId(row.id);
-        setDoc(newDoc);
-        setIsEditing(false);
-        setShowPresets(false);
+        await updateDashboard(activeId, propertyId, { layoutJson: next });
       } catch (e) {
-        setSaveError(e instanceof Error ? e.message : 'Create failed');
+        setSaveError(e instanceof Error ? e.message : 'Save failed');
+      } finally {
+        setSaving(false);
       }
-    },
-    [propertyId],
-  );
+    }, AUTOSAVE_MS);
+  }, [activeId, propertyId]);
+
+  const updateDoc = useCallback((next: DashboardDoc) => {
+    setDoc(next);
+    scheduleSave(next);
+  }, [scheduleSave]);
+
+  const handleLayoutChange = useCallback((layout: Layout) => {
+    const cur = docRef.current;
+    const arr = Array.from(layout);
+    const widgets = cur.widgets.map((w) => {
+      const l = arr.find((ll) => ll.i === w.id);
+      return l ? { ...w, layout: { x: l.x, y: l.y, w: l.w, h: l.h } } : w;
+    });
+    updateDoc({ ...cur, widgets });
+  }, [updateDoc]);
+
+  const addWidget = useCallback((datasetId: string) => {
+    const cur = docRef.current;
+    const bottomY = cur.widgets.reduce((m, w) => Math.max(m, w.layout.y + w.layout.h), 0);
+    const widget = widgetForDataset(datasetId, bottomY);
+    if (!widget) return;
+    updateDoc({ ...cur, widgets: [...cur.widgets, widget] });
+    setSelectedWidgetId(widget.id);
+  }, [updateDoc]);
+
+  const removeWidget = useCallback((id: string) => {
+    const cur = docRef.current;
+    updateDoc({ ...cur, widgets: cur.widgets.filter((w) => w.id !== id) });
+  }, [updateDoc]);
+
+  const duplicateWidget = useCallback((id: string) => {
+    const cur = docRef.current;
+    const src = cur.widgets.find((w) => w.id === id);
+    if (!src) return;
+    const bottomY = cur.widgets.reduce((m, w) => Math.max(m, w.layout.y + w.layout.h), 0);
+    const copy: Widget = { ...src, id: newWidgetId(), layout: { ...src.layout, x: 0, y: bottomY } };
+    updateDoc({ ...cur, widgets: [...cur.widgets, copy] });
+  }, [updateDoc]);
+
+  const updateWidget = useCallback((updated: Widget) => {
+    const cur = docRef.current;
+    updateDoc({ ...cur, widgets: cur.widgets.map((w) => (w.id === updated.id ? updated : w)) });
+  }, [updateDoc]);
+
+  // ── Interactions: slicers, cross-filter, drill ─────────────────────────────
+  const setSlicerValue = useCallback((id: string, value: string[]) => {
+    setSlicerValues((p) => ({ ...p, [id]: value }));
+  }, []);
 
-  const handleCreateFromAi = useCallback(
-    async (name: string, aiDoc: DashboardDoc) => {
-      if (!propertyId) return;
-      try {
-        const created = await createDashboard(propertyId, name, aiDoc);
-        const isFirst = dashboardsRef.current.length === 0;
-        let row = created;
-        if (isFirst) {
-          row = await updateDashboard(created.id, propertyId, { isDefault: true });
-        }
-        setDashboards((prev) => {
-          const added = { ...row, isDefault: isFirst ? true : row.isDefault };
-          if (!isFirst) return [added, ...prev];
-          return [added, ...prev.map((d) => ({ ...d, isDefault: false }))];
-        });
-        setActiveDashboardId(row.id);
-        setDoc(aiDoc);
-        setIsEditing(false);
-        setShowAiAssist(false);
-      } catch (e) {
-        setSaveError(e instanceof Error ? e.message : 'Create failed');
-      }
-    },
-    [propertyId],
-  );
+  const addSlicer = useCallback((field: string, datasetId: string, label: string) => {
+    const cur = docRef.current;
+    if (cur.slicers.some((s) => s.field === field)) return;
+    updateDoc({
+      ...cur,
+      slicers: [...cur.slicers, { id: newWidgetId(), field, datasetId, label, control: 'multiselect', op: 'in' }],
+    });
+  }, [updateDoc]);
+
+  const removeSlicer = useCallback((id: string) => {
+    const cur = docRef.current;
+    updateDoc({ ...cur, slicers: cur.slicers.filter((s) => s.id !== id) });
+    setSlicerValues((p) => { const n = { ...p }; delete n[id]; return n; });
+  }, [updateDoc]);
+
+  const handleChartSelect = useCallback((widgetId: string, category: string) => {
+    const w = docRef.current.widgets.find((x) => x.id === widgetId);
+    if (!w) return;
+    const ds = drillRef.current[widgetId];
+    if (w.drillDimensions && w.drillDimensions.length >= 2) {
+      const next = advanceDrill(w, ds, category);
+      if (next) { setDrill((d) => ({ ...d, [widgetId]: next })); return; }
+    }
+    const field = (w.drillDimensions && ds ? w.drillDimensions[ds.level] : undefined) ?? w.query.groupBy;
+    if (!field) return;
+    setCrossFilter((prev) =>
+      prev && prev.field === field && prev.value === category && prev.sourceWidgetId === widgetId
+        ? null
+        : { field, value: category, sourceWidgetId: widgetId },
+    );
+  }, []);
 
-  const handleDeleteDashboard = useCallback(
-    async (id: number) => {
-      if (!propertyId) return;
-      try {
-        await deleteDashboard(id, propertyId);
-      } catch (e) {
-        setSaveError(e instanceof Error ? e.message : 'Delete failed');
-        return;
-      }
-      // Use ref so dashboards is always fresh without putting it in deps
-      // (avoiding re-creation on every autosave).
-      const next = dashboardsRef.current.filter((d) => d.id !== id);
-      setDashboards(next);
-      if (activeDashboardId === id) {
-        const next0 = next[0] ?? null;
-        setActiveDashboardId(next0?.id ?? null);
-        setDoc(next0?.layoutJson ?? emptyDashboard());
-        setIsEditing(false);
-      }
-    },
-    [propertyId, activeDashboardId],
-  );
+  const drillUp = useCallback((id: string) => {
+    setDrill((d) => {
+      const cur = d[id];
+      if (!cur || cur.level <= 0) { const n = { ...d }; delete n[id]; return n; }
+      return { ...d, [id]: { level: cur.level - 1, path: cur.path.slice(0, -1) } };
+    });
+  }, []);
 
-  const handleSetDefault = useCallback(
-    async (id: number) => {
-      if (!propertyId) return;
-      try {
-        const updated = await updateDashboard(id, propertyId, { isDefault: true });
-        setDashboards((prev) =>
-          prev.map((d) => ({
-            ...d,
-            isDefault: d.id === updated.id,
-            layoutJson: d.id === updated.id ? updated.layoutJson : d.layoutJson,
-            name: d.id === updated.id ? updated.name : d.name,
-            updatedAt: d.id === updated.id ? updated.updatedAt : d.updatedAt,
-          })),
-        );
-      } catch (e) {
-        setSaveError(e instanceof Error ? e.message : 'Set default failed');
-      }
+  const specForWidget = useCallback(
+    (w: Widget): QuerySpec => {
+      const state: InteractionState = { slicerValues, crossFilter, drill };
+      return applyInteractions(w, docRef.current.slicers, state);
     },
-    [propertyId],
+    [slicerValues, crossFilter, drill],
   );
+  const drillForWidget = useCallback((w: Widget) => drill[w.id], [drill]);
 
-  const handleDuplicateDashboard = useCallback(async () => {
-    if (!propertyId || !activeDashboardId) return;
-    const src = dashboardsRef.current.find((d) => d.id === activeDashboardId);
-    if (!src) return;
+  const handleCreate = useCallback(async () => {
+    if (!propertyId) return;
+    const seed = starterDoc();
     try {
-      const created = await createDashboard(propertyId, `${src.name} (copy)`, src.layoutJson);
-      setDashboards((prev) => [created, ...prev]);
-      setActiveDashboardId(created.id);
-      setDoc(created.layoutJson ?? emptyDashboard());
+      const created = await createDashboard(propertyId, 'New dashboard', seed);
+      const isFirst = dashboards.length === 0;
+      let row = created;
+      if (isFirst) row = await updateDashboard(created.id, propertyId, { isDefault: true });
+      setDashboards((prev) => [row, ...prev.map((d) => ({ ...d, isDefault: isFirst ? false : d.isDefault }))]);
+      setActiveId(row.id);
+      setDoc(seed);
+      resetInteractions();
+      setIsEditing(true);
     } catch (e) {
-      setSaveError(e instanceof Error ? e.message : 'Duplicate failed');
+      setSaveError(e instanceof Error ? e.message : 'Create failed');
     }
-  }, [propertyId, activeDashboardId]);
-
-  // ── Filter / cross-filter handlers ─────────────────────────────────────────
+  }, [propertyId, dashboards.length, resetInteractions]);
 
-  const handleFiltersChange = useCallback(
-    (filters: DashboardFilter[]) => {
-      updateDoc({ ...doc, filters });
-    },
-    [doc, updateDoc],
-  );
-
-  const handleCrossFilter = useCallback(
-    (field: string, value: string, sourceWidgetId: string) => {
-      const crossFilters = doc.crossFilters ?? [];
-      const existing = crossFilters.find((cf) => cf.field === field && cf.value === value);
-      if (existing) {
-        // Toggle off
-        updateDoc({ ...doc, crossFilters: crossFilters.filter((cf) => cf.id !== existing.id) });
-      } else {
-        const newCf: CrossFilter = {
-          id: `cf-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 6)}`,
-          field,
-          value,
-          sourceWidgetId,
-        };
-        updateDoc({ ...doc, crossFilters: [...crossFilters, newCf] });
-      }
-    },
-    [doc, updateDoc],
-  );
-
-  const handleCrossFilterRemove = useCallback(
-    (id: string) => {
-      updateDoc({ ...doc, crossFilters: (doc.crossFilters ?? []).filter((cf) => cf.id !== id) });
-    },
-    [doc, updateDoc],
-  );
-
-  const handleCrossFilterClearAll = useCallback(
-    () => { updateDoc({ ...doc, crossFilters: [] }); },
-    [doc, updateDoc],
-  );
-
-  const handleDataReady = useCallback(
-    (widgetId: string, rows: Record<string, unknown>[]) => {
-      if (!rows.length) return;
-      // Collect distinct string values for every string-valued column
-      setDimensionValues((prev) => {
-        const next = { ...prev };
-        const sample = rows[0];
-        for (const key of Object.keys(sample)) {
-          const vals = new Set(rows.map((r) => String(r[key] ?? '')).filter(Boolean));
-          if (vals.size > 0 && vals.size <= 200) {
-            next[key] = [...vals].sort();
-          }
-        }
-        return next;
-      });
-      void widgetId; // suppress unused warning
-    },
-    [],
-  );
-
-  const activeFilters = useMemo(
-    () => [...(doc.filters ?? []), ...(doc.crossFilters ?? [])] as (DashboardFilter | CrossFilter)[],
-    [doc.filters, doc.crossFilters],
+  const handleCreateFromPreset = useCallback(async (presetId: string) => {
+    if (!propertyId) return;
+    const preset = getPreset(presetId);
+    if (!preset) return;
+    const seed = preset.build();
+    try {
+      const created = await createDashboard(propertyId, preset.name, seed);
+      const isFirst = dashboards.length === 0;
+      let row = created;
+      if (isFirst) row = await updateDashboard(created.id, propertyId, { isDefault: true });
+      setDashboards((prev) => [row, ...prev.map((d) => ({ ...d, isDefault: isFirst ? false : d.isDefault }))]);
+      setActiveId(row.id);
+      setDoc(seed);
+      resetInteractions();
+      setIsEditing(false);
+    } catch (e) {
+      setSaveError(e instanceof Error ? e.message : 'Create failed');
+    }
+  }, [propertyId, dashboards.length, resetInteractions]);
+
+  const selectDashboard = useCallback((id: number) => {
+    const found = dashboards.find((d) => d.id === id);
+    if (!found) return;
+    setActiveId(id);
+    setDoc(migrateDocToV2(found.layoutJson));
+    setSelectedWidgetId(null);
+    setIsEditing(false);
+    resetInteractions();
+  }, [dashboards, resetInteractions]);
+
+  const handleDelete = useCallback(async () => {
+    if (!propertyId || !activeId) return;
+    if (typeof window !== 'undefined' && !window.confirm('Delete this dashboard?')) return;
+    try {
+      await deleteDashboard(activeId, propertyId);
+    } catch (e) {
+      setSaveError(e instanceof Error ? e.message : 'Delete failed');
+      return;
+    }
+    const next = dashboards.filter((d) => d.id !== activeId);
+    setDashboards(next);
+    const n0 = next[0] ?? null;
+    setActiveId(n0?.id ?? null);
+    setDoc(n0 ? migrateDocToV2(n0.layoutJson) : emptyDashboard());
+    setIsEditing(false);
+    resetInteractions();
+  }, [propertyId, activeId, dashboards, resetInteractions]);
+
+  const groups = useMemo(() => datasetsByGroup(), []);
+  const selectedWidget = useMemo(
+    () => doc.widgets.find((w) => w.id === selectedWidgetId) ?? null,
+    [doc.widgets, selectedWidgetId],
   );
 
-  const editingWidget = editingWidgetId
-    ? doc.widgets.find((w) => w.id === editingWidgetId) ?? null
-    : null;
-
-  if (!propertyId && ready) {
+  if (ready && !propertyId) {
     return (
       <PageLayout>
         <EmptyState
           title="No property found"
-          description="Run an audit first to create a property, then come back to build dashboards."
+          description="Run an audit for a domain first, then come back to build dashboards."
         />
       </PageLayout>
     );
@@ -437,71 +350,75 @@ export default function Dashboards({ searchQuery: _searchQuery = '' }: ViewProps
 
   return (
     <PageLayout variant="fullHeight" className="flex flex-col min-h-0 gap-0">
+      <style>{PRINT_CSS}</style>
       <PageHeader
-        title={
-          <span className="flex items-center gap-2">
-            Dashboards
-            <span className="text-[10px] font-semibold uppercase tracking-widest px-1.5 py-0.5 rounded-full bg-amber-500/15 text-amber-400 border border-amber-500/30 leading-none">
-              alpha
-            </span>
-          </span>
-        }
+        title="Dashboards"
         icon={<LayoutGrid className="h-7 w-7 text-blue-400" />}
-        subtitle="Build custom dashboards from any audit metric"
+        subtitle="Build custom views from any audit metric"
         actions={
           <div className="flex items-center gap-2 flex-wrap">
-            <DashboardSwitcher
-              dashboards={dashboards}
-              activeDashboardId={activeDashboardId}
-              onSelect={handleSelectDashboard}
-              onCreate={handleCreateDashboard}
-              onCreateFromPreset={handleCreateFromPreset}
-              onBrowsePresets={() => setShowPresets(true)}
-              onDelete={handleDeleteDashboard}
-              onSetDefault={handleSetDefault}
-            />
-
-            {activeDashboardId && (
+            {dashboards.length > 0 && (
+              <select
+                value={activeId ?? ''}
+                onChange={(e) => selectDashboard(Number(e.target.value))}
+                className="px-2 py-1.5 text-sm bg-brand-800 border border-default rounded-lg text-bright focus:outline-none focus:ring-1 focus:ring-blue-500"
+              >
+                {dashboards.map((d) => (
+                  <option key={d.id} value={d.id}>{d.name}{d.isDefault ? ' ★' : ''}</option>
+                ))}
+              </select>
+            )}
+            <button
+              onClick={() => void handleCreate()}
+              className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-default hover:bg-white/5 text-sm text-muted-foreground hover:text-bright transition-colors"
+            >
+              <Plus className="h-3.5 w-3.5" /> New
+            </button>
+
+            {activeId && (
+              <button
+                onClick={() => setIsEditing((e) => !e)}
+                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg border text-sm font-medium transition-colors ${
+                  isEditing ? 'border-blue-500 bg-blue-500/10 text-blue-400' : 'border-default hover:bg-white/5 text-muted-foreground hover:text-bright'
+                }`}
+              >
+                {isEditing ? <><Eye className="h-3.5 w-3.5" /> View</> : <><Pencil className="h-3.5 w-3.5" /> Edit</>}
+              </button>
+            )}
+
+            {activeId && (
+              <button
+                onClick={() => window.print()}
+                title="Export to PDF (print)"
+                className="p-1.5 rounded-lg border border-default hover:bg-white/5 text-muted-foreground hover:text-bright transition-colors"
+              >
+                <Printer className="h-4 w-4" />
+              </button>
+            )}
+
+            {activeId && isEditing && (
               <>
-                <button
-                  onClick={handleDuplicateDashboard}
-                  title="Duplicate dashboard"
-                  className="p-1.5 rounded-lg border border-default hover:bg-white/5 text-muted-foreground hover:text-bright transition-colors"
+                <select
+                  value=""
+                  onChange={(e) => { if (e.target.value) addWidget(e.target.value); e.currentTarget.value = ''; }}
+                  className="px-2 py-1.5 text-sm bg-blue-600 text-white rounded-lg focus:outline-none cursor-pointer"
                 >
-                  <Copy className="h-4 w-4" />
-                </button>
-
+                  <option value="">+ Add widget…</option>
+                  {groups.map((g) => (
+                    <optgroup key={g.group} label={g.group}>
+                      {g.datasets.map((d) => (
+                        <option key={d.id} value={d.id}>{d.label}</option>
+                      ))}
+                    </optgroup>
+                  ))}
+                </select>
                 <button
-                  onClick={() => setIsEditing((e) => !e)}
-                  className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg border text-sm font-medium transition-colors ${
-                    isEditing
-                      ? 'border-blue-500 bg-blue-500/10 text-blue-400'
-                      : 'border-default hover:bg-white/5 text-muted-foreground hover:text-bright'
-                  }`}
+                  onClick={() => void handleDelete()}
+                  title="Delete dashboard"
+                  className="p-1.5 rounded-lg border border-default hover:bg-red-500/10 text-muted-foreground hover:text-red-400 transition-colors"
                 >
-                  {isEditing ? (
-                    <><Eye className="h-3.5 w-3.5" /> View</>
-                  ) : (
-                    <><Pencil className="h-3.5 w-3.5" /> Edit</>
-                  )}
+                  <Trash2 className="h-4 w-4" />
                 </button>
-
-                {isEditing && (
-                  <>
-                    <button
-                      onClick={() => { setAiAssistMode('widget'); setShowAiAssist(true); }}
-                      className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-blue-500/40 hover:bg-blue-500/10 text-blue-400 hover:text-blue-300 text-sm font-medium transition-colors"
-                    >
-                      <Sparkles className="h-3.5 w-3.5" /> AI widget
-                    </button>
-                    <button
-                      onClick={() => setShowPalette(true)}
-                      className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-blue-600 hover:bg-blue-500 text-white text-sm font-medium transition-colors"
-                    >
-                      <Plus className="h-3.5 w-3.5" /> Add widget
-                    </button>
-                  </>
-                )}
               </>
             )}
 
@@ -510,9 +427,7 @@ export default function Dashboards({ searchQuery: _searchQuery = '' }: ViewProps
                 <Save className="h-3.5 w-3.5 animate-pulse" /> Saving…
               </span>
             )}
-            {saveError && (
-              <span className="text-xs text-red-400">Save failed</span>
-            )}
+            {saveError && <span className="text-xs text-red-400">{saveError}</span>}
           </div>
         }
       />
@@ -524,127 +439,76 @@ export default function Dashboards({ searchQuery: _searchQuery = '' }: ViewProps
       ) : loadError ? (
         <div className="flex flex-col items-center justify-center flex-1 gap-3">
           <p className="text-sm text-red-400">{loadError}</p>
-          <button
-            onClick={() => void loadDashboards()}
-            className="px-4 py-2 rounded-lg border border-default hover:bg-white/5 text-sm text-muted-foreground hover:text-bright transition-colors"
-          >
-            Retry
-          </button>
+          <button onClick={() => void loadDashboards()} className="px-4 py-2 rounded-lg border border-default hover:bg-white/5 text-sm text-muted-foreground hover:text-bright transition-colors">Retry</button>
         </div>
-      ) : !activeDashboardId ? (
+      ) : !activeId ? (
         <div className="flex flex-col items-center justify-center flex-1 gap-6 px-4 py-8 max-w-3xl mx-auto w-full">
-          <EmptyState
-            title="No dashboards yet"
-            description="Start from a template or create a blank dashboard."
-          />
+          <EmptyState title="No dashboards yet" description="Start from a template or a blank board." />
           <div className="w-full grid gap-2 sm:grid-cols-2">
-            {DASHBOARD_PRESETS.map((preset) => (
+            {DASHBOARD_PRESETS.map((p) => (
               <button
-                key={preset.id}
-                onClick={() => void handleCreateFromPreset(preset.id)}
+                key={p.id}
+                onClick={() => void handleCreateFromPreset(p.id)}
                 className="text-left px-4 py-3 rounded-xl border border-default hover:border-blue-500/50 hover:bg-brand-800/40 transition-colors"
               >
-                <p className="text-sm font-semibold text-bright">{preset.name}</p>
-                <p className="text-xs text-blue-400/80 mt-0.5">{preset.tagline}</p>
-                <p className="text-xs text-muted-foreground mt-1">{preset.description}</p>
+                <p className="text-sm font-semibold text-bright">{p.name}</p>
+                <p className="text-xs text-blue-400/80 mt-0.5">{p.tagline}</p>
+                <p className="text-xs text-muted-foreground mt-1">{p.description}</p>
               </button>
             ))}
           </div>
-          <div className="flex items-center gap-3 flex-wrap justify-center">
-            <button
-              onClick={() => setShowPresets(true)}
-              className="flex items-center gap-2 px-4 py-2 rounded-lg border border-default hover:bg-white/5 text-sm text-muted-foreground hover:text-bright transition-colors"
-            >
-              <LayoutTemplate className="h-4 w-4" /> All templates
-            </button>
-            <button
-              onClick={() => { setAiAssistMode('dashboard'); setShowAiAssist(true); }}
-              className="flex items-center gap-2 px-4 py-2 rounded-lg border border-blue-500/40 hover:bg-blue-500/10 text-blue-400 hover:text-blue-300 text-sm font-medium transition-colors"
-            >
-              <Sparkles className="h-4 w-4" /> Generate with AI
-            </button>
-            <button
-              onClick={() => void handleCreateDashboard('My dashboard')}
-              className="flex items-center gap-2 px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-500 text-white text-sm font-medium transition-colors"
-            >
-              <Plus className="h-4 w-4" /> Blank dashboard
-            </button>
-          </div>
+          <button onClick={() => void handleCreate()} className="flex items-center gap-2 px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-500 text-white text-sm font-medium transition-colors">
+            <Plus className="h-4 w-4" /> Blank dashboard
+          </button>
         </div>
       ) : (
-        <div ref={containerRef} className="flex-1 min-h-0 overflow-y-auto flex flex-col">
-          <FilterBar
-            filters={doc.filters ?? []}
-            crossFilters={doc.crossFilters ?? []}
-            widgets={doc.widgets}
-            isEditing={isEditing}
-            dimensionValues={dimensionValues}
-            onFiltersChange={handleFiltersChange}
-            onCrossFilterRemove={handleCrossFilterRemove}
-            onCrossFilterClearAll={handleCrossFilterClearAll}
+        <div className="flex-1 min-h-0 flex flex-col">
+          <SlicerBar
+            slicers={doc.slicers}
+            slicerValues={slicerValues}
+            crossFilter={crossFilter}
+            editing={isEditing}
+            onSetValue={setSlicerValue}
+            onAddSlicer={addSlicer}
+            onRemoveSlicer={removeSlicer}
+            onClearCrossFilter={() => setCrossFilter(null)}
           />
-          <div className="flex-1 min-h-0 overflow-y-auto">
-            <DashboardGrid
-              widgets={doc.widgets}
-              propertyId={propertyId ?? 0}
-              reportId={reportId}
-              isEditing={isEditing}
-              containerWidth={containerWidth}
-              activeFilters={activeFilters}
-              onLayoutChange={handleLayoutChange}
-              onRemoveWidget={handleRemoveWidget}
-              onEditWidget={handleEditWidget}
-              onCrossFilter={handleCrossFilter}
-              onDataReady={handleDataReady}
-            />
+          <div className="flex-1 min-h-0 flex">
+            <div ref={containerRef} id="dash-print-root" className="flex-1 min-h-0 overflow-y-auto py-3 px-1">
+              {doc.widgets.length === 0 ? (
+                <div className="flex flex-col items-center justify-center min-h-[300px] border-2 border-dashed border-default rounded-xl text-muted-foreground text-sm gap-2 mx-1">
+                  <p className="font-medium">This dashboard is empty.</p>
+                  <p className="text-xs">{isEditing ? 'Use “+ Add widget…” to add a chart.' : 'Switch to Edit to add widgets.'}</p>
+                </div>
+              ) : (
+                <DashboardCanvas
+                  widgets={doc.widgets}
+                  isEditing={isEditing}
+                  containerWidth={containerWidth}
+                  selectedWidgetId={selectedWidgetId}
+                  specForWidget={specForWidget}
+                  drillForWidget={drillForWidget}
+                  onLayoutChange={handleLayoutChange}
+                  onEditWidget={setSelectedWidgetId}
+                  onRemoveWidget={removeWidget}
+                  onDuplicateWidget={duplicateWidget}
+                  onSelectWidget={setSelectedWidgetId}
+                  onCrossFilter={handleChartSelect}
+                  onDrillUp={drillUp}
+                />
+              )}
+            </div>
+            {isEditing && selectedWidget && (
+              <ConfigPanel
+                widget={selectedWidget}
+                onChange={updateWidget}
+                onClose={() => setSelectedWidgetId(null)}
+                onDelete={() => { removeWidget(selectedWidget.id); setSelectedWidgetId(null); }}
+              />
+            )}
           </div>
         </div>
       )}
-
-      {showPalette && (
-        <WidgetPalette onAdd={handleAddWidget} onClose={() => setShowPalette(false)} />
-      )}
-
-      {showPresets && (
-        <PresetPicker
-          onSelect={(id) => void handleCreateFromPreset(id)}
-          onClose={() => setShowPresets(false)}
-        />
-      )}
-
-      {editingWidget && (
-        <WidgetConfigPanel
-          widget={editingWidget}
-          onSave={handleSaveWidget}
-          onClose={() => setEditingWidgetId(null)}
-          propertyId={propertyId ?? undefined}
-          reportId={reportId}
-        />
-      )}
-
-      {showAiAssist && aiAssistMode === 'widget' && (
-        <AiAssistModal
-          mode="widget"
-          propertyId={propertyId ?? undefined}
-          reportId={reportId}
-          bottomY={doc.widgets.reduce(
-            (max, w) => Math.max(max, Number.isFinite(w.layout.y) ? w.layout.y + w.layout.h : 0),
-            0,
-          )}
-          onAddWidget={(w) => { handleAddWidget(w); setShowAiAssist(false); }}
-          onClose={() => setShowAiAssist(false)}
-        />
-      )}
-
-      {showAiAssist && aiAssistMode === 'dashboard' && (
-        <AiAssistModal
-          mode="dashboard"
-          propertyId={propertyId ?? undefined}
-          reportId={reportId}
-          onCreateDashboard={(name, aiDoc) => void handleCreateFromAi(name, aiDoc)}
-          onClose={() => setShowAiAssist(false)}
-        />
-      )}
     </PageLayout>
   );
 }