feat: service categories end-to-end + monitoring widgets on main dashboard

Service categories (described in README roadmap, never wired):
- Backend: POST /services now persists category/containerId/port/ip/tailscaleOnly
- Backend: POST /services/update accepts category for in-place changes
- Frontend: category <select> in add-service modal (local + external)
- Frontend: category <select> in edit-service modal with current value
- Frontend: All Categories dropdown in service filter bar (auto-populated
  from both API categories and any categories present on rendered cards)
- Frontend: colored category badge (icon + name) on service cards
- Frontend: filter auto-refreshes after buildGrid

Monitoring on main dashboard (replaces orphaned monitoring-dashboard.html):
- New monitoring-widgets.js embeds a 5-card System Overview panel above
  the filter bar: Services, Containers Up, Avg CPU, Avg Memory, Health
- Pulls /api/v1/monitoring/stats + /api/v1/health-checks/status
- Auto-refreshes on DC.POLL.STATS (5s), color-coded bars (warn >=65%, bad >=85%)

Build:
- Added monitoring-widgets.js to init.js bundle in build.js
- Rebuilt dist/ bundles (core.js, features.js, init.js)
- sw.js cache version bumped automatically
- CSP hash regenerated

status/js/core/grid.js

@@ -95,6 +95,8 @@
       const card = el('div', 'card');
       card.setAttribute('data-app', s.id);
       card.setAttribute('data-status', 'off'); // Initial status
+      if (s.containerId) card.setAttribute('data-container-id', s.containerId);
+      if (s.category) card.setAttribute('data-category', s.category);
       if (s.recipeId) card.setAttribute('data-recipe-id', s.recipeId);
 
       const dot = el('span', 'dot bad at-bl'); dot.id = 'dot-' + s.id + '-grid'; card.appendChild(dot);
@@ -156,6 +158,16 @@
         nameSpan.appendChild(tsBadge);
       }
 
+      // Add Category badge if service has one (colored pill with icon)
+      if (s.category) {
+        const cats = (typeof DC !== 'undefined' && DC.CATEGORIES) || window.DC_CATEGORIES || {};
+        const catInfo = cats[s.category] || {};
+        const catBadge = el('span', 'cat-badge', `${catInfo.icon || ''} ${s.category}`.trim());
+        catBadge.title = `Category: ${s.category}`;
+        catBadge.style.cssText = `margin-left: 6px; font-size: 0.65rem; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, ${catInfo.color || '#7f8c8d'} 25%, transparent); color: ${catInfo.color || '#7f8c8d'}; border: 1px solid color-mix(in srgb, ${catInfo.color || '#7f8c8d'} 50%, transparent); white-space: nowrap; font-weight: 500;`;
+        nameSpan.appendChild(catBadge);
+      }
+
       row.appendChild(el('span', 'spacer'));
 
       const pill = el('span', 'badge off', 'OFF'); pill.id = 'badge-' + s.id; row.appendChild(pill);
@@ -282,6 +294,9 @@
 
     // Group recipe cards visually after grid is built
     if (window.groupRecipeCards) requestAnimationFrame(() => window.groupRecipeCards());
+
+    // Refresh the service filter so the category dropdown reflects new services
+    if (window.refreshServiceFilter) window.refreshServiceFilter();
   }
 
   function setBadge(id, up, responseTime = null) {

status/js/core/init.js

@@ -59,11 +59,13 @@
     }
     _dashboardInitialized = true;
     await window.loadServices();
+    await loadTemplateCategories();
     window.buildGrid();
     animateTopCards();
     window.refreshAll();
     setInterval(window.refreshAll, DC.POLL.DASHBOARD);
     if (typeof window.refreshCredsButtons === 'function') window.refreshCredsButtons();
+    if (typeof window.refreshMonitoringWidgets === 'function') window.refreshMonitoringWidgets();
     // Update auth card (may have already been updated by the auto-load IIFE but ensure it's correct)
     if (typeof window._updateAuthCard === 'function') {
       try {
@@ -200,6 +202,55 @@
   window.loadCustomServices = loadCustomServices;
   registerServiceWorker();
 
+  // ===== TEMPLATE CATEGORIES =====
+  // Cached template categories from /api/v1/templates for use across the UI
+  // (service create/edit, filter dropdown, category badges, etc.)
+  async function loadTemplateCategories() {
+    try {
+      const r = await fetch('/api/v1/templates', { cache: 'no-store' });
+      if (!r.ok) return;
+      const data = await r.json();
+      if (data && data.categories) {
+        window.DC_CATEGORIES = data.categories;
+        // Also expose via globals.js constant for convenience
+        if (typeof DC !== 'undefined') DC.CATEGORIES = data.categories;
+        // Populate any category <select> that's already in the DOM
+        populateCategorySelects();
+      }
+    } catch (e) {
+      console.warn('[init] Failed to load template categories:', e);
+    }
+  }
+
+  function populateCategorySelects() {
+    const cats = window.DC_CATEGORIES || (typeof DC !== 'undefined' && DC.CATEGORIES);
+    if (!cats) return;
+    document.querySelectorAll('select[data-role="service-category"]').forEach(select => {
+      const current = select.dataset.current || '';
+      // Clear options but keep the first (placeholder)
+      const placeholder = select.querySelector('option[value=""]');
+      select.innerHTML = '';
+      if (placeholder) select.appendChild(placeholder);
+      else {
+        const ph = document.createElement('option');
+        ph.value = '';
+        ph.textContent = '— Select category —';
+        select.appendChild(ph);
+      }
+      Object.entries(cats).forEach(([name, info]) => {
+        const opt = document.createElement('option');
+        opt.value = name;
+        opt.textContent = `${info.icon || ''} ${name}`.trim();
+        if (name === current) opt.selected = true;
+        select.appendChild(opt);
+      });
+    });
+  }
+
+  // Allow other modules to re-run population after they (re)inject selects
+  window.populateCategorySelects = populateCategorySelects;
+  window.loadTemplateCategories = loadTemplateCategories;
+
   // TOTP-gated initialization
   (async () => {
     try {

status/js/core/service-create.js

@@ -262,6 +262,7 @@
     const proxyIp = document.getElementById('external-proxy-ip').value.trim() || SITE.dnsIp || 'localhost';
     const preserveHost = document.getElementById('external-preserve-host').checked;
     const followRedirects = document.getElementById('external-follow-redirects').checked;
+    const category = document.getElementById('external-service-category')?.value || '';
 
     if (!name || !externalUrl) {
       showNotification('Please fill in Name and External URL', 'warning');
@@ -341,6 +342,8 @@
         isExternal: true,
         isCustom: true
       };
+      // Only attach category if user actually picked one
+      if (category) newService.category = category;
 
       window.APPS.push(newService);
       results.dashboard = true;
@@ -457,6 +460,13 @@
     const healthCheck = document.getElementById('health-check-input')?.value || '';
     const timeout = document.getElementById('timeout-input')?.value || 30;
 
+    // Category is optional — pulled from either local or external select by the
+    // openAddServiceModal reset. If user doesn't choose one, it stays undefined
+    // and we don't send it (so the backend keeps the existing behavior).
+    const categoryEl = document.getElementById('service-category-input')
+      || document.getElementById('external-service-category');
+    const category = categoryEl?.value || '';
+
     const dnsToken = window.getToken(getPrimaryDnsId(), 'admin');
 
     if (!name || !port || !ip) {
@@ -525,6 +535,8 @@
         logo: logo || `/assets/${subdomain}.png`,
         tailscaleOnly: tailscaleOnly || false
       };
+      // Only include category if user actually picked one
+      if (category) serviceConfig.category = category;
 
       await window.addServiceToConfig(serviceConfig);
       results.dashboard = true;

status/js/core/service-crud.js

@@ -19,6 +19,16 @@
     document.getElementById('edit-tailscale-only').checked = service.tailscaleOnly || false;
     document.getElementById('edit-logo-url').value = service.logo || '';
 
+    // Populate the category select for this service, then set the current value.
+    // populateCategorySelects() uses data-current so we set it first, then call.
+    const categorySelect = document.getElementById('edit-service-category');
+    if (categorySelect) {
+      categorySelect.dataset.current = service.category || '';
+      if (typeof window.populateCategorySelects === 'function') {
+        window.populateCategorySelects();
+      }
+    }
+
     modal.classList.add('show');
   }
 
@@ -36,6 +46,7 @@
     const newIp = document.getElementById('edit-ip').value.trim() || 'localhost';
     const tailscaleOnly = document.getElementById('edit-tailscale-only').checked;
     const newLogo = document.getElementById('edit-logo-url').value.trim();
+    const newCategory = document.getElementById('edit-service-category')?.value || '';
 
     if (!newSubdomain) {
       showNotification('Subdomain is required', 'warning');
@@ -51,6 +62,7 @@
     if (newIp !== currentEditService.ip) changes.push('ip');
     if (tailscaleOnly !== (currentEditService.tailscaleOnly || false)) changes.push('tailscale');
     if (newLogo && newLogo !== currentEditService.logo) changes.push('logo');
+    if (newCategory !== (currentEditService.category || '')) changes.push('category');
 
     if (changes.length === 0) {
       closeServiceEditModal();
@@ -72,7 +84,8 @@
           port: newPort || currentEditService.port,
           ip: newIp,
           tailscaleOnly,
-          logo: newLogo || undefined
+          logo: newLogo || undefined,
+          category: newCategory
         })
       });
 
@@ -91,7 +104,8 @@
           port: newPort || window.APPS[appIndex].port,
           ip: newIp,
           tailscaleOnly,
-          logo: newLogo || window.APPS[appIndex].logo
+          logo: newLogo || window.APPS[appIndex].logo,
+          category: newCategory || undefined
         };
       }
 

status/js/core/service-infrastructure.js

@@ -187,6 +187,9 @@
       name: serviceConfig.name,
       logo: serviceConfig.logo || `/assets/${serviceConfig.subdomain}.png`
     };
+    // Forward optional metadata fields if provided
+    if (serviceConfig.category) newService.category = serviceConfig.category;
+    if (serviceConfig.containerId) newService.containerId = serviceConfig.containerId;
 
     try {
       const response = await secureFetch('/api/v1/services', {

status/js/core/service-modals.js

@@ -82,6 +82,16 @@
             Enter a URL or upload an image file (PNG, JPG, SVG)
           </div>
         </div>
+
+        <!-- Category -->
+        <div>
+          <label for="edit-service-category" class="form-label-accent-sm">
+            Category
+          </label>
+          <select id="edit-service-category" data-role="service-category" class="form-input-md">
+            <option value="">— No category —</option>
+          </select>
+        </div>
       </div>
 
       <div class="weather-modal-buttons" style="margin-top: 24px;">
@@ -239,6 +249,15 @@
               Reload Caddy after adding
             </label>
 
+            <!-- Category -->
+            <div>
+              <label for="service-category-input" style="font-size: 0.8rem; color: var(--muted); margin-bottom: 4px; display: block;">Category</label>
+              <select id="service-category-input" data-role="service-category" style="width: 100%;">
+                <option value="">— No category —</option>
+              </select>
+              <div style="font-size: 0.7rem; color: var(--muted); margin-top: 3px;">Group services on the dashboard by purpose (Media, Productivity, etc.)</div>
+            </div>
+
             <hr style="border: none; border-top: 1px solid var(--border); margin: 4px 0;" />
 
             <div class="grid-2col">
@@ -326,6 +345,14 @@
                 Follow Redirects
               </label>
 
+              <!-- Category (external) -->
+              <div>
+                <label for="external-service-category" style="font-size: 0.8rem; color: var(--muted); margin-bottom: 4px; display: block;">Category</label>
+                <select id="external-service-category" data-role="service-category" style="width: 100%;">
+                  <option value="">— No category —</option>
+                </select>
+              </div>
+
             </div>
           </details>
         </div>