Merge pull request #7344 from continuedev/nate-4

fix: CLI UI Improvements

Author: sestinj

core/package-lock.json

@@ -15,11 +15,11 @@
     "test:e2e": "vitest run --config vitest.e2e.config.ts",
     "test:smoke": "node smoke-test.mjs",
     "build:tsc": "tsc -p tsconfig.build.json",
-    "build:local-deps": "cd ../../packages/config-types && npm run build && cd ../config-yaml && npm run build && cd ../openai-adapters && npm run build",
+    "build:local-deps": "cd ../../packages/config-types && npm i && npm run build && cd ../fetch && npm i && npm run build && cd ../llm-info && npm i && npm run build && cd ../config-yaml && npm i && npm run build && cd ../openai-adapters && npm i && npm run build && cd ../../core && npm i && cd ../extensions/cli && npm i",
     "build:validate": "node validate-aliases.mjs",
     "build:bundle": "node build.mjs",
-    "build": "npm run build:local-deps && npm run build:validate && npm run build:bundle",
-    "start": "node dist/index.js",
+    "build": "npm run build:validate && npm run build:bundle",
+    "start": "node dist/cn.js",
     "dev": "tsx src/index.ts",
     "repomix:sdk": "npx repomix node_modules/@continuedev/sdk --ignore **/api,cli-repomix.xml -o sdk-repomix.xml",
     "repomix:cli": "npx repomix --ignore sdk-repomix.xml -o cli-repomix.xml",

extensions/cli/package.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,10 @@ 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 +90,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>