diff --git a/src/auth/setup-ui.tsx b/src/auth/setup-ui.tsx index bebcf09..15555e9 100644 --- a/src/auth/setup-ui.tsx +++ b/src/auth/setup-ui.tsx @@ -10,6 +10,9 @@ import { colors } from "../cli/components/colors"; import { settingsManager } from "../settings-manager"; import { pollForToken, requestDeviceCode } from "./oauth"; +const upArrow = String.fromCharCode(0x2191); +const downArrow = String.fromCharCode(0x2193); + type SetupMode = "menu" | "device-code" | "auth-code" | "self-host" | "done"; interface SetupUIProps { @@ -186,7 +189,9 @@ export function SetupUI({ onComplete }: SetupUIProps) { - Use ↑/↓ to navigate, Enter to select + + Use {upArrow}/{downArrow} to navigate, Enter to select + ); } diff --git a/src/cli/components/AnimatedLogo.tsx b/src/cli/components/AnimatedLogo.tsx index f33370a..6e423ab 100644 --- a/src/cli/components/AnimatedLogo.tsx +++ b/src/cli/components/AnimatedLogo.tsx @@ -2,6 +2,17 @@ import { Text } from "ink"; import { useEffect, useState } from "react"; import { colors } from "./colors"; +function fixBunEncoding(text: string): string { + if (typeof Bun === "undefined") return text; + + // Replace literal characters with Unicode codepoints + return text + .replace(/█/g, String.fromCharCode(0x2588)) // Full block + .replace(/▓/g, String.fromCharCode(0x2593)) // Dark shade + .replace(/▒/g, String.fromCharCode(0x2592)) // Medium shade + .replace(/░/g, String.fromCharCode(0x2591)); // Light shade +} + // Define animation frames - 3D rotation effect with gradient (█ → ▓ → ▒ → ░) // Each frame is ~10 chars wide, 5 lines tall - matches login dialog asciiLogo size const logoFrames = [ @@ -89,7 +100,7 @@ const logoFrames = [ █▓ █▓ █▓ █▓ █▓ █████▓ `, -]; +].map(fixBunEncoding); interface AnimatedLogoProps { color?: string;