feat(accessibility): implement centralized screen reader layout system (#8155)

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 { useUIState } from './contexts/UIStateContext.js';
+import { StreamingContext } from './contexts/StreamingContext.js';
 import { QuittingDisplay } from './components/QuittingDisplay.js';
-import { theme } from './semantic-colors.js';
+import { useLayoutConfig } from './hooks/useLayoutConfig.js';
+import { ScreenReaderAppLayout } from './layouts/ScreenReaderAppLayout.js';
+import { DefaultAppLayout } from './layouts/DefaultAppLayout.js';
 
 export const App = () => {
   const uiState = useUIState();
+  const layout = useLayoutConfig();
 
   if (uiState.quittingMessages) {
     return <QuittingDisplay />;
@@ -23,35 +21,11 @@ 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>
+      {layout.mode === 'screenReader' ? (
+        <ScreenReaderAppLayout />
+      ) : (
+        <DefaultAppLayout />
+      )}
     </StreamingContext.Provider>
   );
 };