Feature: Markdown-Tabellen in Lagebildern

Analyzer-Prompts erlauben jetzt Tabellen wenn Daten sich strukturiert
vergleichen lassen (Produkte, Modelle, Kennzahlen etc.).
Frontend parst Markdown-Tabellensyntax und rendert sie als HTML-Tabellen
mit passendem Styling.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/static/css/style.css

@@ -2653,6 +2653,37 @@ a:hover {
     color: var(--text-secondary);
 }
 
+/* === Summary Tables === */
+.summary-table-wrap {
+    overflow-x: auto;
+    margin: 12px 0;
+}
+.summary-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 13px;
+    line-height: 1.5;
+}
+.summary-table th,
+.summary-table td {
+    padding: 8px 12px;
+    border: 1px solid var(--border);
+    text-align: left;
+    vertical-align: top;
+}
+.summary-table th {
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+    font-weight: 600;
+    white-space: nowrap;
+}
+.summary-table td {
+    color: var(--text-secondary);
+}
+.summary-table tbody tr:hover {
+    background: var(--bg-hover);
+}
+
 /* === Responsive === */
 
 @media (max-width: 768px) {

src/static/js/components.js

@@ -702,6 +702,23 @@ const UI = {
         html = html.replace(/<\/ul>(<br>)+/g, '</ul>');
         html = html.replace(/(<br>){2,}/g, '<br>');
 
+        // Markdown-Tabellen rendern
+        html = html.replace(/(?:^|<br>)((?:\|.+\|(?:<br>|$))+)/g, function(match, tableBlock) {
+            var rows = tableBlock.split('<br>').filter(function(r) { return r.trim().length > 0; });
+            if (rows.length < 2) return match;
+            var isSep = function(r) { return /^\|[\s\-:|]+\|$/.test(r.trim()); };
+            if (!isSep(rows[1])) return match;
+            var parseRow = function(r) { return r.split('|').slice(1, -1).map(function(c) { return c.trim(); }); };
+            var headerCells = parseRow(rows[0]);
+            var thead = '<thead><tr>' + headerCells.map(function(c) { return '<th>' + c + '</th>'; }).join('') + '</tr></thead>';
+            var tbody = '<tbody>' + rows.slice(2).map(function(r) {
+                if (isSep(r)) return '';
+                var cells = parseRow(r);
+                return '<tr>' + cells.map(function(c) { return '<td>' + c + '</td>'; }).join('') + '</tr>';
+            }).join('') + '</tbody>';
+            return '<div class="summary-table-wrap"><table class="summary-table">' + thead + tbody + '</table></div>';
+        });
+
         // Inline-Zitate [1], [2], [1383a] etc. als klickbare Links rendern
         if (sources.length > 0) {
             html = html.replace(/\[(\d+[a-z]?)\]/g, (match, num) => {