diff --git a/src/components/NetworkPage.astro b/src/components/NetworkPage.astro
deleted file mode 100644
index 6d5e302..0000000
--- a/src/components/NetworkPage.astro
+++ /dev/null
@@ -1,1823 +0,0 @@
----
-import StationConfigModal from "../components/modals/StationConfigModal.astro";
-import AccessPointConfigModal from "../components/modals/AccessPointConfigModal.astro";
-import WifiDisableWarningModal from "../components/modals/WifiDisableWarningModal.astro";
-import HostnameChangedModal from "../components/modals/HostnameChangedModal.astro";
-import IconEye from "../components/icons/IconEye.astro";
-import IconEyeClosed from "../components/icons/IconEyeClosed.astro";
-
-const pageTitle = "Network Configuration";
----
-
-<div class="flex flex-col gap-4 min-w-0">
-  <h1 class="text-2xl font-bold break-words">{pageTitle}</h1>
-
-  <div class="flex flex-wrap gap-4 mb-8 min-w-0 *:flex-1 *:min-w-full sm:*:min-w-60">
-    <!-- Connection Mode -->
-    <div class="card bg-base-100 card-border border-base-300 shadow min-w-0">
-      <div class="card-body p-4 gap-1">
-        <h3 class="text-sm opacity-60 font-medium">Connection Mode</h3>
-        <div class="text-2xl font-bold text-primary leading-tight wrap-break-word" id="active-mode-display">Loading...</div>
-      </div>
-    </div>
-
-    <!-- Ethernet -->
-    <div class="card bg-base-100 card-border border-base-300 shadow min-w-0">
-      <div class="card-body p-4 gap-1">
-        <h3 class="text-sm opacity-60 font-medium">Ethernet</h3>
-        <div class="text-2xl font-bold text-primary truncate" id="eth-ip-display">-</div>
-        <div class="text-xs opacity-70 truncate">GW: <span id="eth-gateway-display">-</span></div>
-        <div class="text-xs opacity-70 truncate">Mask: <span id="eth-netmask-display">-</span></div>
-        <div class="text-xs opacity-70 truncate">MAC: <span id="eth-mac-display">-</span></div>
-      </div>
-    </div>
-
-    <!-- WiFi (SSID + signal) -->
-    <div class="card bg-base-100 card-border border-base-300 shadow min-w-0" id="wifi-card">
-      <div class="card-body p-4 gap-1">
-        <div class="flex items-start gap-2">
-          <div class="flex flex-col gap-1 min-w-0 flex-1">
-            <h3 class="text-sm opacity-60 font-medium" id="wifi-card-title">WiFi</h3>
-            <div class="text-2xl font-bold text-primary truncate" id="ssid-card-display">-</div>
-            <div class="text-xs opacity-70 items-center gap-1 hidden" id="password-desc">
-              <span id="pw-display-group" class="flex items-center gap-1">
-                PW: <span id="password-card-display" data-password=""></span>
-                <button type="button" class="btn btn-ghost btn-xs p-0 min-h-0 h-4" id="toggle-password-visibility">
-                  <span id="eye-icon-open">
-                    <IconEye size={14} class="opacity-70 hover:opacity-100" />
-                  </span>
-                  <span id="eye-icon-closed" class="hidden">
-                    <IconEyeClosed size={14} class="opacity-70 hover:opacity-100" />
-                  </span>
-                </button>
-              </span>
-              <span id="open-network-label" class="hidden">Open Network</span>
-            </div>
-            <div class="text-xs opacity-70 flex items-center gap-1" id="rssi-row">RSSI: <span id="signal-display"></span></div>
-            <div class="text-xs opacity-70" id="signal-desc">Not connected</div>
-          </div>
-          <div id="signal-icon" class="text-primary shrink-0 mt-1">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="28"
-              height="28"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-              <path d="M12 18l.01 0"></path>
-              <path d="M9.172 15.172a4 4 0 0 1 5.656 0"></path>
-              <path d="M6.343 12.343a8 8 0 0 1 11.314 0"></path>
-              <path d="M3.515 9.515c4.686 -4.687 12.284 -4.687 17 0"></path>
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- WiFi / Station IP — hidden unless STA mode -->
-    <div class="card bg-base-100 card-border border-base-300 shadow min-w-0" id="wifi-station-card">
-      <div class="card-body p-4 gap-1">
-        <h3 class="text-sm opacity-60 font-medium" id="wifi-ip-card-title">WiFi Station</h3>
-        <div class="text-2xl font-bold text-primary truncate" id="sta-ip-display">-</div>
-        <div class="text-xs opacity-70 truncate">GW: <span id="sta-gateway-display">-</span></div>
-        <div class="text-xs opacity-70 truncate">Mask: <span id="sta-netmask-display">-</span></div>
-        <div class="text-xs opacity-70 truncate">MAC: <span id="sta-mac-display">-</span></div>
-      </div>
-    </div>
-
-    <!-- Hostname -->
-    <div class="card bg-base-100 card-border border-base-300 shadow min-w-0">
-      <div class="card-body p-4 gap-1">
-        <h3 class="text-sm opacity-60 font-medium">Hostname</h3>
-        <div class="text-2xl font-bold text-primary truncate" id="hostname-display">-</div>
-        <a
-          class="text-xs opacity-70 truncate hover:opacity-100 hover:text-primary transition-opacity"
-          id="hostname-desc"
-          href="http://hostname.local"
-          target="_blank"
-        >
-          http://<span id="hostname-preview-card-hint">hostname</span>.local
-        </a>
-      </div>
-    </div>
-
-    <!-- Connected Clients -->
-    <div class="card bg-base-100 card-border border-base-300 shadow min-w-0">
-      <div class="card-body p-4 gap-1">
-        <div class="flex items-start gap-2">
-          <div class="flex flex-col gap-1 min-w-0 flex-1">
-            <h3 class="text-sm opacity-60 font-medium">Connected Clients</h3>
-            <div class="text-2xl font-bold text-primary" id="clients-display">0</div>
-            <div class="text-xs opacity-70" id="clients-desc">No clients</div>
-          </div>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="28"
-            height="28"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            class="text-primary shrink-0 mt-1"
-          >
-            <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
-            <circle cx="9" cy="7" r="4"></circle>
-            <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
-            <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
-          </svg>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="space-y-4 mb-8">
-    <!-- Network Configuration Card -->
-    <div class="card bg-base-100 card-border border-base-300">
-      <div class="card-body">
-        <div class="flex flex-col md:flex-row gap-6 md:gap-8">
-          <!-- Hostname Configuration -->
-          <div class="flex flex-col gap-2 min-w-0 flex-1 lg:px-10">
-            <h3 class="font-semibold text-base mb-4 flex items-center gap-2">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="18"
-                height="18"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                class="text-primary"
-              >
-                <circle cx="12" cy="12" r="10"></circle>
-                <line x1="2" y1="12" x2="22" y2="12"></line>
-                <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
-              </svg>
-              Network Interface Name
-            </h3>
-
-            <label class="label">
-              <span class="label-text font-semibold text-base">Hostname</span>
-              <div
-                class="tooltip tooltip-bottom tooltip-primary"
-                data-tip="The hostname defines under which this device and its web interface can be reachable on your network (e.g. 'hostname.local'). Open http://hostname.local in your Browser to open this page if the device has access to the same network."
-              >
-                <button type="button" class="btn btn-ghost btn-xs p-0.5 min-h-0 h-6 opacity-60 hover:opacity-100">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="16"
-                    height="16"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                  >
-                    <circle cx="12" cy="12" r="10"></circle>
-                    <line x1="12" y1="8" x2="12" y2="12"></line>
-                    <line x1="12" y1="16" x2="12.01" y2="16"></line>
-                  </svg>
-                </button>
-              </div>
-            </label>
-            <div class="flex gap-2 w-full" id="mdns-hostname-wrapper">
-              <label
-                id="mdns-hostname-field"
-                class="input flex-1 flex items-center gap-2 font-mono text-sm focus-within:bg-primary/10 focus-within:border-none focus-within:outline-primary"
-              >
-                <span class="opacity-70 select-none" aria-hidden="true">http://</span>
-                <input
-                  type="text"
-                  id="mdns-hostname"
-                  placeholder="hostname"
-                  maxlength="31"
-                  required
-                  class="grow min-w-0 bg-transparent border-none outline-none"
-                  inputmode="text"
-                  autocomplete="off"
-                  autocapitalize="none"
-                  spellcheck="false"
-                />
-                <span class="opacity-70 select-none" aria-hidden="true">.local</span>
-              </label>
-              <button type="button" class="btn btn-primary" id="apply-hostname-btn">Apply</button>
-            </div>
-            <p id="hostname-error-msg" class="mt-1 text-sm text-error hidden"></p>
-            <label class="label">
-              <span class="label-text-alt"
-                >Access your device at <span class="font-mono font-semibold break-all"
-                  >http://<span id="hostname-preview-hint">hostname</span>.local</span
-                ></span
-              >
-            </label>
-          </div>
-
-          <div class="divider md:divider-horizontal justify-center"></div>
-
-          <!-- IP Configuration -->
-          <div class="flex flex-col gap-2 min-w-0 flex-1 lg:px-10">
-            <h3 class="font-semibold text-base mb-4 flex items-center gap-2">Ethernet IP Address Configuration</h3>
-
-            <label class="label flex-col items-start gap-2">
-              <span class="label-text font-semibold text-base" id="ip-mode-description">IP assignment</span>
-            </label>
-            <div class="join w-full">
-              <input
-                class="join-item btn flex-1"
-                type="radio"
-                name="ip-mode-ethernet"
-                aria-label="Automatic (DHCP)"
-                value="dhcp"
-                id="ip-mode-dhcp-ethernet-btn"
-              />
-              <input
-                class="join-item btn flex-1"
-                type="radio"
-                name="ip-mode-ethernet"
-                aria-label="Static IP"
-                value="static"
-                id="ip-mode-static-ethernet-btn"
-              />
-            </div>
-
-            <div id="static-ip-container" class="space-y-4 hidden">
-              <div class="grid grid-cols-1 gap-4">
-                <div class="form-control">
-                  <label class="label">
-                    <span class="label-text font-semibold">IP Address</span>
-                  </label>
-                  <label class="input w-full font-mono text-sm focus-within:bg-primary/10 focus-within:border-none focus-within:outline-primary">
-                    <input type="text" class="w-full border-none outline-none bg-transparent" id="static-ip-ethernet" placeholder="192.168.1.2" />
-                  </label>
-                  <p id="static-ip-ethernet-error-page" class="mt-2 text-sm text-error hidden"></p>
-                </div>
-
-                <div class="form-control">
-                  <label class="label">
-                    <span class="label-text font-semibold">Subnet Mask</span>
-                  </label>
-                  <label class="input w-full font-mono text-sm focus-within:bg-primary/10 focus-within:border-none focus-within:outline-primary">
-                    <input type="text" class="w-full border-none outline-none bg-transparent" id="subnet-mask-ethernet" placeholder="255.255.255.0" />
-                  </label>
-                  <p id="subnet-mask-ethernet-error-page" class="mt-2 text-sm text-error hidden"></p>
-                </div>
-
-                <div class="form-control">
-                  <label class="label">
-                    <span class="label-text font-semibold">Gateway</span>
-                  </label>
-                  <label class="input w-full font-mono text-sm focus-within:bg-primary/10 focus-within:border-none focus-within:outline-primary">
-                    <input type="text" class="w-full border-none outline-none bg-transparent" id="gateway-ethernet" placeholder="192.168.1.1" />
-                  </label>
-                  <p id="gateway-ethernet-error-page" class="mt-2 text-sm text-error hidden"></p>
-                </div>
-                <div class="flex w-full">
-                  <button
-                    class="btn btn-primary w-full tooltip tooltip-bottom tooltip-info"
-                    data-tip="This can take some time to apply and will temporarily disconnect the device from the network. Review your inputs before applying!"
-                    id="save-static-ip-ethernet-btn">Apply Static IP Configuration</button
-                  >
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- WiFi Configuration Card -->
-    <div class="card bg-base-100 card-border border-base-300">
-      <div class="card-body">
-        <!-- WiFi Toggle and Settings -->
-        <div>
-          <div class="flex flex-col md:flex-row gap-6 md:gap-8 mb-4">
-            <!-- Left Half: WiFi Configuration Headline -->
-            <div class="flex-1 min-w-0">
-              <h2 class="font-semibold text-base flex items-center gap-2">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="18"
-                  height="18"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  class="text-primary"
-                >
-                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                  <path d="M12 18l.01 0"></path>
-                  <path d="M9.172 15.172a4 4 0 0 1 5.656 0"></path>
-                  <path d="M6.343 12.343a8 8 0 0 1 11.314 0"></path>
-                  <path d="M3.515 9.515c4.686 -4.687 12.284 -4.687 17 0"></path>
-                </svg>
-                WiFi Configuration
-              </h2>
-            </div>
-            <!-- Right Half: WiFi Station IP Address Configuration Headline -->
-            <div class="flex-1 min-w-0"></div>
-          </div>
-          <div class="form-control mb-6">
-            <label class="label cursor-pointer justify-start gap-3">
-              <span class="label-text font-semibold">WiFi <span id="wifi-status-text">Disabled</span></span>
-              <input type="checkbox" class="toggle toggle-primary" id="wifi-toggle" />
-            </label>
-          </div>
-
-          <!-- WiFi Settings (shown when WiFi is enabled) -->
-          <div id="wifi-settings-container" class="space-y-6 hidden">
-            <div id="wifi-active-controls">
-              <div class="flex flex-col md:flex-row gap-6">
-                <!-- Left Half: Antenna Selection and Transmission Power -->
-                <div class="flex flex-col gap-6 flex-1 min-w-0 lg:px-10">
-                  <div class="form-control">
-                    <label class="label pb-2">
-                      <span class="label-text font-semibold text-base">Antenna Selection</span>
-                    </label>
-                    <div class="join w-full">
-                      <input
-                        class="join-item btn flex-1"
-                        type="radio"
-                        name="antenna-selection"
-                        aria-label="Internal"
-                        value="internal"
-                        id="antenna-internal-radio"
-                      />
-                      <input
-                        class="join-item btn flex-1"
-                        type="radio"
-                        name="antenna-selection"
-                        aria-label="External"
-                        value="external"
-                        id="antenna-external-radio"
-                      />
-                    </div>
-                  </div>
-
-                  <div class="form-control min-w-0">
-                    <label class="label flex-wrap gap-5 pb-2">
-                      <span class="label-text font-semibold text-base break-words">Transmission Power</span>
-                      <span class="label-text-alt font-mono text-xs sm:text-sm break-all" id="power-value-display">20 dBm (100.00 mW)</span>
-                    </label>
-                    <div class="relative">
-                      <input
-                        type="range"
-                        min="2"
-                        max="20"
-                        value="20"
-                        step="0.25"
-                        class="range range-primary w-full color-primary"
-                        id="antenna-power"
-                      />
-                      <div class="relative w-full h-4 mt-2">
-                        <span class="absolute text-xs opacity-60" style="left: 0%; transform: translateX(0%);">2</span>
-                        <span class="absolute text-xs opacity-60" style="left: 16.67%; transform: translateX(-50%);">5</span>
-                        <span class="absolute text-xs opacity-60" style="left: 44.44%; transform: translateX(-50%);">10</span>
-                        <span class="absolute text-xs opacity-60" style="left: 72.22%; transform: translateX(-50%);">15</span>
-                        <span class="absolute text-xs opacity-60" style="right: 0%; transform: translateX(0%);">20</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-                <div class="divider md:divider-horizontal"></div>
-
-                <!-- Right Half: Static IP Configuration for STATION Mode -->
-                <div class="flex flex-col gap-2 min-w-0 flex-1 lg:px-10">
-                  <label class="label flex-col items-start gap-2">
-                    <span class="label-text font-semibold text-base" id="ip-mode-description-station">IP assignment</span>
-                  </label>
-
-                  <!-- Placeholder for AP mode, where no DHCP/Static IP configuration is available -->
-                  <div class="alert alert-info mb-4 hidden" id="ap-mode-ip-alert-placeholder">
-                    <div>
-                      <h3 class="font-bold">Access Point mode is active</h3>
-                      <p class="text-sm">IP Address configuration is not necessary in Access Point mode.</p>
-                    </div>
-                  </div>
-                  <div class="join w-full" id="ip-assignment-buttons-station">
-                    <input
-                      class="join-item btn flex-1"
-                      type="radio"
-                      name="ip-mode-station"
-                      aria-label="Automatic (DHCP)"
-                      value="dhcp"
-                      id="ip-mode-dhcp-station-btn"
-                    />
-                    <input
-                      class="join-item btn flex-1"
-                      type="radio"
-                      name="ip-mode-station"
-                      aria-label="Static IP"
-                      value="static"
-                      id="ip-mode-static-station-btn"
-                    />
-                  </div>
-
-                  <div id="static-ip-container-station" class="space-y-4 hidden">
-                    <div class="grid grid-cols-1 gap-4">
-                      <div class="form-control">
-                        <label class="label">
-                          <span class="label-text font-semibold">IP Address</span>
-                        </label>
-                        <label
-                          class="input w-full font-mono text-sm focus-within:bg-primary/10 focus-within:border-none focus-within:outline-primary"
-                        >
-                          <input
-                            type="text"
-                            class="w-full border-none outline-none bg-transparent"
-                            id="static-ip-station"
-                            placeholder="192.168.1.2"
-                          />
-                        </label>
-                        <p id="static-ip-station-error-page" class="mt-2 text-sm text-error hidden"></p>
-                      </div>
-
-                      <div class="form-control">
-                        <label class="label">
-                          <span class="label-text font-semibold">Subnet Mask</span>
-                        </label>
-                        <label
-                          class="input w-full font-mono text-sm focus-within:bg-primary/10 focus-within:border-none focus-within:outline-primary"
-                        >
-                          <input
-                            type="text"
-                            class="w-full border-none outline-none bg-transparent"
-                            id="subnet-mask-station"
-                            placeholder="255.255.255.0"
-                          />
-                        </label>
-                        <p id="subnet-mask-station-error-page" class="mt-2 text-sm text-error hidden"></p>
-                      </div>
-
-                      <div class="form-control">
-                        <label class="label">
-                          <span class="label-text font-semibold">Gateway</span>
-                        </label>
-                        <label
-                          class="input w-full font-mono text-sm focus-within:bg-primary/10 focus-within:border-none focus-within:outline-primary"
-                        >
-                          <input type="text" class="w-full border-none outline-none bg-transparent" id="gateway-station" placeholder="192.168.1.1" />
-                        </label>
-                        <p id="gateway-station-error-page" class="mt-2 text-sm text-error hidden"></p>
-                      </div>
-                    </div>
-                  </div>
-                  <button
-                    class="btn btn-primary w-full mt-2 tooltip tooltip-bottom tooltip-info hidden"
-                    data-tip="This can take some time to apply and will temporarily disconnect the device from the network. Review your inputs before applying!"
-                    id="save-static-ip-station-btn">Apply IP Configuration</button
-                  >
-                </div>
-              </div>
-            </div>
-          </div>
-          <!-- Banner shown when WiFi is toggled on but no mode is active yet -->
-          <div id="wifi-no-mode-banner" class="alert alert-info hidden mt-8 mb-0">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5 shrink-0"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line>
-            </svg>
-            <span>No active WiFi mode. Connect to a network or create an Access Point first.</span>
-          </div>
-        </div>
-
-        <div id="wifi-mode-section">
-          <div class="divider mt-2 mb-6"></div>
-
-          <div>
-            <h3 class="font-semibold text-base mb-2 flex items-center gap-2 opacity-90">WiFi Mode Selection</h3>
-            <p class="text-sm opacity-70 mb-4">Choose a WiFi mode</p>
-
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
-              <button
-                class="h-auto py-4 mode-card bg-base-300 hover:bg-secondary/10 transition-all rounded-lg border-2 border-transparent hover:border-secondary"
-                data-mode="station"
-                id="mode-station"
-              >
-                <div class="flex flex-col items-center gap-2">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    class="text-secondary"
-                  >
-                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                    <path d="M12 18l.01 0"></path>
-                    <path d="M9.172 15.172a4 4 0 0 1 5.656 0"></path>
-                    <path d="M6.343 12.343a8 8 0 0 1 11.314 0"></path>
-                    <path d="M3.515 9.515c4.686 -4.687 12.284 -4.687 17 0"></path>
-                  </svg>
-                  <div class="font-semibold">WiFi Station</div>
-                  <div class="text-xs opacity-70">Connect to a WiFi network</div>
-                </div>
-              </button>
-
-              <button
-                class="h-auto py-4 mode-card bg-base-300 hover:bg-accent/10 transition-all rounded-lg border-2 border-transparent hover:border-accent"
-                data-mode="ap"
-                id="mode-ap"
-              >
-                <div class="flex flex-col items-center gap-2">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    class="text-accent"
-                    ><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 12l0 .01"></path><path d="M14.828 9.172a4 4 0 0 1 0 5.656"
-                    ></path><path d="M17.657 6.343a8 8 0 0 1 0 11.314"></path><path d="M9.168 14.828a4 4 0 0 1 0 -5.656"></path><path
-                      d="M6.337 17.657a8 8 0 0 1 0 -11.314"></path></svg
-                  >
-                  <div class="font-semibold">Access Point</div>
-                  <div class="text-xs opacity-70">Create a WiFi hotspot</div>
-                </div>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<StationConfigModal />
-<AccessPointConfigModal />
-<WifiDisableWarningModal />
-<HostnameChangedModal />
-
-<dialog id="network-config-error-modal" class="modal modal-middle">
-  <div class="modal-box w-11/12 sm:w-5/12 max-w-lg">
-    <h3 class="text-lg font-bold mb-1 text-error">Network Configuration Failed</h3>
-    <div class="divider mt-2 mb-3"></div>
-    <div class="space-y-3">
-      <div class="alert alert-error py-3">
-        <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-        </svg>
-        <span id="network-error-reason-text">Configuration could not be applied.</span>
-      </div>
-      <div class="bg-base-200 rounded-lg overflow-hidden">
-        <table class="table table-compact w-full">
-          <tbody>
-            <tr id="network-error-ssid-row" class="hidden">
-              <td class="font-semibold w-1/3">SSID</td>
-              <td id="network-error-ssid"></td>
-            </tr>
-            <tr>
-              <td class="font-semibold w-1/3">Reason</td>
-              <td id="network-error-reason"></td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <p class="text-sm opacity-70">
-        The device has restored the previous working configuration. Check your network credentials or IP settings and try again.
-      </p>
-    </div>
-    <div class="modal-action">
-      <form method="dialog">
-        <button class="btn btn-primary">OK</button>
-      </form>
-    </div>
-  </div>
-  <form method="dialog" class="modal-backdrop">
-    <button>close</button>
-  </form>
-</dialog>
-
-<div id="config-applying-toast" class="toast toast-bottom toast-center hidden z-50">
-  <div class="alert alert-info shadow-lg">
-    <span class="loading loading-spinner loading-sm"></span>
-    <span>Applying network configuration — device may briefly disconnect.</span>
-  </div>
-</div>
-
-<dialog id="static-ip-confirm-modal" class="modal modal-middle">
-  <div class="modal-box w-11/12 sm:w-5/12 max-w-2xl">
-    <h3 class="text-lg font-bold mb-4">Confirm IP Configuration</h3>
-    <div class="divider"></div>
-
-    <div class="space-y-4">
-      <div>
-        <h4 class="font-semibold mb-2">Summary</h4>
-        <div class="bg-base-200 rounded-lg overflow-hidden">
-          <table class="table table-compact">
-            <tbody>
-              <tr>
-                <td class="font-semibold w-1/3">Mode</td>
-                <td id="static-ip-summary-mode">Automatic (DHCP)</td>
-              </tr>
-              <tr id="static-ip-summary-ip-row" class="hidden">
-                <td class="font-semibold">IP Address</td>
-                <td id="static-ip-summary-ip">-</td>
-              </tr>
-              <tr id="static-ip-summary-netmask-row" class="hidden">
-                <td class="font-semibold">Netmask</td>
-                <td id="static-ip-summary-netmask">-</td>
-              </tr>
-              <tr id="static-ip-summary-gateway-row" class="hidden">
-                <td class="font-semibold">Gateway</td>
-                <td id="static-ip-summary-gateway">-</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-
-      <div id="static-ip-warning" class="alert alert-warning py-3">
-        <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-5 w-5" fill="none" viewBox="0 0 24 24">
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-          ></path>
-        </svg>
-        <div class="text-sm">
-          <p class="font-semibold">Warning</p>
-          <ul class="list-disc list-inside space-y-1 mt-2">
-            <li>Saving a static IP temporarily disconnects the device from the network.</li>
-            <li>Verify IP, netmask, and gateway carefully before applying.</li>
-            <li>The device remains reachable using a USB connection and the Desktop App.</li>
-          </ul>
-        </div>
-      </div>
-    </div>
-
-    <div class="modal-action">
-      <form method="dialog">
-        <button class="btn" id="cancel-static-ip-btn">Cancel</button>
-      </form>
-      <button class="btn btn-primary" id="confirm-static-ip-btn" type="button">Confirm & Apply</button>
-    </div>
-  </div>
-  <form method="dialog" class="modal-backdrop">
-    <button>close</button>
-  </form>
-</dialog>
-
-<script>
-  import {
-    ConnectionMode,
-    AntennaSelection,
-    $current_network_configuration,
-    $network_status_display,
-    $network_config_error,
-    type NetworkConfigNVS,
-    set_hostname,
-    send_new_network_configuration_to_alpha,
-    $hostname_input_field,
-    set_antenna_selection,
-    set_antenna_power,
-  } from "../components/backend_components/NetworkManagerStore";
-  import { HOSTNAME_REGEX, MAX_HOSTNAME_LENGTH, normalizeHostnameValue } from "../components/helper_scripts/hostname_validation";
-  import {
-    is_valid_ip_format,
-    isValidNetmask,
-    isPracticalNetmask,
-    isInValidHostRange,
-    isInSameSubnet,
-  } from "../components/helper_scripts/IP_Subnetmask_validation";
-
-  function getModeString(mode: number): string {
-    switch (mode) {
-      case ConnectionMode.CONNECTION_MODE_ETH_DHCP_NO_WIFI:
-      case ConnectionMode.CONNECTION_MODE_ETH_STATIC_NO_WIFI:
-        return "Ethernet only";
-      case ConnectionMode.CONNECTION_MODE_ETH_DHCP_APSTA:
-      case ConnectionMode.CONNECTION_MODE_ETH_STATIC_APSTA:
-        return "Ethernet + Access Point";
-      case ConnectionMode.CONNECTION_MODE_ETH_DHCP_STA_DHCP:
-      case ConnectionMode.CONNECTION_MODE_ETH_DHCP_STA_STATIC:
-      case ConnectionMode.CONNECTION_MODE_ETH_STATIC_STA_DHCP:
-      case ConnectionMode.CONNECTION_MODE_ETH_STATIC_STA_STATIC:
-        return "Ethernet + WiFi Station";
-      default:
-        return "None";
-    }
-  }
-  const wifiToggle = document.getElementById("wifi-toggle") as HTMLInputElement;
-  const wifiSettingsContainer = document.getElementById("wifi-settings-container");
-  const wifiStatusText = document.getElementById("wifi-status-text");
-  const hostnameInput = document.getElementById("mdns-hostname") as HTMLInputElement;
-  const hostnameInputField = document.getElementById("mdns-hostname-field") as HTMLElement | null;
-  const hostnameErrorMsg = document.getElementById("hostname-error-msg");
-  const applyHostnameBtn = document.getElementById("apply-hostname-btn") as HTMLButtonElement | null;
-  const hostnamePreviewCardHint = document.getElementById("hostname-preview-card-hint");
-  const hostnameDescLink = document.getElementById("hostname-desc") as HTMLAnchorElement | null;
-  const hostnamePreviewHint = document.getElementById("hostname-preview-hint");
-  const staticIpContainer = document.getElementById("static-ip-container");
-  const ipModeDescription = document.getElementById("ip-mode-description");
-  const ipModeButtons = document.querySelectorAll('input[name="ip-mode-ethernet"]') as NodeListOf<HTMLInputElement>;
-  const staticIpInput = document.getElementById("static-ip-ethernet") as HTMLInputElement;
-  const subnetMaskInput = document.getElementById("subnet-mask-ethernet") as HTMLInputElement;
-  const gatewayInput = document.getElementById("gateway-ethernet") as HTMLInputElement;
-  const staticIpError = document.getElementById("static-ip-ethernet-error-page");
-  const subnetMaskError = document.getElementById("subnet-mask-ethernet-error-page");
-  const gatewayError = document.getElementById("gateway-ethernet-error-page");
-  const saveStaticIpBtn = document.getElementById("save-static-ip-ethernet-btn") as HTMLButtonElement;
-
-  // Station mode IP assignment elements
-  const apModeIpAlertPlaceholder = document.getElementById("ap-mode-ip-alert-placeholder");
-  const ipAssignmentButtonsStation = document.getElementById("ip-assignment-buttons-station");
-  const staticIpContainerStation = document.getElementById("static-ip-container-station");
-  const ipModeDescriptionStation = document.getElementById("ip-mode-description-station");
-  const ipModeButtonsStation = document.querySelectorAll('input[name="ip-mode-station"]') as NodeListOf<HTMLInputElement>;
-  const staticIpInputStation = document.getElementById("static-ip-station") as HTMLInputElement;
-  const subnetMaskInputStation = document.getElementById("subnet-mask-station") as HTMLInputElement;
-  const gatewayInputStation = document.getElementById("gateway-station") as HTMLInputElement;
-  const staticIpErrorStation = document.getElementById("static-ip-station-error-page");
-  const subnetMaskErrorStation = document.getElementById("subnet-mask-station-error-page");
-  const gatewayErrorStation = document.getElementById("gateway-station-error-page");
-  const saveStaticIpBtnStation = document.getElementById("save-static-ip-station-btn") as HTMLButtonElement;
-  const staticIpConfirmModal = document.getElementById("static-ip-confirm-modal") as HTMLDialogElement;
-  const staticIpSummaryMode = document.getElementById("static-ip-summary-mode");
-  const staticIpSummaryIpRow = document.getElementById("static-ip-summary-ip-row");
-  const staticIpSummaryNetmaskRow = document.getElementById("static-ip-summary-netmask-row");
-  const staticIpSummaryGatewayRow = document.getElementById("static-ip-summary-gateway-row");
-  const staticIpSummaryIp = document.getElementById("static-ip-summary-ip");
-  const staticIpSummaryNetmask = document.getElementById("static-ip-summary-netmask");
-  const staticIpSummaryGateway = document.getElementById("static-ip-summary-gateway");
-  const cancelStaticIpBtn = document.getElementById("cancel-static-ip-btn");
-  const confirmStaticIpBtn = document.getElementById("confirm-static-ip-btn") as HTMLButtonElement | null;
-
-  // WiFi stat card elements
-  const wifiCard = document.getElementById("wifi-card") as HTMLDivElement | null;
-  const ssidCardDisplay = document.getElementById("ssid-card-display") as HTMLDivElement | null;
-  const passwordCardDisplay = document.getElementById("password-card-display") as HTMLSpanElement | null;
-  const passwordDesc = document.getElementById("password-desc") as HTMLDivElement | null;
-  const signalDisplay = document.getElementById("signal-display") as HTMLDivElement | null;
-  const signalDesc = document.getElementById("signal-desc") as HTMLDivElement | null;
-
-  const togglePasswordBtn = document.getElementById("toggle-password-visibility") as HTMLButtonElement | null;
-  const eyeIconOpen = document.getElementById("eye-icon-open") as HTMLSpanElement | null;
-  const eyeIconClosed = document.getElementById("eye-icon-closed") as HTMLSpanElement | null;
-  let isPasswordVisible = false;
-
-  function updatePasswordDisplay(password: string) {
-    if (!passwordCardDisplay) return;
-    passwordCardDisplay.dataset.password = password;
-    passwordCardDisplay.textContent = isPasswordVisible ? password || "-" : password ? "•".repeat(Math.min(password.length, 12)) : "-";
-  }
-
-  if (togglePasswordBtn && passwordCardDisplay && eyeIconOpen && eyeIconClosed) {
-    togglePasswordBtn.addEventListener("click", () => {
-      isPasswordVisible = !isPasswordVisible;
-      const pw = passwordCardDisplay.dataset.password || "";
-      passwordCardDisplay.textContent = isPasswordVisible ? pw || "" : pw ? "•".repeat(Math.min(pw.length, 12)) : "";
-      eyeIconOpen.classList.toggle("hidden", isPasswordVisible);
-      eyeIconClosed.classList.toggle("hidden", !isPasswordVisible);
-    });
-  }
-
-  type StaticIpValues = {
-    ip: string;
-    netmask: string;
-    gateway: string;
-  };
-
-  let currentIpAssignmentMode: "dhcp" | "static" = "dhcp";
-  let pendingStaticIpConfig: { mode: "dhcp" | "static"; values?: StaticIpValues } | null = null;
-  // Tracks what is actually applied on the device — only show confirm modal when reverting a real static config
-  let appliedIpModeEth: "dhcp" | "static" = "dhcp";
-
-  // Station mode static IP state
-  let currentIpAssignmentModeStation: "dhcp" | "static" = "dhcp";
-  let pendingStaticIpConfigStation: { mode: "dhcp" | "static"; values?: StaticIpValues } | null = null;
-  let appliedIpModeSta: "dhcp" | "static" = "dhcp";
-
-  // Tracks which interface opened the confirm modal via DHCP radio click so we can
-  // revert the radio if the user cancels.
-  let dhcpRevertPending: "eth" | "sta" | null = null;
-
-  // Live status display elements (updated by $network_status_display)
-  const ethIpDisplay = document.getElementById("eth-ip-display");
-  const ethGatewayDisplay = document.getElementById("eth-gateway-display");
-  const ethNetmaskDisplay = document.getElementById("eth-netmask-display");
-  const ethMacDisplay = document.getElementById("eth-mac-display");
-  const staIpDisplay = document.getElementById("sta-ip-display");
-  const staGatewayDisplay = document.getElementById("sta-gateway-display");
-  const staNetmaskDisplay = document.getElementById("sta-netmask-display");
-  const staMacDisplay = document.getElementById("sta-mac-display");
-
-  const wifiModeSection = document.getElementById("wifi-mode-section");
-  const wifiNoModeBanner = document.getElementById("wifi-no-mode-banner");
-  const wifiActiveControls = document.getElementById("wifi-active-controls");
-
-  function updateWifiModeState(mode: ConnectionMode) {
-    const wifiVisible = wifiSettingsContainer && !wifiSettingsContainer.classList.contains("hidden");
-    const hasModeActive =
-      mode === ConnectionMode.CONNECTION_MODE_ETH_DHCP_APSTA ||
-      mode === ConnectionMode.CONNECTION_MODE_ETH_STATIC_APSTA ||
-      mode === ConnectionMode.CONNECTION_MODE_ETH_DHCP_STA_DHCP ||
-      mode === ConnectionMode.CONNECTION_MODE_ETH_DHCP_STA_STATIC ||
-      mode === ConnectionMode.CONNECTION_MODE_ETH_STATIC_STA_DHCP ||
-      mode === ConnectionMode.CONNECTION_MODE_ETH_STATIC_STA_STATIC;
-    wifiNoModeBanner?.classList.toggle("hidden", !wifiVisible || hasModeActive);
-    wifiActiveControls?.classList.toggle("opacity-40", !hasModeActive);
-    wifiActiveControls?.classList.toggle("pointer-events-none", !hasModeActive);
-  }
-
-  function showWifiSettings(isEnabled: boolean) {
-    if (wifiToggle) wifiToggle.checked = isEnabled;
-    if (isEnabled) {
-      wifiSettingsContainer?.classList.remove("hidden");
-      wifiModeSection?.classList.remove("hidden");
-      if (wifiStatusText) wifiStatusText.textContent = "Enabled";
-      updateWifiModeState($current_network_configuration.get().Connection_Mode);
-    } else {
-      wifiSettingsContainer?.classList.add("hidden");
-      wifiModeSection?.classList.add("hidden");
-      if (wifiStatusText) wifiStatusText.textContent = "Disabled";
-      updateSignalIcon(null, false);
-    }
-  }
-
-  let powerSliderDragging = false;
-
-  $current_network_configuration.subscribe((config) => {
-    let activeMode = config.Connection_Mode;
-    const activeModeDisplay = document.getElementById("active-mode-display");
-    const hostnameDisplay = document.getElementById("hostname-display");
-
-    if (activeModeDisplay) activeModeDisplay.textContent = getModeString(activeMode);
-    if (hostnameDisplay) hostnameDisplay.textContent = config.MDNS_Hostname || "-";
-
-    // Initialize hostname input with current value
-    if (hostnameInput) {
-      const currentValue = hostnameInput.value?.trim() || "";
-      const configHostname = (config.MDNS_Hostname || "").trim();
-      if (currentValue.length === 0 && configHostname.length > 0) {
-        hostnameInput.value = configHostname;
-
-        validateHostnameInput(false);
-      }
-    }
-    if (hostnamePreviewCardHint) hostnamePreviewCardHint.textContent = config.MDNS_Hostname || "hostname";
-    if (hostnameDescLink) hostnameDescLink.href = `http://${config.MDNS_Hostname || "hostname"}.local`;
-    if (hostnamePreviewHint) hostnamePreviewHint.textContent = config.MDNS_Hostname || "hostname";
-
-    if (staticIpInput) staticIpInput.value = config.Static_Cfg_IP_Address_Ethernet || "";
-    if (subnetMaskInput) subnetMaskInput.value = config.Static_Cfg_Netmask_Ethernet || "";
-    if (gatewayInput) gatewayInput.value = config.Static_Cfg_Gateway_IP_Address_Ethernet || "";
-    appliedIpModeEth = config.DHCP_Mode_Ethernet ? "dhcp" : "static";
-    setIpAssignmentMode(appliedIpModeEth);
-
-    const _isStaticSta =
-      config.Connection_Mode === ConnectionMode.CONNECTION_MODE_ETH_DHCP_STA_STATIC ||
-      config.Connection_Mode === ConnectionMode.CONNECTION_MODE_ETH_STATIC_STA_STATIC;
-    if (_isStaticSta) {
-      if (staticIpInputStation) staticIpInputStation.value = config.Static_Cfg_IP_Address_Station || "";
-      if (subnetMaskInputStation) subnetMaskInputStation.value = config.Static_Cfg_Netmask_Station || "";
-      if (gatewayInputStation) gatewayInputStation.value = config.Static_Cfg_Gateway_IP_Address_Station || "";
-    } else {
-      if (staticIpInputStation) staticIpInputStation.value = "";
-      if (subnetMaskInputStation) subnetMaskInputStation.value = "";
-      if (gatewayInputStation) gatewayInputStation.value = "";
-    }
-    appliedIpModeSta = config.DHCP_Mode_Station ? "dhcp" : "static";
-    setIpAssignmentModeStation(appliedIpModeSta);
-
-    const _isApsta =
-      config.Connection_Mode === ConnectionMode.CONNECTION_MODE_ETH_DHCP_APSTA ||
-      config.Connection_Mode === ConnectionMode.CONNECTION_MODE_ETH_STATIC_APSTA;
-    const _isSta =
-      config.Connection_Mode === ConnectionMode.CONNECTION_MODE_ETH_DHCP_STA_DHCP ||
-      config.Connection_Mode === ConnectionMode.CONNECTION_MODE_ETH_DHCP_STA_STATIC ||
-      config.Connection_Mode === ConnectionMode.CONNECTION_MODE_ETH_STATIC_STA_DHCP ||
-      config.Connection_Mode === ConnectionMode.CONNECTION_MODE_ETH_STATIC_STA_STATIC;
-    const _isNoWifi =
-      config.Connection_Mode === ConnectionMode.CONNECTION_MODE_ETH_DHCP_NO_WIFI ||
-      config.Connection_Mode === ConnectionMode.CONNECTION_MODE_ETH_STATIC_NO_WIFI;
-
-    const wifiStationCard = document.getElementById("wifi-station-card");
-    wifiStationCard?.classList.toggle("hidden", !_isSta);
-
-    // WiFi stat card: always visible, content reflects current state
-    const wifiCardTitle = document.getElementById("wifi-card-title");
-    if (wifiCardTitle) wifiCardTitle.textContent = _isApsta ? "WiFi Access Point" : "WiFi";
-    if (ssidCardDisplay) {
-      ssidCardDisplay.textContent = _isSta ? config.SSID_Station || "-" : _isApsta ? config.SSID_AP || "-" : "-";
-    }
-    const pwDisplayGroup = document.getElementById("pw-display-group");
-    const openNetworkLabel = document.getElementById("open-network-label");
-    const rssiRow = document.getElementById("rssi-row");
-    if (_isApsta) {
-      const hasApPassword = !!config.Password_AP;
-      if (hasApPassword) {
-        isPasswordVisible = true;
-        if (eyeIconOpen) eyeIconOpen.classList.add("hidden");
-        if (eyeIconClosed) eyeIconClosed.classList.remove("hidden");
-        updatePasswordDisplay(config.Password_AP);
-        pwDisplayGroup?.classList.remove("hidden");
-        openNetworkLabel?.classList.add("hidden");
-      } else {
-        pwDisplayGroup?.classList.add("hidden");
-        openNetworkLabel?.classList.remove("hidden");
-      }
-      if (passwordDesc) {
-        passwordDesc.classList.remove("hidden");
-        passwordDesc.classList.add("flex");
-      }
-      rssiRow?.classList.add("hidden");
-    } else if (_isSta) {
-      const hasStaPassword = !!config.Password_Station;
-      if (hasStaPassword) {
-        isPasswordVisible = true;
-        if (eyeIconOpen) eyeIconOpen.classList.add("hidden");
-        if (eyeIconClosed) eyeIconClosed.classList.remove("hidden");
-        updatePasswordDisplay(config.Password_Station);
-        pwDisplayGroup?.classList.remove("hidden");
-        openNetworkLabel?.classList.add("hidden");
-      } else {
-        pwDisplayGroup?.classList.add("hidden");
-        openNetworkLabel?.classList.remove("hidden");
-      }
-      if (passwordDesc) {
-        passwordDesc.classList.remove("hidden");
-        passwordDesc.classList.add("flex");
-      }
-      rssiRow?.classList.remove("hidden");
-    } else {
-      if (passwordDesc) {
-        passwordDesc.classList.add("hidden");
-        passwordDesc.classList.remove("flex");
-      }
-      rssiRow?.classList.remove("hidden");
-    }
-
-    if (_isApsta) {
-      if (apModeIpAlertPlaceholder) apModeIpAlertPlaceholder.classList.remove("hidden");
-      if (ipAssignmentButtonsStation) ipAssignmentButtonsStation.classList.add("hidden");
-      if (ipModeDescriptionStation) ipModeDescriptionStation.classList.add("hidden");
-      staticIpContainerStation?.classList.add("hidden");
-      saveStaticIpBtnStation?.classList.add("hidden");
-      showWifiSettings(true);
-    } else if (_isSta) {
-      if (apModeIpAlertPlaceholder) apModeIpAlertPlaceholder.classList.add("hidden");
-      if (ipAssignmentButtonsStation) ipAssignmentButtonsStation.classList.remove("hidden");
-      if (ipModeDescriptionStation) ipModeDescriptionStation.classList.remove("hidden");
-      showWifiSettings(true);
-    }
-    if (_isNoWifi) {
-      if (apModeIpAlertPlaceholder) apModeIpAlertPlaceholder.classList.add("hidden");
-      showWifiSettings(false);
-    } else if (config.Connection_Mode === ConnectionMode.CONNECTION_MODE_UNKNOWN) {
-      showWifiSettings(false);
-    }
-    updateWifiModeState(config.Connection_Mode);
-
-    // Initialize antenna selection radios from config
-    const _antennaRadios = document.querySelectorAll('input[name="antenna-selection"]') as NodeListOf<HTMLInputElement>;
-    const _selectionValue = config.Antenna_Selection === AntennaSelection.ANTENNA_SELECTION_EXTERNAL ? "external" : "internal";
-    _antennaRadios.forEach((r) => { r.checked = r.value === _selectionValue; });
-
-    // Initialize power slider from config — skip if user is currently dragging
-    if (!powerSliderDragging) {
-      const _powerSlider = document.getElementById("antenna-power") as HTMLInputElement;
-      const _powerDisplay = document.getElementById("power-value-display");
-      if (_powerSlider && config.Antenna_Power >= 8 && config.Antenna_Power <= 84) {
-        const _dBm = config.Antenna_Power / 4;
-        _powerSlider.value = String(_dBm);
-        if (_powerDisplay) {
-          const _mW = Math.pow(10, _dBm / 10);
-          _powerDisplay.textContent = `${_dBm.toFixed(2)} dBm (${_mW.toFixed(2)} mW)`;
-        }
-      }
-    }
-  });
-
-  const wifiDisableModal = document.getElementById("wifi-disable-warning-modal") as HTMLDialogElement;
-
-  wifiDisableModal?.addEventListener("wifi-disable-confirmed", () => {
-    showWifiSettings(false);
-    const baseConfig = $current_network_configuration.get();
-    const isStaticEth =
-      baseConfig.Connection_Mode === ConnectionMode.CONNECTION_MODE_ETH_STATIC_NO_WIFI ||
-      baseConfig.Connection_Mode === ConnectionMode.CONNECTION_MODE_ETH_STATIC_APSTA ||
-      baseConfig.Connection_Mode === ConnectionMode.CONNECTION_MODE_ETH_STATIC_STA_DHCP ||
-      baseConfig.Connection_Mode === ConnectionMode.CONNECTION_MODE_ETH_STATIC_STA_STATIC;
-    send_new_network_configuration_to_alpha({
-      ...baseConfig,
-      Connection_Mode: isStaticEth ? ConnectionMode.CONNECTION_MODE_ETH_STATIC_NO_WIFI : ConnectionMode.CONNECTION_MODE_ETH_DHCP_NO_WIFI,
-      WiFi_Enabled: false,
-    });
-  });
-
-  wifiToggle?.addEventListener("change", (e: Event) => {
-    const isEnabled = (e.target as HTMLInputElement).checked;
-
-    if (!isEnabled) {
-      wifiDisableModal?.showModal();
-      wifiToggle.checked = true; // revert until confirmed
-      return;
-    }
-
-    showWifiSettings(isEnabled);
-  });
-
-  $network_status_display.subscribe((status) => {
-    // Ethernet card
-    if (ethIpDisplay) ethIpDisplay.textContent = status.IP_Address_Ethernet || "-";
-    if (ethGatewayDisplay) ethGatewayDisplay.textContent = status.Gateway_IP_Address_Ethernet || "-";
-    if (ethNetmaskDisplay) ethNetmaskDisplay.textContent = status.Netmask_Ethernet || "-";
-    if (ethMacDisplay) ethMacDisplay.textContent = status.MAC_Address_Ethernet || "-";
-
-    // WiFi Station card
-    const wifiIpCardTitle = document.getElementById("wifi-ip-card-title");
-    const isApsta =
-      status.Connection_Mode === ConnectionMode.CONNECTION_MODE_ETH_DHCP_APSTA ||
-      status.Connection_Mode === ConnectionMode.CONNECTION_MODE_ETH_STATIC_APSTA;
-    const isSta =
-      status.Connection_Mode === ConnectionMode.CONNECTION_MODE_ETH_DHCP_STA_DHCP ||
-      status.Connection_Mode === ConnectionMode.CONNECTION_MODE_ETH_DHCP_STA_STATIC ||
-      status.Connection_Mode === ConnectionMode.CONNECTION_MODE_ETH_STATIC_STA_DHCP ||
-      status.Connection_Mode === ConnectionMode.CONNECTION_MODE_ETH_STATIC_STA_STATIC;
-    if (wifiIpCardTitle) wifiIpCardTitle.textContent = isApsta ? "Access Point" : "WiFi Station";
-    if (staIpDisplay) staIpDisplay.textContent = status.IP_Address_Station || "-";
-    if (staGatewayDisplay) staGatewayDisplay.textContent = status.Gateway_IP_Address_Station || "-";
-    if (staNetmaskDisplay) staNetmaskDisplay.textContent = status.Netmask_Station || "-";
-    if (staMacDisplay) staMacDisplay.textContent = status.MAC_Address_WiFi || "-";
-
-    // Hostname display
-    const hostnameDisplay = document.getElementById("hostname-display");
-    if (hostnameDisplay && status.MDNS_Hostname) hostnameDisplay.textContent = status.MDNS_Hostname;
-    if (hostnamePreviewCardHint && status.MDNS_Hostname) hostnamePreviewCardHint.textContent = status.MDNS_Hostname;
-    if (hostnameDescLink && status.MDNS_Hostname) hostnameDescLink.href = `http://${status.MDNS_Hostname}.local`;
-    if (hostnamePreviewHint && status.MDNS_Hostname) hostnamePreviewHint.textContent = status.MDNS_Hostname;
-
-    // Connected clients
-    const clientsDisplay = document.getElementById("clients-display");
-    const clientsDesc = document.getElementById("clients-desc");
-    if (clientsDisplay) clientsDisplay.textContent = status.ws_connected_clients.toString();
-    if (clientsDesc) {
-      const n = status.ws_connected_clients;
-      clientsDesc.textContent = n === 0 ? "No clients" : n === 1 ? "1 client connected" : `${n} clients connected`;
-    }
-
-    // Signal strength / RSSI — hidden entirely for AP-only mode (no STA)
-    const rssiRowEl = document.getElementById("rssi-row");
-    const noWifi =
-      status.Connection_Mode === ConnectionMode.CONNECTION_MODE_ETH_DHCP_NO_WIFI ||
-      status.Connection_Mode === ConnectionMode.CONNECTION_MODE_ETH_STATIC_NO_WIFI ||
-      status.Connection_Mode === ConnectionMode.CONNECTION_MODE_UNKNOWN;
-    rssiRowEl?.classList.toggle("hidden", isApsta && !isSta);
-    if (isApsta && !isSta) {
-      updateSignalIcon(-30, true);
-      if (signalDesc) signalDesc.textContent = "";
-    } else if (status.rssi !== null) {
-      if (signalDisplay) signalDisplay.textContent = `${status.rssi} dBm`;
-      if (signalDesc) {
-        const r = status.rssi;
-        signalDesc.textContent = r >= -50 ? "Excellent" : r >= -60 ? "Good" : r >= -70 ? "Fair" : "Weak";
-      }
-      updateSignalIcon(status.rssi, true);
-    } else {
-      if (signalDisplay) signalDisplay.textContent = "-";
-      if (signalDesc) {
-        signalDesc.textContent = isSta ? "Not connected" : "WiFi disabled";
-      }
-      updateSignalIcon(null, !noWifi);
-    }
-  });
-
-  function updateSignalIcon(rssi: number | null, wifiActive: boolean) {
-    const signalIcon = document.getElementById("signal-icon");
-    if (!signalIcon) return;
-
-    const svgAttrs = `xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"`;
-    const pNone = `<path stroke="none" d="M0 0h24v24H0z" fill="none"/>`;
-    const pDot = `<path d="M12 18l.01 0"/>`;
-    const pArc1 = `<path d="M9.172 15.172a4 4 0 0 1 5.656 0"/>`;
-    const pArc2 = `<path d="M6.343 12.343a8 8 0 0 1 11.314 0"/>`;
-    const pArc3 = `<path d="M3.515 9.515c4.686 -4.687 12.284 -4.687 17 0"/>`;
-
-    if (!wifiActive) {
-      signalIcon.innerHTML = `<svg ${svgAttrs}>${pNone}${pDot}
-        <path d="M9.172 15.172a4 4 0 0 1 5.656 0"/>
-        <path d="M6.343 12.343a7.963 7.963 0 0 1 3.864 -2.14m4.163 .155a7.965 7.965 0 0 1 3.287 2"/>
-        <path d="M3.515 9.515a12 12 0 0 1 3.544 -2.455m3.101 -.92a12 12 0 0 1 10.325 3.374"/>
-        <path d="M3 3l18 18"/></svg>`;
-      return;
-    }
-
-    const bars = rssi === null ? 0 : rssi >= -50 ? 4 : rssi >= -60 ? 3 : rssi >= -70 ? 2 : 1;
-    const fg = bars >= 4 ? pDot + pArc1 + pArc2 + pArc3 : bars === 3 ? pDot + pArc1 + pArc2 : bars === 2 ? pDot + pArc1 : pDot;
-    const bg = pDot + pArc1 + pArc2 + pArc3;
-    signalIcon.innerHTML =
-      `<div class="relative" style="width:28px;height:28px">` +
-      `<svg ${svgAttrs} class="absolute inset-0 opacity-20">${pNone}${bg}</svg>` +
-      `<svg ${svgAttrs} class="absolute inset-0">${pNone}${fg}</svg>` +
-      `</div>`;
-  }
-
-  // Network config error modal
-  const networkErrorModal = document.getElementById("network-config-error-modal") as HTMLDialogElement | null;
-  const networkErrorReasonText = document.getElementById("network-error-reason-text");
-  const networkErrorSsidRow = document.getElementById("network-error-ssid-row");
-  const networkErrorSsid = document.getElementById("network-error-ssid");
-  const networkErrorReason = document.getElementById("network-error-reason");
-
-  function reasonToHuman(reason: string): string {
-    switch (reason) {
-      case "max_retries_exceeded":
-        return "Could not connect to WiFi using the provided configuration. The access point did not accept the connection after multiple attempts.";
-      case "auth_failed":
-        return "Could not connect to WiFi using the provided configuration. Authentication was rejected — check your WiFi password.";
-      default:
-        return reason;
-    }
-  }
-
-  $network_config_error.subscribe((err) => {
-    if (!err || !networkErrorModal) return;
-    const hasSsid = !!err.failed_ssid;
-    if (networkErrorSsidRow) networkErrorSsidRow.classList.toggle("hidden", !hasSsid);
-    if (networkErrorSsid) networkErrorSsid.textContent = err.failed_ssid || "";
-    if (networkErrorReason) networkErrorReason.textContent = err.reason;
-    if (networkErrorReasonText) networkErrorReasonText.textContent = reasonToHuman(err.reason);
-    networkErrorModal.showModal();
-  });
-
-  const antennaRadios = document.querySelectorAll('input[name="antenna-selection"]') as NodeListOf<HTMLInputElement>;
-
-  function setAntennaSelection(value: "internal" | "external") {
-    antennaRadios.forEach((radio) => {
-      radio.checked = radio.value === value;
-    });
-  }
-
-  antennaRadios.forEach((radio) => {
-    radio.addEventListener("change", () => {
-      setAntennaSelection(radio.value as "internal" | "external");
-      const sel =
-        radio.value === "external"
-          ? AntennaSelection.ANTENNA_SELECTION_EXTERNAL
-          : AntennaSelection.ANTENNA_SELECTION_INTERNAL;
-      set_antenna_selection(sel);
-    });
-  });
-
-  const powerSlider = document.getElementById("antenna-power") as HTMLInputElement;
-  const powerValueDisplay = document.getElementById("power-value-display");
-
-  function dbmToMilliwatts(dbm: number): number {
-    return Math.pow(10, dbm / 10);
-  }
-
-  powerSlider?.addEventListener("pointerdown", () => { powerSliderDragging = true; });
-  powerSlider?.addEventListener("pointerup", () => { powerSliderDragging = false; });
-
-  powerSlider?.addEventListener("input", (e) => {
-    const value = parseFloat((e.target as HTMLInputElement).value);
-    const milliwatts = dbmToMilliwatts(value);
-    if (powerValueDisplay) {
-      powerValueDisplay.textContent = `${value.toFixed(2)} dBm (${milliwatts.toFixed(2)} mW)`;
-    }
-  });
-
-  powerSlider?.addEventListener("change", (e) => {
-    const value = parseFloat((e.target as HTMLInputElement).value);
-    set_antenna_power(Math.round(value * 4));
-  });
-
-  function setHostnameInputState(state: "idle" | "error" | "success", message?: string) {
-    if (!hostnameInputField) return;
-    hostnameInputField.classList.remove("input-error");
-    if (state === "error") {
-      hostnameInputField.classList.add("input-error");
-    }
-
-    if (hostnameErrorMsg) {
-      if (state === "error" && message) {
-        hostnameErrorMsg.textContent = message;
-        hostnameErrorMsg.classList.remove("hidden");
-      } else {
-        hostnameErrorMsg.classList.add("hidden");
-      }
-    }
-  }
-
-  function validateHostnameInput(showEmptyError: boolean = false) {
-    if (!hostnameInput) return false;
-    const trimmed = (hostnameInput.value || "").trim();
-    if (trimmed.length === 0) {
-      if (showEmptyError) {
-        setHostnameInputState("error", "Hostname is required.");
-      } else {
-        setHostnameInputState("idle");
-      }
-      return false;
-    }
-    if (!HOSTNAME_REGEX.test(trimmed)) {
-      let msg: string;
-      if (trimmed.startsWith("-")) {
-        msg = "Hostname cannot start with a hyphen.";
-      } else if (trimmed.endsWith("-")) {
-        msg = "Hostname cannot end with a hyphen.";
-      } else if (/[A-Z]/.test(trimmed)) {
-        msg = "Hostname must be lowercase — only a–z, 0–9, and hyphens.";
-      } else {
-        msg = "Only lowercase letters (a–z), digits, and hyphens (-) are allowed.";
-      }
-      setHostnameInputState("error", msg);
-      return false;
-    }
-    setHostnameInputState("success");
-    return true;
-  }
-
-  // Subscription writes cleaned value back into the DOM input
-  $hostname_input_field.subscribe((val) => {
-    if (hostnameInput && hostnameInput.value !== val) {
-      hostnameInput.value = val;
-    }
-  });
-
-  // Initialize store with current input value (fires subscription immediately)
-  if (hostnameInput) {
-    $hostname_input_field.set(normalizeHostnameValue(hostnameInput.value || ""));
-  }
-
-  hostnameInput?.addEventListener("input", () => {
-    if (!hostnameInput) return;
-    const raw = hostnameInput.value;
-    let cleaned = "";
-    let hadInvalid = false;
-    for (const ch of raw) {
-      if (/[A-Z]/.test(ch)) {
-        cleaned += ch.toLowerCase();
-        hadInvalid = true;
-      } else if (/[a-z0-9-]/.test(ch)) {
-        cleaned += ch;
-      } else {
-        hadInvalid = true;
-      }
-    }
-    if (cleaned.length > MAX_HOSTNAME_LENGTH) {
-      cleaned = cleaned.slice(0, MAX_HOSTNAME_LENGTH);
-      hadInvalid = true;
-    }
-    $hostname_input_field.set(cleaned);
-    if (hadInvalid) {
-      setHostnameInputState("error", "Only lowercase letters (a–z), digits, and hyphens (-) are allowed.");
-    } else {
-      validateHostnameInput(false);
-    }
-  });
-
-  hostnameInput?.addEventListener("blur", () => {
-    if (!hostnameInput) return;
-    $hostname_input_field.set(normalizeHostnameValue(hostnameInput.value || ""));
-    validateHostnameInput(true);
-  });
-
-  // Hostname-changed redirect modal
-  let _hostnameRedirectTimer: ReturnType<typeof setInterval> | null = null;
-
-  function showHostnameChangedModal(newHostname: string) {
-    const modal = document.getElementById("hostname-changed-modal") as HTMLDialogElement;
-    const link = document.getElementById("hostname-changed-link") as HTMLAnchorElement;
-    const nameSpan = document.getElementById("hostname-changed-new-name");
-    const countdown = document.getElementById("hostname-redirect-countdown");
-    const progress = document.getElementById("hostname-redirect-progress") as HTMLProgressElement;
-    const goNowBtn = document.getElementById("hostname-redirect-now-btn") as HTMLAnchorElement;
-
-    const newUrl = `http://${newHostname}.local`;
-    if (link) {
-      link.href = newUrl;
-    }
-    if (goNowBtn) {
-      goNowBtn.href = newUrl;
-    }
-    if (nameSpan) {
-      nameSpan.textContent = newHostname;
-    }
-
-    let remaining = 10;
-    if (countdown) countdown.textContent = String(remaining);
-    if (progress) progress.value = 100;
-
-    if (_hostnameRedirectTimer) clearInterval(_hostnameRedirectTimer);
-
-    _hostnameRedirectTimer = setInterval(() => {
-      remaining--;
-      if (countdown) countdown.textContent = String(remaining);
-      if (progress) progress.value = (remaining / 10) * 100;
-      if (remaining <= 0) {
-        clearInterval(_hostnameRedirectTimer!);
-        _hostnameRedirectTimer = null;
-        window.location.href = newUrl;
-      }
-    }, 1000);
-
-    modal.showModal();
-  }
-
-  applyHostnameBtn?.addEventListener("click", () => {
-    if (!hostnameInput) return;
-
-    hostnameInput.value = normalizeHostnameValue(hostnameInput.value || "");
-    if (!validateHostnameInput(true)) {
-      return;
-    }
-
-    const hostnameValue = (hostnameInput.value || "").trim();
-
-    if (set_hostname(hostnameValue)) {
-      hostnameInput.value = hostnameValue;
-      setHostnameInputState("success");
-      showHostnameChangedModal(hostnameValue);
-    } else {
-      setHostnameInputState("error");
-    }
-  });
-
-  const stationBtn = document.getElementById("mode-station");
-  const apBtn = document.getElementById("mode-ap");
-  const stationModal = document.getElementById("station-config-modal") as HTMLDialogElement;
-  const apModal = document.getElementById("ap-config-modal") as HTMLDialogElement;
-
-  stationBtn?.addEventListener("click", () => {
-    stationModal?.showModal();
-  });
-
-  apBtn?.addEventListener("click", () => {
-    apModal?.showModal();
-  });
-
-  staticIpInput?.addEventListener("input", () => clearFieldError(staticIpInput, staticIpError));
-  subnetMaskInput?.addEventListener("input", () => clearFieldError(subnetMaskInput, subnetMaskError));
-  gatewayInput?.addEventListener("input", () => clearFieldError(gatewayInput, gatewayError));
-
-  saveStaticIpBtn?.addEventListener("click", () => {
-    if (!staticIpConfirmModal) return;
-
-    if (currentIpAssignmentMode === "static") {
-      const validation = validateStaticIpForm();
-      if (!validation.valid) {
-        return;
-      }
-      pendingStaticIpConfig = { mode: "static", values: validation.values };
-    } else {
-      pendingStaticIpConfig = { mode: "dhcp" };
-      clearStaticIpErrors();
-    }
-
-    if (pendingStaticIpConfig) {
-      updateStaticIpSummary(pendingStaticIpConfig);
-      staticIpConfirmModal.showModal();
-    }
-  });
-
-  cancelStaticIpBtn?.addEventListener("click", () => {
-    pendingStaticIpConfig = null;
-    pendingStaticIpConfigStation = null;
-  });
-
-  staticIpConfirmModal?.addEventListener("close", () => {
-    // If the modal was opened by a DHCP radio click but the user cancelled,
-    // revert the radio button so the UI matches the actual (unchanged) device config.
-    if (dhcpRevertPending === "eth") {
-      setIpAssignmentMode("static");
-    } else if (dhcpRevertPending === "sta") {
-      setIpAssignmentModeStation("static");
-    }
-    dhcpRevertPending = null;
-    pendingStaticIpConfig = null;
-    pendingStaticIpConfigStation = null;
-  });
-
-  confirmStaticIpBtn?.addEventListener("click", () => {
-    const configToApply = pendingStaticIpConfig || pendingStaticIpConfigStation;
-    if (!configToApply) return;
-
-    const baseConfig = $current_network_configuration.get();
-    const updatedConfig: NetworkConfigNVS = {
-      ...baseConfig,
-    };
-
-    // Determine which mode we're configuring based on which config is pending
-    if (pendingStaticIpConfig) {
-      if (configToApply.mode === "dhcp") {
-        updatedConfig.DHCP_Mode_Ethernet = true;
-        updatedConfig.Static_Cfg_IP_Address_Ethernet = "";
-        updatedConfig.Static_Cfg_Netmask_Ethernet = "";
-        updatedConfig.Static_Cfg_Gateway_IP_Address_Ethernet = "";
-        // Switch to DHCP-ETH variant of current mode
-        if (updatedConfig.Connection_Mode === ConnectionMode.CONNECTION_MODE_ETH_STATIC_NO_WIFI)
-          updatedConfig.Connection_Mode = ConnectionMode.CONNECTION_MODE_ETH_DHCP_NO_WIFI;
-        else if (updatedConfig.Connection_Mode === ConnectionMode.CONNECTION_MODE_ETH_STATIC_APSTA)
-          updatedConfig.Connection_Mode = ConnectionMode.CONNECTION_MODE_ETH_DHCP_APSTA;
-        else if (updatedConfig.Connection_Mode === ConnectionMode.CONNECTION_MODE_ETH_STATIC_STA_DHCP)
-          updatedConfig.Connection_Mode = ConnectionMode.CONNECTION_MODE_ETH_DHCP_STA_DHCP;
-        else if (updatedConfig.Connection_Mode === ConnectionMode.CONNECTION_MODE_ETH_STATIC_STA_STATIC)
-          updatedConfig.Connection_Mode = ConnectionMode.CONNECTION_MODE_ETH_DHCP_STA_STATIC;
-      } else if (configToApply.values) {
-        updatedConfig.DHCP_Mode_Ethernet = false;
-        updatedConfig.Static_Cfg_IP_Address_Ethernet = configToApply.values.ip;
-        updatedConfig.Static_Cfg_Netmask_Ethernet = configToApply.values.netmask;
-        updatedConfig.Static_Cfg_Gateway_IP_Address_Ethernet = configToApply.values.gateway;
-        // Switch to static-ETH variant of current mode
-        if (updatedConfig.Connection_Mode === ConnectionMode.CONNECTION_MODE_ETH_DHCP_NO_WIFI)
-          updatedConfig.Connection_Mode = ConnectionMode.CONNECTION_MODE_ETH_STATIC_NO_WIFI;
-        else if (updatedConfig.Connection_Mode === ConnectionMode.CONNECTION_MODE_ETH_DHCP_APSTA)
-          updatedConfig.Connection_Mode = ConnectionMode.CONNECTION_MODE_ETH_STATIC_APSTA;
-        else if (updatedConfig.Connection_Mode === ConnectionMode.CONNECTION_MODE_ETH_DHCP_STA_DHCP)
-          updatedConfig.Connection_Mode = ConnectionMode.CONNECTION_MODE_ETH_STATIC_STA_DHCP;
-        else if (updatedConfig.Connection_Mode === ConnectionMode.CONNECTION_MODE_ETH_DHCP_STA_STATIC)
-          updatedConfig.Connection_Mode = ConnectionMode.CONNECTION_MODE_ETH_STATIC_STA_STATIC;
-      }
-    } else if (pendingStaticIpConfigStation) {
-      if (configToApply.mode === "dhcp") {
-        updatedConfig.DHCP_Mode_Station = true;
-        updatedConfig.Static_Cfg_IP_Address_Station = "";
-        updatedConfig.Static_Cfg_Netmask_Station = "";
-        updatedConfig.Static_Cfg_Gateway_IP_Address_Station = "";
-        // Switch to STA_DHCP variant of current mode
-        if (updatedConfig.Connection_Mode === ConnectionMode.CONNECTION_MODE_ETH_DHCP_STA_STATIC)
-          updatedConfig.Connection_Mode = ConnectionMode.CONNECTION_MODE_ETH_DHCP_STA_DHCP;
-        else if (updatedConfig.Connection_Mode === ConnectionMode.CONNECTION_MODE_ETH_STATIC_STA_STATIC)
-          updatedConfig.Connection_Mode = ConnectionMode.CONNECTION_MODE_ETH_STATIC_STA_DHCP;
-      } else if (configToApply.values) {
-        updatedConfig.DHCP_Mode_Station = false;
-        updatedConfig.Static_Cfg_IP_Address_Station = configToApply.values.ip;
-        updatedConfig.Static_Cfg_Netmask_Station = configToApply.values.netmask;
-        updatedConfig.Static_Cfg_Gateway_IP_Address_Station = configToApply.values.gateway;
-        // Switch to STA_STATIC variant of current mode
-        if (updatedConfig.Connection_Mode === ConnectionMode.CONNECTION_MODE_ETH_DHCP_STA_DHCP)
-          updatedConfig.Connection_Mode = ConnectionMode.CONNECTION_MODE_ETH_DHCP_STA_STATIC;
-        else if (updatedConfig.Connection_Mode === ConnectionMode.CONNECTION_MODE_ETH_STATIC_STA_DHCP)
-          updatedConfig.Connection_Mode = ConnectionMode.CONNECTION_MODE_ETH_STATIC_STA_STATIC;
-      }
-    }
-
-    const sent = send_new_network_configuration_to_alpha(updatedConfig);
-    if (sent) {
-      if (pendingStaticIpConfig) appliedIpModeEth = pendingStaticIpConfig.mode;
-      if (pendingStaticIpConfigStation) appliedIpModeSta = pendingStaticIpConfigStation.mode;
-      dhcpRevertPending = null;
-      pendingStaticIpConfig = null;
-      pendingStaticIpConfigStation = null;
-      staticIpConfirmModal?.close();
-      showApplyingIndicator();
-    } else {
-      console.error("Failed to send network configuration to Alpha device.");
-    }
-  });
-
-  function showApplyingIndicator() {
-    const toast = document.getElementById("config-applying-toast");
-    if (!toast) return;
-    toast.classList.remove("hidden");
-    const unsub = $current_network_configuration.listen(() => {
-      toast.classList.add("hidden");
-      unsub();
-    });
-  }
-
-  window.addEventListener("network-config-applying", () => showApplyingIndicator());
-
-  function clearFieldError(input: HTMLInputElement | null, errorEl: HTMLElement | null) {
-    if (!input || !errorEl) return;
-    (input.parentElement ?? input).classList.remove("input-error");
-    errorEl.classList.add("hidden");
-    errorEl.textContent = "";
-  }
-
-  function setFieldError(
-    input: HTMLInputElement | null,
-    errorEl: HTMLElement | null,
-    message: string,
-    firstError: { field: HTMLInputElement | null },
-  ) {
-    if (!input || !errorEl) return;
-    (input.parentElement ?? input).classList.add("input-error");
-    errorEl.textContent = message;
-    errorEl.classList.remove("hidden");
-    if (!firstError.field) {
-      firstError.field = input;
-    }
-  }
-
-  function clearStaticIpErrors() {
-    clearFieldError(staticIpInput, staticIpError);
-    clearFieldError(subnetMaskInput, subnetMaskError);
-    clearFieldError(gatewayInput, gatewayError);
-  }
-
-  function validateStaticIpForm(): { valid: true; values: StaticIpValues } | { valid: false } {
-    if (!staticIpInput || !subnetMaskInput || !gatewayInput) {
-      return { valid: false };
-    }
-
-    clearStaticIpErrors();
-
-    const values: StaticIpValues = {
-      ip: (staticIpInput.value || "").trim(),
-      netmask: (subnetMaskInput.value || "").trim(),
-      gateway: (gatewayInput.value || "").trim(),
-    };
-
-    let isValid = true;
-    const firstError: { field: HTMLInputElement | null } = { field: null };
-
-    if (!values.netmask) {
-      setFieldError(subnetMaskInput, subnetMaskError, "Netmask is required", firstError);
-      isValid = false;
-    } else if (!is_valid_ip_format(values.netmask)) {
-      setFieldError(subnetMaskInput, subnetMaskError, "Invalid netmask format", firstError);
-      isValid = false;
-    } else if (!isValidNetmask(values.netmask)) {
-      setFieldError(subnetMaskInput, subnetMaskError, "Netmask must use contiguous bits", firstError);
-      isValid = false;
-    } else if (!isPracticalNetmask(values.netmask)) {
-      setFieldError(subnetMaskInput, subnetMaskError, "Netmask must allow host and gateway addresses", firstError);
-      isValid = false;
-    }
-
-    if (!values.ip) {
-      setFieldError(staticIpInput, staticIpError, "IP address is required", firstError);
-      isValid = false;
-    } else if (!is_valid_ip_format(values.ip)) {
-      setFieldError(staticIpInput, staticIpError, "Invalid IP address format", firstError);
-      isValid = false;
-    }
-
-    if (!values.gateway) {
-      setFieldError(gatewayInput, gatewayError, "Gateway is required", firstError);
-      isValid = false;
-    } else if (!is_valid_ip_format(values.gateway)) {
-      setFieldError(gatewayInput, gatewayError, "Invalid gateway format", firstError);
-      isValid = false;
-    }
-
-    if (!isValid) {
-      firstError.field?.scrollIntoView({ behavior: "smooth", block: "center" });
-      return { valid: false };
-    }
-
-    if (!isInValidHostRange(values.ip, values.netmask)) {
-      setFieldError(staticIpInput, staticIpError, "IP cannot be network or broadcast address", firstError);
-      isValid = false;
-    }
-
-    if (!isInValidHostRange(values.gateway, values.netmask)) {
-      setFieldError(gatewayInput, gatewayError, "Gateway cannot be network or broadcast address", firstError);
-      isValid = false;
-    }
-
-    if (!isInSameSubnet(values.ip, values.gateway, values.netmask)) {
-      setFieldError(staticIpInput, staticIpError, "IP and gateway must be in the same subnet", firstError);
-      setFieldError(gatewayInput, gatewayError, "IP and gateway must be in the same subnet", firstError);
-      isValid = false;
-    }
-
-    if (values.ip === values.gateway) {
-      setFieldError(gatewayInput, gatewayError, "Gateway cannot match the host IP", firstError);
-      isValid = false;
-    }
-
-    if (!isValid) {
-      firstError.field?.scrollIntoView({ behavior: "smooth", block: "center" });
-      return { valid: false };
-    }
-
-    return { valid: true, values };
-  }
-
-  function updateStaticIpSummary(config: { mode: "dhcp" | "static"; values?: StaticIpValues }) {
-    if (staticIpSummaryMode) {
-      staticIpSummaryMode.textContent = config.mode === "dhcp" ? "Automatic (DHCP)" : "Static IP";
-    }
-    const showStaticDetails = config.mode === "static" && !!config.values;
-    [staticIpSummaryIpRow, staticIpSummaryNetmaskRow, staticIpSummaryGatewayRow].forEach((row) => {
-      row?.classList.toggle("hidden", !showStaticDetails);
-    });
-
-    if (showStaticDetails && config.values) {
-      if (staticIpSummaryIp) staticIpSummaryIp.textContent = config.values.ip;
-      if (staticIpSummaryNetmask) staticIpSummaryNetmask.textContent = config.values.netmask;
-      if (staticIpSummaryGateway) staticIpSummaryGateway.textContent = config.values.gateway;
-    }
-
-    // Warning is only relevant for static IP — hide it for DHCP
-    const warning = document.getElementById("static-ip-warning");
-    warning?.classList.toggle("hidden", config.mode === "dhcp");
-  }
-
-  function setIpAssignmentMode(mode: "dhcp" | "static") {
-    currentIpAssignmentMode = mode;
-    ipModeButtons.forEach((radio) => {
-      radio.checked = radio.value === mode;
-    });
-
-    if (mode === "dhcp") {
-      if (ipModeDescription) ipModeDescription.textContent = "Automatic IP assignment";
-      staticIpContainer?.classList.add("hidden");
-      clearStaticIpErrors();
-    } else {
-      if (ipModeDescription) ipModeDescription.textContent = "Static IP assignment";
-      staticIpContainer?.classList.remove("hidden");
-      const cfg = $current_network_configuration.get();
-      if (!staticIpInput?.value) staticIpInput!.value = cfg.Static_Cfg_IP_Address_Ethernet || cfg.IP_Address_Ethernet || "";
-      if (!subnetMaskInput?.value) subnetMaskInput!.value = cfg.Static_Cfg_Netmask_Ethernet || cfg.Netmask_Ethernet || "";
-      if (!gatewayInput?.value) gatewayInput!.value = cfg.Static_Cfg_Gateway_IP_Address_Ethernet || cfg.Gateway_IP_Address_Ethernet || "";
-    }
-  }
-
-  ipModeButtons.forEach((radio) => {
-    radio.addEventListener("change", () => {
-      const newMode = radio.value === "static" ? "static" : "dhcp";
-      setIpAssignmentMode(newMode);
-      if (newMode === "dhcp" && appliedIpModeEth === "static" && staticIpConfirmModal) {
-        pendingStaticIpConfig = { mode: "dhcp" };
-        dhcpRevertPending = "eth";
-        updateStaticIpSummary(pendingStaticIpConfig);
-        staticIpConfirmModal.showModal();
-      }
-    });
-  });
-
-  setIpAssignmentMode("dhcp");
-
-  // Station mode static IP handlers
-  function clearStaticIpErrorsStation() {
-    clearFieldError(staticIpInputStation, staticIpErrorStation);
-    clearFieldError(subnetMaskInputStation, subnetMaskErrorStation);
-    clearFieldError(gatewayInputStation, gatewayErrorStation);
-  }
-
-  function validateStaticIpFormStation(): { valid: true; values: StaticIpValues } | { valid: false } {
-    if (!staticIpInputStation || !subnetMaskInputStation || !gatewayInputStation) {
-      return { valid: false };
-    }
-
-    clearStaticIpErrorsStation();
-
-    const values: StaticIpValues = {
-      ip: (staticIpInputStation.value || "").trim(),
-      netmask: (subnetMaskInputStation.value || "").trim(),
-      gateway: (gatewayInputStation.value || "").trim(),
-    };
-
-    let isValid = true;
-    const firstError: { field: HTMLInputElement | null } = { field: null };
-
-    if (!values.netmask) {
-      setFieldError(subnetMaskInputStation, subnetMaskErrorStation, "Netmask is required", firstError);
-      isValid = false;
-    } else if (!is_valid_ip_format(values.netmask)) {
-      setFieldError(subnetMaskInputStation, subnetMaskErrorStation, "Invalid netmask format", firstError);
-      isValid = false;
-    } else if (!isValidNetmask(values.netmask)) {
-      setFieldError(subnetMaskInputStation, subnetMaskErrorStation, "Netmask must use contiguous bits", firstError);
-      isValid = false;
-    } else if (!isPracticalNetmask(values.netmask)) {
-      setFieldError(subnetMaskInputStation, subnetMaskErrorStation, "Netmask must allow host and gateway addresses", firstError);
-      isValid = false;
-    }
-
-    if (!values.ip) {
-      setFieldError(staticIpInputStation, staticIpErrorStation, "IP address is required", firstError);
-      isValid = false;
-    } else if (!is_valid_ip_format(values.ip)) {
-      setFieldError(staticIpInputStation, staticIpErrorStation, "Invalid IP address format", firstError);
-      isValid = false;
-    }
-
-    if (!values.gateway) {
-      setFieldError(gatewayInputStation, gatewayErrorStation, "Gateway is required", firstError);
-      isValid = false;
-    } else if (!is_valid_ip_format(values.gateway)) {
-      setFieldError(gatewayInputStation, gatewayErrorStation, "Invalid gateway format", firstError);
-      isValid = false;
-    }
-
-    if (!isValid) {
-      firstError.field?.scrollIntoView({ behavior: "smooth", block: "center" });
-      return { valid: false };
-    }
-
-    if (!isInValidHostRange(values.ip, values.netmask)) {
-      setFieldError(staticIpInputStation, staticIpErrorStation, "IP cannot be network or broadcast address", firstError);
-      isValid = false;
-    }
-
-    if (!isInValidHostRange(values.gateway, values.netmask)) {
-      setFieldError(gatewayInputStation, gatewayErrorStation, "Gateway cannot be network or broadcast address", firstError);
-      isValid = false;
-    }
-
-    if (!isInSameSubnet(values.ip, values.gateway, values.netmask)) {
-      setFieldError(staticIpInputStation, staticIpErrorStation, "IP and gateway must be in the same subnet", firstError);
-      setFieldError(gatewayInputStation, gatewayErrorStation, "IP and gateway must be in the same subnet", firstError);
-      isValid = false;
-    }
-
-    if (values.ip === values.gateway) {
-      setFieldError(gatewayInputStation, gatewayErrorStation, "Gateway cannot match the host IP", firstError);
-      isValid = false;
-    }
-
-    if (!isValid) {
-      firstError.field?.scrollIntoView({ behavior: "smooth", block: "center" });
-      return { valid: false };
-    }
-
-    return { valid: true, values };
-  }
-
-  function setIpAssignmentModeStation(mode: "dhcp" | "static") {
-    currentIpAssignmentModeStation = mode;
-    ipModeButtonsStation.forEach((radio) => {
-      radio.checked = radio.value === mode;
-    });
-
-    if (mode === "dhcp") {
-      if (ipModeDescriptionStation) ipModeDescriptionStation.textContent = "Automatic IP assignment";
-      staticIpContainerStation?.classList.add("hidden");
-      saveStaticIpBtnStation?.classList.add("hidden");
-      clearStaticIpErrorsStation();
-    } else {
-      if (ipModeDescriptionStation) ipModeDescriptionStation.textContent = "Static IP assignment";
-      staticIpContainerStation?.classList.remove("hidden");
-      saveStaticIpBtnStation?.classList.remove("hidden");
-      const cfg = $current_network_configuration.get();
-      if (!staticIpInputStation?.value) staticIpInputStation!.value = cfg.Static_Cfg_IP_Address_Station || "";
-      if (!subnetMaskInputStation?.value) subnetMaskInputStation!.value = cfg.Static_Cfg_Netmask_Station || "";
-      if (!gatewayInputStation?.value) gatewayInputStation!.value = cfg.Static_Cfg_Gateway_IP_Address_Station || "";
-    }
-  }
-
-  // Station mode event listeners
-  ipModeButtonsStation.forEach((radio) => {
-    radio.addEventListener("change", () => {
-      const newMode = radio.value === "static" ? "static" : "dhcp";
-      setIpAssignmentModeStation(newMode);
-      if (newMode === "dhcp" && appliedIpModeSta === "static" && staticIpConfirmModal) {
-        pendingStaticIpConfigStation = { mode: "dhcp" };
-        dhcpRevertPending = "sta";
-        updateStaticIpSummary(pendingStaticIpConfigStation);
-        staticIpConfirmModal.showModal();
-      }
-    });
-  });
-
-  staticIpInputStation?.addEventListener("input", () => clearFieldError(staticIpInputStation, staticIpErrorStation));
-  subnetMaskInputStation?.addEventListener("input", () => clearFieldError(subnetMaskInputStation, subnetMaskErrorStation));
-  gatewayInputStation?.addEventListener("input", () => clearFieldError(gatewayInputStation, gatewayErrorStation));
-
-  saveStaticIpBtnStation?.addEventListener("click", () => {
-    if (!staticIpConfirmModal) return;
-
-    if (currentIpAssignmentModeStation === "static") {
-      const validation = validateStaticIpFormStation();
-      if (!validation.valid) {
-        return;
-      }
-      pendingStaticIpConfigStation = { mode: "static", values: validation.values };
-    } else {
-      pendingStaticIpConfigStation = { mode: "dhcp" };
-      clearStaticIpErrorsStation();
-    }
-
-    if (pendingStaticIpConfigStation) {
-      updateStaticIpSummary(pendingStaticIpConfigStation);
-      staticIpConfirmModal.showModal();
-    }
-  });
-
-  // Initialize Station mode IP assignment mode
-  setIpAssignmentModeStation("dhcp");
-</script>