feat: add mobile FAB for new session creation

muxplex/frontend/app.js

@@ -862,6 +862,10 @@ async function openSession(name, opts = {}) {
     updateSessionPill(_currentSessions);
   }
 
+  // Hide FAB during fullscreen session view
+  const fab = $('new-session-fab');
+  if (fab) fab.classList.add('hidden');
+
   // Connect to session (kill old ttyd, spawn new one for this session)
   try {
     if (!opts.skipConnect) {
@@ -903,6 +907,10 @@ function closeSession() {
   const pill = $('session-pill');
   if (pill) pill.classList.add('hidden');
 
+  // Restore FAB when returning to overview
+  const fab = $('new-session-fab');
+  if (fab) fab.classList.remove('hidden');
+
   return Promise.resolve();
 }
 
@@ -1348,6 +1356,8 @@ function bindStaticEventListeners() {
   if (newSessionBtn) on(newSessionBtn, 'click', function() { showNewSessionInput(newSessionBtn); });
   var sidebarNewSessionBtn = $('sidebar-new-session-btn');
   if (sidebarNewSessionBtn) on(sidebarNewSessionBtn, 'click', function() { showNewSessionInput(sidebarNewSessionBtn); });
+  var newSessionFab = $('new-session-fab');
+  if (newSessionFab) on(newSessionFab, 'click', function() { showNewSessionInput(newSessionFab); });
   on($('sidebar-toggle-btn'), 'click', toggleSidebar);
   on($('sidebar-collapse-btn'), 'click', toggleSidebar);
   bindSidebarClickAway();

muxplex/frontend/index.html

@@ -69,6 +69,9 @@
     <span id="session-pill-bell" class="session-pill__bell hidden" aria-hidden="true">&#128276;</span>
   </button>
 
+  <!-- ── Mobile FAB (new session) ───────────────────────────────────────────── -->
+  <button id="new-session-fab" class="new-session-fab" aria-label="New session">+</button>
+
   <!-- ── Toast notification ─────────────────────────────────────────────────── -->
   <div id="toast" class="toast hidden" role="status" aria-live="polite" aria-atomic="true"></div>
 

muxplex/frontend/style.css

@@ -1201,6 +1201,34 @@ body {
   border-color: var(--text-muted);
 }
 
+/* ============================================================
+   Mobile FAB — new session floating action button
+   ============================================================ */
+
+.new-session-fab {
+  display: none;
+  position: fixed;
+  bottom: 16px;
+  right: 16px;
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: var(--accent);
+  color: var(--bg);
+  border: none;
+  font-size: 28px;
+  font-weight: 300;
+  line-height: 1;
+  cursor: pointer;
+  z-index: 100;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+  transition: transform 150ms ease, box-shadow 150ms ease;
+}
+
+.new-session-fab:active {
+  transform: scale(0.95);
+}
+
 /* ============================================================
    Responsive overlay sidebar at <960px
    ============================================================ */
@@ -1228,4 +1256,15 @@ body {
   .sidebar-collapse-btn {
     display: none;
   }
+
+  /* Mobile FAB: show on mobile, hide header + button */
+  .new-session-fab {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #new-session-btn {
+    display: none;
+  }
 }