From 4bb4ad4fba8d4f7b581d211cf4c3763aa935366e Mon Sep 17 00:00:00 2001
From: William Valentin <william.valentin.info@gmail.com>
Date: Sat, 14 Feb 2026 09:19:57 -0800
Subject: [PATCH] fix(ui): show services in settings page

---
 docs/plans/state.json            |  1 +
 src/gateway/ui/pages/settings.js | 46 +++++++++++++++++++++-----------
 2 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/docs/plans/state.json b/docs/plans/state.json
index 36447b3..dafe55d 100644
--- a/docs/plans/state.json
+++ b/docs/plans/state.json
@@ -71,6 +71,7 @@
         "src/gateway/handlers/handlers.test.ts",
         "src/gateway/server.ts",
         "src/gateway/ui/pages/dashboard.js",
+        "src/gateway/ui/pages/settings.js",
         "src/gateway/ui/style.css"
       ],
       "test_status": "pnpm test:run src/gateway/handlers/services.test.ts src/gateway/handlers/handlers.test.ts + pnpm typecheck passing"
diff --git a/src/gateway/ui/pages/settings.js b/src/gateway/ui/pages/settings.js
index 22584eb..51e0387 100644
--- a/src/gateway/ui/pages/settings.js
+++ b/src/gateway/ui/pages/settings.js
@@ -17,13 +17,14 @@ let _el = null;
 async function loadSettings() {
   if (!_client || !_el) {return;}
 
-  let config, tools, channels;
+ let config, tools, channels;
+  let services;
 
   try {
-    [config, tools, channels] = await Promise.all([
+    [config, tools, services] = await Promise.all([
       _client.call('config.get'),
       _client.call('tools.list'),
-      _client.call('system.channels'),
+      _client.call('system.services'),
     ]);
   } catch (err) {
     _el.innerHTML = `
@@ -45,8 +46,8 @@ async function loadSettings() {
   // Build tool list
   const toolList = tools?.tools ?? [];
 
-  // Build channel list
-  const channelList = channels?.channels ?? [];
+  // Build services list
+  const serviceList = services?.services ?? [];
 
   _el.innerHTML = `
     <h1 class="page-title">Settings</h1>
@@ -95,18 +96,33 @@ async function loadSettings() {
       ` : '<div class="empty-state">No tools available</div>'}
     </div>
 
-    <h2 class="section-title">Channels</h2>
+    <h2 class="section-title">Services</h2>
     <div class="settings-section">
-      ${channelList.length > 0 ? `
-        <div class="channels-grid">
-          ${channelList.map(ch => `
-            <div class="channel-card">
-              <span class="channel-dot ${ch.status}"></span>
-              <span class="channel-name">${escapeHtml(ch.name)}</span>
-            </div>
-          `).join('')}
+      ${serviceList.length > 0 ? `
+        <div class="services-grid">
+          ${serviceList.map(svc => {
+            const typeIcon = svc.type === 'channel' ? '📡' : svc.type === 'automation' ? '⚙️' : '🔧';
+            const statusClass = svc.status === 'connected'
+              ? 'connected'
+              : svc.status === 'configured'
+                ? 'configured'
+                : svc.status === 'error'
+                  ? 'error'
+                  : svc.status === 'not_configured'
+                    ? 'not-configured'
+                    : 'disconnected';
+            const itemCount = svc.itemCount ? ` (${svc.itemCount})` : '';
+            return `
+              <div class="service-card service-${statusClass}">
+                <span class="service-type-icon">${typeIcon}</span>
+                <span class="service-name">${escapeHtml(svc.name)}${itemCount}</span>
+                <span class="service-status">${escapeHtml(svc.status)}</span>
+                <span class="service-description text-muted text-xs">${escapeHtml(svc.description ?? '')}</span>
+              </div>
+            `;
+          }).join('')}
         </div>
-      ` : '<div class="text-muted text-sm">No channels registered</div>'}
+      ` : '<div class="text-muted text-sm">No services found</div>'}
     </div>
 
     <h2 class="section-title">Configuration (read-only)</h2>