Reapply "feat(accessibility): implement centralized screen reader layout (#9263)

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

packages/cli/src/ui/App.test.tsx

@@ -6,12 +6,19 @@
 
 import { describe, it, expect, vi } from 'vitest';
 import { render } from 'ink-testing-library';
-import { Text } from 'ink';
+import { Text, useIsScreenReaderEnabled } from 'ink';
 import { App } from './App.js';
 import { UIStateContext, type UIState } from './contexts/UIStateContext.js';
 import { StreamingState } from './types.js';
 
-// Mock components to isolate App component testing
+vi.mock('ink', async (importOriginal) => {
+  const original = await importOriginal<typeof import('ink')>();
+  return {
+    ...original,
+    useIsScreenReaderEnabled: vi.fn(),
+  };
+});
+
 vi.mock('./components/MainContent.js', () => ({
   MainContent: () => <Text>MainContent</Text>,
 }));
@@ -32,6 +39,10 @@ vi.mock('./components/QuittingDisplay.js', () => ({
   QuittingDisplay: () => <Text>Quitting...</Text>,
 }));
 
+vi.mock('./components/Footer.js', () => ({
+  Footer: () => <Text>Footer</Text>,
+}));
+
 describe('App', () => {
   const mockUIState: Partial<UIState> = {
     streamingState: StreamingState.Idle,
@@ -122,4 +133,30 @@ describe('App', () => {
 
     expect(lastFrame()).toContain('Press Ctrl+D again to exit.');
   });
+
+  it('should render ScreenReaderAppLayout when screen reader is enabled', () => {
+    (useIsScreenReaderEnabled as vi.Mock).mockReturnValue(true);
+
+    const { lastFrame } = render(
+      <UIStateContext.Provider value={mockUIState as UIState}>
+        <App />
+      </UIStateContext.Provider>,
+    );
+
+    expect(lastFrame()).toContain(
+      'Notifications\nFooter\nMainContent\nComposer',
+    );
+  });
+
+  it('should render DefaultAppLayout when screen reader is not enabled', () => {
+    (useIsScreenReaderEnabled as vi.Mock).mockReturnValue(false);
+
+    const { lastFrame } = render(
+      <UIStateContext.Provider value={mockUIState as UIState}>
+        <App />
+      </UIStateContext.Provider>,
+    );
+
+    expect(lastFrame()).toContain('MainContent\nNotifications\nComposer');
+  });
 });

packages/cli/src/ui/App.tsx

@@ -4,18 +4,16 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Box, Text } from 'ink';
-import { StreamingContext } from './contexts/StreamingContext.js';
-import { Notifications } from './components/Notifications.js';
-import { MainContent } from './components/MainContent.js';
-import { DialogManager } from './components/DialogManager.js';
-import { Composer } from './components/Composer.js';
+import { useIsScreenReaderEnabled } from 'ink';
 import { useUIState } from './contexts/UIStateContext.js';
+import { StreamingContext } from './contexts/StreamingContext.js';
 import { QuittingDisplay } from './components/QuittingDisplay.js';
-import { theme } from './semantic-colors.js';
+import { ScreenReaderAppLayout } from './layouts/ScreenReaderAppLayout.js';
+import { DefaultAppLayout } from './layouts/DefaultAppLayout.js';
 
 export const App = () => {
   const uiState = useUIState();
+  const isScreenReaderEnabled = useIsScreenReaderEnabled();
 
   if (uiState.quittingMessages) {
     return <QuittingDisplay />;
@@ -23,35 +21,7 @@ export const App = () => {
 
   return (
     <StreamingContext.Provider value={uiState.streamingState}>
-      <Box flexDirection="column" width="90%">
-        <MainContent />
-
-        <Box flexDirection="column" ref={uiState.mainControlsRef}>
-          <Notifications />
-
-          {uiState.dialogsVisible ? (
-            <DialogManager addItem={uiState.historyManager.addItem} />
-          ) : (
-            <Composer />
-          )}
-
-          {uiState.dialogsVisible && uiState.ctrlCPressedOnce && (
-            <Box marginTop={1}>
-              <Text color={theme.status.warning}>
-                Press Ctrl+C again to exit.
-              </Text>
-            </Box>
-          )}
-
-          {uiState.dialogsVisible && uiState.ctrlDPressedOnce && (
-            <Box marginTop={1}>
-              <Text color={theme.status.warning}>
-                Press Ctrl+D again to exit.
-              </Text>
-            </Box>
-          )}
-        </Box>
-      </Box>
+      {isScreenReaderEnabled ? <ScreenReaderAppLayout /> : <DefaultAppLayout />}
     </StreamingContext.Provider>
   );
 };

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

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Box, Text } from 'ink';
+import { Box, Text, useIsScreenReaderEnabled } from 'ink';
 import { useMemo } from 'react';
 import { LoadingIndicator } from './LoadingIndicator.js';
 import { ContextSummaryDisplay } from './ContextSummaryDisplay.js';
@@ -12,7 +12,7 @@ import { AutoAcceptIndicator } from './AutoAcceptIndicator.js';
 import { ShellModeIndicator } from './ShellModeIndicator.js';
 import { DetailedMessagesDisplay } from './DetailedMessagesDisplay.js';
 import { InputPrompt, calculatePromptWidths } from './InputPrompt.js';
-import { Footer, type FooterProps } from './Footer.js';
+import { Footer } from './Footer.js';
 import { ShowMoreLines } from './ShowMoreLines.js';
 import { QueuedMessageDisplay } from './QueuedMessageDisplay.js';
 import { OverflowProvider } from '../contexts/OverflowContext.js';
@@ -30,9 +30,10 @@ import { ConfigInitDisplay } from '../components/ConfigInitDisplay.js';
 export const Composer = () => {
   const config = useConfig();
   const settings = useSettings();
+  const isScreenReaderEnabled = useIsScreenReaderEnabled();
   const uiState = useUIState();
   const uiActions = useUIActions();
-  const { vimEnabled, vimMode } = useVimMode();
+  const { vimEnabled } = useVimMode();
   const terminalWidth = process.stdout.columns;
   const isNarrow = isNarrowWidth(terminalWidth);
   const debugConsoleMaxHeight = Math.floor(Math.max(terminalWidth * 0.2, 5));
@@ -45,26 +46,6 @@ export const Composer = () => {
     [uiState.terminalWidth],
   );
 
-  // Build footer props from context values
-  const footerProps: Omit<FooterProps, 'vimMode'> = {
-    model: config.getModel(),
-    targetDir: config.getTargetDir(),
-    debugMode: config.getDebugMode(),
-    branchName: uiState.branchName,
-    debugMessage: uiState.debugMessage,
-    corgiMode: uiState.corgiMode,
-    errorCount: uiState.errorCount,
-    showErrorDetails: uiState.showErrorDetails,
-    showMemoryUsage:
-      config.getDebugMode() || settings.merged.ui?.showMemoryUsage || false,
-    promptTokenCount: uiState.sessionStats.lastPromptTokenCount,
-    nightly: uiState.nightly,
-    isTrustedFolder: uiState.isTrustedFolder,
-    hideCWD: settings.merged.ui?.footer?.hideCWD || false,
-    hideSandboxStatus: settings.merged.ui?.footer?.hideSandboxStatus || false,
-    hideModelInfo: settings.merged.ui?.footer?.hideModelInfo || false,
-  };
-
   return (
     <Box flexDirection="column">
       {!uiState.embeddedShellFocused && (
@@ -176,9 +157,7 @@ export const Composer = () => {
         />
       )}
 
-      {!settings.merged.ui?.hideFooter && (
-        <Footer {...footerProps} vimMode={vimEnabled ? vimMode : undefined} />
-      )}
+      {!settings.merged.ui?.hideFooter && !isScreenReaderEnabled && <Footer />}
     </Box>
   );
 };

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

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { Box, Text } from 'ink';
+import { useUIState } from '../contexts/UIStateContext.js';
+import { theme } from '../semantic-colors.js';
+
+export const ExitWarning: React.FC = () => {
+  const uiState = useUIState();
+  return (
+    <>
+      {uiState.dialogsVisible && uiState.ctrlCPressedOnce && (
+        <Box marginTop={1}>
+          <Text color={theme.status.warning}>Press Ctrl+C again to exit.</Text>
+        </Box>
+      )}
+
+      {uiState.dialogsVisible && uiState.ctrlDPressedOnce && (
+        <Box marginTop={1}>
+          <Text color={theme.status.warning}>Press Ctrl+D again to exit.</Text>
+        </Box>
+      )}
+    </>
+  );
+};

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

@@ -10,6 +10,11 @@ import { Footer } from './Footer.js';
 import * as useTerminalSize from '../hooks/useTerminalSize.js';
 import { tildeifyPath } from '@google/gemini-cli-core';
 import path from 'node:path';
+import { type UIState, UIStateContext } from '../contexts/UIStateContext.js';
+import { ConfigContext } from '../contexts/ConfigContext.js';
+import { SettingsContext } from '../contexts/SettingsContext.js';
+import type { LoadedSettings } from '../../config/settings.js';
+import { VimModeProvider } from '../contexts/VimModeContext.js';
 
 vi.mock('../hooks/useTerminalSize.js');
 const useTerminalSizeMock = vi.mocked(useTerminalSize.useTerminalSize);
@@ -33,50 +38,93 @@ const defaultProps = {
   targetDir:
     '/Users/test/project/foo/bar/and/some/more/directories/to/make/it/long',
   branchName: 'main',
-  debugMode: false,
-  debugMessage: '',
-  corgiMode: false,
-  errorCount: 0,
-  showErrorDetails: false,
-  showMemoryUsage: false,
-  promptTokenCount: 100,
-  nightly: false,
 };
 
-const renderWithWidth = (width: number, props = defaultProps) => {
+const createMockConfig = (overrides = {}) => ({
+  getModel: vi.fn(() => defaultProps.model),
+  getTargetDir: vi.fn(() => defaultProps.targetDir),
+  getDebugMode: vi.fn(() => false),
+  ...overrides,
+});
+
+const createMockUIState = (overrides: Partial<UIState> = {}): UIState =>
+  ({
+    sessionStats: {
+      lastPromptTokenCount: 100,
+    },
+    branchName: defaultProps.branchName,
+    ...overrides,
+  }) as UIState;
+
+const createDefaultSettings = (
+  options: {
+    showMemoryUsage?: boolean;
+    hideCWD?: boolean;
+    hideSandboxStatus?: boolean;
+    hideModelInfo?: boolean;
+  } = {},
+): LoadedSettings =>
+  ({
+    merged: {
+      ui: {
+        showMemoryUsage: options.showMemoryUsage,
+        footer: {
+          hideCWD: options.hideCWD,
+          hideSandboxStatus: options.hideSandboxStatus,
+          hideModelInfo: options.hideModelInfo,
+        },
+      },
+    },
+  }) as never;
+
+const renderWithWidth = (
+  width: number,
+  uiState: UIState,
+  settings: LoadedSettings = createDefaultSettings(),
+) => {
   useTerminalSizeMock.mockReturnValue({ columns: width, rows: 24 });
-  return render(<Footer {...props} />);
+  return render(
+    <ConfigContext.Provider value={createMockConfig() as never}>
+      <SettingsContext.Provider value={settings}>
+        <VimModeProvider settings={settings}>
+          <UIStateContext.Provider value={uiState}>
+            <Footer />
+          </UIStateContext.Provider>
+        </VimModeProvider>
+      </SettingsContext.Provider>
+    </ConfigContext.Provider>,
+  );
 };
 
 describe('<Footer />', () => {
   it('renders the component', () => {
-    const { lastFrame } = renderWithWidth(120);
+    const { lastFrame } = renderWithWidth(120, createMockUIState());
     expect(lastFrame()).toBeDefined();
   });
 
   describe('path display', () => {
     it('should display shortened path on a wide terminal', () => {
-      const { lastFrame } = renderWithWidth(120);
+      const { lastFrame } = renderWithWidth(120, createMockUIState());
       const tildePath = tildeifyPath(defaultProps.targetDir);
       const expectedPath = '...' + tildePath.slice(tildePath.length - 48 + 3);
       expect(lastFrame()).toContain(expectedPath);
     });
 
     it('should display only the base directory name on a narrow terminal', () => {
-      const { lastFrame } = renderWithWidth(79);
+      const { lastFrame } = renderWithWidth(79, createMockUIState());
       const expectedPath = path.basename(defaultProps.targetDir);
       expect(lastFrame()).toContain(expectedPath);
     });
 
     it('should use wide layout at 80 columns', () => {
-      const { lastFrame } = renderWithWidth(80);
+      const { lastFrame } = renderWithWidth(80, createMockUIState());
       const tildePath = tildeifyPath(defaultProps.targetDir);
       const expectedPath = '...' + tildePath.slice(tildePath.length - 32 + 3);
       expect(lastFrame()).toContain(expectedPath);
     });
 
     it('should use narrow layout at 79 columns', () => {
-      const { lastFrame } = renderWithWidth(79);
+      const { lastFrame } = renderWithWidth(79, createMockUIState());
       const expectedPath = path.basename(defaultProps.targetDir);
       expect(lastFrame()).toContain(expectedPath);
       const tildePath = tildeifyPath(defaultProps.targetDir);
@@ -86,39 +134,45 @@ describe('<Footer />', () => {
   });
 
   it('displays the branch name when provided', () => {
-    const { lastFrame } = renderWithWidth(120);
+    const { lastFrame } = renderWithWidth(120, createMockUIState());
     expect(lastFrame()).toContain(`(${defaultProps.branchName}*)`);
   });
 
   it('does not display the branch name when not provided', () => {
-    const { lastFrame } = renderWithWidth(120, {
-      ...defaultProps,
-      branchName: undefined,
-    });
+    const { lastFrame } = renderWithWidth(
+      120,
+      createMockUIState({
+        branchName: undefined,
+      }),
+    );
     expect(lastFrame()).not.toContain(`(${defaultProps.branchName}*)`);
   });
 
   it('displays the model name and context percentage', () => {
-    const { lastFrame } = renderWithWidth(120);
+    const { lastFrame } = renderWithWidth(120, createMockUIState());
     expect(lastFrame()).toContain(defaultProps.model);
     expect(lastFrame()).toMatch(/\(\d+% context[\s\S]*left\)/);
   });
 
   describe('sandbox and trust info', () => {
     it('should display untrusted when isTrustedFolder is false', () => {
-      const { lastFrame } = renderWithWidth(120, {
-        ...defaultProps,
-        isTrustedFolder: false,
-      });
+      const { lastFrame } = renderWithWidth(
+        120,
+        createMockUIState({
+          isTrustedFolder: false,
+        }),
+      );
       expect(lastFrame()).toContain('untrusted');
     });
 
     it('should display custom sandbox info when SANDBOX env is set', () => {
       vi.stubEnv('SANDBOX', 'gemini-cli-test-sandbox');
-      const { lastFrame } = renderWithWidth(120, {
-        ...defaultProps,
-        isTrustedFolder: undefined,
-      });
+      const { lastFrame } = renderWithWidth(
+        120,
+        createMockUIState({
+          isTrustedFolder: undefined,
+        }),
+      );
       expect(lastFrame()).toContain('test');
       vi.unstubAllEnvs();
     });
@@ -126,10 +180,12 @@ describe('<Footer />', () => {
     it('should display macOS Seatbelt info when SANDBOX is sandbox-exec', () => {
       vi.stubEnv('SANDBOX', 'sandbox-exec');
       vi.stubEnv('SEATBELT_PROFILE', 'test-profile');
-      const { lastFrame } = renderWithWidth(120, {
-        ...defaultProps,
-        isTrustedFolder: true,
-      });
+      const { lastFrame } = renderWithWidth(
+        120,
+        createMockUIState({
+          isTrustedFolder: true,
+        }),
+      );
       expect(lastFrame()).toMatch(/macOS Seatbelt.*\(test-profile\)/s);
       vi.unstubAllEnvs();
     });
@@ -137,20 +193,24 @@ describe('<Footer />', () => {
     it('should display "no sandbox" when SANDBOX is not set and folder is trusted', () => {
       // Clear any SANDBOX env var that might be set.
       vi.stubEnv('SANDBOX', '');
-      const { lastFrame } = renderWithWidth(120, {
-        ...defaultProps,
-        isTrustedFolder: true,
-      });
+      const { lastFrame } = renderWithWidth(
+        120,
+        createMockUIState({
+          isTrustedFolder: true,
+        }),
+      );
       expect(lastFrame()).toContain('no sandbox');
       vi.unstubAllEnvs();
     });
 
     it('should prioritize untrusted message over sandbox info', () => {
       vi.stubEnv('SANDBOX', 'gemini-cli-test-sandbox');
-      const { lastFrame } = renderWithWidth(120, {
-        ...defaultProps,
-        isTrustedFolder: false,
-      });
+      const { lastFrame } = renderWithWidth(
+        120,
+        createMockUIState({
+          isTrustedFolder: false,
+        }),
+      );
       expect(lastFrame()).toContain('untrusted');
       expect(lastFrame()).not.toMatch(/test-sandbox/s);
       vi.unstubAllEnvs();
@@ -159,52 +219,51 @@ describe('<Footer />', () => {
 
   describe('footer configuration filtering (golden snapshots)', () => {
     it('renders complete footer with all sections visible (baseline)', () => {
-      const { lastFrame } = renderWithWidth(120, {
-        ...defaultProps,
-        hideCWD: false,
-        hideSandboxStatus: false,
-        hideModelInfo: false,
-      });
+      const { lastFrame } = renderWithWidth(120, createMockUIState());
       expect(lastFrame()).toMatchSnapshot('complete-footer-wide');
     });
 
     it('renders footer with all optional sections hidden (minimal footer)', () => {
-      const { lastFrame } = renderWithWidth(120, {
-        ...defaultProps,
-        hideCWD: true,
-        hideSandboxStatus: true,
-        hideModelInfo: true,
-      });
+      const { lastFrame } = renderWithWidth(
+        120,
+        createMockUIState(),
+        createDefaultSettings({
+          hideCWD: true,
+          hideSandboxStatus: true,
+          hideModelInfo: true,
+        }),
+      );
       expect(lastFrame()).toMatchSnapshot('footer-minimal');
     });
 
     it('renders footer with only model info hidden (partial filtering)', () => {
-      const { lastFrame } = renderWithWidth(120, {
-        ...defaultProps,
-        hideCWD: false,
-        hideSandboxStatus: false,
-        hideModelInfo: true,
-      });
+      const { lastFrame } = renderWithWidth(
+        120,
+        createMockUIState(),
+        createDefaultSettings({
+          hideCWD: false,
+          hideSandboxStatus: false,
+          hideModelInfo: true,
+        }),
+      );
       expect(lastFrame()).toMatchSnapshot('footer-no-model');
     });
 
     it('renders footer with CWD and model info hidden to test alignment (only sandbox visible)', () => {
-      const { lastFrame } = renderWithWidth(120, {
-        ...defaultProps,
-        hideCWD: true,
-        hideSandboxStatus: false,
-        hideModelInfo: true,
-      });
+      const { lastFrame } = renderWithWidth(
+        120,
+        createMockUIState(),
+        createDefaultSettings({
+          hideCWD: true,
+          hideSandboxStatus: false,
+          hideModelInfo: true,
+        }),
+      );
       expect(lastFrame()).toMatchSnapshot('footer-only-sandbox');
     });
 
     it('renders complete footer in narrow terminal (baseline narrow)', () => {
-      const { lastFrame } = renderWithWidth(79, {
-        ...defaultProps,
-        hideCWD: false,
-        hideSandboxStatus: false,
-        hideModelInfo: false,
-      });
+      const { lastFrame } = renderWithWidth(79, createMockUIState());
       expect(lastFrame()).toMatchSnapshot('complete-footer-narrow');
     });
   });

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

@@ -19,43 +19,50 @@ import { DebugProfiler } from './DebugProfiler.js';
 import { useTerminalSize } from '../hooks/useTerminalSize.js';
 import { isNarrowWidth } from '../utils/isNarrowWidth.js';
 
-export interface FooterProps {
-  model: string;
-  targetDir: string;
-  branchName?: string;
-  debugMode: boolean;
-  debugMessage: string;
-  corgiMode: boolean;
-  errorCount: number;
-  showErrorDetails: boolean;
-  showMemoryUsage?: boolean;
-  promptTokenCount: number;
-  nightly: boolean;
-  vimMode?: string;
-  isTrustedFolder?: boolean;
-  hideCWD?: boolean;
-  hideSandboxStatus?: boolean;
-  hideModelInfo?: boolean;
-}
+import { useUIState } from '../contexts/UIStateContext.js';
+import { useConfig } from '../contexts/ConfigContext.js';
+import { useSettings } from '../contexts/SettingsContext.js';
+import { useVimMode } from '../contexts/VimModeContext.js';
+
+export const Footer: React.FC = () => {
+  const uiState = useUIState();
+  const config = useConfig();
+  const settings = useSettings();
+  const { vimEnabled, vimMode } = useVimMode();
+
+  const {
+    model,
+    targetDir,
+    debugMode,
+    branchName,
+    debugMessage,
+    corgiMode,
+    errorCount,
+    showErrorDetails,
+    promptTokenCount,
+    nightly,
+    isTrustedFolder,
+  } = {
+    model: config.getModel(),
+    targetDir: config.getTargetDir(),
+    debugMode: config.getDebugMode(),
+    branchName: uiState.branchName,
+    debugMessage: uiState.debugMessage,
+    corgiMode: uiState.corgiMode,
+    errorCount: uiState.errorCount,
+    showErrorDetails: uiState.showErrorDetails,
+    promptTokenCount: uiState.sessionStats.lastPromptTokenCount,
+    nightly: uiState.nightly,
+    isTrustedFolder: uiState.isTrustedFolder,
+  };
+
+  const showMemoryUsage =
+    config.getDebugMode() || settings.merged.ui?.showMemoryUsage || false;
+  const hideCWD = settings.merged.ui?.footer?.hideCWD || false;
+  const hideSandboxStatus =
+    settings.merged.ui?.footer?.hideSandboxStatus || false;
+  const hideModelInfo = settings.merged.ui?.footer?.hideModelInfo || false;
 
-export const Footer: React.FC<FooterProps> = ({
-  model,
-  targetDir,
-  branchName,
-  debugMode,
-  debugMessage,
-  corgiMode,
-  errorCount,
-  showErrorDetails,
-  showMemoryUsage,
-  promptTokenCount,
-  nightly,
-  vimMode,
-  isTrustedFolder,
-  hideCWD = false,
-  hideSandboxStatus = false,
-  hideModelInfo = false,
-}) => {
   const { columns: terminalWidth } = useTerminalSize();
 
   const isNarrow = isNarrowWidth(terminalWidth);
@@ -67,6 +74,7 @@ export const Footer: React.FC<FooterProps> = ({
     : shortenPath(tildeifyPath(targetDir), pathLength);
 
   const justifyContent = hideCWD && hideModelInfo ? 'center' : 'space-between';
+  const displayVimMode = vimEnabled ? vimMode : undefined;
 
   return (
     <Box
@@ -75,10 +83,12 @@ export const Footer: React.FC<FooterProps> = ({
       flexDirection={isNarrow ? 'column' : 'row'}
       alignItems={isNarrow ? 'flex-start' : 'center'}
     >
-      {(debugMode || vimMode || !hideCWD) && (
+      {(debugMode || displayVimMode || !hideCWD) && (
         <Box>
           {debugMode && <DebugProfiler />}
-          {vimMode && <Text color={theme.text.secondary}>[{vimMode}] </Text>}
+          {displayVimMode && (
+            <Text color={theme.text.secondary}>[{displayVimMode}] </Text>
+          )}
           {!hideCWD &&
             (nightly ? (
               <Gradient colors={theme.ui.gradient}>

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

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { Box } from 'ink';
+import { Notifications } from '../components/Notifications.js';
+import { MainContent } from '../components/MainContent.js';
+import { DialogManager } from '../components/DialogManager.js';
+import { Composer } from '../components/Composer.js';
+import { ExitWarning } from '../components/ExitWarning.js';
+import { useUIState } from '../contexts/UIStateContext.js';
+
+export const DefaultAppLayout: React.FC = () => {
+  const uiState = useUIState();
+
+  return (
+    <Box flexDirection="column" width="90%">
+      <MainContent />
+
+      <Box flexDirection="column" ref={uiState.mainControlsRef}>
+        <Notifications />
+
+        {uiState.dialogsVisible ? (
+          <DialogManager addItem={uiState.historyManager.addItem} />
+        ) : (
+          <Composer />
+        )}
+
+        <ExitWarning />
+      </Box>
+    </Box>
+  );
+};

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

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { Box } from 'ink';
+import { Notifications } from '../components/Notifications.js';
+import { MainContent } from '../components/MainContent.js';
+import { DialogManager } from '../components/DialogManager.js';
+import { Composer } from '../components/Composer.js';
+import { Footer } from '../components/Footer.js';
+import { ExitWarning } from '../components/ExitWarning.js';
+import { useUIState } from '../contexts/UIStateContext.js';
+
+export const ScreenReaderAppLayout: React.FC = () => {
+  const uiState = useUIState();
+
+  return (
+    <Box flexDirection="column" width="90%" height="100%">
+      <Notifications />
+      <Footer />
+      <Box flexGrow={1} overflow="hidden">
+        <MainContent />
+      </Box>
+      {uiState.dialogsVisible ? (
+        <DialogManager addItem={uiState.historyManager.addItem} />
+      ) : (
+        <Composer />
+      )}
+
+      <ExitWarning />
+    </Box>
+  );
+};