Merge remote-tracking branch 'origin/main' into dev

packages/app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@getpaseo/app",
   "main": "index.ts",
-  "version": "0.1.51",
+  "version": "0.1.52",
   "private": true,
   "scripts": {
     "start": "expo start",
@@ -31,9 +31,9 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@expo/vector-icons": "^15.0.2",
     "@floating-ui/react-native": "^0.10.7",
-    "@getpaseo/expo-two-way-audio": "0.1.51",
-    "@getpaseo/highlight": "0.1.51",
-    "@getpaseo/server": "0.1.51",
+    "@getpaseo/expo-two-way-audio": "0.1.52",
+    "@getpaseo/highlight": "0.1.52",
+    "@getpaseo/server": "0.1.52",
     "@gorhom/bottom-sheet": "^5.2.6",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "2.2.0",

packages/app/src/screens/workspace/workspace-desktop-tabs-row.tsx

@@ -1,4 +1,12 @@
-import { useCallback, useMemo, useState, type Dispatch, type SetStateAction } from "react";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type Dispatch,
+  type SetStateAction,
+} from "react";
 import {
   ActivityIndicator,
   Platform,
@@ -97,6 +105,27 @@ function getFallbackTabLabel(tab: WorkspaceTabDescriptor): string {
   return "Agent";
 }
 
+function useMiddleClickClose(onClose: () => void) {
+  const ref = useRef<View>(null);
+
+  useEffect(() => {
+    const node = ref.current as unknown as HTMLElement | null;
+    if (!node) return;
+
+    function handleAuxClick(event: MouseEvent) {
+      if (event.button === 1) {
+        event.preventDefault();
+        onClose();
+      }
+    }
+
+    node.addEventListener("auxclick", handleAuxClick);
+    return () => node.removeEventListener("auxclick", handleAuxClick);
+  }, [onClose]);
+
+  return ref;
+}
+
 function TabChip({
   tab,
   isActive,
@@ -136,6 +165,9 @@ function TabChip({
 }) {
   const { theme } = useUnistyles();
   const { closeButtonTestId, contextMenuTestId, menuEntries } = resolvedTab;
+  const middleClickRef = useMiddleClickClose(
+    useCallback(() => void onCloseTab(tab.tabId), [onCloseTab, tab.tabId]),
+  );
   const [hovered, setHovered] = useState(false);
   const isHighlighted = isActive || hovered || isCloseHovered;
   const closeButtonDragBlockers =
@@ -151,6 +183,7 @@ function TabChip({
       : undefined;
 
   return (
+    <View ref={middleClickRef}>
     <ContextMenu key={tab.key}>
       <Tooltip delayDuration={400} enabledOnDesktop enabledOnMobile={false}>
         <TooltipTrigger asChild triggerRefProp="triggerRef">
@@ -318,6 +351,7 @@ function TabChip({
         )}
       </ContextMenuContent>
     </ContextMenu>
+    </View>
   );
 }