edit-schema: full-screen AI canvas with templates and live preview (#1784)

* feat(edit-schema): full-screen canvas with pan/zoom, table list, minimap

Restructure the schema editor into a Figma-style canvas with the AI chat
docked on the right. Adds a new SchemaDiagramViewer with mouse pan
(grab cursor), wheel-anchored zoom, double-click focus, a floating
searchable tables sidebar, fit-to-screen / reset controls, and a minimap
with a draggable viewport rectangle. Diagram re-renders re-fit
automatically when the source changes.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* feat(edit-schema): preview diagram, autosize prompt, robust fit-to-screen

Generate a mermaid ER preview from AI-returned CREATE TABLE SQL and show
it on the canvas as "Schema Preview" before the user applies — useful for
empty databases where the backend has no schema yet. Switch the prompt
textarea to cdkTextareaAutosize so it grows as the user types (2–10 rows).
Make the diagram viewer's fit-to-screen scale up to fill the visible area
(previously capped at 1×), measure the viewport live if ResizeObserver
hasn't fired yet, and reset transform + size signals when the source
changes so a new diagram is centered and sized from a clean state.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* refactor(schema-viewer): drop minimap, anchor 100% zoom to fit-to-screen

Remove the corner minimap (clone, viewport rectangle, drag handlers,
toggle, and resize tracking). Introduce a baseScale signal that holds
the fit-to-screen scale, and display zoom as a percentage relative to
it so 100% = filling the visible area. Zoom in/out steps and clamps are
expressed relative to baseScale (20%–800% of fit), so users always have
the same headroom to zoom in regardless of how big or small the diagram
is. Reset view now re-runs fit-to-screen.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* feat(edit-schema): better empty state, template cards, AST-based preview

Switch the Schema Preview builder from regex/comma-splitting to a real SQL
parser via node-sql-parser (PostgresQL with MySQL fallback) so multi-line
constraints, quoted identifiers, dialect-specific suffixes, and standalone
PRIMARY/FOREIGN KEY declarations are all picked up correctly. Rejecting a
batch now also wipes any "Schema Preview" diagram message it produced.

Refresh the empty-database welcome screen: replace the rocket with a
dashboard-style icon-box around the Material "schema" glyph, retitle to
"Generate your first table to start managing data", and show four template
cards (E-commerce, Blog, Project management, CRM) listing their tables. In
the right-docked Schema Assistant panel, the "Try asking" examples are
pinned near the input and only render when the connection has no tables;
prompt textarea grows with content via cdkTextareaAutosize. User messages
keep a bubble while AI replies blend into the panel background.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* chore(edit-schema): drop empty-state hint, rename templates heading

Push the "Describe what you need…" hint down with a 40px top margin so it
breathes from the top of the panel, and rename the templates section
heading to "or use a template" for clarity.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(edit-schema): declare node-sql-parser, move empty hint to welcome

Add node-sql-parser to frontend/package.json so the lockfile and CI's
immutable install agree; the AST-based Schema Preview builder was already
using it. Move the "Describe what you need…" hint out of the chat panel
empty state and into the empty-DB welcome screen as a subtitle under a
shorter "Create your first table" title; keep the chat-panel hint only
when a diagram is already loaded.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* chore(edit-schema): tighten welcome heading spacing

Wrap title and subtitle in a single heading block with its own 4px gap so
"Describe what you need and AI will generate the SQL" sits right under
"Create your first table" instead of inheriting the 16px welcome gap.
Drop the trailing period from the subtitle.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* feat(edit-schema): structured change cards + purple dark diagram

Replace the raw SQL block AI returns with a structured change card per
change: action label + icon tinted by tone (add / edit / remove), table
name as a monospaced heading, free-text aiSummary, and a column grid for
CREATE TABLE entries that lines up the type/badge columns across rows via
CSS subgrid (display: contents). Columns get PK/FK badges (with tooltips
showing the referenced table), plus NOT NULL / UNIQUE / DEFAULT chips.
Raw SQL is still available, but tucked behind a "View SQL" details
toggle.

Recolor the schema diagram in dark mode via mermaid themeVariables +
CSS safety net: dark violet backgrounds (#1d143a), muted purple borders
(#3d2b6e), light-lilac text and edges, no alternating row stripes — so
the diagram has a Rocketadmin-violet feel instead of bare mermaid gray.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(edit-schema): show welcome screen when backend returns empty mermaid

For freshly created, table-less connections the diagram endpoint returns
a non-empty string like just "erDiagram\n", which used to fool the
component into rendering an empty diagram viewer instead of the welcome
state with the template cards. Add a guard that checks for at least one
"NAME {" entity declaration in the mermaid source before pushing the
diagram message — when there are no entities, currentDiagram() stays
null and the welcome / templates screen renders.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: karinakharchenko

frontend/package.json

@@ -61,6 +61,7 @@
 		"ngx-cookie-service": "^19.0.0",
 		"ngx-markdown": "^19.1.1",
 		"ngx-stripe": "^19.0.0",
+		"node-sql-parser": "^5.4.0",
 		"pluralize": "^8.0.0",
 		"postgres-interval": "^4.0.2",
 		"posthog-js": "^1.341.0",