feat: add volume management features including file upload, download, and clear actions

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

frontend/index.html

@@ -365,12 +365,26 @@ const api = {
   backup: (n)          => api.request(`/apps/${n}/backup`, "POST"),
   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)}`),
+  deleteFile: (n, p)   => api.request(`/apps/${n}/volume/files?path=${encodeURIComponent(p)}`, "DELETE"),
+  uploadFile: async (n, p, f) => {
+    const res = await fetch(`/apps/${n}/volume/files?path=${encodeURIComponent(p)}`, {
+      method: "PUT",
+      body: f,
+      headers: { "Content-Length": f.size.toString() }
+    });
+    const data = await res.json();
+    if (!res.ok) throw new Error(data.error || "upload failed");
+    return data;
+  },
 };
 
 // ─── State ───
 let apps = [];
 let expandedApp = null;
 let activeTab = {};  // { appName: tabName }
+let volumeLocations = {}; // { appName: currentPathString }
 
 // ─── Status bar ───
 const statusEl = document.getElementById("status");
@@ -474,6 +488,7 @@ function renderAppCard(app) {
       <div class="tabs">
         <button class="tab active" data-tab="compose" data-app="${app.name}">Compose</button>
         <button class="tab" data-tab="logs" data-app="${app.name}">Logs</button>
+        <button class="tab" data-tab="volumes" data-app="${app.name}">Volumes</button>
         <button class="tab" data-tab="backups" data-app="${app.name}">Backups</button>
         <button class="tab" data-tab="routing" data-app="${app.name}">Routing</button>
       </div>
@@ -497,6 +512,18 @@ function renderAppCard(app) {
         </div>
         <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;">
+          <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>
+        </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>
+        <div class="backup-list" id="volumes-${app.name}">
+          <div style="color:var(--muted);font-size:.85rem;">Click "Refresh Files" to load volume browser.</div>
+        </div>
+      </div>
       <div class="tab-panel" id="tab-backups-${app.name}">
         <div class="btn-group" style="margin-bottom:10px;">
           <button class="btn-sm btn-primary" data-action="create-backup" data-app="${app.name}">Create Backup</button>
@@ -568,11 +595,13 @@ function attachCardListeners() {
       // Update panels
       document.getElementById(`tab-compose-${app}`).classList.toggle("active", tabName === "compose");
       document.getElementById(`tab-logs-${app}`).classList.toggle("active", tabName === "logs");
+      document.getElementById(`tab-volumes-${app}`).classList.toggle("active", tabName === "volumes");
       document.getElementById(`tab-backups-${app}`).classList.toggle("active", tabName === "backups");
       document.getElementById(`tab-routing-${app}`).classList.toggle("active", tabName === "routing");
 
       if (tabName === "logs") loadLogs(app);
       if (tabName === "backups") loadBackups(app);
+      if (tabName === "volumes") loadVolume(app, "");
     };
   });
 
@@ -655,6 +684,36 @@ async function handleAction(action, name, btnElement) {
         await api.renderRoute(name);
         setStatus(`Route rendered for ${name}.`);
         break;
+      case "volume-refresh":
+        const curPath = volumeLocations[name] || "";
+        await loadVolume(name, curPath);
+        break;
+      case "volume-clear":
+        if (confirm("Are you sure? This deletes ALL data inside the volume right now!")) {
+          setStatus(`Clearing volume for ${name}...`);
+          await api.clearVolume(name);
+          setStatus(`Volume cleared for ${name}.`);
+          await loadVolume(name, "");
+        }
+        break;
+      case "volume-upload":
+        const uploadInput = document.getElementById(`volume-upload-input-${name}`);
+        uploadInput.onchange = async (e) => {
+          if (!e.target.files.length) return;
+          const file = e.target.files[0];
+          const uploadPath = (volumeLocations[name] ? volumeLocations[name] + "/" : "") + file.name;
+          try {
+            setStatus(`Uploading ${file.name} to ${name}...`);
+            await api.uploadFile(name, uploadPath, file);
+            setStatus(`Uploaded ${file.name} successfully.`);
+            await loadVolume(name, volumeLocations[name] || "");
+          } catch(uploadErr) {
+            setStatus(`Upload failed: ${uploadErr.message}`, true);
+          }
+          uploadInput.value = "";
+        };
+        uploadInput.click();
+        break;
       case "fetch-routing":
         setStatus(`Fetching routing details for ${name}...`);
         const appRes = await api.getApp(name);
@@ -760,6 +819,125 @@ async function loadLogs(name) {
   }
 }
 
+window.api = api;  // Expose for inline html onclicks
+
+async function loadVolume(name, currentPath) {
+  volumeLocations[name] = currentPath;
+  const pathLabel = currentPath ? currentPath : "/";
+  document.getElementById(`volume-path-${name}`).innerHTML = `
+    <span>${escHtml(pathLabel)}</span>
+  `;
+
+  try {
+    const data = await api.getVolumeFiles(name, currentPath);
+    const container = document.getElementById(`volumes-${name}`);
+    container.innerHTML = "";
+
+    if (currentPath) {
+      const upPath = currentPath.split("/").slice(0, -1).join("/");
+      const item = document.createElement("div");
+      item.className = "backup-item";
+      item.style.cursor = "pointer";
+      item.onclick = () => loadVolume(name, upPath);
+      item.innerHTML = `
+        <div style="flex:1;color:var(--accent);font-weight:bold;">
+          📁 ..
+        </div>
+      `;
+      container.appendChild(item);
+    }
+
+    if (!data.files || data.files.length === 0) {
+      const msg = document.createElement("div");
+      msg.style.color = "var(--muted)";
+      msg.style.padding = "10px";
+      msg.textContent = "Directory is empty.";
+      container.appendChild(msg);
+      return;
+    }
+
+    data.files.forEach(f => {
+      const fullPath = currentPath ? currentPath + "/" + f.name : f.name;
+      const item = document.createElement("div");
+      item.className = "backup-item";
+      item.style.gap = "8px";
+
+      const icon = f.is_dir ? "📁" : "📄";
+      const sizeStr = f.is_dir ? "" : (f.size > 1024 * 1024 ? (f.size / 1024 / 1024).toFixed(1) + "MB" : (f.size / 1024).toFixed(1) + "KB");
+
+      const titleDiv = document.createElement("div");
+      titleDiv.style.flex = "1";
+      titleDiv.style.display = "flex";
+      titleDiv.style.alignItems = "center";
+      titleDiv.style.minWidth = "0";
+      
+      const spanIcon = document.createElement("span");
+      spanIcon.style.marginRight = "8px";
+      spanIcon.style.fontSize = "1.2rem";
+      spanIcon.textContent = icon;
+      
+      const spanName = document.createElement("span");
+      spanName.style.fontFamily = "monospace";
+      spanName.style.fontSize = "0.85rem";
+      spanName.style.whiteSpace = "nowrap";
+      spanName.style.overflow = "hidden";
+      spanName.style.textOverflow = "ellipsis";
+      spanName.textContent = f.name;
+      if (f.is_dir) {
+        spanName.style.cursor = "pointer";
+        spanName.style.color = "var(--accent)";
+        spanName.onclick = () => loadVolume(name, fullPath);
+      }
+      
+      titleDiv.appendChild(spanIcon);
+      titleDiv.appendChild(spanName);
+      
+      const sizeDiv = document.createElement("div");
+      sizeDiv.style.color = "var(--muted)";
+      sizeDiv.style.fontSize = "0.8rem";
+      sizeDiv.style.whiteSpace = "nowrap";
+      sizeDiv.style.width = "60px";
+      sizeDiv.style.textAlign = "right";
+      sizeDiv.textContent = sizeStr;
+
+      const actionsDiv = document.createElement("div");
+      actionsDiv.style.display = "flex";
+      actionsDiv.style.gap = "4px";
+
+      if (!f.is_dir) {
+        const downloadBtn = document.createElement("button");
+        downloadBtn.className = "btn-sm";
+        downloadBtn.style.padding = "2px 6px";
+        downloadBtn.style.fontSize = "0.75rem";
+        downloadBtn.textContent = "⬇️";
+        downloadBtn.onclick = () => window.open(`/apps/${name}/volume/download?path=${encodeURIComponent(fullPath)}`);
+        actionsDiv.appendChild(downloadBtn);
+      }
+
+      const delBtn = document.createElement("button");
+      delBtn.className = "btn-sm btn-danger";
+      delBtn.style.padding = "2px 6px";
+      delBtn.style.fontSize = "0.75rem";
+      delBtn.textContent = "🗑️";
+      delBtn.onclick = async () => {
+        if (confirm(`Delete ${f.name}?`)) {
+          await window.api.deleteFile(name, fullPath);
+          loadVolume(name, currentPath);
+        }
+      };
+      actionsDiv.appendChild(delBtn);
+      
+      item.appendChild(titleDiv);
+      item.appendChild(sizeDiv);
+      item.appendChild(actionsDiv);
+      
+      container.appendChild(item);
+    });
+  } catch (err) {
+    document.getElementById(`volumes-${name}`).textContent = "Failed to load files: " + err.message;
+  }
+}
+
 async function loadBackups(name) {
   const el = document.getElementById(`backups-${name}`);
   if (!el) return;

panel-api.py

@@ -311,6 +311,168 @@ class Handler(BaseHTTPRequestHandler):
             self._json(200, {"ok": True, "app": parse_env_blob(result["stdout"])})
             return
 
+        # /apps/<name>/volume/files
+        if len(parts) == 4 and parts[0] == "apps" and parts[2] == "volume" and parts[3] == "files":
+            name = parts[1]
+            app, err = read_app_info(name)
+            if err is not None:
+                self._json(404, err)
+                return
+                
+            subpath = query.get("path", [""])[0].strip("/")
+            data_dir = os.path.join(app["APP_VOLUME_DIR"], "data")
+            target_dir = os.path.abspath(os.path.join(data_dir, subpath))
+            
+            # Ensure traversal didn't escape data_dir
+            if not target_dir.startswith(os.path.abspath(data_dir)):
+                self._json(403, {"ok": False, "error": "path traversal denied"})
+                return
+                
+            if not os.path.exists(target_dir):
+                self._json(404, {"ok": False, "error": "directory not found"})
+                return
+                
+            if not os.path.isdir(target_dir):
+                self._json(400, {"ok": False, "error": "target is not a directory"})
+                return
+                
+            files = []
+            for item in os.listdir(target_dir):
+                if item == "." or item == "..":
+                    continue
+                item_path = os.path.join(target_dir, item)
+                try:
+                    stat = os.stat(item_path)
+                    files.append({
+                        "name": item,
+                        "is_dir": os.path.isdir(item_path),
+                        "size": stat.st_size,
+                        "mtime": stat.st_mtime
+                    })
+                except OSError:
+                    continue
+                    
+            files.sort(key=lambda x: (not x["is_dir"], x["name"].lower()))
+            self._json(200, {"ok": True, "path": subpath, "files": files})
+            return
+
+        # /apps/<name>/volume/download
+        if len(parts) == 4 and parts[0] == "apps" and parts[2] == "volume" and parts[3] == "download":
+            name = parts[1]
+            app, err = read_app_info(name)
+            if err is not None:
+                self._json(404, err)
+                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")
+            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"})
+                return
+                
+            if not os.path.isfile(target_file):
+                self._json(404, {"ok": False, "error": "file not found"})
+                return
+                
+            self.send_response(200)
+            self.send_header("Content-Type", "application/octet-stream")
+            self.send_header("Content-Disposition", f'attachment; filename="{os.path.basename(target_file)}"')
+            size = os.path.getsize(target_file)
+            self.send_header("Content-Length", str(size))
+            self.end_headers()
+            with open(target_file, "rb") as fh:
+                while True:
+                    chunk = fh.read(65536)
+                    if not chunk:
+                        break
+                    self.wfile.write(chunk)
+            return
+
+        self._json(404, {"ok": False, "error": "not found"})
+
+    # ── PUT ──
+    def do_PUT(self):
+        path, parts, query = self._parse_path()
+        if len(parts) == 4 and parts[0] == "apps" and parts[2] == "volume" and parts[3] == "files":
+            name = parts[1]
+            app, err = read_app_info(name)
+            if err is not None:
+                self._json(404, err)
+                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")
+            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"})
+                return
+
+            try:
+                os.makedirs(os.path.dirname(target_file), exist_ok=True)
+                length = int(self.headers.get("Content-Length", "0"))
+                with open(target_file, "wb") as fh:
+                    bytes_read = 0
+                    while bytes_read < length:
+                        chunk = self.rfile.read(min(65536, length - bytes_read))
+                        if not chunk:
+                            break
+                        fh.write(chunk)
+                        bytes_read += len(chunk)
+                self._json(200, {"ok": True, "path": subpath})
+            except Exception as exc:
+                self._json(500, {"ok": False, "error": str(exc)})
+            return
+            
+        self._json(404, {"ok": False, "error": "not found"})
+
+    # ── DELETE ──
+    def do_DELETE(self):
+        path, parts, query = self._parse_path()
+        
+        if len(parts) == 4 and parts[0] == "apps" and parts[2] == "volume" and parts[3] == "files":
+            name = parts[1]
+            app, err = read_app_info(name)
+            if err is not None:
+                self._json(404, err)
+                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")
+            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"})
+                return
+
+            if not os.path.exists(target_file):
+                self._json(404, {"ok": False, "error": "file or directory not found"})
+                return
+                
+            try:
+                if os.path.isdir(target_file):
+                    import shutil
+                    shutil.rmtree(target_file)
+                else:
+                    os.remove(target_file)
+                self._json(200, {"ok": True, "deleted": subpath})
+            except Exception as exc:
+                self._json(500, {"ok": False, "error": str(exc)})
+            return
+            
         self._json(404, {"ok": False, "error": "not found"})
 
     # ── POST ──
@@ -401,7 +563,7 @@ class Handler(BaseHTTPRequestHandler):
                 return
 
             # Simple panelctl pass-through actions
-            if action in {"deploy", "stop", "restart", "render-route"}:
+            if action in {"deploy", "stop", "restart", "render-route", "volume-clear"}:
                 if not is_safe_name(name):
                     self._json(400, {"ok": False, "error": "invalid app name"})
                     return

panelctl.sh

@@ -31,6 +31,7 @@ Usage:
   panelctl backup <name>
   panelctl list-backups <name>
   panelctl restore <name> <backup-file>
+  panelctl volume-clear <name>
   panelctl validate-compose <name>
   panelctl list
   panelctl show <name>
@@ -497,6 +498,7 @@ cmd_backup() {
 cmd_list_backups() {
   local name="$1"
   validate_name "${name}"
+  load_app "${name}"
 
   ensure_base_dirs
 
@@ -516,6 +518,42 @@ cmd_list_backups() {
   fi
 }
 
+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_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"