feat: replace ping dots with labeled UP/DOWN pills in topology view

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "network-topology",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

frontend/src/components/TopologyGraph.vue

@@ -33,7 +33,7 @@
               </div>
             </div>
             <a v-if="d.url" :href="d.url" target="_blank" rel="noreferrer noopener" class="chip-tag tag-link" :title="t('openWebUI')">{{ t('tagLink') }}</a>
-            <span v-if="pingStatus[d.id]" class="ping-dot" :class="'ping-' + pingStatus[d.id]" :title="pingStatus[d.id] === 'up' ? t('reachable') : t('unreachable')"></span>
+            <span v-if="pingStatus[d.id]" class="chip-tag" :class="pingStatus[d.id] === 'up' ? 'ping-up' : 'ping-down'">{{ pingStatus[d.id] === 'up' ? 'UP' : 'DOWN' }}</span>
           </div>
         </div>
       </div>
@@ -54,7 +54,7 @@
               </div>
             </div>
             <a v-if="d.url" :href="d.url" target="_blank" rel="noreferrer noopener" class="chip-tag tag-link" :title="t('openWebUI')">{{ t('tagLink') }}</a>
-            <span v-if="pingStatus[d.id]" class="ping-dot" :class="'ping-' + pingStatus[d.id]" :title="pingStatus[d.id] === 'up' ? t('reachable') : t('unreachable')"></span>
+            <span v-if="pingStatus[d.id]" class="chip-tag" :class="pingStatus[d.id] === 'up' ? 'ping-up' : 'ping-down'">{{ pingStatus[d.id] === 'up' ? 'UP' : 'DOWN' }}</span>
           </div>
         </div>
       </div>
@@ -100,7 +100,7 @@
               </div>
             </div>
             <div class="chip-tags">
-              <span v-if="pingStatus[item.device.id]" class="ping-dot" :class="'ping-' + pingStatus[item.device.id]" :title="pingStatus[item.device.id] === 'up' ? t('reachable') : t('unreachable')"></span>
+              <span v-if="pingStatus[item.device.id]" class="chip-tag" :class="pingStatus[item.device.id] === 'up' ? 'ping-up' : 'ping-down'">{{ pingStatus[item.device.id] === 'up' ? 'UP' : 'DOWN' }}</span>
               <a v-if="item.device.url" :href="item.device.url" target="_blank" rel="noreferrer noopener" class="chip-tag tag-link" :title="t('openWebUI')">{{ t('tagLink') }}</a>
               <span v-if="item.device.is_gateway" class="chip-tag tag-gw">{{ t('tagGw') }}</span>
               <span v-if="item.device.virt_type === 'lxc'" class="chip-tag tag-lxc">{{ t('tagLxc') }}</span>
@@ -140,7 +140,7 @@
               </div>
             </div>
             <a v-if="d.url" :href="d.url" target="_blank" rel="noreferrer noopener" class="chip-tag tag-link" :title="t('openWebUI')">{{ t('tagLink') }}</a>
-            <span v-if="pingStatus[d.id]" class="ping-dot" :class="'ping-' + pingStatus[d.id]" :title="pingStatus[d.id] === 'up' ? t('reachable') : t('unreachable')"></span>
+            <span v-if="pingStatus[d.id]" class="chip-tag" :class="pingStatus[d.id] === 'up' ? 'ping-up' : 'ping-down'">{{ pingStatus[d.id] === 'up' ? 'UP' : 'DOWN' }}</span>
           </div>
         </div>
       </div>
@@ -289,12 +289,9 @@ async function pingAll() {
 
 .ping-summary { font-size: 12px; color: var(--text-muted); }
 
-/* ── Dot ping ────────────────────────────────────────────────────────────── */
+/* ── Pastilles ping ──────────────────────────────────────────────────────── */
-.ping-dot {
+.ping-up   { background: #22C55E; color: #fff; }
-  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
+.ping-down { background: #EF4444; color: #fff; }
-}
-.ping-up   { background: #22C55E; }
-.ping-down { background: #EF4444; }
 
 /* ── Cartes spéciales (WAN + Passerelle) ─────────────────────────────────── */
 .special-row {