{% extends "base.html" %}

{% block title %}Observability & Monitoring - Memorizz{% endblock %}
{% block head %}<script src="/static/js/observability.js?v=3" defer></script><link rel="stylesheet" href="/static/css/analytics.css?v=1"><link rel="stylesheet" href="/static/css/pages/observability.css?v=2">{% endblock %}

{% block content %}
{% from '_ui.html' import page_header, observability_tabs, empty_state %}
{% from '_fmt.html' import tape, count %}
{{ page_header('Observability', 'Follow context lineage, grounding, cache routing, tool execution and verified outcomes by agent and thread.', 'Operations', nav=observability_tabs('traces', selection_urls)) }}

{{ tape(trace_tape, 'Loaded trace window summary') }}

<details class="detail-section obs-incident" id="incident-finder-panel" {% if not selected_agent %}open{% endif %}>
    <summary>Incident finder</summary>
    <div class="obs-incident-row">
        <form id="incident-finder" class="traces-search-form obs-incident-form">
            <label class="obs-field-query">Find by ID <input class="traces-search-input" name="q" maxlength="240" autocomplete="off" placeholder="Trace, thread, job, source, artifact or error ID"></label>
            <label class="obs-field-time">From <input name="start_time" type="datetime-local"></label>
            <label class="obs-field-time">Until <input name="end_time" type="datetime-local"></label>
            <button class="btn" type="submit">Find incident</button>
        </form>
        {% if trace_permissions and trace_permissions['account.resolve'] %}
        <form id="account-lookup" class="traces-search-form obs-incident-form obs-account-form">
            <label>Account email <input id="account-email" type="email" maxlength="320" autocomplete="off" required {% if not trace_capabilities['account.resolve'].available %}disabled{% endif %}></label>
            <button class="btn" type="submit" {% if not trace_capabilities['account.resolve'].available %}disabled{% endif %}>Resolve account<span class="visually-hidden"> through host</span></button>
        </form>
        {% endif %}
    </div>
    <p id="incident-status" class="obs-incident-status" role="status">Search uses bounded, authorized event pages. Account addresses are resolved transiently, not stored in traces.</p>
    <div id="incident-results"></div><button id="incident-next" class="btn btn-sm" type="button" hidden>Load next page</button>
</details>

<details class="trace-access-banner obs-capabilities" id="trace-capability-banner">
    <summary>Host integration capabilities · {% if not trace_capabilities['account.resolve'].configured or not trace_capabilities['artifact.lookup'].configured or not trace_capabilities['replay.create'].configured %}setup required{% else %}configured{% endif %}</summary>
    {% for permission, capability in trace_capabilities.items() %}
    <p>{{ capability.setup }}: {{ 'Available' if capability.available else 'Not configured' if not capability.configured else 'Not permitted for this role' }}.{% if not capability.configured %} Supply a tenant-aware <code>{{ capability.setup }}</code> callback to <code>create_app</code>. No host lookup will run until configured.{% endif %}</p>
    {% endfor %}
    <p>Host source/artifact/parser/delivery recording is separate from these lookup hooks. Missing historical links cannot be reconstructed as facts.</p>
</details>

{% if error %}
<div class="error-message">
    <span>!</span> {{ error }}
</div>
{% endif %}

<details class="detail-section observability-section trace-navigator obs-nav" id="trace-agent-navigator" {% if not selected_agent %}open{% endif %}>
    <summary>Agent and thread navigator <span class="obs-summary-meta">{{ count(agent_rows|length) }} agent{{ '' if agent_rows|length == 1 else 's' }}{% if agent_query %} matching “{{ agent_query }}”{% endif %}</span></summary>
    <div class="fleet-bar obs-nav-bar">
        <form class="fleet-search obs-nav-search" method="get" action="/traces" role="search">
            {% if selected_agent_id %}
            <input type="hidden" name="agent_id" value="{{ selected_agent_id }}">
            {% for key, value in selection_urls.params.items() %}{% if key != 'agent_id' %}<input type="hidden" name="{{ key }}" value="{{ value }}">{% endif %}{% endfor %}
            {% endif %}
            <kbd aria-hidden="true">/</kbd>
            <input
                type="search"
                id="agent-search"
                name="q"
                class="traces-search-input"
                value="{{ agent_query }}"
                data-server-query="{{ agent_query|lower }}"
                placeholder="Filter agents, threads or IDs"
                title="Type to filter loaded rows; press Enter to search trace, source and artifact IDs"
                aria-label="Filter agents and threads. Press Enter to search trace, source and artifact IDs."
                autocomplete="off"
            >
            <button type="submit" class="btn btn-sm">Search</button>
        </form>
        {% if agent_query %}<a class="obs-clear" href="{{ selection_urls.traces }}">Clear search</a>{% endif %}
        {% if agent_rows %}
        <div class="segmented" role="group" aria-label="Show agents">
            <button type="button" class="segmented-item" data-nav-tag="" aria-pressed="true">All <span>{{ navigator_counts.all }}</span></button>
            <button type="button" class="segmented-item" data-nav-tag="active" aria-pressed="false">With events <span>{{ navigator_counts.active }}</span></button>
            <button type="button" class="segmented-item" data-nav-tag="threads" aria-pressed="false">With threads <span>{{ navigator_counts.threads }}</span></button>
            <button type="button" class="segmented-item" data-nav-tag="idle" aria-pressed="false">Idle <span>{{ navigator_counts.idle }}</span></button>
        </div>
        <p class="fleet-keys" aria-label="Keyboard shortcuts"><span><kbd>j</kbd> <kbd>k</kbd> move</span><span><kbd>→</kbd> <kbd>←</kbd> threads</span><span><kbd>↵</kbd> open</span></p>
        {% endif %}
    </div>

    {% if agent_rows %}
    <div class="fleet-table-wrap obs-nav-wrap">
        <table class="fleet-table obs-nav-table" id="trace-agents-table">
            <caption class="visually-hidden">Agents with trace activity in the loaded window. Expand an agent to list its threads, then open a thread to load its timeline.</caption>
            <thead>
                <tr>
                    <th scope="col" aria-sort="none"><button type="button" data-nav-sort="name" data-sort-type="text">Agent</button></th>
                    <th scope="col" class="obs-col-mode" aria-sort="none"><button type="button" data-nav-sort="mode" data-sort-type="text">Mode</button></th>
                    <th scope="col" class="num obs-col-threads" aria-sort="none"><button type="button" data-nav-sort="threads">Threads</button></th>
                    <th scope="col" class="num" aria-sort="none"><button type="button" data-nav-sort="events">Events</button></th>
                    <th scope="col" class="num obs-col-bundles" aria-sort="none"><button type="button" data-nav-sort="bundles">Bundles</button></th>
                    <th scope="col" class="num obs-col-memories" aria-sort="none"><button type="button" data-nav-sort="memories">Memories</button></th>
                    <th scope="col" class="num obs-col-tools" aria-sort="none"><button type="button" data-nav-sort="tools">Tools</button></th>
                    <th scope="col" class="obs-col-coverage" aria-sort="none"><button type="button" data-nav-sort="coverage" data-sort-type="text">Coverage</button></th>
                    <th scope="col" class="num" aria-sort="none"><button type="button" data-nav-sort="last">Last activity</button></th>
                </tr>
            </thead>
            <tbody>
                {% for row in agent_rows %}
                {% set is_parent_expanded = (row.agent_id == selected_agent_id) %}
                {% set coverage_state = {'complete': 'healthy', 'partial': 'degraded'}.get(row.coverage, 'idle') %}
                <tr
                    class="traces-agent-row traces-agent-row--parent {% if row.agent_id == selected_agent_id and not selected_thread_id %}is-selected{% endif %} {% if is_parent_expanded %}is-expanded{% endif %}"
                    data-agent-id="{{ row.agent_id }}"
                    data-event-count="{{ row.event_count }}"
                    data-search="{{ row.search }}"
                    data-tags="{{ row.tags|join(' ') }}"
                    data-name="{{ row.name|lower }}"
                    data-mode="{{ row.mode|lower }}"
                    data-threads="{{ row.thread_count }}"
                    data-events="{{ row.event_count }}"
                    data-bundles="{{ row.bundle_count }}"
                    data-memories="{{ row.memory_count }}"
                    data-tools="{{ row.tool_count }}"
                    data-coverage="{{ row.coverage }}"
                    data-last="{{ row.last_ts }}"
                    tabindex="0"
                >
                    <th scope="row" class="obs-nav-name">
                        <span class="traces-parent-caret" aria-hidden="true"></span>
                        <span class="obs-nav-label" title="{{ row.name }}">{{ row.name }}</span>
                        {% if not row.agent_id.startswith('__memorizz_') %}<span class="fleet-id" title="{{ row.agent_id }}">{{ row.agent_id[:8] }}</span>{% endif %}
                    </th>
                    <td class="obs-col-mode">{{ row.mode }}</td>
                    <td class="num obs-col-threads">{{ count(row.thread_count) }}</td>
                    <td class="num">{{ count(row.event_count) }}</td>
                    <td class="num obs-col-bundles">{{ count(row.bundle_count) }}</td>
                    <td class="num obs-col-memories">{{ count(row.memory_count) }}</td>
                    <td class="num obs-col-tools">{{ count(row.tool_count) }}</td>
                    <td class="obs-col-coverage"><span class="fleet-health fleet-health--{{ coverage_state }}">{{ row.coverage|capitalize }}</span></td>
                    <td class="num" title="{{ row.last_activity }}">{{ row.age }}</td>
                </tr>
                {% for thread_row in row.thread_rows %}
                <tr
                    class="traces-agent-row traces-agent-row--thread {% if not is_parent_expanded %}is-collapsed{% endif %} {% if row.agent_id == selected_agent_id and selected_thread_id == thread_row.thread_id and (not selected_thread_memory_id or selected_thread_memory_id == thread_row.memory_id) %}is-selected{% endif %}"
                    data-agent-id="{{ row.agent_id }}"
                    data-thread-id="{{ thread_row.thread_id }}"
                    data-thread-memory-id="{{ thread_row.memory_id }}"
                    data-event-count="{{ thread_row.event_count }}"
                    tabindex="0"
                >
                    <th scope="row" class="obs-nav-thread">
                        <span class="obs-thread-id" title="Thread {{ thread_row.thread_id }}">{{ thread_row.thread_id }}</span>
                        {% if thread_row.memory_id and thread_row.memory_id != thread_row.thread_id %}<span class="fleet-id" title="Thread memory {{ thread_row.memory_id }}">{{ thread_row.memory_id|truncate(18, true, '…') }}</span>{% endif %}
                    </th>
                    <td class="obs-col-mode obs-muted">Thread</td>
                    <td class="num obs-col-threads obs-muted">—</td>
                    <td class="num">{{ count(thread_row.event_count) }}</td>
                    <td class="num obs-col-bundles"></td>
                    <td class="num obs-col-memories"></td>
                    <td class="num obs-col-tools"></td>
                    <td class="obs-col-coverage"></td>
                    <td class="num" title="{{ thread_row.last_activity }}">{{ thread_row.age }}</td>
                </tr>
                {% endfor %}
                {% endfor %}
            </tbody>
        </table>
        <p class="fleet-none" id="trace-agents-none" hidden>No loaded agents or threads match this filter. Press Enter to search trace, source and artifact IDs.</p>
    </div>
    {% elif agent_query %}
    {{ empty_state('No matching agents', 'Try a different search query, or clear the search to list every traced agent.') }}
    {% else %}
    {{ empty_state('No traced agents yet', 'Run an agent in Playground to record traces.', '/playground', 'Open playground') }}
    {% endif %}
</details>


{% if selected_agent %}
<nav class="trace-section-nav" aria-label="Selected incident sections">
    <span>Root <code>{{ selected_root_trace_id or 'all loaded roots' }}</code>{% if selected_turn_id %} · Turn <code>{{ selected_turn_id }}</code>{% endif %}</span>
    {% if not coding_agent_label %}<a href="#trace-insights">Insights</a><a href="#trace-waterfall">Waterfall</a><a href="#trace-lineage-inspectors">Lineage</a><a href="#trace-output-contracts">Delivery</a>{% endif %}
    <form method="get" action="/traces">
        {% for key, value in selection_urls.params.items() %}{% if key not in ['root_trace_id', 'event_id', 'turn_id', 'task_id'] %}<input type="hidden" name="{{ key }}" value="{{ value }}">{% endif %}{% endfor %}
        <label>Root <input name="root_trace_id" value="{{ selected_root_trace_id or '' }}" maxlength="240"></label><button class="btn btn-sm" type="submit">Select root</button>
    </form>
</nav>
<div class="agent-summary">
    <div class="summary-item">
        <span class="summary-label">Agent</span>
        <span class="summary-value">{{ selected_agent_name or 'Agent' }}</span>
    </div>
    <div class="summary-item">
        <span class="summary-label">Agent ID</span>
        <code class="summary-value">{{ selected_agent._coding_agent if coding_agent_label else selected_agent.agent_id }}</code>
    </div>
    {% if selected_thread_row %}
    <div class="summary-item">
        <span class="summary-label">Thread ID</span>
        <code class="summary-value">{{ selected_thread_row.thread_id }}</code>
    </div>
    <div class="summary-item">
        <span class="summary-label">Thread memory</span>
        <code class="summary-value">{{ selected_thread_row.memory_id }}</code>
    </div>
    {% endif %}
    {% if trace_summary %}
    <div class="summary-item">
        <span class="summary-label">Trace events</span>
        <span class="summary-value">{{ trace_summary.event_count }} events · {{ trace_summary.bundle_count }} bundles</span>
    </div>
    <div class="summary-item">
        <span class="summary-label">Latest</span>
        <span class="summary-value">{{ trace_summary.latest_timestamp }}</span>
    </div>
    {% endif %}
</div>

{#- A coding agent's steps aren't in its saved turns, so counts here would
    read as zero; its notice links to the run that has them. -#}
{% if trace_analysis and not coding_agent_label %}
<div class="detail-section observability-section trace-analysis" id="trace-insights">
    <div class="trace-analysis-header">
        <div>
            <div class="trace-analysis-title-row">
                <h2>Trace Insights</h2>
                <span class="trace-analysis-badge">Read-only analysis</span>
            </div>
            <p class="trace-analysis-methodology">{{ trace_analysis.methodology }}</p>
        </div>
        {% if trace_analysis_export_url %}
        <div class="trace-analysis-actions">
            <a class="btn btn-sm" href="{{ trace_analysis_export_url }}" download>Export JSON</a>
            {% if not ui_read_only %}
            <form method="post" action="/traces/recommendations">
                <input type="hidden" name="agent_id" value="{{ selected_agent_id }}">
                {% if selected_thread_id %}<input type="hidden" name="thread_id" value="{{ selected_thread_id }}">{% endif %}
                {% if selected_thread_memory_id %}<input type="hidden" name="thread_memory_id" value="{{ selected_thread_memory_id }}">{% endif %}
                <button type="submit" class="btn btn-sm btn-primary">Save findings for review</button>
            </form>
            {% endif %}
        </div>
        {% endif %}
    </div>

    <div class="trace-analysis-stat {% if trace_analysis.coverage.coverage != 'complete' %}trace-analysis-stat--warning{% endif %}" role="status">
        <strong>{{ trace_analysis.coverage.headline }}</strong>
        <p>Stored-event read: {{ trace_analysis.coverage.read_completeness }} · Instrumentation: {{ trace_analysis.coverage.instrumentation_coverage }} · Outcome evidence: {{ trace_analysis.coverage.outcome_verification }}.</p>
        <p>{{ trace_analysis.coverage.bundle_count if trace_analysis.coverage.bundle_count is not none else 'Unknown' }} bundle records · {{ trace_analysis.summary.events_analyzed }} normalized events · {{ trace_analysis.coverage.normalization_errors or 0 }} normalization errors · Duplicates removed: {{ trace_analysis.coverage.duplicates_removed if trace_analysis.coverage.duplicates_removed is not none else 'unknown in selected scope' }}</p>
        {% if trace_analysis.coverage.coverage != 'complete' %}<p>Counts are observed lower bounds. Missing evidence does not establish zero activity or task success.</p>{% endif %}
        {% if not trace_analysis.coverage.profiles_declared %}<p>Coverage describes loaded events. The host has not declared required artifact or delivery stages.</p>{% endif %}
        <p>Stores: {{ trace_analysis.coverage.store_selection|join(', ') }} · Source rows by store: {{ trace_analysis.coverage.source_counts|tojson }}. Counts describe recorded evidence, not task-level activity.</p>
        {% if trace_analysis.coverage.parent_query_metadata %}<p>Deduplication and query diagnostics apply to the parent snapshot; the selected-root source totals use recorded provenance.</p>{% endif %}
        {% for missing in trace_analysis.coverage.missing_stages %}<p>Missing {{ missing.stage }} ({{ missing.profile }})</p>{% endfor %}
    </div>
    <div class="trace-analysis-grid" aria-label="Trace analysis summary">
        <div class="trace-analysis-stat">
            <span class="trace-analysis-stat-kicker">Trace volume</span>
            <span class="trace-analysis-stat-value">{{ trace_analysis.summary.events_analyzed }}</span>
            <span class="trace-analysis-stat-label">Events analyzed</span>
            <span class="trace-analysis-stat-detail">{{ trace_analysis.summary.threads_analyzed }} thread{% if trace_analysis.summary.threads_analyzed != 1 %}s{% endif %} · {{ trace_analysis.summary.context_provenance_events }} provenance events</span>
        </div>
        <div class="trace-analysis-stat {% if trace_analysis.summary.verified_outcome_failures %}trace-analysis-stat--warning{% endif %}">
            <span class="trace-analysis-stat-kicker">Verified outcomes</span>
            <span class="trace-analysis-stat-value">{% if trace_analysis.summary.verified_outcomes %}{{ trace_analysis.summary.verified_outcome_successes }}/{{ trace_analysis.summary.verified_outcomes }}{% else %}<span class="stat-empty">No recorded evidence</span>{% endif %}</span>
            <span class="trace-analysis-stat-label">Successful outcomes</span>
            <span class="trace-analysis-stat-detail">{{ trace_analysis.summary.verified_outcome_failures }} failed · {{ trace_analysis.summary.verified_negative_feedback }} negative feedback</span>
        </div>
        <div class="trace-analysis-stat {% if trace_analysis.summary.page_context_mismatches or trace_analysis.summary.missing_current_page_grounding or trace_analysis.summary.unverified_page_ownership %}trace-analysis-stat--critical{% endif %}">
            <span class="trace-analysis-stat-kicker">Context integrity</span>
            <span class="trace-analysis-stat-value">{{ trace_analysis.summary.page_context_mismatches }}</span>
            <span class="trace-analysis-stat-label">Page / thread mismatches</span>
            <span class="trace-analysis-stat-detail">{{ trace_analysis.summary.missing_current_page_grounding }} missing grounding · {{ trace_analysis.summary.unverified_page_ownership }} unverified ownership</span>
        </div>
        <div class="trace-analysis-stat {% if trace_analysis.summary.memory_degraded_turns %}trace-analysis-stat--warning{% endif %}">
            <span class="trace-analysis-stat-kicker">Memory supply</span>
            <span class="trace-analysis-stat-value">{{ trace_analysis.summary.memory_supplied }}</span>
            <span class="trace-analysis-stat-label">Items supplied to the model</span>
            <span class="trace-analysis-stat-detail">{{ trace_analysis.summary.memory_candidates }} retrieved candidates · {{ trace_analysis.summary.memory_explicit_references }} explicit references · {{ trace_analysis.summary.memory_degraded_turns }} degraded</span>
        </div>
        <div class="trace-analysis-stat {% if trace_analysis.summary.tool_failures %}trace-analysis-stat--warning{% endif %}">
            <span class="trace-analysis-stat-kicker">Tool health</span>
            <span class="trace-analysis-stat-value">{% if trace_analysis.metric_states.tool_calls.state == 'unknown' %}Unknown{% else %}{{ trace_analysis.summary.tool_calls }}{% if trace_analysis.metric_states.tool_calls.state == 'partial' %}+{% endif %}{% endif %}</span>
            <span class="trace-analysis-stat-label">Tool calls</span>
            <span class="trace-analysis-stat-detail">{{ trace_analysis.summary.tool_failures }} failures · {{ trace_analysis.summary.tool_fallbacks }} fallback · {{ trace_analysis.summary.tool_degraded_results }} degraded</span>
        </div>
        <div class="trace-analysis-stat">
            <span class="trace-analysis-stat-kicker">Semantic cache</span>
            <span class="trace-analysis-stat-value">{{ trace_analysis.summary.cache_hits }}</span>
            <span class="trace-analysis-stat-label">Validated hits</span>
            <span class="trace-analysis-stat-detail">{{ trace_analysis.summary.cache_misses }} miss · {{ trace_analysis.summary.cache_bypasses }} bypass · {{ trace_analysis.summary.cache_rejections }} rejected</span>
        </div>
        <div class="trace-analysis-stat">
            <span class="trace-analysis-stat-kicker">Continual learning</span>
            <span class="trace-analysis-stat-value">{{ trace_analysis.summary.learning_candidates }}</span>
            <span class="trace-analysis-stat-label">Learning candidates</span>
            <span class="trace-analysis-stat-detail">{{ trace_analysis.summary.priority_counts.P0 }} P0 · {{ trace_analysis.summary.priority_counts.P1 }} P1 · {{ trace_analysis.summary.priority_counts.P2 }} P2 findings</span>
        </div>
    </div>

    <section class="trace-memory-pipeline" aria-label="Memory context pipeline">
        <div class="trace-memory-pipeline__header">
            <div>
                <span class="trace-analysis-stat-kicker">Memory-first observability</span>
                <h3>What the model could actually use</h3>
                <p>Counts and hashed source references only. Raw profile facts, conversation excerpts, preferences, and writing samples are never copied into the trace.</p>
            </div>
            <span class="trace-analysis-badge">Content-safe</span>
        </div>
        <div class="trace-memory-stages">
            <div class="trace-memory-stage">
                <span>1 · Retrieved</span>
                <strong>{{ trace_analysis.summary.memory_candidates }}</strong>
                <small>candidates considered</small>
            </div>
            <div class="trace-memory-stage">
                <span>2 · Supplied</span>
                <strong>{{ trace_analysis.summary.memory_supplied }}</strong>
                <small>{{ trace_analysis.summary.memory_injected_chars }} context characters</small>
            </div>
            <div class="trace-memory-stage">
                <span>3 · Referenced</span>
                <strong>{{ trace_analysis.summary.memory_explicit_references }}</strong>
                <small>conservative exact overlaps</small>
            </div>
        </div>
        {% if trace_analysis.memory_health %}
        <div class="trace-memory-sources">
            {% for source in trace_analysis.memory_health %}
            <div class="trace-memory-source">
                <span>{{ source.source|replace('_', ' ')|title }}</span>
                <strong>{{ source.supplied }}</strong>
                <small>{{ source.explicit_references }} explicit reference{% if source.explicit_references != 1 %}s{% endif %}</small>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <p class="trace-memory-empty">No memory-supply events are available in this trace window yet.</p>
        {% endif %}
        {% if trace_analysis.summary.memory_behavioral_sources_not_measured %}
        <p class="trace-memory-note">{{ trace_analysis.summary.memory_behavioral_sources_not_measured }} style/preference signal{% if trace_analysis.summary.memory_behavioral_sources_not_measured != 1 %}s were{% else %} was{% endif %} supplied but not labelled “referenced”: behavioral application requires outcome evaluation, not string matching.</p>
        {% endif %}
    </section>

    {% if trace_analysis.insights %}
    <div class="trace-insights-list">
        {% for insight in trace_analysis.insights %}
        {% set saved = persisted_recommendations.get(insight.id) %}
        <article class="trace-insight-card trace-insight-card--{{ insight.priority|lower }}">
            <div class="trace-insight-heading">
                <div>
                    <span class="trace-priority trace-priority--{{ insight.priority|lower }}">{{ insight.priority }}</span>
                    <span class="trace-insight-component">{{ insight.component }}</span>
                    <h3>{{ insight.title }}</h3>
                </div>
                <div class="trace-insight-meta">
                    <span>{{ insight.confidence }} confidence</span>
                    <span>{{ insight.evidence_count }} signal{% if insight.evidence_count != 1 %}s{% endif %}</span>
                    <span>{{ insight.effort }} effort</span>
                </div>
            </div>
            <p>{{ insight.finding }}</p>
            {% if insight.evidence_anchors %}<p>Evidence: {% for anchor in insight.evidence_anchors %}<a href="#{{ anchor }}">Event {{ loop.index }}</a>{% if not loop.last %} · {% endif %}{% endfor %}</p>{% endif %}
            <div class="trace-insight-recommendation">
                <span>Recommended change</span>
                <p>{{ insight.recommendation }}</p>
                <code>{{ insight.target }}</code>
            </div>
            <div class="trace-review-row">
                {% if saved %}
                <span class="badge {% if saved.review_status == 'accepted' %}badge-success{% elif saved.review_status == 'rejected' %}badge-danger{% else %}badge-warning{% endif %}">
                    {{ saved.review_status|replace('_', ' ')|title }} · revision {{ saved.revision }}
                </span>
                {% if not ui_read_only %}
                <form method="post" action="/traces/recommendations/{{ saved.recommendation_id }}/review" class="trace-review-form">
                    <input type="text" name="note" maxlength="2000" placeholder="Optional review note">
                    <button type="submit" name="decision" value="accepted" class="btn btn-sm btn-primary">Accept &amp; draft experiment</button>
                    <button type="submit" name="decision" value="deferred" class="btn btn-sm">Defer</button>
                    <button type="submit" name="decision" value="rejected" class="btn btn-sm btn-danger">Reject</button>
                </form>
                {% endif %}
                {% else %}
                <span class="trace-review-pending">Not yet saved for review</span>
                {% endif %}
            </div>
        </article>
        {% endfor %}
    </div>
    {% else %}
    <div class="empty-pane trace-analysis-empty">
        <div class="empty-icon">OK</div>
        <p>No actionable signals in the available evidence</p>
        <p class="empty-hint">Broaden the trace window or add explicit outcome feedback before changing the agent.</p>
    </div>
    {% endif %}

    <div class="trace-learning-bridge">
        <div>
            <h3>Continual-learning handoff</h3>
            {% if trace_analysis.learning_candidates %}
            <p>{{ trace_analysis.learning_candidates|length }} recurring trajectory candidate{% if trace_analysis.learning_candidates|length != 1 %}s{% endif %} found. Review outcomes before promotion; the existing diversity, success-rate, recency, and shadow-readiness gates still apply.</p>
            {% else %}
            <p>No repeated multi-step trajectory is strong enough in this window. Memorizz will keep collecting evidence without changing the agent.</p>
            {% endif %}
        </div>
        <a class="btn btn-sm" href="/memory/workflows">Review Workflow Memory</a>
    </div>
</div>
{#- Cache routing is supporting evidence: it follows the diagnosis. -#}
{% if not coding_agent_label %}{% include '_prompt_cache.html' %}{% endif %}
{% endif %}

{#- A Codex or Claude Code session's tokens, steps and memory use are on its
    harness run, not in the turns the plugin saves, so these sections would
    only report instrumentation it can't have. -#}
{% if not coding_agent_label %}<details class="detail-section" id="trace-usage"><summary>Tokens, charges &amp; memory · selected trace window</summary>{% include '_usage_panel.html' %}</details>{% endif %}
{% if not coding_agent_label %}{% include "trace_waterfall.html" %}{% include "trace_inspectors.html" %}{% endif %}
{% if selected_agent_id and trace_waterfall and trace_permissions and trace_permissions['replay.create'] and not coding_agent_label %}
<div class="detail-section">
    <h2>Safe Evalground replay draft</h2>
    <p>Freeze content-free references after current access checks. This does not run models, tools, or production side effects.</p>
    <label>Root trace <select id="trace-replay-root">{% for group in trace_waterfall %}<option value="{{ group.root_trace_id }}">{{ group.root_trace_id }}</option>{% endfor %}</select></label>
    {% if not ui_read_only %}<button class="btn" id="trace-replay-create" data-agent-id="{{ selected_agent_id }}" type="button" {% if not trace_capabilities['replay.create'].available %}disabled{% endif %}>Create reviewable draft</button>{% else %}<p>Draft persistence is disabled in read-only mode.</p>{% endif %}
    {% if not trace_capabilities['replay.create'].configured %}<p>Replay plans and drafts are unavailable until <code>resource_authorizer</code> is configured. No execution is enabled by configuring it.</p>{% endif %}
    <p id="trace-replay-status" role="status"></p>
</div>
{% endif %}
<div class="detail-section observability-section" id="trace-timeline">
    <h2>Trace Timeline</h2>
    {% if coding_agent_label %}
    <div class="obs-plugin-session" role="note">
        {% if plugin_session %}
        <p><strong>A {{ plugin_session.agent_label }} session, saved by the MemoRizz plugin.</strong> This timeline has its turns: each request and final answer. {% if plugin_session.recorded %}Its full trajectory, with every command, tool call and file change and its tokens and cost, is on Agent harnesses.{% else %}No run was recorded for it, so its steps aren't in MemoRizz; add them with <code>memorizz plugin import-session</code> and the session's log.{% endif %}</p>
        {% if plugin_session.recorded %}<a class="btn btn-sm" href="/harnesses?run={{ plugin_session.run_id }}">Open its run</a>{% endif %}
        {% else %}
        <p><strong>{{ coding_agent_label }} sessions, saved by the MemoRizz plugin.</strong> Each thread is one session. Open one for its turns and a link to its full trajectory on Agent harnesses.</p>
        <a class="btn btn-sm" href="/harnesses">Agent harnesses</a>
        {% endif %}
    </div>
    {% endif %}
    {% if trace_events %}
    <div class="trace-timeline">
        <div class="conversation-messages">
            {% for event in trace_events %}
            <div id="{{ event.anchor }}" class="message {{ event.role or 'system' }} {% if event.event_id == selected_event_id %}trace-selected-event{% endif %}" {% if event.event_id == selected_event_id %}data-selected-event="true" tabindex="-1"{% endif %}>
                <div class="message-avatar">
                    {% if event.role == 'user' %}U{% elif event.role == 'assistant' %}A{% elif event.role == 'tool' %}T{% else %}S{% endif %}
                </div>
                <div class="message-bubble">
                    <div class="message-meta">
                        <span class="message-role">{{ event.title or event.role|default('Event')|title }}</span>
                        <div class="trace-meta">
                            {% if event.kind %}<span class="meta-tag trace-tag trace-tag--kind">{{ event.kind|replace('_', ' ')|title }}</span>{% endif %}
                            {% if event.outcome %}
                            <span class="meta-tag trace-tag {% if event.outcome == 'success' %}trace-tag--ok{% elif event.outcome == 'empty' %}trace-tag--muted{% elif event.outcome in ['fallback', 'degraded'] %}trace-tag--warning{% else %}trace-tag--critical{% endif %}">
                                {% if event.outcome == 'success' %}Completed{% elif event.outcome == 'empty' %}Completed · no results{% elif event.outcome == 'fallback' %}Completed via fallback{% elif event.outcome == 'degraded' %}Completed with limitations{% elif event.outcome == 'provider_error' %}Provider error{% else %}Failed{% endif %}
                            </span>
                            {% endif %}
                            {% if event.tool_provider %}<span class="meta-tag trace-tag">Provider {{ event.tool_provider }}</span>{% endif %}
                            {% if event.model or event.response_model %}<span class="meta-tag trace-tag">{{ event.provider or 'Provider unknown' }} · Requested: {{ event.model or 'unknown' }}</span>{% endif %}
                            {% if event.response_model %}<span class="meta-tag trace-tag">Returned: {{ event.response_model }}</span>{% elif event.kind == 'model_result' %}<span class="meta-tag trace-tag trace-tag--muted">Returned: unknown</span>{% endif %}
                            {% if event.persona_version is defined and event.persona_version is not none %}<span class="meta-tag trace-tag" title="{{ event.persona_id or '' }}">Persona v{{ event.persona_version }}</span>{% endif %}
                            {% if event.input_tokens is defined %}<span class="meta-tag trace-tag">{{ event.input_tokens }} input tokens · {{ event.output_tokens|default('unknown') }} output tokens</span>{% endif %}
                            {% if event.cached_tokens is defined %}<span class="meta-tag trace-tag">Cache read: {{ event.cached_tokens }} tokens</span>{% endif %}
                            {% if event.cache_write_tokens is defined %}<span class="meta-tag trace-tag">Cache write: {{ event.cache_write_tokens }} tokens</span>{% endif %}
                            {% if event.prompt_cache_enabled is defined and event.prompt_cache_enabled == false %}<span class="meta-tag trace-tag trace-tag--warning">Prompt cache disabled</span>{% endif %}
                            {% if event.finish_reason %}<span class="meta-tag trace-tag">Finish: {{ event.finish_reason }}</span>{% endif %}
                            {% if event.max_output_tokens is defined %}<span class="meta-tag trace-tag">Output limit: {{ event.max_output_tokens }}</span>{% endif %}
                            {% if event.response_chars is defined %}<span class="meta-tag trace-tag">{{ event.response_chars }} characters · {{ event.response_bytes }} bytes</span>{% endif %}
                            {% if event.duration_ms is defined %}<span class="meta-tag trace-tag">{{ event.duration_ms }} ms</span>{% endif %}
                            {% if event.status %}<span class="meta-tag trace-tag {% if event.status in ['error', 'partial'] %}trace-tag--warning{% endif %}">{{ event.status }}</span>{% endif %}
                            {% if event.outcome_reason_code %}<span class="meta-tag trace-tag trace-tag--muted">Reason {{ event.outcome_reason_code|replace('_', ' ') }}</span>{% endif %}
                            {% if event.canonical_page_type %}<span class="meta-tag trace-tag">Page {{ event.canonical_page_type }} · {{ event.canonical_page_id|default('—')|truncate(12) }}</span>{% endif %}
                            {% if event.thread_binding_status %}<span class="meta-tag trace-tag {% if event.thread_binding_status in ['matched', 'bound', 'verified'] %}trace-tag--ok{% else %}trace-tag--warning{% endif %}">Binding {{ event.thread_binding_status|replace('_', ' ') }}</span>{% endif %}
                            {% if event.ownership_verified is defined and event.ownership_verified is not none %}<span class="meta-tag trace-tag {% if event.ownership_verified %}trace-tag--ok{% else %}trace-tag--critical{% endif %}">Ownership {% if event.ownership_verified %}verified{% else %}unverified{% endif %}</span>{% endif %}
                            {% if event.grounding_status %}<span class="meta-tag trace-tag {% if event.grounding_status == 'ready' %}trace-tag--ok{% else %}trace-tag--critical{% endif %}">Grounding {{ event.grounding_status|replace('_', ' ') }}{% if event.grounding_source %} · {{ event.grounding_source|replace('_', ' ') }}{% endif %}</span>{% endif %}
                            {% if event.cache_decision %}<span class="meta-tag trace-tag {% if event.cache_decision == 'hit' %}trace-tag--ok{% elif event.cache_decision in ['bypassed', 'rejected'] %}trace-tag--warning{% else %}trace-tag--muted{% endif %}">Cache {{ event.cache_decision }}</span>{% endif %}
                            {% if event.kind == 'memory_context' %}<span class="meta-tag trace-tag {% if event.memory_degraded %}trace-tag--warning{% else %}trace-tag--ok{% endif %}">{{ event.memory_supplied_count|default(0) }} supplied · {{ event.memory_candidate_count|default(0) }} candidates</span>{% endif %}
                            {% if event.kind == 'memory_reference' %}<span class="meta-tag trace-tag trace-tag--ok">{{ event.memory_referenced_count|default(0) }} explicitly referenced</span>{% endif %}
                            {% if event.canonical_title_fingerprint or event.client_title_fingerprint %}<span class="meta-tag trace-tag trace-tag--fingerprint">Content fp {{ (event.canonical_title_fingerprint or event.client_title_fingerprint)|truncate(14) }}</span>{% endif %}
                            {% if event.request_context_fingerprint %}<span class="meta-tag trace-tag trace-tag--fingerprint">Context fp {{ event.request_context_fingerprint|truncate(14) }}</span>{% endif %}
                            {% if event.trace_id %}<span class="meta-tag trace-tag trace-tag--id">Trace {{ event.trace_id|truncate(14) }}</span>{% endif %}
                            {% if event.run_id %}<span class="meta-tag trace-tag trace-tag--id">Run {{ event.run_id|truncate(12) }}</span>{% endif %}
                            {% if event.span_id %}<span class="meta-tag trace-tag trace-tag--id">Span {{ event.span_id|truncate(12) }}</span>{% endif %}
                            <span class="meta-tag trace-tag trace-tag--id">Memory {{ event.memory_id|truncate(12) }}</span>
                            <span class="meta-tag trace-tag trace-tag--id">Thread {{ event.thread_id|default('—')|truncate(12) }}</span>
                            <span class="message-time">{{ event.timestamp }}</span>
                        </div>
                    </div>
                    {% if event.input_refs or event.output_refs %}
                    <details {% if event.status in ['error', 'partial'] %}open{% endif %}>
                        <summary>Memory lineage and artifact provenance</summary>
                        <p>Producer span: <code>{{ event.parent_span_id or 'Not observed' }}</code></p>
                        <table>
                            <thead><tr><th>Direction</th><th>Resource</th><th>Reference</th><th>Role</th><th>Version</th><th>Provenance</th></tr></thead>
                            <tbody>
                            {% for ref in event.input_refs or [] %}<tr><td>Input</td><td>{{ ref.resource_type }}</td><td><code>{{ ref.ref }}</code></td><td>{{ ref.role or 'Unspecified' }}</td><td>{{ ref.version or 'Unknown' }}</td><td>{{ ref.provenance_status }}</td></tr>{% endfor %}
                            {% for ref in event.output_refs or [] %}<tr><td>Output</td><td>{{ ref.resource_type }}</td><td><code>{{ ref.ref }}</code></td><td>{{ ref.role or 'Unspecified' }}</td><td>{{ ref.version or 'Unknown' }}</td><td>{{ ref.provenance_status }}</td></tr>{% endfor %}
                            </tbody>
                        </table>
                        {% if event.kind == 'artifact_persisted' %}<p>Persistence verified: {{ event.persistence_verified }} · Sources: {{ event.input_refs|length }} · Task: {{ event.task_id or 'Unspecified' }}</p>{% endif %}
                    </details>
                    {% endif %}
                    {% if event.kind in ['output_contract', 'ui_delivery'] %}
                    <div class="message-text">
                        <strong>Output contract: {{ event.contract_name }}</strong>
                        {% if event.kind == 'output_contract' %}<p>Opening marker: {{ event.opening_marker_found }} · Closing marker: {{ event.closing_marker_found }} · Parser: {{ event.parser_status }} · Recovery: {{ event.recovery_status or ('used' if event.recovery_used else 'not used') }} · Nodes: {{ event.nodes|default('unknown') }} · Edges: {{ event.edges|default('unknown') }}</p>{% endif %}
                        {% if event.kind == 'ui_delivery' %}<p>Emitted: {{ event.emitted }} · Browser acknowledged: {{ event.acknowledged|default('unknown', true) }}</p>{% endif %}
                    </div>
                    {% endif %}
                    {% if trace_permissions and trace_permissions['trace.reveal'] and trace_content_mode != 'metadata' %}<button class="btn btn-sm" type="button" data-reveal-event="{{ event.event_id }}" data-agent-id="{{ event.agent_id }}" data-root-id="{{ event.root_trace_id }}" data-thread-id="{{ event.thread_id or '' }}" data-turn-id="{{ event.turn_id or '' }}" data-run-id="{{ event.run_id or '' }}">Reveal trace content</button><pre class="message-text" hidden></pre>{% endif %}
                    <details><summary>Normalized metadata JSON</summary><pre class="message-text">{{ event|tojson(indent=2) }}</pre></details>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    {% else %}
    <div class="empty-pane">
        <div class="empty-icon">TRACE</div>
        <p>{% if trace_analysis and trace_analysis.coverage.normalization_errors %}Trace evidence is unavailable. Inspect the coverage errors above.{% else %}No traces recorded yet{% endif %}</p>
        <p class="empty-hint">Run the agent in Playground to generate trace logs.</p>
    </div>
    {% endif %}
</div>
{% endif %}

<script>
document.addEventListener('DOMContentLoaded', function() {
    const parentRows = document.querySelectorAll('.traces-agent-row--parent[data-agent-id]');
    const threadRows = document.querySelectorAll('.traces-agent-row--thread[data-agent-id]');
    const threadRowsByAgent = new Map();
    const timelineSection = document.getElementById('trace-timeline');

    function smoothScrollToTimeline() {
        if (!timelineSection) {
            return;
        }
        requestAnimationFrame(function() {
            timelineSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
        });
    }

    const initialParams = new URLSearchParams(window.location.search);
    if (
        window.location.hash === '#trace-timeline' ||
        initialParams.get('scroll') === 'timeline'
    ) {
        smoothScrollToTimeline();
        if (initialParams.get('scroll') === 'timeline') {
            initialParams.delete('scroll');
            const cleaned = initialParams.toString();
            const cleanedUrl = '/traces' + (cleaned ? '?' + cleaned : '');
            window.history.replaceState(null, '', cleanedUrl);
        }
    }

    threadRows.forEach(function(row) {
        const agentId = row.dataset.agentId || '';
        if (!threadRowsByAgent.has(agentId)) {
            threadRowsByAgent.set(agentId, []);
        }
        threadRowsByAgent.get(agentId).push(row);
    });

    function setExpanded(agentId, expanded) {
        parentRows.forEach(function(parentRow) {
            if (parentRow.dataset.agentId !== agentId) {
                return;
            }
            parentRow.classList.toggle('is-expanded', expanded);
            parentRow.setAttribute('aria-expanded', expanded ? 'true' : 'false');
        });

        const rows = threadRowsByAgent.get(agentId) || [];
        rows.forEach(function(threadRow) {
            threadRow.classList.toggle('is-collapsed', !expanded);
        });
    }

    function navigateToTrace(row, forceTimelineScroll) {
        const agentId = row.dataset.agentId || '';
        const threadId = row.dataset.threadId || '';
        const threadMemoryId = row.dataset.threadMemoryId || '';
        const params = new URLSearchParams(window.location.search);
        params.set('agent_id', agentId);
        if (threadId) {
            params.set('thread_id', threadId);
        } else {
            params.delete('thread_id');
        }
        if (threadMemoryId) {
            params.set('thread_memory_id', threadMemoryId);
        } else {
            params.delete('thread_memory_id');
        }
        const queryInput = document.getElementById('agent-search');
        const queryValue = queryInput ? queryInput.value.trim() : '';
        if (queryValue) {
            params.set('q', queryValue);
        } else {
            params.delete('q');
        }

        if (forceTimelineScroll) {
            params.set('scroll', 'timeline');
        } else {
            params.delete('scroll');
        }

        const targetUrl = '/traces?' + params.toString();

        const currentPath = window.location.pathname;
        const currentSearch = window.location.search;
        const targetSearch = '?' + params.toString();
        const isSameRoute = currentPath === '/traces' && currentSearch === targetSearch;

        if (isSameRoute && forceTimelineScroll) {
            window.history.replaceState(null, '', targetUrl);
            smoothScrollToTimeline();
            return;
        }

        window.location.href = targetUrl;
    }

    parentRows.forEach(function(parentRow) {
        const agentId = parentRow.dataset.agentId || '';
        parentRow.setAttribute(
            'aria-expanded',
            parentRow.classList.contains('is-expanded') ? 'true' : 'false'
        );

        const toggleExpansion = function() {
            const currentlyExpanded = parentRow.classList.contains('is-expanded');
            setExpanded(agentId, !currentlyExpanded);
        };

        parentRow.addEventListener('click', function() {
            const eventCount = Number(parentRow.dataset.eventCount || '0');
            if (!Number.isNaN(eventCount) && eventCount === 0) {
                navigateToTrace(parentRow, true);
                return;
            }
            toggleExpansion();
        });

        parentRow.addEventListener('keydown', function(event) {
            if (event.key === 'Enter' || event.key === ' ') {
                event.preventDefault();
                const eventCount = Number(parentRow.dataset.eventCount || '0');
                if (!Number.isNaN(eventCount) && eventCount === 0) {
                    navigateToTrace(parentRow, true);
                    return;
                }
                toggleExpansion();
            }
        });
    });

    threadRows.forEach(function(row) {
        const openTrace = function() {
            navigateToTrace(row, true);
        };

        row.addEventListener('click', openTrace);
        row.addEventListener('keydown', function(event) {
            if (event.key === 'Enter' || event.key === ' ') {
                event.preventDefault();
                openTrace();
            }
        });
    });

    // Monitor grid behaviour for the navigator: filter, chips, sortable columns
    // and j/k keys. Agents keep their threads directly beneath them.
    const navigator = document.getElementById('trace-agent-navigator');
    const table = document.getElementById('trace-agents-table');
    const filterInput = document.getElementById('agent-search');
    if (!navigator || !table || !table.tBodies[0]) {
        if (filterInput) {
            document.addEventListener('keydown', function(event) {
                if (event.key !== '/' || event.metaKey || event.ctrlKey || event.altKey) return;
                if (event.target.closest && event.target.closest('input, textarea, select, [contenteditable="true"]')) return;
                event.preventDefault();
                if (navigator) navigator.open = true;
                filterInput.focus();
            });
        }
        return;
    }
    const tbody = table.tBodies[0];
    const none = document.getElementById('trace-agents-none');
    const serverQuery = filterInput ? (filterInput.dataset.serverQuery || '') : '';
    let tag = '';

    const groups = function() {
        return Array.from(tbody.querySelectorAll('.traces-agent-row--parent')).map(function(parent) {
            return { parent: parent, threads: threadRowsByAgent.get(parent.dataset.agentId || '') || [] };
        });
    };

    function applyFilter() {
        const query = (filterInput && filterInput.value || '').trim().toLowerCase();
        // Rows already narrowed by the server search keep matching that same query.
        const textQuery = query && query !== serverQuery ? query : '';
        let shown = 0;
        groups().forEach(function(group) {
            const tags = ' ' + (group.parent.dataset.tags || '') + ' ';
            const visible = (!tag || tags.includes(' ' + tag + ' ')) &&
                (!textQuery || (group.parent.dataset.search || '').includes(textQuery));
            group.parent.hidden = !visible;
            group.threads.forEach(function(thread) { thread.hidden = !visible; });
            if (visible) shown += 1;
            // A match on a thread ID opens its agent so the thread is in view.
            if (visible && textQuery && group.threads.length &&
                !(group.parent.dataset.name || '').includes(textQuery) &&
                !(group.parent.dataset.agentId || '').toLowerCase().includes(textQuery)) {
                setExpanded(group.parent.dataset.agentId || '', true);
            }
        });
        if (none) none.hidden = shown > 0;
    }

    table.querySelectorAll('thead button[data-nav-sort]').forEach(function(button) {
        button.addEventListener('click', function() {
            const key = button.dataset.navSort;
            const th = button.closest('th');
            const text = button.dataset.sortType === 'text';
            const current = th.getAttribute('aria-sort');
            const ascending = current === 'none' || !current ? text : current === 'descending';
            table.querySelectorAll('thead th[aria-sort]').forEach(function(other) {
                other.setAttribute('aria-sort', 'none');
            });
            th.setAttribute('aria-sort', ascending ? 'ascending' : 'descending');
            const value = function(row) {
                return text ? String(row.dataset[key] || '') : Number(row.dataset[key] || 0);
            };
            groups().sort(function(a, b) {
                const order = text ? value(a.parent).localeCompare(value(b.parent)) : value(a.parent) - value(b.parent);
                return ascending ? order : -order;
            }).forEach(function(group) {
                tbody.appendChild(group.parent);
                group.threads.forEach(function(thread) { tbody.appendChild(thread); });
            });
        });
    });

    navigator.querySelectorAll('[data-nav-tag]').forEach(function(button) {
        button.addEventListener('click', function() {
            tag = button.dataset.navTag;
            navigator.querySelectorAll('[data-nav-tag]').forEach(function(other) {
                other.setAttribute('aria-pressed', other === button ? 'true' : 'false');
            });
            applyFilter();
        });
    });
    if (filterInput) filterInput.addEventListener('input', applyFilter);

    const visibleRows = function() {
        return Array.from(tbody.rows).filter(function(row) {
            return !row.hidden && !row.classList.contains('is-collapsed');
        });
    };

    function focusRow(row) {
        if (!row) return;
        row.focus({ preventScroll: true });
        row.scrollIntoView({ block: 'nearest' });
    }

    function move(from, step) {
        const rows = visibleRows();
        if (!rows.length) return;
        const start = from ? rows.indexOf(from) : -1;
        const fallback = rows.find(function(row) { return row.classList.contains('is-selected'); });
        if (start < 0) {
            focusRow(fallback || rows[0]);
            return;
        }
        focusRow(rows[Math.max(0, Math.min(rows.length - 1, start + step))]);
    }

    document.addEventListener('keydown', function(event) {
        if (event.metaKey || event.ctrlKey || event.altKey) return;
        const target = event.target;
        if (target.closest && target.closest('input, textarea, select, [contenteditable="true"]')) {
            if (target === filterInput && event.key === 'Escape') filterInput.blur();
            if (target === filterInput && event.key === 'ArrowDown') {
                event.preventDefault();
                move(null, 1);
            }
            return;
        }
        if (event.key === '/' && filterInput) {
            event.preventDefault();
            navigator.open = true;
            filterInput.focus();
            return;
        }
        if (!navigator.open) return;
        const row = target.closest ? target.closest('#trace-agents-table tbody tr') : null;
        if (event.key === 'j' || (row && event.key === 'ArrowDown')) {
            event.preventDefault();
            move(row, 1);
        } else if (event.key === 'k' || (row && event.key === 'ArrowUp')) {
            event.preventDefault();
            move(row, -1);
        } else if (row && event.key === 'ArrowRight' && row.classList.contains('traces-agent-row--parent')) {
            event.preventDefault();
            setExpanded(row.dataset.agentId || '', true);
        } else if (row && event.key === 'ArrowLeft') {
            event.preventDefault();
            if (row.classList.contains('traces-agent-row--thread')) {
                focusRow(Array.from(parentRows).find(function(parent) {
                    return parent.dataset.agentId === row.dataset.agentId;
                }));
            } else {
                setExpanded(row.dataset.agentId || '', false);
            }
        }
    });

    applyFilter();
});
</script>
{% endblock %}