@hienlh/ppm 0.23.12 → 0.23.13

package/src/web/components/database/sql-completion-provider.ts

@@ -1,11 +1,14 @@
 import type * as MonacoType from "monaco-editor";
-import { getStatementAtCursor } from "./split-sql-statements";
+import { getStatementAtCursor } from "../../../shared/split-sql-statements";
+import type { DialectName } from "../../../shared/db-types";
+import { quoteIdentifier } from "../../../shared/sql-identifiers";
 
 export interface SchemaInfo {
   tables: { name: string; schema: string }[];
   getColumns: (table: string, schema?: string) => Promise<{ name: string; type: string }[]>;
 }
 
+/** Keywords every engine PPM opens has. */
 export const SQL_KEYWORDS = [
   "SELECT", "FROM", "WHERE", "INSERT", "INTO", "VALUES",
   "UPDATE", "SET", "DELETE", "CREATE", "TABLE", "ALTER",
@@ -16,38 +19,106 @@ export const SQL_KEYWORDS = [
   "CASE", "WHEN", "THEN", "ELSE", "END", "EXISTS",
   "UNION", "ALL", "ASC", "DESC", "ORDER BY", "GROUP BY",
   "LEFT JOIN", "RIGHT JOIN", "INNER JOIN", "CROSS JOIN",
-  "FULL OUTER JOIN", "IS NULL", "IS NOT NULL",
+  "IS NULL", "IS NOT NULL",
 ];
 
+/**
+ * What one engine has and another does not, offered only in a tab on that engine: MySQL has no
+ * FULL OUTER JOIN, RETURNING or ILIKE; Postgres and SQLite have no ON DUPLICATE KEY UPDATE.
+ */
+export const DIALECT_KEYWORDS: Record<DialectName, readonly string[]> = {
+  postgres: [
+    "FULL OUTER JOIN", "ILIKE", "SIMILAR TO", "IS DISTINCT FROM", "RETURNING", "ON CONFLICT", "DO NOTHING", "DO UPDATE SET",
+    "DISTINCT ON", "LATERAL", "WITH RECURSIVE", "FILTER", "OVER", "PARTITION BY", "NULLS FIRST", "NULLS LAST",
+    "FETCH FIRST", "ROWS ONLY", "TRUNCATE", "EXPLAIN ANALYZE", "VACUUM", "ANALYZE", "COPY", "SCHEMA", "SEQUENCE",
+    "MATERIALIZED VIEW", "REFRESH MATERIALIZED VIEW", "SERIAL", "BIGSERIAL", "JSONB", "TIMESTAMPTZ",
+    "GENERATED ALWAYS AS IDENTITY",
+  ],
+  mysql: [
+    "AUTO_INCREMENT", "ON DUPLICATE KEY UPDATE", "INSERT IGNORE", "REPLACE INTO", "STRAIGHT_JOIN", "REGEXP", "RLIKE",
+    "SHOW TABLES", "SHOW DATABASES", "SHOW COLUMNS FROM", "SHOW CREATE TABLE", "SHOW INDEX FROM", "SHOW PROCESSLIST",
+    "SHOW VARIABLES", "DESCRIBE", "USE", "ENGINE", "CHARSET", "COLLATE", "UNSIGNED", "DELIMITER", "TRUNCATE",
+    "LOCK TABLES", "UNLOCK TABLES",
+  ],
+  sqlite: [
+    "FULL OUTER JOIN", "PRAGMA", "AUTOINCREMENT", "GLOB", "WITHOUT ROWID", "STRICT", "INSERT OR REPLACE", "INSERT OR IGNORE",
+    "ON CONFLICT", "DO NOTHING", "DO UPDATE SET", "RETURNING", "WITH RECURSIVE", "ATTACH DATABASE", "DETACH DATABASE",
+    "VACUUM", "REINDEX", "ANALYZE", "ROWID",
+  ],
+};
+
+/** The keywords a tab on `dialect` is offered. */
+export function sqlKeywords(dialect: DialectName): string[] {
+  return [...SQL_KEYWORDS, ...DIALECT_KEYWORDS[dialect]];
+}
+
 export const AGGREGATE_FNS = ["COUNT", "SUM", "AVG", "MIN", "MAX"];
-export const OPERATORS = ["=", "!=", "<>", ">", "<", ">=", "<=", "LIKE", "ILIKE", "IN", "NOT IN", "BETWEEN", "IS NULL", "IS NOT NULL"];
+/** Comparisons every engine has. */
+export const OPERATORS = ["=", "!=", "<>", ">", "<", ">=", "<=", "LIKE", "IN", "NOT IN", "BETWEEN", "IS NULL", "IS NOT NULL"];
+const DIALECT_OPERATORS: Record<DialectName, readonly string[]> = {
+  postgres: ["ILIKE", "NOT ILIKE", "SIMILAR TO", "IS DISTINCT FROM"],
+  mysql: ["REGEXP", "NOT REGEXP", "<=>"],
+  sqlite: ["GLOB", "IS", "IS NOT"],
+};
+
+/** The comparisons offered after `WHERE col` in a tab on `dialect`. */
+export function sqlOperators(dialect: DialectName): string[] {
+  return [...OPERATORS, ...DIALECT_OPERATORS[dialect]];
+}
 export const SORT_DIRS = ["ASC", "DESC"];
 
-/** Client-side column cache to avoid redundant fetches */
-const columnCache = new Map<string, { name: string; type: string }[]>();
+/**
+ * Columns already fetched, per schema: two open tabs can each have a `users` table, and a cache
+ * keyed by the name alone handed one connection's columns to the other.
+ */
+const columnCaches = new WeakMap<SchemaInfo, Map<string, { name: string; type: string }[]>>();
 
-const TABLE_KW_SET = new Set([
-  "WHERE", "SET", "ON", "ORDER", "GROUP", "HAVING", "LIMIT", "LEFT", "RIGHT",
-  "INNER", "OUTER", "CROSS", "FULL", "JOIN", "AND", "OR", "VALUES", "SELECT",
-  "FROM", "INTO", "UPDATE", "DELETE", "INSERT", "CREATE", "ALTER", "DROP",
-]);
+/** Words that follow a table and are not its alias. */
+const NOT_ALIAS = [
+  "FROM", "JOIN", "UPDATE", "INTO", "WHERE", "SET", "ON", "USING", "ORDER", "GROUP", "HAVING", "LIMIT", "OFFSET",
+  "LEFT", "RIGHT", "INNER", "OUTER", "CROSS", "FULL", "NATURAL", "STRAIGHT_JOIN", "AND", "OR", "VALUES", "SELECT",
+  "DELETE", "INSERT", "CREATE", "ALTER", "DROP", "UNION", "EXCEPT", "INTERSECT", "RETURNING", "WINDOW", "FETCH", "FOR",
+  "DEFAULT", "LATERAL",
+  // MySQL's index hints: FROM t FORCE INDEX (...).
+  "FORCE", "IGNORE", "USE",
+];
+const NOT_ALIAS_SET = new Set(NOT_ALIAS);
+/** A name as written: plain, "double-quoted" (Postgres, SQLite) or `backticked` (MySQL). */
+const NAME = String.raw`(?:"[^"]+"|\x60[^\x60]+\x60|\w+)`;
+/** One table after FROM, JOIN, UPDATE or INTO — `schema.table` too — and its alias, with or without AS. */
+const TABLE_ITEM = new RegExp(
+  String.raw`\s*(${NAME}(?:\s*\.\s*${NAME})?)(?:\s+AS\s+(${NAME})|\s+(?!(?:${NOT_ALIAS.join("|")})\b)(\w+))?`, "iy",
+);
+const LIST_COMMA = /\s*,/y;
+const unquote = (name: string) => (/^["\x60]/.test(name) ? name.slice(1, -1) : name);
 
-/** Extract tables referenced in FROM/JOIN/UPDATE/INTO clauses */
+/**
+ * The tables a statement reads or writes, by the name they go by, with each alias — `FROM users u`,
+ * `JOIN orders AS o`, `FROM users u, orders o`, MySQL's `UPDATE users u, orders o` — and the schema
+ * of each one written with it.
+ */
 export function extractTableRefs(text: string) {
   const tableRefs = new Set<string>();
   const aliasMap = new Map<string, string>(); // alias → realTableName
-  // Match: FROM/JOIN/UPDATE/INTO "tablename" [AS] alias
-  // Use non-greedy alias capture to avoid consuming the next keyword
-  const matches = text.matchAll(/\b(?:FROM|JOIN|UPDATE|INTO)\s+"?(\w+)"?(?:\s+AS\s+(\w+)|\s+(?!(?:FROM|JOIN|UPDATE|INTO|WHERE|SET|ON|ORDER|GROUP|HAVING|LIMIT|LEFT|RIGHT|INNER|OUTER|CROSS|FULL|AND|OR|VALUES|SELECT)\b)(\w+))?/gi);
-  for (const m of matches) {
-    const tbl = m[1]!;
-    tableRefs.add(tbl);
-    const alias = m[2] ?? m[3]; // m[2] = explicit AS alias, m[3] = implicit alias
-    if (alias && !TABLE_KW_SET.has(alias.toUpperCase())) {
-      aliasMap.set(alias.toLowerCase(), tbl);
+  const schemaOf = new Map<string, string>(); // table, lower case → its schema, when written
+  for (const keyword of text.matchAll(/\b(FROM|JOIN|UPDATE|INTO)\b/gi)) {
+    TABLE_ITEM.lastIndex = keyword.index + keyword[0].length;
+    // FROM takes a list — and MySQL's UPDATE: every table in `FROM a x, b y` has its alias.
+    const list = /^(FROM|UPDATE)$/i.test(keyword[1]!);
+    for (let m = TABLE_ITEM.exec(text); m; m = TABLE_ITEM.exec(text)) {
+      const parts = [...m[1]!.matchAll(new RegExp(NAME, "g"))].map((p) => unquote(p[0]));
+      const table = parts.at(-1)!;
+      tableRefs.add(table);
+      if (parts.length === 2) schemaOf.set(table.toLowerCase(), parts[0]!);
+      const alias = m[2] ? unquote(m[2]) : m[3];
+      if (alias && !NOT_ALIAS_SET.has(alias.toUpperCase())) aliasMap.set(alias.toLowerCase(), table);
+      if (!list) break;
+      LIST_COMMA.lastIndex = TABLE_ITEM.lastIndex;
+      if (!LIST_COMMA.test(text)) break;
+      TABLE_ITEM.lastIndex = LIST_COMMA.lastIndex;
     }
   }
-  return { tableRefs, aliasMap };
+  return { tableRefs, aliasMap, schemaOf };
 }
 
 /** Resolve alias or table name to real table name */
@@ -55,39 +126,63 @@ export function resolveTable(name: string, aliasMap: Map<string, string>): strin
   return aliasMap.get(name.toLowerCase()) ?? name;
 }
 
+/**
+ * The schema to read a table's columns from: the one written before it, else the only schema that
+ * has a table by that name — Postgres reads an unnamed schema as `public`, where a table of
+ * another schema is not — else the connection's own.
+ */
+export function schemaForTable(table: string, written: Map<string, string>, schemaInfo: SchemaInfo): string | undefined {
+  const named = written.get(table.toLowerCase());
+  if (named) return named;
+  const found = schemaInfo.tables.filter((t) => t.name.toLowerCase() === table.toLowerCase());
+  return found.length === 1 && found[0]!.schema ? found[0]!.schema : undefined;
+}
+
 /** Fetch columns for a table (cached) */
-async function getColumns(tableName: string, schemaInfo: SchemaInfo): Promise<{ name: string; type: string }[]> {
-  const key = tableName.toLowerCase();
+async function getColumns(tableName: string, schemaInfo: SchemaInfo, schema?: string): Promise<{ name: string; type: string }[]> {
+  let columnCache = columnCaches.get(schemaInfo);
+  if (!columnCache) columnCaches.set(schemaInfo, columnCache = new Map());
+  const key = `${schema ?? ""}.${tableName.toLowerCase()}`;
   let cols = columnCache.get(key);
   if (!cols) {
     try {
-      cols = await schemaInfo.getColumns(tableName);
+      cols = await schemaInfo.getColumns(tableName, schema);
       columnCache.set(key, cols);
     } catch { cols = []; }
   }
   return cols;
 }
 
+/**
+ * A column as it has to be typed. Postgres folds an unquoted name to lower case, so a name
+ * with capitals needs quotes; MySQL matches column names case-insensitively and quotes with
+ * backticks — a double-quoted word there is a string.
+ */
+export function columnInsertText(name: string, dialect: DialectName): string {
+  if (dialect === "mysql") return /^[A-Za-z_][\w$]*$/.test(name) ? name : quoteIdentifier(name, dialect);
+  return /[A-Z]/.test(name) ? quoteIdentifier(name, dialect) : name;
+}
+
 /** Build column suggestions from all referenced tables */
 async function columnSuggestions(
-  tableRefs: Set<string>,
+  { tableRefs, schemaOf }: ReturnType<typeof extractTableRefs>,
   schemaInfo: SchemaInfo,
   monaco: typeof MonacoType,
   range: MonacoType.IRange,
+  dialect: DialectName,
 ): Promise<MonacoType.languages.CompletionItem[]> {
   const items: MonacoType.languages.CompletionItem[] = [];
   const seen = new Set<string>();
   for (const tbl of tableRefs) {
-    const cols = await getColumns(tbl, schemaInfo);
+    const cols = await getColumns(tbl, schemaInfo, schemaForTable(tbl, schemaOf, schemaInfo));
     for (const col of cols) {
       if (seen.has(col.name)) continue;
       seen.add(col.name);
-      const needsQuote = /[A-Z]/.test(col.name);
       items.push({
         label: col.name,
         kind: monaco.languages.CompletionItemKind.Field,
         detail: `${tbl} · ${col.type}`,
-        insertText: needsQuote ? `"${col.name}"` : col.name,
+        insertText: columnInsertText(col.name, dialect),
         range,
         sortText: "0" + col.name,
       });
@@ -107,7 +202,7 @@ export function getCompletionContext(textUntilPosition: string): string {
 
   // 2. After ORDER BY col or GROUP BY col → direction (ASC/DESC)
   // Pattern: ORDER BY <col> <partial_word>  — but NOT if partial is already ASC/DESC
-  const orderByColMatch = textUntilPosition.match(/\b(?:ORDER|GROUP)\s+BY\s+(?:[\w"]+\s+(?:ASC|DESC)\s*,\s*)*[\w"]+\s+(\w*)$/i);
+  const orderByColMatch = textUntilPosition.match(/\b(?:ORDER|GROUP)\s+BY\s+(?:[\w"`]+\s+(?:ASC|DESC)\s*,\s*)*[\w"`]+\s+(\w*)$/i);
   if (orderByColMatch) {
     const partial = orderByColMatch[1]!.toUpperCase();
     if (partial === "ASC" || partial === "DESC") return "after-direction";
@@ -118,16 +213,16 @@ export function getCompletionContext(textUntilPosition: string): string {
   if (/\b(?:ORDER|GROUP)\s+BY\s+.*(?:ASC|DESC)\s*,\s*\w*$/i.test(textUntilPosition)) return "order-by-next-col";
 
   // 4. After WHERE/AND/OR <col> → operators
-  if (/\b(?:WHERE|AND|OR)\s+[\w"]+\s+\S*$/i.test(textUntilPosition)) return "operator";
+  if (/\b(?:WHERE|AND|OR)\s+[\w"`]+\s+\S*$/i.test(textUntilPosition)) return "operator";
 
   // 5. After FROM/JOIN/INTO/UPDATE/TABLE → table names
   if (/\b(?:FROM|JOIN|INTO|UPDATE|TABLE)\s+\w*$/i.test(textUntilPosition)) return "table";
 
   // 6. After INSERT INTO table ( → columns for insert
-  if (/\bINSERT\s+INTO\s+[\w"]+\s*\(\s*(?:[\w"]+\s*,\s*)*\w*$/i.test(textUntilPosition)) return "insert-cols";
+  if (/\bINSERT\s+INTO\s+[\w"`]+\s*\(\s*(?:[\w"`]+\s*,\s*)*\w*$/i.test(textUntilPosition)) return "insert-cols";
 
   // 7. After SELECT/WHERE/ORDER BY/GROUP BY/HAVING/SET/ON/AND/OR → columns
-  if (/\b(?:SELECT|WHERE|ORDER\s+BY|GROUP\s+BY|HAVING|SET|ON|AND|OR)\s+(?:[\w"]+\s*,\s*)*\w*$/i.test(textUntilPosition)) return "columns";
+  if (/\b(?:SELECT|WHERE|ORDER\s+BY|GROUP\s+BY|HAVING|SET|ON|AND|OR)\s+(?:[\w"`]+\s*,\s*)*\w*$/i.test(textUntilPosition)) return "columns";
 
   // 8. After comma with table refs → more columns
   if (/,\s*\w*$/.test(textUntilPosition)) return "comma-cols";
@@ -136,13 +231,22 @@ export function getCompletionContext(textUntilPosition: string): string {
   return "default";
 }
 
+/**
+ * `dialect` is read per request: the editor learns its connection's engine after it mounts.
+ * Monaco keeps completion providers per language, not per editor, so this one is asked about
+ * every SQL model on the page — each mounted Query tab, each .sql file — and answers only for
+ * `editor`'s, or every tab would offer every other connection's tables.
+ */
 export function createSqlCompletionProvider(
   monaco: typeof MonacoType,
   schemaInfo: SchemaInfo,
+  dialect: () => DialectName,
+  editor: Pick<MonacoType.editor.ICodeEditor, "getModel">,
 ): MonacoType.languages.CompletionItemProvider {
   return {
     triggerCharacters: [".", ","],
     provideCompletionItems: async (model, position) => {
+      if (model !== editor.getModel()) return { suggestions: [] };
       try {
         const textUntilPosition = model.getValueInRange({
           startLineNumber: 1, startColumn: 1,
@@ -154,8 +258,10 @@ export function createSqlCompletionProvider(
           startColumn: word.startColumn, endColumn: word.endColumn,
         };
         const fullText = model.getValue();
-        const currentStmt = getStatementAtCursor(fullText, position.lineNumber);
-        const { tableRefs, aliasMap } = extractTableRefs(currentStmt);
+        const d = dialect();
+        const currentStmt = getStatementAtCursor(fullText, position.lineNumber, d);
+        const refs = extractTableRefs(currentStmt);
+        const { tableRefs, aliasMap } = refs;
         const suggestions: MonacoType.languages.CompletionItem[] = [];
         const ctx = getCompletionContext(textUntilPosition);
 
@@ -165,14 +271,13 @@ export function createSqlCompletionProvider(
           if (dotMatch) {
             const ref = dotMatch[1]!;
             const realTable = resolveTable(ref, aliasMap);
-            const cols = await getColumns(realTable, schemaInfo);
+            const cols = await getColumns(realTable, schemaInfo, schemaForTable(realTable, refs.schemaOf, schemaInfo));
             for (const col of cols) {
-              const needsQuote = /[A-Z]/.test(col.name);
               suggestions.push({
                 label: col.name,
                 kind: monaco.languages.CompletionItemKind.Field,
                 detail: col.type,
-                insertText: needsQuote ? `"${col.name}"` : col.name,
+                insertText: columnInsertText(col.name, d),
                 range,
               });
             }
@@ -199,13 +304,13 @@ export function createSqlCompletionProvider(
 
         // ─── 4. After ORDER BY col ASC/DESC, → more columns ───
         if (ctx === "order-by-next-col") {
-          suggestions.push(...await columnSuggestions(tableRefs, schemaInfo, monaco, range));
+          suggestions.push(...await columnSuggestions(refs, schemaInfo, monaco, range, d));
           return { suggestions };
         }
 
         // ─── 5. After WHERE/AND/OR col → operators ───
         if (ctx === "operator") {
-          for (const op of OPERATORS) {
+          for (const op of sqlOperators(d)) {
             suggestions.push({
               label: op,
               kind: monaco.languages.CompletionItemKind.Operator,
@@ -234,13 +339,13 @@ export function createSqlCompletionProvider(
 
         // ─── 7. After INSERT INTO table ( → columns ───
         if (ctx === "insert-cols") {
-          suggestions.push(...await columnSuggestions(tableRefs, schemaInfo, monaco, range));
+          suggestions.push(...await columnSuggestions(refs, schemaInfo, monaco, range, d));
           return { suggestions };
         }
 
         // ─── 8. After SELECT/WHERE/ORDER BY/... → columns + keywords ───
         if (ctx === "columns") {
-          suggestions.push(...await columnSuggestions(tableRefs, schemaInfo, monaco, range));
+          suggestions.push(...await columnSuggestions(refs, schemaInfo, monaco, range, d));
           if (/\bSELECT\s+/i.test(textUntilPosition)) {
             suggestions.push({
               label: "*",
@@ -260,7 +365,7 @@ export function createSqlCompletionProvider(
               });
             }
           }
-          for (const kw of SQL_KEYWORDS) {
+          for (const kw of sqlKeywords(d)) {
             suggestions.push({
               label: kw, kind: monaco.languages.CompletionItemKind.Keyword,
               insertText: kw, range, sortText: "3" + kw,
@@ -271,12 +376,12 @@ export function createSqlCompletionProvider(
 
         // ─── 9. After comma → more columns ───
         if (ctx === "comma-cols" && tableRefs.size > 0) {
-          suggestions.push(...await columnSuggestions(tableRefs, schemaInfo, monaco, range));
+          suggestions.push(...await columnSuggestions(refs, schemaInfo, monaco, range, d));
           return { suggestions };
         }
 
         // ─── 10. Default: keywords + table names ───
-        for (const kw of SQL_KEYWORDS) {
+        for (const kw of sqlKeywords(d)) {
           suggestions.push({
             label: kw, kind: monaco.languages.CompletionItemKind.Keyword,
             insertText: kw, range, sortText: "2" + kw,
@@ -296,8 +401,3 @@ export function createSqlCompletionProvider(
     },
   };
 }
-
-/** Clear the internal column cache (call on connection change) */
-export function clearCompletionCache() {
-  columnCache.clear();
-}

package/src/web/components/database/sql-object/sql-object-model.ts

@@ -0,0 +1,39 @@
+/**
+ * What the SQL tab offers for one object — its CREATE under the name of what it is, and a table's
+ * or view's SELECT and a table's INSERT — and the request for them. Pure, for tests.
+ */
+import type { DbScriptKind } from "@/lib/db-tabs";
+import type { DbObjectKind, DbObjectRef, DbObjectScripts } from "../../../../shared/db-structure";
+
+const CREATE_LABELS: Record<DbObjectKind, string> = {
+  table: "CREATE TABLE",
+  view: "CREATE VIEW",
+  matview: "CREATE MATERIALIZED VIEW",
+  function: "CREATE FUNCTION",
+  procedure: "CREATE PROCEDURE",
+  trigger: "CREATE TRIGGER",
+  sequence: "CREATE SEQUENCE",
+};
+
+export interface ScriptChoice { kind: DbScriptKind; label: string; sql: string }
+
+/** The scripts in DBGate's order, the CREATE labelled with what the object is; none before they arrive. */
+export function scriptChoices(kind: DbObjectKind, scripts: DbObjectScripts | null): ScriptChoice[] {
+  if (!scripts) return [];
+  const out: ScriptChoice[] = [{ kind: "create", label: CREATE_LABELS[kind], sql: scripts.create }];
+  if (scripts.select !== undefined) out.push({ kind: "select", label: "SELECT", sql: scripts.select });
+  if (scripts.insert !== undefined) out.push({ kind: "insert", label: "INSERT", sql: scripts.insert });
+  return out;
+}
+
+/**
+ * `GET …/object-sql` for `ref`. An empty `args` is sent: it is a routine that takes none, which is
+ * one overload of several as much as any other.
+ */
+export function objectSqlPath(ref: DbObjectRef): string {
+  const enc = encodeURIComponent;
+  return `/object-sql?kind=${enc(ref.kind)}&name=${enc(ref.name)}`
+    + (ref.schema ? `&schema=${enc(ref.schema)}` : "")
+    + (ref.args !== undefined ? `&args=${enc(ref.args)}` : "")
+    + (ref.table ? `&table=${enc(ref.table)}` : "");
+}

package/src/web/components/database/sql-object/sql-object-tab.tsx

@@ -0,0 +1,138 @@
+/**
+ * DBGate's SQL object tab: one object's SQL, read-only — a table's CREATE TABLE, or its SELECT or
+ * INSERT; a view's, a routine's, a trigger's or a sequence's own CREATE — and a button per script
+ * that opens it in a new Query tab, where it can be edited and run.
+ */
+import { useState } from "react";
+import Editor from "@monaco-editor/react";
+import { ChevronDown, Code, FolderTree, SquareTerminal, Table } from "@/lib/icons";
+import { cn } from "@/lib/utils";
+import { targetLabel, type DbScriptKind } from "@/lib/db-tabs";
+import { EDITOR_FONT_FAMILY } from "@/lib/editor-font";
+import { useMonacoTheme } from "@/lib/use-monaco-theme";
+import { prepareMonacoTheme } from "@/theme/adapters/monaco-adapter";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+import { useTabStore } from "@/stores/tab-store";
+import type { DbObjectKind, DbObjectScripts } from "../../../../shared/db-structure";
+import { useDbTab } from "../use-db-tab";
+import { useDbRead } from "../use-db-read";
+import { openQueryTab, openStructureTab, openTableTab, type DbRelation } from "../explorer/open-db-tabs";
+import { DbTabHeader, DbTabState, DbToolButton, DbToolbar } from "../db-tab-parts";
+import { objectSqlPath, scriptChoices } from "./sql-object-model";
+
+interface Props { metadata?: Record<string, unknown>; tabId?: string }
+
+export function SqlObjectTab({ metadata, tabId }: Props) {
+  const tab = useDbTab(metadata, tabId);
+  const kind = metadata?.objectKind as DbObjectKind | undefined;
+  const name = typeof metadata?.objectName === "string" ? metadata.objectName : "";
+  const schemaName = typeof metadata?.schemaName === "string" ? metadata.schemaName : "";
+  const args = typeof metadata?.objectArgs === "string" ? metadata.objectArgs : undefined;
+  const owner = typeof metadata?.objectTable === "string" ? metadata.objectTable : undefined;
+  const path = kind && name ? objectSqlPath({ kind, name, schema: schemaName || null, args, table: owner }) : null;
+  const read = useDbRead<DbObjectScripts>(tab.missing ? null : tab.target, path, tabId);
+  const scripts = read.data;
+  // What the object is, once the server said: a name from the table cache may be a view.
+  const actual = scripts?.kind ?? kind ?? "table";
+  const choices = scriptChoices(actual, scripts);
+  const [picked, setPicked] = useState<DbScriptKind>("create");
+  const shown = choices.find((c) => c.kind === picked) ?? choices[0];
+  const isRelation = actual === "table" || actual === "view" || actual === "matview";
+
+  const rel: DbRelation = { schema: schemaName || null, name, kind: actual };
+  const openStructure = () => { if (tab.place) openStructureTab(tab.place, rel); };
+  const openData = () => { if (tab.place) openTableTab(tab.place, rel); };
+  const openScript = (sql: string) => { if (tab.place) openQueryTab(tab.place, sql); };
+  const close = tabId ? () => useTabStore.getState().closeTab(tabId) : undefined;
+
+  if (tab.missing) return <DbTabState empty="This connection no longer exists." />;
+
+  return (
+    <div className="flex h-full w-full flex-col overflow-hidden">
+      <DbTabHeader
+        title={name}
+        subtitle={[targetLabel(tab.target, tab.name), schemaName, "SQL"].filter(Boolean).join(" · ")}
+        color={tab.conn?.color ?? (metadata?.connectionColor as string | undefined)}
+        onClose={close}
+      />
+      {/* On a phone its button is in the thumb zone, so an object with one script leaves it empty. */}
+      <DbToolbar label={`${name} SQL`} className={cn(!isRelation && choices.length <= 1 && "max-md:hidden")}>
+        {isRelation && (
+          <>
+            <DbToolButton icon={FolderTree} label="Structure" title={`Open the structure of ${name} in its own tab`} onClick={openStructure} opensTab disabled={!tab.place} />
+            <DbToolButton icon={Table} label="Data" title={`Open the data of ${name}`} onClick={openData} opensTab disabled={!tab.place} />
+          </>
+        )}
+        {choices.length > 1 && (
+          <span className="relative mx-1 flex min-w-[150px] shrink-0 max-md:min-w-0 max-md:flex-1">
+            <select
+              aria-label="Script shown" value={shown?.kind} onChange={(e) => setPicked(e.target.value as DbScriptKind)}
+              className="h-[26px] w-full min-w-0 appearance-none rounded-[5px] border border-border bg-input pr-[26px] pl-2 text-xs text-foreground outline-none focus:border-primary max-md:h-11 max-md:text-sm"
+            >
+              {choices.map((c) => <option key={c.kind} value={c.kind}>{c.label}</option>)}
+            </select>
+            <ChevronDown className="pointer-events-none absolute top-1/2 right-1.5 size-3.5 -translate-y-1/2 text-text-subtle" />
+          </span>
+        )}
+        {choices.map((c) => (
+          <DbToolButton
+            key={c.kind} icon={SquareTerminal} label={c.label} title="Open this script in a new Query tab"
+            onClick={() => openScript(c.sql)} disabled={!tab.place} className="max-md:hidden"
+          />
+        ))}
+      </DbToolbar>
+      <div className="min-h-0 flex-1 overflow-hidden bg-input">
+        {shown ? (
+          <ReadOnlySql sql={shown.sql} />
+        ) : (
+          <DbTabState loading={read.loading || (!read.error && !read.driver)} error={read.error} driver={read.driver} />
+        )}
+      </div>
+      {shown && (
+        // Three buttons with one icon say nothing on a phone, so it keeps one, for the script shown —
+        // down here, as the Query tab's Run is: in the toolbar it took the width that the script's
+        // name needs, and "CREATE MATERIALIZED VIEW" was cut short at 390px.
+        <div className="flex shrink-0 gap-2 border-t border-border bg-panel-2 p-2 pb-[max(0.5rem,env(safe-area-inset-bottom))] md:hidden">
+          <button
+            type="button" onClick={() => openScript(shown.sql)} disabled={!tab.place}
+            className="flex h-11 flex-1 items-center justify-center gap-2 rounded-md bg-primary text-sm font-medium text-primary-foreground disabled:opacity-50"
+          >
+            <SquareTerminal className="size-4" />Open in a new Query tab
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function ReadOnlySql({ sql }: { sql: string }) {
+  const theme = useMonacoTheme();
+  const isMobile = useIsMobile();
+  return (
+    <Editor
+      beforeMount={prepareMonacoTheme}
+      height="100%"
+      language="sql"
+      theme={theme}
+      value={sql}
+      loading={<Code className="size-5 text-text-subtle" />}
+      options={{
+        readOnly: true,
+        domReadOnly: true,
+        fontFamily: EDITOR_FONT_FAMILY,
+        fontSize: 13,
+        minimap: { enabled: false },
+        scrollBeyondLastLine: false,
+        // A phone cannot scroll sideways through a long constraint line one-handed.
+        wordWrap: isMobile ? "on" : "off",
+        renderLineHighlight: "none",
+        overviewRulerLanes: 0,
+        hideCursorInOverviewRuler: true,
+        folding: false,
+        padding: { top: 8, bottom: 8 },
+        scrollbar: { verticalScrollbarSize: 8, horizontalScrollbarSize: 8 },
+        fixedOverflowWidgets: true,
+      }}
+    />
+  );
+}