refactor(cli,core): foundational layout, identity management, and type safety (#23286)

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

@@ -127,7 +127,7 @@ export const MainContent = () => {
 
   const pendingItems = useMemo(
     () => (
-      <Box flexDirection="column">
+      <Box flexDirection="column" key="pending-items-group">
         {pendingHistoryItems.map((item, i) => {
           const prevType =
             i === 0
@@ -140,12 +140,12 @@ export const MainContent = () => {
 
           return (
             <HistoryItemDisplay
-              key={i}
+              key={`pending-${i}`}
               availableTerminalHeight={
                 uiState.constrainHeight ? availableTerminalHeight : undefined
               }
               terminalWidth={mainAreaWidth}
-              item={{ ...item, id: 0 }}
+              item={{ ...item, id: -(i + 1) }}
               isPending={true}
               isExpandable={true}
               isFirstThinking={isFirstThinking}
@@ -154,7 +154,10 @@ export const MainContent = () => {
           );
         })}
         {showConfirmationQueue && confirmingTool && (
-          <ToolConfirmationQueue confirmingTool={confirmingTool} />
+          <ToolConfirmationQueue
+            key="confirmation-queue"
+            confirmingTool={confirmingTool}
+          />
         )}
       </Box>
     ),