ui updates (#1)

- Move model selector below chat input (9615e373f7cc0c8a2d7dbe1f241d42c18133c14d)
- inference token (72bac94ad9ae98213038d167ceca51573beb3493)
- fixing inference token (c53966b567f0b73f3e7b95a6aa2779dbd22765c9)
- debug (8601e9a5e420f759c29b85914ee055799f25b5e4)
- inference token (7e025045432d83571de5dd74aee3838072224955)
- removed avatars and made ui improvements (fe018ceb16f0a3b41d72fae38735a00d03b203c6)
- welcome message change (3cb2d2ee2bf5704da3a28509d88bf7620accfca9)
- font update (92ce85598106e114597d26d655f48fc39e95696e)
- removing avatars (0cc4d1b77e6c6238d3aa550e62fc309be2010728)
- theme edit and tool display fix (28267586971e511849386091fb1474ce1f065c59)
- namespace fix (a8af09b848935ae985177fcab67ad1a6911735c5)
- hf job output (de476e870b3aec6ca51882263dc7404c26fb3950)
- acess to ml-agent-explorers (c4c961e6a983ba2092b33bca68fc78ad1b12a8bf)
- d (ac2277ddae8a8eef61c0130518de82802b885fa5)
- auth scopes (154b509ce3887c3e5762ca4c37c04f4bc7040a13)
- fixing wrong token loading (01cc20c6bd5e81d949e7345f49d5b3eb6d62fe2c)

README.md

@@ -9,9 +9,11 @@ hf_oauth: true
 hf_oauth_scopes:
   - read-repos
   - write-repos
+  - contribute-repos
   - manage-repos
   - inference-api
   - jobs
+  - write-discussions
 ---
 
 # HF Agent

agent/context_manager/manager.py

@@ -47,9 +47,13 @@ def _get_hf_username() -> str:
     try:
         result = subprocess.run(
             [
-                "curl", "-s", "-4",          # force IPv4
-                "-m", str(_HF_WHOAMI_TIMEOUT),  # max time
-                "-H", f"Authorization: Bearer {hf_token}",
+                "curl",
+                "-s",
+                "-4",  # force IPv4
+                "-m",
+                str(_HF_WHOAMI_TIMEOUT),  # max time
+                "-H",
+                f"Authorization: Bearer {hf_token}",
                 _HF_WHOAMI_URL,
             ],
             capture_output=True,
@@ -60,9 +64,13 @@ def _get_hf_username() -> str:
         if result.returncode == 0 and result.stdout:
             data = json.loads(result.stdout)
             _hf_username_cache = data.get("name", "unknown")
-            logger.info(f"HF username resolved to '{_hf_username_cache}' in {t1 - t0:.2f}s")
+            logger.info(
+                f"HF username resolved to '{_hf_username_cache}' in {t1 - t0:.2f}s"
+            )
         else:
-            logger.warning(f"curl whoami failed (rc={result.returncode}) in {t1 - t0:.2f}s")
+            logger.warning(
+                f"curl whoami failed (rc={result.returncode}) in {t1 - t0:.2f}s"
+            )
             _hf_username_cache = "unknown"
     except Exception as e:
         t1 = _t.monotonic()
@@ -165,10 +173,14 @@ class ContextManager:
             )
         )
 
+        hf_key = os.environ.get("INFERENCE_TOKEN")
         response = await acompletion(
             model=model_name,
             messages=messages_to_summarize,
             max_completion_tokens=self.compact_size,
+            api_key=hf_key
+            if hf_key and model_name.startswith("huggingface/")
+            else None,
         )
         summarized_message = Message(
             role="assistant", content=response.choices[0].message.content

agent/core/agent_loop.py

@@ -5,8 +5,9 @@ Main agent implementation with integrated tool system and MCP support
 import asyncio
 import json
 import logging
+import os
 
-from litellm import ChatCompletionMessageToolCall, Message, ModelResponse, acompletion
+from litellm import ChatCompletionMessageToolCall, Message, acompletion
 from lmnr import observe
 
 from agent.config import Config
@@ -17,6 +18,9 @@ from agent.tools.jobs_tool import CPU_FLAVORS
 logger = logging.getLogger(__name__)
 
 ToolCall = ChatCompletionMessageToolCall
+# Explicit inference token — needed because litellm checks HF_TOKEN before
+# HUGGINGFACE_API_KEY, and HF_TOKEN (used for Hub ops) may lack inference permissions.
+_INFERENCE_API_KEY = os.environ.get("INFERENCE_TOKEN")
 
 
 def _validate_tool_args(tool_args: dict) -> tuple[bool, str | None]:
@@ -41,7 +45,9 @@ def _validate_tool_args(tool_args: dict) -> tuple[bool, str | None]:
     return True, None
 
 
-def _needs_approval(tool_name: str, tool_args: dict, config: Config | None = None) -> bool:
+def _needs_approval(
+    tool_name: str, tool_args: dict, config: Config | None = None
+) -> bool:
     """Check if a tool call requires user approval before execution."""
     # Yolo mode: skip all approvals
     if config and config.yolo_mode:
@@ -56,19 +62,24 @@ def _needs_approval(tool_name: str, tool_args: dict, config: Config | None = Non
         operation = tool_args.get("operation", "")
         if operation not in ["run", "uv", "scheduled run", "scheduled uv"]:
             return False
-        
+
         # Check if this is a CPU-only job
         # hardware_flavor is at top level of tool_args, not nested in args
-        hardware_flavor = tool_args.get("hardware_flavor") or tool_args.get("flavor") or tool_args.get("hardware") or "cpu-basic"
+        hardware_flavor = (
+            tool_args.get("hardware_flavor")
+            or tool_args.get("flavor")
+            or tool_args.get("hardware")
+            or "cpu-basic"
+        )
         is_cpu_job = hardware_flavor in CPU_FLAVORS
-        
+
         if is_cpu_job:
             if config and not config.confirm_cpu_jobs:
                 return False
             return True
-        
+
         return True
-    
+
     # Check for file upload operations (hf_private_repos or other tools)
     if tool_name == "hf_private_repos":
         operation = tool_args.get("operation", "")
@@ -89,7 +100,13 @@ def _needs_approval(tool_name: str, tool_args: dict, config: Config | None = Non
     # hf_repo_git: destructive operations require approval
     if tool_name == "hf_repo_git":
         operation = tool_args.get("operation", "")
-        if operation in ["delete_branch", "delete_tag", "merge_pr", "create_repo", "update_repo"]:
+        if operation in [
+            "delete_branch",
+            "delete_tag",
+            "merge_pr",
+            "create_repo",
+            "update_repo",
+        ]:
             return True
 
     return False
@@ -130,7 +147,6 @@ class Handlers:
         while iteration < max_iterations:
             messages = session.context_manager.get_messages()
             tools = session.tool_router.get_tool_specs_for_llm()
-
             try:
                 # ── Stream the LLM response ──────────────────────────
                 response = await acompletion(
@@ -140,6 +156,10 @@ class Handlers:
                     tool_choice="auto",
                     stream=True,
                     stream_options={"include_usage": True},
+                    api_key=_INFERENCE_API_KEY
+                    if _INFERENCE_API_KEY
+                    and session.config.model_name.startswith("huggingface/")
+                    else None,
                 )
 
                 full_content = ""
@@ -180,13 +200,13 @@ class Handlers:
                                 tool_calls_acc[idx]["id"] = tc_delta.id
                             if tc_delta.function:
                                 if tc_delta.function.name:
-                                    tool_calls_acc[idx]["function"][
-                                        "name"
-                                    ] += tc_delta.function.name
+                                    tool_calls_acc[idx]["function"]["name"] += (
+                                        tc_delta.function.name
+                                    )
                                 if tc_delta.function.arguments:
-                                    tool_calls_acc[idx]["function"][
-                                        "arguments"
-                                    ] += tc_delta.function.arguments
+                                    tool_calls_acc[idx]["function"]["arguments"] += (
+                                        tc_delta.function.arguments
+                                    )
 
                     # Capture usage from the final chunk
                     if hasattr(chunk, "usage") and chunk.usage:
@@ -219,9 +239,7 @@ class Handlers:
                 if not tool_calls:
                     if content:
                         assistant_msg = Message(role="assistant", content=content)
-                        session.context_manager.add_message(
-                            assistant_msg, token_count
-                        )
+                        session.context_manager.add_message(assistant_msg, token_count)
                         final_response = content
                     break
 

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}")

agent/tools/jobs_tool.py

@@ -283,6 +283,7 @@ class HfJobsTool:
         namespace: Optional[str] = None,
         log_callback: Optional[Callable[[str], Awaitable[None]]] = None,
     ):
+        self.hf_token = hf_token
         self.api = HfApi(token=hf_token)
         self.namespace = namespace
         self.log_callback = log_callback
@@ -1028,7 +1029,7 @@ async def hf_jobs_handler(
             or os.environ.get("HF_TOKEN")
             or os.environ.get("HUGGINGFACE_HUB_TOKEN")
         )
-        namespace = HfApi(token=hf_token).whoami().get("name") if hf_token else None
+        namespace = os.environ.get("HF_NAMESPACE") or (HfApi(token=hf_token).whoami().get("name") if hf_token else None)
 
         tool = HfJobsTool(
             namespace=namespace,

backend/main.py

@@ -5,6 +5,10 @@ import os
 from contextlib import asynccontextmanager
 from pathlib import Path
 
+from dotenv import load_dotenv
+
+load_dotenv()
+
 # Ensure HF_TOKEN is set — fall back to HF_ADMIN_TOKEN if available (HF Spaces)
 if not os.environ.get("HF_TOKEN") and os.environ.get("HF_ADMIN_TOKEN"):
     os.environ["HF_TOKEN"] = os.environ["HF_ADMIN_TOKEN"]

backend/routes/agent.py

@@ -5,13 +5,19 @@ dependency. In dev mode (no OAUTH_CLIENT_ID), auth is bypassed automatically.
 """
 
 import logging
+import os
 from typing import Any
 
-from fastapi import APIRouter, Depends, HTTPException, Request, WebSocket, WebSocketDisconnect
-
 from dependencies import get_current_user, get_ws_user
+from fastapi import (
+    APIRouter,
+    Depends,
+    HTTPException,
+    Request,
+    WebSocket,
+    WebSocketDisconnect,
+)
 from litellm import acompletion
-
 from models import (
     ApprovalRequest,
     HealthResponse,
@@ -27,6 +33,31 @@ logger = logging.getLogger(__name__)
 
 router = APIRouter(prefix="/api", tags=["agent"])
 
+AVAILABLE_MODELS = [
+    {
+        "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",
+    },
+]
+
 
 def _check_session_access(session_id: str, user: dict[str, Any]) -> None:
     """Verify the user has access to the given session. Raises 403 or 404."""
@@ -58,21 +89,34 @@ async def llm_health_check() -> LLMHealthResponse:
     - timeout / network → provider unreachable
     """
     model = session_manager.config.model_name
+    hf_key = os.environ.get("INFERENCE_TOKEN")
     try:
         await acompletion(
             model=model,
             messages=[{"role": "user", "content": "hi"}],
             max_tokens=1,
             timeout=10,
+            api_key=hf_key if hf_key and model.startswith("huggingface/") else None,
         )
         return LLMHealthResponse(status="ok", model=model)
     except Exception as e:
         err_str = str(e).lower()
         error_type = "unknown"
 
-        if "401" in err_str or "auth" in err_str or "invalid" in err_str or "api key" in err_str:
+        if (
+            "401" in err_str
+            or "auth" in err_str
+            or "invalid" in err_str
+            or "api key" in err_str
+        ):
             error_type = "auth"
-        elif "402" in err_str or "credit" in err_str or "quota" in err_str or "insufficient" in err_str or "billing" in err_str:
+        elif (
+            "402" in err_str
+            or "credit" in err_str
+            or "quota" in err_str
+            or "insufficient" in err_str
+            or "billing" in err_str
+        ):
             error_type = "credits"
         elif "429" in err_str or "rate" in err_str:
             error_type = "rate_limit"
@@ -88,13 +132,6 @@ 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() -> dict:
     """Get current model and available models. No auth required."""
@@ -105,9 +142,7 @@ async def get_model() -> dict:
 
 
 @router.post("/config/model")
-async def set_model(
-    body: dict, user: dict = Depends(get_current_user)
-) -> dict:
+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:
@@ -126,6 +161,7 @@ async def generate_title(
 ) -> dict:
     """Generate a short title for a chat session based on the first user message."""
     model = session_manager.config.model_name
+    hf_key = os.environ.get("INFERENCE_TOKEN")
     try:
         response = await acompletion(
             model=model,
@@ -143,6 +179,7 @@ async def generate_title(
             max_tokens=20,
             temperature=0.3,
             timeout=8,
+            api_key=hf_key if hf_key and model.startswith("huggingface/") else None,
         )
         title = response.choices[0].message.content.strip().strip('"').strip("'")
         # Safety: cap at 50 chars
@@ -169,11 +206,13 @@ async def create_session(
 
     Returns 503 if the server or user has reached the session limit.
     """
-    # Extract the user's HF token from the Bearer header
+    # Extract the user's HF token (Bearer header or HttpOnly cookie)
     hf_token = None
     auth_header = request.headers.get("Authorization", "")
     if auth_header.startswith("Bearer "):
         hf_token = auth_header[7:]
+    if not hf_token:
+        hf_token = request.cookies.get("hf_access_token")
 
     try:
         session_id = await session_manager.create_session(
@@ -258,9 +297,7 @@ async def interrupt_session(
 
 
 @router.post("/undo/{session_id}")
-async def undo_session(
-    session_id: str, user: dict = Depends(get_current_user)
-) -> dict:
+async def undo_session(session_id: str, user: dict = Depends(get_current_user)) -> dict:
     """Undo the last turn in a session."""
     _check_session_access(session_id, user)
     success = await session_manager.undo(session_id)
@@ -311,7 +348,9 @@ async def websocket_endpoint(websocket: WebSocket, session_id: str) -> None:
     # Authenticate the WebSocket connection
     user = await get_ws_user(websocket)
     if not user:
-        logger.warning(f"WebSocket rejected: authentication failed for session {session_id}")
+        logger.warning(
+            f"WebSocket rejected: authentication failed for session {session_id}"
+        )
         await websocket.accept()
         await websocket.close(code=4001, reason="Authentication required")
         return
@@ -339,10 +378,12 @@ async def websocket_endpoint(websocket: WebSocket, session_id: str) -> None:
     # knows the session is alive.  The original ready event from _run_session
     # fires before the WS is connected and is always lost.
     try:
-        await websocket.send_json({
-            "event_type": "ready",
-            "data": {"message": "Agent initialized"},
-        })
+        await websocket.send_json(
+            {
+                "event_type": "ready",
+                "data": {"message": "Agent initialized"},
+            }
+        )
     except Exception as e:
         logger.error(f"Failed to send ready event for session {session_id}: {e}")
 

backend/routes/auth.py

@@ -10,11 +10,10 @@ import time
 from urllib.parse import urlencode
 
 import httpx
+from dependencies import AUTH_ENABLED, get_current_user
 from fastapi import APIRouter, Depends, HTTPException, Request
 from fastapi.responses import RedirectResponse
 
-from dependencies import AUTH_ENABLED, get_current_user
-
 router = APIRouter(prefix="/auth", tags=["auth"])
 
 # OAuth configuration from environment
@@ -68,9 +67,12 @@ async def oauth_login(request: Request) -> RedirectResponse:
     params = {
         "client_id": OAUTH_CLIENT_ID,
         "redirect_uri": get_redirect_uri(request),
-        "scope": "openid profile",
+        "scope": "openid profile read-repos write-repos contribute-repos manage-repos inference-api jobs write-discussions",
         "response_type": "code",
         "state": state,
+        "orgIds": os.environ.get(
+            "HF_OAUTH_ORG_ID", "698dbf55845d85df163175f1"
+        ),  # ml-agent-explorers
     }
     auth_url = f"{OPENID_PROVIDER_URL}/oauth/authorize?{urlencode(params)}"
 

frontend/src/components/Chat/AssistantMessage.tsx

@@ -1,5 +1,4 @@
-import { Box, Stack, Avatar, Typography } from '@mui/material';
-import SmartToyOutlinedIcon from '@mui/icons-material/SmartToyOutlined';
+import { Box, Stack, Typography } from '@mui/material';
 import MarkdownContent from './MarkdownContent';
 import ToolCallGroup from './ToolCallGroup';
 import type { Message } from '@/types/agent';
@@ -48,61 +47,47 @@ export default function AssistantMessage({ message, isStreaming = false }: Assis
   };
 
   return (
-    <Stack direction="row" spacing={1.5} alignItems="flex-start">
-      <Avatar
-        sx={{
-          width: 28,
-          height: 28,
-          bgcolor: 'primary.main',
-          flexShrink: 0,
-          mt: 0.5,
-        }}
-      >
-        <SmartToyOutlinedIcon sx={{ fontSize: 16, color: '#fff' }} />
-      </Avatar>
-
-      <Box sx={{ flex: 1, minWidth: 0 }}>
-        {/* Role label + timestamp */}
-        <Stack direction="row" alignItems="baseline" spacing={1} sx={{ mb: 0.5 }}>
-          <Typography
-            variant="caption"
-            sx={{
-              fontWeight: 700,
-              fontSize: '0.72rem',
-              color: 'var(--muted-text)',
-              textTransform: 'uppercase',
-              letterSpacing: '0.04em',
-            }}
-          >
-            Assistant
-          </Typography>
-          <Typography
-            variant="caption"
-            sx={{
-              fontSize: '0.66rem',
-              color: 'var(--muted-text)',
-              opacity: 0.6,
-            }}
-          >
-            {new Date(message.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
-          </Typography>
-        </Stack>
-
-        {/* Message bubble */}
-        <Box
+    <Box sx={{ minWidth: 0 }}>
+      {/* Role label + timestamp */}
+      <Stack direction="row" alignItems="baseline" spacing={1} sx={{ mb: 0.5 }}>
+        <Typography
+          variant="caption"
+          sx={{
+            fontWeight: 700,
+            fontSize: '0.72rem',
+            color: 'var(--muted-text)',
+            textTransform: 'uppercase',
+            letterSpacing: '0.04em',
+          }}
+        >
+          Assistant
+        </Typography>
+        <Typography
+          variant="caption"
           sx={{
-            maxWidth: { xs: '95%', md: '85%' },
-            bgcolor: 'var(--surface)',
-            borderRadius: 1.5,
-            borderTopLeftRadius: 4,
-            px: { xs: 1.5, md: 2.5 },
-            py: 1.5,
-            border: '1px solid var(--border)',
+            fontSize: '0.66rem',
+            color: 'var(--muted-text)',
+            opacity: 0.6,
           }}
         >
-          {renderSegments()}
-        </Box>
+          {new Date(message.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+        </Typography>
+      </Stack>
+
+      {/* Message bubble */}
+      <Box
+        sx={{
+          maxWidth: { xs: '95%', md: '85%' },
+          bgcolor: 'var(--surface)',
+          borderRadius: 1.5,
+          borderTopLeftRadius: 4,
+          px: { xs: 1.5, md: 2.5 },
+          py: 1.5,
+          border: '1px solid var(--border)',
+        }}
+      >
+        {renderSegments()}
       </Box>
-    </Stack>
+    </Box>
   );
 }

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/Chat/MarkdownContent.tsx

@@ -94,26 +94,6 @@ const markdownSx: SxProps<Theme> = {
   },
 };
 
-/** Blinking cursor shown at the end of streaming text. */
-const StreamingCursor = () => (
-  <Box
-    component="span"
-    sx={{
-      display: 'inline-block',
-      width: '2px',
-      height: '1.1em',
-      bgcolor: 'var(--text)',
-      ml: '2px',
-      verticalAlign: 'text-bottom',
-      animation: 'cursorBlink 1s step-end infinite',
-      '@keyframes cursorBlink': {
-        '0%, 100%': { opacity: 1 },
-        '50%': { opacity: 0 },
-      },
-    }}
-  />
-);
-
 /**
  * Throttled content for streaming: render the full markdown through
  * ReactMarkdown but only re-parse every ~80ms to avoid layout thrashing.
@@ -175,7 +155,6 @@ export default function MarkdownContent({ content, sx, isStreaming = false }: Ma
   return (
     <Box sx={[markdownSx, ...(Array.isArray(sx) ? sx : sx ? [sx] : [])]}>
       <ReactMarkdown remarkPlugins={remarkPlugins}>{displayContent}</ReactMarkdown>
-      {isStreaming && <StreamingCursor />}
     </Box>
   );
 }

frontend/src/components/Chat/MessageList.tsx

@@ -1,9 +1,7 @@
 import { useEffect, useRef, useMemo, useCallback } from 'react';
-import { Box, Stack, Typography, Avatar } from '@mui/material';
-import SmartToyOutlinedIcon from '@mui/icons-material/SmartToyOutlined';
+import { Box, Stack, Typography } from '@mui/material';
 import MessageBubble from './MessageBubble';
 import ThinkingIndicator from './ThinkingIndicator';
-import MarkdownContent from './MarkdownContent';
 import { useAgentStore } from '@/store/agentStore';
 import { useSessionStore } from '@/store/sessionStore';
 import { apiFetch } from '@/utils/api';
@@ -15,66 +13,48 @@ interface MessageListProps {
   isProcessing: boolean;
 }
 
-const WELCOME_MD = `I'm ready to help you with machine learning tasks using the Hugging Face ecosystem.
-
-**Training & Fine-tuning** — SFT, DPO, GRPO, PPO with TRL · LoRA/PEFT · Submit and monitor jobs on cloud GPUs
-
-**Data** — Find and explore datasets · Process, filter, transform · Push to the Hub
-
-**Models** — Search and discover models · Get details and configs · Deploy for inference
-
-**Research** — Find papers and documentation · Explore code examples · Check APIs and best practices
-
-**Infrastructure** — Run jobs on CPU/GPU instances · Manage repos, branches, PRs · Monitor Spaces and endpoints
+function getGreeting(): string {
+  const h = new Date().getHours();
+  if (h < 12) return 'Morning';
+  if (h < 17) return 'Afternoon';
+  return 'Evening';
+}
 
-What would you like to do?`;
+/** Minimal greeting shown when the conversation is empty. */
+function WelcomeGreeting() {
+  const { user } = useAgentStore();
+  const firstName = user?.name?.split(' ')[0] || user?.username;
+  const greeting = firstName ? `${getGreeting()}, ${firstName}` : getGreeting();
 
-/** Static welcome message rendered when the conversation is empty. */
-function WelcomeMessage() {
   return (
-    <Stack direction="row" spacing={1.5} alignItems="flex-start">
-      <Avatar
+    <Box
+      sx={{
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        py: 8,
+        gap: 1.5,
+      }}
+    >
+      <Typography
         sx={{
-          width: 28,
-          height: 28,
-          bgcolor: 'primary.main',
-          flexShrink: 0,
-          mt: 0.5,
+          fontFamily: 'monospace',
+          fontSize: '1.6rem',
+          color: 'var(--text)',
+          fontWeight: 600,
         }}
       >
-        <SmartToyOutlinedIcon sx={{ fontSize: 16, color: '#fff' }} />
-      </Avatar>
-
-      <Box sx={{ flex: 1, minWidth: 0 }}>
-        <Stack direction="row" alignItems="baseline" spacing={1} sx={{ mb: 0.5 }}>
-          <Typography
-            variant="caption"
-            sx={{
-              fontWeight: 700,
-              fontSize: '0.72rem',
-              color: 'var(--muted-text)',
-              textTransform: 'uppercase',
-              letterSpacing: '0.04em',
-            }}
-          >
-            Assistant
-          </Typography>
-        </Stack>
-        <Box
-          sx={{
-            maxWidth: { xs: '95%', md: '85%' },
-            bgcolor: 'var(--surface)',
-            borderRadius: 1.5,
-            borderTopLeftRadius: 4,
-            px: { xs: 1.5, md: 2.5 },
-            py: 1.5,
-            border: '1px solid var(--border)',
-          }}
-        >
-          <MarkdownContent content={WELCOME_MD} />
-        </Box>
-      </Box>
-    </Stack>
+        {greeting}
+      </Typography>
+      <Typography
+        color="text.secondary"
+        sx={{ fontFamily: 'monospace', fontSize: '0.9rem' }}
+      >
+        Let's build something impressive?
+      </Typography>
+    </Box>
   );
 }
 
@@ -91,8 +71,6 @@ export default function MessageList({ messages, isProcessing }: MessageListProps
   }, []);
 
   // ── Track user scroll intent ────────────────────────────────────
-  // When user scrolls up (>80px from bottom), disable auto-scroll.
-  // When they scroll back to bottom, re-enable it.
   useEffect(() => {
     const el = scrollContainerRef.current;
     if (!el) return;
@@ -112,8 +90,6 @@ export default function MessageList({ messages, isProcessing }: MessageListProps
   }, [messages, isProcessing, scrollToBottom]);
 
   // ── Auto-scroll on DOM mutations (streaming content growth) ─────
-  // This catches token-by-token updates that don't change the messages
-  // array reference (appendToMessage mutates in place).
   useEffect(() => {
     const el = scrollContainerRef.current;
     if (!el) return;
@@ -145,7 +121,6 @@ export default function MessageList({ messages, isProcessing }: MessageListProps
     if (!activeSessionId) return;
     try {
       await apiFetch(`/api/undo/${activeSessionId}`, { method: 'POST' });
-      // Optimistic removal — backend will also confirm via undo_complete WS event
       removeLastTurn(activeSessionId);
     } catch (e) {
       logger.error('Undo failed:', e);
@@ -160,6 +135,8 @@ export default function MessageList({ messages, isProcessing }: MessageListProps
         overflow: 'auto',
         px: { xs: 0.5, sm: 1, md: 2 },
         py: { xs: 2, md: 3 },
+        display: 'flex',
+        flexDirection: 'column',
       }}
     >
       <Stack
@@ -168,12 +145,12 @@ export default function MessageList({ messages, isProcessing }: MessageListProps
           maxWidth: 880,
           mx: 'auto',
           width: '100%',
+          flex: messages.length === 0 && !isProcessing ? 1 : undefined,
         }}
       >
-        {/* Always show the welcome message at the top */}
-        <WelcomeMessage />
-
-        {messages.length > 0 && (
+        {messages.length === 0 && !isProcessing ? (
+          <WelcomeGreeting />
+        ) : (
           messages.map((msg) => (
             <MessageBubble
               key={msg.id}

frontend/src/components/Chat/ThinkingIndicator.tsx

@@ -1,63 +1,48 @@
-import { Box, Stack, Avatar, Typography } from '@mui/material';
-import SmartToyOutlinedIcon from '@mui/icons-material/SmartToyOutlined';
+import { Box, Typography } from '@mui/material';
 
 /** Pulsing dots shown while the agent is processing. */
 export default function ThinkingIndicator() {
   return (
-    <Stack direction="row" spacing={1.5} alignItems="flex-start">
-      <Avatar
+    <Box sx={{ pt: 0.75 }}>
+      <Typography
+        variant="caption"
         sx={{
-          width: 28,
-          height: 28,
-          bgcolor: 'primary.main',
-          flexShrink: 0,
-          mt: 0.5,
+          fontWeight: 700,
+          fontSize: '0.72rem',
+          color: 'var(--muted-text)',
+          textTransform: 'uppercase',
+          letterSpacing: '0.04em',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 0.75,
         }}
       >
-        <SmartToyOutlinedIcon sx={{ fontSize: 16, color: '#fff' }} />
-      </Avatar>
-
-      <Box sx={{ pt: 0.75 }}>
-        <Typography
-          variant="caption"
+        Thinking
+        <Box
+          component="span"
           sx={{
-            fontWeight: 700,
-            fontSize: '0.72rem',
-            color: 'var(--muted-text)',
-            textTransform: 'uppercase',
-            letterSpacing: '0.04em',
-            display: 'flex',
-            alignItems: 'center',
-            gap: 0.75,
+            display: 'inline-flex',
+            gap: '3px',
+            '& span': {
+              width: 4,
+              height: 4,
+              borderRadius: '50%',
+              bgcolor: 'primary.main',
+              animation: 'dotPulse 1.4s ease-in-out infinite',
+            },
+            '& span:nth-of-type(2)': { animationDelay: '0.2s' },
+            '& span:nth-of-type(3)': { animationDelay: '0.4s' },
+            '@keyframes dotPulse': {
+              '0%, 80%, 100%': { opacity: 0.25, transform: 'scale(0.8)' },
+              '40%': { opacity: 1, transform: 'scale(1)' },
+            },
           }}
         >
-          Thinking
-          <Box
-            component="span"
-            sx={{
-              display: 'inline-flex',
-              gap: '3px',
-              '& span': {
-                width: 4,
-                height: 4,
-                borderRadius: '50%',
-                bgcolor: 'primary.main',
-                animation: 'dotPulse 1.4s ease-in-out infinite',
-              },
-              '& span:nth-of-type(2)': { animationDelay: '0.2s' },
-              '& span:nth-of-type(3)': { animationDelay: '0.4s' },
-              '@keyframes dotPulse': {
-                '0%, 80%, 100%': { opacity: 0.25, transform: 'scale(0.8)' },
-                '40%': { opacity: 1, transform: 'scale(1)' },
-              },
-            }}
-          >
-            <span />
-            <span />
-            <span />
-          </Box>
-        </Typography>
-      </Box>
-    </Stack>
+          <span />
+          <span />
+          <span />
+        </Box>
+      </Typography>
+    </Box>
   );
 }

frontend/src/components/Chat/ToolCallGroup.tsx

@@ -195,6 +195,14 @@ export default function ToolCallGroup({ tools }: ToolCallGroupProps) {
           content: String(log.args.script),
           language: 'python',
         });
+        if (log.output) {
+          setPanelTab({
+            id: 'output',
+            title: 'Output',
+            content: log.output,
+            language: 'markdown',
+          });
+        }
         if (log.jobLogs) {
           setPanelTab({
             id: 'logs',
@@ -203,7 +211,8 @@ export default function ToolCallGroup({ tools }: ToolCallGroupProps) {
             language: 'text',
           });
         }
-        setActivePanelTab('script');
+        // Default to output if it exists (most useful), otherwise script
+        setActivePanelTab(log.output ? 'output' : 'script');
         setRightPanelOpen(true);
         setLeftSidebarOpen(false);
         return;
@@ -307,53 +316,6 @@ export default function ToolCallGroup({ tools }: ToolCallGroupProps) {
                   {log.tool}
                 </Typography>
 
-                {/* Quick action links for completed jobs */}
-                {log.completed && log.tool === 'hf_jobs' && !!log.args?.script && (
-                  <Box sx={{ display: 'flex', gap: 0.5 }} onClick={(e) => e.stopPropagation()}>
-                    <Typography
-                      component="span"
-                      onClick={() => handleClick(log)}
-                      sx={{
-                        fontSize: '0.68rem',
-                        color: 'var(--muted-text)',
-                        cursor: 'pointer',
-                        px: 0.75,
-                        py: 0.25,
-                        borderRadius: 0.5,
-                        '&:hover': { color: 'var(--accent-yellow)', bgcolor: 'var(--hover-bg)' },
-                      }}
-                    >
-                      Script
-                    </Typography>
-                    {log.jobLogs && (
-                      <Typography
-                        component="span"
-                        onClick={() => {
-                          clearPanelTabs();
-                          if (log.args?.script) {
-                            setPanelTab({ id: 'script', title: 'Script', content: String(log.args.script), language: 'python' });
-                          }
-                          setPanelTab({ id: 'logs', title: 'Logs', content: log.jobLogs!, language: 'text' });
-                          setActivePanelTab('logs');
-                          setRightPanelOpen(true);
-                          setLeftSidebarOpen(false);
-                        }}
-                        sx={{
-                          fontSize: '0.68rem',
-                          color: 'var(--accent-yellow)',
-                          cursor: 'pointer',
-                          px: 0.75,
-                          py: 0.25,
-                          borderRadius: 0.5,
-                          '&:hover': { bgcolor: 'var(--hover-bg)' },
-                        }}
-                      >
-                        Logs
-                      </Typography>
-                    )}
-                  </Box>
-                )}
-
                 {label && (
                   <Chip
                     label={label}

frontend/src/components/Chat/UserMessage.tsx

@@ -1,5 +1,4 @@
-import { Box, Stack, Typography, Avatar, IconButton, Tooltip } from '@mui/material';
-import PersonOutlineIcon from '@mui/icons-material/PersonOutline';
+import { Box, Stack, Typography, IconButton, Tooltip } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
 import type { Message } from '@/types/agent';
 
@@ -99,19 +98,6 @@ export default function UserMessage({
           {new Date(message.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
         </Typography>
       </Box>
-
-      <Avatar
-        sx={{
-          width: 28,
-          height: 28,
-          bgcolor: 'var(--hover-bg)',
-          border: '1px solid var(--border)',
-          flexShrink: 0,
-          mt: 0.5,
-        }}
-      >
-        <PersonOutlineIcon sx={{ fontSize: 16, color: 'var(--muted-text)' }} />
-      </Avatar>
     </Stack>
   );
 }

frontend/src/components/CodePanel/CodePanel.tsx

@@ -1,5 +1,5 @@
-import { useRef, useEffect, useMemo } from 'react';
-import { Box, Stack, Typography, IconButton } from '@mui/material';
+import { useRef, useEffect, useMemo, useState, useCallback } from 'react';
+import { Box, Stack, Typography, IconButton, Button, Tooltip } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
 import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
@@ -7,6 +7,10 @@ import PlayCircleOutlineIcon from '@mui/icons-material/PlayCircleOutline';
 import CodeIcon from '@mui/icons-material/Code';
 import TerminalIcon from '@mui/icons-material/Terminal';
 import ArticleIcon from '@mui/icons-material/Article';
+import EditIcon from '@mui/icons-material/Edit';
+import UndoIcon from '@mui/icons-material/Undo';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import CheckIcon from '@mui/icons-material/Check';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vscDarkPlus, vs } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import ReactMarkdown from 'react-markdown';
@@ -92,10 +96,15 @@ const markdownSx = {
 // ── Component ────────────────────────────────────────────────────
 
 export default function CodePanel() {
-  const { panelContent, panelTabs, activePanelTab, setActivePanelTab, removePanelTab, plan } =
+  const { panelContent, panelTabs, activePanelTab, setActivePanelTab, removePanelTab, plan, updatePanelTabContent, setEditedScript } =
     useAgentStore();
   const { setRightPanelOpen, themeMode } = useLayoutStore();
   const scrollRef = useRef<HTMLDivElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const [isEditing, setIsEditing] = useState(false);
+  const [editedContent, setEditedContent] = useState('');
+  const [originalContent, setOriginalContent] = useState('');
+  const [copied, setCopied] = useState(false);
 
   const activeTab = panelTabs.find((t) => t.id === activePanelTab);
   const currentContent = activeTab || panelContent;
@@ -104,6 +113,66 @@ export default function CodePanel() {
   const isDark = themeMode === 'dark';
   const syntaxTheme = isDark ? vscDarkPlus : vs;
 
+  // Check if this is an editable script tab
+  const isEditableScript = activeTab?.id === 'script' && activeTab?.language === 'python';
+  const hasUnsavedChanges = isEditing && editedContent !== originalContent;
+
+  // Sync edited content when switching tabs or content changes
+  useEffect(() => {
+    if (currentContent?.content && isEditableScript) {
+      setOriginalContent(currentContent.content);
+      if (!isEditing) {
+        setEditedContent(currentContent.content);
+      }
+    }
+  }, [currentContent?.content, isEditableScript, isEditing]);
+
+  // Exit editing when switching away from script tab
+  useEffect(() => {
+    if (!isEditableScript && isEditing) {
+      setIsEditing(false);
+    }
+  }, [isEditableScript, isEditing]);
+
+  const handleStartEdit = useCallback(() => {
+    if (currentContent?.content) {
+      setEditedContent(currentContent.content);
+      setOriginalContent(currentContent.content);
+      setIsEditing(true);
+      setTimeout(() => textareaRef.current?.focus(), 0);
+    }
+  }, [currentContent?.content]);
+
+  const handleCancelEdit = useCallback(() => {
+    setEditedContent(originalContent);
+    setIsEditing(false);
+  }, [originalContent]);
+
+  const handleSaveEdit = useCallback(() => {
+    if (activeTab && editedContent !== originalContent) {
+      updatePanelTabContent(activeTab.id, editedContent);
+      const toolCallId = activeTab.parameters?.tool_call_id as string | undefined;
+      if (toolCallId) {
+        setEditedScript(toolCallId, editedContent);
+      }
+      setOriginalContent(editedContent);
+    }
+    setIsEditing(false);
+  }, [activeTab, editedContent, originalContent, updatePanelTabContent, setEditedScript]);
+
+  const handleCopy = useCallback(async () => {
+    const contentToCopy = isEditing ? editedContent : (currentContent?.content || '');
+    if (contentToCopy) {
+      try {
+        await navigator.clipboard.writeText(contentToCopy);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+      } catch (err) {
+        console.error('Failed to copy:', err);
+      }
+    }
+  }, [isEditing, editedContent, currentContent?.content]);
+
   const displayContent = useMemo(() => {
     if (!currentContent?.content) return '';
     if (!currentContent.language || currentContent.language === 'text') {
@@ -147,6 +216,30 @@ export default function CodePanel() {
       );
     }
 
+    // Editing mode: show textarea
+    if (isEditing && isEditableScript) {
+      return (
+        <textarea
+          ref={textareaRef}
+          value={editedContent}
+          onChange={(e) => setEditedContent(e.target.value)}
+          spellCheck={false}
+          style={{
+            width: '100%',
+            height: '100%',
+            background: 'transparent',
+            border: 'none',
+            outline: 'none',
+            resize: 'none',
+            color: 'var(--text)',
+            fontFamily: '"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, monospace',
+            fontSize: '13px',
+            lineHeight: 1.55,
+          }}
+        />
+      );
+    }
+
     if (currentContent.language === 'python') return renderSyntaxBlock('python');
     if (currentContent.language === 'json') return renderSyntaxBlock('json');
 
@@ -247,9 +340,94 @@ export default function CodePanel() {
           </Typography>
         )}
 
-        <IconButton size="small" onClick={() => setRightPanelOpen(false)} sx={{ color: 'var(--muted-text)' }}>
-          <CloseIcon fontSize="small" />
-        </IconButton>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+          {/* Copy button */}
+          {currentContent?.content && (
+            <Tooltip title={copied ? 'Copied!' : 'Copy'} placement="top">
+              <IconButton
+                size="small"
+                onClick={handleCopy}
+                sx={{
+                  color: copied ? 'var(--accent-green)' : 'var(--muted-text)',
+                  '&:hover': {
+                    color: 'var(--accent-yellow)',
+                    bgcolor: 'var(--hover-bg)',
+                  },
+                }}
+              >
+                {copied ? <CheckIcon sx={{ fontSize: 18 }} /> : <ContentCopyIcon sx={{ fontSize: 18 }} />}
+              </IconButton>
+            </Tooltip>
+          )}
+          {/* Edit controls for script tab */}
+          {isEditableScript && !isEditing && (
+            <Button
+              size="small"
+              startIcon={<EditIcon sx={{ fontSize: 14 }} />}
+              onClick={handleStartEdit}
+              sx={{
+                textTransform: 'none',
+                color: 'var(--muted-text)',
+                fontSize: '0.75rem',
+                py: 0.5,
+                '&:hover': {
+                  color: 'var(--accent-yellow)',
+                  bgcolor: 'var(--hover-bg)',
+                },
+              }}
+            >
+              Edit
+            </Button>
+          )}
+          {isEditing && (
+            <>
+              <Button
+                size="small"
+                startIcon={<UndoIcon sx={{ fontSize: 14 }} />}
+                onClick={handleCancelEdit}
+                sx={{
+                  textTransform: 'none',
+                  color: 'var(--muted-text)',
+                  fontSize: '0.75rem',
+                  py: 0.5,
+                  '&:hover': {
+                    color: 'var(--accent-red)',
+                    bgcolor: 'var(--hover-bg)',
+                  },
+                }}
+              >
+                Cancel
+              </Button>
+              <Button
+                size="small"
+                variant="contained"
+                onClick={handleSaveEdit}
+                disabled={!hasUnsavedChanges}
+                sx={{
+                  textTransform: 'none',
+                  fontSize: '0.75rem',
+                  py: 0.5,
+                  bgcolor: hasUnsavedChanges ? 'var(--accent-green)' : 'var(--hover-bg)',
+                  color: hasUnsavedChanges ? '#000' : 'var(--muted-text)',
+                  '&:hover': {
+                    bgcolor: hasUnsavedChanges ? 'var(--accent-green)' : 'var(--hover-bg)',
+                    opacity: 0.9,
+                  },
+                  '&.Mui-disabled': {
+                    bgcolor: 'var(--hover-bg)',
+                    color: 'var(--muted-text)',
+                    opacity: 0.5,
+                  },
+                }}
+              >
+                Save
+              </Button>
+            </>
+          )}
+          <IconButton size="small" onClick={() => setRightPanelOpen(false)} sx={{ color: 'var(--muted-text)' }}>
+            <CloseIcon fontSize="small" />
+          </IconButton>
+        </Box>
       </Box>
 
       {/* ── Main content area ─────────────────────────────────── */}

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"

frontend/src/hooks/useAgentWebSocket.ts

@@ -285,6 +285,18 @@ export function useAgentWebSocket({
 
             updateTraceLog(toolCallId, toolName, updates);
             updateCurrentTurnTrace(sessionId);
+
+            // Add output tab so the user can see results (especially errors)
+            setPanelTab({
+              id: 'output',
+              title: 'Output',
+              content: output,
+              language: 'markdown',
+            });
+            // Auto-switch to output tab on failure so errors are immediately visible
+            if (!success) {
+              setActivePanelTab('output');
+            }
           }
 
           // Don't create message bubbles for tool outputs - they only show in trace logs

frontend/src/store/agentStore.ts

@@ -36,6 +36,7 @@ interface AgentStore {
   activePanelTab: string | null;
   plan: PlanItem[];
   currentTurnMessageId: string | null; // Track the current turn's assistant message
+  editedScripts: Record<string, string>; // tool_call_id -> edited content
 
   // Actions
   addMessage: (sessionId: string, message: Message) => void;
@@ -51,6 +52,7 @@ interface AgentStore {
   clearTraceLogs: () => void;
   setPanelContent: (content: { title: string; content: string; language?: string; parameters?: Record<string, unknown> } | null) => void;
   setPanelTab: (tab: PanelTab) => void;
+  updatePanelTabContent: (tabId: string, content: string) => void;
   setActivePanelTab: (tabId: string) => void;
   clearPanelTabs: () => void;
   removePanelTab: (tabId: string) => void;
@@ -58,6 +60,9 @@ interface AgentStore {
   setCurrentTurnMessageId: (id: string | null) => void;
   updateCurrentTurnTrace: (sessionId: string) => void;
   showToolOutput: (log: TraceLog) => void;
+  setEditedScript: (toolCallId: string, content: string) => void;
+  getEditedScript: (toolCallId: string) => string | undefined;
+  clearEditedScripts: () => void;
   /** Append a streaming delta to an existing message. */
   appendToMessage: (sessionId: string, messageId: string, delta: string) => void;
   /** Remove all messages for a session (also clears from localStorage). */
@@ -82,6 +87,7 @@ export const useAgentStore = create<AgentStore>()(
   activePanelTab: null,
   plan: [],
   currentTurnMessageId: null,
+  editedScripts: {},
 
   addMessage: (sessionId: string, message: Message) => {
     set((state) => {
@@ -199,6 +205,15 @@ export const useAgentStore = create<AgentStore>()(
     });
   },
 
+  updatePanelTabContent: (tabId: string, content: string) => {
+    set((state) => {
+      const newTabs = state.panelTabs.map(tab =>
+        tab.id === tabId ? { ...tab, content } : tab
+      );
+      return { panelTabs: newTabs };
+    });
+  },
+
   setActivePanelTab: (tabId: string) => {
     set({ activePanelTab: tabId });
   },
@@ -238,22 +253,44 @@ export const useAgentStore = create<AgentStore>()(
     const latestTools = state.traceLogs.length > 0 ? [...state.traceLogs] : undefined;
     if (!latestTools) return;
 
+    // Build a lookup of the latest state for each tool by id
+    const toolById = new Map(latestTools.map(t => [t.id, t]));
+
     const updatedMessages = currentMessages.map((msg) => {
       if (msg.id !== state.currentTurnMessageId) return msg;
 
       const segments = msg.segments ? [...msg.segments] : [];
-      const lastToolsIdx = segments.map((s) => s.type).lastIndexOf('tools');
-
-      if (lastToolsIdx >= 0 && lastToolsIdx === segments.length - 1) {
-        // Last segment IS a tools segment — update it in place
-        segments[lastToolsIdx] = { type: 'tools', tools: latestTools };
-      } else if (lastToolsIdx >= 0) {
-        // A tools segment exists but is NOT last (text came after it).
-        // Append a NEW tools segment at the end.
-        segments.push({ type: 'tools', tools: latestTools });
-      } else {
-        // No tools segment at all — create one at the end.
-        segments.push({ type: 'tools', tools: latestTools });
+
+      // First pass: update existing tools in their original segments
+      const placedToolIds = new Set<string>();
+      for (let i = 0; i < segments.length; i++) {
+        if (segments[i].type === 'tools' && segments[i].tools) {
+          segments[i] = {
+            ...segments[i],
+            tools: segments[i].tools!.map(t => {
+              placedToolIds.add(t.id);
+              return toolById.get(t.id) || t;
+            }),
+          };
+        }
+      }
+
+      // Collect only genuinely new tools (not yet in any segment)
+      const newTools = latestTools.filter(t => !placedToolIds.has(t.id));
+
+      if (newTools.length > 0) {
+        const lastToolsIdx = segments.map((s) => s.type).lastIndexOf('tools');
+
+        if (lastToolsIdx >= 0 && lastToolsIdx === segments.length - 1) {
+          // Last segment is tools — append new tools to it
+          segments[lastToolsIdx] = {
+            ...segments[lastToolsIdx],
+            tools: [...(segments[lastToolsIdx].tools || []), ...newTools],
+          };
+        } else {
+          // Text came after previous tools — create a new segment with only new tools
+          segments.push({ type: 'tools', tools: newTools });
+        }
       }
 
       return { ...msg, segments };
@@ -301,6 +338,20 @@ export const useAgentStore = create<AgentStore>()(
     });
   },
 
+  setEditedScript: (toolCallId: string, content: string) => {
+    set((state) => ({
+      editedScripts: { ...state.editedScripts, [toolCallId]: content },
+    }));
+  },
+
+  getEditedScript: (toolCallId: string) => {
+    return get().editedScripts[toolCallId];
+  },
+
+  clearEditedScripts: () => {
+    set({ editedScripts: {} });
+  },
+
   appendToMessage: (sessionId: string, messageId: string, delta: string) => {
     set((state) => {
       const messages = state.messagesBySession[sessionId] || [];

frontend/src/theme.ts

@@ -176,8 +176,8 @@ function makeTextField() {
 export const darkTheme = createTheme({
   palette: {
     mode: 'dark',
-    primary: { main: '#FF9D00' },
-    secondary: { main: '#C7A500' },
+    primary: { main: '#FF9D00', light: '#FFB740', dark: '#E08C00', contrastText: '#fff' },
+    secondary: { main: '#FF9D00' },
     background: { default: '#0B0D10', paper: '#0F1316' },
     text: { primary: '#E6EEF8', secondary: '#98A0AA' },
     divider: 'rgba(255,255,255,0.03)',
@@ -199,8 +199,8 @@ export const darkTheme = createTheme({
 export const lightTheme = createTheme({
   palette: {
     mode: 'light',
-    primary: { main: '#FF9D00' },
-    secondary: { main: '#B8960A' },
+    primary: { main: '#FF9D00', light: '#FFB740', dark: '#E08C00', contrastText: '#fff' },
+    secondary: { main: '#E08C00' },
     background: { default: '#FFFFFF', paper: '#F7F8FA' },
     text: { primary: '#1A1A2E', secondary: '#6B7280' },
     divider: 'rgba(0,0,0,0.08)',