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

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

@@ -86,12 +86,14 @@
                         <!-- 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 %}
+                                {% for child in turn.children recursive %}
                                     <!-- Child Event Row -->
-                                    <div class="child-event-row" data-event-id="{{ child.event_id }}">
+                                    <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 %}└─{% else %}├─{% endif %}
+                                            {% if loop.last and not child.children %}└─{% else %}├─{% endif %}
                                         </span>
 
                                         <!-- Tool Name -->
@@ -107,6 +109,9 @@
                                           <!-- 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 }}">
@@ -116,9 +121,12 @@
                                               {% endif %}
                                           </span>
                                         {% else %}
-                                          <!-- Regular agent: just show agent name -->
+                                          <!-- 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 %}
 
@@ -132,6 +140,10 @@
                                             {{ child.timestamp }}
                                         </span>
                                     </div>
+                                    <!-- Recursively render nested children -->
+                                    {% if child.children %}
+                                        {{ loop(child.children) }}
+                                    {% endif %}
                                 {% endfor %}
                             {% else %}
                                 <div class="no-children-message">
@@ -300,7 +312,7 @@
     flex-direction: column;
     background: rgba(163, 230, 53, 0.02);
     border-top: 1px solid var(--border-subtle);
-    padding: 0.5rem 0rem;
+    padding: 0.5rem 1rem 0.5rem 2.5rem;  /* Indent children under parent prompt */
 }
 
 .turn-children.collapsed {
@@ -328,9 +340,9 @@
     font-size: 0.9rem;
     font-weight: bold;
     font-family: 'JetBrains Mono', 'SF Mono', 'Monaco', monospace;
-    white-space: pre;
+    white-space: nowrap;  /* Changed from 'pre' to collapse template whitespace */
     flex-shrink: 0;
-    min-width: 16px;
+    width: 24px;  /* Fixed width for consistent alignment */
 }
 
 /* Child Tool Name */
@@ -356,7 +368,9 @@
 
 /* Child Agent Badge */
 .child-agent-badge {
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
     padding: 0.1rem 0.35rem;
     font-size: 0.6rem;
     font-weight: 600;
@@ -368,6 +382,19 @@
     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);
@@ -526,6 +553,215 @@
         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>
@@ -567,4 +803,218 @@ function collapseAllConversationTurns() {
         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>

htmlgraph/dashboard.html

@@ -967,6 +967,20 @@
         .event-source-indicator.spike::before { background: #00C853; }
         .event-source-indicator.delegation::before { background: #FF9100; }
 
+        /* Model tracking badges - Display which AI model executed the event */
+        .badge.model {
+            padding: 0.25rem 0.5rem;
+            font-size: 0.55rem;
+            font-weight: 600;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.3rem;
+        }
+        .badge.model-haiku { background: #00BCD4; color: white; border-color: #00BCD4; }      /* Cyan for Haiku */
+        .badge.model-sonnet { background: #9C27B0; color: white; border-color: #9C27B0; }    /* Purple for Sonnet */
+        .badge.model-opus { background: #FFC107; color: #000; border-color: #FFC107; }       /* Amber/Gold for Opus */
+        .badge.model-default { background: #9E9E9E; color: white; border-color: #9E9E9E; }  /* Gray for unknown */
+
         .card-path {
             font-family: 'JetBrains Mono', monospace;
             font-size: 0.625rem;
@@ -5585,6 +5599,26 @@ ${node.ts ? node.ts.slice(0, 19).replace('T', ' ') : ''}`;
                     <ol class="activity-list" reversed>
                 `;
 
+                // Model name formatter - Extract short name from full model ID
+                function formatModelName(model) {
+                    if (!model) return null;
+                    const modelStr = String(model).toLowerCase();
+                    if (modelStr.includes('haiku')) return 'Haiku';
+                    if (modelStr.includes('sonnet')) return 'Sonnet 4.5';
+                    if (modelStr.includes('opus')) return 'Opus 4.5';
+                    return null; // Unknown model
+                }
+
+                // Determine model badge CSS class
+                function getModelBadgeClass(model) {
+                    if (!model) return 'model-default';
+                    const modelStr = String(model).toLowerCase();
+                    if (modelStr.includes('haiku')) return 'model-haiku';
+                    if (modelStr.includes('sonnet')) return 'model-sonnet';
+                    if (modelStr.includes('opus')) return 'model-opus';
+                    return 'model-default';
+                }
+
                 // Render helper function
                 function renderEvent(item, isChild = false, depth = 0) {
                     const ts = item.timestamp ? new Date(item.timestamp).toLocaleString() : 'Unknown';
@@ -5623,6 +5657,12 @@ ${node.ts ? node.ts.slice(0, 19).replace('T', ' ') : ''}`;
                     const agentBadge = agentClass ? `<span class="badge agent ${agentClass}">${agentId}</span>` :
                                                    `<span class="badge">${agentId}</span>`;
 
+                    // Model badge - display which AI model executed the event
+                    const model = item.model || null;
+                    const modelName = formatModelName(model);
+                    const modelBadgeClass = getModelBadgeClass(model);
+                    const modelBadge = modelName ? `<span class="badge model ${modelBadgeClass}">${modelName}</span>` : '';
+
                     // Add expand icon for parents
                     const expandIcon = hasChildren ? '<span class="expand-icon"></span>' : '';
                     const indent = isChild ? 'padding-left: ' + (1.5 + depth * 1.5) + 'rem;' : '';
@@ -5638,6 +5678,7 @@ ${node.ts ? node.ts.slice(0, 19).replace('T', ' ') : ''}`;
                                 ${sourceBadge}
                                 <span class="activity-tool">${tool}</span>
                                 ${agentBadge}
+                                ${modelBadge}
                             </div>
                             <div class="activity-content">${escapeHtml(content.substring(0, 200))}${content.length > 200 ? '...' : ''}</div>
                         </li>