Debug panel: full LLM call parity, show_html tool, drag-drop file upload

- Centralize LLM calls into call_llm() generator in agents.py with retries and debug events
- Emit debug_call_input/output SSE events for every LLM turn across all agents
- Frontend accumulates debug history per tab with INPUT/OUTPUT sections
- Replace base64 images with hoverable thumbnail placeholders in debug JSON
- Persist debug history in workspace save/restore
- Add show_html direct tool for command center (iframe srcdoc rendering)
- Add drag & drop file upload to files panel (folder-aware targeting)
- Remove old MESSAGE_HISTORY polling, refresh button; debug updates in real-time
- Reduce debug panel width to 450px

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

backend/agent.py

@@ -7,7 +7,6 @@ Uses the same tool-calling loop pattern as code.py:
 import json
 import logging
 import re
-import time
 from typing import List, Dict, Optional
 
 from .tools import (
@@ -22,26 +21,6 @@ logger = logging.getLogger(__name__)
 TOOLS = [web_search, read_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:
@@ -115,9 +94,12 @@ def stream_agent_execution(
       - error: { content }
       - done: {}
     """
+    from .agents import call_llm
+
     turns = 0
     done = False
     has_result = False
+    debug_call_number = 0
 
     while not done and turns < MAX_TURNS:
         # Check abort before each turn
@@ -127,47 +109,18 @@ def stream_agent_execution(
 
         turns += 1
 
-        # --- LLM call with retry ---
+        # LLM call with retries and debug events
         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"],
-                    }
-                    if abort_event:
-                        abort_event.wait(delay)
-                        if abort_event.is_set():
-                            yield {"type": "aborted"}
-                            return
-                    else:
-                        time.sleep(delay)
-                else:
-                    yield {"type": "error", "content": error_info["message"]}
+        for event in call_llm(client, model, messages, tools=TOOLS, extra_params=extra_params, abort_event=abort_event, call_number=debug_call_number):
+            if "_response" in event:
+                response = event["_response"]
+                debug_call_number = event["_call_number"]
+            else:
+                yield event
+                if event.get("type") in ("error", "aborted"):
                     return
 
         if response is None:
-            yield {"type": "error", "content": f"LLM error after {MAX_RETRIES} attempts: {str(last_error)}"}
             return
 
         # --- Parse response ---

backend/agents.py

@@ -388,6 +388,144 @@ def get_system_prompt(agent_key: str) -> str:
     return prompt
 
 
+def serialize_llm_response(response):
+    """Extract raw LLM response into a JSON-serializable dict."""
+    choice = response.choices[0]
+    msg = choice.message
+    result = {"role": "assistant", "content": msg.content or ""}
+    if msg.tool_calls:
+        result["tool_calls"] = [
+            {
+                "id": tc.id,
+                "type": "function",
+                "function": {
+                    "name": tc.function.name,
+                    "arguments": tc.function.arguments,
+                },
+            }
+            for tc in msg.tool_calls
+        ]
+    return result
+
+
+MAX_RETRIES = 3
+RETRY_DELAYS = [2, 5, 10]
+
+
+def parse_llm_error(error: Exception) -> dict:
+    """Parse LLM error to extract useful message for frontend."""
+    import json as _json
+    import re as _re
+    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),
+                "type": error_data.get("type", "unknown_error"),
+                "retryable": error_data.get("type") == "too_many_requests_error" or "429" in error_str,
+            }
+    except Exception:
+        pass
+
+    retryable = any(x in error_str.lower() for x in ["429", "rate limit", "too many requests", "overloaded", "high traffic"])
+    return {"message": error_str, "type": "unknown_error", "retryable": retryable}
+
+
+def call_llm(client, model, messages, tools=None, extra_params=None, abort_event=None, call_number=0):
+    """Centralized LLM call with retries and debug event emission.
+
+    Generator that yields:
+      - {"type": "debug_call_input", ...}  before the call
+      - {"type": "debug_call_output", ...} after success or final failure
+      - {"type": "retry", ...}             on retryable errors
+      - {"type": "error", ...}             on fatal errors
+      - {"type": "aborted"}                if abort_event fires during retry wait
+      - {"_response": response}            the actual OpenAI response (not an SSE event)
+
+    The caller should forward all dicts to the SSE stream except those with "_response".
+
+    Returns call_number (incremented) via the last yielded dict's "call_number" field.
+    """
+    import copy
+    import time
+
+    call_number += 1
+
+    # Emit input before the call
+    yield {
+        "type": "debug_call_input",
+        "call_number": call_number,
+        "messages": copy.deepcopy(messages),
+    }
+
+    response = None
+    last_error = None
+
+    for attempt in range(MAX_RETRIES):
+        try:
+            call_params = {
+                "messages": messages,
+                "model": model,
+            }
+            if tools:
+                call_params["tools"] = tools
+                call_params["tool_choice"] = "auto"
+            if extra_params:
+                call_params["extra_body"] = extra_params
+
+            response = client.chat.completions.create(**call_params)
+
+            # Emit output on success
+            yield {
+                "type": "debug_call_output",
+                "call_number": call_number,
+                "response": serialize_llm_response(response),
+            }
+
+            # Yield the actual response object for the caller
+            yield {"_response": response, "_call_number": call_number}
+            return
+
+        except Exception as e:
+            last_error = e
+            error_info = parse_llm_error(e)
+
+            # Emit debug output for every failed attempt
+            yield {
+                "type": "debug_call_output",
+                "call_number": call_number,
+                "error": error_info["message"],
+                "attempt": attempt + 1,
+                "retryable": error_info["retryable"],
+            }
+
+            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"],
+                    "error_type": error_info.get("type", "unknown_error"),
+                }
+                if abort_event:
+                    abort_event.wait(delay)
+                    if abort_event.is_set():
+                        yield {"type": "aborted"}
+                        return
+                else:
+                    time.sleep(delay)
+            else:
+                yield {"type": "error", "content": error_info["message"]}
+                return
+
+    # Should not reach here, but just in case
+    yield {"type": "error", "content": f"LLM error after {MAX_RETRIES} attempts: {str(last_error)}"}
+
+
 def nudge_for_result(client, model, messages, extra_params=None, extra_result_data=None):
     """Nudge an agent that finished without <result> tags to produce one.
 

backend/code.py

@@ -16,37 +16,6 @@ logger = logging.getLogger(__name__)
 TOOLS = [execute_code, upload_files, download_files]
 
 MAX_TURNS = 40
-MAX_RETRIES = 3  # Maximum retries for LLM calls
-RETRY_DELAYS = [2, 5, 10]  # Delay in seconds for each retry attempt
-
-
-def parse_llm_error(error: Exception) -> dict:
-    """Parse LLM error to extract useful message for frontend"""
-    error_str = str(error)
-
-    # Try to extract JSON error message
-    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),
-                "type": error_data.get("type", "unknown_error"),
-                "code": error_data.get("code", "unknown"),
-                "retryable": error_data.get("type") == "too_many_requests_error" or "429" in error_str
-            }
-    except:
-        pass
-
-    # Check for common retryable errors
-    retryable = any(x in error_str.lower() for x in ["429", "rate limit", "too many requests", "overloaded", "high traffic"])
-
-    return {
-        "message": error_str,
-        "type": "unknown_error",
-        "code": "unknown",
-        "retryable": retryable
-    }
 
 
 def parse_execution_result(execution, max_output_length=4000):
@@ -220,11 +189,14 @@ def stream_code_execution(client, model: str, messages: List[Dict], sbx: Sandbox
         files_root: Root directory for file uploads (optional)
         extra_params: Extra parameters for API calls (optional)
     """
+    from .agents import call_llm
+
     turns = 0
     done = False
     figure_counter = 0  # Track figure numbers
     figure_data = {}  # Store figure data by name for result rendering
     has_result = False
+    debug_call_number = 0
 
     while not done and turns < MAX_TURNS:
         # Check abort before each turn
@@ -234,53 +206,18 @@ def stream_code_execution(client, model: str, messages: List[Dict], sbx: Sandbox
 
         turns += 1
 
-        # Retry loop for LLM calls
+        # LLM call with retries and debug events
         response = None
-        last_error = None
-
-        for attempt in range(MAX_RETRIES):
-            try:
-                # Call LLM with tools
-                call_params = {
-                    "messages": messages,
-                    "model": model,
-                    "tools": TOOLS,
-                    "tool_choice": "auto",
-                }
-                # Apply any extra params via extra_body (for OpenAI SDK compatibility)
-                if extra_params:
-                    call_params["extra_body"] = extra_params
-                response = client.chat.completions.create(**call_params)
-                break  # Success, exit retry loop
-            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"],
-                        "error_type": error_info["type"]
-                    }
-                    import time
-                    if abort_event:
-                        abort_event.wait(delay)
-                        if abort_event.is_set():
-                            yield {"type": "aborted"}
-                            return
-                    else:
-                        time.sleep(delay)
-                else:
-                    # Final attempt failed or non-retryable error
-                    yield {"type": "error", "content": error_info["message"]}
+        for event in call_llm(client, model, messages, tools=TOOLS, extra_params=extra_params, abort_event=abort_event, call_number=debug_call_number):
+            if "_response" in event:
+                response = event["_response"]
+                debug_call_number = event["_call_number"]
+            else:
+                yield event
+                if event.get("type") in ("error", "aborted"):
                     return
 
         if response is None:
-            yield {"type": "error", "content": f"LLM error after {MAX_RETRIES} attempts: {str(last_error)}"}
             return
 
         # Get response

backend/command.py

@@ -1,70 +1,37 @@
 """
-Command center backend - handles tool-based agent launching
+Command center backend - handles tool-based agent launching and direct tools
 """
 import json
 import logging
-import os
-import re
 from typing import List, Dict
 
 logger = logging.getLogger(__name__)
 
 # Tool definitions derived from agent registry
 from .agents import get_tools, get_agent_type_map, get_tool_arg
+from .tools import show_html as show_html_tool, execute_show_html
 
-TOOLS = get_tools()
+# Combine agent-launch tools with direct tools
+TOOLS = get_tools() + [show_html_tool]
+
+# Direct tools that execute synchronously (not sub-agent launches)
+DIRECT_TOOLS = {"show_html"}
 
 MAX_TURNS = 10  # Limit conversation turns in command center
-MAX_RETRIES = 3  # Maximum retries for LLM calls
-RETRY_DELAYS = [2, 5, 10]  # Delay in seconds for each retry attempt
-
-
-# Set FORCE_RETRY=1 to test retry logic with any error
-FORCE_RETRY_FOR_TESTING = os.environ.get("FORCE_RETRY", "0") == "1"
-if FORCE_RETRY_FOR_TESTING:
-    logger.debug("FORCE_RETRY_FOR_TESTING enabled")
-
-
-def parse_llm_error(error: Exception) -> dict:
-    """Parse LLM error to extract useful message for frontend"""
-    error_str = str(error)
-
-    # Try to extract JSON error message
-    try:
-        # Look for JSON in the error string
-        json_match = re.search(r'\{.*\}', error_str)
-        if json_match:
-            error_data = json.loads(json_match.group())
-            retryable = error_data.get("type") == "too_many_requests_error" or "429" in error_str
-            return {
-                "message": error_data.get("message", error_str),
-                "type": error_data.get("type", "unknown_error"),
-                "code": error_data.get("code", "unknown"),
-                "retryable": retryable or FORCE_RETRY_FOR_TESTING
-            }
-    except:
-        pass
-
-    # Check for common retryable errors
-    retryable = any(x in error_str.lower() for x in ["429", "rate limit", "too many requests", "overloaded", "high traffic"])
-
-    return {
-        "message": error_str,
-        "type": "unknown_error",
-        "code": "unknown",
-        "retryable": retryable or FORCE_RETRY_FOR_TESTING
-    }
-
-
-def stream_command_center(client, model: str, messages: List[Dict], extra_params: dict = None, abort_event=None):
+
+
+def stream_command_center(client, model: str, messages: List[Dict], extra_params: dict = None, abort_event=None, files_root: str = None):
     """
     Stream command center responses with agent launching capabilities
 
     Yields:
         dict: Updates with type 'thinking', 'launch', 'done', or 'error'
     """
+    from .agents import call_llm
+
     turns = 0
     done = False
+    debug_call_number = 0
 
     while not done and turns < MAX_TURNS:
         # Check abort before each turn
@@ -74,56 +41,18 @@ def stream_command_center(client, model: str, messages: List[Dict], extra_params
 
         turns += 1
 
-        # Retry loop for LLM calls
+        # LLM call with retries and debug events
         response = None
-        last_error = None
-
-        for attempt in range(MAX_RETRIES):
-            try:
-                # Simulate 429 error for testing if FORCE_RETRY is set
-                if FORCE_RETRY_FOR_TESTING and attempt < MAX_RETRIES - 1:
-                    raise Exception("Error code: 429 - {'message': \"We're experiencing high traffic right now! Please try again soon.\", 'type': 'too_many_requests_error', 'param': 'queue', 'code': 'queue_exceeded'}")
-
-                # Call LLM with tools
-                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  # Success, exit retry loop
-            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"],
-                        "error_type": error_info["type"]
-                    }
-                    import time
-                    if abort_event:
-                        abort_event.wait(delay)
-                        if abort_event.is_set():
-                            yield {"type": "aborted"}
-                            return
-                    else:
-                        time.sleep(delay)
-                else:
-                    # Final attempt failed or non-retryable error
-                    yield {"type": "error", "content": error_info["message"]}
+        for event in call_llm(client, model, messages, tools=TOOLS, extra_params=extra_params, abort_event=abort_event, call_number=debug_call_number):
+            if "_response" in event:
+                response = event["_response"]
+                debug_call_number = event["_call_number"]
+            else:
+                yield event
+                if event.get("type") in ("error", "aborted"):
                     return
 
         if response is None:
-            yield {"type": "error", "content": f"LLM error after {MAX_RETRIES} attempts: {str(last_error)}"}
             return
 
         # Get response
@@ -135,8 +64,9 @@ def stream_command_center(client, model: str, messages: List[Dict], extra_params
         if content.strip():
             yield {"type": "thinking", "content": content}
 
-        # Handle tool calls (agent launches)
+        # Handle tool calls (agent launches + direct tools)
         if tool_calls:
+            has_launches = False
             for tool_call in tool_calls:
                 # Check abort between tool calls
                 if abort_event and abort_event.is_set():
@@ -152,11 +82,59 @@ def stream_command_center(client, model: str, messages: List[Dict], extra_params
                     yield {"type": "error", "content": "Failed to parse tool arguments"}
                     return
 
-                # Map function names to agent types (derived from registry)
+                # --- Direct tools (execute synchronously) ---
+                if function_name in DIRECT_TOOLS:
+                    # Emit tool_start for frontend
+                    yield {
+                        "type": "tool_start",
+                        "tool": function_name,
+                        "args": args,
+                        "tool_call_id": tool_call.id,
+                        "arguments": tool_call.function.arguments,
+                        "thinking": content,
+                    }
+
+                    # Execute the tool
+                    if function_name == "show_html":
+                        result = execute_show_html(args.get("source", ""), files_root=files_root)
+                    else:
+                        result = {"content": f"Unknown direct tool: {function_name}"}
+
+                    # Emit tool_result for frontend
+                    yield {
+                        "type": "tool_result",
+                        "tool": function_name,
+                        "tool_call_id": tool_call.id,
+                        "result": result,
+                        "response": result.get("content", ""),
+                    }
+
+                    # Add to message history so LLM can continue
+                    messages.append({
+                        "role": "assistant",
+                        "content": content,
+                        "tool_calls": [{
+                            "id": tool_call.id,
+                            "type": "function",
+                            "function": {
+                                "name": function_name,
+                                "arguments": tool_call.function.arguments,
+                            }
+                        }]
+                    })
+                    messages.append({
+                        "role": "tool",
+                        "tool_call_id": tool_call.id,
+                        "content": result.get("content", ""),
+                    })
+                    continue
+
+                # --- Agent launch tools ---
                 agent_type_map = get_agent_type_map()
                 agent_type = agent_type_map.get(function_name)
 
                 if agent_type:
+                    has_launches = True
                     # Get the initial message using the registered arg name for this type
                     initial_message = args.get(get_tool_arg(agent_type)) or args.get("task") or args.get("message")
                     task_id = args.get("task_id", "")
@@ -193,8 +171,11 @@ def stream_command_center(client, model: str, messages: List[Dict], extra_params
                 else:
                     yield {"type": "error", "content": f"Unknown tool: {function_name}"}
                     return
-            # All agent launches processed — stop and let agents run
-            done = True
+
+            # If any agent launches happened, stop and let agents run
+            # If only direct tools, continue the loop so LLM can respond
+            if has_launches:
+                done = True
         else:
             # No tool calls - conversation complete
             messages.append({"role": "assistant", "content": content})

backend/image.py

@@ -12,7 +12,6 @@ import base64
 import json
 import logging
 import re
-import time
 from typing import List, Dict, Optional
 
 from .tools import (
@@ -60,26 +59,6 @@ def resize_image_for_vlm(base64_png: str) -> str:
         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, files_root: str = None) -> dict:
@@ -220,11 +199,14 @@ def stream_image_execution(
       - error: { content }
       - done: {}
     """
+    from .agents import call_llm
+
     turns = 0
     done = False
     image_store = {}
     image_counter = 0
     result_sent = False
+    debug_call_number = 0
 
     while not done and turns < MAX_TURNS:
         # Check abort before each turn
@@ -234,47 +216,18 @@ def stream_image_execution(
 
         turns += 1
 
-        # --- LLM call with retry ---
+        # LLM call with retries and debug events
         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"],
-                    }
-                    if abort_event:
-                        abort_event.wait(delay)
-                        if abort_event.is_set():
-                            yield {"type": "aborted"}
-                            return
-                    else:
-                        time.sleep(delay)
-                else:
-                    yield {"type": "error", "content": error_info["message"]}
+        for event in call_llm(client, model, messages, tools=TOOLS, extra_params=extra_params, abort_event=abort_event, call_number=debug_call_number):
+            if "_response" in event:
+                response = event["_response"]
+                debug_call_number = event["_call_number"]
+            else:
+                yield event
+                if event.get("type") in ("error", "aborted"):
                     return
 
         if response is None:
-            yield {"type": "error", "content": f"LLM error after {MAX_RETRIES} attempts: {str(last_error)}"}
             return
 
         # --- Parse response ---

backend/main.py

@@ -144,10 +144,6 @@ except ImportError:
 SANDBOXES: Dict[str, any] = {}
 SANDBOX_TIMEOUT = 300
 
-# Debug: Store message history for debugging per tab
-# Structure: {tab_id: [{call_number: int, timestamp: str, messages: List[dict]}]}
-MESSAGE_HISTORY: Dict[str, List[Dict]] = {}
-
 # Conversation history per tab (persistent across requests)
 # Structure: {tab_id: [messages...]}
 CONVERSATION_HISTORY: Dict[str, List[Dict]] = {}
@@ -282,23 +278,6 @@ app.add_middleware(
 # Agent type registry is in agents.py — system prompts, tools, and metadata are all defined there
 
 
-def record_api_call(tab_id: str, messages: List[dict]):
-    """Record an API call for debugging purposes"""
-    global MESSAGE_HISTORY
-
-    if tab_id not in MESSAGE_HISTORY:
-        MESSAGE_HISTORY[tab_id] = []
-
-    call_number = len(MESSAGE_HISTORY[tab_id]) + 1
-    timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
-
-    MESSAGE_HISTORY[tab_id].append({
-        "call_number": call_number,
-        "timestamp": timestamp,
-        "messages": messages
-    })
-
-
 class Message(BaseModel):
     role: str
     content: str
@@ -318,6 +297,7 @@ class ChatRequest(BaseModel):
     token: Optional[str] = None  # Optional auth token
     model: Optional[str] = "gpt-4"  # Model name
     extra_params: Optional[Dict] = None  # Extra parameters for API calls (e.g., enable_thinking)
+    multimodal: bool = False  # Whether the model supports vision/image input
     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
@@ -365,17 +345,18 @@ async def stream_code_agent(
     parent_agent_id: Optional[str] = None,
     frontend_context: Optional[Dict] = None,
     extra_params: Optional[Dict] = None,
-    files_root: str = None
+    files_root: str = None,
+    multimodal: bool = False
 ):
     """Handle code agent with execution capabilities"""
     abort_event = register_agent(tab_id, parent_agent_id)
     try:
-        async for chunk in _stream_code_agent_inner(messages, endpoint, token, model, e2b_key, session_id, tab_id, frontend_context, extra_params, abort_event, files_root):
+        async for chunk in _stream_code_agent_inner(messages, endpoint, token, model, e2b_key, session_id, tab_id, frontend_context, extra_params, abort_event, files_root, multimodal):
             yield chunk
     finally:
         unregister_agent(tab_id)
 
-async def _stream_code_agent_inner(messages, endpoint, token, model, e2b_key, session_id, tab_id, frontend_context, extra_params, abort_event, files_root=None):
+async def _stream_code_agent_inner(messages, endpoint, token, model, e2b_key, session_id, tab_id, frontend_context, extra_params, abort_event, files_root=None, multimodal=False):
     if not E2B_AVAILABLE:
         yield f"data: {json.dumps({'type': 'error', 'content': 'E2B not available. Install with: pip install e2b-code-interpreter'})}\n\n"
         return
@@ -401,8 +382,8 @@ async def _stream_code_agent_inner(messages, endpoint, token, model, e2b_key, se
             {"role": "system", "content": system_prompt}
         ] + messages
 
-        # Store for debugging
-        record_api_call(tab_id, full_messages)
+
+
 
         # Stream code execution in a thread to avoid blocking the event loop
         loop = asyncio.get_event_loop()
@@ -410,7 +391,7 @@ async def _stream_code_agent_inner(messages, endpoint, token, model, e2b_key, se
 
         def run_sync_generator():
             try:
-                for update in stream_code_execution(client, model, full_messages, sbx, files_root=files_root or FILES_ROOT, extra_params=extra_params, abort_event=abort_event):
+                for update in stream_code_execution(client, model, full_messages, sbx, files_root=files_root or FILES_ROOT, extra_params=extra_params, abort_event=abort_event, multimodal=multimodal):
                     loop.call_soon_threadsafe(queue.put_nowait, update)
             finally:
                 loop.call_soon_threadsafe(queue.put_nowait, None)  # Signal completion
@@ -460,7 +441,7 @@ async def _stream_code_agent_inner(messages, endpoint, token, model, e2b_key, se
 
                 def run_retry_generator():
                     try:
-                        for update in stream_code_execution(client, model, full_messages, sbx, files_root=files_root or FILES_ROOT, extra_params=extra_params, abort_event=abort_event):
+                        for update in stream_code_execution(client, model, full_messages, sbx, files_root=files_root or FILES_ROOT, extra_params=extra_params, abort_event=abort_event, multimodal=multimodal):
                             loop.call_soon_threadsafe(retry_queue.put_nowait, update)
                     finally:
                         loop.call_soon_threadsafe(retry_queue.put_nowait, None)
@@ -533,10 +514,6 @@ async def _stream_research_agent_inner(messages, endpoint, token, model, serper_
         # Get system prompt for research (with file tree)
         system_prompt = get_system_prompt("research")
 
-        # Store for debugging (simplified version for research)
-        full_messages = [{"role": "system", "content": system_prompt}] + messages
-        record_api_call(tab_id, full_messages)
-
         # Use sub-agent model if provided, otherwise fall back to main model
         analysis_model = sub_agent_model if sub_agent_model else model
 
@@ -583,17 +560,18 @@ async def stream_command_center_handler(
     token: Optional[str],
     model: str,
     tab_id: str = "0",
-    extra_params: Optional[Dict] = None
+    extra_params: Optional[Dict] = None,
+    files_root: str = None,
 ):
     """Handle command center with tool-based agent launching"""
     abort_event = register_agent(tab_id)
     try:
-        async for chunk in _stream_command_center_inner(messages, endpoint, token, model, tab_id, extra_params, abort_event):
+        async for chunk in _stream_command_center_inner(messages, endpoint, token, model, tab_id, extra_params, abort_event, files_root=files_root):
             yield chunk
     finally:
         unregister_agent(tab_id)
 
-async def _stream_command_center_inner(messages, endpoint, token, model, tab_id, extra_params, abort_event):
+async def _stream_command_center_inner(messages, endpoint, token, model, tab_id, extra_params, abort_event, files_root=None):
     if not COMMAND_AVAILABLE:
         # Fallback to regular chat if command tools not available
         async for chunk in stream_chat_response(messages, endpoint, token, model, "command", tab_id, extra_params):
@@ -611,8 +589,8 @@ async def _stream_command_center_inner(messages, endpoint, token, model, tab_id,
 
         logger.debug(f"tab_id={tab_id}, messages={len(messages)}, full_messages={len(full_messages)}")
 
-        # Store for debugging
-        record_api_call(tab_id, full_messages)
+
+
 
         # Stream command center execution in a thread to avoid blocking the event loop
         loop = asyncio.get_event_loop()
@@ -620,7 +598,7 @@ async def _stream_command_center_inner(messages, endpoint, token, model, tab_id,
 
         def run_sync_generator():
             try:
-                for update in stream_command_center(client, model, full_messages, extra_params=extra_params, abort_event=abort_event):
+                for update in stream_command_center(client, model, full_messages, extra_params=extra_params, abort_event=abort_event, files_root=files_root or FILES_ROOT):
                     loop.call_soon_threadsafe(queue.put_nowait, update)
             finally:
                 loop.call_soon_threadsafe(queue.put_nowait, None)  # Signal completion
@@ -653,17 +631,18 @@ async def stream_web_agent(
     serper_key: str,
     tab_id: str = "default",
     parent_agent_id: Optional[str] = None,
-    extra_params: Optional[Dict] = None
+    extra_params: Optional[Dict] = None,
+    multimodal: bool = False
 ):
     """Handle web agent with tools (search, read, screenshot)"""
     abort_event = register_agent(tab_id, parent_agent_id)
     try:
-        async for chunk in _stream_web_agent_inner(messages, endpoint, token, model, serper_key, tab_id, extra_params, abort_event):
+        async for chunk in _stream_web_agent_inner(messages, endpoint, token, model, serper_key, tab_id, extra_params, abort_event, multimodal):
             yield chunk
     finally:
         unregister_agent(tab_id)
 
-async def _stream_web_agent_inner(messages, endpoint, token, model, serper_key, tab_id, extra_params, abort_event):
+async def _stream_web_agent_inner(messages, endpoint, token, model, serper_key, tab_id, extra_params, abort_event, multimodal=False):
     if not AGENT_AVAILABLE:
         async for chunk in stream_chat_response(messages, endpoint, token, model, "agent", tab_id, extra_params):
             yield chunk
@@ -675,14 +654,14 @@ async def _stream_web_agent_inner(messages, endpoint, token, model, serper_key,
         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, abort_event=abort_event):
+                for update in stream_agent_execution(client, model, full_messages, serper_key, extra_params=extra_params, abort_event=abort_event, multimodal=multimodal):
                     loop.call_soon_threadsafe(queue.put_nowait, update)
             finally:
                 loop.call_soon_threadsafe(queue.put_nowait, None)
@@ -715,17 +694,18 @@ async def stream_image_agent(
     tab_id: str = "default",
     parent_agent_id: Optional[str] = None,
     extra_params: Optional[Dict] = None,
-    files_root: str = None
+    files_root: str = None,
+    multimodal: bool = False
 ):
     """Handle image agent with HuggingFace image generation tools"""
     abort_event = register_agent(tab_id, parent_agent_id)
     try:
-        async for chunk in _stream_image_agent_inner(messages, endpoint, token, model, hf_token, image_gen_model, image_edit_model, tab_id, extra_params, abort_event, files_root):
+        async for chunk in _stream_image_agent_inner(messages, endpoint, token, model, hf_token, image_gen_model, image_edit_model, tab_id, extra_params, abort_event, files_root, multimodal):
             yield chunk
     finally:
         unregister_agent(tab_id)
 
-async def _stream_image_agent_inner(messages, endpoint, token, model, hf_token, image_gen_model, image_edit_model, tab_id, extra_params, abort_event, files_root=None):
+async def _stream_image_agent_inner(messages, endpoint, token, model, hf_token, image_gen_model, image_edit_model, tab_id, extra_params, abort_event, files_root=None, multimodal=False):
     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
@@ -740,14 +720,14 @@ async def _stream_image_agent_inner(messages, endpoint, token, model, hf_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, abort_event=abort_event, files_root=files_root):
+                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, abort_event=abort_event, files_root=files_root, multimodal=multimodal):
                     loop.call_soon_threadsafe(queue.put_nowait, update)
             finally:
                 loop.call_soon_threadsafe(queue.put_nowait, None)
@@ -789,8 +769,8 @@ async def stream_chat_response(
             {"role": "system", "content": system_prompt}
         ] + messages
 
-        # Store for debugging
-        record_api_call(tab_id, full_messages)
+
+
 
         # Handle Hugging Face endpoint with fallback to HF_TOKEN
         if not token and "huggingface.co" in endpoint:
@@ -1000,7 +980,8 @@ async def chat_stream(raw_request: Request, request: ChatRequest):
                 user_key(user_id, request.parent_agent_id) if request.parent_agent_id else None,
                 frontend_context,
                 request.extra_params,
-                files_root=files_root
+                files_root=files_root,
+                multimodal=request.multimodal
             ),
             media_type="text/event-stream",
             headers={
@@ -1055,7 +1036,8 @@ async def chat_stream(raw_request: Request, request: ChatRequest):
                 uk_tab_id,
                 user_key(user_id, request.parent_agent_id) if request.parent_agent_id else None,
                 request.extra_params,
-                files_root=files_root
+                files_root=files_root,
+                multimodal=request.multimodal
             ),
             media_type="text/event-stream",
             headers={
@@ -1076,7 +1058,8 @@ async def chat_stream(raw_request: Request, request: ChatRequest):
                 serper_key or "",
                 uk_tab_id,
                 user_key(user_id, request.parent_agent_id) if request.parent_agent_id else None,
-                request.extra_params
+                request.extra_params,
+                multimodal=request.multimodal
             ),
             media_type="text/event-stream",
             headers={
@@ -1095,7 +1078,8 @@ async def chat_stream(raw_request: Request, request: ChatRequest):
                 token,
                 request.model or "gpt-4",
                 uk_tab_id,
-                request.extra_params
+                request.extra_params,
+                files_root=files_root,
             ),
             media_type="text/event-stream",
             headers={
@@ -1220,11 +1204,9 @@ async def add_tool_response(raw_request: Request, request: dict):
 
 @app.get("/api/debug/messages/{tab_id}")
 async def get_debug_messages(request: Request, tab_id: str):
-    """Get the message history for a specific tab for debugging"""
-    user_id = get_user_id(request)
-    uk_tab_id = user_key(user_id, tab_id)
-    if uk_tab_id in MESSAGE_HISTORY:
-        return {"calls": MESSAGE_HISTORY[uk_tab_id]}
+    """Get the message history for a specific tab for debugging.
+    Debug data is now streamed via SSE events (debug_call_input/output) and stored in the frontend.
+    This endpoint is kept for backward compatibility but returns empty."""
     return {"calls": []}
 
 
@@ -1387,13 +1369,11 @@ def select_session(session_name: str, user_id: str = '') -> bool:
     # In multi-user mode, only clear keys belonging to this user
     if MULTI_USER and user_id:
         prefix = f"{user_id}:"
-        for d in (CONVERSATION_HISTORY, MESSAGE_HISTORY):
-            keys_to_remove = [k for k in d if k.startswith(prefix)]
-            for k in keys_to_remove:
-                del d[k]
+        keys_to_remove = [k for k in CONVERSATION_HISTORY if k.startswith(prefix)]
+        for k in keys_to_remove:
+            del CONVERSATION_HISTORY[k]
     else:
         CONVERSATION_HISTORY.clear()
-        MESSAGE_HISTORY.clear()
 
     return True
 

backend/tools.py

@@ -569,3 +569,60 @@ def extract_and_download_images(markdown: str, max_images: int = 5) -> List[str]
 # Keep old name as alias
 def execute_read_image_url(url: str) -> Optional[str]:
     return execute_read_image(url)
+
+
+# ============================================================
+# HTML display tool (used by command center)
+# ============================================================
+
+show_html = {
+    "type": "function",
+    "function": {
+        "name": "show_html",
+        "description": "Display HTML content in the chat. Accepts either a file path to an HTML file or a raw HTML string. Use this to show interactive visualizations, maps, charts, or any HTML content produced by a code agent.",
+        "parameters": {
+            "type": "object",
+            "properties": {
+                "source": {
+                    "type": "string",
+                    "description": "Either a file path (e.g., 'workspace/map.html') or a raw HTML string (starting with '<')"
+                }
+            },
+            "required": ["source"]
+        }
+    }
+}
+
+
+def execute_show_html(source: str, files_root: str = None) -> dict:
+    """Load HTML from a file path or use a raw HTML string.
+
+    Returns dict with:
+        - "content": str description for the LLM
+        - "html": the HTML content string (or None on error)
+    """
+    import os
+
+    if source.strip().startswith("<"):
+        return {
+            "content": "Rendered inline HTML content.",
+            "html": source,
+        }
+
+    # File path — resolve relative to files_root
+    file_path = source
+    if files_root and not os.path.isabs(file_path):
+        file_path = os.path.join(files_root, file_path)
+
+    try:
+        with open(file_path, "r", encoding="utf-8") as f:
+            html_content = f.read()
+        return {
+            "content": f"Rendered HTML from file: {source}",
+            "html": html_content,
+        }
+    except Exception as e:
+        return {
+            "content": f"Failed to load HTML from '{source}': {e}",
+            "html": 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=103">
+    <link rel="stylesheet" href="style.css?v=111">
 </head>
 <body>
     <div class="app-container">
@@ -355,9 +355,6 @@
             <button class="debug-close" id="debugClose">×</button>
         </div>
         <div class="debug-body">
-            <div class="debug-controls">
-                <button class="debug-refresh" id="debugRefresh">Refresh</button>
-            </div>
             <pre class="debug-content" id="debugContent">No message history available yet.</pre>
         </div>
     </div>
@@ -508,6 +505,6 @@
     </div>
 
     <script src="research-ui.js?v=23"></script>
-    <script src="script.js?v=90"></script>
+    <script src="script.js?v=98"></script>
 </body>
 </html>

frontend/script.js

@@ -97,6 +97,10 @@ const toolCallIds = {};
 // Maps "figure_1" -> {type, data} and "image_1" -> {type: "png", data: base64}
 const globalFigureRegistry = {};
 
+// Debug: per-tab LLM call history (populated by SSE debug_call_input/output events)
+// Maps tabId -> [{call_number, timestamp, input, output, error}]
+const debugHistory = {};
+
 // Track agents by task_id for reuse (maps task_id -> tabId)
 const taskIdToTabId = {};
 
@@ -133,6 +137,7 @@ function resetLocalState() {
     Object.keys(actionWidgets).forEach(k => delete actionWidgets[k]);
     Object.keys(toolCallIds).forEach(k => delete toolCallIds[k]);
     Object.keys(globalFigureRegistry).forEach(k => delete globalFigureRegistry[k]);
+    Object.keys(debugHistory).forEach(k => delete debugHistory[k]);
     Object.keys(taskIdToTabId).forEach(k => delete taskIdToTabId[k]);
     researchQueryTabIds = {};
     showAllTurns = true;
@@ -2107,7 +2112,7 @@ async function streamChatResponse(messages, chatContainer, agentType, tabId) {
                     const data = JSON.parse(line.slice(6));
 
                     // Hide progress widget on first meaningful response
-                    if (!progressHidden && data.type !== 'generating' && data.type !== 'retry') {
+                    if (!progressHidden && data.type !== 'generating' && data.type !== 'retry' && !data.type.startsWith('debug_')) {
                         hideProgressWidget(chatContainer);
                         progressHidden = true;
                     }
@@ -2329,7 +2334,8 @@ async function streamChatResponse(messages, chatContainer, agentType, tabId) {
                             'generate_image': 'GENERATE',
                             'edit_image': 'EDIT',
                             'read_image_url': 'LOAD IMAGE',
-                            'read_image': 'LOAD IMAGE'
+                            'read_image': 'LOAD IMAGE',
+                            'show_html': 'HTML'
                         };
                         const toolDescriptions = {
                             'web_search': data.args?.query || '',
@@ -2338,22 +2344,27 @@ async function streamChatResponse(messages, chatContainer, agentType, tabId) {
                             'generate_image': data.args?.prompt || '',
                             'edit_image': `${data.args?.prompt || ''} (from ${data.args?.source || ''})`,
                             'read_image_url': data.args?.url || '',
-                            'read_image': data.args?.source || ''
+                            'read_image': data.args?.source || '',
+                            'show_html': data.args?.source?.substring(0, 80) || ''
                         };
                         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';
+                        // Reuse currentMessageEl (from thinking) if it exists, like launch events do
+                        let toolCallMsg = currentMessageEl;
+                        if (!toolCallMsg) {
+                            toolCallMsg = document.createElement('div');
+                            toolCallMsg.className = 'message assistant';
+                            toolCallMsg.style.display = 'none';
+                            chatContainer.appendChild(toolCallMsg);
+                        }
                         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');
@@ -2427,6 +2438,21 @@ async function streamChatResponse(messages, chatContainer, agentType, tabId) {
                         } else if ((data.tool === 'generate_image' || data.tool === 'edit_image' || data.tool === 'read_image_url' || data.tool === 'read_image') && !data.image) {
                             const errMsg = data.response || 'Failed to process image';
                             outputHtml = `<div class="tool-cell-read-summary">${escapeHtml(errMsg)}</div>`;
+                        } else if (data.tool === 'show_html' && data.result?.html) {
+                            // Create iframe programmatically to avoid escaping issues with srcdoc
+                            if (lastToolCell) {
+                                const outputEl = document.createElement('div');
+                                outputEl.className = 'tool-cell-output';
+                                const iframe = document.createElement('iframe');
+                                iframe.className = 'show-html-iframe';
+                                iframe.sandbox = 'allow-scripts allow-same-origin';
+                                iframe.srcdoc = data.result.html;
+                                outputEl.appendChild(iframe);
+                                lastToolCell.appendChild(outputEl);
+                            }
+                        } else if (data.tool === 'show_html' && !data.result?.html) {
+                            const errMsg = data.response || 'Failed to load HTML';
+                            outputHtml = `<div class="tool-cell-read-summary">${escapeHtml(errMsg)}</div>`;
                         }
 
                         if (outputHtml && lastToolCell) {
@@ -2490,6 +2516,29 @@ async function streamChatResponse(messages, chatContainer, agentType, tabId) {
                         // Reset current message element so any subsequent thinking starts fresh
                         currentMessageEl = null;
 
+                    } else if (data.type === 'debug_call_input') {
+                        // Debug: LLM call input (before API call)
+                        if (!debugHistory[tabId]) debugHistory[tabId] = [];
+                        debugHistory[tabId].push({
+                            call_number: data.call_number,
+                            timestamp: new Date().toLocaleTimeString(),
+                            input: data.messages,
+                            output: null,
+                            error: null
+                        });
+                        if (document.getElementById('debugPanel')?.classList.contains('active')) loadDebugMessages();
+
+                    } else if (data.type === 'debug_call_output') {
+                        // Debug: LLM call output (after API call)
+                        // Match the last pending call (call_numbers reset per streaming request)
+                        const calls = debugHistory[tabId] || [];
+                        const call = calls.findLast(c => c.output === null && c.error === null);
+                        if (call) {
+                            call.output = data.response || null;
+                            call.error = data.error || null;
+                        }
+                        if (document.getElementById('debugPanel')?.classList.contains('active')) loadDebugMessages();
+
                     } else if (data.type === 'aborted') {
                         // Agent was aborted by user
                         hideProgressWidget(chatContainer);
@@ -3264,6 +3313,14 @@ function restoreWorkspace(workspace) {
         }
     }
 
+    // Restore debug history
+    if (workspace.debugHistory) {
+        Object.keys(debugHistory).forEach(k => delete debugHistory[k]);
+        for (const [tabId, calls] of Object.entries(workspace.debugHistory)) {
+            debugHistory[tabId] = calls;
+        }
+    }
+
     // Restore tabs (skip command center as it already exists in HTML)
     const tabs = workspace.tabs || [];
     for (const tabData of tabs) {
@@ -3636,7 +3693,8 @@ function serializeWorkspace() {
         activeTabId: activeTabId,
         agentCounters: agentCounters,
         tabs: [],
-        timelineData: serializeTimelineData()
+        timelineData: serializeTimelineData(),
+        debugHistory: debugHistory
     };
 
     // Serialize command center (tab 0)
@@ -4767,7 +4825,6 @@ function openImageModal(src) {
 const debugPanel = document.getElementById('debugPanel');
 const debugBtn = document.getElementById('debugBtn');
 const debugClose = document.getElementById('debugClose');
-const debugRefresh = document.getElementById('debugRefresh');
 const debugContent = document.getElementById('debugContent');
 
 // Toggle debug panel
@@ -4810,57 +4867,77 @@ if (debugClose) {
     });
 }
 
-// Refresh debug messages
-if (debugRefresh) {
-    debugRefresh.addEventListener('click', () => {
-        loadDebugMessages();
+
+// Load debug messages from backend
+function formatDebugJson(obj) {
+    /**
+     * Format an object as HTML-escaped JSON, replacing base64 image data
+     * with clickable placeholders that show a thumbnail on hover.
+     */
+    // Collect base64 images and replace with placeholders before escaping
+    const images = [];
+    const json = JSON.stringify(obj, null, 2);
+    const placeholder = json.replace(
+        /"(data:image\/[^;]+;base64,)([A-Za-z0-9+/=\n]{200,})"/g,
+        (match, prefix, b64) => {
+            const idx = images.length;
+            const sizeKB = (b64.length * 0.75 / 1024).toFixed(1);
+            images.push(prefix + b64);
+            return `"__DEBUG_IMG_${idx}_${sizeKB}KB__"`;
+        }
+    );
+    // Now HTML-escape the JSON (placeholders are safe ASCII)
+    let html = escapeHtml(placeholder);
+    // Replace placeholders with hoverable image thumbnails
+    html = html.replace(/__DEBUG_IMG_(\d+)_([\d.]+KB)__/g, (match, idx, size) => {
+        const src = images[parseInt(idx)];
+        return `<span class="debug-image-placeholder" onmouseenter="this.querySelector('.debug-image-tooltip').style.display='block'" onmouseleave="this.querySelector('.debug-image-tooltip').style.display='none'">[image ${size}]<span class="debug-image-tooltip"><img src="${src}"></span></span>`;
     });
+    return html;
 }
 
-// Load debug messages from backend
-async function loadDebugMessages() {
-    try {
-        debugContent.innerHTML = '<div style="padding: 10px; color: #666;">Loading...</div>';
+function loadDebugMessages() {
+    const calls = debugHistory[activeTabId] || [];
 
-        // Get current active tab ID
-        const activeTab = document.querySelector('.tab.active');
-        const tabId = activeTab ? activeTab.dataset.tabId : '0';
+    if (calls.length === 0) {
+        debugContent.innerHTML = '<div style="padding: 10px; color: var(--text-secondary);">No LLM calls recorded yet.<br><br>Send a message in this tab to see the call history here.</div>';
+        return;
+    }
 
-        const response = await apiFetch(`/api/debug/messages/${tabId}`);
+    debugContent.innerHTML = calls.map((call, i) => {
+        const isLast = i === calls.length - 1;
+        const arrow = isLast ? '▼' : '▶';
+        const display = isLast ? 'block' : 'none';
+        const msgCount = call.input ? call.input.length : 0;
 
-        if (!response.ok) {
-            throw new Error(`HTTP error! status: ${response.status}`);
-        }
+        const inputHtml = call.input ? formatDebugJson(call.input) : '<em>No input</em>';
 
-        const data = await response.json();
-
-        if (data.calls && data.calls.length > 0) {
-            // Create collapsible UI for each API call
-            let html = '';
-            data.calls.forEach((call, index) => {
-                const isExpanded = index === data.calls.length - 1; // Expand only the last call by default
-                html += `<div class="debug-call-item"><div class="debug-call-header" onclick="toggleDebugCall(${index})"><span class="debug-call-arrow" id="arrow-${index}">${isExpanded ? '▼' : '▶'}</span><span class="debug-call-title">LLM Call #${call.call_number}</span><span class="debug-call-time">${call.timestamp}</span></div><pre class="debug-call-content" id="call-${index}" style="display: ${isExpanded ? 'block' : 'none'};">${JSON.stringify(call.messages, null, 2)}</pre></div>`;
-            });
-            debugContent.innerHTML = html;
+        let outputHtml;
+        if (call.error) {
+            outputHtml = `<span style="color: #d32f2f;">${escapeHtml(call.error)}</span>`;
+        } else if (call.output) {
+            outputHtml = formatDebugJson(call.output);
         } else {
-            debugContent.innerHTML = '<div style="padding: 10px; color: #666;">No message history available yet.<br><br>Send a message in this tab to see the message history here.</div>';
+            outputHtml = '<em>Pending...</em>';
         }
-    } catch (error) {
-        console.error('Failed to load debug messages:', error);
-        debugContent.innerHTML = `<div style="padding: 10px; color: #d32f2f;">Error loading debug messages: ${error.message}</div>`;
-    }
+
+        return `<div class="debug-call-item${isLast ? ' expanded' : ''}" id="callitem-${i}"><div class="debug-call-header" onclick="toggleDebugCall(${i})"><span class="debug-call-arrow" id="arrow-${i}">${arrow}</span><span class="debug-call-title">Call #${i + 1}</span><span class="debug-call-time">${call.timestamp}</span></div><div class="debug-call-content" id="call-${i}" style="display: ${display};"><div class="debug-section-label">INPUT (${msgCount} messages)</div><pre>${inputHtml}</pre><div class="debug-section-label">OUTPUT</div><pre>${outputHtml}</pre></div></div>`;
+    }).join('');
 }
 
 // Toggle debug call expansion
 window.toggleDebugCall = function(index) {
     const content = document.getElementById(`call-${index}`);
     const arrow = document.getElementById(`arrow-${index}`);
+    const item = document.getElementById(`callitem-${index}`);
     if (content.style.display === 'none') {
         content.style.display = 'block';
         arrow.textContent = '▼';
+        item.classList.add('expanded');
     } else {
         content.style.display = 'none';
         arrow.textContent = '▶';
+        item.classList.remove('expanded');
     }
 }
 
@@ -5266,6 +5343,65 @@ if (showHiddenFiles) {
     });
 }
 
+// Drag & drop upload on files panel
+if (fileTree) {
+    let dragOverFolder = null;
+
+    fileTree.addEventListener('dragover', (e) => {
+        // Only handle external file drops (not internal path drags)
+        if (!e.dataTransfer.types.includes('Files')) return;
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'copy';
+
+        // Find folder under cursor
+        const folderItem = e.target.closest('.file-tree-item.folder');
+        if (folderItem) {
+            if (dragOverFolder !== folderItem) {
+                if (dragOverFolder) dragOverFolder.classList.remove('drag-over');
+                fileTree.classList.remove('drag-over-root');
+                folderItem.classList.add('drag-over');
+                dragOverFolder = folderItem;
+            }
+        } else {
+            if (dragOverFolder) { dragOverFolder.classList.remove('drag-over'); dragOverFolder = null; }
+            fileTree.classList.add('drag-over-root');
+        }
+    });
+
+    fileTree.addEventListener('dragleave', (e) => {
+        // Only clear when leaving the fileTree entirely
+        if (!fileTree.contains(e.relatedTarget)) {
+            if (dragOverFolder) { dragOverFolder.classList.remove('drag-over'); dragOverFolder = null; }
+            fileTree.classList.remove('drag-over-root');
+        }
+    });
+
+    fileTree.addEventListener('drop', async (e) => {
+        if (!e.dataTransfer.files.length) return;
+        e.preventDefault();
+
+        // Determine target folder
+        const folderItem = e.target.closest('.file-tree-item.folder');
+        const folder = folderItem ? folderItem.dataset.path : '';
+
+        // Clear highlights
+        if (dragOverFolder) { dragOverFolder.classList.remove('drag-over'); dragOverFolder = null; }
+        fileTree.classList.remove('drag-over-root');
+
+        // Upload all files
+        for (const file of e.dataTransfer.files) {
+            const formData = new FormData();
+            formData.append('file', file);
+            try {
+                await apiFetch(`/api/files/upload?folder=${encodeURIComponent(folder)}`, { method: 'POST', body: formData });
+            } catch (err) {
+                console.error('Upload failed:', err);
+            }
+        }
+        loadFileTree();
+    });
+}
+
 // Sessions panel (same pattern as Files/Settings/Debug panels)
 const sessionsPanel = document.getElementById('sessionsPanel');
 const sessionsPanelClose = document.getElementById('sessionsPanelClose');

frontend/style.css

@@ -2764,8 +2764,8 @@ pre code [class*="token"] {
 .debug-panel {
     position: fixed;
     top: 25px;
-    right: -600px;
-    width: 600px;
+    right: -450px;
+    width: 450px;
     height: calc(100vh - 25px);
     background: var(--bg-card);
     border-left: 1px solid var(--border-primary);
@@ -2783,8 +2783,8 @@ pre code [class*="token"] {
     padding: 6px 12px;
     border-bottom: 1px solid var(--border-primary);
     display: flex;
-    justify-content: space-between;
     align-items: center;
+    gap: 8px;
     background: var(--theme-accent);
 }
 
@@ -2795,6 +2795,7 @@ pre code [class*="token"] {
     color: white;
     text-transform: uppercase;
     letter-spacing: 0.5px;
+    flex: 1;
 }
 
 .debug-close {
@@ -2824,31 +2825,6 @@ pre code [class*="token"] {
     flex-direction: column;
 }
 
-.debug-controls {
-    padding: 6px 12px;
-    border-bottom: 1px solid var(--border-primary);
-    background: var(--bg-tertiary);
-}
-
-.debug-refresh {
-    padding: 4px 10px;
-    background: var(--theme-accent);
-    color: white;
-    border: none;
-    border-radius: 3px;
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 10px;
-    font-weight: 500;
-    cursor: pointer;
-    text-transform: uppercase;
-    letter-spacing: 0.3px;
-    transition: opacity 0.15s;
-}
-
-.debug-refresh:hover {
-    opacity: 0.9;
-}
-
 .debug-content {
     flex: 1;
     padding: 0;
@@ -2862,16 +2838,19 @@ pre code [class*="token"] {
 
 .debug-call-item {
     border-bottom: 1px solid var(--border-primary);
-    background: var(--bg-card);
+}
+
+.debug-call-item.expanded {
+    border-bottom: none;
 }
 
 .debug-call-header {
-    padding: 6px 12px;
-    background: var(--bg-card);
+    padding: 2px 10px;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 8px;
+    line-height: 1.5;
     transition: background 0.15s;
     user-select: none;
 }
@@ -2900,16 +2879,60 @@ pre code [class*="token"] {
 }
 
 .debug-call-content {
-    margin: 0;
     padding: 8px 12px;
-    background: var(--bg-tertiary);
-    border-top: 1px solid var(--border-primary);
+    overflow-x: auto;
+    font-size: 10px;
+}
+
+.debug-call-content pre {
+    margin: 0;
     white-space: pre-wrap;
     word-wrap: break-word;
-    overflow-x: auto;
     font-size: 10px;
 }
 
+.debug-section-label {
+    font-size: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
+    color: var(--text-muted);
+    margin: 8px 0 4px 0;
+    letter-spacing: 0.5px;
+}
+
+.debug-section-label:first-child {
+    margin-top: 0;
+}
+
+.debug-image-placeholder {
+    background: var(--theme-bg);
+    color: var(--theme-accent);
+    padding: 1px 4px;
+    border-radius: 3px;
+    cursor: pointer;
+    position: relative;
+    display: inline;
+}
+
+.debug-image-tooltip {
+    display: none;
+    position: absolute;
+    bottom: 100%;
+    left: 0;
+    z-index: 1001;
+    padding: 4px;
+    background: var(--bg-card);
+    border: 1px solid var(--border-primary);
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+}
+
+.debug-image-tooltip img {
+    max-width: 200px;
+    max-height: 200px;
+    display: block;
+}
+
 /* Debug button uses same styling as settings/files buttons */
 
 /* Settings Panel (side panel like debug) */
@@ -3541,6 +3564,15 @@ pre code [class*="token"] {
     border-radius: 3px;
 }
 
+.file-tree-item.folder.drag-over > .file-tree-line {
+    background: rgba(var(--theme-accent-rgb), 0.15);
+    border-radius: 3px;
+}
+
+#fileTree.drag-over-root {
+    background: rgba(var(--theme-accent-rgb), 0.06);
+}
+
 /* Inline code file path links */
 .file-path-link {
     text-decoration: none;
@@ -4125,6 +4157,14 @@ pre code [class*="token"] {
     font-size: 12px;
 }
 
+.tool-cell-output .show-html-iframe {
+    width: 100%;
+    height: 400px;
+    border: 1px solid var(--border-primary);
+    border-radius: 4px;
+    background: #fff;
+}
+
 .search-results-content {
     display: flex;
     flex-direction: column;