@hienlh/ppm 0.17.37 → 0.17.38

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

@@ -1,51 +1,32 @@
 import { useRef, useEffect, useState, useCallback, memo } from "react";
 import { useTerminal } from "@/hooks/use-terminal";
+import { useTerminalTouchSelection } from "@/hooks/use-terminal-touch-selection";
 import { cn } from "@/lib/utils";
 import { copyToClipboard } from "@/lib/clipboard";
-import { Copy, ClipboardPaste, RotateCcw, MessageSquare } from "lucide-react";
+import { RotateCcw, MessageSquare } from "lucide-react";
 import "@xterm/xterm/css/xterm.css";
 import { toast } from "sonner";
 
 import { usePanelStore } from "@/stores/panel-store";
+import { TerminalMobileToolbar } from "./terminal-mobile-toolbar";
+import { TerminalLinksSheet } from "./terminal-links-sheet";
 
 interface TerminalTabProps {
   metadata?: Record<string, unknown>;
   tabId?: string;
 }
 
-const MOBILE_KEYS = [
-  { label: "Tab", value: "\t" },
-  { label: "Esc", value: "\x1b" },
-  { label: "Ctrl", value: null, isModifier: true },
-  { label: "\u2191", value: "\x1b[A" },
-  { label: "\u2193", value: "\x1b[B" },
-  { label: "\u2190", value: "\x1b[D" },
-  { label: "\u2192", value: "\x1b[C" },
-  { label: "^C", value: "\x03" },
-] as const;
-
 export const TerminalTab = memo(function TerminalTab({ metadata, tabId }: TerminalTabProps) {
   const sessionId = (metadata?.sessionId as string) ?? "new";
   const projectName = metadata?.projectName as string | undefined;
   const containerRef = useRef<HTMLDivElement>(null);
 
-  const { connected, reconnecting, exited, sendData, getSelection, getLastCommandOutput, restart } = useTerminal({ sessionId, projectName, containerRef, tabId });
+  const { connected, reconnecting, exited, sendData, getSelection, getLastCommandOutput, getBufferUrls, restart } = useTerminal({ sessionId, projectName, containerRef, tabId });
   const [ctrlMode, setCtrlMode] = useState(false);
-  const [viewportHeight, setViewportHeight] = useState<number | null>(null);
-
-  // Adjust height when mobile keyboard opens
-  useEffect(() => {
-    const vv = window.visualViewport;
-    if (!vv) return;
-
-    function handleResize() {
-      if (!vv) return;
-      setViewportHeight(vv.height);
-    }
+  const [selectMode, setSelectMode] = useState(false);
+  const [linksOpen, setLinksOpen] = useState(false);
 
-    vv.addEventListener("resize", handleResize);
-    return () => vv.removeEventListener("resize", handleResize);
-  }, []);
+  useTerminalTouchSelection(containerRef, selectMode);
 
   const focusTerminal = useCallback(() => {
     const termElement = containerRef.current?.querySelector(
@@ -54,18 +35,19 @@ export const TerminalTab = memo(function TerminalTab({ metadata, tabId }: Termin
     termElement?.focus();
   }, []);
 
-  // On touch devices xterm swallows the synthesized `click`, so an onClick
-  // handler never fires and the soft keyboard never opens. Bind `touchend` in
-  // the capture phase (runs before xterm's own handlers) and focus the hidden
-  // textarea there — this happens inside a real user gesture, so mobile
-  // browsers reliably raise the on-screen keyboard.
+  // Raising the soft keyboard needs focus() to run inside a gesture the browser
+  // recognises, and xterm's own mousedown handling does not reliably qualify.
+  // Capture-phase `touchend` runs before xterm's handlers and is unambiguously a
+  // gesture, so the keyboard opens even when the click path is unreliable.
+  // Skipped in select mode: a drag there is a selection gesture, and raising the
+  // keyboard would both shrink the viewport mid-drag and clear the selection.
   useEffect(() => {
     const container = containerRef.current;
-    if (!container) return;
+    if (!container || selectMode) return;
     const onTouchEnd = () => focusTerminal();
     container.addEventListener("touchend", onTouchEnd, { capture: true });
     return () => container.removeEventListener("touchend", onTouchEnd, { capture: true });
-  }, [focusTerminal]);
+  }, [focusTerminal, selectMode]);
 
   const sendKey = useCallback(
     (value: string) => {
@@ -86,12 +68,22 @@ export const TerminalTab = memo(function TerminalTab({ metadata, tabId }: Termin
     [ctrlMode, sendData, focusTerminal],
   );
 
+  // xterm starts a selection from mousedown and has no touch equivalent, so on a
+  // phone getSelection() is always empty. Falling back to the last command's
+  // output keeps the button useful instead of silently doing nothing.
   const handleCopy = useCallback(async () => {
     const selection = getSelection();
-    if (selection) {
-      await copyToClipboard(selection);
+    const text = selection || getLastCommandOutput();
+    if (!text.trim()) {
+      toast("Nothing to copy", { duration: 1500 });
+      return;
     }
-  }, [getSelection]);
+    const ok = await copyToClipboard(text);
+    toast[ok ? "success" : "error"](
+      ok ? (selection ? "Selection copied" : "Last output copied") : "Could not copy",
+      { duration: 1500 },
+    );
+  }, [getSelection, getLastCommandOutput]);
 
   const handlePaste = useCallback(async () => {
     try {
@@ -101,7 +93,10 @@ export const TerminalTab = memo(function TerminalTab({ metadata, tabId }: Termin
         focusTerminal();
       }
     } catch {
-      // Clipboard permission denied
+      // readText() needs a secure context and an explicit permission grant, and
+      // Safari rejects it outright when the tap is not treated as a gesture.
+      // Say so — a silent catch reads as a dead button.
+      toast.error("Clipboard blocked — paste with the keyboard instead", { duration: 2500 });
     }
   }, [sendData, focusTerminal]);
 
@@ -136,10 +131,7 @@ export const TerminalTab = memo(function TerminalTab({ metadata, tabId }: Termin
   const isMobile = typeof window !== "undefined" && "ontouchstart" in window;
 
   return (
-    <div
-      className="flex flex-col h-full"
-      style={viewportHeight ? { maxHeight: `${viewportHeight}px` } : undefined}
-    >
+    <div className="flex flex-col h-full min-h-0">
       {/* Status bar */}
       <div className="flex items-center gap-2 px-3 py-1 bg-surface border-b border-border text-xs">
         <span
@@ -180,52 +172,31 @@ export const TerminalTab = memo(function TerminalTab({ metadata, tabId }: Termin
       {/* Terminal container. onClick focuses xterm's hidden textarea — on mobile
           the soft keyboard only opens when focus() runs inside a recognized tap
           gesture, which xterm's internal mousedown handling doesn't reliably do. */}
-      <div ref={containerRef} onClick={focusTerminal} className="flex-1 min-h-0 bg-background p-1" />
+      <div
+        ref={containerRef}
+        onClick={selectMode ? undefined : focusTerminal}
+        className={cn("flex-1 min-h-0 bg-background p-1", selectMode && "touch-none")}
+      />
 
-      {/* Mobile toolbar */}
       {isMobile && (
-        <div className="flex items-center gap-1 px-2 py-1.5 bg-surface border-t border-border overflow-x-auto">
-          <button
-            onClick={handleCopy}
-            className="px-2 py-1.5 rounded text-xs min-w-[36px] min-h-[32px] bg-surface-elevated text-text-primary active:bg-primary active:text-primary-foreground transition-colors select-none"
-          >
-            <Copy size={14} />
-          </button>
-          <button
-            onClick={handlePaste}
-            className="px-2 py-1.5 rounded text-xs min-w-[36px] min-h-[32px] bg-surface-elevated text-text-primary active:bg-primary active:text-primary-foreground transition-colors select-none"
-          >
-            <ClipboardPaste size={14} />
-          </button>
-          <button
-            onClick={handleSendToChat}
-            className="px-2 py-1.5 rounded text-xs min-w-[36px] min-h-[32px] bg-surface-elevated text-text-primary active:bg-primary active:text-primary-foreground transition-colors select-none"
-            aria-label="Send to Chat"
-          >
-            <MessageSquare size={14} />
-          </button>
-          <div className="w-px h-5 bg-border mx-0.5" />
-          {MOBILE_KEYS.map((key) => (
-            <button
-              key={key.label}
-              onClick={() => {
-                if (key.label === "Ctrl") {
-                  setCtrlMode(!ctrlMode);
-                } else if (key.value) {
-                  sendKey(key.value);
-                }
-              }}
-              className={cn(
-                "px-3 py-1.5 rounded text-xs font-mono min-w-[36px] min-h-[32px]",
-                "bg-surface-elevated text-text-primary active:bg-primary active:text-primary-foreground",
-                "transition-colors select-none",
-                key.label === "Ctrl" && ctrlMode && "bg-primary text-primary-foreground",
-              )}
-            >
-              {key.label}
-            </button>
-          ))}
-        </div>
+        <>
+          <TerminalMobileToolbar
+            ctrlMode={ctrlMode}
+            onToggleCtrl={() => setCtrlMode(!ctrlMode)}
+            selectMode={selectMode}
+            onToggleSelect={() => setSelectMode(!selectMode)}
+            onKey={sendKey}
+            onCopy={() => void handleCopy()}
+            onPaste={() => void handlePaste()}
+            onSendToChat={handleSendToChat}
+            onOpenLinks={() => setLinksOpen(true)}
+          />
+          <TerminalLinksSheet
+            open={linksOpen}
+            onClose={() => setLinksOpen(false)}
+            urls={linksOpen ? getBufferUrls() : []}
+          />
+        </>
       )}
     </div>
   );

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

@@ -78,17 +78,34 @@ export function BottomSheet({ open, onClose, children, className, zIndex = 50 }:
         onClick={(e) => e.stopPropagation()}
         {...swipeHandlers}
       >
-        {/* Drag handle */}
-        <div className="flex justify-center pt-3 pb-1">
+        {/* Drag handle. shrink-0 so a flex-column sheet gives it its own height
+            instead of letting `h-full`/`flex-1` content overflow past it. */}
+        <div className="flex justify-center pt-3 pb-1 shrink-0">
           <div className="w-10 h-1 rounded-full bg-border" />
         </div>
         {children}
       </div>
     </div>,
-    document.body,
+    sheetPortalTarget(),
   );
 }
 
+/**
+ * Portal target for every sheet: the React root, never `document.body`.
+ *
+ * TabPool reparents live tab DOM into panel slots with `appendChild`, and on
+ * mobile the dock's slot lives inside a sheet. A body-level portal would put
+ * that node outside the root container React binds its delegated listeners to,
+ * so React resolves the node's root container (`#root`) against the container
+ * the event fired on (`body`), finds no match, and drops the event — every
+ * button inside a dock tab goes dead while native listeners still fire.
+ * `#root` carries no styles, so keeping the portal inside it leaves stacking
+ * order untouched.
+ */
+function sheetPortalTarget(): HTMLElement {
+  return document.getElementById("root") ?? document.body;
+}
+
 /* ------------------------------------------------------------------ */
 /*  Context-menu-specific helpers (used by adaptive-context-menu)       */
 /* ------------------------------------------------------------------ */

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,17 @@ 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;
+
 const RESIZE_PREFIX = "\x01RESIZE:";
 const PING_MSG = "\x01PING";
 const PONG_MSG = "\x01PONG";
@@ -101,6 +109,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;
@@ -344,5 +396,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 };
 }