Fix 4 reported issues: model selector, approval bug, tool timeout, session limit

- Model selector: GET/POST /api/config/model + dropdown in header bar
- Approval fix: optimistic UI update after approve/reject (don't wait for WS)
- Tool timeout: 5-min timeout shows "timed out" chip for stuck tools
- Session limit: MAX_SESSIONS_PER_USER increased from 3 to 10

Co-authored-by: Cursor <cursoragent@cursor.com>

backend/routes/agent.py

@@ -88,6 +88,38 @@ 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"},
+]
+
+
+@router.get("/config/model")
+async def get_model(user: dict = Depends(get_current_user)) -> dict:
+    """Get current model and available models."""
+    return {
+        "current": session_manager.config.model_name,
+        "available": AVAILABLE_MODELS,
+    }
+
+
+@router.post("/config/model")
+async def set_model(
+    body: dict, user: dict = Depends(get_current_user)
+) -> dict:
+    """Set the LLM model. Applies to new conversations."""
+    model_id = body.get("model")
+    if not model_id:
+        raise HTTPException(status_code=400, detail="Missing 'model' field")
+    valid_ids = {m["id"] for m in AVAILABLE_MODELS}
+    if model_id not in valid_ids:
+        raise HTTPException(status_code=400, detail=f"Unknown model: {model_id}")
+    session_manager.config.model_name = model_id
+    logger.info(f"Model changed to {model_id} by {user.get('username', 'unknown')}")
+    return {"model": model_id}
+
+
 @router.post("/title")
 async def generate_title(
     request: SubmitRequest, user: dict = Depends(get_current_user)

backend/session_manager.py

@@ -67,7 +67,7 @@ class SessionCapacityError(Exception):
 # Estimated for HF Spaces cpu-basic (2 vCPU, 16 GB RAM).
 # Each session uses ~10-20 MB (context, tools, queues, task).
 MAX_SESSIONS: int = 50
-MAX_SESSIONS_PER_USER: int = 3
+MAX_SESSIONS_PER_USER: int = 10
 
 
 class SessionManager:

frontend/src/components/Chat/ToolCallGroup.tsx

@@ -18,6 +18,14 @@ interface ToolCallGroupProps {
   tools: TraceLog[];
 }
 
+/** Check if a running tool has been stuck for too long (5 minutes). */
+const TOOL_TIMEOUT_MS = 5 * 60 * 1000;
+function isTimedOut(log: TraceLog): boolean {
+  if (log.completed || log.approvalStatus === 'pending') return false;
+  const elapsed = Date.now() - new Date(log.timestamp).getTime();
+  return elapsed > TOOL_TIMEOUT_MS;
+}
+
 // ── Status icon based on tool state ─────────────────────────────────
 function StatusIcon({ log }: { log: TraceLog }) {
   // Awaiting approval
@@ -28,6 +36,10 @@ function StatusIcon({ log }: { log: TraceLog }) {
   if (log.approvalStatus === 'rejected') {
     return <ErrorOutlineIcon sx={{ fontSize: 16, color: 'error.main' }} />;
   }
+  // Timed out
+  if (isTimedOut(log)) {
+    return <ErrorOutlineIcon sx={{ fontSize: 16, color: 'var(--muted-text)' }} />;
+  }
   // Running (not completed yet)
   if (!log.completed) {
     return (
@@ -56,6 +68,7 @@ function StatusIcon({ log }: { log: TraceLog }) {
 function statusLabel(log: TraceLog): string | null {
   if (log.approvalStatus === 'pending') return 'awaiting approval';
   if (log.approvalStatus === 'rejected') return 'rejected';
+  if (isTimedOut(log)) return 'timed out';
   if (!log.completed) return 'running';
   return null;
 }
@@ -63,6 +76,7 @@ function statusLabel(log: TraceLog): string | null {
 function statusColor(log: TraceLog): string {
   if (log.approvalStatus === 'pending') return 'var(--accent-yellow)';
   if (log.approvalStatus === 'rejected') return 'var(--accent-red)';
+  if (isTimedOut(log)) return 'var(--muted-text)';
   return 'var(--accent-yellow)';
 }
 
@@ -213,7 +227,7 @@ export default function ToolCallGroup({ tools }: ToolCallGroupProps) {
     async (toolCallId: string, approved: boolean, feedback?: string) => {
       if (!activeSessionId) return;
       try {
-        await apiFetch('/api/approve', {
+        const res = await apiFetch('/api/approve', {
           method: 'POST',
           body: JSON.stringify({
             session_id: activeSessionId,
@@ -224,7 +238,17 @@ export default function ToolCallGroup({ tools }: ToolCallGroupProps) {
             }],
           }),
         });
-        // The WebSocket will send back tool_output events which will update the trace
+
+        if (res.ok) {
+          // Optimistic update: immediately reflect approval status in the UI
+          const { updateTraceLog, updateCurrentTurnTrace, setProcessing } = useAgentStore.getState();
+          updateTraceLog(toolCallId, '', {
+            approvalStatus: approved ? 'approved' : 'rejected',
+            completed: !approved, // Rejected tools are done; approved ones will run
+          });
+          updateCurrentTurnTrace(activeSessionId);
+          if (approved) setProcessing(true);
+        }
       } catch (e) {
         logger.error('Approval failed:', e);
       }

frontend/src/components/Layout/AppLayout.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useRef, useEffect } from 'react';
+import { useCallback, useRef, useEffect, useState } from 'react';
 import {
   Avatar,
   Box,
@@ -7,6 +7,8 @@ import {
   IconButton,
   Alert,
   AlertTitle,
+  Select,
+  MenuItem,
   useMediaQuery,
   useTheme,
 } from '@mui/material';
@@ -48,6 +50,36 @@ 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(() => {
+    (async () => {
+      try {
+        const res = await apiFetch('/api/config/model');
+        if (res.ok) {
+          const data = await res.json();
+          setCurrentModel(data.current);
+          setAvailableModels(data.available);
+        }
+      } catch { /* ignore */ }
+    })();
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  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) => {
@@ -302,6 +334,36 @@ export default function AppLayout() {
           </Box>
 
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+            {/* Model selector */}
+            {availableModels.length > 0 && (
+              <Select
+                value={currentModel}
+                onChange={(e) => handleModelChange(e.target.value)}
+                size="small"
+                variant="outlined"
+                sx={{
+                  fontSize: '0.72rem',
+                  height: 30,
+                  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"