@libredb/studio 0.9.7

package/src/hooks/use-storage-sync.ts

@@ -0,0 +1,259 @@
+'use client';
+
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { storage, type StorageConfigResponse, type StorageChangeDetail, type StorageData, STORAGE_COLLECTIONS } from '@/lib/storage';
+import { logger } from '@/lib/logger';
+
+const MIGRATION_FLAG = 'libredb_server_migrated';
+const DEBOUNCE_MS = 500;
+
+export interface StorageSyncState {
+  isServerMode: boolean;
+  isSyncing: boolean;
+  isReady: boolean;
+  lastSyncedAt: Date | null;
+  syncError: string | null;
+}
+
+/**
+ * Write-through cache sync hook.
+ * Mounts in Studio.tsx after useAuth.
+ *
+ * - Discovers storage mode via GET /api/storage/config
+ * - In server mode: pulls data on mount, pushes mutations (debounced)
+ * - Handles first-login migration from localStorage to server
+ * - Graceful degradation: if server unreachable, localStorage continues
+ */
+export function useStorageSync(): StorageSyncState {
+  const [isServerMode, setIsServerMode] = useState(false);
+  const [isSyncing, setIsSyncing] = useState(false);
+  const [isReady, setIsReady] = useState(false);
+  const [lastSyncedAt, setLastSyncedAt] = useState<Date | null>(null);
+  const [syncError, setSyncError] = useState<string | null>(null);
+
+  const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const pendingCollectionsRef = useRef<Set<string>>(new Set());
+  const serverModeRef = useRef(false);
+
+  // ── Push a collection to server (debounced) ──
+  const pushToServer = useCallback(async (collection: string, data: unknown) => {
+    try {
+      const res = await fetch(`/api/storage/${collection}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ data }),
+      });
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({}));
+        throw new Error(err.error || `HTTP ${res.status}`);
+      }
+      setLastSyncedAt(new Date());
+      setSyncError(null);
+    } catch (err) {
+      logger.warn('StorageSync push failed', { collection, error: err instanceof Error ? err.message : String(err) });
+      setSyncError(err instanceof Error ? err.message : 'Sync failed');
+    }
+  }, []);
+
+  // ── Flush pending collections ──
+  const flushPending = useCallback(async () => {
+    const collections = Array.from(pendingCollectionsRef.current);
+    pendingCollectionsRef.current.clear();
+    if (collections.length === 0) return;
+
+    setIsSyncing(true);
+    try {
+      await Promise.all(
+        collections.map((col) => {
+          const getter = getCollectionData(col);
+          return pushToServer(col, getter);
+        })
+      );
+    } finally {
+      setIsSyncing(false);
+    }
+  }, [pushToServer]);
+
+  // ── Schedule debounced push ──
+  const schedulePush = useCallback(
+    (collection: string) => {
+      pendingCollectionsRef.current.add(collection);
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+      debounceTimerRef.current = setTimeout(() => {
+        flushPending();
+      }, DEBOUNCE_MS);
+    },
+    [flushPending]
+  );
+
+  // ── Pull all data from server → localStorage ──
+  const pullFromServer = useCallback(async () => {
+    setIsSyncing(true);
+    try {
+      const res = await fetch('/api/storage');
+      if (!res.ok) return;
+      const data = (await res.json()) as Partial<StorageData>;
+
+      // Write server data to localStorage (overwrite)
+      if (data.connections) writeCollectionToLocal('connections', data.connections);
+      if (data.history) writeCollectionToLocal('history', data.history);
+      if (data.saved_queries) writeCollectionToLocal('saved_queries', data.saved_queries);
+      if (data.schema_snapshots) writeCollectionToLocal('schema_snapshots', data.schema_snapshots);
+      if (data.saved_charts) writeCollectionToLocal('saved_charts', data.saved_charts);
+      if (data.active_connection_id !== undefined) writeCollectionToLocal('active_connection_id', data.active_connection_id);
+      if (data.audit_log) writeCollectionToLocal('audit_log', data.audit_log);
+      if (data.masking_config) writeCollectionToLocal('masking_config', data.masking_config);
+      if (data.threshold_config) writeCollectionToLocal('threshold_config', data.threshold_config);
+
+      setLastSyncedAt(new Date());
+      setSyncError(null);
+    } catch (err) {
+      logger.warn('StorageSync pull failed', { error: err instanceof Error ? err.message : String(err) });
+      setSyncError(err instanceof Error ? err.message : 'Pull failed');
+    } finally {
+      setIsSyncing(false);
+    }
+  }, []);
+
+  // ── Migration: localStorage → server ──
+  const migrateToServer = useCallback(async () => {
+    if (typeof window === 'undefined') return;
+    if (localStorage.getItem(MIGRATION_FLAG)) return;
+
+    // Check if localStorage actually has any libredb data to migrate.
+    // On a fresh browser, no libredb_* keys exist — skip migration to
+    // avoid overwriting server data with empty defaults.
+    const hasLocalData = STORAGE_COLLECTIONS.some(
+      (col) => localStorage.getItem(`libredb_${col}`) !== null
+    );
+
+    if (!hasLocalData) {
+      localStorage.setItem(MIGRATION_FLAG, new Date().toISOString());
+      return;
+    }
+
+    setIsSyncing(true);
+    try {
+      const allData: Partial<StorageData> = {};
+      for (const col of STORAGE_COLLECTIONS) {
+        // Only include collections that actually exist in localStorage
+        const raw = localStorage.getItem(`libredb_${col}`);
+        if (raw !== null) {
+          const data = getCollectionData(col);
+          if (data !== null && data !== undefined) {
+            (allData as Record<string, unknown>)[col] = data;
+          }
+        }
+      }
+
+      if (Object.keys(allData).length === 0) {
+        localStorage.setItem(MIGRATION_FLAG, new Date().toISOString());
+        return;
+      }
+
+      const res = await fetch('/api/storage/migrate', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(allData),
+      });
+
+      if (res.ok) {
+        localStorage.setItem(MIGRATION_FLAG, new Date().toISOString());
+      }
+    } catch (err) {
+      logger.warn('StorageSync migration failed', { error: err instanceof Error ? err.message : String(err) });
+    } finally {
+      setIsSyncing(false);
+    }
+  }, []);
+
+  // ── Initialize: discover storage mode ──
+  useEffect(() => {
+    let cancelled = false;
+
+    async function init() {
+      try {
+        const res = await fetch('/api/storage/config');
+        if (!res.ok || cancelled) return;
+        const config = (await res.json()) as StorageConfigResponse;
+
+        if (config.serverMode && !cancelled) {
+          setIsServerMode(true);
+          serverModeRef.current = true;
+
+          // Migration first, then pull
+          await migrateToServer();
+          if (!cancelled) {
+            await pullFromServer();
+          }
+        }
+      } catch {
+        // Server unreachable — stay in local mode
+        logger.debug('Storage server unreachable, staying in local mode');
+      } finally {
+        if (!cancelled) {
+          setIsReady(true);
+        }
+      }
+    }
+
+    init();
+    return () => {
+      cancelled = true;
+    };
+  }, [migrateToServer, pullFromServer]);
+
+  // ── Listen for storage mutations ──
+  useEffect(() => {
+    if (!isServerMode) return;
+
+    function handleStorageChange(event: Event) {
+      const detail = (event as CustomEvent<StorageChangeDetail>).detail;
+      if (detail?.collection) {
+        schedulePush(detail.collection);
+      }
+    }
+
+    window.addEventListener('libredb-storage-change', handleStorageChange);
+    return () => {
+      window.removeEventListener('libredb-storage-change', handleStorageChange);
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+    };
+  }, [isServerMode, schedulePush]);
+
+  return { isServerMode, isSyncing, isReady, lastSyncedAt, syncError };
+}
+
+// ── Helpers ──
+
+/** Read a collection's current data from the storage facade */
+function getCollectionData(collection: string): unknown {
+  switch (collection) {
+    case 'connections': return storage.getConnections();
+    case 'history': return storage.getHistory();
+    case 'saved_queries': return storage.getSavedQueries();
+    case 'schema_snapshots': return storage.getSchemaSnapshots();
+    case 'saved_charts': return storage.getSavedCharts();
+    case 'active_connection_id': return storage.getActiveConnectionId();
+    case 'audit_log': return storage.getAuditLog();
+    case 'masking_config': return storage.getMaskingConfig();
+    case 'threshold_config': return storage.getThresholdConfig();
+    default: return null;
+  }
+}
+
+/** Write server data directly to localStorage via storage key */
+function writeCollectionToLocal(collection: string, data: unknown): void {
+  const key = `libredb_${collection}`;
+  if (data === null || data === undefined) {
+    localStorage.removeItem(key);
+  } else if (typeof data === 'string') {
+    localStorage.setItem(key, data);
+  } else {
+    localStorage.setItem(key, JSON.stringify(data));
+  }
+}

package/src/hooks/use-tab-manager.ts

@@ -0,0 +1,231 @@
+'use client';
+
+import { useState, useCallback, useEffect, useMemo } from 'react';
+import type { DatabaseConnection, TableSchema, QueryTab } from '@/lib/types';
+import type { ProviderMetadata } from '@/hooks/use-provider-metadata';
+import { generateTableQuery, generateSelectQuery } from '@/lib/query-generators';
+
+const DEFAULT_TAB: QueryTab = {
+  id: 'default',
+  name: 'Query 1',
+  query: '',
+  result: null,
+  isExecuting: false,
+  type: 'sql'
+};
+
+const WORKSPACE_STORAGE_PREFIX = 'libredb_workspace_tabs_v1';
+
+interface PersistedTabState {
+  id: string;
+  name: string;
+  query: string;
+  type: QueryTab['type'];
+}
+
+interface PersistedWorkspaceState {
+  activeTabId: string;
+  tabs: PersistedTabState[];
+}
+
+interface UseTabManagerParams {
+  activeConnection: DatabaseConnection | null;
+  metadata: ProviderMetadata | null;
+  schema: TableSchema[];
+  persistWorkspace?: boolean;
+}
+
+export function useTabManager({
+  activeConnection,
+  metadata,
+  schema,
+  persistWorkspace,
+}: UseTabManagerParams) {
+  const [tabs, setTabs] = useState<QueryTab[]>([DEFAULT_TAB]);
+  const [activeTabId, setActiveTabId] = useState<string>('default');
+  const [editingTabId, setEditingTabId] = useState<string | null>(null);
+  const [editingTabName, setEditingTabName] = useState('');
+  const [isWorkspaceHydrated, setIsWorkspaceHydrated] = useState(false);
+
+  const workspaceKey = useMemo(
+    () => `${WORKSPACE_STORAGE_PREFIX}:${activeConnection?.id ?? 'default'}`,
+    [activeConnection?.id]
+  );
+  const shouldPersistWorkspace = persistWorkspace ?? process.env.NODE_ENV !== 'test';
+
+  const currentTab = tabs.find(t => t.id === activeTabId) || tabs[0];
+
+  // LOAD EFFECT — restore tabs from localStorage on connection switch
+  useEffect(() => {
+    setIsWorkspaceHydrated(false);
+    if (!shouldPersistWorkspace) return;
+
+    const storage = typeof globalThis !== 'undefined' && 'localStorage' in globalThis
+      ? globalThis.localStorage
+      : null;
+    if (!storage) return;
+
+    try {
+      const raw = storage.getItem(workspaceKey);
+      if (!raw) {
+        setTabs([DEFAULT_TAB]);
+        setActiveTabId(DEFAULT_TAB.id);
+        return;
+      }
+
+      const parsed = JSON.parse(raw) as PersistedWorkspaceState;
+      if (!parsed || !Array.isArray(parsed.tabs) || parsed.tabs.length === 0) {
+        setTabs([DEFAULT_TAB]);
+        setActiveTabId(DEFAULT_TAB.id);
+        return;
+      }
+
+      const restoredTabs: QueryTab[] = parsed.tabs.map(tab => ({
+        id: tab.id,
+        name: tab.name,
+        query: tab.query,
+        type: tab.type,
+        result: null,
+        isExecuting: false,
+      }));
+
+      const hasActiveTab = restoredTabs.some(tab => tab.id === parsed.activeTabId);
+      setTabs(restoredTabs);
+      setActiveTabId(hasActiveTab ? parsed.activeTabId : restoredTabs[0].id);
+    } catch (error) {
+      console.error('[useTabManager] Failed to restore workspace tabs:', error);
+      setTabs([DEFAULT_TAB]);
+      setActiveTabId(DEFAULT_TAB.id);
+    }
+    // NOTE: hydration flag stays false — set by ready effect below.
+  }, [workspaceKey, shouldPersistWorkspace]);
+
+  // READY EFFECT — fires after load's setTabs commits (next render)
+  useEffect(() => {
+    if (!shouldPersistWorkspace || isWorkspaceHydrated) return;
+    setIsWorkspaceHydrated(true);
+  }, [tabs, activeTabId, shouldPersistWorkspace, isWorkspaceHydrated]);
+
+  // SAVE EFFECT — debounced write to localStorage (500ms)
+  useEffect(() => {
+    if (!shouldPersistWorkspace) return;
+    const storage = typeof globalThis !== 'undefined' && 'localStorage' in globalThis
+      ? globalThis.localStorage
+      : null;
+    if (!isWorkspaceHydrated || !storage) return;
+
+    const timer = setTimeout(() => {
+      const serialized: PersistedWorkspaceState = {
+        activeTabId,
+        tabs: tabs.map(tab => ({
+          id: tab.id,
+          name: tab.name,
+          query: tab.query,
+          type: tab.type,
+        })),
+      };
+      storage.setItem(workspaceKey, JSON.stringify(serialized));
+    }, 500);
+
+    return () => clearTimeout(timer);
+  }, [tabs, activeTabId, workspaceKey, shouldPersistWorkspace, isWorkspaceHydrated]);
+
+  const updateTabById = useCallback((tabId: string, updates: Partial<QueryTab>) => {
+    setTabs(prev => prev.map(t => t.id === tabId ? { ...t, ...updates } : t));
+  }, []);
+
+  const updateCurrentTab = useCallback((updates: Partial<QueryTab>) => {
+    updateTabById(activeTabId, updates);
+  }, [activeTabId, updateTabById]);
+
+  const addTab = useCallback(() => {
+    const newId = Math.random().toString(36).substring(7);
+    const queryLanguage = metadata?.capabilities.queryLanguage;
+    setTabs(prev => [...prev, {
+      id: newId,
+      name: `Query ${prev.length + 1}`,
+      query: '',
+      result: null,
+      isExecuting: false,
+      type: queryLanguage === 'json' ? 'mongodb' : 'sql'
+    }]);
+    setActiveTabId(newId);
+  }, [activeConnection, metadata]);
+
+  const closeTab = useCallback((id: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    setTabs(prev => {
+      if (prev.length === 1) return prev;
+      const newTabs = prev.filter(t => t.id !== id);
+      if (activeTabId === id && newTabs.length > 0) {
+        setActiveTabId(newTabs[newTabs.length - 1].id);
+      }
+      return newTabs;
+    });
+  }, [activeTabId]);
+
+  // handleTableClick takes executeQuery as callback param to avoid circular dependency
+  const handleTableClick = useCallback((
+    tableName: string,
+    executeQueryFn: (query: string, tabId: string) => void
+  ) => {
+    const capabilities = metadata?.capabilities;
+    const newQuery = capabilities
+      ? generateTableQuery(tableName, capabilities)
+      : `SELECT * FROM ${tableName} LIMIT 50;`;
+
+    const newId = Math.random().toString(36).substring(7);
+    const newTab: QueryTab = {
+      id: newId,
+      name: tableName,
+      query: newQuery,
+      result: null,
+      isExecuting: false,
+      type: capabilities?.queryLanguage === 'json' ? 'mongodb' : 'sql'
+    };
+    setTabs(prev => [...prev, newTab]);
+    setActiveTabId(newId);
+    setTimeout(() => executeQueryFn(newQuery, newId), 100);
+  }, [metadata]);
+
+  const handleGenerateSelect = useCallback((tableName: string) => {
+    const capabilities = metadata?.capabilities;
+    const table = schema.find(t => t.name === tableName);
+    const columns = table?.columns || [];
+
+    const newQuery = capabilities
+      ? generateSelectQuery(tableName, columns, capabilities)
+      : `SELECT\n${columns.map(c => `  ${c.name}`).join(',\n') || '  *'}\nFROM ${tableName}\nWHERE 1=1\nLIMIT 100;`;
+
+    const tabType: 'sql' | 'mongodb' | 'redis' = capabilities?.queryLanguage === 'json' ? 'mongodb' : 'sql';
+
+    const newId = Math.random().toString(36).substring(7);
+    setTabs(prev => [...prev, {
+      id: newId,
+      name: `Query: ${tableName}`,
+      query: newQuery,
+      result: null,
+      isExecuting: false,
+      type: tabType
+    }]);
+    setActiveTabId(newId);
+  }, [metadata, schema]);
+
+  return {
+    tabs,
+    setTabs,
+    activeTabId,
+    setActiveTabId,
+    currentTab,
+    editingTabId,
+    setEditingTabId,
+    editingTabName,
+    setEditingTabName,
+    addTab,
+    closeTab,
+    updateCurrentTab,
+    updateTabById,
+    handleTableClick,
+    handleGenerateSelect,
+  };
+}

package/src/hooks/use-toast.ts

@@ -0,0 +1,20 @@
+import { useCallback } from "react";
+import { toast as sonnerToast } from "sonner";
+
+interface ToastParams {
+  title: string;
+  description?: string;
+  variant?: "default" | "destructive";
+}
+
+export function useToast() {
+  const toast = useCallback(({ title, description, variant }: ToastParams) => {
+    if (variant === "destructive") {
+      sonnerToast.error(title, { description });
+    } else {
+      sonnerToast.success(title, { description });
+    }
+  }, []);
+
+  return { toast };
+}

package/src/hooks/use-transaction-control.ts

@@ -0,0 +1,64 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+import type { DatabaseConnection } from '@/lib/types';
+import { useToast } from '@/hooks/use-toast';
+import { buildConnectionPayload } from './use-connection-payload';
+
+interface UseTransactionControlParams {
+  activeConnection: DatabaseConnection | null;
+}
+
+export function useTransactionControl({ activeConnection }: UseTransactionControlParams) {
+  const [transactionActive, setTransactionActive] = useState(false);
+  const [playgroundMode, setPlaygroundMode] = useState(false);
+  const { toast } = useToast();
+
+  const handleTransaction = useCallback(async (action: 'begin' | 'commit' | 'rollback') => {
+    if (!activeConnection) return;
+
+    try {
+      const res = await fetch('/api/db/transaction', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          ...buildConnectionPayload(activeConnection),
+          action,
+        }),
+      });
+
+      const data = await res.json();
+      if (!res.ok) {
+        toast({ title: "Transaction Error", description: data.error, variant: "destructive" });
+        return;
+      }
+
+      if (action === 'begin') {
+        setTransactionActive(true);
+        toast({ title: "Transaction Started", description: "BEGIN — all queries will run in this transaction until you COMMIT or ROLLBACK." });
+      } else if (action === 'commit') {
+        setTransactionActive(false);
+        toast({ title: "Transaction Committed", description: "All changes have been saved." });
+      } else if (action === 'rollback') {
+        setTransactionActive(false);
+        toast({ title: "Transaction Rolled Back", description: "All changes have been discarded." });
+      }
+    } catch (error) {
+      const msg = error instanceof Error ? error.message : 'Unknown error';
+      toast({ title: "Transaction Error", description: msg, variant: "destructive" });
+    }
+  }, [activeConnection, toast]);
+
+  const resetTransactionState = useCallback(() => {
+    setTransactionActive(false);
+    setPlaygroundMode(false);
+  }, []);
+
+  return {
+    transactionActive,
+    playgroundMode,
+    setPlaygroundMode,
+    handleTransaction,
+    resetTransactionState,
+  };
+}

package/src/lib/api/error-codes.ts

@@ -0,0 +1,30 @@
+/**
+ * API Error Codes
+ * Single source of truth for all error codes used across server and client
+ */
+
+export const ApiErrorCode = {
+  // Database errors
+  QUERY_CANCELLED: 'QUERY_CANCELLED',
+  QUERY_ERROR: 'QUERY_ERROR',
+  CONFIG_ERROR: 'CONFIG_ERROR',
+  AUTH_ERROR: 'AUTH_ERROR',
+  TIMEOUT_ERROR: 'TIMEOUT_ERROR',
+  CONNECTION_ERROR: 'CONNECTION_ERROR',
+  POOL_EXHAUSTED: 'POOL_EXHAUSTED',
+  DATABASE_ERROR: 'DATABASE_ERROR',
+
+  // LLM errors
+  LLM_SAFETY: 'LLM_SAFETY',
+  LLM_AUTH: 'LLM_AUTH',
+  LLM_RATE_LIMIT: 'LLM_RATE_LIMIT',
+  LLM_CONFIG: 'LLM_CONFIG',
+  LLM_STREAM: 'LLM_STREAM',
+  LLM_ERROR: 'LLM_ERROR',
+
+  // Generic
+  INTERNAL_ERROR: 'INTERNAL_ERROR',
+  NETWORK_ERROR: 'NETWORK_ERROR',
+} as const;
+
+export type ApiErrorCode = (typeof ApiErrorCode)[keyof typeof ApiErrorCode];