@hienlh/ppm 0.13.20 → 0.13.21

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

@@ -0,0 +1,104 @@
+import { ChevronRight, ChevronDown, RefreshCw, Pencil, Trash2, Lock, Search } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { Connection, CachedTable } from "./use-connections";
+import { SchemaTableTree, type ColumnInfo } from "./schema-table-tree";
+
+interface ConnectionRowProps {
+  conn: Connection;
+  isExpanded: boolean;
+  isRefreshing: boolean;
+  tables: CachedTable[];
+  schemas: Map<string, CachedTable[]>;
+  isSingleSchema: boolean;
+  filter: string;
+  expandedTables: Set<string>;
+  loadingColumns: Set<string>;
+  columnCache?: Map<string, ColumnInfo[]>;
+  columnErrors?: Set<string>;
+  refreshError?: string;
+  hasGroup: boolean;
+  onToggle: (id: number, autoRefresh: boolean) => void;
+  onRefresh: (id: number) => void;
+  onEdit: (conn: Connection) => void;
+  onDelete: (id: number) => void;
+  onOpenTable: (conn: Connection, tableName: string, schemaName: string) => void;
+  onToggleTable: (connId: number, tableName: string, schemaName: string) => void;
+  onFilterChange: (connId: number, value: string) => void;
+}
+
+export function ConnectionRow({
+  conn, isExpanded, isRefreshing, tables, schemas, isSingleSchema,
+  filter, expandedTables, loadingColumns, columnCache, columnErrors,
+  refreshError, hasGroup,
+  onToggle, onRefresh, onEdit, onDelete, onOpenTable, onToggleTable, onFilterChange,
+}: ConnectionRowProps) {
+  const handleToggle = () => onToggle(conn.id, !isExpanded && tables.length === 0);
+
+  return (
+    <div>
+      <div className={cn("group flex items-center gap-1 py-1 hover:bg-surface-elevated transition-colors", hasGroup ? "pl-3 pr-2" : "px-2")}>
+        <button onClick={handleToggle} className="shrink-0 text-text-subtle hover:text-foreground transition-colors">
+          {isExpanded ? <ChevronDown className="size-3" /> : <ChevronRight className="size-3" />}
+        </button>
+        <span className="shrink-0 size-2 rounded-full border border-border" style={{ backgroundColor: conn.color ?? "transparent" }} />
+        <button className="flex-1 text-left text-xs truncate hover:text-primary transition-colors" onClick={handleToggle}>
+          {conn.name}
+        </button>
+        <span className="shrink-0 text-[9px] text-text-subtle uppercase px-1 rounded bg-surface-elevated">
+          {conn.type === "postgres" ? "PG" : "DB"}
+        </span>
+        {conn.readonly === 1 && <span title="Readonly"><Lock className="shrink-0 size-2.5 text-text-subtle" /></span>}
+        <div className="flex can-hover:hidden can-hover:group-hover:flex items-center gap-0.5 shrink-0">
+          <button onClick={() => onRefresh(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>
+
+      {isExpanded && (
+        <div className="ml-[11px] border-l border-dashed border-border pl-1">
+          {isRefreshing && tables.length === 0 && <p className="text-[10px] text-text-subtle px-2 py-1">Loading…</p>}
+          {!isRefreshing && tables.length === 0 && (
+            refreshError
+              ? <p className="text-[10px] text-red-500 px-2 py-1 break-all">{refreshError}</p>
+              : <p className="text-[10px] text-text-subtle px-2 py-1">No tables cached</p>
+          )}
+          {tables.length > 0 && (
+            <>
+              {tables.length > 5 && (
+                <div className="flex items-center gap-1 px-2 py-0.5">
+                  <Search className="size-2.5 text-text-subtle shrink-0" />
+                  <input
+                    type="text"
+                    value={filter}
+                    onChange={(e) => onFilterChange(conn.id, e.target.value)}
+                    placeholder="Filter tables…"
+                    className="w-full text-[10px] bg-transparent border-none outline-none text-foreground placeholder:text-text-subtle"
+                  />
+                </div>
+              )}
+              <SchemaTableTree
+                connId={conn.id}
+                schemas={schemas}
+                isSingleSchema={isSingleSchema}
+                filter={filter}
+                expandedTables={expandedTables}
+                loadingColumns={loadingColumns}
+                columnCache={columnCache}
+                columnErrors={columnErrors}
+                onToggleTable={onToggleTable}
+                onOpenTable={(tableName, schemaName) => onOpenTable(conn, tableName, schemaName)}
+              />
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -24,7 +24,7 @@ export function DatabaseSidebar() {
 
   const handleDelete = async (id: number) => {
     if (!confirm("Delete this connection?")) return;
-    await deleteConnection(id);
+    try { await deleteConnection(id); } catch { /* server error — connection list will stay in sync on next fetch */ }
   };
 
   const handleCreate = async (data: CreateConnectionData) => {

package/src/web/components/database/schema-table-tree.tsx

@@ -0,0 +1,98 @@
+import { ChevronRight, ChevronDown, Database, Key, Link2 } from "lucide-react";
+import type { CachedTable } from "./use-connections";
+
+export interface ColumnInfo {
+  name: string;
+  type: string;
+  nullable: boolean;
+  pk: boolean;
+  fk: { table: string; column: string } | null;
+}
+
+interface SchemaTableTreeProps {
+  connId: number;
+  schemas: Map<string, CachedTable[]>;
+  isSingleSchema: boolean;
+  filter: string;
+  expandedTables: Set<string>;
+  loadingColumns: Set<string>;
+  columnCache?: Map<string, ColumnInfo[]>;
+  columnErrors?: Set<string>;
+  onToggleTable: (connId: number, tableName: string, schemaName: string) => void;
+  onOpenTable: (tableName: string, schemaName: string) => void;
+}
+
+export function SchemaTableTree({
+  connId, schemas, isSingleSchema, filter,
+  expandedTables, loadingColumns, columnCache, columnErrors,
+  onToggleTable, onOpenTable,
+}: SchemaTableTreeProps) {
+  const filterLower = filter.toLowerCase();
+
+  return (
+    <div className="overflow-y-auto max-h-[40vh]">
+      {Array.from(schemas.entries()).map(([schemaName, tables]) => {
+        const filteredTables = filterLower
+          ? tables.filter((t) => t.tableName.toLowerCase().includes(filterLower))
+          : tables;
+        if (filteredTables.length === 0) return null;
+
+        return (
+          <div key={schemaName}>
+            {!isSingleSchema && (
+              <p className="px-2 py-0.5 text-[9px] font-semibold text-text-subtle uppercase tracking-wider">{schemaName}</p>
+            )}
+            {filteredTables.map((t) => {
+              const tableKey = `${connId}:${t.schemaName}.${t.tableName}`;
+              const isTableExpanded = expandedTables.has(tableKey);
+              const isLoadingCols = loadingColumns.has(tableKey);
+              const columns = columnCache?.get(tableKey);
+              const hasError = columnErrors?.has(tableKey);
+
+              return (
+                <div key={tableKey}>
+                  <div className="flex items-center gap-1 pl-2 pr-2 py-0.5 hover:bg-surface-elevated transition-colors group/table">
+                    <button
+                      onClick={() => onToggleTable(connId, t.tableName, t.schemaName)}
+                      className="shrink-0 text-text-subtle hover:text-foreground transition-colors"
+                    >
+                      {isTableExpanded ? <ChevronDown className="size-2.5" /> : <ChevronRight className="size-2.5" />}
+                    </button>
+                    <Database className="size-2.5 shrink-0 text-text-subtle" />
+                    <button
+                      onClick={() => onOpenTable(t.tableName, t.schemaName)}
+                      className="flex-1 text-left text-[11px] text-text-secondary hover:text-foreground transition-colors truncate"
+                    >
+                      {t.tableName}
+                    </button>
+                    <span className="text-[9px] text-text-subtle">{t.rowCount}</span>
+                  </div>
+
+                  {isTableExpanded && (
+                    <div className="ml-[18px] border-l border-dotted border-border pl-2">
+                      {isLoadingCols && <p className="text-[9px] text-text-subtle px-1 py-0.5">Loading…</p>}
+                      {hasError && <p className="text-[9px] text-red-500 px-1 py-0.5">Failed to load columns</p>}
+                      {columns && columns.map((col) => (
+                        <div key={col.name} className="flex items-center gap-1 px-1 py-px text-[10px] text-text-subtle" title={col.fk ? `FK → ${col.fk.table}.${col.fk.column}` : undefined}>
+                          {col.pk && <Key className="size-2.5 text-amber-500 shrink-0" />}
+                          {col.fk && <Link2 className="size-2.5 text-blue-400 shrink-0" />}
+                          {!col.pk && !col.fk && <span className="size-2.5 shrink-0" />}
+                          <span className="truncate">{col.name}{col.nullable ? "?" : ""}</span>
+                          <span className="ml-auto text-[9px] text-text-subtle/60 shrink-0">{col.type}</span>
+                        </div>
+                      ))}
+                      {!isLoadingCols && !hasError && !columns && <p className="text-[9px] text-text-subtle px-1 py-0.5">No columns</p>}
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        );
+      })}
+      {filter && Array.from(schemas.values()).every((t) => !t.some((x) => x.tableName.toLowerCase().includes(filterLower))) && (
+        <p className="text-[10px] text-text-subtle px-2 py-1">No match</p>
+      )}
+    </div>
+  );
+}

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

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, useRef } from "react";
 import { api } from "../../lib/api-client";
 
 export interface Connection {
@@ -104,17 +104,20 @@ export function useConnections() {
   }, []);
 
   /** Fetch column metadata for a table (lazy loaded for schema tree) */
-  const [columnCache, setColumnCache] = useState<Map<string, { name: string; type: string; nullable: boolean; pk: boolean; fk: { table: string; column: string } | null }[]>>(new Map());
-  const fetchColumns = useCallback(async (connId: number, table: string, schema?: string): Promise<{ name: string; type: string; nullable: boolean; pk: boolean; fk: { table: string; column: string } | null }[]> => {
+  type ColumnInfo = { name: string; type: string; nullable: boolean; pk: boolean; fk: { table: string; column: string } | null };
+  const [columnCache, setColumnCache] = useState<Map<string, ColumnInfo[]>>(new Map());
+  const columnCacheRef = useRef(columnCache);
+  columnCacheRef.current = columnCache;
+  const fetchColumns = useCallback(async (connId: number, table: string, schema?: string): Promise<ColumnInfo[]> => {
     const cacheKey = `${connId}:${schema ?? "main"}.${table}`;
-    const cached = columnCache.get(cacheKey);
+    const cached = columnCacheRef.current.get(cacheKey);
     if (cached) return cached;
-    const cols = await api.get<{ name: string; type: string; nullable: boolean; pk: boolean; fk: { table: string; column: string } | null }[]>(
+    const cols = await api.get<ColumnInfo[]>(
       `/api/db/connections/${connId}/schema?table=${encodeURIComponent(table)}${schema ? `&schema=${encodeURIComponent(schema)}` : ""}`,
     );
     setColumnCache((prev) => new Map(prev).set(cacheKey, cols));
     return cols;
-  }, [columnCache]);
+  }, []);
 
   const exportConnections = useCallback(async () => {
     return api.get<{ version: number; exported_at: string; connections: unknown[] }>("/api/db/connections/export");

package/src/web/hooks/use-chat.ts

@@ -300,7 +300,7 @@ export function useChat(sessionId: string | null, providerId = "claude", project
         });
         if (sessionIdRef.current && !isSessionTabActive(sessionIdRef.current)) {
           const nType = ev.tool === "AskUserQuestion" ? "question" : "approval_request";
-          useNotificationStore.getState().addNotification(sessionIdRef.current, nType, projectNameRef.current);
+          // Unread state added via server-side session:unread_changed broadcast — only play sound + toast here
           playNotificationSound(nType);
           // Persistent toast with action to navigate to the waiting session
           const sid = sessionIdRef.current;
@@ -417,7 +417,7 @@ export function useChat(sessionId: string | null, providerId = "claude", project
           setContextWindowPct(ev.contextWindowPct);
         }
         if (sessionIdRef.current && !isSessionTabActive(sessionIdRef.current)) {
-          useNotificationStore.getState().addNotification(sessionIdRef.current, "done", projectNameRef.current);
+          // Unread state added via server-side session:unread_changed broadcast — only play sound here
           playNotificationSound("done");
         }
         // Cancel any pending throttled sync — done handler writes final state directly
@@ -481,6 +481,13 @@ export function useChat(sessionId: string | null, providerId = "claude", project
       return;
     }
 
+    // Cross-tab/device unread sync — server broadcasts when unread state changes
+    if ((data as any).type === "session:unread_changed") {
+      const { sessionId: sid, unreadCount, unreadType, projectName: pn } = data as any;
+      useNotificationStore.getState().handleUnreadChanged(sid, unreadCount, unreadType, pn);
+      return;
+    }
+
     // Dispatch global Jira events so components can listen via window events
     if (typeof (data as any).type === "string" && (data as any).type.startsWith("jira:")) {
       window.dispatchEvent(new CustomEvent((data as any).type, { detail: data }));

package/src/web/hooks/use-debounced-value.ts

@@ -0,0 +1,10 @@
+import { useState, useEffect } from "react";
+
+export function useDebouncedValue<T>(value: T, delayMs: number): T {
+  const [debounced, setDebounced] = useState(value);
+  useEffect(() => {
+    const timer = setTimeout(() => setDebounced(value), delayMs);
+    return () => clearTimeout(timer);
+  }, [value, delayMs]);
+  return debounced;
+}

package/src/web/stores/notification-store.ts

@@ -1,4 +1,5 @@
 import { create } from "zustand";
+import { api } from "@/lib/api-client";
 
 interface NotificationEntry {
   count: number;
@@ -31,6 +32,10 @@ interface NotificationStore {
   addNotification: (sessionId: string, type: string, projectName: string) => void;
   clearForSession: (sessionId: string) => void;
   clearAll: () => void;
+  /** Hydrate from backend on app load */
+  loadFromServer: (projectName: string) => Promise<void>;
+  /** Handle WS broadcast for cross-tab/device sync */
+  handleUnreadChanged: (sessionId: string, unreadCount: number, unreadType: string | null, projectName: string) => void;
 }
 
 export const useNotificationStore = create<NotificationStore>()((set) => ({
@@ -56,9 +61,46 @@ export const useNotificationStore = create<NotificationStore>()((set) => ({
       next.delete(sessionId);
       return { notifications: next };
     });
+    // Fire-and-forget: persist to server so other tabs/devices sync
+    api.post(`/api/chat/sessions/${encodeURIComponent(sessionId)}/read`).catch(() => {});
   },
 
   clearAll: () => set({ notifications: new Map() }),
+
+  loadFromServer: async (projectName: string) => {
+    try {
+      const entries = await api.get<Array<{ sessionId: string; unreadCount: number; unreadType: string | null; projectName: string | null }>>(
+        `/api/project/${encodeURIComponent(projectName)}/chat/sessions/unread`,
+      );
+      set(() => {
+        const next = new Map<string, NotificationEntry>();
+        for (const e of entries) {
+          if (e.unreadCount > 0) {
+            next.set(e.sessionId, { count: e.unreadCount, type: e.unreadType || "done", projectName: e.projectName || "" });
+          }
+        }
+        return { notifications: next };
+      });
+    } catch { /* server may not support yet — keep empty */ }
+  },
+
+  handleUnreadChanged: (sessionId, unreadCount, unreadType, projectName) => {
+    set((state) => {
+      const next = new Map(state.notifications);
+      if (unreadCount === 0) {
+        next.delete(sessionId);
+      } else {
+        // unreadCount === -1 means "incremented, re-fetch actual count not available" — just +1 locally
+        const existing = next.get(sessionId);
+        next.set(sessionId, {
+          count: unreadCount > 0 ? unreadCount : (existing?.count ?? 0) + 1,
+          type: unreadType || "done",
+          projectName: projectName || existing?.projectName || "",
+        });
+      }
+      return { notifications: next };
+    });
+  },
 }));
 
 /** Derived: total unread count across all sessions */

package/dist/web/assets/architecture-PBZL5I3N-7JKY4P1L.js

@@ -1 +0,0 @@
-import{G as e}from"./vendor-mermaid-CPtQ2zua.js";export{e as createArchitectureServices};