From 13e3d69a26355cbaf5d1cb2d2fbb0630c6e45f6d Mon Sep 17 00:00:00 2001
From: cte <cestreich@gmail.com>
Date: Thu, 8 Jan 2026 03:10:49 -0800
Subject: [PATCH] style(cli): simplify ModeTool layout to horizontal with mode
 suffix

---
 apps/cli/src/ui/components/tools/ModeTool.tsx | 24 +++++++++----------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/apps/cli/src/ui/components/tools/ModeTool.tsx b/apps/cli/src/ui/components/tools/ModeTool.tsx
index b1a3829aea..8a7771a7ab 100644
--- a/apps/cli/src/ui/components/tools/ModeTool.tsx
+++ b/apps/cli/src/ui/components/tools/ModeTool.tsx
@@ -12,19 +12,17 @@ export function ModeTool({ toolData }: ToolRendererProps) {
 	const isSwitch = toolData.tool.includes("switch") || toolData.tool.includes("Switch")
 
 	return (
-		<Box flexDirection="column" paddingX={1}>
-			{/* Header */}
-			<Box>
-				<Icon name={iconName} color={theme.toolHeader} />
-				{isSwitch && mode && (
-					<Box>
-						<Text color={theme.dimText}>Switching to</Text>
-						<Text color={theme.userHeader} bold>
-							{mode}
-						</Text>
-					</Box>
-				)}
-			</Box>
+		<Box flexDirection="row" gap={1} paddingX={1} marginBottom={1}>
+			<Icon name={iconName} color={theme.toolHeader} />
+			{isSwitch && mode && (
+				<Box gap={1}>
+					<Text color={theme.dimText}>Switching to</Text>
+					<Text color={theme.userHeader} bold>
+						{mode}
+					</Text>
+					<Text color={theme.dimText}>mode</Text>
+				</Box>
+			)}
 		</Box>
 	)
 }