feat: add annotation handling and ER diagram layer functionality

[Yashh56]

This pull request introduces ER diagram annotation support using the tldraw library, allowing users to overlay, save, and load freeform annotations on ER diagrams. The implementation includes backend storage, new API endpoints, and a frontend annotation mode with UI integration.

Backend support for annotations:

• Added AnnotationsFile type and storage of annotation snapshots in bridge/src/services/projectStore.ts. Includes methods for saving and loading annotations, and updates project export structure to include annotations. [1] [2] [3] [4] [5]
• Introduced new JSON-RPC handlers for getting and saving project annotations in bridge/src/handlers/projectHandlers.ts and registered them in bridge/src/jsonRpcHandler.ts. [1] [2]

Frontend integration and annotation mode:

• Added AnnotationLayer component using tldraw for annotation overlay, with logic for loading/saving snapshots and debounced persistence via backend API.
• Integrated annotation mode toggle in ER diagram UI (ERDiagramContent.tsx), including UI controls, overlay rendering, disabling diagram interactions while annotating, and updating export logic to include annotation layer. [1] [2] [3] [4] [5] [6] [7] [8] [9]

API and type updates:

• Extended bridgeApi.ts and project types to support annotation file operations and project export including annotations. [1] [2] [3] [4]

Dependency update:

• Added tldraw library to package.json for annotation functionality.

[Copilot]

Pull request overview

This PR adds ER diagram annotation support using the tldraw library, allowing users to overlay freeform drawings on top of ER diagrams. Annotations are persisted per-project via a new backend API and JSON storage.

Changes:

• Added AnnotationsFile type, new project.getAnnotations/project.saveAnnotations JSON-RPC handlers, and storage logic in projectStore.ts
• Introduced AnnotationLayer component (lazily loaded) using tldraw with debounced save and snapshot load on mount
• Integrated annotation mode toggle button into ERDiagramContent, disabling ReactFlow interactions while annotating and updating export to capture the full layer

Reviewed changes

Copilot reviewed 8 out of 9 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/types/project.ts	Adds AnnotationsFile interface and extends ProjectExport with annotations field
src/services/bridgeApi.ts	Adds getProjectAnnotations and saveProjectAnnotations API methods
src/components/er-diagram/AnnotationLayer.tsx	New component: tldraw canvas overlay with load/save logic
src/components/er-diagram/ERDiagramContent.tsx	Adds annotation mode toggle, overlay rendering, ReactFlow disabling, export update
bridge/src/services/projectStore.ts	Adds AnnotationsFile type, get/save methods, and includes annotations in export
bridge/src/handlers/projectHandlers.ts	New handleGetAnnotations and handleSaveAnnotations handlers
bridge/src/jsonRpcHandler.ts	Registers the two new annotation RPC endpoints
package.json / pnpm-lock.yaml	Adds tldraw@^4.4.1 dependency (and its transitive deps)

---

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.