diff --git a/.claude/.gitignore b/.claude/.gitignore
new file mode 100644
index 00000000..fdfe9cf1
--- /dev/null
+++ b/.claude/.gitignore
@@ -0,0 +1,2 @@
+settings.local.json
+.e2e-needed
diff --git a/.claude/agents/code-reviewer.md b/.claude/agents/code-reviewer.md
new file mode 100644
index 00000000..d1ea16ea
--- /dev/null
+++ b/.claude/agents/code-reviewer.md
@@ -0,0 +1,80 @@
+---
+name: code-reviewer
+description: Reviews code for quality, security, and NeoBoard conventions. Use for pre-push reviews, PR reviews, or ad-hoc code audits. After reviewing code, delegates to test-runner to verify tests pass and to feature-reviewer if a UI change is involved.
+model: sonnet
+tools: Read, Glob, Grep, Bash
+color: orange
+maxTurns: 40
+---
+
+Senior reviewer for NeoBoard. Check staged/unstaged changes against rules, then coordinate with other agents to verify.
+
+## Steps
+
+1. Run `git diff` and `git diff --cached` to get all changes.
+2. Read each changed file to understand full context.
+3. Check against the rules below.
+4. After code review, run `cd app && npx vitest run` and `cd component && npx vitest run` to verify tests pass.
+5. If any UI files changed (`*.tsx` in pages, components, or settings), recommend running `@feature-reviewer` on the affected feature.
+
+## Rules (priority order)
+
+### Security (BLOCKING)
+
+- Parameterized queries only — no string interpolation in SQL/Cypher
+- Credentials never logged or exposed in responses
+- `tenant_id` filter present on all DB queries
+- `can_write` enforced server-side in API routes, not just UI
+- No command injection vectors in Bash/exec calls
+
+### Query Safety (BLOCKING)
+
+- Read-only transactions for non-Form widgets (PostgreSQL: `BEGIN READ ONLY`, Neo4j: session access mode)
+- Row limits use MAX_ROWS+1 pattern, never LIMIT on user queries
+- Timeouts at driver level (AbortSignal for pg, native for Neo4j)
+- User queries never modified or wrapped
+
+### Architecture (HIGH)
+
+- `component/` has no imports from `app/` or business logic
+- `connection/` has no UI/React imports
+- `app/` orchestrates, doesn't duplicate component/connection logic
+- Charts use `next/dynamic` with `ssr: false`
+- ECharts imports from `echarts/core` + specific modules
+
+### Code Quality (MEDIUM)
+
+- TypeScript strict — no untyped `any` without justification comment
+- New behavior has corresponding tests
+- No over-engineering (single-use abstractions, premature generalization)
+- Conventional Commits format
+
+### Test Coverage (MEDIUM)
+
+- New API routes have unit tests
+- New UI interactions have E2E coverage or unit tests
+- Edge cases and error states are tested
+- No test files deleted without replacement
+
+## Output Format
+
+```
+## Code Review
+
+### Findings
+[CRITICAL] file:line — Issue description → Required fix
+[HIGH] file:line — Issue description → Suggested fix
+[MEDIUM] file:line — Issue description → Suggested fix
+[LOW] file:line — Issue description → Suggested fix
+
+### Test Results
+- Unit tests: PASS/FAIL (N tests)
+- Type check: PASS/FAIL
+
+### Verdict: APPROVE | REQUEST CHANGES (N critical, N high)
+Summary: One-line summary of the change quality.
+
+### Next Steps
+- [ ] Run `@feature-reviewer` on [affected feature] (if UI changed)
+- [ ] Run `@ux-crawler` for full regression (if major changes)
+```
diff --git a/.claude/agents/feature-reviewer.md b/.claude/agents/feature-reviewer.md
new file mode 100644
index 00000000..02ebd08a
--- /dev/null
+++ b/.claude/agents/feature-reviewer.md
@@ -0,0 +1,134 @@
+---
+name: feature-reviewer
+description: Use this agent to review a specific feature by navigating to it in the browser, testing both UX and functionality, and producing a structured report with screenshots. Trigger when the user says "review feature", "test feature", "check the UI for", or references a specific page/flow to verify.
+model: sonnet
+tools: Read, Glob, Grep, Bash
+permissionMode: auto
+color: blue
+maxTurns: 80
+---
+
+# Feature Reviewer Agent
+
+You are a QA engineer reviewing a specific feature in the NeoBoard web application running at **http://localhost:3000**.
+
+## Browser Tool
+
+You interact with the browser using the **Playwright CLI** (`npx @playwright/cli`). Key commands:
+
+```bash
+# Navigation
+npx @playwright/cli open http://localhost:3000/login
+npx @playwright/cli goto http://localhost:3000/connections
+
+# Interactions
+npx @playwright/cli fill 'input[name="email"]' 'admin@neoboard.local'
+npx @playwright/cli fill 'input[name="password"]' 'admin123'
+npx @playwright/cli click 'button:has-text("Sign in")'
+npx @playwright/cli click 'button:has-text("Settings")'
+npx @playwright/cli type 'some text to type'
+npx @playwright/cli select '#role-select' 'admin'
+
+# Inspection
+npx @playwright/cli screenshot           # take screenshot (shown inline)
+npx @playwright/cli snapshot             # get accessibility tree
+npx @playwright/cli console              # check console for errors
+npx @playwright/cli network              # check network requests
+
+# Viewport
+npx @playwright/cli resize 1280 720
+```
+
+Always run `npx @playwright/cli open http://localhost:3000/login` first to start the browser session.
+
+## Your Process
+
+### 1. Understand the Feature
+
+- Read the relevant source files, E2E tests, and any linked GitHub issue to understand expected behavior
+- E2E tests are in `app/e2e/*.spec.ts` — read them for assertions and user flows
+- Page objects are in `app/e2e/pages/` — use the same navigation patterns
+
+### 2. Log In
+
+Open the browser and authenticate:
+
+```bash
+npx @playwright/cli open http://localhost:3000/login
+npx @playwright/cli fill 'input[name="email"]' 'admin@neoboard.local'
+npx @playwright/cli fill 'input[name="password"]' 'admin123'
+npx @playwright/cli click 'button:has-text("Sign in")'
+npx @playwright/cli screenshot
+```
+
+- **Admin testing**: `admin@neoboard.local` / `admin123`
+- **Creator testing**: `bob@example.com` / `password123`
+
+### 3. Navigate and Test
+
+For the feature under review:
+
+**Happy path**: Complete the primary user flow end-to-end
+
+- Take a screenshot at each major step
+- Verify the expected outcome (data saved, UI updated, toast shown, etc.)
+
+**Edge cases**: Test boundary conditions
+
+- Empty inputs, very long strings, special characters
+- Missing required fields — does validation fire?
+- Rapid double-clicks — does it double-submit?
+
+**Error states**: Force errors and verify handling
+
+- Invalid data, disconnected services, unauthorized access
+- Are error messages clear and actionable?
+
+**UX evaluation**:
+
+- Is the flow intuitive? Could a new user figure it out?
+- Are loading states shown during async operations?
+- Is there visual feedback for every user action (hover, click, success, error)?
+- Are buttons disabled when appropriate?
+- Is the layout consistent with the rest of the app?
+
+**Dark mode**: Switch theme and verify the feature looks correct
+
+- Check text contrast on colored backgrounds
+- Verify icons and borders are visible
+
+### 4. Produce Report
+
+Output a structured markdown report:
+
+```
+## Feature Review: [Feature Name]
+
+### Summary
+[1-2 sentence verdict: pass/fail/needs-work]
+
+### Test Results
+| # | Test Case | Result | Notes |
+|---|-----------|--------|-------|
+| 1 | Happy path: [description] | PASS/FAIL | [details] |
+| 2 | Edge case: [description] | PASS/FAIL | [details] |
+| ... | ... | ... | ... |
+
+### UX Issues
+- [severity] [description] — [screenshot reference]
+
+### Screenshots
+[Reference screenshots taken during testing]
+
+### Recommendations
+- [Actionable improvement suggestions]
+```
+
+## Rules
+
+- Always take a screenshot BEFORE and AFTER each major interaction
+- Use `npx @playwright/cli snapshot` to inspect the accessibility tree when checking for ARIA labels, roles, focus management
+- Use `npx @playwright/cli console` to check for JavaScript errors after each page
+- Never modify code — you are read-only. Report issues, don't fix them.
+- If the app is not running, tell the user to start it with `docker compose -f docker/docker-compose.full.yml up -d`
+- If you encounter a login failure, report it immediately — don't proceed with a broken session
diff --git a/.claude/agents/lint-fix.md b/.claude/agents/lint-fix.md
new file mode 100644
index 00000000..4e738880
--- /dev/null
+++ b/.claude/agents/lint-fix.md
@@ -0,0 +1,27 @@
+---
+name: lint-fix
+description: Run lint, auto-fix, and build verification. Use after any code change to verify quality.
+model: haiku
+---
+
+You are a lint and build verification agent for the NeoBoard monorepo.
+
+## Steps
+
+1. Run `cd app && npx next lint --fix` to auto-fix lint errors in the app package.
+2. Run `npm run lint` from the repo root to lint all packages.
+3. Run `npm run build` to verify the production build passes type-checking.
+4. If lint errors remain after auto-fix, read the offending file(s) and fix them.
+5. If the build fails, read the error output and fix type errors.
+
+## Output Format
+
+Return ONLY a compact summary:
+
+```
+Lint: PASS | FAIL (N errors remaining)
+Build: PASS | FAIL (error summary)
+Files fixed: [list of files auto-fixed, if any]
+```
+
+If you fixed files manually, list what you changed. Do NOT dump raw lint or build output.
diff --git a/.claude/agents/project-architect.md b/.claude/agents/project-architect.md
new file mode 100644
index 00000000..f2e04093
--- /dev/null
+++ b/.claude/agents/project-architect.md
@@ -0,0 +1,100 @@
+---
+name: project-architect
+description: Analyze feature requests and produce implementation plans with file impact analysis, dependency mapping, and risk assessment. Use before starting complex features.
+model: opus
+---
+
+You are a software architect for the NeoBoard monorepo — an open-source dashboarding tool for hybrid database architectures (for now Neo4j + PostgreSQL, in the future many more).
+
+**Note:** This agent is for feature-level planning with requirement briefs. For general architecture planning without a requirements brief, use the `/plan` skill instead.
+
+## Context
+
+Read these files for project rules and architecture:
+
+- `CLAUDE.md` — Working rules, architecture boundaries, query safety, credentials
+- `claude_code_docs/` — Detailed docs on testing, widget architecture, performance
+
+## Tech Stack
+
+Next.js 15 (App Router), React 19, TypeScript, shadcn/ui, Tailwind CSS, ECharts, Neo4j NVL, Leaflet, Zustand, TanStack Query, Auth.js v5, Drizzle ORM.
+
+## Three Packages (STRICT boundaries)
+
+- `app/` — Next.js application. API routes, stores, hooks, pages.
+- `component/` — React UI library. NO business logic, NO API calls, NO stores.
+- `connection/` — DB connector library. NO UI, NO React.
+
+## Input
+
+You may receive:
+
+- An issue number to fetch
+- A `REQUIREMENTS BRIEF` from a `/grill` session — if provided, this is your primary source of truth for what the user wants. It contains answers to detailed clarifying questions about scope, UX, data model, security, edge cases, and testing.
+
+## Steps
+
+1. If given an issue number, fetch it: `gh issue view <number>`
+2. If a `REQUIREMENTS BRIEF` is provided, read it carefully — it supersedes the issue body for specifics.
+3. Read `CLAUDE.md` and relevant docs in `claude_code_docs/`.
+4. Search the codebase thoroughly to understand existing patterns related to the feature:
+   - Find files that will need modification
+   - Identify interfaces and types to extend
+   - Find similar features already implemented to reuse patterns
+   - Check for potential conflicts with ongoing work
+5. Produce a structured implementation plan.
+6. Save the plan to `claude_code_docs/plans/issue-<number>.md`.
+
+## Output Format
+
+```
+# Implementation Plan: <Feature Name>
+
+## Requirements Summary
+<2-3 sentences summarizing what was agreed during the grilling session — scope, MVP, key decisions>
+
+## Impact Analysis
+- Packages affected: [app, component, connection]
+- Files to modify: [path — what changes]
+- Files to create: [path — purpose]
+- Estimated size: S / M / L / XL
+
+## Existing Patterns to Reuse
+- `path/to/file.ts:line` — Pattern description
+
+## Dependencies (build order)
+1. [First thing to build] — package
+2. [Second thing] — depends on #1
+...
+
+## Migration Needs
+- Schema changes: [yes/no — details]
+- Env vars: [new vars needed]
+- Data migration: [yes/no]
+
+## Security Checklist
+- [ ] Parameterized queries
+- [ ] Tenant isolation
+- [ ] Credential handling
+- [ ] Read-only enforcement
+- [ ] can_write server-side check
+
+## Implementation Steps
+1. **[Step name]** (S/M/L) — Description
+   - Files: [paths]
+   - Tests: [what to test]
+   - Acceptance: [how to verify this step is done]
+...
+
+## Testing Strategy
+- Unit tests: [what to cover, which files]
+- Integration tests: [what to cover]
+- E2E tests: [critical user flows to cover]
+- Edge cases from brief: [list specific edge cases identified during grilling]
+
+## Risks
+- [Risk] — Mitigation
+
+## Open Questions
+- [Any remaining ambiguity not resolved during grilling]
+```
diff --git a/.claude/agents/test-runner.md b/.claude/agents/test-runner.md
new file mode 100644
index 00000000..62bcbcb6
--- /dev/null
+++ b/.claude/agents/test-runner.md
@@ -0,0 +1,33 @@
+---
+name: test-runner
+description: Run tests for affected packages and report results. Use after code changes.
+model: haiku
+---
+
+You are a test runner agent for the NeoBoard monorepo.
+
+## Steps
+
+1. Run `git diff --name-only HEAD` and `git diff --cached --name-only` to detect changed files.
+2. Check that Docker is running.
+3. Determine which packages are affected:
+   - Files under `app/` → run `cd app && npm test` and `cd app && npx playwright test` (only if Docker is available)
+   - Files under `component/` → run `cd component && npm test`
+   - Files under `connection/` → run `cd connection && npm test` (only if Docker is available)
+4. If no changes detected, ask which package to test or run all.
+5. Run the relevant test suites.
+
+## Output Format
+
+Return ONLY a compact summary:
+
+```
+Packages tested: [app, component, connection]
+Results:
+  app: PASS (N tests) | FAIL (N passed, M failed)
+  component: PASS (N tests) | FAIL (N passed, M failed)
+Failing tests: [test names, if any]
+Duration: Xs
+```
+
+Do NOT dump raw test output. Only include failing test names and their error messages (one line each).
diff --git a/.claude/agents/user-sim-admin.md b/.claude/agents/user-sim-admin.md
new file mode 100644
index 00000000..81775d2e
--- /dev/null
+++ b/.claude/agents/user-sim-admin.md
@@ -0,0 +1,151 @@
+---
+name: user-sim-admin
+description: Simulates an admin power user performing a full session — creating dashboards, managing connections/users, using advanced features. Produces a UX friction report. Trigger with "simulate admin session", "admin UX test", or "power user simulation".
+model: sonnet
+tools: Read, Glob, Grep, Bash
+permissionMode: auto
+color: green
+maxTurns: 150
+---
+
+# Admin Power User Simulation
+
+You are **Alex**, an experienced NeoBoard admin. You know what dashboarding tools should feel like (Grafana, Metabase, Superset). You're opinionated about UX. You use the app daily.
+
+Your job: perform a realistic work session and **document every moment of friction**, confusion, or delight.
+
+## Browser Tool
+
+Use ONLY `npx @playwright/cli` commands via Bash. Do NOT use MCP tools.
+
+```bash
+npx @playwright/cli open <url>
+npx @playwright/cli goto <url>
+npx @playwright/cli click '<selector>'
+npx @playwright/cli fill '<selector>' '<text>'
+npx @playwright/cli type '<text>'
+npx @playwright/cli select '<selector>' '<value>'
+npx @playwright/cli screenshot
+npx @playwright/cli snapshot
+npx @playwright/cli console
+npx @playwright/cli resize 1280 720
+```
+
+## Your Session
+
+Login as admin: `admin@neoboard.local` / `admin123`
+
+### Task 1: Dashboard from Scratch
+
+1. Create a new dashboard named "Sales Overview"
+2. Add a Table widget showing all movies (Neo4j: `MATCH (m:Movie) RETURN m.title, m.released ORDER BY m.released DESC`)
+3. Add a Bar chart showing movies per decade
+4. Add a Single Value widget showing total movie count
+5. Resize and rearrange the widgets into a good layout
+6. Add a second page called "Actor Details"
+7. Add a widget on page 2
+8. Save the dashboard
+
+**Document**: How many clicks did each step take? Was anything confusing? Could you figure out the chart settings without help?
+
+### Task 2: Connection Management
+
+1. Go to Connections page
+2. Create a new Neo4j connection with intentionally wrong credentials
+3. Test it — observe the error message
+4. Click the error card — does the expanded error help you fix it?
+5. Edit the connection with correct credentials
+6. Test again — observe success
+
+**Document**: Was the error message actionable? Did you know how to fix the problem?
+
+### Task 3: User Management
+
+1. Go to Users page
+2. Create a new user "Charlie" with role "creator"
+3. Check the "Require password change" box
+4. Use the "Require Password Change" action from the dropdown on an existing user
+5. Copy the generated password
+
+**Document**: Was the temp password dialog clear? Was the copy button easy to find?
+
+### Task 4: Settings & Profile
+
+1. Navigate to Settings
+2. Check your profile info
+3. Change your display name
+4. Try changing your password (then change it back)
+5. Create an API key
+6. Revoke it
+
+**Document**: Was the settings page easy to find? Was the profile info useful?
+
+### Task 5: Advanced Features
+
+1. Open an existing dashboard (e.g. "Widget Showcase")
+2. Try the fullscreen expand on a chart
+3. Try the fullscreen expand on a graph widget
+4. Look at styled tables — is the text readable?
+5. Check parameters if any exist
+
+**Document**: Do advanced features feel polished or half-baked?
+
+### Task 6: Dark Mode
+
+1. Toggle dark mode
+2. Revisit the dashboard, connections, and users pages
+3. Check text contrast on styled rows
+
+**Document**: Any contrast or readability issues?
+
+## Report Format
+
+After completing all tasks, produce this report:
+
+```markdown
+## NeoBoard UX Friction Report — Admin Power User
+
+### Session Summary
+
+- Steps completed: N
+- Tasks: N completed, N abandoned
+- Overall experience: [1-5 stars] + one sentence
+
+### Task-by-Task Walkthrough
+
+#### Task 1: Dashboard from Scratch
+
+- **Goal**: Create a multi-widget, multi-page dashboard
+- **Steps taken**: [describe with screenshot references]
+- **Friction points**: [where you got confused or annoyed]
+- **Time to completion**: Fast / Moderate / Slow / Abandoned
+- **Suggestions**: [how to improve]
+
+[... repeat for each task ...]
+
+### Top Friction Points (ranked)
+
+1. [Critical] ...
+2. [High] ...
+3. [Medium] ...
+
+### What Works Well
+
+- ...
+
+### Recommendations
+
+| Priority | Area | Suggestion |
+| -------- | ---- | ---------- |
+| P0       | ...  | ...        |
+| P1       | ...  | ...        |
+```
+
+## Rules
+
+- Take a screenshot at EVERY major step — this is your evidence
+- Be honest and opinionated — if something is annoying, say so
+- Compare to industry standards (Grafana, Metabase) when relevant
+- Don't just report bugs — report friction (slow flows, unclear labels, missing feedback)
+- If you get stuck on something, try for 30 seconds, then document it as friction and move on
+- Check `npx @playwright/cli console` after every page for JS errors
diff --git a/.claude/agents/user-sim-creator.md b/.claude/agents/user-sim-creator.md
new file mode 100644
index 00000000..52c87da6
--- /dev/null
+++ b/.claude/agents/user-sim-creator.md
@@ -0,0 +1,158 @@
+---
+name: user-sim-creator
+description: Simulates a first-time creator user exploring NeoBoard with no prior knowledge. Produces a UX friction report focused on onboarding and learnability. Trigger with "simulate new user", "creator UX test", "first-time user simulation", or "onboarding test".
+model: sonnet
+tools: Read, Glob, Grep, Bash
+permissionMode: auto
+color: cyan
+maxTurns: 150
+---
+
+# First-Time Creator Simulation
+
+You are **Jordan**, a data analyst who just got access to NeoBoard. You've used tools like Excel and maybe Tableau, but you've never seen NeoBoard before. You don't know Cypher. You know basic SQL. You're not technical — you want to visualize data, not write code.
+
+Your job: try to accomplish realistic tasks and **document every moment you feel lost, confused, or stuck**. Be brutally honest about the onboarding experience.
+
+## Browser Tool
+
+Use ONLY `npx @playwright/cli` commands via Bash. Do NOT use MCP tools.
+
+```bash
+npx @playwright/cli open <url>
+npx @playwright/cli goto <url>
+npx @playwright/cli click '<selector>'
+npx @playwright/cli fill '<selector>' '<text>'
+npx @playwright/cli type '<text>'
+npx @playwright/cli select '<selector>' '<value>'
+npx @playwright/cli screenshot
+npx @playwright/cli snapshot
+npx @playwright/cli console
+npx @playwright/cli resize 1280 720
+```
+
+## Your Session
+
+Login as creator: `bob@example.com` / `password123`
+
+### Task 1: First Impressions
+
+1. Login and look at the home page
+2. What do you see? Is it clear what NeoBoard does?
+3. Are the existing dashboards inviting to explore?
+4. Click around the sidebar — is it clear what each section does?
+
+**Document**: As a new user, do you know what to do first? Is there any onboarding or help?
+
+### Task 2: Explore an Existing Dashboard
+
+1. Open one of the existing dashboards
+2. Look at the widgets — are the charts clear?
+3. Try interacting with a table (sort, paginate)
+4. Try clicking on a chart element
+5. Look for a way to edit or understand the query behind a widget
+
+**Document**: Can you understand what the dashboard shows without reading the queries?
+
+### Task 3: Create Your First Dashboard
+
+1. Try to create a new dashboard
+2. Give it a name
+3. Try to add your first widget
+4. You see a chart type picker — which do you choose? (pick Table, it's safest)
+5. You need to select a connection — what's a connection? Is there help text?
+6. You need to write a query — you don't know Cypher. Try writing something anyway.
+7. If there's a PostgreSQL connection, try `SELECT * FROM movies LIMIT 10`
+8. Does the preview show anything?
+9. Save the widget
+
+**Document**: How many steps to get from "I want a chart" to seeing data? Was any step confusing? What would you have needed (tooltips, examples, templates)?
+
+### Task 4: Customize a Chart
+
+1. Edit the widget you just created
+2. Try to change the chart type (e.g. from Table to Bar)
+3. Look for chart settings (labels, colors, title)
+4. Can you figure out how to set the X and Y axes?
+5. Try to add a title to the widget
+
+**Document**: Are the chart options intuitive? Do you know what "Column Mapping" means?
+
+### Task 5: Try Widget Lab (Templates)
+
+1. Navigate to Widget Lab
+2. Are there any templates?
+3. Try to create or use a template
+4. Is it clear how templates relate to dashboards?
+
+**Document**: Does Widget Lab make sense to a non-technical user?
+
+### Task 6: Check Your Profile
+
+1. Go to Settings
+2. Look at your profile
+3. Can you change your name?
+4. Can you see what permissions you have?
+
+**Document**: Is the settings page useful for a non-admin user?
+
+### Task 7: Try Something That Fails
+
+1. Try to access the Users page (you're a creator, not admin)
+2. Try to create a connection (if allowed)
+3. Try to delete someone else's dashboard (if visible)
+
+**Document**: Are the permission errors clear? Do you know WHY you can't do something?
+
+## Report Format
+
+```markdown
+## NeoBoard UX Friction Report — First-Time Creator
+
+### Session Summary
+
+- Steps completed: N
+- Tasks: N completed, N abandoned
+- Overall experience: [1-5 stars] + one sentence
+- Onboarding score: [1-5] (how easy was it to get started?)
+
+### Task-by-Task Walkthrough
+
+#### Task 1: First Impressions
+
+- **Goal**: Understand what NeoBoard is and what I can do
+- **What I saw**: [describe with screenshot]
+- **Confusion points**: [what was unclear]
+- **What I needed**: [help text, tutorial, tooltip, etc.]
+
+[... repeat for each task ...]
+
+### Onboarding Gaps
+
+1. [Critical] No guidance on what to do first
+2. [High] Query editor assumes you know Cypher/SQL
+3. ...
+
+### What Works Well
+
+- ...
+
+### "If I Were the Product Manager" — Top Suggestions
+
+| Priority | Suggestion | Why |
+| -------- | ---------- | --- |
+| P0       | ...        | ... |
+| P1       | ...        | ... |
+```
+
+## Rules
+
+- Take a screenshot at EVERY step — this is your evidence
+- Think like a REAL confused user, not a developer
+- If something doesn't have a label or tooltip, note it
+- If you have to guess what a button does, that's friction
+- If you abandon a task because it's too confusing, document WHY and move on
+- Don't read source code — you're a USER, not a developer
+- Compare to tools you know (Excel, Google Sheets, Tableau) when relevant
+- Check `npx @playwright/cli console` occasionally for JS errors (as a side note, not main focus)
+- If an error message is unhelpful, quote it and suggest a better one
diff --git a/.claude/agents/ux-crawler.md b/.claude/agents/ux-crawler.md
new file mode 100644
index 00000000..4c3af093
--- /dev/null
+++ b/.claude/agents/ux-crawler.md
@@ -0,0 +1,197 @@
+---
+name: ux-crawler
+description: Use this agent to simulate multiple users navigating the entire NeoBoard app, testing all user stories, and reporting UX issues and broken flows. Trigger when the user says "UX audit", "crawl the app", "test all user stories", "simulate users", or wants a comprehensive app review.
+model: sonnet
+tools: Read, Glob, Grep, Bash
+permissionMode: auto
+color: purple
+maxTurns: 200
+---
+
+# UX Crawler Agent
+
+You are a team of QA testers simulating real users exploring the NeoBoard application at **http://localhost:3000**. Your job is to methodically test every major user flow, identify broken functionality, and flag UX problems.
+
+## Browser Tool
+
+You interact with the browser using the **Playwright CLI** (`npx @playwright/cli`). Key commands:
+
+```bash
+# Session management
+npx @playwright/cli open http://localhost:3000    # start browser
+npx @playwright/cli goto <url>                     # navigate
+npx @playwright/cli close                          # close browser
+
+# Interactions
+npx @playwright/cli click '<selector>'             # click element
+npx @playwright/cli fill '<selector>' '<text>'     # fill input
+npx @playwright/cli type '<text>'                  # type into focused element
+npx @playwright/cli select '<selector>' '<value>'  # select dropdown
+npx @playwright/cli hover '<selector>'             # hover element
+npx @playwright/cli check '<selector>'             # check checkbox
+npx @playwright/cli uncheck '<selector>'           # uncheck checkbox
+
+# Inspection
+npx @playwright/cli screenshot                     # capture screenshot
+npx @playwright/cli snapshot                       # accessibility tree
+npx @playwright/cli console                        # JS console messages
+npx @playwright/cli network                        # network requests
+
+# Browser state
+npx @playwright/cli resize 1280 720               # set viewport
+npx @playwright/cli wait-for '<selector>'          # wait for element
+```
+
+## Personas
+
+Test with these personas in order. Close and reopen the browser between personas.
+
+### Persona 1: Admin (full access)
+
+- Login: `admin@neoboard.local` / `admin123`
+- Tests: Everything — user management, connections, settings, all dashboards
+
+### Persona 2: Creator (standard user)
+
+- Login: `bob@example.com` / `password123`
+- Tests: Dashboard CRUD, widget editing, query execution
+
+### Persona 3: Unauthorized (no session)
+
+- Don't log in — navigate directly to protected URLs
+- Verify all pages redirect to `/login`
+
+## Login Flow
+
+```bash
+npx @playwright/cli open http://localhost:3000/login
+npx @playwright/cli fill 'input[name="email"]' '<email>'
+npx @playwright/cli fill 'input[name="password"]' '<password>'
+npx @playwright/cli click 'button:has-text("Sign in")'
+npx @playwright/cli screenshot
+```
+
+## User Stories Checklist
+
+Work through these systematically. For each story: navigate, interact, screenshot, assess.
+
+### Authentication
+
+- [ ] Login with valid credentials — redirects to dashboard list
+- [ ] Login with wrong password — shows error, stays on login page
+- [ ] Logout — redirects to login, session cleared
+- [ ] Access protected page without login — redirects to /login
+
+### Dashboard List (Home Page)
+
+- [ ] Dashboard cards render with thumbnails and metadata
+- [ ] Create new dashboard — dialog opens, name required, creates successfully
+- [ ] Click dashboard card — navigates to dashboard view
+- [ ] Dashboard options menu — edit, delete, share, duplicate, export
+- [ ] Delete dashboard — confirmation dialog, removes from list
+- [ ] Empty state — shows when no dashboards exist
+- [ ] Scrolling — no layout shifts or visual jumps
+
+### Dashboard Editor
+
+- [ ] Add widget — type picker, connection selector, query editor, preview
+- [ ] Widget preview — renders chart/table when query runs
+- [ ] Edit widget — reopens editor with saved state
+- [ ] Delete widget — removes from grid
+- [ ] Multi-page — add page, rename, navigate between pages, delete page
+- [ ] Save — persists all changes
+
+### Widget Types (verify each renders)
+
+- [ ] Table — columns, sorting, pagination
+- [ ] Bar chart — axes, labels, tooltips
+- [ ] Line chart — axes, data points
+- [ ] Pie chart — slices, legend
+- [ ] Single value — number display
+- [ ] Graph — nodes, edges, layout options
+- [ ] JSON viewer — expandable tree
+
+### Connections
+
+- [ ] Connection list — shows all connections with status badges
+- [ ] Test connection — shows success/error with actual message
+- [ ] Error card click — expands to show error details
+- [ ] Edit connection — advanced settings
+- [ ] Delete connection — confirmation dialog
+
+### Users (Admin only)
+
+- [ ] User list — data grid with all users
+- [ ] Create user — name, email, password, role, force password change checkbox
+- [ ] Role dropdown — change user role
+- [ ] Require password change — dropdown action, shows temp password dialog with copy button
+- [ ] Delete user — confirmation, removes from list
+- [ ] Self-protection — can't change own role or delete self
+
+### Settings
+
+- [ ] Profile tab — shows account info
+- [ ] Edit display name — save, success feedback
+- [ ] Change password — validation errors, success feedback
+- [ ] API Keys tab — create, copy, revoke
+
+### Cross-Cutting Concerns
+
+- [ ] Dark mode — toggle theme, verify all pages render correctly
+- [ ] Sidebar navigation — all items work, active state correct
+- [ ] Sidebar collapse — content area expands, labels hidden
+- [ ] Loading states — spinners shown during data fetch
+- [ ] Toast notifications — appear for success/error actions
+- [ ] Console errors — check for JS errors on every page
+
+## Reporting Format
+
+After completing the crawl, produce this report:
+
+```
+## NeoBoard UX Audit Report
+
+### Executive Summary
+[Overall app quality: X/10]
+[Critical issues found: N]
+[Total issues: N]
+
+### Critical Issues (broken functionality)
+1. [Page] — [Description] — [Screenshot]
+
+### High Issues (bad UX, confusing flows)
+1. [Page] — [Description] — [Screenshot]
+
+### Medium Issues (visual bugs, inconsistencies)
+1. [Page] — [Description] — [Screenshot]
+
+### Low Issues (polish, nice-to-haves)
+1. [Page] — [Description] — [Screenshot]
+
+### User Story Coverage
+| Story | Persona | Status | Notes |
+|-------|---------|--------|-------|
+| Login | Admin | PASS | |
+| ... | ... | ... | ... |
+
+### Dark Mode Issues
+[List any contrast or visibility problems]
+
+### Console Errors
+[List any JS errors found]
+
+### Positive Findings
+[Things that work well and should be preserved]
+```
+
+## Rules
+
+- Take a screenshot at EVERY page you visit — build a visual record
+- Use `npx @playwright/cli snapshot` on key pages for accessibility checks
+- Run `npx @playwright/cli console` on every page to catch JS errors
+- If something is broken, screenshot it and move on — don't get stuck
+- Test with real data — use the seeded dashboards and connections
+- If the app crashes or shows a white screen, screenshot and report immediately
+- Do NOT modify any code or data through the browser — read-only exploration
+- If login fails, stop and report — all subsequent tests depend on auth
+- Set viewport to 1280x720 at the start for consistent screenshots
diff --git a/.claude/hooks/check-boundaries.sh b/.claude/hooks/check-boundaries.sh
new file mode 100755
index 00000000..ac559348
--- /dev/null
+++ b/.claude/hooks/check-boundaries.sh
@@ -0,0 +1,29 @@
+#!/bin/bash
+# Enforce package boundary rules from CLAUDE.md
+# - component/ must NOT import from app/ or connection/
+# - connection/ must NOT import React, app/, or component/
+INPUT=$(cat)
+FILE_PATH=$(echo "$INPUT" | jq -r '.tool_input.file_path // .tool_input.filePath // empty')
+[ -z "$FILE_PATH" ] && exit 0
+
+# Get the content being written
+NEW_CONTENT=$(echo "$INPUT" | jq -r '.tool_input.new_string // .tool_input.content // empty')
+[ -z "$NEW_CONTENT" ] && exit 0
+
+# component/ must NOT import from app/ or connection/
+if [[ "$FILE_PATH" == *"/component/src/"* ]]; then
+  if echo "$NEW_CONTENT" | grep -qE "(from|import|require)[[:space:]]*['\"].*/(app|connection)/|(from|import|require)[[:space:]]*['\"]@/(app|connection)"; then
+    echo "BLOCKED: component/ cannot import from app/ or connection/. See CLAUDE.md architecture rules." >&2
+    exit 2
+  fi
+fi
+
+# connection/ must NOT import from app/, component/, or React
+if [[ "$FILE_PATH" == *"/connection/src/"* ]]; then
+  if echo "$NEW_CONTENT" | grep -qE "(from|import|require)[[:space:]]*['\"]react(-dom)?['\"/]|(from|import|require)[[:space:]]*['\"].*/(app|component)/|(from|import|require)[[:space:]]*['\"]@/(app|component)"; then
+    echo "BLOCKED: connection/ cannot import React, app/, or component/. See CLAUDE.md architecture rules." >&2
+    exit 2
+  fi
+fi
+
+exit 0
diff --git a/.claude/hooks/check-coverage.sh b/.claude/hooks/check-coverage.sh
new file mode 100755
index 00000000..79c222d3
--- /dev/null
+++ b/.claude/hooks/check-coverage.sh
@@ -0,0 +1,38 @@
+#!/bin/bash
+# Hook G: Coverage Threshold Warning
+# After test runs, warn if coverage drops below 80%
+# Event: PostToolUse (Bash) — non-blocking, async
+
+INPUT=$(cat)
+COMMAND=$(echo "$INPUT" | jq -r '.tool_input.command // empty')
+[ -z "$COMMAND" ] && exit 0
+
+# Only activate for test commands
+echo "$COMMAND" | grep -qE '(vitest|npm test|npm run test|npx vitest)' || exit 0
+
+STDOUT=$(echo "$INPUT" | jq -r '.tool_result.stdout // empty')
+[ -z "$STDOUT" ] && exit 0
+
+# Look for coverage summary lines like "All files | 44.12 | ..."
+LOW_COVERAGE=false
+WARNING_MSG=""
+
+while IFS= read -r line; do
+  # Match vitest coverage table format: "All files | XX.XX |"
+  if echo "$line" | grep -qE '^\s*(All files|Statements|Branches|Functions|Lines)\s*\|?\s*[0-9]+(\.[0-9]+)?'; then
+    PCT=$(echo "$line" | grep -oE '[0-9]+(\.[0-9]+)?' | head -1)
+    if [ -n "$PCT" ]; then
+      INT_PCT=$(echo "$PCT" | cut -d. -f1)
+      if [ "$INT_PCT" -lt 80 ] 2>/dev/null; then
+        LOW_COVERAGE=true
+        WARNING_MSG="${WARNING_MSG}  $(echo "$line" | xargs)\n"
+      fi
+    fi
+  fi
+done <<< "$STDOUT"
+
+if [ "$LOW_COVERAGE" = true ]; then
+  printf '{"hookSpecificOutput":{"hookEventName":"PostToolUse","additionalContext":"WARNING: Coverage below 80%% target:\\n%s\\nConsider adding tests before committing."}}' "$WARNING_MSG"
+fi
+
+exit 0
diff --git a/.claude/hooks/check-credential-logging.sh b/.claude/hooks/check-credential-logging.sh
new file mode 100755
index 00000000..dbd7d372
--- /dev/null
+++ b/.claude/hooks/check-credential-logging.sh
@@ -0,0 +1,31 @@
+#!/bin/bash
+# Hook B: Credential Logging Guard
+# Blocks console.log/warn/error of credential-related variables
+# Rule: "NEVER log decrypted credentials."
+
+INPUT=$(cat)
+FILE_PATH=$(echo "$INPUT" | jq -r '.tool_input.file_path // .tool_input.filePath // empty')
+[ -z "$FILE_PATH" ] && exit 0
+
+# Only check TypeScript files in app/ and connection/ (handle both absolute and relative paths)
+case "$FILE_PATH" in
+  *app/src/*|*connection/src/*) ;;
+  *) exit 0 ;;
+esac
+echo "$FILE_PATH" | grep -qE '\.(ts|tsx)$' || exit 0
+
+# Get the content being written/edited
+NEW_CONTENT=$(echo "$INPUT" | jq -r '.tool_input.new_string // .tool_input.content // empty')
+[ -z "$NEW_CONTENT" ] && exit 0
+
+# Credential-related identifiers (case-insensitive)
+CRED_PATTERN='(password|passwd|secret|credential|apiKey|api_key|encryptionKey|encryption_key|decrypted|privateKey|private_key|accessToken|access_token|refreshToken|refresh_token)'
+
+# Detect console.log/warn/error/debug containing credential identifiers
+if echo "$NEW_CONTENT" | grep -iE "console\.(log|warn|error|debug|info)" | grep -qiE "${CRED_PATTERN}"; then
+  echo "BLOCKED: Detected logging of credential-related variable." >&2
+  echo "Rule: NEVER log decrypted credentials. Remove the log statement or redact sensitive data." >&2
+  exit 2
+fi
+
+exit 0
diff --git a/.claude/hooks/check-query-safety.sh b/.claude/hooks/check-query-safety.sh
new file mode 100755
index 00000000..05bbc148
--- /dev/null
+++ b/.claude/hooks/check-query-safety.sh
@@ -0,0 +1,45 @@
+#!/bin/bash
+# Hook A: Query Interpolation Guard
+# Blocks string interpolation in SQL/Cypher query strings
+# Rule: "ALWAYS use parameterized queries. NEVER interpolate user input into query strings."
+
+INPUT=$(cat)
+FILE_PATH=$(echo "$INPUT" | jq -r '.tool_input.file_path // .tool_input.filePath // empty')
+[ -z "$FILE_PATH" ] && exit 0
+
+# Only check files in connection/ and API routes (handle both absolute and relative paths)
+case "$FILE_PATH" in
+  *connection/src/*|*app/src/app/api/*) ;;
+  *) exit 0 ;;
+esac
+
+# Only check TypeScript files
+echo "$FILE_PATH" | grep -qE '\.(ts|tsx)$' || exit 0
+
+# Get the content being written/edited
+NEW_CONTENT=$(echo "$INPUT" | jq -r '.tool_input.new_string // .tool_input.content // empty')
+[ -z "$NEW_CONTENT" ] && exit 0
+
+# Detect template literals with interpolation that look like queries
+# Check for SQL/Cypher keywords near ${...} interpolation
+QUERY_KEYWORDS='(SELECT|INSERT|UPDATE|DELETE|MERGE|MATCH|CREATE|DROP|ALTER|CALL|RETURN|WITH|UNWIND)'
+if echo "$NEW_CONTENT" | grep -qiE "${QUERY_KEYWORDS}" && echo "$NEW_CONTENT" | grep -qF '${'; then
+  # Confirm it's interpolation inside a template literal (backtick string), not just a standalone ${
+  # Look for lines that have both a query keyword and ${...} pattern
+  if echo "$NEW_CONTENT" | grep -iE "${QUERY_KEYWORDS}" | grep -qF '${'; then
+    echo "BLOCKED: Detected string interpolation (\${...}) near a query keyword." >&2
+    echo "Rule: ALWAYS use parameterized queries. NEVER interpolate user input into query strings." >&2
+    echo "Use query parameters (\$1, \$2 for PostgreSQL or \$paramName for Neo4j) instead." >&2
+    exit 2
+  fi
+fi
+
+# Detect string concatenation with query keywords
+# Pattern: a quoted string containing a query keyword, followed by + (concat operator)
+if echo "$NEW_CONTENT" | grep -iE "${QUERY_KEYWORDS}" | grep -qE '["\"][[:space:]]*\+[[:space:]]'; then
+  echo "BLOCKED: Detected string concatenation in what appears to be a query." >&2
+  echo "Rule: ALWAYS use parameterized queries. NEVER interpolate user input." >&2
+  exit 2
+fi
+
+exit 0
diff --git a/.claude/hooks/enforce-e2e.sh b/.claude/hooks/enforce-e2e.sh
new file mode 100755
index 00000000..1433103c
--- /dev/null
+++ b/.claude/hooks/enforce-e2e.sh
@@ -0,0 +1,56 @@
+#!/bin/bash
+# Hook: Enforce E2E testing when UI files are edited
+# Three modes:
+#   mark          — PostToolUse Edit|Write: flag when UI files change
+#   check-commit  — PreToolUse Bash: block git commit if E2E not run
+#   clear-on-test — PostToolUse Bash: clear flag after playwright runs
+
+PROJECT_DIR="${CLAUDE_PROJECT_DIR:-$(git rev-parse --show-toplevel 2>/dev/null)}"
+[ -z "$PROJECT_DIR" ] && exit 0
+MARKER="$PROJECT_DIR/.claude/.e2e-needed"
+
+case "$1" in
+  mark)
+    INPUT=$(cat)
+    FILE_PATH=$(echo "$INPUT" | jq -r '.tool_input.file_path // .tool_input.filePath // empty')
+    [ -z "$FILE_PATH" ] && exit 0
+    case "$FILE_PATH" in
+      */app/src/components/*|*/app/src/app/*)
+        touch "$MARKER"
+        if ! grep -qxF "$FILE_PATH" "$MARKER" 2>/dev/null; then
+          echo "$FILE_PATH" >> "$MARKER"
+        fi
+        ;;
+    esac
+    ;;
+
+  check-commit)
+    INPUT=$(cat)
+    CMD=$(echo "$INPUT" | jq -r '.tool_input.command // empty')
+    # Only trigger on git commit commands
+    echo "$CMD" | grep -qE '^\s*git commit' || exit 0
+    [ ! -f "$MARKER" ] && exit 0
+    COUNT=$(sort -u "$MARKER" | wc -l | tr -d ' ')
+    echo "BLOCKED: $COUNT UI file(s) were edited but Playwright E2E tests have not been run this session." >&2
+    echo "Run first: cd app && npx playwright test" >&2
+    echo "" >&2
+    echo "Edited UI files:" >&2
+    sort -u "$MARKER" | while read -r f; do echo "  - $f" >&2; done
+    exit 2
+    ;;
+
+  clear-on-test)
+    INPUT=$(cat)
+    CMD=$(echo "$INPUT" | jq -r '.tool_input.command // empty')
+    # Clear marker when playwright tests are run
+    echo "$CMD" | grep -qE 'playwright test' || exit 0
+    [ -f "$MARKER" ] && rm -f "$MARKER"
+    ;;
+
+  *)
+    echo "Usage: enforce-e2e.sh <mark|check-commit|clear-on-test>" >&2
+    exit 1
+    ;;
+esac
+
+exit 0
diff --git a/.claude/hooks/format-and-lint.sh b/.claude/hooks/format-and-lint.sh
new file mode 100755
index 00000000..648aaae1
--- /dev/null
+++ b/.claude/hooks/format-and-lint.sh
@@ -0,0 +1,28 @@
+#!/bin/bash
+# Auto-format and lint TypeScript files after edits
+# Reads file path from stdin JSON (PostToolUse provides tool_input)
+INPUT=$(cat)
+FILE_PATH=$(echo "$INPUT" | jq -r '.tool_input.file_path // .tool_input.filePath // empty')
+[ -z "$FILE_PATH" ] && exit 0
+
+# Only process TypeScript files
+echo "$FILE_PATH" | grep -qE '\.(ts|tsx)$' || exit 0
+
+# Run prettier first
+npx prettier --write "$FILE_PATH" 2>/dev/null || true
+
+# Determine package and run appropriate linter
+PROJECT_DIR="${CLAUDE_PROJECT_DIR:-$(git rev-parse --show-toplevel 2>/dev/null)}"
+[ -z "$PROJECT_DIR" ] && exit 0
+
+REL_PATH="${FILE_PATH#$PROJECT_DIR/}"
+
+if [[ "$REL_PATH" == app/* ]]; then
+  cd "$PROJECT_DIR/app" && npx next lint --fix --file "${REL_PATH#app/}" 2>/dev/null || true
+elif [[ "$REL_PATH" == component/* ]]; then
+  cd "$PROJECT_DIR/component" && npx eslint --fix "$FILE_PATH" 2>/dev/null || true
+elif [[ "$REL_PATH" == connection/* ]]; then
+  cd "$PROJECT_DIR/connection" && npx eslint --fix "$FILE_PATH" 2>/dev/null || true
+fi
+
+exit 0
\ No newline at end of file
diff --git a/.claude/hooks/session-context.sh b/.claude/hooks/session-context.sh
new file mode 100755
index 00000000..df056b5d
--- /dev/null
+++ b/.claude/hooks/session-context.sh
@@ -0,0 +1,63 @@
+#!/bin/bash
+# Hook E: Inject useful context at session start
+# Event: SessionStart (startup)
+
+PROJECT_DIR="${CLAUDE_PROJECT_DIR:-$(git rev-parse --show-toplevel 2>/dev/null)}"
+[ -z "$PROJECT_DIR" ] && exit 0
+cd "$PROJECT_DIR"
+
+echo "=== Session Context ==="
+
+# Current branch & tracking
+BRANCH=$(git branch --show-current 2>/dev/null)
+echo "Branch: $BRANCH"
+
+TRACKING=$(git rev-parse --abbrev-ref "@{upstream}" 2>/dev/null)
+if [ -n "$TRACKING" ]; then
+  AHEAD=$(git rev-list --count "$TRACKING..HEAD" 2>/dev/null)
+  BEHIND=$(git rev-list --count "HEAD..$TRACKING" 2>/dev/null)
+  echo "Tracking: $TRACKING (ahead $AHEAD, behind $BEHIND)"
+else
+  echo "Tracking: no upstream set"
+fi
+
+# Working tree status
+if git diff --quiet && git diff --cached --quiet; then
+  UNTRACKED=$(git ls-files --others --exclude-standard | wc -l | tr -d ' ')
+  if [ "$UNTRACKED" = "0" ]; then
+    echo "Working tree: clean"
+  else
+    echo "Working tree: clean ($UNTRACKED untracked files)"
+  fi
+else
+  MODIFIED=$(git diff --name-only | wc -l | tr -d ' ')
+  STAGED=$(git diff --cached --name-only | wc -l | tr -d ' ')
+  echo "Working tree: $MODIFIED modified, $STAGED staged"
+fi
+
+# Recent commits
+echo ""
+echo "Recent commits:"
+git log --oneline -5 2>/dev/null
+
+# Open PR on this branch
+echo ""
+PR_INFO=$(gh pr view --json number,title,state,url 2>/dev/null)
+if [ $? -eq 0 ] && [ -n "$PR_INFO" ]; then
+  PR_NUM=$(echo "$PR_INFO" | jq -r '.number')
+  PR_TITLE=$(echo "$PR_INFO" | jq -r '.title')
+  PR_STATE=$(echo "$PR_INFO" | jq -r '.state')
+  PR_URL=$(echo "$PR_INFO" | jq -r '.url')
+  echo "Open PR: #$PR_NUM — $PR_TITLE ($PR_STATE)"
+  echo "URL: $PR_URL"
+else
+  echo "No open PR on this branch."
+fi
+
+# Persist project dir as env var for other hooks via CLAUDE_ENV_FILE
+if [ -n "$CLAUDE_ENV_FILE" ]; then
+  echo "NEOBOARD_PROJECT_DIR=$PROJECT_DIR" >> "$CLAUDE_ENV_FILE"
+  echo "NEOBOARD_BRANCH=$BRANCH" >> "$CLAUDE_ENV_FILE"
+fi
+
+exit 0
diff --git a/.claude/settings.json b/.claude/settings.json
new file mode 100644
index 00000000..d9a0b82c
--- /dev/null
+++ b/.claude/settings.json
@@ -0,0 +1,184 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npm *)",
+      "Bash(npx *)",
+      "Bash(gh *)",
+      "Bash(git *)",
+      "Bash(node *)",
+      "Bash(cat *)",
+      "Bash(ls *)",
+      "Bash(find *)",
+      "Bash(grep *)",
+      "Bash(head *)",
+      "Bash(tail *)",
+      "Bash(wc *)",
+      "Bash(echo *)",
+      "Bash(mkdir *)",
+      "Bash(cp *)",
+      "Bash(mv *)",
+      "Bash(docker compose *)",
+      "Read(*)",
+      "Edit(*)",
+      "Write(*)"
+    ],
+    "deny": [
+      "Bash(rm -rf /)",
+      "Bash(rm -rf ~)",
+      "Edit(.env*)",
+      "Write(.env*)",
+      "Write(*.pem)",
+      "Edit(*.pem)",
+      "Write(*.key)",
+      "Edit(*.key)",
+      "Write(*credentials*)",
+      "Edit(*credentials*)"
+    ]
+  },
+  "hooks": {
+    "PreToolUse": [
+      {
+        "matcher": "Edit|Write",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "[ \"$(git branch --show-current)\" != \"main\" ] || { echo 'Cannot edit on main. Create a feature branch first.' >&2; exit 2; }",
+            "timeout": 5
+          },
+          {
+            "type": "command",
+            "command": "\"$CLAUDE_PROJECT_DIR\"/.claude/hooks/check-boundaries.sh",
+            "timeout": 5,
+            "statusMessage": "Checking package boundaries..."
+          },
+          {
+            "type": "command",
+            "command": "\"$CLAUDE_PROJECT_DIR\"/.claude/hooks/check-query-safety.sh",
+            "timeout": 5,
+            "statusMessage": "Checking query safety..."
+          },
+          {
+            "type": "command",
+            "command": "\"$CLAUDE_PROJECT_DIR\"/.claude/hooks/check-credential-logging.sh",
+            "timeout": 5,
+            "statusMessage": "Checking credential logging..."
+          },
+          {
+            "type": "command",
+            "command": "INPUT=$(cat); FILE_PATH=$(echo \"$INPUT\" | jq -r '.tool_input.file_path // .tool_input.filePath // empty'); NEW_CONTENT=$(echo \"$INPUT\" | jq -r '.tool_input.new_string // .tool_input.content // empty'); [ -z \"$NEW_CONTENT\" ] && exit 0; if echo \"$NEW_CONTENT\" | grep -qE \"import \\* as echarts from ['\\\"]echarts['\\\"]|from ['\\\"]echarts['\\\"]\" && ! echo \"$NEW_CONTENT\" | grep -q 'echarts/core'; then echo 'BLOCKED: Never import * from echarts. Use echarts/core + specific modules.' >&2; exit 2; fi",
+            "timeout": 5
+          },
+          {
+            "type": "command",
+            "command": "INPUT=$(cat); FILE_PATH=$(echo \"$INPUT\" | jq -r '.tool_input.file_path // .tool_input.filePath // empty'); [ -z \"$FILE_PATH\" ] && exit 0; case \"$FILE_PATH\" in */app/src/*__tests__*|*/app/src/*__test__*) ;; *) exit 0 ;; esac; NEW_CONTENT=$(echo \"$INPUT\" | jq -r '.tool_input.new_string // .tool_input.content // empty'); [ -z \"$NEW_CONTENT\" ] && exit 0; if echo \"$NEW_CONTENT\" | grep -qE \"@testing-library/react|react-dom/test-utils|from ['\\\"]vitest-dom\"; then echo 'BLOCKED: Do NOT add render tests (@testing-library/react) in app/. Use Playwright E2E or put component tests in component/ package.' >&2; exit 2; fi",
+            "timeout": 5
+          },
+          {
+            "type": "command",
+            "command": "INPUT=$(cat); FILE_PATH=$(echo \"$INPUT\" | jq -r '.tool_input.file_path // .tool_input.filePath // empty'); [ -z \"$FILE_PATH\" ] && exit 0; case \"$FILE_PATH\" in */app/src/components/*) ;; *) exit 0 ;; esac; NEW_CONTENT=$(echo \"$INPUT\" | jq -r '.tool_input.new_string // .tool_input.content // empty'); [ -z \"$NEW_CONTENT\" ] && exit 0; if echo \"$NEW_CONTENT\" | grep -qiE \"from ['\\\"]echarts|from ['\\\"]@neo4j-nvl|from ['\\\"]leaflet|from ['\\\"]react-leaflet\"; then if ! echo \"$NEW_CONTENT\" | grep -q 'ssr: false'; then echo 'BLOCKED: Chart/map components in app/ MUST use next/dynamic with ssr: false. Add dynamic(() => import(...), { ssr: false }).' >&2; exit 2; fi; fi",
+            "timeout": 5
+          }
+        ]
+      },
+      {
+        "matcher": "Bash",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "INPUT=$(cat); CMD=$(echo \"$INPUT\" | jq -r '.tool_input.command // empty'); if echo \"$CMD\" | grep -qE '^npm (install|uninstall|remove|add) [a-zA-Z@]'; then echo \"BLOCKED: npm dependency changes require explicit user approval. Ask first.\" >&2; exit 2; fi",
+            "timeout": 5
+          },
+          {
+            "type": "command",
+            "command": "\"$CLAUDE_PROJECT_DIR\"/.claude/hooks/enforce-e2e.sh check-commit",
+            "timeout": 5,
+            "statusMessage": "Checking E2E requirement..."
+          }
+        ]
+      }
+    ],
+    "PostToolUse": [
+      {
+        "matcher": "Edit|Write",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "\"$CLAUDE_PROJECT_DIR\"/.claude/hooks/format-and-lint.sh",
+            "timeout": 30,
+            "statusMessage": "Formatting & linting..."
+          },
+          {
+            "type": "command",
+            "command": "\"$CLAUDE_PROJECT_DIR\"/.claude/hooks/enforce-e2e.sh mark",
+            "timeout": 5,
+            "async": true
+          }
+        ]
+      },
+      {
+        "matcher": "Bash",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "\"$CLAUDE_PROJECT_DIR\"/.claude/hooks/check-coverage.sh",
+            "timeout": 10,
+            "async": true
+          },
+          {
+            "type": "command",
+            "command": "\"$CLAUDE_PROJECT_DIR\"/.claude/hooks/enforce-e2e.sh clear-on-test",
+            "timeout": 5,
+            "async": true
+          }
+        ]
+      }
+    ],
+    "SessionStart": [
+      {
+        "matcher": "startup",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "\"$CLAUDE_PROJECT_DIR\"/.claude/hooks/session-context.sh",
+            "timeout": 15,
+            "statusMessage": "Loading session context..."
+          }
+        ]
+      }
+    ],
+    "Stop": [
+      {
+        "hooks": [
+          {
+            "type": "prompt",
+            "prompt": "You are a completion checklist for the NeoBoard project. FIRST: check if stop_hook_active is true in the input — if so, return {\"decision\": \"allow\"} immediately to prevent infinite loops.\n\nOtherwise, review the conversation transcript and check:\n1. If code files were edited, were relevant tests run (vitest AND playwright)?\n2. If files in app/ were edited, was linting run?\n3. If UI/visual changes were made, were before/after screenshots taken?\n\nIf ALL applicable checks pass (or no code was edited), return {\"decision\": \"allow\"}.\nIf a critical check was missed, return {\"decision\": \"block\", \"reason\": \"<what was missed>\"}.\n\nBe pragmatic — only flag genuinely missed steps, not minor oversights. If the user is just exploring or planning, return {\"decision\": \"allow\"}.",
+            "model": "haiku",
+            "timeout": 15
+          }
+        ]
+      }
+    ],
+    "PreCompact": [
+      {
+        "hooks": [
+          {
+            "type": "command",
+            "command": "printf '{\"hookSpecificOutput\":{\"hookEventName\":\"PreCompact\",\"additionalContext\":\"CRITICAL RULES (re-injected after compaction):\\n- TDD mandatory: write failing test FIRST, then implement\\n- Package boundaries: component/ has NO business logic/API/stores; connection/ has NO React/UI\\n- Query safety: NEVER interpolate user input, ALWAYS parameterized queries\\n- Run cd app && npx next lint --fix after app/ changes\\n- Run npm run build before committing\\n- PRs target dev branch, not main\\n- Coverage target: 80%% per package\\n- WORKTREE AGENTS: tests are safe to run locally (dynamic ports). CI is the source of truth.\\n- ORCHESTRATOR: max 3 concurrent workers. Never auto-merge. Track CONFLICT_FILES across workers.\"}}'",
+            "timeout": 5
+          }
+        ]
+      }
+    ],
+    "Notification": [
+      {
+        "hooks": [
+          {
+            "type": "command",
+            "command": "if command -v osascript >/dev/null 2>&1; then osascript -e 'display notification \"Claude needs your attention\" with title \"NeoBoard\" sound name \"Ping\"' 2>/dev/null; elif command -v notify-send >/dev/null 2>&1; then notify-send -u normal 'NeoBoard' 'Claude needs your attention' 2>/dev/null; fi; exit 0",
+            "timeout": 5
+          }
+        ]
+      }
+    ]
+  }
+}
diff --git a/.claude/skills/code/SKILL.md b/.claude/skills/code/SKILL.md
new file mode 100644
index 00000000..bb979a69
--- /dev/null
+++ b/.claude/skills/code/SKILL.md
@@ -0,0 +1,46 @@
+---
+name: code
+description: Implement features, fix bugs, refactor. For ALL coding tasks. Reads issue if given a number.
+model: sonnet
+allowed-tools: Read, Write, Edit, MultiEdit, Bash(npm *), Bash(npx *), Bash(git *), Bash(gh *), Bash(cat *), Bash(ls *), Bash(find *), Bash(grep *), Bash(head *), Bash(tail *), Bash(mkdir *)
+---
+
+# Code — NeoBoard
+
+## State
+
+- Branch: !`git branch --show-current`
+- Status: !`git status --short`
+
+## Before coding
+
+1. If issue number: `gh issue view <number>`
+2. If existing PR: `gh pr view <number> --comments` — check CodeRabbit & SonarQube feedback
+3. Identify package: component/ (UI only), connection/ (DB only), app/ (orchestration)
+4. Read relevant docs in `claude_code_docs/`
+
+## TDD Workflow (mandatory — no exceptions)
+
+1. **Red** — Write a failing test describing the expected behavior. Run it. Confirm it fails.
+2. **Green** — Write the minimum code to make the test pass. No gold-plating.
+3. **Refactor** — Clean up without breaking tests.
+
+Do NOT write implementation before the test. Do NOT skip this for "small" changes. This step also includes e2e testing.
+
+## Standards
+
+- TypeScript strict. No `any`.
+- Parameterized queries only.
+- Read-only: `BEGIN READ ONLY` (PG), session access modes (Neo4j).
+- Lazy load charts: `next/dynamic` + `ssr: false`.
+- ECharts: modular imports only.
+
+## After coding
+
+```bash
+cd app && npx next lint --fix
+npm run build
+cd app && npm test
+```
+
+$ARGUMENTS = task description or issue number.
diff --git a/.claude/skills/commit/SKILL.md b/.claude/skills/commit/SKILL.md
new file mode 100644
index 00000000..4b1ca805
--- /dev/null
+++ b/.claude/skills/commit/SKILL.md
@@ -0,0 +1,23 @@
+---
+name: commit
+description: Stage and commit changes using Conventional Commits.
+disable-model-invocation: true
+allowed-tools: Bash(git *)
+model: haiku
+---
+
+## Current state
+
+- Status: !`git status --short`
+- Recent: !`git log --oneline -5`
+- Branch: !`git branch --show-current`
+
+## Instructions
+
+1. Stage relevant changes
+2. Commit with Conventional Commits: `type(scope): description`
+3. Types: feat, fix, chore, docs, refactor, test, perf, security
+4. Scopes: app, component, connection, auth, encryption, migration, api, widget, chart
+5. Do NOT push
+
+$ARGUMENTS = guidance for commit message.
diff --git a/.claude/skills/components/SKILL.md b/.claude/skills/components/SKILL.md
new file mode 100644
index 00000000..972352ef
--- /dev/null
+++ b/.claude/skills/components/SKILL.md
@@ -0,0 +1,68 @@
+---
+name: components
+description: Build UI using NeoBoard's existing component library. Use when creating pages, widgets, dashboards, or any user-facing UI. Reads Storybook stories to understand available components before writing new code.
+model: sonnet
+allowed-tools: Read, Write, Edit, MultiEdit, Bash(npm *), Bash(npx *), Bash(find *), Bash(cat *), Bash(grep *), Bash(ls *)
+---
+
+# NeoBoard Component Library
+
+Before building any UI, understand what already exists. Do NOT create new components when an existing one works.
+
+## Step 1 — Discover existing components
+
+Read the component library to understand what's available:
+
+```bash
+# Find all component source files
+find component/src -name '*.tsx' -not -name '*.test.*' -not -name '*.stories.*' | head -40
+
+# Find all Storybook stories (these show usage patterns)
+find component/src -name '*.stories.tsx' | head -40
+
+# Read a story to understand a component's API and variants
+# (pick a relevant story from the list above)
+```
+
+## Step 2 — Check before creating
+
+Before writing a new component, search for existing ones:
+
+```bash
+# Search by name
+grep -rl 'export.*Button\|export.*Card\|export.*Modal' component/src/
+# Search by functionality
+grep -rl 'dropdown\|select\|tooltip\|dialog' component/src/
+```
+
+## Step 3 — Compose from existing
+
+NeoBoard UI is built by composing from these layers:
+
+1. **shadcn/ui** — Base primitives (Button, Dialog, Input, Select, etc.)
+2. **component/** — NeoBoard components built on shadcn (charts, widgets, parameter selectors)
+3. **app/** — Pages and layouts that compose NeoBoard components
+
+Always prefer: shadcn primitive → existing NeoBoard component → new component (last resort).
+
+## Step 4 — If creating a new component
+
+Put it in `component/src/` following these rules:
+
+- Props-driven, no internal API calls or store access
+- Use shadcn/ui primitives as building blocks
+- Tailwind for styling
+- Add a Storybook story showing all variants
+- Add unit tests
+- Export from the package index
+
+## Step 5 — Storybook
+
+After modifying or adding components:
+
+```bash
+# Run Storybook to visually verify
+npm run storybook
+```
+
+$ARGUMENTS = what to build or which component to modify.
diff --git a/.claude/skills/design-review/skill.md b/.claude/skills/design-review/skill.md
new file mode 100644
index 00000000..05b6bf09
--- /dev/null
+++ b/.claude/skills/design-review/skill.md
@@ -0,0 +1,380 @@
+---
+name: design-review
+description: Design Review — NeoBoard Design Taste Document
+model: haiku
+user-invocable: false
+---
+
+# Design Review — NeoBoard Design Taste Document
+
+Extracted from the actual codebase. Not aspirational — this IS the system.
+
+## When to Use
+
+Before touching ANY UI code (pages, components, layouts, modals), read this document. After any visual change, compare against these patterns. Flag deviations in PR descriptions.
+
+---
+
+## 1. Visual Hierarchy
+
+### Elevation Stack (low to high)
+
+1. **Page background**: `bg-background` (white / `hsl(0 0% 100%)`)
+2. **Cards**: `bg-card` + `shadow` + `rounded-xl border` — cards float above page
+3. **Overlays**: `bg-background/80 backdrop-blur-sm` + `shadow-md` — semi-transparent blur
+4. **Dialogs**: `bg-background` + `shadow-lg` on overlay `bg-black/80` — highest z-level
+5. **Tooltips**: `bg-primary text-primary-foreground` — inverted colors, no explicit shadow
+
+### Z-Index Layers
+
+- Sidebar: normal flow (no z-index)
+- Dropdowns/Popovers: z-50 (Radix default)
+- Dialog overlay: z-50 `fixed inset-0`
+- Toasts: z-[100] (Sonner default)
+
+### Active/Selected States
+
+- Sidebar active: `bg-accent text-accent-foreground`
+- Tab active: `border-b-2 border-primary text-foreground` (bottom border emphasis)
+- Connection card active: `border-primary` ring
+- Selection in lists: `bg-accent/50`
+
+---
+
+## 2. Spacing & Density
+
+### The Rules
+
+- **Page root padding**: `p-6` — ALWAYS. Every `(dashboard)` page uses this.
+- **Section gaps**: `space-y-4` between major sections, `gap-4` in grids.
+- **Form field gaps**: `space-y-2` between label+input groups.
+- **Card padding**: `p-6` is the standard (CardHeader, CardContent, CardFooter).
+- **Inline element gaps**: `gap-2` between buttons, badges, icons.
+
+### Known Deviations (Intentional)
+
+- `WidgetCard`: Uses `p-4 pb-2` header / `p-4 pt-2` content — INTENTIONALLY denser because widgets are packed in a grid. This is the "compact card" pattern.
+- `ConnectionCard`: Uses `p-4` — also compact, for list density.
+
+### Anti-Pattern: DO NOT
+
+- Use `p-3` or `p-5` — they break the 4/6 rhythm.
+- Use `gap-1` for button groups — too tight. Use `gap-2`.
+- Mix `space-y-2` and `space-y-3` in the same form — pick one per form.
+- Add `p-8` or larger — nothing in the codebase uses this, it'll look out of place.
+
+---
+
+## 3. Color Usage
+
+### Semantic Color Map (CSS Variables, HSL)
+
+| Token                | Light                      | Usage                            |
+| -------------------- | -------------------------- | -------------------------------- |
+| `--background`       | `0 0% 100%` (white)        | Page backgrounds                 |
+| `--foreground`       | `0 0% 3.9%` (near-black)   | Body text                        |
+| `--card`             | `0 0% 100%` (white)        | Card surfaces                    |
+| `--muted`            | `0 0% 96.1%` (light gray)  | Disabled bgs, secondary surfaces |
+| `--muted-foreground` | `0 0% 45.1%` (medium gray) | Captions, metadata, descriptions |
+| `--primary`          | `0 0% 9%` (near-black)     | Buttons, active states           |
+| `--secondary`        | `0 0% 96.1%` (light gray)  | Secondary buttons                |
+| `--destructive`      | `0 84.2% 60.2%` (red)      | Delete buttons, error states     |
+| `--border`           | `0 0% 89.8%` (light gray)  | All borders                      |
+| `--input`            | `0 0% 89.8%` (light gray)  | Input borders                    |
+| `--ring`             | `0 0% 3.9%` (near-black)   | Focus rings                      |
+
+### Chart Colors (10-color "Deep Ocean" palette — colorblind-safe)
+
+```css
+/* Light mode */
+--chart-1: hsl(217, 91%, 60%) /* Blue */ --chart-2: hsl(38, 92%, 50%)
+  /* Amber */ --chart-3: hsl(347, 77%, 50%) /* Rose */
+  --chart-4: hsl(160, 84%, 39%) /* Teal */ --chart-5: hsl(271, 81%, 56%)
+  /* Purple */ --chart-6: hsl(24, 90%, 48%) /* Orange */
+  --chart-7: hsl(142, 71%, 45%) /* Green */ --chart-8: hsl(199, 89%, 48%)
+  /* Sky */ --chart-9: hsl(326, 78%, 42%) /* Wine */
+  --chart-10: hsl(55, 70%, 45%) /* Olive */;
+```
+
+Dark mode uses the same hues with higher lightness for contrast on dark backgrounds.
+Ordering maximises sequential contrast: the first 5 span Blue → Amber → Rose → Teal → Purple so typical 2–5-series charts are always distinguishable. Similar hues (e.g. Orange/Amber, Green/Teal) are placed far apart.
+
+### Color Rules
+
+- NEVER use raw hex/hsl values in components. Always use CSS variable tokens.
+- Opacity modifiers allowed: `/80`, `/60`, `/50` for overlays and hover states.
+- Role badges: admin = `destructive` (red), creator = `default` (blue), reader = `secondary` (gray).
+- Connection status: connected = implicit (no color), error = `destructive`, connecting = neutral.
+- `text-muted-foreground` is the workhorse for secondary text (50 occurrences in component lib).
+
+---
+
+## 4. Chart Styling
+
+### ECharts Integration Pattern
+
+- Colors resolved at runtime from CSS variables via `resolveChartColors()` in `base-chart.tsx`.
+- Fallback array exists for SSR: `CHART_COLORS_FALLBACK` (Deep Ocean light palette).
+- Two registered ECharts themes: `neoboard-light` and `neoboard-dark` (registered once at module load via `registerNeoboardThemes()`). Themes set axis, label, legend, and split-line colors for each mode.
+- Dark mode detection via `MutationObserver` on `<html class="dark">` — charts reinitialize on theme toggle.
+- Loading mask adapts to dark mode: `rgba(10, 15, 30, 0.6)` dark / `rgba(255, 255, 255, 0.6)` light.
+
+### Chart Defaults
+
+```typescript
+// Bar/Line chart grid (standard)
+grid: { left: 16, right: 16, top: 16, bottom: 24, containLabel: true }
+
+// Compact mode (container < 300px)
+grid: { left: 8, right: 8, top: 8, bottom: 8 }
+
+// Legend position
+legend: { bottom: 0 }  // ALWAYS bottom-aligned
+
+// Tooltip
+tooltip: { trigger: "axis", axisPointer: { type: "shadow" } }
+```
+
+### Chart Anti-Patterns
+
+- NEVER import `import * as echarts from 'echarts'` — use modular imports from `echarts/core`.
+- NEVER set chart colors inline — always use `resolveChartColors()`.
+- NEVER add title inside the chart — widget card header IS the title.
+- NEVER register additional ECharts themes — use `neoboard-light` / `neoboard-dark` only.
+- Dark mode chart colors are DIFFERENT from light mode — this is by design (higher lightness for contrast).
+
+### Graph Chart (NVL)
+
+- Force-directed default layout.
+- Supports: circular, hierarchical layouts via dropdown.
+- Context menu: right-click for expand/collapse neighbors.
+- Status bar shows node/edge counts.
+- Loading via NVL's built-in loading state.
+
+---
+
+## 5. Typography Scale
+
+### The Actual Scale Used
+
+| Class       | Size | Weight          | Where Used                                                               |
+| ----------- | ---- | --------------- | ------------------------------------------------------------------------ |
+| `text-xs`   | 12px | `font-medium`   | Labels, badges, captions, metadata timestamps                            |
+| `text-sm`   | 14px | `font-medium`   | **DOMINANT** — body text, form labels, descriptions, buttons, menu items |
+| `text-base` | 16px | normal          | Input text (rendered content)                                            |
+| `text-lg`   | 18px | `font-semibold` | Page titles, dialog headers, card titles                                 |
+
+### Weight Rules
+
+- `font-medium` (500): Default for interactive elements (buttons, links, nav items) — 38 occurrences.
+- `font-semibold` (600): Section headings, card titles, emphasis — 13 occurrences.
+- `font-bold` (700): Rare. Only metric values and strong emphasis — 4 occurrences.
+- Default (400): Body text, descriptions, form help text.
+
+### Typography Anti-Patterns
+
+- DO NOT use `text-2xl` or `text-3xl` — nothing in the codebase uses them. The scale stops at `text-lg`.
+- DO NOT use `font-bold` for headings — use `font-semibold`. Bold is reserved for metric emphasis.
+- Card titles: `font-semibold leading-none tracking-tight` (from CardTitle). Match this exactly.
+- Descriptions always: `text-sm text-muted-foreground` (from CardDescription).
+
+---
+
+## 6. Border & Radius Patterns
+
+### Border Radius Hierarchy
+
+| Class          | Computed              | Where Used                                                           |
+| -------------- | --------------------- | -------------------------------------------------------------------- |
+| `rounded-xl`   | 12px                  | Card base ONLY                                                       |
+| `rounded-lg`   | 8px (`var(--radius)`) | Dialogs (`sm:rounded-lg`), popovers                                  |
+| `rounded-md`   | 6px                   | **DOMINANT** — buttons, inputs, selects, menu items (40 occurrences) |
+| `rounded-sm`   | 4px                   | Compact elements, close buttons, tiny controls                       |
+| `rounded-full` | 9999px                | Avatars, status dots, toggle switches, badges                        |
+
+### Border Rules
+
+- Standard border: `border border-border` (1px, light gray) for most elements.
+- Active emphasis: `border-2 border-primary` (2px, black) for selected items (connection type picker).
+- Tab active: `border-b-2 border-primary` (bottom-only 2px).
+- Separators: `border-t` for horizontal dividers between sections.
+- NEVER use `border-4` — only 1 occurrence exists and it's anomalous.
+
+### Shadow Scale
+
+| Class       | Where Used                                                           |
+| ----------- | -------------------------------------------------------------------- |
+| `shadow-sm` | Buttons (outline, secondary, destructive), inputs — subtle elevation |
+| `shadow`    | Card base, default button — standard card elevation                  |
+| `shadow-md` | Floating menus, graph overlay — mid-elevation                        |
+| `shadow-lg` | Popovers, dropdowns — high elevation overlays                        |
+
+---
+
+## 7. Component Patterns
+
+### Dialog Sizing Progression
+
+```text
+sm   → max-w-[425px]  — Simple confirmations
+md   → max-w-lg       — Standard forms (DEFAULT)
+lg   → max-w-[700px]  — Multi-section forms
+xl   → max-w-[900px]  — Complex editors
+full → max-w-[calc(100vw-2rem)] — Fullscreen views
+```
+
+Widget editor uses: `sm:max-w-md` (step 1) → `sm:max-w-6xl` (step 2).
+
+### Button Usage Patterns
+
+- Primary actions (Save, Create): `variant="default"` (black bg)
+- Cancel/Close: `variant="outline"`
+- Destructive (Delete): `variant="destructive"` (red bg)
+- Toolbar actions: `variant="ghost" size="icon"` or `variant="ghost" size="sm"`
+- Inline/subtle: `variant="ghost"` with icon
+- In widget cards: `variant="ghost" size="icon" className="h-8 w-8"` (custom smaller)
+
+### Empty State Pattern
+
+Always use the `EmptyState` component from component lib:
+
+- Icon (optional): Lucide icon, muted color
+- Title: `text-lg font-semibold`
+- Description: `text-sm text-muted-foreground`
+- Action button (optional): Primary variant
+
+### Loading Patterns
+
+- Page load: `useSession({ required: true })` shows loading spinner in layout
+- Button loading: `LoadingButton` with `loading` prop, shows spinner + text
+- Data fetching: skeleton placeholders (not yet widely implemented)
+- Chart loading: ECharts internal loading indicator
+- Overlay: `LoadingOverlay` component for full-container blocking loads
+
+---
+
+## 8. Responsive Grid
+
+### Dashboard Card Grid
+
+```text
+grid gap-4 sm:grid-cols-2 lg:grid-cols-3
+```
+
+- Mobile (< 640px): 1 column
+- Tablet (640-1023px): 2 columns
+- Desktop (1024px+): 3 columns
+
+### Dashboard Widget Grid (react-grid-layout)
+
+```text
+lg: 1200px → 12 columns
+md: 996px  → 10 columns
+sm: 768px  → 6 columns
+xs: 480px  → 4 columns
+```
+
+Resize handle: southeast corner only.
+
+### Form Grids
+
+```text
+grid gap-4 sm:grid-cols-2  // Connection form: stacked on mobile, 2-col on tablet+
+grid grid-cols-2 gap-4     // Type picker: always 2-col
+```
+
+---
+
+## 9. Consistency Checklist
+
+Before submitting any UI PR, verify:
+
+- [ ] Page root uses `p-6`
+- [ ] Cards use standard `p-6` padding (or `p-4` only for compact widget/connection cards)
+- [ ] Text hierarchy: `text-lg` for titles, `text-sm` for body, `text-xs` for metadata
+- [ ] Descriptions use `text-sm text-muted-foreground`
+- [ ] Interactive elements have `text-sm font-medium`
+- [ ] Buttons use correct variant (default=primary, outline=cancel, destructive=delete, ghost=toolbar)
+- [ ] Form fields use `space-y-2` internal spacing
+- [ ] Section gaps use `space-y-4`
+- [ ] Colors reference CSS variable tokens, never raw values
+- [ ] Charts use `resolveChartColors()`, never inline colors
+- [ ] Border radius matches component type (xl=cards, md=buttons/inputs, full=circles)
+- [ ] Empty states use the `EmptyState` component
+- [ ] Loading states use `LoadingButton` or `LoadingOverlay`
+
+---
+
+## 10. Anti-Patterns — Red Flags
+
+These are the fingerprints of careless or AI-generated UI work. Flag immediately in reviews.
+
+### Layout Anti-Patterns
+
+- **Nested cards**: Cards inside cards create visual noise — flatten the hierarchy
+- **Everything in cards**: Not every element needs a container — use whitespace and grouping instead
+- **Identical card grids**: Same-sized cards with icon + heading + text, repeated endlessly — vary the layout
+- **Everything centered**: Left-aligned text with asymmetric layouts feels more intentional
+- **Same spacing everywhere**: No rhythm — use tight groupings near related elements, generous separations between sections
+- **Modal overuse**: Modals when inline expansion, drawer, or page navigation would work better
+
+### Color Anti-Patterns
+
+- **Gray text on colored backgrounds**: Looks washed out — use a tinted shade of the background color or transparency instead
+- **Pure black/white**: `#000` or `#fff` never appear in nature — always use the semantic tokens (`--foreground`, `--background`)
+- **Hard-coded hex/hsl**: Bypasses theming and dark mode — use CSS variable tokens
+- **Gradient text on metrics**: Decorative, not meaningful — plain colored text is clearer
+- **Neon accents on dark backgrounds**: The "AI color palette" — cyan, purple-to-blue gradients
+
+### Typography Anti-Patterns
+
+- **Overused fonts**: Inter, Roboto, Arial as conscious choices (NeoBoard uses system font stack via shadcn — don't override it)
+- **Monospace as "technical" vibes**: Lazy shorthand — use it only for actual code/query content
+- **Big icons above headings**: Rounded-corner icons above every section title — rarely adds value, looks templated
+
+### Motion Anti-Patterns
+
+- **Bounce/elastic easing**: Feels dated — use smooth deceleration (ease-out)
+- **Animating layout properties**: width, height, padding, margin cause layout thrashing — use transform and opacity only
+- **Glassmorphism everywhere**: Blur effects and glass cards used decoratively rather than purposefully
+
+### Copy Anti-Patterns
+
+- **Redundant headers**: Title that restates the page name, description that repeats the heading
+- **Every button is primary**: Use ghost, outline, secondary — hierarchy matters
+- **Generic error messages**: "Error occurred" — say what happened and how to fix it
+
+---
+
+## 11. Design Critique Format
+
+When reviewing UI changes, structure feedback as:
+
+### Overall Impression
+
+One-sentence gut reaction — what works, what doesn't.
+
+### What's Working
+
+2-3 things done well and why they work. Be specific.
+
+### Priority Issues (top 3-5)
+
+For each:
+
+- **What**: Name the problem
+- **Why it matters**: Impact on users
+- **Fix**: Concrete recommendation
+- **Reference**: Which section of this document it violates
+
+### Minor Observations
+
+Quick notes on smaller issues.
+
+### Questions to Consider
+
+Provocative questions that might unlock better solutions:
+
+- "Does this need to feel this complex?"
+- "What would a more confident version look like?"
+- "Is the primary action obvious within 2 seconds?"
diff --git a/.claude/skills/drill/SKILL.md b/.claude/skills/drill/SKILL.md
new file mode 100644
index 00000000..37340fd9
--- /dev/null
+++ b/.claude/skills/drill/SKILL.md
@@ -0,0 +1,117 @@
+---
+name: drill
+description: Requirements drill — ask structured questions about an issue before starting implementation. Use when given an issue number or feature request to gather scope, edge cases, UX decisions, and acceptance criteria.
+trigger: when the user says "/drill", "drill issue", "drill #", or asks to "drill" before implementing
+---
+
+# Requirements Drill
+
+You are a senior engineering lead conducting a requirements drill before implementation begins. Your goal is to eliminate ambiguity and surface edge cases BEFORE any code is written.
+
+## Process
+
+### Step 1: Read the Issue
+
+If the user provides a GitHub issue number, fetch it:
+
+```
+gh issue view <number> --repo alfredo1996/neoboard
+```
+
+Read the title, body, labels, and any linked issues. If no issue number is given, ask the user to describe the feature.
+
+### Step 2: Explore Related Code
+
+Use the Explore agent to quickly scan the codebase for:
+
+- Existing implementations of similar features
+- Files that will likely need changes
+- Related tests that already exist
+- Architecture patterns to follow
+
+### Step 3: Ask Questions (3-5 rounds)
+
+Use `AskUserQuestion` to ask structured questions. Each round should cover one dimension:
+
+**Round 1 — Scope & Boundaries**
+
+- What's in scope vs explicitly out of scope?
+- Does this touch app/, component/, connection/, or multiple packages?
+- Are there dependencies on other issues?
+
+**Round 2 — User Experience**
+
+- What does the user see/do? (step by step)
+- What happens on error?
+- Loading states? Empty states?
+- Mobile/responsive behavior needed?
+
+**Round 3 — Edge Cases**
+
+- What happens with large datasets? (1000+ rows)
+- Null/undefined/empty data?
+- Concurrent users? Race conditions?
+- What if the user navigates away mid-action?
+
+**Round 4 — Security & Multi-tenancy**
+
+- Does this touch API routes? If so: auth, tenant_id, can_write checks?
+- User input sanitization needed?
+- Credential exposure risk?
+
+**Round 5 — Testing & Verification**
+
+- How should we verify this works? (manual steps)
+- Which test types apply? (unit, E2E, both)
+- What's the acceptance criteria? (checkbox list)
+
+### Step 4: Summarize & Confirm
+
+After all questions are answered, produce a structured summary:
+
+```markdown
+## Issue #N — [Title]
+
+### Scope
+
+- [what's included]
+- NOT: [what's excluded]
+
+### UX Flow
+
+1. User does X
+2. System shows Y
+3. On error: Z
+
+### Edge Cases
+
+- [case]: [behavior]
+
+### Security
+
+- [relevant checks]
+
+### Acceptance Criteria
+
+- [ ] criterion 1
+- [ ] criterion 2
+
+### Files to Modify
+
+- path/to/file.ts — [what changes]
+
+### Test Plan
+
+- [ ] Unit: [what to test]
+- [ ] E2E: [what to test]
+```
+
+Save this summary to the plan file if in plan mode, or present it for the user to approve before starting implementation.
+
+## Rules
+
+- Ask ONLY relevant questions — skip security questions for pure UI changes, skip E2E questions for pure utility functions
+- Adapt the number of rounds based on issue complexity (simple bug = 2 rounds, complex feature = 5 rounds)
+- If the user says "skip" or "default" to a question, make a reasonable assumption and note it
+- Never start coding during a drill — this is pure requirements gathering
+- Reference existing NeoBoard patterns from the codebase in your questions (e.g., "should this follow the same pattern as the styling rules editor?")
diff --git a/.claude/skills/fix-pr-reviews/SKILL.md b/.claude/skills/fix-pr-reviews/SKILL.md
new file mode 100644
index 00000000..e7da5dee
--- /dev/null
+++ b/.claude/skills/fix-pr-reviews/SKILL.md
@@ -0,0 +1,138 @@
+---
+name: fix-pr-reviews
+description: Extract, fix, and resolve all SonarCloud + CodeRabbit bot review issues for a PR.
+model: sonnet
+allowed-tools: Read, Write, Edit, Bash(gh *), Bash(git *), Bash(npm *), Bash(npx *), Grep(*), Glob(*)
+---
+
+## State
+
+- Branch: !`git branch --show-current`
+- PR: $ARGUMENTS
+
+## Phase 1 — Extract Issues
+
+Collect all bot review issues from the PR. Use `$ARGUMENTS` as the PR number.
+Read `SONAR_TOKEN` from `app/.env.local` (variable name: `SONAR_TOKEN`).
+
+### SonarCloud (direct API — richer than GitHub annotations)
+
+```bash
+# Resolve the project key from the SonarCloud check-run details URL
+# (usually visible in gh pr checks output, e.g. https://sonarcloud.io/dashboard?id=<project-key>&pullRequest=N)
+gh pr checks $ARGUMENTS --json name,detailsUrl \
+  --jq '.[] | select(.name | test("sonarcloud"; "i")) | .detailsUrl'
+
+# Query issues for this PR directly from SonarCloud REST API
+# Replace <project-key> with the key resolved above
+curl -s -u "$SONAR_TOKEN:" \
+  "https://sonarcloud.io/api/issues/search?projectKeys=<project-key>&pullRequest=$ARGUMENTS&resolved=false" \
+  | jq '.issues[] | {key, rule, severity, message, component, line, effort, tags}'
+
+# Severities: BLOCKER, CRITICAL, MAJOR, MINOR, INFO
+# Map to fix priority: BLOCKER/CRITICAL=security+bugs, MAJOR=perf+smells, MINOR/INFO=nitpicks
+```
+
+### CodeRabbit (GitHub API)
+
+```bash
+# Inline review comments
+gh api repos/{owner}/{repo}/pulls/$ARGUMENTS/comments \
+  --jq '[.[] | select(.user.login == "coderabbitai[bot]")]'
+
+# Top-level PR comments
+gh pr view $ARGUMENTS --comments --json comments \
+  --jq '[.comments[] | select(.author.login == "coderabbitai[bot]")]'
+
+# Review bodies
+gh api repos/{owner}/{repo}/pulls/$ARGUMENTS/reviews \
+  --jq '[.[] | select(.user.login == "coderabbitai[bot]")]'
+```
+
+**Filter rules:**
+
+- `sonarcloud[bot]`: use direct API results; extract rule key, severity, component (file path), line
+- `coderabbitai[bot]`: keep actionable items only; skip already-resolved threads and suggestions explicitly marked as optional/nitpick
+- Ignore comments from human reviewers in this pass (address separately)
+
+## Phase 2 — Fix
+
+Apply fixes in priority order: **security > bugs > performance > code smells > nitpicks**
+
+NeoBoard conventions to enforce:
+
+- TypeScript strict — no untyped `any`, explicit return types
+- Parameterized queries only — never interpolate user input
+- Tenant isolation — `tenant_id` filter on every DB query
+- `next/dynamic` + `ssr: false` for all chart/widget components
+- Modular ECharts imports (`echarts/core` + specific modules)
+- No empty `catch` blocks — handle or rethrow with context
+- `can_write` permission enforced server-side in API routes
+- Package boundaries: `component/` has no stores/API calls, `connection/` has no React
+
+For CodeRabbit suggestions that include a diff/code block, apply the provided change directly.
+For SonarCloud issues, fix at the reported file:line per the rule description.
+
+## Phase 3 — Verify
+
+Run all checks after applying fixes. Do NOT skip any step.
+
+```bash
+npx tsc --noEmit
+npm run lint
+cd app && npm test
+```
+
+Run the test skill to see that everything is ok.
+Fix any new errors introduced during the review fixes before proceeding.
+
+## Phase 4 — Resolve Conversations (GraphQL)
+
+Resolve only the GitHub review threads that were addressed in Phase 2.
+
+```bash
+# Get pull request node ID and all review threads
+gh api graphql -f query='
+  query($owner: String!, $repo: String!, $number: Int!) {
+    repository(owner: $owner, name: $repo) {
+      pullRequest(number: $number) {
+        id
+        reviewThreads(first: 100) {
+          nodes {
+            id
+            isResolved
+            comments(first: 1) {
+              nodes { author { login } body }
+            }
+          }
+        }
+      }
+    }
+  }
+' -f owner="{owner}" -f repo="{repo}" -F number=$ARGUMENTS
+```
+
+For each thread that was fixed, resolve it:
+
+```bash
+gh api graphql -f query='
+  mutation($threadId: ID!) {
+    resolveReviewThread(input: { threadId: $threadId }) {
+      thread { id isResolved }
+    }
+  }
+' -f threadId="<THREAD_NODE_ID>"
+```
+
+**Do NOT resolve threads that were not addressed.**
+
+## Phase 5 — Summary Table
+
+Output a markdown table of all issues processed:
+
+| Source            | File             | Line | Rule / Category  | Severity   | Fix Applied              | Thread Resolved |
+| ----------------- | ---------------- | ---- | ---------------- | ---------- | ------------------------ | --------------- |
+| sonarcloud[bot]   | path/to/file.ts  | 42   | typescript:S1234 | MAJOR      | Yes — removed unused var | N/A             |
+| coderabbitai[bot] | path/to/other.ts | 88   | Performance      | suggestion | Yes — applied diff block | Yes             |
+
+End with a count: `Fixed: N issues · Resolved: M threads · Skipped: K (not addressed)`
diff --git a/.claude/skills/github-workflow/SKILL.md b/.claude/skills/github-workflow/SKILL.md
new file mode 100644
index 00000000..a978e5f6
--- /dev/null
+++ b/.claude/skills/github-workflow/SKILL.md
@@ -0,0 +1,13 @@
+---
+name: github
+description: GitHub conventions, labels, branching for NeoBoard.
+model: haiku
+---
+
+# Branch: feat/, fix/, chore/, docs/, refactor/, security/
+
+# Commits: type(scope): description
+
+# Scopes: app, component, connection, auth, encryption, migration, api, widget, chart
+
+# Labels: type (bug/enhancement/security/...) + package (pkg:app/pkg:component/pkg:connection) + area
diff --git a/.claude/skills/harden/SKILL.md b/.claude/skills/harden/SKILL.md
new file mode 100644
index 00000000..84c86c9c
--- /dev/null
+++ b/.claude/skills/harden/SKILL.md
@@ -0,0 +1,144 @@
+---
+name: harden
+description: Strengthen NeoBoard UI against edge cases, error states, text overflow, large datasets, connector failures, and real-world usage scenarios.
+model: sonnet
+user-invokable: true
+args:
+  - name: target
+    description: The page, component, or feature to harden (optional)
+    required: false
+---
+
+Harden interfaces against the edge cases and failure modes that break idealized designs. Designs that only work with perfect data aren't production-ready.
+
+## Assess Hardening Needs
+
+Test with extreme inputs by reading code and identifying vulnerabilities:
+
+### 1. Query & Data Edge Cases (NeoBoard-Specific)
+
+- **Long Cypher/SQL**: Queries with 50+ lines in query editor — does it scroll properly?
+- **Large result sets**: 10,000+ rows returned — virtual scrolling or pagination in data-grid?
+- **Empty results**: Query returns 0 rows — does widget show `EmptyState` or blank?
+- **Type mismatches**: Query returns strings where chart expects numbers — graceful fallback?
+- **Null/undefined values**: Sparse data with missing fields — chart handles gaps?
+- **Mixed types**: Neo4j returns both nodes and scalars — `CardContainer` shows "Incompatible data format"?
+- **Preview limit**: `wrapWithPreviewLimit` appends LIMIT 25 — tested with queries that already have LIMIT?
+
+### 2. Connector Failures
+
+- **Connection timeout**: 30s timeout hit — clear error message with retry?
+- **Auth failure**: Invalid credentials — redirect to connection settings, not cryptic error?
+- **Connection lost mid-query**: WebSocket/driver disconnect — widget error state with retry?
+- **Rate limiting**: p-queue saturation — queued indicator or backpressure feedback?
+- **Encryption errors**: Lost ENCRYPTION_KEY — clear "unrecoverable" message, not stack trace?
+
+### 3. Widget Error States
+
+- **Chart render failure**: ECharts throws — caught by error boundary, shows fallback?
+- **NVL/Leaflet load failure**: Dynamic import fails — error boundary, not white screen?
+- **Widget type change**: Switching chart type with incompatible data — validated before render?
+- **Parameter dependency**: Widget depends on parameter that has no value yet — loading or empty state?
+- **Stale cache**: Cached query results outdated — refresh mechanism works?
+
+### 4. Text Overflow & Layout
+
+- **Long dashboard names**: 100+ character title — truncated with ellipsis?
+- **Long connector names**: Overflow in sidebar, connection cards, dropdowns?
+- **Long query text**: In widget header subtitle, tooltips?
+- **Long form values**: In field-picker selections, parameter display?
+- **Narrow viewports**: Widget grid at xs breakpoint (480px, 4 columns) — content readable?
+
+Apply these patterns:
+
+```css
+/* Single line truncation */
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Flex item overflow prevention */
+.flex-item {
+  min-width: 0;
+  overflow: hidden;
+}
+
+/* Grid item overflow prevention */
+.grid-item {
+  min-width: 0;
+  min-height: 0;
+}
+```
+
+### 5. Form Widget Validation
+
+- **Required fields empty**: Form widget submitted with empty required fields — inline error?
+- **Type coercion**: String input for integer parameter — validated before query execution?
+- **Concurrent submissions**: Double-click submit — button disabled during loading?
+- **Form reset**: After successful submission — form cleared or preserved?
+
+### 6. Multi-Tenancy Edge Cases
+
+- **Tenant mismatch**: API request with wrong tenantId — rejected server-side, not data leak?
+- **Permission downgrade**: User role changed mid-session — next request enforces new role?
+- **Cross-tenant URLs**: Direct URL to another tenant's dashboard — 403, not 404?
+- **`can_write` enforcement**: Write operations checked server-side in API route, not just UI?
+
+### 7. Dashboard Operations
+
+- **Import malformed JSON**: Dashboard import with invalid structure — validated with clear error?
+- **Export large dashboard**: 50+ widgets — export completes, file size reasonable?
+- **Concurrent edits**: Two tabs editing same dashboard — last-write-wins or conflict detection?
+- **Delete with dependencies**: Dashboard with shared parameters — cascade handled?
+
+### 8. Loading States
+
+Every async operation needs feedback:
+
+- **Initial page load**: Skeleton or spinner (not blank page)
+- **Query execution**: Widget loading indicator
+- **Connection test**: `LoadingButton` with spinner
+- **Dashboard save**: Save button disabled + spinner
+- **Import/export**: Progress indication for large operations
+
+### 9. Error Recovery
+
+- **Network offline**: Clear "No connection" message, auto-retry when back online?
+- **Session expired**: Redirect to login, preserve attempted URL for post-login redirect?
+- **API 500**: Generic error with "try again" — never expose stack traces to user
+- **Partial failure**: 3 of 5 widgets fail to load — show errors per-widget, not page-level crash
+
+## Hardening Workflow
+
+1. **Read the code** for the target area
+2. **List vulnerabilities** from the categories above
+3. **Prioritize** by impact (data loss/security > UX > cosmetic)
+4. **Fix** each issue with minimal, targeted changes
+5. **Test** each fix — write tests for critical paths (API validation, auth checks)
+6. **Run existing tests** to confirm no regressions
+
+## Verify Hardening
+
+After fixes:
+
+- [ ] Long text doesn't break layouts (test with 100+ char strings)
+- [ ] Empty states show `EmptyState` component with action guidance
+- [ ] Error states show clear messages with retry options
+- [ ] Loading states visible for all async operations
+- [ ] Form validation prevents invalid submissions
+- [ ] `can_write` enforced server-side for all write API routes
+- [ ] `tenant_id` filter present in all DB queries
+- [ ] No console errors in any state (empty, error, loading, full)
+- [ ] `npm run build` passes
+- [ ] Relevant test suite passes
+
+**NEVER**:
+
+- Assume perfect input
+- Leave error messages generic ("Error occurred")
+- Trust client-side validation alone (always validate server-side)
+- Block entire interface when one widget errors (isolate failures)
+- Expose stack traces, SQL, or Cypher to users
+- Skip the multi-tenancy checks — data leaks are critical bugs
diff --git a/.claude/skills/issue/SKILL.md b/.claude/skills/issue/SKILL.md
new file mode 100644
index 00000000..705cba8f
--- /dev/null
+++ b/.claude/skills/issue/SKILL.md
@@ -0,0 +1,20 @@
+---
+name: issue
+description: Create a GitHub issue with proper labels.
+disable-model-invocation: true
+allowed-tools: Bash(gh *)
+model: haiku
+---
+
+## Instructions
+
+Create a GitHub issue based on $ARGUMENTS.
+
+Labels — always apply type + package + area:
+
+- Type: bug, enhancement, security, documentation, performance, urgent
+- Package: pkg:app, pkg:component, pkg:connection
+- Area: area:auth, area:connectors, area:widgets, area:charts, area:query-exec, area:dashboard, area:api
+- Special: enterprise, breaking-change, good-first-issue
+
+Title format: `type(scope): description`
diff --git a/.claude/skills/next/SKILL.md b/.claude/skills/next/SKILL.md
new file mode 100644
index 00000000..276800a6
--- /dev/null
+++ b/.claude/skills/next/SKILL.md
@@ -0,0 +1,82 @@
+---
+name: next
+description: Autonomously pick the next issue from the backlog, implement it, test, commit, and open a PR. Zero-input autopilot.
+model: sonnet
+disable-model-invocation: true
+allowed-tools: Read, Write, Edit, MultiEdit, Bash(npm *), Bash(npx *), Bash(git *), Bash(gh *), Bash(cat *), Bash(ls *), Bash(find *), Bash(grep *), Bash(head *), Bash(tail *), Bash(mkdir *)
+---
+
+# Autopilot — Pick next issue, implement, PR
+
+## Step 1 — Find the next issue to work on
+
+```bash
+# Get open issues from the current milestone, sorted by priority
+gh issue list --state open --assignee @me --limit 5 --json number,title,labels,milestone,body
+# If nothing assigned to you, get unassigned issues from the earliest milestone
+gh issue list --state open --limit 10 --json number,title,labels,milestone,body --jq '[.[] | select(.assignees | length == 0)] | sort_by(.milestone.title) | .[0:5]'
+```
+
+Pick the first issue that:
+
+1. Is in the earliest open milestone
+2. Has no unresolved dependencies (check body for 'Depends on #X' — verify those are closed)
+3. Is not labeled `blocked`
+
+If $ARGUMENTS is a number, use that issue instead of picking.
+
+## Step 2 — Assign yourself and create a branch
+
+```bash
+gh issue edit <number> --add-assignee @me
+git checkout dev && git pull origin dev
+git checkout -b <type>/<short-description>
+```
+
+Branch prefix from labels: bug → fix/, enhancement → feat/, security → security/, docs → docs/.
+
+## Step 3 — Read the issue and relevant docs
+
+Read the full issue body. Check `claude_code_docs/` for relevant context.
+Identify which package(s) are affected: app/, component/, connection/.
+
+## Step 4 — Implement
+
+Follow all CLAUDE.md rules. Respect package boundaries.
+If building UI, check existing components first (`find component/src -name '*.tsx'`).
+
+## Step 5 — Test and lint
+
+```bash
+npm run lint:fix
+npm run build
+npm run test
+```
+
+Fix any failures. Do not skip.
+
+## Step 6 — Commit
+
+Use Conventional Commits: `type(scope): description`
+Reference the issue: `Closes #<number>`
+
+## Step 7 — Push and create PR
+
+```bash
+git push -u origin HEAD
+gh pr create \
+  --title '<conventional commit title>' \
+  --base dev \
+  --body '## Summary\n...\n\n## Changes\n...\n\n## Testing\n- [x] Unit tests\n- [x] Lint passes\n- [x] Build passes\n\nCloses #<number>' \
+  --label '<labels from the issue>'
+```
+
+## Step 8 — Report
+
+Output:
+
+- Issue number and title
+- What was implemented
+- Files changed
+- PR link
+- What to review
diff --git a/.claude/skills/plan/SKILL.md b/.claude/skills/plan/SKILL.md
new file mode 100644
index 00000000..470bf700
--- /dev/null
+++ b/.claude/skills/plan/SKILL.md
@@ -0,0 +1,27 @@
+---
+name: plan
+description: Architecture plan for complex features. Analyzes impact, security, scalability, breaks into tasks.
+model: opus
+context: fork
+allowed-tools: Read, Write, Bash(cat *), Bash(ls *), Bash(find *), Bash(grep *), Bash(gh *), Bash(git log *)
+---
+
+# Plan — Opus
+
+You are a **planning-only** agent. You must NEVER write implementation code, modify source files, create tests, or make any changes to the codebase. Your ONLY job is to read, analyze, and produce a thorough written plan.
+
+Use ultrathink. Analyze: requirements, architecture impact, security, scalability, dependencies.
+Read relevant source files and docs in `claude_code_docs/` to understand the current state.
+
+For each task in the plan, provide:
+
+- The exact file(s) to modify and what to change (with code snippets showing the before/after)
+- Why the change is needed
+- What tests to write and what they should assert
+- Dependencies on other tasks
+
+Output a plan with: Summary, Architecture Decision, Affected Packages, Ordered Tasks (S/M/L sized), Migration needed?, Security Checklist, Testing Strategy, Risks, Suggested GitHub Issues.
+
+Save the plan to `claude_code_docs/plans/` using the Write tool. Do NOT modify any other files.
+
+$ARGUMENTS = feature or change to plan.
diff --git a/.claude/skills/pr/SKILL.md b/.claude/skills/pr/SKILL.md
new file mode 100644
index 00000000..e47b0cdc
--- /dev/null
+++ b/.claude/skills/pr/SKILL.md
@@ -0,0 +1,44 @@
+---
+name: pr
+description: Create a GitHub PR with labels, conventional commit title, structured body.
+model: haiku
+disable-model-invocation: true
+allowed-tools: Bash(gh *), Bash(git *), Bash(npm *)
+---
+
+## State
+
+- Branch: !`git branch --show-current`
+- Commits: !`git log origin/dev..HEAD --oneline 2>/dev/null || echo 'No upstream'`
+- Changed: !`git diff origin/dev --name-only 2>/dev/null || git diff --name-only`
+
+## Pre-flight (fix failures before creating PR)
+
+1. `git fetch origin && git rebase origin/dev` (PRs always target `dev`)
+2. `npm run lint`
+3. `npm run build`
+4. Run tests for affected packages (`cd app && npm test`, `cd component && npm test`)
+5. If updating existing PR: `gh pr view <number> --comments` — address CodeRabbit/SonarQube feedback
+
+## Labels (required: type + package)
+
+- Type: bug, enhancement, security, documentation, breaking-change, performance
+- Package: pkg:app, pkg:component, pkg:connection
+- Area: area:auth, area:connectors, area:widgets, area:charts, area:query-exec, area:dashboard, area:api
+- Special: enterprise, breaking-change
+
+## PR body template
+
+```
+## Summary
+[1-2 sentences]
+## Changes
+- [bullets]
+## Testing
+- [ ] Unit tests added/updated
+- [ ] E2E tests pass
+## Related Issues
+Closes #[number]
+```
+
+$ARGUMENTS = context for PR description.
diff --git a/.claude/skills/prioritize/SKILL.md b/.claude/skills/prioritize/SKILL.md
new file mode 100644
index 00000000..43a552e1
--- /dev/null
+++ b/.claude/skills/prioritize/SKILL.md
@@ -0,0 +1,20 @@
+---
+name: prioritize
+description: Read all open issues, assess priority, produce ranked backlog.
+model: opus
+context: fork
+disable-model-invocation: true
+allowed-tools: Read, Bash(gh issue *), Bash(gh api *), Bash(cat *), Bash(grep *)
+---
+
+# Prioritize — Opus
+
+Use ultrathink. Fetch all open issues with `gh issue list --state open --limit 100 --json number,title,labels,assignees,createdAt,body`.
+
+For each: assess Impact (1-5), Effort (S/M/L/XL), Autonomous suitability (✅/⚠️/❌).
+
+Priority: P0 (security/blockers), P1 (high-impact), P2 (medium), P3 (backlog).
+
+Output ranked table + Recommended Sprint (top 5) + Issues for auto-implementation.
+
+$ARGUMENTS = optional filters (e.g. 'enterprise only', 'pkg:connection').
diff --git a/.claude/skills/release-plan/SKILL.md b/.claude/skills/release-plan/SKILL.md
new file mode 100644
index 00000000..5abb36d3
--- /dev/null
+++ b/.claude/skills/release-plan/SKILL.md
@@ -0,0 +1,77 @@
+---
+name: release-plan
+description: Read a product spec or feature doc, break it into milestones and GitHub issues with proper labels, dependencies, and ordering. Use when turning a product spec into an actionable backlog.
+model: opus
+context: fork
+allowed-tools: Read, Bash(gh *), Bash(cat *), Bash(find *), Bash(grep *), Bash(ls *)
+---
+
+# Release Plan — Opus
+
+Turn a product spec into GitHub milestones and issues. Use ultrathink.
+
+## Input
+
+$ARGUMENTS should be a path to the spec file (e.g. `claude_code_docs/PROJECT.md`) or a description of what to plan.
+
+## Step 1 — Read the spec
+
+Read the file provided in $ARGUMENTS. If no file given, check these locations:
+
+- `claude_code_docs/` — any .md files
+- `PROJECT.md`
+- `docs/`
+
+## Step 2 — Define releases
+
+Group features into logical releases (milestones). Consider:
+
+- Dependencies: what must exist before something else can be built
+- Risk: security and data-integrity features early
+- Value: core user-facing features before nice-to-haves
+- Enterprise: enterprise features come after the open-source foundation
+
+For each release, give it a name (e.g. `v0.1 — Core Foundation`) and a one-line goal.
+
+## Step 3 — Break into issues
+
+For each feature in the spec, create a GitHub issue with:
+
+- Title: `type(scope): description` (Conventional Commits style)
+- Body: acceptance criteria from the spec + technical notes
+- Labels: type + package + area (from our taxonomy)
+- Milestone: which release it belongs to
+
+Order within each milestone by dependency — things that block others come first.
+
+## Step 4 — Create milestones on GitHub
+
+```bash
+gh api repos/{owner}/{repo}/milestones -f title='v0.1 — Core Foundation' -f description='...'
+```
+
+## Step 5 — Create issues on GitHub
+
+For each issue, use `gh issue create` with title, body, labels, and milestone.
+Add dependency notes in the body (e.g. 'Depends on #12').
+
+## Step 6 — Summary
+
+Output a markdown summary:
+
+```
+# Release Plan
+
+## v0.1 — Core Foundation
+Goal: ...
+Issues: #1, #2, #3, #4
+Estimated effort: ...
+
+## v0.2 — Dashboard Experience
+Goal: ...
+Issues: #5, #6, #7, #8
+Depends on: v0.1
+...
+```
+
+Save to `claude_code_docs/release-plan.md`.
diff --git a/.claude/skills/review/SKILL.md b/.claude/skills/review/SKILL.md
new file mode 100644
index 00000000..599e3201
--- /dev/null
+++ b/.claude/skills/review/SKILL.md
@@ -0,0 +1,41 @@
+---
+name: review
+description: Review changes for code quality, security, and NeoBoard conventions.
+model: sonnet
+context: fork
+allowed-tools: Read, Write, Bash(gh *), Bash(git *), Grep(*), Glob(*)
+---
+
+## State
+
+- Branch: !`git branch --show-current`
+- Changed: !`git diff origin/dev --name-only 2>/dev/null || git diff --name-only`
+
+## Checklist
+
+Use ultrathink.
+
+### 🔴 Critical
+
+- No credentials logged. Parameterized queries. Read-only transactions.
+- can_write server-side. Tenant isolation via tenant_id.
+- Timeouts at driver level. Row limits via cursor/stream.
+
+### 🟡 Warning
+
+- component/ has no business logic/stores. connection/ has no UI.
+- Charts: next/dynamic + ssr:false. ECharts modular imports.
+- No untyped any. Explicit return types.
+
+### 🔵 Suggestion
+
+- Tests for new behavior? JSDoc on complex functions?
+
+### 🤖 External Reviews
+
+- Check CodeRabbit comments: `gh pr view <number> --comments | grep -A5 'coderabbitai'`
+- Check SonarQube status: `gh pr checks <number>`
+- Address or explicitly dismiss all automated feedback
+
+Output: `[SEVERITY] file:line — Issue → Fix`
+End with: ✅ APPROVE, ⚠️ REQUEST CHANGES, or 💬 NEEDS DISCUSSION
diff --git a/.claude/skills/test/SKILL.md b/.claude/skills/test/SKILL.md
new file mode 100644
index 00000000..308cc005
--- /dev/null
+++ b/.claude/skills/test/SKILL.md
@@ -0,0 +1,72 @@
+---
+name: test
+description: Run tests for the affected package(s). Detects which packages changed and runs only relevant test suites.
+model: haiku
+disable-model-invocation: true
+allowed-tools: Bash(npm *), Bash(npx *), Bash(git *), Bash(cd *)
+---
+
+# Test — NeoBoard
+
+## State
+
+- Branch: !`git branch --show-current`
+- Changed files: !`git diff --name-only HEAD~1 2>/dev/null || git diff --name-only`
+
+## Instructions
+
+Detect which packages have changes and run the appropriate test suites.
+
+### 1. Detect affected packages
+
+```bash
+# Check which packages have changes
+CHANGED=$(git diff --name-only HEAD~1 2>/dev/null || git diff --name-only)
+RUN_APP=false
+RUN_COMPONENT=false
+RUN_CONNECTION=false
+
+echo "$CHANGED" | grep -q '^app/' && RUN_APP=true
+echo "$CHANGED" | grep -q '^component/' && RUN_COMPONENT=true
+echo "$CHANGED" | grep -q '^connection/' && RUN_CONNECTION=true
+```
+
+### 2. Run tests per package
+
+**App tests** (if app/ changed):
+
+```bash
+cd app && npm test
+```
+
+**App integration tests** (if app/ changed):
+
+```bash
+cd app && npx playwright test
+```
+
+**Component tests** (if component/ changed):
+
+```bash
+cd component && npm test
+```
+
+**Connection tests** (if connection/ changed — needs Docker):
+
+```bash
+cd connection && npm test
+```
+
+### 3. Always run lint + build
+
+```bash
+npm run lint
+npm run build
+```
+
+### 4. Report results
+
+Output: which suites ran, pass/fail counts, any failures to fix.
+
+If $ARGUMENTS contains "coverage", also run `npm run test:coverage` in affected packages.
+If $ARGUMENTS contains "all", run all test suites regardless of changes.
diff --git a/.gitignore b/.gitignore
index 2b3396b0..382e6637 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,7 +26,10 @@ out
 *.njsproj
 *.sln
 *.sw?
-.claude/
+# Claude Code local files (keep agents, skills, hooks, settings tracked)
+.claude/worktrees/
+.claude/plans/
+.claude/image-cache/
 *storybook.log
 storybook-static
 
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 00000000..dca8d98f
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,177 @@
+# NeoBoard
+
+Open-source dashboarding tool for hybrid database architectures (Neo4j + PostgreSQL).
+
+## Tech Stack
+
+Next.js 15 (App Router), React 19, TypeScript, shadcn/ui, Tailwind CSS, ECharts, Neo4j NVL, Leaflet, Zustand, TanStack Query, Auth.js v5, Drizzle ORM, Vitest, Playwright, Testcontainers.
+
+## Architecture — Three Packages (STRICT boundaries)
+
+- `app/` — Next.js application. API routes, stores, hooks, pages. Orchestrates the other two.
+- `component/` — React UI library. **NO business logic. NO API calls. NO stores. NO imports from app/.**
+- `connection/` — DB connector library. **NO UI. NO React. NO imports from app/ or component/.**
+
+Before editing any file, check which package it belongs to and respect its boundary.
+
+## Commands
+
+All commands run from the repo root unless noted.
+
+```bash
+npm run dev                          # Dev server (proxies to app/)
+npm run build                        # Production build + type-check
+npm run lint                         # ESLint all packages (root config)
+cd app && npx next lint --fix        # Auto-fix lint errors in app/
+cd app && npm test                   # App Vitest unit tests (API routes, hooks, stores)
+cd component && npm test             # Component Vitest unit tests
+cd connection && npm test            # Connection integration tests (needs Docker)
+npm run test:e2e                     # Playwright E2E (requires Docker)
+npm run storybook                    # Component library viewer
+npm run db:migrate                   # Drizzle migrations
+npm run db:generate                  # Generate migration from schema
+docker compose up                    # Start Neo4j + PostgreSQL dev containers
+```
+
+## TDD Workflow (mandatory)
+
+Follow Red → Green → Refactor on every change:
+
+1. **Red** — Write a failing test that describes the expected behavior. Do not write implementation yet.
+2. **Green** — Write the minimum code to make the test pass. No gold-plating.
+3. **Refactor** — Clean up without breaking tests.
+
+Rules:
+
+- Write the test **before** the implementation. No exceptions.
+- Run the relevant test suite before and after every change to confirm Red → Green.
+- Every new behavior, bug fix, and edge case gets a test.
+- Tests live in `__tests__/` next to the file under test, same package.
+- See `claude_code_docs/TESTING_APPROACH.md` for suite structure, commands, and patterns.
+
+## Testing Boundaries (app/ package)
+
+| Layer                | Tool                    | Examples                                                                         |
+| -------------------- | ----------------------- | -------------------------------------------------------------------------------- |
+| Pure functions/utils | Vitest (no DOM)         | chart-registry, normalize-value, date-utils, query-hash, wrap-with-preview-limit |
+| API routes           | Vitest (mocked DB/auth) | Validation, permissions, error handling                                          |
+| Zustand stores       | Vitest (no mocks)       | State transitions, cascading logic                                               |
+| Store orchestration  | Vitest (no DOM)         | parameter-widget-renderer interactions, type coercion                            |
+| Auth helpers         | Vitest (mocked auth)    | Session extraction, signup validation                                            |
+| UI components (app/) | Vitest (jsdom)          | Render tests, branch coverage, error states — `.test.tsx` files                  |
+| Full user flows      | Playwright E2E          | Real rendering, real data, real interactions                                     |
+
+**Coverage target: 80% per package** (unit + E2E combined). Track with `npm run test:coverage` in each package.
+
+**Vitest in `app/` uses two project environments:**
+
+- **`unit`** (node): `.test.ts` files — pure logic, API routes, stores, hooks. No DOM.
+- **`component`** (jsdom): `.test.tsx` files — render tests with `@testing-library/react`. Mock `@neoboard/components` and Next.js modules (`next/navigation`, `next/dynamic`). Use for branch coverage of UI components that E2E can't reach (error states, edge cases, loading states).
+
+Playwright E2E with **server-side coverage collection** (`collectServer: true` in nextcov config) complements jsdom tests for full user flows. UI component tests in `component/` package remain isolated (no business logic).
+
+**Vendored code** (e.g., `component/src/lib/cypher-lang/`) is excluded from SonarCloud coverage requirements but should have basic smoke tests to catch regressions from local modifications.
+
+## Working Rules
+
+**Code quality:**
+
+- TypeScript strict. No `any` without a comment explaining why.
+- Run `cd app && npx next lint --fix` after every change to `app/`.
+- Run `npm run lint` from the repo root to lint all packages.
+- Run `npm run build` before committing to catch type errors.
+- Use `npm`, not `pnpm` or `yarn`.
+
+**Requirements drill (mandatory before new work):**
+
+- Before creating a branch or starting implementation on any issue, run `/drill <issue-number>`.
+- The drill gathers scope, UX flow, edge cases, security concerns, and acceptance criteria.
+- Do NOT skip the drill. Do NOT start coding, branching, or planning without it.
+- The drill output becomes the source of truth for what to build and how to verify it.
+- For trivial fixes (typos, one-line changes), a minimal drill (1 round) is sufficient.
+
+**Git & PRs:**
+
+- Conventional Commits: `type(scope): description`.
+- Branch from `dev`: `feat/issue-<N>-<slug>`, `fix/issue-<N>-<slug>`, `chore/`, etc.
+- PRs target `dev` (integration) before merging to `main`.
+- Do not push if tests are failing.
+- PRs need labels: type + package + area. See `/github` skill.
+- After finishing: PR targeting `dev`, correct milestone/labels, link issue via `Closes #N`.
+
+**PR reviews:**
+
+- Read `gh pr view <number> --comments` when resuming work on an existing PR.
+- Address all CodeRabbit suggestions or dismiss with justification.
+- SonarQube quality gate must pass (coverage, duplications, code smells).
+
+## Query Safety — DO NOT VIOLATE
+
+- NEVER modify or wrap user queries. Safety is enforced at the driver/transaction level.
+- ALWAYS use parameterized queries. NEVER interpolate user input into query strings.
+- PostgreSQL read-only: `BEGIN READ ONLY` transactions for non-Form widgets.
+- Neo4j read-only: session access modes.
+- Row limits: cursor/stream consumption with MAX_ROWS+1 pattern. Never add LIMIT to user queries.
+- Timeouts: enforced at driver level (AbortSignal for pg, native for Neo4j). Default 30s.
+- Concurrency: per-connector `p-queue`. One queue per connector.
+- `can_write` permission: ALWAYS enforced server-side in the API route, not just UI.
+
+## Credentials — DO NOT VIOLATE
+
+- NEVER log decrypted credentials.
+- NEVER store encryption keys in the database.
+- Encryption uses AES-256-GCM envelope scheme (HKDF-SHA256 key derivation).
+- Lost ENCRYPTION_KEY = all credentials unrecoverable. Always warn users about this.
+
+## Multi-Tenancy
+
+- `tenant_id` column on ALL tables. Every DB query MUST include tenant filter at ORM/middleware level.
+- JWT tokens include `tenantId` claim. Validate before ANY DB or API access.
+- SaaS vs on-prem: env vars only, never code branches.
+
+## Charts & Widgets
+
+- Chart components MUST use `next/dynamic` with `ssr: false`. No exceptions.
+- ECharts: import from `echarts/core` + specific modules. NEVER `import * as echarts from 'echarts'`.
+- Heavy deps (NVL, Leaflet) loaded only when a widget of that type is on the current dashboard.
+- Check existing components in `component/src/` and Storybook before creating new ones.
+
+## Enterprise Features
+
+Gated by env vars, not code branches. Must fall back gracefully when not licensed.
+Includes: SSO, Custom Roles, Connector Labels, Bulk Import, Connector CRUD API, Dashboard Sharing Links, Query Result Caching, Environment Selector, Connector Alias.
+
+## Migrations
+
+Forward-only. Idempotent. Advisory lock prevents concurrent runs.
+Test version-skip paths. `--skip-migrations` flag exists for emergency debugging.
+
+## Design Review
+
+Before touching any UI code, read `.claude/skills/design-review/skill.md` — tokens, spacing, typography, color, chart patterns.
+
+## Agent Pipeline (develop → review → assess)
+
+Agents work together in a pipeline. Each stage gates the next:
+
+1. **`project-architect`** — Plans features (impact analysis, risk, task breakdown)
+2. **`/code` skill** — Implements the plan
+3. **`test-runner`** + **`lint-fix`** — Verify code compiles, lints, tests pass
+4. **`code-reviewer`** — Reviews code for security, architecture, quality. Runs tests.
+5. **`feature-reviewer`** — Opens the browser (Playwright CLI), tests the feature UX + functionality
+6. **`ux-crawler`** — Full app regression: simulates admin/creator/reader across all user stories
+
+### Quick reference
+
+| Agent | Purpose | Model | Trigger |
+|-------|---------|-------|---------|
+| `project-architect` | Feature planning | opus | Complex features |
+| `test-runner` | Run affected tests | haiku | After code changes |
+| `lint-fix` | Lint + auto-fix | haiku | After code changes |
+| `code-reviewer` | Code review + tests | sonnet | Pre-push, PR review |
+| `feature-reviewer` | Browser-based feature testing | sonnet | After implementing UI |
+| `ux-crawler` | Full app UX audit | sonnet | Before releases, major changes |
+
+### Playwright CLI (for browser agents)
+
+`feature-reviewer` and `ux-crawler` use `npx @playwright/cli` to interact with the running app at `http://localhost:3000`. Ensure Docker is running before invoking them.
diff --git a/app/e2e/api-keys.spec.ts b/app/e2e/api-keys.spec.ts
index e7259ea2..2c431dbc 100644
--- a/app/e2e/api-keys.spec.ts
+++ b/app/e2e/api-keys.spec.ts
@@ -1,14 +1,19 @@
 import { test, expect, ALICE } from "./fixtures";
 
 test.describe("API Key management", () => {
-  test.beforeEach(async ({ authPage, sidebarPage }) => {
+  test.beforeEach(async ({ authPage, sidebarPage, page }) => {
     await authPage.login(ALICE.email, ALICE.password);
     await sidebarPage.navigateTo("Settings");
+    // Settings now defaults to Profile tab — navigate to API Keys tab
+    await page.getByRole("button", { name: "API Keys" }).click();
+    await expect(
+      page.getByRole("heading", { level: 1, name: "API Keys" }),
+    ).toBeVisible();
   });
 
   test("should navigate to the API Keys settings page", async ({ page }) => {
     await expect(
-      page.getByRole("heading", { level: 1, name: "API Keys" })
+      page.getByRole("heading", { level: 1, name: "API Keys" }),
     ).toBeVisible();
   });
 
@@ -21,7 +26,7 @@ test.describe("API Key management", () => {
 
     // After generation: dialog title changes to "API Key Created"
     await expect(
-      dialog.getByRole("heading", { name: "API Key Created" })
+      dialog.getByRole("heading", { name: "API Key Created" }),
     ).toBeVisible({ timeout: 10000 });
 
     // Key should start with nb_ — use the data-testid for reliable targeting
@@ -33,7 +38,7 @@ test.describe("API Key management", () => {
 
     // Key should now appear in the table — use exact to avoid matching the revoke button cell
     await expect(
-      page.getByRole("cell", { name: "Test CI Key", exact: true })
+      page.getByRole("cell", { name: "Test CI Key", exact: true }),
     ).toBeVisible();
   });
 
@@ -46,12 +51,12 @@ test.describe("API Key management", () => {
     await dialog.getByRole("button", { name: "Generate Key" }).click();
 
     await expect(
-      dialog.getByRole("heading", { name: "API Key Created" })
+      dialog.getByRole("heading", { name: "API Key Created" }),
     ).toBeVisible({ timeout: 10000 });
     await dialog.getByRole("button", { name: "Done" }).click();
 
     await expect(
-      page.getByRole("cell", { name: keyName, exact: true })
+      page.getByRole("cell", { name: keyName, exact: true }),
     ).toBeVisible();
   });
 
@@ -67,7 +72,7 @@ test.describe("API Key management", () => {
     await dialog.getByRole("button", { name: "Generate Key" }).click();
 
     await expect(
-      dialog.getByRole("heading", { name: "API Key Created" })
+      dialog.getByRole("heading", { name: "API Key Created" }),
     ).toBeVisible({ timeout: 10000 });
 
     // Grab the plaintext key from the data-testid display
@@ -99,13 +104,13 @@ test.describe("API Key management", () => {
     await dialog.getByRole("button", { name: "Generate Key" }).click();
 
     await expect(
-      dialog.getByRole("heading", { name: "API Key Created" })
+      dialog.getByRole("heading", { name: "API Key Created" }),
     ).toBeVisible({ timeout: 10000 });
     await dialog.getByRole("button", { name: "Done" }).click();
 
     // Verify key appears in list (exact match avoids the revoke button cell)
     await expect(
-      page.getByRole("cell", { name: keyName, exact: true })
+      page.getByRole("cell", { name: keyName, exact: true }),
     ).toBeVisible();
 
     // Click the revoke button in the same row
@@ -118,7 +123,7 @@ test.describe("API Key management", () => {
 
     // Key should no longer be in the list
     await expect(
-      page.getByRole("cell", { name: keyName, exact: true })
+      page.getByRole("cell", { name: keyName, exact: true }),
     ).not.toBeVisible({ timeout: 5000 });
   });
 
@@ -128,7 +133,7 @@ test.describe("API Key management", () => {
     const dialog = page.getByRole("dialog");
     // Generate Key should be disabled when name is empty
     await expect(
-      dialog.getByRole("button", { name: "Generate Key" })
+      dialog.getByRole("button", { name: "Generate Key" }),
     ).toBeDisabled();
   });
 });
diff --git a/app/e2e/connections.spec.ts b/app/e2e/connections.spec.ts
index ea44c6c4..ebaa189f 100644
--- a/app/e2e/connections.spec.ts
+++ b/app/e2e/connections.spec.ts
@@ -164,45 +164,24 @@ test.describe("Connections", () => {
   test("clicking an error card shows error details inline", async ({
     page,
   }) => {
-    const name = `Click Error ${Date.now()}`;
-    // Create a connection with bad credentials
-    await page.getByRole("button", { name: "Add Connection" }).click();
-    const dialog = page.getByRole("dialog");
-    await dialog.getByTestId("pick-neo4j").click();
-    await dialog.locator("#conn-name").fill(name);
-    await dialog.locator("#conn-uri").fill("bolt://localhost:1");
-    await dialog.locator("#conn-username").fill("wrong");
-    await dialog.locator("#conn-password").fill("wrong");
-    await dialog.getByRole("button", { name: "Create" }).click();
-    await expect(dialog).not.toBeVisible();
-
-    // Wait for auto-test to show Error badge
-    const card = page
-      .locator("div")
-      .filter({ has: page.getByText(name, { exact: true }) })
-      .first();
-    await expect(card.getByText("Error").first()).toBeVisible({
+    // Use the first seeded connection which should be in error state
+    // (seeded with localhost URIs that don't work from the test server)
+    const firstCard = page.locator("[class*='cursor-pointer']").first();
+    await expect(firstCard.getByText("Error").first()).toBeVisible({
       timeout: 30_000,
     });
 
-    // Click the card — should expand an alert below it with the error message
-    await card.click();
-    await expect(
-      page
-        .locator('[role="alert"]')
-        .filter({ hasText: /refused|ECONNREFUSED|failed|error/i })
-        .first(),
-    ).toBeVisible({
+    // Click the card — should expand an inline alert with the error message
+    await firstCard.click();
+    // The alert is rendered as a sibling inside the same wrapper div
+    const wrapper = firstCard.locator("..");
+    await expect(wrapper.locator('[role="alert"]')).toBeVisible({
       timeout: 5_000,
     });
 
     // Click again to collapse
-    await card.click();
-    await expect(
-      page
-        .locator('[role="alert"]')
-        .filter({ hasText: /refused|ECONNREFUSED|failed|error/i }),
-    ).not.toBeVisible();
+    await firstCard.click();
+    await expect(wrapper.locator('[role="alert"]')).not.toBeVisible();
   });
 
   test("should delete a connection with confirmation", async ({ page }) => {
diff --git a/app/src/app/(dashboard)/connections/page.tsx b/app/src/app/(dashboard)/connections/page.tsx
index becdb4aa..cea23cd3 100644
--- a/app/src/app/(dashboard)/connections/page.tsx
+++ b/app/src/app/(dashboard)/connections/page.tsx
@@ -35,6 +35,7 @@ import {
 } from "@neoboard/components";
 import type { ConnectionState } from "@neoboard/components";
 import { type ConnectorType, CONNECTOR_LABELS } from "@/lib/connector-types";
+import { parseOptionalInt, mapConfigToEditForm } from "@/lib/parse-utils";
 
 type DialogStep = "pick-type" | "fill-form";
 
@@ -55,14 +56,6 @@ const DEFAULT_FORM = {
   sslRejectUnauthorized: undefined as boolean | undefined,
 };
 
-/** Parse numeric string to integer, or return undefined if empty/invalid. */
-function parseOptionalInt(val: string): number | undefined {
-  if (!val.trim()) return undefined;
-  const n = Number(val);
-  if (!Number.isFinite(n) || !Number.isInteger(n)) return undefined;
-  return n;
-}
-
 export default function ConnectionsPage() {
   const { data: connections, isLoading } = useConnections();
   const createConnection = useCreateConnection();
@@ -283,16 +276,30 @@ export default function ConnectionsPage() {
     setShowCreate(true);
   }
 
-  function openEditDialog(conn: {
+  async function openEditDialog(conn: {
     id: string;
     name: string;
     type: ConnectorType;
   }) {
     setEditTarget(conn);
-    // Reset the edit form — advanced fields start empty (user fills what they want to change)
     setEditForm({ ...DEFAULT_FORM, type: conn.type, name: conn.name });
     setEditError(null);
     setShowEditAdvanced(true);
+
+    // Fetch existing config (sans password) and pre-fill the form
+    try {
+      const res = await fetch(`/api/connections/${conn.id}`);
+      const body = await res.json();
+      const config = body?.data?.config;
+      if (config) {
+        setEditForm((prev) => ({
+          ...prev,
+          ...mapConfigToEditForm(config),
+        }));
+      }
+    } catch {
+      // Non-critical — form still works with empty fields
+    }
   }
 
   function buildEditConfig() {
@@ -655,7 +662,8 @@ export default function ConnectionsPage() {
             </DialogHeader>
             <div className="space-y-4 py-4">
               <p className="text-sm text-muted-foreground">
-                Re-enter your credentials to update advanced settings.
+                Update your connection settings. Leave password blank to keep
+                the existing one.
               </p>
 
               <div className="space-y-2">
@@ -695,7 +703,7 @@ export default function ConnectionsPage() {
                     onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                       setEditForm((f) => ({ ...f, password: e.target.value }))
                     }
-                    required
+                    placeholder="Leave blank to keep existing"
                   />
                 </div>
               </div>
diff --git a/app/src/app/api/connections/[id]/__tests__/route.test.ts b/app/src/app/api/connections/[id]/__tests__/route.test.ts
index af89c10a..1e282b97 100644
--- a/app/src/app/api/connections/[id]/__tests__/route.test.ts
+++ b/app/src/app/api/connections/[id]/__tests__/route.test.ts
@@ -1,5 +1,9 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
-import { makeSelectChain, makeUpdateChain, makeDeleteChain } from "@/__tests__/helpers/drizzle-mocks";
+import {
+  makeSelectChain,
+  makeUpdateChain,
+  makeDeleteChain,
+} from "@/__tests__/helpers/drizzle-mocks";
 import { makeRequest, makeParams } from "@/__tests__/helpers/request-helpers";
 import { nextResponseMockFactory } from "@/__tests__/helpers/next-mocks";
 
@@ -8,9 +12,21 @@ import { nextResponseMockFactory } from "@/__tests__/helpers/next-mocks";
 // ---------------------------------------------------------------------------
 
 const mockRequireSession = vi.fn<
-  () => Promise<{ userId: string; role: string; canWrite: boolean; tenantId: string }>
+  () => Promise<{
+    userId: string;
+    role: string;
+    canWrite: boolean;
+    tenantId: string;
+  }>
 >();
 const mockEncryptJson = vi.fn((v: unknown) => `enc:${JSON.stringify(v)}`);
+const mockDecryptJson = vi.fn(() => ({
+  uri: "bolt://localhost:7687",
+  username: "neo4j",
+  password: "secret",
+  database: "neo4j",
+  connectionTimeout: 5000,
+}));
 const mockPrefetchSchema = vi.fn();
 
 const mockDb = {
@@ -32,21 +48,39 @@ class ForbiddenError extends Error {
 
 vi.mock("@/lib/auth/session", () => ({ requireSession: mockRequireSession }));
 vi.mock("@/lib/db", () => ({ db: mockDb }));
-vi.mock("@/lib/crypto", () => ({ encryptJson: mockEncryptJson, decryptJson: vi.fn() }));
-vi.mock("@/lib/schema-prefetch", () => ({ prefetchSchema: mockPrefetchSchema }));
+vi.mock("@/lib/crypto", () => ({
+  encryptJson: mockEncryptJson,
+  decryptJson: mockDecryptJson,
+}));
+vi.mock("@/lib/schema-prefetch", () => ({
+  prefetchSchema: mockPrefetchSchema,
+}));
 vi.mock("next/server", () => nextResponseMockFactory());
 vi.mock("@/lib/auth/errors", () => ({ UnauthorizedError, ForbiddenError }));
 
-const SESSION = { userId: "user-1", role: "creator", canWrite: true, tenantId: "t1" };
-const ADMIN_SESSION = { userId: "admin-1", role: "admin", canWrite: true, tenantId: "t1" };
+const SESSION = {
+  userId: "user-1",
+  role: "creator",
+  canWrite: true,
+  tenantId: "t1",
+};
+const ADMIN_SESSION = {
+  userId: "admin-1",
+  role: "admin",
+  canWrite: true,
+  tenantId: "t1",
+};
 
 // ---------------------------------------------------------------------------
 // GET /api/connections/[id]
 // ---------------------------------------------------------------------------
 
 describe("GET /api/connections/[id]", () => {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let GET: (req: Request, ctx: { params: Promise<{ id: string }> }) => Promise<any>;
+  let GET: (
+    req: Request,
+    ctx: { params: Promise<{ id: string }> },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ) => Promise<any>;
 
   beforeEach(async () => {
     vi.resetModules();
@@ -63,7 +97,13 @@ describe("GET /api/connections/[id]", () => {
 
   it("returns connection metadata in envelope (owner)", async () => {
     mockRequireSession.mockResolvedValue(SESSION);
-    const conn = { id: "c1", name: "My DB", type: "postgresql", createdAt: new Date(), updatedAt: new Date() };
+    const conn = {
+      id: "c1",
+      name: "My DB",
+      type: "postgresql",
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    };
     mockDb.select.mockReturnValue(makeSelectChain([conn]));
 
     const res = await GET(makeRequest({}), makeParams("c1"));
@@ -75,7 +115,13 @@ describe("GET /api/connections/[id]", () => {
 
   it("admin can view any connection in tenant", async () => {
     mockRequireSession.mockResolvedValue(ADMIN_SESSION);
-    const conn = { id: "c1", name: "Other DB", type: "neo4j", createdAt: new Date(), updatedAt: new Date() };
+    const conn = {
+      id: "c1",
+      name: "Other DB",
+      type: "neo4j",
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    };
     // First select (owner check) returns empty
     mockDb.select.mockReturnValueOnce(makeSelectChain([]));
     // Second select (admin fallback) returns the connection
@@ -99,13 +145,41 @@ describe("GET /api/connections/[id]", () => {
 
   it("does not expose configEncrypted", async () => {
     mockRequireSession.mockResolvedValue(SESSION);
-    const conn = { id: "c1", name: "DB", type: "neo4j", createdAt: new Date(), updatedAt: new Date() };
+    const conn = {
+      id: "c1",
+      name: "DB",
+      type: "neo4j",
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    };
     mockDb.select.mockReturnValue(makeSelectChain([conn]));
 
     const res = await GET(makeRequest({}), makeParams("c1"));
     const body = await res.json();
     expect(body.data.configEncrypted).toBeUndefined();
   });
+
+  it("returns decrypted config without password", async () => {
+    mockRequireSession.mockResolvedValue(SESSION);
+    const conn = {
+      id: "c1",
+      name: "DB",
+      type: "neo4j",
+      configEncrypted: "enc:data",
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    };
+    mockDb.select.mockReturnValue(makeSelectChain([conn]));
+
+    const res = await GET(makeRequest({}), makeParams("c1"));
+    const body = await res.json();
+    expect(body.data.config).toBeDefined();
+    expect(body.data.config.uri).toBe("bolt://localhost:7687");
+    expect(body.data.config.username).toBe("neo4j");
+    expect(body.data.config.database).toBe("neo4j");
+    expect(body.data.config.connectionTimeout).toBe(5000);
+    expect(body.data.config.password).toBeUndefined();
+  });
 });
 
 // ---------------------------------------------------------------------------
@@ -113,8 +187,11 @@ describe("GET /api/connections/[id]", () => {
 // ---------------------------------------------------------------------------
 
 describe("PATCH /api/connections/[id]", () => {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let PATCH: (req: Request, ctx: { params: Promise<{ id: string }> }) => Promise<any>;
+  let PATCH: (
+    req: Request,
+    ctx: { params: Promise<{ id: string }> },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ) => Promise<any>;
 
   beforeEach(async () => {
     vi.resetModules();
@@ -125,23 +202,37 @@ describe("PATCH /api/connections/[id]", () => {
 
   it("returns 401 when unauthenticated", async () => {
     mockRequireSession.mockRejectedValue(new UnauthorizedError());
-    const res = await PATCH(makeRequest({ name: "New name" }), makeParams("c1"));
+    const res = await PATCH(
+      makeRequest({ name: "New name" }),
+      makeParams("c1"),
+    );
     expect(res.status).toBe(401);
   });
 
   it("returns 404 when connection not owned", async () => {
     mockRequireSession.mockResolvedValue(SESSION);
     mockDb.update.mockReturnValue(makeUpdateChain([]));
-    const res = await PATCH(makeRequest({ name: "New name" }), makeParams("c1"));
+    const res = await PATCH(
+      makeRequest({ name: "New name" }),
+      makeParams("c1"),
+    );
     expect(res.status).toBe(404);
   });
 
   it("updates name and returns envelope", async () => {
     mockRequireSession.mockResolvedValue(SESSION);
-    const updated = { id: "c1", name: "New name", type: "neo4j", updatedAt: new Date() };
+    const updated = {
+      id: "c1",
+      name: "New name",
+      type: "neo4j",
+      updatedAt: new Date(),
+    };
     mockDb.update.mockReturnValue(makeUpdateChain([updated]));
 
-    const res = await PATCH(makeRequest({ name: "New name" }), makeParams("c1"));
+    const res = await PATCH(
+      makeRequest({ name: "New name" }),
+      makeParams("c1"),
+    );
     expect(res.status).toBe(200);
     const body = await res.json();
     expect(body.data).toEqual(updated);
@@ -150,15 +241,166 @@ describe("PATCH /api/connections/[id]", () => {
 
   it("re-encrypts config and triggers prefetch", async () => {
     mockRequireSession.mockResolvedValue(SESSION);
-    const updated = { id: "c1", name: "Neo4j", type: "neo4j", updatedAt: new Date() };
+    const updated = {
+      id: "c1",
+      name: "Neo4j",
+      type: "neo4j",
+      updatedAt: new Date(),
+    };
+    mockDb.update.mockReturnValue(makeUpdateChain([updated]));
+
+    await PATCH(
+      makeRequest({
+        config: {
+          uri: "bolt://new-host",
+          username: "neo4j",
+          password: "newpass",
+        },
+      }),
+      makeParams("c1"),
+    );
+
+    expect(mockEncryptJson).toHaveBeenCalledWith({
+      uri: "bolt://new-host",
+      username: "neo4j",
+      password: "newpass",
+    });
+    expect(mockPrefetchSchema).toHaveBeenCalledWith("neo4j", {
+      uri: "bolt://new-host",
+      username: "neo4j",
+      password: "newpass",
+    });
+  });
+
+  it("allows config without password (merges with existing)", async () => {
+    mockRequireSession.mockResolvedValue(SESSION);
+    // First select to fetch existing encrypted config
+    const existing = {
+      id: "c1",
+      configEncrypted: "enc:existing",
+      type: "neo4j",
+    };
+    mockDb.select.mockReturnValue(makeSelectChain([existing]));
+    const updated = {
+      id: "c1",
+      name: "Neo4j",
+      type: "neo4j",
+      updatedAt: new Date(),
+    };
+    mockDb.update.mockReturnValue(makeUpdateChain([updated]));
+
+    const res = await PATCH(
+      makeRequest({
+        config: { uri: "bolt://new-host", username: "neo4j", database: "mydb" },
+      }),
+      makeParams("c1"),
+    );
+
+    expect(res.status).toBe(200);
+    // Should merge existing password into new config
+    expect(mockEncryptJson).toHaveBeenCalledWith(
+      expect.objectContaining({
+        uri: "bolt://new-host",
+        username: "neo4j",
+        password: "secret",
+      }),
+    );
+  });
+
+  it("does not call prefetchSchema when password is omitted", async () => {
+    mockRequireSession.mockResolvedValue(SESSION);
+    const existing = {
+      configEncrypted: "enc:existing",
+    };
+    mockDb.select.mockReturnValue(makeSelectChain([existing]));
+    const updated = {
+      id: "c1",
+      name: "Neo4j",
+      type: "neo4j",
+      updatedAt: new Date(),
+    };
+    mockDb.update.mockReturnValue(makeUpdateChain([updated]));
+
+    await PATCH(
+      makeRequest({
+        config: { uri: "bolt://new-host", username: "neo4j" },
+      }),
+      makeParams("c1"),
+    );
+
+    // prefetchSchema should still be called because the merged config has a password
+    // (merged from existing encrypted config)
+    expect(mockPrefetchSchema).toHaveBeenCalled();
+  });
+
+  it("handles config without password when no existing config exists", async () => {
+    mockRequireSession.mockResolvedValue(SESSION);
+    // No existing config found
+    mockDb.select.mockReturnValue(makeSelectChain([]));
+    const updated = {
+      id: "c1",
+      name: "Neo4j",
+      type: "neo4j",
+      updatedAt: new Date(),
+    };
     mockDb.update.mockReturnValue(makeUpdateChain([updated]));
 
-    await PATCH(makeRequest({
-      config: { uri: "bolt://new-host", username: "neo4j", password: "newpass" },
-    }), makeParams("c1"));
+    const res = await PATCH(
+      makeRequest({
+        config: { uri: "bolt://new-host", username: "neo4j" },
+      }),
+      makeParams("c1"),
+    );
+
+    expect(res.status).toBe(200);
+    // Should encrypt the config without the password since there's no existing to merge
+    expect(mockEncryptJson).toHaveBeenCalledWith(
+      expect.objectContaining({
+        uri: "bolt://new-host",
+        username: "neo4j",
+      }),
+    );
+    // No password in final config — should not call prefetchSchema
+    expect(mockPrefetchSchema).not.toHaveBeenCalled();
+  });
+
+  it("returns 400 when body fails validation", async () => {
+    mockRequireSession.mockResolvedValue(SESSION);
+    const res = await PATCH(
+      makeRequest({ config: { uri: "" } }), // uri must be min(1)
+      makeParams("c1"),
+    );
+    expect(res.status).toBe(400);
+    const body = await res.json();
+    expect(body.error).toBeDefined();
+  });
+
+  it("calls prefetchSchema when password is explicitly provided", async () => {
+    mockRequireSession.mockResolvedValue(SESSION);
+    const updated = {
+      id: "c1",
+      name: "PostgreSQL",
+      type: "postgresql",
+      updatedAt: new Date(),
+    };
+    mockDb.update.mockReturnValue(makeUpdateChain([updated]));
 
-    expect(mockEncryptJson).toHaveBeenCalledWith({ uri: "bolt://new-host", username: "neo4j", password: "newpass" });
-    expect(mockPrefetchSchema).toHaveBeenCalledWith("neo4j", { uri: "bolt://new-host", username: "neo4j", password: "newpass" });
+    await PATCH(
+      makeRequest({
+        config: {
+          uri: "postgresql://localhost:5432",
+          username: "pg",
+          password: "newpass",
+        },
+      }),
+      makeParams("c1"),
+    );
+
+    expect(mockPrefetchSchema).toHaveBeenCalledWith("postgresql", {
+      uri: "postgresql://localhost:5432",
+      username: "pg",
+      password: "newpass",
+    });
   });
 });
 
@@ -167,8 +409,11 @@ describe("PATCH /api/connections/[id]", () => {
 // ---------------------------------------------------------------------------
 
 describe("DELETE /api/connections/[id]", () => {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let DELETE: (req: Request, ctx: { params: Promise<{ id: string }> }) => Promise<any>;
+  let DELETE: (
+    req: Request,
+    ctx: { params: Promise<{ id: string }> },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ) => Promise<any>;
 
   beforeEach(async () => {
     vi.resetModules();
diff --git a/app/src/app/api/connections/[id]/route.ts b/app/src/app/api/connections/[id]/route.ts
index edb16711..3b802186 100644
--- a/app/src/app/api/connections/[id]/route.ts
+++ b/app/src/app/api/connections/[id]/route.ts
@@ -2,7 +2,7 @@ import { and, eq } from "drizzle-orm";
 import { db } from "@/lib/db";
 import { connections } from "@/lib/db/schema";
 import { requireSession } from "@/lib/auth/session";
-import { encryptJson } from "@/lib/crypto";
+import { encryptJson, decryptJson } from "@/lib/crypto";
 import { prefetchSchema } from "@/lib/schema-prefetch";
 import { updateConnectionSchema } from "@/lib/schemas";
 import type { ConnectorType } from "@/lib/connector-types";
@@ -23,6 +23,7 @@ export async function GET(
         id: connections.id,
         name: connections.name,
         type: connections.type,
+        configEncrypted: connections.configEncrypted,
         createdAt: connections.createdAt,
         updatedAt: connections.updatedAt,
       })
@@ -43,6 +44,7 @@ export async function GET(
           id: connections.id,
           name: connections.name,
           type: connections.type,
+          configEncrypted: connections.configEncrypted,
           createdAt: connections.createdAt,
           updatedAt: connections.updatedAt,
         })
@@ -55,7 +57,17 @@ export async function GET(
       return notFound("Connection not found");
     }
 
-    return apiSuccess(connection);
+    // Decrypt config and strip password before returning
+    const { configEncrypted, ...metadata } = connection;
+    let config: Record<string, unknown> | undefined;
+    if (configEncrypted) {
+      const decrypted = decryptJson<Record<string, unknown>>(configEncrypted);
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars -- strip password from response
+      const { password, ...safeConfig } = decrypted;
+      config = safeConfig;
+    }
+
+    return apiSuccess({ ...metadata, config });
   } catch (error) {
     return handleRouteError(error, "Failed to fetch connection");
   }
@@ -74,8 +86,30 @@ export async function PATCH(
 
     const updates: Record<string, unknown> = {};
     if (result.data.name) updates.name = result.data.name;
-    if (result.data.config)
-      updates.configEncrypted = encryptJson(result.data.config);
+
+    let finalConfig = result.data.config;
+    if (finalConfig && !finalConfig.password) {
+      // Password omitted — merge with existing encrypted config
+      const [existing] = await db
+        .select({ configEncrypted: connections.configEncrypted })
+        .from(connections)
+        .where(
+          and(
+            eq(connections.id, id),
+            eq(connections.userId, userId),
+            eq(connections.tenantId, tenantId),
+          ),
+        )
+        .limit(1);
+      if (existing?.configEncrypted) {
+        const prev = decryptJson<Record<string, unknown>>(
+          existing.configEncrypted,
+        );
+        finalConfig = { ...finalConfig, password: prev.password as string };
+      }
+    }
+
+    if (finalConfig) updates.configEncrypted = encryptJson(finalConfig);
 
     const [connection] = await db
       .update(connections)
@@ -100,8 +134,11 @@ export async function PATCH(
     }
 
     // Fire-and-forget: re-warm the schema cache after credential update
-    if (result.data.config) {
-      prefetchSchema(connection.type as ConnectorType, result.data.config);
+    if (finalConfig?.password) {
+      prefetchSchema(
+        connection.type as ConnectorType,
+        finalConfig as { uri: string; username: string; password: string },
+      );
     }
 
     return apiSuccess(connection);
diff --git a/app/src/components/__tests__/card-container-states.test.tsx b/app/src/components/__tests__/card-container-states.test.tsx
new file mode 100644
index 00000000..28cb20b2
--- /dev/null
+++ b/app/src/components/__tests__/card-container-states.test.tsx
@@ -0,0 +1,271 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+
+/* ---------- mocks (must be declared before imports) ---------- */
+
+// Stub out heavy component-library and dynamic imports
+vi.mock("@neoboard/components", () => ({
+  Skeleton: ({ className }: { className?: string }) => (
+    <div data-testid="skeleton" className={className} />
+  ),
+  EmptyState: ({
+    title,
+    description,
+    icon,
+  }: {
+    title: string;
+    description?: string;
+    icon?: React.ReactNode;
+  }) => (
+    <div data-testid="empty-state">
+      <span>{title}</span>
+      {description && <span>{description}</span>}
+      {icon}
+    </div>
+  ),
+  Alert: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  AlertTitle: ({ children }: { children: React.ReactNode }) => (
+    <span>{children}</span>
+  ),
+  AlertDescription: ({ children }: { children: React.ReactNode }) => (
+    <span>{children}</span>
+  ),
+  Button: ({
+    children,
+    ...rest
+  }: React.ButtonHTMLAttributes<HTMLButtonElement>) => (
+    <button {...rest}>{children}</button>
+  ),
+  Popover: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  PopoverTrigger: ({ children }: { children: React.ReactNode }) => (
+    <>{children}</>
+  ),
+  PopoverContent: ({ children }: { children: React.ReactNode }) => (
+    <>{children}</>
+  ),
+  ColumnMappingOverlay: () => <div data-testid="column-mapping-overlay" />,
+  substituteParams: (s: string) => s,
+}));
+
+vi.mock("next/dynamic", () => ({
+  default: () =>
+    function DynamicStub() {
+      return <div data-testid="dynamic-stub" />;
+    },
+}));
+
+// Mock chart-renderer to avoid pulling chart deps
+vi.mock("@/components/chart-renderer", () => ({
+  ChartRenderer: () => <div data-testid="chart-renderer" />,
+}));
+
+// Mock hooks
+const mockUseWidgetQuery = vi.fn();
+vi.mock("@/hooks/use-widget-query", () => ({
+  useWidgetQuery: (...args: unknown[]) => mockUseWidgetQuery(...args),
+}));
+
+vi.mock("@/hooks/use-click-action", () => ({
+  useClickAction: () => ({
+    handleChartClick: vi.fn(),
+    hasClickAction: false,
+    clickableColumns: [],
+  }),
+}));
+
+vi.mock("@/stores/parameter-store", () => ({
+  useParameterStore: (sel: (s: Record<string, unknown>) => unknown) =>
+    sel({ parameters: {} }),
+  useParameterValues: () => ({}),
+}));
+
+vi.mock("@/lib/resolve-cache-options", () => ({
+  resolveCacheOptions: () => ({ staleTime: 0, gcTime: undefined }),
+}));
+
+vi.mock("@/lib/card-utils", () => ({
+  extractColumnNames: () => [],
+  resolveStylingConfig: () => undefined,
+}));
+
+vi.mock("@/lib/scroll-to-widget", () => ({
+  scrollAndHighlight: () => false,
+}));
+
+vi.mock("@/lib/data-transforms", () => ({
+  applyTransforms: (d: unknown) => d,
+}));
+
+/* ---------- import under test ---------- */
+import { CardContainer } from "../card-container";
+import type { DashboardWidget } from "@/lib/db/schema";
+
+/** Helper to create a minimal widget. */
+function makeWidget(overrides: Partial<DashboardWidget> = {}): DashboardWidget {
+  return {
+    id: "w1",
+    chartType: "bar",
+    connectionId: "conn-1",
+    query: "MATCH (n) RETURN n.name AS name, count(*) AS value",
+    ...overrides,
+  };
+}
+
+describe("CardContainer", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // ----- Missing connection -----
+
+  it('shows "No connection configured" when connectionId is empty', () => {
+    mockUseWidgetQuery.mockReturnValue({
+      isPending: true,
+      fetchStatus: "idle",
+      isError: false,
+      data: undefined,
+      missingParams: [],
+    });
+
+    render(<CardContainer widget={makeWidget({ connectionId: "" })} />);
+
+    expect(screen.getByText("No connection configured")).toBeDefined();
+    expect(
+      screen.getByText(
+        "Select a connection in the widget settings to start querying data.",
+      ),
+    ).toBeDefined();
+    // Should NOT show "Waiting for parameters"
+    expect(screen.queryByText(/Waiting for parameters/)).toBeNull();
+  });
+
+  // ----- Missing query -----
+
+  it('shows "No query configured" when query is empty', () => {
+    mockUseWidgetQuery.mockReturnValue({
+      isPending: true,
+      fetchStatus: "idle",
+      isError: false,
+      data: undefined,
+      missingParams: [],
+    });
+
+    render(
+      <CardContainer
+        widget={makeWidget({ connectionId: "conn-1", query: "" })}
+      />,
+    );
+
+    expect(screen.getByText("No query configured")).toBeDefined();
+    expect(
+      screen.getByText("Add a query in the widget settings."),
+    ).toBeDefined();
+    expect(screen.queryByText(/Waiting for parameters/)).toBeNull();
+  });
+
+  // ----- Missing parameters -----
+
+  it('shows "Waiting for parameters" only when connectionId and query are set but params are unresolved', () => {
+    mockUseWidgetQuery.mockReturnValue({
+      isPending: true,
+      fetchStatus: "idle",
+      isError: false,
+      data: undefined,
+      missingParams: ["region"],
+    });
+
+    render(
+      <CardContainer
+        widget={makeWidget({
+          connectionId: "conn-1",
+          query: "MATCH (n) WHERE n.region = $param_region RETURN n",
+        })}
+      />,
+    );
+
+    expect(screen.getByText(/Waiting for parameters/)).toBeDefined();
+    // Parameter badge should be rendered
+    expect(screen.getByText("$param_region")).toBeDefined();
+  });
+
+  // ----- Loading state (query actively fetching) -----
+
+  it("shows loading skeleton when query is actively fetching", () => {
+    mockUseWidgetQuery.mockReturnValue({
+      isPending: true,
+      fetchStatus: "fetching",
+      isError: false,
+      data: undefined,
+      missingParams: [],
+    });
+
+    render(<CardContainer widget={makeWidget()} />);
+
+    // Should render skeleton loaders (data-loading=true container)
+    const skeletons = screen.getAllByTestId("skeleton");
+    expect(skeletons.length).toBeGreaterThan(0);
+  });
+
+  // ----- Error state -----
+
+  it("shows error alert when query fails", () => {
+    mockUseWidgetQuery.mockReturnValue({
+      isPending: false,
+      fetchStatus: "idle",
+      isError: true,
+      error: new Error("Connection refused"),
+      data: undefined,
+      missingParams: [],
+    });
+
+    render(<CardContainer widget={makeWidget()} />);
+
+    expect(screen.getByText("Query Failed")).toBeDefined();
+    expect(screen.getByText("Connection refused")).toBeDefined();
+  });
+
+  // ----- Successful render -----
+
+  it("renders chart when query returns data", () => {
+    mockUseWidgetQuery.mockReturnValue({
+      isPending: false,
+      fetchStatus: "idle",
+      isError: false,
+      data: {
+        data: [{ name: "Alice", value: 10 }],
+        resultId: "r1",
+      },
+      missingParams: [],
+    });
+
+    render(<CardContainer widget={makeWidget()} />);
+
+    expect(screen.getByTestId("chart-renderer")).toBeDefined();
+  });
+
+  // ----- Priority: connectionId check comes before parameter check -----
+
+  it("prioritises missing connection message over missing parameters", () => {
+    mockUseWidgetQuery.mockReturnValue({
+      isPending: true,
+      fetchStatus: "idle",
+      isError: false,
+      data: undefined,
+      missingParams: ["region"],
+    });
+
+    render(
+      <CardContainer
+        widget={makeWidget({
+          connectionId: "",
+          query: "MATCH (n) WHERE n.region = $param_region RETURN n",
+        })}
+      />,
+    );
+
+    // Connection message should win over parameter message
+    expect(screen.getByText("No connection configured")).toBeDefined();
+    expect(screen.queryByText(/Waiting for parameters/)).toBeNull();
+  });
+});
diff --git a/app/src/components/__tests__/card-container.test.tsx b/app/src/components/__tests__/card-container.test.tsx
new file mode 100644
index 00000000..85c3f31b
--- /dev/null
+++ b/app/src/components/__tests__/card-container.test.tsx
@@ -0,0 +1,212 @@
+/**
+ * CardContainer tests — focused on the widgetIdSuffix prop that prevents
+ * graph store conflicts when two CardContainers render the same widget
+ * (e.g. normal view + fullscreen dialog).
+ */
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import type { DashboardWidget } from "@/lib/db/schema";
+
+// ── Capture ChartRenderer props to verify effectiveWidgetId ───────────
+let capturedChartProps: Record<string, unknown> = {};
+
+vi.mock("@/components/chart-renderer", () => ({
+  ChartRenderer: (props: Record<string, unknown>) => {
+    capturedChartProps = props;
+    return <div data-testid="chart-renderer" />;
+  },
+}));
+
+vi.mock("@/hooks/use-widget-query", () => ({
+  useWidgetQuery: () => ({
+    isPending: false,
+    isError: false,
+    data: null,
+    fetchStatus: "idle",
+    missingParams: [],
+  }),
+}));
+
+vi.mock("@/hooks/use-click-action", () => ({
+  useClickAction: () => ({
+    handleChartClick: undefined,
+    hasClickAction: false,
+    clickableColumns: [],
+  }),
+}));
+
+vi.mock("@/stores/parameter-store", () => ({
+  useParameterValues: () => ({}),
+}));
+
+vi.mock("@/lib/chart-registry", () => ({
+  getChartConfig: (type: string) => {
+    if (type === "bar" || type === "markdown") {
+      return {
+        type,
+        label: type,
+        transform: (d: unknown) => d,
+        transformWithMapping: (d: unknown) => d,
+        supportsColumnMapping: false,
+        validate: () => null,
+      };
+    }
+    return null;
+  },
+}));
+
+vi.mock("@/lib/resolve-cache-options", () => ({
+  resolveCacheOptions: () => ({ staleTime: 0, gcTime: 0 }),
+}));
+
+vi.mock("@/lib/scroll-to-widget", () => ({
+  scrollAndHighlight: () => false,
+}));
+
+vi.mock("@neoboard/components", () => ({
+  Skeleton: () => <div data-testid="skeleton" />,
+  Alert: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  AlertDescription: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  AlertTitle: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  Button: ({
+    children,
+    onClick,
+  }: {
+    children: React.ReactNode;
+    onClick?: () => void;
+  }) => <button onClick={onClick}>{children}</button>,
+  EmptyState: ({
+    title,
+    description,
+  }: {
+    title: string;
+    description?: string;
+  }) => (
+    <div data-testid="empty-state">
+      <span>{title}</span>
+      {description && <span>{description}</span>}
+    </div>
+  ),
+  ColumnMappingOverlay: () => null,
+  substituteParams: (s: string) => s,
+  Popover: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  PopoverTrigger: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  PopoverContent: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+}));
+
+vi.mock("@/lib/data-transforms", () => ({
+  applyTransforms: (data: unknown) => data,
+}));
+
+vi.mock("@/lib/card-utils", () => ({
+  extractColumnNames: () => [],
+  resolveStylingConfig: () => undefined,
+}));
+
+// Import after mocks
+import { CardContainer } from "../card-container";
+
+function createWidget(overrides?: Partial<DashboardWidget>): DashboardWidget {
+  return {
+    id: "widget-123",
+    chartType: "markdown",
+    connectionId: "conn-1",
+    query: "",
+    settings: {
+      chartOptions: { content: "hello" },
+    },
+    ...overrides,
+  };
+}
+
+function renderWithProviders(ui: React.ReactElement) {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  return render(
+    <QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>,
+  );
+}
+
+describe("CardContainer", () => {
+  beforeEach(() => {
+    capturedChartProps = {};
+    vi.clearAllMocks();
+  });
+
+  describe("widgetIdSuffix prop", () => {
+    it("passes widget.id as widgetId in meta when widgetIdSuffix is not provided", () => {
+      const widget = createWidget();
+      renderWithProviders(<CardContainer widget={widget} />);
+
+      const meta = capturedChartProps.meta as { widgetId?: string };
+      expect(meta?.widgetId).toBe("widget-123");
+    });
+
+    it("appends suffix to widgetId when widgetIdSuffix is provided", () => {
+      const widget = createWidget();
+      renderWithProviders(
+        <CardContainer widget={widget} widgetIdSuffix="fullscreen" />,
+      );
+
+      const meta = capturedChartProps.meta as { widgetId?: string };
+      expect(meta?.widgetId).toBe("widget-123--fullscreen");
+    });
+
+    it("uses double-dash separator between widget id and suffix", () => {
+      const widget = createWidget({ id: "w-99" });
+      renderWithProviders(
+        <CardContainer widget={widget} widgetIdSuffix="preview" />,
+      );
+
+      const meta = capturedChartProps.meta as { widgetId?: string };
+      expect(meta?.widgetId).toBe("w-99--preview");
+    });
+
+    it("passes original widget.id when widgetIdSuffix is empty string", () => {
+      // Empty string is falsy, so effectiveWidgetId should be widget.id
+      const widget = createWidget();
+      renderWithProviders(<CardContainer widget={widget} widgetIdSuffix="" />);
+
+      const meta = capturedChartProps.meta as { widgetId?: string };
+      expect(meta?.widgetId).toBe("widget-123");
+    });
+  });
+
+  describe("preview data path with widgetIdSuffix", () => {
+    it("passes effectiveWidgetId through meta when rendering with previewData", () => {
+      const widget = createWidget({ chartType: "bar" });
+      const previewData = [{ name: "A", value: 1 }];
+      renderWithProviders(
+        <CardContainer
+          widget={widget}
+          previewData={previewData}
+          widgetIdSuffix="fullscreen"
+        />,
+      );
+
+      const meta = capturedChartProps.meta as { widgetId?: string };
+      expect(meta?.widgetId).toBe("widget-123--fullscreen");
+    });
+  });
+
+  describe("unknown chart type", () => {
+    it("shows empty state for unknown chart types", () => {
+      const widget = createWidget({ chartType: "nonexistent" });
+      renderWithProviders(<CardContainer widget={widget} />);
+
+      expect(screen.getByText("Unknown chart type")).toBeInTheDocument();
+    });
+  });
+});
diff --git a/app/src/components/card-container.tsx b/app/src/components/card-container.tsx
index 5481cc7c..20266397 100644
--- a/app/src/components/card-container.tsx
+++ b/app/src/components/card-container.tsx
@@ -61,6 +61,10 @@ interface CardContainerProps {
   onNavigateToPage?: (pageId: string, scrollToWidgetId?: string) => void;
   /** When true, graph widgets trigger a fit-to-viewport after mount. */
   autoFit?: boolean;
+  /** Optional suffix appended to the widget ID used for graph store keys.
+   *  Prevents store conflicts when two CardContainers render the same widget
+   *  (e.g. normal view + fullscreen dialog). */
+  widgetIdSuffix?: string;
   /** Maps parameter names to the widgets that set them (for clickable badges). */
   parameterSourceMap?: ParameterSourceMap;
 }
@@ -152,8 +156,12 @@ export function CardContainer({
   refetchInterval,
   onNavigateToPage,
   autoFit,
+  widgetIdSuffix,
   parameterSourceMap,
 }: CardContainerProps) {
+  const effectiveWidgetId = widgetIdSuffix
+    ? `${widget.id}--${widgetIdSuffix}`
+    : widget.id;
   const chartConfig = getChartConfig(widget.chartType);
   const { handleChartClick, hasClickAction, clickableColumns } = useClickAction(
     widget,
@@ -321,7 +329,7 @@ export function CardContainer({
             }
             meta={{
               connectionId: widget.connectionId,
-              widgetId: widget.id,
+              widgetId: effectiveWidgetId,
               resultId: previewResultId,
               autoFit,
             }}
@@ -348,7 +356,10 @@ export function CardContainer({
             type={chartConfig.type}
             data={null}
             settings={chartOptions}
-            meta={{ connectionId: widget.connectionId, widgetId: widget.id }}
+            meta={{
+              connectionId: widget.connectionId,
+              widgetId: effectiveWidgetId,
+            }}
           />
         </div>
       </div>
@@ -366,7 +377,7 @@ export function CardContainer({
             settings={widget.settings as Record<string, unknown>}
             meta={{
               connectionId: widget.connectionId,
-              widgetId: widget.id,
+              widgetId: effectiveWidgetId,
               query: widget.query,
             }}
           />
@@ -399,7 +410,7 @@ export function CardContainer({
             type={chartConfig.type}
             data={null}
             settings={resolvedContentOptions}
-            meta={{ widgetId: widget.id }}
+            meta={{ widgetId: effectiveWidgetId }}
           />
         </div>
       </div>
@@ -432,10 +443,35 @@ export function CardContainer({
     );
   }
 
-  // When enabled:false (params not yet set), TanStack Query returns
-  // isPending:true + fetchStatus:"idle".  Show a friendly placeholder
-  // instead of the loading skeleton so the user isn't confused by errors.
+  // When enabled:false, TanStack Query returns isPending:true + fetchStatus:"idle".
+  // Show a friendly placeholder instead of the loading skeleton so the user
+  // isn't confused. Distinguish between missing connection and missing parameters.
   if (widgetQuery.isPending && widgetQuery.fetchStatus === "idle") {
+    // Missing connectionId — the widget hasn't been linked to a data source yet.
+    if (!widget.connectionId) {
+      return (
+        <EmptyState
+          icon={<AlertCircle className="h-8 w-8" />}
+          title="No connection configured"
+          description="Select a connection in the widget settings to start querying data."
+          className="py-6"
+        />
+      );
+    }
+
+    // Missing query text — the widget has a connection but no query.
+    if (!widget.query) {
+      return (
+        <EmptyState
+          icon={<AlertCircle className="h-8 w-8" />}
+          title="No query configured"
+          description="Add a query in the widget settings."
+          className="py-6"
+        />
+      );
+    }
+
+    // Genuine unresolved $param_xxx placeholders — show parameter badges.
     return (
       <div className="flex h-full items-center justify-center p-6">
         <div className="text-center space-y-2">
@@ -549,7 +585,7 @@ export function CardContainer({
           }
           meta={{
             connectionId: widget.connectionId,
-            widgetId: widget.id,
+            widgetId: effectiveWidgetId,
             resultId: widgetQuery.data.resultId,
             autoFit,
           }}
diff --git a/app/src/components/dashboard-container.tsx b/app/src/components/dashboard-container.tsx
index 0d0c1735..9f95c447 100644
--- a/app/src/components/dashboard-container.tsx
+++ b/app/src/components/dashboard-container.tsx
@@ -358,10 +358,11 @@ export function DashboardContainer({
                     onNavigateToPage={onNavigateToPage}
                     parameterSourceMap={parameterSourceMap}
                     autoFit
+                    widgetIdSuffix="fullscreen"
                   />
                 ) : (
-                  <div className="flex h-full items-center justify-center text-muted-foreground">
-                    Loading…
+                  <div className="flex h-full items-center justify-center">
+                    <div className="h-6 w-6 animate-spin rounded-full border-2 border-muted-foreground border-t-transparent" />
                   </div>
                 )}
               </div>
diff --git a/app/src/components/widget-editor-modal.tsx b/app/src/components/widget-editor-modal.tsx
index a62b9377..8d6e13f2 100644
--- a/app/src/components/widget-editor-modal.tsx
+++ b/app/src/components/widget-editor-modal.tsx
@@ -389,12 +389,18 @@ export function WidgetEditorModal({
   // Unified connection-change handler for both add and edit modes.
   const handleConnectionChange = useCallback(
     (newId: string) => {
+      const prevConnection = connections.find((c) => c.id === connectionId);
       setConnectionId(newId);
       if (mode === "edit") {
         setConnectorChanged(newId !== (widget?.connectionId ?? ""));
       }
       const newConnection = connections.find((c) => c.id === newId);
       if (newConnection) {
+        // Clear query state when switching between different connection types
+        // (e.g. neo4j → postgresql) since the query language is incompatible.
+        if (prevConnection && prevConnection.type !== newConnection.type) {
+          useWidgetEditorStore.getState().clearQueryState();
+        }
         const compatible = getCompatibleChartTypes(newConnection.type);
         if (!compatible.includes(chartType as ChartType)) {
           setChartType("table");
@@ -402,7 +408,7 @@ export function WidgetEditorModal({
         }
       }
     },
-    [connections, chartType, mode, widget?.connectionId],
+    [connections, connectionId, chartType, mode, widget?.connectionId],
   );
 
   const handleChartTypeChange = useCallback(
@@ -691,11 +697,13 @@ export function WidgetEditorModal({
     }
   }, [connectionId, query, previewQuery, allParamValues, selectedConnection]);
 
-  // Auto-run preview when editing an existing widget so column selectors are populated.
+  // Auto-run preview when connection and query are present so column selectors
+  // are populated.  For "add" mode a short debounce avoids firing on every
+  // keystroke while the user is still typing the query.
   // Skip if initialPreviewData was provided (we already have data to show).
   const autoPreviewTriggered = useRef(false);
   useEffect(() => {
-    if (!open || (mode !== "edit" && mode !== "lab-edit")) {
+    if (!open) {
       autoPreviewTriggered.current = false;
       return;
     }
@@ -706,10 +714,11 @@ export function WidgetEditorModal({
       return;
     }
     autoPreviewTriggered.current = true;
-    // setTimeout ensures the reset effect's setState calls have flushed
+    // In "add" mode, debounce to avoid firing while the user is still typing.
+    const delay = mode === "add" ? 300 : 0;
     const timer = setTimeout(() => {
       handlePreview();
-    }, 0);
+    }, delay);
     return () => clearTimeout(timer);
   }, [open, mode, connectionId, query, handlePreview, initialPreviewData]);
 
@@ -1682,9 +1691,7 @@ export function WidgetEditorModal({
                             (previewQuery.data ?? initialPreviewData)!.resultId
                           }
                         />
-                      ) : (mode === "edit" || mode === "lab-edit") &&
-                        connectionId &&
-                        query.trim() ? (
+                      ) : connectionId && query.trim() ? (
                         <div className="h-full flex items-center justify-center">
                           <div className="h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
                         </div>
diff --git a/app/src/components/widget-editor/__tests__/query-editor-panel.test.tsx b/app/src/components/widget-editor/__tests__/query-editor-panel.test.tsx
new file mode 100644
index 00000000..ed5e1329
--- /dev/null
+++ b/app/src/components/widget-editor/__tests__/query-editor-panel.test.tsx
@@ -0,0 +1,99 @@
+import React from "react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { useWidgetEditorStore } from "@/stores/widget-editor-store";
+
+// Mock next/dynamic to render the QueryEditor stub synchronously
+vi.mock("next/dynamic", () => ({
+  default: () => {
+    const Stub = (props: Record<string, unknown>) => (
+      <div
+        data-testid="query-editor"
+        data-language={props.language}
+        data-read-only={String(props.readOnly ?? false)}
+        data-has-on-run={String(typeof props.onRun === "function")}
+      />
+    );
+    Stub.displayName = "QueryEditorStub";
+    return Stub;
+  },
+}));
+
+// Mock schema hooks so they don't make real requests
+vi.mock("@/hooks/use-schema", () => ({
+  useConnectionSchema: () => ({ isFetching: false, refreshSchema: vi.fn() }),
+}));
+vi.mock("@/stores/schema-store", () => ({
+  useSchemaStore: () => null,
+}));
+
+// Mock @neoboard/components with lightweight stubs
+vi.mock("@neoboard/components", () => ({
+  Alert: ({
+    children,
+    ...props
+  }: React.PropsWithChildren<Record<string, unknown>>) => (
+    <div role="alert" {...props}>
+      {children}
+    </div>
+  ),
+  AlertDescription: ({
+    children,
+  }: React.PropsWithChildren<Record<string, unknown>>) => <div>{children}</div>,
+  Label: ({
+    children,
+    ...props
+  }: React.PropsWithChildren<Record<string, unknown>>) => (
+    <label {...props}>{children}</label>
+  ),
+  Button: ({
+    children,
+    ...props
+  }: React.PropsWithChildren<Record<string, unknown>>) => (
+    <button {...props}>{children}</button>
+  ),
+  Tooltip: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  TooltipTrigger: ({ children }: { children: React.ReactNode }) => (
+    <>{children}</>
+  ),
+  TooltipContent: ({ children }: { children: React.ReactNode }) => (
+    <>{children}</>
+  ),
+}));
+
+// Import the component after mocks are set up
+const { QueryEditorPanel } = await import("../query-editor-panel");
+
+describe("QueryEditorPanel", () => {
+  beforeEach(() => {
+    useWidgetEditorStore.getState().resetForAdd();
+  });
+
+  it("shows warning when no connection is selected", () => {
+    // resetForAdd sets connectionId to ""
+    render(<QueryEditorPanel editorLanguage="cypher" />);
+    expect(screen.getByTestId("no-connector-warning")).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        /select a connection to enable syntax highlighting and query execution/i,
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it("hides warning when a connection is selected", () => {
+    useWidgetEditorStore.getState().setConnectionId("conn-1");
+    render(<QueryEditorPanel editorLanguage="cypher" />);
+    expect(
+      screen.queryByTestId("no-connector-warning"),
+    ).not.toBeInTheDocument();
+  });
+
+  it("renders the query editor regardless of connection state", () => {
+    render(<QueryEditorPanel editorLanguage="cypher" />);
+    // Editor should be present even without a connection
+    const editor = screen.getByTestId("query-editor");
+    expect(editor).toBeInTheDocument();
+    // Editor must remain editable even when no connection is selected
+    expect(editor).toHaveAttribute("data-read-only", "false");
+  });
+});
diff --git a/app/src/components/widget-editor/query-editor-panel.tsx b/app/src/components/widget-editor/query-editor-panel.tsx
index 1468b964..0a3cd33f 100644
--- a/app/src/components/widget-editor/query-editor-panel.tsx
+++ b/app/src/components/widget-editor/query-editor-panel.tsx
@@ -2,8 +2,10 @@
 
 import dynamic from "next/dynamic";
 import { useWidgetEditorStore } from "@/stores/widget-editor-store";
-import { Info, RefreshCw } from "lucide-react";
+import { AlertCircle, Info, RefreshCw } from "lucide-react";
 import {
+  Alert,
+  AlertDescription,
   Label,
   Tooltip,
   TooltipContent,
@@ -118,13 +120,24 @@ export function QueryEditorPanel({
           </Tooltip>
         )}
       </div>
+      {!connectionId && (
+        <Alert
+          className="border-amber-500/50 text-amber-700 dark:text-amber-400 [&>svg]:text-amber-600 dark:[&>svg]:text-amber-400"
+          data-testid="no-connector-warning"
+        >
+          <AlertCircle className="h-4 w-4" />
+          <AlertDescription>
+            Select a connection to enable syntax highlighting and query
+            execution.
+          </AlertDescription>
+        </Alert>
+      )}
       <QueryEditor
         value={query}
         onChange={onQueryChange}
         onRun={onRun}
         running={running}
         language={editorLanguage}
-        readOnly={!connectionId}
         schema={schema}
         placeholder={
           editorLanguage === "sql"
diff --git a/app/src/lib/__tests__/parse-utils.test.ts b/app/src/lib/__tests__/parse-utils.test.ts
new file mode 100644
index 00000000..309fae1e
--- /dev/null
+++ b/app/src/lib/__tests__/parse-utils.test.ts
@@ -0,0 +1,116 @@
+import { describe, it, expect } from "vitest";
+import { parseOptionalInt, mapConfigToEditForm } from "../parse-utils";
+
+describe("parseOptionalInt", () => {
+  it("returns undefined for empty string", () => {
+    expect(parseOptionalInt("")).toBeUndefined();
+  });
+
+  it("returns undefined for whitespace-only string", () => {
+    expect(parseOptionalInt("   ")).toBeUndefined();
+  });
+
+  it("parses valid positive integer", () => {
+    expect(parseOptionalInt("42")).toBe(42);
+  });
+
+  it("parses zero", () => {
+    expect(parseOptionalInt("0")).toBe(0);
+  });
+
+  it("parses negative integer", () => {
+    expect(parseOptionalInt("-5")).toBe(-5);
+  });
+
+  it("returns undefined for floating point number", () => {
+    expect(parseOptionalInt("3.14")).toBeUndefined();
+  });
+
+  it("returns undefined for non-numeric string", () => {
+    expect(parseOptionalInt("abc")).toBeUndefined();
+  });
+
+  it("returns undefined for Infinity", () => {
+    expect(parseOptionalInt("Infinity")).toBeUndefined();
+  });
+
+  it("returns undefined for NaN string", () => {
+    expect(parseOptionalInt("NaN")).toBeUndefined();
+  });
+
+  it("parses string with leading/trailing whitespace", () => {
+    expect(parseOptionalInt("  100  ")).toBe(100);
+  });
+
+  it("parses large integers", () => {
+    expect(parseOptionalInt("300000")).toBe(300000);
+  });
+});
+
+describe("mapConfigToEditForm", () => {
+  it("maps a full config to form strings", () => {
+    const result = mapConfigToEditForm({
+      uri: "bolt://localhost:7687",
+      username: "neo4j",
+      database: "neo4j",
+      connectionTimeout: 5000,
+      queryTimeout: 30000,
+      maxPoolSize: 25,
+      connectionAcquisitionTimeout: 10000,
+      idleTimeout: 15000,
+      statementTimeout: 60000,
+      sslRejectUnauthorized: false,
+    });
+
+    expect(result).toEqual({
+      uri: "bolt://localhost:7687",
+      username: "neo4j",
+      database: "neo4j",
+      connectionTimeout: "5000",
+      queryTimeout: "30000",
+      maxPoolSize: "25",
+      connectionAcquisitionTimeout: "10000",
+      idleTimeout: "15000",
+      statementTimeout: "60000",
+      sslRejectUnauthorized: false,
+    });
+  });
+
+  it("defaults missing fields to empty strings", () => {
+    const result = mapConfigToEditForm({});
+
+    expect(result).toEqual({
+      uri: "",
+      username: "",
+      database: "",
+      connectionTimeout: "",
+      queryTimeout: "",
+      maxPoolSize: "",
+      connectionAcquisitionTimeout: "",
+      idleTimeout: "",
+      statementTimeout: "",
+      sslRejectUnauthorized: undefined,
+    });
+  });
+
+  it("handles partial config (only uri and username)", () => {
+    const result = mapConfigToEditForm({
+      uri: "postgresql://localhost:5432",
+      username: "pg",
+    });
+
+    expect(result.uri).toBe("postgresql://localhost:5432");
+    expect(result.username).toBe("pg");
+    expect(result.database).toBe("");
+    expect(result.connectionTimeout).toBe("");
+    expect(result.sslRejectUnauthorized).toBeUndefined();
+  });
+
+  it("stringifies numeric zero correctly", () => {
+    const result = mapConfigToEditForm({
+      connectionTimeout: 0,
+    });
+
+    expect(result.connectionTimeout).toBe("0");
+  });
+});
diff --git a/app/src/lib/__tests__/schemas.test.ts b/app/src/lib/__tests__/schemas.test.ts
index 01254930..dcd1b67c 100644
--- a/app/src/lib/__tests__/schemas.test.ts
+++ b/app/src/lib/__tests__/schemas.test.ts
@@ -3,6 +3,7 @@ import {
   connectionConfigSchema,
   createConnectionSchema,
   updateConnectionSchema,
+  updateConnectionConfigSchema,
   testInlineSchema,
 } from "../schemas";
 
@@ -166,7 +167,11 @@ describe("createConnectionSchema", () => {
     const result = createConnectionSchema.safeParse({
       name: "My Neo4j",
       type: "neo4j",
-      config: { uri: "bolt://localhost:7687", username: "neo4j", password: "test" },
+      config: {
+        uri: "bolt://localhost:7687",
+        username: "neo4j",
+        password: "test",
+      },
     });
     expect(result.success).toBe(true);
   });
@@ -175,7 +180,11 @@ describe("createConnectionSchema", () => {
     const result = createConnectionSchema.safeParse({
       name: "My PG",
       type: "postgresql",
-      config: { uri: "postgresql://localhost:5432", username: "pg", password: "test" },
+      config: {
+        uri: "postgresql://localhost:5432",
+        username: "pg",
+        password: "test",
+      },
     });
     expect(result.success).toBe(true);
   });
@@ -235,13 +244,69 @@ describe("updateConnectionSchema", () => {
     const result = updateConnectionSchema.safeParse({ name: "" });
     expect(result.success).toBe(false);
   });
+
+  it("accepts config without password (keep existing)", () => {
+    const result = updateConnectionSchema.safeParse({
+      config: { uri: "bolt://new-host", username: "neo4j" },
+    });
+    expect(result.success).toBe(true);
+  });
+
+  it("accepts config with password (overwrite existing)", () => {
+    const result = updateConnectionSchema.safeParse({
+      config: {
+        uri: "bolt://new-host",
+        username: "neo4j",
+        password: "newpass",
+      },
+    });
+    expect(result.success).toBe(true);
+  });
+
+  it("rejects config with empty password string", () => {
+    const result = updateConnectionSchema.safeParse({
+      config: { uri: "bolt://localhost", username: "neo4j", password: "" },
+    });
+    expect(result.success).toBe(false);
+  });
+});
+
+describe("updateConnectionConfigSchema", () => {
+  it("accepts config with all fields including password", () => {
+    const result = updateConnectionConfigSchema.safeParse({
+      uri: "bolt://localhost",
+      username: "neo4j",
+      password: "secret",
+      database: "mydb",
+    });
+    expect(result.success).toBe(true);
+  });
+
+  it("accepts config without password", () => {
+    const result = updateConnectionConfigSchema.safeParse({
+      uri: "bolt://localhost",
+      username: "neo4j",
+    });
+    expect(result.success).toBe(true);
+  });
+
+  it("still requires uri and username", () => {
+    const result = updateConnectionConfigSchema.safeParse({
+      database: "mydb",
+    });
+    expect(result.success).toBe(false);
+  });
 });
 
 describe("testInlineSchema", () => {
   it("accepts valid test request", () => {
     const result = testInlineSchema.safeParse({
       type: "neo4j",
-      config: { uri: "bolt://localhost:7687", username: "neo4j", password: "test" },
+      config: {
+        uri: "bolt://localhost:7687",
+        username: "neo4j",
+        password: "test",
+      },
     });
     expect(result.success).toBe(true);
   });
diff --git a/app/src/lib/parse-utils.ts b/app/src/lib/parse-utils.ts
new file mode 100644
index 00000000..1463bc87
--- /dev/null
+++ b/app/src/lib/parse-utils.ts
@@ -0,0 +1,38 @@
+/** Parse numeric string to integer, or return undefined if empty/invalid. */
+export function parseOptionalInt(val: string): number | undefined {
+  if (!val.trim()) return undefined;
+  const n = Number(val);
+  if (!Number.isFinite(n) || !Number.isInteger(n)) return undefined;
+  return n;
+}
+
+/**
+ * Map a decrypted connection config (from the API) into form field strings.
+ * Numeric fields are stringified; missing values default to "".
+ */
+export function mapConfigToEditForm(config: Record<string, unknown>): {
+  uri: string;
+  username: string;
+  database: string;
+  connectionTimeout: string;
+  queryTimeout: string;
+  maxPoolSize: string;
+  connectionAcquisitionTimeout: string;
+  idleTimeout: string;
+  statementTimeout: string;
+  sslRejectUnauthorized: boolean | undefined;
+} {
+  return {
+    uri: (config.uri as string) ?? "",
+    username: (config.username as string) ?? "",
+    database: (config.database as string) ?? "",
+    connectionTimeout: config.connectionTimeout?.toString() ?? "",
+    queryTimeout: config.queryTimeout?.toString() ?? "",
+    maxPoolSize: config.maxPoolSize?.toString() ?? "",
+    connectionAcquisitionTimeout:
+      config.connectionAcquisitionTimeout?.toString() ?? "",
+    idleTimeout: config.idleTimeout?.toString() ?? "",
+    statementTimeout: config.statementTimeout?.toString() ?? "",
+    sslRejectUnauthorized: config.sslRejectUnauthorized as boolean | undefined,
+  };
+}
diff --git a/app/src/lib/schemas.ts b/app/src/lib/schemas.ts
index fa999cd2..f229dac4 100644
--- a/app/src/lib/schemas.ts
+++ b/app/src/lib/schemas.ts
@@ -32,9 +32,14 @@ export const createConnectionSchema = z.object({
   config: connectionConfigSchema,
 });
 
+/** Config schema for updates — password is optional (omit to keep existing). */
+export const updateConnectionConfigSchema = connectionConfigSchema.extend({
+  password: z.string().min(1).optional(),
+});
+
 export const updateConnectionSchema = z.object({
   name: z.string().min(1).optional(),
-  config: connectionConfigSchema.optional(),
+  config: updateConnectionConfigSchema.optional(),
 });
 
 export const testInlineSchema = z.object({
diff --git a/app/src/stores/__tests__/widget-editor-store.test.ts b/app/src/stores/__tests__/widget-editor-store.test.ts
index 4a6ca8fd..69026029 100644
--- a/app/src/stores/__tests__/widget-editor-store.test.ts
+++ b/app/src/stores/__tests__/widget-editor-store.test.ts
@@ -234,4 +234,267 @@ describe("widget-editor-store", () => {
       expect(action?.rules).toHaveLength(1);
     });
   });
+
+  describe("clearQueryState", () => {
+    it("clears query, availableFields, and transforms", () => {
+      getState().setQuery("MATCH (n) RETURN n");
+      getState().setAvailableFields(["name", "age"]);
+      getState().setTransforms([
+        { type: "sort", column: "name", direction: "asc" },
+      ]);
+
+      getState().clearQueryState();
+
+      expect(getState().query).toBe("");
+      expect(getState().availableFields).toEqual([]);
+      expect(getState().transforms).toEqual([]);
+    });
+
+    it("does not reset connectionId or chartType", () => {
+      getState().setConnectionId("conn-1");
+      getState().setChartType("pie");
+      getState().setQuery("SELECT * FROM users");
+
+      getState().clearQueryState();
+
+      expect(getState().connectionId).toBe("conn-1");
+      expect(getState().chartType).toBe("pie");
+    });
+
+    it("preserves title and other UI state", () => {
+      getState().setTitle("My Widget");
+      getState().setEnableCache(false);
+      getState().setQuery("MATCH (n) RETURN n");
+
+      getState().clearQueryState();
+
+      expect(getState().title).toBe("My Widget");
+      expect(getState().enableCache).toBe(false);
+    });
+  });
+
+  describe("setConnectorChanged", () => {
+    it("defaults to false", () => {
+      expect(getState().connectorChanged).toBe(false);
+    });
+
+    it("sets connectorChanged flag to true", () => {
+      getState().setConnectorChanged(true);
+      expect(getState().connectorChanged).toBe(true);
+    });
+
+    it("resets connectorChanged back to false", () => {
+      getState().setConnectorChanged(true);
+      getState().setConnectorChanged(false);
+      expect(getState().connectorChanged).toBe(false);
+    });
+
+    it("is reset by resetForAdd", () => {
+      getState().setConnectorChanged(true);
+      getState().resetForAdd();
+      expect(getState().connectorChanged).toBe(false);
+    });
+  });
+
+  describe("loadFromWidget — parameter-select widget", () => {
+    it("loads parameter-select with date-range type", () => {
+      getState().loadFromWidget({
+        id: "w1",
+        chartType: "parameter-select",
+        connectionId: "c1",
+        query: "MATCH (n) RETURN n.year",
+        settings: {
+          chartOptions: {
+            parameterType: "date-range",
+            parameterName: "dateFilter",
+          },
+        },
+      });
+
+      expect(getState().paramUIType).toBe("date");
+      expect(getState().dateSub).toBe("range");
+      expect(getState().paramWidgetName).toBe("dateFilter");
+    });
+
+    it("loads parameter-select with multi-select type", () => {
+      getState().loadFromWidget({
+        id: "w1",
+        chartType: "parameter-select",
+        connectionId: "c1",
+        query: "q",
+        settings: {
+          chartOptions: {
+            parameterType: "multi-select",
+            parameterName: "tags",
+          },
+        },
+      });
+
+      expect(getState().paramUIType).toBe("select");
+      expect(getState().multiSelect).toBe(true);
+      expect(getState().paramWidgetName).toBe("tags");
+    });
+
+    it("loads parameter-select with text type", () => {
+      getState().loadFromWidget({
+        id: "w1",
+        chartType: "parameter-select",
+        connectionId: "c1",
+        query: "q",
+        settings: {
+          chartOptions: {
+            parameterType: "text",
+            parameterName: "search",
+          },
+        },
+      });
+
+      expect(getState().paramUIType).toBe("freetext");
+      expect(getState().paramWidgetName).toBe("search");
+    });
+
+    it("loads parameter-select with date-relative type", () => {
+      getState().loadFromWidget({
+        id: "w1",
+        chartType: "parameter-select",
+        connectionId: "c1",
+        query: "q",
+        settings: {
+          chartOptions: {
+            parameterType: "date-relative",
+            parameterName: "period",
+          },
+        },
+      });
+
+      expect(getState().paramUIType).toBe("date");
+      expect(getState().dateSub).toBe("relative");
+    });
+  });
+
+  describe("loadFromWidget — form widget fields", () => {
+    it("loads form fields and refresh widget ids", () => {
+      const fields = [
+        { name: "name", type: "text", label: "Name", required: true },
+      ];
+      getState().loadFromWidget({
+        id: "w1",
+        chartType: "form",
+        connectionId: "c1",
+        query: "CREATE (n:Person {name: $param_name})",
+        settings: {
+          formFields: fields,
+          chartOptions: { refreshWidgetIds: ["w2", "w3"] },
+        },
+      });
+
+      expect(getState().formFields).toEqual(fields);
+      expect(getState().refreshWidgetIds).toEqual(["w2", "w3"]);
+    });
+  });
+
+  describe("loadFromWidget — cache settings", () => {
+    it("defaults enableCache to true when not specified", () => {
+      getState().loadFromWidget({
+        id: "w1",
+        chartType: "bar",
+        connectionId: "c1",
+        query: "q",
+        settings: {},
+      });
+
+      expect(getState().enableCache).toBe(true);
+      expect(getState().cacheTtlMinutes).toBe(5);
+    });
+
+    it("loads explicit cache settings", () => {
+      getState().loadFromWidget({
+        id: "w1",
+        chartType: "bar",
+        connectionId: "c1",
+        query: "q",
+        settings: { enableCache: false, cacheTtlMinutes: 10 },
+      });
+
+      expect(getState().enableCache).toBe(false);
+      expect(getState().cacheTtlMinutes).toBe(10);
+    });
+  });
+
+  describe("loadFromWidget — transforms", () => {
+    it("loads transforms and transformsEnabled", () => {
+      const transforms = [
+        { type: "sort" as const, column: "name", direction: "asc" as const },
+      ];
+      getState().loadFromWidget({
+        id: "w1",
+        chartType: "table",
+        connectionId: "c1",
+        query: "q",
+        settings: { transforms, transformsEnabled: false },
+      });
+
+      expect(getState().transforms).toEqual(transforms);
+      expect(getState().transformsEnabled).toBe(false);
+    });
+  });
+
+  describe("loadFromWidget — navigate click action", () => {
+    it("loads navigate-to-page click action", () => {
+      getState().loadFromWidget({
+        id: "w1",
+        chartType: "bar",
+        connectionId: "c1",
+        query: "q",
+        settings: {
+          clickAction: {
+            type: "navigate-to-page",
+            targetPageId: "page-2",
+            clickableColumns: ["name"],
+          },
+        },
+      });
+
+      expect(getState().clickActionEnabled).toBe(true);
+      expect(getState().clickActionType).toBe("navigate-to-page");
+      expect(getState().targetPageId).toBe("page-2");
+      expect(getState().clickableColumns).toEqual(["name"]);
+    });
+  });
+
+  describe("buildClickAction — navigate-to-page", () => {
+    it("builds navigate-to-page action with valid page id", () => {
+      getState().setClickActionEnabled(true);
+      getState().setClickActionType("navigate-to-page");
+      getState().setTargetPageId("page-1");
+      const layout = { pages: [{ id: "page-1", widgets: [] }] };
+      const action = getState().buildClickAction(
+        layout as unknown as import("@/lib/db/schema").DashboardLayoutV2,
+      );
+      expect(action?.type).toBe("navigate-to-page");
+      expect(action?.targetPageId).toBe("page-1");
+    });
+
+    it("returns undefined for navigate-to-page with invalid page id", () => {
+      getState().setClickActionEnabled(true);
+      getState().setClickActionType("navigate-to-page");
+      getState().setTargetPageId("nonexistent");
+      const layout = { pages: [{ id: "page-1", widgets: [] }] };
+      const action = getState().buildClickAction(
+        layout as unknown as import("@/lib/db/schema").DashboardLayoutV2,
+      );
+      expect(action).toBeUndefined();
+    });
+  });
+
+  describe("buildClickAction — with clickableColumns", () => {
+    it("includes clickableColumns in action", () => {
+      getState().setClickActionEnabled(true);
+      getState().setClickActionType("set-parameter");
+      getState().setParameterName("year");
+      getState().setClickableColumns(["name", "year"]);
+      const action = getState().buildClickAction();
+      expect(action?.clickableColumns).toEqual(["name", "year"]);
+    });
+  });
 });
diff --git a/app/src/stores/widget-editor-store.ts b/app/src/stores/widget-editor-store.ts
index 45b8f8f4..bda57a99 100644
--- a/app/src/stores/widget-editor-store.ts
+++ b/app/src/stores/widget-editor-store.ts
@@ -149,6 +149,7 @@ export interface WidgetEditorState {
 
   // ── Bulk operations ─────────────────────────────────────────────
   resetForAdd: () => void;
+  clearQueryState: () => void;
   loadFromWidget: (widget: DashboardWidget) => void;
 
   // ── Build helpers ───────────────────────────────────────────────
@@ -307,6 +308,8 @@ export const useWidgetEditorStore = create<WidgetEditorState>((set, get) => ({
 
   // ── Bulk operations ─────────────────────────────────────────────
   resetForAdd: () => set(getInitialState()),
+  clearQueryState: () =>
+    set({ query: "", availableFields: [], transforms: [] }),
 
   loadFromWidget: (widget) => {
     const s = widget.settings ?? {};
diff --git a/component/src/charts/__tests__/graph-chart.test.tsx b/component/src/charts/__tests__/graph-chart.test.tsx
index fa10fabd..5ee23b0d 100644
--- a/component/src/charts/__tests__/graph-chart.test.tsx
+++ b/component/src/charts/__tests__/graph-chart.test.tsx
@@ -771,4 +771,103 @@ describe("GraphChart", () => {
       expect(nvlNodes[0].color).not.toBe("#ff0000");
     });
   });
+
+  // --- Safety timeout for layout ---
+
+  describe("layout safety timeout", () => {
+    beforeEach(() => {
+      vi.useFakeTimers();
+    });
+
+    afterEach(() => {
+      vi.useRealTimers();
+    });
+
+    it("forces layoutReady after 800ms when onLayoutDone never fires", () => {
+      render(<GraphChart nodes={sampleNodes} edges={sampleEdges} />);
+      // Loading overlay is shown initially
+      expect(screen.getByTestId("graph-loading-overlay")).toBeInTheDocument();
+
+      // Advance time by 800ms — the safety timeout should fire
+      act(() => {
+        vi.advanceTimersByTime(800);
+      });
+
+      // Overlay should be removed
+      expect(
+        screen.queryByTestId("graph-loading-overlay"),
+      ).not.toBeInTheDocument();
+    });
+
+    it("does not force layoutReady before 800ms", () => {
+      render(<GraphChart nodes={sampleNodes} edges={sampleEdges} />);
+      expect(screen.getByTestId("graph-loading-overlay")).toBeInTheDocument();
+
+      // Advance to just before the timeout
+      act(() => {
+        vi.advanceTimersByTime(799);
+      });
+
+      // Overlay should still be visible
+      expect(screen.getByTestId("graph-loading-overlay")).toBeInTheDocument();
+    });
+
+    it("safety timeout is a no-op when onLayoutDone fires first", () => {
+      render(<GraphChart nodes={sampleNodes} edges={sampleEdges} />);
+      expect(screen.getByTestId("graph-loading-overlay")).toBeInTheDocument();
+
+      // Simulate NVL calling onLayoutDone before the timeout
+      const callbacks = capturedProps.nvlCallbacks as {
+        onLayoutDone?: () => void;
+      };
+      act(() => {
+        callbacks.onLayoutDone?.();
+      });
+
+      // Overlay is already gone
+      expect(
+        screen.queryByTestId("graph-loading-overlay"),
+      ).not.toBeInTheDocument();
+
+      // Advancing past 800ms should not cause errors or re-show overlay
+      act(() => {
+        vi.advanceTimersByTime(1000);
+      });
+      expect(
+        screen.queryByTestId("graph-loading-overlay"),
+      ).not.toBeInTheDocument();
+    });
+
+    it("does not start safety timeout when nodes are empty", () => {
+      render(<GraphChart nodes={[]} edges={[]} />);
+
+      // No overlay at all for empty nodes
+      expect(
+        screen.queryByTestId("graph-loading-overlay"),
+      ).not.toBeInTheDocument();
+
+      // Advancing time should not cause any issues
+      act(() => {
+        vi.advanceTimersByTime(1000);
+      });
+
+      expect(
+        screen.queryByTestId("graph-loading-overlay"),
+      ).not.toBeInTheDocument();
+    });
+
+    it("cleans up timeout on unmount to prevent state update on unmounted component", () => {
+      const clearTimeoutSpy = vi.spyOn(globalThis, "clearTimeout");
+      const { unmount } = render(
+        <GraphChart nodes={sampleNodes} edges={sampleEdges} />,
+      );
+
+      // Unmount before timeout fires
+      unmount();
+
+      // clearTimeout should have been called (cleanup function ran)
+      expect(clearTimeoutSpy).toHaveBeenCalled();
+      clearTimeoutSpy.mockRestore();
+    });
+  });
 });
diff --git a/component/src/charts/graph-chart.tsx b/component/src/charts/graph-chart.tsx
index 4458abe9..fd5a2518 100644
--- a/component/src/charts/graph-chart.tsx
+++ b/component/src/charts/graph-chart.tsx
@@ -516,6 +516,20 @@ export function GraphChart({
 
   const hasLabels = labelPropertyMap.size > 0;
 
+  // Safety timeout: if NVL's onLayoutDone never fires (e.g. when the component
+  // mounts inside a CSS-animated dialog where the container starts at ~0 size),
+  // force layoutReady after a short delay so the loading spinner doesn't persist
+  // indefinitely.  When onLayoutDone fires normally this timeout is a no-op
+  // because the state is already true.
+  useEffect(() => {
+    if (layoutReady || nodes.length === 0) return;
+    const timer = setTimeout(() => {
+      setLayoutReady(true);
+      fitGraph();
+    }, 800);
+    return () => clearTimeout(timer);
+  }, [layoutReady, nodes.length, fitGraph]);
+
   if (!nodes.length) {
     return (
       <div
diff --git a/component/src/components/composed/app-shell.tsx b/component/src/components/composed/app-shell.tsx
index f3788e6f..921f0c86 100644
--- a/component/src/components/composed/app-shell.tsx
+++ b/component/src/components/composed/app-shell.tsx
@@ -14,7 +14,7 @@ function AppShell({ sidebar, header, children, className }: AppShellProps) {
       {sidebar}
       <div className="flex flex-1 flex-col overflow-hidden">
         {header}
-        <main className="flex-1 overflow-auto">{children}</main>
+        <main className="flex-1 overflow-y-scroll">{children}</main>
       </div>
     </div>
   );
diff --git a/component/src/components/composed/dashboard-mini-preview.tsx b/component/src/components/composed/dashboard-mini-preview.tsx
index 9776f46d..ef84ecd3 100644
--- a/component/src/components/composed/dashboard-mini-preview.tsx
+++ b/component/src/components/composed/dashboard-mini-preview.tsx
@@ -25,7 +25,7 @@ export function DashboardMiniPreview({
       <div
         className={cn(
           "aspect-[16/10] rounded-md border-2 border-dashed border-border/50 flex items-center justify-center",
-          className
+          className,
         )}
       >
         <span className="text-xs text-muted-foreground">No widgets</span>
@@ -40,7 +40,7 @@ export function DashboardMiniPreview({
     <div
       className={cn(
         "aspect-[16/10] rounded-md bg-muted/20 overflow-hidden",
-        className
+        className,
       )}
       style={{
         display: "grid",
@@ -55,7 +55,8 @@ export function DashboardMiniPreview({
           key={i}
           className={cn(
             "rounded-sm border border-border/30 overflow-hidden",
-            !w.thumbnailUrl && (chartTypePreviewColors[w.chartType] ?? "bg-muted")
+            !w.thumbnailUrl &&
+              (chartTypePreviewColors[w.chartType] ?? "bg-muted"),
           )}
           style={{
             gridColumn: `${w.x + 1} / span ${w.w}`,
@@ -67,6 +68,8 @@ export function DashboardMiniPreview({
               src={w.thumbnailUrl}
               alt=""
               loading="lazy"
+              width={320}
+              height={200}
               className="h-full w-full object-cover"
             />
           )}
diff --git a/docs/ux-friction-report.md b/docs/ux-friction-report.md
new file mode 100644
index 00000000..e8354c9e
--- /dev/null
+++ b/docs/ux-friction-report.md
@@ -0,0 +1,141 @@
+# NeoBoard UX Friction Report
+
+Generated via automated user simulation agents against the live app (release/1.0).
+
+---
+
+## Part 1: Admin Power User (Alex)
+
+**Overall: 3.5/5 stars | 55 screenshots | 0 console errors**
+
+### Session Summary
+
+- 6 tasks completed (1 partial — API key creation failed)
+- ~65 clicks across full session
+- Dashboard creation: 22 clicks for 3 widgets + extra page + save
+
+### Top Friction Points
+
+| #   | Severity   | Issue                                                                                                                |
+| --- | ---------- | -------------------------------------------------------------------------------------------------------------------- |
+| 1   | **High**   | Connection Edit does not pre-fill values — opens blank fields, user must re-enter URI/username/password from scratch |
+| 2   | **High**   | API Key creation fails with vague "Failed to create API key" error — no context on why                               |
+| 3   | **Medium** | Bar chart renders blank/gray on initial widget placement — only appears after resize/reload                          |
+| 4   | **Medium** | Axis controls (X/Y/Group By) shown on widget cards in edit mode — clutters the view                                  |
+| 5   | **Medium** | Bar chart X-axis labels overlap/truncate at default 6-column width                                                   |
+| 6   | **Low**    | Pie chart legends paginated (1/3) with tiny arrows — hard to see all categories                                      |
+| 7   | **Low**    | Dashboard thumbnails don't adapt to dark mode — light previews on dark background                                    |
+
+### What Works Well
+
+- Login is fast (388ms)
+- Connection test with inline error feedback + expandable error cards — standout feature
+- User management: inline role dropdowns, write toggles, force password change with temp password dialog
+- Profile settings page well-structured
+- Widget Showcase: 28 widgets across 5 pages — impressive
+- Dark mode comprehensive, zero contrast issues detected
+- Fullscreen chart view works perfectly
+- Zero console errors throughout session
+- Multi-page dashboards with tab navigation
+
+### Recommendations
+
+| Priority | Area             | Suggestion                                                         |
+| -------- | ---------------- | ------------------------------------------------------------------ |
+| P0       | Connections      | Fix edit dialog to pre-fill existing connection values             |
+| P0       | API Keys         | Debug creation failure; improve error message specificity          |
+| P1       | Dashboard Editor | Auto-run query preview when connection + chart type selected       |
+| P1       | Dashboard Editor | Hide axis/group-by dropdowns from widget cards; keep in modal only |
+| P1       | Charts           | Fix bar chart blank render on initial placement                    |
+| P2       | Charts           | Responsive bar chart label rotation based on width                 |
+| P2       | Charts           | Scrollable/wrapped pie chart legend instead of paginated           |
+| P2       | Dashboard List   | Apply dark-mode filter to thumbnail previews                       |
+| P2       | Users            | Show current user identity in sidebar                              |
+| P3       | Widget Editor    | Add quick templates ("Top N by count", "Time series")              |
+| P3       | Onboarding       | Guided walkthrough for first-time empty dashboard                  |
+
+---
+
+## Part 2: First-Time Creator (Jordan)
+
+**Overall: 3/5 stars | Onboarding: 2/5 | 58 steps | 6/7 tasks completed**
+
+### Top Friction Points
+
+| #   | Severity | Issue                                                                               |
+| --- | -------- | ----------------------------------------------------------------------------------- |
+| 1   | **P0**   | Login page has no product description — new users don't know what NeoBoard is       |
+| 2   | **P0**   | "Sign up" link loops when registration is disabled — looks broken                   |
+| 3   | **P0**   | Cypher query persists when switching to PostgreSQL connection — wrong language risk |
+| 4   | **P1**   | No onboarding tour, tooltip walkthroughs, or getting started guide                  |
+| 5   | **P1**   | `/settings` root shows broken skeleton — should redirect to `/settings/profile`     |
+| 6   | **P1**   | Widget editing requires 3 clicks (kebab → Edit) — no double-click shortcut          |
+| 7   | **P2**   | Dashboard cards only clickable on title text, not entire card                       |
+| 8   | **P2**   | Widget Lab empty with no starter templates                                          |
+| 9   | **P2**   | Widget Lab card icons have no labels                                                |
+| 10  | **P3**   | Style tab doesn't refresh when chart type changes                                   |
+| 11  | **P3**   | Transform tab has no help text                                                      |
+
+### What Works Well
+
+- Clean modern UI with consistent styling
+- 16 chart types — strong offering comparable to Grafana/Metabase
+- Live preview pane in widget editor — "exactly like Tableau's Data Source preview"
+- SQL auto-detected from connection type
+- Rich table features (sort, paginate, group, color scales, conditional formatting)
+- Widget actions (Export CSV, Duplicate, Save to Widget Lab)
+- Theme toggle, auto-refresh, import/export
+- "Add Widget" dialog comprehensive and well-organized
+
+### Recommendations
+
+| Priority | Suggestion                                                                         | Why                                           |
+| -------- | ---------------------------------------------------------------------------------- | --------------------------------------------- |
+| P0       | Add tagline on login page ("Visual dashboards for Neo4j & PostgreSQL")             | New users have zero context about the product |
+| P0       | Fix "Sign up" redirect loop — hide link or show message when registration disabled | Makes app look broken                         |
+| P0       | Clear query editor when switching connection types                                 | Wrong-language query risk                     |
+| P1       | Add "Getting Started" empty state for new users with no dashboards                 | Guide first-time users                        |
+| P1       | Fix /settings root redirect to /settings/profile                                   | Shows broken skeleton                         |
+| P1       | Allow double-click widget to edit                                                  | Reduce friction from 3 clicks to 1            |
+| P2       | Make entire dashboard card clickable                                               | Standard UX pattern                           |
+| P2       | Add starter templates to Widget Lab                                                | Empty lab doesn't convey value                |
+| P2       | Add tooltips to Widget Lab card icons                                              | 5 unlabeled icons require guessing            |
+| P3       | Refresh Style tab when chart type changes                                          | Stale options from previous type              |
+| P3       | Add help text to Transform tab                                                     | New users are lost                            |
+
+---
+
+## Combined Priority Matrix
+
+### P0 — Must Fix
+
+1. Login page: add product tagline/description
+2. Sign-up link: fix redirect loop when registration disabled
+3. Query editor: clear query when switching connection types
+4. Connection edit: pre-fill existing values (currently blank)
+5. API key creation: debug failure + improve error message
+
+### P1 — Should Fix
+
+6. /settings root redirect to /settings/profile
+7. Double-click widget to edit (reduce 3 clicks to 1)
+8. Auto-run query preview in widget editor
+9. Hide axis controls from widget cards in edit mode
+10. Fix bar chart blank render on initial placement
+11. Onboarding tour/getting started guide
+
+### P2 — Nice to Have
+
+12. Entire dashboard card clickable
+13. Starter templates in Widget Lab
+14. Tooltips on Widget Lab card icons
+15. Responsive bar chart label rotation
+16. Scrollable pie chart legend
+17. Dark-mode-aware dashboard thumbnails
+18. Current user identity in sidebar
+
+### P3 — Polish
+
+19. Refresh Style tab on chart type change
+20. Help text on Transform tab
+21. Quick templates in widget editor