htmlgraph 0.24.2__py3-none-any.whl → 0.25.0__py3-none-any.whl

htmlgraph/api/templates/partials/spawners.html

@@ -0,0 +1,375 @@
+<div class="spawners-view">
+    <h2>Spawner Activity Dashboard</h2>
+
+    <!-- Spawner Summary Cards -->
+    <div class="spawner-cards">
+        {% for spawner in spawner_stats %}
+        <div class="spawner-card spawner-{{ spawner.spawner_type|lower }}">
+            <h3>
+                {% if spawner.spawner_type == 'gemini' %}
+                    Google Gemini (FREE)
+                {% elif spawner.spawner_type == 'codex' %}
+                    OpenAI Codex (Paid)
+                {% elif spawner.spawner_type == 'copilot' %}
+                    GitHub Copilot (Subscription)
+                {% else %}
+                    {{ spawner.spawner_type|title }}
+                {% endif %}
+            </h3>
+            <div class="metrics">
+                <div class="metric">
+                    <span class="label">Delegations</span>
+                    <span class="value">{{ spawner.total_delegations }}</span>
+                </div>
+                <div class="metric">
+                    <span class="label">Success Rate</span>
+                    <span class="value">{{ spawner.success_rate or 0 }}%</span>
+                </div>
+                <div class="metric">
+                    <span class="label">Avg Duration</span>
+                    <span class="value">{{ spawner.avg_duration or 0 }}s</span>
+                </div>
+                <div class="metric">
+                    <span class="label">Total Tokens</span>
+                    <span class="value">{{ spawner.total_tokens or 0 }}</span>
+                </div>
+                <div class="metric">
+                    <span class="label">Total Cost</span>
+                    <span class="value">${{ spawner.total_cost or 0 }}</span>
+                </div>
+            </div>
+        </div>
+        {% endfor %}
+        {% if not spawner_stats %}
+        <div class="empty-state-card">
+            <p>No spawner activity yet</p>
+            <small>Spawner delegations will appear here as AI agents delegate work</small>
+        </div>
+        {% endif %}
+    </div>
+
+    <!-- Recent Spawner Activities -->
+    <div class="recent-activities">
+        <h3>Recent Spawner Activities</h3>
+        {% if recent_activities %}
+        <table class="spawner-table">
+            <thead>
+                <tr>
+                    <th>Timestamp</th>
+                    <th>Orchestrator</th>
+                    <th>Spawner</th>
+                    <th>Spawned AI</th>
+                    <th>Task</th>
+                    <th>Status</th>
+                    <th>Duration</th>
+                    <th>Tokens</th>
+                    <th>Cost</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for activity in recent_activities %}
+                <tr class="activity-row spawner-{{ activity.spawner_type|lower }}">
+                    <td class="timestamp-cell">{{ activity.timestamp }}</td>
+                    <td class="agent-cell">{{ activity.orchestrator_agent }}</td>
+                    <td class="spawner-cell">
+                        <span class="spawner-badge spawner-{{ activity.spawner_type|lower }}">
+                            {{ activity.spawner_type|upper }}
+                        </span>
+                    </td>
+                    <td class="ai-badge">{{ activity.spawned_agent or 'unknown' }}</td>
+                    <td class="task-cell" title="{{ activity.task }}">
+                        {{ activity.task[:60] }}{% if activity.task and activity.task|length > 60 %}...{% endif %}
+                    </td>
+                    <td>
+                        <span class="status-badge status-{{ activity.status }}">
+                            {{ activity.status }}
+                        </span>
+                    </td>
+                    <td class="duration-cell">{{ activity.duration or 0 }}s</td>
+                    <td class="tokens-cell">{{ activity.tokens or 0 }}</td>
+                    <td class="cost-cell">${{ activity.cost_usd or 0 }}</td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+        {% else %}
+        <div class="empty-state">
+            <p>No spawner activities recorded yet</p>
+            <small>Activities will appear here when agents delegate work to spawned models</small>
+        </div>
+        {% endif %}
+    </div>
+</div>
+
+<style>
+.spawners-view {
+    padding: 1rem;
+}
+
+.spawner-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 1rem;
+    margin-bottom: 2rem;
+}
+
+.spawner-card {
+    padding: 1rem;
+    border-radius: 8px;
+    border: 1px solid;
+}
+
+.spawner-card.spawner-gemini {
+    background: #e8f5e9;
+    border-color: #4caf50;
+    color: #1b5e20;
+}
+
+.spawner-card.spawner-codex {
+    background: #e3f2fd;
+    border-color: #2196f3;
+    color: #0d47a1;
+}
+
+.spawner-card.spawner-copilot {
+    background: #f3e5f5;
+    border-color: #9c27b0;
+    color: #4a148c;
+}
+
+.spawner-card h3 {
+    margin: 0 0 1rem 0;
+    font-size: 1rem;
+    font-weight: 600;
+}
+
+.metrics {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.75rem;
+}
+
+.metric {
+    display: flex;
+    flex-direction: column;
+    padding: 0.5rem;
+    background: rgba(255, 255, 255, 0.6);
+    border-radius: 4px;
+}
+
+.metric .label {
+    font-size: 0.75rem;
+    opacity: 0.8;
+    margin-bottom: 0.25rem;
+}
+
+.metric .value {
+    font-size: 1.25rem;
+    font-weight: bold;
+}
+
+.empty-state-card {
+    padding: 2rem;
+    text-align: center;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 8px;
+    border: 1px dashed var(--border-subtle);
+}
+
+.empty-state-card p {
+    margin: 0 0 0.5rem 0;
+    font-weight: 500;
+}
+
+.empty-state-card small {
+    color: var(--text-muted);
+}
+
+.recent-activities {
+    margin-top: 2rem;
+}
+
+.recent-activities h3 {
+    margin: 0 0 1rem 0;
+    font-size: 1.1rem;
+}
+
+.spawner-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 1rem;
+    font-size: 0.85rem;
+    background: var(--bg-base);
+    border: 1px solid var(--border-subtle);
+    border-radius: 4px;
+    overflow: hidden;
+}
+
+.spawner-table thead {
+    background: var(--bg-darker);
+    border-bottom: 1px solid var(--border-subtle);
+}
+
+.spawner-table th {
+    padding: 0.75rem 0.5rem;
+    text-align: left;
+    font-weight: 600;
+    color: var(--text-secondary);
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.spawner-table td {
+    padding: 0.75rem 0.5rem;
+    border-bottom: 1px solid var(--border-subtle);
+}
+
+.spawner-table tbody tr:last-child td {
+    border-bottom: none;
+}
+
+.activity-row.spawner-gemini {
+    background: rgba(76, 175, 80, 0.05);
+}
+
+.activity-row.spawner-gemini:hover {
+    background: rgba(76, 175, 80, 0.1);
+}
+
+.activity-row.spawner-codex {
+    background: rgba(33, 150, 243, 0.05);
+}
+
+.activity-row.spawner-codex:hover {
+    background: rgba(33, 150, 243, 0.1);
+}
+
+.activity-row.spawner-copilot {
+    background: rgba(156, 39, 176, 0.05);
+}
+
+.activity-row.spawner-copilot:hover {
+    background: rgba(156, 39, 176, 0.1);
+}
+
+.timestamp-cell {
+    font-family: 'JetBrains Mono', 'SF Mono', 'Monaco', monospace;
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    white-space: nowrap;
+}
+
+.agent-cell {
+    font-weight: 500;
+}
+
+.spawner-cell {
+    text-align: center;
+}
+
+.ai-badge {
+    font-family: 'JetBrains Mono', 'SF Mono', 'Monaco', monospace;
+    font-size: 0.75rem;
+    background: rgba(255, 255, 255, 0.05);
+    padding: 0.25rem 0.4rem;
+    border-radius: 3px;
+    white-space: nowrap;
+}
+
+.task-cell {
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--text-secondary);
+}
+
+.status-badge {
+    display: inline-block;
+    padding: 0.25rem 0.5rem;
+    border-radius: 3px;
+    font-size: 0.7rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    white-space: nowrap;
+}
+
+.status-badge.status-completed,
+.status-badge.status-success {
+    background: rgba(34, 197, 94, 0.2);
+    color: #22c55e;
+}
+
+.status-badge.status-failed,
+.status-badge.status-error {
+    background: rgba(239, 68, 68, 0.2);
+    color: #ef4444;
+}
+
+.status-badge.status-pending {
+    background: rgba(100, 200, 255, 0.2);
+    color: #64c8ff;
+}
+
+.status-badge.status-in_progress {
+    background: rgba(251, 191, 36, 0.2);
+    color: #fbbf24;
+}
+
+.duration-cell {
+    text-align: right;
+    font-family: 'JetBrains Mono', 'SF Mono', 'Monaco', monospace;
+}
+
+.tokens-cell {
+    text-align: right;
+    font-family: 'JetBrains Mono', 'SF Mono', 'Monaco', monospace;
+}
+
+.cost-cell {
+    text-align: right;
+    font-family: 'JetBrains Mono', 'SF Mono', 'Monaco', monospace;
+    font-weight: 600;
+}
+
+.empty-state {
+    padding: 2rem;
+    text-align: center;
+    color: var(--text-muted);
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 4px;
+    border: 1px dashed var(--border-subtle);
+}
+
+.empty-state p {
+    margin: 0 0 0.5rem 0;
+}
+
+/* Responsive adjustments */
+@media (max-width: 1200px) {
+    .spawner-table {
+        font-size: 0.75rem;
+    }
+
+    .spawner-table th,
+    .spawner-table td {
+        padding: 0.5rem 0.35rem;
+    }
+
+    .task-cell {
+        max-width: 150px;
+    }
+}
+
+@media (max-width: 900px) {
+    .metrics {
+        grid-template-columns: 1fr;
+    }
+
+    .spawner-cards {
+        grid-template-columns: 1fr;
+    }
+}
+</style>