diff --git a/.gemini/tasks/multiagent-task-ui-plan.md b/.gemini/tasks/multiagent-task-ui-plan.md new file mode 100644 index 0000000..134a375 --- /dev/null +++ b/.gemini/tasks/multiagent-task-ui-plan.md @@ -0,0 +1,931 @@ +# Multi-Agent Task Management UI — Implementation Plan + +> **Unifying `auto_task`, `tasks`, `designer` → Draggable Multi-Agent Windows** + +--- + +## 1. High-Level Vision (from Screenshots) + +The user wants a **desktop-like environment** with these elements: + +### Layout Components + +``` +┌──────┬──────────────────────────────────────────────────────┐ +│ │ [Tasks ⚙ 👤] ← Top Left Mini Bar (fixed) │ +│ SIDE │ │ +│ BAR │ ┌─────────────────────┐ ┌────────────────────────┐ │ +│ │ │ PRIMARY WINDOW │ │ SECONDARY WINDOW │ │ +│ (far │ │ "Tasks" │ │ "Agents & Workspaces" │ │ +│ left)│ │ Tabs: │ │ (can be minimized) │ │ +│ │ │ - // DASHBOARD │ │ │ │ +│ /chat│ │ - // TASK #N │ │ Agent cards, quota │ │ +│/drive│ │ │ │ monitors, workspace │ │ +│ etc. │ │ PLAN|BUILD|REVIEW| │ │ assignment │ │ +│ │ │ DEPLOY|MONITOR tabs │ │ │ │ +│ │ │ │ │ │ │ +│ │ │ Draggable task cards│ │ │ │ +│ │ │ with sub-tasks, │ │ │ │ +│ │ │ logs, output, chat │ │ │ │ +│ │ └─────────────────────┘ └────────────────────────┘ │ +│ │ │ +│ │ ┌───────────────────────────────────────────────┐ │ +│ │ │ // Chat (shared chat at bottom) │ │ +│ │ │ TIP: Describe your project... │ │ +│ │ └───────────────────────────────────────────────┘ │ +│ ├──────────────────────────────────────────────────────┤ +│ │ [Taskbar: open windows] [Clock] [Date] │ +└──────┴──────────────────────────────────────────────────────┘ +``` + +### Key Rules from User Request + +1. **Sidebar** → Far left (already exists in `desktop.html`, keep it) +2. **Top-left mini bar** → Fixed bar with "Tasks" label, ⚙ Settings icon, 👤 Account icon. **Remove Mantis logo**. +3. **Where it reads "Mantis" → read "Tasks"** (generic rename throughout) +4. **Primary Window: "Tasks"** → Two tabs: + - **// DASHBOARD** — Overview with Task #N agent card, DNA info, tokens, activity + - **// TASK #N** (project view) — PLAN | BUILD | REVIEW | DEPLOY | MONITOR pipeline tabs, with draggable task cards showing sub-tasks, logs, output +5. **Secondary Window: "Agents & Workspaces"** → Shows agent roster, quota monitors, workspace assignments. Can be minimized. +6. **Chat panel** → Shared at bottom of task view, project-scoped +7. **All windows** → Draggable, resizable, use existing `WindowManager` +8. **VibCode integration** → Multi-draggable agents like the designer canvas + +--- + +## 2. Codebase Inventory & Current State + +### Frontend (botui/ui/suite) + +| File/Dir | Purpose | Lines | Status | +|----------|---------|-------|--------| +| `desktop.html` | Main desktop shell, sidebar, tabs, workspace | 281 | ✅ Keep as shell | +| `js/window-manager.js` | Window open/close/drag/minimize/maximize | 296 | 🔧 Extend | +| `tasks/tasks.html` | Current task list + detail panel | 318 | 🔄 Refactor into new primary window | +| `tasks/tasks.js` | Task JS (3297 lines) | 3297 | 🔄 Refactor (heavy) | +| `tasks/tasks.css` | Task styles (70k+) | ~2400 | 🔄 Refactor/extend | +| `tasks/autotask.html` | AutoTask standalone UI | 484 | 🔄 Merge into primary window | +| `tasks/autotask.js` | AutoTask JS (2201 lines) | 2201 | 🔄 Merge | +| `tasks/autotask.css` | AutoTask styles | ~1200 | 🔄 Merge | +| `tasks/progress-panel.html` | Floating progress panel | 133 | 🔄 Keep as sub-component | +| `tasks/progress-panel.js` | Progress panel JS | ~550 | ✅ Keep | +| `tasks/intents.html` | Intents listing | ~400 | 🔄 Merge | +| `designer.html` | Visual .bas designer (node canvas) | 2718 | 📎 Reference for drag patterns | +| `designer.js` | Designer JS (nodes, connections, drag) | 921 | 📎 Reference for drag | +| `designer.css` | Designer styles | 500 | 📎 Reference | +| `partials/tasks.html` | Alternative tasks partial | 318 | 🔄 Will be replaced by new entry | + +### Backend (botserver/src) + +| File/Dir | Purpose | Lines | Status | +|----------|---------|-------|--------| +| `auto_task/autotask_api.rs` | AutoTask CRUD + execution API | 2302 | ✅ Keep (API stable) | +| `auto_task/task_types.rs` | AutoTask data types | 423 | ✅ Keep | +| `auto_task/task_manifest.rs` | Manifest tracking (progress tree) | 977 | ✅ Keep | +| `auto_task/app_generator.rs` | App generation from LLM | 3587 | ✅ Keep | +| `auto_task/intent_classifier.rs` | Intent classification | 1200+ | ✅ Keep | +| `auto_task/intent_compiler.rs` | Intent → plan compilation | 900+ | ✅ Keep | +| `auto_task/mod.rs` | Routes + WebSocket handlers | 293 | 🔧 Add new agent/workspace endpoints | +| `tasks/task_api/handlers.rs` | Task CRUD handlers | 393 | 🔧 Extend with agent-aware responses | +| `tasks/task_api/html_renderers.rs` | HTML card rendering | 700+ | 🔧 Update HTML to new design | +| `tasks/types.rs` | Task data types | 223 | 🔧 Add agent fields | +| `tasks/scheduler.rs` | Task scheduler (cron etc.) | 503 | ✅ Keep | +| `designer/workflow_canvas.rs` | Workflow design types | 421 | 📎 Reference | +| `designer/designer_api/` | Designer API handlers | ~200 | 📎 Reference | + +--- + +## 3. Implementation Phases + +### Phase 0: Terminology Rename (Mantis → Tasks/Agent) + +**Scope**: All UI references +**Effort**: ~30 min + +| What | Where | Change | +|------|-------|--------| +| "Mantis #1" | All HTML templates | → "Agent #1" | +| "MANTIS MANAGER" | Task cards | → "AGENT MANAGER" | +| Mantis logo/icon | Top bar, cards | → Remove, use ⚡ or 🤖 icon | +| "mantis" CSS classes | tasks CSS | → Rename to `agent-*` | +| Variable names | tasks.js, autotask.js | → `agent*` where needed | + +**Files to modify**: +- `botui/ui/suite/tasks/tasks.html` — template references +- `botui/ui/suite/tasks/tasks.js` — variable names +- `botui/ui/suite/tasks/tasks.css` — class names +- `botui/ui/suite/tasks/autotask.html` — template references +- `botui/ui/suite/tasks/autotask.js` — variable names +- `botserver/src/tasks/task_api/html_renderers.rs` — server-rendered HTML + +--- + +### Phase 1: Top-Left Mini Bar (Fixed) + +**Scope**: New component added to `desktop.html` +**Effort**: ~45 min + +Create a fixed top-left panel (anchored above sidebar) matching screenshot: + +``` +┌──────────────────────┐ +│ Tasks ⚙️ 👤 │ +└──────────────────────┘ +``` + +#### 1.1 New file: `botui/ui/suite/partials/minibar.html` + +```html +
+ Tasks +
+ + +
+
+``` + +#### 1.2 CSS additions in `desktop.html + + +``` + +**Integration into Vibe:** +```javascript +// In vibe.html, add deployment button to the canvas header: + +
+ // DASHBOARD > // ${currentProject} + +
+``` + +**Estimated Effort:** 8-10 hours + +--- + +## Part II: Remaining Feature Implementation (Phases 1-7) + +After deployment infrastructure is in place, continue with the original plan: + +### Phase 1: Code Editor Integration (P0 - Critical) +*(Same as original TASK.md - Monaco Editor)* + +### Phase 2: Database UI & Schema Visualization (P0 - Critical) +*(Same as original TASK.md)* + +### Phase 3: Git Operations UI (P1 - High Priority) +**UPDATED:** Add Forgejo-specific git operations +- View Forgejo repository status +- Sync with Forgejo remote +- View CI/CD pipeline status +- Trigger manual builds + +### Phase 4: Browser Automation Engine (P1 - High Priority) +*(Same as original TASK.md)* + +### Phase 5: Multi-File Editing Workspace (P2 - Medium Priority) +*(Same as original TASK.md)* + +### Phase 6: Enhanced Terminal (P2 - Medium Priority) +*(Same as original TASK.md)* + +### Phase 7: Advanced CRM Templates (P2 - Medium Priority) +**UPDATED:** Templates should support both deployment models +- Internal deployment templates (use GB APIs) +- External deployment templates (standalone with CI/CD) + +--- + +## Part III: Updated Rollout Plan + +### Milestone 0: Deployment Infrastructure (Week 0) +- **Day 1-3:** Phase 0.1 - Deployment Router +- **Day 4-5:** Phase 0.2 - Forgejo Integration +- **Day 6-7:** Phase 0.3 - Deployment UI + +**Success Criteria:** +- ✅ Can deploy app internally to /apps/{name} +- ✅ Can deploy app externally to Forgejo +- ✅ CI/CD pipeline auto-generated +- ✅ Deployment choice works in Vibe UI + +### Milestone 1-7: (Weeks 1-4) +*(Same as original TASK.md)* + +--- + +## Part IV: Technical Implementation Notes + +### File Organization (UPDATED) + +**Botserver (Backend):** +``` +botserver/src/ + deployment/ # NEW - Deployment infrastructure + mod.rs # DeploymentRouter + forgejo.rs # ForgejoClient + api.rs # Deployment API endpoints + templates.rs # CI/CD workflow templates + api/ + editor.rs + database.rs + git.rs # UPDATED - Add Forgejo git operations + browser/ + mod.rs + recorder.rs + validator.rs + api.rs + test_generator.rs + templates/ + crm/ + sales.json + real_estate.json + healthcare.json + mod.rs + sources/ # EXISTING - MCP integration + mod.rs + mcp.rs + ui.rs + knowledge_base.rs +``` + +**Botui (Frontend):** +``` +botui/ui/suite/ + partials/ + vibe.html # UPDATED - Add deploy button + vibe-deployment.html # NEW - Deployment modal + editor.html + database.html + git-status.html # UPDATED - Add Forgejo status + git-diff.html + browser-controls.html + terminal.html + template-gallery.html + js/ + deployment.js # NEW - Deployment logic + editor.js + database.js + git.js # UPDATED - Add Forgejo operations + browser.js + terminal.js + templates.js + css/ + deployment.css # NEW - Deployment styles + editor.css + database.css + git.css + browser.css + terminal.css + templates.css +``` + +### Dependencies (UPDATED) + +**Already in Workspace:** +```toml +[dependencies] +chromiumoxide = "0.7" # Browser automation +tokio = "1.41" # Async runtime +axum = "0.7" # HTTP framework +diesel = "2.1" # Database +git2 = "0.18" # Git operations +reqwest = { version = "0.11", features = ["json"] } # HTTP client +``` + +**Frontend:** +``` +monaco-editor@0.45.0 # Code editor +xterm.js@5.3.0 # Terminal (already vendor file) +``` + +--- + +## Part V: Success Metrics (UPDATED) + +### Deployment Infrastructure +- ✅ Internal deployment succeeds in < 30 seconds +- ✅ External Forgejo deployment succeeds in < 2 minutes +- ✅ CI/CD pipeline auto-generates correctly +- ✅ Both deployment models accessible from Vibe UI +- ✅ Can switch between internal/external deployment + +### Phases 1-7 +*(Same as original TASK.md)* + +--- + +## Conclusion + +The **critical gap** in the original TASK.md was the **deployment routing logic**. The platform must support: + +1. **Internal GB Apps** - Quick prototypes using GB APIs and shared resources +2. **External Forgejo Projects** - Production apps with independent infrastructure and CI/CD + +**Updated Priority:** +1. ⚠️ **Phase 0** - Deployment Infrastructure (CRITICAL - Week 0) + - Phase 0.1: Deployment Router + - Phase 0.2: Forgejo Integration + - Phase 0.3: Deployment UI + +2. 📝 **Phase 1** - Code Editor (Week 1) + +3. 🗄️ **Phase 2** - Database UI (Week 2) + +4. 🐙 **Phase 3** - Git Operations + Forgejo (Week 2) + +5. 🌐 **Phase 4** - Browser Automation (Week 3) + +6. 📂 **Phase 5** - Multi-File Workspace (Week 3) + +7. 🖥️ **Phase 6** - Terminal (Week 4) + +8. 📇 **Phase 7** - CRM Templates (Week 4) + +Once Phase 0 is complete, VibeCode will be able to **deploy apps both internally and externally**, giving users the flexibility to choose the right deployment model for their use case. + +**Total Estimated Effort:** 125-155 hours (~3-4 weeks with 1 developer) +**Including Phase 0:** +40-50 hours + +**Final Total:** 165-205 hours (~4-5 weeks with 1 developer) diff --git a/UNIFIED_PLAN.md b/UNIFIED_PLAN.md new file mode 100644 index 0000000..546d72f --- /dev/null +++ b/UNIFIED_PLAN.md @@ -0,0 +1,877 @@ +# 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 `ErrorSanitizer` to avoid panics +- [ ] 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 `Iterator` and `DoubleEndedIterator` impls for `glib::VariantStrIter` +- **Context:** Pulled through `botdevice` and `botapp` via 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-csrf` is absent from Cargo.toml) + +**Security Headers:** +- ✅ `headers.rs` provides 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:** +1. **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`) + +2. **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 + +3. **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 + +4. **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:** +1. [ ] Fix all unsafe `unwrap()` calls +2. [ ] Address dependency vulnerabilities +3. [ ] Verify CSRF & security headers coverage + +**Estimated Effort:** 9-14 hours + +**Success Criteria:** +- ✅ Zero `unwrap()` in production code +- ✅ `cargo audit` passes 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:** +1. [ ] Create MCP panel component +2. [ ] Add JavaScript for server management +3. [ ] Style panel to match Vibe aesthetic +4. [ ] 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:** + +1. **Download Monaco Editor** + ```bash + cd botui + npm install monaco-editor@0.45.0 + cp -r node_modules/monaco-editor min/vs ui/suite/js/vendor/ + ``` + +2. **Create Editor Component** + - `botui/ui/suite/partials/editor.html` + - Monaco container with tab bar + - File tree sidebar + - Save/Publish buttons + +3. **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 + +4. **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 + +5. **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:** + +1. **Schema Visualizer Component** + - `botui/ui/suite/partials/database.html` + - Canvas-based ER diagram + - Table cards with fields + - Relationship lines (foreign keys) + - Zoom/pan controls + +2. **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 + +3. **Query Builder UI** + - Visual SELECT builder + - Table selection dropdown + - Join interface + - Filter conditions + - SQL preview pane + +4. **Data Grid** + - Sortable columns + - Inline editing + - Pagination + - Export (CSV/JSON) + +5. **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:** + +1. **Git Status Panel** + - `botui/ui/suite/partials/git-status.html` + - File list with status icons + - Stage/unstage checkboxes + - "Commit" button + +2. **Diff Viewer** + - `botui/ui/suite/partials/git-diff.html` + - Side-by-side comparison + - Line highlighting (green/red) + - Syntax highlighting + +3. **Commit Interface** + - Message input + - "Commit & Push" button + - Progress indicator + +4. **Branch Manager** + - Branch dropdown + - "New Branch" dialog + - Switch/delete actions + +5. **Commit Timeline** + - Vertical timeline + - Author, date, message + - Click → view diff + +6. **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:** + +1. **Core Browser Module** + - `botserver/src/browser/mod.rs` + - `BrowserSession` - Manage browser instance + - `BrowserManager` - Session lifecycle + - Methods: `navigate()`, `click()`, `fill()`, `screenshot()`, `execute()` + +2. **Action Recorder** + - `botserver/src/browser/recorder.rs` + - `RecordedAction` - Navigate, Click, Fill, Wait, Assert + - `ActionRecorder` - Record/stop/export + - Export as Playwright test + +3. **Test Validator** + - `botserver/src/browser/validator.rs` + - Check for flaky selectors + - Validate wait conditions + - Suggest improvements via Designer AI + +4. **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 + +5. **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 + +6. **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:** + +1. **Tab Management** + - File tabs with close buttons + - Active tab highlighting + - Tab overflow scrolling + - Drag to reorder + +2. **Split-Pane Layout** + - Split horizontal/vertical buttons + - Resize handles + - 2x2 grid max + +3. **File Comparison** + - Side-by-side diff + - Line-by-line navigation + - Copy changes (L→R) + +4. **File Tree Sidebar** + - Nested folders + - File type icons + - Expand/collapse + - Double-click to open + +5. **Quick Open** + - Ctrl+P → Search files + - Fuzzy matching + - Arrow navigation + +6. **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:** + +1. **Terminal Container** + - xterm.js integration (already vendor file) + - Multiple terminal tabs + - Fit addon for auto-resize + +2. **WebSocket Terminal** + - Bi-directional WebSocket: `/ws/terminal/{session_id}` + - Protocol: `{"type": "input", "data": "command\n"}` + - Handle ANSI escape codes + +3. **Command History** + - Up/Down arrows + - Ctrl+R search + - Persist in localStorage + +4. **Command Completion** + - Tab completion + - File path completion + - Command flags + +5. **Backend Terminal Server** + - Spawn PTY per session + - WebSocket handler + - Clean up on disconnect + +6. **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:** + +1. **Template System** + - `botserver/src/templates/crm/` + - Template JSON definitions + - Prompt templates + - Field libraries + +2. **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 + +3. **Template Gallery UI** + - `botui/ui/suite/partials/template-gallery.html` + - Template cards with descriptions + - Preview screenshots + - "Use Template" button + +4. **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:** +1. ✅ **Error Handling** - NO panics, use `?` operator +2. ✅ **Safe Commands** - Use `SafeCommand` wrapper +3. ✅ **Error Sanitization** - Use `ErrorSanitizer` +4. ✅ **SQL Safety** - Use `sql_guard` +5. ✅ **Rate Limiting** - Per-IP and per-User limits +6. ✅ **CSRF Protection** - CSRF tokens on state-changing endpoints +7. ✅ **Security Headers** - CSP, HSTS, X-Frame-Options, etc. +8. ✅ **No CDNs** - All assets local +9. ✅ **File Size** - Max 450 lines per file +10. ✅ **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:** +```toml +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//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 audit` passes +- ✅ 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:** +1. ⚠️ **Security fixes** (Week 0) - Unblock development risk +2. 🔌 **MCP integration** (Week 0.5) - Quick win, leverage existing code +3. 📝 **Code editor** (Week 1) - Core developer tool +4. 🗄️ **Database UI** (Week 2) - Visual data management +5. 🐙 **Git operations** (Week 2) - Version control +6. 🌐 **Browser automation** (Week 3) - Testing & recording +7. 📂 **Multi-file workspace** (Week 3) - Professional editing +8. 🖥️ **Terminal** (Week 4) - Interactive shell +9. 📇 **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) diff --git a/VIBE.md b/VIBE.md new file mode 100644 index 0000000..cb6fb40 --- /dev/null +++ b/VIBE.md @@ -0,0 +1,1068 @@ +# VibeCode Platform - Complete Implementation Roadmap + +## Executive Summary + +**Current Status:** BotUI's backend is **80% complete** with powerful LLM-driven code generation. The platform needs professional frontend tools AND must support **two deployment models**: + +1. **Internal GB Apps** - Apps served from GB platform using shared APIs +2. **External Forgejo ALM Projects** - Apps deployed to Forgejo repositories with CI/CD + +**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 for browser automation +- ✅ **Forgejo ALM integration** (mTLS, runners, port 3000) +- ✅ **MCP servers integration** (`botserver/src/sources/`) +- ✅ **App deployment** (`/apps/{name}` routes, Drive storage) + +**What's Missing (Critical Gaps):** +- ❌ **Security fixes** - Unsafe unwraps, dependency vulnerabilities +- ❌ **Deployment routing** - Logic to choose internal vs external +- ❌ **Forgejo git push** - Repository initialization & CI/CD generation +- ❌ **MCP UI panel** - Integration into Vibe sidebar +- ❌ **Monaco editor** - Currently just textarea +- ❌ **Database UI** - No schema visualizer +- ❌ **Git operations UI** - No version control interface +- ❌ **Browser automation UI** - Engine exists, no frontend +- ❌ **Multi-file workspace** - Single file editing only +- ❌ **Enhanced terminal** - Basic implementation only + +--- + +## Table of Contents + +1. [Part I: Security & Stability (IMMEDIATE)](#part-i-security--stability) +2. [Part II: Dual Deployment Infrastructure](#part-ii-dual-deployment-infrastructure) +3. [Part III: MCP Integration](#part-iii-mcp-integration) +4. [Part IV: Professional Development Tools](#part-iv-professional-development-tools) +5. [Part V: Architecture Diagrams](#part-v-architecture-diagrams) +6. [Part VI: Implementation Phases](#part-vi-implementation-phases) +7. [Part VII: File Organization](#part-vii-file-organization) +8. [Part VIII: Testing Strategy](#part-viii-testing-strategy) +9. [Part IX: Rollout Plan](#part-ix-rollout-plan) +10. [Part X: Success Metrics](#part-x-success-metrics) + +--- + +## Part I: Security & Stability + +**Priority:** ⚠️ **CRITICAL** - Must complete before any feature work + +### 1. Unsafe Unwraps in Production + +**Issue:** Codebase uses `.unwrap()`, `.expect()`, `panic!()` in production, violating AGENTS.md rules. + +**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 `ErrorSanitizer` to avoid panics +- [ ] 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 + +**Vulnerable Component:** +- **Crate:** `glib 0.18.5` +- **Advisory:** `RUSTSEC-2024-0429` +- **Issue:** Unsoundness in `Iterator` and `DoubleEndedIterator` impls +- **Context:** Pulled through `botdevice`/`botapp` via Tauri/GTK + +**Action Items:** +- [ ] Review exact usage of glib in codebase +- [ ] Check if patches are available in newer versions +- [ ] Evaluate risk given desktop GUI context +- [ ] If critical: upgrade GTK/Glib dependencies +- [ ] If acceptable: document risk assessment + +**Estimated Effort:** 2-4 hours + +--- + +### 3. General Security Posture + +**CSRF Protection:** +- ✅ Custom CSRF store exists: `redis_csrf_store.rs` +- ⚠️ **Verify:** ALL state-changing endpoints use it (standard `tower-csrf` is absent) + +**Security Headers:** +- ✅ `headers.rs` provides CSP, HSTS, X-Frame-Options +- ⚠️ **Verify:** Headers are attached UNIVERSALLY, not selectively omitted + +**Action Items:** +- [ ] Audit all POST/PUT/DELETE endpoints for CSRF validation +- [ ] Create middleware test to ensure security headers on all responses +- [ ] Document security checklist for new endpoints + +**Estimated Effort:** 3-4 hours + +--- + +## Part II: Dual Deployment Infrastructure + +**Priority:** 🔴 **CRITICAL** - Core feature missing + +### Current State + +**Existing Infrastructure:** +```rust +// Forgejo ALM already configured: +botserver/src/security/mutual_tls.rs:150 + - configure_forgejo_mtls() - mTLS for Forgejo + +botserver/src/core/package_manager/installer.rs + - forgejo binary installer + - forgejo-runner integration + - ALM_URL environment variable + - Port 3000 for Forgejo web UI + +botserver/src/basic/keywords/create_site.rs + - CREATE SITE keyword + - Stores to Drive: apps/{alias} + - Serves from: /apps/{alias} +``` + +### Architecture: Dual Deployment Model + +``` +┌──────────────────────────────────────────────────────────────────┐ +│ 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 │ │ +│ └──────────────────┘ └──────────────────┘ │ +│ │ +│ ⚠️ DEPLOYMENT CHOICE: │ +│ ┌─────────────────────────────────────────────────────┐ │ +│ │ 📱 Deploy to GB Platform 🌐 Deploy to Forgejo │ │ +│ │ - Serve from /apps/ - Push to repo │ │ +│ │ - Use GB API - CI/CD pipeline │ │ +│ │ - Fast iteration - Custom domain │ │ +│ │ - Shared resources - Independent │ │ +│ └─────────────────────────────────────────────────────┘ │ +└────────────────────────────┬─────────────────────────────────────┘ + │ + ┌────────────┴────────────┐ + │ │ + ▼ ▼ +┌───────────────────────┐ ┌──────────────────────────────────┐ +│ INTERNAL GB APPS │ │ EXTERNAL FORGEJO PROJECTS │ +│ │ │ │ +│ Deployment Flow: │ │ Deployment Flow: │ +│ 1. Generate files │ │ 1. Generate files │ +│ 2. Store in Drive │ │ 2. Init git repo │ +│ 3. Serve from /apps/ │ │ 3. Push to Forgejo │ +│ 4. Use GB APIs │ │ 4. Create CI/CD (.forgejo/*) │ +│ 5. Shared DB │ │ 5. Runner builds & deploys │ +│ 6. Shared auth │ │ 6. Independent deployment │ +│ │ │ 7. Custom domain │ +│ ┌─────────────────┐ │ │ │ +│ │ App Router │ │ │ ┌──────────────────────────────┐ │ +│ │ /apps/{name} │ │ │ │ Forgejo ALM (port 3000) │ │ +│ │ - HTMX routes │ │ │ │ - Git server │ │ +│ │ - API proxy │ │ │ │ - CI/CD (.forgejo/workflows) │ │ +│ │ - Auth wrapper │ │ │ │ - Packages (npm, cargo) │ │ +│ └─────────────────┘ │ │ │ - Actions runner │ │ +│ │ │ └──────────────────────────────┘ │ +└───────────────────────┘ └──────────────────────────────────┘ +``` + +### Phase 0.1: Deployment Router + +**File:** `botserver/src/deployment/mod.rs` + +```rust +use serde::{Deserialize, Serialize}; +use std::path::PathBuf; + +#[derive(Debug, Clone, Serialize, Deserialize)] +pub enum DeploymentTarget { + /// Serve from GB platform (/apps/{name}) + Internal { + route: String, + shared_resources: bool, + }, + /// Deploy to external Forgejo repository + External { + repo_url: String, + custom_domain: Option, + ci_cd_enabled: bool, + }, +} + +#[derive(Debug, Clone, Serialize, Deserialize)] +pub struct DeploymentConfig { + pub app_name: String, + pub target: DeploymentTarget, + pub environment: DeploymentEnvironment, +} + +#[derive(Debug, Clone, Serialize, Deserialize)] +pub enum DeploymentEnvironment { + Development, + Staging, + Production, +} + +pub struct DeploymentRouter { + forgejo_url: String, + forgejo_token: Option, + internal_base_path: PathBuf, +} + +impl DeploymentRouter { + pub async fn deploy( + &self, + config: DeploymentConfig, + generated_app: GeneratedApp, + ) -> Result { + match config.target { + DeploymentTarget::Internal { route, .. } => { + self.deploy_internal(route, generated_app).await + } + DeploymentTarget::External { ref repo_url, .. } => { + self.deploy_external(repo_url, generated_app).await + } + } + } +} +``` + +**Estimated Effort:** 12-16 hours + +--- + +### Phase 0.2: Forgejo Integration + +**File:** `botserver/src/deployment/forgejo.rs` + +```rust +use git2::{Repository}; +use reqwest::Client; + +pub struct ForgejoClient { + base_url: String, + token: String, + client: Client, +} + +impl ForgejoClient { + /// Create a new repository in Forgejo + pub async fn create_repository( + &self, + name: &str, + description: &str, + private: bool, + ) -> Result { + // API call to create repo + todo!() + } + + /// Push generated app to Forgejo repository + pub async fn push_app( + &self, + repo_url: &str, + app: &GeneratedApp, + branch: &str, + ) -> Result { + // 1. Initialize local git repo + // 2. Add all files + // 3. Create commit + // 4. Add Forgejo remote + // 5. Push to Forgejo + todo!() + } + + /// Create CI/CD workflow for the app + pub async fn create_cicd_workflow( + &self, + repo_url: &str, + app_type: AppType, + build_config: BuildConfig, + ) -> Result<(), ForgejoError> { + // Create .forgejo/workflows/deploy.yml + todo!() + } +} +``` + +**Estimated Effort:** 20-24 hours + +--- + +### Phase 0.3: Deployment UI + +**File:** `botui/ui/suite/partials/vibe-deployment.html` + +```html + +
+
+

Choose Deployment Target

+ +
+ +
+
📱
+

GB Platform

+

Deploy directly to the GB platform with shared resources

+
    +
  • ✓ Fast deployment
    • +
  • ✓ Shared authentication
    • +
  • ✓ Shared database
    • +
  • ✓ API integration
    • +
+
+ + +
+
🌐
+

Forgejo ALM

+

Deploy to an external Forgejo repository with full CI/CD

+
    +
  • ✓ Independent deployment
    • +
  • ✓ Custom domain
    • +
  • ✓ Version control
    • +
  • ✓ CI/CD pipelines
    • +
+
+
+ +
+ +
+
+
+``` + +**Estimated Effort:** 8-10 hours + +--- + +## Part III: MCP Integration + +**Priority:** 🟡 **HIGH** - Leverage existing infrastructure + +### What Already Exists + +**Backend Implementation:** +``` +botserver/src/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 (40+ endpoints):** +``` +/suite/sources: + - Main sources list page + - MCP server catalog + - Add MCP server form + +/api/ui/sources/*: + - /api/ui/sources/mcp - List MCP servers + - /api/ui/sources/mcp/:name/enable - Enable server + - /api/ui/sources/mcp/:name/tools - List tools + - /api/ui/sources/kb/query - Query knowledge base + - /api/ui/sources/repositories - List repos + - /api/ui/sources/apps - List apps +``` + +### Integration Task: Add MCP Panel to Vibe + +**Goal:** Show connected MCP servers in Vibe sidebar + +**Files to Create:** +1. `botui/ui/suite/partials/vibe-mcp-panel.html` - MCP panel UI +2. `botui/ui/suite/js/vibe-mcp.js` - Server management JavaScript +3. `botui/ui/suite/vibe/mcp-panel.css` - Styling + +**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`) + +**Estimated Effort:** 6-8 hours + +--- + +## Part IV: Professional Development Tools + +### Phase 1: Code Editor Integration (P0 - Critical) + +**Goal:** Replace textarea with Monaco Editor + +**Tasks:** +1. Download Monaco Editor + ```bash + cd botui + npm install monaco-editor@0.45.0 + cp -r node_modules/monaco-editor min/vs ui/suite/js/vendor/ + ``` + +2. Create Editor Component + - `botui/ui/suite/partials/editor.html` + - Monaco container with tab bar + - File tree sidebar + - Save/Publish buttons + +3. 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 + +4. 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 + +**Estimated Effort:** 8-12 hours + +--- + +### Phase 2: Database UI & Schema Visualization (P0 - Critical) + +**Goal:** Visual database management and query builder + +**Tasks:** +1. Schema Visualizer Component + - `botui/ui/suite/partials/database.html` + - Canvas-based ER diagram + - Table cards with fields + - Relationship lines (foreign keys) + +2. Database JavaScript + - `botui/ui/suite/js/database.js` + - Fetch schema: `/api/database/schema` + - Render tables using Canvas API + +3. 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 + +**Estimated Effort:** 16-20 hours + +--- + +### Phase 3: Git Operations UI (P1 - High Priority) + +**Goal:** Version control interface in Vibe + +**Tasks:** +1. Git Status Panel + - `botui/ui/suite/partials/git-status.html` + - File list with status icons + - Stage/unstage checkboxes + +2. Diff Viewer + - `botui/ui/suite/partials/git-diff.html` + - Side-by-side comparison + +3. 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 + - GET `/api/git/branches` - List branches + +**Forgejo-Specific Features:** +- View Forgejo repository status +- Sync with Forgejo remote +- View CI/CD pipeline status +- Trigger manual builds + +**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 +- ✅ Reference implementation: `bottest/src/web/browser.rs` + +**Tasks:** +1. Core Browser Module + - `botserver/src/browser/mod.rs` + - `BrowserSession`, `BrowserManager` + - Methods: `navigate()`, `click()`, `fill()`, `screenshot()` + +2. Action Recorder + - `botserver/src/browser/recorder.rs` + - `RecordedAction` - Navigate, Click, Fill, Wait, Assert + - Export as Playwright test + +3. Browser API + - `botserver/src/browser/api.rs` + - POST `/api/browser/session` - Create session + - POST `/api/browser/session/:id/execute` - Run action + - POST `/api/browser/session/:id/record/start` - Start recording + +4. Vibe UI - Browser Panel + - `botui/ui/suite/partials/browser-controls.html` + - `botui/ui/suite/js/browser.js` + +**Estimated Effort:** 20-24 hours + +--- + +### Phase 5: Multi-File Editing Workspace (P2 - Medium Priority) + +**Goal:** Professional multi-file editing + +**Tasks:** +1. Tab Management + - File tabs with close buttons + - Active tab highlighting + - Drag to reorder + +2. Split-Pane Layout + - Split horizontal/vertical buttons + - Resize handles + - 2x2 grid max + +3. File Tree Sidebar + - Nested folders + - File type icons + - Double-click to open + +4. Quick Open + - Ctrl+P → Search files + - Fuzzy matching + +**Estimated Effort:** 12-16 hours + +--- + +### Phase 6: Enhanced Terminal (P2 - Medium Priority) + +**Goal:** Interactive shell in Vibe + +**Tasks:** +1. Terminal Container + - xterm.js integration (already vendor file) + - Multiple terminal tabs + +2. WebSocket Terminal + - Bi-directional WebSocket: `/ws/terminal/{session_id}` + - Handle ANSI escape codes + +3. Backend Terminal Server + - Spawn PTY per session + - WebSocket handler + +**Estimated Effort:** 10-14 hours + +--- + +### Phase 7: Advanced CRM Templates (P2 - Medium Priority) + +**Goal:** Pre-built CRM accelerators + +**Tasks:** +1. Template System + - `botserver/src/templates/crm/` + - Template JSON definitions + +2. CRM Templates + - **Sales CRM** - contacts, leads, opportunities + - **Real Estate CRM** - properties, clients, showings + - **Healthcare CRM** - patients, appointments, treatments + +3. Template Gallery UI + - `botui/ui/suite/partials/template-gallery.html` + +4. Template Generator + - Load template JSON + - Generate all files + - Deploy to target (internal/external) + +**Estimated Effort:** 20-24 hours + +--- + +## Part V: Architecture Diagrams + +### Overall System Architecture + +``` +┌─────────────────────────────────────────────────────────────┐ +│ USER REQUEST │ +│ "I want a full CRM system" │ +└────────────────────────┬────────────────────────────────────┘ + │ + ▼ +┌─────────────────────────────────────────────────────────────┐ +│ VIBE BUILDER UI │ +│ ┌────────────┐ ┌────────────┐ ┌────────────┐ │ +│ │ Orchestrator│ │AppGenerator│ │Designer AI │ │ +│ │ (5 agents) │ │(LLM-driven)│ │(modifications)│ │ +│ └────────────┘ └────────────┘ └────────────┘ │ +│ ┌────────────┐ ┌────────────┐ ┌────────────┐ │ +│ │ Browser │ │ Git │ │ Terminal │ │ +│ │ Automation │ │ Operations │ │ Service │ │ +│ │(chromiumoxide)│ │(git2) │ │(xterm.js) │ │ +│ └────────────┘ └────────────┘ └────────────┘ │ +│ ┌────────────────────────────────────────────┐ │ +│ │ MCP & Sources Integration ← ALREADY EXISTS │ │ +│ │ - botserver/src/sources/mcp.rs │ │ +│ │ - /api/ui/sources/* endpoints │ │ +│ └────────────────────────────────────────────┘ │ +└────────────────────────┬────────────────────────────────────┘ + │ + ▼ +┌─────────────────────────────────────────────────────────────┐ +│ DEPLOYMENT CHOICE │ +│ ┌──────────────────┐ ┌──────────────────┐ │ +│ │ INTERNAL GB APPS │ │ FORGEJO ALM │ │ +│ │ - /apps/{name} │ │ - Git repo │ │ +│ │ - GB APIs │ │ - CI/CD │ │ +│ │ - Shared DB │ │ - Custom domain │ │ +│ └──────────────────┘ └──────────────────┘ │ +└────────────────────────┬────────────────────────────────────┘ + │ + ▼ +┌─────────────────────────────────────────────────────────────┐ +│ GENERATED OUTPUT │ +│ - PostgreSQL tables │ +│ - HTML pages with HTMX │ +│ - CSS styling │ +│ - JavaScript │ +│ - BASIC tools/schedulers │ +│ - E2E tests (Playwright) │ +└─────────────────────────────────────────────────────────────┘ +``` + +### Vibe UI Layout + +``` +┌──────────────────────────────────────────────────────────────┐ +│ VIBE BUILDER │ +├──────────────┬───────────────────────────────────────────────┤ +│ │ PIPELINE TABS │ +│ AGENTS │ [PLAN] [BUILD] [REVIEW] [DEPLOY] [MONITOR] │ +│ SIDEBAR ├───────────────────────────────────────────────┤ +│ │ │ +│ ┌──────────┐ │ CANVAS AREA │ +│ │Mantis #1│ │ - Task nodes (horizontal flow) │ +│ │ EVOLVED │ │ - Preview panel │ +│ └──────────┘ │ - Chat overlay │ +│ ┌──────────┐ │ │ +│ │Mantis #2│ │ [DEPLOYMENT BUTTON] │ +│ │ BRED │ │ │ +│ └──────────┘ │ │ +│ ┌──────────┐ │ │ +│ │Mantis #3│ │ │ +│ │ WILD │ │ │ +│ └──────────┘ │ │ +│ │ │ +│ [+ NEW AGENT] │ │ +├──────────────┤ │ +│ WORKSPACES │ │ +│ ┌──────────┐ │ │ +│ │E-Commerce│ │ │ +│ │ App │ │ │ +│ └──────────┘ │ │ +│ │ │ +│ [+ PROJECT] │ │ +├──────────────┤ │ +│ SOURCES │ [NEW - MCP Integration] │ +│ ┌──────────┐ │ │ +│ │🔌 GitHub │ │ │ +│ │ MCP │ │ │ +│ └──────────┘ │ │ +│ ┌──────────┐ │ │ +│ │🗄️ Postgres│ │ │ +│ │ MCP │ │ │ +│ └──────────┘ │ │ +│ │ │ +│ [+ ADD MCP] │ │ +└──────────────┴───────────────────────────────────────────────┘ +``` + +--- + +## Part VI: Implementation Phases + +### Milestone 0: Security & Deployment Infrastructure (Week 0) + +**Day 1-2:** Security Fixes +- Fix all unsafe `unwrap()` calls +- Address dependency vulnerabilities +- Verify CSRF & security headers + +**Day 3-4:** Deployment Router +- `botserver/src/deployment/mod.rs` +- DeploymentTarget enum +- DeploymentRouter implementation + +**Day 5-6:** Forgejo Integration +- `botserver/src/deployment/forgejo.rs` +- ForgejoClient implementation +- CI/CD workflow generation + +**Day 7:** Deployment UI +- `botui/ui/suite/partials/vibe-deployment.html` +- Deployment modal +- Integration into Vibe + +**Success Criteria:** +- ✅ Zero `unwrap()` in production code +- ✅ `cargo audit` passes +- ✅ Can deploy internally to /apps/{name} +- ✅ Can deploy externally to Forgejo +- ✅ CI/CD pipeline auto-generates + +--- + +### Milestone 1: Core Editor (Week 1) + +- Phase 1 complete (Monaco integration) + +**Success Criteria:** +- Monaco loads < 2 seconds +- 5+ syntax highlighters work +- Multi-file tabs functional + +--- + +### Milestone 2: Database & Git (Week 2) + +- Phase 2 complete (Database UI) +- Phase 3 complete (Git Operations + Forgejo) + +**Success Criteria:** +- Schema visualizer displays all tables +- Query builder generates valid SQL +- Git status shows changed files +- Forgejo sync works + +--- + +### Milestone 3: Browser & Workspace (Week 3) + +- Phase 4 complete (Browser Automation) +- Phase 5 complete (Multi-File Editing) + +**Success Criteria:** +- Can navigate to any URL +- Recording generates valid tests +- 10+ files open in tabs +- Split view supports 2-4 panes + +--- + +### Milestone 4: Terminal & Templates (Week 4) + +- Phase 6 complete (Enhanced Terminal) +- Phase 7 complete (CRM Templates) + +**Success Criteria:** +- Interactive shell works +- Multiple terminals run simultaneously +- 3+ CRM templates available +- Generation takes < 30 seconds + +--- + +## Part VII: File Organization + +### Botserver (Backend) + +``` +botserver/src/ + deployment/ # NEW - Deployment infrastructure + mod.rs # DeploymentRouter + forgejo.rs # ForgejoClient + api.rs # Deployment API endpoints + templates.rs # CI/CD workflow templates + api/ + editor.rs # NEW - Code editor API + database.rs # NEW - Database UI API + git.rs # NEW - Git operations API + browser/ + mod.rs # NEW - BrowserSession, BrowserManager + recorder.rs # NEW - ActionRecorder + validator.rs # NEW - TestValidator + api.rs # NEW - HTTP endpoints + test_generator.rs # NEW - Test script generator + templates/ # NEW - CRM templates + crm/ + sales.json + real_estate.json + healthcare.json + mod.rs + sources/ # EXISTING - MCP integration + mod.rs + mcp.rs + ui.rs + knowledge_base.rs +``` + +### Botui (Frontend) + +``` +botui/ui/suite/ + partials/ + vibe.html # EXISTING - Main Vibe UI + vibe-deployment.html # NEW - Deployment modal + vibe-mcp-panel.html # NEW - MCP panel + editor.html # NEW - Code editor + database.html # NEW - Database UI + git-status.html # NEW - Git status + git-diff.html # NEW - Diff viewer + browser-controls.html # NEW - Browser automation + terminal.html # NEW - Terminal + template-gallery.html # NEW - Template gallery + js/ + deployment.js # NEW - Deployment logic + editor.js # NEW - Monaco integration + database.js # NEW - Database UI + git.js # NEW - Git operations + browser.js # NEW - Browser automation + terminal.js # NEW - Terminal + templates.js # NEW - Templates + css/ + deployment.css # NEW - Deployment styles + editor.css # NEW - Editor styles + database.css # NEW - Database styles + git.css # NEW - Git styles + browser.css # NEW - Browser styles + terminal.css # NEW - Terminal styles + templates.css # NEW - Template styles + vibe/ + agents-sidebar.css # EXISTING + mcp-panel.css # NEW - MCP panel styles +``` + +--- + +## Part VIII: Testing Strategy + +### Unit Tests +- All new modules need unit tests +- Test coverage > 80% +- Location: `botserver/src//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 + - Deploy internally to /apps/{name} + - Deploy externally to Forgejo + - Edit in Monaco editor + - View database schema + - Create git commit + - Record browser test + +--- + +## Part IX: Rollout Plan + +### Week 0: Security & Deployment (CRITICAL) +- **Day 1-2:** Security fixes +- **Day 3-4:** Deployment Router +- **Day 5-6:** Forgejo Integration +- **Day 7:** Deployment UI + +### Week 1: Code Editor +- Monaco integration +- File tree +- Tab management + +### Week 2: Database & Git +- Schema visualizer +- Query builder +- Git operations +- Forgejo sync + +### Week 3: Browser & Workspace +- Browser automation UI +- Multi-file editing +- Split-pane layout + +### Week 4: Terminal & Templates +- Enhanced terminal +- CRM templates +- Template gallery + +--- + +## Part X: Success Metrics + +### Security Milestones +- ✅ Zero `unwrap()` in production code +- ✅ `cargo audit` passes +- ✅ All endpoints have CSRF + security headers + +### Deployment Infrastructure +- ✅ Internal deployment < 30 seconds +- ✅ External Forgejo deployment < 2 minutes +- ✅ CI/CD pipeline auto-generates +- ✅ Both models accessible from Vibe UI + +### MCP Integration +- ✅ MCP panel visible in Vibe sidebar +- ✅ Can enable/disable servers +- ✅ Can view available tools +- ✅ Can add new servers + +### Code Editor +- Monaco loads < 2 seconds +- 5+ syntax highlighters work +- Multi-file tabs functional +- Auto-save succeeds + +### Database UI +- Schema visualizer displays all tables +- Query builder generates valid SQL +- Data grid supports inline edits +- Export works correctly + +### Git Operations +- Git status shows changed files +- Diff viewer shows side-by-side +- Commit workflow works end-to-end +- Forgejo sync succeeds + +### Browser Automation +- Can navigate to any URL +- Element picker captures selectors +- Recording generates valid tests +- Screenshots capture correctly + +### 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) + +### Terminal +- Interactive shell works +- Can run vim, top, etc. +- Multiple terminals run simultaneously +- File transfer works + +### CRM Templates +- 3+ CRM templates available +- Generation takes < 30 seconds +- Generated CRMs are fully functional +- Industry-specific features work + +--- + +## Conclusion + +The VibeCode platform has a **powerful backend** capable of generating full applications via LLM. The main gaps are in **frontend user experience**, **security hardening**, and **deployment routing**. + +**Critical Path:** +1. ⚠️ **Week 0:** Security fixes + Deployment infrastructure +2. 🔌 **Week 0.5:** MCP integration in Vibe +3. 📝 **Week 1:** Monaco code editor +4. 🗄️ **Week 2:** Database UI + Git operations +5. 🌐 **Week 3:** Browser automation + Multi-file workspace +6. 🖥️ **Week 4:** Terminal + CRM templates + +Once these phases are complete, VibeCode will match or exceed Claude Code's capabilities while offering: + +✅ **Dual deployment model** (Internal GB Apps + External Forgejo Projects) +✅ **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:** 165-205 hours (~4-5 weeks with 1 developer) + +--- + +## Appendix: Code Quality Standards + +**MUST Follow (per AGENTS.md):** +1. ✅ **Error Handling** - NO panics, use `?` operator +2. ✅ **Safe Commands** - Use `SafeCommand` wrapper +3. ✅ **Error Sanitization** - Use `ErrorSanitizer` +4. ✅ **SQL Safety** - Use `sql_guard` +5. ✅ **Rate Limiting** - Per-IP and per-User limits +6. ✅ **CSRF Protection** - CSRF tokens on state-changing endpoints +7. ✅ **Security Headers** - CSP, HSTS, X-Frame-Options +8. ✅ **No CDNs** - All assets local +9. ✅ **File Size** - Max 450 lines per file +10. ✅ **Clippy Clean** - 0 warnings, no `#[allow()]` + +--- + +## Appendix: Dependencies + +### Backend (Already in Workspace) + +```toml +[dependencies] +chromiumoxide = "0.7" # Browser automation +tokio = "1.41" # Async runtime +axum = "0.7" # HTTP framework +diesel = "2.1" # Database +git2 = "0.18" # Git operations +reqwest = { version = "0.11", features = ["json"] } # HTTP client +``` + +### Frontend (Download & Serve Locally) + +```bash +# Code editor +npm install monaco-editor@0.45.0 + +# Terminal (already vendor file exists) +# xterm.js@5.3.0 +``` + +--- + +**Document Version:** 2.0 +**Last Updated:** 2025-02-28 +**Status:** Ready for Implementation diff --git a/package-lock.json b/package-lock.json index 2740c40..3f0e90f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,8 @@ "version": "1.0.0", "license": "MIT", "dependencies": { + "jsonwebtoken": "^9.0.3", + "node-fetch": "^3.3.2", "ws": "^8.19.0" }, "devDependencies": { @@ -42,6 +44,65 @@ "undici-types": "~7.16.0" } }, + "node_modules/buffer-equal-constant-time": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz", + "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==", + "license": "BSD-3-Clause" + }, + "node_modules/data-uri-to-buffer": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz", + "integrity": "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==", + "license": "MIT", + "engines": { + "node": ">= 12" + } + }, + "node_modules/ecdsa-sig-formatter": { + "version": "1.0.11", + "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz", + "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==", + "license": "Apache-2.0", + "dependencies": { + "safe-buffer": "^5.0.1" + } + }, + "node_modules/fetch-blob": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz", + "integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/jimmywarting" + }, + { + "type": "paypal", + "url": "https://paypal.me/jimmywarting" + } + ], + "license": "MIT", + "dependencies": { + "node-domexception": "^1.0.0", + "web-streams-polyfill": "^3.0.3" + }, + "engines": { + "node": "^12.20 || >= 14.13" + } + }, + "node_modules/formdata-polyfill": { + "version": "4.0.10", + "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz", + "integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==", + "license": "MIT", + "dependencies": { + "fetch-blob": "^3.1.2" + }, + "engines": { + "node": ">=12.20.0" + } + }, "node_modules/fsevents": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", @@ -57,6 +118,135 @@ "node": "^8.16.0 || ^10.6.0 || >=11.0.0" } }, + "node_modules/jsonwebtoken": { + "version": "9.0.3", + "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.3.tgz", + "integrity": "sha512-MT/xP0CrubFRNLNKvxJ2BYfy53Zkm++5bX9dtuPbqAeQpTVe0MQTFhao8+Cp//EmJp244xt6Drw/GVEGCUj40g==", + "license": "MIT", + "dependencies": { + "jws": "^4.0.1", + "lodash.includes": "^4.3.0", + "lodash.isboolean": "^3.0.3", + "lodash.isinteger": "^4.0.4", + "lodash.isnumber": "^3.0.3", + "lodash.isplainobject": "^4.0.6", + "lodash.isstring": "^4.0.1", + "lodash.once": "^4.0.0", + "ms": "^2.1.1", + "semver": "^7.5.4" + }, + "engines": { + "node": ">=12", + "npm": ">=6" + } + }, + "node_modules/jwa": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/jwa/-/jwa-2.0.1.tgz", + "integrity": "sha512-hRF04fqJIP8Abbkq5NKGN0Bbr3JxlQ+qhZufXVr0DvujKy93ZCbXZMHDL4EOtodSbCWxOqR8MS1tXA5hwqCXDg==", + "license": "MIT", + "dependencies": { + "buffer-equal-constant-time": "^1.0.1", + "ecdsa-sig-formatter": "1.0.11", + "safe-buffer": "^5.0.1" + } + }, + "node_modules/jws": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/jws/-/jws-4.0.1.tgz", + "integrity": "sha512-EKI/M/yqPncGUUh44xz0PxSidXFr/+r0pA70+gIYhjv+et7yxM+s29Y+VGDkovRofQem0fs7Uvf4+YmAdyRduA==", + "license": "MIT", + "dependencies": { + "jwa": "^2.0.1", + "safe-buffer": "^5.0.1" + } + }, + "node_modules/lodash.includes": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz", + "integrity": "sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==", + "license": "MIT" + }, + "node_modules/lodash.isboolean": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz", + "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==", + "license": "MIT" + }, + "node_modules/lodash.isinteger": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz", + "integrity": "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==", + "license": "MIT" + }, + "node_modules/lodash.isnumber": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz", + "integrity": "sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==", + "license": "MIT" + }, + "node_modules/lodash.isplainobject": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz", + "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==", + "license": "MIT" + }, + "node_modules/lodash.isstring": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz", + "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==", + "license": "MIT" + }, + "node_modules/lodash.once": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz", + "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==", + "license": "MIT" + }, + "node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", + "license": "MIT" + }, + "node_modules/node-domexception": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz", + "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==", + "deprecated": "Use your platform's native DOMException instead", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/jimmywarting" + }, + { + "type": "github", + "url": "https://paypal.me/jimmywarting" + } + ], + "license": "MIT", + "engines": { + "node": ">=10.5.0" + } + }, + "node_modules/node-fetch": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.2.tgz", + "integrity": "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==", + "license": "MIT", + "dependencies": { + "data-uri-to-buffer": "^4.0.0", + "fetch-blob": "^3.1.4", + "formdata-polyfill": "^4.0.10" + }, + "engines": { + "node": "^12.20.0 || ^14.13.1 || >=16.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/node-fetch" + } + }, "node_modules/playwright": { "version": "1.58.2", "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.58.2.tgz", @@ -89,6 +279,38 @@ "node": ">=18" } }, + "node_modules/safe-buffer": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", + "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "license": "MIT" + }, + "node_modules/semver": { + "version": "7.7.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz", + "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==", + "license": "ISC", + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/undici-types": { "version": "7.16.0", "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz", @@ -96,6 +318,15 @@ "dev": true, "license": "MIT" }, + "node_modules/web-streams-polyfill": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz", + "integrity": "sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==", + "license": "MIT", + "engines": { + "node": ">= 8" + } + }, "node_modules/ws": { "version": "8.19.0", "resolved": "https://registry.npmjs.org/ws/-/ws-8.19.0.tgz", diff --git a/package.json b/package.json index 4fbb238..a2d207a 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,8 @@ }, "scripts": {}, "dependencies": { + "jsonwebtoken": "^9.0.3", + "node-fetch": "^3.3.2", "ws": "^8.19.0" } } diff --git a/reset.sh b/reset.sh index 5a8d08f..35c3c9e 100755 --- a/reset.sh +++ b/reset.sh @@ -1 +1,109 @@ -rm -rf botserver-stack/ ./work/ .env +#!/bin/bash +set -e + +####################################### +# General Bots Development Environment Reset Script +# Description: Cleans and restarts the development environment +# Usage: ./reset.sh +####################################### + +# Color codes for output +readonly GREEN='\033[0;32m' +readonly YELLOW='\033[1;33m' +readonly BLUE='\033[0;34m' +readonly NC='\033[0m' # No Color + +# Log function +log_info() { + echo -e "${BLUE}[INFO]${NC} $1" +} + +log_success() { + echo -e "${GREEN}[SUCCESS]${NC} $1" +} + +log_warning() { + echo -e "${YELLOW}[WARNING]${NC} $1" +} + +# Trap errors and cleanup +cleanup_on_error() { + log_warning "Script encountered an error" + exit 1 +} + +trap cleanup_on_error ERR + +log_info "Starting environment reset..." +echo "" + +# Step 1: Clean up existing installations +log_info "Step 1/4: Cleaning up existing installation..." +rm -rf botserver-stack/ ./work/ .env +log_success "Cleanup complete" +echo "" + +# Step 2: Build and restart services +log_info "Step 2/4: Building and restarting services..." +./restart.sh +log_success "Services restarted" +echo "" + +# Step 3: Wait for bootstrap +log_info "Step 3/4: Waiting for BotServer to bootstrap (this may take a minute)..." + +# Tail the log starting from now, so we only see the new run +tail -n 0 -f botserver.log | while read line; do + # Show bootstrap-related messages + if [[ "$line" == *"GENERAL BOTS - INITIAL SETUP"* ]]; then + SHOW=1 + log_info "Bootstrap process started..." + fi + + if [[ "$SHOW" == "1" ]]; then + echo "$line" + elif [[ "$line" == *"Checking if bootstrap is needed"* ]] || \ + [[ "$line" == *"No admin user found"* ]] || \ + [[ "$line" == *"Created admin user"* ]] || \ + [[ "$line" == *"Created default organization"* ]] || \ + [[ "$line" == *"Starting"* ]] || \ + [[ "$line" == *"Installing"* ]]; then + echo "$line" + fi + + # Stop tracking when bootstrap completes + if [[ "$line" == *"Bootstrap complete: admin user"* ]] || \ + [[ "$line" == *"Skipping bootstrap"* ]]; then + pkill -P $$ tail || true + break + fi +done + +log_success "Bootstrap complete" +echo "" + +# Step 4: Final confirmation +log_info "Step 4/4: Verifying services..." +sleep 2 + +if pgrep -f "botserver" > /dev/null; then + log_success "BotServer is running" +else + log_warning "BotServer may not be running properly" +fi + +if pgrep -f "botui" > /dev/null; then + log_success "BotUI is running" +else + log_warning "BotUI may not be running properly" +fi + +echo "" +echo "==========================================" +log_success "✅ Reset complete!" +echo "==========================================" +echo "" +echo "You can now access:" +echo " - BotUI Desktop: Check the BotUI window or logs" +echo " - Logs: tail -f botserver.log botui.log" +echo "" diff --git a/restart.sh b/restart.sh index a1d4b96..d39060b 100755 --- a/restart.sh +++ b/restart.sh @@ -14,11 +14,11 @@ cargo build -p botserver cargo build -p botui echo "Starting botserver..." -./target/debug/botserver --noconsole > botserver.log 2>&1 & +RUST_LOG=trace ./target/debug/botserver --noconsole > botserver.log 2>&1 & echo " PID: $!" echo "Starting botui..." -BOTSERVER_URL="http://localhost:9000" ./target/debug/botui > botui.log 2>&1 & +BOTSERVER_URL="http://localhost:8080" ./target/debug/botui > botui.log 2>&1 & echo " PID: $!" echo "Done. Logs: tail -f botserver.log botui.log" diff --git a/sec.md b/sec.md new file mode 100644 index 0000000..7f69b46 --- /dev/null +++ b/sec.md @@ -0,0 +1,740 @@ +# 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:** + +1. **Download Monaco Editor** + ```bash + cd botui + npm install monaco-editor@0.45.0 + cp -r node_modules/monaco-editor min/vs ui/suite/js/vendor/ + ``` + +2. **Create Editor Component** + - `botui/ui/suite/partials/editor.html` + - Monaco container with tab bar + - File tree sidebar + - Save/Publish buttons + +3. **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 + +4. **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 + +5. **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:** + +1. **Schema Visualizer Component** + - `botui/ui/suite/partials/database.html` + - Canvas-based ER diagram + - Table cards with fields + - Relationship lines (foreign keys) + - Zoom/pan controls + +2. **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 + +3. **Query Builder UI** + - Visual SELECT builder + - Table selection dropdown + - Join interface + - Filter conditions + - SQL preview pane + +4. **Data Grid** + - Sortable columns + - Inline editing + - Pagination + - Export (CSV/JSON) + +5. **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:** + +1. **Git Status Panel** + - `botui/ui/suite/partials/git-status.html` + - File list with status icons + - Stage/unstage checkboxes + - "Commit" button + +2. **Diff Viewer** + - `botui/ui/suite/partials/git-diff.html` + - Side-by-side comparison + - Line highlighting (green/red) + - Syntax highlighting + +3. **Commit Interface** + - Message input + - "Commit & Push" button + - Progress indicator + +4. **Branch Manager** + - Branch dropdown + - "New Branch" dialog + - Switch/delete actions + +5. **Commit Timeline** + - Vertical timeline + - Author, date, message + - Click → view diff + +6. **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:** + +1. **Core Browser Module** + - `botserver/src/browser/mod.rs` + - `BrowserSession` - Manage browser instance + - `BrowserManager` - Session lifecycle + - Methods: `navigate()`, `click()`, `fill()`, `screenshot()`, `execute()` + + ```rust + pub struct BrowserSession { + id: String, + browser: Arc, + page: Arc>, + created_at: DateTime, + } + + impl BrowserSession { + pub async fn new(headless: bool) -> Result; + 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>; + pub async fn execute(&self, script: &str) -> Result; + } + ``` + +2. **Action Recorder** + - `botserver/src/browser/recorder.rs` + - `RecordedAction` - Navigate, Click, Fill, Wait, Assert + - `ActionRecorder` - Record/stop/export + - Export as Playwright test + + ```rust + #[derive(Serialize, Deserialize)] + pub struct RecordedAction { + pub timestamp: i64, + pub action_type: ActionType, + pub selector: Option, + pub value: Option, + } + + impl ActionRecorder { + pub fn start(&mut self); + pub fn stop(&mut self) -> Vec; + pub fn export_test_script(&self) -> String; + } + ``` + +3. **Test Validator** + - `botserver/src/browser/validator.rs` + - Check for flaky selectors + - Validate wait conditions + - Suggest improvements via Designer AI + +4. **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 + +5. **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` + ```javascript + 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 + +6. **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:** +```javascript +// 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:** +```javascript +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:** + +1. **Tab Management** + - File tabs with close buttons + - Active tab highlighting + - Tab overflow scrolling + - Drag to reorder + +2. **Split-Pane Layout** + - Split horizontal/vertical buttons + - Resize handles + - 2x2 grid max + +3. **File Comparison** + - Side-by-side diff + - Line-by-line navigation + - Copy changes (L→R) + +4. **File Tree Sidebar** + - Nested folders + - File type icons + - Expand/collapse + - Double-click to open + +5. **Quick Open** + - Ctrl+P → Search files + - Fuzzy matching + - Arrow navigation + +6. **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:** + +1. **Terminal Container** + - xterm.js integration (already vendor file) + - Multiple terminal tabs + - Fit addon for auto-resize + +2. **WebSocket Terminal** + - Bi-directional WebSocket: `/ws/terminal/{session_id}` + - Protocol: `{"type": "input", "data": "command\n"}` + - Handle ANSI escape codes + +3. **Command History** + - Up/Down arrows + - Ctrl+R search + - Persist in localStorage + +4. **Command Completion** + - Tab completion + - File path completion + - Command flags + +5. **Backend Terminal Server** + - Spawn PTY per session + - WebSocket handler + - Clean up on disconnect + +6. **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:** + +1. **Template System** + - `botserver/src/templates/crm/` + - Template JSON definitions + - Prompt templates + - Field libraries + +2. **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 + +3. **Template Gallery UI** + - `botui/ui/suite/partials/template-gallery.html` + - Template cards with descriptions + - Preview screenshots + - "Use Template" button + +4. **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:** +1. ✅ **Error Handling** - NO panics, use `?` operator +2. ✅ **Safe Commands** - Use `SafeCommand` wrapper +3. ✅ **Error Sanitization** - Use `ErrorSanitizer` +4. ✅ **SQL Safety** - Use `sql_guard` +5. ✅ **Rate Limiting** - Per-IP and per-User limits +6. ✅ **CSRF Protection** - CSRF tokens on state-changing endpoints +7. ✅ **Security Headers** - CSP, HSTS, X-Frame-Options, etc. +8. ✅ **No CDNs** - All assets local +9. ✅ **File Size** - Max 450 lines per file +10. ✅ **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:** +```toml +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//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) diff --git a/vibe.md b/vibe.md new file mode 100644 index 0000000..b54daea --- /dev/null +++ b/vibe.md @@ -0,0 +1,1799 @@ +# VibeCode Complete Implementation Roadmap v3.0 +## Dual Deployment: Internal GB Apps + External Forgejo ALM Projects + +## Executive Summary + +**Current Status:** BotUI's backend is **80% complete** with powerful LLM-driven code generation. The platform must support **two deployment models** and needs professional frontend tools to match Claude Code's capabilities. + +**Dual Deployment Strategy:** +1. **Internal GB Apps** - Apps served directly from the GB platform using API endpoints +2. **External Forgejo ALM Projects** - Apps deployed to external Forgejo repositories with CI/CD + +**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 +- ✅ **Forgejo ALM integration** (mTLS, runners, web server on port 3000) +- ✅ **App deployment** (`/apps/{name}` routes, Drive storage) + +**What's Missing (Critical Gaps):** + +**Deployment Infrastructure (Phase 0 - CRITICAL):** +- ❌ Deployment routing logic (internal vs external) +- ❌ Forgejo project initialization & git push +- ❌ CI/CD pipeline generation for Forgejo projects +- ❌ Deployment UI in Vibe Builder + +**Frontend Tools (Phases 1-7):** +- ❌ Monaco/CodeMirror editor (just textarea now) +- ❌ Database UI (no schema visualizer) +- ❌ Git operations UI +- ❌ Browser automation engine UI +- ❌ Multi-file editing workspace +- ❌ Enhanced terminal + +--- + +## Architecture: Dual Deployment Model + +``` +┌──────────────────────────────────────────────────────────────────┐ +│ 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 │ │ +│ └──────────────────┘ └──────────────────┘ │ +│ │ +│ ⚠️ DEPLOYMENT CHOICE (Phase 0): │ +│ ┌─────────────────────────────────────────────────────┐ │ +│ │ 📱 Deploy to GB Platform 🌐 Deploy to Forgejo │ │ +│ │ - Serve from /apps/{name} - Push to repo │ │ +│ │ - Use GB API - CI/CD pipeline │ │ +│ │ - Fast iteration - Custom domain │ │ +│ │ - Shared resources - Independent │ │ +│ └─────────────────────────────────────────────────────┘ │ +│ │ +│ 📝 Code Editor (Monaco) ← Phase 1 │ +│ 🗄️ Database Schema Visualizer ← Phase 2 │ +│ 🐙 Git Operations UI ← Phase 3 │ +│ 🌐 Browser Automation Panel ← Phase 4 │ +│ 📂 Multi-File Workspace ← Phase 5 │ +│ 🖥️ Enhanced Terminal ← Phase 6 │ +└────────────────────────────┬─────────────────────────────────────┘ + │ + ┌────────────┴────────────┐ + │ │ + ▼ ▼ +┌───────────────────────┐ ┌──────────────────────────────────┐ +│ INTERNAL GB APPS │ │ EXTERNAL FORGEJO PROJECTS │ +│ │ │ │ +│ Deployment Flow: │ │ Deployment Flow: │ +│ 1. Generate files │ │ 1. Generate files │ +│ 2. Store in Drive │ │ 2. Init git repo │ +│ 3. Serve from /apps/ │ │ 3. Push to Forgejo │ +│ 4. Use GB APIs │ │ 4. Create CI/CD (.forgejo/*) │ +│ 5. Shared DB │ │ 5. Runner builds & deploys │ +│ 6. Shared auth │ │ 6. Independent deployment │ +│ │ │ 7. Custom domain │ +│ ┌─────────────────┐ │ │ │ +│ │ App Router │ │ │ ┌──────────────────────────────┐ │ +│ │ /apps/{name} │ │ │ │ Forgejo ALM (port 3000) │ │ +│ │ - HTMX routes │ │ │ │ - Git server │ │ +│ │ - API proxy │ │ │ │ - CI/CD (.forgejo/workflows) │ │ +│ │ - Auth wrapper │ │ │ │ - Packages (npm, cargo) │ │ +│ └─────────────────┘ │ │ │ - Actions runner │ │ +│ │ │ └──────────────────────────────┘ │ +└───────────────────────┘ └──────────────────────────────────┘ + │ + ▼ +┌─────────────────────────────────────────────────────────────┐ +│ 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) │ +└─────────────────────────────────────────────────────────────┘ +``` + +--- + +# PART I: Deployment Infrastructure (Phase 0 - CRITICAL) + +## Current State Analysis + +**Existing Infrastructure:** +```rust +// Forgejo ALM is already configured: +botserver/src/security/mutual_tls.rs:150 + - configure_forgejo_mtls() - mTLS setup for Forgejo + +botserver/src/core/package_manager/installer.rs + - forgejo binary installer + - forgejo-runner integration + - ALM_URL environment variable + - Port 3000 for Forgejo web UI + +botserver/src/basic/keywords/create_site.rs + - CREATE SITE keyword for app generation + - Stores to Drive: apps/{alias} + - Serves from: /apps/{alias} + +botserver/src/basic/keywords/app_server.rs + - Suite JS file serving + - Vendor file routing +``` + +**Missing Components:** +1. ❌ Deployment routing logic (internal vs external choice) +2. ❌ Forgejo repository initialization API +3. ❌ Git push to Forgejo repositories +4. ❌ CI/CD pipeline template generation +5. ❌ Forgejo Actions workflow builder +6. ❌ Custom domain configuration for external projects + +--- + +## Phase 0.1: Deployment Router (P0 - CRITICAL) + +**Goal:** Create routing logic to deploy apps internally or to Forgejo + +**File:** `botserver/src/deployment/mod.rs` + +```rust +use serde::{Deserialize, Serialize}; +use std::path::PathBuf; + +#[derive(Debug, Clone, Serialize, Deserialize)] +pub enum DeploymentTarget { + /// Serve from GB platform (/apps/{name}) + Internal { + route: String, + shared_resources: bool, + }, + /// Deploy to external Forgejo repository + External { + repo_url: String, + custom_domain: Option, + ci_cd_enabled: bool, + }, +} + +#[derive(Debug, Clone, Serialize, Deserialize)] +pub struct DeploymentConfig { + pub app_name: String, + pub target: DeploymentTarget, + pub environment: DeploymentEnvironment, +} + +#[derive(Debug, Clone, Serialize, Deserialize)] +pub enum DeploymentEnvironment { + Development, + Staging, + Production, +} + +pub struct DeploymentRouter { + forgejo_url: String, + forgejo_token: Option, + internal_base_path: PathBuf, +} + +impl DeploymentRouter { + pub fn new( + forgejo_url: String, + forgejo_token: Option, + internal_base_path: PathBuf, + ) -> Self { + Self { + forgejo_url, + forgejo_token, + internal_base_path, + } + } + + /// Route deployment based on target type + pub async fn deploy( + &self, + config: DeploymentConfig, + generated_app: GeneratedApp, + ) -> Result { + match config.target { + DeploymentTarget::Internal { route, .. } => { + self.deploy_internal(route, generated_app).await + } + DeploymentTarget::External { ref repo_url, .. } => { + self.deploy_external(repo_url, generated_app).await + } + } + } + + /// Deploy internally to GB platform + async fn deploy_internal( + &self, + route: String, + app: GeneratedApp, + ) -> Result { + // 1. Store files in Drive + // 2. Register route in app router + // 3. Create API endpoints + // 4. Return deployment URL + todo!() + } + + /// Deploy externally to Forgejo + async fn deploy_external( + &self, + repo_url: &str, + app: GeneratedApp, + ) -> Result { + // 1. Initialize git repo + // 2. Add Forgejo remote + // 3. Push generated files + // 4. Create CI/CD workflow + // 5. Trigger build + todo!() + } +} + +#[derive(Debug, Clone, Serialize, Deserialize)] +pub struct DeploymentResult { + pub url: String, + pub deployment_type: String, + pub status: DeploymentStatus, + pub metadata: serde_json::Value, +} + +#[derive(Debug, Clone, Serialize, Deserialize)] +pub enum DeploymentStatus { + Pending, + Building, + Deployed, + Failed, +} + +#[derive(Debug)] +pub enum DeploymentError { + InternalDeploymentError(String), + ForgejoError(String), + GitError(String), + CiCdError(String), +} +``` + +**Estimated Effort:** 12-16 hours + +--- + +## Phase 0.2: Forgejo Integration (P0 - CRITICAL) + +**Goal:** Initialize repositories and push code to Forgejo + +**File:** `botserver/src/deployment/forgejo.rs` + +```rust +use git2::{Repository, Oid}; +use serde::{Deserialize, Serialize}; + +pub struct ForgejoClient { + base_url: String, + token: String, + client: reqwest::Client, +} + +impl ForgejoClient { + pub fn new(base_url: String, token: String) -> Self { + Self { + base_url, + token, + client: reqwest::Client::new(), + } + } + + /// Create a new repository in Forgejo + pub async fn create_repository( + &self, + name: &str, + description: &str, + private: bool, + ) -> Result { + let url = format!("{}/api/v1/user/repos", self.base_url); + + let payload = CreateRepoRequest { + name: name.to_string(), + description: description.to_string(), + private, + auto_init: true, + gitignores: Some("Node,React,Vite".to_string()), + license: Some("MIT".to_string()), + readme: Some("Default".to_string()), + }; + + let response = self + .client + .post(&url) + .header("Authorization", format!("token {}", self.token)) + .json(&payload) + .send() + .await + .map_err(|e| ForgejoError::HttpError(e.to_string()))?; + + if response.status().is_success() { + let repo: ForgejoRepo = response + .json() + .await + .map_err(|e| ForgejoError::JsonError(e.to_string()))?; + Ok(repo) + } else { + Err(ForgejoError::ApiError( + response.status().to_string(), + )) + } + } + + /// Push generated app to Forgejo repository + pub async fn push_app( + &self, + repo_url: &str, + app: &GeneratedApp, + branch: &str, + ) -> Result { + // 1. Initialize local git repo + let repo = Repository::init(app.temp_dir()?)?; + + // 2. Add all files + let mut index = repo.index()?; + for file in &app.files { + index.add_path(PathBuf::from(&file.path))?; + } + index.write()?; + + // 3. Create commit + let tree_id = index.write_tree()?; + let tree = repo.find_tree(tree_id)?; + + let sig = repo.signature()?; + let oid = repo.commit( + Some(&format!("refs/heads/{}", branch)), + &sig, + &sig, + &format!("Initial commit: {}", app.description), + &tree, + &[], + )?; + + // 4. Add Forgejo remote + let mut remote = repo.remote( + "origin", + &format!( + "{}", + repo_url.replace("https://", &format!("https://{}@", self.token)) + ), + )?; + + // 5. Push to Forgejo + remote.push(&[format!("refs/heads/{}", branch)], None)?; + + Ok(oid.to_string()) + } + + /// Create CI/CD workflow for the app + pub async fn create_cicd_workflow( + &self, + repo_url: &str, + app_type: AppType, + build_config: BuildConfig, + ) -> Result<(), ForgejoError> { + let workflow = match app_type { + AppType::Htmx => self.generate_htmx_workflow(build_config), + AppType::React => self.generate_react_workflow(build_config), + AppType::Vue => self.generate_vue_workflow(build_config), + }; + + // Create .forgejo/workflows/deploy.yml + // Commit and push + todo!() + } + + fn generate_htmx_workflow(&self, config: BuildConfig) -> String { + r#" +name: Deploy HTMX App + +on: + push: + branches: [main, develop] + +jobs: + deploy: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + + - name: Setup Node.js + uses: actions/setup-node@v3 + with: + node-version: '20' + + - name: Install dependencies + run: npm ci + + - name: Build + run: npm run build + + - name: Deploy to server + run: | + # Add deployment commands here + echo "Deploying to production..." +"# + .to_string() + } + + fn generate_react_workflow(&self, config: BuildConfig) -> String { + // Generate React/Vite CI/CD workflow + todo!() + } + + fn generate_vue_workflow(&self, config: BuildConfig) -> String { + // Generate Vue CI/CD workflow + todo!() + } +} + +#[derive(Debug, Clone, Serialize, Deserialize)] +pub struct ForgejoRepo { + pub id: u64, + pub name: String, + pub full_name: String, + pub clone_url: String, + pub html_url: String, +} + +#[derive(Debug, Serialize)] +struct CreateRepoRequest { + name: String, + description: String, + private: bool, + auto_init: bool, + #[serde(skip_serializing_if = "Option::is_none")] + gitignores: Option, + #[serde(skip_serializing_if = "Option::is_none")] + license: Option, + #[serde(skip_serializing_if = "Option::is_none")] + readme: Option, +} + +#[derive(Debug, Clone, Copy)] +pub enum AppType { + Htmx, + React, + Vue, +} + +#[derive(Debug, Clone)] +pub struct BuildConfig { + pub node_version: String, + pub build_command: String, + pub output_directory: String, +} + +#[derive(Debug)] +pub enum ForgejoError { + HttpError(String), + JsonError(String), + ApiError(String), + GitError(String), +} +``` + +**API Endpoints:** +```rust +// botserver/src/deployment/api.rs + +use axum::{ + extract::State, + response::Json, + routing::{get, post}, + Router, Json as ResponseJson, +}; + +use crate::core::shared::state::AppState; + +pub fn configure_deployment_routes() -> Router> { + Router::new() + // Get deployment targets (internal vs external) + .route("/api/deployment/targets", get(get_deployment_targets)) + + // Deploy app + .route("/api/deployment/deploy", post(deploy_app)) + + // Get deployment status + .route("/api/deployment/status/:id", get(get_deployment_status)) + + // Forgejo repositories + .route("/api/deployment/forgejo/repos", get(list_forgejo_repos)) + .route("/api/deployment/forgejo/create-repo", post(create_forgejo_repo)) + + // CI/CD workflows + .route("/api/deployment/forgejo/workflows", get(list_workflows)) + .route("/api/deployment/forgejo/workflows/create", post(create_workflow)) +} + +pub async fn get_deployment_targets( + State(_state): State>, +) -> Json { + Json(serde_json::json!({ + "targets": [ + { + "id": "internal", + "name": "GB Platform", + "description": "Deploy to the GB platform with shared resources", + "features": [ + "Fast deployment", + "Shared authentication", + "Shared database", + "API integration", + "Instant scaling" + ], + "icon": "📱" + }, + { + "id": "external", + "name": "Forgejo ALM", + "description": "Deploy to an external Forgejo repository with CI/CD", + "features": [ + "Independent deployment", + "Custom domain", + "Version control", + "CI/CD pipelines", + "Separate infrastructure" + ], + "icon": "🌐" + } + ] + })) +} + +pub async fn deploy_app( + State(state): State>, + ResponseJson(payload): ResponseJson, +) -> Result, DeploymentError> { + let router = state.deployment_router.clone(); + + let config = DeploymentConfig { + app_name: payload.app_name, + target: payload.target, + environment: payload.environment.unwrap_or(DeploymentEnvironment::Production), + }; + + let generated_app = generate_app_from_manifest(&payload.manifest).await?; + + let result = router.deploy(config, generated_app).await?; + + Ok(Json(result)) +} + +#[derive(Debug, Deserialize)] +pub struct DeploymentRequest { + pub app_name: String, + pub target: DeploymentTarget, + pub environment: Option, + pub manifest: serde_json::Value, +} +``` + +**Estimated Effort:** 20-24 hours + +--- + +## Phase 0.3: Deployment UI in Vibe (P0 - CRITICAL) + +**Goal:** Add deployment choice UI to Vibe Builder + +**File:** `botui/ui/suite/partials/vibe-deployment.html` + +```html + + + + + + +``` + +**Integration into Vibe:** +```javascript +// In vibe.html, add deployment button to the canvas header: + +
+ // DASHBOARD > // ${currentProject} + +
+``` + +**Estimated Effort:** 8-10 hours + +--- + +# PART II: Frontend Feature Implementation (Phases 1-7) + +After deployment infrastructure is in place, continue with the frontend tools: + +## Phase 1: Code Editor Integration (P0 - Critical) + +**Goal:** Replace textarea with professional code editor + +**Tasks:** + +1. **Download Monaco Editor** + ```bash + cd botui + npm install monaco-editor@0.45.0 + cp -r node_modules/monaco-editor min/vs ui/suite/js/vendor/ + ``` + +2. **Create Editor Component** + - `botui/ui/suite/partials/editor.html` + - Monaco container with tab bar + - File tree sidebar + - Save/Publish buttons + +3. **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 + +4. **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 + +5. **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:** + +1. **Schema Visualizer Component** + - `botui/ui/suite/partials/database.html` + - Canvas-based ER diagram + - Table cards with fields + - Relationship lines (foreign keys) + - Zoom/pan controls + +2. **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 + +3. **Query Builder UI** + - Visual SELECT builder + - Table selection dropdown + - Join interface + - Filter conditions + - SQL preview pane + +4. **Data Grid** + - Sortable columns + - Inline editing + - Pagination + - Export (CSV/JSON) + +5. **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:** + +1. **Git Status Panel** + - `botui/ui/suite/partials/git-status.html` + - File list with status icons + - Stage/unstage checkboxes + - "Commit" button + +2. **Diff Viewer** + - `botui/ui/suite/partials/git-diff.html` + - Side-by-side comparison + - Line highlighting (green/red) + - Syntax highlighting + +3. **Commit Interface** + - Message input + - "Commit & Push" button + - Progress indicator + +4. **Branch Manager** + - Branch dropdown + - "New Branch" dialog + - Switch/delete actions + +5. **Commit Timeline** + - Vertical timeline + - Author, date, message + - Click → view diff + +6. **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 + +**NEW: Forgejo-Specific Operations** +- View Forgejo repository status +- Sync with Forgejo remote +- View CI/CD pipeline status +- Trigger manual builds + +**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:** + +1. **Core Browser Module** + - `botserver/src/browser/mod.rs` + - `BrowserSession` - Manage browser instance + - `BrowserManager` - Session lifecycle + - Methods: `navigate()`, `click()`, `fill()`, `screenshot()`, `execute()` + + ```rust + pub struct BrowserSession { + id: String, + browser: Arc, + page: Arc>, + created_at: DateTime, + } + + impl BrowserSession { + pub async fn new(headless: bool) -> Result; + 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>; + pub async fn execute(&self, script: &str) -> Result; + } + ``` + +2. **Action Recorder** + - `botserver/src/browser/recorder.rs` + - `RecordedAction` - Navigate, Click, Fill, Wait, Assert + - `ActionRecorder` - Record/stop/export + - Export as Playwright test + + ```rust + #[derive(Serialize, Deserialize)] + pub struct RecordedAction { + pub timestamp: i64, + pub action_type: ActionType, + pub selector: Option, + pub value: Option, + } + + impl ActionRecorder { + pub fn start(&mut self); + pub fn stop(&mut self) -> Vec; + pub fn export_test_script(&self) -> String; + } + ``` + +3. **Test Validator** + - `botserver/src/browser/validator.rs` + - Check for flaky selectors + - Validate wait conditions + - Suggest improvements via Designer AI + +4. **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 + +5. **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` + ```javascript + 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 + +6. **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:** +```javascript +// 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:** +```javascript +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:** + +1. **Tab Management** + - File tabs with close buttons + - Active tab highlighting + - Tab overflow scrolling + - Drag to reorder + +2. **Split-Pane Layout** + - Split horizontal/vertical buttons + - Resize handles + - 2x2 grid max + +3. **File Comparison** + - Side-by-side diff + - Line-by-line navigation + - Copy changes (L→R) + +4. **File Tree Sidebar** + - Nested folders + - File type icons + - Expand/collapse + - Double-click to open + +5. **Quick Open** + - Ctrl+P → Search files + - Fuzzy matching + - Arrow navigation + +6. **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:** + +1. **Terminal Container** + - xterm.js integration (already vendor file) + - Multiple terminal tabs + - Fit addon for auto-resize + +2. **WebSocket Terminal** + - Bi-directional WebSocket: `/ws/terminal/{session_id}` + - Protocol: `{"type": "input", "data": "command\n"}` + - Handle ANSI escape codes + +3. **Command History** + - Up/Down arrows + - Ctrl+R search + - Persist in localStorage + +4. **Command Completion** + - Tab completion + - File path completion + - Command flags + +5. **Backend Terminal Server** + - Spawn PTY per session + - WebSocket handler + - Clean up on disconnect + +6. **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:** + +1. **Template System** + - `botserver/src/templates/crm/` + - Template JSON definitions + - Prompt templates + - Field libraries + +2. **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 + +3. **Template Gallery UI** + - `botui/ui/suite/partials/template-gallery.html` + - Template cards with descriptions + - Preview screenshots + - "Use Template" button + +4. **Template Generator** + - Load template JSON + - Customize with user details + - Generate all files + - Deploy to /apps/{name} (internal) OR Forgejo (external) + +**NEW: Dual Deployment Support** +- Internal deployment templates (use GB APIs) +- External deployment templates (standalone with CI/CD) + +**Success Criteria:** +- Can select template from gallery +- Template generates full CRM +- Customization works +- Generated CRM is functional + +**Estimated Effort:** 20-24 hours + +--- + +# PART III: Technical Implementation Notes + +## Code Quality Standards (per AGENTS.md) + +**MUST Follow:** +1. ✅ **Error Handling** - NO panics, use `?` operator +2. ✅ **Safe Commands** - Use `SafeCommand` wrapper +3. ✅ **Error Sanitization** - Use `ErrorSanitizer` +4. ✅ **SQL Safety** - Use `sql_guard` +5. ✅ **Rate Limiting** - Per-IP and per-User limits +6. ✅ **CSRF Protection** - CSRF tokens on state-changing endpoints +7. ✅ **Security Headers** - CSP, HSTS, X-Frame-Options, etc. +8. ✅ **No CDNs** - All assets local +9. ✅ **File Size** - Max 450 lines per file +10. ✅ **Clippy Clean** - 0 warnings, no `#[allow()]` + +## File Organization + +**Botserver (Backend):** +``` +botserver/src/ + deployment/ # NEW - Deployment infrastructure + mod.rs # DeploymentRouter + forgejo.rs # ForgejoClient + api.rs # Deployment API endpoints + templates.rs # CI/CD workflow templates + api/ + editor.rs + database.rs + git.rs # UPDATED - Add Forgejo git operations + 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/ # EXISTING - MCP integration + mod.rs + mcp.rs + ui.rs + knowledge_base.rs +``` + +**Botui (Frontend):** +``` +botui/ui/suite/ + partials/ + vibe.html # UPDATED - Add deploy button + vibe-deployment.html # NEW - Deployment modal + editor.html + database.html + git-status.html # UPDATED - Add Forgejo status + git-diff.html + browser-controls.html + terminal.html + template-gallery.html + js/ + deployment.js # NEW - Deployment logic + editor.js + database.js + git.js # UPDATED - Add Forgejo operations + browser.js + terminal.js + templates.js + css/ + deployment.css # NEW - Deployment styles + editor.css + database.css + git.css + browser.css + terminal.css + templates.css +``` + +## Dependencies + +**Already in Workspace:** +```toml +[dependencies] +chromiumoxide = "0.7" # Browser automation +tokio = "1.41" # Async runtime +axum = "0.7" # HTTP framework +diesel = "2.1" # Database +git2 = "0.18" # Git operations +reqwest = { version = "0.11", features = ["json"] } # HTTP client +``` + +**Frontend:** +``` +monaco-editor@0.45.0 # Code editor +xterm.js@5.3.0 # Terminal (already vendor file) +``` + +--- + +# PART IV: Testing Strategy + +## Unit Tests +- All new modules need unit tests +- Test coverage > 80% +- Location: `botserver/src//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 + - Deploy to internal GB Platform + - Deploy to external Forgejo + - Edit in Monaco editor + - View database schema + - Create git commit + - Record browser test + +--- + +# PART V: Rollout Plan + +## Milestone 0: Deployment Infrastructure (Week 0) +- **Day 1-3:** Phase 0.1 - Deployment Router +- **Day 4-5:** Phase 0.2 - Forgejo Integration +- **Day 6-7:** Phase 0.3 - Deployment UI + +**Success Criteria:** +- ✅ Can deploy app internally to /apps/{name} +- ✅ Can deploy app externally to Forgejo +- ✅ CI/CD pipeline auto-generated +- ✅ Deployment choice works in 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 + Forgejo) + +## 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 with dual deployment) + +--- + +# PART VI: Success Metrics + +## Deployment Infrastructure (Phase 0) +- Internal deployment succeeds in < 30 seconds +- External Forgejo deployment succeeds in < 2 minutes +- CI/CD pipeline auto-generates correctly +- Both deployment models accessible from Vibe UI +- Can switch between internal/external deployment + +## 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 +- Templates support both deployment models + +--- + +# Conclusion + +The **critical foundation** is the **deployment infrastructure (Phase 0)**. The platform must support: + +1. **Internal GB Apps** - Quick prototypes using GB APIs and shared resources +2. **External Forgejo Projects** - Production apps with independent infrastructure and CI/CD + +**Implementation Priority:** +1. ⚠️ **Phase 0** - Deployment Infrastructure (CRITICAL - Week 0) + - Phase 0.1: Deployment Router + - Phase 0.2: Forgejo Integration + - Phase 0.3: Deployment UI + +2. 📝 **Phase 1** - Code Editor (Week 1) + +3. 🗄️ **Phase 2** - Database UI (Week 2) + +4. 🐙 **Phase 3** - Git Operations + Forgejo (Week 2) + +5. 🌐 **Phase 4** - Browser Automation (Week 3) + +6. 📂 **Phase 5** - Multi-File Workspace (Week 3) + +7. 🖥️ **Phase 6** - Terminal (Week 4) + +8. 📇 **Phase 7** - CRM Templates (Week 4) + +Once Phase 0 is complete, VibeCode will be able to **deploy apps both internally and externally**, giving users the flexibility to choose the right deployment model for their use case. + +**Total Estimated Effort:** +- Phases 1-7: 125-155 hours (~3-4 weeks with 1 developer) +- Phase 0: +40-50 hours +- **Final Total:** 165-205 hours (~4-5 weeks with 1 developer) + +The BotUI platform already has a **powerful backend** capable of generating full applications via LLM. These phases add the **deployment infrastructure** and **professional UI tools** to make it a complete development environment with dual deployment capabilities. + +Once 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) +✅ **Dual deployment model** (Internal GB Platform + External Forgejo ALM) +✅ **Professional development environment** diff --git a/yarn.lock b/yarn.lock index 3a453c2..8f40338 100644 --- a/yarn.lock +++ b/yarn.lock @@ -16,6 +16,125 @@ dependencies: undici-types "~7.16.0" +buffer-equal-constant-time@^1.0.1: + version "1.0.1" + resolved "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz" + integrity sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA== + +data-uri-to-buffer@^4.0.0: + version "4.0.1" + resolved "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz" + integrity sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A== + +ecdsa-sig-formatter@1.0.11: + version "1.0.11" + resolved "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz" + integrity sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ== + dependencies: + safe-buffer "^5.0.1" + +fetch-blob@^3.1.2, fetch-blob@^3.1.4: + version "3.2.0" + resolved "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz" + integrity sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ== + dependencies: + node-domexception "^1.0.0" + web-streams-polyfill "^3.0.3" + +formdata-polyfill@^4.0.10: + version "4.0.10" + resolved "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz" + integrity sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g== + dependencies: + fetch-blob "^3.1.2" + +jsonwebtoken@^9.0.3: + version "9.0.3" + resolved "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.3.tgz" + integrity sha512-MT/xP0CrubFRNLNKvxJ2BYfy53Zkm++5bX9dtuPbqAeQpTVe0MQTFhao8+Cp//EmJp244xt6Drw/GVEGCUj40g== + dependencies: + jws "^4.0.1" + lodash.includes "^4.3.0" + lodash.isboolean "^3.0.3" + lodash.isinteger "^4.0.4" + lodash.isnumber "^3.0.3" + lodash.isplainobject "^4.0.6" + lodash.isstring "^4.0.1" + lodash.once "^4.0.0" + ms "^2.1.1" + semver "^7.5.4" + +jwa@^2.0.1: + version "2.0.1" + resolved "https://registry.npmjs.org/jwa/-/jwa-2.0.1.tgz" + integrity sha512-hRF04fqJIP8Abbkq5NKGN0Bbr3JxlQ+qhZufXVr0DvujKy93ZCbXZMHDL4EOtodSbCWxOqR8MS1tXA5hwqCXDg== + dependencies: + buffer-equal-constant-time "^1.0.1" + ecdsa-sig-formatter "1.0.11" + safe-buffer "^5.0.1" + +jws@^4.0.1: + version "4.0.1" + resolved "https://registry.npmjs.org/jws/-/jws-4.0.1.tgz" + integrity sha512-EKI/M/yqPncGUUh44xz0PxSidXFr/+r0pA70+gIYhjv+et7yxM+s29Y+VGDkovRofQem0fs7Uvf4+YmAdyRduA== + dependencies: + jwa "^2.0.1" + safe-buffer "^5.0.1" + +lodash.includes@^4.3.0: + version "4.3.0" + resolved "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz" + integrity sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w== + +lodash.isboolean@^3.0.3: + version "3.0.3" + resolved "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz" + integrity sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg== + +lodash.isinteger@^4.0.4: + version "4.0.4" + resolved "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz" + integrity sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA== + +lodash.isnumber@^3.0.3: + version "3.0.3" + resolved "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz" + integrity sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw== + +lodash.isplainobject@^4.0.6: + version "4.0.6" + resolved "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz" + integrity sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA== + +lodash.isstring@^4.0.1: + version "4.0.1" + resolved "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz" + integrity sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw== + +lodash.once@^4.0.0: + version "4.1.1" + resolved "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz" + integrity sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg== + +ms@^2.1.1: + version "2.1.3" + resolved "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz" + integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA== + +node-domexception@^1.0.0: + version "1.0.0" + resolved "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz" + integrity sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ== + +node-fetch@^3.3.2: + version "3.3.2" + resolved "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.2.tgz" + integrity sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA== + dependencies: + data-uri-to-buffer "^4.0.0" + fetch-blob "^3.1.4" + formdata-polyfill "^4.0.10" + playwright-core@1.58.2: version "1.58.2" resolved "https://registry.npmjs.org/playwright-core/-/playwright-core-1.58.2.tgz" @@ -30,11 +149,26 @@ playwright@1.58.2: optionalDependencies: fsevents "2.3.2" +safe-buffer@^5.0.1: + version "5.2.1" + resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz" + integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ== + +semver@^7.5.4: + version "7.7.4" + resolved "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz" + integrity sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA== + undici-types@~7.16.0: version "7.16.0" resolved "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz" integrity sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw== +web-streams-polyfill@^3.0.3: + version "3.3.3" + resolved "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz" + integrity sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw== + ws@^8.19.0: version "8.19.0" resolved "https://registry.npmjs.org/ws/-/ws-8.19.0.tgz"