forked from Rockachopa/Timmy-time-dashboard
622a6a9204
Major:
- Extract all inline <style> blocks from 22 Jinja2 templates into
static/css/mission-control.css — single cacheable stylesheet
- Add tox lint check that fails on inline <style> in templates
Minor:
1. Connection status indicator in topbar (green/amber/red dot) reflecting
WebSocket + Ollama reachability, with auto-reconnect
2. Jinja2 {% macro panel(title) %} in macros.html — eliminates repeated
.card.mc-panel markup; index.html converted as example
3. SVG favicon (purple T + orange dot)
4. 30-second TTL cache on _check_ollama() to avoid blocking the event loop
on every health poll (asyncio.to_thread was already in place)
5. Toast notification system (McToast.show) for transient status messages —
wired into connection status for Ollama/WebSocket state changes
Enforcement:
- CLAUDE.md updated with conventions 11-14 (no inline CSS, use panel macro,
use toasts, never block the event loop)
- tox lint + pre-push environments now fail on inline <style> blocks
https://claude.ai/code/session_014FQ785MQdyJQ4BAXrRSo9w
Co-authored-by: Claude <noreply@anthropic.com>
93 lines
3.3 KiB
HTML
93 lines
3.3 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Tools & Capabilities — Mission Control{% endblock %}
|
|
|
|
{% block extra_styles %}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="tools-container py-3">
|
|
|
|
<div class="tools-header">
|
|
<div>
|
|
<div class="tools-title">TOOLS & CAPABILITIES</div>
|
|
<div class="tools-subtitle">Agent tools and usage statistics</div>
|
|
</div>
|
|
<div class="tools-stat-box">
|
|
<div class="tools-stat-val">{{ total_calls }}</div>
|
|
<div class="tools-stat-label">TOTAL CALLS</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Available Tools -->
|
|
<div class="card mc-panel mb-3">
|
|
<div class="card-header mc-panel-header">// AVAILABLE TOOLS</div>
|
|
<div class="card-body">
|
|
<div class="row g-3">
|
|
{% for tool_id, tool_info in available_tools.items() %}
|
|
<div class="col-12 col-md-4">
|
|
<div class="card tool-card">
|
|
<div class="card-body">
|
|
<h6 class="card-title" style="color:var(--text-bright);">{{ tool_info.name }}</h6>
|
|
<p class="card-text">{{ tool_info.description }}</p>
|
|
<div style="margin-top:8px;">
|
|
<small style="color:var(--text-dim); font-size:0.65rem; letter-spacing:0.08em;">AVAILABLE TO</small>
|
|
<div class="d-flex flex-wrap gap-1 mt-1">
|
|
{% for persona in tool_info.available_in %}
|
|
<span class="badge badge-secondary">{{ persona|title }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Agent Capabilities -->
|
|
<div class="card mc-panel">
|
|
<div class="card-header mc-panel-header">// AGENT CAPABILITIES</div>
|
|
<div class="card-body">
|
|
{% if agent_tools %}
|
|
<div class="row g-3">
|
|
{% for agent in agent_tools %}
|
|
<div class="col-12 col-md-6">
|
|
<div class="card">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<span>
|
|
<strong style="color:var(--text-bright);">{{ agent.name }}</strong>
|
|
<span class="badge {% if agent.status == 'idle' %}badge-success{% elif agent.status == 'busy' %}badge-warning{% else %}badge-secondary{% endif %} ms-2">
|
|
{{ agent.status }}
|
|
</span>
|
|
</span>
|
|
{% if agent.stats %}
|
|
<small style="color:var(--text-dim);">{{ agent.stats.total_calls }} calls</small>
|
|
{% endif %}
|
|
</div>
|
|
<div class="card-body">
|
|
{% if agent.tools %}
|
|
<div class="d-flex flex-wrap gap-2">
|
|
{% for tool in agent.tools %}
|
|
<span class="badge badge-info" title="{{ tool.description }}">{{ tool.name }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<p style="color:var(--text-dim); margin:0; font-size:0.85rem;">No tools assigned</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div style="text-align:center; padding:20px; color:var(--text-dim); font-size:0.85rem;">
|
|
No agents registered yet.
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
{% endblock %}
|