Move model selector below chat input

agent/core/session.py

@@ -18,12 +18,16 @@ logger = logging.getLogger(__name__)
 # Local max-token lookup — avoids litellm.get_max_tokens() which can hang
 # on network calls for certain providers (known litellm issue).
 _MAX_TOKENS_MAP: dict[str, int] = {
+    # Anthropic
     "anthropic/claude-opus-4-5-20251101": 200_000,
     "anthropic/claude-sonnet-4-5-20250929": 200_000,
     "anthropic/claude-sonnet-4-20250514": 200_000,
     "anthropic/claude-haiku-3-5-20241022": 200_000,
     "anthropic/claude-3-5-sonnet-20241022": 200_000,
     "anthropic/claude-3-opus-20240229": 200_000,
+    "huggingface/novita/MiniMaxAI/MiniMax-M2.1": 196_608,
+    "huggingface/novita/moonshotai/Kimi-K2.5": 262_144,
+    "huggingface/novita/zai-org/GLM-5": 200_000,
 }
 _DEFAULT_MAX_TOKENS = 200_000
 
@@ -36,10 +40,13 @@ def _get_max_tokens_safe(model_name: str) -> int:
     # Fallback: try litellm but with a short timeout via threading
     try:
         from litellm import get_max_tokens
+
         result = get_max_tokens(model_name)
         if result and isinstance(result, int):
             return result
-        logger.warning(f"get_max_tokens returned {result} for {model_name}, using default")
+        logger.warning(
+            f"get_max_tokens returned {result} for {model_name}, using default"
+        )
         return _DEFAULT_MAX_TOKENS
     except Exception as e:
         logger.warning(f"get_max_tokens failed for {model_name}, using default: {e}")

backend/routes/agent.py

@@ -89,9 +89,10 @@ async def llm_health_check() -> LLMHealthResponse:
 
 
 AVAILABLE_MODELS = [
-    {"id": "anthropic/claude-opus-4-5-20251101", "label": "Claude Opus 4.5", "provider": "anthropic"},
-    {"id": "huggingface/novita/deepseek-ai/DeepSeek-V3.1", "label": "DeepSeek V3.1", "provider": "huggingface"},
-    {"id": "huggingface/novita/MiniMaxAI/MiniMax-M2.1", "label": "MiniMax M2.1", "provider": "huggingface"},
+    {"id": "huggingface/novita/MiniMaxAI/MiniMax-M2.1", "label": "MiniMax M2.1", "provider": "huggingface", "recommended": True},
+    {"id": "anthropic/claude-opus-4-5-20251101", "label": "Claude Opus 4.5", "provider": "anthropic", "recommended": True},
+    {"id": "huggingface/novita/moonshotai/Kimi-K2.5", "label": "Kimi K2.5", "provider": "huggingface"},
+    {"id": "huggingface/novita/zai-org/GLM-5", "label": "GLM 5", "provider": "huggingface"},
 ]
 
 

frontend/src/components/Chat/ChatInput.tsx

@@ -1,6 +1,60 @@
 import { useState, useCallback, useEffect, useRef, KeyboardEvent } from 'react';
-import { Box, TextField, IconButton, CircularProgress } from '@mui/material';
+import { Box, TextField, IconButton, CircularProgress, Typography, Menu, MenuItem, ListItemIcon, ListItemText, Chip } from '@mui/material';
 import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import { apiFetch } from '@/utils/api';
+
+// Model configuration
+interface ModelOption {
+  id: string;
+  name: string;
+  description: string;
+  modelPath: string;
+  avatarUrl: string;
+  recommended?: boolean;
+}
+
+const getHfAvatarUrl = (modelId: string) => {
+  const org = modelId.split('/')[0];
+  return `https://huggingface.co/api/avatars/${org}`;
+};
+
+const MODEL_OPTIONS: ModelOption[] = [
+  {
+    id: 'minimax-m2.1',
+    name: 'MiniMax M2.1',
+    description: 'Via Novita',
+    modelPath: 'huggingface/novita/MiniMaxAI/MiniMax-M2.1',
+    avatarUrl: getHfAvatarUrl('MiniMaxAI/MiniMax-M2.1'),
+    recommended: true,
+  },
+  {
+    id: 'claude-opus',
+    name: 'Claude Opus 4.5',
+    description: 'Anthropic',
+    modelPath: 'anthropic/claude-opus-4-5-20251101',
+    avatarUrl: 'https://huggingface.co/api/avatars/Anthropic',
+    recommended: true,
+  },
+  {
+    id: 'kimi-k2.5',
+    name: 'Kimi K2.5',
+    description: 'Via Novita',
+    modelPath: 'huggingface/novita/moonshotai/Kimi-K2.5',
+    avatarUrl: getHfAvatarUrl('moonshotai/Kimi-K2.5'),
+  },
+  {
+    id: 'glm-5',
+    name: 'GLM 5',
+    description: 'Via Novita',
+    modelPath: 'huggingface/novita/zai-org/GLM-5',
+    avatarUrl: getHfAvatarUrl('zai-org/GLM-5'),
+  },
+];
+
+const findModelByPath = (path: string): ModelOption | undefined => {
+  return MODEL_OPTIONS.find(m => m.modelPath === path || path?.includes(m.id));
+};
 
 interface ChatInputProps {
   onSend: (text: string) => void;
@@ -10,8 +64,25 @@ interface ChatInputProps {
 export default function ChatInput({ onSend, disabled = false }: ChatInputProps) {
   const [input, setInput] = useState('');
   const inputRef = useRef<HTMLTextAreaElement>(null);
+  const [selectedModelId, setSelectedModelId] = useState<string>(MODEL_OPTIONS[0].id);
+  const [modelAnchorEl, setModelAnchorEl] = useState<null | HTMLElement>(null);
+
+  // Sync with backend on mount
+  useEffect(() => {
+    fetch('/api/config/model')
+      .then((res) => (res.ok ? res.json() : null))
+      .then((data) => {
+        if (data?.current) {
+          const model = findModelByPath(data.current);
+          if (model) setSelectedModelId(model.id);
+        }
+      })
+      .catch(() => { /* ignore */ });
+  }, []);
+
+  const selectedModel = MODEL_OPTIONS.find(m => m.id === selectedModelId) || MODEL_OPTIONS[0];
 
-  // Auto-focus the textarea when the session becomes ready (disabled → false)
+  // Auto-focus the textarea when the session becomes ready (disabled -> false)
   useEffect(() => {
     if (!disabled && inputRef.current) {
       inputRef.current.focus();
@@ -35,6 +106,27 @@ export default function ChatInput({ onSend, disabled = false }: ChatInputProps)
     [handleSend]
   );
 
+  const handleModelClick = (event: React.MouseEvent<HTMLElement>) => {
+    setModelAnchorEl(event.currentTarget);
+  };
+
+  const handleModelClose = () => {
+    setModelAnchorEl(null);
+  };
+
+  const handleSelectModel = async (model: ModelOption) => {
+    handleModelClose();
+    try {
+      const res = await apiFetch('/api/config/model', {
+        method: 'POST',
+        body: JSON.stringify({ model: model.modelPath }),
+      });
+      if (res.ok) {
+        setSelectedModelId(model.id);
+      }
+    } catch { /* ignore */ }
+  };
+
   return (
     <Box
       sx={{
@@ -118,6 +210,108 @@ export default function ChatInput({ onSend, disabled = false }: ChatInputProps)
             {disabled ? <CircularProgress size={20} color="inherit" /> : <ArrowUpwardIcon fontSize="small" />}
           </IconButton>
         </Box>
+
+        {/* Powered By Badge */}
+        <Box
+          onClick={handleModelClick}
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            mt: 1.5,
+            gap: 0.8,
+            opacity: 0.6,
+            cursor: 'pointer',
+            transition: 'opacity 0.2s',
+            '&:hover': {
+              opacity: 1
+            }
+          }}
+        >
+          <Typography variant="caption" sx={{ fontSize: '10px', color: 'var(--muted-text)', textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 500 }}>
+            powered by
+          </Typography>
+          <img
+            src={selectedModel.avatarUrl}
+            alt={selectedModel.name}
+            style={{ height: '14px', width: '14px', objectFit: 'contain', borderRadius: '2px' }}
+          />
+          <Typography variant="caption" sx={{ fontSize: '10px', color: 'var(--text)', fontWeight: 600, letterSpacing: '0.02em' }}>
+            {selectedModel.name}
+          </Typography>
+          <ArrowDropDownIcon sx={{ fontSize: '14px', color: 'var(--muted-text)' }} />
+        </Box>
+
+        {/* Model Selection Menu */}
+        <Menu
+          anchorEl={modelAnchorEl}
+          open={Boolean(modelAnchorEl)}
+          onClose={handleModelClose}
+          anchorOrigin={{
+            vertical: 'top',
+            horizontal: 'center',
+          }}
+          transformOrigin={{
+            vertical: 'bottom',
+            horizontal: 'center',
+          }}
+          slotProps={{
+            paper: {
+              sx: {
+                bgcolor: 'var(--panel)',
+                border: '1px solid var(--divider)',
+                mb: 1,
+                maxHeight: '400px',
+              }
+            }
+          }}
+        >
+          {MODEL_OPTIONS.map((model) => (
+            <MenuItem
+              key={model.id}
+              onClick={() => handleSelectModel(model)}
+              selected={selectedModelId === model.id}
+              sx={{
+                py: 1.5,
+                '&.Mui-selected': {
+                  bgcolor: 'rgba(255,255,255,0.05)',
+                }
+              }}
+            >
+              <ListItemIcon>
+                <img
+                  src={model.avatarUrl}
+                  alt={model.name}
+                  style={{ width: 24, height: 24, borderRadius: '4px', objectFit: 'cover' }}
+                />
+              </ListItemIcon>
+              <ListItemText
+                primary={
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                    {model.name}
+                    {model.recommended && (
+                      <Chip
+                        label="Recommended"
+                        size="small"
+                        sx={{
+                          height: '18px',
+                          fontSize: '10px',
+                          bgcolor: 'var(--accent-yellow)',
+                          color: '#000',
+                          fontWeight: 600,
+                        }}
+                      />
+                    )}
+                  </Box>
+                }
+                secondary={model.description}
+                secondaryTypographyProps={{
+                  sx: { fontSize: '12px', color: 'var(--muted-text)' }
+                }}
+              />
+            </MenuItem>
+          ))}
+        </Menu>
       </Box>
     </Box>
   );

frontend/src/components/Layout/AppLayout.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useRef, useEffect, useState } from 'react';
+import { useCallback, useRef, useEffect } from 'react';
 import {
   Avatar,
   Box,
@@ -7,8 +7,6 @@ import {
   IconButton,
   Alert,
   AlertTitle,
-  Select,
-  MenuItem,
   useMediaQuery,
   useTheme,
 } from '@mui/material';
@@ -50,37 +48,6 @@ export default function AppLayout() {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('md'));
 
-  // ── Model selector state ──────────────────────────────────────────
-  const [currentModel, setCurrentModel] = useState('');
-  const [availableModels, setAvailableModels] = useState<Array<{ id: string; label: string }>>([]);
-
-  useEffect(() => {
-    // Use plain fetch (not apiFetch) — this is a public endpoint,
-    // no auth needed, and we don't want 401 handling to trigger redirects.
-    fetch('/api/config/model')
-      .then((res) => (res.ok ? res.json() : null))
-      .then((data) => {
-        if (data) {
-          setCurrentModel(data.current);
-          setAvailableModels(data.available);
-        }
-      })
-      .catch(() => { /* ignore */ });
-  }, []);
-
-  const handleModelChange = useCallback(async (modelId: string) => {
-    try {
-      const res = await apiFetch('/api/config/model', {
-        method: 'POST',
-        body: JSON.stringify({ model: modelId }),
-      });
-      if (res.ok) {
-        setCurrentModel(modelId);
-        logger.log('Model changed to', modelId);
-      }
-    } catch { /* ignore */ }
-  }, []);
-
   const isResizing = useRef(false);
 
   const handleMouseMove = useCallback((e: MouseEvent) => {
@@ -335,41 +302,6 @@ export default function AppLayout() {
           </Box>
 
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-            {/* Model selector */}
-            {availableModels.length > 0 && currentModel && (
-              <Select
-                value={currentModel}
-                onChange={(e) => handleModelChange(e.target.value)}
-                size="small"
-                variant="outlined"
-                renderValue={(val) => {
-                  const m = availableModels.find((x) => x.id === val);
-                  return m?.label || val;
-                }}
-                sx={{
-                  fontSize: '0.72rem',
-                  height: 30,
-                  minWidth: 120,
-                  color: 'var(--muted-text)',
-                  '& .MuiOutlinedInput-notchedOutline': {
-                    borderColor: 'var(--border)',
-                  },
-                  '&:hover .MuiOutlinedInput-notchedOutline': {
-                    borderColor: 'var(--border-hover)',
-                  },
-                  '& .MuiSelect-select': {
-                    py: 0.5,
-                    px: 1,
-                  },
-                }}
-              >
-                {availableModels.map((m) => (
-                  <MenuItem key={m.id} value={m.id} sx={{ fontSize: '0.75rem' }}>
-                    {m.label}
-                  </MenuItem>
-                ))}
-              </Select>
-            )}
             <IconButton
               onClick={toggleTheme}
               size="small"