feat(sql-completion): add lazy metadata completion

Author: Zxc4wonder

ui/chen/api/index.ts

@@ -1,16 +1,28 @@
-import type { ChenActionItem, ChenAuthResponse, ChenProfile, ChenSqlHints, ChenTreeNode } from "~/chen/types";
+import type {
+  ChenActionItem,
+  ChenAuthResponse,
+  ChenProfile,
+  ChenTreeNode
+} from "~/chen/types";
+import type {
+  ChenQualifiedRelation,
+  ChenRelationColumnsMetadata,
+  ChenRelationMetadataPage,
+  ChenSqlMetadataScope
+} from "~/chen/types/sqlMetadata";
 
 const buildHeaders = (token?: string, init?: HeadersInit) => ({
   ...getWebApiHeaders(),
   ...(token ? { token } : {}),
   ...(init || {})
 });
 
-export function chenPath(path: string, endpointUrl = window.location.origin) {
+export function chenPath(path: string, endpointUrl?: string) {
   const connectorPath = `/chen${path.startsWith("/") ? path : `/${path}`}`;
-  const endpoint = new URL(endpointUrl || window.location.origin, window.location.origin);
+  const currentOrigin = typeof window === "undefined" ? "http://localhost" : window.location.origin;
+  const endpoint = new URL(endpointUrl || currentOrigin, currentOrigin);
 
-  if (endpoint.origin === window.location.origin) {
+  if (endpoint.origin === currentOrigin) {
     return withWebSitePrefix(connectorPath);
   }
 
@@ -76,35 +88,100 @@ export async function uploadChenSqlFile(
   return { path: result.path };
 }
 
-export async function fetchChenSqlHints(
+export async function fetchChenSqlRelations(
   chenToken: string,
-  nodeKey: string,
-  context: string,
+  scope: ChenSqlMetadataScope,
+  prefix = "",
+  limit = 100,
   fetchImpl: typeof fetch = fetch,
   endpointUrl?: string
-): Promise<ChenSqlHints> {
-  const response = await fetchImpl(chenPath("/api/resources/hints", endpointUrl), {
+): Promise<ChenRelationMetadataPage> {
+  const response = await fetchImpl(chenPath("/api/resources/metadata/relations", endpointUrl), {
     method: "POST",
     credentials: "include",
     headers: {
       ...buildHeaders(chenToken, getWebApiMutationHeaders()),
       "Content-Type": "application/json"
     },
-    body: JSON.stringify({ nodeKey, context })
+    body: JSON.stringify({ ...scope, prefix, limit })
   });
   const result = await readJson<unknown>(response);
-  if (!result || typeof result !== "object" || Array.isArray(result)) {
-    throw new Error("Chen returned malformed SQL hints");
+  if (!isRecord(result) || !Array.isArray(result.items) || typeof result.truncated !== "boolean") {
+    throw new Error("Chen returned malformed SQL relation metadata");
   }
 
-  return Object.fromEntries(
-    Object.entries(result)
-      .filter(
-        (entry): entry is [string, string[]] =>
-          Array.isArray(entry[1]) && entry[1].every((column) => typeof column === "string")
-      )
-      .map(([table, columns]) => [table, [...columns]])
-  );
+  return {
+    items: result.items.map(parseQualifiedRelation),
+    truncated: result.truncated
+  };
+}
+
+export async function fetchChenSqlColumns(
+  chenToken: string,
+  scope: ChenSqlMetadataScope,
+  relations: ChenQualifiedRelation[],
+  fetchImpl: typeof fetch = fetch,
+  endpointUrl?: string
+): Promise<ChenRelationColumnsMetadata[]> {
+  const response = await fetchImpl(chenPath("/api/resources/metadata/columns", endpointUrl), {
+    method: "POST",
+    credentials: "include",
+    headers: {
+      ...buildHeaders(chenToken, getWebApiMutationHeaders()),
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify({ ...scope, relations })
+  });
+  const result = await readJson<unknown>(response);
+  if (!isRecord(result) || !Array.isArray(result.items)) {
+    throw new Error("Chen returned malformed SQL column metadata");
+  }
+
+  return result.items.map((item) => {
+    if (!isRecord(item) || !Array.isArray(item.columns)) {
+      throw new Error("Chen returned malformed SQL column metadata");
+    }
+    return {
+      relation: parseQualifiedRelation(item.relation),
+      columns: item.columns.map((column) => {
+        if (
+          !isRecord(column) ||
+          typeof column.name !== "string" ||
+          !(typeof column.dataType === "string" || column.dataType === null) ||
+          typeof column.nullable !== "boolean"
+        ) {
+          throw new Error("Chen returned malformed SQL column metadata");
+        }
+        return {
+          name: column.name,
+          dataType: column.dataType,
+          nullable: column.nullable
+        };
+      })
+    };
+  });
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+
+function parseQualifiedRelation(value: unknown): ChenQualifiedRelation {
+  if (
+    !isRecord(value) ||
+    !(typeof value.catalog === "string" || value.catalog === null) ||
+    typeof value.schema !== "string" ||
+    typeof value.name !== "string" ||
+    !(value.kind === "table" || value.kind === "view")
+  ) {
+    throw new Error("Chen returned malformed SQL relation metadata");
+  }
+  return {
+    catalog: value.catalog,
+    schema: value.schema,
+    name: value.name,
+    kind: value.kind
+  };
 }
 
 export function sanitizeChenExportFileName(value: string, fallback = "chen-export") {

ui/chen/components/QueryConsolePanel.vue

@@ -1,18 +1,22 @@
 <script setup lang="ts">
 import type { ChenSqlSnippet } from "~/chen/composables/useChenSqlSnippets";
 import type { ChenDataViewAction, ChenDataViewActionData, ChenQueryConsoleTab, ChenQueryResultTab } from "~/chen/types";
+import type { ChenSqlMetadataStore } from "~/chen/utils/sqlMetadata";
 
 import QueryResultTabs from "~/chen/components/QueryResultTabs.vue";
 import ChenSqlEditor from "~/chen/components/SqlEditor.client.vue";
 import SqlSnippetSaveDialog from "~/chen/components/SqlSnippetSaveDialog.vue";
 import SqlSnippetSelectDialog from "~/chen/components/SqlSnippetSelectDialog.vue";
 import { useChenSqlSnippets } from "~/chen/composables/useChenSqlSnippets";
+import { createChenCompletionSource } from "~/chen/utils/sqlCompletion";
+import { chenSqlDialect } from "~/chen/utils/sqlEditor";
 import { formatChenSql } from "~/chen/utils/sqlFormat";
 
 const props = defineProps<{
   tab: ChenQueryConsoleTab;
   dbType: string;
   canCopy: boolean;
+  metadataStore: ChenSqlMetadataStore;
 }>();
 
 const emit = defineEmits<{
@@ -46,6 +50,14 @@ let messageCloseTimer: ReturnType<typeof setTimeout> | null = null;
 const toast = useToast();
 const { addErrorToast } = useErrorToast();
 const sqlSnippets = useChenSqlSnippets(() => props.dbType);
+const completionSource = createChenCompletionSource({
+  store: props.metadataStore,
+  scope: () => {
+    const context = props.tab.state.currentContext || "";
+    return context ? { nodeKey: props.tab.nodeKey, context } : null;
+  },
+  dialect: () => chenSqlDialect(props.dbType)
+});
 const queryBusy = computed(() => Boolean(props.tab.state.loading || props.tab.state.inQuery));
 const contextBusy = computed(() => Boolean(queryBusy.value || props.tab.state.editorLoading));
 const contextItems = computed(() =>
@@ -276,7 +288,7 @@ onBeforeUnmount(clearMessageTimer);
           v-model="statementValue"
           class="min-h-0 flex-1"
           :db-type="dbType"
-          :hints="tab.sqlHints"
+          :completion-source="completionSource"
           :read-only="Boolean(tab.state.loading || tab.state.editorLoading)"
           @selection-change="hasSelection = $event"
           @format="formatStatement"

ui/chen/components/SqlEditor.client.vue

@@ -1,23 +1,21 @@
 <script setup lang="ts">
 import type { Extension } from "@codemirror/state";
-import type { ChenSqlHints } from "~/chen/types";
-import { sql } from "@codemirror/lang-sql";
+import type { ChenSqlCompletionSource } from "~/chen/utils/sqlCompletion";
 import { Compartment, EditorState, Prec } from "@codemirror/state";
 import { EditorView, keymap } from "@codemirror/view";
 import { basicSetup } from "codemirror";
-import { chenSqlConfig, replaceChenSqlDocument } from "~/chen/utils/sqlEditor";
+import { chenSqlExtensions, replaceChenSqlDocument } from "~/chen/utils/sqlEditor";
 import { createCodeMirrorSyntaxTheme, createCodeMirrorTheme } from "~/shared/theme/adapters/codemirror";
 
 const props = withDefaults(
   defineProps<{
     modelValue: string;
     dbType?: string;
-    hints?: ChenSqlHints;
+    completionSource?: ChenSqlCompletionSource;
     readOnly?: boolean;
   }>(),
   {
     dbType: "",
-    hints: () => ({}),
     readOnly: false
   }
 );
@@ -42,7 +40,7 @@ let applyingExternalValue = false;
 
 const editorExtensions: Extension[] = [
   basicSetup,
-  sqlLanguageSlot.of(sql(chenSqlConfig(props.dbType, props.hints))),
+  sqlLanguageSlot.of(chenSqlExtensions(props.dbType, props.completionSource)),
   createCodeMirrorSyntaxTheme(),
   EditorView.lineWrapping,
   EditorState.tabSize.of(2),
@@ -144,9 +142,9 @@ watch(
 );
 
 watch(
-  () => [props.dbType, props.hints] as const,
-  ([dbType, hints]) => {
-    editor?.dispatch({ effects: sqlLanguageSlot.reconfigure(sql(chenSqlConfig(dbType, hints))) });
+  () => [props.dbType, props.completionSource] as const,
+  ([dbType, completionSource]) => {
+    editor?.dispatch({ effects: sqlLanguageSlot.reconfigure(chenSqlExtensions(dbType, completionSource)) });
   }
 );
 

ui/chen/composables/useChenSqlHints.ts

@@ -59,10 +59,6 @@ export function useChenWorkspaceTabs() {
       nodeKey,
       statement: "",
       uploadingSql: false,
-      sqlHints: {},
-      hintsContext: "",
-      hintsLoading: false,
-      hintsRequestGeneration: 0,
       state: {},
       logs: [],
       message: null,

ui/chen/composables/useChenWorkspaceTabs.ts

@@ -169,8 +169,6 @@ export interface ChenDataViewEditState {
 
 export type ChenDataViewEditMode = "none" | "update" | "full";
 
-export type ChenSqlHints = Record<string, string[]>;
-
 export interface ChenConsoleState {
   loading?: boolean;
   inQuery?: boolean;
@@ -232,10 +230,6 @@ export interface ChenQueryConsoleTab extends ChenTabDefinition {
   kind: "query";
   statement: string;
   uploadingSql: boolean;
-  sqlHints: ChenSqlHints;
-  hintsContext: string;
-  hintsLoading: boolean;
-  hintsRequestGeneration: number;
   state: ChenConsoleState;
   logs: string[];
   message: ChenConsoleMessage | null;

ui/chen/types.ts

@@ -0,0 +1,27 @@
+export interface ChenSqlMetadataScope {
+  nodeKey: string;
+  context: string;
+}
+
+export interface ChenQualifiedRelation {
+  catalog: string | null;
+  schema: string;
+  name: string;
+  kind: "table" | "view";
+}
+
+export interface ChenSqlColumnMetadata {
+  name: string;
+  dataType: string | null;
+  nullable: boolean;
+}
+
+export interface ChenRelationMetadataPage {
+  items: ChenQualifiedRelation[];
+  truncated: boolean;
+}
+
+export interface ChenRelationColumnsMetadata {
+  relation: ChenQualifiedRelation;
+  columns: ChenSqlColumnMetadata[];
+}