chore: misc UI improvements (#317)

Co-authored-by: Letta <noreply@letta.com>

src/cli/components/InputRich.tsx

@@ -395,14 +395,16 @@ export function Input({
 
     const id = setInterval(() => {
       setShimmerOffset((prev) => {
-        const len = thinkingMessage.length;
+        // Include agent name length (+1 for space) in shimmer cycle
+        const prefixLen = agentName ? agentName.length + 1 : 0;
+        const len = prefixLen + thinkingMessage.length;
         const next = prev + 1;
         return next > len + 3 ? -3 : next;
       });
     }, 120); // Speed of shimmer animation
 
     return () => clearInterval(id);
-  }, [streaming, thinkingMessage, visible]);
+  }, [streaming, thinkingMessage, visible, agentName]);
 
   const handleSubmit = async () => {
     // Don't submit if autocomplete is active with matches
@@ -527,6 +529,7 @@ export function Input({
           </Box>
           <Box flexGrow={1}>
             <ShimmerText
+              boldPrefix={agentName || undefined}
               message={thinkingMessage}
               shimmerOffset={shimmerOffset}
             />

src/cli/components/ShimmerText.tsx

@@ -5,16 +5,19 @@ import { colors } from "./colors.js";
 
 interface ShimmerTextProps {
   color?: string;
+  boldPrefix?: string;
   message: string;
   shimmerOffset: number;
 }
 
 export const ShimmerText: React.FC<ShimmerTextProps> = ({
   color = colors.status.processing,
+  boldPrefix,
   message,
   shimmerOffset,
 }) => {
-  const fullText = `${message}…`;
+  const fullText = `${boldPrefix ? `${boldPrefix} ` : ""}${message}…`;
+  const prefixLength = boldPrefix ? boldPrefix.length + 1 : 0; // +1 for space
 
   // Create the shimmer effect - simple 3-char highlight
   const shimmerText = fullText
@@ -22,11 +25,14 @@ export const ShimmerText: React.FC<ShimmerTextProps> = ({
     .map((char, i) => {
       // Check if this character is within the 3-char shimmer window
       const isInShimmer = i >= shimmerOffset && i < shimmerOffset + 3;
+      const isInPrefix = i < prefixLength;
 
       if (isInShimmer) {
-        return chalk.hex(colors.status.processingShimmer)(char);
+        const styledChar = chalk.hex(colors.status.processingShimmer)(char);
+        return isInPrefix ? chalk.bold(styledChar) : styledChar;
       }
-      return chalk.hex(color)(char);
+      const styledChar = chalk.hex(color)(char);
+      return isInPrefix ? chalk.bold(styledChar) : styledChar;
     })
     .join("");
 

src/cli/components/colors.ts

@@ -99,7 +99,7 @@ export const colors = {
     streaming: brandColors.textDisabled, // solid gray dot (streaming/in progress)
     running: brandColors.statusWarning, // blinking yellow dot (executing)
     error: brandColors.statusError, // solid red dot (failed)
-    memoryName: brandColors.orange, // memory tool name highlight
+    memoryName: brandColors.primaryAccent, // memory tool name highlight (matches thinking spinner)
   },
 
   // Input box