Enhance database explorer with column property icons and FK direction arrows

Add unique/autoincrement detection via PRAGMA index_list and sqlite_master DDL
parsing. Show PK, autoincrement, unique, required icons and default value badges
on columns. Add arrow markers to foreign key edges to indicate direction.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: bchapuis

apps/api/src/routes/databases.ts

@@ -218,13 +218,50 @@ databaseRoutes.get("/:databaseId/schema", apiKeyOrJwtMiddleware, async (c) => {
       (r) => r.name
     );
 
-    // Fetch columns and foreign keys for each table
+    // Fetch columns, foreign keys, indexes, and DDL for each table
     const tables: DatabaseSchemaTable[] = await Promise.all(
       tableNames.map(async (tableName) => {
-        const [columnsResult, fksResult] = await Promise.all([
-          connection.query(`PRAGMA table_info("${tableName}")`),
-          connection.query(`PRAGMA foreign_key_list("${tableName}")`),
-        ]);
+        const [columnsResult, fksResult, indexListResult, ddlResult] =
+          await Promise.all([
+            connection.query(`PRAGMA table_info("${tableName}")`),
+            connection.query(`PRAGMA foreign_key_list("${tableName}")`),
+            connection.query(`PRAGMA index_list("${tableName}")`),
+            connection.query(
+              `SELECT sql FROM sqlite_master WHERE type='table' AND name=?`,
+              [tableName]
+            ),
+          ]);
+
+        // Detect AUTOINCREMENT from the CREATE TABLE DDL
+        const ddl = (ddlResult.results as { sql: string }[])[0]?.sql ?? "";
+        const hasAutoIncrement = /AUTOINCREMENT/i.test(ddl);
+
+        // Collect unique columns from single-column unique indexes
+        const uniqueColumns = new Set<string>();
+        const indexes = indexListResult.results as {
+          seq: number;
+          name: string;
+          unique: number;
+          origin: string;
+          partial: number;
+        }[];
+        await Promise.all(
+          indexes
+            .filter((idx) => idx.unique === 1)
+            .map(async (idx) => {
+              const infoResult = await connection.query(
+                `PRAGMA index_info("${idx.name}")`
+              );
+              const cols = infoResult.results as {
+                seqno: number;
+                cid: number;
+                name: string;
+              }[];
+              if (cols.length === 1) {
+                uniqueColumns.add(cols[0].name);
+              }
+            })
+        );
 
         const columns: DatabaseSchemaColumn[] = (
           columnsResult.results as {
@@ -241,6 +278,8 @@ databaseRoutes.get("/:databaseId/schema", apiKeyOrJwtMiddleware, async (c) => {
           notnull: col.notnull === 1,
           defaultValue: col.dflt_value,
           primaryKey: col.pk > 0,
+          unique: uniqueColumns.has(col.name),
+          autoIncrement: col.pk > 0 && hasAutoIncrement,
         }));
 
         const foreignKeys: DatabaseSchemaForeignKey[] = (

apps/app/src/pages/database-explorer-page.tsx

@@ -11,13 +11,18 @@ import {
   BackgroundVariant,
   Controls,
   Handle,
+  MarkerType,
   Position,
   ReactFlow,
   ReactFlowProvider,
   useNodesInitialized,
   useNodesState,
   useReactFlow,
 } from "@xyflow/react";
+import ArrowUp01 from "lucide-react/icons/arrow-up-0-1";
+import Asterisk from "lucide-react/icons/asterisk";
+import Hash from "lucide-react/icons/hash";
+import KeyRound from "lucide-react/icons/key-round";
 import { useCallback, useEffect, useMemo, useRef } from "react";
 import { useParams } from "react-router";
 
@@ -57,13 +62,31 @@ function SchemaTableNode({ data }: NodeProps<Node<SchemaTableNodeData>>) {
               isConnectable={false}
             />
             <span
-              className={
+              className={cn(
+                "flex items-center gap-1",
                 col.primaryKey ? "font-semibold" : "text-foreground/80"
-              }
+              )}
             >
+              {col.primaryKey && (
+                <KeyRound className="h-3 w-3 text-muted-foreground shrink-0" />
+              )}
+              {col.autoIncrement && (
+                <ArrowUp01 className="h-3 w-3 text-muted-foreground shrink-0" />
+              )}
+              {col.unique && (
+                <Hash className="h-3 w-3 text-muted-foreground shrink-0" />
+              )}
+              {col.notnull && !col.primaryKey && (
+                <Asterisk className="h-3 w-3 text-muted-foreground shrink-0" />
+              )}
               {col.name}
             </span>
-            <span className="text-muted-foreground/60 font-light uppercase">
+            <span className="flex items-center gap-1.5 text-muted-foreground/60 font-light uppercase">
+              {col.defaultValue !== null && (
+                <span className="text-[11px] normal-case font-normal bg-muted px-1 py-0.5 rounded text-muted-foreground">
+                  {col.defaultValue}
+                </span>
+              )}
               {col.type || "TEXT"}
             </span>
             <Handle
@@ -154,6 +177,11 @@ function SchemaFlowCanvas({ tables }: SchemaFlowCanvasProps) {
             target: fk.referencedTable,
             targetHandle: `${fk.referencedTable}-${targetCol}-target`,
             type: "smoothstep",
+            markerEnd: {
+              type: MarkerType.ArrowClosed,
+              width: 16,
+              height: 16,
+            },
           };
         })
         .filter((e) => e !== null)

packages/types/src/database.ts

@@ -66,6 +66,8 @@ export interface DatabaseSchemaColumn {
   notnull: boolean;
   defaultValue: string | null;
   primaryKey: boolean;
+  unique: boolean;
+  autoIncrement: boolean;
 }
 
 export interface DatabaseSchemaForeignKey {