From 95bfc36fd8bbeaec7ce4924a1f32b5fc758f7947 Mon Sep 17 00:00:00 2001
From: Brian Krabach <brkrabac@microsoft.com>
Date: Wed, 15 Apr 2026 21:24:26 -0700
Subject: [PATCH] feat: add 'Add Sessions' affordance tile in user views grid

---
 muxplex/frontend/app.js           | 15 +++++++++++++++
 muxplex/frontend/style.css        | 32 +++++++++++++++++++++++++++++++
 muxplex/tests/test_frontend_js.py | 11 +++++++++++
 3 files changed, 58 insertions(+)

diff --git a/muxplex/frontend/app.js b/muxplex/frontend/app.js
index a10db36..6a5e010 100644
--- a/muxplex/frontend/app.js
+++ b/muxplex/frontend/app.js
@@ -1431,6 +1431,21 @@ function renderGrid(sessions) {
     else if (session.status === 'unreachable') statusTilesHtml += buildStatusTileHTML(session.deviceName, 'Offline', 'offline');
     else if (session.status === 'empty') statusTilesHtml += buildStatusTileHTML(session.deviceName, 'No sessions', 'empty');
   });
+  // Add Sessions affordance tile — shown in user views only
+  if (_activeView !== 'all' && _activeView !== 'hidden') {
+    var viewsArr = (_serverSettings && _serverSettings.views) || [];
+    var isUserView = false;
+    for (var vi = 0; vi < viewsArr.length; vi++) {
+      if (viewsArr[vi].name === _activeView) { isUserView = true; break; }
+    }
+    if (isUserView) {
+      html += '<button class="add-sessions-tile" onclick="window.MuxplexApp.openAddSessionsPanel()" aria-label="Add sessions to this view">';
+      html += '<span class="add-sessions-tile__icon">+</span>';
+      html += '<span class="add-sessions-tile__label">Add Sessions</span>';
+      html += '</button>';
+    }
+  }
+
   if (grid) grid.innerHTML = html + statusTilesHtml;
 
   // Clear filter bar (filtered mode removed; bar is a no-op for flat/grouped)
diff --git a/muxplex/frontend/style.css b/muxplex/frontend/style.css
index f3592ec..38949f7 100644
--- a/muxplex/frontend/style.css
+++ b/muxplex/frontend/style.css
@@ -2494,3 +2494,35 @@ body {
   margin: 4px 0;
   background: var(--border-subtle);
 }
+
+/* —— Add Sessions affordance tile ————————————————————————————————————————— */
+
+.add-sessions-tile {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 120px;
+  background: transparent;
+  border: 2px dashed var(--border-subtle);
+  border-radius: 8px;
+  color: var(--text-dim);
+  font-size: 13px;
+  cursor: pointer;
+  transition: border-color var(--t-fast), color var(--t-fast);
+}
+
+.add-sessions-tile:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+.add-sessions-tile__icon {
+  font-size: 24px;
+  line-height: 1;
+}
+
+.add-sessions-tile__label {
+  font-size: 12px;
+}
diff --git a/muxplex/tests/test_frontend_js.py b/muxplex/tests/test_frontend_js.py
index 51fdb28..998df7c 100644
--- a/muxplex/tests/test_frontend_js.py
+++ b/muxplex/tests/test_frontend_js.py
@@ -3942,3 +3942,14 @@ def test_open_flyout_menu_checks_mobile() -> None:
     assert "isMobile" in fn_body, (
         "openFlyoutMenu must check isMobile() to branch between flyout and sheet"
     )
+
+
+# ─── Task 11: Add Sessions entry point in grid ───────────────────────────────
+
+
+def test_render_grid_has_add_sessions_affordance() -> None:
+    """renderGrid must include an 'Add Sessions' affordance when in a user view."""
+    fn_body = _JS.split("function renderGrid")[1].split("\nfunction ")[0]
+    assert "add-sessions" in fn_body.lower() or "openAddSessionsPanel" in fn_body, (
+        "renderGrid must render an 'Add Sessions' affordance for user views"
+    )