fix: terminal handle edge flipping and tab number reuse

Author: bajrangCoder

src/components/terminal/terminalManager.js

@@ -24,6 +24,32 @@ class TerminalManager {
 		this.terminalCounter = 0;
 	}
 
+	extractTerminalNumber(name) {
+		if (!name) return null;
+		const match = String(name).match(/^Terminal\s+(\d+)(?:\b| - )/i);
+		if (!match) return null;
+		const number = Number.parseInt(match[1], 10);
+		return Number.isInteger(number) && number > 0 ? number : null;
+	}
+
+	getNextAvailableTerminalNumber() {
+		const usedNumbers = new Set();
+
+		for (const terminal of this.terminals.values()) {
+			const number = terminal?.terminalNumber;
+			if (Number.isInteger(number) && number > 0) {
+				usedNumbers.add(number);
+			}
+		}
+
+		let nextNumber = 1;
+		while (usedNumbers.has(nextNumber)) {
+			nextNumber++;
+		}
+
+		return nextNumber;
+	}
+
 	async getPersistedSessions() {
 		try {
 			const stored = helpers.parseJSON(
@@ -163,7 +189,15 @@ class TerminalManager {
 			const isServerMode = serverMode !== false;
 
 			const terminalId = `terminal_${++this.terminalCounter}`;
-			const terminalName = options.name || `Terminal ${this.terminalCounter}`;
+			const providedName =
+				typeof options.name === "string" ? options.name.trim() : "";
+			const terminalNumber = providedName
+				? this.extractTerminalNumber(providedName)
+				: this.getNextAvailableTerminalNumber();
+			const terminalName = providedName || `Terminal ${terminalNumber}`;
+			const titlePrefix = terminalNumber
+				? `Terminal ${terminalNumber}`
+				: terminalName;
 
 			// Check if terminal is installed before proceeding
 			if (isServerMode) {
@@ -228,11 +262,13 @@ class TerminalManager {
 							terminalFile,
 							terminalComponent,
 							uniqueId,
+							titlePrefix,
 						);
 
 						const instance = {
 							id: uniqueId,
 							name: terminalName,
+							terminalNumber,
 							component: terminalComponent,
 							file: terminalFile,
 							container: terminalContainer,
@@ -430,7 +466,12 @@ class TerminalManager {
 	 * @param {TerminalComponent} terminalComponent - Terminal component
 	 * @param {string} terminalId - Terminal ID
 	 */
-	async setupTerminalHandlers(terminalFile, terminalComponent, terminalId) {
+	async setupTerminalHandlers(
+		terminalFile,
+		terminalComponent,
+		terminalId,
+		titlePrefix = terminalId,
+	) {
 		const textarea = terminalComponent.terminal?.textarea;
 		if (textarea) {
 			const onFocus = () => {
@@ -583,8 +624,8 @@ class TerminalManager {
 
 		terminalComponent.onTitleChange = async (title) => {
 			if (title) {
-				// Format terminal title as "Terminal ! - title"
-				const formattedTitle = `Terminal ${this.terminalCounter} - ${title}`;
+				// Keep the tab prefix stable for this terminal instance.
+				const formattedTitle = `${titlePrefix} - ${title}`;
 				terminalFile.filename = formattedTitle;
 
 				if (terminalComponent.serverMode && terminalComponent.pid) {

src/components/terminal/terminalTouchSelection.js

@@ -225,15 +225,15 @@ export default class TerminalTouchSelection {
 	createHandles() {
 		this.startHandle = this.createHandle("start");
 		this.startHandle.style.cssText += `
-      transform: rotate(180deg) translateX(87%);
       border-radius: 50% 50% 50% 0;
     `;
+		this.setHandleOrientation(this.startHandle, "start");
 
 		this.endHandle = this.createHandle("end");
 		this.endHandle.style.cssText += `
-      transform: rotate(90deg) translateY(-13%);
       border-radius: 50% 50% 50% 0;
     `;
+		this.setHandleOrientation(this.endHandle, "end");
 
 		this.selectionOverlay.appendChild(this.startHandle);
 		this.selectionOverlay.appendChild(this.endHandle);
@@ -866,6 +866,44 @@ export default class TerminalTouchSelection {
 		this.endHandle.style.display = "none";
 	}
 
+	getHandleBaseTransform(orientation) {
+		if (orientation === "start") {
+			return "rotate(180deg) translateX(87%)";
+		}
+		return "rotate(90deg) translateY(-13%)";
+	}
+
+	setHandleOrientation(handle, orientation) {
+		if (!handle) return;
+
+		const baseTransform = this.getHandleBaseTransform(orientation);
+		const hasScale = /\bscale\(/.test(handle.style.transform || "");
+		handle.dataset.orientation = orientation;
+		handle.style.transform = hasScale
+			? `${baseTransform} scale(1.2)`
+			: baseTransform;
+	}
+
+	updateHandleOrientationForViewportEdges() {
+		const overlayRect = this.selectionOverlay.getBoundingClientRect();
+
+		if (this.startHandle.style.display !== "none") {
+			this.setHandleOrientation(this.startHandle, "start");
+			const startRect = this.startHandle.getBoundingClientRect();
+			if (startRect.left < overlayRect.left) {
+				this.setHandleOrientation(this.startHandle, "end");
+			}
+		}
+
+		if (this.endHandle.style.display !== "none") {
+			this.setHandleOrientation(this.endHandle, "end");
+			const endRect = this.endHandle.getBoundingClientRect();
+			if (endRect.right > overlayRect.right) {
+				this.setHandleOrientation(this.endHandle, "start");
+			}
+		}
+	}
+
 	updateHandlePositions() {
 		if (!this.selectionStart || !this.selectionEnd) return;
 
@@ -902,6 +940,8 @@ export default class TerminalTouchSelection {
 		} else {
 			this.endHandle.style.display = "none";
 		}
+
+		this.updateHandleOrientationForViewportEdges();
 	}
 
 	showContextMenu() {