diff --git a/cmd/web-ui/static/app.js b/cmd/web-ui/static/app.js index f463f3f..ce81f07 100644 --- a/cmd/web-ui/static/app.js +++ b/cmd/web-ui/static/app.js @@ -35,7 +35,75 @@ updateToggleBtn(getTheme()); const btn = document.getElementById('theme-toggle'); if (btn) btn.addEventListener('click', cycleTheme); + + // Global Search + const searchInput = document.getElementById('global-search'); + if (searchInput) { + searchInput.addEventListener('keydown', (e) => { + if (e.key === 'Enter') { + const val = searchInput.value.trim(); + if (val) handleGlobalSearch(val); + } + }); + } + + // Keyboard Shortcuts + document.addEventListener('keydown', (e) => { + // '/' to focus search + if (e.key === '/' && document.activeElement !== searchInput && !['INPUT', 'TEXTAREA', 'SELECT'].includes(document.activeElement.tagName)) { + e.preventDefault(); + searchInput.focus(); + } + }); }); + + async function handleGlobalSearch(id) { + if (id.length < 8) { + showToast('Search ID must be at least 8 characters', 'info'); + return; + } + + try { + // Try fetching as session first + const sessionData = await api('/v1/sessions/' + id).catch(() => null); + if (sessionData && sessionData.session) { + navigate('/sessions/' + id); + return; + } + + // Then try as run + const runData = await api('/v1/runs/' + id).catch(() => null); + if (runData && runData.run) { + navigate('/runs/' + id); + return; + } + + showToast('ID not found', 'error'); + } catch (e) { + showToast('Search failed: ' + e.message, 'error'); + } + } + + function copyToClipboard(text, el) { + if (!text) return; + navigator.clipboard.writeText(text).then(() => { + showToast('Copied to clipboard', 'success'); + if (el) { + const originalText = el.textContent; + el.textContent = 'Copied!'; + setTimeout(() => { el.textContent = originalText; }, 1500); + } + }).catch(err => { + console.error('Failed to copy:', err); + showToast('Copy failed', 'error'); + }); + } + + function renderCopyButton(text) { + return ``; + } // ───────────────────────────────────────────────────────── const app = document.getElementById('app'); @@ -184,6 +252,7 @@ function route() { cleanupLiveViews(); + renderBreadcrumbs(); const path = window.location.pathname; if (path === '/') { @@ -204,6 +273,44 @@ updateActiveNav(); } + function renderBreadcrumbs() { + const el = document.getElementById('breadcrumbs'); + if (!el) return; + + const path = window.location.pathname; + const parts = path.split('/').filter(Boolean); + if (parts.length === 0) { + el.innerHTML = ''; + return; + } + + const items = [{ label: 'Dashboard', path: '/' }]; + let currentPath = ''; + + parts.forEach((part, i) => { + currentPath += '/' + part; + let label = part.charAt(0).toUpperCase() + part.slice(1); + + // Special labels for IDs + if (part.length > 20 || /^[a-f0-9-]{32,}$/.test(part)) { + label = part.substring(0, 8) + '…'; + } + + if (i === parts.length - 1) { + items.push({ label, current: true }); + } else { + items.push({ label, path: currentPath }); + } + }); + + el.innerHTML = items.map(item => { + if (item.current) { + return `${escapeHTML(item.label)}`; + } + return `${escapeHTML(item.label)}/`; + }).join(''); + } + function navigate(path) { history.pushState(null, '', path); route(); @@ -293,8 +400,8 @@ } function statusIcon(status) { - if (status === 'success') return 'success'; - if (status === 'error') return 'error'; + if (status === 'success') return 'success'; + if (status === 'error') return 'error'; return 'unknown'; } @@ -445,7 +552,7 @@ : (active ? 'Open session' : 'Session ended'); return ` - ${escapeHTML(s.session_id.substring(0, 12))}… + ${escapeHTML(s.session_id.substring(0, 12))}…${renderCopyButton(s.session_id)} ${escapeHTML(fw)} ${escapeHTML(s.host || '-')} ${s.run_count} @@ -546,7 +653,7 @@ ? 'Currently active session' : (active ? 'Open session' : 'Session ended'); return ` - ${escapeHTML(s.session_id.substring(0, 12))}… + ${escapeHTML(s.session_id.substring(0, 12))}…${renderCopyButton(s.session_id)} ${escapeHTML(fw)} ${escapeHTML(s.host || '-')} ${s.run_count} @@ -668,7 +775,7 @@ app.innerHTML = ` ← Back to Sessions
-

Session ${escapeHTML(sessionID.substring(0, 16))}...

+

Session ${escapeHTML(sessionID.substring(0, 16))}...${renderCopyButton(sessionID)}

${active ? 'Active' : 'Ended'} @@ -806,7 +913,7 @@ return spans.map((sp, i) => { const kindClass = sp.kind || 'unknown'; return ` - + ${escapeHTML(sp.kind || '?')} @@ -871,7 +978,7 @@ app.innerHTML = ` ← Back to Session
-

Run ${escapeHTML(runID.substring(0, 16))}… ${statusIcon(r.status)}

+

Run ${escapeHTML(runID.substring(0, 16))}…${renderCopyButton(runID)} ${statusIcon(r.status)}

Started
@@ -1061,8 +1168,8 @@ ` : '
No spans yet
'; return ` - - ${escapeHTML(r.run_id.substring(0, 12))}... + + ${escapeHTML(r.run_id.substring(0, 12))}...${renderCopyButton(r.run_id)} ${statusIcon(r.status)} ${modelLabel} ${r.tool_count || 0} diff --git a/cmd/web-ui/static/index.html b/cmd/web-ui/static/index.html index af1f19e..fe45396 100644 --- a/cmd/web-ui/static/index.html +++ b/cmd/web-ui/static/index.html @@ -18,10 +18,15 @@
+
+ + / +
+

Loading...

diff --git a/cmd/web-ui/static/style.css b/cmd/web-ui/static/style.css index 3a1d256..31ce311 100644 --- a/cmd/web-ui/static/style.css +++ b/cmd/web-ui/static/style.css @@ -150,6 +150,86 @@ header nav a.active::after { border-radius: 1px; } +/* ── Header Search ────────────────────────────────────────── */ +.header-search { + position: relative; + display: flex; + align-items: center; + gap: 0.5rem; + margin-right: 0.5rem; +} + +.header-search input { + background: var(--surface); + border: 1px solid var(--border); + color: var(--text); + padding: 0.35rem 0.75rem; + padding-right: 2.2rem; + border-radius: var(--radius); + font-family: var(--font-body); + font-size: 0.78rem; + width: 140px; + transition: width 0.2s ease, border-color 0.15s, box-shadow 0.15s; + outline: none; +} + +.header-search input:focus { + width: 220px; + border-color: var(--accent); + box-shadow: 0 0 0 3px var(--accent-dim); +} + +.header-search kbd { + position: absolute; + right: 0.6rem; + top: 50%; + transform: translateY(-50%); + background: var(--surface-2); + border: 1px solid var(--border); + color: var(--text-dim); + font-family: var(--font-mono); + font-size: 0.65rem; + padding: 0.1rem 0.35rem; + border-radius: 3px; + pointer-events: none; + opacity: 0.7; +} + +.header-search input:focus + kbd { + display: none; +} + +/* ── Breadcrumbs ─────────────────────────────────────────── */ +.breadcrumbs { + max-width: 1240px; + margin: 0 auto; + padding: 1rem 2rem 0; + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.78rem; + color: var(--text-dim); +} + +.breadcrumbs a { + color: var(--text-dim); + text-decoration: none; + transition: color 0.15s; +} + +.breadcrumbs a:hover { + color: var(--text-bright); +} + +.breadcrumbs .sep { + opacity: 0.3; +} + +.breadcrumbs .current { + color: var(--text-bright); + font-weight: 500; +} + /* ── Main ──────────────────────────────────────────────────── */ main { max-width: 1240px; @@ -348,6 +428,36 @@ tr.clickable:hover td:first-child { padding-left: calc(1.25rem - 2px); } +tr.tr-error td { + color: var(--error); +} + +tr.tr-error .id-cell { + color: var(--error); + opacity: 0.8; +} + +.skeleton-line { + height: 0.8rem; + background: var(--surface-2); + border-radius: 4px; + position: relative; + overflow: hidden; +} + +.skeleton-line::after { + content: ''; + position: absolute; + top: 0; left: 0; right: 0; bottom: 0; + background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent); + animation: skeletonPulse 1.5s infinite; +} + +@keyframes skeletonPulse { + 0% { transform: translateX(-100%); } + 100% { transform: translateX(100%); } +} + /* ── Status badges ─────────────────────────────────────────── */ .status-badge { display: inline-flex; @@ -406,6 +516,60 @@ tr.clickable:hover td:first-child { border-radius: 3px; } +.copy-btn { + background: transparent; + border: none; + color: var(--text-dim); + cursor: pointer; + padding: 0.1rem; + border-radius: 4px; + transition: color 0.15s, background 0.15s; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + margin-left: 0.25rem; + opacity: 0; +} + +tr:hover .copy-btn, +.meta-tile:hover .copy-btn { + opacity: 1; +} + +.copy-btn:hover { + color: var(--accent); + background: var(--accent-dim); +} + +/* ── Toast notifications ───────────────────────────────────── */ +.toast { + position: fixed; + bottom: 2rem; + right: 2rem; + z-index: 1000; + padding: 0.75rem 1.25rem; + background: var(--surface); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + color: var(--text-bright); + font-size: 0.85rem; + box-shadow: 0 4px 12px rgba(0,0,0,0.5); + transform: translateY(1rem); + opacity: 0; + transition: transform 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67), opacity 0.2s; + pointer-events: none; +} + +.toast.visible { + transform: translateY(0); + opacity: 1; +} + +.toast-success { border-left: 3px solid var(--success); } +.toast-error { border-left: 3px solid var(--error); } +.toast-info { border-left: 3px solid var(--accent); } + /* ── Load more ─────────────────────────────────────────────── */ .load-more { display: block;