{% for group in hierarchical_events %}
    <!-- Parent Event (depth-0): children rendered inline, visibility toggled by JS -->
    <tr class="activity-row parent-row event-{{ group.parent.status }} {% if group.has_children %}has-children{% endif %}"
        id="row-{{ group.parent.event_id }}"
        data-event-id="{{ group.parent.event_id }}"
        {% if group.has_children %}
        onclick="handleParentClick(this)"
        {% endif %}>

        <td class="col-activity">
            <div class="activity-cell depth-0">
                {% if group.has_children %}
                    <span class="expand-icon">&#9654;</span>
                {% else %}
                    <span class="expand-placeholder"></span>
                {% endif %}
                <span class="event-dot type-{{ group.parent.event_type }}"></span>
                {% if group.parent.tool_name and group.parent.tool_name != 'UserQuery' %}
                    <code class="tool-chip">{{ group.parent.tool_name }}</code>
                {% endif %}
                {% if group.has_children %}
                    <span class="child-count">({{ group.total_count }})</span>
                {% endif %}
                {% set agent_lower = group.parent.agent_id|lower %}
                {% if agent_lower not in ['claude-code', 'claude_code', 'claude'] %}
                    {% if agent_lower in ['gemini', 'copilot', 'openai'] %}
                        <span class="agent-badge agent-{{ agent_lower }}">{{ group.parent.agent_id }}</span>
                    {% else %}
                        <span class="agent-badge agent-subagent" title="{{ group.parent.agent_id }}">{{ group.parent.agent_id[:8] }}</span>
                    {% endif %}
                {% endif %}
                {% if group.parent.input_summary %}
                    <span class="activity-desc" title="{{ group.parent.input_summary }}">{{ group.parent.input_summary[:200] }}{% if group.parent.input_summary|length > 200 %}&#8230;{% endif %}</span>
                {% elif group.parent.output_summary %}
                    <span class="activity-desc" title="{{ group.parent.output_summary }}">{{ group.parent.output_summary[:200] }}{% if group.parent.output_summary|length > 200 %}&#8230;{% endif %}</span>
                {% endif %}
                {% if group.parent.cost_tokens or group.parent.execution_duration_seconds %}
                    <span class="detail-metrics">
                        {% if group.parent.cost_tokens %}{{ group.parent.cost_tokens }}t{% endif %}
                        {% if group.parent.execution_duration_seconds %} {{ "%.1f"|format(group.parent.execution_duration_seconds) }}s{% endif %}
                    </span>
                {% endif %}
            </div>
        </td>

        <td class="work-item-cell">
            {% if group.work_item_id %}
            <a href="/work-items/{{ group.work_item_id }}"
               class="work-item-badge work-item-type-{{ group.work_item_type }}"
               title="{{ group.work_item_title }}">
                <span class="work-item-type-label">{{ group.work_item_type | upper }}</span>
                <span class="work-item-short-id">{{ group.work_item_id[-8:] }}</span>
            </a>
            {% else %}
            <span class="work-item-empty">&mdash;</span>
            {% endif %}
        </td>

        <td class="col-ts">
            <span class="timestamp-text"
                  data-utc-time="{{ group.parent.timestamp }}"
                  title="{{ group.parent.timestamp }}">
                {{ group.parent.timestamp[11:19] if group.parent.timestamp|length >= 19 else group.parent.timestamp }}
            </span>
        </td>
    </tr>
    {# Render children inline (hidden by default) so idiomorph preserves them on morph #}
    {% if group.has_children %}
        {% for child in group.children %}
            <tr class="activity-row child-row depth-1 event-{{ child.status }} hidden {% if child.children %}has-children{% endif %}"
                id="row-{{ child.event_id }}"
                data-event-id="{{ child.event_id }}"
                data-parent="{{ group.parent.event_id }}"
                data-depth="1"
                {% if child.children %}onclick="toggleChildren(this)"{% endif %}>
                <td class="col-activity">
                    <div class="activity-cell depth-1">
                        {% if child.children %}
                            <span class="expand-icon">&#9654;</span>
                        {% else %}
                            <span class="expand-placeholder"></span>
                        {% endif %}
                        <span class="event-dot type-{{ child.event_type }}"></span>
                        {% if child.tool_name and child.tool_name != 'UserQuery' %}
                            <code class="tool-chip">{{ child.tool_name }}</code>
                        {% endif %}
                        {% if child.tool_name in ('Task', 'Agent') %}
                            {% if child.subagent_type %}
                                {% set agent_type = child.subagent_type | lower %}
                                {% if 'researcher' in agent_type %}
                                    {% set badge_class = 'researcher-agent' %}
                                {% elif 'haiku' in agent_type %}
                                    {% set badge_class = 'haiku-agent' %}
                                {% elif 'opus' in agent_type %}
                                    {% set badge_class = 'opus-agent' %}
                                {% elif 'test' in agent_type or 'debug' in agent_type %}
                                    {% set badge_class = 'green-agent' %}
                                {% else %}
                                    {% set badge_class = 'claude-agent' %}
                                {% endif %}
                                <span class="agent-name-badge {{ badge_class }}" title="{{ child.subagent_type }}">{{ child.subagent_type }}</span>
                            {% endif %}
                            {% if child.model %}
                                {% set m = child.model %}
                                {% if m.startswith('claude-') %}{% set m = m[7:] %}{% endif %}
                                {% set parts = m.split('-') %}
                                {% if parts|length == 3 %}
                                    {% set m = parts[0] + '-' + parts[1] + '.' + parts[2] %}
                                {% elif parts|length == 2 %}
                                    {% set m = parts[0] + '-' + parts[1] %}
                                {% endif %}
                                <span class="model-badge" title="{{ child.model }}">{{ m }}</span>
                            {% endif %}
                        {% endif %}
                        {% if child.children %}
                            <span class="child-count">({{ child.total_count }})</span>
                        {% endif %}
                        {% if child.input_summary %}
                            <span class="activity-desc" title="{{ child.input_summary }}">{{ child.input_summary[:200] }}{% if child.input_summary|length > 200 %}&#8230;{% endif %}</span>
                        {% elif child.output_summary %}
                            <span class="activity-desc" title="{{ child.output_summary }}">{{ child.output_summary[:200] }}{% if child.output_summary|length > 200 %}&#8230;{% endif %}</span>
                        {% endif %}
                        {% if child.cost_tokens or child.execution_duration_seconds %}
                            <span class="detail-metrics">
                                {% if child.cost_tokens %}{{ child.cost_tokens }}t{% endif %}
                                {% if child.execution_duration_seconds %} {{ "%.1f"|format(child.execution_duration_seconds) }}s{% endif %}
                            </span>
                        {% endif %}
                    </div>
                </td>
                <td class="work-item-cell">
                    <span class="work-item-empty">&mdash;</span>
                </td>
                <td class="col-ts">
                    <span class="timestamp-text"
                          data-utc-time="{{ child.timestamp }}"
                          title="{{ child.timestamp }}">
                        {{ child.timestamp[11:19] if child.timestamp|length >= 19 else child.timestamp }}
                    </span>
                </td>
            </tr>
            {# Grandchildren (depth-2) #}
            {% if child.children %}
                {% for grandchild in child.children %}
                    <tr class="activity-row child-row depth-2 event-{{ grandchild.status }} hidden {% if grandchild.children %}has-children{% endif %}"
                        id="row-{{ grandchild.event_id }}"
                        data-event-id="{{ grandchild.event_id }}"
                        data-parent="{{ child.event_id }}"
                        data-ancestor="{{ group.parent.event_id }}"
                        data-depth="2"
                        {% if grandchild.children %}onclick="toggleChildren(this)"{% endif %}>
                        <td class="col-activity">
                            <div class="activity-cell depth-2">
                                {% if grandchild.children %}
                                    <span class="expand-icon">&#9654;</span>
                                {% else %}
                                    <span class="expand-placeholder"></span>
                                {% endif %}
                                <span class="event-dot type-{{ grandchild.event_type }}"></span>
                                {% if grandchild.tool_name and grandchild.tool_name != 'UserQuery' %}
                                    <code class="tool-chip">{{ grandchild.tool_name }}</code>
                                {% endif %}
                                {% if grandchild.tool_name in ('Task', 'Agent') %}
                                    {% if grandchild.subagent_type %}
                                        {% set agent_type = grandchild.subagent_type | lower %}
                                        {% if 'researcher' in agent_type %}
                                            {% set badge_class = 'researcher-agent' %}
                                        {% elif 'haiku' in agent_type %}
                                            {% set badge_class = 'haiku-agent' %}
                                        {% elif 'opus' in agent_type %}
                                            {% set badge_class = 'opus-agent' %}
                                        {% elif 'test' in agent_type or 'debug' in agent_type %}
                                            {% set badge_class = 'green-agent' %}
                                        {% else %}
                                            {% set badge_class = 'claude-agent' %}
                                        {% endif %}
                                        <span class="agent-name-badge {{ badge_class }}" title="{{ grandchild.subagent_type }}">{{ grandchild.subagent_type }}</span>
                                    {% endif %}
                                    {% if grandchild.model %}
                                        {% set m = grandchild.model %}
                                        {% if m.startswith('claude-') %}{% set m = m[7:] %}{% endif %}
                                        {% set parts = m.split('-') %}
                                        {% if parts|length == 3 %}
                                            {% set m = parts[0] + '-' + parts[1] + '.' + parts[2] %}
                                        {% elif parts|length == 2 %}
                                            {% set m = parts[0] + '-' + parts[1] %}
                                        {% endif %}
                                        <span class="model-badge" title="{{ grandchild.model }}">{{ m }}</span>
                                    {% endif %}
                                {% endif %}
                                {% if grandchild.children %}
                                    <span class="child-count">({{ grandchild.total_count }})</span>
                                {% endif %}
                                {% if grandchild.input_summary %}
                                    <span class="activity-desc" title="{{ grandchild.input_summary }}">{{ grandchild.input_summary[:200] }}{% if grandchild.input_summary|length > 200 %}&#8230;{% endif %}</span>
                                {% elif grandchild.output_summary %}
                                    <span class="activity-desc" title="{{ grandchild.output_summary }}">{{ grandchild.output_summary[:200] }}{% if grandchild.output_summary|length > 200 %}&#8230;{% endif %}</span>
                                {% endif %}
                                {% if grandchild.cost_tokens or grandchild.execution_duration_seconds %}
                                    <span class="detail-metrics">
                                        {% if grandchild.cost_tokens %}{{ grandchild.cost_tokens }}t{% endif %}
                                        {% if grandchild.execution_duration_seconds %} {{ "%.1f"|format(grandchild.execution_duration_seconds) }}s{% endif %}
                                    </span>
                                {% endif %}
                            </div>
                        </td>
                        <td class="work-item-cell">
                            <span class="work-item-empty">&mdash;</span>
                        </td>
                        <td class="col-ts">
                            <span class="timestamp-text"
                                  data-utc-time="{{ grandchild.timestamp }}"
                                  title="{{ grandchild.timestamp }}">
                                {{ grandchild.timestamp[11:19] if grandchild.timestamp|length >= 19 else grandchild.timestamp }}
                            </span>
                        </td>
                    </tr>
                    {# Great-grandchildren (depth-3) #}
                    {% if grandchild.children %}
                        {% for ggchild in grandchild.children %}
                            <tr class="activity-row child-row depth-3 event-{{ ggchild.status }} hidden"
                                id="row-{{ ggchild.event_id }}"
                                data-event-id="{{ ggchild.event_id }}"
                                data-parent="{{ grandchild.event_id }}"
                                data-ancestor="{{ group.parent.event_id }}"
                                data-depth="3">
                                <td class="col-activity">
                                    <div class="activity-cell depth-3">
                                        <span class="expand-placeholder"></span>
                                        <span class="event-dot type-{{ ggchild.event_type }}"></span>
                                        {% if ggchild.tool_name and ggchild.tool_name != 'UserQuery' %}
                                            <code class="tool-chip">{{ ggchild.tool_name }}</code>
                                        {% endif %}
                                        {% if ggchild.input_summary %}
                                            <span class="activity-desc" title="{{ ggchild.input_summary }}">{{ ggchild.input_summary[:200] }}{% if ggchild.input_summary|length > 200 %}&#8230;{% endif %}</span>
                                        {% elif ggchild.output_summary %}
                                            <span class="activity-desc" title="{{ ggchild.output_summary }}">{{ ggchild.output_summary[:200] }}{% if ggchild.output_summary|length > 200 %}&#8230;{% endif %}</span>
                                        {% endif %}
                                        {% if ggchild.cost_tokens or ggchild.execution_duration_seconds %}
                                            <span class="detail-metrics">
                                                {% if ggchild.cost_tokens %}{{ ggchild.cost_tokens }}t{% endif %}
                                                {% if ggchild.execution_duration_seconds %} {{ "%.1f"|format(ggchild.execution_duration_seconds) }}s{% endif %}
                                            </span>
                                        {% endif %}
                                    </div>
                                </td>
                                <td class="work-item-cell">
                                    <span class="work-item-empty">&mdash;</span>
                                </td>
                                <td class="col-ts">
                                    <span class="timestamp-text"
                                          data-utc-time="{{ ggchild.timestamp }}"
                                          title="{{ ggchild.timestamp }}">
                                        {{ ggchild.timestamp[11:19] if ggchild.timestamp|length >= 19 else ggchild.timestamp }}
                                    </span>
                                </td>
                            </tr>
                        {% endfor %}
                    {% endif %}
                {% endfor %}
            {% endif %}
        {% endfor %}
    {% endif %}
{% endfor %}