feat(ui): implement refreshed UX for Composer layout (#21212)

Co-authored-by: Keith Guerin <keithguerin@gmail.com>

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

@@ -8,8 +8,6 @@ import type React from 'react';
 import { Box, Text } from 'ink';
 import { theme } from '../semantic-colors.js';
 import { type IdeContext, type MCPServerConfig } from '@google/gemini-cli-core';
-import { useTerminalSize } from '../hooks/useTerminalSize.js';
-import { isNarrowWidth } from '../utils/isNarrowWidth.js';
 
 interface ContextSummaryDisplayProps {
   geminiMdFileCount: number;
@@ -30,8 +28,6 @@ export const ContextSummaryDisplay: React.FC<ContextSummaryDisplayProps> = ({
   skillCount,
   backgroundProcessCount = 0,
 }) => {
-  const { columns: terminalWidth } = useTerminalSize();
-  const isNarrow = isNarrowWidth(terminalWidth);
   const mcpServerCount = Object.keys(mcpServers || {}).length;
   const blockedMcpServerCount = blockedMcpServers?.length || 0;
   const openFileCount = ideContext?.workspaceState?.openFiles?.length ?? 0;
@@ -44,7 +40,7 @@ export const ContextSummaryDisplay: React.FC<ContextSummaryDisplayProps> = ({
     skillCount === 0 &&
     backgroundProcessCount === 0
   ) {
-    return <Text> </Text>; // Render an empty space to reserve height
+    return null;
   }
 
   const openFilesText = (() => {
@@ -113,21 +109,14 @@ export const ContextSummaryDisplay: React.FC<ContextSummaryDisplayProps> = ({
     backgroundText,
   ].filter(Boolean);
 
-  if (isNarrow) {
-    return (
-      <Box flexDirection="column" paddingX={1}>
-        {summaryParts.map((part, index) => (
-          <Text key={index} color={theme.text.secondary}>
-            - {part}
-          </Text>
-        ))}
-      </Box>
-    );
-  }
-
   return (
-    <Box paddingX={1}>
-      <Text color={theme.text.secondary}>{summaryParts.join(' | ')}</Text>
+    <Box paddingX={1} flexDirection="row" flexWrap="wrap">
+      {summaryParts.map((part, index) => (
+        <Box key={index} flexDirection="row">
+          {index > 0 && <Text color={theme.text.secondary}>{' · '}</Text>}
+          <Text color={theme.text.secondary}>{part}</Text>
+        </Box>
+      ))}
     </Box>
   );
 };