added custom puzzle page

backend/Example.txt

@@ -153,13 +153,13 @@ if s.check() == sat:
             block.append(Vars[cat_idx][i] != m[Vars[cat_idx][i]])
     s.add(Or(block))
     while s.check() == sat:
-      m = s.model()
-      cnt += 1
-      block = []
-      for cat_idx, (cat_name, item_list) in enumerate(categories):
-          for i in range(NUM_POSITIONS):
-              block.append(Vars[cat_idx][i] != m[Vars[cat_idx][i]])
-      s.add(Or(block))
+        m = s.model()
+        cnt += 1
+        block = []
+        for cat_idx, (cat_name, item_list) in enumerate(categories):
+            for i in range(NUM_POSITIONS):
+                block.append(Vars[cat_idx][i] != m[Vars[cat_idx][i]])
+        s.add(Or(block))
 
     if cnt == 1:
         # Output the solution as a JSON string.

backend/Example_multi.txt

@@ -0,0 +1,164 @@
+This is an example of representing a Zebra Puzzle using a Z3-based Python code:
+
+There are 5 Producers in this puzzle.
+
+Categories and possible items:
+  - Shirt: black, green, orange, pink, red
+  - Name: Barbara, Isabella, Jane, Nicole, Rachel
+  - Jam: apricot, cherry, fig, raspberry, watermelon
+  - Size: 10 oz, 12 oz, 14 oz, 20 oz, 6 oz
+  - Source: backyard, farmers' coop, local grocer, organic farm, wild pickings
+
+Clues:
+ - The producer whose jam comes from Wild pickings is in the fourth position.
+ - The producer selling Cherry jam is somewhere to the right of the one wearing a Green shirt.
+ - Isabella is selling Cherry jam.
+ - The producer wearing a Pink shirt is somewhere between the producer whose jam source is the Backyard and the one selling Watermelon jam, in that order.
+ - The producer selling 14 oz jars is somewhere to the right of the one wearing a Green shirt.
+ - The producer with 14 oz jars is next to the one selling Raspberry jam.
+ - The Raspberry jam producer is positioned at one of the ends.
+ - Barbara is next to the producer whose jam source is the Organic farm.
+ - Jane is located somewhere between Nicole and Isabella, in that order.
+ - The producer of Fig jam sources the fruit from an Organic farm.
+ - The producer with 10 oz jars is at one of the ends.
+ - The Raspberry jam producer is somewhere to the right of the one wearing a Green shirt.
+ - The producer with 12 oz jars is next to the one who has 6 oz jars.
+ - Isabella is next to the producer wearing a Black shirt.
+ - The producer with 6 oz jars is next to the one whose source is the Local grocer.
+ - The producer with 6 oz jars is in the second position.
+ - Rachel's source of fruit is the Farmers' coop.
+ - Barbara is next to Nicole.
+ - The producer wearing an Orange shirt gets her fruit from the Backyard.
+ - The producer with 12 oz jars is in the very first position.
+
+```python
+from z3 import *
+import json
+import sys
+
+# Define all categories in a single list of tuples:
+# (House is implicit; each row's first column will be the house number.)
+categories = [
+    ("Shirt", ["black", "green", "orange", "pink", "red"]),
+    ("Name", ["Barbara", "Isabella", "Jane", "Nicole", "Rachel"]),
+    ("Jam", ["apricot", "cherry", "fig", "raspberry", "watermelon"]),
+    ("Size", ["10 oz", "12 oz", "14 oz", "20 oz", "6 oz"]),
+    ("Source", ["backyard", "farmers' coop", "local grocer", "organic farm", "wild pickings"])
+]
+
+# No need to change here, automatically processing
+NUM_POSITIONS = len(categories[0][1])
+
+item_to_cat_and_index = {}
+for cat_idx, (cat_str, item_list) in enumerate(categories):
+    for item_idx, item_str in enumerate(item_list):
+        item_to_cat_and_index[(cat_str, item_str)] = (cat_idx, item_idx)
+
+Vars = []
+for cat_idx, (cat_name, item_list) in enumerate(categories):
+    var = IntVector(cat_name, len(item_list))
+    Vars.append(var)
+
+s = Solver()
+
+for cat_idx, (cat_name, item_list) in enumerate(categories):
+    for item_idx, item_str in enumerate(item_list):
+        s.add(Vars[cat_idx][item_idx] >= 1, Vars[cat_idx][item_idx] <= NUM_POSITIONS)
+    s.add(Distinct(Vars[cat_idx]))
+
+def pos(cat_str, item_str):
+    (cat_idx, item_idx) = item_to_cat_and_index[(cat_str, item_str)]
+    return Vars[cat_idx][item_idx]
+
+# All clues here
+# The producer whose jam comes from Wild pickings is in the fourth position.
+s.add(pos("Source", "wild pickings") == 4)
+
+# The producer selling Cherry jam is somewhere to the right of the one wearing a Green shirt.
+s.add(pos("Jam", "cherry") > pos("Shirt", "green"))
+
+# Isabella is selling Cherry jam.
+s.add(pos("Name", "Isabella") == pos("Jam", "cherry"))
+
+# The producer wearing a Pink shirt is somewhere between the producer whose jam source is the Backyard and the one selling Watermelon jam, in that order.
+s.add(And(pos("Source", "backyard") < pos("Shirt", "pink"), pos("Shirt", "pink") < pos("Jam", "watermelon")))
+
+# The producer selling 14 oz jars is somewhere to the right of the one wearing a Green shirt.
+s.add(pos("Size", "14 oz") > pos("Shirt", "green"))
+
+# The producer with 14 oz jars is next to the one selling Raspberry jam.
+s.add(Abs(pos("Size", "14 oz") - pos("Jam", "raspberry")) == 1)
+
+# The Raspberry jam producer is positioned at one of the ends.
+s.add(Or(pos("Jam", "raspberry") == 1, pos("Jam", "raspberry") == NUM_POSITIONS))
+
+# Barbara is next to the producer whose jam source is the Organic farm.
+s.add(Abs(pos("Name", "Barbara") - pos("Source", "organic farm")) == 1)
+
+# Jane is located somewhere between Nicole and Isabella, in that order.
+s.add(And(pos("Name", "Nicole") < pos("Name", "Jane"), pos("Name", "Jane") < pos("Name", "Isabella")))
+
+# The producer of Fig jam sources the fruit from an Organic farm.
+s.add(pos("Jam", "fig") == pos("Source", "organic farm"))
+
+# The producer with 10 oz jars is at one of the ends.
+s.add(Or(pos("Size", "10 oz") == 1, pos("Size", "10 oz") == NUM_POSITIONS))
+
+# The Raspberry jam producer is somewhere to the right of the one wearing a Green shirt.
+s.add(pos("Jam", "raspberry") > pos("Shirt", "green"))
+
+# The producer with 12 oz jars is next to the one who has 6 oz jars.
+s.add(Abs(pos("Size", "12 oz") - pos("Size", "6 oz")) == 1)
+
+# Isabella is next to the producer wearing a Black shirt.
+s.add(Abs(pos("Name", "Isabella") - pos("Shirt", "black")) == 1)
+
+# The producer with 6 oz jars is next to the one whose source is the Local grocer.
+s.add(Abs(pos("Size", "6 oz") - pos("Source", "local grocer")) == 1)
+
+# The producer with 6 oz jars is in the second position.
+s.add(pos("Size", "6 oz") == 2)
+
+# Rachel's source of fruit is the Farmers' coop.
+s.add(pos("Name", "Rachel") == pos("Source", "farmers' coop"))
+
+# Barbara is next to Nicole.
+s.add(Abs(pos("Name", "Barbara") - pos("Name", "Nicole")) == 1)
+
+# The producer wearing an Orange shirt gets her fruit from the Backyard.
+s.add(pos("Shirt", "orange") == pos("Source", "backyard"))
+
+# The producer with 12 oz jars is in the very first position.
+s.add(pos("Size", "12 oz") == 1)
+
+# Solve the puzzle
+if s.check() == sat:
+    while s.check() == sat:
+        m = s.model()
+        rows = []
+        header = ["House"] + [cat_name for cat_name, _ in categories]
+        for position in range(1, NUM_POSITIONS + 1):
+            row = [str(position)]
+            for cat_idx, (cat_name, item_list) in enumerate(categories):
+                for item_idx, item_str in enumerate(item_list):
+                    if m.evaluate(Vars[cat_idx][item_idx]).as_long() == position:
+                        row.append(item_str)
+                        break
+            rows.append(row)
+        result_dict = {"header": header, "rows": rows}
+        print(json.dumps(result_dict))
+
+        block = []
+        for cat_idx, (cat_name, item_list) in enumerate(categories):
+            for i in range(NUM_POSITIONS):
+                block.append(Vars[cat_idx][i] != m[Vars[cat_idx][i]])
+        s.add(Or(block))
+
+        if len(solutions) >= 10:
+            break
+else:
+    print("NO_SOLUTION")
+sys.stdout.flush()  # Force immediate output
+```
+
+Based on this example, write a similar Z3-based Python code by changing only categories and constraints to represent the puzzle given below.

backend/app.py

@@ -3,12 +3,15 @@ from flask_cors import CORS
 import os
 
 from puzzle_dataset import get_puzzle_by_index
-from solver import solve_puzzle
+from solver import solve_puzzle, solve_custom_puzzle
 
 BASE_DIR = os.path.dirname(os.path.abspath(__file__))
 example_path = os.path.join(BASE_DIR, "Example.txt")
 with open(example_path, "r", encoding="utf-8") as f:
     DEFAULT_SYS_CONTENT = f.read()
+example_multi_path = os.path.join(BASE_DIR, "Example_multi.txt")
+with open(example_multi_path, "r", encoding="utf-8") as f:
+    DEFAULT_SYS_CONTENT_MULTI = f.read()
 sat_cnt_path = os.path.join(BASE_DIR, "Sat_cnt.txt")
 with open(sat_cnt_path, "r", encoding="utf-8") as f:
     SAT_CNT_CONTENT = f.read()
@@ -55,9 +58,25 @@ def solve():
     result = solve_puzzle(puzzle_index, puzzle_text, expected_solution, sys_content, SAT_CNT_CONTENT)
     return jsonify({"success": True, "result": result})
 
+@app.route("/solve_custom", methods=["POST"])
+def solve_custom():
+    data = request.get_json()
+    puzzle_text = data.get("puzzle")
+    sys_content = data.get("sys_content", DEFAULT_SYS_CONTENT_MULTI)
+
+    if not puzzle_text:
+        return jsonify({"success": False, "error": "Missing puzzle text"}), 400
+
+    result = solve_custom_puzzle(puzzle_text, sys_content, SAT_CNT_CONTENT)
+    return jsonify({"success": True, "result": result})
+
 @app.route("/default_sys_content", methods=["GET"])
 def get_default_sys_content():
     return jsonify({"success": True, "sysContent": DEFAULT_SYS_CONTENT})
 
+@app.route("/default_sys_content_multi", methods=["GET"])
+def get_default_sys_content_multi():
+    return jsonify({"success": True, "sysContent": DEFAULT_SYS_CONTENT_MULTI})
+
 if __name__ == "__main__":
     app.run(host="0.0.0.0", port=7860, debug=False)

backend/solver.py

@@ -206,3 +206,85 @@ def solve_puzzle(index, puzzle, expected_solution, sys_content, sat_cnt_content)
         "modelResponse": content,
         "problematicConstraints": problematic_constraints
     }
+
+def solve_custom_puzzle(puzzle, sys_content, sat_cnt_content):
+    """
+    解决自定义谜题，返回所有可能的解
+    """
+    load_dotenv()
+    client = OpenAI(
+        api_key=os.getenv("GEMINI_API_KEY"),
+        base_url="https://generativelanguage.googleapis.com/v1beta/openai/"
+    )
+
+    messages = [
+        {"role": "user", "content": sys_content},
+        {"role": "user", "content": puzzle},
+    ]
+
+    attempts = 0
+    while attempts < 3:
+        messages.append({"role": "user", "content": "Make sure you stick to the given categories with strictly identical names otherwise there will be a critical error."})
+        attempts += 1
+        response = client.chat.completions.create(
+            model="gemini-2.0-flash",
+            messages=messages,
+            temperature=0.0,
+            stream=False
+        )
+        content = response.choices[0].message.content
+        messages.append(response.choices[0].message)
+
+        # 提取代码
+        code_blocks = re.findall(r"```(?:python)?(.*?)```", content, re.DOTALL)
+        if not code_blocks:
+            messages.append({"role": "user", "content": "Please write a complete Python code in your response. Try again."})
+            continue
+
+        code_to_run = code_blocks[-1].strip()
+        result = subprocess.run(
+            [sys.executable, "-c", code_to_run],
+            stdout=subprocess.PIPE,
+            stderr=subprocess.PIPE,
+            text=True
+        )
+
+        if result.stderr.strip():
+            messages.append({"role": "user", "content": f"Your code has errors: {result.stderr.strip()}. Please check your code and provide the complete code in the end."})
+            continue
+
+        output = result.stdout.strip()
+        try:
+            if output.startswith("NO_SOLUTION"):
+                return {
+                    "no_solution": True,
+                    "message": "No solution exists for this puzzle",
+                    "generatedCode": code_to_run
+                }
+            else:
+                solutions = []
+                for line in output.split('\n'):
+                    if line.strip():
+                        try:
+                            solution = json.loads(line)
+                            solutions.append(solution)
+                        except json.JSONDecodeError:
+                            continue
+                
+                if solutions:
+                    return {
+                        "solutions": solutions,
+                        "generatedCode": code_to_run
+                    }
+                else:
+                    messages.append({"role": "user", "content": "Your output is not valid JSON. Please ensure your code prints solutions as JSON dictionaries."})
+                    continue
+        except Exception as e:
+            messages.append({"role": "user", "content": f"Error processing output: {str(e)}. Please check your code format."})
+            continue
+
+    return {
+        "error": "Failed to solve puzzle after 3 attempts",
+        "generatedCode": code_to_run if 'code_to_run' in locals() else ""
+    }
+

frontend/src/App.css

@@ -431,6 +431,243 @@
   backdrop-filter: blur(10px);
 }
 
+/* Page Navigation */
+.page-navigation {
+  display: flex;
+  gap: 1rem;
+  margin-top: 2rem;
+  justify-content: center;
+}
+
+.nav-tab {
+  padding: 0.75rem 2rem;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-radius: 25px;
+  background: rgba(255, 255, 255, 0.1);
+  color: white;
+  font-size: 1rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  backdrop-filter: blur(10px);
+}
+
+.nav-tab:hover {
+  background: rgba(255, 255, 255, 0.2);
+  border-color: rgba(255, 255, 255, 0.5);
+}
+
+.nav-tab.active {
+  background: white;
+  color: #667eea;
+  border-color: white;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+}
+
+/* Custom Puzzle Page */
+.custom-puzzle-editor h3 {
+  margin-bottom: 0.5rem;
+  color: #333;
+}
+
+.puzzle-input-container {
+  margin-bottom: 2rem;
+}
+
+.custom-puzzle-textarea {
+  width: 100%;
+  min-height: 400px;
+  padding: 1rem;
+  border: 2px solid #e0e0e0;
+  border-radius: 8px;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  resize: vertical;
+  transition: border-color 0.3s ease;
+}
+
+.custom-puzzle-textarea:focus {
+  outline: none;
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.puzzle-examples {
+  background: #f8f9ff;
+  border-radius: 8px;
+  padding: 1.5rem;
+  border-left: 4px solid #667eea;
+}
+
+.puzzle-examples h4 {
+  margin-bottom: 1rem;
+  color: #333;
+}
+
+.puzzle-examples ul {
+  margin-left: 1.5rem;
+  color: #555;
+  line-height: 1.6;
+}
+
+.puzzle-examples li {
+  margin-bottom: 0.5rem;
+}
+
+/* Solution Navigator */
+.solution-navigator {
+  background: #f8f9fa;
+  border-radius: 10px;
+  padding: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+.solution-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+}
+
+.solution-header h3 {
+  margin: 0;
+  color: #333;
+}
+
+.solution-controls {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.btn-sm {
+  padding: 0.5rem 1rem;
+  font-size: 0.9rem;
+}
+
+.solution-pagination {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.pagination-btn {
+  width: 35px;
+  height: 35px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  background: white;
+  color: #666;
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.pagination-btn:hover {
+  background: #f0f0f0;
+}
+
+.pagination-btn.active {
+  background: #667eea;
+  color: white;
+  border-color: #667eea;
+}
+
+.solution-display {
+  background: white;
+  border-radius: 8px;
+  padding: 1rem;
+  border: 1px solid #e0e0e0;
+}
+
+.solution-info {
+  margin-bottom: 1rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid #eee;
+}
+
+.solution-counter {
+  color: #666;
+  font-weight: 500;
+}
+
+.solution-table-container {
+  overflow-x: auto;
+}
+
+.solution-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9rem;
+}
+
+.solution-table th,
+.solution-table td {
+  padding: 0.75rem;
+  text-align: left;
+  border: 1px solid #ddd;
+}
+
+.solution-table th {
+  background: #f8f9fa;
+  font-weight: 600;
+  color: #333;
+}
+
+.solution-table tr:nth-child(even) {
+  background: #f9f9f9;
+}
+
+.solution-table tr:hover {
+  background: #f0f4ff;
+}
+
+.solution-json {
+  background: #f8f9fa;
+  border-radius: 6px;
+  padding: 1rem;
+  overflow-x: auto;
+}
+
+.solution-json pre {
+  margin: 0;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 0.85rem;
+  line-height: 1.4;
+}
+
+/* Error Section */
+.error-section {
+  margin-top: 2rem;
+}
+
+.error-section h3 {
+  margin-bottom: 1rem;
+  color: #dc3545;
+}
+
+.error-display {
+  background: #fff5f5;
+  border: 1px solid #fed7d7;
+  border-radius: 8px;
+  padding: 1rem;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.error-display pre {
+  margin: 0;
+  color: #c53030;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  white-space: pre-wrap;
+}
+
+.result-value.warning {
+  color: #f56500;
+}
+
 /* Responsive Design */
 @media (max-width: 768px) {
   .app-header h1 {
@@ -460,6 +697,33 @@
     flex-direction: column;
     gap: 1rem;
   }
+  
+  .page-navigation {
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .nav-tab {
+    width: 200px;
+    text-align: center;
+  }
+  
+  .solution-header {
+    flex-direction: column;
+    gap: 1rem;
+    align-items: stretch;
+  }
+  
+  .solution-controls {
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+  
+  .solution-pagination {
+    max-width: 100%;
+    overflow-x: auto;
+    padding: 0.5rem 0;
+  }
 }
 
 @media (max-width: 480px) {
@@ -475,4 +739,18 @@
     padding: 0.5rem 1rem;
     font-size: 0.9rem;
   }
+  
+  .custom-puzzle-textarea {
+    min-height: 300px;
+    font-size: 0.8rem;
+  }
+  
+  .solution-table {
+    font-size: 0.8rem;
+  }
+  
+  .solution-table th,
+  .solution-table td {
+    padding: 0.5rem;
+  }
 }

frontend/src/App.js

@@ -1,125 +1,19 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import './App.css';
+import PredefinedPuzzlePage from './pages/PredefinedPuzzlePage';
+import CustomPuzzlePage from './pages/CustomPuzzlePage';
 
 function App() {
-  // For puzzle index and puzzle data
-  const [puzzleIndex, setPuzzleIndex] = useState(0);
-  const [puzzleText, setPuzzleText] = useState("");
-  const [expectedSolution, setExpectedSolution] = useState(null);
-
-  // sysContent can be editted, default using Example.txt
-  const [sysContent, setSysContent] = useState("");
-
-  // Interaction results
-  const [generatedCode, setGeneratedCode] = useState("");
-  const [executionSuccess, setExecutionSuccess] = useState(null);
-  const [attempts, setAttempts] = useState(0);
-  const [isSolving, setIsSolving] = useState(false);
-  const [problematicConstraints, setProblematicConstraints] = useState("");
-
-  // UI state
-  const [currentStep, setCurrentStep] = useState(1);
-  const [expandedSections, setExpandedSections] = useState({
-    puzzle: true,
-    sysContent: false,
-    result: false
-  });
-
-  // Frontend fetch sysContent in default
-  useEffect(() => {
-    fetch(`/default_sys_content`)
-      .then(res => res.json())
-      .then(data => {
-        if(data.success) {
-          setSysContent(data.sysContent);
-        }
-      })
-      .catch(e => console.error(e));
-  }, []);
-
-  // When puzzleIndex changing，auto get puzzle
-  useEffect(() => {
-    fetch(`/get_puzzle?index=${puzzleIndex}`)
-      .then(res => res.json())
-      .then(data => {
-        if(data.success) {
-          setPuzzleText(data.puzzle);
-          setExpectedSolution(data.expected_solution);
-        } else {
-          console.error("Failed to fetch puzzle", data.error);
-          setPuzzleText("");
-          setExpectedSolution(null);
-        }
-      })
-      .catch(e => console.error(e));
-  }, [puzzleIndex]);
-
-  const handleSolve = () => {
-    if(!puzzleText || !expectedSolution) {
-      alert("puzzle or expectedSolution incomplete");
-      return;
-    }
-    const payload = {
-      index: puzzleIndex,
-      puzzle: puzzleText,
-      expected_solution: expectedSolution,
-      sys_content: sysContent,
-      problematic_constraints: problematicConstraints
-    };
-
-    setIsSolving(true);
-    setCurrentStep(3);
-    setExpandedSections({...expandedSections, result: true});
-
-    fetch(`/solve`, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(payload)
-    })
-    .then(res => res.json())
-    .then(data => {
-      if(!data.success) {
-        alert("Backend error: " + data.error);
-        return;
-      }
-      const result = data.result;
-      setGeneratedCode(result.generatedCode || "");
-      setExecutionSuccess(result.success);
-      setAttempts(result.attempts || 0);
-      setProblematicConstraints(result.problematicConstraints || "");
-    })
-    .catch(e => console.error(e))
-    .finally(() => {
-      setIsSolving(false);
-    });
-  };
-
-  const toggleSection = (section) => {
-    setExpandedSections({
-      ...expandedSections,
-      [section]: !expandedSections[section]
-    });
-  };
-
-  const nextStep = () => {
-    if (currentStep < 3) {
-      setCurrentStep(currentStep + 1);
-      if (currentStep === 1) {
-        setExpandedSections({puzzle: false, sysContent: true, result: false});
-      } else if (currentStep === 2) {
-        setExpandedSections({puzzle: false, sysContent: false, result: true});
-      }
-    }
-  };
-
-  const prevStep = () => {
-    if (currentStep > 1) {
-      setCurrentStep(currentStep - 1);
-      if (currentStep === 2) {
-        setExpandedSections({puzzle: true, sysContent: false, result: false});
-      } else if (currentStep === 3) {
-        setExpandedSections({puzzle: false, sysContent: true, result: false});
-      }
+  const [currentPage, setCurrentPage] = useState('predefined');
+
+  const renderPage = () => {
+    switch (currentPage) {
+      case 'predefined':
+        return <PredefinedPuzzlePage />;
+      case 'custom':
+        return <CustomPuzzlePage />;
+      default:
+        return <PredefinedPuzzlePage />;
     }
   };
 
@@ -128,181 +22,25 @@ function App() {
       <header className="app-header">
         <h1>🦓 Zebra Puzzle Solver</h1>
         <p>Solve complex logic puzzles using AI-powered constraint satisfaction</p>
+        
+        {/* Navigation Tabs */}
+        <nav className="page-navigation">
+          <button 
+            className={`nav-tab ${currentPage === 'predefined' ? 'active' : ''}`}
+            onClick={() => setCurrentPage('predefined')}
+          >
+            📚 Predefined Puzzles
+          </button>
+          <button 
+            className={`nav-tab ${currentPage === 'custom' ? 'active' : ''}`}
+            onClick={() => setCurrentPage('custom')}
+          >
+            ✏️ Custom Puzzle
+          </button>
+        </nav>
       </header>
 
-      {/* Progress Steps */}
-      <div className="progress-container">
-        <div className="progress-steps">
-          <div className={`step ${currentStep >= 1 ? 'active' : ''}`}>
-            <div className="step-number">1</div>
-            <div className="step-label">Select Puzzle</div>
-          </div>
-          <div className={`step ${currentStep >= 2 ? 'active' : ''}`}>
-            <div className="step-number">2</div>
-            <div className="step-label">Configure System</div>
-          </div>
-          <div className={`step ${currentStep >= 3 ? 'active' : ''}`}>
-            <div className="step-number">3</div>
-            <div className="step-label">Solve & Results</div>
-          </div>
-        </div>
-      </div>
-
-      <main className="main-content">
-        {/* Step 1: Puzzle Selection */}
-        <section className={`content-section ${expandedSections.puzzle ? 'expanded' : 'collapsed'}`}>
-          <div className="section-header" onClick={() => toggleSection('puzzle')}>
-            <h2>📋 Puzzle Selection</h2>
-            <span className="toggle-icon">{expandedSections.puzzle ? '▼' : '▶'}</span>
-          </div>
-          
-          {expandedSections.puzzle && (
-            <div className="section-content">
-              <div className="puzzle-selector">
-                <label htmlFor="puzzle-index">Choose puzzle index (0 - 999):</label>
-                <div className="input-group">
-                  <input
-                    id="puzzle-index"
-                    type="number"
-                    value={puzzleIndex}
-                    onChange={(e) => setPuzzleIndex(Number(e.target.value))}
-                    min={0}
-                    max={999}
-                    className="number-input"
-                  />
-                  <button 
-                    onClick={() => setPuzzleIndex(puzzleIndex)} 
-                    className="btn btn-secondary"
-                  >
-                    Load Puzzle
-                  </button>
-                </div>
-              </div>
-
-              <div className="puzzle-display">
-                <div className="puzzle-text">
-                  <h3>📄 Puzzle Text</h3>
-                  <div className="text-display">
-                    {puzzleText || "Loading puzzle..."}
-                  </div>
-                </div>
-
-                <div className="expected-solution">
-                  <h3>🎯 Expected Solution</h3>
-                  <div className="json-display">
-                    {expectedSolution ? (
-                      <pre>{JSON.stringify(expectedSolution, null, 2)}</pre>
-                    ) : (
-                      "Loading solution..."
-                    )}
-                  </div>
-                </div>
-              </div>
-            </div>
-          )}
-        </section>
-
-        {/* Step 2: System Configuration */}
-        <section className={`content-section ${expandedSections.sysContent ? 'expanded' : 'collapsed'}`}>
-          <div className="section-header" onClick={() => toggleSection('sysContent')}>
-            <h2>⚙️ System Configuration</h2>
-            <span className="toggle-icon">{expandedSections.sysContent ? '▼' : '▶'}</span>
-          </div>
-          
-          {expandedSections.sysContent && (
-            <div className="section-content">
-              <div className="sys-content-editor">
-                <h3>📝 System Content</h3>
-                <p className="description">
-                  Edit the system prompt that will guide the AI in solving the puzzle:
-                </p>
-                <textarea
-                  value={sysContent}
-                  onChange={(e) => setSysContent(e.target.value)}
-                  className="sys-content-textarea"
-                  placeholder="Enter system content..."
-                />
-              </div>
-            </div>
-          )}
-        </section>
-
-        {/* Step 3: Solve & Results */}
-        <section className={`content-section ${expandedSections.result ? 'expanded' : 'collapsed'}`}>
-          <div className="section-header" onClick={() => toggleSection('result')}>
-            <h2>🚀 Solve & Results</h2>
-            <span className="toggle-icon">{expandedSections.result ? '▼' : '▶'}</span>
-          </div>
-          
-          {expandedSections.result && (
-            <div className="section-content">
-              <div className="solve-section">
-                <button 
-                  onClick={handleSolve} 
-                  disabled={isSolving || !puzzleText || !expectedSolution}
-                  className={`btn btn-primary solve-btn ${isSolving ? 'loading' : ''}`}
-                >
-                  {isSolving ? '🔄 Solving...' : '🧠 Solve Puzzle with AI'}
-                </button>
-              </div>
-
-              <div className="results-section">
-                <div className="result-summary">
-                  <div className="result-item">
-                    <span className="result-label">Status:</span>
-                    <span className={`result-value ${executionSuccess === true ? 'success' : executionSuccess === false ? 'error' : 'pending'}`}>
-                      {executionSuccess === null ? "⏳ Pending" : executionSuccess ? "✅ Success" : "❌ Failed"}
-                    </span>
-                  </div>
-                  <div className="result-item">
-                    <span className="result-label">Attempts:</span>
-                    <span className="result-value">{attempts}</span>
-                  </div>
-                </div>
-
-                {problematicConstraints && (
-                  <div className="issues-section">
-                    <h3>⚠️ Issues & Analysis</h3>
-                    <div className="issues-display">
-                      <pre>{problematicConstraints}</pre>
-                    </div>
-                  </div>
-                )}
-
-                {generatedCode && (
-                  <div className="code-section">
-                    <h3>💻 Generated Code</h3>
-                    <div className="code-display">
-                      <pre><code>{generatedCode}</code></pre>
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-          )}
-        </section>
-      </main>
-
-      {/* Navigation */}
-      <nav className="navigation">
-        <button 
-          onClick={prevStep} 
-          disabled={currentStep <= 1}
-          className="btn btn-outline"
-        >
-          ← Previous
-        </button>
-        <span className="step-indicator">
-          Step {currentStep} of 3
-        </span>
-        <button 
-          onClick={nextStep} 
-          disabled={currentStep >= 3}
-          className="btn btn-outline"
-        >
-          Next →
-        </button>
-      </nav>
+      {renderPage()}
     </div>
   );
 }

frontend/src/components/SolutionNavigator.js

@@ -0,0 +1,102 @@
+import React from 'react';
+
+function SolutionNavigator({ solutions, currentIndex, onIndexChange }) {
+  if (!solutions || solutions.length === 0) {
+    return null;
+  }
+
+  const currentSolution = solutions[currentIndex];
+
+  const nextSolution = () => {
+    if (currentIndex < solutions.length - 1) {
+      onIndexChange(currentIndex + 1);
+    }
+  };
+
+  const prevSolution = () => {
+    if (currentIndex > 0) {
+      onIndexChange(currentIndex - 1);
+    }
+  };
+
+  const goToSolution = (index) => {
+    onIndexChange(index);
+  };
+
+  return (
+    <div className="solution-navigator">
+      <div className="solution-header">
+        <h3>🎯 Solutions ({solutions.length} found)</h3>
+        
+        {solutions.length > 1 && (
+          <div className="solution-controls">
+            <button 
+              onClick={prevSolution} 
+              disabled={currentIndex <= 0}
+              className="btn btn-sm btn-outline"
+            >
+              ← Previous
+            </button>
+            
+            <div className="solution-pagination">
+              {solutions.map((_, index) => (
+                <button
+                  key={index}
+                  onClick={() => goToSolution(index)}
+                  className={`pagination-btn ${index === currentIndex ? 'active' : ''}`}
+                >
+                  {index + 1}
+                </button>
+              ))}
+            </div>
+            
+            <button 
+              onClick={nextSolution} 
+              disabled={currentIndex >= solutions.length - 1}
+              className="btn btn-sm btn-outline"
+            >
+              Next →
+            </button>
+          </div>
+        )}
+      </div>
+
+      <div className="solution-display">
+        <div className="solution-info">
+          <span className="solution-counter">
+            Solution {currentIndex + 1} of {solutions.length}
+          </span>
+        </div>
+        
+        <div className="solution-table-container">
+          {currentSolution.header && currentSolution.rows ? (
+            <table className="solution-table">
+              <thead>
+                <tr>
+                  {currentSolution.header.map((header, index) => (
+                    <th key={index}>{header}</th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {currentSolution.rows.map((row, rowIndex) => (
+                  <tr key={rowIndex}>
+                    {row.map((cell, cellIndex) => (
+                      <td key={cellIndex}>{cell}</td>
+                    ))}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          ) : (
+            <div className="solution-json">
+              <pre>{JSON.stringify(currentSolution, null, 2)}</pre>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default SolutionNavigator;

frontend/src/pages/CustomPuzzlePage.js

@@ -0,0 +1,321 @@
+import React, { useState, useEffect } from 'react';
+import SolutionNavigator from '../components/SolutionNavigator';
+
+function CustomPuzzlePage() {
+  // Custom puzzle input
+  const [customPuzzleText, setCustomPuzzleText] = useState("");
+  const [sysContent, setSysContent] = useState("");
+
+  // Results
+  const [solutions, setSolutions] = useState([]);
+  const [currentSolutionIndex, setCurrentSolutionIndex] = useState(0);
+  const [generatedCode, setGeneratedCode] = useState("");
+  const [isSolving, setIsSolving] = useState(false);
+  const [solutionStatus, setSolutionStatus] = useState(""); // "success", "no_solution", "error"
+  const [errorMessage, setErrorMessage] = useState("");
+
+  // UI state
+  const [currentStep, setCurrentStep] = useState(1);
+  const [expandedSections, setExpandedSections] = useState({
+    puzzle: true,
+    sysContent: false,
+    result: false
+  });
+
+  // Load default system content
+  useEffect(() => {
+    fetch(`/default_sys_content_multi`)
+      .then(res => res.json())
+      .then(data => {
+        if(data.success) {
+          setSysContent(data.sysContent);
+        }
+      })
+      .catch(e => console.error(e));
+  }, []);
+
+  const handleSolveCustom = () => {
+    if(!customPuzzleText.trim()) {
+      alert("Please enter a puzzle text");
+      return;
+    }
+
+    const payload = {
+      puzzle: customPuzzleText,
+      sys_content: sysContent,
+      custom: true
+    };
+
+    setIsSolving(true);
+    setCurrentStep(3);
+    setExpandedSections({puzzle: false, sysContent: false, result: true});
+    setSolutions([]);
+    setCurrentSolutionIndex(0);
+    setSolutionStatus("");
+    setErrorMessage("");
+
+    fetch(`/solve_custom`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(payload)
+    })
+    .then(res => res.json())
+    .then(data => {
+      if(!data.success) {
+        setErrorMessage("Backend error: " + data.error);
+        setSolutionStatus("error");
+        return;
+      }
+      
+      const result = data.result;
+      setGeneratedCode(result.generatedCode || "");
+      
+      if (result.solutions && result.solutions.length > 0) {
+        setSolutions(result.solutions);
+        setSolutionStatus("success");
+        setCurrentSolutionIndex(0);
+      } else if (result.no_solution) {
+        setSolutionStatus("no_solution");
+        setErrorMessage(result.message || "No solution found for this puzzle");
+      } else {
+        setSolutionStatus("error");
+        setErrorMessage(result.error || "Unknown error occurred");
+      }
+    })
+    .catch(e => {
+      console.error(e);
+      setErrorMessage("Network error: " + e.message);
+      setSolutionStatus("error");
+    })
+    .finally(() => {
+      setIsSolving(false);
+    });
+  };
+
+  const toggleSection = (section) => {
+    setExpandedSections({
+      ...expandedSections,
+      [section]: !expandedSections[section]
+    });
+  };
+
+  const nextStep = () => {
+    if (currentStep < 3) {
+      setCurrentStep(currentStep + 1);
+      if (currentStep === 1) {
+        setExpandedSections({puzzle: false, sysContent: true, result: false});
+      } else if (currentStep === 2) {
+        setExpandedSections({puzzle: false, sysContent: false, result: true});
+      }
+    }
+  };
+
+  const prevStep = () => {
+    if (currentStep > 1) {
+      setCurrentStep(currentStep - 1);
+      if (currentStep === 2) {
+        setExpandedSections({puzzle: true, sysContent: false, result: false});
+      } else if (currentStep === 3) {
+        setExpandedSections({puzzle: false, sysContent: true, result: false});
+      }
+    }
+  };
+
+  return (
+    <>
+      {/* Progress Steps */}
+      <div className="progress-container">
+        <div className="progress-steps">
+          <div className={`step ${currentStep >= 1 ? 'active' : ''}`}>
+            <div className="step-number">1</div>
+            <div className="step-label">Create Puzzle</div>
+          </div>
+          <div className={`step ${currentStep >= 2 ? 'active' : ''}`}>
+            <div className="step-number">2</div>
+            <div className="step-label">Configure System</div>
+          </div>
+          <div className={`step ${currentStep >= 3 ? 'active' : ''}`}>
+            <div className="step-number">3</div>
+            <div className="step-label">Solve & Results</div>
+          </div>
+        </div>
+      </div>
+
+      <main className="main-content">
+        {/* Step 1: Custom Puzzle Input */}
+        <section className={`content-section ${expandedSections.puzzle ? 'expanded' : 'collapsed'}`}>
+          <div className="section-header" onClick={() => toggleSection('puzzle')}>
+            <h2>✏️ Custom Puzzle Creation</h2>
+            <span className="toggle-icon">{expandedSections.puzzle ? '▼' : '▶'}</span>
+          </div>
+          
+          {expandedSections.puzzle && (
+            <div className="section-content">
+              <div className="custom-puzzle-editor">
+                <h3>📝 Puzzle Description</h3>
+                <p className="description">
+                  Enter your custom zebra puzzle. Include categories, items, and constraints:
+                </p>
+                <div className="puzzle-input-container">
+                  <textarea
+                    value={customPuzzleText}
+                    onChange={(e) => setCustomPuzzleText(e.target.value)}
+                    className="custom-puzzle-textarea"
+                    placeholder="Example:
+There are 5 houses in a row.
+
+Categories:
+- Color: red, blue, green, yellow, white
+- Name: Alice, Bob, Carol, Dave, Eve
+- Pet: cat, dog, fish, bird, rabbit
+- Drink: tea, coffee, milk, juice, water
+- Sport: tennis, soccer, golf, swimming, running
+
+Constraints:
+1. The person in the red house owns a cat.
+2. Alice drinks tea.
+3. The green house is to the left of the white house.
+..."
+                  />
+                </div>
+                
+                <div className="puzzle-examples">
+                  <h4>💡 Tips for Creating Puzzles:</h4>
+                  <ul>
+                    <li>Clearly define all categories and their possible values</li>
+                    <li>Number your constraints for clarity</li>
+                    <li>Use spatial relationships like "to the left of", "next to", "between"</li>
+                    <li>Include direct assignments like "Alice lives in the red house"</li>
+                    <li>It will be better to have your expected results</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          )}
+        </section>
+
+        {/* Step 2: System Configuration */}
+        <section className={`content-section ${expandedSections.sysContent ? 'expanded' : 'collapsed'}`}>
+          <div className="section-header" onClick={() => toggleSection('sysContent')}>
+            <h2>⚙️ System Configuration</h2>
+            <span className="toggle-icon">{expandedSections.sysContent ? '▼' : '▶'}</span>
+          </div>
+          
+          {expandedSections.sysContent && (
+            <div className="section-content">
+              <div className="sys-content-editor">
+                <h3>📝 System Content</h3>
+                <p className="description">
+                  Edit the system prompt that will guide the AI in solving your custom puzzle:
+                </p>
+                <textarea
+                  value={sysContent}
+                  onChange={(e) => setSysContent(e.target.value)}
+                  className="sys-content-textarea"
+                  placeholder="Enter system content..."
+                />
+              </div>
+            </div>
+          )}
+        </section>
+
+        {/* Step 3: Solve & Results */}
+        <section className={`content-section ${expandedSections.result ? 'expanded' : 'collapsed'}`}>
+          <div className="section-header" onClick={() => toggleSection('result')}>
+            <h2>🚀 Solve & Results</h2>
+            <span className="toggle-icon">{expandedSections.result ? '▼' : '▶'}</span>
+          </div>
+          
+          {expandedSections.result && (
+            <div className="section-content">
+              <div className="solve-section">
+                <button 
+                  onClick={handleSolveCustom} 
+                  disabled={isSolving || !customPuzzleText.trim()}
+                  className={`btn btn-primary solve-btn ${isSolving ? 'loading' : ''}`}
+                >
+                  {isSolving ? '🔄 Solving Custom Puzzle...' : '🧠 Solve Custom Puzzle'}
+                </button>
+              </div>
+
+              <div className="results-section">
+                <div className="result-summary">
+                  <div className="result-item">
+                    <span className="result-label">Status:</span>
+                    <span className={`result-value ${
+                      solutionStatus === 'success' ? 'success' : 
+                      solutionStatus === 'no_solution' ? 'warning' : 
+                      solutionStatus === 'error' ? 'error' : 'pending'
+                    }`}>
+                      {solutionStatus === 'success' ? "✅ Solved" : 
+                       solutionStatus === 'no_solution' ? "⚠️ No Solution" :
+                       solutionStatus === 'error' ? "❌ Error" : "⏳ Pending"}
+                    </span>
+                  </div>
+                  {solutions.length > 0 && (
+                    <div className="result-item">
+                      <span className="result-label">Solutions Found:</span>
+                      <span className="result-value">{solutions.length}</span>
+                    </div>
+                  )}
+                </div>
+
+                {/* Solution Navigator */}
+                {solutions.length > 0 && (
+                  <SolutionNavigator
+                    solutions={solutions}
+                    currentIndex={currentSolutionIndex}
+                    onIndexChange={setCurrentSolutionIndex}
+                  />
+                )}
+
+                {/* Error Message */}
+                {(solutionStatus === 'error' || solutionStatus === 'no_solution') && errorMessage && (
+                  <div className="error-section">
+                    <h3>⚠️ {solutionStatus === 'no_solution' ? 'No Solution Found' : 'Error'}</h3>
+                    <div className="error-display">
+                      <pre>{errorMessage}</pre>
+                    </div>
+                  </div>
+                )}
+
+                {/* Generated Code */}
+                {generatedCode && (
+                  <div className="code-section">
+                    <h3>💻 Generated Code</h3>
+                    <div className="code-display">
+                      <pre><code>{generatedCode}</code></pre>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </section>
+      </main>
+
+      {/* Navigation */}
+      <nav className="navigation">
+        <button 
+          onClick={prevStep} 
+          disabled={currentStep <= 1}
+          className="btn btn-outline"
+        >
+          ← Previous
+        </button>
+        <span className="step-indicator">
+          Step {currentStep} of 3
+        </span>
+        <button 
+          onClick={nextStep} 
+          disabled={currentStep >= 3}
+          className="btn btn-outline"
+        >
+          Next →
+        </button>
+      </nav>
+    </>
+  );
+}
+
+export default CustomPuzzlePage;

frontend/src/pages/PredefinedPuzzlePage.js

@@ -0,0 +1,304 @@
+import React, { useState, useEffect } from 'react';
+
+function PredefinedPuzzlePage() {
+  // For puzzle index and puzzle data
+  const [puzzleIndex, setPuzzleIndex] = useState(0);
+  const [puzzleText, setPuzzleText] = useState("");
+  const [expectedSolution, setExpectedSolution] = useState(null);
+
+  // sysContent can be editted, default using Example.txt
+  const [sysContent, setSysContent] = useState("");
+
+  // Interaction results
+  const [generatedCode, setGeneratedCode] = useState("");
+  const [executionSuccess, setExecutionSuccess] = useState(null);
+  const [attempts, setAttempts] = useState(0);
+  const [isSolving, setIsSolving] = useState(false);
+  const [problematicConstraints, setProblematicConstraints] = useState("");
+
+  // UI state
+  const [currentStep, setCurrentStep] = useState(1);
+  const [expandedSections, setExpandedSections] = useState({
+    puzzle: true,
+    sysContent: false,
+    result: false
+  });
+
+  // Frontend fetch sysContent in default
+  useEffect(() => {
+    fetch(`/default_sys_content`)
+      .then(res => res.json())
+      .then(data => {
+        if(data.success) {
+          setSysContent(data.sysContent);
+        }
+      })
+      .catch(e => console.error(e));
+  }, []);
+
+  // When puzzleIndex changing，auto get puzzle
+  useEffect(() => {
+    fetch(`/get_puzzle?index=${puzzleIndex}`)
+      .then(res => res.json())
+      .then(data => {
+        if(data.success) {
+          setPuzzleText(data.puzzle);
+          setExpectedSolution(data.expected_solution);
+        } else {
+          console.error("Failed to fetch puzzle", data.error);
+          setPuzzleText("");
+          setExpectedSolution(null);
+        }
+      })
+      .catch(e => console.error(e));
+  }, [puzzleIndex]);
+
+  const handleSolve = () => {
+    if(!puzzleText || !expectedSolution) {
+      alert("puzzle or expectedSolution incomplete");
+      return;
+    }
+    const payload = {
+      index: puzzleIndex,
+      puzzle: puzzleText,
+      expected_solution: expectedSolution,
+      sys_content: sysContent,
+      problematic_constraints: problematicConstraints
+    };
+
+    setIsSolving(true);
+    setCurrentStep(3);
+    setExpandedSections({...expandedSections, result: true});
+
+    fetch(`/solve`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(payload)
+    })
+    .then(res => res.json())
+    .then(data => {
+      if(!data.success) {
+        alert("Backend error: " + data.error);
+        return;
+      }
+      const result = data.result;
+      setGeneratedCode(result.generatedCode || "");
+      setExecutionSuccess(result.success);
+      setAttempts(result.attempts || 0);
+      setProblematicConstraints(result.problematicConstraints || "");
+    })
+    .catch(e => console.error(e))
+    .finally(() => {
+      setIsSolving(false);
+    });
+  };
+
+  const toggleSection = (section) => {
+    setExpandedSections({
+      ...expandedSections,
+      [section]: !expandedSections[section]
+    });
+  };
+
+  const nextStep = () => {
+    if (currentStep < 3) {
+      setCurrentStep(currentStep + 1);
+      if (currentStep === 1) {
+        setExpandedSections({puzzle: false, sysContent: true, result: false});
+      } else if (currentStep === 2) {
+        setExpandedSections({puzzle: false, sysContent: false, result: true});
+      }
+    }
+  };
+
+  const prevStep = () => {
+    if (currentStep > 1) {
+      setCurrentStep(currentStep - 1);
+      if (currentStep === 2) {
+        setExpandedSections({puzzle: true, sysContent: false, result: false});
+      } else if (currentStep === 3) {
+        setExpandedSections({puzzle: false, sysContent: true, result: false});
+      }
+    }
+  };
+
+  return (
+    <>
+      {/* Progress Steps */}
+      <div className="progress-container">
+        <div className="progress-steps">
+          <div className={`step ${currentStep >= 1 ? 'active' : ''}`}>
+            <div className="step-number">1</div>
+            <div className="step-label">Select Puzzle</div>
+          </div>
+          <div className={`step ${currentStep >= 2 ? 'active' : ''}`}>
+            <div className="step-number">2</div>
+            <div className="step-label">Configure System</div>
+          </div>
+          <div className={`step ${currentStep >= 3 ? 'active' : ''}`}>
+            <div className="step-number">3</div>
+            <div className="step-label">Solve & Results</div>
+          </div>
+        </div>
+      </div>
+
+      <main className="main-content">
+        {/* Step 1: Puzzle Selection */}
+        <section className={`content-section ${expandedSections.puzzle ? 'expanded' : 'collapsed'}`}>
+          <div className="section-header" onClick={() => toggleSection('puzzle')}>
+            <h2>📋 Puzzle Selection</h2>
+            <span className="toggle-icon">{expandedSections.puzzle ? '▼' : '▶'}</span>
+          </div>
+          
+          {expandedSections.puzzle && (
+            <div className="section-content">
+              <div className="puzzle-selector">
+                <label htmlFor="puzzle-index">Choose puzzle index (0 - 999):</label>
+                <div className="input-group">
+                  <input
+                    id="puzzle-index"
+                    type="number"
+                    value={puzzleIndex}
+                    onChange={(e) => setPuzzleIndex(Number(e.target.value))}
+                    min={0}
+                    max={999}
+                    className="number-input"
+                  />
+                  <button 
+                    onClick={() => setPuzzleIndex(puzzleIndex)} 
+                    className="btn btn-secondary"
+                  >
+                    Load Puzzle
+                  </button>
+                </div>
+              </div>
+
+              <div className="puzzle-display">
+                <div className="puzzle-text">
+                  <h3>📄 Puzzle Text</h3>
+                  <div className="text-display">
+                    {puzzleText || "Loading puzzle..."}
+                  </div>
+                </div>
+
+                <div className="expected-solution">
+                  <h3>🎯 Expected Solution</h3>
+                  <div className="json-display">
+                    {expectedSolution ? (
+                      <pre>{JSON.stringify(expectedSolution, null, 2)}</pre>
+                    ) : (
+                      "Loading solution..."
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </section>
+
+        {/* Step 2: System Configuration */}
+        <section className={`content-section ${expandedSections.sysContent ? 'expanded' : 'collapsed'}`}>
+          <div className="section-header" onClick={() => toggleSection('sysContent')}>
+            <h2>⚙️ System Configuration</h2>
+            <span className="toggle-icon">{expandedSections.sysContent ? '▼' : '▶'}</span>
+          </div>
+          
+          {expandedSections.sysContent && (
+            <div className="section-content">
+              <div className="sys-content-editor">
+                <h3>📝 System Content</h3>
+                <p className="description">
+                  Edit the system prompt that will guide the AI in solving the puzzle:
+                </p>
+                <textarea
+                  value={sysContent}
+                  onChange={(e) => setSysContent(e.target.value)}
+                  className="sys-content-textarea"
+                  placeholder="Enter system content..."
+                />
+              </div>
+            </div>
+          )}
+        </section>
+
+        {/* Step 3: Solve & Results */}
+        <section className={`content-section ${expandedSections.result ? 'expanded' : 'collapsed'}`}>
+          <div className="section-header" onClick={() => toggleSection('result')}>
+            <h2>🚀 Solve & Results</h2>
+            <span className="toggle-icon">{expandedSections.result ? '▼' : '▶'}</span>
+          </div>
+          
+          {expandedSections.result && (
+            <div className="section-content">
+              <div className="solve-section">
+                <button 
+                  onClick={handleSolve} 
+                  disabled={isSolving || !puzzleText || !expectedSolution}
+                  className={`btn btn-primary solve-btn ${isSolving ? 'loading' : ''}`}
+                >
+                  {isSolving ? '🔄 Solving...' : '🧠 Solve Puzzle with AI'}
+                </button>
+              </div>
+
+              <div className="results-section">
+                <div className="result-summary">
+                  <div className="result-item">
+                    <span className="result-label">Status:</span>
+                    <span className={`result-value ${executionSuccess === true ? 'success' : executionSuccess === false ? 'error' : 'pending'}`}>
+                      {executionSuccess === null ? "⏳ Pending" : executionSuccess ? "✅ Success" : "❌ Failed"}
+                    </span>
+                  </div>
+                  <div className="result-item">
+                    <span className="result-label">Attempts:</span>
+                    <span className="result-value">{attempts}</span>
+                  </div>
+                </div>
+
+                {problematicConstraints && (
+                  <div className="issues-section">
+                    <h3>⚠️ Issues & Analysis</h3>
+                    <div className="issues-display">
+                      <pre>{problematicConstraints}</pre>
+                    </div>
+                  </div>
+                )}
+
+                {generatedCode && (
+                  <div className="code-section">
+                    <h3>💻 Generated Code</h3>
+                    <div className="code-display">
+                      <pre><code>{generatedCode}</code></pre>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </section>
+      </main>
+
+      {/* Navigation */}
+      <nav className="navigation">
+        <button 
+          onClick={prevStep} 
+          disabled={currentStep <= 1}
+          className="btn btn-outline"
+        >
+          ← Previous
+        </button>
+        <span className="step-indicator">
+          Step {currentStep} of 3
+        </span>
+        <button 
+          onClick={nextStep} 
+          disabled={currentStep >= 3}
+          className="btn btn-outline"
+        >
+          Next →
+        </button>
+      </nav>
+    </>
+  );
+}
+
+export default PredefinedPuzzlePage;