v0.12

REFACTORING_COMPLETE.md

@@ -0,0 +1,184 @@
+# Research Refactoring Complete!
+
+## Summary of Changes
+
+All files have been completely refactored to implement the new research logic with parallel processing, interleaved results, query grouping, and statistics tracking.
+
+## Backend Changes
+
+### 1. main.py
+- Added `research_parallel_workers` to `ChatRequest` model
+- Updated `stream_research_notebook()` to accept and pass parallel_workers parameter (default: 8)
+- Passes parallel_workers through to `stream_research()`
+
+### 2. research.py (Complete Rewrite)
+**New Flow:**
+1. Generate queries (sequential)
+2. Search ALL queries in parallel (3 workers)
+3. **Interleave** URLs from all queries (round-robin)
+4. **Process URLs in parallel** (configurable workers, default 8)
+   - Each worker: extract_content() + analyze_content()
+5. Track stats per query (relevant/irrelevant/error)
+6. Stream results grouped by query
+7. Assess completeness
+8. Generate final report
+
+**New Event Types:**
+- `source` event now includes:
+  - `query_index`: which query this belongs to
+  - `query_text`: the actual query
+  - `is_error`: boolean for failed extractions
+  - `error_message`: error details
+
+- `query_stats` event (NEW):
+  - `query_index`: which query
+  - `relevant_count`: # of relevant sources
+  - `irrelevant_count`: # of irrelevant sources
+  - `error_count`: # of failed requests
+
+## Frontend Changes
+
+### 3. index.html
+- Added "RESEARCH PARALLEL WORKERS" setting field
+- Type: number input (1-20)
+- Default placeholder: 8
+
+### 4. script.js
+- Added `researchParallelWorkers` to settings object
+- Sends `research_parallel_workers` in API requests
+- Updated source event handler to pass full data object
+- Added `query_stats` event handler
+
+### 5. research-ui.js (Complete Rewrite)
+**New Structure:**
+- Maintains `queryData` object: `query_index -> {query, sources[], stats{}}`
+- Creates query groups with headers showing query text and stats
+- Sources are grouped under their respective queries
+- **Toggle button** to show/hide irrelevant sources
+- Sources display status icons: ✓ (relevant), ○ (irrelevant), ✗ (error)
+
+**Key Functions:**
+- `createQueriesMessage()`: Creates query group structure
+- `createSourceMessage()`: Adds source to appropriate query group
+- `updateQueryStats()`: Updates stats display per query
+- `renderQuerySources()`: Re-renders sources based on toggle state
+- `toggleIrrelevantSources()`: Global toggle for showing/hiding irrelevant
+
+### 6. style.css
+**New Styles:**
+- `.toggle-irrelevant-btn`: Button in research header
+- `.query-group`: Container for each query and its sources
+- `.query-header`: Query text + stats display
+- `.query-stats`: Live stats (X relevant / Y not relevant / Z failed)
+- `.query-sources`: Container for sources under query
+- `.source-status-icon`: Icons with color coding
+- `.research-source.error`: Red background for failed requests
+- `.no-sources`: Message when no sources to display
+
+## New Features
+
+### 1. Parallel Processing
+- Configurable parallel workers (default: 8)
+- Interleaved URL processing ensures progress across all queries
+- Much faster than sequential processing
+
+### 2. Query Grouping
+- Sources are visually grouped under their originating query
+- Makes it clear which query found which information
+- Helps understand coverage
+
+### 3. Statistics Tracking
+- Per-query stats: relevant / not relevant / failed
+- Live updates as sources are processed
+- Green color for queries with relevant sources
+
+### 4. Error Tracking
+- Failed API calls are tracked and displayed
+- Separate count in stats
+- Red error indicator (✗) on failed sources
+- Error messages preserved
+
+### 5. Toggle for Irrelevant Sources
+- Button in research header
+- Default: hide irrelevant sources
+- Click to show all sources including irrelevant
+- Re-renders all query groups on toggle
+
+## Diagram: New Parallel Flow
+
+```
+Research Flow - NEW (Parallel & Interleaved)
+============================================
+
+ITERATION 1:
+│
+├─ Generate Queries (Sequential - Main Model)
+│  └─ Returns: ["query1", "query2", "query3"]
+│
+├─ Web Search (PARALLEL - 3 workers) ⚡
+│  ├─ search_web(query1) ──┐
+│  ├─ search_web(query2) ──┼─→ All results collected
+│  └─ search_web(query3) ──┘
+│     Results grouped by query_index
+│
+├─ Interleave URLs (Round-robin from all queries)
+│  [query1_url1, query2_url1, query3_url1,
+│   query1_url2, query2_url2, query3_url2, ...]
+│
+├─ Process URLs (PARALLEL - 8 workers) ⚡⚡⚡
+│  Worker 1: extract + analyze (query1_url1)
+│  Worker 2: extract + analyze (query2_url1)
+│  Worker 3: extract + analyze (query3_url1)
+│  Worker 4: extract + analyze (query1_url2)
+│  Worker 5: extract + analyze (query2_url2)
+│  ...
+│  │
+│  └─ As each completes:
+│     ├─ Emit "source" event with query_index
+│     ├─ Update query stats
+│     └─ Emit "query_stats" event
+│
+├─ Assess Completeness (Sequential - Main Model)
+│
+└─ If not sufficient → ITERATION 2
+
+FINAL REPORT (Sequential - Main Model)
+
+
+PERFORMANCE:
+- Search phase: 3x faster (parallel searches)
+- Analysis phase: 8x faster (8 parallel workers)
+- Interleaving ensures balanced progress across queries
+```
+
+## Testing Checklist
+
+- [ ] Settings page loads with new parallel workers field
+- [ ] Settings save/load correctly
+- [ ] Research creates single container with toggle button
+- [ ] Queries are grouped with headers
+- [ ] Sources appear under correct query
+- [ ] Stats update live (X relevant / Y not relevant / Z failed)
+- [ ] Toggle button works (show/hide irrelevant)
+- [ ] Relevant sources show ✓ icon
+- [ ] Irrelevant sources show ○ icon and are hidden by default
+- [ ] Failed sources show ✗ icon and count in stats
+- [ ] Final report appears below research container
+- [ ] Report markdown renders correctly (tables, headings, etc.)
+- [ ] Result appears in command center action widget
+
+## Performance Expectations
+
+With 3 queries × 5 URLs per query = 15 URLs:
+
+**Old (Sequential):**
+- Search: ~3 seconds per query × 3 = 9s
+- Analysis: ~2 seconds per URL × 15 = 30s
+- **Total: ~39 seconds**
+
+**New (Parallel with 8 workers):**
+- Search: ~3 seconds (all parallel) = 3s
+- Analysis: ~2 seconds × 2 batches (15/8) = 4s
+- **Total: ~7 seconds**
+
+**Speedup: ~5.5x faster!**

RESEARCH_REFACTOR_PLAN.md

@@ -0,0 +1,59 @@
+# Research Refactoring Plan
+
+## Current Flow
+1. Generate queries (sequential)
+2. For each query: search (parallel), then for each result: extract+analyze (sequential)
+3. Assess completeness
+4. Generate report
+
+## New Flow
+1. Generate queries (sequential)
+2. Search ALL queries (parallel) → get all URLs
+3. Interleave URLs from all queries
+4. Extract+analyze URLs in parallel (8 workers, interleaved)
+5. Group results by query
+6. Assess completeness
+7. Generate report
+
+## Data Structure Changes
+
+### Source Event
+```python
+{
+    "type": "source",
+    "query_index": 0,  # NEW: which query this belongs to
+    "query_text": "query string",  # NEW: the actual query
+    "title": "...",
+    "url": "...",
+    "analysis": "...",
+    "finding_count": 1,  # overall finding count
+    "is_relevant": True,
+    "is_error": False,  # NEW: track failures
+    "error_message": ""  # NEW: error details
+}
+```
+
+### Query Stats Event (NEW)
+```python
+{
+    "type": "query_stats",
+    "query_index": 0,
+    "relevant_count": 5,
+    "irrelevant_count": 3,
+    "error_count": 1
+}
+```
+
+## UI Changes
+- Group sources under each query
+- Show stats per query: "5 relevant / 3 not relevant / 1 failed"
+- Toggle button to show/hide irrelevant sources
+- Track and display API failures
+
+## Implementation Steps
+1. ✅ Add research_parallel_workers to settings
+2. ⏳ Update backend ChatRequest model
+3. ⏳ Refactor stream_research() in research.py
+4. ⏳ Update research-ui.js to group by query
+5. ⏳ Add query stats display
+6. ⏳ Add toggle for irrelevant sources

backend/code.py

@@ -181,6 +181,11 @@ def stream_code_execution(client, model: str, messages: List[Dict], sbx: Sandbox
                         yield format_code_cell(code, output, has_error, images)
 
                     except Exception as e:
+                        error_str = str(e)
+                        # Check if this is a sandbox timeout error - if so, re-raise to trigger cleanup
+                        if "502" in error_str or "sandbox was not found" in error_str.lower() or "timeout" in error_str.lower():
+                            raise  # Re-raise to be caught by main.py handler
+
                         yield format_code_cell(code, f"Execution error: {str(e)}", True)
                         output = f"Execution failed: {str(e)}"
                         has_error = True

backend/main.py

@@ -128,6 +128,26 @@ Your role is to:
 - Provide well-structured, evidence-based answers
 - Identify key insights and trends
 
+When presenting your final research report:
+1. Be CONCISE - focus on key findings, not lengthy explanations
+2. Use TABLES wherever possible to structure information clearly
+3. Use markdown table syntax for comparisons, lists of facts, statistics, etc.
+4. Example table format:
+   | Category | Details |
+   |----------|---------|
+   | Item 1   | Data    |
+   | Item 2   | Data    |
+
+5. Only use prose for context and synthesis that can't be tabulated
+
+When you have completed your research, wrap your final report in <result> tags:
+
+<result>
+Your concise, table-based report here
+</result>
+
+The report will be sent back to the main interface.
+
 Focus on being comprehensive, analytical, and well-sourced in your research.
 """,
     "chat": """You are a conversational AI assistant.
@@ -157,9 +177,19 @@ class ChatRequest(BaseModel):
     model: Optional[str] = "gpt-4"  # Model name
     e2b_key: Optional[str] = None  # E2B API key for code execution
     serper_key: Optional[str] = None  # Serper API key for research
+    research_sub_agent_model: Optional[str] = None  # Smaller model for research sub-tasks
+    research_parallel_workers: Optional[int] = None  # Number of parallel workers for research
+    research_max_websites: Optional[int] = None  # Max websites to analyze per research session
     notebook_id: Optional[str] = None  # Unique notebook/tab ID for session management
 
 
+class TitleRequest(BaseModel):
+    query: str
+    endpoint: str  # User's configured LLM endpoint
+    token: Optional[str] = None  # Optional auth token
+    model: Optional[str] = "gpt-4"  # Model name
+
+
 async def stream_code_notebook(
     messages: List[dict],
     endpoint: str,
@@ -204,7 +234,21 @@ async def stream_code_notebook(
         import traceback
         error_message = f"Code execution error: {str(e)}\n{traceback.format_exc()}"
         print(error_message)
-        yield f"data: {json.dumps({'type': 'error', 'content': error_message})}\n\n"
+
+        # Check if this is a sandbox timeout error (502)
+        error_str = str(e)
+        if "502" in error_str or "sandbox was not found" in error_str.lower() or "timeout" in error_str.lower():
+            # Remove the timed-out sandbox from cache
+            if session_id in SANDBOXES:
+                try:
+                    SANDBOXES[session_id].kill()
+                except:
+                    pass
+                del SANDBOXES[session_id]
+
+            yield f"data: {json.dumps({'type': 'error', 'content': 'Sandbox timed out and has been deleted. Please run your code again to create a new sandbox.'})}\n\n"
+        else:
+            yield f"data: {json.dumps({'type': 'error', 'content': error_message})}\n\n"
 
 
 async def stream_research_notebook(
@@ -212,7 +256,10 @@ async def stream_research_notebook(
     endpoint: str,
     token: Optional[str],
     model: str,
-    serper_key: str
+    serper_key: str,
+    sub_agent_model: Optional[str] = None,
+    parallel_workers: Optional[int] = None,
+    max_websites: Optional[int] = None
 ):
     """Handle research notebook with web search"""
 
@@ -235,8 +282,20 @@ async def stream_research_notebook(
         # Create OpenAI client
         client = OpenAI(base_url=endpoint, api_key=token)
 
+        # Get system prompt for research
+        system_prompt = SYSTEM_PROMPTS.get("research", "")
+
+        # Use sub-agent model if provided, otherwise fall back to main model
+        analysis_model = sub_agent_model if sub_agent_model else model
+
+        # Use parallel workers if provided, otherwise default to 8
+        workers = parallel_workers if parallel_workers else 8
+
+        # Use max websites if provided, otherwise default to 50
+        max_sites = max_websites if max_websites else 50
+
         # Stream research
-        for update in stream_research(client, model, question, serper_key):
+        for update in stream_research(client, model, question, serper_key, max_websites=max_sites, system_prompt=system_prompt, sub_agent_model=analysis_model, parallel_workers=workers):
             yield f"data: {json.dumps(update)}\n\n"
 
     except Exception as e:
@@ -358,6 +417,52 @@ async def root():
     }
 
 
+@app.post("/api/generate-title")
+async def generate_title(request: TitleRequest):
+    """Generate a short 2-3 word title for a user query"""
+    try:
+        # Create headers
+        headers = {"Content-Type": "application/json"}
+        if request.token:
+            headers["Authorization"] = f"Bearer {request.token}"
+
+        # Call the LLM to generate a title
+        async with httpx.AsyncClient(timeout=30.0) as client:
+            llm_response = await client.post(
+                f"{request.endpoint}/chat/completions",
+                headers=headers,
+                json={
+                    "model": request.model,
+                    "messages": [
+                        {
+                            "role": "system",
+                            "content": "You are a helpful assistant that generates concise 2-3 word titles for user queries. Respond with ONLY the title, no additional text, punctuation, or quotes."
+                        },
+                        {
+                            "role": "user",
+                            "content": f"Generate a 2-3 word title for this query: {request.query}"
+                        }
+                    ],
+                    "temperature": 0.3,
+                    "max_tokens": 20
+                }
+            )
+
+            if llm_response.status_code != 200:
+                raise HTTPException(status_code=llm_response.status_code, detail="LLM API error")
+
+            result = llm_response.json()
+            title = result["choices"][0]["message"]["content"].strip()
+
+            # Remove any quotes that might be in the response
+            title = title.replace('"', '').replace("'", '')
+
+            return {"title": title}
+
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
 @app.post("/api/chat/stream")
 async def chat_stream(request: ChatRequest):
     """Proxy streaming chat to user's configured LLM endpoint"""
@@ -403,7 +508,9 @@ async def chat_stream(request: ChatRequest):
                 request.endpoint,
                 request.token,
                 request.model or "gpt-4",
-                request.serper_key or ""
+                request.serper_key or "",
+                request.research_sub_agent_model,
+                request.research_parallel_workers
             ),
             media_type="text/event-stream",
             headers={

backend/research.py

@@ -162,7 +162,7 @@ Return ONLY a JSON object with this structure:
     return {"sufficient": len(findings) >= 5, "missing_aspects": []}
 
 
-def generate_final_report(client, model: str, user_question: str, findings: List[Dict]) -> str:
+def generate_final_report(client, model: str, user_question: str, findings: List[Dict], system_prompt: str = "") -> str:
     """Generate final research report"""
     findings_text = "\n\n".join([
         f"Source {i+1}: {f['source']}\n{f['analysis']}"
@@ -175,16 +175,11 @@ All information gathered from {len(findings)} sources:
 
 {findings_text}
 
-Write a comprehensive, well-structured report that:
-1. Directly answers the research question
-2. Synthesizes information from multiple sources
-3. Includes specific facts, data, and insights
-4. Cites sources where appropriate (e.g., "According to [source]...")
-5. Is organized with clear sections/paragraphs
-
-Your report:"""
+Write a concise, well-structured report following the guidelines in your system instructions. Remember to use tables where appropriate and wrap your final report in <result> tags."""
 
     messages = [{"role": "user", "content": prompt}]
+    if system_prompt:
+        messages.insert(0, {"role": "system", "content": system_prompt})
 
     try:
         response = client.chat.completions.create(
@@ -205,23 +200,35 @@ def stream_research(
     question: str,
     serper_key: str,
     max_iterations: int = 5,
-    max_websites: int = 50
+    max_websites: int = 50,
+    system_prompt: str = "",
+    sub_agent_model: Optional[str] = None,
+    parallel_workers: int = 8
 ):
     """
     Stream deep research results with progress updates
 
+    Args:
+        sub_agent_model: Smaller/faster model for analyzing individual web pages. If None, uses main model.
+        parallel_workers: Number of parallel workers for extract+analyze operations
+
     Yields:
-        dict: Updates with type 'progress', 'source', 'thinking', 'report', 'done', or 'error'
+        dict: Updates with type 'progress', 'source', 'query_stats', 'report', 'result', 'result_preview', 'done', or 'error'
     """
+    import concurrent.futures
+    import re
+    from collections import defaultdict
+
     findings = []
     websites_visited = 0
     iteration = 0
 
+    # Use sub-agent model for analysis if provided, otherwise use main model
+    analysis_model = sub_agent_model if sub_agent_model else model
+
     yield {
         "type": "status",
-        "message": f"Starting research on: {question}",
-        "iteration": 0,
-        "total_iterations": max_iterations
+        "message": f"Starting research: {question}"
     }
 
     while iteration < max_iterations and websites_visited < max_websites:
@@ -230,9 +237,7 @@ def stream_research(
         # Generate queries
         yield {
             "type": "status",
-            "message": f"Iteration {iteration}/{max_iterations}: Generating search queries...",
-            "iteration": iteration,
-            "total_iterations": max_iterations
+            "message": "Generating search queries..."
         }
 
         existing_knowledge = "\n".join([f['analysis'] for f in findings[-3:]])
@@ -244,90 +249,206 @@ def stream_research(
             "iteration": iteration
         }
 
-        # Search and analyze
-        for query_idx, query in enumerate(queries):
-            if websites_visited >= max_websites:
-                break
-
-            yield {
-                "type": "progress",
-                "message": f"Searching: {query}",
-                "query_index": query_idx + 1,
-                "total_queries": len(queries),
-                "iteration": iteration
+        # Collect all search results for all queries in parallel
+        query_results = {}  # query_index -> list of results
+        with concurrent.futures.ThreadPoolExecutor(max_workers=3) as executor:
+            future_to_query_idx = {
+                executor.submit(search_web, query, serper_key, num_results=5): idx
+                for idx, query in enumerate(queries)
             }
 
-            search_results = search_web(query, serper_key, num_results=5)
+            for future in concurrent.futures.as_completed(future_to_query_idx):
+                query_idx = future_to_query_idx[future]
+                try:
+                    results = future.result()
+                    query_results[query_idx] = results
+                except Exception as e:
+                    print(f"Search failed for query {query_idx}: {e}")
+                    query_results[query_idx] = []
+
+        # Interleave results from all queries
+        interleaved_urls = []
+        max_results = max((len(results) for results in query_results.values()), default=0)
+
+        for result_idx in range(max_results):
+            for query_idx in range(len(queries)):
+                if query_idx in query_results and result_idx < len(query_results[query_idx]):
+                    result = query_results[query_idx][result_idx]
+                    interleaved_urls.append({
+                        'query_index': query_idx,
+                        'query_text': queries[query_idx],
+                        'url': result['url'],
+                        'title': result['title']
+                    })
 
-            for result_idx, result in enumerate(search_results):
-                if websites_visited >= max_websites:
-                    break
+        # Track stats per query
+        query_stats = defaultdict(lambda: {'relevant': 0, 'irrelevant': 0, 'error': 0})
 
-                url = result['url']
-
-                yield {
-                    "type": "progress",
-                    "message": f"Analyzing: {result['title'][:60]}...",
-                    "websites_visited": websites_visited + 1,
-                    "max_websites": max_websites
-                }
+        # Process URLs in parallel with interleaved order
+        def process_url(url_data):
+            """Extract content and analyze for a single URL"""
+            query_idx = url_data['query_index']
+            query_text = url_data['query_text']
+            url = url_data['url']
+            title = url_data['title']
 
+            try:
+                # Extract content
                 content = extract_content(url)
-                websites_visited += 1
 
                 if not content or len(content) < 100:
-                    continue
+                    return {
+                        'query_index': query_idx,
+                        'query_text': query_text,
+                        'title': title,
+                        'url': url,
+                        'analysis': "Could not extract content from this page.",
+                        'is_relevant': False,
+                        'is_error': True,
+                        'error_message': "Content extraction failed"
+                    }
 
-                analysis = analyze_content(client, model, question, content, url)
+                # Analyze content
+                analysis = analyze_content(client, analysis_model, question, content, url)
 
-                if "no relevant information" not in analysis.lower():
-                    findings.append({
-                        'source': url,
-                        'title': result['title'],
-                        'analysis': analysis
-                    })
+                is_relevant = "no relevant information" not in analysis.lower()
+
+                return {
+                    'query_index': query_idx,
+                    'query_text': query_text,
+                    'title': title,
+                    'url': url,
+                    'analysis': analysis,
+                    'is_relevant': is_relevant,
+                    'is_error': False,
+                    'error_message': ""
+                }
+            except Exception as e:
+                return {
+                    'query_index': query_idx,
+                    'query_text': query_text,
+                    'title': title,
+                    'url': url,
+                    'analysis': f"Error: {str(e)}",
+                    'is_relevant': False,
+                    'is_error': True,
+                    'error_message': str(e)
+                }
+
+        # Process all URLs in parallel with progress updates
+        with concurrent.futures.ThreadPoolExecutor(max_workers=parallel_workers) as executor:
+            futures = {executor.submit(process_url, url_data): url_data for url_data in interleaved_urls[:max_websites - websites_visited]}
+
+            for future in concurrent.futures.as_completed(futures):
+                if websites_visited >= max_websites:
+                    break
 
+                try:
+                    result = future.result()
+                    websites_visited += 1
+
+                    # Update stats
+                    if result['is_error']:
+                        query_stats[result['query_index']]['error'] += 1
+                    elif result['is_relevant']:
+                        query_stats[result['query_index']]['relevant'] += 1
+                        # Add to findings
+                        findings.append({
+                            'source': result['url'],
+                            'title': result['title'],
+                            'analysis': result['analysis']
+                        })
+                    else:
+                        query_stats[result['query_index']]['irrelevant'] += 1
+
+                    # Send source event
                     yield {
                         "type": "source",
+                        "query_index": result['query_index'],
+                        "query_text": result['query_text'],
                         "title": result['title'],
-                        "url": url,
-                        "analysis": analysis,
-                        "finding_count": len(findings)
+                        "url": result['url'],
+                        "analysis": result['analysis'],
+                        "finding_count": len(findings),
+                        "is_relevant": result['is_relevant'],
+                        "is_error": result['is_error'],
+                        "error_message": result['error_message']
                     }
 
-        # Assess completeness
-        yield {
-            "type": "status",
-            "message": "Assessing research completeness...",
-            "iteration": iteration,
-            "findings_count": len(findings)
-        }
-
-        assessment = assess_completeness(client, model, question, findings)
+                    # Send updated stats for this query
+                    stats = query_stats[result['query_index']]
+                    yield {
+                        "type": "query_stats",
+                        "query_index": result['query_index'],
+                        "relevant_count": stats['relevant'],
+                        "irrelevant_count": stats['irrelevant'],
+                        "error_count": stats['error']
+                    }
 
-        yield {
-            "type": "assessment",
-            "sufficient": assessment.get('sufficient', False),
-            "missing_aspects": assessment.get('missing_aspects', []),
-            "findings_count": len(findings)
-        }
+                except Exception as e:
+                    print(f"Error processing URL: {e}")
 
-        if assessment.get('sufficient', False):
+        # Assess completeness
+        if len(findings) >= 3:  # Only assess if we have some findings
             yield {
                 "type": "status",
-                "message": "Research complete! Generating final report...",
+                "message": "Evaluating information gathered..."
             }
-            break
+
+            assessment = assess_completeness(client, model, question, findings)
+
+            yield {
+                "type": "assessment",
+                "sufficient": assessment.get('sufficient', False),
+                "missing_aspects": assessment.get('missing_aspects', []),
+                "findings_count": len(findings)
+            }
+
+            if assessment.get('sufficient', False):
+                yield {
+                    "type": "status",
+                    "message": "Research complete! Generating final report..."
+                }
+                break
 
     # Generate final report
     if findings:
-        report = generate_final_report(client, model, question, findings)
+        report = generate_final_report(client, model, question, findings, system_prompt)
+
+        print("\n" + "="*80)
+        print("RAW REPORT TEXT:")
+        print("="*80)
+        print(report)
+        print("="*80 + "\n")
+
+        # Parse result tags from report
+        result_match = re.search(r'<result>(.*?)</result>', report, re.DOTALL)
+
+        result_content = None
+        if result_match:
+            result_content = result_match.group(1).strip()
+            print("\n" + "="*80)
+            print("EXTRACTED RESULT CONTENT:")
+            print("="*80)
+            print(result_content)
+            print("="*80 + "\n")
+        else:
+            # If no result tags, use the full report
+            result_content = report
+            print(f"Warning: No <result> tags found in report, using full content")
+
+        # Send result preview to research notebook
+        yield {
+            "type": "result_preview",
+            "content": result_content,
+            "figures": {}  # Research doesn't generate figures
+        }
 
+        # Send result to command center
         yield {
-            "type": "report",
-            "content": report,
-            "sources_count": len(findings),
-            "websites_visited": websites_visited
+            "type": "result",
+            "content": result_content,
+            "figures": {}
         }
     else:
         yield {

index.html

@@ -139,6 +139,30 @@
                             </div>
                         </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 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 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>

research-ui.js

@@ -1,108 +1,211 @@
-// Research UI helper functions
+// Research UI - Grouped by queries with stats and toggle
 
-function createStatusMessage(chatContainer, message, iteration, totalIterations) {
-    const statusDiv = document.createElement('div');
-    statusDiv.className = 'research-status';
+let researchContainer = null;
+let currentQueries = [];
+let queryData = {};  // query_index -> {sources: [], stats: {}}
+let showIrrelevant = false;  // Toggle state
 
-    let progressInfo = '';
-    if (iteration !== undefined && totalIterations !== undefined) {
-        progressInfo = `<span class="iteration-badge">Iteration ${iteration}/${totalIterations}</span>`;
+function getOrCreateResearchContainer(chatContainer) {
+    if (!researchContainer || !chatContainer.contains(researchContainer)) {
+        researchContainer = document.createElement('div');
+        researchContainer.className = 'research-container';
+        researchContainer.innerHTML = `
+            <div class="research-header">
+                <div class="research-title">Research in progress...</div>
+                <button class="toggle-irrelevant-btn" onclick="toggleIrrelevantSources()">
+                    Show irrelevant sources
+                </button>
+            </div>
+            <div class="research-body">
+                <div class="research-queries-section"></div>
+            </div>
+        `;
+        chatContainer.appendChild(researchContainer);
     }
+    return researchContainer;
+}
 
-    statusDiv.innerHTML = `
-        <div class="status-icon">🔍</div>
-        <div class="status-message">${escapeHtml(message)}</div>
-        ${progressInfo}
-    `;
-    chatContainer.appendChild(statusDiv);
+function createStatusMessage(chatContainer, message) {
+    const container = getOrCreateResearchContainer(chatContainer);
+    const header = container.querySelector('.research-title');
+    header.textContent = message;
 }
 
 function createQueriesMessage(chatContainer, queries, iteration) {
-    const queriesDiv = document.createElement('div');
-    queriesDiv.className = 'research-queries';
-    queriesDiv.innerHTML = `
-        <div class="queries-label">Search Queries (Iteration ${iteration})</div>
-        <ul class="queries-list">
-            ${queries.map(q => `<li>${escapeHtml(q)}</li>`).join('')}
-        </ul>
-    `;
-    chatContainer.appendChild(queriesDiv);
-}
+    currentQueries = queries;
+    queryData = {};  // Reset
 
-function updateProgress(chatContainer, message, websitesVisited, maxWebsites) {
-    // Find or create progress indicator
-    let progressDiv = chatContainer.querySelector('.research-progress');
+    // Initialize query data
+    queries.forEach((query, idx) => {
+        queryData[idx] = {
+            query: query,
+            sources: [],
+            stats: { relevant: 0, irrelevant: 0, error: 0 }
+        };
+    });
 
-    if (!progressDiv) {
-        progressDiv = document.createElement('div');
-        progressDiv.className = 'research-progress';
-        chatContainer.appendChild(progressDiv);
-    }
+    const container = getOrCreateResearchContainer(chatContainer);
+    const queriesSection = container.querySelector('.research-queries-section');
 
-    let progressBar = '';
-    if (websitesVisited !== undefined && maxWebsites !== undefined) {
-        const percent = Math.min(100, (websitesVisited / maxWebsites) * 100);
-        progressBar = `
-            <div class="progress-bar">
-                <div class="progress-fill" style="width: ${percent}%"></div>
+    // Create query sections
+    let html = '<div class="queries-title">Search queries:</div>';
+    queries.forEach((query, idx) => {
+        html += `
+            <div class="query-group" id="query-group-${idx}">
+                <div class="query-header" style="cursor: pointer;" onclick="document.getElementById('query-sources-${idx}').scrollIntoView({behavior: 'smooth', block: 'nearest'})">
+                    <span class="query-text">${escapeHtml(query)}</span>
+                    <span class="query-stats" id="query-stats-${idx}">0 relevant / 0 not relevant / 0 failed</span>
+                </div>
+                <div class="query-sources" id="query-sources-${idx}"></div>
             </div>
-            <div class="progress-count">${websitesVisited}/${maxWebsites} websites</div>
         `;
+    });
+
+    queriesSection.innerHTML = html;
+}
+
+function createSourceMessage(chatContainer, data) {
+    // data includes: query_index, query_text, title, url, analysis, is_relevant, is_error, error_message
+
+    const queryIdx = data.query_index;
+
+    // Store source data
+    if (!queryData[queryIdx]) {
+        queryData[queryIdx] = {
+            query: data.query_text,
+            sources: [],
+            stats: { relevant: 0, irrelevant: 0, error: 0 }
+        };
     }
 
-    progressDiv.innerHTML = `
-        <div class="progress-message">${escapeHtml(message)}</div>
-        ${progressBar}
-    `;
+    queryData[queryIdx].sources.push(data);
+
+    // Update display if relevant or if showing irrelevant
+    if (data.is_relevant || showIrrelevant) {
+        renderQuerySources(queryIdx);
+    }
 }
 
-function createSourceMessage(chatContainer, title, url, analysis, findingCount) {
-    const sourceDiv = document.createElement('div');
-    sourceDiv.className = 'research-source';
-    sourceDiv.innerHTML = `
-        <div class="source-header">
-            <span class="source-badge">Source #${findingCount}</span>
-            <a href="${escapeHtml(url)}" target="_blank" class="source-url">${escapeHtml(title)}</a>
-        </div>
-        <div class="source-analysis">${escapeHtml(analysis)}</div>
-    `;
-    chatContainer.appendChild(sourceDiv);
+function updateQueryStats(queryIdx, stats) {
+    // Update stored stats
+    if (queryData[queryIdx]) {
+        queryData[queryIdx].stats = stats;
+    }
+
+    // Update stats display
+    const statsEl = document.getElementById(`query-stats-${queryIdx}`);
+    if (statsEl) {
+        const parts = [];
+        if (stats.relevant > 0) parts.push(`${stats.relevant} relevant`);
+        if (stats.irrelevant > 0) parts.push(`${stats.irrelevant} not relevant`);
+        if (stats.error > 0) parts.push(`${stats.error} failed`);
+
+        statsEl.textContent = parts.length > 0 ? parts.join(' / ') : 'No results yet';
+        statsEl.style.color = stats.relevant > 0 ? '#2e7d32' : '#666';
+    }
 }
 
-function createAssessmentMessage(chatContainer, sufficient, missingAspects, findingsCount) {
-    const assessmentDiv = document.createElement('div');
-    assessmentDiv.className = 'research-assessment';
-
-    const status = sufficient ? '✅ Research Complete' : '🔄 Continuing Research';
-    const statusClass = sufficient ? 'complete' : 'continuing';
-
-    let missingHtml = '';
-    if (missingAspects && missingAspects.length > 0) {
-        missingHtml = `
-            <div class="missing-aspects">
-                <strong>Missing aspects:</strong>
-                <ul>${missingAspects.map(a => `<li>${escapeHtml(a)}</li>`).join('')}</ul>
+function renderQuerySources(queryIdx) {
+    const sourcesContainer = document.getElementById(`query-sources-${queryIdx}`);
+    if (!sourcesContainer || !queryData[queryIdx]) return;
+
+    const sources = queryData[queryIdx].sources;
+
+    // Filter sources based on toggle
+    const visibleSources = showIrrelevant ? sources : sources.filter(s => s.is_relevant);
+
+    if (visibleSources.length === 0) {
+        sourcesContainer.innerHTML = '<div class="no-sources">No sources to display</div>';
+        return;
+    }
+
+    let html = '';
+    visibleSources.forEach((source, idx) => {
+        const sourceId = `source-${queryIdx}-${idx}`;
+        const statusClass = source.is_error ? 'error' : (source.is_relevant ? 'relevant' : 'irrelevant');
+
+        html += `
+            <div class="research-source ${statusClass}">
+                <div class="source-header" onclick="toggleSourceContent('${sourceId}')">
+                    <span class="source-status-icon">${source.is_error ? '✗' : (source.is_relevant ? '✓' : '○')}</span>
+                    <a href="${escapeHtml(source.url)}" target="_blank" class="source-url" onclick="event.stopPropagation()">${escapeHtml(source.title)}</a>
+                    <span class="source-toggle">▼</span>
+                </div>
+                <div class="source-analysis" id="${sourceId}" style="display: none;">
+                    ${parseMarkdown(source.analysis)}
+                </div>
             </div>
         `;
+    });
+
+    sourcesContainer.innerHTML = html;
+}
+
+function toggleSourceContent(sourceId) {
+    const content = document.getElementById(sourceId);
+    if (!content) return;
+
+    const header = content.previousElementSibling;
+    const toggle = header.querySelector('.source-toggle');
+
+    if (content.style.display === 'none') {
+        content.style.display = 'block';
+        toggle.textContent = '▲';
+    } else {
+        content.style.display = 'none';
+        toggle.textContent = '▼';
+    }
+}
+
+function toggleIrrelevantSources() {
+    showIrrelevant = !showIrrelevant;
+
+    // Update button text
+    const btn = document.querySelector('.toggle-irrelevant-btn');
+    if (btn) {
+        btn.textContent = showIrrelevant ? 'Hide irrelevant sources' : 'Show irrelevant sources';
+    }
+
+    // Re-render all queries
+    Object.keys(queryData).forEach(queryIdx => {
+        renderQuerySources(parseInt(queryIdx));
+    });
+}
+
+function updateProgress(chatContainer, message, websitesVisited, maxWebsites) {
+    // Progress is now tracked per query via stats, so this is less important
+    // But we can still update the header
+    const container = getOrCreateResearchContainer(chatContainer);
+    const header = container.querySelector('.research-title');
+    if (websitesVisited !== undefined && maxWebsites !== undefined) {
+        header.textContent = `Research in progress... (${websitesVisited}/${maxWebsites} pages analyzed)`;
     }
+}
 
-    assessmentDiv.innerHTML = `
-        <div class="assessment-status ${statusClass}">${status}</div>
-        <div class="assessment-info">Gathered ${findingsCount} relevant sources</div>
-        ${missingHtml}
-    `;
-    chatContainer.appendChild(assessmentDiv);
+function createAssessmentMessage(chatContainer, sufficient, missingAspects, findingsCount) {
+    const container = getOrCreateResearchContainer(chatContainer);
+    const header = container.querySelector('.research-title');
+
+    if (sufficient) {
+        header.textContent = `Research complete - ${findingsCount} relevant sources found`;
+    } else {
+        header.textContent = `Continuing research - ${findingsCount} relevant sources found so far`;
+    }
 }
 
 function createReportMessage(chatContainer, content, sourcesCount, websitesVisited) {
-    const reportDiv = document.createElement('div');
-    reportDiv.className = 'research-report';
-    reportDiv.innerHTML = `
-        <div class="report-header">
-            <div class="report-title">📊 Research Report</div>
-            <div class="report-stats">${sourcesCount} sources • ${websitesVisited} websites analyzed</div>
-        </div>
-        <div class="report-content">${parseMarkdown(content)}</div>
-    `;
-    chatContainer.appendChild(reportDiv);
+    // This function is kept for backwards compatibility
+    // but normally won't be called as reports use result_preview now
+
+    // Mark research as complete
+    if (researchContainer) {
+        const header = researchContainer.querySelector('.research-title');
+        header.textContent = `Research complete - ${sourcesCount} sources`;
+    }
+
+    // Reset for next research
+    researchContainer = null;
+    queryData = {};
+    currentQueries = [];
+    showIrrelevant = false;
 }

script.js

@@ -296,6 +296,7 @@ async function sendMessage(tabId) {
 
     // Remove welcome message if it exists (only on first user message)
     const welcomeMsg = chatContainer.querySelector('.welcome-message');
+    const isFirstMessage = welcomeMsg !== null;
     if (welcomeMsg) {
         welcomeMsg.remove();
     }
@@ -309,6 +310,11 @@ async function sendMessage(tabId) {
     `;
     chatContainer.appendChild(userMsg);
 
+    // Generate a title for the notebook if this is the first message and not command center
+    if (isFirstMessage && tabId !== 0) {
+        generateNotebookTitle(tabId, message);
+    }
+
     // Clear input and disable it during processing
     input.value = '';
     input.disabled = true;
@@ -331,6 +337,43 @@ async function sendMessage(tabId) {
     setTabGenerating(tabId, false);
 }
 
+async function generateNotebookTitle(tabId, query) {
+    const currentSettings = getSettings();
+    const backendEndpoint = 'http://localhost:8000/api';
+    const llmEndpoint = currentSettings.endpoint || 'https://api.openai.com/v1';
+    const modelToUse = currentSettings.model || 'gpt-4';
+
+    try {
+        const response = await fetch(`${backendEndpoint}/generate-title`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                query: query,
+                endpoint: llmEndpoint,
+                token: currentSettings.token || null,
+                model: modelToUse
+            })
+        });
+
+        if (response.ok) {
+            const result = await response.json();
+            const title = result.title;
+
+            // Update the tab title
+            const tab = document.querySelector(`[data-tab-id="${tabId}"]`);
+            if (tab) {
+                const titleEl = tab.querySelector('.tab-title');
+                if (titleEl) {
+                    titleEl.textContent = title.toUpperCase();
+                }
+            }
+        }
+    } catch (error) {
+        console.error('Failed to generate title:', error);
+        // Don't show error to user, just keep the default title
+    }
+}
+
 function getNotebookTypeFromContainer(chatContainer) {
     // Try to get type from data attribute first (for dynamically created notebooks)
     const typeFromData = chatContainer.dataset.notebookType;
@@ -399,6 +442,9 @@ async function streamChatResponse(messages, chatContainer, notebookType, tabId)
                 model: modelToUse,
                 e2b_key: currentSettings.e2bKey || null,
                 serper_key: currentSettings.serperKey || null,
+                research_sub_agent_model: currentSettings.researchSubAgentModel || null,
+                research_parallel_workers: currentSettings.researchParallelWorkers || null,
+                research_max_websites: currentSettings.researchMaxWebsites || null,
                 notebook_id: tabId.toString()  // Send unique tab ID for sandbox sessions
             })
         });
@@ -454,7 +500,7 @@ async function streamChatResponse(messages, chatContainer, notebookType, tabId)
                         updateActionWidgetWithResult(tabId, data.content, data.figures);
 
                     } else if (data.type === 'result_preview') {
-                        // Show result in CODE notebook as highlighted message
+                        // Show result preview
                         // Replace <figure_x> tags with placeholders BEFORE markdown processing
                         let previewContent = data.content;
                         const figurePlaceholders = {};
@@ -491,11 +537,12 @@ async function streamChatResponse(messages, chatContainer, notebookType, tabId)
                             html = html.replace(new RegExp(placeholderId, 'g'), imageHtml);
                         }
 
+                        // Create result block
                         const resultDiv = document.createElement('div');
-                        resultDiv.className = 'result-preview';
+                        resultDiv.className = 'research-report';
                         resultDiv.innerHTML = `
-                            <div class="result-preview-label">RESULT SUMMARY</div>
-                            <div class="result-preview-content">${html}</div>
+                            <div class="report-header">Report</div>
+                            <div class="report-content">${html}</div>
                         `;
                         chatContainer.appendChild(resultDiv);
                         chatContainer.scrollTop = chatContainer.scrollHeight;
@@ -516,10 +563,18 @@ async function streamChatResponse(messages, chatContainer, notebookType, tabId)
                         chatContainer.scrollTop = chatContainer.scrollHeight;
 
                     } else if (data.type === 'source') {
-                        // Research source found
-                        createSourceMessage(chatContainer, data.title, data.url, data.analysis, data.finding_count);
+                        // Research source found - now includes query grouping
+                        createSourceMessage(chatContainer, data);
                         chatContainer.scrollTop = chatContainer.scrollHeight;
 
+                    } else if (data.type === 'query_stats') {
+                        // Update query statistics
+                        updateQueryStats(data.query_index, {
+                            relevant: data.relevant_count,
+                            irrelevant: data.irrelevant_count,
+                            error: data.error_count
+                        });
+
                     } else if (data.type === 'assessment') {
                         // Research completeness assessment
                         createAssessmentMessage(chatContainer, data.sufficient, data.missing_aspects, data.findings_count);
@@ -688,22 +743,27 @@ function updateLastCodeCell(chatContainer, output, isError, images) {
 
 function showActionWidget(chatContainer, action, message, targetTabId) {
     const widget = document.createElement('div');
-    widget.className = 'action-widget';
-    widget.style.cursor = 'pointer';
+    widget.className = 'action-widget running';  // Add 'running' class for animation
     widget.dataset.targetTabId = targetTabId;
     widget.innerHTML = `
-        <div class="action-widget-header">
+        <div class="action-widget-header" style="cursor: pointer;">
             <span class="action-widget-icon">→</span>
-            <span class="action-widget-text">Opening ${action.toUpperCase()} notebook...</span>
+            <span class="action-widget-text">Opening ${action.toUpperCase()} notebook</span>
             <span class="action-widget-type">${action}</span>
         </div>
-        <div class="action-widget-message">"${escapeHtml(message)}"</div>
+        <div class="action-widget-message" style="cursor: pointer;">${escapeHtml(message)}</div>
     `;
 
-    // Make widget clickable to jump to the notebook
-    widget.addEventListener('click', () => {
+    // Make header and message clickable to jump to the notebook
+    const header = widget.querySelector('.action-widget-header');
+    const messageEl = widget.querySelector('.action-widget-message');
+
+    const clickHandler = () => {
         switchToTab(parseInt(targetTabId));
-    });
+    };
+
+    header.addEventListener('click', clickHandler);
+    messageEl.addEventListener('click', clickHandler);
 
     chatContainer.appendChild(widget);
     chatContainer.scrollTop = chatContainer.scrollHeight;
@@ -716,10 +776,13 @@ function updateActionWidgetWithResult(tabId, resultContent, figures) {
     const widget = actionWidgets[tabId];
     if (!widget) return;
 
-    // Update status text
+    // Remove running animation and update status text
+    widget.classList.remove('running');
+
     const statusText = widget.querySelector('.action-widget-text');
     if (statusText) {
-        statusText.textContent = statusText.textContent.replace('Opening', 'Completed');
+        // Remove trailing dots and change text
+        statusText.textContent = statusText.textContent.replace('Opening', 'Completed').replace(/\.+$/, '');
     }
 
     // Replace <figure_x> tags with placeholders BEFORE markdown processing
@@ -805,9 +868,12 @@ function escapeHtml(text) {
 }
 
 function parseMarkdown(text) {
-    // Simple markdown parser for code blocks and inline code
+    // Comprehensive markdown parser
     let html = escapeHtml(text);
 
+    // Remove any literal <br> tags that came through (convert to spaces in tables, newlines elsewhere)
+    // We'll handle this more carefully after table processing
+
     // Code blocks (```language\ncode\n```)
     html = html.replace(/```(\w+)?\n([\s\S]*?)```/g, (match, lang, code) => {
         return `<pre><code>${code.trim()}</code></pre>`;
@@ -816,22 +882,157 @@ function parseMarkdown(text) {
     // Inline code (`code`)
     html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
 
+    // Links [text](url) - process before bold/italic to avoid conflicts
+    html = html.replace(/\[([^\]]+)\]\(([^\)]+)\)/g, (match, text, url) => {
+        return `<a href="${url}" target="_blank" rel="noopener noreferrer">${text}</a>`;
+    });
+
     // Bold (**text**)
     html = html.replace(/\*\*([^\*]+)\*\*/g, '<strong>$1</strong>');
 
     // Italic (*text*)
     html = html.replace(/\*([^\*]+)\*/g, '<em>$1</em>');
 
-    // Paragraphs (double newline creates new paragraph)
-    html = html.split('\n\n').map(para => {
-        para = para.trim();
-        if (para.startsWith('<pre>') || para.startsWith('__FIGURE_')) {
-            return para; // Don't wrap code blocks or figure placeholders
+    // Tables (before paragraph processing)
+    // First, clean up <br> tags in table cells
+    // Changed + to * to make data rows optional (allows tables with just headers)
+    html = html.replace(/(\|.+\|[\r\n]+)(\|[\s:|-]+\|[\r\n]+)((?:\|.+\|[\r\n]*)*)/g, (match, header, separator, rows) => {
+        // Clean escaped <br> tags in header and rows
+        const cleanedHeader = header.replace(/&lt;br&gt;/gi, ' ');
+        const cleanedRows = rows.replace(/&lt;br&gt;/gi, ' ');
+
+        // Split header and keep empty cells (don't filter them out)
+        const headerParts = cleanedHeader.trim().split('|');
+        // Remove first and last empty elements (from leading/trailing |)
+        if (headerParts[0].trim() === '') headerParts.shift();
+        if (headerParts[headerParts.length - 1].trim() === '') headerParts.pop();
+        const headerCells = headerParts.map(cell =>
+            `<th>${cell.trim()}</th>`
+        ).join('');
+
+        // Only process rows if they exist
+        let rowsHtml = '';
+        if (cleanedRows.trim()) {
+            rowsHtml = cleanedRows.trim().split('\n').map(row => {
+                const rowParts = row.trim().split('|');
+                // Remove first and last empty elements (from leading/trailing |)
+                if (rowParts[0].trim() === '') rowParts.shift();
+                if (rowParts[rowParts.length - 1].trim() === '') rowParts.pop();
+                const cells = rowParts.map(cell =>
+                    `<td>${cell.trim()}</td>`
+                ).join('');
+                return cells ? `<tr>${cells}</tr>` : '';
+            }).filter(row => row).join('');
+        }
+
+        // Add newline after table to preserve line breaks with following content
+        return `<table class="markdown-table"><thead><tr>${headerCells}</tr></thead><tbody>${rowsHtml}</tbody></table>\n`;
+    });
+
+    // Now clean up any remaining <br> tags (convert to newlines for paragraph processing)
+    html = html.replace(/&lt;br&gt;/gi, '\n');
+
+    // Split into lines for processing
+    const lines = html.split('\n');
+    const processedLines = [];
+    let i = 0;
+
+    while (i < lines.length) {
+        const line = lines[i].trim();
+
+        // Skip empty lines
+        if (!line) {
+            i++;
+            continue;
+        }
+
+        // Skip horizontal rules / separator lines (lines with only dashes, possibly with spaces)
+        if (line.match(/^[\s-]+$/)) {
+            i++;
+            continue;
+        }
+
+        // Don't process special elements
+        if (line.startsWith('<pre>') || line.startsWith('<table') || line.startsWith('__FIGURE_')) {
+            processedLines.push(line);
+            i++;
+            continue;
+        }
+
+        // Check for headings (must start with ###, ##, or # followed by space or content)
+        const h3Match = line.match(/^###\s*(.*)$/);
+        if (h3Match) {
+            processedLines.push(`<h3>${h3Match[1]}</h3>`);
+            i++;
+            continue;
+        }
+
+        const h2Match = line.match(/^##\s*(.*)$/);
+        if (h2Match) {
+            processedLines.push(`<h2>${h2Match[1]}</h2>`);
+            i++;
+            continue;
         }
-        return para ? `<p>${para.replace(/\n/g, '<br>')}</p>` : '';
-    }).join('\n');
 
-    return html;
+        const h1Match = line.match(/^#\s*(.*)$/);
+        if (h1Match) {
+            processedLines.push(`<h1>${h1Match[1]}</h1>`);
+            i++;
+            continue;
+        }
+
+        // Check for unordered list
+        if (line.match(/^[-*+]\s/)) {
+            const listItems = [];
+            while (i < lines.length && lines[i].trim().match(/^[-*+]\s/)) {
+                const match = lines[i].trim().match(/^[-*+]\s(.+)$/);
+                if (match) listItems.push(`<li>${match[1]}</li>`);
+                i++;
+            }
+            processedLines.push(`<ul>${listItems.join('')}</ul>`);
+            continue;
+        }
+
+        // Check for ordered list
+        if (line.match(/^\d+\.\s/)) {
+            const listItems = [];
+            while (i < lines.length && lines[i].trim().match(/^\d+\.\s/)) {
+                const match = lines[i].trim().match(/^\d+\.\s(.+)$/);
+                if (match) listItems.push(`<li>${match[1]}</li>`);
+                i++;
+            }
+            processedLines.push(`<ol>${listItems.join('')}</ol>`);
+            continue;
+        }
+
+        // Collect paragraph lines (until we hit a blank line or special element)
+        const paragraphLines = [];
+        while (i < lines.length) {
+            const currentLine = lines[i].trim();
+
+            // Stop at blank line
+            if (!currentLine) break;
+
+            // Stop at special elements
+            if (currentLine.startsWith('<pre>') ||
+                currentLine.startsWith('<table') ||
+                currentLine.startsWith('__FIGURE_') ||
+                currentLine.match(/^#{1,3}\s*/) ||
+                currentLine.match(/^[-*+]\s/) ||
+                currentLine.match(/^\d+\.\s/)) {
+                break;
+            }
+
+            paragraphLines.push(currentLine);
+            i++;
+        }
+
+        if (paragraphLines.length > 0) {
+            processedLines.push(`<p>${paragraphLines.join(' ')}</p>`);
+        }
+    }
+
+    return processedLines.join('\n');
 }
 
 // Settings management
@@ -860,6 +1061,9 @@ function openSettings() {
     document.getElementById('setting-model-code').value = settings.models?.code || '';
     document.getElementById('setting-model-research').value = settings.models?.research || '';
     document.getElementById('setting-model-chat').value = settings.models?.chat || '';
+    document.getElementById('setting-research-sub-agent-model').value = settings.researchSubAgentModel || '';
+    document.getElementById('setting-research-parallel-workers').value = settings.researchParallelWorkers || '';
+    document.getElementById('setting-research-max-websites').value = settings.researchMaxWebsites || '';
 
     // Clear any status message
     const status = document.getElementById('settingsStatus');
@@ -883,6 +1087,9 @@ function saveSettings() {
     const modelCode = document.getElementById('setting-model-code').value.trim();
     const modelResearch = document.getElementById('setting-model-research').value.trim();
     const modelChat = document.getElementById('setting-model-chat').value.trim();
+    const researchSubAgentModel = document.getElementById('setting-research-sub-agent-model').value.trim();
+    const researchParallelWorkers = document.getElementById('setting-research-parallel-workers').value.trim();
+    const researchMaxWebsites = document.getElementById('setting-research-max-websites').value.trim();
 
     // Validate endpoint
     if (!endpoint) {
@@ -902,6 +1109,9 @@ function saveSettings() {
     settings.model = model;
     settings.e2bKey = e2bKey;
     settings.serperKey = serperKey;
+    settings.researchSubAgentModel = researchSubAgentModel;
+    settings.researchParallelWorkers = researchParallelWorkers ? parseInt(researchParallelWorkers) : null;
+    settings.researchMaxWebsites = researchMaxWebsites ? parseInt(researchMaxWebsites) : null;
     settings.models = {
         agent: modelAgent,
         code: modelCode,

style.css

@@ -245,7 +245,7 @@ body {
     background: #f5f5f5;
     padding: 15px 20px;
     border-bottom: 1px solid #ccc;
-    display: flex;
+    display: none; /* Hidden for cleaner UI */
     justify-content: space-between;
     align-items: center;
     gap: 20px;
@@ -280,9 +280,10 @@ body {
 }
 
 .chat-container {
-    max-width: 900px;
+    max-width: 1000px;
+    width: 100%;
     margin: 0 auto;
-    font-size: 13px;
+    font-size: 12px;
 }
 
 .jupyter-notebook-container {
@@ -354,6 +355,43 @@ body {
     word-wrap: break-word;
 }
 
+.message-content ul,
+.message-content ol {
+    margin: 8px 0;
+    padding-left: 24px;
+    list-style-position: outside;
+}
+
+.message-content li {
+    margin-bottom: 4px;
+    white-space: normal;
+}
+
+.message-content h1,
+.message-content h2,
+.message-content h3 {
+    margin: 12px 0 8px 0;
+    font-weight: 500;
+    white-space: normal;
+}
+
+.message-content h1 {
+    font-size: 16px;
+}
+
+.message-content h2 {
+    font-size: 15px;
+}
+
+.message-content h3 {
+    font-size: 14px;
+}
+
+.message-content p {
+    margin-bottom: 8px;
+    white-space: pre-wrap;
+}
+
 .message-content code {
     background: #e0e0e0;
     padding: 2px 6px;
@@ -685,27 +723,39 @@ body {
 /* Action Widget */
 .action-widget {
     margin: 8px 0;
-    padding: 10px 12px;
-    background: #e8f5e9;
     border: 1px solid #1b5e20;
     border-left: 4px solid #1b5e20;
     border-radius: 4px;
     font-size: 12px;
     display: flex;
     flex-direction: column;
-    gap: 6px;
     transition: all 0.2s;
+    overflow: hidden;
 }
 
-.action-widget:hover {
-    background: #c8e6c9;
-    transform: translateX(2px);
+.action-widget.running {
+    animation: pulse-border 2s ease-in-out infinite;
+}
+
+@keyframes pulse-border {
+    0%, 100% {
+        border-left-color: #1b5e20;
+    }
+    50% {
+        border-left-color: #4caf50;
+    }
 }
 
 .action-widget-header {
     display: flex;
     align-items: center;
     gap: 8px;
+    padding: 10px 12px;
+    background: #e8f5e9;
+}
+
+.action-widget-header:hover {
+    background: #c8e6c9;
 }
 
 .action-widget-icon {
@@ -729,19 +779,53 @@ body {
 .action-widget-message {
     font-size: 10px;
     color: #666;
-    padding: 6px 8px;
-    background: rgba(27, 94, 32, 0.05);
-    border-radius: 3px;
+    padding: 6px 8px 10px 12px;
+    background: #e8f5e9;
     font-style: italic;
     line-height: 1.4;
 }
 
 .action-widget-result {
-    margin-top: 10px;
-    padding: 10px 0;
+    padding: 12px;
     font-size: 12px;
     line-height: 1.6;
     color: #1a1a1a;
+    background: white;
+    border-top: 1px solid #e0e0e0;
+}
+
+.action-widget-result ul,
+.action-widget-result ol {
+    margin: 8px 0;
+    padding-left: 24px;
+    list-style-position: outside;
+}
+
+.action-widget-result li {
+    margin-bottom: 4px;
+}
+
+.action-widget-result h1,
+.action-widget-result h2,
+.action-widget-result h3 {
+    margin: 12px 0 8px 0;
+    font-weight: 500;
+}
+
+.action-widget-result h1 {
+    font-size: 14px;
+}
+
+.action-widget-result h2 {
+    font-size: 13px;
+}
+
+.action-widget-result h3 {
+    font-size: 12px;
+}
+
+.action-widget-result p {
+    margin-bottom: 8px;
 }
 
 .action-widget-result-header {
@@ -818,148 +902,192 @@ body {
 }
 
 /* Research Notebook Styles */
-.research-status {
+.research-container {
     margin: 16px 0;
-    padding: 12px 15px;
-    background: #e3f2fd;
-    border: 1px solid #1976d2;
-    border-left: 4px solid #1976d2;
+    background: white;
+    border: 1px solid #e0e0e0;
     border-radius: 4px;
+    overflow: hidden;
+}
+
+.research-header {
+    padding: 12px 16px;
+    background: #f8f8f8;
+    border-bottom: 1px solid #e0e0e0;
     display: flex;
+    justify-content: space-between;
     align-items: center;
-    gap: 12px;
+}
+
+.research-title {
     font-size: 13px;
+    font-weight: 500;
+    color: #333;
 }
 
-.status-icon {
-    font-size: 18px;
+.toggle-irrelevant-btn {
+    padding: 6px 12px;
+    background: white;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    font-size: 11px;
+    cursor: pointer;
+    transition: all 0.2s;
 }
 
-.status-message {
-    flex: 1;
-    color: #1a1a1a;
-    line-height: 1.5;
+.toggle-irrelevant-btn:hover {
+    background: #f5f5f5;
+    border-color: #999;
 }
 
-.iteration-badge {
-    background: #1976d2;
-    color: white;
-    padding: 4px 10px;
-    border-radius: 3px;
-    font-size: 10px;
+.research-body {
+    padding: 16px;
+}
+
+.research-queries-section {
+    margin-bottom: 16px;
+}
+
+.queries-title {
+    font-size: 12px;
     font-weight: 500;
-    letter-spacing: 0.5px;
+    color: #666;
+    margin-bottom: 12px;
 }
 
-.research-queries {
-    margin: 16px 0;
-    padding: 15px;
-    background: #f5f5f5;
-    border: 1px solid #ccc;
+.query-group {
+    margin-bottom: 20px;
+    border: 1px solid #e0e0e0;
     border-radius: 4px;
+    background: white;
 }
 
-.queries-label {
-    font-size: 11px;
+.query-group:last-child {
+    margin-bottom: 0;
+}
+
+.query-header {
+    padding: 10px 12px;
+    background: #f8f8f8;
+    border-bottom: 1px solid #e0e0e0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.query-text {
+    font-size: 12px;
+    color: #333;
     font-weight: 500;
+    flex: 1;
+}
+
+.query-stats {
+    font-size: 11px;
     color: #666;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    margin-bottom: 10px;
+    white-space: nowrap;
+    margin-left: 12px;
 }
 
-.queries-list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
+.query-sources {
+    padding: 8px;
 }
 
-.queries-list li {
-    padding: 8px 12px;
-    background: white;
-    border: 1px solid #ddd;
-    border-radius: 3px;
-    margin-bottom: 6px;
-    font-size: 12px;
-    color: #1a1a1a;
+.no-sources {
+    padding: 12px;
+    text-align: center;
+    color: #999;
+    font-size: 11px;
+    font-style: italic;
 }
 
-.queries-list li:last-child {
-    margin-bottom: 0;
+.research-sources-section {
+    margin-bottom: 16px;
 }
 
-.research-progress {
-    margin: 16px 0;
-    padding: 12px 15px;
-    background: #fff3e0;
-    border: 1px solid #f57c00;
-    border-left: 4px solid #f57c00;
-    border-radius: 4px;
+.research-progress-section {
+    padding-top: 12px;
+    border-top: 1px solid #f0f0f0;
 }
 
-.progress-message {
-    color: #1a1a1a;
-    font-size: 12px;
-    margin-bottom: 10px;
+.progress-bar-container {
+    display: flex;
+    align-items: center;
+    gap: 12px;
 }
 
 .progress-bar {
+    flex: 1;
     height: 6px;
-    background: #ffe0b2;
+    background: #e0e0e0;
     border-radius: 3px;
     overflow: hidden;
-    margin-bottom: 6px;
 }
 
 .progress-fill {
     height: 100%;
-    background: #f57c00;
+    background: #4caf50;
     transition: width 0.3s ease;
 }
 
-.progress-count {
+.progress-text {
     font-size: 11px;
     color: #666;
-    font-weight: 500;
+    white-space: nowrap;
 }
 
 .research-source {
-    margin: 16px 0;
-    padding: 15px;
+    margin: 6px 0;
+    border: 1px solid #e0e0e0;
+    border-radius: 3px;
     background: white;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    transition: all 0.2s;
 }
 
-.research-source:hover {
-    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-    transform: translateY(-1px);
+.research-source.irrelevant {
+    opacity: 0.6;
+    background: #fafafa;
+}
+
+.research-source.error {
+    background: #fff5f5;
+    border-color: #ffcdd2;
 }
 
 .source-header {
     display: flex;
     align-items: center;
-    gap: 10px;
-    margin-bottom: 10px;
+    gap: 8px;
+    padding: 8px 10px;
+    cursor: pointer;
+    user-select: none;
 }
 
-.source-badge {
-    background: #1b5e20;
-    color: white;
-    padding: 4px 10px;
-    border-radius: 3px;
-    font-size: 10px;
-    font-weight: 500;
-    letter-spacing: 0.5px;
-    white-space: nowrap;
+.source-header:hover {
+    background: #f8f8f8;
+}
+
+.source-status-icon {
+    font-size: 12px;
+    min-width: 16px;
+    text-align: center;
+}
+
+.research-source.relevant .source-status-icon {
+    color: #2e7d32;
+}
+
+.research-source.irrelevant .source-status-icon {
+    color: #999;
+}
+
+.research-source.error .source-status-icon {
+    color: #d32f2f;
 }
 
 .source-url {
     color: #1976d2;
     text-decoration: none;
     font-size: 12px;
-    font-weight: 500;
     flex: 1;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -970,14 +1098,53 @@ body {
     text-decoration: underline;
 }
 
+.source-toggle {
+    color: #999;
+    font-size: 10px;
+}
+
 .source-analysis {
     font-size: 12px;
     line-height: 1.6;
-    color: #1a1a1a;
-    padding: 10px 12px;
-    background: #fafafa;
-    border-radius: 3px;
-    white-space: pre-wrap;
+    color: #333;
+    padding: 0 12px 12px 12px;
+    border-top: 1px solid #e0e0e0;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+}
+
+.source-analysis ul,
+.source-analysis ol {
+    margin: 8px 0;
+    padding-left: 24px;
+    list-style-position: outside;
+}
+
+.source-analysis li {
+    margin-bottom: 4px;
+}
+
+.source-analysis h1,
+.source-analysis h2,
+.source-analysis h3 {
+    margin: 12px 0 8px 0;
+    font-weight: 500;
+}
+
+.source-analysis h1 {
+    font-size: 15px;
+}
+
+.source-analysis h2 {
+    font-size: 14px;
+}
+
+.source-analysis h3 {
+    font-size: 13px;
+}
+
+.source-analysis p {
+    margin-bottom: 8px;
 }
 
 .research-assessment {
@@ -1048,36 +1215,24 @@ body {
 }
 
 .research-report {
-    margin: 20px 0;
-    padding: 20px;
+    margin: 16px 0;
     background: white;
-    border: 1px solid #1b5e20;
+    border: 1px solid #e0e0e0;
     border-radius: 4px;
+    overflow: hidden;
 }
 
 .report-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding-bottom: 15px;
-    margin-bottom: 15px;
-    border-bottom: 2px solid #1b5e20;
-}
-
-.report-title {
-    font-size: 16px;
-    font-weight: 500;
-    color: #1b5e20;
-    letter-spacing: 0.5px;
-}
-
-.report-stats {
-    font-size: 11px;
-    color: #666;
+    padding: 12px 16px;
+    background: #f8f8f8;
+    border-bottom: 1px solid #e0e0e0;
+    font-size: 13px;
     font-weight: 500;
+    color: #333;
 }
 
 .report-content {
+    padding: 16px;
     font-size: 13px;
     line-height: 1.8;
     color: #1a1a1a;
@@ -1123,7 +1278,57 @@ body {
     color: #1a1a1a;
 }
 
-.report-content code {
+.report-content a,
+.source-analysis a,
+.action-widget-result a {
+    color: #1976d2;
+    text-decoration: none;
+    border-bottom: 1px solid transparent;
+    transition: border-color 0.2s;
+}
+
+.report-content a:hover,
+.source-analysis a:hover,
+.action-widget-result a:hover {
+    border-bottom-color: #1976d2;
+}
+
+/* Markdown tables */
+.markdown-table {
+    border-collapse: collapse;
+    width: 100%;
+    margin: 12px 0;
+    font-size: 12px;
+    background: white;
+    border: 1px solid #e0e0e0;
+}
+
+.markdown-table th {
+    background: #f8f8f8;
+    padding: 8px 12px;
+    text-align: left;
+    font-weight: 500;
+    color: #333;
+    border-bottom: 2px solid #e0e0e0;
+}
+
+.markdown-table td {
+    padding: 8px 12px;
+    border-bottom: 1px solid #f0f0f0;
+    color: #333;
+}
+
+.markdown-table tr:last-child td {
+    border-bottom: none;
+}
+
+.markdown-table tr:hover {
+    background: #fafafa;
+}
+
+.report-content code,
+.result-preview-content code,
+.action-widget-result code {
     background: #f5f5f5;
     padding: 2px 6px;
     border-radius: 3px;