From 1950522a188d6c150b1bd019fabc97be3041f19e Mon Sep 17 00:00:00 2001
From: Mark IJbema <mark@kilocode.ai>
Date: Wed, 4 Feb 2026 10:23:33 +0100
Subject: [PATCH] Cloud Agent: prompt autocomplete (ghost text)

Implements ghost-text prompt autocomplete for the Cloud Agent chat input.

- Adds cloudAgent.getChatCompletion tRPC mutation
- Adds client-side ghost text hook and overlay rendering in ChatInput
- Adds minimal CSS for ghost text styling
- Improves error handling in llm-proxy-helpers

Accept suggestion: Tab (all), ArrowRight (next word), Escape clears.
---
 src/app/globals.css                           |   8 +
 src/components/cloud-agent/ChatInput.tsx      |  66 ++++-
 .../cloud-agent/hooks/useChatGhostText.ts     | 259 ++++++++++++++++++
 src/lib/cloud-agent/chat-completion.ts        | 131 +++++++++
 src/lib/llm-proxy-helpers.ts                  |  35 ++-
 src/routers/cloud-agent-router.ts             |  27 ++
 src/routers/cloud-agent-schemas.ts            |   7 +
 7 files changed, 509 insertions(+), 24 deletions(-)
 create mode 100644 src/components/cloud-agent/hooks/useChatGhostText.ts
 create mode 100644 src/lib/cloud-agent/chat-completion.ts

diff --git a/src/app/globals.css b/src/app/globals.css
index c4fb61128..4b3864604 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -182,3 +182,11 @@
     animation: pulse-glow 0.6s ease-out;
   }
 }
+
+/* Ghost text for chat autocomplete */
+.chat-ghost-text {
+  color: var(--muted-foreground);
+  opacity: 0.6;
+  pointer-events: none;
+  user-select: none;
+}
diff --git a/src/components/cloud-agent/ChatInput.tsx b/src/components/cloud-agent/ChatInput.tsx
index 1d3ebdb30..7d5a452b8 100644
--- a/src/components/cloud-agent/ChatInput.tsx
+++ b/src/components/cloud-agent/ChatInput.tsx
@@ -13,6 +13,7 @@ import { BrowseCommandsDialog } from './BrowseCommandsDialog';
 import { ModeCombobox } from '@/components/shared/ModeCombobox';
 import { ModelCombobox, type ModelOption } from '@/components/shared/ModelCombobox';
 import type { AgentMode } from './types';
+import { useChatGhostText } from './hooks/useChatGhostText';
 
 type ChatInputProps = {
   onSend: (message: string) => void;
@@ -35,6 +36,7 @@ type ChatInputProps = {
   onModelChange?: (model: string) => void;
   /** Whether to show the toolbar (hide when no active session) */
   showToolbar?: boolean;
+  enableChatAutocomplete?: boolean;
 };
 
 export function ChatInput({
@@ -51,12 +53,22 @@ export function ChatInput({
   onModeChange,
   onModelChange,
   showToolbar = false,
+  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,
+  });
+
   // Filter commands based on current input
   const filteredCommands = useMemo(() => {
     if (!slashCommands || slashCommands.length === 0) return [];
@@ -99,6 +111,7 @@ export function ChatInput({
 
     onSend(trimmed);
     setValue('');
+    handleGhostTextInputChange('');
     setShowAutocomplete(false);
 
     if (textareaRef.current) {
@@ -121,12 +134,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';
@@ -139,6 +154,10 @@ export function ChatInput({
   };
 
   const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (handleGhostTextKeyDown(e)) {
+      return;
+    }
+
     if (showAutocomplete && filteredCommands.length > 0) {
       switch (e.key) {
         case 'ArrowDown':
@@ -213,20 +232,39 @@ export function ChatInput({
       <div className="flex w-full max-w-full flex-col items-stretch gap-2 md:flex-row md:flex-wrap md:items-start md:gap-3">
         <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] min-h-[56px] w-full min-w-0 resize-y md:min-h-[60px] md:flex-1"
-              rows={1}
-              role="combobox"
-              aria-expanded={showAutocomplete}
-              aria-autocomplete="list"
-              aria-controls="slash-command-list"
-            />
+            <div className="relative w-full min-w-0 md:flex-1">
+              <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] min-h-[56px] w-full resize-y md:min-h-[60px]"
+                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 px-3 py-2"
+                  aria-hidden="true"
+                >
+                  <span className="invisible whitespace-pre-wrap break-words">
+                    {value}
+                  </span>
+                  <span className="chat-ghost-text whitespace-pre-wrap break-words">
+                    {ghostText}
+                  </span>
+                </div>
+              )}
+            </div>
           </PopoverAnchor>
           <PopoverContent
             className="w-[var(--radix-popover-trigger-width)] min-w-[300px] p-0"
diff --git a/src/components/cloud-agent/hooks/useChatGhostText.ts b/src/components/cloud-agent/hooks/useChatGhostText.ts
new file mode 100644
index 000000000..aa52b1076
--- /dev/null
+++ b/src/components/cloud-agent/hooks/useChatGhostText.ts
@@ -0,0 +1,259 @@
+import { useState, useRef, useCallback, useEffect, type KeyboardEvent as ReactKeyboardEvent } from 'react';
+import { trpc } from '@/lib/trpc.client';
+
+type UseChatGhostTextProps = {
+  textAreaRef: React.RefObject<HTMLTextAreaElement>;
+  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 = trpc.useUtils();
+
+  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
+      ) {
+        const { word, remainder } = extractNextWord(ghostText);
+        debugCloudAgentAutocomplete('accept', {
+          via: 'ArrowRight',
+          word,
+          remainderPreview: remainder.slice(0, 120),
+        });
+        event.preventDefault();
+        skipNextCompletionRef.current = true;
+        insertTextAtCursor(textArea, word);
+        setGhostText(remainder);
+        return true;
+      }
+
+      // Escape: Clear ghost text
+      if (event.key === 'Escape' && ghostText) {
+        debugCloudAgentAutocomplete('clear', { via: 'Escape' });
+        setGhostText('');
+      }
+      return false;
+    },
+    [ghostText, textAreaRef]
+  );
+
+  const handleInputChange = useCallback(
+    (newValue: string) => {
+      console.log('[useChatGhostText] handleInputChange called', {
+        enableChatAutocomplete,
+        newValueLength: newValue.length,
+      });
+      debugCloudAgentAutocomplete('input-change', {
+        enableChatAutocomplete,
+        newValueLength: newValue.length,
+        startsWithSlash: newValue.startsWith('/'),
+        includesAt: newValue.includes('@'),
+        skipNext: skipNextCompletionRef.current,
+      });
+
+      // Clear any existing ghost text when typing
+      setGhostText('');
+
+      // Clear any pending completion request
+      if (completionDebounceRef.current) {
+        clearTimeout(completionDebounceRef.current);
+      }
+
+      // Skip completion request if we just accepted a suggestion (Tab) or undid
+      if (skipNextCompletionRef.current) {
+        console.log('[useChatGhostText] skipping - skipNextCompletionRef is true');
+        skipNextCompletionRef.current = false;
+        // Don't request a new completion - wait for user to type more
+      } else if (
+        enableChatAutocomplete &&
+        newValue.length >= 5 &&
+        !newValue.startsWith('/') &&
+        !newValue.includes('@')
+      ) {
+        // Request new completion after debounce (only if feature is enabled)
+        const requestId = generateRequestId();
+        completionRequestIdRef.current = requestId;
+
+        console.log('[useChatGhostText] scheduling completion request', {
+          requestId,
+          debounceMs: 300,
+          textLength: newValue.length,
+        });
+        debugCloudAgentAutocomplete('schedule', {
+          requestId,
+          debounceMs: 300,
+        });
+
+        completionDebounceRef.current = setTimeout(() => {
+          console.log('[useChatGhostText] debounce fired, calling requestCompletion', {
+            requestId,
+          });
+          void requestCompletion({
+            prefix: newValue,
+            requestId,
+          });
+        }, 300); // 300ms debounce
+      } else {
+        console.log('[useChatGhostText] not scheduling', {
+          enableChatAutocomplete,
+          length: newValue.length,
+          startsWithSlash: newValue.startsWith('/'),
+          includesAt: newValue.includes('@'),
+        });
+        debugCloudAgentAutocomplete('no-schedule', {
+          reason: enableChatAutocomplete ? 'guards-not-met' : 'disabled',
+        });
+      }
+    },
+    [enableChatAutocomplete, requestCompletion]
+  );
+
+  useEffect(() => {
+    return () => {
+      if (completionDebounceRef.current) {
+        clearTimeout(completionDebounceRef.current);
+      }
+    };
+  }, []);
+
+  return {
+    ghostText,
+    handleKeyDown,
+    handleInputChange,
+    clearGhostText,
+  };
+}
diff --git a/src/lib/cloud-agent/chat-completion.ts b/src/lib/cloud-agent/chat-completion.ts
new file mode 100644
index 000000000..f676cfa1e
--- /dev/null
+++ b/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/src/lib/llm-proxy-helpers.ts b/src/lib/llm-proxy-helpers.ts
index 8c0ce6905..e98459461 100644
--- a/src/lib/llm-proxy-helpers.ts
+++ b/src/lib/llm-proxy-helpers.ts
@@ -567,20 +567,35 @@ export async function sendProxiedChatCompletion<T>(
     headers.set('X-KiloCode-OrganizationId', request.organizationId);
   }
 
-  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/src/routers/cloud-agent-router.ts b/src/routers/cloud-agent-router.ts
index 7c11fcd10..2b051d8a6 100644
--- a/src/routers/cloud-agent-router.ts
+++ b/src/routers/cloud-agent-router.ts
@@ -34,8 +34,10 @@ import {
   basePrepareLegacySessionSchema,
   basePrepareLegacySessionOutputSchema,
   isPreparedSessionInput,
+  fimAutocompleteSchema,
 } from './cloud-agent-schemas';
 import { getBalanceForUser } from '@/lib/user.balance';
+import { getFimCompletion } from '@/lib/cloud-agent/chat-completion';
 import * as z from 'zod';
 import { db } from '@/lib/drizzle';
 import { cliSessions } from '@/db/schema';
@@ -466,4 +468,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/src/routers/cloud-agent-schemas.ts b/src/routers/cloud-agent-schemas.ts
index 06a8ffbbb..bdb6dd93a 100644
--- a/src/routers/cloud-agent-schemas.ts
+++ b/src/routers/cloud-agent-schemas.ts
@@ -239,3 +239,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),
+});