@xxmachina/components 19.21.8 → 19.25.0

package/fesm2022/xxmachina-components-organisms-xterm.mjs

@@ -1,8 +1,128 @@
 import * as i0 from '@angular/core';
-import { viewChild, output, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, Directive, viewChild, inject, ElementRef, output, signal, effect, ChangeDetectionStrategy, Component } from '@angular/core';
 import { Terminal } from '@xterm/xterm';
 import { FitAddon } from '@xterm/addon-fit';
-import { WebLinksAddon } from 'xterm-addon-web-links';
+import { InjectableComponent, NgAtomicComponent } from '@ng-atomic/core';
+import { makeDI } from '@ng-atomic/common/services/ui';
+
+const URL_REGEX = /https?:\/\/[^\s<>'")\]]+/g;
+const MAX_SCAN_LINES = 30;
+/**
+ * Link provider that detects URLs spanning multiple terminal lines.
+ *
+ * Handles two wrapping scenarios:
+ * 1. Terminal wrapping (isWrapped=true) - xterm splits long output
+ * 2. Application wrapping (isWrapped=false) - e.g. Claude Code/Ink explicitly
+ *    breaks lines at some width. Detected by heuristic: previous line ends
+ *    without whitespace and current line starts without whitespace.
+ */
+class WebLinkProvider {
+    _terminal;
+    _handler;
+    constructor(_terminal, _handler = (_, uri) => {
+        window.open(uri, '_blank', 'noopener');
+    }) {
+        this._terminal = _terminal;
+        this._handler = _handler;
+    }
+    provideLinks(bufferLineNumber, callback) {
+        const buffer = this._terminal.buffer.active;
+        // Find the start of this line group (0-indexed)
+        let startY = bufferLineNumber - 1;
+        while (startY > 0
+            && (bufferLineNumber - 1 - startY) < MAX_SCAN_LINES
+            && this._isLineContinuation(startY)) {
+            startY--;
+        }
+        // Collect text from all lines in the group
+        const lineTexts = [];
+        let y = startY;
+        do {
+            const line = buffer.getLine(y);
+            if (!line)
+                break;
+            lineTexts.push(line.translateToString(true));
+            y++;
+        } while (y < buffer.length
+            && (y - startY) < MAX_SCAN_LINES
+            && this._isLineContinuation(y));
+        const fullText = lineTexts.join('');
+        URL_REGEX.lastIndex = 0;
+        let match;
+        const links = [];
+        while ((match = URL_REGEX.exec(fullText)) !== null) {
+            const startPos = this._offsetToPos(match.index, startY, lineTexts);
+            const endPos = this._offsetToPos(match.index + match[0].length - 1, startY, lineTexts);
+            if (!startPos || !endPos)
+                continue;
+            links.push({
+                text: match[0],
+                range: {
+                    start: { x: startPos.x + 1, y: startPos.y + 1 },
+                    end: { x: endPos.x + 1, y: endPos.y + 1 },
+                },
+                activate: (event, text) => this._handler(event, text),
+            });
+        }
+        callback(links.length > 0 ? links : undefined);
+    }
+    /**
+     * Determine if a line is a continuation of the previous line.
+     * True when either:
+     * - xterm marks it as wrapped (isWrapped=true), OR
+     * - no whitespace at line boundary (previous line ends without space,
+     *   current line starts without space) suggesting mid-token line break
+     */
+    _isLineContinuation(lineIdx) {
+        const buffer = this._terminal.buffer.active;
+        const line = buffer.getLine(lineIdx);
+        if (!line)
+            return false;
+        if (line.isWrapped)
+            return true;
+        if (lineIdx === 0)
+            return false;
+        const prevLine = buffer.getLine(lineIdx - 1);
+        if (!prevLine)
+            return false;
+        const prevText = prevLine.translateToString(true);
+        const currentText = line.translateToString(true);
+        return (prevText.length > 0
+            && !/\s$/.test(prevText)
+            && currentText.length > 0
+            && !/^\s/.test(currentText));
+    }
+    /** Convert a character offset in the concatenated text to a buffer position. */
+    _offsetToPos(offset, startY, lineTexts) {
+        let remaining = offset;
+        for (let i = 0; i < lineTexts.length; i++) {
+            if (remaining < lineTexts[i].length) {
+                return { x: remaining, y: startY + i };
+            }
+            remaining -= lineTexts[i].length;
+        }
+        const lastIdx = lineTexts.length - 1;
+        return { x: lineTexts[lastIdx].length, y: startY + lastIdx };
+    }
+}
+
+/**
+ * Drop-in replacement for @xterm/addon-web-links that supports
+ * URLs spanning wrapped terminal lines.
+ */
+class WebLinksAddon {
+    _handler;
+    _linkProvider;
+    constructor(_handler) {
+        this._handler = _handler;
+    }
+    activate(terminal) {
+        this._linkProvider = terminal.registerLinkProvider(new WebLinkProvider(terminal, this._handler));
+    }
+    dispose() {
+        this._linkProvider?.dispose();
+    }
+}
 
 class GitHubLinkProvider {
     _terminal;
@@ -23,13 +143,8 @@ class GitHubLinkProvider {
         const text = line.translateToString(true);
         const links = [];
         this.GITHUB_ISSUE_REGEX.lastIndex = 0;
-        // Debug: check if text contains potential issue references
-        if (text.includes('#')) {
-            console.log('[GitHubLinkProvider] Line contains #:', text);
-        }
         let match;
         while ((match = this.GITHUB_ISSUE_REGEX.exec(text)) !== null) {
-            console.log('[GitHubLinkProvider] Found match:', match[0], 'issue:', match[1]);
             const issueNumber = parseInt(match[1], 10);
             const fullMatch = match[0];
             const issueRef = `#${match[1]}`;
@@ -84,50 +199,385 @@ class GitHubLinksAddon {
     _linkProvider;
     constructor(_handler) {
         this._handler = _handler;
-        console.log('[GitHubLinksAddon] constructor called');
     }
     activate(terminal) {
-        console.log('[GitHubLinksAddon] activate called');
         this._terminal = terminal;
         this._linkProvider = terminal.registerLinkProvider(new GitHubLinkProvider(terminal, this._handler));
-        console.log('[GitHubLinksAddon] linkProvider registered');
     }
     dispose() {
         this._linkProvider?.dispose();
     }
 }
 
-class XtermOrganism {
+class FileLinkProvider {
+    _terminal;
+    _handler;
+    // ファイルパスを検出する正規表現
+    // - 絶対パス: /path/to/file.ts, /path/to/file.ts:10:5
+    // - 相対パス: ./src/file.ts, ../lib/utils.ts:20
+    // - 拡張子を持つファイル名
+    FILE_PATH_REGEX = /(?:^|[\s'"`(])((\.\.?\/|\/)?[\w.@-]+(?:\/[\w.@-]+)*\.[a-zA-Z0-9]+(?::\d+(?::\d+)?)?)/g;
+    constructor(_terminal, _handler) {
+        this._terminal = _terminal;
+        this._handler = _handler;
+    }
+    provideLinks(bufferLineNumber, callback) {
+        // bufferLineNumber は 1-indexed、buffer.getLine() は 0-indexed を期待
+        const lineIndex = bufferLineNumber - 1;
+        const line = this._terminal.buffer.active.getLine(lineIndex);
+        if (!line) {
+            callback(undefined);
+            return;
+        }
+        const text = line.translateToString(true);
+        const links = [];
+        // Reset regex lastIndex
+        this.FILE_PATH_REGEX.lastIndex = 0;
+        let match;
+        while ((match = this.FILE_PATH_REGEX.exec(text)) !== null) {
+            const filePath = match[1];
+            if (this._isLikelyFilePath(filePath) && !this._isUrl(filePath)) {
+                // 文字列インデックスから表示位置（セル位置）を計算
+                const stringStartIndex = match.index + (match[0].length - match[1].length);
+                // WebLinksAddon と同じ方式で位置をマッピング（0-indexed lineIndexを渡す）
+                const [, startX] = this._mapStrIdx(lineIndex, 0, stringStartIndex);
+                const [, endX] = this._mapStrIdx(lineIndex, startX, filePath.length);
+                if (startX === -1 || endX === -1) {
+                    continue;
+                }
+                links.push({
+                    text: filePath,
+                    range: {
+                        // IBufferCellPosition は 1-indexed
+                        start: { x: startX + 1, y: bufferLineNumber },
+                        end: { x: endX, y: bufferLineNumber }
+                    },
+                    activate: (event, linkText) => {
+                        const parsed = this._parseFilePath(linkText);
+                        this._handler(event, parsed.path, parsed.line, parsed.column);
+                    }
+                });
+            }
+        }
+        callback(links.length > 0 ? links : undefined);
+    }
+    /**
+     * Map a string index back to buffer positions.
+     * Returns buffer position as [lineIndex, columnIndex] 0-based,
+     * or [-1, -1] in case the lookup ran into a non-existing line.
+     * (Based on xterm.js WebLinkProvider implementation)
+     */
+    _mapStrIdx(lineIndex, rowIndex, stringIndex) {
+        const buf = this._terminal.buffer.active;
+        const cell = buf.getNullCell();
+        let start = rowIndex;
+        while (stringIndex) {
+            const line = buf.getLine(lineIndex);
+            if (!line) {
+                return [-1, -1];
+            }
+            for (let i = start; i < line.length; ++i) {
+                line.getCell(i, cell);
+                const chars = cell.getChars();
+                const width = cell.getWidth();
+                if (width) {
+                    stringIndex -= chars.length || 1;
+                }
+                if (stringIndex < 0) {
+                    return [lineIndex, i];
+                }
+            }
+            lineIndex++;
+            start = 0;
+        }
+        return [lineIndex, start];
+    }
+    _isLikelyFilePath(text) {
+        // 拡張子を持つか確認
+        return /\.[a-zA-Z0-9]+(?::\d+(?::\d+)?)?$/.test(text);
+    }
+    _isUrl(text) {
+        // URL形式を除外
+        return /^https?:\/\//.test(text) || /^file:\/\//.test(text);
+    }
+    _parseFilePath(text) {
+        const match = text.match(/^(.+?)(?::(\d+)(?::(\d+))?)?$/);
+        if (match) {
+            return {
+                path: match[1],
+                line: match[2] ? parseInt(match[2], 10) : undefined,
+                column: match[3] ? parseInt(match[3], 10) : undefined
+            };
+        }
+        return { path: text };
+    }
+}
+// Export helper functions for testing
+const isLikelyFilePath = (text) => {
+    return /\.[a-zA-Z0-9]+(?::\d+(?::\d+)?)?$/.test(text) && !/^https?:\/\//.test(text);
+};
+const parseFilePath = (text) => {
+    const match = text.match(/^(.+?)(?::(\d+)(?::(\d+))?)?$/);
+    if (match) {
+        return {
+            path: match[1],
+            line: match[2] ? parseInt(match[2], 10) : undefined,
+            column: match[3] ? parseInt(match[3], 10) : undefined
+        };
+    }
+    return { path: text };
+};
+
+/**
+ * xterm.js addon for detecting and handling file path links in terminal output.
+ * Similar to WebLinksAddon but for local file paths.
+ *
+ * Usage:
+ * ```typescript
+ * const fileLinksAddon = new FileLinksAddon((event, filePath, line, column) => {
+ *   if (event.metaKey || event.ctrlKey) {
+ *     // Open file in editor
+ *   }
+ * });
+ * terminal.loadAddon(fileLinksAddon);
+ * ```
+ */
+class FileLinksAddon {
+    _handler;
+    _terminal;
+    _linkProvider;
+    constructor(_handler) {
+        this._handler = _handler;
+    }
+    activate(terminal) {
+        this._terminal = terminal;
+        this._linkProvider = terminal.registerLinkProvider(new FileLinkProvider(terminal, this._handler));
+    }
+    dispose() {
+        this._linkProvider?.dispose();
+    }
+}
+
+var XtermActionId;
+(function (XtermActionId) {
+    XtermActionId["DATA_INPUT"] = "xterm:data-input";
+    XtermActionId["RESIZED"] = "xterm:resized";
+    XtermActionId["GITHUB_LINK_CLICK"] = "xterm:github-link-click";
+    XtermActionId["FILE_LINK_CLICK"] = "xterm:file-link-click";
+})(XtermActionId || (XtermActionId = {}));
+class XtermOrganismStore extends InjectableComponent {
+    static DI = makeDI(XtermOrganismStore, () => () => ({
+        data: '',
+        interactive: false,
+        queryResult: '',
+        useInteractiveTheme: false,
+    }), ['components', 'organisms', 'xterm']);
+    config = XtermOrganismStore.DI.injectConfig();
+    // Note: Using simple default values instead of _computed() to ensure
+    // input bindings from templates work correctly with Angular signal effects
+    data = input(undefined);
+    interactive = input(false);
+    queryResult = input('');
+    /** Use interactive theme even when not interactive (for display consistency) */
+    useInteractiveTheme = input(false);
+    /** Total bytes written to the buffer (for accurate diff detection when buffer overflows) */
+    totalWritten = input(0);
+    constructor() {
+        super();
+        XtermOrganismStore.DI.initialize(this);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: XtermOrganismStore, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.5", type: XtermOrganismStore, isStandalone: true, selector: "organisms-xterm", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, queryResult: { classPropertyName: "queryResult", publicName: "queryResult", isSignal: true, isRequired: false, transformFunction: null }, useInteractiveTheme: { classPropertyName: "useInteractiveTheme", publicName: "useInteractiveTheme", isSignal: true, isRequired: false, transformFunction: null }, totalWritten: { classPropertyName: "totalWritten", publicName: "totalWritten", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: XtermOrganismStore, decorators: [{
+            type: Directive,
+            args: [{ standalone: true, selector: 'organisms-xterm' }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Minimum container size required for terminal initialization.
+ * Prevents issues with SR-only hidden containers (1x1 pixel) causing FitAddon problems.
+ */
+const MIN_CONTAINER_SIZE = 10;
+/** Default display-only theme (for catalog/storybook) */
+const DISPLAY_THEME = {
+    background: '#0a0a0a',
+    foreground: '#66d9ef',
+    cursor: '#ff79c6',
+    cyan: '#8be9fd',
+    brightCyan: '#50fa7b',
+    green: '#50fa7b',
+    brightGreen: '#50fa7b',
+    magenta: '#ff79c6',
+    brightMagenta: '#ff79c6',
+    yellow: '#f1fa8c',
+    brightYellow: '#ffb86c',
+    red: '#ff5555',
+    brightRed: '#ff5555'
+};
+/** Interactive session theme (matches original TerminalManager) */
+const INTERACTIVE_THEME = {
+    background: '#0a0a0a',
+    foreground: '#e0e0e0',
+    cursor: '#e0e0e0',
+    black: '#000000',
+    red: '#cd3131',
+    green: '#0dbc79',
+    yellow: '#e5e510',
+    blue: '#2472c8',
+    magenta: '#bc3fbc',
+    cyan: '#11a8cd',
+    white: '#e5e5e5',
+    brightBlack: '#666666',
+    brightRed: '#f14c4c',
+    brightGreen: '#23d18b',
+    brightYellow: '#f5f543',
+    brightBlue: '#3b8eea',
+    brightMagenta: '#d670d6',
+    brightCyan: '#29b8db',
+    brightWhite: '#e5e5e5',
+};
+class XtermOrganism extends NgAtomicComponent {
     container = viewChild.required('container');
+    store = inject(XtermOrganismStore);
+    hostElement = inject((ElementRef));
     terminalReady = output();
     githubLinkClick = output();
     terminal;
     fitAddon;
+    imageAddon;
     githubLinksAddon;
+    fileLinksAddon;
     resizeObserver;
+    lastDataLength = 0;
+    /** Tracks how many bytes have been processed (for totalWritten-based diff detection) */
+    lastProcessedLength = 0;
+    terminalInitialized = signal(false);
+    /** Tracks if initialization was skipped due to container being too small */
+    initSkippedDueToSize = false;
+    constructor() {
+        super();
+        // Watch for data input changes (with totalWritten support for buffer overflow handling)
+        effect(() => {
+            const isInitialized = this.terminalInitialized();
+            const rawData = this.store.data();
+            const totalWritten = this.store.totalWritten();
+            const dataIsFunction = typeof rawData === 'function';
+            const data = dataIsFunction ? rawData() : rawData;
+            if (!isInitialized)
+                return;
+            // Use totalWritten-based logic when available (handles buffer overflow correctly)
+            if (totalWritten > 0) {
+                this.writeDataWithTotalWritten(data ?? '', totalWritten);
+            }
+            else {
+                // Legacy fallback for backward compatibility
+                this.writeDataToTerminal(data);
+            }
+        });
+        // Watch for interactive mode changes and update host class
+        // Note: Using effect with classList because @HostBinding doesn't work with OnPush + signals
+        effect(() => {
+            const isInteractive = this.store.interactive();
+            if (isInteractive) {
+                this.hostElement.nativeElement.classList.add('interactive');
+            }
+            else {
+                this.hostElement.nativeElement.classList.remove('interactive');
+            }
+        });
+        // Watch for interactive mode changes and update cursor blink
+        effect(() => {
+            const isInitialized = this.terminalInitialized();
+            const isInteractive = this.store.interactive();
+            if (!isInitialized || !this.terminal)
+                return;
+            // Update cursor blink setting
+            this.terminal.options.cursorBlink = isInteractive;
+        });
+    }
+    writeDataToTerminal(data) {
+        // Guard against undefined/null/empty data
+        // Empty string is treated as "no data yet" (from startWith('') in streams)
+        // Explicit reset should use the public clear() or reset() methods
+        if (data === undefined || data === null || data === '') {
+            return;
+        }
+        // O(1) length comparison instead of O(n) startsWith
+        if (data.length >= this.lastDataLength) {
+            const newPart = data.slice(this.lastDataLength);
+            if (newPart) {
+                this.terminal.write(newPart);
+            }
+            this.lastDataLength = data.length;
+        }
+        else {
+            // Data got shorter = reset occurred
+            this.terminal.reset();
+            this.terminal.write(data);
+            this.lastDataLength = data.length;
+        }
+    }
+    /**
+     * Write data using totalWritten for accurate diff detection.
+     * This method handles buffer overflow scenarios correctly.
+     * @param data The current buffer content
+     * @param totalWritten Total bytes written to the buffer (cumulative)
+     */
+    writeDataWithTotalWritten(data, totalWritten) {
+        if (!data)
+            return;
+        // Calculate how many new bytes arrived
+        const newBytesCount = totalWritten - this.lastProcessedLength;
+        if (newBytesCount <= 0) {
+            // No new data or reset occurred
+            if (totalWritten < this.lastProcessedLength) {
+                // Reset detected
+                this.terminal.reset();
+                this.terminal.write(data);
+                this.lastProcessedLength = totalWritten;
+            }
+            return;
+        }
+        // Extract new content from the end of buffer
+        const newContent = data.slice(-newBytesCount);
+        if (newContent) {
+            this.terminal.write(newContent);
+        }
+        this.lastProcessedLength = totalWritten;
+    }
     ngAfterViewInit() {
+        const containerElement = this.container().nativeElement;
+        // Guard against initialization in very small containers (e.g., SR-only 1x1 pixel hidden elements)
+        // This prevents FitAddon issues and excessive processing in hidden query sections
+        if (containerElement.offsetWidth < MIN_CONTAINER_SIZE || containerElement.offsetHeight < MIN_CONTAINER_SIZE) {
+            this.initSkippedDueToSize = true;
+            // Retry initialization when container reaches minimum size (e.g., after CSS/layout settles)
+            this.resizeObserver = new ResizeObserver(() => {
+                if (containerElement.offsetWidth >= MIN_CONTAINER_SIZE && containerElement.offsetHeight >= MIN_CONTAINER_SIZE) {
+                    this.resizeObserver?.disconnect();
+                    this.resizeObserver = undefined;
+                    this.initSkippedDueToSize = false;
+                    this.initializeTerminal(containerElement);
+                }
+            });
+            this.resizeObserver.observe(containerElement);
+            return;
+        }
+        this.initializeTerminal(containerElement);
+    }
+    initializeTerminal(containerElement) {
+        const isInteractive = this.store.interactive();
+        const useInteractiveTheme = this.store.useInteractiveTheme() || isInteractive;
         this.terminal = new Terminal({
-            theme: {
-                background: '#0a0a0a',
-                foreground: '#66d9ef',
-                cursor: '#ff79c6',
-                cyan: '#8be9fd',
-                brightCyan: '#50fa7b',
-                green: '#50fa7b',
-                brightGreen: '#50fa7b',
-                magenta: '#ff79c6',
-                brightMagenta: '#ff79c6',
-                yellow: '#f1fa8c',
-                brightYellow: '#ffb86c',
-                red: '#ff5555',
-                brightRed: '#ff5555'
-            },
-            scrollback: 1000,
-            fontSize: 12,
+            theme: useInteractiveTheme ? INTERACTIVE_THEME : DISPLAY_THEME,
+            scrollback: isInteractive ? 10000 : 1000,
+            fontSize: useInteractiveTheme ? 14 : 12,
+            fontFamily: '"FiraCode Nerd Font", "Fira Code", "SF Mono", "Cascadia Code", "Consolas", "Courier New", monospace',
             lineHeight: 1.2,
             allowTransparency: false,
-            disableStdin: true,
-            cursorBlink: false,
+            disableStdin: !isInteractive,
+            cursorBlink: isInteractive,
             cursorStyle: 'block',
             convertEol: true,
             rows: 24
@@ -135,34 +585,110 @@ class XtermOrganism {
         this.fitAddon = new FitAddon();
         this.terminal.loadAddon(this.fitAddon);
         this.terminal.loadAddon(new WebLinksAddon());
+        // ImageAddon for displaying inline images (SIXEL and iTerm2 IIP support)
+        // Loaded dynamically to avoid browser compatibility issues
+        this.loadImageAddon();
         this.githubLinksAddon = new GitHubLinksAddon((event, issueNumber) => {
+            this.dispatch({ id: XtermActionId.GITHUB_LINK_CLICK, payload: issueNumber });
+        });
+        this.terminal.loadAddon(this.githubLinksAddon);
+        this.fileLinksAddon = new FileLinksAddon((event, filePath, line, column) => {
             if (event.metaKey || event.ctrlKey) {
-                this.githubLinkClick.emit(issueNumber);
+                this.dispatch({ id: XtermActionId.FILE_LINK_CLICK, payload: { filePath, line, column } });
             }
         });
-        this.terminal.loadAddon(this.githubLinksAddon);
-        const containerElement = this.container().nativeElement;
+        this.terminal.loadAddon(this.fileLinksAddon);
         this.terminal.open(containerElement);
-        // 初期化後の処理
-        setTimeout(() => {
-            this.fitAddon.fit();
-            this.terminalReady.emit(this.terminal);
-            // ResizeObserverでサイズ変更を監視
-            this.resizeObserver = new ResizeObserver(() => {
-                try {
+        // Setup event handlers for interactive mode
+        if (isInteractive) {
+            this.terminal.onData((data) => {
+                this.dispatch({ id: XtermActionId.DATA_INPUT, payload: data });
+            });
+            this.terminal.onResize(({ cols, rows }) => this.dispatch({ id: XtermActionId.RESIZED, payload: { cols, rows } }));
+        }
+        // Use ResizeObserver with debounce to wait for container size to stabilize
+        // (CSS transitions take 300-500ms, so fixed setTimeout(100ms) is too early)
+        let stableTimer = null;
+        let resizeTimer = null;
+        this.resizeObserver = new ResizeObserver(() => {
+            try {
+                if (!this.terminalInitialized()) {
                     this.fitAddon.fit();
+                    // Debounce: wait for container to stop changing before initializing
+                    if (stableTimer)
+                        clearTimeout(stableTimer);
+                    stableTimer = setTimeout(() => {
+                        this.fitAddon.fit();
+                        this.markInitialized(isInteractive);
+                    }, 150);
                 }
-                catch (e) {
-                    console.warn('Failed to fit terminal:', e);
+                else if (isInteractive) {
+                    // Debounce resize to wait for CSS transitions to complete (300ms)
+                    if (resizeTimer)
+                        clearTimeout(resizeTimer);
+                    resizeTimer = setTimeout(() => {
+                        this.fitAddon.fit();
+                        this.dispatch({ id: XtermActionId.RESIZED, payload: { cols: this.cols, rows: this.rows } });
+                    }, 300);
                 }
-            });
-            this.resizeObserver.observe(containerElement);
-        }, 100);
+            }
+            catch (e) {
+                console.warn('Failed to fit terminal:', e);
+            }
+        });
+        this.resizeObserver.observe(containerElement);
+        // Fallback: initialize after 500ms if ResizeObserver hasn't triggered stable state
+        setTimeout(() => {
+            if (!this.terminalInitialized()) {
+                this.fitAddon.fit();
+                this.markInitialized(isInteractive);
+            }
+        }, 500);
     }
     ngOnDestroy() {
         this.resizeObserver?.disconnect();
+        // Remove terminal instance from window for E2E testing cleanup
+        if (typeof window !== 'undefined' && window.__XTERM_INSTANCES__) {
+            const instances = window.__XTERM_INSTANCES__;
+            const index = instances.indexOf(this.terminal);
+            if (index !== -1) {
+                instances.splice(index, 1);
+            }
+        }
         this.terminal?.dispose();
     }
+    markInitialized(isInteractive) {
+        if (this.terminalInitialized())
+            return;
+        this.terminalInitialized.set(true);
+        this.terminalReady.emit(this.terminal);
+        // Expose terminal instance for E2E testing (only in development/test environments)
+        if (typeof window !== 'undefined') {
+            window.__XTERM_INSTANCES__ = window.__XTERM_INSTANCES__ || [];
+            window.__XTERM_INSTANCES__.push(this.terminal);
+        }
+        // Dispatch initial RESIZED for interactive mode
+        if (isInteractive) {
+            this.dispatch({ id: XtermActionId.RESIZED, payload: { cols: this.cols, rows: this.rows } });
+        }
+    }
+    async loadImageAddon() {
+        try {
+            const { ImageAddon } = await import('@xterm/addon-image');
+            const imageAddonOptions = {
+                enableSizeReports: true,
+                sixelSupport: true,
+                sixelScrolling: true,
+                sixelPaletteLimit: 256,
+            };
+            this.imageAddon = new ImageAddon(imageAddonOptions);
+            this.terminal.loadAddon(this.imageAddon);
+        }
+        catch (e) {
+            // ImageAddon not available in browser environment - this is expected
+            console.debug('ImageAddon not available:', e);
+        }
+    }
     // Public API
     write(text) {
         this.terminal?.write(text);
@@ -182,17 +708,291 @@ class XtermOrganism {
     scrollLines(lines) {
         this.terminal?.scrollLines(lines);
     }
+    fit() {
+        this.fitAddon?.fit();
+        // Only dispatch RESIZED after initialization to prevent sending wrong cols/rows
+        // during CSS transitions (SessionTemplateV2.ngAfterViewInit calls fit() before layout stabilizes)
+        if (this.terminalInitialized() && this.terminal) {
+            this.dispatch({ id: XtermActionId.RESIZED, payload: { cols: this.cols, rows: this.rows } });
+        }
+    }
+    get cols() {
+        return this.terminal?.cols ?? 80;
+    }
+    get rows() {
+        return this.terminal?.rows ?? 24;
+    }
+    getTerminal() {
+        // Only expose terminal after fitAddon.fit() has run (terminalInitialized === true)
+        return this.terminalInitialized() ? this.terminal : undefined;
+    }
+    /**
+     * Display an inline image using iTerm2's Inline Image Protocol
+     * @param base64Data Base64 encoded image data (PNG, JPEG, etc.)
+     * @param options Image display options
+     */
+    displayImage(base64Data, options) {
+        if (!this.terminal)
+            return;
+        const args = ['inline=1'];
+        if (options?.width) {
+            args.push(`width=${options.width}`);
+        }
+        if (options?.height) {
+            args.push(`height=${options.height}`);
+        }
+        if (options?.preserveAspectRatio !== undefined) {
+            args.push(`preserveAspectRatio=${options.preserveAspectRatio ? 1 : 0}`);
+        }
+        if (options?.name) {
+            args.push(`name=${btoa(options.name)}`);
+        }
+        // iTerm2 Inline Image Protocol escape sequence
+        const escapeSequence = `\x1b]1337;File=${args.join(';')}:${base64Data}\x07`;
+        this.terminal.write(escapeSequence);
+    }
+    /**
+     * Get the ImageAddon instance for advanced image operations
+     */
+    getImageAddon() {
+        return this.imageAddon;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: XtermOrganism, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.5", type: XtermOrganism, isStandalone: true, selector: "organisms-xterm", outputs: { terminalReady: "terminalReady", githubLinkClick: "githubLinkClick" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }], ngImport: i0, template: `<div #container class="xterm-wrapper"></div>`, isInline: true, styles: ["", "@import\"https://unpkg.com/@xterm/xterm@5.5.0/css/xterm.css\";:host{display:block;width:100%;height:100%}.xterm-wrapper{width:100%;height:100%;background:#0a0a0a;position:relative;overflow:hidden}.xterm-wrapper ::ng-deep .xterm-cursor-layer{display:none!important}.xterm-wrapper ::ng-deep .xterm-cursor,.xterm-wrapper ::ng-deep .xterm-cursor-outline{opacity:0!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.5", type: XtermOrganism, isStandalone: true, selector: "organisms-xterm", outputs: { terminalReady: "terminalReady", githubLinkClick: "githubLinkClick" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: XtermOrganismStore, inputs: ["data", "data", "interactive", "interactive", "useInteractiveTheme", "useInteractiveTheme", "totalWritten", "totalWritten"] }], ngImport: i0, template: `<div #container class="xterm-wrapper"></div>`, isInline: true, styles: ["", "@import\"https://unpkg.com/@xterm/xterm@5.5.0/css/xterm.css\";:host{display:block;width:100%;height:100%}:host .xterm-wrapper{width:100%;height:100%;background:#0a0a0a;position:relative;overflow:hidden}:host:not(.interactive) .xterm-wrapper ::ng-deep .xterm-cursor-layer{display:none!important}:host:not(.interactive) .xterm-wrapper ::ng-deep .xterm-cursor,:host:not(.interactive) .xterm-wrapper ::ng-deep .xterm-cursor-outline{opacity:0!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: XtermOrganism, decorators: [{
             type: Component,
-            args: [{ selector: 'organisms-xterm', standalone: true, imports: [], template: `<div #container class="xterm-wrapper"></div>`, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@import\"https://unpkg.com/@xterm/xterm@5.5.0/css/xterm.css\";:host{display:block;width:100%;height:100%}.xterm-wrapper{width:100%;height:100%;background:#0a0a0a;position:relative;overflow:hidden}.xterm-wrapper ::ng-deep .xterm-cursor-layer{display:none!important}.xterm-wrapper ::ng-deep .xterm-cursor,.xterm-wrapper ::ng-deep .xterm-cursor-outline{opacity:0!important}\n"] }]
-        }] });
+            args: [{ selector: 'organisms-xterm', standalone: true, imports: [], template: `<div #container class="xterm-wrapper"></div>`, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{
+                            directive: XtermOrganismStore,
+                            inputs: ['data', 'interactive', 'useInteractiveTheme', 'totalWritten'],
+                        }], styles: ["@import\"https://unpkg.com/@xterm/xterm@5.5.0/css/xterm.css\";:host{display:block;width:100%;height:100%}:host .xterm-wrapper{width:100%;height:100%;background:#0a0a0a;position:relative;overflow:hidden}:host:not(.interactive) .xterm-wrapper ::ng-deep .xterm-cursor-layer{display:none!important}:host:not(.interactive) .xterm-wrapper ::ng-deep .xterm-cursor,:host:not(.interactive) .xterm-wrapper ::ng-deep .xterm-cursor-outline{opacity:0!important}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Utility functions for displaying images in xterm using SIXEL format
+ */
+/**
+ * Generate ASCII art text using figlet
+ * Note: figlet is loaded dynamically as it's not available in browser environments
+ */
+async function generateAsciiArt(text, font = 'ANSI Shadow') {
+    try {
+        const figlet = await import('figlet');
+        return new Promise((resolve, reject) => {
+            figlet.default.text(text, { font: font }, (err, result) => {
+                if (err) {
+                    reject(err);
+                    return;
+                }
+                resolve(result || '');
+            });
+        });
+    }
+    catch (e) {
+        // figlet not available in browser - return simple text
+        console.debug('figlet not available:', e);
+        return text;
+    }
+}
+/**
+ * Convert ASCII art text to SVG with transparent background
+ */
+function asciiArtToSvg(asciiArt, options = {}) {
+    const { textColor = '#00FFFF', fontSize = 14 } = options;
+    const lines = asciiArt.split('\n');
+    const maxLineLength = Math.max(...lines.map(l => l.length));
+    // Calculate dimensions based on monospace font metrics (block chars need more width)
+    const charWidth = fontSize * 0.65;
+    const lineHeight = fontSize * 1.4;
+    const padding = 40;
+    const width = Math.ceil(maxLineLength * charWidth) + padding;
+    const height = Math.ceil(lines.length * lineHeight) + padding;
+    // Build SVG with text elements for each line
+    const textElements = lines.map((line, i) => {
+        // Escape special XML characters
+        const escapedLine = line
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;');
+        return `<text x="20" y="${20 + (i + 1) * lineHeight}" fill="${textColor}" xml:space="preserve">${escapedLine}</text>`;
+    }).join('\n  ');
+    return `<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">
+  <style>text { font-family: 'Courier New', Consolas, monospace; font-size: ${fontSize}px; white-space: pre; }</style>
+  ${textElements}
+</svg>`;
+}
+/**
+ * Convert SVG to SIXEL format for xterm display
+ */
+async function svgToSixel(svgString, options = {}) {
+    const { width = 400, height = 200, backgroundColor } = options;
+    return new Promise((resolve, reject) => {
+        const canvas = document.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+        const ctx = canvas.getContext('2d');
+        if (!ctx) {
+            reject(new Error('Failed to get canvas context'));
+            return;
+        }
+        // Fill background (transparent if not specified)
+        if (backgroundColor) {
+            ctx.fillStyle = backgroundColor;
+            ctx.fillRect(0, 0, width, height);
+        }
+        const img = new Image();
+        const blob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
+        const url = URL.createObjectURL(blob);
+        img.onload = () => {
+            ctx.drawImage(img, 0, 0, width, height);
+            URL.revokeObjectURL(url);
+            const imageData = ctx.getImageData(0, 0, width, height);
+            const sixelData = imageDataToSixel(imageData);
+            resolve(sixelData);
+        };
+        img.onerror = (error) => {
+            URL.revokeObjectURL(url);
+            reject(error);
+        };
+        img.src = url;
+    });
+}
+/**
+ * Convert ImageData to SIXEL escape sequence
+ */
+function imageDataToSixel(imageData) {
+    const { width, height, data } = imageData;
+    // Build color palette (quantize to 16 colors)
+    const palette = buildColorPalette(data, 16);
+    const colorMap = new Map();
+    palette.forEach((color, index) => {
+        colorMap.set(color, index);
+    });
+    // SIXEL header
+    let sixel = '\x1bPq';
+    // Define colors in palette
+    palette.forEach((color, index) => {
+        const [r, g, b] = hexToRgb(color);
+        const rPct = Math.round((r / 255) * 100);
+        const gPct = Math.round((g / 255) * 100);
+        const bPct = Math.round((b / 255) * 100);
+        sixel += `#${index};2;${rPct};${gPct};${bPct}`;
+    });
+    // Process image in bands of 6 rows
+    for (let bandY = 0; bandY < height; bandY += 6) {
+        for (let colorIdx = 0; colorIdx < palette.length; colorIdx++) {
+            const color = palette[colorIdx];
+            let rowData = '';
+            let hasPixels = false;
+            rowData += `#${colorIdx}`;
+            for (let x = 0; x < width; x++) {
+                let sixelValue = 0;
+                for (let dy = 0; dy < 6; dy++) {
+                    const y = bandY + dy;
+                    if (y >= height)
+                        continue;
+                    const pixelIndex = (y * width + x) * 4;
+                    const r = data[pixelIndex];
+                    const g = data[pixelIndex + 1];
+                    const b = data[pixelIndex + 2];
+                    const a = data[pixelIndex + 3];
+                    if (a < 128)
+                        continue;
+                    const pixelColor = rgbToHex(r, g, b);
+                    const nearestColor = findNearestColor(pixelColor, palette);
+                    if (nearestColor === color) {
+                        sixelValue |= (1 << dy);
+                        hasPixels = true;
+                    }
+                }
+                rowData += String.fromCharCode(63 + sixelValue);
+            }
+            if (hasPixels) {
+                sixel += rowData;
+                sixel += '$';
+            }
+        }
+        if (bandY + 6 < height) {
+            sixel += '-';
+        }
+    }
+    sixel += '\x1b\\';
+    return sixel;
+}
+function buildColorPalette(data, maxColors) {
+    const colorCounts = new Map();
+    for (let i = 0; i < data.length; i += 4) {
+        const r = data[i];
+        const g = data[i + 1];
+        const b = data[i + 2];
+        const a = data[i + 3];
+        if (a < 128)
+            continue;
+        const qr = Math.floor(r / 16) * 16;
+        const qg = Math.floor(g / 16) * 16;
+        const qb = Math.floor(b / 16) * 16;
+        const color = rgbToHex(qr, qg, qb);
+        colorCounts.set(color, (colorCounts.get(color) || 0) + 1);
+    }
+    return Array.from(colorCounts.entries())
+        .sort((a, b) => b[1] - a[1])
+        .slice(0, maxColors)
+        .map(([color]) => color);
+}
+function rgbToHex(r, g, b) {
+    return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+}
+function hexToRgb(hex) {
+    const match = hex.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);
+    if (!match)
+        return [0, 0, 0];
+    return [parseInt(match[1], 16), parseInt(match[2], 16), parseInt(match[3], 16)];
+}
+function findNearestColor(targetHex, palette) {
+    const [tr, tg, tb] = hexToRgb(targetHex);
+    let nearest = palette[0];
+    let minDist = Infinity;
+    for (const color of palette) {
+        const [r, g, b] = hexToRgb(color);
+        const dist = (tr - r) ** 2 + (tg - g) ** 2 + (tb - b) ** 2;
+        if (dist < minDist) {
+            minDist = dist;
+            nearest = color;
+        }
+    }
+    return nearest;
+}
+/**
+ * Generate MACHINA ASCII art banner as SIXEL
+ */
+async function getMachinaAsciiArtSixel(options = {}) {
+    // Generate ASCII art for "MACHINA"
+    const machinaArt = await generateAsciiArt('MACHINA', 'ANSI Shadow');
+    // Convert to SVG with cyan color (terminal style)
+    const fontSize = 14;
+    const svg = asciiArtToSvg(machinaArt, {
+        textColor: options.textColor || '#00FFFF',
+        fontSize
+    });
+    // Calculate appropriate dimensions matching asciiArtToSvg calculation
+    const lines = machinaArt.split('\n');
+    const maxLineLength = Math.max(...lines.map(l => l.length));
+    const charWidth = fontSize * 0.65;
+    const lineHeight = fontSize * 1.4;
+    const padding = 40;
+    const defaultWidth = Math.ceil(maxLineLength * charWidth) + padding;
+    const defaultHeight = Math.ceil(lines.length * lineHeight) + padding;
+    return svgToSixel(svg, {
+        width: options.width || defaultWidth,
+        height: options.height || defaultHeight,
+        backgroundColor: options.backgroundColor || '#0a0a0a',
+    });
+}
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { GitHubLinkProvider, GitHubLinksAddon, XtermOrganism };
+export { GitHubLinkProvider, GitHubLinksAddon, WebLinksAddon, XtermActionId, XtermOrganism, XtermOrganismStore, asciiArtToSvg, generateAsciiArt, getMachinaAsciiArtSixel, svgToSixel };
 //# sourceMappingURL=xxmachina-components-organisms-xterm.mjs.map