From b20759c6cb327b0e6aa1765d5f40c5aa2fb1b920 Mon Sep 17 00:00:00 2001
From: Brian Krabach <brkrabac@microsoft.com>
Date: Sun, 29 Mar 2026 23:04:11 -0700
Subject: [PATCH] feat: add settings dialog HTML structure and CSS

---
 muxplex/frontend/index.html                   |  56 +++++-
 muxplex/frontend/style.css                    | 186 ++++++++++++++++++
 ..._frontend_css.cpython-312-pytest-9.0.2.pyc | Bin 128883 -> 159518 bytes
 ...frontend_html.cpython-312-pytest-9.0.2.pyc | Bin 45832 -> 79977 bytes
 muxplex/tests/test_frontend_css.py            | 140 +++++++++++++
 muxplex/tests/test_frontend_html.py           | 182 +++++++++++++++++
 6 files changed, 563 insertions(+), 1 deletion(-)

diff --git a/muxplex/frontend/index.html b/muxplex/frontend/index.html
index 5051046..8966c4b 100644
--- a/muxplex/frontend/index.html
+++ b/muxplex/frontend/index.html
@@ -20,7 +20,11 @@
   <div id="view-overview" class="view view--active">
     <header class="app-header">
       <h1 class="app-wordmark"><img src="/wordmark-on-dark.svg" alt="muxplex" height="24" /></h1>
-      <span id="connection-status"></span>
+      <div class="header-actions">
+        <button id="new-session-btn" class="header-btn" aria-label="New session">+</button>
+        <button id="settings-btn" class="header-btn" aria-label="Settings">&#9881;</button>
+        <span id="connection-status"></span>
+      </div>
     </header>
     <div id="session-grid" class="session-grid" role="list"></div>
     <div id="empty-state" class="empty-state hidden">No active tmux sessions</div>
@@ -32,6 +36,7 @@
       <button id="back-btn" class="back-btn" aria-label="Back">&#8592;</button>
       <button id="sidebar-toggle-btn" class="sidebar-toggle-btn" aria-label="Toggle session list">&#9776;</button>
       <span id="expanded-session-name" class="expanded-session-name"></span>
+      <button id="settings-btn-expanded" class="header-btn" aria-label="Settings">&#9881;</button>
     </header>
     <div class="view-body">
       <div id="session-sidebar" class="session-sidebar">
@@ -64,6 +69,55 @@
   <!-- ── Toast notification ─────────────────────────────────────────────────── -->
   <div id="toast" class="toast hidden" role="status" aria-live="polite" aria-atomic="true"></div>
 
+  <!-- ── Settings ─────────────────────────────────────────────────────────────────────── -->
+  <div id="settings-backdrop" class="settings-backdrop hidden"></div>
+  <dialog id="settings-dialog" class="settings-dialog">
+    <div class="settings-layout">
+      <nav class="settings-tabs">
+        <button class="settings-tab settings-tab--active" data-tab="display">Display</button>
+        <button class="settings-tab" data-tab="sessions">Sessions</button>
+        <button class="settings-tab" data-tab="notifications">Notifications</button>
+        <button class="settings-tab" data-tab="new-session">New Session</button>
+      </nav>
+      <div class="settings-content">
+        <div class="settings-panel" data-panel="display">
+          <div class="settings-field">
+            <label class="settings-label" for="setting-font-size">Font Size</label>
+            <select id="setting-font-size" class="settings-select">
+              <option value="11">11</option>
+              <option value="12">12</option>
+              <option value="13">13</option>
+              <option value="14" selected>14</option>
+              <option value="16">16</option>
+            </select>
+          </div>
+          <div class="settings-field">
+            <label class="settings-label" for="setting-hover-delay">Hover Delay</label>
+            <select id="setting-hover-delay" class="settings-select">
+              <option value="0">Off</option>
+              <option value="1000">1000ms</option>
+              <option value="1500" selected>1500ms</option>
+              <option value="2000">2000ms</option>
+              <option value="3000">3000ms</option>
+            </select>
+          </div>
+          <div class="settings-field">
+            <label class="settings-label" for="setting-grid-columns">Grid Columns</label>
+            <select id="setting-grid-columns" class="settings-select">
+              <option value="auto" selected>Auto</option>
+              <option value="2">2</option>
+              <option value="3">3</option>
+              <option value="4">4</option>
+            </select>
+          </div>
+        </div>
+        <div class="settings-panel hidden" data-panel="sessions"></div>
+        <div class="settings-panel hidden" data-panel="notifications"></div>
+        <div class="settings-panel hidden" data-panel="new-session"></div>
+      </div>
+    </div>
+  </dialog>
+
   <!-- ── Scripts ─────────────────────────────────────────────────────────────── -->
   <script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.js"></script>
diff --git a/muxplex/frontend/style.css b/muxplex/frontend/style.css
index c50ad97..1cfd517 100644
--- a/muxplex/frontend/style.css
+++ b/muxplex/frontend/style.css
@@ -873,6 +873,192 @@ body {
 
 
 
+/* ============================================================
+   Header actions + settings buttons
+   ============================================================ */
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.header-btn {
+  width: 32px;
+  height: 32px;
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  color: var(--text);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  padding: 0;
+  flex-shrink: 0;
+}
+
+.header-btn:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+/* ============================================================
+   Settings dialog
+   ============================================================ */
+
+.settings-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(2px);
+  z-index: 299;
+}
+
+.settings-dialog {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 600px;
+  height: 480px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  z-index: 300;
+  padding: 0;
+  overflow: hidden;
+  margin: 0;
+}
+
+.settings-dialog::backdrop {
+  background: transparent;
+}
+
+.settings-layout {
+  display: flex;
+  height: 100%;
+}
+
+.settings-tabs {
+  width: 140px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--border);
+  padding: 8px 0;
+  background: var(--bg-secondary);
+}
+
+.settings-tab {
+  background: none;
+  border: none;
+  border-left: 3px solid transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  text-align: left;
+  padding: 10px 16px;
+  font-size: 13px;
+}
+
+.settings-tab:hover {
+  color: var(--text);
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.settings-tab--active {
+  color: var(--accent);
+  border-left-color: var(--accent);
+}
+
+.settings-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+}
+
+.settings-panel-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text);
+  margin: 0 0 16px;
+}
+
+.settings-field {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.settings-label {
+  font-size: 13px;
+  color: var(--text);
+}
+
+.settings-select {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  color: var(--text);
+  font-size: 13px;
+  padding: 4px 8px;
+  cursor: pointer;
+}
+
+.settings-select:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+/* ============================================================
+   Settings dialog — mobile (bottom sheet at ≤599px)
+   ============================================================ */
+
+@media (max-width: 599px) {
+  .settings-dialog {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    top: auto;
+    transform: none;
+    width: 100%;
+    height: 85vh;
+    border-radius: 12px 12px 0 0;
+    margin: 0;
+  }
+
+  .settings-layout {
+    flex-direction: column;
+  }
+
+  .settings-tabs {
+    width: auto;
+    flex-direction: row;
+    overflow-x: auto;
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+    padding: 0;
+    height: auto;
+  }
+
+  .settings-tab {
+    border-left: none;
+    border-bottom: 3px solid transparent;
+    white-space: nowrap;
+    padding: 10px 16px;
+  }
+
+  .settings-tab--active {
+    border-bottom-color: var(--accent);
+    border-left-color: transparent;
+  }
+}
+
 /* ============================================================
    Responsive overlay sidebar at <960px
    ============================================================ */
diff --git a/muxplex/tests/__pycache__/test_frontend_css.cpython-312-pytest-9.0.2.pyc b/muxplex/tests/__pycache__/test_frontend_css.cpython-312-pytest-9.0.2.pyc
index babd9b790dd9cfa3cf711f477a0ec873f4782682..93ad6818fbac923d397657bf466de5284354ee9b 100644
GIT binary patch
delta 15170
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

delta 2113
zcma);3rti;6o&V|?A`^I_gi#%i6XwxQrkp>MX91j5NoSeX;6x$v<CIk1f@aRY9bN(
zFiSj5K}CtCY6a=0OfA-eR%#Iy3MwkTLQ|*~gHX_-#?DzJqBSiyyWgIfIWu$4KXYex
z$5n@}+eVjD&d!cH`TS_8N$pv&)x{6fw}x$Vk4v%Nge9&iaVZY+*DWQk>`Wo_>y_|$
z>q+I#L1bFKKePx1R*$l4M#t^4f3N(eXHk6%JSn;q_Ew+6vz<|FT~=MEVy|`L={+te
zvRt@48oMn@b0PLwcQ)r4anL&Uw+;n|tmf7pXOvpJx?eVZC5O^>Gj>@PcBjK?t?4c@
zsHL`Q%bNSij^9c%4st?`#+72I_3r(V27FBcKs1C%0@fO3vEClZI4oXtz;`BOQo9!t
zP$8yzW0ouS(B@EN;HY>MiZlm&Luupj3aUiOco;pADaxlIP*K8NEp>B;P)7_1mqgC1
z=rQ33%1*!>G>e)9I2rW^WGHmUOYyQ)PB+oti|~bdl>@y-v>0#Tx@cbv4?EOtOT=rq
zK?@QQi#Ab^h+B%`mUOJO1h;yM9Z66W+@xL0aSk0KBN<CwWwBu`X5uIE*I-2(eZC(d
z)S<x#oir^Uz8sf<hNmM6_r&sa^g4Lo<f%6?To`VQPD}moUZ%g;oWba(&$1Ar_ON}I
zg3{qlwONQjuXvD!^ZLFqc5>^$G3FO~Qt!v`eyZQl95_)^7ThUzBfOM{I`P&<Wa!ap
znP2Ede{6>Dv+fh26LC4%X{S8W(d}Gh%e>O^5T$nVgbJ1AVIk~<{U>-yRUYUl+5!uz
zsnLSjP$?iE>)<3PADKqgAUA-fl5Zh$q(@O9B2`DOGSS6COoglP+m15^+0?ol6I3HN
zIgq&+$KfGv6l1(9o80!J1Kt7$u-*=(^g#)hI#qKdJ`(Yo7tL$J5V~K2QScR^rP!iI
z4rrdvo-vFriA<L@tJ728PhFihd1dOl6)D;;+`^L6-ctxPE#YDvJBHKpD)`fga=5AW
zT>C3cDVG{Fu-!--$`KuLj_oAIGRAqv1;*QqCdNgHbPtK3pdf;e;!TP`F#JWR!0URs
z<JVVUflTsr1@<9OWE{bl`jNv}2adVdIDCTb(ca;~Y-{~=#A;u}lvsti{c)C5A)-Id
zt$FZ_chlUtyP1a#VA%FpBG-j5Y<UE;^(2{4E<QISs!UP>DES!1AVhq64Au4nm*WI2
zJB3)6pSk-<2FLrXxKrq(8Y%9a7z7)&$La>xBFfaKuIwS->Vo$IMr*bp2ct8U)yktI
zR4AumulfaZmj9<&Yy+nDYnI#aM6=2Ug!irOpf%A^b_<45WFtmklz6id`F1!#AC|z6
z)Fwm?6v(z;V=zWonlMXm9?g+HQR_dJ*n9<3-223m0>x`1xn~${XptvQ?iGYNj*}I|
zirjB2ZAZK~dj&oQbES0F2Bk+>3uZolg4u`=CtHwfryl3g9%r_;6*K;o*$}$iiWe|Z
zxU?ZbZ?^dlD!rmV5%c`nhml)5COJmR^o|TjFS#A9`u;OxUMD8Y*Jw*8mMHG9RF3tf
zhn*OXNfg|Ln}%@2htH=Y?<$Y73pfM54Ygv%UdBGgLB=75mBIIyCK!hq6^x^dD#j&7
zGvhj=jloxi*1@>P;M-Pv$k6dh*)g0jN79u|4~93xm*LL{WP~t68KW3u7`(Jv1VbLq
kI*p~!CehhdirEw`ZTZoqS3}%gr5uB)%R`S;X#AJqALXH5X8-^I

diff --git a/muxplex/tests/__pycache__/test_frontend_html.cpython-312-pytest-9.0.2.pyc b/muxplex/tests/__pycache__/test_frontend_html.cpython-312-pytest-9.0.2.pyc
index a9bb407e59afa9e285db51fcb043112163a2a9ab..0f771385218259be6797fd44df311c1e9d78f5d9 100644
GIT binary patch
delta 17515
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

delta 1988
zcmb7^drZ?;6vsUUeqbx56~W4@tx%z$6GV!L3W^S<rXm7Sr^8B%>*P^x8Avl<Ae)AV
z;K4DSW{Ok5>A?J)`-5Z;H*rj(!}-su+aDxq<`%b17Zdl#c23#&gFTXw^z%KOd+xdS
z+~2+D`=9;y-&d%w1qUl9(ch(jFP;7KI@CJFS8yT01iSTi<v#z7p?1ApMLLai3TYT=
zFljicnshp82&s-#Lpp<0OBz8sl{Atxlr)NT8fi3X7-<Y?IH{g=I;p`v*)h3HVb_su
zB;Sl=GG>wyK^jXMNg78QMQS3ACY?nZLmFSNFdO7TMPUSZurKNd$iu_Y%VD+bjduAZ
z=1_HF1><=}E<?@8W4u7H3LTp(vBsDNYvr@Xq5n1Os3{4G<ss7!f5?%u5-kAhu{LQt
z*yYir%An~^&ix9(tsoc-BAy);xH!#>?eq0ei39U%|061wBAU{cfD4tqsmefisc^b#
z+@c)8vI0DEu4U9eh}Y;-i0zn?844A+B6B58YR@!jt9UIJqncn9ui{W<0@UMAnTgOO
zM=aXpr+SS?r!aQn-mK!Wo$RLnC+zo87AMWfo)!MLq&#^q<us_=HTC6=l2W%@9KaLV
zPvLbO`Fw_aVQG{Ga`4952F*r}-Ne{T@Z_MjAQasNDRWBLw}s%9UUt~*4&e!L>~PsC
z?GF2#F-ISGrP6Yn+g;+pk%9qfInS`-8|!ujt|8Nt5{pJ-7#a(W@FwOI_D6XXvke}N
zatTdwh#G?_!BuZDyTw!rHlw;|8yv)xMjf^lDHqx}mx-~JQOf8bcomLvahMHoicI!)
zG2UVvVbtTTq5?P}n~LkzrlsuR`(_m_Y_<`+!L?3DUCCdyh<5zUZh=Gi%)UsqjDtEE
zn{lbbB8{B^?sV*fZr+;y43EV!;usTmi5X=J;H)glep4>_r?o{l&uV9!Vx%!FjCUEQ
z8HX5W@V)9t$j7VIFG{}el8WU*huI=ZHU3>hCvFoKsh8vXXyr)!NX&)v@+0wnu)c@A
z6DtpNJME6GHbFHH?pXkb<R^Rb0A9ky4UeIp>(dPIv<nR1*{;G3jWH_U7x;jkAENPc
zG``blf<gI8<8YwlJFsQg*&HwBb3i_R+MFt_V{;uoYc{FYv&rzx#NV64Fsnr)S=ndB
zq85|H_e8A0JuPuih^Jf9p$NZi$&h@z@4=|nc~Ub+G-F|FoOF@Ri@2*bR=ULICG2UP
z6F#9xah!+R@nLH+m@%^LIpWH;`P7JZw}p2#Oo4@Xvn@jXF-3VL;jp=@D#dZGJ@gZH
zsj^-5C1q8j!d8<?cZpB6|FH`54r<_vyy2it0Ztt3(8I8Nr=w1xzRHXFUb0y!uHu%?
zY<kNlJI!!izSgOgRO7dfcJ$zAE^NfPZ`Z&uYKts*u6we^8&F<V=Md(gu?~2HHzM8S
zq_<FeEE#Ug%Z^nCgp8;0DqMAx>hj60lJDV;U}E>G@qAkNh7-UYdir7bV|NnVm35~^
z{9qe3lDq_OP+gU<SJ=dMtN52DNGp5hV)no^tnA64?$X<n89$-Bn1jVIZ?Kk;&RD?U
zZkQ4F9h*BCGa0^@!p$uVD|%yKRBq{Q@RNLp_60ucPxkK%5ce?eTs}OIkDPm=fP2{1
zZ&Qs0aDuNXDh2N2>;Vfr#L|JwO0z-)(TLTY&^43>`~OVVRcL{@EvtFTT1GL$&hRjr
z7zY?97-t#h8H0=~3|~#x*}BcR%NS)mU_4|vyF$`Ir+P{@(9iwrq^^1C@Qd<^CIBR1
GCf6U^<}hji

diff --git a/muxplex/tests/test_frontend_css.py b/muxplex/tests/test_frontend_css.py
index 762ac97..0209e91 100644
--- a/muxplex/tests/test_frontend_css.py
+++ b/muxplex/tests/test_frontend_css.py
@@ -711,3 +711,143 @@ def test_no_gradient_fade_on_previews():
     css = read_css()
     assert ".tile-body::before" not in css, "tile-body::before gradient must be removed"
     assert ".sidebar-item-body::before" not in css, "sidebar-item-body::before gradient must be removed"
+
+
+# ============================================================
+# Settings modal CSS (task-6)
+# ============================================================
+
+
+def test_css_header_actions_exists():
+    """.header-actions must exist with flex layout and gap."""
+    css = read_css()
+    assert ".header-actions" in css, "Missing .header-actions CSS rule"
+    block = _extract_rule_block(css, ".header-actions {")
+    assert "display: flex" in block, ".header-actions must use display: flex"
+    assert "gap:" in block and "8px" in block, ".header-actions must have gap: 8px"
+
+
+def test_css_header_btn_exists():
+    """.header-btn must exist with 32x32 size, border, cursor."""
+    css = read_css()
+    assert ".header-btn" in css, "Missing .header-btn CSS rule"
+    block = _extract_rule_block(css, ".header-btn {")
+    assert "width: 32px" in block, ".header-btn must be 32px wide"
+    assert "height: 32px" in block, ".header-btn must be 32px tall"
+    assert "border:" in block or "border :" in block, ".header-btn must have border"
+    assert "cursor: pointer" in block, ".header-btn must have cursor: pointer"
+
+
+def test_css_header_btn_hover():
+    """.header-btn:hover must exist."""
+    css = read_css()
+    assert ".header-btn:hover" in css, "Missing .header-btn:hover CSS rule"
+
+
+def test_css_settings_backdrop_exists():
+    """.settings-backdrop must exist with position: fixed and blur."""
+    css = read_css()
+    assert ".settings-backdrop" in css, "Missing .settings-backdrop CSS rule"
+    block = _extract_rule_block(css, ".settings-backdrop {")
+    assert "position: fixed" in block, ".settings-backdrop must use position: fixed"
+    assert "blur" in block or "backdrop-filter" in block, ".settings-backdrop must use blur"
+
+
+def test_css_settings_dialog_exists():
+    """.settings-dialog must exist with correct dimensions and z-index."""
+    css = read_css()
+    assert ".settings-dialog" in css, "Missing .settings-dialog CSS rule"
+    block = _extract_rule_block(css, ".settings-dialog {")
+    assert "600px" in block, ".settings-dialog must be 600px wide"
+    assert "480px" in block, ".settings-dialog must be 480px tall"
+    assert "z-index: 300" in block, ".settings-dialog must have z-index: 300"
+    assert "border-radius:" in block, ".settings-dialog must have border-radius"
+
+
+def test_css_settings_dialog_backdrop_transparent():
+    """.settings-dialog::backdrop must be transparent."""
+    css = read_css()
+    assert ".settings-dialog::backdrop" in css, "Missing .settings-dialog::backdrop CSS rule"
+    block = _extract_rule_block(css, ".settings-dialog::backdrop {")
+    assert "transparent" in block, ".settings-dialog::backdrop must be transparent"
+
+
+def test_css_settings_layout_flex():
+    """.settings-layout must use flex layout."""
+    css = read_css()
+    assert ".settings-layout" in css, "Missing .settings-layout CSS rule"
+    block = _extract_rule_block(css, ".settings-layout {")
+    assert "display: flex" in block, ".settings-layout must use display: flex"
+
+
+def test_css_settings_tabs_exists():
+    """.settings-tabs must exist with 140px width sidebar."""
+    css = read_css()
+    assert ".settings-tabs" in css, "Missing .settings-tabs CSS rule"
+    block = _extract_rule_block(css, ".settings-tabs {")
+    assert "140px" in block, ".settings-tabs must have 140px width"
+
+
+def test_css_settings_tab_exists():
+    """.settings-tab must exist as text buttons with left border indicator."""
+    css = read_css()
+    assert ".settings-tab" in css, "Missing .settings-tab CSS rule"
+    block = _extract_rule_block(css, ".settings-tab {")
+    assert "border-left:" in block, ".settings-tab must have border-left indicator"
+    assert "cursor: pointer" in block, ".settings-tab must have cursor: pointer"
+
+
+def test_css_settings_tab_active():
+    """.settings-tab--active must exist with accent color."""
+    css = read_css()
+    assert ".settings-tab--active" in css, "Missing .settings-tab--active CSS rule"
+    block = _extract_rule_block(css, ".settings-tab--active {")
+    assert "var(--accent)" in block, ".settings-tab--active must use var(--accent)"
+
+
+def test_css_settings_content_exists():
+    """.settings-content must exist as scrollable container."""
+    css = read_css()
+    assert ".settings-content" in css, "Missing .settings-content CSS rule"
+    block = _extract_rule_block(css, ".settings-content {")
+    assert "overflow-y: auto" in block, ".settings-content must be scrollable (overflow-y: auto)"
+
+
+def test_css_settings_field_exists():
+    """.settings-field must exist as flex row between."""
+    css = read_css()
+    assert ".settings-field" in css, "Missing .settings-field CSS rule"
+    block = _extract_rule_block(css, ".settings-field {")
+    assert "display: flex" in block, ".settings-field must use display: flex"
+    assert "flex-direction: row" in block, ".settings-field must use flex-direction: row"
+    assert "justify-content: space-between" in block, ".settings-field must use justify-content: space-between"
+
+
+def test_css_settings_select_exists():
+    """.settings-select must exist as styled select."""
+    css = read_css()
+    assert ".settings-select" in css, "Missing .settings-select CSS rule"
+    assert ".settings-select:focus" in css, "Missing .settings-select:focus CSS rule"
+
+
+def test_css_settings_mobile_media_query():
+    """@media (max-width: 599px) block must exist for settings dialog mobile styles."""
+    css = read_css()
+    assert "@media (max-width: 599px)" in css, "Missing @media (max-width: 599px) for settings mobile"
+    media_block = _extract_media_block(css, "@media (max-width: 599px)")
+    assert ".settings-dialog" in media_block, ".settings-dialog mobile styles must be in 599px media block"
+    # Bottom sheet: 100% width
+    block = _extract_rule_block(media_block, ".settings-dialog {")
+    assert "width: 100%" in block, ".settings-dialog must be 100% wide on mobile"
+    assert "85vh" in block, ".settings-dialog must be 85vh tall on mobile"
+    assert "bottom: 0" in block or "bottom:0" in block, ".settings-dialog must be bottom-anchored on mobile"
+
+
+def test_css_settings_mobile_tabs_horizontal():
+    """Inside mobile media query, settings tabs must become horizontal scrolling row."""
+    css = read_css()
+    media_block = _extract_media_block(css, "@media (max-width: 599px)")
+    assert ".settings-tabs" in media_block, ".settings-tabs must have mobile styles in 599px media block"
+    tabs_block = _extract_rule_block(media_block, ".settings-tabs {")
+    assert "flex-direction: row" in tabs_block, ".settings-tabs must become horizontal on mobile"
+    assert "overflow-x: auto" in tabs_block, ".settings-tabs must scroll horizontally on mobile"
diff --git a/muxplex/tests/test_frontend_html.py b/muxplex/tests/test_frontend_html.py
index 9706f21..0f7e2b6 100644
--- a/muxplex/tests/test_frontend_html.py
+++ b/muxplex/tests/test_frontend_html.py
@@ -316,3 +316,185 @@ def test_login_html_has_error_display() -> None:
     assert "error" in text, (
         "login.html must include an error display element (text 'error' not found)"
     )
+
+
+# ============================================================
+# Settings modal (task-6)
+# ============================================================
+
+
+def test_html_header_actions_div() -> None:
+    """overview header must have .header-actions div containing #new-session-btn, #settings-btn, and #connection-status."""
+    soup = _SOUP
+    view_overview = soup.find(id="view-overview")
+    assert view_overview is not None, "Missing #view-overview"
+    header = view_overview.find("header", class_="app-header")
+    assert header is not None, "Missing header.app-header inside #view-overview"
+    header_actions = header.find(class_="header-actions")
+    assert header_actions is not None, "Missing .header-actions inside app-header"
+
+
+def test_html_new_session_btn() -> None:
+    """#new-session-btn must exist in .header-actions with class header-btn."""
+    soup = _SOUP
+    btn = soup.find(id="new-session-btn")
+    assert btn is not None, "Missing #new-session-btn"
+    classes = btn.get("class") or []
+    assert "header-btn" in classes, f"#new-session-btn must have class 'header-btn', has: {classes}"
+    # Must be inside header-actions
+    header_actions = soup.find(class_="header-actions")
+    assert header_actions is not None, "Missing .header-actions"
+    assert header_actions.find(id="new-session-btn") is not None, (
+        "#new-session-btn must be inside .header-actions"
+    )
+
+
+def test_html_settings_btn() -> None:
+    """#settings-btn must exist in .header-actions with class header-btn."""
+    soup = _SOUP
+    btn = soup.find(id="settings-btn")
+    assert btn is not None, "Missing #settings-btn"
+    classes = btn.get("class") or []
+    assert "header-btn" in classes, f"#settings-btn must have class 'header-btn', has: {classes}"
+    # Must be inside header-actions
+    header_actions = soup.find(class_="header-actions")
+    assert header_actions is not None, "Missing .header-actions"
+    assert header_actions.find(id="settings-btn") is not None, (
+        "#settings-btn must be inside .header-actions"
+    )
+
+
+def test_html_settings_btn_expanded() -> None:
+    """#settings-btn-expanded must exist in expanded-header after #expanded-session-name."""
+    soup = _SOUP
+    btn = soup.find(id="settings-btn-expanded")
+    assert btn is not None, "Missing #settings-btn-expanded"
+    classes = btn.get("class") or []
+    assert "header-btn" in classes, f"#settings-btn-expanded must have class 'header-btn', has: {classes}"
+    # Must be inside expanded-header
+    header = soup.find("header", class_="expanded-header")
+    assert header is not None, "Missing header.expanded-header"
+    assert header.find(id="settings-btn-expanded") is not None, (
+        "#settings-btn-expanded must be inside header.expanded-header"
+    )
+    # Must appear after #expanded-session-name
+    header_children_ids = [
+        el.get("id") for el in header.children if isinstance(el, Tag)
+    ]
+    header_children_ids = [i for i in header_children_ids if i]
+    assert "expanded-session-name" in header_children_ids, "#expanded-session-name must be in expanded-header"
+    assert "settings-btn-expanded" in header_children_ids, "#settings-btn-expanded must be in expanded-header"
+    name_idx = header_children_ids.index("expanded-session-name")
+    settings_idx = header_children_ids.index("settings-btn-expanded")
+    assert name_idx < settings_idx, (
+        f"#settings-btn-expanded must come after #expanded-session-name, got indices {name_idx}, {settings_idx}"
+    )
+
+
+def test_html_settings_backdrop() -> None:
+    """#settings-backdrop must exist with class settings-backdrop and hidden."""
+    soup = _SOUP
+    el = soup.find(id="settings-backdrop")
+    assert el is not None, "Missing #settings-backdrop"
+    classes = el.get("class") or []
+    assert "settings-backdrop" in classes, f"#settings-backdrop must have class 'settings-backdrop', has: {classes}"
+    assert "hidden" in classes, f"#settings-backdrop must have class 'hidden', has: {classes}"
+
+
+def test_html_settings_dialog() -> None:
+    """#settings-dialog must be a <dialog> with class settings-dialog."""
+    soup = _SOUP
+    el = soup.find(id="settings-dialog")
+    assert el is not None, "Missing #settings-dialog"
+    assert el.name == "dialog", f"#settings-dialog must be a <dialog> element, got: {el.name}"
+    classes = el.get("class") or []
+    assert "settings-dialog" in classes, f"#settings-dialog must have class 'settings-dialog', has: {classes}"
+
+
+def test_html_settings_tabs() -> None:
+    """settings-dialog must contain 4 tab buttons with correct data-tab values."""
+    soup = _SOUP
+    dialog = soup.find(id="settings-dialog")
+    assert dialog is not None, "Missing #settings-dialog"
+    tabs_container = dialog.find("nav", class_="settings-tabs")
+    assert tabs_container is not None, "Missing nav.settings-tabs inside #settings-dialog"
+    expected_tabs = ["display", "sessions", "notifications", "new-session"]
+    for tab_value in expected_tabs:
+        tab = tabs_container.find("button", attrs={"data-tab": tab_value})
+        assert tab is not None, f"Missing tab button with data-tab='{tab_value}' in settings-tabs"
+    # Display tab must be active by default
+    display_tab = tabs_container.find("button", attrs={"data-tab": "display"})
+    assert display_tab is not None
+    display_classes = display_tab.get("class") or []
+    assert "settings-tab--active" in display_classes, (
+        f"Display tab must have class 'settings-tab--active', has: {display_classes}"
+    )
+    # All tabs must have settings-tab class
+    for tab_value in expected_tabs:
+        tab = tabs_container.find("button", attrs={"data-tab": tab_value})
+        tab_classes = tab.get("class") or []
+        assert "settings-tab" in tab_classes, (
+            f"Tab data-tab='{tab_value}' must have class 'settings-tab', has: {tab_classes}"
+        )
+
+
+def test_html_settings_display_panel_controls() -> None:
+    """Display panel must have font-size, hover-delay, and grid-columns selects."""
+    soup = _SOUP
+    dialog = soup.find(id="settings-dialog")
+    assert dialog is not None, "Missing #settings-dialog"
+    for ctrl_id in ("setting-font-size", "setting-hover-delay", "setting-grid-columns"):
+        el = dialog.find(id=ctrl_id)
+        assert el is not None, f"Missing #{ctrl_id} inside #settings-dialog"
+        assert el.name == "select", f"#{ctrl_id} must be a <select> element, got: {el.name}"
+
+
+def test_html_settings_font_size_options() -> None:
+    """setting-font-size select must have options 11, 12, 13, 14 (selected), 16."""
+    soup = _SOUP
+    select = soup.find(id="setting-font-size")
+    assert select is not None, "Missing #setting-font-size"
+    options = select.find_all("option")
+    values = [o.get("value") for o in options]
+    for v in ("11", "12", "13", "14", "16"):
+        assert v in values, f"#setting-font-size missing option value='{v}'"
+    # 14 must be selected
+    selected_opt = select.find("option", attrs={"selected": True})
+    assert selected_opt is not None, "setting-font-size must have a selected option"
+    assert selected_opt.get("value") == "14", (
+        f"setting-font-size default selection must be 14, got: {selected_opt.get('value')}"
+    )
+
+
+def test_html_settings_hover_delay_options() -> None:
+    """setting-hover-delay select must have Off (0), 1000, 1500 (selected), 2000, 3000."""
+    soup = _SOUP
+    select = soup.find(id="setting-hover-delay")
+    assert select is not None, "Missing #setting-hover-delay"
+    options = select.find_all("option")
+    values = [o.get("value") for o in options]
+    for v in ("0", "1000", "1500", "2000", "3000"):
+        assert v in values, f"#setting-hover-delay missing option value='{v}'"
+    # 1500 must be selected
+    selected_opt = select.find("option", attrs={"selected": True})
+    assert selected_opt is not None, "setting-hover-delay must have a selected option"
+    assert selected_opt.get("value") == "1500", (
+        f"setting-hover-delay default selection must be 1500, got: {selected_opt.get('value')}"
+    )
+
+
+def test_html_settings_grid_columns_options() -> None:
+    """setting-grid-columns select must have auto (selected), 2, 3, 4."""
+    soup = _SOUP
+    select = soup.find(id="setting-grid-columns")
+    assert select is not None, "Missing #setting-grid-columns"
+    options = select.find_all("option")
+    values = [o.get("value") for o in options]
+    for v in ("auto", "2", "3", "4"):
+        assert v in values, f"#setting-grid-columns missing option value='{v}'"
+    # auto must be selected
+    selected_opt = select.find("option", attrs={"selected": True})
+    assert selected_opt is not None, "setting-grid-columns must have a selected option"
+    assert selected_opt.get("value") == "auto", (
+        f"setting-grid-columns default selection must be auto, got: {selected_opt.get('value')}"
+    )