@hienlh/ppm 0.18.14 → 0.18.15

package/src/web/components/remote-desktop/use-remote-input-capture.ts

@@ -0,0 +1,92 @@
+/**
+ * Captures pointer + keyboard on the canvas and forwards them as JSON over the caller's WS.
+ * `code` (physical key, layout-independent) is sent for keys, never `key` — the host maps
+ * `code` → VK, so a client-side layout mismatch can't inject the wrong character.
+ */
+import { useEffect, useCallback } from "react";
+import { fractionFromPoint } from "./remote-desktop-coords";
+
+type PointerButton = "left" | "right" | null;
+
+export function useRemoteInputCapture(
+  canvasRef: React.RefObject<HTMLCanvasElement | null>,
+  sendMessage: (msg: Record<string, unknown>) => void,
+  enabled: boolean,
+): void {
+  const sendPointer = useCallback((clientX: number, clientY: number, button: PointerButton, down: boolean | null) => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const { xFrac, yFrac } = fractionFromPoint(clientX, clientY, canvas.getBoundingClientRect());
+    sendMessage({ type: "pointer", xFrac, yFrac, button, down });
+  }, [canvasRef, sendMessage]);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || !enabled) return;
+
+    const toButton = (b: number): PointerButton => (b === 0 ? "left" : b === 2 ? "right" : null);
+    // A lost keyup (blur, tab hidden, WS drop) must not leave a modifier logically held on
+    // the host — force a release on every path that could lose the matching keyup.
+    const releaseAll = () => sendMessage({ type: "releaseAll" });
+
+    // Coalesce moves to one message per animation frame (~60Hz). Raw pointermove fires per
+    // pixel — unthrottled that floods the WS, and over a relayed tunnel the move backlog
+    // starves the button down/up that follow (clicks "don't land"). Down/up/keys are never
+    // throttled so they stay prompt.
+    let pendingMove: { x: number; y: number } | null = null;
+    let rafId = 0;
+    const flushMove = () => {
+      rafId = 0;
+      if (pendingMove) {
+        sendPointer(pendingMove.x, pendingMove.y, null, null);
+        pendingMove = null;
+      }
+    };
+    const flushPendingNow = () => {
+      if (rafId) { cancelAnimationFrame(rafId); rafId = 0; }
+      if (pendingMove) { sendPointer(pendingMove.x, pendingMove.y, null, null); pendingMove = null; }
+    };
+
+    const onPointerDown = (e: PointerEvent) => {
+      e.preventDefault();
+      canvas.setPointerCapture(e.pointerId);
+      canvas.focus();
+      flushPendingNow(); // land any queued move at the press position first
+      sendPointer(e.clientX, e.clientY, toButton(e.button), true);
+    };
+    const onPointerMove = (e: PointerEvent) => {
+      pendingMove = { x: e.clientX, y: e.clientY };
+      if (!rafId) rafId = requestAnimationFrame(flushMove);
+    };
+    const onPointerUp = (e: PointerEvent) => {
+      flushPendingNow();
+      sendPointer(e.clientX, e.clientY, toButton(e.button), false);
+    };
+    const onContextMenu = (e: MouseEvent) => e.preventDefault();
+    const onKeyDown = (e: KeyboardEvent) => { e.preventDefault(); sendMessage({ type: "key", code: e.code, down: true }); };
+    const onKeyUp = (e: KeyboardEvent) => { e.preventDefault(); sendMessage({ type: "key", code: e.code, down: false }); };
+    const onVisibilityChange = () => { if (document.hidden) releaseAll(); };
+
+    canvas.tabIndex = 0; // focusable so it can receive keydown/keyup at all
+    canvas.addEventListener("pointerdown", onPointerDown);
+    canvas.addEventListener("pointermove", onPointerMove);
+    canvas.addEventListener("pointerup", onPointerUp);
+    canvas.addEventListener("contextmenu", onContextMenu);
+    canvas.addEventListener("keydown", onKeyDown);
+    canvas.addEventListener("keyup", onKeyUp);
+    canvas.addEventListener("blur", releaseAll);
+    document.addEventListener("visibilitychange", onVisibilityChange);
+
+    return () => {
+      if (rafId) cancelAnimationFrame(rafId);
+      canvas.removeEventListener("pointerdown", onPointerDown);
+      canvas.removeEventListener("pointermove", onPointerMove);
+      canvas.removeEventListener("pointerup", onPointerUp);
+      canvas.removeEventListener("contextmenu", onContextMenu);
+      canvas.removeEventListener("keydown", onKeyDown);
+      canvas.removeEventListener("keyup", onKeyUp);
+      canvas.removeEventListener("blur", releaseAll);
+      document.removeEventListener("visibilitychange", onVisibilityChange);
+    };
+  }, [canvasRef, enabled, sendPointer, sendMessage]);
+}

package/src/web/components/tunnels/named-tunnel/named-tunnel-copy.ts

@@ -1,96 +1,96 @@
 /**
  * All user-facing strings for the named-tunnel setup flow, kept in one file so
- * a future i18n pass has a single place to swap. Vietnamese is the primary
- * language here — no English fallback is implemented yet.
+ * a future i18n pass has a single place to swap. English, like the rest of the
+ * PPM interface.
  */
 export const namedTunnelCopy = {
   askDomain: {
-    title: "Bạn đã có domain trên Cloudflare chưa?",
-    body: "Có domain riêng thì PPM có thể gắn một địa chỉ cố định (không đổi khi khởi động lại). Không có domain thì vẫn dùng bình thường với link tạm thời.",
-    yes: "Có",
-    no: "Chưa",
+    title: "Do you have a domain on Cloudflare?",
+    body: "With your own domain, PPM can keep one fixed address that survives restarts. Without one, everything still works through a temporary link.",
+    yes: "Yes",
+    no: "Not yet",
   },
   noDomain: {
-    title: "Không sao cả",
-    body: "PPM sẽ tiếp tục dùng link tạm thời (quick tunnel). Bạn có thể bật lại tính năng này bất cứ lúc nào trong mục Tunnel Manager.",
-    close: "Đóng",
+    title: "No problem",
+    body: "PPM will keep using a temporary link (quick tunnel). You can turn this on later from Tunnel Manager.",
+    close: "Close",
   },
   login: {
-    title: "Đăng nhập Cloudflare",
-    hint: "Mở link bên dưới để đăng nhập — có thể làm trên điện thoại nếu tiện hơn.",
-    finishOnPhone: "Có thể hoàn tất bước này trên điện thoại nếu dễ hơn.",
-    copy: "Sao chép",
-    copied: "Đã sao chép",
-    open: "Mở link",
-    waiting: "Đang chờ đăng nhập…",
-    slowTitle: "Vẫn đang đăng nhập?",
-    slowBody: "Cloudflare đôi khi mất vài phút. Tiến trình vẫn đang chạy — bạn có thể tiếp tục chờ hoặc huỷ.",
-    keepWaiting: "Tiếp tục chờ",
-    cancel: "Huỷ",
+    title: "Sign in to Cloudflare",
+    hint: "Open the link below to sign in — a phone works just as well.",
+    finishOnPhone: "You can finish this step on your phone if that is easier.",
+    copy: "Copy",
+    copied: "Copied",
+    open: "Open link",
+    waiting: "Waiting for sign-in…",
+    slowTitle: "Still signing in?",
+    slowBody: "Cloudflare sometimes takes a few minutes. The process is still running — keep waiting or cancel.",
+    keepWaiting: "Keep waiting",
+    cancel: "Cancel",
   },
   timeout: {
-    title: "Link đăng nhập đã hết hạn",
-    body: "Link cũ hết hạn sau 5 phút không dùng. Bấm Thử lại để lấy link mới.",
-    retry: "Thử lại",
+    title: "Sign-in link expired",
+    body: "The link expires after 5 minutes unused. Press Retry to get a fresh one.",
+    retry: "Retry",
   },
   cancelled: {
-    title: "Đã huỷ đăng nhập",
-    body: "Bạn đã huỷ quá trình đăng nhập Cloudflare.",
-    retry: "Thử lại",
+    title: "Sign-in cancelled",
+    body: "You cancelled the Cloudflare sign-in.",
+    retry: "Retry",
   },
   confirmZone: {
-    title: "Xác nhận vùng miền",
-    body: (zone: string) => `Máy này sẽ được gán một địa chỉ cố định dưới ${zone}. Tiếp tục?`,
-    confirm: "Tiếp tục",
-    startOver: "Bắt đầu lại",
+    title: "Confirm your zone",
+    body: (zone: string) => `This machine will get a fixed address under ${zone}. Continue?`,
+    confirm: "Continue",
+    startOver: "Start over",
   },
   needsRelogin: {
-    title: "Cần đăng nhập lại Cloudflare",
-    certInvalid: "Phiên đăng nhập Cloudflare đã hết hiệu lực.",
-    certMismatch: "Chứng chỉ này thuộc một tài khoản Cloudflare khác — cần đăng nhập lại.",
-    action: "Đăng nhập lại",
+    title: "Cloudflare sign-in needed",
+    certInvalid: "Your Cloudflare sign-in is no longer valid.",
+    certMismatch: "This certificate belongs to a different Cloudflare account — sign in again.",
+    action: "Sign in again",
   },
   hostname: {
-    title: "Chọn địa chỉ",
-    prefixLabel: "Tiền tố",
-    suffixHint: "Phần đuôi được cố định theo tài khoản bạn vừa đăng nhập.",
-    submit: "Xác nhận",
+    title: "Choose the address",
+    prefixLabel: "Prefix",
+    suffixHint: "The suffix is fixed by the account you just signed in with.",
+    submit: "Confirm",
   },
   applying: {
-    title: "Đang thiết lập…",
+    title: "Setting up…",
   },
   done: {
-    title: "Đã thiết lập xong",
-    body: (hostname: string) => `Địa chỉ cố định: https://${hostname}`,
-    close: "Đóng",
+    title: "All set",
+    body: (hostname: string) => `Fixed address: https://${hostname}`,
+    close: "Close",
   },
   pending: {
-    title: "Đã lưu — đang chờ áp dụng",
-    restartHint: "Chạy lệnh `ppm restart` để áp dụng ngay.",
-    close: "Đóng",
+    title: "Saved — waiting to apply",
+    restartHint: "Run `ppm restart` to apply it now.",
+    close: "Close",
   },
   error: {
-    title: "Có lỗi xảy ra",
-    retry: "Thử lại",
-    close: "Đóng",
+    title: "Something went wrong",
+    retry: "Retry",
+    close: "Close",
   },
   section: {
     title: "Named Tunnel",
     modeQuick: "quick",
     modeNamed: "named",
-    hostnameLabel: "Địa chỉ",
+    hostnameLabel: "Address",
     tokenLabel: "Token",
-    setup: "Thiết lập named tunnel",
-    retry: "Thử lại",
-    relogin: "Đăng nhập lại",
-    disable: "Chuyển về quick tunnel",
-    disableConfirm: "Bấm lần nữa để xác nhận",
+    setup: "Set up named tunnel",
+    retry: "Retry",
+    relogin: "Sign in again",
+    disable: "Switch back to quick tunnel",
+    disableConfirm: "Press again to confirm",
     disableSelfCut:
-      "Bạn đang mở PPM qua chính tên miền này — tắt nó sẽ ngắt trang ngay và bạn sẽ không kịp thấy link tạm. Mở PPM qua địa chỉ mạng nội bộ rồi tắt.",
-    certInvalid: "Cần đăng nhập lại Cloudflare",
-    certMismatch: "Chứng chỉ thuộc tài khoản Cloudflare khác — cần đăng nhập lại",
-    authDisabled: "Bật xác thực PPM để dùng tên miền riêng",
+      "You are viewing PPM through this very domain — turning it off cuts this page immediately and you would never see the temporary link. Open PPM on your local network first, then turn it off.",
+    certInvalid: "Cloudflare sign-in needed",
+    certMismatch: "Certificate belongs to a different Cloudflare account — sign in again",
+    authDisabled: "Enable PPM authentication to use your own domain",
     /** Small note next to the live-mode badge when the configured mode hasn't landed yet. */
-    configuredAs: (mode: "quick" | "named") => `đã cấu hình: ${mode}`,
+    configuredAs: (mode: "quick" | "named") => `configured: ${mode}`,
   },
 } as const;

package/src/web/components/tunnels/named-tunnel/named-tunnel-section.tsx

@@ -52,10 +52,10 @@ export function NamedTunnelSection() {
     setDisabling(true);
     try {
       await namedTunnelApi.disable();
-      toast.success("Đã chuyển về quick tunnel");
+      toast.success("Switched back to a quick tunnel");
       await t.refreshStatus();
     } catch (e) {
-      toast.error(e instanceof Error ? e.message : "Không chuyển được về quick tunnel");
+      toast.error(e instanceof Error ? e.message : "Could not switch back to a quick tunnel");
     } finally {
       setDisabling(false);
     }

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

@@ -1,8 +1,8 @@
 import { useEffect, useRef } from "react";
-import { useNotificationStore, selectTotalUnread } from "@/stores/notification-store";
+import { useNotificationStore, selectProjectUnread } from "@/stores/notification-store";
 import { useProjectStore } from "@/stores/project-store";
 import { useSettingsStore } from "@/stores/settings-store";
-import { useStreamingStore, selectAnyStreaming } from "@/stores/streaming-store";
+import { useStreamingStore, selectProjectStreaming } from "@/stores/streaming-store";
 import { setFavicon, STREAM_FRAME_COUNT } from "@/lib/favicon";
 
 function buildTitle(unread: number, projectName?: string, deviceName?: string): string {
@@ -11,25 +11,33 @@ function buildTitle(unread: number, projectName?: string, deviceName?: string):
 }
 
 /** Syncs document.title and favicon with unread notification count + streaming state.
- * When any chat is streaming, favicon alternates between blue and amber every 800ms.
- * Uses direct Zustand subscription to update immediately even in background tabs. */
+ * When a chat in this window's project is streaming, favicon alternates between blue and
+ * amber every 800ms. Uses direct Zustand subscription to update immediately even in
+ * background tabs.
+ *
+ * Everything here is scoped to `activeProject`, because the title bar and the tab icon
+ * describe *this* window and a window shows one project. Both inputs used to be app-wide:
+ * `/ws/global` delivers phase and unread changes for every project, so opening three
+ * workspaces in three PWA windows gave all three the same count and the same streaming
+ * animation whenever any one of them was busy. */
 export function useNotificationBadge(): void {
   const activeProject = useProjectStore((s) => s.activeProject);
   const deviceName = useSettingsStore((s) => s.deviceName);
-  const anyStreaming = useStreamingStore(selectAnyStreaming);
+  const projectName = activeProject?.name;
+  const projectStreaming = useStreamingStore(selectProjectStreaming(projectName));
   const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
   useEffect(() => {
-    const getHasBadge = () => selectTotalUnread(useNotificationStore.getState()) > 0;
+    const unreadHere = () => selectProjectUnread(projectName)(useNotificationStore.getState());
+    const getHasBadge = () => unreadHere() > 0;
 
     const updateTitle = () => {
-      const unread = selectTotalUnread(useNotificationStore.getState());
-      document.title = buildTitle(unread, activeProject?.name, deviceName ?? undefined);
+      document.title = buildTitle(unreadHere(), projectName, deviceName ?? undefined);
     };
 
     updateTitle();
 
-    if (anyStreaming) {
+    if (projectStreaming) {
       // Cycle through typing-dots frames (3 dots + 1 rest frame, Messenger style) every 300ms
       let frame = 0;
       setFavicon(getHasBadge(), frame);
@@ -45,7 +53,7 @@ export function useNotificationBadge(): void {
     const unsub = useNotificationStore.subscribe(() => {
       updateTitle();
       // Static favicon update only when not streaming (interval handles streaming)
-      if (!anyStreaming) setFavicon(getHasBadge());
+      if (!projectStreaming) setFavicon(getHasBadge());
     });
 
     return () => {
@@ -55,5 +63,5 @@ export function useNotificationBadge(): void {
         intervalRef.current = null;
       }
     };
-  }, [activeProject?.name, deviceName, anyStreaming]);
+  }, [projectName, deviceName, projectStreaming]);
 }

package/src/web/lib/feature-badges.ts

@@ -12,6 +12,8 @@ export const FEATURE_BADGES = {
   teams: "beta",
   /** Floating OS-style file explorer window / mobile sheet, shipped in 0.18.0. */
   "os-explorer": "new",
+  /** Remote Desktop — stream + control the host desktop in a floating window. */
+  "remote-desktop": "beta",
 } as const satisfies Record<string, FeatureBadgeKind>;
 
 export type FeatureBadgeId = keyof typeof FEATURE_BADGES;

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

@@ -39,6 +39,9 @@ interface SettingsState {
   dockPosition: DockPosition;
   dbSidebarExpanded: DbSidebarExpanded;
   explorerSkin: ExplorerSkinPref;
+  /** Show/hide the small fps/KB-per-s/resolution overlay on the remote-desktop viewer
+   *  (desktop window and mobile full-screen view both read this same flag). */
+  remoteDesktopStatsVisible: boolean;
   deviceName: string | null;
   version: string | null;
   tunnelActive: boolean;
@@ -63,6 +66,7 @@ interface SettingsState {
   setDockPosition: (position: DockPosition) => void;
   setDbSidebarExpanded: (next: DbSidebarExpanded) => void;
   setExplorerSkin: (pref: ExplorerSkinPref) => void;
+  toggleRemoteDesktopStatsVisible: () => void;
   fetchServerInfo: () => Promise<void>;
   /** Re-push the in-memory theme selection to the server (see the action for why). */
   syncThemeToServer: () => Promise<void>;
@@ -86,6 +90,7 @@ interface PersistedSettings {
   dockPosition?: DockPosition;
   dbSidebarExpanded?: DbSidebarExpanded;
   explorerSkin?: ExplorerSkinPref;
+  remoteDesktopStatsVisible?: boolean;
 }
 
 const VALID_STYLES: PpmThemeStyle[] = ["aurora", "slate", "precision", "custom"];
@@ -238,6 +243,7 @@ function applyServerUiPrefs(data: Record<string, unknown>) {
   if (data.explorerSkin === "auto" || data.explorerSkin === "windows" || data.explorerSkin === "macos") {
     patch.explorerSkin = data.explorerSkin;
   }
+  if (typeof data.remoteDesktopStatsVisible === "boolean") patch.remoteDesktopStatsVisible = data.remoteDesktopStatsVisible;
   const dbExpanded = sanitizeDbExpanded(data.dbSidebarExpanded);
   if (dbExpanded) patch.dbSidebarExpanded = dbExpanded;
   if (Object.keys(patch).length === 0) return;
@@ -265,6 +271,7 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
   dockPosition: (_initial.dockPosition === "left" || _initial.dockPosition === "right") ? _initial.dockPosition : "bottom",
   dbSidebarExpanded: sanitizeDbExpanded(_initial.dbSidebarExpanded) ?? DEFAULT_DB_EXPANDED,
   explorerSkin: (_initial.explorerSkin === "windows" || _initial.explorerSkin === "macos") ? _initial.explorerSkin : "auto",
+  remoteDesktopStatsVisible: _initial.remoteDesktopStatsVisible ?? false,
   deviceName: null,
   version: null,
   tunnelActive: false,
@@ -378,6 +385,12 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
     set({ tabWrap: next });
   },
 
+  toggleRemoteDesktopStatsVisible: () => {
+    const next = !get().remoteDesktopStatsVisible;
+    persistUiPref({ remoteDesktopStatsVisible: next });
+    set({ remoteDesktopStatsVisible: next });
+  },
+
   setEditorTabStyle: (style) => {
     persistUiPref({ editorTabStyle: style });
     set({ editorTabStyle: style });

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

@@ -41,5 +41,24 @@ export const useStreamingStore = create<StreamingStore>((set) => ({
     }),
 }));
 
-/** Selector: true if any session is streaming */
-export const selectAnyStreaming = (s: StreamingStore) => s.sessions.size > 0;
+/**
+ * Selector: true if a session *belonging to this project* is streaming.
+ *
+ * Scoped, because the thing it drives — the favicon and the document title — belongs to one
+ * window, and a window shows one project. `/ws/global` carries `session:phase_changed` for
+ * every project, so an unscoped "is anything streaming" made every open workspace animate
+ * whenever any one of them was working: three PWA windows, one busy, three busy-looking
+ * icons, and no way to tell which.
+ *
+ * No new state is needed for this. The map already records the project per session so
+ * `replaceProjectStreaming` can reconcile one project without touching another's entries.
+ */
+export const selectProjectStreaming =
+  (projectName: string | undefined) =>
+  (s: StreamingStore): boolean => {
+    if (!projectName) return false;
+    for (const project of s.sessions.values()) {
+      if (project === projectName) return true;
+    }
+    return false;
+  };

package/dist/web/assets/api-client-BogqsFna.js

@@ -1 +0,0 @@
-import"./vendor-markdown-Ls5AcU91.js";import"./vendor-ui-CaeeFO0B.js";import{i as e,n as t}from"./api-client-oY1tC3tM.js";export{t as api,e as projectUrl};

package/dist/web/assets/api-settings-DRF9oYkn.js

@@ -1 +0,0 @@
-import"./vendor-markdown-Ls5AcU91.js";import"./vendor-ui-CaeeFO0B.js";import"./api-client-oY1tC3tM.js";import{v as e}from"./api-settings-B2iNXQ0c.js";export{e as updateDeviceName};

package/dist/web/assets/architecture-PBZL5I3N-nw5-j_I_.js

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