From 98cba39004262c0baafc78a897640232dc49768d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Ondrejka?= <lukas.ondrejka1@gmail.com>
Date: Sat, 20 Dec 2025 00:09:46 +0100
Subject: [PATCH] Implement RIGHT and LEFT keys for cursor navigation in
 terminal (#637)

Co-authored-by: cmcooper1980 <31871143+cmcooper1980@users.noreply.github.com>
---
 frontend/src/components/Terminal.vue | 32 ++++++++++++++++++++--------
 1 file changed, 23 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/Terminal.vue b/frontend/src/components/Terminal.vue
index d912705..deeae93 100644
--- a/frontend/src/components/Terminal.vue
+++ b/frontend/src/components/Terminal.vue
@@ -154,16 +154,17 @@ export default {
         },
 
         removeInput() {
+            const textAfterCursorLength = this.terminalInputBuffer.length - this.cursorPosition;
+            const spaces = " ".repeat(textAfterCursorLength);
             const backspaceCount = this.terminalInputBuffer.length;
             const backspaces = "\b \b".repeat(backspaceCount);
             this.cursorPosition = 0;
-            this.terminal.write(backspaces);
+            this.terminal.write(spaces + backspaces);
             this.terminalInputBuffer = "";
         },
 
         mainTerminalConfig() {
             this.terminal.onKey(e => {
-                const code = e.key.charCodeAt(0);
                 console.debug("Encode: " + JSON.stringify(e.key));
 
                 if (e.key === "\r") {
@@ -180,25 +181,38 @@ export default {
                     this.$root.emitAgent(this.endpoint, "terminalInput", this.name, buffer + e.key, (err) => {
                         this.$root.toastError(err.msg);
                     });
-
-                } else if (code === 127) { // Backspace
+                } else if (e.key === "\u007F") {      // Backspace
                     if (this.cursorPosition > 0) {
-                        this.terminal.write("\b \b");
+                        const trimmedTextBeforeCursor = this.terminalInputBuffer.slice(0, this.cursorPosition - 1);
+                        const textAfterCursor = this.terminalInputBuffer.slice(this.cursorPosition);
+                        const clearAfterCursor = " ".repeat(textAfterCursor.length) + "\b \b".repeat(textAfterCursor.length + 1);
+                        this.terminalInputBuffer = trimmedTextBeforeCursor + textAfterCursor;
+                        this.terminal.write(clearAfterCursor + textAfterCursor + "\b".repeat(textAfterCursor.length));
                         this.cursorPosition--;
-                        this.terminalInputBuffer = this.terminalInputBuffer.slice(0, -1);
                     }
                 } else if (e.key === "\u001B\u005B\u0041" || e.key === "\u001B\u005B\u0042") {      // UP OR DOWN
                     // Do nothing
-
                 } else if (e.key === "\u001B\u005B\u0043") {      // RIGHT
-                    // TODO
+                    if (this.cursorPosition < this.terminalInputBuffer.length) {
+                        this.terminal.write(this.terminalInputBuffer[this.cursorPosition]);
+                        this.cursorPosition++;
+                    }
                 } else if (e.key === "\u001B\u005B\u0044") {      // LEFT
-                    // TODO
+                    if (this.cursorPosition > 0) {
+                        this.terminal.write("\b");
+                        this.cursorPosition--;
+                    }
                 } else if (e.key === "\u0003") {      // Ctrl + C
                     console.debug("Ctrl + C");
                     this.$root.emitAgent(this.endpoint, "terminalInput", this.name, e.key);
                     this.removeInput();
+                } else if (e.key === "\u0009" || e.key.startsWith("\u001B")) {      // TAB or other special keys
+                    // Do nothing
                 } else {
+                    const textBeforeCursor = this.terminalInputBuffer.slice(0, this.cursorPosition);
+                    const textAfterCursor = this.terminalInputBuffer.slice(this.cursorPosition);
+                    this.terminalInputBuffer = textBeforeCursor + e.key + textAfterCursor;
+                    this.terminal.write(e.key + textAfterCursor + "\b".repeat(textAfterCursor.length));
                     this.cursorPosition++;
                     this.terminalInputBuffer += e.key;
                     this.terminal.write(e.key);