Update ashboard, dashboard (~2)
This commit is contained in:
Echo
@@ -34,9 +34,9 @@
|
||||
margin-top: var(--space-1);
|
||||
}
|
||||
|
||||
/* Section */
|
||||
/* Section (collapsible) */
|
||||
.section {
|
||||
margin-bottom: var(--space-5);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
@@ -44,6 +44,20 @@
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--space-3);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.section.collapsed .section-body { display: none; }
|
||||
.section.collapsed .section-header { margin-bottom: 0; }
|
||||
.section.collapsed .sec-chev { transform: rotate(180deg); }
|
||||
|
||||
.sec-chev {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: var(--text-muted);
|
||||
transition: transform var(--transition-fast);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
@@ -132,37 +146,12 @@
|
||||
padding: var(--space-1) var(--space-3);
|
||||
}
|
||||
|
||||
/* Sessions table */
|
||||
.sessions-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.sessions-table th,
|
||||
.sessions-table td {
|
||||
padding: var(--space-2) var(--space-3);
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.sessions-table th {
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
font-size: var(--text-xs);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.sessions-table td {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Sessions */
|
||||
.sessions-empty {
|
||||
text-align: center;
|
||||
padding: var(--space-5);
|
||||
padding: var(--space-4);
|
||||
color: var(--text-muted);
|
||||
font-size: var(--text-sm);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.sessions-card {
|
||||
@@ -172,6 +161,160 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.session-item {
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.session-item:last-child { border-bottom: none; }
|
||||
|
||||
.session-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: 6px var(--space-3);
|
||||
cursor: pointer;
|
||||
transition: background var(--transition-fast);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.session-row:hover { background: var(--bg-elevated); }
|
||||
|
||||
.p-icon {
|
||||
flex-shrink: 0;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.p-icon.discord { color: #5865F2; }
|
||||
.p-icon.telegram { color: #26A5E4; }
|
||||
.p-icon.whatsapp { color: #25D366; }
|
||||
.p-icon.unknown { color: var(--text-muted); }
|
||||
|
||||
.s-name {
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.s-tag {
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
padding: 0 4px;
|
||||
border-radius: 3px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.s-tag.grup { background: rgba(37, 211, 102, 0.12); color: #25D366; }
|
||||
.s-tag.dm { background: rgba(156, 163, 175, 0.12); color: var(--text-muted); }
|
||||
|
||||
.s-stats {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
font-size: 10px;
|
||||
color: var(--text-muted);
|
||||
justify-content: flex-end;
|
||||
white-space: nowrap;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.s-time {
|
||||
font-size: 10px;
|
||||
color: var(--text-muted);
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.s-chevron {
|
||||
color: var(--text-muted);
|
||||
transition: transform var(--transition-fast);
|
||||
flex-shrink: 0;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.s-chevron.open { transform: rotate(180deg); }
|
||||
|
||||
.session-details {
|
||||
display: none;
|
||||
padding: 4px var(--space-3) var(--space-3);
|
||||
padding-left: calc(18px + var(--space-2) + var(--space-3));
|
||||
}
|
||||
|
||||
.session-details.open { display: block; }
|
||||
|
||||
.s-detail-row {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
font-size: 10px;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 6px;
|
||||
font-family: var(--font-mono);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.s-detail-row span { white-space: nowrap; }
|
||||
|
||||
/* Conversation messages */
|
||||
.s-messages {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--bg-elevated);
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.s-msg {
|
||||
padding: 4px 8px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.s-msg:last-child { border-bottom: none; }
|
||||
.s-msg.user { color: var(--text-secondary); }
|
||||
.s-msg.assistant { color: var(--accent); }
|
||||
|
||||
.s-msg-role {
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.s-msg.user .s-msg-role { color: var(--warning); }
|
||||
.s-msg.assistant .s-msg-role { color: var(--accent); }
|
||||
|
||||
.s-msg-text {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.s-loading {
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.s-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.s-actions .btn {
|
||||
font-size: 10px;
|
||||
padding: 2px 8px;
|
||||
}
|
||||
|
||||
/* Log viewer */
|
||||
.log-card {
|
||||
background: var(--bg-surface);
|
||||
@@ -361,13 +504,7 @@
|
||||
.check-name {
|
||||
min-width: auto;
|
||||
}
|
||||
.sessions-table {
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
.sessions-table th:nth-child(3),
|
||||
.sessions-table td:nth-child(3) {
|
||||
display: none;
|
||||
}
|
||||
.s-stats { display: none; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -421,83 +558,102 @@
|
||||
</div>
|
||||
|
||||
<!-- Services -->
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="section" id="sec-services">
|
||||
<div class="section-header" onclick="toggleSec('sec-services')">
|
||||
<h2 class="section-title">
|
||||
<i data-lucide="server" style="width:18px;height:18px;"></i>
|
||||
Services
|
||||
</h2>
|
||||
<svg class="s-chevron sec-chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
|
||||
</div>
|
||||
<div class="services-grid" id="servicesGrid">
|
||||
<div style="color:var(--text-muted);">Loading...</div>
|
||||
<div class="section-body">
|
||||
<div class="services-grid" id="servicesGrid">
|
||||
<div style="color:var(--text-muted);">Loading...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sessions -->
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="section" id="sec-sessions">
|
||||
<div class="section-header" onclick="toggleSec('sec-sessions')">
|
||||
<h2 class="section-title">
|
||||
<i data-lucide="message-square" style="width:18px;height:18px;"></i>
|
||||
Sessions
|
||||
</h2>
|
||||
<button class="btn btn-secondary btn-danger" onclick="clearAllSessions()" id="clearAllBtn" style="display:none;">
|
||||
<i data-lucide="trash-2"></i>
|
||||
Clear All
|
||||
</button>
|
||||
<div style="display:flex;gap:var(--space-2);align-items:center;">
|
||||
<button class="btn btn-secondary" onclick="event.stopPropagation();loadSessions()" style="font-size:var(--text-xs);padding:var(--space-1) var(--space-2);">
|
||||
<i data-lucide="refresh-cw"></i>
|
||||
</button>
|
||||
<button class="btn btn-secondary btn-danger" onclick="event.stopPropagation();clearAllSessions()" id="clearAllBtn" style="display:none;font-size:var(--text-xs);padding:var(--space-1) var(--space-2);">
|
||||
<i data-lucide="trash-2"></i> Clear All
|
||||
</button>
|
||||
<svg class="s-chevron sec-chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sessions-card">
|
||||
<div id="sessionsContent">
|
||||
<div class="sessions-empty">Loading...</div>
|
||||
<div class="section-body">
|
||||
<div class="sessions-card">
|
||||
<div id="sessionsContent">
|
||||
<div class="sessions-empty">Loading...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Logs -->
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="section collapsed" id="sec-logs">
|
||||
<div class="section-header" onclick="toggleSec('sec-logs')">
|
||||
<h2 class="section-title">
|
||||
<i data-lucide="scroll-text" style="width:18px;height:18px;"></i>
|
||||
Logs
|
||||
</h2>
|
||||
<svg class="s-chevron sec-chev open" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
|
||||
</div>
|
||||
<div class="log-card">
|
||||
<div class="log-toolbar">
|
||||
<label>Lines:</label>
|
||||
<select id="logLines" onchange="loadLogs()">
|
||||
<option value="50">50</option>
|
||||
<option value="100" selected>100</option>
|
||||
<option value="200">200</option>
|
||||
</select>
|
||||
<button class="btn btn-secondary" onclick="loadLogs()" style="font-size:var(--text-xs);padding:var(--space-1) var(--space-2);">
|
||||
<i data-lucide="refresh-cw"></i>
|
||||
Refresh
|
||||
</button>
|
||||
<div style="margin-left:auto;display:flex;align-items:center;gap:var(--space-2);">
|
||||
<label style="font-size:var(--text-xs);color:var(--text-muted);">Auto</label>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="autoRefreshLogs" onchange="toggleAutoRefreshLogs()">
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
<div class="section-body">
|
||||
<div class="log-card">
|
||||
<div class="log-toolbar">
|
||||
<label>Lines:</label>
|
||||
<select id="logLines" onchange="loadLogs()">
|
||||
<option value="50">50</option>
|
||||
<option value="100" selected>100</option>
|
||||
<option value="200">200</option>
|
||||
</select>
|
||||
<button class="btn btn-secondary" onclick="loadLogs()" style="font-size:var(--text-xs);padding:var(--space-1) var(--space-2);">
|
||||
<i data-lucide="refresh-cw"></i>
|
||||
Refresh
|
||||
</button>
|
||||
<div style="margin-left:auto;display:flex;align-items:center;gap:var(--space-2);">
|
||||
<label style="font-size:var(--text-xs);color:var(--text-muted);">Auto</label>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="autoRefreshLogs" onchange="toggleAutoRefreshLogs()">
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="log-content" id="logContent">Loading...</div>
|
||||
</div>
|
||||
<div class="log-content" id="logContent">Loading...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Doctor -->
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="section collapsed" id="sec-doctor">
|
||||
<div class="section-header" onclick="toggleSec('sec-doctor')">
|
||||
<h2 class="section-title">
|
||||
<i data-lucide="stethoscope" style="width:18px;height:18px;"></i>
|
||||
Doctor
|
||||
</h2>
|
||||
<button class="btn btn-primary" onclick="runDoctor()" id="doctorBtn">
|
||||
<i data-lucide="play"></i>
|
||||
Run Doctor
|
||||
</button>
|
||||
<div style="display:flex;gap:var(--space-2);align-items:center;">
|
||||
<button class="btn btn-primary" onclick="event.stopPropagation();runDoctor()" id="doctorBtn" style="font-size:var(--text-xs);padding:var(--space-1) var(--space-2);">
|
||||
<i data-lucide="play"></i> Run
|
||||
</button>
|
||||
<svg class="s-chevron sec-chev open" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="doctor-card" id="doctorCard" style="display:none;">
|
||||
<ul class="check-list" id="doctorChecks"></ul>
|
||||
<div class="section-body">
|
||||
<div class="doctor-card" id="doctorCard">
|
||||
<ul class="check-list" id="doctorChecks">
|
||||
<li class="check-item" style="color:var(--text-muted);justify-content:center;">Click Run to check</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
@@ -546,7 +702,6 @@
|
||||
}
|
||||
|
||||
renderServices(data.services);
|
||||
renderSessions(data.sessions);
|
||||
|
||||
const active = data.services.filter(s => s.active).length;
|
||||
document.getElementById('statusSummary').textContent =
|
||||
@@ -647,6 +802,78 @@
|
||||
|
||||
// ── Sessions ────────────────────────────────────────────
|
||||
|
||||
const pIcon = {
|
||||
discord: '<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128c.12-.098.246-.198.373-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03z"/></svg>',
|
||||
telegram: '<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/></svg>',
|
||||
whatsapp: '<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z"/></svg>',
|
||||
unknown: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/></svg>'
|
||||
};
|
||||
|
||||
function fmtTime(iso) {
|
||||
if (!iso) return '-';
|
||||
const d = new Date(iso), now = new Date();
|
||||
const t = d.toLocaleTimeString('ro-RO', {hour:'2-digit', minute:'2-digit'});
|
||||
if (d.toDateString() === now.toDateString()) return t;
|
||||
const yesterday = new Date(now); yesterday.setDate(yesterday.getDate()-1);
|
||||
if (d.toDateString() === yesterday.toDateString()) return 'ieri ' + t;
|
||||
return d.toLocaleDateString('ro-RO', {day:'2-digit', month:'2-digit'}) + ' ' + t;
|
||||
}
|
||||
|
||||
function fmtCost(u) { return u ? '$' + u.toFixed(3) : '-'; }
|
||||
function fmtTok(n) { return !n ? '0' : n >= 1000 ? (n/1000).toFixed(1)+'k' : String(n); }
|
||||
function fmtDur(ms) { if (!ms) return '-'; const s = Math.round(ms/1000); return s<60 ? s+'s' : Math.floor(s/60)+'m'+((s%60)?(' '+s%60+'s'):''); }
|
||||
|
||||
let sessionsCache = [];
|
||||
|
||||
async function loadSessions() {
|
||||
try {
|
||||
const res = await fetch('/echo/api/eco/sessions');
|
||||
const data = await res.json();
|
||||
sessionsCache = data.sessions || [];
|
||||
renderSessions(sessionsCache);
|
||||
} catch (e) {
|
||||
document.getElementById('sessionsContent').innerHTML =
|
||||
`<div class="sessions-empty" style="color:var(--error);">Error: ${e.message}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
function toggleSession(i) {
|
||||
const det = document.getElementById('sd-'+i);
|
||||
const chv = document.getElementById('sc-'+i);
|
||||
if (!det) return;
|
||||
const opening = !det.classList.contains('open');
|
||||
det.classList.toggle('open');
|
||||
if (chv) chv.classList.toggle('open');
|
||||
// Load content on first open
|
||||
if (opening && !det.dataset.loaded) {
|
||||
const s = sessionsCache[i];
|
||||
if (s && s.session_id) {
|
||||
det.dataset.loaded = '1';
|
||||
loadSessionContent(s.session_id, i);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function loadSessionContent(sessionId, idx) {
|
||||
const el = document.getElementById('sm-'+idx);
|
||||
if (!el) return;
|
||||
el.innerHTML = '<div class="s-loading"><span class="spinner"></span></div>';
|
||||
try {
|
||||
const res = await fetch(`/echo/api/eco/sessions/content?id=${sessionId}`);
|
||||
const data = await res.json();
|
||||
if (!data.messages || data.messages.length === 0) {
|
||||
el.innerHTML = '<div class="s-loading">No messages</div>';
|
||||
return;
|
||||
}
|
||||
el.innerHTML = data.messages.map(m =>
|
||||
`<div class="s-msg ${m.role}"><span class="s-msg-role">${m.role === 'user' ? 'USR' : 'ECH'}</span><span class="s-msg-text">${escapeHtml(m.text)}</span></div>`
|
||||
).join('');
|
||||
el.scrollTop = el.scrollHeight;
|
||||
} catch (e) {
|
||||
el.innerHTML = `<div class="s-loading" style="color:var(--error);">${e.message}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
function renderSessions(sessions) {
|
||||
const container = document.getElementById('sessionsContent');
|
||||
const clearBtn = document.getElementById('clearAllBtn');
|
||||
@@ -659,62 +886,60 @@
|
||||
|
||||
clearBtn.style.display = '';
|
||||
|
||||
// Handle both array and object formats
|
||||
let rows = [];
|
||||
if (Array.isArray(sessions)) {
|
||||
rows = sessions;
|
||||
} else if (typeof sessions === 'object') {
|
||||
rows = Object.entries(sessions).map(([k, v]) => ({
|
||||
channel: k,
|
||||
...(typeof v === 'object' ? v : {value: v})
|
||||
}));
|
||||
}
|
||||
container.innerHTML = sessions.map((s, i) => {
|
||||
const pl = s.platform || 'unknown';
|
||||
const ic = pIcon[pl] || pIcon.unknown;
|
||||
const nm = s.channel_name || s.channel_id || '-';
|
||||
const tag = s.is_group ? '<span class="s-tag grup">GRUP</span>' : '';
|
||||
const model = (s.model||'?').toUpperCase();
|
||||
|
||||
if (rows.length === 0) {
|
||||
container.innerHTML = '<div class="sessions-empty">No active sessions</div>';
|
||||
clearBtn.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = `
|
||||
<table class="sessions-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Channel</th>
|
||||
<th>Platform</th>
|
||||
<th>Started</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${rows.map(s => `
|
||||
<tr>
|
||||
<td>${escapeHtml(s.channel || s.id || '-')}</td>
|
||||
<td>${escapeHtml(s.platform || s.type || '-')}</td>
|
||||
<td>${s.started || s.timestamp || '-'}</td>
|
||||
<td>
|
||||
<button class="btn btn-secondary btn-danger" style="font-size:var(--text-xs);padding:2px 8px;"
|
||||
onclick="clearSession('${escapeHtml(s.channel || s.id || '')}')">
|
||||
<i data-lucide="x"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
`).join('')}
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
return `<div class="session-item">
|
||||
<div class="session-row" onclick="toggleSession(${i})">
|
||||
<div class="p-icon ${pl}">${ic}</div>
|
||||
<span class="s-name">${escapeHtml(nm)}</span>
|
||||
${tag}
|
||||
<div class="s-stats">
|
||||
<span>${s.message_count||0}msg</span>
|
||||
<span>${model}</span>
|
||||
<span>${fmtCost(s.total_cost_usd)}</span>
|
||||
</div>
|
||||
<span class="s-time">${fmtTime(s.last_message_at)}</span>
|
||||
<svg class="s-chevron" id="sc-${i}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
|
||||
</div>
|
||||
<div class="session-details" id="sd-${i}">
|
||||
<div class="s-detail-row">
|
||||
<span>created ${fmtTime(s.created_at)}</span>
|
||||
<span>${s.message_count||0} msgs</span>
|
||||
<span>${model}</span>
|
||||
<span>${fmtTok(s.total_input_tokens)}/${fmtTok(s.total_output_tokens)} tok</span>
|
||||
<span>ctx ${fmtTok(s.context_tokens)}</span>
|
||||
<span>${fmtCost(s.total_cost_usd)}</span>
|
||||
<span>${fmtDur(s.duration_ms)}</span>
|
||||
</div>
|
||||
<div class="s-messages" id="sm-${i}">
|
||||
<div class="s-loading">Click to load messages...</div>
|
||||
</div>
|
||||
<div class="s-actions">
|
||||
<button class="btn btn-secondary btn-danger" onclick="event.stopPropagation();clearSession('${escapeHtml(s.channel_id||'')}')">
|
||||
<i data-lucide="trash-2"></i> Clear
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
}).join('');
|
||||
lucide.createIcons();
|
||||
}
|
||||
|
||||
async function clearSession(channel) {
|
||||
async function clearSession(channelId) {
|
||||
if (!confirm('Clear this session?')) return;
|
||||
try {
|
||||
const res = await fetch('/echo/api/eco/sessions/clear', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({channel: channel})
|
||||
body: JSON.stringify({channel: channelId})
|
||||
});
|
||||
const data = await res.json();
|
||||
if (data.success) loadStatus();
|
||||
if (data.success) loadSessions();
|
||||
else alert('Error: ' + data.error);
|
||||
} catch (e) {
|
||||
alert('Failed: ' + e.message);
|
||||
@@ -730,7 +955,7 @@
|
||||
body: JSON.stringify({})
|
||||
});
|
||||
const data = await res.json();
|
||||
if (data.success) loadStatus();
|
||||
if (data.success) loadSessions();
|
||||
else alert('Error: ' + data.error);
|
||||
} catch (e) {
|
||||
alert('Failed: ' + e.message);
|
||||
@@ -767,11 +992,11 @@
|
||||
// ── Doctor ──────────────────────────────────────────────
|
||||
|
||||
async function runDoctor() {
|
||||
const card = document.getElementById('doctorCard');
|
||||
// Open section if collapsed
|
||||
document.getElementById('sec-doctor').classList.remove('collapsed');
|
||||
const list = document.getElementById('doctorChecks');
|
||||
const btn = document.getElementById('doctorBtn');
|
||||
|
||||
card.style.display = '';
|
||||
list.innerHTML = '<li class="check-item"><span class="spinner"></span> Running checks...</li>';
|
||||
btn.disabled = true;
|
||||
|
||||
@@ -803,6 +1028,10 @@
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
function toggleSec(id) {
|
||||
document.getElementById(id).classList.toggle('collapsed');
|
||||
}
|
||||
|
||||
function refreshAll() {
|
||||
loadStatus();
|
||||
loadLogs();
|
||||
@@ -811,10 +1040,11 @@
|
||||
// ── Init ────────────────────────────────────────────────
|
||||
|
||||
loadStatus();
|
||||
loadSessions();
|
||||
loadLogs();
|
||||
lucide.createIcons();
|
||||
|
||||
// Auto-refresh status every 10s
|
||||
// Auto-refresh status every 10s (sessions are manual only)
|
||||
statusRefreshInterval = setInterval(loadStatus, 10000);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user