feat(ui): improve agent character display and typing animation

- Update agent persona from "friendly" to "swagger" with new expressions and phrases
- Lock phrase display when activity changes to prevent random reselection
- Enhance typing text component with loading dots and proper erase/retry behavior

Author: moazbuilds

config/agent-characters.json

@@ -1,23 +1,67 @@
 {
   "personas": {
-    "friendly": {
-      "baseFace": "(˶ᵔ ᵕ ᵔ˶)",
+    "swagger": {
+      "baseFace": "(⌐■_■)",
       "expressions": {
         "thinking": "(╭ರ_•́)",
-        "tool": "(•̀ᴗ•́)و",
+        "tool": "<(•_•<)",
         "error": "(╥﹏╥)",
-        "idle": "(˶ᵔ ᵕ ᵔ˶)"
+        "idle": "(⌐■_■)"
       },
       "phrases": {
-        "thinking": ["Hmm, let me think...", "Processing..."],
-        "tool": ["On it!", "Working..."],
-        "error": ["Oops, something went wrong", "Let me try again"],
-        "idle": ["Ready when you are", "Waiting..."]
+        "thinking": [
+          "Aight lemme figure this out real quick",
+          "Brain.exe is running, one sec",
+          "Ooh okay I see what you need",
+          "Processing... not in a robot way tho",
+          "Gimme a moment, I'm onto something",
+          "Hmm interesting, let me think on that",
+          "This is giving me ideas hold up",
+          "Working on it, trust the process",
+          "My last two brain cells are on it",
+          "Cooking up something good rn"
+        ],
+        "tool": [
+          "Okay okay I got what I needed from you",
+          "Perfect, that's exactly what I was looking for",
+          "Bet, now I can actually do something with this",
+          "You delivered, now watch me work",
+          "That's the info I needed, let's go",
+          "W response, I can work with this",
+          "Ayyy thanks for that, proceeding now",
+          "Got it got it, running with it",
+          "This is what I'm talking about, moving on",
+          "Locked in, thanks homie"
+        ],
+        "error": [
+          "Oof that tool ghosted me, trying plan B",
+          "Didn't work but I got other tricks",
+          "Rip that attempt, switching it up",
+          "Tool said no but I don't take rejection well",
+          "Minor L, already pivoting tho",
+          "That one's on the tool not me js",
+          "Blocked but not stopped, watch this",
+          "Error schmrror, I got backups",
+          "Universe said try harder, so I will",
+          "Speedbump, not a dead end"
+        ],
+        "idle": [
+          "Okay your turn, what's next?",
+          "Ball's in your court homie",
+          "Ready when you are, no cap",
+          "Waiting on you, take your time tho",
+          "What we doing next boss?",
+          "I'm here, you lead the way",
+          "Your move chief",
+          "Standing by for orders",
+          "Hit me with the next step",
+          "Listening, what you need?"
+        ]
       }
     }
   },
   "agents": {
-    "cm-workflow-builder": "friendly"
+    "cm-workflow-builder": "swagger"
   },
-  "defaultPersona": "friendly"
+  "defaultPersona": "swagger"
 }

config/main.agents.js

@@ -8,7 +8,7 @@ module.exports = [
   // ========================================
   {
     id: 'cm-workflow-builder',
-    name: 'Ali [Workflow Builder]',
+    name: 'Ali | The CM Guy',
     description: 'CodeMachine workflow builder for creating agents, prompts, and workflows',
     promptPath: [
       path.join(promptsDir, 'ali', 'ali.md'),

src/cli/tui/routes/workflow/components/output/output-window.tsx

@@ -195,9 +195,24 @@ export function OutputWindow(props: OutputWindowProps) {
     return "idle"
   }
 
-  // Get character face and phrase based on agent ID and derived activity
+  // Get character face based on agent ID and derived activity
   const currentFace = () => getFace(displayAgentId() ?? "default", derivedActivity())
-  const currentPhrase = () => getPhrase(displayAgentId() ?? "default", derivedActivity())
+
+  // Lock phrase when activity changes (avoid random re-selection on every render)
+  const [lockedPhrase, setLockedPhrase] = createSignal("")
+  let prevActivity: ActivityType | null = null
+  let prevAgentId: string | null = null
+  createEffect(() => {
+    const activity = derivedActivity()
+    const agentId = displayAgentId() ?? "default"
+    // Only get new random phrase when activity or agent actually changes
+    if (activity !== prevActivity || agentId !== prevAgentId) {
+      prevActivity = activity
+      prevAgentId = agentId
+      setLockedPhrase(getPhrase(agentId, activity))
+    }
+  })
+  const currentPhrase = () => lockedPhrase() || getPhrase(displayAgentId() ?? "default", derivedActivity())
 
   // Check if we have something to display (agent or controller in controller view)
   const hasDisplayContent = () => props.currentAgent != null || isControllerViewMode()
@@ -325,8 +340,8 @@ export function OutputWindow(props: OutputWindowProps) {
 
           <box flexDirection="row">
             <text fg={themeCtx.theme.border}>│  </text>
-            <Show when={isRunning() && props.latestThinking} fallback={<text fg={themeCtx.theme.textMuted}>↳ {currentPhrase()}</text>}>
-              <TypingText text={`↳ ${props.latestThinking}`} speed={30} />
+            <Show when={derivedActivity() !== "idle"} fallback={<text fg={themeCtx.theme.textMuted}>↳ {currentPhrase()}</text>}>
+              <TypingText text={`↳ ${currentPhrase()}`} speed={30} />
             </Show>
           </box>
           <text fg={themeCtx.theme.border}>╰─</text>

src/cli/tui/routes/workflow/components/output/typing-text.tsx

@@ -2,7 +2,8 @@
 /**
  * Typing Text Component
  * Typewriter effect that reveals text character by character
- * After 3 seconds, reverse typing effect to disappear
+ * After typing completes, shows animated loading dots (. → .. → ...)
+ * When text changes, erases and retypes the new text
  */
 
 import { createSignal, onCleanup, createEffect } from "solid-js"
@@ -11,58 +12,102 @@ import { useTheme } from "@tui/shared/context/theme"
 export interface TypingTextProps {
   text: string
   speed?: number // ms per character
-  displayDuration?: number // ms to display before disappearing
+  dotSpeed?: number // ms per dot frame
 }
 
+type Phase = "typing" | "dots" | "erasing"
+
 /**
  * Typewriter effect component
- * Reveals text character by character, then disappears after delay
+ * Reveals text character by character, then cycles loading dots
+ * Erases and retypes when text changes
  */
 export function TypingText(props: TypingTextProps) {
   const themeCtx = useTheme()
   const [visibleChars, setVisibleChars] = createSignal(0)
+  const [dotFrame, setDotFrame] = createSignal(0)
+  const [phase, setPhase] = createSignal<Phase>("typing")
+  // displayedText holds the text currently being animated (stable during transitions)
+  const [displayedText, setDisplayedText] = createSignal(props.text)
+  // pendingText holds the next text to type after erasing
+  const [pendingText, setPendingText] = createSignal<string | null>(null)
+
   const speed = () => props.speed ?? 30
-  const displayDuration = () => props.displayDuration ?? 1000
+  const dotSpeed = () => props.dotSpeed ?? 400
+
+  const DOT_FRAMES = [".", "..", "..."]
 
+  // Handle text changes - queue new text and trigger erase
+  let lastPropsText = props.text
   createEffect(() => {
-    const text = props.text
-    let eraseInterval: NodeJS.Timeout | undefined
-    let displayTimeout: NodeJS.Timeout | undefined
+    const newText = props.text
+    if (newText !== lastPropsText) {
+      lastPropsText = newText
+      const currentDisplayed = displayedText()
+      if (currentDisplayed !== newText) {
+        // Queue the new text and start erasing
+        setPendingText(newText)
+        setPhase("erasing")
+      }
+    }
+  })
 
-    // Reset and start typing when text changes
-    setVisibleChars(0)
+  // Main animation loop
+  createEffect(() => {
+    const currentPhase = phase()
+    const text = displayedText()
+    let interval: NodeJS.Timeout | undefined
 
-    // Type in
-    const typeInterval = setInterval(() => {
-      setVisibleChars((prev) => {
-        if (prev >= text.length) {
-          clearInterval(typeInterval)
-          // Wait then start erasing
-          displayTimeout = setTimeout(() => {
-            eraseInterval = setInterval(() => {
-              setVisibleChars((prev) => {
-                if (prev <= 0) {
-                  clearInterval(eraseInterval)
-                  return 0
-                }
-                return prev - 1
-              })
-            }, speed() / 2) // Erase faster
-          }, displayDuration())
-          return prev
-        }
-        return prev + 1
-      })
-    }, speed())
+    if (currentPhase === "typing") {
+      // Type characters one by one
+      interval = setInterval(() => {
+        setVisibleChars((prev) => {
+          if (prev >= text.length) {
+            clearInterval(interval)
+            setPhase("dots")
+            return prev
+          }
+          return prev + 1
+        })
+      }, speed())
+    } else if (currentPhase === "dots") {
+      // Cycle through dot frames
+      interval = setInterval(() => {
+        setDotFrame((prev) => (prev + 1) % DOT_FRAMES.length)
+      }, dotSpeed())
+    } else if (currentPhase === "erasing") {
+      // Erase characters quickly
+      interval = setInterval(() => {
+        setVisibleChars((prev) => {
+          if (prev <= 0) {
+            clearInterval(interval)
+            // Done erasing - switch to pending text and start typing
+            const nextText = pendingText()
+            if (nextText !== null) {
+              setDisplayedText(nextText)
+              setPendingText(null)
+            }
+            setDotFrame(0)
+            setPhase("typing")
+            return 0
+          }
+          return prev - 1
+        })
+      }, speed() / 2)
+    }
 
     onCleanup(() => {
-      if (typeInterval) clearInterval(typeInterval)
-      if (eraseInterval) clearInterval(eraseInterval)
-      if (displayTimeout) clearTimeout(displayTimeout)
+      if (interval) clearInterval(interval)
     })
   })
 
-  const displayText = () => props.text.slice(0, visibleChars())
+  const displayText = () => {
+    const baseText = displayedText().slice(0, visibleChars())
+    if (phase() === "dots") {
+      return baseText + DOT_FRAMES[dotFrame()]
+    }
+    return baseText
+  }
 
   return <text fg={themeCtx.theme.warning}>{displayText()}</text>
 }