feat(chat): glass scroll-to-bottom pill on the left carries the streaming signal

Away from the live edge the floating status row fades out (it was
transparent text over scrolled history) and the scroll-to-bottom pill
takes over the activity signal with a pulsing dot. The pill moves to
the left edge — matching the status row it stands in for — and gets the
same glass treatment as the dropdowns.

packages/ui/src/components/chat/ChatContainer.tsx

@@ -148,6 +148,7 @@ type HydratingToolSkeletonRow = {
 
 type ChatViewportProps = {
     onStatusOverlayNode: (node: HTMLDivElement | null) => void;
+    statusOverlayHidden: boolean;
     currentSessionId: string;
     currentSessionKey: string;
     isDesktopExpandedInput: boolean;
@@ -192,6 +193,7 @@ type ChatViewportProps = {
 
 const ChatViewport = React.memo(({
     onStatusOverlayNode,
+    statusOverlayHidden,
     currentSessionId,
     currentSessionKey,
     isDesktopExpandedInput,
@@ -421,10 +423,15 @@ const ChatViewport = React.memo(({
                     background — text streams beneath it; the measured height
                     feeds composerOverlayHeight so the live line never hides
                     under it. */}
-                <div className="pointer-events-none absolute inset-x-0 bottom-0 z-10">
+                <div
+                    className={cn(
+                        'pointer-events-none absolute inset-x-0 bottom-0 z-10 transition-opacity duration-150',
+                        statusOverlayHidden && 'opacity-0',
+                    )}
+                >
                     <div
                         ref={onStatusOverlayNode}
-                        className="pointer-events-auto pb-2 [&:not(:has(*))]:hidden"
+                        className={cn('pb-2 [&:not(:has(*))]:hidden', statusOverlayHidden ? 'pointer-events-none' : 'pointer-events-auto')}
                     >
                         <StatusRowContainer />
                     </div>
@@ -445,6 +452,7 @@ const ChatViewport = React.memo(({
     );
 }, (prev, next) => {
     return prev.onStatusOverlayNode === next.onStatusOverlayNode
+        && prev.statusOverlayHidden === next.statusOverlayHidden
         && prev.currentSessionId === next.currentSessionId
         && prev.currentSessionKey === next.currentSessionKey
         && prev.isDesktopExpandedInput === next.isDesktopExpandedInput
@@ -1359,6 +1367,7 @@ export const ChatContainer: React.FC<ChatContainerProps> = ({
         return (
             <ChatViewport
                 onStatusOverlayNode={onStatusOverlayNode}
+                statusOverlayHidden={timelineController.showScrollToBottom}
                 currentSessionId={currentSessionId ?? ''}
                 currentSessionKey={currentSessionKey ?? currentSessionId ?? ''}
                 isDesktopExpandedInput={isDesktopExpandedInput}
@@ -1418,6 +1427,7 @@ export const ChatContainer: React.FC<ChatContainerProps> = ({
                 {!draftLayoutVisible && !isDesktopExpandedInput && sessionMessages.length > 0 && (
                     <ScrollToBottomButton
                         visible={timelineController.showScrollToBottom}
+                        working={sessionIsWorking}
                         onClick={navigation.resumeToLatest}
                     />
                 )}

packages/ui/src/components/chat/components/ScrollToBottomButton.tsx

@@ -7,26 +7,36 @@ import { useI18n } from '@/lib/i18n';
 
 interface ScrollToBottomButtonProps {
     visible: boolean;
+    /** The session is still streaming: the pill carries the activity signal
+        while the floating status row is hidden away from the live edge. */
+    working?: boolean;
     onClick: () => void;
 }
 
-const ScrollToBottomButton: React.FC<ScrollToBottomButtonProps> = ({ visible, onClick }) => {
+const ScrollToBottomButton: React.FC<ScrollToBottomButtonProps> = ({ visible, working = false, onClick }) => {
     const { t } = useI18n();
     return (
         <div
             className={cn(
-                'absolute bottom-full left-1/2 -translate-x-1/2 mb-2 transition-all duration-150',
+                // Left-aligned to match the status row it stands in for.
+                'absolute bottom-full left-2 mb-2 transition-all duration-150',
                 visible ? 'opacity-100 translate-y-0 scale-100 pointer-events-auto' : 'opacity-0 translate-y-2 scale-95 pointer-events-none',
             )}
         >
             <Button
-                variant="outline"
+                variant="ghost"
                 size="sm"
                 onClick={onClick}
-                className="size-8 rounded-full [corner-shape:round] p-0 shadow-none bg-background/95 hover:bg-interactive-hover"
+                className="oc-glass-popover oc-glass-floating relative size-8 rounded-full [corner-shape:round] p-0 shadow-none"
                 aria-label={t('chat.scrollToBottom.aria')}
             >
                 <Icon name="arrow-down" className="h-4 w-4" />
+                {working ? (
+                    <span
+                        aria-hidden
+                        className="absolute -right-0.5 -top-0.5 h-2 w-2 rounded-full bg-primary animate-pulse"
+                    />
+                ) : null}
             </Button>
         </div>
     );