DB viewer + query editor enhancements (home-screen-ux-query-editor) (#4)

* feat: add query_history table migration (v5) (Task 1)

* feat: add isDestructiveQuery utility (Task 2)

* feat: add tabType discriminator and openQueryTab to dbViewerStore (Task 3)

* feat: add execute_query command with pagination and query history (Task 4)

* feat: add typed wrappers for executeQuery, getQueryHistory, clearQueryHistory (Task 5)

* fix: global search bypasses folder scope when filters active (Task 6)

* feat: add TagFilterDropdown with checkboxes and empty state (Task 7)

* feat: add DbTypeFilterDropdown with checkboxes and clear all (Task 8)

* feat: wire TagFilterDropdown/DbTypeFilterDropdown into ActionRow, add inline tag creation (Task 9)

* feat: add Name input to GeneralTab for connection editing (Task 10)

* feat: add QueryEditor Monaco wrapper with SQL mode and Cmd+Enter (Task 11)

* feat: add DestructiveQueryDialog with SQL preview and confirmation (Task 12)

* feat: integrate query tabs, Monaco editor, destructive guard into DbViewerScreen (Task 13)

* fix: harden moveConnection against race conditions on rapid drags (Task 14)

* docs: update AGENTS.md implementation status for Home Screen UX + Query Editor (Task 15)

* feat: switch tag filter to OR semantics, add environment filter (F-T16)

* feat: add activeEnvironment filter state to uiStore and useFilteredConnections (F-T17)

* feat: add environment filter select to Filters dropdown (F-T18)

* feat: filter folder cards by tag match or contained connections (F-T19)

* fix: keep grid header width to content, border last column

* fix: hide select-all checkbox and empty-state when no table open

* fix: filter folder cards by any active filter, show global search results (F-T20)

* feat: show 'Showing Search Results' breadcrumb with clear button (F-T21)

* docs: update README + AGENTS.md for Query Editor, filters, and planned AI integration (BYOK)

* feat: refresh indicator with spinning icon and pulse, defer auto-refresh on tab switch

* feat: smart default schema selection, refresh schemas on database switch

* fix: auto-refresh waits for in-flight refresh to complete before next tick

* style: shrink db viewer sidebar nav icons from 20px to 16px

* style: shrink db viewer sidebar nav buttons to 32px (8px padding)

* style: make Tables panel title xs, regular weight, muted

* style: bump Tables panel title back to sm, keep regular weight and muted

* feat: export schema diagram as PNG/JPEG/SVG (entire schema or viewport)

* chore: lockfile for html-to-image

* fix: raise schema visualizer toolbar above legend so export menu isn't hidden

* feat: schema export via save dialog, transparent background option, save notification

* fix: render nothing in tab bar when no tabs are open

* style: reduce tab bar height from 40px to 36px

* style: reduce tab bar height to 32px

* style: revert tab bar height to 36px

* feat: split tab bar with fixed +Query and Changes actions on the right

* style: blue play-icon Query button in tab bar

* refactor: remove sidebar New Query button (now in tab bar)

* style: conditional bottom padding in sidebar toolbar when nothing is below

* feat: distinguish table and query tabs with icons

* style: tab icons follow active/inactive state, muted colors

* feat: query tab toolbar (run/format/dialect badge) + bare transparent editor

* style: blue rounded Run Query button in query toolbar

* feat: smart platform-aware shortcut tooltip on Run Query (⌘+⏎ / Ctrl+Enter)

* style: show only the shortcut in the Run Query tooltip

* fix: Cmd+Enter keybinding stale closure; add run pulse to query toolbar; bundle monaco locally (offline)

* feat: show placeholder text in empty query editor

* feat: SQL autocomplete — keywords + table names from active schema

* feat: per-table column autocomplete on 'table.' + docs update

* feat: query-variant result toolbar — export/refresh/columns left, smart-unit execution time right

* fix: populate execution_time_ms on query results so the toolbar can show time taken

* fix: re-measure monaco fonts after async font load to stop cursor drift

* feat: resizable + collapsible query results panel

* refactor: move results caret onto the resize handle (centered), bottom caret when collapsed

* style: thin drag strip with caret on its own centered pill

* refactor: remove Queue button from table toolbar (Changes lives in tab bar)

* style: changes button becomes bordered rounded icon with count badge

* docs: mark tab-bar Changes queue button in AGENTS.md and README

src/lib/utils.ts

@@ -112,16 +112,29 @@ export function getChildFolders(folders: Folder[], parentId: string | null): Fol
 export function filterConnections(
   connections: Connection[],
   tags: Tag[],
-  filter: { query: string; activeTagIds?: string[]; activeDbTypes?: DbType[] },
+  filter: {
+    query: string;
+    activeTagIds?: string[];
+    activeDbTypes?: DbType[];
+    activeEnvironment?: string | null;
+  },
 ): Connection[] {
   const q = filter.query.trim().toLowerCase();
   const tagIds = filter.activeTagIds ?? [];
   const dbTypes = filter.activeDbTypes ?? [];
+  const activeEnvironment = filter.activeEnvironment;
   const tagNameById = new Map(tags.map((t) => [t.id, t.name.toLowerCase()]));
 
   return connections.filter((c) => {
     if (dbTypes.length > 0 && !dbTypes.includes(c.db_type)) return false;
-    if (tagIds.length > 0 && !tagIds.every((id) => c.tag_ids.includes(id))) return false;
+    if (tagIds.length > 0 && !tagIds.some((id) => c.tag_ids.includes(id))) return false;
+    if (activeEnvironment !== undefined && activeEnvironment !== null && activeEnvironment !== "") {
+      if (activeEnvironment === "none") {
+        if (c.environment) return false;
+      } else if (c.environment !== activeEnvironment) {
+        return false;
+      }
+    }
     if (q.length > 0) {
       const tagNames = c.tag_ids.map((id) => tagNameById.get(id) ?? "").join(" ");
       const haystack = `${c.name} ${c.host} ${c.db_type} ${tagNames}`.toLowerCase();
@@ -129,4 +142,44 @@ export function filterConnections(
     }
     return true;
   });
+}
+
+const DESTRUCTIVE_KEYWORDS = new Set([
+  "INSERT", "UPDATE", "DELETE", "DROP", "ALTER",
+  "TRUNCATE", "CREATE", "REPLACE",
+]);
+
+/**
+ * Detect whether `sql` is a data-modifying statement by checking the
+ * first significant keyword after stripping comments and whitespace.
+ *
+ * This is a UX safety net, not a security boundary.  The user is already
+ * authenticated to their own database — the confirmation dialog prevents
+ * accidental data loss, not malicious access.
+ */
+export function isDestructiveQuery(sql: string): boolean {
+  // Strip block comments  /* ... */
+  let stripped = sql.replace(/\/\*[\s\S]*?\*\//g, " ");
+  // Strip line comments  -- ...
+  stripped = stripped.replace(/--[^\n]*/g, " ");
+  // Collapse whitespace
+  const tokens = stripped.trim().split(/\s+/);
+  if (tokens.length === 0 || tokens[0].length === 0) return false;
+  const first = tokens[0].toUpperCase();
+  return DESTRUCTIVE_KEYWORDS.has(first);
+}
+
+/**
+ * Pick the smart default schema for a freshly loaded database.
+ *
+ * Prefers conventional schemas (`public` for PostgreSQL, `main` for SQLite)
+ * and otherwise falls back to the first schema returned by the backend
+ * (which already excludes system schemas and is ordered alphabetically).
+ */
+export function pickDefaultSchema(schemas: string[]): string | null {
+  if (schemas.length === 0) return null;
+  for (const preferred of ["public", "main"]) {
+    if (schemas.includes(preferred)) return preferred;
+  }
+  return schemas[0];
 }