v1.10.4: booterm mobile UX — copy/paste, swipe-close, send-to-chat, search

- Long-press selection + floating menu (mobile + desktop right-click): Copy,
  Paste, Select All, Search, Send to chat. Tap-outside / Esc dismiss.
- Pane-header Paste button (📋) for iOS user-gesture clipboard read.
- Swipe-left-to-close on mobile pane pill with red "Close" overlay and
  translateX visual hint; spring-back below 80px threshold.
- Send-to-chat reverse path: chatInputsRegistry + sendToChat event mirror
  the existing terminalsRegistry pattern. ChatInput appends with newline
  separator on receive and focuses (no auto-send).
- Scrollback search via xterm-addon-search@^0.13.0: SearchBar overlay with
  N-of-M match counter (onDidChangeResults), Enter/Shift-Enter cycling.
- Cmd/Ctrl+F intercept in Session.tsx when active pane is terminal; xterm
  also intercepts when focused. Browser native find passes through elsewhere.
- terminalsRegistry signature extended with openSearch + paste callbacks.

Includes deferred CLAUDE.md updates documenting v1.10/v1.10.1/v1.10.2/v1.10.3
learnings (uid 1000 collision, libc match, two event buses, vite proxy order,
mobile pane URL sync, xterm canvas selection).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/web/src/components/MobileTabSwitcher.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import {
   Bot,
   ChevronDown,
@@ -31,6 +31,15 @@ interface Props {
   onRenameChat: (chatId: string, name: string) => Promise<void>;
 }
 
+// v1.10.4: swipe-left-to-close on the pane pill. Threshold matches the spec
+// (80px). Vertical bail-out at 30px because the pill sits inside a vertical
+// scrollable header — diagonal-ish swipes shouldn't accidentally close panes.
+const SWIPE_CLOSE_PX = 80;
+const SWIPE_VERTICAL_BAIL_PX = 30;
+// Visual cap: pill translates left up to this much. Past this, dragX stays
+// pinned so the user has a clear "release to close" indicator.
+const SWIPE_VISUAL_CAP = 120;
+
 function paneIcon(kind: WorkspacePane['kind']) {
   if (kind === 'terminal') return <Terminal size={14} />;
   if (kind === 'agent') return <Bot size={14} />;
@@ -70,11 +79,66 @@ export function MobileTabSwitcher({
   const [open, setOpen] = useState(false);
   const [renamingChatId, setRenamingChatId] = useState<string | null>(null);
   const [renameValue, setRenameValue] = useState('');
+  // v1.10.4: swipe-left state. dragX is the (clamped, negative) drag offset
+  // in px. suppressClick latches when a swipe completes so the trailing click
+  // doesn't pop open the BottomSheet on the just-closed pane.
+  const [dragX, setDragX] = useState(0);
+  const swipeStart = useRef<{ x: number; y: number } | null>(null);
+  const swipeBailed = useRef(false);
+  const suppressClick = useRef(false);
 
   const active = panes[activePaneIdx];
   const activeLabel = active ? paneLabel(active, chats) : 'Empty';
   const activeChatId = paneActiveChatId(active);
 
+  function onPillTouchStart(e: React.TouchEvent<HTMLDivElement>): void {
+    if (e.touches.length !== 1) return;
+    const t = e.touches[0]!;
+    swipeStart.current = { x: t.clientX, y: t.clientY };
+    swipeBailed.current = false;
+    setDragX(0);
+  }
+  function onPillTouchMove(e: React.TouchEvent<HTMLDivElement>): void {
+    if (!swipeStart.current || swipeBailed.current) return;
+    if (e.touches.length !== 1) return;
+    const t = e.touches[0]!;
+    const dx = t.clientX - swipeStart.current.x;
+    const dy = t.clientY - swipeStart.current.y;
+    // Bail to scroll if vertical motion dominates before horizontal.
+    if (Math.abs(dy) > SWIPE_VERTICAL_BAIL_PX && Math.abs(dy) > Math.abs(dx)) {
+      swipeBailed.current = true;
+      setDragX(0);
+      return;
+    }
+    // Only allow leftward drag (negative). Cap visual displacement.
+    const clamped = Math.max(-SWIPE_VISUAL_CAP, Math.min(0, dx));
+    setDragX(clamped);
+  }
+  function onPillTouchEnd(): void {
+    const finalDx = dragX;
+    swipeStart.current = null;
+    if (swipeBailed.current) {
+      setDragX(0);
+      return;
+    }
+    if (finalDx <= -SWIPE_CLOSE_PX && panes.length > 1) {
+      suppressClick.current = true;
+      // Reset dragX after the close so subsequent re-renders look right.
+      setDragX(0);
+      onRemovePane(activePaneIdx);
+      return;
+    }
+    setDragX(0);
+  }
+  function onPillClick(): void {
+    if (suppressClick.current) {
+      suppressClick.current = false;
+      return;
+    }
+    setOpen(true);
+  }
+  const swipeProgress = Math.min(1, Math.abs(dragX) / SWIPE_CLOSE_PX);
+
   // Long-press mirrors ChatTabBar: synthesize a contextmenu event on the row
   // so the trailing kebab's Radix DropdownMenu opens at the touch point.
   const longPress = useLongPress(({ clientX, clientY, target }) => {
@@ -113,17 +177,39 @@ export function MobileTabSwitcher({
 
   return (
     <>
-      <button
-        type="button"
-        onClick={() => setOpen(true)}
-        className="flex-1 inline-flex items-center gap-1.5 min-h-[44px] px-3 text-sm rounded-full bg-muted/40 hover:bg-muted/70 text-foreground min-w-0"
-        aria-label="Switch pane"
+      <div
+        className="flex-1 relative min-w-0"
+        onTouchStart={onPillTouchStart}
+        onTouchMove={onPillTouchMove}
+        onTouchEnd={onPillTouchEnd}
+        onTouchCancel={onPillTouchEnd}
       >
-        <span className="shrink-0 text-muted-foreground">{paneIcon(active?.kind ?? 'chat')}</span>
-        <StatusDot chatId={activeChatId} />
-        <span className="truncate flex-1 text-left">{activeLabel}</span>
-        <ChevronDown size={14} className="opacity-60 shrink-0" />
-      </button>
+        {/* v1.10.4: red "Close" hint behind the pill. Opacity tracks the
+            swipe progress (0 at rest, 1 at the close threshold). aria-hidden
+            because the actionable affordance is the swipe, not this label. */}
+        <div
+          aria-hidden="true"
+          className="absolute inset-0 flex items-center justify-end pr-4 rounded-full bg-destructive/80 text-destructive-foreground text-xs font-medium"
+          style={{ opacity: swipeProgress, pointerEvents: 'none' }}
+        >
+          Close
+        </div>
+        <button
+          type="button"
+          onClick={onPillClick}
+          className="flex-1 w-full inline-flex items-center gap-1.5 min-h-[44px] px-3 text-sm rounded-full bg-muted/40 hover:bg-muted/70 text-foreground min-w-0 relative"
+          aria-label="Switch pane"
+          style={{
+            transform: `translateX(${dragX}px)`,
+            transition: dragX === 0 ? 'transform 180ms ease-out' : 'none',
+          }}
+        >
+          <span className="shrink-0 text-muted-foreground">{paneIcon(active?.kind ?? 'chat')}</span>
+          <StatusDot chatId={activeChatId} />
+          <span className="truncate flex-1 text-left">{activeLabel}</span>
+          <ChevronDown size={14} className="opacity-60 shrink-0" />
+        </button>
+      </div>
 
       <BottomSheet open={open} onClose={() => setOpen(false)} title="Panes">
         <ul className="px-2 py-2 space-y-1">