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

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

@@ -5,16 +5,19 @@
  */
 
 import { Box, Static } from 'ink';
-import { HistoryItemDisplay } from './HistoryItemDisplay.js';
+import { HistoryList } from './HistoryList.js';
+import { PendingHistoryList } from './PendingHistoryList.js';
 import { ShowMoreLines } from './ShowMoreLines.js';
 import { OverflowProvider } from '../contexts/OverflowContext.js';
 import { useUIState } from '../contexts/UIStateContext.js';
 import { useAppContext } from '../contexts/AppContext.js';
 import { AppHeader } from './AppHeader.js';
+import { useLayoutConfig } from '../hooks/useLayoutConfig.js';
 
 export const MainContent = () => {
   const { version } = useAppContext();
   const uiState = useUIState();
+  const layout = useLayoutConfig();
   const {
     pendingHistoryItems,
     mainAreaWidth,
@@ -22,42 +25,60 @@ export const MainContent = () => {
     availableTerminalHeight,
   } = uiState;
 
+  // In screen reader mode, use regular layout without Static component
+  if (!layout.shouldUseStatic) {
+    return (
+      <OverflowProvider>
+        <Box flexDirection="column">
+          <AppHeader version={version} />
+          <HistoryList
+            history={uiState.history}
+            terminalWidth={mainAreaWidth}
+            staticAreaMaxItemHeight={staticAreaMaxItemHeight}
+            slashCommands={uiState.slashCommands}
+          />
+          <PendingHistoryList
+            pendingHistoryItems={pendingHistoryItems}
+            terminalWidth={mainAreaWidth}
+            availableTerminalHeight={availableTerminalHeight}
+            constrainHeight={uiState.constrainHeight}
+            isEditorDialogOpen={uiState.isEditorDialogOpen}
+          />
+          <ShowMoreLines constrainHeight={uiState.constrainHeight} />
+        </Box>
+      </OverflowProvider>
+    );
+  }
+
+  // Default mode with Static component
   return (
     <>
       <Static
         key={uiState.historyRemountKey}
         items={[
           <AppHeader key="app-header" version={version} />,
-          ...uiState.history.map((h) => (
-            <HistoryItemDisplay
-              terminalWidth={mainAreaWidth}
-              availableTerminalHeight={staticAreaMaxItemHeight}
-              key={h.id}
-              item={h}
-              isPending={false}
-              commands={uiState.slashCommands}
-            />
-          )),
+          <HistoryList
+            key="history-list"
+            history={uiState.history}
+            terminalWidth={mainAreaWidth}
+            staticAreaMaxItemHeight={staticAreaMaxItemHeight}
+            slashCommands={uiState.slashCommands}
+          />,
         ]}
       >
         {(item) => item}
       </Static>
       <OverflowProvider>
         <Box flexDirection="column">
-          {pendingHistoryItems.map((item, i) => (
-            <HistoryItemDisplay
-              key={i}
-              availableTerminalHeight={
-                uiState.constrainHeight ? availableTerminalHeight : undefined
-              }
-              terminalWidth={mainAreaWidth}
-              item={{ ...item, id: 0 }}
-              isPending={true}
-              isFocused={!uiState.isEditorDialogOpen}
-              activeShellPtyId={uiState.activePtyId}
-              embeddedShellFocused={uiState.embeddedShellFocused}
-            />
-          ))}
+          <PendingHistoryList
+            pendingHistoryItems={pendingHistoryItems}
+            terminalWidth={mainAreaWidth}
+            availableTerminalHeight={availableTerminalHeight}
+            constrainHeight={uiState.constrainHeight}
+            isEditorDialogOpen={uiState.isEditorDialogOpen}
+            activePtyId={uiState.activePtyId?.toString()}
+            embeddedShellFocused={uiState.embeddedShellFocused}
+          />
           <ShowMoreLines constrainHeight={uiState.constrainHeight} />
         </Box>
       </OverflowProvider>