feat: add Organizations & Bot Tree settings UI
Some checks failed
GBCI / build (push) Failing after 9s

- Add organizations.html with org selector and bot hierarchy tree
- Add bot configuration form with enabled tabs
- Update PROMPT.md with weekly maintenance checklist
This commit is contained in:
Rodrigo Rodriguez (Pragmatismo) 2025-12-18 16:18:09 -03:00
parent c8903d88c0
commit dcdc9837e0
5 changed files with 1699 additions and 0 deletions

View file

@ -5,6 +5,45 @@
---
## Weekly Maintenance - EVERY MONDAY
### Package Review Checklist
**Every Monday, review the following:**
1. **Dependency Updates**
```bash
cargo outdated
cargo audit
```
2. **Package Consolidation Opportunities**
- Check if new crates can replace custom code
- Look for crates that combine multiple dependencies
- Review `Cargo.toml` for redundant dependencies
3. **Code Reduction Candidates**
- Custom implementations that now have crate equivalents
- Boilerplate that can be replaced with derive macros
- Manual serialization that `serde` can handle
4. **Frontend Asset Updates**
```bash
# Check vendor libs in ui/suite/js/vendor/
# Compare with latest versions of htmx, alpine, etc.
```
### Packages to Watch
| Area | Potential Packages | Purpose |
|------|-------------------|---------|
| HTTP Client | `reqwest` | Consolidate HTTP handling |
| Templates | `askama` | Efficient HTML templates |
| State Mgmt | `alpine.js` | Minimal JS reactivity |
| Animations | `gsap` | Replace CSS animations |
---
## Version Management - CRITICAL
**Current version is 6.1.0 - DO NOT CHANGE without explicit approval!**

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,99 @@
{% if accounts.is_empty() %}
<div class="empty-state">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
<polyline points="22,6 12,13 2,6"></polyline>
</svg>
<h3>No accounts connected</h3>
<p>Connect Gmail, Outlook, or other accounts to enable LLM search and file operations.</p>
</div>
{% else %}
{% for account in accounts %}
<div class="account-card">
<div class="account-header">
<div class="account-icon {{ account.provider }}">
{% if account.provider == "google" or account.provider == "gmail" %}
<svg width="24" height="24" viewBox="0 0 24 24">
<path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
<path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
<path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
<path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
</svg>
{% elif account.provider == "microsoft" or account.provider == "outlook" %}
<svg width="24" height="24" viewBox="0 0 24 24">
<rect x="1" y="1" width="10" height="10" fill="#F25022"/>
<rect x="13" y="1" width="10" height="10" fill="#7FBA00"/>
<rect x="1" y="13" width="10" height="10" fill="#00A4EF"/>
<rect x="13" y="13" width="10" height="10" fill="#FFB900"/>
</svg>
{% else %}
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
<polyline points="22,6 12,13 2,6"></polyline>
</svg>
{% endif %}
</div>
<div class="account-info">
<div class="account-email">{{ account.email }}</div>
<div class="account-provider">{{ account.provider }}</div>
</div>
<span class="account-status {{ account.status }}">
{% if account.status == "active" %}
<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="6"/></svg>
Active
{% elif account.status == "syncing" %}
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 11-6.219-8.56"/></svg>
Syncing
{% else %}
<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="6"/></svg>
Error
{% endif %}
</span>
</div>
<div class="account-stats">
<div class="stat-item">
<div class="stat-value">{{ account.email_count }}</div>
<div class="stat-label">Emails</div>
</div>
<div class="stat-item">
<div class="stat-value">{{ account.file_count }}</div>
<div class="stat-label">Files</div>
</div>
<div class="stat-item">
<div class="stat-value">{{ account.event_count }}</div>
<div class="stat-label">Events</div>
</div>
</div>
<div class="account-meta">
{% if account.last_sync_at.is_some() %}
<span class="meta-item">Last sync: {{ account.last_sync_at.as_ref().unwrap() }}</span>
{% endif %}
</div>
<div class="account-actions">
<button onclick="syncAccount('{{ account.id }}')">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9"/>
</svg>
Sync Now
</button>
<button onclick="editAccount('{{ account.id }}')">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/>
<path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>
</svg>
Settings
</button>
<button class="danger" onclick="removeAccount('{{ account.id }}')">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="3 6 5 6 21 6"/>
<path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/>
</svg>
Remove
</button>
</div>
</div>
{% endfor %}
{% endif %}

View file

@ -0,0 +1,420 @@
<!-- Accounts Panel -->
<div class="accounts-panel">
<div class="section-header">
<h2>Connected Accounts</h2>
<div class="header-actions">
<button class="btn btn-primary" onclick="showAddAccountModal()">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
Add Account
</button>
</div>
</div>
<div class="accounts-grid" id="accounts-list" hx-get="/api/sources/accounts/list" hx-trigger="load" hx-swap="innerHTML">
<div class="loading-spinner">
<div class="spinner"></div>
<p>Loading accounts...</p>
</div>
</div>
</div>
<!-- Add Account Modal -->
<div id="add-account-modal" class="modal" style="display: none;">
<div class="modal-backdrop" onclick="hideAddAccountModal()"></div>
<div class="modal-content">
<div class="modal-header">
<h3>Add Account</h3>
<button class="modal-close" onclick="hideAddAccountModal()">&times;</button>
</div>
<div class="modal-body">
<p class="modal-description">Connect an email or cloud storage account to enable LLM search and file operations.</p>
<div class="provider-grid">
<button class="provider-btn" onclick="connectAccount('google')">
<div class="provider-icon google">
<svg width="24" height="24" viewBox="0 0 24 24">
<path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
<path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
<path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
<path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
</svg>
</div>
<span class="provider-name">Google</span>
<span class="provider-services">Gmail, Drive, Calendar</span>
</button>
<button class="provider-btn" onclick="connectAccount('microsoft')">
<div class="provider-icon microsoft">
<svg width="24" height="24" viewBox="0 0 24 24">
<rect x="1" y="1" width="10" height="10" fill="#F25022"/>
<rect x="13" y="1" width="10" height="10" fill="#7FBA00"/>
<rect x="1" y="13" width="10" height="10" fill="#00A4EF"/>
<rect x="13" y="13" width="10" height="10" fill="#FFB900"/>
</svg>
</div>
<span class="provider-name">Microsoft</span>
<span class="provider-services">Outlook, OneDrive, Calendar</span>
</button>
<button class="provider-btn" onclick="connectAccount('imap')">
<div class="provider-icon imap">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
<polyline points="22,6 12,13 2,6"></polyline>
</svg>
</div>
<span class="provider-name">IMAP</span>
<span class="provider-services">Custom email server</span>
</button>
</div>
</div>
</div>
</div>
<style>
.accounts-panel {
padding: 0;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.section-header h2 {
font-size: 1.25rem;
font-weight: 600;
color: var(--text-primary);
margin: 0;
}
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
border: none;
}
.btn-primary {
background: var(--primary);
color: white;
}
.btn-primary:hover {
background: var(--primary-dark);
}
.accounts-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 1rem;
}
.account-card {
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 0.75rem;
padding: 1.25rem;
transition: all 0.2s;
}
.account-card:hover {
border-color: var(--primary);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.account-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
.account-icon {
width: 40px;
height: 40px;
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-tertiary);
}
.account-icon.google { background: #f1f3f4; }
.account-icon.microsoft { background: #f3f3f3; }
.account-icon.imap { background: var(--bg-tertiary); color: var(--text-secondary); }
.account-info {
flex: 1;
min-width: 0;
}
.account-email {
font-weight: 600;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.account-provider {
font-size: 0.75rem;
color: var(--text-secondary);
text-transform: capitalize;
}
.account-status {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.25rem 0.5rem;
border-radius: 1rem;
font-size: 0.75rem;
font-weight: 500;
}
.account-status.active {
background: rgba(34, 197, 94, 0.1);
color: #22c55e;
}
.account-status.syncing {
background: rgba(59, 130, 246, 0.1);
color: #3b82f6;
}
.account-status.error {
background: rgba(239, 68, 68, 0.1);
color: #ef4444;
}
.account-stats {
display: flex;
gap: 1rem;
margin-bottom: 1rem;
padding: 0.75rem;
background: var(--bg-tertiary);
border-radius: 0.5rem;
}
.stat-item {
flex: 1;
text-align: center;
}
.stat-value {
font-size: 1.125rem;
font-weight: 600;
color: var(--text-primary);
}
.stat-label {
font-size: 0.7rem;
color: var(--text-secondary);
text-transform: uppercase;
}
.account-actions {
display: flex;
gap: 0.5rem;
}
.account-actions button {
flex: 1;
padding: 0.5rem;
border: 1px solid var(--border);
border-radius: 0.375rem;
background: var(--bg-primary);
color: var(--text-secondary);
font-size: 0.75rem;
cursor: pointer;
transition: all 0.2s;
}
.account-actions button:hover {
background: var(--bg-tertiary);
color: var(--text-primary);
}
.account-actions button.danger:hover {
background: rgba(239, 68, 68, 0.1);
color: #ef4444;
border-color: #ef4444;
}
/* Modal styles */
.modal {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}
.modal-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
}
.modal-content {
position: relative;
background: var(--bg-primary);
border-radius: 1rem;
width: 90%;
max-width: 500px;
max-height: 90vh;
overflow: auto;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--border);
}
.modal-header h3 {
margin: 0;
font-size: 1.125rem;
font-weight: 600;
}
.modal-close {
background: none;
border: none;
font-size: 1.5rem;
color: var(--text-secondary);
cursor: pointer;
padding: 0;
line-height: 1;
}
.modal-close:hover {
color: var(--text-primary);
}
.modal-body {
padding: 1.5rem;
}
.modal-description {
color: var(--text-secondary);
margin-bottom: 1.5rem;
}
.provider-grid {
display: grid;
gap: 1rem;
}
.provider-btn {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 0.75rem;
cursor: pointer;
transition: all 0.2s;
text-align: left;
}
.provider-btn:hover {
border-color: var(--primary);
background: var(--bg-tertiary);
}
.provider-icon {
width: 48px;
height: 48px;
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.provider-name {
font-weight: 600;
color: var(--text-primary);
display: block;
}
.provider-services {
font-size: 0.75rem;
color: var(--text-secondary);
display: block;
}
.empty-state {
text-align: center;
padding: 3rem;
color: var(--text-secondary);
}
.empty-state svg {
width: 64px;
height: 64px;
margin-bottom: 1rem;
opacity: 0.5;
}
.empty-state h3 {
color: var(--text-primary);
margin-bottom: 0.5rem;
}
</style>
<script>
function showAddAccountModal() {
document.getElementById('add-account-modal').style.display = 'flex';
}
function hideAddAccountModal() {
document.getElementById('add-account-modal').style.display = 'none';
}
function connectAccount(provider) {
hideAddAccountModal();
if (provider === 'google') {
window.location.href = '/api/oauth/google/authorize';
} else if (provider === 'microsoft') {
window.location.href = '/api/oauth/microsoft/authorize';
} else if (provider === 'imap') {
showImapConfigModal();
}
}
function syncAccount(accountId) {
htmx.ajax('POST', `/api/sources/accounts/${accountId}/sync`, {
target: '#accounts-list',
swap: 'innerHTML'
});
}
function removeAccount(accountId) {
if (confirm('Are you sure you want to remove this account? All synced data will be deleted.')) {
htmx.ajax('DELETE', `/api/sources/accounts/${accountId}`, {
target: '#accounts-list',
swap: 'innerHTML'
});
}
}
</script>

View file

@ -144,6 +144,19 @@
</svg>
Models
</button>
<button class="tab-btn"
role="tab"
aria-selected="false"
hx-get="/api/sources/accounts"
hx-target="#content-area"
hx-swap="innerHTML"
onclick="setActiveTab(this)">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
<polyline points="22,6 12,13 2,6"></polyline>
</svg>
Accounts
</button>
</nav>
<!-- Main Content Area -->