feat: Schema Visualizer, docs update & competitor comparison

* chore: add @xyflow/react, dagre, @types/dagre (Task 1)

* feat: add SchemaGraph, TableNode, GraphColumn, Relationship types (Task 2)

* feat: add SchemaGraph, TableNode, GraphColumn, Relationship Rust models (Task 3)

* feat: add cardinality color/label helpers and legend data (Task 4)

* feat: add schema_graph command skeleton with validation (Task 5)

* feat: add PostgreSQL schema graph query builder + cardinality inference (Task 6)

* feat: implement get_schema_graph for PostgreSQL + SQLite (Task 7)

* feat: add getSchemaGraph IPC wrapper (Task 8)

* feat: un-stub Schema Visualizer nav + add view branch placeholder (Task 9)

* feat: add SchemaVisualizerNode custom React Flow table card (Task 10)

* feat: add SchemaVisualizerPage with React Flow canvas (Task 11)

* feat: wire SchemaVisualizerPage + error handling + style polish (Tasks 12-14)

* perf: replace information_schema with pg_catalog for schema graph query (500x+ faster on remote PG)

* fix: add DB selector, ghost-style dropdowns, dark controls, minimap styling, attribution

* fix: always show schema selector, move attribution to top-left

* fix: SelectDropdown close on outside click works in React Flow (capture phase)

* style: remove border from attribution badge

* style: restore bg on attribution, no border

* fix: lower attribution z-index so dropdowns render above

* fix: ensure toolbar + dropdowns stack above canvas attribution

* feat: crow's foot markers on edges + collapsible legend

* fix: restore missing tableCount state (was overwritten by legendOpen)

* fix: move crow's foot marker defs inside ReactFlow SVG, remove duplicate external SVGs

* fix: inject crow's foot SVG markers into ReactFlow SVG via DOM ref

* fix: use hidden SVG before ReactFlow for crow's foot markers, remove DOM injection

* feat: custom CrowsFootEdge component with inline crow's foot markers

* feat: custom CrowsFootEdge with zero-or-one/zero-or-many notation + nullability-based cardinality

* fix: strip markers, use clean text labels only on edges

* fix: add SVG marker defs directly inside ReactFlow + url() references for crow's foot

* fix: use custom CrowsFootEdge with BaseEdge + inline SVG symbols (no marker defs needed)

* debug: add red/green circles at edge endpoints to verify custom edge renders

* fix: remove stale duplicate edge data, use clean data.startMarker/endMarker

* fix: use getSmoothStepPath offset points for correct tangent angle at endpoints

* fix: thicker strokeWidth, position at handle coords, use path tangents

* fix: use straight-line angle (not curve tangent) for marker rotation

* fix: compute marker positions directly with raw math, no SVG transforms

* fix: fixed-orientation symbols — | always vertical, crow's foot fans toward node

* fix: dead simple — | vertical line, ← or → horizontal crow's foot based on edge direction

* fix: increase marker gap to 12px so symbols aren't hidden behind handle dots

* fix: correct offset direction (away from card into gap), G=4

* fix: remove duplicate G offset inside Mark (was canceling out the call-site offset)

* fix: crow's foot back to fork shape — three lines converging to a tip

* fix: flip crow's foot direction

* fix: wider crow's foot spread (4→6)

* feat: add crow's foot symbols to relationship legend

* style: cleaner legend — horizontal edge with endpoint symbols + label

* feat: handles on both sides, edge builder picks closest side based on dagre layout

* fix: compute actual handle distances to pick shortest path

* revert: PK always left, FK always right — one handle per column only

* fix: lock edge marker direction via origRight, TB layout for horizontal spread, truncate long types

* fix: semi-transparent minimap mask, border stroke for viewport visibility

* feat: click edge to highlight (amber glow), all others dim to 15% opacity

* feat: legend highlights matching cardinality row when edge is clicked

* fix: crow's foot symbols now read color from edge style (amber when highlighted)

* fix: highlighted edge gets zIndex 1000 to render on top

* fix: folder empty message now checks unfiltered store, shows filter hint when connections exist but filtered out

* feat: flat SVG DB icons from simple-icons (PostgreSQL, MySQL, SQLite, Redis) replacing emoji

* chore: add *.db, *.sqlite, *.sqlite3 to .gitignore

* docs: update README with 3-way competitor comparison + current roadmap; update AGENTS.md schema visualizer status

src/lib/commands.test.ts

@@ -1,4 +1,9 @@
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, vi } from "vitest";
+
+vi.mock("@tauri-apps/api/core", () => ({
+  invoke: vi.fn().mockResolvedValue({ tables: [], relationships: [] }),
+}));
+
 import {
   testConnection,
   dbConnect,
@@ -9,7 +14,9 @@ import {
   getTableData,
   executeChange,
   refreshConnection,
+  getSchemaGraph,
 } from "./commands";
+import type { SchemaGraph } from "./types";
 
 describe("commands", () => {
   it("testConnection has correct signature", () => {
@@ -47,4 +54,17 @@ describe("commands", () => {
   it("refreshConnection returns full tree promise", () => {
     expect(typeof refreshConnection).toBe("function");
   });
+
+  describe("getSchemaGraph", () => {
+    it("is a callable function with correct signature", () => {
+      expect(typeof getSchemaGraph).toBe("function");
+      const result: Promise<SchemaGraph> = getSchemaGraph("conn-1", "public");
+      expect(result).toBeInstanceOf(Promise);
+    });
+
+    it("accepts schema as optional", () => {
+      const result: Promise<SchemaGraph> = getSchemaGraph("conn-1");
+      expect(result).toBeInstanceOf(Promise);
+    });
+  });
 });

src/lib/commands.ts

@@ -1,5 +1,5 @@
 import { invoke } from "@tauri-apps/api/core";
-import type { Connection, ConnectionInput, ConnectionTestResult, Folder, FolderInput, Tag, TagInput, Settings, ImportResult, TableInfo, QueryResult, ChangeItem, BackupOptions, RestoreOptions, SyncOptions, PgToolStatus, FunctionInfo, TriggerInfo, SequenceInfo, EnumInfo, ExtensionInfo } from "./types";
+import type { Connection, ConnectionInput, ConnectionTestResult, Folder, FolderInput, Tag, TagInput, Settings, ImportResult, TableInfo, QueryResult, ChangeItem, BackupOptions, RestoreOptions, SyncOptions, PgToolStatus, FunctionInfo, TriggerInfo, SequenceInfo, EnumInfo, ExtensionInfo, SchemaGraph } from "./types";
 import type { FilterRule, SortRule } from "../stores/dbViewerStore";
 
 // NOTE on argument key naming:
@@ -139,4 +139,11 @@ export async function getEnums(connectionId: string, schema?: string): Promise<E
 
 export async function getExtensions(connectionId: string): Promise<ExtensionInfo[]> {
   return invoke<ExtensionInfo[]>("get_extensions", { connectionId });
+}
+
+export async function getSchemaGraph(
+  connectionId: string,
+  schema?: string,
+): Promise<SchemaGraph> {
+  return invoke<SchemaGraph>("get_schema_graph", { connectionId, schema });
 }

src/lib/dbIcons.ts

@@ -1,15 +0,0 @@
-import type { DbType } from "./types";
-
-export const DB_ICONS: Record<DbType, string> = {
-  postgresql: "🐘",
-  mysql: "🐬",
-  redis: "⚡",
-  sqlite: "🗄️",
-};
-
-export const DB_LABELS: Record<DbType, string> = {
-  postgresql: "PostgreSQL",
-  mysql: "MySQL",
-  redis: "Redis",
-  sqlite: "SQLite",
-};

src/lib/dbIcons.tsx

@@ -0,0 +1,59 @@
+import { siPostgresql, siMysql, siSqlite, siRedis } from "simple-icons";
+import type { DbType } from "./types";
+
+// Brand colors from simple-icons
+const DB_COLORS: Record<DbType, string> = {
+  postgresql: `#${siPostgresql.hex}`,
+  mysql: `#${siMysql.hex}`,
+  redis: `#${siRedis.hex}`,
+  sqlite: `#${siSqlite.hex}`,
+};
+
+// SVG path data for each DB icon
+const DB_PATHS: Record<DbType, string> = {
+  postgresql: siPostgresql.path,
+  mysql: siMysql.path,
+  redis: siRedis.path,
+  sqlite: siSqlite.path,
+};
+
+export const DB_LABELS: Record<DbType, string> = {
+  postgresql: "PostgreSQL",
+  mysql: "MySQL",
+  redis: "Redis",
+  sqlite: "SQLite",
+};
+
+interface DbIconProps {
+  type: DbType;
+  size?: number;
+  className?: string;
+}
+
+export function DbIcon({ type, size = 20, className }: DbIconProps) {
+  const path = DB_PATHS[type];
+  const color = DB_COLORS[type];
+  if (!path) return <span className="text-lg">❓</span>;
+
+  return (
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      width={size}
+      height={size}
+      className={className}
+      fill={color}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d={path} />
+    </svg>
+  );
+}
+
+// Keep backward compat for any legacy emoji usage
+export const DB_ICONS: Record<DbType, string> = {
+  postgresql: "🐘",
+  mysql: "🐬",
+  redis: "⚡",
+  sqlite: "🗄️",
+};

src/lib/types.test.ts

@@ -11,6 +11,10 @@ import type {
   ChangeStatus,
   DbViewerTab,
   ConnectionTestResult,
+  SchemaGraph,
+  TableNode,
+  GraphColumn,
+  Relationship,
 } from "./types";
 
 describe("ActiveView", () => {
@@ -358,4 +362,70 @@ describe("ConnectionTestResult", () => {
     expect(result.ok).toBe(false);
     expect(result.error).toBe("Connection refused");
   });
+});
+
+describe("Schema graph types", () => {
+  it("GraphColumn has correct shape", () => {
+    const col: GraphColumn = {
+      name: "user_id",
+      data_type: "integer",
+      is_pk: false,
+      is_fk: true,
+      is_unique: false,
+      fk_ref: ["public", "users", "id"],
+    };
+    expect(col.name).toBe("user_id");
+    expect(col.is_fk).toBe(true);
+    expect(col.fk_ref).toEqual(["public", "users", "id"]);
+  });
+
+  it("TableNode has correct shape", () => {
+    const node: TableNode = {
+      name: "orders",
+      schema: "public",
+      table_type: "TABLE",
+      columns: [
+        { name: "id", data_type: "integer", is_pk: true, is_fk: false, is_unique: true, fk_ref: null },
+        { name: "user_id", data_type: "integer", is_pk: false, is_fk: true, is_unique: false, fk_ref: ["public", "users", "id"] },
+      ],
+    };
+    expect(node.name).toBe("orders");
+    expect(node.columns).toHaveLength(2);
+  });
+
+  it("Relationship has correct shape", () => {
+    const rel: Relationship = {
+      source_schema: "public",
+      source_table: "orders",
+      source_column: "user_id",
+      target_schema: "public",
+      target_table: "users",
+      target_column: "id",
+      cardinality: "1:N",
+    };
+    expect(rel.cardinality).toBe("1:N");
+  });
+
+  it("SchemaGraph has correct shape", () => {
+    const graph: SchemaGraph = {
+      tables: [
+        { name: "users", schema: "public", table_type: "TABLE", columns: [] },
+      ],
+      relationships: [],
+    };
+    expect(graph.tables).toHaveLength(1);
+    expect(graph.relationships).toHaveLength(0);
+  });
+
+  it("fk_ref can be null for non-FK columns", () => {
+    const col: GraphColumn = {
+      name: "name",
+      data_type: "text",
+      is_pk: false,
+      is_fk: false,
+      is_unique: false,
+      fk_ref: null,
+    };
+    expect(col.fk_ref).toBeNull();
+  });
 });

src/lib/types.ts

@@ -278,4 +278,40 @@ export interface BackupJob {
   size_bytes: number | null;
   started_at: string;
   completed_at: string | null;
+}
+
+// ─── Schema Visualizer Types ────────────────────────────────────
+
+export interface GraphColumn {
+  name: string;
+  data_type: string;
+  is_pk: boolean;
+  is_fk: boolean;
+  is_unique: boolean;
+  is_nullable: boolean;
+  /** [referenced_schema, referenced_table, referenced_column] */
+  fk_ref: [string, string, string] | null;
+}
+
+export interface TableNode {
+  name: string;
+  schema: string;
+  table_type: string;
+  columns: GraphColumn[];
+}
+
+export interface Relationship {
+  source_schema: string;
+  source_table: string;
+  source_column: string;
+  target_schema: string;
+  target_table: string;
+  target_column: string;
+  /** Inferred cardinality: "1:1" | "1:N" | "N:M" */
+  cardinality: string;
+}
+
+export interface SchemaGraph {
+  tables: TableNode[];
+  relationships: Relationship[];
 }