@libredb/studio 0.9.7

package/docs/releases/RELEASE_v0.6.1.md

@@ -0,0 +1,303 @@
+# Release v0.6.1 - Database Monitoring & Theming System
+
+**Release Date:** December 2024
+
+This release introduces a comprehensive database monitoring dashboard, modernized theming system with Tailwind CSS v4, and significant UI/UX improvements.
+
+---
+
+## Highlights
+
+- **Database Monitoring Dashboard:** Real-time database metrics, performance analytics, and session management
+- **Tailwind CSS v4 Theming:** Modern `@theme inline` directive for CSS variable mapping
+- **Resizable Sidebar:** Drag-to-resize sidebar panel for better workspace flexibility
+- **Theming Documentation:** Comprehensive guide for theme customization
+
+---
+
+## New Features
+
+### Database Monitoring Dashboard
+
+A new `/monitoring` route provides comprehensive database insights accessible to all authenticated users.
+
+**Six Tab-Based Views:**
+
+| Tab | Description |
+|-----|-------------|
+| **Overview** | Database version, uptime, connection stats, size metrics |
+| **Performance** | Cache hit ratio, buffer usage, transaction stats |
+| **Queries** | Slow query analysis from `pg_stat_statements` |
+| **Sessions** | Active connections with kill session capability |
+| **Tables** | Table statistics, row counts, bloat analysis |
+| **Storage** | Tablespace usage, WAL size, storage metrics |
+
+**Key Features:**
+- Auto-refresh every 30 seconds (configurable)
+- Manual refresh button
+- Connection selector dropdown
+- PostgreSQL-optimized with graceful fallback for other databases
+- Kill session support for DBAs
+
+**Access:**
+- All authenticated users (admin + user roles)
+- Navigate via header link or `/monitoring` URL
+
+### Theming System
+
+Complete theming overhaul using Tailwind CSS v4's CSS-first configuration:
+
+```css
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-popover: var(--popover);
+  --color-primary: var(--primary);
+  --color-secondary: var(--secondary);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  /* ... */
+}
+```
+
+**Benefits:**
+- Semantic class names (`bg-background`, `text-foreground`)
+- Consistent dark/light mode support
+- Easy theme customization via CSS variables
+- shadcn/ui component compatibility
+
+### Resizable Sidebar
+
+Sidebar panel is now resizable with drag handle:
+
+- **Default width:** 22%
+- **Minimum:** 15%
+- **Maximum:** 35%
+- Drag handle visible on hover (blue highlight)
+- Preserves layout on mobile (collapsed to bottom tabs)
+
+---
+
+## UI/UX Improvements
+
+### SchemaExplorer Fixes
+
+- Fixed dropdown menu visibility issue (overflow clipping)
+- Replaced hardcoded colors with theme variables
+- Improved button styling with proper `variant="ghost"`
+- Better hover states with `hover:bg-accent`
+
+### Theme-Compatible Components
+
+All components updated to use theme variables:
+
+```tsx
+// Before (hardcoded)
+<div className="bg-zinc-900 text-white">
+
+// After (theme-aware)
+<div className="bg-background text-foreground">
+```
+
+---
+
+## Architecture
+
+### New Files
+
+```
+src/
+├── app/
+│   ├── monitoring/
+│   │   └── page.tsx                    # Monitoring route
+│   └── api/db/monitoring/
+│       └── route.ts                    # Monitoring API endpoint
+├── components/monitoring/
+│   ├── MonitoringDashboard.tsx         # Main dashboard component
+│   └── tabs/
+│       ├── OverviewTab.tsx
+│       ├── PerformanceTab.tsx
+│       ├── QueriesTab.tsx
+│       ├── SessionsTab.tsx
+│       ├── TablesTab.tsx
+│       └── StorageTab.tsx
+├── hooks/
+│   └── use-monitoring-data.ts          # Data fetching hook
+└── lib/db/
+    └── types.ts                        # Monitoring type definitions
+```
+
+### Provider Extensions
+
+New monitoring methods added to `BaseDatabaseProvider`:
+
+```typescript
+// Abstract methods (implemented per provider)
+getOverview(): Promise<DatabaseOverview>;
+getPerformanceMetrics(): Promise<PerformanceMetrics>;
+getSlowQueries(options?): Promise<SlowQueryStats[]>;
+getActiveSessions(options?): Promise<ActiveSessionDetails[]>;
+getTableStats(options?): Promise<TableStats[]>;
+getIndexStats(options?): Promise<IndexStats[]>;
+getStorageStats(): Promise<StorageStats[]>;
+
+// Convenience method
+getMonitoringData(options?): Promise<MonitoringData>;
+```
+
+### PostgreSQL SQL Sources
+
+| Metric | SQL Source |
+|--------|------------|
+| Version/Uptime | `version()`, `pg_postmaster_start_time()` |
+| Connections | `pg_stat_activity`, `max_connections` |
+| Cache Hit Ratio | `pg_statio_user_tables` |
+| Slow Queries | `pg_stat_statements` (extension) |
+| Active Sessions | `pg_stat_activity`, `pg_locks` |
+| Table Stats | `pg_stat_user_tables`, `pg_table_size()` |
+| Storage | `pg_tablespace`, `pg_wal_lsn_diff()` |
+
+---
+
+## Documentation
+
+### New: Theming Guide
+
+Comprehensive documentation at `docs/THEMING.md`:
+
+- Theme architecture overview
+- CSS variable reference
+- Tailwind v4 integration guide
+- Dark/light mode configuration
+- Custom color additions
+- Troubleshooting guide
+
+### Updated: README.md
+
+- Added Theming row to Tech Stack table
+- Community & Quality section with SonarCloud badge
+
+---
+
+## Dependencies
+
+### No New Dependencies
+
+All monitoring features built with existing stack:
+- `react-resizable-panels` (already in project)
+- `recharts` (already in project)
+- shadcn/ui components
+
+---
+
+## Database Support
+
+### Monitoring Feature Matrix
+
+| Feature | PostgreSQL | MySQL | SQLite | MongoDB |
+|---------|------------|-------|--------|---------|
+| Overview | Full | Full | Basic | Full |
+| Performance | Full | Full | Basic | Full |
+| Slow Queries | Full* | Full | N/A | Profile** |
+| Sessions | Full | Full | Single | Full |
+| Tables | Full | Full | Basic | Collections |
+| Storage | Full | Basic | Basic | Full |
+
+\* Requires `pg_stat_statements` extension
+\** Requires profiler enabled
+
+---
+
+## Breaking Changes
+
+None. All existing APIs remain compatible.
+
+---
+
+## Bug Fixes
+
+- Fixed dropdown menu not visible in SchemaExplorer (overflow issue)
+- Fixed hardcoded `text-white` colors breaking light mode
+- Fixed sidebar width preventing dropdown visibility
+
+---
+
+## Configuration
+
+### VS Code Settings
+
+Added CSS warning suppression for Tailwind v4:
+
+```json
+{
+  "css.lint.unknownAtRules": "ignore"
+}
+```
+
+---
+
+## What's Next
+
+### v0.7.0 (Planned)
+- Real-time monitoring charts with historical data
+- Query performance trends
+- Alert thresholds configuration
+- Monitoring data export
+
+---
+
+## Full Changelog
+
+### Added
+- `/monitoring` route with comprehensive database dashboard
+- `MonitoringDashboard` component with 6 tab views
+- `use-monitoring-data` hook with auto-refresh
+- `/api/db/monitoring` endpoint
+- Monitoring type definitions in `types.ts`
+- Provider monitoring methods (PostgreSQL, MySQL, SQLite, MongoDB)
+- `@theme inline` block in globals.css
+- `docs/THEMING.md` comprehensive guide
+- Resizable sidebar with `ResizablePanelGroup`
+- VS Code settings for CSS warning suppression
+
+### Changed
+- Sidebar from fixed width to resizable panel
+- SchemaExplorer dropdown trigger to proper Button component
+- Hardcoded colors to theme variables across components
+- README.md with theming and community sections
+
+### Fixed
+- SchemaExplorer dropdown menu visibility
+- Theme color inconsistencies
+- Light mode color issues
+
+---
+
+## Screenshots
+
+### Monitoring Dashboard - Overview
+Database overview with key metrics, connection stats, and uptime information.
+
+### Monitoring Dashboard - Sessions
+Active session management with kill session capability.
+
+### Resizable Sidebar
+Drag handle for sidebar width adjustment.
+
+---
+
+## Contributors
+
+- Database monitoring implementation
+- Tailwind v4 theming integration
+- UI/UX improvements
+- Documentation
+
+---
+
+*LibreDB Studio v0.6.1 - Modern database management for the cloud era.*

package/docs/releases/RELEASE_v0.6.7.md

@@ -0,0 +1,292 @@
+# Release v0.6.7 - Query Optimization & Demo Database
+
+**Release Date:** January 2025
+
+This release introduces smart query pagination, large result estimation, and a comprehensive demo employees database with showcase SQL queries to help users learn and explore LibreDB Studio.
+
+---
+
+## Highlights
+
+- **Smart Query Pagination:** Automatic result limiting with silent handling and load-more functionality
+- **Large Result Estimation:** Pre-execution row count estimation and user confirmation for unlimited queries
+- **Component Refactoring:** Renamed Dashboard component to Studio for better clarity
+- **Demo Employees Database:** Complete HR database schema with 100+ showcase SQL queries
+- **Enhanced Showcase Queries:** Difficulty levels and fun intro messages for better learning experience
+
+---
+
+## New Features
+
+### Query Pagination System
+
+Automatic pagination for SELECT queries to prevent browser freezes when dealing with large datasets.
+
+**Key Features:**
+- **Default Limit:** 500 rows per page (configurable via `DEFAULT_QUERY_LIMIT`)
+- **Silent Auto-Limiting:** No interruption dialogs, results are automatically limited
+- **Load More:** Users can load additional pages incrementally
+- **Preserves User Limits:** Existing `LIMIT` clauses in queries are respected
+- **Maximum Safe Limit:** 100,000 rows for "Load All" operations
+
+**How It Works:**
+1. User executes a SELECT query without a LIMIT clause
+2. System automatically adds `LIMIT 500 OFFSET 0`
+3. Results display with pagination metadata
+4. "Load More" button appears when more rows are available
+
+### Large Result Estimation
+
+Pre-execution row count estimation for queries without LIMIT clauses to help users understand query impact.
+
+**Features:**
+- **Row Count Estimation:** Uses `EXPLAIN` or `COUNT(*)` to estimate result size
+- **User Confirmation:** Optional confirmation dialog for potentially large result sets
+- **Silent Limiting:** Alternative mode that silently limits without confirmation
+- **Performance Insight:** Shows estimated execution impact before running query
+
+**Implementation:**
+- PostgreSQL: Uses `EXPLAIN` with `ANALYZE` for accurate estimates
+- MySQL: Uses `EXPLAIN` and `COUNT(*)` subquery
+- SQLite: Uses `EXPLAIN QUERY PLAN` with row count hints
+- MongoDB: Uses `countDocuments()` before executing find queries
+
+### Demo Employees Database
+
+A comprehensive HR database schema designed for learning and demonstration purposes.
+
+**Database Schema:**
+- **employees** - Employee master data with personal information
+- **departments** - Department hierarchy and management
+- **positions** - Job positions and salary ranges
+- **employee_departments** - Employee-department assignments (many-to-many)
+- **salaries** - Salary history tracking
+- **projects** - Project management
+- **project_assignments** - Employee-project assignments
+- **attendance** - Time tracking and attendance records
+
+**Features:**
+- Realistic data relationships and constraints
+- Foreign keys and indexes for proper normalization
+- Sample data for immediate query testing
+- Compatible with PostgreSQL, MySQL, and SQLite
+
+### Showcase SQL Queries
+
+100+ curated SQL queries organized by difficulty level to help users learn SQL and explore the demo database.
+
+**Organization:**
+- **Difficulty Levels:** Beginner, Intermediate, Advanced, Expert
+- **Categories:** Basic SELECT, JOINs, Aggregations, Window Functions, CTEs, Subqueries
+- **Fun Intros:** Random intro messages with divider lines for engaging learning experience
+- **Progressive Learning:** Queries build upon each other from simple to complex
+
+**Query Categories:**
+1. Basic SELECT and Filtering
+2. JOINs (INNER, LEFT, RIGHT, FULL)
+3. Aggregations and GROUP BY
+4. Window Functions (RANK, ROW_NUMBER, PARTITION BY)
+5. Common Table Expressions (CTEs)
+6. Subqueries and Correlated Subqueries
+7. Date Functions and Time Series Analysis
+8. Advanced Analytics and Reporting
+
+---
+
+## Architecture Changes
+
+### Component Renaming
+
+**Dashboard → Studio**
+
+The main application component has been renamed from `Dashboard` to `Studio` to better reflect its purpose as a comprehensive database development studio.
+
+**Impact:**
+- Component file: `src/components/Dashboard.tsx` → `src/components/Studio.tsx`
+- All internal references updated
+- No API or external interface changes
+- Backward compatible (no breaking changes)
+
+---
+
+## Documentation
+
+### Query Optimization Guide
+
+New comprehensive documentation for query optimization features:
+
+**Location:** `docs/QUERY_OPTIMIZATION.md`
+
+**Sections:**
+- Query Pagination System architecture
+- Silent Auto-Limiting philosophy and implementation
+- Load More functionality details
+- Query EXPLAIN integration
+- Performance insights and metrics
+- Provider-specific optimizations
+
+### Demo Database Documentation
+
+Complete documentation for the demo employees database:
+
+**Location:** `docs/postgres/demo-employee-database.md`
+
+**Contents:**
+- Complete schema documentation
+- ER diagram and relationships
+- Sample queries organized by category
+- Learning paths and tutorials
+- Performance considerations
+
+---
+
+## Breaking Changes
+
+None. All existing APIs remain compatible.
+
+---
+
+## Bug Fixes
+
+- Fixed query execution performance for large datasets
+- Improved memory handling for unlimited query results
+- Enhanced error messages for query optimization features
+
+---
+
+## Dependencies
+
+No new dependencies added in this release.
+
+### Existing Dependencies
+All existing database drivers and UI libraries remain unchanged:
+- `pg` - PostgreSQL driver
+- `mysql2` - MySQL driver
+- `better-sqlite3` - SQLite driver (dynamic import)
+- `mongodb` - MongoDB driver
+
+---
+
+## Migration Guide
+
+### For Users
+
+No migration required. All existing connections and queries continue to work as before.
+
+**New Behavior:**
+- Queries without LIMIT clauses now automatically paginate to 500 rows
+- Use "Load More" button to retrieve additional pages
+- Large result estimation may show confirmation dialogs (if enabled)
+
+### For Developers
+
+If you have custom code referencing the Dashboard component:
+
+```typescript
+// Before (v0.6.6 and earlier)
+import Dashboard from '@/components/Dashboard';
+
+// After (v0.6.7)
+import Studio from '@/components/Studio';
+```
+
+**Note:** The component API remains the same, only the name changed.
+
+---
+
+## What's Next
+
+### v0.7.0 (Planned)
+- Query result export formats (CSV, JSON, Excel)
+- Query history and saved queries management
+- Query performance comparison tools
+- Advanced query builder UI
+- Real-time query execution monitoring
+
+---
+
+## Contributors
+
+- Query pagination and optimization features
+- Large result estimation implementation
+- Demo employees database schema design
+- Showcase queries curation and documentation
+- Component refactoring (Dashboard → Studio)
+
+---
+
+## Full Changelog
+
+### Added
+- Query pagination system with automatic LIMIT handling
+- Large result estimation with pre-execution row counting
+- User confirmation dialogs for potentially large queries
+- Silent auto-limiting mode for seamless workflow
+- "Load More" functionality for incremental result loading
+- Demo employees database schema (7 tables)
+- 100+ showcase SQL queries with difficulty levels
+- Random intro messages with divider lines for showcase queries
+- `docs/QUERY_OPTIMIZATION.md` comprehensive guide
+- `docs/postgres/demo-employee-database.md` demo database documentation
+
+### Changed
+- Renamed `Dashboard` component to `Studio` throughout codebase
+- Enhanced query execution flow with pagination support
+- Improved query result handling for large datasets
+- Updated showcase query system with difficulty categorization
+- Refined user experience for unlimited query handling
+
+### Fixed
+- Query performance issues with large result sets
+- Memory management for unlimited queries
+- Error handling in query optimization features
+
+### Removed
+- None
+
+---
+
+## Screenshots
+
+### Query Pagination
+Automatic pagination controls appear when query results exceed the default limit, with "Load More" button for incremental loading.
+
+### Large Result Estimation
+Pre-execution estimation dialog showing estimated row count and execution impact before running potentially expensive queries.
+
+### Demo Database Schema
+Complete HR database schema with employees, departments, positions, salaries, projects, and attendance tables with proper relationships.
+
+### Showcase Queries
+Curated SQL queries organized by difficulty level with fun intro messages to enhance learning experience.
+
+---
+
+## Performance Improvements
+
+- **Query Execution:** Faster initial response time with automatic pagination
+- **Memory Usage:** Reduced memory footprint for large result sets
+- **Browser Stability:** Prevented browser freezes on unlimited queries
+- **User Experience:** Seamless workflow with silent auto-limiting
+
+---
+
+## Security
+
+No security-related changes in this release.
+
+---
+
+## Testing
+
+All features have been tested with:
+- PostgreSQL 12+ databases
+- MySQL 8.0+ databases
+- SQLite 3.x databases
+- MongoDB 6.0+ databases
+- Various query sizes (small to very large datasets)
+
+---
+
+**Full Changelog:** [Compare v0.6.6...v0.6.7](https://github.com/libredb/libredb-studio/compare/v0.6.6...v0.6.7)
+