2026 03 09 S197 Vitto Generation Pipeline Design

Documentation for Plans

S197 Design: Vitto End-to-End Generation Pipeline

Overview

Fix the agent loop stalling that prevents module generation, deep-port gmodules1's proven generation patterns into Vitto, integrate generation with the existing 51-feature Vitto UI ecosystem, and enable full conversational generation with interactive/autonomous modes.

Stream A: Backend — Generation Foundation

A1. Agent Loop Stall Fix

Root cause: System prompt from context-assembly.service.ts concatenates 10+ sections with zero token budget enforcement. When total exceeds context window, tool definitions get dropped. LLM responds with text only, stopReason !== 'tool_use', loop exits at iteration 1.

Changes:

A2. Template Registry (from gmodules1)

New service: TemplateRegistryService in module-generation/templates/

5 template types: crud, dashboard, analytics, integration, basic

Pre-generated files per template (CRUD example):

models/{{entity}}.model.ts          # Entity interface extending BaseEntity
models/index.ts                     # Barrel export
services/{{entity}}.repository.ts   # API service extending BaseCrudApiService<T>
services/index.ts                   # Barrel export
components/{{entity}}-list/         # List component with useCrudList() composable
components/{{entity}}-detail/       # Detail component with useCrudDetail() composable
components/{{entity}}-form/         # Form component with useCrudForm() composable

Template variables: {{entity}}, {{Entity}}, {{entities}}, {{Entities}}, {{ENTITY}}, {{PascalCaseName}}, {{moduleName}}

Token reduction: ~45% — LLM enhances pre-generated files instead of writing from scratch.

getTemplatePromptContext() provides template-aware context to phase prompts.

A3. Composable Functions Registry

Port gmodules1 composables that generated code will use:

These composables are what make output "editable" — they configure existing shell components that the embeddable-bridge renders. Changes are config adjustments, not rewrites.

A4. Prompt Enhancement

Enrich Vitto's 5 phase prompts (system-analyze.prompt.md, system-decompose.prompt.md, system-plan.prompt.md, implement-visual.prompt.md, implement.prompt.md) with:

A5. Context Caching + Checkpoint/Resume

ProjectContextCacheService:

Phase checkpoint system:

Validation rules per phase (from gmodules1):

Stream B: Frontend — UI + Integration

B1. Pipeline Visualizer Panel (vitto-studio)

New dock panel in @libs-structural/vitto-studio: PipelineVisualizerPanelComponent

Layout: DAG graph (left 60%) + active phase detail (right 40%)

DAG graph:

Detail panel (when node selected):

Bottom bar: Overall pipeline stats — total progress %, total tokens, total time

Editor mode (when not generating): drag to reorder steps, add/remove skills, configure timeouts, toggle parallel/sequential. Saves to playbook orchestration field.

SSE integration: Wires into existing StudioGenerationListenerService events + new events:

B2. Enhanced Properties Panel (vitto-studio)

Extend existing PropertiesPanelComponent:

B3. Generation Toolbar Indicator (vitto-studio)

Enhance studio-toolbar generation indicator:

B4. Workflow-Generation Integration

Extend WorkflowBuilderPageComponent to support generation pipelines:

New step types:

Workflow templates: Pre-built "CRUD Module Generation" workflow from playbook orchestration config.

Bidirectional conversion: Playbook orchestration.steps[] ↔ workflow definition. Import a playbook as a workflow, or save a custom workflow as a playbook orchestration.

Parallel branches: Workflow canvas parallel branches = parallel generation phases.

B5. Skills as Workflow Steps

Skills from Skill Studio usable as workflow Action steps:

B6. Templates UI Enhancement

Extend ContentTemplatesComponent at /vitto/templates:

B7. Queue + Observatory Integration

Queue Dashboard: Generation tasks appear as queue items (pending, active, completed, failed) Observatory Agent Monitor: Generation progress visible in real-time Cost Dashboard: Token costs per generation tracked Failure Chains: Failed generations analyzed for patterns Specialization Matrix: Generation skill mastery displayed

Stream C: Conversational Generation

C1. Interaction Mode Selection

At generation start, Vitto asks:

"I can walk you through this step by step so you can guide the decisions, or I can build it autonomously and show you the result. Which do you prefer?"

Interactive → SUGGEST autonomy level:

Autonomous → AUTONOMOUS autonomy level:

Mode stored in user dossier workPatterns.preferredWorkflow.

C2. Interactive Checkpoints

In interactive mode, Vitto pauses at:

  1. Pre-generation: Entity relationships confirmation
  2. After analyze: Component structure preview
  3. After plan: Architecture approval
  4. During execute: Per-component style choices
  5. Post-generation: Final review + tweaks

Each checkpoint saves phase state. User can modify, then Vitto resumes from that point.

C3. Post-Generation Conversational Editing

After generation, user modifies via chat:

Works because generated code uses composable functions — changes are config, not rewrites. Each modification logged as a learning outcome.

C4. Enhanced Chat Plugins

Studio Plugin (extend existing createStudioPlugin()):

Mastery Plugin (wire existing empty enrichMessage()):

C5. PlaybookCreator "Let Vitto Help"

Wire onLetVittoHelp() in PlaybookCreatorComponent:

C6. Learning Loop

Every generation produces learning data:

  1. Outcome logging via studio-learning.service (success/failure + metrics)
  2. User modifications logged as "correction" events in dossier
  3. Mastery updates via SSE in real-time during generation
  4. Strategy self-optimization after 3+ failures (already in S196 JobMasteryService)
  5. Knowledge Graph nodes created for generated entities/relationships
  6. Thought Trace shows reasoning during each phase

Architecture Diagram

User Chat Message
    ↓
Interaction Mode Check (autonomy.service.ts)
    ↓
┌── Interactive ──────────────────────────┐
│ Checkpoint gates between phases         │
│ User approves/modifies at each step     │
│ Post-gen conversational editing         │
└─────────────────────────────────────────┘
    ↓
Agent Loop (agent-loop.service.ts) [FIXED: token budget + tool assertion]
    ↓
Tool: start_module_generation
    ↓
Template Registry → Pre-generate boilerplate (45% token reduction)
    ↓
Phase Pipeline (workflow steps):
    ANALYZE → PLAN → EXECUTE (parallel: backend + frontend) → VERIFY
    ↓ (each phase)
    ├── Prompt: enhanced with gmodules1 rules + mastery context
    ├── Template: pre-generated files with composable functions
    ├── Validation: per-phase rules (build, lint, type-check)
    ├── SSE events: progress, files, tokens, mastery
    └── Checkpoint: save state, optional user gate
    ↓
Generated Files → AiFileWriterService → File Review → Git Commit
    ↓
Learning Pipeline:
    ├── Outcome → studio-learning.service
    ├── Corrections → user-dossier.service
    ├── Mastery → job-mastery.service
    ├── Strategy → self-optimization (after 3+ failures)
    └── Knowledge Graph → entity relationships

Files to Create

Backend (backend-vitto-api)

Frontend (vitto-studio)

Frontend (vitto-hub — workflow extension)

Frontend (vitto-intelligence)

Frontend (vitto-chat)

Files to Modify

Backend

Frontend

Testing Strategy

Backend Tests

Frontend Tests

Integration Tests