htmlgraph 0.20.1__py3-none-any.whl → 0.27.5__py3-none-any.whl

htmlgraph/api/templates/partials/agents-redesign.html

@@ -0,0 +1,317 @@
+<div class="view-container agents-view">
+    <div class="view-header">
+        <h2>Agent Fleet Status</h2>
+        <div class="view-description">
+            Real-time performance metrics for all active agents
+        </div>
+    </div>
+
+    <div class="agents-grid">
+        {% if agents %}
+            {% for agent in agents %}
+            <div class="agent-card">
+                <div class="agent-header">
+                    <div class="agent-icon {{ agent.model|lower }}">
+                        {% if agent.model == 'claude' %}
+                            C
+                        {% elif agent.model == 'gemini' %}
+                            G
+                        {% elif agent.model == 'copilot' %}
+                            M
+                        {% else %}
+                            A
+                        {% endif %}
+                    </div>
+                    <div>
+                        <h4 class="agent-name">{{ agent.name or agent.id }}</h4>
+                        <div class="agent-status {% if agent.status == 'active' %}active{% else %}idle{% endif %}">
+                            <span class="status-dot"></span>
+                            {{ agent.status or 'idle' }}
+                        </div>
+                    </div>
+                </div>
+
+                <div class="agent-stats">
+                    <div class="stat-item">
+                        <span class="stat-item-label">Model</span>
+                        <span class="stat-item-value">{{ agent.model or 'unknown' }}</span>
+                    </div>
+                    <div class="stat-item">
+                        <span class="stat-item-label">Activity</span>
+                        <span class="stat-item-value">{{ agent.event_count or 0 }}</span>
+                    </div>
+                    <div class="stat-item">
+                        <span class="stat-item-label">Tokens</span>
+                        <span class="stat-item-value">{% if agent.total_tokens %}{{ "{:,}".format(agent.total_tokens) }}{% else %}0{% endif %}</span>
+                    </div>
+                    <div class="stat-item">
+                        <span class="stat-item-label">Avg Time</span>
+                        <span class="stat-item-value">{% if agent.avg_duration %}{{ "%.2f"|format(agent.avg_duration) }}s{% else %}—{% endif %}</span>
+                    </div>
+                </div>
+
+                <div class="agent-details" style="border-top: 1px solid var(--border-subtle); padding-top: var(--spacing-lg); margin-top: var(--spacing-lg);">
+                    {% if agent.last_activity %}
+                    <div class="detail-row">
+                        <span class="detail-label">Last Activity</span>
+                        <span class="detail-value" data-utc-time="{{ agent.last_activity }}">{{ agent.last_activity }}</span>
+                    </div>
+                    {% endif %}
+
+                    {% if agent.success_rate %}
+                    <div class="detail-row" style="margin-top: var(--spacing-md);">
+                        <span class="detail-label">Success Rate</span>
+                        <div style="display: flex; align-items: center; gap: var(--spacing-md);">
+                            <div style="flex: 1; height: 6px; background: var(--bg-darker); border-radius: 2px; overflow: hidden;">
+                                <div style="height: 100%; background: linear-gradient(90deg, var(--status-success) 0%, var(--accent-lime) 100%); width: {{ agent.success_rate }}%;"></div>
+                            </div>
+                            <span class="stat-item-value" style="min-width: 50px;">{{ agent.success_rate }}%</span>
+                        </div>
+                    </div>
+                    {% endif %}
+
+                    {% if agent.error_count %}
+                    <div class="detail-row" style="margin-top: var(--spacing-md);">
+                        <span class="detail-label">Errors</span>
+                        <span class="stat-item-value" style="color: var(--status-blocked);">{{ agent.error_count }}</span>
+                    </div>
+                    {% endif %}
+                </div>
+            </div>
+            {% endfor %}
+        {% else %}
+            <div class="empty-state" style="grid-column: 1 / -1;">
+                <p>No agents found</p>
+                <small>Agent activity will appear here as tasks are delegated</small>
+            </div>
+        {% endif %}
+    </div>
+</div>
+
+<script>
+    // Convert timestamps after load
+    function convertTimestampsToLocal() {
+        const timestampElements = document.querySelectorAll('[data-utc-time]');
+        timestampElements.forEach(element => {
+            const utcTime = element.getAttribute('data-utc-time');
+            if (utcTime) {
+                try {
+                    const date = new Date(utcTime.replace(' ', 'T') + 'Z');
+                    const localTime = new Intl.DateTimeFormat('en-US', {
+                        year: 'numeric',
+                        month: '2-digit',
+                        day: '2-digit',
+                        hour: '2-digit',
+                        minute: '2-digit',
+                        second: '2-digit',
+                        hour12: false,
+                        timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
+                    }).format(date);
+                    element.textContent = localTime;
+                    element.setAttribute('title', `UTC: ${utcTime} | Local: ${localTime}`);
+                } catch (err) {
+                    console.warn('Failed to convert timestamp:', utcTime, err);
+                }
+            }
+        });
+    }
+
+    document.addEventListener('htmx:afterSettle', function(evt) {
+        if (evt.detail.target.id === 'content-area' &&
+            document.querySelector('.agents-view')) {
+            convertTimestampsToLocal();
+        }
+    });
+
+    if (document.querySelector('.agents-view')) {
+        convertTimestampsToLocal();
+    }
+</script>
+
+<style>
+    .agents-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+        gap: var(--spacing-lg);
+    }
+
+    .agent-card {
+        background: var(--bg-card);
+        border: 1px solid var(--border-subtle);
+        border-radius: 2px;
+        padding: var(--spacing-xl);
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-lg);
+        transition: all var(--transition-base);
+    }
+
+    .agent-card:hover {
+        border-color: var(--accent-lime);
+        box-shadow: var(--shadow-lg);
+        transform: translateY(-4px);
+    }
+
+    .agent-header {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-lg);
+        padding-bottom: var(--spacing-lg);
+        border-bottom: 1px solid var(--border-subtle);
+    }
+
+    .agent-icon {
+        width: 56px;
+        height: 56px;
+        border-radius: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.8rem;
+        font-weight: 700;
+        flex-shrink: 0;
+    }
+
+    .agent-icon.claude {
+        background: rgba(139, 92, 246, 0.2);
+        color: var(--agent-claude);
+    }
+
+    .agent-icon.gemini {
+        background: rgba(59, 130, 246, 0.2);
+        color: var(--agent-gemini);
+    }
+
+    .agent-icon.copilot {
+        background: rgba(107, 114, 128, 0.2);
+        color: var(--agent-copilot);
+    }
+
+    .agent-icon.openai {
+        background: rgba(16, 185, 129, 0.2);
+        color: var(--agent-openai);
+    }
+
+    .agent-name {
+        color: var(--text-primary);
+        font-size: 1.15rem;
+        font-weight: 700;
+        margin: 0;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+
+    .agent-status {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--spacing-sm);
+        color: var(--status-success);
+        font-size: 0.85rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+
+    .agent-status.idle {
+        color: var(--text-muted);
+    }
+
+    .status-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: currentColor;
+        animation: pulse-dot 2s infinite;
+    }
+
+    @keyframes pulse-dot {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.5; }
+    }
+
+    .agent-stats {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: var(--spacing-md);
+    }
+
+    .stat-item {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-xs);
+    }
+
+    .stat-item-label {
+        font-size: 0.75rem;
+        color: var(--text-muted);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+
+    .stat-item-value {
+        font-size: 1.4rem;
+        color: var(--accent-lime);
+        font-weight: 700;
+        font-family: 'JetBrains Mono', monospace;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .agent-details {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-md);
+    }
+
+    .detail-row {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-xs);
+    }
+
+    .detail-label {
+        font-size: 0.75rem;
+        color: var(--text-muted);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+
+    .detail-value {
+        color: var(--text-secondary);
+        font-family: 'Courier New', monospace;
+        word-break: break-all;
+    }
+
+    .empty-state {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 300px;
+        color: var(--text-muted);
+        text-align: center;
+        background: var(--bg-card);
+        border: 1px solid var(--border-subtle);
+        border-radius: 2px;
+    }
+
+    .empty-state p {
+        font-size: 1.1rem;
+        margin-bottom: var(--spacing-md);
+    }
+
+    .empty-state small {
+        color: var(--text-secondary);
+    }
+
+    @media (max-width: 1024px) {
+        .agents-grid {
+            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+        }
+    }
+
+    @media (max-width: 768px) {
+        .agents-grid {
+            grid-template-columns: 1fr;
+        }
+    }
+</style>

htmlgraph/api/templates/partials/agents.html

@@ -0,0 +1,317 @@
+<div class="view-container agents-view">
+    <div class="view-header">
+        <h2>Agent Fleet Status</h2>
+        <div class="view-description">
+            Real-time performance metrics for all active agents
+        </div>
+    </div>
+
+    <div class="agents-grid">
+        {% if agents %}
+            {% for agent in agents %}
+            <div class="agent-card">
+                <div class="agent-header">
+                    <div class="agent-icon {{ agent.model|lower }}">
+                        {% if agent.model == 'claude' %}
+                            C
+                        {% elif agent.model == 'gemini' %}
+                            G
+                        {% elif agent.model == 'copilot' %}
+                            M
+                        {% else %}
+                            A
+                        {% endif %}
+                    </div>
+                    <div>
+                        <h4 class="agent-name">{{ agent.name or agent.id }}</h4>
+                        <div class="agent-status {% if agent.status == 'active' %}active{% else %}idle{% endif %}">
+                            <span class="status-dot"></span>
+                            {{ agent.status or 'idle' }}
+                        </div>
+                    </div>
+                </div>
+
+                <div class="agent-stats">
+                    <div class="stat-item">
+                        <span class="stat-item-label">Model</span>
+                        <span class="stat-item-value">{{ agent.model or 'unknown' }}</span>
+                    </div>
+                    <div class="stat-item">
+                        <span class="stat-item-label">Activity</span>
+                        <span class="stat-item-value">{{ agent.event_count or 0 }}</span>
+                    </div>
+                    <div class="stat-item">
+                        <span class="stat-item-label">Tokens</span>
+                        <span class="stat-item-value">{% if agent.total_tokens %}{{ "{:,}".format(agent.total_tokens) }}{% else %}0{% endif %}</span>
+                    </div>
+                    <div class="stat-item">
+                        <span class="stat-item-label">Avg Time</span>
+                        <span class="stat-item-value">{% if agent.avg_duration %}{{ "%.2f"|format(agent.avg_duration) }}s{% else %}—{% endif %}</span>
+                    </div>
+                </div>
+
+                <div class="agent-details" style="border-top: 1px solid var(--border-subtle); padding-top: var(--spacing-lg); margin-top: var(--spacing-lg);">
+                    {% if agent.last_activity %}
+                    <div class="detail-row">
+                        <span class="detail-label">Last Activity</span>
+                        <span class="detail-value" data-utc-time="{{ agent.last_activity }}">{{ agent.last_activity }}</span>
+                    </div>
+                    {% endif %}
+
+                    {% if agent.success_rate %}
+                    <div class="detail-row" style="margin-top: var(--spacing-md);">
+                        <span class="detail-label">Success Rate</span>
+                        <div style="display: flex; align-items: center; gap: var(--spacing-md);">
+                            <div style="flex: 1; height: 6px; background: var(--bg-darker); border-radius: 2px; overflow: hidden;">
+                                <div style="height: 100%; background: linear-gradient(90deg, var(--status-success) 0%, var(--accent-lime) 100%); width: {{ agent.success_rate }}%;"></div>
+                            </div>
+                            <span class="stat-item-value" style="min-width: 50px;">{{ agent.success_rate }}%</span>
+                        </div>
+                    </div>
+                    {% endif %}
+
+                    {% if agent.error_count %}
+                    <div class="detail-row" style="margin-top: var(--spacing-md);">
+                        <span class="detail-label">Errors</span>
+                        <span class="stat-item-value" style="color: var(--status-blocked);">{{ agent.error_count }}</span>
+                    </div>
+                    {% endif %}
+                </div>
+            </div>
+            {% endfor %}
+        {% else %}
+            <div class="empty-state" style="grid-column: 1 / -1;">
+                <p>No agents found</p>
+                <small>Agent activity will appear here as tasks are delegated</small>
+            </div>
+        {% endif %}
+    </div>
+</div>
+
+<script>
+    // Convert timestamps after load
+    function convertTimestampsToLocal() {
+        const timestampElements = document.querySelectorAll('[data-utc-time]');
+        timestampElements.forEach(element => {
+            const utcTime = element.getAttribute('data-utc-time');
+            if (utcTime) {
+                try {
+                    const date = new Date(utcTime.replace(' ', 'T') + 'Z');
+                    const localTime = new Intl.DateTimeFormat('en-US', {
+                        year: 'numeric',
+                        month: '2-digit',
+                        day: '2-digit',
+                        hour: '2-digit',
+                        minute: '2-digit',
+                        second: '2-digit',
+                        hour12: false,
+                        timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
+                    }).format(date);
+                    element.textContent = localTime;
+                    element.setAttribute('title', `UTC: ${utcTime} | Local: ${localTime}`);
+                } catch (err) {
+                    console.warn('Failed to convert timestamp:', utcTime, err);
+                }
+            }
+        });
+    }
+
+    document.addEventListener('htmx:afterSettle', function(evt) {
+        if (evt.detail.target.id === 'content-area' &&
+            document.querySelector('.agents-view')) {
+            convertTimestampsToLocal();
+        }
+    });
+
+    if (document.querySelector('.agents-view')) {
+        convertTimestampsToLocal();
+    }
+</script>
+
+<style>
+    .agents-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+        gap: var(--spacing-lg);
+    }
+
+    .agent-card {
+        background: var(--bg-card);
+        border: 1px solid var(--border-subtle);
+        border-radius: 2px;
+        padding: var(--spacing-xl);
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-lg);
+        transition: all var(--transition-base);
+    }
+
+    .agent-card:hover {
+        border-color: var(--accent-lime);
+        box-shadow: var(--shadow-lg);
+        transform: translateY(-4px);
+    }
+
+    .agent-header {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-lg);
+        padding-bottom: var(--spacing-lg);
+        border-bottom: 1px solid var(--border-subtle);
+    }
+
+    .agent-icon {
+        width: 56px;
+        height: 56px;
+        border-radius: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.8rem;
+        font-weight: 700;
+        flex-shrink: 0;
+    }
+
+    .agent-icon.claude {
+        background: rgba(139, 92, 246, 0.2);
+        color: var(--agent-claude);
+    }
+
+    .agent-icon.gemini {
+        background: rgba(59, 130, 246, 0.2);
+        color: var(--agent-gemini);
+    }
+
+    .agent-icon.copilot {
+        background: rgba(107, 114, 128, 0.2);
+        color: var(--agent-copilot);
+    }
+
+    .agent-icon.openai {
+        background: rgba(16, 185, 129, 0.2);
+        color: var(--agent-openai);
+    }
+
+    .agent-name {
+        color: var(--text-primary);
+        font-size: 1.15rem;
+        font-weight: 700;
+        margin: 0;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+
+    .agent-status {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--spacing-sm);
+        color: var(--status-success);
+        font-size: 0.85rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+
+    .agent-status.idle {
+        color: var(--text-muted);
+    }
+
+    .status-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: currentColor;
+        animation: pulse-dot 2s infinite;
+    }
+
+    @keyframes pulse-dot {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.5; }
+    }
+
+    .agent-stats {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: var(--spacing-md);
+    }
+
+    .stat-item {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-xs);
+    }
+
+    .stat-item-label {
+        font-size: 0.75rem;
+        color: var(--text-muted);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+
+    .stat-item-value {
+        font-size: 1.4rem;
+        color: var(--accent-lime);
+        font-weight: 700;
+        font-family: 'JetBrains Mono', monospace;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .agent-details {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-md);
+    }
+
+    .detail-row {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-xs);
+    }
+
+    .detail-label {
+        font-size: 0.75rem;
+        color: var(--text-muted);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+
+    .detail-value {
+        color: var(--text-secondary);
+        font-family: 'Courier New', monospace;
+        word-break: break-all;
+    }
+
+    .empty-state {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 300px;
+        color: var(--text-muted);
+        text-align: center;
+        background: var(--bg-card);
+        border: 1px solid var(--border-subtle);
+        border-radius: 2px;
+    }
+
+    .empty-state p {
+        font-size: 1.1rem;
+        margin-bottom: var(--spacing-md);
+    }
+
+    .empty-state small {
+        color: var(--text-secondary);
+    }
+
+    @media (max-width: 1024px) {
+        .agents-grid {
+            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+        }
+    }
+
+    @media (max-width: 768px) {
+        .agents-grid {
+            grid-template-columns: 1fr;
+        }
+    }
+</style>