From a9ee18d8a06b5ccc42d8e2f7d5b627bf971dc0e4 Mon Sep 17 00:00:00 2001
From: Automaker <automaker@localhost>
Date: Tue, 14 Apr 2026 18:36:12 -0700
Subject: [PATCH] fix(ui): apply ASCII logo gradient by X column, not string
 index

ink-gradient maps colors by character index across the whole string, so
the p descender (last two lines) always got the tail/pink color regardless
of its leftward visual position.

Fix: render each logo line separately with its own <Gradient>, padded to
logoWidth so column X maps to the same gradient fraction on every line.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 packages/cli/src/ui/components/Header.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/cli/src/ui/components/Header.tsx b/packages/cli/src/ui/components/Header.tsx
index 9648a2126d..f0817c7880 100644
--- a/packages/cli/src/ui/components/Header.tsx
+++ b/packages/cli/src/ui/components/Header.tsx
@@ -114,10 +114,15 @@ export const Header: React.FC<HeaderProps> = ({
       {/* Left side: ASCII logo (only if enough space) */}
       {showLogo && (
         <>
-          <Box flexShrink={0}>
-            <Gradient colors={gradientColors}>
-              <Text>{displayLogo}</Text>
-            </Gradient>
+          <Box flexShrink={0} flexDirection="column">
+            {displayLogo
+              .split('\n')
+              .slice(1) // trim leading empty line from template literal
+              .map((line, i) => (
+                <Gradient key={i} colors={gradientColors}>
+                  <Text>{line.padEnd(logoWidth)}</Text>
+                </Gradient>
+              ))}
           </Box>
           {/* Fixed gap between logo and info panel */}
           <Box width={logoGap} />