feat: add table horizontal scroll and inline color swatches in AI chat

Tables now use display:block with overflow-x:auto so wide tables scroll
horizontally instead of crushing columns. Cells use white-space:nowrap
to prevent character-level wrapping. Color hex codes in assistant
messages are post-processed into inline swatches showing the actual
color next to the code.

Author: abose

src/core-ai/AIChatPanel.js

@@ -1173,13 +1173,73 @@ define(function (require, exports, module) {
         if ($target.length) {
             try {
                 $target.html(marked.parse(_segmentText, { breaks: true, gfm: true }));
+                _enhanceColorCodes($target);
             } catch (e) {
                 $target.text(_segmentText);
             }
             _scrollToBottom();
         }
     }
 
+    const HEX_COLOR_RE = /#[a-f0-9]{3,8}\b/gi;
+
+    /**
+     * Scan text nodes inside an element for hex color codes and wrap each
+     * with an inline swatch element showing the actual color.
+     */
+    function _enhanceColorCodes($el) {
+        // Walk text nodes inside the element, but skip <pre> blocks and already-enhanced swatches
+        const walker = document.createTreeWalker(
+            $el[0],
+            NodeFilter.SHOW_TEXT,
+            {
+                acceptNode: function (node) {
+                    const parent = node.parentNode;
+                    if (parent.closest && parent.closest("pre, .ai-color-swatch")) {
+                        return NodeFilter.FILTER_REJECT;
+                    }
+                    return HEX_COLOR_RE.test(node.nodeValue)
+                        ? NodeFilter.FILTER_ACCEPT
+                        : NodeFilter.FILTER_REJECT;
+                }
+            }
+        );
+
+        const textNodes = [];
+        let n;
+        while ((n = walker.nextNode())) {
+            textNodes.push(n);
+        }
+
+        textNodes.forEach(function (textNode) {
+            const text = textNode.nodeValue;
+            HEX_COLOR_RE.lastIndex = 0;
+            const frag = document.createDocumentFragment();
+            let lastIndex = 0;
+            let match;
+            while ((match = HEX_COLOR_RE.exec(text)) !== null) {
+                // Append any text before the match
+                if (match.index > lastIndex) {
+                    frag.appendChild(document.createTextNode(text.slice(lastIndex, match.index)));
+                }
+                const color = match[0];
+                const swatch = document.createElement("span");
+                swatch.className = "ai-color-swatch";
+                swatch.style.setProperty("--swatch-color", color);
+                const preview = document.createElement("span");
+                preview.className = "ai-color-swatch-preview";
+                swatch.appendChild(preview);
+                swatch.appendChild(document.createTextNode(color));
+                frag.appendChild(swatch);
+                lastIndex = HEX_COLOR_RE.lastIndex;
+            }
+            if (lastIndex < text.length) {
+                frag.appendChild(document.createTextNode(text.slice(lastIndex)));
+            }
+            textNode.parentNode.replaceChild(frag, textNode);
+        });
+    }
+
     function _appendToolIndicator(toolName, toolId) {
         // Remove thinking indicator on first content
         if (!_hasReceivedContent) {

src/styles/Extn-AIChatPanel.less

@@ -201,16 +201,21 @@
         h4 { font-size: @sidebar-content-font-size; margin: 6px 0 2px 0; opacity: 0.85; }
 
         table {
-            width: 100%;
+            display: block;
+            overflow-x: auto;
             border-collapse: collapse;
             margin: 6px 0;
             font-size: @sidebar-small-font-size;
+            cursor: default;
         }
 
         th, td {
             padding: 4px 8px;
             text-align: left;
             border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+            max-width: 50%;
+            white-space: nowrap;
+            overflow-wrap: normal;
         }
 
         th {
@@ -460,6 +465,25 @@
     }
 }
 
+/* ── Inline color swatch ───────────────────────────────────────────── */
+.ai-color-swatch {
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+    font-family: 'SourceCodePro-Medium', 'SourceCodePro', monospace;
+    font-size: @sidebar-small-font-size;
+}
+
+.ai-color-swatch-preview {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 2px;
+    background-color: var(--swatch-color);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    flex-shrink: 0;
+}
+
 @keyframes ai-dot-pulse {
     0%, 60%, 100% { opacity: 0.2; transform: scale(0.8); }
     30% { opacity: 0.8; transform: scale(1); }