@hienlh/ppm 0.2.16 → 0.2.18

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

@@ -1,9 +1,10 @@
-import { Moon, Sun, Monitor } from "lucide-react";
+import { Moon, Sun, Monitor, Bell, BellOff } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
 import { useSettingsStore, type Theme } from "@/stores/settings-store";
 import { cn } from "@/lib/utils";
 import { AISettingsSection } from "./ai-settings-section";
+import { usePushNotification } from "@/hooks/use-push-notification";
 
 const THEME_OPTIONS: { value: Theme; label: string; icon: React.ElementType }[] = [
   { value: "light", label: "Light", icon: Sun },
@@ -11,8 +12,13 @@ const THEME_OPTIONS: { value: Theme; label: string; icon: React.ElementType }[]
   { value: "system", label: "System", icon: Monitor },
 ];
 
+const pushSupported = "PushManager" in window && "serviceWorker" in navigator;
+const isIosNonPwa = /iPhone|iPad/.test(navigator.userAgent) &&
+  !window.matchMedia("(display-mode: standalone)").matches;
+
 export function SettingsTab() {
   const { theme, setTheme } = useSettingsStore();
+  const { permission, isSubscribed, loading, subscribe, unsubscribe } = usePushNotification();
 
   return (
     <div className="h-full p-4 space-y-6 overflow-auto max-w-lg">
@@ -48,6 +54,44 @@ export function SettingsTab() {
 
       <Separator />
 
+      <div className="space-y-3">
+        <h3 className="text-sm font-medium text-text-secondary">Notifications</h3>
+        {!pushSupported ? (
+          <p className="text-sm text-text-subtle">
+            Push notifications are not supported in this browser.
+          </p>
+        ) : (
+          <>
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                {isSubscribed ? <Bell className="size-4" /> : <BellOff className="size-4" />}
+                <span className="text-sm">Push notifications</span>
+              </div>
+              <Button
+                variant={isSubscribed ? "default" : "outline"}
+                size="sm"
+                disabled={loading || permission === "denied"}
+                onClick={() => (isSubscribed ? unsubscribe() : subscribe())}
+              >
+                {loading ? "..." : isSubscribed ? "On" : "Off"}
+              </Button>
+            </div>
+            {permission === "denied" && (
+              <p className="text-xs text-destructive">
+                Notifications blocked. Enable in browser settings.
+              </p>
+            )}
+            {isIosNonPwa && (
+              <p className="text-xs text-text-subtle">
+                On iOS, install PPM to Home Screen for push notifications.
+              </p>
+            )}
+          </>
+        )}
+      </div>
+
+      <Separator />
+
       <div className="space-y-3">
         <h3 className="text-sm font-medium text-text-secondary">About</h3>
         <p className="text-sm text-text-secondary">

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

@@ -43,6 +43,7 @@ export function useChat(sessionId: string | null, providerId = "claude-sdk", pro
   const isStreamingRef = useRef(false);
   const pendingMessageRef = useRef<string | null>(null);
   const sendRef = useRef<(data: string) => void>(() => {});
+  const refetchRef = useRef<(() => void) | null>(null);
 
   const handleMessage = useCallback((event: MessageEvent) => {
     let data: ChatWsServerMessage;
@@ -55,12 +56,32 @@ export function useChat(sessionId: string | null, providerId = "claude-sdk", pro
     // Ignore keepalive pings
     if ((data as any).type === "ping") return;
 
-    // Handle connected event (custom, not in type)
+    // Handle connected event (new session)
     if ((data as any).type === "connected") {
       setIsConnected(true);
       return;
     }
 
+    // Handle status event (FE reconnected to existing session)
+    if ((data as any).type === "status") {
+      setIsConnected(true);
+      const status = data as any;
+      if (status.isStreaming) {
+        isStreamingRef.current = true;
+        setIsStreaming(true);
+      }
+      if (status.pendingApproval) {
+        setPendingApproval({
+          requestId: status.pendingApproval.requestId,
+          tool: status.pendingApproval.tool,
+          input: status.pendingApproval.input,
+        });
+      }
+      // Refetch history to catch up on events missed during disconnect
+      refetchRef.current?.();
+      return;
+    }
+
     switch (data.type) {
       case "text": {
         streamingContentRef.current += data.content;
@@ -379,10 +400,12 @@ export function useChat(sessionId: string | null, providerId = "claude-sdk", pro
   const reconnect = useCallback(() => {
     setIsConnected(false);
     wsReconnect();
+    // Refetch history on manual reconnect to catch up on missed events
+    refetchRef.current?.();
   }, [wsReconnect]);
 
   const refetchMessages = useCallback(() => {
-    if (!sessionId || !projectName || isStreamingRef.current) return;
+    if (!sessionId || !projectName) return;
     setMessagesLoading(true);
     fetch(`${projectUrl(projectName)}/chat/sessions/${sessionId}/messages?providerId=${providerId}`, {
       headers: { Authorization: `Bearer ${getAuthToken()}` },
@@ -391,12 +414,18 @@ export function useChat(sessionId: string | null, providerId = "claude-sdk", pro
       .then((json: any) => {
         if (json.ok && Array.isArray(json.data) && json.data.length > 0) {
           setMessages(json.data);
+          // Reset streaming content refs so live tokens append cleanly after history
+          streamingContentRef.current = "";
+          streamingEventsRef.current = [];
         }
       })
       .catch(() => {})
       .finally(() => setMessagesLoading(false));
   }, [sessionId, providerId, projectName]);
 
+  // Keep refetchRef in sync so handleMessage (status event) can trigger refetch
+  refetchRef.current = refetchMessages;
+
   return {
     messages,
     messagesLoading,

package/src/web/hooks/use-global-keybindings.ts

@@ -1,5 +1,6 @@
 import { useEffect, useState, useCallback } from "react";
 import { useTabStore } from "@/stores/tab-store";
+import { useSettingsStore } from "@/stores/settings-store";
 
 /**
  * Global keyboard shortcuts.
@@ -29,6 +30,13 @@ export function useGlobalKeybindings() {
       // Keydown shortcuts
       if (e.type !== "keydown") return;
 
+      // Cmd/Ctrl+B → Toggle sidebar
+      if (e.key === "b" && (e.metaKey || e.ctrlKey) && !e.altKey && !e.shiftKey) {
+        e.preventDefault();
+        useSettingsStore.getState().toggleSidebar();
+        return;
+      }
+
       // Alt+] / Alt+[ → Cycle tabs
       if (e.altKey && !e.ctrlKey && !e.metaKey && (e.key === "]" || e.key === "[")) {
         e.preventDefault();

package/src/web/hooks/use-push-notification.ts

@@ -0,0 +1,96 @@
+import { useState, useEffect, useCallback } from "react";
+import { getAuthToken } from "@/lib/api-client";
+
+/** Convert VAPID public key from base64url to Uint8Array for PushManager */
+function urlBase64ToUint8Array(base64String: string): Uint8Array {
+  const padding = "=".repeat((4 - (base64String.length % 4)) % 4);
+  const base64 = (base64String + padding).replace(/-/g, "+").replace(/_/g, "/");
+  const rawData = atob(base64);
+  return Uint8Array.from(rawData, (char) => char.charCodeAt(0));
+}
+
+export function usePushNotification() {
+  const [permission, setPermission] = useState<NotificationPermission>("default");
+  const [isSubscribed, setIsSubscribed] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  // Check current permission and subscription state on mount
+  useEffect(() => {
+    if ("Notification" in window) {
+      setPermission(Notification.permission);
+    }
+    setIsSubscribed(localStorage.getItem("ppm-push-subscribed") === "true");
+  }, []);
+
+  const subscribe = useCallback(async () => {
+    setLoading(true);
+    try {
+      // 1. Request notification permission
+      const perm = await Notification.requestPermission();
+      setPermission(perm);
+      if (perm !== "granted") return;
+
+      // 2. Get VAPID public key from server
+      const headers: Record<string, string> = {};
+      const token = getAuthToken();
+      if (token) headers.Authorization = `Bearer ${token}`;
+
+      const res = await fetch("/api/push/vapid-key", { headers });
+      const json = await res.json();
+      if (!json.ok) throw new Error(json.error || "Failed to get VAPID key");
+
+      // 3. Subscribe via PushManager
+      const reg = await navigator.serviceWorker.ready;
+      const sub = await reg.pushManager.subscribe({
+        userVisibleOnly: true,
+        applicationServerKey: urlBase64ToUint8Array(json.data.publicKey).buffer as ArrayBuffer,
+      });
+
+      // 4. Send subscription to server
+      await fetch("/api/push/subscribe", {
+        method: "POST",
+        headers: { ...headers, "Content-Type": "application/json" },
+        body: JSON.stringify(sub.toJSON()),
+      });
+
+      setIsSubscribed(true);
+      localStorage.setItem("ppm-push-subscribed", "true");
+    } catch (err) {
+      console.error("[push] Subscribe failed:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const unsubscribe = useCallback(async () => {
+    setLoading(true);
+    try {
+      const reg = await navigator.serviceWorker.ready;
+      const sub = await reg.pushManager.getSubscription();
+      if (sub) {
+        // Remove from server
+        const headers: Record<string, string> = { "Content-Type": "application/json" };
+        const token = getAuthToken();
+        if (token) headers.Authorization = `Bearer ${token}`;
+
+        await fetch("/api/push/subscribe", {
+          method: "DELETE",
+          headers,
+          body: JSON.stringify({ endpoint: sub.endpoint }),
+        });
+
+        // Unsubscribe locally
+        await sub.unsubscribe();
+      }
+
+      setIsSubscribed(false);
+      localStorage.removeItem("ppm-push-subscribed");
+    } catch (err) {
+      console.error("[push] Unsubscribe failed:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  return { permission, isSubscribed, loading, subscribe, unsubscribe };
+}

package/src/web/hooks/use-tab-drag.ts

@@ -0,0 +1,109 @@
+import { useRef, useState, useCallback, useSyncExternalStore } from "react";
+import { usePanelStore } from "@/stores/panel-store";
+
+export const TAB_DRAG_TYPE = "application/ppm-tab";
+
+export interface DragPayload {
+  tabId: string;
+  panelId: string;
+}
+
+// ---------------------------------------------------------------------------
+// Global drag state — lets overlays know a tab drag is in progress
+// ---------------------------------------------------------------------------
+let _dragging = false;
+const _listeners = new Set<() => void>();
+
+function setDragging(v: boolean) {
+  if (_dragging === v) return;
+  _dragging = v;
+  _listeners.forEach((fn) => fn());
+}
+
+export function useIsDraggingTab(): boolean {
+  return useSyncExternalStore(
+    (cb) => { _listeners.add(cb); return () => _listeners.delete(cb); },
+    () => _dragging,
+  );
+}
+
+/** Call from any drop handler to clear global drag state */
+export function clearDragging() {
+  setDragging(false);
+}
+
+// ---------------------------------------------------------------------------
+// Hook for tab bar DnD
+// ---------------------------------------------------------------------------
+export function useTabDrag(panelId: string) {
+  const [dropIndex, setDropIndex] = useState<number | null>(null);
+  const dragOverRef = useRef<string | null>(null);
+
+  const handleDragStart = useCallback(
+    (e: React.DragEvent, tabId: string) => {
+      const payload: DragPayload = { tabId, panelId };
+      e.dataTransfer.setData(TAB_DRAG_TYPE, JSON.stringify(payload));
+      e.dataTransfer.effectAllowed = "move";
+      // Delay so browser captures the drag image first
+      requestAnimationFrame(() => setDragging(true));
+    },
+    [panelId],
+  );
+
+  const handleDragOver = useCallback(
+    (e: React.DragEvent, tabId: string, tabIndex: number) => {
+      if (!e.dataTransfer.types.includes(TAB_DRAG_TYPE)) return;
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "move";
+
+      if (dragOverRef.current === tabId) return;
+      dragOverRef.current = tabId;
+
+      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+      const midX = rect.left + rect.width / 2;
+      setDropIndex(e.clientX < midX ? tabIndex : tabIndex + 1);
+    },
+    [],
+  );
+
+  const handleDragOverBar = useCallback(
+    (e: React.DragEvent) => {
+      if (!e.dataTransfer.types.includes(TAB_DRAG_TYPE)) return;
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "move";
+    },
+    [],
+  );
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      setDragging(false);
+      const raw = e.dataTransfer.getData(TAB_DRAG_TYPE);
+      if (!raw) return;
+
+      try {
+        const payload = JSON.parse(raw) as DragPayload;
+        const store = usePanelStore.getState();
+
+        if (payload.panelId === panelId) {
+          if (dropIndex !== null) store.reorderTab(payload.tabId, panelId, dropIndex);
+        } else {
+          store.moveTab(payload.tabId, payload.panelId, panelId, dropIndex ?? undefined);
+        }
+      } catch { /* ignore */ }
+
+      setDropIndex(null);
+      dragOverRef.current = null;
+    },
+    [panelId, dropIndex],
+  );
+
+  const handleDragEnd = useCallback(() => {
+    setDragging(false);
+    setDropIndex(null);
+    dragOverRef.current = null;
+  }, []);
+
+  return { dropIndex, handleDragStart, handleDragOver, handleDragOverBar, handleDrop, handleDragEnd };
+}