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
This commit is contained in:
pdyde 2026-02-21 15:06:32 +01:00
parent 50c1a0315b
commit dc2ea07621
4 changed files with 45 additions and 8 deletions

View file

@ -29,6 +29,13 @@
--radius-sm: 9px;
--radius-xs: 6px;
--transition: .18s cubic-bezier(.4,0,.2,1);
/* Agent Colors */
--agent-orchestrator: #7c6fff;
--agent-researcher: #06d6a0;
--agent-negotiator: #f43f5e;
--agent-ar_manager: #fbbf24;
--agent-default: #38bdf8;
}
/* ── Reset & Base ─────────────────────────────────────────────────────────── */
@ -710,6 +717,23 @@ hr { border-color: var(--border); opacity: 1; }
pointer-events: none;
}
/* ── Agent Color System ─────────────────────────────────────────────────────── */
.agent-orchestrator { color: var(--agent-orchestrator) !important; }
.agent-researcher { color: var(--agent-researcher) !important; }
.agent-negotiator { color: var(--agent-negotiator) !important; }
.agent-ar_manager { color: var(--agent-ar_manager) !important; }
.agent-badge-orchestrator { background-color: var(--agent-orchestrator) !important; }
.agent-badge-researcher { background-color: var(--agent-researcher) !important; }
.agent-badge-negotiator { background-color: var(--agent-negotiator) !important; }
.agent-badge-ar_manager { background-color: var(--agent-ar_manager) !important; }
.agent-border-orchestrator { border-left: 3px solid var(--agent-orchestrator); }
.agent-border-researcher { border-left: 3px solid var(--agent-researcher); }
.agent-border-negotiator { border-left: 3px solid var(--agent-negotiator); }
.agent-border-ar_manager { border-left: 3px solid var(--agent-ar_manager); }
/* ── Responsive adjustments ───────────────────────────────────────────────── */
@media (max-width: 768px) {

View file

@ -55,15 +55,10 @@
</a>
</li>
<li class="nav-item">
<a class="nav-link {% if request.path == '/emails' %}active{% endif %}" href="/emails">
<a class="nav-link {% if request.path in ['/emails', '/email-log'] %}active{% endif %}" href="/emails">
<span></span> Emails
</a>
</li>
<li class="nav-item">
<a class="nav-link {% if request.path == '/email-log' %}active{% endif %}" href="/email-log">
<span>📋</span> Log
</a>
</li>
<li class="nav-item">
<a class="nav-link {% if request.path == '/team' %}active{% endif %}" href="/team">
<span>👥</span> Team

View file

@ -104,6 +104,22 @@
</div>
</div>
</div>
<div class="row g-4 mt-4">
<div class="col-12">
<div class="card">
<div class="card-header bg-secondary d-flex justify-content-between align-items-center">
<h5 class="mb-0">📋 Email Journal / Log</h5>
<a href="/email-log" class="btn btn-sm btn-outline-light">Vollständiges Log</a>
</div>
<div class="card-body">
<p class="text-muted">
Das vollständige Email-Journal zeigt alle verarbeiteten Emails mit Details zu Status, Agent-Zuweisungen und Zeitstempeln.
</p>
</div>
</div>
</div>
</div>
{% endblock %}
{% block scripts %}

View file

@ -30,7 +30,7 @@
</thead>
<tbody>
{% for task in tasks %}
<tr>
<tr class="agent-border-{{ task.agent_key or 'default' }}">
<td style="color:var(--text-muted);">{{ task.id }}</td>
<td>
<strong>{{ task.title }}</strong>
@ -49,7 +49,9 @@
</div>
{% endif %}
</td>
<td style="font-size:.8rem;">{{ task.assigned_agent }}</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>