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.

client/src/stores/chat.js

@@ -21,6 +21,7 @@ export const useChatStore = defineStore('chat', () => {
   const historyResults = ref([]);
   const unreadChatsCount = ref(0);
   const errorMessage = ref(null);
+  const commandTable = ref(null);
   const remainingSecondsToTimeout = ref(1800);
   const awaitingLoginUsername = ref(false);
   const awaitingLoginPassword = ref(false);
@@ -191,6 +192,10 @@ export const useChatStore = defineStore('chat', () => {
           handleWebSocketMessage({ type: 'commandResult', ...data });
         });
         
+        socketInstance.on('commandTable', (data) => {
+          handleWebSocketMessage({ type: 'commandTable', ...data });
+        });
+        
         socketInstance.on('unreadChats', (data) => {
           handleWebSocketMessage({ type: 'unreadChats', ...data });
         });
@@ -315,6 +320,15 @@ export const useChatStore = defineStore('chat', () => {
         }, 5000);
         break;
       }
+      case 'commandTable': {
+        const title = data.title || 'Ausgabe';
+        const columns = Array.isArray(data.columns) ? data.columns : [];
+        const rows = Array.isArray(data.rows) ? data.rows : [];
+        commandTable.value = { title, columns, rows };
+        // Tabelle ist persistent; temporäre Fehlermeldung löschen
+        errorMessage.value = null;
+        break;
+      }
       case 'unreadChats':
         unreadChatsCount.value = data.count || 0;
         break;
@@ -543,6 +557,10 @@ export const useChatStore = defineStore('chat', () => {
     socket.value.emit('requestOpenConversations');
   }
 
+  function clearCommandTable() {
+    commandTable.value = null;
+  }
+
   function setView(view) {
     currentView.value = view;
     
@@ -574,6 +592,7 @@ export const useChatStore = defineStore('chat', () => {
     searchResults.value = [];
     inboxResults.value = [];
     historyResults.value = [];
+    commandTable.value = null;
     searchData.value = {
       nameIncludes: '',
       minAge: null,
@@ -689,6 +708,7 @@ export const useChatStore = defineStore('chat', () => {
         unreadChatsCount,
         remainingSecondsToTimeout,
         errorMessage,
+        commandTable,
         searchData,
         awaitingLoginUsername,
         awaitingLoginPassword,
@@ -703,6 +723,7 @@ export const useChatStore = defineStore('chat', () => {
     userSearch,
     requestHistory,
     requestOpenConversations,
+    clearCommandTable,
     setView,
     logout,
     restoreSession

client/src/views/ChatView.vue

@@ -22,6 +22,30 @@
             <div v-if="chatStore.errorMessage" class="error-message">
               {{ chatStore.errorMessage }}
             </div>
+            <div v-if="chatStore.commandTable" class="command-table-container">
+              <div class="command-table-header">
+                <strong>{{ chatStore.commandTable.title }}</strong>
+                <button class="command-table-close" @click="chatStore.clearCommandTable()">Schließen</button>
+              </div>
+              <div class="command-table-scroll">
+                <table class="command-table">
+                  <thead>
+                    <tr>
+                      <th v-for="(column, idx) in chatStore.commandTable.columns" :key="`head-${idx}`">
+                        {{ column }}
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr v-for="(row, rowIdx) in chatStore.commandTable.rows" :key="`row-${rowIdx}`">
+                      <td v-for="(cell, cellIdx) in row" :key="`cell-${rowIdx}-${cellIdx}`">
+                        {{ cell }}
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
             <div v-else-if="chatStore.currentConversation && currentUserInfo" :class="['chat-header', 'chat-header-gender-' + currentUserInfo.gender]">
               <h2>{{ chatStore.currentConversation }} ({{ currentUserInfo.gender }})</h2>
               <div class="chat-header-info">
@@ -159,5 +183,54 @@ onMounted(async () => {
   text-align: center;
   font-weight: bold;
 }
+
+.command-table-container {
+  margin: 0.8em;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  background: #fff;
+  overflow: hidden;
+}
+
+.command-table-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.6em 0.8em;
+  background: #f4f6f8;
+  border-bottom: 1px solid #ddd;
+}
+
+.command-table-close {
+  border: 1px solid #bbb;
+  background: #fff;
+  padding: 0.2em 0.6em;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.command-table-scroll {
+  max-height: 220px;
+  overflow: auto;
+}
+
+.command-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9em;
+}
+
+.command-table th,
+.command-table td {
+  padding: 0.45em 0.6em;
+  border-bottom: 1px solid #eee;
+  text-align: left;
+}
+
+.command-table th {
+  background: #fafafa;
+  position: sticky;
+  top: 0;
+}
 </style>