@hienlh/ppm 0.13.9 → 0.13.11

package/src/web/components/database/glide-data-grid.tsx

@@ -0,0 +1,207 @@
+import { useState, useCallback, useMemo, useRef, useEffect } from "react";
+import DataEditor, { type GridColumn, type Item } from "@glideapps/glide-data-grid";
+import { Loader2 } from "lucide-react";
+import type { GlideGridProps } from "./glide-grid-types";
+import { useGlideTheme } from "./glide-grid-theme";
+import { useGlideColumns } from "./use-glide-columns";
+import { useGlideCellContent } from "./use-glide-cell-content";
+import { useGlideSelection } from "./use-glide-selection";
+import { useGlidePendingEdits } from "./use-glide-pending-edits";
+import { useGlideRowPinning } from "./use-glide-row-pinning";
+import { useGlideGridActions } from "./use-glide-grid-actions";
+import { GlideHeaderMenu } from "./glide-header-menu";
+import { GlideContextMenu } from "./glide-context-menu";
+import { GlideGridToolbar } from "./glide-grid-toolbar";
+import { GlideSaveBar } from "./glide-save-bar";
+import { GlideGridPagination } from "./glide-grid-pagination";
+import { GlideDataPreviewPanel } from "./glide-data-preview-panel";
+
+const HEADER_ICONS: Record<string, (p: { fgColor: string }) => string> = {
+  sortAsc: (p) => `<svg viewBox="0 0 16 16" fill="${p.fgColor}"><path d="M8 4l4 6H4z"/></svg>`,
+  sortDesc: (p) => `<svg viewBox="0 0 16 16" fill="${p.fgColor}"><path d="M8 12l4-6H4z"/></svg>`,
+  headerFk: () => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="#3b82f6" stroke-width="1.5" stroke-linecap="round"><path d="M6 4.5H4.5a2.5 2.5 0 000 5H6M10 4.5h1.5a2.5 2.5 0 010 5H10M5 7h6"/></svg>`,
+};
+
+/**
+ * Glide Data Grid wrapper for PPM database viewers.
+ * Shared by database-viewer (Postgres/MySQL) and sqlite-viewer.
+ */
+export function GlideDataGrid(props: GlideGridProps) {
+  const {
+    columns: rawColumnNames, rows, total, limit, schema, loading,
+    page, onPageChange, onCellUpdate, onRowDelete, onBulkDelete, onInsertRow,
+    orderBy, orderDir, onToggleSort, onClearSort, columnFilters = {}, onColumnFilter,
+    connectionId, selectedTable, selectedSchema, connectionName,
+  } = props;
+
+  const theme = useGlideTheme();
+  const gridRef = useRef<any>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const columnNames = useMemo(() => {
+    const names = new Set(schema.map((s) => s.name));
+    return rawColumnNames.filter((c) => names.has(c));
+  }, [rawColumnNames, schema]);
+
+  // State
+  const [pinnedCols, setPinnedCols] = useState<Set<string>>(new Set());
+  const [colWidths, setColWidths] = useState<Map<string, number>>(new Map());
+  const [headerMenu, setHeaderMenu] = useState<{ colName: string; bounds: { x: number; y: number; width: number; height: number } } | null>(null);
+  const [contextMenu, setContextMenu] = useState<{ position: { x: number; y: number }; rowIdx: number; colIdx: number } | null>(null);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [insertedRows, setInsertedRows] = useState<Record<string, unknown>[]>([]);
+
+  const pkCol = useMemo(() => {
+    return schema.find((c) => c.pk)?.name ?? schema.find((c) => c.name.toLowerCase() === "id")?.name ?? null;
+  }, [schema]);
+
+  // Row pinning (pinned rows frozen at bottom via freezeTrailingRows)
+  const { effectiveRows, pinnedCount, pinnedPks, setPinnedPks } = useGlideRowPinning(rows, pkCol);
+
+  // Merge rows: unpinned → inserted → pinned (pinned must be last for freezeTrailingRows)
+  const allRows = useMemo(() => {
+    if (pinnedCount === 0) return [...effectiveRows, ...insertedRows];
+    const unpinned = effectiveRows.slice(0, effectiveRows.length - pinnedCount);
+    const pinned = effectiveRows.slice(effectiveRows.length - pinnedCount);
+    return [...unpinned, ...insertedRows, ...pinned];
+  }, [effectiveRows, insertedRows, pinnedCount]);
+  const displayRows = useMemo(() => {
+    if (!searchTerm.trim()) return allRows;
+    const term = searchTerm.toLowerCase();
+    return allRows.filter((row) => columnNames.some((col) => String(row[col] ?? "").toLowerCase().includes(term)));
+  }, [allRows, columnNames, searchTerm]);
+
+  const frozenTrailingRows = useMemo(() => {
+    if (pinnedCount === 0 || !pkCol) return 0;
+    if (!searchTerm.trim()) return pinnedCount;
+    return displayRows.filter((row) => pinnedPks.has(String(row[pkCol] ?? ""))).length;
+  }, [pinnedCount, pkCol, searchTerm, displayRows, pinnedPks]);
+
+  // Hooks
+  const { pendingRef, addEdit, commitAll, discardAll, hasPending, pendingCount, committedRef } = useGlidePendingEdits(pkCol, onCellUpdate, onInsertRow);
+  const { columns, freezeColumns, columnOrder } = useGlideColumns(schema, columnNames, pinnedCols, colWidths, displayRows, orderBy, orderDir);
+  const { getCellContent, onCellEdited } = useGlideCellContent(displayRows, columnOrder, schema, pkCol, addEdit, pendingRef);
+  const { gridSelection, onGridSelectionChange, selectedRowIndices, clearSelection } = useGlideSelection();
+  const {
+    previewData, setPreviewData, openRowPreview, openCellPreview, openPreviewInTab,
+    handlePaste, getContextFk, isCellViewable, openFkTable,
+  } = useGlideGridActions({ displayRows, columnOrder, schema, pkCol, connectionId, connectionName, selectedTable, selectedSchema, addEdit, gridSelection, containerRef });
+
+  useEffect(() => {
+    if (committedRef.current) { committedRef.current = false; discardAll(); setInsertedRows([]); }
+  }, [rows]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handleColumnResize = useCallback((col: GridColumn, newSize: number) => {
+    setColWidths((prev) => new Map(prev).set(col.id ?? col.title, newSize));
+  }, []);
+  const handleHeaderMenuClick = useCallback((colIdx: number, bounds: { x: number; y: number; width: number; height: number }) => {
+    const colName = columnOrder[colIdx]; if (colName) setHeaderMenu({ colName, bounds });
+  }, [columnOrder]);
+  const handleCellContextMenu = useCallback(([colIdx, rowIdx]: Item, event: { preventDefault: () => void; localEventX: number; localEventY: number; bounds: { x: number; y: number } }) => {
+    event.preventDefault();
+    setContextMenu({ position: { x: event.bounds.x + event.localEventX, y: event.bounds.y + event.localEventY }, rowIdx, colIdx });
+  }, []);
+  const togglePinColumn = useCallback((colName: string) => {
+    setPinnedCols((prev) => { const n = new Set(prev); if (n.has(colName)) n.delete(colName); else n.add(colName); return n; });
+  }, []);
+  const togglePinRow = useCallback((rowIdx: number) => {
+    if (!pkCol) return;
+    const row = displayRows[rowIdx]; if (!row) return;
+    const pk = String(row[pkCol] ?? "");
+    setPinnedPks((prev) => { const n = new Set(prev); if (n.has(pk)) n.delete(pk); else n.add(pk); return n; });
+  }, [pkCol, displayRows, setPinnedPks]);
+  const getRowThemeOverride = useCallback((rowIdx: number) => {
+    if (pinnedPks.size === 0 || !pkCol) return undefined;
+    const row = displayRows[rowIdx];
+    if (row && pinnedPks.has(String(row[pkCol] ?? ""))) return { bgCell: theme.bgCellMedium ?? theme.bgHeader };
+    return undefined;
+  }, [pinnedPks, pkCol, displayRows, theme]);
+  const handleBulkDelete = useCallback(() => {
+    if (!pkCol || !onBulkDelete) return;
+    onBulkDelete(pkCol, selectedRowIndices.map((i) => displayRows[i]?.[pkCol]).filter((v) => v != null));
+    clearSelection();
+  }, [pkCol, onBulkDelete, selectedRowIndices, displayRows, clearSelection]);
+
+  const [colSearchOpen, setColSearchOpen] = useState(false);
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === "Escape") { setPreviewData(null); setColSearchOpen(false); return; }
+    if ((e.metaKey || e.ctrlKey) && e.key === "Enter" && hasPending) { e.preventDefault(); commitAll(); }
+    const tag = (e.target as HTMLElement)?.tagName;
+    if (e.key === "/" && tag !== "INPUT" && tag !== "TEXTAREA") { e.preventDefault(); setColSearchOpen(true); }
+  }, [hasPending, commitAll]);
+  const handleRowAppended = useCallback(() => {
+    if (!pkCol || !onInsertRow) return;
+    setInsertedRows((prev) => [...prev, { [pkCol]: `__new_${Date.now()}` }]);
+  }, [pkCol, onInsertRow]);
+  const handleColumnJump = useCallback((colName: string) => {
+    const idx = columnOrder.indexOf(colName);
+    if (idx >= 0 && gridRef.current?.scrollTo) gridRef.current.scrollTo(idx, 0);
+  }, [columnOrder]);
+
+  // Context menu derived state
+  const contextRow = contextMenu ? displayRows[contextMenu.rowIdx] : null;
+  const contextPk = contextRow && pkCol ? String(contextRow[pkCol] ?? "") : "";
+  const contextColName = contextMenu ? columnOrder[contextMenu.colIdx] : null;
+  const contextCellViewable = isCellViewable(contextRow ?? null, contextColName ?? null);
+  const contextFk = getContextFk(contextColName ?? null);
+  const contextCellValue = contextRow && contextColName ? contextRow[contextColName] : null;
+
+  if (!columnNames.length) {
+    return <div className="flex items-center justify-center h-full text-xs text-muted-foreground">
+      {loading ? <Loader2 className="size-4 animate-spin" /> : "Select a table"}
+    </div>;
+  }
+
+  return (
+    <div ref={containerRef} className="flex flex-col h-full overflow-hidden relative" tabIndex={0} onKeyDown={handleKeyDown}>
+      <GlideGridToolbar hasSelection={selectedRowIndices.length > 0} selectedCount={selectedRowIndices.length}
+        onBulkDelete={onBulkDelete && pkCol ? handleBulkDelete : undefined}
+        onInsertRow={onInsertRow && pkCol ? handleRowAppended : undefined}
+        columns={columnNames} selectedRows={selectedRowIndices.map((i) => displayRows[i]!).filter(Boolean)} connectionName={connectionName}
+        searchTerm={searchTerm} onSearchChange={setSearchTerm} onColumnJump={handleColumnJump}
+        colSearchOpen={colSearchOpen} onColSearchChange={setColSearchOpen} />
+
+      {loading && <div className="absolute inset-0 z-30 flex items-center justify-center bg-background/60"><Loader2 className="size-5 animate-spin text-primary" /></div>}
+
+      <div className="flex-1 min-h-0">
+        <DataEditor ref={gridRef} columns={columns} rows={displayRows.length}
+          getCellContent={getCellContent} getCellsForSelection={true}
+          onCellEdited={onCellEdited} onPaste={handlePaste}
+          theme={theme} freezeColumns={freezeColumns} freezeTrailingRows={frozenTrailingRows}
+          rowMarkers={pkCol ? "checkbox-visible" : "number"}
+          gridSelection={gridSelection} onGridSelectionChange={onGridSelectionChange}
+          onColumnResize={handleColumnResize as any}
+          onHeaderMenuClick={handleHeaderMenuClick as any} onCellContextMenu={handleCellContextMenu as any}
+          getRowThemeOverride={getRowThemeOverride as any}
+          trailingRowOptions={onInsertRow && pkCol ? { sticky: true, tint: true } : undefined}
+          onRowAppended={onInsertRow ? handleRowAppended : undefined}
+          headerIcons={HEADER_ICONS} smoothScrollX smoothScrollY width="100%" height="100%" />
+      </div>
+
+      {hasPending && <GlideSaveBar pendingCount={pendingCount} onSave={commitAll} onDiscard={() => { discardAll(); setInsertedRows([]); }} />}
+      {previewData && <GlideDataPreviewPanel data={previewData} onClose={() => setPreviewData(null)} onOpenInTab={openPreviewInTab} />}
+      <GlideGridPagination total={total} page={page} totalPages={Math.ceil(total / limit) || 1} onPageChange={onPageChange} />
+
+      {headerMenu && (
+        <GlideHeaderMenu colName={headerMenu.colName} bounds={headerMenu.bounds}
+          isPinned={pinnedCols.has(headerMenu.colName)} filterValue={columnFilters[headerMenu.colName] ?? ""}
+          sortState={orderBy === headerMenu.colName ? (orderDir === "ASC" ? "asc" : "desc") : null}
+          onFilter={(val) => { if (!onColumnFilter) return; const n = { ...columnFilters }; if (val) n[headerMenu.colName] = val; else delete n[headerMenu.colName]; onColumnFilter(n); }}
+          onSort={() => { if (onToggleSort) onToggleSort(headerMenu.colName); }}
+          onClearSort={onClearSort}
+          onTogglePin={() => togglePinColumn(headerMenu.colName)} onClose={() => setHeaderMenu(null)} />
+      )}
+
+      {contextMenu && contextRow && (
+        <GlideContextMenu position={contextMenu.position} isPinned={pinnedPks.has(contextPk)}
+          onViewRow={() => openRowPreview(contextMenu.rowIdx)}
+          onViewCell={contextCellViewable ? () => openCellPreview(contextMenu.rowIdx, contextMenu.colIdx) : undefined}
+          onPinRow={() => togglePinRow(contextMenu.rowIdx)}
+          onDeleteRow={() => { if (pkCol && onRowDelete && contextRow) onRowDelete(pkCol, contextRow[pkCol]); }}
+          onOpenFkTable={contextFk && contextCellValue != null && connectionId ? () => openFkTable(contextFk, contextCellValue) : undefined}
+          fkLabel={contextFk ? `Open ${contextFk.table}.${contextFk.column}` : undefined}
+          onClose={() => setContextMenu(null)} />
+      )}
+    </div>
+  );
+}

package/src/web/components/database/glide-data-preview-panel.tsx

@@ -0,0 +1,113 @@
+import { useState, useCallback, useRef } from "react";
+import { Eye, Sparkles, WrapText, ExternalLink, X, GripHorizontal } from "lucide-react";
+import Editor from "@monaco-editor/react";
+import { Loader2 } from "lucide-react";
+import { useMonacoTheme } from "@/lib/use-monaco-theme";
+
+export interface PreviewData {
+  title: string;
+  content: string;
+  language: string;
+  viewerKey: string;
+}
+
+interface PreviewPanelProps {
+  data: PreviewData;
+  onClose: () => void;
+  onOpenInTab: () => void;
+}
+
+/** Inline preview panel for cell/row content with Monaco editor */
+export function GlideDataPreviewPanel({ data, onClose, onOpenInTab }: PreviewPanelProps) {
+  const monacoTheme = useMonacoTheme();
+  const [wordWrap, setWordWrap] = useState(true);
+  const [displayContent, setDisplayContent] = useState(data.content);
+  const [beautified, setBeautified] = useState(false);
+  const canBeautify = data.language === "json" || data.language === "xml";
+
+  // Reset state when data changes
+  const prevKey = useRef(data.title);
+  if (prevKey.current !== data.title) {
+    prevKey.current = data.title;
+    setDisplayContent(data.content);
+    setBeautified(false);
+  }
+
+  const toggleBeautify = useCallback(() => {
+    if (beautified) {
+      setDisplayContent(data.content);
+      setBeautified(false);
+    } else if (data.language === "json") {
+      try { setDisplayContent(JSON.stringify(JSON.parse(data.content.trim()), null, 2)); setBeautified(true); } catch { /* invalid */ }
+    } else if (data.language === "xml") {
+      let depth = 0;
+      const formatted = data.content.trim().replace(/>\s*</g, ">\n<").split("\n").map((line) => {
+        const trimmed = line.trim();
+        if (trimmed.startsWith("</")) depth = Math.max(0, depth - 1);
+        const indented = "  ".repeat(depth) + trimmed;
+        if (trimmed.startsWith("<") && !trimmed.startsWith("</") && !trimmed.endsWith("/>") && !trimmed.startsWith("<?")) depth++;
+        return indented;
+      }).join("\n");
+      setDisplayContent(formatted);
+      setBeautified(true);
+    }
+  }, [beautified, data.content, data.language]);
+
+  const [panelHeight, setPanelHeight] = useState(200);
+  const handleDrag = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    const startY = e.clientY;
+    const startH = panelHeight;
+    const onMove = (ev: MouseEvent) => setPanelHeight(Math.max(80, startH + (startY - ev.clientY)));
+    const onUp = () => { document.removeEventListener("mousemove", onMove); document.removeEventListener("mouseup", onUp); };
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+  }, [panelHeight]);
+
+  return (
+    <div className="shrink-0 border-t border-border flex flex-col" style={{ height: panelHeight }}>
+      <div onMouseDown={handleDrag}
+        className="shrink-0 h-1.5 cursor-row-resize bg-border/50 hover:bg-primary/30 flex items-center justify-center transition-colors">
+        <GripHorizontal className="size-3 text-muted-foreground/50" />
+      </div>
+      <div className="flex items-center gap-1 px-2 py-1 bg-muted/50 border-b border-border shrink-0">
+        <Eye className="size-3 text-muted-foreground" />
+        <span className="text-xs font-medium text-foreground truncate flex-1">{data.title}</span>
+        {canBeautify && (
+          <button type="button" onClick={toggleBeautify} title={beautified ? "Raw" : "Beautify"}
+            className={`p-0.5 rounded transition-colors ${beautified ? "text-primary" : "text-muted-foreground hover:text-foreground"}`}>
+            <Sparkles className="size-3" />
+          </button>
+        )}
+        <button type="button" onClick={() => setWordWrap(!wordWrap)} title={wordWrap ? "No wrap" : "Word wrap"}
+          className={`p-0.5 rounded transition-colors ${wordWrap ? "text-primary" : "text-muted-foreground hover:text-foreground"}`}>
+          <WrapText className="size-3" />
+        </button>
+        <button type="button" onClick={onOpenInTab} title="Open in new tab"
+          className="flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] text-muted-foreground hover:text-foreground hover:bg-muted transition-colors">
+          <ExternalLink className="size-3" />
+          <span className="hidden sm:inline">Open in Tab</span>
+        </button>
+        <button type="button" onClick={onClose} title="Close preview (Esc)"
+          className="p-0.5 rounded text-muted-foreground hover:text-foreground transition-colors">
+          <X className="size-3" />
+        </button>
+      </div>
+      <div className="flex-1 min-h-0">
+        <Editor
+          height="100%"
+          language={data.language === "plaintext" ? undefined : data.language}
+          value={displayContent}
+          theme={monacoTheme}
+          options={{
+            readOnly: true, minimap: { enabled: false }, scrollBeyondLastLine: false,
+            wordWrap: wordWrap ? "on" : "off", lineNumbers: "on", fontSize: 12,
+            folding: true, bracketPairColorization: { enabled: true },
+            domReadOnly: true, contextmenu: false, overviewRulerLanes: 0,
+          }}
+          loading={<Loader2 className="size-4 animate-spin text-muted-foreground" />}
+        />
+      </div>
+    </div>
+  );
+}

package/src/web/components/database/glide-grid-pagination.tsx

@@ -0,0 +1,34 @@
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+interface PaginationProps {
+  total: number;
+  page: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+}
+
+/** Pagination footer for Glide Data Grid — row count + page nav */
+export function GlideGridPagination({ total, page, totalPages, onPageChange }: PaginationProps) {
+  return (
+    <div className="flex items-center justify-between px-3 py-1.5 border-t border-border bg-background shrink-0 text-xs text-muted-foreground">
+      <span>{total.toLocaleString()} rows</span>
+      {/* Shortcut hints — desktop only */}
+      <div className="hidden md:flex items-center gap-2 text-[10px] text-muted-foreground/50">
+        <span><kbd className="px-1 py-0.5 rounded bg-muted text-[9px]">/</kbd> columns</span>
+        <span><kbd className="px-1 py-0.5 rounded bg-muted text-[9px]">{"\u2318"}A</kbd> select all</span>
+        <span><kbd className="px-1 py-0.5 rounded bg-muted text-[9px]">{"\u2318"}C</kbd> copy</span>
+      </div>
+      <div className="flex items-center gap-2">
+        <button type="button" disabled={page <= 1} onClick={() => onPageChange(page - 1)}
+          className="p-0.5 rounded hover:bg-muted disabled:opacity-30">
+          <ChevronLeft className="size-3.5" />
+        </button>
+        <span>{page} / {totalPages}</span>
+        <button type="button" disabled={page >= totalPages} onClick={() => onPageChange(page + 1)}
+          className="p-0.5 rounded hover:bg-muted disabled:opacity-30">
+          <ChevronRight className="size-3.5" />
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/web/components/database/glide-grid-toolbar.tsx

@@ -0,0 +1,105 @@
+import { useState, useRef } from "react";
+import { Search, X, Trash2, Plus, Columns } from "lucide-react";
+import { ExportButton } from "./export-button";
+import { GlideColumnSearch } from "./glide-column-search";
+
+interface ToolbarProps {
+  hasSelection: boolean;
+  selectedCount: number;
+  onBulkDelete?: () => void;
+  onInsertRow?: () => void;
+  columns: string[];
+  selectedRows: Record<string, unknown>[];
+  connectionName?: string;
+  searchTerm: string;
+  onSearchChange: (term: string) => void;
+  onColumnJump?: (colName: string) => void;
+  /** Controlled column search open state (from parent "/" shortcut) */
+  colSearchOpen?: boolean;
+  onColSearchChange?: (open: boolean) => void;
+}
+
+/**
+ * Toolbar above the Glide Data Grid — bulk actions, search, column jump, insert, export.
+ */
+export function GlideGridToolbar({
+  hasSelection, selectedCount, onBulkDelete, onInsertRow,
+  columns, selectedRows, connectionName,
+  searchTerm, onSearchChange, onColumnJump,
+  colSearchOpen: externalOpen, onColSearchChange,
+}: ToolbarProps) {
+  const [confirmBulkDelete, setConfirmBulkDelete] = useState(false);
+  const [internalOpen, setInternalOpen] = useState(false);
+  const colSearchOpen = externalOpen ?? internalOpen;
+  const setColSearchOpen = onColSearchChange ?? setInternalOpen;
+  const colSearchBtnRef = useRef<HTMLButtonElement>(null);
+
+  const colSearchPos = colSearchBtnRef.current
+    ? (() => { const r = colSearchBtnRef.current!.getBoundingClientRect(); return { x: r.left, y: r.bottom + 4 }; })()
+    : { x: 0, y: 0 };
+
+  return (
+    <div className="flex items-center gap-2 px-2 py-1 border-b border-border bg-background shrink-0">
+      {/* Selection info + bulk actions */}
+      {hasSelection && (
+        <div className="flex items-center gap-1.5 text-xs">
+          <span className="text-muted-foreground">{selectedCount} selected</span>
+          {onBulkDelete && (
+            confirmBulkDelete ? (
+              <span className="flex items-center gap-1">
+                <button type="button" onClick={() => { onBulkDelete(); setConfirmBulkDelete(false); }}
+                  className="text-destructive text-[10px] font-medium hover:underline">
+                  Delete {selectedCount}?
+                </button>
+                <button type="button" onClick={() => setConfirmBulkDelete(false)}
+                  className="text-muted-foreground text-[10px] hover:underline">Cancel</button>
+              </span>
+            ) : (
+              <button type="button" onClick={() => setConfirmBulkDelete(true)}
+                className="p-0.5 text-muted-foreground hover:text-destructive">
+                <Trash2 className="size-3" />
+              </button>
+            )
+          )}
+          <ExportButton columns={columns} rows={selectedRows} filename={`${connectionName ?? "db"}-selected`} />
+        </div>
+      )}
+
+      <div className="flex-1" />
+
+      {/* Client-side search */}
+      <div className="flex items-center gap-1 text-xs">
+        <Search className="size-3 text-muted-foreground" />
+        <input value={searchTerm} onChange={(e) => onSearchChange(e.target.value)}
+          placeholder="Search page…"
+          className="w-24 bg-transparent outline-none text-foreground placeholder:text-muted-foreground text-xs" />
+        {searchTerm && (
+          <button type="button" onClick={() => onSearchChange("")}
+            className="text-muted-foreground hover:text-foreground">
+            <X className="size-3" />
+          </button>
+        )}
+      </div>
+
+      {/* Column jump */}
+      {onColumnJump && (
+        <button ref={colSearchBtnRef} type="button" onClick={() => setColSearchOpen(!colSearchOpen)}
+          className="p-0.5 rounded text-muted-foreground hover:text-foreground transition-colors" title="Jump to column (/)">
+          <Columns className="size-3.5" />
+        </button>
+      )}
+
+      {/* Insert row */}
+      {onInsertRow && (
+        <button type="button" onClick={onInsertRow}
+          className="p-0.5 rounded text-muted-foreground hover:text-primary transition-colors" title="Insert row">
+          <Plus className="size-3.5" />
+        </button>
+      )}
+
+      {colSearchOpen && onColumnJump && (
+        <GlideColumnSearch columns={columns} onSelect={onColumnJump} onClose={() => setColSearchOpen(false)} anchorRect={colSearchPos} />
+      )}
+    </div>
+  );
+}

package/src/web/components/database/glide-grid-types.ts

@@ -7,6 +7,7 @@ export interface GridColumnSchema {
   nullable: boolean;
   pk: boolean;
   defaultValue?: string | null;
+  fk?: { table: string; column: string } | null;
 }
 
 /** Unified props interface for the Glide Data Grid wrapper component */
@@ -35,6 +36,7 @@ export interface GlideGridProps {
   orderBy?: string | null;
   orderDir?: "ASC" | "DESC";
   onToggleSort?: (column: string) => void;
+  onClearSort?: () => void;
   /** Per-column ILIKE filters (server-side) */
   columnFilters?: Record<string, string>;
   onColumnFilter?: (filters: Record<string, string>) => void;

package/src/web/components/database/glide-header-menu.tsx

@@ -0,0 +1,111 @@
+import { useState, useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import { Filter, Pin, PinOff, ArrowUp, ArrowDown, X } from "lucide-react";
+
+interface HeaderMenuProps {
+  colName: string;
+  bounds: { x: number; y: number; width: number; height: number };
+  isPinned: boolean;
+  filterValue: string;
+  sortState: "asc" | "desc" | null;
+  onFilter: (value: string) => void;
+  onSort: () => void;
+  onClearSort?: () => void;
+  onTogglePin: () => void;
+  onClose: () => void;
+}
+
+/**
+ * Header column dropdown menu — filter input, sort toggle, pin/unpin.
+ * Rendered via React portal into #portal div (required by Glide Data Grid).
+ */
+export function GlideHeaderMenu({
+  colName, bounds, isPinned, filterValue, sortState,
+  onFilter, onSort, onClearSort, onTogglePin, onClose,
+}: HeaderMenuProps) {
+  const [localFilter, setLocalFilter] = useState(filterValue);
+  const ref = useRef<HTMLDivElement>(null);
+  const debounceRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  // Close on outside click
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) onClose();
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [onClose]);
+
+  // Close on Escape
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [onClose]);
+
+  // Debounced filter
+  const handleFilterChange = (val: string) => {
+    setLocalFilter(val);
+    clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => onFilter(val), 300);
+  };
+
+  // Clamp position to viewport
+  const menuWidth = 220;
+  const left = Math.min(bounds.x, window.innerWidth - menuWidth - 8);
+  const top = bounds.y + bounds.height + 2;
+
+  const portal = document.getElementById("portal");
+  if (!portal) return null;
+
+  return createPortal(
+    <div ref={ref} style={{ position: "fixed", left, top, zIndex: 10000 }}
+      className="w-[220px] bg-popover border border-border rounded-md shadow-lg text-xs overflow-hidden">
+      {/* Column name header */}
+      <div className="px-3 py-1.5 border-b border-border text-muted-foreground font-medium truncate">
+        {colName}
+      </div>
+
+      {/* Filter input */}
+      <div className="px-2 py-1.5 border-b border-border">
+        <div className="flex items-center gap-1">
+          <Filter className="size-3 text-muted-foreground shrink-0" />
+          <input
+            autoFocus type="text" value={localFilter}
+            onChange={(e) => handleFilterChange(e.target.value)}
+            placeholder="Filter (ILIKE)…"
+            className="flex-1 bg-transparent outline-none text-foreground placeholder:text-muted-foreground text-xs"
+          />
+          {localFilter && (
+            <button type="button" onClick={() => handleFilterChange("")}
+              className="text-muted-foreground hover:text-foreground">
+              <X className="size-3" />
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Actions */}
+      <div className="py-1">
+        <button type="button" onClick={() => { onSort(); onClose(); }}
+          className="w-full text-left px-3 py-1.5 hover:bg-muted flex items-center gap-2 text-foreground">
+          {sortState === "asc" ? <ArrowDown className="size-3" /> : <ArrowUp className="size-3" />}
+          {sortState === "asc" ? "Sort Descending" : "Sort Ascending"}
+        </button>
+        {sortState && onClearSort && (
+          <button type="button" onClick={() => { onClearSort(); onClose(); }}
+            className="w-full text-left px-3 py-1.5 hover:bg-muted flex items-center gap-2 text-foreground">
+            <X className="size-3" />
+            Clear Sort
+          </button>
+        )}
+        <button type="button" onClick={() => { onTogglePin(); onClose(); }}
+          className="w-full text-left px-3 py-1.5 hover:bg-muted flex items-center gap-2 text-foreground">
+          {isPinned ? <PinOff className="size-3" /> : <Pin className="size-3" />}
+          {isPinned ? "Unpin Column" : "Pin Column"}
+        </button>
+      </div>
+    </div>,
+    portal,
+  );
+}

package/src/web/components/database/glide-save-bar.tsx

@@ -0,0 +1,33 @@
+import { Save, Undo2 } from "lucide-react";
+
+interface SaveBarProps {
+  pendingCount: number;
+  onSave: () => void;
+  onDiscard: () => void;
+}
+
+/**
+ * Floating save bar shown when there are pending cell edits.
+ * Save with click or Mod+Enter. Discard with Escape.
+ */
+export function GlideSaveBar({ pendingCount, onSave, onDiscard }: SaveBarProps) {
+  if (pendingCount === 0) return null;
+
+  return (
+    <div className="flex items-center gap-2 px-3 py-1.5 border-t border-amber-400/50 bg-amber-50 dark:bg-amber-950/30 shrink-0 text-xs">
+      <span className="text-amber-700 dark:text-amber-300 font-medium">
+        {pendingCount} pending edit{pendingCount > 1 ? "s" : ""}
+      </span>
+      <div className="flex-1" />
+      <button type="button" onClick={onDiscard}
+        className="flex items-center gap-1 px-2 py-0.5 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors">
+        <Undo2 className="size-3" /> Discard
+      </button>
+      <button type="button" onClick={onSave}
+        className="flex items-center gap-1 px-2 py-0.5 rounded bg-primary text-primary-foreground hover:bg-primary/90 transition-colors">
+        <Save className="size-3" /> Save
+        <kbd className="ml-1 text-[9px] opacity-70">⌘↵</kbd>
+      </button>
+    </div>
+  );
+}