romfast/clawd
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Update ashboard, dashboard (~2)

Browse Source
This commit is contained in:
Echo
2026-02-14 08:26:57 +00:00
parent 91a566b34c
commit 05c7abf496
2 changed files with 476 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
dashboard/api.py
View File

@@ -303,6 +303,10 @@ class TaskBoardHandler(SimpleHTTPRequestHandler):
self.handle_workspace_logs()
elif self.path == '/api/eco/status' or self.path.startswith('/api/eco/status?'):
self.handle_eco_status()
elif self.path == '/api/eco/sessions' or self.path.startswith('/api/eco/sessions?'):
self.handle_eco_sessions()
elif self.path.startswith('/api/eco/sessions/content'):
self.handle_eco_session_content()
elif self.path.startswith('/api/eco/logs'):
self.handle_eco_logs()
elif self.path == '/api/eco/doctor':
@@ -2016,15 +2020,119 @@ class TaskBoardHandler(SimpleHTTPRequestHandler):
services.append(info)
# Active sessions
sessions = []
if ECHO_SESSIONS_FILE.exists():
try:
sessions = json.loads(ECHO_SESSIONS_FILE.read_text())
except Exception:
pass
self.send_json({'services': services})
except Exception as e:
self.send_json({'error': str(e)}, 500)
self.send_json({'services': services, 'sessions': sessions})
def _eco_channel_map(self):
"""Build channel_id -> {name, platform, is_group} from config.json."""
config_file = ECHO_CORE_DIR / 'config.json'
m = {}
try:
cfg = json.loads(config_file.read_text())
for name, ch in cfg.get('channels', {}).items():
m[str(ch['id'])] = {'name': name, 'platform': 'discord'}
for name, ch in cfg.get('telegram_channels', {}).items():
m[str(ch['id'])] = {'name': name, 'platform': 'telegram'}
for name, ch in cfg.get('whatsapp_channels', {}).items():
m[str(ch['id'])] = {'name': name, 'platform': 'whatsapp', 'is_group': True}
for admin_id in cfg.get('bot', {}).get('admins', []):
m.setdefault(str(admin_id), {'name': f'TG DM', 'platform': 'telegram'})
wa_owner = cfg.get('whatsapp', {}).get('owner', '')
if wa_owner:
m.setdefault(f'wa-{wa_owner}', {'name': 'WA Owner', 'platform': 'whatsapp'})
except Exception:
pass
return m
def _eco_enrich_sessions(self):
"""Return enriched sessions list sorted by last_message_at desc."""
raw = {}
if ECHO_SESSIONS_FILE.exists():
try:
raw = json.loads(ECHO_SESSIONS_FILE.read_text())
except Exception:
pass
cmap = self._eco_channel_map()
sessions = []
if isinstance(raw, dict):
for ch_id, sdata in raw.items():
if 'MagicMock' in ch_id:
continue
entry = dict(sdata) if isinstance(sdata, dict) else {}
entry['channel_id'] = ch_id
if ch_id in cmap:
entry['platform'] = cmap[ch_id]['platform']
entry['channel_name'] = cmap[ch_id]['name']
entry['is_group'] = cmap[ch_id].get('is_group', False)
elif ch_id.startswith('wa-') or '@g.us' in ch_id or '@s.whatsapp.net' in ch_id:
entry['platform'] = 'whatsapp'
entry['is_group'] = '@g.us' in ch_id
entry['channel_name'] = ('WA Grup' if entry['is_group'] else 'WA DM')
elif ch_id.isdigit() and len(ch_id) >= 17:
entry['platform'] = 'discord'
entry['channel_name'] = 'Discord #' + ch_id[-6:]
elif ch_id.isdigit():
entry['platform'] = 'telegram'
entry['channel_name'] = 'TG ' + ch_id
else:
entry['platform'] = 'unknown'
entry['channel_name'] = ch_id[:20]
sessions.append(entry)
sessions.sort(key=lambda s: s.get('last_message_at', ''), reverse=True)
return sessions
def handle_eco_sessions(self):
"""Return enriched sessions list."""
try:
self.send_json({'sessions': self._eco_enrich_sessions()})
except Exception as e:
self.send_json({'error': str(e)}, 500)
def handle_eco_session_content(self):
"""Return conversation messages from a session transcript."""
try:
params = parse_qs(urlparse(self.path).query)
session_id = params.get('id', [''])[0]
if not session_id or '/' in session_id or '..' in session_id:
self.send_json({'error': 'Invalid session id'}, 400)
return
transcript = Path.home() / '.claude' / 'projects' / '-home-moltbot-echo-core' / f'{session_id}.jsonl'
if not transcript.exists():
self.send_json({'messages': [], 'error': 'Transcript not found'})
return
messages = []
for line in transcript.read_text().splitlines():
try:
d = json.loads(line)
except Exception:
continue
t = d.get('type', '')
if t == 'user':
msg = d.get('message', {})
content = msg.get('content', '')
if isinstance(content, str):
# Strip [EXTERNAL CONTENT] wrappers
text = content.replace('[EXTERNAL CONTENT]\n', '').replace('\n[END EXTERNAL CONTENT]', '').strip()
if text:
messages.append({'role': 'user', 'text': text[:2000]})
elif t == 'assistant':
msg = d.get('message', {})
content = msg.get('content', '')
if isinstance(content, list):
parts = []
for block in content:
if block.get('type') == 'text':
parts.append(block['text'])
text = '\n'.join(parts).strip()
if text:
messages.append({'role': 'assistant', 'text': text[:2000]})
elif isinstance(content, str) and content.strip():
messages.append({'role': 'assistant', 'text': content[:2000]})
self.send_json({'messages': messages})
except Exception as e:
self.send_json({'error': str(e)}, 500)

490
dashboard/eco.html
View File

@@ -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>