@hienlh/ppm 0.6.2 → 0.6.4

package/src/services/table-cache.service.ts

@@ -0,0 +1,75 @@
+import {
+  getCachedTables, upsertTableCache, deleteTableCache, searchTableCache,
+  getConnectionById, type TableCacheRow,
+} from "./db.service.ts";
+import { getAdapter } from "./database/adapter-registry.ts";
+import type { DbConnectionConfig } from "../types/database.ts";
+
+export interface CachedTable {
+  connectionId: number;
+  tableName: string;
+  schemaName: string;
+  rowCount: number;
+  cachedAt: string;
+}
+
+export interface TableSearchResult {
+  connectionId: number;
+  connectionName: string;
+  connectionType: string;
+  connectionColor: string | null;
+  tableName: string;
+  schemaName: string;
+}
+
+function rowToTable(r: TableCacheRow): CachedTable {
+  return {
+    connectionId: r.connection_id,
+    tableName: r.table_name,
+    schemaName: r.schema_name,
+    rowCount: r.row_count,
+    cachedAt: r.cached_at,
+  };
+}
+
+/** Get cached tables for a connection (no live fetch) */
+export function getTablesFromCache(connectionId: number): CachedTable[] {
+  return getCachedTables(connectionId).map(rowToTable);
+}
+
+/** Fetch live tables via adapter, update cache, return result */
+export async function syncTables(connectionId: number): Promise<CachedTable[]> {
+  const conn = getConnectionById(connectionId);
+  if (!conn) throw new Error(`Connection not found: ${connectionId}`);
+
+  const config = JSON.parse(conn.connection_config) as DbConnectionConfig;
+  const adapter = getAdapter(conn.type);
+  const tables = await adapter.getTables(config);
+
+  // Delete stale cache entries, then upsert fresh ones
+  deleteTableCache(connectionId);
+  for (const t of tables) {
+    upsertTableCache(connectionId, t.name, t.schema || "main", t.rowCount);
+  }
+
+  return tables.map((t) => ({
+    connectionId,
+    tableName: t.name,
+    schemaName: t.schema || "main",
+    rowCount: t.rowCount,
+    cachedAt: new Date().toISOString(),
+  }));
+}
+
+/** Search cached tables across all connections (for command palette) */
+export function searchTables(query: string): TableSearchResult[] {
+  if (!query || query.length < 2) return [];
+  return searchTableCache(query).map((r) => ({
+    connectionId: r.connection_id,
+    connectionName: r.connection_name,
+    connectionType: r.connection_type,
+    connectionColor: r.connection_color,
+    tableName: r.table_name,
+    schemaName: r.schema_name,
+  }));
+}

package/src/types/database.ts

@@ -0,0 +1,50 @@
+export type DbType = "sqlite" | "postgres";
+
+export interface DbConnectionConfig {
+  type: DbType;
+  path?: string;             // sqlite
+  connectionString?: string; // postgres
+  [key: string]: unknown;
+}
+
+export interface DbTableInfo {
+  name: string;
+  schema: string; // "main" for sqlite, actual schema for postgres
+  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";
+}
+
+export interface DbPagedData {
+  columns: string[];
+  rows: Record<string, unknown>[];
+  total: number;
+  page: number;
+  limit: number;
+}
+
+export interface DatabaseAdapter {
+  testConnection(config: DbConnectionConfig): Promise<{ ok: boolean; error?: string }>;
+  getTables(config: DbConnectionConfig): Promise<DbTableInfo[]>;
+  getTableSchema(config: DbConnectionConfig, table: string, schema?: string): Promise<DbColumnInfo[]>;
+  getTableData(config: DbConnectionConfig, table: string, opts: {
+    schema?: string; page?: number; limit?: number; orderBy?: string; orderDir?: "ASC" | "DESC";
+  }): Promise<DbPagedData>;
+  executeQuery(config: DbConnectionConfig, sql: string): Promise<DbQueryResult>;
+  updateCell(config: DbConnectionConfig, table: string, opts: {
+    schema?: string; pkColumn: string; pkValue: unknown; column: string; value: unknown;
+  }): Promise<void>;
+}

package/src/web/app.tsx

@@ -59,7 +59,9 @@ export function App() {
   }, [theme]);
 
   // Fetch server info on mount (before auth — shown on login screen)
-  useEffect(() => { fetchServerInfo(); }, [fetchServerInfo]);
+  useEffect(() => {
+    fetchServerInfo();
+  }, [fetchServerInfo]);
 
   // Auth check on mount
   useEffect(() => {
@@ -97,6 +99,14 @@ export function App() {
   // Health check — detects server crash/restart
   useHealthCheck();
 
+  // Load keybindings after auth confirmed (must not call ApiClient before auth)
+  useEffect(() => {
+    if (authState !== "authenticated") return;
+    import("@/stores/keybindings-store").then(({ useKeybindingsStore }) => {
+      useKeybindingsStore.getState().loadFromServer();
+    });
+  }, [authState]);
+
   // Fetch projects after auth, then restore from URL if applicable
   useEffect(() => {
     if (authState !== "authenticated") return;

package/src/web/components/database/connection-color-picker.tsx

@@ -0,0 +1,67 @@
+import { cn } from "@/lib/utils";
+
+const COLOR_PRESETS = [
+  "#ef4444", "#f97316", "#eab308", "#22c55e",
+  "#06b6d4", "#3b82f6", "#8b5cf6", "#ec4899",
+  "#6b7280", "#000000",
+];
+
+interface ConnectionColorPickerProps {
+  value: string | null;
+  onChange: (color: string | null) => void;
+}
+
+export function ConnectionColorPicker({ value, onChange }: ConnectionColorPickerProps) {
+  return (
+    <div className="space-y-2">
+      <div className="flex flex-wrap gap-1.5">
+        {/* No color option */}
+        <button
+          type="button"
+          onClick={() => onChange(null)}
+          className={cn(
+            "size-6 rounded-full border-2 transition-all",
+            !value ? "border-primary scale-110" : "border-border hover:scale-105",
+            "bg-transparent relative",
+          )}
+          title="No color"
+        >
+          <span className="absolute inset-0 flex items-center justify-center text-[8px] text-text-subtle">×</span>
+        </button>
+        {/* Preset colors */}
+        {COLOR_PRESETS.map((color) => (
+          <button
+            key={color}
+            type="button"
+            onClick={() => onChange(color)}
+            className={cn(
+              "size-6 rounded-full border-2 transition-all hover:scale-105",
+              value === color ? "border-primary scale-110" : "border-transparent",
+            )}
+            style={{ backgroundColor: color }}
+            title={color}
+          />
+        ))}
+      </div>
+      {/* Custom hex input */}
+      <div className="flex items-center gap-2">
+        <div
+          className="size-6 rounded-full border border-border shrink-0"
+          style={{ backgroundColor: value ?? "transparent" }}
+        />
+        <input
+          type="text"
+          value={value ?? ""}
+          onChange={(e) => {
+            const v = e.target.value.trim();
+            if (v === "") { onChange(null); return; }
+            if (/^#[0-9a-fA-F]{6}$/.test(v)) onChange(v);
+            else onChange(v); // allow partial typing
+          }}
+          placeholder="#3b82f6"
+          className="flex-1 h-7 text-xs px-2 rounded-md border border-border bg-background focus:outline-none focus:border-primary font-mono"
+        />
+      </div>
+    </div>
+  );
+}

package/src/web/components/database/connection-form-dialog.tsx

@@ -0,0 +1,234 @@
+import { useState, useEffect } from "react";
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { ConnectionColorPicker } from "./connection-color-picker";
+import type { Connection, CreateConnectionData, UpdateConnectionData } from "./use-connections";
+
+interface ConnectionFormDialogProps {
+  open: boolean;
+  onClose: () => void;
+  /** If provided, dialog is in edit mode */
+  connection?: Connection;
+  onSave?: (data: CreateConnectionData) => Promise<void>;
+  onUpdate?: (id: number, data: UpdateConnectionData) => Promise<void>;
+  onTest: (id: number) => Promise<{ ok: boolean; error?: string }>;
+}
+
+interface FormState {
+  name: string;
+  type: "sqlite" | "postgres";
+  path: string;
+  connectionString: string;
+  groupName: string;
+  color: string | null;
+  readonly: boolean;
+}
+
+export function ConnectionFormDialog({
+  open, onClose, connection, onSave, onUpdate, onTest,
+}: ConnectionFormDialogProps) {
+  const isEdit = !!connection;
+  const [form, setForm] = useState<FormState>({
+    name: "", type: "postgres", path: "", connectionString: "", groupName: "", color: null, readonly: true,
+  });
+  const [testing, setTesting] = useState(false);
+  const [testResult, setTestResult] = useState<{ ok: boolean; error?: string } | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!open) { setTestResult(null); setError(null); return; }
+    if (connection) {
+      // connection_config is not exposed by the API — path/connectionString start empty in edit mode
+      setForm({
+        name: connection.name,
+        type: connection.type,
+        path: "",
+        connectionString: "",
+        groupName: connection.group_name ?? "",
+        color: connection.color,
+        readonly: connection.readonly === 1,
+      });
+    } else {
+      setForm({ name: "", type: "postgres", path: "", connectionString: "", groupName: "", color: null, readonly: true });
+    }
+  }, [open, connection]);
+
+  const set = (key: keyof FormState, value: unknown) => {
+    setForm((f) => ({ ...f, [key]: value }));
+    setTestResult(null);
+  };
+
+  const handleTest = async () => {
+    if (!isEdit) return;
+    setTesting(true);
+    setTestResult(null);
+    try {
+      const result = await onTest(connection!.id);
+      setTestResult(result);
+    } finally {
+      setTesting(false);
+    }
+  };
+
+  const handleSave = async () => {
+    setError(null);
+    if (!form.name.trim()) { setError("Name is required"); return; }
+
+    setSaving(true);
+    try {
+      if (isEdit && onUpdate) {
+        // Only send connectionConfig if user entered a new value (API doesn't return existing config)
+        const hasNewConfig = form.type === "postgres" ? !!form.connectionString.trim() : !!form.path.trim();
+        const config = hasNewConfig
+          ? (form.type === "postgres"
+            ? { type: "postgres" as const, connectionString: form.connectionString }
+            : { type: "sqlite" as const, path: form.path })
+          : undefined;
+        await onUpdate(connection!.id, {
+          name: form.name.trim(),
+          ...(config !== undefined && { connectionConfig: config }),
+          groupName: form.groupName.trim() || null,
+          color: form.color,
+          readonly: form.readonly ? 1 : 0,
+        });
+      } else if (onSave) {
+        const config = form.type === "postgres"
+          ? { type: "postgres" as const, connectionString: form.connectionString }
+          : { type: "sqlite" as const, path: form.path };
+        await onSave({
+          type: form.type,
+          name: form.name.trim(),
+          connectionConfig: config,
+          groupName: form.groupName.trim() || undefined,
+          color: form.color ?? undefined,
+        });
+      }
+      onClose();
+    } catch (e) {
+      setError((e as Error).message);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(v) => { if (!v) onClose(); }}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>{isEdit ? "Edit Connection" : "Add Connection"}</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-3 py-1">
+          {/* Name */}
+          <div>
+            <label className="text-xs font-medium text-text-secondary mb-1 block">Name *</label>
+            <input
+              value={form.name}
+              onChange={(e) => set("name", e.target.value)}
+              placeholder="my-database"
+              className="w-full h-8 text-sm px-2.5 rounded-md border border-border bg-background focus:outline-none focus:border-primary"
+            />
+          </div>
+
+          {/* Type */}
+          <div>
+            <label className="text-xs font-medium text-text-secondary mb-1 block">Type</label>
+            <select
+              value={form.type}
+              onChange={(e) => set("type", e.target.value as "sqlite" | "postgres")}
+              className="w-full h-8 text-sm px-2 rounded-md border border-border bg-background focus:outline-none focus:border-primary"
+            >
+              <option value="postgres">PostgreSQL</option>
+              <option value="sqlite">SQLite</option>
+            </select>
+          </div>
+
+          {/* Connection config */}
+          {form.type === "postgres" ? (
+            <div>
+              <label className="text-xs font-medium text-text-secondary mb-1 block">Connection String *</label>
+              <input
+                type="password"
+                value={form.connectionString}
+                onChange={(e) => set("connectionString", e.target.value)}
+                placeholder="postgresql://user:pass@host:5432/db"
+                className="w-full h-8 text-sm px-2.5 rounded-md border border-border bg-background focus:outline-none focus:border-primary font-mono"
+              />
+            </div>
+          ) : (
+            <div>
+              <label className="text-xs font-medium text-text-secondary mb-1 block">File Path *</label>
+              <input
+                value={form.path}
+                onChange={(e) => set("path", e.target.value)}
+                placeholder="/path/to/database.db"
+                className="w-full h-8 text-sm px-2.5 rounded-md border border-border bg-background focus:outline-none focus:border-primary font-mono"
+              />
+            </div>
+          )}
+
+          {/* Group */}
+          <div>
+            <label className="text-xs font-medium text-text-secondary mb-1 block">Group</label>
+            <input
+              value={form.groupName}
+              onChange={(e) => set("groupName", e.target.value)}
+              placeholder="Production"
+              className="w-full h-8 text-sm px-2.5 rounded-md border border-border bg-background focus:outline-none focus:border-primary"
+            />
+          </div>
+
+          {/* Color */}
+          <div>
+            <label className="text-xs font-medium text-text-secondary mb-1 block">Tab Color</label>
+            <ConnectionColorPicker value={form.color} onChange={(c) => set("color", c)} />
+          </div>
+
+          {/* Readonly toggle (edit only) */}
+          {isEdit && (
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <p className="text-xs font-medium">Readonly</p>
+                <p className="text-[10px] text-text-subtle">Block non-SELECT queries (AI protection)</p>
+              </div>
+              <button
+                type="button"
+                onClick={() => set("readonly", !form.readonly)}
+                className={`relative w-9 h-5 rounded-full transition-colors ${form.readonly ? "bg-primary" : "bg-border"}`}
+              >
+                <span
+                  className={`absolute top-0.5 left-0.5 size-4 rounded-full bg-white transition-transform ${form.readonly ? "translate-x-4" : ""}`}
+                />
+              </button>
+            </div>
+          )}
+
+          {/* Test result */}
+          {testResult && (
+            <p className={`text-xs ${testResult.ok ? "text-green-500" : "text-red-500"}`}>
+              {testResult.ok ? "✓ Connection successful" : `✗ ${testResult.error}`}
+            </p>
+          )}
+
+          {/* Error */}
+          {error && <p className="text-xs text-red-500">{error}</p>}
+        </div>
+
+        <DialogFooter>
+          {isEdit && (
+            <Button variant="outline" size="sm" onClick={handleTest} disabled={testing} className="mr-auto">
+              {testing ? "Testing…" : "Test Connection"}
+            </Button>
+          )}
+          <Button variant="outline" size="sm" onClick={onClose}>Cancel</Button>
+          <Button size="sm" onClick={handleSave} disabled={saving}>
+            {saving ? "Saving…" : isEdit ? "Save" : "Add"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,208 @@
+import { useState } from "react";
+import { ChevronRight, ChevronDown, Database, RefreshCw, Pencil, Trash2, Lock } 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;
+  onDelete: (id: number) => void;
+}
+
+interface GroupMap {
+  [group: string]: Connection[];
+}
+
+const MAX_VISIBLE_TABLES = 10;
+
+export function ConnectionList({
+  connections, cachedTables,
+  onOpenConnection, 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 toggleConn = (id: number) => {
+    setExpandedConns((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id); else next.add(id);
+      return next;
+    });
+  };
+
+  const toggleGroup = (group: string) => {
+    setExpandedGroups((prev) => {
+      const next = new Set(prev);
+      if (next.has(group)) next.delete(group); else next.add(group);
+      return next;
+    });
+  };
+
+  const handleRefresh = async (id: number) => {
+    setRefreshingIds((p) => new Set(p).add(id));
+    try { await onRefreshTables(id); } finally {
+      setRefreshingIds((p) => { const n = new Set(p); n.delete(id); return n; });
+    }
+  };
+
+  // Group connections
+  const groups: GroupMap = {};
+  for (const conn of connections) {
+    const key = conn.group_name ?? "__ungrouped__";
+    (groups[key] ??= []).push(conn);
+  }
+  const groupKeys = Object.keys(groups).sort((a, b) => {
+    if (a === "__ungrouped__") return 1;
+    if (b === "__ungrouped__") return -1;
+    return a.localeCompare(b);
+  });
+
+  if (connections.length === 0) {
+    return (
+      <p className="px-4 py-6 text-xs text-text-subtle text-center">
+        No connections yet.<br />Click + to add one.
+      </p>
+    );
+  }
+
+  return (
+    <div className="py-1">
+      {groupKeys.map((group) => {
+        const isGroupExpanded = expandedGroups.has(group);
+        const label = group === "__ungrouped__" ? "Ungrouped" : group;
+        const groupConns = groups[group]!;
+
+        return (
+          <div key={group}>
+            {/* Group header (only shown when there are multiple groups or named group) */}
+            {(groupKeys.length > 1 || group !== "__ungrouped__") && (
+              <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"
+              >
+                {isGroupExpanded ? <ChevronDown className="size-3" /> : <ChevronRight className="size-3" />}
+                {label}
+              </button>
+            )}
+
+            {isGroupExpanded && 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">
+                    {/* Expand arrow */}
+                    <button
+                      onClick={() => {
+                        toggleConn(conn.id);
+                        if (!expandedConns.has(conn.id) && tables.length === 0) {
+                          handleRefresh(conn.id);
+                        }
+                      }}
+                      className="shrink-0 text-text-subtle hover:text-foreground transition-colors"
+                    >
+                      {isExpanded ? <ChevronDown className="size-3" /> : <ChevronRight className="size-3" />}
+                    </button>
+
+                    {/* Color dot */}
+                    <span
+                      className="shrink-0 size-2 rounded-full border border-border"
+                      style={{ backgroundColor: conn.color ?? "transparent" }}
+                    />
+
+                    {/* Name — click opens connection viewer */}
+                    <button
+                      className="flex-1 text-left text-xs truncate hover:text-primary transition-colors"
+                      onClick={() => onOpenConnection(conn)}
+                    >
+                      {conn.name}
+                    </button>
+
+                    {/* DB type badge */}
+                    <span className="shrink-0 text-[9px] text-text-subtle uppercase px-1 rounded bg-surface-elevated">
+                      {conn.type === "postgres" ? "PG" : "DB"}
+                    </span>
+
+                    {/* Readonly lock */}
+                    {conn.readonly === 1 && (
+                      <span title="Readonly">
+                        <Lock className="shrink-0 size-2.5 text-text-subtle" aria-label="Readonly" />
+                      </span>
+                    )}
+
+                    {/* Actions (hover) */}
+                    <div className="hidden group-hover:flex items-center gap-0.5 shrink-0">
+                      <button
+                        onClick={() => handleRefresh(conn.id)}
+                        disabled={isRefreshing}
+                        className="p-0.5 text-text-subtle hover:text-foreground transition-colors"
+                        title="Refresh tables"
+                      >
+                        <RefreshCw className={cn("size-3", isRefreshing && "animate-spin")} />
+                      </button>
+                      <button
+                        onClick={() => onEdit(conn)}
+                        className="p-0.5 text-text-subtle hover:text-foreground transition-colors"
+                        title="Edit"
+                      >
+                        <Pencil className="size-3" />
+                      </button>
+                      <button
+                        onClick={() => onDelete(conn.id)}
+                        className="p-0.5 text-text-subtle hover:text-red-500 transition-colors"
+                        title="Delete"
+                      >
+                        <Trash2 className="size-3" />
+                      </button>
+                    </div>
+                  </div>
+
+                  {/* Table list (expanded) */}
+                  {isExpanded && (
+                    <div className="pl-6">
+                      {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>
+                      )}
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        );
+      })}
+    </div>
+  );
+}