rozenite-sqlite 0.0.2

package/src/components/SqlPanel.tsx

@@ -0,0 +1,220 @@
+import React, { useState } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Pressable,
+  TextInput,
+  ActivityIndicator,
+  ScrollView,
+} from 'react-native';
+import { C } from '../theme';
+import type { RowData } from '../theme';
+
+interface SqlPanelProps {
+  selectedDB: string | null;
+  runCustomQuery: (sql: string) => Promise<{ rows: RowData[]; columns: string[]; error?: string }>;
+}
+
+export function SqlPanel({ selectedDB, runCustomQuery }: SqlPanelProps) {
+  const [sql, setSql] = useState('');
+  const [queryRunning, setQueryRunning] = useState(false);
+  const [queryResult, setQueryResult] = useState<{ rows: RowData[]; columns: string[] } | null>(null);
+  const [queryError, setQueryError] = useState<string | null>(null);
+
+  const handleRun = () => {
+    if (!sql.trim() || queryRunning || !selectedDB) return;
+    setQueryRunning(true);
+    setQueryResult(null);
+    setQueryError(null);
+    runCustomQuery(sql.trim()).then(
+      (result) => {
+        setQueryRunning(false);
+        if (result.error) {
+          setQueryError(result.error);
+        } else {
+          setQueryResult({ rows: result.rows, columns: result.columns });
+        }
+      },
+      (err: unknown) => {
+        setQueryRunning(false);
+        setQueryError(err instanceof Error ? err.message : String(err));
+      },
+    );
+  };
+
+  return (
+    <View style={s.panel}>
+      <View style={s.inputRow}>
+        <TextInput
+          style={s.sqlInput}
+          value={sql}
+          onChangeText={setSql}
+          placeholder={'SELECT * FROM "table_name"'}
+          placeholderTextColor={C.textMuted}
+          multiline
+          blurOnSubmit={false}
+        />
+        <View style={s.actions}>
+          <Pressable
+            style={[s.runBtn, (queryRunning || !sql.trim() || !selectedDB) && s.runBtnDisabled]}
+            onPress={handleRun}
+            disabled={queryRunning || !sql.trim() || !selectedDB}
+          >
+            {queryRunning
+              ? <ActivityIndicator size="small" color="#0d1117" />
+              : <Text style={s.runBtnText}>▶ Run</Text>
+            }
+          </Pressable>
+          {(queryResult !== null || queryError !== null) && (
+            <Pressable
+              style={s.clearBtn}
+              onPress={() => { setQueryResult(null); setQueryError(null); }}
+            >
+              <Text style={s.clearBtnText}>Clear</Text>
+            </Pressable>
+          )}
+        </View>
+      </View>
+
+      {queryError !== null && (
+        <View style={s.errorRow}>
+          <Text style={s.errorIcon}>⚠</Text>
+          <Text style={s.errorText}>{queryError}</Text>
+        </View>
+      )}
+
+      {queryResult !== null && (
+        <View style={s.resultArea}>
+          <Text style={s.resultMeta}>
+            {queryResult.rows.length === 0
+              ? 'Query executed · 0 rows'
+              : `${queryResult.rows.length} row${queryResult.rows.length !== 1 ? 's' : ''} · ${queryResult.columns.length} col${queryResult.columns.length !== 1 ? 's' : ''}`}
+          </Text>
+          {queryResult.rows.length > 0 && (
+            <ScrollView horizontal showsHorizontalScrollIndicator style={s.resultScroll}>
+              <View>
+                <View style={s.miniHeaderRow}>
+                  {queryResult.columns.map((col) => (
+                    <Text key={col} style={s.miniHeaderCell} numberOfLines={1}>{col}</Text>
+                  ))}
+                </View>
+                {queryResult.rows.slice(0, 200).map((row, i) => (
+                  <View key={i} style={[s.miniRow, i % 2 === 0 ? s.miniRowEven : s.miniRowOdd]}>
+                    {queryResult.columns.map((col) => {
+                      const val = row[col];
+                      return (
+                        <Text key={col} style={[s.miniCell, val == null && s.miniCellNull]} numberOfLines={1}>
+                          {val == null ? 'NULL' : String(val)}
+                        </Text>
+                      );
+                    })}
+                  </View>
+                ))}
+              </View>
+            </ScrollView>
+          )}
+        </View>
+      )}
+    </View>
+  );
+}
+
+const s = StyleSheet.create({
+  panel: {
+    backgroundColor: C.surface,
+    borderBottomWidth: 1,
+    borderBottomColor: C.border,
+    paddingHorizontal: 20,
+    paddingTop: 12,
+    paddingBottom: 14,
+    gap: 10,
+  },
+  inputRow: { flexDirection: 'row', gap: 10, alignItems: 'flex-start' },
+  sqlInput: {
+    flex: 1,
+    backgroundColor: C.bg,
+    borderWidth: 1,
+    borderColor: C.border,
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontSize: 13,
+    color: C.text,
+    fontFamily: 'monospace',
+    outlineStyle: 'none' as any,
+    minHeight: 64,
+    textAlignVertical: 'top',
+    lineHeight: 20,
+  },
+  actions: { gap: 6 },
+  runBtn: {
+    height: 34,
+    paddingHorizontal: 14,
+    borderRadius: 7,
+    backgroundColor: C.accent,
+    alignItems: 'center',
+    justifyContent: 'center',
+    cursor: 'pointer',
+    minWidth: 72,
+  },
+  runBtnDisabled: { opacity: 0.4 },
+  runBtnText: { fontSize: 12, fontWeight: '700', color: '#0d1117' },
+  clearBtn: {
+    height: 28,
+    paddingHorizontal: 10,
+    borderRadius: 6,
+    backgroundColor: C.surface2,
+    borderWidth: 1,
+    borderColor: C.border,
+    alignItems: 'center',
+    justifyContent: 'center',
+    cursor: 'pointer',
+  },
+  clearBtnText: { fontSize: 11, color: C.textSecondary },
+  errorRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 8,
+    backgroundColor: 'rgba(248,81,73,0.08)',
+    borderWidth: 1,
+    borderColor: 'rgba(248,81,73,0.25)',
+    borderRadius: 7,
+    padding: 10,
+  },
+  errorIcon: { fontSize: 13, color: C.danger, marginTop: 1 },
+  errorText: { flex: 1, fontSize: 12, color: C.danger, lineHeight: 18, fontFamily: 'monospace' },
+  resultArea: { gap: 6 },
+  resultMeta: { fontSize: 11, color: C.textMuted },
+  resultScroll: { maxHeight: 240, borderRadius: 7, borderWidth: 1, borderColor: C.border },
+  miniHeaderRow: {
+    flexDirection: 'row',
+    backgroundColor: C.surface2,
+    borderBottomWidth: 1,
+    borderBottomColor: C.border,
+  },
+  miniHeaderCell: {
+    width: 130,
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    fontSize: 10,
+    fontWeight: '700',
+    color: C.textSecondary,
+    textTransform: 'uppercase',
+    borderRightWidth: 1,
+    borderRightColor: C.borderSubtle,
+  },
+  miniRow: { flexDirection: 'row', borderBottomWidth: 1, borderBottomColor: C.borderSubtle },
+  miniRowEven: { backgroundColor: C.bg },
+  miniRowOdd: { backgroundColor: C.surface },
+  miniCell: {
+    width: 130,
+    paddingHorizontal: 10,
+    paddingVertical: 7,
+    fontSize: 12,
+    color: C.text,
+    borderRightWidth: 1,
+    borderRightColor: C.borderSubtle,
+  },
+  miniCellNull: { color: C.textMuted, fontStyle: 'italic' },
+});

package/src/components/Toolbar.tsx

@@ -0,0 +1,168 @@
+import React from 'react';
+import { View, Text, StyleSheet, Pressable } from 'react-native';
+import { C } from '../theme';
+import { Dropdown } from './Dropdown';
+
+interface ToolbarProps {
+  databases: string[];
+  selectedDB: string | null;
+  tables: string[];
+  selectedTable: string | null;
+  loadingTables: boolean;
+  loadingData: boolean;
+  rowCount: number;
+  columnCount: number;
+  onSelectDB: (db: string) => void;
+  onSelectTable: (table: string) => void;
+  onRefresh: () => void;
+  sqlOpen: boolean;
+  onToggleSql: () => void;
+}
+
+export function Toolbar({
+  databases,
+  selectedDB,
+  tables,
+  selectedTable,
+  loadingTables,
+  loadingData,
+  rowCount,
+  columnCount,
+  onSelectDB,
+  onSelectTable,
+  onRefresh,
+  sqlOpen,
+  onToggleSql,
+}: ToolbarProps) {
+  return (
+    <View style={s.toolbar}>
+      <View style={s.topRow}>
+        <View style={s.selectors}>
+          <Dropdown
+            label="Database"
+            value={selectedDB}
+            options={databases}
+            onSelect={onSelectDB}
+            loading={loadingTables && !selectedTable}
+            zIndex={20}
+          />
+          <View style={s.divider} />
+          <Dropdown
+            label="Table"
+            value={selectedTable}
+            options={tables}
+            onSelect={onSelectTable}
+            loading={loadingTables}
+            disabled={!selectedDB}
+            zIndex={10}
+          />
+          <View style={s.divider} />
+          <Pressable
+            style={({ pressed }) => [s.refreshBtn, pressed && s.refreshBtnPressed]}
+            onPress={onRefresh}
+            disabled={!selectedDB}
+          >
+            <Text style={[s.refreshIcon, !selectedDB && s.refreshIconDisabled]}>↻</Text>
+          </Pressable>
+          <View style={s.divider} />
+          <Pressable
+            style={({ pressed }) => [s.sqlBtn, sqlOpen && s.sqlBtnActive, !selectedDB && s.sqlBtnDisabled, pressed && { opacity: 0.8 }]}
+            onPress={onToggleSql}
+            disabled={!selectedDB}
+          >
+            <Text style={[s.sqlBtnText, sqlOpen && s.sqlBtnTextActive]}>›_ SQL</Text>
+          </Pressable>
+        </View>
+
+        <View style={s.badges}>
+          {selectedTable && !loadingData && (
+            <View style={s.badge}>
+              <Text style={s.badgeText}>{rowCount} rows</Text>
+            </View>
+          )}
+          {columnCount > 0 && !loadingData && (
+            <View style={[s.badge, s.badgeMuted]}>
+              <Text style={s.badgeText}>{columnCount} cols</Text>
+            </View>
+          )}
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const s = StyleSheet.create({
+  toolbar: {
+    flexDirection: 'column',
+    paddingHorizontal: 20,
+    paddingTop: 16,
+    backgroundColor: C.surface,
+    borderBottomWidth: 1,
+    borderBottomColor: C.border,
+    zIndex: 50,
+    overflow: 'visible',
+  },
+  topRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    paddingBottom: 14,
+    gap: 20,
+  },
+  brand: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    paddingBottom: 2,
+    marginRight: 4,
+  },
+  brandMark: { fontSize: 18, color: C.accent },
+  brandName: { fontSize: 14, fontWeight: '700', color: C.text, letterSpacing: 0.2 },
+  selectors: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    flex: 1,
+    overflow: 'visible',
+  },
+  divider: { width: 12 },
+  refreshBtn: {
+    width: 32,
+    height: 32,
+    borderRadius: 7,
+    backgroundColor: C.surface2,
+    borderWidth: 1,
+    borderColor: C.border,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 1,
+    cursor: 'pointer',
+  },
+  refreshBtnPressed: { backgroundColor: C.accentSubtle, borderColor: C.accent },
+  refreshIcon: { fontSize: 16, color: C.textSecondary, lineHeight: 18 },
+  refreshIconDisabled: { color: C.textMuted, opacity: 0.4 },
+  badges: { flexDirection: 'row', alignItems: 'center', gap: 8, paddingBottom: 3 },
+  badge: {
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    backgroundColor: C.accentSubtle,
+    borderRadius: 20,
+  },
+  badgeMuted: { backgroundColor: C.surface2 },
+  badgeText: { fontSize: 11, fontWeight: '600', color: C.textSecondary },
+  sqlBtn: {
+    height: 32,
+    paddingHorizontal: 10,
+    borderRadius: 7,
+    backgroundColor: C.surface2,
+    borderWidth: 1,
+    borderColor: C.border,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 1,
+    cursor: 'pointer',
+    marginLeft: 40
+  },
+  sqlBtnActive: { backgroundColor: C.accentSubtle, borderColor: C.accent },
+  sqlBtnDisabled: { opacity: 0.4 },
+  sqlBtnText: { fontSize: 12, fontWeight: '700', color: C.textSecondary, fontFamily: 'monospace' },
+  sqlBtnTextActive: { color: C.accent },
+});

package/src/constants.ts

@@ -0,0 +1,13 @@
+export const PLUGIN_ID = 'rozenite-sqlite' as const;
+
+export const EVENTS = {
+  GET_DB_LIST: 'get-db-list',
+  SEND_DB_LIST: 'send-db-list',
+  SQL_EXECUTE: 'sql-execute',
+  SQL_EXEC_RESULT: 'sql-exec-result',
+} as const;
+
+export const QUERIES = {
+  LIST_TABLES:
+    "SELECT name FROM sqlite_master WHERE type='table' AND name NOT LIKE 'sqlite_%' ORDER BY name",
+} as const;

package/src/hooks/useBridgeSync.ts

@@ -0,0 +1,146 @@
+import { useEffect, useRef, useCallback } from 'react';
+import { useRozeniteDevToolsClient } from '@rozenite/plugin-bridge';
+import { EVENTS, PLUGIN_ID, QUERIES } from '../constants';
+import type { RowData } from '../theme';
+import type { Action } from './useExplorerState';
+
+type BridgeClient = ReturnType<typeof useRozeniteDevToolsClient>;
+
+function fetchTables(client: NonNullable<BridgeClient>, dbName: string) {
+  client.send(EVENTS.SQL_EXECUTE, { dbName, query: QUERIES.LIST_TABLES });
+}
+
+function fetchData(client: NonNullable<BridgeClient>, dbName: string, tableName: string) {
+  client.send(EVENTS.SQL_EXECUTE, { dbName, query: `SELECT * FROM "${tableName}"` });
+}
+
+export function useBridgeSync(
+  dispatch: React.Dispatch<Action>,
+  selectedDB: string | null,
+  selectedTable: string | null,
+) {
+  const client = useRozeniteDevToolsClient({ pluginId: PLUGIN_ID });
+  const pendingRef = useRef<'tables' | 'data' | 'clear' | 'query' | null>(null);
+  const selectedDBRef = useRef(selectedDB);
+  const selectedTableRef = useRef(selectedTable);
+  const customQueryResolverRef = useRef<((r: { rows: RowData[]; columns: string[]; error?: string }) => void) | null>(null);
+  useEffect(() => { selectedDBRef.current = selectedDB; }, [selectedDB]);
+  useEffect(() => { selectedTableRef.current = selectedTable; }, [selectedTable]);
+
+  useEffect(() => {
+    if (!client) return;
+    // Reset state fully so the DB→tables→data cascade re-runs cleanly.
+    // This prevents the race where effects 2 & 3 both fire on reconnect/hot-reload.
+    dispatch({ type: 'RESET' });
+    client.send(EVENTS.GET_DB_LIST, true);
+
+    const sub1 = client.onMessage(EVENTS.SEND_DB_LIST, (payload: unknown) => {
+      const databases = Array.isArray(payload) ? (payload as string[]) : [];
+      dispatch({ type: 'SET_DATABASES', databases });
+    });
+
+    const sub2 = client.onMessage(EVENTS.SQL_EXEC_RESULT, (payload: unknown) => {
+      const mode = pendingRef.current;
+      const isError = payload !== null && typeof payload === 'object' && 'error' in payload;
+      const errorMsg = isError ? String((payload as { error: unknown }).error) : null;
+
+      if (mode === 'query') {
+        const resolver = customQueryResolverRef.current;
+        customQueryResolverRef.current = null;
+        pendingRef.current = null;
+        resolver?.(
+          isError
+            ? { rows: [], columns: [], error: errorMsg! }
+            : (() => {
+                const rows: RowData[] = Array.isArray(payload) ? (payload as RowData[]) : [];
+                return { rows, columns: rows.length > 0 ? Object.keys(rows[0]) : [] };
+              })(),
+        );
+        return;
+      }
+
+      if (isError) {
+        dispatch({ type: 'SET_ERROR', error: errorMsg! });
+        return;
+      }
+
+      if (mode === 'tables') {
+        const tables = Array.isArray(payload)
+          ? (payload as Array<{ name: string }>).map((r) => r.name)
+          : [];
+        dispatch({ type: 'SET_TABLES', tables });
+      } else if (mode === 'data') {
+        const rows: RowData[] = Array.isArray(payload) ? (payload as RowData[]) : [];
+        dispatch({ type: 'SET_DATA', rows, columns: rows.length > 0 ? Object.keys(rows[0]) : [] });
+      } else if (mode === 'clear') {
+        const db = selectedDBRef.current;
+        const table = selectedTableRef.current;
+        if (db && table) {
+          pendingRef.current = 'data';
+          dispatch({ type: 'LOAD_DATA_START' });
+          fetchData(client, db, table);
+        }
+      }
+    });
+
+    return () => {
+      sub1.remove();
+      sub2.remove();
+    };
+  }, [client, dispatch]);
+
+  // No `client` in deps — driven purely by state changes from the cascade above.
+  // This prevents effects 2 & 3 from firing simultaneously when client reconnects.
+  useEffect(() => {
+    if (!client || !selectedDB) return;
+    pendingRef.current = 'tables';
+    dispatch({ type: 'LOAD_TABLES_START' });
+    fetchTables(client, selectedDB);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedDB, dispatch]);
+
+  useEffect(() => {
+    if (!client || !selectedDB || !selectedTable) return;
+    pendingRef.current = 'data';
+    dispatch({ type: 'LOAD_DATA_START' });
+    fetchData(client, selectedDB, selectedTable);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedDB, selectedTable, dispatch]);
+
+  const refresh = useCallback(() => {
+    if (!client) return;
+    if (selectedDB && selectedTable) {
+      pendingRef.current = 'data';
+      dispatch({ type: 'LOAD_DATA_START' });
+      fetchData(client, selectedDB, selectedTable);
+    } else if (selectedDB) {
+      pendingRef.current = 'tables';
+      dispatch({ type: 'LOAD_TABLES_START' });
+      fetchTables(client, selectedDB);
+    }
+  }, [client, selectedDB, selectedTable, dispatch]);
+
+  const clearTable = useCallback(() => {
+    if (!client || !selectedDB || !selectedTable) return;
+    pendingRef.current = 'clear';
+    dispatch({ type: 'LOAD_DATA_START' });
+    client.send(EVENTS.SQL_EXECUTE, { dbName: selectedDB, query: `DELETE FROM "${selectedTable}"` });
+  }, [client, selectedDB, selectedTable, dispatch]);
+
+  const runCustomQuery = useCallback(
+    (sql: string): Promise<{ rows: RowData[]; columns: string[]; error?: string }> =>
+      new Promise((resolve) => {
+        const db = selectedDBRef.current;
+        if (!client || !db) {
+          resolve({ rows: [], columns: [], error: 'No database selected' });
+          return;
+        }
+        pendingRef.current = 'query';
+        customQueryResolverRef.current = resolve;
+        client.send(EVENTS.SQL_EXECUTE, { dbName: db, query: sql });
+      }),
+    [client],
+  );
+
+  return { refresh, clearTable, runCustomQuery };
+}

package/src/hooks/useExplorerState.ts

@@ -0,0 +1,160 @@
+import { useReducer, useCallback } from 'react';
+import type { RowData } from '../theme';
+import { useBridgeSync } from './useBridgeSync';
+
+export type ExplorerStatus = 'connecting' | 'idle' | 'loadingTables' | 'loadingData' | 'error';
+
+export interface ExplorerState {
+  databases: string[];
+  selectedDB: string | null;
+  tables: string[];
+  selectedTable: string | null;
+  rows: RowData[];
+  columns: string[];
+  selectedRowIndex: number | null;
+  status: ExplorerStatus;
+  error: string | null;
+}
+
+export type Action =
+  | { type: 'RESET' }
+  | { type: 'SELECT_DB'; db: string }
+  | { type: 'SELECT_TABLE'; table: string }
+  | { type: 'SET_DATABASES'; databases: string[] }
+  | { type: 'LOAD_TABLES_START' }
+  | { type: 'SET_TABLES'; tables: string[] }
+  | { type: 'LOAD_DATA_START' }
+  | { type: 'SET_DATA'; rows: RowData[]; columns: string[] }
+  | { type: 'SET_ERROR'; error: string }
+  | { type: 'SELECT_ROW'; index: number }
+  | { type: 'CLOSE_ROW' }
+  | { type: 'SAVE_ROW'; updated: RowData }
+  | { type: 'DELETE_ROW' };
+
+const initial: ExplorerState = {
+  databases: [],
+  selectedDB: null,
+  tables: [],
+  selectedTable: null,
+  rows: [],
+  columns: [],
+  selectedRowIndex: null,
+  status: 'connecting',
+  error: null,
+};
+
+function reducer(state: ExplorerState, action: Action): ExplorerState {
+  switch (action.type) {
+    case 'RESET':
+      return { ...initial };
+
+    case 'SELECT_DB':
+      return {
+        ...state,
+        selectedDB: action.db,
+        tables: [],
+        selectedTable: null,
+        rows: [],
+        columns: [],
+        selectedRowIndex: null,
+        error: null,
+      };
+
+    case 'SELECT_TABLE':
+      return { ...state, selectedTable: action.table, selectedRowIndex: null, error: null };
+
+    case 'SET_DATABASES':
+      return {
+        ...state,
+        status: 'idle',
+        databases: action.databases,
+        selectedDB: action.databases[0] ?? null,
+        error: null,
+      };
+
+    case 'LOAD_TABLES_START':
+      return {
+        ...state,
+        status: 'loadingTables',
+        tables: [],
+        selectedTable: null,
+        rows: [],
+        columns: [],
+        error: null,
+      };
+
+    case 'SET_TABLES': {
+      const { tables } = action;
+      const selectedTable = tables.includes(state.selectedTable ?? '')
+        ? state.selectedTable
+        : (tables[0] ?? null);
+      return { ...state, status: 'idle', tables, selectedTable };
+    }
+
+    case 'LOAD_DATA_START':
+      return {
+        ...state,
+        status: 'loadingData',
+        rows: [],
+        columns: [],
+        selectedRowIndex: null,
+        error: null,
+      };
+
+    case 'SET_DATA':
+      return {
+        ...state,
+        status: 'idle',
+        rows: action.rows,
+        columns: action.columns,
+        selectedRowIndex: null,
+      };
+
+    case 'SET_ERROR':
+      return { ...state, status: 'error', error: action.error };
+
+    case 'SELECT_ROW':
+      return {
+        ...state,
+        selectedRowIndex: state.selectedRowIndex === action.index ? null : action.index,
+      };
+
+    case 'CLOSE_ROW':
+      return { ...state, selectedRowIndex: null };
+
+    case 'SAVE_ROW':
+      if (state.selectedRowIndex === null) return state;
+      return {
+        ...state,
+        rows: state.rows.map((r, i) => (i === state.selectedRowIndex ? action.updated : r)),
+      };
+
+    case 'DELETE_ROW':
+      if (state.selectedRowIndex === null) return state;
+      return {
+        ...state,
+        rows: state.rows.filter((_, i) => i !== state.selectedRowIndex),
+        selectedRowIndex: null,
+      };
+
+    default:
+      return state;
+  }
+}
+
+export function useExplorerState() {
+  const [state, dispatch] = useReducer(reducer, initial);
+  const { selectedDB, selectedTable } = state;
+
+  const { refresh, clearTable, runCustomQuery } = useBridgeSync(dispatch, selectedDB, selectedTable);
+
+  const selectDB = useCallback((db: string) => dispatch({ type: 'SELECT_DB', db }), []);
+  const selectTable = useCallback((table: string) => dispatch({ type: 'SELECT_TABLE', table }), []);
+  const selectRow = useCallback((index: number) => dispatch({ type: 'SELECT_ROW', index }), []);
+  const closeRow = useCallback(() => dispatch({ type: 'CLOSE_ROW' }), []);
+  const saveRow = useCallback((updated: RowData) => dispatch({ type: 'SAVE_ROW', updated }), []);
+  const deleteRow = useCallback(() => dispatch({ type: 'DELETE_ROW' }), []);
+
+  return { state, selectDB, selectTable, selectRow, closeRow, saveRow, deleteRow, refresh, clearTable, runCustomQuery };
+}
+