@hienlh/ppm 0.13.20 → 0.13.21

package/src/web/components/chat/chat-history-bar.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback, useRef } from "react";
-import { History, Settings2, Loader2, MessageSquare, RefreshCw, Search, Pencil, Check, X, BellOff, Bug, ClipboardCheck, Pin, PinOff, Trash2, Users, Bot, Tags } from "lucide-react";
+import { History, Settings2, Loader2, MessageSquare, RefreshCw, Search, Pencil, Check, X, BellOff, Bug, ClipboardCheck, Pin, PinOff, Trash2, Users, Bot, Tags, CalendarX2 } from "lucide-react";
 import { Activity } from "lucide-react";
 import { api, projectUrl } from "@/lib/api-client";
 import { useTabStore } from "@/stores/tab-store";
@@ -11,6 +11,7 @@ import { UsageDetailPanel } from "./usage-badge";
 import { TeamActivityPanel } from "./team-activity-panel";
 import { ProviderBadge } from "./provider-selector";
 import { formatRelativeDate } from "@/lib/format-date";
+import { useDebouncedValue } from "@/hooks/use-debounced-value";
 import type { SessionInfo, SessionListResponse, ProjectTag } from "../../../types/chat";
 import type { UsageInfo } from "../../../types/chat";
 import type { TeamMessageItem } from "@/hooks/use-chat";
@@ -99,6 +100,7 @@ export function ChatHistoryBar({
   const hasUnread = useNotificationStore((s) => sessionId ? s.notifications.has(sessionId) : false);
   const clearForSession = useNotificationStore((s) => s.clearForSession);
   const [searchQuery, setSearchQuery] = useState("");
+  const debouncedSearch = useDebouncedValue(searchQuery, 300);
   const [editingId, setEditingId] = useState<string | null>(null);
   const [editingTitle, setEditingTitle] = useState("");
   const [hasMore, setHasMore] = useState(false);
@@ -115,11 +117,13 @@ export function ChatHistoryBar({
     setActivePanel((prev) => prev === panel ? null : panel);
   };
 
-  const load = useCallback(async () => {
+  const load = useCallback(async (query?: string) => {
     if (!projectName) return;
     setLoading(true);
     try {
-      const data = await api.get<SessionListResponse>(`${projectUrl(projectName)}/chat/sessions?limit=${PAGE_SIZE}&offset=0`);
+      const params = new URLSearchParams({ limit: String(PAGE_SIZE), offset: "0" });
+      if (query) params.set("q", query);
+      const data = await api.get<SessionListResponse>(`${projectUrl(projectName)}/chat/sessions?${params}`);
       setSessions(data.sessions);
       setHasMore(data.hasMore);
     } catch {
@@ -135,7 +139,9 @@ export function ChatHistoryBar({
     try {
       // Offset by count of non-pinned sessions (pinned are injected separately by backend)
       const unpinnedCount = sessions.filter((s) => !s.pinned).length;
-      const data = await api.get<SessionListResponse>(`${projectUrl(projectName)}/chat/sessions?limit=${PAGE_SIZE}&offset=${unpinnedCount}`);
+      const params = new URLSearchParams({ limit: String(PAGE_SIZE), offset: String(unpinnedCount) });
+      if (debouncedSearch) params.set("q", debouncedSearch);
+      const data = await api.get<SessionListResponse>(`${projectUrl(projectName)}/chat/sessions?${params}`);
       setSessions((prev) => {
         const existingIds = new Set(prev.map((s) => s.id));
         const newSessions = data.sessions.filter((s) => !existingIds.has(s.id));
@@ -147,13 +153,18 @@ export function ChatHistoryBar({
     } finally {
       setLoadingMore(false);
     }
-  }, [projectName, loadingMore, hasMore, sessions]);
+  }, [projectName, loadingMore, hasMore, sessions, debouncedSearch]);
 
   // Load sessions when history panel opens
   useEffect(() => {
     if (activePanel === "history" && sessions.length === 0) load();
   }, [activePanel]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  // Re-fetch when debounced search query changes (server-side search)
+  useEffect(() => {
+    if (activePanel === "history") load(debouncedSearch || undefined);
+  }, [debouncedSearch]); // eslint-disable-line react-hooks/exhaustive-deps
+
   // Fetch tags
   const loadTags = useCallback(async () => {
     if (!projectName) return;
@@ -242,6 +253,20 @@ export function ChatHistoryBar({
     loadTags(); // Refetch counts from API for accuracy
   }, [loadTags]);
 
+  const bulkDelete = useCallback(async () => {
+    if (!projectName) return;
+    const days = window.prompt("Delete sessions older than how many days? (pinned sessions are kept)", "30");
+    if (!days) return;
+    const num = parseInt(days, 10);
+    if (!num || num < 1) return;
+    if (!window.confirm(`Delete all unpinned sessions older than ${num} days? This cannot be undone.`)) return;
+    setLoading(true);
+    try {
+      await api.del(`${projectUrl(projectName)}/chat/sessions?olderThanDays=${num}`);
+      load(debouncedSearch || undefined);
+    } catch { /* silent */ }
+  }, [projectName, load, debouncedSearch]);
+
   // Keyboard shortcuts: 1-9 to assign tags to current session
   useEffect(() => {
     if (activePanel !== "history") return;
@@ -260,12 +285,10 @@ export function ChatHistoryBar({
     return () => window.removeEventListener("keydown", handler);
   }, [activePanel, projectTags, sessionId, projectName, handleTagChanged]);
 
-  // Filter sessions by search query + tag
-  const filteredSessions = sessions.filter((s) => {
-    if (searchQuery.trim() && !(s.title || "").toLowerCase().includes(searchQuery.toLowerCase())) return false;
-    if (selectedTagId !== null && s.tag?.id !== selectedTagId) return false;
-    return true;
-  });
+  // Filter by tag client-side (search is now server-side via ?q=)
+  const filteredSessions = selectedTagId !== null
+    ? sessions.filter((s) => s.tag?.id === selectedTagId)
+    : sessions;
 
   // Usage badge display — only meaningful for Claude (SDK) provider
   const isClaudeProvider = !providerId || providerId === "claude";
@@ -399,7 +422,14 @@ export function ChatHistoryBar({
               className="flex-1 bg-transparent text-[11px] text-text-primary outline-none placeholder:text-text-subtle"
             />
             <button
-              onClick={load}
+              onClick={bulkDelete}
+              className="p-0.5 rounded text-text-subtle hover:text-red-400 transition-colors"
+              title="Delete old sessions..."
+            >
+              <CalendarX2 className="size-3" />
+            </button>
+            <button
+              onClick={() => load(debouncedSearch || undefined)}
               disabled={loading}
               className="p-0.5 rounded text-text-subtle hover:text-text-secondary transition-colors disabled:opacity-50"
               title="Refresh"
@@ -543,7 +573,7 @@ export function ChatHistoryBar({
                   </div>
                   </SessionContextMenu>
                 ))}
-                {hasMore && !searchQuery && (
+                {hasMore && (
                   <button
                     onClick={loadMore}
                     disabled={loadingMore}

package/src/web/components/chat/chat-tab.tsx

@@ -137,9 +137,12 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
     maybeClear();
     document.addEventListener("visibilitychange", maybeClear);
     const unsub = usePanelStore.subscribe(maybeClear);
+    // Also auto-clear when notification store changes (cross-tab broadcast may add for active session)
+    const unsub2 = useNotificationStore.subscribe(maybeClear);
     return () => {
       document.removeEventListener("visibilitychange", maybeClear);
       unsub();
+      unsub2();
     };
   }, [sessionId, tabId]);
 

package/src/web/components/chat/session-list-panel.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect, useCallback } from "react";
 import { ChevronDown, ChevronUp, MessageSquare, Pin, PinOff, Search, X } from "lucide-react";
 import { api, projectUrl } from "@/lib/api-client";
 import { formatRelativeDate } from "@/lib/format-date";
+import { useDebouncedValue } from "@/hooks/use-debounced-value";
 import { useProjectTags, TagChipBar } from "./tag-filter-chips";
 import { SessionContextMenu } from "./session-context-menu";
 import type { SessionInfo, ProjectTag } from "../../../types/chat";
@@ -20,14 +21,17 @@ export function SessionListPanel({ projectName, onSelectSession, className }: Se
   const [loading, setLoading] = useState(false);
   const [showAll, setShowAll] = useState(false);
   const [searchQuery, setSearchQuery] = useState("");
+  const debouncedSearch = useDebouncedValue(searchQuery, 300);
   const [selectedTagId, setSelectedTagId] = useState<number | null>(null);
   const { projectTags, tagCounts, loadTags } = useProjectTags(projectName);
 
-  const loadSessions = useCallback(async () => {
+  const loadSessions = useCallback(async (query?: string) => {
     if (!projectName) return;
     setLoading(true);
     try {
-      const data = await api.get<{ sessions: SessionInfo[]; hasMore: boolean }>(`${projectUrl(projectName)}/chat/sessions?limit=${FETCH_SESSIONS_LIMIT}`);
+      const params = new URLSearchParams({ limit: String(FETCH_SESSIONS_LIMIT) });
+      if (query) params.set("q", query);
+      const data = await api.get<{ sessions: SessionInfo[]; hasMore: boolean }>(`${projectUrl(projectName)}/chat/sessions?${params}`);
       setSessions(data.sessions.slice(0, FETCH_SESSIONS_LIMIT));
     } catch {
       // silently ignore
@@ -38,6 +42,11 @@ export function SessionListPanel({ projectName, onSelectSession, className }: Se
 
   useEffect(() => { loadSessions(); }, [loadSessions]);
 
+  // Re-fetch when debounced search query changes
+  useEffect(() => {
+    loadSessions(debouncedSearch || undefined);
+  }, [debouncedSearch]); // eslint-disable-line react-hooks/exhaustive-deps
+
   const togglePin = useCallback(async (e: React.MouseEvent, session: SessionInfo) => {
     e.stopPropagation();
     if (!projectName) return;
@@ -66,12 +75,10 @@ export function SessionListPanel({ projectName, onSelectSession, className }: Se
     loadTags();
   }, [loadTags]);
 
-  const query = searchQuery.toLowerCase().trim();
-  const filtered = sessions.filter((s) => {
-    if (selectedTagId !== null && s.tag?.id !== selectedTagId) return false;
-    if (query && !(s.title || "").toLowerCase().includes(query)) return false;
-    return true;
-  });
+  // Tag filter is client-side; search is now server-side via ?q=
+  const filtered = selectedTagId !== null
+    ? sessions.filter((s) => s.tag?.id === selectedTagId)
+    : sessions;
   const pinnedSessions = filtered.filter((s) => s.pinned);
   const allRecentSessions = filtered.filter((s) => !s.pinned);
   const recentSessions = showAll ? allRecentSessions : allRecentSessions.slice(0, MAX_RECENT_SESSIONS);

package/src/web/components/chat/session-picker.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect, useCallback } from "react";
 import { api, projectUrl } from "@/lib/api-client";
-import { Plus, Trash2, MessageSquare, ChevronDown, Pin, PinOff } from "lucide-react";
+import { Plus, Trash2, MessageSquare, ChevronDown, Pin, PinOff, Search, X } from "lucide-react";
+import { useDebouncedValue } from "@/hooks/use-debounced-value";
 import { ProviderBadge } from "./provider-selector";
 import type { SessionInfo } from "../../../types/chat";
 
@@ -20,12 +21,16 @@ export function SessionPicker({
   const [sessions, setSessions] = useState<SessionInfo[]>([]);
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const debouncedSearch = useDebouncedValue(searchQuery, 300);
 
-  const loadSessions = useCallback(async () => {
+  const loadSessions = useCallback(async (query?: string) => {
     if (!projectName) return;
     setLoading(true);
     try {
-      const data = await api.get<{ sessions: SessionInfo[]; hasMore: boolean }>(`${projectUrl(projectName)}/chat/sessions`);
+      const params = new URLSearchParams({ limit: "50" });
+      if (query) params.set("q", query);
+      const data = await api.get<{ sessions: SessionInfo[]; hasMore: boolean }>(`${projectUrl(projectName)}/chat/sessions?${params}`);
       setSessions(data.sessions);
     } catch {
       // Silently fail — sessions list is non-critical
@@ -40,8 +45,13 @@ export function SessionPicker({
 
   // Reload when dropdown opens
   useEffect(() => {
-    if (open) loadSessions();
-  }, [open, loadSessions]);
+    if (open) loadSessions(debouncedSearch || undefined);
+  }, [open]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Re-fetch on search
+  useEffect(() => {
+    if (open) loadSessions(debouncedSearch || undefined);
+  }, [debouncedSearch]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const currentSession = sessions.find((s) => s.id === currentSessionId);
 
@@ -163,6 +173,24 @@ export function SessionPicker({
               <span>New Chat</span>
             </button>
 
+            {/* Search */}
+            <div className="flex items-center gap-1.5 px-3 py-1.5 border-b border-border">
+              <Search className="size-3 text-text-subtle shrink-0" />
+              <input
+                type="text"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder="Search sessions..."
+                className="flex-1 bg-transparent text-xs text-text-primary outline-none placeholder:text-text-subtle"
+                autoFocus
+              />
+              {searchQuery && (
+                <button onClick={() => setSearchQuery("")} className="text-text-subtle hover:text-text-primary">
+                  <X className="size-3" />
+                </button>
+              )}
+            </div>
+
             {/* Sessions list */}
             <div className="max-h-60 overflow-y-auto">
               {loading && (

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

@@ -1,15 +1,8 @@
 import { useState, useMemo } from "react";
-import { ChevronRight, ChevronDown, Database, RefreshCw, Pencil, Trash2, Lock, Search, Key, Link2 } from "lucide-react";
-import { cn } from "@/lib/utils";
+import { ChevronRight, ChevronDown } from "lucide-react";
 import type { Connection, CachedTable } from "./use-connections";
-
-interface ColumnInfo {
-  name: string;
-  type: string;
-  nullable: boolean;
-  pk: boolean;
-  fk: { table: string; column: string } | null;
-}
+import type { ColumnInfo } from "./schema-table-tree";
+import { ConnectionRow } from "./connection-row";
 
 interface ConnectionListProps {
   connections: Connection[];
@@ -23,10 +16,6 @@ interface ConnectionListProps {
   columnCache?: Map<string, ColumnInfo[]>;
 }
 
-interface GroupMap {
-  [group: string]: Connection[];
-}
-
 export function ConnectionList({
   connections, cachedTables, refreshErrors,
   onOpenTable, onRefreshTables, onEdit, onDelete,
@@ -38,13 +27,15 @@ export function ConnectionList({
   const [refreshingIds, setRefreshingIds] = useState<Set<number>>(new Set());
   const [tableFilter, setTableFilter] = useState<Map<number, string>>(new Map());
   const [loadingColumns, setLoadingColumns] = useState<Set<string>>(new Set());
+  const [columnErrors, setColumnErrors] = useState<Set<string>>(new Set());
 
-  const toggleConn = (id: number) => {
+  const toggleConn = (id: number, autoRefresh: boolean) => {
     setExpandedConns((prev) => {
       const next = new Set(prev);
       if (next.has(id)) next.delete(id); else next.add(id);
       return next;
     });
+    if (autoRefresh) handleRefresh(id);
   };
 
   const toggleGroup = (group: string) => {
@@ -62,10 +53,14 @@ export function ConnectionList({
       return;
     }
     setExpandedTables((prev) => new Set(prev).add(key));
-    // Lazy load columns if not cached
     if (onFetchColumns && !columnCache?.has(key)) {
       setLoadingColumns((prev) => new Set(prev).add(key));
-      try { await onFetchColumns(connId, tableName, schemaName); } catch { /* ignore */ }
+      setColumnErrors((prev) => { const n = new Set(prev); n.delete(key); return n; });
+      try {
+        await onFetchColumns(connId, tableName, schemaName);
+      } catch {
+        setColumnErrors((prev) => new Set(prev).add(key));
+      }
       setLoadingColumns((prev) => { const n = new Set(prev); n.delete(key); return n; });
     }
   };
@@ -77,19 +72,25 @@ export function ConnectionList({
     }
   };
 
-  // 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);
-  });
+  const handleFilterChange = (connId: number, value: string) => {
+    setTableFilter((prev) => new Map(prev).set(connId, value));
+  };
+
+  // L3 fix: memoize group computation
+  const { groups, groupKeys } = useMemo(() => {
+    const g: Record<string, Connection[]> = {};
+    for (const conn of connections) {
+      const key = conn.group_name ?? "__ungrouped__";
+      (g[key] ??= []).push(conn);
+    }
+    const keys = Object.keys(g).sort((a, b) => {
+      if (a === "__ungrouped__") return 1;
+      if (b === "__ungrouped__") return -1;
+      return a.localeCompare(b);
+    });
+    return { groups: g, groupKeys: keys };
+  }, [connections]);
 
-  // Pre-compute schemas for all connections (hooks can't be inside .map())
   const schemasPerConn = useMemo(() => {
     const result = new Map<number, Map<string, CachedTable[]>>();
     for (const conn of connections) {
@@ -134,97 +135,31 @@ export function ConnectionList({
 
             {isGroupExpanded && (
               <div className={hasGroup ? "ml-[11px] border-l border-dashed border-border" : ""}>
-                {groupConns.map((conn) => {
-                  const isExpanded = expandedConns.has(conn.id);
-                  const tables = cachedTables.get(conn.id) ?? [];
-                  const isRefreshing = refreshingIds.has(conn.id);
-
-                  const schemas = schemasPerConn.get(conn.id) ?? new Map();
-                  const isSingleSchema = schemas.size <= 1;
-                  const filter = tableFilter.get(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")}>
-                        <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>
-                        <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={() => {
-                            toggleConn(conn.id);
-                            if (!expandedConns.has(conn.id) && tables.length === 0) handleRefresh(conn.id);
-                          }}
-                        >
-                          {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={() => 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>
-
-                      {/* Expanded tree: schemas > tables > columns */}
-                      {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 && (
-                            refreshErrors?.get(conn.id)
-                              ? <p className="text-[10px] text-red-500 px-2 py-1 break-all">{refreshErrors.get(conn.id)}</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) => setTableFilter((prev) => new Map(prev).set(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}
-                                connType={conn.type}
-                                schemas={schemas}
-                                isSingleSchema={isSingleSchema}
-                                filter={filter}
-                                expandedTables={expandedTables}
-                                loadingColumns={loadingColumns}
-                                columnCache={columnCache}
-                                onToggleTable={toggleTable}
-                                onOpenTable={(tableName, schemaName) => onOpenTable(conn, tableName, schemaName)}
-                              />
-                            </>
-                          )}
-                        </div>
-                      )}
-                    </div>
-                  );
-                })}
+                {groupConns.map((conn) => (
+                  <ConnectionRow
+                    key={conn.id}
+                    conn={conn}
+                    isExpanded={expandedConns.has(conn.id)}
+                    isRefreshing={refreshingIds.has(conn.id)}
+                    tables={cachedTables.get(conn.id) ?? []}
+                    schemas={schemasPerConn.get(conn.id) ?? new Map()}
+                    isSingleSchema={(schemasPerConn.get(conn.id)?.size ?? 0) <= 1}
+                    filter={tableFilter.get(conn.id) ?? ""}
+                    expandedTables={expandedTables}
+                    loadingColumns={loadingColumns}
+                    columnCache={columnCache}
+                    columnErrors={columnErrors}
+                    refreshError={refreshErrors?.get(conn.id)}
+                    hasGroup={hasGroup}
+                    onToggle={toggleConn}
+                    onRefresh={handleRefresh}
+                    onEdit={onEdit}
+                    onDelete={onDelete}
+                    onOpenTable={onOpenTable}
+                    onToggleTable={toggleTable}
+                    onFilterChange={handleFilterChange}
+                  />
+                ))}
               </div>
             )}
           </div>
@@ -233,88 +168,3 @@ export function ConnectionList({
     </div>
   );
 }
-
-/* ---------- Schema > Table > Column tree ---------- */
-
-function SchemaTableTree({ connId, connType, schemas, isSingleSchema, filter, expandedTables, loadingColumns, columnCache, onToggleTable, onOpenTable }: {
-  connId: number;
-  connType: "sqlite" | "postgres";
-  schemas: Map<string, CachedTable[]>;
-  isSingleSchema: boolean;
-  filter: string;
-  expandedTables: Set<string>;
-  loadingColumns: Set<string>;
-  columnCache?: Map<string, ColumnInfo[]>;
-  onToggleTable: (connId: number, tableName: string, schemaName: string) => void;
-  onOpenTable: (tableName: string, schemaName: string) => void;
-}) {
-  const filterLower = filter.toLowerCase();
-
-  return (
-    <div className="overflow-y-auto" style={{ maxHeight: 300 }}>
-      {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}>
-            {/* Schema label (only for postgres with multiple schemas) */}
-            {!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);
-
-              return (
-                <div key={tableKey}>
-                  {/* Table row */}
-                  <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>
-
-                  {/* Columns (lazy loaded) */}
-                  {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>}
-                      {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 && !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>
-  );
-}