v0.15

.gitignore

@@ -1 +1,219 @@
 settings.json
+
+
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[codz]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#   Usually these files are written by a python script from a template
+#   before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py.cover
+.hypothesis/
+.pytest_cache/
+cover/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+.pybuilder/
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+#   For a library or package, you might want to ignore these files since the code is
+#   intended to run in multiple environments; otherwise, check them in:
+# .python-version
+
+# pipenv
+#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
+#   However, in case of collaboration, if having platform-specific dependencies or dependencies
+#   having no cross-platform support, pipenv may install dependencies that don't work, or not
+#   install all needed dependencies.
+# Pipfile.lock
+
+# UV
+#   Similar to Pipfile.lock, it is generally recommended to include uv.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+# uv.lock
+
+# poetry
+#   Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+#   https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
+# poetry.lock
+# poetry.toml
+
+# pdm
+#   Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
+#   pdm recommends including project-wide configuration in pdm.toml, but excluding .pdm-python.
+#   https://pdm-project.org/en/latest/usage/project/#working-with-version-control
+# pdm.lock
+# pdm.toml
+.pdm-python
+.pdm-build/
+
+# pixi
+#   Similar to Pipfile.lock, it is generally recommended to include pixi.lock in version control.
+# pixi.lock
+#   Pixi creates a virtual environment in the .pixi directory, just like venv module creates one
+#   in the .venv directory. It is recommended not to include this directory in version control.
+.pixi
+
+# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
+__pypackages__/
+
+# Celery stuff
+celerybeat-schedule
+celerybeat.pid
+
+# Redis
+*.rdb
+*.aof
+*.pid
+
+# RabbitMQ
+mnesia/
+rabbitmq/
+rabbitmq-data/
+
+# ActiveMQ
+activemq-data/
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.envrc
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/
+
+# pytype static type analyzer
+.pytype/
+
+# Cython debug symbols
+cython_debug/
+
+# PyCharm
+#   JetBrains specific template is maintained in a separate JetBrains.gitignore that can
+#   be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
+#   and can be added to the global gitignore or merged into this file.  For a more nuclear
+#   option (not recommended) you can uncomment the following to ignore the entire idea folder.
+# .idea/
+
+# Abstra
+#   Abstra is an AI-powered process automation framework.
+#   Ignore directories containing user credentials, local state, and settings.
+#   Learn more at https://abstra.io/docs
+.abstra/
+
+# Visual Studio Code
+#   Visual Studio Code specific template is maintained in a separate VisualStudioCode.gitignore 
+#   that can be found at https://github.com/github/gitignore/blob/main/Global/VisualStudioCode.gitignore
+#   and can be added to the global gitignore or merged into this file. However, if you prefer, 
+#   you could uncomment the following to ignore the entire vscode folder
+# .vscode/
+
+# Ruff stuff:
+.ruff_cache/
+
+# PyPI configuration file
+.pypirc
+
+# Marimo
+marimo/_static/
+marimo/_lsp/
+__marimo__/
+
+# Streamlit
+.streamlit/secrets.toml

backend/command.py

@@ -143,7 +143,8 @@ def stream_command_center(client, model: str, messages: List[Dict]):
                     yield {
                         "type": "launch",
                         "notebook_type": notebook_type,
-                        "initial_message": initial_message
+                        "initial_message": initial_message,
+                        "tool_call_id": tool_call.id
                     }
 
                     # Add tool call to message history for context

backend/main.py

@@ -6,6 +6,7 @@ from typing import List, Optional, Dict
 import json
 import httpx
 import os
+from datetime import datetime
 
 app = FastAPI(title="Productive API")
 
@@ -39,6 +40,14 @@ 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]] = {}
+
 # CORS middleware for frontend connection
 app.add_middleware(
     CORSMiddleware,
@@ -167,6 +176,23 @@ Focus on being conversational, helpful, and easy to understand.
 }
 
 
+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
@@ -209,7 +235,8 @@ async def stream_code_notebook(
     token: Optional[str],
     model: str,
     e2b_key: str,
-    session_id: str
+    session_id: str,
+    tab_id: str = "default"
 ):
     """Handle code notebook with execution capabilities"""
 
@@ -238,6 +265,9 @@ async def stream_code_notebook(
             {"role": "system", "content": system_prompt}
         ] + messages
 
+        # Store for debugging
+        record_api_call(tab_id, full_messages)
+
         # Stream code execution
         for update in stream_code_execution(client, model, full_messages, sbx):
             # Forward updates to frontend
@@ -288,7 +318,8 @@ async def stream_research_notebook(
     serper_key: str,
     sub_agent_model: Optional[str] = None,
     parallel_workers: Optional[int] = None,
-    max_websites: Optional[int] = None
+    max_websites: Optional[int] = None,
+    tab_id: str = "default"
 ):
     """Handle research notebook with web search"""
 
@@ -314,6 +345,10 @@ async def stream_research_notebook(
         # Get system prompt for research
         system_prompt = SYSTEM_PROMPTS.get("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
 
@@ -338,31 +373,62 @@ async def stream_command_center_notebook(
     messages: List[dict],
     endpoint: str,
     token: Optional[str],
-    model: str
+    model: str,
+    tab_id: str = "0"
 ):
     """Handle command center with tool-based notebook launching"""
 
     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"):
+        async for chunk in stream_chat_response(messages, endpoint, token, model, "command", tab_id):
             yield chunk
         return
 
+    global CONVERSATION_HISTORY
+
     try:
         # Create OpenAI client
         client = OpenAI(base_url=endpoint, api_key=token)
 
+        # Get or initialize conversation history for this tab
+        if tab_id not in CONVERSATION_HISTORY:
+            CONVERSATION_HISTORY[tab_id] = []
+
         # Add system prompt for command center
         system_prompt = SYSTEM_PROMPTS["command"]
-        full_messages = [
-            {"role": "system", "content": system_prompt}
-        ] + messages
+
+        # Build full messages: system + stored history + new messages
+        print(f"DEBUG: tab_id={tab_id}, incoming messages={messages}")
+        print(f"DEBUG: stored history length={len(CONVERSATION_HISTORY[tab_id])}")
+
+        # On first call, history is empty, so just use incoming messages
+        # On subsequent calls, append only new messages
+        if not CONVERSATION_HISTORY[tab_id]:
+            # First message - use all incoming messages
+            full_messages = [{"role": "system", "content": system_prompt}] + messages
+            print(f"DEBUG: First call, full_messages length={len(full_messages)}")
+        else:
+            # Subsequent messages - use stored history + incoming messages
+            # The incoming messages should only be the new user message
+            full_messages = [{"role": "system", "content": system_prompt}] + CONVERSATION_HISTORY[tab_id] + messages
+            print(f"DEBUG: Subsequent call, full_messages length={len(full_messages)}")
+
+        # Store for debugging
+        record_api_call(tab_id, full_messages)
 
         # Stream command center execution
         for update in stream_command_center(client, model, full_messages):
             # Forward updates to frontend
             yield f"data: {json.dumps(update)}\n\n"
 
+        # After streaming completes, update persistent conversation history
+        # Remove system prompt and filter out empty assistant messages
+        conversation_without_system = [
+            msg for msg in full_messages
+            if msg.get("role") != "system" and not (msg.get("role") == "assistant" and not msg.get("content") and not msg.get("tool_calls"))
+        ]
+        CONVERSATION_HISTORY[tab_id] = conversation_without_system
+
     except Exception as e:
         import traceback
         error_message = f"Command center error: {str(e)}\n{traceback.format_exc()}"
@@ -375,7 +441,8 @@ async def stream_chat_response(
     endpoint: str,
     token: Optional[str],
     model: str,
-    notebook_type: str
+    notebook_type: str,
+    tab_id: str = "default"
 ):
     """Proxy stream from user's configured LLM endpoint"""
 
@@ -392,6 +459,9 @@ 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:
             token = os.getenv("HF_TOKEN")
@@ -543,6 +613,9 @@ async def chat_stream(request: ChatRequest):
     # Convert Pydantic models to dicts
     messages = [{"role": msg.role, "content": msg.content} for msg in request.messages]
 
+    # Get tab_id for debugging
+    tab_id = request.notebook_id or "0"
+
     # Route to code execution handler for code notebooks
     if request.notebook_type == "code":
         # Use notebook_id as session key, fallback to "default" if not provided
@@ -555,7 +628,8 @@ async def chat_stream(request: ChatRequest):
                 request.token,
                 request.model or "gpt-4",
                 request.e2b_key or "",
-                session_id
+                session_id,
+                tab_id
             ),
             media_type="text/event-stream",
             headers={
@@ -575,7 +649,9 @@ async def chat_stream(request: ChatRequest):
                 request.model or "gpt-4",
                 request.serper_key or "",
                 request.research_sub_agent_model,
-                request.research_parallel_workers
+                request.research_parallel_workers,
+                None,
+                tab_id
             ),
             media_type="text/event-stream",
             headers={
@@ -592,7 +668,8 @@ async def chat_stream(request: ChatRequest):
                 messages,
                 request.endpoint,
                 request.token,
-                request.model or "gpt-4"
+                request.model or "gpt-4",
+                tab_id
             ),
             media_type="text/event-stream",
             headers={
@@ -609,7 +686,8 @@ async def chat_stream(request: ChatRequest):
             request.endpoint,
             request.token,
             request.model or "gpt-4",
-            request.notebook_type
+            request.notebook_type,
+            tab_id
         ),
         media_type="text/event-stream",
         headers={
@@ -680,6 +758,40 @@ async def stop_sandbox(request: SandboxStopRequest):
     return {"success": True, "message": "No sandbox found for this session"}
 
 
+@app.post("/api/conversation/add-tool-response")
+async def add_tool_response(request: dict):
+    """Add a tool response to the conversation history when a notebook returns a result"""
+    global CONVERSATION_HISTORY
+
+    tab_id = request.get("tab_id", "0")
+    tool_call_id = request.get("tool_call_id")
+    content = request.get("content")
+
+    if not tool_call_id or not content:
+        return {"success": False, "error": "tool_call_id and content are required"}
+
+    # Initialize if needed
+    if tab_id not in CONVERSATION_HISTORY:
+        CONVERSATION_HISTORY[tab_id] = []
+
+    # Add tool response to conversation history
+    CONVERSATION_HISTORY[tab_id].append({
+        "role": "tool",
+        "tool_call_id": tool_call_id,
+        "content": content
+    })
+
+    return {"success": True}
+
+
+@app.get("/api/debug/messages/{tab_id}")
+async def get_debug_messages(tab_id: str):
+    """Get the message history for a specific tab for debugging"""
+    if tab_id in MESSAGE_HISTORY:
+        return {"calls": MESSAGE_HISTORY[tab_id]}
+    return {"calls": []}
+
+
 @app.get("/health")
 async def health():
     """Health check endpoint"""

index.html

@@ -26,6 +26,7 @@
                 </div>
             </div>
             <div class="tab-bar-spacer"></div>
+            <button class="debug-btn" id="debugBtn">DEBUG</button>
             <button class="settings-btn" id="settingsBtn">SETTINGS</button>
         </div>
 
@@ -44,6 +45,7 @@
                             <button class="launcher-btn" data-type="code">CODE</button>
                             <button class="launcher-btn" data-type="research">RESEARCH</button>
                             <button class="launcher-btn" data-type="chat">CHAT</button>
+                            <button class="debug-btn" id="debugBtn">DEBUG</button>
                         </div>
                     </div>
 
@@ -141,144 +143,160 @@
                 </div>
             </div>
 
-            <!-- Settings Tab -->
-            <div class="tab-content" data-content-id="settings">
-                <div class="settings-interface">
-                    <div class="settings-header">
-                        <h2>SETTINGS</h2>
-                    </div>
-                    <div class="settings-body">
-                        <div class="settings-section">
-                            <label class="settings-label">
-                                <span class="label-text">LLM ENDPOINT</span>
-                                <span class="label-description">OpenAI-compatible API endpoint (e.g., https://api.openai.com/v1)</span>
-                            </label>
-                            <input type="text" id="setting-endpoint" class="settings-input" placeholder="https://api.openai.com/v1">
-                        </div>
+        </div>
+    </div>
 
-                        <div class="settings-section">
-                            <label class="settings-label">
-                                <span class="label-text">API TOKEN (OPTIONAL)</span>
-                                <span class="label-description">Authentication token for the LLM API</span>
-                            </label>
-                            <input type="password" id="setting-token" class="settings-input" placeholder="Leave empty if not required">
-                        </div>
+    <!-- Settings Panel -->
+    <div class="settings-panel" id="settingsPanel">
+        <div class="settings-panel-header">
+            <h3>SETTINGS</h3>
+            <button class="settings-panel-close" id="settingsPanelClose">×</button>
+        </div>
+        <div class="settings-panel-body" id="settingsPanelBody">
+            <div class="settings-body">
+                <div class="settings-section">
+                    <label class="settings-label">
+                        <span class="label-text">LLM ENDPOINT</span>
+                        <span class="label-description">OpenAI-compatible API endpoint (e.g., https://api.openai.com/v1)</span>
+                    </label>
+                    <input type="text" id="setting-endpoint" class="settings-input" placeholder="https://api.openai.com/v1">
+                </div>
 
-                        <div class="settings-section">
-                            <label class="settings-label">
-                                <span class="label-text">MODEL</span>
-                                <span class="label-description">Default model name (e.g., gpt-4, gpt-3.5-turbo)</span>
-                            </label>
-                            <input type="text" id="setting-model" class="settings-input" placeholder="gpt-4">
-                        </div>
+                <div class="settings-section">
+                    <label class="settings-label">
+                        <span class="label-text">API TOKEN (OPTIONAL)</span>
+                        <span class="label-description">Authentication token for the LLM API</span>
+                    </label>
+                    <input type="password" id="setting-token" class="settings-input" placeholder="Leave empty if not required">
+                </div>
 
-                        <div class="settings-section">
-                            <label class="settings-label">
-                                <span class="label-text">E2B API KEY (OPTIONAL)</span>
-                                <span class="label-description">Required for code execution in CODE notebooks</span>
-                            </label>
-                            <input type="password" id="setting-e2b-key" class="settings-input" placeholder="Leave empty if not using code execution">
-                        </div>
+                <div class="settings-section">
+                    <label class="settings-label">
+                        <span class="label-text">MODEL</span>
+                        <span class="label-description">Default model name (e.g., gpt-4, gpt-3.5-turbo)</span>
+                    </label>
+                    <input type="text" id="setting-model" class="settings-input" placeholder="gpt-4">
+                </div>
 
-                        <div class="settings-section">
-                            <label class="settings-label">
-                                <span class="label-text">SERPER API KEY (OPTIONAL)</span>
-                                <span class="label-description">Required for web search in RESEARCH notebooks</span>
-                            </label>
-                            <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">E2B API KEY (OPTIONAL)</span>
+                        <span class="label-description">Required for code execution in CODE notebooks</span>
+                    </label>
+                    <input type="password" id="setting-e2b-key" class="settings-input" placeholder="Leave empty if not using code execution">
+                </div>
 
-                        <div class="settings-section">
-                            <label class="settings-label">
-                                <span class="label-text">NOTEBOOK-SPECIFIC MODELS (OPTIONAL)</span>
-                                <span class="label-description">Override default model for specific notebook types</span>
-                            </label>
-                            <div style="display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center;">
-                                <label style="font-size: 11px; color: #666;">AGENT:</label>
-                                <input type="text" id="setting-model-agent" class="settings-input" placeholder="Use default">
+                <div class="settings-section">
+                    <label class="settings-label">
+                        <span class="label-text">SERPER API KEY (OPTIONAL)</span>
+                        <span class="label-description">Required for web search in RESEARCH notebooks</span>
+                    </label>
+                    <input type="password" id="setting-serper-key" class="settings-input" placeholder="Leave empty if not using research">
+                </div>
 
-                                <label style="font-size: 11px; color: #666;">CODE:</label>
-                                <input type="text" id="setting-model-code" class="settings-input" placeholder="Use default">
+                <div class="settings-section">
+                    <label class="settings-label">
+                        <span class="label-text">NOTEBOOK-SPECIFIC MODELS (OPTIONAL)</span>
+                        <span class="label-description">Override default model for specific notebook types</span>
+                    </label>
+                    <div style="display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center;">
+                        <label style="font-size: 11px; color: #666;">AGENT:</label>
+                        <input type="text" id="setting-model-agent" class="settings-input" placeholder="Use default">
 
-                                <label style="font-size: 11px; color: #666;">RESEARCH:</label>
-                                <input type="text" id="setting-model-research" class="settings-input" placeholder="Use default">
+                        <label style="font-size: 11px; color: #666;">CODE:</label>
+                        <input type="text" id="setting-model-code" class="settings-input" placeholder="Use default">
 
-                                <label style="font-size: 11px; color: #666;">CHAT:</label>
-                                <input type="text" id="setting-model-chat" class="settings-input" placeholder="Use default">
-                            </div>
-                        </div>
+                        <label style="font-size: 11px; color: #666;">RESEARCH:</label>
+                        <input type="text" id="setting-model-research" class="settings-input" placeholder="Use default">
 
-                        <div class="settings-section">
-                            <label class="settings-label">
-                                <span class="label-text">RESEARCH SUB-AGENT MODEL (OPTIONAL)</span>
-                                <span class="label-description">Smaller/faster model for analyzing individual web pages during research</span>
-                            </label>
-                            <input type="text" id="setting-research-sub-agent-model" class="settings-input" placeholder="Use research model or default">
-                        </div>
+                        <label style="font-size: 11px; color: #666;">CHAT:</label>
+                        <input type="text" id="setting-model-chat" class="settings-input" placeholder="Use default">
+                    </div>
+                </div>
 
-                        <div class="settings-section">
-                            <label class="settings-label">
-                                <span class="label-text">RESEARCH PARALLEL WORKERS (OPTIONAL)</span>
-                                <span class="label-description">Number of web pages to analyze in parallel (default: 8)</span>
-                            </label>
-                            <input type="number" id="setting-research-parallel-workers" class="settings-input" placeholder="8" min="1" max="20">
-                        </div>
+                <div class="settings-section">
+                    <label class="settings-label">
+                        <span class="label-text">RESEARCH SUB-AGENT MODEL (OPTIONAL)</span>
+                        <span class="label-description">Smaller/faster model for analyzing individual web pages during research</span>
+                    </label>
+                    <input type="text" id="setting-research-sub-agent-model" class="settings-input" placeholder="Use research model or default">
+                </div>
 
-                        <div class="settings-section">
-                            <label class="settings-label">
-                                <span class="label-text">RESEARCH MAX WEBSITES (OPTIONAL)</span>
-                                <span class="label-description">Maximum number of websites to analyze per research session (default: 50)</span>
-                            </label>
-                            <input type="number" id="setting-research-max-websites" class="settings-input" placeholder="50" min="10" max="200">
-                        </div>
+                <div class="settings-section">
+                    <label class="settings-label">
+                        <span class="label-text">RESEARCH PARALLEL WORKERS (OPTIONAL)</span>
+                        <span class="label-description">Number of web pages to analyze in parallel (default: 8)</span>
+                    </label>
+                    <input type="number" id="setting-research-parallel-workers" class="settings-input" placeholder="8" min="1" max="20">
+                </div>
 
-                        <div class="settings-section">
-                            <label class="settings-label">
-                                <span class="label-text">THEME COLOR</span>
-                                <span class="label-description">Color theme for action widgets and accents</span>
-                            </label>
-                            <div class="theme-color-picker" id="theme-color-picker">
-                                <div class="theme-option" data-theme="forest">
-                                    <div class="theme-preview" style="border-color: #1b5e20; background: #e8f5e9;"></div>
-                                    <span class="theme-name">Forest</span>
-                                </div>
-                                <div class="theme-option" data-theme="sapphire">
-                                    <div class="theme-preview" style="border-color: #0d47a1; background: #e3f2fd;"></div>
-                                    <span class="theme-name">Sapphire</span>
-                                </div>
-                                <div class="theme-option" data-theme="ocean">
-                                    <div class="theme-preview" style="border-color: #00796b; background: #e0f2f1;"></div>
-                                    <span class="theme-name">Ocean</span>
-                                </div>
-                                <div class="theme-option" data-theme="midnight">
-                                    <div class="theme-preview" style="border-color: #283593; background: #e8eaf6;"></div>
-                                    <span class="theme-name">Midnight</span>
-                                </div>
-                                <div class="theme-option" data-theme="steel">
-                                    <div class="theme-preview" style="border-color: #455a64; background: #eceff1;"></div>
-                                    <span class="theme-name">Steel</span>
-                                </div>
-                                <div class="theme-option" data-theme="depths">
-                                    <div class="theme-preview" style="border-color: #01579b; background: #e3f2fd;"></div>
-                                    <span class="theme-name">Depths</span>
-                                </div>
-                                <div class="theme-option" data-theme="ember">
-                                    <div class="theme-preview" style="border-color: #b71c1c; background: #fbe9e7;"></div>
-                                    <span class="theme-name">Ember</span>
-                                </div>
-                            </div>
-                            <input type="hidden" id="setting-theme-color" value="forest">
-                        </div>
+                <div class="settings-section">
+                    <label class="settings-label">
+                        <span class="label-text">RESEARCH MAX WEBSITES (OPTIONAL)</span>
+                        <span class="label-description">Maximum number of websites to analyze per research session (default: 50)</span>
+                    </label>
+                    <input type="number" id="setting-research-max-websites" class="settings-input" placeholder="50" min="10" max="200">
+                </div>
 
-                        <div class="settings-actions">
-                            <button class="settings-save-btn" id="saveSettingsBtn">SAVE</button>
-                            <button class="settings-cancel-btn" id="cancelSettingsBtn">CANCEL</button>
+                <div class="settings-section">
+                    <label class="settings-label">
+                        <span class="label-text">THEME COLOR</span>
+                        <span class="label-description">Color theme for action widgets and accents</span>
+                    </label>
+                    <div class="theme-color-picker" id="theme-color-picker">
+                        <div class="theme-option" data-theme="forest">
+                            <div class="theme-preview" style="border-color: #1b5e20; background: #e8f5e9;"></div>
+                            <span class="theme-name">Forest</span>
+                        </div>
+                        <div class="theme-option" data-theme="sapphire">
+                            <div class="theme-preview" style="border-color: #0d47a1; background: #e3f2fd;"></div>
+                            <span class="theme-name">Sapphire</span>
+                        </div>
+                        <div class="theme-option" data-theme="ocean">
+                            <div class="theme-preview" style="border-color: #00796b; background: #e0f2f1;"></div>
+                            <span class="theme-name">Ocean</span>
+                        </div>
+                        <div class="theme-option" data-theme="midnight">
+                            <div class="theme-preview" style="border-color: #283593; background: #e8eaf6;"></div>
+                            <span class="theme-name">Midnight</span>
+                        </div>
+                        <div class="theme-option" data-theme="steel">
+                            <div class="theme-preview" style="border-color: #455a64; background: #eceff1;"></div>
+                            <span class="theme-name">Steel</span>
+                        </div>
+                        <div class="theme-option" data-theme="depths">
+                            <div class="theme-preview" style="border-color: #01579b; background: #e3f2fd;"></div>
+                            <span class="theme-name">Depths</span>
+                        </div>
+                        <div class="theme-option" data-theme="ember">
+                            <div class="theme-preview" style="border-color: #b71c1c; background: #fbe9e7;"></div>
+                            <span class="theme-name">Ember</span>
                         </div>
-
-                        <div class="settings-status" id="settingsStatus"></div>
                     </div>
+                    <input type="hidden" id="setting-theme-color" value="forest">
+                </div>
+
+                <div class="settings-actions">
+                    <button class="settings-save-btn" id="saveSettingsBtn">SAVE</button>
+                    <button class="settings-cancel-btn" id="cancelSettingsBtn">CANCEL</button>
                 </div>
+
+                <div class="settings-status" id="settingsStatus"></div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Debug Panel -->
+    <div class="debug-panel" id="debugPanel">
+        <div class="debug-header">
+            <h3>DEBUG: Message History</h3>
+            <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>
 

script.js

@@ -18,6 +18,9 @@ let settings = {
 // Track action widgets for result updates (maps tabId -> widget element)
 const actionWidgets = {};
 
+// Track tool call IDs for result updates (maps tabId -> tool_call_id)
+const toolCallIds = {};
+
 // Track notebook counters for each type
 let notebookCounters = {
     'agent': 0,
@@ -42,6 +45,15 @@ document.addEventListener('DOMContentLoaded', () => {
 });
 
 function initializeEventListeners() {
+    // Constrain text selection to message-content only
+    document.addEventListener('selectstart', (e) => {
+        const target = e.target;
+        const messageContent = target.closest('.message-content');
+        if (!messageContent && target.closest('.message')) {
+            e.preventDefault();
+        }
+    });
+
     // Launcher buttons in command center
     document.querySelectorAll('.launcher-btn').forEach(btn => {
         btn.addEventListener('click', (e) => {
@@ -107,13 +119,8 @@ function initializeEventListeners() {
         }
     });
 
-    // Settings button
-    const settingsBtn = document.getElementById('settingsBtn');
-    if (settingsBtn) {
-        settingsBtn.addEventListener('click', () => {
-            openSettings();
-        });
-    }
+    // Settings button - now handled in settings panel section below
+    // (removed old openSettings() call)
 
     // Save settings button
     const saveSettingsBtn = document.getElementById('saveSettingsBtn');
@@ -127,7 +134,12 @@ function initializeEventListeners() {
     const cancelSettingsBtn = document.getElementById('cancelSettingsBtn');
     if (cancelSettingsBtn) {
         cancelSettingsBtn.addEventListener('click', () => {
-            switchToTab(0); // Go back to command center
+            const settingsPanel = document.getElementById('settingsPanel');
+            const settingsBtn = document.getElementById('settingsBtn');
+            const appContainer = document.querySelector('.app-container');
+            if (settingsPanel) settingsPanel.classList.remove('active');
+            if (settingsBtn) settingsBtn.classList.remove('active');
+            if (appContainer) appContainer.classList.remove('panel-open');
         });
     }
 
@@ -337,7 +349,7 @@ async function sendMessage(tabId) {
     userMsg.className = 'message user';
     userMsg.innerHTML = `
         <div class="message-label">USER</div>
-        <div class="message-content">${escapeHtml(message)}</div>
+        <div class="message-content">${escapeHtml(message.trim())}</div>
     `;
     chatContainer.appendChild(userMsg);
 
@@ -356,8 +368,16 @@ async function sendMessage(tabId) {
     // Determine notebook type from chat container ID
     const notebookType = getNotebookTypeFromContainer(chatContainer);
 
-    // Get conversation history (including the just-added user message)
-    const messages = getConversationHistory(chatContainer);
+    // For command center, only send the new user message (backend maintains history)
+    // For other notebooks, send full conversation history
+    let messages;
+    if (notebookType === 'command') {
+        // Only send the last user message
+        messages = [{ role: 'user', content: message }];
+    } else {
+        // Get full conversation history for other notebooks
+        messages = getConversationHistory(chatContainer);
+    }
 
     // Stream response from backend
     await streamChatResponse(messages, chatContainer, notebookType, tabId);
@@ -438,8 +458,29 @@ function getConversationHistory(chatContainer) {
             if (label === 'user') {
                 messages.push({ role: 'user', content: content });
             } else if (label === 'assistant') {
-                // Don't include empty or special messages
-                if (content.trim() && !content.includes('msg-')) {
+                // 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
+                    const toolCall = JSON.parse(toolCallData);
+                    messages.push({
+                        role: 'assistant',
+                        content: '',
+                        tool_calls: [{
+                            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
+                                })
+                            }
+                        }]
+                    });
+                } else if (content.trim() && !content.includes('msg-') && !content.includes('→ Launched')) {
+                    // Regular assistant message (exclude launch notifications)
                     messages.push({ role: 'assistant', content: content });
                 }
             }
@@ -629,9 +670,13 @@ async function streamChatResponse(messages, chatContainer, notebookType, tabId)
                         // Tool-based notebook launch from command center
                         const notebookType = data.notebook_type;
                         const initialMessage = data.initial_message;
+                        const toolCallId = data.tool_call_id;
 
+                        // The action widget will show the launch, no need for a visible assistant message
                         handleActionToken(notebookType, initialMessage, (targetTabId) => {
                             showActionWidget(chatContainer, notebookType, initialMessage, targetTabId);
+                            // Store tool call ID for this notebook tab so we can send result back
+                            toolCallIds[targetTabId] = toolCallId;
                         });
 
                         // Reset current message element so any subsequent thinking starts fresh
@@ -824,7 +869,7 @@ function showActionWidget(chatContainer, action, message, targetTabId) {
     actionWidgets[targetTabId] = widget;
 }
 
-function updateActionWidgetWithResult(tabId, resultContent, figures) {
+async function updateActionWidgetWithResult(tabId, resultContent, figures) {
     const widget = actionWidgets[tabId];
     if (!widget) return;
 
@@ -837,6 +882,27 @@ function updateActionWidgetWithResult(tabId, resultContent, figures) {
         statusText.textContent = statusText.textContent.replace('Opening', 'Completed').replace(/\.+$/, '');
     }
 
+    // Send result back to backend to update conversation history
+    const toolCallId = toolCallIds[tabId];
+    if (toolCallId) {
+        try {
+            // Get the command center tab ID (tab 0)
+            const commandTabId = '0';
+
+            await fetch('http://localhost:8000/api/conversation/add-tool-response', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    tab_id: commandTabId,
+                    tool_call_id: toolCallId,
+                    content: resultContent
+                })
+            });
+        } catch (error) {
+            console.error('Failed to update conversation history with result:', error);
+        }
+    }
+
     // Replace <figure_x> tags with placeholders BEFORE markdown processing
     let processedContent = resultContent;
     const figurePlaceholders = {};
@@ -1136,9 +1202,6 @@ function openSettings() {
     const status = document.getElementById('settingsStatus');
     status.className = 'settings-status';
     status.textContent = '';
-
-    // Switch to settings view
-    switchToTab('settings');
 }
 
 function saveSettings() {
@@ -1215,43 +1278,50 @@ const themeColors = {
         border: '#1b5e20',
         bg: '#e8f5e9',
         hoverBg: '#c8e6c9',
-        accent: '#1b5e20'
+        accent: '#1b5e20',
+        accentRgb: '27, 94, 32'
     },
     sapphire: {
         border: '#0d47a1',
         bg: '#e3f2fd',
         hoverBg: '#bbdefb',
-        accent: '#0d47a1'
+        accent: '#0d47a1',
+        accentRgb: '13, 71, 161'
     },
     ocean: {
         border: '#00796b',
         bg: '#e0f2f1',
         hoverBg: '#b2dfdb',
-        accent: '#004d40'
+        accent: '#004d40',
+        accentRgb: '0, 77, 64'
     },
     midnight: {
         border: '#283593',
         bg: '#e8eaf6',
         hoverBg: '#c5cae9',
-        accent: '#1a237e'
+        accent: '#1a237e',
+        accentRgb: '26, 35, 126'
     },
     steel: {
         border: '#455a64',
         bg: '#eceff1',
         hoverBg: '#cfd8dc',
-        accent: '#263238'
+        accent: '#263238',
+        accentRgb: '38, 50, 56'
     },
     depths: {
         border: '#01579b',
         bg: '#e3f2fd',
         hoverBg: '#bbdefb',
-        accent: '#01579b'
+        accent: '#01579b',
+        accentRgb: '1, 87, 155'
     },
     ember: {
         border: '#b71c1c',
         bg: '#fbe9e7',
         hoverBg: '#ffccbc',
-        accent: '#b71c1c'
+        accent: '#b71c1c',
+        accentRgb: '183, 28, 28'
     }
 };
 
@@ -1264,6 +1334,7 @@ function applyTheme(themeName) {
     root.style.setProperty('--theme-bg', theme.bg);
     root.style.setProperty('--theme-hover-bg', theme.hoverBg);
     root.style.setProperty('--theme-accent', theme.accent);
+    root.style.setProperty('--theme-accent-rgb', theme.accentRgb);
 }
 
 // Export settings for use in API calls
@@ -1387,3 +1458,129 @@ function openImageModal(src) {
     modalImg.src = src;
     modal.style.display = 'block';
 }
+
+// ============= DEBUG PANEL =============
+
+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
+if (debugBtn) {
+    debugBtn.addEventListener('click', () => {
+        const isOpening = !debugPanel.classList.contains('active');
+
+        // Close settings panel if open
+        settingsPanel.classList.remove('active');
+        settingsBtn.classList.remove('active');
+
+        // Toggle debug panel
+        debugPanel.classList.toggle('active');
+        debugBtn.classList.toggle('active');
+
+        // Shift content when opening, unshift when closing
+        if (isOpening) {
+            appContainer.classList.add('panel-open');
+            loadDebugMessages();
+        } else {
+            appContainer.classList.remove('panel-open');
+        }
+    });
+}
+
+// Close debug panel
+if (debugClose) {
+    debugClose.addEventListener('click', () => {
+        debugPanel.classList.remove('active');
+        debugBtn.classList.remove('active');
+        appContainer.classList.remove('panel-open');
+    });
+}
+
+// Refresh debug messages
+if (debugRefresh) {
+    debugRefresh.addEventListener('click', () => {
+        loadDebugMessages();
+    });
+}
+
+// Load debug messages from backend
+async function loadDebugMessages() {
+    try {
+        debugContent.innerHTML = '<div style="padding: 10px; color: #666;">Loading...</div>';
+
+        // Get current active tab ID
+        const activeTab = document.querySelector('.tab.active');
+        const tabId = activeTab ? activeTab.dataset.tabId : '0';
+
+        const response = await fetch(`http://localhost:8000/api/debug/messages/${tabId}`);
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        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;
+        } 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>';
+        }
+    } 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>`;
+    }
+}
+
+// Toggle debug call expansion
+window.toggleDebugCall = function(index) {
+    const content = document.getElementById(`call-${index}`);
+    const arrow = document.getElementById(`arrow-${index}`);
+    if (content.style.display === 'none') {
+        content.style.display = 'block';
+        arrow.textContent = '▼';
+    } else {
+        content.style.display = 'none';
+        arrow.textContent = '▶';
+    }
+}
+
+// ============= SETTINGS PANEL =============
+
+const settingsPanel = document.getElementById('settingsPanel');
+const settingsPanelBody = document.getElementById('settingsPanelBody');
+const settingsPanelClose = document.getElementById('settingsPanelClose');
+const settingsBtn = document.getElementById('settingsBtn');
+const appContainer = document.querySelector('.app-container');
+
+
+// Open settings panel when SETTINGS button is clicked
+if (settingsBtn) {
+    settingsBtn.addEventListener('click', () => {
+        openSettings(); // Populate form fields with current values
+        settingsPanel.classList.add('active');
+        settingsBtn.classList.add('active');
+        appContainer.classList.add('panel-open');
+        // Close debug panel if open
+        debugPanel.classList.remove('active');
+        debugBtn.classList.remove('active');
+    });
+}
+
+// Close settings panel
+if (settingsPanelClose) {
+    settingsPanelClose.addEventListener('click', () => {
+        settingsPanel.classList.remove('active');
+        settingsBtn.classList.remove('active');
+        appContainer.classList.remove('panel-open');
+    });
+}
+

style.css

@@ -10,6 +10,7 @@
     --theme-bg: #e8f5e9;
     --theme-hover-bg: #c8e6c9;
     --theme-accent: #1b5e20;
+    --theme-accent-rgb: 27, 94, 32;
 }
 
 body {
@@ -20,6 +21,15 @@ body {
     overflow: hidden;
 }
 
+/* Global selection override - disable everywhere by default */
+*::selection {
+    background: transparent;
+}
+
+*::-moz-selection {
+    background: transparent;
+}
+
 .app-container {
     display: flex;
     flex-direction: column;
@@ -54,7 +64,7 @@ body {
     display: flex;
     align-items: center;
     gap: 8px;
-    padding: 12px 20px;
+    padding: 8px 16px;
     background: #f5f5f5;
     color: #666;
     cursor: pointer;
@@ -124,7 +134,7 @@ body {
     color: #666;
     border: none;
     border-right: 1px solid #ccc;
-    padding: 12px 20px;
+    padding: 8px 16px;
     font-size: 12px;
     font-weight: 500;
     letter-spacing: 1px;
@@ -138,6 +148,11 @@ body {
     color: #1a1a1a;
 }
 
+.settings-btn.active {
+    background: var(--theme-accent);
+    color: white;
+}
+
 .new-tab-wrapper {
     position: static;
     display: flex;
@@ -149,7 +164,7 @@ body {
     color: #666;
     border: none;
     border-right: 1px solid #ccc;
-    padding: 12px 20px;
+    padding: 8px 16px;
     font-size: 16px;
     cursor: pointer;
     transition: all 0.2s;
@@ -202,6 +217,11 @@ body {
     overflow: hidden;
     position: relative;
     z-index: 1;
+    transition: margin-right 0.3s ease;
+}
+
+.panel-open .content-area {
+    margin-right: 600px;
 }
 
 .tab-content {
@@ -468,7 +488,19 @@ body {
     margin-bottom: 16px;
     display: flex;
     flex-direction: column;
-    gap: 4px;
+    gap: 2px;
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
+.message::selection {
+    background: transparent;
+}
+
+.message > *:not(.message-content)::selection {
+    background: transparent;
 }
 
 .system-message {
@@ -487,6 +519,12 @@ body {
     color: #666;
     text-transform: uppercase;
     letter-spacing: 1px;
+    user-select: none;
+    padding: 2px 0;
+}
+
+.user .message-label {
+    color: var(--theme-accent);
 }
 
 .message-content {
@@ -497,6 +535,33 @@ body {
     line-height: 1.6;
     white-space: pre-wrap;
     word-wrap: break-word;
+    user-select: text;
+    -webkit-user-select: text;
+    -moz-user-select: text;
+    -ms-user-select: text;
+}
+
+.message-content::selection {
+    background: rgba(var(--theme-accent-rgb), 0.2) !important;
+}
+
+.message-content::-moz-selection {
+    background: rgba(var(--theme-accent-rgb), 0.2) !important;
+}
+
+.message-content *::selection {
+    background: rgba(var(--theme-accent-rgb), 0.2) !important;
+}
+
+.message-content *::-moz-selection {
+    background: rgba(var(--theme-accent-rgb), 0.2) !important;
+}
+
+.message-content * {
+    user-select: text;
+    -webkit-user-select: text;
+    -moz-user-select: text;
+    -ms-user-select: text;
 }
 
 .message-content ul,
@@ -532,10 +597,14 @@ body {
 }
 
 .message-content p {
-    margin-bottom: 8px;
+    margin: 0;
     white-space: pre-wrap;
 }
 
+.message-content p:not(:last-child) {
+    margin-bottom: 8px;
+}
+
 .message-content code {
     background: #e0e0e0;
     padding: 2px 6px;
@@ -1754,3 +1823,242 @@ body {
     font-family: 'JetBrains Mono', monospace;
     font-size: 12px;
 }
+
+/* Debug Panel */
+.debug-panel {
+    position: fixed;
+    top: 37px;
+    right: -600px;
+    width: 600px;
+    height: calc(100vh - 37px);
+    background: white;
+    border-left: 2px solid var(--theme-accent);
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    transition: right 0.3s ease;
+}
+
+.debug-panel.active {
+    right: 0;
+}
+
+.debug-header {
+    padding: 8px 16px;
+    border-bottom: 1px solid #e0e0e0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: var(--theme-accent);
+}
+
+.debug-header h3 {
+    margin: 0;
+    font-size: 12px;
+    font-weight: 600;
+    color: white;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.debug-close {
+    background: none;
+    border: none;
+    font-size: 20px;
+    color: white;
+    cursor: pointer;
+    padding: 0;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    transition: background 0.2s;
+}
+
+.debug-close:hover {
+    background: rgba(255, 255, 255, 0.2);
+}
+
+.debug-body {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+.debug-controls {
+    padding: 12px 20px;
+    border-bottom: 1px solid #e0e0e0;
+    background: #f9f9f9;
+}
+
+.debug-refresh {
+    padding: 6px 12px;
+    background: var(--theme-accent);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 11px;
+    font-weight: 600;
+    cursor: pointer;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    transition: opacity 0.2s;
+}
+
+.debug-refresh:hover {
+    opacity: 0.9;
+}
+
+.debug-content {
+    flex: 1;
+    padding: 0;
+    margin: 0;
+    overflow: auto;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 12px;
+    line-height: 1.6;
+    background: white;
+}
+
+.debug-call-item {
+    border-bottom: 1px solid #e0e0e0;
+    background: white;
+}
+
+.debug-call-header {
+    padding: 10px 16px;
+    background: white;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    transition: background 0.2s;
+    user-select: none;
+}
+
+.debug-call-header:hover {
+    background: #f5f5f5;
+}
+
+.debug-call-arrow {
+    color: #666;
+    font-size: 10px;
+    width: 12px;
+    display: inline-block;
+}
+
+.debug-call-title {
+    font-weight: 600;
+    color: #333;
+    flex: 1;
+}
+
+.debug-call-time {
+    color: #999;
+    font-size: 10px;
+}
+
+.debug-call-content {
+    margin: 0;
+    padding: 12px 16px;
+    background: #fafafa;
+    border-top: 1px solid #e0e0e0;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    overflow-x: auto;
+}
+
+.debug-btn {
+    background: #f5f5f5;
+    color: #666;
+    border: none;
+    border-right: 1px solid #ccc;
+    padding: 8px 16px;
+    font-size: 12px;
+    font-weight: 500;
+    letter-spacing: 1px;
+    cursor: pointer;
+    transition: all 0.2s;
+    font-family: inherit;
+}
+
+.debug-btn:hover {
+    background: #eee;
+    color: #1a1a1a;
+}
+
+.debug-btn.active {
+    background: var(--theme-accent);
+    color: white;
+}
+
+/* Settings Panel (side panel like debug) */
+.settings-panel {
+    position: fixed;
+    top: 37px;
+    right: -600px;
+    width: 600px;
+    height: calc(100vh - 37px);
+    background: white;
+    border-left: 2px solid var(--theme-accent);
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    transition: right 0.3s ease;
+    overflow-y: auto;
+}
+
+.settings-panel.active {
+    right: 0;
+}
+
+.settings-panel-header {
+    padding: 8px 16px;
+    border-bottom: 1px solid #e0e0e0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: var(--theme-accent);
+    position: sticky;
+    top: 0;
+    z-index: 1;
+}
+
+.settings-panel-header h3 {
+    margin: 0;
+    font-size: 12px;
+    font-weight: 600;
+    color: white;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.settings-panel-close {
+    background: none;
+    border: none;
+    font-size: 20px;
+    color: white;
+    cursor: pointer;
+    padding: 0;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    transition: background 0.2s;
+}
+
+.settings-panel-close:hover {
+    background: rgba(255, 255, 255, 0.2);
+}
+
+.settings-panel-body {
+    flex: 1;
+    padding: 20px;
+    overflow-y: auto;
+}