tabminal 3.0.14 → 3.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tabminal",
-  "version": "3.0.14",
+  "version": "3.0.15",
   "description": "Tab(ter)minal, a Cloud-Native terminal and ACP agent workspace for desktop, tablet, and phone.",
   "type": "module",
   "bin": {

package/public/app.js

@@ -105,6 +105,10 @@ const HEARTBEAT_INTERVAL_MS = 1000;
 const RECONNECT_RETRY_MS = 5000;
 const FILE_TREE_REFRESH_INTERVAL_MS = 3000;
 const FILE_VERSION_CHECK_INTERVAL_MS = 3000;
+const AGENT_TRANSCRIPT_INITIAL_VISIBLE_BLOCKS = 100;
+const AGENT_TRANSCRIPT_WINDOW_STEP = 50;
+const AGENT_TRANSCRIPT_FOLLOW_LATEST_TOLERANCE = 5;
+const WORKSPACE_TAB_TITLE_MAX_LENGTH = 20;
 const MAIN_SERVER_ID = 'main';
 const RUNTIME_BOOT_ID_STORAGE_KEY = 'tabminal_runtime_boot_id';
 const WORKSPACE_DEVICE_ID_STORAGE_KEY = 'tabminal_workspace_device_id';
@@ -417,6 +421,20 @@ function resolveMarkdownLocalTarget(baseFilePath, href) {
     }
 }
 
+function buildMarkdownContextBasePath(filePath = '', baseDirectory = '') {
+    const nextFilePath = String(filePath || '').trim();
+    if (nextFilePath) {
+        return nextFilePath;
+    }
+    const nextBaseDirectory = String(baseDirectory || '')
+        .trim()
+        .replace(/\/+$/, '');
+    if (!nextBaseDirectory) {
+        return '';
+    }
+    return `${nextBaseDirectory}/__tabminal__.md`;
+}
+
 function slugifyMarkdownHeading(text) {
     return String(text || '')
         .trim()
@@ -1535,6 +1553,24 @@ class EditorManager {
         this.agentTranscript = document.createElement('div');
         this.agentTranscript.className = 'agent-panel-transcript';
         this.agentTranscript.addEventListener('click', (event) => {
+            const markdownLink = event.target.closest(
+                'a[data-markdown-local-path]'
+            );
+            if (markdownLink) {
+                const filePath = String(
+                    markdownLink.dataset.markdownLocalPath || ''
+                ).trim();
+                if (!filePath) {
+                    return;
+                }
+                event.preventDefault();
+                event.stopPropagation();
+                void this.openLocalMarkdownLink(
+                    filePath,
+                    String(markdownLink.dataset.markdownLocalHash || '')
+                );
+                return;
+            }
             const anchor = event.target.closest('a');
             if (!anchor) return;
             const href = anchor.getAttribute('href') || '';
@@ -1545,6 +1581,20 @@ class EditorManager {
             void this.openFile(href);
         });
         this.agentTranscript.addEventListener('scroll', () => {
+            const activeAgentTab = getActiveAgentTab();
+            if (
+                activeAgentTab
+                && this.agentTranscript.scrollTop <= 24
+            ) {
+                activeAgentTab.scrollToBottomOnNextRender = false;
+                void this.loadOlderAgentTimeline(activeAgentTab);
+            } else if (
+                activeAgentTab
+                && this.isAgentTranscriptNearBottom(24)
+            ) {
+                activeAgentTab.scrollToBottomOnNextRender = false;
+                void this.loadNewerAgentTimeline(activeAgentTab);
+            }
             this.updateAgentScrollBottomButton();
             this.rememberAgentTranscriptLayout();
         });
@@ -4197,6 +4247,64 @@ class EditorManager {
         }
     }
 
+    getAgentMarkdownBaseDirectory(agentTab, message) {
+        const messageCwd = String(message?.cwd || '').trim();
+        if (messageCwd) {
+            return messageCwd;
+        }
+        const tabCwd = String(agentTab?.cwd || '').trim();
+        if (tabCwd) {
+            return tabCwd;
+        }
+        const session = this.currentSession;
+        return String(session?.cwd || session?.initialCwd || '').trim();
+    }
+
+    async enhanceAgentMarkdownBody(agentTab, message, body) {
+        if (!(body instanceof HTMLElement) || !message?.text) {
+            return;
+        }
+        const session = this.currentSession;
+        if (!session) {
+            return;
+        }
+
+        const renderToken = `${Date.now()}:${Math.random()}`;
+        body.dataset.markdownRenderToken = renderToken;
+
+        try {
+            const { renderer } = await loadMarkdownPreviewBundle();
+            if (
+                !body.isConnected
+                || body.dataset.markdownRenderToken !== renderToken
+            ) {
+                return;
+            }
+            const rendered = renderer.render(String(message.text || ''));
+            const sanitized = DOMPurify.sanitize(rendered, {
+                USE_PROFILES: {
+                    html: true,
+                    mathMl: true,
+                    svg: true
+                }
+            });
+            const template = document.createElement('template');
+            template.innerHTML = sanitized;
+            const basePath = buildMarkdownContextBasePath(
+                '',
+                this.getAgentMarkdownBaseDirectory(agentTab, message)
+            );
+            this.decorateMarkdownPreviewContent(
+                template.content,
+                basePath,
+                session
+            );
+            body.replaceChildren(template.content);
+        } catch {
+            // Keep the lightweight fallback rendering.
+        }
+    }
+
     scrollMarkdownPreviewHash(hash) {
         const nextHash = String(hash || '').trim();
         if (!nextHash || !this.markdownPreviewScroll) {
@@ -5171,7 +5279,10 @@ class EditorManager {
             );
 
             const label = document.createElement('span');
-            label.textContent = getAgentDisplayLabel(agentTab);
+            tab.title = String(getAgentDisplayLabel(agentTab) || '').trim();
+            label.textContent = formatWorkspaceTabTitle(
+                getAgentDisplayLabel(agentTab)
+            );
 
             const closeBtn = document.createElement('span');
             closeBtn.className = 'close-btn';
@@ -5475,7 +5586,9 @@ class EditorManager {
         this.hideMarkdownPreview();
         this.emptyState.style.display = 'none';
         this.agentContainer.style.display = 'flex';
-        this.renderAgentPanel(agentTab);
+        this.renderAgentPanel(agentTab, {
+            reason: isRestore ? 'activate-restore' : 'activate'
+        });
     }
 
     async closeAgentTab(agentTabKey) {
@@ -5485,7 +5598,7 @@ class EditorManager {
         removeAgentTab(agentTabKey);
     }
 
-    renderAgentPanel(agentTab) {
+    renderAgentPanel(agentTab, options = {}) {
         this.disposeAgentEmbeddedEditors();
         const previousLayout = this.captureAgentTranscriptLayout();
         const previousScrollTop = previousLayout?.scrollTop || 0;
@@ -5552,12 +5665,29 @@ class EditorManager {
 
         this.agentTranscript.innerHTML = '';
         const timeline = getAgentTimelineItems(agentTab);
+        const shouldPinToBottom = wasNearBottom || (
+            agentTab.scrollToBottomOnNextRender
+            && isAgentTranscriptWindowNearLatest(
+                agentTab,
+                timeline.length
+            )
+        );
+        const transcriptWindow = getAgentTranscriptWindow(
+            agentTab,
+            timeline.length,
+            { pinToBottom: shouldPinToBottom }
+        );
+        const visibleTimeline = timeline.slice(
+            transcriptWindow.start,
+            transcriptWindow.end
+        );
         if (timeline.length === 0) {
             this.agentTranscript.appendChild(
                 this.buildAgentEmptyState(agentTab)
             );
         } else {
-            for (const [index, entry] of timeline.entries()) {
+            for (const [index, entry] of visibleTimeline.entries()) {
+                const timelineIndex = transcriptWindow.start + index;
                 let node = null;
                 if (entry.type === 'message') {
                     node = this.buildAgentMessageNode(agentTab, entry.value);
@@ -5575,8 +5705,12 @@ class EditorManager {
                     );
                 }
                 if (node) {
+                    node.dataset.timelineKey = getAgentTimelineItemKey(
+                        entry,
+                        timelineIndex
+                    );
                     if (
-                        index > 0
+                        timelineIndex > 0
                         && entry.type === 'message'
                         && String(entry.value?.role || '').toLowerCase()
                             === 'user'
@@ -5587,13 +5721,19 @@ class EditorManager {
                 }
             }
         }
-        const shouldPinToBottom = agentTab.scrollToBottomOnNextRender
-            || wasNearBottom;
-        if (shouldPinToBottom) {
+        if (options.preserveTranscriptAnchor) {
+            const restored = this.restoreAgentTranscriptAnchor(
+                options.preserveTranscriptAnchor
+            );
+            if (!restored) {
+                this.agentTranscript.scrollTop = previousScrollTop;
+            }
+        } else if (shouldPinToBottom) {
             this.agentTranscript.scrollTop = this.agentTranscript.scrollHeight;
             agentTab.scrollToBottomOnNextRender = false;
         } else {
             this.agentTranscript.scrollTop = previousScrollTop;
+            agentTab.scrollToBottomOnNextRender = false;
         }
         this.updateAgentScrollBottomButton();
         this.rememberAgentTranscriptLayout();
@@ -5611,6 +5751,95 @@ class EditorManager {
         this.scheduleAgentTranscriptViewportUpdate(shouldPinToBottom);
     }
 
+    async loadOlderAgentTimeline(agentTab) {
+        if (!agentTab || agentTab.historyWindowLoading) {
+            return;
+        }
+        const timeline = getAgentTimelineItems(agentTab);
+        const transcriptWindow = getAgentTranscriptWindow(
+            agentTab,
+            timeline.length
+        );
+        if (transcriptWindow.start <= 0) {
+            return;
+        }
+        agentTab.scrollToBottomOnNextRender = false;
+        const currentWindowSize = transcriptWindow.end
+            - transcriptWindow.start;
+        const step = Math.min(
+            AGENT_TRANSCRIPT_WINDOW_STEP,
+            transcriptWindow.start
+        );
+        const nextStart = Math.max(0, transcriptWindow.start - step);
+        const anchor = this.captureAgentTranscriptAnchor(
+            getAgentTimelineItemKey(
+                timeline[transcriptWindow.start],
+                transcriptWindow.start
+            )
+        );
+        agentTab.historyWindowLoading = true;
+        agentTab.historyWindowStart = nextStart;
+        agentTab.historyWindowEnd = Math.min(
+            timeline.length,
+            nextStart + currentWindowSize
+        );
+        try {
+            this.renderAgentPanel(agentTab, {
+                reason: 'history-older',
+                preserveTranscriptAnchor: anchor
+            });
+        } finally {
+            agentTab.historyWindowLoading = false;
+        }
+    }
+
+    async loadNewerAgentTimeline(agentTab) {
+        if (!agentTab || agentTab.historyWindowLoading) {
+            return;
+        }
+        const timeline = getAgentTimelineItems(agentTab);
+        const transcriptWindow = getAgentTranscriptWindow(
+            agentTab,
+            timeline.length
+        );
+        if (transcriptWindow.end >= timeline.length) {
+            return;
+        }
+        agentTab.scrollToBottomOnNextRender = false;
+        const currentWindowSize = transcriptWindow.end
+            - transcriptWindow.start;
+        const step = Math.min(
+            AGENT_TRANSCRIPT_WINDOW_STEP,
+            timeline.length - transcriptWindow.end
+        );
+        const nextEnd = Math.min(
+            timeline.length,
+            transcriptWindow.end + step
+        );
+        const nextStart = Math.max(0, nextEnd - currentWindowSize);
+        const anchorIndex = Math.max(
+            transcriptWindow.start,
+            transcriptWindow.end - 1
+        );
+        const anchor = this.captureAgentTranscriptAnchor(
+            getAgentTimelineItemKey(
+                timeline[anchorIndex],
+                anchorIndex
+            )
+        );
+        agentTab.historyWindowLoading = true;
+        agentTab.historyWindowStart = nextStart;
+        agentTab.historyWindowEnd = nextEnd;
+        try {
+            this.renderAgentPanel(agentTab, {
+                reason: 'history-newer',
+                preserveTranscriptAnchor: anchor
+            });
+        } finally {
+            agentTab.historyWindowLoading = false;
+        }
+    }
+
     refreshAgentTimelineTimestamps() {
         if (!this.agentContainer || this.agentContainer.style.display === 'none') {
             return;
@@ -5914,6 +6143,7 @@ class EditorManager {
             ) {
                 body.classList.add('markdown');
                 body.innerHTML = renderAgentMessageMarkdown(message.text || '');
+                void this.enhanceAgentMarkdownBody(agentTab, message, body);
             } else {
                 body.classList.add('plain');
                 body.textContent = message.text || '';
@@ -5999,9 +6229,27 @@ class EditorManager {
                     toolStatusClass
                 );
                 details.appendChild(summary);
-                details.appendChild(
-                    this.buildAgentSectionBody(details, section)
-                );
+                const bodyHost = document.createElement('div');
+                bodyHost.className = 'agent-tool-call-section-content';
+                const mountBody = () => {
+                    if (bodyHost.dataset.mounted === 'true') {
+                        return;
+                    }
+                    bodyHost.dataset.mounted = 'true';
+                    bodyHost.appendChild(
+                        this.buildAgentSectionBody(details, section)
+                    );
+                };
+                details.appendChild(bodyHost);
+                if (details.open) {
+                    queueMicrotask(mountBody);
+                } else {
+                    details.addEventListener('toggle', () => {
+                        if (details.open) {
+                            mountBody();
+                        }
+                    }, { once: true });
+                }
                 sectionContainer.appendChild(details);
             }
             node.appendChild(sectionContainer);
@@ -6093,9 +6341,27 @@ class EditorManager {
                     permission.status || 'pending'
                 );
                 details.appendChild(summary);
-                details.appendChild(
-                    this.buildAgentSectionBody(details, section)
-                );
+                const bodyHost = document.createElement('div');
+                bodyHost.className = 'agent-tool-call-section-content';
+                const mountBody = () => {
+                    if (bodyHost.dataset.mounted === 'true') {
+                        return;
+                    }
+                    bodyHost.dataset.mounted = 'true';
+                    bodyHost.appendChild(
+                        this.buildAgentSectionBody(details, section)
+                    );
+                };
+                details.appendChild(bodyHost);
+                if (details.open) {
+                    queueMicrotask(mountBody);
+                } else {
+                    details.addEventListener('toggle', () => {
+                        if (details.open) {
+                            mountBody();
+                        }
+                    }, { once: true });
+                }
                 sectionContainer.appendChild(details);
             }
             card.appendChild(sectionContainer);
@@ -6790,6 +7056,51 @@ class EditorManager {
         };
     }
 
+    findAgentTranscriptNodeByKey(timelineKey = '') {
+        if (!this.agentTranscript || !timelineKey) {
+            return null;
+        }
+        for (const node of this.agentTranscript.children) {
+            if (node?.dataset?.timelineKey === timelineKey) {
+                return node;
+            }
+        }
+        return null;
+    }
+
+    captureAgentTranscriptAnchor(timelineKey = '') {
+        const node = this.findAgentTranscriptNodeByKey(timelineKey);
+        if (!node || !this.agentTranscript) {
+            return null;
+        }
+        return {
+            timelineKey,
+            scrollTop: this.agentTranscript.scrollTop,
+            offsetTop: node.offsetTop
+        };
+    }
+
+    restoreAgentTranscriptAnchor(anchor = null) {
+        if (!anchor || !this.agentTranscript) {
+            return false;
+        }
+        const node = this.findAgentTranscriptNodeByKey(
+            anchor.timelineKey || ''
+        );
+        if (!node) {
+            return false;
+        }
+        const previousOffsetTop = Number.isFinite(anchor.offsetTop)
+            ? anchor.offsetTop
+            : 0;
+        const previousScrollTop = Number.isFinite(anchor.scrollTop)
+            ? anchor.scrollTop
+            : 0;
+        this.agentTranscript.scrollTop = previousScrollTop
+            + (node.offsetTop - previousOffsetTop);
+        return true;
+    }
+
     rememberAgentTranscriptLayout() {
         this.agentTranscriptLayout = this.captureAgentTranscriptLayout();
     }
@@ -6810,6 +7121,32 @@ class EditorManager {
     }
 
     scrollAgentTranscriptToBottom() {
+        const activeTab = getActiveAgentTab();
+        if (activeTab) {
+            const total = getAgentTimelineItems(activeTab).length;
+            const transcriptWindow = getAgentTranscriptWindow(
+                activeTab,
+                total,
+                { pinToBottom: false }
+            );
+            const latestWindow = getAgentTranscriptWindow(
+                null,
+                total,
+                { pinToBottom: true }
+            );
+            const alreadyLatest = transcriptWindow.start === latestWindow.start
+                && transcriptWindow.end === latestWindow.end;
+            if (!alreadyLatest) {
+                activeTab.historyWindowStart = latestWindow.start;
+                activeTab.historyWindowEnd = latestWindow.end;
+                activeTab.scrollToBottomOnNextRender = true;
+                this.renderAgentPanel(activeTab, {
+                    reason: 'scroll-latest'
+                });
+                return;
+            }
+            activeTab.scrollToBottomOnNextRender = false;
+        }
         if (!this.agentTranscript) return;
         this.agentTranscript.scrollTop = this.agentTranscript.scrollHeight;
         this.updateAgentScrollBottomButton();
@@ -8315,10 +8652,11 @@ class Session {
 
         const titleEl = tab.querySelector('.title');
         const titleTextEl = tab.querySelector('.tab-title-text');
+        const displayTitle = formatWorkspaceTabTitle(this.title);
         if (titleTextEl) {
-            titleTextEl.textContent = this.title;
+            titleTextEl.textContent = displayTitle;
         } else if (titleEl) {
-            titleEl.textContent = this.title;
+            titleEl.textContent = displayTitle;
         }
 
         const titleIconEl = tab.querySelector('.tab-status-icon');
@@ -8747,6 +9085,9 @@ class AgentTab {
         this.scrollToBottomOnNextRender = true;
         this.busySyncTimer = null;
         this.planHistory = [];
+        this.historyWindowStart = -1;
+        this.historyWindowEnd = -1;
+        this.historyWindowLoading = false;
         this.resumeSessions = [];
         this.resumeSessionsLoadedAt = 0;
         this.resumeSessionsPromise = null;
@@ -10880,6 +11221,106 @@ function getAgentTimelineItems(agentTab) {
     return items;
 }
 
+function getAgentTimelineItemKey(entry, absoluteIndex = 0) {
+    if (!entry) {
+        return `unknown:${absoluteIndex}`;
+    }
+    const order = Number.isFinite(entry.order) ? entry.order : -1;
+    return `${entry.type}:${order}:${absoluteIndex}`;
+}
+
+function formatWorkspaceTabTitle(
+    value,
+    maxLength = WORKSPACE_TAB_TITLE_MAX_LENGTH
+) {
+    const text = String(value || '');
+    const characters = Array.from(text);
+    if (characters.length <= maxLength) {
+        return text;
+    }
+    if (maxLength <= 3) {
+        return '.'.repeat(Math.max(0, maxLength));
+    }
+    return `${characters.slice(0, maxLength - 3).join('')}...`;
+}
+
+function getAgentTranscriptWindow(
+    agentTab,
+    totalCount = 0,
+    options = {}
+) {
+    const total = Number.isFinite(totalCount)
+        ? Math.max(0, totalCount)
+        : 0;
+    const windowSize = Math.min(total, AGENT_TRANSCRIPT_INITIAL_VISIBLE_BLOCKS);
+    const latestStart = Math.max(0, total - windowSize);
+    const latestWindow = {
+        start: latestStart,
+        end: total
+    };
+    if (!agentTab) {
+        return latestWindow;
+    }
+    if (windowSize === 0) {
+        agentTab.historyWindowStart = 0;
+        agentTab.historyWindowEnd = 0;
+        return { start: 0, end: 0 };
+    }
+    if (options.pinToBottom) {
+        agentTab.historyWindowStart = latestWindow.start;
+        agentTab.historyWindowEnd = latestWindow.end;
+        return latestWindow;
+    }
+    let start = Number.isFinite(agentTab.historyWindowStart)
+        ? Math.max(0, Math.floor(agentTab.historyWindowStart))
+        : latestWindow.start;
+    let end = Number.isFinite(agentTab.historyWindowEnd)
+        ? Math.max(start, Math.floor(agentTab.historyWindowEnd))
+        : latestWindow.end;
+    if (end > total) {
+        end = total;
+    }
+    if (end - start !== windowSize) {
+        if (total <= windowSize) {
+            start = 0;
+            end = total;
+        } else if (end >= total) {
+            end = total;
+            start = latestWindow.start;
+        } else if (start <= 0) {
+            start = 0;
+            end = windowSize;
+        } else {
+            end = Math.min(total, start + windowSize);
+            start = Math.max(0, end - windowSize);
+        }
+    }
+    agentTab.historyWindowStart = start;
+    agentTab.historyWindowEnd = end;
+    return { start, end };
+}
+
+function isAgentTranscriptWindowNearLatest(agentTab, totalCount = 0) {
+    const total = Number.isFinite(totalCount)
+        ? Math.max(0, totalCount)
+        : 0;
+    if (!agentTab) {
+        return true;
+    }
+    if (
+        !Number.isFinite(agentTab.historyWindowStart)
+        || !Number.isFinite(agentTab.historyWindowEnd)
+        || agentTab.historyWindowStart < 0
+        || agentTab.historyWindowEnd < 0
+    ) {
+        return true;
+    }
+    return agentTab.historyWindowEnd >= Math.max(
+        0,
+        total - AGENT_TRANSCRIPT_FOLLOW_LATEST_TOLERANCE
+    );
+}
+
 function normalizePlanStatusClass(status = '') {
     const value = String(status || '').toLowerCase();
     if (value === 'completed') return 'completed';

package/public/styles.css

@@ -2480,6 +2480,7 @@ kbd {
     justify-content: space-between;
     gap: 10px;
     flex-wrap: wrap;
+    min-width: 0;
 }
 
 .agent-tool-call-title,
@@ -2487,12 +2488,18 @@ kbd {
     color: var(--text-highlight);
     font-weight: 600;
     font-size: 12px;
+    min-width: 0;
+    flex: 1 1 auto;
+    overflow-wrap: anywhere;
+    word-break: break-word;
 }
 
 .agent-tool-call-meta {
     color: var(--text-muted);
     font-size: 10px;
     margin-top: 4px;
+    overflow-wrap: anywhere;
+    word-break: break-word;
 }
 
 .agent-path-links {
@@ -2916,10 +2923,28 @@ kbd {
     margin: 0 0 8px;
 }
 
+.agent-message-body.markdown h1,
+.agent-message-body.markdown h2,
+.agent-message-body.markdown h3,
+.agent-message-body.markdown h4,
+.agent-message-body.markdown h5,
+.agent-message-body.markdown h6 {
+    margin: 0 0 10px;
+    color: var(--text-highlight);
+    line-height: 1.35;
+}
+
 .agent-message-body.markdown ul {
     padding-left: 18px;
 }
 
+.agent-message-body.markdown blockquote {
+    margin: 0 0 10px;
+    padding: 2px 0 2px 12px;
+    border-left: 3px solid rgba(38, 139, 210, 0.34);
+    color: var(--text-muted);
+}
+
 .agent-message-body.markdown code {
     font: inherit;
     font-size: 11px;
@@ -2927,6 +2952,8 @@ kbd {
     border: 1px solid rgba(131, 148, 150, 0.18);
     border-radius: 6px;
     padding: 1px 4px;
+    overflow-wrap: anywhere;
+    word-break: break-word;
 }
 
 .agent-message-body.markdown pre {
@@ -2949,6 +2976,52 @@ kbd {
     color: var(--accent-primary);
     text-decoration: underline;
     text-underline-offset: 2px;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+}
+
+.agent-message-body.markdown img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    margin: 0 0 10px;
+    border-radius: 8px;
+}
+
+.agent-message-body.markdown table {
+    display: block;
+    width: max-content;
+    max-width: 100%;
+    overflow-x: auto;
+    border-collapse: collapse;
+    margin: 0 0 10px;
+}
+
+.agent-message-body.markdown th,
+.agent-message-body.markdown td {
+    border: 1px solid rgba(131, 148, 150, 0.2);
+    padding: 6px 8px;
+    text-align: left;
+}
+
+.agent-message-body.markdown hr {
+    border: 0;
+    border-top: 1px solid rgba(131, 148, 150, 0.18);
+    margin: 10px 0;
+}
+
+.agent-message-body.markdown .task-list-item {
+    list-style: none;
+}
+
+.agent-message-body.markdown .task-list-item input {
+    margin-right: 8px;
+}
+
+.agent-message-body.markdown .katex-display {
+    overflow-x: auto;
+    overflow-y: hidden;
+    margin: 0 0 10px;
 }
 
 .agent-message-attachments {