{% extends "base.html" %}

{% block title %}Observability & Monitoring - Memorizz{% 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>
</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>

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

<div class="detail-section observability-section">
    <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 }}">
            {% endif %}
            <input
                type="text"
                id="agent-search"
                name="q"
                class="traces-search-input"
                value="{{ agent_query }}"
                placeholder="Search by name, ID, or mode"
            >
            <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 %}
</div>

{% if selected_agent %}
<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 }}</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-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">{{ trace_analysis.summary.verified_outcome_successes }}/{{ trace_analysis.summary.verified_outcomes }}</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.tool_failures %}trace-analysis-stat--warning{% endif %}">
            <span class="trace-analysis-stat-kicker">Tool health</span>
            <span class="trace-analysis-stat-value">{{ trace_analysis.summary.tool_calls }}</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.unique_tools }} unique tools</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>

    {% 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>
            <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 this trace window</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 %}

<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 class="message {{ event.role or 'system' }}">
                <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.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.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>
                    <div class="message-text">{{ event.content or 'No content' }}</div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    {% else %}
    <div class="empty-pane">
        <div class="empty-icon">TRACE</div>
        <p>No traces recorded yet</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 %}