From e5c16560e695495bab6a89619f33db2775b57f3d Mon Sep 17 00:00:00 2001
From: Tomoya Kashifuku <tnyo43@gmail.com>
Date: Thu, 9 Oct 2025 20:21:05 +0900
Subject: [PATCH 01/13] =?UTF-8?q?=F0=9F=A7=AA=20activate=20table=20mode=20?=
 =?UTF-8?q?for=20implementation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CommandPaletteContent/CommandPaletteContent.tsx              | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.tsx b/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.tsx
index 7808c05445..66fa7e1ce6 100644
--- a/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.tsx
+++ b/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.tsx
@@ -45,6 +45,7 @@ export const CommandPaletteContent: FC = () => {
           suggestion={suggestion}
           setMode={setInputMode}
           onBlur={(event) => event.target.focus()}
+          isTableModeActivatable
         />
         <DialogClose asChild>
           <Button

From 21e22727d5b39be5c3e1dcc6571fb239169c0ffe Mon Sep 17 00:00:00 2001
From: Tomoya Kashifuku <tnyo43@gmail.com>
Date: Thu, 9 Oct 2025 20:28:17 +0900
Subject: [PATCH 02/13] =?UTF-8?q?=E2=9C=A8=20add=20TableColumnOptions=20ba?=
 =?UTF-8?q?se=20copied=20from=20TableOptions=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CommandPaletteContent.tsx                 |  7 +++
 .../TableColumnOptions.tsx                    | 59 +++++++++++++++++++
 2 files changed, 66 insertions(+)
 create mode 100644 frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteOptions/TableColumnOptions.tsx

diff --git a/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.tsx b/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.tsx
index 66fa7e1ce6..d8d05ebe43 100644
--- a/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.tsx
+++ b/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.tsx
@@ -6,6 +6,7 @@ import {
   CommandPaletteCommandOptions,
   TableOptions,
 } from '../CommandPaletteOptions'
+import { TableColumnOptions } from '../CommandPaletteOptions/TableColumnOptions'
 import { CommandPreview, TablePreview } from '../CommandPalettePreview'
 import { CommandPaletteSearchInput } from '../CommandPaletteSearchInput'
 import type { CommandPaletteInputMode } from '../types'
@@ -63,6 +64,12 @@ export const CommandPaletteContent: FC = () => {
           {inputMode.type === 'default' && (
             <TableOptions suggestion={suggestion} />
           )}
+          {inputMode.type === 'table' && (
+            <TableColumnOptions
+              tableName={inputMode.tableName}
+              suggestion={suggestion}
+            />
+          )}
           {(inputMode.type === 'default' || inputMode.type === 'command') && (
             <CommandPaletteCommandOptions />
           )}
diff --git a/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteOptions/TableColumnOptions.tsx b/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteOptions/TableColumnOptions.tsx
new file mode 100644
index 0000000000..76660212e7
--- /dev/null
+++ b/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteOptions/TableColumnOptions.tsx
@@ -0,0 +1,59 @@
+import { Table2 } from '@liam-hq/ui'
+import { Command } from 'cmdk'
+import { type FC, useCallback } from 'react'
+import { getTableLinkHref } from '../../../../../../features'
+import { useSchemaOrThrow } from '../../../../../../stores'
+import { useTableSelection } from '../../../../hooks'
+import { useCommandPaletteOrThrow } from '../CommandPaletteProvider'
+import type { CommandPaletteSuggestion } from '../types'
+import { getSuggestionText } from '../utils'
+import styles from './CommandPaletteOptions.module.css'
+
+type Props = {
+  tableName: string
+  suggestion: CommandPaletteSuggestion | null
+}
+
+export const TableColumnOptions: FC<Props> = ({ tableName }) => {
+  const schema = useSchemaOrThrow()
+  const { selectTable } = useTableSelection()
+  const { setOpen } = useCommandPaletteOrThrow()
+
+  const goToERD = useCallback(
+    (tableName: string) => {
+      selectTable({ tableId: tableName, displayArea: 'main' })
+      setOpen(false)
+    },
+    [setOpen, selectTable],
+  )
+
+  const table = schema.current.tables[tableName]
+  if (!table) {
+    return null
+  }
+
+  return (
+    <Command.Group heading="Tables">
+      <Command.Item
+        value={getSuggestionText({ type: 'table', name: table.name })}
+      >
+        <a
+          className={styles.item}
+          href={getTableLinkHref(table.name)}
+          onClick={(event) => {
+            // Do not call preventDefault to allow the default link behavior when ⌘ key is pressed
+            if (event.ctrlKey || event.metaKey) {
+              return
+            }
+
+            event.preventDefault()
+            goToERD(table.name)
+          }}
+        >
+          <Table2 className={styles.itemIcon} />
+          <span className={styles.itemText}>{table.name}</span>
+        </a>
+      </Command.Item>
+    </Command.Group>
+  )
+}

From cbea656cc638b6968658de74acedb5bebcd5a8bc Mon Sep 17 00:00:00 2001
From: Tomoya Kashifuku <tnyo43@gmail.com>
Date: Thu, 9 Oct 2025 20:33:23 +0900
Subject: [PATCH 03/13] =?UTF-8?q?=E2=9C=A8=20add=20new=20option=20type:=20?=
 =?UTF-8?q?'column'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../features/erd/components/ERDRenderer/CommandPalette/types.ts  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/types.ts b/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/types.ts
index 430f87f135..1f3cd8a87e 100644
--- a/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/types.ts
+++ b/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/types.ts
@@ -6,3 +6,4 @@ export type CommandPaletteInputMode =
 export type CommandPaletteSuggestion =
   | { type: 'table'; name: string }
   | { type: 'command'; name: string }
+  | { type: 'column'; tableName: string; columnName: string }

From af601ee709358410c7cb8bbf9ce52b1afea4d4bd Mon Sep 17 00:00:00 2001
From: Tomoya Kashifuku <tnyo43@gmail.com>
Date: Thu, 9 Oct 2025 20:35:11 +0900
Subject: [PATCH 04/13] =?UTF-8?q?=E2=9C=A8=20update=20suggestion=20convert?=
 =?UTF-8?q?=20functions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CommandPalette/utils/suggestion.test.ts   | 33 +++++++++++++++++++
 .../CommandPalette/utils/suggestion.ts        | 24 ++++++++++----
 2 files changed, 51 insertions(+), 6 deletions(-)

diff --git a/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/utils/suggestion.test.ts b/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/utils/suggestion.test.ts
index 0c985c45dc..44c76a5f9a 100644
--- a/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/utils/suggestion.test.ts
+++ b/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/utils/suggestion.test.ts
@@ -24,6 +24,18 @@ describe('getSuggestionText', () => {
 
     expect(result).toBe('command|show tables')
   })
+
+  it('should return "column|users|id" when suggestion is "id" column in "users" table', () => {
+    const suggestion: CommandPaletteSuggestion = {
+      type: 'column',
+      tableName: 'users',
+      columnName: 'id',
+    }
+
+    const result = getSuggestionText(suggestion)
+
+    expect(result).toBe('column|users|id')
+  })
 })
 
 describe('textToSuggestion', () => {
@@ -43,6 +55,18 @@ describe('textToSuggestion', () => {
     expect(result).toEqual({ type: 'command', name: 'hide tables' })
   })
 
+  it('should return the "id" column in "users" table suggestion when suggestion text is "column|posts|created_at"', () => {
+    const suggestionText = 'column|posts|created_at'
+
+    const result = textToSuggestion(suggestionText)
+
+    expect(result).toEqual({
+      type: 'column',
+      tableName: 'posts',
+      columnName: 'created_at',
+    })
+  })
+
   describe('with unexpected formats', () => {
     it('should return null when an unknown suggested type is given', () => {
       const suggestionText = 'fruits|lemon'
@@ -59,6 +83,14 @@ describe('textToSuggestion', () => {
 
       expect(result).toBeNull()
     })
+
+    it('should return null when a column name is empty', () => {
+      const suggestionText = 'column|users|'
+
+      const result = textToSuggestion(suggestionText)
+
+      expect(result).toBeNull()
+    })
   })
 })
 
@@ -67,6 +99,7 @@ describe('integration test, (value) => textToSuggestion(getSuggestionText(value)
     it.each<CommandPaletteSuggestion>([
       { type: 'table', name: 'user_posts' },
       { type: 'command', name: 'export as CSV' },
+      { type: 'column', tableName: 'users', columnName: 'email' },
     ])('in case: %p', (suggestion) => {
       const result = textToSuggestion(getSuggestionText(suggestion))
 
diff --git a/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/utils/suggestion.ts b/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/utils/suggestion.ts
index 2c6f736387..c95d12b837 100644
--- a/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/utils/suggestion.ts
+++ b/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/utils/suggestion.ts
@@ -2,19 +2,31 @@ import type { CommandPaletteSuggestion } from '../types'
 
 const SEPARATOR = '|'
 
-export const getSuggestionText = (suggestion: CommandPaletteSuggestion) =>
-  `${suggestion.type}${SEPARATOR}${suggestion.name}`
+export const getSuggestionText = (suggestion: CommandPaletteSuggestion) => {
+  if (suggestion.type === 'column') {
+    return `${suggestion.type}${SEPARATOR}${suggestion.tableName}${SEPARATOR}${suggestion.columnName}`
+  }
+
+  return `${suggestion.type}${SEPARATOR}${suggestion.name}`
+}
 
 export const textToSuggestion = (
   text: string,
 ): CommandPaletteSuggestion | null => {
   const words = text.split(SEPARATOR)
 
-  const [suggestionType, name] = words
-  if (!suggestionType || !name) return null
+  const [suggestionType, name1, name2] = words
+  if (!suggestionType) return null
+
+  if (suggestionType === 'table' || suggestionType === 'command') {
+    if (!name1) return null
+    return { type: suggestionType, name: name1 }
+  }
 
-  if (suggestionType === 'table' || suggestionType === 'command')
-    return { type: suggestionType, name }
+  if (suggestionType === 'column') {
+    if (!name1 || !name2) return null
+    return { type: 'column', tableName: name1, columnName: name2 }
+  }
 
   return null
 }

From 8d6579f4def790405f211abba0a3109b34289f92 Mon Sep 17 00:00:00 2001
From: Tomoya Kashifuku <tnyo43@gmail.com>
Date: Thu, 9 Oct 2025 21:02:24 +0900
Subject: [PATCH 05/13] =?UTF-8?q?=E2=9C=A8=20add=20function=20to=20build?=
 =?UTF-8?q?=20href=20for=20column=20option?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../utils/url/getTableColumnLinkHref.test.ts  | 22 +++++++++++++++++++
 .../erd/utils/url/getTableColumnLinkHref.ts   | 12 ++++++++++
 .../src/features/erd/utils/url/index.ts       |  1 +
 3 files changed, 35 insertions(+)
 create mode 100644 frontend/packages/erd-core/src/features/erd/utils/url/getTableColumnLinkHref.test.ts
 create mode 100644 frontend/packages/erd-core/src/features/erd/utils/url/getTableColumnLinkHref.ts

diff --git a/frontend/packages/erd-core/src/features/erd/utils/url/getTableColumnLinkHref.test.ts b/frontend/packages/erd-core/src/features/erd/utils/url/getTableColumnLinkHref.test.ts
new file mode 100644
index 0000000000..2d8146bd81
--- /dev/null
+++ b/frontend/packages/erd-core/src/features/erd/utils/url/getTableColumnLinkHref.test.ts
@@ -0,0 +1,22 @@
+import { describe, expect, it } from 'vitest'
+import { getTableColumnLinkHref } from './getTableColumnLinkHref'
+
+it('should return the "active" query parameter and hash consistent with the table and column names', () => {
+  window.location.search = ''
+  window.location.hash = ''
+
+  expect(getTableColumnLinkHref('users', 'created_at')).toBe(
+    '?active=users#users__columns__created_at',
+  )
+})
+
+describe('when other query parameters and hash are present', () => {
+  it('should preserve existing query parameters and hash', () => {
+    window.location.search = '?page=2&sort=asc'
+    window.location.hash = '#other_hash'
+
+    expect(getTableColumnLinkHref('users', 'created_at')).toBe(
+      '?page=2&sort=asc&active=users#users__columns__created_at',
+    )
+  })
+})
diff --git a/frontend/packages/erd-core/src/features/erd/utils/url/getTableColumnLinkHref.ts b/frontend/packages/erd-core/src/features/erd/utils/url/getTableColumnLinkHref.ts
new file mode 100644
index 0000000000..be1e6deca9
--- /dev/null
+++ b/frontend/packages/erd-core/src/features/erd/utils/url/getTableColumnLinkHref.ts
@@ -0,0 +1,12 @@
+import type { QueryParam } from '../../../../schemas'
+import { getTableColumnElementId } from './getTableColumnElementId'
+
+export const getTableColumnLinkHref = (
+  activeTableName: string,
+  columnName: string,
+) => {
+  const searchParams = new URLSearchParams(window.location.search)
+  searchParams.set('active' satisfies QueryParam, activeTableName)
+  const targetElementId = getTableColumnElementId(activeTableName, columnName)
+  return `?${searchParams.toString()}#${targetElementId}`
+}
diff --git a/frontend/packages/erd-core/src/features/erd/utils/url/index.ts b/frontend/packages/erd-core/src/features/erd/utils/url/index.ts
index 115b7b1924..8a2a6905c8 100644
--- a/frontend/packages/erd-core/src/features/erd/utils/url/index.ts
+++ b/frontend/packages/erd-core/src/features/erd/utils/url/index.ts
@@ -1,2 +1,3 @@
 export * from './getTableColumnElementId'
+export * from './getTableColumnLinkHref'
 export * from './getTableLinkHref'

From 0e401bd7f82defc4fd69ccb722ce12c307c87fb5 Mon Sep 17 00:00:00 2001
From: Tomoya Kashifuku <tnyo43@gmail.com>
Date: Thu, 9 Oct 2025 21:14:16 +0900
Subject: [PATCH 06/13] =?UTF-8?q?=E2=9C=A8=20add=20column=20options?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CommandPaletteOptions.module.css          | 15 +++++++
 .../TableColumnOptions.tsx                    | 39 ++++++++++++++++++-
 2 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteOptions/CommandPaletteOptions.module.css b/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteOptions/CommandPaletteOptions.module.css
index 1e803848fe..0a0ebb0584 100644
--- a/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteOptions/CommandPaletteOptions.module.css
+++ b/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteOptions/CommandPaletteOptions.module.css
@@ -6,6 +6,21 @@
   border-radius: var(--border-radius-base);
 }
 
+.item.indent {
+  padding-left: var(--spacing-6);
+  position: relative;
+}
+
+.item.indent:before {
+  content: '';
+  position: absolute;
+  top: calc(var(--spacing-1) / 2);
+  left: var(--spacing-4);
+  width: 1px;
+  height: calc(100% - var(--spacing-1));
+  background-color: var(--overlay-10);
+}
+
 .item .itemText {
   flex-grow: 1;
   font-size: var(--font-size-5);
diff --git a/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteOptions/TableColumnOptions.tsx b/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteOptions/TableColumnOptions.tsx
index 76660212e7..5505529225 100644
--- a/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteOptions/TableColumnOptions.tsx
+++ b/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteOptions/TableColumnOptions.tsx
@@ -1,7 +1,12 @@
 import { Table2 } from '@liam-hq/ui'
+import clsx from 'clsx'
 import { Command } from 'cmdk'
 import { type FC, useCallback } from 'react'
-import { getTableLinkHref } from '../../../../../../features'
+import {
+  getTableColumnElementId,
+  getTableColumnLinkHref,
+  getTableLinkHref,
+} from '../../../../../../features'
 import { useSchemaOrThrow } from '../../../../../../stores'
 import { useTableSelection } from '../../../../hooks'
 import { useCommandPaletteOrThrow } from '../CommandPaletteProvider'
@@ -20,9 +25,12 @@ export const TableColumnOptions: FC<Props> = ({ tableName }) => {
   const { setOpen } = useCommandPaletteOrThrow()
 
   const goToERD = useCallback(
-    (tableName: string) => {
+    (tableName: string, columnName?: string) => {
       selectTable({ tableId: tableName, displayArea: 'main' })
       setOpen(false)
+      if (columnName) {
+        window.location.hash = getTableColumnElementId(tableName, columnName)
+      }
     },
     [setOpen, selectTable],
   )
@@ -54,6 +62,33 @@ export const TableColumnOptions: FC<Props> = ({ tableName }) => {
           <span className={styles.itemText}>{table.name}</span>
         </a>
       </Command.Item>
+      {Object.values(table.columns).map((column) => (
+        <Command.Item
+          key={column.name}
+          value={getSuggestionText({
+            type: 'column',
+            tableName: table.name,
+            columnName: column.name,
+          })}
+        >
+          <a
+            className={clsx(styles.item, styles.indent)}
+            href={getTableColumnLinkHref(table.name, column.name)}
+            onClick={(event) => {
+              // Do not call preventDefault to allow the default link behavior when ⌘ key is pressed
+              if (event.ctrlKey || event.metaKey) {
+                return
+              }
+
+              event.preventDefault()
+              goToERD(table.name, column.name)
+            }}
+          >
+            <Table2 className={styles.itemIcon} />
+            <span className={styles.itemText}>{column.name}</span>
+          </a>
+        </Command.Item>
+      ))}
     </Command.Group>
   )
 }

From 1e846996b1dc51d45044720ba7b9350795f32835 Mon Sep 17 00:00:00 2001
From: Tomoya Kashifuku <tnyo43@gmail.com>
Date: Thu, 9 Oct 2025 21:23:58 +0900
Subject: [PATCH 07/13] =?UTF-8?q?=E2=9C=A8=20add=20keyboard=20listeners?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TableColumnOptions.tsx                    | 50 ++++++++++++++++++-
 1 file changed, 48 insertions(+), 2 deletions(-)

diff --git a/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteOptions/TableColumnOptions.tsx b/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteOptions/TableColumnOptions.tsx
index 5505529225..a50a5f684f 100644
--- a/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteOptions/TableColumnOptions.tsx
+++ b/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteOptions/TableColumnOptions.tsx
@@ -1,7 +1,7 @@
 import { Table2 } from '@liam-hq/ui'
 import clsx from 'clsx'
 import { Command } from 'cmdk'
-import { type FC, useCallback } from 'react'
+import { type FC, useCallback, useEffect } from 'react'
 import {
   getTableColumnElementId,
   getTableColumnLinkHref,
@@ -19,7 +19,7 @@ type Props = {
   suggestion: CommandPaletteSuggestion | null
 }
 
-export const TableColumnOptions: FC<Props> = ({ tableName }) => {
+export const TableColumnOptions: FC<Props> = ({ tableName, suggestion }) => {
   const schema = useSchemaOrThrow()
   const { selectTable } = useTableSelection()
   const { setOpen } = useCommandPaletteOrThrow()
@@ -35,6 +35,52 @@ export const TableColumnOptions: FC<Props> = ({ tableName }) => {
     [setOpen, selectTable],
   )
 
+  // Select option by pressing [Enter] key (with/without ⌘ key)
+  useEffect(() => {
+    // It doesn't subscribe a keydown event listener if the suggestion type is not "table"
+    if (suggestion?.type !== 'table') return
+
+    const down = (event: KeyboardEvent) => {
+      const suggestedTableName = suggestion.name
+
+      if (event.key === 'Enter') {
+        event.preventDefault()
+
+        if (event.metaKey || event.ctrlKey) {
+          window.open(getTableLinkHref(suggestedTableName))
+        } else {
+          goToERD(suggestedTableName)
+        }
+      }
+    }
+
+    document.addEventListener('keydown', down)
+    return () => document.removeEventListener('keydown', down)
+  }, [suggestion, goToERD])
+
+  // Select option by pressing [Enter] key (with/without ⌘ key)
+  useEffect(() => {
+    // It doesn't subscribe a keydown event listener if the suggestion type is not "column"
+    if (suggestion?.type !== 'column') return
+
+    const down = (event: KeyboardEvent) => {
+      const { tableName, columnName } = suggestion
+
+      if (event.key === 'Enter') {
+        event.preventDefault()
+
+        if (event.metaKey || event.ctrlKey) {
+          window.open(getTableColumnLinkHref(tableName, columnName))
+        } else {
+          goToERD(tableName, columnName)
+        }
+      }
+    }
+
+    document.addEventListener('keydown', down)
+    return () => document.removeEventListener('keydown', down)
+  }, [suggestion, goToERD])
+
   const table = schema.current.tables[tableName]
   if (!table) {
     return null

From d0c3c508d6efa547221d522fa7f9dcc4e4d84cec Mon Sep 17 00:00:00 2001
From: Tomoya Kashifuku <tnyo43@gmail.com>
Date: Thu, 9 Oct 2025 22:23:09 +0900
Subject: [PATCH 08/13] =?UTF-8?q?=E2=9C=A8=20set=20column=20type=20icons?=
 =?UTF-8?q?=20based=20on=20column=20and=20constraints=20information?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TableColumnOptions.tsx                    | 46 +++++++++++++++++--
 .../utils/getColumnTypeMap.ts                 | 29 ++++++++++++
 2 files changed, 72 insertions(+), 3 deletions(-)
 create mode 100644 frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteOptions/utils/getColumnTypeMap.ts

diff --git a/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteOptions/TableColumnOptions.tsx b/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteOptions/TableColumnOptions.tsx
index a50a5f684f..683fb3c037 100644
--- a/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteOptions/TableColumnOptions.tsx
+++ b/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteOptions/TableColumnOptions.tsx
@@ -1,7 +1,19 @@
-import { Table2 } from '@liam-hq/ui'
+import {
+  DiamondFillIcon,
+  DiamondIcon,
+  KeyRound,
+  Link,
+  Table2,
+} from '@liam-hq/ui'
 import clsx from 'clsx'
 import { Command } from 'cmdk'
-import { type FC, useCallback, useEffect } from 'react'
+import {
+  type ComponentProps,
+  type FC,
+  useCallback,
+  useEffect,
+  useMemo,
+} from 'react'
 import {
   getTableColumnElementId,
   getTableColumnLinkHref,
@@ -13,12 +25,29 @@ import { useCommandPaletteOrThrow } from '../CommandPaletteProvider'
 import type { CommandPaletteSuggestion } from '../types'
 import { getSuggestionText } from '../utils'
 import styles from './CommandPaletteOptions.module.css'
+import { type ColumnType, getColumnTypeMap } from './utils/getColumnTypeMap'
 
 type Props = {
   tableName: string
   suggestion: CommandPaletteSuggestion | null
 }
 
+const ColumnIcon: FC<ComponentProps<'svg'> & { columnType: ColumnType }> = ({
+  columnType,
+  ...props
+}) => {
+  switch (columnType) {
+    case 'PRIMARY_KEY':
+      return <KeyRound {...props} />
+    case 'FOREIGN_KEY':
+      return <Link {...props} />
+    case 'NOT_NULL':
+      return <DiamondFillIcon aria-label={undefined} {...props} />
+    case 'NULLABLE':
+      return <DiamondIcon aria-label={undefined} {...props} />
+  }
+}
+
 export const TableColumnOptions: FC<Props> = ({ tableName, suggestion }) => {
   const schema = useSchemaOrThrow()
   const { selectTable } = useTableSelection()
@@ -82,6 +111,11 @@ export const TableColumnOptions: FC<Props> = ({ tableName, suggestion }) => {
   }, [suggestion, goToERD])
 
   const table = schema.current.tables[tableName]
+  const columnTypeMap = useMemo(
+    () => (table ? getColumnTypeMap(table) : {}),
+    [table],
+  )
+
   if (!table) {
     return null
   }
@@ -130,7 +164,13 @@ export const TableColumnOptions: FC<Props> = ({ tableName, suggestion }) => {
               goToERD(table.name, column.name)
             }}
           >
-            <Table2 className={styles.itemIcon} />
+            {columnTypeMap[column.name] && (
+              <ColumnIcon
+                // biome-ignore lint/style/noNonNullAssertion: it checks the column type exists above
+                columnType={columnTypeMap[column.name]!}
+                className={styles.itemIcon}
+              />
+            )}
             <span className={styles.itemText}>{column.name}</span>
           </a>
         </Command.Item>
diff --git a/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteOptions/utils/getColumnTypeMap.ts b/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteOptions/utils/getColumnTypeMap.ts
new file mode 100644
index 0000000000..7c18506a5f
--- /dev/null
+++ b/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteOptions/utils/getColumnTypeMap.ts
@@ -0,0 +1,29 @@
+import { isPrimaryKey, type Table } from '@liam-hq/schema'
+
+export type ColumnType = 'PRIMARY_KEY' | 'FOREIGN_KEY' | 'NOT_NULL' | 'NULLABLE'
+
+const isForeignKey = (columnName: string, table: Table): boolean => {
+  for (const constraint of Object.values(table.constraints)) {
+    if (constraint.type !== 'FOREIGN KEY') continue
+
+    if (constraint.columnNames.includes(columnName)) return true
+  }
+
+  return false
+}
+
+export const getColumnTypeMap = (table: Table) => {
+  const result: Record<string, ColumnType> = {}
+
+  Object.values(table.columns).forEach((column) => {
+    result[column.name] = isPrimaryKey(column.name, table.constraints)
+      ? 'PRIMARY_KEY'
+      : isForeignKey(column.name, table)
+        ? 'FOREIGN_KEY'
+        : column.notNull
+          ? 'NOT_NULL'
+          : 'NULLABLE'
+  })
+
+  return result
+}

From 6a85cff1487387ae015a2ba6eb11f0cdac7005cd Mon Sep 17 00:00:00 2001
From: Tomoya Kashifuku <tnyo43@gmail.com>
Date: Thu, 9 Oct 2025 22:35:10 +0900
Subject: [PATCH 09/13] =?UTF-8?q?=E2=9C=A8=20set=20isTableModeActivatable?=
 =?UTF-8?q?=20on=20CommandPaletteContent=20to=20switch=20table=20mode?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CommandPaletteContent/CommandPaletteContent.tsx    | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.tsx b/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.tsx
index d8d05ebe43..2a816e0c4f 100644
--- a/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.tsx
+++ b/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.tsx
@@ -23,7 +23,13 @@ const commandPaletteFilter: typeof defaultFilter = (value, ...rest) => {
   return defaultFilter(suggestion.name, ...rest)
 }
 
-export const CommandPaletteContent: FC = () => {
+type Props = {
+  isTableModeActivatable?: boolean
+}
+
+export const CommandPaletteContent: FC<Props> = ({
+  isTableModeActivatable = false,
+}) => {
   const [inputMode, setInputMode] = useState<CommandPaletteInputMode>({
     type: 'default',
   })
@@ -46,7 +52,7 @@ export const CommandPaletteContent: FC = () => {
           suggestion={suggestion}
           setMode={setInputMode}
           onBlur={(event) => event.target.focus()}
-          isTableModeActivatable
+          isTableModeActivatable={isTableModeActivatable}
         />
         <DialogClose asChild>
           <Button

From 242f9dcc54a68244f38069355bb15c4b92bdbe5c Mon Sep 17 00:00:00 2001
From: Tomoya Kashifuku <tnyo43@gmail.com>
Date: Thu, 9 Oct 2025 22:31:02 +0900
Subject: [PATCH 10/13] =?UTF-8?q?=F0=9F=92=84=20show=20TablePreview=20when?=
 =?UTF-8?q?=20a=20column=20is=20suggested?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CommandPaletteContent.test.tsx            | 59 ++++++++++++++++++-
 .../CommandPaletteContent.tsx                 |  3 +
 2 files changed, 60 insertions(+), 2 deletions(-)

diff --git a/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.test.tsx b/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.test.tsx
index 24ff12352c..a29d2809d7 100644
--- a/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.test.tsx
+++ b/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.test.tsx
@@ -17,8 +17,40 @@ import { CommandPaletteContent } from './CommandPaletteContent'
 const schema: SchemaProviderValue = {
   current: {
     tables: {
-      users: aTable({ name: 'users' }),
-      posts: aTable({ name: 'posts' }),
+      users: aTable({
+        name: 'users',
+        columns: {
+          id: {
+            name: 'id',
+            type: 'bigint',
+            default: null,
+            check: null,
+            notNull: true,
+            comment: null,
+          },
+          name: {
+            name: 'name',
+            type: 'text',
+            default: null,
+            check: null,
+            notNull: true,
+            comment: null,
+          },
+        },
+      }),
+      posts: aTable({
+        name: 'posts',
+        columns: {
+          created_at: {
+            name: 'created_at',
+            type: 'timestamp',
+            default: null,
+            check: null,
+            notNull: true,
+            comment: null,
+          },
+        },
+      }),
       follows: aTable({ name: 'follows' }),
       user_settings: aTable({ name: 'user_settings' }),
     },
@@ -192,6 +224,29 @@ describe('preview', () => {
       await user.hover(screen.getByRole('option', { name: 'posts' }))
       expect(within(previewContainer).getByText('posts')).toBeInTheDocument()
     })
+
+    it('renders a table preview when a column option is selected', async () => {
+      const user = userEvent.setup()
+      render(<CommandPaletteContent isTableModeActivatable />, { wrapper })
+      const previewContainer = screen.getByTestId('CommandPalettePreview')
+
+      // renders the "users" preview when the "users/name" option is selected
+      await user.hover(screen.getByRole('option', { name: 'users' }))
+      // go to the "table" input mode of the "users" table
+      await user.keyboard('{Tab}')
+      await user.hover(screen.getByRole('option', { name: 'name' }))
+      expect(within(previewContainer).getByText('users')).toBeInTheDocument()
+
+      // back to the "default" input mode
+      await user.keyboard('{Backspace}')
+
+      // renders the "posts" preview when the "posts/created_at" option is selected
+      await user.hover(screen.getByRole('option', { name: 'posts' }))
+      // go to the "table" input mode of the "posts" table
+      await user.keyboard('{Tab}')
+      await user.hover(screen.getByRole('option', { name: 'created_at' }))
+      expect(within(previewContainer).getByText('posts')).toBeInTheDocument()
+    })
   })
 
   describe('command preview', () => {
diff --git a/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.tsx b/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.tsx
index 2a816e0c4f..66b0aa0abb 100644
--- a/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.tsx
+++ b/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.tsx
@@ -87,6 +87,9 @@ export const CommandPaletteContent: FC<Props> = ({
           {suggestion?.type === 'table' && (
             <TablePreview tableName={suggestion.name} />
           )}
+          {suggestion?.type === 'column' && (
+            <TablePreview tableName={suggestion.tableName} />
+          )}
           {suggestion?.type === 'command' && (
             <CommandPreview commandName={suggestion.name} />
           )}

From 3e989967eae80357a0aa9a0e5decb9fec3aa8494 Mon Sep 17 00:00:00 2001
From: Tomoya Kashifuku <tnyo43@gmail.com>
Date: Thu, 9 Oct 2025 23:00:21 +0900
Subject: [PATCH 11/13] =?UTF-8?q?=E2=9C=A8=20customize=20filter=20for=20ta?=
 =?UTF-8?q?ble=20input=20mode?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CommandPaletteContent.test.tsx            | 35 +++++++++++++++++
 .../CommandPaletteContent.tsx                 | 38 +++++++++++++++++--
 2 files changed, 69 insertions(+), 4 deletions(-)

diff --git a/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.test.tsx b/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.test.tsx
index a29d2809d7..4cb111d3ce 100644
--- a/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.test.tsx
+++ b/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.test.tsx
@@ -207,6 +207,41 @@ describe('input mode and filters', () => {
       ).toBeInTheDocument()
     })
   })
+
+  describe('table input mode', () => {
+    it('renders selected table option and its column options', async () => {
+      const user = userEvent.setup()
+      render(<CommandPaletteContent isTableModeActivatable />, { wrapper })
+
+      // switch to "table" input mode of the "users" table
+      await user.keyboard('users')
+      await user.keyboard('{Tab}')
+
+      // the "users" table option is always displayed on the top of the options list
+      expect(screen.getByRole('option', { name: 'users' })).toBeInTheDocument()
+      // column options of the "users" table
+      expect(screen.getByRole('option', { name: 'id' })).toBeInTheDocument()
+      expect(screen.getByRole('option', { name: 'name' })).toBeInTheDocument()
+    })
+
+    it('filters column options by user input in the combobox while keeping the selected table option visible', async () => {
+      const user = userEvent.setup()
+      render(<CommandPaletteContent isTableModeActivatable />, { wrapper })
+
+      // switch to "table" input mode of the "users" table
+      await user.keyboard('users')
+      await user.keyboard('{Tab}')
+      // filter the column options by typing "name"
+      await user.keyboard('name')
+
+      expect(screen.getByRole('option', { name: 'users' })).toBeInTheDocument()
+      expect(screen.getByRole('option', { name: 'name' })).toBeInTheDocument()
+      // the "id" column option is filtered out
+      expect(
+        screen.queryByRole('option', { name: 'id' }),
+      ).not.toBeInTheDocument()
+    })
+  })
 })
 
 describe('preview', () => {
diff --git a/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.tsx b/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.tsx
index 66b0aa0abb..0591b442d0 100644
--- a/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.tsx
+++ b/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.tsx
@@ -1,6 +1,6 @@
 import { Button } from '@liam-hq/ui'
 import { DialogClose } from '@radix-ui/react-dialog'
-import { Command, defaultFilter } from 'cmdk'
+import { Command, defaultFilter as cmdkBaseFilter } from 'cmdk'
 import { type FC, useMemo, useState } from 'react'
 import {
   CommandPaletteCommandOptions,
@@ -13,14 +13,35 @@ import type { CommandPaletteInputMode } from '../types'
 import { textToSuggestion } from '../utils'
 import styles from './CommandPaletteContent.module.css'
 
-const commandPaletteFilter: typeof defaultFilter = (value, ...rest) => {
+const defaultCommandPaletteFilter: typeof cmdkBaseFilter = (value, ...rest) => {
   const suggestion = textToSuggestion(value)
 
   // if the value is inappropriate for suggestion, it returns 0 and the options is hidden
   // https://github.com/pacocoursey/cmdk/blob/d6fde235386414196bf80d9b9fa91e2cf89a72ea/cmdk/src/index.tsx#L91-L95
   if (!suggestion) return 0
 
-  return defaultFilter(suggestion.name, ...rest)
+  // displays 'table' and 'command' type suggestions in the "default" input mode
+  if (suggestion.type === 'table' || suggestion.type === 'command') {
+    return cmdkBaseFilter(suggestion.name, ...rest)
+  }
+
+  return 0
+}
+
+const tableInputModeFilter: typeof cmdkBaseFilter = (value, ...rest) => {
+  const suggestion = textToSuggestion(value)
+
+  // if the value is inappropriate for suggestion, it returns 0 and the options is hidden
+  // https://github.com/pacocoursey/cmdk/blob/d6fde235386414196bf80d9b9fa91e2cf89a72ea/cmdk/src/index.tsx#L91-L95
+  if (!suggestion) return 0
+
+  // always display the table itself on the top of the options list
+  if (suggestion.type === 'table') return 1
+  if (suggestion.type === 'column')
+    return cmdkBaseFilter(suggestion.columnName, ...rest)
+
+  // it displays only 'table' and 'column' type suggestions in the "table" input mode
+  return 0
 }
 
 type Props = {
@@ -33,6 +54,15 @@ export const CommandPaletteContent: FC<Props> = ({
   const [inputMode, setInputMode] = useState<CommandPaletteInputMode>({
     type: 'default',
   })
+  const filter = useMemo(() => {
+    switch (inputMode.type) {
+      case 'default':
+      case 'command':
+        return defaultCommandPaletteFilter
+      case 'table':
+        return tableInputModeFilter
+    }
+  }, [inputMode.type])
 
   const [suggestionText, setSuggestionText] = useState('')
   const suggestion = useMemo(
@@ -44,7 +74,7 @@ export const CommandPaletteContent: FC<Props> = ({
     <Command
       value={suggestionText}
       onValueChange={(v) => setSuggestionText(v)}
-      filter={commandPaletteFilter}
+      filter={filter}
     >
       <div className={styles.searchContainer}>
         <CommandPaletteSearchInput

From 04295f998a81cf10029aa1be7d13b3c35efe5df1 Mon Sep 17 00:00:00 2001
From: Tomoya Kashifuku <tnyo43@gmail.com>
Date: Thu, 9 Oct 2025 23:04:05 +0900
Subject: [PATCH 12/13] =?UTF-8?q?=F0=9F=A7=AA=20add=20isTableModeActivatab?=
 =?UTF-8?q?le=20for=20checking?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ERDRenderer/CommandPalette/CommandPalette.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPalette.tsx b/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPalette.tsx
index d2c3888732..6047eec377 100644
--- a/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPalette.tsx
+++ b/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPalette.tsx
@@ -42,7 +42,7 @@ export const CommandPalette: FC = () => {
             A search-based interface that allows quick access to various
             commands and features within the application.
           </DialogDescription>
-          <CommandPaletteContent />
+          <CommandPaletteContent isTableModeActivatable />
         </DialogContent>
       </DialogPortal>
     </Dialog>

From 5493d3d9b5e38fce1a3c34108d8b40a175b34c60 Mon Sep 17 00:00:00 2001
From: Tomoya Kashifuku <tnyo43@gmail.com>
Date: Thu, 9 Oct 2025 23:28:07 +0900
Subject: [PATCH 13/13] =?UTF-8?q?Revert=20"=F0=9F=A7=AA=20add=20isTableMod?=
 =?UTF-8?q?eActivatable=20for=20checking"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit 04295f998a81cf10029aa1be7d13b3c35efe5df1.
---
 .../components/ERDRenderer/CommandPalette/CommandPalette.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPalette.tsx b/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPalette.tsx
index 6047eec377..d2c3888732 100644
--- a/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPalette.tsx
+++ b/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPalette.tsx
@@ -42,7 +42,7 @@ export const CommandPalette: FC = () => {
             A search-based interface that allows quick access to various
             commands and features within the application.
           </DialogDescription>
-          <CommandPaletteContent isTableModeActivatable />
+          <CommandPaletteContent />
         </DialogContent>
       </DialogPortal>
     </Dialog>