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/components/connections/ConnectionGrid.test.tsx

@@ -1,13 +1,14 @@
-import { describe, it, expect, vi } from "vitest";
+import { describe, it, expect, vi, beforeEach } from "vitest";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { ConnectionGrid } from "./ConnectionGrid";
-import type { Connection, Folder } from "../../lib/types";
+import { useUiStore } from "../../stores/uiStore";
+import type { Connection, Folder, Tag } from "../../lib/types";
 
 const makeConn = (id: string, folder_id: string | null = null): Connection => ({
   id, name: `Conn ${id}`, db_type: "postgresql", host: "h", port: 5432,
   username: null, folder_id, keychain_ref: null, tag_ids: [],
-  created_at: "", updated_at: "",
+  created_at: "", updated_at: "", environment: null,
 });
 
 const folders: Folder[] = [
@@ -17,6 +18,10 @@ const folders: Folder[] = [
 ];
 
 describe("ConnectionGrid", () => {
+  beforeEach(() => {
+    useUiStore.setState({ activeTagIds: [], activeDbTypes: [], activeEnvironment: null });
+  });
+
   it("renders empty state when no connections and no folders", () => {
     render(<ConnectionGrid connections={[]} tags={[]} />);
     expect(screen.getByText(/no connections yet/i)).toBeInTheDocument();
@@ -66,4 +71,87 @@ describe("ConnectionGrid", () => {
     expect(screen.getByText("Work")).toBeInTheDocument();
     expect(screen.getByText("Personal")).toBeInTheDocument();
   });
+
+  it("hides folders that match no tags and contain no matching connections", () => {
+    useUiStore.setState({ activeTagIds: ["t1"] });
+    const taggedFolders: Folder[] = [
+      { id: "f1", name: "Tagged Folder", parent_id: null, tag_ids: ["t1"], created_at: "", updated_at: "" },
+      { id: "f2", name: "Untagged Folder", parent_id: null, tag_ids: [], created_at: "", updated_at: "" },
+    ];
+    const tags: Tag[] = [{ id: "t1", name: "prod", color: "#f00", created_at: "" }];
+    render(<ConnectionGrid connections={[]} tags={tags} folders={taggedFolders} />);
+    expect(screen.getByText("Tagged Folder")).toBeInTheDocument();
+    expect(screen.queryByText("Untagged Folder")).not.toBeInTheDocument();
+  });
+
+  it("shows folder when it contains a matching connection even if untagged", () => {
+    useUiStore.setState({ activeTagIds: ["t1"] });
+    const foldersWithConn: Folder[] = [
+      { id: "f1", name: "Parent", parent_id: null, tag_ids: [], created_at: "", updated_at: "" },
+    ];
+    const conns = [makeConn("c1", "f1")];
+    conns[0] = { ...conns[0], tag_ids: ["t1"] };
+    const tags: Tag[] = [{ id: "t1", name: "prod", color: "#f00", created_at: "" }];
+    render(<ConnectionGrid connections={conns} tags={tags} folders={foldersWithConn} />);
+    expect(screen.getByText("Parent")).toBeInTheDocument();
+  });
+
+  it("shows all folders when no tag filter is active", () => {
+    useUiStore.setState({ activeTagIds: [] });
+    render(<ConnectionGrid connections={[]} tags={[]} folders={folders} />);
+    expect(screen.getByText("Work")).toBeInTheDocument();
+    expect(screen.getByText("Personal")).toBeInTheDocument();
+  });
+
+  it("hides folders whose connections don't match the DB type filter", () => {
+    useUiStore.setState({ activeDbTypes: ["sqlite"] });
+    const typedFolders: Folder[] = [
+      { id: "f1", name: "PG Folder", parent_id: null, tag_ids: [], created_at: "", updated_at: "" },
+      { id: "f2", name: "SQLite Folder", parent_id: null, tag_ids: [], created_at: "", updated_at: "" },
+    ];
+    const conns: Connection[] = [
+      { ...makeConn("c1", "f1"), db_type: "postgresql" },
+      { ...makeConn("c2", "f2"), db_type: "sqlite" },
+    ];
+    render(<ConnectionGrid connections={conns} tags={[]} folders={typedFolders} />);
+    expect(screen.queryByText("PG Folder")).not.toBeInTheDocument();
+    expect(screen.getByText("SQLite Folder")).toBeInTheDocument();
+  });
+
+  it("hides folders whose connections don't match the environment filter", () => {
+    useUiStore.setState({ activeEnvironment: "production" });
+    const envFolders: Folder[] = [
+      { id: "f1", name: "Prod Folder", parent_id: null, tag_ids: [], created_at: "", updated_at: "" },
+      { id: "f2", name: "Dev Folder", parent_id: null, tag_ids: [], created_at: "", updated_at: "" },
+    ];
+    const conns: Connection[] = [
+      { ...makeConn("c1", "f1"), environment: "production" },
+      { ...makeConn("c2", "f2"), environment: "development" },
+    ];
+    render(<ConnectionGrid connections={conns} tags={[]} folders={envFolders} />);
+    expect(screen.getByText("Prod Folder")).toBeInTheDocument();
+    expect(screen.queryByText("Dev Folder")).not.toBeInTheDocument();
+  });
+
+  it("shows search results from all folders as if at root", () => {
+    useUiStore.setState({ activeFolderId: "f1", searchQuery: "conn" });
+    const searchFolders: Folder[] = [
+      { id: "f1", name: "Folder 1", parent_id: null, tag_ids: [], created_at: "", updated_at: "" },
+      { id: "f2", name: "Folder 2", parent_id: null, tag_ids: [], created_at: "", updated_at: "" },
+    ];
+    const conns = [makeConn("c1", "f1"), makeConn("c2", "f2")];
+    render(
+      <ConnectionGrid
+        connections={conns}
+        tags={[]}
+        folders={searchFolders}
+        activeFolderId="f1"
+        hasSearch
+      />
+    );
+    expect(screen.getByText("Conn c2")).toBeInTheDocument();
+    expect(screen.queryByText("Folder 1")).not.toBeInTheDocument();
+    expect(screen.queryByText("Folder 2")).not.toBeInTheDocument();
+    expect(screen.getByText("Showing Search Results")).toBeInTheDocument();
+  });
 });

src/components/connections/ConnectionGrid.tsx

@@ -1,5 +1,4 @@
 import type { Connection, Folder, Tag } from "../../lib/types";
-import { useMemo } from "react";
 import { Folder as FolderIcon, Check, Pencil, Trash2 } from "lucide-react";
 import { useDroppable } from "@dnd-kit/core";
 import { ConnectionCard } from "./ConnectionCard";
@@ -127,17 +126,47 @@ export function ConnectionGrid({
     const selectedItemIds = useUiStore((s) => s.selectedItemIds);
     const toggleItemSelection = useUiStore((s) => s.toggleItemSelection);
     const clearSelection = useUiStore((s) => s.clearSelection);
+    const activeTagIds = useUiStore((s) => s.activeTagIds);
+    const activeDbTypes = useUiStore((s) => s.activeDbTypes);
+    const activeEnvironment = useUiStore((s) => s.activeEnvironment);
 
-    const currentFolderId =
-        activeFolderId !== null && folders.some((f) => f.id === activeFolderId)
+    const currentFolderId = hasSearch
+        ? null
+        : activeFolderId !== null && folders.some((f) => f.id === activeFolderId)
             ? activeFolderId
             : null;
+    const hasActiveFilters =
+        activeTagIds.length > 0 ||
+        activeDbTypes.length > 0 ||
+        (activeEnvironment !== null && activeEnvironment !== undefined);
+
+    const connectionMatchesFilters = (c: Connection) => {
+        if (activeTagIds.length > 0 && !c.tag_ids.some((id) => activeTagIds.includes(id))) {
+            return false;
+        }
+        if (activeDbTypes.length > 0 && !activeDbTypes.includes(c.db_type)) {
+            return false;
+        }
+        if (activeEnvironment !== null && activeEnvironment !== undefined && c.environment !== activeEnvironment) {
+            return false;
+        }
+        return true;
+    };
+
     const visibleFolders = hasSearch
         ? []
-        : getChildFolders(folders, currentFolderId);
-    const directConnections = connections.filter(
-        (c) => c.folder_id === currentFolderId,
-    );
+        : getChildFolders(folders, currentFolderId).filter((f) => {
+            if (!hasActiveFilters) return true;
+            const folderMatchesTags = f.tag_ids.some((id) => activeTagIds.includes(id));
+            if (folderMatchesTags) return true;
+            const subIds = new Set(getDescendantFolderIds(folders, f.id));
+            return connections.some(
+                (c) => c.folder_id !== null && subIds.has(c.folder_id) && connectionMatchesFilters(c),
+            );
+        });
+    const directConnections = hasSearch
+        ? connections
+        : connections.filter((c) => c.folder_id === currentFolderId);
     const allStoreConnections = useConnectionStore((s) => s.connections);
     const allStoreFolders = useConnectionStore((s) => s.folders);
     // Check if any direct connections OR any subfolder has connections anywhere below
@@ -171,6 +200,8 @@ export function ConnectionGrid({
                     folders={folders}
                     activeFolderId={currentFolderId}
                     onNavigate={handleBreadcrumbNavigate}
+                    hasSearch={hasSearch}
+                    onClearSearch={() => useUiStore.getState().clearFilters()}
                 />
                 {activeFolder && (
                     <div className="flex items-center gap-1">

src/components/connections/GeneralTab.test.tsx

@@ -1,5 +1,5 @@
-import { describe, it, expect } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
 import { GeneralTab } from "./GeneralTab";
 import type { ConnectionFormData } from "./connectionFormData";
 
@@ -19,6 +19,18 @@ const BASE_FORM: ConnectionFormData = {
 };
 
 describe("GeneralTab", () => {
+  it("renders a Name input and passes value to onChange", () => {
+    const onChange = vi.fn();
+    render(<GeneralTab form={BASE_FORM} onChange={onChange} />);
+
+    const nameInput = screen.getByLabelText("Name");
+    expect(nameInput).toBeInTheDocument();
+    expect(nameInput).toHaveValue(BASE_FORM.name);
+
+    fireEvent.change(nameInput, { target: { value: "My New Name" } });
+    expect(onChange).toHaveBeenCalledWith({ name: "My New Name" });
+  });
+
   it("renders host, port, user, password, and database fields", () => {
     render(<GeneralTab form={BASE_FORM} onChange={() => {}} />);
 

src/components/connections/GeneralTab.tsx

@@ -14,6 +14,16 @@ export function GeneralTab({ form, onChange }: GeneralTabProps) {
 
   return (
     <div className="space-y-4">
+      <div>
+        <label className="block text-sm text-text mb-1.5">Name</label>
+        <Input
+          value={form.name}
+          onChange={(value) => onChange({ name: value })}
+          placeholder="My Production Database"
+          aria-label="Name"
+        />
+      </div>
+
       {!isSqlite && (
         <div className="flex gap-3">
           <div className="flex-1">