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

htmlgraph/api/templates/partials/event-traces.html

@@ -0,0 +1,373 @@
+<!-- Event Traces - Parent-Child Event Nesting Visualization -->
+
+<div class="event-traces-container">
+    <div class="traces-header">
+        <h2>Task Delegation Traces</h2>
+        <p class="subtitle">Parent-child event relationships showing delegation hierarchy</p>
+    </div>
+
+    {% if hierarchical_events %}
+    <div class="traces-list">
+        {% for trace in hierarchical_events %}
+        <div class="event-trace">
+            <!-- Parent Event (Task Delegation) -->
+            <div class="trace-parent">
+                <div class="event-header">
+                    <span class="event-badge parent-badge">TASK</span>
+                    <span class="agent-name">{{ trace.parent_event_id }}</span>
+                    <span class="subagent-type" title="Subagent Type">
+                        {{ trace.subagent_type or "general-purpose" }}
+                    </span>
+                    <span class="event-status" :class="'status-' + trace.status.lower()">
+                        {{ trace.status.upper() }}
+                    </span>
+                    <span class="timestamp">{{ trace.started_at }}</span>
+                </div>
+
+                <div class="event-metadata">
+                    {% if trace.duration_seconds %}
+                    <span class="metadata-item">
+                        <strong>Duration:</strong> {{ "%.1f" % trace.duration_seconds }}s
+                    </span>
+                    {% endif %}
+                    <span class="metadata-item">
+                        <strong>Child Events:</strong> {{ trace.child_spike_count or 0 }}
+                    </span>
+                </div>
+            </div>
+
+            <!-- Child Events (Spikes Created by Subagent) -->
+            {% if trace.child_events or trace.child_spikes %}
+            <div class="trace-children">
+                <div class="children-header">
+                    <span class="connector">├─</span>
+                    <span class="label">Subagent Activity</span>
+                    <span class="count">{{ trace.child_events|length + (trace.child_spikes|length if trace.child_spikes else 0) }} events</span>
+                </div>
+
+                <!-- Child Events (e.g., completion markers) -->
+                {% for child_event in trace.child_events %}
+                <div class="trace-child event-item">
+                    <span class="connector">│  ├─</span>
+                    <span class="event-icon">▪</span>
+                    <span class="event-type">{{ child_event.event_type }}</span>
+                    <span class="event-id">{{ child_event.event_id }}</span>
+                    <span class="timestamp">{{ child_event.timestamp }}</span>
+                    <span class="status" :class="'status-' + child_event.status.lower()">
+                        {{ child_event.status }}
+                    </span>
+                </div>
+                {% endfor %}
+
+                <!-- Child Spikes (Knowledge Created) -->
+                {% for spike_id in trace.child_spikes %}
+                <div class="trace-child spike-item">
+                    <span class="connector">│  ├─</span>
+                    <span class="spike-icon">✦</span>
+                    <span class="event-type">spike</span>
+                    <span class="spike-id" title="Knowledge Created">{{ spike_id }}</span>
+                </div>
+                {% endfor %}
+
+                <!-- Closing connector -->
+                <div class="trace-child-close">
+                    <span class="connector">│</span>
+                </div>
+            </div>
+            {% else %}
+            <div class="trace-children empty">
+                <span class="connector">└─</span>
+                <span class="label">No child events</span>
+            </div>
+            {% endif %}
+        </div>
+        {% endfor %}
+    </div>
+
+    <style>
+        .event-traces-container {
+            padding: 16px;
+            background: #f8f9fa;
+            border-radius: 8px;
+        }
+
+        .traces-header {
+            margin-bottom: 20px;
+            border-bottom: 2px solid #e0e0e0;
+            padding-bottom: 12px;
+        }
+
+        .traces-header h2 {
+            margin: 0 0 4px 0;
+            color: #333;
+            font-size: 18px;
+            font-weight: 600;
+        }
+
+        .traces-header .subtitle {
+            margin: 0;
+            color: #666;
+            font-size: 13px;
+        }
+
+        .traces-list {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+        }
+
+        .event-trace {
+            background: white;
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            overflow: hidden;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+        }
+
+        .trace-parent {
+            padding: 12px;
+            background: #f5f7ff;
+            border-left: 4px solid #4a90e2;
+        }
+
+        .event-header {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin-bottom: 8px;
+            flex-wrap: wrap;
+        }
+
+        .event-badge {
+            display: inline-block;
+            padding: 2px 8px;
+            font-size: 11px;
+            font-weight: 600;
+            border-radius: 3px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+
+        .event-badge.parent-badge {
+            background: #4a90e2;
+            color: white;
+        }
+
+        .agent-name {
+            font-family: 'Monaco', 'Menlo', monospace;
+            font-size: 12px;
+            font-weight: 500;
+            color: #333;
+        }
+
+        .subagent-type {
+            display: inline-block;
+            padding: 2px 6px;
+            font-size: 11px;
+            background: #e8f0ff;
+            color: #4a90e2;
+            border-radius: 3px;
+            border: 1px solid #b3d9ff;
+        }
+
+        .event-status {
+            display: inline-block;
+            padding: 2px 8px;
+            font-size: 11px;
+            font-weight: 600;
+            border-radius: 3px;
+            text-transform: uppercase;
+        }
+
+        .event-status.status-completed {
+            background: #d4f4dd;
+            color: #2d7a4a;
+        }
+
+        .event-status.status-started {
+            background: #fff3cd;
+            color: #856404;
+        }
+
+        .event-status.status-failed {
+            background: #f8d7da;
+            color: #721c24;
+        }
+
+        .timestamp {
+            font-size: 12px;
+            color: #999;
+            font-family: 'Monaco', 'Menlo', monospace;
+            margin-left: auto;
+        }
+
+        .event-metadata {
+            display: flex;
+            gap: 16px;
+            font-size: 12px;
+            color: #666;
+            padding: 0 0 0 0;
+        }
+
+        .metadata-item {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+        }
+
+        .metadata-item strong {
+            color: #333;
+            font-weight: 600;
+        }
+
+        .trace-children {
+            padding: 8px 12px;
+            background: white;
+            border-top: 1px solid #eee;
+        }
+
+        .trace-children.empty {
+            color: #999;
+            font-size: 12px;
+            font-style: italic;
+            padding: 8px 12px;
+        }
+
+        .children-header {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin-bottom: 8px;
+            font-size: 12px;
+            font-weight: 600;
+            color: #666;
+        }
+
+        .connector {
+            font-family: 'Monaco', 'Menlo', monospace;
+            color: #ddd;
+            font-weight: bold;
+            min-width: 20px;
+        }
+
+        .label {
+            color: #333;
+        }
+
+        .count {
+            margin-left: auto;
+            font-size: 11px;
+            background: #f0f0f0;
+            padding: 2px 6px;
+            border-radius: 3px;
+            color: #666;
+        }
+
+        .trace-child {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            padding: 6px 0;
+            font-size: 12px;
+            border-bottom: 1px solid #f5f5f5;
+        }
+
+        .trace-child:last-child {
+            border-bottom: none;
+        }
+
+        .event-icon,
+        .spike-icon {
+            font-size: 10px;
+            color: #999;
+        }
+
+        .spike-icon {
+            color: #e8a600;
+        }
+
+        .event-type {
+            display: inline-block;
+            padding: 2px 6px;
+            font-size: 10px;
+            background: #f0f0f0;
+            color: #666;
+            border-radius: 2px;
+            text-transform: uppercase;
+            font-weight: 500;
+        }
+
+        .event-id,
+        .spike-id {
+            font-family: 'Monaco', 'Menlo', monospace;
+            font-size: 11px;
+            color: #666;
+            font-weight: 500;
+        }
+
+        .trace-child .timestamp {
+            font-size: 11px;
+            margin-left: auto;
+        }
+
+        .trace-child .status {
+            font-size: 10px;
+            padding: 2px 6px;
+            border-radius: 2px;
+            font-weight: 500;
+            text-transform: uppercase;
+        }
+
+        .trace-child .status.status-completed {
+            background: #d4f4dd;
+            color: #2d7a4a;
+        }
+
+        .trace-child-close {
+            padding: 2px 0;
+            font-size: 12px;
+        }
+
+        @media (max-width: 768px) {
+            .event-header {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+
+            .timestamp {
+                margin-left: 0;
+            }
+
+            .event-metadata {
+                flex-direction: column;
+                gap: 4px;
+            }
+        }
+    </style>
+
+    {% else %}
+    <div class="no-traces">
+        <p>No task delegation traces found.</p>
+        <p class="hint">Task delegation traces appear here when you use Task() to delegate work to subagents.</p>
+    </div>
+
+    <style>
+        .no-traces {
+            padding: 40px 20px;
+            text-align: center;
+            color: #999;
+        }
+
+        .no-traces p {
+            margin: 8px 0;
+            font-size: 14px;
+        }
+
+        .no-traces .hint {
+            font-size: 12px;
+            color: #bbb;
+            font-style: italic;
+        }
+    </style>
+    {% endif %}
+</div>