frankenbot/templates/tasks.html
pdyde dc2ea07621 feat: Complete UX cleanup - Agent colors & streamlined navigation
Agent Color System:
- Added unique colors for each agent (orchestrator: purple, researcher: teal, negotiator: red, ar_manager: yellow)
- CSS variables and utility classes (.agent-*, .agent-badge-*, .agent-border-*)
- Tasks table now shows colored left border per agent
- Agent names displayed in their brand color

Navigation Simplification:
- Removed 'Email Log' from main menu (reduced clutter)
- Email Log now accessible via link in Emails page
- Active state for both /emails and /email-log on Emails nav item

Visual Improvements:
- Agent assignments now visually distinct at a glance
- Cleaner, more focused navigation menu
- Better information architecture
2026-02-21 15:06:32 +01:00

108 lines
4.2 KiB
HTML

{% extends "base.html" %}
{% block title %}Tasks{% endblock %}
{% block content %}
<div class="page-header">
<h1>Task-Verwaltung</h1>
<p>Manuelle, orchestrierte und Agent-Tasks</p>
</div>
<div class="row g-4">
<div class="col-12">
<div class="card">
<div class="card-header bg-primary d-flex justify-content-between align-items-center">
<h5 class="mb-0">Alle Tasks</h5>
<span class="badge bg-secondary">{{ tasks|length }}</span>
</div>
<div class="card-body p-0">
{% if tasks %}
<div class="table-responsive">
<table class="table table-hover mb-0">
<thead>
<tr>
<th>#</th>
<th>Titel</th>
<th>Agent</th>
<th>Status</th>
<th>Erstellt</th>
<th>Aktion</th>
</tr>
</thead>
<tbody>
{% for task in tasks %}
<tr class="agent-border-{{ task.agent_key or 'default' }}">
<td style="color:var(--text-muted);">{{ task.id }}</td>
<td>
<strong>{{ task.title }}</strong>
{% if task.type == 'email' %}
<span class="badge bg-info ms-1" title="Von: {{ task.reply_to }}">Email</span>
{% endif %}
{% if task.type == 'orchestrated' %}
<span class="badge ms-1" style="background-color:#9333ea;">Orchestriert</span>
{% endif %}
{% if task.type == 'agent_created' %}
<span class="badge bg-warning ms-1">Agent</span>
{% endif %}
{% if task.description %}
<div style="font-size:.75rem;color:var(--text-muted);">
{{ task.description[:60] }}{% if task.description|length > 60 %}…{% endif %}
</div>
{% endif %}
</td>
<td style="font-size:.8rem;" class="agent-{{ task.agent_key or 'default' }}">
<strong>{{ task.assigned_agent }}</strong>
</td>
<td>
{% if task.status == 'pending' %}
<span class="badge bg-warning">Pending</span>
{% elif task.status == 'in_progress' %}
<span class="badge bg-primary">In Progress</span>
{% elif task.status == 'completed' %}
<span class="badge bg-success">Done</span>
{% elif task.status == 'error' %}
<span class="badge bg-danger">Fehler</span>
{% else %}
<span class="badge bg-secondary">{{ task.status }}</span>
{% endif %}
</td>
<td style="color:var(--text-muted);font-size:.75rem;">{{ task.created }}</td>
<td>
{% if task.status == 'pending' %}
<span style="color:var(--text-muted);font-size:.75rem;">⏳ Wartend</span>
{% elif task.status == 'in_progress' %}
<span style="color:var(--info);font-size:.75rem;">🔄 Läuft...</span>
{% elif task.status == 'completed' %}
<span style="color:var(--success);font-size:.75rem;">✓ Auto</span>
{% else %}
<span style="color:var(--text-muted);font-size:.75rem;"></span>
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<div class="text-center py-5" style="color:var(--text-muted);">
<p style="font-size:2rem;">📋</p>
<p>Noch keine Tasks. Erstellen Sie den ersten Task!</p>
</div>
{% endif %}
</div>
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
<script>
// Auto-Refresh alle 15 Sekunden wenn Tasks pending/in_progress sind
const hasPendingTasks = {{ 'true' if tasks|selectattr('status', 'in', ['pending', 'in_progress'])|list else 'false' }};
if (hasPendingTasks) {
setInterval(() => {
location.reload();
}, 15000); // 15 Sekunden
}
</script>
{% endblock %}