tabminal 3.0.14 → 3.0.16

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,90 @@ 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;
+        }
+        if (agentTab?.busy) {
+            return;
+        }
+        if (isAgentMessageStreaming(agentTab, message)) {
+            return;
+        }
+        const session = this.currentSession;
+        if (!session) {
+            return;
+        }
+
+        const sourceText = String(message.text || '');
+        const cachedMarkdown = getAgentMessageMarkdownCache(message);
+        if (cachedMarkdown) {
+            body.classList.remove('plain');
+            body.classList.add('markdown');
+            body.innerHTML = cachedMarkdown;
+            return;
+        }
+
+        const renderToken = `${Date.now()}:${Math.random()}`;
+        body.dataset.markdownRenderToken = renderToken;
+
+        try {
+            const { renderer } = await loadMarkdownPreviewBundle();
+            if (
+                String(message.text || '') !== sourceText
+                || isAgentMessageStreaming(agentTab, message)
+            ) {
+                return;
+            }
+            const rendered = renderer.render(sourceText);
+            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
+            );
+            const nextMarkdownHtml = template.innerHTML;
+            message.markdownRenderSource = sourceText;
+            message.markdownRenderHtml = nextMarkdownHtml;
+            if (
+                !body.isConnected
+                || body.dataset.markdownRenderToken !== renderToken
+            ) {
+                return;
+            }
+            body.classList.remove('plain');
+            body.classList.add('markdown');
+            body.replaceChildren(template.content);
+        } catch {
+            // Keep the lightweight fallback rendering.
+        }
+    }
+
     scrollMarkdownPreviewHash(hash) {
         const nextHash = String(hash || '').trim();
         if (!nextHash || !this.markdownPreviewScroll) {
@@ -5171,7 +5305,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 +5612,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,8 +5624,7 @@ class EditorManager {
         removeAgentTab(agentTabKey);
     }
 
-    renderAgentPanel(agentTab) {
-        this.disposeAgentEmbeddedEditors();
+    renderAgentPanel(agentTab, options = {}) {
         const previousLayout = this.captureAgentTranscriptLayout();
         const previousScrollTop = previousLayout?.scrollTop || 0;
         const wasNearBottom = this.isAgentTranscriptLayoutNearBottom(
@@ -5550,50 +5688,97 @@ class EditorManager {
 
         this.renderAgentComposerAttachments(agentTab);
 
-        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)
-            );
+            const existingChildren = Array.from(this.agentTranscript.children);
+            const emptyState = this.buildAgentEmptyState(agentTab);
+            this.agentTranscript.replaceChildren(emptyState);
+            for (const node of existingChildren) {
+                this.disposeAgentTimelineNode(node);
+            }
         } else {
-            for (const [index, entry] of timeline.entries()) {
-                let node = null;
-                if (entry.type === 'message') {
-                    node = this.buildAgentMessageNode(agentTab, entry.value);
-                } else if (entry.type === 'tool') {
-                    node = this.buildAgentToolNode(agentTab, entry.value);
-                } else if (entry.type === 'permission') {
-                    node = this.buildAgentPermissionNode(
-                        agentTab,
-                        entry.value
-                    );
-                } else if (entry.type === 'plan') {
-                    node = this.buildAgentPlanHistoryNode(
-                        agentTab,
-                        entry.value
-                    );
+            const existingChildren = Array.from(this.agentTranscript.children);
+            const existingByKey = new Map();
+            for (const node of existingChildren) {
+                const key = node?.dataset?.timelineKey || '';
+                if (key) {
+                    existingByKey.set(key, node);
                 }
+            }
+            const nextNodes = [];
+            for (const [index, entry] of visibleTimeline.entries()) {
+                const timelineIndex = transcriptWindow.start + index;
+                const timelineKey = getAgentTimelineItemKey(
+                    entry,
+                    timelineIndex
+                );
+                const renderSignature = getAgentTimelineRenderSignature(
+                    agentTab,
+                    entry
+                );
+                const turnStart = timelineIndex > 0
+                    && entry.type === 'message'
+                    && String(entry.value?.role || '').toLowerCase()
+                        === 'user';
+                let node = existingByKey.get(timelineKey) || null;
                 if (node) {
+                    existingByKey.delete(timelineKey);
                     if (
-                        index > 0
-                        && entry.type === 'message'
-                        && String(entry.value?.role || '').toLowerCase()
-                            === 'user'
+                        node.dataset.renderSignature !== renderSignature
                     ) {
-                        node.classList.add('agent-turn-start');
+                        this.disposeAgentTimelineNode(node);
+                        node = null;
                     }
-                    this.agentTranscript.appendChild(node);
                 }
+                if (!node) {
+                    node = this.buildAgentTimelineNode(
+                        agentTab,
+                        entry,
+                        timelineIndex
+                    );
+                }
+                if (node) {
+                    node.dataset.timelineKey = timelineKey;
+                    node.dataset.renderSignature = renderSignature;
+                    node.classList.toggle('agent-turn-start', turnStart);
+                    nextNodes.push(node);
+                }
+            }
+            for (const node of existingByKey.values()) {
+                this.disposeAgentTimelineNode(node);
             }
+            this.applyAgentTranscriptNodeList(nextNodes);
         }
-        const shouldPinToBottom = agentTab.scrollToBottomOnNextRender
-            || wasNearBottom;
-        if (shouldPinToBottom) {
+        this.rebuildAgentEmbeddedTerminalRegistry();
+        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 +5796,149 @@ class EditorManager {
         this.scheduleAgentTranscriptViewportUpdate(shouldPinToBottom);
     }
 
+    buildAgentTimelineNode(agentTab, entry, timelineIndex) {
+        if (!entry) {
+            return null;
+        }
+        let node = null;
+        if (entry.type === 'message') {
+            node = this.buildAgentMessageNode(agentTab, entry.value);
+        } else if (entry.type === 'tool') {
+            node = this.buildAgentToolNode(agentTab, entry.value);
+        } else if (entry.type === 'permission') {
+            node = this.buildAgentPermissionNode(
+                agentTab,
+                entry.value
+            );
+        } else if (entry.type === 'plan') {
+            node = this.buildAgentPlanHistoryNode(
+                agentTab,
+                entry.value
+            );
+        }
+        if (!node) {
+            return null;
+        }
+        node.dataset.timelineKey = getAgentTimelineItemKey(
+            entry,
+            timelineIndex
+        );
+        node.dataset.renderSignature = getAgentTimelineRenderSignature(
+            agentTab,
+            entry
+        );
+        return node;
+    }
+
+    applyAgentTranscriptNodeList(nextNodes) {
+        if (!this.agentTranscript) {
+            return;
+        }
+        const keepNodes = new Set(nextNodes);
+        let cursor = this.agentTranscript.firstChild;
+        for (const node of nextNodes) {
+            if (node === cursor) {
+                cursor = cursor?.nextSibling || null;
+                continue;
+            }
+            this.agentTranscript.insertBefore(node, cursor);
+        }
+        for (const node of Array.from(this.agentTranscript.children)) {
+            if (!keepNodes.has(node)) {
+                node.remove();
+            }
+        }
+    }
+
+    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;
@@ -5912,8 +6240,23 @@ class EditorManager {
                 message.role === 'assistant'
                 && message.kind === 'message'
             ) {
-                body.classList.add('markdown');
-                body.innerHTML = renderAgentMessageMarkdown(message.text || '');
+                const cachedMarkdown = getAgentMessageMarkdownCache(message);
+                if (
+                    !agentTab?.busy
+                    && !isAgentMessageStreaming(agentTab, message)
+                    && cachedMarkdown
+                ) {
+                    body.classList.add('markdown');
+                    body.innerHTML = cachedMarkdown;
+                } else {
+                    body.classList.add('plain');
+                    body.textContent = message.text || '';
+                    void this.enhanceAgentMarkdownBody(
+                        agentTab,
+                        message,
+                        body
+                    );
+                }
             } else {
                 body.classList.add('plain');
                 body.textContent = message.text || '';
@@ -5999,9 +6342,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 +6454,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);
@@ -6158,16 +6537,72 @@ class EditorManager {
 
     disposeAgentEmbeddedEditors() {
         this.agentEmbeddedTerminals.clear();
-        for (const disposable of this.agentEmbeddedEditors) {
-            try {
-                disposable.dispose();
-            } catch {
-                // Ignore embedded editor disposal failures.
-            }
+        if (!this.agentTranscript) {
+            this.agentEmbeddedEditors = [];
+            return;
+        }
+        for (const node of Array.from(this.agentTranscript.children)) {
+            this.disposeAgentTimelineNode(node);
         }
         this.agentEmbeddedEditors = [];
     }
 
+    trackAgentTimelineDisposable(node, disposable) {
+        if (!node || !disposable) {
+            return;
+        }
+        if (!Array.isArray(node.__agentDisposables)) {
+            node.__agentDisposables = [];
+        }
+        node.__agentDisposables.push(disposable);
+    }
+
+    disposeAgentTimelineNode(node) {
+        if (!node || typeof node.querySelectorAll !== 'function') {
+            return;
+        }
+        const ownedNodes = [
+            node,
+            ...Array.from(node.querySelectorAll('*'))
+        ];
+        for (const ownedNode of ownedNodes) {
+            const disposables = Array.isArray(ownedNode.__agentDisposables)
+                ? ownedNode.__agentDisposables
+                : [];
+            for (const disposable of disposables) {
+                try {
+                    disposable.dispose();
+                } catch {
+                    // Ignore embedded editor disposal failures.
+                }
+            }
+            ownedNode.__agentDisposables = [];
+            if (ownedNode.__agentTerminalBinding) {
+                ownedNode.__agentTerminalBinding = null;
+            }
+        }
+    }
+
+    rebuildAgentEmbeddedTerminalRegistry() {
+        this.agentEmbeddedTerminals.clear();
+        if (!this.agentTranscript) {
+            return;
+        }
+        const terminalHosts = this.agentTranscript.querySelectorAll(
+            '.agent-tool-call-terminal-host'
+        );
+        for (const host of terminalHosts) {
+            const binding = host.__agentTerminalBinding;
+            if (!binding?.terminalId) {
+                continue;
+            }
+            if (!this.agentEmbeddedTerminals.has(binding.terminalId)) {
+                this.agentEmbeddedTerminals.set(binding.terminalId, []);
+            }
+            this.agentEmbeddedTerminals.get(binding.terminalId).push(binding);
+        }
+    }
+
     buildAgentSectionBody(details, section) {
         if (
             section?.kind === 'diff'
@@ -6231,7 +6666,8 @@ class EditorManager {
                     + '"JetBrains Mono", Menlo, Consolas, monospace'
             }
         );
-        this.agentEmbeddedEditors.push(editor, model);
+        this.trackAgentTimelineDisposable(host, editor);
+        this.trackAgentTimelineDisposable(host, model);
         details.addEventListener('toggle', () => {
             if (details.open) {
                 requestAnimationFrame(() => {
@@ -6318,20 +6754,19 @@ class EditorManager {
             }
         });
         if (terminalId) {
-            if (!this.agentEmbeddedTerminals.has(terminalId)) {
-                this.agentEmbeddedTerminals.set(terminalId, []);
-            }
-                this.agentEmbeddedTerminals.get(terminalId).push({
-                    meta,
-                    header,
-                    openButton,
-                    terminalNode,
-                    terminal: embeddedTerm,
-                    fitAddon,
+            host.__agentTerminalBinding = {
+                terminalId,
+                meta,
+                header,
+                openButton,
+                terminalNode,
+                terminal: embeddedTerm,
+                fitAddon,
                 layout: layoutTerminal
-            });
+            };
         }
-        this.agentEmbeddedEditors.push(embeddedTerm, fitAddon);
+        this.trackAgentTimelineDisposable(host, embeddedTerm);
+        this.trackAgentTimelineDisposable(host, fitAddon);
 
         return host;
     }
@@ -6445,11 +6880,9 @@ class EditorManager {
             original: originalModel,
             modified: modifiedModel
         });
-        this.agentEmbeddedEditors.push(
-            diffEditor,
-            originalModel,
-            modifiedModel
-        );
+        this.trackAgentTimelineDisposable(host, diffEditor);
+        this.trackAgentTimelineDisposable(host, originalModel);
+        this.trackAgentTimelineDisposable(host, modifiedModel);
         details.addEventListener('toggle', () => {
             if (details.open) {
                 requestAnimationFrame(() => {
@@ -6790,6 +7223,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 +7288,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 +8819,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 +9252,10 @@ class AgentTab {
         this.scrollToBottomOnNextRender = true;
         this.busySyncTimer = null;
         this.planHistory = [];
+        this.historyWindowStart = -1;
+        this.historyWindowEnd = -1;
+        this.historyWindowLoading = false;
+        this.streamingAssistantStreamKey = '';
         this.resumeSessions = [];
         this.resumeSessionsLoadedAt = 0;
         this.resumeSessionsPromise = null;
@@ -8954,9 +9463,23 @@ class AgentTab {
                 break;
             case 'message_open':
                 this.#upsertMessage(message.message);
+                if (
+                    message.message?.role === 'assistant'
+                    && message.message?.kind === 'message'
+                    && typeof message.message?.streamKey === 'string'
+                ) {
+                    this.streamingAssistantStreamKey = message.message.streamKey;
+                }
                 break;
             case 'message_chunk':
                 this.#appendChunk(message);
+                if (
+                    message.role === 'assistant'
+                    && message.kind === 'message'
+                    && typeof message.streamKey === 'string'
+                ) {
+                    this.streamingAssistantStreamKey = message.streamKey;
+                }
                 break;
             case 'session_update':
                 this.#applySessionUpdate(message.update || {});
@@ -9052,6 +9575,9 @@ class AgentTab {
             default:
                 break;
         }
+        if (!this.busy) {
+            this.streamingAssistantStreamKey = '';
+        }
         const shouldAutostartQueuedPrompt = (
             wasBusy
             && !this.busy
@@ -9305,7 +9831,7 @@ class AgentTab {
             const byId = this.messages.findIndex(
                 (message) => message.id === candidate.id
             );
-            if (byId !== -1) return byId;
+            return byId;
         }
         if (!candidate.streamKey) return -1;
         for (let index = this.messages.length - 1; index >= 0; index -= 1) {
@@ -9325,39 +9851,51 @@ class AgentTab {
         if (!message) return;
         const index = this.#findMessageIndex(message);
         if (index === -1) {
-            this.messages.push(this.#normalizeMessage(message));
+            const nextMessage = this.#normalizeMessage(message);
+            clearAgentMessageMarkdownCache(nextMessage);
+            this.messages.push(nextMessage);
             return;
         }
 
         const previous = this.messages[index];
         const nextMessage = this.#normalizeMessage(message, previous.order);
+        const mergedText = selectAgentMessageText(previous.text, nextMessage.text);
         this.messages[index] = {
             ...previous,
             ...nextMessage,
             createdAt: nextMessage.createdAt || previous.createdAt || '',
-            text: selectAgentMessageText(previous.text, nextMessage.text)
+            text: mergedText
         };
+        if (mergedText !== (previous.text || '')) {
+            clearAgentMessageMarkdownCache(this.messages[index]);
+        }
     }
 
     #appendChunk(message) {
         const index = this.#findMessageIndex(message);
         if (index !== -1) {
             const existing = this.messages[index];
-            existing.text = mergeAgentMessageText(
+            const nextText = mergeAgentMessageText(
                 existing.text || '',
                 message.text || ''
             );
+            if (nextText !== existing.text) {
+                existing.text = nextText;
+                clearAgentMessageMarkdownCache(existing);
+            }
             return;
         }
 
-        this.messages.push(this.#normalizeMessage({
+        const nextMessage = this.#normalizeMessage({
             id: crypto.randomUUID(),
             streamKey: message.streamKey,
             role: message.role || 'assistant',
             kind: message.kind || 'message',
             text: message.text || '',
             createdAt: new Date().toISOString()
-        }));
+        });
+        clearAgentMessageMarkdownCache(nextMessage);
+        this.messages.push(nextMessage);
     }
 
     #applySessionUpdate(update) {
@@ -9515,9 +10053,21 @@ class AgentTab {
         this.busy = typeof data.busy === 'boolean' ? data.busy : this.busy;
         this.errorMessage = data.errorMessage || this.errorMessage || '';
         this.currentModeId = data.currentModeId || this.currentModeId || '';
+        this.availableModes = Array.isArray(data.availableModes)
+            ? data.availableModes
+            : this.availableModes;
+        this.availableCommands = Array.isArray(data.availableCommands)
+            ? data.availableCommands
+            : this.availableCommands;
+        this.configOptions = Array.isArray(data.configOptions)
+            ? data.configOptions
+            : this.configOptions;
         this.sessionCapabilities = normalizeAgentSessionCapabilities(
             data.sessionCapabilities || this.sessionCapabilities
         );
+        if (data.usage) {
+            this.usage = this.#normalizeUsageState(data.usage);
+        }
         const nextSession = this.getLinkedSession();
         const nextSnapshot = JSON.stringify({
             runtimeId: this.runtimeId || '',
@@ -10484,6 +11034,19 @@ function mergeAgentMessageText(previousText, chunkText) {
     const chunk = String(chunkText || '');
     if (!previous) return chunk;
     if (!chunk) return previous;
+    if (previous === chunk) return previous;
+    if (chunk.startsWith(previous)) {
+        return chunk;
+    }
+    if (previous.startsWith(chunk)) {
+        return previous;
+    }
+    const maxOverlap = Math.min(previous.length, chunk.length, 2048);
+    for (let overlap = maxOverlap; overlap >= 2; overlap -= 1) {
+        if (previous.slice(-overlap) === chunk.slice(0, overlap)) {
+            return `${previous}${chunk.slice(overlap)}`;
+        }
+    }
     if (/\s$/.test(previous) || /^\s/.test(chunk)) {
         return `${previous}${chunk}`;
     }
@@ -10880,6 +11443,194 @@ 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 clearAgentMessageMarkdownCache(message) {
+    if (!message || typeof message !== 'object') {
+        return;
+    }
+    delete message.markdownRenderSource;
+    delete message.markdownRenderHtml;
+}
+
+function getAgentMessageMarkdownCache(message) {
+    if (!message || typeof message !== 'object') {
+        return '';
+    }
+    const source = typeof message.text === 'string' ? message.text : '';
+    if (
+        typeof message.markdownRenderSource !== 'string'
+        || message.markdownRenderSource !== source
+    ) {
+        return '';
+    }
+    return typeof message.markdownRenderHtml === 'string'
+        ? message.markdownRenderHtml
+        : '';
+}
+
+function isAgentMessageStreaming(agentTab, message) {
+    if (!agentTab || !message) {
+        return false;
+    }
+    return !!(
+        agentTab.busy
+        && message.role === 'assistant'
+        && message.kind === 'message'
+        && message.streamKey
+        && message.streamKey === agentTab.streamingAssistantStreamKey
+    );
+}
+
+function hashUiText(value) {
+    const text = String(value || '');
+    let hash = 2166136261;
+    for (let index = 0; index < text.length; index += 1) {
+        hash ^= text.charCodeAt(index);
+        hash = Math.imul(hash, 16777619);
+    }
+    return (hash >>> 0).toString(16);
+}
+
+function getAgentTimelineEntrySignature(entry) {
+    if (!entry || typeof entry !== 'object') {
+        return 'unknown';
+    }
+    const type = String(entry.type || '');
+    const value = entry.value;
+    if (type === 'message') {
+        const attachments = Array.isArray(value?.attachments)
+            ? value.attachments.map((attachment) => [
+                attachment?.kind || '',
+                attachment?.name || '',
+                attachment?.path || '',
+                attachment?.url || '',
+                attachment?.size || 0,
+                attachment?.lastModified || 0
+            ])
+            : [];
+        return [
+            type,
+            value?.role || '',
+            value?.kind || '',
+            value?.createdAt || '',
+            hashUiText(value?.text || ''),
+            hashUiText(JSON.stringify(attachments))
+        ].join(':');
+    }
+    return `${type}:${hashUiText(JSON.stringify(value || null))}`;
+}
+
+function getAgentTimelineRenderSignature(agentTab, entry) {
+    const base = getAgentTimelineEntrySignature(entry);
+    if (entry?.type !== 'message') {
+        return base;
+    }
+    return `${base}:${
+        isAgentMessageStreaming(agentTab, entry.value)
+            ? 'streaming'
+            : 'settled'
+    }`;
+}
+
+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';
@@ -11700,119 +12451,6 @@ function escapeHtml(text) {
         .replaceAll("'", '&#39;');
 }
 
-function renderAgentInlineMarkdown(text) {
-    const source = String(text || '');
-    const pattern = /(`[^`]+`)|(\[([^\]]+)\]\(([^)]+)\))/g;
-    let result = '';
-    let lastIndex = 0;
-    for (const match of source.matchAll(pattern)) {
-        const [token, codeToken, , linkLabel, linkHref] = match;
-        result += escapeHtml(source.slice(lastIndex, match.index));
-        if (codeToken) {
-            result += `<code>${escapeHtml(codeToken.slice(1, -1))}</code>`;
-        } else if (linkLabel && linkHref) {
-            result += `<a href="${escapeHtml(linkHref)}">${escapeHtml(linkLabel)}</a>`;
-        } else {
-            result += escapeHtml(token);
-        }
-        lastIndex = (match.index || 0) + token.length;
-    }
-    result += escapeHtml(source.slice(lastIndex));
-    return result;
-}
-
-function normalizeAgentMessageText(text) {
-    return String(text || '')
-        .replace(/\r\n/g, '\n')
-        .replace(/([.!?`'")])([A-Z[`"])/g, '$1\n\n$2');
-}
-
-function renderAgentMessageMarkdown(text) {
-    const source = normalizeAgentMessageText(text);
-    if (!source) return '';
-
-    const lines = source.split('\n');
-    const blocks = [];
-    let paragraph = [];
-    let list = [];
-    let codeFence = null;
-    let codeLines = [];
-
-    const flushParagraph = () => {
-        if (paragraph.length === 0) return;
-        blocks.push(
-            `<p>${paragraph.map(renderAgentInlineMarkdown).join('<br>')}</p>`
-        );
-        paragraph = [];
-    };
-
-    const flushList = () => {
-        if (list.length === 0) return;
-        blocks.push(
-            `<ul>${list.map((item) => (
-                `<li>${renderAgentInlineMarkdown(item)}</li>`
-            )).join('')}</ul>`
-        );
-        list = [];
-    };
-
-    const flushCode = () => {
-        if (codeFence === null) return;
-        const languageClass = codeFence
-            ? ` class="language-${escapeHtml(codeFence)}"`
-            : '';
-        blocks.push(
-            `<pre><code${languageClass}>${escapeHtml(
-                codeLines.join('\n')
-            )}</code></pre>`
-        );
-        codeFence = null;
-        codeLines = [];
-    };
-
-    for (const line of lines) {
-        const fenceMatch = line.match(/^```(.*)$/);
-        if (fenceMatch) {
-            flushParagraph();
-            flushList();
-            if (codeFence === null) {
-                codeFence = fenceMatch[1].trim();
-            } else {
-                flushCode();
-            }
-            continue;
-        }
-
-        if (codeFence !== null) {
-            codeLines.push(line);
-            continue;
-        }
-
-        if (!line.trim()) {
-            flushParagraph();
-            flushList();
-            continue;
-        }
-
-        const listMatch = line.match(/^[-*]\s+(.*)$/);
-        if (listMatch) {
-            flushParagraph();
-            list.push(listMatch[1]);
-            continue;
-        }
-
-        flushList();
-        paragraph.push(line);
-    }
-
-    flushParagraph();
-    flushList();
-    flushCode();
-
-    const html = blocks.join('');
-    return DOMPurify.sanitize(html);
-}
-
 function truncateAgentDetail(text, limit = AGENT_MESSAGE_MAX_RENDER_BYTES) {
     const value = String(text || '');
     if (value.length <= limit) return value;
@@ -12929,9 +13567,20 @@ function upsertAgentTab(server, data) {
     const key = makeAgentTabKey(server.id, data.id);
     const existing = state.agentTabs.get(key);
     if (existing) {
-        existing.update(data);
+        const hasLiveSocket = existing.socket?.readyState === WebSocket.OPEN;
+        let shouldNotify = true;
+        if (
+            hasLiveSocket
+            && !shouldApplyAuthoritativeAgentSnapshot(existing, data)
+        ) {
+            shouldNotify = existing.applyInventory(data);
+        } else {
+            existing.update(data);
+        }
         existing.connect();
-        existing.notifyUi();
+        if (shouldNotify) {
+            existing.notifyUi();
+        }
         return existing;
     }
     const agentTab = new AgentTab(data, server);
@@ -12939,6 +13588,43 @@ function upsertAgentTab(server, data) {
     return agentTab;
 }
 
+function getAgentMessageComparableSignature(message) {
+    if (!message || typeof message !== 'object') {
+        return '';
+    }
+    return JSON.stringify([
+        message.id || '',
+        message.order || 0,
+        message.role || '',
+        message.kind || '',
+        message.streamKey || '',
+        hashUiText(message.text || '')
+    ]);
+}
+
+function shouldApplyAuthoritativeAgentSnapshot(existing, data) {
+    if (!existing || !data || typeof data !== 'object') {
+        return false;
+    }
+    const incomingBusy = data.busy === true;
+    if (incomingBusy) {
+        return false;
+    }
+    if (!Array.isArray(data.messages)) {
+        return true;
+    }
+    const currentMessages = Array.isArray(existing.messages)
+        ? existing.messages
+        : [];
+    if (data.messages.length !== currentMessages.length) {
+        return true;
+    }
+    const incomingLast = data.messages[data.messages.length - 1] || null;
+    const currentLast = currentMessages[currentMessages.length - 1] || null;
+    return getAgentMessageComparableSignature(incomingLast)
+        !== getAgentMessageComparableSignature(currentLast);
+}
+
 function upsertAgentInventoryTab(server, data) {
     const key = makeAgentTabKey(server.id, data.id);
     const existing = state.agentTabs.get(key);