@hienlh/ppm 0.6.3 → 0.6.5

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/editor-panel.tsx

@@ -17,6 +17,7 @@ const TAB_COMPONENTS: Record<TabType, React.LazyExoticComponent<React.ComponentT
   terminal: lazy(() => import("@/components/terminal/terminal-tab").then((m) => ({ default: m.TerminalTab }))),
   chat: lazy(() => import("@/components/chat/chat-tab").then((m) => ({ default: m.ChatTab }))),
   editor: lazy(() => import("@/components/editor/code-editor").then((m) => ({ default: m.CodeEditor }))),
+  database: lazy(() => import("@/components/database/database-viewer").then((m) => ({ default: m.DatabaseViewer }))),
   sqlite: lazy(() => import("@/components/sqlite/sqlite-viewer").then((m) => ({ default: m.SqliteViewer }))),
   postgres: lazy(() => import("@/components/postgres/postgres-viewer").then((m) => ({ default: m.PostgresViewer }))),
   "git-graph": lazy(() => import("@/components/git/git-graph").then((m) => ({ default: m.GitGraph }))),

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/mobile-nav.tsx

@@ -21,7 +21,7 @@ const NEW_TAB_OPTIONS: { type: TabType; label: string }[] = [
 const NEW_TAB_LABELS: Partial<Record<TabType, string>> = Object.fromEntries(NEW_TAB_OPTIONS.map((o) => [o.type, o.label]));
 
 const TAB_ICONS: Record<TabType, React.ElementType> = {
-  terminal: Terminal, chat: MessageSquare, editor: FileCode, sqlite: Database, postgres: Database,
+  terminal: Terminal, chat: MessageSquare, editor: FileCode, database: Database, sqlite: Database, postgres: Database,
   "git-graph": GitBranch, "git-diff": FileDiff, settings: Settings,
 };
 

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 },
 ];
 
@@ -95,8 +97,7 @@ export function Sidebar() {
                   : "border-transparent text-text-secondary hover:text-foreground",
               )}
             >
-              <Icon className="size-3.5" />
-              {sidebarWidth >= 240 && <span>{tab.label}</span>}
+              <Icon className="size-3.5" title={tab.label} />
             </button>
           );
         })}
@@ -123,6 +124,9 @@ export function Sidebar() {
         {sidebarActiveTab === "git" && (
           <GitStatusPanel metadata={{ projectName: activeProject?.name }} />
         )}
+        {sidebarActiveTab === "database" && (
+          <DatabaseSidebar />
+        )}
         {sidebarActiveTab === "settings" && (
           <SettingsTab />
         )}

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

@@ -22,6 +22,7 @@ const TAB_ICONS: Record<TabType, React.ElementType> = {
   terminal: Terminal,
   chat: MessageSquare,
   editor: FileCode,
+  database: Database,
   sqlite: Database,
   postgres: Database,
   "git-graph": GitBranch,

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

@@ -18,6 +18,11 @@ const TAB_COMPONENTS: Record<TabType, React.LazyExoticComponent<React.ComponentT
       default: m.CodeEditor,
     })),
   ),
+  database: lazy(() =>
+    import("@/components/database/database-viewer").then((m) => ({
+      default: m.DatabaseViewer,
+    })),
+  ),
   sqlite: lazy(() =>
     import("@/components/sqlite/sqlite-viewer").then((m) => ({
       default: m.SqliteViewer,

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

@@ -1,4 +1,4 @@
-import { useState, useCallback, useMemo } from "react";
+import { useState, useCallback, useMemo, useEffect, useRef } from "react";
 import { Database, Loader2, AlertCircle, Play, ChevronLeft, ChevronRight, Table, RefreshCw } from "lucide-react";
 import { useReactTable, getCoreRowModel, flexRender, type ColumnDef } from "@tanstack/react-table";
 import CodeMirror from "@uiw/react-codemirror";
@@ -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} hideTableList={!!connectionId} connectionName={metadata?.connectionName as string | undefined} />;
 }
 
 /* ---------- Connection Form ---------- */
@@ -42,38 +44,53 @@ function ConnectionForm({ initialValue, onConnect, loading, error }: {
 }
 
 /* ---------- Connected View ---------- */
-function ConnectedView({ pg }: { pg: ReturnType<typeof usePostgres> }) {
+function ConnectedView({ pg, initialTable, hideTableList, connectionName }: { pg: ReturnType<typeof usePostgres>; initialTable?: string; hideTableList?: boolean; connectionName?: string }) {
   const [queryPanelOpen, setQueryPanelOpen] = useState(false);
 
+  // Jump to initial table — when hideTableList, go direct (skip table list fetch)
+  const didInit = useRef(false);
+  useEffect(() => {
+    if (!initialTable || didInit.current) return;
+    if (hideTableList && pg.connected) {
+      didInit.current = true;
+      pg.selectTable(initialTable);
+    } else if (pg.tables.length > 0) {
+      const t = pg.tables.find((t) => t.name === initialTable);
+      if (t) { didInit.current = true; pg.selectTable(t.name, t.schema); }
+    }
+  }, [initialTable, pg.connected, pg.tables]); // eslint-disable-line react-hooks/exhaustive-deps
+
   return (
     <div className="flex h-full w-full overflow-hidden">
-      {/* Table sidebar */}
-      <div className="w-48 shrink-0 flex flex-col bg-background overflow-hidden">
-        <div className="flex items-center justify-between px-3 py-2 border-b border-border">
-          <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Tables</span>
-          <button type="button" onClick={pg.refreshTables} className="text-muted-foreground hover:text-foreground transition-colors" title="Refresh">
-            <RefreshCw className="size-3" />
-          </button>
-        </div>
-        <div className="flex-1 overflow-y-auto">
-          {pg.tables.map((t) => (
-            <button key={`${t.schema}.${t.name}`} type="button" onClick={() => pg.selectTable(t.name, t.schema)}
-              className={`w-full flex items-center gap-2 px-3 py-1.5 text-left text-xs transition-colors ${
-                pg.selectedTable === t.name ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50 hover:text-foreground"}`}>
-              <Table className="size-3 shrink-0" />
-              <span className="truncate flex-1">{t.schema !== "public" ? `${t.schema}.` : ""}{t.name}</span>
-              <span className="text-[10px] opacity-60">{t.rowCount}</span>
+      {/* Table sidebar — hidden when opened from database sidebar */}
+      {!hideTableList && (
+        <div className="w-48 shrink-0 flex flex-col bg-background overflow-hidden">
+          <div className="flex items-center justify-between px-3 py-2 border-b border-border">
+            <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Tables</span>
+            <button type="button" onClick={pg.refreshTables} className="text-muted-foreground hover:text-foreground transition-colors" title="Refresh">
+              <RefreshCw className="size-3" />
             </button>
-          ))}
-          {pg.tables.length === 0 && <p className="px-3 py-4 text-xs text-muted-foreground text-center">No tables found</p>}
+          </div>
+          <div className="flex-1 overflow-y-auto">
+            {pg.tables.map((t) => (
+              <button key={`${t.schema}.${t.name}`} type="button" onClick={() => pg.selectTable(t.name, t.schema)}
+                className={`w-full flex items-center gap-2 px-3 py-1.5 text-left text-xs transition-colors ${
+                  pg.selectedTable === t.name ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50 hover:text-foreground"}`}>
+                <Table className="size-3 shrink-0" />
+                <span className="truncate flex-1">{t.schema !== "public" ? `${t.schema}.` : ""}{t.name}</span>
+                <span className="text-[10px] opacity-60">{t.rowCount}</span>
+              </button>
+            ))}
+            {pg.tables.length === 0 && <p className="px-3 py-4 text-xs text-muted-foreground text-center">No tables found</p>}
+          </div>
         </div>
-      </div>
+      )}
 
       {/* Main area */}
-      <div className="flex-1 flex flex-col overflow-hidden border-l border-border">
+      <div className={`flex-1 flex flex-col overflow-hidden ${!hideTableList ? "border-l border-border" : ""}`}>
         <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">PostgreSQL</span>
+          <span className="text-xs text-muted-foreground truncate">{connectionName ?? "PostgreSQL"}</span>
           {pg.selectedTable && <span className="text-xs text-muted-foreground">/ {pg.selectedTable}</span>}
           <div className="ml-auto">
             <button type="button" onClick={() => setQueryPanelOpen((v) => !v)}

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,16 @@ export function usePostgres() {
   }, []);
 
   const fetchTables = useCallback(async () => {
+    if (unifiedBase) {
+      setLoading(true);
+      try {
+        // Use cached tables (no live DB query) — sidebar handles sync
+        const data = await api.get<PgTableInfo[]>(`${unifiedBase}/tables?cached=1`);
+        setTables(data);
+      } catch (e) { setError((e as Error).message); }
+      finally { setLoading(false); }
+      return;
+    }
     if (!connectionString) return;
     setLoading(true);
     try {
@@ -56,26 +67,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 +120,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 +134,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/settings/ai-settings-section.tsx

@@ -20,7 +20,6 @@ const EFFORT_OPTIONS = [
   { value: "low", label: "Low" },
   { value: "medium", label: "Medium" },
   { value: "high", label: "High" },
-  { value: "max", label: "Max" },
 ];
 
 export function AISettingsSection({ compact }: { compact?: boolean } = {}) {

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

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect, useRef } from "react";
 import { Database, Loader2, AlertCircle } from "lucide-react";
 import { useSqlite } from "./use-sqlite";
 import { SqliteTableList } from "./sqlite-table-list";
@@ -13,8 +13,26 @@ 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}
+        connectionName={metadata?.connectionName as string | undefined}
+        initialTable={initialTable}
+        queryPanelOpen={queryPanelOpen}
+        onToggleQueryPanel={() => setQueryPanelOpen((v) => !v)}
+        hideTableList
+      />
+    );
+  }
+
   if (!filePath || !projectName) {
     return (
       <div className="flex items-center justify-center h-full text-text-secondary text-sm">
@@ -34,11 +52,21 @@ export function SqliteViewer({ metadata }: SqliteViewerProps) {
 }
 
 function SqliteViewerInner({
-  projectName, dbPath, queryPanelOpen, onToggleQueryPanel,
+  projectName, dbPath, connectionId, connectionName, initialTable, queryPanelOpen, onToggleQueryPanel, hideTableList,
 }: {
-  projectName: string; dbPath: string; queryPanelOpen: boolean; onToggleQueryPanel: () => void;
+  projectName: string; dbPath: string; connectionId?: number; connectionName?: string; initialTable?: string;
+  queryPanelOpen: boolean; onToggleQueryPanel: () => void; hideTableList?: boolean;
 }) {
-  const sqlite = useSqlite(projectName, dbPath);
+  const sqlite = useSqlite(projectName, dbPath, connectionId);
+
+  // Jump to initial table from sidebar click
+  const didInit = useRef(false);
+  useEffect(() => {
+    if (initialTable && !didInit.current && sqlite.tables.length > 0) {
+      didInit.current = true;
+      sqlite.selectTable(initialTable);
+    }
+  }, [initialTable, sqlite.tables]); // eslint-disable-line react-hooks/exhaustive-deps
 
   if (sqlite.error && sqlite.tables.length === 0) {
     return (
@@ -60,20 +88,22 @@ function SqliteViewerInner({
 
   return (
     <div className="flex h-full w-full overflow-hidden">
-      {/* Left sidebar — table list */}
-      <SqliteTableList
-        tables={sqlite.tables}
-        selectedTable={sqlite.selectedTable}
-        onSelect={sqlite.selectTable}
-        onRefresh={sqlite.refreshTables}
-      />
+      {/* Left sidebar — table list (hidden when opened from database sidebar) */}
+      {!hideTableList && (
+        <SqliteTableList
+          tables={sqlite.tables}
+          selectedTable={sqlite.selectedTable}
+          onSelect={sqlite.selectTable}
+          onRefresh={sqlite.refreshTables}
+        />
+      )}
 
       {/* Main content area */}
-      <div className="flex-1 flex flex-col overflow-hidden border-l border-border">
+      <div className={`flex-1 flex flex-col overflow-hidden ${!hideTableList ? "border-l border-border" : ""}`}>
         {/* 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">{dbPath}</span>
+          <span className="text-xs text-muted-foreground truncate">{connectionName ?? dbPath}</span>
           <span className="text-xs text-muted-foreground">
             {sqlite.selectedTable && `/ ${sqlite.selectedTable}`}
           </span>

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,23 +18,26 @@ 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
+  // Fetch tables on mount — use cache when connectionId (sidebar handles live sync)
   const fetchTables = useCallback(async () => {
     setLoading(true);
     setError(null);
     try {
-      const data = await api.get<TableInfo[]>(`${base}/tables?${qs}`);
+      const qsPart = unifiedBase ? "?cached=1" : qs ? `?${qs}` : "";
+      const data = await api.get<TableInfo[]>(`${base}/tables${qsPart}`);
       setTables(data);
-      if (data.length > 0 && !selectedTable) setSelectedTable(data[0]!.name);
+      if (!unifiedBase && data.length > 0 && !selectedTable) setSelectedTable(data[0]!.name);
     } catch (e) {
       setError((e as Error).message);
     } finally {
       setLoading(false);
     }
-  }, [base, qs]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [base, qs, unifiedBase]); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => { fetchTables(); }, [fetchTables]);
 
@@ -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/hooks/use-chat.ts

@@ -33,7 +33,7 @@ interface UseChatReturn {
   isConnected: boolean;
 }
 
-export function useChat(sessionId: string | null, providerId = "claude-sdk", projectName = ""): UseChatReturn {
+export function useChat(sessionId: string | null, providerId = "claude", projectName = ""): UseChatReturn {
   const [messages, setMessages] = useState<ChatMessage[]>([]);
   const [messagesLoading, setMessagesLoading] = useState(false);
   const [isStreaming, setIsStreaming] = useState(false);

package/src/web/hooks/use-usage.ts

@@ -12,7 +12,7 @@ interface UseUsageReturn {
   refreshUsage: () => void;
 }
 
-export function useUsage(projectName: string, providerId = "claude-sdk"): UseUsageReturn {
+export function useUsage(projectName: string, providerId = "claude"): UseUsageReturn {
   const [usageInfo, setUsageInfo] = useState<UsageInfo>({});
   const [usageLoading, setUsageLoading] = useState(false);
   const [lastFetchedAt, setLastFetchedAt] = useState<string | null>(null);

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");
     }