Add command table functionality to chat store and ChatView component

- Introduced `commandTable` state in chat store to manage command output.
- Implemented WebSocket listener for `commandTable` messages.
- Enhanced ChatView.vue to display command table with dynamic content and styling.
- Added `clearCommandTable` method to reset command table state.
- Updated server broadcast logic to send structured command table data for various statistics.

server/broadcast.js

@@ -325,6 +325,14 @@ export function setupBroadcast(io, __dirname) {
     socket.emit('commandResult', { lines: payload, kind });
   }
 
+  function sendCommandTable(socket, title, columns, rows) {
+    socket.emit('commandTable', {
+      title: String(title || 'Ausgabe'),
+      columns: Array.isArray(columns) ? columns.map((c) => String(c)) : [],
+      rows: Array.isArray(rows) ? rows : []
+    });
+  }
+
   function hasRight(client, right) {
     return !!client.chatAuth && client.chatAuth.rights instanceof Set && client.chatAuth.rights.has(right);
   }
@@ -412,7 +420,7 @@ export function setupBroadcast(io, __dirname) {
     if (sub === 'today') {
       const day = new Date().toISOString().slice(0, 10);
       const dayRecords = records.filter((r) => r.day === day);
-      sendCommandResult(socket, `Logins heute (${day}): ${dayRecords.length}`);
+      sendCommandTable(socket, 'Statistik: Heute', ['Tag', 'Logins'], [[day, dayRecords.length]]);
       return;
     }
 
@@ -423,7 +431,7 @@ export function setupBroadcast(io, __dirname) {
         return;
       }
       const dayRecords = records.filter((r) => r.day === day);
-      sendCommandResult(socket, `Logins am ${day}: ${dayRecords.length}`);
+      sendCommandTable(socket, 'Statistik: Datum', ['Tag', 'Logins'], [[day, dayRecords.length]]);
       return;
     }
 
@@ -437,8 +445,8 @@ export function setupBroadcast(io, __dirname) {
       const filtered = records.filter((r) => r.day >= from && r.day <= to);
       const perDay = aggregateTop(filtered, (r) => r.day, 1000)
         .sort((a, b) => a[0].localeCompare(b[0]))
-        .map(([day, count]) => `${day}: ${count}`);
-      sendCommandResult(socket, [`Logins ${from} bis ${to}: ${filtered.length}`, ...perDay]);
+        .map(([day, count]) => [day, count]);
+      sendCommandTable(socket, `Statistik: Zeitraum ${from} bis ${to}`, ['Tag', 'Logins'], perDay);
       return;
     }
 
@@ -448,25 +456,32 @@ export function setupBroadcast(io, __dirname) {
       const maxAge = Math.max(...ages);
       const youngest = records.find((r) => r.age === minAge);
       const oldest = records.find((r) => r.age === maxAge);
-      sendCommandResult(socket, [
-        `Jüngster Nutzer: ${youngest.userName} (${youngest.age})`,
-        `Ältester Nutzer: ${oldest.userName} (${oldest.age})`
+      sendCommandTable(socket, 'Statistik: Alter', ['Kategorie', 'Name', 'Alter'], [
+        ['Jüngster Nutzer', youngest.userName, youngest.age],
+        ['Ältester Nutzer', oldest.userName, oldest.age]
       ]);
       return;
     }
 
     if (sub === 'names') {
       const topNames = aggregateTop(records, (r) => r.userName, 20);
-      sendCommandResult(socket, [
-        `Namen gesamt (verschieden): ${new Set(records.map((r) => r.userName)).size}`,
-        ...topNames.map(([name, count]) => `${name}: ${count}`)
-      ]);
+      sendCommandTable(
+        socket,
+        `Statistik: Namen (gesamt verschieden: ${new Set(records.map((r) => r.userName)).size})`,
+        ['Name', 'Anzahl'],
+        topNames.map(([name, count]) => [name, count])
+      );
       return;
     }
 
     if (sub === 'countries') {
       const topCountries = aggregateTop(records, (r) => r.country, 20);
-      sendCommandResult(socket, topCountries.map(([country, count]) => `${country}: ${count}`));
+      sendCommandTable(
+        socket,
+        'Statistik: Länder',
+        ['Land', 'Anzahl'],
+        topCountries.map(([country, count]) => [country, count])
+      );
       return;
     }
 
@@ -478,7 +493,15 @@ export function setupBroadcast(io, __dirname) {
       sendCommandResult(socket, 'Keine Berechtigung: Recht "stat" fehlt.');
       return;
     }
-    sendCommandResult(socket, buildAllStats(readLoginRecords()));
+    const lines = buildAllStats(readLoginRecords());
+    const rows = lines.map((line) => {
+      const separatorIndex = line.indexOf(':');
+      if (separatorIndex === -1) {
+        return [line, ''];
+      }
+      return [line.slice(0, separatorIndex).trim(), line.slice(separatorIndex + 1).trim()];
+    });
+    sendCommandTable(socket, 'Statistik: Übersicht', ['Metrik', 'Wert'], rows);
   }
 
   function executeKickCommand(socket, client, parts) {