From 160e0123f502501bc40d124f62f085e1da3538f1 Mon Sep 17 00:00:00 2001
From: Kainoa Kanter <kainoa@t1c.dev>
Date: Thu, 29 Jan 2026 16:51:21 -0800
Subject: [PATCH] fix: bun string encoding (#746)

---
 src/auth/setup-ui.tsx               |  7 ++++++-
 src/cli/components/AnimatedLogo.tsx | 13 ++++++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

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) {
         </Text>
       </Box>
       <Text> </Text>
-      <Text dimColor>Use ↑/↓ to navigate, Enter to select</Text>
+      <Text dimColor>
+        Use {upArrow}/{downArrow} to navigate, Enter to select
+      </Text>
     </Box>
   );
 }
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;