🏗️ Architecture: What is the Studio's primary UX paradigm? Originally built a...

Date: 2026-03-08
Time: 01:05:22 UTC
Session: gspace1-188.7
Agent: angular
Confidence: 93%
Status: ✅ Documented

📋 Decision Context

Question:

What is the Studio's primary UX paradigm? Originally built as a code editor IDE with Monaco, file tree, and editor tabs as the primary interface.

Task: S188: Studio visual-first philosophy — non-developer UX

🎯 Decision Made

Chosen:

Visual-first platform builder. The Studio is NOT a code editor — it's a visual canvas where non-developers see modules as cards, click to inspect, chat to modify, and deploy with one button. Code view is an escape hatch for power users (accessible via dock settings, not default). Primary panels: Module Browser (from space_modules MongoDB), Visual Canvas (from Universe.structure[]), Properties (from CanvasSelectionService). Secondary/power-user panels: File Tree (from GitLab API), Code Editor (from GitLab file content). Panel architecture is plugin-style — each panel is an independent component with its own data source.

Options Considered:

1. Code editor IDE (Monaco primary, visual secondary)
2. Visual-first builder with code as escape hatch (chosen)
3. Hybrid: split screen code + visual always visible
4. No-code only (remove code editor entirely)

💭 Reasoning

The user explicitly stated: 'the goal is not to be a code editor... our primary audience is not developers.' The file tree panel was showing monorepo /modules/ files (wrong data source for production). The code editor assumed local file access. The visual canvas was empty because it read from VFS (disk) instead of structure[] (MongoDB). The pivot: read module data from MongoDB (space_modules + structure[]), show as visual cards, let Vitto handle code generation behind the scenes. Code access is via GitLab API for power users who want to inspect generated code. This separation (visual primary, code secondary) is enforced by the dock layout default — Visual layout shows Canvas+Properties, Code layout shows Editor+API (toggled via toolbar).

📁 Files Involved

• libs/libs-structural/vitto-studio/src/lib/panels/visual-canvas-panel.component.ts
• libs/libs-structural/vitto-studio/src/lib/panels/module-tree-panel.component.ts
• libs/libs-structural/vitto-studio/src/lib/config/studio-dock-panels.config.ts

🔗 Related

• Decision ID: dev_1772931922641_3si2j9c
• Session: 188
• Workspace: gspace1

Auto-generated by MCP Smart Consolidation