feat: enhance volume management with support for multiple volumes and improved API endpoints

Co-authored-by: Copilot <copilot@github.com>

panel/frontend/index.html

@@ -366,10 +366,11 @@ const api = {
   restore: (n, f)      => api.request(`/apps/${n}/restore`, "POST", { file: f }),
   renderRoute: (n)     => api.request(`/apps/${n}/render-route`, "POST"),
   clearVolume: (n)     => api.request(`/apps/${n}/volume-clear`, "POST"),
-  getVolumeFiles: (n, p) => api.request(`/apps/${n}/volume/files?path=${encodeURIComponent(p)}`),
+  getVolumes: (n)      => api.request(`/apps/${n}/volumes`),
-  deleteFile: (n, p)   => api.request(`/apps/${n}/volume/files?path=${encodeURIComponent(p)}`, "DELETE"),
+  getVolumeFiles: (n, p, v) => api.request(`/apps/${n}/volume/files?vol=${encodeURIComponent(v || "default")}&path=${encodeURIComponent(p)}`),
-  uploadFile: async (n, p, f) => {
+  deleteFile: (n, p, v)   => api.request(`/apps/${n}/volume/files?vol=${encodeURIComponent(v || "default")}&path=${encodeURIComponent(p)}`, "DELETE"),
-    const res = await fetch(`/apps/${n}/volume/files?path=${encodeURIComponent(p)}`, {
+  uploadFile: async (n, p, v, f) => {
+    const res = await fetch(`/apps/${n}/volume/files?vol=${encodeURIComponent(v || "default")}&path=${encodeURIComponent(p)}`, {
       method: "PUT",
       body: f,
       headers: { "Content-Length": f.size.toString() }
@@ -385,6 +386,7 @@ let apps = [];
 let expandedApp = null;
 let activeTab = {};  // { appName: tabName }
 let volumeLocations = {}; // { appName: currentPathString }
+let selectedVolumes = {}; // { appName: currentVolumeString }
 
 // ─── Status bar ───
 const statusEl = document.getElementById("status");
@@ -513,10 +515,11 @@ function renderAppCard(app) {
         <div class="log-output" id="logs-${app.name}">Click "Refresh Logs" to load.</div>
       </div>
       <div class="tab-panel" id="tab-volumes-${app.name}">
-        <div class="btn-group" style="margin-bottom:10px;">
+        <div class="btn-group" style="margin-bottom:10px; align-items:center;">
+          <select id="volume-select-${app.name}" style="width:140px;padding:4px 8px;font-size:0.8rem;"></select>
           <button class="btn-sm btn-primary" data-action="volume-refresh" data-app="${app.name}">Refresh Files</button>
           <button class="btn-sm" data-action="volume-upload" data-app="${app.name}">Upload</button>
-          <button class="btn-sm btn-danger" data-action="volume-clear" data-app="${app.name}">Clear Volume</button>
+          <button class="btn-sm btn-danger" data-action="volume-clear" data-app="${app.name}" id="btn-vol-clear-${app.name}">Clear Bind</button>
         </div>
         <input type="file" id="volume-upload-input-${app.name}" style="display:none;" />
         <div style="margin-bottom:8px;font-size:0.85rem;" id="volume-path-${app.name}">/</div>
@@ -601,7 +604,7 @@ function attachCardListeners() {
 
       if (tabName === "logs") loadLogs(app);
       if (tabName === "backups") loadBackups(app);
-      if (tabName === "volumes") loadVolume(app, "");
+      if (tabName === "volumes") initVolumesTab(app);
     };
   });
 
@@ -686,14 +689,18 @@ async function handleAction(action, name, btnElement) {
         break;
       case "volume-refresh":
         const curPath = volumeLocations[name] || "";
-        await loadVolume(name, curPath);
+        await loadVolume(name, curPath, selectedVolumes[name]);
         break;
       case "volume-clear":
-        if (confirm("Are you sure? This deletes ALL data inside the volume right now!")) {
+        if (selectedVolumes[name] && selectedVolumes[name] !== "default") {
+          setStatus("Clear is only supported for the 'default' managed local bind right now.", true);
+          break;
+        }
+        if (confirm("Are you sure? This deletes ALL data inside the default volume right now!")) {
           setStatus(`Clearing volume for ${name}...`);
           await api.clearVolume(name);
           setStatus(`Volume cleared for ${name}.`);
-          await loadVolume(name, "");
+          await loadVolume(name, "", selectedVolumes[name]);
         }
         break;
       case "volume-upload":
@@ -704,9 +711,9 @@ async function handleAction(action, name, btnElement) {
           const uploadPath = (volumeLocations[name] ? volumeLocations[name] + "/" : "") + file.name;
           try {
             setStatus(`Uploading ${file.name} to ${name}...`);
-            await api.uploadFile(name, uploadPath, file);
+            await api.uploadFile(name, uploadPath, selectedVolumes[name], file);
             setStatus(`Uploaded ${file.name} successfully.`);
-            await loadVolume(name, volumeLocations[name] || "");
+            await loadVolume(name, volumeLocations[name] || "", selectedVolumes[name]);
           } catch(uploadErr) {
             setStatus(`Upload failed: ${uploadErr.message}`, true);
           }
@@ -821,7 +828,38 @@ async function loadLogs(name) {
 
 window.api = api;  // Expose for inline html onclicks
 
-async function loadVolume(name, currentPath) {
+async function initVolumesTab(name) {
+  if (!selectedVolumes[name]) {
+    try {
+      const vdata = await api.getVolumes(name);
+      const sel = document.getElementById(`volume-select-${name}`);
+      sel.innerHTML = "";
+      Object.keys(vdata.volumes).forEach(vKey => {
+        const opt = document.createElement("option");
+        opt.value = vKey;
+        opt.textContent = vKey;
+        sel.appendChild(opt);
+      });
+      selectedVolumes[name] = sel.value || "default";
+
+      sel.onchange = () => {
+        selectedVolumes[name] = sel.value;
+        const btnClear = document.getElementById(`btn-vol-clear-${name}`);
+        if(btnClear) btnClear.style.display = sel.value === "default" ? "inline-block" : "none";
+        loadVolume(name, "", sel.value);
+      };
+      
+      const btnClear = document.getElementById(`btn-vol-clear-${name}`);
+      if(btnClear) btnClear.style.display = selectedVolumes[name] === "default" ? "inline-block" : "none";
+    } catch(err) {
+      console.error(err);
+      selectedVolumes[name] = "default";
+    }
+  }
+  loadVolume(name, "", selectedVolumes[name]);
+}
+
+async function loadVolume(name, currentPath, volName) {
   volumeLocations[name] = currentPath;
   const pathLabel = currentPath ? currentPath : "/";
   document.getElementById(`volume-path-${name}`).innerHTML = `
@@ -829,7 +867,7 @@ async function loadVolume(name, currentPath) {
   `;
 
   try {
-    const data = await api.getVolumeFiles(name, currentPath);
+    const data = await api.getVolumeFiles(name, currentPath, volName);
     const container = document.getElementById(`volumes-${name}`);
     container.innerHTML = "";
 
@@ -838,7 +876,7 @@ async function loadVolume(name, currentPath) {
       const item = document.createElement("div");
       item.className = "backup-item";
       item.style.cursor = "pointer";
-      item.onclick = () => loadVolume(name, upPath);
+      item.onclick = () => loadVolume(name, upPath, volName);
       item.innerHTML = `
         <div style="flex:1;color:var(--accent);font-weight:bold;">
           📁 ..
@@ -886,7 +924,7 @@ async function loadVolume(name, currentPath) {
       if (f.is_dir) {
         spanName.style.cursor = "pointer";
         spanName.style.color = "var(--accent)";
-        spanName.onclick = () => loadVolume(name, fullPath);
+        spanName.onclick = () => loadVolume(name, fullPath, volName);
       }
       
       titleDiv.appendChild(spanIcon);
@@ -910,7 +948,7 @@ async function loadVolume(name, currentPath) {
         downloadBtn.style.padding = "2px 6px";
         downloadBtn.style.fontSize = "0.75rem";
         downloadBtn.textContent = "⬇️";
-        downloadBtn.onclick = () => window.open(`/apps/${name}/volume/download?path=${encodeURIComponent(fullPath)}`);
+        downloadBtn.onclick = () => window.open(`/apps/${name}/volume/download?vol=${encodeURIComponent(volName)}&path=${encodeURIComponent(fullPath)}`);
         actionsDiv.appendChild(downloadBtn);
       }
 
@@ -921,8 +959,8 @@ async function loadVolume(name, currentPath) {
       delBtn.textContent = "🗑️";
       delBtn.onclick = async () => {
         if (confirm(`Delete ${f.name}?`)) {
-          await window.api.deleteFile(name, fullPath);
+          await window.api.deleteFile(name, fullPath, volName);
-          loadVolume(name, currentPath);
+          loadVolume(name, currentPath, volName);
         }
       };
       actionsDiv.appendChild(delBtn);

panel/panel-api.py

@@ -48,6 +48,16 @@ def parse_env_blob(blob):
     return out
 
 
+def get_app_volumes(name):
+    result = run_panelctl(["inspect-volumes", name])
+    volumes = {}
+    if result["ok"]:
+        for line in result["stdout"].splitlines():
+            if "|" in line:
+                vname, vpath = line.split("|", 1)
+                volumes[vname.strip()] = vpath.strip()
+    return volumes
+
 def read_app_info(name):
     if not is_safe_name(name):
         return None, {"ok": False, "error": "invalid app name"}
@@ -311,6 +321,16 @@ class Handler(BaseHTTPRequestHandler):
             self._json(200, {"ok": True, "app": parse_env_blob(result["stdout"])})
             return
 
+        # /apps/<name>/volumes
+        if len(parts) == 3 and parts[0] == "apps" and parts[2] == "volumes":
+            name = parts[1]
+            if not is_safe_name(name):
+                self._json(400, {"ok": False, "error": "invalid app name"})
+                return
+            volumes = get_app_volumes(name)
+            self._json(200, {"ok": True, "name": name, "volumes": volumes})
+            return
+
         # /apps/<name>/volume/files
         if len(parts) == 4 and parts[0] == "apps" and parts[2] == "volume" and parts[3] == "files":
             name = parts[1]
@@ -319,8 +339,14 @@ class Handler(BaseHTTPRequestHandler):
                 self._json(404, err)
                 return
                 
+            volumes = get_app_volumes(name)
+            vol_key = query.get("vol", ["default"])[0]
+            if vol_key not in volumes:
+                self._json(400, {"ok": False, "error": "invalid volume specified"})
+                return
+                
             subpath = query.get("path", [""])[0].strip("/")
-            data_dir = os.path.join(app["APP_VOLUME_DIR"], "data")
+            data_dir = volumes[vol_key]
             target_dir = os.path.abspath(os.path.join(data_dir, subpath))
             
             # Ensure traversal didn't escape data_dir
@@ -364,12 +390,18 @@ class Handler(BaseHTTPRequestHandler):
                 self._json(404, err)
                 return
                 
+            volumes = get_app_volumes(name)
+            vol_key = query.get("vol", ["default"])[0]
+            if vol_key not in volumes:
+                self._json(400, {"ok": False, "error": "invalid volume specified"})
+                return
+                
             subpath = query.get("path", [""])[0].strip("/")
             if not subpath:
                 self._json(400, {"ok": False, "error": "path parameter required"})
                 return
                 
-            data_dir = os.path.join(app["APP_VOLUME_DIR"], "data")
+            data_dir = volumes[vol_key]
             target_file = os.path.abspath(os.path.join(data_dir, subpath))
             
             if not target_file.startswith(os.path.abspath(data_dir)):
@@ -406,12 +438,18 @@ class Handler(BaseHTTPRequestHandler):
                 self._json(404, err)
                 return
             
+            volumes = get_app_volumes(name)
+            vol_key = query.get("vol", ["default"])[0]
+            if vol_key not in volumes:
+                self._json(400, {"ok": False, "error": "invalid volume specified"})
+                return
+                
             subpath = query.get("path", [""])[0].strip("/")
             if not subpath:
                 self._json(400, {"ok": False, "error": "path parameter required"})
                 return
                 
-            data_dir = os.path.join(app["APP_VOLUME_DIR"], "data")
+            data_dir = volumes[vol_key]
             target_file = os.path.abspath(os.path.join(data_dir, subpath))
             if not target_file.startswith(os.path.abspath(data_dir)):
                 self._json(403, {"ok": False, "error": "path traversal denied"})
@@ -446,12 +484,18 @@ class Handler(BaseHTTPRequestHandler):
                 self._json(404, err)
                 return
                 
+            volumes = get_app_volumes(name)
+            vol_key = query.get("vol", ["default"])[0]
+            if vol_key not in volumes:
+                self._json(400, {"ok": False, "error": "invalid volume specified"})
+                return
+                
             subpath = query.get("path", [""])[0].strip("/")
             if not subpath:
                 self._json(400, {"ok": False, "error": "path parameter required"})
                 return
                 
-            data_dir = os.path.join(app["APP_VOLUME_DIR"], "data")
+            data_dir = volumes[vol_key]
             target_file = os.path.abspath(os.path.join(data_dir, subpath))
             
             if not target_file.startswith(os.path.abspath(data_dir)):

panel/panelctl.sh

@@ -536,24 +536,6 @@ cmd_volume_clear() {
   log info "volume data cleared for app '${name}'"
 }
 
-cmd_volume_clear() {
-  local name="$1"
-  validate_name "${name}"
-  load_app "${name}"
-
-  log info "clearing volume data for app '${name}'"
-  run_compose -f "${APP_COMPOSE_FILE}" down --remove-orphans 2>/dev/null || true
-
-  local data_dir="${APP_VOLUME_DIR}/data"
-  if [[ -d "${data_dir}" ]]; then
-    rm -rf "${data_dir:?}"/*
-    rm -rf "${data_dir:?}"/.[!.]* 2>/dev/null || true
-  fi
-  mkdir -p "${APP_VOLUME_DIR}/data"
-
-  log info "volume data cleared for app '${name}'"
-}
-
 cmd_restore() {
   local name="$1"
   local backup_file="$2"
@@ -590,6 +572,26 @@ cmd_restore() {
   log info "run 'panelctl deploy ${name}' to start the app'"
 }
 
+cmd_inspect_volumes() {
+  local name="$1"
+  validate_name "${name}"
+  load_app "${name}"
+
+  echo "default|${APP_VOLUME_DIR}/data"
+  
+  local podman_bin=""
+  if command -v podman >/dev/null 2>&1; then
+    podman_bin="$(command -v podman)"
+  elif [[ -x /run/current-system/sw/bin/podman ]]; then
+    podman_bin="/run/current-system/sw/bin/podman"
+  fi
+
+  if [[ -n "${podman_bin}" ]]; then
+    "${podman_bin}" volume ls --filter label=com.docker.compose.project="${name}" --format '{{.Name}}|{{.Mountpoint}}' 2>/dev/null || true
+    "${podman_bin}" volume ls --filter label=io.podman.compose.project="${name}" --format '{{.Name}}|{{.Mountpoint}}' 2>/dev/null || true
+  fi | sort -u | grep -v '^$'
+}
+
 cmd_list() {
   ensure_base_dirs
   local found=0
@@ -668,6 +670,14 @@ main() {
       [[ $# -eq 3 ]] || fail "usage: panelctl restore <name> <backup-file>"
       cmd_restore "$2" "$3"
       ;;
+    volume-clear)
+      [[ $# -eq 2 ]] || fail "usage: panelctl volume-clear <name>"
+      cmd_volume_clear "$2"
+      ;;
+    inspect-volumes)
+      [[ $# -eq 2 ]] || fail "usage: panelctl inspect-volumes <name>"
+      cmd_inspect_volumes "$2"
+      ;;
     list)
       [[ $# -eq 1 ]] || fail "usage: panelctl list"
       cmd_list