🏗️ Architecture: How to implement cross-app drag-and-drop between separate NX...

Date: 2026-02-27
Time: 00:22:34 UTC
Session: gspace1-149.5
Agent: angular
Confidence: 85%
Status: ✅ Documented

📋 Decision Context

Question:

How to implement cross-app drag-and-drop between separate NX apps without relying on Chrome extension?

Task: Session 149: Phase 4 - Cross-app drag-and-drop

🎯 Decision Made

Chosen:

Created CrossAppDragService in embeddable-bridge using BroadcastChannel (same-origin) + WebSocket relay via command-center gateway (cross-origin). Enhanced existing EmbeddableDragSourceDirective with crossApp input. Added drag:event handler to command-center.gateway.ts that broadcasts to all clients except sender. Created CrossAppDragIndicatorComponent for visual feedback.

Options Considered:

• No alternatives documented

💭 Reasoning

Cannot rely on Chrome extension for transport (user's constraint). BroadcastChannel handles same-origin tabs instantly. For cross-origin (different NX apps on different ports), the backend WebSocket (command-center gateway already connected by all apps) relays drag events. This reuses existing infrastructure — no new WebSocket connections needed. The existing EmbeddableDragSourceDirective was extended rather than replaced, maintaining backward compatibility.

📁 Files Involved

• libs/libs-ux/embeddable-bridge/src/lib/services/cross-app-drag.service.ts
• libs/libs-ux/embeddable-bridge/src/lib/directives/embeddable-drag-source.directive.ts
• libs/libs-ux/embeddable-bridge/src/lib/models/bridge-events.model.ts
• APIs/backend-ai-api/src/app/command-center/command-center.gateway.ts
• libs/libs-ux/embeddable-bridge/src/lib/components/cross-app-drag-indicator.component.ts

🔗 Related

• Decision ID: dev_1772151754901_lwo39je
• Session: 149
• Workspace: gspace1

Auto-generated by MCP Smart Consolidation