From d13a2a7cf63f1bedcfc35a546cda79a8fbafa7ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Igor=20=C5=A0=C4=87eki=C4=87?= <iscekic@protonmail.com>
Date: Thu, 26 Feb 2026 19:32:51 +0100
Subject: [PATCH] fix(chat): fix ghost text overlay positioning for caret sync

Move ghost text into a separate absolutely-positioned overlay div that
mirrors the textarea's scroll position, replacing the previous inline
span approach. Add a hidden span to offset the visible ghost text to
the correct position after the current input, ensuring the ghost text
stays aligned with the caret regardless of scroll state.
---
 .../src/components/chat/PromptInput.tsx       | 13 +++++++++---
 .../webview-ui/src/styles/chat.css            | 21 +++++++++++++++++++
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/packages/kilo-vscode/webview-ui/src/components/chat/PromptInput.tsx b/packages/kilo-vscode/webview-ui/src/components/chat/PromptInput.tsx
index fbdca63beab..c0417d3fa0d 100644
--- a/packages/kilo-vscode/webview-ui/src/components/chat/PromptInput.tsx
+++ b/packages/kilo-vscode/webview-ui/src/components/chat/PromptInput.tsx
@@ -39,6 +39,7 @@ export const PromptInput: Component = () => {
 
   let textareaRef: HTMLTextAreaElement | undefined
   let highlightRef: HTMLDivElement | undefined
+  let ghostRef: HTMLDivElement | undefined
   let dropdownRef: HTMLDivElement | undefined
   let debounceTimer: ReturnType<typeof setTimeout> | undefined
   let requestCounter = 0
@@ -158,6 +159,9 @@ export const PromptInput: Component = () => {
     if (highlightRef && textareaRef) {
       highlightRef.scrollTop = textareaRef.scrollTop
     }
+    if (ghostRef && textareaRef) {
+      ghostRef.scrollTop = textareaRef.scrollTop
+    }
   }
 
   const adjustHeight = () => {
@@ -316,10 +320,13 @@ export const PromptInput: Component = () => {
                 </Show>
               )}
             </Index>
-            <Show when={ghostText()}>
-              <span class="prompt-input-ghost-text">{ghostText()}</span>
-            </Show>
           </div>
+          <Show when={ghostText()}>
+            <div class="prompt-input-ghost-overlay" ref={ghostRef} aria-hidden="true">
+              <span class="prompt-input-ghost-hidden">{text()}</span>
+              <span class="prompt-input-ghost-text">{ghostText()}</span>
+            </div>
+          </Show>
           <textarea
             ref={textareaRef}
             class="prompt-input"
diff --git a/packages/kilo-vscode/webview-ui/src/styles/chat.css b/packages/kilo-vscode/webview-ui/src/styles/chat.css
index b5cce456a1b..d779545c391 100644
--- a/packages/kilo-vscode/webview-ui/src/styles/chat.css
+++ b/packages/kilo-vscode/webview-ui/src/styles/chat.css
@@ -339,6 +339,27 @@
   color: var(--vscode-textLink-foreground, #3794ff);
 }
 
+.prompt-input-ghost-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  padding: 8px;
+  font-family: var(--vscode-font-family);
+  font-size: 13px;
+  line-height: 1.4;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow: hidden;
+  z-index: 0;
+}
+
+.prompt-input-ghost-hidden {
+  visibility: hidden;
+}
+
 .prompt-input-ghost-text {
   color: var(--vscode-editorGhostText-foreground, rgba(255, 255, 255, 0.35));
 }