From 87ce1547896ce0ebf15b3a058be9c7dbcf4d426e Mon Sep 17 00:00:00 2001
From: pablinux <pablinux@hotmail.es>
Date: Sun, 18 Jan 2026 03:49:53 -0500
Subject: [PATCH] fix: Corregir renderizado de apps en index.html
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Problema:
- La tabla mostraba [object Object] en lugar del nombre de la app
- El estado siempre aparecía como Unknown
- No usaba las propiedades del objeto JSON (name, status, port, service_name)

Solución:
- Actualizar displayApps() para acceder a app.name, app.status, app.service_name
- Agregar badges de colores según estado:
  * Running: verde
  * Stopped: gris
  * Failed: rojo
  * Starting: azul
  * Stopping: amarillo
  * Unknown: gris
- Cambiar botón de more_vert a visibility para ver logs
- Mostrar service_name debajo del nombre de la app

Ahora la tabla muestra correctamente la información de las apps detectadas
---
 web/index.html | 59 ++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 48 insertions(+), 11 deletions(-)

diff --git a/web/index.html b/web/index.html
index fd04fe8..3f3c7de 100644
--- a/web/index.html
+++ b/web/index.html
@@ -496,8 +496,45 @@
             function displayApps(apps) {
                 const tbody = document.getElementById("apps-tbody");
                 tbody.innerHTML = apps
-                    .map(
-                        (app) => `
+                    .map((app) => {
+                        // Determinar color del badge según estado
+                        const statusColors = {
+                            Running: {
+                                bg: "bg-green-100 dark:bg-green-900/30",
+                                text: "text-green-700 dark:text-green-400",
+                                dot: "bg-green-500",
+                            },
+                            Stopped: {
+                                bg: "bg-gray-100 dark:bg-gray-800",
+                                text: "text-gray-700 dark:text-gray-400",
+                                dot: "bg-gray-400",
+                            },
+                            Failed: {
+                                bg: "bg-red-100 dark:bg-red-900/30",
+                                text: "text-red-700 dark:text-red-400",
+                                dot: "bg-red-500",
+                            },
+                            Starting: {
+                                bg: "bg-blue-100 dark:bg-blue-900/30",
+                                text: "text-blue-700 dark:text-blue-400",
+                                dot: "bg-blue-500",
+                            },
+                            Stopping: {
+                                bg: "bg-yellow-100 dark:bg-yellow-900/30",
+                                text: "text-yellow-700 dark:text-yellow-400",
+                                dot: "bg-yellow-500",
+                            },
+                            Unknown: {
+                                bg: "bg-slate-100 dark:bg-slate-800",
+                                text: "text-slate-700 dark:text-slate-400",
+                                dot: "bg-slate-400",
+                            },
+                        };
+
+                        const statusStyle =
+                            statusColors[app.status] || statusColors["Unknown"];
+
+                        return `
         <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/40 transition-colors">
             <td class="px-6 py-4">
                 <div class="flex items-center gap-3">
@@ -505,28 +542,28 @@
                         <span class="material-symbols-outlined text-primary text-lg">terminal</span>
                     </div>
                     <div>
-                        <p class="text-slate-900 dark:text-white font-semibold text-sm">${app}</p>
-                        <p class="text-slate-500 text-xs">Servicio</p>
+                        <p class="text-slate-900 dark:text-white font-semibold text-sm">${app.name}</p>
+                        <p class="text-slate-500 text-xs">${app.service_name || "Servicio"}</p>
                     </div>
                 </div>
             </td>
             <td class="px-6 py-4">
-                <span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-100 text-slate-800 dark:bg-slate-800 dark:text-slate-400">
-                    <span class="size-1.5 rounded-full bg-slate-400"></span>
-                    Unknown
+                <span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium ${statusStyle.bg} ${statusStyle.text}">
+                    <span class="size-1.5 rounded-full ${statusStyle.dot}"></span>
+                    ${app.status}
                 </span>
             </td>
             <td class="px-6 py-4 text-sm">-</td>
             <td class="px-6 py-4 text-sm">-</td>
             <td class="px-6 py-4 text-sm text-slate-500">-</td>
             <td class="px-6 py-4 text-right">
-                <button class="text-slate-400 hover:text-white transition-colors">
-                    <span class="material-symbols-outlined">more_vert</span>
+                <button class="text-slate-400 hover:text-white transition-colors" onclick="window.location.href='/logs'">
+                    <span class="material-symbols-outlined">visibility</span>
                 </button>
             </td>
         </tr>
-    `,
-                    )
+    `;
+                    })
                     .join("");
             }