A Professional Database Client Built with Tauri + React
Target: Build a Beekeeper Studio / DbGate competitor (5-9 months to advanced version) Stack: Tauri 2.0 + React + TypeScript + Rust Goal: Cross-platform, lightweight, secure, extensible database client
- Project Foundation
- Phase 0: Setup & Architecture
- Phase 1: MVP Development
- Phase 2: Advanced Features
- Phase 3: Enterprise Features
- Implementation Details
- Sub-Agents & Automation
Tech Stack:
- Frontend: React 19 + TypeScript + Monaco Editor + TanStack Table + shadcn/ui
- Backend: Tauri 2.0 + Rust + Tokio
- Database Drivers: PostgreSQL (tokio-postgres), MySQL (mysql_async), SQLite (rusqlite), MongoDB (mongodb)
- Security: OS keyring, SSH tunneling
- Storage: Tauri Store (settings, connections, history)
For detailed architecture patterns, see CLAUDE.md.
Week 1-2 Status:
- Project structure and dependencies configured
- Tauri 2.0 + React 19 + TypeScript + Tailwind CSS v4
- shadcn/ui components integrated
- DatabaseDriver trait designed
- OS keyring credential encryption implemented
- Error handling with DbError + thiserror
- State management with Mutex
Completed Features:
- ✅ Connection Management (PostgreSQL, MySQL, SQLite, MongoDB)
- ✅ SQL Editor with Monaco (syntax highlighting, autocomplete)
- ✅ Query Execution & Results Viewer (Grid/JSON/Raw modes)
- ✅ Schema Browser with tree view
- ✅ Table Inspector with inline editing
- ✅ Query History & Snippets
- ✅ CSV/JSON/SQL Export & Import
- ✅ Dark/Light theme support
- ✅ OS Keyring credential encryption
- Connection CRUD commands (create, update, delete, list, test, connect, disconnect)
- PostgreSQL, MySQL, SQLite, MongoDB drivers
- ConnectionForm & ConnectionList UI components
- OS keyring credential storage
- Persistent storage via Tauri Store
- shadcn/ui design system integration
- Monaco Editor with SQL syntax highlighting
- Multiple editor tabs with independent state
- Keyboard shortcuts (Ctrl+Enter, Ctrl+K)
- Query execution with TanStack Table results viewer
- Execution time tracking & row counts
- Query history & snippets management
- Resizable panels (editor/results/history)
- TanStack Table with virtualization & column sorting
- Cell/row/column copying with toast notifications
- CSV/JSON export with proper escaping
- Multiple view modes (Grid/JSON/Raw)
- NULL value indicators & execution metadata
- SchemaExplorer with hierarchical tree view
- Lazy loading for schemas & tables
- TableInspector with tabs (Data/Columns/Indexes)
- Context menus (Generate SELECT/INSERT, Copy Name, Refresh)
- Drag-and-drop table names to editor
- Search/filter functionality
- Inline table editing with transaction support
- ErrorBoundary & toast notifications
- Loading states & skeletons
- User documentation (README + USER_GUIDE)
- Light/Dark theme support
- Bug fixes & UX improvements
- MySQL/MariaDB driver with metadata queries
- MongoDB driver with CRUD operations & query parser
- SQL Server driver with tiberius (2025-11-22)
- SSH tunnel manager with password/key auth
- Tunnel lifecycle management
- Connection command integration with separate SSH password handling
- SSH configuration UI with collapsible form section
- SSH password storage in OS keyring (separate from database passwords)
- Backend commands: save_ssh_password, get_ssh_password
- Automatic SSH password retrieval when connecting
- Support for both password and private key authentication
- Full integration with ConnectionForm and ConnectionList
- Metadata cache with 5-minute expiration
- Context-aware suggestions (tables, columns, keywords, functions)
- Monaco Editor provider integration
- Manual metadata refresh
- Inline editing with cell change tracking
- Row selection & bulk delete
- Add/Insert rows with auto-generation detection
- Transaction preview with SQL highlighting
- Commit/rollback UI
- Database dump/restore (PostgreSQL, MySQL, SQLite)
- Export options (DROP/CREATE/INSERT statements)
- Import with transaction support & error handling
- SqlExportDialog & SqlImportDialog components
- PostgreSQL EXPLAIN (ANALYZE, FORMAT JSON) parser
- Visual query plan tree with cost highlighting
- QueryPlanVisualizer component with tree visualization
- Cost-based color coding (green/yellow/red)
- Detailed node metrics (costs, rows, execution time)
- Expand/collapse functionality
- Support for index scans, joins, filters
- TypeScript types for query plan structures
- Integration into QueryPanel with toggle UI (2025-11-21)
- Automatic EXPLAIN query detection
- PostgreSQL JSON/JSONB type support in driver (2025-11-21)
Drag-and-Drop SQL Query Builder
-
Core Query Builder Engine:
- Query builder state management (tables, columns, joins, filters, sorting)
- SQL generation from query builder state with database-specific syntax
- Support for SELECT queries (INSERT/UPDATE/DELETE deferred)
- Real-time SQL preview as user builds query
- Query validation with error messages
-
Visual Query Canvas:
- Table selector dropdown with schema organization
- Lazy loading of tables by schema
- Search functionality for tables
- Auto-generated unique table aliases
- Join type selector (INNER, LEFT, RIGHT, FULL OUTER, CROSS)
- Auto-suggest joins based on foreign keys
- Visual join management with color-coded badges
-
Column Selection & Transformation:
- Multi-select columns from all tables
- Column alias input
- Aggregate functions (COUNT, SUM, AVG, MIN, MAX, COUNT_DISTINCT)
- DISTINCT toggle (global and per-column)
- Column ordering with drag-and-drop reordering
-
Filter Builder:
- Visual WHERE clause builder with condition groups
- Support for AND/OR logic operators
- All comparison operators (=, !=, >, <, >=, <=, LIKE, NOT LIKE, IN, NOT IN, IS NULL, IS NOT NULL, BETWEEN)
- Type-aware value inputs (text, number, boolean)
- Nested condition groups (up to 3 levels)
- HAVING clause support for aggregations
-
Additional Features:
- GROUP BY column selection with validation
- ORDER BY with ASC/DESC toggle and reordering
- LIMIT and OFFSET inputs with validation
- Pagination preview calculation
- Database-specific SQL generation (PostgreSQL, MySQL, SQLite, SQL Server, MongoDB)
-
UI/UX:
- Split view: Query Builder (left) + Generated SQL (right)
- "Execute Query" button with results navigation
- Monaco Editor for SQL preview with syntax highlighting
- Collapsible sections for all query components
- Responsive layout with resizable panels
- Integrated into View menu in CustomTitlebar
- Full route integration at /visual-query
Implementation Date: 2025-11-22
Deferred Features:
- Import SQL query to visual builder (requires SQL parser)
- Export query builder state to JSON
- Save query templates
- Pan and zoom canvas for large queries
- INSERT/UPDATE/DELETE query support
- Foreign key relationship parsing (PostgreSQL, MySQL, SQLite)
- Dagre automatic hierarchical layout with top-to-bottom flow
- ReactFlow integration with Handle components for proper connections
- Zoom (0.05x-1.5x), pan, drag controls
- SVG export functionality
- Smart node styling: Junction table detection, column limiting (max 10)
- Performance optimizations: No edge animations, smart minimap coloring
- UI integration: Popover menu for actions, control panel
- Optimized spacing (180px horizontal, 250px vertical)
TanStack Router Implementation
- Migrated from React Router to TanStack Router v1.139.0
- Type-safe routing with search params validation
- File-based routing structure with 10 routes:
-
__root.tsx- Root layout with providers -
index.tsx- Welcome screen -
connections.tsx- Side-by-side connection management -
settings.tsx- Settings page -
_connected/route.tsx- Connected layout with schema explorer -
_connected/query.tsx- Multi-tab query panel -
_connected/table.$schema.$tableName/route.tsx- Table route parent -
_connected/table.$schema.$tableName/index.tsx- Table redirect to tabs -
_connected/er-diagram.$schema.tsx- ER diagram viewer -
_connected/visualization.tsx- Visualization route
-
- URL-based multi-table tabs system:
- Tab IDs:
query-{timestamp}andtable-{schema}.{tableName} - Search params:
?tabs=query-1,table-public.users&active=0 - Tab bar with close buttons and Plus button
- Tab IDs:
- Per-tab state preservation:
- TabContext with React Context API
- LocalStorage persistence per connection
- Automatic save/restore on connection change
- SQL content preservation across tab switches
- Component rendering optimization:
- All tabs rendered simultaneously with absolute positioning
- CSS show/hide instead of mount/unmount
- No content loss on tab switching
Visual Connection Management
- Build dashboard page for managing all connections:
- Category tabs (All, Favorites, Recently Used, Local, Cloud)
- Grid/list view toggle
- Connection cards showing:
- Connection name and DB type icon
- Host summary with port
- Driver type badge with color coding
- Favorite star indicator
- Search bar with real-time filtering
- Top actions: New Connection, Refresh
- Responsive grid layout (1/2/3 columns based on screen size)
- Hover states and animations with smooth transitions
- Double-click to connect functionality
- Context actions: Edit, Delete, Toggle Favorite
- Empty states for filtered results
- Password prompt dialog for connections without saved passwords
DDL Operations - Create/Modify/Delete Database Objects
Backend (Rust - Tauri Commands):
- DDL Type System (src-tauri/src/models/ddl.rs - 380 lines):
- ColumnType enum with 20+ database types
- TableDefinition, ColumnDefinition structures
- ForeignKeyConstraint, UniqueConstraint, CheckConstraint
- AlterColumnOperation enum for table modifications
- DropTableDefinition for table removal
- DdlResult for operation responses
- Database-specific DDL generators (2000+ lines):
- PostgreSQL (postgres.rs - 450 lines):
- SERIAL/BIGSERIAL types for auto-increment
- Array types support (e.g., INTEGER[])
- JSONB support
- UUID type support
- Table and column comments
- Full constraint support
- MySQL (mysql.rs - 400 lines):
- AUTO_INCREMENT support
- ENGINE=InnoDB specification
- Inline column comments
- CHECK constraints (MySQL 8.0.16+)
- SQLite (sqlite.rs - 330 lines):
- Type affinity-based column types
- AUTOINCREMENT for INTEGER PRIMARY KEY
- Limited ALTER TABLE support (ADD COLUMN, RENAME COLUMN, DROP COLUMN)
- Clear error messages for unsupported operations
- SQL Server (sqlserver.rs - 350 lines):
- IDENTITY columns
- UNIQUEIDENTIFIER for UUIDs
- Schema prefix support (defaults to dbo)
- sp_rename for column renaming
- PostgreSQL (postgres.rs - 450 lines):
- Tauri commands (src-tauri/src/commands/ddl.rs - 250 lines):
- preview_create_table - Generate SQL without executing
- create_table - Create and execute
- preview_alter_table - Preview modifications
- alter_table - Execute modifications
- preview_drop_table - Preview table drop
- drop_table - Execute table drop
- Foreign key support:
- ON DELETE/UPDATE actions (CASCADE, SET NULL, RESTRICT, NO ACTION, SET DEFAULT)
- Named constraints with auto-generation
- Generate preview SQL for all DDL operations
- Transaction support for complex schema changes (TODO: Future enhancement)
Frontend (React Components):
- TableCreationDialog component (src/components/TableCreationDialog.tsx - 450 lines):
- Multi-step wizard (Basic Info → Columns → Constraints → Preview)
- Column builder with type dropdown (9 common types)
- Primary key checkbox (single and composite support)
- Auto-increment toggle
- Nullable toggle
- Add/remove columns dynamically
- SQL preview panel with syntax highlighting
- Form validation (table name required, column names required)
- IF NOT EXISTS toggle
- Foreign key builder UI (TODO: Future enhancement - types ready)
- Index builder UI (TODO: Future enhancement - types ready)
- SchemaExplorer integration:
- "Create Table" context menu on schema
- "Refresh Tables" context menu on schema
- Auto-refresh tables after creation
- TableEditor component for existing tables (TableEditDialog: add/drop/rename columns, toggle nullability, SQL preview)
- ConfirmationDialog for destructive operations (ConfirmDestructiveDialog)
TypeScript Types & API:
- TypeScript types (src/types/ddl.ts - 320 lines):
- Matching types for all Rust definitions
- ColumnTypes helper factory functions
- getColumnTypeLabel() for UI display
- API module (src/api/ddl.ts - 120 lines):
- Typed wrappers for all 6 Tauri commands
- Full JSDoc documentation
Safety & UX:
- Preview SQL before execution
- Error handling with user-friendly messages
- Rollback support for failed operations (TODO: Future enhancement)
- Warning dialogs for destructive actions (ConfirmDestructiveDialog, wired into drop-table)
- Foreign key dependency checks (FK-referencing tables listed before drop)
Integration:
- Context menu integration in SchemaExplorer
- Auto-refresh after table creation
- Add "Schema" menu to CustomTitlebar (New Table..., Refresh Metadata; shown only when connected)
- Add schema modification shortcuts to keyboard shortcuts modal (TODO: Future enhancement)
- Update metadata cache after DDL operations (useMetadataCache event bus + SchemaExplorer listener)
Implementation Date: 2025-11-23
Known Issues:
- Debug logging currently active (will be removed after testing)
- Foreign key and unique constraint UI planned for future enhancement
- Advanced ALTER TABLE operations (change type, set NOT NULL) need frontend UI
MongoDB Note:
- DDL operations intentionally not supported (NoSQL database)
- Returns clear error message: "DDL operations not supported for MongoDB"
Visual Schema Designer
- Implement ERD canvas with:
- Draggable table boxes with position persistence
- Column lists inside each table box
- Visual relationship lines (one-to-one, one-to-many, many-to-many)
- Primary/foreign key indicators with color coding
- Add ERD toolbar:
- Auto-Layout algorithm with Dagre
- Toggle Relationships visibility
- Export to PNG
- Zoom controls (minimap with React Flow)
- Grid-based canvas with snap-to-grid
- Performance optimizations (React.memo, useCallback, useMemo)
- Visual enhancements with cardinality indicators
Implementation Date: 2025-11-24
Auto-Update with System Notifications
- Install and configure tauri-plugin-notification
- Install and configure tauri-plugin-updater and tauri-plugin-process
- Implement automatic update checking with configurable interval
- Add system notifications for all update events:
- Update available notification
- Download started notification
- Download progress tracking
- Update ready notification
- Auto-install with restart notification
- Create settings for auto-update preferences:
- Enable/disable automatic update checking
- Configurable check interval (1-168 hours)
- Optional auto-download
- Optional auto-install with 3-second restart delay
- Implement useAutoUpdater hook with:
- Background periodic checking
- Notification permission handling
- Download and install logic
- Progress tracking
- Add Settings UI for update configuration
- Update TypeScript types and defaults
Implementation Date: 2025-11-24
Custom Window Decorations & Tray Integration
- Enable tray-icon feature in Cargo.toml
- Configure custom window titlebar (decorations: false)
- Implement system tray icon with application icon
- Create system tray menu with:
- Show/Hide Window action
- Open Settings action
- Separator
- Quit action
- Handle tray menu events (show/hide, settings, quit)
- Handle tray click events (double-click to show window)
- Window minimize-to-tray behavior
- Native window feel with custom controls
Application Settings Page (discovered from redesign.md)
- Build settings page with sidebar navigation: ✅
- General settings (language, default database, startup behavior) ✅
- Theme settings (Dark/Light/Auto, accent color, editor font) ✅
- Keyboard Shortcuts display (read-only for now) ✅
- Query Execution Settings (timeout, max rows, auto-commit, confirmDestructive) ✅
- Backup & Import/Export preferences (TODO: Future enhancement)
- Plugins management (TODO: Future enhancement)
- Add search bar for quick settings filtering (TODO: Future enhancement)
- Use card layout with toggles, dropdowns, text inputs ✅
- Implement keyboard shortcuts customization modal (TODO: Future enhancement)
Session Monitoring Dashboard
- Build activity logging backend:
- QueryLog type with full metadata (connection, database, SQL, type, status, duration, row count, errors)
- ActivityLogger with thread-safe RwLock for concurrent access
- Automatic query logging on all execute_query calls
- Configurable retention period (default 7 days)
- SQL query type auto-detection (SELECT, INSERT, UPDATE, etc.)
- Build query execution logs UI:
- QueryLogTable with TanStack Table (expandable rows, sortable columns)
- Pagination controls (10, 25, 50, 100 per page)
- Query log filtering (connection, database, query type, status, duration, date range, search)
- Query log statistics dashboard (total queries, failed count, avg duration, breakdowns)
- Implement comprehensive filters:
- Filter by connection, database, query type, status
- Duration range filter (min/max ms)
- Date range filter
- Search text in SQL queries
- Active filter count indicator
- Export functionality:
- Export to JSON format
- Export to CSV format
- Export to TXT format
- Tauri command for file system export
- Activity statistics:
- Total queries, failed queries, average duration, total rows
- Breakdown by query type (SELECT, INSERT, UPDATE, etc.)
- Breakdown by status (completed, failed, running, cancelled)
- UI Integration:
- Split view layout with resizable panels
- Auto-refresh with configurable intervals (5s, 10s, 30s)
- Manual refresh button
- Clear logs button with confirmation
- Color-coded badges for query types and statuses
- Added to View menu in CustomTitlebar
- Full route integration at /activity
Implementation Date: 2025-11-22
Deferred Features:
- Active queries list with real-time updates (PostgreSQL/MySQL via
pg_stat_activity/information_schema.processlist; 2s polling, kill-query support) - Server metrics chart (connections, active, tx/sec) via
pg_stat_database/SHOW GLOBAL STATUSwith rolling 60-sample recharts line chart - Process list table (database-side session queries with cancel action)
- Host-level CPU/memory usage chart (would require OS-level metrics collection; server-side DB metrics implemented instead)
Extensible Plugin Architecture with JavaScript Runtime
- Plugin Runtime with boa_engine (pure Rust JS interpreter):
- Sandboxed JavaScript execution environment
- IIFE wrapper pattern for export capture
- Permission-based API access control
- Resource limits and sandbox isolation
- Plugin Manager:
- Install/uninstall plugins from marketplace
- Enable/disable installed plugins
- Bundled plugin discovery and copying
- Plugin configuration storage
- DBHive JavaScript API:
- File read/write (sandboxed to plugin data dir)
- Key-value storage API
- Clipboard read/write (arboard)
- HTTP requests (reqwest blocking)
- Notification system
- UI component registration (toolbar, context menu)
- Plugin Marketplace UI:
- Category filtering and search
- Plugin cards with stats (downloads, rating)
- Install/uninstall buttons
- Sort options (Popular, Recent, Rating)
- Installed Plugins UI:
- Plugin list with enable/disable toggles
- Plugin details view (permissions, stats, keywords)
- Settings dialog for plugin configuration
- Run button for plugin actions
- Uninstall confirmation
- Plugin Action Handlers:
- PluginContext for tracking registered UI components
- PluginToolbar for toolbar buttons
- usePluginContextMenu hook for context menus
- Event listeners for plugin notifications
- CSV Exporter Plugin (bundled):
- Export query results to CSV
- Configurable delimiter, headers, quoting
- Toolbar button and context menu registration
- Plugin Development Documentation
Implementation Date: 2025-11-28
Interactive Shortcuts Guide
- Build keyboard shortcuts modal:
- Grouped by category (Editor, Navigation, Welcome Screen)
- Card-based layout with organized sections
- Monospace font for shortcut keys with platform detection
- Search bar for filtering shortcuts with real-time results
- Platform-specific shortcuts (Cmd vs Ctrl) auto-detected
- Add "?" hotkey to open shortcuts modal globally
- Add menu item in Help menu with keyboard hint
- Comprehensive shortcut definitions for all implemented shortcuts
- Empty state for search with no results
- Platform indicator footer showing current OS
- Make shortcuts customizable (TODO: Future enhancement - link to Settings)
Friendly Error Handling & Professional Empty States
- Design and implement error state components:
-
ErrorState- Reusable base component with 3 variants (error/warning/info) -
ConnectionLostError- Database connection failure with reconnect actions -
QueryErrorState- Professional query error display with collapsible details - Soft CSS animations (fade-in, slide-up, zoom-in)
- Minimal, friendly text with helpful tips
-
- Create empty state components:
-
NoConnectionsEmpty- No connections saved -
NoHistoryEmpty- No query history -
NoTablesEmpty- No tables in database -
NoSearchResultsEmpty- No search results -
NoResultsEmpty- No query results -
NoDataEmpty- No table data
-
- Integration into existing components:
- ConnectionList and ConnectionDashboard
- HistoryPanel
- ResultsViewer
- SchemaExplorer
- EnhancedConnectionList
- Design features:
- Color-coded icons for visual recognition
- Three size variants (sm, md, lg)
- Dark/light theme support
- Responsive, mobile-friendly layouts
- WCAG 2.1 AA accessibility compliant
- Smart detection of search/filter states
- Comprehensive documentation with examples and API reference
Implementation Date: 2025-11-24
Application Information
- Create About page (
/aboutroute):- DB Hive logo matching titlebar branding (centered)
- Version number (0.7.0-beta) with badge styling
- App tagline: "A Professional Cross-Platform Database Client"
- Contributors & Core Team section with "Built with Claude Code" badge
- GitHub repository link
- Documentation link (GitHub wiki)
- Report Issues link (GitHub issues)
- License information (MIT) with copyright year
- Third-party credits for 10+ major dependencies
- Professional card-based layout with centered typography
- "Check for Updates" button with toast notification
- Integration into Help menu in CustomTitlebar
- Smart back button with route persistence
- Dark/light theme support
- Responsive design
- External links open in new tabs
Implementation Date: 2025-11-24
Automatic Application Updates
- Install and configure Tauri updater plugin:
- Add
tauri-plugin-updater(v2.9.0) to Rust dependencies - Add
@tauri-apps/plugin-updaterto frontend dependencies - Initialize updater plugin in
lib.rs
- Add
- Configure
tauri.conf.json:- Enable
createUpdaterArtifacts: truefor build process - Set update endpoint to GitHub releases (
latest.json) - Add public key field for signature verification
- Enable
- Implement update check functionality in About page:
- Replace placeholder toast with real update checking
- Add loading states (checking, downloading)
- Visual feedback with spinner and download icon
- Toast notifications for all update states
- Automatic download and installation
- App relaunch after successful update
- Error handling:
- Network error handling
- Download failure handling
- Installation error handling with user-friendly messages
- User experience:
- Button disabled during operations
- Progress indicators
- Clear success/error messaging
- Non-blocking UI (toast notifications)
Files Modified:
src-tauri/src/lib.rs- Added updater plugin initializationsrc-tauri/tauri.conf.json- Added updater configurationsrc/routes/about.tsx- Implemented update check logicsrc-tauri/Cargo.toml- Added tauri-plugin-updater dependencypackage.json- Added @tauri-apps/plugin-updater dependency
Notes:
- Signing keys need to be generated for production releases:
npm run tauri signer generate - Update artifacts will be created automatically during GitHub release builds
- Updater checks GitHub releases for
latest.jsonmanifest - Signature verification ready (requires public key configuration)
Implementation Date: 2025-11-24
- Design plugin architecture (JS with boa_engine)
- Create plugin API (DBHive JS API)
- Build plugin manager UI (Marketplace + Installed)
- Develop example plugins (CSV Exporter)
- Design cloud sync architecture
- Implement E2E encryption
- Build sync UI
- Add conflict resolution
- Design drag-and-drop interface
- Implement query generation
- Support JOINs, WHERE, GROUP BY
- Add preview mode
Drag-and-Drop Database Schema Creation
-
Canvas & Table Creation:
- ReactFlow-based canvas (reuses ERD ReactFlow infrastructure)
- "+ Add Table" button drops new table node at staggered canvas position
- Draggable table nodes with position sync back to state
- Delete table button (×) in node header
- MiniMap + Controls for zoom/pan
-
Table Node Display:
-
TableSchemaNodecustom ReactFlow node (280px wide) - Header: primary color background + table name + delete button
- Column rows: PK key icon, FK link icon, type label, UNQ/NN badges
- ReactFlow handles on left/right for FK edge drawing
-
-
Right Panel Properties Editor:
- Table name + schema inputs
- Column list: name, type dropdown (12 types), PK/nullable/unique toggles
- FK reference inputs (references table + column)
- Add/remove column buttons
-
Relationship Builder:
- FK edges auto-drawn when
referencesTableset on a column - Animated edges with primary color
- ReactFlow
onConnectfor manual edge drawing
- FK edges auto-drawn when
-
SQL Generation:
- "Preview SQL" → calls
preview_create_tablefor each table → shows in Dialog - "Create Tables" → calls
create_tablesequentially with success/error toasts - Maps 12 designer types to backend
ColumnTypeenum
- "Preview SQL" → calls
-
UI/UX:
- 3-panel layout: table list (200px) + canvas + properties (300px)
- Left panel table list with click-to-select
- Route:
/_connected/visual-schema-designer - Accessible from titlebar "Schema Designer" menu item
-
Undo/redo support (TODO: future)
-
Index designer (TODO: future)
-
Check constraints editor (TODO: future)
-
Cardinality indicators (TODO: future)
- Not null constraints
- Default value expressions
-
Schema Generation:
- Real-time DDL preview panel
- Database-specific SQL generation (PostgreSQL, MySQL, SQLite, SQL Server)
- CREATE TABLE ordering based on dependencies
- Foreign key dependency resolution
- "Generate SQL" button to copy/export
- "Execute Schema" to create all tables
-
Project Management:
- Save schema designs as projects
- Load/edit existing designs
- Export design to JSON
- Import from existing database (reverse engineer)
- Version history for designs
-
UX Features:
- Grid snap for alignment
- Auto-layout algorithm
- Zoom and pan controls
- Minimap for large schemas
- Table grouping/coloring by domain
- Search/filter tables
- Keyboard shortcuts
Technical Notes:
- Reuse ReactFlow from ERD viewer
- Reuse DDL generation from Milestone 3.3
- Extend TableDefinition types for visual metadata (position, color)
- Store designs in Tauri Store or separate files
- Schema diff algorithm (pure
compute_diff(source, target) -> SchemaDiff) - Generate migration SQL (driver-aware, reuses existing DDL generators)
- Apply migrations UI (
<MigrationsDialog>with diff preview + Monaco SQL preview + transactional apply) - Command palette entry ("Schema Migrations...")
- Version control integration (TODO: out of scope for initial pass)
Driver coverage:
- PostgreSQL / Supabase / Neon — full
- MySQL — columns, indexes, FKs (no standalone nullable/default toggle)
- SQL Server — type + nullable via
ALTER COLUMN - SQLite / Turso — CREATE/DROP, ADD/DROP column, indexes, FKs (no ALTER COLUMN TYPE)
- MongoDB — rejected (
InvalidInput)
Known gaps: no column-rename detection (treated as drop+add), no check-constraint diffing, no view/trigger/sequence/procedure diffing, no FK ON DELETE action change detection, cross-table FKs between two newly-added tables omitted.
Multi-Provider AI-Powered SQL Assistant
- Provider-agnostic architecture:
- AiProvider trait for common interface
- Pluggable provider system
- Per-provider configuration
- Ollama Integration (Local LLM):
- Local model discovery and selection
- No API key required (privacy-first)
- Support for llama3.2, codellama, mistral, etc.
- OpenAI Integration:
- GPT-4o, GPT-4, GPT-3.5 Turbo support
- Automatic model listing from API
- Context window detection
- Anthropic (Claude) Integration:
- Claude Sonnet 4, Claude 3.5 Sonnet, Claude 3 Opus support
- System message handling (separate parameter)
- 200K context window models
- Google (Gemini) Integration:
- Gemini 2.0 Flash, Gemini 1.5 Pro/Flash support
- 1M+ context window models
- Automatic model discovery
- AI Features:
- Natural language to SQL generation
- Query explanation in plain English
- Query optimization suggestions
- Error fixing with context
- General chat capabilities
- Frontend UI:
- Provider selection dropdown
- Model selection per provider
- API key management (settings panel)
- Status indicators (connected, needs key, offline)
- Schema context viewer
- Quick action buttons (Explain, Optimize, Fix)
- Result display with "Apply to Editor" button
- Schema Context:
- Automatic schema loading on connection
- Full table/column context for accurate SQL
- System schema filtering (pg_catalog, information_schema, etc.)
Implementation Date: 2025-11-29
Cloud & Serverless Databases
-
Supabase Driver: (2026-04-21)
- PostgreSQL-compatible connection via Supabase URL
- SSL/TLS enabled by default for cloud connections (native-tls + postgres-native-tls)
- Reuse existing PostgreSQL driver infrastructure
- Connection pooler awareness (Transaction/Session modes) — user-selected by host (pooler vs direct)
-
Neon Driver: (2026-04-21)
- PostgreSQL-compatible serverless connection
- SSL required by default (Neon endpoints mandate TLS)
- Reuse existing PostgreSQL driver infrastructure
- Cold start handling and dedicated pooling tuning
-
Turso Driver: (2026-04-21)
- libSQL/SQLite edge database support via
libsqlcrate 0.9 - Remote connection via
libsql:///https://URL - Authentication token handling (stored in OS keyring)
- Form adaptations: URL-accepting host, renamed "Auth Token" password field, hidden username
- Routes through
SqliteDdlGeneratorin migration + DDL paths - Embedded replica support (TODO: future)
- libSQL/SQLite edge database support via
-
Redis Driver: ✅ COMPLETED (2026-05-15)
-
DbDriver::Redisvariant, default port 6379 -
rediscrate 0.27 withtokio-comp+connection-managerfeatures -
MultiplexedConnectionviaArc<Mutex<...>>for thread-safe async access - Key-value store operations via raw Redis command string execution
- Data structure types mapped as pseudo-tables: strings, hashes, lists, sets, zsets
-
get_databasesreturns logical DBs 0-15;get_schemasreturns virtual "keys" namespace -
get_tablessamples key types via SCAN;get_table_schemareturns conceptual column layout per type - Wired into
test_connection_command+connect_to_databaseincommands/connection.rs - Key browser and data viewer UI (TODO: future)
- Cluster and Sentinel support (TODO: future)
-
Frontend Integration:
- Connection form updates for each driver type
- Driver-specific icons and branding
- Connection testing for cloud databases
- SSL certificate handling UI
Notes:
- Supabase and Neon can leverage existing PostgreSQL driver
- Turso requires libsql Rust crate integration
- Redis requires custom UI (non-relational data model)
Current Status: Phase 2 in progress - Advanced features being implemented
Completed:
- ✅ Phase 0: Architecture & Setup
- ✅ Phase 1: MVP Development (Connection management, SQL editor, schema browser, table editor)
- ✅ Milestone 2.1-2.5: MySQL/MongoDB drivers, autocomplete, table editing, SQL import/export
- ✅ Milestone 2.6: Query Plan Visualizer (2025-11-21)
- ✅ Milestone 2.7: ER Diagram Generator (2025-11-20)
- ✅ Milestone 2.9: Router Migration with TanStack Router (2025-11-21)
- ✅ Settings & Configuration (2025-11-20)
- ✅ Native Window & System Tray (2025-11-21)
- ✅ Custom Window Titlebar & Menu System (2025-11-21)
- ✅ Global Keyboard Shortcuts System (2025-11-21)
- ✅ Window State Persistence (2025-11-21)
Recently Completed:
- ✅ Multi-Window Support — Multiple independent OS windows, each with its own connection. Single Rust process / shared
AppState(connections keyed by ID → no cross-window collision; keyring shared & safe). Rust-side window creation incommands/window.rs(open_database_window, uniquewin-{uuid}label, chrome mirrorsmain); one-shotPendingWindowProfilesmap +take_pending_window_profiledrives per-window auto-connect. Affordances: home-screen "Open in New Window" per profile, titlebar File → New Window, tray "New Window", global ⌘⇧N / Ctrl+⇧N. Capability widened towin-*;windowState.tsgeometry keyed per window label (legacy key kept formain). (2026-05-17) - ✅ Performance Hardening Pass — Audit-driven backend/frontend optimizations: 50k row cap on
execute_query(+truncatedflag/toast);get_autocomplete_metadataN×M sequential awaits →tokio::task::JoinSetbounded at 16; SQLiteget_tables/get_foreign_keysand PostgreSQL zero-count N+1 collapsed into single round-trips;PostgresDrivermoved to adeadpool-postgrespool (max 8);export_query_logswrites off-runtime viaspawn_blocking; ActivityMonitor metadata refetch decoupled from pagination; VitemanualChunksvendor splitting; TableInspector keyset pagination (single-PK/non-Mongo) with OFFSET fallback, backed by a hardened filter/sort-awareget_table_data_keyset(fixed an invalid-SQL cursor-literal bug). Also restored thecargo test --libtarget (was uncompilable due toState::frominschema.rstests; now usestauri::test::mock_app()— 118 tests run, 115 pass, 3 keyring failures environmental). (2026-05-17) - ✅ Backup Manager UI —
<BackupManagerDialog>over the existing backup commands. Titlebar View-menu entry viauseAppModal("backup", rendered inGlobalModals). Directory header (Open Folder/Refresh), create panel (schema/data toggles, note, slow-op loading), backups table with per-row Restore (destructive confirm + drop-existing checkbox) and Delete. (2026-05-17) - ✅ Redis Key Browser (left sidebar) — For Redis connections SchemaExplorer renders
<RedisSchemaTree>instead of the relational tree: five key-type groups lazy-loaded via type-filteredSCAN … TYPE, search-box glob, "Load more…". Clicking a key opens<RedisValuePanel>in a main-area tab (new"redis"TabContext type,rediskey-tab id). Replaced the earlier titlebar-menu/redis-keystwo-pane browser. (2026-05-17) - ✅ Foreign-Key Drill-Down — Table Inspector FK cells expose an external-link button + "Open Referenced Record" context entry; opens the referenced table in a new tab pre-filtered to the related row via a self-describing
tablefk-tab id (URL-sync recreation rebuilds schema/table/column/value + filter). (2026-05-17) - ✅ Redis Driver —
DbDriver::Redisvariant withrediscrate 0.27.MultiplexedConnectionviaArc<Mutex<...>>. Key-type pseudo-tables (strings/hashes/lists/sets/zsets) via SCAN sampling. Raw Redis command execution (GET, SET, HGETALL, etc.). Wired intotest_connection_command+connect_to_database. Default port 6379. (2026-05-15) - ✅ Visual Schema Designer — ReactFlow 3-panel drag-and-drop schema builder. Custom
TableSchemaNodewith column display (PK/UNQ/NN badges). Right-panel properties editor for table name, schema, 12 column types, FK references. FK edges auto-drawn between nodes. "Preview SQL" viapreview_create_table+ "Create Tables" viacreate_table. Route/_connected/visual-schema-designer, accessible from titlebar. (2026-05-15) - ✅ Backup Manager —
commands/backup.rswith 6 commands:get_backup_directory,list_backups,create_backup(pg_dump / mysqldump / sqlite copy / mongodump subprocess),restore_backup(psql / mysql / sqlite copy),delete_backup,open_backup_directory. Data models inmodels/backup.rs(BackupEntry, BackupOptions, BackupStatus, RestoreOptions, BackupProgress). (2026-05-15) - ✅ Stored Procedures & Functions Viewer — New commands
list_procedures,get_procedure_definition,execute_procedure(PG viapg_proc+pg_get_functiondef, MySQL viainformation_schema.ROUTINES+SHOW CREATE, SQL Server viasys.objects).<StoredProceduresPanel>lazy-loads definitions and offers an execute dialog with JSON args (2026-04-21) - ✅ Write-Query Guards (dbpro parity) — Pre-execute analyzer intercepts destructive SQL (DELETE/UPDATE without WHERE, DROP/TRUNCATE/DROP COLUMN);
<DestructiveQueryGuard>AlertDialog; wired through_connected/query.tsxso Ctrl+Enter is also guarded; respectssettings.query.confirmDestructive(2026-04-21) - ✅ Query Folders (dbpro parity) — Nested
SnippetFoldertree in SnippetSidebar with context-menu create/rename/delete/move, cycle prevention, cascade-delete-to-root, search auto-expand; persisted separately from snippets for backward compat (2026-04-21) - ✅ OpenRouter AI Provider (dbpro parity) — New provider routing through OpenAI-compatible
openrouter.ai/api/v1with FQID models likeanthropic/claude-3.5-sonnet; settings entry inAiAssistant(2026-04-21) - ✅ Turso / libSQL Driver — New
DbDriver::Tursovariant usinglibsqlcrate 0.9. Remote mode with auth-token auth. Routes throughSqliteDdlGeneratorfor DDL and migrations. Form adapts for URL host + "Auth Token" field (2026-04-21) - ✅ Schema Migration Tools —
src-tauri/src/migrations/module with pure diff algorithm + driver-aware SQL generator. Tauri commandscompute_schema_diff,generate_migration,apply_migration.<MigrationsDialog>3-step flow wired to command palette (2026-04-21) - ✅ Activity Monitor — Live Process List + Server Metrics —
get_active_queries,kill_query,get_server_statscommands; PG viapg_stat_activity/pg_stat_database, MySQL viaPROCESSLIST/SHOW GLOBAL STATUS;<ProcessList>(2s polling, per-row cancel) +<ServerMetricsChart>(60-sample rolling recharts) (2026-04-21) - ✅ Schema Management Deferred Items —
<TableEditDialog>for existing tables (add/rename/drop columns, toggle nullability, SQL preview);<ConfirmDestructiveDialog>with FK dependency listing + auto-CASCADE;useMetadataCachehook +metadata-changedCustomEvent; new "Schema" menu in titlebar (2026-04-21) - ✅ Supabase + Neon Drivers — New
DbDriver::SupabaseandDbDriver::Neonvariants route through the existing PostgreSQL driver. Added TLS support:native-tls+postgres-native-tlscrates,ConnectionOptions.require_tlsflag, auto-enabled for Supabase/Neon and whenssl_mode == Require. Frontend picker tiles activated, driver-specific connection-string placeholders added (Milestone 3.13 partial) (2026-04-21) - ✅ v0.19.2 Bug Fixes — PostgreSQL connection password retrieval resilience (keyring fallback in
connect_to_database, session cache insave_password) + pgvector/array type rendering:vectorcolumns now deserialise correctly via thepgvectorcrate and all PostgreSQL array types (_float4,_int4,_text, etc.) emit JSON arrays instead of NULL (2026-03-10) - ✅ Milestone 3.14: AI Assistant - Multi-provider AI with Ollama, OpenAI, Claude, Gemini support; natural language to SQL, query explanation, optimization, error fixing (2025-11-29)
- ✅ Import Wizards - Import from Excel/CSV with column mapping, data type detection, batch import (2025-11-28)
- ✅ Data Visualization - Interactive charts (bar, line, area, pie, scatter) from query results with recharts (2025-11-28)
- ✅ Query Templates - Save/load query templates with parameters, validation, and SQL preview (2025-11-28)
- ✅ Milestone 3.7: Plugin System - Full plugin architecture with boa_engine JS runtime, marketplace UI, plugin settings, action handlers, and CSV Exporter bundled plugin (2025-11-28)
- ✅ Milestone 3.12: Automatic Update System - Complete auto-update with system notifications, configurable intervals, auto-download, and auto-install with restart (2025-11-24)
- ✅ Milestone 3.10: ERD Builder Enhancements - Interactive ERD canvas with draggable tables, React Flow integration, auto-layout, performance optimizations, and visual enhancements (2025-11-24)
- ✅ Milestone 3.11: Auto-Update System - Tauri updater plugin integration with automatic update checking, download, installation, and app relaunch (2025-11-24)
- ✅ Milestone 3.10: About Page - Professional About page with app information, contributors, third-party credits, and update checker (2025-11-24)
- ✅ Milestone 3.9: Error & Empty States - Complete redesign of empty states and error displays with 10+ reusable components, smooth animations, and full integration across the application (2025-11-24)
- ✅ Milestone 3.3: Database Schema Management - Full DDL operations with multi-database support (PostgreSQL, MySQL, SQLite, SQL Server), visual table creation wizard, and SQL preview (2025-11-23)
Next Priorities (Pick from these):
- Database Comparison - Compare schemas between two connections (dev/staging/prod diffs)
- Workspace Sync - Cloud sync with E2E encryption for settings and connections
- Query Scheduler - Schedule and automate recurring queries
- Performance Dashboard - Real-time database performance metrics
- Visual Schema Designer Enhancements - Undo/redo, index designer, cardinality indicators
Documentation:
- See
CLAUDE.mdfor detailed architecture and development patterns - See
README.mdfor feature list and installation - See
docs/user-guide.mdfor complete user documentation - See
CHANGELOG.mdfor detailed release notes