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

htmlgraph/api/templates/partials/activity-feed.html

@@ -0,0 +1,1020 @@
+<!-- Grouped Activity Feed - Display events organized by conversation turn (user prompt) -->
+<div class="view-container activity-feed-view">
+    <div class="view-header">
+        <h2>Agent Activity Feed</h2>
+        <div class="view-info">
+            <small>Events grouped by conversation turn. Click to expand/collapse child events.</small>
+        </div>
+        <div class="view-filters">
+            <div class="trace-controls">
+                <button type="button" class="btn-small" onclick="expandAllConversationTurns()" title="Expand all conversation turns">Expand All</button>
+                <button type="button" class="btn-small" onclick="collapseAllConversationTurns()" title="Collapse all conversation turns">Collapse All</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Spawner Activity Filter -->
+    <div class="spawner-filter">
+        <label for="agent-type-filter">Filter:</label>
+        <select id="agent-type-filter" onchange="filterByAgentType(this.value)">
+            <option value="all">All Activity</option>
+            <option value="direct">Direct Actions Only</option>
+            <option value="spawner">Spawner Delegations Only</option>
+            <optgroup label="Specific Spawners">
+                <option value="gemini">Gemini (FREE)</option>
+                <option value="codex">Codex (Paid)</option>
+                <option value="copilot">Copilot (GitHub)</option>
+            </optgroup>
+        </select>
+    </div>
+
+    <div class="conversation-feed">
+        {% if conversation_turns %}
+            <div class="conversation-turns-list">
+                {% for turn in conversation_turns %}
+                    <!-- Conversation Turn Container -->
+                    <div class="conversation-turn"
+                         data-turn-id="{{ turn.userQuery.event_id }}"
+                         data-spawner-type="{% if turn.has_spawner %}spawner{% else %}direct{% endif %}"
+                         data-agent="{{ turn.userQuery.agent_id }}">
+                        <!-- User Query Parent Row (Clickable) -->
+                        <div class="userquery-parent"
+                             onclick="toggleConversationTurn('{{ turn.userQuery.event_id }}')"
+                             data-turn-id="{{ turn.userQuery.event_id }}">
+
+                            <!-- Expand/Collapse Toggle -->
+                            <span class="expand-toggle-turn" id="toggle-{{ turn.userQuery.event_id }}">▶</span>
+
+                            <!-- User Prompt Text -->
+                            <div class="prompt-section">
+                                <span class="prompt-text" title="{{ turn.userQuery.prompt }}">
+                                    {{ turn.userQuery.prompt[:100] }}{% if turn.userQuery.prompt|length > 100 %}...{% endif %}
+                                </span>
+                            </div>
+
+                            <!-- Stats Badges -->
+                            <div class="turn-stats">
+                                {% if turn.stats.tool_count > 0 %}
+                                    <span class="stat-badge tool-count" title="Tool calls">
+                                        {{ turn.stats.tool_count }}
+                                    </span>
+                                {% endif %}
+
+                                <span class="stat-badge duration" title="Total duration">
+                                    {{ "%.2f"|format(turn.stats.total_duration) }}s
+                                </span>
+
+                                {% if turn.stats.success_count > 0 %}
+                                    <span class="stat-badge success" title="Successful operations">
+                                        ✓ {{ turn.stats.success_count }}
+                                    </span>
+                                {% endif %}
+
+                                {% if turn.stats.error_count > 0 %}
+                                    <span class="stat-badge error" title="Errors">
+                                        ✗ {{ turn.stats.error_count }}
+                                    </span>
+                                {% endif %}
+                            </div>
+
+                            <!-- Timestamp -->
+                            <div class="turn-timestamp">
+                                {{ turn.userQuery.timestamp }}
+                            </div>
+                        </div>
+
+                        <!-- Child Events Container (Hidden by default) -->
+                        <div class="turn-children collapsed" id="children-{{ turn.userQuery.event_id }}">
+                            {% if turn.children %}
+                                {% for child in turn.children recursive %}
+                                    <!-- Child Event Row -->
+                                    <div class="child-event-row depth-{{ child.depth|default(0) }}"
+                                         data-event-id="{{ child.event_id }}"
+                                         style="margin-left: {{ (child.depth|default(0)) * 20 }}px;">
+                                        <!-- Tree Connector -->
+                                        <span class="tree-connector">
+                                            {% if loop.last and not child.children %}└─{% else %}├─{% endif %}
+                                        </span>
+
+                                        <!-- Tool Name -->
+                                        <span class="child-tool-name">{{ child.tool_name }}</span>
+
+                                        <!-- Summary/Input -->
+                                        <span class="child-summary" title="{{ child.summary }}">
+                                            {{ child.summary[:80] }}{% if child.summary|length > 80 %}...{% endif %}
+                                        </span>
+
+                                        <!-- Agent Badge with Spawner Support -->
+                                        {% if child.spawner_type %}
+                                          <!-- Spawner delegation: show orchestrator → spawned AI -->
+                                          <span class="child-agent-badge agent-{{ child.agent|lower|replace(' ', '-') }}">
+                                              {{ child.agent }}
+                                              {% if child.model %}
+                                                <span class="model-indicator">{{ child.model }}</span>
+                                              {% endif %}
+                                          </span>
+                                          <span class="delegation-arrow">→</span>
+                                          <span class="spawner-badge spawner-{{ child.spawner_type|lower }}">
+                                              {{ child.spawned_agent or child.subagent_type or child.spawner_type }}
+                                              {% if child.cost_usd %}
+                                                <span class="cost-badge">${{ "%.2f"|format(child.cost_usd) }}</span>
+                                              {% endif %}
+                                          </span>
+                                        {% else %}
+                                          <!-- Regular agent: just show agent name + model if available -->
+                                          <span class="child-agent-badge agent-{{ child.agent|lower|replace(' ', '-') }}">
+                                              {{ child.agent }}
+                                              {% if child.model %}
+                                                <span class="model-indicator">{{ child.model }}</span>
+                                              {% endif %}
+                                          </span>
+                                        {% endif %}
+
+                                        <!-- Duration -->
+                                        <span class="child-duration">
+                                            {{ "%.2f"|format(child.duration_seconds) }}s
+                                        </span>
+
+                                        <!-- Timestamp -->
+                                        <span class="child-timestamp">
+                                            {{ child.timestamp }}
+                                        </span>
+                                    </div>
+                                    <!-- Recursively render nested children -->
+                                    {% if child.children %}
+                                        {{ loop(child.children) }}
+                                    {% endif %}
+                                {% endfor %}
+                            {% else %}
+                                <div class="no-children-message">
+                                    <span class="tree-connector">└─</span>
+                                    <span class="text-muted">No child events</span>
+                                </div>
+                            {% endif %}
+                        </div>
+                    </div>
+                {% endfor %}
+            </div>
+        {% else %}
+            <div class="empty-state">
+                <p>No conversation turns found</p>
+                <small>Agent activity will appear here as tasks are executed</small>
+            </div>
+        {% endif %}
+    </div>
+
+    <!-- Auto-refresh indicator -->
+    <div class="auto-refresh-indicator">
+        <span class="refresh-dot"></span>
+        Live updates enabled (via WebSocket)
+    </div>
+</div>
+
+<style>
+/* ============================================
+   Grouped Activity Feed - Conversation Turns
+   ============================================ */
+
+.conversation-feed {
+    display: flex;
+    flex-direction: column;
+    font-family: 'JetBrains Mono', 'SF Mono', 'Monaco', monospace;
+    font-size: 0.8rem;
+}
+
+/* Conversation Turns List Container */
+.conversation-turns-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 0.5rem;
+}
+
+/* Individual Conversation Turn */
+.conversation-turn {
+    border-radius: 4px;
+    overflow: hidden;
+    background: var(--bg-base);
+    border: 1px solid var(--border-subtle);
+}
+
+/* User Query Parent Row - Clickable Header */
+.userquery-parent {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 1rem;
+    background: rgba(200, 255, 0, 0.08);
+    border-left: 3px solid var(--accent, #c8ff00);
+    cursor: pointer;
+    transition: all 0.15s ease;
+    user-select: none;
+}
+
+.userquery-parent:hover {
+    background: rgba(200, 255, 0, 0.12);
+    border-left-color: #a3e635;
+}
+
+/* Expand/Collapse Toggle */
+.expand-toggle-turn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    font-size: 0.8rem;
+    color: var(--accent-lime, #a3e635);
+    transition: transform 0.2s ease;
+    flex-shrink: 0;
+}
+
+.expand-toggle-turn.expanded {
+    transform: rotate(90deg);
+}
+
+/* Prompt Section */
+.prompt-section {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex: 1;
+    min-width: 0;
+}
+
+.prompt-icon {
+    font-size: 1.1rem;
+    flex-shrink: 0;
+}
+
+.prompt-text {
+    color: var(--text-primary);
+    font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* Turn Stats Container */
+.turn-stats {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    flex-shrink: 0;
+}
+
+/* Stat Badges */
+.stat-badge {
+    display: inline-block;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.65rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    border-radius: 3px;
+    background: rgba(255, 255, 255, 0.1);
+    color: var(--text-secondary);
+    white-space: nowrap;
+}
+
+.stat-badge.tool-count {
+    background: rgba(163, 230, 53, 0.2);
+    color: #a3e635;
+}
+
+.stat-badge.duration {
+    background: rgba(100, 200, 255, 0.2);
+    color: #64c8ff;
+}
+
+.stat-badge.success {
+    background: rgba(34, 197, 94, 0.2);
+    color: #22c55e;
+}
+
+.stat-badge.error {
+    background: rgba(239, 68, 68, 0.2);
+    color: #ef4444;
+}
+
+/* Turn Timestamp */
+.turn-timestamp {
+    font-size: 0.65rem;
+    color: var(--text-muted);
+    flex-shrink: 0;
+    min-width: 140px;
+    text-align: right;
+}
+
+/* Child Events Container */
+.turn-children {
+    display: flex;
+    flex-direction: column;
+    background: rgba(163, 230, 53, 0.02);
+    border-top: 1px solid var(--border-subtle);
+    padding: 0.5rem 1rem 0.5rem 2.5rem;  /* Indent children under parent prompt */
+}
+
+.turn-children.collapsed {
+    display: none;
+}
+
+/* Child Event Row */
+.child-event-row {
+    display: flex;
+    align-items: center;
+    gap: 0.2rem;
+    padding: 0.5rem 0;
+    border-bottom: 1px solid rgba(163, 230, 53, 0.1);
+    font-size: 0.75rem;
+    margin-left: 0;
+}
+
+.child-event-row:last-child {
+    border-bottom: none;
+}
+
+/* Tree Connector */
+.tree-connector {
+    color: var(--accent-lime, #a3e635);
+    font-size: 0.9rem;
+    font-weight: bold;
+    font-family: 'JetBrains Mono', 'SF Mono', 'Monaco', monospace;
+    white-space: nowrap;  /* Changed from 'pre' to collapse template whitespace */
+    flex-shrink: 0;
+    width: 24px;  /* Fixed width for consistent alignment */
+}
+
+/* Child Tool Name */
+.child-tool-name {
+    display: inline-block;
+    padding: 0.1rem 0.3rem;
+    background: rgba(255, 255, 255, 0.05);
+    color: var(--text-primary);
+    border-radius: 2px;
+    font-weight: 500;
+    flex-shrink: 0;
+}
+
+/* Child Summary */
+.child-summary {
+    color: var(--text-secondary);
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* Child Agent Badge */
+.child-agent-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.1rem 0.35rem;
+    font-size: 0.6rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    border-radius: 2px;
+    background: rgba(255, 255, 255, 0.08);
+    color: var(--text-secondary);
+    flex-shrink: 0;
+}
+
+/* Model Indicator Badge */
+.model-indicator {
+    display: inline-block;
+    padding: 0.05rem 0.2rem;
+    font-size: 0.55rem;
+    background: rgba(100, 200, 255, 0.15);
+    color: #64c8ff;
+    border-radius: 1px;
+    font-weight: 700;
+    letter-spacing: 0.02em;
+    text-transform: capitalize;
+}
+
+.child-agent-badge.agent-claude-code,
+.child-agent-badge.agent-claude {
+    background: rgba(200, 255, 0, 0.15);
+    color: #c8ff00;
+}
+
+.child-agent-badge.agent-gemini,
+.child-agent-badge.agent-gemini-2-0-flash-exp {
+    background: rgba(74, 222, 128, 0.15);
+    color: #4ade80;
+}
+
+/* Child Duration */
+.child-duration {
+    display: inline-block;
+    padding: 0.1rem 0.3rem;
+    background: rgba(100, 200, 255, 0.1);
+    color: #64c8ff;
+    border-radius: 2px;
+    font-size: 0.65rem;
+    flex-shrink: 0;
+}
+
+/* Child Timestamp */
+.child-timestamp {
+    color: var(--text-muted);
+    font-size: 0.65rem;
+    flex-shrink: 0;
+    min-width: 140px;
+    text-align: right;
+}
+
+/* No Children Message */
+.no-children-message {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.6rem 0;
+    color: var(--text-muted);
+    font-size: 0.75rem;
+}
+
+/* ============================================
+   Control Buttons
+   ============================================ */
+
+.trace-controls {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.btn-small {
+    padding: 0.3rem 0.6rem;
+    font-size: 0.65rem;
+    background: var(--bg-darker);
+    border: 1px solid var(--border-subtle);
+    color: var(--text-secondary);
+    cursor: pointer;
+    border-radius: 2px;
+    transition: all 0.15s ease;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    font-family: inherit;
+}
+
+.btn-small:hover {
+    background: rgba(163, 230, 53, 0.1);
+    border-color: var(--accent-lime, #a3e635);
+    color: var(--accent-lime, #a3e635);
+}
+
+/* ============================================
+   Empty State
+   ============================================ */
+
+.empty-state {
+    padding: 3rem;
+    text-align: center;
+    color: var(--text-muted);
+}
+
+.empty-state p {
+    font-size: 1rem;
+    margin-bottom: 0.5rem;
+}
+
+/* ============================================
+   Auto-refresh Indicator
+   ============================================ */
+
+.auto-refresh-indicator {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    font-size: 0.65rem;
+    color: var(--text-muted);
+    background: var(--bg-darker);
+    border-top: 1px solid var(--border-subtle);
+}
+
+.refresh-dot {
+    width: 6px;
+    height: 6px;
+    background: var(--accent-lime, #a3e635);
+    border-radius: 50%;
+    animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.4; }
+}
+
+/* ============================================
+   Responsive Adjustments
+   ============================================ */
+
+@media (max-width: 1200px) {
+    .turn-timestamp,
+    .child-timestamp {
+        display: none;
+    }
+}
+
+@media (max-width: 900px) {
+    .turn-stats {
+        flex-wrap: wrap;
+    }
+
+    .child-summary {
+        max-width: 150px;
+    }
+}
+
+@media (max-width: 700px) {
+    .userquery-parent {
+        flex-wrap: wrap;
+        gap: 0.5rem;
+    }
+
+    .prompt-section {
+        width: 100%;
+        order: 2;
+    }
+
+    .turn-stats {
+        order: 3;
+    }
+
+    .child-event-row {
+        flex-wrap: wrap;
+    }
+
+    .child-summary {
+        width: 100%;
+    }
+}
+
+/* ============================================
+   Live Spawner Indicator Styles
+   ============================================ */
+
+.live-spawner-indicator {
+    display: none;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem 1rem;
+    margin: 0.5rem;
+    background: linear-gradient(135deg, rgba(163, 230, 53, 0.1) 0%, rgba(100, 200, 255, 0.1) 100%);
+    border: 1px solid rgba(163, 230, 53, 0.3);
+    border-radius: 6px;
+    font-size: 0.8rem;
+    transition: all 0.3s ease;
+    overflow: hidden;
+}
+
+.live-spawner-indicator.active {
+    display: flex;
+    border-color: rgba(163, 230, 53, 0.6);
+    box-shadow: 0 0 20px rgba(163, 230, 53, 0.2);
+}
+
+.live-spawner-indicator.completed {
+    display: flex;
+    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.05) 100%);
+    border-color: rgba(34, 197, 94, 0.5);
+}
+
+.live-spawner-indicator.failed {
+    display: flex;
+    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.05) 100%);
+    border-color: rgba(239, 68, 68, 0.5);
+}
+
+.live-spawner-indicator.fade-out {
+    opacity: 0;
+    transform: translateY(-10px);
+}
+
+/* Spawner Icons */
+.live-spawner-icon {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    position: relative;
+}
+
+.live-spawner-icon::before {
+    content: '';
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+}
+
+.live-spawner-icon.spawner-gemini {
+    background: rgba(74, 222, 128, 0.2);
+}
+.live-spawner-icon.spawner-gemini::before {
+    background: #4ade80;
+}
+
+.live-spawner-icon.spawner-codex {
+    background: rgba(100, 200, 255, 0.2);
+}
+.live-spawner-icon.spawner-codex::before {
+    background: #64c8ff;
+}
+
+.live-spawner-icon.spawner-copilot {
+    background: rgba(168, 85, 247, 0.2);
+}
+.live-spawner-icon.spawner-copilot::before {
+    background: #a855f7;
+}
+
+/* Pulsing animation for active spawners */
+.live-spawner-icon.pulsing::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    border: 2px solid currentColor;
+    animation: spawner-pulse 1.5s ease-out infinite;
+}
+
+.live-spawner-icon.spawner-gemini.pulsing::after { border-color: #4ade80; }
+.live-spawner-icon.spawner-codex.pulsing::after { border-color: #64c8ff; }
+.live-spawner-icon.spawner-copilot.pulsing::after { border-color: #a855f7; }
+
+@keyframes spawner-pulse {
+    0% {
+        transform: scale(1);
+        opacity: 1;
+    }
+    100% {
+        transform: scale(2);
+        opacity: 0;
+    }
+}
+
+/* Streaming animation */
+.live-spawner-icon.streaming::after {
+    content: '';
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    background: currentColor;
+    border-radius: 50%;
+    animation: spawner-stream 0.6s ease-in-out infinite;
+}
+
+@keyframes spawner-stream {
+    0%, 100% { opacity: 0.3; transform: translateX(-8px); }
+    50% { opacity: 1; transform: translateX(8px); }
+}
+
+/* Done state */
+.live-spawner-icon.done::after {
+    content: '';
+    position: absolute;
+    width: 8px;
+    height: 4px;
+    border-left: 2px solid #22c55e;
+    border-bottom: 2px solid #22c55e;
+    transform: rotate(-45deg);
+    top: 8px;
+}
+
+/* Error state */
+.live-spawner-icon.error::before {
+    background: #ef4444;
+}
+.live-spawner-icon.error::after {
+    content: '!';
+    position: absolute;
+    color: white;
+    font-size: 10px;
+    font-weight: bold;
+}
+
+/* Text elements */
+.live-spawner-text {
+    color: var(--text-primary);
+    white-space: nowrap;
+}
+
+.live-spawner-text strong {
+    color: var(--accent-lime, #a3e635);
+    letter-spacing: 0.05em;
+}
+
+.live-spawner-prompt,
+.live-spawner-message {
+    flex: 1;
+    color: var(--text-secondary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-style: italic;
+    opacity: 0.8;
+}
+
+.live-spawner-progress {
+    padding: 0.15rem 0.4rem;
+    background: rgba(100, 200, 255, 0.2);
+    color: #64c8ff;
+    border-radius: 3px;
+    font-weight: 600;
+    font-size: 0.7rem;
+}
+
+.live-spawner-duration {
+    padding: 0.15rem 0.4rem;
+    background: rgba(34, 197, 94, 0.2);
+    color: #22c55e;
+    border-radius: 3px;
+    font-weight: 600;
+    font-size: 0.7rem;
+}
+
+.live-spawner-tokens {
+    padding: 0.15rem 0.4rem;
+    background: rgba(163, 230, 53, 0.2);
+    color: #a3e635;
+    border-radius: 3px;
+    font-size: 0.65rem;
+}
+
+.live-spawner-details {
+    color: var(--text-muted);
+    font-size: 0.7rem;
+}
+
+.live-spawner-error {
+    color: #ef4444;
+    font-size: 0.7rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 300px;
+}
+</style>
+
+<script>
+// JavaScript functions for expand/collapse functionality
+// Called from onclick handlers in the template
+
+function toggleConversationTurn(turnId) {
+    const childrenContainer = document.getElementById(`children-${turnId}`);
+    const toggleButton = document.getElementById(`toggle-${turnId}`);
+
+    if (childrenContainer) {
+        childrenContainer.classList.toggle('collapsed');
+        if (toggleButton) {
+            toggleButton.classList.toggle('expanded');
+        }
+    }
+}
+
+function expandAllConversationTurns() {
+    // Get all child containers and remove the 'collapsed' class
+    document.querySelectorAll('.turn-children').forEach(container => {
+        container.classList.remove('collapsed');
+    });
+
+    // Rotate all toggle buttons
+    document.querySelectorAll('.expand-toggle-turn').forEach(toggle => {
+        toggle.classList.add('expanded');
+    });
+}
+
+function collapseAllConversationTurns() {
+    // Get all child containers and add the 'collapsed' class
+    document.querySelectorAll('.turn-children').forEach(container => {
+        container.classList.add('collapsed');
+    });
+
+    // Rotate all toggle buttons back
+    document.querySelectorAll('.expand-toggle-turn').forEach(toggle => {
+        toggle.classList.remove('expanded');
+    });
+}
+
+// ============================================
+// Live Spawner Event Handling via WebSocket
+// ============================================
+
+// Track active spawner sessions by parent_event_id
+const activeSpawners = new Map();
+
+/**
+ * Handle incoming spawner events from WebSocket
+ * Called from the main WebSocket handler in dashboard
+ */
+function handleSpawnerEvent(event) {
+    const { event_type, spawner_type, parent_event_id, data, timestamp } = event;
+
+    console.log('[SpawnerEvent]', event_type, spawner_type, data);
+
+    switch (event_type) {
+        case 'spawner_start':
+            showSpawnerStarted(spawner_type, parent_event_id, data, timestamp);
+            break;
+        case 'spawner_phase':
+            updateSpawnerPhase(spawner_type, parent_event_id, data);
+            break;
+        case 'spawner_complete':
+            showSpawnerCompleted(spawner_type, parent_event_id, data, timestamp);
+            break;
+        case 'spawner_tool_use':
+            showSpawnerToolUse(spawner_type, parent_event_id, data);
+            break;
+        case 'spawner_message':
+            showSpawnerMessage(spawner_type, parent_event_id, data);
+            break;
+        default:
+            console.log('[SpawnerEvent] Unknown event type:', event_type);
+    }
+}
+
+/**
+ * Show spawner started indicator
+ */
+function showSpawnerStarted(spawnerType, parentEventId, data, timestamp) {
+    // Store in active spawners
+    activeSpawners.set(parentEventId || `spawner-${Date.now()}`, {
+        spawnerType,
+        startTime: new Date(timestamp),
+        phase: 'initializing',
+        data
+    });
+
+    // Create or update the live activity indicator
+    const indicator = getOrCreateLiveIndicator();
+    indicator.innerHTML = `
+        <span class="live-spawner-icon spawner-${spawnerType}"></span>
+        <span class="live-spawner-text">
+            <strong>${spawnerType.toUpperCase()}</strong> starting...
+        </span>
+        <span class="live-spawner-prompt">${(data.prompt_preview || '').substring(0, 60)}...</span>
+    `;
+    indicator.classList.add('active');
+    indicator.classList.remove('completed', 'failed');
+}
+
+/**
+ * Update spawner phase/progress
+ */
+function updateSpawnerPhase(spawnerType, parentEventId, data) {
+    const indicator = getOrCreateLiveIndicator();
+    const phaseText = data.phase || 'processing';
+    const progress = data.progress;
+
+    let progressHtml = '';
+    if (progress !== undefined && progress !== null) {
+        progressHtml = `<span class="live-spawner-progress">${progress}%</span>`;
+    }
+
+    indicator.innerHTML = `
+        <span class="live-spawner-icon spawner-${spawnerType} pulsing"></span>
+        <span class="live-spawner-text">
+            <strong>${spawnerType.toUpperCase()}</strong> ${phaseText}
+        </span>
+        ${progressHtml}
+        ${data.details ? `<span class="live-spawner-details">${data.details}</span>` : ''}
+    `;
+}
+
+/**
+ * Show spawner completed
+ */
+function showSpawnerCompleted(spawnerType, parentEventId, data, timestamp) {
+    const indicator = getOrCreateLiveIndicator();
+    const success = data.success;
+    const duration = data.duration_seconds ? `${data.duration_seconds.toFixed(1)}s` : '';
+
+    indicator.classList.remove('active');
+    indicator.classList.add(success ? 'completed' : 'failed');
+
+    if (success) {
+        indicator.innerHTML = `
+            <span class="live-spawner-icon spawner-${spawnerType} done"></span>
+            <span class="live-spawner-text">
+                <strong>${spawnerType.toUpperCase()}</strong> completed
+            </span>
+            <span class="live-spawner-duration">${duration}</span>
+            ${data.tokens_used ? `<span class="live-spawner-tokens">${data.tokens_used} tokens</span>` : ''}
+        `;
+    } else {
+        indicator.innerHTML = `
+            <span class="live-spawner-icon spawner-${spawnerType} error"></span>
+            <span class="live-spawner-text">
+                <strong>${spawnerType.toUpperCase()}</strong> failed
+            </span>
+            <span class="live-spawner-error">${data.error || 'Unknown error'}</span>
+        `;
+    }
+
+    // Remove from active spawners
+    if (parentEventId) {
+        activeSpawners.delete(parentEventId);
+    }
+
+    // Auto-hide after 5 seconds
+    setTimeout(() => {
+        if (!indicator.classList.contains('active')) {
+            indicator.classList.add('fade-out');
+            setTimeout(() => {
+                indicator.classList.remove('fade-out', 'completed', 'failed');
+                indicator.innerHTML = '';
+            }, 500);
+        }
+    }, 5000);
+}
+
+/**
+ * Show spawner tool use (brief flash)
+ */
+function showSpawnerToolUse(spawnerType, parentEventId, data) {
+    const indicator = getOrCreateLiveIndicator();
+    const toolName = data.tool_name || 'unknown';
+
+    // Quick update showing tool use
+    const currentHtml = indicator.innerHTML;
+    indicator.innerHTML = `
+        <span class="live-spawner-icon spawner-${spawnerType} tool-use"></span>
+        <span class="live-spawner-text">
+            <strong>${spawnerType.toUpperCase()}</strong> using ${toolName}
+        </span>
+    `;
+
+    // Revert after brief display (if still active)
+    setTimeout(() => {
+        if (activeSpawners.has(parentEventId)) {
+            // Still active, show executing state
+            indicator.innerHTML = `
+                <span class="live-spawner-icon spawner-${spawnerType} pulsing"></span>
+                <span class="live-spawner-text">
+                    <strong>${spawnerType.toUpperCase()}</strong> executing
+                </span>
+            `;
+        }
+    }, 1500);
+}
+
+/**
+ * Show spawner message (streaming text)
+ */
+function showSpawnerMessage(spawnerType, parentEventId, data) {
+    // Just update the indicator with message preview
+    const indicator = getOrCreateLiveIndicator();
+    const preview = (data.message_preview || '').substring(0, 80);
+
+    indicator.innerHTML = `
+        <span class="live-spawner-icon spawner-${spawnerType} streaming"></span>
+        <span class="live-spawner-text">
+            <strong>${spawnerType.toUpperCase()}</strong> responding
+        </span>
+        <span class="live-spawner-message">${preview}...</span>
+    `;
+}
+
+/**
+ * Get or create the live activity indicator element
+ */
+function getOrCreateLiveIndicator() {
+    let indicator = document.getElementById('live-spawner-indicator');
+    if (!indicator) {
+        indicator = document.createElement('div');
+        indicator.id = 'live-spawner-indicator';
+        indicator.className = 'live-spawner-indicator';
+
+        // Insert at top of conversation feed
+        const feed = document.querySelector('.conversation-feed');
+        if (feed) {
+            feed.insertBefore(indicator, feed.firstChild);
+        } else {
+            // Fallback: insert in activity feed view
+            const view = document.querySelector('.activity-feed-view');
+            if (view) {
+                const header = view.querySelector('.view-header');
+                if (header && header.nextSibling) {
+                    view.insertBefore(indicator, header.nextSibling);
+                } else {
+                    view.appendChild(indicator);
+                }
+            }
+        }
+    }
+    return indicator;
+}
+
+// Export for use by main WebSocket handler
+if (typeof window !== 'undefined') {
+    window.handleSpawnerEvent = handleSpawnerEvent;
+}
+</script>