From 1826d58402689d7ca20af7d0ffd0f7cd03bdd706 Mon Sep 17 00:00:00 2001
From: "kiloconnect[bot]" <240665456+kiloconnect[bot]@users.noreply.github.com>
Date: Tue, 7 Apr 2026 13:39:33 +0000
Subject: [PATCH] feat(cloud-agent): prompt autocomplete (ghost text)

Implements ghost-text prompt autocomplete for the Cloud Agent chat input
(based on original PR #5 by @markijbema, rebased on monorepo main).

- Adds `cloudAgent.getFimAutocomplete` tRPC mutation using Mistral Codestral FIM
- Adds `useChatGhostText` hook with debounced completion requests
- Adds ghost text overlay rendering in `cloud-agent-next` ChatInput
- Accept suggestion: Tab (all), ArrowRight (next word), Escape clears
- Improves error handling in `sendProxiedChatCompletion`
---
 apps/web/src/app/globals.css                  |   8 +
 .../components/cloud-agent-next/ChatInput.tsx |  64 ++++-
 .../hooks/useChatGhostText.ts                 | 242 ++++++++++++++++++
 .../src/lib/cloud-agent/chat-completion.ts    | 131 ++++++++++
 apps/web/src/lib/llm-proxy-helpers.ts         |  35 ++-
 apps/web/src/routers/cloud-agent-router.ts    |  28 ++
 apps/web/src/routers/cloud-agent-schemas.ts   |   7 +
 7 files changed, 491 insertions(+), 24 deletions(-)
 create mode 100644 apps/web/src/components/cloud-agent-next/hooks/useChatGhostText.ts
 create mode 100644 apps/web/src/lib/cloud-agent/chat-completion.ts

diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index 10210e8a03..9917d66dc0 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -233,3 +233,11 @@
     }
   }
 }
+
+/* Ghost text for chat autocomplete */
+.chat-ghost-text {
+  color: var(--muted-foreground);
+  opacity: 0.6;
+  pointer-events: none;
+  user-select: none;
+}
diff --git a/apps/web/src/components/cloud-agent-next/ChatInput.tsx b/apps/web/src/components/cloud-agent-next/ChatInput.tsx
index 0b61ad4041..d4f167bc46 100644
--- a/apps/web/src/components/cloud-agent-next/ChatInput.tsx
+++ b/apps/web/src/components/cloud-agent-next/ChatInput.tsx
@@ -14,6 +14,7 @@ import { ModelCombobox, type ModelOption } from '@/components/shared/ModelCombob
 import { VariantCombobox } from '@/components/shared/VariantCombobox';
 import { MobileToolbarPopover } from './MobileToolbarPopover';
 import type { AgentMode } from './types';
+import { useChatGhostText } from './hooks/useChatGhostText';
 
 type ChatInputProps = {
   onSend: (message: string) => void;
@@ -44,6 +45,7 @@ type ChatInputProps = {
   showToolbar?: boolean;
   /** Pre-populate the textarea (e.g. to restore text after a failed send) */
   initialValue?: string;
+  enableChatAutocomplete?: boolean;
 };
 
 export function ChatInput({
@@ -64,12 +66,22 @@ export function ChatInput({
   availableVariants = [],
   showToolbar = false,
   initialValue,
+  enableChatAutocomplete = true,
 }: ChatInputProps) {
   const [value, setValue] = useState('');
   const [showAutocomplete, setShowAutocomplete] = useState(false);
   const [selectedIndex, setSelectedIndex] = useState(0);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
+  const {
+    ghostText,
+    handleKeyDown: handleGhostTextKeyDown,
+    handleInputChange: handleGhostTextInputChange,
+  } = useChatGhostText({
+    textAreaRef: textareaRef,
+    enableChatAutocomplete: enableChatAutocomplete && !disabled && !isStreaming,
+  });
+
   // Restore text into the textarea when initialValue changes (e.g. after a failed send).
   // Treats undefined as "no opinion" (skip), but empty string actively clears the field.
   useEffect(() => {
@@ -121,6 +133,7 @@ export function ChatInput({
 
     onSend(trimmed);
     setValue('');
+    handleGhostTextInputChange('');
     setShowAutocomplete(false);
 
     if (textareaRef.current) {
@@ -143,12 +156,14 @@ export function ChatInput({
       // Send immediately
       onSend(expansion);
       setValue('');
+      handleGhostTextInputChange('');
       if (textareaRef.current) {
         textareaRef.current.style.height = 'auto';
       }
     } else {
       // Just fill the input for editing
       setValue(expansion);
+      handleGhostTextInputChange(expansion);
       // Force height recalculation for expanded text
       if (textareaRef.current) {
         textareaRef.current.style.height = 'auto';
@@ -164,6 +179,10 @@ export function ChatInput({
     // Ignore keyboard events during IME composition (Chinese, Japanese, Korean input)
     if (e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229) return;
 
+    if (handleGhostTextKeyDown(e)) {
+      return;
+    }
+
     if (showAutocomplete && filteredCommands.length > 0) {
       switch (e.key) {
         case 'ArrowDown':
@@ -224,20 +243,37 @@ export function ChatInput({
         {/* Textarea with slash command autocomplete */}
         <Popover open={showAutocomplete} onOpenChange={handleOpenChange}>
           <PopoverAnchor asChild>
-            <textarea
-              ref={textareaRef}
-              value={value}
-              onChange={e => setValue(e.target.value)}
-              onKeyDown={handleKeyDown}
-              placeholder={placeholder}
-              disabled={disabled}
-              className="max-h-[200px] w-full resize-none overflow-y-auto border-0 bg-transparent p-4 pb-2 text-sm focus:ring-0 focus:outline-none"
-              rows={1}
-              role="combobox"
-              aria-expanded={showAutocomplete}
-              aria-autocomplete="list"
-              aria-controls="slash-command-list"
-            />
+            <div className="relative w-full">
+              <textarea
+                ref={textareaRef}
+                value={value}
+                onChange={e => {
+                  setValue(e.target.value);
+                  handleGhostTextInputChange(e.target.value);
+                }}
+                onKeyDown={handleKeyDown}
+                placeholder={placeholder}
+                disabled={disabled}
+                className="max-h-[200px] w-full resize-none overflow-y-auto border-0 bg-transparent p-4 pb-2 text-sm focus:ring-0 focus:outline-none"
+                rows={1}
+                role="combobox"
+                aria-expanded={showAutocomplete}
+                aria-autocomplete="list"
+                aria-controls="slash-command-list"
+              />
+              {/* Ghost text overlay */}
+              {ghostText && (
+                <div
+                  className="pointer-events-none absolute left-0 top-0 flex h-full w-full select-none items-start overflow-hidden p-4 pb-2"
+                  aria-hidden="true"
+                >
+                  <span className="invisible whitespace-pre-wrap break-words text-sm">{value}</span>
+                  <span className="chat-ghost-text whitespace-pre-wrap break-words text-sm">
+                    {ghostText}
+                  </span>
+                </div>
+              )}
+            </div>
           </PopoverAnchor>
           <PopoverContent
             className="w-[var(--radix-popover-trigger-width)] min-w-[min(300px,calc(100vw-2rem))] p-0"
diff --git a/apps/web/src/components/cloud-agent-next/hooks/useChatGhostText.ts b/apps/web/src/components/cloud-agent-next/hooks/useChatGhostText.ts
new file mode 100644
index 0000000000..766ec94185
--- /dev/null
+++ b/apps/web/src/components/cloud-agent-next/hooks/useChatGhostText.ts
@@ -0,0 +1,242 @@
+import {
+  useState,
+  useRef,
+  useCallback,
+  useEffect,
+  type KeyboardEvent as ReactKeyboardEvent,
+} from 'react';
+import { useRawTRPCClient } from '@/lib/trpc/utils';
+
+type UseChatGhostTextProps = {
+  textAreaRef: React.RefObject<HTMLTextAreaElement | null>;
+  enableChatAutocomplete: boolean;
+};
+
+// Generate a unique ID for each request to avoid race conditions
+function generateRequestId(): string {
+  return Math.random().toString(36).substring(2, 15);
+}
+
+// Insert text at cursor position in a textarea
+function insertTextAtCursor(textarea: HTMLTextAreaElement, text: string): void {
+  const { selectionStart, value } = textarea;
+  const newValue = value.slice(0, selectionStart) + text + value.slice(selectionStart);
+  textarea.value = newValue;
+  // Move cursor to end of inserted text
+  const newCursorPos = selectionStart + text.length;
+  textarea.setSelectionRange(newCursorPos, newCursorPos);
+  // Trigger input event so React sees the change
+  textarea.dispatchEvent(new Event('input', { bubbles: true }));
+}
+
+// Extract the next word from ghost text (for ArrowRight partial acceptance)
+function extractNextWord(text: string): { word: string; remainder: string } {
+  const match = text.match(/^(\s*\S+)/);
+  if (!match) {
+    return { word: text, remainder: '' };
+  }
+  const word = match[1];
+  const remainder = text.slice(word.length);
+  return { word, remainder };
+}
+
+let debugEnabled = false;
+if (typeof window !== 'undefined') {
+  debugEnabled = window.localStorage?.getItem('debug:cloud-agent:autocomplete') === 'true';
+}
+
+function debugCloudAgentAutocomplete(label: string, data?: unknown): void {
+  if (debugEnabled) {
+    console.log(`[useChatGhostText:${label}]`, data);
+  }
+}
+
+/**
+ * Hook that manages ghost text autocomplete for the cloud agent chat input.
+ * Provides debounced FIM completion suggestions and keyboard handlers for accepting them.
+ */
+export function useChatGhostText({ textAreaRef, enableChatAutocomplete }: UseChatGhostTextProps) {
+  const [ghostText, setGhostText] = useState('');
+  const completionDebounceRef = useRef<NodeJS.Timeout | null>(null);
+  const skipNextCompletionRef = useRef(false);
+  const completionRequestIdRef = useRef<string>('');
+  const trpcClient = useRawTRPCClient();
+
+  const requestCompletion = useCallback(
+    async ({ prefix, requestId }: { prefix: string; requestId: string }) => {
+      console.log('[useChatGhostText] requestCompletion called', {
+        prefixLength: prefix.length,
+        requestId,
+        currentRequestId: completionRequestIdRef.current,
+      });
+      debugCloudAgentAutocomplete('request', {
+        prefixLength: prefix.length,
+        requestId,
+      });
+
+      // Only process if this is still the latest request
+      if (requestId !== completionRequestIdRef.current) {
+        console.log('[useChatGhostText] stale request, ignoring', {
+          requestId,
+          currentRequestId: completionRequestIdRef.current,
+        });
+        debugCloudAgentAutocomplete('stale', { requestId });
+        return;
+      }
+
+      try {
+        const result = await trpcClient.cloudAgent.getFimAutocomplete.mutate({
+          prefix,
+          suffix: '',
+          requestId,
+        });
+
+        console.log('[useChatGhostText] got result', {
+          requestId,
+          currentRequestId: completionRequestIdRef.current,
+          suggestionLength: result.suggestion.length,
+          suggestionPreview: result.suggestion.slice(0, 50),
+        });
+        debugCloudAgentAutocomplete('result', {
+          requestId,
+          suggestionLength: result.suggestion.length,
+        });
+
+        // Only update ghost text if this is still the latest request
+        if (requestId === completionRequestIdRef.current) {
+          setGhostText(result.suggestion);
+        } else {
+          console.log('[useChatGhostText] result is stale, not updating ghost text', {
+            requestId,
+            currentRequestId: completionRequestIdRef.current,
+          });
+          debugCloudAgentAutocomplete('result-stale', { requestId });
+        }
+      } catch (error) {
+        debugCloudAgentAutocomplete('error', error);
+        // Silently ignore errors - just don't show ghost text
+        setGhostText('');
+      }
+    },
+    [trpcClient]
+  );
+
+  const clearGhostText = useCallback(() => {
+    setGhostText('');
+  }, []);
+
+  const handleKeyDown = useCallback(
+    (event: ReactKeyboardEvent<HTMLTextAreaElement>): boolean => {
+      const textArea = textAreaRef.current;
+      if (!textArea) {
+        return false;
+      }
+
+      const hasSelection = textArea.selectionStart !== textArea.selectionEnd;
+      const isCursorAtEnd = textArea.selectionStart === textArea.value.length;
+      const canAcceptCompletion = ghostText && !hasSelection && isCursorAtEnd;
+
+      // Tab: Accept full ghost text
+      if (event.key === 'Tab' && !event.shiftKey && canAcceptCompletion) {
+        debugCloudAgentAutocomplete('accept', { via: 'Tab', ghostText });
+        event.preventDefault();
+        skipNextCompletionRef.current = true;
+        insertTextAtCursor(textArea, ghostText);
+        setGhostText('');
+        return true;
+      }
+
+      // ArrowRight: Accept next word only
+      if (
+        event.key === 'ArrowRight' &&
+        !event.shiftKey &&
+        !event.ctrlKey &&
+        !event.metaKey &&
+        canAcceptCompletion
+      ) {
+        debugCloudAgentAutocomplete('accept', { via: 'ArrowRight', ghostText });
+        event.preventDefault();
+        skipNextCompletionRef.current = true;
+        const { word, remainder } = extractNextWord(ghostText);
+        insertTextAtCursor(textArea, word);
+        setGhostText(remainder);
+        return true;
+      }
+
+      // Escape: Clear ghost text
+      if (event.key === 'Escape' && ghostText) {
+        debugCloudAgentAutocomplete('dismiss', { via: 'Escape' });
+        event.preventDefault();
+        clearGhostText();
+        // Generate new request ID to cancel any pending requests
+        completionRequestIdRef.current = generateRequestId();
+        return true;
+      }
+
+      return false;
+    },
+    [ghostText, textAreaRef, clearGhostText]
+  );
+
+  const handleInputChange = useCallback(
+    (newValue: string) => {
+      if (!enableChatAutocomplete) {
+        setGhostText('');
+        return;
+      }
+
+      if (skipNextCompletionRef.current) {
+        skipNextCompletionRef.current = false;
+        setGhostText('');
+        return;
+      }
+
+      // Clear ghost text immediately when input changes
+      setGhostText('');
+
+      // Cancel any pending debounced request
+      if (completionDebounceRef.current) {
+        clearTimeout(completionDebounceRef.current);
+      }
+
+      // Don't request completion for empty/short input
+      if (newValue.trim().length < 5) {
+        completionRequestIdRef.current = '';
+        return;
+      }
+
+      // Debounce the completion request
+      const requestId = generateRequestId();
+      completionRequestIdRef.current = requestId;
+
+      completionDebounceRef.current = setTimeout(() => {
+        void requestCompletion({ prefix: newValue, requestId });
+      }, 400);
+    },
+    [enableChatAutocomplete, requestCompletion]
+  );
+
+  // Clean up debounce timer on unmount
+  useEffect(() => {
+    return () => {
+      if (completionDebounceRef.current) {
+        clearTimeout(completionDebounceRef.current);
+      }
+    };
+  }, []);
+
+  // Clear ghost text when autocomplete is disabled
+  useEffect(() => {
+    if (!enableChatAutocomplete) {
+      setGhostText('');
+      completionRequestIdRef.current = '';
+    }
+  }, [enableChatAutocomplete]);
+
+  return {
+    ghostText,
+    handleKeyDown,
+    handleInputChange,
+    clearGhostText,
+  };
+}
diff --git a/apps/web/src/lib/cloud-agent/chat-completion.ts b/apps/web/src/lib/cloud-agent/chat-completion.ts
new file mode 100644
index 0000000000..f676cfa1ed
--- /dev/null
+++ b/apps/web/src/lib/cloud-agent/chat-completion.ts
@@ -0,0 +1,131 @@
+import { APP_URL } from '@/lib/constants';
+
+// Version string for API requests - must be >= 4.69.1 to pass version check
+const FIM_COMPLETION_VERSION = '5.0.0';
+
+// Model to use for FIM completions - using Mistral's Codestral model
+const FIM_MODEL = 'mistralai/codestral-latest';
+
+// Maximum tokens for autocomplete suggestions
+const FIM_MAX_TOKENS = 100;
+
+type MistralFimResponse = {
+  id: string;
+  object: string;
+  model: string;
+  choices: Array<{
+    index: number;
+    text: string;
+    finish_reason: string;
+  }>;
+  usage: {
+    prompt_tokens: number;
+    completion_tokens: number;
+    total_tokens: number;
+  };
+};
+
+type GetFimCompletionInput = {
+  prefix: string;
+  suffix?: string;
+  authToken: string;
+};
+
+/**
+ * Get a FIM (fill-in-the-middle) completion suggestion for autocomplete in the cloud agent chat input.
+ * Uses Mistral's FIM endpoint for fast, context-aware completions.
+ */
+export async function getFimCompletion(input: GetFimCompletionInput): Promise<string> {
+  const { prefix, suffix, authToken } = input;
+
+  console.log('[getFimCompletion] called', {
+    prefixLength: prefix.length,
+    suffixLength: suffix?.length ?? 0,
+    prefixPreview: prefix.slice(-50),
+  });
+
+  // Don't try to complete very short text
+  if (prefix.length < 5) {
+    console.log('[getFimCompletion] prefix too short, returning empty');
+    return '';
+  }
+
+  const headers = new Headers({
+    'Content-Type': 'application/json',
+    Authorization: `Bearer ${authToken}`,
+    'X-KiloCode-Version': FIM_COMPLETION_VERSION,
+    'User-Agent': `Kilo-Code/${FIM_COMPLETION_VERSION}`,
+  });
+
+  let response: Response;
+  try {
+    response = await fetch(`${APP_URL}/api/fim/completions`, {
+      method: 'POST',
+      headers,
+      body: JSON.stringify({
+        model: FIM_MODEL,
+        prompt: prefix,
+        suffix: suffix || '',
+        max_tokens: FIM_MAX_TOKENS,
+        stream: false,
+      }),
+    });
+  } catch (error) {
+    console.error('[getFimCompletion] fetch failed', { error });
+    return '';
+  }
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    console.error('[getFimCompletion] API error:', {
+      status: response.status,
+      error: errorText.slice(0, 2000),
+    });
+    return '';
+  }
+
+  console.log('[getFimCompletion] API call succeeded');
+
+  let responseBody: MistralFimResponse;
+  try {
+    responseBody = await response.json();
+  } catch (error) {
+    console.error('[getFimCompletion] failed to parse response', { error });
+    return '';
+  }
+
+  const choice = responseBody.choices?.[0];
+
+  if (!choice) {
+    console.log('[getFimCompletion] no choice in response');
+    return '';
+  }
+
+  const suggestion = choice.text || '';
+  console.log('[getFimCompletion] raw suggestion', { suggestion: suggestion.slice(0, 100) });
+
+  // Clean up the suggestion
+  const cleaned = cleanSuggestion(suggestion);
+  console.log('[getFimCompletion] cleaned suggestion', { cleaned: cleaned.slice(0, 100) });
+  return cleaned;
+}
+
+/**
+ * Clean the suggestion by removing unwanted patterns
+ */
+function cleanSuggestion(suggestion: string): string {
+  let cleaned = suggestion;
+
+  // Only take the first line/sentence for brevity
+  const firstNewline = cleaned.indexOf('\n');
+  if (firstNewline !== -1) {
+    cleaned = cleaned.substring(0, firstNewline);
+  }
+
+  // Filter out suggestions that are just punctuation or whitespace
+  if (cleaned.length < 2 || /^[\s\p{P}]+$/u.test(cleaned)) {
+    return '';
+  }
+
+  return cleaned;
+}
diff --git a/apps/web/src/lib/llm-proxy-helpers.ts b/apps/web/src/lib/llm-proxy-helpers.ts
index 743158afac..29b3bceaaa 100644
--- a/apps/web/src/lib/llm-proxy-helpers.ts
+++ b/apps/web/src/lib/llm-proxy-helpers.ts
@@ -788,20 +788,35 @@ export async function sendProxiedChatCompletion<T>(
     headers.set(FEATURE_HEADER, request.feature);
   }
 
-  const response = await fetch(`${APP_URL}/api/openrouter/chat/completions`, {
-    method: 'POST',
-    headers,
-    body: JSON.stringify({
-      ...request.body,
-      stream: false,
-    }),
-  });
+  let response: Response;
+  try {
+    response = await fetch(`${APP_URL}/api/openrouter/chat/completions`, {
+      method: 'POST',
+      headers,
+      body: JSON.stringify({
+        ...request.body,
+        stream: false,
+      }),
+    });
+  } catch (error) {
+    console.error('[sendProxiedChatCompletion] fetch failed', {
+      error,
+      appUrl: APP_URL,
+      model: request.body.model,
+    });
+    return { ok: false, status: 0, error: String(error) };
+  }
 
   if (!response.ok) {
     const errorText = await response.text();
     return { ok: false, status: response.status, error: errorText };
   }
 
-  const data: T = await response.json();
-  return { ok: true, data };
+  try {
+    const data: T = await response.json();
+    return { ok: true, data };
+  } catch (error) {
+    console.error('[sendProxiedChatCompletion] failed to parse json', { error });
+    return { ok: false, status: response.status, error: String(error) };
+  }
 }
diff --git a/apps/web/src/routers/cloud-agent-router.ts b/apps/web/src/routers/cloud-agent-router.ts
index 5f9aa1c627..9267399591 100644
--- a/apps/web/src/routers/cloud-agent-router.ts
+++ b/apps/web/src/routers/cloud-agent-router.ts
@@ -34,8 +34,11 @@ import {
   basePrepareLegacySessionSchema,
   basePrepareLegacySessionOutputSchema,
   isPreparedSessionInput,
+  fimAutocompleteSchema,
 } from './cloud-agent-schemas';
 import { getBalanceForUser } from '@/lib/user.balance';
+import { getFimCompletion } from '@/lib/cloud-agent/chat-completion';
+import { generateApiToken } from '@/lib/tokens';
 import * as z from 'zod';
 import { db } from '@/lib/drizzle';
 import { cliSessions } from '@kilocode/db/schema';
@@ -469,4 +472,29 @@ export const cloudAgentRouter = createTRPCRouter({
         throw error; // unreachable
       }
     }),
+
+  /**
+   * Get FIM autocomplete suggestion for the chat input using prefix/suffix
+   */
+  getFimAutocomplete: baseProcedure
+    .input(fimAutocompleteSchema)
+    .mutation(async ({ ctx, input }) => {
+      // Use internalApiUse to bypass abuse heuristics for autocomplete
+      const authToken = generateApiToken(ctx.user, { internalApiUse: true });
+
+      try {
+        const suggestion = await getFimCompletion({
+          prefix: input.prefix,
+          suffix: input.suffix,
+          authToken,
+        });
+        return { suggestion };
+      } catch (error) {
+        console.error('[cloudAgent.getFimAutocomplete] failed', {
+          error,
+          prefixLength: input.prefix.length,
+        });
+        return { suggestion: '' };
+      }
+    }),
 });
diff --git a/apps/web/src/routers/cloud-agent-schemas.ts b/apps/web/src/routers/cloud-agent-schemas.ts
index e0e3caed15..c02cff3fcf 100644
--- a/apps/web/src/routers/cloud-agent-schemas.ts
+++ b/apps/web/src/routers/cloud-agent-schemas.ts
@@ -259,3 +259,10 @@ export function isPreparedSessionInput(
 
   return hasCloudAgentSessionId && !hasLegacyFields;
 }
+
+// Schema for FIM autocomplete requests (prefix/suffix based)
+export const fimAutocompleteSchema = z.object({
+  prefix: z.string().min(1).max(2000),
+  suffix: z.string().max(2000).optional(),
+  requestId: z.string().min(1).max(20),
+});