feat: Redesign CLI welcome screen and improve visual consistency

packages/cli/src/ui/components/views/ToolsList.test.tsx

@@ -33,11 +33,7 @@ const mockTools: ToolDefinition[] = [
 describe('<ToolsList />', () => {
   it('renders correctly with descriptions', () => {
     const { lastFrame } = render(
-      <ToolsList
-        tools={mockTools}
-        showDescriptions={true}
-        terminalWidth={40}
-      />,
+      <ToolsList tools={mockTools} showDescriptions={true} contentWidth={40} />,
     );
     expect(lastFrame()).toMatchSnapshot();
   });
@@ -47,7 +43,7 @@ describe('<ToolsList />', () => {
       <ToolsList
         tools={mockTools}
         showDescriptions={false}
-        terminalWidth={40}
+        contentWidth={40}
       />,
     );
     expect(lastFrame()).toMatchSnapshot();
@@ -55,7 +51,7 @@ describe('<ToolsList />', () => {
 
   it('renders correctly with no tools', () => {
     const { lastFrame } = render(
-      <ToolsList tools={[]} showDescriptions={true} terminalWidth={40} />,
+      <ToolsList tools={[]} showDescriptions={true} contentWidth={40} />,
     );
     expect(lastFrame()).toMatchSnapshot();
   });

packages/cli/src/ui/components/views/ToolsList.tsx

@@ -14,15 +14,15 @@ import { t } from '../../../i18n/index.js';
 interface ToolsListProps {
   tools: readonly ToolDefinition[];
   showDescriptions: boolean;
-  terminalWidth: number;
+  contentWidth: number;
 }
 
 export const ToolsList: React.FC<ToolsListProps> = ({
   tools,
   showDescriptions,
-  terminalWidth,
+  contentWidth,
 }) => (
-  <Box flexDirection="column" marginBottom={1}>
+  <Box flexDirection="column">
     <Text bold color={theme.text.primary}>
       {t('Available Qwen Code CLI tools:')}
     </Text>
@@ -38,7 +38,7 @@ export const ToolsList: React.FC<ToolsListProps> = ({
             </Text>
             {showDescriptions && tool.description && (
               <MarkdownDisplay
-                terminalWidth={terminalWidth}
+                contentWidth={contentWidth}
                 text={tool.description}
                 isPending={false}
               />

packages/cli/src/ui/components/views/__snapshots__/ToolsList.test.tsx.snap

@@ -11,15 +11,13 @@ exports[`<ToolsList /> > renders correctly with descriptions 1`] = `
        2. note use this tool wisely and be sure to consider how this tool interacts with word wrap.
        3. important this tool is awesome.
   - Test Tool Three (test-tool-three)
-    This is the third test tool.
-"
+    This is the third test tool."
 `;
 
 exports[`<ToolsList /> > renders correctly with no tools 1`] = `
 "Available Qwen Code CLI tools:
 
- No tools available
-"
+ No tools available"
 `;
 
 exports[`<ToolsList /> > renders correctly without descriptions 1`] = `
@@ -27,6 +25,5 @@ exports[`<ToolsList /> > renders correctly without descriptions 1`] = `
 
   - Test Tool One
   - Test Tool Two
-  - Test Tool Three
-"
+  - Test Tool Three"
 `;