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) {