Update botui to latest commit which changes desktop title from 'Agent Farm' to 'General Bots' for brand consistency.
28 KiB
Unified Implementation Plan: VibeCode Platform
Executive Summary
This document unifies two separate task lists into a cohesive roadmap:
- task.md: Security & stability fixes (immediate priority)
- TASK.md: Feature implementation roadmap (development pipeline)
Current Status:
- 🎯 Backend: 80% complete - LLM-powered app generation, multi-agent orchestration, browser automation ready
- 🎨 Frontend: 40% complete - Vibe UI exists, missing professional tools (Monaco, Database UI, Git, Browser)
- 🔐 Security: Needs attention - Unsafe unwraps, dependency vulnerabilities (see Security Priorities below)
Part I: Security & Stability (FROM task.md) - IMMEDIATE PRIORITY ⚠️
1. Unsafe Unwraps in Production (Violates AGENTS.md Error Handling)
Issue: The codebase uses .unwrap(), .expect(), panic!() in production code, which is explicitly forbidden by AGENTS.md.
Vulnerable Locations:
botserver/src/drive/drive_handlers.rs:269 - Response::builder() unwrap
botserver/src/basic/compiler/mod.rs - Multiple unwrap() calls
botserver/src/llm/llm_models/deepseek_r3.rs - unwrap() outside tests
botserver/src/botmodels/opencv.rs - Test scope unwrap() leaks
Action Items:
- Replace ALL
.unwrap()with safe alternatives:- Use
?operator with proper error propagation - Use
unwrap_or_default()for defaults - Use pattern matching with early returns
- Apply
ErrorSanitizerto avoid panics
- Use
- Run
cargo clippy -- -W clippy::unwrap_used -W clippy::expect_used - Add unit tests verifying error paths work correctly
Estimated Effort: 4-6 hours
2. Dependency Vulnerabilities (Found by cargo audit)
Vulnerable Component:
- Crate:
glib 0.18.5 - Advisory:
RUSTSEC-2024-0429 - Issue: Unsoundness in
IteratorandDoubleEndedIteratorimpls forglib::VariantStrIter - Context: Pulled through
botdeviceandbotappvia Tauri plugins/GTK dependencies
Action Items:
- Review exact usage of glib in the codebase
- Check if patches are available in newer versions
- Evaluate risk given desktop GUI context
- If critical: upgrade GTK/Glib ecosystem dependencies
- If acceptable: document risk assessment and add to security review checklist
Estimated Effort: 2-4 hours
3. General Security Posture Alignment
CSRF Protection:
- ✅ Custom CSRF store exists:
redis_csrf_store.rs - ⚠️ Verify: ALL state-changing endpoints use it (standard
tower-csrfis absent from Cargo.toml)
Security Headers:
- ✅
headers.rsprovides CSP, HSTS, X-Frame-Options - ⚠️ Verify: Headers are attached UNIVERSALLY in botserver, not selectively omitted
Action Items:
- Audit all POST/PUT/DELETE endpoints for CSRF token validation
- Create middleware test to ensure security headers on all responses
- Document security checklist for new endpoints
Estimated Effort: 3-4 hours
Part II: Feature Implementation Roadmap (FROM TASK.md) - DEVELOPMENT PIPELINE
Architecture Overview
┌──────────────────────────────────────────────────────────────┐
│ USER REQUEST │
│ "I want a full CRM system" │
└────────────────────────┬─────────────────────────────────────┘
│
▼
┌──────────────────────────────────────────────────────────────┐
│ VIBE BUILDER UI │
│ ┌──────────────────┐ ┌──────────────────┐ │
│ │ Agent Sidebar │ │ Canvas Area │ │
│ │ (Mantis #1-4) │ │ - Task Nodes │ │
│ │ - Status cards │ │ - Preview │ │
│ │ - Workspaces │ │ - Chat Overlay │ │
│ └──────────────────┘ └──────────────────┘ │
│ │
│ NEW TOOLS TO ADD: │
│ 🔌 MCP Sources Panel ← botserver/src/sources/ui.rs │
│ 📝 Monaco Editor ← Phase 1 (Critical) │
│ 🗄️ Database Visualizer ← Phase 2 (Critical) │
│ 🐙 Git Operations ← Phase 3 (High) │
│ 🌐 Browser Automation ← Phase 4 (High) │
│ 📂 Multi-File Workspace ← Phase 5 (Medium) │
│ 🖥️ Enhanced Terminal ← Phase 6 (Medium) │
└────────────────────────┬─────────────────────────────────────┘
│
▼
┌──────────────────────────────────────────────────────────────┐
│ BOTSERVER (Rust Backend) │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ Orchestrator │ │ AppGenerator │ │ Designer AI │ │
│ │ (5 agents) │ │(LLM-driven) │ │(modifications)│ │
│ └──────────────┘ └──────────────┘ └──────────────┘ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ Browser │ │ Git │ │ Terminal │ │
│ │ Automation │ │ Operations │ │ Service │ │
│ │(chromiumoxide)│ │(git2) │ │(xterm.js) │ │
│ └──────────────┘ └──────────────┘ └──────────────┘ │
│ ┌──────────────────────────────────────────────────┐ │
│ │ MCP & Sources Integration ← ALREADY IMPLEMENTED │ │
│ │ - botserver/src/sources/mcp.rs │ │
│ │ - botserver/src/sources/ui.rs │ │
│ │ - /api/ui/sources/* endpoints │ │
│ └──────────────────────────────────────────────────┘ │
└────────────────────────┬─────────────────────────────────────┘
│
▼
┌──────────────────────────────────────────────────────────────┐
│ GENERATED OUTPUT │
│ - PostgreSQL tables │
│ - HTML pages with HTMX │
│ - CSS styling │
│ - JavaScript │
│ - BASIC tools/schedulers │
│ - E2E tests (Playwright) │
└──────────────────────────────────────────────────────────────┘
Part III: MCP & Sources Integration - EXISTING INFRASTRUCTURE ✅
What Already Exists
Backend Implementation (botserver/src/sources/):
sources/
├── mod.rs # Module exports
├── mcp.rs # MCP client, connection, server types
├── ui.rs # HTML pages for /suite/sources/*
├── knowledge_base.rs # Knowledge base upload/query
└── sources_api # API endpoints
API Endpoints (defined in botserver/src/core/urls.rs):
/sources/*:
/suite/sources - Main sources list page
/suite/sources/mcp/add - Add MCP server form
/suite/sources/mcp/catalog - MCP server catalog
/api/ui/sources/*:
/api/ui/sources/mcp - List MCP servers
/api/ui/sources/mcp/:name - Get server details
/api/ui/sources/mcp/:name/enable - Enable server
/api/ui/sources/mcp/:name/disable - Disable server
/api/ui/sources/mcp/:name/tools - List server tools
/api/ui/sources/mcp/:name/test - Test server connection
/api/ui/sources/mcp/scan - Scan for MCP servers
/api/ui/sources/mcp-servers - Get server catalog
/api/ui/sources/kb/upload - Upload to knowledge base
/api/ui/sources/kb/list - List knowledge base docs
/api/ui/sources/kb/query - Query knowledge base
/api/ui/sources/repositories - List repositories
/api/ui/sources/apps - List connected apps
Vibe UI Integration (botui/ui/suite/):
botui/ui/suite/
├── partials/
│ └── vibe.html # Main Vibe Builder UI
│ # - Agent sidebar (Mantis #1-4)
│ # - Canvas area with task nodes
│ # - Chat overlay
│ # - Preview panel
├── vibe/
│ └── agents-sidebar.css # Styles for agent sidebar
├── js/
│ └── chat-agent-mode.js # Agent-mode JavaScript
└── css/
└── chat-agent-mode.css # Agent-mode styles
Integration Task: Add MCP Panel to Vibe UI
Goal: Add a "Sources" panel to Vibe that shows connected MCP servers and allows management.
Action Items:
-
Create MCP Panel Component:
- File:
botui/ui/suite/partials/vibe-mcp-panel.html - Features:
- List connected MCP servers
- Show server status (active/inactive)
- Display available tools per server
- Quick enable/disable toggles
- "Add Server" button (opens
/suite/sources/mcp/add)
- File:
-
Add JavaScript:
- File:
botui/ui/suite/js/vibe-mcp.js - Fetch servers from
/api/ui/sources/mcp - Handle enable/disable actions
- Update server status in real-time
- Display tool risk levels
- File:
-
Add Styles:
- File:
botui/ui/suite/vibe/mcp-panel.css - Match existing agents-sidebar.css aesthetic
- Server cards with status indicators
- Tool badges with risk levels
- File:
-
Integrate into Vibe:
- Add "Sources" tab to Vibe sidebar
- Load MCP panel when tab clicked
- Show server count badge
Estimated Effort: 6-8 hours
Part IV: Implementation Phases (UPDATED WITH MCP INTEGRATION)
Phase 0: Security & Stability ⚠️ - IMMEDIATE (Week 0)
Priority: CRITICAL - Must complete before any feature work
Tasks:
- Fix all unsafe
unwrap()calls - Address dependency vulnerabilities
- Verify CSRF & security headers coverage
Estimated Effort: 9-14 hours
Success Criteria:
- ✅ Zero
unwrap()in production code - ✅
cargo auditpasses cleanly - ✅ All state-changing endpoints use CSRF tokens
- ✅ All responses include security headers
Phase 0.5: MCP Integration in Vibe (Week 0.5)
Priority: HIGH - Leverage existing infrastructure
Tasks:
- Create MCP panel component
- Add JavaScript for server management
- Style panel to match Vibe aesthetic
- Integrate into Vibe sidebar
Estimated Effort: 6-8 hours
Success Criteria:
- ✅ MCP servers visible in Vibe UI
- ✅ Can enable/disable servers
- ✅ Can see available tools
- ✅ Can add new servers
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)
- Update
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:
browserin botserver/Cargo.toml - ✅ Reference implementation: bottest/src/web/browser.rs (1000+ lines)
Tasks:
-
Core Browser Module
botserver/src/browser/mod.rsBrowserSession- Manage browser instanceBrowserManager- Session lifecycle- Methods:
navigate(),click(),fill(),screenshot(),execute()
-
Action Recorder
botserver/src/browser/recorder.rsRecordedAction- Navigate, Click, Fill, Wait, AssertActionRecorder- Record/stop/export- Export as Playwright test
-
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
- POST
-
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- Session management
- Action recording
- Test export
-
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
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
- Bi-directional WebSocket:
-
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/downloadcommands- 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
Part V: Technical Implementation Notes
Code Quality Standards (per AGENTS.md)
MUST Follow:
- ✅ Error Handling - NO panics, use
?operator - ✅ Safe Commands - Use
SafeCommandwrapper - ✅ 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
vibe-mcp-panel.html # NEW - MCP integration
js/
editor.js
database.js
git.js
browser.js
terminal.js
templates.js
vibe-mcp.js # NEW - MCP integration
css/
editor.css
database.css
git.css
browser.css
terminal.css
templates.css
vibe/
mcp-panel.css # NEW - MCP integration
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
sources/ # ALREADY EXISTS
mod.rs
mcp.rs
ui.rs
knowledge_base.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)
Part VI: 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
Part VII: Rollout Plan (UPDATED)
Milestone 0: Security & MCP (Week 0)
- Day 1-2: Fix all unsafe
unwrap()calls - Day 3: Address dependency vulnerabilities
- Day 4: Verify CSRF & security headers
- Day 5: Integrate MCP panel into Vibe UI
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)
Part VIII: Success Metrics
Security Milestones
- ✅ Zero
unwrap()in production code - ✅
cargo auditpasses - ✅ All endpoints have CSRF + security headers
Phase 0.5: MCP Integration
- ✅ MCP panel visible in Vibe sidebar
- ✅ Can enable/disable servers
- ✅ Can view available tools
- ✅ Can add new servers
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 has a powerful backend capable of generating full applications via LLM. The main gaps are in the frontend user experience and security hardening.
Key Insight:
- The
botserver/src/sources/infrastructure for MCP is already complete - The Vibe UI exists and is functional
- We need to connect them: add an MCP panel to the Vibe sidebar
Updated Priority Order:
- ⚠️ Security fixes (Week 0) - Unblock development risk
- 🔌 MCP integration (Week 0.5) - Quick win, leverage existing code
- 📝 Code editor (Week 1) - Core developer tool
- 🗄️ Database UI (Week 2) - Visual data management
- 🐙 Git operations (Week 2) - Version control
- 🌐 Browser automation (Week 3) - Testing & recording
- 📂 Multi-file workspace (Week 3) - Professional editing
- 🖥️ Terminal (Week 4) - Interactive shell
- 📇 CRM templates (Week 4) - Accelerators
Once these 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 MCP servers (extensible tools) ✅ Integrated browser automation (chromiumoxide) ✅ Professional development environment
Total Estimated Effort: 113-141 hours (~3-4 weeks with 1 developer)