Add device suggestions from local interfaces

Author: tsosunchia

app.py

@@ -1,4 +1,5 @@
 import os
+import socket as socket_module
 import sys
 
 try:
@@ -45,7 +46,7 @@
 
 
 TRACE_OPTION_PATTERN = r"^\d+\.\s+(.+)$"
-DEVICE_PATTERN = r"^[A-Za-z]*\d*$"
+DEVICE_PATTERN = r"^[A-Za-z0-9][A-Za-z0-9_.:@-]{0,126}$"
 HOSTNAME_PATTERN = r"^(?=.{1,255}$)(?!-)[A-Za-z0-9-]{1,63}(?:\.(?!-)[A-Za-z0-9-]{1,63})*$"
 DATA_PROVIDER_ALLOWLIST = {
     "Ip2region",
@@ -596,6 +597,26 @@ def stop_nexttrace_for_sid(sid: str):
         task.request_stop()
 
 
+def list_available_devices() -> list[str]:
+    try:
+        discovered = socket_module.if_nameindex()
+    except OSError:
+        logging.warning("Failed to enumerate local interfaces", exc_info=True)
+        return []
+
+    devices = []
+    seen = set()
+    for _index, raw_name in discovered:
+        name = str(raw_name).strip()
+        if not name or not re.match(DEVICE_PATTERN, name):
+            continue
+        if name in seen:
+            continue
+        seen.add(name)
+        devices.append(name)
+    return devices
+
+
 @app.before_request
 def validate_request_host():
     if not is_trusted_host(request.host):
@@ -628,6 +649,12 @@ def healthz():
     )
 
 
+@app.route("/api/devices")
+def api_devices():
+    devices = list_available_devices()
+    return jsonify({"devices": devices, "count": len(devices)})
+
+
 @socketio.on("connect")
 def handle_connect():
     if not is_trusted_host(request.host):

assets/js/main.js

@@ -698,7 +698,7 @@ function formatConnectionStatus(status) {
 }
 
 function deviceValidateInput() {
-    var allowedPattern = '^[a-zA-Z]*\\d*$';
+    var allowedPattern = '^[A-Za-z0-9][A-Za-z0-9_.:@-]{0,126}$';
     var inputElement = $('devInput');
     var errorMessageElement = $('dev-error-message');
 

assets/js/settingsmenu.js

@@ -7,6 +7,7 @@ var intervalTimeRange = document.getElementById('intervalTimeRange');
 var intervalTimeInput = document.getElementById('intervalTimeInput');
 var packetSizeRange = document.getElementById('packetSizeRange');
 var packetSizeInput = document.getElementById('packetSizeInput');
+var deviceOptions = document.getElementById('deviceOptions');
 var settingsFirstFocusable = document.getElementById('language');
 var lastSettingsTrigger = null;
 
@@ -49,6 +50,8 @@ packetSizeInput.addEventListener('input', function () {
     packetSizeRange.value = packetSizeInput.value;
 });
 
+loadAvailableDevices();
+
 saveBtn.addEventListener('click', function (event) {
     event.preventDefault();
 
@@ -165,6 +168,44 @@ function loadStoredSettings() {
     }
 }
 
+function loadAvailableDevices() {
+    if (!deviceOptions || typeof fetch !== 'function') {
+        return Promise.resolve();
+    }
+
+    return fetch('/api/devices', {
+        headers: { accept: 'application/json' }
+    })
+        .then(function (response) {
+            if (!response.ok) {
+                throw new Error('device list request failed');
+            }
+            return response.json();
+        })
+        .then(function (payload) {
+            renderDeviceOptions(payload && payload.devices);
+        })
+        .catch(function () {
+            renderDeviceOptions([]);
+        });
+}
+
+function renderDeviceOptions(devices) {
+    deviceOptions.innerHTML = '';
+    if (!Array.isArray(devices)) {
+        return;
+    }
+
+    devices.forEach(function (deviceName) {
+        if (typeof deviceName !== 'string' || deviceName.trim() === '') {
+            return;
+        }
+        var option = document.createElement('option');
+        option.value = deviceName;
+        deviceOptions.appendChild(option);
+    });
+}
+
 function notifySettingsChanged() {
     document.dispatchEvent(new CustomEvent('ntwa:settings-changed'));
     if (typeof window.syncSettingsSummary === 'function') {

templates/index.html

@@ -240,7 +240,8 @@ <h2 id="settingsDrawerTitle">Trace Settings</h2>
 
         <label class="field" for="devInput">
             <span class="field-label">Device</span>
-            <input type="text" id="devInput" class="text-input" placeholder="Device">
+            <input type="text" id="devInput" class="text-input" list="deviceOptions" placeholder="Device">
+            <datalist id="deviceOptions"></datalist>
             <span id="dev-error-message" class="validation-message">Invalid device name.</span>
         </label>
 

tests/browser-controls.check.cjs

@@ -97,8 +97,12 @@ async function checkSettingsInputSync() {
 }
 
 async function checkSettingsPersistenceAndSummary() {
-  const harness = createBrowserHarness({ console: quietConsole });
+  const harness = createBrowserHarness({
+    console: quietConsole,
+    devices: ['en0', 'br-test0']
+  });
   const { localStorage, elements } = harness;
+  await harness.flushPromises();
 
   elements.ipVersion.value = 'ipv6';
   harness.dispatchChange(elements.ipVersion);
@@ -115,7 +119,10 @@ async function checkSettingsPersistenceAndSummary() {
   elements.maxHopInput.value = '12';
   elements.minHopInput.value = '2';
   elements.portInput.value = '443';
-  elements.devInput.value = 'en0';
+  assert.equal(elements.devInput.getAttribute('list'), 'deviceOptions');
+  assert.equal(elements.deviceOptions.children.length, 2);
+  assert.equal(elements.deviceOptions.children[1].value, 'br-test0');
+  elements.devInput.value = 'br-test0';
   elements.dataProvider.value = 'IP.SB';
 
   elements.saveBtn.click();
@@ -128,7 +135,7 @@ async function checkSettingsPersistenceAndSummary() {
   assert.equal(localStorage.getItem('maxHop'), '12');
   assert.equal(localStorage.getItem('minHop'), '2');
   assert.equal(localStorage.getItem('port'), '443');
-  assert.equal(localStorage.getItem('device'), 'en0');
+  assert.equal(localStorage.getItem('device'), 'br-test0');
   assert.equal(localStorage.getItem('dataProvider'), 'IP.SB');
   assert.equal(elements.settingMenu.classList.contains('is-open'), false);
   assert.match(elements.settingsSummaryInline.textContent, /EN/);

tests/browser-harness.cjs

@@ -352,6 +352,21 @@ function flushPromises() {
   return new Promise((resolve) => setImmediate(resolve));
 }
 
+function createDefaultFetch(devices) {
+  const deviceList = Array.isArray(devices) ? devices : ['en0', 'utun0'];
+  return function fetch(url) {
+    if (url === '/api/devices') {
+      return Promise.resolve({
+        ok: true,
+        json() {
+          return Promise.resolve({ devices: deviceList, count: deviceList.length });
+        }
+      });
+    }
+    return Promise.reject(new Error(`fetch not mocked for ${url}`));
+  };
+}
+
 function createBrowserHarness(options = {}) {
   const document = new FakeDocument(options.url || 'https://example.test/');
   const localStorage = new FakeStorage(options.storage || {});
@@ -431,7 +446,12 @@ function createBrowserHarness(options = {}) {
   appendElement(document, settingMenu, 'input', 'maxHopInput', { type: 'number', value: '30' });
   appendElement(document, settingMenu, 'input', 'minHopInput', { type: 'number', value: '1' });
   appendElement(document, settingMenu, 'input', 'portInput', { type: 'number', value: '80' });
-  appendElement(document, settingMenu, 'input', 'devInput', { type: 'text', value: '' });
+  appendElement(document, settingMenu, 'input', 'devInput', {
+    type: 'text',
+    value: '',
+    attributes: { list: 'deviceOptions' }
+  });
+  appendElement(document, settingMenu, 'datalist', 'deviceOptions');
   appendElement(document, settingMenu, 'span', 'dev-error-message');
   appendElement(document, settingMenu, 'input', 'dataProvider', { type: 'text', value: '' });
   appendElement(document, settingMenu, 'span', 'dp-error-message');
@@ -455,7 +475,7 @@ function createBrowserHarness(options = {}) {
     URLSearchParams,
     CustomEvent: FakeCustomEvent,
     Event: FakeEvent,
-    fetch: options.fetch || (() => Promise.reject(new Error('fetch not mocked'))),
+    fetch: options.fetch || createDefaultFetch(options.devices),
     io: {
       connect() {
         return socket;
@@ -511,6 +531,7 @@ function createBrowserHarness(options = {}) {
       minHopInput: document.getElementById('minHopInput'),
       portInput: document.getElementById('portInput'),
       devInput: document.getElementById('devInput'),
+      deviceOptions: document.getElementById('deviceOptions'),
       devError: document.getElementById('dev-error-message'),
       dataProvider: document.getElementById('dataProvider'),
       dpError: document.getElementById('dp-error-message'),

tests/test_app_runtime.py

@@ -189,6 +189,11 @@ def test_build_trace_params_rejects_invalid_device(self):
 
         self.assertEqual(ctx.exception.code, "invalid_payload")
 
+    def test_build_trace_params_accepts_detected_device_name(self):
+        params = app_module.build_trace_params("example.com", {"device": "br-test0"})
+
+        self.assertEqual(params, ["example.com", "--dev", "br-test0"])
+
     def test_healthz_reports_ok_when_binary_exists(self):
         app_module.app.config["NTWA_NEXTTRACE_PATH"] = sys.executable
 
@@ -205,6 +210,13 @@ def test_healthz_reports_degraded_when_binary_missing(self):
         self.assertEqual(response.status_code, 503)
         self.assertEqual(response.get_json()["status"], "degraded")
 
+    @mock.patch.object(app_module.socket_module, "if_nameindex", return_value=[(1, "lo0"), (2, "br-test0"), (3, "bad name")])
+    def test_api_devices_returns_filtered_detected_interfaces(self, _if_nameindex):
+        response = self.flask_client.get("/api/devices")
+
+        self.assertEqual(response.status_code, 200)
+        self.assertEqual(response.get_json(), {"devices": ["lo0", "br-test0"], "count": 2})
+
     def test_start_nexttrace_invalid_json_emits_structured_error(self):
         self.socket_client.emit("start_nexttrace", "{bad json")