@statechange/ssh-tunnel-manager 0.1.1 → 0.1.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 State Change and Ray Deck
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/app.mjs

@@ -292,7 +292,7 @@ function watchConfig(options) {
 // src/app/main.ts
 var __dirname = dirname(fileURLToPath(import.meta.url));
 var tray = null;
-var addWindow = null;
+var manageWindow = null;
 var configWatcher = null;
 var syncTimer = null;
 var currentStatuses = [];
@@ -431,8 +431,8 @@ async function buildTrayMenu() {
     ...tunnelItems,
     { type: "separator" },
     {
-      label: "Add Tunnel...",
-      click: () => openAddWindow()
+      label: "Manage Tunnels...",
+      click: () => openManageWindow()
     },
     {
       label: "Sync Now",
@@ -464,27 +464,26 @@ async function updateTray() {
   const running = enabled.filter((s) => s.alive && s.portOpen);
   tray.setToolTip(`SSH Tunnels: ${running.length}/${enabled.length} running`);
 }
-function openAddWindow() {
-  if (addWindow) {
-    addWindow.focus();
+function openManageWindow() {
+  if (manageWindow) {
+    manageWindow.focus();
     return;
   }
-  addWindow = new BrowserWindow({
-    width: 480,
-    height: 520,
-    resizable: false,
-    minimizable: false,
-    maximizable: false,
-    title: "Add SSH Tunnel",
+  manageWindow = new BrowserWindow({
+    width: 560,
+    height: 480,
+    minWidth: 400,
+    minHeight: 360,
+    title: "SSH Tunnels",
     webPreferences: {
       preload: join3(__dirname, "preload.js"),
       contextIsolation: true,
       nodeIntegration: false
     }
   });
-  addWindow.loadFile(join3(__dirname, "..", "renderer", "add-tunnel.html"));
-  addWindow.on("closed", () => {
-    addWindow = null;
+  manageWindow.loadFile(join3(__dirname, "..", "renderer", "manage.html"));
+  manageWindow.on("closed", () => {
+    manageWindow = null;
   });
 }
 ipcMain.handle("get-statuses", async () => {
@@ -511,6 +510,34 @@ ipcMain.handle("add-tunnel", async (_event, tunnelData) => {
   await updateTray();
   return tunnel;
 });
+ipcMain.handle("update-tunnel", async (_event, tunnelData) => {
+  const config = await readConfig();
+  const idx = config.tunnels.findIndex((t) => t.id === tunnelData.id);
+  if (idx === -1) throw new Error(`Tunnel '${tunnelData.id}' not found`);
+  const oldTunnel = config.tunnels[idx];
+  const newId = slugify(tunnelData.name);
+  if (newId !== oldTunnel.id && config.tunnels.some((t) => t.id === newId)) {
+    throw new Error(`Tunnel with id '${newId}' already exists`);
+  }
+  await stopTunnel(oldTunnel.id);
+  config.tunnels[idx] = {
+    ...oldTunnel,
+    id: newId,
+    name: tunnelData.name,
+    host: tunnelData.host,
+    user: tunnelData.user,
+    localPort: tunnelData.localPort,
+    remoteHost: tunnelData.remoteHost,
+    remotePort: tunnelData.remotePort,
+    enabled: tunnelData.enabled,
+    identityFile: tunnelData.identityFile,
+    sshPort: tunnelData.sshPort
+  };
+  await writeConfig(config);
+  await sync(config);
+  await updateTray();
+  return config.tunnels[idx];
+});
 ipcMain.handle("toggle-tunnel", async (_event, id) => {
   const config = await readConfig();
   const tunnel = config.tunnels.find((t) => t.id === id);

package/dist/preload.js

@@ -5,6 +5,7 @@ var import_electron = require("electron");
 import_electron.contextBridge.exposeInMainWorld("tunnelApi", {
   getStatuses: () => import_electron.ipcRenderer.invoke("get-statuses"),
   addTunnel: (data) => import_electron.ipcRenderer.invoke("add-tunnel", data),
+  updateTunnel: (data) => import_electron.ipcRenderer.invoke("update-tunnel", data),
   toggleTunnel: (id) => import_electron.ipcRenderer.invoke("toggle-tunnel", id),
   removeTunnel: (id) => import_electron.ipcRenderer.invoke("remove-tunnel", id)
 });

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@statechange/ssh-tunnel-manager",
-  "version": "0.1.1",
+  "version": "0.1.3",
+  "license": "MIT",
   "type": "module",
   "bin": {
     "ssh-tunnels": "dist/cli.mjs"

package/renderer/manage.html

@@ -0,0 +1,252 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'unsafe-inline'">
+  <title>SSH Tunnels</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      padding: 20px;
+      background: #f5f5f7;
+      color: #1d1d1f;
+      font-size: 13px;
+    }
+    h2 { font-size: 16px; margin-bottom: 16px; font-weight: 600; }
+
+    /* ── List View ── */
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 16px;
+    }
+    .header h2 { margin-bottom: 0; }
+    .empty-state {
+      text-align: center;
+      padding: 40px 20px;
+      color: #6e6e73;
+    }
+    .empty-state p { margin-bottom: 12px; }
+    .tunnel-list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+    .tunnel-card {
+      background: white;
+      border: 1px solid #d2d2d7;
+      border-radius: 8px;
+      padding: 10px 12px;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    .tunnel-status {
+      font-size: 10px;
+      flex-shrink: 0;
+    }
+    .tunnel-status.alive { color: #34C759; }
+    .tunnel-status.dead { color: #d2d2d7; }
+    .tunnel-info {
+      flex: 1;
+      min-width: 0;
+    }
+    .tunnel-name {
+      font-weight: 600;
+      font-size: 13px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .tunnel-detail {
+      color: #6e6e73;
+      font-size: 11px;
+      margin-top: 2px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .tunnel-actions {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      flex-shrink: 0;
+    }
+
+    /* Toggle switch */
+    .toggle {
+      position: relative;
+      width: 36px;
+      height: 20px;
+      flex-shrink: 0;
+    }
+    .toggle input { opacity: 0; width: 0; height: 0; }
+    .toggle .slider {
+      position: absolute;
+      inset: 0;
+      background: #d2d2d7;
+      border-radius: 10px;
+      cursor: pointer;
+      transition: background 0.2s;
+    }
+    .toggle .slider::before {
+      content: "";
+      position: absolute;
+      width: 16px;
+      height: 16px;
+      left: 2px;
+      top: 2px;
+      background: white;
+      border-radius: 50%;
+      transition: transform 0.2s;
+    }
+    .toggle input:checked + .slider { background: #34C759; }
+    .toggle input:checked + .slider::before { transform: translateX(16px); }
+
+    /* Icon buttons */
+    .icon-btn {
+      background: none;
+      border: none;
+      cursor: pointer;
+      padding: 4px;
+      border-radius: 4px;
+      color: #6e6e73;
+      font-size: 14px;
+      line-height: 1;
+    }
+    .icon-btn:hover { background: #f0f0f0; color: #1d1d1f; }
+    .icon-btn.danger:hover { color: #FF3B30; }
+
+    /* ── Form View ── */
+    .form-group { margin-bottom: 12px; }
+    label {
+      display: block;
+      font-weight: 500;
+      margin-bottom: 4px;
+      color: #6e6e73;
+    }
+    input {
+      width: 100%;
+      padding: 8px 10px;
+      border: 1px solid #d2d2d7;
+      border-radius: 6px;
+      font-size: 13px;
+      background: white;
+      outline: none;
+      transition: border-color 0.2s;
+    }
+    input:focus { border-color: #0071e3; }
+    .row { display: flex; gap: 12px; }
+    .row .form-group { flex: 1; }
+    .checkbox-group {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 12px;
+    }
+    .checkbox-group input { width: auto; }
+    .actions {
+      display: flex;
+      justify-content: flex-end;
+      gap: 8px;
+      margin-top: 16px;
+    }
+    button {
+      padding: 8px 16px;
+      border-radius: 6px;
+      border: 1px solid #d2d2d7;
+      background: white;
+      font-size: 13px;
+      cursor: pointer;
+    }
+    button:hover { background: #f0f0f0; }
+    button.primary {
+      background: #0071e3;
+      color: white;
+      border-color: #0071e3;
+    }
+    button.primary:hover { background: #0077ED; }
+    .error {
+      color: #FF3B30;
+      margin-top: 8px;
+      display: none;
+    }
+    .hidden { display: none !important; }
+  </style>
+</head>
+<body>
+  <!-- ── List View ── -->
+  <div id="list-view">
+    <div class="header">
+      <h2>SSH Tunnels</h2>
+      <button class="primary" id="add-btn">+ Add Tunnel</button>
+    </div>
+    <div id="tunnel-list" class="tunnel-list"></div>
+    <div id="empty-state" class="empty-state hidden">
+      <p>No tunnels configured</p>
+    </div>
+  </div>
+
+  <!-- ── Form View ── -->
+  <div id="form-view" class="hidden">
+    <div class="header">
+      <button id="back-btn" style="padding: 4px 10px;">← Back</button>
+      <h2 id="form-title" style="flex:1; text-align: center;">Add Tunnel</h2>
+      <div style="width: 70px;"></div>
+    </div>
+    <form id="tunnel-form">
+      <div class="form-group">
+        <label for="name">Name</label>
+        <input type="text" id="name" placeholder="Production Postgres" required>
+      </div>
+      <div class="row">
+        <div class="form-group">
+          <label for="host">SSH Host</label>
+          <input type="text" id="host" placeholder="bastion.example.com" required>
+        </div>
+        <div class="form-group">
+          <label for="user">User</label>
+          <input type="text" id="user" placeholder="ray">
+        </div>
+      </div>
+      <div class="row">
+        <div class="form-group">
+          <label for="localPort">Local Port</label>
+          <input type="number" id="localPort" placeholder="5433" required>
+        </div>
+        <div class="form-group">
+          <label for="remoteHost">Remote Host</label>
+          <input type="text" id="remoteHost" placeholder="db.internal" required>
+        </div>
+        <div class="form-group">
+          <label for="remotePort">Remote Port</label>
+          <input type="number" id="remotePort" placeholder="5432" required>
+        </div>
+      </div>
+      <div class="row">
+        <div class="form-group">
+          <label for="identityFile">Identity File (optional)</label>
+          <input type="text" id="identityFile" placeholder="~/.ssh/id_ed25519">
+        </div>
+        <div class="form-group">
+          <label for="sshPort">SSH Port</label>
+          <input type="number" id="sshPort" placeholder="22" value="22">
+        </div>
+      </div>
+      <div class="checkbox-group">
+        <input type="checkbox" id="enabled">
+        <label for="enabled" style="margin-bottom: 0; color: #1d1d1f;">Enable immediately</label>
+      </div>
+      <div class="error" id="error"></div>
+      <div class="actions">
+        <button type="button" id="cancel-btn">Cancel</button>
+        <button type="submit" class="primary" id="submit-btn">Add Tunnel</button>
+      </div>
+    </form>
+  </div>
+
+  <script src="manage.js"></script>
+</body>
+</html>

package/renderer/manage.js

@@ -0,0 +1,193 @@
+const listView = document.getElementById("list-view");
+const formView = document.getElementById("form-view");
+const tunnelList = document.getElementById("tunnel-list");
+const emptyState = document.getElementById("empty-state");
+const addBtn = document.getElementById("add-btn");
+const backBtn = document.getElementById("back-btn");
+const cancelBtn = document.getElementById("cancel-btn");
+const form = document.getElementById("tunnel-form");
+const formTitle = document.getElementById("form-title");
+const submitBtn = document.getElementById("submit-btn");
+const errorEl = document.getElementById("error");
+
+let editingId = null;
+let refreshTimer = null;
+
+// ── View Navigation ──
+
+function showList() {
+  editingId = null;
+  formView.classList.add("hidden");
+  listView.classList.remove("hidden");
+  loadTunnels();
+  startRefresh();
+}
+
+function showForm(tunnel) {
+  stopRefresh();
+  listView.classList.add("hidden");
+  formView.classList.remove("hidden");
+  errorEl.style.display = "none";
+
+  if (tunnel) {
+    editingId = tunnel.id;
+    formTitle.textContent = "Edit Tunnel";
+    submitBtn.textContent = "Save Changes";
+    document.getElementById("name").value = tunnel.name || "";
+    document.getElementById("host").value = tunnel.host || "";
+    document.getElementById("user").value = tunnel.user || "";
+    document.getElementById("localPort").value = tunnel.localPort || "";
+    document.getElementById("remoteHost").value = tunnel.remoteHost || "";
+    document.getElementById("remotePort").value = tunnel.remotePort || "";
+    document.getElementById("identityFile").value = tunnel.identityFile || "";
+    document.getElementById("sshPort").value = tunnel.sshPort || 22;
+    document.getElementById("enabled").checked = tunnel.enabled;
+  } else {
+    editingId = null;
+    formTitle.textContent = "Add Tunnel";
+    submitBtn.textContent = "Add Tunnel";
+    form.reset();
+    document.getElementById("sshPort").value = "22";
+  }
+}
+
+// ── Render Tunnel List ──
+
+function renderTunnels(statuses) {
+  tunnelList.innerHTML = "";
+
+  if (statuses.length === 0) {
+    emptyState.classList.remove("hidden");
+    return;
+  }
+  emptyState.classList.add("hidden");
+
+  for (const s of statuses) {
+    const card = document.createElement("div");
+    card.className = "tunnel-card";
+
+    const alive = s.alive && s.portOpen;
+    card.innerHTML = `
+      <span class="tunnel-status ${alive ? "alive" : "dead"}">●</span>
+      <div class="tunnel-info">
+        <div class="tunnel-name">${esc(s.name)}</div>
+        <div class="tunnel-detail">:${s.localPort} → ${esc(s.remoteHost)}:${s.remotePort}</div>
+      </div>
+      <div class="tunnel-actions">
+        <label class="toggle">
+          <input type="checkbox" ${s.enabled ? "checked" : ""} data-id="${esc(s.id)}" class="toggle-input">
+          <span class="slider"></span>
+        </label>
+        <button class="icon-btn edit-btn" data-id="${esc(s.id)}" title="Edit">✎</button>
+        <button class="icon-btn danger delete-btn" data-id="${esc(s.id)}" title="Delete">✕</button>
+      </div>
+    `;
+    tunnelList.appendChild(card);
+  }
+
+  // Attach toggle handlers
+  for (const toggle of tunnelList.querySelectorAll(".toggle-input")) {
+    toggle.addEventListener("change", async () => {
+      try {
+        await window.tunnelApi.toggleTunnel(toggle.dataset.id);
+        setTimeout(loadTunnels, 1500);
+      } catch (err) {
+        console.error("Toggle error:", err);
+      }
+    });
+  }
+
+  // Attach edit handlers
+  for (const btn of tunnelList.querySelectorAll(".edit-btn")) {
+    btn.addEventListener("click", () => {
+      const tunnel = statuses.find((s) => s.id === btn.dataset.id);
+      if (tunnel) showForm(tunnel);
+    });
+  }
+
+  // Attach delete handlers
+  for (const btn of tunnelList.querySelectorAll(".delete-btn")) {
+    btn.addEventListener("click", async () => {
+      const tunnel = statuses.find((s) => s.id === btn.dataset.id);
+      if (!tunnel) return;
+      if (!confirm(`Remove tunnel "${tunnel.name}"?`)) return;
+      try {
+        await window.tunnelApi.removeTunnel(tunnel.id);
+        loadTunnels();
+      } catch (err) {
+        console.error("Delete error:", err);
+      }
+    });
+  }
+}
+
+// ── Data Loading ──
+
+async function loadTunnels() {
+  try {
+    const statuses = await window.tunnelApi.getStatuses();
+    renderTunnels(statuses);
+  } catch (err) {
+    console.error("Failed to load tunnels:", err);
+  }
+}
+
+function startRefresh() {
+  stopRefresh();
+  refreshTimer = setInterval(loadTunnels, 3000);
+}
+
+function stopRefresh() {
+  if (refreshTimer) {
+    clearInterval(refreshTimer);
+    refreshTimer = null;
+  }
+}
+
+// ── Form Submission ──
+
+form.addEventListener("submit", async (e) => {
+  e.preventDefault();
+  errorEl.style.display = "none";
+
+  const data = {
+    name: document.getElementById("name").value.trim(),
+    host: document.getElementById("host").value.trim(),
+    user: document.getElementById("user").value.trim() || undefined,
+    localPort: parseInt(document.getElementById("localPort").value, 10),
+    remoteHost: document.getElementById("remoteHost").value.trim(),
+    remotePort: parseInt(document.getElementById("remotePort").value, 10),
+    identityFile: document.getElementById("identityFile").value.trim() || undefined,
+    sshPort: parseInt(document.getElementById("sshPort").value, 10) || 22,
+    enabled: document.getElementById("enabled").checked,
+  };
+
+  try {
+    if (editingId) {
+      await window.tunnelApi.updateTunnel({ id: editingId, ...data });
+    } else {
+      await window.tunnelApi.addTunnel(data);
+    }
+    showList();
+  } catch (err) {
+    errorEl.textContent = err.message || "Failed to save tunnel";
+    errorEl.style.display = "block";
+  }
+});
+
+// ── Button Handlers ──
+
+addBtn.addEventListener("click", () => showForm(null));
+backBtn.addEventListener("click", () => showList());
+cancelBtn.addEventListener("click", () => showList());
+
+// ── Helpers ──
+
+function esc(str) {
+  const el = document.createElement("span");
+  el.textContent = str;
+  return el.innerHTML;
+}
+
+// ── Init ──
+showList();

package/renderer/add-tunnel.html

@@ -1,127 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'unsafe-inline'">
-  <title>Add SSH Tunnel</title>
-  <style>
-    * { margin: 0; padding: 0; box-sizing: border-box; }
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-      padding: 20px;
-      background: #f5f5f7;
-      color: #1d1d1f;
-      font-size: 13px;
-    }
-    h2 { font-size: 16px; margin-bottom: 16px; font-weight: 600; }
-    .form-group {
-      margin-bottom: 12px;
-    }
-    label {
-      display: block;
-      font-weight: 500;
-      margin-bottom: 4px;
-      color: #6e6e73;
-    }
-    input {
-      width: 100%;
-      padding: 8px 10px;
-      border: 1px solid #d2d2d7;
-      border-radius: 6px;
-      font-size: 13px;
-      background: white;
-      outline: none;
-      transition: border-color 0.2s;
-    }
-    input:focus { border-color: #0071e3; }
-    .row { display: flex; gap: 12px; }
-    .row .form-group { flex: 1; }
-    .checkbox-group {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      margin-bottom: 12px;
-    }
-    .checkbox-group input { width: auto; }
-    .actions {
-      display: flex;
-      justify-content: flex-end;
-      gap: 8px;
-      margin-top: 16px;
-    }
-    button {
-      padding: 8px 16px;
-      border-radius: 6px;
-      border: 1px solid #d2d2d7;
-      background: white;
-      font-size: 13px;
-      cursor: pointer;
-    }
-    button:hover { background: #f0f0f0; }
-    button.primary {
-      background: #0071e3;
-      color: white;
-      border-color: #0071e3;
-    }
-    button.primary:hover { background: #0077ED; }
-    .error {
-      color: #FF3B30;
-      margin-top: 8px;
-      display: none;
-    }
-  </style>
-</head>
-<body>
-  <h2>Add SSH Tunnel</h2>
-  <form id="tunnel-form">
-    <div class="form-group">
-      <label for="name">Name</label>
-      <input type="text" id="name" placeholder="Production Postgres" required>
-    </div>
-    <div class="row">
-      <div class="form-group">
-        <label for="host">SSH Host</label>
-        <input type="text" id="host" placeholder="bastion.example.com" required>
-      </div>
-      <div class="form-group">
-        <label for="user">User</label>
-        <input type="text" id="user" placeholder="ray">
-      </div>
-    </div>
-    <div class="row">
-      <div class="form-group">
-        <label for="localPort">Local Port</label>
-        <input type="number" id="localPort" placeholder="5433" required>
-      </div>
-      <div class="form-group">
-        <label for="remoteHost">Remote Host</label>
-        <input type="text" id="remoteHost" placeholder="db.internal" required>
-      </div>
-      <div class="form-group">
-        <label for="remotePort">Remote Port</label>
-        <input type="number" id="remotePort" placeholder="5432" required>
-      </div>
-    </div>
-    <div class="row">
-      <div class="form-group">
-        <label for="identityFile">Identity File (optional)</label>
-        <input type="text" id="identityFile" placeholder="~/.ssh/id_ed25519">
-      </div>
-      <div class="form-group">
-        <label for="sshPort">SSH Port</label>
-        <input type="number" id="sshPort" placeholder="22" value="22">
-      </div>
-    </div>
-    <div class="checkbox-group">
-      <input type="checkbox" id="enabled">
-      <label for="enabled" style="margin-bottom: 0; color: #1d1d1f;">Enable immediately</label>
-    </div>
-    <div class="error" id="error"></div>
-    <div class="actions">
-      <button type="button" id="cancel-btn">Cancel</button>
-      <button type="submit" class="primary">Add Tunnel</button>
-    </div>
-  </form>
-  <script src="add-tunnel.js"></script>
-</body>
-</html>

package/renderer/add-tunnel.js

@@ -1,48 +0,0 @@
-const form = document.getElementById("tunnel-form");
-const errorEl = document.getElementById("error");
-const cancelBtn = document.getElementById("cancel-btn");
-
-console.log("tunnelApi available:", !!window.tunnelApi);
-if (!window.tunnelApi) {
-  errorEl.textContent = "Error: tunnelApi not available (preload script failed to load)";
-  errorEl.style.display = "block";
-}
-
-cancelBtn.addEventListener("click", () => {
-  window.close();
-});
-
-form.addEventListener("submit", async (e) => {
-  e.preventDefault();
-  errorEl.style.display = "none";
-
-  if (!window.tunnelApi) {
-    errorEl.textContent = "Error: tunnelApi not available";
-    errorEl.style.display = "block";
-    return;
-  }
-
-  const data = {
-    name: document.getElementById("name").value.trim(),
-    host: document.getElementById("host").value.trim(),
-    user: document.getElementById("user").value.trim() || undefined,
-    localPort: parseInt(document.getElementById("localPort").value, 10),
-    remoteHost: document.getElementById("remoteHost").value.trim(),
-    remotePort: parseInt(document.getElementById("remotePort").value, 10),
-    identityFile: document.getElementById("identityFile").value.trim() || undefined,
-    sshPort: parseInt(document.getElementById("sshPort").value, 10) || 22,
-    enabled: document.getElementById("enabled").checked,
-  };
-
-  console.log("Submitting tunnel data:", JSON.stringify(data));
-
-  try {
-    const result = await window.tunnelApi.addTunnel(data);
-    console.log("Add tunnel result:", result);
-    window.close();
-  } catch (err) {
-    console.error("Add tunnel error:", err);
-    errorEl.textContent = err.message || "Failed to add tunnel";
-    errorEl.style.display = "block";
-  }
-});