472 lines
No EOL
15 KiB
Markdown
472 lines
No EOL
15 KiB
Markdown
# AI Implementation Prompt - BotUI Full Product Build
|
|
|
|
**Budget:** $200,000 USD | **Timeline:** 15 weeks | **Version:** 6.1.0
|
|
|
|
---
|
|
|
|
## CONTEXT
|
|
|
|
You are implementing frontend UI for General Bots Suite. ALL backend APIs already exist in BotServer - your job is purely to wire HTMX-based UI to existing endpoints.
|
|
|
|
### Tech Stack
|
|
- **Templates:** Rust Askama (HTML templates)
|
|
- **Interactivity:** HTMX (NO custom JavaScript unless absolutely necessary)
|
|
- **Styling:** CSS with CSS variables for theming
|
|
- **WebSocket:** htmx-ws extension for real-time features
|
|
- **Icons:** Use ONLY existing icons from `ui/suite/assets/icons/`
|
|
|
|
### Critical Rules
|
|
1. **HTMX ONLY** - No fetch(), no axios, no custom JS for API calls
|
|
2. **Server-side rendering** - All HTML generated by Rust/Askama
|
|
3. **Local assets** - NEVER use CDN links
|
|
4. **Zero warnings** - Clean Rust compilation required
|
|
5. **6 themes** - Use CSS variables, not hardcoded colors
|
|
|
|
---
|
|
|
|
## PHASE 1: CORE APPS ($45,000 - 3 weeks)
|
|
|
|
### Task 1.1: Paper App (Document Editor)
|
|
**Create:** `ui/suite/paper/paper.html`
|
|
|
|
Wire these endpoints:
|
|
```
|
|
POST /api/paper/new → Create new document
|
|
GET /api/paper/list → List documents
|
|
GET /api/paper/search?q= → Search documents
|
|
POST /api/paper/save → Save document
|
|
POST /api/paper/autosave → Auto-save (5s delay)
|
|
GET /api/paper/{id} → Get document
|
|
POST /api/paper/{id}/delete → Delete document
|
|
POST /api/paper/template/blank → Blank template
|
|
POST /api/paper/template/meeting → Meeting notes template
|
|
POST /api/paper/template/todo → Todo template
|
|
POST /api/paper/template/research→ Research template
|
|
POST /api/paper/ai/summarize → AI summarize
|
|
POST /api/paper/ai/expand → AI expand text
|
|
POST /api/paper/ai/improve → AI improve writing
|
|
POST /api/paper/ai/simplify → AI simplify
|
|
POST /api/paper/ai/translate → AI translate
|
|
POST /api/paper/ai/custom → AI custom prompt
|
|
GET /api/paper/export/pdf → Export PDF
|
|
GET /api/paper/export/docx → Export DOCX
|
|
GET /api/paper/export/md → Export Markdown
|
|
GET /api/paper/export/html → Export HTML
|
|
GET /api/paper/export/txt → Export Text
|
|
```
|
|
|
|
Structure:
|
|
- Sidebar: document list + search
|
|
- Main: rich text editor area
|
|
- Right panel: AI assistant tools
|
|
- Toolbar: save, templates, export
|
|
|
|
---
|
|
|
|
### Task 1.2: Research App
|
|
**Create:** `ui/suite/research/research.html`
|
|
|
|
Wire these endpoints:
|
|
```
|
|
GET /api/research/collections → List collections
|
|
POST /api/research/collections/new → Create collection
|
|
GET /api/research/collections/{id} → Get collection
|
|
POST /api/research/search → Search across sources
|
|
GET /api/research/recent → Recent searches
|
|
GET /api/research/trending → Trending topics
|
|
GET /api/research/prompts → Suggested prompts
|
|
GET /api/research/export-citations → Export citations
|
|
```
|
|
|
|
---
|
|
|
|
### Task 1.3: Sources App
|
|
**Create:** `ui/suite/sources/sources.html`
|
|
|
|
Wire these endpoints:
|
|
```
|
|
GET /api/sources/prompts → Prompt library
|
|
GET /api/sources/templates → Template library
|
|
GET /api/sources/news → News feed
|
|
GET /api/sources/mcp-servers → MCP server list
|
|
GET /api/sources/llm-tools → LLM tools list
|
|
GET /api/sources/models → Available models
|
|
GET /api/sources/search?q= → Search sources
|
|
```
|
|
|
|
Structure: Tab-based navigation between source types
|
|
|
|
---
|
|
|
|
### Task 1.4: Meet App (Video Conferencing)
|
|
**Create:** `ui/suite/meet/meet.html`
|
|
|
|
Wire these endpoints:
|
|
```
|
|
POST /api/meet/create → Create meeting
|
|
GET /api/meet/rooms → List active rooms
|
|
GET /api/meet/rooms/{room_id} → Get room details
|
|
POST /api/meet/rooms/{room_id}/join → Join room
|
|
POST /api/meet/transcription/{room_id} → Start transcription
|
|
POST /api/meet/token → Get meeting token
|
|
POST /api/meet/invite → Send invites
|
|
WS /ws/meet → Real-time meeting
|
|
POST /api/voice/start → Start voice
|
|
POST /api/voice/stop → Stop voice
|
|
```
|
|
|
|
---
|
|
|
|
### Task 1.5: Conversations (Enhance Chat)
|
|
**Enhance:** `ui/suite/chat/chat.html`
|
|
|
|
Add these endpoints:
|
|
```
|
|
POST /conversations/create → Create conversation
|
|
POST /conversations/{id}/join → Join
|
|
POST /conversations/{id}/leave → Leave
|
|
GET /conversations/{id}/members → List members
|
|
GET /conversations/{id}/messages → Get messages
|
|
POST /conversations/{id}/messages/send → Send message
|
|
POST /conversations/{id}/messages/{msg}/edit → Edit message
|
|
POST /conversations/{id}/messages/{msg}/delete → Delete message
|
|
POST /conversations/{id}/messages/{msg}/react → Add reaction
|
|
POST /conversations/{id}/messages/{msg}/pin → Pin message
|
|
GET /conversations/{id}/messages/search?q= → Search
|
|
POST /conversations/{id}/calls/start → Start call
|
|
POST /conversations/{id}/calls/join → Join call
|
|
POST /conversations/{id}/calls/leave → Leave call
|
|
POST /conversations/{id}/calls/mute → Mute
|
|
POST /conversations/{id}/calls/unmute → Unmute
|
|
POST /conversations/{id}/screen/share → Share screen
|
|
POST /conversations/{id}/screen/stop → Stop share
|
|
POST /conversations/{id}/recording/start → Start recording
|
|
POST /conversations/{id}/recording/stop → Stop recording
|
|
POST /conversations/{id}/whiteboard/create → Create whiteboard
|
|
POST /conversations/{id}/whiteboard/collaborate → Collaborate
|
|
```
|
|
|
|
---
|
|
|
|
### Task 1.6: Drive Enhancement
|
|
**Enhance:** `ui/suite/drive/index.html`
|
|
|
|
Add missing endpoints:
|
|
```
|
|
POST /files/copy → Copy file
|
|
POST /files/move → Move file
|
|
GET /files/shared → Shared with me
|
|
GET /files/permissions → Get permissions
|
|
GET /files/quota → Storage quota
|
|
GET /files/sync/status → Sync status
|
|
POST /files/sync/start → Start sync
|
|
POST /files/sync/stop → Stop sync
|
|
GET /files/versions → File versions
|
|
POST /files/restore → Restore version
|
|
POST /docs/merge → Merge documents
|
|
POST /docs/convert → Convert format
|
|
POST /docs/fill → Fill template
|
|
POST /docs/export → Export document
|
|
POST /docs/import → Import document
|
|
```
|
|
|
|
---
|
|
|
|
### Task 1.7: Calendar Enhancement
|
|
**Enhance:** `ui/suite/calendar/calendar.html`
|
|
|
|
Add missing endpoints:
|
|
```
|
|
GET /api/calendar/events/{id} → Get event
|
|
PUT /api/calendar/events/{id} → Update event
|
|
DELETE /api/calendar/events/{id} → Delete event
|
|
GET /api/calendar/export.ics → Export iCal
|
|
POST /api/calendar/import → Import iCal
|
|
```
|
|
|
|
---
|
|
|
|
### Task 1.8: Email Enhancement
|
|
**Enhance:** `ui/suite/mail/mail.html`
|
|
|
|
Add missing endpoints:
|
|
```
|
|
GET /api/email/accounts → List accounts
|
|
POST /api/email/accounts/add → Add account
|
|
DELETE /api/email/accounts/{id} → Remove account
|
|
GET /api/email/compose → Compose form
|
|
POST /api/email/send → Send email
|
|
POST /api/email/draft → Save draft
|
|
GET /api/email/folders/{account_id} → Get folders
|
|
GET /api/email/tracking/stats → Tracking stats
|
|
```
|
|
|
|
---
|
|
|
|
## PHASE 2: ADMIN PANEL ($55,000 - 4 weeks)
|
|
|
|
### Task 2.1: User Management
|
|
**Create:** `ui/suite/admin/users.html`
|
|
|
|
Wire ALL user endpoints:
|
|
```
|
|
POST /users/create → Create user
|
|
PUT /users/{id}/update → Update user
|
|
DELETE /users/{id}/delete → Delete user
|
|
GET /users/list → List users
|
|
GET /users/search?q= → Search users
|
|
GET /users/{id}/profile → Get profile
|
|
GET /users/{id}/settings → Get settings
|
|
GET /users/{id}/permissions → Get permissions
|
|
GET /users/{id}/roles → Get roles
|
|
GET /users/{id}/status → Get status
|
|
GET /users/{id}/presence → Get presence
|
|
GET /users/{id}/activity → Get activity
|
|
POST /users/{id}/security/2fa/enable → Enable 2FA
|
|
POST /users/{id}/security/2fa/disable → Disable 2FA
|
|
GET /users/{id}/security/devices → List devices
|
|
GET /users/{id}/security/sessions → List sessions
|
|
POST /users/{id}/notifications/preferences/update → Update prefs
|
|
```
|
|
|
|
---
|
|
|
|
### Task 2.2: Group Management
|
|
**Create:** `ui/suite/admin/groups.html`
|
|
|
|
Wire ALL group endpoints:
|
|
```
|
|
POST /groups/create → Create group
|
|
PUT /groups/{id}/update → Update group
|
|
DELETE /groups/{id}/delete → Delete group
|
|
GET /groups/list → List groups
|
|
GET /groups/search?q= → Search groups
|
|
GET /groups/{id}/members → Get members
|
|
POST /groups/{id}/members/add → Add member
|
|
POST /groups/{id}/members/roles → Set member role
|
|
DELETE /groups/{id}/members/remove → Remove member
|
|
GET /groups/{id}/permissions → Get permissions
|
|
GET /groups/{id}/settings → Get settings
|
|
GET /groups/{id}/analytics → Get analytics
|
|
POST /groups/{id}/join/request → Request join
|
|
POST /groups/{id}/join/approve → Approve join
|
|
POST /groups/{id}/join/reject → Reject join
|
|
POST /groups/{id}/invites/send → Send invite
|
|
GET /groups/{id}/invites/list → List invites
|
|
```
|
|
|
|
---
|
|
|
|
### Task 2.3: DNS Management
|
|
**Create:** `ui/suite/admin/dns.html`
|
|
|
|
```
|
|
POST /api/dns/register → Register hostname
|
|
POST /api/dns/remove → Remove hostname
|
|
```
|
|
|
|
---
|
|
|
|
### Task 2.4: Admin Shell
|
|
**Create:** `ui/suite/admin/index.html`
|
|
|
|
Sidebar navigation to: Dashboard, Users, Groups, Bots, DNS, Audit, Billing
|
|
|
|
---
|
|
|
|
## PHASE 3: SETTINGS ($30,000 - 2 weeks)
|
|
|
|
**Create directory:** `ui/suite/settings/`
|
|
|
|
Files needed:
|
|
- `index.html` - Settings shell with sidebar nav
|
|
- `profile.html` - User profile editing
|
|
- `security.html` - 2FA, sessions, devices, password change
|
|
- `appearance.html` - Theme selection (6 themes)
|
|
- `notifications.html` - Email/push/in-app preferences
|
|
- `storage.html` - Cloud sync configuration
|
|
- `integrations.html` - API keys, webhooks, OAuth connections
|
|
- `privacy.html` - Data export, account deletion
|
|
- `billing.html` - Subscription management
|
|
|
|
---
|
|
|
|
## PHASE 4: MONITORING ($25,000 - 2 weeks)
|
|
|
|
**Create directory:** `ui/suite/monitoring/`
|
|
|
|
Files needed:
|
|
- `index.html` - Monitoring shell
|
|
- `services.html` - Service health grid
|
|
- `resources.html` - CPU/Memory/Disk charts
|
|
- `logs.html` - Real-time log viewer (WebSocket)
|
|
- `metrics.html` - Prometheus metrics display
|
|
- `alerts.html` - Alert rule configuration
|
|
- `health.html` - Health check endpoints
|
|
|
|
Key endpoints:
|
|
```
|
|
GET /api/services/status → Service health
|
|
GET /api/analytics/dashboard → Dashboard metrics
|
|
GET /api/analytics/metric → Individual metric
|
|
GET /metrics → Prometheus export
|
|
WS /ws/logs → Real-time logs
|
|
```
|
|
|
|
---
|
|
|
|
## PHASE 5: AUTH ($25,000 - 2 weeks)
|
|
|
|
**Enhance:** `ui/suite/auth/`
|
|
|
|
- `login.html` - Add 2FA challenge flow
|
|
- `register.html` - New user registration
|
|
- `forgot-password.html` - Password reset request
|
|
- `reset-password.html` - Password reset form
|
|
|
|
Key endpoints:
|
|
```
|
|
POST /api/auth/login → Login
|
|
POST /api/auth/register → Register
|
|
POST /api/auth/2fa/verify → Verify 2FA code
|
|
POST /api/auth/forgot-password → Request reset
|
|
POST /api/auth/reset-password → Reset password
|
|
GET /api/auth/oauth/google → Google OAuth
|
|
GET /api/auth/oauth/microsoft → Microsoft OAuth
|
|
```
|
|
|
|
---
|
|
|
|
## PHASE 6: POLISH ($20,000 - 2 weeks)
|
|
|
|
1. Update `base.html` navigation with all new apps
|
|
2. Mobile responsiveness for all views
|
|
3. ARIA labels and keyboard navigation
|
|
4. Extract strings for i18n preparation
|
|
5. Error states and loading indicators
|
|
6. Comprehensive testing
|
|
|
|
---
|
|
|
|
## HTMX PATTERNS TO USE
|
|
|
|
### Basic GET
|
|
```html
|
|
<div hx-get="/api/items" hx-trigger="load" hx-swap="innerHTML"></div>
|
|
```
|
|
|
|
### Search with Debounce
|
|
```html
|
|
<input type="search" name="q"
|
|
hx-get="/api/search"
|
|
hx-trigger="keyup changed delay:300ms"
|
|
hx-target="#results">
|
|
```
|
|
|
|
### Form Submit
|
|
```html
|
|
<form hx-post="/api/items" hx-target="#list" hx-swap="beforeend">
|
|
<input name="title" required>
|
|
<button type="submit">Add</button>
|
|
</form>
|
|
```
|
|
|
|
### Delete with Confirm
|
|
```html
|
|
<button hx-delete="/api/items/{id}"
|
|
hx-confirm="Delete this item?"
|
|
hx-target="closest tr"
|
|
hx-swap="outerHTML">Delete</button>
|
|
```
|
|
|
|
### Polling
|
|
```html
|
|
<div hx-get="/api/status" hx-trigger="every 10s"></div>
|
|
```
|
|
|
|
### WebSocket
|
|
```html
|
|
<div hx-ext="ws" ws-connect="/ws/chat">
|
|
<div id="messages"></div>
|
|
<form ws-send>
|
|
<input name="message">
|
|
<button>Send</button>
|
|
</form>
|
|
</div>
|
|
```
|
|
|
|
### Tabs
|
|
```html
|
|
<nav>
|
|
<button hx-get="/tab1" hx-target="#content" class="active">Tab 1</button>
|
|
<button hx-get="/tab2" hx-target="#content">Tab 2</button>
|
|
</nav>
|
|
<div id="content"></div>
|
|
```
|
|
|
|
---
|
|
|
|
## FILE CREATION ORDER
|
|
|
|
Week 1-2:
|
|
1. `ui/suite/paper/paper.html`
|
|
2. `ui/suite/research/research.html`
|
|
|
|
Week 3-4:
|
|
3. `ui/suite/sources/sources.html`
|
|
4. `ui/suite/meet/meet.html`
|
|
|
|
Week 5-6:
|
|
5. Enhance `ui/suite/chat/chat.html` (conversations)
|
|
6. Enhance `ui/suite/drive/index.html`
|
|
7. Enhance `ui/suite/calendar/calendar.html`
|
|
8. Enhance `ui/suite/mail/mail.html`
|
|
|
|
Week 7-8:
|
|
9. `ui/suite/admin/index.html`
|
|
10. `ui/suite/admin/users.html`
|
|
11. `ui/suite/admin/groups.html`
|
|
12. `ui/suite/admin/dns.html`
|
|
|
|
Week 9-10:
|
|
13. `ui/suite/settings/index.html`
|
|
14. `ui/suite/settings/profile.html`
|
|
15. `ui/suite/settings/security.html`
|
|
16. `ui/suite/settings/appearance.html`
|
|
17. `ui/suite/settings/notifications.html`
|
|
18. `ui/suite/settings/storage.html`
|
|
19. `ui/suite/settings/integrations.html`
|
|
20. `ui/suite/settings/privacy.html`
|
|
|
|
Week 11-12:
|
|
21. `ui/suite/monitoring/index.html`
|
|
22. `ui/suite/monitoring/services.html`
|
|
23. `ui/suite/monitoring/logs.html`
|
|
24. `ui/suite/monitoring/metrics.html`
|
|
25. `ui/suite/monitoring/alerts.html`
|
|
|
|
Week 13-14:
|
|
26. `ui/suite/auth/register.html`
|
|
27. `ui/suite/auth/forgot-password.html`
|
|
28. Enhance `ui/suite/auth/login.html`
|
|
|
|
Week 15:
|
|
29. Update `ui/suite/base.html` navigation
|
|
30. Polish and testing
|
|
|
|
---
|
|
|
|
## SUCCESS CHECKLIST
|
|
|
|
- [ ] 100+ API endpoints wired to UI
|
|
- [ ] All CRUD operations working
|
|
- [ ] Real-time features via WebSocket
|
|
- [ ] Mobile responsive
|
|
- [ ] Admin panel complete
|
|
- [ ] Settings self-service complete
|
|
- [ ] Monitoring operational
|
|
- [ ] OAuth working (Google, Microsoft)
|
|
- [ ] 2FA implemented
|
|
- [ ] Zero custom JS where HTMX works
|
|
- [ ] All 6 themes working
|
|
- [ ] No compilation warnings |