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;