fix: improve UI (#403)

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

src/cli/components/InputRich.tsx

@@ -15,7 +15,6 @@ import type { PermissionMode } from "../../permissions/mode";
 import { permissionMode } from "../../permissions/mode";
 import { ANTHROPIC_PROVIDER_NAME } from "../../providers/anthropic-provider";
 import { settingsManager } from "../../settings-manager";
-import { getVersion } from "../../version";
 import { charsToTokens, formatCompact } from "../helpers/format";
 import { useTerminalWidth } from "../hooks/useTerminalWidth";
 import { colors } from "./colors";
@@ -26,7 +25,6 @@ import { ShimmerText } from "./ShimmerText";
 
 // Type assertion for ink-spinner compatibility
 const Spinner = SpinnerLib as ComponentType<{ type?: string }>;
-const appVersion = getVersion();
 
 // Window for double-escape to clear input
 const ESC_CLEAR_WINDOW_MS = 2500;
@@ -708,11 +706,22 @@ export function Input({
               </Text>
             </Text>
           ) : (
-            <Text dimColor>Press / for commands or @ for files</Text>
+            <Text dimColor>Press / for commands</Text>
           )}
-          <Text dimColor>
-            {`Letta Code v${appVersion} `}
-            {`[${currentModel ?? "unknown"}${currentModelProvider === ANTHROPIC_PROVIDER_NAME ? ` ${chalk.rgb(255, 199, 135)("claude pro/max")}` : ""}]`}
+          <Text>
+            <Text color={colors.footer.agentName}>
+              {agentName || "Unnamed"}
+            </Text>
+            <Text
+              dimColor={currentModelProvider !== ANTHROPIC_PROVIDER_NAME}
+              color={
+                currentModelProvider === ANTHROPIC_PROVIDER_NAME
+                  ? "#FFC787"
+                  : undefined
+              }
+            >
+              {` [${currentModel ?? "unknown"}]`}
+            </Text>
           </Text>
         </Box>
       </Box>

src/cli/components/ModelSelector.tsx

@@ -104,10 +104,16 @@ export function ModelSelector({
   );
 
   // Supported models: models.json entries that are available
+  // Featured models first, then non-featured, preserving JSON order within each group
   const supportedModels = useMemo(() => {
     if (availableHandles === undefined) return [];
-    if (availableHandles === null) return typedModels; // fallback
-    return typedModels.filter((m) => availableHandles.has(m.handle));
+    const available =
+      availableHandles === null
+        ? typedModels // fallback
+        : typedModels.filter((m) => availableHandles.has(m.handle));
+    const featured = available.filter((m) => m.isFeatured);
+    const nonFeatured = available.filter((m) => !m.isFeatured);
+    return [...featured, ...nonFeatured];
   }, [typedModels, availableHandles]);
 
   // All other models: API handles not in models.json
@@ -258,7 +264,7 @@ export function ModelSelector({
   );
 
   const getCategoryLabel = (cat: ModelCategory) => {
-    if (cat === "supported") return `Supported (${supportedModels.length})`;
+    if (cat === "supported") return `Recommended (${supportedModels.length})`;
     return `All Available Models (${otherModelHandles.length})`;
   };
 
@@ -277,6 +283,7 @@ export function ModelSelector({
                 {i > 0 && <Text dimColor> · </Text>}
                 <Text
                   bold={cat === category}
+                  dimColor={cat !== category}
                   color={
                     cat === category
                       ? colors.selector.itemHighlighted
@@ -349,13 +356,15 @@ export function ModelSelector({
                 <Text
                   bold={isSelected}
                   color={
-                    isSelected ? colors.selector.itemHighlighted : undefined
+                    isSelected
+                      ? colors.selector.itemHighlighted
+                      : isCurrent
+                        ? colors.selector.itemCurrent
+                        : undefined
                   }
                 >
                   {model.label}
-                  {isCurrent && (
-                    <Text color={colors.selector.itemCurrent}> (current)</Text>
-                  )}
+                  {isCurrent && <Text> (current)</Text>}
                 </Text>
                 {model.description && (
                   <Text dimColor> {model.description}</Text>

src/cli/components/SlashCommandAutocomplete.tsx

@@ -2,6 +2,7 @@ import { Text } from "ink";
 import Link from "ink-link";
 import { useEffect, useMemo, useState } from "react";
 import { settingsManager } from "../../settings-manager";
+import { getVersion } from "../../version";
 import { commands } from "../commands/registry";
 import { useAutocompleteNavigation } from "../hooks/useAutocompleteNavigation";
 import { AutocompleteBox, AutocompleteItem } from "./Autocomplete";
@@ -209,6 +210,7 @@ export function SlashCommandAutocomplete({
           <Text color={colors.link.text}>join our Discord ↗</Text>
         </Link>
       </Text>
+      <Text dimColor>Version: Letta Code v{getVersion()}</Text>
     </AutocompleteBox>
   );
 }

src/cli/components/colors.ts

@@ -163,4 +163,9 @@ export const colors = {
     dim: "gray",
     bold: "white",
   },
+
+  // Footer bar
+  footer: {
+    agentName: brandColors.primaryAccent,
+  },
 } as const;