@hienlh/ppm 0.6.3 → 0.6.5

package/src/web/components/database/database-sidebar.tsx

@@ -0,0 +1,89 @@
+import { useState } from "react";
+import { Plus } from "lucide-react";
+import { useTabStore } from "@/stores/tab-store";
+import { ConnectionList } from "./connection-list";
+import { ConnectionFormDialog } from "./connection-form-dialog";
+import { useConnections, type Connection, type CreateConnectionData, type UpdateConnectionData } from "./use-connections";
+
+export function DatabaseSidebar() {
+  const { connections, loading, cachedTables, createConnection, updateConnection, deleteConnection, testConnection, refreshTables } = useConnections();
+  const openTab = useTabStore((s) => s.openTab);
+  const [addOpen, setAddOpen] = useState(false);
+  const [editConn, setEditConn] = useState<Connection | null>(null);
+
+  const handleOpenTable = (conn: Connection, tableName: string, schemaName: string) => {
+    openTab({
+      type: "database",
+      title: `${conn.name} · ${tableName}`,
+      projectId: null,
+      closable: true,
+      metadata: { connectionId: conn.id, connectionName: conn.name, dbType: conn.type, tableName, schemaName, connectionColor: conn.color },
+    });
+  };
+
+  const handleDelete = async (id: number) => {
+    if (!confirm("Delete this connection?")) return;
+    await deleteConnection(id);
+  };
+
+  const handleCreate = async (data: CreateConnectionData) => {
+    const created = await createConnection(data);
+    // Auto-refresh tables after creating (use return value to avoid stale closure)
+    if (created) refreshTables(created.id).catch(() => {});
+  };
+
+  const handleUpdate = async (id: number, data: UpdateConnectionData) => {
+    await updateConnection(id, data);
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Header */}
+      <div className="flex items-center justify-between px-3 py-2 border-b border-border shrink-0">
+        <span className="text-[10px] font-semibold text-text-subtle uppercase tracking-wider">Database</span>
+        <button
+          onClick={() => setAddOpen(true)}
+          className="flex items-center justify-center size-5 rounded hover:bg-surface-elevated transition-colors text-text-subtle hover:text-foreground"
+          title="Add connection"
+        >
+          <Plus className="size-3.5" />
+        </button>
+      </div>
+
+      {/* Connection list */}
+      <div className="flex-1 overflow-y-auto min-h-0">
+        {loading ? (
+          <p className="px-4 py-6 text-xs text-text-subtle text-center">Loading…</p>
+        ) : (
+          <ConnectionList
+            connections={connections}
+            cachedTables={cachedTables}
+            onOpenTable={handleOpenTable}
+            onRefreshTables={refreshTables}
+            onEdit={setEditConn}
+            onDelete={handleDelete}
+          />
+        )}
+      </div>
+
+      {/* Add dialog */}
+      <ConnectionFormDialog
+        open={addOpen}
+        onClose={() => setAddOpen(false)}
+        onSave={handleCreate}
+        onTest={() => Promise.resolve({ ok: false, error: "Save connection first" })}
+      />
+
+      {/* Edit dialog */}
+      {editConn && (
+        <ConnectionFormDialog
+          open={!!editConn}
+          onClose={() => setEditConn(null)}
+          connection={editConn}
+          onUpdate={handleUpdate}
+          onTest={(id) => testConnection(id)}
+        />
+      )}
+    </div>
+  );
+}

package/src/web/components/database/database-viewer.tsx

@@ -0,0 +1,228 @@
+import { useState, useCallback, useMemo, useEffect, useRef } from "react";
+import { Database, Loader2, Play, ChevronLeft, ChevronRight } from "lucide-react";
+import { useReactTable, getCoreRowModel, flexRender, type ColumnDef } from "@tanstack/react-table";
+import CodeMirror from "@uiw/react-codemirror";
+import { sql, PostgreSQL, SQLite } from "@codemirror/lang-sql";
+import { useDatabase, type DbColumnInfo, type DbQueryResult } from "./use-database";
+
+const SQL_DIALECTS: Record<string, typeof PostgreSQL> = { postgres: PostgreSQL, sqlite: SQLite };
+
+interface Props { metadata?: Record<string, unknown>; tabId?: string }
+
+/** Generic database viewer — works for any DB type via unified API */
+export function DatabaseViewer({ metadata }: Props) {
+  const connectionId = metadata?.connectionId as number;
+  const connectionName = metadata?.connectionName as string | undefined;
+  const dbType = (metadata?.dbType as string) ?? "postgres";
+  const initialTable = metadata?.tableName as string | undefined;
+  const initialSchema = (metadata?.schemaName as string) ?? "public";
+
+  const db = useDatabase(connectionId);
+  const [queryPanelOpen, setQueryPanelOpen] = useState(false);
+
+  // Jump to initial table
+  const didInit = useRef(false);
+  useEffect(() => {
+    if (!initialTable || didInit.current) return;
+    didInit.current = true;
+    db.selectTable(initialTable, initialSchema);
+  }, [initialTable, initialSchema]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <div className="flex h-full w-full overflow-hidden">
+      <div className="flex-1 flex flex-col overflow-hidden">
+        {/* Toolbar */}
+        <div className="flex items-center gap-2 px-3 py-1.5 border-b border-border bg-background shrink-0">
+          <Database className="size-3.5 text-muted-foreground" />
+          <span className="text-xs text-muted-foreground truncate">{connectionName ?? "Database"}</span>
+          {db.selectedTable && <span className="text-xs text-muted-foreground">/ {db.selectedTable}</span>}
+          <div className="ml-auto">
+            <button type="button" onClick={() => setQueryPanelOpen((v) => !v)}
+              className={`px-2 py-1 rounded text-xs transition-colors ${queryPanelOpen ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground"}`}>
+              SQL
+            </button>
+          </div>
+        </div>
+
+        {/* Data grid */}
+        <div className={`flex-1 overflow-hidden ${queryPanelOpen ? "max-h-[60%]" : ""}`}>
+          <DataGrid tableData={db.tableData} schema={db.schema} loading={db.loading}
+            page={db.page} onPageChange={db.setPage} onCellUpdate={db.updateCell} />
+        </div>
+
+        {/* Query editor */}
+        {queryPanelOpen && (
+          <div className="border-t border-border h-[40%] shrink-0">
+            <QueryEditor dialect={SQL_DIALECTS[dbType] ?? PostgreSQL}
+              onExecute={db.executeQuery} result={db.queryResult} error={db.queryError} loading={db.queryLoading} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/* ---------- Data Grid ---------- */
+function DataGrid({ tableData, schema, loading, page, onPageChange, onCellUpdate }: {
+  tableData: { columns: string[]; rows: Record<string, unknown>[]; total: number; limit: number } | null;
+  schema: DbColumnInfo[]; loading: boolean; page: number;
+  onPageChange: (p: number) => void;
+  onCellUpdate: (pkCol: string, pkVal: unknown, col: string, val: unknown) => void;
+}) {
+  const [editingCell, setEditingCell] = useState<{ rowIdx: number; col: string } | null>(null);
+  const [editValue, setEditValue] = useState("");
+
+  const pkCol = useMemo(() => schema.find((c) => c.pk)?.name ?? null, [schema]);
+
+  const startEdit = useCallback((rowIdx: number, col: string, val: unknown) => {
+    setEditingCell({ rowIdx, col });
+    setEditValue(val == null ? "" : String(val));
+  }, []);
+
+  const commitEdit = useCallback(() => {
+    if (!editingCell || !tableData || !pkCol) return;
+    const row = tableData.rows[editingCell.rowIdx];
+    if (!row) return;
+    const oldVal = row[editingCell.col];
+    if (String(oldVal ?? "") !== editValue) {
+      onCellUpdate(pkCol, row[pkCol], editingCell.col, editValue === "" ? null : editValue);
+    }
+    setEditingCell(null);
+  }, [editingCell, editValue, tableData, pkCol, onCellUpdate]);
+
+  const cancelEdit = useCallback(() => setEditingCell(null), []);
+
+  const columns = useMemo<ColumnDef<Record<string, unknown>>[]>(() =>
+    (tableData?.columns ?? []).map((col) => ({
+      id: col,
+      accessorFn: (row) => row[col],
+      header: () => <span className={schema.find((c) => c.name === col)?.pk ? "font-bold" : ""}>{col}</span>,
+      cell: ({ row, getValue }) => {
+        const isEditing = editingCell?.rowIdx === row.index && editingCell?.col === col;
+        const val = getValue();
+        if (isEditing) {
+          return (
+            <input autoFocus className="w-full bg-transparent border border-primary/50 rounded px-1 py-0 text-xs outline-none"
+              value={editValue} onChange={(e) => setEditValue(e.target.value)}
+              onBlur={commitEdit} onKeyDown={(e) => { if (e.key === "Enter") commitEdit(); if (e.key === "Escape") cancelEdit(); }} />
+          );
+        }
+        return (
+          <span className={`cursor-pointer truncate block ${val == null ? "text-muted-foreground/40 italic" : ""}`}
+            onDoubleClick={() => pkCol && startEdit(row.index, col, val)} title={val == null ? "NULL" : String(val)}>
+            {val == null ? "NULL" : String(val)}
+          </span>
+        );
+      },
+    })),
+  [tableData?.columns, schema, editingCell, editValue, commitEdit, cancelEdit, startEdit, pkCol]);
+
+  const table = useReactTable({ data: tableData?.rows ?? [], columns, getCoreRowModel: getCoreRowModel() });
+
+  if (!tableData) {
+    return (
+      <div className="flex items-center justify-center h-full text-xs text-muted-foreground">
+        {loading ? <Loader2 className="size-4 animate-spin" /> : "Select a table"}
+      </div>
+    );
+  }
+
+  const totalPages = Math.ceil(tableData.total / tableData.limit) || 1;
+
+  return (
+    <div className="flex flex-col h-full overflow-hidden">
+      <div className="flex-1 overflow-auto">
+        <table className="w-full text-xs border-collapse">
+          <thead className="sticky top-0 z-10 bg-muted">
+            {table.getHeaderGroups().map((hg) => (
+              <tr key={hg.id}>
+                {hg.headers.map((h) => (
+                  <th key={h.id} className="px-2 py-1.5 text-left font-medium text-muted-foreground border-b border-border whitespace-nowrap">
+                    {flexRender(h.column.columnDef.header, h.getContext())}
+                  </th>
+                ))}
+              </tr>
+            ))}
+          </thead>
+          <tbody>
+            {table.getRowModel().rows.map((row) => (
+              <tr key={row.id} className="hover:bg-muted/30 border-b border-border/50">
+                {row.getVisibleCells().map((cell) => (
+                  <td key={cell.id} className="px-2 py-1 max-w-[300px]">
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </td>
+                ))}
+              </tr>
+            ))}
+            {tableData.rows.length === 0 && (
+              <tr><td colSpan={tableData.columns.length} className="px-2 py-8 text-center text-muted-foreground">No data</td></tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+      <div className="flex items-center justify-between px-3 py-1.5 border-t border-border bg-background shrink-0 text-xs text-muted-foreground">
+        <span>{tableData.total.toLocaleString()} rows</span>
+        <div className="flex items-center gap-2">
+          <button type="button" disabled={page <= 1} onClick={() => onPageChange(page - 1)} className="p-0.5 rounded hover:bg-muted disabled:opacity-30">
+            <ChevronLeft className="size-3.5" />
+          </button>
+          <span>{page} / {totalPages}</span>
+          <button type="button" disabled={page >= totalPages} onClick={() => onPageChange(page + 1)} className="p-0.5 rounded hover:bg-muted disabled:opacity-30">
+            <ChevronRight className="size-3.5" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ---------- Query Editor ---------- */
+function QueryEditor({ dialect, onExecute, result, error, loading }: {
+  dialect: typeof PostgreSQL; onExecute: (sql: string) => void; result: DbQueryResult | null; error: string | null; loading: boolean;
+}) {
+  const [query, setQuery] = useState("SELECT * FROM ");
+
+  const handleExecute = useCallback(() => { const t = query.trim(); if (t) onExecute(t); }, [query, onExecute]);
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") { e.preventDefault(); handleExecute(); }
+  }, [handleExecute]);
+
+  return (
+    <div className="flex flex-col h-full overflow-hidden">
+      <div className="flex items-start gap-1 border-b border-border bg-background" onKeyDown={handleKeyDown}>
+        <div className="flex-1 max-h-[120px] overflow-auto">
+          <CodeMirror value={query} onChange={setQuery} extensions={[sql({ dialect })]}
+            basicSetup={{ lineNumbers: false, foldGutter: false, highlightActiveLine: false }}
+            className="text-xs [&_.cm-editor]:!outline-none [&_.cm-scroller]:!overflow-auto" />
+        </div>
+        <button type="button" onClick={handleExecute} disabled={loading} title="Execute (Cmd+Enter)"
+          className="shrink-0 m-1 p-1.5 rounded bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 transition-colors">
+          {loading ? <Loader2 className="size-3.5 animate-spin" /> : <Play className="size-3.5" />}
+        </button>
+      </div>
+      <div className="flex-1 overflow-auto text-xs">
+        {error && <div className="px-3 py-2 text-destructive bg-destructive/5">{error}</div>}
+        {result?.changeType === "modify" && <div className="px-3 py-2 text-green-500">Query executed. {result.rowsAffected} row(s) affected.</div>}
+        {result?.changeType === "select" && result.rows.length > 0 && (
+          <table className="w-full border-collapse">
+            <thead className="sticky top-0 bg-muted">
+              <tr>{result.columns.map((c) => <th key={c} className="px-2 py-1 text-left font-medium text-muted-foreground border-b border-border whitespace-nowrap">{c}</th>)}</tr>
+            </thead>
+            <tbody>
+              {result.rows.map((row, i) => (
+                <tr key={i} className="hover:bg-muted/30 border-b border-border/50">
+                  {result.columns.map((c) => (
+                    <td key={c} className="px-2 py-1 max-w-[300px] truncate" title={row[c] == null ? "NULL" : String(row[c])}>
+                      {row[c] == null ? <span className="text-muted-foreground/40 italic">NULL</span> : String(row[c])}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+        {result?.changeType === "select" && result.rows.length === 0 && <div className="px-3 py-2 text-muted-foreground">No results</div>}
+      </div>
+    </div>
+  );
+}

package/src/web/components/database/use-connections.ts

@@ -0,0 +1,92 @@
+import { useState, useEffect, useCallback } from "react";
+import { api } from "../../lib/api-client";
+
+export interface Connection {
+  id: number;
+  type: "sqlite" | "postgres";
+  name: string;
+  group_name: string | null;
+  color: string | null;
+  readonly: number;
+  sort_order: number;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface CachedTable {
+  connectionId: number;
+  tableName: string;
+  schemaName: string;
+  rowCount: number;
+  cachedAt: string;
+}
+
+export interface CreateConnectionData {
+  type: "sqlite" | "postgres";
+  name: string;
+  connectionConfig: { type: string; path?: string; connectionString?: string };
+  groupName?: string;
+  color?: string;
+}
+
+export interface UpdateConnectionData {
+  name?: string;
+  connectionConfig?: { type: string; path?: string; connectionString?: string };
+  groupName?: string | null;
+  color?: string | null;
+  readonly?: number;
+}
+
+export function useConnections() {
+  const [connections, setConnections] = useState<Connection[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [cachedTables, setCachedTables] = useState<Map<number, CachedTable[]>>(new Map());
+
+  const fetchConnections = useCallback(async () => {
+    try {
+      const data = await api.get<Connection[]>("/api/db/connections");
+      setConnections(data);
+    } catch {
+      // ignore — server may not be ready
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { fetchConnections(); }, [fetchConnections]);
+
+  const createConnection = useCallback(async (data: CreateConnectionData): Promise<Connection> => {
+    const conn = await api.post<Connection>("/api/db/connections", data);
+    setConnections((prev) => [...prev, conn]);
+    return conn;
+  }, []);
+
+  const updateConnection = useCallback(async (id: number, data: UpdateConnectionData): Promise<void> => {
+    const updated = await api.put<Connection>(`/api/db/connections/${id}`, data);
+    setConnections((prev) => prev.map((c) => (c.id === id ? updated : c)));
+  }, []);
+
+  const deleteConnection = useCallback(async (id: number): Promise<void> => {
+    await api.del(`/api/db/connections/${id}`);
+    setConnections((prev) => prev.filter((c) => c.id !== id));
+    setCachedTables((prev) => { const m = new Map(prev); m.delete(id); return m; });
+  }, []);
+
+  const testConnection = useCallback(async (id: number): Promise<{ ok: boolean; error?: string }> => {
+    return api.post(`/api/db/connections/${id}/test`);
+  }, []);
+
+  const refreshTables = useCallback(async (id: number): Promise<void> => {
+    const raw = await api.get<{ name: string; schema: string; rowCount: number }[]>(`/api/db/connections/${id}/tables`);
+    const tables: CachedTable[] = raw.map((t) => ({
+      connectionId: id,
+      tableName: t.name,
+      schemaName: t.schema,
+      rowCount: t.rowCount,
+      cachedAt: new Date().toISOString(),
+    }));
+    setCachedTables((prev) => new Map(prev).set(id, tables));
+  }, []);
+
+  return { connections, loading, cachedTables, createConnection, updateConnection, deleteConnection, testConnection, refreshTables };
+}

package/src/web/components/database/use-database.ts

@@ -0,0 +1,117 @@
+import { useState, useCallback } from "react";
+import { api } from "@/lib/api-client";
+
+export interface DbTableInfo { name: string; schema: string; rowCount: number }
+export interface DbColumnInfo { name: string; type: string; nullable: boolean; pk: boolean; defaultValue: string | null }
+export interface DbQueryResult { columns: string[]; rows: Record<string, unknown>[]; rowsAffected: number; changeType: "select" | "modify" }
+interface DbTableData { columns: string[]; rows: Record<string, unknown>[]; total: number; page: number; limit: number }
+
+/** SessionStorage cache key for table data */
+function cacheKey(connectionId: number, table: string, schema: string, page: number) {
+  return `ppm-db-${connectionId}-${schema}.${table}-p${page}`;
+}
+
+function readCache(connectionId: number, table: string, schema: string, page: number): { data: DbTableData; cols: DbColumnInfo[] } | null {
+  try {
+    const raw = sessionStorage.getItem(cacheKey(connectionId, table, schema, page));
+    return raw ? JSON.parse(raw) : null;
+  } catch { return null; }
+}
+
+function writeCache(connectionId: number, table: string, schema: string, page: number, data: DbTableData, cols: DbColumnInfo[]) {
+  try { sessionStorage.setItem(cacheKey(connectionId, table, schema, page), JSON.stringify({ data, cols })); } catch { /* quota */ }
+}
+
+/**
+ * Generic database hook for unified API (/api/db/connections/:id/...).
+ * Works for any DB type (postgres, sqlite, mysql, etc.) via adapter pattern.
+ * No auto-fetch on mount — viewer calls selectTable() to start loading.
+ */
+export function useDatabase(connectionId: number) {
+  const base = `/api/db/connections/${connectionId}`;
+  const [selectedTable, setSelectedTable] = useState<string | null>(null);
+  const [selectedSchema, setSelectedSchema] = useState("public");
+  const [tableData, setTableData] = useState<DbTableData | null>(null);
+  const [schema, setSchema] = useState<DbColumnInfo[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [page, setPageState] = useState(1);
+  const [queryResult, setQueryResult] = useState<DbQueryResult | null>(null);
+  const [queryError, setQueryError] = useState<string | null>(null);
+  const [queryLoading, setQueryLoading] = useState(false);
+
+  // Fetch table data + schema for current selection
+  const fetchTableData = useCallback(async (table?: string, tableSchema?: string, p?: number) => {
+    const t = table ?? selectedTable;
+    const s = tableSchema ?? selectedSchema;
+    if (!t) return;
+    setLoading(true);
+    try {
+      const [data, cols] = await Promise.all([
+        api.get<DbTableData>(`${base}/data?table=${encodeURIComponent(t)}&schema=${s}&page=${p ?? page}&limit=100`),
+        api.get<DbColumnInfo[]>(`${base}/schema?table=${encodeURIComponent(t)}&schema=${s}`),
+      ]);
+      setTableData(data);
+      setSchema(cols);
+      writeCache(connectionId, t, s, p ?? page, data, cols);
+    } catch (e) {
+      setError((e as Error).message);
+    } finally {
+      setLoading(false);
+    }
+  }, [base, connectionId, selectedTable, selectedSchema, page]);
+
+  const selectTable = useCallback((name: string, tableSchema = "public") => {
+    setSelectedTable(name);
+    setSelectedSchema(tableSchema);
+    setPageState(1);
+    setQueryResult(null);
+    // Show cached data instantly, then refresh in background
+    const cached = readCache(connectionId, name, tableSchema, 1);
+    if (cached) {
+      setTableData(cached.data);
+      setSchema(cached.cols);
+      setLoading(false);
+      // Still fetch fresh data in background
+      fetchTableData(name, tableSchema, 1);
+    } else {
+      fetchTableData(name, tableSchema, 1);
+    }
+  }, [connectionId, fetchTableData]);
+
+  const changePage = useCallback((p: number) => {
+    setPageState(p);
+    fetchTableData(undefined, undefined, p);
+  }, [fetchTableData]);
+
+  const executeQuery = useCallback(async (sqlText: string) => {
+    setQueryLoading(true);
+    setQueryError(null);
+    try {
+      const result = await api.post<DbQueryResult>(`${base}/query`, { sql: sqlText });
+      setQueryResult(result);
+      if (result.changeType === "modify") fetchTableData();
+    } catch (e) {
+      setQueryError((e as Error).message);
+    } finally {
+      setQueryLoading(false);
+    }
+  }, [base, fetchTableData]);
+
+  const updateCell = useCallback(async (pkColumn: string, pkValue: unknown, column: string, value: unknown) => {
+    if (!selectedTable) return;
+    try {
+      await api.put(`${base}/cell`, { table: selectedTable, schema: selectedSchema, pkColumn, pkValue, column, value });
+      fetchTableData();
+    } catch (e) {
+      setError((e as Error).message);
+    }
+  }, [base, selectedTable, selectedSchema, fetchTableData]);
+
+  return {
+    selectedTable, selectTable, tableData, schema,
+    loading, error, page, setPage: changePage,
+    queryResult, queryError, queryLoading, executeQuery,
+    updateCell, refreshData: fetchTableData,
+  };
+}

package/src/web/components/layout/command-palette.tsx

@@ -25,7 +25,17 @@ interface CommandItem {
   icon: React.ElementType;
   action: () => void;
   keywords?: string;
-  group: "action" | "file" | "fs";
+  group: "action" | "file" | "fs" | "db";
+  connectionColor?: string | null;
+}
+
+interface DbSearchResult {
+  connectionId: number;
+  connectionName: string;
+  connectionType: string;
+  connectionColor: string | null;
+  tableName: string;
+  schemaName: string;
 }
 
 /** Recursively flatten file tree into file-only list */
@@ -65,6 +75,7 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
   const [selectedIdx, setSelectedIdx] = useState(0);
   const [fsFiles, setFsFiles] = useState<string[]>([]);
   const [fsLoading, setFsLoading] = useState(false);
+  const [dbResults, setDbResults] = useState<DbSearchResult[]>([]);
   const inputRef = useRef<HTMLInputElement>(null);
   const listRef = useRef<HTMLDivElement>(null);
 
@@ -103,6 +114,18 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
     fetchFsFiles(dir);
   }, [query, fetchFsFiles]);
 
+  // Debounced DB table search
+  useEffect(() => {
+    if (isPathQuery(query) || query.trim().length < 2) { setDbResults([]); return; }
+    const timer = setTimeout(async () => {
+      try {
+        const data = await api.get<DbSearchResult[]>(`/api/db/search?q=${encodeURIComponent(query.trim())}`);
+        setDbResults(data ?? []);
+      } catch { setDbResults([]); }
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [query]);
+
   // Action commands
   const actionCommands = useMemo<CommandItem[]>(() => {
     const projectId = activeProject?.name ?? null;
@@ -186,6 +209,25 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
     });
   }, [fsFiles, activeProject, openTab, onClose]);
 
+  const dbCommands = useMemo<CommandItem[]>(() => dbResults.map((r) => ({
+    id: `db:${r.connectionId}:${r.schemaName}.${r.tableName}`,
+    label: r.tableName,
+    hint: `${r.connectionName} (${r.connectionType === "postgres" ? "PG" : "SQLite"})`,
+    icon: Database,
+    group: "db" as const,
+    connectionColor: r.connectionColor,
+    action: () => {
+      openTab({
+        type: "database",
+        title: `${r.connectionName} · ${r.tableName}`,
+        projectId: null,
+        closable: true,
+        metadata: { connectionId: r.connectionId, connectionName: r.connectionName, dbType: r.connectionType, tableName: r.tableName, schemaName: r.schemaName, connectionColor: r.connectionColor },
+      });
+      onClose();
+    },
+  })), [dbResults, openTab, onClose]);
+
   const allCommands = useMemo(
     () => [...actionCommands, ...fileCommands],
     [actionCommands, fileCommands],
@@ -194,10 +236,9 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
   const filtered = useMemo(() => {
     // Path mode — search filesystem results using filename portion only
     if (isPathQuery(query)) {
-      // Extract the part after the last / as the filename filter
       const lastSlash = query.lastIndexOf("/");
       const fileFilter = lastSlash >= 0 ? query.slice(lastSlash + 1).toLowerCase() : "";
-      if (!fileFilter) return fsCommands.slice(0, 50); // show all if query ends with /
+      if (!fileFilter) return fsCommands.slice(0, 50);
       return fsCommands.filter((c) => {
         const name = c.label.toLowerCase();
         const path = (c.keywords ?? "").toLowerCase();
@@ -217,10 +258,12 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
       }
       return true;
     };
-    return allCommands.filter(
+    const matched = allCommands.filter(
       (c) => matchesFuzzy(c.label.toLowerCase()) || (c.keywords && matchesFuzzy(c.keywords.toLowerCase())),
     );
-  }, [allCommands, actionCommands, fsCommands, query]);
+    // Prepend DB results (already filtered server-side) when query is 2+ chars
+    return query.trim().length >= 2 ? [...dbCommands, ...matched] : matched;
+  }, [allCommands, actionCommands, fsCommands, dbCommands, query]);
 
   // Reset state when opening
   useEffect(() => {
@@ -228,6 +271,7 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
       setQuery(initialQuery || "");
       setSelectedIdx(0);
       setFsFiles([]);
+      setDbResults([]);
       requestAnimationFrame(() => inputRef.current?.focus());
     }
   }, [open]);
@@ -353,7 +397,13 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
                   <Icon className="size-4 shrink-0" />
                   <span className="truncate">{cmd.label}</span>
                   {cmd.hint && (
-                    <span className="ml-auto text-xs text-text-subtle truncate max-w-[200px]">
+                    <span className="ml-auto flex items-center gap-1.5 text-xs text-text-subtle truncate max-w-[200px]">
+                      {cmd.connectionColor && (
+                        <span
+                          className="shrink-0 size-2 rounded-full"
+                          style={{ backgroundColor: cmd.connectionColor }}
+                        />
+                      )}
                       {cmd.hint}
                     </span>
                   )}