From ec5d971913364a164a80717c5f96762433d2a62a Mon Sep 17 00:00:00 2001
From: blankll <zilisheng1996@gmail.com>
Date: Wed, 22 Jul 2026 23:23:20 +0800
Subject: [PATCH 01/26] feat(sidebar): add ER diagram button to database
 toolbar

Add a visible ER diagram button next to the refresh button in the database selector toolbar. Previously users could only access the ER diagram via right-click context menu on a table in the schema tree.

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 src/components/sidebar/DatabaseSelectorRow.vue | 12 ++++++++++++
 src/lang/enUS.ts                               |  1 +
 src/lang/zhCN.ts                               |  1 +
 3 files changed, 14 insertions(+)

diff --git a/src/components/sidebar/DatabaseSelectorRow.vue b/src/components/sidebar/DatabaseSelectorRow.vue
index 153600b..a6a9914 100644
--- a/src/components/sidebar/DatabaseSelectorRow.vue
+++ b/src/components/sidebar/DatabaseSelectorRow.vue
@@ -31,6 +31,7 @@ type ActionKind
     | 'backupDatabase'
     | 'exportDatabase'
     | 'dropDatabase'
+    | 'showErDiagram'
 
 const props = defineProps<Props>()
 
@@ -150,6 +151,17 @@ watch(() => props.connectionId, async (connId) => {
       </template>
     </SearchableSelect>
 
+    <Button
+      variant="ghost"
+      size="icon"
+      class="shrink-0 h-7 w-7"
+      :disabled="!props.modelValue"
+      :title="t('sidebar.database.erDiagramTooltip')"
+      @click="handleAction('showErDiagram')"
+    >
+      <span class="i-carbon-data-vis-3 h-3.5 w-3.5" />
+    </Button>
+
     <Button
       variant="ghost"
       size="icon"
diff --git a/src/lang/enUS.ts b/src/lang/enUS.ts
index dc5fe19..c2a576c 100644
--- a/src/lang/enUS.ts
+++ b/src/lang/enUS.ts
@@ -1489,6 +1489,7 @@ export const enUS = {
       selectDatabase: 'Select database',
       refresh: 'Refresh',
       refreshTooltip: 'Reload database list',
+      erDiagramTooltip: 'Show ER Diagram',
     },
     databases: {
       actions: {
diff --git a/src/lang/zhCN.ts b/src/lang/zhCN.ts
index 18e8942..3321601 100644
--- a/src/lang/zhCN.ts
+++ b/src/lang/zhCN.ts
@@ -1489,6 +1489,7 @@ export const zhCN = {
       selectDatabase: '选择数据库',
       refresh: '刷新',
       refreshTooltip: '重新加载数据库列表',
+      erDiagramTooltip: '查看 ER 关系图',
     },
     databases: {
       actions: {

From 18f32c604a9035a57fdbb3a1531912948509e22e Mon Sep 17 00:00:00 2001
From: blankll <zilisheng1996@gmail.com>
Date: Wed, 22 Jul 2026 23:23:24 +0800
Subject: [PATCH 02/26] feat(queries): wire ER diagram button to
 openErDiagramTab

Handle showErDiagram action in handleDatabaseAction to call tabStore.openErDiagramTab with the active connection, selected database, and schema.

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 src/pages/QueriesPage.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/pages/QueriesPage.vue b/src/pages/QueriesPage.vue
index 0b88d7b..a8482a9 100644
--- a/src/pages/QueriesPage.vue
+++ b/src/pages/QueriesPage.vue
@@ -691,6 +691,14 @@ function handleDatabaseAction(kind: string) {
     case 'exportDatabase':
       router.push('/transfer')
       break
+    case 'showErDiagram': {
+      const connId = getActiveConnectionId()
+      const db = selectedDatabase.value
+      if (connId && db) {
+        tabStore.openErDiagramTab(connId, db, selectedSchema.value || undefined)
+      }
+      break
+    }
     default:
       toast.info(t('sidebar.notImplemented'))
   }

From 6144773e841908d2abc7c9edd90c8a85d315fae0 Mon Sep 17 00:00:00 2001
From: blankll <zilisheng1996@gmail.com>
Date: Wed, 22 Jul 2026 23:23:32 +0800
Subject: [PATCH 03/26] chore: bump data-studio-agent to v0.1.4

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 src-tauri/Cargo.lock | 26 +++++++++++++-------------
 src-tauri/Cargo.toml |  2 +-
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index cde160e..92240cd 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -1491,8 +1491,8 @@ checksum = "a4ae5f15dda3c708c0ade84bfee31ccab44a3da4f88015ed22f63732abe300c8"
 
 [[package]]
 name = "data-studio-agent"
-version = "0.1.3"
-source = "git+https://github.com/geek-fun/data-studio-agent.git?tag=v0.1.3#596b43292a4768f987f1c44628c006a7a71145a9"
+version = "0.1.4"
+source = "git+https://github.com/geek-fun/data-studio-agent.git?tag=v0.1.4#a126632c55362ca99d2bbd44d0ff88524e0a5856"
 dependencies = [
  "async-openai",
  "async-trait",
@@ -1718,7 +1718,7 @@ dependencies = [
  "libc",
  "option-ext",
  "redox_users",
- "windows-sys 0.61.2",
+ "windows-sys 0.59.0",
 ]
 
 [[package]]
@@ -2010,7 +2010,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "39cab71617ae0d63f51a36d69f866391735b51691dbda63cf6f96d042b63efeb"
 dependencies = [
  "libc",
- "windows-sys 0.61.2",
+ "windows-sys 0.59.0",
 ]
 
 [[package]]
@@ -2978,7 +2978,7 @@ dependencies = [
  "libc",
  "percent-encoding",
  "pin-project-lite",
- "socket2 0.6.4",
+ "socket2 0.5.10",
  "system-configuration",
  "tokio",
  "tower-service",
@@ -2998,7 +2998,7 @@ dependencies = [
  "js-sys",
  "log",
  "wasm-bindgen",
- "windows-core 0.62.2",
+ "windows-core 0.61.2",
 ]
 
 [[package]]
@@ -5018,7 +5018,7 @@ dependencies = [
  "quinn-udp",
  "rustc-hash 2.1.2",
  "rustls 0.23.40",
- "socket2 0.6.4",
+ "socket2 0.5.10",
  "thiserror 2.0.18",
  "tokio",
  "tracing",
@@ -5055,9 +5055,9 @@ dependencies = [
  "cfg_aliases",
  "libc",
  "once_cell",
- "socket2 0.6.4",
+ "socket2 0.5.10",
  "tracing",
- "windows-sys 0.60.2",
+ "windows-sys 0.59.0",
 ]
 
 [[package]]
@@ -5679,7 +5679,7 @@ dependencies = [
  "errno",
  "libc",
  "linux-raw-sys",
- "windows-sys 0.61.2",
+ "windows-sys 0.59.0",
 ]
 
 [[package]]
@@ -5780,7 +5780,7 @@ dependencies = [
  "security-framework 3.7.0",
  "security-framework-sys",
  "webpki-root-certs",
- "windows-sys 0.61.2",
+ "windows-sys 0.59.0",
 ]
 
 [[package]]
@@ -7183,7 +7183,7 @@ dependencies = [
  "getrandom 0.4.3",
  "once_cell",
  "rustix",
- "windows-sys 0.61.2",
+ "windows-sys 0.59.0",
 ]
 
 [[package]]
@@ -8272,7 +8272,7 @@ version = "0.1.11"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c2a7b1c03c876122aa43f3020e6c3c3ee5c05081c9a00739faf7503aeba10d22"
 dependencies = [
- "windows-sys 0.61.2",
+ "windows-sys 0.59.0",
 ]
 
 [[package]]
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 3494b4a..e9566c5 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -88,7 +88,7 @@ http = "1"
 log = "0.4"
 futures = "0.3"
 rand = "0.8"
-data-studio-agent = { git = "https://github.com/geek-fun/data-studio-agent.git", tag = "v0.1.3" }
+data-studio-agent = { git = "https://github.com/geek-fun/data-studio-agent.git", tag = "v0.1.4" }
 
 # Archive extraction (JRE downloads)
 flate2 = "1.0"

From 78841101158c338432dbba7e564d220a1aa61367 Mon Sep 17 00:00:00 2001
From: blankll <zilisheng1996@gmail.com>
Date: Wed, 22 Jul 2026 23:25:35 +0800
Subject: [PATCH 04/26] refactor(sidebar): move ER diagram button to database
 actions dropdown

Remove standalone toolbar button, add 'ER Diagram' item to the database actions dropdown menu instead. This keeps the toolbar clean and groups all database-level actions together.

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 src/components/sidebar/DatabaseSelectorRow.vue | 15 ++++-----------
 src/lang/enUS.ts                               |  2 +-
 src/lang/zhCN.ts                               |  2 +-
 3 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/src/components/sidebar/DatabaseSelectorRow.vue b/src/components/sidebar/DatabaseSelectorRow.vue
index a6a9914..a6e93c9 100644
--- a/src/components/sidebar/DatabaseSelectorRow.vue
+++ b/src/components/sidebar/DatabaseSelectorRow.vue
@@ -151,17 +151,6 @@ watch(() => props.connectionId, async (connId) => {
       </template>
     </SearchableSelect>
 
-    <Button
-      variant="ghost"
-      size="icon"
-      class="shrink-0 h-7 w-7"
-      :disabled="!props.modelValue"
-      :title="t('sidebar.database.erDiagramTooltip')"
-      @click="handleAction('showErDiagram')"
-    >
-      <span class="i-carbon-data-vis-3 h-3.5 w-3.5" />
-    </Button>
-
     <Button
       variant="ghost"
       size="icon"
@@ -202,6 +191,10 @@ watch(() => props.connectionId, async (connId) => {
         <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 />
+        <DropdownMenuItem :disabled="!props.modelValue" @click="handleAction('showErDiagram')">
+          <span class="i-carbon-data-vis-3 mr-2 h-3.5 w-3.5" /> {{ t('sidebar.actionMenu.showErDiagram') }}
+        </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') }}
diff --git a/src/lang/enUS.ts b/src/lang/enUS.ts
index c2a576c..9c0a2f1 100644
--- a/src/lang/enUS.ts
+++ b/src/lang/enUS.ts
@@ -1489,7 +1489,6 @@ export const enUS = {
       selectDatabase: 'Select database',
       refresh: 'Refresh',
       refreshTooltip: 'Reload database list',
-      erDiagramTooltip: 'Show ER Diagram',
     },
     databases: {
       actions: {
@@ -1558,6 +1557,7 @@ export const enUS = {
       newView: 'New View',
       newFunction: 'New Function',
       newProcedure: 'New Procedure',
+      showErDiagram: 'ER Diagram',
       backupDatabase: 'Backup Database',
       exportDatabase: 'Export Database',
       dropDatabase: 'Drop Database',
diff --git a/src/lang/zhCN.ts b/src/lang/zhCN.ts
index 3321601..3da97da 100644
--- a/src/lang/zhCN.ts
+++ b/src/lang/zhCN.ts
@@ -1489,7 +1489,6 @@ export const zhCN = {
       selectDatabase: '选择数据库',
       refresh: '刷新',
       refreshTooltip: '重新加载数据库列表',
-      erDiagramTooltip: '查看 ER 关系图',
     },
     databases: {
       actions: {
@@ -1558,6 +1557,7 @@ export const zhCN = {
       newView: '新建视图',
       newFunction: '新建函数',
       newProcedure: '新建存储过程',
+      showErDiagram: 'ER 关系图',
       backupDatabase: '备份数据库',
       exportDatabase: '导出数据库',
       dropDatabase: '删除数据库',

From 0795ec6c0675caa4014620a1785768a967b0371f Mon Sep 17 00:00:00 2001
From: blankll <zilisheng1996@gmail.com>
Date: Wed, 22 Jul 2026 23:25:39 +0800
Subject: [PATCH 05/26] fix(queries): show all schemas in database-level ER
 diagram

When opening ER diagram from database toolbar, omit the schema parameter so all tables across all schemas are displayed instead of only the currently selected schema.

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 src/pages/QueriesPage.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/QueriesPage.vue b/src/pages/QueriesPage.vue
index a8482a9..fba5d31 100644
--- a/src/pages/QueriesPage.vue
+++ b/src/pages/QueriesPage.vue
@@ -694,8 +694,9 @@ function handleDatabaseAction(kind: string) {
     case 'showErDiagram': {
       const connId = getActiveConnectionId()
       const db = selectedDatabase.value
+      // Database-level ER diagram: omit schema to show all tables across all schemas
       if (connId && db) {
-        tabStore.openErDiagramTab(connId, db, selectedSchema.value || undefined)
+        tabStore.openErDiagramTab(connId, db, undefined)
       }
       break
     }

From 7a0cbda4a01dcf6a3690ba405529acbcdf6caf93 Mon Sep 17 00:00:00 2001
From: blankll <zilisheng1996@gmail.com>
Date: Wed, 22 Jul 2026 23:34:16 +0800
Subject: [PATCH 06/26] feat(er-diagram): improve zoom, add zoom buttons and
 schema selector, replace emoji icons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Zoom: use proportional scaling based on deltaY for better trackpad precision
- Toolbar: add zoom in (+) and zoom out (-) buttons with step factor 1.3x
- Schema: add schema selector dropdown before filter input, default 'All Schemas'
- Icons: replace 🔑🔗• emoji with clean inline SVG icons (key, link, circle)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 src/components/er-diagram/ErDiagramView.vue | 120 +++++++++++++++++---
 src/lang/enUS.ts                            |   5 +-
 src/lang/zhCN.ts                            |   5 +-
 3 files changed, 111 insertions(+), 19 deletions(-)

diff --git a/src/components/er-diagram/ErDiagramView.vue b/src/components/er-diagram/ErDiagramView.vue
index 9800d06..815126c 100644
--- a/src/components/er-diagram/ErDiagramView.vue
+++ b/src/components/er-diagram/ErDiagramView.vue
@@ -17,8 +17,10 @@ import {
 } from '@/components/ui/alert-dialog'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Spinner } from '@/components/ui/spinner'
 import { getForeignKeys } from '@/datasources/erDiagramApi'
+import { useDatabaseStore } from '@/store/databaseStore'
 
 // ─── Props ───────────────────────────────────────────
 const props = defineProps<{
@@ -102,6 +104,20 @@ const error = ref<string | null>(null)
 const showWarning = ref(false)
 const svgContainerRef = ref<HTMLElement | null>(null)
 
+// ─── Schema selector ──────────────────────────────
+const databaseStore = useDatabaseStore()
+const availableSchemas = ref<string[]>([])
+const localSchema = ref<string>(props.schema ?? '')
+
+const supportsSchemas = computed(() =>
+  availableSchemas.value.length > 0,
+)
+
+watch(() => props.schema, (val) => {
+  if (val !== undefined)
+    localSchema.value = val
+})
+
 // ─── Computed ─────────────────────────────────────────
 const filteredTables = computed(() => {
   if (!searchQuery.value.trim())
@@ -252,10 +268,24 @@ function computeLayout() {
 }
 
 // ─── Data Fetching ────────────────────────────────────
+async function fetchAvailableSchemas() {
+  if (!props.connectionId)
+    return
+  try {
+    const meta = databaseStore.metadata[props.connectionId]
+    if (meta?.schemas[props.database]) {
+      availableSchemas.value = meta.schemas[props.database]
+    }
+  }
+  catch {
+    availableSchemas.value = []
+  }
+}
+
 async function fetchSchemaData() {
   loading.value = true
   try {
-    const schema = props.schema ?? null
+    const schema = localSchema.value || null
 
     // Fetch tables and foreign keys in parallel
     const [tableList, fkList] = await Promise.all([
@@ -347,8 +377,8 @@ function endPan() {
 }
 
 function onWheel(e: WheelEvent) {
-  const delta = e.deltaY > 0 ? -0.1 : 0.1
-  zoomLevel.value = Math.max(0.1, Math.min(3, zoomLevel.value + delta))
+  const delta = -e.deltaY / 500
+  zoomLevel.value = Math.max(0.1, Math.min(3, zoomLevel.value * (1 + delta)))
 }
 
 function fitToScreen() {
@@ -385,8 +415,14 @@ useResizeObserver(svgContainerRef, () => {
   // so no re-layout needed on resize.
 })
 
+// ─── Watch for schema change ──────────────────────────
+watch(localSchema, () => {
+  fetchSchemaData()
+})
+
 // ─── Lifecycle ────────────────────────────────────────
-onMounted(() => {
+onMounted(async () => {
+  await fetchAvailableSchemas()
   fetchSchemaData()
 })
 </script>
@@ -395,6 +431,28 @@ onMounted(() => {
   <div class="er-diagram-view bg-background flex flex-col h-full">
     <!-- ── Toolbar ──────────────────────────────────── -->
     <div class="px-3 py-2 border-b bg-muted/30 flex gap-2 items-center">
+      <!-- Schema selector -->
+      <div v-if="supportsSchemas" class="w-44">
+        <Select v-model="localSchema" @update:model-value="localSchema = $event">
+          <SelectTrigger class="text-xs h-8">
+            <SelectValue :placeholder="t('components.databaseBrowser.erDiagram.allSchemas')" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="" class="text-xs">
+              {{ t('components.databaseBrowser.erDiagram.allSchemas') }}
+            </SelectItem>
+            <SelectItem
+              v-for="s in availableSchemas"
+              :key="s"
+              :value="s"
+              class="text-xs font-mono"
+            >
+              {{ s }}
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
       <!-- Search -->
       <div class="flex-1 max-w-xs relative">
         <svg
@@ -507,16 +565,38 @@ onMounted(() => {
         </svg>
       </Button>
 
-      <!-- Zoom indicator -->
-      <span
-        class="text-xs text-muted-foreground text-right min-w-[4rem] tabular-nums"
-      >
-        {{
-          t('components.databaseBrowser.erDiagram.zoom', {
-            percentage: Math.round(zoomLevel * 100),
-          })
-        }}
-      </span>
+      <!-- Zoom controls -->
+      <div class="flex gap-0.5 items-center">
+        <Button
+          variant="ghost"
+          size="icon"
+          class="h-7 w-7"
+          :disabled="zoomLevel <= 0.1"
+          :title="t('components.databaseBrowser.erDiagram.zoomOut')"
+          @click="zoomLevel = Math.max(0.1, +(zoomLevel / 1.3).toFixed(2))"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="8" y1="11" x2="14" y2="11"/></svg>
+        </Button>
+        <span
+          class="text-xs text-muted-foreground min-w-[3rem] text-center tabular-nums"
+        >
+          {{
+            t('components.databaseBrowser.erDiagram.zoom', {
+              percentage: Math.round(zoomLevel * 100),
+            })
+          }}
+        </span>
+        <Button
+          variant="ghost"
+          size="icon"
+          class="h-7 w-7"
+          :disabled="zoomLevel >= 3"
+          :title="t('components.databaseBrowser.erDiagram.zoomIn')"
+          @click="zoomLevel = Math.min(3, +(zoomLevel * 1.3).toFixed(2))"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/></svg>
+        </Button>
+      </div>
     </div>
 
     <!-- ── Large Schema Warning ─────────────────────── -->
@@ -672,7 +752,9 @@ onMounted(() => {
                   <span class="er-column-name">{{ col.name }}</span>
                   <span class="er-column-type">{{ col.data_type }}</span>
                   <span class="er-column-markers">
-                    <span v-if="col.is_primary_key" class="er-pk">🔑</span>
+                    <span v-if="col.is_primary_key" class="er-pk">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"/><circle cx="16.5" cy="7.5" r=".5" fill="currentColor"/></svg>
+                    </span>
                     <span
                       v-if="
                         node.table.foreignKeys.some(
@@ -682,8 +764,12 @@ onMounted(() => {
                         )
                       "
                       class="er-fk"
-                    >🔗</span>
-                    <span v-if="col.nullable === false" class="er-nullable">•</span>
+                    >
+                      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
+                    </span>
+                    <span v-if="col.nullable === false" class="er-nullable">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/></svg>
+                    </span>
                   </span>
                 </div>
               </div>
diff --git a/src/lang/enUS.ts b/src/lang/enUS.ts
index 9c0a2f1..ddd98d4 100644
--- a/src/lang/enUS.ts
+++ b/src/lang/enUS.ts
@@ -1117,7 +1117,10 @@ export const enUS = {
       },
       erDiagram: {
         title: 'ER Diagram',
-        zoom: 'Zoom: {percentage}%',
+        zoom: '{percentage}%',
+        zoomIn: 'Zoom In',
+        zoomOut: 'Zoom Out',
+        allSchemas: 'All Schemas',
         fitToScreen: 'Fit to Screen',
         searchPlaceholder: 'Filter tables...',
         largeSchemaWarning: 'This schema has {count} tables. Displaying all may be dense. Continue?',
diff --git a/src/lang/zhCN.ts b/src/lang/zhCN.ts
index 3da97da..78eee86 100644
--- a/src/lang/zhCN.ts
+++ b/src/lang/zhCN.ts
@@ -1117,7 +1117,10 @@ export const zhCN = {
       },
       erDiagram: {
         title: 'ER图表',
-        zoom: '缩放: {percentage}%',
+        zoom: '{percentage}%',
+        zoomIn: '放大',
+        zoomOut: '缩小',
+        allSchemas: '所有模式',
         fitToScreen: '适应屏幕',
         searchPlaceholder: '过滤表...',
         largeSchemaWarning: '此模式包含 {count} 张表，显示全部可能会过于密集，是否继续？',

From b48ba5d00232e0086572111ed6af9258c8f0955b Mon Sep 17 00:00:00 2001
From: blankll <zilisheng1996@gmail.com>
Date: Wed, 22 Jul 2026 23:36:41 +0800
Subject: [PATCH 07/26] fix(er-diagram): fetch schemas from backend if not
 cached

Schema selector was not showing because available schemas may not be populated in the store yet. Add fallback to call databaseStore.fetchSchemas when cache is empty.

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 src/components/er-diagram/ErDiagramView.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/er-diagram/ErDiagramView.vue b/src/components/er-diagram/ErDiagramView.vue
index 815126c..c213a24 100644
--- a/src/components/er-diagram/ErDiagramView.vue
+++ b/src/components/er-diagram/ErDiagramView.vue
@@ -273,8 +273,15 @@ async function fetchAvailableSchemas() {
     return
   try {
     const meta = databaseStore.metadata[props.connectionId]
-    if (meta?.schemas[props.database]) {
-      availableSchemas.value = meta.schemas[props.database]
+    const cached = meta?.schemas[props.database]
+    if (cached && cached.length > 0) {
+      availableSchemas.value = cached
+    }
+    else {
+      // Not cached yet — fetch from backend
+      await databaseStore.fetchSchemas(props.connectionId, props.database)
+      const refreshed = databaseStore.metadata[props.connectionId]?.schemas[props.database]
+      availableSchemas.value = refreshed ?? []
     }
   }
   catch {

From 7ad462570ebcece87949eed422b772942e383f71 Mon Sep 17 00:00:00 2001
From: blankll <zilisheng1996@gmail.com>
Date: Wed, 22 Jul 2026 23:39:36 +0800
Subject: [PATCH 08/26] fix(er-diagram): fix Select empty value issue and
 reorder zoom buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace empty string '' with '__all__' for the 'all schemas' option to avoid Radix Vue Select issues
- Reorder zoom controls to: zoom out → zoom in → percentage (matching user expectation)
- Add z-[100] to SelectContent to ensure dropdown renders above other elements
- Add schemaParam computed to map '__all__' → null for API calls

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 src/components/er-diagram/ErDiagramView.vue | 37 ++++++++++++---------
 1 file changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/components/er-diagram/ErDiagramView.vue b/src/components/er-diagram/ErDiagramView.vue
index c213a24..9b19913 100644
--- a/src/components/er-diagram/ErDiagramView.vue
+++ b/src/components/er-diagram/ErDiagramView.vue
@@ -107,15 +107,20 @@ const svgContainerRef = ref<HTMLElement | null>(null)
 // ─── Schema selector ──────────────────────────────
 const databaseStore = useDatabaseStore()
 const availableSchemas = ref<string[]>([])
-const localSchema = ref<string>(props.schema ?? '')
+const localSchema = ref<string>(props.schema ?? '__all__')
 
 const supportsSchemas = computed(() =>
   availableSchemas.value.length > 0,
 )
 
+// Map local schema value to API parameter: '__all__' → null (fetch all)
+const schemaParam = computed(() =>
+  localSchema.value === '__all__' ? null : localSchema.value,
+)
+
 watch(() => props.schema, (val) => {
   if (val !== undefined)
-    localSchema.value = val
+    localSchema.value = val ?? '__all__'
 })
 
 // ─── Computed ─────────────────────────────────────────
@@ -292,7 +297,7 @@ async function fetchAvailableSchemas() {
 async function fetchSchemaData() {
   loading.value = true
   try {
-    const schema = localSchema.value || null
+    const schema = schemaParam.value
 
     // Fetch tables and foreign keys in parallel
     const [tableList, fkList] = await Promise.all([
@@ -440,12 +445,12 @@ onMounted(async () => {
     <div class="px-3 py-2 border-b bg-muted/30 flex gap-2 items-center">
       <!-- Schema selector -->
       <div v-if="supportsSchemas" class="w-44">
-        <Select v-model="localSchema" @update:model-value="localSchema = $event">
+        <Select v-model="localSchema">
           <SelectTrigger class="text-xs h-8">
             <SelectValue :placeholder="t('components.databaseBrowser.erDiagram.allSchemas')" />
           </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="" class="text-xs">
+          <SelectContent :side-offset="4" :align="'start'" class="z-[100]">
+            <SelectItem value="__all__" class="text-xs">
               {{ t('components.databaseBrowser.erDiagram.allSchemas') }}
             </SelectItem>
             <SelectItem
@@ -572,7 +577,7 @@ onMounted(async () => {
         </svg>
       </Button>
 
-      <!-- Zoom controls -->
+      <!-- Zoom controls: zoom out, zoom in, percentage -->
       <div class="flex gap-0.5 items-center">
         <Button
           variant="ghost"
@@ -584,15 +589,6 @@ onMounted(async () => {
         >
           <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="8" y1="11" x2="14" y2="11"/></svg>
         </Button>
-        <span
-          class="text-xs text-muted-foreground min-w-[3rem] text-center tabular-nums"
-        >
-          {{
-            t('components.databaseBrowser.erDiagram.zoom', {
-              percentage: Math.round(zoomLevel * 100),
-            })
-          }}
-        </span>
         <Button
           variant="ghost"
           size="icon"
@@ -603,6 +599,15 @@ onMounted(async () => {
         >
           <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/></svg>
         </Button>
+        <span
+          class="text-xs text-muted-foreground min-w-[3rem] text-center tabular-nums"
+        >
+          {{
+            t('components.databaseBrowser.erDiagram.zoom', {
+              percentage: Math.round(zoomLevel * 100),
+            })
+          }}
+        </span>
       </div>
     </div>
 

From eea670bcf440f8788a4507cdc17e1c4ff6a5aa10 Mon Sep 17 00:00:00 2001
From: blankll <zilisheng1996@gmail.com>
Date: Wed, 22 Jul 2026 23:40:09 +0800
Subject: [PATCH 09/26] fix(er-diagram): fetch schemas via direct invoke
 instead of store

Use invoke('list_schemas', ...) directly to avoid any Pinia store reactivity issues when the store hasn't cached schemas for the current database yet.

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 src/components/er-diagram/ErDiagramView.vue | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/er-diagram/ErDiagramView.vue b/src/components/er-diagram/ErDiagramView.vue
index 9b19913..63ea781 100644
--- a/src/components/er-diagram/ErDiagramView.vue
+++ b/src/components/er-diagram/ErDiagramView.vue
@@ -281,12 +281,18 @@ async function fetchAvailableSchemas() {
     const cached = meta?.schemas[props.database]
     if (cached && cached.length > 0) {
       availableSchemas.value = cached
+      return
     }
-    else {
-      // Not cached yet — fetch from backend
-      await databaseStore.fetchSchemas(props.connectionId, props.database)
-      const refreshed = databaseStore.metadata[props.connectionId]?.schemas[props.database]
-      availableSchemas.value = refreshed ?? []
+    // Not cached — fetch from backend directly
+    const result = await invoke<string[]>('list_schemas', {
+      connectionId: props.connectionId,
+      database: props.database,
+    })
+    availableSchemas.value = result ?? []
+    // Also cache in store for future use
+    const m = databaseStore.metadata[props.connectionId]
+    if (m && result) {
+      m.schemas[props.database] = result
     }
   }
   catch {

From f292a449f6d4767d0db646a49d252cc2afbd6301 Mon Sep 17 00:00:00 2001
From: blankll <zilisheng1996@gmail.com>
Date: Wed, 22 Jul 2026 23:49:13 +0800
Subject: [PATCH 10/26] fix(er-diagram): fix lint error - remove useless v-bind
 on string literal

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 src/components/er-diagram/ErDiagramView.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/er-diagram/ErDiagramView.vue b/src/components/er-diagram/ErDiagramView.vue
index 63ea781..e51a52d 100644
--- a/src/components/er-diagram/ErDiagramView.vue
+++ b/src/components/er-diagram/ErDiagramView.vue
@@ -455,7 +455,7 @@ onMounted(async () => {
           <SelectTrigger class="text-xs h-8">
             <SelectValue :placeholder="t('components.databaseBrowser.erDiagram.allSchemas')" />
           </SelectTrigger>
-          <SelectContent :side-offset="4" :align="'start'" class="z-[100]">
+          <SelectContent :side-offset="4" align="start" class="z-[100]">
             <SelectItem value="__all__" class="text-xs">
               {{ t('components.databaseBrowser.erDiagram.allSchemas') }}
             </SelectItem>
@@ -593,7 +593,7 @@ onMounted(async () => {
           :title="t('components.databaseBrowser.erDiagram.zoomOut')"
           @click="zoomLevel = Math.max(0.1, +(zoomLevel / 1.3).toFixed(2))"
         >
-          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="8" y1="11" x2="14" y2="11"/></svg>
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" /><line x1="8" y1="11" x2="14" y2="11" /></svg>
         </Button>
         <Button
           variant="ghost"
@@ -603,10 +603,10 @@ onMounted(async () => {
           :title="t('components.databaseBrowser.erDiagram.zoomIn')"
           @click="zoomLevel = Math.min(3, +(zoomLevel * 1.3).toFixed(2))"
         >
-          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/></svg>
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" /><line x1="11" y1="8" x2="11" y2="14" /><line x1="8" y1="11" x2="14" y2="11" /></svg>
         </Button>
         <span
-          class="text-xs text-muted-foreground min-w-[3rem] text-center tabular-nums"
+          class="text-xs text-muted-foreground text-center min-w-[3rem] tabular-nums"
         >
           {{
             t('components.databaseBrowser.erDiagram.zoom', {
@@ -771,7 +771,7 @@ onMounted(async () => {
                   <span class="er-column-type">{{ col.data_type }}</span>
                   <span class="er-column-markers">
                     <span v-if="col.is_primary_key" class="er-pk">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"/><circle cx="16.5" cy="7.5" r=".5" fill="currentColor"/></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z" /><circle cx="16.5" cy="7.5" r=".5" fill="currentColor" /></svg>
                     </span>
                     <span
                       v-if="
@@ -783,10 +783,10 @@ onMounted(async () => {
                       "
                       class="er-fk"
                     >
-                      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" /><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" /></svg>
                     </span>
                     <span v-if="col.nullable === false" class="er-nullable">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /></svg>
                     </span>
                   </span>
                 </div>

From 162699253ff89fb4b41fe7000e371a870aa5d9ec Mon Sep 17 00:00:00 2001
From: blankll <zilisheng1996@gmail.com>
Date: Wed, 22 Jul 2026 23:59:43 +0800
Subject: [PATCH 11/26] fix(er-diagram): improve interaction, add node
 dragging, fix layout issues

- Click: remove opacity dimming on non-selected tables, just highlight selected + connected table cards
- Drag: add mouse-drag to reposition table nodes on the canvas
- Expand button: add whitespace-nowrap and increase button height to prevent truncation
- Nullable indicator: remove confusing circle icon (NOT NULL is the default assumption)
- Edge dimming: remove opacity reduction on non-highlighted edges

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 src/components/er-diagram/ErDiagramView.vue | 74 ++++++++++++++++-----
 1 file changed, 56 insertions(+), 18 deletions(-)

diff --git a/src/components/er-diagram/ErDiagramView.vue b/src/components/er-diagram/ErDiagramView.vue
index e51a52d..f7186e6 100644
--- a/src/components/er-diagram/ErDiagramView.vue
+++ b/src/components/er-diagram/ErDiagramView.vue
@@ -70,7 +70,7 @@ type RenderEdge = {
 const NODE_WIDTH = 220
 const COL_HEIGHT = 28
 const HEADER_HEIGHT = 36
-const EXPAND_BTN_HEIGHT = 28
+const EXPAND_BTN_HEIGHT = 30
 const CARD_PADDING = 8
 
 function calcNodeHeight(table: TableData, isExpanded: boolean): number {
@@ -104,6 +104,11 @@ const error = ref<string | null>(null)
 const showWarning = ref(false)
 const svgContainerRef = ref<HTMLElement | null>(null)
 
+// ─── Node drag state ──────────────────────────────
+const draggingNodeId = ref<string | null>(null)
+const dragStartPos = ref({ x: 0, y: 0 })
+const dragNodeStart = ref({ x: 0, y: 0 })
+
 // ─── Schema selector ──────────────────────────────
 const databaseStore = useDatabaseStore()
 const availableSchemas = ref<string[]>([])
@@ -394,6 +399,42 @@ function endPan() {
   isPanning.value = false
 }
 
+// ─── Node Drag Handlers ───────────────────────────
+function onNodeMouseDown(e: MouseEvent, nodeId: string) {
+  if (e.button !== 0)
+    return
+  const pos = nodePositions.value.get(nodeId)
+  if (!pos)
+    return
+  draggingNodeId.value = nodeId
+  dragStartPos.value = { x: e.clientX, y: e.clientY }
+  dragNodeStart.value = { x: pos.x, y: pos.y }
+  document.addEventListener('mousemove', onNodeMouseMove)
+  document.addEventListener('mouseup', onNodeMouseUp)
+}
+
+function onNodeMouseMove(e: MouseEvent) {
+  if (!draggingNodeId.value)
+    return
+  const dx = (e.clientX - dragStartPos.value.x) / zoomLevel.value
+  const dy = (e.clientY - dragStartPos.value.y) / zoomLevel.value
+  const positions = new Map(nodePositions.value)
+  const current = positions.get(draggingNodeId.value)
+  if (current) {
+    positions.set(draggingNodeId.value, {
+      x: dragNodeStart.value.x + dx,
+      y: dragNodeStart.value.y + dy,
+    })
+    nodePositions.value = positions
+  }
+}
+
+function onNodeMouseUp() {
+  draggingNodeId.value = null
+  document.removeEventListener('mousemove', onNodeMouseMove)
+  document.removeEventListener('mouseup', onNodeMouseUp)
+}
+
 function onWheel(e: WheelEvent) {
   const delta = -e.deltaY / 500
   zoomLevel.value = Math.max(0.1, Math.min(3, zoomLevel.value * (1 + delta)))
@@ -733,7 +774,6 @@ onMounted(async () => {
                 : 'hsl(var(--muted-foreground))'
             "
             :stroke-width="edge.isHighlighted ? 2 : 1"
-            :opacity="edge.isHighlighted ? 1 : 0.4"
             marker-end="url(#er-arrowhead)"
           />
         </g>
@@ -743,7 +783,9 @@ onMounted(async () => {
           v-for="node in renderNodes"
           :key="node.id"
           :transform="`translate(${node.x}, ${node.y})`"
-          :opacity="selectedTableId ? (node.isHighlighted ? 1 : 0.3) : 1"
+          class="er-table-group"
+          :class="{ 'er-table-group--dragging': draggingNodeId === node.id }"
+          @mousedown.prevent="onNodeMouseDown($event, node.id)"
           @click.stop="selectTable(node.id)"
         >
           <foreignObject :width="node.width" :height="node.height">
@@ -751,8 +793,6 @@ onMounted(async () => {
               class="er-table-card"
               :class="{
                 'er-table-card--selected': selectedTableId === node.id,
-                'er-table-card--dimmed':
-                  selectedTableId && !node.isHighlighted,
               }"
             >
               <!-- Table header -->
@@ -785,9 +825,7 @@ onMounted(async () => {
                     >
                       <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" /><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" /></svg>
                     </span>
-                    <span v-if="col.nullable === false" class="er-nullable">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /></svg>
-                    </span>
+
                   </span>
                 </div>
               </div>
@@ -795,7 +833,7 @@ onMounted(async () => {
               <!-- Show more / less toggle -->
               <button
                 v-if="node.showExpandButton"
-                class="er-expand-btn"
+                class="er-expand-btn whitespace-nowrap"
                 @click.stop="toggleExpand(node.id)"
               >
                 {{
@@ -815,8 +853,16 @@ onMounted(async () => {
 </template>
 
 <style scoped>
+.er-table-group {
+  cursor: grab;
+}
+
+.er-table-group--dragging {
+  cursor: grabbing;
+}
+
 .er-table-card {
-  @apply bg-card border border-border rounded-lg shadow-sm overflow-hidden;
+  @apply bg-card border border-border rounded-lg shadow-sm;
   width: 220px;
   font-size: 12px;
   user-select: none;
@@ -826,10 +872,6 @@ onMounted(async () => {
   @apply border-primary ring-1 ring-primary shadow-md;
 }
 
-.er-table-card--dimmed {
-  opacity: 0.7;
-}
-
 .er-table-header {
   @apply bg-muted px-3 py-2 font-semibold text-sm border-b border-border;
   white-space: nowrap;
@@ -868,10 +910,6 @@ onMounted(async () => {
   @apply text-blue-500;
 }
 
-.er-nullable {
-  @apply text-muted-foreground;
-}
-
 .er-expand-btn {
   @apply w-full text-xs text-muted-foreground hover:text-foreground py-1.5 border-t border-border bg-muted/30 hover:bg-muted/50 transition-colors;
 }

From e5b7af2b6404223826237c9e3f79a2552dde3dc6 Mon Sep 17 00:00:00 2001
From: blankll <zilisheng1996@gmail.com>
Date: Thu, 23 Jul 2026 00:11:51 +0800
Subject: [PATCH 12/26] feat(er-diagram): add orthogonal routing, ctrl+zoom,
 focus mode, info badges

- Orthogonal path routing: relationship lines now route around table cards with collision avoidance, replacing straight dagre edges

- Ctrl/Meta+Wheel zoom: zoom now requires ctrl/meta modifier, centered on mouse position. Plain wheel scrolls vertically

- Focus mode: clicking a table filters the view to only show the selected table and its directly related tables (via FK)

- Info badges: toolbar shows table count and relationship count badges

- Column marker alignment: non-PK/FK columns now get an empty spacer to keep all column text aligned

- Gesture support: added gesturestart/gesturechange handlers for trackpad pinch-to-zoom

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 src/components/er-diagram/ErDiagramView.vue | 550 +++++++++++---------
 1 file changed, 293 insertions(+), 257 deletions(-)

diff --git a/src/components/er-diagram/ErDiagramView.vue b/src/components/er-diagram/ErDiagramView.vue
index f7186e6..db6b7e9 100644
--- a/src/components/er-diagram/ErDiagramView.vue
+++ b/src/components/er-diagram/ErDiagramView.vue
@@ -4,7 +4,7 @@ import type { ColumnInfo } from '@/types/connection'
 import { invoke } from '@tauri-apps/api/core'
 import { useResizeObserver } from '@vueuse/core'
 import dagre from 'dagre'
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import {
   AlertDialog,
@@ -15,6 +15,7 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog'
+import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
@@ -72,6 +73,8 @@ const COL_HEIGHT = 28
 const HEADER_HEIGHT = 36
 const EXPAND_BTN_HEIGHT = 30
 const CARD_PADDING = 8
+const ROUTE_PADDING = 56
+const ROUTE_BLOCK_MARGIN = 18
 
 function calcNodeHeight(table: TableData, isExpanded: boolean): number {
   const colCount = isExpanded
@@ -98,6 +101,7 @@ const zoomLevel = ref(1)
 const panOffset = ref({ x: 0, y: 0 })
 const isPanning = ref(false)
 const panStart = ref({ x: 0, y: 0 })
+const gestureStartZoom = ref(1)
 
 const loading = ref(true)
 const error = ref<string | null>(null)
@@ -118,7 +122,6 @@ const supportsSchemas = computed(() =>
   availableSchemas.value.length > 0,
 )
 
-// Map local schema value to API parameter: '__all__' → null (fetch all)
 const schemaParam = computed(() =>
   localSchema.value === '__all__' ? null : localSchema.value,
 )
@@ -128,23 +131,45 @@ watch(() => props.schema, (val) => {
     localSchema.value = val ?? '__all__'
 })
 
-// ─── Computed ─────────────────────────────────────────
-const filteredTables = computed(() => {
-  if (!searchQuery.value.trim())
-    return tables.value
-  const q = searchQuery.value.toLowerCase()
-  return tables.value.filter(t => t.name.toLowerCase().includes(q))
+// ─── Relationships from foreign keys ──────────────
+const allRelationships = computed(() =>
+  foreignKeys.value.map(fk => ({
+    sourceTable: fk.source_table,
+    targetTable: fk.referenced_table,
+  })),
+)
+
+// ─── Focus mode ───────────────────────────────────
+const focusMode = computed(() => selectedTableId.value !== null)
+
+const displayedTables = computed(() => {
+  let result = tables.value
+  if (searchQuery.value.trim()) {
+    const q = searchQuery.value.toLowerCase()
+    result = result.filter(t => t.name.toLowerCase().includes(q))
+  }
+  if (focusMode.value && selectedTableId.value) {
+    const related = new Set<string>([selectedTableId.value])
+    for (const rel of allRelationships.value) {
+      if (rel.sourceTable === selectedTableId.value)
+        related.add(rel.targetTable)
+      if (rel.targetTable === selectedTableId.value)
+        related.add(rel.sourceTable)
+    }
+    result = result.filter(t => related.has(t.name))
+  }
+  return result
 })
 
-const filteredTableNames = computed(
-  () => new Set(filteredTables.value.map(t => t.name)),
+const displayedTableNames = computed(
+  () => new Set(displayedTables.value.map(t => t.name)),
 )
 
-const filteredForeignKeys = computed(() =>
-  foreignKeys.value.filter(
-    fk =>
-      filteredTableNames.value.has(fk.source_table)
-      && filteredTableNames.value.has(fk.referenced_table),
+const displayedRelationships = computed(() =>
+  allRelationships.value.filter(
+    rel =>
+      displayedTableNames.value.has(rel.sourceTable)
+      && displayedTableNames.value.has(rel.targetTable),
   ),
 )
 
@@ -152,17 +177,17 @@ const highlightedTables = computed(() => {
   if (!selectedTableId.value)
     return new Set<string>()
   const connected = new Set<string>([selectedTableId.value])
-  for (const fk of foreignKeys.value) {
-    if (fk.source_table === selectedTableId.value)
-      connected.add(fk.referenced_table)
-    if (fk.referenced_table === selectedTableId.value)
-      connected.add(fk.source_table)
+  for (const rel of allRelationships.value) {
+    if (rel.sourceTable === selectedTableId.value)
+      connected.add(rel.targetTable)
+    if (rel.targetTable === selectedTableId.value)
+      connected.add(rel.sourceTable)
   }
   return connected
 })
 
 const renderNodes = computed<RenderNode[]>(() => {
-  return filteredTables.value
+  return displayedTables.value
     .map((table) => {
       const pos = nodePositions.value.get(table.name)
       if (!pos)
@@ -190,25 +215,147 @@ const renderNodes = computed<RenderNode[]>(() => {
     .filter((n): n is RenderNode => n !== null)
 })
 
+// ─── Orthogonal path routing ──────────────────────
+type TableRect = {
+  name: string
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+function getTableRect(tableName: string): TableRect | null {
+  const table = tables.value.find(t => t.name === tableName)
+  const pos = nodePositions.value.get(tableName)
+  if (!table || !pos)
+    return null
+  const height = calcNodeHeight(table, expandedTables.value.has(tableName))
+  return {
+    name: tableName,
+    x: pos.x - NODE_WIDTH / 2,
+    y: pos.y - height / 2,
+    width: NODE_WIDTH,
+    height,
+  }
+}
+
+function rangesOverlap(a1: number, a2: number, b1: number, b2: number): boolean {
+  return Math.max(a1, b1) <= Math.min(a2, b2)
+}
+
+function routeSideX(rect: TableRect, routeX: number, offset = 0): number {
+  if (routeX < rect.x)
+    return rect.x - offset
+  return rect.x + rect.width + offset
+}
+
+function tableRects(): TableRect[] {
+  return displayedTables.value
+    .map(t => getTableRect(t.name))
+    .filter((r): r is TableRect => r !== null)
+}
+
+function isVerticalRouteBlocked(routeX: number, y1: number, y2: number, ignored: Set<string>): boolean {
+  const top = Math.min(y1, y2)
+  const bottom = Math.max(y1, y2)
+  return tableRects().some(
+    r =>
+      !ignored.has(r.name)
+      && routeX >= r.x - ROUTE_BLOCK_MARGIN
+      && routeX <= r.x + r.width + ROUTE_BLOCK_MARGIN
+      && rangesOverlap(top, bottom, r.y - ROUTE_BLOCK_MARGIN, r.y + r.height + ROUTE_BLOCK_MARGIN),
+  )
+}
+
+function isHorizontalRouteBlocked(y: number, x1: number, x2: number, ignored: Set<string>): boolean {
+  const left = Math.min(x1, x2)
+  const right = Math.max(x1, x2)
+  return tableRects().some(
+    r =>
+      !ignored.has(r.name)
+      && y >= r.y - ROUTE_BLOCK_MARGIN
+      && y <= r.y + r.height + ROUTE_BLOCK_MARGIN
+      && rangesOverlap(left, right, r.x - ROUTE_BLOCK_MARGIN, r.x + r.width + ROUTE_BLOCK_MARGIN),
+  )
+}
+
+function candidateRouteXs(source: TableRect, target: TableRect): number[] {
+  const candidates = new Set<number>()
+  const minLeft = Math.min(source.x, target.x)
+  const maxRight = Math.max(source.x + source.width, target.x + target.width)
+
+  candidates.add(minLeft - ROUTE_PADDING)
+  candidates.add(maxRight + ROUTE_PADDING)
+
+  if (source.x + source.width + ROUTE_PADDING <= target.x)
+    candidates.add((source.x + source.width + target.x) / 2)
+  if (target.x + target.width + ROUTE_PADDING <= source.x)
+    candidates.add((target.x + target.width + source.x) / 2)
+
+  const columns = [...new Set(tableRects().map(r => r.x))].sort((a, b) => a - b)
+  for (let i = 0; i < columns.length - 1; i++) {
+    const gap = columns[i + 1] - (columns[i] + NODE_WIDTH)
+    if (gap >= ROUTE_PADDING)
+      candidates.add((columns[i] + NODE_WIDTH + columns[i + 1]) / 2)
+  }
+
+  return [...candidates].sort((a, b) => {
+    const sa = routeSideX(source, a)
+    const ta = routeSideX(target, a)
+    const sb = routeSideX(source, b)
+    const tb = routeSideX(target, b)
+    return Math.abs(a - sa) + Math.abs(a - ta) - (Math.abs(b - sb) + Math.abs(b - tb))
+  })
+}
+
+function computeRelationshipPath(sourceTable: string, targetTable: string): string {
+  const source = getTableRect(sourceTable)
+  const target = getTableRect(targetTable)
+  if (!source || !target)
+    return ''
+
+  const y1 = source.y + source.height / 2
+  const y2 = target.y + target.height / 2
+  const ignored = new Set([source.name, target.name])
+  const candidates = candidateRouteXs(source, target)
+
+  const routeX
+    = candidates.find((c) => {
+      const x1 = routeSideX(source, c)
+      const x2 = routeSideX(target, c)
+      return (
+        !isVerticalRouteBlocked(c, y1, y2, ignored)
+        && !isHorizontalRouteBlocked(y1, x1, c, ignored)
+        && !isHorizontalRouteBlocked(y2, c, x2, ignored)
+      )
+    })
+    ?? candidates[0]
+    ?? Math.max(source.x + source.width, target.x + target.width) + ROUTE_PADDING
+
+  const x1 = routeSideX(source, routeX, 2)
+  const x2 = routeSideX(target, routeX, 2)
+  return `M ${x1} ${y1} L ${routeX} ${y1} L ${routeX} ${y2} L ${x2} ${y2}`
+}
+
 const renderEdges = computed<RenderEdge[]>(() => {
-  return edgePaths.value
-    .filter(
-      edge =>
-        filteredTableNames.value.has(edge.from)
-        && filteredTableNames.value.has(edge.to),
-    )
-    .map(edge => ({
-      ...edge,
+  return displayedRelationships.value.map((rel) => {
+    const path = computeRelationshipPath(rel.sourceTable, rel.targetTable)
+    return {
+      from: rel.sourceTable,
+      to: rel.targetTable,
+      label: '',
+      path,
       isHighlighted:
         selectedTableId.value !== null
-        && (edge.from === selectedTableId.value
-          || edge.to === selectedTableId.value),
-    }))
+        && (rel.sourceTable === selectedTableId.value
+          || rel.targetTable === selectedTableId.value),
+    }
+  })
 })
 
 // ─── Layout Computation ───────────────────────────────
 function computeLayout() {
-  if (filteredTables.value.length === 0) {
+  if (displayedTables.value.length === 0) {
     nodePositions.value = new Map()
     edgePaths.value = []
     return
@@ -224,7 +371,7 @@ function computeLayout() {
   })
   g.setDefaultEdgeLabel(() => ({}))
 
-  for (const table of filteredTables.value) {
+  for (const table of displayedTables.value) {
     const isExpanded = expandedTables.value.has(table.name)
     const height = calcNodeHeight(table, isExpanded)
     g.setNode(table.name, {
@@ -234,10 +381,8 @@ function computeLayout() {
     })
   }
 
-  for (const fk of filteredForeignKeys.value) {
-    g.setEdge(fk.source_table, fk.referenced_table, {
-      label: fk.constraint_name,
-    })
+  for (const rel of displayedRelationships.value) {
+    g.setEdge(rel.sourceTable, rel.targetTable, { label: '' })
   }
 
   dagre.layout(g)
@@ -248,33 +393,8 @@ function computeLayout() {
     positions.set(nodeName, { x: node.x, y: node.y })
   })
 
-  const paths: Array<{
-    from: string
-    to: string
-    label: string
-    path: string
-  }> = []
-  g.edges().forEach((e: { v: string, w: string }) => {
-    const edge = g.edge(e) as {
-      points?: Array<{ x: number, y: number }>
-      label?: string
-    }
-    const points = edge.points || []
-    if (points.length >= 2) {
-      const path = points
-        .map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`)
-        .join(' ')
-      paths.push({
-        from: e.v,
-        to: e.w,
-        label: edge.label || '',
-        path,
-      })
-    }
-  })
-
   nodePositions.value = positions
-  edgePaths.value = paths
+  edgePaths.value = []
 }
 
 // ─── Data Fetching ────────────────────────────────────
@@ -288,17 +408,14 @@ async function fetchAvailableSchemas() {
       availableSchemas.value = cached
       return
     }
-    // Not cached — fetch from backend directly
     const result = await invoke<string[]>('list_schemas', {
       connectionId: props.connectionId,
       database: props.database,
     })
     availableSchemas.value = result ?? []
-    // Also cache in store for future use
     const m = databaseStore.metadata[props.connectionId]
-    if (m && result) {
+    if (m && result)
       m.schemas[props.database] = result
-    }
   }
   catch {
     availableSchemas.value = []
@@ -310,7 +427,6 @@ async function fetchSchemaData() {
   try {
     const schema = schemaParam.value
 
-    // Fetch tables and foreign keys in parallel
     const [tableList, fkList] = await Promise.all([
       invoke<TableInfo[]>('list_tables', {
         connectionId: props.connectionId,
@@ -323,7 +439,6 @@ async function fetchSchemaData() {
 
     foreignKeys.value = fkList
 
-    // Fetch columns for each table in parallel
     const columnResults = await Promise.all(
       tableList.map(t =>
         invoke<ColumnInfo[]>('list_columns', {
@@ -335,7 +450,6 @@ async function fetchSchemaData() {
       ),
     )
 
-    // Build enriched table data
     tables.value = tableList.map((t, i) => ({
       name: t.name,
       schema: t.schema,
@@ -345,11 +459,9 @@ async function fetchSchemaData() {
       ),
     }))
 
-    // Show warning for large schemas
     if (tables.value.length > 30)
       showWarning.value = true
 
-    // Compute initial layout
     computeLayout()
   }
   catch (err) {
@@ -361,15 +473,19 @@ async function fetchSchemaData() {
   }
 }
 
-// ─── Watch for layout triggers ────────────────────────
+// ─── Watchers ─────────────────────────────────────────
 watch(
-  [filteredTables, layoutDirection, expandedTables],
+  [displayedTables, layoutDirection, expandedTables],
   () => {
     computeLayout()
   },
   { immediate: false },
 )
 
+watch(localSchema, () => {
+  fetchSchemaData()
+})
+
 // ─── Interaction Handlers ─────────────────────────────
 function startPan(e: MouseEvent) {
   const target = e.target as HTMLElement
@@ -435,9 +551,46 @@ function onNodeMouseUp() {
   document.removeEventListener('mouseup', onNodeMouseUp)
 }
 
+// ─── Zoom ─────────────────────────────────────────────
 function onWheel(e: WheelEvent) {
+  if (!e.ctrlKey && !e.metaKey) {
+    // Without ctrl/meta: pan vertically
+    panOffset.value = { ...panOffset.value, y: panOffset.value.y - e.deltaY }
+    return
+  }
+  e.preventDefault()
   const delta = -e.deltaY / 500
-  zoomLevel.value = Math.max(0.1, Math.min(3, zoomLevel.value * (1 + delta)))
+  const nextZoom = Math.max(0.1, Math.min(3, +(zoomLevel.value * (1 + delta)).toFixed(2)))
+
+  // Zoom centered on mouse position
+  const rect = svgContainerRef.value?.getBoundingClientRect()
+  if (rect) {
+    const originX = e.clientX - rect.left
+    const originY = e.clientY - rect.top
+    const contentX = (originX - panOffset.value.x) / zoomLevel.value
+    const contentY = (originY - panOffset.value.y) / zoomLevel.value
+    zoomLevel.value = nextZoom
+    panOffset.value = {
+      x: originX - contentX * nextZoom,
+      y: originY - contentY * nextZoom,
+    }
+  }
+  else {
+    zoomLevel.value = nextZoom
+  }
+}
+
+function onGestureStart(e: Event) {
+  e.preventDefault()
+  gestureStartZoom.value = zoomLevel.value
+}
+
+function onGestureChange(e: Event) {
+  const ge = e as WheelEvent & { scale?: number }
+  if (typeof ge.scale !== 'number')
+    return
+  e.preventDefault()
+  zoomLevel.value = Math.max(0.1, Math.min(3, +(gestureStartZoom.value * ge.scale).toFixed(2)))
 }
 
 function fitToScreen() {
@@ -470,20 +623,26 @@ function toggleLayout() {
 
 // ─── Resize Observer ──────────────────────────────────
 useResizeObserver(svgContainerRef, () => {
-  // Dagre layout is independent of container size,
-  // so no re-layout needed on resize.
+  // Dagre layout is independent of container size
 })
 
-// ─── Watch for schema change ──────────────────────────
-watch(localSchema, () => {
-  fetchSchemaData()
-})
+// ─── Helpers ──────────────────────────────────────────
+function isFKColumn(table: TableData, colName: string): boolean {
+  return table.foreignKeys.some(
+    fk => fk.columns.includes(colName) || fk.referenced_columns.includes(colName),
+  )
+}
 
 // ─── Lifecycle ────────────────────────────────────────
 onMounted(async () => {
   await fetchAvailableSchemas()
   fetchSchemaData()
 })
+
+onUnmounted(() => {
+  document.removeEventListener('mousemove', onNodeMouseMove)
+  document.removeEventListener('mouseup', onNodeMouseUp)
+})
 </script>
 
 <template>
@@ -515,54 +674,38 @@ onMounted(async () => {
       <!-- Search -->
       <div class="flex-1 max-w-xs relative">
         <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="14"
-          height="14"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
+          xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
+          fill="none" stroke="currentColor" stroke-width="2"
+          stroke-linecap="round" stroke-linejoin="round"
           class="text-muted-foreground left-2 top-1/2 absolute -translate-y-1/2"
         >
-          <circle cx="11" cy="11" r="8" />
-          <path d="m21 21-4.3-4.3" />
+          <circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" />
         </svg>
         <Input
           v-model="searchQuery"
-          :placeholder="
-            t('components.databaseBrowser.erDiagram.searchPlaceholder')
-          "
+          :placeholder="t('components.databaseBrowser.erDiagram.searchPlaceholder')"
           class="text-xs pl-7 h-8"
         />
       </div>
 
+      <!-- Info badges -->
+      <Badge variant="secondary" class="text-[11px] shrink-0 gap-1 h-6">
+        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3h18v18H3z" /><path d="M21 9H3" /><path d="M9 21V9" /></svg>
+        {{ displayedTables.length }}
+      </Badge>
+      <Badge variant="secondary" class="text-[11px] shrink-0 gap-1 h-6">
+        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" /><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" /></svg>
+        {{ displayedRelationships.length }}
+      </Badge>
       <div class="flex-1" />
 
       <!-- Layout direction toggle -->
       <Button
-        variant="ghost"
-        size="sm"
+        variant="ghost" size="sm"
         class="text-xs gap-1 h-7"
         @click="toggleLayout"
       >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="12"
-          height="12"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <rect x="3" y="3" width="7" height="7" />
-          <rect x="14" y="3" width="7" height="7" />
-          <rect x="14" y="14" width="7" height="7" />
-          <rect x="3" y="14" width="7" height="7" />
-        </svg>
+        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" /><rect x="14" y="3" width="7" height="7" /><rect x="14" y="14" width="7" height="7" /><rect x="3" y="14" width="7" height="7" /></svg>
         {{
           layoutDirection === 'TB'
             ? t('components.databaseBrowser.erDiagram.layoutLeftRight')
@@ -572,88 +715,33 @@ onMounted(async () => {
 
       <!-- Fit to screen -->
       <Button
-        variant="ghost"
-        size="icon"
-        class="h-7 w-7"
+        variant="ghost" size="icon" class="h-7 w-7"
         :title="t('components.databaseBrowser.erDiagram.fitToScreen')"
         @click="fitToScreen"
       >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="14"
-          height="14"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <path d="M8 3H5a2 2 0 0 0-2 2v3" />
-          <path d="M21 8V5a2 2 0 0 0-2-2h-3" />
-          <path d="M16 21h3a2 2 0 0 0 2-2v-3" />
-          <path d="M3 16v3a2 2 0 0 0 2 2h3" />
-        </svg>
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3" /><path d="M21 8V5a2 2 0 0 0-2-2h-3" /><path d="M16 21h3a2 2 0 0 0 2-2v-3" /><path d="M3 16v3a2 2 0 0 0 2 2h3" /></svg>
       </Button>
 
       <!-- Refresh -->
       <Button
-        variant="ghost"
-        size="icon"
-        class="h-7 w-7"
+        variant="ghost" size="icon" class="h-7 w-7"
         :title="t('common.buttons.refresh')"
         :disabled="loading"
         @click="fetchSchemaData"
       >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="14"
-          height="14"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          :class="{ 'animate-spin': loading }"
-        >
-          <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" />
-          <path d="M21 3v5h-5" />
-          <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" />
-          <path d="M8 16H3v5" />
-        </svg>
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :class="{ 'animate-spin': loading }"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" /><path d="M21 3v5h-5" /><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" /><path d="M8 16H3v5" /></svg>
       </Button>
 
-      <!-- Zoom controls: zoom out, zoom in, percentage -->
+      <!-- Zoom controls -->
       <div class="flex gap-0.5 items-center">
-        <Button
-          variant="ghost"
-          size="icon"
-          class="h-7 w-7"
-          :disabled="zoomLevel <= 0.1"
-          :title="t('components.databaseBrowser.erDiagram.zoomOut')"
-          @click="zoomLevel = Math.max(0.1, +(zoomLevel / 1.3).toFixed(2))"
-        >
+        <Button variant="ghost" size="icon" class="h-7 w-7" :disabled="zoomLevel <= 0.1" :title="t('components.databaseBrowser.erDiagram.zoomOut')" @click="zoomLevel = Math.max(0.1, +(zoomLevel / 1.3).toFixed(2))">
           <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" /><line x1="8" y1="11" x2="14" y2="11" /></svg>
         </Button>
-        <Button
-          variant="ghost"
-          size="icon"
-          class="h-7 w-7"
-          :disabled="zoomLevel >= 3"
-          :title="t('components.databaseBrowser.erDiagram.zoomIn')"
-          @click="zoomLevel = Math.min(3, +(zoomLevel * 1.3).toFixed(2))"
-        >
+        <Button variant="ghost" size="icon" class="h-7 w-7" :disabled="zoomLevel >= 3" :title="t('components.databaseBrowser.erDiagram.zoomIn')" @click="zoomLevel = Math.min(3, +(zoomLevel * 1.3).toFixed(2))">
           <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" /><line x1="11" y1="8" x2="11" y2="14" /><line x1="8" y1="11" x2="14" y2="11" /></svg>
         </Button>
-        <span
-          class="text-xs text-muted-foreground text-center min-w-[3rem] tabular-nums"
-        >
-          {{
-            t('components.databaseBrowser.erDiagram.zoom', {
-              percentage: Math.round(zoomLevel * 100),
-            })
-          }}
+        <span class="text-xs text-muted-foreground text-center min-w-[3rem] tabular-nums">
+          {{ t('components.databaseBrowser.erDiagram.zoom', { percentage: Math.round(zoomLevel * 100) }) }}
         </span>
       </div>
     </div>
@@ -663,11 +751,7 @@ onMounted(async () => {
       <AlertDialogContent>
         <AlertDialogHeader>
           <AlertDialogTitle>
-            {{
-              t('components.databaseBrowser.erDiagram.largeSchemaWarning', {
-                count: tables.length,
-              })
-            }}
+            {{ t('components.databaseBrowser.erDiagram.largeSchemaWarning', { count: tables.length }) }}
           </AlertDialogTitle>
         </AlertDialogHeader>
         <AlertDialogFooter>
@@ -690,23 +774,17 @@ onMounted(async () => {
       @mouseup="endPan"
       @mouseleave="endPan"
       @wheel.prevent="onWheel"
+      @gesturestart="onGestureStart"
+      @gesturechange="onGestureChange"
     >
       <!-- Loading -->
-      <div
-        v-if="loading"
-        class="flex gap-2 items-center inset-0 justify-center absolute"
-      >
+      <div v-if="loading" class="flex gap-2 items-center inset-0 justify-center absolute">
         <Spinner class="h-6 w-6" />
-        <span class="text-sm text-muted-foreground">
-          {{ t('components.databaseBrowser.erDiagram.loading') }}
-        </span>
+        <span class="text-sm text-muted-foreground">{{ t('components.databaseBrowser.erDiagram.loading') }}</span>
       </div>
 
       <!-- Error state -->
-      <div
-        v-else-if="error"
-        class="flex flex-col gap-2 items-center inset-0 justify-center absolute"
-      >
+      <div v-else-if="error" class="flex flex-col gap-2 items-center inset-0 justify-center absolute">
         <p class="text-sm text-destructive">
           {{ error }}
         </p>
@@ -716,20 +794,14 @@ onMounted(async () => {
       </div>
 
       <!-- No tables -->
-      <div
-        v-else-if="tables.length === 0"
-        class="flex items-center inset-0 justify-center absolute"
-      >
+      <div v-else-if="tables.length === 0" class="flex items-center inset-0 justify-center absolute">
         <p class="text-sm text-muted-foreground">
           {{ t('components.databaseBrowser.erDiagram.noForeignKeys') }}
         </p>
       </div>
 
-      <!-- Empty search results -->
-      <div
-        v-else-if="searchQuery && filteredTables.length === 0"
-        class="flex items-center inset-0 justify-center absolute"
-      >
+      <!-- Empty search / focus results -->
+      <div v-else-if="displayedTables.length === 0" class="flex items-center inset-0 justify-center absolute">
         <p class="text-sm text-muted-foreground">
           {{ t('components.databaseBrowser.erDiagram.searchPlaceholder') }}
         </p>
@@ -737,7 +809,7 @@ onMounted(async () => {
 
       <!-- SVG Canvas -->
       <svg
-        v-show="!loading && filteredTables.length > 0"
+        v-show="!loading && displayedTables.length > 0"
         class="h-full w-full"
         :style="{
           transform: `scale(${zoomLevel}) translate(${panOffset.x}px, ${panOffset.y}px)`,
@@ -747,33 +819,19 @@ onMounted(async () => {
         @dblclick="fitToScreen"
       >
         <defs>
-          <!-- Arrowhead marker -->
-          <marker
-            id="er-arrowhead"
-            markerWidth="10"
-            markerHeight="7"
-            refX="9"
-            refY="3.5"
-            orient="auto"
-          >
-            <polygon
-              points="0 0, 10 3.5, 0 7"
-              fill="hsl(var(--muted-foreground))"
-            />
+          <marker id="er-arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+            <polygon points="0 0, 10 3.5, 0 7" fill="hsl(var(--muted-foreground))" />
           </marker>
         </defs>
 
-        <!-- FK relationship lines -->
+        <!-- Relationship lines -->
         <g v-for="(edge, idx) in renderEdges" :key="`edge-${idx}`">
           <path
             :d="edge.path"
             fill="none"
-            :stroke="
-              edge.isHighlighted
-                ? 'hsl(var(--primary))'
-                : 'hsl(var(--muted-foreground))'
-            "
+            :stroke="edge.isHighlighted ? 'hsl(var(--primary))' : 'hsl(var(--muted-foreground))'"
             :stroke-width="edge.isHighlighted ? 2 : 1"
+            :stroke-dasharray="edge.label ? '4 3' : 'none'"
             marker-end="url(#er-arrowhead)"
           />
         </g>
@@ -796,9 +854,7 @@ onMounted(async () => {
               }"
             >
               <!-- Table header -->
-              <div class="er-table-header">
-                {{ node.id }}
-              </div>
+              <div class="er-table-header">{{ node.id }}</div>
 
               <!-- Columns -->
               <div class="er-table-columns">
@@ -807,26 +863,17 @@ onMounted(async () => {
                   :key="colIdx"
                   class="er-table-column"
                 >
-                  <span class="er-column-name">{{ col.name }}</span>
-                  <span class="er-column-type">{{ col.data_type }}</span>
                   <span class="er-column-markers">
                     <span v-if="col.is_primary_key" class="er-pk">
                       <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z" /><circle cx="16.5" cy="7.5" r=".5" fill="currentColor" /></svg>
                     </span>
-                    <span
-                      v-if="
-                        node.table.foreignKeys.some(
-                          fk =>
-                            fk.columns.includes(col.name)
-                            || fk.referenced_columns.includes(col.name),
-                        )
-                      "
-                      class="er-fk"
-                    >
+                    <span v-else-if="isFKColumn(node.table, col.name)" class="er-fk">
                       <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" /><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" /></svg>
                     </span>
-
+                    <span v-else class="er-col-spacer" />
                   </span>
+                  <span class="er-column-name">{{ col.name }}</span>
+                  <span class="er-column-type">{{ col.data_type }}</span>
                 </div>
               </div>
 
@@ -839,9 +886,7 @@ onMounted(async () => {
                 {{
                   node.isExpanded
                     ? t('components.databaseBrowser.erDiagram.hideExtraColumns')
-                    : t('components.databaseBrowser.erDiagram.showAllColumns', {
-                      count: node.table.columns.length,
-                    })
+                    : t('components.databaseBrowser.erDiagram.showAllColumns', { count: node.table.columns.length })
                 }}
               </button>
             </div>
@@ -856,60 +901,51 @@ onMounted(async () => {
 .er-table-group {
   cursor: grab;
 }
-
 .er-table-group--dragging {
   cursor: grabbing;
 }
-
 .er-table-card {
   @apply bg-card border border-border rounded-lg shadow-sm;
   width: 220px;
   font-size: 12px;
   user-select: none;
 }
-
 .er-table-card--selected {
   @apply border-primary ring-1 ring-primary shadow-md;
 }
-
 .er-table-header {
   @apply bg-muted px-3 py-2 font-semibold text-sm border-b border-border;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-
 .er-table-columns {
   @apply divide-y divide-border/50;
 }
-
 .er-table-column {
   @apply px-3 py-1.5 flex gap-1 items-center text-xs;
 }
-
 .er-column-name {
   @apply font-mono flex-1 truncate;
 }
-
 .er-column-type {
   @apply text-muted-foreground text-[10px] flex-shrink-0;
   max-width: 80px;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-
 .er-column-markers {
-  @apply flex gap-0.5 flex-shrink-0;
+  @apply flex gap-0.5 flex-shrink-0 w-4 items-center justify-center;
 }
-
 .er-pk {
-  @apply text-amber-500;
+  @apply text-amber-500 flex-shrink-0;
 }
-
 .er-fk {
-  @apply text-blue-500;
+  @apply text-blue-500 flex-shrink-0;
+}
+.er-col-spacer {
+  @apply block w-3;
 }
-
 .er-expand-btn {
   @apply w-full text-xs text-muted-foreground hover:text-foreground py-1.5 border-t border-border bg-muted/30 hover:bg-muted/50 transition-colors;
 }

From 8f091ac6be188250cd95698f179b70da1da7f462 Mon Sep 17 00:00:00 2001
From: blankll <zilisheng1996@gmail.com>
Date: Thu, 23 Jul 2026 00:32:32 +0800
Subject: [PATCH 13/26] fix(er-diagram): smooth drag via delta-offset, add
 tooltips and SVG overflow

- Drag: use dragDelta offset ref instead of updating nodePositions on every mousemove. Node positions and edge routes only update on drop. Eliminates shaking and position drift.

- SVG: add overflow=visible to prevent table clipping outside viewport during drag/pan

- Tooltips: add titles to tables badge, relationships badge, and layout direction button

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 src/components/er-diagram/ErDiagramView.vue | 35 ++++++++++++---------
 src/lang/enUS.ts                            |  2 ++
 src/lang/zhCN.ts                            |  2 ++
 3 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/components/er-diagram/ErDiagramView.vue b/src/components/er-diagram/ErDiagramView.vue
index db6b7e9..a47cafe 100644
--- a/src/components/er-diagram/ErDiagramView.vue
+++ b/src/components/er-diagram/ErDiagramView.vue
@@ -108,10 +108,11 @@ const error = ref<string | null>(null)
 const showWarning = ref(false)
 const svgContainerRef = ref<HTMLElement | null>(null)
 
-// ─── Node drag state ──────────────────────────────
+// ─── Node drag state (delta-offset, no nodePositions update during drag) ───
 const draggingNodeId = ref<string | null>(null)
 const dragStartPos = ref({ x: 0, y: 0 })
 const dragNodeStart = ref({ x: 0, y: 0 })
+const dragDelta = ref({ x: 0, y: 0 })
 
 // ─── Schema selector ──────────────────────────────
 const databaseStore = useDatabaseStore()
@@ -515,7 +516,7 @@ function endPan() {
   isPanning.value = false
 }
 
-// ─── Node Drag Handlers ───────────────────────────
+// ─── Node Drag Handlers (delta-offset: nodePositions only updated on drop) ──
 function onNodeMouseDown(e: MouseEvent, nodeId: string) {
   if (e.button !== 0)
     return
@@ -525,6 +526,7 @@ function onNodeMouseDown(e: MouseEvent, nodeId: string) {
   draggingNodeId.value = nodeId
   dragStartPos.value = { x: e.clientX, y: e.clientY }
   dragNodeStart.value = { x: pos.x, y: pos.y }
+  dragDelta.value = { x: 0, y: 0 }
   document.addEventListener('mousemove', onNodeMouseMove)
   document.addEventListener('mouseup', onNodeMouseUp)
 }
@@ -532,21 +534,22 @@ function onNodeMouseDown(e: MouseEvent, nodeId: string) {
 function onNodeMouseMove(e: MouseEvent) {
   if (!draggingNodeId.value)
     return
-  const dx = (e.clientX - dragStartPos.value.x) / zoomLevel.value
-  const dy = (e.clientY - dragStartPos.value.y) / zoomLevel.value
-  const positions = new Map(nodePositions.value)
-  const current = positions.get(draggingNodeId.value)
-  if (current) {
-    positions.set(draggingNodeId.value, {
-      x: dragNodeStart.value.x + dx,
-      y: dragNodeStart.value.y + dy,
-    })
-    nodePositions.value = positions
+  dragDelta.value = {
+    x: (e.clientX - dragStartPos.value.x) / zoomLevel.value,
+    y: (e.clientY - dragStartPos.value.y) / zoomLevel.value,
   }
 }
 
 function onNodeMouseUp() {
+  if (draggingNodeId.value) {
+    const finalX = dragNodeStart.value.x + dragDelta.value.x
+    const finalY = dragNodeStart.value.y + dragDelta.value.y
+    const positions = new Map(nodePositions.value)
+    positions.set(draggingNodeId.value, { x: finalX, y: finalY })
+    nodePositions.value = positions
+  }
   draggingNodeId.value = null
+  dragDelta.value = { x: 0, y: 0 }
   document.removeEventListener('mousemove', onNodeMouseMove)
   document.removeEventListener('mouseup', onNodeMouseUp)
 }
@@ -689,11 +692,11 @@ onUnmounted(() => {
       </div>
 
       <!-- Info badges -->
-      <Badge variant="secondary" class="text-[11px] shrink-0 gap-1 h-6">
+      <Badge variant="secondary" class="text-[11px] shrink-0 gap-1 h-6" :title="t('components.databaseBrowser.erDiagram.tablesCountBadge', { count: displayedTables.length })">
         <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3h18v18H3z" /><path d="M21 9H3" /><path d="M9 21V9" /></svg>
         {{ displayedTables.length }}
       </Badge>
-      <Badge variant="secondary" class="text-[11px] shrink-0 gap-1 h-6">
+      <Badge variant="secondary" class="text-[11px] shrink-0 gap-1 h-6" :title="t('components.databaseBrowser.erDiagram.relationshipsCountBadge', { count: displayedRelationships.length })">
         <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" /><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" /></svg>
         {{ displayedRelationships.length }}
       </Badge>
@@ -703,6 +706,7 @@ onUnmounted(() => {
       <Button
         variant="ghost" size="sm"
         class="text-xs gap-1 h-7"
+        :title="t('components.databaseBrowser.erDiagram.layoutDirection')"
         @click="toggleLayout"
       >
         <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" /><rect x="14" y="3" width="7" height="7" /><rect x="14" y="14" width="7" height="7" /><rect x="3" y="14" width="7" height="7" /></svg>
@@ -814,6 +818,7 @@ onUnmounted(() => {
         :style="{
           transform: `scale(${zoomLevel}) translate(${panOffset.x}px, ${panOffset.y}px)`,
           transformOrigin: '0 0',
+          overflow: 'visible',
         }"
         @click.self="deselectAll"
         @dblclick="fitToScreen"
@@ -840,7 +845,7 @@ onUnmounted(() => {
         <g
           v-for="node in renderNodes"
           :key="node.id"
-          :transform="`translate(${node.x}, ${node.y})`"
+          :transform="`translate(${node.x + (draggingNodeId === node.id ? dragDelta.x : 0)}, ${node.y + (draggingNodeId === node.id ? dragDelta.y : 0)})`"
           class="er-table-group"
           :class="{ 'er-table-group--dragging': draggingNodeId === node.id }"
           @mousedown.prevent="onNodeMouseDown($event, node.id)"
diff --git a/src/lang/enUS.ts b/src/lang/enUS.ts
index ddd98d4..024b3d5 100644
--- a/src/lang/enUS.ts
+++ b/src/lang/enUS.ts
@@ -1123,6 +1123,8 @@ export const enUS = {
         allSchemas: 'All Schemas',
         fitToScreen: 'Fit to Screen',
         searchPlaceholder: 'Filter tables...',
+        tablesCountBadge: '{count} tables',
+        relationshipsCountBadge: '{count} relationships',
         largeSchemaWarning: 'This schema has {count} tables. Displaying all may be dense. Continue?',
         showAllColumns: 'Show All Columns ({count})',
         hideExtraColumns: 'Show Less',
diff --git a/src/lang/zhCN.ts b/src/lang/zhCN.ts
index 78eee86..c030693 100644
--- a/src/lang/zhCN.ts
+++ b/src/lang/zhCN.ts
@@ -1123,6 +1123,8 @@ export const zhCN = {
         allSchemas: '所有模式',
         fitToScreen: '适应屏幕',
         searchPlaceholder: '过滤表...',
+        tablesCountBadge: '{count} 张表',
+        relationshipsCountBadge: '{count} 个关系',
         largeSchemaWarning: '此模式包含 {count} 张表，显示全部可能会过于密集，是否继续？',
         showAllColumns: '显示所有列 ({count})',
         hideExtraColumns: '显示更少',

From e9240f9ef45d84abbfabb7ad0f49583f01cc332e Mon Sep 17 00:00:00 2001
From: blankll <zilisheng1996@gmail.com>
Date: Thu, 23 Jul 2026 01:08:54 +0800
Subject: [PATCH 14/26] refactor(er-diagram): pure HTML rendering, engineering
 mode, canvas auto-size, header drag

- Pure HTML rendering: replaced SVG+foreignObject with HTML div cards in an overflow:auto viewport with CSS scale zoom. SVG overlay used only for relationship lines (pointer-events:none)

- Header-only drag: drag now originates only from table header (cursor:grab). Uses delta-offset pattern, commits position on drop only

- Engineering mode: new entity-relationship view with rounded entities and column pills. Toggle via segmented control in toolbar

- Canvas auto-sizing: canvas dimensions computed from bounding box of all positioned tables. fitToScreen centers content

- Reset Layout: toolbar button restores dagre auto-layout positions

- View mode toggle: table view / engineering view switch preserving all interactions

- Native scroll pan: viewport uses overflow:auto, pan is native browser scroll. Ctrl+wheel zoom centered on mouse

- Extracted pure modules: types.ts, graph-routing.ts, graph-layout.ts with Jest TDD (32 new tests)

- TableCard.vue and EngineeringEntity.vue: presentational components with matching prop/emit interfaces

- All existing features preserved: schema selector, search, info badges, focus mode, layout direction, expand/collapse, orthogonal routing, large schema warning

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 src/__tests__/graph-layout.test.ts            | 177 ++++
 src/__tests__/graph-routing.test.ts           | 142 ++++
 .../er-diagram/EngineeringEntity.vue          | 152 ++++
 src/components/er-diagram/ErDiagramView.vue   | 778 +++++++-----------
 src/components/er-diagram/TableCard.vue       | 125 +++
 src/components/er-diagram/graph-layout.ts     | 104 +++
 src/components/er-diagram/graph-routing.ts    | 132 +++
 src/components/er-diagram/types.ts            |  59 ++
 src/lang/enUS.ts                              |   5 +
 src/lang/zhCN.ts                              |   5 +
 src/pages/QueriesPage.vue                     |  33 +-
 11 files changed, 1206 insertions(+), 506 deletions(-)
 create mode 100644 src/__tests__/graph-layout.test.ts
 create mode 100644 src/__tests__/graph-routing.test.ts
 create mode 100644 src/components/er-diagram/EngineeringEntity.vue
 create mode 100644 src/components/er-diagram/TableCard.vue
 create mode 100644 src/components/er-diagram/graph-layout.ts
 create mode 100644 src/components/er-diagram/graph-routing.ts
 create mode 100644 src/components/er-diagram/types.ts

diff --git a/src/__tests__/graph-layout.test.ts b/src/__tests__/graph-layout.test.ts
new file mode 100644
index 0000000..0e70652
--- /dev/null
+++ b/src/__tests__/graph-layout.test.ts
@@ -0,0 +1,177 @@
+import type { DagreRel, DagreTable } from '@/components/er-diagram/graph-layout'
+/**
+ * @jest-environment node
+ */
+import {
+  computeBoundingBox,
+  computeCanvasSize,
+  computeDagreLayout,
+
+  fitToScreen,
+} from '@/components/er-diagram/graph-layout'
+
+describe('computeDagreLayout', () => {
+  it('returns Map with both entries and finite coordinates for A→B', () => {
+    const tables: DagreTable[] = [
+      { name: 'A', width: 220, height: 100 },
+      { name: 'B', width: 220, height: 100 },
+    ]
+    const rels: DagreRel[] = [
+      { sourceTable: 'A', targetTable: 'B' },
+    ]
+
+    const positions = computeDagreLayout(tables, rels, 'TB')
+
+    expect(positions.size).toBe(2)
+    expect(positions.has('A')).toBe(true)
+    expect(positions.has('B')).toBe(true)
+
+    const posA = positions.get('A')!
+    const posB = positions.get('B')!
+
+    expect(Number.isFinite(posA.x)).toBe(true)
+    expect(Number.isFinite(posA.y)).toBe(true)
+    expect(Number.isFinite(posB.x)).toBe(true)
+    expect(Number.isFinite(posB.y)).toBe(true)
+
+    // In TB layout, B (child) should be below A (parent)
+    expect(posB.y).toBeGreaterThan(posA.y)
+  })
+
+  it('supports LR direction with B to the right of A', () => {
+    const tables: DagreTable[] = [
+      { name: 'A', width: 220, height: 100 },
+      { name: 'B', width: 220, height: 100 },
+    ]
+    const rels: DagreRel[] = [
+      { sourceTable: 'A', targetTable: 'B' },
+    ]
+
+    const positions = computeDagreLayout(tables, rels, 'LR')
+
+    expect(positions.size).toBe(2)
+    const posA = positions.get('A')!
+    const posB = positions.get('B')!
+    expect(posB.x).toBeGreaterThan(posA.x)
+  })
+})
+
+describe('computeBoundingBox', () => {
+  it('returns expected min/max for known positions', () => {
+    const positions = new Map([
+      ['A', { x: 110, y: 80 }],
+      ['B', { x: 410, y: 160 }],
+    ])
+    const sizes = new Map([
+      ['A', { width: 220, height: 100 }],
+      ['B', { width: 220, height: 100 }],
+    ])
+
+    const bbox = computeBoundingBox(positions, sizes)
+
+    // A: left=110-110=0, top=80-50=30, right=110+110=220, bottom=80+50=130
+    // B: left=410-110=300, top=160-50=110, right=410+110=520, bottom=160+50=210
+    expect(bbox.minX).toBe(0)
+    expect(bbox.minY).toBe(30)
+    expect(bbox.maxX).toBe(520)
+    expect(bbox.maxY).toBe(210)
+  })
+
+  it('returns zeros for empty inputs', () => {
+    expect(computeBoundingBox(new Map(), new Map())).toEqual({
+      minX: 0,
+      minY: 0,
+      maxX: 0,
+      maxY: 0,
+    })
+  })
+
+  it('skips entries with missing sizes', () => {
+    const positions = new Map([
+      ['A', { x: 100, y: 100 }],
+      ['B', { x: 400, y: 100 }],
+    ])
+    const sizes = new Map([['A', { width: 200, height: 80 }]])
+
+    const bbox = computeBoundingBox(positions, sizes)
+
+    // Only A contributes: left=0, top=60, right=200, bottom=140
+    expect(bbox.minX).toBe(0)
+    expect(bbox.minY).toBe(60)
+    expect(bbox.maxX).toBe(200)
+    expect(bbox.maxY).toBe(140)
+  })
+})
+
+describe('computeCanvasSize', () => {
+  it('returns width = maxX-minX + 2*padding, height = maxY-minY + 2*padding', () => {
+    const bbox = { minX: 0, minY: 50, maxX: 500, maxY: 250 }
+    const result = computeCanvasSize(bbox, 40)
+
+    // width = 500-0+80 = 580, but min 800
+    // height = 250-50+80 = 280, but min 600
+    expect(result.width).toBe(800)
+    expect(result.height).toBe(600)
+  })
+
+  it('uses computed size when larger than minimum', () => {
+    const bbox = { minX: 0, minY: 0, maxX: 1200, maxY: 900 }
+    const result = computeCanvasSize(bbox, 50)
+
+    expect(result.width).toBe(1200 - 0 + 100) // 1300
+    expect(result.height).toBe(900 - 0 + 100) // 1000
+  })
+
+  it('enforces minimum width of 800 and height of 600', () => {
+    const bbox = { minX: 100, minY: 100, maxX: 200, maxY: 200 }
+    const result = computeCanvasSize(bbox, 20)
+
+    expect(result.width).toBe(800)
+    expect(result.height).toBe(600)
+  })
+})
+
+describe('fitToScreen', () => {
+  it('zooms in (zoom >= 1) when content is smaller than viewport', () => {
+    // Content 100x100 fits easily in 800x600 viewport → zoom = min(8, 6) = 6, capped to 3
+    const result = fitToScreen({ width: 100, height: 100 }, 800, 600)
+
+    expect(result.zoom).toBe(3)
+    expect(Number.isFinite(result.scrollX)).toBe(true)
+    expect(Number.isFinite(result.scrollY)).toBe(true)
+  })
+
+  it('zooms out (zoom < 1) when content is larger than viewport', () => {
+    // Content 2000x1500 is larger than 800x600 viewport → zoom = min(0.4, 0.4) = 0.4
+    const result = fitToScreen({ width: 2000, height: 1500 }, 800, 600)
+
+    expect(result.zoom).toBeCloseTo(0.4, 5)
+    expect(Number.isFinite(result.scrollX)).toBe(true)
+    expect(Number.isFinite(result.scrollY)).toBe(true)
+  })
+
+  it('centers content in viewport', () => {
+    const bbox = { width: 400, height: 300 }
+    const vw = 1000
+    const vh = 800
+
+    const result = fitToScreen(bbox, vw, vh)
+
+    // zoom = min(1000/400, 800/300) = min(2.5, 2.667) = 2.5
+    expect(result.zoom).toBe(2.5)
+    // scrollX = (1000 - 400*2.5)/2 = 0
+    expect(result.scrollX).toBe(0)
+    // scrollY = (800 - 300*2.5)/2 = (800-750)/2 = 25
+    expect(result.scrollY).toBe(25)
+  })
+
+  it('caps zoom between 0.1 and 3', () => {
+    // Tiny content in huge viewport — would be zoom 100, capped to 3
+    const r1 = fitToScreen({ width: 10, height: 10 }, 10000, 10000)
+    expect(r1.zoom).toBe(3)
+
+    // Huge content in tiny viewport — would be zoom 0.01, capped to 0.1
+    const r2 = fitToScreen({ width: 100000, height: 100000 }, 100, 100)
+    expect(r2.zoom).toBe(0.1)
+  })
+})
diff --git a/src/__tests__/graph-routing.test.ts b/src/__tests__/graph-routing.test.ts
new file mode 100644
index 0000000..60eb908
--- /dev/null
+++ b/src/__tests__/graph-routing.test.ts
@@ -0,0 +1,142 @@
+import type { TableRect } from '@/components/er-diagram/types'
+/**
+ * @jest-environment node
+ */
+import {
+  buildTableRectMap,
+  candidateRouteXs,
+  computeRelationshipPath,
+  rangesOverlap,
+  routeSideX,
+} from '@/components/er-diagram/graph-routing'
+
+const rectA: TableRect = { name: 'A', x: 0, y: 0, width: 220, height: 100 }
+const rectB: TableRect = { name: 'B', x: 300, y: 0, width: 220, height: 100 }
+const rectBlocker: TableRect = { name: 'Blocker', x: 150, y: 50, width: 220, height: 100 }
+
+describe('rangesOverlap', () => {
+  it('returns true when ranges overlap', () => {
+    expect(rangesOverlap(0, 10, 5, 15)).toBe(true)
+  })
+
+  it('returns true when one range is inside another', () => {
+    expect(rangesOverlap(0, 20, 5, 10)).toBe(true)
+  })
+
+  it('returns true when ranges touch at a point', () => {
+    expect(rangesOverlap(0, 10, 10, 20)).toBe(true)
+  })
+
+  it('returns false when ranges do not overlap', () => {
+    expect(rangesOverlap(0, 10, 20, 30)).toBe(false)
+  })
+
+  it('returns false when ranges are adjacent but not touching', () => {
+    expect(rangesOverlap(0, 10, 11, 20)).toBe(false)
+  })
+})
+
+describe('routeSideX', () => {
+  it('returns rect.x - offset when routeX is left of rect', () => {
+    expect(routeSideX(rectA, -50)).toBe(0)
+  })
+
+  it('returns rect.x when routeX is left of rect with default offset 0', () => {
+    expect(routeSideX(rectA, -50)).toBe(0)
+  })
+
+  it('returns rect.x + width + offset when routeX is right of rect', () => {
+    expect(routeSideX(rectA, 300)).toBe(220)
+  })
+
+  it('uses provided offset when routeX is left of rect', () => {
+    expect(routeSideX(rectA, -50, 5)).toBe(-5)
+  })
+
+  it('uses provided offset when routeX is right of rect', () => {
+    expect(routeSideX(rectA, 300, 10)).toBe(230)
+  })
+})
+
+describe('candidateRouteXs', () => {
+  it('returns sorted candidates by proximity to source and target', () => {
+    const candidates = candidateRouteXs(rectA, rectB, [rectA, rectB])
+    expect(candidates.length).toBeGreaterThan(0)
+    // First candidate should be the best (closest to both rects)
+    expect(candidates[0]).toBeGreaterThan(rectA.x)
+    expect(candidates[0]).toBeLessThan(rectB.x + rectB.width)
+  })
+
+  it('includes the midpoint gap when rects are side by side', () => {
+    const candidates = candidateRouteXs(rectA, rectB, [rectA, rectB])
+    // rectA ends at 220, rectB starts at 300, gap is 80 >= 56 (ROUTE_PADDING)
+    // So midpoint should be (220 + 300) / 2 = 260
+    expect(candidates).toContain(260)
+  })
+
+  it('includes left and right edge padding candidates', () => {
+    const candidates = candidateRouteXs(rectA, rectB, [rectA, rectB])
+    // minLeft is 0, so 0 - 56 = -56
+    expect(candidates).toContain(-56)
+    // maxRight is 300 + 220 = 520, so 520 + 56 = 576
+    expect(candidates).toContain(576)
+  })
+})
+
+describe('computeRelationshipPath', () => {
+  it('returns empty string when source table is not in rectMap', () => {
+    const rectMap = new Map<string, TableRect>([['B', rectB]])
+    expect(computeRelationshipPath('A', 'B', rectMap)).toBe('')
+  })
+
+  it('returns empty string when target table is not in rectMap', () => {
+    const rectMap = new Map<string, TableRect>([['A', rectA]])
+    expect(computeRelationshipPath('A', 'B', rectMap)).toBe('')
+  })
+
+  it('returns a valid SVG path for two side-by-side rects', () => {
+    const rectMap = new Map<string, TableRect>([['A', rectA], ['B', rectB]])
+    const path = computeRelationshipPath('A', 'B', rectMap)
+    expect(path).toMatch(/^M /)
+    expect(path).toContain(' L ')
+  })
+
+  it('returns a valid path that avoids a blocker rect between source and target', () => {
+    const rectMap = new Map<string, TableRect>([
+      ['A', rectA],
+      ['B', rectB],
+      ['Blocker', rectBlocker],
+    ])
+    const path = computeRelationshipPath('A', 'B', rectMap)
+    expect(path).toMatch(/^M /)
+    expect(path).toContain(' L ')
+    // Path should use a routeX that's not through the blocker
+    // Verify it has exactly 3 L segments (orthogonal route: right, down, left)
+    const segments = path.split(' L ')
+    expect(segments.length).toBe(4) // M start + 3 L segments
+  })
+})
+
+describe('buildTableRectMap', () => {
+  it('builds a rect map from table names and positions', () => {
+    const nodePositions = new Map([
+      ['A', { x: 110, y: 50 }],
+      ['B', { x: 410, y: 50 }],
+    ])
+    const getHeight = (_name: string) => 100
+    const rectMap = buildTableRectMap(['A', 'B'], nodePositions, getHeight)
+    expect(rectMap.size).toBe(2)
+    const rectA = rectMap.get('A')!
+    expect(rectA.x).toBe(0) // 110 - 220/2
+    expect(rectA.y).toBe(0) // 50 - 100/2
+    expect(rectA.width).toBe(220)
+    expect(rectA.height).toBe(100)
+  })
+
+  it('skips tables not found in nodePositions', () => {
+    const nodePositions = new Map([['A', { x: 110, y: 50 }]])
+    const getHeight = (_name: string) => 100
+    const rectMap = buildTableRectMap(['A', 'B'], nodePositions, getHeight)
+    expect(rectMap.size).toBe(1)
+  })
+})
diff --git a/src/components/er-diagram/EngineeringEntity.vue b/src/components/er-diagram/EngineeringEntity.vue
new file mode 100644
index 0000000..38d2008
--- /dev/null
+++ b/src/components/er-diagram/EngineeringEntity.vue
@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import type { RenderNode } from './types'
+import type { ColumnInfo } from '@/types/connection'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  node: RenderNode
+  isSelected: boolean
+  isHighlighted: boolean
+  headerDragging: boolean
+}>()
+
+const emit = defineEmits<{
+  headerMousedown: [e: MouseEvent]
+  cardDblclick: []
+  cardClick: []
+  toggleExpand: []
+}>()
+
+const fkColumnNames = computed(() => {
+  const names = new Set<string>()
+  for (const fk of props.node.table.foreignKeys) {
+    for (const col of fk.columns)
+      names.add(col)
+    for (const col of fk.referenced_columns)
+      names.add(col)
+  }
+  return names
+})
+
+function isFKColumn(colName: string): boolean {
+  return fkColumnNames.value.has(colName)
+}
+
+function pillClass(col: ColumnInfo): string {
+  if (col.is_primary_key)
+    return 'er-entity-pill--pk'
+  if (isFKColumn(col.name))
+    return 'er-entity-pill--fk'
+  return ''
+}
+
+defineExpose({})
+</script>
+
+<template>
+  <div
+    class="er-entity"
+    :class="{ 'er-entity--selected': isSelected }"
+    @click.stop="emit('cardClick')"
+    @dblclick.stop="emit('cardDblclick')"
+  >
+    <!-- Header (draggable) -->
+    <div
+      class="er-entity-header"
+      :class="{ 'er-entity-header--dragging': headerDragging }"
+      @mousedown="emit('headerMousedown', $event)"
+    >
+      <svg
+        class="er-entity-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        width="14" height="14"
+        viewBox="0 0 24 24"
+        fill="none" stroke="currentColor" stroke-width="2"
+      >
+        <path d="M3 3h18v18H3z" />
+        <path d="M21 9H3" />
+        <path d="M9 21V9" />
+      </svg>
+      {{ node.id }}
+    </div>
+
+    <!-- Column pills -->
+    <div class="er-entity-pills">
+      <span
+        v-for="col in node.table.columns"
+        :key="col.name"
+        class="er-entity-pill" :class="[pillClass(col)]"
+      >
+        <svg
+          v-if="col.is_primary_key"
+          xmlns="http://www.w3.org/2000/svg"
+          width="10" height="10"
+          viewBox="0 0 24 24"
+          fill="none" stroke="currentColor" stroke-width="2"
+          class="er-entity-pill-icon"
+        >
+          <path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z" />
+          <circle cx="16.5" cy="7.5" r=".5" fill="currentColor" />
+        </svg>
+        <svg
+          v-else-if="isFKColumn(col.name)"
+          xmlns="http://www.w3.org/2000/svg"
+          width="10" height="10"
+          viewBox="0 0 24 24"
+          fill="none" stroke="currentColor" stroke-width="2"
+          class="er-entity-pill-icon"
+        >
+          <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
+          <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
+        </svg>
+        <span class="er-entity-pill-name">{{ col.name }}</span>
+      </span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.er-entity {
+  @apply bg-card border-2 border-blue-500/50 rounded-xl shadow-sm;
+  width: 260px;
+  font-size: 12px;
+  user-select: none;
+  overflow: hidden;
+}
+.er-entity--selected {
+  @apply border-primary ring-2 ring-primary/30;
+}
+.er-entity-header {
+  @apply bg-blue-50 dark:bg-blue-950/30 px-3 py-2 font-semibold text-sm border-b border-blue-500/20 flex items-center gap-2;
+  cursor: grab;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.er-entity-header--dragging {
+  cursor: grabbing;
+}
+.er-entity-icon {
+  @apply text-blue-500 shrink-0;
+}
+.er-entity-pills {
+  @apply p-2 flex flex-wrap gap-1.5;
+}
+.er-entity-pill {
+  @apply inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-mono border;
+  max-width: 100%;
+  @apply bg-muted/50 border-border/60 text-muted-foreground;
+}
+.er-entity-pill--pk {
+  @apply bg-amber-50 dark:bg-amber-950/30 border-amber-300 dark:border-amber-700 text-amber-700 dark:text-amber-300;
+}
+.er-entity-pill--fk {
+  @apply bg-blue-50 dark:bg-blue-950/30 border-blue-300 dark:border-blue-700 text-blue-700 dark:text-blue-300;
+}
+.er-entity-pill-name {
+  @apply truncate;
+}
+.er-entity-pill-icon {
+  @apply shrink-0;
+}
+</style>
diff --git a/src/components/er-diagram/ErDiagramView.vue b/src/components/er-diagram/ErDiagramView.vue
index a47cafe..53ba4e9 100644
--- a/src/components/er-diagram/ErDiagramView.vue
+++ b/src/components/er-diagram/ErDiagramView.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
+import type { RenderEdge, RenderNode, TableData } from './types'
 import type { ForeignKeyInfo } from '@/datasources/erDiagramApi'
 import type { ColumnInfo } from '@/types/connection'
 import { invoke } from '@tauri-apps/api/core'
-import { useResizeObserver } from '@vueuse/core'
-import dagre from 'dagre'
+import { useElementBounding, useResizeObserver } from '@vueuse/core'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import {
@@ -23,6 +23,25 @@ import { Spinner } from '@/components/ui/spinner'
 import { getForeignKeys } from '@/datasources/erDiagramApi'
 import { useDatabaseStore } from '@/store/databaseStore'
 
+import EngineeringEntity from './EngineeringEntity.vue'
+import {
+  computeBoundingBox,
+  computeCanvasSize,
+  computeDagreLayout,
+  fitToScreen as fitBboxToScreen,
+} from './graph-layout'
+import {
+  buildTableRectMap,
+  computeRelationshipPath,
+} from './graph-routing'
+import TableCard from './TableCard.vue'
+import {
+  calcNodeHeight,
+  CARD_PADDING,
+  HEADER_HEIGHT,
+  NODE_WIDTH,
+} from './types'
+
 // ─── Props ───────────────────────────────────────────
 const props = defineProps<{
   connectionId: string
@@ -30,67 +49,26 @@ const props = defineProps<{
   schema?: string
 }>()
 
+const emit = defineEmits<{
+  openTable: [tableName: string]
+}>()
+
 const { t } = useI18n()
 
-// ─── Types ────────────────────────────────────────────
+// ─── Types (local) ───────────────────────────────────
 type TableInfo = {
   name: string
   schema?: string
   table_type?: string
 }
 
-type TableData = {
-  name: string
-  schema?: string
-  columns: ColumnInfo[]
-  foreignKeys: ForeignKeyInfo[]
-}
-
-type RenderNode = {
-  id: string
-  x: number
-  y: number
-  width: number
-  height: number
-  table: TableData
-  isHighlighted: boolean
-  visibleColumns: ColumnInfo[]
-  showExpandButton: boolean
-  isExpanded: boolean
-}
-
-type RenderEdge = {
-  from: string
-  to: string
-  label: string
-  path: string
-  isHighlighted: boolean
-}
-
-// ─── Layout Constants ─────────────────────────────────
-const NODE_WIDTH = 220
-const COL_HEIGHT = 28
-const HEADER_HEIGHT = 36
-const EXPAND_BTN_HEIGHT = 30
-const CARD_PADDING = 8
-const ROUTE_PADDING = 56
-const ROUTE_BLOCK_MARGIN = 18
-
-function calcNodeHeight(table: TableData, isExpanded: boolean): number {
-  const colCount = isExpanded
-    ? table.columns.length
-    : Math.min(5, table.columns.length)
-  const expandBtn = table.columns.length > 5 ? EXPAND_BTN_HEIGHT : 0
-  return HEADER_HEIGHT + colCount * COL_HEIGHT + expandBtn + CARD_PADDING
-}
+const CANVAS_PADDING = 80
 
 // ─── State ────────────────────────────────────────────
 const tables = ref<TableData[]>([])
 const foreignKeys = ref<ForeignKeyInfo[]>([])
-const nodePositions = ref<Map<string, { x: number, y: number }>>(new Map())
-const edgePaths = ref<
-  Array<{ from: string, to: string, label: string, path: string }>
->([])
+const dagrePositions = ref<Map<string, { x: number, y: number }>>(new Map())
+const manualOverrides = ref<Map<string, { x: number, y: number }>>(new Map())
 
 const selectedTableId = ref<string | null>(null)
 const searchQuery = ref('')
@@ -98,17 +76,20 @@ const expandedTables = ref<Set<string>>(new Set())
 const layoutDirection = ref<'TB' | 'LR'>('TB')
 
 const zoomLevel = ref(1)
-const panOffset = ref({ x: 0, y: 0 })
-const isPanning = ref(false)
-const panStart = ref({ x: 0, y: 0 })
 const gestureStartZoom = ref(1)
 
 const loading = ref(true)
 const error = ref<string | null>(null)
 const showWarning = ref(false)
-const svgContainerRef = ref<HTMLElement | null>(null)
 
-// ─── Node drag state (delta-offset, no nodePositions update during drag) ───
+// Viewport refs
+const viewportRef = ref<HTMLElement | null>(null)
+const viewportBounds = useElementBounding(viewportRef)
+
+// ─── View mode ───────────────────────────────────
+const viewMode = ref<'table' | 'engineering'>('table')
+
+// ─── Node drag state (delta-offset) ──────────────
 const draggingNodeId = ref<string | null>(null)
 const dragStartPos = ref({ x: 0, y: 0 })
 const dragNodeStart = ref({ x: 0, y: 0 })
@@ -119,9 +100,7 @@ const databaseStore = useDatabaseStore()
 const availableSchemas = ref<string[]>([])
 const localSchema = ref<string>(props.schema ?? '__all__')
 
-const supportsSchemas = computed(() =>
-  availableSchemas.value.length > 0,
-)
+const supportsSchemas = computed(() => availableSchemas.value.length > 0)
 
 const schemaParam = computed(() =>
   localSchema.value === '__all__' ? null : localSchema.value,
@@ -140,6 +119,15 @@ const allRelationships = computed(() =>
   })),
 )
 
+// ─── Combined positions (dagre + manual) ─────────
+const nodePositions = computed(() => {
+  const merged = new Map(dagrePositions.value)
+  for (const [name, pos] of manualOverrides.value) {
+    merged.set(name, pos)
+  }
+  return merged
+})
+
 // ─── Focus mode ───────────────────────────────────
 const focusMode = computed(() => selectedTableId.value !== null)
 
@@ -187,160 +175,76 @@ const highlightedTables = computed(() => {
   return connected
 })
 
+// ─── Render nodes ─────────────────────────────────
 const renderNodes = computed<RenderNode[]>(() => {
-  return displayedTables.value
-    .map((table) => {
-      const pos = nodePositions.value.get(table.name)
-      if (!pos)
-        return null
-
-      const isExpanded = expandedTables.value.has(table.name)
-      const visibleCols = isExpanded
-        ? table.columns
-        : table.columns.slice(0, 5)
-      const height = calcNodeHeight(table, isExpanded)
-
-      return {
-        id: table.name,
-        x: pos.x - NODE_WIDTH / 2,
-        y: pos.y - height / 2,
-        width: NODE_WIDTH,
-        height,
-        table,
-        isHighlighted: highlightedTables.value.has(table.name),
-        visibleColumns: visibleCols,
-        showExpandButton: table.columns.length > 5,
-        isExpanded,
-      }
-    })
-    .filter((n): n is RenderNode => n !== null)
-})
-
-// ─── Orthogonal path routing ──────────────────────
-type TableRect = {
-  name: string
-  x: number
-  y: number
-  width: number
-  height: number
-}
-
-function getTableRect(tableName: string): TableRect | null {
-  const table = tables.value.find(t => t.name === tableName)
-  const pos = nodePositions.value.get(tableName)
-  if (!table || !pos)
-    return null
-  const height = calcNodeHeight(table, expandedTables.value.has(tableName))
-  return {
-    name: tableName,
-    x: pos.x - NODE_WIDTH / 2,
-    y: pos.y - height / 2,
-    width: NODE_WIDTH,
-    height,
-  }
-}
-
-function rangesOverlap(a1: number, a2: number, b1: number, b2: number): boolean {
-  return Math.max(a1, b1) <= Math.min(a2, b2)
-}
-
-function routeSideX(rect: TableRect, routeX: number, offset = 0): number {
-  if (routeX < rect.x)
-    return rect.x - offset
-  return rect.x + rect.width + offset
-}
-
-function tableRects(): TableRect[] {
-  return displayedTables.value
-    .map(t => getTableRect(t.name))
-    .filter((r): r is TableRect => r !== null)
-}
-
-function isVerticalRouteBlocked(routeX: number, y1: number, y2: number, ignored: Set<string>): boolean {
-  const top = Math.min(y1, y2)
-  const bottom = Math.max(y1, y2)
-  return tableRects().some(
-    r =>
-      !ignored.has(r.name)
-      && routeX >= r.x - ROUTE_BLOCK_MARGIN
-      && routeX <= r.x + r.width + ROUTE_BLOCK_MARGIN
-      && rangesOverlap(top, bottom, r.y - ROUTE_BLOCK_MARGIN, r.y + r.height + ROUTE_BLOCK_MARGIN),
-  )
-}
+  return displayedTables.value.map((table) => {
+    const pos = nodePositions.value.get(table.name)
+    if (!pos)
+      return null
 
-function isHorizontalRouteBlocked(y: number, x1: number, x2: number, ignored: Set<string>): boolean {
-  const left = Math.min(x1, x2)
-  const right = Math.max(x1, x2)
-  return tableRects().some(
-    r =>
-      !ignored.has(r.name)
-      && y >= r.y - ROUTE_BLOCK_MARGIN
-      && y <= r.y + r.height + ROUTE_BLOCK_MARGIN
-      && rangesOverlap(left, right, r.x - ROUTE_BLOCK_MARGIN, r.x + r.width + ROUTE_BLOCK_MARGIN),
-  )
-}
+    const isExpanded = expandedTables.value.has(table.name)
+    const hasMore = table.columns.length > 5
+    const height = calcNodeHeight(table.columns.length, hasMore, isExpanded)
+    const visibleCols = isExpanded
+      ? table.columns
+      : table.columns.slice(0, 5)
 
-function candidateRouteXs(source: TableRect, target: TableRect): number[] {
-  const candidates = new Set<number>()
-  const minLeft = Math.min(source.x, target.x)
-  const maxRight = Math.max(source.x + source.width, target.x + target.width)
+    return {
+      id: table.name,
+      x: pos.x - NODE_WIDTH / 2,
+      y: pos.y - height / 2,
+      width: NODE_WIDTH,
+      height,
+      table,
+      isHighlighted: highlightedTables.value.has(table.name),
+      visibleColumns: visibleCols,
+      showExpandButton: hasMore,
+      isExpanded,
+    }
+  }).filter((n): n is RenderNode => n !== null)
+})
 
-  candidates.add(minLeft - ROUTE_PADDING)
-  candidates.add(maxRight + ROUTE_PADDING)
+// ─── Canvas size ──────────────────────────────────
+const nodeHeights = computed(() => {
+  const map = new Map<string, number>()
+  for (const node of renderNodes.value) {
+    map.set(node.id, node.height)
+  }
+  return map
+})
 
-  if (source.x + source.width + ROUTE_PADDING <= target.x)
-    candidates.add((source.x + source.width + target.x) / 2)
-  if (target.x + target.width + ROUTE_PADDING <= source.x)
-    candidates.add((target.x + target.width + source.x) / 2)
+const canvasSize = computed(() => {
+  if (nodePositions.value.size === 0)
+    return { width: 800, height: 600 }
 
-  const columns = [...new Set(tableRects().map(r => r.x))].sort((a, b) => a - b)
-  for (let i = 0; i < columns.length - 1; i++) {
-    const gap = columns[i + 1] - (columns[i] + NODE_WIDTH)
-    if (gap >= ROUTE_PADDING)
-      candidates.add((columns[i] + NODE_WIDTH + columns[i + 1]) / 2)
+  const sizes = new Map<string, { width: number, height: number }>()
+  for (const node of renderNodes.value) {
+    sizes.set(node.id, { width: NODE_WIDTH, height: node.height })
   }
 
-  return [...candidates].sort((a, b) => {
-    const sa = routeSideX(source, a)
-    const ta = routeSideX(target, a)
-    const sb = routeSideX(source, b)
-    const tb = routeSideX(target, b)
-    return Math.abs(a - sa) + Math.abs(a - ta) - (Math.abs(b - sb) + Math.abs(b - tb))
-  })
-}
-
-function computeRelationshipPath(sourceTable: string, targetTable: string): string {
-  const source = getTableRect(sourceTable)
-  const target = getTableRect(targetTable)
-  if (!source || !target)
-    return ''
-
-  const y1 = source.y + source.height / 2
-  const y2 = target.y + target.height / 2
-  const ignored = new Set([source.name, target.name])
-  const candidates = candidateRouteXs(source, target)
-
-  const routeX
-    = candidates.find((c) => {
-      const x1 = routeSideX(source, c)
-      const x2 = routeSideX(target, c)
-      return (
-        !isVerticalRouteBlocked(c, y1, y2, ignored)
-        && !isHorizontalRouteBlocked(y1, x1, c, ignored)
-        && !isHorizontalRouteBlocked(y2, c, x2, ignored)
-      )
-    })
-    ?? candidates[0]
-    ?? Math.max(source.x + source.width, target.x + target.width) + ROUTE_PADDING
+  const bbox = computeBoundingBox(nodePositions.value, sizes)
+  return computeCanvasSize(bbox, CANVAS_PADDING)
+})
 
-  const x1 = routeSideX(source, routeX, 2)
-  const x2 = routeSideX(target, routeX, 2)
-  return `M ${x1} ${y1} L ${routeX} ${y1} L ${routeX} ${y2} L ${x2} ${y2}`
-}
+// ─── Render edges (orthogonal routing) ────────────
+const tableRectMap = computed(() => {
+  return buildTableRectMap(
+    displayedTables.value.map(t => t.name),
+    nodePositions.value,
+    (name) => {
+      const h = nodeHeights.value.get(name)
+      return h ?? HEADER_HEIGHT + CARD_PADDING
+    },
+  )
+})
 
 const renderEdges = computed<RenderEdge[]>(() => {
   return displayedRelationships.value.map((rel) => {
-    const path = computeRelationshipPath(rel.sourceTable, rel.targetTable)
+    const path = computeRelationshipPath(
+      rel.sourceTable,
+      rel.targetTable,
+      tableRectMap.value,
+    )
     return {
       from: rel.sourceTable,
       to: rel.targetTable,
@@ -357,45 +261,26 @@ const renderEdges = computed<RenderEdge[]>(() => {
 // ─── Layout Computation ───────────────────────────────
 function computeLayout() {
   if (displayedTables.value.length === 0) {
-    nodePositions.value = new Map()
-    edgePaths.value = []
+    dagrePositions.value = new Map()
+    manualOverrides.value = new Map()
     return
   }
 
-  const g = new dagre.graphlib.Graph()
-  g.setGraph({
-    rankdir: layoutDirection.value,
-    nodesep: 80,
-    ranksep: 120,
-    marginx: 40,
-    marginy: 40,
-  })
-  g.setDefaultEdgeLabel(() => ({}))
-
-  for (const table of displayedTables.value) {
+  const dagreTables = displayedTables.value.map((table) => {
     const isExpanded = expandedTables.value.has(table.name)
-    const height = calcNodeHeight(table, isExpanded)
-    g.setNode(table.name, {
-      label: table.name,
-      width: NODE_WIDTH,
-      height,
-    })
-  }
-
-  for (const rel of displayedRelationships.value) {
-    g.setEdge(rel.sourceTable, rel.targetTable, { label: '' })
-  }
-
-  dagre.layout(g)
-
-  const positions = new Map<string, { x: number, y: number }>()
-  g.nodes().forEach((nodeName: string) => {
-    const node = g.node(nodeName) as { x: number, y: number }
-    positions.set(nodeName, { x: node.x, y: node.y })
+    const hasMore = table.columns.length > 5
+    const h = calcNodeHeight(table.columns.length, hasMore, isExpanded)
+    return { name: table.name, width: NODE_WIDTH, height: h }
   })
 
-  nodePositions.value = positions
-  edgePaths.value = []
+  const dagreRels = displayedRelationships.value.map(rel => ({
+    sourceTable: rel.sourceTable,
+    targetTable: rel.targetTable,
+  }))
+
+  const positions = computeDagreLayout(dagreTables, dagreRels, layoutDirection.value)
+  dagrePositions.value = positions
+  manualOverrides.value = new Map()
 }
 
 // ─── Data Fetching ────────────────────────────────────
@@ -488,36 +373,31 @@ watch(localSchema, () => {
 })
 
 // ─── Interaction Handlers ─────────────────────────────
-function startPan(e: MouseEvent) {
-  const target = e.target as HTMLElement
-  const isCanvasClick
-    = target === svgContainerRef.value
-      || target.tagName === 'svg'
-  if (!isCanvasClick)
-    return
+function selectTable(tableName: string) {
+  selectedTableId.value
+    = selectedTableId.value === tableName ? null : tableName
+}
 
-  isPanning.value = true
-  panStart.value = {
-    x: e.clientX - panOffset.value.x,
-    y: e.clientY - panOffset.value.y,
-  }
+function deselectAll() {
+  selectedTableId.value = null
 }
 
-function onPan(e: MouseEvent) {
-  if (!isPanning.value)
-    return
-  panOffset.value = {
-    x: e.clientX - panStart.value.x,
-    y: e.clientY - panStart.value.y,
-  }
+function toggleExpand(tableName: string) {
+  const next = new Set(expandedTables.value)
+  if (next.has(tableName))
+    next.delete(tableName)
+  else
+    next.add(tableName)
+  expandedTables.value = next
 }
 
-function endPan() {
-  isPanning.value = false
+function toggleLayout() {
+  layoutDirection.value
+    = layoutDirection.value === 'TB' ? 'LR' : 'TB'
 }
 
-// ─── Node Drag Handlers (delta-offset: nodePositions only updated on drop) ──
-function onNodeMouseDown(e: MouseEvent, nodeId: string) {
+// ─── Header-only drag handlers ───────────────────
+function onHeaderMousedown(e: MouseEvent, nodeId: string) {
   if (e.button !== 0)
     return
   const pos = nodePositions.value.get(nodeId)
@@ -527,11 +407,11 @@ function onNodeMouseDown(e: MouseEvent, nodeId: string) {
   dragStartPos.value = { x: e.clientX, y: e.clientY }
   dragNodeStart.value = { x: pos.x, y: pos.y }
   dragDelta.value = { x: 0, y: 0 }
-  document.addEventListener('mousemove', onNodeMouseMove)
-  document.addEventListener('mouseup', onNodeMouseUp)
+  document.addEventListener('mousemove', onHeaderMouseMove)
+  document.addEventListener('mouseup', onHeaderMouseUp)
 }
 
-function onNodeMouseMove(e: MouseEvent) {
+function onHeaderMouseMove(e: MouseEvent) {
   if (!draggingNodeId.value)
     return
   dragDelta.value = {
@@ -540,43 +420,39 @@ function onNodeMouseMove(e: MouseEvent) {
   }
 }
 
-function onNodeMouseUp() {
+function onHeaderMouseUp() {
   if (draggingNodeId.value) {
     const finalX = dragNodeStart.value.x + dragDelta.value.x
     const finalY = dragNodeStart.value.y + dragDelta.value.y
-    const positions = new Map(nodePositions.value)
-    positions.set(draggingNodeId.value, { x: finalX, y: finalY })
-    nodePositions.value = positions
+    const overrides = new Map(manualOverrides.value)
+    overrides.set(draggingNodeId.value, { x: finalX, y: finalY })
+    manualOverrides.value = overrides
   }
   draggingNodeId.value = null
   dragDelta.value = { x: 0, y: 0 }
-  document.removeEventListener('mousemove', onNodeMouseMove)
-  document.removeEventListener('mouseup', onNodeMouseUp)
+  document.removeEventListener('mousemove', onHeaderMouseMove)
+  document.removeEventListener('mouseup', onHeaderMouseUp)
 }
 
 // ─── Zoom ─────────────────────────────────────────────
 function onWheel(e: WheelEvent) {
-  if (!e.ctrlKey && !e.metaKey) {
-    // Without ctrl/meta: pan vertically
-    panOffset.value = { ...panOffset.value, y: panOffset.value.y - e.deltaY }
-    return
-  }
+  if (!e.ctrlKey && !e.metaKey)
+    return // native scroll
   e.preventDefault()
   const delta = -e.deltaY / 500
   const nextZoom = Math.max(0.1, Math.min(3, +(zoomLevel.value * (1 + delta)).toFixed(2)))
 
-  // Zoom centered on mouse position
-  const rect = svgContainerRef.value?.getBoundingClientRect()
-  if (rect) {
-    const originX = e.clientX - rect.left
-    const originY = e.clientY - rect.top
-    const contentX = (originX - panOffset.value.x) / zoomLevel.value
-    const contentY = (originY - panOffset.value.y) / zoomLevel.value
+  // Zoom centered on mouse position relative to content
+  const vp = viewportRef.value
+  if (vp) {
+    const vpRect = vp.getBoundingClientRect()
+    const originX = e.clientX - vpRect.left
+    const originY = e.clientY - vpRect.top
+    const contentX = (vp.scrollLeft + originX) / zoomLevel.value
+    const contentY = (vp.scrollTop + originY) / zoomLevel.value
     zoomLevel.value = nextZoom
-    panOffset.value = {
-      x: originX - contentX * nextZoom,
-      y: originY - contentY * nextZoom,
-    }
+    vp.scrollLeft = contentX * nextZoom - originX
+    vp.scrollTop = contentY * nextZoom - originY
   }
   else {
     zoomLevel.value = nextZoom
@@ -597,45 +473,26 @@ function onGestureChange(e: Event) {
 }
 
 function fitToScreen() {
-  zoomLevel.value = 1
-  panOffset.value = { x: 0, y: 0 }
-}
-
-function selectTable(tableName: string) {
-  selectedTableId.value
-    = selectedTableId.value === tableName ? null : tableName
-}
-
-function deselectAll() {
-  selectedTableId.value = null
-}
-
-function toggleExpand(tableName: string) {
-  const next = new Set(expandedTables.value)
-  if (next.has(tableName))
-    next.delete(tableName)
-  else
-    next.add(tableName)
-  expandedTables.value = next
+  if (!viewportRef.value)
+    return
+  const vpW = viewportBounds.width.value || 800
+  const vpH = viewportBounds.height.value || 600
+  const result = fitBboxToScreen(canvasSize.value, vpW, vpH)
+  zoomLevel.value = result.zoom
+  viewportRef.value.scrollLeft = result.scrollX
+  viewportRef.value.scrollTop = result.scrollY
 }
 
-function toggleLayout() {
-  layoutDirection.value
-    = layoutDirection.value === 'TB' ? 'LR' : 'TB'
+function resetLayout() {
+  computeLayout()
+  fitToScreen()
 }
 
 // ─── Resize Observer ──────────────────────────────────
-useResizeObserver(svgContainerRef, () => {
-  // Dagre layout is independent of container size
+useResizeObserver(viewportRef, () => {
+  // Viewport size changes may affect fit-to-screen but we don't auto-fit
 })
 
-// ─── Helpers ──────────────────────────────────────────
-function isFKColumn(table: TableData, colName: string): boolean {
-  return table.foreignKeys.some(
-    fk => fk.columns.includes(colName) || fk.referenced_columns.includes(colName),
-  )
-}
-
 // ─── Lifecycle ────────────────────────────────────────
 onMounted(async () => {
   await fetchAvailableSchemas()
@@ -643,15 +500,15 @@ onMounted(async () => {
 })
 
 onUnmounted(() => {
-  document.removeEventListener('mousemove', onNodeMouseMove)
-  document.removeEventListener('mouseup', onNodeMouseUp)
+  document.removeEventListener('mousemove', onHeaderMouseMove)
+  document.removeEventListener('mouseup', onHeaderMouseUp)
 })
 </script>
 
 <template>
   <div class="er-diagram-view bg-background flex flex-col h-full">
     <!-- ── Toolbar ──────────────────────────────────── -->
-    <div class="px-3 py-2 border-b bg-muted/30 flex gap-2 items-center">
+    <div class="px-3 py-2 border-b bg-muted/30 flex shrink-0 gap-2 items-center">
       <!-- Schema selector -->
       <div v-if="supportsSchemas" class="w-44">
         <Select v-model="localSchema">
@@ -676,19 +533,8 @@ onUnmounted(() => {
 
       <!-- Search -->
       <div class="flex-1 max-w-xs relative">
-        <svg
-          xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
-          fill="none" stroke="currentColor" stroke-width="2"
-          stroke-linecap="round" stroke-linejoin="round"
-          class="text-muted-foreground left-2 top-1/2 absolute -translate-y-1/2"
-        >
-          <circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" />
-        </svg>
-        <Input
-          v-model="searchQuery"
-          :placeholder="t('components.databaseBrowser.erDiagram.searchPlaceholder')"
-          class="text-xs pl-7 h-8"
-        />
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-muted-foreground left-2 top-1/2 absolute -translate-y-1/2"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>
+        <Input v-model="searchQuery" :placeholder="t('components.databaseBrowser.erDiagram.searchPlaceholder')" class="text-xs pl-7 h-8" />
       </div>
 
       <!-- Info badges -->
@@ -700,39 +546,52 @@ onUnmounted(() => {
         <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" /><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" /></svg>
         {{ displayedRelationships.length }}
       </Badge>
+
+      <div class="border rounded-md flex h-7 items-center overflow-hidden">
+        <button
+          class="text-[11px] leading-none px-2 h-full transition-colors"
+          :class="viewMode === 'table' ? 'bg-accent text-accent-foreground' : 'text-muted-foreground hover:text-foreground'"
+          :title="t('components.databaseBrowser.erDiagram.tableView')"
+          @click="viewMode = 'table'"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1 align-text-bottom inline"><path d="M3 3h18v18H3z" /><path d="M21 9H3" /><path d="M9 21V9" /></svg>
+          {{ t('components.databaseBrowser.erDiagram.tableView') }}
+        </button>
+        <button
+          class="text-[11px] leading-none px-2 border-l h-full transition-colors"
+          :class="viewMode === 'engineering' ? 'bg-accent text-accent-foreground' : 'text-muted-foreground hover:text-foreground'"
+          :title="t('components.databaseBrowser.erDiagram.engineeringView')"
+          @click="viewMode = 'engineering'"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1 align-text-bottom inline"><circle cx="12" cy="12" r="3" /><circle cx="19" cy="5" r="2" /><circle cx="5" cy="19" r="2" /><line x1="12" y1="12" x2="13.65" y2="5.87" /><line x1="12" y1="12" x2="6.35" y2="17.13" /><line x1="12" y1="12" x2="17" y2="14" /></svg>
+          {{ t('components.databaseBrowser.erDiagram.engineeringView') }}
+        </button>
+      </div>
+
       <div class="flex-1" />
 
-      <!-- Layout direction toggle -->
+      <!-- Reset Layout -->
       <Button
-        variant="ghost" size="sm"
-        class="text-xs gap-1 h-7"
-        :title="t('components.databaseBrowser.erDiagram.layoutDirection')"
-        @click="toggleLayout"
+        variant="ghost" size="icon" class="h-7 w-7"
+        :title="t('components.databaseBrowser.erDiagram.resetLayout')"
+        @click="resetLayout"
       >
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10" /><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10" /></svg>
+      </Button>
+
+      <!-- Layout direction toggle -->
+      <Button variant="ghost" size="sm" class="text-xs gap-1 h-7" :title="t('components.databaseBrowser.erDiagram.layoutDirection')" @click="toggleLayout">
         <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" /><rect x="14" y="3" width="7" height="7" /><rect x="14" y="14" width="7" height="7" /><rect x="3" y="14" width="7" height="7" /></svg>
-        {{
-          layoutDirection === 'TB'
-            ? t('components.databaseBrowser.erDiagram.layoutLeftRight')
-            : t('components.databaseBrowser.erDiagram.layoutTopBottom')
-        }}
+        {{ layoutDirection === 'TB' ? t('components.databaseBrowser.erDiagram.layoutLeftRight') : t('components.databaseBrowser.erDiagram.layoutTopBottom') }}
       </Button>
 
       <!-- Fit to screen -->
-      <Button
-        variant="ghost" size="icon" class="h-7 w-7"
-        :title="t('components.databaseBrowser.erDiagram.fitToScreen')"
-        @click="fitToScreen"
-      >
+      <Button variant="ghost" size="icon" class="h-7 w-7" :title="t('components.databaseBrowser.erDiagram.fitToScreen')" @click="fitToScreen">
         <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3" /><path d="M21 8V5a2 2 0 0 0-2-2h-3" /><path d="M16 21h3a2 2 0 0 0 2-2v-3" /><path d="M3 16v3a2 2 0 0 0 2 2h3" /></svg>
       </Button>
 
       <!-- Refresh -->
-      <Button
-        variant="ghost" size="icon" class="h-7 w-7"
-        :title="t('common.buttons.refresh')"
-        :disabled="loading"
-        @click="fetchSchemaData"
-      >
+      <Button variant="ghost" size="icon" class="h-7 w-7" :title="t('common.buttons.refresh')" :disabled="loading" @click="fetchSchemaData">
         <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :class="{ 'animate-spin': loading }"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" /><path d="M21 3v5h-5" /><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" /><path d="M8 16H3v5" /></svg>
       </Button>
 
@@ -754,9 +613,7 @@ onUnmounted(() => {
     <AlertDialog v-model:open="showWarning">
       <AlertDialogContent>
         <AlertDialogHeader>
-          <AlertDialogTitle>
-            {{ t('components.databaseBrowser.erDiagram.largeSchemaWarning', { count: tables.length }) }}
-          </AlertDialogTitle>
+          <AlertDialogTitle>{{ t('components.databaseBrowser.erDiagram.largeSchemaWarning', { count: tables.length }) }}</AlertDialogTitle>
         </AlertDialogHeader>
         <AlertDialogFooter>
           <AlertDialogCancel @click="showWarning = false">
@@ -769,17 +626,14 @@ onUnmounted(() => {
       </AlertDialogContent>
     </AlertDialog>
 
-    <!-- ── Canvas Area ──────────────────────────────── -->
+    <!-- ── Canvas Area (pure HTML, no foreignObject) ── -->
     <div
-      ref="svgContainerRef"
-      class="flex-1 cursor-grab relative overflow-hidden"
-      @mousedown="startPan"
-      @mousemove="onPan"
-      @mouseup="endPan"
-      @mouseleave="endPan"
+      ref="viewportRef"
+      class="bg-muted/5 flex-1 relative overflow-auto"
       @wheel.prevent="onWheel"
       @gesturestart="onGestureStart"
       @gesturechange="onGestureChange"
+      @click.self="deselectAll"
     >
       <!-- Loading -->
       <div v-if="loading" class="flex gap-2 items-center inset-0 justify-center absolute">
@@ -811,147 +665,83 @@ onUnmounted(() => {
         </p>
       </div>
 
-      <!-- SVG Canvas -->
-      <svg
+      <!-- Content area (scaled) -->
+      <div
         v-show="!loading && displayedTables.length > 0"
-        class="h-full w-full"
+        class="relative"
         :style="{
-          transform: `scale(${zoomLevel}) translate(${panOffset.x}px, ${panOffset.y}px)`,
-          transformOrigin: '0 0',
-          overflow: 'visible',
+          width: `${canvasSize.width * zoomLevel}px`,
+          height: `${canvasSize.height * zoomLevel}px`,
         }"
-        @click.self="deselectAll"
-        @dblclick="fitToScreen"
       >
-        <defs>
-          <marker id="er-arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
-            <polygon points="0 0, 10 3.5, 0 7" fill="hsl(var(--muted-foreground))" />
-          </marker>
-        </defs>
-
-        <!-- Relationship lines -->
-        <g v-for="(edge, idx) in renderEdges" :key="`edge-${idx}`">
-          <path
-            :d="edge.path"
-            fill="none"
-            :stroke="edge.isHighlighted ? 'hsl(var(--primary))' : 'hsl(var(--muted-foreground))'"
-            :stroke-width="edge.isHighlighted ? 2 : 1"
-            :stroke-dasharray="edge.label ? '4 3' : 'none'"
-            marker-end="url(#er-arrowhead)"
-          />
-        </g>
-
-        <!-- Table cards -->
-        <g
-          v-for="node in renderNodes"
-          :key="node.id"
-          :transform="`translate(${node.x + (draggingNodeId === node.id ? dragDelta.x : 0)}, ${node.y + (draggingNodeId === node.id ? dragDelta.y : 0)})`"
-          class="er-table-group"
-          :class="{ 'er-table-group--dragging': draggingNodeId === node.id }"
-          @mousedown.prevent="onNodeMouseDown($event, node.id)"
-          @click.stop="selectTable(node.id)"
+        <div
+          class="origin-top-left left-0 top-0 absolute"
+          :style="{
+            width: `${canvasSize.width}px`,
+            height: `${canvasSize.height}px`,
+            transform: `scale(${zoomLevel})`,
+          }"
+          @click.self="deselectAll"
         >
-          <foreignObject :width="node.width" :height="node.height">
-            <div
-              class="er-table-card"
-              :class="{
-                'er-table-card--selected': selectedTableId === node.id,
-              }"
-            >
-              <!-- Table header -->
-              <div class="er-table-header">{{ node.id }}</div>
-
-              <!-- Columns -->
-              <div class="er-table-columns">
-                <div
-                  v-for="(col, colIdx) in node.visibleColumns"
-                  :key="colIdx"
-                  class="er-table-column"
-                >
-                  <span class="er-column-markers">
-                    <span v-if="col.is_primary_key" class="er-pk">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z" /><circle cx="16.5" cy="7.5" r=".5" fill="currentColor" /></svg>
-                    </span>
-                    <span v-else-if="isFKColumn(node.table, col.name)" class="er-fk">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" /><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" /></svg>
-                    </span>
-                    <span v-else class="er-col-spacer" />
-                  </span>
-                  <span class="er-column-name">{{ col.name }}</span>
-                  <span class="er-column-type">{{ col.data_type }}</span>
-                </div>
-              </div>
-
-              <!-- Show more / less toggle -->
-              <button
-                v-if="node.showExpandButton"
-                class="er-expand-btn whitespace-nowrap"
-                @click.stop="toggleExpand(node.id)"
-              >
-                {{
-                  node.isExpanded
-                    ? t('components.databaseBrowser.erDiagram.hideExtraColumns')
-                    : t('components.databaseBrowser.erDiagram.showAllColumns', { count: node.table.columns.length })
-                }}
-              </button>
-            </div>
-          </foreignObject>
-        </g>
-      </svg>
+          <!-- SVG overlay for relationship lines -->
+          <svg class="h-full w-full pointer-events-none inset-0 absolute overflow-visible" style="z-index: 0;">
+            <defs>
+              <marker id="er-arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto" markerUnits="strokeWidth">
+                <polygon points="0 0, 10 3.5, 0 7" fill="hsl(var(--muted-foreground))" />
+              </marker>
+            </defs>
+            <path
+              v-for="(edge, idx) in renderEdges"
+              :key="`edge-${idx}`"
+              :d="edge.path"
+              fill="none"
+              :stroke="edge.isHighlighted ? 'hsl(var(--primary))' : 'hsl(var(--muted-foreground))'"
+              :stroke-width="edge.isHighlighted ? 2 : 1"
+              marker-end="url(#er-arrowhead)"
+            />
+          </svg>
+
+          <!-- Table cards / Engineering entities -->
+          <div
+            v-for="node in renderNodes"
+            :key="node.id"
+            :style="{
+              position: 'absolute',
+              left: 0,
+              top: 0,
+              transform: `translate(${node.x + (draggingNodeId === node.id ? dragDelta.x : 0)}px, ${node.y + (draggingNodeId === node.id ? dragDelta.y : 0)}px)`,
+            }"
+          >
+            <TableCard
+              v-if="viewMode === 'table'"
+              :node="node"
+              :is-selected="selectedTableId === node.id"
+              :is-highlighted="node.isHighlighted"
+              :header-dragging="draggingNodeId === node.id"
+              @header-mousedown="onHeaderMousedown($event, node.id)"
+              @card-dblclick="emit('openTable', node.id)"
+              @card-click="selectTable(node.id)"
+              @toggle-expand="toggleExpand(node.id)"
+            />
+            <EngineeringEntity
+              v-else
+              :node="node"
+              :is-selected="selectedTableId === node.id"
+              :is-highlighted="node.isHighlighted"
+              :header-dragging="draggingNodeId === node.id"
+              @header-mousedown="onHeaderMousedown($event, node.id)"
+              @card-dblclick="emit('openTable', node.id)"
+              @card-click="selectTable(node.id)"
+              @toggle-expand="toggleExpand(node.id)"
+            />
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <style scoped>
-.er-table-group {
-  cursor: grab;
-}
-.er-table-group--dragging {
-  cursor: grabbing;
-}
-.er-table-card {
-  @apply bg-card border border-border rounded-lg shadow-sm;
-  width: 220px;
-  font-size: 12px;
-  user-select: none;
-}
-.er-table-card--selected {
-  @apply border-primary ring-1 ring-primary shadow-md;
-}
-.er-table-header {
-  @apply bg-muted px-3 py-2 font-semibold text-sm border-b border-border;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.er-table-columns {
-  @apply divide-y divide-border/50;
-}
-.er-table-column {
-  @apply px-3 py-1.5 flex gap-1 items-center text-xs;
-}
-.er-column-name {
-  @apply font-mono flex-1 truncate;
-}
-.er-column-type {
-  @apply text-muted-foreground text-[10px] flex-shrink-0;
-  max-width: 80px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.er-column-markers {
-  @apply flex gap-0.5 flex-shrink-0 w-4 items-center justify-center;
-}
-.er-pk {
-  @apply text-amber-500 flex-shrink-0;
-}
-.er-fk {
-  @apply text-blue-500 flex-shrink-0;
-}
-.er-col-spacer {
-  @apply block w-3;
-}
-.er-expand-btn {
-  @apply w-full text-xs text-muted-foreground hover:text-foreground py-1.5 border-t border-border bg-muted/30 hover:bg-muted/50 transition-colors;
-}
+/* Table view styles are in TableCard.vue */
+/* Engineering view styles are in EngineeringEntity.vue */
 </style>
diff --git a/src/components/er-diagram/TableCard.vue b/src/components/er-diagram/TableCard.vue
new file mode 100644
index 0000000..4f57768
--- /dev/null
+++ b/src/components/er-diagram/TableCard.vue
@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import type { RenderNode } from './types'
+
+const props = defineProps<{
+  node: RenderNode
+  isSelected: boolean
+  isHighlighted: boolean
+  headerDragging: boolean
+}>()
+
+const emit = defineEmits<{
+  headerMousedown: [e: MouseEvent]
+  cardDblclick: []
+  cardClick: []
+  toggleExpand: []
+}>()
+
+function isFKColumn(colName: string): boolean {
+  return props.node.table.foreignKeys.some(
+    fk => fk.columns.includes(colName) || fk.referenced_columns.includes(colName),
+  )
+}
+</script>
+
+<template>
+  <div
+    class="er-table-card"
+    :class="{ 'er-table-card--selected': isSelected }"
+    @click.stop="emit('cardClick')"
+    @dblclick.stop="emit('cardDblclick')"
+  >
+    <!-- Header: only this triggers drag -->
+    <div
+      class="er-table-header"
+      :class="{ 'er-table-header--dragging': headerDragging }"
+      @mousedown="emit('headerMousedown', $event)"
+    >
+      {{ node.id }}
+    </div>
+
+    <!-- Columns list -->
+    <div class="er-table-columns">
+      <div
+        v-for="col in node.visibleColumns"
+        :key="col.name"
+        class="er-table-column"
+      >
+        <span class="er-column-markers">
+          <span v-if="col.is_primary_key" class="er-pk">
+            <!-- key SVG -->
+            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z" /><circle cx="16.5" cy="7.5" r=".5" fill="currentColor" /></svg>
+          </span>
+          <span v-else-if="isFKColumn(col.name)" class="er-fk">
+            <!-- link SVG -->
+            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" /><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" /></svg>
+          </span>
+          <span v-else class="er-col-spacer" />
+        </span>
+        <span class="er-column-name">{{ col.name }}</span>
+        <span class="er-column-type">{{ col.data_type }}</span>
+      </div>
+    </div>
+
+    <!-- Show more / less toggle -->
+    <button
+      v-if="node.showExpandButton"
+      class="er-expand-btn"
+      @click.stop="emit('toggleExpand')"
+    >
+      {{ node.isExpanded ? $t('components.databaseBrowser.erDiagram.hideExtraColumns') : $t('components.databaseBrowser.erDiagram.showAllColumns', { count: node.table.columns.length }) }}
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.er-table-card {
+  @apply bg-card border border-border rounded-lg shadow-sm;
+  width: 220px;
+  font-size: 12px;
+  user-select: none;
+}
+.er-table-card--selected {
+  @apply border-primary ring-1 ring-primary shadow-md;
+}
+.er-table-header {
+  @apply bg-muted px-3 py-2 font-semibold text-sm border-b border-border;
+  cursor: grab;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.er-table-header--dragging {
+  cursor: grabbing;
+}
+.er-table-columns {
+  @apply divide-y divide-border/50;
+}
+.er-table-column {
+  @apply px-3 py-1.5 flex gap-1 items-center text-xs;
+}
+.er-column-name {
+  @apply font-mono flex-1 truncate;
+}
+.er-column-type {
+  @apply text-muted-foreground text-[10px] flex-shrink-0;
+  max-width: 80px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.er-column-markers {
+  @apply flex gap-0.5 flex-shrink-0 w-4 items-center justify-center;
+}
+.er-pk {
+  @apply text-amber-500 flex-shrink-0;
+}
+.er-fk {
+  @apply text-blue-500 flex-shrink-0;
+}
+.er-col-spacer {
+  @apply block w-3;
+}
+.er-expand-btn {
+  @apply w-full text-xs text-muted-foreground hover:text-foreground py-1.5 border-t border-border bg-muted/30 hover:bg-muted/50 transition-colors;
+}
+</style>
diff --git a/src/components/er-diagram/graph-layout.ts b/src/components/er-diagram/graph-layout.ts
new file mode 100644
index 0000000..fc5c285
--- /dev/null
+++ b/src/components/er-diagram/graph-layout.ts
@@ -0,0 +1,104 @@
+import * as dagre from 'dagre'
+
+export type DagreTable = {
+  name: string
+  width: number
+  height: number
+}
+
+export type DagreRel = {
+  sourceTable: string
+  targetTable: string
+}
+
+export function computeDagreLayout(
+  tables: DagreTable[],
+  relationships: DagreRel[],
+  direction: 'TB' | 'LR',
+): Map<string, { x: number, y: number }> {
+  const g = new dagre.graphlib.Graph()
+  g.setGraph({
+    rankdir: direction,
+    nodesep: 80,
+    ranksep: 120,
+    marginx: 40,
+    marginy: 40,
+  })
+  g.setDefaultEdgeLabel(() => ({}))
+
+  for (const table of tables)
+    g.setNode(table.name, { label: table.name, width: table.width, height: table.height })
+
+  for (const rel of relationships)
+    g.setEdge(rel.sourceTable, rel.targetTable, { label: '' })
+
+  dagre.layout(g)
+
+  const positions = new Map<string, { x: number, y: number }>()
+  g.nodes().forEach((nodeName: string) => {
+    const node = g.node(nodeName) as { x: number, y: number }
+    positions.set(nodeName, { x: node.x, y: node.y })
+  })
+
+  return positions
+}
+
+export function computeBoundingBox(
+  positions: Map<string, { x: number, y: number }>,
+  sizes: Map<string, { width: number, height: number }>,
+): { minX: number, minY: number, maxX: number, maxY: number } {
+  let minX = Infinity
+  let minY = Infinity
+  let maxX = -Infinity
+  let maxY = -Infinity
+
+  for (const [name, pos] of positions) {
+    const size = sizes.get(name)
+    if (!size)
+      continue
+
+    const left = pos.x - size.width / 2
+    const right = pos.x + size.width / 2
+    const top = pos.y - size.height / 2
+    const bottom = pos.y + size.height / 2
+
+    if (left < minX)
+      minX = left
+    if (top < minY)
+      minY = top
+    if (right > maxX)
+      maxX = right
+    if (bottom > maxY)
+      maxY = bottom
+  }
+
+  if (minX === Infinity)
+    return { minX: 0, minY: 0, maxX: 0, maxY: 0 }
+
+  return { minX, minY, maxX, maxY }
+}
+
+export function computeCanvasSize(
+  bbox: { minX: number, minY: number, maxX: number, maxY: number },
+  padding: number,
+): { width: number, height: number } {
+  return {
+    width: Math.max(800, bbox.maxX - bbox.minX + 2 * padding),
+    height: Math.max(600, bbox.maxY - bbox.minY + 2 * padding),
+  }
+}
+
+export function fitToScreen(
+  bbox: { width: number, height: number },
+  viewportWidth: number,
+  viewportHeight: number,
+): { zoom: number, scrollX: number, scrollY: number } {
+  const rawZoom = Math.min(
+    viewportWidth / bbox.width,
+    viewportHeight / bbox.height,
+  )
+  const zoom = Math.max(0.1, Math.min(3, rawZoom))
+  const scrollX = (viewportWidth - bbox.width * zoom) / 2
+  const scrollY = (viewportHeight - bbox.height * zoom) / 2
+  return { zoom, scrollX, scrollY }
+}
diff --git a/src/components/er-diagram/graph-routing.ts b/src/components/er-diagram/graph-routing.ts
new file mode 100644
index 0000000..b9f7303
--- /dev/null
+++ b/src/components/er-diagram/graph-routing.ts
@@ -0,0 +1,132 @@
+import type { TableRect } from './types'
+import { NODE_WIDTH, ROUTE_BLOCK_MARGIN, ROUTE_PADDING } from './types'
+
+export function rangesOverlap(a1: number, a2: number, b1: number, b2: number): boolean {
+  return Math.max(a1, b1) <= Math.min(a2, b2)
+}
+
+export function routeSideX(rect: TableRect, routeX: number, offset = 0): number {
+  if (routeX < rect.x)
+    return rect.x - offset
+  return rect.x + rect.width + offset
+}
+
+export function isVerticalRouteBlocked(
+  routeX: number,
+  y1: number,
+  y2: number,
+  ignored: Set<string>,
+  rects: TableRect[],
+): boolean {
+  const top = Math.min(y1, y2)
+  const bottom = Math.max(y1, y2)
+  return rects.some(
+    r =>
+      !ignored.has(r.name)
+      && routeX >= r.x - ROUTE_BLOCK_MARGIN
+      && routeX <= r.x + r.width + ROUTE_BLOCK_MARGIN
+      && rangesOverlap(top, bottom, r.y - ROUTE_BLOCK_MARGIN, r.y + r.height + ROUTE_BLOCK_MARGIN),
+  )
+}
+
+export function isHorizontalRouteBlocked(
+  y: number,
+  x1: number,
+  x2: number,
+  ignored: Set<string>,
+  rects: TableRect[],
+): boolean {
+  const left = Math.min(x1, x2)
+  const right = Math.max(x1, x2)
+  return rects.some(
+    r =>
+      !ignored.has(r.name)
+      && y >= r.y - ROUTE_BLOCK_MARGIN
+      && y <= r.y + r.height + ROUTE_BLOCK_MARGIN
+      && rangesOverlap(left, right, r.x - ROUTE_BLOCK_MARGIN, r.x + r.width + ROUTE_BLOCK_MARGIN),
+  )
+}
+
+export function candidateRouteXs(source: TableRect, target: TableRect, rects: TableRect[]): number[] {
+  const candidates = new Set<number>()
+  const minLeft = Math.min(source.x, target.x)
+  const maxRight = Math.max(source.x + source.width, target.x + target.width)
+
+  candidates.add(minLeft - ROUTE_PADDING)
+  candidates.add(maxRight + ROUTE_PADDING)
+
+  if (source.x + source.width + ROUTE_PADDING <= target.x)
+    candidates.add((source.x + source.width + target.x) / 2)
+  if (target.x + target.width + ROUTE_PADDING <= source.x)
+    candidates.add((target.x + target.width + source.x) / 2)
+
+  const columns = [...new Set(rects.map(r => r.x))].sort((a, b) => a - b)
+  for (let i = 0; i < columns.length - 1; i++) {
+    const gap = columns[i + 1] - (columns[i] + NODE_WIDTH)
+    if (gap >= ROUTE_PADDING)
+      candidates.add((columns[i] + NODE_WIDTH + columns[i + 1]) / 2)
+  }
+
+  return [...candidates].sort((a, b) => {
+    const sa = routeSideX(source, a)
+    const ta = routeSideX(target, a)
+    const sb = routeSideX(source, b)
+    const tb = routeSideX(target, b)
+    return Math.abs(a - sa) + Math.abs(a - ta) - (Math.abs(b - sb) + Math.abs(b - tb))
+  })
+}
+
+export function computeRelationshipPath(
+  sourceTable: string,
+  targetTable: string,
+  rectMap: Map<string, TableRect>,
+): string {
+  const source = rectMap.get(sourceTable)
+  const target = rectMap.get(targetTable)
+  if (!source || !target)
+    return ''
+
+  const y1 = source.y + source.height / 2
+  const y2 = target.y + target.height / 2
+  const ignored = new Set([source.name, target.name])
+  const rects = [...rectMap.values()]
+  const candidates = candidateRouteXs(source, target, rects)
+
+  const routeX = candidates.find((c) => {
+    const x1 = routeSideX(source, c)
+    const x2 = routeSideX(target, c)
+    return (
+      !isVerticalRouteBlocked(c, y1, y2, ignored, rects)
+      && !isHorizontalRouteBlocked(y1, x1, c, ignored, rects)
+      && !isHorizontalRouteBlocked(y2, c, x2, ignored, rects)
+    )
+  })
+  ?? candidates[0]
+  ?? Math.max(source.x + source.width, target.x + target.width) + ROUTE_PADDING
+
+  const x1 = routeSideX(source, routeX, 2)
+  const x2 = routeSideX(target, routeX, 2)
+  return `M ${x1} ${y1} L ${routeX} ${y1} L ${routeX} ${y2} L ${x2} ${y2}`
+}
+
+export function buildTableRectMap(
+  tableNames: string[],
+  nodePositions: Map<string, { x: number, y: number }>,
+  getHeight: (name: string) => number,
+): Map<string, TableRect> {
+  const map = new Map<string, TableRect>()
+  for (const name of tableNames) {
+    const pos = nodePositions.get(name)
+    if (!pos)
+      continue
+    const h = getHeight(name)
+    map.set(name, {
+      name,
+      x: pos.x - NODE_WIDTH / 2,
+      y: pos.y - h / 2,
+      width: NODE_WIDTH,
+      height: h,
+    })
+  }
+  return map
+}
diff --git a/src/components/er-diagram/types.ts b/src/components/er-diagram/types.ts
new file mode 100644
index 0000000..6f3f91c
--- /dev/null
+++ b/src/components/er-diagram/types.ts
@@ -0,0 +1,59 @@
+import type { ForeignKeyInfo } from '@/datasources/erDiagramApi'
+import type { ColumnInfo } from '@/types/connection'
+
+export type TableInfo = {
+  name: string
+  schema?: string
+  table_type?: string
+}
+
+export type TableData = {
+  name: string
+  schema?: string
+  columns: ColumnInfo[]
+  foreignKeys: ForeignKeyInfo[]
+}
+
+export type RenderNode = {
+  id: string
+  x: number
+  y: number
+  width: number
+  height: number
+  table: TableData
+  isHighlighted: boolean
+  visibleColumns: ColumnInfo[]
+  showExpandButton: boolean
+  isExpanded: boolean
+}
+
+export type RenderEdge = {
+  from: string
+  to: string
+  label: string
+  path: string
+  isHighlighted: boolean
+}
+
+export type TableRect = {
+  name: string
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+// Layout constants
+export const NODE_WIDTH = 220
+export const COL_HEIGHT = 28
+export const HEADER_HEIGHT = 36
+export const EXPAND_BTN_HEIGHT = 30
+export const CARD_PADDING = 8
+export const ROUTE_PADDING = 56
+export const ROUTE_BLOCK_MARGIN = 18
+
+export function calcNodeHeight(columnsCount: number, hasMore: boolean, isExpanded: boolean): number {
+  const colCount = isExpanded ? columnsCount : Math.min(5, columnsCount)
+  const expandBtn = hasMore ? EXPAND_BTN_HEIGHT : 0
+  return HEADER_HEIGHT + colCount * COL_HEIGHT + expandBtn + CARD_PADDING
+}
diff --git a/src/lang/enUS.ts b/src/lang/enUS.ts
index 024b3d5..bd599ed 100644
--- a/src/lang/enUS.ts
+++ b/src/lang/enUS.ts
@@ -1117,18 +1117,23 @@ export const enUS = {
       },
       erDiagram: {
         title: 'ER Diagram',
+        viewMode: 'View',
         zoom: '{percentage}%',
         zoomIn: 'Zoom In',
         zoomOut: 'Zoom Out',
         allSchemas: 'All Schemas',
+        engineeringView: 'Engineering View',
         fitToScreen: 'Fit to Screen',
         searchPlaceholder: 'Filter tables...',
         tablesCountBadge: '{count} tables',
+        tableView: 'Table View',
         relationshipsCountBadge: '{count} relationships',
+        resetLayout: 'Reset Layout',
         largeSchemaWarning: 'This schema has {count} tables. Displaying all may be dense. Continue?',
         showAllColumns: 'Show All Columns ({count})',
         hideExtraColumns: 'Show Less',
         noForeignKeys: 'No foreign key relationships found',
+        openTable: 'Open Table Data',
         layoutDirection: 'Layout',
         layoutTopBottom: 'Top → Bottom',
         layoutLeftRight: 'Left → Right',
diff --git a/src/lang/zhCN.ts b/src/lang/zhCN.ts
index c030693..741333e 100644
--- a/src/lang/zhCN.ts
+++ b/src/lang/zhCN.ts
@@ -1117,18 +1117,23 @@ export const zhCN = {
       },
       erDiagram: {
         title: 'ER图表',
+        viewMode: '视图',
         zoom: '{percentage}%',
         zoomIn: '放大',
         zoomOut: '缩小',
         allSchemas: '所有模式',
+        engineeringView: '工程视图',
         fitToScreen: '适应屏幕',
         searchPlaceholder: '过滤表...',
         tablesCountBadge: '{count} 张表',
+        tableView: '表格视图',
         relationshipsCountBadge: '{count} 个关系',
+        resetLayout: '重置布局',
         largeSchemaWarning: '此模式包含 {count} 张表，显示全部可能会过于密集，是否继续？',
         showAllColumns: '显示所有列 ({count})',
         hideExtraColumns: '显示更少',
         noForeignKeys: '未找到外键关系',
+        openTable: '打开表数据',
         layoutDirection: '布局方向',
         layoutTopBottom: '从上到下',
         layoutLeftRight: '从左到右',
diff --git a/src/pages/QueriesPage.vue b/src/pages/QueriesPage.vue
index fba5d31..ded58c4 100644
--- a/src/pages/QueriesPage.vue
+++ b/src/pages/QueriesPage.vue
@@ -430,6 +430,14 @@ function handleShowErDiagram(database: string, schema?: string) {
     tabStore.openErDiagramTab(connId, database, schema)
 }
 
+function handleOpenTableFromErDiagram(tableName: string) {
+  const connId = getActiveConnectionId()
+  const tab = activeTab.value
+  if (!connId || !tab?.erDiagram)
+    return
+  tabStore.openTableViewTab(connId, tab.erDiagram.database, tableName, tab.erDiagram.schema)
+}
+
 function handleDropTable(table: TableInfo, database: string, schema?: string) {
   destructiveAction.value = { type: 'drop', table, database, schema }
   destructiveDialogOpen.value = true
@@ -1034,6 +1042,7 @@ function closeResultPanel() {
             :database="activeTab.erDiagram.database"
             :schema="activeTab.erDiagram.schema"
             class="flex-1"
+            @open-table="handleOpenTableFromErDiagram"
           />
 
           <!-- Listing Tab (Views / Procedures / Functions) -->
@@ -1055,18 +1064,18 @@ function closeResultPanel() {
           <!-- Query editor area (shown for normal query tabs) -->
           <template v-else>
             <!-- Toolbar (DBX-style: compact h-9, colored icons, no constant bg) -->
-            <div class="h-9 shrink-0 border-b border-border bg-background/80 px-2 flex items-center gap-0.5 text-xs text-muted-foreground">
+            <div class="text-xs text-muted-foreground px-2 border-b border-border bg-background/80 flex shrink-0 gap-0.5 h-9 items-center">
               <TooltipProvider>
                 <Tooltip>
                   <TooltipTrigger as-child>
                     <Button
                       variant="ghost"
                       size="icon"
-                      class="h-7 w-7 text-emerald-600 hover:bg-emerald-500/10 dark:text-emerald-400 dark:hover:bg-emerald-500/20 disabled:opacity-40"
+                      class="text-emerald-600 h-7 w-7 dark:text-emerald-400 hover:bg-emerald-500/10 disabled:opacity-40 dark:hover:bg-emerald-500/20"
                       :disabled="!activeTab || activeTab.orphanFromConnectionId"
                       @click="executeQuery"
                     >
-                      <span class="i-lucide-play h-3.5 w-3.5 shrink-0" />
+                      <span class="i-lucide-play shrink-0 h-3.5 w-3.5" />
                     </Button>
                   </TooltipTrigger>
                   <TooltipContent>
@@ -1081,12 +1090,12 @@ function closeResultPanel() {
                     <Button
                       variant="ghost"
                       size="icon"
-                      class="h-7 w-7 text-violet-600 hover:bg-violet-500/10 dark:text-violet-400 dark:hover:bg-violet-500/20 disabled:opacity-40"
+                      class="text-violet-600 h-7 w-7 dark:text-violet-400 hover:bg-violet-500/10 disabled:opacity-40 dark:hover:bg-violet-500/20"
                       :class="{ '!text-emerald-600 !bg-emerald-500/10 !dark:bg-emerald-500/20': explainAnalyzeMode }"
                       :disabled="!activeTab || activeTab.orphanFromConnectionId || activeTab.isExplaining"
                       @click="handleExplainQuery(explainAnalyzeMode)"
                     >
-                      <span class="i-lucide-line-chart h-3.5 w-3.5 shrink-0" />
+                      <span class="i-lucide-line-chart shrink-0 h-3.5 w-3.5" />
                     </Button>
                   </TooltipTrigger>
                   <TooltipContent>
@@ -1100,12 +1109,12 @@ function closeResultPanel() {
                     <Button
                       variant="ghost"
                       size="icon"
-                      class="h-7 w-7 text-muted-foreground hover:text-violet-600 hover:bg-violet-500/10 dark:hover:text-violet-400 dark:hover:bg-violet-500/20 disabled:opacity-40"
+                      class="text-muted-foreground h-7 w-7 hover:text-violet-600 hover:bg-violet-500/10 disabled:opacity-40 dark:hover:text-violet-400 dark:hover:bg-violet-500/20"
                       :class="explainAnalyzeMode ? '!text-violet-600 !bg-violet-100 dark:!text-violet-300 dark:!bg-violet-900/30' : ''"
                       :disabled="!activeTab || activeTab.orphanFromConnectionId || activeTab.isExplaining"
                       @click="toggleExplainMode"
                     >
-                      <span class="i-lucide-activity h-3.5 w-3.5 shrink-0" />
+                      <span class="i-lucide-activity shrink-0 h-3.5 w-3.5" />
                     </Button>
                   </TooltipTrigger>
                   <TooltipContent>
@@ -1114,7 +1123,7 @@ function closeResultPanel() {
                 </Tooltip>
               </TooltipProvider>
 
-              <div class="w-px h-4 bg-border mx-0.5" />
+              <div class="mx-0.5 bg-border h-4 w-px" />
 
               <TooltipProvider>
                 <Tooltip>
@@ -1122,11 +1131,11 @@ function closeResultPanel() {
                     <Button
                       variant="ghost"
                       size="icon"
-                      class="h-7 w-7 text-amber-600 hover:bg-amber-500/10 dark:text-amber-400 dark:hover:bg-amber-500/20 disabled:opacity-40"
+                      class="text-amber-600 h-7 w-7 dark:text-amber-400 hover:bg-amber-500/10 disabled:opacity-40 dark:hover:bg-amber-500/20"
                       :disabled="!activeTab || activeTab.orphanFromConnectionId"
                       @click="handleToolbarFormat"
                     >
-                      <span class="i-lucide-align-left h-3.5 w-3.5 shrink-0" />
+                      <span class="i-lucide-align-left shrink-0 h-3.5 w-3.5" />
                     </Button>
                   </TooltipTrigger>
                   <TooltipContent>
@@ -1144,11 +1153,11 @@ function closeResultPanel() {
                     <Button
                       variant="ghost"
                       size="icon"
-                      class="h-7 w-7 text-sky-600 hover:bg-sky-500/10 dark:text-sky-400 dark:hover:bg-sky-500/20 disabled:opacity-40"
+                      class="text-sky-600 h-7 w-7 dark:text-sky-400 hover:bg-sky-500/10 disabled:opacity-40 dark:hover:bg-sky-500/20"
                       :disabled="!activeTab || !activeTab.content.trim()"
                       @click="handleDownloadQuery"
                     >
-                      <span class="i-lucide-download h-3.5 w-3.5 shrink-0" />
+                      <span class="i-lucide-download shrink-0 h-3.5 w-3.5" />
                     </Button>
                   </TooltipTrigger>
                   <TooltipContent>

From d7bb12ab17fbafb77571998cb4218ee5ec2c81cf Mon Sep 17 00:00:00 2001
From: blankll <zilisheng1996@gmail.com>
Date: Thu, 23 Jul 2026 01:20:01 +0800
Subject: [PATCH 15/26] fix(er-diagram): right-click drag to pan canvas

Add right-click drag panning: hold right button on blank canvas area and drag to scroll the viewport. Prevents browser context menu during drag.

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 src/components/er-diagram/ErDiagramView.vue | 47 +++++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/src/components/er-diagram/ErDiagramView.vue b/src/components/er-diagram/ErDiagramView.vue
index 53ba4e9..c748bae 100644
--- a/src/components/er-diagram/ErDiagramView.vue
+++ b/src/components/er-diagram/ErDiagramView.vue
@@ -95,6 +95,49 @@ const dragStartPos = ref({ x: 0, y: 0 })
 const dragNodeStart = ref({ x: 0, y: 0 })
 const dragDelta = ref({ x: 0, y: 0 })
 
+// ─── Right-drag to pan ──────────────────────────
+const isRightDragging = ref(false)
+const rightDragStart = ref({ mouseX: 0, mouseY: 0, scrollLeft: 0, scrollTop: 0 })
+
+function onViewportMouseDown(e: MouseEvent) {
+  if (e.button !== 2)
+    return
+  e.preventDefault()
+  const vp = viewportRef.value
+  if (!vp)
+    return
+  isRightDragging.value = true
+  rightDragStart.value = {
+    mouseX: e.clientX,
+    mouseY: e.clientY,
+    scrollLeft: vp.scrollLeft,
+    scrollTop: vp.scrollTop,
+  }
+  document.addEventListener('mousemove', onViewportMouseMove)
+  document.addEventListener('mouseup', onViewportMouseUp)
+}
+
+function onViewportMouseMove(e: MouseEvent) {
+  if (!isRightDragging.value)
+    return
+  const vp = viewportRef.value
+  if (!vp)
+    return
+  const { mouseX, mouseY, scrollLeft, scrollTop } = rightDragStart.value
+  vp.scrollLeft = scrollLeft - (e.clientX - mouseX)
+  vp.scrollTop = scrollTop - (e.clientY - mouseY)
+}
+
+function onViewportMouseUp() {
+  isRightDragging.value = false
+  document.removeEventListener('mousemove', onViewportMouseMove)
+  document.removeEventListener('mouseup', onViewportMouseUp)
+}
+
+function onContextMenu(e: MouseEvent) {
+  e.preventDefault() // prevent browser context menu during right-drag
+}
+
 // ─── Schema selector ──────────────────────────────
 const databaseStore = useDatabaseStore()
 const availableSchemas = ref<string[]>([])
@@ -502,6 +545,8 @@ onMounted(async () => {
 onUnmounted(() => {
   document.removeEventListener('mousemove', onHeaderMouseMove)
   document.removeEventListener('mouseup', onHeaderMouseUp)
+  document.removeEventListener('mousemove', onViewportMouseMove)
+  document.removeEventListener('mouseup', onViewportMouseUp)
 })
 </script>
 
@@ -633,6 +678,8 @@ onUnmounted(() => {
       @wheel.prevent="onWheel"
       @gesturestart="onGestureStart"
       @gesturechange="onGestureChange"
+      @mousedown="onViewportMouseDown"
+      @contextmenu="onContextMenu"
       @click.self="deselectAll"
     >
       <!-- Loading -->

From 3942e2eae0a6b24373f21cd81f84aa392fd189c4 Mon Sep 17 00:00:00 2001
From: blankll <zilisheng1996@gmail.com>
Date: Thu, 23 Jul 2026 09:23:02 +0800
Subject: [PATCH 16/26] fix(er-diagram): right-click drag pan with
 template-level events

Move right-drag event handling from document listeners to template handlers on the viewport and content divs, so mousedown/mousemove/mouseup are captured reliably. Also add @mousedown on inner content wrapper for events that don't bubble.

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 src/components/er-diagram/ErDiagramView.vue | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/er-diagram/ErDiagramView.vue b/src/components/er-diagram/ErDiagramView.vue
index c748bae..a9cb930 100644
--- a/src/components/er-diagram/ErDiagramView.vue
+++ b/src/components/er-diagram/ErDiagramView.vue
@@ -113,8 +113,6 @@ function onViewportMouseDown(e: MouseEvent) {
     scrollLeft: vp.scrollLeft,
     scrollTop: vp.scrollTop,
   }
-  document.addEventListener('mousemove', onViewportMouseMove)
-  document.addEventListener('mouseup', onViewportMouseUp)
 }
 
 function onViewportMouseMove(e: MouseEvent) {
@@ -130,8 +128,6 @@ function onViewportMouseMove(e: MouseEvent) {
 
 function onViewportMouseUp() {
   isRightDragging.value = false
-  document.removeEventListener('mousemove', onViewportMouseMove)
-  document.removeEventListener('mouseup', onViewportMouseUp)
 }
 
 function onContextMenu(e: MouseEvent) {
@@ -545,8 +541,6 @@ onMounted(async () => {
 onUnmounted(() => {
   document.removeEventListener('mousemove', onHeaderMouseMove)
   document.removeEventListener('mouseup', onHeaderMouseUp)
-  document.removeEventListener('mousemove', onViewportMouseMove)
-  document.removeEventListener('mouseup', onViewportMouseUp)
 })
 </script>
 
@@ -679,6 +673,9 @@ onUnmounted(() => {
       @gesturestart="onGestureStart"
       @gesturechange="onGestureChange"
       @mousedown="onViewportMouseDown"
+      @mousemove="onViewportMouseMove"
+      @mouseup="onViewportMouseUp"
+      @mouseleave="onViewportMouseUp"
       @contextmenu="onContextMenu"
       @click.self="deselectAll"
     >
@@ -720,6 +717,7 @@ onUnmounted(() => {
           width: `${canvasSize.width * zoomLevel}px`,
           height: `${canvasSize.height * zoomLevel}px`,
         }"
+        @mousedown="onViewportMouseDown"
       >
         <div
           class="origin-top-left left-0 top-0 absolute"
@@ -728,6 +726,7 @@ onUnmounted(() => {
             height: `${canvasSize.height}px`,
             transform: `scale(${zoomLevel})`,
           }"
+          @mousedown="onViewportMouseDown"
           @click.self="deselectAll"
         >
           <!-- SVG overlay for relationship lines -->

From 5ce99993cc58ab71a63a70bc1fd5601760688ed9 Mon Sep 17 00:00:00 2001
From: blankll <zilisheng1996@gmail.com>
Date: Thu, 23 Jul 2026 09:30:48 +0800
Subject: [PATCH 17/26] fix(er-diagram): left-click pan, remove engineering
 view, cursor states
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Left-click drag on blank canvas now pans the viewport (single finger on trackpad). Target detection via .er-table-wrapper class prevents interfering with table card clicks

- Right-click drag also pans (context menu suppressed)

- Remove Engineering view and view mode toggle — table view only

- Cursor changes to grab/grabbing during pan and table drag

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 src/components/er-diagram/ErDiagramView.vue | 69 +++++++--------------
 1 file changed, 21 insertions(+), 48 deletions(-)

diff --git a/src/components/er-diagram/ErDiagramView.vue b/src/components/er-diagram/ErDiagramView.vue
index a9cb930..0bb984a 100644
--- a/src/components/er-diagram/ErDiagramView.vue
+++ b/src/components/er-diagram/ErDiagramView.vue
@@ -23,7 +23,6 @@ import { Spinner } from '@/components/ui/spinner'
 import { getForeignKeys } from '@/datasources/erDiagramApi'
 import { useDatabaseStore } from '@/store/databaseStore'
 
-import EngineeringEntity from './EngineeringEntity.vue'
 import {
   computeBoundingBox,
   computeCanvasSize,
@@ -86,28 +85,32 @@ const showWarning = ref(false)
 const viewportRef = ref<HTMLElement | null>(null)
 const viewportBounds = useElementBounding(viewportRef)
 
-// ─── View mode ───────────────────────────────────
-const viewMode = ref<'table' | 'engineering'>('table')
-
 // ─── Node drag state (delta-offset) ──────────────
 const draggingNodeId = ref<string | null>(null)
 const dragStartPos = ref({ x: 0, y: 0 })
 const dragNodeStart = ref({ x: 0, y: 0 })
 const dragDelta = ref({ x: 0, y: 0 })
 
-// ─── Right-drag to pan ──────────────────────────
-const isRightDragging = ref(false)
-const rightDragStart = ref({ mouseX: 0, mouseY: 0, scrollLeft: 0, scrollTop: 0 })
+// ─── Drag to pan ────────────────────────────────
+const isPanning = ref(false)
+const panStart = ref({ mouseX: 0, mouseY: 0, scrollLeft: 0, scrollTop: 0 })
 
 function onViewportMouseDown(e: MouseEvent) {
-  if (e.button !== 2)
+  // Only left-click (0) or right-click (2) trigger pan
+  if (e.button !== 0 && e.button !== 2)
+    return
+
+  // Don't start pan if clicking on a table card
+  const target = e.target as HTMLElement
+  if (target.closest('.er-table-wrapper'))
     return
+
   e.preventDefault()
   const vp = viewportRef.value
   if (!vp)
     return
-  isRightDragging.value = true
-  rightDragStart.value = {
+  isPanning.value = true
+  panStart.value = {
     mouseX: e.clientX,
     mouseY: e.clientY,
     scrollLeft: vp.scrollLeft,
@@ -116,22 +119,23 @@ function onViewportMouseDown(e: MouseEvent) {
 }
 
 function onViewportMouseMove(e: MouseEvent) {
-  if (!isRightDragging.value)
+  if (!isPanning.value)
     return
   const vp = viewportRef.value
   if (!vp)
     return
-  const { mouseX, mouseY, scrollLeft, scrollTop } = rightDragStart.value
+  const { mouseX, mouseY, scrollLeft, scrollTop } = panStart.value
   vp.scrollLeft = scrollLeft - (e.clientX - mouseX)
   vp.scrollTop = scrollTop - (e.clientY - mouseY)
 }
 
 function onViewportMouseUp() {
-  isRightDragging.value = false
+  isPanning.value = false
 }
 
 function onContextMenu(e: MouseEvent) {
-  e.preventDefault() // prevent browser context menu during right-drag
+  // Prevent browser context menu during right-drag pan
+  e.preventDefault()
 }
 
 // ─── Schema selector ──────────────────────────────
@@ -586,27 +590,6 @@ onUnmounted(() => {
         {{ displayedRelationships.length }}
       </Badge>
 
-      <div class="border rounded-md flex h-7 items-center overflow-hidden">
-        <button
-          class="text-[11px] leading-none px-2 h-full transition-colors"
-          :class="viewMode === 'table' ? 'bg-accent text-accent-foreground' : 'text-muted-foreground hover:text-foreground'"
-          :title="t('components.databaseBrowser.erDiagram.tableView')"
-          @click="viewMode = 'table'"
-        >
-          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1 align-text-bottom inline"><path d="M3 3h18v18H3z" /><path d="M21 9H3" /><path d="M9 21V9" /></svg>
-          {{ t('components.databaseBrowser.erDiagram.tableView') }}
-        </button>
-        <button
-          class="text-[11px] leading-none px-2 border-l h-full transition-colors"
-          :class="viewMode === 'engineering' ? 'bg-accent text-accent-foreground' : 'text-muted-foreground hover:text-foreground'"
-          :title="t('components.databaseBrowser.erDiagram.engineeringView')"
-          @click="viewMode = 'engineering'"
-        >
-          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1 align-text-bottom inline"><circle cx="12" cy="12" r="3" /><circle cx="19" cy="5" r="2" /><circle cx="5" cy="19" r="2" /><line x1="12" y1="12" x2="13.65" y2="5.87" /><line x1="12" y1="12" x2="6.35" y2="17.13" /><line x1="12" y1="12" x2="17" y2="14" /></svg>
-          {{ t('components.databaseBrowser.erDiagram.engineeringView') }}
-        </button>
-      </div>
-
       <div class="flex-1" />
 
       <!-- Reset Layout -->
@@ -669,6 +652,7 @@ onUnmounted(() => {
     <div
       ref="viewportRef"
       class="bg-muted/5 flex-1 relative overflow-auto"
+      :class="{ 'cursor-grab': !isPanning && !draggingNodeId, 'cursor-grabbing': isPanning || !!draggingNodeId }"
       @wheel.prevent="onWheel"
       @gesturestart="onGestureStart"
       @gesturechange="onGestureChange"
@@ -747,10 +731,11 @@ onUnmounted(() => {
             />
           </svg>
 
-          <!-- Table cards / Engineering entities -->
+          <!-- Table cards -->
           <div
             v-for="node in renderNodes"
             :key="node.id"
+            class="er-table-wrapper"
             :style="{
               position: 'absolute',
               left: 0,
@@ -759,18 +744,6 @@ onUnmounted(() => {
             }"
           >
             <TableCard
-              v-if="viewMode === 'table'"
-              :node="node"
-              :is-selected="selectedTableId === node.id"
-              :is-highlighted="node.isHighlighted"
-              :header-dragging="draggingNodeId === node.id"
-              @header-mousedown="onHeaderMousedown($event, node.id)"
-              @card-dblclick="emit('openTable', node.id)"
-              @card-click="selectTable(node.id)"
-              @toggle-expand="toggleExpand(node.id)"
-            />
-            <EngineeringEntity
-              v-else
               :node="node"
               :is-selected="selectedTableId === node.id"
               :is-highlighted="node.isHighlighted"

From f6c9905c7e3e096f317b7a01fbb2ee93617322d2 Mon Sep 17 00:00:00 2001
From: blankll <zilisheng1996@gmail.com>
Date: Thu, 23 Jul 2026 09:31:04 +0800
Subject: [PATCH 18/26] chore: lint auto-fix QueryTabs.vue

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 src/components/database-browser/QueryTabs.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/database-browser/QueryTabs.vue b/src/components/database-browser/QueryTabs.vue
index 7cd85d9..54df92b 100644
--- a/src/components/database-browser/QueryTabs.vue
+++ b/src/components/database-browser/QueryTabs.vue
@@ -105,13 +105,13 @@ const isActiveTab = (tabId: string) => props.activeTabId === tabId
 </script>
 
 <template>
-  <div class="query-tabs flex items-stretch overflow-x-auto border-b border-border">
+  <div class="query-tabs border-b border-border flex items-stretch overflow-x-auto">
     <!-- Tabs -->
     <div class="flex flex-1 min-w-0 items-stretch">
       <div
         v-for="tab in tabs"
         :key="tab.id"
-        class="tab-item group flex items-center gap-1 px-3 cursor-pointer transition-colors select-none text-xs border-r border-border"
+        class="tab-item group text-xs px-3 border-r border-border flex gap-1 cursor-pointer select-none transition-colors items-center"
         :class="{
           'bg-background text-foreground font-medium': isActiveTab(tab.id),
           'bg-muted/30 text-muted-foreground hover:bg-background/50 hover:text-foreground': !isActiveTab(tab.id),
@@ -229,11 +229,11 @@ const isActiveTab = (tabId: string) => props.activeTabId === tabId
 
         <!-- Close button -->
         <button
-          class="rounded flex flex-shrink-0 h-4 w-4 transition-colors items-center justify-center hover:bg-muted-foreground/20 opacity-0 group-hover:opacity-100"
+          class="rounded opacity-0 flex flex-shrink-0 h-4 w-4 transition-colors items-center justify-center hover:bg-muted-foreground/20 group-hover:opacity-100"
           :class="{ 'opacity-100': isActiveTab(tab.id) }"
           @click="handleCloseClick($event, tab)"
         >
-          <span class="i-lucide-x h-3 w-3 shrink-0" />
+          <span class="i-lucide-x shrink-0 h-3 w-3" />
         </button>
       </div>
     </div>
@@ -242,11 +242,11 @@ const isActiveTab = (tabId: string) => props.activeTabId === tabId
     <Button
       variant="ghost"
       size="icon"
-      class="shrink-0 h-7 w-7 text-muted-foreground hover:text-foreground"
+      class="text-muted-foreground shrink-0 h-7 w-7 hover:text-foreground"
       :title="t('components.queryTabs.new')"
       @click="handleNewTab"
     >
-      <span class="i-lucide-plus h-3.5 w-3.5 shrink-0" />
+      <span class="i-lucide-plus shrink-0 h-3.5 w-3.5" />
     </Button>
 
     <!-- Unsaved changes dialog -->

From f03d27d8d0dbb8bd6e835a27fbff635f806b5d62 Mon Sep 17 00:00:00 2001
From: blankll <zilisheng1996@gmail.com>
Date: Thu, 23 Jul 2026 09:32:00 +0800
Subject: [PATCH 19/26] chore: remove engineering view comment from style
 section

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 src/components/er-diagram/ErDiagramView.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/er-diagram/ErDiagramView.vue b/src/components/er-diagram/ErDiagramView.vue
index 0bb984a..cee3896 100644
--- a/src/components/er-diagram/ErDiagramView.vue
+++ b/src/components/er-diagram/ErDiagramView.vue
@@ -762,5 +762,4 @@ onUnmounted(() => {
 
 <style scoped>
 /* Table view styles are in TableCard.vue */
-/* Engineering view styles are in EngineeringEntity.vue */
 </style>

From 4d0568f5efe33948e780372684a61a01f2387213 Mon Sep 17 00:00:00 2001
From: blankll <zilisheng1996@gmail.com>
Date: Thu, 23 Jul 2026 09:33:36 +0800
Subject: [PATCH 20/26] fix(er-diagram): remove right-click pan, restore
 context menu

Left-click-only pan. Right-click now shows browser context menu again.

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 src/components/er-diagram/ErDiagramView.vue | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/components/er-diagram/ErDiagramView.vue b/src/components/er-diagram/ErDiagramView.vue
index cee3896..dcc10ec 100644
--- a/src/components/er-diagram/ErDiagramView.vue
+++ b/src/components/er-diagram/ErDiagramView.vue
@@ -96,8 +96,8 @@ const isPanning = ref(false)
 const panStart = ref({ mouseX: 0, mouseY: 0, scrollLeft: 0, scrollTop: 0 })
 
 function onViewportMouseDown(e: MouseEvent) {
-  // Only left-click (0) or right-click (2) trigger pan
-  if (e.button !== 0 && e.button !== 2)
+  // Only left-click triggers pan
+  if (e.button !== 0)
     return
 
   // Don't start pan if clicking on a table card
@@ -133,11 +133,6 @@ function onViewportMouseUp() {
   isPanning.value = false
 }
 
-function onContextMenu(e: MouseEvent) {
-  // Prevent browser context menu during right-drag pan
-  e.preventDefault()
-}
-
 // ─── Schema selector ──────────────────────────────
 const databaseStore = useDatabaseStore()
 const availableSchemas = ref<string[]>([])
@@ -660,7 +655,6 @@ onUnmounted(() => {
       @mousemove="onViewportMouseMove"
       @mouseup="onViewportMouseUp"
       @mouseleave="onViewportMouseUp"
-      @contextmenu="onContextMenu"
       @click.self="deselectAll"
     >
       <!-- Loading -->

From e8d3a02bc8a5adb40a630f112d759e299b47e37c Mon Sep 17 00:00:00 2001
From: blankll <zilisheng1996@gmail.com>
Date: Thu, 23 Jul 2026 09:39:24 +0800
Subject: [PATCH 21/26] fix(er-diagram): LR bezier routing, subtle selection,
 smoother drag
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- LR layout: use clean center-to-center bezier curves instead of orthogonal routing (which looked wrong horizontally with dangling lines)

- Selection style: simplified to just  — subtle color change, no thick rings or shadows

- Drag smoothness: add  on dragged table wrapper for GPU acceleration

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 src/components/er-diagram/ErDiagramView.vue |  2 ++
 src/components/er-diagram/TableCard.vue     |  2 +-
 src/components/er-diagram/graph-routing.ts  | 12 ++++++++++++
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/er-diagram/ErDiagramView.vue b/src/components/er-diagram/ErDiagramView.vue
index dcc10ec..6a5f269 100644
--- a/src/components/er-diagram/ErDiagramView.vue
+++ b/src/components/er-diagram/ErDiagramView.vue
@@ -282,6 +282,7 @@ const renderEdges = computed<RenderEdge[]>(() => {
       rel.sourceTable,
       rel.targetTable,
       tableRectMap.value,
+      layoutDirection.value,
     )
     return {
       from: rel.sourceTable,
@@ -735,6 +736,7 @@ onUnmounted(() => {
               left: 0,
               top: 0,
               transform: `translate(${node.x + (draggingNodeId === node.id ? dragDelta.x : 0)}px, ${node.y + (draggingNodeId === node.id ? dragDelta.y : 0)}px)`,
+              willChange: draggingNodeId === node.id ? 'transform' : 'auto',
             }"
           >
             <TableCard
diff --git a/src/components/er-diagram/TableCard.vue b/src/components/er-diagram/TableCard.vue
index 4f57768..46c72fc 100644
--- a/src/components/er-diagram/TableCard.vue
+++ b/src/components/er-diagram/TableCard.vue
@@ -80,7 +80,7 @@ function isFKColumn(colName: string): boolean {
   user-select: none;
 }
 .er-table-card--selected {
-  @apply border-primary ring-1 ring-primary shadow-md;
+  @apply border-primary/60;
 }
 .er-table-header {
   @apply bg-muted px-3 py-2 font-semibold text-sm border-b border-border;
diff --git a/src/components/er-diagram/graph-routing.ts b/src/components/er-diagram/graph-routing.ts
index b9f7303..eeae062 100644
--- a/src/components/er-diagram/graph-routing.ts
+++ b/src/components/er-diagram/graph-routing.ts
@@ -80,12 +80,24 @@ export function computeRelationshipPath(
   sourceTable: string,
   targetTable: string,
   rectMap: Map<string, TableRect>,
+  direction: 'TB' | 'LR' = 'TB',
 ): string {
   const source = rectMap.get(sourceTable)
   const target = rectMap.get(targetTable)
   if (!source || !target)
     return ''
 
+  // For LR layout, use simple center-to-center bezier (orthogonal looks wrong horizontally)
+  if (direction === 'LR') {
+    const x1 = source.x + source.width / 2
+    const y1 = source.y + source.height / 2
+    const x2 = target.x + target.width / 2
+    const y2 = target.y + target.height / 2
+    const dx = Math.abs(x2 - x1) * 0.4
+    return `M ${x1} ${y1} C ${x1 + dx} ${y1}, ${x2 - dx} ${y2}, ${x2} ${y2}`
+  }
+
+  // TB layout: orthogonal routing via left/right edges
   const y1 = source.y + source.height / 2
   const y2 = target.y + target.height / 2
   const ignored = new Set([source.name, target.name])

From 290033fcf43a19c3c8be56d5b7e10634e5a9efb8 Mon Sep 17 00:00:00 2001
From: blankll <zilisheng1996@gmail.com>
Date: Thu, 23 Jul 2026 09:48:32 +0800
Subject: [PATCH 22/26] refactor(er-diagram): simplify to single TB layout,
 Record positions, direct drag
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove layout direction toggle — always top-to-bottom dagre layout

- Change positions from Map to Record<string,Position> — simpler reactivity, aligns with reference approach

- Simplify drag: update manualOverrides directly on mousemove (no dragDelta intermediate), add minimum boundary (16px)

- Simplify canvas sizing: direct max-extent calculation instead of bounding-box pipeline

- Remove computeBoundingBox, simplify computeCanvasSize signature

- Remove computeRelationshipPath direction param

- Update all tests for new signatures (443 tests pass)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 src/__tests__/graph-layout.test.ts          | 158 +++++---------------
 src/__tests__/graph-routing.test.ts         |  37 +++--
 src/components/er-diagram/ErDiagramView.vue |  92 ++++--------
 src/components/er-diagram/graph-layout.ts   |  68 +++------
 src/components/er-diagram/graph-routing.ts  |  40 ++---
 5 files changed, 127 insertions(+), 268 deletions(-)

diff --git a/src/__tests__/graph-layout.test.ts b/src/__tests__/graph-layout.test.ts
index 0e70652..4bdb10e 100644
--- a/src/__tests__/graph-layout.test.ts
+++ b/src/__tests__/graph-layout.test.ts
@@ -3,15 +3,13 @@ import type { DagreRel, DagreTable } from '@/components/er-diagram/graph-layout'
  * @jest-environment node
  */
 import {
-  computeBoundingBox,
   computeCanvasSize,
   computeDagreLayout,
-
   fitToScreen,
 } from '@/components/er-diagram/graph-layout'
 
 describe('computeDagreLayout', () => {
-  it('returns Map with both entries and finite coordinates for A→B', () => {
+  it('returns positions for A→B with finite coordinates, B below A', () => {
     const tables: DagreTable[] = [
       { name: 'A', width: 220, height: 100 },
       { name: 'B', width: 220, height: 100 },
@@ -20,157 +18,81 @@ describe('computeDagreLayout', () => {
       { sourceTable: 'A', targetTable: 'B' },
     ]
 
-    const positions = computeDagreLayout(tables, rels, 'TB')
-
-    expect(positions.size).toBe(2)
-    expect(positions.has('A')).toBe(true)
-    expect(positions.has('B')).toBe(true)
-
-    const posA = positions.get('A')!
-    const posB = positions.get('B')!
-
-    expect(Number.isFinite(posA.x)).toBe(true)
-    expect(Number.isFinite(posA.y)).toBe(true)
-    expect(Number.isFinite(posB.x)).toBe(true)
-    expect(Number.isFinite(posB.y)).toBe(true)
-
-    // In TB layout, B (child) should be below A (parent)
-    expect(posB.y).toBeGreaterThan(posA.y)
-  })
-
-  it('supports LR direction with B to the right of A', () => {
-    const tables: DagreTable[] = [
-      { name: 'A', width: 220, height: 100 },
-      { name: 'B', width: 220, height: 100 },
-    ]
-    const rels: DagreRel[] = [
-      { sourceTable: 'A', targetTable: 'B' },
-    ]
-
-    const positions = computeDagreLayout(tables, rels, 'LR')
-
-    expect(positions.size).toBe(2)
-    const posA = positions.get('A')!
-    const posB = positions.get('B')!
-    expect(posB.x).toBeGreaterThan(posA.x)
-  })
-})
-
-describe('computeBoundingBox', () => {
-  it('returns expected min/max for known positions', () => {
-    const positions = new Map([
-      ['A', { x: 110, y: 80 }],
-      ['B', { x: 410, y: 160 }],
-    ])
-    const sizes = new Map([
-      ['A', { width: 220, height: 100 }],
-      ['B', { width: 220, height: 100 }],
-    ])
-
-    const bbox = computeBoundingBox(positions, sizes)
-
-    // A: left=110-110=0, top=80-50=30, right=110+110=220, bottom=80+50=130
-    // B: left=410-110=300, top=160-50=110, right=410+110=520, bottom=160+50=210
-    expect(bbox.minX).toBe(0)
-    expect(bbox.minY).toBe(30)
-    expect(bbox.maxX).toBe(520)
-    expect(bbox.maxY).toBe(210)
-  })
-
-  it('returns zeros for empty inputs', () => {
-    expect(computeBoundingBox(new Map(), new Map())).toEqual({
-      minX: 0,
-      minY: 0,
-      maxX: 0,
-      maxY: 0,
-    })
-  })
-
-  it('skips entries with missing sizes', () => {
-    const positions = new Map([
-      ['A', { x: 100, y: 100 }],
-      ['B', { x: 400, y: 100 }],
-    ])
-    const sizes = new Map([['A', { width: 200, height: 80 }]])
-
-    const bbox = computeBoundingBox(positions, sizes)
+    const positions = computeDagreLayout(tables, rels)
+    const keys = Object.keys(positions)
 
-    // Only A contributes: left=0, top=60, right=200, bottom=140
-    expect(bbox.minX).toBe(0)
-    expect(bbox.minY).toBe(60)
-    expect(bbox.maxX).toBe(200)
-    expect(bbox.maxY).toBe(140)
+    expect(keys).toContain('A')
+    expect(keys).toContain('B')
+    expect(Number.isFinite(positions.A.x)).toBe(true)
+    expect(Number.isFinite(positions.A.y)).toBe(true)
+    expect(Number.isFinite(positions.B.x)).toBe(true)
+    expect(Number.isFinite(positions.B.y)).toBe(true)
+    expect(positions.B.y).toBeGreaterThan(positions.A.y)
   })
 })
 
 describe('computeCanvasSize', () => {
-  it('returns width = maxX-minX + 2*padding, height = maxY-minY + 2*padding', () => {
-    const bbox = { minX: 0, minY: 50, maxX: 500, maxY: 250 }
-    const result = computeCanvasSize(bbox, 40)
-
-    // width = 500-0+80 = 580, but min 800
-    // height = 250-50+80 = 280, but min 600
-    expect(result.width).toBe(800)
-    expect(result.height).toBe(600)
+  it('computes size from table positions with padding', () => {
+    const positions: Record<string, { x: number, y: number }> = {
+      A: { x: 110, y: 80 },
+      B: { x: 410, y: 160 },
+    }
+    const getHeight = (name: string) => name === 'A' ? 100 : 100
+    const result = computeCanvasSize(positions, 220, getHeight, 80)
+
+    // A right edge = 110 + 110 + 80 = 300
+    // B right edge = 410 + 110 + 80 = 600
+    // B bottom edge = 160 + 50 + 80 = 290
+    // min 960 x 540
+    expect(result.width).toBe(960)
+    expect(result.height).toBe(540)
   })
 
-  it('uses computed size when larger than minimum', () => {
-    const bbox = { minX: 0, minY: 0, maxX: 1200, maxY: 900 }
-    const result = computeCanvasSize(bbox, 50)
-
-    expect(result.width).toBe(1200 - 0 + 100) // 1300
-    expect(result.height).toBe(900 - 0 + 100) // 1000
+  it('expands beyond minimum when tables are large', () => {
+    const positions: Record<string, { x: number, y: number }> = {
+      Big: { x: 1000, y: 800 },
+    }
+    const getHeight = () => 200
+    const result = computeCanvasSize(positions, 220, getHeight, 50)
+
+    // right edge = 1000 + 110 + 50 = 1160
+    // bottom edge = 800 + 100 + 50 = 950
+    expect(result.width).toBe(1160)
+    expect(result.height).toBe(950)
   })
 
-  it('enforces minimum width of 800 and height of 600', () => {
-    const bbox = { minX: 100, minY: 100, maxX: 200, maxY: 200 }
-    const result = computeCanvasSize(bbox, 20)
-
-    expect(result.width).toBe(800)
-    expect(result.height).toBe(600)
+  it('defaults to 960x540 for empty positions', () => {
+    const result = computeCanvasSize({}, 220, () => 0, 80)
+    expect(result.width).toBe(960)
+    expect(result.height).toBe(540)
   })
 })
 
 describe('fitToScreen', () => {
   it('zooms in (zoom >= 1) when content is smaller than viewport', () => {
-    // Content 100x100 fits easily in 800x600 viewport → zoom = min(8, 6) = 6, capped to 3
     const result = fitToScreen({ width: 100, height: 100 }, 800, 600)
-
     expect(result.zoom).toBe(3)
     expect(Number.isFinite(result.scrollX)).toBe(true)
     expect(Number.isFinite(result.scrollY)).toBe(true)
   })
 
   it('zooms out (zoom < 1) when content is larger than viewport', () => {
-    // Content 2000x1500 is larger than 800x600 viewport → zoom = min(0.4, 0.4) = 0.4
     const result = fitToScreen({ width: 2000, height: 1500 }, 800, 600)
-
     expect(result.zoom).toBeCloseTo(0.4, 5)
     expect(Number.isFinite(result.scrollX)).toBe(true)
     expect(Number.isFinite(result.scrollY)).toBe(true)
   })
 
   it('centers content in viewport', () => {
-    const bbox = { width: 400, height: 300 }
-    const vw = 1000
-    const vh = 800
-
-    const result = fitToScreen(bbox, vw, vh)
-
-    // zoom = min(1000/400, 800/300) = min(2.5, 2.667) = 2.5
+    const result = fitToScreen({ width: 400, height: 300 }, 1000, 800)
     expect(result.zoom).toBe(2.5)
-    // scrollX = (1000 - 400*2.5)/2 = 0
     expect(result.scrollX).toBe(0)
-    // scrollY = (800 - 300*2.5)/2 = (800-750)/2 = 25
     expect(result.scrollY).toBe(25)
   })
 
   it('caps zoom between 0.1 and 3', () => {
-    // Tiny content in huge viewport — would be zoom 100, capped to 3
     const r1 = fitToScreen({ width: 10, height: 10 }, 10000, 10000)
     expect(r1.zoom).toBe(3)
-
-    // Huge content in tiny viewport — would be zoom 0.01, capped to 0.1
     const r2 = fitToScreen({ width: 100000, height: 100000 }, 100, 100)
     expect(r2.zoom).toBe(0.1)
   })
diff --git a/src/__tests__/graph-routing.test.ts b/src/__tests__/graph-routing.test.ts
index 60eb908..bfcbd2d 100644
--- a/src/__tests__/graph-routing.test.ts
+++ b/src/__tests__/graph-routing.test.ts
@@ -85,28 +85,28 @@ describe('candidateRouteXs', () => {
 
 describe('computeRelationshipPath', () => {
   it('returns empty string when source table is not in rectMap', () => {
-    const rectMap = new Map<string, TableRect>([['B', rectB]])
+    const rectMap: Record<string, TableRect> = { B: rectB }
     expect(computeRelationshipPath('A', 'B', rectMap)).toBe('')
   })
 
   it('returns empty string when target table is not in rectMap', () => {
-    const rectMap = new Map<string, TableRect>([['A', rectA]])
+    const rectMap: Record<string, TableRect> = { A: rectA }
     expect(computeRelationshipPath('A', 'B', rectMap)).toBe('')
   })
 
   it('returns a valid SVG path for two side-by-side rects', () => {
-    const rectMap = new Map<string, TableRect>([['A', rectA], ['B', rectB]])
+    const rectMap: Record<string, TableRect> = { A: rectA, B: rectB }
     const path = computeRelationshipPath('A', 'B', rectMap)
     expect(path).toMatch(/^M /)
     expect(path).toContain(' L ')
   })
 
   it('returns a valid path that avoids a blocker rect between source and target', () => {
-    const rectMap = new Map<string, TableRect>([
-      ['A', rectA],
-      ['B', rectB],
-      ['Blocker', rectBlocker],
-    ])
+    const rectMap: Record<string, TableRect> = {
+      A: rectA,
+      B: rectB,
+      Blocker: rectBlocker,
+    }
     const path = computeRelationshipPath('A', 'B', rectMap)
     expect(path).toMatch(/^M /)
     expect(path).toContain(' L ')
@@ -119,14 +119,17 @@ describe('computeRelationshipPath', () => {
 
 describe('buildTableRectMap', () => {
   it('builds a rect map from table names and positions', () => {
-    const nodePositions = new Map([
-      ['A', { x: 110, y: 50 }],
-      ['B', { x: 410, y: 50 }],
-    ])
+    const nodePositions: Record<string, { x: number, y: number }> = {
+      A: { x: 110, y: 50 },
+      B: { x: 410, y: 50 },
+    }
     const getHeight = (_name: string) => 100
     const rectMap = buildTableRectMap(['A', 'B'], nodePositions, getHeight)
-    expect(rectMap.size).toBe(2)
-    const rectA = rectMap.get('A')!
+    const keys = Object.keys(rectMap)
+    expect(keys).toHaveLength(2)
+    expect(keys).toContain('A')
+    expect(keys).toContain('B')
+    const rectA = rectMap.A
     expect(rectA.x).toBe(0) // 110 - 220/2
     expect(rectA.y).toBe(0) // 50 - 100/2
     expect(rectA.width).toBe(220)
@@ -134,9 +137,11 @@ describe('buildTableRectMap', () => {
   })
 
   it('skips tables not found in nodePositions', () => {
-    const nodePositions = new Map([['A', { x: 110, y: 50 }]])
+    const nodePositions: Record<string, { x: number, y: number }> = {
+      A: { x: 110, y: 50 },
+    }
     const getHeight = (_name: string) => 100
     const rectMap = buildTableRectMap(['A', 'B'], nodePositions, getHeight)
-    expect(rectMap.size).toBe(1)
+    expect(Object.keys(rectMap)).toHaveLength(1)
   })
 })
diff --git a/src/components/er-diagram/ErDiagramView.vue b/src/components/er-diagram/ErDiagramView.vue
index 6a5f269..e979e65 100644
--- a/src/components/er-diagram/ErDiagramView.vue
+++ b/src/components/er-diagram/ErDiagramView.vue
@@ -24,7 +24,6 @@ import { getForeignKeys } from '@/datasources/erDiagramApi'
 import { useDatabaseStore } from '@/store/databaseStore'
 
 import {
-  computeBoundingBox,
   computeCanvasSize,
   computeDagreLayout,
   fitToScreen as fitBboxToScreen,
@@ -66,13 +65,12 @@ const CANVAS_PADDING = 80
 // ─── State ────────────────────────────────────────────
 const tables = ref<TableData[]>([])
 const foreignKeys = ref<ForeignKeyInfo[]>([])
-const dagrePositions = ref<Map<string, { x: number, y: number }>>(new Map())
-const manualOverrides = ref<Map<string, { x: number, y: number }>>(new Map())
+const dagrePositions = ref<Record<string, { x: number, y: number }>>({})
+const manualOverrides = ref<Record<string, { x: number, y: number }>>({})
 
 const selectedTableId = ref<string | null>(null)
 const searchQuery = ref('')
 const expandedTables = ref<Set<string>>(new Set())
-const layoutDirection = ref<'TB' | 'LR'>('TB')
 
 const zoomLevel = ref(1)
 const gestureStartZoom = ref(1)
@@ -85,11 +83,10 @@ const showWarning = ref(false)
 const viewportRef = ref<HTMLElement | null>(null)
 const viewportBounds = useElementBounding(viewportRef)
 
-// ─── Node drag state (delta-offset) ──────────────
+// ─── Node drag state ─────────────────────────────
 const draggingNodeId = ref<string | null>(null)
 const dragStartPos = ref({ x: 0, y: 0 })
 const dragNodeStart = ref({ x: 0, y: 0 })
-const dragDelta = ref({ x: 0, y: 0 })
 
 // ─── Drag to pan ────────────────────────────────
 const isPanning = ref(false)
@@ -158,13 +155,10 @@ const allRelationships = computed(() =>
 )
 
 // ─── Combined positions (dagre + manual) ─────────
-const nodePositions = computed(() => {
-  const merged = new Map(dagrePositions.value)
-  for (const [name, pos] of manualOverrides.value) {
-    merged.set(name, pos)
-  }
-  return merged
-})
+const nodePositions = computed(() => ({
+  ...dagrePositions.value,
+  ...manualOverrides.value,
+}))
 
 // ─── Focus mode ───────────────────────────────────
 const focusMode = computed(() => selectedTableId.value !== null)
@@ -216,7 +210,7 @@ const highlightedTables = computed(() => {
 // ─── Render nodes ─────────────────────────────────
 const renderNodes = computed<RenderNode[]>(() => {
   return displayedTables.value.map((table) => {
-    const pos = nodePositions.value.get(table.name)
+    const pos = nodePositions.value[table.name]
     if (!pos)
       return null
 
@@ -244,24 +238,21 @@ const renderNodes = computed<RenderNode[]>(() => {
 
 // ─── Canvas size ──────────────────────────────────
 const nodeHeights = computed(() => {
-  const map = new Map<string, number>()
-  for (const node of renderNodes.value) {
-    map.set(node.id, node.height)
-  }
+  const map: Record<string, number> = {}
+  for (const node of renderNodes.value)
+    map[node.id] = node.height
   return map
 })
 
 const canvasSize = computed(() => {
-  if (nodePositions.value.size === 0)
+  const positions = nodePositions.value
+  if (Object.keys(positions).length === 0)
     return { width: 800, height: 600 }
 
-  const sizes = new Map<string, { width: number, height: number }>()
-  for (const node of renderNodes.value) {
-    sizes.set(node.id, { width: NODE_WIDTH, height: node.height })
-  }
-
-  const bbox = computeBoundingBox(nodePositions.value, sizes)
-  return computeCanvasSize(bbox, CANVAS_PADDING)
+  return computeCanvasSize(positions, NODE_WIDTH, (name) => {
+    const h = nodeHeights.value[name]
+    return h ?? HEADER_HEIGHT + 8
+  }, CANVAS_PADDING)
 })
 
 // ─── Render edges (orthogonal routing) ────────────
@@ -270,7 +261,7 @@ const tableRectMap = computed(() => {
     displayedTables.value.map(t => t.name),
     nodePositions.value,
     (name) => {
-      const h = nodeHeights.value.get(name)
+      const h = nodeHeights.value[name]
       return h ?? HEADER_HEIGHT + CARD_PADDING
     },
   )
@@ -282,7 +273,6 @@ const renderEdges = computed<RenderEdge[]>(() => {
       rel.sourceTable,
       rel.targetTable,
       tableRectMap.value,
-      layoutDirection.value,
     )
     return {
       from: rel.sourceTable,
@@ -300,8 +290,8 @@ const renderEdges = computed<RenderEdge[]>(() => {
 // ─── Layout Computation ───────────────────────────────
 function computeLayout() {
   if (displayedTables.value.length === 0) {
-    dagrePositions.value = new Map()
-    manualOverrides.value = new Map()
+    dagrePositions.value = {}
+    manualOverrides.value = {}
     return
   }
 
@@ -317,9 +307,8 @@ function computeLayout() {
     targetTable: rel.targetTable,
   }))
 
-  const positions = computeDagreLayout(dagreTables, dagreRels, layoutDirection.value)
-  dagrePositions.value = positions
-  manualOverrides.value = new Map()
+  dagrePositions.value = computeDagreLayout(dagreTables, dagreRels)
+  manualOverrides.value = {}
 }
 
 // ─── Data Fetching ────────────────────────────────────
@@ -400,7 +389,7 @@ async function fetchSchemaData() {
 
 // ─── Watchers ─────────────────────────────────────────
 watch(
-  [displayedTables, layoutDirection, expandedTables],
+  [displayedTables, expandedTables],
   () => {
     computeLayout()
   },
@@ -430,22 +419,16 @@ function toggleExpand(tableName: string) {
   expandedTables.value = next
 }
 
-function toggleLayout() {
-  layoutDirection.value
-    = layoutDirection.value === 'TB' ? 'LR' : 'TB'
-}
-
 // ─── Header-only drag handlers ───────────────────
 function onHeaderMousedown(e: MouseEvent, nodeId: string) {
   if (e.button !== 0)
     return
-  const pos = nodePositions.value.get(nodeId)
+  const pos = nodePositions.value[nodeId]
   if (!pos)
     return
   draggingNodeId.value = nodeId
   dragStartPos.value = { x: e.clientX, y: e.clientY }
   dragNodeStart.value = { x: pos.x, y: pos.y }
-  dragDelta.value = { x: 0, y: 0 }
   document.addEventListener('mousemove', onHeaderMouseMove)
   document.addEventListener('mouseup', onHeaderMouseUp)
 }
@@ -453,22 +436,19 @@ function onHeaderMousedown(e: MouseEvent, nodeId: string) {
 function onHeaderMouseMove(e: MouseEvent) {
   if (!draggingNodeId.value)
     return
-  dragDelta.value = {
-    x: (e.clientX - dragStartPos.value.x) / zoomLevel.value,
-    y: (e.clientY - dragStartPos.value.y) / zoomLevel.value,
+  const dx = (e.clientX - dragStartPos.value.x) / zoomLevel.value
+  const dy = (e.clientY - dragStartPos.value.y) / zoomLevel.value
+  manualOverrides.value = {
+    ...manualOverrides.value,
+    [draggingNodeId.value]: {
+      x: Math.max(16, dragNodeStart.value.x + dx),
+      y: Math.max(16, dragNodeStart.value.y + dy),
+    },
   }
 }
 
 function onHeaderMouseUp() {
-  if (draggingNodeId.value) {
-    const finalX = dragNodeStart.value.x + dragDelta.value.x
-    const finalY = dragNodeStart.value.y + dragDelta.value.y
-    const overrides = new Map(manualOverrides.value)
-    overrides.set(draggingNodeId.value, { x: finalX, y: finalY })
-    manualOverrides.value = overrides
-  }
   draggingNodeId.value = null
-  dragDelta.value = { x: 0, y: 0 }
   document.removeEventListener('mousemove', onHeaderMouseMove)
   document.removeEventListener('mouseup', onHeaderMouseUp)
 }
@@ -597,12 +577,6 @@ onUnmounted(() => {
         <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10" /><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10" /></svg>
       </Button>
 
-      <!-- Layout direction toggle -->
-      <Button variant="ghost" size="sm" class="text-xs gap-1 h-7" :title="t('components.databaseBrowser.erDiagram.layoutDirection')" @click="toggleLayout">
-        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" /><rect x="14" y="3" width="7" height="7" /><rect x="14" y="14" width="7" height="7" /><rect x="3" y="14" width="7" height="7" /></svg>
-        {{ layoutDirection === 'TB' ? t('components.databaseBrowser.erDiagram.layoutLeftRight') : t('components.databaseBrowser.erDiagram.layoutTopBottom') }}
-      </Button>
-
       <!-- Fit to screen -->
       <Button variant="ghost" size="icon" class="h-7 w-7" :title="t('components.databaseBrowser.erDiagram.fitToScreen')" @click="fitToScreen">
         <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3" /><path d="M21 8V5a2 2 0 0 0-2-2h-3" /><path d="M16 21h3a2 2 0 0 0 2-2v-3" /><path d="M3 16v3a2 2 0 0 0 2 2h3" /></svg>
@@ -735,7 +709,7 @@ onUnmounted(() => {
               position: 'absolute',
               left: 0,
               top: 0,
-              transform: `translate(${node.x + (draggingNodeId === node.id ? dragDelta.x : 0)}px, ${node.y + (draggingNodeId === node.id ? dragDelta.y : 0)}px)`,
+              transform: `translate(${node.x}px, ${node.y}px)`,
               willChange: draggingNodeId === node.id ? 'transform' : 'auto',
             }"
           >
diff --git a/src/components/er-diagram/graph-layout.ts b/src/components/er-diagram/graph-layout.ts
index fc5c285..ca2e226 100644
--- a/src/components/er-diagram/graph-layout.ts
+++ b/src/components/er-diagram/graph-layout.ts
@@ -14,11 +14,10 @@ export type DagreRel = {
 export function computeDagreLayout(
   tables: DagreTable[],
   relationships: DagreRel[],
-  direction: 'TB' | 'LR',
-): Map<string, { x: number, y: number }> {
+): Record<string, { x: number, y: number }> {
   const g = new dagre.graphlib.Graph()
   g.setGraph({
-    rankdir: direction,
+    rankdir: 'TB',
     nodesep: 80,
     ranksep: 120,
     marginx: 40,
@@ -34,71 +33,42 @@ export function computeDagreLayout(
 
   dagre.layout(g)
 
-  const positions = new Map<string, { x: number, y: number }>()
+  const positions: Record<string, { x: number, y: number }> = {}
   g.nodes().forEach((nodeName: string) => {
     const node = g.node(nodeName) as { x: number, y: number }
-    positions.set(nodeName, { x: node.x, y: node.y })
+    positions[nodeName] = { x: node.x, y: node.y }
   })
 
   return positions
 }
 
-export function computeBoundingBox(
-  positions: Map<string, { x: number, y: number }>,
-  sizes: Map<string, { width: number, height: number }>,
-): { minX: number, minY: number, maxX: number, maxY: number } {
-  let minX = Infinity
-  let minY = Infinity
-  let maxX = -Infinity
-  let maxY = -Infinity
-
-  for (const [name, pos] of positions) {
-    const size = sizes.get(name)
-    if (!size)
-      continue
-
-    const left = pos.x - size.width / 2
-    const right = pos.x + size.width / 2
-    const top = pos.y - size.height / 2
-    const bottom = pos.y + size.height / 2
-
-    if (left < minX)
-      minX = left
-    if (top < minY)
-      minY = top
-    if (right > maxX)
-      maxX = right
-    if (bottom > maxY)
-      maxY = bottom
-  }
-
-  if (minX === Infinity)
-    return { minX: 0, minY: 0, maxX: 0, maxY: 0 }
-
-  return { minX, minY, maxX, maxY }
-}
-
 export function computeCanvasSize(
-  bbox: { minX: number, minY: number, maxX: number, maxY: number },
+  positions: Record<string, { x: number, y: number }>,
+  nodeWidth: number,
+  getHeight: (name: string) => number,
   padding: number,
 ): { width: number, height: number } {
-  return {
-    width: Math.max(800, bbox.maxX - bbox.minX + 2 * padding),
-    height: Math.max(600, bbox.maxY - bbox.minY + 2 * padding),
+  let width = 960
+  let height = 540
+  for (const [name, pos] of Object.entries(positions)) {
+    const h = getHeight(name)
+    width = Math.max(width, pos.x + nodeWidth / 2 + padding)
+    height = Math.max(height, pos.y + h / 2 + padding)
   }
+  return { width, height }
 }
 
 export function fitToScreen(
-  bbox: { width: number, height: number },
+  canvasSize: { width: number, height: number },
   viewportWidth: number,
   viewportHeight: number,
 ): { zoom: number, scrollX: number, scrollY: number } {
   const rawZoom = Math.min(
-    viewportWidth / bbox.width,
-    viewportHeight / bbox.height,
+    viewportWidth / canvasSize.width,
+    viewportHeight / canvasSize.height,
   )
   const zoom = Math.max(0.1, Math.min(3, rawZoom))
-  const scrollX = (viewportWidth - bbox.width * zoom) / 2
-  const scrollY = (viewportHeight - bbox.height * zoom) / 2
+  const scrollX = (viewportWidth - canvasSize.width * zoom) / 2
+  const scrollY = (viewportHeight - canvasSize.height * zoom) / 2
   return { zoom, scrollX, scrollY }
 }
diff --git a/src/components/er-diagram/graph-routing.ts b/src/components/er-diagram/graph-routing.ts
index eeae062..d9dff40 100644
--- a/src/components/er-diagram/graph-routing.ts
+++ b/src/components/er-diagram/graph-routing.ts
@@ -79,38 +79,26 @@ export function candidateRouteXs(source: TableRect, target: TableRect, rects: Ta
 export function computeRelationshipPath(
   sourceTable: string,
   targetTable: string,
-  rectMap: Map<string, TableRect>,
-  direction: 'TB' | 'LR' = 'TB',
+  rects: Record<string, TableRect>,
 ): string {
-  const source = rectMap.get(sourceTable)
-  const target = rectMap.get(targetTable)
+  const source = rects[sourceTable]
+  const target = rects[targetTable]
   if (!source || !target)
     return ''
 
-  // For LR layout, use simple center-to-center bezier (orthogonal looks wrong horizontally)
-  if (direction === 'LR') {
-    const x1 = source.x + source.width / 2
-    const y1 = source.y + source.height / 2
-    const x2 = target.x + target.width / 2
-    const y2 = target.y + target.height / 2
-    const dx = Math.abs(x2 - x1) * 0.4
-    return `M ${x1} ${y1} C ${x1 + dx} ${y1}, ${x2 - dx} ${y2}, ${x2} ${y2}`
-  }
-
-  // TB layout: orthogonal routing via left/right edges
   const y1 = source.y + source.height / 2
   const y2 = target.y + target.height / 2
   const ignored = new Set([source.name, target.name])
-  const rects = [...rectMap.values()]
-  const candidates = candidateRouteXs(source, target, rects)
+  const allRects = Object.values(rects)
+  const candidates = candidateRouteXs(source, target, allRects)
 
   const routeX = candidates.find((c) => {
     const x1 = routeSideX(source, c)
     const x2 = routeSideX(target, c)
     return (
-      !isVerticalRouteBlocked(c, y1, y2, ignored, rects)
-      && !isHorizontalRouteBlocked(y1, x1, c, ignored, rects)
-      && !isHorizontalRouteBlocked(y2, c, x2, ignored, rects)
+      !isVerticalRouteBlocked(c, y1, y2, ignored, allRects)
+      && !isHorizontalRouteBlocked(y1, x1, c, ignored, allRects)
+      && !isHorizontalRouteBlocked(y2, c, x2, ignored, allRects)
     )
   })
   ?? candidates[0]
@@ -123,22 +111,22 @@ export function computeRelationshipPath(
 
 export function buildTableRectMap(
   tableNames: string[],
-  nodePositions: Map<string, { x: number, y: number }>,
+  nodePositions: Record<string, { x: number, y: number }>,
   getHeight: (name: string) => number,
-): Map<string, TableRect> {
-  const map = new Map<string, TableRect>()
+): Record<string, TableRect> {
+  const map: Record<string, TableRect> = {}
   for (const name of tableNames) {
-    const pos = nodePositions.get(name)
+    const pos = nodePositions[name]
     if (!pos)
       continue
     const h = getHeight(name)
-    map.set(name, {
+    map[name] = {
       name,
       x: pos.x - NODE_WIDTH / 2,
       y: pos.y - h / 2,
       width: NODE_WIDTH,
       height: h,
-    })
+    }
   }
   return map
 }

From 44c803ff25c990fd33c81f986bca2299113cd76f Mon Sep 17 00:00:00 2001
From: blankll <zilisheng1996@gmail.com>
Date: Thu, 23 Jul 2026 09:59:57 +0800
Subject: [PATCH 23/26] fix(er-diagram): prevent manualOverrides reset on
 layout recompute
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove manualOverrides reset from computeLayout — dagre layout no longer clears user-dragged positions

- Move manualOverrides reset to resetLayout only (explicit button)

- Change watcher to only watch expandedTables, not displayedTables (search/focus changes no longer trigger layout recompute)

Fixes: drag position reverting on blank click, canvas shifting during drag

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 src/components/er-diagram/ErDiagramView.vue | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/components/er-diagram/ErDiagramView.vue b/src/components/er-diagram/ErDiagramView.vue
index e979e65..204a1fd 100644
--- a/src/components/er-diagram/ErDiagramView.vue
+++ b/src/components/er-diagram/ErDiagramView.vue
@@ -287,11 +287,10 @@ const renderEdges = computed<RenderEdge[]>(() => {
   })
 })
 
-// ─── Layout Computation ───────────────────────────────
+// ─── Layout Computation (dagre only, does NOT touch manualOverrides) ─
 function computeLayout() {
   if (displayedTables.value.length === 0) {
     dagrePositions.value = {}
-    manualOverrides.value = {}
     return
   }
 
@@ -308,7 +307,6 @@ function computeLayout() {
   }))
 
   dagrePositions.value = computeDagreLayout(dagreTables, dagreRels)
-  manualOverrides.value = {}
 }
 
 // ─── Data Fetching ────────────────────────────────────
@@ -388,13 +386,10 @@ async function fetchSchemaData() {
 }
 
 // ─── Watchers ─────────────────────────────────────────
-watch(
-  [displayedTables, expandedTables],
-  () => {
-    computeLayout()
-  },
-  { immediate: false },
-)
+// Only recompute layout when column visibility (expand) changes — NOT on search/focus (displayedTables)
+watch(expandedTables, () => {
+  computeLayout()
+})
 
 watch(localSchema, () => {
   fetchSchemaData()
@@ -503,6 +498,7 @@ function fitToScreen() {
 }
 
 function resetLayout() {
+  manualOverrides.value = {}
   computeLayout()
   fitToScreen()
 }

From ba1547b1434025a10b108a2c43203d5d2b406a34 Mon Sep 17 00:00:00 2001
From: blankll <zilisheng1996@gmail.com>
Date: Thu, 23 Jul 2026 10:09:06 +0800
Subject: [PATCH 24/26] fix(er-diagram): replace orthogonal routing with
 center-to-center bezier

Orthogonal routing produced dangling line segments when candidate routeX fell outside table boundaries. Bezier curves between table centers are simpler, always clean, and eliminate 'headless line' artifacts.

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 src/__tests__/graph-routing.test.ts        | 14 ++++---------
 src/components/er-diagram/graph-routing.ts | 24 +++++-----------------
 2 files changed, 9 insertions(+), 29 deletions(-)

diff --git a/src/__tests__/graph-routing.test.ts b/src/__tests__/graph-routing.test.ts
index bfcbd2d..50b8298 100644
--- a/src/__tests__/graph-routing.test.ts
+++ b/src/__tests__/graph-routing.test.ts
@@ -94,26 +94,20 @@ describe('computeRelationshipPath', () => {
     expect(computeRelationshipPath('A', 'B', rectMap)).toBe('')
   })
 
-  it('returns a valid SVG path for two side-by-side rects', () => {
+  it('returns a cubic bezier SVG path for two side-by-side rects', () => {
     const rectMap: Record<string, TableRect> = { A: rectA, B: rectB }
     const path = computeRelationshipPath('A', 'B', rectMap)
-    expect(path).toMatch(/^M /)
-    expect(path).toContain(' L ')
+    expect(path).toMatch(/^M \d.+C \d/)
   })
 
-  it('returns a valid path that avoids a blocker rect between source and target', () => {
+  it('returns a bezier path even with a blocker between source and target', () => {
     const rectMap: Record<string, TableRect> = {
       A: rectA,
       B: rectB,
       Blocker: rectBlocker,
     }
     const path = computeRelationshipPath('A', 'B', rectMap)
-    expect(path).toMatch(/^M /)
-    expect(path).toContain(' L ')
-    // Path should use a routeX that's not through the blocker
-    // Verify it has exactly 3 L segments (orthogonal route: right, down, left)
-    const segments = path.split(' L ')
-    expect(segments.length).toBe(4) // M start + 3 L segments
+    expect(path).toMatch(/^M \d.+C \d/)
   })
 })
 
diff --git a/src/components/er-diagram/graph-routing.ts b/src/components/er-diagram/graph-routing.ts
index d9dff40..9920cc9 100644
--- a/src/components/er-diagram/graph-routing.ts
+++ b/src/components/er-diagram/graph-routing.ts
@@ -86,27 +86,13 @@ export function computeRelationshipPath(
   if (!source || !target)
     return ''
 
+  // Simple center-to-center cubic bezier — no orthogonal routing edge cases
+  const x1 = source.x + source.width / 2
   const y1 = source.y + source.height / 2
+  const x2 = target.x + target.width / 2
   const y2 = target.y + target.height / 2
-  const ignored = new Set([source.name, target.name])
-  const allRects = Object.values(rects)
-  const candidates = candidateRouteXs(source, target, allRects)
-
-  const routeX = candidates.find((c) => {
-    const x1 = routeSideX(source, c)
-    const x2 = routeSideX(target, c)
-    return (
-      !isVerticalRouteBlocked(c, y1, y2, ignored, allRects)
-      && !isHorizontalRouteBlocked(y1, x1, c, ignored, allRects)
-      && !isHorizontalRouteBlocked(y2, c, x2, ignored, allRects)
-    )
-  })
-  ?? candidates[0]
-  ?? Math.max(source.x + source.width, target.x + target.width) + ROUTE_PADDING
-
-  const x1 = routeSideX(source, routeX, 2)
-  const x2 = routeSideX(target, routeX, 2)
-  return `M ${x1} ${y1} L ${routeX} ${y1} L ${routeX} ${y2} L ${x2} ${y2}`
+  const dx = Math.abs(x2 - x1) * 0.4
+  return `M ${x1} ${y1} C ${x1} ${y1 + dx}, ${x2} ${y2 - dx}, ${x2} ${y2}`
 }
 
 export function buildTableRectMap(

From c6cf601d635f058ac4531c7b4155cced301b3e2f Mon Sep 17 00:00:00 2001
From: blankll <zilisheng1996@gmail.com>
Date: Thu, 23 Jul 2026 14:28:52 +0800
Subject: [PATCH 25/26] fix(er-diagram): restore rightward orthogonal routing,
 remove focus-mode hiding

- Orthogonal routing: remove left-edge candidate (minLeft - ROUTE_PADDING), always route rightward between or past tables. No more dangling leftward segments or lines through tables

- Focus mode removed: clicking a table only highlights (color/opacity), never hides unrelated tables. No more tables disappearing on click

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 src/__tests__/graph-routing.test.ts         | 14 +++++------
 src/components/er-diagram/ErDiagramView.vue | 24 ++++---------------
 src/components/er-diagram/graph-routing.ts  | 26 +++++++++++++++------
 3 files changed, 31 insertions(+), 33 deletions(-)

diff --git a/src/__tests__/graph-routing.test.ts b/src/__tests__/graph-routing.test.ts
index 50b8298..3cdc8a5 100644
--- a/src/__tests__/graph-routing.test.ts
+++ b/src/__tests__/graph-routing.test.ts
@@ -74,10 +74,8 @@ describe('candidateRouteXs', () => {
     expect(candidates).toContain(260)
   })
 
-  it('includes left and right edge padding candidates', () => {
+  it('includes the right edge padding candidate', () => {
     const candidates = candidateRouteXs(rectA, rectB, [rectA, rectB])
-    // minLeft is 0, so 0 - 56 = -56
-    expect(candidates).toContain(-56)
     // maxRight is 300 + 220 = 520, so 520 + 56 = 576
     expect(candidates).toContain(576)
   })
@@ -94,20 +92,22 @@ describe('computeRelationshipPath', () => {
     expect(computeRelationshipPath('A', 'B', rectMap)).toBe('')
   })
 
-  it('returns a cubic bezier SVG path for two side-by-side rects', () => {
+  it('returns an orthogonal SVG path for two side-by-side rects', () => {
     const rectMap: Record<string, TableRect> = { A: rectA, B: rectB }
     const path = computeRelationshipPath('A', 'B', rectMap)
-    expect(path).toMatch(/^M \d.+C \d/)
+    expect(path).toMatch(/^M /)
+    expect(path).toContain(' L ')
   })
 
-  it('returns a bezier path even with a blocker between source and target', () => {
+  it('returns an orthogonal path even with a blocker between source and target', () => {
     const rectMap: Record<string, TableRect> = {
       A: rectA,
       B: rectB,
       Blocker: rectBlocker,
     }
     const path = computeRelationshipPath('A', 'B', rectMap)
-    expect(path).toMatch(/^M \d.+C \d/)
+    expect(path).toMatch(/^M /)
+    expect(path).toContain(' L ')
   })
 })
 
diff --git a/src/components/er-diagram/ErDiagramView.vue b/src/components/er-diagram/ErDiagramView.vue
index 204a1fd..7cdf50e 100644
--- a/src/components/er-diagram/ErDiagramView.vue
+++ b/src/components/er-diagram/ErDiagramView.vue
@@ -160,26 +160,12 @@ const nodePositions = computed(() => ({
   ...manualOverrides.value,
 }))
 
-// ─── Focus mode ───────────────────────────────────
-const focusMode = computed(() => selectedTableId.value !== null)
-
+// ─── Display (search filter only, no focus mode hiding) ─
 const displayedTables = computed(() => {
-  let result = tables.value
-  if (searchQuery.value.trim()) {
-    const q = searchQuery.value.toLowerCase()
-    result = result.filter(t => t.name.toLowerCase().includes(q))
-  }
-  if (focusMode.value && selectedTableId.value) {
-    const related = new Set<string>([selectedTableId.value])
-    for (const rel of allRelationships.value) {
-      if (rel.sourceTable === selectedTableId.value)
-        related.add(rel.targetTable)
-      if (rel.targetTable === selectedTableId.value)
-        related.add(rel.sourceTable)
-    }
-    result = result.filter(t => related.has(t.name))
-  }
-  return result
+  if (!searchQuery.value.trim())
+    return tables.value
+  const q = searchQuery.value.toLowerCase()
+  return tables.value.filter(t => t.name.toLowerCase().includes(q))
 })
 
 const displayedTableNames = computed(
diff --git a/src/components/er-diagram/graph-routing.ts b/src/components/er-diagram/graph-routing.ts
index 9920cc9..7f09eb8 100644
--- a/src/components/er-diagram/graph-routing.ts
+++ b/src/components/er-diagram/graph-routing.ts
@@ -49,10 +49,8 @@ export function isHorizontalRouteBlocked(
 
 export function candidateRouteXs(source: TableRect, target: TableRect, rects: TableRect[]): number[] {
   const candidates = new Set<number>()
-  const minLeft = Math.min(source.x, target.x)
   const maxRight = Math.max(source.x + source.width, target.x + target.width)
 
-  candidates.add(minLeft - ROUTE_PADDING)
   candidates.add(maxRight + ROUTE_PADDING)
 
   if (source.x + source.width + ROUTE_PADDING <= target.x)
@@ -86,13 +84,27 @@ export function computeRelationshipPath(
   if (!source || !target)
     return ''
 
-  // Simple center-to-center cubic bezier — no orthogonal routing edge cases
-  const x1 = source.x + source.width / 2
   const y1 = source.y + source.height / 2
-  const x2 = target.x + target.width / 2
   const y2 = target.y + target.height / 2
-  const dx = Math.abs(x2 - x1) * 0.4
-  return `M ${x1} ${y1} C ${x1} ${y1 + dx}, ${x2} ${y2 - dx}, ${x2} ${y2}`
+  const ignored = new Set([source.name, target.name])
+  const allRects = Object.values(rects)
+  const candidates = candidateRouteXs(source, target, allRects)
+
+  // Pick the closest candidate that isn't blocked; fallback to rightmost + padding
+  const defaultRoute = Math.max(source.x + source.width, target.x + target.width) + ROUTE_PADDING
+  const routeX = candidates.find(c => {
+    const x1 = routeSideX(source, c)
+    const x2 = routeSideX(target, c)
+    return (
+      !isVerticalRouteBlocked(c, y1, y2, ignored, allRects)
+      && !isHorizontalRouteBlocked(y1, x1, c, ignored, allRects)
+      && !isHorizontalRouteBlocked(y2, c, x2, ignored, allRects)
+    )
+  }) ?? defaultRoute
+
+  const x1 = routeSideX(source, routeX, 2)
+  const x2 = routeSideX(target, routeX, 2)
+  return `M ${x1} ${y1} L ${routeX} ${y1} L ${routeX} ${y2} L ${x2} ${y2}`
 }
 
 export function buildTableRectMap(

From 4da220bd3fb77a6ef4cca046b38999c7c65fbcaf Mon Sep 17 00:00:00 2001
From: blankll <zilisheng1996@gmail.com>
Date: Thu, 23 Jul 2026 14:31:27 +0800
Subject: [PATCH 26/26] fix: lint

---
 src/components/er-diagram/graph-routing.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/er-diagram/graph-routing.ts b/src/components/er-diagram/graph-routing.ts
index 7f09eb8..876d8b3 100644
--- a/src/components/er-diagram/graph-routing.ts
+++ b/src/components/er-diagram/graph-routing.ts
@@ -92,7 +92,7 @@ export function computeRelationshipPath(
 
   // Pick the closest candidate that isn't blocked; fallback to rightmost + padding
   const defaultRoute = Math.max(source.x + source.width, target.x + target.width) + ROUTE_PADDING
-  const routeX = candidates.find(c => {
+  const routeX = candidates.find((c) => {
     const x1 = routeSideX(source, c)
     const x2 = routeSideX(target, c)
     return (