feat: sliding tab indicator on server detail page

Author: ddrayko

public/css/style.css

@@ -993,6 +993,7 @@ tbody tr:hover {
 
 /* ===== TABS ===== */
 .tabs {
+  position: relative;
   display: flex;
   gap: 4px;
   margin-bottom: 24px;
@@ -1008,9 +1009,8 @@ tbody tr:hover {
   font-size: 0.9rem;
   font-weight: 500;
   cursor: pointer;
-  border-bottom: 2px solid transparent;
   margin-bottom: -1px;
-  transition: color 0.15s, border-color 0.15s;
+  transition: color 0.15s;
 }
 
 .tab:hover {
@@ -1019,7 +1019,16 @@ tbody tr:hover {
 
 .tab.active {
   color: var(--accent-1);
-  border-bottom-color: var(--accent-1);
+}
+
+.tab-indicator {
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  height: 2px;
+  background: var(--accent-1);
+  transition: left 0.2s ease, width 0.2s ease;
+  pointer-events: none;
 }
 
 .tab-content {

public/js/app.js

@@ -1742,10 +1742,11 @@ async function renderServerDetail(serverId) {
         </div>
       </div>
 
-      <div class="tabs">
+      <div class="tabs" id="server-detail-tabs">
         <button class="tab ${activeTab === 'info' ? 'active' : ''}" data-tab="info">Info</button>
         <button class="tab ${activeTab === 'resources' ? 'active' : ''}" data-tab="resources">Resources</button>
         <button class="tab ${activeTab === 'actions' ? 'active' : ''}" data-tab="actions">Actions</button>
+        <div class="tab-indicator" id="tab-indicator"></div>
       </div>
 
       <div id="server-tab-info" class="tab-content" style="display:${activeTab === 'info' ? 'block' : 'none'}">
@@ -1878,6 +1879,15 @@ async function renderServerDetail(serverId) {
       fetchLiveResources(s.identifier);
     }
 
+    requestAnimationFrame(() => {
+      const indicator = $('#tab-indicator');
+      const activeTabEl = $('#server-detail-tabs .tab.active');
+      if (indicator && activeTabEl) {
+        indicator.style.left = activeTabEl.offsetLeft + 'px';
+        indicator.style.width = activeTabEl.offsetWidth + 'px';
+      }
+    });
+
   } catch (err) {
     el.innerHTML = html`
       <div class="empty-state">