feat: Verbindungsdetails Modal mit Live-Ping

- Backend: Voice-Stats (Ping, Gateway, Status, Uptime) via SSE alle 5s
- Frontend: Klick auf Verbunden oeffnet Modal mit allen Verbindungsdetails
- Ping-Anzeige direkt im Header neben Verbunden
- Farbcodierte Ping-Dots (gruen <80ms, gelb <150ms, rot >=150ms)
- Uptime-Zaehler seit letztem VoiceConnection Ready
- connectedSince Tracking pro Guild

server/src/index.ts

@@ -320,6 +320,8 @@ const partyTimers = new Map<string, NodeJS.Timeout>();
 const partyActive = new Set<string>();
 // Now-Playing: aktuell gespielter Sound pro Guild
 const nowPlaying = new Map<string, string>();
+// Verbindungszeitpunkt pro Guild (fuer Uptime-Anzeige im Frontend)
+const connectedSince = new Map<string, string>();
 // SSE-Klienten für Broadcasts (z.B. Partymode Status)
 const sseClients = new Set<Response>();
 function sseBroadcast(payload: any) {
@@ -625,6 +627,7 @@ function attachVoiceLifecycle(state: GuildAudioState, guild: any) {
     if (newS.status === VoiceConnectionStatus.Ready) {
       reconnectAttempts = 0;
       isReconnecting = false;
+      if (!connectedSince.has(state.guildId)) connectedSince.set(state.guildId, new Date().toISOString());
       return;
     }
 
@@ -661,6 +664,7 @@ function attachVoiceLifecycle(state: GuildAudioState, guild: any) {
           }
         }
       } else if (newS.status === VoiceConnectionStatus.Destroyed) {
+        connectedSince.delete(state.guildId);
         // Komplett neu beitreten
         const newConn = joinVoiceChannel({
           channelId: state.channelId,
@@ -1520,7 +1524,18 @@ app.get('/api/events', (req: Request, res: Response) => {
 
   // Snapshot senden
   try {
-    res.write(`data: ${JSON.stringify({ type: 'snapshot', party: Array.from(partyActive), selected: persistedState.selectedChannels ?? {}, volumes: persistedState.volumes ?? {}, nowplaying: Object.fromEntries(nowPlaying) })}\n\n`);
+    const statsSnap: Record<string, any> = {};
+    for (const [gId, st] of guildAudioState) {
+      const ch = client.channels.cache.get(st.channelId);
+      statsSnap[gId] = {
+        voicePing: (st.connection.ping as any)?.ws ?? null,
+        gatewayPing: client.ws.ping,
+        status: st.connection.state?.status ?? 'unknown',
+        channelName: ch && 'name' in ch ? (ch as any).name : null,
+        connectedSince: connectedSince.get(gId) ?? null,
+      };
+    }
+    res.write(`data: ${JSON.stringify({ type: 'snapshot', party: Array.from(partyActive), selected: persistedState.selectedChannels ?? {}, volumes: persistedState.volumes ?? {}, nowplaying: Object.fromEntries(nowPlaying), voicestats: statsSnap })}\n\n`);
   } catch {}
 
   // Ping, damit Proxies die Verbindung offen halten
@@ -1600,6 +1615,23 @@ app.listen(PORT, () => {
 
   // Vollständige Cache-Synchronisation beim Start (Hintergrund)
   syncNormCache();
+
+  // Voice-Stats alle 5 Sekunden an alle SSE-Clients broadcasten
+  setInterval(() => {
+    if (sseClients.size === 0 || guildAudioState.size === 0) return;
+    for (const [gId, st] of guildAudioState) {
+      const ch = client.channels.cache.get(st.channelId);
+      sseBroadcast({
+        type: 'voicestats',
+        guildId: gId,
+        voicePing: (st.connection.ping as any)?.ws ?? null,
+        gatewayPing: client.ws.ping,
+        status: st.connection.state?.status ?? 'unknown',
+        channelName: ch && 'name' in ch ? (ch as any).name : null,
+        connectedSince: connectedSince.get(gId) ?? null,
+      });
+    }
+  }, 5_000);
 });
 
 

web/src/App.tsx

@@ -91,6 +91,17 @@ export default function App() {
   const dragCounterRef = useRef(0);
   const uploadDismissRef = useRef<ReturnType<typeof setTimeout>>();
 
+  /* ── Voice Stats ── */
+  interface VoiceStats {
+    voicePing: number | null;
+    gatewayPing: number;
+    status: string;
+    channelName: string | null;
+    connectedSince: string | null;
+  }
+  const [voiceStats, setVoiceStats] = useState<VoiceStats | null>(null);
+  const [showConnModal, setShowConnModal] = useState(false);
+
   /* ── UI ── */
   const [notification, setNotification] = useState<{ msg: string; type: 'info' | 'error' } | null>(null);
   const [clock, setClock] = useState('');
@@ -233,6 +244,11 @@ export default function App() {
           const g = selectedRef.current?.split(':')[0];
           if (g && typeof np[g] === 'string') setLastPlayed(np[g]);
         } catch { }
+        try {
+          const vs = msg?.voicestats || {};
+          const g = selectedRef.current?.split(':')[0];
+          if (g && vs[g]) setVoiceStats(vs[g]);
+        } catch { }
       } else if (msg?.type === 'channel') {
         const g = selectedRef.current?.split(':')[0];
         if (msg.guildId === g) setSelected(`${msg.guildId}:${msg.channelId}`);
@@ -242,6 +258,17 @@ export default function App() {
       } else if (msg?.type === 'nowplaying') {
         const g = selectedRef.current?.split(':')[0];
         if (msg.guildId === g) setLastPlayed(msg.name || '');
+      } else if (msg?.type === 'voicestats') {
+        const g = selectedRef.current?.split(':')[0];
+        if (msg.guildId === g) {
+          setVoiceStats({
+            voicePing: msg.voicePing,
+            gatewayPing: msg.gatewayPing,
+            status: msg.status,
+            channelName: msg.channelName,
+            connectedSince: msg.connectedSince,
+          });
+        }
       }
     });
     return () => { try { unsub(); } catch { } };
@@ -628,9 +655,12 @@ export default function App() {
             </div>
           )}
           {selected && (
-            <div className="connection">
+            <div className="connection" onClick={() => setShowConnModal(true)} style={{cursor:'pointer'}} title="Verbindungsdetails">
               <span className="conn-dot" />
               Verbunden
+              {voiceStats?.voicePing != null && (
+                <span className="conn-ping">{voiceStats.voicePing}ms</span>
+              )}
             </div>
           )}
           <button
@@ -948,6 +978,66 @@ export default function App() {
         </div>
       )}
 
+      {/* ═══ CONNECTION MODAL ═══ */}
+      {showConnModal && voiceStats && (() => {
+        const uptimeSec = voiceStats.connectedSince
+          ? Math.floor((Date.now() - new Date(voiceStats.connectedSince).getTime()) / 1000)
+          : 0;
+        const h = Math.floor(uptimeSec / 3600);
+        const m = Math.floor((uptimeSec % 3600) / 60);
+        const s = uptimeSec % 60;
+        const uptimeStr = h > 0
+          ? `${h}h ${String(m).padStart(2,'0')}m ${String(s).padStart(2,'0')}s`
+          : m > 0
+            ? `${m}m ${String(s).padStart(2,'0')}s`
+            : `${s}s`;
+        const pingColor = (ms: number | null) =>
+          ms == null ? 'var(--muted)' : ms < 80 ? 'var(--green)' : ms < 150 ? '#f0a830' : '#e04040';
+        return (
+          <div className="conn-modal-overlay" onClick={() => setShowConnModal(false)}>
+            <div className="conn-modal" onClick={e => e.stopPropagation()}>
+              <div className="conn-modal-header">
+                <span className="material-icons" style={{fontSize:20,color:'var(--green)'}}>cell_tower</span>
+                <span>Verbindungsdetails</span>
+                <button className="conn-modal-close" onClick={() => setShowConnModal(false)}>
+                  <span className="material-icons">close</span>
+                </button>
+              </div>
+              <div className="conn-modal-body">
+                <div className="conn-stat">
+                  <span className="conn-stat-label">Voice Ping</span>
+                  <span className="conn-stat-value">
+                    <span className="conn-ping-dot" style={{background: pingColor(voiceStats.voicePing)}} />
+                    {voiceStats.voicePing != null ? `${voiceStats.voicePing} ms` : '---'}
+                  </span>
+                </div>
+                <div className="conn-stat">
+                  <span className="conn-stat-label">Gateway Ping</span>
+                  <span className="conn-stat-value">
+                    <span className="conn-ping-dot" style={{background: pingColor(voiceStats.gatewayPing)}} />
+                    {voiceStats.gatewayPing >= 0 ? `${voiceStats.gatewayPing} ms` : '---'}
+                  </span>
+                </div>
+                <div className="conn-stat">
+                  <span className="conn-stat-label">Status</span>
+                  <span className="conn-stat-value" style={{color: voiceStats.status === 'ready' ? 'var(--green)' : '#f0a830'}}>
+                    {voiceStats.status === 'ready' ? 'Verbunden' : voiceStats.status}
+                  </span>
+                </div>
+                <div className="conn-stat">
+                  <span className="conn-stat-label">Kanal</span>
+                  <span className="conn-stat-value">{voiceStats.channelName || '---'}</span>
+                </div>
+                <div className="conn-stat">
+                  <span className="conn-stat-label">Verbunden seit</span>
+                  <span className="conn-stat-value">{uptimeStr}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        );
+      })()}
+
       {/* ═══ TOAST ═══ */}
       {notification && (
         <div className={`toast ${notification.type}`}>

web/src/styles.css

@@ -353,6 +353,90 @@ input, select {
   50% { box-shadow: 0 0 12px rgba(35, 165, 90, .8); }
 }
 
+.conn-ping {
+  font-size: 10px;
+  opacity: .7;
+  margin-left: 2px;
+}
+
+/* ── Connection Details Modal ── */
+.conn-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, .55);
+  z-index: 9000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(4px);
+  animation: fadeIn .15s ease;
+}
+.conn-modal {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  width: 340px;
+  box-shadow: 0 20px 60px rgba(0,0,0,.4);
+  overflow: hidden;
+  animation: slideUp .2s ease;
+}
+@keyframes slideUp {
+  from { transform: translateY(20px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+.conn-modal-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--border);
+  font-weight: 700;
+  font-size: 14px;
+}
+.conn-modal-close {
+  margin-left: auto;
+  background: none;
+  border: none;
+  color: var(--muted);
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 6px;
+  display: flex;
+  transition: all .15s;
+}
+.conn-modal-close:hover {
+  background: rgba(255,255,255,.08);
+  color: var(--fg);
+}
+.conn-modal-body {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.conn-stat {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.conn-stat-label {
+  color: var(--muted);
+  font-size: 13px;
+}
+.conn-stat-value {
+  font-weight: 600;
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.conn-ping-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
 /* ── Admin Icon Button ── */
 .admin-btn-icon {
   width: 32px;