feat(runner): adds sql query runner ai tab auto completion

apps/api/package.json

@@ -39,6 +39,7 @@
     "ioredis": "catalog:",
     "ioredis-mock": "catalog:",
     "loops": "catalog:",
+    "monacopilot": "catalog:",
     "nanoid": "catalog:",
     "pg": "catalog:",
     "postgres": "catalog:",

apps/api/src/orpc/routers/ai/code-completion.ts

@@ -0,0 +1,79 @@
+import { google } from '@ai-sdk/google'
+import { generateText } from 'ai'
+import { z } from 'zod'
+import { authMiddleware, orpc } from '~/orpc'
+
+export const codeCompletion = orpc
+  .use(authMiddleware)
+  .input(z.object({
+    context: z.string(),
+    suffix: z.string().optional(),
+    instruction: z.string().optional(),
+    fileContent: z.string(),
+    databaseType: z.enum(['postgres', 'mysql', 'clickhouse', 'mssql']),
+    schemaContext: z.string().optional(),
+  }))
+  .output(z.object({
+    completion: z.string(),
+  }))
+  .handler(async ({ input }) => {
+    try {
+      const databaseType = input.databaseType || 'postgres'
+      const schemaContext = input.schemaContext || ''
+
+      const enhancedPrompt = `You are an expert SQL code completion assistant.
+
+Database Type: ${databaseType}
+
+Database Schema:
+${schemaContext}
+
+Current Code BEFORE Cursor:
+${input.context || ''}
+
+Current Code AFTER Cursor:
+${input.suffix || ''}
+
+Full File Content:
+${input.fileContent || ''}
+
+Task: ${input.instruction || 'Complete the SQL query'}
+
+General Safety Rules:
+- Prioritize SELECT queries (read-only) when the intent is ambiguous.
+- If the user explicitly starts writing a data modification query (INSERT, UPDATE, etc.), complete it validly.
+- Do NOT generate destructive schema changes (DROP TABLE, TRUNCATE, ALTER) unless explicitly requested in a generic comment.
+
+Specific Instructions:
+- If the context is empty (start of file), return an empty string.
+- For UUID/CUID: Use generation functions (e.g. gen_random_uuid()) instead of hardcoded strings if possible.
+- For Foreign Keys: Do NOT plain guess IDs. Use subqueries (e.g. "(SELECT id FROM users ... LIMIT 1)") to make the query robust without needing external tools.
+- Look at "Current Code AFTER Cursor". Do NOT generate code that is already present there (like closing parenthesis or semicolons). Make your completion join smoothly with the suffix.
+- Intelligent Spacing: If the code before the cursor is a keyword or identifier (e.g., 'SELECT', 'FROM', 'tableName') and your completion starts with a keyword/identifier, ensure there is a space at the beginning of your completion.
+
+Generate ONLY the completion text that should be inserted at the cursor position.
+- Do NOT repeat the code that is already present before the cursor.
+- Do NOT wrap in markdown code blocks.
+- If no completion is needed, return an empty string.`
+
+      const result = await generateText({
+        model: google('gemma-3-27b-it'),
+        prompt: enhancedPrompt,
+      })
+
+      let cleanText = result.text.trim()
+      if (cleanText.startsWith('```')) {
+        cleanText = cleanText.replace(/^```\w*\s*/, '').replace(/\s*```$/, '')
+      }
+
+      return {
+        completion: cleanText,
+      }
+    }
+    catch (error) {
+      console.error('Error in completion handler:', error instanceof Error ? error.message : 'Unknown error')
+      return {
+        completion: '',
+      }
+    }
+  })

apps/api/src/orpc/routers/ai/index.ts

@@ -1,4 +1,5 @@
 import { ask } from './ask'
+import { codeCompletion } from './code-completion'
 import { enhancePrompt } from './enhance-prompt'
 import { filters } from './filters'
 import { fixSQL } from './fix-sql'
@@ -8,6 +9,7 @@ import { updateSQL } from './update-sql'
 
 export const ai = {
   ask,
+  codeCompletion,
   enhancePrompt,
   filters,
   generateTitle,

apps/desktop/package.json

@@ -31,6 +31,7 @@
     "@clickhouse/client": "catalog:",
     "@todesktop/runtime": "catalog:",
     "electron-store": "catalog:",
+    "monacopilot": "catalog:",
     "mssql": "catalog:",
     "mysql2": "catalog:",
     "pg": "catalog:"

apps/desktop/src/entities/database/utils/monaco.ts

@@ -169,3 +169,50 @@ export function databaseCompletionService(database: typeof databases.$inferSelec
     return [...items, ...keywordItems]
   }
 }
+
+export async function databaseAICompletionContext(database: typeof databases.$inferSelect) {
+  queryClient.prefetchQuery(databaseTablesAndSchemasQuery({ database }))
+  queryClient.prefetchQuery(databaseEnumsQuery({ database }))
+
+  const buildSchemaContext = async (): Promise<string> => {
+    const [tablesAndSchemas, enums] = await Promise.all([
+      queryClient.ensureQueryData(databaseTablesAndSchemasQuery({ database })),
+      queryClient.ensureQueryData(databaseEnumsQuery({ database })),
+    ])
+
+    let context = ''
+
+    for (const schema of tablesAndSchemas.schemas) {
+      context += `\nSchema: ${schema.name}\n`
+
+      for (const tableName of schema.tables) {
+        const columns = await queryClient.ensureQueryData(
+          databaseTableColumnsQuery({
+            database,
+            schema: schema.name,
+            table: tableName,
+          }),
+        )
+
+        context += `  Table: ${tableName}\n`
+        columns.forEach((col) => {
+          context += `    - ${col.id}: ${col.type}${col.isNullable ? ' (nullable)' : ' (not null)'}\n`
+        })
+      }
+    }
+
+    if (enums?.length > 0) {
+      context += '\nEnums:\n'
+      enums.forEach((enumItem) => {
+        context += `  ${enumItem.schema}.${enumItem.name}: [${enumItem.values.join(', ')}]\n`
+      })
+    }
+
+    return context
+  }
+
+  return {
+    databaseType: database.type,
+    buildSchemaContext,
+  }
+}

apps/desktop/src/routes/(protected)/_protected/database/$id/sql/-components/runner/ai-tab-completion.tsx

@@ -0,0 +1,175 @@
+import type { DatabaseType } from '@conar/shared/enums/database-type'
+import type { editor } from 'monaco-editor'
+import type { CompletionRegistration } from 'monacopilot'
+import type { RefObject } from 'react'
+import * as monaco from 'monaco-editor'
+import { LanguageIdEnum } from 'monaco-sql-languages'
+import { registerCompletion } from 'monacopilot'
+import { useEffect, useRef } from 'react'
+import { databaseAICompletionContext } from '~/entities/database/utils/monaco'
+import { orpc } from '~/lib/orpc'
+import { Route } from '../..'
+
+export const dialectsMap = {
+  postgres: LanguageIdEnum.PG,
+  mysql: LanguageIdEnum.MYSQL,
+  mssql: LanguageIdEnum.PG,
+  clickhouse: LanguageIdEnum.MYSQL,
+} satisfies Record<DatabaseType, LanguageIdEnum>
+
+export function useRunnerEditorAiTabCompletion(monacoRef:
+RefObject<editor.IStandaloneCodeEditor | null>) {
+  const { database } = Route.useRouteContext()
+
+  const completionRef = useRef<CompletionRegistration | null>(null)
+  const completionCacheRef = useRef<{
+    prefix: string
+    completion: string
+  } | null>(null)
+
+  useEffect(() => {
+    if (!monacoRef.current)
+      return
+
+    let debounceTimer: ReturnType<typeof setTimeout> | null = null
+    let pendingResolve: ((value: { completion: string }) => void) | null = null
+
+    let isMounted = true
+
+    const setupCompletion = async () => {
+      if (!isMounted)
+        return
+
+      const aiConfig = await databaseAICompletionContext(database)
+      if (!isMounted)
+        return
+
+      const schemaContext = await aiConfig.buildSchemaContext()
+
+      if (!isMounted)
+        return
+
+      if (completionRef.current) {
+        completionRef.current.deregister()
+      }
+
+      if (!monacoRef.current)
+        return
+
+      completionRef.current = registerCompletion(
+        monaco,
+        monacoRef.current,
+        {
+          trigger: 'onTyping',
+          language: dialectsMap[database.type],
+          requestHandler: async () => {
+            const model = monacoRef.current?.getModel()
+            const position = monacoRef.current?.getPosition()
+
+            if (model && position && completionCacheRef.current) {
+              const offset = model.getOffsetAt(position)
+              const textFull = model.getValue()
+              const textBefore = textFull.substring(0, offset)
+              const cached = completionCacheRef.current
+
+              if (textBefore.startsWith(cached.prefix)) {
+                const addedText = textBefore.slice(cached.prefix.length)
+
+                if (cached.completion.startsWith(addedText)) {
+                  const remainingCompletion = cached.completion.slice(addedText.length)
+
+                  if (remainingCompletion.length > 0) {
+                    return { completion: remainingCompletion }
+                  }
+
+                  return { completion: '' }
+                }
+              }
+            }
+
+            if (debounceTimer) {
+              clearTimeout(debounceTimer)
+            }
+            if (pendingResolve) {
+              pendingResolve({ completion: '' })
+              pendingResolve = null
+            }
+
+            return new Promise((resolve) => {
+              pendingResolve = resolve
+              debounceTimer = setTimeout(async () => {
+                if (!isMounted)
+                  return
+
+                try {
+                  const model = monacoRef.current?.getModel()
+                  const position = monacoRef.current?.getPosition()
+
+                  if (!model || !position) {
+                    resolve({ completion: '' })
+                    return
+                  }
+
+                  const fileContent = model.getValue()
+                  const offset = model.getOffsetAt(position)
+                  const context = fileContent.substring(0, offset)
+                  const suffix = fileContent.substring(offset)
+
+                  if (context.trim().length < 2) {
+                    resolve({ completion: '' })
+                    return
+                  }
+
+                  const transformedBody = {
+                    context,
+                    suffix,
+                    instruction: 'Complete the SQL query with secure and safe optimised version',
+                    fileContent,
+                    databaseType: aiConfig.databaseType,
+                    schemaContext,
+                  }
+
+                  const result = await orpc.ai.codeCompletion(transformedBody)
+
+                  if (pendingResolve === resolve) {
+                    completionCacheRef.current = {
+                      prefix: context,
+                      completion: result.completion,
+                    }
+
+                    resolve(result)
+                  }
+                  else {
+                    resolve({ completion: '' })
+                  }
+                }
+                catch (error) {
+                  console.error(error)
+                  resolve({ completion: '' })
+                }
+                finally {
+                  if (pendingResolve === resolve)
+                    pendingResolve = null
+                }
+              }, 500)
+            })
+          },
+        },
+      )
+    }
+
+    setupCompletion()
+
+    return () => {
+      isMounted = false
+      if (debounceTimer)
+        clearTimeout(debounceTimer)
+      if (pendingResolve)
+        pendingResolve({ completion: '' })
+      if (completionRef.current) {
+        completionRef.current.deregister()
+        completionRef.current = null
+      }
+    }
+  }, [database])
+}

apps/desktop/src/routes/(protected)/_protected/database/$id/sql/-components/runner/runner-editor.tsx

@@ -1,26 +1,19 @@
-import type { DatabaseType } from '@conar/shared/enums/database-type'
 import type { editor, Position } from 'monaco-editor'
 import type { RefObject } from 'react'
 import { useStore } from '@tanstack/react-store'
 import { KeyCode, KeyMod } from 'monaco-editor'
-import { LanguageIdEnum, setupLanguageFeatures } from 'monaco-sql-languages'
+import { setupLanguageFeatures } from 'monaco-sql-languages'
 import { useEffect, useEffectEvent, useRef } from 'react'
 import { Monaco } from '~/components/monaco'
 import { databaseStore } from '~/entities/database'
 import { databaseCompletionService } from '~/entities/database/utils/monaco'
 import { Route } from '../..'
 import { runnerHooks } from '../../-page'
+import { dialectsMap, useRunnerEditorAiTabCompletion } from './ai-tab-completion'
 import { useRunnerContext } from './runner-context'
 import { useRunnerEditorAIZones } from './runner-editor-ai-zones'
 import { useRunnerEditorQueryZones } from './runner-editor-query-zones'
 
-const dialectsMap = {
-  postgres: LanguageIdEnum.PG,
-  mysql: LanguageIdEnum.MYSQL,
-  mssql: LanguageIdEnum.PG,
-  clickhouse: LanguageIdEnum.MYSQL,
-} satisfies Record<DatabaseType, LanguageIdEnum>
-
 function useRunnerEditorHooks(monacoRef: RefObject<editor.IStandaloneCodeEditor | null>) {
   const { database } = Route.useRouteContext()
   const store = databaseStore(database.id)
@@ -121,6 +114,7 @@ export function RunnerEditor() {
   const sql = useStore(store, state => state.sql)
   const editorQueries = useStore(store, state => state.editorQueries)
   const monacoRef = useRef<editor.IStandaloneCodeEditor>(null)
+
   const run = useRunnerContext(({ run }) => run)
 
   const runEvent = useEffectEvent(run)
@@ -130,6 +124,8 @@ export function RunnerEditor() {
   useRunnerEditorQueryZones(monacoRef)
   useRunnerEditorAIZones(monacoRef)
 
+  useRunnerEditorAiTabCompletion(monacoRef)
+
   useEffect(() => {
     setupLanguageFeatures(dialectsMap[database.type], {
       completionItems: {