Session 263: Proactive Visual Intelligence — Progress Report

Audience: Non-developers, stakeholders, product managers Date: 2026-03-24 Status: All 3 phases complete

What We Built (In Simple Terms)

Imagine you're building a website with GoGrab Space. Vitto generates it for you. Until now, the generated result was "take it or leave it." Starting with Session 263, Vitto now proactively analyzes every generated page, suggests improvements, and lets you apply them with one click.

Think of it like a design co-pilot that reviews your work in real-time and says: "Hey, this button should use our design system. Want me to fix it?" — and you click "Apply" and it's done.

Timeline of Work

Phase 1: Intelligence Bridge (Backend Wiring)

What it does: Connects Vitto's brain to 12,000+ past decisions stored in our AI system.

Why it matters: Vitto was making decisions in isolation. Now it reads from a library of proven solutions — like giving a new employee access to the company wiki before they start working.

Changes:

• Fixed a data quality bug where the same pattern was stored multiple times (duplicate data)
• Added categorization to decisions (e.g., "this is about Angular" vs "this is about backend APIs")
• Connected curated "golden decisions" (our best examples) into Vitto's thought process
• Added daily automatic sync of expertise data to Vitto's sub-agents

Impact: Vitto now makes better, more informed decisions based on historical evidence.

Phase 2: PVI V2 — Intelligence + Learning (9 Tasks)

What it does: After generating a platform, Vitto automatically scans every component and suggests improvements. Users can click anywhere in the live preview to see what Vitto recommends.

Task 1-2: Preview Communication + Ambient Dots

• The live preview can now send rich data to the studio (what element is clicked, what it contains, what's missing)
• Pulsing dots appear on elements that have suggestions (like notification badges)
• Dots survive when the preview refreshes

Task 3: Automatic Post-Generation Scan

• When Vitto finishes generating a platform, it immediately scans all components
• Instant scan (under 100ms): Checks for missing design system components, hardcoded colors, missing patterns
• AI deep scan (2-4 seconds): Uses Claude Haiku AI to find nuanced improvements
• Results merge together — the best of both approaches

Task 4: Chat Summary

• After scanning, Vitto posts a summary in the chat: "I found 12 enhancements for your platform"
• Shows the top 3 ranked improvements with "Apply" buttons
• "Apply All Top 3" button for quick improvements

Task 5: Apply All with Conflict Detection

• Users can apply multiple suggestions at once
• Smart conflict detection: if two suggestions contradict each other (e.g., "use a table" vs "use a card grid"), it applies the higher-impact one and skips the conflicting one
• Single undo point for the entire batch

Task 6: Smart AI Enrichment

• When a user clicks a category with few suggestions, Vitto automatically calls AI for more ideas
• 500ms smart delay prevents wasteful calls when users click rapidly
• Results are cached — clicking the same category twice doesn't cost anything extra

Task 7: Backend AI Module

• New backend module with smart model routing: simple tasks use fast/cheap AI (Haiku), complex tasks use powerful AI (Sonnet), cross-module analysis uses the most capable AI (Opus)
• 10 API endpoints for scanning, enriching, tracking, and learning

Task 8: Learning Layer

• Every user interaction is tracked: what they view, apply, dismiss, and undo
• Personalized weights: if a user mostly applies style suggestions, style gets ranked higher for them
• Daily automatic aggregation of preferences

Task 9: Timeline + History

• Horizontal timeline below the preview showing every change as a dot
• Click any dot to jump back to that state (visual time travel)
• Changes are pushed to our git server for permanent history

Phase 3: PVI V3 — Mastery + Ecosystem (7 Deliverables)

What it does: Takes PVI from a single-element tool to a platform-wide intelligence system that learns and evolves.

V3-1: Cross-Module AI Analysis

• When a platform has multiple modules (e.g., "Animals" + "Users" + "Reports"), Vitto can analyze relationships between them
• Uses the most powerful AI (Opus) to suggest: shared components, design patterns, data relationships, navigation improvements

V3-2: Quality Feedback Loop

• Tracks compilation success/failure rates for suggestions
• Tracks undo rates per category
• Categories with high undo rates automatically get deprioritized (users are telling us those suggestions aren't good)

V3-3: Auto-Evolving Design Knowledge

• A generator script that builds the SDK manifest (design system knowledge) from source files
• As the design system grows, the AI knowledge grows automatically
• Also generates a prompt template that helps the AI code generator produce better code

V3-4: Generation Pipeline Feedback

• Weekly report analyzing which PVI suggestions users apply most
• These "top patterns" feed back into the code generation pipeline
• Anti-patterns (suggestions with >40% undo rate) are flagged as things the generator should avoid
• Result: Over time, generated code gets better because it learns from what users actually want

V3-5: Multi-Element Selection

• Shift+click to select multiple elements at once
• Combined suggestions across all selected elements
• Detects shared components across selections and suggests extracting them into reusable components

V3-6: Design System Evolution

• Tracks which theme tokens (design system colors, spacing, etc.) users apply most
• Identifies hardcoded color values that should become design tokens
• Over time, reveals which design tokens are most valuable and which are missing

V3-7: Team-Level Learning

• Aggregates preferences across an entire organization
• New users automatically benefit from the team's collective taste
• Team leads can see design quality dashboards: adoption rates, top categories, trends

What This Means for the Product

By The Numbers

What's Next

Immediate (Next Sessions)

1. Wire LLM calls into the backend PVI scan/enrich endpoints (currently stubs returning empty)
2. Test end-to-end with a real platform generation → proactive scan → apply cycle
3. Restart backends to activate the new PVI module and intelligence bridge changes

Near-Term

4. Create remaining .intelligence.ts files for all 46 components (generator script ready)
5. Wire Hetzner git push for snapshot persistence (currently a stub)
6. Wire structural apply to actual LLM code generation via StudioVittoBridgeService

Medium-Term

7. Dashboard UI for team metrics and design analytics
8. CI integration for SDK manifest generation (auto-run on component changes)
9. Feedback loop activation — connect weekly pipeline reports to implement.prompt.md updates

Architecture at a Glance

User generates a platform
        │
        ▼
Vitto builds it (existing pipeline)
        │
        ▼
┌─────────────────────────────────┐
│  PROACTIVE ANALYSIS (NEW)       │
│  Phase A: Instant rule scan     │
│  Phase B: AI deep scan          │
│  → Ambient dots + chat summary  │
└───────────┬─────────────────────┘
            │
            ▼
User clicks element in preview
            │
            ▼
┌─────────────────────────────────┐
│  SUGGESTION ENGINE (NEW)        │
│  Rule-based + LLM enrichment    │
│  Floating toolbar + panel       │
└───────────┬─────────────────────┘
            │
            ▼
User clicks "Apply"
            │
            ▼
┌─────────────────────────────────┐
│  APPLY ENGINE (NEW)             │
│  Style: instant CSS injection   │
│  Structural: AI code generation │
│  Auto-rollback on failure       │
└───────────┬─────────────────────┘
            │
            ▼
┌─────────────────────────────────┐
│  LEARNING (NEW)                 │
│  Track interactions             │
│  Personalize weights            │
│  Feed back to generation        │
└─────────────────────────────────┘

Document generated: 2026-03-24 | Session 263 | Author: Claude Code (Opus 4.6)