@hienlh/ppm 0.9.64 → 0.9.66

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

@@ -0,0 +1,301 @@
+import type * as MonacoType from "monaco-editor";
+
+export interface SchemaInfo {
+  tables: { name: string; schema: string }[];
+  getColumns: (table: string, schema?: string) => Promise<{ name: string; type: string }[]>;
+}
+
+export const SQL_KEYWORDS = [
+  "SELECT", "FROM", "WHERE", "INSERT", "INTO", "VALUES",
+  "UPDATE", "SET", "DELETE", "CREATE", "TABLE", "ALTER",
+  "DROP", "INDEX", "JOIN", "LEFT", "RIGHT", "INNER",
+  "OUTER", "ON", "AND", "OR", "NOT", "NULL", "IS",
+  "IN", "LIKE", "BETWEEN", "HAVING", "LIMIT", "OFFSET",
+  "AS", "DISTINCT", "COUNT", "SUM", "AVG", "MIN", "MAX",
+  "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",
+];
+
+export const AGGREGATE_FNS = ["COUNT", "SUM", "AVG", "MIN", "MAX"];
+export const OPERATORS = ["=", "!=", "<>", ">", "<", ">=", "<=", "LIKE", "ILIKE", "IN", "NOT IN", "BETWEEN", "IS NULL", "IS NOT NULL"];
+export const SORT_DIRS = ["ASC", "DESC"];
+
+/** Client-side column cache to avoid redundant fetches */
+const columnCache = new 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",
+]);
+
+/** Extract tables referenced in FROM/JOIN/UPDATE/INTO clauses */
+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);
+    }
+  }
+  return { tableRefs, aliasMap };
+}
+
+/** Resolve alias or table name to real table name */
+export function resolveTable(name: string, aliasMap: Map<string, string>): string {
+  return aliasMap.get(name.toLowerCase()) ?? name;
+}
+
+/** Fetch columns for a table (cached) */
+async function getColumns(tableName: string, schemaInfo: SchemaInfo): Promise<{ name: string; type: string }[]> {
+  const key = tableName.toLowerCase();
+  let cols = columnCache.get(key);
+  if (!cols) {
+    try {
+      cols = await schemaInfo.getColumns(tableName);
+      columnCache.set(key, cols);
+    } catch { cols = []; }
+  }
+  return cols;
+}
+
+/** Build column suggestions from all referenced tables */
+async function columnSuggestions(
+  tableRefs: Set<string>,
+  schemaInfo: SchemaInfo,
+  monaco: typeof MonacoType,
+  range: MonacoType.IRange,
+): 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);
+    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,
+        range,
+        sortText: "0" + col.name,
+      });
+    }
+  }
+  return items;
+}
+
+/**
+ * Determine the SQL completion context from text before cursor.
+ * Returns a context tag used to decide which suggestions to show.
+ * Exported for testing.
+ */
+export function getCompletionContext(textUntilPosition: string): string {
+  // 1. After "alias." or "table." → dot completion
+  if (/(\w+)\.\s*$/.test(textUntilPosition)) return "dot";
+
+  // 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);
+  if (orderByColMatch) {
+    const partial = orderByColMatch[1]!.toUpperCase();
+    if (partial === "ASC" || partial === "DESC") return "after-direction";
+    return "sort-direction";
+  }
+
+  // 3. After ORDER BY col ASC/DESC, → more columns after comma
+  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";
+
+  // 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";
+
+  // 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";
+
+  // 8. After comma with table refs → more columns
+  if (/,\s*\w*$/.test(textUntilPosition)) return "comma-cols";
+
+  // 9. Default
+  return "default";
+}
+
+export function createSqlCompletionProvider(
+  monaco: typeof MonacoType,
+  schemaInfo: SchemaInfo,
+): MonacoType.languages.CompletionItemProvider {
+  return {
+    triggerCharacters: [".", ","],
+    provideCompletionItems: async (model, position) => {
+      try {
+        const textUntilPosition = model.getValueInRange({
+          startLineNumber: 1, startColumn: 1,
+          endLineNumber: position.lineNumber, endColumn: position.column,
+        });
+        const word = model.getWordUntilPosition(position);
+        const range: MonacoType.IRange = {
+          startLineNumber: position.lineNumber, endLineNumber: position.lineNumber,
+          startColumn: word.startColumn, endColumn: word.endColumn,
+        };
+        const fullText = model.getValue();
+        const { tableRefs, aliasMap } = extractTableRefs(fullText);
+        const suggestions: MonacoType.languages.CompletionItem[] = [];
+        const ctx = getCompletionContext(textUntilPosition);
+
+        // ─── 1. After "alias." or "table." → columns of that table ───
+        if (ctx === "dot") {
+          const dotMatch = textUntilPosition.match(/(\w+)\.\s*$/);
+          if (dotMatch) {
+            const ref = dotMatch[1]!;
+            const realTable = resolveTable(ref, aliasMap);
+            const cols = await getColumns(realTable, 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,
+                range,
+              });
+            }
+          }
+          return { suggestions };
+        }
+
+        // ─── 2. After ORDER BY col → ASC, DESC ───
+        if (ctx === "sort-direction") {
+          for (const dir of SORT_DIRS) {
+            suggestions.push({
+              label: dir,
+              kind: monaco.languages.CompletionItemKind.Keyword,
+              insertText: dir,
+              range,
+              sortText: "0" + dir,
+            });
+          }
+          return { suggestions };
+        }
+
+        // ─── 3. After ASC/DESC → nothing special ───
+        if (ctx === "after-direction") return { suggestions: [] };
+
+        // ─── 4. After ORDER BY col ASC/DESC, → more columns ───
+        if (ctx === "order-by-next-col") {
+          suggestions.push(...await columnSuggestions(tableRefs, schemaInfo, monaco, range));
+          return { suggestions };
+        }
+
+        // ─── 5. After WHERE/AND/OR col → operators ───
+        if (ctx === "operator") {
+          for (const op of OPERATORS) {
+            suggestions.push({
+              label: op,
+              kind: monaco.languages.CompletionItemKind.Operator,
+              insertText: op,
+              range,
+              sortText: "0" + op,
+            });
+          }
+          return { suggestions };
+        }
+
+        // ─── 6. After FROM/JOIN/INTO/UPDATE/TABLE → table names ───
+        if (ctx === "table") {
+          for (const t of schemaInfo.tables) {
+            suggestions.push({
+              label: t.name,
+              kind: monaco.languages.CompletionItemKind.Struct,
+              detail: t.schema,
+              insertText: t.name,
+              range,
+              sortText: "0" + t.name,
+            });
+          }
+          return { suggestions };
+        }
+
+        // ─── 7. After INSERT INTO table ( → columns ───
+        if (ctx === "insert-cols") {
+          suggestions.push(...await columnSuggestions(tableRefs, schemaInfo, monaco, range));
+          return { suggestions };
+        }
+
+        // ─── 8. After SELECT/WHERE/ORDER BY/... → columns + keywords ───
+        if (ctx === "columns") {
+          suggestions.push(...await columnSuggestions(tableRefs, schemaInfo, monaco, range));
+          if (/\bSELECT\s+/i.test(textUntilPosition)) {
+            suggestions.push({
+              label: "*",
+              kind: monaco.languages.CompletionItemKind.Value,
+              insertText: "*",
+              range,
+              sortText: "00*",
+            });
+            for (const fn of AGGREGATE_FNS) {
+              suggestions.push({
+                label: `${fn}()`,
+                kind: monaco.languages.CompletionItemKind.Function,
+                insertText: `${fn}($0)`,
+                insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+                range,
+                sortText: "1" + fn,
+              });
+            }
+          }
+          for (const kw of SQL_KEYWORDS) {
+            suggestions.push({
+              label: kw, kind: monaco.languages.CompletionItemKind.Keyword,
+              insertText: kw, range, sortText: "3" + kw,
+            });
+          }
+          return { suggestions };
+        }
+
+        // ─── 9. After comma → more columns ───
+        if (ctx === "comma-cols" && tableRefs.size > 0) {
+          suggestions.push(...await columnSuggestions(tableRefs, schemaInfo, monaco, range));
+          return { suggestions };
+        }
+
+        // ─── 10. Default: keywords + table names ───
+        for (const kw of SQL_KEYWORDS) {
+          suggestions.push({
+            label: kw, kind: monaco.languages.CompletionItemKind.Keyword,
+            insertText: kw, range, sortText: "2" + kw,
+          });
+        }
+        for (const t of schemaInfo.tables) {
+          suggestions.push({
+            label: t.name, kind: monaco.languages.CompletionItemKind.Struct,
+            detail: t.schema, insertText: t.name, range, sortText: "1" + t.name,
+          });
+        }
+        return { suggestions };
+      } catch {
+        // Never let the provider throw — Monaco silently falls back to word-based suggestions
+        return { suggestions: [] };
+      }
+    },
+  };
+}
+
+/** Clear the internal column cache (call on connection change) */
+export function clearCompletionCache() {
+  columnCache.clear();
+}

package/src/web/components/database/sql-query-editor.tsx

@@ -0,0 +1,123 @@
+import { useState, useCallback, useRef, useEffect } from "react";
+import Editor, { type OnMount } from "@monaco-editor/react";
+import type * as MonacoType from "monaco-editor";
+import { useMonacoTheme } from "@/lib/use-monaco-theme";
+import { createSqlCompletionProvider, clearCompletionCache, type SchemaInfo } from "./sql-completion-provider";
+
+interface SqlQueryEditorProps {
+  onExecute: (sql: string) => void;
+  loading: boolean;
+  defaultValue?: string;
+  schemaInfo?: SchemaInfo;
+}
+
+/** Find the SQL statement surrounding the cursor line (split by ;) */
+export function getStatementAtCursor(text: string, cursorLine: number): string {
+  const lines = text.split("\n");
+  // Find statement boundaries (lines where a statement ends with ;)
+  let stmtStart = 0;
+  for (let i = 0; i < lines.length; i++) {
+    const trimmed = lines[i]!.trim();
+    if (i < cursorLine - 1 && trimmed.endsWith(";")) {
+      stmtStart = i + 1;
+    }
+  }
+  // Find statement end
+  let stmtEnd = lines.length - 1;
+  for (let i = cursorLine - 1; i < lines.length; i++) {
+    const trimmed = lines[i]!.trim();
+    if (trimmed.endsWith(";")) {
+      stmtEnd = i;
+      break;
+    }
+  }
+  // Skip leading empty/comment lines
+  while (stmtStart <= stmtEnd) {
+    const t = lines[stmtStart]!.trim();
+    if (t && !t.startsWith("--")) break;
+    stmtStart++;
+  }
+  return lines.slice(stmtStart, stmtEnd + 1).join("\n").trim();
+}
+
+/** Shared Monaco-based SQL query editor (editor only, no results) */
+export function SqlQueryEditor({ onExecute, loading, defaultValue = "SELECT * FROM ", schemaInfo }: SqlQueryEditorProps) {
+  const [query, setQuery] = useState(defaultValue);
+  const editorRef = useRef<MonacoType.editor.IStandaloneCodeEditor | null>(null);
+  const monacoRef = useRef<typeof MonacoType | null>(null);
+  const disposableRef = useRef<MonacoType.IDisposable | null>(null);
+  const onExecuteRef = useRef(onExecute);
+  onExecuteRef.current = onExecute;
+  const monacoTheme = useMonacoTheme();
+
+  useEffect(() => {
+    if (!monacoRef.current || !schemaInfo) return;
+    disposableRef.current?.dispose();
+    clearCompletionCache();
+    disposableRef.current = monacoRef.current.languages.registerCompletionItemProvider(
+      "sql",
+      createSqlCompletionProvider(monacoRef.current, schemaInfo),
+    );
+    return () => { disposableRef.current?.dispose(); };
+  }, [schemaInfo]);
+
+  const handleMount: OnMount = useCallback((editor, monaco) => {
+    editorRef.current = editor;
+    monacoRef.current = monaco;
+
+    // Cmd/Ctrl+Enter: run statement at cursor
+    editor.addAction({
+      id: "run-query-at-cursor",
+      label: "Run Statement at Cursor",
+      keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter],
+      run: (ed) => {
+        const pos = ed.getPosition();
+        if (!pos) return;
+        const text = ed.getValue();
+        const stmt = getStatementAtCursor(text, pos.lineNumber);
+        if (stmt) onExecuteRef.current(stmt);
+      },
+    });
+
+    if (schemaInfo) {
+      disposableRef.current?.dispose();
+      disposableRef.current = monaco.languages.registerCompletionItemProvider(
+        "sql",
+        createSqlCompletionProvider(monaco, schemaInfo),
+      );
+    }
+  }, [schemaInfo]);
+
+  useEffect(() => { setQuery(defaultValue); }, [defaultValue]);
+
+  return (
+    <div className="h-full overflow-hidden">
+      <Editor
+        height="100%"
+        language="sql"
+        theme={monacoTheme}
+        value={query}
+        onChange={(v) => setQuery(v ?? "")}
+        onMount={handleMount}
+        options={{
+          minimap: { enabled: false },
+          lineNumbers: "off",
+          scrollBeyondLastLine: false,
+          wordWrap: "on",
+          fontSize: 12,
+          tabSize: 2,
+          renderLineHighlight: "none",
+          overviewRulerLanes: 0,
+          hideCursorInOverviewRuler: true,
+          scrollbar: { vertical: "auto", horizontal: "auto", verticalScrollbarSize: 6, horizontalScrollbarSize: 6 },
+          padding: { top: 4, bottom: 4 },
+          lineDecorationsWidth: 4,
+          lineNumbersMinChars: 0,
+          glyphMargin: false,
+          folding: false,
+          fixedOverflowWidgets: true,
+        }}
+      />
+    </div>
+  );
+}

package/src/web/components/database/use-connections.ts

@@ -76,6 +76,13 @@ export function useConnections() {
     return api.post(`/api/db/connections/${id}/test`);
   }, []);
 
+  const testRawConnection = useCallback(async (
+    type: "sqlite" | "postgres",
+    connectionConfig: { type: string; path?: string; connectionString?: string },
+  ): Promise<{ ok: boolean; error?: string }> => {
+    return api.post("/api/db/test", { type, connectionConfig });
+  }, []);
+
   const refreshTables = useCallback(async (id: number): Promise<void> => {
     const raw = await api.get<{ name: string; schema: string; rowCount: number }[]>(`/api/db/connections/${id}/tables`);
     const tables: CachedTable[] = raw.map((t) => ({
@@ -88,6 +95,19 @@ export function useConnections() {
     setCachedTables((prev) => new Map(prev).set(id, tables));
   }, []);
 
+  /** Fetch column metadata for a table (lazy loaded for schema tree) */
+  const [columnCache, setColumnCache] = useState<Map<string, { name: string; type: string; nullable: boolean; pk: boolean; fk: { table: string; column: string } | null }[]>>(new Map());
+  const fetchColumns = useCallback(async (connId: number, table: string, schema?: string): Promise<{ name: string; type: string; nullable: boolean; pk: boolean; fk: { table: string; column: string } | null }[]> => {
+    const cacheKey = `${connId}:${schema ?? "main"}.${table}`;
+    const cached = columnCache.get(cacheKey);
+    if (cached) return cached;
+    const cols = await api.get<{ name: string; type: string; nullable: boolean; pk: boolean; fk: { table: string; column: string } | null }[]>(
+      `/api/db/connections/${connId}/schema?table=${encodeURIComponent(table)}${schema ? `&schema=${encodeURIComponent(schema)}` : ""}`,
+    );
+    setColumnCache((prev) => new Map(prev).set(cacheKey, cols));
+    return cols;
+  }, [columnCache]);
+
   const exportConnections = useCallback(async () => {
     return api.get<{ version: number; exported_at: string; connections: unknown[] }>("/api/db/connections/export");
   }, []);
@@ -100,5 +120,5 @@ export function useConnections() {
     return result;
   }, [fetchConnections]);
 
-  return { connections, loading, cachedTables, createConnection, updateConnection, deleteConnection, testConnection, refreshTables, exportConnections, importConnections };
+  return { connections, loading, cachedTables, columnCache, createConnection, updateConnection, deleteConnection, testConnection, testRawConnection, refreshTables, fetchColumns, exportConnections, importConnections };
 }

package/src/web/components/database/use-database.ts

@@ -3,7 +3,7 @@ import { api } from "@/lib/api-client";
 
 export interface DbTableInfo { name: string; schema: string; rowCount: number }
 export interface DbColumnInfo { name: string; type: string; nullable: boolean; pk: boolean; defaultValue: string | null }
-export interface DbQueryResult { columns: string[]; rows: Record<string, unknown>[]; rowsAffected: number; changeType: "select" | "modify" }
+export interface DbQueryResult { columns: string[]; rows: Record<string, unknown>[]; rowsAffected: number; changeType: "select" | "modify"; executionTimeMs?: number }
 interface DbTableData { columns: string[]; rows: Record<string, unknown>[]; total: number; page: number; limit: number }
 
 /** SessionStorage cache key for table data */
@@ -33,22 +33,28 @@ export function useDatabase(connectionId: number) {
   const [selectedSchema, setSelectedSchema] = useState("public");
   const [tableData, setTableData] = useState<DbTableData | null>(null);
   const [schema, setSchema] = useState<DbColumnInfo[]>([]);
-  const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [page, setPageState] = useState(1);
   const [queryResult, setQueryResult] = useState<DbQueryResult | null>(null);
   const [queryError, setQueryError] = useState<string | null>(null);
   const [queryLoading, setQueryLoading] = useState(false);
+  // Sort state
+  const [orderBy, setOrderBy] = useState<string | null>(null);
+  const [orderDir, setOrderDir] = useState<"ASC" | "DESC">("ASC");
 
   // Fetch table data + schema for current selection
-  const fetchTableData = useCallback(async (table?: string, tableSchema?: string, p?: number) => {
+  const fetchTableData = useCallback(async (table?: string, tableSchema?: string, p?: number, sortCol?: string | null, sortDir?: "ASC" | "DESC") => {
     const t = table ?? selectedTable;
     const s = tableSchema ?? selectedSchema;
     if (!t) return;
     setLoading(true);
+    const ob = sortCol !== undefined ? sortCol : orderBy;
+    const od = sortDir ?? orderDir;
     try {
+      const orderParams = ob ? `&orderBy=${encodeURIComponent(ob)}&orderDir=${od}` : "";
       const [data, cols] = await Promise.all([
-        api.get<DbTableData>(`${base}/data?table=${encodeURIComponent(t)}&schema=${s}&page=${p ?? page}&limit=100`),
+        api.get<DbTableData>(`${base}/data?table=${encodeURIComponent(t)}&schema=${s}&page=${p ?? page}&limit=100${orderParams}`),
         api.get<DbColumnInfo[]>(`${base}/schema?table=${encodeURIComponent(t)}&schema=${s}`),
       ]);
       setTableData(data);
@@ -59,7 +65,7 @@ export function useDatabase(connectionId: number) {
     } finally {
       setLoading(false);
     }
-  }, [base, connectionId, selectedTable, selectedSchema, page]);
+  }, [base, connectionId, selectedTable, selectedSchema, page, orderBy, orderDir]);
 
   const selectTable = useCallback((name: string, tableSchema = "public") => {
     setSelectedTable(name);
@@ -123,10 +129,56 @@ export function useDatabase(connectionId: number) {
     }
   }, [base, selectedTable, selectedSchema, fetchTableData]);
 
+  /** Toggle sort: none → ASC → DESC → none */
+  const toggleSort = useCallback((column: string) => {
+    let newCol: string | null;
+    let newDir: "ASC" | "DESC" = "ASC";
+    if (orderBy !== column) {
+      newCol = column; newDir = "ASC";
+    } else if (orderDir === "ASC") {
+      newCol = column; newDir = "DESC";
+    } else {
+      newCol = null; newDir = "ASC";
+    }
+    setOrderBy(newCol);
+    setOrderDir(newDir);
+    setPageState(1);
+    fetchTableData(undefined, undefined, 1, newCol, newDir);
+  }, [orderBy, orderDir, fetchTableData]);
+
+  /** Bulk delete rows */
+  const bulkDelete = useCallback(async (pkColumn: string, pkValues: unknown[]) => {
+    if (!selectedTable) return;
+    const t = selectedTable;
+    const s = selectedSchema;
+    try {
+      await api.post(`${base}/rows/delete`, { table: t, schema: s, pkColumn, pkValues });
+      fetchTableData(t, s);
+    } catch (e) {
+      setError((e as Error).message);
+    }
+  }, [base, selectedTable, selectedSchema, fetchTableData]);
+
+  /** Insert a new row */
+  const insertRow = useCallback(async (values: Record<string, unknown>) => {
+    if (!selectedTable) return;
+    const t = selectedTable;
+    const s = selectedSchema;
+    try {
+      await api.post(`${base}/row`, { table: t, schema: s, values });
+      fetchTableData(t, s);
+    } catch (e) {
+      setError((e as Error).message);
+      throw e;
+    }
+  }, [base, selectedTable, selectedSchema, fetchTableData]);
+
   return {
-    selectedTable, selectTable, tableData, schema,
+    selectedTable, selectedSchema, selectTable, tableData, schema,
     loading, error, page, setPage: changePage,
+    orderBy, orderDir, toggleSort,
     queryResult, queryError, queryLoading, executeQuery,
-    updateCell, deleteRow, refreshData: fetchTableData,
+    updateCell, deleteRow, bulkDelete, insertRow,
+    refreshData: fetchTableData,
   };
 }