@hienlh/ppm 0.13.9 → 0.13.11

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

@@ -9,6 +9,8 @@ interface SqlQueryEditorProps {
   loading: boolean;
   defaultValue?: string;
   schemaInfo?: SchemaInfo;
+  /** Unique key for caching query text in sessionStorage (e.g. connectionId) */
+  cacheKey?: string;
 }
 
 /** Find the SQL statement surrounding the cursor line (split by ;) */
@@ -41,8 +43,13 @@ export function getStatementAtCursor(text: string, cursorLine: number): string {
 }
 
 /** 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);
+export function SqlQueryEditor({ onExecute, loading, defaultValue = "SELECT * FROM ", schemaInfo, cacheKey }: SqlQueryEditorProps) {
+  const storageKey = cacheKey ? `ppm:sql-query:${cacheKey}` : null;
+  const [query, setQuery] = useState(() => {
+    if (storageKey) { try { return sessionStorage.getItem(storageKey) ?? defaultValue; } catch { /* */ } }
+    return defaultValue;
+  });
+  const userEditedRef = useRef(false);
   const editorRef = useRef<MonacoType.editor.IStandaloneCodeEditor | null>(null);
   const monacoRef = useRef<typeof MonacoType | null>(null);
   const disposableRef = useRef<MonacoType.IDisposable | null>(null);
@@ -88,7 +95,10 @@ export function SqlQueryEditor({ onExecute, loading, defaultValue = "SELECT * FR
     }
   }, [schemaInfo]);
 
-  useEffect(() => { setQuery(defaultValue); }, [defaultValue]);
+  // Sync from defaultValue only if user hasn't manually edited
+  useEffect(() => {
+    if (!userEditedRef.current) setQuery(defaultValue);
+  }, [defaultValue]);
 
   return (
     <div className="h-full overflow-hidden">
@@ -97,7 +107,7 @@ export function SqlQueryEditor({ onExecute, loading, defaultValue = "SELECT * FR
         language="sql"
         theme={monacoTheme}
         value={query}
-        onChange={(v) => setQuery(v ?? "")}
+        onChange={(v) => { const val = v ?? ""; setQuery(val); userEditedRef.current = true; if (storageKey) try { sessionStorage.setItem(storageKey, val); } catch {} }}
         onMount={handleMount}
         options={{
           minimap: { enabled: false },

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

@@ -2,7 +2,7 @@ import { useState, useCallback } from "react";
 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 DbColumnInfo { name: string; type: string; nullable: boolean; pk: boolean; defaultValue: string | null; fk?: { table: string; column: string } | null }
 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 }
 
@@ -146,6 +146,14 @@ export function useDatabase(connectionId: number) {
     fetchTableData(undefined, undefined, 1, newCol, newDir);
   }, [orderBy, orderDir, fetchTableData]);
 
+  /** Clear sort entirely */
+  const clearSort = useCallback(() => {
+    setOrderBy(null);
+    setOrderDir("ASC");
+    setPageState(1);
+    fetchTableData(undefined, undefined, 1, null, "ASC");
+  }, [fetchTableData]);
+
   /** Bulk delete rows */
   const bulkDelete = useCallback(async (pkColumn: string, pkValues: unknown[]) => {
     if (!selectedTable) return;
@@ -191,7 +199,7 @@ export function useDatabase(connectionId: number) {
   return {
     selectedTable, selectedSchema, selectTable, tableData, schema,
     loading, error, page, setPage: changePage,
-    orderBy, orderDir, toggleSort,
+    orderBy, orderDir, toggleSort, clearSort,
     queryResult, queryError, queryLoading, executeQuery,
     updateCell, deleteRow, bulkDelete, insertRow,
     refreshData: fetchTableData, queryAsTable,

package/src/web/components/database/use-glide-cell-content.ts

@@ -2,6 +2,7 @@ import { useCallback, useRef } from "react";
 import { GridCellKind, type GridCell, type EditableGridCell, type Item } from "@glideapps/glide-data-grid";
 import type { GridColumnSchema } from "./glide-grid-types";
 import { formatCellValue } from "./glide-grid-types";
+import type { PendingEdit } from "./use-glide-pending-edits";
 
 /** Map DB type string to Glide cell kind */
 function dbTypeToKind(type: string): GridCellKind {
@@ -13,11 +14,24 @@ function dbTypeToKind(type: string): GridCellKind {
   return GridCellKind.Text;
 }
 
+/** Check if a PK column is auto-increment (serial, identity, nextval default) */
+function isAutoIncrement(col: GridColumnSchema): boolean {
+  const t = col.type.toLowerCase();
+  if (/^(serial|bigserial|smallserial)/.test(t)) return true;
+  if (/^(int|bigint|smallint|integer)/.test(t) && col.defaultValue && /nextval|identity|auto_increment/i.test(col.defaultValue)) return true;
+  // SQLite: INTEGER PRIMARY KEY is auto-increment by default
+  if (t === "integer" && col.pk && !col.defaultValue) return true;
+  return false;
+}
+
 /** Truncate display string for canvas rendering performance */
 function truncateDisplay(val: string, max = 200): string {
   return val.length > max ? val.slice(0, max) + "…" : val;
 }
 
+/** Amber background for cells with pending unsaved edits */
+const PENDING_THEME = { bgCell: "rgba(251, 191, 36, 0.15)" };
+
 interface UseGlideCellContentResult {
   getCellContent: (cell: Item) => GridCell;
   onCellEdited: (cell: Item, newValue: EditableGridCell) => void;
@@ -26,15 +40,16 @@ interface UseGlideCellContentResult {
 /**
  * Provides getCellContent and onCellEdited callbacks for Glide Data Grid.
  * Uses refs for rows/columnOrder to avoid stale closures in canvas render loop.
+ * Integrates with pending edits — shows pending values with amber highlight.
  */
 export function useGlideCellContent(
   rows: Record<string, unknown>[],
   columnOrder: string[],
   schema: GridColumnSchema[],
   pkCol: string | null,
-  onCellUpdate: (pkCol: string, pkVal: unknown, col: string, val: unknown) => void,
+  addPendingEdit: (pkVal: unknown, col: string, newVal: unknown) => void,
+  pendingRef: React.RefObject<Map<string, PendingEdit>>,
 ): UseGlideCellContentResult {
-  // Use refs to avoid stale data in canvas callbacks
   const rowsRef = useRef(rows);
   rowsRef.current = rows;
   const colOrderRef = useRef(columnOrder);
@@ -50,52 +65,72 @@ export function useGlideCellContent(
       return { kind: GridCellKind.Text, data: "", displayData: "", allowOverlay: false };
     }
 
-    const val = row[colName];
     const colSchema = schemaMap.current.get(colName);
     const kind = colSchema ? dbTypeToKind(colSchema.type) : GridCellKind.Text;
     const isPk = colSchema?.pk ?? false;
 
-    // NULL values — styled as italic gray text
+    // Check for pending edit value
+    const pkVal = pkCol ? row[pkCol] : undefined;
+    const isNewRow = typeof pkVal === "string" && pkVal.startsWith("__new_");
+    const pendingKey = `${pkVal}:${colName}`;
+    const pending = pendingRef.current.get(pendingKey);
+    const val = pending !== undefined ? pending.newVal : row[colName];
+    const hasPending = pending !== undefined;
+
+    // New row PK column — auto-increment PKs show "NEW" (readonly), text PKs are editable
+    if (isPk && isNewRow) {
+      const isAuto = colSchema ? isAutoIncrement(colSchema) : false;
+      if (isAuto) {
+        return { kind: GridCellKind.Text, data: "", displayData: "AUTO", allowOverlay: false, readonly: true,
+          themeOverride: { textDark: "#6b7280" } };
+      }
+      // Editable PK (text, uuid, etc.) — show pending value or placeholder
+      const editedVal = pending !== undefined ? String(pending.newVal ?? "") : "";
+      return { kind: GridCellKind.Text, data: editedVal, displayData: editedVal || "Enter ID…",
+        allowOverlay: true, readonly: false,
+        themeOverride: editedVal ? (hasPending ? PENDING_THEME : undefined) : { textDark: "#9ca3af" } };
+    }
+
+    // NULL values — for new rows show default/type hints
     if (val == null) {
+      let placeholder = isNewRow ? "" : "NULL";
+      if (isNewRow && !hasPending && colSchema) {
+        const t = colSchema.type.toLowerCase();
+        if (colSchema.defaultValue) {
+          placeholder = colSchema.defaultValue;
+        } else if (/^(timestamp|datetime|date)/.test(t)) {
+          placeholder = "NOW()";
+        } else if (/^(uuid)/.test(t)) {
+          placeholder = "gen_random_uuid()";
+        }
+      }
       return {
-        kind: GridCellKind.Text,
-        data: "",
-        displayData: "NULL",
-        allowOverlay: !isPk,
-        readonly: isPk,
-        themeOverride: { textDark: "#6b7280" },
+        kind: GridCellKind.Text, data: "", displayData: placeholder,
+        allowOverlay: !isPk, readonly: isPk,
+        themeOverride: hasPending ? PENDING_THEME : (isNewRow || placeholder !== "NULL" ? { textDark: "#9ca3af" } : { textDark: "#6b7280" }),
       };
     }
 
     // Number cells
     if (kind === GridCellKind.Number && typeof val === "number") {
       return {
-        kind: GridCellKind.Number,
-        data: val,
-        displayData: String(val),
-        allowOverlay: !isPk,
-        readonly: isPk,
+        kind: GridCellKind.Number, data: val, displayData: String(val),
+        allowOverlay: !isPk, readonly: isPk,
+        themeOverride: hasPending ? PENDING_THEME : undefined,
       };
     }
 
-    // Boolean cells — display only, edit via text overlay
+    // Boolean cells
     if (kind === GridCellKind.Boolean && typeof val === "boolean") {
-      return {
-        kind: GridCellKind.Boolean,
-        data: val,
-        readonly: isPk,
-        allowOverlay: false,
-      };
+      return { kind: GridCellKind.Boolean, data: val, readonly: isPk, allowOverlay: false };
     }
 
-    // Default: Text cell
+    // Text cell
     const strVal = formatCellValue(val);
     return {
-      kind: GridCellKind.Text,
-      data: strVal,
-      displayData: truncateDisplay(strVal),
-      allowOverlay: !isPk,
-      readonly: isPk,
+      kind: GridCellKind.Text, data: strVal, displayData: truncateDisplay(strVal),
+      allowOverlay: !isPk, readonly: isPk,
+      themeOverride: hasPending ? PENDING_THEME : undefined,
     };
   }, []); // stable — reads from refs
 
@@ -117,8 +152,8 @@ export function useGlideCellContent(
       return;
     }
 
-    onCellUpdate(pkCol, pkVal, colName, parsed);
-  }, [pkCol, onCellUpdate]);
+    addPendingEdit(pkVal, colName, parsed);
+  }, [pkCol, addPendingEdit]);
 
   return { getCellContent, onCellEdited };
 }

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

@@ -11,20 +11,36 @@ interface UseGlideColumnsResult {
   columnOrder: string[];
 }
 
+/** Estimate column width from header name and sample row values */
+function estimateColWidth(name: string, rows: Record<string, unknown>[], type: string): number {
+  const headerW = name.length * 9 + 40; // header text + sort icon + menu icon padding
+  let maxContentW = 0;
+  const sampleCount = Math.min(rows.length, 20);
+  for (let i = 0; i < sampleCount; i++) {
+    const val = rows[i]?.[name];
+    if (val == null) continue;
+    const len = typeof val === "object" ? 12 : String(val).length;
+    maxContentW = Math.max(maxContentW, len * 8);
+  }
+  const isNumeric = /^(int|serial|bigint|smallint|float|double|decimal|numeric|real|money|bool)/.test(type.toLowerCase());
+  const minW = isNumeric ? 80 : 100;
+  return Math.max(minW, Math.min(Math.max(headerW, maxContentW) + 16, 400));
+}
+
 /**
  * Build Glide Data Grid column definitions from schema.
- * Reorders columns: pinned first, then unpinned.
+ * Reorders columns: pinned first, then unpinned. Auto-sizes widths.
  */
 export function useGlideColumns(
   schema: GridColumnSchema[],
   columnNames: string[],
   pinnedCols: Set<string>,
   colWidths: Map<string, number>,
+  rows: Record<string, unknown>[],
   orderBy?: string | null,
   orderDir?: "ASC" | "DESC",
 ): UseGlideColumnsResult {
   return useMemo(() => {
-    // Reorder: pinned first, then rest (preserve original order within each group)
     const pinned = columnNames.filter((c) => pinnedCols.has(c));
     const unpinned = columnNames.filter((c) => !pinnedCols.has(c));
     const ordered = [...pinned, ...unpinned];
@@ -35,27 +51,19 @@ export function useGlideColumns(
       const col = schemaMap.get(name);
       const isPk = col?.pk ?? false;
 
-      // Determine sort icon
       let icon: string | undefined;
       if (orderBy === name) {
         icon = orderDir === "ASC" ? "sortAsc" : "sortDesc";
       } else if (isPk) {
         icon = "headerRowID";
+      } else if (col?.fk) {
+        icon = "headerFk";
       }
 
-      return {
-        title: name,
-        id: name,
-        width: colWidths.get(name) ?? 150,
-        hasMenu: true,
-        icon,
-      };
+      const width = colWidths.get(name) ?? estimateColWidth(name, rows, col?.type ?? "text");
+      return { title: name, id: name, width, hasMenu: true, icon };
     });
 
-    return {
-      columns,
-      freezeColumns: pinned.length,
-      columnOrder: ordered,
-    };
-  }, [schema, columnNames, pinnedCols, colWidths, orderBy, orderDir]);
+    return { columns, freezeColumns: pinned.length, columnOrder: ordered };
+  }, [schema, columnNames, pinnedCols, colWidths, rows, orderBy, orderDir]);
 }

package/src/web/components/database/use-glide-grid-actions.ts

@@ -0,0 +1,164 @@
+import { useState, useCallback, useRef, useEffect } from "react";
+import { useShallow } from "zustand/react/shallow";
+import { useTabStore } from "@/stores/tab-store";
+import type { Item, GridSelection } from "@glideapps/glide-data-grid";
+import type { GridColumnSchema } from "./glide-grid-types";
+import { formatCellValue, detectLang, needsViewer } from "./glide-grid-types";
+import type { PreviewData } from "./glide-data-preview-panel";
+
+interface UseGlideGridActionsParams {
+  displayRows: Record<string, unknown>[];
+  columnOrder: string[];
+  schema: GridColumnSchema[];
+  pkCol: string | null;
+  connectionId?: number;
+  connectionName?: string;
+  selectedTable?: string | null;
+  selectedSchema?: string;
+  addEdit: (pkVal: unknown, col: string, newVal: unknown) => void;
+  /** Current grid selection — needed for document-level paste */
+  gridSelection?: GridSelection;
+  /** Container ref — paste only fires when focus is inside */
+  containerRef?: React.RefObject<HTMLElement | null>;
+}
+
+/**
+ * Extracts preview panel, paste handler, and FK navigation logic
+ * from the main GlideDataGrid component to keep it under 200 lines.
+ */
+export function useGlideGridActions(params: UseGlideGridActionsParams) {
+  const { displayRows, columnOrder, schema, pkCol, connectionId, connectionName, selectedTable, selectedSchema, addEdit, gridSelection, containerRef } = params;
+  const { openTab } = useTabStore(useShallow((s) => ({ openTab: s.openTab })));
+  const [previewData, setPreviewData] = useState<PreviewData | null>(null);
+
+  // Refs to avoid stale closures in canvas callbacks
+  const displayRowsRef = useRef(displayRows);
+  displayRowsRef.current = displayRows;
+  const columnOrderRef = useRef(columnOrder);
+  columnOrderRef.current = columnOrder;
+
+  // Preview panel — inline Monaco viewer for cell/row content
+  const openRowPreview = useCallback((rowIdx: number) => {
+    const row = displayRows[rowIdx]; if (!row) return;
+    const pk = pkCol ? String(row[pkCol] ?? "") : "";
+    const table = selectedTable ?? "";
+    const content = JSON.stringify(row, null, 2);
+    setPreviewData({ title: pk ? `Row #${pk}${table ? ` — ${table}` : ""}` : `Row — ${table}`,
+      content, language: "json", viewerKey: `${connectionId}:${table}:row:${pk}` });
+  }, [displayRows, pkCol, selectedTable, connectionId]);
+
+  const openCellPreview = useCallback((rowIdx: number, colIdx: number) => {
+    const row = displayRows[rowIdx]; if (!row) return;
+    const colName = columnOrder[colIdx]; if (!colName) return;
+    const val = formatCellValue(row[colName]);
+    const pk = pkCol ? String(row[pkCol] ?? rowIdx) : String(rowIdx);
+    const table = selectedTable ?? "";
+    setPreviewData({ title: `${colName} #${pk}${table ? ` — ${table}` : ""}`,
+      content: val, language: detectLang(val), viewerKey: `${connectionId}:${table}:${colName}:${pk}` });
+  }, [displayRows, columnOrder, pkCol, selectedTable, connectionId]);
+
+  const openPreviewInTab = useCallback(() => {
+    if (!previewData) return;
+    openTab({ type: "editor", title: previewData.title, projectId: null, closable: true,
+      metadata: { inlineContent: previewData.content, inlineLanguage: previewData.language, viewerKey: previewData.viewerKey } });
+  }, [openTab, previewData]);
+
+  // Custom paste handler — routes pasted TSV cells through addEdit
+  const handlePaste = useCallback((target: Item, values: readonly (readonly string[])[]) => {
+    if (!pkCol) return false;
+    const [startCol, startRow] = target;
+    for (let r = 0; r < values.length; r++) {
+      const row = displayRowsRef.current[startRow + r];
+      if (!row) continue;
+      const pk = row[pkCol];
+      for (let c = 0; c < values[r]!.length; c++) {
+        const colName = columnOrderRef.current[startCol + c];
+        if (!colName) continue;
+        const colDef = schema.find((s) => s.name === colName);
+        if (colDef?.pk) continue;
+        const raw = values[r]![c]!;
+        addEdit(pk, colName, raw === "" ? null : raw);
+      }
+    }
+    return false; // we handled it
+  }, [pkCol, schema, addEdit]);
+
+  // Document-level paste listener — works even when Glide canvas doesn't have focus
+  const schemaRef = useRef(schema);
+  schemaRef.current = schema;
+  const gridSelRef = useRef(gridSelection);
+  gridSelRef.current = gridSelection;
+  const addEditRef = useRef(addEdit);
+  addEditRef.current = addEdit;
+  const pkColRef = useRef(pkCol);
+  pkColRef.current = pkCol;
+
+  useEffect(() => {
+    if (!containerRef) return;
+    const handler = (e: ClipboardEvent) => {
+      const container = containerRef.current;
+      if (!container || !container.contains(document.activeElement)) return;
+      // Skip if an input/textarea is focused (e.g. search bar)
+      const tag = (document.activeElement as HTMLElement)?.tagName;
+      if (tag === "INPUT" || tag === "TEXTAREA") return;
+      const pk = pkColRef.current;
+      if (!pk) return;
+      const sel = gridSelRef.current?.current;
+      if (!sel) return; // need a selected cell as paste anchor
+      const text = e.clipboardData?.getData("text/plain");
+      if (!text) return;
+      const tsvRows = text.split(/\r?\n/).filter((r) => r.length > 0).map((r) => r.split("\t"));
+      if (tsvRows.length === 0) return;
+      const [startCol, startRow] = sel.cell;
+      for (let r = 0; r < tsvRows.length; r++) {
+        const row = displayRowsRef.current[startRow + r];
+        if (!row) continue;
+        const rowPk = row[pk];
+        for (let c = 0; c < tsvRows[r]!.length; c++) {
+          const colName = columnOrderRef.current[startCol + c];
+          if (!colName) continue;
+          const colDef = schemaRef.current.find((s) => s.name === colName);
+          if (colDef?.pk) continue;
+          const raw = tsvRows[r]![c]!;
+          addEditRef.current(rowPk, colName, raw === "" ? null : raw);
+        }
+      }
+      e.preventDefault();
+    };
+    document.addEventListener("paste", handler);
+    return () => document.removeEventListener("paste", handler);
+  }, [containerRef]);
+
+  // FK detection helpers for context menu
+  const getContextFk = useCallback((colName: string | null) => {
+    if (!colName) return null;
+    return schema.find((s) => s.name === colName)?.fk ?? null;
+  }, [schema]);
+
+  const isCellViewable = useCallback((row: Record<string, unknown> | null, colName: string | null) => {
+    return row && colName ? needsViewer(row[colName]) : false;
+  }, []);
+
+  // FK navigation: open referenced table in new tab filtered by FK value
+  const openFkTable = useCallback((fk: { table: string; column: string }, cellValue: unknown) => {
+    if (cellValue == null || !connectionId) return;
+    openTab({
+      type: "database",
+      title: `${connectionName ?? "DB"} · ${fk.table}`,
+      projectId: null,
+      closable: true,
+      metadata: {
+        connectionId, connectionName,
+        tableName: fk.table,
+        schemaName: selectedSchema ?? "public",
+        initialSql: `SELECT * FROM "${fk.table}" WHERE "${fk.column}" = '${String(cellValue).replace(/'/g, "''")}'`,
+      },
+    });
+  }, [connectionId, connectionName, selectedSchema, openTab]);
+
+  return {
+    previewData, setPreviewData,
+    openRowPreview, openCellPreview, openPreviewInTab,
+    handlePaste, getContextFk, isCellViewable, openFkTable,
+  };
+}

package/src/web/components/database/use-glide-pending-edits.ts

@@ -0,0 +1,72 @@
+import { useState, useCallback, useRef } from "react";
+
+export interface PendingEdit {
+  pkVal: unknown;
+  col: string;
+  newVal: unknown;
+}
+
+interface UseGlidePendingEditsResult {
+  pendingEdits: Map<string, PendingEdit>;
+  pendingRef: React.RefObject<Map<string, PendingEdit>>;
+  addEdit: (pkVal: unknown, col: string, newVal: unknown) => void;
+  commitAll: () => Promise<void>;
+  discardAll: () => void;
+  hasPending: boolean;
+  pendingCount: number;
+  /** True after commitAll until cleared — used to clear edits on rows refresh */
+  committedRef: React.RefObject<boolean>;
+}
+
+/**
+ * Tracks cell edits locally until the user explicitly saves.
+ * After commit, keeps pending values visible until rows refresh (avoids flash of stale data).
+ * Supports inline insert: edits with PK starting "__new_" are routed to onInsertRow.
+ */
+export function useGlidePendingEdits(
+  pkCol: string | null,
+  onCellUpdate: (pkCol: string, pkVal: unknown, col: string, val: unknown) => void,
+  onInsertRow?: (values: Record<string, unknown>) => Promise<void>,
+): UseGlidePendingEditsResult {
+  const [pendingEdits, setPendingEdits] = useState<Map<string, PendingEdit>>(new Map());
+  const pendingRef = useRef(pendingEdits);
+  pendingRef.current = pendingEdits;
+  const committedRef = useRef(false);
+
+  const addEdit = useCallback((pkVal: unknown, col: string, newVal: unknown) => {
+    const key = `${pkVal}:${col}`;
+    setPendingEdits((prev) => new Map(prev).set(key, { pkVal, col, newVal }));
+  }, []);
+
+  const commitAll = useCallback(async () => {
+    if (!pkCol) return;
+    const newRows = new Map<string, Record<string, unknown>>();
+    for (const edit of pendingRef.current.values()) {
+      const pkStr = String(edit.pkVal);
+      if (pkStr.startsWith("__new_")) {
+        if (!newRows.has(pkStr)) newRows.set(pkStr, {});
+        newRows.get(pkStr)![edit.col] = edit.newVal;
+      } else {
+        onCellUpdate(pkCol, edit.pkVal, edit.col, edit.newVal);
+      }
+    }
+    if (onInsertRow) {
+      for (const values of newRows.values()) {
+        await onInsertRow(values);
+      }
+    }
+    committedRef.current = true;
+    // Don't clear — wait for rows prop to refresh so grid doesn't flash stale data
+  }, [pkCol, onCellUpdate, onInsertRow]);
+
+  const discardAll = useCallback(() => {
+    setPendingEdits(new Map());
+    committedRef.current = false;
+  }, []);
+
+  return {
+    pendingEdits, pendingRef, addEdit, commitAll, discardAll,
+    hasPending: pendingEdits.size > 0, pendingCount: pendingEdits.size,
+    committedRef,
+  };
+}

package/src/web/components/database/use-glide-row-pinning.ts

@@ -0,0 +1,35 @@
+import { useState, useMemo } from "react";
+
+interface UseGlideRowPinningResult {
+  /** Rows reordered: unpinned first, pinned at end (frozen via freezeTrailingRows) */
+  effectiveRows: Record<string, unknown>[];
+  /** Number of pinned rows — pass to DataEditor's freezeTrailingRows */
+  pinnedCount: number;
+  pinnedPks: Set<string>;
+  setPinnedPks: React.Dispatch<React.SetStateAction<Set<string>>>;
+}
+
+/**
+ * Manages row pinning state — pinned rows placed at the end of the array
+ * so they can be frozen at the bottom via Glide's freezeTrailingRows.
+ */
+export function useGlideRowPinning(
+  rows: Record<string, unknown>[],
+  pkCol: string | null,
+): UseGlideRowPinningResult {
+  const [pinnedPks, setPinnedPks] = useState<Set<string>>(new Set());
+
+  const effectiveRows = useMemo(() => {
+    if (pinnedPks.size === 0 || !pkCol) return rows;
+    const normal: Record<string, unknown>[] = [];
+    const pinned: Record<string, unknown>[] = [];
+    for (const row of rows) {
+      if (pinnedPks.has(String(row[pkCol] ?? ""))) pinned.push(row); else normal.push(row);
+    }
+    return [...normal, ...pinned];
+  }, [rows, pinnedPks, pkCol]);
+
+  const pinnedCount = pinnedPks.size;
+
+  return { effectiveRows, pinnedCount, pinnedPks, setPinnedPks };
+}

package/src/web/components/editor/code-editor.tsx

@@ -15,8 +15,9 @@ import { SaveAsDialog } from "./save-as-dialog";
 import { EditorMobileToolbar } from "./editor-mobile-toolbar";
 import { createSqlCompletionProvider, clearCompletionCache, type SchemaInfo } from "../database/sql-completion-provider";
 import { useConnections, type Connection } from "../database/use-connections";
-import { DataGrid } from "../database/data-grid";
-import type { DbQueryResult, DbColumnInfo } from "../database/use-database";
+import { GlideDataGrid } from "../database/glide-data-grid";
+import type { GridColumnSchema } from "../database/glide-grid-types";
+import type { DbQueryResult } from "../database/use-database";
 
 const MarkdownRenderer = lazy(() =>
   import("@/components/shared/markdown-renderer").then((m) => ({ default: m.MarkdownRenderer }))
@@ -673,7 +674,7 @@ function SqlResultPanel({ result, error, loading, connName, onClose, onOpenInTab
       : null
   ), [result]);
 
-  const querySchema = useMemo<DbColumnInfo[]>(() => (
+  const querySchema = useMemo<GridColumnSchema[]>(() => (
     (result?.columns ?? []).map((c) => ({ name: c, type: "text", nullable: true, pk: false, defaultValue: null }))
   ), [result?.columns]);
 
@@ -727,8 +728,9 @@ function SqlResultPanel({ result, error, loading, connName, onClose, onOpenInTab
           </div>
         )}
         {tableData && (
-          <DataGrid
-            tableData={tableData} schema={querySchema} loading={false}
+          <GlideDataGrid
+            columns={tableData.columns} rows={tableData.rows} total={tableData.total} limit={tableData.limit}
+            schema={querySchema} loading={false}
             page={1} onPageChange={NOOP} onCellUpdate={NOOP}
             orderBy={null} orderDir="ASC" onToggleSort={NOOP}
             connectionName={connName}

package/src/web/components/layout/editor-panel.tsx

@@ -67,13 +67,13 @@ export function EditorPanel({ panelId, projectName }: EditorPanelProps) {
             const isActive = tab.id === panel.activeTabId;
             if (!Component) {
               return (
-                <div key={tab.id} className={isActive ? "h-full w-full flex items-center justify-center text-muted-foreground" : "hidden"}>
+                <div key={tab.id} className={isActive ? "absolute inset-0 flex items-center justify-center text-muted-foreground" : "hidden"}>
                   Unknown tab type: {tab.type}
                 </div>
               );
             }
             return (
-              <div key={tab.id} className={isActive ? "h-full w-full" : "hidden"}>
+              <div key={tab.id} className="absolute inset-0" style={isActive ? undefined : { opacity: 0, pointerEvents: "none" }}>
                 <Suspense fallback={<div className="flex items-center justify-center h-full"><Loader2 className="size-6 animate-spin text-primary" /></div>}>
                   <Component metadata={tab.metadata} tabId={tab.id} />
                 </Suspense>