🏗️ Architecture: How to architect the Proactive Visual Intelligence (PVI) sys...

Date: 2026-03-24
Time: 15:17:08 UTC
Session: gspace1-263.2
Agent: backend
Confidence: 95%
Status: ✅ Documented

📋 Decision Context

Question:

How to architect the Proactive Visual Intelligence (PVI) system across frontend and backend?

Task: Not specified

🎯 Decision Made

Chosen:

7-layer architecture: Prerequisites (P0) → Element Intelligence (L1) → Suggestion Engine (L2) → Proactive Analysis (L3) → Apply Engine (L4) → Snapshot/Undo (L5) → Learning (L6). Frontend: extend existing vitto-studio services + new @libs-ai/proactive-visual-intelligence library. Backend: new PVI NestJS module under engine/pvi/ in backend-vitto-api.

Options Considered:

1. Monolithic PVI service in vitto-studio (simpler but violates SRP)
2. Separate NX library per layer (over-engineered for current scale)
3. Backend-only approach with SSE streaming suggestions (too slow for instant rule-based suggestions)

💭 Reasoning

The PVI system spans iframe preview, studio services, and backend AI. A layered architecture ensures each concern is isolated: L1 handles iframe communication (postMessage), L2 is pure logic (framework-agnostic rule engine), L3 orchestrates analysis, L4 handles apply/rollback, L5 manages state persistence, L6 tracks learning. This mirrors the existing studio architecture where preview-bridge handles iframe comms, visual-editor handles VFS, and studio-vitto-bridge handles backend calls. The @libs-ai/proactive-visual-intelligence library keeps the rule engine and types framework-agnostic (no Angular imports), matching the convention established by @libs-ai/chat-plugin-core in S258.

📁 Files Involved

• libs/libs-ai/proactive-visual-intelligence/src/lib/index.ts
• libs/libs-structural/vitto-studio/src/lib/services/pvi.service.ts
• APIs/backend-vitto-api/src/app/engine/pvi/pvi.module.ts

🔗 Related

• Decision ID: dev_1774365428242_wu60zp2
• Session: 263
• Workspace: gspace1

Auto-generated by MCP Smart Consolidation