feat: major enhancement — OS gallery, server rename, traffic chart, backups, VNC toggle, password reset, Redis caching, UX improvements

- Remove client IP removal capability (keep backend methods removed too)
- Add copy-to-clipboard buttons for IP addresses with tooltip feedback
- Replace OS dropdown with tile gallery (grouped, searchable, brand colors, EOL badges) in rebuild panel and checkout page
- Add inline server rename with friendly name generator and RFC 1123 validation
- Add traffic statistics canvas chart with responsive resize in resources panel
- Add backup listing timeline in manage panel with show-all expansion
- Add VNC enable/disable toggle with connection details and password copy
- Add server root password reset with auto-clipboard copy (never displayed)
- Add skeleton loading placeholders, action cooldowns (power 3s, rebuild 30s), progress indicator with elapsed timer
- Sanitize all client-facing error messages (no raw API errors exposed)
- Convert all state-mutating AJAX calls from GET to POST
- Add explicit break after all output() calls in client.php
- Add Redis-backed API response caching (Cache.php): OS templates 10min, traffic/backups 2min, currencies 30min, packages 10min
- Add GitHub Actions workflow for weekly VirtFusion API change detection
- Move cache busting step after semantic-release in publish workflow
- Add endpoint doc generator script and OpenAPI baseline placeholder
- Improve hostname generation entropy (bin2hex random_bytes)
- Add .superpowers/ to .gitignore

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

modules/servers/VirtFusionDirect/templates/css/module.css

@@ -89,6 +89,47 @@
     display: inline;
 }
 
+/* Skeleton Loading */
+.vf-skeleton {
+    background: linear-gradient(90deg, #e9ecef 25%, #f4f4f4 50%, #e9ecef 75%);
+    background-size: 200% 100%;
+    animation: vf-skeleton-pulse 1.5s ease-in-out infinite;
+    border-radius: 4px;
+}
+.vf-skeleton-line {
+    height: 14px;
+    margin-bottom: 10px;
+    border-radius: 4px;
+}
+.vf-skeleton-line-short {
+    width: 60%;
+}
+.vf-skeleton-line-medium {
+    width: 80%;
+}
+@keyframes vf-skeleton-pulse {
+    0% { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+}
+
+/* Action Progress Banner */
+#vf-action-progress {
+    background: #337ab7;
+    color: #fff;
+    padding: 8px 16px;
+    border-radius: 6px;
+    margin-bottom: 12px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 0.85rem;
+}
+#vf-action-progress .spinner-border {
+    width: 16px;
+    height: 16px;
+    border-width: 2px;
+}
+
 /* Loader */
 #vf-server-info-loader {
     min-height: 136px;
@@ -134,9 +175,186 @@
     font-family: monospace;
     font-size: 0.9rem;
 }
-.vf-ip-remove {
-    font-size: 0.7rem;
-    padding: 0.15rem 0.4rem;
+/* Backup Timeline */
+.vf-timeline {
+    position: relative;
+    padding-left: 20px;
+    border-left: 2px solid #dee2e6;
+    margin-left: 8px;
+}
+.vf-timeline-item {
+    position: relative;
+    padding: 8px 0 8px 12px;
+}
+.vf-timeline-dot {
+    position: absolute;
+    left: -27px;
+    top: 12px;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    border: 2px solid #fff;
+}
+.vf-timeline-dot-success {
+    background: #28a745;
+}
+.vf-timeline-dot-pending {
+    background: #ffc107;
+}
+.vf-timeline-content {
+    font-size: 0.85rem;
+}
+
+/* Server Name Dropdown */
+#vf-name-dropdown {
+    position: relative;
+    background: #fff;
+    border: 1px solid #dee2e6;
+    border-radius: 6px;
+    margin-top: 4px;
+    max-width: 250px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    z-index: 10;
+}
+.vf-name-option {
+    padding: 6px 12px;
+    cursor: pointer;
+    font-family: monospace;
+    font-size: 0.85rem;
+    border-bottom: 1px solid #f0f0f0;
+}
+.vf-name-option:last-child {
+    border-bottom: none;
+}
+.vf-name-option:hover {
+    background: rgba(51,122,183,0.06);
+}
+
+/* Copy to Clipboard */
+.vf-ip-copy {
+    padding: 2px 5px;
+    line-height: 1;
+    color: #6c757d;
+    background: none;
+    border: 1px solid transparent;
+    border-radius: 3px;
+    cursor: pointer;
+    vertical-align: middle;
+}
+.vf-ip-copy:hover {
+    color: #337ab7;
+    background: rgba(51,122,183,0.08);
+    border-color: rgba(51,122,183,0.2);
+}
+.vf-copy-tooltip {
+    position: absolute;
+    margin-left: 4px;
+    padding: 2px 8px;
+    font-size: 0.75rem;
+    color: #fff;
+    background: #28a745;
+    border-radius: 3px;
+    white-space: nowrap;
+    animation: vf-fade-in 0.2s ease;
+}
+@keyframes vf-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+/* OS Template Gallery */
+.vf-os-category-title {
+    text-transform: uppercase;
+    font-weight: 700;
+    font-size: 0.85rem;
+    letter-spacing: 0.5px;
+    border-bottom: 1px solid #dee2e6;
+    padding-bottom: 6px;
+    margin-top: 16px;
+    margin-bottom: 10px;
+}
+.vf-os-category:first-child .vf-os-category-title {
+    margin-top: 0;
+}
+.vf-os-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-bottom: 12px;
+}
+.vf-os-card {
+    width: 120px;
+    border: 2px solid #dee2e6;
+    border-radius: 8px;
+    padding: 10px 8px;
+    text-align: center;
+    cursor: pointer;
+    transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
+}
+.vf-os-card:hover {
+    border-color: #337ab7;
+}
+.vf-os-card-selected {
+    border-color: #337ab7;
+    background: rgba(51,122,183,0.06);
+    box-shadow: 0 0 0 1px rgba(51,122,183,0.3);
+}
+.vf-os-card-eol {
+    opacity: 0.6;
+}
+.vf-os-icon {
+    width: 40px;
+    height: 40px;
+    border-radius: 8px;
+    margin: 0 auto 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    font-weight: 700;
+    font-size: 1.1rem;
+}
+.vf-os-icon img {
+    width: 24px;
+    height: 24px;
+    object-fit: contain;
+}
+.vf-os-label {
+    font-weight: 600;
+    font-size: 12px;
+    line-height: 1.2;
+}
+.vf-os-version {
+    font-size: 10px;
+    color: #888;
+    line-height: 1.2;
+}
+.vf-os-eol-badge {
+    display: inline-block;
+    background: #dc3545;
+    color: #fff;
+    font-size: 9px;
+    font-weight: 700;
+    padding: 1px 5px;
+    border-radius: 3px;
+    margin-top: 3px;
+}
+.vf-os-details {
+    border-top: 1px solid #dee2e6;
+    padding-top: 10px;
+}
+.vf-os-search {
+    margin-bottom: 10px;
+}
+
+@media (max-width: 768px) {
+    .vf-os-grid {
+        gap: 6px;
+    }
+    .vf-os-card {
+        width: calc(50% - 3px);
+        min-width: 100px;
+    }
 }
 
 /* Resource panel */
@@ -186,6 +404,38 @@
     box-shadow: 0 1px 3px rgba(0,0,0,0.2);
 }
 
+/* Toggle Switch */
+.vf-toggle-input {
+    display: none;
+}
+.vf-toggle-switch {
+    position: relative;
+    display: inline-block;
+    width: 36px;
+    height: 20px;
+    background: #ccc;
+    border-radius: 10px;
+    transition: background 0.2s;
+    flex-shrink: 0;
+}
+.vf-toggle-switch::after {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 16px;
+    height: 16px;
+    background: #fff;
+    border-radius: 50%;
+    transition: transform 0.2s;
+}
+.vf-toggle-input:checked + .vf-toggle-switch {
+    background: #28a745;
+}
+.vf-toggle-input:checked + .vf-toggle-switch::after {
+    transform: translateX(16px);
+}
+
 /* Responsive adjustments */
 @media (max-width: 768px) {
     .vf-power-buttons {

modules/servers/VirtFusionDirect/templates/js/module.js

@@ -8,8 +8,38 @@
  * - Password reset
  * - Server rebuild
  * - OS template loading
+ * - Traffic statistics
+ * - Backup listing
+ * - VNC management
+ * - Server naming
  */
 
+// =========================================================================
+// Progress Indicator
+// =========================================================================
+
+var _vfProgressTimer = null;
+
+function vfShowProgress(label) {
+    var startTime = Date.now();
+    $("#vf-action-progress-text").text(label);
+    $("#vf-action-progress-timer").text("0s");
+    $("#vf-action-progress").show();
+
+    _vfProgressTimer = setInterval(function () {
+        var elapsed = Math.floor((Date.now() - startTime) / 1000);
+        $("#vf-action-progress-timer").text(elapsed + "s");
+    }, 1000);
+}
+
+function vfHideProgress() {
+    if (_vfProgressTimer) {
+        clearInterval(_vfProgressTimer);
+        _vfProgressTimer = null;
+    }
+    $("#vf-action-progress").hide();
+}
+
 function vfServerData(serviceId, systemUrl) {
     $("#vf-server-info-error").hide();
     $.ajax({
@@ -18,7 +48,7 @@ function vfServerData(serviceId, systemUrl) {
         url: systemUrl + "modules/servers/VirtFusionDirect/client.php?serviceID=" + encodeURIComponent(serviceId) + "&action=serverData"
     }).done(function (response) {
         if (response.success) {
-            $("#vf-data-server-name").text(response.data.name);
+            $("#vf-rename-input").val(response.data.name);
             $("#vf-data-server-hostname").text(response.data.hostname);
             $("#vf-data-server-memory").text(response.data.memory);
             $("#vf-data-server-traffic").text(response.data.traffic);
@@ -93,9 +123,7 @@ function vfServerData(serviceId, systemUrl) {
                 $.each(ipv4Arr, function (i, ip) {
                     var row = $('<div class="vf-ip-row"></div>');
                     row.append('<span class="vf-ip-address">' + $('<span>').text(ip).html() + '</span>');
-                    if (i > 0) {
-                        row.append(' <button class="btn btn-sm btn-outline-danger vf-ip-remove" onclick="vfRemoveIP(\'' + serviceId + '\',\'' + systemUrl + '\',\'removeIPv4\',\'' + encodeURIComponent(ip) + '\')">Remove</button>');
-                    }
+                    row.append(vfCopyButton(ip));
                     ipv4List.append(row);
                 });
             } else {
@@ -106,6 +134,7 @@ function vfServerData(serviceId, systemUrl) {
                 $.each(ipv6Arr, function (i, subnet) {
                     var row = $('<div class="vf-ip-row"></div>');
                     row.append('<span class="vf-ip-address">' + $('<span>').text(subnet).html() + '</span>');
+                    row.append(vfCopyButton(subnet));
                     ipv6List.append(row);
                 });
             } else {
@@ -148,7 +177,7 @@ function vfServerDataAdmin(serviceId, systemUrl) {
             $("#vf-server-info").show();
         } else {
             $("#vf-server-info-error").show();
-            $("#vf-server-info-error-message").text(response.errors);
+            $("#vf-server-info-error-message").text("Unable to retrieve server information.");
             $("#vf-server-info").hide();
         }
     }).fail(function () {
@@ -163,7 +192,7 @@ function vfUserPasswordReset(serviceId, systemUrl) {
     $("#vf-password-reset-error").hide();
     $("#vf-password-reset-success").hide();
     $.ajax({
-        type: "GET",
+        type: "POST",
         dataType: "json",
         url: systemUrl + "modules/servers/VirtFusionDirect/client.php?serviceID=" + encodeURIComponent(serviceId) + "&action=resetPassword"
     }).done(function (response) {
@@ -236,16 +265,17 @@ function vfPowerAction(serviceId, systemUrl, action) {
     };
 
     $.ajax({
-        type: "GET",
+        type: "POST",
         dataType: "json",
-        url: systemUrl + "modules/servers/VirtFusionDirect/client.php?serviceID=" + encodeURIComponent(serviceId) + "&action=powerAction&powerAction=" + encodeURIComponent(action)
+        url: systemUrl + "modules/servers/VirtFusionDirect/client.php?serviceID=" + encodeURIComponent(serviceId) + "&action=powerAction",
+        data: { powerAction: action }
     }).done(function (response) {
         if (response.success) {
             alertDiv.removeClass("alert-danger").addClass("alert-success");
             alertDiv.text(response.data.message || (actionLabels[action] + " server..."));
         } else {
             alertDiv.removeClass("alert-success").addClass("alert-danger");
-            alertDiv.text(response.errors || "Power action failed.");
+            alertDiv.text("Power action failed. Please try again.");
         }
         alertDiv.show();
     }).fail(function () {
@@ -254,30 +284,125 @@ function vfPowerAction(serviceId, systemUrl, action) {
         alertDiv.show();
     }).always(function () {
         spinner.hide();
-        $(".vf-btn-power").prop("disabled", false);
+        // Cooldown: keep buttons disabled for 3 seconds
+        setTimeout(function () {
+            $(".vf-btn-power").prop("disabled", false);
+        }, 3000);
     });
 }
 
+var vfOsBrandColors = {
+    "ubuntu": "#E95420", "debian": "#A81D33", "rocky": "#10B981", "centos": "#932279",
+    "almalinux": "#0F4266", "alma": "#0F4266", "windows": "#0078D4", "fedora": "#51A2DA",
+    "arch": "#1793D1", "opensuse": "#73BA25", "suse": "#73BA25", "freebsd": "#AB2B28",
+    "oracle": "#F80000", "rhel": "#EE0000", "red hat": "#EE0000", "cloudlinux": "#0095D9",
+    "gentoo": "#54487A", "slackware": "#000", "nixos": "#7EBAE4", "alpine": "#0D597F"
+};
+
+function vfGetBrandColor(name) {
+    var lower = (name || "").toLowerCase();
+    for (var key in vfOsBrandColors) {
+        if (lower.indexOf(key) !== -1) return vfOsBrandColors[key];
+    }
+    return "#6c757d";
+}
+
+function vfRenderOsGallery(container, data, hiddenInput) {
+    var $container = $(container);
+    $container.empty();
+
+    if (!data || !data.categories || data.categories.length === 0) {
+        $container.append($('<p class="text-muted"></p>').text("No templates available"));
+        $container.show();
+        return;
+    }
+
+    var baseUrl = data.baseUrl || "";
+
+    $.each(data.categories, function (ci, category) {
+        var section = $('<div class="vf-os-category"></div>').attr("data-category", ci);
+        var title = $('<h5 class="vf-os-category-title"></h5>').text(category.name);
+        section.append(title);
+        var grid = $('<div class="vf-os-grid"></div>');
+
+        $.each(category.templates, function (ti, tpl) {
+            var label = tpl.name + (tpl.version ? " " + tpl.version : "") + (tpl.variant ? " " + tpl.variant : "");
+            var brandColor = vfGetBrandColor(category.name || tpl.name);
+            var card = $('<div class="vf-os-card"></div>')
+                .attr("data-id", tpl.id)
+                .attr("data-search", label.toLowerCase());
+            if (tpl.eol) card.addClass("vf-os-card-eol");
+
+            var iconDiv = $('<div class="vf-os-icon"></div>').css("background", brandColor);
+            if (tpl.icon && baseUrl) {
+                var img = $('<img alt="">').attr("src", baseUrl + "/storage/os/" + encodeURIComponent(tpl.icon));
+                img.on("error", function () {
+                    $(this).parent().empty().append($('<span></span>').text((tpl.name || "?")[0].toUpperCase()));
+                });
+                iconDiv.append(img);
+            } else {
+                iconDiv.append($('<span></span>').text((tpl.name || "?")[0].toUpperCase()));
+            }
+
+            card.append(iconDiv);
+            card.append($('<div class="vf-os-label"></div>').text(tpl.name));
+            card.append($('<div class="vf-os-version"></div>').text((tpl.version || "") + (tpl.variant ? " " + tpl.variant : "")));
+            if (tpl.eol) {
+                card.append($('<span class="vf-os-eol-badge"></span>').text("EOL"));
+            }
+
+            card.on("click", function () {
+                $container.find(".vf-os-card").removeClass("vf-os-card-selected");
+                $(this).addClass("vf-os-card-selected");
+                $(hiddenInput).val(tpl.id);
+
+                var details = $("#vf-os-details");
+                details.empty();
+                details.append($('<strong></strong>').text(label));
+                if (tpl.description) {
+                    details.append($('<p class="mb-0 mt-1 text-muted"></p>').text(tpl.description));
+                }
+                details.show();
+            });
+
+            grid.append(card);
+        });
+
+        section.append(grid);
+        $container.append(section);
+    });
+
+    $container.show();
+}
+
 function vfLoadOsTemplates(serviceId, systemUrl) {
     $.ajax({
         type: "GET",
         dataType: "json",
         url: systemUrl + "modules/servers/VirtFusionDirect/client.php?serviceID=" + encodeURIComponent(serviceId) + "&action=osTemplates"
     }).done(function (response) {
-        var select = $("#vf-rebuild-os");
-        select.empty();
-        if (response.success && response.data && response.data.length > 0) {
-            select.append('<option value="">-- Select Operating System --</option>');
-            $.each(response.data, function (i, template) {
-                select.append('<option value="' + template.id + '">' + $('<span>').text(template.name).html() + '</option>');
+        $("#vf-os-gallery-loader").hide();
+        if (response.success && response.data) {
+            vfRenderOsGallery("#vf-os-gallery", response.data, "#vf-rebuild-os");
+
+            // Bind search after gallery is rendered
+            $("#vf-os-search").on("keyup", function () {
+                var query = $(this).val().toLowerCase();
+                $("#vf-os-gallery .vf-os-card").each(function () {
+                    var match = $(this).data("search").indexOf(query) !== -1;
+                    $(this).toggle(match);
+                });
+                $("#vf-os-gallery .vf-os-category").each(function () {
+                    var hasVisible = $(this).find(".vf-os-card:visible").length > 0;
+                    $(this).toggle(hasVisible);
+                });
             });
         } else {
-            select.append('<option value="">No templates available</option>');
+            $("#vf-os-gallery").append($('<p class="text-muted"></p>').text("No templates available")).show();
         }
     }).fail(function () {
-        var select = $("#vf-rebuild-os");
-        select.empty();
-        select.append('<option value="">Error loading templates</option>');
+        $("#vf-os-gallery-loader").hide();
+        $("#vf-os-gallery").append($('<p class="text-danger"></p>').text("Error loading templates")).show();
     });
 }
 
@@ -299,18 +424,20 @@ function vfRebuildServer(serviceId, systemUrl) {
     $("#vf-rebuild-button").prop("disabled", true);
     $("#vf-rebuild-spinner").show();
     alertDiv.hide();
+    vfShowProgress("Rebuilding server...");
 
     $.ajax({
-        type: "GET",
+        type: "POST",
         dataType: "json",
-        url: systemUrl + "modules/servers/VirtFusionDirect/client.php?serviceID=" + encodeURIComponent(serviceId) + "&action=rebuild&osId=" + encodeURIComponent(osId)
+        url: systemUrl + "modules/servers/VirtFusionDirect/client.php?serviceID=" + encodeURIComponent(serviceId) + "&action=rebuild",
+        data: { osId: osId }
     }).done(function (response) {
         if (response.success) {
             alertDiv.removeClass("alert-danger").addClass("alert-success");
             alertDiv.text(response.data.message || "Server rebuild initiated. You will receive an email when the process is complete.");
         } else {
             alertDiv.removeClass("alert-success").addClass("alert-danger");
-            alertDiv.text(response.errors || "Rebuild failed.");
+            alertDiv.text("Rebuild failed. Please try again.");
         }
         alertDiv.show();
     }).fail(function () {
@@ -318,8 +445,12 @@ function vfRebuildServer(serviceId, systemUrl) {
         alertDiv.text("An error occurred. Please try again.");
         alertDiv.show();
     }).always(function () {
+        vfHideProgress();
         $("#vf-rebuild-spinner").hide();
-        $("#vf-rebuild-button").prop("disabled", false);
+        // Cooldown: keep button disabled for 30 seconds after rebuild
+        setTimeout(function () {
+            $("#vf-rebuild-button").prop("disabled", false);
+        }, 30000);
     });
 }
 
@@ -335,42 +466,6 @@ function impersonateServerOwner(serviceId, systemUrl) {
     });
 }
 
-// =========================================================================
-// Network / IP Management
-// =========================================================================
-
-function vfRemoveIP(serviceId, systemUrl, action, identifier) {
-    if (!confirm("Are you sure you want to remove this IP address?")) {
-        return;
-    }
-
-    var alertDiv = $("#vf-network-alert");
-    alertDiv.hide();
-
-    var paramName = action === "removeIPv4" ? "ip" : "subnet";
-
-    $.ajax({
-        type: "GET",
-        dataType: "json",
-        url: systemUrl + "modules/servers/VirtFusionDirect/client.php?serviceID=" + encodeURIComponent(serviceId) + "&action=" + encodeURIComponent(action) + "&" + paramName + "=" + identifier
-    }).done(function (response) {
-        if (response.success) {
-            alertDiv.removeClass("alert-danger").addClass("alert-success");
-            alertDiv.text(response.data.message || "IP address removed successfully.");
-            alertDiv.show();
-            vfServerData(serviceId, systemUrl);
-        } else {
-            alertDiv.removeClass("alert-success").addClass("alert-danger");
-            alertDiv.text(response.errors || "Failed to remove IP address.");
-            alertDiv.show();
-        }
-    }).fail(function () {
-        alertDiv.removeClass("alert-success").addClass("alert-danger");
-        alertDiv.text("An error occurred. Please try again.");
-        alertDiv.show();
-    });
-}
-
 // =========================================================================
 // VNC Console
 // =========================================================================
@@ -420,7 +515,7 @@ function vfOpenVnc(serviceId, systemUrl) {
         } else {
             vncWindow.close();
             alertDiv.removeClass("alert-success").addClass("alert-danger");
-            alertDiv.text(response.errors || "VNC console is not available.");
+            alertDiv.text("VNC console is not available.");
             alertDiv.show();
         }
     }).fail(function () {
@@ -434,6 +529,61 @@ function vfOpenVnc(serviceId, systemUrl) {
     });
 }
 
+function vfToggleVnc(serviceId, systemUrl, enabled) {
+    var toggle = $("#vf-vnc-toggle");
+    toggle.prop("disabled", true);
+
+    $.ajax({
+        type: "POST",
+        dataType: "json",
+        url: systemUrl + "modules/servers/VirtFusionDirect/client.php?serviceID=" + encodeURIComponent(serviceId) + "&action=toggleVnc",
+        data: { enabled: enabled ? "1" : "0" }
+    }).done(function (response) {
+        if (response.success) {
+            if (enabled && response.data) {
+                var data = response.data.data || response.data;
+                if (data.ip || data.host) {
+                    $("#vf-vnc-ip").text(data.ip || data.host || "-");
+                    $("#vf-vnc-port").text(data.port || "-");
+                    $("#vf-vnc-details").show();
+                }
+            } else {
+                $("#vf-vnc-details").hide();
+            }
+        } else {
+            toggle.prop("checked", !enabled);
+        }
+    }).fail(function () {
+        toggle.prop("checked", !enabled);
+    }).always(function () {
+        toggle.prop("disabled", false);
+    });
+}
+
+function vfCopyVncPassword(serviceId, systemUrl) {
+    var confirmSpan = $("#vf-vnc-copy-confirm");
+
+    $.ajax({
+        type: "GET",
+        dataType: "json",
+        url: systemUrl + "modules/servers/VirtFusionDirect/client.php?serviceID=" + encodeURIComponent(serviceId) + "&action=vnc"
+    }).done(function (response) {
+        if (response.success && response.data) {
+            var data = response.data.data || response.data;
+            var password = data.password || "";
+            if (password) {
+                navigator.clipboard.writeText(password).then(function () {
+                    confirmSpan.text("Copied!").show();
+                    setTimeout(function () { confirmSpan.hide(); }, 2000);
+                }).catch(function () {
+                    confirmSpan.text("Copy failed").show();
+                    setTimeout(function () { confirmSpan.hide(); }, 2000);
+                });
+            }
+        }
+    });
+}
+
 // =========================================================================
 // Self Service — Credit & Usage
 // =========================================================================
@@ -524,9 +674,10 @@ function vfAddCredit(serviceId, systemUrl) {
     alertDiv.hide();
 
     $.ajax({
-        type: "GET",
+        type: "POST",
         dataType: "json",
-        url: systemUrl + "modules/servers/VirtFusionDirect/client.php?serviceID=" + encodeURIComponent(serviceId) + "&action=selfServiceAddCredit&tokens=" + encodeURIComponent(amount)
+        url: systemUrl + "modules/servers/VirtFusionDirect/client.php?serviceID=" + encodeURIComponent(serviceId) + "&action=selfServiceAddCredit",
+        data: { tokens: amount }
     }).done(function (response) {
         if (response.success) {
             alertDiv.removeClass("alert-danger").addClass("alert-success");
@@ -537,7 +688,7 @@ function vfAddCredit(serviceId, systemUrl) {
             vfLoadSelfServiceUsage(serviceId, systemUrl);
         } else {
             alertDiv.removeClass("alert-success").addClass("alert-danger");
-            alertDiv.text(response.errors || "Failed to add credit.");
+            alertDiv.text("Failed to add credit. Please try again.");
             alertDiv.show();
         }
     }).fail(function () {
@@ -549,3 +700,331 @@ function vfAddCredit(serviceId, systemUrl) {
         btn.prop("disabled", false);
     });
 }
+
+// =========================================================================
+// Server Password Reset
+// =========================================================================
+
+function vfResetServerPassword(serviceId, systemUrl) {
+    if (!confirm("Are you sure you want to reset the server root password? This will change the password immediately.")) {
+        return;
+    }
+
+    var btn = $("#vf-server-password-btn");
+    var spinner = $("#vf-server-password-spinner");
+    var alertDiv = $("#vf-server-password-alert");
+
+    btn.prop("disabled", true);
+    spinner.show();
+    alertDiv.hide();
+
+    $.ajax({
+        type: "POST",
+        dataType: "json",
+        url: systemUrl + "modules/servers/VirtFusionDirect/client.php?serviceID=" + encodeURIComponent(serviceId) + "&action=resetServerPassword"
+    }).done(function (response) {
+        if (response.success && response.data) {
+            var data = response.data.data || response.data;
+            var password = data.password || data.newPassword || "";
+            if (password) {
+                navigator.clipboard.writeText(password).then(function () {
+                    alertDiv.removeClass("alert-danger").addClass("alert alert-success");
+                    alertDiv.text("New password copied to clipboard.");
+                    alertDiv.show();
+                }).catch(function () {
+                    alertDiv.removeClass("alert-danger").addClass("alert alert-warning");
+                    alertDiv.text("Password reset successful. Unable to copy to clipboard automatically.");
+                    alertDiv.show();
+                });
+            } else {
+                alertDiv.removeClass("alert-danger").addClass("alert alert-success");
+                alertDiv.text("Password reset initiated. Check your email for the new credentials.");
+                alertDiv.show();
+            }
+        } else {
+            alertDiv.removeClass("alert-success").addClass("alert alert-danger");
+            alertDiv.text("Password reset failed. Please try again.");
+            alertDiv.show();
+        }
+    }).fail(function () {
+        alertDiv.removeClass("alert-success").addClass("alert alert-danger");
+        alertDiv.text("An error occurred. Please try again.");
+        alertDiv.show();
+    }).always(function () {
+        spinner.hide();
+        btn.prop("disabled", false);
+    });
+}
+
+// =========================================================================
+// Backup Listing
+// =========================================================================
+
+function vfLoadBackups(serviceId, systemUrl) {
+    $.ajax({
+        type: "GET",
+        dataType: "json",
+        url: systemUrl + "modules/servers/VirtFusionDirect/client.php?serviceID=" + encodeURIComponent(serviceId) + "&action=backups"
+    }).done(function (response) {
+        if (response.success && response.data) {
+            var backups = response.data.data || response.data;
+            if (!Array.isArray(backups)) backups = [];
+
+            if (backups.length > 0) {
+                var timeline = $("#vf-backups-timeline");
+                timeline.empty();
+
+                $.each(backups, function (i, backup) {
+                    var rawDate = backup.created_at || backup.date || "";
+                    var date = rawDate;
+                    try { if (rawDate) date = new Date(rawDate).toLocaleString(); } catch (e) {}
+                    var size = backup.size ? (backup.size >= 1024 ? (backup.size / 1024).toFixed(2) + " GB" : backup.size + " MB") : "-";
+                    var status = backup.status || "completed";
+                    var dotClass = status === "completed" ? "vf-timeline-dot-success" : "vf-timeline-dot-pending";
+
+                    var item = $('<div class="vf-timeline-item"></div>');
+                    if (i >= 10) item.addClass("vf-timeline-item-hidden").hide();
+                    item.append('<div class="vf-timeline-dot ' + dotClass + '"></div>');
+                    item.append($('<div class="vf-timeline-content"></div>')
+                        .append($('<div class="vf-bold"></div>').text(date))
+                        .append($('<div class="text-muted"></div>').text("Size: " + size + " | Status: " + status))
+                    );
+                    timeline.append(item);
+                });
+
+                if (backups.length > 10) {
+                    $("#vf-backups-show-all").show();
+                }
+
+                $("#vf-backups-section").show();
+            }
+        }
+    }).always(function () {
+        $("#vf-backups-loader").hide();
+    });
+}
+
+// =========================================================================
+// Traffic Statistics Chart
+// =========================================================================
+
+function vfDrawTrafficChart(canvasId, entries) {
+    var canvas = document.getElementById(canvasId);
+    if (!canvas || !canvas.getContext) return;
+
+    var dpr = window.devicePixelRatio || 1;
+    var rect = canvas.parentElement.getBoundingClientRect();
+    canvas.width = rect.width * dpr;
+    canvas.height = 200 * dpr;
+    canvas.style.height = "200px";
+    canvas.style.width = "100%";
+
+    var ctx = canvas.getContext("2d");
+    ctx.scale(dpr, dpr);
+    var w = rect.width;
+    var h = 200;
+
+    if (!entries || entries.length === 0) {
+        ctx.fillStyle = "#888";
+        ctx.font = "13px sans-serif";
+        ctx.textAlign = "center";
+        ctx.fillText("No traffic data available", w / 2, h / 2);
+        return;
+    }
+
+    var maxVal = 0;
+    entries.forEach(function (e) {
+        var total = (e.inbound || 0) + (e.outbound || 0);
+        if (total > maxVal) maxVal = total;
+    });
+    if (maxVal === 0) maxVal = 1;
+
+    var padding = { top: 10, right: 10, bottom: 30, left: 50 };
+    var chartW = w - padding.left - padding.right;
+    var chartH = h - padding.top - padding.bottom;
+    var barGroupW = chartW / entries.length;
+    var barW = Math.max(4, (barGroupW * 0.35));
+
+    // Y axis
+    ctx.strokeStyle = "#dee2e6";
+    ctx.lineWidth = 1;
+    for (var i = 0; i <= 4; i++) {
+        var y = padding.top + chartH - (chartH * i / 4);
+        ctx.beginPath();
+        ctx.moveTo(padding.left, y);
+        ctx.lineTo(w - padding.right, y);
+        ctx.stroke();
+        ctx.fillStyle = "#888";
+        ctx.font = "10px sans-serif";
+        ctx.textAlign = "right";
+        var labelVal = (maxVal * i / 4);
+        ctx.fillText(labelVal >= 1024 ? (labelVal / 1024).toFixed(1) + " TB" : labelVal.toFixed(0) + " GB", padding.left - 5, y + 3);
+    }
+
+    entries.forEach(function (e, idx) {
+        var inVal = e.inbound || 0;
+        var outVal = e.outbound || 0;
+        var inH = (inVal / maxVal) * chartH;
+        var outH = (outVal / maxVal) * chartH;
+        var x = padding.left + idx * barGroupW + (barGroupW - barW * 2 - 2) / 2;
+
+        ctx.fillStyle = "#337ab7";
+        ctx.fillRect(x, padding.top + chartH - inH, barW, inH);
+
+        ctx.fillStyle = "#28a745";
+        ctx.fillRect(x + barW + 2, padding.top + chartH - outH, barW, outH);
+
+        // X label
+        ctx.fillStyle = "#888";
+        ctx.font = "10px sans-serif";
+        ctx.textAlign = "center";
+        ctx.fillText(e.label || (idx + 1), padding.left + idx * barGroupW + barGroupW / 2, h - 8);
+    });
+
+    // Legend
+    ctx.fillStyle = "#337ab7";
+    ctx.fillRect(padding.left, h - 15, 10, 10);
+    ctx.fillStyle = "#888";
+    ctx.font = "10px sans-serif";
+    ctx.textAlign = "left";
+    ctx.fillText("In", padding.left + 14, h - 6);
+    ctx.fillStyle = "#28a745";
+    ctx.fillRect(padding.left + 32, h - 15, 10, 10);
+    ctx.fillStyle = "#888";
+    ctx.fillText("Out", padding.left + 46, h - 6);
+}
+
+function vfLoadTrafficStats(serviceId, systemUrl) {
+    $.ajax({
+        type: "GET",
+        dataType: "json",
+        url: systemUrl + "modules/servers/VirtFusionDirect/client.php?serviceID=" + encodeURIComponent(serviceId) + "&action=trafficStats"
+    }).done(function (response) {
+        if (response.success && response.data) {
+            var data = response.data.data || response.data;
+            var entries = data.entries || data.traffic || [];
+            var used = data.used || data.totalUsed || 0;
+            var limit = data.limit || data.allowance || 0;
+
+            if (entries.length > 0 || used > 0) {
+                vfDrawTrafficChart("vf-traffic-chart", entries);
+                $("#vf-traffic-used").text(used >= 1024 ? (used / 1024).toFixed(2) + " TB" : used + " GB");
+                $("#vf-traffic-limit").text(limit > 0 ? (limit >= 1024 ? (limit / 1024).toFixed(2) + " TB" : limit + " GB") : "Unlimited");
+                var remaining = limit > 0 ? Math.max(0, limit - used) : 0;
+                $("#vf-traffic-remaining").text(limit > 0 ? (remaining >= 1024 ? (remaining / 1024).toFixed(2) + " TB" : remaining + " GB") : "-");
+                $("#vf-traffic-chart-section").show();
+
+                // Debounced resize redraw
+                var resizeTimer;
+                $(window).on("resize.vfTraffic", function () {
+                    clearTimeout(resizeTimer);
+                    resizeTimer = setTimeout(function () {
+                        vfDrawTrafficChart("vf-traffic-chart", entries);
+                    }, 250);
+                });
+            }
+        }
+    });
+}
+
+// =========================================================================
+// Server Naming
+// =========================================================================
+
+function vfGenerateFriendlyName() {
+    var adjectives = ["swift","bold","calm","keen","fair","brave","cool","sage","free","warm"];
+    var nouns = ["cloud","node","core","link","bolt","wave","star","peak","edge","dock"];
+    var adj = adjectives[Math.floor(Math.random() * adjectives.length)];
+    var noun = nouns[Math.floor(Math.random() * nouns.length)];
+    var num = String(Math.floor(Math.random() * 90) + 10);
+    return adj + "-" + noun + "-" + num;
+}
+
+function vfShowNameDropdown(serviceId, systemUrl) {
+    var dropdown = $("#vf-name-dropdown");
+    dropdown.empty();
+
+    for (var i = 0; i < 4; i++) {
+        var name = vfGenerateFriendlyName();
+        var opt = $('<div class="vf-name-option"></div>').text(name);
+        (function (n) {
+            opt.on("click", function () {
+                $("#vf-rename-input").val(n);
+                dropdown.hide();
+            });
+        })(name);
+        dropdown.append(opt);
+    }
+
+    var refreshBtn = $('<div class="vf-name-option text-muted" style="text-align:center;cursor:pointer;">&#x21bb; More options</div>');
+    refreshBtn.on("click", function () {
+        vfShowNameDropdown(serviceId, systemUrl);
+    });
+    dropdown.append(refreshBtn);
+    dropdown.show();
+}
+
+function vfRenameServer(serviceId, systemUrl) {
+    var name = $("#vf-rename-input").val().trim().toLowerCase();
+    var alertDiv = $("#vf-rename-alert");
+    alertDiv.hide();
+
+    if (!name || !/^[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?$/.test(name)) {
+        alertDiv.removeClass("alert-success").addClass("alert alert-danger");
+        alertDiv.text("Invalid name. Use lowercase letters, numbers, and hyphens (2-63 chars, must start/end with alphanumeric).");
+        alertDiv.show();
+        return;
+    }
+
+    var btn = $("#vf-rename-save");
+    btn.prop("disabled", true);
+
+    $.ajax({
+        type: "POST",
+        dataType: "json",
+        url: systemUrl + "modules/servers/VirtFusionDirect/client.php?serviceID=" + encodeURIComponent(serviceId) + "&action=rename",
+        data: { name: name }
+    }).done(function (response) {
+        if (response.success) {
+            alertDiv.removeClass("alert-danger").addClass("alert alert-success");
+            alertDiv.text("Server renamed successfully.");
+        } else {
+            alertDiv.removeClass("alert-success").addClass("alert alert-danger");
+            alertDiv.text("Rename failed. Please try again.");
+        }
+        alertDiv.show();
+    }).fail(function () {
+        alertDiv.removeClass("alert-success").addClass("alert alert-danger");
+        alertDiv.text("An error occurred. Please try again.");
+        alertDiv.show();
+    }).always(function () {
+        btn.prop("disabled", false);
+        setTimeout(function () { alertDiv.fadeOut(); }, 3000);
+    });
+}
+
+// =========================================================================
+// Utility — Copy to Clipboard
+// =========================================================================
+
+function vfCopyButton(text) {
+    var btn = $('<button type="button" class="btn btn-sm vf-ip-copy" title="Copy"></button>');
+    btn.html('<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M4 2a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H6z"/><path d="M2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1H2z"/></svg>');
+    btn.on("click", function () {
+        var $this = $(this);
+        navigator.clipboard.writeText(text).then(function () {
+            $this.html('<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M13.485 1.929a.75.75 0 0 1 .086 1.057l-7.5 9a.75.75 0 0 1-1.1.043l-3.5-3.5a.75.75 0 0 1 1.06-1.06l2.915 2.915 6.982-8.382a.75.75 0 0 1 1.057-.073z"/></svg>');
+            var tooltip = $('<span class="vf-copy-tooltip">Copied!</span>');
+            $this.parent().append(tooltip);
+            setTimeout(function () {
+                tooltip.remove();
+                $this.html('<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M4 2a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H6z"/><path d="M2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1H2z"/></svg>');
+            }, 1500);
+        }).catch(function () {
+            var tooltip = $('<span class="vf-copy-tooltip" style="background:#dc3545;">Failed</span>');
+            $this.parent().append(tooltip);
+            setTimeout(function () { tooltip.remove(); }, 1500);
+        });
+    });
+    return btn;
+}

modules/servers/VirtFusionDirect/templates/overview.tpl

@@ -1,5 +1,5 @@
-<link href="{$systemURL}modules/servers/VirtFusionDirect/templates/css/module.css?v=20260207" rel="stylesheet">
-<script src="{$systemURL}modules/servers/VirtFusionDirect/templates/js/module.js?v=20260207"></script>
+<link href="{$systemURL}modules/servers/VirtFusionDirect/templates/css/module.css?v=20260319" rel="stylesheet">
+<script src="{$systemURL}modules/servers/VirtFusionDirect/templates/js/module.js?v=20260319"></script>
 
 {if $serviceStatus eq 'Active'}
 
@@ -12,9 +12,27 @@
         </h3>
     </div>
     <div class="panel-body card-body p-4">
+        <div id="vf-action-progress" style="display:none;">
+            <div class="spinner-border spinner-border-sm text-light"></div>
+            <span id="vf-action-progress-text"></span>
+            <span id="vf-action-progress-timer" class="ml-auto" style="margin-left:auto;"></span>
+        </div>
         <div id="vf-server-info-loader-container">
-            <div id="vf-server-info-loader" class="d-flex align-items-center justify-content-center">
-                <div class="spinner-border"></div>
+            <div id="vf-server-info-loader">
+                <div class="row">
+                    <div class="col-md-6">
+                        <div class="vf-skeleton vf-skeleton-line vf-skeleton-line-medium"></div>
+                        <div class="vf-skeleton vf-skeleton-line vf-skeleton-line-short"></div>
+                        <div class="vf-skeleton vf-skeleton-line vf-skeleton-line-medium"></div>
+                        <div class="vf-skeleton vf-skeleton-line vf-skeleton-line-short"></div>
+                    </div>
+                    <div class="col-md-6">
+                        <div class="vf-skeleton vf-skeleton-line vf-skeleton-line-medium"></div>
+                        <div class="vf-skeleton vf-skeleton-line vf-skeleton-line-short"></div>
+                        <div class="vf-skeleton vf-skeleton-line vf-skeleton-line-medium"></div>
+                        <div class="vf-skeleton vf-skeleton-line vf-skeleton-line-short"></div>
+                    </div>
+                </div>
             </div>
         </div>
         <script>vfServerData('{$serviceid}', '{$systemURL}');</script>
@@ -27,7 +45,15 @@
                     <div class="col-md-6">
                         <div class="row p-1">
                             <div class="col-xs-4 col-4 text-right vf-bold">Name:</div>
-                            <div class="col-xs-8 col-8" id="vf-data-server-name"></div>
+                            <div class="col-xs-8 col-8">
+                                <div class="d-flex" style="display:flex; gap:6px; align-items:center;">
+                                    <input type="text" id="vf-rename-input" class="form-control form-control-sm" maxlength="63" style="max-width:200px;" placeholder="Server name">
+                                    <button id="vf-randomise-btn" onclick="vfShowNameDropdown('{$serviceid}','{$systemURL}')" type="button" class="btn btn-sm btn-outline-secondary" title="Randomise">&#x21bb;</button>
+                                    <button id="vf-rename-save" onclick="vfRenameServer('{$serviceid}','{$systemURL}')" type="button" class="btn btn-sm btn-primary">Save</button>
+                                </div>
+                                <div id="vf-name-dropdown" style="display:none;"></div>
+                                <div id="vf-rename-alert" class="mt-1" style="display:none;"></div>
+                            </div>
                         </div>
                         <div class="row p-1">
                             <div class="col-xs-4 col-4 text-right vf-bold">Hostname:</div>
@@ -136,6 +162,27 @@
                 </button>
             </div>
             {/if}
+            <div class="col-12">
+                <hr>
+                <div id="vf-server-password-alert" class="alert" style="display:none;"></div>
+                <p class="vf-small text-muted">Reset the server's root password. The new password will be copied to your clipboard automatically.</p>
+                <button id="vf-server-password-btn" onclick="vfResetServerPassword('{$serviceid}','{$systemURL}')" type="button" class="btn btn-warning text-uppercase d-flex align-items-center">
+                    <span id="vf-server-password-spinner" class="spinner-border spinner-border-sm vf-spinner-margin" style="display:none;"></span>
+                    Reset Server Password
+                </button>
+            </div>
+            <div class="col-12" id="vf-backups-section" style="display:none;">
+                <hr>
+                <h5 class="vf-bold">Backups</h5>
+                <div id="vf-backups-loader"><div class="spinner-border spinner-border-sm"></div></div>
+                <div id="vf-backups-timeline" class="vf-timeline"></div>
+                <button id="vf-backups-show-all" class="btn btn-sm btn-link" style="display:none;" onclick="$('.vf-timeline-item-hidden').show(); $(this).hide();">Show all</button>
+            </div>
+            <script>
+            if (typeof vfLoadBackups === 'function') {
+                vfLoadBackups('{$serviceid}', '{$systemURL}');
+            }
+            </script>
         </div>
     </div>
 </div>
@@ -150,16 +197,16 @@
         <div class="alert alert-warning">
             <strong>Warning:</strong> Rebuilding your server will erase all data on the server and reinstall the operating system. This action cannot be undone.
         </div>
-        <div class="row">
-            <div class="col-md-6">
-                <div class="form-group mb-3">
-                    <label for="vf-rebuild-os">Operating System</label>
-                    <select id="vf-rebuild-os" class="form-control">
-                        <option value="">Loading...</option>
-                    </select>
-                </div>
-            </div>
+        <input type="hidden" id="vf-rebuild-os" value="">
+        <div class="form-group mb-3">
+            <label>Operating System</label>
+            <input type="text" id="vf-os-search" class="form-control vf-os-search" placeholder="Search templates...">
         </div>
+        <div id="vf-os-gallery-loader" class="mb-3">
+            <div class="vf-skeleton" style="height:120px;"></div>
+        </div>
+        <div id="vf-os-gallery" class="mb-3" style="display:none;"></div>
+        <div id="vf-os-details" class="mb-3" style="display:none;"></div>
         <button id="vf-rebuild-button" onclick="vfRebuildServer('{$serviceid}','{$systemURL}')" type="button" class="btn btn-danger text-uppercase d-flex align-items-center">
             <span id="vf-rebuild-spinner" class="spinner-border spinner-border-sm vf-spinner-margin" style="display:none;"></span>
             Rebuild Server
@@ -235,6 +282,21 @@
                 </div>
             </div>
         </div>
+        <div id="vf-traffic-chart-section" style="display:none;">
+            <hr>
+            <h5 class="vf-bold mb-2">Traffic Usage</h5>
+            <canvas id="vf-traffic-chart" style="width:100%; height:200px;"></canvas>
+            <div class="row mt-2 text-center">
+                <div class="col-4"><small class="text-muted">Used</small><div id="vf-traffic-used" class="vf-bold">-</div></div>
+                <div class="col-4"><small class="text-muted">Limit</small><div id="vf-traffic-limit" class="vf-bold">-</div></div>
+                <div class="col-4"><small class="text-muted">Remaining</small><div id="vf-traffic-remaining" class="vf-bold">-</div></div>
+            </div>
+        </div>
+        <script>
+        if (typeof vfLoadTrafficStats === 'function') {
+            vfLoadTrafficStats('{$serviceid}', '{$systemURL}');
+        }
+        </script>
     </div>
 </div>
 
@@ -246,10 +308,37 @@
     <div class="panel-body card-body p-4">
         <div id="vf-vnc-alert" class="alert" style="display: none;"></div>
         <p>Access your server's console directly in your browser. The server must be running for VNC access.</p>
-        <button id="vf-vnc-button" onclick="vfOpenVnc('{$serviceid}','{$systemURL}')" type="button" class="btn btn-primary text-uppercase d-flex align-items-center">
-            <span id="vf-vnc-spinner" class="spinner-border spinner-border-sm vf-spinner-margin" style="display:none;"></span>
-            Open Console
-        </button>
+        <div class="d-flex align-items-center mb-3" style="display:flex; gap:12px; align-items:center;">
+            <button id="vf-vnc-button" onclick="vfOpenVnc('{$serviceid}','{$systemURL}')" type="button" class="btn btn-primary text-uppercase d-flex align-items-center">
+                <span id="vf-vnc-spinner" class="spinner-border spinner-border-sm vf-spinner-margin" style="display:none;"></span>
+                Open Console
+            </button>
+            <label class="vf-toggle-label mb-0" style="display:flex; align-items:center; gap:6px; cursor:pointer;">
+                <input type="checkbox" id="vf-vnc-toggle" class="vf-toggle-input" onchange="vfToggleVnc('{$serviceid}','{$systemURL}', this.checked)">
+                <span class="vf-toggle-switch"></span>
+                <span class="vf-small">VNC Enabled</span>
+            </label>
+        </div>
+        <div id="vf-vnc-details" style="display:none;">
+            <div class="row">
+                <div class="col-md-6">
+                    <div class="row p-1">
+                        <div class="col-4 text-right vf-bold vf-small">IP:</div>
+                        <div class="col-8 vf-small" id="vf-vnc-ip">-</div>
+                    </div>
+                    <div class="row p-1">
+                        <div class="col-4 text-right vf-bold vf-small">Port:</div>
+                        <div class="col-8 vf-small" id="vf-vnc-port">-</div>
+                    </div>
+                </div>
+                <div class="col-md-6">
+                    <button type="button" class="btn btn-sm btn-outline-secondary" onclick="vfCopyVncPassword('{$serviceid}','{$systemURL}')">
+                        Copy VNC Password
+                    </button>
+                    <span id="vf-vnc-copy-confirm" class="text-success vf-small" style="display:none;">Copied!</span>
+                </div>
+            </div>
+        </div>
     </div>
 </div>