fix: UI improvements

Author: sestinj

extensions/cli/package-lock.json

@@ -27,26 +27,27 @@ describe("asciiArt", () => {
       expect(result).toBe(CONTINUE_ASCII_ART);
     });
 
-    it("should return simple text version when terminal is too narrow", () => {
+    it("should return CN ASCII art version when terminal is too narrow", () => {
       // Set process.stdout.columns to simulate narrow terminal
       process.stdout.columns = 60;
 
       const result = getDisplayableAsciiArt();
 
-      expect(result).toContain("CONTINUE");
-      // expect(result).toContain("v0.0.0-dev");
+      expect(result).toContain("██████╗");
+      expect(result).toContain("(alpha)");
       expect(result).not.toBe(CONTINUE_ASCII_ART);
       // Should be much shorter than the full ASCII art
       expect(result.length).toBeLessThan(CONTINUE_ASCII_ART.length / 2);
     });
 
-    it("should return simple text version when terminal is below threshold", () => {
+    it("should return CN ASCII art version when terminal is below threshold", () => {
       // Test the edge case at exactly 74 columns (below our threshold of 75)
       process.stdout.columns = 74;
 
       const result = getDisplayableAsciiArt();
 
-      expect(result).toContain("CONTINUE");
+      expect(result).toContain("██████╗");
+      expect(result).toContain("(alpha)");
       expect(result).not.toBe(CONTINUE_ASCII_ART);
     });
 

extensions/cli/src/asciiArt.test.ts

@@ -12,7 +12,17 @@ ${mind.multiline(`  ██████╗ ██████╗ ███╗   
  ██║     ██║   ██║██║╚██╗██║   ██║   ██║██║╚██╗██║██║   ██║██╔══╝
  ╚██████╗╚██████╔╝██║ ╚████║   ██║   ██║██║ ╚████║╚██████╔╝███████╗
   ╚═════╝ ╚═════╝ ╚═╝  ╚═══╝   ╚═╝   ╚═╝╚═╝  ╚═══╝ ╚═════╝ ╚══════╝`)}
-                                                         ${d("v" + getVersion())}`;
+                                                    ${d("v" + getVersion() + " (alpha)")}`;
+
+// ASCII art for just "CN" (first two letters)
+const CN_ASCII_ART = `
+${mind.multiline(`  ██████╗███╗   ██╗
+ ██╔════╝████╗  ██║
+ ██║     ██╔██╗ ██║
+ ██║     ██║╚██╗██║
+ ╚██████╗██║ ╚████║
+  ╚═════╝╚═╝  ╚═══╝`)}
+  ${d("v" + getVersion() + " (alpha)")}`;
 
 // Minimum terminal width required to display ASCII art properly
 const MIN_WIDTH_FOR_ASCII_ART = 75;
@@ -28,8 +38,8 @@ export function getDisplayableAsciiArt(): string {
     return CONTINUE_ASCII_ART;
   }
 
-  // If terminal is too narrow, just show a simple version
-  return `\n${chalk.bold.blue("CONTINUE")} ${d("v" + getVersion())}\n`;
+  // If terminal is too narrow, show just "CN" ASCII art
+  return CN_ASCII_ART;
 }
 
 export const CONTINUE_LOGO_ASCII_ART = `

extensions/cli/src/asciiArt.ts

@@ -20,7 +20,8 @@ export const MemoizedMessage = memo<MemoizedMessageProps>(
         case "tool-start":
           return (
             <Box key={index} marginLeft={1} marginBottom={1}>
-              <Text color="white">○ {message.content}</Text>
+              {/* TODO: Change back to empty circle (○) with white color once we want to differentiate in-progress vs completed tool calls */}
+              <Text color="green">●<Text color="white"> {message.content}</Text></Text>
             </Box>
           );
 
@@ -87,7 +88,7 @@ export const MemoizedMessage = memo<MemoizedMessageProps>(
 
     return (
       <Box key={index} marginLeft={1} marginBottom={1}>
-        <Text color={isUser ? "green" : "magenta"}>●</Text>
+        <Text color={isUser ? "green" : "white"}>●</Text>
         <Text> </Text>
         {isUser ? (
           <Text color="gray">{message.content}</Text>