Visual Table Designer & Productivity Enhancements

CHANGELOG.md

@@ -7,6 +7,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [0.8.4] - 2026-02-19
+
+### Added
+- **Visual Table Designer**: A robust, interactive UI for creating tables. Define columns, data types, constraints, and foreign keys visually without writing SQL.
+- **Visual Index & Constraint Manager**: Manage indexes and constraints with a modern GUI. Analyze usage, drop unused indexes, and create new constraints with ease.
+- **Smart Paste**: Intelligent clipboard handling that detects SQL, CSV, or JSON content and offers context-aware actions (e.g., "Insert as Rows", "Format SQL").
+- **Dashboard Improvements**:
+    - **Visual Lock Viewer**: Diagnostic tree view to identify and resolve blocking chains and deadlocks.
+    - **Enhanced Metrics**: Real-time charts for IO, Checkpoints, and System Load.
+    - **Active Query Management**: Kill/Cancel blocking queries directly from the dashboard.
+
+### Improved
+- **Stability**: Fixed dashboard template loading issues to ensure reliable rendering on all platforms.
+
+---
+
 ## [0.8.3] - 2026-02-14
 
 ### Added

README.md

@@ -43,6 +43,9 @@
 - 💾 **Saved Queries** — Tag-based organization, connection context restoration, AI metadata generation, edit & reuse
 - 🌳 **Database Explorer** — Browse tables, views, functions, types, FDWs
 - 🛠️ **Object Operations** — CRUD, scripts, VACUUM, ANALYZE, REINDEX
+- 🏗️ **Visual Table Designer** — Create/Edit tables with a robust GUI
+- 🔑 **Index & Constraint Manager** — Visual management of DB constraints
+- 📋 **Smart Paste** — Context-aware clipboard actions (SQL/CSV/JSON)
 - 📊 **Table Intelligence** — Profile, activity monitor, index usage, definition viewer
 - 🔍 **EXPLAIN CodeLens** — One-click query analysis directly in notebooks
 - 🛡️ **Auto-LIMIT** — Intelligent query protection (configurable, default 1000 rows)

docs/GAP_ANALYSIS.md

@@ -0,0 +1,61 @@
+# PgStudio Gap Analysis & Technical Review
+
+> **Date:** February 2026
+> **Scope:** Full Codebase Review (v0.8.2)
+
+## 1. Security & Stability (CRITICAL)
+
+### 🚨 SQL Injection Risks in Generic Handlers
+**Location:** `src/providers/NotebookKernel.ts` (handleSaveChanges, handleDeleteRows)
+**Issue:**
+The current implementation of `handleSaveChanges` and `handleDeleteRows` constructs SQL queries using string interpolation for values in some cases, rather than consistently using parameterized queries.
+- `handleSaveChanges` manually escapes strings (`replace(/'/g, "''")`) and injects them into the query string.
+- This is error-prone and a classic SQL injection vector if the manual escaping is bypassed or flawed.
+**Recommendation:** Refactor to use parameterized queries (`$1`, `$2`, etc.) for ALL value inputs in `UPDATE` and `DELETE` operations.
+
+### ⚠️ Missing Transaction Safety for Batch Operations
+**Location:** `src/providers/NotebookKernel.ts`
+**Issue:**
+Batch updates and deletes are executed sequentially. If one fails, previous successes are committed (unless auto-commit is off, but that's connection-dependent).
+**Recommendation:** Wrap all batch operations (e.g., "Save Changes" for 50 rows) in an explicit `BEGIN ... COMMIT/ROLLBACK` block to ensure atomicity.
+
+## 2. Architecture & Patterns
+
+### 📉 Missing "Why Slow?" Persistence
+**Location:** `src/services/QueryAnalyzer.ts`, `src/services/QueryHistoryService.ts`
+**Issue:**
+The `QueryAnalyzer` has logic to compare against a baseline (`analyzePerformanceAgainstBaseline`), but there is no persistence layer to store these baselines across sessions.
+- `QueryHistoryService` stores strictly chronological history, not aggregated performance stats per query hash.
+**Gap:** The "Why is this slow?" feature cannot track performance degradation over time without a persistent baseline store.
+
+### 🍝 Message Handling Bloat
+**Location:** `src/extension.ts` (activate function), `src/providers/NotebookKernel.ts` (handleMessage)
+**Issue:**
+The `activate` function in `extension.ts` contains a massive `rendererMessaging.onDidReceiveMessage` block with mixed responsibilities (UI logic, database calls, error handling).
+- Similarly, `NotebookKernel.ts` has a growing `handleMessage` switch statement.
+**Recommendation:** Refactor into a `MessageHandler` registry or Command Pattern to decouple message routing from the entry points.
+
+## 3. Product Features (Missing vs Market)
+
+### 📊 Visualizations
+- **Gap:** No "Explain Plan" visualizer. Currently shows JSON or text.
+- **Goal:** Implement a React-based flowchart or tree visualizer for `EXPLAIN (FORMAT JSON)` results.
+
+### 🤖 AI Capabilities
+- **Gap:** Context window management is basic. Large schemas will truncate or overflow.
+- **Goal:** Implement RAG (Retrieval-Augmented Generation) or smarter schema pruning to fit relevant table definitions into context.
+
+## 4. Testing & QA
+
+### 🧪 Test Coverage
+- **Unit Tests:** Exist for `ConnectionManager`, `QueryAnalyzer`, etc.
+- **Integration Tests:** Basic connection tests exist.
+- **Gap:** No end-to-end (E2E) tests for the UI (Playwright/Selenium) to verify the Notebook -> Renderer interaction.
+
+## 5. Roadmap Updates (Draft)
+Based on this analysis, the following items should be added to the roadmap:
+
+- **[P0] Security:** Parameterize all usage of `handleSaveChanges` / `execute_update`.
+- **[P1] Architecture:** Extract `MessageHandler` pattern.
+- **[P1] Feature:** Implement `QueryPerformanceService` for persistent baselines.
+- **[P2] UX:** Visual Explain Plan.

docs/ROADMAP.md

@@ -116,11 +116,11 @@
 ---
 
 ## ⚡ Phase 7: Advanced Power User & AI
-
-### AI Upgrades
 - [x] **Inject schema + breadcrumb into AI context**
-- [ ] **“Explain this result” / “Why slow?”**
-  - Implementation: Feed query execution plan or result summary to AI for analysis.
+- [ ] **“Why slow?” Performance Tracking**
+  - Implementation: Persistence layer for query performance baselines. Compare current execution vs historical average.
+- [ ] **Visual Explain Plan**
+  - Implementation: React-based tree/flowchart visualization for `EXPLAIN (FORMAT JSON)` results.
 - [ ] **Safer AI suggestions on prod connections**
   - Implementation: Prompt engineering to warn AI about production contexts.
 
@@ -134,12 +134,48 @@
 
 ---
 
+## 🎨 Phase 8: Visual Editors & Intelligence ✅ COMPLETE
+
+- [x] **Visual Table Designer**
+  - Robust UI for creating/editing tables, columns, constraints, and foreign keys without SQL.
+- [x] **Visual Index & Constraint Manager**
+  - Dedicated UI for managing indexes and constraints, seeing usage stats, and dropping unused objects.
+- [x] **Smart Paste**
+  - Intelligent clipboard handling: detects CSV/JSON/SQL usage and offers context-aware actions (Insert Rows, Format).
+- [x] **Dashboard Diagnostics**
+  - Visual Lock Viewer (Tree view of blocking chains).
+  - Enhanced metrics (IO/Checkpoints/Temp Files).
+
+---
+
+## 🛠️ Phase 9: Technical Health (Security & Refactoring)
+
+### Security Hardening
+- [ ] **Parameterize SQL Generation**
+  - Fix: Refactor `handleSaveChanges` and `handleDeleteRows` to use generic parameterized queries (`$1`, `$2`) instead of string interpolation to prevent SQL injection risks.
+- [ ] **Atomic Batch Operations**
+  - Fix: Wrap batch updates/deletes in explicit transactions to ensure all-or-nothing execution.
+
+### Architectural Improvements
+- [ ] **Refactor Message Handling**
+  - Fix: Extract `rendererMessaging.onDidReceiveMessage` logic into a dedicated `MessageHandler` registry or Command Pattern to reduce bloat in `extension.ts` and `NotebookKernel.ts`.
+- [ ] **End-to-End Testing**
+  - Fix: Setup Playwright/Selenium suite to verify Notebook UI interactions and Renderer communication.
+
+---
+
+## 🚀 Phase 10: Future & Collaboration
+
+- [ ] **Team Collaboration Features** (Shared queries, comments)
+- [ ] **Visual Database Designer** (ERD manipulation)
+- [ ] **Cloud Sync** (Settings/Connection profiles sync)
+
+---
+
 ## ❌ Intentionally Not Now
 
-- [ ] Visual query builder
-- [ ] ER diagrams
-- [ ] Full plan visualizers
-- [ ] Cloud sync / accounts
+- [ ] Full Visual Query Builder (complex UI burden)
+- [ ] User/Role Management UI (admin focus, low priority)
 
 ---
 

docs/ROADMAP_PROPOSAL.md

@@ -0,0 +1,85 @@
+# PgStudio Roadmap 2026: The Path to a Full-Fledged DBMS
+
+> **Mission:** Combine the depth of pgAdmin with the developer-centric speed of VS Code.
+> **Philosophy:** "Reduce fear. Increase speed. Everything else waits."
+
+---
+
+## 🎯 Strategic Pillars
+
+### 1. Visual Schema Builder (VSB) — *"Design without Code"*
+**Goal:** Empower users to design and modify database schemas visually without manually writing `ALTER TABLE` statements, while maintaining safety.
+
+- **Visual Table Designer**: A GUI to add/remove columns, change types, and set constraints.
+- **Index Manager**: Visually create, drop, and analyze indexes.
+- **Constraint Manager**: Manage Foreign Keys, Unique constraints, and Checks with a simple UI.
+- **Role/User Management**: Basic interface for creating users and granting permissions (essential for local dev setup).
+
+### 2. Data Fluidity — *"Move Data Instantly"*
+**Goal:** Make getting data in and out of the database frictionless and immediate.
+
+- **Smart Paste**: Copy from Excel/Sheets, paste directly into a table grid to insert rows.
+- **Visual Import Wizard**: Drag & drop CSV/JSON files, map columns, and import data.
+- **Enhanced Export**: Configurable delimiters, encoding, and direct-to-file streaming for large datasets.
+- **Quick Clone**: Right-click a table to "Duplicate Structure & Data".
+
+### 3. Operability Suite — *"Diagnose & Fix"*
+**Goal:** Give users deep visibility and control over the running database instance to diagnose issues instantly.
+
+- **Session Manager**: View active queries, see who is blocking whom, and `KILL` stuck processes.
+- **Lock Viewer**: Visualize blocking chains to resolve deadlocks.
+- **Visual Explain Plan**: Graphical flowchart representation of query execution plans (to identify bottlenecks at a glance).
+- **Server Dashboard**: Real-time CPU/RAM/IO usage (if compatible with provider).
+
+### 4. Developer Experience (DX) — *"Code Faster"*
+**Goal:** Leverage the VS Code ecosystem to bridge the gap between database and application code.
+
+- **TypeScript Type Generation**: Right-click a table -> "Copy TypeScript Interface".
+- **Global Object Search**: Integrate with VS Code's `Ctrl+P` (e.g., `#users` to jump to users table).
+- **"Go to Definition"**: `F12` on a table name in SQL to jump to its DDL/Designer.
+- **API Generator**: Right-click table -> "Generate CRUD API (Node/Python)".
+
+---
+
+## 🗓️ Proposed Rollout Phases
+
+### 🏗️ Phase 7: Visual Schema Design (The "Builder" Phase)
+*Focus: making schema changes safe and easy.*
+- [ ] **Visual Table Designer** (Add/Edit Columns & Types)
+- [ ] **Constraint Manager** (FK, PK, Unique, Check)
+- [ ] **Index Manager** (Create/Drop Indexes visually)
+- [ ] **Schema Diff** (Compare local vs remote schema)
+
+### 🌊 Phase 8: Data Productivity (The "Mover" Phase)
+*Focus: getting data into the right shape fast.*
+- [ ] **Smart Paste** (Excel -> Table)
+- [ ] **Visual Import Wizard** (CSV/JSON Drag & Drop)
+- [ ] **Bulk Row Editing** (Spreadsheet-like experience)
+- [ ] **Result Grid Aggregations** (Sum/Avg of selected cells)
+
+### 🩺 Phase 9: Diagnostics & Ops (The "Doctor" Phase)
+*Focus: solving performance issues and locks.*
+- [ ] **Visual Explain Plan** (Flowchart view)
+- [ ] **Session Manager** (View & Kill queries)
+- [ ] **Lock Viewer** (Blocking chains)
+- [ ] **Log Viewer** (Live tail of Postgres logs if accessible)
+
+### 💻 Phase 10: Developer Integrations (The "Coder" Phase)
+*Focus: bridging DB and App code.*
+- [ ] **TypeScript / Zod Type Generator**
+- [ ] **Global Object Search** (`Ctrl+P` integration)
+- [ ] **Snippet Manager** (Team-shared query library)
+- [ ] **"Generate Mock Data"** (AI-powered fake data population)
+
+---
+
+## 📊 Feature Comparison (Target State)
+
+| Feature | PgStudio (Future) | pgAdmin | DBeaver | VS Code SQLTools |
+|---------|-------------------|---------|---------|------------------|
+| **Visual Table Design** | ✅ Modern React UI | ✅ Legacy Dialogs | ✅ | ❌ |
+| **Data Import/Export** | ✅ Drag & Drop | ✅ Wizard | ✅ Wizard | ❌ Basic |
+| **Interactive Notebooks**| ✅ | ❌ | ❌ | ❌ |
+| **TS Type Gen** | ✅ Built-in | ❌ | ❌ | ❌ |
+| **AI Copilot** | ✅ Built-in | ❌ | ❌ | ❌ |
+| **Session Manager** | ✅ | ✅ | ✅ | ❌ |

docs/VISUAL_TOOLS.md

@@ -0,0 +1,60 @@
+# Visual Database Tools
+
+PgStudio v0.8.4 introduces powerful visual editors to manage your database schema without writing complex DDL manually.
+
+## 🏗️ Visual Table Designer
+
+Create and edit tables with a robust, interactive UI.
+
+### Features
+- **Column Management**: Add, remove, and reorder columns.
+- **Data Types**: Full support for PostgreSQL data types (TEXT, INTEGER, JSONB, UUID, etc.) with length/precision options.
+- **Constraints**: 
+    - **Primary Keys**: Define single or composite primary keys.
+    - **Foreign Keys**: Visually link to other tables with ON DELETE/UPDATE rules.
+    - **Unique/Check**: Add custom constraints.
+- **Preview SQL**: See the generated `CREATE TABLE` query in real-time before executing.
+
+### Usage
+- **Create**: Right-click a Schema in the sidebar → **Create Table**.
+- **Edit**: Right-click an existing Table → **Design Table**.
+
+---
+
+## 🔑 Index & Constraint Manager
+
+Optimize performance and ensure data integrity with a dedicated management interface.
+
+### Features
+- **Usage Statistics**: See scan counts and read/fetch efficiency for every index.
+- **Unused Index Detection**: Quickly identify indexes that are consuming space but not being used.
+- **Visual Creation**: created indexes (B-Tree, Hash, GIN, GiST) on single or multiple columns.
+- **Drop Safely**: Remove unused indexes with a single click.
+
+### Usage
+- Right-click a Table → **Manage Indexes & Constraints**.
+
+---
+
+## 📋 Smart Paste
+
+Intelligently handle clipboard content based on context.
+
+### Features
+- **SQL Detection**: Pasting SQL into a notebook automatically offers to format it.
+- **CSV/JSON Detection**: Pasting data suggests:
+    - **Insert as Rows**: Convert raw data into `INSERT` statements for the current table context.
+    - **Create Table**: Generate a new table schema based on the data structure.
+
+### Usage
+- Simply paste (`Ctrl+V` / `Cmd+V`) content into a notebook or SQL editor. PgStudio will analyze the content and show a "Smart Action" notification if applicable.
+
+---
+
+## 📊 Dashboard Diagnostics
+
+The Server Dashboard now includes deep diagnostic tools:
+
+- **Lock Viewer**: A tree visualization of blocking chains. Identify the root cause of stuck queries.
+- **Kill/Cancel**: Terminate blocking sessions directly from the "Active Queries" list.
+- **IO Metrics**: Real-time charts for Checkpoints, Temp File usage, and Tuple Fetch/Return ratios.

docs/index.html

@@ -54,7 +54,7 @@
       <div class="badge-row">
         <a href="https://marketplace.visualstudio.com/items?itemName=ric-v.postgres-explorer" class="badge">
           <span class="badge-label">VS Code Marketplace</span>
-          <span class="badge-value" id="badge-version">0.5.4</span>
+          <span class="badge-value" id="badge-version">0.8.4</span>
         </a>
       </div>
 
@@ -290,6 +290,17 @@ <h3>Developer Tools</h3>
             <li>PSQL terminal access</li>
           </ul>
         </div>
+        <div class="card feature-card">
+          <div class="card-icon">🏗️</div>
+          <h3>Visual Designers</h3>
+          <p>Create and manage schema objects without writing DDL.</p>
+          <ul class="feature-list">
+            <li>Visual Table Designer</li>
+            <li>Index & Constraint Manager</li>
+            <li>Smart Paste (Data/SQL)</li>
+            <li>Schema Diagramming</li>
+          </ul>
+        </div>
       </div>
 
       <!-- New Feature Highlights Row -->