@hienlh/ppm 0.6.3 → 0.6.4

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

@@ -0,0 +1,99 @@
+import { useState, useEffect, useCallback } from "react";
+
+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;
+}
+
+async function apiFetch<T>(url: string, opts?: RequestInit): Promise<T> {
+  const res = await fetch(url, opts);
+  const json = await res.json() as { ok: boolean; data?: T; error?: string };
+  if (!json.ok) throw new Error(json.error ?? "Request failed");
+  return json.data as T;
+}
+
+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 apiFetch<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 apiFetch<Connection>("/api/db/connections", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(data),
+    });
+    setConnections((prev) => [...prev, conn]);
+    return conn;
+  }, []);
+
+  const updateConnection = useCallback(async (id: number, data: UpdateConnectionData): Promise<void> => {
+    const updated = await apiFetch<Connection>(`/api/db/connections/${id}`, {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(data),
+    });
+    setConnections((prev) => prev.map((c) => (c.id === id ? updated : c)));
+  }, []);
+
+  const deleteConnection = useCallback(async (id: number): Promise<void> => {
+    await apiFetch(`/api/db/connections/${id}`, { method: "DELETE" });
+    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 apiFetch(`/api/db/connections/${id}/test`, { method: "POST" });
+  }, []);
+
+  const refreshTables = useCallback(async (id: number): Promise<void> => {
+    const tables = await apiFetch<CachedTable[]>(`/api/db/connections/${id}/tables`);
+    setCachedTables((prev) => new Map(prev).set(id, tables));
+  }, []);
+
+  return { connections, loading, cachedTables, createConnection, updateConnection, deleteConnection, testConnection, refreshTables };
+}

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,19 @@ 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 res = await fetch(`/api/db/search?q=${encodeURIComponent(query.trim())}`);
+        const json = await res.json() as { ok: boolean; data?: DbSearchResult[] };
+        setDbResults(json.ok ? (json.data ?? []) : []);
+      } catch { setDbResults([]); }
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [query]);
+
   // Action commands
   const actionCommands = useMemo<CommandItem[]>(() => {
     const projectId = activeProject?.name ?? null;
@@ -186,6 +210,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: r.connectionType === "postgres" ? "postgres" : "sqlite",
+        title: `${r.connectionName} · ${r.tableName}`,
+        projectId: null,
+        closable: true,
+        metadata: { connectionId: r.connectionId, tableName: r.tableName, schemaName: r.schemaName, connectionColor: r.connectionColor },
+      });
+      onClose();
+    },
+  })), [dbResults, openTab, onClose]);
+
   const allCommands = useMemo(
     () => [...actionCommands, ...fileCommands],
     [actionCommands, fileCommands],
@@ -194,10 +237,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 +259,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 +272,7 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
       setQuery(initialQuery || "");
       setSelectedIdx(0);
       setFsFiles([]);
+      setDbResults([]);
       requestAnimationFrame(() => inputRef.current?.focus());
     }
   }, [open]);
@@ -353,7 +398,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>
                   )}

package/src/web/components/layout/draggable-tab.tsx

@@ -2,6 +2,7 @@ import { useState, useRef, useEffect } from "react";
 import { X } from "lucide-react";
 import type { Tab, TabType } from "@/stores/tab-store";
 import { cn } from "@/lib/utils";
+import { isDarkColor } from "@/lib/color-utils";
 
 interface DraggableTabProps {
   tab: Tab;
@@ -41,6 +42,14 @@ export function DraggableTab({
     }
   };
 
+  const tabColor = tab.metadata?.connectionColor as string | undefined;
+  const colorStyle = tabColor
+    ? {
+        backgroundColor: isActive ? tabColor : `${tabColor}33`,
+        color: isActive && isDarkColor(tabColor) ? "#fff" : undefined,
+      }
+    : undefined;
+
   return (
     <div className="relative flex items-center">
       {showDropBefore && (
@@ -55,12 +64,14 @@ export function DraggableTab({
         onDragStart={onDragStart}
         onDragOver={onDragOver}
         onDragEnd={onDragEnd}
+        style={colorStyle}
         className={cn(
           "group flex items-center gap-1 px-3 h-10 whitespace-nowrap text-xs transition-colors",
           "border-b-2 -mb-px cursor-grab active:cursor-grabbing",
-          isActive
+          !colorStyle && (isActive
             ? "border-primary text-primary"
-            : "border-transparent text-text-secondary hover:text-foreground",
+            : "border-transparent text-text-secondary hover:text-foreground"),
+          colorStyle && "border-transparent",
         )}
       >
         <Icon className="size-4" />

package/src/web/components/layout/mobile-drawer.tsx

@@ -1,20 +1,22 @@
 import { useState, useCallback, useEffect } from "react";
 import {
-  X, Bug, FolderOpen, GitBranch, Settings,
+  X, Bug, FolderOpen, GitBranch, Settings, Database,
 } from "lucide-react";
 import { useProjectStore } from "@/stores/project-store";
 import { useSettingsStore } from "@/stores/settings-store";
 import { FileTree } from "@/components/explorer/file-tree";
 import { GitStatusPanel } from "@/components/git/git-status-panel";
 import { SettingsTab } from "@/components/settings/settings-tab";
+import { DatabaseSidebar } from "@/components/database/database-sidebar";
 import { openBugReportPopup } from "@/lib/report-bug";
 import { cn } from "@/lib/utils";
 
-type DrawerTab = "explorer" | "git" | "settings";
+type DrawerTab = "explorer" | "git" | "settings" | "database";
 
 const TABS: { id: DrawerTab; label: string; icon: React.ElementType }[] = [
   { id: "explorer", label: "Explorer", icon: FolderOpen },
   { id: "git", label: "Git", icon: GitBranch },
+  { id: "database", label: "Database", icon: Database },
   { id: "settings", label: "Settings", icon: Settings },
 ];
 
@@ -86,6 +88,9 @@ export function MobileDrawer({ isOpen, onClose, initialTab }: MobileDrawerProps)
           {activeTab === "git" && (
             <GitStatusPanel metadata={{ projectName: activeProject?.name }} onNavigate={onClose} />
           )}
+          {activeTab === "database" && (
+            <DatabaseSidebar />
+          )}
           {activeTab === "settings" && (
             <SettingsTab />
           )}

package/src/web/components/layout/sidebar.tsx

@@ -1,15 +1,17 @@
 import { useCallback, useRef } from "react";
-import { PanelLeftClose, PanelLeftOpen, FolderOpen, GitBranch, Settings } from "lucide-react";
+import { PanelLeftClose, PanelLeftOpen, FolderOpen, GitBranch, Settings, Database } from "lucide-react";
 import { useProjectStore } from "@/stores/project-store";
 import { useSettingsStore, type SidebarActiveTab } from "@/stores/settings-store";
 import { FileTree } from "@/components/explorer/file-tree";
 import { GitStatusPanel } from "@/components/git/git-status-panel";
 import { SettingsTab } from "@/components/settings/settings-tab";
+import { DatabaseSidebar } from "@/components/database/database-sidebar";
 import { cn } from "@/lib/utils";
 
 const TABS: { id: SidebarActiveTab; label: string; icon: React.ElementType }[] = [
   { id: "explorer", label: "Explorer", icon: FolderOpen },
   { id: "git", label: "Git", icon: GitBranch },
+  { id: "database", label: "Database", icon: Database },
   { id: "settings", label: "Settings", icon: Settings },
 ];
 
@@ -123,6 +125,9 @@ export function Sidebar() {
         {sidebarActiveTab === "git" && (
           <GitStatusPanel metadata={{ projectName: activeProject?.name }} />
         )}
+        {sidebarActiveTab === "database" && (
+          <DatabaseSidebar />
+        )}
         {sidebarActiveTab === "settings" && (
           <SettingsTab />
         )}

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

@@ -9,11 +9,13 @@ interface Props { metadata?: Record<string, unknown>; tabId?: string }
 
 export function PostgresViewer({ metadata }: Props) {
   const initialConn = (metadata?.connectionString as string) ?? "";
-  const pg = usePostgres();
+  const connectionId = metadata?.connectionId as number | undefined;
+  const pg = usePostgres(connectionId);
 
+  // When connectionId present, the hook auto-connects — skip connection form
   if (!pg.connected) return <ConnectionForm initialValue={initialConn} onConnect={pg.connect} loading={pg.loading} error={pg.error} />;
 
-  return <ConnectedView pg={pg} />;
+  return <ConnectedView pg={pg} initialTable={metadata?.tableName as string | undefined} />;
 }
 
 /* ---------- Connection Form ---------- */
@@ -42,9 +44,16 @@ function ConnectionForm({ initialValue, onConnect, loading, error }: {
 }
 
 /* ---------- Connected View ---------- */
-function ConnectedView({ pg }: { pg: ReturnType<typeof usePostgres> }) {
+function ConnectedView({ pg, initialTable }: { pg: ReturnType<typeof usePostgres>; initialTable?: string }) {
   const [queryPanelOpen, setQueryPanelOpen] = useState(false);
 
+  // Jump to initial table from sidebar click
+  const [didInit, setDidInit] = useState(false);
+  if (initialTable && !didInit && pg.tables.length > 0 && pg.selectedTable !== initialTable) {
+    const t = pg.tables.find((t) => t.name === initialTable);
+    if (t) { setDidInit(true); pg.selectTable(t.name, t.schema); }
+  }
+
   return (
     <div className="flex h-full w-full overflow-hidden">
       {/* Table sidebar */}

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

@@ -1,4 +1,4 @@
-import { useState, useCallback } from "react";
+import { useState, useCallback, useEffect } from "react";
 import { api } from "@/lib/api-client";
 
 export interface PgTableInfo { name: string; schema: string; rowCount: number }
@@ -8,9 +8,11 @@ interface PgTableData { columns: string[]; rows: Record<string, unknown>[]; tota
 
 const BASE = "/api/postgres";
 
-export function usePostgres() {
+export function usePostgres(connectionId?: number) {
   const [connectionString, setConnectionString] = useState("");
   const [connected, setConnected] = useState(false);
+  // Unified API base when connectionId is provided
+  const unifiedBase = connectionId ? `/api/db/connections/${connectionId}` : null;
   const [tables, setTables] = useState<PgTableInfo[]>([]);
   const [selectedTable, setSelectedTable] = useState<string | null>(null);
   const [selectedSchema, setSelectedSchema] = useState("public");
@@ -31,7 +33,6 @@ export function usePostgres() {
       if (!test.ok) { setError(test.error ?? "Connection failed"); return; }
       setConnectionString(connStr);
       setConnected(true);
-      // Fetch tables
       const data = await api.post<PgTableInfo[]>(`${BASE}/tables`, { connectionString: connStr });
       setTables(data);
       if (data.length > 0) {
@@ -46,6 +47,19 @@ export function usePostgres() {
   }, []);
 
   const fetchTables = useCallback(async () => {
+    if (unifiedBase) {
+      setLoading(true);
+      try {
+        const data = await api.get<PgTableInfo[]>(`${unifiedBase}/tables`);
+        setTables(data);
+        if (data.length > 0 && !selectedTable) {
+          setSelectedTable(data[0]!.name);
+          setSelectedSchema(data[0]!.schema ?? "public");
+        }
+      } catch (e) { setError((e as Error).message); }
+      finally { setLoading(false); }
+      return;
+    }
     if (!connectionString) return;
     setLoading(true);
     try {
@@ -56,26 +70,44 @@ export function usePostgres() {
     } finally {
       setLoading(false);
     }
-  }, [connectionString]);
+  }, [unifiedBase, connectionString, selectedTable]);
+
+  // Auto-connect via unified API when connectionId is provided
+  useEffect(() => {
+    if (unifiedBase) {
+      setConnected(true);
+      fetchTables();
+    }
+  }, [unifiedBase]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const fetchTableData = useCallback(async (table?: string, tableSchema?: string, p?: number) => {
     const t = table ?? selectedTable;
     const s = tableSchema ?? selectedSchema;
-    if (!connectionString || !t) return;
+    if (!t) return;
     setLoading(true);
     try {
-      const [data, cols] = await Promise.all([
-        api.post<PgTableData>(`${BASE}/data`, { connectionString, table: t, schema: s, page: p ?? page, limit: 100 }),
-        api.post<PgColumnInfo[]>(`${BASE}/schema`, { connectionString, table: t, schema: s }),
-      ]);
-      setTableData(data);
-      setSchema(cols);
+      if (unifiedBase) {
+        const [data, cols] = await Promise.all([
+          api.get<PgTableData>(`${unifiedBase}/data?table=${encodeURIComponent(t)}&schema=${s}&page=${p ?? page}&limit=100`),
+          api.get<PgColumnInfo[]>(`${unifiedBase}/schema?table=${encodeURIComponent(t)}&schema=${s}`),
+        ]);
+        setTableData(data);
+        setSchema(cols);
+      } else {
+        if (!connectionString) return;
+        const [data, cols] = await Promise.all([
+          api.post<PgTableData>(`${BASE}/data`, { connectionString, table: t, schema: s, page: p ?? page, limit: 100 }),
+          api.post<PgColumnInfo[]>(`${BASE}/schema`, { connectionString, table: t, schema: s }),
+        ]);
+        setTableData(data);
+        setSchema(cols);
+      }
     } catch (e) {
       setError((e as Error).message);
     } finally {
       setLoading(false);
     }
-  }, [connectionString, selectedTable, selectedSchema, page]);
+  }, [unifiedBase, connectionString, selectedTable, selectedSchema, page]);
 
   const selectTable = useCallback((name: string, tableSchema = "public") => {
     setSelectedTable(name);
@@ -91,11 +123,13 @@ export function usePostgres() {
   }, [fetchTableData]);
 
   const executeQuery = useCallback(async (sql: string) => {
-    if (!connectionString) return;
+    if (!unifiedBase && !connectionString) return;
     setQueryLoading(true);
     setQueryError(null);
     try {
-      const result = await api.post<PgQueryResult>(`${BASE}/query`, { connectionString, sql });
+      const result = unifiedBase
+        ? await api.post<PgQueryResult>(`${unifiedBase}/query`, { sql })
+        : await api.post<PgQueryResult>(`${BASE}/query`, { connectionString, sql });
       setQueryResult(result);
       if (result.changeType === "modify") fetchTableData();
     } catch (e) {
@@ -103,20 +137,22 @@ export function usePostgres() {
     } finally {
       setQueryLoading(false);
     }
-  }, [connectionString, fetchTableData]);
+  }, [unifiedBase, connectionString, fetchTableData]);
 
   const updateCell = useCallback(async (pkColumn: string, pkValue: unknown, column: string, value: unknown) => {
-    if (!connectionString || !selectedTable) return;
+    if (!selectedTable) return;
     try {
-      await api.post(`${BASE}/cell`, {
-        connectionString, table: selectedTable, schema: selectedSchema,
-        pkColumn, pkValue, column, value,
-      });
+      if (unifiedBase) {
+        await api.put(`${unifiedBase}/cell`, { table: selectedTable, schema: selectedSchema, pkColumn, pkValue, column, value });
+      } else {
+        if (!connectionString) return;
+        await api.post(`${BASE}/cell`, { connectionString, table: selectedTable, schema: selectedSchema, pkColumn, pkValue, column, value });
+      }
       fetchTableData();
     } catch (e) {
       setError((e as Error).message);
     }
-  }, [connectionString, selectedTable, selectedSchema, fetchTableData]);
+  }, [unifiedBase, connectionString, selectedTable, selectedSchema, fetchTableData]);
 
   return {
     connectionString, connected, connect,

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

@@ -13,8 +13,24 @@ interface SqliteViewerProps {
 export function SqliteViewer({ metadata }: SqliteViewerProps) {
   const filePath = metadata?.filePath as string | undefined;
   const projectName = metadata?.projectName as string | undefined;
+  const connectionId = metadata?.connectionId as number | undefined;
+  const initialTable = metadata?.tableName as string | undefined;
   const [queryPanelOpen, setQueryPanelOpen] = useState(false);
 
+  // Connection-based mode: skip file selection requirement
+  if (connectionId) {
+    return (
+      <SqliteViewerInner
+        projectName=""
+        dbPath=""
+        connectionId={connectionId}
+        initialTable={initialTable}
+        queryPanelOpen={queryPanelOpen}
+        onToggleQueryPanel={() => setQueryPanelOpen((v) => !v)}
+      />
+    );
+  }
+
   if (!filePath || !projectName) {
     return (
       <div className="flex items-center justify-center h-full text-text-secondary text-sm">
@@ -34,11 +50,19 @@ export function SqliteViewer({ metadata }: SqliteViewerProps) {
 }
 
 function SqliteViewerInner({
-  projectName, dbPath, queryPanelOpen, onToggleQueryPanel,
+  projectName, dbPath, connectionId, initialTable, queryPanelOpen, onToggleQueryPanel,
 }: {
-  projectName: string; dbPath: string; queryPanelOpen: boolean; onToggleQueryPanel: () => void;
+  projectName: string; dbPath: string; connectionId?: number; initialTable?: string;
+  queryPanelOpen: boolean; onToggleQueryPanel: () => void;
 }) {
-  const sqlite = useSqlite(projectName, dbPath);
+  const sqlite = useSqlite(projectName, dbPath, connectionId);
+
+  // Jump to initial table from sidebar click
+  const [didInit, setDidInit] = useState(false);
+  if (initialTable && !didInit && sqlite.tables.length > 0 && sqlite.selectedTable !== initialTable) {
+    setDidInit(true);
+    sqlite.selectTable(initialTable);
+  }
 
   if (sqlite.error && sqlite.tables.length === 0) {
     return (

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

@@ -6,7 +6,7 @@ export interface ColumnInfo { cid: number; name: string; type: string; notnull:
 export interface QueryResult { columns: string[]; rows: Record<string, unknown>[]; rowsAffected: number; changeType: "select" | "modify" }
 interface TableData { columns: string[]; rows: Record<string, unknown>[]; total: number; page: number; limit: number }
 
-export function useSqlite(projectName: string, dbPath: string) {
+export function useSqlite(projectName: string, dbPath: string, connectionId?: number) {
   const [tables, setTables] = useState<TableInfo[]>([]);
   const [selectedTable, setSelectedTable] = useState<string | null>(null);
   const [tableData, setTableData] = useState<TableData | null>(null);
@@ -18,15 +18,18 @@ export function useSqlite(projectName: string, dbPath: string) {
   const [queryError, setQueryError] = useState<string | null>(null);
   const [queryLoading, setQueryLoading] = useState(false);
 
-  const base = `${projectUrl(projectName)}/sqlite`;
-  const qs = `path=${encodeURIComponent(dbPath)}`;
+  // When connectionId present, use unified API; otherwise use project-scoped API
+  const unifiedBase = connectionId ? `/api/db/connections/${connectionId}` : null;
+  const base = unifiedBase ?? `${projectUrl(projectName)}/sqlite`;
+  const qs = unifiedBase ? "" : `path=${encodeURIComponent(dbPath)}`;
 
   // Fetch tables on mount
   const fetchTables = useCallback(async () => {
     setLoading(true);
     setError(null);
     try {
-      const data = await api.get<TableInfo[]>(`${base}/tables?${qs}`);
+      const qsPart = qs ? `?${qs}` : "";
+      const data = await api.get<TableInfo[]>(`${base}/tables${qsPart}`);
       setTables(data);
       if (data.length > 0 && !selectedTable) setSelectedTable(data[0]!.name);
     } catch (e) {
@@ -43,9 +46,10 @@ export function useSqlite(projectName: string, dbPath: string) {
     if (!selectedTable) return;
     setLoading(true);
     try {
+      const qsPrefix = qs ? `${qs}&` : "";
       const [data, cols] = await Promise.all([
-        api.get<TableData>(`${base}/data?${qs}&table=${encodeURIComponent(selectedTable)}&page=${page}&limit=100`),
-        api.get<ColumnInfo[]>(`${base}/schema?${qs}&table=${encodeURIComponent(selectedTable)}`),
+        api.get<TableData>(`${base}/data?${qsPrefix}table=${encodeURIComponent(selectedTable)}&page=${page}&limit=100`),
+        api.get<ColumnInfo[]>(`${base}/schema?${qsPrefix}table=${encodeURIComponent(selectedTable)}`),
       ]);
       setTableData(data);
       setSchema(cols);
@@ -68,25 +72,30 @@ export function useSqlite(projectName: string, dbPath: string) {
     setQueryLoading(true);
     setQueryError(null);
     try {
-      const result = await api.post<QueryResult>(`${base}/query`, { path: dbPath, sql });
+      const body = unifiedBase ? { sql } : { path: dbPath, sql };
+      const result = await api.post<QueryResult>(`${base}/query`, body);
       setQueryResult(result);
-      if (result.changeType === "modify") fetchTableData(); // Refresh table after modification
+      if (result.changeType === "modify") fetchTableData();
     } catch (e) {
       setQueryError((e as Error).message);
     } finally {
       setQueryLoading(false);
     }
-  }, [base, dbPath, fetchTableData]);
+  }, [base, unifiedBase, dbPath, fetchTableData]);
 
   const updateCell = useCallback(async (rowid: number, column: string, value: unknown) => {
     if (!selectedTable) return;
     try {
-      await api.put(`${base}/cell`, { path: dbPath, table: selectedTable, rowid, column, value });
-      fetchTableData(); // Refresh
+      if (unifiedBase) {
+        await api.put(`${base}/cell`, { table: selectedTable, pkColumn: "rowid", pkValue: rowid, column, value });
+      } else {
+        await api.put(`${base}/cell`, { path: dbPath, table: selectedTable, rowid, column, value });
+      }
+      fetchTableData();
     } catch (e) {
       setError((e as Error).message);
     }
-  }, [base, dbPath, selectedTable, fetchTableData]);
+  }, [base, unifiedBase, dbPath, selectedTable, fetchTableData]);
 
   return {
     tables, selectedTable, selectTable, tableData, schema,

package/src/web/lib/api-client.ts

@@ -1,4 +1,5 @@
 const TOKEN_KEY = "ppm-auth-token";
+const RELOAD_GUARD_KEY = "ppm-auth-reload-ts";
 
 class ApiClient {
   private baseUrl: string;
@@ -65,7 +66,12 @@ class ApiClient {
   private async handleResponse<T>(res: Response): Promise<T> {
     if (res.status === 401) {
       localStorage.removeItem(TOKEN_KEY);
-      window.location.reload();
+      // Guard against infinite reload loops: skip reload if we already reloaded within 3s
+      const lastReload = Number(sessionStorage.getItem(RELOAD_GUARD_KEY) || "0");
+      if (Date.now() - lastReload > 3000) {
+        sessionStorage.setItem(RELOAD_GUARD_KEY, String(Date.now()));
+        window.location.reload();
+      }
       throw new Error("Unauthorized");
     }