@hienlh/ppm 0.17.38 → 0.17.39

package/src/web/components/ui/mobile-bottom-sheet.tsx

@@ -6,10 +6,11 @@
  * Also exports context-menu-specific sub-components (BottomSheetItem, etc.)
  * used by adaptive-context-menu.tsx.
  */
-import { createContext, useContext, useEffect, useState, type ReactNode } from "react";
+import { createContext, useContext, type ReactNode } from "react";
 import { createPortal } from "react-dom";
 import { cn } from "@/lib/utils";
 import { useSwipeToDismiss } from "@/hooks/use-swipe-to-dismiss";
+import { useVisualViewport } from "@/hooks/use-visual-viewport";
 
 /* ------------------------------------------------------------------ */
 /*  Core BottomSheet — reusable everywhere                             */
@@ -33,44 +34,46 @@ export function BottomSheet({ open, onClose, children, className, zIndex = 50 }:
   const { dragY, swipeHandlers, dragStyle, backdropOpacity, isDragging } =
     useSwipeToDismiss(onClose);
 
-  // Follow the visual viewport so the panel rides above the on-screen keyboard.
-  // A `fixed inset-0` container is anchored to the layout viewport, which does
-  // not shrink when the keyboard opens — so `bottom-0` would sit behind it.
-  // Constraining the container to the visual viewport keeps the panel visible.
-  const [vv, setVv] = useState<{ top: number; height: number } | null>(null);
-  useEffect(() => {
-    const viewport = window.visualViewport;
-    if (!open || !viewport) return;
-    const update = () => setVv({ top: viewport.offsetTop, height: viewport.height });
-    update();
-    viewport.addEventListener("resize", update);
-    viewport.addEventListener("scroll", update);
-    return () => {
-      viewport.removeEventListener("resize", update);
-      viewport.removeEventListener("scroll", update);
-    };
-  }, [open]);
+  // Keyboard-aware geometry. The backdrop deliberately keeps covering the whole
+  // layout viewport while only the panel tracks the keyboard: if the two ever
+  // disagree by a few pixels, the seam shows as dimmed backdrop rather than a
+  // strip of untouched page.
+  const insets = useVisualViewport(open);
 
   if (!open) return null;
 
-  // When tracking the visual viewport, pin the container to it (top + height,
-  // bottom auto) instead of the full-page inset-0 default.
-  const containerStyle = vv
-    ? { zIndex, top: `${vv.top}px`, height: `${vv.height}px`, bottom: "auto" as const }
-    : { zIndex };
+  // The panel keeps its footing on the bottom of the screen and only its
+  // *contents* are lifted clear of the keyboard, by padding. Moving the panel
+  // itself is what left a hole: the keyboard's height can only be estimated, and
+  // an estimate that is short drags the panel's background up with it, exposing
+  // the page. Padding an anchored panel degrades instead — a bad estimate puts
+  // the toolbar slightly off, over a background that still reaches the bottom.
+  //
+  // `--sheet-vh` is what is visible and `--sheet-kb` what the keyboard covers,
+  // so a panel can ask for "the visible area" and still span to the screen edge.
+  const frameStyle = {
+    zIndex,
+    "--sheet-vh": insets ? `${insets.height}px` : "100dvh",
+    "--sheet-kb": insets ? `${insets.keyboardInset}px` : "0px",
+  } as React.CSSProperties;
 
   return createPortal(
-    <div className="fixed inset-0" style={containerStyle} onClick={onClose}>
+    <div className="fixed inset-0" style={frameStyle} onClick={onClose}>
       {/* Backdrop */}
       <div
         className="absolute inset-0 bg-black/40 animate-in fade-in-0 duration-200"
         style={isDragging ? { opacity: backdropOpacity } : undefined}
       />
-      {/* Panel */}
+      {/* Panel. Padding does double duty: it clears the home indicator when the
+          keyboard is down, and the keyboard itself when it is up. A panel sized
+          in `--sheet-vh` must add `--sheet-kb` back, since the padding is inside
+          that height. */}
       <div
         className={cn(
           "absolute bottom-0 left-0 right-0 rounded-t-2xl bg-popover text-popover-foreground border-t border-border",
-          "pb-[max(0.5rem,env(safe-area-inset-bottom))]",
+          insets?.keyboardOpen
+            ? "pb-[var(--sheet-kb,0px)]"
+            : "pb-[max(0.5rem,env(safe-area-inset-bottom))]",
           !isDragging && "animate-in slide-in-from-bottom duration-200",
           className,
         )}

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

@@ -44,6 +44,8 @@ const URL_TRAILING_PUNCT = /[).,;:'"\]}>]+$/;
 const URL_PATTERN = /\bhttps?:\/\/[^\s<>"'`]+/g;
 /** Cap the scan so a 50k-line scrollback never blocks the tap that triggered it. */
 const URL_SCAN_MAX_ROWS = 5000;
+/** Quiet period before refitting to a new container size, in ms. */
+const RESIZE_SETTLE_MS = 100;
 
 const RESIZE_PREFIX = "\x01RESIZE:";
 const PING_MSG = "\x01PING";
@@ -363,16 +365,24 @@ export function useTerminal(
     };
     document.addEventListener("visibilitychange", onVisibility);
 
-    // ResizeObserver for auto-fit — skip when tab is hidden (0 dimensions)
+    // ResizeObserver for auto-fit — skip when tab is hidden (0 dimensions).
+    // Debounced: an on-screen keyboard resizes the container many times as it
+    // slides, and refitting on each one sends the shell a burst of size changes
+    // that it answers by redrawing, so the output visibly churns. One fit once
+    // the size settles gives the same result without the churn.
+    let fitTimer: ReturnType<typeof setTimeout> | null = null;
     const resizeObserver = new ResizeObserver((entries) => {
       const entry = entries[0];
       if (!entry || entry.contentRect.width === 0 || entry.contentRect.height === 0) return;
-      try {
-        fitAddon.fit();
-        sendResize();
-      } catch {
-        // Ignore fit errors during teardown
-      }
+      if (fitTimer) clearTimeout(fitTimer);
+      fitTimer = setTimeout(() => {
+        try {
+          fitAddon.fit();
+          sendResize();
+        } catch {
+          // Ignore fit errors during teardown
+        }
+      }, RESIZE_SETTLE_MS);
     });
     resizeObserver.observe(container);
 
@@ -384,6 +394,7 @@ export function useTerminal(
 
     return () => {
       unsubTheme();
+      if (fitTimer) clearTimeout(fitTimer);
       resizeObserver.disconnect();
       clearInterval(heartbeatInterval);
       document.removeEventListener("visibilitychange", onVisibility);

package/src/web/hooks/use-visual-viewport.ts

@@ -0,0 +1,83 @@
+/**
+ * Measures the part of the screen the user can actually see, and how much of it
+ * the on-screen keyboard is occupying.
+ *
+ * `vh`/`dvh` units and a `fixed` element both resolve against the layout
+ * viewport, which does not shrink when a keyboard opens — so anything anchored
+ * to the bottom ends up behind it. Only `visualViewport` reports the truth.
+ *
+ * Updates are applied on the frame they arrive rather than after a settle
+ * delay: iOS emits intermediate sizes throughout the keyboard's slide and its
+ * final event can land before the layout has finished moving, so deferring is
+ * what leaves geometry stale — visibly, as a strip of untouched page below a
+ * panel that should be flush with the keyboard.
+ */
+import { useEffect, useState } from "react";
+
+export interface ViewportInsets {
+  /** Height of the visible area, in px. */
+  height: number;
+  /**
+   * Roughly how much the keyboard covers, in px.
+   *
+   * Approximate on purpose: `innerHeight` on iOS counts space behind browser
+   * chrome, so this can be off by a bar's height. Use it to inset content, never
+   * to place a background — an inset that is slightly wrong shifts content a
+   * little, whereas a background placed the same way leaves a visible hole.
+   */
+  keyboardInset: number;
+  /** Whether the missing height is big enough to be a keyboard, not browser chrome. */
+  keyboardOpen: boolean;
+}
+
+/** Below this, the missing height is a collapsed address bar, not a keyboard. */
+const KEYBOARD_MIN_INSET = 120;
+
+function measure(viewport: VisualViewport): ViewportInsets {
+  const inset = Math.max(0, window.innerHeight - viewport.height - viewport.offsetTop);
+  return {
+    height: viewport.height,
+    keyboardInset: inset,
+    keyboardOpen: inset >= KEYBOARD_MIN_INSET,
+  };
+}
+
+/** Live viewport insets, or null when unsupported or while `active` is false. */
+export function useVisualViewport(active: boolean): ViewportInsets | null {
+  const [insets, setInsets] = useState<ViewportInsets | null>(null);
+
+  useEffect(() => {
+    const viewport = window.visualViewport;
+    if (!active || !viewport) {
+      setInsets(null);
+      return;
+    }
+
+    // Several resize/scroll events can fire per frame; one read per frame is
+    // enough and keeps React from rendering the same geometry repeatedly.
+    let frame: number | null = null;
+    const update = () => {
+      frame = null;
+      setInsets((prev) => {
+        const next = measure(viewport);
+        return prev && prev.height === next.height && prev.keyboardInset === next.keyboardInset
+          ? prev
+          : next;
+      });
+    };
+    const schedule = () => {
+      if (frame === null) frame = requestAnimationFrame(update);
+    };
+
+    update();
+    viewport.addEventListener("resize", schedule);
+    viewport.addEventListener("scroll", schedule);
+    return () => {
+      if (frame !== null) cancelAnimationFrame(frame);
+      viewport.removeEventListener("resize", schedule);
+      viewport.removeEventListener("scroll", schedule);
+    };
+  }, [active]);
+
+  return insets;
+}

package/src/web/lib/oauth-loopback-url.ts

@@ -0,0 +1,55 @@
+/**
+ * Recognises OAuth authorization URLs that hand their result back to a port on
+ * the machine running the CLI, rather than to whatever device opened them.
+ *
+ * This is what strands a login started from a phone: the sign-in succeeds, the
+ * browser is redirected to 127.0.0.1:<port>, and on the phone that address is
+ * the phone itself — so the CLI waiting on the real machine never hears back.
+ */
+
+const LOOPBACK_HOSTNAMES = new Set(["localhost", "::1"]);
+
+/** Whether a hostname addresses the machine the browser is running on. */
+export function isLoopbackHostname(hostname: string): boolean {
+  const host = hostname.replace(/^\[|\]$/g, "").toLowerCase();
+  if (LOOPBACK_HOSTNAMES.has(host)) return true;
+  return /^127\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(host);
+}
+
+/**
+ * The loopback port an authorization URL will redirect back to, or null when it
+ * redirects somewhere reachable from any device.
+ */
+export function loopbackRedirectPort(url: string): string | null {
+  let parsed: URL;
+  try {
+    parsed = new URL(url);
+  } catch {
+    return null;
+  }
+  // `redirect_uri` is the OAuth 2.0 name; some tools still send `redirectUri`.
+  const redirect =
+    parsed.searchParams.get("redirect_uri") ?? parsed.searchParams.get("redirectUri");
+  if (!redirect) return null;
+
+  try {
+    const target = new URL(redirect);
+    if (!isLoopbackHostname(target.hostname)) return null;
+    return target.port || (target.protocol === "https:" ? "443" : "80");
+  } catch {
+    return null;
+  }
+}
+
+/** Whether a pasted string is a callback this machine could deliver. */
+export function isDeliverableCallback(url: string): boolean {
+  try {
+    const parsed = new URL(url.trim());
+    return (
+      (parsed.protocol === "http:" || parsed.protocol === "https:") &&
+      isLoopbackHostname(parsed.hostname)
+    );
+  } catch {
+    return false;
+  }
+}