style: change display of agents

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 -->
+          <!-- Host header (cliquable pour replier/déplier) -->
-          <div class="flex items-center gap-2.5 mb-3 px-1">
+          <button
-            <span class="dot-online"></span>
+            class="flex items-center gap-2.5 mb-3 px-1 w-full text-left cursor-pointer group"
-            <h2 class="font-semibold text-slate-200 text-sm">
+            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}