From b7244ffa88473df8d45eaa06b05a88f72df1df21 Mon Sep 17 00:00:00 2001
From: Charles Packer <packercharles@gmail.com>
Date: Sat, 31 Jan 2026 21:53:16 -0800
Subject: [PATCH] feat(cli): add alien art to command preview and exit message
 (#769)

Co-authored-by: Letta <noreply@letta.com>
---
 src/cli/App.tsx                               | 51 ++++++++++++-----
 src/cli/commands/registry.ts                  |  2 +-
 src/cli/components/AgentInfoBar.tsx           | 56 ++++++++++---------
 .../components/SlashCommandAutocomplete.tsx   |  2 +-
 src/cli/components/Text.tsx                   |  1 -
 5 files changed, 69 insertions(+), 43 deletions(-)

diff --git a/src/cli/App.tsx b/src/cli/App.tsx
index e05f8d4..b7fc2e8 100644
--- a/src/cli/App.tsx
+++ b/src/cli/App.tsx
@@ -9802,23 +9802,44 @@ Plan file path: ${planFilePath}`;
                     stats: sessionStatsRef.current.getSnapshot(),
                   })}
                 </Text>
-                <Text dimColor>Resume this agent with:</Text>
-                <Text color={colors.link.url}>
-                  {/* Show -n "name" if agent has name and is pinned, otherwise --agent */}
-                  {agentName &&
-                  (settingsManager.getLocalPinnedAgents().includes(agentId) ||
-                    settingsManager.getGlobalPinnedAgents().includes(agentId))
-                    ? `letta -n "${agentName}"`
-                    : `letta --agent ${agentId}`}
-                </Text>
+                {/* Alien + Resume commands */}
+                <Box>
+                  <Text color={colors.footer.agentName}>{" ▗▖▗▖  "}</Text>
+                  <Text dimColor>Resume this agent with:</Text>
+                </Box>
+                <Box>
+                  <Text color={colors.footer.agentName}>{"▙█▜▛█▟ "}</Text>
+                  <Text color={colors.link.url}>
+                    {/* Show -n "name" if agent has name and is pinned, otherwise --agent */}
+                    {agentName &&
+                    (settingsManager.getLocalPinnedAgents().includes(agentId) ||
+                      settingsManager.getGlobalPinnedAgents().includes(agentId))
+                      ? `letta -n "${agentName}"`
+                      : `letta --agent ${agentId}`}
+                  </Text>
+                </Box>
                 {/* Only show conversation hint if not on default (default is resumed automatically) */}
-                {conversationId !== "default" && (
+                {conversationId !== "default" ? (
                   <>
-                    <Text> </Text>
-                    <Text dimColor>Resume this conversation with:</Text>
-                    <Text color={colors.link.url}>
-                      {`letta --conv ${conversationId}`}
-                    </Text>
+                    <Box>
+                      <Text color={colors.footer.agentName}>{"▝▜▛▜▛▘ "}</Text>
+                      <Text dimColor>Resume this conversation with:</Text>
+                    </Box>
+                    <Box>
+                      <Text color={colors.footer.agentName}>{" ▀  ▀  "}</Text>
+                      <Text color={colors.link.url}>
+                        {`letta --conv ${conversationId}`}
+                      </Text>
+                    </Box>
+                  </>
+                ) : (
+                  <>
+                    <Box>
+                      <Text color={colors.footer.agentName}>{"▝▜▛▜▛▘ "}</Text>
+                    </Box>
+                    <Box>
+                      <Text color={colors.footer.agentName}>{" ▀  ▀  "}</Text>
+                    </Box>
                   </>
                 )}
               </Box>
diff --git a/src/cli/commands/registry.ts b/src/cli/commands/registry.ts
index 3d367a0..9354b36 100644
--- a/src/cli/commands/registry.ts
+++ b/src/cli/commands/registry.ts
@@ -46,7 +46,7 @@ export const commands: Record<string, Command> = {
   },
   "/skill": {
     desc: "Enter skill creation mode (/skill [description])",
-    order: 14,
+    order: 28, // Advanced feature, moved below visible commands
     handler: () => {
       // Handled specially in App.tsx to trigger skill-creation workflow
       return "Starting skill creation...";
diff --git a/src/cli/components/AgentInfoBar.tsx b/src/cli/components/AgentInfoBar.tsx
index 77fdac0..5efc3f7 100644
--- a/src/cli/components/AgentInfoBar.tsx
+++ b/src/cli/components/AgentInfoBar.tsx
@@ -43,32 +43,30 @@ export const AgentInfoBar = memo(function AgentInfoBar({
     return null;
   }
 
+  // Alien ASCII art lines (4 lines tall, with 2-char indent + extra space before text)
+  const alienLines = ["   ▗▖▗▖   ", "  ▙█▜▛█▟  ", "  ▝▜▛▜▛▘  ", "   ▀  ▀   "];
+
   return (
     <Box flexDirection="column">
       {/* Blank line after commands */}
       <Box height={1} />
 
-      {/* Discord/version info */}
+      {/* Version and Discord/feedback info */}
       <Box>
         <Text>
-          {"  "}Having issues? Report bugs with /feedback or{" "}
+          {"  "}Letta Code v{getVersion()} · Report bugs with /feedback or{" "}
           <Link url="https://discord.gg/letta">
             <Text>join our Discord ↗</Text>
           </Link>
         </Text>
       </Box>
-      <Box>
-        <Text>
-          {"  "}Version: Letta Code v{getVersion()}
-        </Text>
-      </Box>
 
       {/* Blank line before agent info */}
       <Box height={1} />
 
-      {/* Agent name and links */}
+      {/* Alien + Agent name */}
       <Box>
-        <Text>{"  "}</Text>
+        <Text color={colors.footer.agentName}>{alienLines[0]}</Text>
         <Text bold color={colors.footer.agentName}>
           {agentName || "Unnamed"}
         </Text>
@@ -79,35 +77,43 @@ export const AgentInfoBar = memo(function AgentInfoBar({
         ) : (
           <Text color="gray"> (type /pin to pin agent)</Text>
         )}
+      </Box>
+
+      {/* Alien + Links */}
+      <Box>
+        <Text color={colors.footer.agentName}>{alienLines[1]}</Text>
         {isCloudUser && adeUrl && !isTmux && (
           <>
-            <Text dimColor> · </Text>
             <Link url={adeUrl}>
               <Text>Open in ADE ↗</Text>
             </Link>
+            <Text dimColor>· </Text>
           </>
         )}
         {isCloudUser && adeUrl && isTmux && (
-          <Text dimColor> · Open in ADE: {adeUrl}</Text>
+          <Text dimColor>Open in ADE: {adeUrl} · </Text>
         )}
         {isCloudUser && (
-          <>
-            <Text dimColor> · </Text>
-            <Link url="https://app.letta.com/settings/organization/usage">
-              <Text>View usage ↗</Text>
-            </Link>
-          </>
+          <Link url="https://app.letta.com/settings/organization/usage">
+            <Text>View usage ↗</Text>
+          </Link>
         )}
-        {!isCloudUser && <Text dimColor> · {serverUrl}</Text>}
+        {!isCloudUser && <Text dimColor>{serverUrl}</Text>}
       </Box>
-      {/* Agent ID and conversation ID on separate line */}
+
+      {/* Alien + Agent ID */}
       <Box>
-        <Text dimColor>
-          {"  "}
-          {agentId}
-        </Text>
-        {conversationId && conversationId !== "default" && (
-          <Text dimColor> · {conversationId}</Text>
+        <Text color={colors.footer.agentName}>{alienLines[2]}</Text>
+        <Text dimColor>{agentId}</Text>
+      </Box>
+
+      {/* Alien + Conversation ID */}
+      <Box>
+        <Text color={colors.footer.agentName}>{alienLines[3]}</Text>
+        {conversationId && conversationId !== "default" ? (
+          <Text dimColor>{conversationId}</Text>
+        ) : (
+          <Text dimColor>default conversation</Text>
         )}
       </Box>
     </Box>
diff --git a/src/cli/components/SlashCommandAutocomplete.tsx b/src/cli/components/SlashCommandAutocomplete.tsx
index 20f12ce..ad5055d 100644
--- a/src/cli/components/SlashCommandAutocomplete.tsx
+++ b/src/cli/components/SlashCommandAutocomplete.tsx
@@ -6,7 +6,7 @@ import { AutocompleteBox, AutocompleteItem } from "./Autocomplete";
 import { Text } from "./Text";
 import type { AutocompleteProps, CommandMatch } from "./types/autocomplete";
 
-const VISIBLE_COMMANDS = 8; // Number of commands visible at once
+const VISIBLE_COMMANDS = 7; // Number of commands visible at once
 
 // Compute filtered command list (excluding hidden commands), sorted by order
 const _allCommands: CommandMatch[] = Object.entries(commands)
diff --git a/src/cli/components/Text.tsx b/src/cli/components/Text.tsx
index 0fd0ebe..7a62baf 100644
--- a/src/cli/components/Text.tsx
+++ b/src/cli/components/Text.tsx
@@ -46,7 +46,6 @@ function looksLikeMojibake(value: string): boolean {
       ) {
         sawUtf8Sequence = true;
         i += 3;
-        continue;
       }
     }
   }