@hienlh/ppm 0.6.4 → 0.6.6

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

@@ -0,0 +1,120 @@
+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(selectedTable ?? undefined, selectedSchema);
+    } catch (e) {
+      setQueryError((e as Error).message);
+    } finally {
+      setQueryLoading(false);
+    }
+  }, [base, selectedTable, selectedSchema, fetchTableData]);
+
+  const updateCell = useCallback(async (pkColumn: string, pkValue: unknown, column: string, value: unknown) => {
+    if (!selectedTable) return;
+    const t = selectedTable;
+    const s = selectedSchema;
+    try {
+      await api.put(`${base}/cell`, { table: t, schema: s, pkColumn, pkValue, column, value });
+      // Re-fetch with explicit args to avoid stale closure
+      fetchTableData(t, s);
+    } 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

@@ -119,9 +119,8 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
     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 ?? []) : []);
+        const data = await api.get<DbSearchResult[]>(`/api/db/search?q=${encodeURIComponent(query.trim())}`);
+        setDbResults(data ?? []);
       } catch { setDbResults([]); }
     }, 300);
     return () => clearTimeout(timer);
@@ -219,11 +218,11 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
     connectionColor: r.connectionColor,
     action: () => {
       openTab({
-        type: r.connectionType === "postgres" ? "postgres" : "sqlite",
+        type: "database",
         title: `${r.connectionName} · ${r.tableName}`,
         projectId: null,
         closable: true,
-        metadata: { connectionId: r.connectionId, tableName: r.tableName, schemaName: r.schemaName, connectionColor: r.connectionColor },
+        metadata: { connectionId: r.connectionId, connectionName: r.connectionName, dbType: r.connectionType, tableName: r.tableName, schemaName: r.schemaName, connectionColor: r.connectionColor },
       });
       onClose();
     },

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-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

@@ -97,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>
           );
         })}

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";
@@ -15,7 +15,7 @@ export function PostgresViewer({ metadata }: Props) {
   // 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} initialTable={metadata?.tableName as string | undefined} />;
+  return <ConnectedView pg={pg} initialTable={metadata?.tableName as string | undefined} hideTableList={!!connectionId} connectionName={metadata?.connectionName as string | undefined} />;
 }
 
 /* ---------- Connection Form ---------- */
@@ -44,45 +44,53 @@ function ConnectionForm({ initialValue, onConnect, loading, error }: {
 }
 
 /* ---------- Connected View ---------- */
-function ConnectedView({ pg, initialTable }: { pg: ReturnType<typeof usePostgres>; initialTable?: string }) {
+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 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); }
-  }
+  // 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

@@ -50,12 +50,9 @@ export function usePostgres(connectionId?: number) {
     if (unifiedBase) {
       setLoading(true);
       try {
-        const data = await api.get<PgTableInfo[]>(`${unifiedBase}/tables`);
+        // Use cached tables (no live DB query) — sidebar handles sync
+        const data = await api.get<PgTableInfo[]>(`${unifiedBase}/tables?cached=1`);
         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;

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";
@@ -24,9 +24,11 @@ export function SqliteViewer({ metadata }: SqliteViewerProps) {
         projectName=""
         dbPath=""
         connectionId={connectionId}
+        connectionName={metadata?.connectionName as string | undefined}
         initialTable={initialTable}
         queryPanelOpen={queryPanelOpen}
         onToggleQueryPanel={() => setQueryPanelOpen((v) => !v)}
+        hideTableList
       />
     );
   }
@@ -50,19 +52,21 @@ export function SqliteViewer({ metadata }: SqliteViewerProps) {
 }
 
 function SqliteViewerInner({
-  projectName, dbPath, connectionId, initialTable, queryPanelOpen, onToggleQueryPanel,
+  projectName, dbPath, connectionId, connectionName, initialTable, queryPanelOpen, onToggleQueryPanel, hideTableList,
 }: {
-  projectName: string; dbPath: string; connectionId?: number; initialTable?: 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, 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);
-  }
+  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 (
@@ -84,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

@@ -23,21 +23,21 @@ export function useSqlite(projectName: string, dbPath: string, connectionId?: nu
   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 qsPart = qs ? `?${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]);
 

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/stores/tab-store.ts

@@ -5,6 +5,7 @@ export type TabType =
   | "terminal"
   | "chat"
   | "editor"
+  | "database"
   | "sqlite"
   | "postgres"
   | "git-graph"