@hienlh/ppm 0.17.37 → 0.17.39

package/src/web/components/terminal/terminal-finish-login.tsx

@@ -0,0 +1,75 @@
+/**
+ * Completes a CLI login that was started here and signed in on another device.
+ *
+ * The CLI is listening on a loopback port of the machine PPM runs on, but the
+ * browser that signed in was redirected to *its own* loopback address, so the
+ * result never arrived. Typing into the terminal will not help either — the CLI
+ * is holding it open, waiting. The server shares a host with the CLI, so it
+ * makes the call on the browser's behalf.
+ */
+import { useState } from "react";
+import { Loader2, LogIn } from "lucide-react";
+import { api } from "@/lib/api-client";
+import { isDeliverableCallback } from "@/lib/oauth-loopback-url";
+import { toast } from "sonner";
+
+interface TerminalFinishLoginProps {
+  onDone: () => void;
+}
+
+export function TerminalFinishLogin({ onDone }: TerminalFinishLoginProps) {
+  const [url, setUrl] = useState("");
+  const [sending, setSending] = useState(false);
+
+  const trimmed = url.trim();
+  const ready = !sending && isDeliverableCallback(trimmed);
+
+  const send = async () => {
+    setSending(true);
+    try {
+      await api.post("/api/loopback/callback", { url: trimmed });
+      toast.success("Sent to the waiting command", { duration: 2000 });
+      setUrl("");
+      onDone();
+    } catch (e) {
+      toast.error((e as Error).message, { duration: 4000 });
+    } finally {
+      setSending(false);
+    }
+  };
+
+  return (
+    <div className="shrink-0 border-t border-border px-3 py-3">
+      <p className="pb-2 text-[11px] leading-snug text-text-secondary">
+        Finished signing in and landed on a page that would not load? Paste that address here —
+        the machine will deliver it to the command still waiting.
+      </p>
+      <div className="flex items-center gap-2">
+        <input
+          value={url}
+          onChange={(e) => setUrl(e.target.value)}
+          inputMode="url"
+          autoCapitalize="off"
+          autoCorrect="off"
+          spellCheck={false}
+          placeholder="http://127.0.0.1:54132/oauth/callback?code=…"
+          aria-label="Callback address"
+          className="h-11 min-w-0 flex-1 rounded-lg border border-border bg-surface px-3 font-mono text-xs text-foreground placeholder:text-text-subtle"
+        />
+        <button
+          onClick={() => void send()}
+          disabled={!ready}
+          aria-label="Finish login"
+          className="flex size-11 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground disabled:opacity-40 active:opacity-80 transition-opacity"
+        >
+          {sending ? <Loader2 className="size-4 animate-spin" /> : <LogIn className="size-4" />}
+        </button>
+      </div>
+      {trimmed !== "" && !isDeliverableCallback(trimmed) && (
+        <p className="pt-1.5 text-[11px] text-error">
+          Needs to be the http://127.0.0.1:… address the sign-in redirected to.
+        </p>
+      )}
+    </div>
+  );
+}

package/src/web/components/terminal/terminal-links-sheet.tsx

@@ -0,0 +1,89 @@
+/**
+ * Tappable list of URLs found in the terminal scrollback.
+ *
+ * xterm resolves a link from a mouse hover and opens it on mouseup, so a touch
+ * device can never activate one — and without touch selection the URL cannot be
+ * copied out either. This sheet is the touch path to both.
+ *
+ * It also carries the way out of a login started here but finished on another
+ * device: see TerminalFinishLogin.
+ */
+import { ExternalLink, Copy, Link2Off } from "lucide-react";
+import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
+import { copyToClipboard } from "@/lib/clipboard";
+import { loopbackRedirectPort } from "@/lib/oauth-loopback-url";
+import { TerminalFinishLogin } from "./terminal-finish-login";
+import { toast } from "sonner";
+
+interface TerminalLinksSheetProps {
+  open: boolean;
+  onClose: () => void;
+  urls: string[];
+}
+
+export function TerminalLinksSheet({ open, onClose, urls }: TerminalLinksSheetProps) {
+  const handleCopy = async (url: string) => {
+    const ok = await copyToClipboard(url);
+    toast[ok ? "success" : "error"](ok ? "Link copied" : "Could not copy link", { duration: 1500 });
+    onClose();
+  };
+
+  // Ports any listed login will redirect back to. Their presence is what makes
+  // the finish-login step relevant, so it stays hidden the rest of the time.
+  const loopbackPorts = [...new Set(urls.map(loopbackRedirectPort).filter((p): p is string => !!p))];
+
+  return (
+    // Above the mobile dock sheet (z-60) this is opened from, or it renders
+    // behind the dock and cannot be reached at all.
+    <BottomSheet open={open} onClose={onClose} zIndex={70} className="flex flex-col max-h-[70vh]">
+      <div className="shrink-0 px-4 pb-2 text-xs font-medium text-text-secondary">
+        {urls.length > 0 ? `Links in terminal (${urls.length})` : "Links in terminal"}
+      </div>
+
+      <div className="flex-1 min-h-0 overflow-y-auto px-2 pb-2">
+        {urls.length === 0 ? (
+          <div className="flex flex-col items-center gap-2 px-4 py-8 text-center text-sm text-text-secondary">
+            <Link2Off className="size-5 text-text-subtle" />
+            No links found in the visible scrollback.
+          </div>
+        ) : (
+          urls.map((url) => {
+            const port = loopbackRedirectPort(url);
+            return (
+              <div key={url}>
+                <div className="flex items-stretch gap-1">
+                  <a
+                    href={url}
+                    target="_blank"
+                    rel="noreferrer noopener"
+                    onClick={onClose}
+                    className="flex min-h-11 flex-1 min-w-0 items-center gap-2 rounded-lg px-3 py-2 text-sm text-foreground active:bg-accent transition-colors"
+                  >
+                    <ExternalLink className="size-4 shrink-0 text-text-subtle" />
+                    <span className="min-w-0 flex-1 truncate text-left font-mono text-xs">{url}</span>
+                  </a>
+                  <button
+                    onClick={() => void handleCopy(url)}
+                    aria-label={`Copy ${url}`}
+                    className="flex size-11 shrink-0 items-center justify-center rounded-lg text-text-secondary active:bg-accent transition-colors"
+                  >
+                    <Copy className="size-4" />
+                  </button>
+                </div>
+                {port && (
+                  <p className="px-3 pb-2 text-[11px] leading-snug text-text-secondary">
+                    Signing in here sends you back to port {port} <strong>on the machine</strong>,
+                    not this device — so the terminal keeps waiting. Afterwards, paste the address
+                    bar below to finish it.
+                  </p>
+                )}
+              </div>
+            );
+          })
+        )}
+      </div>
+
+      {loopbackPorts.length > 0 && <TerminalFinishLogin onDone={onClose} />}
+    </BottomSheet>
+  );
+}

package/src/web/components/terminal/terminal-mobile-toolbar.tsx

@@ -0,0 +1,107 @@
+/**
+ * Touch key row for the terminal: clipboard actions plus the keys a soft
+ * keyboard does not offer (Tab, Esc, Ctrl, arrows, ^C).
+ *
+ * The row scrolls horizontally — 44px targets for eleven controls cannot fit a
+ * phone's width — so it carries an edge fade to advertise that there is more
+ * past the right edge. Without it the last keys look absent rather than
+ * off-screen.
+ */
+import { Copy, ClipboardPaste, MessageSquare, Link, TextSelect } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export interface MobileKey {
+  label: string;
+  value: string | null;
+}
+
+export const MOBILE_KEYS: readonly MobileKey[] = [
+  { label: "Tab", value: "\t" },
+  { label: "Esc", value: "\x1b" },
+  { label: "Ctrl", value: null },
+  { label: "↑", value: "\x1b[A" },
+  { label: "↓", value: "\x1b[B" },
+  { label: "←", value: "\x1b[D" },
+  { label: "→", value: "\x1b[C" },
+  { label: "^C", value: "\x03" },
+];
+
+const BUTTON_BASE =
+  "flex items-center justify-center shrink-0 min-w-11 min-h-11 rounded text-xs " +
+  "bg-surface-elevated text-text-primary active:bg-primary active:text-primary-foreground " +
+  "transition-colors select-none";
+
+interface TerminalMobileToolbarProps {
+  ctrlMode: boolean;
+  onToggleCtrl: () => void;
+  selectMode: boolean;
+  onToggleSelect: () => void;
+  onKey: (value: string) => void;
+  onCopy: () => void;
+  onPaste: () => void;
+  onSendToChat: () => void;
+  onOpenLinks: () => void;
+}
+
+export function TerminalMobileToolbar({
+  ctrlMode,
+  onToggleCtrl,
+  selectMode,
+  onToggleSelect,
+  onKey,
+  onCopy,
+  onPaste,
+  onSendToChat,
+  onOpenLinks,
+}: TerminalMobileToolbarProps) {
+  return (
+    <div className="relative shrink-0 bg-surface border-t border-border">
+      <div className="flex items-center gap-1 px-2 py-1.5 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+        <button
+          onClick={onToggleSelect}
+          aria-label="Select text"
+          aria-pressed={selectMode}
+          className={cn(BUTTON_BASE, selectMode && "bg-primary text-primary-foreground")}
+        >
+          <TextSelect size={16} />
+        </button>
+        <button onClick={onCopy} aria-label="Copy" className={BUTTON_BASE}>
+          <Copy size={16} />
+        </button>
+        <button onClick={onPaste} aria-label="Paste" className={BUTTON_BASE}>
+          <ClipboardPaste size={16} />
+        </button>
+        <button onClick={onOpenLinks} aria-label="Links" className={BUTTON_BASE}>
+          <Link size={16} />
+        </button>
+        <button onClick={onSendToChat} aria-label="Send to Chat" className={BUTTON_BASE}>
+          <MessageSquare size={16} />
+        </button>
+
+        <div className="w-px h-6 shrink-0 bg-border mx-0.5" />
+
+        {MOBILE_KEYS.map((key) => (
+          <button
+            key={key.label}
+            onClick={() => (key.value === null ? onToggleCtrl() : onKey(key.value))}
+            className={cn(
+              BUTTON_BASE,
+              "font-mono",
+              key.value === null && ctrlMode && "bg-primary text-primary-foreground",
+            )}
+          >
+            {key.label}
+          </button>
+        ))}
+
+        {/* Trailing spacer so the last key clears the fade instead of hiding under it. */}
+        <div className="w-6 shrink-0" aria-hidden />
+      </div>
+
+      <div
+        className="pointer-events-none absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-surface to-transparent"
+        aria-hidden
+      />
+    </div>
+  );
+}

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

@@ -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,
         )}
@@ -78,17 +81,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)       */
 /* ------------------------------------------------------------------ */