@hienlh/ppm 0.6.3 → 0.6.4

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

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

@@ -0,0 +1,100 @@
+import { useState } from "react";
+import { Plus } from "lucide-react";
+import { useTabStore } from "@/stores/tab-store";
+import { ConnectionList } from "./connection-list";
+import { ConnectionFormDialog } from "./connection-form-dialog";
+import { useConnections, type Connection, type CreateConnectionData, type UpdateConnectionData } from "./use-connections";
+
+export function DatabaseSidebar() {
+  const { connections, loading, cachedTables, createConnection, updateConnection, deleteConnection, testConnection, refreshTables } = useConnections();
+  const openTab = useTabStore((s) => s.openTab);
+  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",
+      title: `${conn.name} · ${tableName}`,
+      projectId: null,
+      closable: true,
+      metadata: { connectionId: conn.id, tableName, schemaName, connectionColor: conn.color },
+    });
+  };
+
+  const handleDelete = async (id: number) => {
+    if (!confirm("Delete this connection?")) return;
+    await deleteConnection(id);
+  };
+
+  const handleCreate = async (data: CreateConnectionData) => {
+    const created = await createConnection(data);
+    // Auto-refresh tables after creating (use return value to avoid stale closure)
+    if (created) refreshTables(created.id).catch(() => {});
+  };
+
+  const handleUpdate = async (id: number, data: UpdateConnectionData) => {
+    await updateConnection(id, data);
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Header */}
+      <div className="flex items-center justify-between px-3 py-2 border-b border-border shrink-0">
+        <span className="text-[10px] font-semibold text-text-subtle uppercase tracking-wider">Database</span>
+        <button
+          onClick={() => setAddOpen(true)}
+          className="flex items-center justify-center size-5 rounded hover:bg-surface-elevated transition-colors text-text-subtle hover:text-foreground"
+          title="Add connection"
+        >
+          <Plus className="size-3.5" />
+        </button>
+      </div>
+
+      {/* Connection list */}
+      <div className="flex-1 overflow-y-auto min-h-0">
+        {loading ? (
+          <p className="px-4 py-6 text-xs text-text-subtle text-center">Loading…</p>
+        ) : (
+          <ConnectionList
+            connections={connections}
+            cachedTables={cachedTables}
+            onOpenConnection={handleOpenConnection}
+            onOpenTable={handleOpenTable}
+            onRefreshTables={refreshTables}
+            onEdit={setEditConn}
+            onDelete={handleDelete}
+          />
+        )}
+      </div>
+
+      {/* Add dialog */}
+      <ConnectionFormDialog
+        open={addOpen}
+        onClose={() => setAddOpen(false)}
+        onSave={handleCreate}
+        onTest={() => Promise.resolve({ ok: false, error: "Save connection first" })}
+      />
+
+      {/* Edit dialog */}
+      {editConn && (
+        <ConnectionFormDialog
+          open={!!editConn}
+          onClose={() => setEditConn(null)}
+          connection={editConn}
+          onUpdate={handleUpdate}
+          onTest={(id) => testConnection(id)}
+        />
+      )}
+    </div>
+  );
+}