VITTO STUDIO PRODUCTION READINESS REPORT

Documentation for Vitto

Vitto Studio & Hub — Production Readiness Report

Full-Depth Analysis: Studio IDE + Universe Hub + Page Builder Integration GoGrab Platform | March 23, 2026 | Testing Director Deep-Dive

Table of Contents

  1. Executive Summary
  2. Critical Bugs (Blockers)
  3. Hub Page Analysis
  4. Studio Panel-by-Panel Audit (19 Panels)
  5. Service Layer Health Matrix (40+ Services)
  6. Dock Layout System Deep-Dive
  7. Visual Builder: The Critical Gap + Integration Plan
  8. Accessibility & Standards Compliance
  9. Production Readiness Checklist
  10. Prioritized Enhancement Roadmap

1. Executive Summary

This report is the result of live browser testing of both the Studio (/studio) and Hub (/hub) pages, combined with deep code analysis of 19 panels, 40+ services, the dock layout library (~7,000 LOC), the page-builder library (~5,000 LOC), and the Hub component (745 LOC + 295 HTML + 827 SCSS).

Scores by Subsystem

Subsystem Score Status Blocking Issues
Hub Page 88/100 Production-ready Stats show 0 pages (possible counting issue), setTimeout debounce leak
Live Preview 85/100 Near-ready BUG-001: Module tab click destroys Studio state
Git Integration 80/100 Near-ready Missing: interactive staging, conflict resolution
Code Editor 78/100 Functional Missing: search, multi-cursor, intellisense
AI Generation (Vitto) 75/100 Functional Subscription leaks in SSE bridge
Entity Designer 72/100 Functional AI generates only 1 field per entity
Deploy Panel 65/100 Partial Custom domains "coming soon", no CI/CD
Data Browser 40/100 Broken BUG-002: Collection click navigates to wrong tab
Visual Builder 15/100 Placeholder Not connected to page-builder library (82/100)
Dock Layout System 90/100 Production-ready Minor: late hydration race, popout disabled

2. Critical Bugs (Blockers)

BUG-001: Studio State Destruction on Live Preview Navigation

BUG-002: Data Browser Collection Click Fails

BUG-003: Deploy Tab Race Condition

3. Hub Page Analysis

URL Tested: http://localhost:6200/space/chrome-space-1/universe/canguro/hub Component: UniverseHubComponent (745 LOC + 295 HTML + 827 SCSS) Library: @libs-space/universe-canvas

What's Working Well

Issues Found

Issue Severity Detail
Page count = 0 MEDIUM Hub shows "0 PAGES" but Studio shows pages inside modules. Counting logic may filter by type === 'page-module' which doesn't match generated pages.
Galaxy count = 0 LOW May be expected if galaxies aren't defined, but stat card shows "0" with no explanation
setTimeout debounce LOW Lines 236-248: Uses setTimeout instead of RxJS debounce. Timer not cleaned on destroy → potential memory leak
stats type casting LOW deploymentStatus and deployedUrl cast via any instead of proper typing
Empty Universe loop MEDIUM for...of with async operations has no transaction safety — partial deletion possible if one fails
No breadcrumb trail LOW Header shows universe name but no full path (Org > Space > Universe)
"EDITOR UI" badges MEDIUM Red "EDITOR UI" badges visible in Canvas Preview are debug artifacts that shouldn't show in production

Navigation Map (14 tools)

Category Tool Destination Route Status
Design & Build Unified Builder /universe/{slug}/builder RECOMMENDED badge
AI Generator /universe/{slug}/vibe READY
Universe Canvas /universe/{slug}/canvas READY
Grid Builder /modular-universe/universe/{id} READY
Content Modularity /modularity (space-scoped) READY
Page Builder /editor (space-scoped) READY
Singularity /flow-engine (space-scoped) READY
Code Editor /universe/{slug}/code-editor READY
Architecture Universe Architect /universe/{slug}/architect READY
Space Map /space-map (space-scoped) READY
Universe Map /universe-map/{id} READY
Deploy Launch Station /launch-station (space-scoped) READY
Quick Deploy Modal (PlatformDeploymentService) READY
Settings Modal (UniverseSettingsModal) READY
Danger Empty Universe 2-stage confirmation → delete all READY

4. Studio Panel-by-Panel Audit

Panel Maturity Matrix (19 Panels)

# Panel LOC Tier Error Handling Loading State Empty State Inline CSS?
1 visual-canvas-panel 217 Production None No Yes Yes (110 lines)
2 component-palette-panel 27 Wrapper None No No Yes
3 properties-panel 158 Production None No Yes Yes
4 deploy-panel 223 Partial (50%) Yes Yes No Yes (65 lines)
5 data-browser-panel 27 Wrapper None No No Yes
6 entity-designer-panel 27 Wrapper None No No Yes
7 file-review-panel 340 Production Yes Yes Yes Yes (187 lines)
8 pipeline-visualizer-panel 25 Wrapper None No No Yes
9 generations-panel 131 Production Yes No Yes External ✓
10 api-explorer-panel 27 Wrapper None No No Yes
11 branches-panel 176 Production None No Yes Yes
12 code-editor-panel 27 Wrapper None No No Yes
13 diff-panel 175 Production None Yes Yes Yes
14 docs-panel 27 Wrapper None No No Yes
15 file-tree-panel 40 Wrapper None No No Yes
16 git-graph-panel 160 Production Partial Yes Yes External ✓
17 history-panel 109 Production None Yes Yes Yes
18 module-tree-panel 123 Production None No Yes Yes
19 settings-panel 231 Production Partial No No Yes

Summary: 9 production panels (47%), 1 partial, 9 wrappers (47%). Only 2 panels use external templates/styles (generations, git-graph) — 17 panels violate the project's separate-files standard.

Key Panel Issues

deploy-panel (50% complete):

visual-canvas-panel (placeholder builder):

settings-panel:

5. Service Layer Health Matrix

Critical Service Issues

Service LOC Error Handling Memory Safety Type Safety Critical Issues
StudioVittoBridgeService 210 Partial LEAKY Good Nested .subscribe() without cleanup; EventSource not closed on early unsubscribe
PreviewService 656 Partial RISKY Unsafe (4 as any) 3 untracked subscriptions; compilationInProgress flag non-atomic race; 4 window as any global injections
StudioGitService 182 Partial RISKY Weak 5 unhandled throw new Error() without catchError; callers get broken Observable chains
GenerationService ~400 Partial RISKY Weak Subject actions$ never completed; _creatingDraft flag-based mutex non-atomic
StudioDeployService ~200 Silent Good Good error: () => {} swallows all errors silently; sets status but logs nothing
VfsService 449 Good Good Weak (22 !) 22 non-null assertions suggest brittle null checking patterns
ModuleExportService 1462 Partial Good Weak (12 !, 9 unknown) Largest service; 5 untracked .subscribe() calls
ModuleExportApiService 225 Good Good Excellent Best-designed service; comprehensive error recovery
EntityExtractionService 528 Good Good Weak AI timeout at 15s can leave pending promises; local fallback is solid
PlatformStateService ~300 Good Good Good TODO: 'current-user' hardcoded instead of from auth service

Subscription Leak Summary

Service Untracked .subscribe() calls Risk
PreviewService 3 HIGH — long-running compilations
ModuleExportService 5 MEDIUM — code generation
StudioVittoBridgeService 2 HIGH — SSE streams
GenerationService 3 MEDIUM — generation tasks
Total 13 —

Hardcoded Values Needing Configuration

Service Value Purpose
PreviewService debounceTime(800) Rebuild debounce
PreviewService debounceTime(500) Generation files debounce
PreviewService MAX_EMPTY_VFS_RETRIES = 5 Retry count
StudioGenerationListenerService 600_000 (10 min) Generation timeout
StudioGenerationListenerService 200_000 (3.3 min) Polling delay
StudioGenerationListenerService 15_000 (15 sec) Poll interval
EntityExtractionService 15_000 (15 sec) AI timeout
PlatformStateService 'current-user' Hardcoded author name

TODOs Found in Production Code

  1. platform-state.service.ts:282 — // TODO: Get from auth service (hardcoded author)
  2. platform-state.service.ts:606 — // TODO: Add more revert handlers
  3. modularity-integration.service.ts:253 — // TODO: Call backend API to create actual files
  4. flow-integration.service.ts:595 — // TODO: Implement ${block.type} block logic
  5. deploy-panel.component.ts:220 — Custom domain support placeholder
  6. git-graph-panel.component.ts:91 — // TODO: detect actual role from UserContextService
  7. settings-panel.component.ts:206 — Confirmation dialog for deletion

6. Dock Layout System Deep-Dive

Total LOC analyzed: ~8,000 (dock-layout lib + Studio integration)

Architecture

The dock system uses a tree-based LayoutState with three node types: SplitLayoutNode, TabsLayoutNode, PanelLayoutNode. State managed via Angular signals with dual persistence (IndexedDB via autoFlashState + localStorage backup).

Strengths

Issues Found

Issue Severity Detail
Late hydration race MEDIUM autoFlashState loads async, but initialize() is sync. Patched with 100ms setTimeout workaround (lines 464-479).
Singleton panel race LOW Rapid openPanel() calls can bypass singleton check. Application-level guard added but acknowledges it's "belt-and-suspenders".
Preview tab position bug LOW previewIndex calculated but never used — new preview added at 'center' instead of replacing at exact position.
Memory leak in DockWindowService MEDIUM startMove() returns cleanup function that caller must invoke. No automatic cleanup.
Tab element leak MEDIUM registerTabElement() stores DOM refs in Map. If DOM removed but Map not cleaned, prevents GC.
Cloud sync no retry MEDIUM HTTP failures logged but no retry mechanism. No exponential backoff. User can't manually retry.
5 as any casts LOW updateNode(nodeId, { pinned: true } as any) — should extend interface.
Popout disabled LOW enablePopout: false in studio-dock-shell. Feature exists but turned off.

Missing vs VS Code / JetBrains

Feature VS Code Studio Dock Gap
Panel zoom Yes No Missing
Panel search / quick-switcher Yes No Missing
"Group all X panels" No No N/A
Custom keybindings Yes No Missing
Per-panel auto-save Yes No Missing
Popout windows Yes Disabled Disabled
Breadcrumb in panels Yes No Missing

7. Visual Builder: The Critical Gap + Integration Plan

The Two Builders

Vitto Visual Builder (Studio) Page Builder Library
Score 15/100 82/100
LOC ~400 (4 stub components) ~5,000+ (24 services, full canvas)
Canvas Module card grid Full drag-drop with zoom, grid snap
Drag-Drop None 2-way (palette + AI panel)
Resize None 8-point handles, zoom-aware
Undo/Redo None 50-step snapshot history
Responsive None 4 breakpoints with inheritance
Layouts None Free, Grid, Flex, Flow
Presets None 13 container presets
Zone System None 4 semantic layouts
Code Gen None Full Angular component export
Persistence None IndexedDB auto-save
Shortcuts None Ctrl+Z/Y, Ctrl+C/V, Delete
Connected? — NOT connected to Studio

The Bridge Already Exists

EmbeddableToWidgetMapper service (embeddable-to-widget-mapper.service.ts) already converts Studio's module embeddables into page-builder WidgetInstance[] and Page objects. This bridge is implemented but unused.

Concrete Integration Plan

Phase 1 (1-2 days): Wire page-builder canvas into visual-canvas-panel

File to modify: visual-canvas-panel.component.ts

  1. Import PageCanvasComponent and PageStateService from @libs-structural/page-builder
  2. In effect(), watch UniverseStructureStateService.selectedNode()
  3. Convert selected module → Page via EmbeddableToWidgetMapper.mapToPage()
  4. Call PageStateService.loadPage(page)
  5. Render <lib-page-canvas> with widget inputs/outputs
  6. Wire widgetSelect output → CanvasSelectionService

Phase 2 (3-5 days): Full editor experience

  1. Connect properties panel to PageStateService.selectionState()
  2. Add widget palette for drag-drop additions
  3. Add toolbar: mode switch (design/preview/code), breakpoint selector, zoom, undo/redo
  4. Sync widget changes back to Studio's module storage

Phase 3 (1+ weeks): Advanced features

  1. Code generation from visual design
  2. AI embeddable suggestions
  3. Animation library integration
  4. Component marketplace

8. Accessibility & Standards Compliance

WCAG 2.1 AA Violations

Criterion Issue Components
1.1.1 Non-text content Missing ARIA labels on 30+ icon buttons StudioToolbar, all panels with action buttons
1.3.1 Info and relationships Tab-like elements missing role="tablist" Dock tab bars, toolbar tabs
2.1.1 Keyboard No keyboard navigation in canvas, palette, or dock panels BuilderCanvas, ComponentPalette, all dock panels
2.3.3 Animation from interactions No prefers-reduced-motion guard GenerationsPanel pulse, DeployPanel spinner
4.1.3 Status messages No aria-live regions for status updates Generation progress, deploy status, error messages

Code Standards Violations

17 of 19 panels use inline templates/styles, violating the project's "separate .ts, .html, .scss files" rule.

Worst offenders (inline CSS):

  1. file-review-panel.component.ts — 187 lines inline CSS
  2. visual-canvas-panel.component.ts — 110 lines inline CSS
  3. deploy-panel.component.ts — 65 lines inline CSS

9. Production Readiness Checklist

Blockers (Must fix before release)

Should fix (before GA)

Nice to have (post-GA)

10. Prioritized Enhancement Roadmap

Week 1-2: Critical Fixes

# Task Impact Effort
1 Fix BUG-001 (Preview navigation) Unblocks module previewing 1-2 days
2 Fix BUG-002 (Data browser) Unblocks data management 0.5-1 day
3 Add takeUntilDestroyed() to 4 services Prevents memory leaks 1 day
4 Fix StudioDeployService silent errors Enables error debugging 0.5 day
5 Fix StudioGitService unhandled throws Prevents broken streams 0.5 day

Month 1: High-Impact Improvements

# Task Impact Effort
6 Integrate page-builder into Studio Visual builder 15→82 3-5 days
7 Extract inline CSS to .scss (17 panels) Standards compliance 2 days
8 Add ARIA labels + keyboard nav Accessibility 2-3 days
9 Add global error boundary Prevents state destruction 1 day
10 Replace flag-based mutexes with RxJS operators Fixes race conditions 1 day

Month 2-3: Feature Enrichment

# Task Impact Effort
11 Code editor enhancements (search, multi-cursor) Developer experience 1-2 weeks
12 Entity designer auto-field generation AI quality 1 week
13 CI/CD pipeline + staging environments Deploy confidence 2 weeks
14 Component marketplace / widget library Builder power 2-3 weeks
15 Collaborative editing (WebSocket/CRDT) Team workflow 3-4 weeks

Appendix: Files Analyzed

Studio Core (19 panels, 40+ services)

Dock Layout Library (~7,000 LOC)

Page Builder Library (~5,000 LOC)

Hub Page

Supporting Infrastructure

Generated by Testing Director (Cowork Agent) — March 23, 2026 Live testing: Studio (/studio) + Hub (/hub) on localhost:6200 Code analysis: 19 panels, 40+ services, dock layout lib, page-builder lib, hub component