refactor(chat): simplify ghost text rendering by inlining into highlight overlay

Replace the separate ghost text overlay div with an inline span inside
the existing highlight overlay. Remove the dedicated `ghostRef`,
scroll-sync logic, and associated CSS classes (`prompt-input-ghost-overlay`,
`prompt-input-ghost-hidden`). Adjust padding on the highlight overlay and
textarea to accommodate the ghost text span in the same layout flow.

packages/kilo-vscode/webview-ui/src/components/chat/PromptInput.tsx

@@ -39,7 +39,6 @@ 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
@@ -159,9 +158,6 @@ export const PromptInput: Component = () => {
     if (highlightRef && textareaRef) {
       highlightRef.scrollTop = textareaRef.scrollTop
     }
-    if (ghostRef && textareaRef) {
-      ghostRef.scrollTop = textareaRef.scrollTop
-    }
   }
 
   const adjustHeight = () => {
@@ -320,13 +316,10 @@ export const PromptInput: Component = () => {
                 </Show>
               )}
             </Index>
-          </div>
-          <Show when={ghostText()}>
-            <div class="prompt-input-ghost-overlay" ref={ghostRef} aria-hidden="true">
-              <span class="prompt-input-ghost-hidden">{text()}</span>
+            <Show when={ghostText()}>
               <span class="prompt-input-ghost-text">{ghostText()}</span>
-            </div>
-          </Show>
+            </Show>
+          </div>
           <textarea
             ref={textareaRef}
             class="prompt-input"

packages/kilo-vscode/webview-ui/src/styles/chat.css

@@ -278,7 +278,7 @@
   flex: 1;
   min-height: 54px;
   max-height: 200px;
-  padding: 8px;
+  padding: 8px 8px calc(8px + 1.4em);
   color: transparent;
   caret-color: var(--vscode-input-foreground);
   font-family: var(--vscode-font-family);
@@ -324,7 +324,7 @@
   right: 0;
   bottom: 0;
   pointer-events: none;
-  padding: 8px;
+  padding: 8px 8px calc(8px + 1.4em);
   font-family: var(--vscode-font-family);
   font-size: 13px;
   line-height: 1.4;
@@ -339,27 +339,6 @@
   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));
 }