From c28cb0a7f98ee84a8db2a8f89b460d60fda4a04f Mon Sep 17 00:00:00 2001
From: Brian Krabach <brkrabac@microsoft.com>
Date: Sat, 4 Apr 2026 07:59:43 -0700
Subject: [PATCH] feat: add device select to mobile FAB session input

- Update showFabSessionInput to call _createDeviceSelect() for optional
  device <select> element
- Append select (if present) then input to overlay
- Enter handler reads remoteId from select.value, passes to createNewSession
- Add test: showFabSessionInput creates device select when multi_device_enabled with remotes
---
 muxplex/frontend/app.js             |  5 ++++-
 muxplex/frontend/tests/test_app.mjs | 20 ++++++++++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/muxplex/frontend/app.js b/muxplex/frontend/app.js
index 052348c..35e0c93 100644
--- a/muxplex/frontend/app.js
+++ b/muxplex/frontend/app.js
@@ -1999,8 +1999,10 @@ function showFabSessionInput() {
   const overlay = document.createElement('div');
   overlay.className = 'fab-input-overlay';
 
+  const select = _createDeviceSelect();
   const input = _createSessionInput();
 
+  if (select) overlay.appendChild(select);
   overlay.appendChild(input);
 
   function cleanup() {
@@ -2011,8 +2013,9 @@ function showFabSessionInput() {
   input.addEventListener('keydown', function(e) {
     if (e.key === 'Enter') {
       const name = input.value.trim();
+      const remoteId = select ? select.value : '';
       cleanup();
-      if (name) createNewSession(name);
+      if (name) createNewSession(name, remoteId);
     } else if (e.key === 'Escape') {
       cleanup();
     }
diff --git a/muxplex/frontend/tests/test_app.mjs b/muxplex/frontend/tests/test_app.mjs
index c06f6ee..94b647f 100644
--- a/muxplex/frontend/tests/test_app.mjs
+++ b/muxplex/frontend/tests/test_app.mjs
@@ -4211,3 +4211,23 @@ test('showNewSessionInput passes remoteId from device select to createNewSession
     'showNewSessionInput must call createNewSession with name and remoteId arguments',
   );
 });
+
+test('showFabSessionInput creates device select when multi_device_enabled with remotes', () => {
+  const source = fs.readFileSync(new URL('../app.js', import.meta.url), 'utf8');
+  // Extract showFabSessionInput function body
+  const fnStart = source.indexOf('function showFabSessionInput(');
+  assert.ok(fnStart !== -1, 'showFabSessionInput function must exist');
+  const fnBody = source.substring(fnStart, fnStart + 1200);
+  // Must call _createDeviceSelect
+  assert.ok(fnBody.includes('_createDeviceSelect'), 'showFabSessionInput must call _createDeviceSelect');
+  // Must read remoteId from select.value (or equivalent)
+  assert.ok(
+    fnBody.includes('remoteId') && (fnBody.includes('select.value') || fnBody.includes('sel.value')),
+    'showFabSessionInput Enter handler must read remoteId from select element value',
+  );
+  // Must call createNewSession with two arguments (name and remoteId)
+  assert.ok(
+    fnBody.includes('createNewSession(name') && fnBody.includes('remoteId'),
+    'showFabSessionInput must call createNewSession with name and remoteId arguments',
+  );
+});