diff --git a/packages/cli/src/ui/components/messages/ShellToolMessage.tsx b/packages/cli/src/ui/components/messages/ShellToolMessage.tsx index 8e760b28e7..fe310fdd95 100644 --- a/packages/cli/src/ui/components/messages/ShellToolMessage.tsx +++ b/packages/cli/src/ui/components/messages/ShellToolMessage.tsx @@ -78,7 +78,7 @@ export const ShellToolMessage: React.FC = ({ embeddedShellFocused, ); - const { setEmbeddedShellFocused } = useUIActions(); + const { setEmbeddedShellFocused, setActivePtyId } = useUIActions(); const wasFocusedRef = React.useRef(false); React.useEffect(() => { @@ -102,6 +102,7 @@ export const ShellToolMessage: React.FC = ({ const handleFocus = () => { if (isThisShellFocusable) { + setActivePtyId(ptyId); setEmbeddedShellFocused(true); } }; diff --git a/packages/cli/src/ui/components/shared/Scrollable.tsx b/packages/cli/src/ui/components/shared/Scrollable.tsx index 87ec6e72d6..50591b6f96 100644 --- a/packages/cli/src/ui/components/shared/Scrollable.tsx +++ b/packages/cli/src/ui/components/shared/Scrollable.tsx @@ -119,6 +119,9 @@ export const Scrollable: React.FC = ({ 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 = ({ setPendingScrollTop(next); setScrollTop(next); }, - [getScrollTop, setPendingScrollTop], + [getScrollTop, setPendingScrollTop, hasFocus], ); const { scrollbarColor, flashScrollbar, scrollByWithAnimation } = @@ -210,7 +213,7 @@ export const Scrollable: React.FC = ({ overflowX="hidden" scrollTop={scrollTop} flexGrow={flexGrow} - scrollbarThumbColor={scrollbarColor} + scrollbarThumbColor={hasFocus ? scrollbarColor : undefined} > {/* This inner box is necessary to prevent the parent from shrinking