From 12c87d6a744591d3e8ad69bf0b97631e9af23773 Mon Sep 17 00:00:00 2001
From: Blomios <blomios@gmail.com>
Date: Mon, 18 May 2026 11:46:42 +0200
Subject: [PATCH] style: change display of agents

---
 web/src/routes/+page.svelte | 53 ++++++++++++++++++++++++++++++++-----
 1 file changed, 47 insertions(+), 6 deletions(-)

diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index ce4db77..0415a6a 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -34,6 +34,31 @@
     }, {})
   );
 
+  // Tri alphabétique des agents : alias (si défini) sinon hostname, insensible à la casse
+  const sortedAgents = $derived(
+    Object.entries(byAgent).sort(([, a], [, b]) => {
+      const labelA = (a[0]?.alias || a[0]?.hostname || "").toLowerCase();
+      const labelB = (b[0]?.alias || b[0]?.hostname || "").toLowerCase();
+      return labelA.localeCompare(labelB);
+    })
+  );
+
+  // État replié/déplié par agent (déplié par défaut)
+  let collapsed = $state<Record<string, boolean>>({});
+
+  function toggleSection(agentId: string) {
+    collapsed[agentId] = !collapsed[agentId];
+  }
+
+  // Pastille de statut pour un agent selon l'état de ses containers
+  function agentDotClass(containers: ContainerEntry[]): string {
+    if (containers.length === 0) return "dot-offline";
+    const running = containers.filter(c => c.container.state === "running").length;
+    if (running === containers.length) return "dot-running";
+    if (running === 0) return "dot-exited";
+    return "dot-other";
+  }
+
   let disconnect: (() => void) | null = null;
 
   async function load() {
@@ -191,15 +216,29 @@
       </div>
 
     {:else}
-      {#each Object.entries(byAgent) as [_agentId, containers]}
+      {#each sortedAgents as [agentId, containers]}
         {#if containers.length > 0}
         {@const first = containers[0]}
+        {@const isCollapsed = collapsed[agentId] ?? false}
         <section class="mb-8">
 
-          <!-- Host header -->
-          <div class="flex items-center gap-2.5 mb-3 px-1">
-            <span class="dot-online"></span>
-            <h2 class="font-semibold text-slate-200 text-sm">
+          <!-- Host header (cliquable pour replier/déplier) -->
+          <button
+            class="flex items-center gap-2.5 mb-3 px-1 w-full text-left cursor-pointer group"
+            onclick={() => toggleSection(agentId)}
+            type="button"
+          >
+            <!-- Chevron -->
+            <svg
+              class="w-3.5 h-3.5 text-slate-500 transition-transform duration-200 shrink-0
+                     {isCollapsed ? '-rotate-90' : 'rotate-0'}"
+              fill="none" stroke="currentColor" viewBox="0 0 24 24"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7" />
+            </svg>
+            <!-- Pastille de statut dynamique -->
+            <span class={agentDotClass(containers)}></span>
+            <h2 class="font-semibold text-slate-200 text-sm group-hover:text-slate-100 transition-colors">
               {first.alias || first.hostname}
             </h2>
             {#if first.alias}
@@ -212,8 +251,9 @@
             <span class="text-xs text-slate-600 ml-auto">
               {containers.length} container{containers.length !== 1 ? "s" : ""}
             </span>
-          </div>
+          </button>
 
+          {#if !isCollapsed}
           <!-- Desktop table -->
           <div class="hidden md:block card overflow-hidden">
             <table class="w-full text-sm">
@@ -322,6 +362,7 @@
               </div>
             {/each}
           </div>
+          {/if}
 
         </section>
         {/if}