@hienlh/ppm 0.6.4 → 0.6.5

package/src/web/components/chat/tool-cards.tsx

@@ -134,12 +134,12 @@ function ToolSummary({ name, input }: { name: string; input: Record<string, unkn
     case "Task":
       return <><Bot className="size-3 inline" /> {name} <span className="text-text-subtle">{truncate(s(input.description || input.prompt), 60)}</span></>;
     case "TodoWrite": {
-      const todos = (input.todos as Array<{ content: string; status: string }>) ?? [];
+      const todos = Array.isArray(input.todos) ? input.todos as Array<{ content: string; status: string }> : [];
       const done = todos.filter((t) => t.status === "completed").length;
       return <><ListTodo className="size-3 inline" /> {name} <span className="text-text-subtle">{done}/{todos.length} done</span></>;
     }
     case "AskUserQuestion": {
-      const qs = (input.questions as Array<{ question: string }>) ?? [];
+      const qs = Array.isArray(input.questions) ? input.questions as Array<{ question: string }> : [];
       const hasAns = !!(input.answers);
       return <>{name} <span className="text-text-subtle">{qs.length} question{qs.length !== 1 ? "s" : ""}{hasAns ? " ✓" : ""}</span></>;
     }

package/src/web/components/database/connection-list.tsx

@@ -1,12 +1,11 @@
-import { useState } from "react";
-import { ChevronRight, ChevronDown, Database, RefreshCw, Pencil, Trash2, Lock } from "lucide-react";
+import { useState, useMemo } from "react";
+import { ChevronRight, ChevronDown, Database, RefreshCw, Pencil, Trash2, Lock, Search } from "lucide-react";
 import { cn } from "@/lib/utils";
 import type { Connection, CachedTable } from "./use-connections";
 
 interface ConnectionListProps {
   connections: Connection[];
   cachedTables: Map<number, CachedTable[]>;
-  onOpenConnection: (conn: Connection) => void;
   onOpenTable: (conn: Connection, tableName: string, schemaName: string) => void;
   onRefreshTables: (id: number) => Promise<void>;
   onEdit: (conn: Connection) => void;
@@ -17,16 +16,14 @@ interface GroupMap {
   [group: string]: Connection[];
 }
 
-const MAX_VISIBLE_TABLES = 10;
-
 export function ConnectionList({
   connections, cachedTables,
-  onOpenConnection, onOpenTable, onRefreshTables, onEdit, onDelete,
+  onOpenTable, onRefreshTables, onEdit, onDelete,
 }: ConnectionListProps) {
   const [expandedConns, setExpandedConns] = useState<Set<number>>(new Set());
   const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set(["__ungrouped__"]));
   const [refreshingIds, setRefreshingIds] = useState<Set<number>>(new Set());
-  const [showAllTables, setShowAllTables] = useState<Set<number>>(new Set());
+  const [tableFilter, setTableFilter] = useState<Map<number, string>>(new Map());
 
   const toggleConn = (id: number) => {
     setExpandedConns((prev) => {
@@ -78,10 +75,12 @@ export function ConnectionList({
         const label = group === "__ungrouped__" ? "Ungrouped" : group;
         const groupConns = groups[group]!;
 
+        const hasGroup = groupKeys.length > 1 || group !== "__ungrouped__";
+
         return (
           <div key={group}>
             {/* Group header (only shown when there are multiple groups or named group) */}
-            {(groupKeys.length > 1 || group !== "__ungrouped__") && (
+            {hasGroup && (
               <button
                 onClick={() => toggleGroup(group)}
                 className="w-full flex items-center gap-1 px-2 py-1 text-[10px] font-semibold text-text-subtle uppercase tracking-wider hover:text-text-secondary transition-colors"
@@ -91,17 +90,18 @@ export function ConnectionList({
               </button>
             )}
 
-            {isGroupExpanded && groupConns.map((conn) => {
+            {/* Connections — indented with tree guide line when inside a group */}
+            {isGroupExpanded && (
+              <div className={hasGroup ? "ml-[11px] border-l border-dashed border-border" : ""}>
+                {groupConns.map((conn) => {
               const isExpanded = expandedConns.has(conn.id);
               const tables = cachedTables.get(conn.id) ?? [];
               const isRefreshing = refreshingIds.has(conn.id);
-              const showAll = showAllTables.has(conn.id);
-              const visibleTables = showAll ? tables : tables.slice(0, MAX_VISIBLE_TABLES);
 
               return (
                 <div key={conn.id}>
                   {/* Connection row */}
-                  <div className="group flex items-center gap-1 px-2 py-1 hover:bg-surface-elevated transition-colors">
+                  <div className={cn("group flex items-center gap-1 py-1 hover:bg-surface-elevated transition-colors", hasGroup ? "pl-3 pr-2" : "px-2")}>
                     {/* Expand arrow */}
                     <button
                       onClick={() => {
@@ -121,10 +121,15 @@ export function ConnectionList({
                       style={{ backgroundColor: conn.color ?? "transparent" }}
                     />
 
-                    {/* Name — click opens connection viewer */}
+                    {/* Name — click toggles expand */}
                     <button
                       className="flex-1 text-left text-xs truncate hover:text-primary transition-colors"
-                      onClick={() => onOpenConnection(conn)}
+                      onClick={() => {
+                        toggleConn(conn.id);
+                        if (!expandedConns.has(conn.id) && tables.length === 0) {
+                          handleRefresh(conn.id);
+                        }
+                      }}
                     >
                       {conn.name}
                     </button>
@@ -168,41 +173,85 @@ export function ConnectionList({
                     </div>
                   </div>
 
-                  {/* Table list (expanded) */}
+                  {/* Table list (expanded) with tree guide line */}
                   {isExpanded && (
-                    <div className="pl-6">
+                    <div className="ml-[11px] border-l border-dashed border-border pl-3">
                       {isRefreshing && tables.length === 0 && (
                         <p className="text-[10px] text-text-subtle px-2 py-1">Loading…</p>
                       )}
                       {!isRefreshing && tables.length === 0 && (
                         <p className="text-[10px] text-text-subtle px-2 py-1">No tables cached</p>
                       )}
-                      {visibleTables.map((t) => (
-                        <button
-                          key={`${t.schemaName}.${t.tableName}`}
-                          onClick={() => onOpenTable(conn, t.tableName, t.schemaName)}
-                          className="w-full flex items-center gap-1.5 px-2 py-0.5 text-[11px] text-text-secondary hover:text-foreground hover:bg-surface-elevated transition-colors text-left truncate"
-                        >
-                          <Database className="size-2.5 shrink-0 text-text-subtle" />
-                          <span className="truncate">{t.tableName}</span>
-                        </button>
-                      ))}
-                      {tables.length > MAX_VISIBLE_TABLES && !showAll && (
-                        <button
-                          onClick={() => setShowAllTables((p) => new Set(p).add(conn.id))}
-                          className="w-full text-left px-2 py-0.5 text-[10px] text-text-subtle hover:text-text-secondary transition-colors"
-                        >
-                          +{tables.length - MAX_VISIBLE_TABLES} more…
-                        </button>
+                      {tables.length > 0 && (
+                        <TableListWithFilter
+                          connId={conn.id}
+                          tables={tables}
+                          filter={tableFilter.get(conn.id) ?? ""}
+                          onFilterChange={(v) => setTableFilter((prev) => new Map(prev).set(conn.id, v))}
+                          onOpenTable={(tableName, schemaName) => onOpenTable(conn, tableName, schemaName)}
+                        />
                       )}
                     </div>
                   )}
                 </div>
               );
             })}
+              </div>
+            )}
           </div>
         );
       })}
     </div>
   );
 }
+
+/* ---------- Table list with filter ---------- */
+const MAX_TABLE_HEIGHT = 200; // px
+
+function TableListWithFilter({ connId, tables, filter, onFilterChange, onOpenTable }: {
+  connId: number;
+  tables: CachedTable[];
+  filter: string;
+  onFilterChange: (v: string) => void;
+  onOpenTable: (tableName: string, schemaName: string) => void;
+}) {
+  const filtered = useMemo(() => {
+    if (!filter) return tables;
+    const q = filter.toLowerCase();
+    return tables.filter((t) => t.tableName.toLowerCase().includes(q));
+  }, [tables, filter]);
+
+  return (
+    <div>
+      {/* Filter input — show when many tables */}
+      {tables.length > 5 && (
+        <div className="flex items-center gap-1 px-1 py-0.5">
+          <Search className="size-2.5 text-text-subtle shrink-0" />
+          <input
+            type="text"
+            value={filter}
+            onChange={(e) => onFilterChange(e.target.value)}
+            placeholder="Filter tables…"
+            className="w-full text-[10px] bg-transparent border-none outline-none text-foreground placeholder:text-text-subtle"
+          />
+        </div>
+      )}
+      {/* Scrollable table list */}
+      <div className="overflow-y-auto" style={{ maxHeight: MAX_TABLE_HEIGHT }}>
+        {filtered.map((t) => (
+          <button
+            key={`${connId}-${t.schemaName}.${t.tableName}`}
+            onClick={() => onOpenTable(t.tableName, t.schemaName)}
+            className="w-full flex items-center gap-1.5 px-2 py-0.5 text-[11px] text-text-secondary hover:text-foreground hover:bg-surface-elevated transition-colors text-left truncate"
+          >
+            <Database className="size-2.5 shrink-0 text-text-subtle" />
+            <span className="truncate">{t.tableName}</span>
+          </button>
+        ))}
+        {filter && filtered.length === 0 && (
+          <p className="text-[10px] text-text-subtle px-2 py-1">No match</p>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -11,23 +11,13 @@ export function DatabaseSidebar() {
   const [addOpen, setAddOpen] = useState(false);
   const [editConn, setEditConn] = useState<Connection | null>(null);
 
-  const handleOpenConnection = (conn: Connection) => {
-    openTab({
-      type: conn.type === "postgres" ? "postgres" : "sqlite",
-      title: conn.name,
-      projectId: null,
-      closable: true,
-      metadata: { connectionId: conn.id, connectionColor: conn.color },
-    });
-  };
-
   const handleOpenTable = (conn: Connection, tableName: string, schemaName: string) => {
     openTab({
-      type: conn.type === "postgres" ? "postgres" : "sqlite",
+      type: "database",
       title: `${conn.name} · ${tableName}`,
       projectId: null,
       closable: true,
-      metadata: { connectionId: conn.id, tableName, schemaName, connectionColor: conn.color },
+      metadata: { connectionId: conn.id, connectionName: conn.name, dbType: conn.type, tableName, schemaName, connectionColor: conn.color },
     });
   };
 
@@ -68,7 +58,6 @@ export function DatabaseSidebar() {
           <ConnectionList
             connections={connections}
             cachedTables={cachedTables}
-            onOpenConnection={handleOpenConnection}
             onOpenTable={handleOpenTable}
             onRefreshTables={refreshTables}
             onEdit={setEditConn}

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

@@ -1,4 +1,5 @@
 import { useState, useEffect, useCallback } from "react";
+import { api } from "../../lib/api-client";
 
 export interface Connection {
   id: number;
@@ -36,13 +37,6 @@ export interface UpdateConnectionData {
   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);
@@ -50,7 +44,7 @@ export function useConnections() {
 
   const fetchConnections = useCallback(async () => {
     try {
-      const data = await apiFetch<Connection[]>("/api/db/connections");
+      const data = await api.get<Connection[]>("/api/db/connections");
       setConnections(data);
     } catch {
       // ignore — server may not be ready
@@ -62,36 +56,35 @@ export function useConnections() {
   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),
-    });
+    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 apiFetch<Connection>(`/api/db/connections/${id}`, {
-      method: "PUT",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(data),
-    });
+    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 apiFetch(`/api/db/connections/${id}`, { method: "DELETE" });
+    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 apiFetch(`/api/db/connections/${id}/test`, { method: "POST" });
+    return api.post(`/api/db/connections/${id}/test`);
   }, []);
 
   const refreshTables = useCallback(async (id: number): Promise<void> => {
-    const tables = await apiFetch<CachedTable[]>(`/api/db/connections/${id}/tables`);
+    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));
   }, []);
 

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,
+  };
+}