diff --git a/package-lock.json b/package-lock.json
index 36fe2e3..ef84349 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.7.2",
       "license": "Apache-2.0",
       "dependencies": {
+        "@iconify-json/lucide": "^1.2.114",
         "@monaco-editor/loader": "^1.7.0",
         "@tanstack/vue-virtual": "^3.13.28",
         "@tauri-apps/api": "^2.11.0",
@@ -227,6 +228,7 @@
       "integrity": "sha512-H3mcG6ZDLTlYfaSNi0iOKkigqMFvkTKlGUYlD8GW7nNOYRrevuA46iTypPyv+06V3fEmvvazfntkBU34L0azAw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.28.6",
         "@babel/generator": "^7.28.6",
@@ -1662,6 +1664,15 @@
         "@iconify/types": "*"
       }
     },
+    "node_modules/@iconify-json/lucide": {
+      "version": "1.2.114",
+      "resolved": "https://registry.npmjs.org/@iconify-json/lucide/-/lucide-1.2.114.tgz",
+      "integrity": "sha512-NbvH3B1BYo6wBtS7joLi7f2UVQOqK2dtZodMFf3kkBs+Tnh9TkRuy8oVHr1RM8UK6bUtvAXxfNlGAah0CuvPCw==",
+      "license": "ISC",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
     "node_modules/@iconify/json": {
       "version": "2.2.482",
       "resolved": "https://registry.npmjs.org/@iconify/json/-/json-2.2.482.tgz",
@@ -2709,6 +2720,7 @@
       "integrity": "sha512-PsSugIf9ip1H/mWKj4bi/BlEoerxXAda9ByRFsYuwsmr6af9NxJL0AaiNXs8Le7R21QR5KMiD/KdxZZ71LjAxQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.9.1",
         "@typescript-eslint/types": "^8.52.0",
@@ -3275,6 +3287,7 @@
       "integrity": "sha512-eEXsVvLPu8Z4PkFibtuFJLJOTAV/nPdgtSjkGoPpddpFk3/ym2oy97jynY6ic2m6+nc5M8SE1e9v/mHKsulcJg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/regexpp": "^4.12.2",
         "@typescript-eslint/scope-manager": "8.53.0",
@@ -3304,6 +3317,7 @@
       "integrity": "sha512-npiaib8XzbjtzS2N4HlqPvlpxpmZ14FjSJrteZpPxGUaYPlvhzlzUZ4mZyABo0EFrOWnvyd0Xxroq//hKhtAWg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.53.0",
         "@typescript-eslint/types": "8.53.0",
@@ -3594,6 +3608,7 @@
       "integrity": "sha512-6i+kNVVGb5I+XOCUgLDHol6sxb28ahbJrmLL/eiAWflT850MUqtAlFeyHDYHzScnOFcPy1AcmeY0yM77GgERmg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/utils": "^8.53.0",
         "@unocss/config": "66.6.0",
@@ -4296,6 +4311,7 @@
       "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.26.tgz",
       "integrity": "sha512-egp69qDTSEZcf4bGOSsprUr4xI73wfrY5oRs6GSgXFTiHrWj4Y3X5Ydtip9QMqiCMCPVwLglB9GBxXtTadJ3mA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/parser": "^7.28.5",
         "@vue/compiler-core": "3.5.26",
@@ -4486,6 +4502,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -4812,6 +4829,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -5609,6 +5627,7 @@
       "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -5839,6 +5858,7 @@
       "integrity": "sha512-nK96Gnt6/9wj8KhTFg+D80Mc01cffrcB15NO6pkTJmPpO0vHV+9yxegr+wVry4O3uGbu83HN86inCO3IsML9Rw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@dprint/formatter": "^0.5.1",
         "@dprint/markdown": "^0.20.0",
@@ -7294,6 +7314,7 @@
       "integrity": "sha512-F26gjC0yWN8uAA5m5Ss8ZQf5nDHWGlN/xWZIh8S5SRbsEKBovwZhxGd6LJlbZYxBgCYOtreSUyb8hpXyGC5O4A==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@jest/core": "30.2.0",
         "@jest/types": "30.2.0",
@@ -7873,6 +7894,7 @@
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
       "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "jiti": "lib/jiti-cli.mjs"
       }
@@ -7970,6 +7992,7 @@
       "integrity": "sha512-1e4qoRgnn448pRuMvKGsFFymUCquZV0mpGgOyIKNgD3JVDTsVJyRBGH/Fm0tBb8WsWGgmB1mDe6/yJMQM37DUA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "acorn": "^8.5.0",
         "eslint-visitor-keys": "^3.0.0",
@@ -9726,6 +9749,7 @@
       "resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.4.tgz",
       "integrity": "sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/devtools-api": "^7.7.7"
       },
@@ -11144,6 +11168,7 @@
       "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
       "devOptional": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -11290,6 +11315,7 @@
       "resolved": "https://registry.npmjs.org/unocss/-/unocss-66.6.0.tgz",
       "integrity": "sha512-B5QsMJzFKeTHPzF5Ehr8tSMuhxzbCR9n+XP0GyhK9/2jTcBdI0/T+rCDDr9m6vUz+lku/coCVz7VAQ2BRAbZJw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@unocss/astro": "66.6.0",
         "@unocss/cli": "66.6.0",
@@ -11335,6 +11361,7 @@
       "resolved": "https://registry.npmjs.org/unocss-preset-animations/-/unocss-preset-animations-1.3.0.tgz",
       "integrity": "sha512-NLsBzPB98Jc8b6+t8nwLItI12ZE/48IZVccZ2uA2owLoeAvhRaDoRvs6eLcJfIUZfRycL25xxOeQoOBMo1p/aw==",
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "@unocss/preset-wind3": ">=0.56.0 < 101",
         "unocss": ">=0.56.0 < 101"
@@ -11475,6 +11502,7 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.3.tgz",
       "integrity": "sha512-NTKlcQjlAK7MlQoyb6LgaqHc8sso/pVyUJYWMws3jg21uTJw/LddqIFPcPqP6PzpgbIcZyKI85sFE4HBrQDA8A==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.4.4",
@@ -11556,6 +11584,7 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.26.tgz",
       "integrity": "sha512-SJ/NTccVyAoNUJmkM9KUqPcYlY+u8OVL1X5EW9RIs3ch5H2uERxyyIUI4MRxVCSOiEcupX9xNGde1tL9ZKpimA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.5.26",
         "@vue/compiler-sfc": "3.5.26",
@@ -11578,6 +11607,7 @@
       "integrity": "sha512-CydUvFOQKD928UzZhTp4pr2vWz1L+H99t7Pkln2QSPdvmURT0MoC4wUccfCnuEaihNsu9aYYyk+bep8rlfkUXw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "debug": "^4.4.0",
         "eslint-scope": "^8.2.0",
diff --git a/package.json b/package.json
index 5b3afb6..f0bf49a 100644
--- a/package.json
+++ b/package.json
@@ -69,6 +69,7 @@
     "test:ci": "jest --runInBand --ci --coverage --coverageReporters json-summary text html lcov"
   },
   "dependencies": {
+    "@iconify-json/lucide": "^1.2.114",
     "@monaco-editor/loader": "^1.7.0",
     "@tanstack/vue-virtual": "^3.13.28",
     "@tauri-apps/api": "^2.11.0",
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index 0676f00..715bc31 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -6423,6 +6423,7 @@ dependencies = [
  "tauri-plugin-store",
  "tauri-plugin-updater",
  "tauri-plugin-window-state",
+ "tempfile",
  "thiserror 1.0.69",
  "tiberius",
  "tokio",
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 0cb1fdd..b759054 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -104,6 +104,7 @@ pageant = "0.2"
 
 [dev-dependencies]
 mockall = "0.13"
+tempfile = "3"
 
 [features]
 default = []
diff --git a/src-tauri/src/commands/browse.rs b/src-tauri/src/commands/browse.rs
index 5a46274..f0ac4ad 100644
--- a/src-tauri/src/commands/browse.rs
+++ b/src-tauri/src/commands/browse.rs
@@ -5,10 +5,41 @@
 
 use crate::connection::handle::ConnectionHandle;
 use crate::database::{
-    search, ColumnInfo, DatabaseAdapter, DatabaseSchema, ForeignKeyInfo, IndexInfo, MySQLAdapter,
-    ObjectInfo, PostgresAdapter, QueryResult, SqlServerAdapter, TableInfo, TriggerInfo,
+    search, ClickHouseAdapter, ColumnInfo, DatabaseAdapter, DatabaseSchema, ForeignKeyInfo,
+    HttpSqlAdapter, IndexInfo, JdbcBridgeAdapter, MySQLAdapter, ObjectInfo, PostgresAdapter,
+    QueryResult, RqliteAdapter, SqlServerAdapter, TableInfo, TriggerInfo, TursoAdapter,
 };
 use crate::state::{ActiveConnection, AppState};
+
+/// Switch to a different database by creating a temporary connection and executing the query.
+/// Falls back to the original connection if no database switch is needed.
+macro_rules! with_db_switch {
+    ($adapter:expr, $adapter_type:ty, $sql:expr, $database:expr, $connection:expr, $error_msg:expr) => {{
+        let __adapter = $adapter;
+        if let Some(ref __db) = $database {
+            let __guard = __adapter.lock().await;
+            let db_str: &str = __db;
+            if Some(db_str) != __guard.config.database.as_deref() {
+                let mut __temp_config = __guard.config.clone();
+                drop(__guard);
+                __temp_config.database = Some(db_str.to_string());
+                let mut __temp = <$adapter_type>::new(__temp_config);
+                __temp
+                    .connect()
+                    .await
+                    .map_err(|e| format!("Failed to connect to database '{}': {}", db_str, e))?;
+                return __temp
+                    .execute_query(&$sql)
+                    .await
+                    .map_err(|e| format!("{}: {}", $error_msg, e));
+            }
+        }
+        $connection
+            .execute_query(&$sql)
+            .await
+            .map_err(|e| format!("{}: {}", $error_msg, e))
+    }};
+}
 use serde::{Deserialize, Serialize};
 use serde_json::Value as JsonValue;
 use std::collections::HashMap;
@@ -360,63 +391,37 @@ pub async fn get_table_data(
     let db_type = get_db_type_string(&connection);
 
     // Execute query based on connection type with proper identifier quoting
-    let result = match &connection {
-        ActiveConnection::Postgres(adapter) => {
-            let qualified = build_qualified_table(query.schema.as_deref(), &query.table, db_type);
-            let sql =
-                build_paginated_select(&qualified, filter_ref, limit_val, offset_val, db_type);
-            if let Some(ref db) = query.database {
-                let guard = adapter.lock().await;
-                if Some(db.as_str()) != guard.config.database.as_deref() {
-                    let mut temp_config = guard.config.clone();
-                    drop(guard);
-                    temp_config.database = Some(db.clone());
-                    let mut temp = PostgresAdapter::new(temp_config);
-                    temp.connect()
-                        .await
-                        .map_err(|e| format!("Failed to connect to database '{}': {}", db, e))?;
-                    return temp
-                        .execute_query(&sql)
-                        .await
-                        .map_err(|e| format!("Failed to get table data: {}", e));
-                }
-            }
-            connection.execute_query(&sql).await
-        }
-        ActiveConnection::SQLServer(adapter) => {
-            let qualified = build_qualified_table(query.schema.as_deref(), &query.table, db_type);
-            let sql =
-                build_paginated_select(&qualified, filter_ref, limit_val, offset_val, db_type);
-            if let Some(ref db) = query.database {
-                let guard = adapter.lock().await;
-                if Some(db.as_str()) != guard.config.database.as_deref() {
-                    let mut temp_config = guard.config.clone();
-                    drop(guard);
-                    temp_config.database = Some(db.clone());
-                    let mut temp = SqlServerAdapter::new(temp_config);
-                    temp.connect()
-                        .await
-                        .map_err(|e| format!("Failed to connect to database '{}': {}", db, e))?;
-                    return temp
-                        .execute_query(&sql)
-                        .await
-                        .map_err(|e| format!("Failed to get table data: {}", e));
-                }
-            }
-            connection.execute_query(&sql).await
-        }
-        _ => {
-            let qualified = build_qualified_table(query.schema.as_deref(), &query.table, db_type);
-            let sql =
-                build_paginated_select(&qualified, filter_ref, limit_val, offset_val, db_type);
-            connection.execute_query(&sql).await
-        }
-    }
-    .map_err(|e| format!("Failed to get table data: {}", e))?;
+    let result = self::get_table_data_inner(&connection, &query, filter_ref, limit_val, offset_val, db_type)
+        .await
+        .map_err(|e| format!("Failed to get table data: {}", e))?;
 
     Ok(result)
 }
 
+async fn get_table_data_inner(
+    connection: &ActiveConnection,
+    query: &TableDataQuery,
+    filter_ref: Option<&str>,
+    limit_val: u32,
+    offset_val: u32,
+    db_type: &str,
+) -> Result<QueryResult, String> {
+    let qualified = build_qualified_table(query.schema.as_deref(), &query.table, db_type);
+    let sql = build_paginated_select(&qualified, filter_ref, limit_val, offset_val, db_type);
+
+    match connection {
+        ActiveConnection::Postgres(a) => with_db_switch!(a, PostgresAdapter, sql, query.database, connection, "Failed to get table data"),
+        ActiveConnection::MySQL(a) => with_db_switch!(a, MySQLAdapter, sql, query.database, connection, "Failed to get table data"),
+        ActiveConnection::SQLServer(a) => with_db_switch!(a, SqlServerAdapter, sql, query.database, connection, "Failed to get table data"),
+        ActiveConnection::ClickHouse(a) => with_db_switch!(a, ClickHouseAdapter, sql, query.database, connection, "Failed to get table data"),
+        ActiveConnection::JdbcBridge(a) => with_db_switch!(a, JdbcBridgeAdapter, sql, query.database, connection, "Failed to get table data"),
+        ActiveConnection::Rqlite(a) => with_db_switch!(a, RqliteAdapter, sql, query.database, connection, "Failed to get table data"),
+        ActiveConnection::Turso(a) => with_db_switch!(a, TursoAdapter, sql, query.database, connection, "Failed to get table data"),
+        ActiveConnection::HttpSql(a) => with_db_switch!(a, HttpSqlAdapter, sql, query.database, connection, "Failed to get table data"),
+        ActiveConnection::SQLite(_) => connection.execute_query(&sql).await.map_err(|e| format!("Failed to get table data: {}", e)),
+    }
+}
+
 /// Get the total row count for a table, optionally filtered by a WHERE clause.
 ///
 /// # Arguments
@@ -450,62 +455,37 @@ pub async fn get_table_count(
     let filter_ref = filter.as_deref();
     let db_type = get_db_type_string(&connection);
 
-    let result = match &connection {
-        ActiveConnection::Postgres(adapter) => {
-            let qualified = build_qualified_table(schema.as_deref(), &table, db_type);
-            let query = build_count_query(&qualified, filter_ref);
-            if let Some(ref db) = database {
-                let guard = adapter.lock().await;
-                if Some(db.as_str()) != guard.config.database.as_deref() {
-                    let mut temp_config = guard.config.clone();
-                    drop(guard);
-                    temp_config.database = Some(db.clone());
-                    let mut temp = PostgresAdapter::new(temp_config);
-                    temp.connect()
-                        .await
-                        .map_err(|e| format!("Failed to connect to database '{}': {}", db, e))?;
-                    let r = temp
-                        .execute_query(&query)
-                        .await
-                        .map_err(|e| format!("Failed to get table count: {}", e))?;
-                    return extract_count(r);
-                }
-            }
-            connection.execute_query(&query).await
-        }
-        ActiveConnection::SQLServer(adapter) => {
-            let qualified = build_qualified_table(schema.as_deref(), &table, db_type);
-            let query = build_count_query(&qualified, filter_ref);
-            if let Some(ref db) = database {
-                let guard = adapter.lock().await;
-                if Some(db.as_str()) != guard.config.database.as_deref() {
-                    let mut temp_config = guard.config.clone();
-                    drop(guard);
-                    temp_config.database = Some(db.clone());
-                    let mut temp = SqlServerAdapter::new(temp_config);
-                    temp.connect()
-                        .await
-                        .map_err(|e| format!("Failed to connect to database '{}': {}", db, e))?;
-                    let r = temp
-                        .execute_query(&query)
-                        .await
-                        .map_err(|e| format!("Failed to get table count: {}", e))?;
-                    return extract_count(r);
-                }
-            }
-            connection.execute_query(&query).await
-        }
-        _ => {
-            let qualified = build_qualified_table(schema.as_deref(), &table, db_type);
-            let query = build_count_query(&qualified, filter_ref);
-            connection.execute_query(&query).await
-        }
-    }
-    .map_err(|e| format!("Failed to get table count: {}", e))?;
+    let result = get_table_count_inner(&connection, &table, schema.as_deref(), database.as_deref(), filter_ref, db_type)
+        .await
+        .map_err(|e| format!("Failed to get table count: {}", e))?;
 
     extract_count(result)
 }
 
+async fn get_table_count_inner(
+    connection: &ActiveConnection,
+    table: &str,
+    schema: Option<&str>,
+    database: Option<&str>,
+    filter_ref: Option<&str>,
+    db_type: &str,
+) -> Result<QueryResult, String> {
+    let qualified = build_qualified_table(schema, table, db_type);
+    let query = build_count_query(&qualified, filter_ref);
+
+    match connection {
+        ActiveConnection::Postgres(a) => with_db_switch!(a, PostgresAdapter, query, database, connection, "Failed to get table count"),
+        ActiveConnection::MySQL(a) => with_db_switch!(a, MySQLAdapter, query, database, connection, "Failed to get table count"),
+        ActiveConnection::SQLServer(a) => with_db_switch!(a, SqlServerAdapter, query, database, connection, "Failed to get table count"),
+        ActiveConnection::ClickHouse(a) => with_db_switch!(a, ClickHouseAdapter, query, database, connection, "Failed to get table count"),
+        ActiveConnection::JdbcBridge(a) => with_db_switch!(a, JdbcBridgeAdapter, query, database, connection, "Failed to get table count"),
+        ActiveConnection::Rqlite(a) => with_db_switch!(a, RqliteAdapter, query, database, connection, "Failed to get table count"),
+        ActiveConnection::Turso(a) => with_db_switch!(a, TursoAdapter, query, database, connection, "Failed to get table count"),
+        ActiveConnection::HttpSql(a) => with_db_switch!(a, HttpSqlAdapter, query, database, connection, "Failed to get table count"),
+        ActiveConnection::SQLite(_) => connection.execute_query(&query).await.map_err(|e| format!("Failed to get table count: {}", e)),
+    }
+}
+
 /// Convert a JSON value to a SQL literal for safe embedding in UPDATE/DELETE queries.
 ///
 /// # Security Note
diff --git a/src-tauri/src/commands/file_operations.rs b/src-tauri/src/commands/file_operations.rs
index 94eb09d..b76f442 100644
--- a/src-tauri/src/commands/file_operations.rs
+++ b/src-tauri/src/commands/file_operations.rs
@@ -38,6 +38,23 @@ pub struct SavedQueryInfo {
     pub size_bytes: u64,
 }
 
+/// Metadata for a saved query entry in the metadata file
+#[derive(Debug, Serialize, Deserialize, Clone)]
+#[serde(rename_all = "camelCase")]
+pub struct SavedQueryMetadata {
+    pub connection_id: Option<String>,
+    pub connection_name: Option<String>,
+    pub created_at: u64,
+    pub modified_at: u64,
+}
+
+/// Collection of saved query metadata entries keyed by file path
+#[derive(Debug, Serialize, Deserialize, Default)]
+#[serde(rename_all = "camelCase")]
+pub struct SavedQueriesMetadata {
+    pub queries: std::collections::HashMap<String, SavedQueryMetadata>,
+}
+
 /// Get the queries directory path, creating it if necessary
 fn get_queries_dir(app_handle: &AppHandle) -> Result<PathBuf, String> {
     let app_data_dir = app_handle
@@ -56,6 +73,11 @@ fn get_queries_dir(app_handle: &AppHandle) -> Result<PathBuf, String> {
     Ok(queries_dir)
 }
 
+fn get_metadata_file_path(app_handle: &AppHandle) -> Result<PathBuf, String> {
+    let queries_dir = get_queries_dir(app_handle)?;
+    Ok(queries_dir.join("metadata.json"))
+}
+
 /// Save a SQL query to a file.
 ///
 /// If file_path is provided, saves to that path.
@@ -245,3 +267,157 @@ pub async fn write_text_file(path: String, content: String) -> Result<(), String
     }
     fs::write(target, content).map_err(|e| format!("Failed to write file: {}", e))
 }
+
+#[tauri::command]
+pub async fn read_saved_queries_metadata(app_handle: AppHandle) -> Result<SavedQueriesMetadata, String> {
+    let path = get_metadata_file_path(&app_handle)?;
+    if !path.exists() {
+        return Ok(SavedQueriesMetadata::default());
+    }
+    let content = fs::read_to_string(&path)
+        .map_err(|e| format!("Failed to read metadata file: {}", e))?;
+    match serde_json::from_str::<SavedQueriesMetadata>(&content) {
+        Ok(metadata) => Ok(metadata),
+        Err(e) => {
+            eprintln!("Corrupt metadata file, returning empty: {}", e);
+            Ok(SavedQueriesMetadata::default())
+        }
+    }
+}
+
+#[tauri::command]
+pub async fn write_saved_queries_metadata(
+    app_handle: AppHandle,
+    metadata: SavedQueriesMetadata,
+) -> Result<(), String> {
+    let path = get_metadata_file_path(&app_handle)?;
+    let tmp_path = path.with_extension("json.tmp");
+    let content = serde_json::to_string_pretty(&metadata)
+        .map_err(|e| format!("Failed to serialize metadata: {}", e))?;
+    fs::write(&tmp_path, content)
+        .map_err(|e| format!("Failed to write temp metadata file: {}", e))?;
+    fs::rename(&tmp_path, &path)
+        .map_err(|e| format!("Failed to rename metadata file: {}", e))?;
+    Ok(())
+}
+
+#[tauri::command]
+pub async fn save_query_metadata(
+    app_handle: AppHandle,
+    file_path: String,
+    metadata: SavedQueryMetadata,
+) -> Result<(), String> {
+    let existing = read_saved_queries_metadata(app_handle.clone()).await?;
+    let mut updated = existing;
+    updated.queries.insert(file_path, metadata);
+    write_saved_queries_metadata(app_handle, updated).await
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use std::collections::HashMap;
+
+    fn make_test_metadata() -> SavedQueriesMetadata {
+        let mut queries = HashMap::new();
+        queries.insert(
+            "/path/to/query1.sql".to_string(),
+            SavedQueryMetadata {
+                connection_id: Some("conn-uuid-1234".to_string()),
+                connection_name: Some("pg-prod".to_string()),
+                created_at: 1718926200,
+                modified_at: 1719185400,
+            },
+        );
+        queries.insert(
+            "/path/to/query2.sql".to_string(),
+            SavedQueryMetadata {
+                connection_id: None,
+                connection_name: None,
+                created_at: 1718000000,
+                modified_at: 1719000000,
+            },
+        );
+        SavedQueriesMetadata { queries }
+    }
+
+    #[test]
+    fn test_metadata_write_then_read_roundtrip() {
+        let dir = tempfile::tempdir().unwrap();
+        let metadata_path = dir.path().join("metadata.json");
+
+        let original = make_test_metadata();
+
+        let json = serde_json::to_string_pretty(&original).unwrap();
+        std::fs::write(&metadata_path, &json).unwrap();
+
+        let content = std::fs::read_to_string(&metadata_path).unwrap();
+        let read_back: SavedQueriesMetadata = serde_json::from_str(&content).unwrap();
+
+        assert_eq!(read_back.queries.len(), 2);
+        assert!(read_back.queries.contains_key("/path/to/query1.sql"));
+        assert!(read_back.queries.contains_key("/path/to/query2.sql"));
+
+        let q1 = read_back.queries.get("/path/to/query1.sql").unwrap();
+        assert_eq!(q1.connection_id, Some("conn-uuid-1234".to_string()));
+        assert_eq!(q1.connection_name, Some("pg-prod".to_string()));
+        assert_eq!(q1.created_at, 1718926200);
+        assert_eq!(q1.modified_at, 1719185400);
+
+        let q2 = read_back.queries.get("/path/to/query2.sql").unwrap();
+        assert!(q2.connection_id.is_none());
+        assert!(q2.connection_name.is_none());
+    }
+
+    #[test]
+    fn test_metadata_read_missing_file_returns_empty() {
+        let dir = tempfile::tempdir().unwrap();
+        let metadata_path = dir.path().join("metadata.json");
+
+        assert!(!metadata_path.exists());
+
+        let result: SavedQueriesMetadata = if !metadata_path.exists() {
+            SavedQueriesMetadata::default()
+        } else {
+            let content = std::fs::read_to_string(&metadata_path).unwrap();
+            serde_json::from_str(&content).unwrap_or_default()
+        };
+
+        assert_eq!(result.queries.len(), 0);
+    }
+
+    #[test]
+    fn test_metadata_read_corrupt_json_returns_empty() {
+        let dir = tempfile::tempdir().unwrap();
+        let metadata_path = dir.path().join("metadata.json");
+
+        std::fs::write(&metadata_path, "not valid json {{{{").unwrap();
+
+        let content = std::fs::read_to_string(&metadata_path).unwrap();
+        let result: SavedQueriesMetadata = match serde_json::from_str(&content) {
+            Ok(m) => m,
+            Err(_) => SavedQueriesMetadata::default(),
+        };
+
+        assert_eq!(result.queries.len(), 0);
+    }
+
+    #[test]
+    fn test_metadata_write_is_atomic() {
+        let dir = tempfile::tempdir().unwrap();
+        let metadata_path = dir.path().join("metadata.json");
+        let tmp_path = metadata_path.with_extension("json.tmp");
+
+        let metadata = make_test_metadata();
+
+        let json = serde_json::to_string_pretty(&metadata).unwrap();
+        std::fs::write(&tmp_path, &json).unwrap();
+        std::fs::rename(&tmp_path, &metadata_path).unwrap();
+
+        assert!(metadata_path.exists());
+        assert!(!tmp_path.exists());
+
+        let content = std::fs::read_to_string(&metadata_path).unwrap();
+        let _: SavedQueriesMetadata = serde_json::from_str(&content).unwrap();
+    }
+}
diff --git a/src-tauri/src/database/postgres.rs b/src-tauri/src/database/postgres.rs
index 74ba15c..801c9f5 100644
--- a/src-tauri/src/database/postgres.rs
+++ b/src-tauri/src/database/postgres.rs
@@ -1545,17 +1545,6 @@ impl DatabaseAdapter for PostgresAdapter {
 
         let schema_filter = schema.unwrap_or("public");
 
-        let query = r#"
-            SELECT
-                table_name as name,
-                'VIEW' as object_type,
-                table_schema as schema_name,
-                view_definition as definition
-            FROM information_schema.views
-            WHERE table_schema = $1
-            ORDER BY table_name
-        "#;
-
         let pool = self
             .pool
             .as_ref()
@@ -1567,12 +1556,23 @@ impl DatabaseAdapter for PostgresAdapter {
             .await
             .map_err(|e| DbError::Connection(format!("Failed to get connection: {}", e)))?;
 
+        // Query regular views from information_schema.views — works on all PG-wire databases.
+        let views_query = r#"
+            SELECT
+                table_name as name,
+                'VIEW' as object_type,
+                table_schema as schema_name,
+                view_definition as definition
+            FROM information_schema.views
+            WHERE table_schema = $1
+        "#;
+
         let rows = client
-            .query(query, &[&schema_filter])
+            .query(views_query, &[&schema_filter])
             .await
             .map_err(|e| DbError::QueryExecution(e.to_string()))?;
 
-        let views = rows
+        let mut views: Vec<ObjectInfo> = rows
             .iter()
             .map(|row| {
                 let name: String = row.get(0);
@@ -1595,6 +1595,44 @@ impl DatabaseAdapter for PostgresAdapter {
             })
             .collect();
 
+        // Query materialized views from pg_matviews separately.
+        // pg_matviews is PostgreSQL-specific and may not exist on PG-wire-compat
+        // databases (CockroachDB, CrateDB, QuestDB, Redshift). If the query fails,
+        // we simply skip materialized views rather than breaking view listing entirely.
+        let matviews_query = r#"
+            SELECT
+                matviewname as name,
+                'MATERIALIZED VIEW' as object_type,
+                schemaname as schema_name,
+                definition as definition
+            FROM pg_matviews
+            WHERE schemaname = $1
+        "#;
+
+        if let Ok(matview_rows) = client.query(matviews_query, &[&schema_filter]).await {
+            views.extend(matview_rows.iter().map(|row| {
+                let name: String = row.get(0);
+                let object_type: String = row.get(1);
+                let schema_name: String = row.get(2);
+                let definition: Option<String> = row.get(3);
+                let detail = definition.map(|def| {
+                    if def.len() > 100 {
+                        format!("{}...", &def[..100])
+                    } else {
+                        def
+                    }
+                });
+                ObjectInfo {
+                    name,
+                    object_type,
+                    schema: Some(schema_name),
+                    detail,
+                }
+            }));
+        }
+
+        views.sort_by(|a, b| a.name.cmp(&b.name));
+
         Ok(views)
     }
 
@@ -2022,6 +2060,20 @@ impl DatabaseAdapter for PostgresAdapter {
                     .map(|r| r.get::<_, String>(0))
                     .ok_or_else(|| DbError::DatabaseNotFound(object_name.to_string()))
             }
+            "MATERIALIZED VIEW" => {
+                let query = r#"
+                    SELECT definition
+                    FROM pg_matviews
+                    WHERE schemaname = $1 AND matviewname = $2
+                "#;
+                let rows = client
+                    .query(query, &[&schema_filter, &object_name])
+                    .await
+                    .map_err(|e| DbError::QueryExecution(e.to_string()))?;
+                rows.first()
+                    .map(|r| r.get::<_, String>(0))
+                    .ok_or_else(|| DbError::DatabaseNotFound(object_name.to_string()))
+            }
             "PROCEDURE" | "FUNCTION" => {
                 let query = r#"
                     SELECT pg_get_functiondef(p.oid)
@@ -2082,6 +2134,7 @@ impl DatabaseAdapter for PostgresAdapter {
 
         let sql = match object_type.to_uppercase().as_str() {
             "VIEW" => format!("DROP VIEW IF EXISTS {} CASCADE", qualified),
+            "MATERIALIZED VIEW" => format!("DROP MATERIALIZED VIEW IF EXISTS {} CASCADE", qualified),
             "PROCEDURE" => format!("DROP PROCEDURE IF EXISTS {} CASCADE", qualified),
             "FUNCTION" => format!("DROP FUNCTION IF EXISTS {} CASCADE", qualified),
             "TRIGGER" => {
@@ -2143,6 +2196,7 @@ impl DatabaseAdapter for PostgresAdapter {
         let sql = match object_type.to_uppercase().as_str() {
             "TABLE" => format!("ALTER TABLE {} RENAME TO {}", qualified, new_quoted),
             "VIEW" => format!("ALTER VIEW {} RENAME TO {}", qualified, new_quoted),
+            "MATERIALIZED VIEW" => format!("ALTER MATERIALIZED VIEW {} RENAME TO {}", qualified, new_quoted),
             "PROCEDURE" => format!("ALTER PROCEDURE {} RENAME TO {}", qualified, new_quoted),
             "FUNCTION" => format!("ALTER FUNCTION {} RENAME TO {}", qualified, new_quoted),
             _ => {
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index e0d2c5d..bf78899 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -273,6 +273,9 @@ pub fn run() {
             commands::list_saved_queries,
             commands::delete_query_file,
             commands::write_text_file,
+            commands::read_saved_queries_metadata,
+            commands::write_saved_queries_metadata,
+            commands::save_query_metadata,
             commands::preview_export_data,
             commands::execute_export_data,
             commands::detect_file_format,
diff --git a/src/assets/index.css b/src/assets/index.css
index 7e6fb30..8e97e98 100644
--- a/src/assets/index.css
+++ b/src/assets/index.css
@@ -95,3 +95,28 @@ button:not(:disabled),
     opacity: 0.6;
   }
 }
+
+/* Thin scrollbars — subtle, non-intrusive */
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: hsl(var(--muted-foreground) / 0.25);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--muted-foreground) / 0.4);
+}
+
+/* Overlay scrollbar behavior: only show on hover of the scrollable area */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: hsl(var(--muted-foreground) / 0.25) transparent;
+}
diff --git a/src/components/database-browser/DataTableView.vue b/src/components/database-browser/DataTableView.vue
index cc9bef4..9b2ac80 100644
--- a/src/components/database-browser/DataTableView.vue
+++ b/src/components/database-browser/DataTableView.vue
@@ -821,13 +821,13 @@ watch(
 </script>
 
 <template>
-  <div class="data-table-view flex flex-col h-full" @click="showColumnMenu = false">
+  <div class="data-table-view flex flex-col min-h-0" @click="showColumnMenu = false">
     <!-- Sub-page navigation bar -->
-    <div class="border-b bg-muted/30 flex">
+    <div class="border-b bg-muted/30 flex shrink-0">
       <button
         v-for="page in subPages"
         :key="page.id"
-        class="text-xs font-medium px-3 py-1.5 border-b-2 transition-colors"
+        class="text-xs font-medium px-3 py-1.5 border-b-2 shrink-0 transition-colors"
         :class="activeSubPage === page.id
           ? 'border-primary text-foreground'
           : 'border-transparent text-muted-foreground hover:text-foreground'"
@@ -839,7 +839,7 @@ watch(
 
     <!-- Data sub-page: Toolbar bar (search + filter + actions) -->
     <template v-if="activeSubPage === 'data'">
-      <div class="px-3 py-1.5 border-b bg-muted/20 flex gap-1.5 items-center">
+      <div class="px-3 py-1.5 border-b bg-muted/20 flex shrink-0 gap-1.5 items-center">
         <span class="i-carbon-search text-muted-foreground flex-shrink-0 h-3.5 w-3.5" />
 
         <!-- Search input — searches across all columns -->
@@ -980,7 +980,7 @@ watch(
       </div>
 
       <!-- Table area -->
-      <div class="flex-1 relative overflow-auto">
+      <div class="flex-1 min-h-0 relative overflow-auto">
         <!-- Connection error state -->
         <div v-if="connectionError" class="p-4 flex h-full items-center justify-center">
           <div class="text-center max-w-md">
@@ -1151,7 +1151,7 @@ watch(
       </div>
 
       <!-- Status bar + pagination -->
-      <div class="text-xs text-muted-foreground px-3 py-1.5 border-t bg-muted/20 flex flex-wrap gap-3 items-center">
+      <div class="text-xs text-muted-foreground px-3 py-1.5 border-t bg-muted/20 flex shrink-0 gap-3 items-center overflow-hidden">
         <!-- Left: stats -->
         <div class="flex flex-shrink-0 gap-3 items-center">
           <span v-if="totalCount > 0" class="tabular-nums">
@@ -1160,12 +1160,12 @@ watch(
           <span v-if="formattedTime" class="text-muted-foreground/70">{{ formattedTime }}</span>
         </div>
 
-        <div class="flex-1" />
+        <div class="flex-1 min-w-0" />
 
         <!-- Right: pagination + rows per page grouped -->
-        <div class="flex flex-shrink-0 gap-2 items-center">
+        <div class="flex flex-shrink-0 gap-2 max-w-[70%] items-center overflow-x-auto">
           <!-- Page navigation -->
-          <div v-if="data" class="flex gap-0.5 items-center">
+          <div v-if="data" class="flex flex-nowrap gap-0.5 items-center">
             <!-- Prev -->
             <button
               class="text-xs rounded inline-flex h-6 w-6 transition-colors items-center justify-center hover:bg-accent disabled:opacity-40 disabled:cursor-not-allowed"
diff --git a/src/components/database-browser/DatabaseBrowser.vue b/src/components/database-browser/DatabaseBrowser.vue
deleted file mode 100644
index 5e8ccba..0000000
--- a/src/components/database-browser/DatabaseBrowser.vue
+++ /dev/null
@@ -1,981 +0,0 @@
-<script setup lang="ts">
-import type { SavedQueryInfo } from '@/datasources/fileApi'
-import type { DatabaseSchema, TableInfo } from '@/store/databaseStore'
-import { revealItemInDir } from '@tauri-apps/plugin-opener'
-import { computed, ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select'
-import { deleteQueryFile, listSavedQueryFiles } from '@/datasources'
-import { ConnectionStatus, useConnectionStore, useDatabaseStore } from '@/store'
-
-export type TreeNodeMetadata = TableInfo & {
-  database: string
-  schema?: string
-}
-
-export type TreeNodeType = 'connection' | 'database' | 'schema' | 'table' | 'view' | 'column'
-
-export type TreeNode = {
-  id: string
-  name: string
-  type: TreeNodeType
-  children?: TreeNode[]
-  isExpanded?: boolean
-  isLoading?: boolean
-  parentId?: string
-  metadata?: TreeNodeMetadata
-}
-
-const props = defineProps<{
-  connectionId?: string
-  selectedDatabase?: string
-  selectedSchema?: string
-}>()
-
-const emit = defineEmits<{
-  (e: 'selectTable', table: TableInfo, database: string, schema?: string): void
-  (e: 'createScript', table: TableInfo, database: string, schema?: string): void
-  (e: 'selectTopN', table: TableInfo, database: string, schema?: string, n?: number): void
-  (e: 'viewStructure', table: TableInfo, database: string, schema?: string): void
-  (e: 'exportData', table: TableInfo, database: string, schema?: string): void
-  (e: 'showErDiagram', database: string, schema?: string): void
-  (e: 'dropTable', table: TableInfo, database: string, schema?: string): void
-  (e: 'truncateTable', table: TableInfo, database: string, schema?: string): void
-  (e: 'update:selectedDatabase', database: string): void
-  (e: 'update:selectedSchema', schema: string): void
-  (e: 'openSavedQuery', filePath: string): void
-  (e: 'createNewQuery'): void
-  (e: 'openListingTab', type: string, database: string, schema?: string): void
-  (e: 'openDdlTab', name: string, type: string, database: string, schema?: string): void
-}>()
-
-const { t } = useI18n()
-const connectionStore = useConnectionStore()
-const databaseStore = useDatabaseStore()
-
-const searchQuery = ref('')
-const expandedNodes = ref<Set<string>>(new Set())
-const selectedNodeId = ref<string | null>(null)
-const contextMenuNode = ref<TreeNode | null>(null)
-const contextMenuPosition = ref({ x: 0, y: 0 })
-const showContextMenu = ref(false)
-const showTables = ref(true)
-const showViews = ref(false)
-const showProcedures = ref(false)
-const showFunctions = ref(false)
-const showSavedQueries = ref(false)
-const savedQueryFiles = ref<SavedQueryInfo[]>([])
-const savedQueriesLoading = ref(false)
-const savedQueryContextMenu = ref<SavedQueryInfo | null>(null)
-const savedQueryContextMenuPosition = ref({ x: 0, y: 0 })
-const showSavedQueryContextMenu = ref(false)
-
-const activeConnection = computed(() => {
-  const connId = props.connectionId || connectionStore.activeConnectionId
-  return connId ? connectionStore.getConnectionById(connId) : connectionStore.activeConnection
-})
-const connectionId = computed(() => props.connectionId || connectionStore.activeConnectionId)
-const isActiveConnectionConnected = computed(() =>
-  connectionId.value
-    ? connectionStore.getConnectionStatus(connectionId.value) === ConnectionStatus.CONNECTED
-    : false,
-)
-
-/// Whether the currently selected database has known schemas (e.g., PG, MSSQL, Oracle, Dameng).
-/// Driven by actual data rather than a hardcoded allowlist, so any database that
-/// returns schemas from `listSchemas` gets schema-aware browsing automatically.
-const supportsSchemas = computed(() => {
-  if (!props.selectedDatabase || !connectionId.value) {
-    return false
-  }
-  const meta = databaseStore.metadata[connectionId.value]
-  if (!meta)
-    return false
-  const schemas = meta.schemas[props.selectedDatabase]
-  return schemas !== undefined && schemas.length > 0
-})
-
-const availableSchemas = computed<string[]>(() => {
-  if (!props.selectedDatabase || !connectionId.value || !supportsSchemas.value) {
-    return []
-  }
-  return databaseStore.metadata[connectionId.value]?.schemas[props.selectedDatabase] ?? []
-})
-
-function createTableNode(database: string, schema: string | undefined, table: TableInfo, parentId: string): TreeNode {
-  return {
-    id: `table-${database}-${schema || ''}-${table.name}`,
-    name: table.name,
-    type: table.table_type?.toLowerCase() === 'view' ? 'view' : 'table',
-    parentId,
-    metadata: { database, schema, ...table },
-  }
-}
-
-function createSchemaNode(database: string, schema: string, tables: TableInfo[], parentId: string): TreeNode {
-  const schemaId = `schema-${database}-${schema}`
-  return {
-    id: schemaId,
-    name: schema,
-    type: 'schema',
-    parentId,
-    isExpanded: expandedNodes.value.has(schemaId),
-    children: tables.map(table => createTableNode(database, schema, table, schemaId)),
-  }
-}
-
-function createDatabaseNode(database: DatabaseSchema, metadata: { schemas: Record<string, string[]>, tables: Record<string, TableInfo[]> }): TreeNode {
-  const dbId = `db-${database.name}`
-  const schemas = metadata.schemas[database.name] || []
-
-  const children = schemas.length > 0
-    ? schemas.map(schema => createSchemaNode(
-        database.name,
-        schema,
-        metadata.tables[`${database.name}.${schema}`] || [],
-        dbId,
-      ))
-    : (metadata.tables[database.name] || []).map(table => createTableNode(database.name, undefined, table, dbId))
-
-  return {
-    id: dbId,
-    name: database.name,
-    type: 'database',
-    isExpanded: expandedNodes.value.has(dbId),
-    children,
-  }
-}
-
-const userDatabaseNodes = computed<TreeNode[]>(() => {
-  if (!connectionId.value || !databaseStore.metadata[connectionId.value]) {
-    return []
-  }
-
-  const metadata = databaseStore.metadata[connectionId.value]
-  return metadata.databases
-    .filter(db => !db.is_system)
-    .map(database => createDatabaseNode(database, metadata))
-})
-
-const systemDatabaseNodes = computed<TreeNode[]>(() => {
-  if (!connectionId.value || !databaseStore.metadata[connectionId.value]) {
-    return []
-  }
-
-  const metadata = databaseStore.metadata[connectionId.value]
-  return metadata.databases
-    .filter(db => db.is_system)
-    .map(database => createDatabaseNode(database, metadata))
-})
-
-const schemaObjects = computed(() => {
-  if (!connectionId.value || !props.selectedDatabase || !props.selectedSchema) {
-    return null
-  }
-  return databaseStore.getSchemaObjects(connectionId.value, props.selectedDatabase, props.selectedSchema)
-})
-
-const viewsCount = computed(() => schemaObjects.value?.views.length ?? 0)
-const proceduresCount = computed(() => schemaObjects.value?.procedures.length ?? 0)
-const functionsCount = computed(() => schemaObjects.value?.functions.length ?? 0)
-
-const tablesAndViews = computed(() => {
-  const currentDb = props.selectedDatabase
-  if (!currentDb || !connectionId.value || !databaseStore.metadata[connectionId.value]) {
-    return { tables: [], views: [] }
-  }
-
-  const metadata = databaseStore.metadata[connectionId.value]
-  const schemas = metadata.schemas[currentDb] || []
-
-  const allItems: TreeNode[] = schemas.length > 0
-    ? (() => {
-        const schema = props.selectedSchema || schemas[0]
-        const tablesKey = `${currentDb}.${schema}`
-        return (metadata.tables[tablesKey] || []).map(table =>
-          createTableNode(currentDb, schema, table, `schema-${currentDb}-${schema}`),
-        )
-      })()
-    : (metadata.tables[currentDb] || []).map(table =>
-        createTableNode(currentDb, undefined, table, `db-${currentDb}`),
-      )
-
-  const query = searchQuery.value.toLowerCase().trim()
-  const filtered = query
-    ? allItems.filter(item => item.name.toLowerCase().includes(query))
-    : allItems
-
-  return {
-    tables: filtered.filter(item => item.type === 'table'),
-    views: filtered.filter(item => item.type === 'view'),
-  }
-})
-
-const filteredSavedQueries = computed(() => {
-  const query = searchQuery.value.toLowerCase().trim()
-  return query
-    ? savedQueryFiles.value.filter(file =>
-        file.file_name.toLowerCase().includes(query)
-        || file.folder.toLowerCase().includes(query),
-      )
-    : savedQueryFiles.value
-})
-
-async function fetchSavedQueryFiles() {
-  savedQueriesLoading.value = true
-  try {
-    savedQueryFiles.value = await listSavedQueryFiles()
-  }
-  catch (error) {
-    console.error('Failed to fetch saved queries:', error)
-    savedQueryFiles.value = []
-  }
-  finally {
-    savedQueriesLoading.value = false
-  }
-}
-
-function handleSavedQueryClick(file: SavedQueryInfo) {
-  emit('openSavedQuery', file.file_path)
-}
-
-function handleSavedQueryContextMenu(event: MouseEvent, file: SavedQueryInfo) {
-  event.preventDefault()
-  savedQueryContextMenu.value = file
-  savedQueryContextMenuPosition.value = { x: event.clientX, y: event.clientY }
-  showSavedQueryContextMenu.value = true
-}
-
-function handleSavedQueryOpen() {
-  if (savedQueryContextMenu.value) {
-    emit('openSavedQuery', savedQueryContextMenu.value.file_path)
-  }
-  closeSavedQueryContextMenu()
-}
-
-async function handleSavedQueryDelete() {
-  if (!savedQueryContextMenu.value)
-    return
-
-  try {
-    await deleteQueryFile(savedQueryContextMenu.value.file_path)
-    savedQueryFiles.value = savedQueryFiles.value.filter(
-      f => f.file_path !== savedQueryContextMenu.value!.file_path,
-    )
-  }
-  catch (error) {
-    console.error('Failed to delete saved query:', error)
-  }
-  closeSavedQueryContextMenu()
-}
-
-async function handleSavedQueryReveal() {
-  if (!savedQueryContextMenu.value)
-    return
-
-  try {
-    await revealItemInDir(savedQueryContextMenu.value.file_path)
-  }
-  catch (error) {
-    console.error('Failed to reveal file:', error)
-  }
-  closeSavedQueryContextMenu()
-}
-
-function closeSavedQueryContextMenu() {
-  showSavedQueryContextMenu.value = false
-  savedQueryContextMenu.value = null
-}
-
-async function toggleNode(node: TreeNode) {
-  const nodeId = node.id
-
-  if (expandedNodes.value.has(nodeId)) {
-    expandedNodes.value = new Set([...expandedNodes.value].filter(id => id !== nodeId))
-  }
-  else {
-    expandedNodes.value = new Set([...expandedNodes.value, nodeId])
-
-    if (node.type === 'database' && connectionId.value) {
-      const database = node.name
-      const metadata = databaseStore.metadata[connectionId.value]
-
-      const connectedDb = activeConnection.value?.database
-      if (!connectedDb || connectedDb === database) {
-        if (!metadata?.schemas[database]) {
-          await databaseStore.fetchSchemas(connectionId.value, database)
-        }
-
-        if (!metadata?.schemas[database] || metadata.schemas[database].length === 0) {
-          if (!metadata?.tables[database]) {
-            await databaseStore.fetchTables(connectionId.value, database)
-          }
-        }
-      }
-    }
-    else if (node.type === 'schema' && connectionId.value) {
-      const parts = node.id.split('-')
-      const database = parts[1]
-      const schema = parts.slice(2).join('-')
-      const tablesKey = `${database}.${schema}`
-      const metadata = databaseStore.metadata[connectionId.value]
-
-      const connectedDb = activeConnection.value?.database
-      if (!connectedDb || connectedDb === database) {
-        if (!metadata?.tables[tablesKey]) {
-          await databaseStore.fetchTables(connectionId.value, database, schema)
-        }
-      }
-    }
-  }
-}
-
-function selectNode(node: TreeNode) {
-  selectedNodeId.value = node.id
-}
-
-function handleTableClick(node: TreeNode) {
-  selectNode(node)
-  if ((node.type === 'table' || node.type === 'view') && node.metadata) {
-    emit('selectTable', node.metadata, node.metadata.database, node.metadata.schema)
-  }
-}
-
-async function toggleViews() {
-  showViews.value = !showViews.value
-  if (showViews.value && connectionId.value && props.selectedDatabase && props.selectedSchema) {
-    await databaseStore.fetchSchemaObjects(connectionId.value, props.selectedDatabase, props.selectedSchema)
-  }
-}
-
-async function toggleProcedures() {
-  showProcedures.value = !showProcedures.value
-  if (showProcedures.value && connectionId.value && props.selectedDatabase && props.selectedSchema) {
-    await databaseStore.fetchSchemaObjects(connectionId.value, props.selectedDatabase, props.selectedSchema)
-  }
-}
-
-async function toggleFunctions() {
-  showFunctions.value = !showFunctions.value
-  if (showFunctions.value && connectionId.value && props.selectedDatabase && props.selectedSchema) {
-    await databaseStore.fetchSchemaObjects(connectionId.value, props.selectedDatabase, props.selectedSchema)
-  }
-}
-
-function handleViewClick(view: { name: string }) {
-  if (connectionId.value && props.selectedDatabase) {
-    emit('openDdlTab', view.name, 'VIEW', props.selectedDatabase, props.selectedSchema)
-  }
-}
-
-function handleProcedureClick(proc: { name: string }) {
-  if (connectionId.value && props.selectedDatabase) {
-    emit('openDdlTab', proc.name, 'PROCEDURE', props.selectedDatabase, props.selectedSchema)
-  }
-}
-
-function handleFunctionClick(func: { name: string }) {
-  if (connectionId.value && props.selectedDatabase) {
-    emit('openDdlTab', func.name, 'FUNCTION', props.selectedDatabase, props.selectedSchema)
-  }
-}
-
-function handleOpenListingTab(type: 'VIEW' | 'PROCEDURE' | 'FUNCTION') {
-  if (connectionId.value && props.selectedDatabase) {
-    emit('openListingTab', type, props.selectedDatabase, props.selectedSchema)
-  }
-}
-
-function handleDoubleClick(node: TreeNode) {
-  if (node.type === 'table' || node.type === 'view') {
-    const metadata = node.metadata
-    if (metadata) {
-      emit('viewStructure', metadata, metadata.database, metadata.schema)
-    }
-  }
-  else {
-    toggleNode(node)
-  }
-}
-
-function handleContextMenu(event: MouseEvent, node: TreeNode) {
-  event.preventDefault()
-  contextMenuNode.value = node
-  contextMenuPosition.value = { x: event.clientX, y: event.clientY }
-  showContextMenu.value = true
-}
-
-type ContextAction = 'createScript' | 'selectTopN' | 'viewStructure' | 'exportData' | 'showErDiagram' | 'dropTable' | 'truncateTable'
-
-const contextActionEmitters: Partial<Record<ContextAction, (metadata: TreeNodeMetadata) => void>> = {
-  createScript: metadata => emit('createScript', metadata, metadata.database, metadata.schema),
-  selectTopN: metadata => emit('selectTopN', metadata, metadata.database, metadata.schema, 100),
-  viewStructure: metadata => emit('viewStructure', metadata, metadata.database, metadata.schema),
-  exportData: metadata => emit('exportData', metadata, metadata.database, metadata.schema),
-  dropTable: metadata => emit('dropTable', metadata, metadata.database, metadata.schema),
-  truncateTable: metadata => emit('truncateTable', metadata, metadata.database, metadata.schema),
-}
-
-function handleContextAction(action: ContextAction) {
-  if (!contextMenuNode.value) {
-    return
-  }
-
-  if (action === 'showErDiagram') {
-    const node = contextMenuNode.value
-    if (node.type === 'database') {
-      emit('showErDiagram', node.name)
-    }
-    else if (node.type === 'schema') {
-      const database = node.parentId
-        ? node.parentId.replace(/^db-/, '')
-        : (props.selectedDatabase || '')
-      emit('showErDiagram', database, node.name)
-    }
-    else if (node.type === 'table' || node.type === 'view') {
-      // For table/view nodes, use the metadata or parent context
-      const database = props.selectedDatabase || ''
-      const schema = node.metadata?.schema
-      emit('showErDiagram', database, schema)
-    }
-    showContextMenu.value = false
-    contextMenuNode.value = null
-    return
-  }
-
-  if (!contextMenuNode.value.metadata) {
-    return
-  }
-
-  const emitter = contextActionEmitters[action]
-  if (emitter) {
-    emitter(contextMenuNode.value.metadata)
-  }
-  showContextMenu.value = false
-  contextMenuNode.value = null
-}
-
-async function fetchTablesForSchemas(connId: string, database: string, schemas: string[]) {
-  if (schemas.length > 0) {
-    await Promise.all(schemas.map(schema => databaseStore.fetchTables(connId, database, schema)))
-  }
-  else {
-    await databaseStore.fetchTables(connId, database)
-  }
-}
-
-async function refreshTree() {
-  if (!connectionId.value) {
-    return
-  }
-
-  const connection = activeConnection.value
-  if (!connection?.isConnected) {
-    console.warn('Connection not established, cannot refresh')
-    return
-  }
-
-  databaseStore.clearMetadata(connectionId.value)
-  await databaseStore.fetchDatabases(connectionId.value)
-
-  const connectedDb = props.selectedDatabase
-    || connectionStore.getCurrentDatabase(connectionId.value)
-    || connection.database
-  if (connectedDb) {
-    await databaseStore.fetchSchemas(connectionId.value, connectedDb)
-
-    const metadata = databaseStore.metadata[connectionId.value]
-    const schemas = metadata?.schemas[connectedDb] || []
-
-    await fetchTablesForSchemas(connectionId.value, connectedDb, schemas)
-  }
-
-  // Also refresh saved queries
-  await fetchSavedQueryFiles()
-}
-
-async function loadDatabaseData(connId: string, database: string) {
-  await databaseStore.fetchSchemas(connId, database)
-
-  const metadata = databaseStore.metadata[connId]
-  const schemas = metadata?.schemas[database] || []
-
-  await fetchTablesForSchemas(connId, database, schemas)
-}
-
-watch(connectionId, async (newId) => {
-  if (!newId) {
-    return
-  }
-
-  const connection = activeConnection.value
-  if (!connection?.isConnected) {
-    console.warn('Connection not established yet, skipping data fetch')
-    return
-  }
-
-  await databaseStore.fetchDatabases(newId)
-
-  // Pick the database to load: prefer the connected database, otherwise
-  // grab the first user database from the metadata (common for single-DB
-  // systems like Dameng, Oracle, etc.).
-  const meta = databaseStore.metadata[newId]
-  const firstDb = meta?.databases.find(db => !db.is_system)?.name
-  const connectedDb = connection.database || connectionStore.getCurrentDatabase(newId) || firstDb
-  if (connectedDb) {
-    await loadDatabaseData(newId, connectedDb)
-  }
-  // Auto-select the initial database in the parent if none is selected yet.
-  if (!props.selectedDatabase && connectedDb) {
-    emit('update:selectedDatabase', connectedDb)
-  }
-}, { immediate: true })
-
-watch(() => activeConnection.value?.isConnected, async (isConnected) => {
-  if (!isConnected || !connectionId.value) {
-    return
-  }
-
-  await databaseStore.fetchDatabases(connectionId.value)
-
-  const meta = databaseStore.metadata[connectionId.value]
-  const firstDb = meta?.databases.find(db => !db.is_system)?.name
-  const connectedDb = activeConnection.value?.database || connectionStore.getCurrentDatabase(connectionId.value) || firstDb
-  if (connectedDb) {
-    await loadDatabaseData(connectionId.value, connectedDb)
-  }
-  // Auto-select the initial database in the parent if none is selected yet.
-  if (!props.selectedDatabase && connectedDb) {
-    emit('update:selectedDatabase', connectedDb)
-  }
-})
-
-watch(() => props.selectedDatabase, async (newDb, oldDb) => {
-  if (!newDb || !connectionId.value || newDb === oldDb) {
-    return
-  }
-
-  const meta = databaseStore.metadata[connectionId.value]
-  if (meta) {
-    delete meta.schemas[newDb]
-    const staleKeys = Object.keys(meta.tables).filter(k => k === newDb || k.startsWith(`${newDb}.`))
-    staleKeys.forEach(k => delete meta.tables[k])
-  }
-
-  await loadDatabaseData(connectionId.value, newDb)
-})
-
-watch(() => props.selectedSchema, async (newSchema, oldSchema) => {
-  if (!newSchema || !props.selectedDatabase || !connectionId.value || newSchema === oldSchema) {
-    return
-  }
-
-  const tablesKey = `${props.selectedDatabase}.${newSchema}`
-  const meta = databaseStore.metadata[connectionId.value]
-  if (!meta?.tables[tablesKey]) {
-    await databaseStore.fetchTables(connectionId.value, props.selectedDatabase, newSchema)
-  }
-})
-
-watch(showSavedQueries, async (isExpanded) => {
-  if (isExpanded && savedQueryFiles.value.length === 0) {
-    await fetchSavedQueryFiles()
-  }
-})
-
-function closeContextMenu() {
-  showContextMenu.value = false
-  contextMenuNode.value = null
-  closeSavedQueryContextMenu()
-}
-
-type IconType = 'table' | 'view' | 'database' | 'column' | 'schema' | 'file'
-
-const iconMap: Record<IconType, string> = {
-  database: 'i-carbon-data-base',
-  table: 'i-carbon-table',
-  view: 'i-carbon-view',
-  schema: 'i-carbon-folder',
-  column: 'i-carbon-columns',
-  file: 'i-carbon-document',
-}
-
-const getIcon = (type: IconType) => iconMap[type] || iconMap.column
-
-defineExpose({ fetchSavedQueryFiles, refreshTree })
-</script>
-
-<template>
-  <div class="database-browser flex flex-col h-full" @click="closeContextMenu">
-    <!-- Header -->
-    <div class="p-2 border-b">
-      <div class="mb-2 flex gap-2 items-center">
-        <h3 class="text-sm font-semibold flex-1">
-          {{ t('components.databaseBrowser.title') }}
-        </h3>
-        <Button
-          variant="ghost"
-          size="icon"
-          class="h-6 w-6"
-          :title="t('components.databaseBrowser.refresh')"
-          @click="refreshTree"
-        >
-          <span class="i-carbon-refresh h-3.5 w-3.5" />
-        </Button>
-      </div>
-
-      <!-- Search -->
-      <div class="relative">
-        <span class="i-carbon-search text-muted-foreground h-3.5 w-3.5 left-2 top-1/2 absolute -translate-y-1/2" />
-        <Input
-          v-model="searchQuery"
-          :placeholder="t('components.databaseBrowser.search')"
-          class="text-xs pl-7 h-7"
-        />
-      </div>
-    </div>
-
-    <!-- Database selector: always visible so the user can switch databases -->
-    <div v-if="isActiveConnectionConnected" class="px-2 py-1 border-b">
-      <Select :model-value="props.selectedDatabase" @update:model-value="(val) => emit('update:selectedDatabase', val)">
-        <SelectTrigger class="text-xs h-7">
-          <SelectValue :placeholder="t('components.databaseBrowser.selectDatabase')" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup v-if="userDatabaseNodes.length > 0">
-            <SelectLabel class="text-xs text-muted-foreground">
-              {{ t('components.databaseBrowser.userDatabases') }}
-            </SelectLabel>
-            <SelectItem
-              v-for="db in userDatabaseNodes"
-              :key="db.id"
-              :value="db.name"
-            >
-              {{ db.name }}
-            </SelectItem>
-          </SelectGroup>
-          <SelectGroup v-if="systemDatabaseNodes.length > 0">
-            <SelectLabel class="text-xs text-muted-foreground">
-              {{ t('components.databaseBrowser.systemDatabases') }}
-            </SelectLabel>
-            <SelectItem
-              v-for="db in systemDatabaseNodes"
-              :key="db.id"
-              :value="db.name"
-            >
-              {{ db.name }}
-            </SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>
-    </div>
-
-    <!-- Schema selector: only for databases with schema concept (PG, MSSQL) -->
-    <div v-if="isActiveConnectionConnected && supportsSchemas && availableSchemas.length > 0" class="px-2 py-1 border-b">
-      <Select :model-value="props.selectedSchema || availableSchemas[0]" @update:model-value="(val) => emit('update:selectedSchema', val)">
-        <SelectTrigger class="text-xs h-7">
-          <SelectValue :placeholder="t('components.databaseBrowser.selectSchema')" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem
-            v-for="schema in availableSchemas"
-            :key="schema"
-            :value="schema"
-          >
-            {{ schema }}
-          </SelectItem>
-        </SelectContent>
-      </Select>
-    </div>
-
-    <!-- Tree view -->
-    <div class="flex-1 overflow-auto">
-      <!-- TABLES Section -->
-      <div class="border-b">
-        <button
-          class="text-xs text-muted-foreground font-semibold px-2 py-1.5 flex gap-2 w-full cursor-pointer uppercase items-center hover:bg-accent/50"
-          @click="showTables = !showTables"
-        >
-          <span class="i-carbon-chevron-right h-3 w-3 transition-transform" :class="{ 'rotate-90': showTables }" />
-          {{ t('components.databaseBrowser.sections.tables') }}
-        </button>
-        <div v-if="showTables" class="py-1">
-          <div
-            v-for="table in tablesAndViews.tables"
-            :key="table.id"
-            class="tree-node text-sm px-2 py-1 flex gap-2 cursor-pointer items-center hover:bg-accent"
-            :class="{ 'bg-accent': selectedNodeId === table.id }"
-            @click="handleTableClick(table)"
-            @dblclick="handleDoubleClick(table)"
-            @contextmenu="handleContextMenu($event, table)"
-          >
-            <span class="opacity-70 flex-shrink-0" :class="getIcon('table')" />
-            <span class="truncate">{{ table.name }}</span>
-          </div>
-          <div v-if="tablesAndViews.tables.length === 0 && !databaseStore.loading" class="text-xs text-muted-foreground px-2 py-2">
-            {{ t('components.databaseBrowser.noTables') }}
-          </div>
-        </div>
-      </div>
-
-      <!-- VIEWS Section (opens listing tab) -->
-      <div class="border-b">
-        <button
-          class="text-xs text-muted-foreground font-semibold px-2 py-1.5 flex gap-2 w-full cursor-pointer uppercase items-center hover:bg-accent/50"
-          @click="toggleViews"
-        >
-          <span class="i-carbon-chevron-right h-3 w-3 transition-transform" :class="{ 'rotate-90': showViews }" />
-          <span class="flex-1">{{ t('components.databaseBrowser.sections.views') }}</span>
-          <span class="text-xs text-muted-foreground px-1.5 py-0.5 rounded bg-muted">{{ viewsCount }}</span>
-        </button>
-        <div v-if="showViews" class="py-1">
-          <div
-            v-for="view in schemaObjects?.views ?? []"
-            :key="view.name"
-            class="tree-node text-sm px-2 py-1 flex gap-2 cursor-pointer items-center hover:bg-accent"
-            @click="handleViewClick(view)"
-            @dblclick="handleOpenListingTab('VIEW')"
-          >
-            <span class="opacity-70 flex-shrink-0" :class="getIcon('view')" />
-            <span class="truncate">{{ view.name }}</span>
-          </div>
-          <div
-            v-if="(!schemaObjects?.views || schemaObjects.views.length === 0) && !databaseStore.fetching[`${props.selectedDatabase}.${props.selectedSchema}`]"
-            class="text-xs text-muted-foreground px-2 py-2"
-          >
-            {{ t('components.databaseBrowser.noViews') }}
-          </div>
-        </div>
-      </div>
-
-      <!-- PROCEDURES Section -->
-      <div class="border-b">
-        <button
-          class="text-xs text-muted-foreground font-semibold px-2 py-1.5 flex gap-2 w-full cursor-pointer uppercase items-center hover:bg-accent/50"
-          @click="toggleProcedures"
-        >
-          <span class="i-carbon-chevron-right h-3 w-3 transition-transform" :class="{ 'rotate-90': showProcedures }" />
-          <span class="flex-1">{{ t('components.databaseBrowser.sections.procedures') }}</span>
-          <span class="text-xs text-muted-foreground px-1.5 py-0.5 rounded bg-muted">{{ proceduresCount }}</span>
-        </button>
-        <div v-if="showProcedures" class="py-1">
-          <div
-            v-for="proc in schemaObjects?.procedures ?? []"
-            :key="proc.name"
-            class="tree-node text-sm px-2 py-1 flex gap-2 cursor-pointer items-center hover:bg-accent"
-            @click="handleProcedureClick(proc)"
-            @dblclick="handleOpenListingTab('PROCEDURE')"
-          >
-            <span class="opacity-70 flex-shrink-0" :class="getIcon('view')" />
-            <span class="truncate">{{ proc.name }}</span>
-          </div>
-          <div
-            v-if="(!schemaObjects?.procedures || schemaObjects.procedures.length === 0) && !databaseStore.fetching[`${props.selectedDatabase}.${props.selectedSchema}`]"
-            class="text-xs text-muted-foreground px-2 py-2"
-          >
-            {{ t('components.databaseBrowser.noProcedures') }}
-          </div>
-        </div>
-      </div>
-
-      <!-- FUNCTIONS Section -->
-      <div class="border-b">
-        <button
-          class="text-xs text-muted-foreground font-semibold px-2 py-1.5 flex gap-2 w-full cursor-pointer uppercase items-center hover:bg-accent/50"
-          @click="toggleFunctions"
-        >
-          <span class="i-carbon-chevron-right h-3 w-3 transition-transform" :class="{ 'rotate-90': showFunctions }" />
-          <span class="flex-1">{{ t('components.databaseBrowser.sections.functions') }}</span>
-          <span class="text-xs text-muted-foreground px-1.5 py-0.5 rounded bg-muted">{{ functionsCount }}</span>
-        </button>
-        <div v-if="showFunctions" class="py-1">
-          <div
-            v-for="fn in schemaObjects?.functions ?? []"
-            :key="fn.name"
-            class="tree-node text-sm px-2 py-1 flex gap-2 cursor-pointer items-center hover:bg-accent"
-            @click="handleFunctionClick(fn)"
-            @dblclick="handleOpenListingTab('FUNCTION')"
-          >
-            <span class="opacity-70 flex-shrink-0" :class="getIcon('view')" />
-            <span class="truncate">{{ fn.name }}</span>
-          </div>
-          <div
-            v-if="(!schemaObjects?.functions || schemaObjects.functions.length === 0) && !databaseStore.fetching[`${props.selectedDatabase}.${props.selectedSchema}`]"
-            class="text-xs text-muted-foreground px-2 py-2"
-          >
-            {{ t('components.databaseBrowser.noFunctions') }}
-          </div>
-        </div>
-      </div>
-
-      <!-- SAVED QUERIES Section -->
-      <div class="border-b">
-        <button
-          class="text-xs text-muted-foreground font-semibold px-2 py-1.5 flex gap-2 w-full cursor-pointer uppercase items-center hover:bg-accent/50"
-          @click="showSavedQueries = !showSavedQueries"
-        >
-          <span class="i-carbon-chevron-right h-3 w-3 transition-transform" :class="{ 'rotate-90': showSavedQueries }" />
-          {{ t('components.databaseBrowser.sections.savedQueries') }}
-          <Button
-            variant="ghost"
-            size="icon"
-            class="ml-auto h-4 w-4"
-            :title="t('components.databaseBrowser.newQuery')"
-            @click.stop="emit('createNewQuery')"
-          >
-            <span class="i-carbon-add h-3 w-3" />
-          </Button>
-        </button>
-        <div v-if="showSavedQueries" class="py-1">
-          <!-- Loading state -->
-          <div v-if="savedQueriesLoading" class="text-xs text-muted-foreground px-2 py-2 flex gap-2 items-center">
-            <span class="i-carbon-loading h-3 w-3 animate-spin" />
-            {{ t('components.databaseBrowser.loading') }}
-          </div>
-          <!-- File list -->
-          <div
-            v-for="file in filteredSavedQueries"
-            :key="file.file_path"
-            class="tree-node text-sm px-2 py-1 flex flex-col cursor-pointer hover:bg-accent"
-            :class="{ 'bg-accent': savedQueryContextMenu?.file_path === file.file_path }"
-            @click="handleSavedQueryClick(file)"
-            @contextmenu="handleSavedQueryContextMenu($event, file)"
-          >
-            <div class="flex gap-2 items-center">
-              <span class="opacity-70 flex-shrink-0" :class="getIcon('file')" />
-              <span class="truncate">{{ file.file_name }}</span>
-            </div>
-            <span class="text-xs text-muted-foreground pl-[calc(16px+8px)] truncate">{{ file.folder }}</span>
-          </div>
-          <!-- Empty state -->
-          <div v-if="filteredSavedQueries.length === 0 && !savedQueriesLoading" class="text-xs text-muted-foreground px-2 py-2">
-            {{ t('components.databaseBrowser.noSavedQueries') }}
-          </div>
-        </div>
-      </div>
-
-      <!-- Loading state -->
-      <div v-if="databaseStore.loading" class="text-sm text-muted-foreground py-4 text-center">
-        <span class="i-carbon-loading mx-auto mb-2 h-5 w-5 block animate-spin" />
-        <p>{{ t('components.databaseBrowser.loading') }}</p>
-      </div>
-    </div>
-
-    <!-- Context Menu -->
-    <div
-      v-if="showContextMenu"
-      class="text-popover-foreground border rounded-md bg-popover w-48 shadow-md fixed z-50"
-      :style="{ left: `${contextMenuPosition.x}px`, top: `${contextMenuPosition.y}px` }"
-    >
-      <div class="p-1">
-        <div
-          v-if="contextMenuNode && (contextMenuNode.type === 'table' || contextMenuNode.type === 'view')"
-          class="text-sm px-2 py-1.5 rounded-sm flex cursor-pointer items-center hover:text-accent-foreground hover:bg-accent"
-          @click="handleContextAction('selectTopN')"
-        >
-          <span class="i-carbon-arrow-down mr-2 h-3.5 w-3.5" />
-          {{ t('components.databaseBrowser.contextMenu.selectTopN') }}
-        </div>
-        <div
-          v-if="contextMenuNode && (contextMenuNode.type === 'table' || contextMenuNode.type === 'view')"
-          class="text-sm px-2 py-1.5 rounded-sm flex cursor-pointer items-center hover:text-accent-foreground hover:bg-accent"
-          @click="handleContextAction('viewStructure')"
-        >
-          <span class="i-carbon-table mr-2 h-3.5 w-3.5" />
-          {{ t('components.databaseBrowser.contextMenu.viewStructure') }}
-        </div>
-        <div
-          v-if="contextMenuNode && (contextMenuNode.type === 'table' || contextMenuNode.type === 'view')"
-          class="text-sm px-2 py-1.5 rounded-sm flex cursor-pointer items-center hover:text-accent-foreground hover:bg-accent"
-          @click="handleContextAction('createScript')"
-        >
-          <span class="i-carbon-code mr-2 h-3.5 w-3.5" />
-          {{ t('components.databaseBrowser.contextMenu.createScript') }}
-        </div>
-        <div
-          v-if="contextMenuNode && (contextMenuNode.type === 'table' || contextMenuNode.type === 'view')"
-          class="my-1 bg-border h-px"
-        />
-        <div
-          v-if="contextMenuNode && (contextMenuNode.type === 'schema' || contextMenuNode.type === 'database' || contextMenuNode.type === 'table' || contextMenuNode.type === 'view')"
-          class="text-sm px-2 py-1.5 rounded-sm flex cursor-pointer items-center hover:text-accent-foreground hover:bg-accent"
-          @click="handleContextAction('showErDiagram')"
-        >
-          <span class="i-carbon-diagram mr-2 h-3.5 w-3.5" />
-          {{ t('components.databaseBrowser.contextMenu.showErDiagram') }}
-        </div>
-        <div
-          v-if="contextMenuNode && (contextMenuNode.type === 'table' || contextMenuNode.type === 'view')"
-          class="text-sm px-2 py-1.5 rounded-sm flex cursor-pointer items-center hover:text-accent-foreground hover:bg-accent"
-          @click="handleContextAction('exportData')"
-        >
-          <span class="i-carbon-download mr-2 h-3.5 w-3.5" />
-          {{ t('components.databaseBrowser.contextMenu.exportData') }}
-        </div>
-        <div class="my-1 bg-border h-px" />
-        <div
-          class="text-sm text-destructive px-2 py-1.5 rounded-sm flex cursor-pointer items-center hover:text-destructive-foreground hover:bg-destructive/10"
-          @click="handleContextAction('dropTable')"
-        >
-          <span class="i-carbon-trash-can mr-2 shrink-0 h-3.5 w-3.5" />
-          {{ t('components.databaseBrowser.contextMenu.dropTable') }}
-        </div>
-        <div
-          class="text-sm text-destructive px-2 py-1.5 rounded-sm flex cursor-pointer items-center hover:text-destructive-foreground hover:bg-destructive/10"
-          @click="handleContextAction('truncateTable')"
-        >
-          <span class="i-carbon-clean mr-2 shrink-0 h-3.5 w-3.5" />
-          {{ t('components.databaseBrowser.contextMenu.truncateTable') }}
-        </div>
-      </div>
-    </div>
-
-    <!-- Saved Query Context Menu -->
-    <div
-      v-if="showSavedQueryContextMenu"
-      class="text-popover-foreground border rounded-md bg-popover w-48 shadow-md fixed z-50"
-      :style="{ left: `${savedQueryContextMenuPosition.x}px`, top: `${savedQueryContextMenuPosition.y}px` }"
-    >
-      <div class="p-1">
-        <div
-          class="text-sm px-2 py-1.5 rounded-sm flex cursor-pointer items-center hover:text-accent-foreground hover:bg-accent"
-          @click="handleSavedQueryOpen"
-        >
-          <span class="i-carbon-folder-open mr-2 h-3.5 w-3.5" />
-          {{ t('components.databaseBrowser.savedQueryActions.open') }}
-        </div>
-        <div class="my-1 bg-border h-px" />
-        <div
-          class="text-sm px-2 py-1.5 rounded-sm flex cursor-pointer items-center hover:text-accent-foreground hover:bg-accent"
-          @click="handleSavedQueryReveal"
-        >
-          <span class="i-carbon-folder mr-2 h-3.5 w-3.5" />
-          {{ t('components.databaseBrowser.savedQueryActions.reveal') }}
-        </div>
-        <div
-          class="text-sm px-2 py-1.5 rounded-sm flex cursor-pointer items-center hover:text-accent-foreground hover:bg-accent"
-          @click="handleSavedQueryDelete"
-        >
-          <span class="i-carbon-trash-can mr-2 h-3.5 w-3.5" />
-          {{ t('components.databaseBrowser.savedQueryActions.delete') }}
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.tree-node {
-  user-select: none;
-}
-</style>
diff --git a/src/components/database-browser/ListingTab.vue b/src/components/database-browser/ListingTab.vue
index eb508a7..e5b656b 100644
--- a/src/components/database-browser/ListingTab.vue
+++ b/src/components/database-browser/ListingTab.vue
@@ -75,7 +75,7 @@ async function openDdlModal(obj: ObjectInfo) {
       props.database,
       props.schema,
       obj.name,
-      props.type,
+      obj.object_type,
     )
     ddlContent.value = ddl
   }
@@ -108,7 +108,7 @@ async function executeDrop() {
       props.database,
       props.schema,
       dropTarget.value.name,
-      props.type,
+      dropTarget.value.object_type,
     )
     toast.success(`${dropTarget.value.name} dropped`)
     dropDialogOpen.value = false
@@ -146,7 +146,7 @@ async function executeRename() {
       props.database,
       props.schema,
       renameTarget.value.name,
-      props.type,
+      renameTarget.value.object_type,
       newName.value.trim(),
     )
     toast.success(`${renameTarget.value.name} → ${newName.value.trim()}`)
@@ -203,7 +203,7 @@ async function copyDdlContext() {
       props.database,
       props.schema,
       contextMenuTarget.value.name,
-      props.type,
+      contextMenuTarget.value.object_type,
     )
     await navigator.clipboard.writeText(ddl)
     toast.success(t('common.copied'))
diff --git a/src/components/database-browser/index.ts b/src/components/database-browser/index.ts
index af27b8a..225f005 100644
--- a/src/components/database-browser/index.ts
+++ b/src/components/database-browser/index.ts
@@ -1,4 +1,3 @@
-export { default as DatabaseBrowser } from './DatabaseBrowser.vue'
 export { default as DataTableView } from './DataTableView.vue'
 export { default as DbTypeIcon } from './DbTypeIcon.vue'
 export { default as QueryResultPanel } from './QueryResultPanel.vue'
diff --git a/src/components/sidebar/ChangeConnectionDialog.vue b/src/components/sidebar/ChangeConnectionDialog.vue
new file mode 100644
index 0000000..cfaab96
--- /dev/null
+++ b/src/components/sidebar/ChangeConnectionDialog.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { useConnectionStore } from '@/store'
+
+type Props = {
+  open: boolean
+  currentConnectionId: string | null
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  (e: 'update:open', value: boolean): void
+  (e: 'confirm', connectionId: string | null, connectionName: string | null): void
+}>()
+
+const { t } = useI18n()
+const connectionStore = useConnectionStore()
+const selectedId = ref<string>('')
+
+watch(() => props.open, (open) => {
+  if (open) {
+    selectedId.value = props.currentConnectionId ?? ''
+  }
+})
+
+const connections = () => connectionStore.connections
+
+function handleConfirm() {
+  if (selectedId.value === '') {
+    emit('confirm', null, null)
+  }
+  else {
+    const conn = connectionStore.getConnectionById(selectedId.value)
+    emit('confirm', selectedId.value, conn?.name ?? null)
+  }
+}
+</script>
+
+<template>
+  <Dialog :open="open" @update:open="(v: boolean) => emit('update:open', v)">
+    <DialogContent class="sm:max-w-[400px]">
+      <DialogHeader>
+        <DialogTitle>{{ t('sidebar.savedQueries.connectionDialog.title') }}</DialogTitle>
+        <DialogDescription>{{ t('sidebar.savedQueries.connectionDialog.label') }}</DialogDescription>
+      </DialogHeader>
+      <Select v-model="selectedId">
+        <SelectTrigger class="text-xs h-8">
+          <SelectValue :placeholder="t('sidebar.savedQueries.connectionDialog.label')" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="">
+            {{ t('sidebar.savedQueries.connectionDialog.none') }}
+          </SelectItem>
+          <SelectItem
+            v-for="conn in connections()"
+            :key="conn.id"
+            :value="conn.id!"
+            class="text-xs"
+          >
+            {{ conn.name }}
+          </SelectItem>
+        </SelectContent>
+      </Select>
+      <DialogFooter>
+        <Button variant="outline" size="sm" @click="emit('update:open', false)">
+          {{ t('sidebar.savedQueries.connectionDialog.cancel') }}
+        </Button>
+        <Button size="sm" @click="handleConfirm">
+          {{ t('sidebar.savedQueries.connectionDialog.confirm') }}
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/src/components/sidebar/ConnectionSelector.vue b/src/components/sidebar/ConnectionSelector.vue
new file mode 100644
index 0000000..7a63ef2
--- /dev/null
+++ b/src/components/sidebar/ConnectionSelector.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import type { ComboboxOption } from '@/components/ui/combobox'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import DbTypeIcon from '@/components/database-browser/DbTypeIcon.vue'
+import { SearchableSelect } from '@/components/ui/combobox'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+import { ConnectionStatus, DatabaseType, useConnectionStore } from '@/store'
+
+type Props = {
+  modelValue: string | null
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string | null): void
+}>()
+
+const { t } = useI18n()
+const connectionStore = useConnectionStore()
+
+const options = computed<ComboboxOption[]>(() => {
+  const seen = new Set<string>()
+  return connectionStore.connections
+    .filter((conn) => {
+      if (!conn.id || seen.has(conn.name))
+        return false
+      seen.add(conn.name)
+      return true
+    })
+    .map(conn => ({
+      label: conn.name,
+      value: conn.id!,
+    }))
+})
+
+const selectedConnection = computed(() =>
+  props.modelValue ? connectionStore.getConnectionById(props.modelValue) : null,
+)
+
+const status = computed(() => {
+  if (!props.modelValue)
+    return ConnectionStatus.DISCONNECTED
+  return connectionStore.getConnectionStatus(props.modelValue)
+})
+
+type StatusInfo = { dotClass: string, tooltipKey: string }
+
+const statusInfo = computed<StatusInfo>(() => {
+  switch (status.value) {
+    case ConnectionStatus.CONNECTED:
+      return { dotClass: 'i-carbon-circle-filled text-green-500', tooltipKey: 'sidebar.connection.connected' }
+    case ConnectionStatus.ERROR:
+      return { dotClass: 'i-carbon-circle-filled text-amber-500', tooltipKey: 'sidebar.connection.lost' }
+    case ConnectionStatus.CONNECTING:
+      return { dotClass: 'i-carbon-circle-filled text-amber-500 animate-pulse', tooltipKey: 'sidebar.connection.connecting' }
+    default:
+      return { dotClass: 'i-carbon-circle-filled text-muted-foreground/40', tooltipKey: 'sidebar.connection.disconnected' }
+  }
+})
+
+function handleSelect(value: string) {
+  emit('update:modelValue', value || null)
+}
+</script>
+
+<template>
+  <div class="p-2 border-b flex gap-1.5 items-center">
+    <SearchableSelect
+      :model-value="props.modelValue || ''"
+      :options="options"
+      :search-threshold="1"
+      :placeholder="t('sidebar.connection.placeholder')"
+      :search-placeholder="t('sidebar.search')"
+      class="text-xs flex-1 h-8"
+      @update:model-value="handleSelect"
+    >
+      <template #selected-prepend>
+        <DbTypeIcon v-if="selectedConnection" :type="selectedConnection.type" :size="14" class="mr-1.5 shrink-0" />
+      </template>
+      <template #option="{ option }">
+        <div class="flex gap-1.5 w-full items-center">
+          <DbTypeIcon :type="connectionStore.getConnectionById(option.value)?.type ?? DatabaseType.POSTGRESQL" :size="14" class="shrink-0" />
+          <span class="text-left flex-1 truncate">{{ option.label }}</span>
+          <span
+            v-if="connectionStore.getConnectionStatus(option.value) === ConnectionStatus.CONNECTED"
+            class="rounded-full bg-green-500 shrink-0 h-2 w-2"
+          />
+        </div>
+      </template>
+    </SearchableSelect>
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger as-child>
+          <span class="shrink-0 h-3.5 w-3.5 cursor-help" :class="[statusInfo.dotClass]" />
+        </TooltipTrigger>
+        <TooltipContent side="right">
+          {{ t(statusInfo.tooltipKey) }}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  </div>
+</template>
diff --git a/src/components/sidebar/DatabaseSelectorRow.vue b/src/components/sidebar/DatabaseSelectorRow.vue
new file mode 100644
index 0000000..8dd9869
--- /dev/null
+++ b/src/components/sidebar/DatabaseSelectorRow.vue
@@ -0,0 +1,211 @@
+<script setup lang="ts">
+import type { DbCapabilities } from './dbCapabilities'
+import type { ComboboxOption } from '@/components/ui/combobox'
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { Button } from '@/components/ui/button'
+import { SearchableSelect } from '@/components/ui/combobox'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { DatabaseType, useConnectionStore, useDatabaseStore } from '@/store'
+import { getDbCapabilities } from './dbCapabilities'
+
+type Props = {
+  connectionId: string | null
+  modelValue: string | null
+  loading?: boolean
+}
+
+type ActionKind
+  = | 'newDatabase'
+    | 'newSchema'
+    | 'newTable'
+    | 'newView'
+    | 'newFunction'
+    | 'newProcedure'
+    | 'backupDatabase'
+    | 'exportDatabase'
+    | 'dropDatabase'
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string | null): void
+  (e: 'refresh'): void
+  (e: 'action', kind: ActionKind): void
+}>()
+
+const { t } = useI18n()
+const connectionStore = useConnectionStore()
+const databaseStore = useDatabaseStore()
+
+const activeConnection = computed(() =>
+  props.connectionId ? connectionStore.getConnectionById(props.connectionId) : null,
+)
+
+const allDatabases = computed(() => {
+  if (!props.connectionId)
+    return []
+  return databaseStore.metadata[props.connectionId]?.databases ?? []
+})
+
+const userDatabases = computed(() => allDatabases.value.filter(db => !db.is_system))
+const systemDatabases = computed(() => allDatabases.value.filter(db => db.is_system))
+
+const options = computed<ComboboxOption[]>(() => {
+  const seen = new Set<string>()
+  const allDbs = [
+    { label: t('sidebar.database.placeholder'), value: '' },
+    ...userDatabases.value
+      .filter((db) => {
+        if (seen.has(db.name))
+          return false
+        seen.add(db.name)
+        return true
+      })
+      .map(db => ({ label: db.name, value: db.name })),
+    ...systemDatabases.value
+      .filter((db) => {
+        if (seen.has(db.name))
+          return false
+        seen.add(db.name)
+        return true
+      })
+      .map(db => ({ label: db.name, value: db.name, group: t('components.databaseBrowser.systemDatabases') })),
+  ]
+  return allDbs
+})
+
+const capabilities = computed<DbCapabilities>(() => {
+  if (!activeConnection.value)
+    return getDbCapabilities(DatabaseType.POSTGRESQL)
+  return getDbCapabilities(activeConnection.value.type)
+})
+
+function handleSelect(value: string) {
+  emit('update:modelValue', value === '' ? null : value)
+}
+
+function handleAction(kind: ActionKind) {
+  emit('action', kind)
+}
+
+// Spin state with minimum duration — prevents icon from flickering
+// when loading toggles faster than the animation can play out
+const isSpinning = ref(false)
+let spinTimer: ReturnType<typeof setTimeout> | null = null
+
+watch(() => props.loading, (val) => {
+  if (val) {
+    if (spinTimer)
+      clearTimeout(spinTimer)
+    isSpinning.value = true
+  }
+  else {
+    spinTimer = setTimeout(() => {
+      isSpinning.value = false
+      spinTimer = null
+    }, 500)
+  }
+})
+
+// Fetch databases when connectionId changes
+watch(() => props.connectionId, async (connId) => {
+  if (!connId)
+    return
+  const conn = connectionStore.getConnectionById(connId)
+  if (!conn?.isConnected)
+    return
+  const meta = databaseStore.metadata[connId]
+  if (!meta?.databases || meta.databases.length === 0)
+    await databaseStore.fetchDatabases(connId)
+}, { immediate: true })
+</script>
+
+<template>
+  <div v-if="props.connectionId" class="px-2 py-1.5 border-b flex gap-1 items-center">
+    <SearchableSelect
+      :model-value="props.modelValue || ''"
+      :options="options"
+      :search-threshold="1"
+      :placeholder="t('sidebar.database.placeholder')"
+      :search-placeholder="t('sidebar.search')"
+      :loading="props.loading"
+      class="text-xs flex-1 h-8"
+      @update:model-value="handleSelect"
+    >
+      <template #selected-prepend>
+        <span class="i-carbon-data-base text-yellow-500 mr-1.5 shrink-0 h-3.5 w-3.5" />
+      </template>
+      <template #option="{ option }">
+        <div class="flex gap-1.5 w-full items-center">
+          <span class="i-carbon-data-base text-yellow-500 shrink-0 h-3.5 w-3.5" />
+          <span class="text-left flex-1 truncate">{{ option.label }}</span>
+        </div>
+      </template>
+    </SearchableSelect>
+
+    <Button
+      variant="ghost"
+      size="icon"
+      class="shrink-0 h-7 w-7"
+      :disabled="props.loading"
+      :title="t('sidebar.database.refreshTooltip')"
+      @click="emit('refresh')"
+    >
+      <span class="i-carbon-renew h-3.5 w-3.5" :class="{ 'animate-spin': isSpinning }" />
+    </Button>
+
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <Button variant="ghost" size="icon" class="shrink-0 h-7 w-7" :title="t('sidebar.actionMenu.label')">
+          <span class="i-carbon-overflow-menu-horizontal h-3.5 w-3.5" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <div class="text-xs font-semibold px-2 py-1.5">
+          {{ t('sidebar.actionMenu.label') }}
+        </div>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem v-if="capabilities.newDatabase" @click="handleAction('newDatabase')">
+          <span class="i-carbon-data-base mr-2 h-3.5 w-3.5" /> {{ t('sidebar.actionMenu.newDatabase') }}
+        </DropdownMenuItem>
+        <DropdownMenuItem v-if="capabilities.newSchema" @click="handleAction('newSchema')">
+          <span class="i-carbon-folder-open mr-2 h-3.5 w-3.5" /> {{ t('sidebar.actionMenu.newSchema') }}
+        </DropdownMenuItem>
+        <DropdownMenuItem @click="handleAction('newTable')">
+          <span class="i-carbon-table mr-2 h-3.5 w-3.5" /> {{ t('sidebar.actionMenu.newTable') }}
+        </DropdownMenuItem>
+        <DropdownMenuItem v-if="capabilities.views" @click="handleAction('newView')">
+          <span class="i-carbon-view mr-2 h-3.5 w-3.5" /> {{ t('sidebar.actionMenu.newView') }}
+        </DropdownMenuItem>
+        <DropdownMenuItem v-if="capabilities.functions" @click="handleAction('newFunction')">
+          <span class="i-carbon-function-math mr-2 h-3.5 w-3.5" /> {{ t('sidebar.actionMenu.newFunction') }}
+        </DropdownMenuItem>
+        <DropdownMenuItem v-if="capabilities.procedures" @click="handleAction('newProcedure')">
+          <span class="i-carbon-document mr-2 h-3.5 w-3.5" /> {{ t('sidebar.actionMenu.newProcedure') }}
+        </DropdownMenuItem>
+        <DropdownMenuSeparator v-if="capabilities.backup || capabilities.export" />
+        <DropdownMenuItem v-if="capabilities.backup" @click="handleAction('backupDatabase')">
+          <span class="i-carbon-download mr-2 h-3.5 w-3.5" /> {{ t('sidebar.actionMenu.backupDatabase') }}
+        </DropdownMenuItem>
+        <DropdownMenuItem v-if="capabilities.export" @click="handleAction('exportDatabase')">
+          <span class="i-carbon-export mr-2 h-3.5 w-3.5" /> {{ t('sidebar.actionMenu.exportDatabase') }}
+        </DropdownMenuItem>
+        <DropdownMenuSeparator v-if="capabilities.dropDatabase" />
+        <DropdownMenuItem
+          v-if="capabilities.dropDatabase"
+          class="text-destructive focus:text-destructive"
+          @click="handleAction('dropDatabase')"
+        >
+          <span class="i-carbon-trash-can mr-2 h-3.5 w-3.5" /> {{ t('sidebar.actionMenu.dropDatabase') }}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>
diff --git a/src/components/sidebar/DeleteQueryDialog.vue b/src/components/sidebar/DeleteQueryDialog.vue
new file mode 100644
index 0000000..8a160e3
--- /dev/null
+++ b/src/components/sidebar/DeleteQueryDialog.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog'
+
+type Props = {
+  open: boolean
+  queryName: string | null
+  targetConnection: string | null
+  createdAt: string | null
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  (e: 'update:open', value: boolean): void
+  (e: 'confirm'): void
+}>()
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <AlertDialog :open="open" @update:open="(v: boolean) => emit('update:open', v)">
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle class="flex gap-2 items-center">
+          <span class="i-carbon-trash-can text-destructive h-4 w-4" />
+          {{ t('sidebar.savedQueries.delete.title') }}
+        </AlertDialogTitle>
+        <AlertDialogDescription>
+          {{ t('sidebar.savedQueries.delete.description', { name: queryName }) }}
+          <div v-if="targetConnection || createdAt" class="text-xs text-muted-foreground mt-3 space-y-1">
+            <div v-if="targetConnection" class="flex gap-1.5 items-center">
+              <span class="i-carbon-data-base h-3 w-3" />
+              <span>{{ t('sidebar.savedQueries.delete.target') }}: {{ targetConnection }}</span>
+            </div>
+            <div v-if="createdAt" class="flex gap-1.5 items-center">
+              <span class="i-carbon-calendar h-3 w-3" />
+              <span>{{ t('sidebar.savedQueries.delete.created') }}: {{ createdAt }}</span>
+            </div>
+          </div>
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancel>{{ t('sidebar.savedQueries.delete.cancel') }}</AlertDialogCancel>
+        <AlertDialogAction class="text-destructive-foreground bg-destructive hover:bg-destructive/90" @click="emit('confirm')">
+          {{ t('sidebar.savedQueries.delete.confirm') }}
+        </AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+</template>
diff --git a/src/components/sidebar/RenameQueryDialog.vue b/src/components/sidebar/RenameQueryDialog.vue
new file mode 100644
index 0000000..652bcb4
--- /dev/null
+++ b/src/components/sidebar/RenameQueryDialog.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+
+type Props = {
+  open: boolean
+  currentName: string | null
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  (e: 'update:open', value: boolean): void
+  (e: 'confirm', newName: string): void
+}>()
+
+const { t } = useI18n()
+const newName = ref('')
+
+watch(() => props.open, (open) => {
+  if (open && props.currentName) {
+    newName.value = props.currentName.replace(/\.sql$/i, '')
+  }
+})
+
+function handleConfirm() {
+  const trimmed = newName.value.trim()
+  if (trimmed) {
+    const withExt = trimmed.endsWith('.sql') ? trimmed : `${trimmed}.sql`
+    emit('confirm', withExt)
+  }
+}
+</script>
+
+<template>
+  <Dialog :open="open" @update:open="(v: boolean) => emit('update:open', v)">
+    <DialogContent class="sm:max-w-[400px]">
+      <DialogHeader>
+        <DialogTitle>{{ t('sidebar.savedQueries.renameDialog.title') }}</DialogTitle>
+        <DialogDescription>{{ t('sidebar.savedQueries.renameDialog.label') }}</DialogDescription>
+      </DialogHeader>
+      <Input
+        v-model="newName"
+        :placeholder="t('sidebar.savedQueries.renameDialog.placeholder')"
+        class="text-xs"
+        @keydown.enter="handleConfirm"
+      />
+      <DialogFooter>
+        <Button variant="outline" size="sm" @click="emit('update:open', false)">
+          {{ t('sidebar.savedQueries.renameDialog.cancel') }}
+        </Button>
+        <Button size="sm" :disabled="!newName.trim()" @click="handleConfirm">
+          {{ t('sidebar.savedQueries.renameDialog.confirm') }}
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/src/components/sidebar/SavedQueriesPanel.vue b/src/components/sidebar/SavedQueriesPanel.vue
new file mode 100644
index 0000000..57aa4ea
--- /dev/null
+++ b/src/components/sidebar/SavedQueriesPanel.vue
@@ -0,0 +1,286 @@
+<script setup lang="ts">
+import type { SavedQueryInfo, SavedQueryMetadata } from '@/datasources/fileApi'
+import { revealItemInDir } from '@tauri-apps/plugin-opener'
+import { computed, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { Button } from '@/components/ui/button'
+import { toast } from '@/composables/useNotifications'
+import { deleteQueryFile, listSavedQueryFiles, loadQueryFile, readSavedQueriesMetadata, saveQueryFile, saveQueryMetadata, writeSavedQueriesMetadata } from '@/datasources'
+import ChangeConnectionDialog from './ChangeConnectionDialog.vue'
+import DeleteQueryDialog from './DeleteQueryDialog.vue'
+import RenameQueryDialog from './RenameQueryDialog.vue'
+import SavedQueryItem from './SavedQueryItem.vue'
+
+type Props = {
+  collapsed: boolean
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  (e: 'update:collapsed', value: boolean): void
+  (e: 'open', filePath: string): void
+  (e: 'newQuery'): void
+}>()
+
+const { t } = useI18n()
+
+const files = ref<SavedQueryInfo[]>([])
+const metadataMap = ref<Record<string, SavedQueryMetadata>>({})
+const loading = ref(false)
+
+// Dialog state
+const deleteTarget = ref<{ query: SavedQueryInfo, metadata: SavedQueryMetadata | null } | null>(null)
+const showDeleteDialog = ref(false)
+const renameTarget = ref<SavedQueryInfo | null>(null)
+const showRenameDialog = ref(false)
+const changeConnTarget = ref<SavedQueryInfo | null>(null)
+const showChangeConnDialog = ref(false)
+
+const isCollapsed = computed({
+  get: () => props.collapsed,
+  set: (val: boolean) => emit('update:collapsed', val),
+})
+
+const sortedFiles = computed(() =>
+  files.value
+    .filter(f => metadataMap.value[f.file_path])
+    .sort((a, b) => (metadataMap.value[b.file_path]?.modifiedAt ?? 0) - (metadataMap.value[a.file_path]?.modifiedAt ?? 0)),
+)
+
+async function fetchFiles() {
+  loading.value = true
+  try {
+    const [fileList, metadata] = await Promise.all([
+      listSavedQueryFiles(),
+      readSavedQueriesMetadata(),
+    ])
+    files.value = fileList
+    metadataMap.value = metadata.queries
+  }
+  catch (error) {
+    console.error('Failed to fetch saved queries:', error)
+    files.value = []
+    metadataMap.value = {}
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+function getMetadata(filePath: string): SavedQueryMetadata | null {
+  return metadataMap.value[filePath] ?? null
+}
+
+async function writeMetadata() {
+  try {
+    await writeSavedQueriesMetadata({ queries: metadataMap.value })
+  }
+  catch (error) {
+    console.error('Failed to write metadata:', error)
+  }
+}
+
+function toggleExpand() {
+  isCollapsed.value = !isCollapsed.value
+}
+
+watch(() => props.collapsed, async (collapsed) => {
+  if (!collapsed && files.value.length === 0) {
+    await fetchFiles()
+  }
+})
+
+// Fetch files on mount so the count badge shows immediately
+onMounted(() => {
+  if (files.value.length === 0)
+    fetchFiles()
+})
+
+function handleItemAction(query: SavedQueryInfo, kind: string) {
+  switch (kind) {
+    case 'open':
+      emit('open', query.file_path)
+      break
+    case 'rename':
+      renameTarget.value = query
+      showRenameDialog.value = true
+      break
+    case 'changeConnection':
+      changeConnTarget.value = query
+      showChangeConnDialog.value = true
+      break
+    case 'reveal':
+      handleReveal(query)
+      break
+    case 'delete':
+      deleteTarget.value = { query, metadata: getMetadata(query.file_path) }
+      showDeleteDialog.value = true
+      break
+  }
+}
+
+async function handleReveal(query: SavedQueryInfo) {
+  try {
+    await revealItemInDir(query.file_path)
+  }
+  catch (error) {
+    console.error('Failed to reveal file:', error)
+  }
+}
+
+async function handleDeleteConfirm() {
+  if (!deleteTarget.value)
+    return
+  const { query } = deleteTarget.value
+  try {
+    await deleteQueryFile(query.file_path)
+    files.value = files.value.filter(f => f.file_path !== query.file_path)
+    delete metadataMap.value[query.file_path]
+    await writeMetadata()
+    toast.success(t('sidebar.savedQueries.actions.delete'))
+  }
+  catch (error) {
+    toast.error(`Failed to delete: ${error instanceof Error ? error.message : String(error)}`)
+  }
+  finally {
+    showDeleteDialog.value = false
+    deleteTarget.value = null
+  }
+}
+
+async function handleRenameConfirm(newName: string) {
+  if (!renameTarget.value)
+    return
+  const oldPath = renameTarget.value.file_path
+  const dir = oldPath.substring(0, Math.max(oldPath.lastIndexOf('/'), oldPath.lastIndexOf('\\')))
+  const newPath = `${dir}/${newName}`
+  try {
+    const loadResult = await loadQueryFile(oldPath)
+    if (loadResult.success && loadResult.content) {
+      await saveQueryFile(loadResult.content, newPath)
+      await deleteQueryFile(oldPath)
+      // Update metadata key
+      const meta = metadataMap.value[oldPath]
+      if (meta) {
+        metadataMap.value[newPath] = { ...meta }
+        delete metadataMap.value[oldPath]
+        await writeMetadata()
+      }
+      await fetchFiles()
+      toast.success(t('sidebar.savedQueries.renameDialog.confirm'))
+    }
+  }
+  catch (error) {
+    toast.error(`Failed to rename: ${error instanceof Error ? error.message : String(error)}`)
+  }
+  finally {
+    showRenameDialog.value = false
+    renameTarget.value = null
+  }
+}
+
+async function handleChangeConnectionConfirm(connectionId: string | null, connectionName: string | null) {
+  if (!changeConnTarget.value)
+    return
+  const filePath = changeConnTarget.value.file_path
+  const existing = metadataMap.value[filePath] ?? {
+    connectionId: null,
+    connectionName: null,
+    createdAt: changeConnTarget.value.modified_at,
+    modifiedAt: changeConnTarget.value.modified_at,
+  }
+  const now = Math.floor(Date.now() / 1000)
+  const updatedMetadata = {
+    ...existing,
+    connectionId,
+    connectionName,
+    modifiedAt: now,
+  }
+  metadataMap.value[filePath] = updatedMetadata
+  await saveQueryMetadata(filePath, updatedMetadata)
+  showChangeConnDialog.value = false
+  changeConnTarget.value = null
+}
+
+const deleteDialogCreatedAt = computed(() => {
+  if (!deleteTarget.value?.metadata?.createdAt)
+    return null
+  const ts = deleteTarget.value.metadata.createdAt
+  return new Date(ts * 1000).toLocaleDateString()
+})
+
+defineExpose({ refresh: fetchFiles })
+</script>
+
+<template>
+  <div class="flex flex-col h-full">
+    <!-- Header -->
+    <div class="px-2 py-1.5 border-b flex shrink-0 gap-2 items-center">
+      <span
+        class="i-carbon-chevron-right shrink-0 h-3 w-3 cursor-pointer transition-transform"
+        :class="{ 'rotate-90': !isCollapsed }"
+        @click="toggleExpand"
+      />
+      <span class="i-carbon-document-blank text-muted-foreground shrink-0 h-3.5 w-3.5" />
+      <span class="text-xs text-muted-foreground font-semibold flex-1 cursor-pointer truncate uppercase" @click="toggleExpand">
+        {{ t('sidebar.savedQueries.header') }}
+      </span>
+      <span v-if="files.length > 0" class="text-xs text-muted-foreground px-1.5 py-0.5 rounded bg-muted">
+        {{ files.length }}
+      </span>
+      <Button
+        variant="ghost"
+        size="icon"
+        class="shrink-0 h-5 w-5"
+        :title="t('sidebar.savedQueries.newQuery')"
+        @click="emit('newQuery')"
+      >
+        <span class="i-carbon-add h-3 w-3" />
+      </Button>
+    </div>
+
+    <!-- Body (when expanded) -->
+    <div v-if="!isCollapsed" class="flex-1 overflow-auto">
+      <div v-if="loading" class="text-xs text-muted-foreground px-2 py-2 flex gap-2 items-center">
+        <span class="i-carbon-loading h-3 w-3 animate-spin" />
+        {{ t('sidebar.loading') }}
+      </div>
+      <template v-else>
+        <SavedQueryItem
+          v-for="file in sortedFiles"
+          :key="file.file_path"
+          :query="file"
+          :metadata="getMetadata(file.file_path)"
+          @action="(kind: string) => handleItemAction(file, kind)"
+        />
+        <div v-if="sortedFiles.length === 0" class="text-xs text-muted-foreground px-2 py-2">
+          {{ t('sidebar.savedQueries.empty') }}
+        </div>
+      </template>
+    </div>
+  </div>
+
+  <!-- Delete Dialog -->
+  <DeleteQueryDialog
+    v-model:open="showDeleteDialog"
+    :query-name="deleteTarget?.query.file_name ?? null"
+    :target-connection="deleteTarget?.metadata?.connectionName ?? null"
+    :created-at="deleteDialogCreatedAt"
+    @confirm="handleDeleteConfirm"
+  />
+
+  <!-- Rename Dialog -->
+  <RenameQueryDialog
+    v-model:open="showRenameDialog"
+    :current-name="renameTarget?.file_name ?? null"
+    @confirm="handleRenameConfirm"
+  />
+
+  <!-- Change Connection Dialog -->
+  <ChangeConnectionDialog
+    v-model:open="showChangeConnDialog"
+    :current-connection-id="changeConnTarget ? (getMetadata(changeConnTarget.file_path)?.connectionId ?? null) : null"
+    @confirm="handleChangeConnectionConfirm"
+  />
+</template>
diff --git a/src/components/sidebar/SavedQueryItem.vue b/src/components/sidebar/SavedQueryItem.vue
new file mode 100644
index 0000000..509d079
--- /dev/null
+++ b/src/components/sidebar/SavedQueryItem.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import type { SavedQueryInfo, SavedQueryMetadata } from '@/datasources/fileApi'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+
+type Props = {
+  query: SavedQueryInfo
+  metadata: SavedQueryMetadata | null
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  (e: 'action', kind: string): void
+}>()
+
+const { t } = useI18n()
+
+function formatDate(ts: number): string {
+  return new Date(ts * 1000).toLocaleDateString()
+}
+
+const createdAtText = computed(() => {
+  if (!props.metadata?.createdAt)
+    return null
+  return formatDate(props.metadata.createdAt)
+})
+
+const modifiedAtText = computed(() => {
+  if (!props.metadata?.modifiedAt)
+    return null
+  return formatDate(props.metadata.modifiedAt)
+})
+
+const connectionName = computed(() => {
+  if (!props.metadata?.connectionName)
+    return null
+  return props.metadata.connectionName
+})
+
+type ActionKind = 'open' | 'rename' | 'changeConnection' | 'reveal' | 'delete'
+
+function handleAction(kind: ActionKind) {
+  emit('action', kind)
+}
+
+function handleDblClick() {
+  emit('action', 'open')
+}
+</script>
+
+<template>
+  <div
+    class="group px-2 py-0.5 cursor-pointer hover:bg-accent/30"
+    @dblclick="handleDblClick"
+  >
+    <!-- Row 1: icon + filename + menu -->
+    <div class="flex gap-1.5 min-w-0 items-center">
+      <span class="i-carbon-document text-muted-foreground shrink-0 h-3.5 w-3.5" />
+      <span class="text-sm font-medium flex-1 min-w-0 truncate" :title="query.file_name">{{ query.file_name }}</span>
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <Button
+            variant="ghost"
+            size="icon"
+            class="opacity-0 shrink-0 h-5 w-5 group-hover:opacity-100"
+          >
+            <span class="i-carbon-overflow-menu-horizontal h-3 w-3" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem @select="handleAction('open')">
+            <span class="i-carbon-document mr-2 h-3.5 w-3.5" /> {{ t('sidebar.savedQueries.actions.open') }}
+          </DropdownMenuItem>
+          <DropdownMenuItem @select="handleAction('rename')">
+            <span class="i-carbon-edit mr-2 h-3.5 w-3.5" /> {{ t('sidebar.savedQueries.actions.rename') }}
+          </DropdownMenuItem>
+          <DropdownMenuItem @select="handleAction('changeConnection')">
+            <span class="i-carbon-data-base mr-2 h-3.5 w-3.5" /> {{ t('sidebar.savedQueries.actions.changeConnection') }}
+          </DropdownMenuItem>
+          <DropdownMenuItem @select="handleAction('reveal')">
+            <span class="i-carbon-folder-open mr-2 h-3.5 w-3.5" /> {{ t('sidebar.savedQueries.actions.reveal') }}
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem class="text-destructive" @select="handleAction('delete')">
+            <span class="i-carbon-trash-can mr-2 h-3.5 w-3.5" /> {{ t('sidebar.savedQueries.actions.delete') }}
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+
+    <!-- Row 2: dates + connection name, all truncated -->
+    <div class="text-xs text-muted-foreground/60 pl-[22px] flex gap-2 min-w-0 items-center">
+      <span v-if="createdAtText" class="flex gap-0.5 whitespace-nowrap items-center" :title="t('sidebar.savedQueries.created')">
+        <span class="i-carbon-time shrink-0 h-3 w-3" />
+        <span>{{ createdAtText }}</span>
+      </span>
+      <span v-if="modifiedAtText && modifiedAtText !== createdAtText" class="flex gap-0.5 whitespace-nowrap items-center" :title="t('sidebar.savedQueries.modified')">
+        <span class="i-carbon-edit shrink-0 h-3 w-3" />
+        <span>{{ modifiedAtText }}</span>
+      </span>
+      <span v-if="connectionName" class="flex gap-0.5 min-w-0 truncate items-center" :title="connectionName">
+        <span class="i-carbon-arrow-right shrink-0 h-2.5 w-2.5" />
+        <span class="truncate">{{ connectionName }}</span>
+      </span>
+      <span v-else class="text-muted-foreground/40 truncate italic">{{ t('sidebar.savedQueries.connectionNone') }}</span>
+    </div>
+  </div>
+</template>
diff --git a/src/components/sidebar/SchemaTree.vue b/src/components/sidebar/SchemaTree.vue
new file mode 100644
index 0000000..e9e7572
--- /dev/null
+++ b/src/components/sidebar/SchemaTree.vue
@@ -0,0 +1,715 @@
+<script setup lang="ts">
+import type { ObjectInfo } from '@/datasources/browseApi'
+import type { TableInfo } from '@/store/databaseStore'
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { Input } from '@/components/ui/input'
+import { ConnectionStatus, useConnectionStore, useDatabaseStore } from '@/store'
+import TreeGroup from './TreeGroup.vue'
+
+type Props = {
+  connectionId: string | null
+  selectedDatabase: string | null
+  selectedSchema: string | null
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  (e: 'selectTable', table: TableInfo, database: string, schema?: string): void
+  (e: 'createScript', table: TableInfo, database: string, schema?: string): void
+  (e: 'selectTopN', table: TableInfo, database: string, schema?: string, n?: number): void
+  (e: 'viewStructure', table: TableInfo, database: string, schema?: string): void
+  (e: 'exportData', table: TableInfo, database: string, schema?: string): void
+  (e: 'showErDiagram', database: string, schema?: string): void
+  (e: 'dropTable', table: TableInfo, database: string, schema?: string): void
+  (e: 'truncateTable', table: TableInfo, database: string, schema?: string): void
+  (e: 'update:selectedDatabase', database: string): void
+  (e: 'update:selectedSchema', schema: string): void
+  (e: 'openListingTab', type: string, database: string, schema?: string): void
+  (e: 'openDdlTab', name: string, type: string, database: string, schema?: string): void
+}>()
+
+const { t } = useI18n()
+const connectionStore = useConnectionStore()
+const databaseStore = useDatabaseStore()
+
+const searchQuery = ref('')
+const expandedSchemas = ref<Set<string>>(new Set())
+
+// Mode B state (all databases view)
+const expandedDatabases = ref<Set<string>>(new Set())
+const loadingDatabases = ref<Set<string>>(new Set())
+
+// Context menu
+const contextMenuTable = ref<{ table: TableInfo, database: string, schema?: string, x: number, y: number } | null>(null)
+const selectedTreeItem = ref<{ type: string, name: string, schema?: string } | null>(null)
+
+const activeConnection = computed(() =>
+  props.connectionId ? connectionStore.getConnectionById(props.connectionId) : null,
+)
+
+const isActiveConnectionConnected = computed(() =>
+  props.connectionId
+    ? connectionStore.getConnectionStatus(props.connectionId) === ConnectionStatus.CONNECTED
+    : false,
+)
+
+const supportsSchemas = computed(() => {
+  if (!props.selectedDatabase || !props.connectionId)
+    return false
+  const meta = databaseStore.metadata[props.connectionId]
+  if (!meta)
+    return false
+  const schemas = meta.schemas[props.selectedDatabase]
+  return schemas !== undefined && schemas.length > 0
+})
+
+const availableSchemas = computed<string[]>(() => {
+  if (!props.selectedDatabase || !props.connectionId || !supportsSchemas.value)
+    return []
+  return databaseStore.metadata[props.connectionId]?.schemas[props.selectedDatabase] ?? []
+})
+
+const allDatabases = computed(() => {
+  if (!props.connectionId || !databaseStore.metadata[props.connectionId])
+    return []
+  const seen = new Set<string>()
+  return databaseStore.metadata[props.connectionId].databases.filter((db) => {
+    if (seen.has(db.name))
+      return false
+    seen.add(db.name)
+    return true
+  })
+})
+
+// Per-schema tables with search filter
+function getTablesForSchema(schema: string): TableInfo[] {
+  if (!props.connectionId || !props.selectedDatabase)
+    return []
+  const key = `${props.selectedDatabase}.${schema}`
+  const allItems = databaseStore.metadata[props.connectionId]?.tables[key] ?? []
+  const tables = allItems.filter(item => item.table_type !== 'VIEW')
+  const query = searchQuery.value.toLowerCase().trim()
+  return query ? tables.filter(item => item.name.toLowerCase().includes(query)) : tables
+}
+
+// Per-schema objects (views, procedures, functions)
+function getObjectsForSchema(schema: string) {
+  if (!props.connectionId || !props.selectedDatabase)
+    return null
+  return databaseStore.getSchemaObjects(props.connectionId, props.selectedDatabase, schema)
+}
+
+// Flat tables for non-schema databases (MySQL, SQLite, etc.)
+const flatTables = computed<TableInfo[]>(() => {
+  const currentDb = props.selectedDatabase
+  if (!currentDb || !props.connectionId || !databaseStore.metadata[props.connectionId])
+    return []
+  const meta = databaseStore.metadata[props.connectionId]
+  const allItems = meta.tables[currentDb] || []
+  const tables = allItems.filter(item => item.table_type !== 'VIEW')
+  const query = searchQuery.value.toLowerCase().trim()
+  return query ? tables.filter(item => item.name.toLowerCase().includes(query)) : tables
+})
+
+// Toggle schema node (expand/collapse + lazy load tables + set selectedSchema)
+async function toggleSchema(schema: string) {
+  emit('update:selectedSchema', schema)
+
+  if (expandedSchemas.value.has(schema)) {
+    expandedSchemas.value = new Set([...expandedSchemas.value].filter(s => s !== schema))
+    return
+  }
+  expandedSchemas.value = new Set([...expandedSchemas.value, schema])
+
+  // Lazy load tables for this schema
+  if (props.connectionId && props.selectedDatabase) {
+    const key = `${props.selectedDatabase}.${schema}`
+    const meta = databaseStore.metadata[props.connectionId]
+    if (!meta?.tables[key])
+      await databaseStore.fetchTables(props.connectionId, props.selectedDatabase, schema)
+  }
+}
+
+// Group toggle handler (lazy load schema objects for views/procedures/functions)
+async function handleGroupToggle(open: boolean, schema: string) {
+  if (open && props.connectionId && props.selectedDatabase)
+    await databaseStore.fetchSchemaObjects(props.connectionId, props.selectedDatabase, schema)
+}
+
+// Table click handlers — single click selects, double click opens
+function handleTableClick(table: TableInfo, schema: string | undefined) {
+  selectedTreeItem.value = { type: 'table', name: table.name, schema }
+}
+
+function handleDoubleClick(table: TableInfo, schema: string | undefined) {
+  selectedTreeItem.value = { type: 'table', name: table.name, schema }
+  emit('selectTable', table, props.selectedDatabase!, schema)
+}
+
+function handleContextMenu(event: MouseEvent, table: TableInfo, schema: string | undefined) {
+  event.preventDefault()
+  contextMenuTable.value = { table, database: props.selectedDatabase!, schema, x: event.clientX, y: event.clientY }
+}
+
+// Context menu action handler
+type ContextAction = 'selectTopN' | 'viewStructure' | 'createScript' | 'exportData' | 'showErDiagram' | 'dropTable' | 'truncateTable'
+
+function handleContextAction(action: ContextAction) {
+  if (!contextMenuTable.value)
+    return
+  const { table, database, schema } = contextMenuTable.value
+  const handlers: Record<ContextAction, () => void> = {
+    selectTopN: () => emit('selectTopN', table, database, schema, 100),
+    viewStructure: () => emit('viewStructure', table, database, schema),
+    createScript: () => emit('createScript', table, database, schema),
+    exportData: () => emit('exportData', table, database, schema),
+    showErDiagram: () => emit('showErDiagram', database, schema),
+    dropTable: () => emit('dropTable', table, database, schema),
+    truncateTable: () => emit('truncateTable', table, database, schema),
+  }
+  handlers[action]()
+  contextMenuTable.value = null
+}
+
+// Per-schema view/procedure/function click handlers
+function handleViewClick(view: ObjectInfo, schema: string) {
+  if (props.connectionId && props.selectedDatabase)
+    emit('openDdlTab', view.name, 'VIEW', props.selectedDatabase, schema)
+}
+
+function handleProcedureClick(proc: ObjectInfo, schema: string) {
+  if (props.connectionId && props.selectedDatabase)
+    emit('openDdlTab', proc.name, 'PROCEDURE', props.selectedDatabase, schema)
+}
+
+function handleFunctionClick(fn: ObjectInfo, schema: string) {
+  if (props.connectionId && props.selectedDatabase)
+    emit('openDdlTab', fn.name, 'FUNCTION', props.selectedDatabase, schema)
+}
+
+// Mode B helpers
+function getDbSchemas(dbName: string): string[] {
+  if (!props.connectionId)
+    return []
+  const meta = databaseStore.metadata[props.connectionId]
+  if (!meta)
+    return []
+  return meta.schemas[dbName] || []
+}
+
+// For MySQL-like databases, schemas = database names → skip schema layer
+function hasRealSchemas(dbName: string): boolean {
+  const schemas = getDbSchemas(dbName)
+  if (schemas.length === 0)
+    return false
+  // If the only schema is the db name itself, it's not a real schema hierarchy
+  return schemas.some(s => s !== dbName)
+}
+
+function getTablesForDbSchema(dbName: string, schema?: string): TableInfo[] {
+  if (!props.connectionId)
+    return []
+  const meta = databaseStore.metadata[props.connectionId]
+  if (!meta)
+    return []
+  const key = schema ? `${dbName}.${schema}` : dbName
+  return (meta.tables[key] || []).filter(item => item.table_type !== 'VIEW')
+}
+
+function getObjectsForDbSchema(dbName: string, schema: string) {
+  if (!props.connectionId)
+    return null
+  return databaseStore.getSchemaObjects(props.connectionId, dbName, schema)
+}
+
+async function handleGroupToggleForDb(open: boolean, dbName: string, schema?: string) {
+  if (open && props.connectionId && schema)
+    await databaseStore.fetchSchemaObjects(props.connectionId, dbName, schema)
+}
+
+// Mode B: expand/collapse database node (ONLY expand/collapse, do NOT select database)
+async function toggleDatabaseNode(dbName: string) {
+  if (expandedDatabases.value.has(dbName)) {
+    expandedDatabases.value = new Set([...expandedDatabases.value].filter(n => n !== dbName))
+    return
+  }
+  expandedDatabases.value = new Set([...expandedDatabases.value, dbName])
+  if (!props.connectionId)
+    return
+  const connId = props.connectionId
+  loadingDatabases.value = new Set([...loadingDatabases.value, dbName])
+  try {
+    await databaseStore.fetchSchemas(connId, dbName)
+    const meta = databaseStore.metadata[connId]
+    const schemas = meta?.schemas[dbName] || []
+    // For MySQL-like DBs, schemas mirror db names — fetch tables without schema
+    // so they're stored at meta.tables[dbName] and match the v-else template read.
+    const hasReal = schemas.some(s => s !== dbName)
+    if (hasReal)
+      await Promise.all(schemas.map(s => databaseStore.fetchTables(connId, dbName, s)))
+    else
+      await databaseStore.fetchTables(connId, dbName)
+  }
+  finally {
+    loadingDatabases.value = new Set([...loadingDatabases.value].filter(n => n !== dbName))
+  }
+}
+
+// Watchers — fetch databases but do NOT auto-select; user picks from selector
+watch(() => props.connectionId, async (newId) => {
+  if (!newId)
+    return
+  const conn = connectionStore.getConnectionById(newId)
+  if (!conn?.isConnected)
+    return
+  await databaseStore.fetchDatabases(newId)
+}, { immediate: true })
+
+watch(() => activeConnection.value?.isConnected, async (isConnected) => {
+  if (!isConnected || !props.connectionId)
+    return
+  await databaseStore.fetchDatabases(props.connectionId)
+})
+
+watch(() => props.selectedDatabase, async (newDb, oldDb) => {
+  const connId = props.connectionId
+  if (!newDb || !connId || newDb === oldDb)
+    return
+  // Reset expanded schemas and table selection on database change
+  expandedSchemas.value = new Set()
+  selectedTreeItem.value = null
+  await databaseStore.fetchSchemas(connId, newDb)
+  const meta = databaseStore.metadata[connId]
+  const schemas = meta?.schemas[newDb] || []
+  if (schemas.length > 0) {
+    await Promise.all(schemas.map(s => databaseStore.fetchTables(connId, newDb, s)))
+    // Auto-expand first schema
+    expandedSchemas.value = new Set([schemas[0]])
+    emit('update:selectedSchema', schemas[0])
+  }
+  else {
+    await databaseStore.fetchTables(connId, newDb)
+  }
+})
+
+// Auto-expand all schemas when searching
+watch(searchQuery, (query) => {
+  if (query && availableSchemas.value.length > 0)
+    expandedSchemas.value = new Set(availableSchemas.value)
+})
+
+// Refresh function (exposed to parent)
+async function refresh() {
+  const connId = props.connectionId
+  if (!connId)
+    return
+  const conn = connectionStore.getConnectionById(connId)
+  if (!conn?.isConnected)
+    return
+  databaseStore.clearMetadata(connId)
+  await databaseStore.fetchDatabases(connId)
+  const connDb = props.selectedDatabase || connectionStore.getCurrentDatabase(connId) || conn.database
+  if (connDb) {
+    await databaseStore.fetchSchemas(connId, connDb)
+    const meta = databaseStore.metadata[connId]
+    const schemas = meta?.schemas[connDb] || []
+    if (schemas.length > 0) {
+      await Promise.all(schemas.map(s => databaseStore.fetchTables(connId, connDb, s)))
+      expandedSchemas.value = new Set([schemas[0]])
+      emit('update:selectedSchema', schemas[0])
+    }
+    else {
+      await databaseStore.fetchTables(connId, connDb)
+    }
+  }
+}
+
+defineExpose({ refresh })
+</script>
+
+<template>
+  <div class="flex flex-col h-full relative" @click="contextMenuTable = null">
+    <!-- Initial loading overlay — only during first fetch, not during expand operations -->
+    <div v-if="databaseStore.loading && allDatabases.length === 0" class="bg-background/60 flex items-center inset-0 justify-center absolute z-10">
+      <div class="text-sm text-muted-foreground text-center">
+        <span class="i-carbon-loading mx-auto mb-2 h-5 w-5 block animate-spin" />
+        <p>{{ t('sidebar.loading') }}</p>
+      </div>
+    </div>
+
+    <!-- Search -->
+    <div v-if="props.selectedDatabase" class="px-2 py-1.5 border-b relative">
+      <span class="i-lucide-search text-muted-foreground h-3.5 w-3.5 left-4 top-1/2 absolute -translate-y-1/2" />
+      <Input v-model="searchQuery" :placeholder="t('sidebar.search')" class="text-xs pl-7 h-7" />
+    </div>
+
+    <!-- Mode A: Database selected — show schema hierarchy -->
+    <div v-if="isActiveConnectionConnected && props.selectedDatabase" class="flex-1 overflow-x-hidden overflow-y-scroll">
+      <!-- Schema-aware: schema nodes with nested groups (DBeaver-style hierarchy) -->
+      <template v-if="supportsSchemas && availableSchemas.length > 0">
+        <div v-for="schema in availableSchemas" :key="schema">
+          <!-- Schema node (expandable, left-aligned, no border) -->
+          <button
+            class="text-sm px-2 py-1 flex gap-1.5 w-full cursor-pointer items-center hover:bg-accent/40"
+            @click="toggleSchema(schema)"
+          >
+            <span class="i-lucide-chevron-right shrink-0 h-3 w-3" :class="{ 'rotate-90': expandedSchemas.has(schema) }" />
+            <span
+              class="shrink-0 h-3.5 w-3.5"
+              :class="expandedSchemas.has(schema)
+                ? 'i-lucide-folder-open text-sky-500'
+                : 'i-lucide-folder text-muted-foreground'"
+            />
+            <span class="text-left flex-1 truncate">{{ schema }}</span>
+          </button>
+
+          <!-- Schema content (when expanded) -->
+          <div v-if="expandedSchemas.has(schema)" class="ml-4">
+            <!-- TABLES group (open by default) -->
+            <TreeGroup
+              :label="t('sidebar.groups.tables')"
+              icon="i-lucide-table"
+              icon-color="text-green-600"
+              :count="getTablesForSchema(schema).length"
+              :default-open="true"
+            >
+              <div
+                v-for="table in getTablesForSchema(schema)"
+                :key="table.name"
+                class="text-sm ml-4 px-2 py-0.5 flex gap-1.5 cursor-pointer items-center hover:bg-accent/40"
+                :class="selectedTreeItem?.type === 'table' && selectedTreeItem?.name === table.name && selectedTreeItem?.schema === schema ? 'bg-primary/15 text-primary font-medium hover:bg-primary/20' : ''"
+                @click="handleTableClick(table, schema)"
+                @dblclick="handleDoubleClick(table, schema)"
+                @contextmenu="handleContextMenu($event, table, schema)"
+              >
+                <span class="i-lucide-table text-green-500 shrink-0 h-3.5 w-3.5" />
+                <span class="text-left truncate">{{ table.name }}</span>
+              </div>
+              <div v-if="getTablesForSchema(schema).length === 0" class="text-xs text-muted-foreground ml-2 px-2 py-1">
+                {{ t('sidebar.noObjects') }}
+              </div>
+            </TreeGroup>
+
+            <!-- VIEWS group -->
+            <TreeGroup
+              :label="t('sidebar.groups.views')"
+              icon="i-lucide-eye"
+              icon-color="text-purple-600"
+              :count="getObjectsForSchema(schema)?.views.length ?? 0"
+              :default-open="false"
+              @toggle="(open: boolean) => handleGroupToggle(open, schema)"
+            >
+              <div
+                v-for="view in getObjectsForSchema(schema)?.views ?? []"
+                :key="view.name"
+                class="text-sm ml-4 px-2 py-0.5 flex gap-1.5 cursor-pointer items-center hover:bg-accent/40"
+                :class="selectedTreeItem?.type === 'view' && selectedTreeItem?.name === view.name && selectedTreeItem?.schema === schema ? 'bg-primary/15 text-primary font-medium hover:bg-primary/20' : ''"
+                @click="selectedTreeItem = { type: 'view', name: view.name, schema }"
+                @dblclick="handleViewClick(view, schema)"
+              >
+                <span
+                  class="shrink-0 h-3.5 w-3.5"
+                  :class="view.object_type?.toUpperCase().includes('MATERIALIZED')
+                    ? 'i-lucide-eye text-indigo-500'
+                    : 'i-lucide-eye text-purple-500'"
+                />
+                <span class="text-left truncate">{{ view.name }}</span>
+              </div>
+              <div v-if="!getObjectsForSchema(schema)?.views || getObjectsForSchema(schema)!.views.length === 0" class="text-xs text-muted-foreground ml-2 px-2 py-1">
+                {{ t('sidebar.noObjects') }}
+              </div>
+            </TreeGroup>
+
+            <!-- PROCEDURES group -->
+            <TreeGroup
+              :label="t('sidebar.groups.procedures')"
+              icon="i-lucide-terminal"
+              icon-color="text-blue-600"
+              :count="getObjectsForSchema(schema)?.procedures.length ?? 0"
+              :default-open="false"
+              @toggle="(open: boolean) => handleGroupToggle(open, schema)"
+            >
+              <div
+                v-for="proc in getObjectsForSchema(schema)?.procedures ?? []"
+                :key="proc.name"
+                class="text-sm ml-4 px-2 py-0.5 flex gap-1.5 cursor-pointer items-center hover:bg-accent/40"
+                :class="selectedTreeItem?.type === 'procedure' && selectedTreeItem?.name === proc.name && selectedTreeItem?.schema === schema ? 'bg-primary/15 text-primary font-medium hover:bg-primary/20' : ''"
+                @click="selectedTreeItem = { type: 'procedure', name: proc.name, schema }"
+                @dblclick="handleProcedureClick(proc, schema)"
+              >
+                <span class="i-lucide-terminal text-blue-500 shrink-0 h-3.5 w-3.5" />
+                <span class="text-left truncate">{{ proc.name }}</span>
+              </div>
+              <div v-if="!getObjectsForSchema(schema)?.procedures || getObjectsForSchema(schema)!.procedures.length === 0" class="text-xs text-muted-foreground ml-2 px-2 py-1">
+                {{ t('sidebar.noObjects') }}
+              </div>
+            </TreeGroup>
+
+            <!-- FUNCTIONS group -->
+            <TreeGroup
+              :label="t('sidebar.groups.functions')"
+              icon="i-lucide-function-square"
+              icon-color="text-amber-600"
+              :count="getObjectsForSchema(schema)?.functions.length ?? 0"
+              :default-open="false"
+              @toggle="(open: boolean) => handleGroupToggle(open, schema)"
+            >
+              <div
+                v-for="fn in getObjectsForSchema(schema)?.functions ?? []"
+                :key="fn.name"
+                class="text-sm ml-4 px-2 py-0.5 flex gap-1.5 cursor-pointer items-center hover:bg-accent/40"
+                :class="selectedTreeItem?.type === 'function' && selectedTreeItem?.name === fn.name && selectedTreeItem?.schema === schema ? 'bg-primary/15 text-primary font-medium hover:bg-primary/20' : ''"
+                @click="selectedTreeItem = { type: 'function', name: fn.name, schema }"
+                @dblclick="handleFunctionClick(fn, schema)"
+              >
+                <span class="i-lucide-function-square text-amber-500 shrink-0 h-3.5 w-3.5" />
+                <span class="text-left truncate">{{ fn.name }}</span>
+              </div>
+              <div v-if="!getObjectsForSchema(schema)?.functions || getObjectsForSchema(schema)!.functions.length === 0" class="text-xs text-muted-foreground ml-2 px-2 py-1">
+                {{ t('sidebar.noObjects') }}
+              </div>
+            </TreeGroup>
+          </div>
+        </div>
+      </template>
+
+      <!-- Non-schema-aware: flat groups (MySQL, SQLite, etc.) -->
+      <template v-else>
+        <TreeGroup
+          :label="t('sidebar.groups.tables')"
+          icon="i-lucide-table"
+          icon-color="text-green-600"
+          :count="flatTables.length"
+          :default-open="true"
+        >
+          <div
+            v-for="table in flatTables"
+            :key="table.name"
+            class="text-sm ml-4 px-2 py-0.5 flex gap-1.5 cursor-pointer items-center hover:bg-accent/40"
+            :class="selectedTreeItem?.type === 'table' && selectedTreeItem?.name === table.name && selectedTreeItem?.schema === undefined ? 'bg-primary/15 text-primary font-medium hover:bg-primary/20' : ''"
+            @click="handleTableClick(table, undefined)"
+            @dblclick="handleDoubleClick(table, undefined)"
+            @contextmenu="handleContextMenu($event, table, undefined)"
+          >
+            <span class="i-lucide-table text-green-500 shrink-0 h-3.5 w-3.5" />
+            <span class="text-left truncate">{{ table.name }}</span>
+          </div>
+          <div v-if="flatTables.length === 0" class="text-xs text-muted-foreground px-2 py-1">
+            {{ t('sidebar.noObjects') }}
+          </div>
+        </TreeGroup>
+      </template>
+    </div>
+
+    <!-- Mode B: All Databases (no database selected) — expand/collapse only, do NOT select -->
+    <div v-else-if="isActiveConnectionConnected && !props.selectedDatabase" class="flex-1 overflow-x-hidden overflow-y-scroll">
+      <div v-for="db in allDatabases" :key="db.name">
+        <button
+          class="text-sm px-2 py-1 flex gap-1.5 w-full cursor-pointer items-center hover:bg-accent/40"
+          @click="toggleDatabaseNode(db.name)"
+        >
+          <span class="i-lucide-chevron-right shrink-0 h-3 w-3 transition-transform" :class="{ 'rotate-90': expandedDatabases.has(db.name) }" />
+          <span class="i-lucide-database text-yellow-500 shrink-0 h-3.5 w-3.5" />
+          <span class="text-left flex-1 truncate">{{ db.name }}</span>
+          <span class="inline-flex h-3 w-3 items-center justify-center"><span v-if="loadingDatabases.has(db.name)" class="i-carbon-loading h-3 w-3 animate-spin" /></span>
+        </button>
+        <div v-if="expandedDatabases.has(db.name)" class="py-0.5">
+          <!-- Schema-aware: show schema nodes with groups under each -->
+          <template v-if="hasRealSchemas(db.name)">
+            <div v-for="schema in getDbSchemas(db.name)" :key="schema" class="ml-4">
+              <div class="text-xs text-muted-foreground font-medium px-2 py-1 flex gap-1.5 items-center">
+                <span class="i-lucide-folder-open text-sky-400 shrink-0 h-3.5 w-3.5" />
+                <span class="text-left">{{ schema }}</span>
+              </div>
+              <TreeGroup :label="t('sidebar.groups.tables')" icon="i-lucide-table" icon-color="text-green-600" :count="getTablesForDbSchema(db.name, schema).length" :default-open="true">
+                <div
+                  v-for="table in getTablesForDbSchema(db.name, schema)"
+                  :key="table.name"
+                  class="text-sm ml-4 px-2 py-0.5 flex gap-1.5 cursor-pointer items-center hover:bg-accent/40"
+                  :class="selectedTreeItem?.type === 'table' && selectedTreeItem?.name === table.name && selectedTreeItem?.schema === schema ? 'bg-primary/15 text-primary font-medium hover:bg-primary/20' : ''"
+                  @click="selectedTreeItem = { type: 'table', name: table.name, schema }"
+                  @dblclick="selectedTreeItem = { type: 'table', name: table.name, schema }; emit('selectTable', table, db.name, schema)"
+                  @contextmenu="(e) => { e.preventDefault(); contextMenuTable = { table, database: db.name, schema, x: e.clientX, y: e.clientY } }"
+                >
+                  <span class="i-lucide-table text-green-500 shrink-0 h-3.5 w-3.5" />
+                  <span class="text-left truncate">{{ table.name }}</span>
+                </div>
+              </TreeGroup>
+              <TreeGroup :label="t('sidebar.groups.views')" icon="i-lucide-eye" icon-color="text-purple-600" :count="getObjectsForDbSchema(db.name, schema)?.views.length ?? 0" :default-open="false" @toggle="(open: boolean) => handleGroupToggleForDb(open, db.name, schema)">
+                <div
+                  v-for="view in getObjectsForDbSchema(db.name, schema)?.views ?? []"
+                  :key="view.name"
+                  class="text-sm ml-4 px-2 py-0.5 flex gap-1.5 cursor-pointer items-center hover:bg-accent/40"
+                  :class="selectedTreeItem?.type === 'view' && selectedTreeItem?.name === view.name && selectedTreeItem?.schema === schema ? 'bg-primary/15 text-primary font-medium hover:bg-primary/20' : ''"
+                  @click="selectedTreeItem = { type: 'view', name: view.name, schema }"
+                  @dblclick="emit('openDdlTab', view.name, 'VIEW', db.name, schema)"
+                >
+                  <span class="shrink-0 h-3.5 w-3.5" :class="view.object_type?.toUpperCase().includes('MATERIALIZED') ? 'i-lucide-eye text-indigo-500' : 'i-lucide-eye text-purple-500'" />
+                  <span class="text-left truncate">{{ view.name }}</span>
+                </div>
+              </TreeGroup>
+              <TreeGroup :label="t('sidebar.groups.procedures')" icon="i-lucide-terminal" icon-color="text-blue-600" :count="getObjectsForDbSchema(db.name, schema)?.procedures.length ?? 0" :default-open="false" @toggle="(open: boolean) => handleGroupToggleForDb(open, db.name, schema)">
+                <div
+                  v-for="proc in getObjectsForDbSchema(db.name, schema)?.procedures ?? []"
+                  :key="proc.name"
+                  class="text-sm ml-4 px-2 py-0.5 flex gap-1.5 cursor-pointer items-center hover:bg-accent/40"
+                  :class="selectedTreeItem?.type === 'procedure' && selectedTreeItem?.name === proc.name && selectedTreeItem?.schema === schema ? 'bg-primary/15 text-primary font-medium hover:bg-primary/20' : ''"
+                  @click="selectedTreeItem = { type: 'procedure', name: proc.name, schema }"
+                  @dblclick="emit('openDdlTab', proc.name, 'PROCEDURE', db.name, schema)"
+                >
+                  <span class="i-lucide-terminal text-blue-500 shrink-0 h-3.5 w-3.5" />
+                  <span class="text-left truncate">{{ proc.name }}</span>
+                </div>
+              </TreeGroup>
+              <TreeGroup :label="t('sidebar.groups.functions')" icon="i-lucide-function-square" icon-color="text-amber-600" :count="getObjectsForDbSchema(db.name, schema)?.functions.length ?? 0" :default-open="false" @toggle="(open: boolean) => handleGroupToggleForDb(open, db.name, schema)">
+                <div
+                  v-for="fn in getObjectsForDbSchema(db.name, schema)?.functions ?? []"
+                  :key="fn.name"
+                  class="text-sm ml-4 px-2 py-0.5 flex gap-1.5 cursor-pointer items-center hover:bg-accent/40"
+                  :class="selectedTreeItem?.type === 'function' && selectedTreeItem?.name === fn.name && selectedTreeItem?.schema === schema ? 'bg-primary/15 text-primary font-medium hover:bg-primary/20' : ''"
+                  @click="selectedTreeItem = { type: 'function', name: fn.name, schema }"
+                  @dblclick="emit('openDdlTab', fn.name, 'FUNCTION', db.name, schema)"
+                >
+                  <span class="i-lucide-function-square text-amber-500 shrink-0 h-3.5 w-3.5" />
+                  <span class="text-left truncate">{{ fn.name }}</span>
+                </div>
+              </TreeGroup>
+            </div>
+          </template>
+          <!-- Non-schema-aware: flat groups directly under database -->
+          <template v-else>
+            <div class="ml-4">
+              <TreeGroup :label="t('sidebar.groups.tables')" icon="i-lucide-table" icon-color="text-green-600" :count="getTablesForDbSchema(db.name).length" :default-open="true">
+                <div
+                  v-for="table in getTablesForDbSchema(db.name)"
+                  :key="table.name"
+                  class="text-sm ml-4 px-2 py-0.5 flex gap-1.5 cursor-pointer items-center hover:bg-accent/40"
+                  :class="selectedTreeItem?.type === 'table' && selectedTreeItem?.name === table.name && selectedTreeItem?.schema === undefined ? 'bg-primary/15 text-primary font-medium hover:bg-primary/20' : ''"
+                  @click="selectedTreeItem = { type: 'table', name: table.name, schema: undefined }"
+                  @dblclick="selectedTreeItem = { type: 'table', name: table.name, schema: undefined }; emit('selectTable', table, db.name)"
+                  @contextmenu="(e) => { e.preventDefault(); contextMenuTable = { table, database: db.name, x: e.clientX, y: e.clientY } }"
+                >
+                  <span class="i-lucide-table text-green-500 shrink-0 h-3.5 w-3.5" />
+                  <span class="text-left truncate">{{ table.name }}</span>
+                </div>
+              </TreeGroup>
+              <TreeGroup :label="t('sidebar.groups.views')" icon="i-lucide-eye" icon-color="text-purple-600" :count="getObjectsForDbSchema(db.name, db.name)?.views.length ?? 0" :default-open="false" @toggle="(open: boolean) => handleGroupToggleForDb(open, db.name, db.name)">
+                <div
+                  v-for="view in getObjectsForDbSchema(db.name, db.name)?.views ?? []"
+                  :key="view.name"
+                  class="text-sm ml-4 px-2 py-0.5 flex gap-1.5 cursor-pointer items-center hover:bg-accent/40"
+                  :class="selectedTreeItem?.type === 'view' && selectedTreeItem?.name === view.name ? 'bg-primary/15 text-primary font-medium hover:bg-primary/20' : ''"
+                  @click="selectedTreeItem = { type: 'view', name: view.name }"
+                  @dblclick="emit('openDdlTab', view.name, 'VIEW', db.name)"
+                >
+                  <span class="shrink-0 h-3.5 w-3.5" :class="view.object_type?.toUpperCase().includes('MATERIALIZED') ? 'i-lucide-eye text-indigo-500' : 'i-lucide-eye text-purple-500'" />
+                  <span class="text-left truncate">{{ view.name }}</span>
+                </div>
+              </TreeGroup>
+              <TreeGroup :label="t('sidebar.groups.procedures')" icon="i-lucide-terminal" icon-color="text-blue-600" :count="getObjectsForDbSchema(db.name, db.name)?.procedures.length ?? 0" :default-open="false" @toggle="(open: boolean) => handleGroupToggleForDb(open, db.name, db.name)">
+                <div
+                  v-for="proc in getObjectsForDbSchema(db.name, db.name)?.procedures ?? []"
+                  :key="proc.name"
+                  class="text-sm ml-4 px-2 py-0.5 flex gap-1.5 cursor-pointer items-center hover:bg-accent/40"
+                  :class="selectedTreeItem?.type === 'procedure' && selectedTreeItem?.name === proc.name ? 'bg-primary/15 text-primary font-medium hover:bg-primary/20' : ''"
+                  @click="selectedTreeItem = { type: 'procedure', name: proc.name }"
+                  @dblclick="emit('openDdlTab', proc.name, 'PROCEDURE', db.name)"
+                >
+                  <span class="i-lucide-terminal text-blue-500 shrink-0 h-3.5 w-3.5" />
+                  <span class="text-left truncate">{{ proc.name }}</span>
+                </div>
+              </TreeGroup>
+              <TreeGroup :label="t('sidebar.groups.functions')" icon="i-lucide-function-square" icon-color="text-amber-600" :count="getObjectsForDbSchema(db.name, db.name)?.functions.length ?? 0" :default-open="false" @toggle="(open: boolean) => handleGroupToggleForDb(open, db.name, db.name)">
+                <div
+                  v-for="fn in getObjectsForDbSchema(db.name, db.name)?.functions ?? []"
+                  :key="fn.name"
+                  class="text-sm ml-4 px-2 py-0.5 flex gap-1.5 cursor-pointer items-center hover:bg-accent/40"
+                  :class="selectedTreeItem?.type === 'function' && selectedTreeItem?.name === fn.name ? 'bg-primary/15 text-primary font-medium hover:bg-primary/20' : ''"
+                  @click="selectedTreeItem = { type: 'function', name: fn.name }"
+                  @dblclick="emit('openDdlTab', fn.name, 'FUNCTION', db.name)"
+                >
+                  <span class="i-lucide-function-square text-amber-500 shrink-0 h-3.5 w-3.5" />
+                  <span class="text-left truncate">{{ fn.name }}</span>
+                </div>
+              </TreeGroup>
+            </div>
+          </template>
+        </div>
+      </div>
+      <div v-if="allDatabases.length === 0" class="text-xs text-muted-foreground px-2 py-2">
+        {{ t('sidebar.noDatabases') }}
+      </div>
+    </div>
+
+    <!-- Not connected -->
+    <div v-else class="p-4 flex flex-1 items-center justify-center">
+      <p class="text-xs text-muted-foreground text-center">
+        {{ t('sidebar.noDatabases') }}
+      </p>
+    </div>
+
+    <!-- Context Menu -->
+    <div
+      v-if="contextMenuTable"
+      class="text-popover-foreground border rounded-md bg-popover w-48 shadow-md fixed z-50"
+      :style="{ left: `${contextMenuTable.x}px`, top: `${contextMenuTable.y}px` }"
+      @click.stop
+    >
+      <div class="p-1">
+        <div
+          class="text-sm px-2 py-1.5 rounded-sm flex cursor-pointer items-center hover:text-accent-foreground hover:bg-accent"
+          @click="handleContextAction('selectTopN')"
+        >
+          <span class="i-carbon-arrow-down mr-2 h-3.5 w-3.5" />
+          {{ t('components.databaseBrowser.contextMenu.selectTopN') }}
+        </div>
+        <div
+          class="text-sm px-2 py-1.5 rounded-sm flex cursor-pointer items-center hover:text-accent-foreground hover:bg-accent"
+          @click="handleContextAction('viewStructure')"
+        >
+          <span class="i-carbon-table mr-2 h-3.5 w-3.5" />
+          {{ t('components.databaseBrowser.contextMenu.viewStructure') }}
+        </div>
+        <div
+          class="text-sm px-2 py-1.5 rounded-sm flex cursor-pointer items-center hover:text-accent-foreground hover:bg-accent"
+          @click="handleContextAction('createScript')"
+        >
+          <span class="i-carbon-code mr-2 h-3.5 w-3.5" />
+          {{ t('components.databaseBrowser.contextMenu.createScript') }}
+        </div>
+        <div class="my-1 bg-border h-px" />
+        <div
+          class="text-sm px-2 py-1.5 rounded-sm flex cursor-pointer items-center hover:text-accent-foreground hover:bg-accent"
+          @click="handleContextAction('showErDiagram')"
+        >
+          <span class="i-carbon-diagram mr-2 h-3.5 w-3.5" />
+          {{ t('components.databaseBrowser.contextMenu.showErDiagram') }}
+        </div>
+        <div
+          class="text-sm px-2 py-1.5 rounded-sm flex cursor-pointer items-center hover:text-accent-foreground hover:bg-accent"
+          @click="handleContextAction('exportData')"
+        >
+          <span class="i-carbon-download mr-2 h-3.5 w-3.5" />
+          {{ t('components.databaseBrowser.contextMenu.exportData') }}
+        </div>
+        <div class="my-1 bg-border h-px" />
+        <div
+          class="text-sm text-destructive px-2 py-1.5 rounded-sm flex cursor-pointer items-center hover:text-destructive-foreground hover:bg-destructive/10"
+          @click="handleContextAction('dropTable')"
+        >
+          <span class="i-carbon-trash-can mr-2 shrink-0 h-3.5 w-3.5" />
+          {{ t('components.databaseBrowser.contextMenu.dropTable') }}
+        </div>
+        <div
+          class="text-sm text-destructive px-2 py-1.5 rounded-sm flex cursor-pointer items-center hover:text-destructive-foreground hover:bg-destructive/10"
+          @click="handleContextAction('truncateTable')"
+        >
+          <span class="i-carbon-clean mr-2 shrink-0 h-3.5 w-3.5" />
+          {{ t('components.databaseBrowser.contextMenu.truncateTable') }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/sidebar/SidebarSplitView.vue b/src/components/sidebar/SidebarSplitView.vue
new file mode 100644
index 0000000..b888e75
--- /dev/null
+++ b/src/components/sidebar/SidebarSplitView.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref, watch } from 'vue'
+
+type Props = {
+  bottomOpen: boolean
+  bottomMaxPercent?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  bottomMaxPercent: 50,
+})
+
+const emit = defineEmits<{
+  (e: 'resize'): void
+}>()
+
+const STORAGE_KEY = 'sqlkit.sidebar.savedQueries.height'
+const MIN_HEIGHT = 60
+const containerEl = ref<HTMLElement | null>(null)
+const containerHeight = ref(0)
+const bottomHeight = ref(280)
+const isDragging = ref(false)
+
+function updateContainerHeight() {
+  if (containerEl.value) {
+    containerHeight.value = containerEl.value.clientHeight
+  }
+}
+
+function maxHeight() {
+  return Math.max(MIN_HEIGHT, Math.floor(containerHeight.value * props.bottomMaxPercent / 100))
+}
+
+function clampedBottomHeight() {
+  const max = maxHeight()
+  return Math.min(Math.max(bottomHeight.value, MIN_HEIGHT), max)
+}
+
+function startDrag(e: MouseEvent) {
+  e.preventDefault()
+  isDragging.value = true
+  document.addEventListener('mousemove', handleDrag)
+  document.addEventListener('mouseup', stopDrag)
+}
+
+function handleDrag(e: MouseEvent) {
+  if (!isDragging.value || !containerEl.value)
+    return
+  const rect = containerEl.value.getBoundingClientRect()
+  const newHeight = rect.bottom - e.clientY
+  const max = maxHeight()
+  bottomHeight.value = Math.min(Math.max(newHeight, MIN_HEIGHT), max)
+}
+
+function stopDrag() {
+  if (isDragging.value) {
+    isDragging.value = false
+    localStorage.setItem(STORAGE_KEY, String(bottomHeight.value))
+    emit('resize')
+  }
+  document.removeEventListener('mousemove', handleDrag)
+  document.removeEventListener('mouseup', stopDrag)
+}
+
+onMounted(() => {
+  const saved = localStorage.getItem(STORAGE_KEY)
+  if (saved) {
+    const h = Number.parseInt(saved, 10)
+    if (!Number.isNaN(h) && h >= MIN_HEIGHT) {
+      bottomHeight.value = h
+    }
+  }
+  updateContainerHeight()
+  window.addEventListener('resize', updateContainerHeight)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', updateContainerHeight)
+  document.removeEventListener('mousemove', handleDrag)
+  document.removeEventListener('mouseup', stopDrag)
+})
+
+watch(() => props.bottomOpen, (open) => {
+  if (open) {
+    updateContainerHeight()
+  }
+})
+</script>
+
+<template>
+  <div ref="containerEl" class="flex flex-col h-full overflow-hidden">
+    <!-- Top slot: takes all remaining space -->
+    <div class="flex-1 min-h-0 overflow-auto">
+      <slot name="top" />
+    </div>
+
+    <!-- Bottom slot: always rendered so the panel header is visible.
+         When bottomOpen is false, height is auto (just header).
+         When bottomOpen is true, height is fixed and resize handle appears. -->
+    <template v-if="bottomOpen">
+      <div
+        class="shrink-0 h-1 cursor-ns-resize transition-colors hover:bg-primary/20"
+        :class="{ 'bg-primary/20': isDragging }"
+        @mousedown="startDrag"
+      />
+      <div
+        class="shrink-0 overflow-auto"
+        :style="{ height: `${clampedBottomHeight()}px` }"
+      >
+        <slot name="bottom" />
+      </div>
+    </template>
+    <template v-else>
+      <div class="shrink-0">
+        <slot name="bottom" />
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/src/components/sidebar/TreeGroup.vue b/src/components/sidebar/TreeGroup.vue
new file mode 100644
index 0000000..5844164
--- /dev/null
+++ b/src/components/sidebar/TreeGroup.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+type Props = {
+  label: string
+  icon: string
+  iconColor: string
+  count?: number
+  defaultOpen?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  count: undefined,
+  defaultOpen: false,
+})
+
+const emit = defineEmits<{
+  (e: 'toggle', open: boolean): void
+}>()
+
+const open = ref(props.defaultOpen ?? false)
+
+function toggle() {
+  open.value = !open.value
+  emit('toggle', open.value)
+}
+</script>
+
+<template>
+  <div>
+    <button
+      class="text-xs text-muted-foreground font-medium px-2 py-1 rounded-none flex gap-1.5 w-full cursor-pointer items-center hover:bg-accent/40"
+      @click="toggle"
+    >
+      <span
+        class="i-carbon-chevron-right shrink-0 h-3 w-3 transition-transform"
+        :class="{ 'rotate-90': open }"
+      />
+      <span class="shrink-0 h-3.5 w-3.5" :class="[icon, iconColor]" />
+      <span class="text-left flex-1 truncate">{{ label }}</span>
+      <span
+        v-if="count !== undefined"
+        class="text-xs text-muted-foreground/70 shrink-0"
+      >
+        {{ count }}
+      </span>
+    </button>
+    <div v-if="open" class="py-0.5">
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/src/components/sidebar/dbCapabilities.ts b/src/components/sidebar/dbCapabilities.ts
new file mode 100644
index 0000000..c2b32f4
--- /dev/null
+++ b/src/components/sidebar/dbCapabilities.ts
@@ -0,0 +1,125 @@
+import { DatabaseType } from '@/store'
+
+export type DbCapabilities = {
+  schemas: boolean
+  procedures: boolean
+  functions: boolean
+  views: boolean
+  materializedViews: boolean
+  backup: boolean
+  export: boolean
+  newDatabase: boolean
+  newSchema: boolean
+  dropDatabase: boolean
+}
+
+const ALL: DbCapabilities = {
+  schemas: true,
+  procedures: true,
+  functions: true,
+  views: true,
+  materializedViews: true,
+  backup: true,
+  export: true,
+  newDatabase: true,
+  newSchema: true,
+  dropDatabase: true,
+}
+
+const NONE: DbCapabilities = {
+  schemas: false,
+  procedures: false,
+  functions: false,
+  views: false,
+  materializedViews: false,
+  backup: false,
+  export: false,
+  newDatabase: false,
+  newSchema: false,
+  dropDatabase: false,
+}
+
+const PG_COMPAT: DbCapabilities = { ...ALL, backup: false }
+
+const MYSQL_COMPAT: DbCapabilities = { ...ALL, schemas: false, materializedViews: false, backup: false, newSchema: false, newDatabase: true, dropDatabase: true }
+
+const SQLITE_LIKE: DbCapabilities = { ...NONE, views: true, export: true }
+
+const CAPABILITY_MAP: Partial<Record<DatabaseType, DbCapabilities>> = {
+  [DatabaseType.POSTGRESQL]: PG_COMPAT,
+  [DatabaseType.COCKROACHDB]: PG_COMPAT,
+  [DatabaseType.REDSHIFT]: PG_COMPAT,
+  [DatabaseType.YUGABYTEDB]: PG_COMPAT,
+  [DatabaseType.TIMESCALEDB]: PG_COMPAT,
+  [DatabaseType.KINGBASEES]: PG_COMPAT,
+  [DatabaseType.GAUSSDB]: PG_COMPAT,
+  [DatabaseType.HIGHGO]: PG_COMPAT,
+  [DatabaseType.UXDB]: PG_COMPAT,
+  [DatabaseType.OPENGAUSS]: PG_COMPAT,
+  [DatabaseType.GBASE8C]: PG_COMPAT,
+  [DatabaseType.QUESTDB]: PG_COMPAT,
+  [DatabaseType.VASTBASE]: PG_COMPAT,
+  [DatabaseType.YASHANDB]: PG_COMPAT,
+  [DatabaseType.GREENPLUM]: PG_COMPAT,
+  [DatabaseType.ENTERPRISEDB]: PG_COMPAT,
+  [DatabaseType.CRATEDB]: PG_COMPAT,
+  [DatabaseType.MATERIALIZE]: { ...PG_COMPAT, materializedViews: true },
+  [DatabaseType.ALLOYDB]: PG_COMPAT,
+  [DatabaseType.CLOUDSQLPG]: PG_COMPAT,
+  [DatabaseType.FUJITSUPG]: PG_COMPAT,
+
+  [DatabaseType.MYSQL]: MYSQL_COMPAT,
+  [DatabaseType.MARIADB]: MYSQL_COMPAT,
+  [DatabaseType.TIDB]: MYSQL_COMPAT,
+  [DatabaseType.OCEANBASE]: MYSQL_COMPAT,
+  [DatabaseType.TDSQL]: MYSQL_COMPAT,
+  [DatabaseType.POLARDB]: MYSQL_COMPAT,
+  [DatabaseType.DORIS]: { ...MYSQL_COMPAT, procedures: false },
+  [DatabaseType.SELECTDB]: { ...MYSQL_COMPAT, procedures: false },
+  [DatabaseType.STARROCKS]: { ...MYSQL_COMPAT, procedures: false },
+  [DatabaseType.DATABEND]: { ...MYSQL_COMPAT, procedures: false },
+  [DatabaseType.GOLDENDB]: MYSQL_COMPAT,
+  [DatabaseType.MANTICORESEARCH]: { ...MYSQL_COMPAT, procedures: false, functions: false },
+  [DatabaseType.SINGLESTOREMEMSQL]: MYSQL_COMPAT,
+  [DatabaseType.CLOUDSQLMYSQL]: MYSQL_COMPAT,
+
+  [DatabaseType.SQLITE]: SQLITE_LIKE,
+  [DatabaseType.DUCKDB]: { ...NONE, views: true, export: true, materializedViews: true },
+  [DatabaseType.RQLITE]: SQLITE_LIKE,
+  [DatabaseType.TURSO]: SQLITE_LIKE,
+
+  [DatabaseType.SQLSERVER]: { ...ALL, materializedViews: false },
+  [DatabaseType.ORACLE]: { ...ALL, materializedViews: true },
+  [DatabaseType.DAMENG]: { ...ALL, materializedViews: false },
+  [DatabaseType.OCEANBASE_ORACLE]: { ...ALL, materializedViews: false },
+  [DatabaseType.XUGUDB]: { ...ALL, materializedViews: false },
+  [DatabaseType.GBASE8A]: { ...ALL, materializedViews: false },
+
+  [DatabaseType.CLICKHOUSE]: { ...ALL, procedures: false, functions: false, materializedViews: true, schemas: false, newSchema: false },
+  [DatabaseType.DB2]: { ...ALL, materializedViews: false },
+  [DatabaseType.H2]: { ...ALL, materializedViews: false },
+  [DatabaseType.SNOWFLAKE]: ALL,
+  [DatabaseType.TRINO]: { ...ALL, newDatabase: false, newSchema: false, dropDatabase: false, procedures: false },
+  [DatabaseType.PRESTO]: { ...ALL, newDatabase: false, newSchema: false, dropDatabase: false, procedures: false },
+  [DatabaseType.DERBY]: { ...ALL, materializedViews: false },
+  [DatabaseType.HIVE]: { ...ALL, newSchema: false, procedures: false, functions: false },
+  [DatabaseType.DATABRICKS]: { ...ALL, newDatabase: false, newSchema: false, dropDatabase: false, procedures: false },
+  [DatabaseType.HANA]: { ...ALL, materializedViews: false },
+  [DatabaseType.TERADATA]: { ...ALL, materializedViews: false },
+  [DatabaseType.VERTICA]: ALL,
+  [DatabaseType.EXASOL]: { ...ALL, materializedViews: false },
+  [DatabaseType.BIGQUERY]: { ...ALL, newDatabase: false, dropDatabase: false, materializedViews: true },
+  [DatabaseType.INFORMIX]: { ...ALL, materializedViews: false },
+  [DatabaseType.KYLIN]: { ...ALL, newDatabase: false, newSchema: false, dropDatabase: false },
+  [DatabaseType.CASSANDRA]: { ...NONE, export: true, views: false },
+  [DatabaseType.IRIS]: { ...ALL, materializedViews: false },
+  [DatabaseType.ACCESS]: { ...NONE, export: true, views: true },
+  [DatabaseType.FIREBIRD]: { ...ALL, materializedViews: false },
+  [DatabaseType.TDENGINE]: { ...NONE, export: true },
+}
+
+const DEFAULT_CAPS: DbCapabilities = { ...ALL }
+
+export function getDbCapabilities(dbType: DatabaseType): DbCapabilities {
+  return CAPABILITY_MAP[dbType] ?? DEFAULT_CAPS
+}
diff --git a/src/components/sidebar/index.ts b/src/components/sidebar/index.ts
new file mode 100644
index 0000000..adde538
--- /dev/null
+++ b/src/components/sidebar/index.ts
@@ -0,0 +1,12 @@
+export { default as ChangeConnectionDialog } from './ChangeConnectionDialog.vue'
+export { default as ConnectionSelector } from './ConnectionSelector.vue'
+export { default as DatabaseSelectorRow } from './DatabaseSelectorRow.vue'
+export { getDbCapabilities } from './dbCapabilities'
+export type { DbCapabilities } from './dbCapabilities'
+export { default as DeleteQueryDialog } from './DeleteQueryDialog.vue'
+export { default as RenameQueryDialog } from './RenameQueryDialog.vue'
+export { default as SavedQueriesPanel } from './SavedQueriesPanel.vue'
+export { default as SavedQueryItem } from './SavedQueryItem.vue'
+export { default as SchemaTree } from './SchemaTree.vue'
+export { default as SidebarSplitView } from './SidebarSplitView.vue'
+export { default as TreeGroup } from './TreeGroup.vue'
diff --git a/src/components/ui/combobox/SearchableSelect.vue b/src/components/ui/combobox/SearchableSelect.vue
index b159310..b7d01e6 100644
--- a/src/components/ui/combobox/SearchableSelect.vue
+++ b/src/components/ui/combobox/SearchableSelect.vue
@@ -185,7 +185,7 @@ watch(searchQuery, () => {
         :disabled="disabled"
         :class="
           cn(
-            'justify-between font-normal focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+            'w-full min-w-0 overflow-hidden justify-between font-normal focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
             props.class,
           )
         "
@@ -197,7 +197,7 @@ watch(searchQuery, () => {
             ref="searchInputRef"
             v-model="searchQuery"
             :placeholder="searchPlaceholder || placeholder"
-            class="text-sm text-foreground outline-none border-0 bg-transparent flex-1 placeholder:text-muted-foreground"
+            class="text-sm text-foreground outline-none border-0 bg-transparent flex-1 min-w-0 placeholder:text-muted-foreground"
             autocomplete="off"
             autocorrect="off"
             autocapitalize="off"
@@ -221,10 +221,10 @@ watch(searchQuery, () => {
 
     <PopoverContent
       align="start"
-      class="p-1 w-[unset]"
-      style="width: var(--radix-popover-trigger-width); min-width: var(--radix-popover-trigger-width)"
+      class="w-[unset]"
+      style="padding: 0; width: var(--radix-popover-trigger-width); min-width: var(--radix-popover-trigger-width)"
     >
-      <div :id="listboxId" ref="listRef" role="listbox" class="p-1 max-h-[280px] overflow-y-auto">
+      <div :id="listboxId" ref="listRef" role="listbox" class="py-1 pl-1 pr-0 max-h-[280px] overflow-y-auto">
         <div
           v-if="loading"
           class="text-sm text-muted-foreground py-4 flex gap-2 items-center justify-center"
@@ -234,33 +234,40 @@ watch(searchQuery, () => {
         </div>
 
         <template v-else>
-          <div
-            v-for="option in filteredOptions"
-            :id="`${listboxId}-opt-${option.value}`"
-            :key="option.value"
-            role="option"
-            :aria-selected="option.value === modelValue"
-            :aria-disabled="option.disabled || undefined"
-            :data-highlighted="
-              navigableItems[highlightedIndex]?.type === 'option'
-                && navigableItems[highlightedIndex]?.value === option.value
-                ? ''
-                : undefined
-            "
-            class="text-sm px-2 py-1.5 outline-none rounded-sm flex cursor-pointer select-none transition-colors items-center relative hover:text-accent-foreground hover:bg-accent" :class="[
-              option.disabled && 'pointer-events-none opacity-50',
-              option.value === modelValue && 'bg-accent text-accent-foreground',
-              navigableItems[highlightedIndex]?.type === 'option'
-                && navigableItems[highlightedIndex]?.value === option.value
-                && 'bg-accent text-accent-foreground',
-            ]"
-            @click="!option.disabled && selectOption(option.value)"
-            @mouseenter="highlightedIndex = findOptionIndex(option.value)"
-          >
-            <slot name="option" :option="option">
-              {{ option.label }}
-            </slot>
-          </div>
+          <template v-for="(option, index) in filteredOptions" :key="option.value">
+            <!-- Group header -->
+            <div
+              v-if="option.group && (index === 0 || filteredOptions[index - 1]?.group !== option.group)"
+              class="text-xs text-muted-foreground font-medium px-2 py-1 pt-2 select-none"
+            >
+              {{ option.group }}
+            </div>
+            <div
+              :id="`${listboxId}-opt-${option.value}`"
+              role="option"
+              :aria-selected="option.value === modelValue"
+              :aria-disabled="option.disabled || undefined"
+              :data-highlighted="
+                navigableItems[highlightedIndex]?.type === 'option'
+                  && navigableItems[highlightedIndex]?.value === option.value
+                  ? ''
+                  : undefined
+              "
+              class="text-sm px-1 py-0.5 outline-none flex cursor-pointer select-none transition-colors items-center relative hover:text-accent-foreground hover:bg-accent" :class="[
+                option.disabled && 'pointer-events-none opacity-50',
+                option.value === modelValue && 'bg-accent text-accent-foreground',
+                navigableItems[highlightedIndex]?.type === 'option'
+                  && navigableItems[highlightedIndex]?.value === option.value
+                  && 'bg-accent text-accent-foreground',
+              ]"
+              @click="!option.disabled && selectOption(option.value)"
+              @mouseenter="highlightedIndex = findOptionIndex(option.value)"
+            >
+              <slot name="option" :option="option">
+                {{ option.label }}
+              </slot>
+            </div>
+          </template>
 
           <div
             v-if="filteredOptions.length === 0 && searchQuery && !showCreateNew"
@@ -291,7 +298,7 @@ watch(searchQuery, () => {
             :id="`${listboxId}-create`"
             role="option"
             :data-highlighted="navigableItems[highlightedIndex]?.type === 'create' ? '' : undefined"
-            class="text-sm text-green-600 px-2 py-1.5 outline-none rounded-sm flex gap-2 cursor-pointer select-none italic transition-colors items-center relative hover:bg-accent" :class="[
+            class="text-sm text-green-600 px-1.5 py-1 outline-none flex gap-2 cursor-pointer select-none italic transition-colors items-center relative hover:bg-accent" :class="[
               navigableItems[highlightedIndex]?.type === 'create' && 'bg-accent',
             ]"
             @click="selectOption(searchQuery.trim())"
diff --git a/src/components/ui/combobox/types.ts b/src/components/ui/combobox/types.ts
index 983fc11..b61769f 100644
--- a/src/components/ui/combobox/types.ts
+++ b/src/components/ui/combobox/types.ts
@@ -2,4 +2,5 @@ export type ComboboxOption = {
   label: string
   value: string
   disabled?: boolean
+  group?: string
 }
diff --git a/src/datasources/fileApi.ts b/src/datasources/fileApi.ts
index 771a361..b168aa8 100644
--- a/src/datasources/fileApi.ts
+++ b/src/datasources/fileApi.ts
@@ -58,3 +58,26 @@ export function deleteQueryFile(filePath: string): Promise<string> {
     filePath,
   })
 }
+
+export type SavedQueryMetadata = {
+  connectionId: string | null
+  connectionName: string | null
+  createdAt: number
+  modifiedAt: number
+}
+
+export type SavedQueriesMetadata = {
+  queries: Record<string, SavedQueryMetadata>
+}
+
+export function readSavedQueriesMetadata(): Promise<SavedQueriesMetadata> {
+  return invoke<SavedQueriesMetadata>('read_saved_queries_metadata')
+}
+
+export function writeSavedQueriesMetadata(metadata: SavedQueriesMetadata): Promise<void> {
+  return invoke<void>('write_saved_queries_metadata', { metadata })
+}
+
+export function saveQueryMetadata(filePath: string, metadata: SavedQueryMetadata): Promise<void> {
+  return invoke<void>('save_query_metadata', { filePath, metadata })
+}
diff --git a/src/lang/enUS.ts b/src/lang/enUS.ts
index 588993e..d21e2aa 100644
--- a/src/lang/enUS.ts
+++ b/src/lang/enUS.ts
@@ -1471,4 +1471,82 @@ export const enUS = {
       PERMISSION_DENIED: 'You don\'t have sufficient privileges for this operation',
     },
   },
+  sidebar: {
+    connection: {
+      placeholder: 'Select connection',
+      connected: 'Connected',
+      lost: 'Connection lost',
+      disconnected: 'Disconnected',
+      connecting: 'Connecting...',
+    },
+    database: {
+      placeholder: 'All Databases',
+      selectDatabase: 'Select database',
+      refresh: 'Refresh',
+      refreshTooltip: 'Reload database list',
+    },
+    actionMenu: {
+      label: 'Database actions',
+      newDatabase: 'New Database',
+      newSchema: 'New Schema',
+      newTable: 'New Table',
+      newView: 'New View',
+      newFunction: 'New Function',
+      newProcedure: 'New Procedure',
+      backupDatabase: 'Backup Database',
+      exportDatabase: 'Export Database',
+      dropDatabase: 'Drop Database',
+    },
+    groups: {
+      tables: 'TABLES',
+      views: 'VIEWS',
+      procedures: 'PROCEDURES',
+      functions: 'FUNCTIONS',
+    },
+    loading: 'Loading...',
+    empty: 'No database selected. Choose one to browse.',
+    noObjects: 'No objects found',
+    noDatabases: 'No databases found. Connect to a server first.',
+    search: 'Search tables, views...',
+    savedQueries: {
+      header: 'Saved Queries',
+      expand: 'Expand saved queries',
+      collapse: 'Collapse saved queries',
+      newQuery: 'New query',
+      empty: 'No saved queries yet',
+      created: 'Created',
+      modified: 'Modified',
+      connectionNone: 'No target connection',
+      actions: {
+        open: 'Open',
+        rename: 'Rename',
+        changeConnection: 'Change Target Connection',
+        reveal: 'Reveal in File Explorer',
+        delete: 'Delete',
+      },
+      delete: {
+        title: 'Delete saved query?',
+        description: 'Are you sure you want to delete "{name}"? This action cannot be undone.',
+        cancel: 'Cancel',
+        confirm: 'Delete',
+        target: 'Target',
+        created: 'Created',
+      },
+      renameDialog: {
+        title: 'Rename saved query',
+        label: 'New name',
+        placeholder: 'Enter new file name',
+        cancel: 'Cancel',
+        confirm: 'Rename',
+      },
+      connectionDialog: {
+        title: 'Change Target Connection',
+        label: 'Select connection',
+        none: 'No connection',
+        cancel: 'Cancel',
+        confirm: 'Save',
+      },
+    },
+    notImplemented: 'This feature is not yet implemented',
+  },
 }
diff --git a/src/lang/zhCN.ts b/src/lang/zhCN.ts
index 76e57cc..a6d7217 100644
--- a/src/lang/zhCN.ts
+++ b/src/lang/zhCN.ts
@@ -1471,4 +1471,82 @@ export const zhCN = {
       PERMISSION_DENIED: '您没有足够的权限执行此操作',
     },
   },
+  sidebar: {
+    connection: {
+      placeholder: '选择连接',
+      connected: '已连接',
+      lost: '连接丢失',
+      disconnected: '未连接',
+      connecting: '连接中...',
+    },
+    database: {
+      placeholder: '所有数据库',
+      selectDatabase: '选择数据库',
+      refresh: '刷新',
+      refreshTooltip: '重新加载数据库列表',
+    },
+    actionMenu: {
+      label: '数据库操作',
+      newDatabase: '新建数据库',
+      newSchema: '新建模式',
+      newTable: '新建表',
+      newView: '新建视图',
+      newFunction: '新建函数',
+      newProcedure: '新建存储过程',
+      backupDatabase: '备份数据库',
+      exportDatabase: '导出数据库',
+      dropDatabase: '删除数据库',
+    },
+    groups: {
+      tables: '表',
+      views: '视图',
+      procedures: '存储过程',
+      functions: '函数',
+    },
+    loading: '加载中...',
+    empty: '未选择数据库。请选择一个数据库进行浏览。',
+    noObjects: '未找到对象',
+    noDatabases: '未找到数据库。请先连接服务器。',
+    search: '搜索表、视图...',
+    savedQueries: {
+      header: '已保存的查询',
+      expand: '展开已保存的查询',
+      collapse: '折叠已保存的查询',
+      newQuery: '新建查询',
+      empty: '暂无已保存的查询',
+      created: '创建于',
+      modified: '修改于',
+      connectionNone: '无目标连接',
+      actions: {
+        open: '打开',
+        rename: '重命名',
+        changeConnection: '更改目标连接',
+        reveal: '在文件管理器中显示',
+        delete: '删除',
+      },
+      delete: {
+        title: '删除已保存的查询？',
+        description: '确定要删除 "{name}" 吗？此操作无法撤销。',
+        cancel: '取消',
+        confirm: '删除',
+        target: '目标',
+        created: '创建于',
+      },
+      renameDialog: {
+        title: '重命名已保存的查询',
+        label: '新名称',
+        placeholder: '输入新文件名',
+        cancel: '取消',
+        confirm: '重命名',
+      },
+      connectionDialog: {
+        title: '更改目标连接',
+        label: '选择连接',
+        none: '无连接',
+        cancel: '取消',
+        confirm: '保存',
+      },
+    },
+    notImplemented: '此功能尚未实现',
+  },
 }
diff --git a/src/pages/QueriesPage.vue b/src/pages/QueriesPage.vue
index d2c0cbb..a7d5c9a 100644
--- a/src/pages/QueriesPage.vue
+++ b/src/pages/QueriesPage.vue
@@ -6,26 +6,20 @@ import { invoke } from '@tauri-apps/api/core'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
-import { DatabaseBrowser, DataTableView, DbTypeIcon, QueryResultPanel, QueryTabs } from '@/components/database-browser'
+import { DataTableView, DbTypeIcon, QueryResultPanel, QueryTabs } from '@/components/database-browser'
 import ListingTab from '@/components/database-browser/ListingTab.vue'
 import ErDiagramView from '@/components/er-diagram/ErDiagramView.vue'
 import AppLayout from '@/components/layout/AppLayout.vue'
+import { ConnectionSelector, DatabaseSelectorRow, SavedQueriesPanel, SchemaTree, SidebarSplitView } from '@/components/sidebar'
 import SQLEditor from '@/components/SQLEditor.vue'
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@/components/ui/alert-dialog'
 import { Button } from '@/components/ui/button'
 import { DestructiveConfirmDialog } from '@/components/ui/destructive-confirm-dialog'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { toast } from '@/composables/useNotifications'
 import { usePlatform } from '@/composables/usePlatform'
 import { useSqlFormatter } from '@/composables/useSqlFormatter'
-import { loadQueryFile, saveQueryFile, saveQueryFileAs } from '@/datasources'
+import { browseApi, loadQueryFile, saveQueryFile, saveQueryFileAs, saveQueryMetadata } from '@/datasources'
 import { ConnectionStatus, useAppStore, useConnectionStore, useDatabaseStore, useTabStore } from '@/store'
 
 const { t } = useI18n()
@@ -43,7 +37,9 @@ const isResizingSidebar = ref(false)
 const selectedDatabase = ref<string>('')
 const selectedSchema = ref<string>('')
 const queryTabsRef = ref<InstanceType<typeof QueryTabs>>()
-const databaseBrowserRef = ref<InstanceType<typeof DatabaseBrowser>>()
+const schemaTreeRef = ref<InstanceType<typeof SchemaTree>>()
+const savedQueriesRef = ref<InstanceType<typeof SavedQueriesPanel>>()
+const savedQueriesCollapsed = ref(true)
 
 const { formatSql, resolveDialect } = useSqlFormatter()
 
@@ -54,9 +50,6 @@ const isDestructiveActionExecuting = ref(false)
 const showOrphanTabDialog = ref(false)
 const orphanTabToHandle = ref<string | null>(null)
 
-// Available connections
-const availableConnections = computed(() => connectionStore.connections)
-
 // Get active connection ID (can be changed by user)
 const selectedConnectionId = ref<string>('')
 
@@ -89,11 +82,6 @@ onMounted(async () => {
 
     const isConnected = connectionStore.getConnectionStatus(connId) === ConnectionStatus.CONNECTED
     if (isConnected) {
-      const currentDb = connectionStore.getCurrentDatabase(connId)
-      if (currentDb) {
-        selectedDatabase.value = currentDb
-      }
-
       await databaseStore.fetchDatabases(connId)
     }
   }
@@ -124,10 +112,6 @@ watch(selectedConnectionId, async (newConnId, oldConnId) => {
 
   if (alreadyConnected) {
     connectionStore.setActiveConnection(newConnId)
-    const currentDb = connectionStore.getCurrentDatabase(newConnId)
-    if (currentDb) {
-      selectedDatabase.value = currentDb
-    }
     await databaseStore.fetchDatabases(newConnId)
     return
   }
@@ -136,11 +120,6 @@ watch(selectedConnectionId, async (newConnId, oldConnId) => {
     await connectionStore.connect(newConnId)
     connectionStore.setActiveConnection(newConnId)
     await databaseStore.fetchDatabases(newConnId)
-
-    const currentDb = connectionStore.getCurrentDatabase(newConnId)
-    if (currentDb) {
-      selectedDatabase.value = currentDb
-    }
   }
   catch (error) {
     console.error('Failed to connect:', error)
@@ -161,13 +140,6 @@ watch(selectedDatabase, (db) => {
   selectedSchema.value = ''
 })
 
-// When the active tab changes, sync selectedDatabase to reflect that tab's DB
-watch(activeTab, (tab) => {
-  if (tab?.database && tab.database !== selectedDatabase.value) {
-    selectedDatabase.value = tab.database
-  }
-})
-
 const getConnectionId = () => selectedConnectionId.value || connectionStore.activeConnectionId
 
 const isTableViewConnectionValid = computed(() => {
@@ -176,7 +148,7 @@ const isTableViewConnectionValid = computed(() => {
   if (activeTab.value.orphanFromConnectionId)
     return false
 
-  const connId = getConnectionId()
+  const connId = activeTab.value.connectionId
   if (!connId)
     return false
 
@@ -485,7 +457,7 @@ async function handleDestructiveConfirm() {
     toast.success(t('pages.queries.notifications.tableActionSuccess', { action: actionLabel }))
     destructiveDialogOpen.value = false
     destructiveAction.value = null
-    databaseBrowserRef.value?.refreshTree()
+    schemaTreeRef.value?.refresh()
   }
   catch (err) {
     toast.error(t('pages.queries.notifications.tableActionFailed', { action: action.type, error: err instanceof Error ? err.message : String(err) }))
@@ -499,6 +471,13 @@ function handleSelectTable(table: TableInfo, database: string, schema?: string)
   const connId = getActiveConnectionId()
   if (!connId)
     return
+  // Execute USE database to set the backend connection's database context.
+  // The Rust get_table_data MySQL branch ignores query.database, requiring
+  // the connection to already have a database selected.
+  const escapedDb = database.replace(/`/g, '``')
+  invoke('execute_query', { connectionId: connId, sql: `USE \`${escapedDb}\`` }).catch(() => {
+    // Best-effort: some databases don't support USE (e.g. SQLite)
+  })
   tabStore.openTableViewTab(connId, database, table.name, schema)
 }
 
@@ -509,19 +488,28 @@ function handleOpenListingTab(type: 'VIEW' | 'PROCEDURE' | 'FUNCTION', database:
   tabStore.openListingTab(connId, database, type, schema)
 }
 
-function handleOpenDdlTab(name: string, type: string, database: string, schema?: string) {
+async function handleOpenDdlTab(name: string, type: string, database: string, schema?: string) {
+  const connId = getActiveConnectionId()
+  if (!connId)
+    return
+
   if (type === 'VIEW') {
-    const connId = getActiveConnectionId()
-    if (!connId)
-      return
     tabStore.openTableViewTab(connId, database, name, schema)
     return
   }
-  const connId = getActiveConnectionId()
-  if (!connId)
-    return
-  const listingType = type === 'PROCEDURE' ? 'PROCEDURE' : 'FUNCTION'
-  tabStore.openListingTab(connId, database, listingType, schema)
+
+  // For PROCEDURE / FUNCTION: fetch DDL and open in a query tab
+  const tab = tabStore.createTab(connId, database, schema)
+  const objectType = type === 'PROCEDURE' ? 'PROCEDURE' : 'FUNCTION'
+  tabStore.updateTabName(tab.id, `${name}.sql`)
+  try {
+    const ddl = await browseApi.getObjectDdl(connId, database, schema ?? null, name, objectType)
+    const header = `-- ${objectType}: ${schema ? `${schema}.` : ''}${name}\n\n`
+    tabStore.updateTabContent(tab.id, header + ddl)
+  }
+  catch (err) {
+    tabStore.updateTabContent(tab.id, `-- Failed to load DDL for ${name}:\n-- ${String(err)}`)
+  }
 }
 
 function handleOpenFromListing(info: { name: string, type: string, schema?: string }, database: string) {
@@ -583,6 +571,23 @@ function sanitizeFileName(name: string): string {
     .slice(0, 30) || 'query'
 }
 
+async function saveMetadataEntry(filePath: string) {
+  const now = Math.floor(Date.now() / 1000)
+  const connId = getConnectionId()
+  const conn = connId ? connectionStore.getConnectionById(connId) : undefined
+  try {
+    await saveQueryMetadata(filePath, {
+      connectionId: connId ?? null,
+      connectionName: conn?.name ?? null,
+      createdAt: now,
+      modifiedAt: now,
+    })
+  }
+  catch (error) {
+    console.error('Failed to save metadata:', error)
+  }
+}
+
 async function handleSaveQuery() {
   if (!activeTab.value || !activeTab.value.content.trim()) {
     return
@@ -603,8 +608,9 @@ async function handleSaveQuery() {
 
     if (result.success && result.file_path) {
       tabStore.markTabSaved(activeTab.value.id, result.file_path)
+      await saveMetadataEntry(result.file_path)
       toast.success(t('pages.queries.notifications.querySaved'), { description: result.file_path })
-      databaseBrowserRef.value?.fetchSavedQueryFiles()
+      savedQueriesRef.value?.refresh()
     }
     else {
       toast.error(t('pages.queries.notifications.saveFailed'), { description: result.message })
@@ -634,8 +640,9 @@ async function handleDownloadQuery() {
     }
     if (result.success && result.file_path) {
       tabStore.markTabSaved(activeTab.value.id, result.file_path)
+      await saveMetadataEntry(result.file_path)
       toast.success(t('pages.queries.notifications.querySaved'), { description: result.file_path })
-      databaseBrowserRef.value?.fetchSavedQueryFiles()
+      savedQueriesRef.value?.refresh()
     }
     else {
       toast.error(t('pages.queries.notifications.loadFailed'), { description: result.message })
@@ -646,6 +653,14 @@ async function handleDownloadQuery() {
   }
 }
 
+function handleDatabaseRefresh() {
+  schemaTreeRef.value?.refresh()
+}
+
+function handleDatabaseAction(_kind: string) {
+  toast.info(t('sidebar.notImplemented'))
+}
+
 function startSidebarResize(_e: MouseEvent) {
   isResizingSidebar.value = true
   document.addEventListener('mousemove', handleSidebarResize)
@@ -674,49 +689,55 @@ function closeResultPanel() {
   <AppLayout>
     <div class="flex flex-col h-full">
       <div class="flex flex-1 overflow-hidden">
-        <!-- Database Browser Sidebar -->
+        <!-- Sidebar -->
         <div
           class="border-r bg-background flex flex-col"
           :style="{ width: `${sidebarWidth}px` }"
         >
-          <!-- Connection selector -->
-          <div class="p-2 border-b">
-            <Select v-model="selectedConnectionId">
-              <SelectTrigger class="text-xs h-8 min-w-0">
-                <SelectValue :placeholder="t('pages.queries.selectConnection')" class="truncate" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem
-                  v-for="conn in availableConnections"
-                  :key="conn.id"
-                  :value="conn.id!"
-                >
-                  <span>{{ conn.name }}</span>
-                </SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
+          <!-- Connection selector with status indicator -->
+          <ConnectionSelector v-model="selectedConnectionId" />
+
+          <!-- Database selector row with refresh + action menu -->
+          <DatabaseSelectorRow
+            v-model="selectedDatabase"
+            :connection-id="getActiveConnectionId()"
+            :loading="databaseStore.loading"
+            @refresh="handleDatabaseRefresh"
+            @action="handleDatabaseAction"
+          />
 
-          <!-- Database Browser -->
-          <DatabaseBrowser
-            ref="databaseBrowserRef"
-            v-model:selected-database="selectedDatabase"
-            v-model:selected-schema="selectedSchema"
-            :connection-id="selectedConnectionId"
+          <!-- Tree + Saved Queries split -->
+          <SidebarSplitView
             class="flex-1"
-            @select-table="handleSelectTable"
-            @create-script="handleCreateScript"
-            @select-top-n="handleSelectTopN"
-            @view-structure="handleViewStructure"
-            @export-data="handleExportData"
-            @show-er-diagram="handleShowErDiagram"
-            @drop-table="handleDropTable"
-            @truncate-table="handleTruncateTable"
-            @open-saved-query="handleOpenSavedQuery"
-            @create-new-query="handleNewTab"
-            @open-listing-tab="handleOpenListingTab"
-            @open-ddl-tab="handleOpenDdlTab"
-          />
+            :bottom-open="!savedQueriesCollapsed"
+          >
+            <template #top>
+              <SchemaTree
+                ref="schemaTreeRef"
+                v-model:selected-database="selectedDatabase"
+                v-model:selected-schema="selectedSchema"
+                :connection-id="getActiveConnectionId()"
+                @select-table="handleSelectTable"
+                @create-script="handleCreateScript"
+                @select-top-n="handleSelectTopN"
+                @view-structure="handleViewStructure"
+                @export-data="handleExportData"
+                @show-er-diagram="handleShowErDiagram"
+                @drop-table="handleDropTable"
+                @truncate-table="handleTruncateTable"
+                @open-listing-tab="handleOpenListingTab"
+                @open-ddl-tab="handleOpenDdlTab"
+              />
+            </template>
+            <template #bottom>
+              <SavedQueriesPanel
+                ref="savedQueriesRef"
+                v-model:collapsed="savedQueriesCollapsed"
+                @open="handleOpenSavedQuery"
+                @new-query="handleNewTab"
+              />
+            </template>
+          </SidebarSplitView>
         </div>
 
         <!-- Resize handle -->
@@ -739,11 +760,11 @@ function closeResultPanel() {
             @new="handleNewTab"
           />
 
-          <!-- Data Table View (shown when the active tab is a table-view tab AND connection matches) -->
+          <!-- Data Table View — uses tab's own connectionId so it works regardless of sidebar selection -->
           <DataTableView
             v-if="activeTab?.tableView && !activeTab.orphanFromConnectionId && isTableViewConnectionValid"
-            :key="`${getConnectionId()}-${activeTab.id}-${activeTab.tableView.database}-${activeTab.tableView.tableName}`"
-            :connection-id="getConnectionId() || ''"
+            :key="`${activeTab.connectionId}-${activeTab.id}-${activeTab.tableView.database}-${activeTab.tableView.tableName}`"
+            :connection-id="activeTab.connectionId || ''"
             :database="activeTab.tableView.database"
             :schema="activeTab.tableView.schema"
             :table-name="activeTab.tableView.tableName"
diff --git a/uno.config.ts b/uno.config.ts
index acca949..4c9b6bd 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -15,6 +15,7 @@ export default defineConfig({
       scale: 1.2,
       collections: {
         carbon: () => import('@iconify-json/carbon/icons.json').then(i => i.default as Record<string, unknown>),
+        lucide: () => import('@iconify-json/lucide/icons.json').then(i => i.default as Record<string, unknown>),
       },
     }),
     presetAnimations(),