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/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>