feat: kill session — DELETE endpoint, hover × button with confirmation

muxplex/frontend/app.js

@@ -406,6 +406,7 @@ function buildTileHTML(session, index, mobile) {
     `<span class="tile-meta">${bellHtml}<span class="tile-time">${escapeHtml(timeStr)}</span></span>` +
     `</div>` +
     `<div class="tile-body"><pre>${ansiToHtml(lastLines)}</pre></div>` +
+    `<button class="tile-delete" data-session="${escapedName}" aria-label="Kill session">&times;</button>` +
     `</article>`
   );
 }
@@ -442,6 +443,7 @@ function buildSidebarHTML(session, currentSession) {
     `<div class="sidebar-item-header">` +
     `<span class="sidebar-item-name">${escapedName}</span>` +
     `${bellHtml}` +
+    `<button class="sidebar-delete" data-session="${escapedName}" aria-label="Kill session">&times;</button>` +
     `</div>` +
     `<div class="sidebar-item-body"><pre>${ansiToHtml(lastLines)}</pre></div>` +
     `</article>`
@@ -1446,11 +1448,37 @@ async function createNewSession(name) {
   }
 }
 
+/**
+ * Kill a tmux session by name via DELETE /api/sessions/{name}.
+ * Shows a confirmation dialog before killing. Refreshes the session list on success.
+ * @param {string} name - The session name to kill.
+ */
+function killSession(name) {
+  if (!confirm('Kill session "' + name + '"?')) return;
+  api('DELETE', '/api/sessions/' + name)
+    .then(function() {
+      showToast('Session \'' + name + '\' killed');
+      pollSessions();
+    })
+    .catch(function(err) {
+      showToast('Failed to kill session: ' + (err.message || 'unknown error'));
+    });
+}
+
 /**
  * Bind all static (once-only) event listeners for the app UI.
  * Called once after restoreState() resolves.
  */
 function bindStaticEventListeners() {
+  // Delegated kill-session handler (tiles + sidebar items are re-rendered each poll)
+  document.addEventListener('click', function(e) {
+    var deleteBtn = e.target.closest && e.target.closest('.tile-delete, .sidebar-delete');
+    if (!deleteBtn) return;
+    e.stopPropagation();
+    var name = deleteBtn.dataset.session;
+    if (name) killSession(name);
+  });
+
   on($('back-btn'), 'click', closeSession);
   var newSessionBtn = $('new-session-btn');
   if (newSessionBtn) on(newSessionBtn, 'click', function() { showNewSessionInput(newSessionBtn); });
@@ -1687,6 +1715,8 @@ if (typeof module !== 'undefined' && module.exports) {
     showNewSessionInput,
     showFabSessionInput,
     createNewSession,
+    // Kill session
+    killSession,
     // Test-only helpers
     _setCurrentSessions,
     _setViewMode,

muxplex/frontend/style.css

@@ -877,6 +877,63 @@ body {
 
 
 
+/* ============================================================
+   Delete (kill) session buttons — appear on hover
+   ============================================================ */
+
+.tile-delete {
+  position: absolute;
+  top: 4px;
+  right: 6px;
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  font-size: 14px;
+  cursor: pointer;
+  padding: 2px 6px;
+  border-radius: 4px;
+  opacity: 0;
+  transition: opacity 150ms ease;
+  z-index: 2;
+  line-height: 1;
+}
+
+.session-tile:hover .tile-delete,
+.session-tile:focus-within .tile-delete {
+  opacity: 1;
+}
+
+.tile-delete:hover {
+  color: #ef4444;
+  background: rgba(239, 68, 68, 0.1);
+  opacity: 1;
+}
+
+.sidebar-delete {
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  font-size: 13px;
+  cursor: pointer;
+  padding: 1px 5px;
+  border-radius: 3px;
+  opacity: 0;
+  transition: opacity 150ms ease;
+  flex-shrink: 0;
+  line-height: 1;
+}
+
+.sidebar-item:hover .sidebar-delete,
+.sidebar-item:focus-within .sidebar-delete {
+  opacity: 1;
+}
+
+.sidebar-delete:hover {
+  color: #ef4444;
+  background: rgba(239, 68, 68, 0.1);
+  opacity: 1;
+}
+
 /* ============================================================
    Header actions + settings buttons
    ============================================================ */

muxplex/frontend/tests/test_app.mjs

@@ -2382,6 +2382,20 @@ test('app.js source uses 500ms debounce for template input and references new_se
   assert.ok(source.includes('new_session_template'), 'must reference new_session_template setting key');
 });
 
+test('buildTileHTML includes tile-delete button with data-session attribute', () => {
+  const session = { name: 'my-session', snapshot: '', bell: { unseen_count: 0, seen_at: null, last_fired_at: null } };
+  const html = app.buildTileHTML(session, 0, false);
+  assert.ok(html.includes('tile-delete'), 'buildTileHTML must include tile-delete button class');
+  assert.ok(html.includes('data-session="my-session"'), 'tile-delete button must have data-session attribute');
+});
+
+test('buildSidebarHTML includes sidebar-delete button with data-session attribute', () => {
+  const session = { name: 'my-session', snapshot: '', bell: { unseen_count: 0, seen_at: null, last_fired_at: null } };
+  const html = app.buildSidebarHTML(session, null);
+  assert.ok(html.includes('sidebar-delete'), 'buildSidebarHTML must include sidebar-delete button class');
+  assert.ok(html.includes('data-session="my-session"'), 'sidebar-delete button must have data-session attribute');
+});
+
 test('createNewSession polls for session before auto-opening (not immediate setTimeout openSession)', () => {
   // The old behavior was: setTimeout(() => openSession(...), 500) immediately after POST.
   // The new behavior must use a polling interval to wait for the session to appear in