<!-- htmlhint doctype-first:false -->
<!-- Observability Dashboard Partial -->
<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,
async loadMetricsView() {
const response = await fetch('{{ root_path }}/admin/observability/metrics/partial');
if (response.ok) {
const html = await response.text();
const container = document.getElementById('metrics-container');
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, then re-initialize Alpine.js
setTimeout(() => {
if (window.Alpine) {
window.Alpine.initTree(container);
}
}, 10);
}
},
async loadToolsView() {
const response = await fetch('{{ root_path }}/admin/observability/tools/partial');
if (response.ok) {
const html = await response.text();
const container = document.getElementById('tools-container');
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, then re-initialize Alpine.js
setTimeout(() => {
if (window.Alpine) {
window.Alpine.initTree(container);
}
}, 10);
}
},
async loadPromptsView() {
const response = await fetch('{{ root_path }}/admin/observability/prompts/partial');
if (response.ok) {
const html = await response.text();
const container = document.getElementById('prompts-container');
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, then re-initialize Alpine.js
setTimeout(() => {
if (window.Alpine) {
window.Alpine.initTree(container);
}
}, 10);
}
},
async loadResourcesView() {
const response = await fetch('{{ root_path }}/admin/observability/resources/partial');
if (response.ok) {
const html = await response.text();
const container = document.getElementById('resources-container');
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, then re-initialize Alpine.js
setTimeout(() => {
if (window.Alpine) {
window.Alpine.initTree(container);
}
}, 10);
}
},
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);
}
}
}" x-init="
startPolling();
loadSavedQueries();
$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>
.observability-container {
/* No extra padding - parent already has p-4 lg:p-6 */
}
.view-toggle-btn {
padding: 0.5rem 1rem;
border-radius: 0.375rem;
border: 1px solid #d1d5db;
background: white;
cursor: pointer;
font-size: 0.875rem;
transition: all 0.2s;
}
.view-toggle-btn:hover {
background: #f3f4f6;
}
.view-toggle-btn.active {
background: #3b82f6;
color: white;
border-color: #3b82f6;
}
.obs-header {
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 2px solid #e5e7eb;
}
.obs-header-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.obs-tabs-row {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.obs-title {
font-size: 1.875rem;
font-weight: 700;
color: #1f2937;
display: flex;
align-items: center;
gap: 0.5rem;
}
.obs-filters {
display: flex;
gap: 1rem;
align-items: center;
}
.obs-filter-btn {
padding: 0.5rem 1rem;
border-radius: 0.375rem;
border: 1px solid #d1d5db;
background: white;
cursor: pointer;
transition: all 0.2s;
}
.obs-filter-btn:hover {
background: #f3f4f6;
}
.obs-filter-btn.active {
background: #3b82f6;
color: white;
border-color: #3b82f6;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.stat-card {
background: white;
border-radius: 0.5rem;
padding: 1.5rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
border-left: 4px solid #3b82f6;
}
.stat-card.success {
border-left-color: #10b981;
}
.stat-card.error {
border-left-color: #ef4444;
}
.stat-card.warning {
border-left-color: #f59e0b;
}
.stat-label {
font-size: 0.875rem;
color: #6b7280;
margin-bottom: 0.5rem;
}
.stat-value {
font-size: 2rem;
font-weight: 700;
color: #1f2937;
}
.stat-unit {
font-size: 1rem;
color: #6b7280;
margin-left: 0.25rem;
}
.traces-table {
width: 100%;
background: white;
border-radius: 0.5rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
overflow: hidden;
}
.traces-table table {
width: 100%;
border-collapse: collapse;
}
.traces-table th {
background: #f9fafb;
padding: 0.75rem 1rem;
text-align: left;
font-size: 0.875rem;
font-weight: 600;
color: #6b7280;
border-bottom: 1px solid #e5e7eb;
}
.traces-table td {
padding: 0.75rem 1rem;
border-bottom: 1px solid #e5e7eb;
}
.traces-table tr:hover {
background: #f9fafb;
cursor: pointer;
}
.status-badge {
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
}
.status-ok {
background: #d1fae5;
color: #065f46;
}
.status-error {
background: #fee2e2;
color: #991b1b;
}
.duration-badge {
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.875rem;
font-family: monospace;
}
.duration-fast {
background: #d1fae5;
color: #065f46;
}
.duration-medium {
background: #fef3c7;
color: #92400e;
}
.duration-slow {
background: #fee2e2;
color: #991b1b;
}
.trace-detail-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.trace-detail-content {
background: white;
border-radius: 0.5rem;
max-width: 90%;
max-height: 90%;
overflow: auto;
box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
}
.trace-detail-header {
padding: 1.5rem;
border-bottom: 1px solid #e5e7eb;
display: flex;
justify-content: space-between;
align-items: center;
}
.trace-detail-body {
padding: 1.5rem;
}
.waterfall {
margin-top: 1rem;
}
.span-row {
display: flex;
align-items: center;
padding: 0.5rem;
border-bottom: 1px solid #e5e7eb;
}
.span-name {
width: 200px;
font-size: 0.875rem;
color: #374151;
}
.span-timeline {
flex: 1;
height: 24px;
position: relative;
background: #f3f4f6;
border-radius: 0.25rem;
}
.span-bar {
position: absolute;
height: 100%;
background: #3b82f6;
border-radius: 0.25rem;
display: flex;
align-items: center;
padding: 0 0.5rem;
font-size: 0.75rem;
color: white;
}
.span-bar.error {
background: #ef4444;
}
.span-duration {
width: 80px;
text-align: right;
font-size: 0.875rem;
color: #6b7280;
font-family: monospace;
}
.refresh-btn {
padding: 0.5rem 1rem;
background: #3b82f6;
color: white;
border: none;
border-radius: 0.375rem;
cursor: pointer;
font-weight: 500;
transition: background 0.2s;
}
.refresh-btn:hover {
background: #2563eb;
}
.empty-state {
text-align: center;
padding: 3rem;
color: #6b7280;
}
.empty-state-icon {
font-size: 3rem;
margin-bottom: 1rem;
}
/* Gantt Chart Styles */
.gantt-container {
background: white;
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
padding: 1rem;
min-height: 400px;
}
.gantt-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid #e5e7eb;
}
.gantt-info {
font-size: 0.875rem;
color: #374151;
}
.gantt-controls {
display: flex;
gap: 0.5rem;
}
.gantt-btn {
padding: 0.375rem 0.75rem;
background: #f3f4f6;
border: 1px solid #d1d5db;
border-radius: 0.375rem;
font-size: 0.875rem;
cursor: pointer;
transition: all 0.2s;
}
.gantt-btn:hover {
background: #e5e7eb;
}
.gantt-timescale {
position: relative;
height: 40px;
border-bottom: 2px solid #d1d5db;
margin-bottom: 0.5rem;
}
.time-marker {
position: absolute;
top: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.time-tick {
width: 1px;
height: 10px;
background: #9ca3af;
}
.time-label {
font-size: 0.75rem;
color: #6b7280;
margin-top: 0.25rem;
}
.gantt-spans {
max-height: 600px;
overflow-y: auto;
}
.span-row {
display: flex;
align-items: center;
padding: 0.25rem 0;
border-bottom: 1px solid #f3f4f6;
transition: background 0.1s;
}
.span-row:hover {
background: #f9fafb;
}
.critical-path-row {
background: #fef3c7 !important;
}
.span-name {
width: 250px;
font-size: 0.875rem;
color: #374151;
display: flex;
align-items: center;
gap: 0.25rem;
}
.span-toggle {
background: none;
border: none;
cursor: pointer;
font-size: 0.75rem;
padding: 0.125rem;
color: #6b7280;
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.span-spacer {
width: 16px;
display: inline-block;
}
.span-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.span-timeline {
flex: 1;
height: 24px;
position: relative;
background: #f9fafb;
border-radius: 0.25rem;
margin: 0 0.5rem;
}
.span-bar {
position: absolute;
height: 100%;
background: #3b82f6;
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;
}
.span-bar-label {
font-size: 0.7rem;
color: white;
font-weight: 500;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.span-duration {
width: 100px;
text-align: right;
font-size: 0.75rem;
color: #6b7280;
font-family: monospace;
}
.gantt-legend {
display: flex;
gap: 1rem;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #e5e7eb;
font-size: 0.875rem;
}
.legend-item {
display: flex;
align-items: center;
gap: 0.5rem;
}
.legend-color {
width: 16px;
height: 16px;
border-radius: 0.25rem;
}
.legend-color.critical-path {
background: #fbbf24;
border: 2px solid #f59e0b;
}
.view-toggle-btn {
padding: 0.5rem 1rem;
background: #f3f4f6;
border: 1px solid #d1d5db;
border-radius: 0.375rem;
font-size: 0.875rem;
cursor: pointer;
transition: all 0.2s;
}
.view-toggle-btn:hover {
background: #e5e7eb;
}
.view-toggle-btn.active {
background: #3b82f6;
color: white;
border-color: #3b82f6;
}
</style>
<!-- Header -->
<div class="obs-header">
<!-- Title and Filters Row -->
<div class="obs-header-top">
<h1 class="obs-title">
<span>🔍</span>
Observability Dashboard
</h1>
<div class="obs-filters" x-show="viewMode === 'traces'" style="margin: 0;">
<select
x-model="selectedQueryId"
class="obs-filter-btn"
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="obs-filter-btn"
@click="showSaveQueryModal = true"
title="Save current filters as a query"
>
💾 Save Query
</button>
<select
x-model="timeRange"
class="obs-filter-btn"
>
<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="obs-filter-btn"
>
<option value="all" selected>All Status</option>
<option value="ok">Success Only</option>
<option value="error">Errors Only</option>
</select>
<button
class="obs-filter-btn"
@click="showAdvancedFilters = !showAdvancedFilters"
:class="{'active': showAdvancedFilters}"
>
⚙️ Advanced Filters
</button>
<button
class="refresh-btn"
@click="refreshStats(); refreshTraces();"
>
🔄 Refresh
</button>
</div>
</div>
<!-- View Mode Tabs Row -->
<div class="obs-tabs-row">
<button
@click="viewMode = 'traces'"
:class="{'active': viewMode === 'traces'}"
class="view-toggle-btn"
>
📋 Traces
</button>
<button
@click="viewMode = 'metrics'; loadMetricsView()"
:class="{'active': viewMode === 'metrics'}"
class="view-toggle-btn"
>
📊 Advanced Metrics
</button>
<button
@click="viewMode = 'tools'; loadToolsView()"
:class="{'active': viewMode === 'tools'}"
class="view-toggle-btn"
>
🔧 MCP Tools
</button>
<button
@click="viewMode = 'prompts'; loadPromptsView()"
:class="{'active': viewMode === 'prompts'}"
class="view-toggle-btn"
>
💬 Prompts
</button>
<button
@click="viewMode = 'resources'; loadResourcesView()"
:class="{'active': viewMode === 'resources'}"
class="view-toggle-btn"
>
📦 Resources
</button>
</div>
</div>
<!-- Traces View -->
<div x-show="viewMode === 'traces'">
<!-- Advanced Filters Panel -->
<div x-show="showAdvancedFilters"
x-transition
style="background: white; border-radius: 0.5rem; padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
<h3 style="margin: 0 0 1rem 0; font-size: 1.125rem; font-weight: 600; color: #374151;">
🔧 Advanced Filters
</h3>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem;">
<!-- Duration Range -->
<div>
<label style="display: block; font-size: 0.875rem; font-weight: 500; color: #374151; margin-bottom: 0.25rem;">
Min Duration (ms)
</label>
<input
type="number"
x-model="minDuration"
placeholder="e.g., 100"
class="obs-filter-btn"
style="width: 100%;"
@change="refreshTraces()"
/>
</div>
<div>
<label style="display: block; font-size: 0.875rem; font-weight: 500; color: #374151; margin-bottom: 0.25rem;">
Max Duration (ms)
</label>
<input
type="number"
x-model="maxDuration"
placeholder="e.g., 5000"
class="obs-filter-btn"
style="width: 100%;"
@change="refreshTraces()"
/>
</div>
<!-- HTTP Method -->
<div>
<label style="display: block; font-size: 0.875rem; font-weight: 500; color: #374151; margin-bottom: 0.25rem;">
HTTP Method
</label>
<select
x-model="httpMethod"
class="obs-filter-btn"
style="width: 100%;"
@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 style="display: block; font-size: 0.875rem; font-weight: 500; color: #374151; margin-bottom: 0.25rem;">
User Email
</label>
<input
type="text"
x-model="userEmail"
placeholder="admin@example.com"
class="obs-filter-btn"
style="width: 100%;"
@input.debounce.500ms="refreshTraces()"
/>
</div>
<!-- Name Search -->
<div>
<label style="display: block; font-size: 0.875rem; font-weight: 500; color: #374151; margin-bottom: 0.25rem;">
Trace Name
</label>
<input
type="text"
x-model="nameSearch"
placeholder="e.g., GET /api/tools"
class="obs-filter-btn"
style="width: 100%;"
@input.debounce.500ms="refreshTraces()"
/>
</div>
<!-- Attribute Search -->
<div>
<label style="display: block; font-size: 0.875rem; font-weight: 500; color: #374151; margin-bottom: 0.25rem;">
Attribute Search
</label>
<input
type="text"
x-model="attributeSearch"
placeholder="Search in attributes..."
class="obs-filter-btn"
style="width: 100%;"
@input.debounce.500ms="refreshTraces()"
/>
</div>
<!-- Tool Name Filter -->
<div>
<label style="display: block; font-size: 0.875rem; font-weight: 500; color: #374151; margin-bottom: 0.25rem;">
🔧 MCP Tool Name
</label>
<input
type="text"
x-model="toolName"
placeholder="Filter by tool name..."
class="obs-filter-btn"
style="width: 100%;"
@input.debounce.500ms="refreshTraces()"
/>
</div>
</div>
<!-- Clear Filters Button -->
<div style="margin-top: 1rem; text-align: right;">
<button
class="obs-filter-btn"
@click="minDuration=''; maxDuration=''; httpMethod=''; userEmail=''; nameSearch=''; attributeSearch=''; refreshTraces();"
style="padding: 0.5rem 1.5rem;"
>
🗑️ Clear All Filters
</button>
</div>
</div>
<!-- Statistics Cards -->
<div id="stats-container">
<div class="stats-grid">
<div class="stat-card">
<div class="stat-label">Loading statistics...</div>
</div>
</div>
</div>
<!-- Traces Table -->
<div class="traces-table">
<table>
<thead>
<tr>
<th>Timestamp</th>
<th>Method</th>
<th>Endpoint</th>
<th>Status</th>
<th>Duration</th>
<th>User</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="traces-list">
<tr>
<td colspan="7" style="text-align: center; padding: 2rem;">
Loading traces...
</td>
</tr>
</tbody>
</table>
</div>
<!-- Trace Detail Modal (shown when trace is selected) -->
<div x-show="selectedTrace"
x-cloak
class="trace-detail-modal"
@click.self="selectedTrace = null">
<div class="trace-detail-content" id="trace-detail-content">
<!-- Loaded via HTMX -->
</div>
</div>
<!-- Save Query Modal -->
<div x-show="showSaveQueryModal"
x-cloak
class="trace-detail-modal"
@click.self="showSaveQueryModal = false">
<div class="trace-detail-content" style="max-width: 600px; padding: 2rem;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; border-bottom: 1px solid #e5e7eb; padding-bottom: 1rem;">
<h2 style="font-size: 1.5rem; font-weight: 700; color: #1f2937; margin: 0;">💾 Save Query</h2>
<button @click="showSaveQueryModal = false" style="background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #6b7280;">×</button>
</div>
<div style="display: flex; flex-direction: column; gap: 1.5rem;">
<!-- Query Name -->
<div>
<label style="display: block; font-size: 0.875rem; font-weight: 600; color: #374151; margin-bottom: 0.5rem;">
Query Name <span style="color: #ef4444;">*</span>
</label>
<input
x-model="saveQueryName"
type="text"
placeholder="e.g., Slow Requests Last Hour"
style="width: 100%; padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem; font-size: 0.875rem;"
/>
</div>
<!-- Query Description -->
<div>
<label style="display: block; font-size: 0.875rem; font-weight: 600; color: #374151; margin-bottom: 0.5rem;">
Description (optional)
</label>
<textarea
x-model="saveQueryDescription"
placeholder="What does this query help you find?"
rows="3"
style="width: 100%; padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem; font-size: 0.875rem; resize: vertical;"
></textarea>
</div>
<!-- Share with Team -->
<div style="display: flex; align-items: center; gap: 0.5rem;">
<input
x-model="saveQueryIsShared"
type="checkbox"
id="save-query-shared"
style="width: 1.125rem; height: 1.125rem;"
/>
<label for="save-query-shared" style="font-size: 0.875rem; font-weight: 500; color: #374151; cursor: pointer;">
Share with team (visible to all users)
</label>
</div>
<!-- Current Filters Preview -->
<div style="background: #f9fafb; border-radius: 0.5rem; padding: 1rem;">
<p style="font-size: 0.75rem; font-weight: 600; color: #6b7280; margin: 0 0 0.5rem 0; text-transform: uppercase;">Current Filters</p>
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; font-size: 0.875rem; color: #374151;">
<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" style="grid-column: span 2;"><strong>Name:</strong> <span x-text="nameSearch"></span></div>
<div x-show="attributeSearch" style="grid-column: span 2;"><strong>Attributes:</strong> <span x-text="attributeSearch"></span></div>
</div>
</div>
<!-- Action Buttons -->
<div style="display: flex; justify-content: flex-end; gap: 1rem; padding-top: 1rem; border-top: 1px solid #e5e7eb;">
<button
@click="showSaveQueryModal = false"
style="padding: 0.5rem 1.5rem; border: 1px solid #d1d5db; background: white; color: #374151; border-radius: 0.375rem; cursor: pointer; font-weight: 500;"
>
Cancel
</button>
<button
@click="saveCurrentQuery()"
class="refresh-btn"
style="padding: 0.5rem 1.5rem;"
>
Save Query
</button>
</div>
</div>
</div>
</div>
</div> <!-- End Traces View -->
<!-- Metrics View -->
<div x-show="viewMode === 'metrics'" id="metrics-container">
<div style="padding: 2rem; text-align: center; color: #6b7280;">
Loading metrics dashboard...
</div>
</div>
<!-- Tools View -->
<div x-show="viewMode === 'tools'" id="tools-container">
<div style="padding: 2rem; text-align: center; color: #6b7280;">
Loading tool metrics dashboard...
</div>
</div>
<!-- Prompts View -->
<div x-show="viewMode === 'prompts'" id="prompts-container">
<div style="padding: 2rem; text-align: center; color: #6b7280;">
Loading prompt metrics dashboard...
</div>
</div>
<!-- Resources View -->
<div x-show="viewMode === 'resources'" id="resources-container">
<div style="padding: 2rem; text-align: center; color: #6b7280;">
Loading resource metrics dashboard...
</div>
</div>
</div>
