Restore terminal tabs (#1592)

* change default font size and inactive style of terminal

* feat: save pid of opened terminal and restore it

save the pid of terminal tab in localstorage and restore when app reopened

* fix: font issue with terminal

* fix(terminal): keep previous active tab when restoring sessions

Author: bajrangCoder

src/components/terminal/terminalDefaults.js

@@ -1,12 +1,12 @@
 import appSettings from "lib/settings";
 
 export const DEFAULT_TERMINAL_SETTINGS = {
-	fontSize: 14,
+	fontSize: 12,
 	fontFamily: "MesloLGS NF Regular",
 	fontWeight: "normal",
 	cursorBlink: true,
 	cursorStyle: "block",
-	cursorInactiveStyle: "underline",
+	cursorInactiveStyle: "outline",
 	scrollback: 1000,
 	theme: "dark",
 	tabStopWidth: 4,

src/components/terminal/terminalManager.js

@@ -7,25 +7,145 @@ import EditorFile from "lib/editorFile";
 import TerminalComponent from "./terminal";
 import "@xterm/xterm/css/xterm.css";
 import toast from "components/toast";
+import helpers from "utils/helpers";
+
+const TERMINAL_SESSION_STORAGE_KEY = "acodeTerminalSessions";
 
 class TerminalManager {
 	constructor() {
 		this.terminals = new Map();
 		this.terminalCounter = 0;
 	}
 
+	getPersistedSessions() {
+		try {
+			const stored = helpers.parseJSON(
+				localStorage.getItem(TERMINAL_SESSION_STORAGE_KEY),
+			);
+			if (!Array.isArray(stored)) return [];
+			return stored
+				.map((entry) => {
+					if (!entry) return null;
+					if (typeof entry === "string") {
+						return { pid: entry, name: `Terminal ${entry}` };
+					}
+					if (typeof entry === "object" && entry.pid) {
+						const pid = String(entry.pid);
+						return {
+							pid,
+							name: entry.name || `Terminal ${pid}`,
+						};
+					}
+					return null;
+				})
+				.filter(Boolean);
+		} catch (error) {
+			console.error("Failed to read persisted terminal sessions:", error);
+			return [];
+		}
+	}
+
+	savePersistedSessions(sessions) {
+		try {
+			localStorage.setItem(
+				TERMINAL_SESSION_STORAGE_KEY,
+				JSON.stringify(sessions),
+			);
+		} catch (error) {
+			console.error("Failed to persist terminal sessions:", error);
+		}
+	}
+
+	persistTerminalSession(pid, name) {
+		if (!pid) return;
+
+		const pidStr = String(pid);
+		const sessions = this.getPersistedSessions();
+		const existingIndex = sessions.findIndex(
+			(session) => session.pid === pidStr,
+		);
+		const sessionData = {
+			pid: pidStr,
+			name: name || `Terminal ${pidStr}`,
+		};
+
+		if (existingIndex >= 0) {
+			sessions[existingIndex] = {
+				...sessions[existingIndex],
+				...sessionData,
+			};
+		} else {
+			sessions.push(sessionData);
+		}
+
+		this.savePersistedSessions(sessions);
+	}
+
+	removePersistedSession(pid) {
+		if (!pid) return;
+
+		const pidStr = String(pid);
+		const sessions = this.getPersistedSessions();
+		const nextSessions = sessions.filter((session) => session.pid !== pidStr);
+
+		if (nextSessions.length !== sessions.length) {
+			this.savePersistedSessions(nextSessions);
+		}
+	}
+
+	async restorePersistedSessions() {
+		const sessions = this.getPersistedSessions();
+		if (!sessions.length) return;
+
+		const manager = window.editorManager;
+		const activeFileId = manager?.activeFile?.id;
+		const restoredTerminals = [];
+
+		for (const session of sessions) {
+			if (!session?.pid) continue;
+			if (this.terminals.has(session.pid)) continue;
+
+			try {
+				const instance = await this.createServerTerminal({
+					pid: session.pid,
+					name: session.name,
+					reconnecting: true,
+					render: false,
+				});
+				if (instance) restoredTerminals.push(instance);
+			} catch (error) {
+				console.error(
+					`Failed to restore terminal session ${session.pid}:`,
+					error,
+				);
+				this.removePersistedSession(session.pid);
+			}
+		}
+
+		if (activeFileId && manager?.getFile) {
+			const fileToRestore = manager.getFile(activeFileId, "id");
+			fileToRestore?.makeActive();
+		} else if (!manager?.activeFile && restoredTerminals.length) {
+			restoredTerminals[0]?.file?.makeActive();
+		}
+	}
+
 	/**
 	 * Create a new terminal session
 	 * @param {object} options - Terminal options
 	 * @returns {Promise<object>} Terminal instance info
 	 */
 	async createTerminal(options = {}) {
 		try {
+			const { render, serverMode, ...terminalOptions } = options;
+			const shouldRender = render !== false;
+			const isServerMode = serverMode !== false;
+
 			const terminalId = `terminal_${++this.terminalCounter}`;
 			const terminalName = options.name || `Terminal ${this.terminalCounter}`;
 
 			// Check if terminal is installed before proceeding
-			if (options.serverMode !== false) {
+			if (isServerMode) {
 				const installationResult = await this.checkAndInstallTerminal();
 				if (!installationResult.success) {
 					throw new Error(installationResult.error);
@@ -34,8 +154,8 @@ class TerminalManager {
 
 			// Create terminal component
 			const terminalComponent = new TerminalComponent({
-				serverMode: options.serverMode !== false,
-				...options,
+				serverMode: isServerMode,
+				...terminalOptions,
 			});
 
 			// Create container
@@ -59,7 +179,7 @@ class TerminalManager {
 				type: "terminal",
 				content: terminalContainer,
 				tabIcon: "licons terminal",
-				render: true,
+				render: shouldRender,
 			});
 
 			// Wait for tab creation and setup
@@ -71,7 +191,7 @@ class TerminalManager {
 
 						// Connect to session if in server mode
 						if (terminalComponent.serverMode) {
-							await terminalComponent.connectToSession();
+							await terminalComponent.connectToSession(terminalOptions.pid);
 						} else {
 							// For local mode, just write a welcome message
 							terminalComponent.write(
@@ -98,6 +218,10 @@ class TerminalManager {
 						};
 
 						this.terminals.set(uniqueId, instance);
+
+						if (terminalComponent.serverMode && terminalComponent.pid) {
+							this.persistTerminalSession(terminalComponent.pid, terminalName);
+						}
 						resolve(instance);
 					} catch (error) {
 						console.error("Failed to initialize terminal:", error);
@@ -368,6 +492,10 @@ class TerminalManager {
 				const formattedTitle = `Terminal ${this.terminalCounter} - ${title}`;
 				terminalFile.filename = formattedTitle;
 
+				if (terminalComponent.serverMode && terminalComponent.pid) {
+					this.persistTerminalSession(terminalComponent.pid, formattedTitle);
+				}
+
 				// Refresh the header subtitle if this terminal is active
 				if (
 					editorManager.activeFile &&
@@ -421,6 +549,10 @@ class TerminalManager {
 		if (!terminal) return;
 
 		try {
+			if (terminal.component.serverMode && terminal.component.pid) {
+				this.removePersistedSession(terminal.component.pid);
+			}
+
 			// Cleanup resize observer
 			if (terminal.file._resizeObserver) {
 				terminal.file._resizeObserver.disconnect();

src/lib/fonts.js

@@ -9,6 +9,8 @@ import robotoMono from "../res/fonts/RobotoMono.ttf";
 const fonts = new Map();
 const customFontNames = new Set();
 const CUSTOM_FONTS_KEY = "custom_fonts";
+const FONT_FACE_STYLE_ID = "font-face-style";
+const EDITOR_STYLE_ID = "editor-font-style";
 
 add(
 	"Fira Code",
@@ -188,29 +190,14 @@ function has(name) {
 async function setFont(name) {
 	loader.showTitleLoader();
 	try {
-		const $style = tag.get("style#font-style") ?? (
-			<style id="font-style"></style>
-		);
-		let css = get(name);
-
-		// Get all URL font references
-		const urls = [...css.matchAll(/url\((.*?)\)/g)].map((match) => match[1]);
-
-		urls?.map(async (url) => {
-			if (!/^https?/.test(url)) return;
-			if (/^https?:\/\/localhost/.test(url)) return;
-			const fontFile = await downloadFont(name, url);
-			const internalUrl = await helpers.toInternalUri(fontFile);
-			css = css.replace(url, internalUrl);
-		}),
-			($style.textContent = `${css}
-  .editor-container.ace_editor{
+		await loadFont(name);
+		const $style = ensureStyleElement(EDITOR_STYLE_ID);
+		$style.textContent = `.editor-container.ace_editor{
     font-family: "${name}", NotoMono, Monaco, MONOSPACE !important;
   }
   .ace_text{
     font-family: inherit !important;
-  }`);
-		document.head.append($style);
+  }`;
 	} catch (error) {
 		toast(`${name} font not found`, "error");
 		setFont("Roboto Mono");
@@ -238,7 +225,7 @@ async function downloadFont(name, link) {
 }
 
 async function loadFont(name) {
-	const $style = tag.get("style#font-style") ?? <style id="font-style"></style>;
+	const $style = ensureStyleElement(FONT_FACE_STYLE_ID);
 	let css = get(name);
 
 	if (!css) {
@@ -260,12 +247,20 @@ async function loadFont(name) {
 	// Add font face to document if not already present
 	if (!$style.textContent.includes(`font-family: '${name}'`)) {
 		$style.textContent = `${$style.textContent}\n${css}`;
-		document.head.append($style);
 	}
 
 	return css;
 }
 
+function ensureStyleElement(id) {
+	const selector = `style#${id}`;
+	const $style = tag.get(selector) ?? <style id={id}></style>;
+	if (!$style.isConnected) {
+		document.head.append($style);
+	}
+	return $style;
+}
+
 export default {
 	add,
 	addCustom,

src/main.js

@@ -18,6 +18,7 @@ import { setKeyBindings } from "ace/commands";
 import { initModes } from "ace/modelist";
 import Contextmenu from "components/contextmenu";
 import Sidebar from "components/sidebar";
+import { TerminalManager } from "components/terminal";
 import tile from "components/tile";
 import toast from "components/toast";
 import tutorial from "components/tutorial";
@@ -487,6 +488,10 @@ async function loadApp() {
 
 	initFileList();
 
+	TerminalManager.restorePersistedSessions().catch((error) => {
+		console.error("Terminal restoration failed:", error);
+	});
+
 	/**
 	 *
 	 * @param {MouseEvent} e