cb3ebfea7c
Rename Java packages from com.cameleer3 to com.cameleer, module directories from cameleer3-* to cameleer-*, and all references throughout workflows, Dockerfiles, docs, migrations, and pom.xml. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1011 lines
29 KiB
HTML
1011 lines
29 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Cameleer — Command Search</title>
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
:root {
|
|
--bg-primary: #0d1117;
|
|
--bg-secondary: #161b22;
|
|
--bg-tertiary: #1c2128;
|
|
--bg-overlay: rgba(1, 4, 9, 0.85);
|
|
--border: #30363d;
|
|
--border-active: #58a6ff;
|
|
--text-primary: #e6edf3;
|
|
--text-secondary: #8b949e;
|
|
--text-muted: #6e7681;
|
|
--accent-blue: #58a6ff;
|
|
--accent-green: #3fb950;
|
|
--accent-red: #f85149;
|
|
--accent-orange: #d29922;
|
|
--accent-purple: #bc8cff;
|
|
--accent-cyan: #79c0ff;
|
|
--accent-pink: #f778ba;
|
|
--shadow-heavy: 0 16px 72px rgba(0,0,0,0.6);
|
|
--shadow-glow: 0 0 40px rgba(88,166,255,0.08);
|
|
--radius-sm: 6px;
|
|
--radius-md: 10px;
|
|
--radius-lg: 16px;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from { opacity: 0; transform: translateY(20px) scale(0.98); }
|
|
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% { background-position: -200% 0; }
|
|
100% { background-position: 200% 0; }
|
|
}
|
|
|
|
@keyframes pulseGlow {
|
|
0%, 100% { box-shadow: 0 0 0 0 rgba(88,166,255,0); }
|
|
50% { box-shadow: 0 0 0 4px rgba(88,166,255,0.1); }
|
|
}
|
|
|
|
@keyframes slideInResult {
|
|
from { opacity: 0; transform: translateY(8px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
body {
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Background mesh gradient */
|
|
body::before {
|
|
content: '';
|
|
position: fixed;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
background:
|
|
radial-gradient(ellipse 80% 50% at 50% -20%, rgba(88,166,255,0.06), transparent),
|
|
radial-gradient(ellipse 60% 40% at 80% 60%, rgba(188,140,255,0.04), transparent),
|
|
radial-gradient(ellipse 50% 50% at 20% 80%, rgba(63,185,80,0.03), transparent);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
/* ── Behind-the-overlay page (blurred app mock) ── */
|
|
.app-bg {
|
|
position: fixed;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
z-index: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.app-topbar {
|
|
height: 48px;
|
|
background: var(--bg-secondary);
|
|
border-bottom: 1px solid var(--border);
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 20px;
|
|
gap: 16px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.app-topbar .logo {
|
|
font-weight: 700;
|
|
font-size: 15px;
|
|
color: var(--text-primary);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.app-topbar .logo svg { width: 22px; height: 22px; }
|
|
|
|
.app-topbar .nav-items {
|
|
display: flex;
|
|
gap: 4px;
|
|
margin-left: 12px;
|
|
}
|
|
|
|
.app-topbar .nav-item {
|
|
padding: 6px 12px;
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
border-radius: var(--radius-sm);
|
|
cursor: default;
|
|
}
|
|
|
|
.app-topbar .nav-item.active {
|
|
color: var(--text-primary);
|
|
background: rgba(255,255,255,0.06);
|
|
}
|
|
|
|
.app-topbar .search-trigger {
|
|
margin-left: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 5px 12px 5px 10px;
|
|
background: var(--bg-tertiary);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
transition: border-color 0.15s;
|
|
}
|
|
|
|
.app-topbar .search-trigger:hover { border-color: var(--border-active); color: var(--text-secondary); }
|
|
|
|
.app-topbar .search-trigger svg { width: 14px; height: 14px; opacity: 0.5; }
|
|
|
|
.app-topbar .kbd {
|
|
font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
|
|
font-size: 11px;
|
|
padding: 1px 5px;
|
|
background: rgba(255,255,255,0.06);
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
color: var(--text-muted);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.app-content {
|
|
flex: 1;
|
|
display: grid;
|
|
grid-template-columns: 220px 1fr;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.app-sidebar {
|
|
background: var(--bg-secondary);
|
|
border-right: 1px solid var(--border);
|
|
padding: 16px 12px;
|
|
}
|
|
|
|
.app-sidebar .sidebar-section {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.app-sidebar .sidebar-title {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
color: var(--text-muted);
|
|
margin-bottom: 8px;
|
|
padding: 0 8px;
|
|
}
|
|
|
|
.app-sidebar .sidebar-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px 8px;
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
border-radius: var(--radius-sm);
|
|
cursor: default;
|
|
}
|
|
|
|
.app-sidebar .sidebar-item.active {
|
|
background: rgba(88,166,255,0.1);
|
|
color: var(--accent-blue);
|
|
}
|
|
|
|
.app-sidebar .sidebar-item svg { width: 16px; height: 16px; opacity: 0.6; }
|
|
.app-sidebar .sidebar-item.active svg { opacity: 1; }
|
|
|
|
.app-main {
|
|
padding: 24px 32px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.app-main .page-title {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.app-main .page-subtitle {
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
/* Fake table rows behind overlay */
|
|
.app-table-row {
|
|
display: grid;
|
|
grid-template-columns: 40px 2fr 1fr 1fr 100px 80px;
|
|
align-items: center;
|
|
padding: 10px 12px;
|
|
border-bottom: 1px solid var(--border);
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.app-table-row.header {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.4px;
|
|
color: var(--text-muted);
|
|
border-bottom: 2px solid var(--border);
|
|
}
|
|
|
|
.app-table-row .status-dot {
|
|
width: 8px; height: 8px;
|
|
border-radius: 50%;
|
|
background: var(--accent-green);
|
|
}
|
|
|
|
.app-table-row .status-dot.failed { background: var(--accent-red); }
|
|
|
|
/* ── Overlay ── */
|
|
.overlay {
|
|
position: fixed;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
z-index: 100;
|
|
background: var(--bg-overlay);
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
display: flex;
|
|
justify-content: center;
|
|
padding-top: 12vh;
|
|
animation: fadeIn 0.15s ease-out;
|
|
}
|
|
|
|
/* ── Search Modal ── */
|
|
.search-modal {
|
|
width: 680px;
|
|
max-height: 520px;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-heavy), var(--shadow-glow);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
animation: slideUp 0.2s cubic-bezier(0.16, 1, 0.3, 1);
|
|
align-self: flex-start;
|
|
}
|
|
|
|
/* ── Search Input ── */
|
|
.search-input-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 14px 18px;
|
|
border-bottom: 1px solid var(--border);
|
|
gap: 12px;
|
|
}
|
|
|
|
.search-input-wrap svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
color: var(--accent-blue);
|
|
flex-shrink: 0;
|
|
filter: drop-shadow(0 0 6px rgba(88,166,255,0.3));
|
|
}
|
|
|
|
.search-input {
|
|
flex: 1;
|
|
background: none;
|
|
border: none;
|
|
outline: none;
|
|
font-size: 16px;
|
|
font-family: inherit;
|
|
color: var(--text-primary);
|
|
caret-color: var(--accent-blue);
|
|
}
|
|
|
|
.search-input::placeholder { color: var(--text-muted); }
|
|
|
|
.search-input-wrap .input-hint {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
display: flex;
|
|
gap: 4px;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.search-input-wrap .input-hint kbd {
|
|
font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
|
|
font-size: 10px;
|
|
padding: 1px 5px;
|
|
background: rgba(255,255,255,0.06);
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* ── Scope Tabs ── */
|
|
.scope-tabs {
|
|
display: flex;
|
|
padding: 8px 18px 0;
|
|
gap: 2px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.scope-tab {
|
|
padding: 6px 12px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: var(--text-muted);
|
|
border-bottom: 2px solid transparent;
|
|
cursor: pointer;
|
|
transition: color 0.15s, border-color 0.15s;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.scope-tab:hover { color: var(--text-secondary); }
|
|
|
|
.scope-tab.active {
|
|
color: var(--accent-blue);
|
|
border-bottom-color: var(--accent-blue);
|
|
}
|
|
|
|
.scope-tab .count {
|
|
font-size: 10px;
|
|
padding: 1px 6px;
|
|
background: rgba(255,255,255,0.06);
|
|
border-radius: 10px;
|
|
font-weight: 600;
|
|
min-width: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.scope-tab.active .count {
|
|
background: rgba(88,166,255,0.15);
|
|
color: var(--accent-blue);
|
|
}
|
|
|
|
/* ── Results ── */
|
|
.results {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 6px 8px;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--border) transparent;
|
|
}
|
|
|
|
.results::-webkit-scrollbar { width: 6px; }
|
|
.results::-webkit-scrollbar-track { background: transparent; }
|
|
.results::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
|
|
|
|
.result-group-label {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.4px;
|
|
color: var(--text-muted);
|
|
padding: 10px 12px 4px;
|
|
}
|
|
|
|
.result-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
padding: 10px 12px;
|
|
border-radius: var(--radius-md);
|
|
cursor: pointer;
|
|
transition: background 0.1s;
|
|
animation: slideInResult 0.2s ease-out both;
|
|
}
|
|
|
|
.result-item:nth-child(2) { animation-delay: 0.03s; }
|
|
.result-item:nth-child(3) { animation-delay: 0.06s; }
|
|
.result-item:nth-child(4) { animation-delay: 0.09s; }
|
|
.result-item:nth-child(5) { animation-delay: 0.12s; }
|
|
.result-item:nth-child(6) { animation-delay: 0.15s; }
|
|
|
|
.result-item:hover, .result-item.selected {
|
|
background: rgba(255,255,255,0.04);
|
|
}
|
|
|
|
.result-item.selected {
|
|
background: rgba(88,166,255,0.08);
|
|
outline: 1px solid rgba(88,166,255,0.2);
|
|
}
|
|
|
|
.result-icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: var(--radius-sm);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.result-icon svg { width: 18px; height: 18px; }
|
|
|
|
.result-icon.execution {
|
|
background: rgba(88,166,255,0.12);
|
|
color: var(--accent-blue);
|
|
}
|
|
|
|
.result-icon.route {
|
|
background: rgba(188,140,255,0.12);
|
|
color: var(--accent-purple);
|
|
}
|
|
|
|
.result-icon.exchange {
|
|
background: rgba(121,192,255,0.12);
|
|
color: var(--accent-cyan);
|
|
}
|
|
|
|
.result-icon.error {
|
|
background: rgba(248,81,73,0.12);
|
|
color: var(--accent-red);
|
|
}
|
|
|
|
.result-icon.agent {
|
|
background: rgba(63,185,80,0.12);
|
|
color: var(--accent-green);
|
|
}
|
|
|
|
.result-body {
|
|
flex: 1;
|
|
min-width: 0;
|
|
padding-top: 1px;
|
|
}
|
|
|
|
.result-title {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.result-title .highlight {
|
|
color: var(--accent-blue);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.result-meta {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
margin-top: 3px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.result-meta .sep {
|
|
width: 3px; height: 3px;
|
|
border-radius: 50%;
|
|
background: var(--text-muted);
|
|
opacity: 0.5;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Tags / Badges */
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
padding: 2px 8px;
|
|
border-radius: 12px;
|
|
line-height: 1.4;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.badge.status-completed {
|
|
background: rgba(63,185,80,0.12);
|
|
color: var(--accent-green);
|
|
}
|
|
|
|
.badge.status-failed {
|
|
background: rgba(248,81,73,0.12);
|
|
color: var(--accent-red);
|
|
}
|
|
|
|
.badge.status-running {
|
|
background: rgba(210,153,34,0.12);
|
|
color: var(--accent-orange);
|
|
}
|
|
|
|
.badge.route-tag {
|
|
background: rgba(188,140,255,0.1);
|
|
color: var(--accent-purple);
|
|
font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
|
|
font-size: 10.5px;
|
|
}
|
|
|
|
.badge.env-tag {
|
|
background: rgba(63,185,80,0.1);
|
|
color: var(--accent-green);
|
|
}
|
|
|
|
.badge.duration {
|
|
background: rgba(255,255,255,0.06);
|
|
color: var(--text-secondary);
|
|
font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
|
|
font-size: 10.5px;
|
|
}
|
|
|
|
.result-right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
gap: 4px;
|
|
flex-shrink: 0;
|
|
padding-top: 2px;
|
|
}
|
|
|
|
.result-time {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Preview Pane (inline) */
|
|
.result-preview {
|
|
margin-top: 8px;
|
|
background: var(--bg-tertiary);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
padding: 10px 12px;
|
|
font-size: 12px;
|
|
font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
|
|
color: var(--text-secondary);
|
|
line-height: 1.6;
|
|
max-height: 120px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.result-preview::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0; left: 0; right: 0;
|
|
height: 30px;
|
|
background: linear-gradient(transparent, var(--bg-tertiary));
|
|
}
|
|
|
|
.result-preview .key { color: var(--accent-cyan); }
|
|
.result-preview .str { color: var(--accent-green); }
|
|
.result-preview .num { color: var(--accent-orange); }
|
|
.result-preview .kw { color: var(--accent-purple); }
|
|
|
|
/* ── Footer ── */
|
|
.search-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 8px 18px;
|
|
border-top: 1px solid var(--border);
|
|
background: var(--bg-tertiary);
|
|
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
|
|
}
|
|
|
|
.footer-hints {
|
|
display: flex;
|
|
gap: 16px;
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.footer-hint {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.footer-hint kbd {
|
|
font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
|
|
font-size: 10px;
|
|
padding: 1px 5px;
|
|
background: rgba(255,255,255,0.06);
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.footer-powered {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.footer-powered svg { width: 14px; height: 14px; color: var(--accent-blue); }
|
|
|
|
/* ── Typing cursor ── */
|
|
.cursor {
|
|
display: inline-block;
|
|
width: 2px;
|
|
height: 18px;
|
|
background: var(--accent-blue);
|
|
margin-left: 1px;
|
|
animation: blink 1s step-end infinite;
|
|
vertical-align: text-bottom;
|
|
}
|
|
|
|
@keyframes blink {
|
|
50% { opacity: 0; }
|
|
}
|
|
|
|
/* ── Filter chips in input area ── */
|
|
.filter-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 2px 8px;
|
|
background: rgba(88,166,255,0.12);
|
|
color: var(--accent-blue);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
border-radius: 4px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.filter-chip .chip-key {
|
|
color: var(--text-muted);
|
|
font-size: 11px;
|
|
}
|
|
|
|
/* ── Responsive ── */
|
|
@media (max-width: 768px) {
|
|
.search-modal { width: calc(100vw - 32px); max-height: 70vh; }
|
|
.app-sidebar { display: none; }
|
|
.app-content { grid-template-columns: 1fr; }
|
|
.app-table-row { grid-template-columns: 30px 2fr 1fr 80px; }
|
|
.app-table-row .hide-mobile { display: none; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Background App UI -->
|
|
<div class="app-bg">
|
|
<div class="app-topbar">
|
|
<div class="logo">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M12 2L2 7l10 5 10-5-10-5z"/>
|
|
<path d="M2 17l10 5 10-5"/>
|
|
<path d="M2 12l10 5 10-5"/>
|
|
</svg>
|
|
Cameleer
|
|
</div>
|
|
<div class="nav-items">
|
|
<div class="nav-item active">Dashboard</div>
|
|
<div class="nav-item">Routes</div>
|
|
<div class="nav-item">Executions</div>
|
|
<div class="nav-item">Agents</div>
|
|
</div>
|
|
<div class="search-trigger" onclick="void(0)">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
|
|
Search everything...
|
|
<kbd class="kbd">⌘K</kbd>
|
|
</div>
|
|
</div>
|
|
<div class="app-content">
|
|
<div class="app-sidebar">
|
|
<div class="sidebar-section">
|
|
<div class="sidebar-title">Observe</div>
|
|
<div class="sidebar-item active">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
|
|
Dashboard
|
|
</div>
|
|
<div class="sidebar-item">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
|
|
Live Trace
|
|
</div>
|
|
<div class="sidebar-item">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
|
|
Executions
|
|
</div>
|
|
</div>
|
|
<div class="sidebar-section">
|
|
<div class="sidebar-title">Topology</div>
|
|
<div class="sidebar-item">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" y1="22" x2="4" y2="15"/></svg>
|
|
Routes
|
|
</div>
|
|
<div class="sidebar-item">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>
|
|
Agents
|
|
</div>
|
|
<div class="sidebar-item">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
|
|
Diagrams
|
|
</div>
|
|
</div>
|
|
<div class="sidebar-section">
|
|
<div class="sidebar-title">Investigate</div>
|
|
<div class="sidebar-item">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
|
|
Errors
|
|
</div>
|
|
<div class="sidebar-item">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
|
|
Exchanges
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="app-main">
|
|
<div class="page-title">Dashboard</div>
|
|
<div class="page-subtitle">3 agents connected — 12 routes active — 1,247 executions/min</div>
|
|
<div class="app-table-row header">
|
|
<div></div>
|
|
<div>Route / Exchange</div>
|
|
<div>Agent</div>
|
|
<div class="hide-mobile">Correlation ID</div>
|
|
<div>Duration</div>
|
|
<div>Time</div>
|
|
</div>
|
|
<div class="app-table-row">
|
|
<div><span class="status-dot"></span></div>
|
|
<div>content-based-routing</div>
|
|
<div>order-svc-pod-7f8</div>
|
|
<div class="hide-mobile">cmr-9a4f2b...</div>
|
|
<div>47ms</div>
|
|
<div>2s ago</div>
|
|
</div>
|
|
<div class="app-table-row">
|
|
<div><span class="status-dot"></span></div>
|
|
<div>timer-heartbeat</div>
|
|
<div>order-svc-pod-a3b</div>
|
|
<div class="hide-mobile">cmr-8e3c1a...</div>
|
|
<div>3ms</div>
|
|
<div>4s ago</div>
|
|
</div>
|
|
<div class="app-table-row">
|
|
<div><span class="status-dot failed"></span></div>
|
|
<div>file-ingest-orders</div>
|
|
<div>order-svc-pod-7f8</div>
|
|
<div class="hide-mobile">cmr-7d2b0f...</div>
|
|
<div>312ms</div>
|
|
<div>8s ago</div>
|
|
</div>
|
|
<div class="app-table-row">
|
|
<div><span class="status-dot"></span></div>
|
|
<div>rest-api-orders</div>
|
|
<div>order-svc-pod-x9y</div>
|
|
<div class="hide-mobile">cmr-6c1a9e...</div>
|
|
<div>128ms</div>
|
|
<div>11s ago</div>
|
|
</div>
|
|
<div class="app-table-row">
|
|
<div><span class="status-dot"></span></div>
|
|
<div>split-order-items</div>
|
|
<div>order-svc-pod-a3b</div>
|
|
<div class="hide-mobile">cmr-5b0d8c...</div>
|
|
<div>89ms</div>
|
|
<div>15s ago</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CMD-K Search Overlay -->
|
|
<div class="overlay">
|
|
<div class="search-modal">
|
|
|
|
<!-- Input -->
|
|
<div class="search-input-wrap">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="11" cy="11" r="8"/>
|
|
<path d="m21 21-4.35-4.35"/>
|
|
</svg>
|
|
<span class="filter-chip"><span class="chip-key">route:</span>order</span>
|
|
<input class="search-input" type="text" value="PRIORITY" autofocus placeholder="Search executions, routes, exchanges..." />
|
|
<div class="input-hint">
|
|
<kbd>esc</kbd> close
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scope tabs -->
|
|
<div class="scope-tabs">
|
|
<div class="scope-tab active">All <span class="count">14</span></div>
|
|
<div class="scope-tab">Executions <span class="count">8</span></div>
|
|
<div class="scope-tab">Routes <span class="count">3</span></div>
|
|
<div class="scope-tab">Exchanges <span class="count">2</span></div>
|
|
<div class="scope-tab">Agents <span class="count">1</span></div>
|
|
</div>
|
|
|
|
<!-- Results -->
|
|
<div class="results">
|
|
<div class="result-group-label">Executions</div>
|
|
|
|
<!-- Result 1 - selected -->
|
|
<div class="result-item selected">
|
|
<div class="result-icon execution">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
|
|
</div>
|
|
<div class="result-body">
|
|
<div class="result-title">
|
|
content-based-routing
|
|
<span class="badge status-completed">Completed</span>
|
|
<span class="badge duration">47ms</span>
|
|
</div>
|
|
<div class="result-meta">
|
|
<span class="badge route-tag">route-cbr</span>
|
|
<span class="sep"></span>
|
|
cmr-9a4f2b71-e8c3
|
|
<span class="sep"></span>
|
|
Body matched <span class="result-title"><span class="highlight">PRIORITY</span></span>
|
|
</div>
|
|
<div class="result-preview">
|
|
{
|
|
<span class="key">"routeId"</span>: <span class="str">"content-based-routing"</span>,
|
|
<span class="key">"exchangeId"</span>: <span class="str">"E-2026-03-08-00142"</span>,
|
|
<span class="key">"status"</span>: <span class="str">"COMPLETED"</span>,
|
|
<span class="key">"durationMs"</span>: <span class="num">47</span>,
|
|
<span class="key">"inputSnapshot"</span>: {
|
|
<span class="key">"body"</span>: <span class="str">"{\"type\":\"<b class="highlight">PRIORITY</b>\",\"item\":\"Widget-X\",\"qty\":50}"</span>,
|
|
<span class="key">"headers"</span>: { <span class="key">"Content-Type"</span>: <span class="str">"application/json"</span> }
|
|
}
|
|
}</div>
|
|
</div>
|
|
<div class="result-right">
|
|
<span class="result-time">2s ago</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Result 2 -->
|
|
<div class="result-item">
|
|
<div class="result-icon error">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
|
|
</div>
|
|
<div class="result-body">
|
|
<div class="result-title">
|
|
content-based-routing
|
|
<span class="badge status-failed">Failed</span>
|
|
<span class="badge duration">312ms</span>
|
|
</div>
|
|
<div class="result-meta">
|
|
<span class="badge route-tag">route-cbr</span>
|
|
<span class="sep"></span>
|
|
cmr-7d2b0f93-a1d7
|
|
<span class="sep"></span>
|
|
NullPointerException in <span class="result-title"><span class="highlight">PRIORITY</span></span> branch
|
|
</div>
|
|
</div>
|
|
<div class="result-right">
|
|
<span class="result-time">8s ago</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Result 3 -->
|
|
<div class="result-item">
|
|
<div class="result-icon execution">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
|
|
</div>
|
|
<div class="result-body">
|
|
<div class="result-title">
|
|
split-order-items
|
|
<span class="badge status-completed">Completed</span>
|
|
<span class="badge duration">89ms</span>
|
|
</div>
|
|
<div class="result-meta">
|
|
<span class="badge route-tag">route-split</span>
|
|
<span class="sep"></span>
|
|
cmr-9a4f2b71-e8c3
|
|
<span class="sep"></span>
|
|
Correlated — downstream of <span class="result-title"><span class="highlight">PRIORITY</span></span> order
|
|
</div>
|
|
</div>
|
|
<div class="result-right">
|
|
<span class="result-time">2s ago</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="result-group-label">Routes</div>
|
|
|
|
<!-- Result 4 -->
|
|
<div class="result-item">
|
|
<div class="result-icon route">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" y1="22" x2="4" y2="15"/></svg>
|
|
</div>
|
|
<div class="result-body">
|
|
<div class="result-title">
|
|
content-based-routing
|
|
<span class="badge env-tag">production</span>
|
|
</div>
|
|
<div class="result-meta">
|
|
<span class="badge route-tag">route-cbr</span>
|
|
<span class="sep"></span>
|
|
14 nodes, 14 edges
|
|
<span class="sep"></span>
|
|
EIP_CHOICE branches: <span class="result-title"><span class="highlight">PRIORITY</span></span>, STANDARD, BULK
|
|
</div>
|
|
</div>
|
|
<div class="result-right">
|
|
<span class="result-time">Route</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="result-group-label">Exchanges</div>
|
|
|
|
<!-- Result 5 -->
|
|
<div class="result-item">
|
|
<div class="result-icon exchange">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
|
|
</div>
|
|
<div class="result-body">
|
|
<div class="result-title">
|
|
E-2026-03-08-00142
|
|
</div>
|
|
<div class="result-meta">
|
|
cmr-9a4f2b71-e8c3
|
|
<span class="sep"></span>
|
|
3 route hops
|
|
<span class="sep"></span>
|
|
Body: <span class="result-title"><span class="highlight">PRIORITY</span></span> order Widget-X qty:50
|
|
</div>
|
|
</div>
|
|
<div class="result-right">
|
|
<span class="result-time">2s ago</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Result 6 -->
|
|
<div class="result-item">
|
|
<div class="result-icon exchange">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
|
|
</div>
|
|
<div class="result-body">
|
|
<div class="result-title">
|
|
E-2026-03-08-00098
|
|
</div>
|
|
<div class="result-meta">
|
|
cmr-7d2b0f93-a1d7
|
|
<span class="sep"></span>
|
|
1 route hop
|
|
<span class="sep"></span>
|
|
Body: <span class="result-title"><span class="highlight">PRIORITY</span></span> order Gadget-Z qty:12 — failed
|
|
</div>
|
|
</div>
|
|
<div class="result-right">
|
|
<span class="result-time">8s ago</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="search-footer">
|
|
<div class="footer-hints">
|
|
<div class="footer-hint"><kbd>↑</kbd><kbd>↓</kbd> navigate</div>
|
|
<div class="footer-hint"><kbd>↵</kbd> open</div>
|
|
<div class="footer-hint"><kbd>tab</kbd> filter</div>
|
|
<div class="footer-hint"><kbd>#</kbd> scope</div>
|
|
</div>
|
|
<div class="footer-powered">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M12 2L2 7l10 5 10-5-10-5z"/>
|
|
<path d="M2 17l10 5 10-5"/>
|
|
<path d="M2 12l10 5 10-5"/>
|
|
</svg>
|
|
Cameleer
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|