🏗️ Architecture: How to create deep interconnection between preview, editor, ...

Date: 2026-03-11
Time: 23:36:54 UTC
Session: gspace1-205.3
Agent: angular
Confidence: 92%
Status: ✅ Documented

📋 Decision Context

Question:

How to create deep interconnection between preview, editor, and chat in vitto-studio so clicking an element in one tool immediately informs the others?

Task: Not specified

🎯 Decision Made

Chosen:

StudioInterconnectionService as single source of truth with FocusContext signal, loop prevention via source-based propagation skip, and debounced updates (150ms for UI, immediate for chat). Preview bridge client script injected into compiled HTML provides click-to-select and hover highlights via data-studio-id attributes.

Options Considered:

1. Global event bus (Subject) — simple but no loop prevention, hard to debug
2. StudioInterconnectionService with FocusContext signal — centralized, typed, loop-safe
3. Direct service-to-service injection — tight coupling, circular dependency risk
4. Redux/NGXS global state — overkill for cross-tool focus tracking

💭 Reasoning

The interconnection challenge is keeping 4 subsystems (preview, editor, chat, canvas) synchronized without infinite loops. A centralized service with a single FocusContext signal acts as source of truth. Each update carries a source: FocusSource field ('preview'|'editor'|'chat'|'canvas'|'file-tree'|'system'). When propagating to other subsystems, the originating source is skipped — this prevents A→B→A loops. Chat source gets immediate propagation (no debounce) because AI edits should reflect instantly. The preview bridge client (~100 lines injected JS) walks the DOM tree to find [data-studio-id] attributes, which the ComponentTaggingPlugin injects during rspack compilation. This Lovable-style approach maps DOM elements back to source files. New bridge message types (STUDIO_ELEMENT_SELECTED, STUDIO_HIGHLIGHT_ELEMENT, etc.) added to embeddable-bridge's BridgeMessageType union with full payload types.

📁 Files Involved

• libs/libs-structural/vitto-studio/src/lib/services/studio-interconnection.service.ts
• libs/libs-structural/vitto-studio/src/lib/types/studio-interconnection.types.ts
• libs/libs-structural/platform-preview/src/lib/services/preview-bridge.service.ts
• libs/libs-structural/platform-preview/src/lib/config/preview-bridge-client.ts
• libs/libs-structural/platform-preview/src/lib/plugins/component-tagging.plugin.ts
• libs/libs-ux/embeddable-bridge/src/lib/models/bridge-events.model.ts

🔗 Related

• Decision ID: dev_1773272214305_lx5ppzl
• Session: 205
• Workspace: gspace1

Auto-generated by MCP Smart Consolidation