fix(cli): enable footer text selection in VP mode

docs/design/statusline-text-selection.md

@@ -0,0 +1,31 @@
+# Statusline text selection
+
+## Problem
+
+Virtualized History enables terminal-wide mouse tracking, so the terminal cannot
+provide native text selection. Qwen Code's application-level selection currently
+accepts presses only inside the history viewport, leaving the footer/statusline
+unselectable.
+
+## Design
+
+Keep one selection controller and give it an ordered list of selectable frame
+rectangles. The history viewport remains the primary rectangle. The default
+layout passes a ref for the rendered footer through `Composer`, and
+`MainContent` supplies its measured rectangle as the second target.
+
+The controller records which rectangle owns a selection when the press starts.
+Drag coordinates remain clamped to that rectangle, and frame/layout changes are
+compared only within it. Input, dialogs, scrollbars, and other controls remain
+outside the selectable targets, so their existing mouse behavior is unchanged.
+
+This applies only to the existing Virtualized History path. Normal-buffer mode
+continues to use terminal-native selection.
+
+## Verification
+
+- Dragging within history still highlights and copies history text.
+- Dragging within a multi-line footer highlights and copies footer text.
+- Presses in the gap between the history and footer do not start a selection.
+- Footer selection is cleared when its content or layout changes.
+- A live Virtualized History session can copy visible statusline text.

docs/design/vp-mouse-selection/design.md

@@ -136,6 +136,8 @@ virtualRow  = scrollTop + viewportRow
 
 Before starting a selection, hit-test that `(col, layoutRow)` lies inside the history viewport content region and not in the scrollbar column, composer, or footer; presses elsewhere fall through to the existing scrollbar-drag / click-to-focus handlers. This arbitration is the contract between the new selection subscriber and the existing mouse subscribers.
 
+The issue #8131 follow-up keeps that history-region arbitration but registers the footer as a separate selectable rectangle. A drag remains clamped to the rectangle where it started, so the composer and other controls stay excluded.
+
 Anchors are stored in **virtual-row space** so a selection stays pinned to content, but in PR 1 any non-selection scroll/resize/streaming clears the selection (off-screen content is not cached), so virtual-row anchoring here is just consistent bookkeeping, not cross-screen persistence.
 
 ### Copy

packages/cli/src/ui/components/Composer.tsx

@@ -4,8 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Box, Text, useIsScreenReaderEnabled } from 'ink';
-import { useCallback, useRef, useState } from 'react';
+import { Box, Text, useIsScreenReaderEnabled, type DOMElement } from 'ink';
+import { useCallback, useRef, useState, type RefObject } from 'react';
 import { LoadingIndicator } from './LoadingIndicator.js';
 import { InputPrompt } from './InputPrompt.js';
 import { Footer } from './Footer.js';
@@ -20,7 +20,11 @@ import { StreamingState } from '../types.js';
 import { FeedbackDialog } from '../FeedbackDialog.js';
 import { t } from '../../i18n/index.js';
 
-export const Composer = () => {
+interface ComposerProps {
+  footerRef?: RefObject<DOMElement | null>;
+}
+
+export const Composer = ({ footerRef }: ComposerProps) => {
   const config = useConfig();
   const isScreenReaderEnabled = useIsScreenReaderEnabled();
   const uiState = useUIState();
@@ -152,7 +156,7 @@ export const Composer = () => {
         (showShortcuts ? (
           <KeyboardShortcuts />
         ) : (
-          !isScreenReaderEnabled && <Footer />
+          !isScreenReaderEnabled && <Footer containerRef={footerRef} />
         ))}
     </Box>
   );

packages/cli/src/ui/components/Footer.test.tsx

@@ -6,8 +6,10 @@
 
 import { render } from 'ink-testing-library';
 import { render as inkRender } from 'ink';
+import type { DOMElement } from 'ink';
 import stripAnsi from 'strip-ansi';
 import { EventEmitter } from 'node:events';
+import { createRef, type RefObject } from 'react';
 import { act } from '@testing-library/react';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { Footer } from './Footer.js';
@@ -200,6 +202,7 @@ const renderAtLayoutWidth = (
   columns: number,
   uiState: UIState,
   backgroundEntries: readonly DialogEntry[] = [],
+  containerRef?: RefObject<DOMElement | null>,
 ) => {
   useTerminalSizeMock.mockReturnValue({ columns, rows: 24 });
   let lastFrame = '';
@@ -231,10 +234,10 @@ const renderAtLayoutWidth = (
       <BackgroundTaskViewStateContext.Provider
         value={createBackgroundTaskState(backgroundEntries)}
       >
-        <Footer />
+        <Footer containerRef={containerRef} />
       </BackgroundTaskViewStateContext.Provider>
     ) : (
-      <Footer />
+      <Footer containerRef={containerRef} />
     );
   const instance = inkRender(
     <SettingsContext.Provider value={mockSettings}>
@@ -280,6 +283,19 @@ describe('<Footer />', () => {
     });
   });
 
+  it('attaches the selectable-region ref to its outer box', () => {
+    const containerRef = createRef<DOMElement>();
+    const { unmount } = renderAtLayoutWidth(
+      80,
+      createMockUIState(),
+      [],
+      containerRef,
+    );
+
+    expect(containerRef.current).not.toBeNull();
+    unmount();
+  });
+
   it('passes the left-column width after a right pill reserves space', async () => {
     const originalSandbox = process.env['SANDBOX'];
     process.env['SANDBOX'] = 'qwen-code-docker';

packages/cli/src/ui/components/Footer.tsx

@@ -5,7 +5,7 @@
  */
 
 import type React from 'react';
-import { useRef } from 'react';
+import { type RefObject, useRef } from 'react';
 import { type DOMElement, Box, Text, useBoxMetrics } from 'ink';
 import { theme } from '../semantic-colors.js';
 import { ContextUsageDisplay } from './ContextUsageDisplay.js';
@@ -49,7 +49,11 @@ const PasteProgressBar: React.FC<{ progress: PasteProgress }> = ({
   );
 };
 
-export const Footer: React.FC = () => {
+interface FooterProps {
+  containerRef?: RefObject<DOMElement | null>;
+}
+
+export const Footer: React.FC<FooterProps> = ({ containerRef }) => {
   const uiState = useUIState();
   const config = useConfig();
   const settings = useSettings();
@@ -209,6 +213,7 @@ export const Footer: React.FC = () => {
   // (bottom), right section has indicators. Status line and hints coexist.
   return (
     <Box
+      ref={containerRef}
       flexDirection={isNarrow ? 'column' : 'row'}
       justifyContent={isNarrow ? 'flex-start' : 'space-between'}
       width="100%"

packages/cli/src/ui/components/MainContent.tsx

@@ -4,8 +4,16 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Box, Static } from 'ink';
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Box, Static, type DOMElement } from 'ink';
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type RefObject,
+} from 'react';
 import type { HistoryItem, HistoryItemWithoutId } from '../types.js';
 import {
   isHistoryItemVisibleAfterRestore,
@@ -32,6 +40,7 @@ import {
   type ScrollableListRef,
 } from './shared/ScrollableList.js';
 import { TextSelectionController } from '../selection/use-text-selection.js';
+import { measureElementPosition } from '../utils/measure-element-position.js';
 
 // Limit Gemini messages to a very high number of lines to mitigate performance
 // issues in the worst case if we somehow get an enormous response from Gemini.
@@ -114,7 +123,11 @@ const virtualKeyExtractor = (item: VpItem) =>
 const virtualIsStaticItem = (item: VpItem) =>
   item.type === 'vp-banner' || item.id > 0;
 
-export const MainContent = () => {
+interface MainContentProps {
+  footerRef?: RefObject<DOMElement | null>;
+}
+
+export const MainContent = ({ footerRef }: MainContentProps) => {
   const { version } = useAppContext();
   const uiState = useUIState();
   const { allExpanded: fullDetail } = useThoughtExpanded();
@@ -460,6 +473,11 @@ export const MainContent = () => {
         <TextSelectionController
           isActive={!uiState.dialogsVisible}
           getViewportRect={() => scrollRef.current?.getViewportRect() ?? null}
+          getAdditionalSelectableRects={() =>
+            footerRef?.current
+              ? [measureElementPosition(footerRef.current)]
+              : []
+          }
           getScrollState={() =>
             scrollRef.current?.getScrollState() ?? {
               scrollTop: 0,

packages/cli/src/ui/layouts/DefaultAppLayout.tsx

@@ -6,7 +6,7 @@
 
 import type React from 'react';
 import { useEffect, useRef } from 'react';
-import { Box } from 'ink';
+import { Box, type DOMElement } from 'ink';
 import { MainContent } from '../components/MainContent.js';
 import { UpdateNotification } from '../components/UpdateNotification.js';
 import { DialogManager } from '../components/DialogManager.js';
@@ -29,6 +29,7 @@ import { getDialogMaxHeight } from '../utils/layoutUtils.js';
 
 export const DefaultAppLayout: React.FC = () => {
   const uiState = useUIState();
+  const footerRef = useRef<DOMElement>(null);
   const { refreshStatic } = useUIActions();
   const { activeView, agents } = useAgentViewState();
   const { columns: terminalWidth } = useTerminalSize();
@@ -79,7 +80,7 @@ export const DefaultAppLayout: React.FC = () => {
       ) : (
         <>
           {/* Main view: conversation history + main composer / dialogs */}
-          <MainContent />
+          <MainContent footerRef={footerRef} />
           <Box flexDirection="column" ref={uiState.mainControlsRef}>
             {!uiState.dialogsVisible && uiState.updateInfo && (
               <UpdateNotification message={uiState.updateInfo.message} />
@@ -114,7 +115,7 @@ export const DefaultAppLayout: React.FC = () => {
                     />
                   </Box>
                 )}
-                <Composer />
+                <Composer footerRef={footerRef} />
               </>
             )}
             <ExitWarning />

packages/cli/src/ui/selection/selection-span.test.ts

@@ -67,11 +67,73 @@ describe('wordSpanAt', () => {
 describe('lineSpanAt', () => {
   it('spans from column 0 to the last non-space cell', () => {
     const frame = frameFromLines(['  hi there   ']);
-    expect(lineSpanAt(frame, 0)).toEqual({ sx: 0, sy: 0, ex: 9, ey: 0 });
+    expect(lineSpanAt(frame, 4, 0)).toEqual({ sx: 0, sy: 0, ex: 9, ey: 0 });
   });
 
   it('returns null for a blank line', () => {
     const frame = frameFromLines(['     ']);
-    expect(lineSpanAt(frame, 0)).toBeNull();
+    expect(lineSpanAt(frame, 2, 0)).toBeNull();
+  });
+
+  it('stops at a non-selectable layout gap', () => {
+    const frame = frameFromLines(['status    42%']);
+    for (let x = 6; x < 10; x++) {
+      (frame.cells[0][x] as FrameCell).selectable = false;
+    }
+
+    expect(lineSpanAt(frame, 2, 0)).toEqual({
+      sx: 0,
+      sy: 0,
+      ex: 5,
+      ey: 0,
+    });
+    expect(lineSpanAt(frame, 7, 0)).toEqual({
+      sx: 0,
+      sy: 0,
+      ex: 5,
+      ey: 0,
+    });
+    expect(lineSpanAt(frame, 9, 0)).toEqual({
+      sx: 10,
+      sy: 0,
+      ex: 12,
+      ey: 0,
+    });
+  });
+
+  it('snaps non-selectable history padding and gutters to visible content', () => {
+    const padded = frameFromLines(['history   ']);
+    for (let x = 7; x < padded.cells[0].length; x++) {
+      (padded.cells[0][x] as FrameCell).selectable = false;
+    }
+    expect(lineSpanAt(padded, 9, 0)).toEqual({
+      sx: 0,
+      sy: 0,
+      ex: 6,
+      ey: 0,
+    });
+
+    const gutter = frameFromLines(['  1 code']);
+    for (let x = 0; x < 4; x++) {
+      (gutter.cells[0][x] as FrameCell).selectable = false;
+    }
+    expect(lineSpanAt(gutter, 1, 0)).toEqual({
+      sx: 4,
+      sy: 0,
+      ex: 7,
+      ey: 0,
+    });
+  });
+
+  it('snaps a non-selectable wide-character spacer to its glyph', () => {
+    const frame = frameFromLines(['中']);
+    (frame.cells[0][1] as FrameCell).selectable = false;
+
+    expect(lineSpanAt(frame, 1, 0)).toEqual({
+      sx: 0,
+      sy: 0,
+      ex: 0,
+      ey: 0,
+    });
   });
 });