@hienlh/ppm 0.17.37 → 0.17.39

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

@@ -0,0 +1,87 @@
+/**
+ * Drag-to-select for xterm on touch devices.
+ *
+ * xterm has no touch selection at all: `SelectionService` is driven by a
+ * `mousedown` on the `.xterm` element followed by `mousemove`/`mouseup` on the
+ * owning document, and nothing translates touch into those. This hook feeds it
+ * synthetic mouse events from a one-finger drag, so selection, its highlight and
+ * `term.getSelection()` all behave exactly as they do with a mouse.
+ *
+ * Only active while the caller has select mode switched on — the same gesture
+ * otherwise scrolls the viewport, and silently stealing it would strand the user
+ * with no way to scroll back.
+ */
+import { useEffect, type RefObject } from "react";
+
+function mouseEventFrom(type: string, touch: Touch, buttons: number): MouseEvent {
+  return new MouseEvent(type, {
+    bubbles: true,
+    cancelable: true,
+    view: window,
+    clientX: touch.clientX,
+    clientY: touch.clientY,
+    screenX: touch.screenX,
+    screenY: touch.screenY,
+    button: 0,
+    buttons,
+    // Click count. xterm branches on it to pick single/word/line selection and
+    // ignores the event entirely at the default of 0, so a drag would start no
+    // selection at all without this.
+    detail: 1,
+  });
+}
+
+export function useTerminalTouchSelection(
+  containerRef: RefObject<HTMLDivElement | null>,
+  enabled: boolean,
+) {
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!enabled || !container) return;
+
+    // `.xterm` is where SelectionService listens for mousedown; dispatching on
+    // the screen element would work too but this keeps the target explicit.
+    const xterm = container.querySelector(".xterm");
+    if (!xterm) return;
+
+    // Capture phase so these run before xterm's own document-level touch
+    // gesture handler, and stopPropagation keeps that handler from scrolling
+    // the viewport out from under the drag.
+    const onTouchStart = (e: TouchEvent) => {
+      const touch = e.touches[0];
+      if (!touch || e.touches.length > 1) return;
+      e.preventDefault();
+      e.stopPropagation();
+      xterm.dispatchEvent(mouseEventFrom("mousedown", touch, 1));
+    };
+
+    const onTouchMove = (e: TouchEvent) => {
+      const touch = e.touches[0];
+      if (!touch) return;
+      e.preventDefault();
+      e.stopPropagation();
+      document.dispatchEvent(mouseEventFrom("mousemove", touch, 1));
+    };
+
+    const onTouchEnd = (e: TouchEvent) => {
+      const touch = e.changedTouches[0];
+      if (!touch) return;
+      e.preventDefault();
+      e.stopPropagation();
+      document.dispatchEvent(mouseEventFrom("mouseup", touch, 0));
+    };
+
+    const opts = { capture: true, passive: false } as const;
+    container.addEventListener("touchstart", onTouchStart, opts);
+    container.addEventListener("touchmove", onTouchMove, opts);
+    container.addEventListener("touchend", onTouchEnd, opts);
+    container.addEventListener("touchcancel", onTouchEnd, opts);
+
+    return () => {
+      container.removeEventListener("touchstart", onTouchStart, opts);
+      container.removeEventListener("touchmove", onTouchMove, opts);
+      container.removeEventListener("touchend", onTouchEnd, opts);
+      container.removeEventListener("touchcancel", onTouchEnd, opts);
+    };
+  }, [containerRef, enabled]);
+}

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

@@ -34,9 +34,19 @@ interface UseTerminalReturn {
   getSelection: () => string;
   /** Read buffer from last command start to current cursor (for "Send to Chat"). */
   getLastCommandOutput: () => string;
+  /** URLs present in the scrollback, most recent first. */
+  getBufferUrls: () => string[];
   restart: () => void;
 }
 
+/** Trailing punctuation that ends a sentence rather than the URL itself. */
+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";
 const PONG_MSG = "\x01PONG";
@@ -101,6 +111,50 @@ export function useTerminal(
     return lines.join("\n");
   }, []);
 
+  /**
+   * Collect URLs from the scrollback.
+   *
+   * xterm's link addon activates a link from a mouse hover followed by mouseup,
+   * neither of which a touch device produces, so on mobile this list is the only
+   * way to reach a URL the shell printed (an `aws sso login` code, for example).
+   * Wrapped lines are joined first — a URL long enough to matter is usually the
+   * one that got split across rows.
+   */
+  const getBufferUrls = useCallback(() => {
+    const term = termRef.current;
+    if (!term) return [];
+    const buf = term.buffer.active;
+    const endRow = buf.baseY + buf.cursorY;
+    const startRow = Math.max(0, endRow - URL_SCAN_MAX_ROWS);
+
+    const logical: string[] = [];
+    let current = "";
+    for (let i = startRow; i <= endRow; i++) {
+      const line = buf.getLine(i);
+      if (!line) continue;
+      current += line.translateToString(true);
+      // isWrapped marks a row as the continuation of the previous one, so the
+      // break is a display artefact and must not split the URL.
+      const next = buf.getLine(i + 1);
+      if (next?.isWrapped) continue;
+      logical.push(current);
+      current = "";
+    }
+    if (current) logical.push(current);
+
+    const seen = new Set<string>();
+    const urls: string[] = [];
+    for (const text of logical) {
+      for (const match of text.match(URL_PATTERN) ?? []) {
+        const url = match.replace(URL_TRAILING_PUNCT, "");
+        if (!url || seen.has(url)) continue;
+        seen.add(url);
+        urls.push(url);
+      }
+    }
+    return urls.reverse();
+  }, []);
+
   const sendResize = useCallback(() => {
     const term = termRef.current;
     const ws = wsRef.current;
@@ -311,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);
 
@@ -332,6 +394,7 @@ export function useTerminal(
 
     return () => {
       unsubTheme();
+      if (fitTimer) clearTimeout(fitTimer);
       resizeObserver.disconnect();
       clearInterval(heartbeatInterval);
       document.removeEventListener("visibilitychange", onVisibility);
@@ -344,5 +407,5 @@ export function useTerminal(
     };
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-  return { connected, reconnecting, exited, sendData, getSelection, getLastCommandOutput, restart };
+  return { connected, reconnecting, exited, sendData, getSelection, getLastCommandOutput, getBufferUrls, restart };
 }

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;
+  }
+}