- {isLoading ? (
-
-
-
- ) : (
- <>
- {diff.isDiffOpen &&
}
-
-
- )}
+
+ )
+}
+
+/** The top (editor) resizable panel: loading state, diff view, and main editor. */
+export const SQLEditorEditorPanel = () => {
+ const { id, isLoading } = useSqlEditorSnippet()
+ const { diff } = useSqlEditorAssistant()
+
+ if (isLoading) {
+ return
+ }
+
+ return (
+
+
+
+ {diff.isDiffOpen && }
+
+
)
}
diff --git a/apps/studio/components/interfaces/SQLEditor/useSqlEditorAi.test.tsx b/apps/studio/components/interfaces/SQLEditor/useSqlEditorAi.test.tsx
index 244f4fc4431..60f2a399f3c 100644
--- a/apps/studio/components/interfaces/SQLEditor/useSqlEditorAi.test.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/useSqlEditorAi.test.tsx
@@ -1,13 +1,17 @@
import { act, waitFor } from '@testing-library/react'
+import { http, HttpResponse } from 'msw'
import { afterEach, beforeEach, describe, expect, it } from 'vitest'
import { useSqlEditorDiff, useSqlEditorPrompt } from './hooks'
+import type { SqlSnippetSource } from './querySource'
import { DiffType } from './SQLEditor.types'
import { useSqlEditorAi } from './useSqlEditorAi'
import { SIDEBAR_KEYS } from '@/components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
+import { API_URL } from '@/lib/constants'
import { sidebarManagerState } from '@/state/sidebar-manager-state'
import { sqlEditorDiffRequestState } from '@/state/sql-editor/sql-editor-diff-request'
import { sqlEditorSessionState } from '@/state/sql-editor/sql-editor-session-state'
+import { mswServer } from '@/tests/lib/msw'
import {
createInMemoryEditor,
renderSqlEditorHook,
@@ -18,15 +22,17 @@ import {
const SNIPPET_ID = 'ai-snippet'
+type HarnessProps = { editorMountCount?: number; sqlSource?: SqlSnippetSource }
+
/**
* Composes the diff + prompt state hooks the AI hook depends on (production
* wires these together in `SQLEditorControllers`), so tests drive the real
* accept/discard/drain flows end to end.
*/
-function useAiHarness({ editorMountCount = 1 }: { editorMountCount?: number } = {}) {
+function useAiHarness({ editorMountCount = 1, sqlSource = 'database' }: HarnessProps = {}) {
const diff = useSqlEditorDiff()
const prompt = useSqlEditorPrompt()
- const ai = useSqlEditorAi({ id: SNIPPET_ID, editorMountCount, diff, prompt })
+ const ai = useSqlEditorAi({ id: SNIPPET_ID, editorMountCount, diff, prompt, sqlSource })
return { ai, diff, prompt }
}
@@ -119,6 +125,110 @@ describe('useSqlEditorAi — accept / discard diff', () => {
})
})
+describe('useSqlEditorAi — completion dialect', () => {
+ type CompletionRequestBody = {
+ dialect?: string
+ intent?: string
+ completionMetadata: {
+ prompt: string
+ selection: string
+ textBeforeCursor: string
+ textAfterCursor: string
+ availableKeys?: string[]
+ }
+ }
+
+ /** Replaces the default completion mock so we can read what was posted. */
+ function captureCompletionRequests(response: string) {
+ const bodies: CompletionRequestBody[] = []
+ mswServer.use(
+ http.post(`${API_URL}/ai/code/complete`, async ({ request }) => {
+ bodies.push((await request.json()) as CompletionRequestBody)
+ return HttpResponse.json(response)
+ })
+ )
+ return bodies
+ }
+
+ const context = {
+ beforeSelection: "select timestamp from logs where source = 'edge_logs'\n",
+ selection: 'limit 5',
+ afterSelection: '',
+ }
+
+ it('posts the clickhouse dialect with the raw instruction and cursor context', async () => {
+ const bodies = captureCompletionRequests('limit 10')
+ const { result } = renderSqlEditorHook(useAiHarness, {
+ initialProps: { sqlSource: 'logs' },
+ })
+
+ await act(async () => {
+ await result.current.ai.handlePrompt('only keep 5xx responses', context)
+ })
+
+ expect(bodies).toHaveLength(1)
+ expect(bodies[0].dialect).toBe('clickhouse')
+ // The route assembles the schema section and the selection-wrapped code around
+ // the instruction, so the client posts the instruction verbatim — the same
+ // shape as the Postgres path — and never hand-builds prompt text.
+ expect(bodies[0].completionMetadata.prompt).toBe('only keep 5xx responses')
+ expect(bodies[0].completionMetadata.selection).toBe('limit 5')
+ expect(bodies[0].completionMetadata.textBeforeCursor).toBe(context.beforeSelection)
+ // An inline edit is not a rewrite.
+ expect(bodies[0].intent).toBeUndefined()
+ })
+
+ it('posts the postgres dialect with the raw instruction for a database snippet', async () => {
+ const bodies = captureCompletionRequests('limit 10')
+ const { result } = renderSqlEditorHook(useAiHarness, {
+ initialProps: { sqlSource: 'database' },
+ })
+
+ await act(async () => {
+ await result.current.ai.handlePrompt('bump the limit', context)
+ })
+
+ expect(bodies).toHaveLength(1)
+ expect(bodies[0].dialect).toBe('postgres')
+ expect(bodies[0].completionMetadata.prompt).toBe('bump the limit')
+ })
+
+ it('strips code fences and leaves clickhouse output unformatted', async () => {
+ captureCompletionRequests('```sql\nlimit 10\n```')
+ const { result } = renderSqlEditorHook(useAiHarness, {
+ initialProps: { sqlSource: 'logs' },
+ })
+
+ await act(async () => {
+ await result.current.ai.handlePrompt('bump the limit', context)
+ })
+
+ await waitFor(() => expect(result.current.diff.isDiffOpen).toBe(true))
+ // sql-formatter is Postgres-only, so the ClickHouse diff is the reassembled
+ // query verbatim — fences stripped, nothing else touched.
+ expect(result.current.diff.sourceSqlDiff).toEqual({
+ original: `${context.beforeSelection}limit 5`,
+ modified: `${context.beforeSelection}limit 10`,
+ })
+ })
+
+ it('still formats database output through sql-formatter', async () => {
+ captureCompletionRequests('limit 10')
+ const { result } = renderSqlEditorHook(useAiHarness, {
+ initialProps: { sqlSource: 'database' },
+ })
+
+ await act(async () => {
+ await result.current.ai.handlePrompt('bump the limit', context)
+ })
+
+ await waitFor(() => expect(result.current.diff.isDiffOpen).toBe(true))
+ expect(result.current.diff.sourceSqlDiff?.modified).not.toBe(
+ `${context.beforeSelection}limit 10`
+ )
+ })
+})
+
describe('useSqlEditorAi — debug', () => {
it('onDebug opens the assistant sidebar and starts a debug chat from the failing snippet', async () => {
seedSnippet({ id: SNIPPET_ID, name: 'Broken query', sql: 'selct 1;' })
diff --git a/apps/studio/components/interfaces/SQLEditor/useSqlEditorAi.ts b/apps/studio/components/interfaces/SQLEditor/useSqlEditorAi.ts
index 97c5e589d6b..240d3462404 100644
--- a/apps/studio/components/interfaces/SQLEditor/useSqlEditorAi.ts
+++ b/apps/studio/components/interfaces/SQLEditor/useSqlEditorAi.ts
@@ -4,6 +4,7 @@ import { useCallback, useEffect, useEffectEvent, useMemo, useState } from 'react
import { toast } from 'sonner'
import type { useSqlEditorDiff, useSqlEditorPrompt } from './hooks'
+import type { SqlSnippetSource } from './querySource'
import { DiffType, type IStandaloneDiffEditor } from './SQLEditor.types'
import {
assembleCompletionDiff,
@@ -13,12 +14,15 @@ import {
createSqlSnippetSkeletonV2,
extractDebugContext,
planDiffRequestApplication,
+ sqlSourceToDialect,
} from './SQLEditor.utils'
import { useSQLEditorContext } from './SQLEditorContext'
import { useSnippetTitleGenerator } from './useSnippetTitleGenerator'
import { SIDEBAR_KEYS } from '@/components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
import { constructHeaders } from '@/data/fetchers'
+import { stripSqlCodeFences } from '@/data/logs/logs-sql-rewrite'
import { isError } from '@/data/utils/error-check'
+import { useLogsAttributeKeys } from '@/hooks/analytics/useLogsAttributeKeys'
import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
import { BASE_PATH } from '@/lib/constants'
@@ -37,6 +41,11 @@ type UseSqlEditorAiArgs = {
editorMountCount: number
diff: ReturnType
prompt: ReturnType
+ /**
+ * Where the snippet runs. Selects the dialect the AI writes in — logs snippets
+ * get ClickHouse SQL for the `logs` table, database snippets get Postgres.
+ */
+ sqlSource: SqlSnippetSource
}
/**
@@ -45,7 +54,13 @@ type UseSqlEditorAiArgs = {
* lifecycle effects (one-shot diff-request drain, diff-editor value sync, and the
* ask-AI widget visibility).
*/
-export function useSqlEditorAi({ id, editorMountCount, diff, prompt }: UseSqlEditorAiArgs) {
+export function useSqlEditorAi({
+ id,
+ editorMountCount,
+ diff,
+ prompt,
+ sqlSource,
+}: UseSqlEditorAiArgs) {
const {
sourceSqlDiff,
setSourceSqlDiff,
@@ -77,6 +92,14 @@ export function useSqlEditorAi({ id, editorMountCount, diff, prompt }: UseSqlEdi
const [isDiffEditorMounted, setIsDiffEditorMounted] = useState(false)
const [showWidget, setShowWidget] = useState(false)
+ const dialect = sqlSourceToDialect(sqlSource)
+ const isClickhouse = dialect === 'clickhouse'
+
+ // Grounds ClickHouse edits in the source's real log_attributes keys, the same way
+ // the whole-query rewrite does — otherwise inline edits invent dotted paths.
+ // Looked up when the user submits, not while they type.
+ const { fetchAttributeKeys } = useLogsAttributeKeys()
+
const handleNewQuery = useCallback(
async (sql: string, name: string) => {
if (!ref) return console.error('Project ref is required')
@@ -196,6 +219,7 @@ export function useSqlEditorAi({ id, editorMountCount, diff, prompt }: UseSqlEdi
projectRef: project?.ref,
connectionString: project?.connectionString,
orgSlug: org?.slug,
+ dialect,
options: options?.body,
})
),
@@ -210,9 +234,16 @@ export function useSqlEditorAi({ id, editorMountCount, diff, prompt }: UseSqlEdi
const text: string = await response.json()
const meta = options?.body?.completionMetadata ?? {}
- const { original, modified } = assembleCompletionDiff(meta, text)
+ // The clickhouse system prompt forbids fences, but strip them defensively
+ // so a chatty model can't leak backticks into the snippet.
+ const { original, modified } = assembleCompletionDiff(
+ meta,
+ isClickhouse ? stripSqlCodeFences(text) : text
+ )
- const formattedModified = formatSql(modified)
+ // sql-formatter is Postgres-only — it mangles ClickHouse backticks and
+ // map lookups — so ClickHouse output goes into the diff unformatted.
+ const formattedModified = isClickhouse ? modified : formatSql(modified)
setSourceSqlDiff({ original, modified: formattedModified })
setSelectedDiffType(DiffType.Modification)
setPromptState((prev) => ({ ...prev, isLoading: false }))
@@ -224,6 +255,8 @@ export function useSqlEditorAi({ id, editorMountCount, diff, prompt }: UseSqlEdi
}
},
[
+ dialect,
+ isClickhouse,
org?.slug,
project?.connectionString,
project?.ref,
@@ -249,10 +282,23 @@ export function useSqlEditorAi({ id, editorMountCount, diff, prompt }: UseSqlEdi
beforeSelection: context.beforeSelection,
afterSelection: context.afterSelection,
}))
- const headerData = await constructHeaders()
+ // ClickHouse only: there's no server-side schema to fetch for the logs
+ // table, so the real log_attributes keys travel with the request. Detected
+ // from the whole document, which is what the three context fields spell.
+ const [headerData, availableKeys] = await Promise.all([
+ constructHeaders(),
+ isClickhouse
+ ? fetchAttributeKeys(
+ context.beforeSelection + context.selection + context.afterSelection
+ )
+ : undefined,
+ ])
const authorizationHeader = headerData.get('Authorization')
+ // The instruction goes over as-is for both dialects — the route assembles
+ // the schema section and the cursor context around it, so there's exactly
+ // one place that knows how a completion prompt is built.
await complete(prompt, {
...(authorizationHeader
? { headers: { Authorization: authorizationHeader } }
@@ -264,6 +310,7 @@ export function useSqlEditorAi({ id, editorMountCount, diff, prompt }: UseSqlEdi
language: 'pgsql',
prompt,
selection: context.selection,
+ ...(availableKeys ? { availableKeys } : {}),
},
},
})
@@ -271,7 +318,7 @@ export function useSqlEditorAi({ id, editorMountCount, diff, prompt }: UseSqlEdi
setPromptState((prev) => ({ ...prev, isLoading: false }))
}
},
- [complete, setPromptState]
+ [complete, fetchAttributeKeys, isClickhouse, setPromptState]
)
const handleDiffEditorMount = useCallback(
diff --git a/apps/studio/components/interfaces/Settings/Logs/LegacyLogsRewriteAdmonition.tsx b/apps/studio/components/interfaces/Settings/Logs/LegacyLogsRewriteAdmonition.tsx
new file mode 100644
index 00000000000..581c0b02334
--- /dev/null
+++ b/apps/studio/components/interfaces/Settings/Logs/LegacyLogsRewriteAdmonition.tsx
@@ -0,0 +1,107 @@
+import { Button } from 'ui'
+import { Admonition } from 'ui-patterns/Admonition'
+
+import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
+import type { LegacyLogsRewriteState } from '@/hooks/analytics/useLegacyLogsRewrite'
+
+interface LegacyLogsRewriteAdmonitionProps {
+ state: LegacyLogsRewriteState
+ onRewrite: () => void
+ onDismiss: () => void
+}
+
+const BANNER_CLASSES = 'mb-0 rounded-none border-x-0 border-t-0'
+
+/**
+ * Presentation for the BigQuery → ClickHouse rewrite offer, covering every state
+ * of `useLegacyLogsRewrite`. Shared by the Logs Explorer and the SQL editor so the
+ * copy and the outcome handling live in one place — a surface only decides *when*
+ * to show this, not what each state says.
+ *
+ * Renders nothing once dismissed; callers can also hide it earlier if they have
+ * their own reasons to (the SQL editor hides it while a diff is open).
+ */
+export const LegacyLogsRewriteAdmonition = ({
+ state,
+ onRewrite,
+ onDismiss,
+}: LegacyLogsRewriteAdmonitionProps) => {
+ if (state.status === 'dismissed') return null
+
+ if (state.status === 'failed') {
+ return (
+
+
+
+