fix: port count change immediately updates table rows

When the port count dropdown changes, the table now re-renders with
the new number of rows, preserving existing values for ports that
were already visible. This allows configuring ports > 16 after
switching to a higher port count.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

crates/ericrfb-frontend/src/pages/ports.ts

@@ -58,6 +58,7 @@ export function mountPorts(el: HTMLElement, _session: SessionInfo) {
 
   document.getElementById('btn-reload')?.addEventListener('click', loadPorts)
   document.getElementById('btn-save')?.addEventListener('click', savePorts)
+  document.getElementById('port-count')?.addEventListener('change', onPortCountChange)
   loadPorts()
 }
 
@@ -86,18 +87,26 @@ async function loadPorts() {
   }
 }
 
+let currentActivePort = 0
+
 function renderPorts(data: PortsData) {
   const countEl = document.getElementById('port-count') as HTMLSelectElement
   const pauseEl = document.getElementById('key-pause') as HTMLInputElement
-  const tbody = document.getElementById('ports-body')!
 
   if (countEl) countEl.value = String(data.port_count)
   if (pauseEl) pauseEl.value = String(data.key_pause_duration)
+  currentActivePort = data.active_port
 
+  renderPortRows(data.ports, data.active_port)
+}
+
+function renderPortRows(ports: PortInfo[], activePort: number) {
+  const tbody = document.getElementById('ports-body')!
   tbody.innerHTML = ''
-  for (const p of data.ports) {
+
+  for (const p of ports) {
     const tr = document.createElement('tr')
-    tr.className = p.index === data.active_port ? 'active-port' : ''
+    tr.className = p.index === activePort ? 'active-port' : ''
     tr.innerHTML = `
       <td class="port-num">${p.index + 1}</td>
       <td><input type="text" class="port-name" data-idx="${p.index}" value="${esc(p.name)}" maxlength="20" /></td>
@@ -119,7 +128,7 @@ function renderPorts(data: PortsData) {
           body: JSON.stringify({ port: idx }),
         })
         showToast(`Switched to port ${idx + 1}`, true)
-        loadPorts() // refresh to show new active
+        loadPorts()
       } catch (e) {
         showToast(`Switch failed: ${e}`, false)
       }
@@ -127,6 +136,27 @@ function renderPorts(data: PortsData) {
   })
 }
 
+function onPortCountChange() {
+  const countEl = document.getElementById('port-count') as HTMLSelectElement
+  const newCount = parseInt(countEl?.value || '16')
+
+  // Read current values from the existing rows
+  const ports: PortInfo[] = []
+  for (let i = 0; i < newCount; i++) {
+    const nameEl = document.querySelector(`.port-name[data-idx="${i}"]`) as HTMLInputElement | null
+    const hotkeyEl = document.querySelector(`.port-hotkey[data-idx="${i}"]`) as HTMLInputElement | null
+    const showEl = document.querySelector(`.port-show[data-idx="${i}"]`) as HTMLInputElement | null
+    ports.push({
+      index: i,
+      name: nameEl?.value || '',
+      hotkey: hotkeyEl?.value || '',
+      show_in_rc: showEl?.checked || false,
+    })
+  }
+
+  renderPortRows(ports, currentActivePort)
+}
+
 async function savePorts() {
   const countEl = document.getElementById('port-count') as HTMLSelectElement
   const pauseEl = document.getElementById('key-pause') as HTMLInputElement