Rodrigo Rodriguez (Pragmatismo) 9fc33725b7 fix: use OAuth client credentials when PAT is missing

The login flow now falls back to OAuth client credentials flow when
the admin PAT token is not available. This allows login.html to work
even when Zitadel PAT generation hasn't been configured yet.

- Added get_oauth_token() helper function
- Login now tries PAT first, then OAuth client credentials
- Includes proper Zitadel scope for API access

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

2026-02-28 14:46:54 -03:00

22 KiB

Raw Blame History

VibeCode Complete Implementation Roadmap

Executive Summary

Current Status: BotUI's backend is 80% complete with powerful LLM-driven code generation. The frontend needs professional tools to match Claude Code's capabilities.

What Works (Backend):

✅ LLM-powered app generation (AppGenerator: 3400+ lines)
✅ Multi-agent pipeline (Orchestrator: Plan → Build → Review → Deploy → Monitor)
✅ Real-time WebSocket progress
✅ Database schema generation
✅ File generation (HTML, CSS, JS, BAS)
✅ Designer AI (runtime modifications with undo/redo)
✅ chromiumoxide dependency ready for browser automation

What's Missing (Frontend):

❌ Monaco/CodeMirror editor (just textarea now)
❌ Database UI (no schema visualizer)
❌ Git operations UI
❌ Browser automation engine (using Rust + chromiumoxide)
❌ Multi-file editing workspace
❌ Enhanced terminal

Architecture

┌─────────────────────────────────────────────────────────────┐
│                     USER REQUEST                             │
│              "I want a full CRM system"                      │
└────────────────────────┬────────────────────────────────────┘
                         │
                         ▼
┌─────────────────────────────────────────────────────────────┐
│              VIBE BUILDER UI                                 │
│  - Agent cards (Mantis #1-4)                                  │
│  - Task nodes visualization                                  │
│  - WebSocket real-time updates                               │
│  - Live chat overlay                                         │
│  - Code editor (Monaco)                    ← Phase 1        │
│  - Browser automation panel                 ← Phase 4        │
│  - Database schema visualizer              ← Phase 2        │
│  - Git operations UI                        ← Phase 3        │
└────────────────────────┬────────────────────────────────────┘
                         │
                         ▼
┌─────────────────────────────────────────────────────────────┐
│         BOTSERVER (Rust Backend)                             │
│  ┌────────────┐  ┌────────────┐  ┌────────────┐            │
│  │ Orchestrator│  │AppGenerator│  │Designer AI │            │
│  │ (5 agents)  │  │(LLM-driven)│  │(modifications)│         │
│  └────────────┘  └────────────┘  └────────────┘            │
│  ┌────────────┐  ┌────────────┐  ┌────────────┐            │
│  │  Browser   │  │   Git      │  │  Terminal  │            │
│  │ Automation │  │ Operations │  │  Service   │            │
│  │(chromiumoxide)│ │(git2)     │  │(xterm.js)  │            │
│  └────────────┘  └────────────┘  └────────────┘            │
└────────────────────────┬────────────────────────────────────┘
                         │
                         ▼
┌─────────────────────────────────────────────────────────────┐
│                  GENERATED OUTPUT                            │
│  - PostgreSQL tables                                         │
│  - HTML pages with HTMX                                      │
│  - CSS styling                                               │
│  - JavaScript                                                │
│  - BASIC tools/schedulers                                    │
│  - E2E tests (Playwright)                                    │
└─────────────────────────────────────────────────────────────┘

Implementation Phases

Phase 1: Code Editor Integration (P0 - Critical)

Goal: Replace textarea with professional code editor

Tasks:

Download Monaco Editor

cd botui
npm install monaco-editor@0.45.0
cp -r node_modules/monaco-editor min/vs ui/suite/js/vendor/

Create Editor Component
- botui/ui/suite/partials/editor.html
- Monaco container with tab bar
- File tree sidebar
- Save/Publish buttons
Editor JavaScript
- botui/ui/suite/js/editor.js
- Monaco initialization
- Language detection (.html, .css, .js, .bas, .json)
- Tab management (open, close, switch)
- Auto-save with WebSocket sync
API Endpoints
- botserver/src/api/editor.rs
- GET /api/editor/file/{path} - Read file
- POST /api/editor/file/{path} - Save file
- GET /api/editor/files - List files
Integration
- Update chat-agent-mode.html - replace textarea with Monaco
- Update vibe.html - add editor panel
- Add keyboard shortcuts (Ctrl+S, Ctrl+P, Ctrl+Shift+F)

Success Criteria:

Monaco loads in < 2 seconds
Syntax highlighting for 5+ languages
Multi-file tabs work
Auto-save completes successfully

Estimated Effort: 8-12 hours

Phase 2: Database UI & Schema Visualization (P0 - Critical)

Goal: Visual database management and query builder

Tasks:

Schema Visualizer Component
- botui/ui/suite/partials/database.html
- Canvas-based ER diagram
- Table cards with fields
- Relationship lines (foreign keys)
- Zoom/pan controls
Database JavaScript
- botui/ui/suite/js/database.js
- Fetch schema: /api/database/schema
- Render tables using Canvas API
- Click table → show field details
- Drag to rearrange
Query Builder UI
- Visual SELECT builder
- Table selection dropdown
- Join interface
- Filter conditions
- SQL preview pane
Data Grid
- Sortable columns
- Inline editing
- Pagination
- Export (CSV/JSON)
Backend API
- botserver/src/api/database.rs
- GET /api/database/schema - Tables, fields, relationships
- GET /api/database/table/{name}/data - Paginated data
- POST /api/database/query - Execute SQL
- POST /api/database/table/{name}/row - Insert/update
- DELETE /api/database/table/{name}/row/{id} - Delete

Success Criteria:

ER diagram shows all tables
Query builder generates valid SQL
Data grid supports inline edits
Export works correctly

Estimated Effort: 16-20 hours

Phase 3: Git Operations UI (P1 - High Priority)

Goal: Version control interface in Vibe

Tasks:

Git Status Panel
- botui/ui/suite/partials/git-status.html
- File list with status icons
- Stage/unstage checkboxes
- "Commit" button
Diff Viewer
- botui/ui/suite/partials/git-diff.html
- Side-by-side comparison
- Line highlighting (green/red)
- Syntax highlighting
Commit Interface
- Message input
- "Commit & Push" button
- Progress indicator
Branch Manager
- Branch dropdown
- "New Branch" dialog
- Switch/delete actions
Commit Timeline
- Vertical timeline
- Author, date, message
- Click → view diff
Backend API
- botserver/src/api/git.rs
- GET /api/git/status - Git status
- GET /api/git/diff/{file} - File diff
- POST /api/git/commit - Create commit
- POST /api/git/push - Push to remote
- GET /api/git/branches - List branches
- POST /api/git/branch/{name} - Create/switch
- GET /api/git/log - Commit history

Success Criteria:

Git status displays correctly
Diff viewer shows side-by-side
Commit workflow works end-to-end
Branch switching succeeds

Estimated Effort: 12-16 hours

Phase 4: Browser Automation Engine (P1 - High Priority)

Goal: Pure Rust browser automation for testing & recording

Why Rust + Chromiumoxide:

✅ Already in workspace: chromiumoxide = "0.7"
✅ No Node.js dependency
✅ Feature flag exists: browser in botserver/Cargo.toml
✅ Reference implementation: bottest/src/web/browser.rs (1000+ lines)

Tasks:

Core Browser Module

botserver/src/browser/mod.rs
- BrowserSession - Manage browser instance
- BrowserManager - Session lifecycle
- Methods: navigate(), click(), fill(), screenshot(), execute()

pub struct BrowserSession {
    id: String,
    browser: Arc<chromiumoxide::Browser>,
    page: Arc<Mutex<chromiumoxide::Page>>,
    created_at: DateTime<Utc>,
}

impl BrowserSession {
    pub async fn new(headless: bool) -> Result<Self>;
    pub async fn navigate(&self, url: &str) -> Result<()>;
    pub async fn click(&self, selector: &str) -> Result<()>;
    pub async fn fill(&self, selector: &str, text: &str) -> Result<()>;
    pub async fn screenshot(&self) -> Result<Vec<u8>>;
    pub async fn execute(&self, script: &str) -> Result<Value>;
}

Action Recorder

botserver/src/browser/recorder.rs
- RecordedAction - Navigate, Click, Fill, Wait, Assert
- ActionRecorder - Record/stop/export
- Export as Playwright test

#[derive(Serialize, Deserialize)]
pub struct RecordedAction {
    pub timestamp: i64,
    pub action_type: ActionType,
    pub selector: Option<String>,
    pub value: Option<String>,
}

impl ActionRecorder {
    pub fn start(&mut self);
    pub fn stop(&mut self) -> Vec<RecordedAction>;
    pub fn export_test_script(&self) -> String;
}

Test Validator
- botserver/src/browser/validator.rs
  - Check for flaky selectors
  - Validate wait conditions
  - Suggest improvements via Designer AI
Browser API
- botserver/src/browser/api.rs
  - POST /api/browser/session - Create session
  - POST /api/browser/session/:id/execute - Run action
  - GET /api/browser/session/:id/screenshot - Capture
  - POST /api/browser/session/:id/record/start - Start recording
  - POST /api/browser/session/:id/record/stop - Stop & get actions
  - GET /api/browser/session/:id/record/export - Export test

Vibe UI - Browser Panel

botui/ui/suite/partials/browser-controls.html
- URL bar with navigation buttons
- Record/Stop/Export buttons
- Actions timeline
- Browser preview iframe
- Screenshot gallery

botui/ui/suite/js/browser.js

let currentSessionId = null;
let isRecording = false;
let recordedActions = [];

async function initBrowser() {
    const resp = await fetch('/api/browser/session', {
        method: 'POST',
        body: JSON.stringify({ headless: false })
    });
    currentSessionId = (await resp.json()).id;
}

async function browserNavigate(url) {
    if (isRecording) {
        recordedActions.push({
            type: 'navigate',
            value: url,
            timestamp: Date.now()
        });
    }
    await executeAction('navigate', { url });
}

async function browserClick(selector) {
    if (isRecording) {
        recordedActions.push({
            type: 'click',
            selector: selector,
            timestamp: Date.now()
        });
    }
    await executeAction('click', { selector });
}

async function exportTest() {
    const resp = await fetch(`/api/browser/session/${currentSessionId}/record/export`);
    const data = await resp.json();

    // Download test file
    const blob = new Blob([data.script], { type: 'text/javascript' });
    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = `test-${Date.now()}.spec.js`;
    a.click();
}

botui/ui/suite/css/browser.css
- Browser panel styling
- Recording indicator animation
- Actions timeline
- Screenshot gallery grid

Integration with Vibe
- Add "Browser Automation" button to Vibe toolbar
- Load browser-controls.html in panel
- Element picker for selector capture
- Screenshot capture & gallery

Usage Example:

// In Vibe UI
openBrowserPanel();
toggleRecording();              // Start recording
browserNavigate('http://localhost:3000/my-crm');
browserClick('#create-btn');
browserFill('#name', 'Test');
browserClick('#save-btn');
toggleRecording();              // Stop recording
exportTest();                   // Download test-123.spec.js

Generated Test Output:

import { test, expect } from '@playwright/test';

test('Recorded test', async ({ page }) => {
  await page.goto('http://localhost:3000/my-crm');
  await page.click('#create-btn');
  await page.fill('#name', 'Test');
  await page.click('#save-btn');
});

Success Criteria:

Can navigate to any URL
Element picker captures selectors
Recording generates valid Playwright tests
Screenshots capture correctly

Estimated Effort: 20-24 hours

Phase 5: Multi-File Editing Workspace (P2 - Medium Priority)

Goal: Professional multi-file editing

Tasks:

Tab Management
- File tabs with close buttons
- Active tab highlighting
- Tab overflow scrolling
- Drag to reorder
Split-Pane Layout
- Split horizontal/vertical buttons
- Resize handles
- 2x2 grid max
File Comparison
- Side-by-side diff
- Line-by-line navigation
- Copy changes (L→R)
File Tree Sidebar
- Nested folders
- File type icons
- Expand/collapse
- Double-click to open
Quick Open
- Ctrl+P → Search files
- Fuzzy matching
- Arrow navigation
Project Search
- Ctrl+Shift+F → Search all files
- Results with line numbers
- Click to open file

Success Criteria:

10+ files open in tabs
Split view works (2-4 panes)
File comparison displays diffs
Quick open searches files

Estimated Effort: 12-16 hours

Phase 6: Enhanced Terminal (P2 - Medium Priority)

Goal: Interactive shell in Vibe

Tasks:

Terminal Container
- xterm.js integration (already vendor file)
- Multiple terminal tabs
- Fit addon for auto-resize
WebSocket Terminal
- Bi-directional WebSocket: /ws/terminal/{session_id}
- Protocol: {"type": "input", "data": "command\n"}
- Handle ANSI escape codes
Command History
- Up/Down arrows
- Ctrl+R search
- Persist in localStorage
Command Completion
- Tab completion
- File path completion
- Command flags
Backend Terminal Server
- Spawn PTY per session
- WebSocket handler
- Clean up on disconnect
File Transfer
- Drag file to upload
- upload / download commands
- Progress bars

Success Criteria:

Can type commands & see output
Arrow keys navigate history
Can run vim, top, etc.
Multiple terminals work

Estimated Effort: 10-14 hours

Phase 7: Advanced CRM Templates (P2 - Medium Priority)

Goal: Pre-built CRM accelerators

Tasks:

Template System
- botserver/src/templates/crm/
- Template JSON definitions
- Prompt templates
- Field libraries
CRM Templates
- Sales CRM
  - Tables: contacts, leads, opportunities, accounts, activities
  - Pages: dashboard, pipeline, contacts list
  - Tools: lead_scoring, email_automation
  - Schedulers: daily_summary, weekly_review
- Real Estate CRM
  - Tables: properties, clients, showings, offers
  - Pages: property gallery, client portal
  - Tools: mls_sync, showing_scheduler
  - Schedulers: showing_reminders, market_update
- Healthcare CRM
  - Tables: patients, appointments, treatments, insurance
  - Pages: patient portal, appointment scheduler
  - Tools: insurance_verification, appointment_reminders
  - Schedulers: daily_appointments, insurance_alerts
Template Gallery UI
- botui/ui/suite/partials/template-gallery.html
- Template cards with descriptions
- Preview screenshots
- "Use Template" button
Template Generator
- Load template JSON
- Customize with user details
- Generate all files
- Deploy to /apps/{name}

Success Criteria:

Can select template from gallery
Template generates full CRM
Customization works
Generated CRM is functional

Estimated Effort: 20-24 hours

Technical Implementation Notes

Code Quality Standards (per AGENTS.md)

MUST Follow:

✅ Error Handling - NO panics, use ? operator
✅ Safe Commands - Use SafeCommand wrapper
✅ Error Sanitization - Use ErrorSanitizer
✅ SQL Safety - Use sql_guard
✅ Rate Limiting - Per-IP and per-User limits
✅ CSRF Protection - CSRF tokens on state-changing endpoints
✅ Security Headers - CSP, HSTS, X-Frame-Options, etc.
✅ No CDNs - All assets local
✅ File Size - Max 450 lines per file
✅ Clippy Clean - 0 warnings, no #[allow()]

File Organization

Botui (Frontend):

botui/ui/suite/
  partials/
    editor.html
    database.html
    git-status.html
    git-diff.html
    browser-controls.html
    terminal.html
    template-gallery.html
  js/
    editor.js
    database.js
    git.js
    browser.js
    terminal.js
    templates.js
  css/
    editor.css
    database.css
    git.css
    browser.css
    terminal.css
    templates.css

Botserver (Backend):

botserver/src/
  api/
    editor.rs
    database.rs
    git.rs
  browser/
    mod.rs          # BrowserSession, BrowserManager
    recorder.rs     # ActionRecorder
    validator.rs    # TestValidator
    api.rs          # HTTP endpoints
    test_generator.rs
  templates/
    crm/
      sales.json
      real_estate.json
      healthcare.json
    mod.rs

Dependencies

Already in Workspace:

chromiumoxide = "0.7"  # Browser automation
tokio = "1.41"          # Async runtime
axum = "0.7"            # HTTP framework
diesel = "2.1"          # Database
git2 = "0.18"           # Git operations (add if needed)

Frontend (download & serve locally):

monaco-editor@0.45.0    # Code editor
xterm.js@5.3.0          # Terminal (already vendor file)

Testing Strategy

Unit Tests

All new modules need unit tests
Test coverage > 80%
Location: botserver/src/<module>/tests.rs

Integration Tests

End-to-end workflows
Location: bottest/tests/integration/

E2E Tests

Use chromiumoxide (bottest infrastructure)
Location: bottest/tests/e2e/
Test scenarios:
- Generate CRM from template
- Edit in Monaco editor
- View database schema
- Create git commit
- Record browser test

Rollout Plan

Milestone 1: Core Editor (Week 1)

Phase 1 complete (Monaco integration)

Milestone 2: Database & Git (Week 2)

Phase 2 complete (Database UI)
Phase 3 complete (Git Operations)

Milestone 3: Browser & Workspace (Week 3)

Phase 4 complete (Browser Automation)
Phase 5 complete (Multi-File Editing)

Milestone 4: Terminal & Templates (Week 4)

Phase 6 complete (Enhanced Terminal)
Phase 7 complete (CRM Templates)

Success Metrics

Phase 1: Code Editor

Monaco loads < 2 seconds
5+ syntax highlighters work
Multi-file tabs functional
Auto-save succeeds

Phase 2: Database UI

Schema visualizer displays all tables
Query builder generates valid SQL
Data grid supports inline edits
Export functionality works

Phase 3: Git Operations

Git status shows changed files
Diff viewer shows side-by-side
Commit workflow works
Branch switching succeeds

Phase 4: Browser Automation

Can navigate to any URL
Element picker captures selectors
Recording generates valid tests
Screenshots capture correctly

Phase 5: Multi-File Workspace

10+ files open in tabs
Split view supports 2-4 panes
File comparison works
Project search is fast (< 1s for 100 files)

Phase 6: Terminal

Interactive shell works
Can run vim, top, etc.
Multiple terminals run simultaneously
File transfer works

Phase 7: CRM Templates

3+ CRM templates available
Generation takes < 30 seconds
Generated CRMs are fully functional
Industry-specific features work

Conclusion

The BotUI platform already has a powerful backend capable of generating full applications via LLM. The main gaps are in the frontend user experience.

Once these 7 phases are complete, VibeCode will match or exceed Claude Code's capabilities while offering:

✅ Multi-user SaaS deployment ✅ Visual app building (Vibe Builder) ✅ Enterprise-grade multi-agent orchestration ✅ Pure Rust backend (no Node.js dependency) ✅ Integrated browser automation (chromiumoxide) ✅ Professional development environment

The biggest advantage: VibeCode can already generate working CRMs via the LLM pipeline. These phases add the professional UI tools to make it a complete development environment.

Total Estimated Effort: 98-126 hours (~3-4 weeks with 1 developer)

22 KiB Raw Blame History

VibeCode Complete Implementation Roadmap

Executive Summary

Architecture

Implementation Phases

Phase 1: Code Editor Integration (P0 - Critical)

Phase 2: Database UI & Schema Visualization (P0 - Critical)

Phase 3: Git Operations UI (P1 - High Priority)

Phase 4: Browser Automation Engine (P1 - High Priority)

Phase 5: Multi-File Editing Workspace (P2 - Medium Priority)

Phase 6: Enhanced Terminal (P2 - Medium Priority)

Phase 7: Advanced CRM Templates (P2 - Medium Priority)

Technical Implementation Notes

Code Quality Standards (per AGENTS.md)

File Organization

Dependencies

Testing Strategy

Unit Tests

Integration Tests

E2E Tests

Rollout Plan

Milestone 1: Core Editor (Week 1)

Milestone 2: Database & Git (Week 2)

Milestone 3: Browser & Workspace (Week 3)

Milestone 4: Terminal & Templates (Week 4)

Success Metrics

Phase 1: Code Editor

Phase 2: Database UI

Phase 3: Git Operations

Phase 4: Browser Automation

Phase 5: Multi-File Workspace

Phase 6: Terminal

Phase 7: CRM Templates

Conclusion

22 KiB

Raw Blame History