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

apps/api/package.json

@@ -34,6 +34,7 @@
     "date-fns": "catalog:",
     "drizzle-arktype": "catalog:",
     "drizzle-orm": "catalog:",
+    "monacopilot": "^1.2.9",
     "hono": "catalog:",
     "ioredis": "catalog:",
     "ioredis-mock": "catalog:",

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

@@ -0,0 +1,80 @@
+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']),
+    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.
+
+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('gemini-2.0-flash'),
+        prompt: enhancedPrompt,
+      })
+
+      console.log('Generated completion (raw):', result.text.substring(0, 100))
+
+      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

@@ -25,6 +25,7 @@
     "drizzle:generate-custom": "drizzle-kit generate --custom && bun run ./scripts/compile-migrations.ts"
   },
   "dependencies": {
+    "monacopilot": "^1.2.9",
     "@clickhouse/client": "catalog:",
     "electron-store": "catalog:",
     "electron-updater": "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/runner-editor.tsx

@@ -1,13 +1,18 @@
 import type { DatabaseType } from '@conar/shared/enums/database-type'
 import type { editor, Position } from 'monaco-editor'
+import type { CompletionRegistration } from 'monacopilot'
 import type { RefObject } from 'react'
 import { useStore } from '@tanstack/react-store'
+import * as monaco from 'monaco-editor'
 import { KeyCode, KeyMod } from 'monaco-editor'
 import { LanguageIdEnum, setupLanguageFeatures } from 'monaco-sql-languages'
+import { registerCompletion } from 'monacopilot'
 import { useEffect, useEffectEvent, useRef } from 'react'
 import { Monaco } from '~/components/monaco'
 import { databaseStore } from '~/entities/database'
-import { databaseCompletionService } from '~/entities/database/utils/monaco'
+import { databaseAICompletionContext, databaseCompletionService } from '~/entities/database/utils/monaco'
+import { orpc } from '~/lib/orpc'
+import { getApiUrl } from '~/lib/utils'
 import { Route } from '../..'
 import { runnerHooks } from '../../-page'
 import { useRunnerContext } from './runner-context'
@@ -120,6 +125,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 completionRef = useRef<CompletionRegistration | null>(null)
   const run = useRunnerContext(({ run }) => run)
 
   const runEvent = useEffectEvent(run)
@@ -138,6 +144,105 @@ export function RunnerEditor() {
     })
   }, [database])
 
+  useEffect(() => {
+    if (!monacoRef.current)
+      return
+
+    let debounceTimer: ReturnType<typeof setTimeout> | null = null
+    let pendingResolve: ((value: { completion: string }) => void) | null = null
+
+    const setupCompletion = async () => {
+      const aiConfig = await databaseAICompletionContext(database)
+      const schemaContext = await aiConfig.buildSchemaContext()
+
+      if (completionRef.current) {
+        completionRef.current.deregister()
+      }
+
+      completionRef.current = registerCompletion(
+        monaco,
+        monacoRef.current!,
+        {
+          trigger: 'onTyping',
+          endpoint: `${getApiUrl()}/rpc/ai/codeCompletion`,
+          language: dialectsMap[database.type],
+          requestHandler: async () => {
+            if (debounceTimer) {
+              clearTimeout(debounceTimer)
+            }
+            if (pendingResolve) {
+              pendingResolve({ completion: '' })
+              pendingResolve = null
+            }
+
+            return new Promise((resolve) => {
+              pendingResolve = resolve
+
+              debounceTimer = setTimeout(async () => {
+                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)
+
+                  const transformedBody = {
+                    context,
+                    suffix,
+                    instruction: 'Complete the SQL query with secure and safe optimised version',
+                    fileContent,
+                    databaseType: aiConfig.databaseType,
+                    schemaContext,
+                  }
+
+                  console.log('Sending completion request...')
+
+                  const result = await orpc.ai.codeCompletion(transformedBody)
+
+                  if (pendingResolve === resolve) {
+                    console.log('Received response, updating editor:', result)
+                    resolve(result)
+                  }
+                  else {
+                    console.log('Received response BUT ignored (stale):', result)
+                  }
+                }
+                catch (error) {
+                  console.error('Completion error:', error)
+                  resolve({ completion: '' })
+                }
+                finally {
+                  if (pendingResolve === resolve) {
+                    pendingResolve = null
+                  }
+                }
+              }, 800)
+            })
+          },
+        },
+      )
+    }
+
+    setupCompletion()
+
+    return () => {
+      if (debounceTimer) {
+        clearTimeout(debounceTimer)
+      }
+      if (completionRef.current) {
+        completionRef.current.deregister()
+        completionRef.current = null
+      }
+    }
+  }, [database])
+
   const getEditorQueriesEvent = useEffectEvent((position: Position) => {
     return editorQueries.find(query =>
       position.lineNumber >= query.startLineNumber