<!-- htmlhint doctype-first:false -->
<!-- Observability Dashboard Partial -->
<script>
// Dark mode aware Chart.js defaults - shared across all observability charts
if (!window.getChartDefaults) {
window.getChartDefaults = function() {
const isDark = document.documentElement.classList.contains('dark');
return {
color: isDark ? '#e5e7eb' : '#374151',
gridColor: isDark ? '#374151' : '#e5e7eb',
titleColor: isDark ? '#f3f4f6' : '#1f2937',
tickColor: isDark ? '#d1d5db' : '#6b7280',
};
};
}
</script>
<div class="observability-container" x-data="{
viewMode: 'traces',
selectedTrace: null,
timeRange: '24h',
statusFilter: 'all',
minDuration: '',
maxDuration: '',
httpMethod: '',
userEmail: '',
nameSearch: '',
attributeSearch: '',
toolName: '',
showAdvancedFilters: false,
loading: false,
stats: {},
tracesInterval: null,
statsInterval: null,
savedQueries: [],
selectedQueryId: '',
showSaveQueryModal: false,
saveQueryName: '',
saveQueryDescription: '',
saveQueryIsShared: false,
metricsLoaded: false,
toolsLoaded: false,
promptsLoaded: false,
resourcesLoaded: false,
metricsLoading: false,
toolsLoading: false,
promptsLoading: false,
resourcesLoading: false,
async loadMetricsView() {
// Only load once, but allow retry if previous load was interrupted
if (this.metricsLoaded) {
console.log('Metrics view already loaded, skipping fetch');
return;
}
// Prevent concurrent loads
if (this.metricsLoading) {
console.log('Metrics view already loading, skipping');
return;
}
this.metricsLoading = true;
console.log('Loading metrics view for the first time...');
try {
const response = await fetch('{{ root_path }}/admin/observability/metrics/partial');
if (response.ok) {
// Check if still on metrics view before rendering
if (this.viewMode !== 'metrics') {
console.log('View changed during fetch, aborting metrics load');
this.metricsLoading = false;
return;
}
const html = await response.text();
const container = document.getElementById('metrics-container');
if (!container) {
console.warn('Metrics container not found');
this.metricsLoading = false;
return;
}
container.innerHTML = html;
// Execute any script tags (innerHTML doesn't execute them)
const scripts = container.querySelectorAll('script');
scripts.forEach(script => {
const newScript = document.createElement('script');
if (script.src) {
newScript.src = script.src;
} else {
newScript.textContent = script.textContent;
}
document.head.appendChild(newScript);
});
// Wait for scripts to execute and charts to render
await new Promise(resolve => setTimeout(resolve, 100));
// Re-initialize Alpine.js
if (window.Alpine) {
window.Alpine.initTree(container);
}
// Only mark as loaded if we're still on the metrics view
if (this.viewMode === 'metrics') {
this.metricsLoaded = true;
console.log('Metrics view loaded successfully');
} else {
console.log('View changed after render, not marking as loaded');
}
}
} catch (error) {
console.error('Failed to load metrics view:', error);
} finally {
this.metricsLoading = false;
}
},
async loadToolsView() {
// Only load once, but allow retry if previous load was interrupted
if (this.toolsLoaded) {
console.log('Tools view already loaded, skipping fetch');
return;
}
// Prevent concurrent loads
if (this.toolsLoading) {
console.log('Tools view already loading, skipping');
return;
}
this.toolsLoading = true;
console.log('Loading tools view for the first time...');
try {
const response = await fetch('{{ root_path }}/admin/observability/tools/partial');
if (response.ok) {
// Check if still on tools view before rendering
if (this.viewMode !== 'tools') {
console.log('View changed during fetch, aborting tools load');
this.toolsLoading = false;
return;
}
const html = await response.text();
const container = document.getElementById('tools-container');
if (!container) {
console.warn('Tools container not found');
this.toolsLoading = false;
return;
}
container.innerHTML = html;
// Execute any script tags (innerHTML doesn't execute them)
const scripts = container.querySelectorAll('script');
scripts.forEach(script => {
const newScript = document.createElement('script');
if (script.src) {
newScript.src = script.src;
} else {
newScript.textContent = script.textContent;
}
document.head.appendChild(newScript);
});
// Wait for scripts to execute and charts to render
await new Promise(resolve => setTimeout(resolve, 100));
// Re-initialize Alpine.js
if (window.Alpine) {
window.Alpine.initTree(container);
}
// Only mark as loaded if we're still on the tools view
if (this.viewMode === 'tools') {
this.toolsLoaded = true;
console.log('Tools view loaded successfully');
} else {
console.log('View changed after render, not marking as loaded');
}
}
} catch (error) {
console.error('Failed to load tools view:', error);
} finally {
this.toolsLoading = false;
}
},
async loadPromptsView() {
// Only load once, but allow retry if previous load was interrupted
if (this.promptsLoaded) {
console.log('Prompts view already loaded, skipping fetch');
return;
}
// Prevent concurrent loads
if (this.promptsLoading) {
console.log('Prompts view already loading, skipping');
return;
}
this.promptsLoading = true;
console.log('Loading prompts view for the first time...');
try {
const response = await fetch('{{ root_path }}/admin/observability/prompts/partial');
if (response.ok) {
// Check if still on prompts view before rendering
if (this.viewMode !== 'prompts') {
console.log('View changed during fetch, aborting prompts load');
this.promptsLoading = false;
return;
}
const html = await response.text();
const container = document.getElementById('prompts-container');
if (!container) {
console.warn('Prompts container not found');
this.promptsLoading = false;
return;
}
container.innerHTML = html;
// Execute any script tags (innerHTML doesn't execute them)
const scripts = container.querySelectorAll('script');
scripts.forEach(script => {
const newScript = document.createElement('script');
if (script.src) {
newScript.src = script.src;
} else {
newScript.textContent = script.textContent;
}
document.head.appendChild(newScript);
});
// Wait for scripts to execute and charts to render
await new Promise(resolve => setTimeout(resolve, 100));
// Re-initialize Alpine.js
if (window.Alpine) {
window.Alpine.initTree(container);
}
// Only mark as loaded if we're still on the prompts view
if (this.viewMode === 'prompts') {
this.promptsLoaded = true;
console.log('Prompts view loaded successfully');
} else {
console.log('View changed after render, not marking as loaded');
}
}
} catch (error) {
console.error('Failed to load prompts view:', error);
} finally {
this.promptsLoading = false;
}
},
async loadResourcesView() {
// Only load once, but allow retry if previous load was interrupted
if (this.resourcesLoaded) {
console.log('Resources view already loaded, skipping fetch');
return;
}
// Prevent concurrent loads
if (this.resourcesLoading) {
console.log('Resources view already loading, skipping');
return;
}
this.resourcesLoading = true;
console.log('Loading resources view for the first time...');
try {
const response = await fetch('{{ root_path }}/admin/observability/resources/partial');
if (response.ok) {
// Check if still on resources view before rendering
if (this.viewMode !== 'resources') {
console.log('View changed during fetch, aborting resources load');
this.resourcesLoading = false;
return;
}
const html = await response.text();
const container = document.getElementById('resources-container');
if (!container) {
console.warn('Resources container not found');
this.resourcesLoading = false;
return;
}
container.innerHTML = html;
// Execute any script tags (innerHTML doesn't execute them)
const scripts = container.querySelectorAll('script');
scripts.forEach(script => {
const newScript = document.createElement('script');
if (script.src) {
newScript.src = script.src;
} else {
newScript.textContent = script.textContent;
}
document.head.appendChild(newScript);
});
// Wait for scripts to execute
await new Promise(resolve => setTimeout(resolve, 100));
// Re-initialize Alpine.js
if (window.Alpine) {
window.Alpine.initTree(container);
}
// Only mark as loaded if we're still on the resources view
if (this.viewMode === 'resources') {
this.resourcesLoaded = true;
console.log('Resources view loaded successfully');
} else {
console.log('View changed after render, not marking as loaded');
}
}
} catch (error) {
console.error('Failed to load resources view:', error);
} finally {
this.resourcesLoading = false;
}
},
refreshTraces() {
let url = `{{ root_path }}/admin/observability/traces?time_range=${this.timeRange}&status_filter=${this.statusFilter}&limit=50`;
if (this.minDuration) url += `&min_duration=${this.minDuration}`;
if (this.maxDuration) url += `&max_duration=${this.maxDuration}`;
if (this.httpMethod) url += `&http_method=${this.httpMethod}`;
if (this.userEmail) url += `&user_email=${encodeURIComponent(this.userEmail)}`;
if (this.nameSearch) url += `&name_search=${encodeURIComponent(this.nameSearch)}`;
if (this.attributeSearch) url += `&attribute_search=${encodeURIComponent(this.attributeSearch)}`;
if (this.toolName) url += `&tool_name=${encodeURIComponent(this.toolName)}`;
htmx.ajax('GET', url, {target: '#traces-list', swap: 'innerHTML'});
},
refreshStats() {
htmx.ajax('GET', '{{ root_path }}/admin/observability/stats', {target: '#stats-container', swap: 'innerHTML'});
},
startPolling() {
this.refreshTraces();
this.refreshStats();
this.tracesInterval = setInterval(() => this.refreshTraces(), 5000);
this.statsInterval = setInterval(() => this.refreshStats(), 30000);
},
stopPolling() {
if (this.tracesInterval) clearInterval(this.tracesInterval);
if (this.statsInterval) clearInterval(this.statsInterval);
},
applyFilters() {
this.stopPolling();
this.refreshTraces();
this.startPolling();
},
async loadSavedQueries() {
try {
const response = await fetch('{{ root_path }}/admin/observability/queries');
if (response.ok) {
this.savedQueries = await response.json();
}
} catch (e) {
console.error('Failed to load saved queries:', e);
}
},
async applySavedQuery() {
if (!this.selectedQueryId) return;
try {
const response = await fetch(`{{ root_path }}/admin/observability/queries/${this.selectedQueryId}`);
if (response.ok) {
const query = await response.json();
const config = query.filter_config;
this.timeRange = config.timeRange || '24h';
this.statusFilter = config.statusFilter || 'all';
this.minDuration = config.minDuration || '';
this.maxDuration = config.maxDuration || '';
this.toolName = config.toolName || '';
this.httpMethod = config.httpMethod || '';
this.userEmail = config.userEmail || '';
this.nameSearch = config.nameSearch || '';
this.attributeSearch = config.attributeSearch || '';
this.applyFilters();
// Track usage
await fetch(`{{ root_path }}/admin/observability/queries/${this.selectedQueryId}/use`, { method: 'POST' });
}
} catch (e) {
console.error('Failed to apply saved query:', e);
}
},
getCurrentFilterConfig() {
return {
timeRange: this.timeRange,
statusFilter: this.statusFilter,
minDuration: this.minDuration,
maxDuration: this.maxDuration,
httpMethod: this.httpMethod,
userEmail: this.userEmail,
nameSearch: this.nameSearch,
attributeSearch: this.attributeSearch,
toolName: this.toolName
};
},
async saveCurrentQuery() {
if (!this.saveQueryName) {
alert('Please enter a name for the query');
return;
}
try {
const response = await fetch('{{ root_path }}/admin/observability/queries', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
name: this.saveQueryName,
description: this.saveQueryDescription,
filter_config: this.getCurrentFilterConfig(),
is_shared: this.saveQueryIsShared
})
});
if (response.ok) {
this.showSaveQueryModal = false;
this.saveQueryName = '';
this.saveQueryDescription = '';
this.saveQueryIsShared = false;
await this.loadSavedQueries();
alert('Query saved successfully!');
} else {
alert('Failed to save query');
}
} catch (e) {
console.error('Failed to save query:', e);
alert('Failed to save query');
}
},
async deleteSavedQuery(queryId) {
if (!confirm('Are you sure you want to delete this saved query?')) return;
try {
const response = await fetch(`{{ root_path }}/admin/observability/queries/${queryId}`, { method: 'DELETE' });
if (response.ok) {
await this.loadSavedQueries();
if (this.selectedQueryId == queryId) {
this.selectedQueryId = '';
}
}
} catch (e) {
console.error('Failed to delete query:', e);
}
},
resetLoadedFlags() {
// Reset loaded flags so partials will reload when returning to the tab
this.metricsLoaded = false;
this.toolsLoaded = false;
this.promptsLoaded = false;
this.resourcesLoaded = false;
console.log('Observability loaded flags reset');
}
}" x-init="
startPolling();
loadSavedQueries();
// Listen for tab leave event to reset state
document.addEventListener('observability:leave', () => resetLoadedFlags());
$watch('timeRange', () => applyFilters());
$watch('statusFilter', () => applyFilters());
$watch('minDuration', () => { if(minDuration) applyFilters(); });
$watch('maxDuration', () => { if(maxDuration) applyFilters(); });
$watch('httpMethod', () => applyFilters());
$watch('userEmail', () => { if(userEmail) applyFilters(); });
$watch('nameSearch', () => { if(nameSearch) applyFilters(); });
$watch('attributeSearch', () => { if(attributeSearch) applyFilters(); });
$watch('toolName', () => { if(toolName) applyFilters(); });
$watch('selectedQueryId', () => { if(selectedQueryId) applySavedQuery(); });
">
<style>
/* Minimal styles for components that need precise positioning */
.span-timeline {
flex: 1;
height: 24px;
position: relative;
margin: 0 0.5rem;
}
.span-bar {
position: absolute;
height: 100%;
border-radius: 0.25rem;
cursor: pointer;
transition: opacity 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
.span-bar:hover {
opacity: 0.8;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.critical-path-bar {
box-shadow: 0 0 0 2px #f59e0b;
}
.time-marker {
position: absolute;
top: 0;
display: flex;
flex-direction: column;
align-items: center;
}
</style>
<!-- Header -->
<div class="mb-8 pb-4 border-b-2 border-gray-200 dark:border-gray-700">
<!-- Title and Filters Row -->
<div class="flex justify-between items-center mb-4 flex-wrap gap-4">
<h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100 flex items-center gap-2">
<span>🔍</span>
Observability Dashboard
</h1>
<div class="flex gap-4 items-center" x-show="viewMode === 'traces'">
<select
x-model="selectedQueryId"
class="px-4 py-2 text-sm border border-gray-300 rounded-md bg-white hover:bg-gray-50 cursor-pointer transition-all dark:bg-gray-700 dark:text-gray-100 dark:border-gray-600 dark:hover:bg-gray-600"
style="min-width: 200px;"
>
<option value="">📋 Saved Queries</option>
<template x-for="query in savedQueries" :key="query.id">
<option :value="query.id" x-text="query.name + (query.is_shared ? ' (shared)' : '')"></option>
</template>
</select>
<button
class="px-4 py-2 text-sm border border-gray-300 rounded-md bg-white hover:bg-gray-50 cursor-pointer transition-all dark:bg-gray-700 dark:text-gray-100 dark:border-gray-600 dark:hover:bg-gray-600"
@click="showSaveQueryModal = true"
title="Save current filters as a query"
>
💾 Save Query
</button>
<select
x-model="timeRange"
class="px-4 py-2 text-sm border border-gray-300 rounded-md bg-white hover:bg-gray-50 cursor-pointer transition-all dark:bg-gray-700 dark:text-gray-100 dark:border-gray-600 dark:hover:bg-gray-600"
>
<option value="1h">Last Hour</option>
<option value="6h">Last 6 Hours</option>
<option value="24h" selected>Last 24 Hours</option>
<option value="7d">Last 7 Days</option>
</select>
<select
x-model="statusFilter"
class="px-4 py-2 text-sm border border-gray-300 rounded-md bg-white hover:bg-gray-50 cursor-pointer transition-all dark:bg-gray-700 dark:text-gray-100 dark:border-gray-600 dark:hover:bg-gray-600"
>
<option value="all" selected>All Status</option>
<option value="ok">Success Only</option>
<option value="error">Errors Only</option>
</select>
<button
class="px-4 py-2 text-sm border rounded-md cursor-pointer transition-all dark:border-gray-600 dark:hover:bg-gray-600"
:class="showAdvancedFilters ? 'bg-blue-500 text-white border-blue-500 dark:bg-blue-600 dark:border-blue-500' : 'bg-white border-gray-300 hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-100'"
@click="showAdvancedFilters = !showAdvancedFilters"
>
⚙️ Advanced Filters
</button>
<button
class="px-4 py-2 text-sm bg-blue-500 text-white rounded-md cursor-pointer font-medium transition-colors hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-500"
@click="refreshStats(); refreshTraces();"
>
🔄 Refresh
</button>
</div>
</div>
<!-- View Mode Tabs Row -->
<div class="flex gap-2 flex-wrap">
<button
@click="viewMode = 'traces'"
:class="viewMode === 'traces' ? 'bg-blue-500 text-white border-blue-500 dark:bg-blue-600 dark:border-blue-500' : 'bg-white border-gray-300 hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-100 dark:border-gray-600 dark:hover:bg-gray-600'"
class="px-4 py-2 text-sm border rounded-md cursor-pointer transition-all"
>
📋 Traces
</button>
<button
@click="viewMode = 'metrics'; loadMetricsView()"
:class="viewMode === 'metrics' ? 'bg-blue-500 text-white border-blue-500 dark:bg-blue-600 dark:border-blue-500' : 'bg-white border-gray-300 hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-100 dark:border-gray-600 dark:hover:bg-gray-600'"
class="px-4 py-2 text-sm border rounded-md cursor-pointer transition-all"
>
📊 Advanced Metrics
</button>
<button
@click="viewMode = 'tools'; loadToolsView()"
:class="viewMode === 'tools' ? 'bg-blue-500 text-white border-blue-500 dark:bg-blue-600 dark:border-blue-500' : 'bg-white border-gray-300 hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-100 dark:border-gray-600 dark:hover:bg-gray-600'"
class="px-4 py-2 text-sm border rounded-md cursor-pointer transition-all"
>
🔧 MCP Tools
</button>
<button
@click="viewMode = 'prompts'; loadPromptsView()"
:class="viewMode === 'prompts' ? 'bg-blue-500 text-white border-blue-500 dark:bg-blue-600 dark:border-blue-500' : 'bg-white border-gray-300 hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-100 dark:border-gray-600 dark:hover:bg-gray-600'"
class="px-4 py-2 text-sm border rounded-md cursor-pointer transition-all"
>
💬 Prompts
</button>
<button
@click="viewMode = 'resources'; loadResourcesView()"
:class="viewMode === 'resources' ? 'bg-blue-500 text-white border-blue-500 dark:bg-blue-600 dark:border-blue-500' : 'bg-white border-gray-300 hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-100 dark:border-gray-600 dark:hover:bg-gray-600'"
class="px-4 py-2 text-sm border rounded-md cursor-pointer transition-all"
>
📦 Resources
</button>
</div>
</div>
<!-- Traces View -->
<div x-show="viewMode === 'traces'">
<!-- Advanced Filters Panel -->
<div x-show="showAdvancedFilters"
x-transition
class="bg-white dark:bg-gray-800 rounded-lg p-6 mb-6 shadow-sm dark:shadow-gray-900/30">
<h3 class="m-0 mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
🔧 Advanced Filters
</h3>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem;">
<!-- Duration Range -->
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
Min Duration (ms)
</label>
<input
type="number"
x-model="minDuration"
placeholder="e.g., 100"
class="w-full px-4 py-2 text-sm border border-gray-300 rounded-md bg-white hover:bg-gray-50 cursor-pointer transition-all dark:bg-gray-700 dark:text-gray-100 dark:border-gray-600 dark:placeholder-gray-400"
@change="refreshTraces()"
/>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
Max Duration (ms)
</label>
<input
type="number"
x-model="maxDuration"
placeholder="e.g., 5000"
class="w-full px-4 py-2 text-sm border border-gray-300 rounded-md bg-white hover:bg-gray-50 cursor-pointer transition-all dark:bg-gray-700 dark:text-gray-100 dark:border-gray-600 dark:placeholder-gray-400"
@change="refreshTraces()"
/>
</div>
<!-- HTTP Method -->
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
HTTP Method
</label>
<select
x-model="httpMethod"
class="w-full px-4 py-2 text-sm border border-gray-300 rounded-md bg-white hover:bg-gray-50 cursor-pointer transition-all dark:bg-gray-700 dark:text-gray-100 dark:border-gray-600"
@change="refreshTraces()"
>
<option value="">All Methods</option>
<option value="GET">GET</option>
<option value="POST">POST</option>
<option value="PUT">PUT</option>
<option value="DELETE">DELETE</option>
<option value="PATCH">PATCH</option>
</select>
</div>
<!-- User Email -->
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
User Email
</label>
<input
type="text"
x-model="userEmail"
placeholder="admin@example.com"
class="w-full px-4 py-2 text-sm border border-gray-300 rounded-md bg-white hover:bg-gray-50 cursor-pointer transition-all dark:bg-gray-700 dark:text-gray-100 dark:border-gray-600 dark:placeholder-gray-400"
@input.debounce.500ms="refreshTraces()"
/>
</div>
<!-- Name Search -->
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
Trace Name
</label>
<input
type="text"
x-model="nameSearch"
placeholder="e.g., GET /api/tools"
class="w-full px-4 py-2 text-sm border border-gray-300 rounded-md bg-white hover:bg-gray-50 cursor-pointer transition-all dark:bg-gray-700 dark:text-gray-100 dark:border-gray-600 dark:placeholder-gray-400"
@input.debounce.500ms="refreshTraces()"
/>
</div>
<!-- Attribute Search -->
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
Attribute Search
</label>
<input
type="text"
x-model="attributeSearch"
placeholder="Search in attributes..."
class="w-full px-4 py-2 text-sm border border-gray-300 rounded-md bg-white hover:bg-gray-50 cursor-pointer transition-all dark:bg-gray-700 dark:text-gray-100 dark:border-gray-600 dark:placeholder-gray-400"
@input.debounce.500ms="refreshTraces()"
/>
</div>
<!-- Tool Name Filter -->
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
🔧 MCP Tool Name
</label>
<input
type="text"
x-model="toolName"
placeholder="Filter by tool name..."
class="w-full px-4 py-2 text-sm border border-gray-300 rounded-md bg-white hover:bg-gray-50 cursor-pointer transition-all dark:bg-gray-700 dark:text-gray-100 dark:border-gray-600 dark:placeholder-gray-400"
@input.debounce.500ms="refreshTraces()"
/>
</div>
</div>
<!-- Clear Filters Button -->
<div class="mt-4 text-right">
<button
class="px-6 py-2 text-sm border border-gray-300 rounded-md bg-white hover:bg-gray-50 cursor-pointer transition-all dark:bg-gray-700 dark:text-gray-100 dark:border-gray-600 dark:hover:bg-gray-600"
@click="minDuration=''; maxDuration=''; httpMethod=''; userEmail=''; nameSearch=''; attributeSearch=''; refreshTraces();"
>
🗑️ Clear All Filters
</button>
</div>
</div>
<!-- Statistics Cards -->
<div id="stats-container">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
<div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm dark:shadow-gray-900/30 border-l-4 border-blue-500">
<div class="text-sm text-gray-600 dark:text-gray-400 mb-2">Loading statistics...</div>
</div>
</div>
</div>
<!-- Traces Table -->
<div class="w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm dark:shadow-gray-900/30 overflow-hidden">
<table class="w-full border-collapse">
<thead>
<tr>
<th class="bg-gray-50 dark:bg-gray-700/50 px-4 py-3 text-left text-sm font-semibold text-gray-600 dark:text-gray-300 border-b border-gray-200 dark:border-gray-700">Timestamp</th>
<th class="bg-gray-50 dark:bg-gray-700/50 px-4 py-3 text-left text-sm font-semibold text-gray-600 dark:text-gray-300 border-b border-gray-200 dark:border-gray-700">Method</th>
<th class="bg-gray-50 dark:bg-gray-700/50 px-4 py-3 text-left text-sm font-semibold text-gray-600 dark:text-gray-300 border-b border-gray-200 dark:border-gray-700">Endpoint</th>
<th class="bg-gray-50 dark:bg-gray-700/50 px-4 py-3 text-left text-sm font-semibold text-gray-600 dark:text-gray-300 border-b border-gray-200 dark:border-gray-700">Status</th>
<th class="bg-gray-50 dark:bg-gray-700/50 px-4 py-3 text-left text-sm font-semibold text-gray-600 dark:text-gray-300 border-b border-gray-200 dark:border-gray-700">Duration</th>
<th class="bg-gray-50 dark:bg-gray-700/50 px-4 py-3 text-left text-sm font-semibold text-gray-600 dark:text-gray-300 border-b border-gray-200 dark:border-gray-700">User</th>
<th class="bg-gray-50 dark:bg-gray-700/50 px-4 py-3 text-left text-sm font-semibold text-gray-600 dark:text-gray-300 border-b border-gray-200 dark:border-gray-700">Actions</th>
</tr>
</thead>
<tbody id="traces-list">
<tr>
<td colspan="7" class="text-center py-8 text-gray-500 dark:text-gray-400">
Loading traces...
</td>
</tr>
</tbody>
</table>
</div>
<!-- Trace Detail Modal (shown when trace is selected) -->
<div x-show="selectedTrace"
x-cloak
class="fixed inset-0 bg-black/50 dark:bg-black/70 flex items-center justify-center z-[1000]"
@click.self="selectedTrace = null">
<div class="bg-white dark:bg-gray-800 rounded-lg max-w-[90%] max-h-[90%] overflow-auto shadow-2xl" id="trace-detail-content">
<!-- Loaded via HTMX -->
</div>
</div>
<!-- Save Query Modal -->
<div x-show="showSaveQueryModal"
x-cloak
class="fixed inset-0 bg-black/50 dark:bg-black/70 flex items-center justify-center z-[1000]"
@click.self="showSaveQueryModal = false">
<div class="bg-white dark:bg-gray-800 rounded-lg max-w-2xl w-full mx-4 p-8 shadow-2xl">
<div class="flex justify-between items-center mb-6 pb-4 border-b border-gray-200 dark:border-gray-700">
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 m-0">💾 Save Query</h2>
<button @click="showSaveQueryModal = false" class="bg-transparent border-0 text-2xl cursor-pointer text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100">×</button>
</div>
<div class="flex flex-col gap-6">
<!-- Query Name -->
<div>
<label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
Query Name <span class="text-red-500">*</span>
</label>
<input
x-model="saveQueryName"
type="text"
placeholder="e.g., Slow Requests Last Hour"
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400"
/>
</div>
<!-- Query Description -->
<div>
<label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
Description (optional)
</label>
<textarea
x-model="saveQueryDescription"
placeholder="What does this query help you find?"
rows="3"
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 resize-y focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400"
></textarea>
</div>
<!-- Share with Team -->
<div class="flex items-center gap-2">
<input
x-model="saveQueryIsShared"
type="checkbox"
id="save-query-shared"
class="w-4 h-4 text-blue-600 border-gray-300 dark:border-gray-600 rounded focus:ring-2 focus:ring-blue-500 dark:bg-gray-700"
/>
<label for="save-query-shared" class="text-sm font-medium text-gray-700 dark:text-gray-300 cursor-pointer">
Share with team (visible to all users)
</label>
</div>
<!-- Current Filters Preview -->
<div class="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-4">
<p class="text-xs font-semibold text-gray-600 dark:text-gray-400 mb-2 uppercase">Current Filters</p>
<div class="grid grid-cols-2 gap-2 text-sm text-gray-700 dark:text-gray-300">
<div x-show="timeRange"><strong>Time:</strong> <span x-text="timeRange"></span></div>
<div x-show="statusFilter"><strong>Status:</strong> <span x-text="statusFilter"></span></div>
<div x-show="minDuration"><strong>Min Duration:</strong> <span x-text="minDuration + 'ms'"></span></div>
<div x-show="maxDuration"><strong>Max Duration:</strong> <span x-text="maxDuration + 'ms'"></span></div>
<div x-show="httpMethod"><strong>HTTP Method:</strong> <span x-text="httpMethod"></span></div>
<div x-show="userEmail"><strong>User:</strong> <span x-text="userEmail"></span></div>
<div x-show="nameSearch" class="col-span-2"><strong>Name:</strong> <span x-text="nameSearch"></span></div>
<div x-show="attributeSearch" class="col-span-2"><strong>Attributes:</strong> <span x-text="attributeSearch"></span></div>
</div>
</div>
<!-- Action Buttons -->
<div class="flex justify-end gap-4 pt-4 border-t border-gray-200 dark:border-gray-700">
<button
@click="showSaveQueryModal = false"
class="px-6 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-md cursor-pointer font-medium hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
>
Cancel
</button>
<button
@click="saveCurrentQuery()"
class="px-6 py-2 bg-blue-600 dark:bg-blue-500 text-white rounded-md cursor-pointer font-medium hover:bg-blue-700 dark:hover:bg-blue-600 transition-colors"
>
Save Query
</button>
</div>
</div>
</div>
</div>
</div> <!-- End Traces View -->
<!-- Metrics View -->
<div x-show="viewMode === 'metrics'" id="metrics-container">
<div class="p-8 text-center text-gray-600 dark:text-gray-400">
Loading metrics dashboard...
</div>
</div>
<!-- Tools View -->
<div x-show="viewMode === 'tools'" id="tools-container">
<div class="p-8 text-center text-gray-600 dark:text-gray-400">
Loading tool metrics dashboard...
</div>
</div>
<!-- Prompts View -->
<div x-show="viewMode === 'prompts'" id="prompts-container">
<div class="p-8 text-center text-gray-600 dark:text-gray-400">
Loading prompt metrics dashboard...
</div>
</div>
<!-- Resources View -->
<div x-show="viewMode === 'resources'" id="resources-container">
<div class="p-8 text-center text-gray-600 dark:text-gray-400">
Loading resource metrics dashboard...
</div>
</div>
</div>
