From 1167c8df7a1cb16c1fa8f8d761055565a5d41112 Mon Sep 17 00:00:00 2001
From: Brian Krabach <brkrabac@microsoft.com>
Date: Wed, 15 Apr 2026 21:13:25 -0700
Subject: [PATCH] feat: add Add Sessions panel HTML and CSS

---
 muxplex/frontend/index.html         |  13 +++
 muxplex/frontend/style.css          | 143 ++++++++++++++++++++++++++++
 muxplex/tests/test_frontend_css.py  |  17 ++++
 muxplex/tests/test_frontend_html.py |  25 ++++-
 4 files changed, 197 insertions(+), 1 deletion(-)

diff --git a/muxplex/frontend/index.html b/muxplex/frontend/index.html
index 6e31fcf..94cf2a6 100644
--- a/muxplex/frontend/index.html
+++ b/muxplex/frontend/index.html
@@ -86,6 +86,19 @@
     </div>
   </div>
 
+  <!-- —— Add Sessions panel ——————————————————————————————————————————— -->
+  <div id="add-sessions-panel" class="add-sessions-panel hidden" role="dialog" aria-modal="true" aria-label="Add sessions to view">
+    <div class="add-sessions-panel__backdrop" id="add-sessions-backdrop"></div>
+    <div class="add-sessions-panel__content">
+      <div class="add-sessions-panel__header">
+        <h2 id="add-sessions-title" class="add-sessions-panel__title">Add Sessions</h2>
+        <button id="add-sessions-close" class="add-sessions-panel__close" aria-label="Close">&times;</button>
+      </div>
+      <div id="add-sessions-list" class="add-sessions-panel__list"></div>
+      <p id="add-sessions-empty" class="add-sessions-panel__empty" style="display:none">All sessions are already in this view.</p>
+    </div>
+  </div>
+
   <!-- ── Session pill (persistent overlay button) ────────────────────────── -->
   <button id="session-pill" class="session-pill hidden" aria-label="Switch session">
     <span id="session-pill-label" class="session-pill__label"></span>
diff --git a/muxplex/frontend/style.css b/muxplex/frontend/style.css
index 0e4bfc5..f3592ec 100644
--- a/muxplex/frontend/style.css
+++ b/muxplex/frontend/style.css
@@ -1876,6 +1876,149 @@ body {
    overflows from bottom:0 upward, and tile-body clips excess at the top — showing
    the bottom-most content (the prompt area) just like a real terminal. */
 
+/* —— Add Sessions Panel —————————————————————————————————————————————————————————————————————————— */
+
+.add-sessions-panel {
+  position: fixed;
+  inset: 0;
+  z-index: 250;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.add-sessions-panel__backdrop {
+  position: absolute;
+  inset: 0;
+  background: var(--bg-overlay);
+}
+
+.add-sessions-panel__content {
+  position: relative;
+  width: 90%;
+  max-width: 440px;
+  max-height: 70vh;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.add-sessions-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.add-sessions-panel__title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text);
+  margin: 0;
+}
+
+.add-sessions-panel__close {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  color: var(--text-muted);
+  font-size: 18px;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.add-sessions-panel__close:hover {
+  background: var(--bg-surface);
+  color: var(--text);
+}
+
+.add-sessions-panel__list {
+  overflow-y: auto;
+  padding: 8px 0;
+  flex: 1;
+}
+
+.add-sessions-panel__empty {
+  padding: 24px 16px;
+  text-align: center;
+  color: var(--text-muted);
+  font-size: 13px;
+}
+
+.add-sessions-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 16px;
+  cursor: pointer;
+}
+
+.add-sessions-item:hover {
+  background: var(--bg-surface);
+}
+
+.add-sessions-item--hidden {
+  opacity: 0.5;
+}
+
+.add-sessions-item__checkbox {
+  flex-shrink: 0;
+  accent-color: var(--accent);
+}
+
+.add-sessions-item__name {
+  font-size: 13px;
+  color: var(--text);
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.add-sessions-item__device {
+  font-size: 11px;
+  color: var(--text-dim);
+  white-space: nowrap;
+}
+
+.add-sessions-item__badge {
+  font-size: 10px;
+  color: var(--text-dim);
+  background: var(--bg);
+  border: 1px solid var(--border-subtle);
+  border-radius: 3px;
+  padding: 1px 5px;
+}
+
+.add-sessions-item__disclosure {
+  width: 100%;
+  padding: 2px 16px 6px 42px;
+  font-size: 11px;
+  color: var(--text-dim);
+  font-style: italic;
+  display: none;
+}
+
+/* Mobile: full-screen sheet for Add Sessions */
+@media (max-width: 599px) {
+  .add-sessions-panel__content {
+    width: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    height: 100%;
+    border-radius: 0;
+  }
+}
+
 /* ============================================================
    Responsive overlay sidebar at <960px
    ============================================================ */
diff --git a/muxplex/tests/test_frontend_css.py b/muxplex/tests/test_frontend_css.py
index ba6fe77..099054d 100644
--- a/muxplex/tests/test_frontend_css.py
+++ b/muxplex/tests/test_frontend_css.py
@@ -2207,3 +2207,20 @@ def test_flyout_bottom_sheet_styled() -> None:
     assert ".flyout-sheet" in css, (
         "style.css must style .flyout-sheet (mobile bottom action sheet)"
     )
+
+
+# ============================================================
+# Add Sessions panel CSS (task-8)
+# ============================================================
+
+
+def test_add_sessions_panel_styled() -> None:
+    """style.css must contain .add-sessions-panel styles."""
+    css = read_css()
+    assert ".add-sessions-panel" in css, "style.css must style .add-sessions-panel"
+
+
+def test_add_sessions_item_styled() -> None:
+    """style.css must contain .add-sessions-item styles."""
+    css = read_css()
+    assert ".add-sessions-item" in css, "style.css must style .add-sessions-item"
diff --git a/muxplex/tests/test_frontend_html.py b/muxplex/tests/test_frontend_html.py
index 63ba56c..b3cb0c7 100644
--- a/muxplex/tests/test_frontend_html.py
+++ b/muxplex/tests/test_frontend_html.py
@@ -629,7 +629,6 @@ def test_html_sessions_panel_has_sort_order_select() -> None:
         assert v in values, f"#setting-sort-order missing option value='{v}'"
 
 
-
 def test_html_sessions_panel_has_window_size_largest_checkbox() -> None:
     """Sessions panel must contain a #setting-window-size-largest checkbox."""
     soup = _SOUP
@@ -1534,3 +1533,27 @@ def test_no_hidden_sessions_checkbox_list_in_settings() -> None:
         "#setting-hidden-sessions must be removed from the settings panel "
         "(replaced by the Hidden view + tile flyout in Phase 3)"
     )
+
+
+# ============================================================
+# Add Sessions panel (task-8)
+# ============================================================
+
+
+def test_add_sessions_panel_exists() -> None:
+    """index.html must contain an add-sessions-panel element."""
+    soup = _SOUP
+    assert soup.find(id="add-sessions-panel"), (
+        "index.html must contain an element with id='add-sessions-panel'"
+    )
+
+
+def test_add_sessions_panel_has_role_dialog() -> None:
+    """add-sessions-panel must have role='dialog' and aria-modal='true'."""
+    soup = _SOUP
+    panel = soup.find(id="add-sessions-panel")
+    assert panel, "Missing #add-sessions-panel"
+    assert panel.get("role") == "dialog", "add-sessions-panel must have role='dialog'"
+    assert panel.get("aria-modal") == "true", (
+        "add-sessions-panel must have aria-modal='true'"
+    )