fix: clean up UI (#401)

src/cli/components/AgentInfoBar.tsx

@@ -1,6 +1,7 @@
 import { Box, Text } from "ink";
 import Link from "ink-link";
 import { useMemo } from "react";
+import { DEFAULT_AGENT_NAME } from "../../constants";
 import { settingsManager } from "../../settings-manager";
 import { colors } from "./colors";
 
@@ -42,10 +43,11 @@ export function AgentInfoBar({
       marginBottom={1}
     >
       <Box>
-        <Text color="gray">Current agent: </Text>
         <Text bold>{agentName || "Unnamed"}</Text>
         {isPinned ? (
           <Text color="green"> (pinned ✓)</Text>
+        ) : agentName === DEFAULT_AGENT_NAME || !agentName ? (
+          <Text color="gray"> (type /pin to give your agent a real name!)</Text>
         ) : (
           <Text color="gray"> (type /pin to pin agent)</Text>
         )}

src/cli/components/ApprovalDialogRich.tsx

@@ -854,7 +854,7 @@ export const ApprovalDialog = memo(function ApprovalDialog({
           flexDirection="column"
           paddingX={1}
         >
-          <Text bold>What should Letta do differently? (esc to cancel):</Text>
+          <Text bold>What should I do differently? (esc to cancel):</Text>
           <Box height={1} />
           <Box>
             <Text dimColor>{"> "}</Text>

src/cli/components/Autocomplete.tsx

@@ -19,7 +19,6 @@ export function AutocompleteBox({ header, children }: AutocompleteBoxProps) {
       borderStyle="round"
       borderColor={colors.command.border}
       paddingX={1}
-      marginBottom={1}
     >
       <Text dimColor>{header}</Text>
       {children}

src/cli/components/FeedbackDialog.tsx

@@ -40,7 +40,7 @@ export function FeedbackDialog({
     <Box flexDirection="column" paddingY={1}>
       <Box marginBottom={1}>
         <Text color={colors.approval.header} bold>
-          Send Feedback to Letta Team
+          Send Feedback to the Letta Team
         </Text>
       </Box>
 

src/cli/components/SlashCommandAutocomplete.tsx

@@ -1,9 +1,11 @@
 import { Text } from "ink";
+import Link from "ink-link";
 import { useEffect, useMemo, useState } from "react";
 import { settingsManager } from "../../settings-manager";
 import { commands } from "../commands/registry";
 import { useAutocompleteNavigation } from "../hooks/useAutocompleteNavigation";
 import { AutocompleteBox, AutocompleteItem } from "./Autocomplete";
+import { colors } from "./colors";
 import type { AutocompleteProps, CommandMatch } from "./types/autocomplete";
 
 const VISIBLE_COMMANDS = 8; // Number of commands visible at once
@@ -180,7 +182,7 @@ export function SlashCommandAutocomplete({
   const showScrollDown = startIndex + VISIBLE_COMMANDS < totalMatches;
 
   return (
-    <AutocompleteBox header="↑↓ navigate, Tab autocomplete, Enter execute">
+    <AutocompleteBox header="↑↓ navigate, Tab to autocomplete, Enter to execute">
       {showScrollUp && <Text dimColor> ↑ {startIndex} more above</Text>}
       {visibleMatches.map((item, idx) => {
         const actualIndex = startIndex + idx;
@@ -200,6 +202,13 @@ export function SlashCommandAutocomplete({
           ↓ {totalMatches - startIndex - VISIBLE_COMMANDS} more below
         </Text>
       )}
+      <Text> </Text>
+      <Text dimColor>
+        Having issues? Report bugs with /feedback or{" "}
+        <Link url="https://discord.gg/letta">
+          <Text color={colors.link.text}>join our Discord ↗</Text>
+        </Link>
+      </Text>
     </AutocompleteBox>
   );
 }