tabminal 3.0.23 → 3.0.24

package/package.json

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

package/public/app.js

@@ -3,6 +3,8 @@ import { FitAddon } from 'https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.11.0/+
 import { WebLinksAddon } from 'https://cdn.jsdelivr.net/npm/@xterm/addon-web-links@0.12.0/+esm';
 import { CanvasAddon } from 'https://cdn.jsdelivr.net/npm/@xterm/addon-canvas@0.7.0/+esm';
 import { SearchAddon } from 'https://cdn.jsdelivr.net/npm/@xterm/addon-search@0.16.0/+esm';
+import { ProgressAddon } from 'https://cdn.jsdelivr.net/npm/@xterm/addon-progress@0.2.0/+esm';
+import { LigaturesAddon } from 'https://cdn.jsdelivr.net/npm/@xterm/addon-ligatures@0.10.0/+esm';
 import DOMPurify from 'https://cdn.jsdelivr.net/npm/dompurify@3.3.3/+esm';
 import {
     normalizeBaseUrl,
@@ -177,8 +179,18 @@ const MAIN_TERMINAL_THEME = {
     foreground: '#839496',
     cursor: '#93a1a1',
     cursorAccent: '#002b36',
-    selectionBackground: '#073642'
+    selectionBackground: '#073642',
+    overviewRulerBorder: '#073642'
 };
+const TERMINAL_SEARCH_DECORATIONS = {
+    matchBackground: '#073642',
+    matchBorder: '#2aa198',
+    matchOverviewRuler: '#2aa198',
+    activeMatchBackground: '#0b4f5d',
+    activeMatchBorder: '#b58900',
+    activeMatchColorOverviewRuler: '#b58900'
+};
+const TERMINAL_LIGATURE_FEATURE_SETTINGS = '"calt" on, "liga" on';
 const serverModalState = {
     mode: 'add',
     targetServerId: null
@@ -382,6 +394,120 @@ function buildMainTerminalTheme() {
     };
 }
 
+function buildTerminalOverviewRulerOptions() {
+    return {
+        width: IS_MOBILE ? 5 : 8,
+        showTopBorder: true,
+        showBottomBorder: true
+    };
+}
+
+function buildTerminalBaseOptions(overrides = {}) {
+    return {
+        allowProposedApi: true,
+        allowTransparency: true,
+        convertEol: true,
+        fontFamily: TERMINAL_FONT_FAMILY,
+        fontSize: getTerminalFontSize(),
+        fontWeight: '450',
+        fontWeightBold: '700',
+        customGlyphs: true,
+        reflowCursorLine: true,
+        rescaleOverlappingGlyphs: true,
+        ...overrides
+    };
+}
+
+function normalizeTerminalProgressState(progress) {
+    const state = Number(progress?.state);
+    const value = Number(progress?.value);
+    if (!Number.isFinite(state) || state <= 0 || state > 4) {
+        return null;
+    }
+    return {
+        state,
+        value: Number.isFinite(value)
+            ? Math.max(0, Math.min(100, Math.round(value)))
+            : 0
+    };
+}
+
+function formatTerminalProgressLabel(progress) {
+    if (!progress) {
+        return '';
+    }
+    if (progress.state === 3) {
+        return 'PROGRESS: Working…';
+    }
+    if (progress.state === 2) {
+        return `PROGRESS: Error ${progress.value}%`;
+    }
+    if (progress.state === 4) {
+        return `PROGRESS: Paused ${progress.value}%`;
+    }
+    return `PROGRESS: ${progress.value}%`;
+}
+
+function getTerminalProgressTone(progress) {
+    if (!progress) {
+        return '';
+    }
+    if (progress.state === 2) {
+        return 'error';
+    }
+    if (progress.state === 4) {
+        return 'warning';
+    }
+    if (progress.state === 3) {
+        return 'running';
+    }
+    return 'normal';
+}
+
+function loadTerminalAddonSafely(term, addon, label) {
+    if (!term || !addon) {
+        return null;
+    }
+    try {
+        term.loadAddon(addon);
+        return addon;
+    } catch (error) {
+        console.warn(`Failed to load terminal addon (${label})`, error);
+        return null;
+    }
+}
+
+function disposeTerminalAddonSafely(addon, label) {
+    if (!addon || typeof addon.dispose !== 'function') {
+        return;
+    }
+    try {
+        addon.dispose();
+    } catch (error) {
+        console.warn(`Failed to dispose terminal addon (${label})`, error);
+    }
+}
+
+function createTerminalLigaturesAddon() {
+    return new LigaturesAddon({
+        fontFeatureSettings: TERMINAL_LIGATURE_FEATURE_SETTINGS
+    });
+}
+
+function attachTerminalToHost(term, host) {
+    if (!term || !host) {
+        return false;
+    }
+    if (!term.element) {
+        term.open(host);
+        return true;
+    }
+    if (!host.contains(term.element)) {
+        host.appendChild(term.element);
+    }
+    return false;
+}
+
 function workspaceKeyToFilePath(key) {
     if (typeof key !== 'string' || key.length === 0) return '';
     if (key.startsWith(MARKDOWN_PREVIEW_WORKSPACE_TAB_PREFIX)) {
@@ -6818,20 +6944,30 @@ class EditorManager {
         }px`;
         host.appendChild(terminalNode);
 
-        const embeddedTerm = new Terminal({
+        const embeddedTerm = new Terminal(buildTerminalBaseOptions({
             disableStdin: true,
-            convertEol: true,
             cursorBlink: false,
             cursorStyle: 'bar',
             theme: buildMainTerminalTheme(),
             scrollback: 2000,
             fontSize: getTerminalFontSize(),
             fontFamily: TERMINAL_FONT_FAMILY
-        });
+        }));
         const fitAddon = new FitAddon();
-        embeddedTerm.loadAddon(fitAddon);
-        embeddedTerm.loadAddon(new CanvasAddon());
+        const canvasAddon = new CanvasAddon();
+        const ligaturesAddon = createTerminalLigaturesAddon();
+        loadTerminalAddonSafely(embeddedTerm, fitAddon, 'embedded-fit');
         embeddedTerm.open(terminalNode);
+        loadTerminalAddonSafely(
+            embeddedTerm,
+            ligaturesAddon,
+            'embedded-ligatures'
+        );
+        loadTerminalAddonSafely(
+            embeddedTerm,
+            canvasAddon,
+            'embedded-canvas'
+        );
         renderEmbeddedAgentTerminal(
             embeddedTerm,
             terminalNode,
@@ -6865,6 +7001,12 @@ class EditorManager {
                 layout: layoutTerminal
             };
         }
+        this.trackAgentTimelineDisposable(host, {
+            dispose() {
+                disposeTerminalAddonSafely(ligaturesAddon, 'embedded-ligatures');
+                disposeTerminalAddonSafely(canvasAddon, 'embedded-canvas');
+            }
+        });
         this.trackAgentTimelineDisposable(host, embeddedTerm);
         this.trackAgentTimelineDisposable(host, fitAddon);
 
@@ -8504,6 +8646,13 @@ class Session {
         this.lastExecutionEntry = null;
         this.needsAttention = false;
         this.lastNotifiedExecutionId = '';
+        this.terminalProgress = null;
+        this.previewCanvasAddon = null;
+        this.mainCanvasAddon = null;
+        this.mainLigaturesAddon = null;
+        this.mainProgressAddon = null;
+        this.mainProgressSubscription = null;
+        this.mainDeferredAddonsLoaded = false;
         const legacyEditorState = data.editorState
             && typeof data.editorState === 'object'
             ? data.editorState
@@ -8600,7 +8749,7 @@ class Session {
     }
 
     _createTerminals() {
-        this.previewTerm = new Terminal({
+        this.previewTerm = new Terminal(buildTerminalBaseOptions({
             disableStdin: true,
             cursorBlink: false,
             allowTransparency: true,
@@ -8613,29 +8762,59 @@ class Session {
                 cursor: 'transparent',
                 selectionBackground: 'transparent'
             }
-        });
+        }));
 
         if (window.innerWidth >= 768) {
-            this.previewTerm.loadAddon(new CanvasAddon());
+            this.previewCanvasAddon = new CanvasAddon();
+            loadTerminalAddonSafely(
+                this.previewTerm,
+                this.previewCanvasAddon,
+                'preview-canvas'
+            );
+        } else {
+            this.previewCanvasAddon = null;
         }
 
-        this.mainTerm = new Terminal({
-            allowTransparency: true,
-            convertEol: true,
+        this.mainTerm = new Terminal(buildTerminalBaseOptions({
             cursorBlink: true,
-            fontFamily: TERMINAL_FONT_FAMILY,
-            fontSize: getTerminalFontSize(),
             rows: this.rows,
             cols: this.cols,
-            theme: buildMainTerminalTheme()
-        });
+            theme: buildMainTerminalTheme(),
+            overviewRuler: buildTerminalOverviewRulerOptions()
+        }));
         this.mainFitAddon = new FitAddon();
         this.mainLinksAddon = new WebLinksAddon();
         this.searchAddon = new SearchAddon();
-        this.mainTerm.loadAddon(this.mainFitAddon);
-        this.mainTerm.loadAddon(this.mainLinksAddon);
-        this.mainTerm.loadAddon(this.searchAddon);
-        this.mainTerm.loadAddon(new CanvasAddon());
+        this.mainProgressAddon = new ProgressAddon();
+        this.mainCanvasAddon = new CanvasAddon();
+        this.mainLigaturesAddon = createTerminalLigaturesAddon();
+        this.mainDeferredAddonsLoaded = false;
+        loadTerminalAddonSafely(this.mainTerm, this.mainFitAddon, 'fit');
+        loadTerminalAddonSafely(this.mainTerm, this.mainLinksAddon, 'weblinks');
+        loadTerminalAddonSafely(this.mainTerm, this.searchAddon, 'search');
+        loadTerminalAddonSafely(
+            this.mainTerm,
+            this.mainProgressAddon,
+            'progress'
+        );
+        loadTerminalAddonSafely(
+            this.mainTerm,
+            this.mainCanvasAddon,
+            'canvas'
+        );
+        if (this.mainProgressAddon?.onChange) {
+            this.mainProgressSubscription = this.mainProgressAddon.onChange(
+                (progress) => {
+                    this.terminalProgress = normalizeTerminalProgressState(
+                        progress
+                    );
+                    this.updateTabUI();
+                }
+            );
+            if (this.terminalProgress) {
+                this.mainProgressAddon.progress = this.terminalProgress;
+            }
+        }
 
         this.mainTerm.onData((data) => {
             if (this.isRestoring) return;
@@ -8654,6 +8833,35 @@ class Session {
         });
     }
 
+    activateMainTerminalDeferredAddons() {
+        if (
+            !this.mainTerm
+            || !this.mainTerm.element
+            || this.mainDeferredAddonsLoaded
+        ) {
+            return;
+        }
+        loadTerminalAddonSafely(
+            this.mainTerm,
+            this.mainLigaturesAddon,
+            'ligatures'
+        );
+        this.mainDeferredAddonsLoaded = true;
+    }
+
+    disposeTerminalAddons() {
+        disposeTerminalAddonSafely(this.previewCanvasAddon, 'preview-canvas');
+        this.previewCanvasAddon = null;
+        this.mainProgressSubscription?.dispose?.();
+        this.mainProgressSubscription = null;
+        this.mainProgressAddon = null;
+        disposeTerminalAddonSafely(this.mainLigaturesAddon, 'ligatures');
+        this.mainLigaturesAddon = null;
+        disposeTerminalAddonSafely(this.mainCanvasAddon, 'canvas');
+        this.mainCanvasAddon = null;
+        this.mainDeferredAddonsLoaded = false;
+    }
+
     recreateTerminals() {
         const wasActive = state.activeSessionKey === this.key;
         const previewWrapper = this.wrapperElement;
@@ -8661,6 +8869,7 @@ class Session {
         this.unbindTerminalControlClaim();
 
         try {
+            this.disposeTerminalAddons();
             this.previewTerm?.dispose();
         } catch (e) {
             if (!e.message?.includes('onRequestRedraw')) {
@@ -8680,13 +8889,16 @@ class Session {
 
         if (previewWrapper && window.innerWidth >= 768) {
             previewWrapper.innerHTML = '';
-            this.previewTerm.open(previewWrapper);
+            attachTerminalToHost(this.previewTerm, previewWrapper);
             this.updatePreviewScale();
         }
 
         if (wasActive && terminalEl) {
             terminalEl.innerHTML = '';
-            this.mainTerm.open(terminalEl);
+            const opened = attachTerminalToHost(this.mainTerm, terminalEl);
+            if (opened) {
+                this.activateMainTerminalDeferredAddons();
+            }
             this.bindTerminalControlClaim();
             if (this.fitMainTerminalIfVisible()) {
                 this.mainTerm.focus();
@@ -8974,6 +9186,27 @@ class Session {
             }
         }
 
+        const metaProgressEl = tab.querySelector('.meta-progress');
+        if (metaProgressEl) {
+            const progressLabel = formatTerminalProgressLabel(
+                this.terminalProgress
+            );
+            if (progressLabel) {
+                metaProgressEl.textContent = progressLabel;
+                metaProgressEl.hidden = false;
+                const tone = getTerminalProgressTone(this.terminalProgress);
+                if (tone) {
+                    metaProgressEl.dataset.tone = tone;
+                } else {
+                    delete metaProgressEl.dataset.tone;
+                }
+            } else {
+                metaProgressEl.textContent = '';
+                metaProgressEl.hidden = true;
+                delete metaProgressEl.dataset.tone;
+            }
+        }
+
         syncSessionTabMinimumHeight(tab);
         if (this.wrapperElement && window.innerWidth >= 768) {
             this.schedulePreviewRelayout();
@@ -9312,7 +9545,8 @@ class Session {
         clearTimeout(this.retryTimer);
         this.socket?.close();
         this.unbindTerminalControlClaim();
-        
+        this.disposeTerminalAddons();
+
         try {
             if (this.previewTerm) this.previewTerm.dispose();
         } catch (e) {
@@ -15122,7 +15356,10 @@ function renderTabs() {
             // Only mount on Desktop to save resources and avoid visual clutter on mobile
             if (window.innerWidth >= 768) {
                 session.wrapperElement = tab.querySelector('.preview-terminal-wrapper');
-                session.previewTerm.open(session.wrapperElement);
+                attachTerminalToHost(
+                    session.previewTerm,
+                    session.wrapperElement
+                );
                 session.updatePreviewScale();
             }
             session.updateTabUI();
@@ -15347,11 +15584,16 @@ function createTabElement(session) {
     
     metaTime.textContent = `SINCE: ${mm}-${dd} ${hhStr}:${min} ${ampm}`;
 
+    const metaProgress = document.createElement('div');
+    metaProgress.className = 'meta meta-progress';
+    metaProgress.hidden = true;
+
     overlay.appendChild(title);
     overlay.appendChild(metaId);
     overlay.appendChild(metaServer);
     overlay.appendChild(metaCwd);
     overlay.appendChild(metaTime);
+    overlay.appendChild(metaProgress);
 
     tab.appendChild(previewContainer);
     tab.appendChild(overlay);
@@ -15920,7 +16162,10 @@ async function switchToSession(sessionKey, options = {}) {
     terminalEl.innerHTML = '';
     
     // Mount new session
-    session.mainTerm.open(terminalEl);
+    const opened = attachTerminalToHost(session.mainTerm, terminalEl);
+    if (opened) {
+        session.activateMainTerminalDeferredAddons();
+    }
     session.bindTerminalControlClaim();
     session.fitMainTerminalIfVisible();
     if (session.isMainTerminalVisible()) {
@@ -16720,6 +16965,14 @@ let searchOptions = {
     regex: false
 };
 
+function buildTerminalSearchOptions(options = {}) {
+    return {
+        ...searchOptions,
+        ...options,
+        decorations: TERMINAL_SEARCH_DECORATIONS
+    };
+}
+
 if (searchBar) {
     const updateUI = (found) => {
         if (!found) {
@@ -16739,8 +16992,11 @@ if (searchBar) {
         const term = searchInput.value;
         
         let found = false;
-        if (forward) found = addon.findNext(term, searchOptions);
-        else found = addon.findPrevious(term, searchOptions);
+        if (forward) {
+            found = addon.findNext(term, buildTerminalSearchOptions());
+        } else {
+            found = addon.findPrevious(term, buildTerminalSearchOptions());
+        }
         
         updateUI(found);
     };
@@ -16763,6 +17019,8 @@ if (searchBar) {
         if (!state.activeSessionKey) return;
         const term = e.target.value;
         if (!term) {
+            state.sessions.get(state.activeSessionKey)?.searchAddon
+                ?.clearDecorations();
             updateUI(false);
             searchResults.textContent = ''; // Empty when clear? Or No results? VS Code clears. 
             // But user asked for "No results always".
@@ -16771,10 +17029,11 @@ if (searchBar) {
         }
         
         // Incremental search
-        const found = state.sessions.get(state.activeSessionKey).searchAddon.findNext(term, {
-            incremental: true, 
-            ...searchOptions 
-        });
+        const found = state.sessions.get(state.activeSessionKey)
+            .searchAddon.findNext(
+                term,
+                buildTerminalSearchOptions({ incremental: true })
+            );
         
         updateUI(found);
     });
@@ -16786,6 +17045,8 @@ if (searchBar) {
         }
         if (e.key === 'Escape') {
             e.preventDefault();
+            state.sessions.get(state.activeSessionKey)?.searchAddon
+                ?.clearDecorations();
             searchBar.style.display = 'none';
             state.sessions.get(state.activeSessionKey)?.mainTerm.focus();
         }
@@ -16795,6 +17056,8 @@ if (searchBar) {
     searchPrev.addEventListener('click', () => doSearch(false));
     
     searchClose.addEventListener('click', () => {
+        state.sessions.get(state.activeSessionKey)?.searchAddon
+            ?.clearDecorations();
         searchBar.style.display = 'none';
         state.sessions.get(state.activeSessionKey)?.mainTerm.focus();
     });

package/public/styles.css

@@ -756,6 +756,22 @@ body {
     font-weight: 600;
 }
 
+.tab-info-overlay .meta.meta-progress {
+    font-weight: 600;
+}
+
+.tab-info-overlay .meta.meta-progress[data-tone="running"] {
+    color: #2aa198;
+}
+
+.tab-info-overlay .meta.meta-progress[data-tone="warning"] {
+    color: #b58900;
+}
+
+.tab-info-overlay .meta.meta-progress[data-tone="error"] {
+    color: #dc322f;
+}
+
 .tab-info-overlay .title {
     display: flex;
     align-items: center;