@hienlh/ppm 0.18.13 → 0.18.15

package/src/web/components/remote-desktop/use-remote-desktop-touch.ts

@@ -0,0 +1,224 @@
+/**
+ * Multi-touch gesture engine for the mobile remote-desktop viewer: pinch-zoom/pan (CSS
+ * transform on the caller's "stage" element) plus tap/drag → pointer + wheel messages over the
+ * shared connection. Two modes (see design doc `research-260907-1538-remote-desktop-mobile-
+ * touch.md`): TOUCH maps a 1-finger drag straight to an absolute drag at the touch point;
+ * MOUSE keeps a client-side virtual cursor that a 1-finger drag moves *relatively*, with a tap
+ * clicking wherever the cursor currently sits. Two-finger gestures are shared by both modes:
+ * tap = right click, pinch = zoom, drag = pan (while zoomed) or scroll wheel (otherwise). The
+ * actual decision rules live in `remote-desktop-touch-gesture-tracker.ts`; this file only wires
+ * DOM touch events to them and to React state.
+ *
+ * All touch listeners are native (`addEventListener`, non-passive) rather than React props, so
+ * `stopPropagation()` here also stops the ancestor `BottomSheet`'s swipe-to-dismiss (a React
+ * synthetic handler) from ever seeing the event — same trick `mobile-explorer-sheet.tsx` uses
+ * for its inline-rename case.
+ */
+import { useEffect, useRef, useState, useCallback } from "react";
+import { letterboxedContentRect, type ZoomPanTransform, type Fraction, type Rect } from "./remote-desktop-coords";
+import {
+  beginSingleTouch, advanceSingleTouch, resolveSingleTouchEnd,
+  beginTwoFingerTouch, advanceTwoFingerTouch, resolveTwoFingerEnd,
+  type SingleTrack, type TwoFingerTrack, type RemoteDesktopInputMode,
+} from "./remote-desktop-touch-gesture-tracker";
+
+export type { RemoteDesktopInputMode };
+
+const IDENTITY_TRANSFORM: ZoomPanTransform = { scale: 1, panX: 0, panY: 0 };
+/** CSS px of two-finger drag per wheel notch (`WHEEL_DELTA` = 120 units, matching a real wheel
+ *  "click"). Tune here if a live test finds scrolling too fast/slow. */
+const WHEEL_PIXELS_PER_NOTCH = 40;
+const WHEEL_DELTA = 120;
+
+export interface UseRemoteDesktopTouchOptions {
+  /** The never-transformed element touch listeners attach to and whose rect is the reference
+   *  frame at `scale=1, pan=0` — must fill the same box the "stage" (canvas) sits in at rest. */
+  containerRef: React.RefObject<HTMLElement | null>;
+  /** The canvas actually being drawn into. Its CSS box is the same size as `containerRef` (it
+   *  fills the stage, which fills the container), but its drawing-buffer size (`.width`/
+   *  `.height`, the real capture resolution) is almost never the same *aspect ratio* — a tap
+   *  must be measured against the letterboxed video rect this produces inside the container,
+   *  not the container's full box, or it lands off by however big the letterbox bars are. */
+  canvasRef: React.RefObject<HTMLCanvasElement | null>;
+  mode: RemoteDesktopInputMode;
+  sendMessage: (msg: Record<string, unknown>) => void;
+  enabled: boolean;
+}
+
+export interface UseRemoteDesktopTouchResult {
+  /** Apply as `transform: translate(panXpx, panYpx) scale(scale)` on the stage element. */
+  transform: ZoomPanTransform;
+  /** Client-side cursor position (mouse mode only) — draw a marker at this fraction inside the
+   *  stage. `null` in touch mode (no persistent cursor concept there). */
+  virtualCursor: Fraction | null;
+  resetZoom: () => void;
+}
+
+export function useRemoteDesktopTouch({
+  containerRef,
+  canvasRef,
+  mode,
+  sendMessage,
+  enabled,
+}: UseRemoteDesktopTouchOptions): UseRemoteDesktopTouchResult {
+  const [transform, setTransform] = useState<ZoomPanTransform>(IDENTITY_TRANSFORM);
+  const [virtualCursor, setVirtualCursor] = useState<Fraction>({ xFrac: 0.5, yFrac: 0.5 });
+  const transformRef = useRef(transform);
+  const cursorRef = useRef(virtualCursor);
+  const modeRef = useRef(mode);
+  modeRef.current = mode;
+
+  const pendingRef = useRef<{ transform: ZoomPanTransform | null; cursor: Fraction | null; sendCursorMove: boolean; wheelPx: number }>(
+    { transform: null, cursor: null, sendCursorMove: false, wheelPx: 0 },
+  );
+  const rafIdRef = useRef(0);
+
+  const flush = useCallback(() => {
+    rafIdRef.current = 0;
+    const p = pendingRef.current;
+    if (p.transform) { transformRef.current = p.transform; setTransform(p.transform); p.transform = null; }
+    if (p.cursor) {
+      cursorRef.current = p.cursor;
+      setVirtualCursor(p.cursor);
+      if (p.sendCursorMove) sendMessage({ type: "pointer", xFrac: p.cursor.xFrac, yFrac: p.cursor.yFrac, button: null, down: null });
+      p.cursor = null;
+      p.sendCursorMove = false;
+    }
+    if (p.wheelPx !== 0) {
+      // Fingers moving up (negative px) reads as "scroll content up" — a positive (forward)
+      // wheel notch, matching a physical wheel rotated away from the user.
+      sendMessage({ type: "wheel", dy: -(p.wheelPx / WHEEL_PIXELS_PER_NOTCH) * WHEEL_DELTA });
+      p.wheelPx = 0;
+    }
+  }, [sendMessage]);
+
+  const schedule = useCallback(() => {
+    if (!rafIdRef.current) rafIdRef.current = requestAnimationFrame(flush);
+  }, [flush]);
+
+  const resetZoom = useCallback(() => {
+    transformRef.current = IDENTITY_TRANSFORM;
+    setTransform(IDENTITY_TRANSFORM);
+  }, []);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container || !enabled) return;
+
+    let single: SingleTrack | null = null;
+    let two: TwoFingerTrack | null = null;
+    const sendAll = (msgs: Record<string, unknown>[]) => msgs.forEach(sendMessage);
+
+    // The container's rect (never transformed) is only the OUTER box the video is letterboxed
+    // within — `object-fit: contain` (or the matching sizing on the canvas) means the canvas
+    // element's CSS box fills that outer box, but the pixels it actually draws are narrower or
+    // shorter depending on how the capture's aspect ratio compares to the phone's. Without this,
+    // gestures were measured against the full outer box, so a tap landed at the finger's raw
+    // screen position instead of the corresponding video pixel whenever there was a letterbox.
+    const getVideoRect = (): Rect => {
+      const box = container.getBoundingClientRect();
+      const canvas = canvasRef.current;
+      if (!canvas || !canvas.width || !canvas.height) return box;
+      return letterboxedContentRect(box, canvas.width, canvas.height);
+    };
+
+    const onTouchStart = (e: TouchEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const rect = getVideoRect();
+      if (e.touches.length === 1) {
+        two = null;
+        const t = e.touches[0]!;
+        single = beginSingleTouch(t.clientX, t.clientY, rect);
+      } else if (e.touches.length === 2) {
+        single = null;
+        const [a, b] = [e.touches[0]!, e.touches[1]!];
+        two = beginTwoFingerTouch({ x: a.clientX, y: a.clientY }, { x: b.clientX, y: b.clientY }, transformRef.current.scale);
+      } else {
+        // 3+ fingers: not a gesture this viewer understands — drop tracking rather than guess.
+        single = null;
+        two = null;
+      }
+    };
+
+    const onTouchMove = (e: TouchEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (single && e.touches.length === 1) {
+        const t = e.touches[0]!;
+        const r = advanceSingleTouch(single, t.clientX, t.clientY, modeRef.current, transformRef.current, cursorRef.current);
+        if (r.message) sendMessage(r.message);
+        if (r.cursor) {
+          // Mouse mode is DELTA-based (each call moves the cursor *relative* to `cursorRef`).
+          // rAF coalesces the state-commit + wire-send below to once per frame, but the delta
+          // math itself must not wait for that — updating `cursorRef.current` only inside
+          // `flush()` meant back-to-back touchmove events landing in the same animation frame
+          // each recomputed their delta against the SAME stale base position, so only the last
+          // one "counted" and most of the finger's movement was silently dropped (the host
+          // cursor barely moved). Updating the ref here, synchronously, makes every event
+          // compound on the last regardless of how many land before the next flush.
+          cursorRef.current = r.cursor;
+          pendingRef.current.cursor = r.cursor;
+          pendingRef.current.sendCursorMove = !!r.sendCursorMove;
+          schedule();
+        }
+        return;
+      }
+      if (two && e.touches.length === 2) {
+        const [a, b] = [e.touches[0]!, e.touches[1]!];
+        const r = advanceTwoFingerTouch(two, { x: a.clientX, y: a.clientY }, { x: b.clientX, y: b.clientY }, transformRef.current);
+        if (r.transform) {
+          // Same reasoning as the cursor above: pan is delta-based off `transformRef`, so it
+          // must be updated eagerly too, not just inside the throttled flush.
+          transformRef.current = r.transform;
+          pendingRef.current.transform = r.transform;
+          schedule();
+        }
+        if (r.wheelDeltaPx) { pendingRef.current.wheelPx += r.wheelDeltaPx; schedule(); }
+      }
+    };
+
+    const onTouchEnd = (e: TouchEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const t = e.changedTouches[0];
+      if (single) {
+        const x = t ? t.clientX : single.last.x;
+        const y = t ? t.clientY : single.last.y;
+        sendAll(resolveSingleTouchEnd(single, x, y, modeRef.current, transformRef.current, cursorRef.current));
+        single = null;
+      }
+      if (two) {
+        sendAll(resolveTwoFingerEnd(two, getVideoRect(), transformRef.current));
+        two = null;
+      }
+    };
+
+    const onTouchCancel = (e: TouchEvent) => {
+      e.stopPropagation();
+      // A held button left down on the host would be worse than a dropped click — release it.
+      // Only touch mode ever sends a "down" during a drag (mouse mode only moves the virtual
+      // cursor until a tap), so only touch mode has anything to release here.
+      if (single?.moved && modeRef.current === "touch") {
+        sendAll(resolveSingleTouchEnd(single, single.last.x, single.last.y, "touch", transformRef.current, cursorRef.current));
+      }
+      single = null;
+      two = null;
+    };
+
+    container.addEventListener("touchstart", onTouchStart, { passive: false });
+    container.addEventListener("touchmove", onTouchMove, { passive: false });
+    container.addEventListener("touchend", onTouchEnd, { passive: false });
+    container.addEventListener("touchcancel", onTouchCancel, { passive: false });
+
+    return () => {
+      if (rafIdRef.current) cancelAnimationFrame(rafIdRef.current);
+      container.removeEventListener("touchstart", onTouchStart);
+      container.removeEventListener("touchmove", onTouchMove);
+      container.removeEventListener("touchend", onTouchEnd);
+      container.removeEventListener("touchcancel", onTouchCancel);
+    };
+  }, [containerRef, canvasRef, enabled, sendMessage, schedule]);
+
+  return { transform, virtualCursor: mode === "mouse" ? virtualCursor : null, resetZoom };
+}

package/src/web/components/remote-desktop/use-remote-desktop-virtual-keyboard.ts

@@ -0,0 +1,50 @@
+/**
+ * Forwards keydown/keyup from a hidden `<input>` to the shared connection, so a toolbar
+ * "Keyboard" button can bring up the phone's soft keyboard without a physical keyboard ever
+ * being attached. Mirrors `use-remote-input-capture.ts`'s key handling exactly: `code`
+ * (physical key, layout-independent) is sent, never `key` — the host maps `code` → VK.
+ */
+import { useEffect, useRef, useCallback } from "react";
+
+export interface UseRemoteDesktopVirtualKeyboardResult {
+  inputRef: React.RefObject<HTMLInputElement | null>;
+  /** Focus the hidden input, which brings up the soft keyboard on a touch device. */
+  show: () => void;
+}
+
+export function useRemoteDesktopVirtualKeyboard(
+  sendMessage: (msg: Record<string, unknown>) => void,
+  enabled: boolean,
+): UseRemoteDesktopVirtualKeyboardResult {
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    const input = inputRef.current;
+    if (!input || !enabled) return;
+
+    // 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" });
+    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 onBlur = () => releaseAll();
+    const onVisibilityChange = () => { if (document.hidden) releaseAll(); };
+
+    input.addEventListener("keydown", onKeyDown);
+    input.addEventListener("keyup", onKeyUp);
+    input.addEventListener("blur", onBlur);
+    document.addEventListener("visibilitychange", onVisibilityChange);
+
+    return () => {
+      input.removeEventListener("keydown", onKeyDown);
+      input.removeEventListener("keyup", onKeyUp);
+      input.removeEventListener("blur", onBlur);
+      document.removeEventListener("visibilitychange", onVisibilityChange);
+      releaseAll();
+    };
+  }, [enabled, sendMessage]);
+
+  const show = useCallback(() => inputRef.current?.focus(), []);
+
+  return { inputRef, show };
+}

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;