tabminal 2.0.12 → 2.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tabminal",
-  "version": "2.0.12",
+  "version": "2.0.14",
   "description": "A modern, persistent web terminal with multi-tab support and real-time system monitoring.",
   "type": "module",
   "bin": {
@@ -35,7 +35,7 @@
     "@fontsource/monaspace-neon": "^5.2.5",
     "@koa/router": "^15.4.0",
     "@mozilla/readability": "^0.6.0",
-    "jsdom": "^29.0.0",
+    "jsdom": "^29.0.1",
     "koa": "^3.1.2",
     "koa-bodyparser": "^4.4.1",
     "koa-static": "^5.0.0",
@@ -43,7 +43,9 @@
     "node-pty": "^1.1.0",
     "openai": "^6.32.0",
     "utilitas": "^2001.1.135",
-    "ws": "^8.19.0"
+    "ws": "^8.20.0",
+    "xterm-addon-serialize": "^0.11.0",
+    "xterm-headless": "^5.3.0"
   },
   "repository": {
     "type": "git",
@@ -54,6 +56,6 @@
   },
   "homepage": "https://github.com/leask/tabminal#readme",
   "devDependencies": {
-    "eslint": "^10.0.3"
+    "eslint": "^10.1.0"
   }
 }

package/public/app.js

@@ -977,8 +977,13 @@ class Session {
         this.layoutState = {
             editorFlex: '2 1 0%'
         };
+        this.wrapperElement = null;
+        this._createTerminals();
 
-        // Preview Terminal (Always create instance to maintain logic consistency)
+        this.connect();
+    }
+
+    _createTerminals() {
         this.previewTerm = new Terminal({
             disableStdin: true,
             cursorBlink: false,
@@ -986,17 +991,18 @@ class Session {
             fontSize: 10,
             rows: this.rows,
             cols: this.cols,
-            theme: { background: '#002b36', foreground: '#839496', cursor: 'transparent', selectionBackground: 'transparent' }
+            theme: {
+                background: '#002b36',
+                foreground: '#839496',
+                cursor: 'transparent',
+                selectionBackground: 'transparent'
+            }
         });
-        
-        // Only load CanvasAddon on Desktop to save GPU memory
+
         if (window.innerWidth >= 768) {
             this.previewTerm.loadAddon(new CanvasAddon());
         }
-        
-        this.wrapperElement = null;
 
-        // Main Terminal
         this.mainTerm = new Terminal({
             allowTransparency: true,
             convertEol: true,
@@ -1005,7 +1011,13 @@ class Session {
             fontSize: IS_MOBILE ? 14 : 12,
             rows: this.rows,
             cols: this.cols,
-            theme: { background: '#002b36', foreground: '#839496', cursor: '#93a1a1', cursorAccent: '#002b36', selectionBackground: '#073642' }
+            theme: {
+                background: '#002b36',
+                foreground: '#839496',
+                cursor: '#93a1a1',
+                cursorAccent: '#002b36',
+                selectionBackground: '#073642'
+            }
         });
         this.mainFitAddon = new FitAddon();
         this.mainLinksAddon = new WebLinksAddon();
@@ -1015,21 +1027,54 @@ class Session {
         this.mainTerm.loadAddon(this.searchAddon);
         this.mainTerm.loadAddon(new CanvasAddon());
 
-        // Event Listeners
-        this.mainTerm.onData(data => {
+        this.mainTerm.onData((data) => {
             if (this.isRestoring) return;
             this.send({ type: 'input', data });
         });
 
-        this.mainTerm.onResize(size => {
+        this.mainTerm.onResize((size) => {
             this.previewTerm.resize(size.cols, size.rows);
             this.updatePreviewScale();
-            
+
             const pending = getPendingSession(this.key);
             pending.resize = { cols: size.cols, rows: size.rows };
         });
+    }
 
-        this.connect();
+    recreateTerminals() {
+        const wasActive = state.activeSessionKey === this.key;
+        const previewWrapper = this.wrapperElement;
+
+        try {
+            this.previewTerm?.dispose();
+        } catch (e) {
+            if (!e.message?.includes('onRequestRedraw')) {
+                console.warn('Error disposing preview terminal:', e);
+            }
+        }
+
+        try {
+            this.mainTerm?.dispose();
+        } catch (e) {
+            if (!e.message?.includes('onRequestRedraw')) {
+                console.warn('Error disposing main terminal:', e);
+            }
+        }
+
+        this._createTerminals();
+
+        if (previewWrapper && window.innerWidth >= 768) {
+            previewWrapper.innerHTML = '';
+            this.previewTerm.open(previewWrapper);
+            this.updatePreviewScale();
+        }
+
+        if (wasActive && terminalEl) {
+            terminalEl.innerHTML = '';
+            this.mainTerm.open(terminalEl);
+            this.mainFitAddon.fit();
+            this.mainTerm.focus();
+        }
     }
 
     update(data) {
@@ -1187,15 +1232,19 @@ class Session {
     handleMessage(message) {
         switch (message.type) {
             case 'snapshot':
-                if (this.previewTerm) this.previewTerm.reset();
-                this.mainTerm.reset();
-                this.history = message.data || '';
                 this.isRestoring = true;
-                if (this.previewTerm) this.previewTerm.write(this.history);
-                this.mainTerm.write(this.history, () => { this.isRestoring = false; });
+                this.recreateTerminals();
+                if (this.previewTerm) this.previewTerm.write(message.data || '');
+                this.mainTerm.write(message.data || '', () => {
+                    this.isRestoring = false;
+                    if (state.activeSessionKey === this.key) {
+                        this.mainFitAddon.fit();
+                        this.mainTerm.focus();
+                        this.reportResize();
+                    }
+                });
                 break;
             case 'output':
-                this.history += message.data;
                 this.writeToTerminals(message.data);
                 break;
             case 'meta':

package/src/persistence.mjs

@@ -7,6 +7,7 @@ const BASE_DIR = path.join(HOME_DIR, '.tabminal');
 const SESSIONS_DIR = path.join(BASE_DIR, 'sessions');
 const MEMORY_FILE = path.join(BASE_DIR, 'memory.json');
 const CLUSTER_FILE = path.join(BASE_DIR, 'cluster.json');
+const getSessionSnapshotPath = (id) => path.join(SESSIONS_DIR, `${id}.snapshot`);
 
 // Ensure directories exist
 const init = async () => {
@@ -45,6 +46,7 @@ export const saveSession = async (id, data) => {
 export const deleteSession = async (id) => {
     const jsonPath = path.join(SESSIONS_DIR, `${id}.json`);
     const logPath = path.join(SESSIONS_DIR, `${id}.log`);
+    const snapshotPath = getSessionSnapshotPath(id);
     
     try {
         await fs.unlink(jsonPath);
@@ -57,6 +59,12 @@ export const deleteSession = async (id) => {
     } catch (e) {
         if (e.code !== 'ENOENT') console.error(`[Persistence] Failed to delete session log ${id}:`, e);
     }
+
+    try {
+        await fs.unlink(snapshotPath);
+    } catch (e) {
+        if (e.code !== 'ENOENT') console.error(`[Persistence] Failed to delete session snapshot ${id}:`, e);
+    }
 };
 
 export const loadSessions = async () => {
@@ -197,6 +205,16 @@ export const appendSessionLog = async (id, chunk) => {
     }
 };
 
+export const saveSessionSnapshot = async (id, snapshot) => {
+    await init();
+    const filePath = getSessionSnapshotPath(id);
+    try {
+        await fs.writeFile(filePath, snapshot, 'utf8');
+    } catch (e) {
+        console.error(`[Persistence] Failed to save snapshot for ${id}:`, e);
+    }
+};
+
 export const loadSessionLog = async (id, limit = 1024 * 1024) => {
     const filePath = path.join(SESSIONS_DIR, `${id}.log`);
     try {
@@ -218,3 +236,19 @@ export const loadSessionLog = async (id, limit = 1024 * 1024) => {
         return '';
     }
 };
+
+export const loadSessionSnapshot = async (id) => {
+    const filePath = getSessionSnapshotPath(id);
+    try {
+        return await fs.readFile(filePath, 'utf8');
+    } catch (e) {
+        if (e.code !== 'ENOENT') {
+            console.error(
+                `[Persistence] Failed to load snapshot for ${id}:`,
+                e
+            );
+        }
+    }
+
+    return loadSessionLog(id);
+};

package/src/server.mjs

@@ -199,9 +199,9 @@ router.post('/api/sessions', (ctx) => {
     };
 });
 
-router.delete('/api/sessions/:id', (ctx) => {
+router.delete('/api/sessions/:id', async (ctx) => {
     const { id } = ctx.params;
-    terminalManager.removeSession(id);
+    await terminalManager.removeSession(id);
     ctx.status = 204;
 });
 

package/src/terminal-manager.mjs

@@ -59,11 +59,30 @@ function buildBashBootstrap({
 export class TerminalManager {
     constructor() {
         this.sessions = new Map();
+        this.snapshotPersistTimers = new Map();
+        this.sessionPersistenceChains = new Map();
         this.lastCols = initialCols;
         this.lastRows = initialRows;
         this.disposing = false;
     }
 
+    queueSessionPersistence(id, operation) {
+        const previous = this.sessionPersistenceChains.get(id)
+            || Promise.resolve();
+        const next = previous
+            .catch(() => {})
+            .then(operation);
+
+        this.sessionPersistenceChains.set(id, next);
+        next.finally(() => {
+            if (this.sessionPersistenceChains.get(id) === next) {
+                this.sessionPersistenceChains.delete(id);
+            }
+        }).catch(() => {});
+
+        return next;
+    }
+
     createSession(restoredData = null) {
         // Use ID from options if present, otherwise generate new
         const id = (restoredData && restoredData.id) ? restoredData.id : crypto.randomUUID();
@@ -192,29 +211,35 @@ precmd_functions+=(_tabminal_zsh_apply_prompt_marker)
         });
 
         if (restoredData) {
-            persistence.loadSessionLog(id).then(log => {
-                if (log) session.history = log;
+            persistence.loadSessionSnapshot(id).then(async (snapshot) => {
+                if (!snapshot) return;
+                await session.restoreSnapshot(snapshot);
+                this.scheduleSnapshotPersist(id);
             });
         }
 
+        this.sessions.set(id, session);
+
         // Initial save
-        this.saveSessionState(session);
+        void this.saveSessionState(session);
 
         ptyProcess.onExit(() => {
-            this.removeSession(id);
+            void this.removeSession(id);
             // Cleanup temp files
             try {
                 if (initDirPath && fs.existsSync(initDirPath)) fs.rmSync(initDirPath, { recursive: true, force: true });
             } catch { /* ignore cleanup errors */ }
         });
-
-        this.sessions.set(id, session);
         debugLog(`[Manager] Created session ${id}`);
         return session;
     }
 
     saveSessionState(session) {
-        persistence.saveSession(session.id, {
+        if (this.sessions.get(session.id) !== session) {
+            return Promise.resolve();
+        }
+
+        return this.queueSessionPersistence(session.id, () => persistence.saveSession(session.id, {
             id: session.id,
             title: session.title,
             cwd: session.cwd,
@@ -224,7 +249,7 @@ precmd_functions+=(_tabminal_zsh_apply_prompt_marker)
             createdAt: session.createdAt,
             editorState: session.editorState,
             executions: session.executions
-        });
+        }));
     }
 
     updateSessionState(id, data) {
@@ -238,8 +263,29 @@ precmd_functions+=(_tabminal_zsh_apply_prompt_marker)
         }
     }
 
-    appendLog(id, chunk) {
-        persistence.appendSessionLog(id, chunk);
+    scheduleSnapshotPersist(id) {
+        const session = this.sessions.get(id);
+        if (!session) return;
+
+        const existing = this.snapshotPersistTimers.get(id);
+        if (existing) {
+            clearTimeout(existing);
+        }
+
+        const timer = setTimeout(() => {
+            this.snapshotPersistTimers.delete(id);
+            const currentSession = this.sessions.get(id);
+            if (!currentSession) return;
+
+            void this.queueSessionPersistence(id, async () => {
+                if (this.sessions.get(id) !== currentSession) return;
+                const snapshot = await currentSession.serializeSnapshot();
+                if (this.sessions.get(id) !== currentSession) return;
+                await persistence.saveSessionSnapshot(id, snapshot);
+            });
+        }, 250);
+
+        this.snapshotPersistTimers.set(id, timer);
     }
 
     getSession(id) {
@@ -260,12 +306,26 @@ precmd_functions+=(_tabminal_zsh_apply_prompt_marker)
         this.lastRows = rows;
     }
 
-    removeSession(id) {
+    async removeSession(id) {
         const session = this.sessions.get(id);
         if (session) {
+            const timer = this.snapshotPersistTimers.get(id);
+            if (timer) {
+                clearTimeout(timer);
+                this.snapshotPersistTimers.delete(id);
+            }
+            try {
+                if (process.platform === 'win32') {
+                    session.pty.kill();
+                } else {
+                    session.pty.kill('SIGHUP');
+                }
+            } catch {
+                // ignore
+            }
             session.dispose();
             this.sessions.delete(id);
-            persistence.deleteSession(id);
+            await this.queueSessionPersistence(id, () => persistence.deleteSession(id));
             debugLog(`[Manager] Removed session ${id}`);
         }
     }
@@ -289,6 +349,10 @@ precmd_functions+=(_tabminal_zsh_apply_prompt_marker)
     dispose() {
         debugLog('[Manager] Disposing all sessions.');
         this.disposing = true;
+        for (const timer of this.snapshotPersistTimers.values()) {
+            clearTimeout(timer);
+        }
+        this.snapshotPersistTimers.clear();
         for (const session of this.sessions.values()) {
             try {
                 if (process.platform === 'win32') {

package/src/terminal-session.mjs

@@ -6,10 +6,15 @@ import { alan } from 'utilitas';
 import { config } from './config.mjs';
 
 const execAsync = promisify(exec);
+const {
+    HeadlessTerminal,
+    SerializeAddon
+} = await loadHeadlessXtermPackages();
 const WS_STATE_OPEN = 1;
 const DEFAULT_HISTORY_LIMIT = 512 * 1024; // chars
 const OSC_SEQUENCE_REGEX =
     /\u001b\]1337;(ExitCode=(\d+);CommandB64=([a-zA-Z0-9+/=]+)|TabminalPrompt)\u0007/g;
+const EXTRA_PRIVATE_MODE_REGEX = /\u001b\[\?(1005|1006|1015)([hl])/g;
 const CSI_SEQUENCE_REGEX = /\u001b\[[0-9;?]*[ -\/]*[@-~]/g;
 const OSC_STRIP_REGEX = /\u001b\][\s\S]*?(?:\u0007|\u001b\\)/g;
 const DCS_SEQUENCE_REGEX = /\u001bP[\s\S]*?(?:\u0007|\u001b\\)/g;
@@ -26,6 +31,39 @@ const IGNORED_COMMANDS = [
 
 const PROMPT_PREFIX = "You are now operating as an AI terminal assistant. Your name is `Tabminal`. You will assist users in resolving terminal or coding issues and answering other inquiries. When troubleshooting terminal errors, you will be provided with the execution history to understand the context. However, please focus primarily on the most recent runtime errors and the user's latest questions. Keep your answers concise and accurate. Resolve the issue clearly and provide the reasoning while avoiding lengthy elaborations. Most user terminal variable keys are normal under typical circumstances and do not need to be treated as security risks.\n\n";
 
+async function loadHeadlessXtermPackages() {
+    const hadNavigator = Object.prototype.hasOwnProperty.call(
+        globalThis,
+        'navigator'
+    );
+    const navigatorDescriptor = hadNavigator
+        ? Object.getOwnPropertyDescriptor(globalThis, 'navigator')
+        : null;
+
+    if (hadNavigator) {
+        delete globalThis.navigator;
+    }
+
+    try {
+        const headlessPackage = await import('xterm-headless');
+        const serializePackage = await import('xterm-addon-serialize');
+        const { Terminal } = headlessPackage.default ?? headlessPackage;
+        const { SerializeAddon } = serializePackage.default ?? serializePackage;
+        return {
+            HeadlessTerminal: Terminal,
+            SerializeAddon
+        };
+    } finally {
+        if (hadNavigator && navigatorDescriptor) {
+            Object.defineProperty(
+                globalThis,
+                'navigator',
+                navigatorDescriptor
+            );
+        }
+    }
+}
+
 function splitTrailingPartialSequence(chunk) {
     if (!chunk) {
         return { complete: '', partial: '' };
@@ -45,6 +83,13 @@ function splitTrailingPartialSequence(chunk) {
     return { complete: chunk, partial: '' };
 }
 
+function estimateSnapshotScrollback(cols, rows, historyLimit) {
+    const safeCols = Math.max(1, cols || 80);
+    const safeRows = Math.max(24, rows || 24);
+    const estimatedRows = Math.ceil(historyLimit / safeCols);
+    return Math.max(safeRows, Math.min(50000, estimatedRows));
+}
+
 export class TerminalSession {
     constructor(pty, options = {}) {
         this.pty = pty;
@@ -69,13 +114,37 @@ export class TerminalSession {
         this.historyLimit = Math.max(1, options.historyLimit ?? DEFAULT_HISTORY_LIMIT);
         this.history = '';
         this.clients = new Set();
+        this.pendingClients = new Map();
         this.closed = false;
         this.pollingInterval = null;
         this.captureBuffer = '';
         this.captureStartedAt = null;
         this.lastExecution = null;
         this.skipNextShellLog = false;
+        this.skipNextShellLogResetTimer = null;
         this.partialSequenceBuffer = '';
+        this.activeAiRun = null;
+        this.snapshotScrollback = estimateSnapshotScrollback(
+            this.pty.cols,
+            this.pty.rows,
+            this.historyLimit
+        );
+        this.snapshotTerminal = new HeadlessTerminal({
+            cols: this.pty.cols,
+            rows: this.pty.rows,
+            scrollback: this.snapshotScrollback,
+            allowProposedApi: true,
+            convertEol: true,
+            logLevel: 'off'
+        });
+        this.snapshotSerializeAddon = new SerializeAddon();
+        this.snapshotTerminal.loadAddon(this.snapshotSerializeAddon);
+        this.snapshotWritePromise = Promise.resolve();
+        this.extraPrivateModes = {
+            1005: false,
+            1006: false,
+            1015: false
+        };
 
         this.ansiParser = new AnsiParser({
             inst_o: (s) => {
@@ -112,10 +181,6 @@ export class TerminalSession {
             chunk = split.complete;
             this.partialSequenceBuffer = split.partial;
 
-            if (this.manager) {
-                this.manager.appendLog(this.id, chunk);
-            }
-
             let cleaned = '';
             let lastIndex = 0;
             OSC_SEQUENCE_REGEX.lastIndex = 0;
@@ -148,8 +213,12 @@ export class TerminalSession {
 
             if (!cleaned) return;
 
+            this._appendSnapshotData(cleaned);
             this._appendHistory(cleaned);
             this.ansiParser.parse(cleaned);
+            if (this.manager?.scheduleSnapshotPersist) {
+                this.manager.scheduleSnapshotPersist(this.id);
+            }
             this._broadcast({ type: 'output', data: cleaned });
         };
 
@@ -272,36 +341,58 @@ export class TerminalSession {
 
     attach(ws) {
         if (!ws) throw new Error('WebSocket instance required');
-        this.clients.add(ws);
-        ws.once('close', () => this.clients.delete(ws));
+        this.pendingClients.set(ws, []);
+        ws.once('close', () => {
+            this.clients.delete(ws);
+            this.pendingClients.delete(ws);
+        });
         ws.on('message', (raw) => this._routeIncoming(raw, ws));
         ws.on('error', () => ws.close());
 
-        this._send(ws, { type: 'snapshot', data: this.history });
-        this._send(ws, { type: 'meta', title: this.title, cwd: this.cwd, env: this.env, cols: this.pty.cols, rows: this.pty.rows });
-        if (this.closed) {
-            this._send(ws, { type: 'status', status: 'terminated' });
-        } else {
-            this._send(ws, { type: 'status', status: 'ready' });
-        }
+        void this._sendInitialState(ws);
     }
 
     dispose() {
         this.stopTitlePolling();
+        this._clearSkipNextShellLogResetTimer();
         this.clients.clear();
+        this.pendingClients.clear();
         this.dataSubscription?.dispose?.();
         this.exitSubscription?.dispose?.();
+        this.snapshotTerminal?.dispose?.();
     }
 
     resize(cols, rows) {
         if (this.closed) return;
         this.pty.resize(cols, rows);
+        this._queueSnapshotMutation(() => {
+            this.snapshotTerminal.resize(cols, rows);
+        });
+        if (this.manager?.scheduleSnapshotPersist) {
+            this.manager.scheduleSnapshotPersist(this.id);
+        }
         this._broadcast({ type: 'meta', title: this.title, cwd: this.cwd, env: this.env, cols, rows });
         if (this.manager && this.manager.saveSessionState) {
             this.manager.saveSessionState(this);
         }
     }
 
+    async restoreSnapshot(snapshot) {
+        if (typeof snapshot !== 'string' || !snapshot) return;
+        this.history = snapshot;
+        this._appendSnapshotData(snapshot);
+        await this.snapshotWritePromise;
+    }
+
+    async serializeSnapshot() {
+        await this.snapshotWritePromise;
+        let snapshot = this.snapshotSerializeAddon.serialize({
+            scrollback: this.snapshotScrollback
+        });
+        snapshot += this._serializeExtraPrivateModes();
+        return snapshot;
+    }
+
     _routeIncoming(raw, ws) {
         let payload;
         try {
@@ -328,6 +419,11 @@ export class TerminalSession {
     }
 
     write(data) {
+        if (this.activeAiRun && typeof data === 'string') {
+            this._handleInputDuringAi(data);
+            return;
+        }
+
         if (typeof data === 'string' && data.startsWith('\x1b')) {
             this.pty.write(data);
             this.inputBuffer = '';
@@ -415,6 +511,19 @@ export class TerminalSession {
         }
     }
 
+    _handleInputDuringAi(data) {
+        for (const char of data) {
+            if (char === '\x03') {
+                this._cancelActiveAiRun('ctrl_c');
+                return;
+            }
+            if (char === '\x04') {
+                this._cancelActiveAiRun('ctrl_d');
+                return;
+            }
+        }
+    }
+
     _buildAiContext(history) {
         let pendingShellHistory = '';
         const conversationHistory = [];
@@ -438,9 +547,67 @@ export class TerminalSession {
         return { conversationHistory, pendingShellHistory };
     }
 
+    _promptAi(prompt, options) {
+        return alan.prompt(prompt, options);
+    }
+
+    _clearSkipNextShellLogResetTimer() {
+        if (this.skipNextShellLogResetTimer) {
+            clearTimeout(this.skipNextShellLogResetTimer);
+            this.skipNextShellLogResetTimer = null;
+        }
+    }
+
+    _scheduleSkipNextShellLogReset() {
+        this._clearSkipNextShellLogResetTimer();
+        this.skipNextShellLogResetTimer = setTimeout(() => {
+            this.skipNextShellLog = false;
+            this.skipNextShellLogResetTimer = null;
+        }, 500);
+        this.skipNextShellLogResetTimer.unref?.();
+    }
+
+    _finishAiInteraction(mode = 'normal') {
+        this.suppressPtyOutput = false;
+        this._scheduleSkipNextShellLogReset();
+
+        if (mode === 'ctrl_c') {
+            this._writeToLogAndBroadcast('\x1b[0m');
+            this.pty.write('\x03');
+            return;
+        }
+
+        this._writeToLogAndBroadcast('\x1b[0m\r\n');
+        if (mode === 'ctrl_d') {
+            this.pty.write('\x15');
+        }
+        this.pty.write('\r');
+    }
+
+    _cancelActiveAiRun(reason) {
+        const run = this.activeAiRun;
+        if (!run || run.cancelled) {
+            return false;
+        }
+
+        run.cancelled = true;
+        this.activeAiRun = null;
+        this._logCommandExecution({
+            command: 'ai',
+            exitCode: 130,
+            input: run.prompt,
+            output: 'AI generation cancelled.',
+            startedAt: run.startedAt,
+            completedAt: new Date()
+        });
+        this._finishAiInteraction(reason);
+        return true;
+    }
+
     async _handleAiCommand(prompt) {
         // Prevent duplicate logging from shell integration
         this.skipNextShellLog = true;
+        this._clearSkipNextShellLogResetTimer();
         // Ensure clean line start and set Cyan color (No prefix yet)
         this._writeToLogAndBroadcast('\r\x1b[K\x1b[36m');
         // Gather Context (Current Session Only)
@@ -458,8 +625,17 @@ export class TerminalSession {
         const startTime = new Date();
         let fullResponse = '';
         let isFirstChunk = true;
+        const run = {
+            prompt,
+            startedAt: startTime,
+            cancelled: false
+        };
+        this.activeAiRun = run;
         try {
             const streamCallback = (chunk) => {
+                if (this.activeAiRun !== run || run.cancelled) {
+                    return;
+                }
                 // console.log('Chunk Received:');
                 // console.log(chunk);
                 if (chunk && chunk.text) {
@@ -475,13 +651,17 @@ export class TerminalSession {
                 }
             };
             // console.log('Start AI Prompt...');
-            const result = await alan.prompt(finalPrompt, {
+            const result = await this._promptAi(finalPrompt, {
                 stream: streamCallback,
                 delta: true,
                 messages: conversationHistory,
                 trimBeginning: true
             });
 
+            if (this.activeAiRun !== run || run.cancelled) {
+                return;
+            }
+
             if (result && result.text) {
                 fullResponse = result.text;
             }
@@ -500,6 +680,9 @@ export class TerminalSession {
             });
 
         } catch (e) {
+            if (this.activeAiRun !== run || run.cancelled) {
+                return;
+            }
             this._writeToLogAndBroadcast(`\x1b[31mAI Error: ${e.message}\x1b[0m\r\n`);
 
             this._logCommandExecution({
@@ -510,13 +693,12 @@ export class TerminalSession {
                 startedAt: startTime,
                 completedAt: new Date()
             });
+        } finally {
+            if (this.activeAiRun === run) {
+                this.activeAiRun = null;
+                this._finishAiInteraction('normal');
+            }
         }
-
-        // Resume PTY output
-        this.suppressPtyOutput = false;
-
-        // Restore prompt by sending \r to pty (empty command)
-        this.pty.write('\r');
     }
 
     _handleResize(cols, rows) {
@@ -551,6 +733,7 @@ export class TerminalSession {
     _handleExitCodeSequence(exitCodeStr, cmdB64) {
         if (this.skipNextShellLog) {
             this.skipNextShellLog = false;
+            this._clearSkipNextShellLogResetTimer();
             this.captureBuffer = '';
             this.captureStartedAt = null;
             return;
@@ -920,6 +1103,9 @@ export class TerminalSession {
         for (const client of this.clients) {
             this._send(client, message, data);
         }
+        for (const pending of this.pendingClients.values()) {
+            pending.push(data);
+        }
     }
 
     _send(ws, message, preEncoded) {
@@ -929,12 +1115,82 @@ export class TerminalSession {
 
     _writeToLogAndBroadcast(text) {
         if (!text) return;
-        if (this.manager) {
-            this.manager.appendLog(this.id, text);
-        }
+        this._appendSnapshotData(text);
         this._appendHistory(text);
+        if (this.manager?.scheduleSnapshotPersist) {
+            this.manager.scheduleSnapshotPersist(this.id);
+        }
         this._broadcast({ type: 'output', data: text });
     }
+
+    _queueSnapshotMutation(mutate) {
+        const next = this.snapshotWritePromise.then(() => mutate());
+        this.snapshotWritePromise = next.catch(() => {});
+        return next;
+    }
+
+    _appendSnapshotData(text) {
+        if (!text) return;
+        this._trackExtraPrivateModes(text);
+        this._queueSnapshotMutation(() => new Promise((resolve) => {
+            this.snapshotTerminal.write(text, resolve);
+        }));
+    }
+
+    _trackExtraPrivateModes(text) {
+        EXTRA_PRIVATE_MODE_REGEX.lastIndex = 0;
+        let match;
+        while ((match = EXTRA_PRIVATE_MODE_REGEX.exec(text)) !== null) {
+            this.extraPrivateModes[match[1]] = match[2] === 'h';
+        }
+    }
+
+    _serializeExtraPrivateModes() {
+        let output = '';
+        for (const mode of ['1005', '1006', '1015']) {
+            if (this.extraPrivateModes[mode]) {
+                output += `\u001b[?${mode}h`;
+            }
+        }
+        return output;
+    }
+
+    async _sendInitialState(ws) {
+        const pending = this.pendingClients.get(ws);
+        if (!pending) return;
+
+        await this._queueSnapshotMutation(() => undefined);
+        if (ws.readyState !== WS_STATE_OPEN) {
+            this.pendingClients.delete(ws);
+            return;
+        }
+
+        const snapshot = await this.serializeSnapshot();
+        this._send(ws, { type: 'snapshot', data: snapshot });
+        this._send(ws, {
+            type: 'meta',
+            title: this.title,
+            cwd: this.cwd,
+            env: this.env,
+            cols: this.pty.cols,
+            rows: this.pty.rows
+        });
+        if (this.closed) {
+            this._send(ws, { type: 'status', status: 'terminated' });
+        } else {
+            this._send(ws, { type: 'status', status: 'ready' });
+        }
+
+        for (const payload of pending) {
+            if (ws.readyState !== WS_STATE_OPEN) break;
+            ws.send(payload);
+        }
+
+        this.pendingClients.delete(ws);
+        if (ws.readyState === WS_STATE_OPEN) {
+            this.clients.add(ws);
+        }
+    }
 }
 
 function clampDimension(value) {