fix(cli): keep model selector chrome visible during refresh (#1005)

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

src/cli/components/ModelSelector.tsx

@@ -599,7 +599,7 @@ export function ModelSelector({
         <Text bold color={colors.selector.title}>
           Swap your agent's model
         </Text>
-        {!isLoading && !refreshing && (
+        {!isLoading && (
           <Box flexDirection="column" paddingLeft={1}>
             {renderTabBar()}
             <Text dimColor> {getCategoryDescription(category)}</Text>
@@ -622,12 +622,6 @@ export function ModelSelector({
         </Box>
       )}
 
-      {refreshing && (
-        <Box paddingLeft={2}>
-          <Text dimColor>Refreshing models...</Text>
-        </Box>
-      )}
-
       {error && (
         <Box paddingLeft={2}>
           <Text color="yellow">
@@ -647,60 +641,68 @@ export function ModelSelector({
       )}
 
       {/* Model list */}
+      {refreshing && (
+        <Box paddingLeft={2}>
+          <Text dimColor>Refreshing list...</Text>
+        </Box>
+      )}
       <Box flexDirection="column">
-        {visibleModels.map((model, index) => {
+        {!refreshing &&
-          const actualIndex = startIndex + index;
+          visibleModels.map((model, index) => {
-          const isSelected = actualIndex === selectedIndex;
+            const actualIndex = startIndex + index;
-          const isCurrent = model.id === currentModelId;
+            const isSelected = actualIndex === selectedIndex;
-          // Show lock for non-free models when on free tier (only for Letta API tabs)
+            const isCurrent = model.id === currentModelId;
-          const showLock =
+            // Show lock for non-free models when on free tier (only for Letta API tabs)
-            isFreeTier &&
+            const showLock =
-            !model.free &&
+              isFreeTier &&
-            (category === "supported" || category === "all");
+              !model.free &&
+              (category === "supported" || category === "all");
 
-          return (
+            return (
-            <Box key={model.id} flexDirection="row">
+              <Box key={model.id} flexDirection="row">
-              <Text
+                <Text
-                color={isSelected ? colors.selector.itemHighlighted : undefined}
+                  color={
-              >
+                    isSelected ? colors.selector.itemHighlighted : undefined
-                {isSelected ? "> " : "  "}
+                  }
-              </Text>
+                >
-              {showLock && <Text dimColor>🔒 </Text>}
+                  {isSelected ? "> " : "  "}
-              <Text
+                </Text>
-                bold={isSelected}
+                {showLock && <Text dimColor>🔒 </Text>}
-                color={
+                <Text
-                  isSelected
+                  bold={isSelected}
-                    ? colors.selector.itemHighlighted
+                  color={
-                    : isCurrent
+                    isSelected
-                      ? colors.selector.itemCurrent
+                      ? colors.selector.itemHighlighted
-                      : undefined
+                      : isCurrent
-                }
+                        ? colors.selector.itemCurrent
-              >
+                        : undefined
-                {model.label}
+                  }
-                {isCurrent && <Text> (current)</Text>}
+                >
-              </Text>
+                  {model.label}
-              {model.description && (
+                  {isCurrent && <Text> (current)</Text>}
-                <Text dimColor> · {model.description}</Text>
+                </Text>
-              )}
+                {model.description && (
-            </Box>
+                  <Text dimColor> · {model.description}</Text>
-          );
+                )}
-        })}
+              </Box>
-        {showScrollDown ? (
+            );
+          })}
+        {!refreshing && showScrollDown ? (
           <Text dimColor>
             {"  "}↓ {itemsBelow} more below
           </Text>
-        ) : currentList.length > visibleCount ? (
+        ) : !refreshing && currentList.length > visibleCount ? (
           <Text> </Text>
         ) : null}
       </Box>
 
       {/* Footer */}
-      {!isLoading && !refreshing && currentList.length > 0 && (
+      {!isLoading && currentList.length > 0 && (
         <Box flexDirection="column" marginTop={1}>
           <Text dimColor>
             {"  "}
             {currentList.length} models{isCached ? " · cached" : ""} · R to
-            refresh availability
+            refresh list
           </Text>
           <Text dimColor>
             {"  "}Enter select · ↑↓ navigate · ←→/Tab switch · Esc cancel