Add IMAGE agent, web tools for AGENT, and fix conversation history

- New IMAGE notebook type with HuggingFace image generation/editing tools
(generate_image, edit_image, read_image_url via FLUX.1 models)
- New backend/image.py streaming handler with image store and VLM context
resize (512px JPEG thumbnails to avoid token overflow)
- New backend/tools.py centralizing all tool definitions and execution functions
- New backend/agent.py with web tools (web_search, read_url, screenshot_url)
- Image model settings use dropdowns populated from configured models
- Settings panel shows active settings.json file path
- Fix conversation history: sub-notebook results now update the tool response
DOM element so follow-up questions have full context

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

backend/agent.py

@@ -0,0 +1,261 @@
+"""
+Agent notebook backend - autonomous agent with web tools (search, read, screenshot).
+
+Uses the same tool-calling loop pattern as code.py:
+  LLM call → parse tool_calls → execute → update history → repeat
+"""
+import json
+import logging
+import re
+import time
+from typing import List, Dict, Optional
+
+from tools import (
+    web_search, read_url, screenshot_url,
+    execute_web_search, execute_read_url, execute_screenshot_url,
+)
+
+logger = logging.getLogger(__name__)
+
+TOOLS = [web_search, read_url, screenshot_url]
+
+MAX_TURNS = 20
+MAX_RETRIES = 3
+RETRY_DELAYS = [2, 5, 10]
+
+
+def parse_llm_error(error: Exception) -> dict:
+    """Parse LLM error to extract useful message for frontend."""
+    error_str = str(error)
+    try:
+        json_match = re.search(r'\{.*\}', error_str)
+        if json_match:
+            error_data = json.loads(json_match.group())
+            return {
+                "message": error_data.get("message", error_str),
+                "retryable": error_data.get("type") == "too_many_requests_error" or "429" in error_str
+            }
+    except:
+        pass
+
+    retryable = any(x in error_str.lower() for x in ["429", "rate limit", "too many requests", "overloaded"])
+    return {"message": error_str, "retryable": retryable}
+
+
+def execute_tool(tool_name: str, args: dict, serper_key: str) -> dict:
+    """
+    Execute a tool by name and return result dict.
+
+    Returns:
+        dict with keys:
+        - "content": str result for the LLM
+        - "image": optional base64 PNG (for screenshot_url)
+        - "display": dict with display-friendly data for frontend
+    """
+    if tool_name == "web_search":
+        query = args.get("query", "")
+        num_results = args.get("num_results", 5)
+        result_str = execute_web_search(query, serper_key, num_results)
+        return {
+            "content": result_str,
+            "display": {"type": "search", "query": query, "results": result_str}
+        }
+
+    elif tool_name == "read_url":
+        url = args.get("url", "")
+        content = execute_read_url(url)
+        return {
+            "content": content,
+            "display": {"type": "page", "url": url, "length": len(content)}
+        }
+
+    elif tool_name == "screenshot_url":
+        url = args.get("url", "")
+        base64_png = execute_screenshot_url(url)
+        if base64_png:
+            return {
+                "content": "Screenshot captured successfully. The image is attached.",
+                "image": base64_png,
+                "display": {"type": "screenshot", "url": url}
+            }
+        else:
+            return {
+                "content": f"Failed to take screenshot of {url}. The page may require JavaScript or be inaccessible.",
+                "display": {"type": "screenshot_error", "url": url}
+            }
+
+    return {"content": f"Unknown tool: {tool_name}", "display": {"type": "error"}}
+
+
+def stream_agent_execution(
+    client,
+    model: str,
+    messages: List[Dict],
+    serper_key: str,
+    extra_params: Optional[Dict] = None
+):
+    """
+    Run the agent tool-calling loop.
+
+    Yields dicts with SSE event types:
+      - thinking: { content }
+      - content: { content }
+      - tool_start: { tool, args }
+      - tool_result: { tool, result, image? }
+      - result_preview: { content }
+      - result: { content }
+      - generating: {}
+      - retry: { attempt, max_attempts, delay, message }
+      - error: { content }
+      - done: {}
+    """
+    turns = 0
+    done = False
+
+    while not done and turns < MAX_TURNS:
+        turns += 1
+
+        # --- LLM call with retry ---
+        response = None
+        last_error = None
+
+        for attempt in range(MAX_RETRIES):
+            try:
+                call_params = {
+                    "messages": messages,
+                    "model": model,
+                    "tools": TOOLS,
+                    "tool_choice": "auto",
+                }
+                if extra_params:
+                    call_params["extra_body"] = extra_params
+                response = client.chat.completions.create(**call_params)
+                break
+            except Exception as e:
+                last_error = e
+                error_info = parse_llm_error(e)
+                if attempt < MAX_RETRIES - 1 and error_info["retryable"]:
+                    delay = RETRY_DELAYS[attempt]
+                    yield {
+                        "type": "retry",
+                        "attempt": attempt + 1,
+                        "max_attempts": MAX_RETRIES,
+                        "delay": delay,
+                        "message": error_info["message"],
+                    }
+                    time.sleep(delay)
+                else:
+                    yield {"type": "error", "content": error_info["message"]}
+                    return
+
+        if response is None:
+            yield {"type": "error", "content": f"LLM error after {MAX_RETRIES} attempts: {str(last_error)}"}
+            return
+
+        # --- Parse response ---
+        assistant_message = response.choices[0].message
+        content = assistant_message.content or ""
+        tool_calls = assistant_message.tool_calls or []
+
+        # Check for <result> tags
+        result_match = re.search(r'<result>(.*?)</result>', content, re.DOTALL | re.IGNORECASE)
+        result_content = None
+        thinking_content = content
+
+        if result_match:
+            result_content = result_match.group(1).strip()
+            thinking_content = re.sub(r'<result>.*?</result>', '', content, flags=re.DOTALL | re.IGNORECASE).strip()
+
+        # Send thinking/content
+        if thinking_content.strip():
+            if tool_calls:
+                yield {"type": "thinking", "content": thinking_content}
+            else:
+                yield {"type": "content", "content": thinking_content}
+
+        # Send result preview
+        if result_content:
+            yield {"type": "result_preview", "content": result_content}
+
+        # --- Handle tool calls ---
+        if tool_calls:
+            for tool_call in tool_calls:
+                func_name = tool_call.function.name
+
+                # Parse arguments
+                try:
+                    args = json.loads(tool_call.function.arguments)
+                except json.JSONDecodeError as e:
+                    output = f"Error parsing arguments: {e}"
+                    messages.append({
+                        "role": "assistant",
+                        "content": content,
+                        "tool_calls": [{"id": tool_call.id, "type": "function", "function": {"name": func_name, "arguments": tool_call.function.arguments}}]
+                    })
+                    messages.append({"role": "tool", "tool_call_id": tool_call.id, "content": output})
+                    yield {"type": "error", "content": output}
+                    continue
+
+                # Signal tool start (include IDs for history reconstruction)
+                yield {
+                    "type": "tool_start",
+                    "tool": func_name,
+                    "args": args,
+                    "tool_call_id": tool_call.id,
+                    "arguments": tool_call.function.arguments,
+                    "thinking": content,
+                }
+
+                # Execute tool
+                result = execute_tool(func_name, args, serper_key)
+
+                # Build tool response message for LLM
+                if result.get("image"):
+                    # For screenshots, send image as vision content so LLM can see it
+                    tool_response_content = [
+                        {"type": "text", "text": result["content"]},
+                        {"type": "image_url", "image_url": {"url": f"data:image/png;base64,{result['image']}"}}
+                    ]
+                else:
+                    tool_response_content = result["content"]
+
+                tool_response_str = tool_response_content if isinstance(tool_response_content, str) else json.dumps(tool_response_content)
+
+                # Add to message history
+                messages.append({
+                    "role": "assistant",
+                    "content": content,
+                    "tool_calls": [{"id": tool_call.id, "type": "function", "function": {"name": func_name, "arguments": tool_call.function.arguments}}]
+                })
+                messages.append({
+                    "role": "tool",
+                    "tool_call_id": tool_call.id,
+                    "content": tool_response_str
+                })
+
+                # Signal tool result to frontend (include response for history)
+                tool_result_event = {
+                    "type": "tool_result",
+                    "tool": func_name,
+                    "tool_call_id": tool_call.id,
+                    "result": result.get("display", {}),
+                    "response": tool_response_str,
+                }
+                if result.get("image"):
+                    tool_result_event["image"] = result["image"]
+                yield tool_result_event
+
+        else:
+            # No tool calls — we're done
+            messages.append({"role": "assistant", "content": content})
+            done = True
+
+        # Send result if found
+        if result_content:
+            yield {"type": "result", "content": result_content}
+
+        # Signal between-turn processing
+        if not done:
+            yield {"type": "generating"}
+
+    yield {"type": "done"}

backend/agents.py

@@ -74,13 +74,33 @@ AGENT_REGISTRY = {
     "agent": {
         "label": "AGENT",
         "system_prompt": (
-            "You are an autonomous agent assistant specialized in breaking down and executing multi-step tasks.\n\n"
-            "Your role is to:\n"
-            "- Understand complex tasks and break them down into clear steps\n"
-            "- Execute tasks methodically\n"
-            "- Keep track of progress and next steps\n"
-            "- Provide clear status updates\n\n"
-            "Focus on being proactive, organized, and thorough in completing multi-step workflows.\n"
+            "You are an autonomous agent with web access, specialized in research and multi-step tasks.\n\n"
+            "## Available Tools\n\n"
+            "You have three tools:\n"
+            "- **web_search(query)**: Search Google. Returns titles, URLs, and snippets. "
+            "Use this first to discover information and find relevant pages.\n"
+            "- **read_url(url)**: Fetch a web page and extract its content as clean markdown (includes images). "
+            "Use this when you need detailed content from a specific page.\n"
+            "- **screenshot_url(url)**: Take a screenshot of a web page. "
+            "Use this when you need to see the visual layout, images, charts, or design.\n\n"
+            "## Strategy\n\n"
+            "1. **Search first** — use web_search to find relevant pages\n"
+            "2. **Evaluate snippets** — often the search snippets contain enough info to answer\n"
+            "3. **Read selectively** — only use read_url on 1-3 most relevant pages when you need more detail\n"
+            "4. **Screenshot when visual** — use screenshot_url when images, charts, or layout matter\n"
+            "5. **Synthesize** — combine findings into a clear, concise answer\n\n"
+            "## Guidelines\n\n"
+            "- Be efficient with tool calls — don't read every search result\n"
+            "- Break complex tasks into steps and explain your reasoning\n"
+            "- Cite sources with URLs when presenting findings\n\n"
+            "## CRITICAL: You MUST provide a <result> tag\n\n"
+            "When you have completed the task, you MUST provide a brief summary using the <result> tag. "
+            "This is REQUIRED - without it, your work will not be visible in the command center.\n\n"
+            "Keep results SHORT - 1-3 sentences summarizing what you found or did.\n\n"
+            "Example:\n"
+            "<result>\n"
+            "Python 3.13 was released on Oct 7, 2024 with key features including ...\n"
+            "</result>\n"
         ),
         "tool": {
             "type": "function",
@@ -105,7 +125,7 @@ AGENT_REGISTRY = {
         },
         "tool_arg": "task",
         "has_counter": True,
-        "in_menu": False,
+        "in_menu": True,
         "in_launcher": True,
         "placeholder": "Enter message...",
     },
@@ -272,6 +292,65 @@ AGENT_REGISTRY = {
         "in_launcher": True,
         "placeholder": "Enter message...",
     },
+
+    "image": {
+        "label": "IMAGE",
+        "system_prompt": (
+            "You are a creative AI assistant with access to image generation and editing tools.\n\n"
+            "## Available Tools\n\n"
+            "- **generate_image(prompt)**: Generate a new image from a text description. "
+            "Returns an image reference (e.g., 'image_1') that you can see.\n"
+            "- **edit_image(prompt, source)**: Edit or transform an existing image. "
+            "The source can be a URL or an image reference from a previous tool call (e.g., 'image_1').\n"
+            "- **read_image_url(url)**: Download an image from a URL. "
+            "Returns an image reference that you can see and use with edit_image.\n\n"
+            "## Strategy\n\n"
+            "1. If the user provides an image URL, use read_image_url first to load it\n"
+            "2. Use generate_image for creating new images from text descriptions\n"
+            "3. Use edit_image to transform existing images (style transfer, edits, variations)\n"
+            "4. You can see all generated/loaded images — describe what you see and iterate if needed\n"
+            "5. Write detailed, descriptive prompts for best results\n\n"
+            "## Guidelines\n\n"
+            "- Be creative and descriptive in your image prompts\n"
+            "- When editing, reference the source image by its name (e.g., 'image_1')\n"
+            "- Describe what you see in generated images to confirm they match the request\n\n"
+            "## CRITICAL: You MUST provide a <result> tag\n\n"
+            "When you have completed the task, you MUST provide a brief summary using the <result> tag. "
+            "This is REQUIRED - without it, your work will not be visible in the command center.\n\n"
+            "Include image references in your result using self-closing tags like <image_1> (NOT </image_1>).\n\n"
+            "Example:\n"
+            "<result>\n"
+            "Here's the comic version of your image:\n\n"
+            "<image_2>\n"
+            "</result>\n"
+        ),
+        "tool": {
+            "type": "function",
+            "function": {
+                "name": "launch_image_notebook",
+                "description": "Launch an image notebook for generating or editing images using AI models. Use this for creating images from text, applying style transfers, editing photos, or any visual content creation.",
+                "parameters": {
+                    "type": "object",
+                    "properties": {
+                        "task": {
+                            "type": "string",
+                            "description": "The image task or description. Should contain all necessary context including any image URLs."
+                        },
+                        "task_id": {
+                            "type": "string",
+                            "description": "A 2-3 word summary of the task, separated by dashes."
+                        }
+                    },
+                    "required": ["task", "task_id"]
+                }
+            }
+        },
+        "tool_arg": "task",
+        "has_counter": True,
+        "in_menu": True,
+        "in_launcher": True,
+        "placeholder": "Describe an image or paste a URL...",
+    },
 }
 
 

backend/code.py

@@ -8,77 +8,11 @@ import re
 from typing import List, Dict, Optional
 from e2b_code_interpreter import Sandbox
 
-logger = logging.getLogger(__name__)
+from tools import execute_code, upload_files, download_files
 
+logger = logging.getLogger(__name__)
 
-TOOLS = [
-    {
-        "type": "function",
-        "function": {
-            "name": "execute_code",
-            "description": "Execute Python code in a stateful environment. Variables and imports persist between executions.",
-            "parameters": {
-                "type": "object",
-                "properties": {
-                    "code": {
-                        "type": "string",
-                        "description": "The Python code to execute."
-                    }
-                },
-                "required": ["code"]
-            }
-        }
-    },
-    {
-        "type": "function",
-        "function": {
-            "name": "upload_files",
-            "description": "Upload files from the local workspace to the code execution environment for analysis. Files will be available at /home/user/<filename>. Use this to load data files, scripts, or any files you need to analyze.",
-            "parameters": {
-                "type": "object",
-                "properties": {
-                    "paths": {
-                        "type": "array",
-                        "items": {"type": "string"},
-                        "description": "List of file paths relative to the workspace root (e.g., ['data/sales.csv', 'config.json'])"
-                    }
-                },
-                "required": ["paths"]
-            }
-        }
-    },
-    {
-        "type": "function",
-        "function": {
-            "name": "download_files",
-            "description": "Download files from the code execution environment to the local workspace. Use this to save generated files, processed data, or any output files you want to keep.",
-            "parameters": {
-                "type": "object",
-                "properties": {
-                    "files": {
-                        "type": "array",
-                        "items": {
-                            "type": "object",
-                            "properties": {
-                                "sandbox_path": {
-                                    "type": "string",
-                                    "description": "Path in the sandbox (e.g., '/home/user/output.csv')"
-                                },
-                                "local_path": {
-                                    "type": "string",
-                                    "description": "Destination path relative to workspace (e.g., 'results/output.csv')"
-                                }
-                            },
-                            "required": ["sandbox_path", "local_path"]
-                        },
-                        "description": "List of files to download with their sandbox and local paths"
-                    }
-                },
-                "required": ["files"]
-            }
-        }
-    }
-]
+TOOLS = [execute_code, upload_files, download_files]
 
 MAX_TURNS = 40
 MAX_RETRIES = 3  # Maximum retries for LLM calls

backend/image.py

@@ -0,0 +1,376 @@
+"""
+Image notebook backend — multimodal agent with HuggingFace image generation tools.
+
+Uses the same tool-calling loop pattern as agent.py:
+  LLM call → parse tool_calls → execute → update history → repeat
+
+Key difference: maintains an image store (Dict[str, str]) mapping names like
+"image_1" to base64 data, so the VLM can reference images across tool calls
+without passing huge base64 strings in arguments.
+"""
+import base64
+import json
+import logging
+import re
+import time
+from typing import List, Dict, Optional
+
+try:
+    from .tools import (
+        generate_image, edit_image, read_image_url,
+        execute_generate_image, execute_edit_image, execute_read_image_url,
+    )
+except ImportError:
+    from tools import (
+        generate_image, edit_image, read_image_url,
+        execute_generate_image, execute_edit_image, execute_read_image_url,
+    )
+
+logger = logging.getLogger(__name__)
+
+TOOLS = [generate_image, edit_image, read_image_url]
+
+# Max dimension for images sent to the VLM context (keeps token count manageable)
+VLM_IMAGE_MAX_DIM = 512
+VLM_IMAGE_JPEG_QUALITY = 70
+
+
+def resize_image_for_vlm(base64_png: str) -> str:
+    """Resize and compress an image for VLM context to avoid token overflow.
+
+    Takes a full-res base64 PNG and returns a smaller base64 JPEG thumbnail
+    that fits within VLM_IMAGE_MAX_DIM on its longest side.
+    """
+    try:
+        from PIL import Image
+        import io as _io
+
+        img_bytes = base64.b64decode(base64_png)
+        img = Image.open(_io.BytesIO(img_bytes))
+
+        # Resize if larger than max dimension
+        if max(img.size) > VLM_IMAGE_MAX_DIM:
+            img.thumbnail((VLM_IMAGE_MAX_DIM, VLM_IMAGE_MAX_DIM), Image.LANCZOS)
+
+        # Convert to RGB (JPEG doesn't support alpha)
+        if img.mode in ("RGBA", "P"):
+            img = img.convert("RGB")
+
+        # Save as JPEG for much smaller base64
+        buffer = _io.BytesIO()
+        img.save(buffer, format="JPEG", quality=VLM_IMAGE_JPEG_QUALITY)
+        return base64.b64encode(buffer.getvalue()).decode("utf-8")
+    except Exception as e:
+        logger.error(f"Failed to resize image for VLM: {e}")
+        # Fall back to original — better to try than to lose the image entirely
+        return base64_png
+
+MAX_TURNS = 20
+MAX_RETRIES = 3
+RETRY_DELAYS = [2, 5, 10]
+
+
+def parse_llm_error(error: Exception) -> dict:
+    """Parse LLM error to extract useful message for frontend."""
+    error_str = str(error)
+    try:
+        json_match = re.search(r'\{.*\}', error_str)
+        if json_match:
+            error_data = json.loads(json_match.group())
+            return {
+                "message": error_data.get("message", error_str),
+                "retryable": error_data.get("type") == "too_many_requests_error" or "429" in error_str
+            }
+    except:
+        pass
+
+    retryable = any(x in error_str.lower() for x in ["429", "rate limit", "too many requests", "overloaded"])
+    return {"message": error_str, "retryable": retryable}
+
+
+def execute_tool(tool_name: str, args: dict, hf_token: str, image_store: dict, image_counter: int, default_gen_model: str = None, default_edit_model: str = None) -> dict:
+    """
+    Execute a tool by name and return result dict.
+
+    Returns:
+        dict with keys:
+        - "content": str result for the LLM
+        - "image": optional base64 PNG
+        - "image_name": optional image reference name (e.g., "image_1")
+        - "display": dict with display-friendly data for frontend
+        - "image_counter": updated counter
+    """
+    if tool_name == "generate_image":
+        prompt = args.get("prompt", "")
+        model = args.get("model") or default_gen_model or "black-forest-labs/FLUX.1-schnell"
+        base64_png = execute_generate_image(prompt, hf_token, model)
+
+        if base64_png:
+            image_counter += 1
+            name = f"image_{image_counter}"
+            image_store[name] = base64_png
+            return {
+                "content": f"Image generated successfully as '{name}'. The image is attached.",
+                "image": base64_png,
+                "image_name": name,
+                "display": {"type": "generate", "prompt": prompt, "model": model, "image_name": name},
+                "image_counter": image_counter,
+            }
+        else:
+            return {
+                "content": f"Failed to generate image. The model may be unavailable or the prompt may be invalid.",
+                "display": {"type": "generate_error", "prompt": prompt},
+                "image_counter": image_counter,
+            }
+
+    elif tool_name == "edit_image":
+        prompt = args.get("prompt", "")
+        source = args.get("source", "")
+        model = args.get("model") or default_edit_model or "black-forest-labs/FLUX.1-Kontext-dev"
+
+        # Resolve source: image store reference or URL
+        source_bytes = None
+        if source in image_store:
+            source_bytes = base64.b64decode(image_store[source])
+        elif source.startswith(("http://", "https://")):
+            source_base64 = execute_read_image_url(source)
+            if source_base64:
+                source_bytes = base64.b64decode(source_base64)
+
+        if source_bytes is None:
+            return {
+                "content": f"Could not resolve image source '{source}'. Use a URL or a reference from a previous tool call (e.g., 'image_1').",
+                "display": {"type": "edit_error", "source": source},
+                "image_counter": image_counter,
+            }
+
+        base64_png = execute_edit_image(prompt, source_bytes, hf_token, model)
+
+        if base64_png:
+            image_counter += 1
+            name = f"image_{image_counter}"
+            image_store[name] = base64_png
+            return {
+                "content": f"Image edited successfully as '{name}'. The image is attached.",
+                "image": base64_png,
+                "image_name": name,
+                "display": {"type": "edit", "prompt": prompt, "source": source, "model": model, "image_name": name},
+                "image_counter": image_counter,
+            }
+        else:
+            return {
+                "content": f"Failed to edit image. The model may be unavailable or the request may be invalid.",
+                "display": {"type": "edit_error", "source": source},
+                "image_counter": image_counter,
+            }
+
+    elif tool_name == "read_image_url":
+        url = args.get("url", "")
+        base64_png = execute_read_image_url(url)
+
+        if base64_png:
+            image_counter += 1
+            name = f"image_{image_counter}"
+            image_store[name] = base64_png
+            return {
+                "content": f"Image downloaded successfully as '{name}'. The image is attached.",
+                "image": base64_png,
+                "image_name": name,
+                "display": {"type": "read_image", "url": url, "image_name": name},
+                "image_counter": image_counter,
+            }
+        else:
+            return {
+                "content": f"Failed to download image from {url}. The URL may be invalid or inaccessible.",
+                "display": {"type": "read_image_error", "url": url},
+                "image_counter": image_counter,
+            }
+
+    return {
+        "content": f"Unknown tool: {tool_name}",
+        "display": {"type": "error"},
+        "image_counter": image_counter,
+    }
+
+
+def stream_image_execution(
+    client,
+    model: str,
+    messages: List[Dict],
+    hf_token: str,
+    image_gen_model: Optional[str] = None,
+    image_edit_model: Optional[str] = None,
+    extra_params: Optional[Dict] = None
+):
+    """
+    Run the image agent tool-calling loop.
+
+    Yields dicts with SSE event types:
+      - thinking: { content }
+      - content: { content }
+      - tool_start: { tool, args }
+      - tool_result: { tool, result, image? }
+      - result_preview: { content }
+      - result: { content, images? }
+      - generating: {}
+      - retry: { attempt, max_attempts, delay, message }
+      - error: { content }
+      - done: {}
+    """
+    turns = 0
+    done = False
+    image_store = {}
+    image_counter = 0
+
+    while not done and turns < MAX_TURNS:
+        turns += 1
+
+        # --- LLM call with retry ---
+        response = None
+        last_error = None
+
+        for attempt in range(MAX_RETRIES):
+            try:
+                call_params = {
+                    "messages": messages,
+                    "model": model,
+                    "tools": TOOLS,
+                    "tool_choice": "auto",
+                }
+                if extra_params:
+                    call_params["extra_body"] = extra_params
+                response = client.chat.completions.create(**call_params)
+                break
+            except Exception as e:
+                last_error = e
+                error_info = parse_llm_error(e)
+                if attempt < MAX_RETRIES - 1 and error_info["retryable"]:
+                    delay = RETRY_DELAYS[attempt]
+                    yield {
+                        "type": "retry",
+                        "attempt": attempt + 1,
+                        "max_attempts": MAX_RETRIES,
+                        "delay": delay,
+                        "message": error_info["message"],
+                    }
+                    time.sleep(delay)
+                else:
+                    yield {"type": "error", "content": error_info["message"]}
+                    return
+
+        if response is None:
+            yield {"type": "error", "content": f"LLM error after {MAX_RETRIES} attempts: {str(last_error)}"}
+            return
+
+        # --- Parse response ---
+        assistant_message = response.choices[0].message
+        content = assistant_message.content or ""
+        tool_calls = assistant_message.tool_calls or []
+
+        # Check for <result> tags
+        result_match = re.search(r'<result>(.*?)</result>', content, re.DOTALL | re.IGNORECASE)
+        result_content = None
+        thinking_content = content
+
+        if result_match:
+            result_content = result_match.group(1).strip()
+            thinking_content = re.sub(r'<result>.*?</result>', '', content, flags=re.DOTALL | re.IGNORECASE).strip()
+
+        # Send thinking/content
+        if thinking_content.strip():
+            if tool_calls:
+                yield {"type": "thinking", "content": thinking_content}
+            else:
+                yield {"type": "content", "content": thinking_content}
+
+        # Send result preview
+        if result_content:
+            # Include image store so frontend can resolve <image_N> references
+            yield {"type": "result_preview", "content": result_content, "images": image_store}
+
+        # --- Handle tool calls ---
+        if tool_calls:
+            for tool_call in tool_calls:
+                func_name = tool_call.function.name
+
+                # Parse arguments
+                try:
+                    args = json.loads(tool_call.function.arguments)
+                except json.JSONDecodeError as e:
+                    output = f"Error parsing arguments: {e}"
+                    messages.append({
+                        "role": "assistant",
+                        "content": content,
+                        "tool_calls": [{"id": tool_call.id, "type": "function", "function": {"name": func_name, "arguments": tool_call.function.arguments}}]
+                    })
+                    messages.append({"role": "tool", "tool_call_id": tool_call.id, "content": output})
+                    yield {"type": "error", "content": output}
+                    continue
+
+                # Signal tool start
+                yield {
+                    "type": "tool_start",
+                    "tool": func_name,
+                    "args": args,
+                    "tool_call_id": tool_call.id,
+                    "arguments": tool_call.function.arguments,
+                    "thinking": content,
+                }
+
+                # Execute tool
+                result = execute_tool(func_name, args, hf_token, image_store, image_counter, default_gen_model=image_gen_model, default_edit_model=image_edit_model)
+                image_counter = result.get("image_counter", image_counter)
+
+                # Build tool response message for LLM
+                if result.get("image"):
+                    # Resize image for VLM context to avoid token overflow
+                    vlm_image = resize_image_for_vlm(result["image"])
+                    tool_response_content = [
+                        {"type": "text", "text": result["content"]},
+                        {"type": "image_url", "image_url": {"url": f"data:image/jpeg;base64,{vlm_image}"}}
+                    ]
+                else:
+                    tool_response_content = result["content"]
+
+                tool_response_str = tool_response_content if isinstance(tool_response_content, str) else json.dumps(tool_response_content)
+
+                # Add to message history
+                messages.append({
+                    "role": "assistant",
+                    "content": content,
+                    "tool_calls": [{"id": tool_call.id, "type": "function", "function": {"name": func_name, "arguments": tool_call.function.arguments}}]
+                })
+                messages.append({
+                    "role": "tool",
+                    "tool_call_id": tool_call.id,
+                    "content": tool_response_str
+                })
+
+                # Signal tool result to frontend
+                tool_result_event = {
+                    "type": "tool_result",
+                    "tool": func_name,
+                    "tool_call_id": tool_call.id,
+                    "result": result.get("display", {}),
+                    "response": tool_response_str,
+                }
+                if result.get("image"):
+                    tool_result_event["image"] = result["image"]
+                if result.get("image_name"):
+                    tool_result_event["image_name"] = result["image_name"]
+                yield tool_result_event
+
+        else:
+            # No tool calls — we're done
+            messages.append({"role": "assistant", "content": content})
+            done = True
+
+        # Send result if found
+        if result_content:
+            yield {"type": "result", "content": result_content, "images": image_store}
+
+        # Signal between-turn processing
+        if not done:
+            yield {"type": "generating"}
+
+    yield {"type": "done"}

backend/main.py

@@ -99,6 +99,28 @@ except ImportError:
     COMMAND_AVAILABLE = False
     logger.warning("Command center tool handling not available.")
 
+# For agent with web tools
+try:
+    try:
+        from .agent import stream_agent_execution
+    except ImportError:
+        from agent import stream_agent_execution
+    AGENT_AVAILABLE = True
+except ImportError:
+    AGENT_AVAILABLE = False
+    logger.warning("Agent web tools not available. Install with: pip install readability-lxml markdownify")
+
+# For image agent with HuggingFace tools
+try:
+    try:
+        from .image import stream_image_execution
+    except ImportError:
+        from image import stream_image_execution
+    IMAGE_AVAILABLE = True
+except ImportError:
+    IMAGE_AVAILABLE = False
+    logger.warning("Image agent not available. Install with: pip install huggingface_hub Pillow")
+
 # Session management for sandboxes
 SANDBOXES: Dict[str, any] = {}
 SANDBOX_TIMEOUT = 300
@@ -196,6 +218,9 @@ class ChatRequest(BaseModel):
     extra_params: Optional[Dict] = None  # Extra parameters for API calls (e.g., enable_thinking)
     e2b_key: Optional[str] = None  # E2B API key for code execution
     serper_key: Optional[str] = None  # Serper API key for research
+    hf_token: Optional[str] = None  # HuggingFace token for image generation
+    image_gen_model: Optional[str] = None  # HuggingFace model for text-to-image
+    image_edit_model: Optional[str] = None  # HuggingFace model for image-to-image
     research_sub_agent_model: Optional[str] = None  # Model for research sub-tasks
     research_sub_agent_endpoint: Optional[str] = None  # Endpoint for research sub-agent (may differ from main)
     research_sub_agent_token: Optional[str] = None  # Token for research sub-agent endpoint
@@ -489,6 +514,113 @@ async def stream_command_center_notebook(
         yield f"data: {json.dumps({'type': 'error', 'content': error_message})}\n\n"
 
 
+async def stream_agent_notebook(
+    messages: List[dict],
+    endpoint: str,
+    token: Optional[str],
+    model: str,
+    serper_key: str,
+    tab_id: str = "default",
+    extra_params: Optional[Dict] = None
+):
+    """Handle agent notebook with web tools (search, read, screenshot)"""
+
+    if not AGENT_AVAILABLE:
+        async for chunk in stream_chat_response(messages, endpoint, token, model, "agent", tab_id, extra_params):
+            yield chunk
+        return
+
+    try:
+        client = OpenAI(base_url=endpoint, api_key=token)
+
+        system_prompt = get_system_prompt("agent")
+        full_messages = [{"role": "system", "content": system_prompt}] + messages
+
+        record_api_call(tab_id, full_messages)
+
+        loop = asyncio.get_event_loop()
+        queue = asyncio.Queue()
+
+        def run_sync_generator():
+            try:
+                for update in stream_agent_execution(client, model, full_messages, serper_key, extra_params=extra_params):
+                    loop.call_soon_threadsafe(queue.put_nowait, update)
+            finally:
+                loop.call_soon_threadsafe(queue.put_nowait, None)
+
+        future = loop.run_in_executor(_executor, run_sync_generator)
+
+        while True:
+            update = await queue.get()
+            if update is None:
+                break
+            yield f"data: {json.dumps(update)}\n\n"
+
+        await asyncio.wrap_future(future)
+
+    except Exception as e:
+        import traceback
+        error_message = f"Agent error: {str(e)}\n{traceback.format_exc()}"
+        logger.error(error_message)
+        yield f"data: {json.dumps({'type': 'error', 'content': error_message})}\n\n"
+
+
+async def stream_image_notebook(
+    messages: List[dict],
+    endpoint: str,
+    token: Optional[str],
+    model: str,
+    hf_token: str,
+    image_gen_model: Optional[str] = None,
+    image_edit_model: Optional[str] = None,
+    tab_id: str = "default",
+    extra_params: Optional[Dict] = None
+):
+    """Handle image notebook with HuggingFace image generation tools"""
+
+    if not IMAGE_AVAILABLE:
+        yield f"data: {json.dumps({'type': 'error', 'content': 'Image agent not available. Install with: pip install huggingface_hub Pillow'})}\n\n"
+        return
+
+    if not hf_token:
+        yield f"data: {json.dumps({'type': 'error', 'content': 'HuggingFace token required for image generation. Please configure in settings or set HF_TOKEN environment variable.'})}\n\n"
+        return
+
+    try:
+        client = OpenAI(base_url=endpoint, api_key=token)
+
+        system_prompt = get_system_prompt("image")
+        full_messages = [{"role": "system", "content": system_prompt}] + messages
+
+        record_api_call(tab_id, full_messages)
+
+        loop = asyncio.get_event_loop()
+        queue = asyncio.Queue()
+
+        def run_sync_generator():
+            try:
+                for update in stream_image_execution(client, model, full_messages, hf_token, image_gen_model=image_gen_model, image_edit_model=image_edit_model, extra_params=extra_params):
+                    loop.call_soon_threadsafe(queue.put_nowait, update)
+            finally:
+                loop.call_soon_threadsafe(queue.put_nowait, None)
+
+        future = loop.run_in_executor(_executor, run_sync_generator)
+
+        while True:
+            update = await queue.get()
+            if update is None:
+                break
+            yield f"data: {json.dumps(update)}\n\n"
+
+        await asyncio.wrap_future(future)
+
+    except Exception as e:
+        import traceback
+        error_message = f"Image agent error: {str(e)}\n{traceback.format_exc()}"
+        logger.error(error_message)
+        yield f"data: {json.dumps({'type': 'error', 'content': error_message})}\n\n"
+
+
 async def stream_chat_response(
     messages: List[dict],
     endpoint: str,
@@ -682,7 +814,11 @@ async def chat_stream(request: ChatRequest):
     # Apply environment variable fallbacks for API keys
     e2b_key = get_env_fallback(request.e2b_key, "E2B_API_KEY")
     serper_key = get_env_fallback(request.serper_key, "SERPER_API_KEY")
+    hf_token = get_env_fallback(request.hf_token, "HF_TOKEN")
     token = get_env_fallback(request.token, "LLM_API_KEY")
+    # For image generation: fall back to the LLM provider token (often the same HF token)
+    if not hf_token:
+        hf_token = token
 
     # Route to code execution handler for code notebooks
     if request.notebook_type == "code":
@@ -739,6 +875,48 @@ async def chat_stream(request: ChatRequest):
             }
         )
 
+    # Route to image handler with HuggingFace tools
+    if request.notebook_type == "image":
+        return StreamingResponse(
+            stream_image_notebook(
+                messages,
+                request.endpoint,
+                token,
+                request.model or "gpt-4",
+                hf_token or "",
+                request.image_gen_model,
+                request.image_edit_model,
+                tab_id,
+                request.extra_params
+            ),
+            media_type="text/event-stream",
+            headers={
+                "Cache-Control": "no-cache",
+                "Connection": "keep-alive",
+                "X-Accel-Buffering": "no",
+            }
+        )
+
+    # Route to agent handler with web tools
+    if request.notebook_type == "agent":
+        return StreamingResponse(
+            stream_agent_notebook(
+                messages,
+                request.endpoint,
+                token,
+                request.model or "gpt-4",
+                serper_key or "",
+                tab_id,
+                request.extra_params
+            ),
+            media_type="text/event-stream",
+            headers={
+                "Cache-Control": "no-cache",
+                "Connection": "keep-alive",
+                "X-Accel-Buffering": "no",
+            }
+        )
+
     # Route to command center handler for command center (with tool-based launching)
     if request.notebook_type == "command":
         return StreamingResponse(
@@ -932,6 +1110,7 @@ async def get_settings():
         if os.path.exists(SETTINGS_FILE):
             with open(SETTINGS_FILE, "r") as f:
                 settings = json.load(f)
+            settings["_settingsPath"] = SETTINGS_FILE
             return settings
         else:
             # Return default settings if file doesn't exist

backend/tools.py

@@ -0,0 +1,405 @@
+"""
+Centralized Tool Definitions & Execution Functions.
+
+All OpenAI function-calling tool definitions live here.
+Agent handlers compose tools by importing what they need:
+
+    from tools import execute_code, upload_files, download_files
+    TOOLS = [execute_code, upload_files, download_files]
+
+Execution functions for tools that run server-side (web tools)
+are also defined here, prefixed with `execute_`.
+"""
+
+import base64
+import io
+import json
+import logging
+from typing import List, Dict, Optional
+from urllib.parse import urljoin, urlparse
+
+import httpx
+import requests
+
+logger = logging.getLogger(__name__)
+
+
+# ============================================================
+# Code execution tools (used by code notebook)
+# ============================================================
+
+execute_code = {
+    "type": "function",
+    "function": {
+        "name": "execute_code",
+        "description": "Execute Python code in a stateful environment. Variables and imports persist between executions.",
+        "parameters": {
+            "type": "object",
+            "properties": {
+                "code": {
+                    "type": "string",
+                    "description": "The Python code to execute."
+                }
+            },
+            "required": ["code"]
+        }
+    }
+}
+
+upload_files = {
+    "type": "function",
+    "function": {
+        "name": "upload_files",
+        "description": "Upload files from the local workspace to the code execution environment for analysis. Files will be available at /home/user/<filename>. Use this to load data files, scripts, or any files you need to analyze.",
+        "parameters": {
+            "type": "object",
+            "properties": {
+                "paths": {
+                    "type": "array",
+                    "items": {"type": "string"},
+                    "description": "List of file paths relative to the workspace root (e.g., ['data/sales.csv', 'config.json'])"
+                }
+            },
+            "required": ["paths"]
+        }
+    }
+}
+
+download_files = {
+    "type": "function",
+    "function": {
+        "name": "download_files",
+        "description": "Download files from the code execution environment to the local workspace. Use this to save generated files, processed data, or any output files you want to keep.",
+        "parameters": {
+            "type": "object",
+            "properties": {
+                "files": {
+                    "type": "array",
+                    "items": {
+                        "type": "object",
+                        "properties": {
+                            "sandbox_path": {
+                                "type": "string",
+                                "description": "Path in the sandbox (e.g., '/home/user/output.csv')"
+                            },
+                            "local_path": {
+                                "type": "string",
+                                "description": "Destination path relative to workspace (e.g., 'results/output.csv')"
+                            }
+                        },
+                        "required": ["sandbox_path", "local_path"]
+                    },
+                    "description": "List of files to download with their sandbox and local paths"
+                }
+            },
+            "required": ["files"]
+        }
+    }
+}
+
+
+# ============================================================
+# Web tools (used by agent notebook)
+# ============================================================
+
+web_search = {
+    "type": "function",
+    "function": {
+        "name": "web_search",
+        "description": "Search the web using Google. Returns titles, URLs, and short snippets for each result. Use this to find information, discover relevant pages, and get an overview of a topic.",
+        "parameters": {
+            "type": "object",
+            "properties": {
+                "query": {
+                    "type": "string",
+                    "description": "The search query"
+                },
+                "num_results": {
+                    "type": "integer",
+                    "description": "Number of results to return (default: 5, max: 10)",
+                    "default": 5
+                }
+            },
+            "required": ["query"]
+        }
+    }
+}
+
+read_url = {
+    "type": "function",
+    "function": {
+        "name": "read_url",
+        "description": "Fetch a web page and extract its main content as clean markdown. Includes text, headings, links, and image references. Use this when you need detailed content from a specific page.",
+        "parameters": {
+            "type": "object",
+            "properties": {
+                "url": {
+                    "type": "string",
+                    "description": "The URL to read"
+                }
+            },
+            "required": ["url"]
+        }
+    }
+}
+
+screenshot_url = {
+    "type": "function",
+    "function": {
+        "name": "screenshot_url",
+        "description": "Take a screenshot of a web page. Use this when you need to see the visual layout, images, charts, or design of a page. The screenshot will be sent to you as an image.",
+        "parameters": {
+            "type": "object",
+            "properties": {
+                "url": {
+                    "type": "string",
+                    "description": "The URL to screenshot"
+                }
+            },
+            "required": ["url"]
+        }
+    }
+}
+
+
+# ============================================================
+# Web tool execution functions
+# ============================================================
+
+_USER_AGENT = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36"
+
+
+def execute_web_search(query: str, serper_key: str, num_results: int = 5) -> str:
+    """Search via Serper API, return formatted results as JSON string."""
+    url = "https://google.serper.dev/search"
+    payload = json.dumps({"q": query, "num": min(num_results, 10)})
+    headers = {
+        "X-API-KEY": serper_key,
+        "Content-Type": "application/json"
+    }
+
+    try:
+        response = requests.post(url, headers=headers, data=payload, timeout=10)
+        if response.status_code != 200:
+            return json.dumps({"error": f"Search API returned status {response.status_code}"})
+
+        data = response.json()
+        results = []
+        for item in data.get("organic", []):
+            results.append({
+                "title": item.get("title", ""),
+                "url": item.get("link", ""),
+                "snippet": item.get("snippet", "")
+            })
+        return json.dumps(results, indent=2)
+    except Exception as e:
+        logger.error(f"Web search error: {e}")
+        return json.dumps({"error": str(e)})
+
+
+def execute_read_url(url: str) -> str:
+    """Fetch URL and extract main content as markdown with images."""
+    try:
+        from readability import Document
+        from markdownify import markdownify
+    except ImportError:
+        return "Error: readability-lxml and markdownify packages required. Install with: pip install readability-lxml markdownify"
+
+    try:
+        resp = httpx.get(
+            url,
+            follow_redirects=True,
+            timeout=15,
+            headers={"User-Agent": _USER_AGENT}
+        )
+        if resp.status_code != 200:
+            return f"Error: HTTP {resp.status_code} fetching {url}"
+
+        doc = Document(resp.text)
+        title = doc.title()
+        content_html = doc.summary()
+
+        # Convert to markdown (preserves images as ![alt](src))
+        md = markdownify(content_html, strip=["script", "style"])
+
+        # Resolve relative image URLs to absolute
+        parsed_base = urlparse(url)
+        base_url = f"{parsed_base.scheme}://{parsed_base.netloc}"
+
+        def resolve_url(match):
+            img_url = match.group(2)
+            if img_url.startswith(("http://", "https://", "data:")):
+                return match.group(0)
+            absolute = urljoin(url, img_url)
+            return f"![{match.group(1)}]({absolute})"
+
+        import re
+        md = re.sub(r'!\[([^\]]*)\]\(([^)]+)\)', resolve_url, md)
+
+        # Clean up excessive whitespace
+        md = re.sub(r'\n{3,}', '\n\n', md).strip()
+
+        # Truncate if very long
+        max_len = 15000
+        if len(md) > max_len:
+            md = md[:max_len] + f"\n\n[Content truncated - {len(md)} chars total]"
+
+        return f"# {title}\n\n{md}" if title else md
+    except Exception as e:
+        logger.error(f"Read URL error for {url}: {e}")
+        return f"Error reading {url}: {str(e)}"
+
+
+def execute_screenshot_url(url: str) -> Optional[str]:
+    """Take a screenshot of a URL using Playwright, return base64 PNG."""
+    try:
+        from playwright.sync_api import sync_playwright
+    except ImportError:
+        return None  # Caller should handle gracefully
+
+    try:
+        with sync_playwright() as p:
+            browser = p.chromium.launch(headless=True)
+            page = browser.new_page(viewport={"width": 1280, "height": 720})
+            page.goto(url, wait_until="networkidle", timeout=15000)
+            screenshot_bytes = page.screenshot(full_page=False)
+            browser.close()
+            return base64.b64encode(screenshot_bytes).decode("utf-8")
+    except Exception as e:
+        logger.error(f"Screenshot error for {url}: {e}")
+        return None
+
+
+# ============================================================
+# Image tools (used by image notebook)
+# ============================================================
+
+generate_image = {
+    "type": "function",
+    "function": {
+        "name": "generate_image",
+        "description": "Generate an image from a text prompt. Returns an image reference name (e.g., 'image_1') that you can see and use with edit_image.",
+        "parameters": {
+            "type": "object",
+            "properties": {
+                "prompt": {
+                    "type": "string",
+                    "description": "Detailed text description of the image to generate"
+                },
+                "model": {
+                    "type": "string",
+                    "description": "HuggingFace model to use (default: black-forest-labs/FLUX.1-schnell)",
+                    "default": "black-forest-labs/FLUX.1-schnell"
+                }
+            },
+            "required": ["prompt"]
+        }
+    }
+}
+
+edit_image = {
+    "type": "function",
+    "function": {
+        "name": "edit_image",
+        "description": "Edit or transform an existing image using a text prompt. The source can be a URL (https://...) or a reference to a previously generated/loaded image (e.g., 'image_1').",
+        "parameters": {
+            "type": "object",
+            "properties": {
+                "prompt": {
+                    "type": "string",
+                    "description": "Text description of the edit or transformation to apply"
+                },
+                "source": {
+                    "type": "string",
+                    "description": "Image URL or reference name from a previous tool call (e.g., 'image_1')"
+                },
+                "model": {
+                    "type": "string",
+                    "description": "HuggingFace model to use (default: black-forest-labs/FLUX.1-Kontext-dev)",
+                    "default": "black-forest-labs/FLUX.1-Kontext-dev"
+                }
+            },
+            "required": ["prompt", "source"]
+        }
+    }
+}
+
+read_image_url = {
+    "type": "function",
+    "function": {
+        "name": "read_image_url",
+        "description": "Download an image from a URL. Returns an image reference name (e.g., 'image_1') that you can see and use with edit_image.",
+        "parameters": {
+            "type": "object",
+            "properties": {
+                "url": {
+                    "type": "string",
+                    "description": "The image URL to download"
+                }
+            },
+            "required": ["url"]
+        }
+    }
+}
+
+
+# ============================================================
+# Image tool execution functions
+# ============================================================
+
+def execute_generate_image(prompt: str, hf_token: str, model: str = "black-forest-labs/FLUX.1-schnell") -> Optional[str]:
+    """Text-to-image via HF InferenceClient. Returns base64 PNG or None on error."""
+    try:
+        from huggingface_hub import InferenceClient
+    except ImportError:
+        logger.error("huggingface_hub not installed")
+        return None
+
+    try:
+        client = InferenceClient(token=hf_token)
+        image = client.text_to_image(prompt, model=model)
+        buffer = io.BytesIO()
+        image.save(buffer, format="PNG")
+        return base64.b64encode(buffer.getvalue()).decode("utf-8")
+    except Exception as e:
+        logger.error(f"Generate image error: {e}")
+        return None
+
+
+def execute_edit_image(prompt: str, source_image_bytes: bytes, hf_token: str, model: str = "black-forest-labs/FLUX.1-Kontext-dev") -> Optional[str]:
+    """Image-to-image via HF InferenceClient. source_image_bytes is raw image data. Returns base64 PNG or None."""
+    try:
+        from huggingface_hub import InferenceClient
+        from PIL import Image
+    except ImportError:
+        logger.error("huggingface_hub or Pillow not installed")
+        return None
+
+    try:
+        client = InferenceClient(token=hf_token)
+        input_image = Image.open(io.BytesIO(source_image_bytes))
+        result = client.image_to_image(input_image, prompt=prompt, model=model)
+        buffer = io.BytesIO()
+        result.save(buffer, format="PNG")
+        return base64.b64encode(buffer.getvalue()).decode("utf-8")
+    except Exception as e:
+        logger.error(f"Edit image error: {e}")
+        return None
+
+
+def execute_read_image_url(url: str) -> Optional[str]:
+    """Download image from URL, return base64 string or None on error."""
+    try:
+        resp = httpx.get(
+            url,
+            follow_redirects=True,
+            timeout=15,
+            headers={"User-Agent": _USER_AGENT}
+        )
+        if resp.status_code != 200:
+            logger.error(f"Read image URL error: HTTP {resp.status_code} for {url}")
+            return None
+        return base64.b64encode(resp.content).decode("utf-8")
+    except Exception as e:
+        logger.error(f"Read image URL error for {url}: {e}")
+        return None

frontend/index.html

@@ -7,7 +7,7 @@
     <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
-    <link rel="stylesheet" href="style.css?v=62">
+    <link rel="stylesheet" href="style.css?v=64">
 </head>
 <body>
     <div class="app-container">
@@ -175,6 +175,7 @@
     <div class="settings-panel" id="settingsPanel">
         <div class="settings-panel-header">
             <h3>SETTINGS</h3>
+            <span class="settings-path" id="settingsPath"></span>
             <button class="settings-panel-close" id="settingsPanelClose">×</button>
         </div>
         <div class="settings-panel-body" id="settingsPanelBody">
@@ -227,6 +228,31 @@
                     <input type="password" id="setting-serper-key" class="settings-input" placeholder="Leave empty if not using research">
                 </div>
 
+                <div class="settings-section">
+                    <label class="settings-label">
+                        <span class="label-text">HUGGINGFACE TOKEN (OPTIONAL)</span>
+                        <span class="label-description">Required for image generation in IMAGE notebooks</span>
+                    </label>
+                    <input type="password" id="setting-hf-token" class="settings-input" placeholder="Leave empty to use provider token">
+                </div>
+
+                <!-- Image Model Settings -->
+                <div class="settings-section">
+                    <label class="settings-label">
+                        <span class="label-text">IMAGE GENERATION MODEL (OPTIONAL)</span>
+                        <span class="label-description">Model for text-to-image generation in IMAGE notebooks</span>
+                    </label>
+                    <select id="setting-image-gen-model" class="settings-select"></select>
+                </div>
+
+                <div class="settings-section">
+                    <label class="settings-label">
+                        <span class="label-text">IMAGE EDIT MODEL (OPTIONAL)</span>
+                        <span class="label-description">Model for image-to-image editing in IMAGE notebooks</span>
+                    </label>
+                    <select id="setting-image-edit-model" class="settings-select"></select>
+                </div>
+
                 <!-- Research Settings -->
                 <div class="settings-section">
                     <label class="settings-label">
@@ -457,6 +483,6 @@
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
     <script src="research-ui.js?v=23"></script>
-    <script src="script.js?v=57"></script>
+    <script src="script.js?v=59"></script>
 </body>
 </html>

frontend/script.js

@@ -4,10 +4,11 @@
 // ============================================================
 const AGENT_REGISTRY = {
     command:  { label: 'TASKS',     hasCounter: false, inMenu: false, inLauncher: false, placeholder: 'Enter message...' },
-    agent:    { label: 'AGENT',     hasCounter: true,  inMenu: false, inLauncher: true,  placeholder: 'Enter message...' },
+    agent:    { label: 'AGENT',     hasCounter: true,  inMenu: true,  inLauncher: true,  placeholder: 'Enter message...' },
     code:     { label: 'CODE',      hasCounter: true,  inMenu: true,  inLauncher: true,  placeholder: 'Enter message...' },
     research: { label: 'RESEARCH',  hasCounter: true,  inMenu: true,  inLauncher: true,  placeholder: 'Enter message...' },
     chat:     { label: 'CHAT',      hasCounter: true,  inMenu: true,  inLauncher: true,  placeholder: 'Enter message...' },
+    image:    { label: 'IMAGE',     hasCounter: true,  inMenu: true,  inLauncher: true,  placeholder: 'Describe an image or paste a URL...' },
 };
 // Virtual types used only in timeline rendering (not real agents)
 const VIRTUAL_TYPE_LABELS = { search: 'SEARCH', browse: 'BROWSE' };
@@ -57,6 +58,10 @@ let settings = {
     // Service API keys
     e2bKey: '',
     serperKey: '',
+    hfToken: '',
+    // Image model selections (model IDs from the models list)
+    imageGenModel: '',
+    imageEditModel: '',
     // Research settings
     researchSubAgentModel: '',
     researchParallelWorkers: null,
@@ -1562,22 +1567,32 @@ function getConversationHistory(chatContainer) {
             // Check if this message has a tool call
             const toolCallData = msg.getAttribute('data-tool-call');
             if (toolCallData) {
-                // This is a tool call message - add it in the proper format
-                // Include content if the message also has thinking text
                 const toolCall = JSON.parse(toolCallData);
+                let funcName, funcArgs;
+
+                if (toolCall.function_name) {
+                    // Agent-style tool call (web_search, read_url, etc.)
+                    funcName = toolCall.function_name;
+                    funcArgs = toolCall.arguments;
+                } else {
+                    // Command center-style tool call (launch_*_notebook)
+                    funcName = `launch_${toolCall.notebook_type}_notebook`;
+                    funcArgs = JSON.stringify({
+                        task: toolCall.message,
+                        topic: toolCall.message,
+                        message: toolCall.message
+                    });
+                }
+
                 messages.push({
                     role: 'assistant',
-                    content: content || '',  // Preserve thinking content if present
+                    content: toolCall.thinking || content || '',
                     tool_calls: [{
                         id: toolCall.tool_call_id || 'tool_' + Date.now(),
                         type: 'function',
                         function: {
-                            name: `launch_${toolCall.notebook_type}_notebook`,
-                            arguments: JSON.stringify({
-                                task: toolCall.message,
-                                topic: toolCall.message,
-                                message: toolCall.message
-                            })
+                            name: funcName,
+                            arguments: funcArgs
                         }
                     }]
                 });
@@ -1637,6 +1652,14 @@ async function streamChatResponse(messages, chatContainer, notebookType, tabId)
         }
     }
 
+    // Resolve image model selections to HF model ID strings
+    const imageGenModelId = currentSettings.imageGenModel
+        ? currentSettings.models?.[currentSettings.imageGenModel]?.modelId || null
+        : null;
+    const imageEditModelId = currentSettings.imageEditModel
+        ? currentSettings.models?.[currentSettings.imageEditModel]?.modelId || null
+        : null;
+
     try {
         const response = await fetch(`${backendEndpoint}/chat/stream`, {
             method: 'POST',
@@ -1651,6 +1674,9 @@ async function streamChatResponse(messages, chatContainer, notebookType, tabId)
                 extra_params: modelConfig.extraParams || null,
                 e2b_key: currentSettings.e2bKey || null,
                 serper_key: currentSettings.serperKey || null,
+                hf_token: currentSettings.hfToken || null,
+                image_gen_model: imageGenModelId,
+                image_edit_model: imageEditModelId,
                 research_sub_agent_model: researchSubAgentConfig?.model || null,
                 research_sub_agent_endpoint: researchSubAgentConfig?.endpoint || null,
                 research_sub_agent_token: researchSubAgentConfig?.token || null,
@@ -1737,7 +1763,7 @@ async function streamChatResponse(messages, chatContainer, notebookType, tabId)
 
                     } else if (data.type === 'result') {
                         // Notebook result - update command center widget
-                        updateActionWidgetWithResult(tabId, data.content, data.figures);
+                        updateActionWidgetWithResult(tabId, data.content, data.figures, data.images);
 
                     } else if (data.type === 'result_preview') {
                         // Show result preview
@@ -1762,6 +1788,19 @@ async function streamChatResponse(messages, chatContainer, notebookType, tabId)
                             }
                         }
 
+                        // Handle <image_N> references from image agent
+                        if (data.images) {
+                            for (const [imageName, imageBase64] of Object.entries(data.images)) {
+                                const placeholderId = `%%%IMAGE_${imageName}%%%`;
+                                figurePlaceholders[placeholderId] = { type: 'png', data: imageBase64, isGenerated: true };
+
+                                const pairedTag = new RegExp(`<${imageName}></${imageName}>`, 'gi');
+                                previewContent = previewContent.replace(pairedTag, `\n\n${placeholderId}\n\n`);
+                                const singleTag = new RegExp(`</?${imageName}>`, 'gi');
+                                previewContent = previewContent.replace(singleTag, `\n\n${placeholderId}\n\n`);
+                            }
+                        }
+
                         // Process markdown
                         let html = parseMarkdown(previewContent);
 
@@ -1857,6 +1896,108 @@ async function streamChatResponse(messages, chatContainer, notebookType, tabId)
                         // Add to timeline
                         addTimelineEvent(tabId, 'assistant', `[report] ${data.sources_count || 0} sources, ${data.websites_visited || 0} sites`);
 
+                    } else if (data.type === 'tool_start') {
+                        // Agent tool execution starting — create a tool-cell box (like code cells)
+                        currentMessageEl = null;
+                        fullResponse = '';
+
+                        const toolLabels = {
+                            'web_search': 'SEARCH',
+                            'read_url': 'READ',
+                            'screenshot_url': 'SCREENSHOT',
+                            'generate_image': 'GENERATE',
+                            'edit_image': 'EDIT',
+                            'read_image_url': 'LOAD IMAGE'
+                        };
+                        const toolDescriptions = {
+                            'web_search': data.args?.query || '',
+                            'read_url': data.args?.url || '',
+                            'screenshot_url': data.args?.url || '',
+                            'generate_image': data.args?.prompt || '',
+                            'edit_image': `${data.args?.prompt || ''} (from ${data.args?.source || ''})`,
+                            'read_image_url': data.args?.url || ''
+                        };
+                        const label = toolLabels[data.tool] || data.tool.toUpperCase();
+                        const description = toolDescriptions[data.tool] || '';
+
+                        // Store tool call in DOM for history reconstruction
+                        const toolCallMsg = document.createElement('div');
+                        toolCallMsg.className = 'message assistant';
+                        toolCallMsg.style.display = 'none';
+                        toolCallMsg.setAttribute('data-tool-call', JSON.stringify({
+                            tool_call_id: data.tool_call_id,
+                            function_name: data.tool,
+                            arguments: data.arguments,
+                            thinking: data.thinking || ''
+                        }));
+                        chatContainer.appendChild(toolCallMsg);
+
+                        // Create tool-cell box (similar to code-cell)
+                        const toolCell = document.createElement('div');
+                        toolCell.className = 'tool-cell';
+                        toolCell.setAttribute('data-tool-name', data.tool);
+                        toolCell.innerHTML = `
+                            <div class="tool-cell-label"><span>${label}</span>${createSpinnerHtml()}</div>
+                            <div class="tool-cell-input">${escapeHtml(description)}</div>
+                        `;
+                        chatContainer.appendChild(toolCell);
+                        scrollChatToBottom(chatContainer);
+                        addTimelineEvent(tabId, 'assistant', `[${data.tool}] ${description}`);
+
+                    } else if (data.type === 'tool_result') {
+                        // Agent tool result — populate the last tool-cell with output
+                        const lastToolCell = chatContainer.querySelector('.tool-cell:last-of-type');
+
+                        // Remove spinner
+                        if (lastToolCell) {
+                            const spinner = lastToolCell.querySelector('.tool-spinner');
+                            if (spinner) spinner.remove();
+                        }
+
+                        // Store tool response in DOM for history reconstruction
+                        const toolResponseMsg = document.createElement('div');
+                        toolResponseMsg.className = 'message tool';
+                        toolResponseMsg.style.display = 'none';
+                        toolResponseMsg.setAttribute('data-tool-response', JSON.stringify({
+                            tool_call_id: data.tool_call_id,
+                            content: data.response || ''
+                        }));
+                        chatContainer.appendChild(toolResponseMsg);
+
+                        // Build output HTML based on tool type
+                        let outputHtml = '';
+
+                        if (data.tool === 'web_search' && data.result?.results) {
+                            try {
+                                const results = typeof data.result.results === 'string' ? JSON.parse(data.result.results) : data.result.results;
+                                if (Array.isArray(results)) {
+                                    outputHtml = '<div class="search-results-content">' +
+                                        results.map(r =>
+                                            `<div class="search-result-item"><a href="${escapeHtml(r.url)}" target="_blank">${escapeHtml(r.title)}</a><span class="search-snippet">${escapeHtml(r.snippet)}</span></div>`
+                                        ).join('') + '</div>';
+                                }
+                            } catch(e) { /* ignore parse errors */ }
+                        } else if (data.tool === 'read_url') {
+                            const len = data.result?.length || 0;
+                            outputHtml = `<div class="tool-cell-read-summary">${len > 0 ? `Extracted ${(len / 1000).toFixed(1)}k chars` : 'No content extracted'}</div>`;
+                        } else if (data.tool === 'screenshot_url' && data.image) {
+                            outputHtml = `<img src="data:image/png;base64,${data.image}" alt="Screenshot" class="screenshot-img" />`;
+                        } else if ((data.tool === 'generate_image' || data.tool === 'edit_image' || data.tool === 'read_image_url') && data.image) {
+                            const imgName = data.image_name || 'image';
+                            outputHtml = `<img src="data:image/png;base64,${data.image}" alt="${escapeHtml(imgName)}" class="generated-img" />`;
+                        } else if ((data.tool === 'generate_image' || data.tool === 'edit_image' || data.tool === 'read_image_url') && !data.image) {
+                            outputHtml = `<div class="tool-cell-read-summary">Failed to process image</div>`;
+                        }
+
+                        if (outputHtml && lastToolCell) {
+                            const outputEl = document.createElement('div');
+                            outputEl.className = 'tool-cell-output';
+                            outputEl.innerHTML = outputHtml;
+                            lastToolCell.appendChild(outputEl);
+                        }
+
+                        scrollChatToBottom(chatContainer);
+
                     } else if (data.type === 'content') {
                         // Regular streaming content (non-code notebooks)
                         if (!currentMessageEl) {
@@ -2191,7 +2332,7 @@ function showActionWidget(chatContainer, action, message, targetTabId, taskId =
     actionWidgets[targetTabId] = widget;
 }
 
-async function updateActionWidgetWithResult(tabId, resultContent, figures) {
+async function updateActionWidgetWithResult(tabId, resultContent, figures, images) {
     const widget = actionWidgets[tabId];
     if (!widget) return;
 
@@ -2225,6 +2366,19 @@ async function updateActionWidgetWithResult(tabId, resultContent, figures) {
         }
     }
 
+    // Handle <image_N> references from image agent
+    if (images) {
+        for (const [imageName, imageBase64] of Object.entries(images)) {
+            const placeholderId = `%%%IMAGE_${imageName}%%%`;
+            figurePlaceholders[placeholderId] = { type: 'png', data: imageBase64 };
+
+            const pairedTag = new RegExp(`<${imageName}></${imageName}>`, 'gi');
+            processedContent = processedContent.replace(pairedTag, `\n\n${placeholderId}\n\n`);
+            const singleTag = new RegExp(`</?${imageName}>`, 'gi');
+            processedContent = processedContent.replace(singleTag, `\n\n${placeholderId}\n\n`);
+        }
+    }
+
     // Process markdown
     let html = parseMarkdown(processedContent);
 
@@ -2253,9 +2407,26 @@ async function updateActionWidgetWithResult(tabId, resultContent, figures) {
         body.appendChild(resultSection);
     }
 
-    // Send result back to backend to update conversation history (non-blocking)
+    // Update the tool response DOM element so getConversationHistory picks up actual results
     const toolCallId = toolCallIds[tabId];
     if (toolCallId) {
+        // Find the hidden tool response element with this tool_call_id in the command center
+        const commandContainer = document.getElementById('messages-command');
+        if (commandContainer) {
+            const toolMsgs = commandContainer.querySelectorAll('.message.tool[data-tool-response]');
+            for (const toolMsg of toolMsgs) {
+                try {
+                    const data = JSON.parse(toolMsg.getAttribute('data-tool-response'));
+                    if (data.tool_call_id === toolCallId) {
+                        data.content = resultContent;
+                        toolMsg.setAttribute('data-tool-response', JSON.stringify(data));
+                        break;
+                    }
+                } catch (e) { /* ignore parse errors */ }
+            }
+        }
+
+        // Also send to backend (non-blocking)
         fetch('/api/conversation/add-tool-response', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
@@ -3055,6 +3226,9 @@ function migrateSettings(oldSettings) {
         },
         e2bKey: oldSettings.e2bKey || '',
         serperKey: oldSettings.serperKey || '',
+        hfToken: oldSettings.hfToken || '',
+        imageGenModel: oldSettings.imageGenModel || '',
+        imageEditModel: oldSettings.imageEditModel || '',
         researchSubAgentModel: oldSettings.researchSubAgentModel || '',
         researchParallelWorkers: oldSettings.researchParallelWorkers || null,
         researchMaxWebsites: oldSettings.researchMaxWebsites || null,
@@ -3234,7 +3408,9 @@ function populateModelDropdowns() {
     // Build dropdown IDs from registry + special dropdowns
     const dropdownIds = [
         ...Object.keys(AGENT_REGISTRY).map(t => `setting-notebook-${t}`),
-        'setting-research-sub-agent-model'
+        'setting-research-sub-agent-model',
+        'setting-image-gen-model',
+        'setting-image-edit-model'
     ];
 
     dropdownIds.forEach(dropdownId => {
@@ -3267,6 +3443,10 @@ function populateModelDropdowns() {
     }
     const subAgentDropdown = document.getElementById('setting-research-sub-agent-model');
     if (subAgentDropdown) subAgentDropdown.value = settings.researchSubAgentModel || '';
+    const imageGenDropdown = document.getElementById('setting-image-gen-model');
+    if (imageGenDropdown) imageGenDropdown.value = settings.imageGenModel || '';
+    const imageEditDropdown = document.getElementById('setting-image-edit-model');
+    if (imageEditDropdown) imageEditDropdown.value = settings.imageEditModel || '';
 }
 
 // Show add/edit provider dialog
@@ -3433,6 +3613,10 @@ function deleteModel(modelId) {
 }
 
 function openSettings() {
+    // Show settings file path
+    const pathEl = document.getElementById('settingsPath');
+    if (pathEl) pathEl.textContent = settings._settingsPath || '';
+
     // Render providers and models lists
     renderProvidersList();
     renderModelsList();
@@ -3441,6 +3625,7 @@ function openSettings() {
     // Populate service keys
     document.getElementById('setting-e2b-key').value = settings.e2bKey || '';
     document.getElementById('setting-serper-key').value = settings.serperKey || '';
+    document.getElementById('setting-hf-token').value = settings.hfToken || '';
 
     // Populate research settings
     document.getElementById('setting-research-parallel-workers').value = settings.researchParallelWorkers || '';
@@ -3478,6 +3663,9 @@ async function saveSettings() {
     // Get other settings
     const e2bKey = document.getElementById('setting-e2b-key').value.trim();
     const serperKey = document.getElementById('setting-serper-key').value.trim();
+    const hfToken = document.getElementById('setting-hf-token').value.trim();
+    const imageGenModel = document.getElementById('setting-image-gen-model')?.value || '';
+    const imageEditModel = document.getElementById('setting-image-edit-model')?.value || '';
     const researchParallelWorkers = document.getElementById('setting-research-parallel-workers').value.trim();
     const researchMaxWebsites = document.getElementById('setting-research-max-websites').value.trim();
     const themeColor = document.getElementById('setting-theme-color').value || 'forest';
@@ -3497,6 +3685,9 @@ async function saveSettings() {
     settings.notebooks = notebookModels;
     settings.e2bKey = e2bKey;
     settings.serperKey = serperKey;
+    settings.hfToken = hfToken;
+    settings.imageGenModel = imageGenModel;
+    settings.imageEditModel = imageEditModel;
     settings.researchSubAgentModel = researchSubAgentModel;
     settings.researchParallelWorkers = researchParallelWorkers ? parseInt(researchParallelWorkers) : null;
     settings.researchMaxWebsites = researchMaxWebsites ? parseInt(researchMaxWebsites) : null;

frontend/style.css

@@ -2729,6 +2729,17 @@ pre code [class*="token"] {
     letter-spacing: 0.5px;
 }
 
+.settings-path {
+    font-size: 10px;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 400;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    margin: 0 12px;
+}
+
 .settings-panel-close {
     background: none;
     border: none;
@@ -3778,3 +3789,91 @@ pre code [class*="token"] {
 }
 
 
+/* ============================================================
+   Agent Tool Cells (search, read, screenshot)
+   ============================================================ */
+
+.tool-cell {
+    margin: 16px 0;
+    overflow: hidden;
+}
+
+.tool-cell-label {
+    font-size: 10px;
+    font-weight: 600;
+    color: var(--bg-primary);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    padding: 6px 12px;
+    background: var(--theme-accent);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.tool-cell-input {
+    background: var(--bg-tertiary);
+    padding: 10px 12px;
+    border: 1px solid var(--border-primary);
+    border-top: none;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 12px;
+    color: var(--text-primary);
+    word-break: break-all;
+}
+
+.tool-cell-output {
+    padding: 10px 12px;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-primary);
+    border-top: none;
+    font-size: 12px;
+}
+
+.search-results-content {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.search-result-item {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+}
+
+.search-result-item a {
+    color: var(--accent-primary);
+    text-decoration: none;
+    font-weight: 500;
+    font-size: 12px;
+}
+
+.search-result-item a:hover {
+    text-decoration: underline;
+}
+
+.search-snippet {
+    color: var(--text-muted);
+    font-size: 11px;
+    line-height: 1.3;
+}
+
+.tool-cell-read-summary {
+    color: var(--text-muted);
+    font-size: 11px;
+}
+
+.screenshot-img {
+    max-width: 100%;
+    max-height: 400px;
+    border-radius: 2px;
+}
+
+.generated-img {
+    max-width: 100%;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+