From c1fdc163de7764ef88233e33b638d7518cb8c561 Mon Sep 17 00:00:00 2001
From: Antonio SJ Musumeci <trapexit@spawn.link>
Date: Sat, 3 Jan 2026 18:28:05 -0600
Subject: [PATCH] mergerfs_webui.cpp

---
 index.html             | 119 ++++++++++++++++++++++++-----------------
 src/mergerfs_webui.cpp |   1 +
 2 files changed, 70 insertions(+), 50 deletions(-)
diff --git a/index.html b/index.html
index 7bc5521a..daf9e02e 100644
--- a/index.html
+++ b/index.html
@@ -191,17 +191,10 @@
   </head>
   <body>
     <div class="tab">
-      <button class="tablinks active" onclick="openTab(event, 'Advanced')">Advanced</button>
-      <button class="tablinks" onclick="openTab(event, 'Branches')">Branches</button>
+      <button class="tablinks active" onclick="openTab(event, 'Branches')">Branches</button>
+      <button class="tablinks" onclick="openTab(event, 'Advanced')">Advanced</button>
     </div>
-    <div id="Advanced" class="tabcontent" style="display: block;">
-      <div>
-        <label for="mount-select-advanced">Select Mountpoint:</label>
-        <select id="mount-select-advanced"></select>
-      </div>
-      <div id="kv-list"></div>
-    </div>
-    <div id="Branches" class="tabcontent">
+    <div id="Branches" class="tabcontent" style="display: block;">
       <div>
         <label for="mount-select-branches">Select Mountpoint:</label>
         <select id="mount-select-branches"></select>
@@ -212,6 +205,13 @@
       </div>
       <div id="branches-list"></div>
     </div>
+    <div id="Advanced" class="tabcontent">
+      <div>
+        <label for="mount-select-advanced">Select Mountpoint:</label>
+        <select id="mount-select-advanced"></select>
+      </div>
+      <div id="kv-list"></div>
+    </div>
     <div id="pathModal" class="modal">
       <div class="modal-content">
         <span class="close-modal" onclick="closePathModal()">&times;</span>
@@ -251,31 +251,40 @@
       function getMounts() {
           return g_mounts;
       }
-      function loadMounts() {
-          fetch('/mounts')
-              .then(r => r.json())
-              .then(data => {
-                  g_mounts = data;
-                  populateMountSelect('mount-select-advanced', function() {
-                      loadAllForMount(this.value);
-                  });
-                  populateMountSelect('mount-select-branches', function() {
-                      loadAllForMount(this.value);
-                  });
-                  if (g_mounts.length > 0) {
-                      loadAllForMount(g_mounts[0]);
-                  }
-              });
-      }
-      function loadAllForMount(mount) {
-          let url = '/kvs?mount=' + encodeURIComponent(mount);
-          fetch(url)
-              .then(r => r.json())
-              .then(data => {
-                  renderKV(data, mount);
-                  renderBranches(data);
-              });
-      }
+       function loadMounts() {
+           fetch('/mounts')
+               .then(r => {
+                   if (!r.ok) throw new Error('Failed to fetch mounts');
+                   return r.json();
+               })
+               .then(data => {
+                   g_mounts = data;
+                   populateMountSelect('mount-select-advanced', function() {
+                       loadAllForMount(this.value);
+                   });
+                   populateMountSelect('mount-select-branches', function() {
+                       loadAllForMount(this.value);
+                   });
+                   if (g_mounts.length > 0) {
+                       loadAllForMount(g_mounts[0]);
+                   }
+               })
+               .catch(err => console.error('Error loading mounts:', err));
+       }
+       function loadAllForMount(mount) {
+           if (!mount) return;
+           let url = '/kvs?mount=' + encodeURIComponent(mount);
+           fetch(url)
+               .then(r => {
+                   if (!r.ok) throw new Error('Failed to fetch kvs');
+                   return r.json();
+               })
+               .then(data => {
+                   renderKV(data, mount);
+                   renderBranches(data);
+               })
+               .catch(err => console.error('Error loading kvs for mount:', mount, err));
+       }
       function renderKV(data, mount) {
           const div = document.getElementById('kv-list');
           div.innerHTML = '';
@@ -331,23 +340,33 @@
           }
           div.appendChild(table);
       }
-      function renderBranches(data) {
-          const div = document.getElementById('branches-list');
-          div.innerHTML = '';
-          const branchesStr = data.branches;
-          if (!branchesStr) {
-              addBranchEntry();
-              return;
-          }
-          const branches = branchesStr.split(':').map(b => b.trim()).filter(b => b);
-          branches.forEach(branch => {
-              addBranchEntry(branch);
-          });
-      }
+       function renderBranches(data) {
+           console.log('renderBranches called with data:', data);
+           console.log('All keys in data:', Object.keys(data));
+           const div = document.getElementById('branches-list');
+           if (!div) {
+               console.error('branches-list element not found');
+               return;
+           }
+           div.innerHTML = '';
+           const branchesStr = data.branches || data.branch || data.libfuse_branches;
+           console.log('branchesStr:', branchesStr);
+           if (!branchesStr) {
+               console.log('No branches data found, keys available:', Object.keys(data));
+               addBranchEntry();
+               return;
+           }
+           const branches = branchesStr.split(':').map(b => b.trim()).filter(b => b);
+           console.log('Parsed branches:', branches);
+           branches.forEach(branch => {
+               addBranchEntry(branch);
+           });
+       }
       let branchEntryCounter = 0;
       let pendingPathInput = null;
-      function addBranchEntry(path = '', mode = 'RW', minfreespace = '') {
-          const container = document.getElementById('branches-list');
+       function addBranchEntry(path = '', mode = 'RW', minfreespace = '') {
+           console.log('addBranchEntry called with path:', path, 'mode:', mode);
+           const container = document.getElementById('branches-list');
           const entry = document.createElement('div');
           entry.className = 'branch-entry';
           entry.id = 'branch-entry-' + branchEntryCounter++;
diff --git a/src/mergerfs_webui.cpp b/src/mergerfs_webui.cpp
index d74d7c73..75c31bca 100644
--- a/src/mergerfs_webui.cpp
+++ b/src/mergerfs_webui.cpp
@@ -252,6 +252,7 @@ mergerfs::webui::main(const int   argc_,
   http_server.Get("/",::_get_root);
   http_server.Get("/mounts",::_get_mounts);
   http_server.Get("/kvs",::_get_kvs);
+  http_server.Get("/kvs/:key",::_get_kv);
   http_server.Post("/kvs",::_post_kvs);
 
   http_server.listen(host,port);
