{% extends "base.html" %}

{% block title %}Observability & Monitoring - Memorizz{% endblock %}
{% block head %}<script src="/static/js/observability.js?v=3" defer></script>{% endblock %}

{% block content %}
<div class="page-header">
    <span class="page-eyebrow">Operations / Observability</span>
    <h1>Observability &amp; monitoring</h1>
    <p>Follow context lineage, grounding, cache routing, tool execution, and verified outcomes by agent and thread.</p>
    <a class="btn" id="trace-health-link" href="{{ selection_urls.health }}">Observability health</a>
    <a class="btn" id="trace-compare-link" href="{{ selection_urls.compare }}">Compare recorded traces</a>
</div>

<div class="trace-access-banner">
    <span class="badge {% if ui_read_only %}badge-success{% else %}badge-warning{% endif %}">
        {% if ui_read_only %}Read-only provider{% else %}Writable provider{% endif %}
    </span>
    <span>Content mode: <strong>{{ trace_content_mode or 'full' }}</strong></span>
    {% if trace_query_metadata %}
    <span>Query: {% if trace_query_metadata.provider_native %}provider-native{% else %}compatibility fallback{% endif %}</span>
    {% if trace_query_metadata.truncated %}<span class="badge badge-warning">Window truncated</span>{% endif %}
    {% endif %}
</div>

<details class="detail-section" id="incident-finder-panel" {% if not selected_agent %}open{% endif %}>
    <summary>Incident Finder</summary>
    <h2>Incident Finder</h2>
    <form id="incident-finder" class="traces-search-form">
        <label>Trace, thread, job, source, artifact or error ID <input class="traces-search-input" name="q" maxlength="240" autocomplete="off"></label>
        <label>From <input name="start_time" type="datetime-local"></label>
        <label>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">
        <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 through host</button>
    </form>
    {% endif %}
    <p id="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" type="button" hidden>Load next page</button>
</details>

<details class="trace-access-banner" 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" id="trace-agent-navigator" {% if not selected_agent %}open{% endif %}>
    <summary>Agent and thread navigator</summary>
    <div class="traces-toolbar">
        <h2>Agents</h2>
        <form class="traces-search-form" method="get" action="/traces">
            {% 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 %}
            <input
                type="text"
                id="agent-search"
                name="q"
                class="traces-search-input"
                value="{{ agent_query }}"
                placeholder="Search loaded agents, threads, traces, sources or artifacts"
            >
            <button type="submit" class="btn">Search</button>
        </form>
    </div>

    {% if agent_rows %}
    <div class="traces-table-wrap">
        <table class="traces-agents-table">
            <thead>
                <tr>
                    <th>Agent</th>
                    <th>ID</th>
                    <th>Mode</th>
                    <th>Memories</th>
                    <th>Tools</th>
                    <th>Trace Events</th>
                    <th>Last Activity</th>
                </tr>
            </thead>
            <tbody>
                {% for row in agent_rows %}
                {% set is_parent_expanded = (row.agent_id == selected_agent_id) %}
                <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 }}"
                    tabindex="0"
                >
                    <td>
                        <div class="traces-parent-cell">
                            <span class="traces-parent-caret" aria-hidden="true"></span>
                            <span>{{ row.name }}</span>
                        </div>
                    </td>
                    <td><code>{{ row.agent_id[:10] }}...</code></td>
                    <td>{{ row.mode }}</td>
                    <td>{{ row.memory_count }}</td>
                    <td>{{ row.tool_count }}</td>
                    <td>{{ row.event_count }}</td>
                    <td>{{ row.last_activity }}</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"
                >
                    <td class="traces-thread-cell">
                        <div class="traces-thread-content">
                            <span class="traces-thread-label">Thread {{ thread_row.thread_id|truncate(24) }}</span>
                        </div>
                    </td>
                    <td><div class="traces-thread-content"><code>{{ thread_row.thread_id|truncate(18) }}</code></div></td>
                    <td><div class="traces-thread-content">thread</div></td>
                    <td><div class="traces-thread-content"><code>{{ thread_row.memory_id|truncate(16) }}</code></div></td>
                    <td><div class="traces-thread-content">-</div></td>
                    <td><div class="traces-thread-content">{{ thread_row.event_count }}</div></td>
                    <td><div class="traces-thread-content">{{ thread_row.last_activity }}</div></td>
                </tr>
                {% endfor %}
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="empty-pane">
        <div class="empty-icon">TRACE</div>
        <p>No matching agents</p>
        <p class="empty-hint">Try a different search query.</p>
    </div>
    {% 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>
    <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>
    <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.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>

{% if trace_analysis %}
<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 %}No recorded evidence{% 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>
{% endif %}

{% include "trace_waterfall.html" %}
{% include "trace_inspectors.html" %}
{% if selected_agent_id and trace_waterfall and trace_permissions and trace_permissions['replay.create'] %}
<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 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 %}<span class="meta-tag trace-tag">{{ event.provider or 'Provider unknown' }} · {{ event.model }}</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.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();
            }
        });
    });
});
</script>
{% endblock %}