@hienlh/ppm 0.6.3 → 0.6.5

package/src/web/app.tsx

@@ -58,12 +58,9 @@ export function App() {
     }
   }, [theme]);
 
-  // Fetch server info + keybindings on mount (before auth — shown on login screen)
+  // Fetch server info on mount (before auth — shown on login screen)
   useEffect(() => {
     fetchServerInfo();
-    import("@/stores/keybindings-store").then(({ useKeybindingsStore }) => {
-      useKeybindingsStore.getState().loadFromServer();
-    });
   }, [fetchServerInfo]);
 
   // Auth check on mount
@@ -102,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/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-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,257 @@
+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[]>;
+  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[];
+}
+
+export function ConnectionList({
+  connections, cachedTables,
+  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 [tableFilter, setTableFilter] = useState<Map<number, string>>(new Map());
+
+  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]!;
+
+        const hasGroup = groupKeys.length > 1 || group !== "__ungrouped__";
+
+        return (
+          <div key={group}>
+            {/* Group header (only shown when there are multiple groups or named group) */}
+            {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"
+              >
+                {isGroupExpanded ? <ChevronDown className="size-3" /> : <ChevronRight className="size-3" />}
+                {label}
+              </button>
+            )}
+
+            {/* 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);
+
+              return (
+                <div key={conn.id}>
+                  {/* Connection row */}
+                  <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={() => {
+                        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 toggles expand */}
+                    <button
+                      className="flex-1 text-left text-xs truncate hover:text-primary transition-colors"
+                      onClick={() => {
+                        toggleConn(conn.id);
+                        if (!expandedConns.has(conn.id) && tables.length === 0) {
+                          handleRefresh(conn.id);
+                        }
+                      }}
+                    >
+                      {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) with tree guide line */}
+                  {isExpanded && (
+                    <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>
+                      )}
+                      {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>
+  );
+}