Initial commit

.gitignore

@@ -0,0 +1,167 @@
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$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
+
+# 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
+
+# pdm
+#   Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
+#pdm.lock
+#   pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it
+#   in version control.
+#   https://pdm.fming.dev/latest/usage/project/#working-with-version-control
+.pdm.toml
+.pdm-python
+.pdm-build/
+
+# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
+__pypackages__/
+
+# Celery stuff
+celerybeat-schedule
+celerybeat.pid
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.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/
+
+data
+logs
+
+.env

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 PIPS Development Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE. 

MANIFEST.in

@@ -0,0 +1,9 @@
+include README.md
+include LICENSE
+include requirements.txt
+recursive-include src/pips/templates *
+recursive-include src/pips/static *.css *.js *.json *.html
+recursive-include src/pips/static/default_sessions *.json
+global-exclude *.pyc
+global-exclude __pycache__
+global-exclude .DS_Store 

README.md

@@ -0,0 +1,326 @@
+# PIPS: Python Iterative Problem Solving
+
+**PIPS** (Python Iterative Problem Solving) is a powerful library for iterative code generation and refinement using Large Language Models (LLMs). It provides both programmatic APIs and a web interface for solving complex problems through iterative reasoning and code execution.
+
+## Features
+
+- 🤖 **Multi-LLM Support**: Works with OpenAI GPT, Anthropic Claude, and Google GenAI models
+- 🔄 **Iterative Problem Solving**: Automatically refines solutions through multiple iterations
+- 🧠 **Two Solving Modes**: Chain-of-thought reasoning and code-based problem solving
+- 🌐 **Web Interface**: Beautiful Flask-SocketIO web UI for interactive problem solving
+- 📊 **Image Support**: Process problems with both text and image inputs
+- ⚡ **Streaming Support**: Real-time token streaming for responsive user experience
+- 🛡️ **Safe Code Execution**: Sandboxed code execution with timeouts and error handling
+- 💾 **Session Management**: Persistent browser storage with import/export capabilities
+- 📁 **Curated Examples**: Automatically loads demonstration sessions on first launch
+
+## Installation
+
+### From PyPI (when available)
+```bash
+pip install pips-solver
+```
+
+### From Source
+```bash
+git clone <repository-url>
+cd pips
+pip install -e .
+```
+
+### With Optional Dependencies
+```bash
+# For web interface
+pip install pips-solver[web]
+
+# For development
+pip install pips-solver[dev]
+
+# All optional dependencies
+pip install pips-solver[all]
+```
+
+## Quick Start
+
+### 1. Command Line Interface
+
+Start the web interface:
+```bash
+pips
+# or
+python -m pips
+
+# Custom host and port
+pips --host 127.0.0.1 --port 5000 --debug
+```
+
+### 2. Programmatic Usage
+
+```python
+from pips import PIPSSolver, get_model
+from pips.utils import RawInput
+
+# Initialize a model
+model = get_model("gpt-4o", api_key="your-openai-api-key")
+
+# Create solver
+solver = PIPSSolver(
+    model=model,
+    max_iterations=8,
+    temperature=0.0
+)
+
+# Solve a problem
+problem = RawInput(
+    text_input="What is the sum of the first 10 prime numbers?",
+    image_input=None
+)
+
+# Chain of thought solving
+answer, logs = solver.solve_chain_of_thought(problem)
+print(f"Answer: {answer}")
+
+# Code-based solving
+answer, logs = solver.solve_with_code(problem)
+print(f"Answer: {answer}")
+```
+
+### 3. Streaming Usage
+
+```python
+def on_token(token, iteration, model_name):
+    print(f"Token: {token}", end="", flush=True)
+
+def on_step(step, message, **kwargs):
+    print(f"Step {step}: {message}")
+
+callbacks = {
+    "on_llm_streaming_token": on_token,
+    "on_step_update": on_step
+}
+
+# Solve with streaming
+answer, logs = solver.solve_with_code(
+    problem, 
+    stream=True, 
+    callbacks=callbacks
+)
+```
+
+## Supported Models
+
+### OpenAI Models
+- GPT-4o, GPT-4o-mini
+- GPT-4, GPT-4-turbo
+- GPT-3.5-turbo
+- O1-preview, O1-mini
+- O3-mini (when available)
+
+### Anthropic Models
+- Claude-3.5-sonnet
+- Claude-3-opus, Claude-3-sonnet, Claude-3-haiku
+- Claude-2.1, Claude-2.0
+
+### Google Models
+- Gemini-2.0-flash-exp
+- Gemini-1.5-pro, Gemini-1.5-flash
+- Gemini-1.0-pro
+
+## API Reference
+
+### PIPSSolver
+
+The main solver class for iterative problem solving.
+
+```python
+PIPSSolver(
+    model: LLMModel,
+    max_iterations: int = 8,
+    temperature: float = 0.0,
+    max_tokens: int = 4096,
+    top_p: float = 1.0
+)
+```
+
+#### Methods
+
+- `solve_chain_of_thought(sample, stream=False, callbacks=None)`: Solve using chain-of-thought reasoning
+- `solve_with_code(sample, stream=False, callbacks=None)`: Solve using iterative code generation
+
+### Model Factory
+
+```python
+from pips import get_model
+
+# Get a model instance
+model = get_model(model_name, api_key=None)
+```
+
+### Utilities
+
+```python
+from pips.utils import RawInput, img2base64, base642img
+
+# Create input with text and optional image
+input_data = RawInput(
+    text_input="Your question here",
+    image_input=PIL.Image.open("image.jpg")  # Optional
+)
+```
+
+## Configuration
+
+### Environment Variables
+
+Set your API keys as environment variables:
+
+```bash
+export OPENAI_API_KEY="your-openai-key"
+export ANTHROPIC_API_KEY="your-anthropic-key"  
+export GOOGLE_API_KEY="your-google-key"
+```
+
+### Web Interface Settings
+
+The web interface allows you to configure:
+- Model selection
+- API keys
+- Solving mode (chain-of-thought vs code)
+- Temperature, max tokens, iterations
+- Code execution timeout
+
+## Examples
+
+### Mathematical Problem
+```python
+problem = RawInput(
+    text_input="Find the derivative of f(x) = x^3 + 2x^2 - 5x + 1",
+    image_input=None
+)
+answer, logs = solver.solve_with_code(problem)
+```
+
+### Image-Based Problem
+```python
+from PIL import Image
+
+image = Image.open("chart.png")
+problem = RawInput(
+    text_input="What is the trend shown in this chart?",
+    image_input=image
+)
+answer, logs = solver.solve_chain_of_thought(problem)
+```
+
+### Multi-Step Reasoning
+```python
+problem = RawInput(
+    text_input="""
+    A company has 3 departments with 10, 15, and 20 employees respectively.
+    If they want to form a committee with 2 people from each department,
+    how many different committees are possible?
+    """,
+    image_input=None
+)
+answer, logs = solver.solve_with_code(problem)
+```
+
+## Web Interface
+
+The web interface provides:
+- **Problem Input**: Text area with optional image upload
+- **Model Selection**: Choose from available LLM providers
+- **Settings Panel**: Configure solving parameters
+- **Real-time Streaming**: Watch the AI solve problems step-by-step
+- **Chat History**: Review previous solutions
+- **Export Options**: Download chat logs and solutions
+
+## Session Management
+
+PIPS includes comprehensive session management capabilities:
+
+### Automatic Session Loading
+- **First Launch**: Automatically loads curated example sessions demonstrating PIPS capabilities
+- **Persistent Storage**: All sessions are saved in browser localStorage for persistence across visits
+- **Smart Cleanup**: Automatically removes incomplete or invalid sessions
+
+### Import/Export Sessions
+- **Bulk Export**: Export all sessions as a JSON file via the "Export" button
+- **Individual Export**: Download single sessions using the download icon next to each session
+- **Import Sessions**: Import previously exported session files via the "Import" button
+- **Duplicate Detection**: Automatically detects and handles duplicate sessions during import
+
+### Session Format
+Sessions are exported in a portable JSON format:
+```json
+{
+  "exportDate": "2024-01-15T10:00:00.000Z",
+  "sessions": {
+    "session_id": {
+      "id": "session_id",
+      "title": "Session title", 
+      "problemText": "Original problem description",
+      "image": "base64_image_data_or_null",
+      "createdAt": "2024-01-15T09:00:00.000Z",
+      "lastUsed": "2024-01-15T09:15:00.000Z", 
+      "status": "completed|interrupted|solving|active",
+      "chatHistory": [
+        {
+          "sender": "PIPS|AI Assistant|User",
+          "content": "Message content",
+          "iteration": "Iteration 1",
+          "timestamp": "2024-01-15T09:01:00.000Z"
+        }
+      ]
+    }
+  }
+}
+```
+
+### Session States
+- **Active**: New sessions where users can input problems
+- **Solving**: Sessions currently being processed by PIPS  
+- **Completed**: Successfully finished sessions (read-only)
+- **Interrupted**: Sessions stopped by user or error (read-only)
+
+## Development
+
+### Setup Development Environment
+```bash
+git clone <repository-url>
+cd pips
+pip install -e .[dev]
+```
+
+### Running Tests
+```bash
+pytest
+pytest --cov=pips  # With coverage
+```
+
+### Code Formatting
+```bash
+black pips/
+isort pips/
+flake8 pips/
+mypy pips/
+```
+
+## Contributing
+
+1. Fork the repository
+2. Create a feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+## License
+
+This project is licensed under the MIT License - see the LICENSE file for details.
+
+## Acknowledgments
+
+- OpenAI for GPT models
+- Anthropic for Claude models  
+- Google for GenAI models
+- Flask and SocketIO communities

pyproject.toml

@@ -0,0 +1,91 @@
+[build-system]
+requires = ["hatchling"]
+build-backend = "hatchling.build"
+
+[project]
+name = "pips-solver"
+version = "1.0.0"
+description = "Python Iterative Problem Solving (PIPS) - A library for iterative code generation and refinement using LLMs"
+readme = "README.md"
+license = {text = "MIT"}
+authors = [
+    {name = "PIPS Development Team", email = "contact@example.com"}
+]
+classifiers = [
+    "Development Status :: 4 - Beta",
+    "Intended Audience :: Developers",
+    "Intended Audience :: Science/Research",
+    "License :: OSI Approved :: MIT License",
+    "Operating System :: OS Independent",
+    "Programming Language :: Python :: 3",
+    "Programming Language :: Python :: 3.8",
+    "Programming Language :: Python :: 3.9",
+    "Programming Language :: Python :: 3.10",
+    "Programming Language :: Python :: 3.11",
+    "Programming Language :: Python :: 3.12",
+    "Topic :: Scientific/Engineering :: Artificial Intelligence",
+    "Topic :: Software Development :: Libraries :: Python Modules",
+]
+keywords = ["llm", "code-generation", "ai", "problem-solving", "iterative"]
+requires-python = ">=3.8"
+dependencies = [
+    "openai>=1.0.0",
+    "anthropic>=0.7.0",
+    "google-genai>=0.2.0",
+    "flask>=2.0.0",
+    "flask-socketio>=5.0.0",
+    "pillow>=8.0.0",
+    "timeout-decorator>=0.5.0",
+    "python-socketio[client]>=5.0.0",
+]
+
+[project.optional-dependencies]
+web = [
+    "flask>=2.0.0",
+    "flask-socketio>=5.0.0",
+    "python-socketio[client]>=5.0.0",
+]
+dev = [
+    "pytest>=6.0.0",
+    "pytest-cov>=2.0.0",
+    "black>=22.0.0",
+    "flake8>=4.0.0",
+    "mypy>=0.950",
+    "isort>=5.0.0",
+]
+all = [
+    "pips-solver[web,dev]"
+]
+
+[project.scripts]
+pips = "pips.__main__:main"
+
+[project.urls]
+Homepage = "https://github.com/example/pips"
+Repository = "https://github.com/example/pips"
+Issues = "https://github.com/example/pips/issues"
+Documentation = "https://github.com/example/pips#readme"
+
+[tool.hatch.build.targets.wheel]
+packages = ["src/pips"]
+
+[tool.hatch.build.targets.sdist]
+include = [
+    "/src/pips",
+    "/README.md",
+    "/LICENSE",
+]
+
+[tool.black]
+line-length = 88
+target-version = ['py38']
+
+[tool.isort]
+profile = "black"
+multi_line_output = 3
+
+[tool.mypy]
+python_version = "3.8"
+warn_return_any = true
+warn_unused_configs = true
+disallow_untyped_defs = false

requirements.txt

@@ -0,0 +1,8 @@
+openai>=1.0.0
+anthropic>=0.7.0
+google-genai>=0.2.0
+flask>=2.0.0
+flask-socketio>=5.0.0
+pillow>=8.0.0
+timeout-decorator>=0.5.0
+python-socketio[client]>=5.0.0

src/pips/__init__.py

@@ -0,0 +1,17 @@
+"""
+PIPS: Python Iterative Problem Solving
+
+A library for iterative code generation and refinement using LLMs.
+"""
+
+__version__ = "1.0.0"
+
+from .core import PIPSSolver, PIPSMode
+from .models import get_model
+from .model_registry import register_model
+
+try:
+    from .web_app import run_app
+    __all__ = ["PIPSSolver", "PIPSMode", "get_model", "register_model", "run_app"]
+except ImportError:
+    __all__ = ["PIPSSolver", "PIPSMode", "get_model", "register_model"] 

src/pips/__main__.py

@@ -0,0 +1,60 @@
+#!/usr/bin/env python3
+"""
+PIPS entry-point.
+
+Usage:
+    python -m pips                 # starts on 0.0.0.0:8080
+    python -m pips --port 5000     # custom port
+    python -m pips --host 127.0.0.1 --debug
+"""
+
+import argparse
+import sys
+
+# Import the runner we exposed in the simplified web_app.py
+from .web_app import run_app
+
+
+
+
+
+def main() -> None:
+    parser = argparse.ArgumentParser(
+        prog="pips",
+        description="PIPS – Python Iterative Problem Solving web interface",
+    )
+
+    parser.add_argument(
+        "-p", "--port",
+        type=int,
+        default=8080,
+        help="HTTP port to listen on (default 8080)",
+    )
+    parser.add_argument(
+        "--host",
+        type=str,
+        default="0.0.0.0",
+        help="Bind address (default 0.0.0.0)",
+    )
+    parser.add_argument(
+        "--debug",
+        action="store_true",
+        help="Enable Flask/SockeIO debug mode",
+    )
+
+    args = parser.parse_args()
+
+    print(f"▶️  PIPS web UI: http://{args.host}:{args.port}  (debug={args.debug})")
+
+    try:
+        run_app(host=args.host, port=args.port, debug=args.debug)
+    except KeyboardInterrupt:
+        print("\n👋  Shutting down PIPS—good-bye!")
+        sys.exit(0)
+    except Exception as exc:           # pragma: no cover
+        print(f"❌  Fatal error starting PIPS: {exc}")
+        sys.exit(1)
+
+
+if __name__ == "__main__":
+    main()

src/pips/core.py

@@ -0,0 +1,991 @@
+import ast
+import re, json
+from enum import Enum
+from typing import Any, Dict, List, Tuple, Optional, Callable
+from .utils import RawInput, img2base64, python_eval
+from .models import LLMModel, SamplingParams
+
+
+# ---------------------------------------------------------------------
+# PIPSMode enum for agent vs interactive modes
+# ---------------------------------------------------------------------
+class PIPSMode(Enum):
+    AGENT = "AGENT"
+    INTERACTIVE = "INTERACTIVE"
+
+
+# ---------------------------------------------------------------------
+# Helper-type aliases
+TokenCb = Callable[[str, int, str], None]
+CbMap    = Dict[str, Callable[..., Any]]
+# ---------------------------------------------------------------------
+
+
+class PIPSSolver:
+    """Python Iterative Problem Solving (PIPS) solver — unified streaming & non-streaming."""
+
+    def __init__(
+    self,
+    model: LLMModel,
+    *,
+    max_iterations: int = 8,
+    temperature: float = 0.0,
+    max_tokens: int = 4096,
+    top_p: float = 1.0,
+    interactive: bool = False,
+    critic_model: Optional[LLMModel] = None,
+    ):
+        """
+        Args:
+            model:        An object that implements .chat(...) and, optionally, .stream_chat(...).
+            max_iterations: Maximum refinement loops for the code-generation mode.
+            temperature:  Sampling temperature passed to the LLM.
+            max_tokens:   Max tokens for each LLM response.
+            top_p:        Nucleus-sampling parameter.
+            interactive:  Whether to use interactive mode (wait for user feedback).
+            critic_model: Optional separate model for criticism (defaults to main model).
+        """
+        self.model = model
+        self.critic_model = critic_model or model
+        self.max_iterations = max_iterations
+        self.temperature = temperature
+        self.max_tokens = max_tokens
+        self.top_p = top_p
+        self.interactive = interactive
+        self._mode_decision_summary: Optional[Dict[str, Any]] = None
+        
+        # Interactive mode state
+        self._checkpoint = None
+        self._current_conversation = None
+
+        # System prompt identical to the original implementation
+        self.system_prompt = """You will be given a question and you must answer it by extracting relevant symbols in JSON format and then writing a Python program to calculate the final answer.
+
+You MUST always plan extensively before outputting any symbols or code.
+
+You MUST iterate and keep going until the problem is solved.
+
+# Workflow
+
+## Problem Solving Steps
+1. First extract relevant information from the input as JSON. Try to represent the relevant information in as much of a structured format as possible to help with further reasoning/processing.
+2. Using the information extracted, determine a reasonable approach to solving the problem using code, such that executing the code will return the final answer.
+3. Write a Python program to calculate and return the final answer. Use comments to explain the structure of the code and do not use a main() function.
+The JSON must be enclosed in a markdown code block and the Python function must be in a separate markdown code block and be called `solve` and accept a single input called `symbols` representing the JSON information extracted. Do not include any `if __name__ == "__main__"` statement and you can assume the JSON will be loaded into the variable called `symbols` by the user.
+The Python code should not just return the answer or perform all reasoning in comments and instead leverage the code itself to perform the reasoning.
+Be careful that the code returns the answer as expected by the question, for instance, if the question is multiple choice, the code must return the choice as described in the question.
+Be sure to always output a JSON code block and a Python code block.
+Make sure to follow these formatting requirements exactly.
+"""
+
+
+    # ========= INTERNAL HELPERS =====================================
+    _MODE_SELECTION_LIST_RE = re.compile(r"\[([0-9eE+.\s,-]+)\]")
+
+    def _parse_probability_scores(self, raw: str) -> Optional[List[float]]:
+        """Extract a list of 10 probability scores from raw LLM output."""
+        if not raw:
+            return None
+
+        candidates: List[Any] = []
+
+        try:
+            parsed = ast.literal_eval(raw.strip())
+            candidates.append(parsed)
+        except Exception:
+            pass
+
+        for match in self._MODE_SELECTION_LIST_RE.finditer(raw):
+            candidate_str = f"[{match.group(1)}]"
+            try:
+                candidates.append(ast.literal_eval(candidate_str))
+            except Exception:
+                continue
+
+        for candidate in candidates:
+            if (
+                isinstance(candidate, list)
+                and len(candidate) == 10
+                and all(isinstance(x, (int, float)) for x in candidate)
+            ):
+                floats = [float(x) for x in candidate]
+                if all(0.0 <= x <= 1.0 for x in floats):
+                    return floats
+        return None
+
+    def _build_mode_selection_prompt(self, sample: RawInput) -> List[dict[str, Any]]:
+        """Create the conversation for deciding between code and chain-of-thought."""
+        from .prompts import CHOOSE_CONSERVATIVE_COT_VS_CODE_PROMPT
+
+        instructions = CHOOSE_CONSERVATIVE_COT_VS_CODE_PROMPT.strip()
+        extra_instruction = (
+            "\nAt the end of your response, output only the list of 10 probabilities inside square brackets "
+            "after the text 'FINAL ANSWER:'."
+        )
+
+        content: List[dict[str, Any]] = [{"type": "text", "text": f"{instructions}{extra_instruction}"}]
+
+        if sample.image_input is not None:
+            content.append(
+                {
+                    "type": "image_url",
+                    "image_url": {
+                        "url": f"data:image/jpeg;base64,{img2base64(sample.image_input)}",
+                        "detail": "high",
+                    },
+                }
+            )
+        if sample.text_input is not None:
+            content.append({"type": "text", "text": f"TARGET QUESTION:\n{sample.text_input}"})
+
+        return [{"role": "user", "content": content}]
+
+    def _summarise_messages_for_log(self, messages: List[dict[str, Any]]) -> List[dict[str, Any]]:
+        """Return a copy of the conversation with image payloads redacted for logging."""
+        summary: List[dict[str, Any]] = []
+        for message in messages:
+            content = message.get("content")
+            if isinstance(content, list):
+                new_content: List[dict[str, Any]] = []
+                for item in content:
+                    if isinstance(item, dict) and item.get("type") == "image_url":
+                        new_content.append({"type": "text", "text": "[image content omitted]"})
+                    else:
+                        new_content.append(item)
+                summary.append({**message, "content": new_content})
+            else:
+                summary.append(dict(message))
+        return summary
+
+    def _decide_solving_mode(
+        self,
+        messages: List[dict[str, Any]],
+        *,
+        max_tokens: int,
+    ) -> Dict[str, Any]:
+        """Run the self-reflection prompt to choose between code and chain-of-thought."""
+        sampling_params = SamplingParams(temperature=0.0, max_tokens=max_tokens, top_p=1.0)
+
+        try:
+            response = self.model.chat(messages, sampling_params=sampling_params, use_tqdm=False)
+        except Exception as exc:
+            print(f"[DEBUG] Mode selection prompt raised exception: {exc}. Falling back to chain-of-thought.")
+            return {
+                "use_code": False,
+                "scores": None,
+                "average": None,
+                "raw_response": "",
+                "error": str(exc),
+            }
+
+        raw_text = ""
+        if response and getattr(response[0], "outputs", None):
+            raw_text = response[0].outputs[0].text or ""
+
+        scores = self._parse_probability_scores(raw_text)
+        if scores is None:
+            print("[DEBUG] Mode selection prompt failed to yield valid probability list; defaulting to chain-of-thought.")
+            return {
+                "use_code": False,
+                "scores": None,
+                "average": None,
+                "raw_response": raw_text,
+                "error": None,
+            }
+
+        average = sum(scores) / len(scores)
+        use_code = average > 0.5
+
+        return {
+            "use_code": use_code,
+            "scores": scores,
+            "average": average,
+            "raw_response": raw_text,
+            "error": None,
+        }
+
+    def _chat(
+        self,
+        conversation: List[Dict[str, Any]],
+        sampling_params: SamplingParams,
+        stream: bool,
+        iteration: int,
+        callbacks: Optional[CbMap] = None,
+    ) -> str:
+        """
+        Wrapper around model.chat / model.stream_chat that:
+        • chooses the right API based on `stream`
+        • fires streaming callbacks if supplied
+        • returns the full assistant text
+        """
+        callbacks = callbacks or {}
+
+        # Dummy lambdas so we can call without branch checks later
+        on_start   = callbacks.get("on_llm_streaming_start", lambda *a, **k: None)
+        on_token   = callbacks.get("on_llm_streaming_token",  lambda *a, **k: None)
+        on_end     = callbacks.get("on_llm_streaming_end",    lambda *a, **k: None)
+        interrupted = callbacks.get("check_interrupted",      lambda: False)
+
+        model_name = self.model.__class__.__name__
+
+        if not stream:
+            # plain synchronous call
+            resp = self.model.chat(conversation, sampling_params=sampling_params, use_tqdm=False)
+            return resp[0].outputs[0].text
+
+        # ---- streaming path ----
+        on_start(iteration, model_name)
+
+        def _emit(tok: str):
+            if not interrupted():
+                on_token(tok, iteration, model_name)
+
+        if hasattr(self.model, "stream_chat"):
+            resp = self.model.stream_chat(
+                conversation,
+                sampling_params=sampling_params,
+                emit_callback=_emit,
+                interrupted_callback=interrupted,
+            )
+        else:  # fallback
+            resp = self.model.chat(conversation, sampling_params=sampling_params, use_tqdm=False)
+
+        on_end(iteration, model_name)
+        return resp[0].outputs[0].text
+
+    # ---------------------------------------------------------------
+
+    def solve(
+        self,
+        sample: RawInput,
+        *,
+        stream: bool = False,
+        callbacks: Optional[CbMap] = None,
+        additional_rules: str = "",
+        decision_max_tokens: int = 1024,
+        interactive_requested: bool = False,
+    ) -> Tuple[str, Dict[str, Any], Dict[str, Any]]:
+        """Automatically choose between chain-of-thought and code-based solving."""
+        callbacks = callbacks or {}
+        step = callbacks.get("on_step_update", lambda *a, **k: None)
+
+        decision_messages = self._build_mode_selection_prompt(sample)
+        decision_prompt_details = {
+            "description": "Choosing between chain-of-thought and iterative coding",
+            "conversation": self._summarise_messages_for_log(decision_messages),
+        }
+
+        step(
+            "mode_selection",
+            "Choosing between chain-of-thought reasoning and iterative coding…",
+            prompt_details=decision_prompt_details,
+        )
+
+        decision = self._decide_solving_mode(decision_messages, max_tokens=decision_max_tokens)
+        use_code = decision.get("use_code", False)
+        average = decision.get("average")
+        scores = decision.get("scores")
+        decision_error = decision.get("error")
+
+        if scores is None:
+            decision_message = "Could not parse confidence scores; defaulting to chain-of-thought reasoning."
+        else:
+            decision_message = (
+                f"Average code suitability score: {average:.2f}. "
+                f"Proceeding with {'iterative code generation' if use_code else 'chain-of-thought reasoning'}."
+            )
+
+        step(
+            "mode_selection",
+            decision_message,
+            prompt_details={**decision_prompt_details, "raw_response": decision.get("raw_response", ""), "error": decision_error},
+        )
+
+        if interactive_requested and not use_code:
+            step(
+                "mode_selection",
+                "Interactive mode requested, but chain-of-thought was selected; running without interactive checkpoints.",
+                prompt_details=None,
+            )
+
+        mode_decision_summary = {
+            "use_code": use_code,
+            "scores": scores,
+            "average_score": average,
+            "raw_response": decision.get("raw_response", ""),
+            "prompt": decision_prompt_details["conversation"],
+            "error": decision_error,
+        }
+        self._mode_decision_summary = mode_decision_summary
+
+        original_interactive = self.interactive
+        if not use_code:
+            self.interactive = False
+
+        try:
+            if use_code:
+                answer, logs = self.solve_with_code(
+                    sample,
+                    stream=stream,
+                    callbacks=callbacks,
+                    additional_rules=additional_rules,
+                )
+            else:
+                answer, logs = self.solve_chain_of_thought(
+                    sample,
+                    stream=stream,
+                    callbacks=callbacks,
+                    additional_rules=additional_rules,
+                )
+        finally:
+            self.interactive = original_interactive
+
+        if isinstance(logs, dict):
+            logs.setdefault("mode_decision", mode_decision_summary)
+
+        return answer, logs, mode_decision_summary
+
+    def _extract_components(self, output: str) -> Tuple[Any, str, str]:
+        """(unchanged helper) extract JSON, code, and reasoning."""
+        json_obj, code_str, reasoning = "", "", ""
+        try:
+            if m := re.findall(r"```json(.*?)```", output, re.DOTALL):
+                json_obj = json.loads(m[-1])
+        except Exception:
+            pass
+        try:
+            j_end = output.index("```", output.index("```json") + 7) + 3
+            p_start = output.index("```python", j_end)
+            reasoning = output[j_end:p_start].strip()
+        except Exception:
+            pass
+        try:
+            if m := re.findall(r"```python(.*?)```", output, re.DOTALL):
+                code_str = m[-1]
+        except Exception:
+            pass
+        return json_obj, code_str, reasoning
+
+    # ========= PUBLIC SOLVERS ======================================
+
+    def solve_chain_of_thought(
+        self,
+        sample: RawInput,
+        *,
+        stream: bool = False,
+        callbacks: Optional[CbMap] = None,
+        additional_rules: str = "",
+    ) -> Tuple[str, Dict[str, Any]]:
+        """
+        One implementation covers both streaming & non-streaming.
+        If `stream=True`, supply the standard streaming callbacks.
+        """
+        callbacks = callbacks or {}
+        step = callbacks.get("on_step_update", lambda *a, **k: None)
+        logs: Dict[str, Any] = {}
+
+        # Build prompt with additional rules if provided
+        system_content = ""
+        if additional_rules.strip():
+            system_content = f"Additional Requirements:\n{additional_rules.strip()}\n\nMake sure to follow these additional requirements when answering."
+            print(f"[DEBUG] Added custom rules to chain of thought prompt: {repr(additional_rules)}")
+        
+        if sample.image_input is not None:
+            img_b64 = img2base64(sample.image_input)
+            user_content = [
+                {"type": "image_url", "image_url": {"url": f"data:image/jpeg;base64,{img_b64}"}},
+                {"type": "text", "text": f"Question: {sample.text_input}"},
+                {"type": "text", "text": "Answer step-by-step and finish with 'FINAL ANSWER:'"},
+            ]
+        else:
+            user_content = f"Question: {sample.text_input}\nAnswer step-by-step and finish with 'FINAL ANSWER:'."
+
+        prompt = []
+        if system_content:
+            prompt.append({"role": "system", "content": system_content})
+        prompt.append({"role": "user", "content": user_content})
+        params = SamplingParams(self.temperature, self.max_tokens, self.top_p)
+
+        # Create prompt details for chain of thought
+        cot_prompt_details = {
+            "description": "Chain of thought reasoning",
+            "conversation": prompt
+        }
+
+        step("reasoning", "Thinking step-by-step...", prompt_details=cot_prompt_details)
+
+        # Call LLM through unified wrapper
+        output = self._chat(prompt, params, stream, iteration=0, callbacks=callbacks)
+        logs["output"] = output
+
+        # Parse FINAL ANSWER (same logic)
+        ans = ""
+        try:
+            ans = re.findall(r"FINAL ANSWER:(.*)", output, re.DOTALL)[-1].strip()
+        except Exception:
+            pass
+
+        # Check if we were interrupted during processing
+        interrupted = callbacks.get("check_interrupted", lambda: False)
+        if interrupted():
+            step("interrupted", "PIPS was interrupted by the user.", prompt_details=None)
+        else:
+            step("finished", "Chain of thought completed!", prompt_details=None)
+            
+        final = f"FINAL ANSWER: {ans}" if ans else output
+        logs["final_answer"] = ans
+        return final, logs
+
+    # ---------------------------------------------------------------
+
+    def solve_with_code(
+        self,
+        sample: RawInput,
+        *,
+        stream: bool = False,
+        callbacks: Optional[CbMap] = None,
+        additional_rules: str = "",
+    ) -> Tuple[str, Dict[str, Any]]:
+        """
+        Iterative code-generation solver (streaming or not).
+        `callbacks` is optional; provide it only when you care about
+        fine-grained streaming events.
+        Args:
+            sample: The raw input containing text and/or image.
+            stream: Whether to stream tokens from the underlying LLM.
+            callbacks: Optional callback map for streaming & execution events.
+            additional_rules: Extra natural-language rules that will be forwarded to the internal code critic for more specialized checking.
+        """
+        callbacks = callbacks or {}
+        interrupted = callbacks.get("check_interrupted", lambda: False)
+        step = callbacks.get("on_step_update", lambda *a, **k: None)
+
+        logs = {"all_outputs": [], "all_symbols": [], "all_programs": [], "all_reasoning": []}
+
+        # Abort early?
+        if interrupted():
+            return "", logs
+
+        # ---- Build initial prompt with custom rules ----
+        # Create system prompt with additional rules if provided
+        system_content = self.system_prompt
+        if additional_rules.strip():
+            system_content += f"\n\nAdditional Requirements: \n{additional_rules.strip()}\n\n Make sure to follow these additional requirements when generating your solution."
+            print(f"[DEBUG] Added custom rules to initial code generation prompt: {repr(additional_rules)}")
+        
+        if sample.image_input is not None:
+            img_b64 = img2base64(sample.image_input)
+            content = [
+                {"type": "image_url", "image_url": {"url": f"data:image/jpeg;base64,{img_b64}"}},
+                {"type": "text", "text": sample.text_input},
+            ]
+        else:
+            content = sample.text_input
+
+        conv = [
+            {"role": "system", "content": system_content},
+            {"role": "user",   "content": content},
+        ]
+        params = SamplingParams(self.temperature, self.max_tokens, self.top_p)
+
+        # Create prompt details for initial generation
+        initial_prompt_details = {
+            "description": "Initial solution generation",
+            "conversation": conv
+        }
+
+        step("initial_generation", "Generating first solution…", prompt_details=initial_prompt_details)
+        raw = self._chat(conv, params, stream, iteration=0, callbacks=callbacks)
+        logs["all_outputs"].append(raw)
+        conv.append({"role": "assistant", "content": raw})
+
+        # Extract JSON / code / reasoning
+        current_symbols, current_code, reasoning = self._extract_components(raw)
+        logs["all_symbols"].append(current_symbols)
+        logs["all_programs"].append(current_code)
+        if reasoning:
+            logs["all_reasoning"].append(reasoning)
+
+        # -------- execute & refine up to max_iterations --------
+        exec_out, stdout, err = self._run_code(current_symbols, current_code, 0, callbacks, logs)
+        for i in range(1, self.max_iterations + 1):
+            if interrupted():
+                break
+
+            # --- evaluate code quality with prompt details ---
+            feedback = self._critic(
+                question=sample.text_input,
+                code=current_code,
+                symbols=current_symbols,
+                out=exec_out,
+                stdout=stdout,
+                err=err,
+                params=params,
+                additional_rules=additional_rules,
+                stream=stream,
+                iteration=i,
+                callbacks=callbacks,
+            )
+            # Note: feedback is now displayed via streaming, no need for legacy callback
+
+            # Interactive mode: wait for user feedback if enabled
+            if self.interactive:
+                print(f"[DEBUG] Interactive mode triggered at iteration {i}")
+                # Emit waiting for user feedback event
+                on_waiting_for_user = callbacks.get("on_waiting_for_user", lambda *a, **k: None)
+                on_waiting_for_user(i, feedback, current_code, current_symbols)
+                print(f"[DEBUG] Emitted awaiting_user_feedback event")
+                
+                # Store checkpoint for later continuation
+                self._checkpoint = {
+                    "sample": sample,
+                    "logs": logs,
+                    "conv": conv,
+                    "symbols": current_symbols,
+                    "code": current_code,
+                    "exec_out": exec_out,
+                    "stdout": stdout,
+                    "err": err,
+                    "feedback": feedback,
+                    "iteration": i,
+                    "params": params,
+                    "additional_rules": additional_rules,
+                    "stream": stream,
+                    "callbacks": callbacks
+                }
+                
+                # Return control to web_app - it will call continue_from_checkpoint
+                return "", logs
+
+            # ask model to improve
+            fix_prompt = self._fix_prompt(sample.text_input, current_code, current_symbols, exec_out, stdout, err, feedback)
+            conv.append({"role": "user", "content": fix_prompt})
+
+            # Create prompt details for refinement
+            refinement_prompt_details = {
+                "description": f"Solution refinement (iteration {i})",
+                "conversation": conv
+            }
+
+            step("refinement", f"Refining solution (iteration {i})...", iteration=i, prompt_details=refinement_prompt_details)
+            raw = self._chat(conv, params, stream, iteration=i, callbacks=callbacks)
+            logs["all_outputs"].append(raw)
+            conv.append({"role": "assistant", "content": raw})
+
+            if "FINISHED" in raw:
+                break
+
+            # update code / symbols
+            new_symbols, new_code, reasoning = self._extract_components(raw)
+            if new_symbols:
+                current_symbols = new_symbols
+                logs["all_symbols"].append(new_symbols)
+            if new_code:
+                current_code = new_code
+                logs["all_programs"].append(new_code)
+            if reasoning:
+                logs["all_reasoning"].append(reasoning)
+
+            exec_out, stdout, err = self._run_code(current_symbols, current_code, i, callbacks, logs)
+
+        # Check if we were interrupted during processing
+        if interrupted():
+            step("interrupted", "PIPS was interrupted by the user.", prompt_details=None)
+        else:
+            step("finished", "Solution completed successfully!", prompt_details=None)
+            
+        final = f"FINAL ANSWER: {exec_out}"
+        return final, logs
+
+    # ========= INTERACTIVE MODE HELPERS ============================
+    
+    def continue_from_checkpoint(self, user_feedback: Dict[str, Any]) -> Tuple[str, Dict[str, Any]]:
+        """
+        Continue solving from a saved checkpoint with user feedback.
+        
+        Args:
+            user_feedback: Dictionary containing user feedback with keys:
+                - accept_critic: bool - whether to accept critic's feedback
+                - extra_comments: str - additional user comments
+                - quoted_ranges: list - specific code snippets user highlighted
+                - terminate: bool - whether user wants to terminate
+        
+        Returns:
+            Final answer and logs
+        """
+        if not self._checkpoint:
+            raise ValueError("No checkpoint available - cannot continue interactive mode")
+        
+        checkpoint = self._checkpoint
+        user_feedback = user_feedback or {}
+        
+        # Check if user wants to terminate
+        if user_feedback.get("terminate", False):
+            final = f"FINAL ANSWER: {checkpoint['exec_out']}"
+            return final, checkpoint["logs"]
+        
+        # Merge critic feedback with user feedback
+        merged_feedback = self.merge_user_feedback(
+            checkpoint["feedback"], 
+            user_feedback.get("accept_critic", True),
+            user_feedback.get("quoted_ranges", [])
+        )
+        
+        # Check if user provided any feedback
+        has_user_feedback = bool(user_feedback.get("quoted_ranges", []))
+        
+        # Continue the solving process
+        current_symbols = checkpoint["symbols"]
+        current_code = checkpoint["code"]
+        exec_out = checkpoint["exec_out"]
+        stdout = checkpoint["stdout"]
+        err = checkpoint["err"]
+
+        fix_prompt = self._fix_prompt(
+            checkpoint["sample"].text_input,
+            current_code,
+            current_symbols,
+            exec_out,
+            stdout,
+            err,
+            merged_feedback,
+            has_user_feedback
+        )
+
+        checkpoint["conv"].append({"role": "user", "content": fix_prompt})
+        
+        # Create prompt details for refinement
+        refinement_prompt_details = {
+            "description": f"Solution refinement (iteration {checkpoint['iteration']})",
+            "conversation": checkpoint["conv"]
+        }
+        
+        step = checkpoint["callbacks"].get("on_step_update", lambda *a, **k: None)
+        step("refinement", f"Refining solution (iteration {checkpoint['iteration']})...", 
+             iteration=checkpoint['iteration'], prompt_details=refinement_prompt_details)
+        
+        raw = self._chat(checkpoint["conv"], checkpoint["params"], checkpoint["stream"], 
+                        iteration=checkpoint['iteration'], callbacks=checkpoint["callbacks"])
+        
+        checkpoint["logs"]["all_outputs"].append(raw)
+        checkpoint["conv"].append({"role": "assistant", "content": raw})
+        
+        if "FINISHED" in raw:
+            final = f"FINAL ANSWER: {checkpoint['exec_out']}"
+            return final, checkpoint["logs"]
+        
+        # Update code/symbols and continue
+        new_symbols, new_code, reasoning = self._extract_components(raw)
+        if new_symbols:
+            current_symbols = new_symbols
+            checkpoint["logs"]["all_symbols"].append(new_symbols)
+        if new_code:
+            current_code = new_code
+            checkpoint["logs"]["all_programs"].append(new_code)
+        if reasoning:
+            checkpoint["logs"]["all_reasoning"].append(reasoning)
+        
+        exec_out, stdout, err = self._run_code(current_symbols, current_code, checkpoint['iteration'], 
+                                              checkpoint["callbacks"], checkpoint["logs"])
+        checkpoint["symbols"] = current_symbols
+        checkpoint["code"] = current_code
+        checkpoint["exec_out"] = exec_out
+        checkpoint["stdout"] = stdout
+        checkpoint["err"] = err
+        
+        # Temporarily disable interactive mode and continue with remaining iterations
+        original_interactive = self.interactive
+        self.interactive = False
+        
+        # Continue solving from next iteration
+        remaining_iterations = self.max_iterations - checkpoint['iteration']
+        if remaining_iterations > 0:
+            # Create a new sample with current state
+            sample = checkpoint["sample"]
+            
+            # Continue refinement loop
+            for i in range(checkpoint['iteration'] + 1, self.max_iterations + 1):
+                interrupted = checkpoint["callbacks"].get("check_interrupted", lambda: False)
+                if interrupted():
+                    break
+                
+                feedback = self._critic(
+                    question=sample.text_input,
+                    code=current_code,
+                    symbols=current_symbols,
+                    out=exec_out,
+                    stdout=stdout,
+                    err=err,
+                    params=checkpoint["params"],
+                    additional_rules=checkpoint["additional_rules"],
+                    stream=checkpoint["stream"],
+                    iteration=i,
+                    callbacks=checkpoint["callbacks"],
+                )
+                
+                fix_prompt = self._fix_prompt(sample.text_input, current_code, current_symbols, exec_out, stdout, err, feedback)
+                checkpoint["conv"].append({"role": "user", "content": fix_prompt})
+                
+                refinement_prompt_details = {
+                    "description": f"Solution refinement (iteration {i})",
+                    "conversation": checkpoint["conv"]
+                }
+                
+                step("refinement", f"Refining solution (iteration {i})...", 
+                     iteration=i, prompt_details=refinement_prompt_details)
+                
+                raw = self._chat(checkpoint["conv"], checkpoint["params"], checkpoint["stream"], 
+                                iteration=i, callbacks=checkpoint["callbacks"])
+                
+                checkpoint["logs"]["all_outputs"].append(raw)
+                checkpoint["conv"].append({"role": "assistant", "content": raw})
+                
+                if "FINISHED" in raw:
+                    break
+                
+                new_symbols, new_code, reasoning = self._extract_components(raw)
+                if new_symbols:
+                    current_symbols = new_symbols
+                    checkpoint["logs"]["all_symbols"].append(new_symbols)
+                if new_code:
+                    current_code = new_code
+                    checkpoint["logs"]["all_programs"].append(new_code)
+                if reasoning:
+                    checkpoint["logs"]["all_reasoning"].append(reasoning)
+                
+                exec_out, stdout, err = self._run_code(current_symbols, current_code, i, checkpoint["callbacks"], checkpoint["logs"])
+                checkpoint["symbols"] = current_symbols
+                checkpoint["code"] = current_code
+                checkpoint["exec_out"] = exec_out
+                checkpoint["stdout"] = stdout
+                checkpoint["err"] = err
+        
+        # Restore interactive mode
+        self.interactive = original_interactive
+        
+        # Clear checkpoint
+        self._checkpoint = None
+        
+        final = f"FINAL ANSWER: {exec_out}"
+        return final, checkpoint["logs"]
+    
+    def merge_user_feedback(self, critic_feedback: str, accept_critic: bool, 
+                           quoted_ranges: List[Dict]) -> str:
+        """
+        Merge critic feedback with user feedback.
+        
+        Args:
+            critic_feedback: Original feedback from the critic
+            accept_critic: Whether to include critic's feedback
+            quoted_ranges: List of user feedback items (general comments, code feedback, symbol feedback)
+        
+        Returns:
+            Merged feedback string
+        """
+        feedback_parts = []
+        
+        if accept_critic and critic_feedback:
+            feedback_parts.append("AI Critic's feedback:")
+            feedback_parts.append(critic_feedback)
+        
+        if quoted_ranges:
+            # Separate general comments from specific code/symbol feedback
+            general_comments = []
+            specific_feedback = []
+            
+            for item in quoted_ranges:
+                if not item.get("comment"):
+                    continue
+                    
+                if item.get("type") == "general" or not item.get("text"):
+                    general_comments.append(item["comment"])
+                else:
+                    specific_feedback.append(item)
+            
+            # Add general user comments
+            if general_comments:
+                feedback_parts.append("User feedback:")
+                feedback_parts.extend(general_comments)
+            
+            # Add specific code/symbol feedback
+            if specific_feedback:
+                feedback_parts.append("Specific code feedback:")
+                for item in specific_feedback:
+                    feedback_parts.append(f"Regarding: {item['text']}")
+                    feedback_parts.append(f"Comment: {item['comment']}")
+        
+        return "\n\n".join(feedback_parts) if feedback_parts else "No specific issues identified."
+
+    # ========= SMALL UTILITY HELPERS (private) =====================
+
+    def _run_code(
+        self,
+        symbols: Any,
+        code: str,
+        iteration: int,
+        callbacks: CbMap,
+        logs: Dict[str, Any],
+    ) -> Tuple[str, str, str]:
+        """Execute candidate code, emit callbacks, store logs, return (out, stdout, err)."""
+        on_exec_start = callbacks.get("on_code_execution_start", lambda *a, **k: None)
+        on_exec_end   = callbacks.get("on_code_execution_end",   lambda *a, **k: None)
+        on_exec       = callbacks.get("on_code_execution",       lambda *a, **k: None)
+        max_time      = callbacks.get("get_max_execution_time",  lambda: 10)()
+
+        on_exec_start(iteration)
+        try:
+            out, std, err = python_eval(
+                f"{code}\nsymbols = {str(symbols)}\nanswer = solve(symbols)",
+                max_execution_time=max_time,
+            )
+        except Exception as e:
+            out, std, err = "None", "", str(e)
+
+        on_exec_end(iteration)
+        on_exec(iteration, str(out), std, err)
+        logs.setdefault("execution_results", []).append({"output": out, "stdout": std, "error": err})
+        return str(out), std, err
+
+    # ---------------------------------------------------------------
+
+    def _critic(
+        self,
+        question: str,
+        code: str,
+        symbols: Any,
+        out: str,
+        stdout: str,
+        err: str,
+        params: SamplingParams,
+        additional_rules: str = "",
+        stream: bool = False,
+        iteration: int = 1,
+        callbacks: Optional[CbMap] = None,
+    ) -> str:
+        """Ask the model to critique the code once per iteration."""
+        system_content = f"""You will be given a question and a code solution and you must judge the quality of the code for solving the problem.
+                           
+Look for any of the following issues in the code:
+- The code should be input dependent, meaning it should use the input symbols to compute the answer. It is OK for the code to be specialized to the input (i.e. the reasoning itself may be hardcoded, like a decision tree where the branches are hardcoded).
+- The code should not return None unless "None" is the correct answer.
+- The code should return the answer, not just print it. If the question asks for a multiple choice answer, the code should return the choice as described in the question.
+- There should not be any example usage of the code.
+- If there is a simpler way to solve the problem, please describe it.
+- If there are any clear bugs in the code which impact the correctness of the answer, please describe them.
+- If there are any issues with the extracted symbols, please describe them as well, but separate these issues from the issues with the code.
+- If it is possible to sanity check the output of the code, please do so and describe if there are any obvious issues with the output and how the code could be fixed to avoid these issues.
+
+{"Additional issues and specifications to looks for: " if additional_rules else ""}
+{additional_rules}
+
+After analyzing the code in depth, output a concrete and concise summary of the issues that are present, do not include any code examples. Please order the issues by impact on answer correctness."""
+        
+        user_content = f"""Question: {question}
+
+The following are extracted symbols from the question in JSON format followed by a Python program which takes the JSON as an argument called `symbols` and computes the answer.
+```json
+{json.dumps(symbols, indent=2)}
+```
+
+```python
+{code}
+```
+
+Code execution result:
+```
+Return value: {out}
+Standard output: {stdout}
+Exceptions: {err}
+```
+
+Output a concrete and concise summary of only the issues that are present, do not include any code examples.
+"""
+        
+        prompt = [
+            {"role": "system", "content": system_content},
+            {"role": "user", "content": user_content},
+        ]
+        
+        # Create prompt details for the critic
+        critic_prompt_details = {
+            "description": f"Code quality analysis and critique (iteration {iteration})",
+            "conversation": prompt
+        }
+        
+        # Emit step update with critic prompt details
+        callbacks = callbacks or {}
+        step = callbacks.get("on_step_update", lambda *a, **k: None)
+        step("code_checking", f"Running code critic (iteration {iteration})...", iteration=iteration, prompt_details=critic_prompt_details)
+        
+        if not stream:
+            # Non-streaming path (backward compatibility)
+            return self.critic_model.chat(prompt, sampling_params=params, use_tqdm=False)[0].outputs[0].text
+        
+        # Streaming path for code reviewer
+        
+        # Create specialized callbacks for code reviewer streaming
+        def _make_reviewer_callbacks():
+            on_start = callbacks.get("on_code_check_streaming_start", lambda *a, **k: None)
+            on_token = callbacks.get("on_code_check_streaming_token", lambda *a, **k: None)
+            on_end = callbacks.get("on_code_check_streaming_end", lambda *a, **k: None)
+            interrupted = callbacks.get("check_interrupted", lambda: False)
+            
+            def _emit(tok: str):
+                if not interrupted():
+                    on_token(tok, iteration, "AI Code Reviewer")
+            
+            return on_start, on_token, on_end, _emit
+        
+        on_start, on_token, on_end, _emit = _make_reviewer_callbacks()
+        
+        # Start streaming
+        model_name = "AI Code Reviewer"
+        on_start(iteration, model_name)
+        
+        # Call streaming method
+        if hasattr(self.critic_model, "stream_chat"):
+            resp = self.critic_model.stream_chat(
+                prompt,
+                sampling_params=params,
+                emit_callback=_emit,
+            )
+        else:
+            # Fallback to regular chat with simulated streaming
+            resp = self.critic_model.chat(prompt, sampling_params=params, use_tqdm=False)
+        
+        on_end(iteration, model_name)
+        return resp[0].outputs[0].text
+
+    # ---------------------------------------------------------------
+
+    def _fix_prompt(
+        self, question, code, symbols, out, stdout, err, feedback, has_user_feedback=False
+    ) -> str:
+        """Return the prompt that asks the LLM to fix problems."""
+        base_prompt = f"""Please fix the issues with the code and symbols or output "FINISHED".
+The following is the result of evaluating the above code with the extracted symbols.
+```
+Return value: {out}
+Standard output: {stdout}
+Exceptions: {err}
+```
+
+The following is the summary of issues found with the code or the extracted symbols by another model:
+```
+{feedback}
+```
+"""
+        
+        if has_user_feedback:
+            emphasis = """
+IMPORTANT: The feedback above includes specific user input that you MUST prioritize and address. Pay special attention to any user comments and requirements, as they represent critical guidance from the human user that should take precedence in your solution.
+"""
+            base_prompt += emphasis
+        
+        base_prompt += """
+If there are any issues which impact the correctness of the answer, please output code which does not have the issues. Before outputting any code, plan how the code will solve the problem and avoid the issues.
+If stuck, try outputting different code to solve the problem in a different way.
+You may also revise the extracted symbols. To do this, output the revised symbols in a JSON code block. Only include information in the JSON which is present in the original input to keep the code grounded in the specific problem. Some examples of symbol revisions are changing the names of certain symbols, providing further granularity, and adding information which was originally missed.
+If everything is correct, output the word "FINISHED" and nothing else.
+"""
+        return base_prompt

src/pips/gradio_app.py

@@ -0,0 +1,911 @@
+"""
+Gradio interface for the PIPS solver.
+
+This module provides a lightweight alternative to the Socket.IO web
+application defined in :mod:`pips.web_app`.  It exposes a Gradio Blocks
+layout that lets users supply API keys (kept in Gradio state), paste a
+problem description, and optionally upload an image.  The back-end uses
+``PIPSSolver.solve`` so that the same automatic mode selection between
+chain-of-thought and iterative coding is applied.
+"""
+
+from __future__ import annotations
+
+import json
+from typing import Any, Dict, Iterator, Optional, Tuple
+
+import threading
+from queue import Queue, Empty
+import copy
+import os
+import tempfile
+import time
+
+SAVED_RUNS_DIR = os.path.abspath(os.path.join(os.path.dirname(__file__), "saved_examples"))
+
+try:
+    import gradio as gr
+    from gradio import update
+except ImportError as exc:  # pragma: no cover - handled at runtime
+    raise ImportError(
+        "Gradio is required to run the PIPS Gradio app. "
+        "Install it via `pip install gradio`."
+    ) from exc
+
+from .core import PIPSSolver
+from .models import AVAILABLE_MODELS, get_model
+from .utils import RawInput
+
+
+# ---------------------------------------------------------------------------
+# Helpers
+# ---------------------------------------------------------------------------
+
+def _safe(obj: Any) -> Any:
+    """Best-effort conversion of solver logs into JSON-serialisable data."""
+    if obj is None or isinstance(obj, (str, int, float, bool)):
+        return obj
+    if isinstance(obj, dict):
+        return {str(k): _safe(v) for k, v in obj.items()}
+    if isinstance(obj, (list, tuple, set)):
+        return [_safe(x) for x in obj]
+    return repr(obj)
+
+
+def _resolve_api_key(model_id: str, keys: Dict[str, str]) -> Optional[str]:
+    """Return the correct API key for a model based on its provider prefix."""
+    if any(model_id.startswith(prefix) for prefix in ("gpt", "o3", "o4")):
+        return keys.get("openai") or None
+    if "gemini" in model_id:
+        return keys.get("google") or None
+    if "claude" in model_id:
+        return keys.get("anthropic") or None
+    return None
+
+
+def _update_api_keys(openai_key: str, google_key: str, anthropic_key: str, state: Dict[str, str] | None):
+    """Update the in-memory API key state."""
+    new_state = dict(state or {})
+    if openai_key.strip():
+        new_state["openai"] = openai_key.strip()
+    if google_key.strip():
+        new_state["google"] = google_key.strip()
+    if anthropic_key.strip():
+        new_state["anthropic"] = anthropic_key.strip()
+    message = "API keys updated in local session state."
+    if not any([openai_key.strip(), google_key.strip(), anthropic_key.strip()]):
+        message = "Cleared API keys from local session state."
+        new_state = {}
+    return new_state, message
+
+
+PREPOPULATED_EXAMPLES: Dict[str, Dict[str, Any]] = {
+    "iterative_coding": {
+        "name": "Demo: Iterative Coding (Factorial)",
+        "problem": "Calculate the factorial of 6 using Python code and explain the method.",
+        "history": [
+            {
+                "role": "user",
+                "content": "Calculate the factorial of 6 using Python code and explain the method.",
+                "metadata": {"component": "user", "title": "User"},
+            },
+            {
+                "role": "assistant",
+                "content": (
+                    "```json\n{\n  \"n\": 6\n}\n```\n\n"
+                    "```python\ndef solve(symbols):\n    n = symbols['n']\n    result = 1\n    for i in range(2, n + 1):\n        result *= i\n    return result\n```"
+                ),
+                "metadata": {"component": "solver", "title": "🧠 Solver (iteration 0) · Demo Model"},
+            },
+            {
+                "role": "assistant",
+                "content": "Mode chosen: Iterative coding",
+                "metadata": {"component": "mode_result", "title": "Mode Choice"},
+            },
+            {
+                "role": "assistant",
+                "content": "**Final Answer:** 720\n\n**Method:** Iterative coding",
+                "metadata": {"component": "summary", "title": "Summary"},
+            },
+        ],
+        "symbols": {"n": 6},
+        "code": "def solve(symbols):\n    n = symbols['n']\n    result = 1\n    for i in range(2, n + 1):\n        result *= i\n    return result",
+        "status": "Demo example: iterative coding (precomputed).",
+    },
+    "chain_of_thought": {
+        "name": "Demo: Chain-of-Thought (Word Problem)",
+        "problem": "John has 3 apples and buys 4 more. He then gives 2 to a friend. How many apples does he have now?",
+        "history": [
+            {
+                "role": "user",
+                "content": "John has 3 apples and buys 4 more. He then gives 2 to a friend. How many apples does he have now?",
+                "metadata": {"component": "user", "title": "User"},
+            },
+            {
+                "role": "assistant",
+                "content": "John starts with 3 apples. After buying 4 more, he has 3 + 4 = 7 apples. Giving away 2 leaves 5 apples.",
+                "metadata": {"component": "solver", "title": "🧠 Solver (reasoning)"},
+            },
+            {
+                "role": "assistant",
+                "content": "Mode chosen: Chain-of-thought reasoning",
+                "metadata": {"component": "mode_result", "title": "Mode Choice"},
+            },
+            {
+                "role": "assistant",
+                "content": "**Final Answer:** 5\n\n**Method:** Chain-of-thought reasoning",
+                "metadata": {"component": "summary", "title": "Summary"},
+            },
+        ],
+        "symbols": None,
+        "code": "",
+        "status": "Demo example: chain-of-thought reasoning (precomputed).",
+    },
+}
+
+# Override with streamlined demo definitions
+PREPOPULATED_EXAMPLES = {
+    "iterative_coding": {
+        "name": "Demo: Iterative Coding (Factorial)",
+        "problem": "Calculate the factorial of 6 using Python code and explain the method.",
+        "history": [
+            {
+                "role": "user",
+                "content": "Calculate the factorial of 6 using Python code and explain the method.",
+                "metadata": {"component": "user", "title": "User"},
+            },
+            {
+                "role": "assistant",
+                "content": (
+                    "```json\n{\n  \"n\": 6\n}\n```\n\n"
+                    "```python\ndef solve(symbols):\n    n = symbols['n']\n    result = 1\n    for i in range(2, n + 1):\n        result *= i\n    return result\n```"
+                ),
+                "metadata": {"component": "solver", "title": "🧠 Solver (iteration 0) · Demo Model"},
+            },
+            {
+                "role": "assistant",
+                "content": "Mode chosen: Iterative coding",
+                "metadata": {"component": "mode_result", "title": "Mode Choice"},
+            },
+            {
+                "role": "assistant",
+                "content": "**Final Answer:** 720\n\n**Method:** Iterative coding",
+                "metadata": {"component": "summary", "title": "Summary"},
+            },
+        ],
+        "symbols": {"n": 6},
+        "code": "def solve(symbols):\n    n = symbols['n']\n    result = 1\n    for i in range(2, n + 1):\n        result *= i\n    return result",
+        "status": "Demo example: iterative coding (precomputed).",
+        "method": "Iterative coding",
+        "decision": {"use_code": True},
+    },
+    "chain_of_thought": {
+        "name": "Demo: Chain-of-Thought (Word Problem)",
+        "problem": "John has 3 apples and buys 4 more. He then gives 2 to a friend. How many apples does he have now?",
+        "history": [
+            {
+                "role": "user",
+                "content": "John has 3 apples and buys 4 more. He then gives 2 to a friend. How many apples does he have now?",
+                "metadata": {"component": "user", "title": "User"},
+            },
+            {
+                "role": "assistant",
+                "content": "John starts with 3 apples. After buying 4 more, he has 7 apples. Giving 2 away leaves 5 apples.",
+                "metadata": {"component": "solver", "title": "🧠 Solver (reasoning)"},
+            },
+            {
+                "role": "assistant",
+                "content": "Mode chosen: Chain-of-thought reasoning",
+                "metadata": {"component": "mode_result", "title": "Mode Choice"},
+            },
+            {
+                "role": "assistant",
+                "content": "**Final Answer:** 5\n\n**Method:** Chain-of-thought reasoning",
+                "metadata": {"component": "summary", "title": "Summary"},
+            },
+        ],
+        "symbols": None,
+        "code": "",
+        "status": "Demo example: chain-of-thought reasoning (precomputed).",
+        "method": "Chain-of-thought reasoning",
+        "decision": {"use_code": False},
+    },
+}
+
+
+def _example_choices() -> list[tuple[str, str]]:
+    choices = [(key, data["name"]) for key, data in PREPOPULATED_EXAMPLES.items()]
+    choices.insert(0, ("", "Select a demo example"))
+    return choices
+
+
+def _saved_run_choices() -> list[tuple[str, str]]:
+    """Return available saved run files as dropdown choices."""
+    choices: list[tuple[str, str]] = [("", "Select a saved run")]
+    if os.path.isdir(SAVED_RUNS_DIR):
+        for name in sorted(os.listdir(SAVED_RUNS_DIR)):
+            if name.lower().endswith(".json"):
+                path = os.path.join(SAVED_RUNS_DIR, name)
+                choices.append((name.split(".")[0], name))
+    return choices
+
+
+def _extract_problem_from_history(history: Any) -> str:
+    """Take the first user message content from a conversation history."""
+    if not isinstance(history, list):
+        return ""
+    for message in history:
+        if isinstance(message, dict) and message.get("role") == "user":
+            content = message.get("content")
+            if isinstance(content, str):
+                return content
+    return ""
+
+
+def _fill_example_problem(example_key: str):
+    example = PREPOPULATED_EXAMPLES.get(example_key)
+    if not example:
+        return update()
+    return update(value=example["problem"])
+
+
+def _preview_example(example_key: str):
+    example = PREPOPULATED_EXAMPLES.get(example_key)
+    if not example:
+        return update(), update(), update(), update(), update(value="Select a demo example to preview."), {}
+
+    history = copy.deepcopy(example["history"])
+    symbols = example.get("symbols")
+    code = example.get("code", "")
+    status = example.get("status", "Demo example")
+    method = example.get("method", "")
+    decision = example.get("decision")
+
+    symbols_update = update(value=symbols, visible=symbols is not None)
+    code_update = update(value=code, visible=bool(code))
+
+    record = {
+        "problem": example["problem"],
+        "history": history,
+        "symbols": _safe(symbols),
+        "code": code,
+        "status": status,
+        "method": method,
+        "decision": _safe(decision),
+        "steps": [],
+        "timestamp": time.time(),
+    }
+
+    status_update = update(value=status)
+
+    return history, update(value=example["problem"]), symbols_update, code_update, status_update, record
+
+
+def _load_saved_run(file_path: Optional[str]):
+    """Load a saved solver run from a JSON export."""
+    if file_path is None:
+        raise gr.Error("Select a saved run first.")
+
+    if isinstance(file_path, list):
+        if not file_path:
+            raise gr.Error("Select a saved run first.")
+        file_path = file_path[0]
+
+    if not isinstance(file_path, str):
+        raise gr.Error("Invalid saved run selection.")
+
+    file_path = file_path.strip()
+    if not file_path:
+        raise gr.Error("Select a saved run first.")
+
+    abs_path = os.path.abspath(SAVED_RUNS_DIR + "/" + file_path)
+    saved_dir = os.path.abspath(SAVED_RUNS_DIR)
+    try:
+        if os.path.commonpath([abs_path, saved_dir]) != saved_dir:
+            raise gr.Error("Saved run must be located in the saved examples directory.")
+    except ValueError as exc:  # pragma: no cover - platform dependent
+        raise gr.Error("Saved run must be located in the saved examples directory.")
+
+    if not os.path.isfile(abs_path):
+        raise gr.Error(f"Saved run not found: {abs_path}")
+
+    try:
+        with open(abs_path, "r", encoding="utf-8") as handle:
+            data = json.load(handle)
+    except FileNotFoundError as exc:
+        raise gr.Error(f"Could not read saved run: {abs_path}") from exc
+    except json.JSONDecodeError as exc:
+        raise gr.Error(f"Saved run is not valid JSON: {exc}") from exc
+    except OSError as exc:  # pragma: no cover - depends on filesystem
+        raise gr.Error(f"Failed to read saved run: {exc}") from exc
+
+    history = data.get("history")
+    if not isinstance(history, list):
+        raise gr.Error("Saved run JSON must include a `history` list.")
+
+    history_copy = copy.deepcopy(history)
+    symbols = data.get("symbols")
+    code = data.get("code", "")
+    status = data.get("status", "Loaded saved run.")
+    method = data.get("method", "")
+    decision = data.get("decision")
+    problem = _extract_problem_from_history(history_copy) or data.get("problem", "")
+    steps = data.get("steps", [])
+    timestamp = data.get("timestamp", time.time())
+
+    symbols_visible = symbols is not None
+    symbols_value = _safe(symbols) if symbols_visible else None
+    symbols_update = update(value=symbols_value, visible=symbols_visible)
+
+    code_visible = bool(code)
+    code_update = update(value=code if code_visible else "", visible=code_visible)
+
+    record = {
+        "problem": problem,
+        "history": history_copy,
+        "symbols": _safe(symbols),
+        "code": code,
+        "status": status,
+        "method": method,
+        "decision": _safe(decision),
+        "steps": _safe(steps),
+        "timestamp": timestamp,
+    }
+
+    status_update = update(value=status)
+
+    return (
+        history_copy,
+        update(value=problem),
+        symbols_update,
+        code_update,
+        status_update,
+        record,
+    )
+
+
+def _refresh_saved_runs():
+    """Refresh saved run dropdown choices."""
+    return update(choices=_saved_run_choices())
+
+
+def _download_run(run_state: Optional[Dict[str, Any]]):
+    if not run_state:
+        raise gr.Error("Run the solver or preview a demo example first.")
+
+    # fd, path = tempfile.mkstemp(prefix="pips_run_", suffix=".json")
+    # save to saved_examples
+    if not os.path.isdir(SAVED_RUNS_DIR):
+        os.makedirs(SAVED_RUNS_DIR, exist_ok=True)
+    path = os.path.join(SAVED_RUNS_DIR, f"pips_run_{int(time.time())}.json")
+    with open(path, "w", encoding="utf-8") as handle:
+        json.dump(run_state, handle, indent=2)
+    return update(value=path, visible=True)
+
+
+def _stream_solver(
+    problem_text: str,
+    image,
+    generator_model_id: str,
+    critic_model_id: str,
+    max_iterations: int,
+    temperature: float,
+    max_tokens: int,
+    max_execution_time: int,
+    api_keys_state: Dict[str, str] | None,
+    previous_state: Optional[Dict[str, Any]] = None,
+) -> Iterator[Tuple[list[Dict[str, Any]], Any, Any, Any, str, Optional[Dict[str, Any]]]]:
+    """Stream solver progress to the Gradio Chatbot."""
+    text = (problem_text or "").strip()
+    last_state = previous_state
+
+    if not text:
+        history = [
+            {
+                "role": "assistant",
+                "content": "❌ Please provide a problem statement before solving.",
+                "metadata": {"component": "status", "title": "Status"},
+            },
+        ]
+        status = "❌ Problem text missing."
+
+        yield (
+            history,
+            update(),
+            update(value=None, visible=False),
+            update(value="", visible=False),
+            status,
+            last_state,
+        )
+        return
+
+    keys = api_keys_state or {}
+    generator_api_key = _resolve_api_key(generator_model_id, keys)
+    critic_api_key = _resolve_api_key(critic_model_id, keys)
+
+    history: list[Dict[str, Any]] = [
+        {
+            "role": "user",
+            "content": text,
+            "metadata": {"component": "user", "title": "User"},
+        }
+    ]
+    symbols_output: Optional[Dict[str, Any]] = None
+    code_output = ""
+    status = "🔄 Preparing solver..."
+
+    def emit(state_override: Optional[Dict[str, Any]] = None):
+        nonlocal last_state
+        if symbols_output is not None:
+            symbols_update = update(value=symbols_output, visible=True)
+            code_visible = bool(code_output)
+            code_update = update(value=code_output if code_visible else "", visible=code_visible)
+        else:
+            symbols_update = update(value=None, visible=False)
+            code_update = update(value="", visible=False)
+
+        state_value = last_state
+        if state_override is not None:
+            last_state = state_override
+            state_value = state_override
+
+        return (
+            history,
+            update(),
+            symbols_update,
+            code_update,
+            status,
+            state_value,
+        )
+
+    yield emit()
+
+    if not generator_api_key:
+        error_msg = f"❌ Missing API key for generator model `{generator_model_id}`."
+        status = error_msg
+        symbols_output = None
+        code_output = ""
+        yield emit()
+        return
+
+    try:
+        generator_model = get_model(generator_model_id, generator_api_key)
+    except Exception as exc:  # pragma: no cover - depends on SDK
+        error_msg = f"❌ Failed to initialise generator model `{generator_model_id}`: {exc}"
+        status = error_msg
+        symbols_output = None
+        code_output = ""
+        yield emit()
+        return
+
+    critic_model = generator_model
+    if critic_model_id != generator_model_id and critic_api_key:
+        try:
+            critic_model = get_model(critic_model_id, critic_api_key)
+        except Exception as exc:  # pragma: no cover
+            error_msg = f"❌ Failed to initialise critic model `{critic_model_id}`: {exc}"
+            status = error_msg
+            symbols_output = None
+            code_output = ""
+            yield emit()
+            return
+
+    events: "Queue[Tuple[str, Any]]" = Queue()
+    active_messages: Dict[Tuple[str, int], int] = {}
+    last_status: Optional[str] = None
+    mode_selection_index: Optional[int] = None
+
+    def push(event: str, payload: Any):
+        events.put((event, payload))
+
+    steps: list[Dict[str, Any]] = []
+    current_response: str = ""
+
+    def on_step_update(step, message, iteration=None, prompt_details=None, **_):
+        steps.append(
+            {
+                "step": step,
+                "message": message,
+                "iteration": iteration,
+                "prompt_details": _safe(prompt_details),
+            }
+        )
+        push("status", {"text": message, "step": step})
+
+    def on_llm_streaming_start(iteration, model_name):
+        push("solver_start", {"iteration": iteration, "model": model_name})
+
+    def on_llm_streaming_token(token, iteration, model_name):
+        push("solver_token", {"token": token, "iteration": iteration, "model": model_name})
+
+    def on_llm_streaming_end(iteration, model_name):
+        push("status", {"text": f"Completed solver response from {model_name} (iteration {iteration}).", "step": "solver_end"})
+
+    def on_code_check_streaming_start(iteration, model_name):
+        push("critic_start", {"iteration": iteration, "model": model_name})
+
+    def on_code_check_streaming_token(token, iteration, model_name):
+        push("critic_token", {"token": token, "iteration": iteration, "model": model_name})
+
+    def on_code_check_streaming_end(iteration, model_name):
+        push("status", {"text": f"Completed critic feedback from {model_name} (iteration {iteration}).", "step": "critic_end"})
+
+    callbacks = dict(
+        on_step_update=on_step_update,
+        on_llm_streaming_start=on_llm_streaming_start,
+        on_llm_streaming_token=on_llm_streaming_token,
+        on_llm_streaming_end=on_llm_streaming_end,
+        on_code_check_streaming_start=on_code_check_streaming_start,
+        on_code_check_streaming_token=on_code_check_streaming_token,
+        on_code_check_streaming_end=on_code_check_streaming_end,
+        check_interrupted=lambda: False,
+        get_max_execution_time=lambda: max_execution_time,
+    )
+
+    solver = PIPSSolver(
+        generator_model,
+        max_iterations=max_iterations,
+        temperature=temperature,
+        max_tokens=max_tokens,
+        interactive=False,
+        critic_model=critic_model,
+    )
+
+    sample = RawInput(text_input=problem_text, image_input=image)
+
+    def worker():
+        try:
+            answer, logs, decision = solver.solve(
+                sample,
+                stream=True,
+                callbacks=callbacks,
+                additional_rules="",
+                decision_max_tokens=min(1024, max_tokens),
+                interactive_requested=False,
+            )
+            events.put(("final", (answer, logs, decision)))
+        except Exception as exc:  # pragma: no cover
+            events.put(("error", str(exc)))
+        finally:
+            events.put(("done", None))
+
+    thread = threading.Thread(target=worker, daemon=True)
+    thread.start()
+
+    try:
+        while True:
+            event, payload = events.get()
+
+            if event == "status":
+                if isinstance(payload, dict):
+                    text = payload.get("text") or ""
+                    step_name = payload.get("step")
+                else:
+                    text = str(payload)
+                    step_name = None
+
+                status = text
+
+                if step_name == "mode_selection":
+                    if text:
+                        history.append({
+                            "role": "assistant",
+                            "content": text,
+                            "metadata": {"component": "mode_selection", "title": "Mode Selection"},
+                        })
+                        mode_selection_index = len(history) - 1
+                    last_status = text
+                    yield emit()
+                else:
+                    last_status = text
+                    yield emit()
+
+            elif event == "solver_start":
+                iteration = payload.get("iteration")
+                model = payload.get("model", "Solver")
+                label = f"🧠 Solver (iteration {iteration}) · {model}"
+                history.append({
+                    "role": "assistant",
+                    "content": "",
+                    "metadata": {"component": "solver", "title": label},
+                })
+                idx = len(history) - 1
+                active_messages[("solver", iteration)] = idx
+                current_response = ""
+                yield emit()
+
+            elif event == "solver_token":
+                iteration = payload.get("iteration")
+                token = payload.get("token", "")
+                model_name = payload.get("model", "Solver")
+                idx = active_messages.get(("solver", iteration))
+                if idx is not None:
+                    entry = history[idx]
+                    entry["content"] += token
+                else:
+                    entry = {
+                        "role": "assistant",
+                        "content": token,
+                        "metadata": {"component": "solver", "title": f"🧠 Solver (iteration {iteration}) · {model_name}"},
+                    }
+                    history.append(entry)
+                    idx = len(history) - 1
+                    active_messages[("solver", iteration)] = idx
+                current_response = history[idx]["content"]
+                yield emit()
+
+            elif event == "critic_start":
+                iteration = payload.get("iteration")
+                model = payload.get("model", "Critic")
+                label = f"🧾 Critic (iteration {iteration}) · {model}"
+                history.append({
+                    "role": "assistant",
+                    "content": "",
+                    "metadata": {"component": "critic", "title": label},
+                })
+                idx = len(history) - 1
+                active_messages[("critic", iteration)] = idx
+                yield emit()
+
+            elif event == "critic_token":
+                iteration = payload.get("iteration")
+                token = payload.get("token", "")
+                model_name = payload.get("model", "Critic")
+                idx = active_messages.get(("critic", iteration))
+                if idx is not None:
+                    history[idx]["content"] += token
+                else:
+                    entry = {
+                        "role": "assistant",
+                        "content": token,
+                        "metadata": {"component": "critic", "title": f"🧾 Critic (iteration {iteration}) · {model_name}"},
+                    }
+                    history.append(entry)
+                    idx = len(history) - 1
+                    active_messages[("critic", iteration)] = idx
+                yield emit()
+
+            elif event == "error":
+                status = f"❌ Solver error: {payload}"
+                history.append({
+                    "role": "assistant",
+                    "content": status,
+                    "metadata": {"component": "error", "title": "Error"},
+                })
+                yield emit()
+
+            elif event == "final":
+                final_answer, logs, decision = payload
+
+                if not isinstance(logs, dict) or logs is None:
+                    logs = {}
+                logs.setdefault("steps", steps)
+
+                use_code = decision.get("use_code") if isinstance(decision, dict) else False
+
+                symbols_output = None
+                code_output = ""
+
+                method_label = "Iterative coding" if use_code else "Chain-of-thought reasoning"
+
+                if use_code:
+                    symbols = logs.get("all_symbols") or []
+                    programs = logs.get("all_programs") or []
+                    if symbols:
+                        symbols_output = _safe(symbols[-1])
+                    if programs:
+                        code_output = programs[-1] or ""
+                    status = "✅ Completed (iterative coding)."
+                else:
+                    symbols_output = None
+                    code_output = ""
+                    status = "✅ Completed (chain-of-thought)."
+
+                mode_choice_entry = {
+                    "role": "assistant",
+                    "content": f"Mode chosen: {method_label}",
+                    "metadata": {"component": "mode_result", "title": "Mode Choice"},
+                }
+                if mode_selection_index is not None:
+                    history.insert(mode_selection_index + 1, mode_choice_entry)
+                else:
+                    history.append(mode_choice_entry)
+
+                summary_text = final_answer or ""
+                if not summary_text:
+                    summary_text = status
+                summary_text = f"**Final Answer:** {summary_text}\n\n**Method:** {method_label}"
+                history.append({
+                    "role": "assistant",
+                    "content": summary_text,
+                    "metadata": {"component": "summary", "title": "Summary"},
+                })
+
+                run_record = {
+                    "problem": text,
+                    "history": copy.deepcopy(history),
+                    "symbols": _safe(symbols_output),
+                    "code": code_output,
+                    "status": status,
+                    "method": method_label,
+                    "decision": _safe(decision),
+                    "steps": _safe(steps),
+                    "timestamp": time.time(),
+                }
+
+                yield emit(run_record)
+
+            elif event == "done":
+                break
+
+    finally:
+        # Drain any remaining events to avoid dangling threads.
+        while True:
+            try:
+                events.get_nowait()
+            except Empty:
+                break
+
+
+# ---------------------------------------------------------------------------
+# Public interface
+# ---------------------------------------------------------------------------
+
+def build_blocks() -> gr.Blocks:
+    """Construct the Gradio Blocks layout."""
+    with gr.Blocks() as demo:
+        gr.Markdown(
+            """
+            ## PIPS
+            Automatically chooses between chain-of-thought reasoning and program synthesis for each input.
+            """
+        )
+
+        api_state = gr.State({})
+        run_state = gr.State({})
+
+        with gr.Row(equal_height=True):
+            with gr.Column(scale=5):
+                gr.Markdown("### API Keys")
+                with gr.Row():
+                    openai_key = gr.Textbox(label="OpenAI", type="password", placeholder="sk-...")
+                    google_key = gr.Textbox(label="Google", type="password", placeholder="AIza...")
+                    anthropic_key = gr.Textbox(label="Anthropic", type="password", placeholder="sk-ant-...")
+                update_message = gr.Markdown("")
+                update_btn = gr.Button("Save Keys", variant="secondary")
+                update_btn.click(
+                    fn=_update_api_keys,
+                    inputs=[openai_key, google_key, anthropic_key, api_state],
+                    outputs=[api_state, update_message],
+                    queue=False,
+                )
+
+                # gr.Markdown("### Demo Examples")
+                # example_dropdown = gr.Dropdown(
+                #     choices=_example_choices(),
+                #     value="",
+                #     label="Choose a demo example",
+                # )
+                # with gr.Row():
+                #     preview_btn = gr.Button("Preview Example", variant="secondary")
+
+                gr.Markdown("### Examples")
+                with gr.Row():
+                    saved_run_dropdown = gr.Dropdown(
+                        choices=_saved_run_choices(),
+                        value="",
+                        label="Example",
+                        interactive=True,
+                    )
+                    # refresh_saved_runs_btn = gr.Button("Refresh", variant="secondary")
+                load_btn = gr.Button("Load Example", variant="secondary")
+
+                gr.Markdown("### Problem")
+                problem = gr.Textbox(
+                    label="Problem Description",
+                    lines=10,
+                    placeholder="Describe the task you want PIPS to solve.",
+                )
+                image = gr.Image(label="Optional Image", type="pil")
+
+                gr.Markdown("### Models & Limits")
+                generator_model = gr.Dropdown(
+                    choices=list(AVAILABLE_MODELS.keys()),
+                    value=next(iter(AVAILABLE_MODELS)),
+                    label="Generator Model",
+                    interactive=True,
+                )
+                critic_model = gr.Dropdown(
+                    choices=list(AVAILABLE_MODELS.keys()),
+                    value=next(iter(AVAILABLE_MODELS)),
+                    label="Critic Model",
+                    interactive=True,
+                )
+
+                with gr.Row():
+                    max_iterations = gr.Slider(1, 15, value=8, step=1, label="Iterations")
+                    temperature = gr.Slider(0.0, 2.0, value=0.0, step=0.1, label="Temperature")
+
+                with gr.Row():
+                    max_tokens = gr.Slider(512, 8192, value=4096, step=256, label="Max Tokens")
+                    max_exec_time = gr.Slider(1, 60, value=10, step=1, label="Exec Timeout (s)")
+
+                solve_button = gr.Button("Solve", variant="primary")
+
+                status_md = gr.Markdown(value="Ready to solve.", label="Status")
+                symbols_json = gr.JSON(label="Symbols (iterative coding)", visible=False)
+                code_output = gr.Code(label="Final Program", language="python", visible=False)
+                # download_btn = gr.Button("Download Last Run", variant="secondary")
+                download_file = gr.File(label="Run Export", visible=False)
+
+            with gr.Column(scale=7):
+                chatbot = gr.Chatbot(
+                    label="Solver Log",
+                    type="messages",
+                    height=550,
+                )
+
+        solve_button.click(
+            fn=_stream_solver,
+            inputs=[
+                problem,
+                image,
+                generator_model,
+                critic_model,
+                max_iterations,
+                temperature,
+                max_tokens,
+                max_exec_time,
+                api_state,
+                run_state,
+            ],
+            outputs=[chatbot, problem, symbols_json, code_output, status_md, run_state],
+            queue=True,
+        )
+
+        # example_dropdown.change(
+        #     fn=_fill_example_problem,
+        #     inputs=[example_dropdown],
+        #     outputs=[problem],
+        # )
+
+        # preview_btn.click(
+        #     fn=_preview_example,
+        #     inputs=[example_dropdown],
+        #     outputs=[chatbot, problem, symbols_json, code_output, status_md, run_state],
+        #     queue=False,
+        # )
+
+        load_btn.click(
+            fn=_load_saved_run,
+            inputs=[saved_run_dropdown],
+            outputs=[chatbot, problem, symbols_json, code_output, status_md, run_state],
+            queue=False,
+        )
+
+        # refresh_saved_runs_btn.click(
+        #     fn=_refresh_saved_runs,
+        #     outputs=[saved_run_dropdown],
+        #     queue=False,
+        # )
+
+        # download_btn.click(
+        #     fn=_download_run,
+        #     inputs=[run_state],
+        #     outputs=[download_file],
+        #     queue=False,
+        # )
+
+    return demo
+
+
+def launch(**kwargs):  # pragma: no cover - thin wrapper
+    """Launch the Gradio interface."""
+    return build_blocks().launch(**kwargs)
+
+
+__all__ = ["build_blocks", "launch"]
+
+
+if __name__ == "__main__":  # pragma: no cover
+    launch()

src/pips/model_registry.py

@@ -0,0 +1,81 @@
+"""
+Model registry for PIPS - centralized model management.
+
+This module provides a pluggable model registry that makes it easy to add
+new models from different providers without modifying the core codebase.
+"""
+
+from typing import Dict, Any, Optional
+
+# Internal registry storage
+_registry: Dict[str, Dict[str, Any]] = {}
+
+def register_model(name: str, provider: str, display: str = "", **config):
+    """
+    Register a new model in the registry.
+    
+    Args:
+        name: Unique model identifier
+        provider: Provider name (openai, google, anthropic)
+        display: Human-readable display name
+        **config: Additional configuration parameters
+    """
+    _registry[name] = {
+        "provider": provider,
+        "display": display or name,
+        **config
+    }
+
+def list_models() -> Dict[str, Dict[str, Any]]:
+    """
+    Get all registered models.
+    
+    Returns:
+        Dictionary mapping model names to their configuration
+    """
+    return _registry.copy()
+
+def get_model_config(name: str) -> Optional[Dict[str, Any]]:
+    """
+    Get configuration for a specific model.
+    
+    Args:
+        name: Model identifier
+        
+    Returns:
+        Model configuration or None if not found
+    """
+    return _registry.get(name)
+
+def get_available_models() -> Dict[str, str]:
+    """
+    Get available models in the format expected by the UI.
+    
+    Returns:
+        Dictionary mapping model IDs to display names
+    """
+    return {name: config["display"] for name, config in _registry.items()}
+
+# Initialize with default models
+def _initialize_default_models():
+    """Initialize the registry with default models."""
+    
+    # OpenAI Models
+    register_model("gpt-4.1-2025-04-14", "openai", "OpenAI GPT-4.1")
+    register_model("gpt-4o-2024-08-06", "openai", "OpenAI GPT-4o")
+    register_model("gpt-4.1-mini-2025-04-14", "openai", "OpenAI GPT-4.1 Mini")
+    register_model("gpt-4o-mini", "openai", "OpenAI GPT-4o Mini")
+    register_model("o4-mini-2025-04-16", "openai", "OpenAI o4 Mini")
+    register_model("o3-2025-04-16", "openai", "OpenAI o3")
+    
+    # Google Models
+    register_model("gemini-2.0-flash", "google", "Google Gemini 2.0 Flash")
+    register_model("gemini-2.0-flash-codeinterpreter", "google", "Google Gemini 2.0 Flash (Code Interpreter)")
+    
+    # Anthropic Models
+    register_model("claude-sonnet-4-20250514", "anthropic", "Anthropic Claude 4 Sonnet")
+    register_model("claude-opus-4-20250514", "anthropic", "Anthropic Claude 4 Opus")
+    register_model("claude-3-5-haiku-latest", "anthropic", "Anthropic Claude 3.5 Haiku")
+
+# Initialize default models when module is imported
+_initialize_default_models() 

src/pips/models.py

@@ -0,0 +1,734 @@
+"""
+LLM model interfaces for PIPS.
+
+This module provides a unified interface for various LLM providers including
+OpenAI, Google Gemini, and Anthropic Claude models.
+"""
+
+import os
+import time
+import json
+import re
+from openai import OpenAI
+from typing import List, Dict, Any, Optional
+
+try:
+    import anthropic
+except ImportError:
+    anthropic = None
+
+try:
+    from google import genai
+    from google.genai import types
+except ImportError:
+    genai = None
+    types = None
+
+from .utils import RawInput, img2base64, base642img
+
+
+class SamplingParams:
+    """
+    Sampling parameters for LLM generation.
+    
+    Args:
+        temperature (float): Sampling temperature (0.0 to 2.0)
+        max_tokens (int): Maximum number of tokens to generate
+        top_p (float): Nucleus sampling parameter
+        n (int): Number of completions to generate
+        stop (list): List of stop sequences
+    """
+    def __init__(self, temperature=0.0, max_tokens=4096, top_p=0.9, n=1, stop=None):
+        self.temperature = temperature
+        self.max_tokens = max_tokens
+        self.top_p = top_p
+        self.n = n
+        self.stop = stop
+
+
+class LLMModel:
+    """
+    Base class for LLM models.
+    
+    Provides a common interface for all LLM providers with lazy initialization
+    and both regular and streaming chat capabilities.
+    """
+    
+    def __init__(self, model_name: str):
+        self.model_name = model_name
+        self._client = None
+        self._initialized = False
+    
+    def _ensure_initialized(self):
+        """Ensure the model client is initialized before use."""
+        if not self._initialized:
+            self._initialize_client()
+            self._initialized = True
+    
+    def _initialize_client(self):
+        """Initialize the client - to be implemented by subclasses."""
+        raise NotImplementedError
+    
+    def chat(self, prompt: List[Dict], sampling_params: SamplingParams, use_tqdm=False):
+        """
+        Generate response using the model.
+        
+        Args:
+            prompt: List of message dictionaries in OpenAI format
+            sampling_params: Sampling configuration
+            use_tqdm: Whether to show progress bar (unused in base implementation)
+            
+        Returns:
+            List containing Outputs object with generated text
+        """
+        self._ensure_initialized()
+        return self._chat_impl(prompt, sampling_params, use_tqdm)
+    
+    def _chat_impl(self, prompt: List[Dict], sampling_params: SamplingParams, use_tqdm=False):
+        """Actual chat implementation - to be implemented by subclasses."""
+        raise NotImplementedError
+    
+    def stream_chat(self, prompt: List[Dict], sampling_params: SamplingParams, emit_callback=None, interrupted_callback=None):
+        """
+        Stream response using the model with callback for each token.
+        
+        Default implementation falls back to regular chat with simulated streaming.
+        
+        Args:
+            prompt: List of message dictionaries in OpenAI format
+            sampling_params: Sampling configuration
+            emit_callback: Function to call for each generated token
+            interrupted_callback: Function to check if streaming should be interrupted
+            
+        Returns:
+            List containing Outputs object with generated text
+        """
+        # Get the full response
+        result = self.chat(prompt, sampling_params, use_tqdm=False)
+        full_response = result[0].outputs[0].text
+        
+        # Simulate streaming by emitting tokens immediately
+        if emit_callback and full_response:
+            # Split response into reasonable chunks (words/punctuation)
+            words = re.findall(r'\S+|\s+', full_response)
+            for word in words:
+                # Check for interruption before emitting each word
+                if interrupted_callback and interrupted_callback():
+                    break
+                if emit_callback:
+                    emit_callback(word)
+        
+        return result
+
+
+class OpenAIModel(LLMModel):
+    """
+    OpenAI GPT model interface.
+    
+    Supports GPT-4, GPT-4o, o3, and o4 model families with proper handling
+    of different model requirements (reasoning effort for o3/o4 models).
+    """
+    
+    def __init__(self, model_name: str, api_key: Optional[str] = None):
+        super().__init__(model_name)
+        self.api_key = api_key or os.getenv("OPENAI_API_KEY")
+        if not self.api_key:
+            raise ValueError("OpenAI API key not provided and OPENAI_API_KEY environment variable not set")
+    
+    def _initialize_client(self):
+        """Initialize OpenAI client with appropriate settings."""
+        self._client = OpenAI(
+            api_key=self.api_key,
+            timeout=900000000,
+            max_retries=3,
+        )
+    
+    def _create_completion_with_retry(self, model, messages, max_attempts=5, delay_seconds=2, **kwargs):
+        """
+        Call chat.completions.create with retry logic.
+        
+        Args:
+            model: Model name to use
+            messages: List of message dictionaries
+            max_attempts: Maximum number of retry attempts
+            delay_seconds: Delay between retries
+            **kwargs: Additional arguments for the API call
+            
+        Returns:
+            OpenAI ChatCompletion response
+            
+        Raises:
+            Exception: If all retry attempts fail
+        """
+        if not self._client:
+            raise RuntimeError("Client not initialized")
+            
+        last_exception = None
+        for attempt in range(max_attempts):
+            try:
+                response = self._client.chat.completions.create(
+                    model=model,
+                    messages=messages,
+                    **kwargs
+                )
+                return response
+            except Exception as e:
+                last_exception = e
+                if attempt < max_attempts - 1:
+                    time.sleep(delay_seconds)
+                else:
+                    raise last_exception
+        
+        if last_exception:
+            raise last_exception
+        return None
+    
+    def _chat_impl(self, prompt: List[Dict], sampling_params: SamplingParams, use_tqdm=False):
+        """Implementation of chat for OpenAI models."""
+        extra_args = {}
+        
+        # Configure parameters based on model type
+        if "o3" in self.model_name or "o4" in self.model_name:
+            # Reasoning models have special parameters
+            extra_args["reasoning_effort"] = "medium"
+            extra_args["max_completion_tokens"] = 20000
+            extra_args["n"] = sampling_params.n
+        else:
+            # Standard models
+            extra_args["max_completion_tokens"] = sampling_params.max_tokens
+            extra_args["n"] = sampling_params.n
+            extra_args["temperature"] = sampling_params.temperature
+            extra_args["top_p"] = sampling_params.top_p
+        
+        response = self._create_completion_with_retry(
+            model=self.model_name,
+            messages=prompt,
+            **extra_args
+        )
+        
+        # Create response wrapper classes
+        class Outputs:
+            def __init__(self, outputs):
+                self.outputs = outputs
+
+        class Text:
+            def __init__(self, text):
+                self.text = text
+        
+        if hasattr(response, 'usage') and response.usage.completion_tokens > 0:
+            return [Outputs([Text(response.choices[i].message.content) for i in range(sampling_params.n)])]
+        else:
+            return [Outputs([Text("") for i in range(sampling_params.n)])]
+
+    def stream_chat(self, prompt: List[Dict], sampling_params: SamplingParams, emit_callback=None, interrupted_callback=None):
+        """Stream response using OpenAI's streaming API."""
+        self._ensure_initialized()
+        return self._stream_chat_impl(prompt, sampling_params, emit_callback, interrupted_callback)
+    
+    def _stream_chat_impl(self, prompt: List[Dict], sampling_params: SamplingParams, emit_callback=None, interrupted_callback=None):
+        """Implementation of streaming chat for OpenAI models."""
+        if not self._client:
+            raise RuntimeError("Client not initialized")
+        
+        extra_args = {}
+        
+        # Configure parameters based on model type
+        if "o3" in self.model_name or "o4" in self.model_name:
+            extra_args["reasoning_effort"] = "medium"
+            extra_args["max_completion_tokens"] = 20000
+        else:
+            extra_args["max_completion_tokens"] = sampling_params.max_tokens
+            extra_args["temperature"] = sampling_params.temperature
+            extra_args["top_p"] = sampling_params.top_p
+        
+        try:
+            stream = self._client.chat.completions.create(
+                model=self.model_name,
+                messages=prompt,
+                stream=True,
+                **extra_args
+            )
+            
+            full_response = ""
+            for chunk in stream:
+                # Check for interruption before processing each chunk
+                if interrupted_callback and interrupted_callback():
+                    # Stop streaming immediately if interrupted
+                    break
+                    
+                if chunk.choices[0].delta.content is not None:
+                    token = chunk.choices[0].delta.content
+                    full_response += token
+                    if emit_callback:
+                        emit_callback(token)
+            
+            # Return in the same format as the non-streaming version
+            class Outputs:
+                def __init__(self, outputs):
+                    self.outputs = outputs
+
+            class Text:
+                def __init__(self, text):
+                    self.text = text
+            
+            return [Outputs([Text(full_response)])]
+            
+        except Exception as e:
+            raise e
+
+
+class GoogleModel(LLMModel):
+    """
+    Google Gemini model interface.
+    
+    Supports both standard Gemini models and code interpreter variants
+    through different API endpoints.
+    """
+    
+    def __init__(self, model_name: str, api_key: Optional[str] = None):
+        super().__init__(model_name)
+        self.api_key = api_key or os.getenv("GOOGLE_API_KEY")
+        if not self.api_key:
+            raise ValueError("Google API key not provided and GOOGLE_API_KEY environment variable not set")
+        
+        # Determine which provider to use based on model name
+        if "codeinterpreter" in model_name:
+            self.provider = "google-genai"
+        else:
+            self.provider = "google"
+    
+    def _initialize_client(self):
+        """Initialize Google client based on provider type."""
+        if self.provider == "google-genai":
+            if not genai:
+                raise ImportError("google-genai library not installed. Install with: pip install google-genai")
+            self._client = genai.Client(api_key=self.api_key, http_options=types.HttpOptions(timeout=60*1000))
+        else:
+            # Use OpenAI-compatible API endpoint
+            self._client = OpenAI(
+                api_key=self.api_key,
+                base_url="https://generativelanguage.googleapis.com/v1beta/openai/",
+                timeout=900000000,
+                max_retries=3,
+            )
+    
+    def _chat_impl(self, prompt: List[Dict], sampling_params: SamplingParams, use_tqdm=False):
+        """Implementation of chat for Google models."""
+        if self.provider == "google-genai":
+            return self._chat_genai(prompt, sampling_params)
+        else:
+            return self._chat_openai_compatible(prompt, sampling_params)
+    
+    def _chat_genai(self, prompt: List[Dict], sampling_params: SamplingParams):
+        """Chat implementation using Google GenAI library."""
+        # Convert OpenAI format to Google GenAI format
+        genai_contents = []
+        for message in prompt:
+            role = message["role"]
+            content = message["content"]
+
+            if isinstance(content, str):
+                genai_contents.append(
+                    types.Content(
+                        role=role,
+                        parts=[types.Part(text=content)]
+                    )
+                )
+            elif isinstance(content, list):
+                parts = []
+                for item in content:
+                    if item["type"] == "text":
+                        parts.append(types.Part(text=item["text"]))
+                    elif item["type"] == "image_url":
+                        img_url = item["image_url"]["url"]
+                        if img_url.startswith("data:image"):
+                            # Handle base64 encoded images
+                            base64_data = img_url.split(",")[1]
+                            parts.append(
+                                types.Part(
+                                    inline_data=types.Blob(
+                                        mime_type="image/jpeg",
+                                        data=base64_data
+                                    )
+                                )
+                            )
+                        else:
+                            # Handle image URLs
+                            parts.append(
+                                types.Part(
+                                    file_data=types.FileData(
+                                        file_uri=img_url,
+                                        mime_type="image/jpeg"
+                                    )
+                                )
+                            )
+                if parts:
+                    genai_contents.append(
+                        types.Content(
+                            role=role,
+                            parts=parts
+                        )
+                    )
+
+        response = self._client.models.generate_content(
+            model=self.model_name.replace("-codeinterpreter", ""),
+            contents=genai_contents,
+            config=types.GenerateContentConfig(
+                tools=[types.Tool(
+                    code_execution=types.ToolCodeExecution
+                )],
+                temperature=sampling_params.temperature,
+                max_output_tokens=sampling_params.max_tokens,
+            )
+        )
+        
+        # Process response including code execution results
+        response_text = ""
+        code_execution_results = []
+
+        if response.candidates is not None:
+            for candidate in response.candidates:
+                if candidate.content is not None:
+                    for part in candidate.content.parts:
+                        if part.text is not None:
+                            response_text += part.text
+
+                        if part.executable_code is not None:
+                            executable_code = part.executable_code
+                            if executable_code.code is not None:
+                                code_execution_results.append({
+                                    'code': executable_code.code,
+                                })
+
+                        if part.code_execution_result is not None:
+                            code_result = part.code_execution_result
+                            if code_result.output is not None:
+                                code_execution_results.append({
+                                    'output': code_result.output,
+                                })
+
+        # Format final response with code execution results
+        final_response = ""
+        if code_execution_results:
+            for result in code_execution_results:
+                if "code" in result:
+                    final_response += f"Code:\n{result['code']}\n"
+                if "output" in result:
+                    final_response += f"Output:\n{result['output']}\n"
+        final_response += response_text
+        
+        class Outputs:
+            def __init__(self, outputs):
+                self.outputs = outputs
+
+        class Text:
+            def __init__(self, text):
+                self.text = text
+        
+        return [Outputs([Text(final_response)])]
+    
+    def _chat_openai_compatible(self, prompt: List[Dict], sampling_params: SamplingParams):
+        """Chat implementation using OpenAI-compatible API."""
+        response = self._client.chat.completions.create(
+            model=self.model_name,
+            messages=prompt,
+            max_completion_tokens=sampling_params.max_tokens,
+            n=sampling_params.n,
+            temperature=sampling_params.temperature,
+            top_p=sampling_params.top_p,
+        )
+        
+        class Outputs:
+            def __init__(self, outputs):
+                self.outputs = outputs
+
+        class Text:
+            def __init__(self, text):
+                self.text = text
+        
+        if response.usage.completion_tokens > 0:
+            return [Outputs([Text(response.choices[i].message.content) for i in range(sampling_params.n)])]
+        else:
+            return [Outputs([Text("") for i in range(sampling_params.n)])]
+
+    def stream_chat(self, prompt: List[Dict], sampling_params: SamplingParams, emit_callback=None, interrupted_callback=None):
+        """Stream response using Google models."""
+        self._ensure_initialized()
+        return self._stream_chat_impl(prompt, sampling_params, emit_callback, interrupted_callback)
+    
+    def _stream_chat_impl(self, prompt: List[Dict], sampling_params: SamplingParams, emit_callback=None, interrupted_callback=None):
+        """Implementation of streaming chat for Google models."""
+        if self.provider == "google-genai":
+            return self._stream_chat_genai(prompt, sampling_params, emit_callback, interrupted_callback)
+        else:
+            return self._stream_chat_openai_compatible(prompt, sampling_params, emit_callback, interrupted_callback)
+    
+    def _stream_chat_genai(self, prompt: List[Dict], sampling_params: SamplingParams, emit_callback=None, interrupted_callback=None):
+        """Stream chat using Google GenAI - simulates streaming as API doesn't support it."""
+        # Google GenAI doesn't support streaming yet, so we'll get the full response and simulate streaming
+        result = self._chat_genai(prompt, sampling_params)
+        full_response = result[0].outputs[0].text
+        
+        # Simulate streaming by emitting tokens immediately
+        if emit_callback and full_response:
+            # Split response into reasonable chunks (words/punctuation)
+            words = re.findall(r'\S+|\s+', full_response)
+            for word in words:
+                # Check for interruption before emitting each word
+                if interrupted_callback and interrupted_callback():
+                    break
+                if emit_callback:
+                    emit_callback(word)
+        
+        return result
+    
+    def _stream_chat_openai_compatible(self, prompt: List[Dict], sampling_params: SamplingParams, emit_callback=None, interrupted_callback=None):
+        """Stream chat using OpenAI-compatible Google API."""
+        if not self._client:
+            raise RuntimeError("Client not initialized")
+        
+        try:
+            stream = self._client.chat.completions.create(
+                model=self.model_name,
+                messages=prompt,
+                max_completion_tokens=sampling_params.max_tokens,
+                temperature=sampling_params.temperature,
+                top_p=sampling_params.top_p,
+                stream=True
+            )
+            
+            full_response = ""
+            for chunk in stream:
+                # Check for interruption before processing each chunk
+                if interrupted_callback and interrupted_callback():
+                    break
+                    
+                if chunk.choices[0].delta.content is not None:
+                    token = chunk.choices[0].delta.content
+                    full_response += token
+                    if emit_callback:
+                        emit_callback(token)
+            
+            # Return in the same format as the non-streaming version
+            class Outputs:
+                def __init__(self, outputs):
+                    self.outputs = outputs
+
+            class Text:
+                def __init__(self, text):
+                    self.text = text
+            
+            return [Outputs([Text(full_response)])]
+            
+        except Exception as e:
+            raise e
+
+
+class AnthropicModel(LLMModel):
+    """
+    Anthropic Claude model interface.
+    
+    Supports Claude models with proper message format conversion
+    and streaming capabilities.
+    """
+    
+    def __init__(self, model_name: str, api_key: Optional[str] = None):
+        super().__init__(model_name)
+        self.api_key = api_key or os.getenv("ANTHROPIC_API_KEY")
+        if not self.api_key:
+            raise ValueError("Anthropic API key not provided and ANTHROPIC_API_KEY environment variable not set")
+        
+        if not anthropic:
+            raise ImportError("anthropic library not installed. Install with: pip install anthropic")
+    
+    def _initialize_client(self):
+        """Initialize Anthropic client."""
+        self._client = anthropic.Anthropic(api_key=self.api_key)
+    
+    def _convert_messages(self, prompt: List[Dict]) -> tuple:
+        """
+        Convert OpenAI format messages to Anthropic format.
+        
+        Args:
+            prompt: List of message dictionaries in OpenAI format
+            
+        Returns:
+            Tuple of (system_message, messages) where messages are in Anthropic format
+        """
+        system_message = ""
+        anthropic_messages = []
+        
+        for message in prompt:
+            role = message["role"]
+            content = message["content"]
+            
+            if role == "system":
+                system_message = content if isinstance(content, str) else content[0]["text"]
+            else:
+                # Convert role names
+                if role == "assistant":
+                    anthropic_role = "assistant"
+                else:
+                    anthropic_role = "user"
+                
+                # Handle content format
+                if isinstance(content, str):
+                    anthropic_content = content
+                elif isinstance(content, list):
+                    # Handle multimodal content
+                    anthropic_content = []
+                    for item in content:
+                        if item["type"] == "text":
+                            anthropic_content.append({
+                                "type": "text",
+                                "text": item["text"]
+                            })
+                        elif item["type"] == "image_url":
+                            img_url = item["image_url"]["url"]
+                            if img_url.startswith("data:image"):
+                                # Extract base64 data and media type
+                                header, base64_data = img_url.split(",", 1)
+                                media_type = header.split(";")[0].split(":")[1]
+                                anthropic_content.append({
+                                    "type": "image",
+                                    "source": {
+                                        "type": "base64",
+                                        "media_type": media_type,
+                                        "data": base64_data
+                                    }
+                                })
+                else:
+                    anthropic_content = str(content)
+                
+                anthropic_messages.append({
+                    "role": anthropic_role,
+                    "content": anthropic_content
+                })
+        
+        return system_message, anthropic_messages
+    
+    def _chat_impl(self, prompt: List[Dict], sampling_params: SamplingParams, use_tqdm=False):
+        """Implementation of chat for Anthropic models."""
+        system_message, anthropic_messages = self._convert_messages(prompt)
+        
+        # Prepare API call arguments
+        kwargs = {
+            "model": self.model_name,
+            "messages": anthropic_messages,
+            "max_tokens": sampling_params.max_tokens,
+            "temperature": sampling_params.temperature,
+            "top_p": sampling_params.top_p,
+        }
+        
+        if system_message:
+            kwargs["system"] = system_message
+        
+        if sampling_params.stop:
+            kwargs["stop_sequences"] = sampling_params.stop
+        
+        response = self._client.messages.create(**kwargs)
+        
+        # Extract text from response
+        response_text = ""
+        for content_block in response.content:
+            if content_block.type == "text":
+                response_text += content_block.text
+        
+        # Create response wrapper classes
+        class Outputs:
+            def __init__(self, outputs):
+                self.outputs = outputs
+
+        class Text:
+            def __init__(self, text):
+                self.text = text
+        
+        return [Outputs([Text(response_text)])]
+    
+    def stream_chat(self, prompt: List[Dict], sampling_params: SamplingParams, emit_callback=None, interrupted_callback=None):
+        """Stream response using Anthropic's streaming API."""
+        self._ensure_initialized()
+        return self._stream_chat_impl(prompt, sampling_params, emit_callback, interrupted_callback)
+    
+    def _stream_chat_impl(self, prompt: List[Dict], sampling_params: SamplingParams, emit_callback=None, interrupted_callback=None):
+        """Implementation of streaming chat for Anthropic models."""
+        if not self._client:
+            raise RuntimeError("Client not initialized")
+        
+        system_message, anthropic_messages = self._convert_messages(prompt)
+        
+        # Prepare API call arguments
+        kwargs = {
+            "model": self.model_name,
+            "messages": anthropic_messages,
+            "max_tokens": sampling_params.max_tokens,
+            "temperature": sampling_params.temperature,
+            "top_p": sampling_params.top_p,
+            "stream": True,
+        }
+        
+        if system_message:
+            kwargs["system"] = system_message
+        
+        if sampling_params.stop:
+            kwargs["stop_sequences"] = sampling_params.stop
+        
+        try:
+            full_response = ""
+            
+            with self._client.messages.stream(**kwargs) as stream:
+                for text in stream.text_stream:
+                    # Check for interruption before processing each text chunk
+                    if interrupted_callback and interrupted_callback():
+                        break
+                        
+                    full_response += text
+                    if emit_callback:
+                        emit_callback(text)
+            
+            # Return in the same format as the non-streaming version
+            class Outputs:
+                def __init__(self, outputs):
+                    self.outputs = outputs
+
+            class Text:
+                def __init__(self, text):
+                    self.text = text
+            
+            return [Outputs([Text(full_response)])]
+            
+        except Exception as e:
+            raise e
+
+
+def get_model(model_name: str, api_key: Optional[str] = None) -> LLMModel:
+    """
+    Factory function to get the appropriate model instance.
+    
+    Args:
+        model_name: Name of the model to instantiate
+        api_key: Optional API key (will use environment variable if not provided)
+        
+    Returns:
+        LLMModel instance for the specified model
+        
+    Raises:
+        ValueError: If the model is not supported
+    """
+    model_name_lower = model_name.lower()
+
+    if any(model_name_lower.startswith(model) for model in ["gpt", "o3", "o4"]):
+        return OpenAIModel(model_name, api_key)
+    elif "gemini" in model_name_lower:
+        return GoogleModel(model_name, api_key)
+    elif "claude" in model_name_lower:
+        return AnthropicModel(model_name, api_key)
+    else:
+        raise ValueError(f"Unsupported model: {model_name}")
+
+
+# Import models from the registry
+from .model_registry import get_available_models
+
+# Available models - now pulled from the registry
+AVAILABLE_MODELS = get_available_models() 

src/pips/prompts.py

@@ -0,0 +1,67 @@
+"""
+Prompt templates used by the PIPS web application.
+
+These definitions mirror the variants maintained in ``scripts/algorithmic_eval.py``
+so that the web server can operate when the broader research repository is not
+installed as a Python package.
+"""
+
+CHOOSE_CONSERVATIVE_COT_VS_CODE_PROMPT = """
+You will self-reflect to estimate whether you are more likely to correctly solve a given target question by writing executable Python code or by using chain-of-thought (natural-language) reasoning.
+
+**IMPORTANT:**
+- This is a hypothetical evaluation.
+- **You must NOT attempt to answer, solve, write code, or reason through the target question yet.**
+- Instead, you must reflect carefully and conservatively on your expected ability if you were to attempt solving the question through either method.
+
+Solution Expectations:
+- You may assume standard library modules are allowed for code.
+- You may NOT call external services, APIs, databases, or other LLMs.
+- The code must be self-contained and executable without internet access.
+- Chain-of-thought reasoning must be clear, logically sound, and internally verifiable without external tools.
+
+**CRITICAL GUIDANCE:**
+- **Be cautious, not optimistic.**  
+  Overestimating your capabilities will lead to choosing a method you cannot successfully complete.
+- **If you feel any uncertainty, complexity, or ambiguity, lower your probability accordingly.**
+- **Assume that even small mistakes can cause failure** when writing code or reasoning through complex tasks.
+- **Use conservative estimates.**
+- If unsure between two options, **prefer lower probabilities rather than guessing high**.
+
+Here are the self-reflection sub-questions you must answer hypothetically:
+
+1. **Simple Formalizability** — *What is the probability that the full solution can be easily and directly expressed as simple, deterministic code, without needing complex transformations or deep insight?*
+
+2. **Straightforward Executability** — *What is the probability that a first attempt at writing code would execute correctly without needing debugging, even if the problem has subtle or complex aspects?*
+
+3. **Robust Systematic Search** — *What is the probability that coding a systematic method (like brute-force search or recursion) would reliably find the correct answer, without missing hidden constraints or introducing edge-case errors?*
+
+4. **Manageable State Representation** — *What is the probability that all intermediate concepts, variables, and conditions can be simply and explicitly represented in code, without requiring difficult or error-prone state tracking?*
+
+5. **Structured Knowledge Encoding** — *What is the probability that all required background knowledge can be neatly encoded in code (e.g., as rules, formulas, or data), rather than needing flexible, intuitive understanding better suited to reasoning?*
+
+6. **Hallucination Risk Reduction** — *What is the probability that code execution would more reliably avoid fabricated steps or unwarranted assumptions compared to chain-of-thought reasoning?*
+
+7. **Arithmetic and Data Processing Advantage** — *What is the probability that the problem requires extensive or error-prone arithmetic/data handling that code could perform perfectly, but that chain-of-thought would likely fumble?*
+
+8. **Branching and Case Handling Advantage** — *What is the probability that the solution involves many branching conditions, special cases, or exceptions that code can handle systematically but chain-of-thought might overlook?*
+
+9. **Algorithmic Reliability Over Heuristics** — *What is the probability that following a deterministic algorithm in code would reach the correct answer more reliably than relying on intuitive or heuristic chain-of-thought reasoning?*
+
+10. **Overall Comparative Success** — *Considering all factors, what is the probability that code will ultimately produce a correct solution more reliably than chain-of-thought reasoning for this question?*
+
+After thoroughly reasoning through each criterion:
+
+- Output a single list of 10 probability scores (each between 0 and 1) as your FINAL ANSWER, in order:
+  - Scores 1–10 correspond to the ten sub-questions above.
+
+**Additional Instructions:**
+- Explicitly reason through each criterion carefully before giving a probability.
+- If uncertain or if the problem seems complex, favor lower probabilities to reflect the difficulty.
+- Make sure to put only the list after FINAL ANSWER.
+- **Under no circumstances should you write, sketch, pseudocode, or attempt any part of the solution itself during this reflection phase.**
+
+TARGET QUESTION:
+"""
+
+__all__ = ["CHOOSE_CONSERVATIVE_COT_VS_CODE_PROMPT"]

src/pips/saved_examples/movies.json

@@ -0,0 +1,153 @@
+{
+  "problem": "Chain of thought completed!",
+  "history": [
+    {
+      "role": "user",
+      "content": "Which of these movies is the action movie: Die Hard, The Notebook, or The Internship?",
+      "metadata": {
+        "component": "user",
+        "title": "User"
+      }
+    },
+    {
+      "role": "assistant",
+      "content": "Choosing between chain-of-thought reasoning and iterative coding\u2026",
+      "metadata": {
+        "component": "mode_selection",
+        "title": "Mode Selection"
+      }
+    },
+    {
+      "role": "assistant",
+      "content": "Mode chosen: Chain-of-thought reasoning",
+      "metadata": {
+        "component": "mode_result",
+        "title": "Mode Choice"
+      }
+    },
+    {
+      "role": "assistant",
+      "content": "Let's analyze each movie:\n\n1. **Die Hard**: This movie is well-known for its intense sequences, gunfights, and thrilling plot involving a police officer fighting terrorists in a skyscraper. It is widely recognized as a classic action movie.\n\n2. **The Notebook**: This film is a romantic drama about a love story between two people. It is not considered an action movie.\n\n3. **The Internship**: This is a comedy about two men who intern at Google. It is not an action movie.\n\nBased on the descriptions, the action movie among the three is \"Die Hard.\"\n\nFINAL ANSWER: Die Hard",
+      "metadata": {
+        "component": "solver",
+        "title": "\ud83e\udde0 Solver (iteration 0) \u00b7 OpenAIModel"
+      }
+    },
+    {
+      "role": "assistant",
+      "content": "**Final Answer:** FINAL ANSWER: Die Hard\n\n**Method:** Chain-of-thought reasoning",
+      "metadata": {
+        "component": "summary",
+        "title": "Summary"
+      }
+    }
+  ],
+  "symbols": null,
+  "code": "",
+  "status": "\u2705 Completed (chain-of-thought).",
+  "method": "Chain-of-thought reasoning",
+  "decision": {
+    "use_code": false,
+    "scores": [
+      0.2,
+      0.1,
+      0.05,
+      0.5,
+      0.2,
+      0.2,
+      0.05,
+      0.1,
+      0.1,
+      0.1
+    ],
+    "average_score": 0.16,
+    "raw_response": "Let's reason through each criterion in the context of the target question:\n\n1. **Simple Formalizability**  \n   The question asks to identify which movie is an action movie from a list. If I had a database or mapping of movie genres, this could be formalized. However, with only standard library and no external data, I would need to encode the genre knowledge myself. This is not a simple, deterministic code task unless the knowledge is hardcoded. Thus, the probability is low.\n\n2. **Straightforward Executability**  \n   Any code I write would need to include the genre information for these movies. Unless I hardcode the mapping, the code would not execute correctly. Even with hardcoding, there's a risk of error in encoding the correct genres. So, the probability is low.\n\n3. **Robust Systematic Search**  \n   Systematic search (e.g., brute-force) is not applicable unless I have a dataset to search. With only standard library and no external data, systematic search is not possible. Probability is very low.\n\n4. **Manageable State Representation**  \n   The state (movie names and their genres) is simple if hardcoded, but the risk is in accurate knowledge encoding. Still, representing the state itself is manageable. Probability is moderate.\n\n5. **Structured Knowledge Encoding**  \n   The required knowledge (which movie is an action movie) is not in the standard library and must be encoded manually. This is not \"neatly\" encoded unless I already know the genres and hardcode them. Probability is low.\n\n6. **Hallucination Risk Reduction**  \n   Code would only be as reliable as the knowledge I encode. If I make a mistake in the mapping, code could hallucinate just as much as chain-of-thought. Probability is low.\n\n7. **Arithmetic and Data Processing Advantage**  \n   There is no arithmetic or data processing advantage here; the task is about factual knowledge. Probability is very low.\n\n8. **Branching and Case Handling Advantage**  \n   There are only three options, so branching is trivial. No significant advantage for code. Probability is low.\n\n9. **Algorithmic Reliability Over Heuristics**  \n   The problem is not algorithmic; it's factual. Code is only as reliable as the hardcoded knowledge. Probability is low.\n\n10. **Overall Comparative Success**  \n    Chain-of-thought reasoning (using general knowledge) is likely more reliable than code, unless the code is perfectly hardcoded. Given the risk of error in encoding, code is less reliable overall. Probability is low.\n\nNow, assigning conservative probabilities:\n\n1. 0.2  \n2. 0.1  \n3. 0.05  \n4. 0.5  \n5. 0.2  \n6. 0.2  \n7. 0.05  \n8. 0.1  \n9. 0.1  \n10. 0.1  \n\nFINAL ANSWER: [0.2, 0.1, 0.05, 0.5, 0.2, 0.2, 0.05, 0.1, 0.1, 0.1]",
+    "prompt": [
+      {
+        "role": "user",
+        "content": [
+          {
+            "type": "text",
+            "text": "You will self-reflect to estimate whether you are more likely to correctly solve a given target question by writing executable Python code or by using chain-of-thought (natural-language) reasoning.\n\n**IMPORTANT:**\n- This is a hypothetical evaluation.\n- **You must NOT attempt to answer, solve, write code, or reason through the target question yet.**\n- Instead, you must reflect carefully and conservatively on your expected ability if you were to attempt solving the question through either method.\n\nSolution Expectations:\n- You may assume standard library modules are allowed for code.\n- You may NOT call external services, APIs, databases, or other LLMs.\n- The code must be self-contained and executable without internet access.\n- Chain-of-thought reasoning must be clear, logically sound, and internally verifiable without external tools.\n\n**CRITICAL GUIDANCE:**\n- **Be cautious, not optimistic.**  \n  Overestimating your capabilities will lead to choosing a method you cannot successfully complete.\n- **If you feel any uncertainty, complexity, or ambiguity, lower your probability accordingly.**\n- **Assume that even small mistakes can cause failure** when writing code or reasoning through complex tasks.\n- **Use conservative estimates.**\n- If unsure between two options, **prefer lower probabilities rather than guessing high**.\n\nHere are the self-reflection sub-questions you must answer hypothetically:\n\n1. **Simple Formalizability** \u2014 *What is the probability that the full solution can be easily and directly expressed as simple, deterministic code, without needing complex transformations or deep insight?*\n\n2. **Straightforward Executability** \u2014 *What is the probability that a first attempt at writing code would execute correctly without needing debugging, even if the problem has subtle or complex aspects?*\n\n3. **Robust Systematic Search** \u2014 *What is the probability that coding a systematic method (like brute-force search or recursion) would reliably find the correct answer, without missing hidden constraints or introducing edge-case errors?*\n\n4. **Manageable State Representation** \u2014 *What is the probability that all intermediate concepts, variables, and conditions can be simply and explicitly represented in code, without requiring difficult or error-prone state tracking?*\n\n5. **Structured Knowledge Encoding** \u2014 *What is the probability that all required background knowledge can be neatly encoded in code (e.g., as rules, formulas, or data), rather than needing flexible, intuitive understanding better suited to reasoning?*\n\n6. **Hallucination Risk Reduction** \u2014 *What is the probability that code execution would more reliably avoid fabricated steps or unwarranted assumptions compared to chain-of-thought reasoning?*\n\n7. **Arithmetic and Data Processing Advantage** \u2014 *What is the probability that the problem requires extensive or error-prone arithmetic/data handling that code could perform perfectly, but that chain-of-thought would likely fumble?*\n\n8. **Branching and Case Handling Advantage** \u2014 *What is the probability that the solution involves many branching conditions, special cases, or exceptions that code can handle systematically but chain-of-thought might overlook?*\n\n9. **Algorithmic Reliability Over Heuristics** \u2014 *What is the probability that following a deterministic algorithm in code would reach the correct answer more reliably than relying on intuitive or heuristic chain-of-thought reasoning?*\n\n10. **Overall Comparative Success** \u2014 *Considering all factors, what is the probability that code will ultimately produce a correct solution more reliably than chain-of-thought reasoning for this question?*\n\nAfter thoroughly reasoning through each criterion:\n\n- Output a single list of 10 probability scores (each between 0 and 1) as your FINAL ANSWER, in order:\n  - Scores 1\u201310 correspond to the ten sub-questions above.\n\n**Additional Instructions:**\n- Explicitly reason through each criterion carefully before giving a probability.\n- If uncertain or if the problem seems complex, favor lower probabilities to reflect the difficulty.\n- Make sure to put only the list after FINAL ANSWER.\n- **Under no circumstances should you write, sketch, pseudocode, or attempt any part of the solution itself during this reflection phase.**\n\nTARGET QUESTION:\nAt the end of your response, output only the list of 10 probabilities inside square brackets after the text 'FINAL ANSWER:'."
+          },
+          {
+            "type": "text",
+            "text": "TARGET QUESTION:\nWhich of these movies is the action movie: Die Hard, The Notebook, or The Internship?"
+          }
+        ]
+      }
+    ],
+    "error": null
+  },
+  "steps": [
+    {
+      "step": "mode_selection",
+      "message": "Choosing between chain-of-thought reasoning and iterative coding\u2026",
+      "iteration": null,
+      "prompt_details": {
+        "description": "Choosing between chain-of-thought and iterative coding",
+        "conversation": [
+          {
+            "role": "user",
+            "content": [
+              {
+                "type": "text",
+                "text": "You will self-reflect to estimate whether you are more likely to correctly solve a given target question by writing executable Python code or by using chain-of-thought (natural-language) reasoning.\n\n**IMPORTANT:**\n- This is a hypothetical evaluation.\n- **You must NOT attempt to answer, solve, write code, or reason through the target question yet.**\n- Instead, you must reflect carefully and conservatively on your expected ability if you were to attempt solving the question through either method.\n\nSolution Expectations:\n- You may assume standard library modules are allowed for code.\n- You may NOT call external services, APIs, databases, or other LLMs.\n- The code must be self-contained and executable without internet access.\n- Chain-of-thought reasoning must be clear, logically sound, and internally verifiable without external tools.\n\n**CRITICAL GUIDANCE:**\n- **Be cautious, not optimistic.**  \n  Overestimating your capabilities will lead to choosing a method you cannot successfully complete.\n- **If you feel any uncertainty, complexity, or ambiguity, lower your probability accordingly.**\n- **Assume that even small mistakes can cause failure** when writing code or reasoning through complex tasks.\n- **Use conservative estimates.**\n- If unsure between two options, **prefer lower probabilities rather than guessing high**.\n\nHere are the self-reflection sub-questions you must answer hypothetically:\n\n1. **Simple Formalizability** \u2014 *What is the probability that the full solution can be easily and directly expressed as simple, deterministic code, without needing complex transformations or deep insight?*\n\n2. **Straightforward Executability** \u2014 *What is the probability that a first attempt at writing code would execute correctly without needing debugging, even if the problem has subtle or complex aspects?*\n\n3. **Robust Systematic Search** \u2014 *What is the probability that coding a systematic method (like brute-force search or recursion) would reliably find the correct answer, without missing hidden constraints or introducing edge-case errors?*\n\n4. **Manageable State Representation** \u2014 *What is the probability that all intermediate concepts, variables, and conditions can be simply and explicitly represented in code, without requiring difficult or error-prone state tracking?*\n\n5. **Structured Knowledge Encoding** \u2014 *What is the probability that all required background knowledge can be neatly encoded in code (e.g., as rules, formulas, or data), rather than needing flexible, intuitive understanding better suited to reasoning?*\n\n6. **Hallucination Risk Reduction** \u2014 *What is the probability that code execution would more reliably avoid fabricated steps or unwarranted assumptions compared to chain-of-thought reasoning?*\n\n7. **Arithmetic and Data Processing Advantage** \u2014 *What is the probability that the problem requires extensive or error-prone arithmetic/data handling that code could perform perfectly, but that chain-of-thought would likely fumble?*\n\n8. **Branching and Case Handling Advantage** \u2014 *What is the probability that the solution involves many branching conditions, special cases, or exceptions that code can handle systematically but chain-of-thought might overlook?*\n\n9. **Algorithmic Reliability Over Heuristics** \u2014 *What is the probability that following a deterministic algorithm in code would reach the correct answer more reliably than relying on intuitive or heuristic chain-of-thought reasoning?*\n\n10. **Overall Comparative Success** \u2014 *Considering all factors, what is the probability that code will ultimately produce a correct solution more reliably than chain-of-thought reasoning for this question?*\n\nAfter thoroughly reasoning through each criterion:\n\n- Output a single list of 10 probability scores (each between 0 and 1) as your FINAL ANSWER, in order:\n  - Scores 1\u201310 correspond to the ten sub-questions above.\n\n**Additional Instructions:**\n- Explicitly reason through each criterion carefully before giving a probability.\n- If uncertain or if the problem seems complex, favor lower probabilities to reflect the difficulty.\n- Make sure to put only the list after FINAL ANSWER.\n- **Under no circumstances should you write, sketch, pseudocode, or attempt any part of the solution itself during this reflection phase.**\n\nTARGET QUESTION:\nAt the end of your response, output only the list of 10 probabilities inside square brackets after the text 'FINAL ANSWER:'."
+              },
+              {
+                "type": "text",
+                "text": "TARGET QUESTION:\nWhich of these movies is the action movie: Die Hard, The Notebook, or The Internship?"
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "step": "mode_selection",
+      "message": "Average code suitability score: 0.16. Proceeding with chain-of-thought reasoning.",
+      "iteration": null,
+      "prompt_details": {
+        "description": "Choosing between chain-of-thought and iterative coding",
+        "conversation": [
+          {
+            "role": "user",
+            "content": [
+              {
+                "type": "text",
+                "text": "You will self-reflect to estimate whether you are more likely to correctly solve a given target question by writing executable Python code or by using chain-of-thought (natural-language) reasoning.\n\n**IMPORTANT:**\n- This is a hypothetical evaluation.\n- **You must NOT attempt to answer, solve, write code, or reason through the target question yet.**\n- Instead, you must reflect carefully and conservatively on your expected ability if you were to attempt solving the question through either method.\n\nSolution Expectations:\n- You may assume standard library modules are allowed for code.\n- You may NOT call external services, APIs, databases, or other LLMs.\n- The code must be self-contained and executable without internet access.\n- Chain-of-thought reasoning must be clear, logically sound, and internally verifiable without external tools.\n\n**CRITICAL GUIDANCE:**\n- **Be cautious, not optimistic.**  \n  Overestimating your capabilities will lead to choosing a method you cannot successfully complete.\n- **If you feel any uncertainty, complexity, or ambiguity, lower your probability accordingly.**\n- **Assume that even small mistakes can cause failure** when writing code or reasoning through complex tasks.\n- **Use conservative estimates.**\n- If unsure between two options, **prefer lower probabilities rather than guessing high**.\n\nHere are the self-reflection sub-questions you must answer hypothetically:\n\n1. **Simple Formalizability** \u2014 *What is the probability that the full solution can be easily and directly expressed as simple, deterministic code, without needing complex transformations or deep insight?*\n\n2. **Straightforward Executability** \u2014 *What is the probability that a first attempt at writing code would execute correctly without needing debugging, even if the problem has subtle or complex aspects?*\n\n3. **Robust Systematic Search** \u2014 *What is the probability that coding a systematic method (like brute-force search or recursion) would reliably find the correct answer, without missing hidden constraints or introducing edge-case errors?*\n\n4. **Manageable State Representation** \u2014 *What is the probability that all intermediate concepts, variables, and conditions can be simply and explicitly represented in code, without requiring difficult or error-prone state tracking?*\n\n5. **Structured Knowledge Encoding** \u2014 *What is the probability that all required background knowledge can be neatly encoded in code (e.g., as rules, formulas, or data), rather than needing flexible, intuitive understanding better suited to reasoning?*\n\n6. **Hallucination Risk Reduction** \u2014 *What is the probability that code execution would more reliably avoid fabricated steps or unwarranted assumptions compared to chain-of-thought reasoning?*\n\n7. **Arithmetic and Data Processing Advantage** \u2014 *What is the probability that the problem requires extensive or error-prone arithmetic/data handling that code could perform perfectly, but that chain-of-thought would likely fumble?*\n\n8. **Branching and Case Handling Advantage** \u2014 *What is the probability that the solution involves many branching conditions, special cases, or exceptions that code can handle systematically but chain-of-thought might overlook?*\n\n9. **Algorithmic Reliability Over Heuristics** \u2014 *What is the probability that following a deterministic algorithm in code would reach the correct answer more reliably than relying on intuitive or heuristic chain-of-thought reasoning?*\n\n10. **Overall Comparative Success** \u2014 *Considering all factors, what is the probability that code will ultimately produce a correct solution more reliably than chain-of-thought reasoning for this question?*\n\nAfter thoroughly reasoning through each criterion:\n\n- Output a single list of 10 probability scores (each between 0 and 1) as your FINAL ANSWER, in order:\n  - Scores 1\u201310 correspond to the ten sub-questions above.\n\n**Additional Instructions:**\n- Explicitly reason through each criterion carefully before giving a probability.\n- If uncertain or if the problem seems complex, favor lower probabilities to reflect the difficulty.\n- Make sure to put only the list after FINAL ANSWER.\n- **Under no circumstances should you write, sketch, pseudocode, or attempt any part of the solution itself during this reflection phase.**\n\nTARGET QUESTION:\nAt the end of your response, output only the list of 10 probabilities inside square brackets after the text 'FINAL ANSWER:'."
+              },
+              {
+                "type": "text",
+                "text": "TARGET QUESTION:\nWhich of these movies is the action movie: Die Hard, The Notebook, or The Internship?"
+              }
+            ]
+          }
+        ],
+        "raw_response": "Let's reason through each criterion in the context of the target question:\n\n1. **Simple Formalizability**  \n   The question asks to identify which movie is an action movie from a list. If I had a database or mapping of movie genres, this could be formalized. However, with only standard library and no external data, I would need to encode the genre knowledge myself. This is not a simple, deterministic code task unless the knowledge is hardcoded. Thus, the probability is low.\n\n2. **Straightforward Executability**  \n   Any code I write would need to include the genre information for these movies. Unless I hardcode the mapping, the code would not execute correctly. Even with hardcoding, there's a risk of error in encoding the correct genres. So, the probability is low.\n\n3. **Robust Systematic Search**  \n   Systematic search (e.g., brute-force) is not applicable unless I have a dataset to search. With only standard library and no external data, systematic search is not possible. Probability is very low.\n\n4. **Manageable State Representation**  \n   The state (movie names and their genres) is simple if hardcoded, but the risk is in accurate knowledge encoding. Still, representing the state itself is manageable. Probability is moderate.\n\n5. **Structured Knowledge Encoding**  \n   The required knowledge (which movie is an action movie) is not in the standard library and must be encoded manually. This is not \"neatly\" encoded unless I already know the genres and hardcode them. Probability is low.\n\n6. **Hallucination Risk Reduction**  \n   Code would only be as reliable as the knowledge I encode. If I make a mistake in the mapping, code could hallucinate just as much as chain-of-thought. Probability is low.\n\n7. **Arithmetic and Data Processing Advantage**  \n   There is no arithmetic or data processing advantage here; the task is about factual knowledge. Probability is very low.\n\n8. **Branching and Case Handling Advantage**  \n   There are only three options, so branching is trivial. No significant advantage for code. Probability is low.\n\n9. **Algorithmic Reliability Over Heuristics**  \n   The problem is not algorithmic; it's factual. Code is only as reliable as the hardcoded knowledge. Probability is low.\n\n10. **Overall Comparative Success**  \n    Chain-of-thought reasoning (using general knowledge) is likely more reliable than code, unless the code is perfectly hardcoded. Given the risk of error in encoding, code is less reliable overall. Probability is low.\n\nNow, assigning conservative probabilities:\n\n1. 0.2  \n2. 0.1  \n3. 0.05  \n4. 0.5  \n5. 0.2  \n6. 0.2  \n7. 0.05  \n8. 0.1  \n9. 0.1  \n10. 0.1  \n\nFINAL ANSWER: [0.2, 0.1, 0.05, 0.5, 0.2, 0.2, 0.05, 0.1, 0.1, 0.1]",
+        "error": null
+      }
+    },
+    {
+      "step": "reasoning",
+      "message": "Thinking step-by-step...",
+      "iteration": null,
+      "prompt_details": {
+        "description": "Chain of thought reasoning",
+        "conversation": [
+          {
+            "role": "user",
+            "content": "Question: Which of these movies is the action movie: Die Hard, The Notebook, or The Internship?\nAnswer step-by-step and finish with 'FINAL ANSWER:'."
+          }
+        ]
+      }
+    },
+    {
+      "step": "finished",
+      "message": "Chain of thought completed!",
+      "iteration": null,
+      "prompt_details": null
+    }
+  ],
+  "timestamp": 1760569049.2332404
+}

src/pips/saved_examples/time_arithmetic.json

@@ -0,0 +1,306 @@
+{
+  "problem": "Solution completed successfully!",
+  "history": [
+    {
+      "role": "user",
+      "content": "Let the answer to Question1 be X/Y/Z.\n\nQuestion1: If the current date is 09-13-2011, what is the date 17 months before now? Your answer should be the date in the mm/dd/yyyy format (for example, 06/23/2021).\n\nLet X' = X + 10.\n\nLet the answer to Question2 be P.\n\nQuestion2: Today is Sunday and my parents arrive in X' days. On what day of the week do my parents arrive? Your answer should be the day of the week (for example, Sunday).\n\nLet Y' = Y + 16 and let P' be the day of the week 45 days after P.\n\nLet the answer to Question3 be Q.\n\nQuestion3: On P' morning, I was told that the package was out for delivery Y' days ago. On what day of the week was the package out for delivery? Your answer should be the day of the week.\n\nLet Z' = Z - 1984 and let Q' be the day of the week 75 days after Q.\n\nUse these values to solve Question4.\n\nQuestion4: On Q' before noon, I received a text saying my deadline is in exactly Z' hours. On what day(s) of the week could the deadline be? Your answer should be an ordered list with alphabetically ordered items (for example, [answer1, answer2, ...]).",
+      "metadata": {
+        "component": "user",
+        "title": "User"
+      }
+    },
+    {
+      "role": "assistant",
+      "content": "Choosing between chain-of-thought reasoning and iterative coding\u2026",
+      "metadata": {
+        "component": "mode_selection",
+        "title": "Mode Selection"
+      }
+    },
+    {
+      "role": "assistant",
+      "content": "Mode chosen: Iterative coding",
+      "metadata": {
+        "component": "mode_result",
+        "title": "Mode Choice"
+      }
+    },
+    {
+      "role": "assistant",
+      "content": "Let's break down the problem step by step and extract all relevant information in a structured JSON format.\n\n## Step 1: Extracting Information\n\n### Question 1\n- Current date: 09-13-2011\n- Find the date 17 months before now.\n- Output format: mm/dd/yyyy\n- Let the answer be X/Y/Z, where X, Y, Z are the month, day, year of the answer.\n\n### Question 2\n- X' = X + 10\n- Today is Sunday.\n- Parents arrive in X' days.\n- What day of the week do they arrive? (P)\n\n### Question 3\n- Y' = Y + 16\n- P' = day of the week 45 days after P\n- On P' morning, told package was out for delivery Y' days ago.\n- What day of the week was the package out for delivery? (Q)\n\n### Question 4\n- Z' = Z - 1984\n- Q' = day of the week 75 days after Q\n- On Q' before noon, received text: deadline in exactly Z' hours.\n- On what day(s) of the week could the deadline be? (ordered, alphabetically)\n\n## Step 2: JSON Representation\n\n```json\n{\n  \"question1\": {\n    \"current_date\": \"09-13-2011\",\n    \"months_before\": 17,\n    \"output_format\": \"mm/dd/yyyy\"\n  },\n  \"question2\": {\n    \"today\": \"Sunday\",\n    \"days_until_arrival\": \"X_prime\",\n    \"output\": \"day_of_week\"\n  },\n  \"question3\": {\n    \"days_ago\": \"Y_prime\",\n    \"reference_day\": \"P_prime\",\n    \"output\": \"day_of_week\"\n  },\n  \"question4\": {\n    \"hours_until_deadline\": \"Z_prime\",\n    \"reference_day\": \"Q_prime\",\n    \"output\": \"alphabetical_list_of_days\"\n  }\n}\n```\n\n## Step 3: Plan for Python Code\n\n1. **Question 1**: Subtract 17 months from 09-13-2011, get X, Y, Z.\n2. **Question 2**: X' = X + 10. Starting from Sunday, add X' days, get P.\n3. **Question 3**: Y' = Y + 16. P' = 45 days after P. On P', package was out for delivery Y' days ago. Find the day of the week Q.\n4. **Question 4**: Z' = Z - 1984. Q' = 75 days after Q. On Q', deadline is in Z' hours. Find all possible days of the week the deadline could fall on, output as an alphabetically ordered list.\n\nNow, let's write the code to solve the problem step by step.\n\n```python\ndef solve(symbols):\n    from datetime import datetime, timedelta\n    import calendar\n\n    # Helper to get day of week string\n    def day_of_week(dt):\n        return calendar.day_name[dt.weekday()]\n\n    # Helper to get day of week from string and offset\n    def day_of_week_from_name(name, offset):\n        days = list(calendar.day_name)\n        idx = days.index(name)\n        return days[(idx + offset) % 7]\n\n    # Question 1\n    current_date = datetime.strptime(symbols['question1']['current_date'], \"%m-%d-%Y\")\n    months_before = symbols['question1']['months_before']\n    # Subtract months\n    year = current_date.year\n    month = current_date.month\n    day = current_date.day\n    # Calculate new month and year\n    total_months = year * 12 + month - 1  # months since year 0\n    new_total_months = total_months - months_before\n    new_year = new_total_months // 12\n    new_month = new_total_months % 12 + 1\n    # Handle day overflow (e.g., 31st in a month with 30 days)\n    try:\n        new_date = datetime(new_year, new_month, day)\n    except ValueError:\n        # Use last day of the month\n        last_day = calendar.monthrange(new_year, new_month)[1]\n        new_date = datetime(new_year, new_month, last_day)\n    X = new_date.month\n    Y = new_date.day\n    Z = new_date.year\n\n    # Question 2\n    X_prime = X + 10\n    today_name = symbols['question2']['today']\n    # Find day of week after X' days\n    P = day_of_week_from_name(today_name, X_prime)\n\n    # Question 3\n    Y_prime = Y + 16\n    # P' is 45 days after P\n    # To get P's date, let's pick an arbitrary date that is a 'P' (since only the day of week matters)\n    # Let's use 2023-01-01 as a Sunday, then find the next P\n    base_date = datetime(2023, 1, 1)  # This is a Sunday\n    days_to_P = (list(calendar.day_name).index(P) - base_date.weekday()) % 7\n    P_date = base_date + timedelta(days=days_to_P)\n    P_prime_date = P_date + timedelta(days=45)\n    P_prime = day_of_week(P_prime_date)\n    # On P' morning, package was out for delivery Y' days ago\n    Q_date = P_prime_date - timedelta(days=Y_prime)\n    Q = day_of_week(Q_date)\n\n    # Question 4\n    Z_prime = Z - 1984\n    # Q' is 75 days after Q\n    # Find a date that is Q, then add 75 days\n    days_to_Q = (list(calendar.day_name).index(Q) - base_date.weekday()) % 7\n    Q_date_base = base_date + timedelta(days=days_to_Q)\n    Q_prime_date = Q_date_base + timedelta(days=75)\n    Q_prime = day_of_week(Q_prime_date)\n    # On Q' before noon, deadline is in Z' hours\n    # Z' hours from before noon (say, 11:59am) on Q'\n    # Find all possible days of the week the deadline could fall on\n    # Z' hours may not be a whole number of days, so the deadline could be on two days\n    # Let's assume \"before noon\" is 11:59am\n    Q_prime_datetime = datetime(2023, 1, 1, 11, 59)  # 2023-01-01 is a Sunday\n    days_to_Q_prime = (list(calendar.day_name).index(Q_prime) - Q_prime_datetime.weekday()) % 7\n    Q_prime_datetime = Q_prime_datetime + timedelta(days=days_to_Q_prime)\n    deadline_datetime = Q_prime_datetime + timedelta(hours=Z_prime)\n    # The deadline could be on the day of Q_prime or the next day if it crosses midnight\n    days = set()\n    days.add(calendar.day_name[Q_prime_datetime.weekday()])\n    if deadline_datetime.date() != Q_prime_datetime.date():\n        days.add(calendar.day_name[deadline_datetime.weekday()])\n    answer_list = sorted(list(days))\n\n    return answer_list\n```\n",
+      "metadata": {
+        "component": "solver",
+        "title": "\ud83e\udde0 Solver (iteration 0) \u00b7 OpenAIModel"
+      }
+    },
+    {
+      "role": "assistant",
+      "content": "1. **Incorrect Handling of \"Before Noon\" Ambiguity:** The code assumes \"before noon\" is always 11:59am, which is arbitrary. The actual range for \"before noon\" is from 12:00am to 11:59am, so the deadline could fall on up to three days (the day before, the same day, or the next day), depending on the value of Z'. The code only considers the current and next day, potentially missing valid days.\n\n2. **Arbitrary Base Date for Day-of-Week Calculations:** The code uses January 1, 2023 (a Sunday) as a base date for all day-of-week calculations. While this works for relative day-of-week math, it is not robust if the weekday mapping changes or if the base date is not Sunday. This could lead to errors if the base date is changed or misunderstood.\n\n3. **Hardcoded Year in Q' Calculations:** The code uses 2023 as the year for Q' calculations, which is unrelated to the actual years involved in the problem. This is acceptable for day-of-week math but is not generalizable or clearly justified.\n\n4. **No Input Validation:** The code does not validate the input symbols or check for missing or malformed data, which could lead to runtime errors if the input format changes.\n\n5. **Unnecessary Complexity in Date Calculations:** The code overcomplicates the process by creating arbitrary dates to match days of the week, rather than simply using modular arithmetic on the weekday indices.\n\n6. **No Explanation or Comments for Key Steps:** Some steps, such as why 2023-01-01 is chosen or how the day overflow is handled, lack clear comments, making the logic harder to follow and verify.\n\nDespite these issues, the code produces a plausible answer for the given input, but the ambiguity in \"before noon\" and the arbitrary choices in date handling could lead to incorrect or incomplete results in other scenarios.",
+      "metadata": {
+        "component": "critic",
+        "title": "\ud83e\uddfe Critic (iteration 1) \u00b7 AI Code Reviewer"
+      }
+    },
+    {
+      "role": "assistant",
+      "content": "Let's address the issues:\n\n### Issues to Fix\n\n1. **\"Before Noon\" Ambiguity:** The code should consider that \"before noon\" could be any time from 12:00am to 11:59am, so the deadline could fall on the same day, the next day, or even the previous day, depending on Z' (if Z' >= 12, the deadline could be on the previous day).\n2. **Arbitrary Base Date:** Instead of using arbitrary dates, use modular arithmetic for day-of-week calculations.\n3. **Unnecessary Date Construction:** For day-of-week math, use indices and modular arithmetic.\n4. **Clear Comments and Simpler Logic:** Add clear comments and use simpler, more robust logic.\n\n### Plan\n\n- For all day-of-week calculations, use indices (0=Monday, ..., 6=Sunday).\n- For \"before noon\", consider the full range (12:00am to 11:59am). The deadline could be on:\n  - The same day if Z' < 12\n  - The next day if Z' >= 12 and < 36, etc.\n  - The previous day if Z' >= 24 (if before noon, and deadline is in 24+ hours, it could be the day before).\n- For the deadline, consider all possible days of the week the deadline could fall on, given the range of possible \"before noon\" times.\n\n### Revised Code\n\n```python\ndef solve(symbols):\n    import calendar\n\n    # Helper: get weekday index from name\n    def weekday_index(name):\n        return list(calendar.day_name).index(name)\n\n    # Helper: get weekday name from index\n    def weekday_name(idx):\n        return list(calendar.day_name)[idx % 7]\n\n    # Question 1: Subtract 17 months from 09-13-2011\n    m, d, y = 9, 13, 2011\n    months_before = 17\n    total_months = y * 12 + m - 1\n    new_total_months = total_months - months_before\n    new_y = new_total_months // 12\n    new_m = new_total_months % 12 + 1\n    # Handle day overflow\n    import calendar\n    last_day = calendar.monthrange(new_y, new_m)[1]\n    new_d = min(d, last_day)\n    X, Y, Z = new_m, new_d, new_y\n\n    # Question 2: X' = X + 10, today is Sunday\n    X_prime = X + 10\n    today_idx = weekday_index(\"Sunday\")\n    P_idx = (today_idx + X_prime) % 7\n    P = weekday_name(P_idx)\n\n    # Question 3: Y' = Y + 16, P' = 45 days after P\n    Y_prime = Y + 16\n    P_prime_idx = (P_idx + 45) % 7\n    P_prime = weekday_name(P_prime_idx)\n    # On P' morning, package was out for delivery Y' days ago\n    Q_idx = (P_prime_idx - (Y_prime % 7)) % 7\n    Q = weekday_name(Q_idx)\n\n    # Question 4: Z' = Z - 1984, Q' = 75 days after Q\n    Z_prime = Z - 1984\n    Q_prime_idx = (Q_idx + 75) % 7\n    Q_prime = weekday_name(Q_prime_idx)\n\n    # On Q' before noon, deadline is in exactly Z' hours\n    # \"Before noon\" is any time from 0:00 to 11:59, so the deadline could be on:\n    # - Q' if Z' < 12\n    # - Q'+1 if 12 <= Z' < 36\n    # - Q'+2 if 36 <= Z' < 60, etc.\n    # But since \"before noon\" could be any time in that range, the deadline could fall on up to two days:\n    # - If Z' is not a multiple of 24, the deadline could be on Q' or Q'+1\n    # - If Z' is a multiple of 24, the deadline could be on Q' or Q'+1 (since 0:00 + 24h = next day 0:00)\n    # So, for all t in [0, 12), deadline is Q'+(Z'//24)\n    # for t in [0, 12), deadline is Q'+(Z'//24) if Z'%24 < 12, else Q'+(Z'//24)+1\n    # But since \"before noon\" is a range, the deadline could be on Q'+(Z'//24) or Q'+(Z'//24)+1\n\n    # Let's compute all possible days:\n    days = set()\n    for hour in range(0, 12):  # 0:00 to 11:59\n        deadline_offset = (Z_prime + hour) // 24\n        day_idx = (Q_prime_idx + deadline_offset) % 7\n        days.add(weekday_name(day_idx))\n    answer_list = sorted(days)\n\n    return answer_list\n```\nThis code now robustly handles the \"before noon\" ambiguity and uses modular arithmetic for all day-of-week calculations.",
+      "metadata": {
+        "component": "solver",
+        "title": "\ud83e\udde0 Solver (iteration 1) \u00b7 OpenAIModel"
+      }
+    },
+    {
+      "role": "assistant",
+      "content": "1. **Correctness of Date Calculation for Question 1:**  \n   The code calculates the date 17 months before 09-13-2011 correctly, resulting in 04/13/2010. It then assigns X, Y, Z as the month, day, and year, respectively. This is correct.\n\n2. **Correctness of Day-of-Week Calculations:**  \n   The code correctly computes the day of the week for each step using modular arithmetic and the calendar module. The logic for adding days and wrapping around the week is sound.\n\n3. **Handling of \"Before Noon\" Range in Question 4:**  \n   The code iterates over all possible hours from 0 to 11 (representing \"before noon\") and computes the possible deadline days, collecting all unique results. This approach is correct and ensures all possible days are considered.\n\n4. **Output Format:**  \n   The code returns the answer as a sorted list of days, as required by the question.\n\n5. **No Unused or Incorrect Returns:**  \n   The code does not return None and does not print instead of returning.\n\n6. **No Simpler Solution:**  \n   The code is already quite direct and clear for the problem's requirements.\n\n**Summary:**  \nThere are no correctness or logic issues in the code. The code is input-dependent, uses the extracted symbols, and returns the answer in the required format. The output of `['Monday']` is correct for the given input. No improvements are necessary.",
+      "metadata": {
+        "component": "critic",
+        "title": "\ud83e\uddfe Critic (iteration 2) \u00b7 AI Code Reviewer"
+      }
+    },
+    {
+      "role": "assistant",
+      "content": "FINISHED",
+      "metadata": {
+        "component": "solver",
+        "title": "\ud83e\udde0 Solver (iteration 2) \u00b7 OpenAIModel"
+      }
+    },
+    {
+      "role": "assistant",
+      "content": "**Final Answer:** FINAL ANSWER: ['Monday']\n\n**Method:** Iterative coding",
+      "metadata": {
+        "component": "summary",
+        "title": "Summary"
+      }
+    }
+  ],
+  "symbols": {
+    "question1": {
+      "current_date": "09-13-2011",
+      "months_before": 17,
+      "output_format": "mm/dd/yyyy"
+    },
+    "question2": {
+      "today": "Sunday",
+      "days_until_arrival": "X_prime",
+      "output": "day_of_week"
+    },
+    "question3": {
+      "days_ago": "Y_prime",
+      "reference_day": "P_prime",
+      "output": "day_of_week"
+    },
+    "question4": {
+      "hours_until_deadline": "Z_prime",
+      "reference_day": "Q_prime",
+      "output": "alphabetical_list_of_days"
+    }
+  },
+  "code": "\ndef solve(symbols):\n    import calendar\n\n    # Helper: get weekday index from name\n    def weekday_index(name):\n        return list(calendar.day_name).index(name)\n\n    # Helper: get weekday name from index\n    def weekday_name(idx):\n        return list(calendar.day_name)[idx % 7]\n\n    # Question 1: Subtract 17 months from 09-13-2011\n    m, d, y = 9, 13, 2011\n    months_before = 17\n    total_months = y * 12 + m - 1\n    new_total_months = total_months - months_before\n    new_y = new_total_months // 12\n    new_m = new_total_months % 12 + 1\n    # Handle day overflow\n    import calendar\n    last_day = calendar.monthrange(new_y, new_m)[1]\n    new_d = min(d, last_day)\n    X, Y, Z = new_m, new_d, new_y\n\n    # Question 2: X' = X + 10, today is Sunday\n    X_prime = X + 10\n    today_idx = weekday_index(\"Sunday\")\n    P_idx = (today_idx + X_prime) % 7\n    P = weekday_name(P_idx)\n\n    # Question 3: Y' = Y + 16, P' = 45 days after P\n    Y_prime = Y + 16\n    P_prime_idx = (P_idx + 45) % 7\n    P_prime = weekday_name(P_prime_idx)\n    # On P' morning, package was out for delivery Y' days ago\n    Q_idx = (P_prime_idx - (Y_prime % 7)) % 7\n    Q = weekday_name(Q_idx)\n\n    # Question 4: Z' = Z - 1984, Q' = 75 days after Q\n    Z_prime = Z - 1984\n    Q_prime_idx = (Q_idx + 75) % 7\n    Q_prime = weekday_name(Q_prime_idx)\n\n    # On Q' before noon, deadline is in exactly Z' hours\n    # \"Before noon\" is any time from 0:00 to 11:59, so the deadline could be on:\n    # - Q' if Z' < 12\n    # - Q'+1 if 12 <= Z' < 36\n    # - Q'+2 if 36 <= Z' < 60, etc.\n    # But since \"before noon\" could be any time in that range, the deadline could fall on up to two days:\n    # - If Z' is not a multiple of 24, the deadline could be on Q' or Q'+1\n    # - If Z' is a multiple of 24, the deadline could be on Q' or Q'+1 (since 0:00 + 24h = next day 0:00)\n    # So, for all t in [0, 12), deadline is Q'+(Z'//24)\n    # for t in [0, 12), deadline is Q'+(Z'//24) if Z'%24 < 12, else Q'+(Z'//24)+1\n    # But since \"before noon\" is a range, the deadline could be on Q'+(Z'//24) or Q'+(Z'//24)+1\n\n    # Let's compute all possible days:\n    days = set()\n    for hour in range(0, 12):  # 0:00 to 11:59\n        deadline_offset = (Z_prime + hour) // 24\n        day_idx = (Q_prime_idx + deadline_offset) % 7\n        days.add(weekday_name(day_idx))\n    answer_list = sorted(days)\n\n    return answer_list\n",
+  "status": "\u2705 Completed (iterative coding).",
+  "method": "Iterative coding",
+  "decision": {
+    "use_code": true,
+    "scores": [
+      0.6,
+      0.5,
+      0.7,
+      0.7,
+      0.9,
+      0.8,
+      0.95,
+      0.8,
+      0.85,
+      0.75
+    ],
+    "average_score": 0.755,
+    "raw_response": "Let's reason through each criterion for the given TARGET QUESTION:\n\n**1. Simple Formalizability**  \nThe question is a multi-step, chained logic problem involving date arithmetic, day-of-week calculations, and variable substitutions. Each step is deterministic and can be formalized, but the chaining and variable passing increase complexity. While each sub-question is formalizable, the risk of misassigning variables or miscalculating offsets is nontrivial.  \n**Probability:** 0.6\n\n**2. Straightforward Executability**  \nWriting code for date arithmetic and day-of-week calculations is feasible using Python's `datetime` module. However, the multi-step variable passing and the need to parse and format dates precisely (e.g., mm/dd/yyyy) introduce room for subtle bugs. A first attempt may miss a variable or misinterpret a step.  \n**Probability:** 0.5\n\n**3. Robust Systematic Search**  \nThe problem does not require search per se, but systematic step-by-step calculation. Code can reliably perform these steps if implemented correctly, but the risk is in mis-sequencing or misapplying the variable transformations.  \n**Probability:** 0.7\n\n**4. Manageable State Representation**  \nAll variables (dates, days, offsets) can be represented as variables in code. However, the chain of dependencies and variable renaming (X, X', etc.) could lead to confusion or misassignment. Still, code can track these if carefully written.  \n**Probability:** 0.7\n\n**5. Structured Knowledge Encoding**  \nAll required knowledge (date arithmetic, day-of-week calculation, variable manipulation) can be encoded in code using standard libraries. No external or intuitive knowledge is needed.  \n**Probability:** 0.9\n\n**6. Hallucination Risk Reduction**  \nCode execution will follow the logic as written, reducing the risk of hallucinating steps or making unwarranted assumptions. However, if the code is written with a misinterpretation, the error will propagate. Still, code is less likely to hallucinate than chain-of-thought.  \n**Probability:** 0.8\n\n**7. Arithmetic and Data Processing Advantage**  \nDate arithmetic and day-of-week calculations are error-prone for humans but trivial for code using the right libraries. Code has a clear advantage here.  \n**Probability:** 0.95\n\n**8. Branching and Case Handling Advantage**  \nThere are not many branches, but there are multiple chained steps and variable substitutions. Code can systematically handle these, but the main risk is in mis-sequencing, not in missing branches.  \n**Probability:** 0.8\n\n**9. Algorithmic Reliability Over Heuristics**  \nA deterministic algorithm in code is likely to be more reliable than human reasoning for this type of chained, arithmetic-heavy problem, provided the logic is implemented correctly.  \n**Probability:** 0.85\n\n**10. Overall Comparative Success**  \nConsidering all factors, code is likely to be more reliable than chain-of-thought for this problem, but the risk of misassigning variables or mis-sequencing steps is non-negligible.  \n**Probability:** 0.75\n\n---\n\nFINAL ANSWER:\n[0.6, 0.5, 0.7, 0.7, 0.9, 0.8, 0.95, 0.8, 0.85, 0.75]",
+    "prompt": [
+      {
+        "role": "user",
+        "content": [
+          {
+            "type": "text",
+            "text": "You will self-reflect to estimate whether you are more likely to correctly solve a given target question by writing executable Python code or by using chain-of-thought (natural-language) reasoning.\n\n**IMPORTANT:**\n- This is a hypothetical evaluation.\n- **You must NOT attempt to answer, solve, write code, or reason through the target question yet.**\n- Instead, you must reflect carefully and conservatively on your expected ability if you were to attempt solving the question through either method.\n\nSolution Expectations:\n- You may assume standard library modules are allowed for code.\n- You may NOT call external services, APIs, databases, or other LLMs.\n- The code must be self-contained and executable without internet access.\n- Chain-of-thought reasoning must be clear, logically sound, and internally verifiable without external tools.\n\n**CRITICAL GUIDANCE:**\n- **Be cautious, not optimistic.**  \n  Overestimating your capabilities will lead to choosing a method you cannot successfully complete.\n- **If you feel any uncertainty, complexity, or ambiguity, lower your probability accordingly.**\n- **Assume that even small mistakes can cause failure** when writing code or reasoning through complex tasks.\n- **Use conservative estimates.**\n- If unsure between two options, **prefer lower probabilities rather than guessing high**.\n\nHere are the self-reflection sub-questions you must answer hypothetically:\n\n1. **Simple Formalizability** \u2014 *What is the probability that the full solution can be easily and directly expressed as simple, deterministic code, without needing complex transformations or deep insight?*\n\n2. **Straightforward Executability** \u2014 *What is the probability that a first attempt at writing code would execute correctly without needing debugging, even if the problem has subtle or complex aspects?*\n\n3. **Robust Systematic Search** \u2014 *What is the probability that coding a systematic method (like brute-force search or recursion) would reliably find the correct answer, without missing hidden constraints or introducing edge-case errors?*\n\n4. **Manageable State Representation** \u2014 *What is the probability that all intermediate concepts, variables, and conditions can be simply and explicitly represented in code, without requiring difficult or error-prone state tracking?*\n\n5. **Structured Knowledge Encoding** \u2014 *What is the probability that all required background knowledge can be neatly encoded in code (e.g., as rules, formulas, or data), rather than needing flexible, intuitive understanding better suited to reasoning?*\n\n6. **Hallucination Risk Reduction** \u2014 *What is the probability that code execution would more reliably avoid fabricated steps or unwarranted assumptions compared to chain-of-thought reasoning?*\n\n7. **Arithmetic and Data Processing Advantage** \u2014 *What is the probability that the problem requires extensive or error-prone arithmetic/data handling that code could perform perfectly, but that chain-of-thought would likely fumble?*\n\n8. **Branching and Case Handling Advantage** \u2014 *What is the probability that the solution involves many branching conditions, special cases, or exceptions that code can handle systematically but chain-of-thought might overlook?*\n\n9. **Algorithmic Reliability Over Heuristics** \u2014 *What is the probability that following a deterministic algorithm in code would reach the correct answer more reliably than relying on intuitive or heuristic chain-of-thought reasoning?*\n\n10. **Overall Comparative Success** \u2014 *Considering all factors, what is the probability that code will ultimately produce a correct solution more reliably than chain-of-thought reasoning for this question?*\n\nAfter thoroughly reasoning through each criterion:\n\n- Output a single list of 10 probability scores (each between 0 and 1) as your FINAL ANSWER, in order:\n  - Scores 1\u201310 correspond to the ten sub-questions above.\n\n**Additional Instructions:**\n- Explicitly reason through each criterion carefully before giving a probability.\n- If uncertain or if the problem seems complex, favor lower probabilities to reflect the difficulty.\n- Make sure to put only the list after FINAL ANSWER.\n- **Under no circumstances should you write, sketch, pseudocode, or attempt any part of the solution itself during this reflection phase.**\n\nTARGET QUESTION:\nAt the end of your response, output only the list of 10 probabilities inside square brackets after the text 'FINAL ANSWER:'."
+          },
+          {
+            "type": "text",
+            "text": "TARGET QUESTION:\nLet the answer to Question1 be X/Y/Z.\n\nQuestion1: If the current date is 09-13-2011, what is the date 17 months before now? Your answer should be the date in the mm/dd/yyyy format (for example, 06/23/2021).\n\nLet X' = X + 10.\n\nLet the answer to Question2 be P.\n\nQuestion2: Today is Sunday and my parents arrive in X' days. On what day of the week do my parents arrive? Your answer should be the day of the week (for example, Sunday).\n\nLet Y' = Y + 16 and let P' be the day of the week 45 days after P.\n\nLet the answer to Question3 be Q.\n\nQuestion3: On P' morning, I was told that the package was out for delivery Y' days ago. On what day of the week was the package out for delivery? Your answer should be the day of the week.\n\nLet Z' = Z - 1984 and let Q' be the day of the week 75 days after Q.\n\nUse these values to solve Question4.\n\nQuestion4: On Q' before noon, I received a text saying my deadline is in exactly Z' hours. On what day(s) of the week could the deadline be? Your answer should be an ordered list with alphabetically ordered items (for example, [answer1, answer2, ...])."
+          }
+        ]
+      }
+    ],
+    "error": null
+  },
+  "steps": [
+    {
+      "step": "mode_selection",
+      "message": "Choosing between chain-of-thought reasoning and iterative coding\u2026",
+      "iteration": null,
+      "prompt_details": {
+        "description": "Choosing between chain-of-thought and iterative coding",
+        "conversation": [
+          {
+            "role": "user",
+            "content": [
+              {
+                "type": "text",
+                "text": "You will self-reflect to estimate whether you are more likely to correctly solve a given target question by writing executable Python code or by using chain-of-thought (natural-language) reasoning.\n\n**IMPORTANT:**\n- This is a hypothetical evaluation.\n- **You must NOT attempt to answer, solve, write code, or reason through the target question yet.**\n- Instead, you must reflect carefully and conservatively on your expected ability if you were to attempt solving the question through either method.\n\nSolution Expectations:\n- You may assume standard library modules are allowed for code.\n- You may NOT call external services, APIs, databases, or other LLMs.\n- The code must be self-contained and executable without internet access.\n- Chain-of-thought reasoning must be clear, logically sound, and internally verifiable without external tools.\n\n**CRITICAL GUIDANCE:**\n- **Be cautious, not optimistic.**  \n  Overestimating your capabilities will lead to choosing a method you cannot successfully complete.\n- **If you feel any uncertainty, complexity, or ambiguity, lower your probability accordingly.**\n- **Assume that even small mistakes can cause failure** when writing code or reasoning through complex tasks.\n- **Use conservative estimates.**\n- If unsure between two options, **prefer lower probabilities rather than guessing high**.\n\nHere are the self-reflection sub-questions you must answer hypothetically:\n\n1. **Simple Formalizability** \u2014 *What is the probability that the full solution can be easily and directly expressed as simple, deterministic code, without needing complex transformations or deep insight?*\n\n2. **Straightforward Executability** \u2014 *What is the probability that a first attempt at writing code would execute correctly without needing debugging, even if the problem has subtle or complex aspects?*\n\n3. **Robust Systematic Search** \u2014 *What is the probability that coding a systematic method (like brute-force search or recursion) would reliably find the correct answer, without missing hidden constraints or introducing edge-case errors?*\n\n4. **Manageable State Representation** \u2014 *What is the probability that all intermediate concepts, variables, and conditions can be simply and explicitly represented in code, without requiring difficult or error-prone state tracking?*\n\n5. **Structured Knowledge Encoding** \u2014 *What is the probability that all required background knowledge can be neatly encoded in code (e.g., as rules, formulas, or data), rather than needing flexible, intuitive understanding better suited to reasoning?*\n\n6. **Hallucination Risk Reduction** \u2014 *What is the probability that code execution would more reliably avoid fabricated steps or unwarranted assumptions compared to chain-of-thought reasoning?*\n\n7. **Arithmetic and Data Processing Advantage** \u2014 *What is the probability that the problem requires extensive or error-prone arithmetic/data handling that code could perform perfectly, but that chain-of-thought would likely fumble?*\n\n8. **Branching and Case Handling Advantage** \u2014 *What is the probability that the solution involves many branching conditions, special cases, or exceptions that code can handle systematically but chain-of-thought might overlook?*\n\n9. **Algorithmic Reliability Over Heuristics** \u2014 *What is the probability that following a deterministic algorithm in code would reach the correct answer more reliably than relying on intuitive or heuristic chain-of-thought reasoning?*\n\n10. **Overall Comparative Success** \u2014 *Considering all factors, what is the probability that code will ultimately produce a correct solution more reliably than chain-of-thought reasoning for this question?*\n\nAfter thoroughly reasoning through each criterion:\n\n- Output a single list of 10 probability scores (each between 0 and 1) as your FINAL ANSWER, in order:\n  - Scores 1\u201310 correspond to the ten sub-questions above.\n\n**Additional Instructions:**\n- Explicitly reason through each criterion carefully before giving a probability.\n- If uncertain or if the problem seems complex, favor lower probabilities to reflect the difficulty.\n- Make sure to put only the list after FINAL ANSWER.\n- **Under no circumstances should you write, sketch, pseudocode, or attempt any part of the solution itself during this reflection phase.**\n\nTARGET QUESTION:\nAt the end of your response, output only the list of 10 probabilities inside square brackets after the text 'FINAL ANSWER:'."
+              },
+              {
+                "type": "text",
+                "text": "TARGET QUESTION:\nLet the answer to Question1 be X/Y/Z.\n\nQuestion1: If the current date is 09-13-2011, what is the date 17 months before now? Your answer should be the date in the mm/dd/yyyy format (for example, 06/23/2021).\n\nLet X' = X + 10.\n\nLet the answer to Question2 be P.\n\nQuestion2: Today is Sunday and my parents arrive in X' days. On what day of the week do my parents arrive? Your answer should be the day of the week (for example, Sunday).\n\nLet Y' = Y + 16 and let P' be the day of the week 45 days after P.\n\nLet the answer to Question3 be Q.\n\nQuestion3: On P' morning, I was told that the package was out for delivery Y' days ago. On what day of the week was the package out for delivery? Your answer should be the day of the week.\n\nLet Z' = Z - 1984 and let Q' be the day of the week 75 days after Q.\n\nUse these values to solve Question4.\n\nQuestion4: On Q' before noon, I received a text saying my deadline is in exactly Z' hours. On what day(s) of the week could the deadline be? Your answer should be an ordered list with alphabetically ordered items (for example, [answer1, answer2, ...])."
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "step": "mode_selection",
+      "message": "Average code suitability score: 0.76. Proceeding with iterative code generation.",
+      "iteration": null,
+      "prompt_details": {
+        "description": "Choosing between chain-of-thought and iterative coding",
+        "conversation": [
+          {
+            "role": "user",
+            "content": [
+              {
+                "type": "text",
+                "text": "You will self-reflect to estimate whether you are more likely to correctly solve a given target question by writing executable Python code or by using chain-of-thought (natural-language) reasoning.\n\n**IMPORTANT:**\n- This is a hypothetical evaluation.\n- **You must NOT attempt to answer, solve, write code, or reason through the target question yet.**\n- Instead, you must reflect carefully and conservatively on your expected ability if you were to attempt solving the question through either method.\n\nSolution Expectations:\n- You may assume standard library modules are allowed for code.\n- You may NOT call external services, APIs, databases, or other LLMs.\n- The code must be self-contained and executable without internet access.\n- Chain-of-thought reasoning must be clear, logically sound, and internally verifiable without external tools.\n\n**CRITICAL GUIDANCE:**\n- **Be cautious, not optimistic.**  \n  Overestimating your capabilities will lead to choosing a method you cannot successfully complete.\n- **If you feel any uncertainty, complexity, or ambiguity, lower your probability accordingly.**\n- **Assume that even small mistakes can cause failure** when writing code or reasoning through complex tasks.\n- **Use conservative estimates.**\n- If unsure between two options, **prefer lower probabilities rather than guessing high**.\n\nHere are the self-reflection sub-questions you must answer hypothetically:\n\n1. **Simple Formalizability** \u2014 *What is the probability that the full solution can be easily and directly expressed as simple, deterministic code, without needing complex transformations or deep insight?*\n\n2. **Straightforward Executability** \u2014 *What is the probability that a first attempt at writing code would execute correctly without needing debugging, even if the problem has subtle or complex aspects?*\n\n3. **Robust Systematic Search** \u2014 *What is the probability that coding a systematic method (like brute-force search or recursion) would reliably find the correct answer, without missing hidden constraints or introducing edge-case errors?*\n\n4. **Manageable State Representation** \u2014 *What is the probability that all intermediate concepts, variables, and conditions can be simply and explicitly represented in code, without requiring difficult or error-prone state tracking?*\n\n5. **Structured Knowledge Encoding** \u2014 *What is the probability that all required background knowledge can be neatly encoded in code (e.g., as rules, formulas, or data), rather than needing flexible, intuitive understanding better suited to reasoning?*\n\n6. **Hallucination Risk Reduction** \u2014 *What is the probability that code execution would more reliably avoid fabricated steps or unwarranted assumptions compared to chain-of-thought reasoning?*\n\n7. **Arithmetic and Data Processing Advantage** \u2014 *What is the probability that the problem requires extensive or error-prone arithmetic/data handling that code could perform perfectly, but that chain-of-thought would likely fumble?*\n\n8. **Branching and Case Handling Advantage** \u2014 *What is the probability that the solution involves many branching conditions, special cases, or exceptions that code can handle systematically but chain-of-thought might overlook?*\n\n9. **Algorithmic Reliability Over Heuristics** \u2014 *What is the probability that following a deterministic algorithm in code would reach the correct answer more reliably than relying on intuitive or heuristic chain-of-thought reasoning?*\n\n10. **Overall Comparative Success** \u2014 *Considering all factors, what is the probability that code will ultimately produce a correct solution more reliably than chain-of-thought reasoning for this question?*\n\nAfter thoroughly reasoning through each criterion:\n\n- Output a single list of 10 probability scores (each between 0 and 1) as your FINAL ANSWER, in order:\n  - Scores 1\u201310 correspond to the ten sub-questions above.\n\n**Additional Instructions:**\n- Explicitly reason through each criterion carefully before giving a probability.\n- If uncertain or if the problem seems complex, favor lower probabilities to reflect the difficulty.\n- Make sure to put only the list after FINAL ANSWER.\n- **Under no circumstances should you write, sketch, pseudocode, or attempt any part of the solution itself during this reflection phase.**\n\nTARGET QUESTION:\nAt the end of your response, output only the list of 10 probabilities inside square brackets after the text 'FINAL ANSWER:'."
+              },
+              {
+                "type": "text",
+                "text": "TARGET QUESTION:\nLet the answer to Question1 be X/Y/Z.\n\nQuestion1: If the current date is 09-13-2011, what is the date 17 months before now? Your answer should be the date in the mm/dd/yyyy format (for example, 06/23/2021).\n\nLet X' = X + 10.\n\nLet the answer to Question2 be P.\n\nQuestion2: Today is Sunday and my parents arrive in X' days. On what day of the week do my parents arrive? Your answer should be the day of the week (for example, Sunday).\n\nLet Y' = Y + 16 and let P' be the day of the week 45 days after P.\n\nLet the answer to Question3 be Q.\n\nQuestion3: On P' morning, I was told that the package was out for delivery Y' days ago. On what day of the week was the package out for delivery? Your answer should be the day of the week.\n\nLet Z' = Z - 1984 and let Q' be the day of the week 75 days after Q.\n\nUse these values to solve Question4.\n\nQuestion4: On Q' before noon, I received a text saying my deadline is in exactly Z' hours. On what day(s) of the week could the deadline be? Your answer should be an ordered list with alphabetically ordered items (for example, [answer1, answer2, ...])."
+              }
+            ]
+          }
+        ],
+        "raw_response": "Let's reason through each criterion for the given TARGET QUESTION:\n\n**1. Simple Formalizability**  \nThe question is a multi-step, chained logic problem involving date arithmetic, day-of-week calculations, and variable substitutions. Each step is deterministic and can be formalized, but the chaining and variable passing increase complexity. While each sub-question is formalizable, the risk of misassigning variables or miscalculating offsets is nontrivial.  \n**Probability:** 0.6\n\n**2. Straightforward Executability**  \nWriting code for date arithmetic and day-of-week calculations is feasible using Python's `datetime` module. However, the multi-step variable passing and the need to parse and format dates precisely (e.g., mm/dd/yyyy) introduce room for subtle bugs. A first attempt may miss a variable or misinterpret a step.  \n**Probability:** 0.5\n\n**3. Robust Systematic Search**  \nThe problem does not require search per se, but systematic step-by-step calculation. Code can reliably perform these steps if implemented correctly, but the risk is in mis-sequencing or misapplying the variable transformations.  \n**Probability:** 0.7\n\n**4. Manageable State Representation**  \nAll variables (dates, days, offsets) can be represented as variables in code. However, the chain of dependencies and variable renaming (X, X', etc.) could lead to confusion or misassignment. Still, code can track these if carefully written.  \n**Probability:** 0.7\n\n**5. Structured Knowledge Encoding**  \nAll required knowledge (date arithmetic, day-of-week calculation, variable manipulation) can be encoded in code using standard libraries. No external or intuitive knowledge is needed.  \n**Probability:** 0.9\n\n**6. Hallucination Risk Reduction**  \nCode execution will follow the logic as written, reducing the risk of hallucinating steps or making unwarranted assumptions. However, if the code is written with a misinterpretation, the error will propagate. Still, code is less likely to hallucinate than chain-of-thought.  \n**Probability:** 0.8\n\n**7. Arithmetic and Data Processing Advantage**  \nDate arithmetic and day-of-week calculations are error-prone for humans but trivial for code using the right libraries. Code has a clear advantage here.  \n**Probability:** 0.95\n\n**8. Branching and Case Handling Advantage**  \nThere are not many branches, but there are multiple chained steps and variable substitutions. Code can systematically handle these, but the main risk is in mis-sequencing, not in missing branches.  \n**Probability:** 0.8\n\n**9. Algorithmic Reliability Over Heuristics**  \nA deterministic algorithm in code is likely to be more reliable than human reasoning for this type of chained, arithmetic-heavy problem, provided the logic is implemented correctly.  \n**Probability:** 0.85\n\n**10. Overall Comparative Success**  \nConsidering all factors, code is likely to be more reliable than chain-of-thought for this problem, but the risk of misassigning variables or mis-sequencing steps is non-negligible.  \n**Probability:** 0.75\n\n---\n\nFINAL ANSWER:\n[0.6, 0.5, 0.7, 0.7, 0.9, 0.8, 0.95, 0.8, 0.85, 0.75]",
+        "error": null
+      }
+    },
+    {
+      "step": "initial_generation",
+      "message": "Generating first solution\u2026",
+      "iteration": null,
+      "prompt_details": {
+        "description": "Initial solution generation",
+        "conversation": [
+          {
+            "role": "system",
+            "content": "You will be given a question and you must answer it by extracting relevant symbols in JSON format and then writing a Python program to calculate the final answer.\n\nYou MUST always plan extensively before outputting any symbols or code.\n\nYou MUST iterate and keep going until the problem is solved.\n\n# Workflow\n\n## Problem Solving Steps\n1. First extract relevant information from the input as JSON. Try to represent the relevant information in as much of a structured format as possible to help with further reasoning/processing.\n2. Using the information extracted, determine a reasonable approach to solving the problem using code, such that executing the code will return the final answer.\n3. Write a Python program to calculate and return the final answer. Use comments to explain the structure of the code and do not use a main() function.\nThe JSON must be enclosed in a markdown code block and the Python function must be in a separate markdown code block and be called `solve` and accept a single input called `symbols` representing the JSON information extracted. Do not include any `if __name__ == \"__main__\"` statement and you can assume the JSON will be loaded into the variable called `symbols` by the user.\nThe Python code should not just return the answer or perform all reasoning in comments and instead leverage the code itself to perform the reasoning.\nBe careful that the code returns the answer as expected by the question, for instance, if the question is multiple choice, the code must return the choice as described in the question.\nBe sure to always output a JSON code block and a Python code block.\nMake sure to follow these formatting requirements exactly.\n"
+          },
+          {
+            "role": "user",
+            "content": "Let the answer to Question1 be X/Y/Z.\n\nQuestion1: If the current date is 09-13-2011, what is the date 17 months before now? Your answer should be the date in the mm/dd/yyyy format (for example, 06/23/2021).\n\nLet X' = X + 10.\n\nLet the answer to Question2 be P.\n\nQuestion2: Today is Sunday and my parents arrive in X' days. On what day of the week do my parents arrive? Your answer should be the day of the week (for example, Sunday).\n\nLet Y' = Y + 16 and let P' be the day of the week 45 days after P.\n\nLet the answer to Question3 be Q.\n\nQuestion3: On P' morning, I was told that the package was out for delivery Y' days ago. On what day of the week was the package out for delivery? Your answer should be the day of the week.\n\nLet Z' = Z - 1984 and let Q' be the day of the week 75 days after Q.\n\nUse these values to solve Question4.\n\nQuestion4: On Q' before noon, I received a text saying my deadline is in exactly Z' hours. On what day(s) of the week could the deadline be? Your answer should be an ordered list with alphabetically ordered items (for example, [answer1, answer2, ...])."
+          }
+        ]
+      }
+    },
+    {
+      "step": "code_checking",
+      "message": "Running code critic (iteration 1)...",
+      "iteration": 1,
+      "prompt_details": {
+        "description": "Code quality analysis and critique (iteration 1)",
+        "conversation": [
+          {
+            "role": "system",
+            "content": "You will be given a question and a code solution and you must judge the quality of the code for solving the problem.\n                           \nLook for any of the following issues in the code:\n- The code should be input dependent, meaning it should use the input symbols to compute the answer. It is OK for the code to be specialized to the input (i.e. the reasoning itself may be hardcoded, like a decision tree where the branches are hardcoded).\n- The code should not return None unless \"None\" is the correct answer.\n- The code should return the answer, not just print it. If the question asks for a multiple choice answer, the code should return the choice as described in the question.\n- There should not be any example usage of the code.\n- If there is a simpler way to solve the problem, please describe it.\n- If there are any clear bugs in the code which impact the correctness of the answer, please describe them.\n- If there are any issues with the extracted symbols, please describe them as well, but separate these issues from the issues with the code.\n- If it is possible to sanity check the output of the code, please do so and describe if there are any obvious issues with the output and how the code could be fixed to avoid these issues.\n\n\n\n\nAfter analyzing the code in depth, output a concrete and concise summary of the issues that are present, do not include any code examples. Please order the issues by impact on answer correctness."
+          },
+          {
+            "role": "user",
+            "content": "Question: Let the answer to Question1 be X/Y/Z.\n\nQuestion1: If the current date is 09-13-2011, what is the date 17 months before now? Your answer should be the date in the mm/dd/yyyy format (for example, 06/23/2021).\n\nLet X' = X + 10.\n\nLet the answer to Question2 be P.\n\nQuestion2: Today is Sunday and my parents arrive in X' days. On what day of the week do my parents arrive? Your answer should be the day of the week (for example, Sunday).\n\nLet Y' = Y + 16 and let P' be the day of the week 45 days after P.\n\nLet the answer to Question3 be Q.\n\nQuestion3: On P' morning, I was told that the package was out for delivery Y' days ago. On what day of the week was the package out for delivery? Your answer should be the day of the week.\n\nLet Z' = Z - 1984 and let Q' be the day of the week 75 days after Q.\n\nUse these values to solve Question4.\n\nQuestion4: On Q' before noon, I received a text saying my deadline is in exactly Z' hours. On what day(s) of the week could the deadline be? Your answer should be an ordered list with alphabetically ordered items (for example, [answer1, answer2, ...]).\n\nThe following are extracted symbols from the question in JSON format followed by a Python program which takes the JSON as an argument called `symbols` and computes the answer.\n```json\n{\n  \"question1\": {\n    \"current_date\": \"09-13-2011\",\n    \"months_before\": 17,\n    \"output_format\": \"mm/dd/yyyy\"\n  },\n  \"question2\": {\n    \"today\": \"Sunday\",\n    \"days_until_arrival\": \"X_prime\",\n    \"output\": \"day_of_week\"\n  },\n  \"question3\": {\n    \"days_ago\": \"Y_prime\",\n    \"reference_day\": \"P_prime\",\n    \"output\": \"day_of_week\"\n  },\n  \"question4\": {\n    \"hours_until_deadline\": \"Z_prime\",\n    \"reference_day\": \"Q_prime\",\n    \"output\": \"alphabetical_list_of_days\"\n  }\n}\n```\n\n```python\n\ndef solve(symbols):\n    from datetime import datetime, timedelta\n    import calendar\n\n    # Helper to get day of week string\n    def day_of_week(dt):\n        return calendar.day_name[dt.weekday()]\n\n    # Helper to get day of week from string and offset\n    def day_of_week_from_name(name, offset):\n        days = list(calendar.day_name)\n        idx = days.index(name)\n        return days[(idx + offset) % 7]\n\n    # Question 1\n    current_date = datetime.strptime(symbols['question1']['current_date'], \"%m-%d-%Y\")\n    months_before = symbols['question1']['months_before']\n    # Subtract months\n    year = current_date.year\n    month = current_date.month\n    day = current_date.day\n    # Calculate new month and year\n    total_months = year * 12 + month - 1  # months since year 0\n    new_total_months = total_months - months_before\n    new_year = new_total_months // 12\n    new_month = new_total_months % 12 + 1\n    # Handle day overflow (e.g., 31st in a month with 30 days)\n    try:\n        new_date = datetime(new_year, new_month, day)\n    except ValueError:\n        # Use last day of the month\n        last_day = calendar.monthrange(new_year, new_month)[1]\n        new_date = datetime(new_year, new_month, last_day)\n    X = new_date.month\n    Y = new_date.day\n    Z = new_date.year\n\n    # Question 2\n    X_prime = X + 10\n    today_name = symbols['question2']['today']\n    # Find day of week after X' days\n    P = day_of_week_from_name(today_name, X_prime)\n\n    # Question 3\n    Y_prime = Y + 16\n    # P' is 45 days after P\n    # To get P's date, let's pick an arbitrary date that is a 'P' (since only the day of week matters)\n    # Let's use 2023-01-01 as a Sunday, then find the next P\n    base_date = datetime(2023, 1, 1)  # This is a Sunday\n    days_to_P = (list(calendar.day_name).index(P) - base_date.weekday()) % 7\n    P_date = base_date + timedelta(days=days_to_P)\n    P_prime_date = P_date + timedelta(days=45)\n    P_prime = day_of_week(P_prime_date)\n    # On P' morning, package was out for delivery Y' days ago\n    Q_date = P_prime_date - timedelta(days=Y_prime)\n    Q = day_of_week(Q_date)\n\n    # Question 4\n    Z_prime = Z - 1984\n    # Q' is 75 days after Q\n    # Find a date that is Q, then add 75 days\n    days_to_Q = (list(calendar.day_name).index(Q) - base_date.weekday()) % 7\n    Q_date_base = base_date + timedelta(days=days_to_Q)\n    Q_prime_date = Q_date_base + timedelta(days=75)\n    Q_prime = day_of_week(Q_prime_date)\n    # On Q' before noon, deadline is in Z' hours\n    # Z' hours from before noon (say, 11:59am) on Q'\n    # Find all possible days of the week the deadline could fall on\n    # Z' hours may not be a whole number of days, so the deadline could be on two days\n    # Let's assume \"before noon\" is 11:59am\n    Q_prime_datetime = datetime(2023, 1, 1, 11, 59)  # 2023-01-01 is a Sunday\n    days_to_Q_prime = (list(calendar.day_name).index(Q_prime) - Q_prime_datetime.weekday()) % 7\n    Q_prime_datetime = Q_prime_datetime + timedelta(days=days_to_Q_prime)\n    deadline_datetime = Q_prime_datetime + timedelta(hours=Z_prime)\n    # The deadline could be on the day of Q_prime or the next day if it crosses midnight\n    days = set()\n    days.add(calendar.day_name[Q_prime_datetime.weekday()])\n    if deadline_datetime.date() != Q_prime_datetime.date():\n        days.add(calendar.day_name[deadline_datetime.weekday()])\n    answer_list = sorted(list(days))\n\n    return answer_list\n\n```\n\nCode execution result:\n```\nReturn value: ['Monday', 'Sunday']\nStandard output: \nExceptions: None\n```\n\nOutput a concrete and concise summary of only the issues that are present, do not include any code examples.\n"
+          }
+        ]
+      }
+    },
+    {
+      "step": "refinement",
+      "message": "Refining solution (iteration 1)...",
+      "iteration": 1,
+      "prompt_details": {
+        "description": "Solution refinement (iteration 1)",
+        "conversation": [
+          {
+            "role": "system",
+            "content": "You will be given a question and you must answer it by extracting relevant symbols in JSON format and then writing a Python program to calculate the final answer.\n\nYou MUST always plan extensively before outputting any symbols or code.\n\nYou MUST iterate and keep going until the problem is solved.\n\n# Workflow\n\n## Problem Solving Steps\n1. First extract relevant information from the input as JSON. Try to represent the relevant information in as much of a structured format as possible to help with further reasoning/processing.\n2. Using the information extracted, determine a reasonable approach to solving the problem using code, such that executing the code will return the final answer.\n3. Write a Python program to calculate and return the final answer. Use comments to explain the structure of the code and do not use a main() function.\nThe JSON must be enclosed in a markdown code block and the Python function must be in a separate markdown code block and be called `solve` and accept a single input called `symbols` representing the JSON information extracted. Do not include any `if __name__ == \"__main__\"` statement and you can assume the JSON will be loaded into the variable called `symbols` by the user.\nThe Python code should not just return the answer or perform all reasoning in comments and instead leverage the code itself to perform the reasoning.\nBe careful that the code returns the answer as expected by the question, for instance, if the question is multiple choice, the code must return the choice as described in the question.\nBe sure to always output a JSON code block and a Python code block.\nMake sure to follow these formatting requirements exactly.\n"
+          },
+          {
+            "role": "user",
+            "content": "Let the answer to Question1 be X/Y/Z.\n\nQuestion1: If the current date is 09-13-2011, what is the date 17 months before now? Your answer should be the date in the mm/dd/yyyy format (for example, 06/23/2021).\n\nLet X' = X + 10.\n\nLet the answer to Question2 be P.\n\nQuestion2: Today is Sunday and my parents arrive in X' days. On what day of the week do my parents arrive? Your answer should be the day of the week (for example, Sunday).\n\nLet Y' = Y + 16 and let P' be the day of the week 45 days after P.\n\nLet the answer to Question3 be Q.\n\nQuestion3: On P' morning, I was told that the package was out for delivery Y' days ago. On what day of the week was the package out for delivery? Your answer should be the day of the week.\n\nLet Z' = Z - 1984 and let Q' be the day of the week 75 days after Q.\n\nUse these values to solve Question4.\n\nQuestion4: On Q' before noon, I received a text saying my deadline is in exactly Z' hours. On what day(s) of the week could the deadline be? Your answer should be an ordered list with alphabetically ordered items (for example, [answer1, answer2, ...])."
+          },
+          {
+            "role": "assistant",
+            "content": "Let's break down the problem step by step and extract all relevant information in a structured JSON format.\n\n## Step 1: Extracting Information\n\n### Question 1\n- Current date: 09-13-2011\n- Find the date 17 months before now.\n- Output format: mm/dd/yyyy\n- Let the answer be X/Y/Z, where X, Y, Z are the month, day, year of the answer.\n\n### Question 2\n- X' = X + 10\n- Today is Sunday.\n- Parents arrive in X' days.\n- What day of the week do they arrive? (P)\n\n### Question 3\n- Y' = Y + 16\n- P' = day of the week 45 days after P\n- On P' morning, told package was out for delivery Y' days ago.\n- What day of the week was the package out for delivery? (Q)\n\n### Question 4\n- Z' = Z - 1984\n- Q' = day of the week 75 days after Q\n- On Q' before noon, received text: deadline in exactly Z' hours.\n- On what day(s) of the week could the deadline be? (ordered, alphabetically)\n\n## Step 2: JSON Representation\n\n```json\n{\n  \"question1\": {\n    \"current_date\": \"09-13-2011\",\n    \"months_before\": 17,\n    \"output_format\": \"mm/dd/yyyy\"\n  },\n  \"question2\": {\n    \"today\": \"Sunday\",\n    \"days_until_arrival\": \"X_prime\",\n    \"output\": \"day_of_week\"\n  },\n  \"question3\": {\n    \"days_ago\": \"Y_prime\",\n    \"reference_day\": \"P_prime\",\n    \"output\": \"day_of_week\"\n  },\n  \"question4\": {\n    \"hours_until_deadline\": \"Z_prime\",\n    \"reference_day\": \"Q_prime\",\n    \"output\": \"alphabetical_list_of_days\"\n  }\n}\n```\n\n## Step 3: Plan for Python Code\n\n1. **Question 1**: Subtract 17 months from 09-13-2011, get X, Y, Z.\n2. **Question 2**: X' = X + 10. Starting from Sunday, add X' days, get P.\n3. **Question 3**: Y' = Y + 16. P' = 45 days after P. On P', package was out for delivery Y' days ago. Find the day of the week Q.\n4. **Question 4**: Z' = Z - 1984. Q' = 75 days after Q. On Q', deadline is in Z' hours. Find all possible days of the week the deadline could fall on, output as an alphabetically ordered list.\n\nNow, let's write the code to solve the problem step by step.\n\n```python\ndef solve(symbols):\n    from datetime import datetime, timedelta\n    import calendar\n\n    # Helper to get day of week string\n    def day_of_week(dt):\n        return calendar.day_name[dt.weekday()]\n\n    # Helper to get day of week from string and offset\n    def day_of_week_from_name(name, offset):\n        days = list(calendar.day_name)\n        idx = days.index(name)\n        return days[(idx + offset) % 7]\n\n    # Question 1\n    current_date = datetime.strptime(symbols['question1']['current_date'], \"%m-%d-%Y\")\n    months_before = symbols['question1']['months_before']\n    # Subtract months\n    year = current_date.year\n    month = current_date.month\n    day = current_date.day\n    # Calculate new month and year\n    total_months = year * 12 + month - 1  # months since year 0\n    new_total_months = total_months - months_before\n    new_year = new_total_months // 12\n    new_month = new_total_months % 12 + 1\n    # Handle day overflow (e.g., 31st in a month with 30 days)\n    try:\n        new_date = datetime(new_year, new_month, day)\n    except ValueError:\n        # Use last day of the month\n        last_day = calendar.monthrange(new_year, new_month)[1]\n        new_date = datetime(new_year, new_month, last_day)\n    X = new_date.month\n    Y = new_date.day\n    Z = new_date.year\n\n    # Question 2\n    X_prime = X + 10\n    today_name = symbols['question2']['today']\n    # Find day of week after X' days\n    P = day_of_week_from_name(today_name, X_prime)\n\n    # Question 3\n    Y_prime = Y + 16\n    # P' is 45 days after P\n    # To get P's date, let's pick an arbitrary date that is a 'P' (since only the day of week matters)\n    # Let's use 2023-01-01 as a Sunday, then find the next P\n    base_date = datetime(2023, 1, 1)  # This is a Sunday\n    days_to_P = (list(calendar.day_name).index(P) - base_date.weekday()) % 7\n    P_date = base_date + timedelta(days=days_to_P)\n    P_prime_date = P_date + timedelta(days=45)\n    P_prime = day_of_week(P_prime_date)\n    # On P' morning, package was out for delivery Y' days ago\n    Q_date = P_prime_date - timedelta(days=Y_prime)\n    Q = day_of_week(Q_date)\n\n    # Question 4\n    Z_prime = Z - 1984\n    # Q' is 75 days after Q\n    # Find a date that is Q, then add 75 days\n    days_to_Q = (list(calendar.day_name).index(Q) - base_date.weekday()) % 7\n    Q_date_base = base_date + timedelta(days=days_to_Q)\n    Q_prime_date = Q_date_base + timedelta(days=75)\n    Q_prime = day_of_week(Q_prime_date)\n    # On Q' before noon, deadline is in Z' hours\n    # Z' hours from before noon (say, 11:59am) on Q'\n    # Find all possible days of the week the deadline could fall on\n    # Z' hours may not be a whole number of days, so the deadline could be on two days\n    # Let's assume \"before noon\" is 11:59am\n    Q_prime_datetime = datetime(2023, 1, 1, 11, 59)  # 2023-01-01 is a Sunday\n    days_to_Q_prime = (list(calendar.day_name).index(Q_prime) - Q_prime_datetime.weekday()) % 7\n    Q_prime_datetime = Q_prime_datetime + timedelta(days=days_to_Q_prime)\n    deadline_datetime = Q_prime_datetime + timedelta(hours=Z_prime)\n    # The deadline could be on the day of Q_prime or the next day if it crosses midnight\n    days = set()\n    days.add(calendar.day_name[Q_prime_datetime.weekday()])\n    if deadline_datetime.date() != Q_prime_datetime.date():\n        days.add(calendar.day_name[deadline_datetime.weekday()])\n    answer_list = sorted(list(days))\n\n    return answer_list\n```\n"
+          },
+          {
+            "role": "user",
+            "content": "Please fix the issues with the code and symbols or output \"FINISHED\".\nThe following is the result of evaluating the above code with the extracted symbols.\n```\nReturn value: ['Monday', 'Sunday']\nStandard output: \nExceptions: None\n```\n\nThe following is the summary of issues found with the code or the extracted symbols by another model:\n```\n1. **Incorrect Handling of \"Before Noon\" Ambiguity:** The code assumes \"before noon\" is always 11:59am, which is arbitrary. The actual range for \"before noon\" is from 12:00am to 11:59am, so the deadline could fall on up to three days (the day before, the same day, or the next day), depending on the value of Z'. The code only considers the current and next day, potentially missing valid days.\n\n2. **Arbitrary Base Date for Day-of-Week Calculations:** The code uses January 1, 2023 (a Sunday) as a base date for all day-of-week calculations. While this works for relative day-of-week math, it is not robust if the weekday mapping changes or if the base date is not Sunday. This could lead to errors if the base date is changed or misunderstood.\n\n3. **Hardcoded Year in Q' Calculations:** The code uses 2023 as the year for Q' calculations, which is unrelated to the actual years involved in the problem. This is acceptable for day-of-week math but is not generalizable or clearly justified.\n\n4. **No Input Validation:** The code does not validate the input symbols or check for missing or malformed data, which could lead to runtime errors if the input format changes.\n\n5. **Unnecessary Complexity in Date Calculations:** The code overcomplicates the process by creating arbitrary dates to match days of the week, rather than simply using modular arithmetic on the weekday indices.\n\n6. **No Explanation or Comments for Key Steps:** Some steps, such as why 2023-01-01 is chosen or how the day overflow is handled, lack clear comments, making the logic harder to follow and verify.\n\nDespite these issues, the code produces a plausible answer for the given input, but the ambiguity in \"before noon\" and the arbitrary choices in date handling could lead to incorrect or incomplete results in other scenarios.\n```\n\nIf there are any issues which impact the correctness of the answer, please output code which does not have the issues. Before outputting any code, plan how the code will solve the problem and avoid the issues.\nIf stuck, try outputting different code to solve the problem in a different way.\nYou may also revise the extracted symbols. To do this, output the revised symbols in a JSON code block. Only include information in the JSON which is present in the original input to keep the code grounded in the specific problem. Some examples of symbol revisions are changing the names of certain symbols, providing further granularity, and adding information which was originally missed.\nIf everything is correct, output the word \"FINISHED\" and nothing else.\n"
+          }
+        ]
+      }
+    },
+    {
+      "step": "code_checking",
+      "message": "Running code critic (iteration 2)...",
+      "iteration": 2,
+      "prompt_details": {
+        "description": "Code quality analysis and critique (iteration 2)",
+        "conversation": [
+          {
+            "role": "system",
+            "content": "You will be given a question and a code solution and you must judge the quality of the code for solving the problem.\n                           \nLook for any of the following issues in the code:\n- The code should be input dependent, meaning it should use the input symbols to compute the answer. It is OK for the code to be specialized to the input (i.e. the reasoning itself may be hardcoded, like a decision tree where the branches are hardcoded).\n- The code should not return None unless \"None\" is the correct answer.\n- The code should return the answer, not just print it. If the question asks for a multiple choice answer, the code should return the choice as described in the question.\n- There should not be any example usage of the code.\n- If there is a simpler way to solve the problem, please describe it.\n- If there are any clear bugs in the code which impact the correctness of the answer, please describe them.\n- If there are any issues with the extracted symbols, please describe them as well, but separate these issues from the issues with the code.\n- If it is possible to sanity check the output of the code, please do so and describe if there are any obvious issues with the output and how the code could be fixed to avoid these issues.\n\n\n\n\nAfter analyzing the code in depth, output a concrete and concise summary of the issues that are present, do not include any code examples. Please order the issues by impact on answer correctness."
+          },
+          {
+            "role": "user",
+            "content": "Question: Let the answer to Question1 be X/Y/Z.\n\nQuestion1: If the current date is 09-13-2011, what is the date 17 months before now? Your answer should be the date in the mm/dd/yyyy format (for example, 06/23/2021).\n\nLet X' = X + 10.\n\nLet the answer to Question2 be P.\n\nQuestion2: Today is Sunday and my parents arrive in X' days. On what day of the week do my parents arrive? Your answer should be the day of the week (for example, Sunday).\n\nLet Y' = Y + 16 and let P' be the day of the week 45 days after P.\n\nLet the answer to Question3 be Q.\n\nQuestion3: On P' morning, I was told that the package was out for delivery Y' days ago. On what day of the week was the package out for delivery? Your answer should be the day of the week.\n\nLet Z' = Z - 1984 and let Q' be the day of the week 75 days after Q.\n\nUse these values to solve Question4.\n\nQuestion4: On Q' before noon, I received a text saying my deadline is in exactly Z' hours. On what day(s) of the week could the deadline be? Your answer should be an ordered list with alphabetically ordered items (for example, [answer1, answer2, ...]).\n\nThe following are extracted symbols from the question in JSON format followed by a Python program which takes the JSON as an argument called `symbols` and computes the answer.\n```json\n{\n  \"question1\": {\n    \"current_date\": \"09-13-2011\",\n    \"months_before\": 17,\n    \"output_format\": \"mm/dd/yyyy\"\n  },\n  \"question2\": {\n    \"today\": \"Sunday\",\n    \"days_until_arrival\": \"X_prime\",\n    \"output\": \"day_of_week\"\n  },\n  \"question3\": {\n    \"days_ago\": \"Y_prime\",\n    \"reference_day\": \"P_prime\",\n    \"output\": \"day_of_week\"\n  },\n  \"question4\": {\n    \"hours_until_deadline\": \"Z_prime\",\n    \"reference_day\": \"Q_prime\",\n    \"output\": \"alphabetical_list_of_days\"\n  }\n}\n```\n\n```python\n\ndef solve(symbols):\n    import calendar\n\n    # Helper: get weekday index from name\n    def weekday_index(name):\n        return list(calendar.day_name).index(name)\n\n    # Helper: get weekday name from index\n    def weekday_name(idx):\n        return list(calendar.day_name)[idx % 7]\n\n    # Question 1: Subtract 17 months from 09-13-2011\n    m, d, y = 9, 13, 2011\n    months_before = 17\n    total_months = y * 12 + m - 1\n    new_total_months = total_months - months_before\n    new_y = new_total_months // 12\n    new_m = new_total_months % 12 + 1\n    # Handle day overflow\n    import calendar\n    last_day = calendar.monthrange(new_y, new_m)[1]\n    new_d = min(d, last_day)\n    X, Y, Z = new_m, new_d, new_y\n\n    # Question 2: X' = X + 10, today is Sunday\n    X_prime = X + 10\n    today_idx = weekday_index(\"Sunday\")\n    P_idx = (today_idx + X_prime) % 7\n    P = weekday_name(P_idx)\n\n    # Question 3: Y' = Y + 16, P' = 45 days after P\n    Y_prime = Y + 16\n    P_prime_idx = (P_idx + 45) % 7\n    P_prime = weekday_name(P_prime_idx)\n    # On P' morning, package was out for delivery Y' days ago\n    Q_idx = (P_prime_idx - (Y_prime % 7)) % 7\n    Q = weekday_name(Q_idx)\n\n    # Question 4: Z' = Z - 1984, Q' = 75 days after Q\n    Z_prime = Z - 1984\n    Q_prime_idx = (Q_idx + 75) % 7\n    Q_prime = weekday_name(Q_prime_idx)\n\n    # On Q' before noon, deadline is in exactly Z' hours\n    # \"Before noon\" is any time from 0:00 to 11:59, so the deadline could be on:\n    # - Q' if Z' < 12\n    # - Q'+1 if 12 <= Z' < 36\n    # - Q'+2 if 36 <= Z' < 60, etc.\n    # But since \"before noon\" could be any time in that range, the deadline could fall on up to two days:\n    # - If Z' is not a multiple of 24, the deadline could be on Q' or Q'+1\n    # - If Z' is a multiple of 24, the deadline could be on Q' or Q'+1 (since 0:00 + 24h = next day 0:00)\n    # So, for all t in [0, 12), deadline is Q'+(Z'//24)\n    # for t in [0, 12), deadline is Q'+(Z'//24) if Z'%24 < 12, else Q'+(Z'//24)+1\n    # But since \"before noon\" is a range, the deadline could be on Q'+(Z'//24) or Q'+(Z'//24)+1\n\n    # Let's compute all possible days:\n    days = set()\n    for hour in range(0, 12):  # 0:00 to 11:59\n        deadline_offset = (Z_prime + hour) // 24\n        day_idx = (Q_prime_idx + deadline_offset) % 7\n        days.add(weekday_name(day_idx))\n    answer_list = sorted(days)\n\n    return answer_list\n\n```\n\nCode execution result:\n```\nReturn value: ['Monday']\nStandard output: \nExceptions: None\n```\n\nOutput a concrete and concise summary of only the issues that are present, do not include any code examples.\n"
+          }
+        ]
+      }
+    },
+    {
+      "step": "refinement",
+      "message": "Refining solution (iteration 2)...",
+      "iteration": 2,
+      "prompt_details": {
+        "description": "Solution refinement (iteration 2)",
+        "conversation": [
+          {
+            "role": "system",
+            "content": "You will be given a question and you must answer it by extracting relevant symbols in JSON format and then writing a Python program to calculate the final answer.\n\nYou MUST always plan extensively before outputting any symbols or code.\n\nYou MUST iterate and keep going until the problem is solved.\n\n# Workflow\n\n## Problem Solving Steps\n1. First extract relevant information from the input as JSON. Try to represent the relevant information in as much of a structured format as possible to help with further reasoning/processing.\n2. Using the information extracted, determine a reasonable approach to solving the problem using code, such that executing the code will return the final answer.\n3. Write a Python program to calculate and return the final answer. Use comments to explain the structure of the code and do not use a main() function.\nThe JSON must be enclosed in a markdown code block and the Python function must be in a separate markdown code block and be called `solve` and accept a single input called `symbols` representing the JSON information extracted. Do not include any `if __name__ == \"__main__\"` statement and you can assume the JSON will be loaded into the variable called `symbols` by the user.\nThe Python code should not just return the answer or perform all reasoning in comments and instead leverage the code itself to perform the reasoning.\nBe careful that the code returns the answer as expected by the question, for instance, if the question is multiple choice, the code must return the choice as described in the question.\nBe sure to always output a JSON code block and a Python code block.\nMake sure to follow these formatting requirements exactly.\n"
+          },
+          {
+            "role": "user",
+            "content": "Let the answer to Question1 be X/Y/Z.\n\nQuestion1: If the current date is 09-13-2011, what is the date 17 months before now? Your answer should be the date in the mm/dd/yyyy format (for example, 06/23/2021).\n\nLet X' = X + 10.\n\nLet the answer to Question2 be P.\n\nQuestion2: Today is Sunday and my parents arrive in X' days. On what day of the week do my parents arrive? Your answer should be the day of the week (for example, Sunday).\n\nLet Y' = Y + 16 and let P' be the day of the week 45 days after P.\n\nLet the answer to Question3 be Q.\n\nQuestion3: On P' morning, I was told that the package was out for delivery Y' days ago. On what day of the week was the package out for delivery? Your answer should be the day of the week.\n\nLet Z' = Z - 1984 and let Q' be the day of the week 75 days after Q.\n\nUse these values to solve Question4.\n\nQuestion4: On Q' before noon, I received a text saying my deadline is in exactly Z' hours. On what day(s) of the week could the deadline be? Your answer should be an ordered list with alphabetically ordered items (for example, [answer1, answer2, ...])."
+          },
+          {
+            "role": "assistant",
+            "content": "Let's break down the problem step by step and extract all relevant information in a structured JSON format.\n\n## Step 1: Extracting Information\n\n### Question 1\n- Current date: 09-13-2011\n- Find the date 17 months before now.\n- Output format: mm/dd/yyyy\n- Let the answer be X/Y/Z, where X, Y, Z are the month, day, year of the answer.\n\n### Question 2\n- X' = X + 10\n- Today is Sunday.\n- Parents arrive in X' days.\n- What day of the week do they arrive? (P)\n\n### Question 3\n- Y' = Y + 16\n- P' = day of the week 45 days after P\n- On P' morning, told package was out for delivery Y' days ago.\n- What day of the week was the package out for delivery? (Q)\n\n### Question 4\n- Z' = Z - 1984\n- Q' = day of the week 75 days after Q\n- On Q' before noon, received text: deadline in exactly Z' hours.\n- On what day(s) of the week could the deadline be? (ordered, alphabetically)\n\n## Step 2: JSON Representation\n\n```json\n{\n  \"question1\": {\n    \"current_date\": \"09-13-2011\",\n    \"months_before\": 17,\n    \"output_format\": \"mm/dd/yyyy\"\n  },\n  \"question2\": {\n    \"today\": \"Sunday\",\n    \"days_until_arrival\": \"X_prime\",\n    \"output\": \"day_of_week\"\n  },\n  \"question3\": {\n    \"days_ago\": \"Y_prime\",\n    \"reference_day\": \"P_prime\",\n    \"output\": \"day_of_week\"\n  },\n  \"question4\": {\n    \"hours_until_deadline\": \"Z_prime\",\n    \"reference_day\": \"Q_prime\",\n    \"output\": \"alphabetical_list_of_days\"\n  }\n}\n```\n\n## Step 3: Plan for Python Code\n\n1. **Question 1**: Subtract 17 months from 09-13-2011, get X, Y, Z.\n2. **Question 2**: X' = X + 10. Starting from Sunday, add X' days, get P.\n3. **Question 3**: Y' = Y + 16. P' = 45 days after P. On P', package was out for delivery Y' days ago. Find the day of the week Q.\n4. **Question 4**: Z' = Z - 1984. Q' = 75 days after Q. On Q', deadline is in Z' hours. Find all possible days of the week the deadline could fall on, output as an alphabetically ordered list.\n\nNow, let's write the code to solve the problem step by step.\n\n```python\ndef solve(symbols):\n    from datetime import datetime, timedelta\n    import calendar\n\n    # Helper to get day of week string\n    def day_of_week(dt):\n        return calendar.day_name[dt.weekday()]\n\n    # Helper to get day of week from string and offset\n    def day_of_week_from_name(name, offset):\n        days = list(calendar.day_name)\n        idx = days.index(name)\n        return days[(idx + offset) % 7]\n\n    # Question 1\n    current_date = datetime.strptime(symbols['question1']['current_date'], \"%m-%d-%Y\")\n    months_before = symbols['question1']['months_before']\n    # Subtract months\n    year = current_date.year\n    month = current_date.month\n    day = current_date.day\n    # Calculate new month and year\n    total_months = year * 12 + month - 1  # months since year 0\n    new_total_months = total_months - months_before\n    new_year = new_total_months // 12\n    new_month = new_total_months % 12 + 1\n    # Handle day overflow (e.g., 31st in a month with 30 days)\n    try:\n        new_date = datetime(new_year, new_month, day)\n    except ValueError:\n        # Use last day of the month\n        last_day = calendar.monthrange(new_year, new_month)[1]\n        new_date = datetime(new_year, new_month, last_day)\n    X = new_date.month\n    Y = new_date.day\n    Z = new_date.year\n\n    # Question 2\n    X_prime = X + 10\n    today_name = symbols['question2']['today']\n    # Find day of week after X' days\n    P = day_of_week_from_name(today_name, X_prime)\n\n    # Question 3\n    Y_prime = Y + 16\n    # P' is 45 days after P\n    # To get P's date, let's pick an arbitrary date that is a 'P' (since only the day of week matters)\n    # Let's use 2023-01-01 as a Sunday, then find the next P\n    base_date = datetime(2023, 1, 1)  # This is a Sunday\n    days_to_P = (list(calendar.day_name).index(P) - base_date.weekday()) % 7\n    P_date = base_date + timedelta(days=days_to_P)\n    P_prime_date = P_date + timedelta(days=45)\n    P_prime = day_of_week(P_prime_date)\n    # On P' morning, package was out for delivery Y' days ago\n    Q_date = P_prime_date - timedelta(days=Y_prime)\n    Q = day_of_week(Q_date)\n\n    # Question 4\n    Z_prime = Z - 1984\n    # Q' is 75 days after Q\n    # Find a date that is Q, then add 75 days\n    days_to_Q = (list(calendar.day_name).index(Q) - base_date.weekday()) % 7\n    Q_date_base = base_date + timedelta(days=days_to_Q)\n    Q_prime_date = Q_date_base + timedelta(days=75)\n    Q_prime = day_of_week(Q_prime_date)\n    # On Q' before noon, deadline is in Z' hours\n    # Z' hours from before noon (say, 11:59am) on Q'\n    # Find all possible days of the week the deadline could fall on\n    # Z' hours may not be a whole number of days, so the deadline could be on two days\n    # Let's assume \"before noon\" is 11:59am\n    Q_prime_datetime = datetime(2023, 1, 1, 11, 59)  # 2023-01-01 is a Sunday\n    days_to_Q_prime = (list(calendar.day_name).index(Q_prime) - Q_prime_datetime.weekday()) % 7\n    Q_prime_datetime = Q_prime_datetime + timedelta(days=days_to_Q_prime)\n    deadline_datetime = Q_prime_datetime + timedelta(hours=Z_prime)\n    # The deadline could be on the day of Q_prime or the next day if it crosses midnight\n    days = set()\n    days.add(calendar.day_name[Q_prime_datetime.weekday()])\n    if deadline_datetime.date() != Q_prime_datetime.date():\n        days.add(calendar.day_name[deadline_datetime.weekday()])\n    answer_list = sorted(list(days))\n\n    return answer_list\n```\n"
+          },
+          {
+            "role": "user",
+            "content": "Please fix the issues with the code and symbols or output \"FINISHED\".\nThe following is the result of evaluating the above code with the extracted symbols.\n```\nReturn value: ['Monday', 'Sunday']\nStandard output: \nExceptions: None\n```\n\nThe following is the summary of issues found with the code or the extracted symbols by another model:\n```\n1. **Incorrect Handling of \"Before Noon\" Ambiguity:** The code assumes \"before noon\" is always 11:59am, which is arbitrary. The actual range for \"before noon\" is from 12:00am to 11:59am, so the deadline could fall on up to three days (the day before, the same day, or the next day), depending on the value of Z'. The code only considers the current and next day, potentially missing valid days.\n\n2. **Arbitrary Base Date for Day-of-Week Calculations:** The code uses January 1, 2023 (a Sunday) as a base date for all day-of-week calculations. While this works for relative day-of-week math, it is not robust if the weekday mapping changes or if the base date is not Sunday. This could lead to errors if the base date is changed or misunderstood.\n\n3. **Hardcoded Year in Q' Calculations:** The code uses 2023 as the year for Q' calculations, which is unrelated to the actual years involved in the problem. This is acceptable for day-of-week math but is not generalizable or clearly justified.\n\n4. **No Input Validation:** The code does not validate the input symbols or check for missing or malformed data, which could lead to runtime errors if the input format changes.\n\n5. **Unnecessary Complexity in Date Calculations:** The code overcomplicates the process by creating arbitrary dates to match days of the week, rather than simply using modular arithmetic on the weekday indices.\n\n6. **No Explanation or Comments for Key Steps:** Some steps, such as why 2023-01-01 is chosen or how the day overflow is handled, lack clear comments, making the logic harder to follow and verify.\n\nDespite these issues, the code produces a plausible answer for the given input, but the ambiguity in \"before noon\" and the arbitrary choices in date handling could lead to incorrect or incomplete results in other scenarios.\n```\n\nIf there are any issues which impact the correctness of the answer, please output code which does not have the issues. Before outputting any code, plan how the code will solve the problem and avoid the issues.\nIf stuck, try outputting different code to solve the problem in a different way.\nYou may also revise the extracted symbols. To do this, output the revised symbols in a JSON code block. Only include information in the JSON which is present in the original input to keep the code grounded in the specific problem. Some examples of symbol revisions are changing the names of certain symbols, providing further granularity, and adding information which was originally missed.\nIf everything is correct, output the word \"FINISHED\" and nothing else.\n"
+          },
+          {
+            "role": "assistant",
+            "content": "Let's address the issues:\n\n### Issues to Fix\n\n1. **\"Before Noon\" Ambiguity:** The code should consider that \"before noon\" could be any time from 12:00am to 11:59am, so the deadline could fall on the same day, the next day, or even the previous day, depending on Z' (if Z' >= 12, the deadline could be on the previous day).\n2. **Arbitrary Base Date:** Instead of using arbitrary dates, use modular arithmetic for day-of-week calculations.\n3. **Unnecessary Date Construction:** For day-of-week math, use indices and modular arithmetic.\n4. **Clear Comments and Simpler Logic:** Add clear comments and use simpler, more robust logic.\n\n### Plan\n\n- For all day-of-week calculations, use indices (0=Monday, ..., 6=Sunday).\n- For \"before noon\", consider the full range (12:00am to 11:59am). The deadline could be on:\n  - The same day if Z' < 12\n  - The next day if Z' >= 12 and < 36, etc.\n  - The previous day if Z' >= 24 (if before noon, and deadline is in 24+ hours, it could be the day before).\n- For the deadline, consider all possible days of the week the deadline could fall on, given the range of possible \"before noon\" times.\n\n### Revised Code\n\n```python\ndef solve(symbols):\n    import calendar\n\n    # Helper: get weekday index from name\n    def weekday_index(name):\n        return list(calendar.day_name).index(name)\n\n    # Helper: get weekday name from index\n    def weekday_name(idx):\n        return list(calendar.day_name)[idx % 7]\n\n    # Question 1: Subtract 17 months from 09-13-2011\n    m, d, y = 9, 13, 2011\n    months_before = 17\n    total_months = y * 12 + m - 1\n    new_total_months = total_months - months_before\n    new_y = new_total_months // 12\n    new_m = new_total_months % 12 + 1\n    # Handle day overflow\n    import calendar\n    last_day = calendar.monthrange(new_y, new_m)[1]\n    new_d = min(d, last_day)\n    X, Y, Z = new_m, new_d, new_y\n\n    # Question 2: X' = X + 10, today is Sunday\n    X_prime = X + 10\n    today_idx = weekday_index(\"Sunday\")\n    P_idx = (today_idx + X_prime) % 7\n    P = weekday_name(P_idx)\n\n    # Question 3: Y' = Y + 16, P' = 45 days after P\n    Y_prime = Y + 16\n    P_prime_idx = (P_idx + 45) % 7\n    P_prime = weekday_name(P_prime_idx)\n    # On P' morning, package was out for delivery Y' days ago\n    Q_idx = (P_prime_idx - (Y_prime % 7)) % 7\n    Q = weekday_name(Q_idx)\n\n    # Question 4: Z' = Z - 1984, Q' = 75 days after Q\n    Z_prime = Z - 1984\n    Q_prime_idx = (Q_idx + 75) % 7\n    Q_prime = weekday_name(Q_prime_idx)\n\n    # On Q' before noon, deadline is in exactly Z' hours\n    # \"Before noon\" is any time from 0:00 to 11:59, so the deadline could be on:\n    # - Q' if Z' < 12\n    # - Q'+1 if 12 <= Z' < 36\n    # - Q'+2 if 36 <= Z' < 60, etc.\n    # But since \"before noon\" could be any time in that range, the deadline could fall on up to two days:\n    # - If Z' is not a multiple of 24, the deadline could be on Q' or Q'+1\n    # - If Z' is a multiple of 24, the deadline could be on Q' or Q'+1 (since 0:00 + 24h = next day 0:00)\n    # So, for all t in [0, 12), deadline is Q'+(Z'//24)\n    # for t in [0, 12), deadline is Q'+(Z'//24) if Z'%24 < 12, else Q'+(Z'//24)+1\n    # But since \"before noon\" is a range, the deadline could be on Q'+(Z'//24) or Q'+(Z'//24)+1\n\n    # Let's compute all possible days:\n    days = set()\n    for hour in range(0, 12):  # 0:00 to 11:59\n        deadline_offset = (Z_prime + hour) // 24\n        day_idx = (Q_prime_idx + deadline_offset) % 7\n        days.add(weekday_name(day_idx))\n    answer_list = sorted(days)\n\n    return answer_list\n```\nThis code now robustly handles the \"before noon\" ambiguity and uses modular arithmetic for all day-of-week calculations."
+          },
+          {
+            "role": "user",
+            "content": "Please fix the issues with the code and symbols or output \"FINISHED\".\nThe following is the result of evaluating the above code with the extracted symbols.\n```\nReturn value: ['Monday']\nStandard output: \nExceptions: None\n```\n\nThe following is the summary of issues found with the code or the extracted symbols by another model:\n```\n1. **Correctness of Date Calculation for Question 1:**  \n   The code calculates the date 17 months before 09-13-2011 correctly, resulting in 04/13/2010. It then assigns X, Y, Z as the month, day, and year, respectively. This is correct.\n\n2. **Correctness of Day-of-Week Calculations:**  \n   The code correctly computes the day of the week for each step using modular arithmetic and the calendar module. The logic for adding days and wrapping around the week is sound.\n\n3. **Handling of \"Before Noon\" Range in Question 4:**  \n   The code iterates over all possible hours from 0 to 11 (representing \"before noon\") and computes the possible deadline days, collecting all unique results. This approach is correct and ensures all possible days are considered.\n\n4. **Output Format:**  \n   The code returns the answer as a sorted list of days, as required by the question.\n\n5. **No Unused or Incorrect Returns:**  \n   The code does not return None and does not print instead of returning.\n\n6. **No Simpler Solution:**  \n   The code is already quite direct and clear for the problem's requirements.\n\n**Summary:**  \nThere are no correctness or logic issues in the code. The code is input-dependent, uses the extracted symbols, and returns the answer in the required format. The output of `['Monday']` is correct for the given input. No improvements are necessary.\n```\n\nIf there are any issues which impact the correctness of the answer, please output code which does not have the issues. Before outputting any code, plan how the code will solve the problem and avoid the issues.\nIf stuck, try outputting different code to solve the problem in a different way.\nYou may also revise the extracted symbols. To do this, output the revised symbols in a JSON code block. Only include information in the JSON which is present in the original input to keep the code grounded in the specific problem. Some examples of symbol revisions are changing the names of certain symbols, providing further granularity, and adding information which was originally missed.\nIf everything is correct, output the word \"FINISHED\" and nothing else.\n"
+          }
+        ]
+      }
+    },
+    {
+      "step": "finished",
+      "message": "Solution completed successfully!",
+      "iteration": null,
+      "prompt_details": null
+    }
+  ],
+  "timestamp": 1760571286.6724572
+}

src/pips/saved_examples/word_sorting.json

@@ -0,0 +1,462 @@
+{
+  "problem": "Solution completed successfully!",
+  "history": [
+    {
+      "role": "user",
+      "content": "Consider a new alphabet whose letters have the same order as the English alphabet, except that x is the last letter. Sort the following words with the new alphabet and separate them with comma: oversimplifications, consternate, administrations, collaborations, blest, buxton, manipulations, tariff, quizzes, sound, xerxes, institutionalization, proximity",
+      "metadata": {
+        "component": "user",
+        "title": "User"
+      }
+    },
+    {
+      "role": "assistant",
+      "content": "Choosing between chain-of-thought reasoning and iterative coding\u2026",
+      "metadata": {
+        "component": "mode_selection",
+        "title": "Mode Selection"
+      }
+    },
+    {
+      "role": "assistant",
+      "content": "To solve this problem, we need to sort the given list of words according to a modified version of the English alphabet where 'x' is the last letter. This means the order of the alphabet is: a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, y, z, x.\n\nLet's break down the steps:\n\n1. **Extract the relevant information**: We have a list of words and a modified alphabet order.\n2. **Plan the sorting**: We need to sort the words based on the new alphabet order. This involves creating a custom sorting function that uses the modified order.\n3. **Implement the solution**: Write a Python function to perform the sorting and return the sorted list as a comma-separated string.\n\nLet's start by extracting the relevant information in JSON format.\n\n```json\n{\n  \"words\": [\n    \"oversimplifications\",\n    \"consternate\",\n    \"administrations\",\n    \"collaborations\",\n    \"blest\",\n    \"buxton\",\n    \"manipulations\",\n    \"tariff\",\n    \"quizzes\",\n    \"sound\",\n    \"xerxes\",\n    \"institutionalization\",\n    \"proximity\"\n  ],\n  \"alphabet_order\": \"abcdefghijklmnopqrstuvwxyzx\"\n}\n```\n\nNow, let's write the Python function to sort the words according to the new alphabet order.",
+      "metadata": {
+        "component": "solver",
+        "title": "\ud83e\udde0 Solver (iteration 0) \u00b7 OpenAIModel"
+      }
+    },
+    {
+      "role": "assistant",
+      "content": "1. The code is missing entirely, which means it does not perform any operations to solve the problem. As a result, it does not sort the words according to the new alphabet order or return any output.\n\n2. The code should define a function or logic to sort the words based on the provided custom alphabet order and return the sorted list as a comma-separated string.\n\n3. The extracted symbols are correct, but they are not utilized in any way due to the absence of code. The `alphabet_order` and `words` need to be used to implement the sorting logic.",
+      "metadata": {
+        "component": "critic",
+        "title": "\ud83e\uddfe Critic (iteration 1) \u00b7 AI Code Reviewer"
+      }
+    },
+    {
+      "role": "assistant",
+      "content": "To address the issues, we need to implement a Python function that sorts the words based on the custom alphabet order where 'x' is the last letter. Here's the plan:\n\n1. **Create a mapping**: We will create a dictionary that maps each letter to its position in the new alphabet order.\n2. **Sort the words**: Use the custom mapping to sort the list of words.\n3. **Return the result**: Convert the sorted list into a comma-separated string and return it.\n\nLet's implement this in the `solve` function.\n\n```python\ndef solve(symbols):\n    # Extract words and custom alphabet order from symbols\n    words = symbols[\"words\"]\n    alphabet_order = symbols[\"alphabet_order\"]\n    \n    # Create a mapping of each letter to its position in the custom alphabet order\n    order_map = {char: index for index, char in enumerate(alphabet_order)}\n    \n    # Define a custom sorting key function\n    def custom_sort_key(word):\n        # Convert each word into a tuple of indices based on the custom alphabet order\n        return [order_map[char] for char in word]\n    \n    # Sort the words using the custom sorting key\n    sorted_words = sorted(words, key=custom_sort_key)\n    \n    # Join the sorted words into a comma-separated string\n    result = \", \".join(sorted_words)\n    \n    return result\n```\n\nThis code defines a `solve` function that takes the extracted symbols, creates a custom order map, sorts the words based on this map, and returns the sorted words as a comma-separated string. This should resolve the issues and provide the correct output.",
+      "metadata": {
+        "component": "solver",
+        "title": "\ud83e\udde0 Solver (iteration 1) \u00b7 OpenAIModel"
+      }
+    },
+    {
+      "role": "assistant",
+      "content": "1. The code attempts to extract words and a custom alphabet order from the `symbols` input, but the extracted symbols are empty, leading to a KeyError when trying to access `symbols[\"words\"]` and `symbols[\"alphabet_order\"]`.\n\n2. The code does not handle the input directly from the question, which means it cannot function correctly without the necessary input data being provided in the expected format.\n\n3. The code execution results in an error due to the incorrect handling of the input, specifically the absence of the required keys in the `symbols` dictionary.\n\n4. The code does not address the specific requirement of the problem, which is to sort the words based on a new alphabet where 'x' is the last letter, as it relies on an undefined `alphabet_order` from the input. \n\n5. The code returns `None` due to the exception, which is not the expected behavior for solving the problem. The function should return a sorted, comma-separated string of words.",
+      "metadata": {
+        "component": "critic",
+        "title": "\ud83e\uddfe Critic (iteration 2) \u00b7 AI Code Reviewer"
+      }
+    },
+    {
+      "role": "assistant",
+      "content": "```json\n{\n  \"words\": [\n    \"oversimplifications\",\n    \"consternate\",\n    \"administrations\",\n    \"collaborations\",\n    \"blest\",\n    \"buxton\",\n    \"manipulations\",\n    \"tariff\",\n    \"quizzes\",\n    \"sound\",\n    \"xerxes\",\n    \"institutionalization\",\n    \"proximity\"\n  ],\n  \"alphabet_order\": \"abcdefghijklmnopqrstuvwyzx\"\n}\n```\n\n```python\ndef solve(symbols):\n    # Extract words and custom alphabet order from symbols\n    words = symbols[\"words\"]\n    alphabet_order = symbols[\"alphabet_order\"]\n    \n    # Create a mapping of each letter to its position in the custom alphabet order\n    order_map = {char: index for index, char in enumerate(alphabet_order)}\n    \n    # Define a custom sorting key function\n    def custom_sort_key(word):\n        # Convert each word into a tuple of indices based on the custom alphabet order\n        return [order_map[char] for char in word]\n    \n    # Sort the words using the custom sorting key\n    sorted_words = sorted(words, key=custom_sort_key)\n    \n    # Join the sorted words into a comma-separated string\n    result = \", \".join(sorted_words)\n    \n    return result\n```",
+      "metadata": {
+        "component": "solver",
+        "title": "\ud83e\udde0 Solver (iteration 2) \u00b7 OpenAIModel"
+      }
+    },
+    {
+      "role": "assistant",
+      "content": "1. **Incorrect Alphabet Order**: The custom alphabet order provided in the code is incorrect. The letter 'x' should be the last letter, but the order given is \"abcdefghijklmnopqrstuvwyzx\", which places 'z' after 'w' and before 'x'. The correct order should be \"abcdefghijklmnopqrstuvwyz\" with 'x' at the end.\n\n2. **Incorrect Sorting**: Due to the incorrect alphabet order, the sorting of words is not performed as intended according to the problem statement. This results in an incorrect order of words in the output.\n\n3. **Output Format**: The code correctly returns a comma-separated string of sorted words, which matches the required output format. However, due to the incorrect sorting, the output is not as expected.",
+      "metadata": {
+        "component": "critic",
+        "title": "\ud83e\uddfe Critic (iteration 3) \u00b7 AI Code Reviewer"
+      }
+    },
+    {
+      "role": "assistant",
+      "content": "```json\n{\n  \"words\": [\n    \"oversimplifications\",\n    \"consternate\",\n    \"administrations\",\n    \"collaborations\",\n    \"blest\",\n    \"buxton\",\n    \"manipulations\",\n    \"tariff\",\n    \"quizzes\",\n    \"sound\",\n    \"xerxes\",\n    \"institutionalization\",\n    \"proximity\"\n  ],\n  \"alphabet_order\": \"abcdefghijklmnopqrstuvwyz\"\n}\n```\n\n```python\ndef solve(symbols):\n    # Extract words and custom alphabet order from symbols\n    words = symbols[\"words\"]\n    alphabet_order = symbols[\"alphabet_order\"] + \"x\"  # Correctly place 'x' at the end\n    \n    # Create a mapping of each letter to its position in the custom alphabet order\n    order_map = {char: index for index, char in enumerate(alphabet_order)}\n    \n    # Define a custom sorting key function\n    def custom_sort_key(word):\n        # Convert each word into a tuple of indices based on the custom alphabet order\n        return [order_map[char] for char in word]\n    \n    # Sort the words using the custom sorting key\n    sorted_words = sorted(words, key=custom_sort_key)\n    \n    # Join the sorted words into a comma-separated string\n    result = \", \".join(sorted_words)\n    \n    return result\n```",
+      "metadata": {
+        "component": "solver",
+        "title": "\ud83e\udde0 Solver (iteration 3) \u00b7 OpenAIModel"
+      }
+    },
+    {
+      "role": "assistant",
+      "content": "1. **Incorrect Alphabet Order**: The code incorrectly appends 'x' to the end of the `alphabet_order` string, which already includes 'x' in its correct position. This results in an incorrect order where 'x' is considered twice, potentially causing incorrect sorting behavior.\n\n2. **Incorrect Sorting**: Due to the incorrect alphabet order, the sorting of words is not performed according to the specified new alphabet where 'x' should be the last letter. This impacts the correctness of the answer.\n\n3. **Output Format**: The code correctly returns a comma-separated string of sorted words, which matches the required output format. However, due to the incorrect sorting, the output is not as expected.",
+      "metadata": {
+        "component": "critic",
+        "title": "\ud83e\uddfe Critic (iteration 4) \u00b7 AI Code Reviewer"
+      }
+    },
+    {
+      "role": "assistant",
+      "content": "```json\n{\n  \"words\": [\n    \"oversimplifications\",\n    \"consternate\",\n    \"administrations\",\n    \"collaborations\",\n    \"blest\",\n    \"buxton\",\n    \"manipulations\",\n    \"tariff\",\n    \"quizzes\",\n    \"sound\",\n    \"xerxes\",\n    \"institutionalization\",\n    \"proximity\"\n  ],\n  \"alphabet_order\": \"abcdefghijklmnopqrstuvwyz\"\n}\n```\n\n```python\ndef solve(symbols):\n    # Extract words and custom alphabet order from symbols\n    words = symbols[\"words\"]\n    alphabet_order = symbols[\"alphabet_order\"] + \"x\"  # Correctly place 'x' at the end\n    \n    # Create a mapping of each letter to its position in the custom alphabet order\n    order_map = {char: index for index, char in enumerate(alphabet_order)}\n    \n    # Define a custom sorting key function\n    def custom_sort_key(word):\n        # Convert each word into a tuple of indices based on the custom alphabet order\n        return [order_map[char] for char in word]\n    \n    # Sort the words using the custom sorting key\n    sorted_words = sorted(words, key=custom_sort_key)\n    \n    # Join the sorted words into a comma-separated string\n    result = \", \".join(sorted_words)\n    \n    return result\n```\n\nFINISHED",
+      "metadata": {
+        "component": "solver",
+        "title": "\ud83e\udde0 Solver (iteration 4) \u00b7 OpenAIModel"
+      }
+    },
+    {
+      "role": "assistant",
+      "content": "Mode chosen: Iterative coding",
+      "metadata": {
+        "component": "mode_result",
+        "title": "Mode Choice"
+      }
+    },
+    {
+      "role": "assistant",
+      "content": "**Final Answer:** FINAL ANSWER: administrations, blest, buxton, collaborations, consternate, institutionalization, manipulations, oversimplifications, proximity, quizzes, sound, tariff, xerxes\n\n**Method:** Iterative coding",
+      "metadata": {
+        "component": "summary",
+        "title": "Summary"
+      }
+    }
+  ],
+  "symbols": {
+    "words": [
+      "oversimplifications",
+      "consternate",
+      "administrations",
+      "collaborations",
+      "blest",
+      "buxton",
+      "manipulations",
+      "tariff",
+      "quizzes",
+      "sound",
+      "xerxes",
+      "institutionalization",
+      "proximity"
+    ],
+    "alphabet_order": "abcdefghijklmnopqrstuvwyz"
+  },
+  "code": "\ndef solve(symbols):\n    # Extract words and custom alphabet order from symbols\n    words = symbols[\"words\"]\n    alphabet_order = symbols[\"alphabet_order\"] + \"x\"  # Correctly place 'x' at the end\n    \n    # Create a mapping of each letter to its position in the custom alphabet order\n    order_map = {char: index for index, char in enumerate(alphabet_order)}\n    \n    # Define a custom sorting key function\n    def custom_sort_key(word):\n        # Convert each word into a tuple of indices based on the custom alphabet order\n        return [order_map[char] for char in word]\n    \n    # Sort the words using the custom sorting key\n    sorted_words = sorted(words, key=custom_sort_key)\n    \n    # Join the sorted words into a comma-separated string\n    result = \", \".join(sorted_words)\n    \n    return result\n",
+  "status": "\u2705 Completed (iterative coding).",
+  "method": "Iterative coding",
+  "decision": {
+    "use_code": true,
+    "scores": [
+      0.8,
+      0.6,
+      0.7,
+      0.9,
+      0.9,
+      0.8,
+      0.7,
+      0.8,
+      0.8,
+      0.8
+    ],
+    "average_score": 0.78,
+    "raw_response": "To evaluate the likelihood of solving the target question using either executable Python code or chain-of-thought reasoning, let's consider each criterion:\n\n1. **Simple Formalizability**: The task involves sorting words based on a modified alphabet order. This can be directly expressed in code by defining a custom sorting key. The probability is relatively high since sorting is a well-defined operation in programming.\n   - Probability: 0.8\n\n2. **Straightforward Executability**: Writing code to sort words with a custom alphabet is straightforward, but there might be subtle issues in defining the custom order correctly. The first attempt might need adjustments.\n   - Probability: 0.6\n\n3. **Robust Systematic Search**: Sorting is a systematic process, and coding a custom sort function should reliably find the correct order if the custom alphabet is correctly implemented.\n   - Probability: 0.7\n\n4. **Manageable State Representation**: The state (i.e., the order of letters) can be easily represented in code using a dictionary or list. This is not complex.\n   - Probability: 0.9\n\n5. **Structured Knowledge Encoding**: The custom alphabet order can be encoded as a simple data structure. This is straightforward and doesn't require flexible reasoning.\n   - Probability: 0.9\n\n6. **Hallucination Risk Reduction**: Code execution is less prone to making unwarranted assumptions compared to reasoning, especially for sorting tasks.\n   - Probability: 0.8\n\n7. **Arithmetic and Data Processing Advantage**: The task doesn't involve complex arithmetic but does involve data handling (sorting), which code can handle efficiently.\n   - Probability: 0.7\n\n8. **Branching and Case Handling Advantage**: Sorting with a custom order involves handling each word according to the new alphabet, which code can systematically manage.\n   - Probability: 0.8\n\n9. **Algorithmic Reliability Over Heuristics**: A deterministic sorting algorithm in code is likely to be more reliable than heuristic reasoning for this task.\n   - Probability: 0.8\n\n10. **Overall Comparative Success**: Given the nature of the task, code is likely to be more reliable than chain-of-thought reasoning due to the need for precise handling of the custom alphabet order.\n    - Probability: 0.8\n\nFINAL ANSWER: [0.8, 0.6, 0.7, 0.9, 0.9, 0.8, 0.7, 0.8, 0.8, 0.8]",
+    "prompt": [
+      {
+        "role": "user",
+        "content": [
+          {
+            "type": "text",
+            "text": "You will self-reflect to estimate whether you are more likely to correctly solve a given target question by writing executable Python code or by using chain-of-thought (natural-language) reasoning.\n\n**IMPORTANT:**\n- This is a hypothetical evaluation.\n- **You must NOT attempt to answer, solve, write code, or reason through the target question yet.**\n- Instead, you must reflect carefully and conservatively on your expected ability if you were to attempt solving the question through either method.\n\nSolution Expectations:\n- You may assume standard library modules are allowed for code.\n- You may NOT call external services, APIs, databases, or other LLMs.\n- The code must be self-contained and executable without internet access.\n- Chain-of-thought reasoning must be clear, logically sound, and internally verifiable without external tools.\n\n**CRITICAL GUIDANCE:**\n- **Be cautious, not optimistic.**  \n  Overestimating your capabilities will lead to choosing a method you cannot successfully complete.\n- **If you feel any uncertainty, complexity, or ambiguity, lower your probability accordingly.**\n- **Assume that even small mistakes can cause failure** when writing code or reasoning through complex tasks.\n- **Use conservative estimates.**\n- If unsure between two options, **prefer lower probabilities rather than guessing high**.\n\nHere are the self-reflection sub-questions you must answer hypothetically:\n\n1. **Simple Formalizability** \u2014 *What is the probability that the full solution can be easily and directly expressed as simple, deterministic code, without needing complex transformations or deep insight?*\n\n2. **Straightforward Executability** \u2014 *What is the probability that a first attempt at writing code would execute correctly without needing debugging, even if the problem has subtle or complex aspects?*\n\n3. **Robust Systematic Search** \u2014 *What is the probability that coding a systematic method (like brute-force search or recursion) would reliably find the correct answer, without missing hidden constraints or introducing edge-case errors?*\n\n4. **Manageable State Representation** \u2014 *What is the probability that all intermediate concepts, variables, and conditions can be simply and explicitly represented in code, without requiring difficult or error-prone state tracking?*\n\n5. **Structured Knowledge Encoding** \u2014 *What is the probability that all required background knowledge can be neatly encoded in code (e.g., as rules, formulas, or data), rather than needing flexible, intuitive understanding better suited to reasoning?*\n\n6. **Hallucination Risk Reduction** \u2014 *What is the probability that code execution would more reliably avoid fabricated steps or unwarranted assumptions compared to chain-of-thought reasoning?*\n\n7. **Arithmetic and Data Processing Advantage** \u2014 *What is the probability that the problem requires extensive or error-prone arithmetic/data handling that code could perform perfectly, but that chain-of-thought would likely fumble?*\n\n8. **Branching and Case Handling Advantage** \u2014 *What is the probability that the solution involves many branching conditions, special cases, or exceptions that code can handle systematically but chain-of-thought might overlook?*\n\n9. **Algorithmic Reliability Over Heuristics** \u2014 *What is the probability that following a deterministic algorithm in code would reach the correct answer more reliably than relying on intuitive or heuristic chain-of-thought reasoning?*\n\n10. **Overall Comparative Success** \u2014 *Considering all factors, what is the probability that code will ultimately produce a correct solution more reliably than chain-of-thought reasoning for this question?*\n\nAfter thoroughly reasoning through each criterion:\n\n- Output a single list of 10 probability scores (each between 0 and 1) as your FINAL ANSWER, in order:\n  - Scores 1\u201310 correspond to the ten sub-questions above.\n\n**Additional Instructions:**\n- Explicitly reason through each criterion carefully before giving a probability.\n- If uncertain or if the problem seems complex, favor lower probabilities to reflect the difficulty.\n- Make sure to put only the list after FINAL ANSWER.\n- **Under no circumstances should you write, sketch, pseudocode, or attempt any part of the solution itself during this reflection phase.**\n\nTARGET QUESTION:\nAt the end of your response, output only the list of 10 probabilities inside square brackets after the text 'FINAL ANSWER:'."
+          },
+          {
+            "type": "text",
+            "text": "TARGET QUESTION:\nConsider a new alphabet whose letters have the same order as the English alphabet, except that x is the last letter. Sort the following words with the new alphabet and separate them with comma: oversimplifications, consternate, administrations, collaborations, blest, buxton, manipulations, tariff, quizzes, sound, xerxes, institutionalization, proximity"
+          }
+        ]
+      }
+    ],
+    "error": null
+  },
+  "steps": [
+    {
+      "step": "mode_selection",
+      "message": "Choosing between chain-of-thought reasoning and iterative coding\u2026",
+      "iteration": null,
+      "prompt_details": {
+        "description": "Choosing between chain-of-thought and iterative coding",
+        "conversation": [
+          {
+            "role": "user",
+            "content": [
+              {
+                "type": "text",
+                "text": "You will self-reflect to estimate whether you are more likely to correctly solve a given target question by writing executable Python code or by using chain-of-thought (natural-language) reasoning.\n\n**IMPORTANT:**\n- This is a hypothetical evaluation.\n- **You must NOT attempt to answer, solve, write code, or reason through the target question yet.**\n- Instead, you must reflect carefully and conservatively on your expected ability if you were to attempt solving the question through either method.\n\nSolution Expectations:\n- You may assume standard library modules are allowed for code.\n- You may NOT call external services, APIs, databases, or other LLMs.\n- The code must be self-contained and executable without internet access.\n- Chain-of-thought reasoning must be clear, logically sound, and internally verifiable without external tools.\n\n**CRITICAL GUIDANCE:**\n- **Be cautious, not optimistic.**  \n  Overestimating your capabilities will lead to choosing a method you cannot successfully complete.\n- **If you feel any uncertainty, complexity, or ambiguity, lower your probability accordingly.**\n- **Assume that even small mistakes can cause failure** when writing code or reasoning through complex tasks.\n- **Use conservative estimates.**\n- If unsure between two options, **prefer lower probabilities rather than guessing high**.\n\nHere are the self-reflection sub-questions you must answer hypothetically:\n\n1. **Simple Formalizability** \u2014 *What is the probability that the full solution can be easily and directly expressed as simple, deterministic code, without needing complex transformations or deep insight?*\n\n2. **Straightforward Executability** \u2014 *What is the probability that a first attempt at writing code would execute correctly without needing debugging, even if the problem has subtle or complex aspects?*\n\n3. **Robust Systematic Search** \u2014 *What is the probability that coding a systematic method (like brute-force search or recursion) would reliably find the correct answer, without missing hidden constraints or introducing edge-case errors?*\n\n4. **Manageable State Representation** \u2014 *What is the probability that all intermediate concepts, variables, and conditions can be simply and explicitly represented in code, without requiring difficult or error-prone state tracking?*\n\n5. **Structured Knowledge Encoding** \u2014 *What is the probability that all required background knowledge can be neatly encoded in code (e.g., as rules, formulas, or data), rather than needing flexible, intuitive understanding better suited to reasoning?*\n\n6. **Hallucination Risk Reduction** \u2014 *What is the probability that code execution would more reliably avoid fabricated steps or unwarranted assumptions compared to chain-of-thought reasoning?*\n\n7. **Arithmetic and Data Processing Advantage** \u2014 *What is the probability that the problem requires extensive or error-prone arithmetic/data handling that code could perform perfectly, but that chain-of-thought would likely fumble?*\n\n8. **Branching and Case Handling Advantage** \u2014 *What is the probability that the solution involves many branching conditions, special cases, or exceptions that code can handle systematically but chain-of-thought might overlook?*\n\n9. **Algorithmic Reliability Over Heuristics** \u2014 *What is the probability that following a deterministic algorithm in code would reach the correct answer more reliably than relying on intuitive or heuristic chain-of-thought reasoning?*\n\n10. **Overall Comparative Success** \u2014 *Considering all factors, what is the probability that code will ultimately produce a correct solution more reliably than chain-of-thought reasoning for this question?*\n\nAfter thoroughly reasoning through each criterion:\n\n- Output a single list of 10 probability scores (each between 0 and 1) as your FINAL ANSWER, in order:\n  - Scores 1\u201310 correspond to the ten sub-questions above.\n\n**Additional Instructions:**\n- Explicitly reason through each criterion carefully before giving a probability.\n- If uncertain or if the problem seems complex, favor lower probabilities to reflect the difficulty.\n- Make sure to put only the list after FINAL ANSWER.\n- **Under no circumstances should you write, sketch, pseudocode, or attempt any part of the solution itself during this reflection phase.**\n\nTARGET QUESTION:\nAt the end of your response, output only the list of 10 probabilities inside square brackets after the text 'FINAL ANSWER:'."
+              },
+              {
+                "type": "text",
+                "text": "TARGET QUESTION:\nConsider a new alphabet whose letters have the same order as the English alphabet, except that x is the last letter. Sort the following words with the new alphabet and separate them with comma: oversimplifications, consternate, administrations, collaborations, blest, buxton, manipulations, tariff, quizzes, sound, xerxes, institutionalization, proximity"
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "step": "mode_selection",
+      "message": "Average code suitability score: 0.78. Proceeding with iterative code generation.",
+      "iteration": null,
+      "prompt_details": {
+        "description": "Choosing between chain-of-thought and iterative coding",
+        "conversation": [
+          {
+            "role": "user",
+            "content": [
+              {
+                "type": "text",
+                "text": "You will self-reflect to estimate whether you are more likely to correctly solve a given target question by writing executable Python code or by using chain-of-thought (natural-language) reasoning.\n\n**IMPORTANT:**\n- This is a hypothetical evaluation.\n- **You must NOT attempt to answer, solve, write code, or reason through the target question yet.**\n- Instead, you must reflect carefully and conservatively on your expected ability if you were to attempt solving the question through either method.\n\nSolution Expectations:\n- You may assume standard library modules are allowed for code.\n- You may NOT call external services, APIs, databases, or other LLMs.\n- The code must be self-contained and executable without internet access.\n- Chain-of-thought reasoning must be clear, logically sound, and internally verifiable without external tools.\n\n**CRITICAL GUIDANCE:**\n- **Be cautious, not optimistic.**  \n  Overestimating your capabilities will lead to choosing a method you cannot successfully complete.\n- **If you feel any uncertainty, complexity, or ambiguity, lower your probability accordingly.**\n- **Assume that even small mistakes can cause failure** when writing code or reasoning through complex tasks.\n- **Use conservative estimates.**\n- If unsure between two options, **prefer lower probabilities rather than guessing high**.\n\nHere are the self-reflection sub-questions you must answer hypothetically:\n\n1. **Simple Formalizability** \u2014 *What is the probability that the full solution can be easily and directly expressed as simple, deterministic code, without needing complex transformations or deep insight?*\n\n2. **Straightforward Executability** \u2014 *What is the probability that a first attempt at writing code would execute correctly without needing debugging, even if the problem has subtle or complex aspects?*\n\n3. **Robust Systematic Search** \u2014 *What is the probability that coding a systematic method (like brute-force search or recursion) would reliably find the correct answer, without missing hidden constraints or introducing edge-case errors?*\n\n4. **Manageable State Representation** \u2014 *What is the probability that all intermediate concepts, variables, and conditions can be simply and explicitly represented in code, without requiring difficult or error-prone state tracking?*\n\n5. **Structured Knowledge Encoding** \u2014 *What is the probability that all required background knowledge can be neatly encoded in code (e.g., as rules, formulas, or data), rather than needing flexible, intuitive understanding better suited to reasoning?*\n\n6. **Hallucination Risk Reduction** \u2014 *What is the probability that code execution would more reliably avoid fabricated steps or unwarranted assumptions compared to chain-of-thought reasoning?*\n\n7. **Arithmetic and Data Processing Advantage** \u2014 *What is the probability that the problem requires extensive or error-prone arithmetic/data handling that code could perform perfectly, but that chain-of-thought would likely fumble?*\n\n8. **Branching and Case Handling Advantage** \u2014 *What is the probability that the solution involves many branching conditions, special cases, or exceptions that code can handle systematically but chain-of-thought might overlook?*\n\n9. **Algorithmic Reliability Over Heuristics** \u2014 *What is the probability that following a deterministic algorithm in code would reach the correct answer more reliably than relying on intuitive or heuristic chain-of-thought reasoning?*\n\n10. **Overall Comparative Success** \u2014 *Considering all factors, what is the probability that code will ultimately produce a correct solution more reliably than chain-of-thought reasoning for this question?*\n\nAfter thoroughly reasoning through each criterion:\n\n- Output a single list of 10 probability scores (each between 0 and 1) as your FINAL ANSWER, in order:\n  - Scores 1\u201310 correspond to the ten sub-questions above.\n\n**Additional Instructions:**\n- Explicitly reason through each criterion carefully before giving a probability.\n- If uncertain or if the problem seems complex, favor lower probabilities to reflect the difficulty.\n- Make sure to put only the list after FINAL ANSWER.\n- **Under no circumstances should you write, sketch, pseudocode, or attempt any part of the solution itself during this reflection phase.**\n\nTARGET QUESTION:\nAt the end of your response, output only the list of 10 probabilities inside square brackets after the text 'FINAL ANSWER:'."
+              },
+              {
+                "type": "text",
+                "text": "TARGET QUESTION:\nConsider a new alphabet whose letters have the same order as the English alphabet, except that x is the last letter. Sort the following words with the new alphabet and separate them with comma: oversimplifications, consternate, administrations, collaborations, blest, buxton, manipulations, tariff, quizzes, sound, xerxes, institutionalization, proximity"
+              }
+            ]
+          }
+        ],
+        "raw_response": "To evaluate the likelihood of solving the target question using either executable Python code or chain-of-thought reasoning, let's consider each criterion:\n\n1. **Simple Formalizability**: The task involves sorting words based on a modified alphabet order. This can be directly expressed in code by defining a custom sorting key. The probability is relatively high since sorting is a well-defined operation in programming.\n   - Probability: 0.8\n\n2. **Straightforward Executability**: Writing code to sort words with a custom alphabet is straightforward, but there might be subtle issues in defining the custom order correctly. The first attempt might need adjustments.\n   - Probability: 0.6\n\n3. **Robust Systematic Search**: Sorting is a systematic process, and coding a custom sort function should reliably find the correct order if the custom alphabet is correctly implemented.\n   - Probability: 0.7\n\n4. **Manageable State Representation**: The state (i.e., the order of letters) can be easily represented in code using a dictionary or list. This is not complex.\n   - Probability: 0.9\n\n5. **Structured Knowledge Encoding**: The custom alphabet order can be encoded as a simple data structure. This is straightforward and doesn't require flexible reasoning.\n   - Probability: 0.9\n\n6. **Hallucination Risk Reduction**: Code execution is less prone to making unwarranted assumptions compared to reasoning, especially for sorting tasks.\n   - Probability: 0.8\n\n7. **Arithmetic and Data Processing Advantage**: The task doesn't involve complex arithmetic but does involve data handling (sorting), which code can handle efficiently.\n   - Probability: 0.7\n\n8. **Branching and Case Handling Advantage**: Sorting with a custom order involves handling each word according to the new alphabet, which code can systematically manage.\n   - Probability: 0.8\n\n9. **Algorithmic Reliability Over Heuristics**: A deterministic sorting algorithm in code is likely to be more reliable than heuristic reasoning for this task.\n   - Probability: 0.8\n\n10. **Overall Comparative Success**: Given the nature of the task, code is likely to be more reliable than chain-of-thought reasoning due to the need for precise handling of the custom alphabet order.\n    - Probability: 0.8\n\nFINAL ANSWER: [0.8, 0.6, 0.7, 0.9, 0.9, 0.8, 0.7, 0.8, 0.8, 0.8]",
+        "error": null
+      }
+    },
+    {
+      "step": "initial_generation",
+      "message": "Generating first solution\u2026",
+      "iteration": null,
+      "prompt_details": {
+        "description": "Initial solution generation",
+        "conversation": [
+          {
+            "role": "system",
+            "content": "You will be given a question and you must answer it by extracting relevant symbols in JSON format and then writing a Python program to calculate the final answer.\n\nYou MUST always plan extensively before outputting any symbols or code.\n\nYou MUST iterate and keep going until the problem is solved.\n\n# Workflow\n\n## Problem Solving Steps\n1. First extract relevant information from the input as JSON. Try to represent the relevant information in as much of a structured format as possible to help with further reasoning/processing.\n2. Using the information extracted, determine a reasonable approach to solving the problem using code, such that executing the code will return the final answer.\n3. Write a Python program to calculate and return the final answer. Use comments to explain the structure of the code and do not use a main() function.\nThe JSON must be enclosed in a markdown code block and the Python function must be in a separate markdown code block and be called `solve` and accept a single input called `symbols` representing the JSON information extracted. Do not include any `if __name__ == \"__main__\"` statement and you can assume the JSON will be loaded into the variable called `symbols` by the user.\nThe Python code should not just return the answer or perform all reasoning in comments and instead leverage the code itself to perform the reasoning.\nBe careful that the code returns the answer as expected by the question, for instance, if the question is multiple choice, the code must return the choice as described in the question.\nBe sure to always output a JSON code block and a Python code block.\nMake sure to follow these formatting requirements exactly.\n"
+          },
+          {
+            "role": "user",
+            "content": "Consider a new alphabet whose letters have the same order as the English alphabet, except that x is the last letter. Sort the following words with the new alphabet and separate them with comma: oversimplifications, consternate, administrations, collaborations, blest, buxton, manipulations, tariff, quizzes, sound, xerxes, institutionalization, proximity"
+          }
+        ]
+      }
+    },
+    {
+      "step": "code_checking",
+      "message": "Running code critic (iteration 1)...",
+      "iteration": 1,
+      "prompt_details": {
+        "description": "Code quality analysis and critique (iteration 1)",
+        "conversation": [
+          {
+            "role": "system",
+            "content": "You will be given a question and a code solution and you must judge the quality of the code for solving the problem.\n                           \nLook for any of the following issues in the code:\n- The code should be input dependent, meaning it should use the input symbols to compute the answer. It is OK for the code to be specialized to the input (i.e. the reasoning itself may be hardcoded, like a decision tree where the branches are hardcoded).\n- The code should not return None unless \"None\" is the correct answer.\n- The code should return the answer, not just print it. If the question asks for a multiple choice answer, the code should return the choice as described in the question.\n- There should not be any example usage of the code.\n- If there is a simpler way to solve the problem, please describe it.\n- If there are any clear bugs in the code which impact the correctness of the answer, please describe them.\n- If there are any issues with the extracted symbols, please describe them as well, but separate these issues from the issues with the code.\n- If it is possible to sanity check the output of the code, please do so and describe if there are any obvious issues with the output and how the code could be fixed to avoid these issues.\n\n\n\n\nAfter analyzing the code in depth, output a concrete and concise summary of the issues that are present, do not include any code examples. Please order the issues by impact on answer correctness."
+          },
+          {
+            "role": "user",
+            "content": "Question: Consider a new alphabet whose letters have the same order as the English alphabet, except that x is the last letter. Sort the following words with the new alphabet and separate them with comma: oversimplifications, consternate, administrations, collaborations, blest, buxton, manipulations, tariff, quizzes, sound, xerxes, institutionalization, proximity\n\nThe following are extracted symbols from the question in JSON format followed by a Python program which takes the JSON as an argument called `symbols` and computes the answer.\n```json\n{\n  \"words\": [\n    \"oversimplifications\",\n    \"consternate\",\n    \"administrations\",\n    \"collaborations\",\n    \"blest\",\n    \"buxton\",\n    \"manipulations\",\n    \"tariff\",\n    \"quizzes\",\n    \"sound\",\n    \"xerxes\",\n    \"institutionalization\",\n    \"proximity\"\n  ],\n  \"alphabet_order\": \"abcdefghijklmnopqrstuvwxyzx\"\n}\n```\n\n```python\n\n```\n\nCode execution result:\n```\nReturn value: None\nStandard output: \nExceptions: Error: name 'solve' is not defined\n```\n\nOutput a concrete and concise summary of only the issues that are present, do not include any code examples.\n"
+          }
+        ]
+      }
+    },
+    {
+      "step": "refinement",
+      "message": "Refining solution (iteration 1)...",
+      "iteration": 1,
+      "prompt_details": {
+        "description": "Solution refinement (iteration 1)",
+        "conversation": [
+          {
+            "role": "system",
+            "content": "You will be given a question and you must answer it by extracting relevant symbols in JSON format and then writing a Python program to calculate the final answer.\n\nYou MUST always plan extensively before outputting any symbols or code.\n\nYou MUST iterate and keep going until the problem is solved.\n\n# Workflow\n\n## Problem Solving Steps\n1. First extract relevant information from the input as JSON. Try to represent the relevant information in as much of a structured format as possible to help with further reasoning/processing.\n2. Using the information extracted, determine a reasonable approach to solving the problem using code, such that executing the code will return the final answer.\n3. Write a Python program to calculate and return the final answer. Use comments to explain the structure of the code and do not use a main() function.\nThe JSON must be enclosed in a markdown code block and the Python function must be in a separate markdown code block and be called `solve` and accept a single input called `symbols` representing the JSON information extracted. Do not include any `if __name__ == \"__main__\"` statement and you can assume the JSON will be loaded into the variable called `symbols` by the user.\nThe Python code should not just return the answer or perform all reasoning in comments and instead leverage the code itself to perform the reasoning.\nBe careful that the code returns the answer as expected by the question, for instance, if the question is multiple choice, the code must return the choice as described in the question.\nBe sure to always output a JSON code block and a Python code block.\nMake sure to follow these formatting requirements exactly.\n"
+          },
+          {
+            "role": "user",
+            "content": "Consider a new alphabet whose letters have the same order as the English alphabet, except that x is the last letter. Sort the following words with the new alphabet and separate them with comma: oversimplifications, consternate, administrations, collaborations, blest, buxton, manipulations, tariff, quizzes, sound, xerxes, institutionalization, proximity"
+          },
+          {
+            "role": "assistant",
+            "content": "To solve this problem, we need to sort the given list of words according to a modified version of the English alphabet where 'x' is the last letter. This means the order of the alphabet is: a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, y, z, x.\n\nLet's break down the steps:\n\n1. **Extract the relevant information**: We have a list of words and a modified alphabet order.\n2. **Plan the sorting**: We need to sort the words based on the new alphabet order. This involves creating a custom sorting function that uses the modified order.\n3. **Implement the solution**: Write a Python function to perform the sorting and return the sorted list as a comma-separated string.\n\nLet's start by extracting the relevant information in JSON format.\n\n```json\n{\n  \"words\": [\n    \"oversimplifications\",\n    \"consternate\",\n    \"administrations\",\n    \"collaborations\",\n    \"blest\",\n    \"buxton\",\n    \"manipulations\",\n    \"tariff\",\n    \"quizzes\",\n    \"sound\",\n    \"xerxes\",\n    \"institutionalization\",\n    \"proximity\"\n  ],\n  \"alphabet_order\": \"abcdefghijklmnopqrstuvwxyzx\"\n}\n```\n\nNow, let's write the Python function to sort the words according to the new alphabet order."
+          },
+          {
+            "role": "user",
+            "content": "Please fix the issues with the code and symbols or output \"FINISHED\".\nThe following is the result of evaluating the above code with the extracted symbols.\n```\nReturn value: None\nStandard output: \nExceptions: Error: name 'solve' is not defined\n```\n\nThe following is the summary of issues found with the code or the extracted symbols by another model:\n```\n1. The code is missing entirely, which means it does not perform any operations to solve the problem. As a result, it does not sort the words according to the new alphabet order or return any output.\n\n2. The code should define a function or logic to sort the words based on the provided custom alphabet order and return the sorted list as a comma-separated string.\n\n3. The extracted symbols are correct, but they are not utilized in any way due to the absence of code. The `alphabet_order` and `words` need to be used to implement the sorting logic.\n```\n\nIf there are any issues which impact the correctness of the answer, please output code which does not have the issues. Before outputting any code, plan how the code will solve the problem and avoid the issues.\nIf stuck, try outputting different code to solve the problem in a different way.\nYou may also revise the extracted symbols. To do this, output the revised symbols in a JSON code block. Only include information in the JSON which is present in the original input to keep the code grounded in the specific problem. Some examples of symbol revisions are changing the names of certain symbols, providing further granularity, and adding information which was originally missed.\nIf everything is correct, output the word \"FINISHED\" and nothing else.\n"
+          }
+        ]
+      }
+    },
+    {
+      "step": "code_checking",
+      "message": "Running code critic (iteration 2)...",
+      "iteration": 2,
+      "prompt_details": {
+        "description": "Code quality analysis and critique (iteration 2)",
+        "conversation": [
+          {
+            "role": "system",
+            "content": "You will be given a question and a code solution and you must judge the quality of the code for solving the problem.\n                           \nLook for any of the following issues in the code:\n- The code should be input dependent, meaning it should use the input symbols to compute the answer. It is OK for the code to be specialized to the input (i.e. the reasoning itself may be hardcoded, like a decision tree where the branches are hardcoded).\n- The code should not return None unless \"None\" is the correct answer.\n- The code should return the answer, not just print it. If the question asks for a multiple choice answer, the code should return the choice as described in the question.\n- There should not be any example usage of the code.\n- If there is a simpler way to solve the problem, please describe it.\n- If there are any clear bugs in the code which impact the correctness of the answer, please describe them.\n- If there are any issues with the extracted symbols, please describe them as well, but separate these issues from the issues with the code.\n- If it is possible to sanity check the output of the code, please do so and describe if there are any obvious issues with the output and how the code could be fixed to avoid these issues.\n\n\n\n\nAfter analyzing the code in depth, output a concrete and concise summary of the issues that are present, do not include any code examples. Please order the issues by impact on answer correctness."
+          },
+          {
+            "role": "user",
+            "content": "Question: Consider a new alphabet whose letters have the same order as the English alphabet, except that x is the last letter. Sort the following words with the new alphabet and separate them with comma: oversimplifications, consternate, administrations, collaborations, blest, buxton, manipulations, tariff, quizzes, sound, xerxes, institutionalization, proximity\n\nThe following are extracted symbols from the question in JSON format followed by a Python program which takes the JSON as an argument called `symbols` and computes the answer.\n```json\n\"\"\n```\n\n```python\n\ndef solve(symbols):\n    # Extract words and custom alphabet order from symbols\n    words = symbols[\"words\"]\n    alphabet_order = symbols[\"alphabet_order\"]\n    \n    # Create a mapping of each letter to its position in the custom alphabet order\n    order_map = {char: index for index, char in enumerate(alphabet_order)}\n    \n    # Define a custom sorting key function\n    def custom_sort_key(word):\n        # Convert each word into a tuple of indices based on the custom alphabet order\n        return [order_map[char] for char in word]\n    \n    # Sort the words using the custom sorting key\n    sorted_words = sorted(words, key=custom_sort_key)\n    \n    # Join the sorted words into a comma-separated string\n    result = \", \".join(sorted_words)\n    \n    return result\n\n```\n\nCode execution result:\n```\nReturn value: None\nStandard output: \nExceptions: Error: string indices must be integers, not 'str'\n```\n\nOutput a concrete and concise summary of only the issues that are present, do not include any code examples.\n"
+          }
+        ]
+      }
+    },
+    {
+      "step": "refinement",
+      "message": "Refining solution (iteration 2)...",
+      "iteration": 2,
+      "prompt_details": {
+        "description": "Solution refinement (iteration 2)",
+        "conversation": [
+          {
+            "role": "system",
+            "content": "You will be given a question and you must answer it by extracting relevant symbols in JSON format and then writing a Python program to calculate the final answer.\n\nYou MUST always plan extensively before outputting any symbols or code.\n\nYou MUST iterate and keep going until the problem is solved.\n\n# Workflow\n\n## Problem Solving Steps\n1. First extract relevant information from the input as JSON. Try to represent the relevant information in as much of a structured format as possible to help with further reasoning/processing.\n2. Using the information extracted, determine a reasonable approach to solving the problem using code, such that executing the code will return the final answer.\n3. Write a Python program to calculate and return the final answer. Use comments to explain the structure of the code and do not use a main() function.\nThe JSON must be enclosed in a markdown code block and the Python function must be in a separate markdown code block and be called `solve` and accept a single input called `symbols` representing the JSON information extracted. Do not include any `if __name__ == \"__main__\"` statement and you can assume the JSON will be loaded into the variable called `symbols` by the user.\nThe Python code should not just return the answer or perform all reasoning in comments and instead leverage the code itself to perform the reasoning.\nBe careful that the code returns the answer as expected by the question, for instance, if the question is multiple choice, the code must return the choice as described in the question.\nBe sure to always output a JSON code block and a Python code block.\nMake sure to follow these formatting requirements exactly.\n"
+          },
+          {
+            "role": "user",
+            "content": "Consider a new alphabet whose letters have the same order as the English alphabet, except that x is the last letter. Sort the following words with the new alphabet and separate them with comma: oversimplifications, consternate, administrations, collaborations, blest, buxton, manipulations, tariff, quizzes, sound, xerxes, institutionalization, proximity"
+          },
+          {
+            "role": "assistant",
+            "content": "To solve this problem, we need to sort the given list of words according to a modified version of the English alphabet where 'x' is the last letter. This means the order of the alphabet is: a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, y, z, x.\n\nLet's break down the steps:\n\n1. **Extract the relevant information**: We have a list of words and a modified alphabet order.\n2. **Plan the sorting**: We need to sort the words based on the new alphabet order. This involves creating a custom sorting function that uses the modified order.\n3. **Implement the solution**: Write a Python function to perform the sorting and return the sorted list as a comma-separated string.\n\nLet's start by extracting the relevant information in JSON format.\n\n```json\n{\n  \"words\": [\n    \"oversimplifications\",\n    \"consternate\",\n    \"administrations\",\n    \"collaborations\",\n    \"blest\",\n    \"buxton\",\n    \"manipulations\",\n    \"tariff\",\n    \"quizzes\",\n    \"sound\",\n    \"xerxes\",\n    \"institutionalization\",\n    \"proximity\"\n  ],\n  \"alphabet_order\": \"abcdefghijklmnopqrstuvwxyzx\"\n}\n```\n\nNow, let's write the Python function to sort the words according to the new alphabet order."
+          },
+          {
+            "role": "user",
+            "content": "Please fix the issues with the code and symbols or output \"FINISHED\".\nThe following is the result of evaluating the above code with the extracted symbols.\n```\nReturn value: None\nStandard output: \nExceptions: Error: name 'solve' is not defined\n```\n\nThe following is the summary of issues found with the code or the extracted symbols by another model:\n```\n1. The code is missing entirely, which means it does not perform any operations to solve the problem. As a result, it does not sort the words according to the new alphabet order or return any output.\n\n2. The code should define a function or logic to sort the words based on the provided custom alphabet order and return the sorted list as a comma-separated string.\n\n3. The extracted symbols are correct, but they are not utilized in any way due to the absence of code. The `alphabet_order` and `words` need to be used to implement the sorting logic.\n```\n\nIf there are any issues which impact the correctness of the answer, please output code which does not have the issues. Before outputting any code, plan how the code will solve the problem and avoid the issues.\nIf stuck, try outputting different code to solve the problem in a different way.\nYou may also revise the extracted symbols. To do this, output the revised symbols in a JSON code block. Only include information in the JSON which is present in the original input to keep the code grounded in the specific problem. Some examples of symbol revisions are changing the names of certain symbols, providing further granularity, and adding information which was originally missed.\nIf everything is correct, output the word \"FINISHED\" and nothing else.\n"
+          },
+          {
+            "role": "assistant",
+            "content": "To address the issues, we need to implement a Python function that sorts the words based on the custom alphabet order where 'x' is the last letter. Here's the plan:\n\n1. **Create a mapping**: We will create a dictionary that maps each letter to its position in the new alphabet order.\n2. **Sort the words**: Use the custom mapping to sort the list of words.\n3. **Return the result**: Convert the sorted list into a comma-separated string and return it.\n\nLet's implement this in the `solve` function.\n\n```python\ndef solve(symbols):\n    # Extract words and custom alphabet order from symbols\n    words = symbols[\"words\"]\n    alphabet_order = symbols[\"alphabet_order\"]\n    \n    # Create a mapping of each letter to its position in the custom alphabet order\n    order_map = {char: index for index, char in enumerate(alphabet_order)}\n    \n    # Define a custom sorting key function\n    def custom_sort_key(word):\n        # Convert each word into a tuple of indices based on the custom alphabet order\n        return [order_map[char] for char in word]\n    \n    # Sort the words using the custom sorting key\n    sorted_words = sorted(words, key=custom_sort_key)\n    \n    # Join the sorted words into a comma-separated string\n    result = \", \".join(sorted_words)\n    \n    return result\n```\n\nThis code defines a `solve` function that takes the extracted symbols, creates a custom order map, sorts the words based on this map, and returns the sorted words as a comma-separated string. This should resolve the issues and provide the correct output."
+          },
+          {
+            "role": "user",
+            "content": "Please fix the issues with the code and symbols or output \"FINISHED\".\nThe following is the result of evaluating the above code with the extracted symbols.\n```\nReturn value: None\nStandard output: \nExceptions: Error: string indices must be integers, not 'str'\n```\n\nThe following is the summary of issues found with the code or the extracted symbols by another model:\n```\n1. The code attempts to extract words and a custom alphabet order from the `symbols` input, but the extracted symbols are empty, leading to a KeyError when trying to access `symbols[\"words\"]` and `symbols[\"alphabet_order\"]`.\n\n2. The code does not handle the input directly from the question, which means it cannot function correctly without the necessary input data being provided in the expected format.\n\n3. The code execution results in an error due to the incorrect handling of the input, specifically the absence of the required keys in the `symbols` dictionary.\n\n4. The code does not address the specific requirement of the problem, which is to sort the words based on a new alphabet where 'x' is the last letter, as it relies on an undefined `alphabet_order` from the input. \n\n5. The code returns `None` due to the exception, which is not the expected behavior for solving the problem. The function should return a sorted, comma-separated string of words.\n```\n\nIf there are any issues which impact the correctness of the answer, please output code which does not have the issues. Before outputting any code, plan how the code will solve the problem and avoid the issues.\nIf stuck, try outputting different code to solve the problem in a different way.\nYou may also revise the extracted symbols. To do this, output the revised symbols in a JSON code block. Only include information in the JSON which is present in the original input to keep the code grounded in the specific problem. Some examples of symbol revisions are changing the names of certain symbols, providing further granularity, and adding information which was originally missed.\nIf everything is correct, output the word \"FINISHED\" and nothing else.\n"
+          }
+        ]
+      }
+    },
+    {
+      "step": "code_checking",
+      "message": "Running code critic (iteration 3)...",
+      "iteration": 3,
+      "prompt_details": {
+        "description": "Code quality analysis and critique (iteration 3)",
+        "conversation": [
+          {
+            "role": "system",
+            "content": "You will be given a question and a code solution and you must judge the quality of the code for solving the problem.\n                           \nLook for any of the following issues in the code:\n- The code should be input dependent, meaning it should use the input symbols to compute the answer. It is OK for the code to be specialized to the input (i.e. the reasoning itself may be hardcoded, like a decision tree where the branches are hardcoded).\n- The code should not return None unless \"None\" is the correct answer.\n- The code should return the answer, not just print it. If the question asks for a multiple choice answer, the code should return the choice as described in the question.\n- There should not be any example usage of the code.\n- If there is a simpler way to solve the problem, please describe it.\n- If there are any clear bugs in the code which impact the correctness of the answer, please describe them.\n- If there are any issues with the extracted symbols, please describe them as well, but separate these issues from the issues with the code.\n- If it is possible to sanity check the output of the code, please do so and describe if there are any obvious issues with the output and how the code could be fixed to avoid these issues.\n\n\n\n\nAfter analyzing the code in depth, output a concrete and concise summary of the issues that are present, do not include any code examples. Please order the issues by impact on answer correctness."
+          },
+          {
+            "role": "user",
+            "content": "Question: Consider a new alphabet whose letters have the same order as the English alphabet, except that x is the last letter. Sort the following words with the new alphabet and separate them with comma: oversimplifications, consternate, administrations, collaborations, blest, buxton, manipulations, tariff, quizzes, sound, xerxes, institutionalization, proximity\n\nThe following are extracted symbols from the question in JSON format followed by a Python program which takes the JSON as an argument called `symbols` and computes the answer.\n```json\n{\n  \"words\": [\n    \"oversimplifications\",\n    \"consternate\",\n    \"administrations\",\n    \"collaborations\",\n    \"blest\",\n    \"buxton\",\n    \"manipulations\",\n    \"tariff\",\n    \"quizzes\",\n    \"sound\",\n    \"xerxes\",\n    \"institutionalization\",\n    \"proximity\"\n  ],\n  \"alphabet_order\": \"abcdefghijklmnopqrstuvwyzx\"\n}\n```\n\n```python\n\ndef solve(symbols):\n    # Extract words and custom alphabet order from symbols\n    words = symbols[\"words\"]\n    alphabet_order = symbols[\"alphabet_order\"]\n    \n    # Create a mapping of each letter to its position in the custom alphabet order\n    order_map = {char: index for index, char in enumerate(alphabet_order)}\n    \n    # Define a custom sorting key function\n    def custom_sort_key(word):\n        # Convert each word into a tuple of indices based on the custom alphabet order\n        return [order_map[char] for char in word]\n    \n    # Sort the words using the custom sorting key\n    sorted_words = sorted(words, key=custom_sort_key)\n    \n    # Join the sorted words into a comma-separated string\n    result = \", \".join(sorted_words)\n    \n    return result\n\n```\n\nCode execution result:\n```\nReturn value: administrations, blest, buxton, collaborations, consternate, institutionalization, manipulations, oversimplifications, proximity, quizzes, sound, tariff, xerxes\nStandard output: \nExceptions: None\n```\n\nOutput a concrete and concise summary of only the issues that are present, do not include any code examples.\n"
+          }
+        ]
+      }
+    },
+    {
+      "step": "refinement",
+      "message": "Refining solution (iteration 3)...",
+      "iteration": 3,
+      "prompt_details": {
+        "description": "Solution refinement (iteration 3)",
+        "conversation": [
+          {
+            "role": "system",
+            "content": "You will be given a question and you must answer it by extracting relevant symbols in JSON format and then writing a Python program to calculate the final answer.\n\nYou MUST always plan extensively before outputting any symbols or code.\n\nYou MUST iterate and keep going until the problem is solved.\n\n# Workflow\n\n## Problem Solving Steps\n1. First extract relevant information from the input as JSON. Try to represent the relevant information in as much of a structured format as possible to help with further reasoning/processing.\n2. Using the information extracted, determine a reasonable approach to solving the problem using code, such that executing the code will return the final answer.\n3. Write a Python program to calculate and return the final answer. Use comments to explain the structure of the code and do not use a main() function.\nThe JSON must be enclosed in a markdown code block and the Python function must be in a separate markdown code block and be called `solve` and accept a single input called `symbols` representing the JSON information extracted. Do not include any `if __name__ == \"__main__\"` statement and you can assume the JSON will be loaded into the variable called `symbols` by the user.\nThe Python code should not just return the answer or perform all reasoning in comments and instead leverage the code itself to perform the reasoning.\nBe careful that the code returns the answer as expected by the question, for instance, if the question is multiple choice, the code must return the choice as described in the question.\nBe sure to always output a JSON code block and a Python code block.\nMake sure to follow these formatting requirements exactly.\n"
+          },
+          {
+            "role": "user",
+            "content": "Consider a new alphabet whose letters have the same order as the English alphabet, except that x is the last letter. Sort the following words with the new alphabet and separate them with comma: oversimplifications, consternate, administrations, collaborations, blest, buxton, manipulations, tariff, quizzes, sound, xerxes, institutionalization, proximity"
+          },
+          {
+            "role": "assistant",
+            "content": "To solve this problem, we need to sort the given list of words according to a modified version of the English alphabet where 'x' is the last letter. This means the order of the alphabet is: a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, y, z, x.\n\nLet's break down the steps:\n\n1. **Extract the relevant information**: We have a list of words and a modified alphabet order.\n2. **Plan the sorting**: We need to sort the words based on the new alphabet order. This involves creating a custom sorting function that uses the modified order.\n3. **Implement the solution**: Write a Python function to perform the sorting and return the sorted list as a comma-separated string.\n\nLet's start by extracting the relevant information in JSON format.\n\n```json\n{\n  \"words\": [\n    \"oversimplifications\",\n    \"consternate\",\n    \"administrations\",\n    \"collaborations\",\n    \"blest\",\n    \"buxton\",\n    \"manipulations\",\n    \"tariff\",\n    \"quizzes\",\n    \"sound\",\n    \"xerxes\",\n    \"institutionalization\",\n    \"proximity\"\n  ],\n  \"alphabet_order\": \"abcdefghijklmnopqrstuvwxyzx\"\n}\n```\n\nNow, let's write the Python function to sort the words according to the new alphabet order."
+          },
+          {
+            "role": "user",
+            "content": "Please fix the issues with the code and symbols or output \"FINISHED\".\nThe following is the result of evaluating the above code with the extracted symbols.\n```\nReturn value: None\nStandard output: \nExceptions: Error: name 'solve' is not defined\n```\n\nThe following is the summary of issues found with the code or the extracted symbols by another model:\n```\n1. The code is missing entirely, which means it does not perform any operations to solve the problem. As a result, it does not sort the words according to the new alphabet order or return any output.\n\n2. The code should define a function or logic to sort the words based on the provided custom alphabet order and return the sorted list as a comma-separated string.\n\n3. The extracted symbols are correct, but they are not utilized in any way due to the absence of code. The `alphabet_order` and `words` need to be used to implement the sorting logic.\n```\n\nIf there are any issues which impact the correctness of the answer, please output code which does not have the issues. Before outputting any code, plan how the code will solve the problem and avoid the issues.\nIf stuck, try outputting different code to solve the problem in a different way.\nYou may also revise the extracted symbols. To do this, output the revised symbols in a JSON code block. Only include information in the JSON which is present in the original input to keep the code grounded in the specific problem. Some examples of symbol revisions are changing the names of certain symbols, providing further granularity, and adding information which was originally missed.\nIf everything is correct, output the word \"FINISHED\" and nothing else.\n"
+          },
+          {
+            "role": "assistant",
+            "content": "To address the issues, we need to implement a Python function that sorts the words based on the custom alphabet order where 'x' is the last letter. Here's the plan:\n\n1. **Create a mapping**: We will create a dictionary that maps each letter to its position in the new alphabet order.\n2. **Sort the words**: Use the custom mapping to sort the list of words.\n3. **Return the result**: Convert the sorted list into a comma-separated string and return it.\n\nLet's implement this in the `solve` function.\n\n```python\ndef solve(symbols):\n    # Extract words and custom alphabet order from symbols\n    words = symbols[\"words\"]\n    alphabet_order = symbols[\"alphabet_order\"]\n    \n    # Create a mapping of each letter to its position in the custom alphabet order\n    order_map = {char: index for index, char in enumerate(alphabet_order)}\n    \n    # Define a custom sorting key function\n    def custom_sort_key(word):\n        # Convert each word into a tuple of indices based on the custom alphabet order\n        return [order_map[char] for char in word]\n    \n    # Sort the words using the custom sorting key\n    sorted_words = sorted(words, key=custom_sort_key)\n    \n    # Join the sorted words into a comma-separated string\n    result = \", \".join(sorted_words)\n    \n    return result\n```\n\nThis code defines a `solve` function that takes the extracted symbols, creates a custom order map, sorts the words based on this map, and returns the sorted words as a comma-separated string. This should resolve the issues and provide the correct output."
+          },
+          {
+            "role": "user",
+            "content": "Please fix the issues with the code and symbols or output \"FINISHED\".\nThe following is the result of evaluating the above code with the extracted symbols.\n```\nReturn value: None\nStandard output: \nExceptions: Error: string indices must be integers, not 'str'\n```\n\nThe following is the summary of issues found with the code or the extracted symbols by another model:\n```\n1. The code attempts to extract words and a custom alphabet order from the `symbols` input, but the extracted symbols are empty, leading to a KeyError when trying to access `symbols[\"words\"]` and `symbols[\"alphabet_order\"]`.\n\n2. The code does not handle the input directly from the question, which means it cannot function correctly without the necessary input data being provided in the expected format.\n\n3. The code execution results in an error due to the incorrect handling of the input, specifically the absence of the required keys in the `symbols` dictionary.\n\n4. The code does not address the specific requirement of the problem, which is to sort the words based on a new alphabet where 'x' is the last letter, as it relies on an undefined `alphabet_order` from the input. \n\n5. The code returns `None` due to the exception, which is not the expected behavior for solving the problem. The function should return a sorted, comma-separated string of words.\n```\n\nIf there are any issues which impact the correctness of the answer, please output code which does not have the issues. Before outputting any code, plan how the code will solve the problem and avoid the issues.\nIf stuck, try outputting different code to solve the problem in a different way.\nYou may also revise the extracted symbols. To do this, output the revised symbols in a JSON code block. Only include information in the JSON which is present in the original input to keep the code grounded in the specific problem. Some examples of symbol revisions are changing the names of certain symbols, providing further granularity, and adding information which was originally missed.\nIf everything is correct, output the word \"FINISHED\" and nothing else.\n"
+          },
+          {
+            "role": "assistant",
+            "content": "```json\n{\n  \"words\": [\n    \"oversimplifications\",\n    \"consternate\",\n    \"administrations\",\n    \"collaborations\",\n    \"blest\",\n    \"buxton\",\n    \"manipulations\",\n    \"tariff\",\n    \"quizzes\",\n    \"sound\",\n    \"xerxes\",\n    \"institutionalization\",\n    \"proximity\"\n  ],\n  \"alphabet_order\": \"abcdefghijklmnopqrstuvwyzx\"\n}\n```\n\n```python\ndef solve(symbols):\n    # Extract words and custom alphabet order from symbols\n    words = symbols[\"words\"]\n    alphabet_order = symbols[\"alphabet_order\"]\n    \n    # Create a mapping of each letter to its position in the custom alphabet order\n    order_map = {char: index for index, char in enumerate(alphabet_order)}\n    \n    # Define a custom sorting key function\n    def custom_sort_key(word):\n        # Convert each word into a tuple of indices based on the custom alphabet order\n        return [order_map[char] for char in word]\n    \n    # Sort the words using the custom sorting key\n    sorted_words = sorted(words, key=custom_sort_key)\n    \n    # Join the sorted words into a comma-separated string\n    result = \", \".join(sorted_words)\n    \n    return result\n```"
+          },
+          {
+            "role": "user",
+            "content": "Please fix the issues with the code and symbols or output \"FINISHED\".\nThe following is the result of evaluating the above code with the extracted symbols.\n```\nReturn value: administrations, blest, buxton, collaborations, consternate, institutionalization, manipulations, oversimplifications, proximity, quizzes, sound, tariff, xerxes\nStandard output: \nExceptions: None\n```\n\nThe following is the summary of issues found with the code or the extracted symbols by another model:\n```\n1. **Incorrect Alphabet Order**: The custom alphabet order provided in the code is incorrect. The letter 'x' should be the last letter, but the order given is \"abcdefghijklmnopqrstuvwyzx\", which places 'z' after 'w' and before 'x'. The correct order should be \"abcdefghijklmnopqrstuvwyz\" with 'x' at the end.\n\n2. **Incorrect Sorting**: Due to the incorrect alphabet order, the sorting of words is not performed as intended according to the problem statement. This results in an incorrect order of words in the output.\n\n3. **Output Format**: The code correctly returns a comma-separated string of sorted words, which matches the required output format. However, due to the incorrect sorting, the output is not as expected.\n```\n\nIf there are any issues which impact the correctness of the answer, please output code which does not have the issues. Before outputting any code, plan how the code will solve the problem and avoid the issues.\nIf stuck, try outputting different code to solve the problem in a different way.\nYou may also revise the extracted symbols. To do this, output the revised symbols in a JSON code block. Only include information in the JSON which is present in the original input to keep the code grounded in the specific problem. Some examples of symbol revisions are changing the names of certain symbols, providing further granularity, and adding information which was originally missed.\nIf everything is correct, output the word \"FINISHED\" and nothing else.\n"
+          }
+        ]
+      }
+    },
+    {
+      "step": "code_checking",
+      "message": "Running code critic (iteration 4)...",
+      "iteration": 4,
+      "prompt_details": {
+        "description": "Code quality analysis and critique (iteration 4)",
+        "conversation": [
+          {
+            "role": "system",
+            "content": "You will be given a question and a code solution and you must judge the quality of the code for solving the problem.\n                           \nLook for any of the following issues in the code:\n- The code should be input dependent, meaning it should use the input symbols to compute the answer. It is OK for the code to be specialized to the input (i.e. the reasoning itself may be hardcoded, like a decision tree where the branches are hardcoded).\n- The code should not return None unless \"None\" is the correct answer.\n- The code should return the answer, not just print it. If the question asks for a multiple choice answer, the code should return the choice as described in the question.\n- There should not be any example usage of the code.\n- If there is a simpler way to solve the problem, please describe it.\n- If there are any clear bugs in the code which impact the correctness of the answer, please describe them.\n- If there are any issues with the extracted symbols, please describe them as well, but separate these issues from the issues with the code.\n- If it is possible to sanity check the output of the code, please do so and describe if there are any obvious issues with the output and how the code could be fixed to avoid these issues.\n\n\n\n\nAfter analyzing the code in depth, output a concrete and concise summary of the issues that are present, do not include any code examples. Please order the issues by impact on answer correctness."
+          },
+          {
+            "role": "user",
+            "content": "Question: Consider a new alphabet whose letters have the same order as the English alphabet, except that x is the last letter. Sort the following words with the new alphabet and separate them with comma: oversimplifications, consternate, administrations, collaborations, blest, buxton, manipulations, tariff, quizzes, sound, xerxes, institutionalization, proximity\n\nThe following are extracted symbols from the question in JSON format followed by a Python program which takes the JSON as an argument called `symbols` and computes the answer.\n```json\n{\n  \"words\": [\n    \"oversimplifications\",\n    \"consternate\",\n    \"administrations\",\n    \"collaborations\",\n    \"blest\",\n    \"buxton\",\n    \"manipulations\",\n    \"tariff\",\n    \"quizzes\",\n    \"sound\",\n    \"xerxes\",\n    \"institutionalization\",\n    \"proximity\"\n  ],\n  \"alphabet_order\": \"abcdefghijklmnopqrstuvwyz\"\n}\n```\n\n```python\n\ndef solve(symbols):\n    # Extract words and custom alphabet order from symbols\n    words = symbols[\"words\"]\n    alphabet_order = symbols[\"alphabet_order\"] + \"x\"  # Correctly place 'x' at the end\n    \n    # Create a mapping of each letter to its position in the custom alphabet order\n    order_map = {char: index for index, char in enumerate(alphabet_order)}\n    \n    # Define a custom sorting key function\n    def custom_sort_key(word):\n        # Convert each word into a tuple of indices based on the custom alphabet order\n        return [order_map[char] for char in word]\n    \n    # Sort the words using the custom sorting key\n    sorted_words = sorted(words, key=custom_sort_key)\n    \n    # Join the sorted words into a comma-separated string\n    result = \", \".join(sorted_words)\n    \n    return result\n\n```\n\nCode execution result:\n```\nReturn value: administrations, blest, buxton, collaborations, consternate, institutionalization, manipulations, oversimplifications, proximity, quizzes, sound, tariff, xerxes\nStandard output: \nExceptions: None\n```\n\nOutput a concrete and concise summary of only the issues that are present, do not include any code examples.\n"
+          }
+        ]
+      }
+    },
+    {
+      "step": "refinement",
+      "message": "Refining solution (iteration 4)...",
+      "iteration": 4,
+      "prompt_details": {
+        "description": "Solution refinement (iteration 4)",
+        "conversation": [
+          {
+            "role": "system",
+            "content": "You will be given a question and you must answer it by extracting relevant symbols in JSON format and then writing a Python program to calculate the final answer.\n\nYou MUST always plan extensively before outputting any symbols or code.\n\nYou MUST iterate and keep going until the problem is solved.\n\n# Workflow\n\n## Problem Solving Steps\n1. First extract relevant information from the input as JSON. Try to represent the relevant information in as much of a structured format as possible to help with further reasoning/processing.\n2. Using the information extracted, determine a reasonable approach to solving the problem using code, such that executing the code will return the final answer.\n3. Write a Python program to calculate and return the final answer. Use comments to explain the structure of the code and do not use a main() function.\nThe JSON must be enclosed in a markdown code block and the Python function must be in a separate markdown code block and be called `solve` and accept a single input called `symbols` representing the JSON information extracted. Do not include any `if __name__ == \"__main__\"` statement and you can assume the JSON will be loaded into the variable called `symbols` by the user.\nThe Python code should not just return the answer or perform all reasoning in comments and instead leverage the code itself to perform the reasoning.\nBe careful that the code returns the answer as expected by the question, for instance, if the question is multiple choice, the code must return the choice as described in the question.\nBe sure to always output a JSON code block and a Python code block.\nMake sure to follow these formatting requirements exactly.\n"
+          },
+          {
+            "role": "user",
+            "content": "Consider a new alphabet whose letters have the same order as the English alphabet, except that x is the last letter. Sort the following words with the new alphabet and separate them with comma: oversimplifications, consternate, administrations, collaborations, blest, buxton, manipulations, tariff, quizzes, sound, xerxes, institutionalization, proximity"
+          },
+          {
+            "role": "assistant",
+            "content": "To solve this problem, we need to sort the given list of words according to a modified version of the English alphabet where 'x' is the last letter. This means the order of the alphabet is: a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, y, z, x.\n\nLet's break down the steps:\n\n1. **Extract the relevant information**: We have a list of words and a modified alphabet order.\n2. **Plan the sorting**: We need to sort the words based on the new alphabet order. This involves creating a custom sorting function that uses the modified order.\n3. **Implement the solution**: Write a Python function to perform the sorting and return the sorted list as a comma-separated string.\n\nLet's start by extracting the relevant information in JSON format.\n\n```json\n{\n  \"words\": [\n    \"oversimplifications\",\n    \"consternate\",\n    \"administrations\",\n    \"collaborations\",\n    \"blest\",\n    \"buxton\",\n    \"manipulations\",\n    \"tariff\",\n    \"quizzes\",\n    \"sound\",\n    \"xerxes\",\n    \"institutionalization\",\n    \"proximity\"\n  ],\n  \"alphabet_order\": \"abcdefghijklmnopqrstuvwxyzx\"\n}\n```\n\nNow, let's write the Python function to sort the words according to the new alphabet order."
+          },
+          {
+            "role": "user",
+            "content": "Please fix the issues with the code and symbols or output \"FINISHED\".\nThe following is the result of evaluating the above code with the extracted symbols.\n```\nReturn value: None\nStandard output: \nExceptions: Error: name 'solve' is not defined\n```\n\nThe following is the summary of issues found with the code or the extracted symbols by another model:\n```\n1. The code is missing entirely, which means it does not perform any operations to solve the problem. As a result, it does not sort the words according to the new alphabet order or return any output.\n\n2. The code should define a function or logic to sort the words based on the provided custom alphabet order and return the sorted list as a comma-separated string.\n\n3. The extracted symbols are correct, but they are not utilized in any way due to the absence of code. The `alphabet_order` and `words` need to be used to implement the sorting logic.\n```\n\nIf there are any issues which impact the correctness of the answer, please output code which does not have the issues. Before outputting any code, plan how the code will solve the problem and avoid the issues.\nIf stuck, try outputting different code to solve the problem in a different way.\nYou may also revise the extracted symbols. To do this, output the revised symbols in a JSON code block. Only include information in the JSON which is present in the original input to keep the code grounded in the specific problem. Some examples of symbol revisions are changing the names of certain symbols, providing further granularity, and adding information which was originally missed.\nIf everything is correct, output the word \"FINISHED\" and nothing else.\n"
+          },
+          {
+            "role": "assistant",
+            "content": "To address the issues, we need to implement a Python function that sorts the words based on the custom alphabet order where 'x' is the last letter. Here's the plan:\n\n1. **Create a mapping**: We will create a dictionary that maps each letter to its position in the new alphabet order.\n2. **Sort the words**: Use the custom mapping to sort the list of words.\n3. **Return the result**: Convert the sorted list into a comma-separated string and return it.\n\nLet's implement this in the `solve` function.\n\n```python\ndef solve(symbols):\n    # Extract words and custom alphabet order from symbols\n    words = symbols[\"words\"]\n    alphabet_order = symbols[\"alphabet_order\"]\n    \n    # Create a mapping of each letter to its position in the custom alphabet order\n    order_map = {char: index for index, char in enumerate(alphabet_order)}\n    \n    # Define a custom sorting key function\n    def custom_sort_key(word):\n        # Convert each word into a tuple of indices based on the custom alphabet order\n        return [order_map[char] for char in word]\n    \n    # Sort the words using the custom sorting key\n    sorted_words = sorted(words, key=custom_sort_key)\n    \n    # Join the sorted words into a comma-separated string\n    result = \", \".join(sorted_words)\n    \n    return result\n```\n\nThis code defines a `solve` function that takes the extracted symbols, creates a custom order map, sorts the words based on this map, and returns the sorted words as a comma-separated string. This should resolve the issues and provide the correct output."
+          },
+          {
+            "role": "user",
+            "content": "Please fix the issues with the code and symbols or output \"FINISHED\".\nThe following is the result of evaluating the above code with the extracted symbols.\n```\nReturn value: None\nStandard output: \nExceptions: Error: string indices must be integers, not 'str'\n```\n\nThe following is the summary of issues found with the code or the extracted symbols by another model:\n```\n1. The code attempts to extract words and a custom alphabet order from the `symbols` input, but the extracted symbols are empty, leading to a KeyError when trying to access `symbols[\"words\"]` and `symbols[\"alphabet_order\"]`.\n\n2. The code does not handle the input directly from the question, which means it cannot function correctly without the necessary input data being provided in the expected format.\n\n3. The code execution results in an error due to the incorrect handling of the input, specifically the absence of the required keys in the `symbols` dictionary.\n\n4. The code does not address the specific requirement of the problem, which is to sort the words based on a new alphabet where 'x' is the last letter, as it relies on an undefined `alphabet_order` from the input. \n\n5. The code returns `None` due to the exception, which is not the expected behavior for solving the problem. The function should return a sorted, comma-separated string of words.\n```\n\nIf there are any issues which impact the correctness of the answer, please output code which does not have the issues. Before outputting any code, plan how the code will solve the problem and avoid the issues.\nIf stuck, try outputting different code to solve the problem in a different way.\nYou may also revise the extracted symbols. To do this, output the revised symbols in a JSON code block. Only include information in the JSON which is present in the original input to keep the code grounded in the specific problem. Some examples of symbol revisions are changing the names of certain symbols, providing further granularity, and adding information which was originally missed.\nIf everything is correct, output the word \"FINISHED\" and nothing else.\n"
+          },
+          {
+            "role": "assistant",
+            "content": "```json\n{\n  \"words\": [\n    \"oversimplifications\",\n    \"consternate\",\n    \"administrations\",\n    \"collaborations\",\n    \"blest\",\n    \"buxton\",\n    \"manipulations\",\n    \"tariff\",\n    \"quizzes\",\n    \"sound\",\n    \"xerxes\",\n    \"institutionalization\",\n    \"proximity\"\n  ],\n  \"alphabet_order\": \"abcdefghijklmnopqrstuvwyzx\"\n}\n```\n\n```python\ndef solve(symbols):\n    # Extract words and custom alphabet order from symbols\n    words = symbols[\"words\"]\n    alphabet_order = symbols[\"alphabet_order\"]\n    \n    # Create a mapping of each letter to its position in the custom alphabet order\n    order_map = {char: index for index, char in enumerate(alphabet_order)}\n    \n    # Define a custom sorting key function\n    def custom_sort_key(word):\n        # Convert each word into a tuple of indices based on the custom alphabet order\n        return [order_map[char] for char in word]\n    \n    # Sort the words using the custom sorting key\n    sorted_words = sorted(words, key=custom_sort_key)\n    \n    # Join the sorted words into a comma-separated string\n    result = \", \".join(sorted_words)\n    \n    return result\n```"
+          },
+          {
+            "role": "user",
+            "content": "Please fix the issues with the code and symbols or output \"FINISHED\".\nThe following is the result of evaluating the above code with the extracted symbols.\n```\nReturn value: administrations, blest, buxton, collaborations, consternate, institutionalization, manipulations, oversimplifications, proximity, quizzes, sound, tariff, xerxes\nStandard output: \nExceptions: None\n```\n\nThe following is the summary of issues found with the code or the extracted symbols by another model:\n```\n1. **Incorrect Alphabet Order**: The custom alphabet order provided in the code is incorrect. The letter 'x' should be the last letter, but the order given is \"abcdefghijklmnopqrstuvwyzx\", which places 'z' after 'w' and before 'x'. The correct order should be \"abcdefghijklmnopqrstuvwyz\" with 'x' at the end.\n\n2. **Incorrect Sorting**: Due to the incorrect alphabet order, the sorting of words is not performed as intended according to the problem statement. This results in an incorrect order of words in the output.\n\n3. **Output Format**: The code correctly returns a comma-separated string of sorted words, which matches the required output format. However, due to the incorrect sorting, the output is not as expected.\n```\n\nIf there are any issues which impact the correctness of the answer, please output code which does not have the issues. Before outputting any code, plan how the code will solve the problem and avoid the issues.\nIf stuck, try outputting different code to solve the problem in a different way.\nYou may also revise the extracted symbols. To do this, output the revised symbols in a JSON code block. Only include information in the JSON which is present in the original input to keep the code grounded in the specific problem. Some examples of symbol revisions are changing the names of certain symbols, providing further granularity, and adding information which was originally missed.\nIf everything is correct, output the word \"FINISHED\" and nothing else.\n"
+          },
+          {
+            "role": "assistant",
+            "content": "```json\n{\n  \"words\": [\n    \"oversimplifications\",\n    \"consternate\",\n    \"administrations\",\n    \"collaborations\",\n    \"blest\",\n    \"buxton\",\n    \"manipulations\",\n    \"tariff\",\n    \"quizzes\",\n    \"sound\",\n    \"xerxes\",\n    \"institutionalization\",\n    \"proximity\"\n  ],\n  \"alphabet_order\": \"abcdefghijklmnopqrstuvwyz\"\n}\n```\n\n```python\ndef solve(symbols):\n    # Extract words and custom alphabet order from symbols\n    words = symbols[\"words\"]\n    alphabet_order = symbols[\"alphabet_order\"] + \"x\"  # Correctly place 'x' at the end\n    \n    # Create a mapping of each letter to its position in the custom alphabet order\n    order_map = {char: index for index, char in enumerate(alphabet_order)}\n    \n    # Define a custom sorting key function\n    def custom_sort_key(word):\n        # Convert each word into a tuple of indices based on the custom alphabet order\n        return [order_map[char] for char in word]\n    \n    # Sort the words using the custom sorting key\n    sorted_words = sorted(words, key=custom_sort_key)\n    \n    # Join the sorted words into a comma-separated string\n    result = \", \".join(sorted_words)\n    \n    return result\n```"
+          },
+          {
+            "role": "user",
+            "content": "Please fix the issues with the code and symbols or output \"FINISHED\".\nThe following is the result of evaluating the above code with the extracted symbols.\n```\nReturn value: administrations, blest, buxton, collaborations, consternate, institutionalization, manipulations, oversimplifications, proximity, quizzes, sound, tariff, xerxes\nStandard output: \nExceptions: None\n```\n\nThe following is the summary of issues found with the code or the extracted symbols by another model:\n```\n1. **Incorrect Alphabet Order**: The code incorrectly appends 'x' to the end of the `alphabet_order` string, which already includes 'x' in its correct position. This results in an incorrect order where 'x' is considered twice, potentially causing incorrect sorting behavior.\n\n2. **Incorrect Sorting**: Due to the incorrect alphabet order, the sorting of words is not performed according to the specified new alphabet where 'x' should be the last letter. This impacts the correctness of the answer.\n\n3. **Output Format**: The code correctly returns a comma-separated string of sorted words, which matches the required output format. However, due to the incorrect sorting, the output is not as expected.\n```\n\nIf there are any issues which impact the correctness of the answer, please output code which does not have the issues. Before outputting any code, plan how the code will solve the problem and avoid the issues.\nIf stuck, try outputting different code to solve the problem in a different way.\nYou may also revise the extracted symbols. To do this, output the revised symbols in a JSON code block. Only include information in the JSON which is present in the original input to keep the code grounded in the specific problem. Some examples of symbol revisions are changing the names of certain symbols, providing further granularity, and adding information which was originally missed.\nIf everything is correct, output the word \"FINISHED\" and nothing else.\n"
+          }
+        ]
+      }
+    },
+    {
+      "step": "finished",
+      "message": "Solution completed successfully!",
+      "iteration": null,
+      "prompt_details": null
+    }
+  ],
+  "timestamp": 1760565821.8149712
+}

src/pips/static/README.md

@@ -0,0 +1,163 @@
+# PIPS Frontend Modularization
+
+This directory contains the refactored, modular version of the PIPS (Per-Instance Program Synthesis) frontend application.
+
+## 📁 Structure Overview
+
+```
+pips/static/
+├── css/
+│   ├── main.css              # Main CSS entry point (imports all modules)
+│   ├── tokens.css            # Design tokens (colors, spacing, etc.)
+│   ├── base.css              # Global resets and typography
+│   └── components/
+│       ├── panels.css        # Left/right panel layouts
+│       ├── forms.css         # Form elements and inputs
+│       ├── buttons.css       # Button components
+│       ├── chat.css          # Chat area and message styles
+│       ├── sessions.css      # Session management UI
+│       ├── modal.css         # Modal dialogs
+│       ├── utilities.css     # Utility classes and animations
+│       └── responsive.css    # Media queries for mobile
+├── js/
+│   ├── main.js               # Application bootstrap
+│   ├── core/
+│   │   ├── logger.js         # Debug logging utility
+│   │   ├── state.js          # Application state management
+│   │   └── storage.js        # localStorage utilities
+│   └── network/
+│       └── socket.js         # Socket.IO connection management
+└── README.md                 # This file
+```
+
+## 🔄 Migration from Monolithic
+
+### Before (index.html)
+- **~4000 lines** in single file
+- Inline `<style>` block with ~1500 lines of CSS
+- Inline `<script>` block with ~3500 lines of JavaScript
+- All functionality tightly coupled
+- Difficult to maintain and debug
+
+### After (Modular)
+- **HTML template**: Clean markup without inline styles/scripts
+- **CSS modules**: 8 focused stylesheets (~200-400 lines each)
+- **JS modules**: ES6 modules with clear separation of concerns
+- **Zero functional changes**: All UI/UX behavior preserved
+- **Better maintainability**: Each module has single responsibility
+
+## 🚀 Features Preserved
+
+✅ **All original functionality maintained**:
+- Socket.IO real-time communication
+- Problem solving workflow
+- Session management and persistence
+- Settings modal with API key storage
+- Image upload with drag & drop
+- Responsive design for mobile
+- Code syntax highlighting
+- Progress indicators and status updates
+- Chat history export
+
+## 🛠 Development Guide
+
+### Using the Modular Version
+
+1. **Replace the template**: Use `index_modular.html` instead of `index.html`
+2. **CSS is automatically loaded**: `main.css` imports all component stylesheets
+3. **JS modules load automatically**: ES6 modules with proper imports
+
+### CSS Architecture
+
+- **Tokens first**: All colors, spacing, and design tokens in `tokens.css`
+- **Component-based**: Each UI component has its own stylesheet
+- **BEM-like naming**: Clear, descriptive class names
+- **Mobile-first responsive**: Media queries in `responsive.css`
+
+### JavaScript Architecture
+
+- **ES6 modules**: Clean imports/exports
+- **Event-driven**: State changes emit events for loose coupling
+- **Error handling**: Global error boundary with detailed logging
+- **Singleton patterns**: Shared instances for state, storage, socket
+
+### Adding New Features
+
+1. **CSS**: Add new component files in `css/components/`
+2. **JS**: Create feature modules and import in `main.js`
+3. **Update imports**: Add to `main.css` and import in relevant JS files
+
+## 🧪 Testing
+
+The modular version maintains 100% functional compatibility:
+
+- **Visual regression**: All styles render identically
+- **Behavioral compatibility**: All interactions work the same
+- **API compatibility**: Same Socket.IO events and data flow
+- **Storage compatibility**: Same localStorage keys and data formats
+
+## 📊 Benefits Achieved
+
+| Metric | Before | After | Improvement |
+|--------|--------|-------|-------------|
+| **Maintainability** | Single 4000-line file | 8 CSS + 5 JS modules | 🎯 **Huge** |
+| **Debuggability** | Global scope pollution | Modular namespaces | 🎯 **Much better** |
+| **Team collaboration** | Merge conflicts frequent | Parallel development | 🎯 **Greatly improved** |
+| **Code reusability** | Copy-paste only | Import/export modules | 🎯 **Full reusability** |
+| **Bundle size** | Same | Same | ✅ **No change** |
+| **Performance** | Same | Same | ✅ **No change** |
+| **Functionality** | All features | All features | ✅ **Zero regressions** |
+
+## 🔧 Browser Support
+
+- **Modern ES6 support required** for modules
+- **Fallback**: Original `index.html` works in older browsers
+- **Progressive enhancement**: Feather icons degrade gracefully
+
+## 🐛 Debugging
+
+### Enable Debug Logging
+```javascript
+// In browser console
+window.pipsApp.logger.debug('Component', 'Debug message', data);
+```
+
+### State Inspection
+```javascript
+// Check current application state
+console.log(window.pipsApp.state.getSnapshot());
+```
+
+### Network Debugging
+```javascript
+// Check socket connection
+console.log(window.pipsApp.socketManager.isConnected());
+```
+
+## 🚀 Future Enhancements
+
+This modular foundation enables:
+
+- **Unit testing**: Individual modules can be tested in isolation
+- **Bundle optimization**: Tree-shaking and code splitting
+- **TypeScript migration**: Easy to add type definitions
+- **Component documentation**: Auto-generated docs from modules
+- **Hot module replacement**: Development workflow improvements
+- **Feature flags**: Conditional module loading
+
+## 📝 Files Modified
+
+### New Files Created
+- `pips/static/css/main.css` - Main CSS entry point
+- `pips/static/css/tokens.css` - Design system tokens
+- `pips/static/css/base.css` - Global styles
+- `pips/static/css/components/*.css` - Component stylesheets (8 files)
+- `pips/static/js/main.js` - Application bootstrap
+- `pips/static/js/core/*.js` - Core utilities (3 files)
+- `pips/static/js/network/socket.js` - Socket management
+- `pips/templates/index_modular.html` - Clean template
+
+### Preserved Files
+- `pips/templates/index.html` - Original monolithic file (unchanged)
+
+This modularization provides a solid foundation for maintaining and extending the PIPS application while preserving all existing functionality. 

src/pips/static/css/base.css

@@ -0,0 +1,51 @@
+/* Base Reset and Typography */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    background: linear-gradient(135deg, var(--primary-50) 0%, var(--gray-50) 100%);
+    height: 100vh;
+    overflow: hidden;
+    color: var(--gray-900);
+    font-size: 14px;
+    line-height: 1.5;
+    font-weight: 400;
+}
+
+/* Global container and layout */
+.container {
+    display: flex;
+    height: 100vh;
+    background: white;
+    box-shadow: var(--shadow-xl);
+    max-width: 100vw;
+    overflow-x: hidden;
+}
+
+/* Force word breaking for very long text */
+.container {
+    max-width: 100vw;
+    overflow-x: hidden;
+    
+    /* Primary colors with opacity variants */
+    --primary-color: var(--primary-500);
+    --primary-darker: var(--primary-600);
+    --primary-color-20: rgba(14, 165, 233, 0.2);
+    
+    /* Surface colors */
+    --surface: var(--gray-25);
+    --surface-elevated: rgba(255, 255, 255, 0.95);
+    
+    /* Text colors */
+    --text-primary: var(--gray-900);
+    --text-secondary: var(--gray-600);
+    --text-muted: var(--gray-500);
+    
+    /* Border colors */
+    --border-color: var(--gray-200);
+    --border-hover: var(--gray-300);
+} 

src/pips/static/css/components/buttons.css

@@ -0,0 +1,119 @@
+/* Button Components */
+.button-group {
+    display: flex;
+    gap: 16px;
+    margin-top: auto;
+    padding-top: 8px;
+}
+
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    padding: 16px 24px;
+    border: none;
+    border-radius: 12px;
+    font-size: 15px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    text-decoration: none;
+    font-family: 'Poppins', 'Inter', sans-serif;
+    letter-spacing: 0.01em;
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.btn::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+    transition: left 0.5s;
+}
+
+.btn:hover::before {
+    left: 100%;
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
+    color: white;
+    flex: 1;
+    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.3);
+}
+
+.btn-primary:hover:not(:disabled) {
+    background: linear-gradient(135deg, var(--primary-700) 0%, var(--primary-800) 100%);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.4);
+}
+
+.btn-secondary {
+    background: linear-gradient(135deg, white 0%, var(--gray-50) 100%);
+    color: var(--gray-700);
+    border: 2px solid var(--gray-200);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
+}
+
+.btn-secondary:hover:not(:disabled) {
+    background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
+    border-color: var(--gray-300);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
+}
+
+.btn-danger {
+    background: linear-gradient(135deg, var(--error-500) 0%, var(--error-600) 100%);
+    color: white;
+    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3);
+}
+
+.btn-danger:hover:not(:disabled) {
+    background: linear-gradient(135deg, var(--error-600) 0%, var(--error-700) 100%);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
+}
+
+.btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+}
+
+.btn:disabled::before {
+    display: none;
+}
+
+.btn-session-action {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 14px;
+    background: var(--gray-100);
+    color: var(--gray-700);
+    border: 1px solid var(--gray-200);
+    border-radius: 8px;
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    text-decoration: none;
+}
+
+.btn-session-action:hover {
+    background: var(--gray-200);
+    border-color: var(--gray-300);
+    transform: translateY(-1px);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+}
+
+.btn-session-action:active {
+    transform: translateY(0);
+} 

src/pips/static/css/components/chat.css

@@ -0,0 +1,344 @@
+/* Chat Components */
+.chat-area {
+    flex: 1;
+    padding: 24px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    background: var(--gray-50);
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+}
+
+.chat-message {
+    margin-bottom: 24px;
+    animation: fadeInUp 0.3s ease;
+    max-width: 100%;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+}
+
+@keyframes fadeInUp {
+    from { 
+        opacity: 0; 
+        transform: translateY(12px); 
+    }
+    to { 
+        opacity: 1; 
+        transform: translateY(0); 
+    }
+}
+
+.message-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 12px;
+}
+
+.message-avatar {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 14px;
+    font-weight: 600;
+    flex-shrink: 0;
+}
+
+.avatar-pips {
+    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
+}
+
+.avatar-llm {
+    background: linear-gradient(135deg, var(--success-500), var(--success-600));
+}
+
+.avatar-system {
+    background: linear-gradient(135deg, var(--warning-500), var(--warning-600));
+}
+
+.avatar-reviewer {
+    background: linear-gradient(135deg, var(--primary-500), var(--primary-700));
+}
+
+.message-sender {
+    font-weight: 600;
+    color: var(--gray-900);
+    font-family: 'Poppins', 'Inter', sans-serif;
+}
+
+.message-content {
+    background: white;
+    padding: 20px;
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--gray-200);
+    box-shadow: var(--shadow-sm);
+    line-height: 1.6;
+    max-width: 100%;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+}
+
+/* Markdown formatting within messages */
+.message-content h1,
+.message-content h2,
+.message-content h3,
+.message-content h4,
+.message-content h5,
+.message-content h6 {
+    margin-top: 1.5em;
+    margin-bottom: 0.5em;
+    font-weight: 600;
+    color: var(--gray-900);
+}
+
+.message-content h1 { font-size: 1.5em; }
+.message-content h2 { font-size: 1.3em; }
+.message-content h3 { font-size: 1.2em; }
+.message-content h4 { font-size: 1.1em; }
+
+.message-content p {
+    margin: 8px 0;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+}
+
+.message-content pre {
+    max-width: 100%;
+    overflow-x: auto;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+
+.message-content ol,
+.message-content ul {
+    margin-bottom: 1em;
+    padding-left: 1.5em;
+}
+
+.message-content li {
+    margin-bottom: 0.5em;
+}
+
+.message-content strong {
+    font-weight: 600;
+    color: var(--gray-900);
+}
+
+.message-content em {
+    font-style: italic;
+}
+
+.message-content blockquote {
+    border-left: 4px solid var(--primary-500);
+    padding-left: 1em;
+    margin: 1em 0;
+    color: var(--gray-700);
+    font-style: italic;
+}
+
+.message-content table {
+    border-collapse: collapse;
+    width: 100%;
+    margin: 1em 0;
+    max-width: 100%;
+    table-layout: fixed;
+}
+
+.message-content th,
+.message-content td {
+    border: 1px solid var(--gray-200);
+    padding: 0.5em;
+    text-align: left;
+}
+
+.message-content th {
+    background: var(--gray-50);
+    font-weight: 600;
+}
+
+.code-block {
+    background: var(--gray-900);
+    color: var(--gray-100);
+    padding: 16px;
+    border-radius: 8px;
+    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+    font-size: 14px;
+    line-height: 1.4;
+    margin: 16px 0;
+    overflow-x: auto;
+    max-width: 100%;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+
+.execution-result {
+    background: var(--gray-50);
+    border: 1px solid var(--gray-200);
+    border-left: 4px solid var(--success-500);
+    padding: 16px;
+    margin: 16px 0;
+    border-radius: 0 var(--radius-md) var(--radius-md) 0;
+    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
+    font-size: 13px;
+}
+
+.execution-result.error {
+    border-left-color: var(--error-500);
+    background: var(--error-50);
+    color: var(--error-800);
+}
+
+.final-answer {
+    background: linear-gradient(135deg, var(--success-500), var(--success-600));
+    color: white;
+    padding: 24px;
+    border-radius: var(--radius-xl);
+    font-size: 16px;
+    font-weight: 600;
+    text-align: center;
+    margin: 24px 0;
+    box-shadow: var(--shadow-lg);
+}
+
+.iteration-badge {
+    background: var(--primary-100);
+    color: var(--primary-700);
+    padding: 4px 8px;
+    border-radius: var(--radius-sm);
+    font-size: 12px;
+    font-weight: 500;
+    margin-left: auto;
+}
+
+/* Force word breaking for very long text */
+.message-content,
+.message-content *,
+.code-block,
+.code-block * {
+    word-break: break-word;
+    hyphens: auto;
+}
+
+/* Ensure tables and other wide elements stay within bounds */
+.message-content table {
+    max-width: 100%;
+    table-layout: fixed;
+}
+
+.message-content img {
+    max-width: 100%;
+    height: auto;
+}
+
+/* Custom scrollbar */
+.chat-area::-webkit-scrollbar {
+    width: 6px;
+}
+
+.chat-area::-webkit-scrollbar-track {
+    background: var(--gray-100);
+}
+
+.chat-area::-webkit-scrollbar-thumb {
+    background: var(--gray-300);
+    border-radius: 3px;
+}
+
+.chat-area::-webkit-scrollbar-thumb:hover {
+    background: var(--gray-400);
+}
+
+/* Scroll to bottom button */
+.scroll-to-bottom-btn {
+    position: absolute;
+    bottom: 20px;
+    right: 20px;
+    z-index: 1000;
+    
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    
+    background: var(--surface-elevated);
+    border: 1px solid var(--border-color);
+    border-radius: 24px;
+    padding: 12px 16px;
+    
+    color: var(--text-secondary);
+    font-size: 14px;
+    font-weight: 500;
+    
+    cursor: pointer;
+    
+    /* Shadow and effects */
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    backdrop-filter: blur(8px);
+    
+    /* Smooth transitions */
+    transition: all 0.2s ease;
+    transform: translateY(0);
+    opacity: 0;
+    visibility: hidden;
+}
+
+.scroll-to-bottom-btn.show {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+}
+
+.scroll-to-bottom-btn:hover {
+    background: var(--primary-color);
+    color: white;
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
+}
+
+.scroll-to-bottom-btn:active {
+    transform: translateY(0);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+/* New messages indicator */
+.scroll-to-bottom-btn .new-messages-indicator {
+    font-size: 12px;
+    font-weight: 600;
+    white-space: nowrap;
+}
+
+.scroll-to-bottom-btn.has-new-messages {
+    background: var(--primary-color);
+    color: white;
+    animation: pulse-glow 2s infinite;
+}
+
+.scroll-to-bottom-btn.has-new-messages:hover {
+    background: var(--primary-darker);
+}
+
+@keyframes pulse-glow {
+    0%, 100% {
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    }
+    50% {
+        box-shadow: 0 4px 20px var(--primary-color-20), 0 0 20px var(--primary-color-20);
+    }
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .scroll-to-bottom-btn {
+        bottom: 15px;
+        right: 15px;
+        padding: 10px 14px;
+        font-size: 13px;
+    }
+    
+    .scroll-to-bottom-btn .new-messages-indicator {
+        display: none !important; /* Hide text on mobile, just show icon */
+    }
+} 

src/pips/static/css/components/feedback.css

@@ -0,0 +1,1260 @@
+/**
+ * Interactive Feedback Sidebar Styles
+ * 
+ * Compact, elegant sidebar for PIPS interactive mode feedback interface.
+ */
+
+/* Interactive Feedback Sidebar Styles */
+
+.feedback-sidebar {
+    position: fixed;
+    top: 0;
+    right: -400px; /* Start off-screen */
+    width: 380px;
+    height: 100vh;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    z-index: 10000;
+    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: -5px 0 20px rgba(0, 0, 0, 0.3);
+    display: flex;
+    flex-direction: column;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    overflow: hidden;
+}
+
+.feedback-sidebar.visible {
+    right: 0;
+}
+
+.feedback-sidebar.resizing {
+    transition: none;
+    user-select: none;
+}
+
+/* Resize Handle */
+.feedback-resize-handle {
+    position: absolute;
+    left: -5px;
+    top: 0;
+    width: 10px;
+    height: 100%;
+    cursor: ew-resize;
+    background: rgba(255, 255, 255, 0.1);
+    border-left: 2px solid rgba(255, 255, 255, 0.2);
+    transition: background-color 0.2s ease;
+    z-index: 1;
+}
+
+.feedback-resize-handle:hover {
+    background: rgba(255, 255, 255, 0.2);
+}
+
+.feedback-resize-handle::before {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 3px;
+    height: 30px;
+    background: rgba(255, 255, 255, 0.4);
+    border-radius: 2px;
+}
+
+/* Header */
+.feedback-sidebar-header {
+    padding: 20px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: rgba(255, 255, 255, 0.05);
+    backdrop-filter: blur(10px);
+}
+
+.feedback-title h4 {
+    margin: 0 0 5px 0;
+    font-size: 18px;
+    font-weight: 600;
+}
+
+.iteration-badge {
+    background: rgba(255, 255, 255, 0.2);
+    padding: 4px 8px;
+    border-radius: 12px;
+    font-size: 12px;
+    font-weight: 500;
+}
+
+.feedback-controls {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.feedback-close {
+    background: none;
+    border: none;
+    color: white;
+    cursor: pointer;
+    padding: 8px;
+    border-radius: 6px;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+}
+
+.feedback-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    transform: scale(1.05);
+}
+
+.feedback-close:active {
+    transform: scale(0.95);
+}
+
+/* Content Area */
+.feedback-sidebar-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
+}
+
+.feedback-sidebar-content::-webkit-scrollbar {
+    width: 6px;
+}
+
+.feedback-sidebar-content::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.feedback-sidebar-content::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 3px;
+}
+
+/* Symbols Section */
+.symbols-section {
+    padding: 20px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+}
+
+.section-header h5 {
+    margin: 0;
+    font-size: 14px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    opacity: 0.9;
+}
+
+.expand-symbols-btn {
+    background: rgba(255, 255, 255, 0.1);
+    border: none;
+    color: white;
+    padding: 6px;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+.expand-symbols-btn:hover {
+    background: rgba(255, 255, 255, 0.2);
+}
+
+/* JSON Display */
+.symbols-json-preview,
+.selectable-json {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 6px;
+    padding: 12px;
+    margin: 0;
+    font-family: 'Monaco', 'Menlo', monospace;
+    font-size: 11px;
+    line-height: 1.4;
+    color: #e1e1e1;
+    overflow-x: auto;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+    user-select: text;
+}
+
+.symbols-json-preview:hover,
+.selectable-json:hover {
+    background: rgba(0, 0, 0, 0.3);
+}
+
+.symbols-json-preview {
+    max-height: 150px;
+    overflow-y: auto;
+}
+
+.no-symbols {
+    text-align: center;
+    opacity: 0.6;
+    font-style: italic;
+    margin: 0;
+}
+
+/* Code Preview Section */
+.code-preview-section {
+    padding: 20px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.expand-code-btn {
+    background: rgba(255, 255, 255, 0.1);
+    border: none;
+    color: white;
+    padding: 6px;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+.expand-code-btn:hover {
+    background: rgba(255, 255, 255, 0.2);
+}
+
+.code-preview {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 6px;
+    overflow: hidden;
+}
+
+.code-snippet {
+    margin: 0;
+    padding: 15px;
+    font-family: 'Monaco', 'Menlo', monospace;
+    font-size: 12px;
+    line-height: 1.4;
+    color: #e1e1e1;
+    background: transparent;
+    overflow-x: auto;
+}
+
+.hoverable-code {
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+.hoverable-code:hover {
+    background: rgba(255, 255, 255, 0.05) !important;
+}
+
+/* Critic Section */
+.critic-section {
+    padding: 20px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.critic-toggle {
+    position: relative;
+    display: inline-block;
+    width: 44px;
+    height: 24px;
+}
+
+.critic-toggle input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.toggle-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(255, 255, 255, 0.3);
+    transition: 0.3s;
+    border-radius: 24px;
+}
+
+.toggle-slider:before {
+    position: absolute;
+    content: "";
+    height: 18px;
+    width: 18px;
+    left: 3px;
+    bottom: 3px;
+    background-color: white;
+    transition: 0.3s;
+    border-radius: 50%;
+}
+
+input:checked + .toggle-slider {
+    background-color: #4CAF50;
+}
+
+input:checked + .toggle-slider:before {
+    transform: translateX(20px);
+}
+
+.critic-summary {
+    margin-top: 15px;
+}
+
+.critic-summary-text {
+    margin: 0;
+    opacity: 0.9;
+    line-height: 1.5;
+}
+
+.no-issues {
+    margin: 0;
+    opacity: 0.7;
+    font-style: italic;
+}
+
+/* Feedback Cart (Shopping Cart Style) */
+.feedback-cart {
+    padding: 20px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    max-height: 300px;
+    overflow-y: auto;
+}
+
+.cart-count {
+    background: rgba(255, 255, 255, 0.2);
+    padding: 2px 8px;
+    border-radius: 12px;
+    font-size: 11px;
+    font-weight: 500;
+}
+
+.cart-items {
+    margin-top: 15px;
+}
+
+.empty-cart {
+    text-align: center;
+    padding: 20px;
+    opacity: 0.7;
+}
+
+.empty-cart i {
+    font-size: 24px;
+    margin-bottom: 10px;
+    opacity: 0.5;
+}
+
+.empty-cart p {
+    margin: 0 0 5px 0;
+    font-size: 14px;
+}
+
+.empty-cart small {
+    font-size: 12px;
+    opacity: 0.8;
+}
+
+.cart-item {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+    padding: 12px;
+    margin-bottom: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.2s ease;
+}
+
+.cart-item:hover {
+    background: rgba(255, 255, 255, 0.15);
+    border-color: rgba(255, 255, 255, 0.2);
+}
+
+.cart-item-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+}
+
+.cart-item-type {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 12px;
+    font-weight: 600;
+}
+
+.cart-item-type i {
+    width: 14px;
+    height: 14px;
+}
+
+.cart-item-type small {
+    opacity: 0.7;
+    font-weight: 400;
+    margin-left: 4px;
+}
+
+.cart-item-actions {
+    display: flex;
+    gap: 4px;
+}
+
+.cart-action {
+    background: rgba(255, 255, 255, 0.1);
+    border: none;
+    color: white;
+    padding: 4px;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.cart-action:hover {
+    background: rgba(255, 255, 255, 0.2);
+}
+
+.cart-action.remove:hover {
+    background: rgba(255, 0, 0, 0.6);
+}
+
+.cart-action i {
+    width: 12px;
+    height: 12px;
+}
+
+.cart-item-preview {
+    background: rgba(0, 0, 0, 0.2);
+    padding: 8px;
+    border-radius: 4px;
+    font-family: 'Monaco', 'Menlo', monospace;
+    font-size: 11px;
+    margin-bottom: 8px;
+    color: #ffd700;
+    word-break: break-all;
+}
+
+.cart-item-comment {
+    font-size: 13px;
+    line-height: 1.4;
+    opacity: 0.9;
+}
+
+/* Quick Actions */
+.quick-actions {
+    padding: 20px;
+    display: flex;
+    gap: 10px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.action-btn {
+    flex: 1;
+    padding: 12px 16px;
+    border: none;
+    border-radius: 6px;
+    font-weight: 600;
+    font-size: 13px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+}
+
+.action-btn.primary {
+    background: #4CAF50;
+    color: white;
+}
+
+.action-btn.primary:hover {
+    background: #45a049;
+    transform: translateY(-1px);
+}
+
+.action-btn.secondary {
+    background: rgba(255, 255, 255, 0.1);
+    color: white;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.action-btn.secondary:hover {
+    background: rgba(255, 255, 255, 0.2);
+}
+
+.action-btn.success {
+    background: #2196F3;
+    color: white;
+}
+
+.action-btn.success:hover {
+    background: #1976D2;
+    transform: translateY(-1px);
+}
+
+.action-btn.small {
+    padding: 8px 12px;
+    font-size: 12px;
+}
+
+.action-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none !important;
+}
+
+/* Comments Section */
+.comments-section {
+    padding: 20px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.comments-section h5 {
+    margin: 0 0 15px 0;
+    font-size: 14px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    opacity: 0.9;
+}
+
+#user-comments {
+    width: 100%;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 6px;
+    padding: 12px;
+    color: white;
+    font-family: inherit;
+    font-size: 14px;
+    resize: vertical;
+    min-height: 80px;
+}
+
+#user-comments::placeholder {
+    color: rgba(255, 255, 255, 0.6);
+}
+
+#user-comments:focus {
+    outline: none;
+    border-color: rgba(255, 255, 255, 0.4);
+    background: rgba(255, 255, 255, 0.15);
+}
+
+.comment-actions {
+    margin-top: 10px;
+    display: flex;
+    gap: 8px;
+}
+
+/* Dialogue Boxes */
+.dialogue-box {
+    position: absolute;
+    bottom: 20px;
+    left: 20px;
+    right: 20px;
+    background: rgba(0, 0, 0, 0.95);
+    border-radius: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(10px);
+    z-index: 100;
+}
+
+.dialogue-header {
+    padding: 15px 20px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 12px 12px 0 0;
+}
+
+.dialogue-header h6 {
+    margin: 0;
+    font-size: 14px;
+    font-weight: 600;
+    color: white;
+}
+
+.dialogue-close {
+    background: none;
+    border: none;
+    color: rgba(255, 255, 255, 0.7);
+    cursor: pointer;
+    font-size: 18px;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    transition: all 0.2s ease;
+}
+
+.dialogue-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: white;
+}
+
+.dialogue-content {
+    padding: 20px;
+}
+
+.highlighted-content {
+    margin-bottom: 15px;
+}
+
+.highlighted-content label {
+    display: block;
+    font-size: 12px;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.8);
+    margin-bottom: 8px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.highlight-preview {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 6px;
+    padding: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    max-height: 100px;
+    overflow-y: auto;
+}
+
+.highlight-preview pre {
+    margin: 0;
+    font-family: 'Monaco', 'Menlo', monospace;
+    font-size: 11px;
+    line-height: 1.4;
+    color: #ffd700;
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
+.feedback-input {
+    margin-bottom: 15px;
+}
+
+.feedback-input label {
+    display: block;
+    font-size: 12px;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.8);
+    margin-bottom: 8px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.feedback-input textarea {
+    width: 100%;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 6px;
+    padding: 12px;
+    color: white;
+    font-family: inherit;
+    font-size: 13px;
+    resize: vertical;
+    min-height: 80px;
+}
+
+.feedback-input textarea::placeholder {
+    color: rgba(255, 255, 255, 0.5);
+}
+
+.feedback-input textarea:focus {
+    outline: none;
+    border-color: rgba(255, 255, 255, 0.4);
+    background: rgba(255, 255, 255, 0.15);
+}
+
+.dialogue-actions {
+    display: flex;
+    gap: 10px;
+    justify-content: flex-end;
+}
+
+.dialogue-btn {
+    padding: 10px 20px;
+    border: none;
+    border-radius: 6px;
+    font-size: 13px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.dialogue-btn.primary {
+    background: #4CAF50;
+    color: white;
+}
+
+.dialogue-btn.primary:hover {
+    background: #45a049;
+    transform: translateY(-1px);
+}
+
+.dialogue-btn.secondary {
+    background: rgba(255, 255, 255, 0.1);
+    color: white;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.dialogue-btn.secondary:hover {
+    background: rgba(255, 255, 255, 0.2);
+}
+
+/* Symbols Modal */
+.symbols-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10001;
+    backdrop-filter: blur(5px);
+}
+
+.symbols-modal-content {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border-radius: 12px;
+    width: 90%;
+    max-width: 800px;
+    max-height: 80%;
+    overflow: hidden;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+    position: relative;
+}
+
+.symbols-modal-header {
+    padding: 20px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: rgba(255, 255, 255, 0.05);
+}
+
+.symbols-modal-header h4 {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+}
+
+.modal-close {
+    background: none;
+    border: none;
+    color: white;
+    cursor: pointer;
+    padding: 8px;
+    border-radius: 6px;
+    transition: background-color 0.2s ease;
+}
+
+.modal-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.symbols-modal-body {
+    padding: 20px;
+    overflow-y: auto;
+    max-height: 60vh;
+    position: relative;
+}
+
+.symbols-container {
+    margin-bottom: 20px;
+}
+
+.symbols-json {
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 8px;
+    padding: 20px;
+    margin: 0;
+    font-family: 'Monaco', 'Menlo', monospace;
+    font-size: 12px;
+    line-height: 1.5;
+    color: #e1e1e1;
+    white-space: pre-wrap;
+    word-break: break-word;
+    user-select: text;
+    cursor: text;
+    min-height: 200px;
+}
+
+.symbols-json::selection {
+    background: rgba(100, 149, 237, 0.3);
+    color: white;
+}
+
+.selection-info {
+    text-align: center;
+    opacity: 0.7;
+    font-size: 13px;
+    margin-bottom: 20px;
+}
+
+.selection-info p {
+    margin: 0;
+}
+
+/* Code Modal */
+.code-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10001;
+    backdrop-filter: blur(5px);
+}
+
+.code-modal-content {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border-radius: 12px;
+    width: 95%;
+    max-width: 1200px;
+    max-height: 90%;
+    overflow: hidden;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+    position: relative;
+}
+
+.code-modal-header {
+    padding: 20px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: rgba(255, 255, 255, 0.05);
+}
+
+.code-modal-header h4 {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+}
+
+.code-modal-body {
+    padding: 20px;
+    overflow-y: auto;
+    max-height: 70vh;
+    position: relative;
+}
+
+.code-container {
+    display: flex;
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 8px;
+    overflow: hidden;
+    margin-bottom: 15px;
+}
+
+.code-gutter {
+    background: rgba(0, 0, 0, 0.2);
+    padding: 15px 10px;
+    border-right: 1px solid rgba(255, 255, 255, 0.1);
+    user-select: none;
+}
+
+.line-number {
+    font-family: 'Monaco', 'Menlo', monospace;
+    font-size: 12px;
+    line-height: 1.4;
+    color: rgba(255, 255, 255, 0.5);
+    text-align: right;
+    cursor: pointer;
+    padding: 0 5px;
+    transition: color 0.2s ease;
+}
+
+.line-number:hover {
+    color: rgba(255, 255, 255, 0.8);
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.code-display {
+    flex: 1;
+    margin: 0;
+    padding: 15px;
+    font-family: 'Monaco', 'Menlo', monospace;
+    font-size: 12px;
+    line-height: 1.4;
+    color: #e1e1e1;
+    background: transparent;
+    overflow-x: auto;
+    user-select: text;
+    cursor: text;
+}
+
+.code-display::selection {
+    background: rgba(100, 149, 237, 0.3);
+    color: white;
+}
+
+/* Loading State */
+.loading-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 40px 20px;
+    text-align: center;
+}
+
+.loading-spinner {
+    width: 40px;
+    height: 40px;
+    border: 3px solid rgba(255, 255, 255, 0.3);
+    border-top: 3px solid white;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin-bottom: 15px;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+.loading-state p {
+    margin: 0;
+    opacity: 0.9;
+}
+
+/* Notifications */
+.feedback-notification {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    background: rgba(0, 0, 0, 0.9);
+    color: white;
+    padding: 12px 20px;
+    border-radius: 6px;
+    z-index: 10003;
+    transform: translateX(100%);
+    transition: transform 0.3s ease;
+    font-size: 14px;
+    font-weight: 500;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+}
+
+.feedback-notification.visible {
+    transform: translateX(0);
+}
+
+/* Final Artifacts Compact */
+.final-artifacts-compact {
+    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
+    color: white;
+    border-radius: 8px;
+    margin: 15px 0;
+    overflow: hidden;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.artifacts-header {
+    padding: 15px 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.artifacts-header h4 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+}
+
+.artifacts-close {
+    background: none;
+    border: none;
+    color: white;
+    cursor: pointer;
+    padding: 5px;
+    border-radius: 4px;
+    transition: background-color 0.2s ease;
+}
+
+.artifacts-close:hover {
+    background: rgba(255, 255, 255, 0.2);
+}
+
+.artifacts-content {
+    padding: 20px;
+}
+
+.artifacts-summary p {
+    margin: 0 0 15px 0;
+    font-size: 14px;
+}
+
+.view-details-btn {
+    background: rgba(255, 255, 255, 0.2);
+    border: none;
+    color: white;
+    padding: 8px 16px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 13px;
+    font-weight: 500;
+    transition: background-color 0.2s ease;
+}
+
+.view-details-btn:hover {
+    background: rgba(255, 255, 255, 0.3);
+}
+
+.artifacts-details {
+    margin-top: 15px;
+    padding-top: 15px;
+    border-top: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.artifact-section {
+    margin-bottom: 20px;
+}
+
+.artifact-section:last-child {
+    margin-bottom: 0;
+}
+
+.artifact-section h5 {
+    margin: 0 0 10px 0;
+    font-size: 14px;
+    font-weight: 600;
+    opacity: 0.9;
+}
+
+.artifact-code,
+.artifact-json {
+    background: rgba(0, 0, 0, 0.3);
+    padding: 15px;
+    border-radius: 6px;
+    font-family: 'Monaco', 'Menlo', monospace;
+    font-size: 12px;
+    line-height: 1.4;
+    color: #e1e1e1;
+    margin: 0;
+    overflow-x: auto;
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .feedback-sidebar {
+        width: 100vw;
+        right: -100vw;
+    }
+    
+    .feedback-sidebar.visible {
+        right: 0;
+    }
+    
+    .symbols-modal-content,
+    .code-modal-content {
+        width: 95%;
+        height: 90%;
+    }
+    
+    .quick-actions {
+        flex-direction: column;
+    }
+    
+    .action-btn {
+        width: 100%;
+    }
+    
+    .dialogue-box {
+        left: 10px;
+        right: 10px;
+        bottom: 10px;
+    }
+    
+    .dialogue-actions {
+        flex-direction: column;
+    }
+    
+    .dialogue-btn {
+        width: 100%;
+    }
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+    .feedback-sidebar {
+        background: var(--gray-900);
+        border-left-color: var(--gray-700);
+    }
+    
+    .code-modal-content {
+        background: var(--gray-900);
+    }
+    
+    .selection-popup {
+        background: var(--gray-800);
+        border-color: var(--gray-600);
+    }
+    
+    .final-artifacts-compact {
+        background: var(--gray-900);
+        border-color: var(--gray-700);
+    }
+}
+
+/* Feedback Restore Banner Styles */
+.feedback-restore-container {
+    margin: 20px 0;
+    border-radius: 16px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
+    overflow: hidden;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    animation: slideInFromRight 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes slideInFromRight {
+    from {
+        opacity: 0;
+        transform: translateX(50px) scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0) scale(1);
+    }
+}
+
+.feedback-restore-banner {
+    padding: 16px;
+    color: white;
+    position: relative;
+}
+
+.feedback-restore-banner::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: linear-gradient(90deg, #ffffff40, #ffffff80, #ffffff40);
+    animation: shimmer 2s ease-in-out infinite;
+}
+
+@keyframes shimmer {
+    0%, 100% { opacity: 0.4; }
+    50% { opacity: 0.8; }
+}
+
+.restore-actions {
+    display: flex;
+    gap: 12px;
+    flex-wrap: wrap;
+}
+
+.btn-restore-feedback,
+.btn-terminate-session {
+    padding: 10px 16px;
+    border: none;
+    border-radius: 8px;
+    font-size: 13px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    text-decoration: none;
+    min-height: 36px;
+    backdrop-filter: blur(10px);
+}
+
+.btn-restore-feedback {
+    background: rgba(255, 255, 255, 0.2);
+    color: white;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    flex: 1;
+    justify-content: center;
+}
+
+.btn-restore-feedback:hover {
+    background: rgba(255, 255, 255, 0.3);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+}
+
+.btn-terminate-session {
+    background: rgba(255, 255, 255, 0.1);
+    color: rgba(255, 255, 255, 0.8);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    min-width: 120px;
+    justify-content: center;
+}
+
+.btn-terminate-session:hover {
+    background: rgba(220, 38, 127, 0.6);
+    color: white;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(220, 38, 127, 0.3);
+}
+
+.btn-restore-feedback i,
+.btn-terminate-session i {
+    width: 16px;
+    height: 16px;
+}
+
+/* Responsive adjustments for restore banner */
+@media (max-width: 768px) {
+    .feedback-restore-container {
+        margin: 12px;
+        border-radius: 10px;
+    }
+    
+    .feedback-restore-banner {
+        padding: 12px;
+    }
+    
+    .restore-actions {
+        flex-direction: column;
+        gap: 8px;
+    }
+    
+    .btn-restore-feedback,
+    .btn-terminate-session {
+        width: 100%;
+        min-width: auto;
+    }
+} 

src/pips/static/css/components/forms.css

@@ -0,0 +1,283 @@
+/* Form Components */
+.form-group {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 20px;
+}
+
+.form-group:last-child {
+    margin-bottom: 0;
+}
+
+.form-label {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--gray-800);
+    letter-spacing: -0.01em;
+    margin-bottom: 8px;
+}
+
+.form-help {
+    font-size: 13px;
+    color: var(--gray-500);
+    margin-top: 6px;
+    margin-bottom: 0;
+    line-height: 1.4;
+}
+
+.form-help-inline {
+    font-size: 12px;
+    color: var(--gray-400);
+    font-weight: 400;
+    margin-left: 8px;
+}
+
+#questionInput {
+    width: 100%;
+    min-height: 140px;
+    padding: 20px;
+    border: 2px solid var(--gray-200);
+    border-radius: 16px;
+    font-size: 15px;
+    resize: vertical;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    font-family: inherit;
+    background: white;
+    line-height: 1.6;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+#questionInput:focus {
+    outline: none;
+    border-color: var(--primary-500);
+    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.1), 0 4px 12px rgba(0, 0, 0, 0.08);
+    transform: translateY(-1px);
+}
+
+#questionInput:disabled {
+    background-color: var(--gray-50);
+    color: var(--gray-500);
+    cursor: not-allowed;
+    border-color: var(--gray-200);
+}
+
+#questionInput::placeholder {
+    color: var(--gray-400);
+    font-style: italic;
+}
+
+/* Custom Rules Input - Match Problem Description styling */
+.custom-rules-input {
+    width: 100%;
+    min-height: 80px;
+    padding: 16px 20px;
+    border: 2px solid var(--gray-200);
+    border-radius: 16px;
+    font-size: 14px;
+    resize: vertical;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    font-family: inherit;
+    background: white;
+    line-height: 1.5;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.custom-rules-input:focus {
+    outline: none;
+    border-color: var(--primary-500);
+    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.1), 0 4px 12px rgba(0, 0, 0, 0.08);
+    transform: translateY(-1px);
+}
+
+.custom-rules-input::placeholder {
+    color: var(--gray-400);
+    font-style: italic;
+}
+
+/* iOS-style Switch */
+.ios-switch-container {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.ios-switch-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.ios-switch-input {
+    display: none;
+}
+
+.ios-switch-label {
+    position: relative;
+    display: inline-block;
+    width: 200px;
+    height: 44px;
+    cursor: pointer;
+    user-select: none;
+}
+
+.ios-switch-slider {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 22px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 4px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.ios-switch-slider::before {
+    content: '';
+    position: absolute;
+    height: 36px;
+    width: 96px;
+    left: 4px;
+    background: white;
+    border-radius: 18px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    z-index: 2;
+}
+
+.ios-switch-input:checked + .ios-switch-label .ios-switch-slider {
+    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
+}
+
+.ios-switch-input:checked + .ios-switch-label .ios-switch-slider::before {
+    transform: translateX(96px);
+}
+
+.ios-switch-text {
+    position: relative;
+    z-index: 1;
+    font-size: 13px;
+    font-weight: 600;
+    color: white;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 96px;
+    height: 36px;
+}
+
+.ios-switch-text-left {
+    margin-left: 8px;
+}
+
+.ios-switch-text-right {
+    margin-right: 8px;
+}
+
+.ios-switch-input:checked + .ios-switch-label .ios-switch-text-left {
+    color: rgba(255, 255, 255, 0.6);
+}
+
+.ios-switch-input:not(:checked) + .ios-switch-label .ios-switch-text-right {
+    color: rgba(255, 255, 255, 0.6);
+}
+
+.mode-description {
+    text-align: center;
+    font-size: 14px;
+    color: var(--gray-600);
+    font-style: italic;
+    transition: all 0.3s ease;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 8px; /* Consistent with .form-label */
+    font-weight: 500;
+    color: var(--gray-700);
+    font-size: 14px;
+}
+
+.form-group select,
+.form-group input[type="text"],
+.form-group input[type="password"],
+.form-group input[type="number"] {
+    width: 100%;
+    padding: 12px;
+    border: 1px solid var(--gray-300);
+    border-radius: var(--radius-md);
+    font-size: 14px;
+    transition: all 0.2s ease;
+    font-family: inherit;
+}
+
+.form-group select:focus,
+.form-group input:focus {
+    outline: none;
+    border-color: var(--primary-500);
+    box-shadow: 0 0 0 3px rgb(14 165 233 / 0.1);
+}
+
+.switch-group {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 44px;
+    height: 24px;
+}
+
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--gray-300);
+    transition: .3s;
+    border-radius: 24px;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 18px;
+    width: 18px;
+    left: 3px;
+    bottom: 3px;
+    background-color: white;
+    transition: .3s;
+    border-radius: 50%;
+    box-shadow: var(--shadow-sm);
+}
+
+input:checked + .slider {
+    background-color: var(--primary-500);
+}
+
+input:checked + .slider:before {
+    transform: translateX(20px);
+}
+
+.method-label {
+    font-weight: 500;
+    color: var(--gray-700);
+    font-family: 'Poppins', 'Inter', sans-serif;
+} 

src/pips/static/css/components/modal.css

@@ -0,0 +1,193 @@
+/* Modal Components */
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(4px);
+    align-items: center;
+    justify-content: center;
+}
+
+/* Show the modal with flex when visible */
+.modal[style*="block"] {
+    display: flex !important;
+}
+
+.modal-content {
+    background: white;
+    margin: 0;
+    padding: 0;
+    border-radius: var(--radius-xl);
+    width: min(90vw, 500px);
+    max-height: min(85vh, 600px);
+    box-shadow: var(--shadow-xl);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    transform: scale(0.95);
+    opacity: 0;
+    transition: all 0.2s ease;
+}
+
+/* Animation when modal appears */
+.modal[style*="block"] .modal-content {
+    transform: scale(1);
+    opacity: 1;
+}
+
+.modal-header {
+    padding: 24px 24px 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+.modal-title {
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--gray-900);
+    font-family: 'Poppins', 'Inter', sans-serif;
+}
+
+.close {
+    color: var(--gray-400);
+    font-size: 24px;
+    font-weight: normal;
+    cursor: pointer;
+    padding: 4px;
+    border-radius: var(--radius-sm);
+    transition: all 0.2s ease;
+}
+
+.close:hover {
+    color: var(--gray-600);
+    background: var(--gray-100);
+}
+
+.modal-body {
+    padding: 24px;
+    overflow-y: auto;
+    flex: 1;
+    min-height: 0;
+}
+
+.modal-body::-webkit-scrollbar {
+    width: 6px;
+}
+
+.modal-body::-webkit-scrollbar-track {
+    background: var(--gray-100);
+}
+
+.modal-body::-webkit-scrollbar-thumb {
+    background: var(--gray-300);
+    border-radius: 3px;
+}
+
+.modal-body::-webkit-scrollbar-thumb:hover {
+    background: var(--gray-400);
+}
+
+/* Settings Tabs */
+.settings-tabs {
+    display: flex;
+    border-bottom: 1px solid var(--border-light);
+    margin-bottom: 24px;
+    gap: 0;
+}
+
+.tab-button {
+    background: none;
+    border: none;
+    padding: 12px 20px;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--gray-600);
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    transition: all 0.2s ease;
+    position: relative;
+}
+
+.tab-button:hover {
+    color: var(--gray-800);
+    background: var(--gray-50);
+}
+
+.tab-button.active {
+    color: var(--primary-600);
+    border-bottom-color: var(--primary-600);
+    background: var(--primary-50);
+}
+
+.tab-button:first-child {
+    border-radius: var(--radius-sm) 0 0 0;
+}
+
+.tab-button:last-child {
+    border-radius: 0 var(--radius-sm) 0 0;
+}
+
+/* Tab Content */
+.tab-content {
+    display: none;
+}
+
+.tab-content.active {
+    display: block;
+    animation: fadeIn 0.2s ease-in-out;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Settings Form Submit Button */
+#settingsForm button[type="submit"] {
+    margin-top: 32px;
+}
+
+/* Mobile responsiveness */
+@media (max-width: 640px) {
+    .modal-content {
+        width: 95vw;
+        max-height: 90vh;
+        margin: 0 8px; /* Small margin to prevent edge touching */
+    }
+    
+    .modal-header,
+    .modal-body {
+        padding: 16px;
+    }
+    
+    .modal-title {
+        font-size: 18px;
+    }
+    
+    .settings-tabs {
+        margin-bottom: 16px;
+    }
+    
+    .tab-button {
+        padding: 10px 16px;
+        font-size: 13px;
+    }
+    
+    /* Reduce margin on mobile */
+    #settingsForm button[type="submit"] {
+        margin-top: 24px;
+    }
+} 

src/pips/static/css/components/panels.css

@@ -0,0 +1,84 @@
+/* Panel Layout Components */
+.left-panel {
+    width: min(480px, 40vw);
+    min-width: 320px;
+    max-width: 480px;
+    background: linear-gradient(135deg, #fafbfc 0%, #f8fafc 100%);
+    border-right: 1px solid var(--gray-200);
+    display: flex;
+    flex-direction: column;
+    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
+}
+
+.right-panel {
+    flex: 1;
+    min-width: 0;
+    background: white;
+    display: flex;
+    flex-direction: column;
+}
+
+.header {
+    padding: 24px 24px 20px;
+    background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
+    color: white;
+    border-bottom: 1px solid var(--primary-700);
+    position: relative;
+    overflow: hidden;
+    flex-shrink: 0;
+}
+
+.header::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
+    pointer-events: none;
+}
+
+.header h1 {
+    font-size: 28px;
+    font-weight: 700;
+    margin-bottom: 8px;
+    letter-spacing: -0.02em;
+    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    position: relative;
+    z-index: 1;
+}
+
+.header p {
+    opacity: 0.95;
+    font-size: 14px;
+    font-weight: 500;
+    letter-spacing: 0.01em;
+    position: relative;
+    z-index: 1;
+    margin-bottom: 0;
+}
+
+.input-section {
+    padding: 24px 20px;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    background: linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.95) 100%);
+    overflow-y: auto;
+}
+
+.footer {
+    padding: 16px 24px;
+    background: white;
+    border-top: 1px solid var(--gray-200);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.footer-info {
+    font-size: 13px;
+    color: var(--gray-500);
+} 

src/pips/static/css/components/responsive.css

@@ -0,0 +1,123 @@
+/* Responsive Design */
+@media (max-width: 1200px) {
+    .left-panel {
+        width: min(420px, 45vw);
+        min-width: 300px;
+    }
+    
+    .header {
+        padding: 20px 20px 16px;
+    }
+    
+    .header h1 {
+        font-size: 26px;
+        margin-bottom: 6px;
+    }
+    
+    .header p {
+        font-size: 13px;
+    }
+    
+    .input-section {
+        padding: 20px 18px;
+        gap: 18px;
+    }
+}
+
+@media (max-width: 1024px) {
+    .container {
+        flex-direction: column;
+    }
+    
+    .left-panel {
+        width: 100%;
+        height: 50vh;
+        min-width: unset;
+        max-width: unset;
+    }
+    
+    .right-panel {
+        height: 50vh;
+    }
+    
+    .header {
+        padding: 18px 16px 14px;
+    }
+    
+    .header h1 {
+        font-size: 24px;
+        margin-bottom: 6px;
+    }
+    
+    .header p {
+        font-size: 13px;
+    }
+    
+    .input-section {
+        padding: 18px 16px;
+        gap: 16px;
+    }
+}
+
+@media (max-width: 768px) {
+    .left-panel {
+        height: 60vh;
+    }
+    
+    .right-panel {
+        height: 40vh;
+    }
+    
+    .header {
+        padding: 16px 14px 12px;
+    }
+    
+    .header h1 {
+        font-size: 22px;
+        margin-bottom: 5px;
+    }
+    
+    .header p {
+        font-size: 12px;
+    }
+    
+    .input-section {
+        padding: 16px 14px;
+        gap: 14px;
+    }
+    
+    #questionInput {
+        min-height: 100px;
+        padding: 14px;
+    }
+}
+
+@media (max-width: 600px) {
+    .header {
+        padding: 14px 12px 10px;
+    }
+    
+    .header h1 {
+        font-size: 20px;
+        margin-bottom: 4px;
+    }
+    
+    .header p {
+        font-size: 11px;
+    }
+    
+    .input-section {
+        padding: 14px 12px;
+        gap: 12px;
+    }
+    
+    .button-group {
+        flex-direction: column;
+        gap: 12px;
+    }
+    
+    .btn {
+        padding: 14px 20px;
+        font-size: 14px;
+    }
+} 

src/pips/static/css/components/sessions.css

@@ -0,0 +1,523 @@
+/* Sessions Management Styles */
+.sessions-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    padding: 12px 16px;
+    background: linear-gradient(135deg, var(--gray-50) 0%, white 100%);
+    border: 2px solid var(--gray-200);
+    border-radius: 12px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.sessions-header:hover {
+    border-color: var(--primary-300);
+    background: linear-gradient(135deg, var(--primary-50) 0%, white 100%);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.15);
+}
+
+.sessions-header .form-label {
+    margin: 0;
+    display: flex;
+    align-items: center;
+    font-weight: 600;
+    color: var(--gray-800);
+}
+
+.sessions-toggle {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 4px;
+    border-radius: 6px;
+    transition: all 0.2s ease;
+    color: var(--gray-600);
+}
+
+.sessions-toggle:hover {
+    background: var(--gray-100);
+    color: var(--primary-600);
+}
+
+.sessions-toggle.expanded {
+    transform: rotate(180deg);
+}
+
+.sessions-container {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    background: white;
+    border-left: 2px solid var(--gray-200);
+    border-right: 2px solid var(--gray-200);
+    border-bottom: 2px solid var(--gray-200);
+    border-radius: 0 0 12px 12px;
+    margin-top: -2px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.sessions-container.expanded {
+    max-height: 450px;
+    border-color: var(--primary-300);
+}
+
+.sessions-list {
+    max-height: 350px;
+    overflow-y: auto;
+    padding: 16px;
+}
+
+.session-item {
+    display: flex;
+    align-items: center;
+    padding: 14px 16px;
+    border-radius: 10px;
+    cursor: pointer;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    margin-bottom: 8px;
+    border: 1px solid transparent;
+    position: relative;
+    min-height: 68px;
+}
+
+.session-item:hover {
+    background: var(--gray-50);
+    border-color: var(--gray-200);
+    transform: translateX(2px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.session-item.current-session {
+    background: linear-gradient(135deg, var(--primary-50) 0%, var(--primary-25) 100%);
+    border-color: var(--primary-200);
+}
+
+.session-item.current-session:hover {
+    background: linear-gradient(135deg, var(--primary-100) 0%, var(--primary-50) 100%);
+    border-color: var(--primary-300);
+}
+
+.session-item.active-solving {
+    background: linear-gradient(135deg, var(--success-50) 0%, var(--success-25) 100%);
+    border-color: var(--success-200);
+    animation: pulse-session 2s ease-in-out infinite;
+}
+
+@keyframes pulse-session {
+    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
+    50% { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1); }
+}
+
+.session-item.selected {
+    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%) !important;
+    color: white !important;
+    border: 2px solid var(--primary-700) !important;
+    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.4) !important;
+    transform: scale(1.02) !important;
+    position: relative !important;
+    animation: selected-pulse 2s ease-in-out infinite alternate !important;
+}
+
+.session-item.selected .session-title,
+.session-item.selected .session-meta {
+    color: white !important;
+    opacity: 1 !important;
+    visibility: visible !important;
+    display: block !important;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
+}
+
+.session-item.selected .session-icon {
+    background: rgba(255, 255, 255, 0.25) !important;
+    color: white !important;
+    border: 1px solid rgba(255, 255, 255, 0.3) !important;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+}
+
+.session-item.selected .status-dot {
+    background: white !important;
+    box-shadow: 0 0 0 2px var(--primary-600) !important;
+}
+
+.session-item.selected:hover {
+    background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%) !important;
+    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.5) !important;
+    transform: scale(1.03) translateX(2px) !important;
+}
+
+/* Additional visual enhancement for selected sessions */
+.session-item.selected::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 4px;
+    background: white !important;
+    border-radius: 0 2px 2px 0;
+    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
+}
+
+.session-item.selected {
+    position: relative;
+    animation: selected-pulse 2s ease-in-out infinite alternate;
+}
+
+@keyframes selected-pulse {
+    0% { box-shadow: 0 4px 16px rgba(14, 165, 233, 0.4); }
+    100% { box-shadow: 0 4px 16px rgba(14, 165, 233, 0.6); }
+}
+
+.session-icon {
+    width: 36px;
+    height: 36px;
+    background: var(--gray-100);
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 12px;
+    transition: all 0.2s ease;
+    color: var(--gray-600);
+    flex-shrink: 0;
+}
+
+.session-item.current-session .session-icon {
+    background: var(--primary-100);
+    color: var(--primary-600);
+}
+
+.session-info {
+    flex: 1;
+    min-width: 0;
+    padding-right: 8px;
+}
+
+.session-title {
+    font-weight: 600;
+    font-size: 14px;
+    color: var(--gray-900);
+    margin-bottom: 4px;
+    line-height: 1.3;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    word-break: break-word;
+}
+
+.session-meta {
+    font-size: 12px;
+    color: var(--gray-500);
+    line-height: 1.3;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    word-break: break-word;
+}
+
+.session-status {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: auto;
+    margin-right: 8px;
+    flex-shrink: 0;
+}
+
+.status-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: var(--gray-400);
+}
+
+.session-status.active .status-dot {
+    background: var(--success-500);
+    animation: pulse-dot 2s ease-in-out infinite;
+}
+
+.session-status.solving .status-dot {
+    background: var(--warning-500);
+    animation: pulse-dot 1s ease-in-out infinite;
+}
+
+.session-status.completed .status-dot {
+    background: var(--primary-500);
+}
+
+.session-status.interrupted .status-dot {
+    background: var(--error-500);
+}
+
+@keyframes pulse-dot {
+    0%, 100% { opacity: 1; transform: scale(1); }
+    50% { opacity: 0.7; transform: scale(1.3); }
+}
+
+/* Session management actions (bottom of sessions panel) */
+.sessions-actions {
+    display: flex;
+    gap: 10px;
+    padding: 16px;
+    border-top: 1px solid var(--gray-200);
+    background: linear-gradient(135deg, var(--gray-25) 0%, var(--gray-50) 100%);
+}
+
+/* Session action buttons container */
+.session-actions {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    opacity: 0;
+    transform: translateX(8px);
+    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    margin-left: 8px;
+    flex-shrink: 0;
+}
+
+.session-item:hover .session-actions {
+    opacity: 1;
+    transform: translateX(0);
+}
+
+/* Always show actions on selected items */
+.session-item.selected .session-actions {
+    opacity: 1;
+    transform: translateX(0);
+}
+
+/* Base styling for action buttons */
+.session-download,
+.session-delete {
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    padding: 6px;
+    border-radius: 8px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    position: relative;
+    overflow: hidden;
+}
+
+.session-download i,
+.session-download svg,
+.session-delete i,
+.session-delete svg {
+    width: 14px !important;
+    height: 14px !important;
+    stroke-width: 2;
+}
+
+.session-download::before,
+.session-delete::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: inherit;
+    background: currentColor;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    z-index: -1;
+}
+
+/* Download button styling */
+.session-download {
+    color: var(--primary-500);
+}
+
+.session-download:hover {
+    color: var(--primary-600);
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.25);
+}
+
+.session-download:hover::before {
+    opacity: 0.1;
+}
+
+.session-download:active {
+    transform: translateY(0);
+    box-shadow: 0 1px 4px rgba(14, 165, 233, 0.3);
+}
+
+/* Delete button styling */
+.session-delete {
+    color: var(--error-500);
+}
+
+.session-delete:hover {
+    color: var(--error-600);
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
+}
+
+.session-delete:hover::before {
+    opacity: 0.1;
+}
+
+.session-delete:active {
+    transform: translateY(0);
+    box-shadow: 0 1px 4px rgba(239, 68, 68, 0.3);
+}
+
+/* Selected session button styling */
+.session-item.selected .session-actions {
+    opacity: 1;
+}
+
+.session-item.selected .session-download,
+.session-item.selected .session-delete {
+    color: rgba(255, 255, 255, 0.9);
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.session-item.selected .session-download:hover,
+.session-item.selected .session-delete:hover {
+    color: white;
+    background: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 255, 255, 0.3);
+    transform: translateY(-1px) scale(1.05);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.session-item.selected .session-download:hover::before,
+.session-item.selected .session-delete:hover::before {
+    opacity: 0.15;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .session-download,
+    .session-delete {
+        width: 28px;
+        height: 28px;
+        padding: 4px;
+    }
+    
+    .session-actions {
+        gap: 2px;
+        margin-left: 4px;
+    }
+}
+
+.session-item.completed-session {
+    background: linear-gradient(135deg, var(--success-25) 0%, var(--success-50) 100%);
+    border-color: var(--success-200);
+}
+
+.session-item.completed-session:hover {
+    background: linear-gradient(135deg, var(--success-50) 0%, var(--success-100) 100%);
+    border-color: var(--success-300);
+}
+
+.session-item.completed-session .session-icon {
+    background: var(--success-100);
+    color: var(--success-700);
+}
+
+.session-item.interrupted-session {
+    background: linear-gradient(135deg, var(--warning-25) 0%, var(--warning-50) 100%);
+    border-color: var(--warning-200);
+}
+
+.session-item.interrupted-session:hover {
+    background: linear-gradient(135deg, var(--warning-50) 0%, var(--warning-100) 100%);
+    border-color: var(--warning-300);
+}
+
+.session-item.interrupted-session .session-icon {
+    background: var(--warning-100);
+    color: var(--warning-700);
+}
+
+/* Add styling and animation for solving sessions */
+.session-item.solving-session {
+    background: linear-gradient(135deg, var(--primary-25) 0%, var(--primary-50) 100%);
+    border-color: var(--primary-200);
+}
+
+.session-item.solving-session:hover {
+    background: linear-gradient(135deg, var(--primary-50) 0%, var(--primary-100) 100%);
+    border-color: var(--primary-300);
+}
+
+.session-item.solving-session .session-icon {
+    background: var(--primary-100);
+    color: var(--primary-700);
+}
+
+.session-item.solving-session .session-icon i,
+.session-item.solving-session .session-icon svg {
+    animation: spin 0.8s linear infinite;
+}
+
+/* Custom scrollbar for sessions list */
+.sessions-list::-webkit-scrollbar {
+    width: 4px;
+}
+
+.sessions-list::-webkit-scrollbar-track {
+    background: var(--gray-100);
+    border-radius: 2px;
+}
+
+.sessions-list::-webkit-scrollbar-thumb {
+    background: var(--gray-300);
+    border-radius: 2px;
+}
+
+.sessions-list::-webkit-scrollbar-thumb:hover {
+    background: var(--gray-400);
+}
+
+/* Sessions help text improvement */
+.form-group .form-help {
+    margin-top: 8px;
+    font-size: 12px;
+    color: var(--gray-500);
+    line-height: 1.4;
+    padding-left: 4px;
+}
+
+/* Read-only session message */
+.session-readonly-message {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--warning-50);
+    border: 1px solid var(--warning-200);
+    border-radius: 8px;
+    padding: 12px;
+    margin-top: 8px;
+    font-size: 13px;
+    color: var(--warning-700);
+    text-align: center;
+    transition: all 0.3s ease;
+    box-shadow: 0 2px 4px rgba(251, 191, 36, 0.1);
+}
+
+.session-readonly-message:hover {
+    background: var(--warning-100);
+    border-color: var(--warning-300);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(251, 191, 36, 0.15);
+}
+
+.session-readonly-message i {
+    flex-shrink: 0;
+    margin-right: 6px;
+} 

src/pips/static/css/components/utilities.css

@@ -0,0 +1,395 @@
+/* Utility Components */
+.status-bar {
+    padding: 12px 24px;
+    background: var(--primary-50);
+    border-bottom: 1px solid var(--primary-200);
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--primary-700);
+    display: none;
+}
+
+.status-bar.show {
+    display: block;
+}
+
+.status-bar.error {
+    background: var(--error-50);
+    border-color: var(--error-200);
+    color: var(--error-700);
+}
+
+.status-bar.success {
+    background: var(--success-50);
+    border-color: var(--success-200);
+    color: var(--success-700);
+}
+
+.status-bar.warning {
+    background: var(--warning-50);
+    border-color: var(--warning-200);
+    color: var(--warning-700);
+}
+
+.progress-container {
+    padding: 0 24px 16px;
+    display: none;
+}
+
+.progress-container.show {
+    display: block;
+}
+
+.progress-bar {
+    width: 100%;
+    height: 6px;
+    background: var(--gray-200);
+    border-radius: var(--radius-sm);
+    overflow: hidden;
+}
+
+.progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, var(--primary-500), var(--primary-600));
+    width: 0%;
+    transition: width 0.3s ease;
+    border-radius: var(--radius-sm);
+}
+
+/* Image Upload Components */
+.image-upload {
+    position: relative;
+    background: white;
+    border: 2px dashed var(--gray-300);
+    border-radius: 16px;
+    padding: 24px;
+    text-align: center;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    cursor: pointer;
+}
+
+.image-upload:hover {
+    border-color: var(--primary-400);
+    background: var(--primary-50);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.15);
+}
+
+.image-upload.has-image {
+    border-style: solid;
+    border-color: var(--success-500);
+    background: var(--success-50);
+}
+
+.image-upload.drag-over {
+    border-color: var(--primary-500);
+    background: var(--primary-100);
+    transform: scale(1.02);
+    box-shadow: 0 8px 24px rgba(14, 165, 233, 0.25);
+}
+
+.image-upload-text {
+    margin-top: 12px;
+    font-size: 14px;
+    color: var(--gray-600);
+    font-weight: 500;
+}
+
+.image-upload.has-image .image-upload-text {
+    color: var(--success-700);
+}
+
+.image-upload-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 12px;
+    padding: 16px 24px;
+    background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
+    color: var(--gray-700);
+    border: 2px solid var(--gray-200);
+    border-radius: 12px;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    font-size: 14px;
+    font-weight: 600;
+    letter-spacing: 0.01em;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
+}
+
+.image-upload-btn:hover {
+    background: linear-gradient(135deg, var(--primary-50) 0%, var(--primary-100) 100%);
+    border-color: var(--primary-300);
+    color: var(--primary-700);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
+}
+
+.image-upload input {
+    display: none;
+}
+
+.image-preview {
+    margin-top: 20px;
+    max-width: 100%;
+    max-height: 240px;
+    border-radius: 12px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+    object-fit: cover;
+    border: 3px solid white;
+}
+
+/* Expandable message styles */
+.expandable-message {
+    position: relative;
+}
+
+.expand-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 8px;
+    background: var(--gray-100);
+    border: 1px solid var(--gray-200);
+    border-radius: 6px;
+    color: var(--gray-600);
+    font-size: 12px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    margin-left: 8px;
+    vertical-align: middle;
+}
+
+.expand-toggle:hover {
+    background: var(--gray-200);
+    border-color: var(--gray-300);
+    color: var(--gray-700);
+}
+
+.expand-toggle i {
+    transition: transform 0.2s ease;
+}
+
+.expand-toggle.expanded i {
+    transform: rotate(180deg);
+}
+
+.expandable-content {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    margin-top: 12px;
+    background: var(--gray-50);
+    border-radius: 8px;
+    border: 1px solid var(--gray-200);
+}
+
+.expandable-content.expanded {
+    max-height: 400px;
+    overflow-y: auto;
+}
+
+/* Custom scrollbar for expandable content */
+.expandable-content::-webkit-scrollbar {
+    width: 6px;
+}
+
+.expandable-content::-webkit-scrollbar-track {
+    background: var(--gray-100);
+    border-radius: 3px;
+}
+
+.expandable-content::-webkit-scrollbar-thumb {
+    background: var(--gray-400);
+    border-radius: 3px;
+}
+
+.expandable-content::-webkit-scrollbar-thumb:hover {
+    background: var(--gray-500);
+}
+
+.expandable-content-inner {
+    padding: 16px;
+}
+
+.prompt-conversation {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.prompt-message {
+    background: white;
+    border-radius: 6px;
+    padding: 12px;
+    border-left: 3px solid var(--gray-300);
+}
+
+.prompt-message.system {
+    border-left-color: var(--warning-500);
+}
+
+.prompt-message.user {
+    border-left-color: var(--primary-500);
+}
+
+.prompt-message.assistant {
+    border-left-color: var(--success-500);
+}
+
+.prompt-role {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    color: var(--gray-500);
+    margin-bottom: 6px;
+    letter-spacing: 0.5px;
+}
+
+.prompt-message.system .prompt-role {
+    color: var(--warning-600);
+}
+
+.prompt-message.user .prompt-role {
+    color: var(--primary-600);
+}
+
+.prompt-message.assistant .prompt-role {
+    color: var(--success-600);
+}
+
+.prompt-content {
+    font-size: 13px;
+    line-height: 1.4;
+    color: var(--gray-700);
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
+.prompt-content pre {
+    background: var(--gray-50);
+    border: 1px solid var(--gray-200);
+    border-radius: 4px;
+    padding: 8px;
+    margin: 8px 0;
+    font-size: 12px;
+    overflow-x: auto;
+}
+
+.prompt-content code {
+    background: var(--gray-100);
+    padding: 2px 4px;
+    border-radius: 3px;
+    font-size: 12px;
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+}
+
+.prompt-content pre code {
+    background: transparent;
+    padding: 0;
+    border-radius: 0;
+}
+
+.prompt-description {
+    font-size: 12px;
+    color: var(--gray-500);
+    margin-bottom: 8px;
+    font-style: italic;
+}
+
+.prompt-image {
+    background: var(--gray-100);
+    border: 1px dashed var(--gray-300);
+    border-radius: 4px;
+    padding: 8px 12px;
+    font-size: 12px;
+    color: var(--gray-600);
+    text-align: center;
+    margin: 4px 0;
+}
+
+/* Loading and streaming animations */
+.loading-dots::after {
+    content: '';
+    animation: dots 1.5s steps(5, end) infinite;
+}
+
+@keyframes dots {
+    0%, 20% { color: rgba(0,0,0,0); text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0); }
+    40% { color: var(--gray-500); text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0); }
+    60% { text-shadow: .25em 0 0 var(--gray-500), .5em 0 0 rgba(0,0,0,0); }
+    80%, 100% { text-shadow: .25em 0 0 var(--gray-500), .5em 0 0 var(--gray-500); }
+}
+
+/* Streaming and execution indicators */
+.streaming-indicator {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    background: var(--primary-50);
+    border: 1px solid var(--primary-200);
+    border-radius: var(--radius-md);
+    font-size: 13px;
+    color: var(--primary-700);
+    margin: 8px 0;
+}
+
+.execution-spinner {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    background: var(--warning-50);
+    border: 1px solid var(--warning-200);
+    border-radius: var(--radius-md);
+    font-size: 13px;
+    color: var(--warning-700);
+    margin: 8px 0;
+}
+
+.spinner {
+    width: 16px;
+    height: 16px;
+    border: 2px solid transparent;
+    border-top: 2px solid currentColor;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+.streaming-text {
+    background: var(--primary-50);
+    padding: 2px 6px;
+    border-radius: var(--radius-sm);
+    border-left: 3px solid var(--primary-500);
+    animation: pulse-blue 1.5s ease-in-out infinite;
+    min-height: 20px;
+    display: block;
+    margin-top: 8px;
+}
+
+@keyframes pulse-blue {
+    0%, 100% { background-color: var(--primary-50); }
+    50% { background-color: var(--primary-100); }
+}
+
+.typing-indicator {
+    display: inline;
+    color: var(--primary-600);
+    font-weight: bold;
+}
+
+.typing-indicator::after {
+    content: '|';
+    animation: blink 1s infinite;
+}
+
+@keyframes blink {
+    0%, 50% { opacity: 1; }
+    51%, 100% { opacity: 0; }
+} 

src/pips/static/css/main.css

@@ -0,0 +1,18 @@
+/* PIPS - Main Stylesheet */
+/* Import design tokens first */
+@import 'tokens.css';
+
+/* Import base styles */
+@import 'base.css';
+
+/* Import all component stylesheets */
+@import 'components/panels.css';
+@import 'components/forms.css';
+@import 'components/buttons.css';
+@import 'components/chat.css';
+@import 'components/sessions.css';
+@import 'components/modal.css';
+@import 'components/utilities.css';
+
+/* Import responsive styles last */
+@import 'components/responsive.css'; 

src/pips/static/css/tokens.css

@@ -0,0 +1,45 @@
+:root {
+    --primary-50: #f0f9ff;
+    --primary-100: #e0f2fe;
+    --primary-500: #0ea5e9;
+    --primary-600: #0284c7;
+    --primary-700: #0369a1;
+    --primary-800: #075985;
+    --primary-900: #0c4a6e;
+    --primary-25: #f7fbff;
+    
+    --gray-25: #fcfcfd;
+    --gray-50: #f9fafb;
+    --gray-100: #f3f4f6;
+    --gray-200: #e5e7eb;
+    --gray-300: #d1d5db;
+    --gray-400: #9ca3af;
+    --gray-500: #6b7280;
+    --gray-600: #4b5563;
+    --gray-700: #374151;
+    --gray-800: #1f2937;
+    --gray-900: #111827;
+    
+    --success-25: #f7fef7;
+    --success-50: #f0fdf4;
+    --success-500: #22c55e;
+    --success-600: #16a34a;
+    
+    --error-50: #fef2f2;
+    --error-500: #ef4444;
+    --error-600: #dc2626;
+    
+    --warning-50: #fffbeb;
+    --warning-500: #f59e0b;
+    --warning-600: #d97706;
+    
+    --radius-sm: 0.375rem;
+    --radius-md: 0.5rem;
+    --radius-lg: 0.75rem;
+    --radius-xl: 1rem;
+    
+    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+} 

src/pips/static/default_sessions/builtin_sessions.json

@@ -0,0 +1,80 @@
+{
+  "exportDate": "2024-01-15T10:00:00.000Z",
+  "sessions": {
+    "demo_session_math_001": {
+      "id": "demo_session_math_001",
+      "title": "Calculate compound interest for savings account",
+      "problemText": "I want to calculate the compound interest on $1000 invested for 5 years at 6% annual interest rate, compounded quarterly. Show me the formula and calculate the result.",
+      "image": null,
+      "createdAt": "2024-01-15T09:00:00.000Z",
+      "lastUsed": "2024-01-15T09:15:00.000Z",
+      "status": "completed",
+      "chatHistory": [
+        {
+          "sender": "PIPS",
+          "content": "I'll help you calculate compound interest. Let me break this down step by step and create a Python function to calculate it.",
+          "iteration": "Iteration 1",
+          "promptDetails": null,
+          "timestamp": "2024-01-15T09:01:00.000Z"
+        },
+        {
+          "sender": "AI Assistant",
+          "content": "I'll solve this compound interest problem step by step.\n\n**Compound Interest Formula:**\nA = P(1 + r/n)^(nt)\n\nWhere:\n- A = final amount\n- P = principal ($1000)\n- r = annual interest rate (0.06)\n- n = number of times compounded per year (4 for quarterly)\n- t = time in years (5)\n\nLet me calculate this:\n\n```python\ndef calculate_compound_interest(principal, rate, compounds_per_year, years):\n    \"\"\"\n    Calculate compound interest\n    \"\"\"\n    amount = principal * (1 + rate/compounds_per_year) ** (compounds_per_year * years)\n    interest_earned = amount - principal\n    return amount, interest_earned\n\n# Your values\nprincipal = 1000\nrate = 0.06\ncompounds_per_year = 4  # quarterly\nyears = 5\n\nfinal_amount, interest = calculate_compound_interest(principal, rate, compounds_per_year, years)\n\nprint(f\"Principal: ${principal:,.2f}\")\nprint(f\"Annual Interest Rate: {rate*100}%\")\nprint(f\"Compounding: {compounds_per_year} times per year (quarterly)\")\nprint(f\"Time Period: {years} years\")\nprint(f\"\\nFinal Amount: ${final_amount:,.2f}\")\nprint(f\"Interest Earned: ${interest:,.2f}\")\n```\n\n**Result:**\n- Final Amount: $1,346.86\n- Interest Earned: $346.86\n\nYour $1000 investment will grow to $1,346.86 after 5 years, earning $346.86 in compound interest.",
+          "iteration": "Iteration 1",
+          "promptDetails": null,
+          "timestamp": "2024-01-15T09:02:00.000Z"
+        }
+      ]
+    },
+    "demo_session_algorithm_002": {
+      "id": "demo_session_algorithm_002",
+      "title": "Implement binary search algorithm",
+      "problemText": "I need to implement a binary search algorithm in Python. It should work on a sorted list and return the index of the target element, or -1 if not found.",
+      "image": null,
+      "createdAt": "2024-01-15T09:30:00.000Z",
+      "lastUsed": "2024-01-15T09:45:00.000Z",
+      "status": "completed",
+      "chatHistory": [
+        {
+          "sender": "PIPS",
+          "content": "I'll implement a binary search algorithm for you with proper error handling and testing.",
+          "iteration": "Iteration 1",
+          "promptDetails": null,
+          "timestamp": "2024-01-15T09:31:00.000Z"
+        },
+        {
+          "sender": "AI Assistant",
+          "content": "I'll implement a binary search algorithm with both iterative and recursive approaches.\n\n```python\ndef binary_search_iterative(arr, target):\n    \"\"\"\n    Binary search using iterative approach\n    \n    Args:\n        arr: Sorted list to search in\n        target: Element to find\n    \n    Returns:\n        Index of target if found, -1 otherwise\n    \"\"\"\n    left, right = 0, len(arr) - 1\n    \n    while left <= right:\n        mid = left + (right - left) // 2\n        \n        if arr[mid] == target:\n            return mid\n        elif arr[mid] < target:\n            left = mid + 1\n        else:\n            right = mid - 1\n    \n    return -1\n\ndef binary_search_recursive(arr, target, left=0, right=None):\n    \"\"\"\n    Binary search using recursive approach\n    \"\"\"\n    if right is None:\n        right = len(arr) - 1\n    \n    if left > right:\n        return -1\n    \n    mid = left + (right - left) // 2\n    \n    if arr[mid] == target:\n        return mid\n    elif arr[mid] < target:\n        return binary_search_recursive(arr, target, mid + 1, right)\n    else:\n        return binary_search_recursive(arr, target, left, mid - 1)\n\n# Test the implementation\ntest_array = [1, 3, 5, 7, 9, 11, 13, 15, 17, 19]\n\nprint(\"Test Array:\", test_array)\nprint(\"\\nTesting Iterative Binary Search:\")\nfor target in [7, 15, 2, 20]:\n    result = binary_search_iterative(test_array, target)\n    print(f\"Search for {target}: {'Found at index ' + str(result) if result != -1 else 'Not found'}\")\n\nprint(\"\\nTesting Recursive Binary Search:\")\nfor target in [7, 15, 2, 20]:\n    result = binary_search_recursive(test_array, target)\n    print(f\"Search for {target}: {'Found at index ' + str(result) if result != -1 else 'Not found'}\")\n```\n\n**Output:**\n```\nTest Array: [1, 3, 5, 7, 9, 11, 13, 15, 17, 19]\n\nTesting Iterative Binary Search:\nSearch for 7: Found at index 3\nSearch for 15: Found at index 7\nSearch for 2: Not found\nSearch for 20: Not found\n```\n\n**Time Complexity:** O(log n)\n**Space Complexity:** O(1) for iterative, O(log n) for recursive",
+          "iteration": "Iteration 1",
+          "promptDetails": null,
+          "timestamp": "2024-01-15T09:32:00.000Z"
+        }
+      ]
+    },
+    "demo_session_data_003": {
+      "id": "demo_session_data_003",
+      "title": "Analyze sales data and create visualization",
+      "problemText": "I have sales data in a CSV format with columns: date, product, sales_amount, region. Create a Python script to load this data and generate visualizations showing sales trends by region and top-selling products.",
+      "image": null,
+      "createdAt": "2024-01-15T10:00:00.000Z",
+      "lastUsed": "2024-01-15T10:20:00.000Z",
+      "status": "completed",
+      "chatHistory": [
+        {
+          "sender": "PIPS",
+          "content": "I'll create a comprehensive data analysis script with visualizations for your sales data.",
+          "iteration": "Iteration 1",
+          "promptDetails": null,
+          "timestamp": "2024-01-15T10:01:00.000Z"
+        },
+        {
+          "sender": "AI Assistant",
+          "content": "I'll create a comprehensive sales data analysis script with visualizations.\n\n```python\nimport pandas as pd\nimport matplotlib.pyplot as plt\nimport seaborn as sns\nfrom datetime import datetime\nimport numpy as np\n\n# Set style for better-looking plots\nplt.style.use('seaborn-v0_8')\nsns.set_palette(\"husl\")\n\ndef load_and_analyze_sales_data(csv_file):\n    \"\"\"\n    Load and analyze sales data from CSV file\n    \"\"\"\n    # Load the data\n    try:\n        df = pd.read_csv(csv_file)\n        print(f\"Data loaded successfully. Shape: {df.shape}\")\n    except FileNotFoundError:\n        print(\"Creating sample data for demonstration...\")\n        df = create_sample_data()\n    \n    # Convert date column to datetime\n    df['date'] = pd.to_datetime(df['date'])\n    \n    # Basic data info\n    print(\"\\nDataset Info:\")\n    print(df.info())\n    print(\"\\nFirst 5 rows:\")\n    print(df.head())\n    \n    return df\n\ndef create_sample_data():\n    \"\"\"\n    Create sample sales data for demonstration\n    \"\"\"\n    np.random.seed(42)\n    dates = pd.date_range('2023-01-01', '2023-12-31', freq='D')\n    products = ['Laptop', 'Mouse', 'Keyboard', 'Monitor', 'Headphones']\n    regions = ['North', 'South', 'East', 'West']\n    \n    data = []\n    for date in dates:\n        for _ in range(np.random.randint(5, 15)):\n            data.append({\n                'date': date,\n                'product': np.random.choice(products),\n                'sales_amount': np.random.uniform(50, 2000),\n                'region': np.random.choice(regions)\n            })\n    \n    return pd.DataFrame(data)\n\ndef analyze_sales_trends(df):\n    \"\"\"\n    Generate comprehensive sales analysis and visualizations\n    \"\"\"\n    # Create figure with subplots\n    fig, axes = plt.subplots(2, 2, figsize=(15, 12))\n    fig.suptitle('Sales Data Analysis Dashboard', fontsize=16, fontweight='bold')\n    \n    # 1. Sales trends by region over time\n    df['month'] = df['date'].dt.to_period('M')\n    monthly_sales = df.groupby(['month', 'region'])['sales_amount'].sum().reset_index()\n    monthly_sales['month'] = monthly_sales['month'].astype(str)\n    \n    for region in df['region'].unique():\n        region_data = monthly_sales[monthly_sales['region'] == region]\n        axes[0, 0].plot(region_data['month'], region_data['sales_amount'], \n                       marker='o', label=region, linewidth=2)\n    \n    axes[0, 0].set_title('Monthly Sales Trends by Region')\n    axes[0, 0].set_xlabel('Month')\n    axes[0, 0].set_ylabel('Sales Amount ($)')\n    axes[0, 0].legend()\n    axes[0, 0].tick_params(axis='x', rotation=45)\n    \n    # 2. Top-selling products\n    product_sales = df.groupby('product')['sales_amount'].sum().sort_values(ascending=False)\n    \n    axes[0, 1].bar(product_sales.index, product_sales.values, color='skyblue')\n    axes[0, 1].set_title('Total Sales by Product')\n    axes[0, 1].set_xlabel('Product')\n    axes[0, 1].set_ylabel('Total Sales ($)')\n    axes[0, 1].tick_params(axis='x', rotation=45)\n    \n    # 3. Sales distribution by region (pie chart)\n    region_sales = df.groupby('region')['sales_amount'].sum()\n    \n    axes[1, 0].pie(region_sales.values, labels=region_sales.index, autopct='%1.1f%%')\n    axes[1, 0].set_title('Sales Distribution by Region')\n    \n    # 4. Daily sales volume\n    daily_sales = df.groupby('date')['sales_amount'].sum()\n    \n    axes[1, 1].plot(daily_sales.index, daily_sales.values, alpha=0.7, color='green')\n    axes[1, 1].set_title('Daily Sales Volume')\n    axes[1, 1].set_xlabel('Date')\n    axes[1, 1].set_ylabel('Sales Amount ($)')\n    \n    plt.tight_layout()\n    plt.show()\n    \n    # Print summary statistics\n    print(\"\\n\" + \"=\"*50)\n    print(\"SALES ANALYSIS SUMMARY\")\n    print(\"=\"*50)\n    \n    print(f\"\\nTotal Sales: ${df['sales_amount'].sum():,.2f}\")\n    print(f\"Average Daily Sales: ${df.groupby('date')['sales_amount'].sum().mean():,.2f}\")\n    print(f\"Number of Transactions: {len(df):,}\")\n    \n    print(\"\\nTop 3 Products by Sales:\")\n    for i, (product, sales) in enumerate(product_sales.head(3).items(), 1):\n        print(f\"{i}. {product}: ${sales:,.2f}\")\n    \n    print(\"\\nSales by Region:\")\n    for region, sales in region_sales.items():\n        percentage = (sales / region_sales.sum()) * 100\n        print(f\"{region}: ${sales:,.2f} ({percentage:.1f}%)\")\n\n# Main execution\nif __name__ == \"__main__\":\n    # Load and analyze the data\n    df = load_and_analyze_sales_data('sales_data.csv')\n    \n    # Generate analysis and visualizations\n    analyze_sales_trends(df)\n    \n    print(\"\\nAnalysis complete! Check the generated visualizations.\")\n```\n\nThis script provides:\n1. **Data loading** with sample data generation if CSV not found\n2. **Four key visualizations**:\n   - Monthly sales trends by region\n   - Top-selling products bar chart\n   - Regional sales distribution pie chart\n   - Daily sales volume timeline\n3. **Summary statistics** including totals, averages, and rankings\n\n**Required libraries:** `pandas`, `matplotlib`, `seaborn`, `numpy`\n\nTo run: `pip install pandas matplotlib seaborn numpy` then execute the script.",
+          "iteration": "Iteration 1",
+          "promptDetails": null,
+          "timestamp": "2024-01-15T10:02:00.000Z"
+        }
+      ]
+    }
+  }
+} 

src/pips/static/js/core/logger.js

@@ -0,0 +1,32 @@
+/**
+ * Logger utility for PIPS application
+ */
+export class Logger {
+    static log(message, ...args) {
+        console.log(`[DEBUG] ${message}`, ...args);
+    }
+
+    static warn(message, ...args) {
+        console.warn(`[DEBUG] ${message}`, ...args);
+    }
+
+    static error(message, ...args) {
+        console.error(`[DEBUG] ${message}`, ...args);
+    }
+
+    static debug(context, message, data = null) {
+        if (data) {
+            console.log(`[DEBUG] ${context}: ${message}`, data);
+        } else {
+            console.log(`[DEBUG] ${context}: ${message}`);
+        }
+    }
+
+    static time(label) {
+        console.time(`[DEBUG] ${label}`);
+    }
+
+    static timeEnd(label) {
+        console.timeEnd(`[DEBUG] ${label}`);
+    }
+} 

src/pips/static/js/core/state.js

@@ -0,0 +1,174 @@
+/**
+ * Application State Management
+ */
+import { Logger } from './logger.js';
+
+export class AppState {
+    constructor() {
+        // Core session state
+        this.currentSessionId = null;
+        this.isSolving = false;
+        this.currentIteration = 0;
+        this.maxIterationsCount = 8;
+        this.isAwaitingUserFeedback = false;
+        
+        // Session management state
+        this.currentSessionData = null;
+        this.selectedSessionId = null; // Currently loaded session (null means current/new session)
+        this.sessionsExpanded = false;
+        
+        // Streaming and execution tracking
+        this.streamingMessages = new Map(); // Track streaming messages by iteration
+        this.executionSpinners = new Map(); // Track execution spinners by iteration
+        
+        // Timeout and connection monitoring
+        this.solvingTimeoutId = null;
+        this.connectionTimeoutId = null;
+        this.lastHeartbeat = Date.now();
+        this.connectionRetries = 0;
+        
+        // Constants
+        this.SOLVING_TIMEOUT_MS = 300000; // 5 minutes timeout for solving
+        this.CONNECTION_TIMEOUT_MS = 30000; // 30 seconds timeout for connection issues
+        this.HEARTBEAT_INTERVAL_MS = 15000; // Send heartbeat every 15 seconds
+        this.MAX_CONNECTION_RETRIES = 3;
+        
+        // Session storage
+        this.SESSION_STORAGE_KEY = 'pips_sessions';
+
+        
+        // Event listeners for state changes
+        this.listeners = {};
+    }
+
+    // Event system for state changes
+    on(event, callback) {
+        if (!this.listeners[event]) {
+            this.listeners[event] = [];
+        }
+        this.listeners[event].push(callback);
+    }
+
+    emit(event, data) {
+        if (this.listeners[event]) {
+            this.listeners[event].forEach(callback => callback(data));
+        }
+    }
+
+    // Session management
+    setCurrentSession(sessionData) {
+        this.currentSessionData = sessionData;
+        this.emit('sessionChanged', sessionData?.id);
+        Logger.debug('State', 'Current session updated', sessionData?.id);
+    }
+
+    setSelectedSession(sessionId) {
+        this.selectedSessionId = sessionId;
+        this.emit('selectedSessionChanged', sessionId);
+        Logger.debug('State', 'Selected session changed', sessionId);
+    }
+
+    // Solving state
+    setSolving(solving) {
+        this.isSolving = solving;
+        this.emit('solvingStateChanged', solving);
+        Logger.debug('State', `Solving state: ${solving}`);
+    }
+
+    setIteration(iteration) {
+        this.currentIteration = iteration;
+        this.emit('iterationChanged', iteration);
+    }
+
+    // User feedback state (for interactive mode)
+    setUserFeedback(awaiting) {
+        this.isAwaitingUserFeedback = awaiting;
+        this.emit('userFeedbackStateChanged', awaiting);
+        Logger.debug('State', `User feedback state: ${awaiting}`);
+    }
+
+    // Connection state
+    setConnectionRetries(retries) {
+        this.connectionRetries = retries;
+        this.emit('connectionRetriesChanged', retries);
+    }
+
+    updateLastHeartbeat() {
+        this.lastHeartbeat = Date.now();
+    }
+
+    // Timeout management
+    setSolvingTimeout(timeoutId) {
+        this.clearSolvingTimeout();
+        this.solvingTimeoutId = timeoutId;
+    }
+
+    clearSolvingTimeout() {
+        if (this.solvingTimeoutId) {
+            clearTimeout(this.solvingTimeoutId);
+            this.solvingTimeoutId = null;
+        }
+    }
+
+    setConnectionTimeout(timeoutId) {
+        this.clearConnectionTimeout();
+        this.connectionTimeoutId = timeoutId;
+    }
+
+    clearConnectionTimeout() {
+        if (this.connectionTimeoutId) {
+            clearTimeout(this.connectionTimeoutId);
+            this.connectionTimeoutId = null;
+        }
+    }
+
+    // Streaming management
+    addStreamingMessage(id, element) {
+        this.streamingMessages.set(id, element);
+    }
+
+    removeStreamingMessage(id) {
+        this.streamingMessages.delete(id);
+    }
+
+    addExecutionSpinner(id, element) {
+        this.executionSpinners.set(id, element);
+    }
+
+    removeExecutionSpinner(id) {
+        this.executionSpinners.delete(id);
+    }
+
+    // Get current state snapshot
+    getSnapshot() {
+        return {
+            currentSessionId: this.currentSessionId,
+            isSolving: this.isSolving,
+            currentIteration: this.currentIteration,
+            selectedSessionId: this.selectedSessionId,
+            connectionRetries: this.connectionRetries,
+            lastHeartbeat: this.lastHeartbeat,
+            streamingMessagesCount: this.streamingMessages.size,
+            executionSpinnersCount: this.executionSpinners.size
+        };
+    }
+
+    // Reset state (for new session)
+    reset() {
+        this.currentSessionId = null;
+        this.isSolving = false;
+        this.currentIteration = 0;
+        this.isAwaitingUserFeedback = false;
+        this.currentSessionData = null;
+        this.selectedSessionId = null;
+        this.clearSolvingTimeout();
+        this.clearConnectionTimeout();
+        this.streamingMessages.clear();
+        this.executionSpinners.clear();
+        this.emit('stateReset');
+        Logger.debug('State', 'Application state reset');
+    }
+}
+
+// Create singleton instance
+export const appState = new AppState(); 

src/pips/static/js/core/storage.js

@@ -0,0 +1,398 @@
+/**
+ * Storage utilities for PIPS application
+ */
+import { Logger } from './logger.js';
+
+export class StorageManager {
+    constructor() {
+        this.SESSION_STORAGE_KEY = 'pips_sessions';
+        this.API_KEYS_STORAGE_KEY = 'pips_api_keys';
+        this.USER_SETTINGS_STORAGE_KEY = 'pips_user_settings';
+        this.DEFAULT_SESSIONS_KEY = 'pips_default_session_ids';
+    }
+
+    // Session storage management
+    loadSessions() {
+        try {
+            const stored = localStorage.getItem(this.SESSION_STORAGE_KEY);
+            let sessions = stored ? JSON.parse(stored) : {};
+
+            // MIGRATION: Older versions stored sessions as an array. Convert to
+            // an object keyed by session.id so the rest of the app can work
+            // uniformly.
+            if (Array.isArray(sessions)) {
+                const converted = {};
+                sessions.forEach((sess) => {
+                    if (sess && sess.id) {
+                        converted[sess.id] = sess;
+                    }
+                });
+
+                // Persist the converted structure back to localStorage so we
+                // do this migration only once.
+                localStorage.setItem(this.SESSION_STORAGE_KEY, JSON.stringify(converted));
+                sessions = converted;
+
+                Logger.debug('Storage', `Migrated legacy array-based sessions to object with ${Object.keys(converted).length} entries`);
+            }
+
+            Logger.debug('Storage', `Loaded ${Object.keys(sessions).length} sessions from localStorage`);
+            return sessions;
+        } catch (e) {
+            Logger.error('Storage', 'Error loading sessions from localStorage:', e);
+            return {};
+        }
+    }
+
+    saveSessions(sessions) {
+        // Sanity check: if an array was passed in by mistake, convert it to
+        // object form immediately so we never persist the wrong structure.
+        if (Array.isArray(sessions)) {
+            const obj = {};
+            sessions.forEach((sess) => {
+                if (sess && sess.id) {
+                    obj[sess.id] = sess;
+                }
+            });
+            sessions = obj;
+            Logger.warn('Storage', 'saveSessions received array – converted to object before persisting');
+        }
+
+        try {
+            localStorage.setItem(this.SESSION_STORAGE_KEY, JSON.stringify(sessions));
+            Logger.debug('Storage', `Saved ${Object.keys(sessions).length} sessions to localStorage`);
+        } catch (e) {
+            Logger.error('Storage', 'Error saving sessions to localStorage:', e);
+        }
+    }
+
+    saveSession(sessionId, sessionData) {
+        const sessions = this.loadSessions();
+        sessions[sessionId] = sessionData;
+        this.saveSessions(sessions);
+    }
+
+    deleteSession(sessionId) {
+        const sessions = this.loadSessions();
+        delete sessions[sessionId];
+        this.saveSessions(sessions);
+        Logger.debug('Storage', `Deleted session ${sessionId}`);
+    }
+
+    clearAllSessions() {
+        localStorage.removeItem(this.SESSION_STORAGE_KEY);
+        Logger.debug('Storage', 'Cleared all sessions from localStorage');
+    }
+
+    // API keys storage
+    loadApiKeys() {
+        try {
+            const saved = localStorage.getItem(this.API_KEYS_STORAGE_KEY);
+            if (saved) {
+                const apiKeys = JSON.parse(saved);
+                Logger.debug('Storage', 'Loaded API keys from localStorage');
+                return apiKeys;
+            }
+            return {};
+        } catch (e) {
+            Logger.warn('Storage', 'Could not load API keys from localStorage:', e);
+            return {};
+        }
+    }
+
+    saveApiKeys(apiKeys) {
+        try {
+            localStorage.setItem(this.API_KEYS_STORAGE_KEY, JSON.stringify(apiKeys));
+            Logger.debug('Storage', 'Saved API keys to localStorage');
+        } catch (e) {
+            Logger.warn('Storage', 'Could not save API keys to localStorage:', e);
+        }
+    }
+
+    // User settings storage
+    loadUserSettings() {
+        try {
+            const saved = localStorage.getItem(this.USER_SETTINGS_STORAGE_KEY);
+            if (saved) {
+                const settings = JSON.parse(saved);
+                Logger.debug('Storage', 'Loaded user settings from localStorage');
+                return settings;
+            }
+            return {};
+        } catch (e) {
+            Logger.warn('Storage', 'Could not load user settings from localStorage:', e);
+            return {};
+        }
+    }
+
+    saveUserSettings(settings) {
+        try {
+            localStorage.setItem(this.USER_SETTINGS_STORAGE_KEY, JSON.stringify(settings));
+            Logger.debug('Storage', 'Saved user settings to localStorage');
+        } catch (e) {
+            Logger.warn('Storage', 'Could not save user settings to localStorage:', e);
+        }
+    }
+
+    // Export sessions for backup
+    exportSessions() {
+        const sessions = this.loadSessions();
+        const defaultSessionIds = this.getDefaultSessionIds();
+        
+        // Filter out default sessions
+        const userSessions = {};
+        Object.entries(sessions).forEach(([sessionId, sessionData]) => {
+            if (!defaultSessionIds.includes(sessionId)) {
+                userSessions[sessionId] = sessionData;
+            }
+        });
+        
+        const exportData = {
+            exportDate: new Date().toISOString(),
+            sessions: userSessions
+        };
+        
+        const sessionCount = Object.keys(userSessions).length;
+        const filename = sessionCount > 0 ? 
+            `pips_sessions_${new Date().toISOString().split('T')[0]}.json` :
+            `pips_sessions_empty_${new Date().toISOString().split('T')[0]}.json`;
+        
+        const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+        
+        Logger.debug('Storage', `Exported ${sessionCount} user sessions (excluding ${defaultSessionIds.length} default sessions)`);
+        return true;
+    }
+
+    // Export single session
+    exportSingleSession(sessionId) {
+        try {
+            const sessions = this.loadSessions();
+            const session = sessions[sessionId];
+            
+            if (!session) {
+                Logger.error('Storage', `Session ${sessionId} not found for export`);
+                return false;
+            }
+
+            const exportData = {
+                exportDate: new Date().toISOString(),
+                sessions: {
+                    [sessionId]: session
+                }
+            };
+            
+            const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `pips_session_${session.title.replace(/[^a-z0-9]/gi, '_').toLowerCase()}_${new Date().toISOString().split('T')[0]}.json`;
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+            
+            Logger.debug('Storage', `Single session ${sessionId} exported successfully`);
+            return true;
+        } catch (e) {
+            Logger.error('Storage', 'Error exporting single session:', e);
+            return false;
+        }
+    }
+
+    // Import sessions from JSON data
+    importSessions(rawJson, options = {}) {
+        const { merge = true, overwriteDuplicates = false } = options;
+        
+        try {
+            Logger.debug('Storage', 'Starting session import...');
+            
+            // Parse and validate JSON
+            const importData = typeof rawJson === 'string' ? JSON.parse(rawJson) : rawJson;
+            
+            if (!importData || typeof importData !== 'object') {
+                throw new Error('Invalid import data: not an object');
+            }
+            
+            if (!importData.sessions || typeof importData.sessions !== 'object') {
+                throw new Error('Invalid import data: missing or invalid sessions object');
+            }
+            
+            const incomingSessions = importData.sessions;
+            const incomingIds = Object.keys(incomingSessions);
+            
+            Logger.debug('Storage', `Found ${incomingIds.length} sessions to import`);
+            
+            // Load existing sessions if merging
+            let existingSessions = merge ? this.loadSessions() : {};
+            let importedCount = 0;
+            let skippedCount = 0;
+            let duplicatesFound = [];
+            
+            // Process each incoming session
+            for (const sessionId of incomingIds) {
+                const session = incomingSessions[sessionId];
+                
+                // Validate session structure
+                if (!session || !session.id || !session.title) {
+                    Logger.warn('Storage', `Skipping invalid session: ${sessionId}`);
+                    skippedCount++;
+                    continue;
+                }
+                
+                // Handle duplicates
+                if (existingSessions[sessionId]) {
+                    duplicatesFound.push(sessionId);
+                    
+                    if (!overwriteDuplicates) {
+                        Logger.debug('Storage', `Skipping duplicate session: ${sessionId}`);
+                        skippedCount++;
+                        continue;
+                    } else {
+                        Logger.debug('Storage', `Overwriting duplicate session: ${sessionId}`);
+                    }
+                }
+                
+                // Check for content-based duplicates (same title and problem text)
+                const contentDuplicate = Object.values(existingSessions).find(existing => 
+                    existing.title === session.title && 
+                    existing.problemText === session.problemText &&
+                    existing.id !== sessionId
+                );
+                
+                if (contentDuplicate && !overwriteDuplicates) {
+                    Logger.debug('Storage', `Skipping content duplicate: ${sessionId} (matches ${contentDuplicate.id})`);
+                    skippedCount++;
+                    continue;
+                }
+                
+                // Import the session
+                existingSessions[sessionId] = session;
+                importedCount++;
+                Logger.debug('Storage', `Imported session: ${sessionId} - "${session.title}"`);
+            }
+            
+            // Save the updated sessions
+            this.saveSessions(existingSessions);
+            
+            const summary = {
+                total: incomingIds.length,
+                imported: importedCount,
+                skipped: skippedCount,
+                duplicates: duplicatesFound.length,
+                duplicateIds: duplicatesFound
+            };
+            
+            Logger.debug('Storage', 'Import completed:', summary);
+            return summary;
+            
+        } catch (e) {
+            Logger.error('Storage', 'Error importing sessions:', e);
+            throw e;
+        }
+    }
+
+    // Import sessions from URL
+    async importSessionsFromUrl(url, options = {}) {
+        try {
+            Logger.debug('Storage', `Fetching sessions from URL: ${url}`);
+            
+            const response = await fetch(url);
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            
+            const rawJson = await response.text();
+            const result = this.importSessions(rawJson, options);
+            
+            Logger.debug('Storage', `Successfully imported sessions from URL: ${url}`);
+            return result;
+            
+        } catch (e) {
+            Logger.error('Storage', 'Error importing sessions from URL:', e);
+            throw e;
+        }
+    }
+
+    // Helper for programmatic exports
+    saveSessionBundle(sessionsObj) {
+        try {
+            const exportData = {
+                exportDate: new Date().toISOString(),
+                sessions: sessionsObj
+            };
+            
+            Logger.debug('Storage', `Created session bundle with ${Object.keys(sessionsObj).length} sessions`);
+            return exportData;
+        } catch (e) {
+            Logger.error('Storage', 'Error creating session bundle:', e);
+            throw e;
+        }
+    }
+
+    // Utility methods
+    isStorageAvailable() {
+        try {
+            const test = '__storage_test__';
+            localStorage.setItem(test, test);
+            localStorage.removeItem(test);
+            return true;
+        } catch (e) {
+            Logger.warn('Storage', 'localStorage is not available');
+            return false;
+        }
+    }
+
+    getStorageUsage() {
+        if (!this.isStorageAvailable()) return null;
+        
+        try {
+            const sessions = localStorage.getItem(this.SESSION_STORAGE_KEY);
+            const apiKeys = localStorage.getItem(this.API_KEYS_STORAGE_KEY);
+            
+            return {
+                sessions: sessions ? sessions.length : 0,
+                apiKeys: apiKeys ? apiKeys.length : 0,
+                total: (sessions?.length || 0) + (apiKeys?.length || 0)
+            };
+        } catch (e) {
+            Logger.warn('Storage', 'Could not calculate storage usage:', e);
+            return null;
+        }
+    }
+
+    // Default session tracking
+    getDefaultSessionIds() {
+        try {
+            const saved = localStorage.getItem(this.DEFAULT_SESSIONS_KEY);
+            if (saved) {
+                const ids = JSON.parse(saved);
+                Logger.debug('Storage', 'Loaded default session IDs from localStorage');
+                return ids;
+            }
+            return [];
+        } catch (e) {
+            Logger.warn('Storage', 'Could not load default session IDs from localStorage:', e);
+            return [];
+        }
+    }
+
+    saveDefaultSessionIds(ids) {
+        try {
+            localStorage.setItem(this.DEFAULT_SESSIONS_KEY, JSON.stringify(ids));
+            Logger.debug('Storage', 'Saved default session IDs to localStorage');
+        } catch (e) {
+            Logger.warn('Storage', 'Could not save default session IDs to localStorage:', e);
+        }
+    }
+}
+
+// Create singleton instance
+export const storageManager = new StorageManager(); 

src/pips/static/js/handlers/socket-handlers.js

@@ -0,0 +1,442 @@
+/**
+ * Socket Event Handlers - Handles all socket event handling logic
+ */
+import { Logger } from '../core/logger.js';
+import { appState } from '../core/state.js';
+import { domManager } from '../ui/dom-manager.js';
+import { messageManager } from '../ui/message-manager.js';
+import { settingsManager } from '../ui/settings-manager.js';
+import { sessionManager } from '../ui/session-manager.js';
+
+export class SocketEventHandlers {
+    constructor() {
+        this.timeoutHandlers = {
+            solvingTimeoutId: null,
+            connectionTimeoutId: null
+        };
+    }
+
+    // Get all event handlers for registration with socket manager
+    getEventHandlers() {
+        return {
+            'session_connected': (data) => this.handleSessionConnected(data),
+            'settings_updated': (data) => this.handleSettingsUpdated(data),
+            'solving_started': (data) => this.handleSolvingStarted(data),
+            'step_update': (data) => this.handleStepUpdate(data),
+            'solving_complete': (data) => this.handleSolvingComplete(data),
+            'solving_interrupted': (data) => this.handleSolvingInterrupted(data),
+            'solving_error': (data) => this.handleSolvingError(data),
+            'ai_response': (data) => this.handleAIResponse(data),
+            'error': (data) => this.handleError(data),
+            
+            // Streaming event handlers - CRITICAL FOR CHAT FUNCTIONALITY
+            'llm_streaming_start': (data) => this.handleLLMStreamingStart(data),
+            'llm_streaming_token': (data) => this.handleLLMStreamingToken(data),
+            'llm_streaming_end': (data) => this.handleLLMStreamingEnd(data),
+            'llm_response': (data) => this.handleLLMResponse(data),
+            
+            // Code execution handlers
+            'code_execution_start': (data) => this.handleCodeExecutionStart(data),
+            'code_execution_end': (data) => this.handleCodeExecutionEnd(data),
+            'code_execution': (data) => this.handleCodeExecution(data),
+            
+            // Code review streaming handlers
+            'code_check_streaming_start': (data) => this.handleCodeCheckStreamingStart(data),
+            'code_check_streaming_token': (data) => this.handleCodeCheckStreamingToken(data),
+            'code_check_streaming_end': (data) => this.handleCodeCheckStreamingEnd(data),
+            
+            // Interactive mode handlers
+            'awaiting_user_feedback': (data) => this.handleAwaitingUserFeedback(data),
+            'final_artifacts': (data) => this.handleFinalArtifacts(data),
+            
+            // Heartbeat handler
+            'heartbeat_response': (data) => this.handleHeartbeatResponse(data)
+        };
+    }
+
+    // Custom socket connection handlers
+    getConnectionHandlers() {
+        return {
+            'connected': () => this.handleSocketConnected(),
+            'disconnected': ({ reason }) => this.handleSocketDisconnected(reason),
+            'connectionError': ({ error }) => this.handleConnectionError(error),
+            'ioError': ({ error }) => this.handleIOError(error)
+        };
+    }
+
+    // Socket connection event handlers
+    handleSocketConnected() {
+        console.log('[DEBUG] handleSocketConnected called');
+        
+        // Only show "Connecting..." if we don't already have a session ID
+        if (!appState.currentSessionId) {
+            console.log('[DEBUG] No session ID yet, showing Connecting...');
+            domManager.updateSessionInfo('Connecting...');
+        } else {
+            console.log('[DEBUG] Already have session ID:', appState.currentSessionId);
+        }
+        
+        // Fallback safety-net: re-request session info if still unknown after 1s
+        setTimeout(() => {
+            if (!appState.currentSessionId) {
+                console.log('[DEBUG] Session ID still unknown after 1s, requesting session info');
+                Logger.debug('Socket Event', 'Session ID still unknown after 1s, requesting session info');
+                // Import socketManager here to avoid circular dependency
+                import('../network/socket.js').then(({ socketManager }) => {
+                    socketManager.send('request_session_info');
+                });
+            }
+        }, 1000);
+    }
+
+    handleSocketDisconnected(reason) {
+        domManager.updateSessionInfo('Session: Not connected');
+        domManager.updateStatus('Disconnected from server', 'error');
+        
+        // Reset solving state if we were solving
+        if (appState.isSolving) {
+            this.resetSolvingState();
+            messageManager.addMessage('PIPS System', 'Connection lost during solving. Please try again.', null);
+        }
+    }
+
+    handleConnectionError(error) {
+        domManager.updateStatus('Connection error. Retrying...', 'error');
+    }
+
+    handleIOError(error) {
+        domManager.updateStatus('Socket.IO error occurred', 'error');
+    }
+
+    // Main socket event handlers
+    handleSessionConnected(data) {
+        console.log('[DEBUG] handleSessionConnected called with data:', data);
+        Logger.debug('Socket Event', 'Session connected:', data);
+        sessionManager.handleSessionConnected(data);
+        
+        // Load saved API keys and send to server
+        settingsManager.initializeServerSettings();
+    }
+
+    handleSettingsUpdated(data) {
+        Logger.debug('Socket Event', 'Settings updated:', data);
+        settingsManager.handleSettingsUpdated(data);
+    }
+
+    handleSolvingStarted(data) {
+        Logger.debug('Socket Event', 'Solving started:', data);
+        appState.setSolving(true);
+        appState.setIteration(0);
+        
+        domManager.setSolvingState();
+        domManager.updateStatus(data.message, 'info');
+        this.setSolvingTimeout();
+
+        // Clear any existing feedback panels from previous sessions
+        if (window.interactiveFeedback) {
+            window.interactiveFeedback.removeFeedbackPanel();
+            window.interactiveFeedback.removeRestoreButton();
+        }
+
+        // Update session management
+        sessionManager.handleSolvingStarted();
+    }
+
+    handleStepUpdate(data) {
+        Logger.debug('Socket Event', 'Step update:', data);
+        
+        appState.setIteration(data.iteration || 0);
+        domManager.updateStatus(data.message, 'info');
+        domManager.updateProgress(data.progress);
+        
+        // Show step message with improved messaging
+        let displayMessage = data.message;
+        
+        // Improve messaging for specific steps
+        if (data.step === 'code_checking') {
+            displayMessage = `Analyzing code quality (iteration ${data.iteration})...`;
+        } else if (data.step === 'code_refinement') {
+            displayMessage = `Refining solution (iteration ${data.iteration})...`;
+        } else if (data.step === 'interrupted') {
+            displayMessage = '⏹️ PIPS was interrupted by the user.';
+        } else if (data.step === 'finished') {
+            displayMessage = '🎉 Solution completed successfully!';
+        }
+        
+        messageManager.addMessage('PIPS', displayMessage, data.iteration, data.prompt_details);
+        this.resetSolvingTimeout();
+    }
+
+    handleSolvingComplete(data) {
+        Logger.debug('Socket Event', 'Solving complete:', data);
+        
+        this.clearSolvingTimeout();
+        this.resetSolvingState();
+        
+        // Clean up any interactive feedback UI
+        if (window.interactiveFeedback) {
+            window.interactiveFeedback.removeFeedbackPanel();
+            window.interactiveFeedback.removeRestoreButton();
+        }
+        
+        // Display final answer
+        if (data.final_answer) {
+            messageManager.displayFinalAnswer(data.final_answer);
+        }
+        
+        domManager.updateStatus('Problem solving completed successfully!', 'success');
+
+        // Update session management
+        sessionManager.handleSolvingComplete();
+    }
+
+    handleSolvingInterrupted(data) {
+        Logger.debug('Socket Event', 'Solving interrupted:', data);
+        
+        this.clearSolvingTimeout();
+        this.resetSolvingState();
+        
+        // Clean up any interactive feedback UI
+        if (window.interactiveFeedback) {
+            window.interactiveFeedback.removeFeedbackPanel();
+            window.interactiveFeedback.removeRestoreButton();
+        }
+        
+        domManager.updateStatus(data.message || 'Problem solving interrupted', 'warning');
+
+        // Update session management
+        sessionManager.handleSolvingInterrupted();
+    }
+
+    handleSolvingError(data) {
+        Logger.error('Socket Event', 'Solving error:', data);
+        domManager.updateStatus(`Error: ${data.error}`, 'error');
+        
+        this.clearSolvingTimeout();
+        this.resetSolvingState();
+        
+        // Clean up any interactive feedback UI
+        if (window.interactiveFeedback) {
+            window.interactiveFeedback.removeFeedbackPanel();
+            window.interactiveFeedback.removeRestoreButton();
+        }
+        
+        messageManager.addMessage('PIPS System', `Error: ${data.error}`, null);
+        
+        // Update session management - clean up and save session
+        sessionManager.handleSolvingError();
+    }
+
+    handleAIResponse(data) {
+        Logger.debug('Socket Event', 'AI response:', data);
+        messageManager.addMessage(data.sender || 'AI Assistant', data.content, data.iteration);
+        domManager.updateProgress(data.progress);
+    }
+
+    handleError(data) {
+        Logger.error('Socket Event', 'Socket error:', data);
+        domManager.updateStatus(`Error: ${data.message}`, 'error');
+        
+        if (appState.isSolving) {
+            this.clearSolvingTimeout();
+            this.resetSolvingState();
+            
+            // Clean up any interactive feedback UI
+            if (window.interactiveFeedback) {
+                window.interactiveFeedback.removeFeedbackPanel();
+                window.interactiveFeedback.removeRestoreButton();
+            }
+            
+            // Clean up session state and save messages when socket errors occur
+            sessionManager.handleSolvingError();
+        }
+    }
+
+    // STREAMING EVENT HANDLERS - CRITICAL FOR CHAT FUNCTIONALITY
+    handleLLMStreamingStart(data) {
+        Logger.debug('Socket Event', 'LLM streaming started:', data);
+        messageManager.showAIThinkingIndicator(data.iteration, 'AI Assistant', data.model_name);
+    }
+
+    handleLLMStreamingToken(data) {
+        Logger.debug('Socket Event', 'LLM streaming token received:', data.token);
+        messageManager.updateStreamingMessage(data.token, data.iteration, 'AI Assistant', data.model_name);
+    }
+
+    handleLLMStreamingEnd(data) {
+        Logger.debug('Socket Event', 'LLM streaming ended:', data);
+        messageManager.removeAIThinkingIndicator(data.iteration, 'AI Assistant');
+        messageManager.finalizeStreamingMessage(data.iteration, 'AI Assistant');
+    }
+
+    handleLLMResponse(data) {
+        Logger.debug('Socket Event', 'LLM response (fallback):', data);
+        // Fallback for non-streaming responses
+        messageManager.removeAIThinkingIndicator(data.iteration);
+        messageManager.addMessage('AI Assistant', data.response, data.iteration);
+    }
+
+    // CODE EXECUTION HANDLERS
+    handleCodeExecutionStart(data) {
+        Logger.debug('Socket Event', 'Code execution started:', data);
+        messageManager.showExecutionSpinner(data.iteration);
+    }
+
+    handleCodeExecutionEnd(data) {
+        Logger.debug('Socket Event', 'Code execution ended:', data);
+        messageManager.removeExecutionSpinner(data.iteration);
+    }
+
+    handleCodeExecution(data) {
+        Logger.debug('Socket Event', 'Code execution result:', data);
+        messageManager.removeExecutionSpinner(data.iteration);
+        
+        let resultText = '';
+        if (data.error && data.error.trim() !== '') {
+            resultText = `Error: ${data.error}`;
+            messageManager.displayExecutionResult(resultText, data.iteration, true);
+        } else {
+            if (data.stdout && data.stdout.trim() !== '') {
+                resultText += `Output: ${data.stdout}\n`;
+            }
+            if (data.output && data.output.trim() !== '' && data.output !== 'None') {
+                resultText += `Result: ${data.output}`;
+            }
+            if (resultText.trim() === '') {
+                resultText = 'Code executed successfully (no output)';
+            }
+            messageManager.displayExecutionResult(resultText, data.iteration, false);
+        }
+    }
+
+    // CODE REVIEW STREAMING HANDLERS
+    handleCodeCheckStreamingStart(data) {
+        Logger.debug('Socket Event', 'Code reviewer streaming started:', data);
+        messageManager.showAIThinkingIndicator(data.iteration, 'AI Code Reviewer', data.model_name);
+    }
+
+    handleCodeCheckStreamingToken(data) {
+        Logger.debug('Socket Event', 'Code reviewer streaming token received:', data.token);
+        messageManager.updateStreamingMessage(data.token, data.iteration, 'AI Code Reviewer', data.model_name);
+    }
+
+    handleCodeCheckStreamingEnd(data) {
+        Logger.debug('Socket Event', 'Code reviewer streaming ended:', data);
+        messageManager.removeAIThinkingIndicator(data.iteration, 'AI Code Reviewer');
+        messageManager.finalizeStreamingMessage(data.iteration, 'AI Code Reviewer');
+    }
+
+    // Interactive mode handlers
+    handleAwaitingUserFeedback(data) {
+        Logger.debug('Socket Event', 'Awaiting user feedback:', data);
+        
+        // Pause solving state to allow user interaction
+        appState.setUserFeedback(true);
+        domManager.updateStatus('Waiting for your feedback...', 'info');
+        
+        // Show the interactive feedback panel
+        if (window.interactiveFeedback) {
+            window.interactiveFeedback.showFeedbackPanel(data);
+        } else {
+            // Fallback: show basic feedback interface
+            this.showBasicFeedbackInterface(data);
+        }
+    }
+
+    handleFinalArtifacts(data) {
+        Logger.debug('Socket Event', 'Final artifacts:', data);
+        
+        // Show final artifacts in the UI
+        if (window.interactiveFeedback) {
+            window.interactiveFeedback.showFinalArtifacts(data);
+        } else {
+            // Fallback: show in message
+            messageManager.addMessage('PIPS System', 'Final solution artifacts are ready.', null);
+        }
+    }
+    
+    showBasicFeedbackInterface(data) {
+        // Basic feedback interface if the interactive-feedback module isn't available
+        const feedbackHtml = `
+            <div class="basic-feedback-panel">
+                <h4>Interactive Feedback Required</h4>
+                <p>AI Critic: ${data.critic_text || 'No critic feedback available'}</p>
+                <div class="feedback-buttons">
+                    <button onclick="window.provideFeedback(true, '')">Accept & Continue</button>
+                    <button onclick="window.provideFeedback(false, '')">Reject & Continue</button>
+                    <button onclick="window.terminateSession()">Finish Here</button>
+                </div>
+            </div>
+        `;
+        
+        // Add to chat
+        messageManager.addMessage('PIPS Interactive', feedbackHtml, data.iteration || null);
+        
+        // Set up global feedback functions
+        window.provideFeedback = (acceptCritic, comments) => {
+            import('../network/socket.js').then(({ socketManager }) => {
+                socketManager.send('provide_feedback', {
+                    accept_critic: acceptCritic,
+                    extra_comments: comments,
+                    quoted_ranges: [],
+                    terminate: false
+                });
+            });
+        };
+        
+        window.terminateSession = () => {
+            import('../network/socket.js').then(({ socketManager }) => {
+                socketManager.send('provide_feedback', {
+                    accept_critic: true,
+                    extra_comments: '',
+                    quoted_ranges: [],
+                    terminate: true
+                });
+            });
+        };
+    }
+
+    // HEARTBEAT HANDLER
+    handleHeartbeatResponse(data) {
+        Logger.debug('Socket Event', 'Heartbeat response received');
+        appState.updateLastHeartbeat();
+    }
+
+    // Timeout management methods
+    setSolvingTimeout() {
+        appState.setSolvingTimeout(setTimeout(() => {
+            Logger.error('SocketHandlers', 'Solving timeout detected - server may be unresponsive');
+            domManager.updateStatus('Server timeout detected. The server may be unresponsive. Try refreshing the page.', 'error');
+            this.resetSolvingState();
+            
+            // Clean up any interactive feedback UI
+            if (window.interactiveFeedback) {
+                window.interactiveFeedback.removeFeedbackPanel();
+                window.interactiveFeedback.removeRestoreButton();
+            }
+            
+            messageManager.addMessage('PIPS System', 'Operation timed out. The server may be experiencing issues. Please try again or contact support if the problem persists.', null);
+            
+            // Clean up session state and save messages when timeout occurs
+            sessionManager.handleSolvingError();
+        }, appState.SOLVING_TIMEOUT_MS));
+    }
+
+    clearSolvingTimeout() {
+        appState.clearSolvingTimeout();
+    }
+
+    resetSolvingTimeout() {
+        this.clearSolvingTimeout();
+        this.setSolvingTimeout();
+    }
+
+    resetSolvingState() {
+        appState.setSolving(false);
+        appState.setIteration(0);
+        domManager.resetSolvingState();
+    }
+}
+
+// Create singleton instance
+export const socketEventHandlers = new SocketEventHandlers(); 

src/pips/static/js/main.js

@@ -0,0 +1,250 @@
+/**
+ * PIPS - Main Application Bootstrap
+ * Initializes the modular PIPS application
+ */
+
+// Import core modules
+import { Logger } from './core/logger.js';
+import { appState } from './core/state.js';
+import { socketManager } from './network/socket.js';
+import { storageManager } from './core/storage.js';
+
+// Import UI modules
+import { domManager } from './ui/dom-manager.js';
+import { messageManager } from './ui/message-manager.js';
+import { settingsManager } from './ui/settings-manager.js';
+import { sessionManager } from './ui/session-manager.js';
+import { imageHandler } from './ui/image-handler.js';
+
+// Import handlers
+import { socketEventHandlers } from './handlers/socket-handlers.js';
+
+// Global error handlers
+window.addEventListener('error', (event) => {
+    Logger.error('Global JavaScript error:', event.error);
+    Logger.error('Error message:', event.message);
+    Logger.error('Error filename:', event.filename);
+    Logger.error('Error line:', event.lineno);
+    Logger.error('Error column:', event.colno);
+});
+
+window.addEventListener('unhandledrejection', (event) => {
+    Logger.error('Unhandled promise rejection:', event.reason);
+});
+
+/**
+ * Main Application class - Coordinates all modules
+ */
+class PIPSApplication {
+    constructor() {
+        this.isInitialized = false;
+    }
+
+    async initialize() {
+        if (this.isInitialized) {
+            Logger.warn('App', 'Application already initialized');
+            return;
+        }
+
+        try {
+            Logger.log('App', 'Initializing PIPS application...');
+            
+            // Initialize managers
+            domManager.setupDOMReferences();
+            await domManager.initializeIcons();
+            
+            // Set up event handlers
+            socketManager.initialize();
+            sessionManager.initialize();
+            settingsManager.initialize();
+            imageHandler.initialize();
+            
+            // Load user settings from storage
+            settingsManager.loadUserSettingsFromStorage();
+            
+            // Perform first-run seeding of default sessions
+            await this.performFirstRunSeeding();
+            
+            // Set up additional image features
+            imageHandler.setupPasteHandler();
+            
+            // Set up core functionality event listeners
+            this.setupCoreEventListeners();
+            
+            // Register *all* socket & connection handlers BEFORE connecting
+            this.setupSocketHandlers();
+            
+            // Connect socket *after* handlers are registered
+            await socketManager.initialize();
+            
+            // Set initial status
+            domManager.updateStatus('Connecting to PIPS server...', 'info');
+            
+            this.isInitialized = true;
+            Logger.log('App', 'PIPS application initialized successfully');
+            
+        } catch (error) {
+            Logger.error('App', 'Error during initialization:', error);
+            domManager.updateStatus('Failed to initialize application', 'error');
+        }
+    }
+
+    async performFirstRunSeeding() {
+        try {
+            // Check if this is the first run
+            if (!localStorage.getItem('pips_first_run_completed')) {
+                Logger.debug('App', 'First run detected, seeding default sessions...');
+                
+                try {
+                    const result = await storageManager.importSessionsFromUrl('/static/default_sessions/builtin_sessions.json');
+                    Logger.log('App', `Seeded ${result.imported} default sessions successfully`);
+                    
+                    // Track which sessions are defaults by storing their IDs
+                    if (result.imported > 0) {
+                        const sessions = storageManager.loadSessions();
+                        const defaultSessionIds = Object.keys(sessions);
+                        storageManager.saveDefaultSessionIds(defaultSessionIds);
+                        Logger.debug('App', `Tracked ${defaultSessionIds.length} default session IDs`);
+                    }
+                    
+                    // Mark first run as completed
+                    localStorage.setItem('pips_first_run_completed', 'yes');
+                    localStorage.setItem('pips_default_sessions_loaded', new Date().toISOString());
+                    
+                } catch (error) {
+                    Logger.warn('App', 'Could not load default sessions (this is normal in development):', error.message);
+                    // Still mark as completed to avoid repeated attempts
+                    localStorage.setItem('pips_first_run_completed', 'yes');
+                }
+            } else {
+                Logger.debug('App', 'Not first run, skipping default session seeding');
+            }
+        } catch (error) {
+            Logger.error('App', 'Error during first-run seeding:', error);
+        }
+    }
+
+    setupCoreEventListeners() {
+        // Core problem solving functionality
+        domManager.getElement('solveBtn')?.addEventListener('click', () => this.solveProblem());
+        domManager.getElement('interruptBtn')?.addEventListener('click', () => this.interruptSolving());
+        domManager.getElement('downloadBtn')?.addEventListener('click', () => messageManager.downloadChat());
+
+        Logger.debug('App', 'Core event listeners set up');
+        
+        // Set up emergency cleanup handler for page unload
+        window.addEventListener('beforeunload', () => {
+            Logger.debug('App', 'Page unloading - performing emergency cleanup');
+            sessionManager.emergencyCleanupAndSave();
+        });
+        
+
+    }
+
+    setupSocketHandlers() {
+        console.log('[DEBUG] Setting up socket handlers...');
+        
+        // Register all socket event handlers (these are real Socket.IO events)
+        const eventHandlers = socketEventHandlers.getEventHandlers();
+        console.log('[DEBUG] Event handlers to register:', Object.keys(eventHandlers));
+        socketManager.registerEventHandlers(eventHandlers);
+        
+        // Register connection handlers (these are internal socketManager events)
+        const connectionHandlers = socketEventHandlers.getConnectionHandlers();
+        console.log('[DEBUG] Connection handlers to register:', Object.keys(connectionHandlers));
+        Object.entries(connectionHandlers).forEach(([event, handler]) => {
+            socketManager.on(event, handler);
+        });
+
+        Logger.debug('App', 'Socket event handlers set up successfully');
+    }
+
+    // Core functionality methods
+    solveProblem() {
+        const questionInput = domManager.getElement('questionInput');
+        const text = questionInput?.value.trim();
+        
+        if (!text) {
+            domManager.updateStatus('Please enter a problem description', 'warning');
+            return;
+        }
+
+        // Check if the current session is used and should be read-only
+        if (appState.currentSessionData && sessionManager.isSessionUsed(appState.currentSessionData)) {
+            domManager.updateStatus('This session has been used. Please start a new session to solve another problem.', 'warning');
+            // Automatically start a new session
+            sessionManager.startNewSession();
+            return;
+        }
+
+        // Get image data if available
+        const imageData = imageHandler.getImageForSubmission();
+
+        // Handle session creation/management through session manager
+        const sessionId = sessionManager.handleSolveProblem(text, imageData);
+
+        // Send current settings to server first to ensure PIPS mode is included
+        settingsManager.sendCurrentSettingsToServer();
+
+        // Send problem to server
+        socketManager.send('solve_problem', {
+            text: text,
+            image: imageData,
+            session_id: sessionId
+        });
+
+        Logger.debug('App', 'Problem submitted for solving');
+    }
+
+    interruptSolving() {
+        Logger.debug('App', 'Interrupt button clicked');
+        socketManager.send('interrupt_solving');
+        domManager.updateStatus('Interrupting current task...', 'warning');
+    }
+
+    // Global method for message expansion (called from HTML)
+    toggleExpandMessage(button) {
+        messageManager.toggleExpandMessage(button);
+    }
+
+    // Global methods for session management (called from HTML)
+    get sessionManager() {
+        return sessionManager;
+    }
+
+    // Expose modules for debugging and external access
+    getModules() {
+        return {
+            domManager,
+            messageManager,
+            settingsManager,
+            sessionManager,
+            imageHandler,
+            socketEventHandlers,
+            appState,
+            socketManager,
+            storageManager
+        };
+    }
+}
+
+// Initialize application when DOM is ready
+document.addEventListener('DOMContentLoaded', async () => {
+    Logger.log('DOM content loaded');
+    
+    try {
+        const app = new PIPSApplication();
+        await app.initialize();
+        
+        // Store app instance globally for debugging and HTML callbacks
+        window.pipsApp = app;
+        
+        // Also expose key functions globally for HTML access
+        window.toggleExpandMessage = (button) => app.toggleExpandMessage(button);
+        
+
+        
+    } catch (error) {
+        Logger.error('Failed to initialize PIPS application:', error);
+    }
+}); 

src/pips/static/js/network/socket.js

@@ -0,0 +1,198 @@
+/**
+ * Socket.IO connection and event management
+ */
+import { Logger } from '../core/logger.js';
+import { appState } from '../core/state.js';
+
+export class SocketManager {
+    constructor() {
+        this.socket = null;
+        this.eventHandlers = new Map();
+        this.isInitialized = false;
+    }
+
+    async initialize() {
+        if (this.isInitialized) {
+            Logger.warn('Socket', 'Already initialized');
+            return this.socket;
+        }
+
+        try {
+            Logger.debug('Socket', 'Initializing Socket.IO connection...');
+            
+            this.socket = io({
+                transports: ['websocket', 'polling'],
+                timeout: 20000,
+                forceNew: true,
+                upgrade: true,
+                rememberUpgrade: true,
+                autoConnect: true,
+                reconnection: true,
+                reconnectionDelay: 1000,
+                reconnectionAttempts: 5,
+                maxHttpBufferSize: 1e6,
+                pingTimeout: 60000,
+                pingInterval: 25000
+            });
+
+            this.setupConnectionHandlers();
+            
+            // Register any cached handlers after socket creation
+            this.registerCachedEventHandlers();
+            
+            this.isInitialized = true;
+            
+            Logger.debug('Socket', 'Socket.IO initialized successfully');
+            return this.socket;
+        } catch (e) {
+            Logger.error('Socket', 'Error initializing Socket.IO:', e);
+            throw e;
+        }
+    }
+
+    setupConnectionHandlers() {
+        this.socket.on('connect', () => {
+            Logger.debug('Socket', 'Socket connected successfully');
+            Logger.debug('Socket', 'Socket ID:', this.socket.id);
+            Logger.debug('Socket', 'Socket connected:', this.socket.connected);
+            Logger.debug('Socket', 'Socket transport:', this.socket.io.engine.transport.name);
+            
+            // Clear timeouts and reset connection state on successful connect
+            appState.clearConnectionTimeout();
+            appState.setConnectionRetries(0);
+            appState.updateLastHeartbeat();
+            
+            this.emit('connected', { 
+                socketId: this.socket.id,
+                transport: this.socket.io.engine.transport.name 
+            });
+        });
+
+        this.socket.on('disconnect', (reason) => {
+            Logger.debug('Socket', 'Socket disconnected');
+            Logger.debug('Socket', 'Disconnect reason:', reason);
+            Logger.debug('Socket', 'Socket connected:', this.socket.connected);
+            
+            // Clear all timeouts and reset state on disconnect
+            appState.clearSolvingTimeout();
+            appState.clearConnectionTimeout();
+            appState.currentSessionId = null;
+            
+            this.emit('disconnected', { reason });
+        });
+
+        this.socket.on('connect_error', (error) => {
+            Logger.error('Socket', 'Socket connection error:', error);
+            Logger.error('Socket', 'Error details:', error.message);
+            
+            this.emit('connectionError', { error });
+        });
+
+        this.socket.io.on('error', (error) => {
+            Logger.error('Socket', 'Socket.IO error:', error);
+            this.emit('ioError', { error });
+        });
+    }
+
+    // Event subscription system
+    on(event, handler) {
+        if (!this.eventHandlers.has(event)) {
+            this.eventHandlers.set(event, []);
+        }
+        this.eventHandlers.get(event).push(handler);
+        
+        Logger.debug('Socket', `Handler stored for event: ${event}`);
+    }
+
+    // Emit custom events (not socket events)
+    emit(event, data) {
+        if (this.eventHandlers.has(event)) {
+            this.eventHandlers.get(event).forEach(handler => {
+                try {
+                    handler(data);
+                } catch (e) {
+                    Logger.error('Socket', `Error in event handler for ${event}:`, e);
+                }
+            });
+        }
+    }
+
+    // Send data to server
+    send(event, data) {
+        if (!this.socket || !this.socket.connected) {
+            Logger.error('Socket', 'Cannot send - socket not connected');
+            return false;
+        }
+
+        try {
+            this.socket.emit(event, data);
+            Logger.debug('Socket', `Sent event: ${event}`, data);
+            return true;
+        } catch (e) {
+            Logger.error('Socket', `Error sending event ${event}:`, e);
+            return false;
+        }
+    }
+
+    // Connection utilities
+    isConnected() {
+        return this.socket && this.socket.connected;
+    }
+
+    getSocketId() {
+        return this.socket?.id || null;
+    }
+
+    disconnect() {
+        if (this.socket) {
+            this.socket.disconnect();
+            Logger.debug('Socket', 'Socket disconnected manually');
+        }
+    }
+
+    reconnect() {
+        if (this.socket) {
+            this.socket.disconnect();
+            setTimeout(() => {
+                this.socket.connect();
+                Logger.debug('Socket', 'Attempting manual reconnection');
+            }, 1000);
+        }
+    }
+
+    // Register all event handlers from the original monolithic code
+    registerEventHandlers(handlers) {
+        Object.entries(handlers).forEach(([event, handler]) => {
+            // Store in internal system for tracking
+            if (!this.eventHandlers.has(event)) {
+                this.eventHandlers.set(event, []);
+            }
+            this.eventHandlers.get(event).push(handler);
+            
+            // Register directly with socket if it exists
+            if (this.socket) {
+                this.socket.on(event, handler);
+                Logger.debug('Socket', `Registered handler for event: ${event}`);
+            } else {
+                Logger.debug('Socket', `Cached handler for event: ${event} (socket not ready)`);
+            }
+        });
+    }
+
+    // Helper method to register all cached handlers after socket creation
+    registerCachedEventHandlers() {
+        console.log('[DEBUG] registerCachedEventHandlers called, handlers map:', this.eventHandlers);
+        this.eventHandlers.forEach((handlers, event) => {
+            handlers.forEach(handler => {
+                if (this.socket) {
+                    this.socket.on(event, handler);
+                    console.log(`[DEBUG] Registered cached handler for event: ${event}`);
+                    Logger.debug('Socket', `Registered cached handler for event: ${event}`);
+                }
+            });
+        });
+    }
+}
+
+// Create singleton instance
+export const socketManager = new SocketManager(); 

src/pips/static/js/ui/dom-manager.js

@@ -0,0 +1,149 @@
+/**
+ * DOM Manager - Handles DOM references, basic UI operations, and status management
+ */
+import { Logger } from '../core/logger.js';
+
+export class DOMManager {
+    constructor() {
+        this.elements = {};
+    }
+
+    setupDOMReferences() {
+        // Cache all DOM elements
+        this.elements = {
+            // Input elements
+            questionInput: document.getElementById('questionInput'),
+            imageInput: document.getElementById('imageInput'),
+            imagePreview: document.getElementById('imagePreview'),
+            
+            // Button elements
+            solveBtn: document.getElementById('solveBtn'),
+            interruptBtn: document.getElementById('interruptBtn'),
+            settingsBtn: document.getElementById('settingsBtn'),
+            downloadBtn: document.getElementById('downloadBtn'),
+            newSessionBtn: document.getElementById('newSessionBtn'),
+            
+            // UI elements
+            chatArea: document.getElementById('chatArea'),
+            statusIndicator: document.getElementById('statusIndicator'),
+            progressContainer: document.getElementById('progressContainer'),
+            progressFill: document.getElementById('progressFill'),
+            sessionInfo: document.getElementById('sessionInfo'),
+            
+            // Settings modal elements
+            settingsModal: document.getElementById('settingsModal'),
+            settingsForm: document.getElementById('settingsForm'),
+            closeBtn: document.querySelector('.close'),
+            
+            // Form elements
+            modelSelect: document.getElementById('modelSelect'),
+            generatorModelSelect: document.getElementById('generatorModelSelect'),
+            criticModelSelect: document.getElementById('criticModelSelect'),
+            openaiApiKeyInput: document.getElementById('openaiApiKeyInput'),
+            googleApiKeyInput: document.getElementById('googleApiKeyInput'),
+            anthropicApiKeyInput: document.getElementById('anthropicApiKeyInput'),
+            maxIterations: document.getElementById('maxIterations'),
+            temperature: document.getElementById('temperature'),
+            maxTokens: document.getElementById('maxTokens'),
+            maxExecutionTime: document.getElementById('maxExecutionTime'),
+            pipsModeSwitch: document.getElementById('pipsModeSwitch'),
+            pipsModeAgent: document.getElementById('pipsModeAgent'),
+            pipsModeInteractive: document.getElementById('pipsModeInteractive'),
+            modeDescription: document.getElementById('modeDescription'),
+            customRules: document.getElementById('customRules'),
+            customRulesSettings: document.getElementById('customRulesSettings'),
+            
+            // Session elements
+            sessionsToggle: document.getElementById('sessionsToggle'),
+            sessionsContainer: document.getElementById('sessionsContainer'),
+            sessionsList: document.getElementById('sessionsList'),
+            clearSessionsBtn: document.getElementById('clearSessionsBtn'),
+            exportSessionsBtn: document.getElementById('exportSessionsBtn'),
+            importSessionsBtn: document.getElementById('importSessionsBtn'),
+            importSessionsInput: document.getElementById('importSessionsInput'),
+            
+            // Upload elements
+            imageUpload: document.querySelector('.image-upload'),
+            imageUploadBtn: document.querySelector('.image-upload-btn')
+        };
+
+        // Verify critical elements exist
+        const criticalElements = [
+            'questionInput', 'solveBtn', 'chatArea', 'statusIndicator'
+        ];
+
+        for (const elementName of criticalElements) {
+            if (!this.elements[elementName]) {
+                Logger.error(`Critical element missing: ${elementName}`);
+            }
+        }
+
+        Logger.debug('DOM', 'DOM references set up successfully');
+    }
+
+    async initializeIcons() {
+        try {
+            if (typeof feather !== 'undefined') {
+                feather.replace();
+                Logger.log('Feather icons initialized successfully');
+            } else {
+                Logger.warn('Feather icons library not found');
+            }
+        } catch (e) {
+            Logger.error('Error initializing Feather icons:', e);
+        }
+    }
+
+    updateStatus(message, type = 'info') {
+        this.elements.statusIndicator.textContent = message;
+        this.elements.statusIndicator.className = `status-bar show ${type}`;
+        
+        // Auto-hide status after 5 seconds unless it's an error
+        if (type !== 'error') {
+            setTimeout(() => {
+                this.elements.statusIndicator.classList.remove('show');
+            }, 5000);
+        }
+    }
+
+    updateSessionInfo(text) {
+        this.elements.sessionInfo.textContent = text;
+    }
+
+    resetSolvingState() {
+        this.elements.solveBtn.style.display = 'inline-flex';
+        this.elements.interruptBtn.style.display = 'none';
+        this.elements.questionInput.disabled = false;
+        this.elements.progressContainer.classList.remove('show');
+        this.elements.progressFill.style.width = '0%';
+    }
+
+    setSolvingState() {
+        this.elements.solveBtn.style.display = 'none';
+        this.elements.interruptBtn.style.display = 'inline-flex';
+        this.elements.questionInput.disabled = true;
+        this.elements.progressContainer.classList.add('show');
+    }
+
+    updateProgress(progress) {
+        if (progress !== undefined) {
+            this.elements.progressFill.style.width = `${progress}%`;
+        }
+    }
+
+    clearInputs() {
+        this.elements.questionInput.value = '';
+        this.elements.imagePreview.style.display = 'none';
+    }
+
+    getElement(name) {
+        return this.elements[name];
+    }
+
+    getAllElements() {
+        return this.elements;
+    }
+}
+
+// Create singleton instance
+export const domManager = new DOMManager(); 

src/pips/static/js/ui/image-handler.js

@@ -0,0 +1,360 @@
+/**
+ * Image Handler - Handles image upload and drag & drop functionality
+ */
+import { Logger } from '../core/logger.js';
+import { domManager } from './dom-manager.js';
+
+export class ImageHandler {
+    constructor() {
+        this.isInitialized = false;
+        this.currentImageData = null;
+    }
+
+    initialize() {
+        if (this.isInitialized) return;
+        
+        this.setupEventListeners();
+        this.setupDragAndDrop();
+        this.isInitialized = true;
+        
+        Logger.debug('Image', 'Image handler initialized');
+    }
+
+    setupEventListeners() {
+        // Image upload listeners
+        domManager.getElement('imageInput')?.addEventListener('change', (e) => this.handleImageUpload(e));
+        domManager.getElement('imageUploadBtn')?.addEventListener('click', () => this.triggerImageUpload());
+        
+        Logger.debug('Image', 'Event listeners set up');
+    }
+
+    setupDragAndDrop() {
+        const imageUpload = domManager.getElement('imageUpload');
+        
+        if (!imageUpload) {
+            Logger.warn('Image', 'Image upload element not found');
+            return;
+        }
+
+        imageUpload.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            imageUpload.classList.add('drag-over');
+        });
+        
+        imageUpload.addEventListener('dragleave', () => {
+            imageUpload.classList.remove('drag-over');
+        });
+        
+        imageUpload.addEventListener('drop', (e) => {
+            e.preventDefault();
+            imageUpload.classList.remove('drag-over');
+            
+            const file = e.dataTransfer.files[0];
+            if (file && file.type.startsWith('image/')) {
+                this.processImageFile(file);
+            } else {
+                domManager.updateStatus('Please drop a valid image file', 'warning');
+            }
+        });
+
+        Logger.debug('Image', 'Drag and drop set up');
+    }
+
+    triggerImageUpload() {
+        const imageInput = domManager.getElement('imageInput');
+        if (imageInput) {
+            imageInput.click();
+        }
+    }
+
+    handleImageUpload(e) {
+        const file = e.target.files[0];
+        if (file) {
+            this.processImageFile(file);
+        }
+    }
+
+    processImageFile(file) {
+        // Validate file type
+        if (!file.type.startsWith('image/')) {
+            domManager.updateStatus('Please select a valid image file', 'warning');
+            return;
+        }
+
+        // Validate file size (10MB limit)
+        const maxSize = 10 * 1024 * 1024; // 10MB
+        if (file.size > maxSize) {
+            domManager.updateStatus('Image file is too large. Please select a file under 10MB', 'warning');
+            return;
+        }
+
+        const reader = new FileReader();
+        
+        reader.onload = (e) => {
+            try {
+                this.displayImagePreview(e.target.result);
+                this.currentImageData = e.target.result;
+                domManager.updateStatus(`Image "${file.name}" loaded successfully`, 'success');
+                Logger.debug('Image', `Image processed: ${file.name} (${file.size} bytes)`);
+            } catch (error) {
+                Logger.error('Image', 'Error processing image:', error);
+                domManager.updateStatus('Error processing image', 'error');
+            }
+        };
+        
+        reader.onerror = () => {
+            Logger.error('Image', 'Error reading image file');
+            domManager.updateStatus('Error reading image file', 'error');
+        };
+        
+        reader.readAsDataURL(file);
+    }
+
+    displayImagePreview(imageSrc) {
+        const imagePreview = domManager.getElement('imagePreview');
+        const imageUpload = domManager.getElement('imageUpload');
+        const imageUploadBtn = domManager.getElement('imageUploadBtn');
+        
+        if (imagePreview) {
+            imagePreview.src = imageSrc;
+            imagePreview.style.display = 'block';
+        }
+        
+        if (imageUpload) {
+            imageUpload.classList.add('has-image');
+        }
+        
+        if (imageUploadBtn) {
+            imageUploadBtn.innerHTML = `
+                <i data-feather="check-circle" style="width: 16px; height: 16px;"></i>
+                Image Selected
+            `;
+            
+            // Replace feather icons
+            if (typeof feather !== 'undefined') {
+                feather.replace(imageUploadBtn);
+            }
+        }
+    }
+
+    clearImage() {
+        const imagePreview = domManager.getElement('imagePreview');
+        const imageUpload = domManager.getElement('imageUpload');
+        const imageUploadBtn = domManager.getElement('imageUploadBtn');
+        const imageInput = domManager.getElement('imageInput');
+        
+        if (imagePreview) {
+            imagePreview.style.display = 'none';
+            imagePreview.src = '';
+        }
+        
+        if (imageUpload) {
+            imageUpload.classList.remove('has-image');
+        }
+        
+        if (imageUploadBtn) {
+            imageUploadBtn.innerHTML = `
+                <i data-feather="upload" style="width: 16px; height: 16px;"></i>
+                Upload Image
+            `;
+            
+            // Replace feather icons
+            if (typeof feather !== 'undefined') {
+                feather.replace(imageUploadBtn);
+            }
+        }
+        
+        if (imageInput) {
+            imageInput.value = '';
+        }
+        
+        this.currentImageData = null;
+        Logger.debug('Image', 'Image cleared');
+    }
+
+    getCurrentImageData() {
+        return this.currentImageData;
+    }
+
+    hasImage() {
+        return this.currentImageData !== null;
+    }
+
+    // Get image data in format suitable for sending to server
+    getImageForSubmission() {
+        if (!this.currentImageData) {
+            return null;
+        }
+        
+        try {
+            // Extract base64 data without the data URL prefix
+            const base64Data = this.currentImageData.split(',')[1];
+            const mimeType = this.currentImageData.split(';')[0].split(':')[1];
+            
+            return {
+                data: base64Data,
+                mimeType: mimeType,
+                filename: `uploaded_image.${this.getExtensionFromMimeType(mimeType)}`
+            };
+        } catch (error) {
+            Logger.error('Image', 'Error preparing image for submission:', error);
+            return null;
+        }
+    }
+
+    getExtensionFromMimeType(mimeType) {
+        const extensions = {
+            'image/jpeg': 'jpg',
+            'image/jpg': 'jpg',
+            'image/png': 'png',
+            'image/gif': 'gif',
+            'image/webp': 'webp',
+            'image/bmp': 'bmp',
+            'image/svg+xml': 'svg'
+        };
+        
+        return extensions[mimeType] || 'jpg';
+    }
+
+    // Validate image before processing
+    validateImage(file) {
+        const validTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp', 'image/bmp'];
+        const maxSize = 10 * 1024 * 1024; // 10MB
+        
+        const errors = [];
+        
+        if (!validTypes.includes(file.type)) {
+            errors.push('Invalid file type. Please select a JPEG, PNG, GIF, WebP, or BMP image.');
+        }
+        
+        if (file.size > maxSize) {
+            errors.push('File size too large. Please select an image under 10MB.');
+        }
+        
+        if (file.size === 0) {
+            errors.push('File appears to be empty.');
+        }
+        
+        return {
+            isValid: errors.length === 0,
+            errors: errors
+        };
+    }
+
+    // Get image metadata
+    getImageMetadata(file) {
+        return {
+            name: file.name,
+            size: file.size,
+            type: file.type,
+            lastModified: file.lastModified ? new Date(file.lastModified) : null
+        };
+    }
+
+    // Handle paste events for image upload
+    setupPasteHandler() {
+        document.addEventListener('paste', (e) => {
+            const items = e.clipboardData?.items;
+            if (!items) return;
+            
+            for (let i = 0; i < items.length; i++) {
+                const item = items[i];
+                
+                if (item.type.startsWith('image/')) {
+                    e.preventDefault();
+                    const file = item.getAsFile();
+                    
+                    if (file) {
+                        this.processImageFile(file);
+                        domManager.updateStatus('Image pasted from clipboard', 'success');
+                    }
+                    break;
+                }
+            }
+        });
+        
+        Logger.debug('Image', 'Paste handler set up');
+    }
+
+    // Generate image thumbnail for preview
+    generateThumbnail(imageSrc, maxWidth = 200, maxHeight = 200) {
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            const canvas = document.createElement('canvas');
+            const ctx = canvas.getContext('2d');
+            
+            img.onload = () => {
+                // Calculate new dimensions
+                let { width, height } = img;
+                
+                if (width > height) {
+                    if (width > maxWidth) {
+                        height = (height * maxWidth) / width;
+                        width = maxWidth;
+                    }
+                } else {
+                    if (height > maxHeight) {
+                        width = (width * maxHeight) / height;
+                        height = maxHeight;
+                    }
+                }
+                
+                canvas.width = width;
+                canvas.height = height;
+                
+                // Draw resized image
+                ctx.drawImage(img, 0, 0, width, height);
+                
+                // Convert to data URL
+                const thumbnailData = canvas.toDataURL('image/jpeg', 0.8);
+                resolve(thumbnailData);
+            };
+            
+            img.onerror = () => {
+                reject(new Error('Failed to load image for thumbnail generation'));
+            };
+            
+            img.src = imageSrc;
+        });
+    }
+
+    // SESSION MANAGEMENT METHODS
+    loadSessionImage(imageData) {
+        const imagePreview = domManager.getElement('imagePreview');
+        const imageUpload = document.querySelector('.image-upload');
+        const uploadBtn = document.querySelector('.image-upload-btn');
+        
+        if (imageData && imagePreview && imageUpload && uploadBtn) {
+            // Load image into preview
+            imagePreview.src = imageData;
+            imagePreview.style.display = 'block';
+            imageUpload.classList.add('has-image');
+            
+            // Update button state
+            uploadBtn.innerHTML = `
+                <i data-feather="check-circle" style="width: 16px; height: 16px;"></i>
+                Image Selected
+            `;
+            
+            // Store image data
+            this.currentImageData = imageData;
+            
+            Logger.debug('Image', 'Session image loaded');
+        } else {
+            // Clear image if no data provided
+            this.clearImage();
+        }
+        
+        // Replace feather icons
+        try {
+            if (typeof feather !== 'undefined' && uploadBtn) {
+                feather.replace(uploadBtn);
+            }
+        } catch (e) {
+            Logger.warn('Image', 'Could not replace feather icons in upload button:', e);
+        }
+    }
+}
+
+// Create singleton instance
+export const imageHandler = new ImageHandler(); 

src/pips/static/js/ui/interactive-feedback.js

@@ -0,0 +1,955 @@
+/**
+ * Interactive Feedback UI for PIPS Interactive Mode
+ * 
+ * This module handles the user interface for providing feedback on
+ * AI-generated code and critic suggestions during interactive solving.
+ */
+
+class InteractiveFeedback {
+    constructor() {
+        this.feedbackPanel = null;
+        this.currentIteration = null;
+        this.currentCode = '';
+        this.currentSymbols = {};
+        this.criticText = '';
+        this.selectedRanges = [];
+        this.isVisible = false;
+        this.isResizing = false;
+        this.sidebarWidth = 380; // Default width
+        this.minWidth = 300;
+        this.maxWidth = 800;
+        this.feedbackCounter = 0;
+        this.isMinimized = false;
+        this.restoreButton = null;
+        
+        // Store panel state for restoration
+        this.panelState = null;
+        
+        this.initializeEventHandlers();
+    }
+
+    initializeEventHandlers() {
+        // Socket event handlers - Note: We don't handle these here anymore
+        // They are handled by the main socket event handlers in socket-handlers.js
+        // This class is called by those handlers when needed
+        
+        // Add global mouse events for resizing
+        document.addEventListener('mousemove', (e) => this.handleMouseMove(e));
+        document.addEventListener('mouseup', () => this.handleMouseUp());
+    }
+
+    showFeedbackPanel(data) {
+        const { iteration, critic_text, code, symbols } = data;
+        
+        this.currentIteration = iteration;
+        this.currentCode = code;
+        this.currentSymbols = symbols;
+        this.criticText = critic_text;
+        this.selectedRanges = [];
+        this.feedbackCounter = 0;
+        this.isMinimized = false;
+        
+        // Store panel state for potential restoration
+        this.panelState = {
+            iteration,
+            critic_text,
+            code,
+            symbols
+        };
+        
+        // Remove any existing restore button
+        this.removeRestoreButton();
+        
+        this.renderFeedbackPanel();
+    }
+
+    renderFeedbackPanel() {
+        // Remove existing panel if any
+        this.removeFeedbackPanel();
+        
+        // Create compact sidebar panel
+        this.feedbackPanel = document.createElement('div');
+        this.feedbackPanel.className = 'feedback-sidebar';
+        this.feedbackPanel.style.width = `${this.sidebarWidth}px`;
+        this.feedbackPanel.innerHTML = `
+            <div class="feedback-resize-handle" id="resize-handle"></div>
+            
+            <div class="feedback-sidebar-header">
+                <div class="feedback-title">
+                    <h4>Interactive Review</h4>
+                    <span class="iteration-badge">Iteration ${this.currentIteration}</span>
+                </div>
+                <div class="feedback-controls">
+                    <button class="feedback-close" id="feedback-close" title="Close panel">
+                        <i data-feather="x"></i>
+                    </button>
+                </div>
+            </div>
+            
+            <div class="feedback-sidebar-content">
+                <!-- Symbols Section -->
+                <div class="symbols-section">
+                    <div class="section-header">
+                        <h5>Extracted Symbols</h5>
+                        <button class="expand-symbols-btn" id="expand-symbols">
+                            <i data-feather="eye"></i>
+                        </button>
+                    </div>
+                    <div class="symbols-preview" id="symbols-preview">
+                        ${this.renderSymbolsJSON()}
+                    </div>
+                </div>
+                
+                <!-- Code Preview Section -->
+                <div class="code-preview-section">
+                    <div class="section-header">
+                        <h5>Generated Code</h5>
+                        <button class="expand-code-btn" id="expand-code">
+                            <i data-feather="maximize-2"></i>
+                        </button>
+                    </div>
+                    <div class="code-preview" id="code-preview">
+                        <pre class="code-snippet hoverable-code" title="Click to expand and highlight code">${this.escapeHtml(this.truncateCode(this.currentCode))}</pre>
+                    </div>
+                </div>
+                
+                <!-- AI Critic Section -->
+                <div class="critic-section">
+                    <div class="section-header">
+                        <h5>AI Analysis</h5>
+                        <label class="critic-toggle">
+                            <input type="checkbox" id="accept-critic" checked>
+                            <span class="toggle-slider"></span>
+                        </label>
+                    </div>
+                    <div class="critic-summary">
+                        ${this.formatCriticSummary(this.criticText)}
+                    </div>
+                </div>
+                
+                <!-- Feedback Cart -->
+                <div class="feedback-cart" id="feedback-cart">
+                    <div class="section-header">
+                        <h5>Your Feedback</h5>
+                        <span class="cart-count" id="cart-count">0 items</span>
+                    </div>
+                    <div class="cart-items" id="cart-items">
+                        <div class="empty-cart">
+                            <i data-feather="message-circle"></i>
+                            <p>No feedback added yet</p>
+                            <small>Highlight code or symbols to add feedback</small>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Quick Actions -->
+                <div class="quick-actions">
+                    <button class="action-btn secondary" id="add-comment">
+                        <i data-feather="plus"></i>
+                        Add General Comment
+                    </button>
+                    <button class="action-btn success" id="finish-here">
+                        <i data-feather="check"></i>
+                        Submit Feedback
+                    </button>
+                </div>
+                
+                <!-- Comments Section (Initially Hidden) -->
+                <div class="comments-section" id="comments-section" style="display: none;">
+                    <h5>Add General Comment</h5>
+                    <textarea id="user-comments" 
+                              placeholder="Add your general feedback here..."
+                              rows="3"></textarea>
+                    <div class="comment-actions">
+                        <button class="action-btn small primary" id="save-comment">Add</button>
+                        <button class="action-btn small secondary" id="cancel-comment">Cancel</button>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Symbols Modal (Hidden by default) -->
+            <div class="symbols-modal" id="symbols-modal" style="display: none;">
+                <div class="symbols-modal-content">
+                    <div class="symbols-modal-header">
+                        <h4>Extracted Symbols - Iteration ${this.currentIteration}</h4>
+                        <button class="modal-close" id="close-symbols-modal">
+                            <i data-feather="x"></i>
+                        </button>
+                    </div>
+                    <div class="symbols-modal-body">
+                        <div class="symbols-container">
+                            <pre class="symbols-json selectable-json" id="symbols-json">${this.escapeHtml(JSON.stringify(this.currentSymbols, null, 2))}</pre>
+                        </div>
+                        <div class="selection-info">
+                            <p>Select any part of the JSON to add specific feedback</p>
+                        </div>
+                        
+                        <!-- Dialogue Box for Symbol Feedback -->
+                        <div class="dialogue-box" id="symbol-dialogue" style="display: none;">
+                            <div class="dialogue-header">
+                                <h6>Add Feedback</h6>
+                                <button class="dialogue-close" id="close-symbol-dialogue">×</button>
+                            </div>
+                            <div class="dialogue-content">
+                                <div class="highlighted-content">
+                                    <label>Selected:</label>
+                                    <div class="highlight-preview" id="symbol-highlight-preview"></div>
+                                </div>
+                                <div class="feedback-input">
+                                    <label>Your feedback:</label>
+                                    <textarea id="symbol-feedback-text" placeholder="Enter your feedback about this selection..." rows="3"></textarea>
+                                </div>
+                                <div class="dialogue-actions">
+                                    <button class="dialogue-btn primary" id="save-symbol-feedback">Add Feedback</button>
+                                    <button class="dialogue-btn secondary" id="cancel-symbol-feedback">Cancel</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Code Modal (Hidden by default) -->
+            <div class="code-modal" id="code-modal" style="display: none;">
+                <div class="code-modal-content">
+                    <div class="code-modal-header">
+                        <h4>Generated Code - Iteration ${this.currentIteration}</h4>
+                        <button class="modal-close" id="close-code-modal">
+                            <i data-feather="x"></i>
+                        </button>
+                    </div>
+                    <div class="code-modal-body">
+                        <div class="code-container">
+                            <div class="code-gutter" id="code-gutter"></div>
+                            <pre class="code-display selectable-code" id="code-display">${this.escapeHtml(this.currentCode)}</pre>
+                        </div>
+                        <div class="selection-info" id="selection-info">
+                            <p>Select code to add specific feedback</p>
+                        </div>
+                        
+                        <!-- Dialogue Box for Code Feedback -->
+                        <div class="dialogue-box" id="code-dialogue" style="display: none;">
+                            <div class="dialogue-header">
+                                <h6>Add Code Feedback</h6>
+                                <button class="dialogue-close" id="close-code-dialogue">×</button>
+                            </div>
+                            <div class="dialogue-content">
+                                <div class="highlighted-content">
+                                    <label>Selected Code:</label>
+                                    <div class="highlight-preview" id="code-highlight-preview"></div>
+                                </div>
+                                <div class="feedback-input">
+                                    <label>Your feedback:</label>
+                                    <textarea id="code-feedback-text" placeholder="Enter your feedback about this code..." rows="3"></textarea>
+                                </div>
+                                <div class="dialogue-actions">
+                                    <button class="dialogue-btn primary" id="save-code-feedback">Add Feedback</button>
+                                    <button class="dialogue-btn secondary" id="cancel-code-feedback">Cancel</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
+        
+        // Insert panel into the body (overlay)
+        document.body.appendChild(this.feedbackPanel);
+        
+        // Add event listeners
+        this.attachPanelEventListeners();
+        
+        // Initialize feather icons
+        if (typeof feather !== 'undefined') {
+            feather.replace();
+        }
+        
+        // Show panel with animation
+        setTimeout(() => {
+            this.feedbackPanel.classList.add('visible');
+            this.isVisible = true;
+        }, 10);
+    }
+
+    renderSymbolsJSON() {
+        if (!this.currentSymbols || Object.keys(this.currentSymbols).length === 0) {
+            return '<p class="no-symbols">No symbols extracted</p>';
+        }
+        
+        const jsonString = JSON.stringify(this.currentSymbols, null, 2);
+        const truncatedJson = jsonString.length > 200 ? jsonString.substring(0, 200) + '\n  ...\n}' : jsonString;
+        
+        return `<pre class="symbols-json-preview selectable-json" title="Click to expand and highlight symbols">${this.escapeHtml(truncatedJson)}</pre>`;
+    }
+
+    attachPanelEventListeners() {
+        // Resize handle
+        document.getElementById('resize-handle').addEventListener('mousedown', (e) => {
+            this.startResize(e);
+        });
+        
+        // Close button with confirmation
+        document.getElementById('feedback-close').addEventListener('click', () => {
+            this.confirmCloseFeedbackPanel();
+        });
+        
+        // Expand symbols button
+        document.getElementById('expand-symbols').addEventListener('click', () => {
+            this.showSymbolsModal();
+        });
+        
+        // Expand code button
+        document.getElementById('expand-code').addEventListener('click', () => {
+            this.showCodeModal();
+        });
+        
+        // Add comment button
+        document.getElementById('add-comment').addEventListener('click', () => {
+            this.showCommentsSection();
+        });
+        
+        // Finish button
+        document.getElementById('finish-here').addEventListener('click', () => {
+            this.submitFeedback();
+        });
+        
+        // Comment actions
+        document.getElementById('save-comment').addEventListener('click', () => {
+            this.addGeneralComment();
+        });
+        
+        document.getElementById('cancel-comment').addEventListener('click', () => {
+            this.hideCommentsSection();
+            document.getElementById('user-comments').value = '';
+        });
+        
+        // Modal close buttons
+        document.getElementById('close-symbols-modal').addEventListener('click', () => {
+            this.hideSymbolsModal();
+        });
+        
+        document.getElementById('close-code-modal').addEventListener('click', () => {
+            this.hideCodeModal();
+        });
+        
+        // Click outside to close modals
+        document.getElementById('symbols-modal').addEventListener('click', (e) => {
+            if (e.target.id === 'symbols-modal') {
+                this.hideSymbolsModal();
+            }
+        });
+        
+        document.getElementById('code-modal').addEventListener('click', (e) => {
+            if (e.target.id === 'code-modal') {
+                this.hideCodeModal();
+            }
+        });
+        
+        // Dialogue close buttons
+        document.getElementById('close-symbol-dialogue')?.addEventListener('click', () => {
+            this.hideSymbolDialogue();
+        });
+        
+        document.getElementById('close-code-dialogue')?.addEventListener('click', () => {
+            this.hideCodeDialogue();
+        });
+        
+        // Dialogue action buttons
+        document.getElementById('save-symbol-feedback')?.addEventListener('click', () => {
+            this.saveSymbolFeedback();
+        });
+        
+        document.getElementById('cancel-symbol-feedback')?.addEventListener('click', () => {
+            this.hideSymbolDialogue();
+        });
+        
+        document.getElementById('save-code-feedback')?.addEventListener('click', () => {
+            this.saveCodeFeedback();
+        });
+        
+        document.getElementById('cancel-code-feedback')?.addEventListener('click', () => {
+            this.hideCodeDialogue();
+        });
+        
+        // Preview click handlers
+        document.querySelector('.hoverable-code').addEventListener('click', () => {
+            this.showCodeModal();
+        });
+        
+        document.querySelector('.selectable-json')?.addEventListener('click', () => {
+            this.showSymbolsModal();
+        });
+    }
+
+    startResize(e) {
+        this.isResizing = true;
+        this.startX = e.clientX;
+        this.startWidth = this.sidebarWidth;
+        
+        // Add visual feedback
+        document.body.style.cursor = 'ew-resize';
+        this.feedbackPanel.classList.add('resizing');
+        
+        e.preventDefault();
+    }
+
+    handleMouseMove(e) {
+        if (!this.isResizing) return;
+        
+        const deltaX = this.startX - e.clientX;
+        const newWidth = Math.max(this.minWidth, Math.min(this.maxWidth, this.startWidth + deltaX));
+        
+        this.sidebarWidth = newWidth;
+        this.feedbackPanel.style.width = `${newWidth}px`;
+    }
+
+    handleMouseUp() {
+        if (!this.isResizing) return;
+        
+        this.isResizing = false;
+        document.body.style.cursor = '';
+        this.feedbackPanel.classList.remove('resizing');
+    }
+
+    showSymbolsModal() {
+        const modal = document.getElementById('symbols-modal');
+        modal.style.display = 'flex';
+        
+        // Initialize JSON selection
+        setTimeout(() => {
+            this.initializeJSONSelection();
+        }, 10);
+    }
+
+    hideSymbolsModal() {
+        const modal = document.getElementById('symbols-modal');
+        modal.style.display = 'none';
+        this.hideSymbolDialogue();
+    }
+
+    showCodeModal() {
+        const modal = document.getElementById('code-modal');
+        modal.style.display = 'flex';
+        
+        // Add line numbers and initialize code selection
+        setTimeout(() => {
+            this.addLineNumbers();
+            this.initializeCodeSelection();
+        }, 10);
+    }
+
+    hideCodeModal() {
+        const modal = document.getElementById('code-modal');
+        modal.style.display = 'none';
+        this.hideCodeDialogue();
+    }
+
+    initializeJSONSelection() {
+        const jsonElement = document.getElementById('symbols-json');
+        if (jsonElement) {
+            jsonElement.addEventListener('mouseup', () => {
+                this.handleJSONSelection();
+            });
+        }
+    }
+
+    initializeCodeSelection() {
+        const codeDisplay = document.getElementById('code-display');
+        if (codeDisplay) {
+            codeDisplay.addEventListener('mouseup', () => {
+                this.handleCodeSelection();
+            });
+        }
+    }
+
+    handleJSONSelection() {
+        const selection = window.getSelection();
+        if (selection.rangeCount > 0 && !selection.isCollapsed) {
+            const selectedText = selection.toString().trim();
+            if (selectedText) {
+                this.showSymbolDialogue(selectedText);
+            }
+        }
+    }
+
+    handleCodeSelection() {
+        const selection = window.getSelection();
+        if (selection.rangeCount > 0 && !selection.isCollapsed) {
+            const selectedText = selection.toString().trim();
+            if (selectedText) {
+                this.showCodeDialogue(selectedText);
+            }
+        }
+    }
+
+    showSymbolDialogue(selectedText) {
+        const dialogue = document.getElementById('symbol-dialogue');
+        const preview = document.getElementById('symbol-highlight-preview');
+        
+        preview.innerHTML = `<pre>${this.escapeHtml(selectedText)}</pre>`;
+        dialogue.style.display = 'block';
+        
+        // Focus on textarea
+        document.getElementById('symbol-feedback-text').focus();
+        
+        // Store selected text
+        this.currentSelection = {
+            type: 'symbol',
+            text: selectedText
+        };
+    }
+
+    showCodeDialogue(selectedText) {
+        const dialogue = document.getElementById('code-dialogue');
+        const preview = document.getElementById('code-highlight-preview');
+        
+        preview.innerHTML = `<pre>${this.escapeHtml(selectedText)}</pre>`;
+        dialogue.style.display = 'block';
+        
+        // Focus on textarea
+        document.getElementById('code-feedback-text').focus();
+        
+        // Store selected text
+        this.currentSelection = {
+            type: 'code',
+            text: selectedText
+        };
+    }
+
+    hideSymbolDialogue() {
+        const dialogue = document.getElementById('symbol-dialogue');
+        dialogue.style.display = 'none';
+        document.getElementById('symbol-feedback-text').value = '';
+        window.getSelection().removeAllRanges();
+    }
+
+    hideCodeDialogue() {
+        const dialogue = document.getElementById('code-dialogue');
+        dialogue.style.display = 'none';
+        document.getElementById('code-feedback-text').value = '';
+        window.getSelection().removeAllRanges();
+    }
+
+    saveSymbolFeedback() {
+        const feedbackText = document.getElementById('symbol-feedback-text').value.trim();
+        if (feedbackText && this.currentSelection) {
+            this.addFeedbackItem('symbol', this.currentSelection.text, feedbackText);
+            this.hideSymbolDialogue();
+            this.showNotification('Symbol feedback added');
+        }
+    }
+
+    saveCodeFeedback() {
+        const feedbackText = document.getElementById('code-feedback-text').value.trim();
+        if (feedbackText && this.currentSelection) {
+            this.addFeedbackItem('code', this.currentSelection.text, feedbackText);
+            this.hideCodeDialogue();
+            this.showNotification('Code feedback added');
+        }
+    }
+
+    addGeneralComment() {
+        const comment = document.getElementById('user-comments').value.trim();
+        if (comment) {
+            this.addFeedbackItem('general', '', comment);
+            this.hideCommentsSection();
+            document.getElementById('user-comments').value = '';
+            this.showNotification('General comment added');
+        }
+    }
+
+    addFeedbackItem(type, selectedText, comment) {
+        const feedback = {
+            id: ++this.feedbackCounter,
+            type: type,
+            text: selectedText,
+            comment: comment,
+            timestamp: new Date().toLocaleTimeString()
+        };
+        
+        this.selectedRanges.push(feedback);
+        this.updateFeedbackCart();
+    }
+
+    updateFeedbackCart() {
+        const cartItems = document.getElementById('cart-items');
+        const cartCount = document.getElementById('cart-count');
+        
+        cartCount.textContent = `${this.selectedRanges.length} item${this.selectedRanges.length !== 1 ? 's' : ''}`;
+        
+        if (this.selectedRanges.length === 0) {
+            cartItems.innerHTML = `
+                <div class="empty-cart">
+                    <i data-feather="message-circle"></i>
+                    <p>No feedback added yet</p>
+                    <small>Highlight code or symbols to add feedback</small>
+                </div>
+            `;
+            if (typeof feather !== 'undefined') {
+                feather.replace();
+            }
+            return;
+        }
+        
+        const items = this.selectedRanges.map(item => {
+            const typeIcon = item.type === 'code' ? 'code' : item.type === 'symbol' ? 'hash' : 'message-circle';
+            const typeLabel = item.type === 'code' ? 'Code' : item.type === 'symbol' ? 'Symbol' : 'General';
+            const preview = item.text ? (item.text.length > 50 ? item.text.substring(0, 50) + '...' : item.text) : '';
+            
+            return `
+                <div class="cart-item" data-id="${item.id}">
+                    <div class="cart-item-header">
+                        <div class="cart-item-type">
+                            <i data-feather="${typeIcon}"></i>
+                            <span>${typeLabel}</span>
+                            <small>${item.timestamp}</small>
+                        </div>
+                        <div class="cart-item-actions">
+                            <button class="cart-action edit" onclick="window.interactiveFeedback.editFeedback(${item.id})" title="Edit">
+                                <i data-feather="edit-2"></i>
+                            </button>
+                            <button class="cart-action remove" onclick="window.interactiveFeedback.removeFeedback(${item.id})" title="Remove">
+                                <i data-feather="trash-2"></i>
+                            </button>
+                        </div>
+                    </div>
+                    ${preview ? `<div class="cart-item-preview">${this.escapeHtml(preview)}</div>` : ''}
+                    <div class="cart-item-comment">${this.escapeHtml(item.comment)}</div>
+                </div>
+            `;
+        }).join('');
+        
+        cartItems.innerHTML = items;
+        
+        // Re-initialize feather icons
+        if (typeof feather !== 'undefined') {
+            feather.replace();
+        }
+    }
+
+    editFeedback(id) {
+        const feedback = this.selectedRanges.find(item => item.id === id);
+        if (!feedback) return;
+        
+        const newComment = prompt(`Edit your feedback:\n\n${feedback.text ? 'Selected: ' + feedback.text + '\n\n' : ''}Current feedback:`, feedback.comment);
+        if (newComment !== null && newComment.trim() !== '') {
+            feedback.comment = newComment.trim();
+            this.updateFeedbackCart();
+            this.showNotification('Feedback updated');
+        }
+    }
+
+    removeFeedback(id) {
+        this.selectedRanges = this.selectedRanges.filter(item => item.id !== id);
+        this.updateFeedbackCart();
+        this.showNotification('Feedback removed');
+    }
+
+    showCommentsSection() {
+        const section = document.getElementById('comments-section');
+        section.style.display = 'block';
+        document.getElementById('user-comments').focus();
+    }
+
+    hideCommentsSection() {
+        const section = document.getElementById('comments-section');
+        section.style.display = 'none';
+    }
+
+
+
+    confirmCloseFeedbackPanel() {
+        const hasUnsavedFeedback = this.selectedRanges.length > 0;
+        
+        let message = 'Are you sure you want to close the feedback panel?';
+        if (hasUnsavedFeedback) {
+            message += '\n\nYou have unsaved feedback that will be lost. The interactive session will not be able to continue without your feedback.';
+        } else {
+            message += '\n\nWithout providing feedback, the interactive session cannot continue.';
+        }
+        
+        if (confirm(message)) {
+            this.hideFeedbackPanel();
+        }
+    }
+
+    hideFeedbackPanel() {
+        if (this.feedbackPanel) {
+            this.feedbackPanel.classList.remove('visible');
+            setTimeout(() => {
+                this.removeFeedbackPanel();
+                this.showRestoreButton();
+            }, 300);
+        }
+    }
+
+    showRestoreButton() {
+        // Remove existing restore button if any
+        this.removeRestoreButton();
+        
+        // Create restore button in chat area
+        this.restoreButton = document.createElement('div');
+        this.restoreButton.className = 'feedback-restore-container';
+        this.restoreButton.innerHTML = `
+            <div class="feedback-restore-banner">
+                <div class="restore-actions">
+                    <button class="btn-restore-feedback" id="restore-feedback-btn">
+                        <i data-feather="edit-3"></i>
+                        Continue Reviewing
+                    </button>
+                    <button class="btn-terminate-session" id="terminate-session-btn">
+                        <i data-feather="check-circle"></i>
+                        Finish Here
+                    </button>
+                </div>
+            </div>
+        `;
+        
+        // Add to chat container
+        const chatContainer = document.getElementById('chat-container') || document.getElementById('chatArea');
+        if (chatContainer) {
+            chatContainer.appendChild(this.restoreButton);
+        }
+        
+        // Add event listeners
+        document.getElementById('restore-feedback-btn').addEventListener('click', () => {
+            this.restoreFeedbackPanel();
+        });
+        
+        document.getElementById('terminate-session-btn').addEventListener('click', () => {
+            this.terminateInteractiveSession();
+        });
+        
+        // Initialize feather icons
+        if (typeof feather !== 'undefined') {
+            feather.replace();
+        }
+    }
+
+    removeRestoreButton() {
+        if (this.restoreButton && document.body.contains(this.restoreButton)) {
+            this.restoreButton.remove();
+        }
+        this.restoreButton = null;
+    }
+
+    restoreFeedbackPanel() {
+        if (this.panelState) {
+            // Remove restore button
+            this.removeRestoreButton();
+            
+            // Restore the panel with saved state
+            if (this.isMinimized && this.feedbackPanel) {
+                // Panel exists but is hidden, just show it
+                this.feedbackPanel.style.display = 'block';
+                this.isMinimized = false;
+                this.isVisible = true;
+            } else {
+                // Panel was completely removed, recreate it
+                this.showFeedbackPanel(this.panelState);
+            }
+            
+            this.showNotification('Welcome back! Ready to continue reviewing the AI\'s work.');
+        }
+    }
+
+    terminateInteractiveSession() {
+        if (confirm('Are you sure you want to end the interactive session?\n\nThis will stop the AI from waiting for feedback and provide the current solution as final.')) {
+            // Remove restore button
+            this.removeRestoreButton();
+            
+            // Send termination signal
+            import('../network/socket.js').then(({ socketManager }) => {
+                socketManager.send('terminate_session');
+            });
+            
+            this.showNotification('Session ended. The AI will finalize the current solution.');
+        }
+    }
+
+    truncateCode(code) {
+        const lines = code.split('\n');
+        if (lines.length <= 8) {
+            return code;
+        }
+        return lines.slice(0, 8).join('\n') + '\n... (click to expand)';
+    }
+
+    formatCriticSummary(text) {
+        if (!text || text.trim() === '') {
+            return '<p class="no-issues">No issues found by AI critic.</p>';
+        }
+        
+        // Extract first sentence or first 100 characters
+        const summary = text.length > 100 ? text.substring(0, 100) + '...' : text;
+        return `<p class="critic-summary-text">${this.escapeHtml(summary)}</p>`;
+    }
+
+    addLineNumbers() {
+        const codeDisplay = document.getElementById('code-display');
+        const codeGutter = document.getElementById('code-gutter');
+        
+        if (codeDisplay && codeGutter) {
+            const lines = this.currentCode.split('\n');
+            const gutterHTML = lines.map((_, index) => 
+                `<div class="line-number" data-line="${index + 1}">${index + 1}</div>`
+            ).join('');
+            
+            codeGutter.innerHTML = gutterHTML;
+        }
+    }
+
+    showNotification(message) {
+        const notification = document.createElement('div');
+        notification.className = 'feedback-notification';
+        notification.textContent = message;
+        
+        document.body.appendChild(notification);
+        
+        setTimeout(() => {
+            notification.classList.add('visible');
+        }, 10);
+        
+        setTimeout(() => {
+            notification.classList.remove('visible');
+            setTimeout(() => {
+                if (document.body.contains(notification)) {
+                    document.body.removeChild(notification);
+                }
+            }, 300);
+        }, 2000);
+    }
+
+    submitFeedback() {
+        const acceptCritic = document.getElementById('accept-critic').checked;
+        
+        this.disableButtons();
+        this.showLoadingState('Submitting feedback...');
+        
+        // Convert feedback to the expected format
+        const quotedRanges = this.selectedRanges.map(item => {
+            if (item.type === 'symbol') {
+                return {
+                    text: `Symbol JSON: ${item.text}`,
+                    comment: item.comment
+                };
+            } else if (item.type === 'code') {
+                return {
+                    text: item.text,
+                    comment: item.comment
+                };
+            } else {
+                return {
+                    text: 'General Comment',
+                    comment: item.comment
+                };
+            }
+        });
+        
+        // Import socket manager and send feedback
+        import('../network/socket.js').then(({ socketManager }) => {
+            socketManager.send('provide_feedback', {
+                accept_critic: acceptCritic,
+                extra_comments: '',
+                quoted_ranges: quotedRanges,
+                terminate: false  // Continue the process, don't terminate
+            });
+        });
+        
+        // Clean up the panel completely after submitting feedback
+        this.removeFeedbackPanel();
+        this.removeRestoreButton();
+    }
+
+    disableButtons() {
+        const buttons = this.feedbackPanel.querySelectorAll('button');
+        buttons.forEach(btn => btn.disabled = true);
+    }
+
+    showLoadingState(message) {
+        // Show loading indicator in the sidebar
+        const content = this.feedbackPanel.querySelector('.feedback-sidebar-content');
+        if (content) {
+            content.innerHTML = `
+                <div class="loading-state">
+                    <div class="loading-spinner"></div>
+                    <p>${message}</p>
+                </div>
+            `;
+        }
+    }
+
+    removeFeedbackPanel() {
+        if (this.feedbackPanel && document.body.contains(this.feedbackPanel)) {
+            document.body.removeChild(this.feedbackPanel);
+        }
+        this.feedbackPanel = null;
+        this.isVisible = false;
+    }
+
+    showFinalArtifacts(data) {
+        // Show final artifacts in a compact way
+        const artifactsPanel = document.createElement('div');
+        artifactsPanel.className = 'final-artifacts-compact';
+        artifactsPanel.innerHTML = `
+            <div class="artifacts-header">
+                <h4>Final Solution</h4>
+                <button class="artifacts-close" onclick="this.parentElement.parentElement.remove()">
+                    <i data-feather="x"></i>
+                </button>
+            </div>
+            <div class="artifacts-content">
+                <div class="artifacts-summary">
+                    <p>Solution completed successfully!</p>
+                    <button class="view-details-btn" onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'">
+                        View Details
+                    </button>
+                    <div class="artifacts-details" style="display: none;">
+                        <div class="artifact-section">
+                            <h5>Final Code</h5>
+                            <pre class="artifact-code">${this.escapeHtml(data.code || 'No code available')}</pre>
+                        </div>
+                        <div class="artifact-section">
+                            <h5>Extracted Symbols</h5>
+                            <pre class="artifact-json">${JSON.stringify(data.symbols || {}, null, 2)}</pre>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
+        
+        // Add to chat area
+        const chatContainer = document.getElementById('chat-container');
+        if (chatContainer) {
+            chatContainer.appendChild(artifactsPanel);
+        }
+        
+        // Initialize feather icons
+        if (typeof feather !== 'undefined') {
+            feather.replace();
+        }
+    }
+
+    handleModeSwitched(data) {
+        // Handle mode switching if needed
+        this.updateModeIndicator(data.mode);
+    }
+
+    updateModeIndicator(mode) {
+        // Update any mode indicators in the UI
+        const indicators = document.querySelectorAll('.mode-badge');
+        indicators.forEach(indicator => {
+            indicator.textContent = mode;
+            indicator.className = `mode-badge mode-${mode.toLowerCase()}`;
+        });
+    }
+
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+}
+
+// Create global instance
+window.interactiveFeedback = new InteractiveFeedback(); 

src/pips/static/js/ui/message-manager.js

@@ -0,0 +1,727 @@
+/**
+ * Message Manager - Handles chat messages, streaming, and code execution display
+ */
+import { Logger } from '../core/logger.js';
+import { domManager } from './dom-manager.js';
+
+export class MessageManager {
+    constructor() {
+        this.streamingMessages = new Map();
+        this.executionSpinners = new Map();
+    }
+
+    addMessage(sender, content, iteration = null, promptDetails = null) {
+        const messageDiv = document.createElement('div');
+        messageDiv.className = 'chat-message';
+        
+        if (promptDetails) {
+            messageDiv.classList.add('expandable-message');
+        }
+        
+        const avatarClass = sender === 'PIPS' || sender === 'PIPS System' ? 'avatar-pips' : 
+                          sender === 'AI Code Reviewer' ? 'avatar-reviewer' :
+                          sender.includes('AI') ? 'avatar-llm' : 'avatar-system';
+        const avatarLetter = sender === 'PIPS' || sender === 'PIPS System' ? 'P' : 
+                           sender === 'AI Code Reviewer' ? 'QA' :
+                           sender.includes('AI') ? 'AI' : 'S';
+        
+        const iterationBadge = iteration ? 
+            `<span class="iteration-badge">Iteration ${iteration}</span>` : '';
+        
+        // Create expand toggle if prompt details are available
+        const expandToggle = promptDetails ? `
+            <button class="expand-toggle" onclick="window.pipsApp.toggleExpandMessage(this)">
+                <i data-feather="chevron-down" style="width: 12px; height: 12px;"></i>
+                Show Prompt
+            </button>
+        ` : '';
+        
+        // Create expandable content if prompt details are available
+        const expandableContent = promptDetails ? `
+            <div class="expandable-content">
+                <div class="expandable-content-inner">
+                    ${promptDetails.description ? `<div class="prompt-description">${this.escapeHtml(promptDetails.description)}</div>` : ''}
+                    <div class="prompt-conversation">
+                        ${promptDetails.conversation.map(msg => {
+                            // Format content based on its structure
+                            let formattedContent = '';
+                            if (typeof msg.content === 'string') {
+                                // Check if content looks like structured data or contains code blocks
+                                if (msg.content.includes('```') || msg.content.includes('{') || msg.content.includes('[')) {
+                                    // Use markdown parsing for structured content
+                                    formattedContent = marked ? marked.parse(msg.content) : msg.content.replace(/\n/g, '<br>');
+                                } else {
+                                    // Escape HTML but preserve line breaks for simple text
+                                    formattedContent = this.escapeHtml(msg.content).replace(/\n/g, '<br>');
+                                }
+                            } else if (Array.isArray(msg.content)) {
+                                // Handle multimodal content (like image + text)
+                                formattedContent = msg.content.map(item => {
+                                    if (item.type === 'text') {
+                                        return this.escapeHtml(item.text).replace(/\n/g, '<br>');
+                                    } else if (item.type === 'image_url') {
+                                        return '<div class="prompt-image">[Image content]</div>';
+                                    }
+                                    return this.escapeHtml(JSON.stringify(item));
+                                }).join('');
+                            } else {
+                                // Fallback for other content types
+                                formattedContent = this.escapeHtml(JSON.stringify(msg.content, null, 2)).replace(/\n/g, '<br>');
+                            }
+                            
+                            return `
+                                <div class="prompt-message ${msg.role}">
+                                    <div class="prompt-role">${msg.role}</div>
+                                    <div class="prompt-content">${formattedContent}</div>
+                                </div>
+                            `;
+                        }).join('')}
+                    </div>
+                </div>
+            </div>
+        ` : '';
+        
+        messageDiv.innerHTML = `
+            <div class="message-header">
+                <div class="message-avatar ${avatarClass}">${avatarLetter}</div>
+                <span class="message-sender">${this.escapeHtml(sender)}</span>
+                ${iterationBadge}
+            </div>
+            <div class="message-content">
+                ${marked ? marked.parse(content) : content}
+                ${expandToggle}
+                ${expandableContent}
+            </div>
+        `;
+        
+        domManager.getElement('chatArea').appendChild(messageDiv);
+        
+        // Re-highlight code blocks
+        if (typeof Prism !== 'undefined') {
+            Prism.highlightAll();
+        }
+        
+        // Replace feather icons for the new expand toggle
+        if (promptDetails) {
+            feather.replace(messageDiv);
+        }
+        
+        this.smartScrollToBottom();
+        
+        // Save message incrementally during solving
+        this.saveMessageIncremental(sender, content, iteration, promptDetails);
+    }
+
+    displayFinalAnswer(answer) {
+        Logger.debug('MessageManager', 'displayFinalAnswer called with:', answer);
+        
+        if (!answer || answer.trim() === '') {
+            Logger.warn('MessageManager', 'Empty or null final answer provided');
+            return;
+        }
+        
+        // Remove any existing final answer elements to avoid duplicates
+        const existingAnswers = domManager.getElement('chatArea').querySelectorAll('.final-answer');
+        existingAnswers.forEach(el => el.remove());
+        
+        const answerDiv = document.createElement('div');
+        answerDiv.className = 'final-answer';
+        
+        if (typeof answer === 'string') {
+            if (answer.includes('<') && answer.includes('>')) {
+                answerDiv.innerHTML = answer;
+            } else {
+                answerDiv.textContent = answer;
+            }
+        } else {
+            answerDiv.textContent = String(answer);
+        }
+        
+        domManager.getElement('chatArea').appendChild(answerDiv);
+        
+        setTimeout(() => {
+            this.smartScrollToBottom();
+        }, 100);
+    }
+
+    smartScrollToBottom() {
+        const chatArea = domManager.getElement('chatArea');
+        const threshold = 100;
+        const shouldAutoScroll = (chatArea.scrollTop + chatArea.clientHeight >= 
+                                chatArea.scrollHeight - threshold);
+        
+        if (shouldAutoScroll) {
+            chatArea.scrollTop = chatArea.scrollHeight;
+        }
+    }
+
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+
+    // STREAMING MESSAGE METHODS
+    showAIThinkingIndicator(iteration, senderName = 'AI Assistant') {
+        // Remove any existing thinking indicator for this iteration and sender
+        this.removeAIThinkingIndicator(iteration, senderName);
+        
+        const messageDiv = document.createElement('div');
+        messageDiv.className = 'chat-message ai-thinking';
+        messageDiv.setAttribute('data-iteration', iteration);
+        messageDiv.setAttribute('data-sender', senderName);
+        
+        // Determine avatar based on sender
+        let avatarClass, avatarLetter, thinkingText;
+        if (senderName === 'AI Code Reviewer') {
+            avatarClass = 'avatar-reviewer';
+            avatarLetter = 'QA';
+            thinkingText = 'Code reviewer is analyzing...';
+        } else {
+            avatarClass = 'avatar-llm';
+            avatarLetter = 'AI';
+            thinkingText = 'AI is thinking...';
+        }
+        
+        messageDiv.innerHTML = `
+            <div class="message-header">
+                <div class="message-avatar ${avatarClass}">${avatarLetter}</div>
+                <span class="message-sender">${senderName}</span>
+                ${iteration ? `<span class="iteration-badge">Iteration ${iteration}</span>` : ''}
+            </div>
+            <div class="message-content">
+                <div class="streaming-indicator">
+                    <div class="spinner"></div>
+                    <span>${thinkingText}</span>
+                </div>
+            </div>
+        `;
+        
+        domManager.getElement('chatArea').appendChild(messageDiv);
+        this.smartScrollToBottom();
+    }
+
+    removeAIThinkingIndicator(iteration, senderName = null) {
+        const thinkingElements = domManager.getElement('chatArea').querySelectorAll('.ai-thinking');
+        thinkingElements.forEach(el => {
+            const matchesIteration = !iteration || el.getAttribute('data-iteration') == iteration;
+            const matchesSender = !senderName || el.getAttribute('data-sender') === senderName;
+            
+            if (matchesIteration && matchesSender) {
+                el.remove();
+            }
+        });
+    }
+
+    updateStreamingMessage(token, iteration, sender) {
+        // Create a unique identifier for this streaming message based on iteration and sender
+        const streamingId = `${iteration}-${sender}`;
+        
+        // Find or create streaming message
+        let streamingMessage = domManager.getElement('chatArea').querySelector(`[data-streaming-id="${streamingId}"]`);
+        
+        if (!streamingMessage) {
+            // Remove thinking indicator if present for this specific sender
+            this.removeAIThinkingIndicator(iteration, sender);
+            
+            // Create new streaming message
+            streamingMessage = document.createElement('div');
+            streamingMessage.className = 'chat-message streaming-message';
+            streamingMessage.setAttribute('data-streaming-iteration', iteration);
+            streamingMessage.setAttribute('data-streaming-id', streamingId);
+            streamingMessage.setAttribute('data-sender', sender);
+            
+            // Determine avatar based on sender
+            let avatarClass, avatarLetter;
+            if (sender === 'AI Code Reviewer') {
+                avatarClass = 'avatar-reviewer';
+                avatarLetter = 'QA';
+            } else {
+                avatarClass = 'avatar-llm';
+                avatarLetter = 'AI';
+            }
+            
+            streamingMessage.innerHTML = `
+                <div class="message-header">
+                    <div class="message-avatar ${avatarClass}">${avatarLetter}</div>
+                    <span class="message-sender">${sender}</span>
+                    ${iteration ? `<span class="iteration-badge">Iteration ${iteration}</span>` : ''}
+                </div>
+                <div class="message-content">
+                    <div class="streaming-text" data-content=""></div>
+                </div>
+            `;
+            
+            domManager.getElement('chatArea').appendChild(streamingMessage);
+        }
+        
+        // Update streaming content
+        const streamingText = streamingMessage.querySelector('.streaming-text');
+        const currentContent = streamingText.getAttribute('data-content') || '';
+        const newContent = currentContent + token;
+        streamingText.setAttribute('data-content', newContent);
+        
+        // Remove any existing typing indicators first
+        const existingIndicators = streamingText.querySelectorAll('.typing-indicator');
+        existingIndicators.forEach(indicator => indicator.remove());
+        
+        // Parse markdown if available
+        if (typeof marked !== 'undefined') {
+            streamingText.innerHTML = marked.parse(newContent);
+        } else {
+            streamingText.textContent = newContent;
+        }
+        
+        // Add typing indicator at the very end of the content
+        const typingIndicator = document.createElement('span');
+        typingIndicator.className = 'typing-indicator';
+        
+        // Find the last element in the streaming text and append the cursor inline
+        const lastElement = streamingText.lastElementChild;
+        if (lastElement && (lastElement.tagName === 'P' || lastElement.tagName === 'DIV' || lastElement.tagName === 'SPAN')) {
+            // Append to the last paragraph/div/span element to keep it inline
+            lastElement.appendChild(typingIndicator);
+        } else {
+            // If no suitable element found, append directly to streaming text
+            streamingText.appendChild(typingIndicator);
+        }
+        
+        this.smartScrollToBottom();
+    }
+
+    finalizeStreamingMessage(iteration, sender = null) {
+        // If sender is specified, find the specific streaming message for that sender
+        // Otherwise, finalize all streaming messages for the iteration (backward compatibility)
+        let query;
+        if (sender) {
+            const streamingId = `${iteration}-${sender}`;
+            query = `[data-streaming-id="${streamingId}"]`;
+        } else {
+            query = `[data-streaming-iteration="${iteration}"]`;
+        }
+        
+        const streamingMessages = domManager.getElement('chatArea').querySelectorAll(query);
+        streamingMessages.forEach(streamingMessage => {
+            // Remove typing indicator
+            const typingIndicator = streamingMessage.querySelector('.typing-indicator');
+            if (typingIndicator) {
+                typingIndicator.remove();
+            }
+            
+            // Remove streaming attributes
+            streamingMessage.classList.remove('streaming-message');
+            streamingMessage.removeAttribute('data-streaming-iteration');
+            streamingMessage.removeAttribute('data-streaming-id');
+            
+            // Re-highlight code blocks
+            if (typeof Prism !== 'undefined') {
+                Prism.highlightAll();
+            }
+        });
+    }
+
+    // CODE EXECUTION METHODS
+    showExecutionSpinner(iteration) {
+        // Remove any existing execution spinner for this iteration
+        this.removeExecutionSpinner(iteration);
+        
+        const spinnerDiv = document.createElement('div');
+        spinnerDiv.className = 'execution-spinner';
+        spinnerDiv.setAttribute('data-execution-iteration', iteration);
+        spinnerDiv.innerHTML = `
+            <div class="spinner"></div>
+            <span>Executing code...</span>
+        `;
+        
+        domManager.getElement('chatArea').appendChild(spinnerDiv);
+        this.smartScrollToBottom();
+    }
+
+    removeExecutionSpinner(iteration) {
+        const spinners = domManager.getElement('chatArea').querySelectorAll('.execution-spinner');
+        spinners.forEach(spinner => {
+            if (!iteration || spinner.getAttribute('data-execution-iteration') == iteration) {
+                spinner.remove();
+            }
+        });
+    }
+
+    displayExecutionResult(result, iteration, isError = false) {
+        const resultDiv = document.createElement('div');
+        resultDiv.className = `execution-result ${isError ? 'error' : ''}`;
+        resultDiv.textContent = result;
+        
+        domManager.getElement('chatArea').appendChild(resultDiv);
+        this.smartScrollToBottom();
+    }
+
+    displayCode(code, iteration) {
+        const codeDiv = document.createElement('div');
+        codeDiv.className = 'code-block';
+        codeDiv.innerHTML = `<pre><code class="language-python">${this.escapeHtml(code)}</code></pre>`;
+        
+        domManager.getElement('chatArea').appendChild(codeDiv);
+        
+        if (typeof Prism !== 'undefined') {
+            Prism.highlightAll();
+        }
+        
+        this.smartScrollToBottom();
+    }
+
+    toggleExpandMessage(button) {
+        const expandToggle = button;
+        const messageContent = button.closest('.message-content');
+        const expandableContent = messageContent.querySelector('.expandable-content');
+        
+        if (!expandableContent) return;
+        
+        const isExpanded = expandableContent.classList.contains('expanded');
+        
+        if (isExpanded) {
+            expandableContent.classList.remove('expanded');
+            expandToggle.classList.remove('expanded');
+            expandToggle.innerHTML = `
+                <i data-feather="chevron-down" style="width: 12px; height: 12px;"></i>
+                Show Prompt
+            `;
+        } else {
+            expandableContent.classList.add('expanded');
+            expandToggle.classList.add('expanded');
+            expandToggle.innerHTML = `
+                <i data-feather="chevron-up" style="width: 12px; height: 12px;"></i>
+                Hide Prompt
+            `;
+        }
+        
+        // Replace feather icons
+        feather.replace(expandToggle);
+        
+        // Scroll to keep the message in view if needed
+        setTimeout(() => {
+            if (!isExpanded) {
+                this.smartScrollToBottom();
+            }
+        }, 300);
+    }
+
+    downloadChat() {
+        const chatContent = domManager.getElement('chatArea').innerHTML;
+        const blob = new Blob([`
+            <!DOCTYPE html>
+            <html>
+            <head>
+                <title>PIPS Chat Export</title>
+                <style>
+                    body { font-family: Arial, sans-serif; margin: 20px; }
+                    .chat-message { margin-bottom: 20px; }
+                    .message-header { font-weight: bold; margin-bottom: 5px; }
+                    .message-content { margin-left: 20px; }
+                </style>
+            </head>
+            <body>
+                <h1>PIPS Chat Export</h1>
+                <div class="chat-area">${chatContent}</div>
+            </body>
+            </html>
+        `], { type: 'text/html' });
+        
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `pips_chat_${new Date().toISOString().split('T')[0]}.html`;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    }
+
+    // SESSION MANAGEMENT METHODS
+    getCurrentChatHistory() {
+        const chatArea = domManager.getElement('chatArea');
+        if (!chatArea) {
+            Logger.warn('MessageManager', 'Chat area not found');
+            return [];
+        }
+        
+        const messages = chatArea.querySelectorAll('.chat-message');
+        const history = [];
+        
+        messages.forEach(message => {
+            const senderElement = message.querySelector('.message-sender');
+            const contentElement = message.querySelector('.message-content');
+            const iterationElement = message.querySelector('.iteration-badge');
+            
+            if (!senderElement || !contentElement) {
+                Logger.debug('MessageManager', 'Skipping malformed message');
+                return; // Skip malformed messages
+            }
+            
+            const sender = senderElement.textContent || 'Unknown';
+            let content = '';
+            
+            // Get content - extract only the main content, excluding expandable elements
+            let contentToSave = '';
+            const contentChildren = Array.from(contentElement.children);
+            
+            // Look for the main content, excluding expand toggles and expandable content
+            contentChildren.forEach(child => {
+                if (!child.classList.contains('expand-toggle') && 
+                    !child.classList.contains('expandable-content')) {
+                    contentToSave += child.outerHTML;
+                }
+            });
+            
+            // If no child elements found, get direct text content
+            if (!contentToSave) {
+                // Get text nodes directly, excluding expand button text
+                const clonedContent = contentElement.cloneNode(true);
+                const expandToggle = clonedContent.querySelector('.expand-toggle');
+                const expandableContent = clonedContent.querySelector('.expandable-content');
+                if (expandToggle) expandToggle.remove();
+                if (expandableContent) expandableContent.remove();
+                contentToSave = clonedContent.innerHTML.trim() || clonedContent.textContent.trim();
+            }
+            
+            content = contentToSave;
+            
+            const iteration = iterationElement ? iterationElement.textContent : null;
+            
+            // Skip the welcome message
+            if (sender === 'PIPS System' && content.includes('Welcome to PIPS')) {
+                return;
+            }
+            
+            // Skip empty messages but be more specific about what to filter
+            if (!content || content === '') {
+                Logger.debug('MessageManager', 'Skipping empty message');
+                return;
+            }
+            
+            // Skip only currently active streaming indicators (not completed messages that might have streaming classes)
+            if (message.classList.contains('ai-thinking') || 
+                message.classList.contains('streaming-message') ||
+                content.includes('AI is thinking...') ||
+                content.includes('Executing code...')) {
+                Logger.debug('MessageManager', 'Skipping active streaming indicator');
+                return;
+            }
+            
+            // Check if this message has prompt details
+            const expandableContent = message.querySelector('.expandable-content');
+            let promptDetails = null;
+            
+            if (expandableContent) {
+                // Extract prompt details from the DOM
+                const promptDescription = expandableContent.querySelector('.prompt-description');
+                const promptMessages = expandableContent.querySelectorAll('.prompt-message');
+                
+                if (promptMessages.length > 0) {
+                    promptDetails = {
+                        description: promptDescription ? promptDescription.textContent : '',
+                        conversation: Array.from(promptMessages).map(promptMsg => ({
+                            role: promptMsg.querySelector('.prompt-role').textContent.toLowerCase(),
+                            content: promptMsg.querySelector('.prompt-content').textContent
+                        }))
+                    };
+                }
+            }
+            
+            history.push({
+                sender,
+                content,
+                iteration,
+                promptDetails,
+                timestamp: new Date().toISOString()
+            });
+        });
+        
+        Logger.debug('MessageManager', `Extracted ${history.length} messages from chat`);
+        return history;
+    }
+
+    loadChatHistory(history) {
+        const chatArea = domManager.getElement('chatArea');
+        
+        // Find and preserve the welcome message first
+        let welcomeMessage = null;
+        const existingMessages = chatArea.querySelectorAll('.chat-message');
+        existingMessages.forEach(msg => {
+            const sender = msg.querySelector('.message-sender');
+            const content = msg.querySelector('.message-content');
+            if (sender && content && 
+                sender.textContent === 'PIPS System' && 
+                content.textContent.includes('Welcome to PIPS')) {
+                welcomeMessage = msg.cloneNode(true);
+            }
+        });
+        
+        // Clear existing messages
+        chatArea.innerHTML = '';
+        
+        // Restore welcome message if it existed
+        if (welcomeMessage) {
+            chatArea.appendChild(welcomeMessage);
+        }
+        
+        // Load messages from history
+        if (history && history.length > 0) {
+            Logger.debug('MessageManager', `Loading ${history.length} messages from history`);
+            
+            history.forEach((msg, index) => {
+                if (!msg || !msg.sender || !msg.content) {
+                    Logger.warn('MessageManager', `Skipping invalid message at index ${index}:`, msg);
+                    return;
+                }
+                
+                const messageDiv = document.createElement('div');
+                messageDiv.className = 'chat-message';
+                
+                const avatarClass = msg.sender === 'PIPS' || msg.sender === 'PIPS System' ? 'avatar-pips' : 
+                                  msg.sender === 'AI Code Reviewer' ? 'avatar-reviewer' :
+                                  msg.sender.includes('AI') ? 'avatar-llm' : 'avatar-system';
+                const avatarLetter = msg.sender === 'PIPS' || msg.sender === 'PIPS System' ? 'P' : 
+                                   msg.sender === 'AI Code Reviewer' ? 'QA' :
+                                   msg.sender.includes('AI') ? 'AI' : 'S';
+                
+                const iterationBadge = msg.iteration ? 
+                    `<span class="iteration-badge">${this.escapeHtml(msg.iteration)}</span>` : '';
+                
+                // Handle expandable content for loaded messages
+                const expandToggle = msg.promptDetails ? `
+                    <button class="expand-toggle" onclick="window.pipsApp.toggleExpandMessage(this)">
+                        <i data-feather="chevron-down" style="width: 12px; height: 12px;"></i>
+                        Show Prompt
+                    </button>
+                ` : '';
+                
+                const expandableContent = msg.promptDetails ? `
+                    <div class="expandable-content">
+                        <div class="expandable-content-inner">
+                            ${msg.promptDetails.description ? `<div class="prompt-description">${this.escapeHtml(msg.promptDetails.description)}</div>` : ''}
+                            <div class="prompt-conversation">
+                                ${msg.promptDetails.conversation.map(promptMsg => `
+                                    <div class="prompt-message ${promptMsg.role}">
+                                        <div class="prompt-role">${promptMsg.role}</div>
+                                        <div class="prompt-content">${this.escapeHtml(promptMsg.content)}</div>
+                                    </div>
+                                `).join('')}
+                            </div>
+                        </div>
+                    </div>
+                ` : '';
+                
+                if (msg.promptDetails) {
+                    messageDiv.classList.add('expandable-message');
+                }
+                
+                messageDiv.innerHTML = `
+                    <div class="message-header">
+                        <div class="message-avatar ${avatarClass}">${avatarLetter}</div>
+                        <span class="message-sender">${this.escapeHtml(msg.sender)}</span>
+                        ${iterationBadge}
+                    </div>
+                    <div class="message-content">
+                        ${msg.content}
+                        ${expandToggle}
+                        ${expandableContent}
+                    </div>
+                `;
+                
+                chatArea.appendChild(messageDiv);
+            });
+            
+            // Replace feather icons for any expandable messages
+            if (typeof feather !== 'undefined') {
+                feather.replace(chatArea);
+            }
+        } else {
+            Logger.debug('MessageManager', 'No chat history to load');
+        }
+        
+        // Re-highlight code blocks
+        if (typeof Prism !== 'undefined') {
+            Prism.highlightAll();
+        }
+        
+        this.smartScrollToBottom();
+    }
+
+    clearChatAndRestoreWelcome() {
+        const chatArea = domManager.getElement('chatArea');
+        chatArea.innerHTML = '';
+        
+        // Add fresh welcome message
+        const welcomeDiv = document.createElement('div');
+        welcomeDiv.className = 'chat-message';
+        welcomeDiv.innerHTML = `
+            <div class="message-header">
+                <div class="message-avatar avatar-pips">P</div>
+                <span class="message-sender">PIPS System</span>
+            </div>
+            <div class="message-content">
+                Welcome to PIPS! Enter a problem in the left panel and click "Solve Problem" to get started. 
+                Don't forget to configure your model settings first.
+            </div>
+        `;
+        chatArea.appendChild(welcomeDiv);
+    }
+
+    // CLEANUP METHODS - for handling session interruptions and failures
+    cleanupAllActiveIndicators() {
+        Logger.debug('MessageManager', 'Cleaning up all active indicators');
+        
+        // Remove all AI thinking indicators
+        const thinkingElements = domManager.getElement('chatArea').querySelectorAll('.ai-thinking');
+        thinkingElements.forEach(el => el.remove());
+        
+        // Remove all execution spinners
+        const executionSpinners = domManager.getElement('chatArea').querySelectorAll('.execution-spinner');
+        executionSpinners.forEach(el => el.remove());
+        
+        // Finalize all streaming messages
+        const streamingMessages = domManager.getElement('chatArea').querySelectorAll('.streaming-message');
+        streamingMessages.forEach(streamingMessage => {
+            // Remove typing indicator
+            const typingIndicator = streamingMessage.querySelector('.typing-indicator');
+            if (typingIndicator) {
+                typingIndicator.remove();
+            }
+            
+            // Remove streaming attributes
+            streamingMessage.classList.remove('streaming-message');
+            streamingMessage.removeAttribute('data-streaming-iteration');
+            streamingMessage.removeAttribute('data-streaming-id');
+        });
+        
+        // Re-highlight code blocks after cleanup
+        if (typeof Prism !== 'undefined') {
+            Prism.highlightAll();
+        }
+        
+        Logger.debug('MessageManager', 'All active indicators cleaned up');
+    }
+
+    // For incremental saving during solving - save messages as they come in
+    saveMessageIncremental(sender, content, iteration = null, promptDetails = null) {
+        // This is called after each message is added to save it incrementally
+        // Import sessionManager to avoid circular dependency
+        import('./session-manager.js').then(({ sessionManager }) => {
+            if (window.appState && window.appState.currentSessionData) {
+                // Update chat history with current messages
+                window.appState.currentSessionData.chatHistory = this.getCurrentChatHistory();
+                window.appState.currentSessionData.lastUsed = new Date().toISOString();
+                
+                // Save to storage incrementally
+                sessionManager.saveCurrentSessionToStorage();
+                
+                Logger.debug('MessageManager', `Incrementally saved message from ${sender} to session`);
+            }
+        }).catch(err => {
+            Logger.warn('MessageManager', 'Could not save message incrementally:', err);
+        });
+    }
+}
+
+// Create singleton instance
+export const messageManager = new MessageManager(); 

src/pips/static/js/ui/session-manager.js

@@ -0,0 +1,1451 @@
+/**
+ * Session Manager - Handles session UI and management functionality
+ */
+import { Logger } from '../core/logger.js';
+import { appState } from '../core/state.js';
+import { storageManager } from '../core/storage.js';
+import { domManager } from './dom-manager.js';
+import { messageManager } from './message-manager.js';
+import { imageHandler } from './image-handler.js';
+
+export class SessionManager {
+    constructor() {
+        this.isInitialized = false;
+        this.periodicSaveInterval = null;
+    }
+
+    initialize() {
+        if (this.isInitialized) return;
+        
+        // Clean up ghost sessions on startup
+        this.cleanupGhostSessions();
+        
+        this.setupEventListeners();
+        this.refreshSessionsList();
+        this.isInitialized = true;
+        
+        Logger.debug('Session', 'Session manager initialized');
+    }
+
+    setupEventListeners() {
+        // Session management listeners
+        domManager.getElement('newSessionBtn')?.addEventListener('click', () => this.startNewSession());
+        domManager.getElement('sessionsToggle')?.addEventListener('click', () => this.toggleSessions());
+        domManager.getElement('clearSessionsBtn')?.addEventListener('click', () => this.clearAllSessionsEnhanced());
+        domManager.getElement('exportSessionsBtn')?.addEventListener('click', () => this.exportSessions());
+        domManager.getElement('importSessionsBtn')?.addEventListener('click', () => this.triggerImportSessions());
+        
+        // Import file input handler
+        domManager.getElement('importSessionsInput')?.addEventListener('change', (e) => this.handleImportFile(e));
+
+        // Session header click
+        document.querySelector('.sessions-header')?.addEventListener('click', () => {
+            document.getElementById('sessionsToggle')?.click();
+        });
+
+        Logger.debug('Session', 'Event listeners set up');
+    }
+
+    startNewSession() {
+        Logger.debug('Session', 'Start New Session button clicked');
+        this.resetToNewSessionState();
+        domManager.updateStatus('Ready to start a new session', 'success');
+    }
+
+    resetToNewSessionState() {
+        console.log('[DEBUG] Resetting to new session state');
+        
+        // Save current session before resetting if we have one
+        if (appState.currentSessionData) {
+            console.log('[DEBUG] Saving current session before reset');
+            appState.currentSessionData.chatHistory = messageManager.getCurrentChatHistory();
+            // Update the current state
+            appState.currentSessionData.problemText = domManager.getElement('questionInput')?.value.trim() || '';
+            const imageElement = domManager.getElement('imagePreview');
+            appState.currentSessionData.image = imageElement?.style.display !== 'none' ? imageElement.src : null;
+            appState.currentSessionData.title = this.generateSessionTitle(appState.currentSessionData.problemText);
+            this.saveCurrentSessionToStorage();
+        }
+        
+        // Reset session management state
+        appState.selectedSessionId = null;
+        appState.currentSessionData = null;
+        
+        // Clear visual selection
+        document.querySelectorAll('.session-item').forEach(item => {
+            item.classList.remove('selected');
+        });
+        
+        // Clear inputs and make them editable
+        this.clearAndEnableInputs();
+        
+        // Clear chat and restore welcome message properly
+        messageManager.clearChatAndRestoreWelcome();
+        
+        // Clear any existing feedback panels from previous sessions
+        if (window.interactiveFeedback) {
+            window.interactiveFeedback.removeFeedbackPanel();
+            window.interactiveFeedback.removeRestoreButton();
+        }
+        
+        // Clear any final solution artifacts panels
+        document.querySelectorAll('.final-artifacts-compact').forEach(panel => {
+            panel.remove();
+        });
+        
+        // Clear per-session custom rules
+        import('./settings-manager.js').then(({ settingsManager }) => {
+            settingsManager.clearPerSessionRules();
+        });
+        
+        this.updateCurrentSessionDisplay();
+        console.log('[DEBUG] Reset to new session state completed');
+    }
+
+    clearAndEnableInputs() {
+        // Clear inputs
+        domManager.clearInputs();
+        
+        // Enable and reset input field to editable state
+        const questionInputElement = domManager.getElement('questionInput');
+        const solveBtnElement = domManager.getElement('solveBtn');
+        
+        if (questionInputElement) {
+            questionInputElement.disabled = false;
+            questionInputElement.style.backgroundColor = '';
+            questionInputElement.style.cursor = '';
+            questionInputElement.title = '';
+            questionInputElement.placeholder = "Enter your problem here... (e.g., 'What is the square root of 144?', 'Solve this math puzzle', etc.)";
+        }
+        
+        if (solveBtnElement && !appState.isSolving) {
+            solveBtnElement.style.display = 'inline-flex';
+            solveBtnElement.disabled = false;
+            solveBtnElement.title = '';
+        }
+        
+        // Remove any read-only messages
+        this.removeReadOnlyMessage();
+        
+        // Replace feather icons
+        if (typeof feather !== 'undefined') {
+            feather.replace();
+        }
+    }
+
+    setInputsReadOnly(reason = 'This session has been used and is now read-only') {
+        const questionInputElement = domManager.getElement('questionInput');
+        const solveBtnElement = domManager.getElement('solveBtn');
+        
+        if (questionInputElement) {
+            questionInputElement.disabled = true;
+            questionInputElement.style.backgroundColor = 'var(--gray-100)';
+            questionInputElement.style.cursor = 'not-allowed';
+            questionInputElement.title = reason;
+            questionInputElement.placeholder = 'This session is read-only. Start a new session to solve another problem.';
+        }
+        
+        if (solveBtnElement) {
+            solveBtnElement.style.display = 'none';
+            solveBtnElement.disabled = true;
+        }
+        
+        // Add read-only message
+        this.showReadOnlyMessage();
+    }
+
+    showReadOnlyMessage() {
+        // Remove any existing message first
+        this.removeReadOnlyMessage();
+        
+        const messageEl = document.createElement('div');
+        messageEl.className = 'session-readonly-message';
+        messageEl.style.cssText = `
+            background: var(--warning-50);
+            border: 1px solid var(--warning-200);
+            border-radius: 8px;
+            padding: 12px;
+            margin-top: 8px;
+            font-size: 13px;
+            color: var(--warning-700);
+            text-align: center;
+        `;
+        messageEl.innerHTML = `
+            <i data-feather="info" style="width: 14px; height: 14px; margin-right: 6px;"></i>
+            This session is read-only. Click "Start New Session" to solve a new problem.
+        `;
+        
+        // Add message after button group
+        const buttonGroup = document.querySelector('.button-group');
+        if (buttonGroup) {
+            buttonGroup.insertAdjacentElement('afterend', messageEl);
+            
+            if (typeof feather !== 'undefined') {
+                feather.replace(messageEl);
+            }
+        }
+    }
+
+    removeReadOnlyMessage() {
+        const message = document.querySelector('.session-readonly-message');
+        if (message) {
+            message.remove();
+        }
+    }
+
+    isSessionUsed(session) {
+        // A session is considered "used" (read-only) only if it has been
+        // finished or explicitly interrupted.  This mirrors the logic that
+        // lives in the inline implementation inside index.html.  Active or
+        // in-progress ("solving") sessions remain editable even if they have
+        // chat history.
+        const readOnlyStatuses = ['completed', 'interrupted'];
+        return readOnlyStatuses.includes(session?.status);
+    }
+
+    toggleSessions() {
+        appState.sessionsExpanded = !appState.sessionsExpanded;
+        
+        const sessionsContainer = domManager.getElement('sessionsContainer');
+        const sessionsToggle = domManager.getElement('sessionsToggle');
+        
+        if (appState.sessionsExpanded) {
+            sessionsContainer?.classList.add('expanded');
+            sessionsToggle?.classList.add('expanded');
+        } else {
+            sessionsContainer?.classList.remove('expanded');
+            sessionsToggle?.classList.remove('expanded');
+        }
+        
+        Logger.debug('Session', `Sessions panel ${appState.sessionsExpanded ? 'expanded' : 'collapsed'}`);
+    }
+
+    clearAllSessions() {
+        if (confirm('Are you sure you want to clear all session history? This cannot be undone.')) {
+            try {
+                storageManager.clearAllSessions();
+                this.refreshSessionsList();
+                domManager.updateStatus('All sessions cleared', 'success');
+                Logger.debug('Session', 'All sessions cleared by user');
+            } catch (error) {
+                Logger.error('Session', 'Error clearing sessions:', error);
+                domManager.updateStatus('Error clearing sessions', 'error');
+            }
+        }
+    }
+
+    exportSessions() {
+        try {
+            const result = storageManager.exportSessions();
+            if (result) {
+                const sessions = storageManager.loadSessions();
+                const defaultSessionIds = storageManager.getDefaultSessionIds();
+                const userSessionCount = Object.keys(sessions).length - defaultSessionIds.length;
+                
+                if (userSessionCount > 0) {
+                    domManager.updateStatus(`Exported ${userSessionCount} user session(s) successfully`, 'success');
+                } else {
+                    domManager.updateStatus('No user sessions to export (default sessions are excluded)', 'info');
+                }
+                Logger.debug('Session', `Sessions exported by user: ${userSessionCount} user sessions`);
+            } else {
+                domManager.updateStatus('Error exporting sessions', 'error');
+            }
+        } catch (error) {
+            Logger.error('Session', 'Error exporting sessions:', error);
+            domManager.updateStatus('Error exporting sessions', 'error');
+        }
+    }
+
+    triggerImportSessions() {
+        const fileInput = domManager.getElement('importSessionsInput');
+        if (fileInput) {
+            fileInput.click();
+        }
+    }
+
+    async handleImportFile(event) {
+        const file = event.target.files[0];
+        if (!file) {
+            return;
+        }
+
+        // Validate file type
+        if (!file.name.endsWith('.json')) {
+            domManager.updateStatus('Please select a JSON file', 'warning');
+            return;
+        }
+
+        try {
+            domManager.updateStatus('Importing sessions...', 'info');
+            
+            // Read file content
+            const fileContent = await this.readFileAsText(file);
+            
+            // Import sessions with merge enabled, no duplicates overwrite by default
+            const result = await storageManager.importSessions(fileContent, {
+                merge: true,
+                overwriteDuplicates: false
+            });
+
+            // Handle results
+            if (result.imported > 0) {
+                this.refreshSessionsList();
+                
+                let message = `Successfully imported ${result.imported} session(s)`;
+                if (result.skipped > 0) {
+                    message += ` (${result.skipped} skipped due to duplicates)`;
+                }
+                
+                domManager.updateStatus(message, 'success');
+                Logger.debug('Session', `Import completed: ${result.imported} imported, ${result.skipped} skipped`);
+                
+                // Show detailed summary if there were duplicates
+                if (result.duplicates > 0) {
+                    const shouldOverwrite = confirm(
+                        `Found ${result.duplicates} duplicate session(s). ` +
+                        `Would you like to overwrite them with the imported versions?`
+                    );
+                    
+                    if (shouldOverwrite) {
+                        const overwriteResult = await storageManager.importSessions(fileContent, {
+                            merge: true,
+                            overwriteDuplicates: true
+                        });
+                        
+                        this.refreshSessionsList();
+                        domManager.updateStatus(
+                            `Import completed: ${overwriteResult.imported} sessions imported (including overwrites)`, 
+                            'success'
+                        );
+                    }
+                }
+            } else if (result.skipped > 0) {
+                domManager.updateStatus('No new sessions imported - all sessions already exist', 'warning');
+            } else {
+                domManager.updateStatus('No valid sessions found in file', 'warning');
+            }
+
+        } catch (error) {
+            Logger.error('Session', 'Error importing sessions:', error);
+            
+            let errorMessage = 'Error importing sessions';
+            if (error.message.includes('Invalid import data')) {
+                errorMessage = 'Invalid file format - please select a valid PIPS session export file';
+            } else if (error.message.includes('JSON')) {
+                errorMessage = 'Invalid JSON file format';
+            }
+            
+            domManager.updateStatus(errorMessage, 'error');
+        } finally {
+            // Clear the file input
+            event.target.value = '';
+        }
+    }
+
+    readFileAsText(file) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = (e) => resolve(e.target.result);
+            reader.onerror = (e) => reject(new Error('Failed to read file'));
+            reader.readAsText(file);
+        });
+    }
+
+    downloadSingleSession(sessionId) {
+        try {
+            const success = storageManager.exportSingleSession(sessionId);
+            if (success) {
+                domManager.updateStatus('Session downloaded successfully', 'success');
+                Logger.debug('Session', `Single session ${sessionId} exported by user`);
+            } else {
+                domManager.updateStatus('Error: Session not found', 'error');
+            }
+        } catch (error) {
+            Logger.error('Session', 'Error downloading session:', error);
+            domManager.updateStatus('Error downloading session', 'error');
+        }
+    }
+
+    // Session data management
+    saveCurrentSessionToStorage() {
+        if (!appState.currentSessionData) {
+            console.log('[DEBUG] No current session data to save');
+            return;
+        }
+        
+        // Get current state from UI
+        const problemText = domManager.getElement('questionInput')?.value.trim() || '';
+        const imageElement = domManager.getElement('imagePreview');
+        const image = imageElement?.style.display !== 'none' ? imageElement.src : null;
+        
+        // Update session data
+        appState.currentSessionData.problemText = problemText;
+        appState.currentSessionData.image = image;
+        appState.currentSessionData.title = this.generateSessionTitle(problemText);
+        
+        // Always update lastUsed when saving
+        appState.currentSessionData.lastUsed = new Date().toISOString();
+        
+        // Get current chat history (this is critical for persistence)
+        const chatHistory = messageManager.getCurrentChatHistory();
+        appState.currentSessionData.chatHistory = chatHistory;
+        
+        console.log(`[DEBUG] Saving session ${appState.currentSessionData.id}:`);
+        console.log(`[DEBUG] - Title: ${appState.currentSessionData.title}`);
+        console.log(`[DEBUG] - Problem text length: ${problemText.length}`);
+        console.log(`[DEBUG] - Chat history messages: ${chatHistory.length}`);
+        if (chatHistory.length > 0) {
+            console.log(`[DEBUG] - Sample message: ${chatHistory[0].sender} - ${chatHistory[0].content.substring(0, 50)}...`);
+        }
+        
+        // Save to storage
+        storageManager.saveSession(appState.currentSessionData.id, appState.currentSessionData);
+        
+        console.log(`[DEBUG] Successfully saved session: ${appState.currentSessionData.id} with ${appState.currentSessionData.chatHistory.length} messages`);
+    }
+
+    generateSessionTitle(problemText) {
+        if (!problemText || problemText.trim() === '') {
+            return 'Untitled Session';
+        }
+        
+        // Take first meaningful part of the problem text
+        const cleaned = problemText.trim().replace(/\s+/g, ' ');
+        const maxLength = 50;
+        
+        if (cleaned.length <= maxLength) {
+            return cleaned;
+        }
+        
+        // Try to break at word boundaries
+        const truncated = cleaned.substring(0, maxLength);
+        const lastSpace = truncated.lastIndexOf(' ');
+        
+        if (lastSpace > maxLength * 0.6) {
+            return truncated.substring(0, lastSpace) + '...';
+        }
+        
+        return truncated + '...';
+    }
+
+    createNewSession(problemText, image = null) {
+        const sessionId = this.generateSessionId();
+        const now = new Date().toISOString();
+        
+        // Validate that we have meaningful content before creating a session
+        const hasContent = problemText && problemText.trim().length > 0;
+        const title = hasContent ? this.generateSessionTitle(problemText) : 'Untitled Session';
+        
+        const newSession = {
+            id: sessionId,
+            title: title,
+            problemText: problemText || '',
+            image: image,
+            createdAt: now,
+            lastUsed: now,
+            status: 'active',
+            chatHistory: []
+        };
+        
+        console.log(`[DEBUG] Created new session: ${sessionId}, title: "${title}", hasContent: ${hasContent}`);
+        return newSession;
+    }
+
+    generateSessionId() {
+        return 'session_' + Math.random().toString(36).substr(2, 16) + '_' + Date.now();
+    }
+
+    switchToSession(sessionId) {
+        console.log(`[DEBUG] Switching to session: ${sessionId}`);
+        
+        // Critical: Handle edge case - prevent switching while solving
+        if (appState.isSolving) {
+            domManager.updateStatus('Cannot switch sessions while solving. Please stop the current task first.', 'warning');
+            return;
+        }
+
+        // Prevent multiple simultaneous switches
+        if (window.sessionSwitchInProgress) {
+            console.log('[DEBUG] Session switch already in progress, ignoring');
+            return;
+        }
+        window.sessionSwitchInProgress = true;
+        
+        try {
+            // Save current session state if we have one
+            if (appState.currentSessionData) {
+                console.log('[DEBUG] Saving current session state before switching');
+                appState.currentSessionData.chatHistory = messageManager.getCurrentChatHistory();
+                // Update the current state
+                appState.currentSessionData.problemText = domManager.getElement('questionInput')?.value.trim() || '';
+                const imageElement = domManager.getElement('imagePreview');
+                appState.currentSessionData.image = imageElement?.style.display !== 'none' ? imageElement.src : null;
+                appState.currentSessionData.title = this.generateSessionTitle(appState.currentSessionData.problemText);
+                this.saveCurrentSessionToStorage();
+            }
+            
+            // Load the selected session - use the same logic as refreshSessionsList for consistency
+            let sessions = storageManager.loadSessions();
+            console.log(`[DEBUG] Loaded sessions from storage:`, Object.keys(sessions));
+            
+            // Create the same combined sessions that the UI uses
+            const allSessions = { ...sessions };
+            if (appState.currentSessionData && appState.currentSessionData.id) {
+                allSessions[appState.currentSessionData.id] = appState.currentSessionData;
+                console.log(`[DEBUG] Added current session to combined sessions: ${appState.currentSessionData.id}`);
+            }
+            
+            console.log(`[DEBUG] All available sessions:`, Object.keys(allSessions));
+            
+            // Debug: Show details about each available session
+            Object.entries(allSessions).forEach(([id, sess]) => {
+                console.log(`[DEBUG] Session ${id}: title="${sess.title}", status="${sess.status}"`);
+            });
+            
+            let session = allSessions[sessionId];
+            
+            if (!session) {
+                console.error(`[DEBUG] Session not found: ${sessionId}`);
+                console.error(`[DEBUG] Available sessions:`, Object.keys(allSessions));
+                console.error(`[DEBUG] Current session in state:`, appState.currentSessionData?.id);
+                domManager.updateStatus('Session not found', 'error');
+                return;
+            }
+            
+            console.log(`[DEBUG] Found session: ${sessionId}, status: ${session.status}, title: ${session.title}`);
+            
+            console.log(`[DEBUG] Loading session: ${sessionId} with ${session.chatHistory ? session.chatHistory.length : 0} messages`);
+            
+            // Update state WITHOUT updating lastUsed to prevent reorganization on view
+            appState.selectedSessionId = sessionId;
+            appState.currentSessionData = { ...session };
+            
+            // Clear ALL selections first, then set the correct one
+            document.querySelectorAll('.session-item').forEach(item => {
+                item.classList.remove('selected');
+            });
+            
+            // Set selection on the clicked session
+            const targetElement = document.querySelector(`[data-session-id="${sessionId}"]`);
+            if (targetElement) {
+                console.log(`[DEBUG] Setting selected class on session: ${sessionId}`);
+                targetElement.classList.add('selected');
+            } else {
+                console.error(`[DEBUG] Target element not found for session: ${sessionId}`);
+                // Try again after a brief delay in case DOM is updating
+                setTimeout(() => {
+                    const retryElement = document.querySelector(`[data-session-id="${sessionId}"]`);
+                    if (retryElement) {
+                        retryElement.classList.add('selected');
+                        console.log(`[DEBUG] Successfully set selected class on retry`);
+                    }
+                }, 50);
+            }
+            
+            // Load session data into UI
+            const questionInput = domManager.getElement('questionInput');
+            if (questionInput) {
+                questionInput.value = session.problemText || '';
+            }
+            
+            // Check if session is used/read-only
+            const isUsedSession = this.isSessionUsed(session);
+            
+            if (isUsedSession) {
+                // Make session read-only
+                this.setInputsReadOnly(`This session is ${session.status || 'used'}. Start a new session to solve another problem.`);
+                domManager.updateStatus(`Viewing ${session.status || 'used'} session (read-only)`, 'info');
+                console.log(`[DEBUG] Session ${sessionId} is read-only (status: ${session.status})`);
+            } else {
+                // Enable editing for fresh sessions
+                this.clearAndEnableInputs();
+                console.log(`[DEBUG] Session ${sessionId} is editable (status: ${session.status})`);
+            }
+            
+            // Load image if present
+            imageHandler.loadSessionImage(session.image);
+            
+            // Load chat history
+            messageManager.loadChatHistory(session.chatHistory || []);
+            
+            domManager.updateStatus(`Switched to session: ${session.title}`, 'success');
+            
+        } catch (error) {
+            console.error('[DEBUG] Error in switchToSession:', error);
+            domManager.updateStatus('Error switching to session', 'error');
+        } finally {
+            // Always clear the switch lock
+            setTimeout(() => {
+                window.sessionSwitchInProgress = false;
+            }, 100);
+        }
+    }
+
+    deleteSession(sessionId, event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        
+        console.log(`[DEBUG] Attempting to delete session: ${sessionId}`);
+        
+        if (confirm('Are you sure you want to delete this session?')) {
+            try {
+                // Load sessions from storage
+                const sessions = storageManager.loadSessions();
+                console.log(`[DEBUG] Loaded ${Object.keys(sessions).length} sessions from storage`);
+                
+                // Delete from storage
+                const sessionExistsInStorage = sessions.hasOwnProperty(sessionId);
+                if (sessionExistsInStorage) {
+                    delete sessions[sessionId];
+                    storageManager.saveSessions(sessions);
+                    console.log(`[DEBUG] Deleted session ${sessionId} from storage`);
+                } else {
+                    console.log(`[DEBUG] Session ${sessionId} not found in storage`);
+                }
+                
+                // If this is the current session in memory, clear it
+                if (appState.currentSessionData && appState.currentSessionData.id === sessionId) {
+                    console.log(`[DEBUG] Deleting current session from memory: ${sessionId}`);
+                    appState.currentSessionData = null;
+                    appState.selectedSessionId = null;
+                    
+                    // Clear inputs and UI
+                    domManager.clearInputs();
+                    imageHandler.clearImage();
+                    messageManager.clearChatAndRestoreWelcome();
+                    this.clearAndEnableInputs();
+                    
+                    // Clear any final solution artifacts panels
+                    document.querySelectorAll('.final-artifacts-compact').forEach(panel => {
+                        panel.remove();
+                    });
+                }
+                
+                // If this was the selected session, clear selection
+                if (appState.selectedSessionId === sessionId) {
+                    console.log(`[DEBUG] Clearing selected session: ${sessionId}`);
+                    appState.selectedSessionId = null;
+                }
+                
+                // Force remove the DOM element immediately to provide instant feedback
+                const sessionElement = document.querySelector(`[data-session-id="${sessionId}"]`);
+                if (sessionElement) {
+                    sessionElement.remove();
+                    console.log(`[DEBUG] Removed DOM element for session: ${sessionId}`);
+                }
+                
+                // Refresh the sessions list
+                this.refreshSessionsList();
+                
+                domManager.updateStatus('Session deleted successfully', 'success');
+                console.log(`[DEBUG] Session deletion completed: ${sessionId}`);
+                
+            } catch (error) {
+                console.error(`[DEBUG] Error deleting session ${sessionId}:`, error);
+                domManager.updateStatus('Error deleting session', 'error');
+            }
+        }
+    }
+
+    refreshSessionsList() {
+        console.log('[DEBUG] Updating sessions list');
+        
+        const sessionsList = domManager.getElement('sessionsList');
+        
+        if (!sessionsList) {
+            console.error('[DEBUG] Sessions list element not found');
+            return;
+        }
+        
+        try {
+            // Ensure current session is saved to storage before refreshing list
+            if (appState.currentSessionData && appState.currentSessionData.id) {
+                console.log('[DEBUG] Ensuring current session is saved before refresh');
+                this.saveCurrentSessionToStorage();
+            }
+            
+            const storedSessions = storageManager.loadSessions();
+            console.log(`[DEBUG] Loaded ${Object.keys(storedSessions).length} sessions from storage`);
+            
+            // Automatically clean up ghost sessions from storage
+            this.cleanupGhostSessionsFromStorage(storedSessions);
+            
+            // Combine stored sessions with current session if it exists
+            const allSessions = { ...storedSessions };
+            if (appState.currentSessionData && appState.currentSessionData.id) {
+                // Always include current session in the list, overriding stored version
+                allSessions[appState.currentSessionData.id] = appState.currentSessionData;
+                console.log(`[DEBUG] Including current session in list: ${appState.currentSessionData.id}`);
+            }
+            
+            // Convert sessions object to array and sort by creation time (newest first)
+            const sessionsArray = Object.values(allSessions).filter(session => {
+                // Filter out invalid sessions and ghost sessions
+                if (!session || !session.id) {
+                    console.log('[DEBUG] Filtering out session without ID:', session);
+                    return false;
+                }
+                
+                // Filter out ghost sessions (much more aggressive filtering)
+                const isGhostSession = (
+                    (!session.title || session.title === 'Untitled Session' || session.title.trim() === '') &&
+                    (!session.chatHistory || session.chatHistory.length === 0) &&
+                    (!session.problemText || session.problemText.trim() === '') &&
+                    (!session.image || session.image === null)
+                );
+                
+                // Also filter out sessions with "solving" status but no actual content and are old
+                const isStuckSolvingSession = (
+                    session.status === 'solving' &&
+                    (!session.chatHistory || session.chatHistory.length === 0) &&
+                    (!session.problemText || session.problemText.trim() === '') &&
+                    Date.now() - new Date(session.createdAt || 0).getTime() > 60000 // 1 minute old
+                );
+                
+                if (isGhostSession) {
+                    console.log('[DEBUG] Filtering out ghost session:', session.id, session.title);
+                    return false;
+                }
+                
+                if (isStuckSolvingSession) {
+                    console.log('[DEBUG] Filtering out stuck solving session:', session.id, session.title);
+                    return false;
+                }
+                
+                return true;
+            }).sort((a, b) => {
+                // Primary sort: creation time (newest first)
+                const createdA = new Date(a.createdAt || 0);
+                const createdB = new Date(b.createdAt || 0);
+
+                if (createdB - createdA !== 0) {
+                    return createdB - createdA;
+                }
+
+                // Secondary sort (tie-breaker): lastUsed (newest first)
+                const usedA = new Date(a.lastUsed || 0);
+                const usedB = new Date(b.lastUsed || 0);
+                return usedB - usedA;
+            });
+            
+            console.log(`[DEBUG] Filtered and sorted ${sessionsArray.length} sessions`);
+            
+            // Track which session elements need to be created
+            const sessionElementsToAdd = [];
+            
+            // Update existing elements and identify new ones
+            sessionsArray.forEach(session => {
+                const existingElement = sessionsList.querySelector(`[data-session-id="${session.id}"]`);
+                
+                if (existingElement) {
+                    // Update existing element in place
+                    this.updateSessionElement(existingElement, session);
+                } else {
+                    // Create new element
+                    const sessionElement = this.createSessionElement(session);
+                    if (sessionElement) {
+                        sessionElementsToAdd.push(sessionElement);
+                    }
+                }
+            });
+
+            // Add new elements in sorted order
+            sessionElementsToAdd.forEach(element => {
+                sessionsList.appendChild(element);
+            });
+
+            // Reorder elements according to sort order
+            const orderedElements = [];
+            sessionsArray.forEach(session => {
+                const element = sessionsList.querySelector(`[data-session-id="${session.id}"]`);
+                if (element) {
+                    orderedElements.push(element);
+                }
+            });
+            
+            // Remove orphaned DOM elements (sessions that no longer exist in data)
+            const existingElements = sessionsList.querySelectorAll('.session-item');
+            const validSessionIds = new Set(sessionsArray.map(s => s.id));
+            
+            existingElements.forEach(element => {
+                const elementSessionId = element.getAttribute('data-session-id');
+                if (!validSessionIds.has(elementSessionId)) {
+                    console.log(`[DEBUG] Removing orphaned session element: ${elementSessionId}`);
+                    element.remove();
+                }
+            });
+            
+            // Reorder DOM elements
+            orderedElements.forEach(element => {
+                sessionsList.appendChild(element);
+            });
+            
+            // Update selection after reordering
+            if (appState.selectedSessionId && appState.currentSessionData) {
+                // Clear all selections first
+                document.querySelectorAll('.session-item').forEach(item => {
+                    item.classList.remove('selected');
+                });
+                
+                // Set selection on the currently selected session
+                const selectedElement = sessionsList.querySelector(`[data-session-id="${appState.selectedSessionId}"]`);
+                if (selectedElement) {
+                    selectedElement.classList.add('selected');
+                    console.log(`[DEBUG] Set selection on session: ${appState.selectedSessionId}`);
+                }
+            }
+            
+            // Update session count in header
+            const totalSessions = sessionsArray.length;
+            console.log(`[DEBUG] Total sessions for header: ${totalSessions}`);
+            this.updateSessionsHeader(totalSessions);
+            
+            // Replace feather icons for newly added session elements only
+            try {
+                sessionElementsToAdd.forEach(element => {
+                    if (typeof feather !== 'undefined') {
+                        feather.replace(element);
+                    }
+                });
+            } catch (e) {
+                console.warn('[DEBUG] Could not replace feather icons in new session elements:', e);
+            }
+            
+            // Final cleanup: ensure no stuck spinner sessions remain in the UI
+            this.removeStuckSpinnerElements();
+            
+        } catch (error) {
+            console.error('[DEBUG] Error in refreshSessionsList:', error);
+        }
+    }
+
+    // Remove any UI elements that still have spinners but shouldn't
+    removeStuckSpinnerElements() {
+        const sessionsList = domManager.getElement('sessionsList');
+        if (!sessionsList) return;
+        
+        const sessionElements = sessionsList.querySelectorAll('.session-item');
+        sessionElements.forEach(element => {
+            const sessionId = element.getAttribute('data-session-id');
+            const icon = element.querySelector('[data-feather="loader"]');
+            
+            // If element has a spinner icon but no corresponding valid session data, remove it
+            if (icon && sessionId) {
+                const sessions = storageManager.loadSessions();
+                const allSessions = { ...sessions };
+                if (appState.currentSessionData && appState.currentSessionData.id) {
+                    allSessions[appState.currentSessionData.id] = appState.currentSessionData;
+                }
+                
+                const session = allSessions[sessionId];
+                if (!session || 
+                    (!session.problemText && !session.chatHistory?.length && session.status !== 'solving')) {
+                    console.log('[DEBUG] Removing stuck spinner element:', sessionId);
+                    element.remove();
+                }
+            }
+        });
+    }
+
+    updateSessionElement(element, session) {
+        if (!element || !session) return;
+
+        // Update status-based styling
+        element.className = 'session-item'; // Reset classes
+        if (session.status === 'completed') {
+            element.classList.add('completed-session');
+        } else if (session.status === 'interrupted') {
+            element.classList.add('interrupted-session');
+        } else if (session.status === 'solving') {
+            element.classList.add('solving-session');
+        }
+
+        // Determine icon based on status
+        let iconName = 'file-text';
+        if (session.status === 'completed') iconName = 'check-circle';
+        else if (session.status === 'interrupted') iconName = 'x-circle';
+        else if (session.status === 'solving') iconName = 'loader';
+
+        // Handle date safely
+        let timeAgo = 'Unknown time';
+        try {
+            const displayDate = new Date(session.lastUsed || session.createdAt);
+            timeAgo = this.getTimeAgo(displayDate);
+        } catch (e) {
+            console.warn('[DEBUG] Invalid date for session:', session.id, session.lastUsed, session.createdAt);
+        }
+
+        // Handle message count safely
+        const messageCount = session.chatHistory ? session.chatHistory.length : 0;
+        const messageText = messageCount === 1 ? 'message' : 'messages';
+
+        // Handle title safely
+        const title = session.title || 'Untitled Session';
+        const safeTitle = this.escapeHtml(title);
+
+        // Update icon - force complete refresh for reliability
+        const iconContainer = element.querySelector('.session-icon');
+        if (iconContainer) {
+            const currentIcon = iconContainer.querySelector('i, svg');
+            const currentIconName = currentIcon ? currentIcon.getAttribute('data-feather') : 'unknown';
+            console.log(`[DEBUG] Updating session ${session.id} icon from ${currentIconName} to ${iconName} (status: ${session.status})`);
+            
+            // Always force refresh the icon to ensure proper updating
+            iconContainer.innerHTML = `<i data-feather="${iconName}" style="width: 16px; height: 16px;"></i>`;
+            console.log(`[DEBUG] Force replaced icon container for session ${session.id}`);
+        }
+
+        // Update title and meta
+        const titleElement = element.querySelector('.session-title');
+        const metaElement = element.querySelector('.session-meta');
+        if (titleElement) titleElement.textContent = title;
+        if (metaElement) metaElement.textContent = `${timeAgo} • ${messageCount} ${messageText}`;
+
+        // Update status class
+        const statusElement = element.querySelector('.session-status');
+        if (statusElement) {
+            statusElement.className = `session-status ${session.status || 'active'}`;
+        }
+
+        // Replace feather icons for this element only with a small delay to ensure DOM update
+        setTimeout(() => {
+            try {
+                if (typeof feather !== 'undefined') {
+                    feather.replace(element);
+                }
+                console.log(`[DEBUG] Feather icons replaced for session ${session.id} with status ${session.status} -> ${iconName}`);
+            } catch (e) {
+                console.warn('[DEBUG] Could not replace feather icons in updated element:', e);
+            }
+        }, 10);
+    }
+
+    createSessionElement(session) {
+        if (!session || !session.id) {
+            console.error('[DEBUG] Invalid session data:', session);
+            return null;
+        }
+        
+        const sessionItem = document.createElement('div');
+        sessionItem.className = 'session-item';
+        sessionItem.setAttribute('data-session-id', session.id);
+        
+        // Add status-based styling
+        if (session.status === 'completed') {
+            sessionItem.classList.add('completed-session');
+        } else if (session.status === 'interrupted') {
+            sessionItem.classList.add('interrupted-session');
+        } else if (session.status === 'solving') {
+            sessionItem.classList.add('solving-session');
+        }
+        
+        // Determine icon based on status
+        let iconName = 'file-text';
+        if (session.status === 'completed') iconName = 'check-circle';
+        else if (session.status === 'interrupted') iconName = 'x-circle';
+        else if (session.status === 'solving') iconName = 'loader';
+        
+        // Handle date safely
+        let timeAgo = 'Unknown time';
+        try {
+            const displayDate = new Date(session.lastUsed || session.createdAt);
+            timeAgo = this.getTimeAgo(displayDate);
+        } catch (e) {
+            console.warn('[DEBUG] Invalid date for session:', session.id, session.lastUsed, session.createdAt);
+        }
+        
+        // Handle message count safely
+        const messageCount = session.chatHistory ? session.chatHistory.length : 0;
+        const messageText = messageCount === 1 ? 'message' : 'messages';
+        
+        // Handle title safely
+        const title = session.title || 'Untitled Session';
+        const safeTitle = this.escapeHtml(title);
+        
+        sessionItem.innerHTML = `
+            <div class="session-icon">
+                <i data-feather="${iconName}" style="width: 16px; height: 16px;"></i>
+            </div>
+            <div class="session-info">
+                <div class="session-title">${safeTitle}</div>
+                <div class="session-meta">${timeAgo} • ${messageCount} ${messageText}</div>
+            </div>
+            <div class="session-status ${session.status || 'active'}">
+                <span class="status-dot"></span>
+            </div>
+            <div class="session-actions">
+                <button class="session-download" title="Download this session">
+                    <i data-feather="download" style="width: 12px; height: 12px;"></i>
+                </button>
+                <button class="session-delete" title="Delete session">
+                    <i data-feather="x" style="width: 12px; height: 12px;"></i>
+                </button>
+            </div>
+        `;
+        
+        // Add click handler for session switching
+        sessionItem.addEventListener('click', (e) => {
+            try {
+                console.log(`[DEBUG] Session item clicked: ${session.id}`, session.title);
+                
+                if (!e.target.closest('.session-delete') && !e.target.closest('.session-download')) {
+                    // Prevent multiple rapid clicks
+                    if (sessionItem.dataset.switching === 'true') {
+                        console.log('[DEBUG] Session switch already in progress, ignoring click');
+                        return;
+                    }
+                    
+                    sessionItem.dataset.switching = 'true';
+                    
+                    setTimeout(() => {
+                        this.switchToSession(session.id);
+                        sessionItem.dataset.switching = 'false';
+                    }, 10);
+                } else {
+                    console.log(`[DEBUG] Action button clicked, not switching session`);
+                }
+            } catch (error) {
+                console.error('[DEBUG] Error in session click handler:', error);
+                sessionItem.dataset.switching = 'false';
+            }
+        });
+
+        // Add click handler for download button
+        const downloadButton = sessionItem.querySelector('.session-download');
+        downloadButton?.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.downloadSingleSession(session.id);
+        });
+
+        // Add click handler for delete button
+        const deleteButton = sessionItem.querySelector('.session-delete');
+        deleteButton?.addEventListener('click', (e) => {
+            this.deleteSession(session.id, e);
+        });
+        
+        return sessionItem;
+    }
+
+    getTimeAgo(date) {
+        if (!date) return 'Unknown time';
+        
+        let dateObj;
+        try {
+            dateObj = new Date(date);
+            if (isNaN(dateObj.getTime())) {
+                return 'Invalid date';
+            }
+        } catch (e) {
+            return 'Invalid date';
+        }
+        
+        const now = new Date();
+        const diffMs = now - dateObj;
+        
+        // Handle future dates
+        if (diffMs < 0) {
+            return 'Just now';
+        }
+        
+        const diffSecs = Math.floor(diffMs / 1000);
+        const diffMins = Math.floor(diffMs / 60000);
+        const diffHours = Math.floor(diffMs / 3600000);
+        const diffDays = Math.floor(diffMs / 86400000);
+        const diffWeeks = Math.floor(diffMs / (86400000 * 7));
+        const diffMonths = Math.floor(diffMs / (86400000 * 30));
+        
+        if (diffSecs < 30) return 'Just now';
+        if (diffSecs < 60) return `${diffSecs}s ago`;
+        if (diffMins < 60) return `${diffMins}m ago`;
+        if (diffHours < 24) return `${diffHours}h ago`;
+        if (diffDays < 7) return `${diffDays}d ago`;
+        if (diffWeeks < 4) return `${diffWeeks}w ago`;
+        if (diffMonths < 12) return `${diffMonths}mo ago`;
+        
+        // For very old dates, show the actual date
+        return dateObj.toLocaleDateString();
+    }
+
+    updateSessionsHeader(totalSessions) {
+        const header = document.querySelector('.sessions-header .form-label');
+        if (!header) return;
+        
+        const baseText = 'Session History';
+        const sessionCount = Math.max(0, totalSessions || 0);
+        
+        if (sessionCount === 0) {
+            header.innerHTML = `
+                <i data-feather="clock" style="width: 16px; height: 16px; margin-right: 8px;"></i>
+                ${baseText}
+            `;
+        } else if (sessionCount === 1) {
+            header.innerHTML = `
+                <i data-feather="clock" style="width: 16px; height: 16px; margin-right: 8px;"></i>
+                ${baseText} (1 session)
+            `;
+        } else {
+            header.innerHTML = `
+                <i data-feather="clock" style="width: 16px; height: 16px; margin-right: 8px;"></i>
+                ${baseText} (${sessionCount} sessions)
+            `;
+        }
+        
+        // Ensure feather icons are replaced
+        try {
+            // Only replace icons in the header area
+            const headerElement = document.querySelector('.sessions-header');
+            if (headerElement && typeof feather !== 'undefined') {
+                feather.replace(headerElement);
+            }
+        } catch (e) {
+            console.warn('[DEBUG] Could not replace feather icons:', e);
+        }
+    }
+
+    updateCurrentSessionDisplay() {
+        // Since we've removed the separate currentSession element,
+        // the session display is now handled by refreshSessionsList()
+        // We can trigger a refresh of the sessions list to ensure the current session appears correctly
+        this.refreshSessionsList();
+    }
+
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+
+    // Handle session-related socket events
+    handleSessionConnected(data) {
+        console.log('[DEBUG] SessionManager.handleSessionConnected called with data:', JSON.stringify(data));
+        Logger.debug('Session', 'Session connected:', data);
+        appState.currentSessionId = data.session_id;
+        console.log('[DEBUG] Set appState.currentSessionId to:', data.session_id);
+        
+        const sessionInfoText = `Session: ${data.session_id.substring(0, 8)}`;
+        console.log('[DEBUG] About to update session info to:', sessionInfoText);
+        domManager.updateSessionInfo(sessionInfoText);
+        
+        console.log('[DEBUG] About to update status to: Connected - Ready to solve problems');
+        domManager.updateStatus('Connected - Ready to solve problems', 'success');
+    }
+
+    // Session creation for solving
+    handleSolveProblem(problemText, imageData) {
+        // Auto-create session if none exists or we're viewing a stored session
+        if (!appState.currentSessionData || appState.selectedSessionId !== null) {
+            // Create new session
+            console.log(`[DEBUG] Creating new session (previous status: ${appState.currentSessionData?.status || 'none'})`);
+            appState.currentSessionData = this.createNewSession(problemText, imageData);
+            appState.selectedSessionId = null; // Set to null for current/new session
+            
+            // Clear visual selection from stored sessions and update display
+            document.querySelectorAll('.session-item').forEach(item => {
+                item.classList.remove('selected');
+            });
+            
+            // Immediately save new session to storage
+            this.saveCurrentSessionToStorage();
+            console.log(`[DEBUG] New session created and saved with ID: ${appState.currentSessionData.id}`);
+            // Ensure UI immediately reflects the newly-created session
+            this.refreshSessionsList();
+        } else {
+            // Update existing session
+            appState.currentSessionData.problemText = problemText;
+            appState.currentSessionData.image = imageData;
+            appState.currentSessionData.title = this.generateSessionTitle(problemText);
+            // Save updated session
+            this.saveCurrentSessionToStorage();
+            console.log(`[DEBUG] Updated and saved existing session: ${appState.currentSessionData.id}`);
+            // Update sessions list to reflect any changes to the current session
+            this.refreshSessionsList();
+        }
+
+        return appState.currentSessionData.id;
+    }
+
+    // Handle solving state changes
+    handleSolvingStarted() {
+        // Save current session data including chat history BEFORE starting to solve
+        if (appState.currentSessionData) {
+            appState.currentSessionData.chatHistory = messageManager.getCurrentChatHistory();
+            appState.currentSessionData.status = 'solving';
+            // Update lastUsed when solving starts
+            appState.currentSessionData.lastUsed = new Date().toISOString();
+            this.saveCurrentSessionToStorage();
+            this.updateCurrentSessionDisplay();
+            this.refreshSessionsList();
+            
+            // Make inputs read-only once solving starts
+            this.setInputsReadOnly('Cannot modify problem while solving is in progress');
+            
+            // Add visual indicator to the current session in the unified list
+            if (appState.selectedSessionId && appState.currentSessionData.id === appState.selectedSessionId) {
+                const sessionElement = document.querySelector(`[data-session-id="${appState.selectedSessionId}"]`);
+                if (sessionElement) {
+                    sessionElement.classList.add('active-solving');
+                }
+            }
+            
+            // Start periodic saving during solving
+            this.startPeriodicSaving();
+        }
+    }
+
+    handleSolvingComplete() {
+        console.log('[DEBUG] Handling solving completed - cleaning up UI and saving session');
+        
+        // Stop periodic saving
+        this.stopPeriodicSaving();
+        
+        // Clean up any remaining UI indicators
+        messageManager.cleanupAllActiveIndicators();
+        
+        // Update session status
+        if (appState.currentSessionData) {
+            appState.currentSessionData.status = 'completed';
+            appState.currentSessionData.chatHistory = messageManager.getCurrentChatHistory();
+            appState.currentSessionData.lastUsed = new Date().toISOString();
+            this.saveCurrentSessionToStorage();
+            this.refreshSessionsList();
+            
+            // Keep inputs read-only for completed sessions
+            this.setInputsReadOnly('This session is completed. Start a new session to solve another problem.');
+            
+            console.log(`[DEBUG] Session ${appState.currentSessionData.id} marked as completed and saved with ${appState.currentSessionData.chatHistory.length} messages`);
+        }
+    }
+
+    handleSolvingInterrupted() {
+        console.log('[DEBUG] Handling solving interrupted - cleaning up UI and saving session');
+        
+        // Stop periodic saving
+        this.stopPeriodicSaving();
+        
+        // CRITICAL: Clean up all UI indicators first
+        messageManager.cleanupAllActiveIndicators();
+        
+        // Update session status
+        if (appState.currentSessionData) {
+            appState.currentSessionData.status = 'interrupted';
+            appState.currentSessionData.chatHistory = messageManager.getCurrentChatHistory();
+            appState.currentSessionData.lastUsed = new Date().toISOString();
+            this.saveCurrentSessionToStorage();
+            this.refreshSessionsList();
+            
+            // Keep inputs read-only for interrupted sessions
+            this.setInputsReadOnly('This session was interrupted. Start a new session to solve another problem.');
+            
+            console.log(`[DEBUG] Session ${appState.currentSessionData.id} marked as interrupted and saved with ${appState.currentSessionData.chatHistory.length} messages`);
+        }
+    }
+
+    // General handler for any session failure or error
+    handleSolvingError() {
+        console.log('[DEBUG] Handling solving error - cleaning up UI and saving session');
+        
+        // Stop periodic saving
+        this.stopPeriodicSaving();
+        
+        // Clean up all UI indicators
+        messageManager.cleanupAllActiveIndicators();
+        
+        // Update session status
+        if (appState.currentSessionData) {
+            appState.currentSessionData.status = 'interrupted';
+            appState.currentSessionData.chatHistory = messageManager.getCurrentChatHistory();
+            appState.currentSessionData.lastUsed = new Date().toISOString();
+            this.saveCurrentSessionToStorage();
+            this.refreshSessionsList();
+            
+            // Keep inputs read-only for error sessions
+            this.setInputsReadOnly('This session encountered an error. Start a new session to solve another problem.');
+            
+            console.log(`[DEBUG] Session ${appState.currentSessionData.id} marked as interrupted due to error and saved with ${appState.currentSessionData.chatHistory.length} messages`);
+        }
+    }
+
+    // Emergency cleanup method - can be called from anywhere when things go wrong
+    emergencyCleanupAndSave() {
+        console.log('[DEBUG] Emergency cleanup and save triggered');
+        
+        try {
+            // Clean up all UI indicators
+            messageManager.cleanupAllActiveIndicators();
+            
+            // Save whatever we have in the current session
+            if (appState.currentSessionData) {
+                appState.currentSessionData.chatHistory = messageManager.getCurrentChatHistory();
+                appState.currentSessionData.status = 'interrupted';
+                appState.currentSessionData.lastUsed = new Date().toISOString();
+                this.saveCurrentSessionToStorage();
+                this.refreshSessionsList();
+                
+                console.log(`[DEBUG] Emergency save completed for session ${appState.currentSessionData.id} with ${appState.currentSessionData.chatHistory.length} messages`);
+            }
+            
+            // Reset solving state
+            appState.isSolving = false;
+            
+            // Re-enable inputs
+            this.clearAndEnableInputs();
+            
+        } catch (error) {
+            console.error('[DEBUG] Error during emergency cleanup:', error);
+        }
+    }
+
+    // Periodic saving mechanism
+    startPeriodicSaving() {
+        // Clear any existing interval
+        this.stopPeriodicSaving();
+        
+        // Save every 10 seconds during solving to ensure we don't lose messages
+        this.periodicSaveInterval = setInterval(() => {
+            if (appState.currentSessionData && appState.isSolving) {
+                console.log('[DEBUG] Periodic save triggered during solving');
+                appState.currentSessionData.chatHistory = messageManager.getCurrentChatHistory();
+                appState.currentSessionData.lastUsed = new Date().toISOString();
+                this.saveCurrentSessionToStorage();
+            } else {
+                // Stop saving if we're no longer solving
+                this.stopPeriodicSaving();
+            }
+        }, 10000); // 10 seconds
+        
+        console.log('[DEBUG] Started periodic saving during solving');
+    }
+
+    stopPeriodicSaving() {
+        if (this.periodicSaveInterval) {
+            clearInterval(this.periodicSaveInterval);
+            this.periodicSaveInterval = null;
+            console.log('[DEBUG] Stopped periodic saving');
+        }
+    }
+
+    // Automatically cleanup ghost sessions from storage during refresh
+    cleanupGhostSessionsFromStorage(sessions) {
+        let deletedCount = 0;
+        const sessionIds = Object.keys(sessions);
+        
+        sessionIds.forEach(sessionId => {
+            const session = sessions[sessionId];
+            
+            // Same aggressive filtering logic
+            const isGhostSession = (
+                (!session.title || session.title === 'Untitled Session' || session.title.trim() === '') &&
+                (!session.chatHistory || session.chatHistory.length === 0) &&
+                (!session.problemText || session.problemText.trim() === '') &&
+                (!session.image || session.image === null)
+            );
+            
+            const isStuckSolvingSession = (
+                session.status === 'solving' &&
+                (!session.chatHistory || session.chatHistory.length === 0) &&
+                (!session.problemText || session.problemText.trim() === '') &&
+                Date.now() - new Date(session.createdAt || 0).getTime() > 60000 // 1 minute old
+            );
+            
+            if (isGhostSession || isStuckSolvingSession) {
+                console.log(`[DEBUG] Auto-removing ghost session from storage: ${sessionId}`);
+                delete sessions[sessionId];
+                deletedCount++;
+            }
+        });
+        
+        if (deletedCount > 0) {
+            storageManager.saveSessions(sessions);
+            console.log(`[DEBUG] Auto-cleaned ${deletedCount} ghost sessions from storage`);
+        }
+    }
+
+    // Cleanup ghost sessions from storage
+    cleanupGhostSessions() {
+        console.log('[DEBUG] Starting ghost session cleanup');
+        
+        try {
+            const sessions = storageManager.loadSessions();
+            const sessionIds = Object.keys(sessions);
+            let deletedCount = 0;
+            
+            sessionIds.forEach(sessionId => {
+                const session = sessions[sessionId];
+                
+                // Identify ghost sessions
+                const isGhostSession = (
+                    (!session.title || session.title === 'Untitled Session') &&
+                    (!session.chatHistory || session.chatHistory.length === 0) &&
+                    (!session.problemText || session.problemText.trim() === '') &&
+                    session.status !== 'solving' // Don't delete actual solving sessions
+                );
+                
+                if (isGhostSession) {
+                    // Check if it's old (more than 1 hour old)
+                    const sessionAge = Date.now() - new Date(session.createdAt || 0).getTime();
+                    const oneHour = 60 * 60 * 1000;
+                    
+                    if (sessionAge > oneHour) {
+                        console.log(`[DEBUG] Cleaning up ghost session: ${sessionId}`);
+                        delete sessions[sessionId];
+                        deletedCount++;
+                    }
+                }
+            });
+            
+            if (deletedCount > 0) {
+                storageManager.saveSessions(sessions);
+                console.log(`[DEBUG] Cleaned up ${deletedCount} ghost sessions`);
+            } else {
+                console.log('[DEBUG] No ghost sessions to clean up');
+            }
+            
+        } catch (error) {
+            console.error('[DEBUG] Error during ghost session cleanup:', error);
+        }
+    }
+
+    // Enhanced clear all sessions with ghost cleanup
+    clearAllSessionsEnhanced() {
+        if (confirm('Are you sure you want to clear all session history? This cannot be undone.')) {
+            try {
+                // Also clear current session state
+                appState.selectedSessionId = null;
+                appState.currentSessionData = null;
+                
+                // Clear storage
+                storageManager.clearAllSessions();
+                
+                // Clear UI
+                domManager.clearInputs();
+                imageHandler.clearImage();
+                messageManager.clearChatAndRestoreWelcome();
+                this.clearAndEnableInputs();
+                
+                // Clear any final solution artifacts panels
+                document.querySelectorAll('.final-artifacts-compact').forEach(panel => {
+                    panel.remove();
+                });
+                
+                // Clear DOM elements manually
+                const sessionsList = domManager.getElement('sessionsList');
+                if (sessionsList) {
+                    sessionsList.innerHTML = '';
+                }
+                
+                this.refreshSessionsList();
+                domManager.updateStatus('All sessions cleared', 'success');
+                Logger.debug('Session', 'All sessions cleared by user');
+                
+            } catch (error) {
+                Logger.error('Session', 'Error clearing sessions:', error);
+                domManager.updateStatus('Error clearing sessions', 'error');
+            }
+        }
+    }
+}
+
+// Create singleton instance
+export const sessionManager = new SessionManager(); 

src/pips/static/js/ui/settings-manager.js

@@ -0,0 +1,504 @@
+/**
+ * Settings Manager - Handles settings modal, API key management, and form handling
+ */
+import { Logger } from '../core/logger.js';
+import { storageManager } from '../core/storage.js';
+import { socketManager } from '../network/socket.js';
+import { domManager } from './dom-manager.js';
+
+export class SettingsManager {
+    constructor() {
+        this.isInitialized = false;
+    }
+
+    initialize() {
+        if (this.isInitialized) return;
+        
+        this.setupEventListeners();
+        this.loadApiKeysFromStorage();
+        
+        // Initialize PIPS mode to default first
+        this.initializePIPSMode();
+        
+        // Then load user settings (which may override the default)
+        this.loadUserSettingsFromStorage();
+        
+        this.isInitialized = true;
+        
+        Logger.debug('Settings', 'Settings manager initialized');
+    }
+
+    setupEventListeners() {
+        // Settings modal listeners
+        domManager.getElement('settingsBtn')?.addEventListener('click', () => this.openSettings());
+        domManager.getElement('closeBtn')?.addEventListener('click', () => this.closeSettings());
+        domManager.getElement('settingsForm')?.addEventListener('submit', (e) => this.saveSettings(e));
+        
+        // PIPS Mode iOS switch listener
+        domManager.getElement('pipsModeSwitch')?.addEventListener('change', () => {
+            this.updateModeIndicator();
+            this.autoSaveSettings();
+        });
+        
+        // Auto-save on model selection changes
+        domManager.getElement('generatorModelSelect')?.addEventListener('change', () => this.autoSaveSettings());
+        domManager.getElement('criticModelSelect')?.addEventListener('change', () => this.autoSaveSettings());
+        
+        // Auto-save on other setting changes
+        domManager.getElement('maxIterations')?.addEventListener('change', () => this.autoSaveSettings());
+        domManager.getElement('temperature')?.addEventListener('change', () => this.autoSaveSettings());
+        domManager.getElement('maxTokens')?.addEventListener('change', () => this.autoSaveSettings());
+        domManager.getElement('maxExecutionTime')?.addEventListener('change', () => this.autoSaveSettings());
+        // Custom rules handling - different behavior for global vs per-session
+        // Per-session rules (navbar) - don't auto-save to localStorage
+        domManager.getElement('customRules')?.addEventListener('input', () => {
+            // Per-session rules are not saved to localStorage
+            Logger.debug('Settings', 'Per-session custom rules updated');
+        });
+        
+        // Global rules (settings modal) - auto-save to localStorage
+        domManager.getElement('customRulesSettings')?.addEventListener('input', () => {
+            this.autoSaveSettings();
+        });
+        
+        // Settings tabs listeners
+        const tabButtons = document.querySelectorAll('.tab-button');
+        tabButtons.forEach(button => {
+            button.addEventListener('click', () => this.switchTab(button.dataset.tab));
+        });
+        
+        // Modal click-outside-to-close
+        window.addEventListener('click', (event) => {
+            if (event.target === domManager.getElement('settingsModal')) {
+                this.closeSettings();
+            }
+        });
+
+        // Clear all sessions button with retry mechanism
+        const setupClearAllButton = () => {
+            const clearAllBtn = document.getElementById('clearAllSessionsBtn');
+            console.log('[DEBUG] Clear all sessions button:', clearAllBtn);
+            if (clearAllBtn) {
+                clearAllBtn.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    console.log('[DEBUG] Clear all sessions button clicked');
+                    this.clearAllSessions();
+                });
+                console.log('[DEBUG] Clear all sessions button listener added');
+                return true;
+            } else {
+                console.error('[DEBUG] Clear all sessions button not found');
+                return false;
+            }
+        };
+        
+        // Try immediately
+        if (!setupClearAllButton()) {
+            // If not found, try again after a delay
+            setTimeout(() => {
+                setupClearAllButton();
+            }, 100);
+        }
+        
+        // Also add a global click handler as backup
+        document.addEventListener('click', (e) => {
+            if (e.target && e.target.id === 'clearAllSessionsBtn') {
+                e.preventDefault();
+                console.log('[DEBUG] Clear all sessions button clicked via global handler');
+                this.clearAllSessions();
+            }
+        });
+
+        Logger.debug('Settings', 'Event listeners set up');
+    }
+
+    initializePIPSMode() {
+        const pipsModeSwitch = domManager.getElement('pipsModeSwitch');
+        const agentRadio = domManager.getElement('pipsModeAgent');
+        const interactiveRadio = domManager.getElement('pipsModeInteractive');
+        
+        // Set Agent mode as default (will be overridden by loadUserSettingsFromStorage if user has saved settings)
+        if (pipsModeSwitch) {
+            pipsModeSwitch.checked = false; // Agent mode (unchecked state)
+        }
+        
+        // Ensure radio buttons are in sync with switch
+        if (agentRadio && interactiveRadio && pipsModeSwitch) {
+            const isInteractive = pipsModeSwitch.checked;
+            agentRadio.checked = !isInteractive;
+            interactiveRadio.checked = isInteractive;
+        }
+        
+        // Update the mode indicator
+        this.updateModeIndicator();
+        
+        Logger.debug('Settings', 'PIPS mode initialized to default (Agent)');
+    }
+
+    openSettings() {
+        domManager.getElement('settingsModal').style.display = 'block';
+        Logger.debug('Settings', 'Settings modal opened');
+    }
+
+    closeSettings() {
+        domManager.getElement('settingsModal').style.display = 'none';
+        Logger.debug('Settings', 'Settings modal closed');
+    }
+
+    saveSettings(e) {
+        e.preventDefault();
+        
+        try {
+            this.saveApiKeysToStorage();
+            // Persist non-sensitive user settings (exclude API keys and session rules) to localStorage
+            const { openai_api_key, google_api_key, anthropic_api_key, session_rules, ...nonSensitive } = this.getCurrentSettings();
+            storageManager.saveUserSettings(nonSensitive);
+            this.sendCurrentSettingsToServer();
+            Logger.debug('Settings', 'Settings saved successfully');
+        } catch (error) {
+            Logger.error('Settings', 'Error saving settings:', error);
+            domManager.updateStatus('Error saving settings', 'error');
+        }
+    }
+
+    // Auto-save settings to localStorage (without sending to server or showing status)
+    autoSaveSettings() {
+        try {
+            // Only save non-sensitive settings to localStorage
+            const { openai_api_key, google_api_key, anthropic_api_key, session_rules, ...nonSensitive } = this.getCurrentSettings();
+            // Remove session_rules from saved settings - they should not persist
+            storageManager.saveUserSettings(nonSensitive);
+            Logger.debug('Settings', 'Settings auto-saved to localStorage (excluding per-session rules)');
+        } catch (error) {
+            Logger.error('Settings', 'Error auto-saving settings:', error);
+        }
+    }
+
+    loadApiKeysFromStorage() {
+        try {
+            const apiKeys = storageManager.loadApiKeys();
+            
+            if (apiKeys.openai_api_key) {
+                domManager.getElement('openaiApiKeyInput').value = apiKeys.openai_api_key;
+            }
+            if (apiKeys.google_api_key) {
+                domManager.getElement('googleApiKeyInput').value = apiKeys.google_api_key;
+            }
+            if (apiKeys.anthropic_api_key) {
+                domManager.getElement('anthropicApiKeyInput').value = apiKeys.anthropic_api_key;
+            }
+            
+            Logger.debug('Settings', 'API keys loaded from storage');
+        } catch (error) {
+            Logger.error('Settings', 'Error loading API keys from storage:', error);
+        }
+    }
+
+    saveApiKeysToStorage() {
+        try {
+            const apiKeys = {
+                openai_api_key: domManager.getElement('openaiApiKeyInput').value.trim(),
+                google_api_key: domManager.getElement('googleApiKeyInput').value.trim(),
+                anthropic_api_key: domManager.getElement('anthropicApiKeyInput').value.trim()
+            };
+            
+            storageManager.saveApiKeys(apiKeys);
+            Logger.debug('Settings', 'API keys saved to storage');
+        } catch (error) {
+            Logger.error('Settings', 'Error saving API keys to storage:', error);
+        }
+    }
+
+    sendCurrentSettingsToServer() {
+        try {
+            const pipsModeSwitch = domManager.getElement('pipsModeSwitch');
+            const pipsMode = pipsModeSwitch?.checked ? 'INTERACTIVE' : 'AGENT';
+            
+            const settings = {
+                model: domManager.getElement('generatorModelSelect')?.value || 'gpt-4o-mini',
+                openai_api_key: domManager.getElement('openaiApiKeyInput').value.trim(),
+                google_api_key: domManager.getElement('googleApiKeyInput').value.trim(),
+                anthropic_api_key: domManager.getElement('anthropicApiKeyInput').value.trim(),
+                max_iterations: parseInt(domManager.getElement('maxIterations').value),
+                temperature: parseFloat(domManager.getElement('temperature').value),
+                max_tokens: parseInt(domManager.getElement('maxTokens').value),
+                max_execution_time: parseInt(domManager.getElement('maxExecutionTime').value),
+                // New PIPS interactive mode settings
+                pips_mode: pipsMode,
+                generator_model: domManager.getElement('generatorModelSelect')?.value || 'gpt-4o-mini',
+                critic_model: domManager.getElement('criticModelSelect')?.value || 'gpt-4o-mini',
+                // Send combined rules to backend and separate fields for internal tracking
+                custom_rules: this.getCombinedRulesForBackend(),
+                global_rules: domManager.getElement('customRulesSettings')?.value?.trim() || '',
+                session_rules: domManager.getElement('customRules')?.value?.trim() || ''
+            };
+            
+            socketManager.send('update_settings', settings);
+            Logger.debug('Settings', 'Settings sent to server:', settings);
+        } catch (error) {
+            Logger.error('Settings', 'Error sending settings to server:', error);
+        }
+    }
+
+    updateModeIndicator() {
+        const pipsModeSwitch = domManager.getElement('pipsModeSwitch');
+        const modeDescription = domManager.getElement('modeDescription');
+        const agentRadio = domManager.getElement('pipsModeAgent');
+        const interactiveRadio = domManager.getElement('pipsModeInteractive');
+        
+        if (pipsModeSwitch && modeDescription) {
+            const isInteractive = pipsModeSwitch.checked;
+            const selectedMode = isInteractive ? 'INTERACTIVE' : 'AGENT';
+            
+            // Update description text
+            modeDescription.textContent = isInteractive 
+                ? 'Collaborate with AI at each step'
+                : 'Automatic solving without user intervention';
+            
+            // Sync with hidden radio buttons for backend compatibility
+            if (agentRadio && interactiveRadio) {
+                agentRadio.checked = !isInteractive;
+                interactiveRadio.checked = isInteractive;
+            }
+            
+            Logger.debug('Settings', 'PIPS mode updated to:', selectedMode);
+        }
+    }
+
+    switchTab(tabName) {
+        // Remove active class from all tab buttons and content
+        document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
+        document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
+        
+        // Add active class to clicked tab button and corresponding content
+        document.querySelector(`[data-tab="${tabName}"]`)?.classList.add('active');
+        document.querySelector(`#${tabName}-tab`)?.classList.add('active');
+        
+        Logger.debug('Settings', 'Switched to tab:', tabName);
+    }
+
+    // Handle settings update response from server
+    handleSettingsUpdated(data) {
+        Logger.debug('Settings', 'Settings update response:', data);
+        
+        if (data.status === 'success') {
+            domManager.updateStatus('Settings saved successfully!', 'success');
+            this.closeSettings();
+        } else {
+            domManager.updateStatus(`Settings error: ${data.message}`, 'error');
+        }
+    }
+
+    // Load saved API keys and send to server (called on app initialization)
+    initializeServerSettings() {
+        const apiKeys = storageManager.loadApiKeys();
+        
+        if (apiKeys.openai_api_key || apiKeys.google_api_key) {
+            Logger.debug('Settings', 'Loading saved API keys and sending to server');
+            this.sendCurrentSettingsToServer();
+            domManager.updateStatus('API keys loaded from browser storage', 'success');
+        }
+    }
+
+    // Get current settings snapshot
+    getCurrentSettings() {
+        const pipsModeSwitch = domManager.getElement('pipsModeSwitch');
+        const pipsMode = pipsModeSwitch?.checked ? 'INTERACTIVE' : 'AGENT';
+        
+        return {
+            model: domManager.getElement('generatorModelSelect')?.value || 'gpt-4o-mini',
+            openai_api_key: domManager.getElement('openaiApiKeyInput')?.value?.trim(),
+            google_api_key: domManager.getElement('googleApiKeyInput')?.value?.trim(),
+            anthropic_api_key: domManager.getElement('anthropicApiKeyInput')?.value?.trim(),
+            max_iterations: parseInt(domManager.getElement('maxIterations')?.value),
+            temperature: parseFloat(domManager.getElement('temperature')?.value),
+            max_tokens: parseInt(domManager.getElement('maxTokens')?.value),
+            max_execution_time: parseInt(domManager.getElement('maxExecutionTime')?.value),
+            // PIPS interactive mode settings
+            pips_mode: pipsMode,
+            generator_model: domManager.getElement('generatorModelSelect')?.value || 'gpt-4o-mini',
+            critic_model: domManager.getElement('criticModelSelect')?.value || 'gpt-4o-mini',
+            // Send combined rules to backend and separate fields for internal tracking
+            custom_rules: this.getCombinedRulesForBackend(),
+            global_rules: domManager.getElement('customRulesSettings')?.value?.trim() || '',
+            session_rules: domManager.getElement('customRules')?.value?.trim() || ''
+        };
+    }
+
+    // Update settings programmatically
+    updateSettings(settings) {
+        if (settings.openai_api_key && domManager.getElement('openaiApiKeyInput')) {
+            domManager.getElement('openaiApiKeyInput').value = settings.openai_api_key;
+        }
+        if (settings.google_api_key && domManager.getElement('googleApiKeyInput')) {
+            domManager.getElement('googleApiKeyInput').value = settings.google_api_key;
+        }
+        if (settings.anthropic_api_key && domManager.getElement('anthropicApiKeyInput')) {
+            domManager.getElement('anthropicApiKeyInput').value = settings.anthropic_api_key;
+        }
+        if (settings.max_iterations && domManager.getElement('maxIterations')) {
+            domManager.getElement('maxIterations').value = settings.max_iterations;
+        }
+        if (settings.temperature !== undefined && domManager.getElement('temperature')) {
+            domManager.getElement('temperature').value = settings.temperature;
+        }
+        if (settings.max_tokens && domManager.getElement('maxTokens')) {
+            domManager.getElement('maxTokens').value = settings.max_tokens;
+        }
+        if (settings.max_execution_time && domManager.getElement('maxExecutionTime')) {
+            domManager.getElement('maxExecutionTime').value = settings.max_execution_time;
+        }
+        
+        // PIPS interactive mode settings
+        if (settings.pips_mode !== undefined) {
+            const pipsModeSwitch = domManager.getElement('pipsModeSwitch');
+            if (pipsModeSwitch) {
+                pipsModeSwitch.checked = settings.pips_mode === 'INTERACTIVE';
+                this.updateModeIndicator();
+            }
+        }
+        
+        // Model settings - handle both old 'model' field and new separate fields
+        if (settings.model && domManager.getElement('generatorModelSelect')) {
+            domManager.getElement('generatorModelSelect').value = settings.model;
+        }
+        if (settings.generator_model && domManager.getElement('generatorModelSelect')) {
+            domManager.getElement('generatorModelSelect').value = settings.generator_model;
+        }
+        if (settings.critic_model && domManager.getElement('criticModelSelect')) {
+            domManager.getElement('criticModelSelect').value = settings.critic_model;
+        }
+        // Handle global rules (persistent across sessions)
+        if (settings.global_rules !== undefined && domManager.getElement('customRulesSettings')) {
+            domManager.getElement('customRulesSettings').value = settings.global_rules;
+        }
+        
+        // Handle legacy custom_rules field for backward compatibility
+        if (settings.custom_rules !== undefined && settings.global_rules === undefined) {
+            if (domManager.getElement('customRulesSettings')) {
+                domManager.getElement('customRulesSettings').value = settings.custom_rules;
+            }
+        }
+        
+        // Per-session rules (navbar) are NOT loaded from storage - they reset with each session
+        
+        Logger.debug('Settings', 'Settings updated programmatically');
+    }
+
+    // Load user-selected settings (e.g., preferred model) from storage and apply them
+    loadUserSettingsFromStorage() {
+        try {
+            const settings = storageManager.loadUserSettings();
+            if (settings && Object.keys(settings).length > 0) {
+                // Load all settings including PIPS mode
+                this.updateSettings(settings);
+                Logger.debug('Settings', 'User settings loaded from storage');
+            }
+        } catch (error) {
+            Logger.error('Settings', 'Error loading user settings from storage:', error);
+        }
+    }
+
+    // Clear per-session rules (called when starting a new session)
+    clearPerSessionRules() {
+        const navbarElement = domManager.getElement('customRules');
+        if (navbarElement) {
+            navbarElement.value = '';
+            Logger.debug('Settings', 'Per-session custom rules cleared for new session');
+        }
+    }
+
+    // Get combined rules for sending to backend
+    getCombinedRulesForBackend() {
+        const globalRules = domManager.getElement('customRulesSettings')?.value?.trim() || '';
+        const sessionRules = domManager.getElement('customRules')?.value?.trim() || '';
+        
+        // Combine global and session rules
+        const rules = [];
+        if (globalRules) {
+            rules.push(`Global Rules:\n${globalRules}`);
+        }
+        if (sessionRules) {
+            rules.push(`Session Rules:\n${sessionRules}`);
+        }
+        
+        const combined = rules.join('\n\n');
+        
+        Logger.debug('Settings', 'Combined rules for backend:', {
+            global: globalRules,
+            session: sessionRules,
+            combined: combined
+        });
+        
+        return combined;
+    }
+
+    // Clear all sessions from the settings panel
+    clearAllSessions() {
+        console.log('[DEBUG] clearAllSessions method called');
+        if (confirm('Are you sure you want to permanently delete ALL session history? This action cannot be undone.')) {
+            try {
+                console.log('[DEBUG] User confirmed, clearing sessions');
+                
+                // Clear storage directly
+                storageManager.clearAllSessions();
+                
+                // Clear any current session state if accessible
+                if (window.appState) {
+                    window.appState.selectedSessionId = null;
+                    window.appState.currentSessionData = null;
+                }
+                
+                // Clear UI elements
+                const sessionsList = document.getElementById('sessionsList');
+                if (sessionsList) {
+                    sessionsList.innerHTML = '';
+                }
+                
+                // Clear inputs
+                const questionInput = document.getElementById('questionInput');
+                if (questionInput) {
+                    questionInput.value = '';
+                }
+                
+                // Clear image
+                const imagePreview = document.getElementById('imagePreview');
+                if (imagePreview) {
+                    imagePreview.style.display = 'none';
+                    imagePreview.src = '';
+                }
+                
+                // Clear chat area
+                const chatArea = document.getElementById('chatArea');
+                if (chatArea) {
+                    chatArea.innerHTML = `
+                        <div class="chat-message">
+                            <div class="message-header">
+                                <div class="message-avatar avatar-pips">P</div>
+                                <span class="message-sender">PIPS System</span>
+                            </div>
+                            <div class="message-content">
+                                Welcome to PIPS! Enter a problem in the left panel and click "Solve Problem" to get started. 
+                                Don't forget to configure your model settings first.
+                            </div>
+                        </div>
+                    `;
+                }
+                
+                domManager.updateStatus('All sessions cleared successfully', 'success');
+                Logger.debug('Settings', 'All sessions cleared from settings panel');
+                console.log('[DEBUG] All sessions cleared successfully');
+                
+            } catch (error) {
+                console.error('[DEBUG] Error clearing sessions:', error);
+                Logger.error('Settings', 'Error clearing sessions from settings:', error);
+                domManager.updateStatus('Error clearing sessions', 'error');
+            }
+        } else {
+            console.log('[DEBUG] User cancelled session clearing');
+        }
+    }
+}
+
+// Create singleton instance
+export const settingsManager = new SettingsManager(); 

src/pips/templates/index_modular.html

@@ -0,0 +1,337 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PIPS - Per-Instance Program Synthesis</title>
+    
+    <!-- External Dependencies -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.29.1/feather.min.css" rel="stylesheet">
+    
+    <!-- Modular CSS -->
+    <link href="{{ url_for('static', filename='css/main.css') }}" rel="stylesheet">
+    <link href="{{ url_for('static', filename='css/components/feedback.css') }}" rel="stylesheet">
+</head>
+<body>
+    <div class="container">
+        <!-- Left Panel - Input -->
+        <div class="left-panel">
+            <div class="header">
+                <h1>PIPS</h1>
+                <p>Per-Instance Program Synthesis</p>
+            </div>
+            
+            <div class="input-section">
+                <!-- New Session Button -->
+                <div class="form-group">
+                    <button id="newSessionBtn" class="btn btn-outline">
+                        <i data-feather="plus" style="width: 16px; height: 16px;"></i>
+                        Start New Session
+                    </button>
+                </div>
+                
+                <!-- PIPS Mode Selection (iOS-style switch) -->
+                <div class="form-group">
+                    <label for="questionInput" class="form-label">Problem Description</label>
+                    <textarea id="questionInput" placeholder="Enter your problem here... (e.g., 'What is the square root of 144?', 'Solve this math puzzle', etc.)"></textarea>
+                </div>
+                
+                <!-- PIPS Mode Selection (iOS-style switch) -->
+                <div class="form-group">
+                    <label class="form-label">PIPS Mode</label>
+                    <div class="ios-switch-container">
+                        <div class="ios-switch-wrapper">
+                            <input type="checkbox" id="pipsModeSwitch" class="ios-switch-input">
+                            <label for="pipsModeSwitch" class="ios-switch-label">
+                                <span class="ios-switch-slider">
+                                    <span class="ios-switch-text ios-switch-text-left">Interactive</span>
+                                    <span class="ios-switch-text ios-switch-text-right">Agent</span>
+                                </span>
+                            </label>
+                        </div>
+                        <div class="mode-description">
+                            <span id="modeDescription">Automatic solving without user intervention</span>
+                        </div>
+                    </div>
+                    <!-- Hidden radio buttons for backend compatibility -->
+                    <div style="display: none;">
+                        <input type="radio" name="pipsMode" value="AGENT" id="pipsModeAgent" checked>
+                        <input type="radio" name="pipsMode" value="INTERACTIVE" id="pipsModeInteractive">
+                    </div>
+                </div>
+
+                <!-- Custom Rules (for critic) -->
+                <div class="form-group">
+                    <label for="customRules" class="form-label">
+                        Per-Session Rules for AI Critic
+                        <small class="form-help-inline">(optional)</small>
+                    </label>
+                    <textarea id="customRules" 
+                              class="custom-rules-input"
+                              placeholder="Add rules specific to this session... (e.g., 'Must use only numpy functions for this problem', 'Optimize for memory usage', etc.)"
+                              rows="3"></textarea>
+                    <div class="form-help">These rules apply only to the current session and will be cleared when starting a new session</div>
+                </div>
+                
+                <div class="form-group">
+                    <label class="form-label">Attach Image (optional)</label>
+                    <div class="image-upload">
+                        <label for="imageInput" class="image-upload-btn">
+                            <i data-feather="image" style="width: 16px; height: 16px;"></i>
+                            Choose Image
+                        </label>
+                        <div class="image-upload-text">
+                            Or drag and drop an image here
+                        </div>
+                        <input type="file" id="imageInput" accept="image/*">
+                        <img id="imagePreview" class="image-preview" style="display: none;">
+                    </div>
+                    <div class="form-help">Upload an image to include visual context with your problem</div>
+                </div>
+                
+                <!-- Sessions Management Section -->
+                <div class="form-group">
+                    <div class="sessions-header">
+                        <label class="form-label">
+                            <i data-feather="clock" style="width: 16px; height: 16px; margin-right: 8px;"></i>
+                            Session History
+                        </label>
+                        <button type="button" class="sessions-toggle" id="sessionsToggle">
+                            <i data-feather="chevron-down" style="width: 16px; height: 16px;"></i>
+                        </button>
+                    </div>
+                    <div class="sessions-container" id="sessionsContainer">
+                        <div class="sessions-list" id="sessionsList">
+                            <!-- Sessions will be dynamically populated -->
+                        </div>
+                        <div class="sessions-actions">
+                            <button type="button" class="btn-session-action" id="clearSessionsBtn">
+                                <i data-feather="trash-2" style="width: 14px; height: 14px;"></i>
+                                Clear All
+                            </button>
+                            <button type="button" class="btn-session-action" id="importSessionsBtn">
+                                <i data-feather="upload" style="width: 14px; height: 14px;"></i>
+                                Import
+                            </button>
+                            <button type="button" class="btn-session-action" id="exportSessionsBtn">
+                                <i data-feather="download" style="width: 14px; height: 14px;"></i>
+                                Export
+                            </button>
+                            <input type="file" id="importSessionsInput" accept=".json" style="display: none;">
+                        </div>
+                    </div>
+                    <div class="form-help">Switch between past and current problem-solving sessions</div>
+                </div>
+                
+                <div class="button-group">
+                    <button id="solveBtn" class="btn btn-primary">
+                        <i data-feather="play" style="width: 16px; height: 16px;"></i>
+                        Solve Problem
+                    </button>
+                    <button id="interruptBtn" class="btn btn-danger" style="display: none;">
+                        <i data-feather="stop-circle" style="width: 16px; height: 16px;"></i>
+                        Stop
+                    </button>
+                    <button id="settingsBtn" class="btn btn-secondary">
+                        <i data-feather="settings" style="width: 16px; height: 16px;"></i>
+                        Settings
+                    </button>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Right Panel - Chat -->
+        <div class="right-panel">
+            <div class="status-bar" id="statusIndicator">
+                Ready to solve problems
+            </div>
+            
+            <div class="progress-container" id="progressContainer">
+                <div class="progress-bar">
+                    <div class="progress-fill" id="progressFill"></div>
+                </div>
+            </div>
+            
+            <div class="chat-area" id="chatArea">
+                <div class="chat-message">
+                    <div class="message-header">
+                        <div class="message-avatar avatar-pips">P</div>
+                        <span class="message-sender">PIPS System</span>
+                    </div>
+                    <div class="message-content">
+                        Welcome to PIPS! Enter a problem in the left panel and click "Solve Problem" to get started. 
+                        Don't forget to configure your model settings first.
+                        <br><br>
+                        <strong>New to PIPS?</strong> Check out the curated example sessions in the Session History panel on the left.
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Container for interactive feedback panels and final artifacts -->
+            <div class="chat-container" id="chat-container"></div>
+            
+            <div class="footer">
+                <div class="footer-info">
+                    <span id="sessionInfo">Session: Not connected</span>
+                </div>
+                <button id="downloadBtn" class="btn btn-secondary">
+                    <i data-feather="file-text" style="width: 16px; height: 16px;"></i>
+                    Download PDF
+                </button>
+            </div>
+        </div>
+    </div>
+    
+    <!-- Settings Modal -->
+    <div id="settingsModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2 class="modal-title">Settings</h2>
+                <span class="close">&times;</span>
+            </div>
+            
+            <div class="modal-body">
+                <!-- Settings Tabs -->
+                <div class="settings-tabs">
+                    <button type="button" class="tab-button active" data-tab="general">General</button>
+                    <button type="button" class="tab-button" data-tab="models">Models</button>
+                    <button type="button" class="tab-button" data-tab="rules">Custom Rules</button>
+                </div>
+
+                <form id="settingsForm">
+                    <!-- General Settings Tab -->
+                    <div class="tab-content active" id="general-tab">
+                        <div class="form-group">
+                            <label for="openaiApiKeyInput">OpenAI API Key</label>
+                            <input type="password" id="openaiApiKeyInput" placeholder="Enter your OpenAI API key (for GPT models)">
+                        </div>
+                        
+                        <div class="form-group">
+                            <label for="googleApiKeyInput">Google API Key</label>
+                            <input type="password" id="googleApiKeyInput" placeholder="Enter your Google API key (for Gemini models)">
+                        </div>
+                        
+                        <div class="form-group">
+                            <label for="anthropicApiKeyInput">Anthropic API Key</label>
+                            <input type="password" id="anthropicApiKeyInput" placeholder="Enter your Anthropic API key (for Claude models)">
+                        </div>
+                        
+                        <div class="form-group">
+                            <label>Problem Solving Method</label>
+                            <div class="form-help">
+                                PIPS now selects between iterative code generation and chain-of-thought reasoning automatically for each problem.
+                            </div>
+                        </div>
+                        
+                        <div class="form-group">
+                            <label for="maxIterations">Max Iterations</label>
+                            <input type="number" id="maxIterations" min="1" max="20" value="{{ default_settings.max_iterations }}">
+                        </div>
+                        
+                        <div class="form-group">
+                            <label for="temperature">Temperature</label>
+                            <input type="number" id="temperature" min="0" max="2" step="0.1" value="{{ default_settings.temperature }}">
+                        </div>
+                        
+                        <div class="form-group">
+                            <label for="maxTokens">Max Tokens</label>
+                            <input type="number" id="maxTokens" min="512" max="32768" step="512" value="{{ default_settings.max_tokens }}">
+                        </div>
+                        
+                        <div class="form-group">
+                            <label for="maxExecutionTime">Max Code Execution Time (seconds)</label>
+                            <input type="number" id="maxExecutionTime" min="1" max="60" value="{{ default_settings.max_execution_time }}">
+                            <small class="form-help">Maximum time to wait for code execution before timing out</small>
+                        </div>
+                        
+                        <div class="form-group">
+                            <label>Session Management</label>
+                            <button type="button" id="clearAllSessionsBtn" class="btn btn-danger" style="width: 100%;">
+                                <i data-feather="trash-2" style="width: 16px; height: 16px;"></i>
+                                Clear All Sessions
+                            </button>
+                            <small class="form-help">Permanently delete all session history and chat data</small>
+                        </div>
+                    </div>
+
+                    <!-- Models Settings Tab -->
+                    <div class="tab-content" id="models-tab">
+                        <div class="form-group">
+                            <label for="generatorModelSelect">Code Generator Model</label>
+                            <select id="generatorModelSelect">
+                                {% for model_id, model_name in available_models.items() %}
+                                <option value="{{ model_id }}" {% if model_id == default_settings.model %}selected{% endif %}>
+                                    {{ model_name }}
+                                </option>
+                                {% endfor %}
+                            </select>
+                            <small class="form-help">Model used for generating code solutions</small>
+                        </div>
+
+                        <div class="form-group">
+                            <label for="criticModelSelect">Code Critic Model</label>
+                            <select id="criticModelSelect">
+                                {% for model_id, model_name in available_models.items() %}
+                                <option value="{{ model_id }}" {% if model_id == default_settings.model %}selected{% endif %}>
+                                    {{ model_name }}
+                                </option>
+                                {% endfor %}
+                            </select>
+                            <small class="form-help">Model used for reviewing and critiquing generated code</small>
+                        </div>
+
+                        <div class="form-help">
+                            <p><strong>Tip:</strong> You can use different models for generation and criticism. For example, use a fast model for generation and a more powerful model for criticism.</p>
+                        </div>
+                    </div>
+
+                    <!-- Custom Rules Tab -->
+                    <div class="tab-content" id="rules-tab">
+                        <div class="form-group">
+                            <label for="customRulesSettings">Global Rules for AI Critic</label>
+                            <textarea id="customRulesSettings" 
+                                      class="custom-rules-input"
+                                      rows="8"
+                                      placeholder="Add global rules that apply to all sessions...
+
+Examples:
+• Must use only numpy functions for mathematical operations
+• Code should be optimized for performance over readability
+• Include comprehensive error handling
+• Follow PEP 8 style guidelines strictly
+• Use type hints for all function parameters"></textarea>
+                            <small class="form-help">These global rules persist across all sessions and are combined with any per-session rules you specify in the main interface.</small>
+                        </div>
+
+                        <div class="form-help">
+                            <p><strong>How it works:</strong> Global rules are saved and applied to all sessions, while per-session rules (from the main interface) apply only to the current session.</p>
+                            <p>The critic will use both types of rules along with its built-in knowledge when evaluating generated code.</p>
+                        </div>
+                    </div>
+                    
+                    <button type="submit" class="btn btn-primary" style="width: 100%;">
+                        <i data-feather="check" style="width: 16px; height: 16px;"></i>
+                        Save Settings
+                    </button>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    <!-- Feather Icons -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.29.1/feather.min.js"></script>
+    
+    <!-- PDF Generation -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
+    
+    <!-- Modular JavaScript -->
+    <script src="{{ url_for('static', filename='js/ui/interactive-feedback.js') }}"></script>
+    <script type="module" src="{{ url_for('static', filename='js/main.js') }}"></script>
+</body>
+</html> 

src/pips/utils.py

@@ -0,0 +1,131 @@
+"""
+Utility functions and data structures for PIPS.
+"""
+
+from dataclasses import dataclass
+from typing import Any, Optional
+from io import BytesIO
+import base64
+import contextlib
+import multiprocessing
+import timeout_decorator
+from io import StringIO
+from contextlib import redirect_stdout
+from PIL import Image
+
+
+@dataclass
+class RawInput:
+    """Dataclass to store raw input for a function."""
+    image_input: Optional[Image.Image]
+    text_input: Optional[str]
+
+
+def img2base64(img):
+    """Convert PIL Image to base64 string."""
+    buffer = BytesIO()
+    if img.mode != "RGB":
+        img = img.convert("RGB")
+
+    # if width or height < 28, resize it keeping aspect ratio
+    if img.width < 28 or img.height < 28:
+        # make smallest dimension 28
+        new_width = 28
+        new_height = 28
+        if img.width < img.height:
+            new_height = int((28 / img.width) * img.height)
+        else:
+            new_width = int((28 / img.height) * img.width)
+        img = img.resize((new_width, new_height))
+
+    img.save(buffer, format="JPEG")
+    return base64.b64encode(buffer.getvalue()).decode()
+
+
+def base642img(base64_str):
+    """Convert base64 string to PIL Image."""
+    imgdata = base64.b64decode(base64_str)
+    return Image.open(BytesIO(imgdata))
+
+
+@timeout_decorator.timeout(0.5)
+def my_exec(code, locs):
+    exec(code, locs, locs)
+
+
+def run_with_timeout(code, timeout, code_context=None):
+    """Execute code with timeout and capture output."""
+    def target(queue):
+        locs = {}  # Standard dictionary for local variables
+        locs["__name__"] = "__main__"
+        try:
+            if code_context:
+                exec(code_context, locs, locs)
+        except Exception as e:
+            pass
+
+        try:
+            # store stdout in a variable
+            f = StringIO()
+            with redirect_stdout(f):
+                exec(code, locs, locs)  # Execute the code with locs as locals
+            if "answer" in locs:
+                queue.put((locs.get("answer", None), f.getvalue()))  # Retrieve the value of "answer"
+            else:
+                queue.put((None, f.getvalue()))  # Retrieve the output
+        except Exception as e:
+            queue.put((f"Error: {e}", f.getvalue()))
+
+    queue = multiprocessing.Queue()  # Queue for communication
+    process = multiprocessing.Process(target=target, args=(queue,))
+    process.start()
+    process.join(timeout)
+
+    if process.is_alive():
+        process.terminate()
+        process.join()
+        return None, "", "Error: Code execution timed out"
+
+    # Retrieve result from the queue
+    if not queue.empty():
+        result = queue.get()
+        answer, stdout = result[0], result[1]
+        # Check if the answer indicates an error
+        if isinstance(answer, str) and answer.startswith("Error:"):
+            return None, stdout, answer  # Return error as the third element
+        else:
+            return answer, stdout, None  # No error
+    return None, "", None
+
+
+def python_eval(code: str, code_context: str = None, max_execution_time: int = 5):
+    """Evaluate Python code and return the result."""
+    try:
+        if "if __name__ == '__main__'" in code:
+            code = code.replace(
+                "if __name__ == '__main__':\n    main()",
+                "    return answer\nif __name__ == '__main__':\n    answer = main()",
+            )
+            code = code.replace(
+                'if __name__ == "__main__":\n    main()',
+                "    return answer\nif __name__ == '__main__':\n    answer = main()",
+            )
+            code = "answer = None\n" + code
+        if "main():" in code:
+            code += "\nmain()"
+        
+        return run_with_timeout(code, max_execution_time, code_context)
+    except Exception as e:
+        print("Exception:", e)
+        return "None", "", str(e)
+
+
+def eval_extracted_code(code):
+    """Evaluate extracted code and return the answer."""
+    try:
+        locs = {'__name__': '__main__'}
+        with contextlib.redirect_stdout(None):
+            exec(code, locs, locs)
+        return locs["answer"]
+    except Exception as e:
+        return "None" 

src/pips/web_app.py

@@ -0,0 +1,571 @@
+"""
+Flask-SocketIO server for the PIPS front-end.
+
+Matches the JS events used in index.html:
+    • session_connected
+    • settings_updated
+    • solving_started / step_update / llm_streaming_* / code_execution_* / code_check
+    • solving_complete / solving_error / solving_interrupted
+    • heartbeat_response
+    • download_chat_log
+"""
+
+from __future__ import annotations
+
+import json
+import os
+import threading
+import time
+from datetime import datetime
+from typing import Any, Dict
+
+from flask import Flask, render_template, request, jsonify
+from flask_socketio import SocketIO, emit
+
+# ─── project modules ────────────────────────────────────────────────────────────
+from .models import AVAILABLE_MODELS, get_model
+from .core   import PIPSSolver, PIPSMode
+from .utils  import RawInput, base642img
+# ────────────────────────────────────────────────────────────────────────────────
+
+# ---------------------------------------------------------------------
+# basic app setup
+# ---------------------------------------------------------------------
+app = Flask(__name__, template_folder="templates")
+app.config["SECRET_KEY"] = "change-me"         # ← customise for prod
+socketio = SocketIO(app, cors_allowed_origins="*")
+
+# ---------------------------------------------------------------------
+# server-side session state
+# ---------------------------------------------------------------------
+DEFAULT_SETTINGS = dict(
+    model               = next(iter(AVAILABLE_MODELS)),  # first model id
+    openai_api_key      = "",
+    google_api_key      = "",
+    anthropic_api_key   = "",
+    max_iterations      = 8,
+    temperature         = 0.0,
+    max_tokens          = 4096,
+    max_execution_time  = 10,
+    # New interactive mode settings
+    pips_mode           = "AGENT",                       # or "INTERACTIVE"
+    generator_model     = next(iter(AVAILABLE_MODELS)),  # can be different from critic
+    critic_model        = next(iter(AVAILABLE_MODELS)),  # can be different from generator
+    custom_rules        = "",                            # textarea value
+    prompt_overrides    = {},                            # persisted user edits keyed by prompt-id
+)
+
+sessions: Dict[str, Dict[str, Any]] = {}
+active_tasks: Dict[str, Dict[str, Any]] = {}
+
+def _safe(obj):
+    """JSON-serialise anything (fractions etc. become strings)."""
+    if obj is None or isinstance(obj, (str, int, float, bool)):
+        return obj
+    if isinstance(obj, list):
+        return [_safe(x) for x in obj]
+    if isinstance(obj, dict):
+        return {k: _safe(v) for k, v in obj.items()}
+    return str(obj)
+
+
+def make_callbacks(sid: str, generator_model_name: str, critic_model_name: str, stop_evt: threading.Event, max_exec: int):
+    """Build the callbacks dict required by PIPSSolver (stream=True)."""
+
+    def _emit(event: str, payload: dict):
+        # Force immediate emission without buffering
+        if event == "llm_streaming_token":
+            print(f"[DEBUG] Emitting token for session {sid}: '{payload.get('token', '')[:20]}...'")
+        elif event == "code_check_streaming_token":
+            print(f"[DEBUG] Emitting code reviewer token for session {sid}: '{payload.get('token', '')[:20]}...'")
+        else:
+            print(f"[DEBUG] Emitting {event} for session {sid}")
+        socketio.emit(event, payload, room=sid)
+        # Force flush the socket
+        socketio.sleep(0)  # This forces Flask-SocketIO to flush immediately
+
+    cb = dict(
+        # progress
+        on_step_update=lambda step, msg, iteration=None, prompt_details=None, **_: _emit(
+            "step_update", dict(step=step, message=msg, iteration=iteration, prompt_details=prompt_details)
+        ),
+
+        # streaming
+        on_llm_streaming_start=lambda it, m: _emit(
+            "llm_streaming_start", dict(iteration=it, model_name=generator_model_name)
+        ),
+        on_llm_streaming_token=lambda tok, it, m: _emit(
+            "llm_streaming_token", dict(token=tok, iteration=it, model_name=generator_model_name)
+        ),
+        on_llm_streaming_end=lambda it, m: _emit(
+            "llm_streaming_end", dict(iteration=it, model_name=generator_model_name)
+        ),
+
+        # code reviewer streaming
+        on_code_check_streaming_start=lambda it, m: _emit(
+            "code_check_streaming_start", dict(iteration=it, model_name=critic_model_name)
+        ),
+        on_code_check_streaming_token=lambda tok, it, m: _emit(
+            "code_check_streaming_token", dict(token=tok, iteration=it, model_name=critic_model_name)
+        ),
+        on_code_check_streaming_end=lambda it, m: _emit(
+            "code_check_streaming_end", dict(iteration=it, model_name=critic_model_name)
+        ),
+
+        # code execution lifecycle
+        on_code_execution_start=lambda it: _emit(
+            "code_execution_start", dict(iteration=it)
+        ),
+        on_code_execution_end=lambda it: _emit(
+            "code_execution_end", dict(iteration=it)
+        ),
+        on_code_execution=lambda it, out, stdout, err: _emit(
+            "code_execution",
+            dict(iteration=it, output=str(out), stdout=stdout, error=err),
+        ),
+
+        # Legacy on_code_check callback removed - now using streaming only
+
+        on_error=lambda msg: _emit("solving_error", dict(error=msg)),
+
+        # interruption / limits
+        check_interrupted=stop_evt.is_set,
+        get_max_execution_time=lambda: max_exec,
+        
+        # interactive mode callback
+        on_waiting_for_user=lambda iteration, critic_text, code, symbols: _emit(
+            "awaiting_user_feedback", 
+            dict(iteration=iteration, critic_text=critic_text, code=code, symbols=_safe(symbols))
+        ),
+    )
+    return cb
+
+
+# ========== routes =================================================================
+
+@app.route("/")
+def index():
+    return render_template(
+        "index_modular.html",
+        available_models=AVAILABLE_MODELS,
+        default_settings=DEFAULT_SETTINGS,
+    )
+
+
+# ========== socket events ===========================================================
+
+@socketio.on("connect")
+def on_connect():
+    sid = request.sid
+    sessions[sid] = dict(settings=DEFAULT_SETTINGS.copy(), chat=[])
+    emit("session_connected", {"session_id": sid})
+    print(f"[CONNECT] {sid}")
+
+
+@socketio.on("disconnect")
+def on_disconnect():
+    sid = request.sid
+    if sid in active_tasks:
+        active_tasks[sid]["event"].set()
+        active_tasks.pop(sid, None)
+    sessions.pop(sid, None)
+    print(f"[DISCONNECT] {sid}")
+
+
+@socketio.on("update_settings")
+def on_update_settings(data):
+    sid = request.sid
+    if sid not in sessions:
+        emit("settings_updated", {"status": "error", "message": "No session"})
+        return
+
+    sessions[sid]["settings"].update(data)
+    emit("settings_updated", {"status": "success", "settings": sessions[sid]["settings"]})
+
+
+@socketio.on("solve_problem")
+def on_solve_problem(data):
+    sid = request.sid
+    if sid not in sessions:
+        emit("solving_error", {"error": "Session vanished"})
+        return
+
+    text = (data.get("text") or "").strip()
+    if not text:
+        emit("solving_error", {"error": "Problem text is empty"})
+        return
+
+    img_b64 = data.get("image")
+    img = None
+    if img_b64 and img_b64.startswith("data:image"):
+        try:
+            img = base642img(img_b64.split(",", 1)[1])
+        except Exception as e:
+            emit("solving_error", {"error": f"Bad image: {e}"})
+            return
+
+    settings = sessions[sid]["settings"]
+    generator_model_id = settings.get("generator_model", settings["model"])
+    critic_model_id = settings.get("critic_model", settings["model"])
+    pips_mode = settings.get("pips_mode", "AGENT")
+    # Handle both new format (global_rules + session_rules) and legacy format (custom_rules)
+    global_rules = settings.get("global_rules", "")
+    session_rules = settings.get("session_rules", "")
+    legacy_custom_rules = settings.get("custom_rules", "")
+    
+    # Combine rules for the critic
+    combined_rules = []
+    if global_rules:
+        combined_rules.append(f"Global Rules:\n{global_rules}")
+    if session_rules:
+        combined_rules.append(f"Session Rules:\n{session_rules}")
+    if legacy_custom_rules and not global_rules and not session_rules:
+        # Backward compatibility
+        combined_rules.append(legacy_custom_rules)
+    
+    custom_rules = "\n\n".join(combined_rules)
+    
+    print(f"[DEBUG] Custom rules processing for session {sid}:")
+    print(f"  Global rules: {repr(global_rules)}")
+    print(f"  Session rules: {repr(session_rules)}")
+    print(f"  Legacy rules: {repr(legacy_custom_rules)}")
+    print(f"  Combined rules: {repr(custom_rules)}")
+
+    # Helper function to get API key for a model
+    def get_api_key_for_model(model_id):
+        if any(model_id.startswith(model) for model in ["gpt", "o3", "o4"]):
+            return settings.get("openai_api_key")
+        elif "gemini" in model_id:
+            return settings.get("google_api_key")
+        elif "claude" in model_id:
+            return settings.get("anthropic_api_key")
+        return None
+
+    # Validate API key for generator model upfront
+    generator_api_key = get_api_key_for_model(generator_model_id)
+    critic_api_key = get_api_key_for_model(critic_model_id)
+    
+    if not generator_api_key:
+        emit("solving_error", {"error": f"API key missing for generator model: {generator_model_id}"})
+        return
+
+    stop_evt = threading.Event()
+
+    def task():
+        try:
+            print(f"[DEBUG] Starting solving task for session {sid}")
+
+            sample = RawInput(text_input=text, image_input=img)
+
+            # Instantiate generator model
+            generator_model = get_model(generator_model_id, generator_api_key)
+
+            cbs = make_callbacks(
+                sid, generator_model_id, critic_model_id, stop_evt, settings["max_execution_time"]
+            )
+
+            print(f"[DEBUG] Emitting solving_started for session {sid}")
+            socketio.emit("solving_started", {}, room=sid)
+            socketio.sleep(0)  # Force flush
+
+            critic_model = generator_model
+            if critic_model_id != generator_model_id:
+                if critic_api_key:
+                    critic_model = get_model(critic_model_id, critic_api_key)
+                else:
+                    print(f"[DEBUG] Critic API key missing for {critic_model_id}; falling back to generator model for criticism.")
+
+            requested_interactive = (pips_mode == "INTERACTIVE")
+            solver = PIPSSolver(
+                generator_model,
+                max_iterations=settings["max_iterations"],
+                temperature=settings["temperature"],
+                max_tokens=settings["max_tokens"],
+                interactive=requested_interactive,
+                critic_model=critic_model,
+            )
+
+            decision_max_tokens = min(1024, settings["max_tokens"])
+            answer, logs, mode_decision_summary = solver.solve(
+                sample,
+                stream=True,
+                callbacks=cbs,
+                additional_rules=custom_rules,
+                decision_max_tokens=decision_max_tokens,
+                interactive_requested=requested_interactive,
+            )
+
+            use_code = mode_decision_summary.get("use_code", False)
+            if sid in sessions:
+                sessions[sid]["mode_decision"] = mode_decision_summary
+            print(
+                f"[DEBUG] Mode decision for session {sid}: "
+                f"use_code={use_code}, requested_interactive={requested_interactive}"
+            )
+
+            if use_code and critic_model_id != generator_model_id and not critic_api_key:
+                cbs["on_step_update"](
+                    "mode_selection",
+                    "Proceeding without a dedicated critic model because no API key was provided.",
+                    iteration=None,
+                )
+
+            if use_code:
+                print(f"[DEBUG] Used iterative code path for session {sid}")
+                # If interactive mode returned early (waiting for user), store solver in session
+                if requested_interactive and not answer and solver._checkpoint:
+                    if sid in sessions:
+                        sessions[sid]["solver"] = solver
+                    print(f"[DEBUG] Interactive mode - waiting for user feedback for session {sid}")
+                    return
+            else:
+                print(f"[DEBUG] Used chain-of-thought path for session {sid}")
+
+            if stop_evt.is_set():
+                print(f"[DEBUG] Task was interrupted for session {sid}")
+                socketio.emit("solving_interrupted", {"message": "Interrupted"}, room=sid)
+                return
+
+            print(f"[DEBUG] Solving completed, emitting final answer for session {sid}")
+
+            if not isinstance(logs, dict) or logs is None:
+                logs = {}  # ensure logs is a dict for augmentation
+            if isinstance(logs, dict):
+                logs.setdefault("mode_decision", mode_decision_summary)
+
+            # Extract final artifacts for display
+            latest_symbols = logs.get("all_symbols", [])[-1] if logs.get("all_symbols") else {}
+            latest_code = logs.get("all_programs", [])[-1] if logs.get("all_programs") else ""
+            
+            # Emit final artifacts
+            socketio.emit("final_artifacts", {
+                "symbols": _safe(latest_symbols),
+                "code": latest_code
+            }, room=sid)
+            
+            socketio.emit(
+                "solving_complete",
+                {
+                    "final_answer": answer,
+                    "logs": _safe(logs),
+                    "method": "iterative_code" if use_code else "chain_of_thought",
+                },
+                room=sid,
+            )
+            if sid in sessions:
+                sessions[sid].pop("mode_decision", None)
+
+        except Exception as exc:
+            print(f"[DEBUG] Exception in solving task for session {sid}: {exc}")
+            if sid in sessions:
+                sessions[sid].pop("mode_decision", None)
+            socketio.emit("solving_error", {"error": str(exc)}, room=sid)
+        finally:
+            print(f"[DEBUG] Cleaning up task for session {sid}")
+            active_tasks.pop(sid, None)
+
+    active_tasks[sid] = dict(event=stop_evt, task=socketio.start_background_task(task))
+
+
+@socketio.on("interrupt_solving")
+def on_interrupt(data=None):
+    sid = request.sid
+    if sid in active_tasks:
+        active_tasks[sid]["event"].set()
+        emit("solving_interrupted", {"message": "Stopped."})
+    else:
+        emit("solving_interrupted", {"message": "No active task."})
+
+
+@socketio.on("provide_feedback")
+def on_provide_feedback(data):
+    """Handle user feedback in interactive mode."""
+    sid = request.sid
+    if sid not in sessions:
+        emit("solving_error", {"error": "Session vanished"})
+        return
+    
+    solver = sessions[sid].get("solver")
+    if not solver or not solver._checkpoint:
+        emit("solving_error", {"error": "No interactive session waiting for feedback"})
+        return
+    
+    # Extract user feedback
+    user_feedback = {
+        "accept_critic": data.get("accept_critic", True),
+        "extra_comments": data.get("extra_comments", ""),
+        "quoted_ranges": data.get("quoted_ranges", []),
+        "terminate": data.get("terminate", False)
+    }
+    
+    def continue_task():
+        try:
+            print(f"[DEBUG] Continuing interactive task with user feedback for session {sid}")
+            
+            # Continue from checkpoint with user feedback
+            answer, logs = solver.continue_from_checkpoint(user_feedback)
+
+            mode_decision = sessions[sid].get("mode_decision") or getattr(solver, "_mode_decision_summary", None)
+            if not isinstance(logs, dict) or logs is None:
+                logs = {}
+            if isinstance(logs, dict) and mode_decision:
+                logs.setdefault("mode_decision", mode_decision)
+            
+            # Extract final artifacts
+            latest_symbols = logs.get("all_symbols", [])[-1] if logs.get("all_symbols") else {}
+            latest_code = logs.get("all_programs", [])[-1] if logs.get("all_programs") else ""
+            
+            # Emit final artifacts
+            socketio.emit("final_artifacts", {
+                "symbols": _safe(latest_symbols),
+                "code": latest_code
+            }, room=sid)
+            
+            # Emit completion
+            socketio.emit("solving_complete", {
+                "final_answer": answer,
+                "logs": _safe(logs),
+                "method": "iterative_code_interactive",
+            }, room=sid)
+            sessions[sid].pop("mode_decision", None)
+            
+        except Exception as exc:
+            print(f"[DEBUG] Exception in interactive continuation for session {sid}: {exc}")
+            socketio.emit("solving_error", {"error": str(exc)}, room=sid)
+            if sid in sessions:
+                sessions[sid].pop("mode_decision", None)
+        finally:
+            # Clean up
+            if sid in sessions:
+                sessions[sid].pop("solver", None)
+            active_tasks.pop(sid, None)
+    
+    # Start continuation task
+    active_tasks[sid] = dict(event=threading.Event(), task=socketio.start_background_task(continue_task))
+
+
+@socketio.on("terminate_session")
+def on_terminate_session(data=None):
+    """Handle user termination of interactive session."""
+    sid = request.sid
+    if sid not in sessions:
+        emit("solving_error", {"error": "Session vanished"})
+        return
+    
+    solver = sessions[sid].get("solver")
+    if not solver or not solver._checkpoint:
+        emit("solving_error", {"error": "No interactive session to terminate"})
+        return
+    
+    # Terminate with current state
+    user_feedback = {"terminate": True}
+    
+    def terminate_task():
+        try:
+            print(f"[DEBUG] Terminating interactive task for session {sid}")
+            
+            # Get final answer from checkpoint
+            answer, logs = solver.continue_from_checkpoint(user_feedback)
+
+            mode_decision = sessions[sid].get("mode_decision") or getattr(solver, "_mode_decision_summary", None)
+            if not isinstance(logs, dict) or logs is None:
+                logs = {}
+            if isinstance(logs, dict) and mode_decision:
+                logs.setdefault("mode_decision", mode_decision)
+            
+            # Extract final artifacts
+            latest_symbols = logs.get("all_symbols", [])[-1] if logs.get("all_symbols") else {}
+            latest_code = logs.get("all_programs", [])[-1] if logs.get("all_programs") else ""
+            
+            # Emit final artifacts
+            socketio.emit("final_artifacts", {
+                "symbols": _safe(latest_symbols),
+                "code": latest_code
+            }, room=sid)
+            
+            # Emit completion
+            socketio.emit("solving_complete", {
+                "final_answer": answer,
+                "logs": _safe(logs),
+                "method": "iterative_code_interactive_terminated",
+            }, room=sid)
+            sessions[sid].pop("mode_decision", None)
+            
+        except Exception as exc:
+            print(f"[DEBUG] Exception in interactive termination for session {sid}: {exc}")
+            socketio.emit("solving_error", {"error": str(exc)}, room=sid)
+            if sid in sessions:
+                sessions[sid].pop("mode_decision", None)
+        finally:
+            # Clean up
+            if sid in sessions:
+                sessions[sid].pop("solver", None)
+            active_tasks.pop(sid, None)
+    
+    # Start termination task
+    active_tasks[sid] = dict(event=threading.Event(), task=socketio.start_background_task(terminate_task))
+
+
+@socketio.on("switch_mode")
+def on_switch_mode(data):
+    """Handle switching between AGENT and INTERACTIVE modes."""
+    sid = request.sid
+    if sid not in sessions:
+        emit("solving_error", {"error": "Session vanished"})
+        return
+    
+    new_mode = data.get("mode", "AGENT")
+    if new_mode not in ["AGENT", "INTERACTIVE"]:
+        emit("solving_error", {"error": "Invalid mode"})
+        return
+    
+    # Update session settings
+    sessions[sid]["settings"]["pips_mode"] = new_mode
+    
+    emit("mode_switched", {"mode": new_mode})
+
+
+@socketio.on("heartbeat")
+def on_heartbeat(data):
+    emit("heartbeat_response", {"timestamp": data.get("timestamp"), "server_time": time.time()})
+
+
+@socketio.on("download_chat_log")
+def on_download_chat_log():
+    sid = request.sid
+    sess = sessions.get(sid)
+    if not sess:
+        emit("error", {"message": "Session missing"})
+        return
+
+    payload = dict(
+        session_id=sid,
+        timestamp=datetime.utcnow().isoformat(),
+        settings=_safe(sess["settings"]),
+        chat_history=_safe(sess["chat"]),
+    )
+    emit(
+        "chat_log_ready",
+        {
+            "filename": f"pips_chat_{sid[:8]}.json",
+            "content": json.dumps(payload, indent=2),
+        },
+    )
+
+
+# ========== public runner ==========================================================
+
+def run_app(host: str = "0.0.0.0", port: int = 8080, debug: bool = False):
+    os.makedirs("uploads", exist_ok=True)   # if you later add upload support
+    socketio.run(app, host=host, port=port, debug=debug)
+
+
+# ---------------------------------------------------------------------
+if __name__ == "__main__":       # script usage: python pips/web_app.py --port 5000
+    import argparse
+    ap = argparse.ArgumentParser()
+    ap.add_argument("--host", default="0.0.0.0")
+    ap.add_argument("--port", type=int, default=8080)
+    ap.add_argument("--debug", action="store_true")
+    args = ap.parse_args()
+    run_app(args.host, args.port, args.debug)