feat(cli): focus-based nested scrolling in shell toolboxes to prevent scroll-jacking

packages/cli/src/ui/components/messages/ShellToolMessage.tsx

@@ -78,7 +78,7 @@ export const ShellToolMessage: React.FC<ShellToolMessageProps> = ({
     embeddedShellFocused,
   );
 
-  const { setEmbeddedShellFocused } = useUIActions();
+  const { setEmbeddedShellFocused, setActivePtyId } = useUIActions();
   const wasFocusedRef = React.useRef(false);
 
   React.useEffect(() => {
@@ -102,6 +102,7 @@ export const ShellToolMessage: React.FC<ShellToolMessageProps> = ({
 
   const handleFocus = () => {
     if (isThisShellFocusable) {
+      setActivePtyId(ptyId);
       setEmbeddedShellFocused(true);
     }
   };

packages/cli/src/ui/components/shared/Scrollable.tsx

@@ -119,6 +119,9 @@ export const Scrollable: React.FC<ScrollableProps> = ({
 
   const scrollBy = useCallback(
     (delta: number) => {
+      if (!hasFocus) {
+        return;
+      }
       const { scrollHeight, innerHeight } = sizeRef.current;
       const maxScroll = Math.max(0, scrollHeight - innerHeight);
       const current = Math.min(getScrollTop(), maxScroll);
@@ -129,7 +132,7 @@ export const Scrollable: React.FC<ScrollableProps> = ({
       setPendingScrollTop(next);
       setScrollTop(next);
     },
-    [getScrollTop, setPendingScrollTop],
+    [getScrollTop, setPendingScrollTop, hasFocus],
   );
 
   const { scrollbarColor, flashScrollbar, scrollByWithAnimation } =
@@ -210,7 +213,7 @@ export const Scrollable: React.FC<ScrollableProps> = ({
       overflowX="hidden"
       scrollTop={scrollTop}
       flexGrow={flexGrow}
-      scrollbarThumbColor={scrollbarColor}
+      scrollbarThumbColor={hasFocus ? scrollbarColor : undefined}
     >
       {/*
         This inner box is necessary to prevent the parent from shrinking