@hienlh/ppm 0.2.17 → 0.2.18

package/src/server/ws/chat.ts

@@ -4,13 +4,8 @@ import { resolveProjectPath } from "../helpers/resolve-project.ts";
 import { logSessionEvent } from "../../services/session-log.service.ts";
 import type { ChatWsClientMessage } from "../../types/api.ts";
 
-/** Tracks active chat WS connections: sessionId -> ws + abort controller + project context */
-const activeSessions = new Map<
-  string,
-  { providerId: string; ws: ChatWsSocket; abort?: AbortController; projectPath?: string; pingInterval?: ReturnType<typeof setInterval> }
->();
-
 const PING_INTERVAL_MS = 15_000; // 15s keepalive
+const CLEANUP_TIMEOUT_MS = 5 * 60_000; // 5min after Claude done + no FE
 
 type ChatWsSocket = {
   data: { type: string; sessionId: string; projectName?: string };
@@ -18,29 +13,197 @@ type ChatWsSocket = {
   ping?: (data?: string | ArrayBuffer) => void;
 };
 
+interface SessionEntry {
+  providerId: string;
+  ws: ChatWsSocket | null;
+  abort?: AbortController;
+  projectPath?: string;
+  projectName?: string;
+  pingInterval?: ReturnType<typeof setInterval>;
+  isStreaming: boolean;
+  cleanupTimer?: ReturnType<typeof setTimeout>;
+  pendingApprovalEvent?: { type: string; requestId: string; tool: string; input: unknown };
+  /** When true, accumulate text events until next turn boundary, then flush as one message */
+  needsCatchUp: boolean;
+  /** Accumulated text content during catch-up phase */
+  catchUpText: string;
+  /** Reference to the running stream promise — prevents GC */
+  streamPromise?: Promise<void>;
+}
+
+/** Tracks active sessions — persists even when FE disconnects */
+const activeSessions = new Map<string, SessionEntry>();
+
+/** Send event to FE if connected, silently drop otherwise */
+function safeSend(sessionId: string, event: unknown): void {
+  const entry = activeSessions.get(sessionId);
+  if (!entry?.ws) return;
+  try {
+    entry.ws.send(JSON.stringify(event));
+  } catch {
+    // WS may have closed between check and send — ignore
+  }
+}
+
+/** Start cleanup timer — only called when Claude is done AND no FE connected */
+function startCleanupTimer(sessionId: string): void {
+  const entry = activeSessions.get(sessionId);
+  if (!entry) return;
+  if (entry.cleanupTimer) clearTimeout(entry.cleanupTimer);
+  entry.cleanupTimer = setTimeout(() => {
+    console.log(`[chat] session=${sessionId} cleanup: no FE reconnected within timeout`);
+    logSessionEvent(sessionId, "INFO", "Session cleaned up (no FE reconnected)");
+    if (entry.pingInterval) clearInterval(entry.pingInterval);
+    activeSessions.delete(sessionId);
+  }, CLEANUP_TIMEOUT_MS);
+}
+
+/**
+ * Standalone streaming loop — decoupled from WS message handler.
+ * Runs independently so WS close does NOT kill the Claude query.
+ */
+async function runStreamLoop(sessionId: string, providerId: string, content: string): Promise<void> {
+  const entry = activeSessions.get(sessionId);
+  if (!entry) return;
+
+  const abortController = new AbortController();
+  entry.abort = abortController;
+  entry.isStreaming = true;
+  entry.pendingApprovalEvent = undefined;
+  entry.needsCatchUp = false;
+  entry.catchUpText = "";
+
+  try {
+    const userPreview = content.slice(0, 200);
+    logSessionEvent(sessionId, "USER", userPreview);
+    console.log(`[chat] session=${sessionId} sending message to provider=${providerId}`);
+    let eventCount = 0;
+
+
+    for await (const event of chatService.sendMessage(providerId, sessionId, content)) {
+      if (abortController.signal.aborted) break;
+      eventCount++;
+      const ev = event as any;
+      const evType = ev.type ?? "unknown";
+
+      // Log every event
+      if (evType === "text") {
+        logSessionEvent(sessionId, "TEXT", ev.content?.slice(0, 500) ?? "");
+      } else if (evType === "tool_use") {
+        logSessionEvent(sessionId, "TOOL_USE", `${ev.tool} ${JSON.stringify(ev.input).slice(0, 300)}`);
+      } else if (evType === "tool_result") {
+        logSessionEvent(sessionId, "TOOL_RESULT", `error=${ev.isError ?? false} ${(ev.output ?? "").slice(0, 300)}`);
+      } else if (evType === "error") {
+        logSessionEvent(sessionId, "ERROR", ev.message ?? JSON.stringify(ev).slice(0, 300));
+      } else if (evType === "done") {
+        logSessionEvent(sessionId, "DONE", `subtype=${ev.resultSubtype ?? "none"} turns=${ev.numTurns ?? "?"}`);
+        // Fire-and-forget push notification
+        import("../../services/push-notification.service.ts").then(({ pushService }) => {
+          const project = entry.projectName || "Project";
+          const session = chatService.getSession(sessionId);
+          const sessionTitle = session?.title || `Session ${sessionId.slice(0, 8)}`;
+          pushService.notifyAll("Chat completed", `${project} — ${sessionTitle}`).catch(() => {});
+        }).catch(() => {});
+      } else if (evType === "approval_request") {
+        entry.pendingApprovalEvent = ev;
+      } else {
+        logSessionEvent(sessionId, evType.toUpperCase(), JSON.stringify(ev).slice(0, 200));
+      }
+
+      // Catch-up mode: accumulate text, flush on turn boundary
+      if (entry.needsCatchUp) {
+        if (evType === "text") {
+          entry.catchUpText += ev.content ?? "";
+        } else {
+          // Non-text event = turn boundary → flush accumulated text, then send this event
+          if (entry.catchUpText) {
+            safeSend(sessionId, { type: "text", content: entry.catchUpText });
+          }
+          entry.needsCatchUp = false;
+          entry.catchUpText = "";
+          safeSend(sessionId, event);
+        }
+      } else {
+        safeSend(sessionId, event);
+      }
+    }
+
+    logSessionEvent(sessionId, "INFO", `Stream completed (${eventCount} events)`);
+    console.log(`[chat] session=${sessionId} stream completed (${eventCount} events)`);
+  } catch (e) {
+    const errMsg = (e as Error).message;
+    logSessionEvent(sessionId, "ERROR", `Exception: ${errMsg}`);
+    if (!abortController.signal.aborted) {
+      safeSend(sessionId, { type: "error", message: errMsg });
+    }
+  } finally {
+    entry.abort = undefined;
+    entry.isStreaming = false;
+    entry.pendingApprovalEvent = undefined;
+    entry.needsCatchUp = false;
+    entry.catchUpText = "";
+    // Claude is done — if no FE connected, start cleanup timer
+    if (!entry.ws) {
+      startCleanupTimer(sessionId);
+    }
+  }
+}
+
 /**
  * Chat WebSocket handler for Bun.serve().
- * Protocol: JSON messages as defined in ChatWsClientMessage / ChatWsServerMessage.
+ *
+ * Session lifecycle: BE owns Claude connection. FE disconnect does NOT abort Claude.
+ * Streaming runs in standalone async function, not tied to WS message handler.
  */
 export const chatWebSocket = {
   open(ws: ChatWsSocket) {
     const { sessionId, projectName } = ws.data;
-    // Look up session's actual provider, default to "claude-sdk"
     const session = chatService.getSession(sessionId);
     const providerId = session?.providerId ?? "claude-sdk";
 
-    // Resolve projectPath for skills/settings support
     let projectPath: string | undefined;
     if (projectName) {
       try { projectPath = resolveProjectPath(projectName); } catch { /* ignore */ }
     }
-
-    // Backfill projectPath on existing session
     if (session && !session.projectPath && projectPath) {
       session.projectPath = projectPath;
     }
 
-    // Start keepalive ping to prevent proxy/firewall from dropping idle connections
+    const existing = activeSessions.get(sessionId);
+    if (existing) {
+      // FE reconnecting to existing session — replace ws, clear cleanup timer
+      if (existing.cleanupTimer) {
+        clearTimeout(existing.cleanupTimer);
+        existing.cleanupTimer = undefined;
+      }
+      if (existing.pingInterval) clearInterval(existing.pingInterval);
+      existing.pingInterval = setInterval(() => {
+        try {
+          if (ws.ping) ws.ping();
+          else ws.send(JSON.stringify({ type: "ping" }));
+        } catch { /* ws may be closed */ }
+      }, PING_INTERVAL_MS);
+      existing.ws = ws;
+      if (projectPath) existing.projectPath = projectPath;
+      if (projectName) existing.projectName = projectName;
+
+      // If streaming, enter catch-up mode
+      if (existing.isStreaming) {
+        existing.needsCatchUp = true;
+        existing.catchUpText = "";
+      }
+
+      ws.send(JSON.stringify({
+        type: "status",
+        sessionId,
+        isStreaming: existing.isStreaming,
+        pendingApproval: existing.pendingApprovalEvent ?? null,
+      }));
+      console.log(`[chat] session=${sessionId} FE reconnected (streaming=${existing.isStreaming}, catchUp=${existing.needsCatchUp})`);
+      return;
+    }
+
+    // New session entry
     const pingInterval = setInterval(() => {
       try {
         if (ws.ping) ws.ping();
@@ -48,7 +211,16 @@ export const chatWebSocket = {
       } catch { /* ws may be closed */ }
     }, PING_INTERVAL_MS);
 
-    activeSessions.set(sessionId, { providerId, ws, projectPath, pingInterval });
+    activeSessions.set(sessionId, {
+      providerId,
+      ws,
+      projectPath,
+      projectName,
+      pingInterval,
+      isStreaming: false,
+      needsCatchUp: false,
+      catchUpText: "",
+    });
     ws.send(JSON.stringify({ type: "connected", sessionId }));
   },
 
@@ -69,8 +241,7 @@ export const chatWebSocket = {
     const providerId = entry?.providerId ?? "mock";
 
     if (parsed.type === "message") {
-      // Resume session in provider FIRST so it exists in activeSessions,
-      // then backfill projectPath — fixes tool execution when server restarted
+      // Resume session in provider first
       const provider = providerRegistry.get(providerId);
       if (provider && "resumeSession" in provider) {
         await (provider as any).resumeSession(sessionId);
@@ -79,101 +250,47 @@ export const chatWebSocket = {
         (provider as any).ensureProjectPath(sessionId, entry.projectPath);
       }
 
-      const abortController = new AbortController();
-      const entryRef = activeSessions.get(sessionId);
-      if (entryRef) entryRef.abort = abortController;
-
-      try {
-        const userPreview = parsed.content.slice(0, 200);
-        logSessionEvent(sessionId, "USER", userPreview);
-        console.log(`[chat] session=${sessionId} sending message to provider=${providerId}`);
-        let eventCount = 0;
-        for await (const event of chatService.sendMessage(
-          providerId,
-          sessionId,
-          parsed.content,
-        )) {
-          if (abortController.signal.aborted) break;
-          eventCount++;
-          const ev = event as any;
-          const evType = ev.type ?? "unknown";
-          // Log every event to session log
-          if (evType === "text") {
-            logSessionEvent(sessionId, "TEXT", ev.content?.slice(0, 500) ?? "");
-          } else if (evType === "tool_use") {
-            logSessionEvent(sessionId, "TOOL_USE", `${ev.tool} ${JSON.stringify(ev.input).slice(0, 300)}`);
-          } else if (evType === "tool_result") {
-            logSessionEvent(sessionId, "TOOL_RESULT", `error=${ev.isError ?? false} ${(ev.output ?? "").slice(0, 300)}`);
-          } else if (evType === "error") {
-            logSessionEvent(sessionId, "ERROR", ev.message ?? JSON.stringify(ev).slice(0, 300));
-          } else if (evType === "done") {
-            logSessionEvent(sessionId, "DONE", `subtype=${ev.resultSubtype ?? "none"} turns=${ev.numTurns ?? "?"}`);
-            // Fire-and-forget push notification with project + session title
-            import("../../services/push-notification.service.ts").then(({ pushService }) => {
-              const project = ws.data.projectName || "Project";
-              const session = chatService.getSession(sessionId);
-              const sessionTitle = session?.title || `Session ${sessionId.slice(0, 8)}`;
-              pushService.notifyAll("Chat completed", `${project} — ${sessionTitle}`).catch(() => {});
-            }).catch(() => {});
-          } else {
-            logSessionEvent(sessionId, evType.toUpperCase(), JSON.stringify(ev).slice(0, 200));
-          }
-          ws.send(JSON.stringify(event));
-        }
-        logSessionEvent(sessionId, "INFO", `Stream completed (${eventCount} events)`);
-        console.log(`[chat] session=${sessionId} stream completed (${eventCount} events)`);
-      } catch (e) {
-        const errMsg = (e as Error).message;
-        logSessionEvent(sessionId, "ERROR", `Exception: ${errMsg}`);
-        console.error(`[chat] session=${sessionId} error:`, errMsg);
-        if (!abortController.signal.aborted) {
-          ws.send(
-            JSON.stringify({
-              type: "error",
-              message: errMsg,
-            }),
-          );
-        }
-      } finally {
-        if (entryRef) entryRef.abort = undefined;
+      // Store promise reference on entry to prevent GC from collecting the async operation.
+      // Use setTimeout(0) to detach from WS handler's async scope.
+      if (entry) {
+        entry.streamPromise = new Promise<void>((resolve) => {
+          setTimeout(() => {
+            runStreamLoop(sessionId, providerId, parsed.content).then(resolve, resolve);
+          }, 0);
+        });
+      } else {
+        setTimeout(() => runStreamLoop(sessionId, providerId, parsed.content), 0);
       }
     } else if (parsed.type === "cancel") {
-      // Only abort the underlying SDK query — don't break the for-await loop.
-      // This lets Claude send its final message before the iterator ends naturally.
       const provider = providerRegistry.get(providerId);
       if (provider && "abortQuery" in provider && typeof (provider as any).abortQuery === "function") {
         (provider as any).abortQuery(sessionId);
       }
     } else if (parsed.type === "approval_response") {
-      // Route approval response to the provider
       const provider = providerRegistry.get(providerId);
       if (provider && typeof provider.resolveApproval === "function") {
-        provider.resolveApproval(
-          parsed.requestId,
-          parsed.approved,
-          (parsed as any).data,
-        );
+        provider.resolveApproval(parsed.requestId, parsed.approved, (parsed as any).data);
       }
+      if (entry) entry.pendingApprovalEvent = undefined;
     }
   },
 
   close(ws: ChatWsSocket) {
     const { sessionId } = ws.data;
     const entry = activeSessions.get(sessionId);
-    if (entry) {
-      // Stop keepalive ping
-      if (entry.pingInterval) clearInterval(entry.pingInterval);
-      // Force-break the for-await loop — no client to receive events anymore
-      if (entry.abort) {
-        entry.abort.abort();
-        entry.abort = undefined;
-      }
-      // Also abort the underlying SDK query so Claude stops working
-      const provider = providerRegistry.get(entry.providerId);
-      if (provider && "abortQuery" in provider && typeof (provider as any).abortQuery === "function") {
-        (provider as any).abortQuery(sessionId);
-      }
+    if (!entry) return;
+
+    if (entry.pingInterval) {
+      clearInterval(entry.pingInterval);
+      entry.pingInterval = undefined;
+    }
+
+    // Detach FE — do NOT abort Claude
+    entry.ws = null;
+    console.log(`[chat] session=${sessionId} FE disconnected (streaming=${entry.isStreaming})`);
+
+    if (!entry.isStreaming) {
+      startCleanupTimer(sessionId);
     }
-    activeSessions.delete(sessionId);
   },
 };

package/src/web/app.tsx

@@ -1,8 +1,7 @@
 import { useEffect, useState, useCallback } from "react";
 import { Toaster } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
-import { TabBar } from "@/components/layout/tab-bar";
-import { TabContent } from "@/components/layout/tab-content";
+import { PanelLayout } from "@/components/layout/panel-layout";
 import { Sidebar } from "@/components/layout/sidebar";
 import { MobileNav } from "@/components/layout/mobile-nav";
 import { MobileDrawer } from "@/components/layout/mobile-drawer";
@@ -148,15 +147,9 @@ export function App() {
           <Sidebar />
 
           {/* Content area */}
-          <div className="flex-1 flex flex-col overflow-hidden">
-            {/* Desktop tab bar */}
-            <TabBar />
-
-            {/* Tab content */}
-            <main className="flex-1 overflow-hidden pb-12 md:pb-0">
-              <TabContent />
-            </main>
-          </div>
+          <main className="flex-1 overflow-hidden pb-12 md:pb-0">
+            <PanelLayout />
+          </main>
         </div>
 
         {/* Mobile bottom nav */}

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

@@ -0,0 +1,58 @@
+import { X } from "lucide-react";
+import type { Tab, TabType } from "@/stores/tab-store";
+import { cn } from "@/lib/utils";
+
+interface DraggableTabProps {
+  tab: Tab;
+  isActive: boolean;
+  icon: React.ElementType;
+  showDropBefore: boolean;
+  onSelect: () => void;
+  onClose: () => void;
+  onDragStart: (e: React.DragEvent) => void;
+  onDragOver: (e: React.DragEvent) => void;
+  onDragEnd: () => void;
+  tabRef: (el: HTMLButtonElement | null) => void;
+}
+
+export function DraggableTab({
+  tab, isActive, icon: Icon, showDropBefore, onSelect, onClose,
+  onDragStart, onDragOver, onDragEnd, tabRef,
+}: DraggableTabProps) {
+  return (
+    <div className="relative flex items-center">
+      {showDropBefore && (
+        <div className="absolute left-0 top-1 bottom-1 w-0.5 bg-primary rounded-full z-10" />
+      )}
+      <button
+        ref={tabRef}
+        draggable
+        onClick={onSelect}
+        onDragStart={onDragStart}
+        onDragOver={onDragOver}
+        onDragEnd={onDragEnd}
+        className={cn(
+          "group flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-md whitespace-nowrap transition-colors",
+          "border-b-2 -mb-[1px] cursor-grab active:cursor-grabbing",
+          isActive
+            ? "border-primary bg-surface text-foreground"
+            : "border-transparent text-text-secondary hover:text-foreground hover:bg-surface-elevated",
+        )}
+      >
+        <Icon className="size-4" />
+        <span className="max-w-[120px] truncate">{tab.title}</span>
+        {tab.closable && (
+          <span
+            role="button"
+            tabIndex={0}
+            onClick={(e) => { e.stopPropagation(); onClose(); }}
+            onKeyDown={(e) => { if (e.key === "Enter") { e.stopPropagation(); onClose(); } }}
+            className="ml-1 opacity-0 group-hover:opacity-100 rounded-sm hover:bg-surface-elevated p-0.5 transition-opacity"
+          >
+            <X className="size-3" />
+          </span>
+        )}
+      </button>
+    </div>
+  );
+}

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

@@ -0,0 +1,64 @@
+import { Suspense, lazy } from "react";
+import { Loader2 } from "lucide-react";
+import { usePanelStore } from "@/stores/panel-store";
+import type { TabType } from "@/stores/tab-store";
+import { TabBar } from "./tab-bar";
+import { SplitDropOverlay } from "./split-drop-overlay";
+import { cn } from "@/lib/utils";
+
+const TAB_COMPONENTS: Record<TabType, React.LazyExoticComponent<React.ComponentType<{ metadata?: Record<string, unknown>; tabId?: string }>>> = {
+  projects: lazy(() => import("@/components/projects/project-list").then((m) => ({ default: m.ProjectList }))),
+  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 }))),
+  "git-graph": lazy(() => import("@/components/git/git-graph").then((m) => ({ default: m.GitGraph }))),
+  "git-status": lazy(() => import("@/components/git/git-status-panel").then((m) => ({ default: m.GitStatusPanel }))),
+  "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 }))),
+};
+
+interface EditorPanelProps {
+  panelId: string;
+}
+
+export function EditorPanel({ panelId }: EditorPanelProps) {
+  const panel = usePanelStore((s) => s.panels[panelId]);
+  const isFocused = usePanelStore((s) => s.focusedPanelId === panelId);
+  const panelCount = usePanelStore((s) => Object.keys(s.panels).length);
+
+  if (!panel) return null;
+
+  return (
+    <div
+      className={cn(
+        "flex flex-col h-full overflow-hidden",
+        panelCount > 1 && "border border-transparent",
+        panelCount > 1 && isFocused && "border-primary/30",
+      )}
+      onClick={() => usePanelStore.getState().setFocusedPanel(panelId)}
+    >
+      <TabBar panelId={panelId} />
+
+      <div className="flex-1 overflow-hidden relative">
+        {panel.tabs.length === 0 ? (
+          <div className="flex items-center justify-center h-full text-text-secondary text-sm">
+            Drop a tab here
+          </div>
+        ) : (
+          panel.tabs.map((tab) => {
+            const Component = TAB_COMPONENTS[tab.type];
+            const isActive = tab.id === panel.activeTabId;
+            return (
+              <div key={tab.id} className={isActive ? "h-full w-full" : "hidden"}>
+                <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>
+            );
+          })
+        )}
+        <SplitDropOverlay panelId={panelId} />
+      </div>
+    </div>
+  );
+}