feat(cli): optimize login modal sheen animation and layout

- Fixed disappearing logo bug by running animation once then stopping
- Optimized animation to advance by 2 positions per frame (50% fewer renders)
- Added all box-drawing shadow characters to sheen effect
- Moved shadow character set to module-level constant for efficiency
- Improved useEffect cleanup with calculated animation duration
- Made logo more compact to fit 80-width terminals
- Widened modal box from 90% to 95% of terminal width
- Sheen now creates permanent fill effect on shadow characters

Author: brandonkachen

cli/src/components/login-modal-utils.ts

@@ -60,35 +60,34 @@ export function generateFingerprintId(): string {
 
 /**
  * Determines the color for a character based on its position relative to the sheen
- * Creates a "fill" effect where characters behind the sheen are filled in
+ * Creates a "fill" effect where shadow characters permanently change to solid green as sheen passes
  */
 export function getSheenColor(
   char: string,
   charIndex: number,
   sheenPosition: number,
   logoColor: string,
+  shadowChars: Set<string>,
 ): string {
-  // Shadow characters that should have the sheen effect
-  const shadowChars = ['╚', '═', '╝']
-
-  if (!shadowChars.includes(char)) {
+  // Only apply sheen to shadow/border characters
+  if (!shadowChars.has(char)) {
     return logoColor
   }
 
   const sheenWidth = 5
   const distance = charIndex - sheenPosition
 
-  // Characters behind the sheen (already filled)
-  if (distance < -sheenWidth) {
-    return '#00cc00' // Filled green
+  // Characters at the sheen (bright, solid green - the active sheen)
+  if (distance >= -sheenWidth && distance <= 0) {
+    return '#00ff00' // Bright solid green at the sheen
   }
 
-  // Characters at the leading edge (bright sheen)
-  if (distance >= -sheenWidth && distance <= 0) {
-    return '#00ff00' // Bright green at the sheen edge
+  // Characters behind the sheen stay solid green (permanent fill effect)
+  if (distance < -sheenWidth) {
+    return '#00cc00' // Solid green - stays filled permanently
   }
 
-  // Characters ahead of the sheen (not yet filled)
+  // Characters ahead of the sheen remain original color (unfilled shadow)
   return logoColor
 }
 

cli/src/components/login-modal.tsx

@@ -46,6 +46,8 @@ const COPY_SUCCESS_COLOR = '#22c55e'
 const COPY_ERROR_COLOR = '#ef4444'
 const WARNING_COLOR = '#ef4444'
 
+const SHEEN_SHADOW_CHARS = new Set(['╔', '╗', '╚', '╝', '═', '║'])
+
 export const LoginModal = ({
   onLoginSuccess,
   theme,
@@ -355,7 +357,7 @@ export const LoginModal = ({
         return <span key={charIndex}>{char}</span>
       }
 
-      const color = getSheenColor(char, charIndex, sheenPosition, logoColor)
+      const color = getSheenColor(char, charIndex, sheenPosition, logoColor, SHEEN_SHADOW_CHARS)
 
       return (
         <span key={charIndex} fg={color}>