@hienlh/ppm 0.13.8 → 0.13.10

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-theme.ts

@@ -0,0 +1,82 @@
+import { useState, useEffect, useMemo } from "react";
+import type { Theme } from "@glideapps/glide-data-grid";
+import "@glideapps/glide-data-grid/dist/index.css";
+
+/** Read a CSS custom property from :root */
+function cssVar(name: string): string {
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+}
+
+/** Add alpha channel to a hex/rgb color string */
+function withAlpha(color: string, alpha: number): string {
+  if (color.startsWith("#")) {
+    const hex = color.slice(1);
+    const r = parseInt(hex.slice(0, 2), 16);
+    const g = parseInt(hex.slice(2, 4), 16);
+    const b = parseInt(hex.slice(4, 6), 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  }
+  return color;
+}
+
+/** Build Glide theme from current CSS variables */
+function buildTheme(): Partial<Theme> {
+  const bg = cssVar("--color-background");
+  const fg = cssVar("--color-foreground");
+  const muted = cssVar("--color-muted");
+  const mutedFg = cssVar("--color-muted-foreground");
+  const primary = cssVar("--color-primary");
+  const primaryFg = cssVar("--color-primary-foreground");
+  const border = cssVar("--color-border");
+  const accent = cssVar("--color-accent");
+  const textSecondary = cssVar("--color-text-secondary");
+  const textSubtle = cssVar("--color-text-subtle");
+  const fontSans = cssVar("--font-sans") || "Geist, system-ui, sans-serif";
+
+  return {
+    bgCell: bg,
+    bgCellMedium: muted,
+    bgHeader: muted,
+    bgHeaderHasFocus: accent,
+    bgHeaderHovered: accent,
+    bgBubble: accent,
+    bgBubbleSelected: primary,
+    textDark: fg,
+    textMedium: textSecondary,
+    textLight: textSubtle,
+    textHeader: mutedFg,
+    textGroupHeader: mutedFg,
+    textHeaderSelected: fg,
+    textBubble: fg,
+    accentColor: primary,
+    accentFg: primaryFg,
+    accentLight: withAlpha(primary, 0.12),
+    borderColor: border,
+    horizontalBorderColor: border,
+    fontFamily: fontSans,
+    baseFontStyle: "13px",
+    headerFontStyle: "600 12px",
+    editorFontSize: "13px",
+    lineHeight: 1.5,
+    cellHorizontalPadding: 8,
+    cellVerticalPadding: 4,
+    headerIconSize: 16,
+  };
+}
+
+/**
+ * Hook that returns a Glide Data Grid theme synced to PPM's dark/light mode.
+ * Watches <html> class changes via MutationObserver to rebuild on theme toggle.
+ */
+export function useGlideTheme(): Partial<Theme> {
+  // Bump counter on theme class change to trigger rebuild
+  const [rev, setRev] = useState(0);
+
+  useEffect(() => {
+    const observer = new MutationObserver(() => setRev((r) => r + 1));
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
+    return () => observer.disconnect();
+  }, []);
+
+  return useMemo(() => buildTheme(), [rev]); // eslint-disable-line react-hooks/exhaustive-deps
+}

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

@@ -0,0 +1,81 @@
+/** Shared types for Glide Data Grid wrapper used by database-viewer and sqlite-viewer */
+
+/** Unified column schema — superset of DbColumnInfo and sqlite ColumnInfo */
+export interface GridColumnSchema {
+  name: string;
+  type: string;
+  nullable: boolean;
+  pk: boolean;
+  defaultValue?: string | null;
+  fk?: { table: string; column: string } | null;
+}
+
+/** Unified props interface for the Glide Data Grid wrapper component */
+export interface GlideGridProps {
+  /** Column names in display order */
+  columns: string[];
+  /** Row data array (current page) */
+  rows: Record<string, unknown>[];
+  /** Total row count across all pages */
+  total: number;
+  /** Rows per page */
+  limit: number;
+  /** Column schema metadata */
+  schema: GridColumnSchema[];
+  /** Whether data is currently loading */
+  loading: boolean;
+  /** Current page number (1-based) */
+  page: number;
+  onPageChange: (page: number) => void;
+  /** Cell edit: (pkColumn, pkValue, editedColumn, newValue) */
+  onCellUpdate: (pkCol: string, pkVal: unknown, col: string, val: unknown) => void;
+  onRowDelete?: (pkCol: string, pkVal: unknown) => void;
+  onBulkDelete?: (pkCol: string, pkValues: unknown[]) => void;
+  onInsertRow?: (values: Record<string, unknown>) => Promise<void>;
+  /** Current sort column */
+  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;
+  /** Metadata for export/viewer features */
+  connectionId?: number;
+  selectedTable?: string | null;
+  selectedSchema?: string;
+  connectionName?: string;
+}
+
+/** Threshold in bytes for showing cell viewer (eye button) */
+export const LARGE_THRESHOLD = 200;
+
+/** Check if a cell value needs the large data viewer */
+export function needsViewer(val: unknown): boolean {
+  if (val == null) return false;
+  if (typeof val === "object") return true;
+  const s = String(val);
+  if (s.length >= LARGE_THRESHOLD) return true;
+  const trimmed = s.trimStart();
+  if ((trimmed[0] === "{" || trimmed[0] === "[") && (trimmed.endsWith("}") || trimmed.endsWith("]"))) return true;
+  if (trimmed.startsWith("<?xml") || (trimmed.startsWith("<") && trimmed.endsWith(">"))) return true;
+  return false;
+}
+
+/** Format cell value for display — JSON-stringify objects, otherwise String() */
+export function formatCellValue(val: unknown): string {
+  if (val == null) return "NULL";
+  if (typeof val === "object") return JSON.stringify(val);
+  return String(val);
+}
+
+/** Detect language from cell content for syntax highlighting in viewer */
+export function detectLang(text: string): string {
+  const t = text.trimStart();
+  if (t[0] === "{" || t[0] === "[") {
+    try { JSON.parse(t); return "json"; } catch { /* not json */ }
+  }
+  if (t.startsWith("<?xml") || (t.startsWith("<") && /<\/\w+>/.test(t))) return "xml";
+  if (t.startsWith("---") || /^\w+:\s/m.test(t)) return "yaml";
+  return "plaintext";
+}