botui/PROMPT.md
Rodrigo Rodriguez (Pragmatismo) b8f1053575 feat(mail): add email tracking UI to Suite mail app
- Add Tracking folder to sidebar with 📊 icon
- Display tracking stats panel (sent, opened, rate, avg time)
- Show read status indicators (✓✓ green=read, gray=sent)
- Add read count badges for multiple opens
- Implement tracking item details view
- Add CSS for read indicators, stats panel, tooltips
2025-12-04 18:15:31 -03:00

366 lines
No EOL
9 KiB
Markdown

# BotUI Development Prompt Guide
**Version:** 6.1.0
**Purpose:** LLM context for BotUI development
---
## Official Icons - MANDATORY
**NEVER generate icons with LLM. ALWAYS use official SVG icons from:**
```
ui/suite/assets/icons/
├── gb-logo.svg # Main GB logo
├── gb-bot.svg # Bot/assistant
├── gb-analytics.svg # Analytics app
├── gb-calendar.svg # Calendar app
├── gb-chat.svg # Chat app
├── gb-compliance.svg # Compliance/security
├── gb-designer.svg # Workflow designer
├── gb-drive.svg # File storage
├── gb-mail.svg # Email
├── gb-meet.svg # Video meetings
├── gb-paper.svg # Documents
├── gb-research.svg # Research/search
├── gb-sources.svg # Knowledge sources
└── gb-tasks.svg # Task management
```
### Usage in HTML
```html
<!-- Inline SVG (preferred for styling) -->
<img src="/assets/icons/gb-chat.svg" alt="Chat" class="icon">
<!-- With CSS currentColor -->
<svg class="icon" style="color: var(--primary);">
<use href="/assets/icons/gb-chat.svg#icon"></use>
</svg>
```
### Icon Style Guidelines
- All icons use `stroke="currentColor"` for theming
- ViewBox: `0 0 24 24`
- Stroke width: `1.5`
- Rounded caps and joins
- Consistent with GB brand identity
**DO NOT:**
- Generate new icons with AI/LLM
- Use emoji or unicode symbols as icons
- Use external icon libraries (FontAwesome, etc.)
- Create inline SVG content in templates
---
## Project Overview
BotUI is a **dual-mode UI application** built in Rust that runs as either a desktop app (Tauri) or web server (Axum). All business logic is in **botserver** - BotUI is purely presentation + HTTP bridge.
### Workspace Position
```
botui/ # THIS PROJECT - Web/Desktop UI
botserver/ # Main server (business logic)
botlib/ # Shared library (consumed here)
botapp/ # Desktop wrapper (consumes botui)
botbook/ # Documentation
```
---
## LLM Workflow Strategy
### Two Types of LLM Work
1. **Execution Mode (Fazer)**
- Pre-annotate phrases and send for execution
- Focus on automation freedom
- Less concerned with code details
- Primary concern: Is the LLM destroying something?
- Trust but verify output doesn't break existing functionality
2. **Review Mode (Conferir)**
- Read generated code with full attention
- Line-by-line verification
- Check for correctness, security, performance
- Validate against requirements
### LLM Fallback Strategy (After 3 attempts / 10 minutes)
1. DeepSeek-V3-0324 (good architect, reliable)
2. gpt-5-chat (slower but thorough)
3. gpt-oss-120b (final validation)
4. Claude Web (for complex debugging, unit tests, UI)
---
## Code Generation Rules
### CRITICAL REQUIREMENTS
```
- BotUI = Presentation + HTTP bridge ONLY
- All business logic goes in botserver
- No code duplication between layers
- Feature gates eliminate unused code paths
- Zero warnings - feature gating prevents dead code
- NO DEAD CODE - implement real functionality, never use _ for unused
- All JS/CSS must be local (no CDN)
```
### HTMX-First Frontend
```
- Use HTMX to minimize JavaScript at maximum
- Delegate ALL logic to Rust server
- Server returns HTML fragments, not JSON
- Use hx-get, hx-post, hx-target, hx-swap attributes
- WebSocket via htmx-ws extension for real-time
- NO custom JavaScript where HTMX can handle it
```
### Local Assets Only
All external libraries are bundled locally - NEVER use CDN:
```
ui/suite/js/vendor/
├── htmx.min.js # HTMX core
├── htmx-ws.js # WebSocket extension
├── htmx-json-enc.js # JSON encoding
├── marked.min.js # Markdown parser
├── gsap.min.js # Animation (minimal use)
├── alpinejs.min.js # Alpine.js (minimal use)
└── livekit-client.umd.min.js # LiveKit video
ui/minimal/js/vendor/
└── (same structure)
```
```html
<!-- CORRECT -->
<script src="js/vendor/htmx.min.js"></script>
<!-- WRONG - NEVER DO THIS -->
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
```
### Dependency Management
```
- Use diesel for any local database needs
- After adding to Cargo.toml: cargo audit must show 0 warnings
- If audit fails, find alternative library
- Minimize redundancy - check existing libs before adding new ones
```
### Documentation Rules
```
- Rust code examples ONLY allowed in architecture/gbapp documentation
- Scan for ALL_CAPS.md files created at wrong places - delete or integrate
- Keep only README.md and PROMPT.md at project root level
```
---
## Architecture
### Dual Modes
| Mode | Command | Description |
|------|---------|-------------|
| Web | `cargo run` | Axum server on port 3000 |
| Desktop | `cargo tauri dev` | Tauri native window |
### Code Organization
```
src/
├── main.rs # Entry point - mode detection
├── lib.rs # Feature-gated module exports
├── http_client.rs # HTTP wrapper for botserver (web-only)
├── ui_server/
│ └── mod.rs # Axum router + UI serving (web-only)
├── desktop/
│ ├── mod.rs # Desktop module organization
│ ├── drive.rs # File operations via Tauri
│ ├── tray.rs # System tray infrastructure
│ └── stream.rs # Streaming operations
└── shared/
└── state.rs # Shared application state
ui/
├── suite/ # Main UI (HTML/CSS/JS)
│ ├── js/vendor/ # Local JS libraries
│ └── css/ # Stylesheets
└── minimal/ # Minimal chat UI
└── js/vendor/ # Local JS libraries
```
### Feature Gating
```rust
#[cfg(feature = "desktop")]
pub mod desktop;
#[cfg(not(feature = "desktop"))]
pub mod http_client;
```
---
## HTMX Patterns
### Server-Side Rendering
```html
<!-- Button triggers server request, response swaps into target -->
<button hx-get="/api/items"
hx-target="#items-list"
hx-swap="innerHTML">
Load Items
</button>
<div id="items-list">
<!-- Server returns HTML fragment here -->
</div>
```
### Form Submission
```html
<form hx-post="/api/items"
hx-target="#items-list"
hx-swap="beforeend">
<input name="title" type="text" required>
<button type="submit">Add</button>
</form>
```
### WebSocket Real-time
```html
<div hx-ext="ws" ws-connect="/ws/chat">
<div id="messages"></div>
<form ws-send>
<input name="message" type="text">
<button type="submit">Send</button>
</form>
</div>
```
### Server Response (Rust/Askama)
```rust
#[derive(Template)]
#[template(path = "partials/item.html")]
struct ItemTemplate {
item: Item,
}
async fn create_item(
State(state): State<Arc<AppState>>,
Form(input): Form<CreateItem>,
) -> Html<String> {
let item = save_item(&state, input).await;
let template = ItemTemplate { item };
Html(template.render().unwrap())
}
```
---
## Adding Features
### Process
1. Add business logic to **botserver** first
2. Create REST API endpoint in botserver (returns HTML for HTMX)
3. Add HTTP wrapper in BotUI if needed
4. Add UI in `ui/suite/` using HTMX attributes
5. For desktop-specific: Add Tauri command in `src/desktop/`
### Desktop Tauri Command
```rust
#[tauri::command]
pub fn list_files(path: &str) -> Result<Vec<FileItem>, String> {
let entries = std::fs::read_dir(path)
.map_err(|e| e.to_string())?;
let items: Vec<FileItem> = entries
.filter_map(|e| e.ok())
.map(|e| FileItem {
name: e.file_name().to_string_lossy().to_string(),
is_dir: e.path().is_dir(),
})
.collect();
Ok(items)
}
```
---
## Final Steps Before Commit
```bash
# Check for warnings
cargo check 2>&1 | grep warning
# Audit dependencies (must be 0 warnings)
cargo audit
# Build both modes
cargo build
cargo build --features desktop
# Verify no dead code with _ prefixes
grep -r "let _" src/ --include="*.rs"
# Verify no CDN references
grep -r "unpkg.com\|cdnjs\|jsdelivr" ui/
```
---
## Key Files Reference
```
src/main.rs # Entry point, mode detection
src/lib.rs # Feature-gated exports
src/http_client.rs # BotServerClient wrapper
src/ui_server/mod.rs # Axum router, static files
ui/suite/index.html # Main UI entry
ui/suite/base.html # Base template
ui/minimal/index.html # Minimal chat UI
```
---
## Dependencies
| Library | Version | Purpose |
|---------|---------|---------|
| axum | 0.7.5 | Web framework |
| reqwest | 0.12 | HTTP client |
| tokio | 1.41 | Async runtime |
| askama | 0.12 | HTML Templates |
| diesel | 2.1 | Database (sqlite) |
---
## Remember
- **Two LLM modes**: Execution (fazer) vs Review (conferir)
- **HTMX first**: Minimize JS, delegate to server
- **Local assets**: No CDN, all vendor files local
- **Dead code**: Never use _ prefix, implement real code
- **cargo audit**: Must pass with 0 warnings
- **No business logic**: All logic in botserver
- **Feature gates**: Unused code never compiles
- **HTML responses**: Server returns fragments, not JSON