loopsy 1.0.0

package/dist/dashboard/public/views/context.js

@@ -0,0 +1,167 @@
+import { registerView, api, dashboardApi, escapeHtml, formatTime } from '/app.js';
+
+let refreshTimer = null;
+
+function mount(container) {
+  container.innerHTML = `
+    <div class="section-header">Context Browser</div>
+
+    <div class="form-row mb-1">
+      <div class="form-group">
+        <select class="input" id="ctx-session"></select>
+      </div>
+      <div class="form-group">
+        <input class="input" id="ctx-filter" placeholder="Filter by key prefix...">
+      </div>
+      <button class="btn btn-primary btn-sm" id="btn-ctx-refresh">Refresh</button>
+    </div>
+
+    <div id="ctx-table-wrap"></div>
+
+    <div class="mt-1" style="border-top:1px solid var(--border-dim);padding-top:0.75rem">
+      <div class="form-label mb-1">New Entry</div>
+      <div class="form-row">
+        <div class="form-group"><input class="input" id="ctx-new-key" placeholder="Key"></div>
+        <div class="form-group"><input class="input" id="ctx-new-ttl" type="number" placeholder="TTL (sec)" style="width:100px"></div>
+      </div>
+      <div class="form-row">
+        <div class="form-group"><textarea class="textarea input" id="ctx-new-value" placeholder="Value" rows="2"></textarea></div>
+        <button class="btn btn-success" id="btn-ctx-set">Set</button>
+      </div>
+    </div>
+  `;
+
+  loadSessions();
+  document.getElementById('btn-ctx-refresh').addEventListener('click', loadEntries);
+  document.getElementById('btn-ctx-set').addEventListener('click', setEntry);
+  document.getElementById('ctx-filter').addEventListener('input', loadEntries);
+  document.getElementById('ctx-session').addEventListener('change', loadEntries);
+
+  refreshTimer = setInterval(loadEntries, 15000);
+}
+
+function unmount() {
+  if (refreshTimer) { clearInterval(refreshTimer); refreshTimer = null; }
+}
+
+async function loadSessions() {
+  try {
+    const { main, sessions } = await dashboardApi('/sessions');
+    const sel = document.getElementById('ctx-session');
+    const all = [];
+    if (main && main.status === 'running') all.push(main);
+    all.push(...sessions.filter(s => s.status === 'running'));
+    sel.innerHTML = all.map(s => `<option value="${s.port}">${escapeHtml(s.hostname)} :${s.port}</option>`).join('');
+    loadEntries();
+  } catch {}
+}
+
+async function loadEntries() {
+  const port = document.getElementById('ctx-session').value;
+  const prefix = document.getElementById('ctx-filter').value.trim();
+  if (!port) return;
+
+  try {
+    const path = prefix ? `/context?prefix=${encodeURIComponent(prefix)}` : '/context';
+    const data = await api(port, path);
+    renderTable(data.entries || []);
+  } catch (err) {
+    document.getElementById('ctx-table-wrap').innerHTML = `<div class="empty">${escapeHtml(err.message)}</div>`;
+  }
+}
+
+function renderTable(entries) {
+  if (entries.length === 0) {
+    document.getElementById('ctx-table-wrap').innerHTML = '<div class="empty">No context entries</div>';
+    return;
+  }
+
+  const sorted = entries.sort((a, b) => a.key.localeCompare(b.key));
+  document.getElementById('ctx-table-wrap').innerHTML = `
+    <table class="data-table">
+      <thead>
+        <tr>
+          <th>Key</th>
+          <th>Value</th>
+          <th class="hide-mobile">TTL</th>
+          <th class="hide-mobile">Updated</th>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody>
+        ${sorted.map((e, i) => `
+          <tr>
+            <td><span class="data-key" onclick="window.__toggleCtx(${i})">${escapeHtml(e.key)}</span></td>
+            <td><div class="data-value" id="ctx-val-${i}">${escapeHtml(truncate(e.value, 60))}</div></td>
+            <td class="hide-mobile text-muted text-xs">${e.ttl ? e.ttl + 's' : '—'}</td>
+            <td class="hide-mobile text-muted text-xs">${formatTime(e.updatedAt)}</td>
+            <td><button class="btn btn-danger btn-sm" onclick="window.__deleteCtx('${escapeHtml(e.key)}')">Del</button></td>
+          </tr>
+        `).join('')}
+      </tbody>
+    </table>
+  `;
+
+  // Store full values for expansion
+  window.__ctxEntries = sorted;
+}
+
+function truncate(str, len) {
+  return str.length > len ? str.slice(0, len) + '...' : str;
+}
+
+window.__toggleCtx = (idx) => {
+  const el = document.getElementById(`ctx-val-${idx}`);
+  const entry = window.__ctxEntries?.[idx];
+  if (!el || !entry) return;
+
+  if (el.classList.contains('expanded')) {
+    el.classList.remove('expanded');
+    el.textContent = truncate(entry.value, 60);
+  } else {
+    el.classList.add('expanded');
+    // Try JSON pretty-print
+    try {
+      const parsed = JSON.parse(entry.value);
+      el.textContent = JSON.stringify(parsed, null, 2);
+    } catch {
+      el.textContent = entry.value;
+    }
+  }
+};
+
+window.__deleteCtx = async (key) => {
+  const port = document.getElementById('ctx-session').value;
+  if (!port) return;
+  try {
+    await api(port, `/context/${encodeURIComponent(key)}`, { method: 'DELETE' });
+    await loadEntries();
+  } catch (err) {
+    alert('Failed: ' + err.message);
+  }
+};
+
+async function setEntry() {
+  const port = document.getElementById('ctx-session').value;
+  const key = document.getElementById('ctx-new-key').value.trim();
+  const value = document.getElementById('ctx-new-value').value;
+  const ttlStr = document.getElementById('ctx-new-ttl').value;
+  const ttl = ttlStr ? parseInt(ttlStr) : undefined;
+
+  if (!port || !key || !value) return;
+
+  try {
+    await api(port, `/context/${encodeURIComponent(key)}`, {
+      method: 'PUT',
+      body: JSON.stringify({ value, ttl }),
+    });
+    document.getElementById('ctx-new-key').value = '';
+    document.getElementById('ctx-new-value').value = '';
+    document.getElementById('ctx-new-ttl').value = '';
+    await loadEntries();
+  } catch (err) {
+    alert('Failed: ' + err.message);
+  }
+}
+
+registerView('context', { mount, unmount });

package/dist/dashboard/public/views/messages.js

@@ -0,0 +1,263 @@
+import { registerView, api, dashboardApi, escapeHtml, formatTime } from '/app.js';
+
+let refreshTimer = null;
+let activeTab = 'inbox';
+let expandedMsgIdx = null;
+
+function mount(container) {
+  container.innerHTML = `
+    <div class="section-header">Messages</div>
+
+    <div class="form-row mb-1">
+      <div class="form-group">
+        <select class="input" id="msg-session"></select>
+      </div>
+    </div>
+
+    <div class="tabs">
+      <div class="tab active" data-tab="inbox">Inbox</div>
+      <div class="tab" data-tab="outbox">Outbox</div>
+      <div class="tab" data-tab="compose">Compose</div>
+    </div>
+
+    <div id="msg-content"></div>
+  `;
+
+  document.querySelectorAll('.tab').forEach(t => {
+    t.addEventListener('click', () => {
+      activeTab = t.dataset.tab;
+      expandedMsgIdx = null;
+      document.querySelectorAll('.tab').forEach(x => x.classList.toggle('active', x === t));
+      renderTab();
+    });
+  });
+
+  loadSessions();
+  refreshTimer = setInterval(loadMessages, 10000);
+}
+
+function unmount() {
+  if (refreshTimer) { clearInterval(refreshTimer); refreshTimer = null; }
+}
+
+async function loadSessions() {
+  try {
+    const { main, sessions } = await dashboardApi('/sessions');
+    const sel = document.getElementById('msg-session');
+    const all = [];
+    if (main && main.status === 'running') all.push(main);
+    all.push(...sessions.filter(s => s.status === 'running'));
+    sel.innerHTML =
+      '<option value="all">All Sessions</option>' +
+      all.map(s => `<option value="${s.port}" data-hostname="${escapeHtml(s.hostname)}">${escapeHtml(s.hostname)} :${s.port}</option>`).join('');
+    sel.addEventListener('change', () => { expandedMsgIdx = null; loadMessages(); });
+    renderTab();
+  } catch {}
+}
+
+async function renderTab() {
+  if (activeTab === 'compose') {
+    renderCompose();
+  } else {
+    await loadMessages();
+  }
+}
+
+async function loadMessages() {
+  const portVal = document.getElementById('msg-session').value;
+  if (!portVal || activeTab === 'compose') return;
+
+  const content = document.getElementById('msg-content');
+  try {
+    let entries;
+    if (portVal === 'all') {
+      const data = await dashboardApi(`/messages/all?tab=${activeTab}`);
+      entries = data.entries || [];
+    } else {
+      const prefix = activeTab === 'inbox' ? 'inbox:' : 'outbox:';
+      const data = await api(portVal, `/context?prefix=${encodeURIComponent(prefix)}`);
+      entries = data.entries || [];
+    }
+
+    // Sort by envelope timestamp (latest first), fall back to updatedAt
+    entries.sort((a, b) => {
+      let tsA = a.updatedAt || 0, tsB = b.updatedAt || 0;
+      try { tsA = JSON.parse(a.value).ts || tsA; } catch {}
+      try { tsB = JSON.parse(b.value).ts || tsB; } catch {}
+      return tsB - tsA;
+    });
+
+    if (entries.length === 0) {
+      content.innerHTML = `<div class="empty">No ${activeTab} messages</div>`;
+      return;
+    }
+
+    content.innerHTML = entries.map((e, i) => {
+      let from = '?', body = e.value, type = '?', ts = e.updatedAt;
+      try {
+        const env = JSON.parse(e.value);
+        from = env.from || '?';
+        body = env.body || e.value;
+        type = env.type || '?';
+        ts = env.ts || e.updatedAt;
+      } catch {}
+
+      const badgeClass = type === 'chat' ? 'badge-cyan' : type === 'request' ? 'badge-amber' : type === 'response' ? 'badge-green' : 'badge-red';
+      const isExpanded = expandedMsgIdx === i;
+      const displayBody = isExpanded ? body : truncate(body, 80);
+
+      return `
+        <div class="msg-row" onclick="window.__toggleMsg(${i})">
+          <div class="msg-header">
+            <span class="msg-from">${escapeHtml(from)}</span>
+            <span class="badge ${badgeClass}">${escapeHtml(type)}</span>
+            <span class="msg-time">${formatTime(ts)}</span>
+          </div>
+          <div class="msg-body${isExpanded ? ' expanded' : ''}" id="msg-body-${i}">${escapeHtml(displayBody)}</div>
+        </div>
+      `;
+    }).join('');
+
+    window.__msgEntries = entries;
+  } catch (err) {
+    content.innerHTML = `<div class="empty">${escapeHtml(err.message)}</div>`;
+  }
+}
+
+function renderCompose() {
+  const content = document.getElementById('msg-content');
+  content.innerHTML = `
+    <div class="form-row">
+      <div class="form-group">
+        <div class="form-label">Send From</div>
+        <select class="input" id="compose-from"></select>
+      </div>
+      <div class="form-group">
+        <div class="form-label">Send To</div>
+        <select class="input" id="compose-peer">
+          <option value="">Loading peers...</option>
+        </select>
+      </div>
+      <div class="form-group">
+        <div class="form-label">Type</div>
+        <select class="input" id="compose-type">
+          <option value="chat">Chat</option>
+          <option value="request">Request</option>
+          <option value="response">Response</option>
+          <option value="broadcast">Broadcast</option>
+        </select>
+      </div>
+    </div>
+    <div class="form-row">
+      <div class="form-group">
+        <div class="form-label">Message</div>
+        <textarea class="textarea input" id="compose-body" rows="3" placeholder="Type your message..."></textarea>
+      </div>
+    </div>
+    <button class="btn btn-primary" id="btn-send">Send Message</button>
+    <div id="compose-status" class="mt-1 text-sm"></div>
+  `;
+
+  // Populate "from" dropdown with specific sessions (no "all")
+  const msgSel = document.getElementById('msg-session');
+  const fromSel = document.getElementById('compose-from');
+  fromSel.innerHTML = Array.from(msgSel.options)
+    .filter(o => o.value !== 'all')
+    .map(o => `<option value="${o.value}" data-hostname="${o.dataset?.hostname || ''}">${o.text}</option>`)
+    .join('');
+
+  loadPeersForCompose();
+  document.getElementById('btn-send').addEventListener('click', sendMessage);
+}
+
+async function loadPeersForCompose() {
+  const sel = document.getElementById('compose-peer');
+  if (!sel) return;
+  try {
+    const data = await dashboardApi('/peers/all');
+    const peers = (data.peers || []).filter(p => p.status === 'online');
+    if (peers.length === 0) {
+      sel.innerHTML = '<option value="">No online peers</option>';
+    } else {
+      sel.innerHTML = peers.map(p =>
+        `<option value="${escapeHtml(p.hostname)}">${escapeHtml(p.hostname)} (${escapeHtml(p.address)}:${p.port})</option>`
+      ).join('');
+    }
+  } catch {
+    sel.innerHTML = '<option value="">Failed to load peers</option>';
+  }
+}
+
+async function sendMessage() {
+  const fromPort = document.getElementById('compose-from').value;
+  const toHostname = document.getElementById('compose-peer').value;
+  const type = document.getElementById('compose-type').value;
+  const body = document.getElementById('compose-body').value.trim();
+  const statusEl = document.getElementById('compose-status');
+
+  if (!fromPort || !toHostname || !body) {
+    statusEl.innerHTML = '<span class="text-red">Fill in all fields</span>';
+    return;
+  }
+
+  statusEl.innerHTML = '<span class="text-muted">Sending...</span>';
+  try {
+    const result = await dashboardApi('/messages/send', {
+      method: 'POST',
+      body: JSON.stringify({ fromPort: parseInt(fromPort), toHostname, body, type }),
+    });
+    if (result.success) {
+      statusEl.innerHTML = `<span class="text-green">Sent! ID: ${escapeHtml(result.id)}</span>`;
+      document.getElementById('compose-body').value = '';
+    } else {
+      statusEl.innerHTML = `<span class="text-red">${escapeHtml(result.error || 'Unknown error')}</span>`;
+    }
+  } catch (err) {
+    statusEl.innerHTML = `<span class="text-red">Failed: ${escapeHtml(err.message)}</span>`;
+  }
+}
+
+function truncate(str, len) {
+  return str.length > len ? str.slice(0, len) + '...' : str;
+}
+
+window.__toggleMsg = (idx) => {
+  const entry = window.__msgEntries?.[idx];
+  if (!entry) return;
+
+  if (expandedMsgIdx === idx) {
+    expandedMsgIdx = null;
+  } else {
+    if (expandedMsgIdx !== null) {
+      const prevEl = document.getElementById(`msg-body-${expandedMsgIdx}`);
+      const prevEntry = window.__msgEntries?.[expandedMsgIdx];
+      if (prevEl && prevEntry) {
+        prevEl.classList.remove('expanded');
+        let prevBody = prevEntry.value;
+        try { prevBody = JSON.parse(prevEntry.value).body || prevBody; } catch {}
+        prevEl.textContent = truncate(prevBody, 80);
+      }
+    }
+    expandedMsgIdx = idx;
+  }
+
+  const el = document.getElementById(`msg-body-${idx}`);
+  if (!el) return;
+
+  if (expandedMsgIdx === idx) {
+    el.classList.add('expanded');
+    try {
+      const env = JSON.parse(entry.value);
+      el.textContent = env.body || entry.value;
+    } catch {
+      el.textContent = entry.value;
+    }
+  } else {
+    el.classList.remove('expanded');
+    let body = entry.value;
+    try { body = JSON.parse(entry.value).body || body; } catch {}
+    el.textContent = truncate(body, 80);
+  }
+};
+
+registerView('messages', { mount, unmount });

package/dist/dashboard/public/views/overview.js

@@ -0,0 +1,228 @@
+import { registerView, dashboardApi, formatUptime, escapeHtml } from '/app.js';
+
+function platformSvg(platform) {
+  const s = (d) => `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="color:var(--text-secondary)">${d}</svg>`;
+  switch (platform) {
+    case 'darwin': return s('<path d="M12.5 3C11 3 10 4 9 4S7 3 5.5 3C3.5 3 2 5 2 7.5c0 4 4.5 8 7 8.5 2.5-.5 7-4.5 7-8.5C16 5 14.5 3 12.5 3z"/>');
+    case 'win32': return s('<rect x="2" y="2" width="6" height="6" rx="0.5"/><rect x="10" y="2" width="6" height="6" rx="0.5"/><rect x="2" y="10" width="6" height="6" rx="0.5"/><rect x="10" y="10" width="6" height="6" rx="0.5"/>');
+    case 'linux': return s('<circle cx="9" cy="5" r="3"/><path d="M4 16c0-3 2.5-5 5-5s5 2 5 5"/>');
+    default: return s('<circle cx="9" cy="9" r="6"/><path d="M8.5 12h1"/><path d="M9 6a2 2 0 011.5 3.5L9 11"/>');
+  }
+}
+
+let refreshTimer = null;
+
+function mount(container) {
+  container.innerHTML = `
+    <div class="section-header">Command Center</div>
+    <div class="stats-row" id="stats-row">
+      <div class="stat-card"><div class="stat-value" id="stat-sessions">—</div><div class="stat-label">Sessions</div></div>
+      <div class="stat-card"><div class="stat-value" id="stat-peers">—</div><div class="stat-label">Network Peers</div></div>
+      <div class="stat-card"><div class="stat-value" id="stat-context">—</div><div class="stat-label">Context Entries</div></div>
+      <div class="stat-card"><div class="stat-value" id="stat-jobs">—</div><div class="stat-label">Active Jobs</div></div>
+    </div>
+
+    <div class="flex items-center justify-between flex-wrap gap-sm mb-1">
+      <div class="section-header" style="margin-bottom:0">Sessions</div>
+      <div class="flex gap-sm items-center">
+        <input type="number" class="input" id="fleet-count" value="3" min="1" max="10" style="width:60px">
+        <button class="btn btn-primary" id="btn-fleet">Start Fleet</button>
+        <button class="btn btn-warning btn-sm" id="btn-restart-all">Restart All</button>
+        <button class="btn btn-danger btn-sm" id="btn-stop-all">Stop All</button>
+      </div>
+    </div>
+
+    <div class="session-grid" id="session-grid"></div>
+
+    <div class="section-header" style="margin-top:1.5rem;margin-bottom:0.75rem">Network Peers</div>
+    <div class="peer-grid" id="network-peer-grid"></div>
+  `;
+
+  document.getElementById('btn-fleet').addEventListener('click', startFleet);
+  document.getElementById('btn-restart-all').addEventListener('click', restartAll);
+  document.getElementById('btn-stop-all').addEventListener('click', stopAll);
+
+  refresh();
+  refreshTimer = setInterval(refresh, 5000);
+}
+
+function unmount() {
+  if (refreshTimer) { clearInterval(refreshTimer); refreshTimer = null; }
+}
+
+async function refresh() {
+  try {
+    const data = await dashboardApi('/status/aggregate');
+    renderStats(data.sessions, data.network);
+    renderGrid(data.sessions);
+    renderNetworkPeers(data.network);
+  } catch (err) {
+    document.getElementById('session-grid').innerHTML = `<div class="empty">Failed to load: ${escapeHtml(err.message)}</div>`;
+  }
+}
+
+function renderStats(sessions, network) {
+  const running = sessions.filter(s => s.status === 'running' && !s.error);
+  const uniquePeers = network?.uniqueCount ?? 0;
+  const totalCtx = running.reduce((a, s) => a + (s.context?.entries ?? 0), 0);
+  const totalJobs = running.reduce((a, s) => a + (s.jobs?.active ?? 0), 0);
+
+  document.getElementById('stat-sessions').textContent = running.length;
+  document.getElementById('stat-peers').textContent = `${network?.onlineCount ?? 0}/${uniquePeers}`;
+  document.getElementById('stat-context').textContent = totalCtx;
+  document.getElementById('stat-jobs').textContent = totalJobs;
+}
+
+function renderGrid(sessions) {
+  const grid = document.getElementById('session-grid');
+  grid.innerHTML = sessions.map(s => {
+    const isRunning = s.status === 'running' && !s.error;
+    const dotClass = isRunning ? 'online' : s.status === 'running' ? 'unknown' : 'offline';
+    const cardClass = isRunning ? 'running' : 'stopped';
+
+    return `
+      <div class="session-card ${cardClass}">
+        <div class="session-card-header">
+          <div class="session-name">
+            <span class="status-dot ${dotClass}"></span>
+            ${escapeHtml(s.hostname || s.name)}
+          </div>
+          ${isRunning
+            ? s.name !== 'main'
+              ? `<div class="flex gap-sm">
+                  <button class="btn btn-warning btn-sm" onclick="window.__restartSession('${escapeHtml(s.name)}')">Restart</button>
+                  <button class="btn btn-danger btn-sm" onclick="window.__stopSession('${escapeHtml(s.name)}')">Stop</button>
+                </div>`
+              : ''
+            : s.name !== 'main'
+              ? `<button class="btn btn-success btn-sm" onclick="window.__startSession('${escapeHtml(s.name)}')">Start</button>`
+              : ''
+          }
+        </div>
+        <div class="session-meta">
+          <span>port</span> ${s.port || '—'}
+          &nbsp;&middot;&nbsp;
+          <span>platform</span> ${s.platform || '—'}
+          ${isRunning ? `
+            <br>
+            <span>peers</span> ${s.peers?.online ?? 0}/${s.peers?.total ?? 0}
+            &nbsp;&middot;&nbsp;
+            <span>jobs</span> ${s.jobs?.active ?? 0}
+            &nbsp;&middot;&nbsp;
+            <span>ctx</span> ${s.context?.entries ?? 0}
+            <br>
+            <span>uptime</span> ${formatUptime(s.uptime)}
+          ` : ''}
+          ${s.error ? `<br><span class="text-red">unreachable</span>` : ''}
+        </div>
+      </div>
+    `;
+  }).join('');
+}
+
+function renderNetworkPeers(network) {
+  const grid = document.getElementById('network-peer-grid');
+  if (!grid) return;
+  const peers = network?.peers ?? [];
+
+  if (peers.length === 0) {
+    grid.innerHTML = '<div class="empty">No peers discovered</div>';
+    return;
+  }
+
+  grid.innerHTML = peers.map(p => {
+    const dotClass = p.status === 'online' ? 'online' : p.status === 'offline' ? 'offline' : 'unknown';
+    const platformIcon = platformSvg(p.platform);
+
+    return `
+      <div class="peer-card">
+        <div class="flex items-center justify-between mb-1">
+          <div class="flex items-center gap-sm">
+            <span class="status-dot ${dotClass}"></span>
+            <span class="font-mono text-sm" style="font-weight:600">${escapeHtml(p.hostname)}</span>
+          </div>
+          ${platformIcon}
+        </div>
+        <div class="font-mono text-xs text-muted" style="line-height:1.7">
+          ${escapeHtml(p.address)}:${p.port}<br>
+          version ${escapeHtml(p.version || '?')}<br>
+          last seen ${p.lastSeen ? new Date(p.lastSeen).toLocaleTimeString() : 'never'}
+        </div>
+      </div>
+    `;
+  }).join('');
+}
+
+async function startFleet() {
+  const count = parseInt(document.getElementById('fleet-count').value) || 3;
+  const btn = document.getElementById('btn-fleet');
+  btn.disabled = true;
+  try {
+    await dashboardApi('/sessions', {
+      method: 'POST',
+      body: JSON.stringify({ fleet: true, count }),
+    });
+    await refresh();
+  } catch (err) {
+    alert('Failed: ' + err.message);
+  }
+  btn.disabled = false;
+}
+
+async function restartAll() {
+  if (!confirm('Restart all sessions?')) return;
+  const btn = document.getElementById('btn-restart-all');
+  btn.disabled = true;
+  try {
+    await dashboardApi('/sessions/restart-all', { method: 'POST' });
+    await new Promise(r => setTimeout(r, 1500));
+    await refresh();
+  } catch (err) {
+    alert('Failed: ' + err.message);
+  }
+  btn.disabled = false;
+}
+
+async function stopAll() {
+  if (!confirm('Stop all sessions?')) return;
+  const btn = document.getElementById('btn-stop-all');
+  btn.disabled = true;
+  try {
+    const { sessions } = await dashboardApi('/sessions');
+    for (const s of sessions) {
+      if (s.status === 'running') {
+        try { await dashboardApi(`/sessions/${s.name}`, { method: 'DELETE' }); } catch {}
+      }
+    }
+    await new Promise(r => setTimeout(r, 500));
+    await refresh();
+  } catch {}
+  btn.disabled = false;
+}
+
+// Global handlers for inline onclick
+window.__stopSession = async (name) => {
+  try {
+    await dashboardApi(`/sessions/${name}`, { method: 'DELETE' });
+    await new Promise(r => setTimeout(r, 500));
+    await refresh();
+  } catch (err) { alert('Failed: ' + err.message); }
+};
+
+window.__restartSession = async (name) => {
+  try {
+    await dashboardApi(`/sessions/${name}/restart`, { method: 'POST' });
+    await new Promise(r => setTimeout(r, 1500));
+    await refresh();
+  } catch (err) { alert('Failed: ' + err.message); }
+};
+
+window.__startSession = async (name) => {
+  try {
+    await dashboardApi('/sessions', { method: 'POST', body: JSON.stringify({ name }) });
+    await new Promise(r => setTimeout(r, 500));
+    await refresh();
+  } catch (err) { alert('Failed: ' + err.message); }
+};
+
+registerView('overview', { mount, unmount });