@hienlh/ppm 0.13.20 → 0.13.22

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/components/layout/command-palette.tsx

@@ -371,7 +371,8 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
 
     // Normal mode
     if (!deferredQuery.trim()) return actionCommands;
-    const qLower = deferredQuery.toLowerCase();
+    // Strip leading ./ or ../ — index paths are relative without dot prefix
+    const qLower = deferredQuery.toLowerCase().replace(/^\.\.?\//, "");
     const scored: Array<{ cmd: CommandItem; score: FileSearchScore }> = [];
     for (const entry of searchIndex) {
       const s = scoreFileSearchFast(qLower, entry.filenameLower, entry.pathLower, entry.labelLen, entry.depth);
@@ -383,6 +384,13 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
     return deferredQuery.trim().length >= 2 ? [...dbCommands, ...matched] : matched;
   }, [searchIndex, actionCommands, fsCommands, dbCommands, deferredQuery]);
 
+  // Auto-load file index when palette opens and index isn't ready
+  useEffect(() => {
+    if (open && indexStatus === "idle" && activeProject) {
+      loadIndex(activeProject.name);
+    }
+  }, [open, indexStatus, activeProject, loadIndex]);
+
   // Reset state when opening
   useEffect(() => {
     if (open) {
@@ -484,7 +492,7 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
         )}
 
         {/* Index status hints — non-blocking, muted */}
-        {!pathMode && indexStatus === "loading" && (
+        {!pathMode && (indexStatus === "loading" || indexStatus === "idle") && (
           <div className="flex items-center gap-1.5 px-3 py-1.5 border-b border-border/50">
             <Loader2 className="size-3 animate-spin text-text-subtle shrink-0" />
             <span className="text-[11px] text-text-subtle italic">Indexing project…</span>

package/src/web/components/layout/editor-panel.tsx

@@ -1,5 +1,5 @@
-import { Suspense, lazy, useCallback } from "react";
-import { Loader2, Terminal, MessageSquare, FilePlus } from "lucide-react";
+import { useCallback, useEffect } from "react";
+import { Terminal, MessageSquare, FilePlus } from "lucide-react";
 import { usePanelStore } from "@/stores/panel-store";
 import { useProjectStore } from "@/stores/project-store";
 import { useTabStore, type TabType } from "@/stores/tab-store";
@@ -7,6 +7,7 @@ import { SessionListPanel } from "@/components/chat/session-list-panel";
 import type { SessionInfo } from "../../../types/chat";
 import { TabBar } from "./tab-bar";
 import { SplitDropOverlay } from "./split-drop-overlay";
+import { registerPanelSlot } from "./tab-pool";
 import { cn } from "@/lib/utils";
 
 const QUICK_OPEN_TABS: { type: TabType; label: string; icon: React.ElementType }[] = [
@@ -15,21 +16,6 @@ const QUICK_OPEN_TABS: { type: TabType; label: string; icon: React.ElementType }
   { type: "editor", label: "New File", icon: FilePlus },
 ];
 
-const TAB_COMPONENTS: Record<TabType, React.LazyExoticComponent<React.ComponentType<{ metadata?: Record<string, unknown>; tabId?: string }>>> = {
-  terminal: lazy(() => import("@/components/terminal/terminal-tab").then((m) => ({ default: m.TerminalTab }))),
-  chat: lazy(() => import("@/components/chat/chat-tab").then((m) => ({ default: m.ChatTab }))),
-  editor: lazy(() => import("@/components/editor/code-editor").then((m) => ({ default: m.CodeEditor }))),
-  database: lazy(() => import("@/components/database/database-viewer").then((m) => ({ default: m.DatabaseViewer }))),
-  sqlite: lazy(() => import("@/components/sqlite/sqlite-viewer").then((m) => ({ default: m.SqliteViewer }))),
-  postgres: lazy(() => import("@/components/postgres/postgres-viewer").then((m) => ({ default: m.PostgresViewer }))),
-  "git-diff": lazy(() => import("@/components/editor/diff-viewer").then((m) => ({ default: m.DiffViewer }))),
-  settings: lazy(() => import("@/components/settings/settings-tab").then((m) => ({ default: m.SettingsTab }))),
-  ports: lazy(() => import("@/components/ports/port-forwarding-tab").then((m) => ({ default: m.PortForwardingTab }))),
-  extension: lazy(() => import("@/components/extensions/extension-webview").then((m) => ({ default: m.ExtensionWebview }))),
-  "extension-webview": lazy(() => import("@/components/extensions/extension-webview").then((m) => ({ default: m.ExtensionWebview }))),
-  "conflict-editor": lazy(() => import("@/components/editor/conflict-editor").then((m) => ({ default: m.ConflictEditor }))),
-};
-
 interface EditorPanelProps {
   panelId: string;
   projectName: string;
@@ -43,6 +29,15 @@ export function EditorPanel({ panelId, projectName }: EditorPanelProps) {
     return grid.flat().length;
   });
 
+  // Register this panel's content area as a portal slot for TabPool.
+  // Using callback ref so registration happens synchronously when the DOM mounts,
+  // avoiding a frame delay that useEffect would cause.
+  const slotCallbackRef = useCallback((el: HTMLDivElement | null) => {
+    registerPanelSlot(panelId, el);
+  }, [panelId]);
+  // Cleanup on unmount (panelId change is handled by callback ref re-firing)
+  useEffect(() => () => registerPanelSlot(panelId, null), [panelId]);
+
   if (!panel) return null;
 
   return (
@@ -57,28 +52,10 @@ export function EditorPanel({ panelId, projectName }: EditorPanelProps) {
       <TabBar panelId={panelId} />
 
       <div className="flex-1 overflow-hidden relative" data-panel-drop-zone={panelId}>
-        {panel.tabs.length === 0 ? (
-          <EmptyPanel panelId={panelId} />
-        ) : (
-          panel.tabs.map((tab) => {
-            const Component = TAB_COMPONENTS[tab.type];
-            const isActive = tab.id === panel.activeTabId;
-            if (!Component) {
-              return (
-                <div key={tab.id} className={isActive ? "absolute inset-0 flex items-center justify-center text-muted-foreground" : "hidden"}>
-                  Unknown tab type: {tab.type}
-                </div>
-              );
-            }
-            return (
-              <div key={tab.id} className="absolute inset-0" style={isActive ? undefined : { opacity: 0, pointerEvents: "none" }}>
-                <Suspense fallback={<div className="flex items-center justify-center h-full"><Loader2 className="size-6 animate-spin text-primary" /></div>}>
-                  <Component metadata={tab.metadata} tabId={tab.id} />
-                </Suspense>
-              </div>
-            );
-          })
-        )}
+        {panel.tabs.length === 0 && <EmptyPanel panelId={panelId} />}
+        {/* Always render the slot so TabPool can portal into it immediately.
+            Hidden when empty to let EmptyPanel show through. */}
+        <div ref={slotCallbackRef} className="absolute inset-0" style={panel.tabs.length === 0 ? { display: "none" } : undefined} />
         <SplitDropOverlay panelId={panelId} />
       </div>
     </div>

package/src/web/components/layout/tab-pool.tsx

@@ -0,0 +1,196 @@
+/**
+ * TabPool — persistent tab rendering with DOM reparenting.
+ *
+ * All tab components are mounted ONCE in a hidden off-screen container and
+ * never unmounted when moved between panels or split. useLayoutEffect
+ * physically moves each tab's wrapper DOM node into the correct panel slot
+ * via appendChild (which moves, not clones). Component instances, hooks,
+ * and all internal state (xterm buffer, Monaco editor, chat scroll) survive.
+ *
+ * Why not createPortal? Changing a portal's container element causes React
+ * to unmount/remount the children — defeating the purpose.
+ */
+import { useRef, useLayoutEffect, useSyncExternalStore, Suspense, lazy } from "react";
+import { Loader2 } from "lucide-react";
+import { usePanelStore } from "@/stores/panel-store";
+import type { TabType } from "@/stores/tab-store";
+
+// ---------------------------------------------------------------------------
+// Lazy tab components (single source of truth for all tab types)
+// ---------------------------------------------------------------------------
+const TAB_COMPONENTS: Record<TabType, React.LazyExoticComponent<React.ComponentType<{ metadata?: Record<string, unknown>; tabId?: string }>>> = {
+  terminal: lazy(() => import("@/components/terminal/terminal-tab").then((m) => ({ default: m.TerminalTab }))),
+  chat: lazy(() => import("@/components/chat/chat-tab").then((m) => ({ default: m.ChatTab }))),
+  editor: lazy(() => import("@/components/editor/code-editor").then((m) => ({ default: m.CodeEditor }))),
+  database: lazy(() => import("@/components/database/database-viewer").then((m) => ({ default: m.DatabaseViewer }))),
+  sqlite: lazy(() => import("@/components/sqlite/sqlite-viewer").then((m) => ({ default: m.SqliteViewer }))),
+  postgres: lazy(() => import("@/components/postgres/postgres-viewer").then((m) => ({ default: m.PostgresViewer }))),
+  "git-diff": lazy(() => import("@/components/editor/diff-viewer").then((m) => ({ default: m.DiffViewer }))),
+  settings: lazy(() => import("@/components/settings/settings-tab").then((m) => ({ default: m.SettingsTab }))),
+  ports: lazy(() => import("@/components/ports/port-forwarding-tab").then((m) => ({ default: m.PortForwardingTab }))),
+  extension: lazy(() => import("@/components/extensions/extension-webview").then((m) => ({ default: m.ExtensionWebview }))),
+  "extension-webview": lazy(() => import("@/components/extensions/extension-webview").then((m) => ({ default: m.ExtensionWebview }))),
+  "conflict-editor": lazy(() => import("@/components/editor/conflict-editor").then((m) => ({ default: m.ConflictEditor }))),
+};
+
+// ---------------------------------------------------------------------------
+// Slot registry — panels register their content container refs here
+// ---------------------------------------------------------------------------
+type SlotListener = () => void;
+
+class SlotRegistry {
+  private slots = new Map<string, HTMLDivElement>();
+  private listeners = new Set<SlotListener>();
+  private version = 0;
+
+  register(panelId: string, el: HTMLDivElement | null) {
+    if (el) {
+      if (this.slots.get(panelId) === el) return;
+      this.slots.set(panelId, el);
+    } else {
+      if (!this.slots.has(panelId)) return;
+      this.slots.delete(panelId);
+    }
+    this.version++;
+    this.listeners.forEach((fn) => fn());
+  }
+
+  get(panelId: string): HTMLDivElement | undefined {
+    return this.slots.get(panelId);
+  }
+
+  subscribe(fn: SlotListener): () => void {
+    this.listeners.add(fn);
+    return () => this.listeners.delete(fn);
+  }
+
+  getVersion(): number {
+    return this.version;
+  }
+}
+
+const registry = new SlotRegistry();
+
+/** Called by EditorPanel to register its content slot */
+export function registerPanelSlot(panelId: string, el: HTMLDivElement | null) {
+  registry.register(panelId, el);
+}
+
+// ---------------------------------------------------------------------------
+// TabPool — renders all tabs in a hidden container, reparents into slots
+// ---------------------------------------------------------------------------
+export function TabPool() {
+  // Re-render when slots change (panel mount/unmount)
+  useSyncExternalStore(
+    (cb) => registry.subscribe(cb),
+    () => registry.getVersion(),
+  );
+
+  const panels = usePanelStore((s) => s.panels);
+  const grid = usePanelStore((s) => s.grid);
+
+  // Collect all tabs across visible panels (only panels in current grid)
+  const visiblePanelIds = new Set(grid.flat());
+  const tabEntries: { tabId: string; panelId: string; type: TabType; metadata?: Record<string, unknown>; isActive: boolean }[] = [];
+
+  for (const panelId of visiblePanelIds) {
+    const panel = panels[panelId];
+    if (!panel) continue;
+    for (const tab of panel.tabs) {
+      tabEntries.push({
+        tabId: tab.id,
+        panelId,
+        type: tab.type,
+        metadata: tab.metadata,
+        isActive: tab.id === panel.activeTabId,
+      });
+    }
+  }
+
+  // Stable key order — prevents React from calling insertBefore() to reorder
+  // children, which would yank reparented DOM nodes back to the hidden container
+  // and reset scroll positions / trigger resize observers.
+  tabEntries.sort((a, b) => a.tabId.localeCompare(b.tabId));
+
+  return (
+    // Off-screen mount point. React mounts tab wrappers here, then
+    // useLayoutEffect moves them into panel slots before the browser paints.
+    <div style={{ position: "fixed", top: 0, left: 0, width: 0, height: 0, overflow: "hidden", pointerEvents: "none", visibility: "hidden" }}>
+      {tabEntries.map((entry) => (
+        <ReparentingTab
+          key={entry.tabId}
+          tabId={entry.tabId}
+          panelId={entry.panelId}
+          type={entry.type}
+          metadata={entry.metadata}
+          isActive={entry.isActive}
+        />
+      ))}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ReparentingTab — mounts once, physically moves between panel slots
+// ---------------------------------------------------------------------------
+interface ReparentingTabProps {
+  tabId: string;
+  panelId: string;
+  type: TabType;
+  metadata?: Record<string, unknown>;
+  isActive: boolean;
+}
+
+function ReparentingTab({ tabId, panelId, type, metadata, isActive }: ReparentingTabProps) {
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const Component = TAB_COMPONENTS[type];
+
+  // Imperatively move the wrapper DOM node into the correct panel slot.
+  // appendChild on an already-mounted node moves it (DOM spec — no clone/destroy).
+  // useLayoutEffect runs before paint, so the user never sees the off-screen state.
+  // No deps — must run every render because React's reconciliation may call
+  // insertBefore() to reorder keyed children, moving reparented nodes back
+  // to the hidden container. The early-return guard keeps this cheap.
+  useLayoutEffect(() => {
+    const wrapper = wrapperRef.current;
+    const slot = registry.get(panelId);
+    if (!wrapper || !slot || wrapper.parentElement === slot) return;
+
+    // Save scroll positions — appendChild resets them during the DOM move
+    const scrollables: { el: Element; top: number; left: number }[] = [];
+    wrapper.querySelectorAll("*").forEach((el) => {
+      if (el.scrollTop || el.scrollLeft) {
+        scrollables.push({ el, top: el.scrollTop, left: el.scrollLeft });
+      }
+    });
+
+    slot.appendChild(wrapper);
+
+    // Restore scroll positions synchronously before paint
+    for (const { el, top, left } of scrollables) {
+      el.scrollTop = top;
+      el.scrollLeft = left;
+    }
+  });
+
+  if (!Component) return null;
+
+  return (
+    <div
+      ref={wrapperRef}
+      className="absolute inset-0"
+      style={isActive ? undefined : { opacity: 0, pointerEvents: "none" }}
+      data-tab-pool-id={tabId}
+    >
+      <Suspense
+        fallback={
+          <div className="flex items-center justify-center h-full">
+            <Loader2 className="size-6 animate-spin text-primary" />
+          </div>
+        }
+      >
+        <Component metadata={metadata} tabId={tabId} />
+      </Suspense>
+    </div>
+  );
+}

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