diff --git a/backend/app.py b/backend/app.py
index d6c6d373..69c3ab80 100644
--- a/backend/app.py
+++ b/backend/app.py
@@ -1,7 +1,9 @@
 import builtins
 import io
+import json
 import os
 import sys
+import uuid
 from typing import Any, Dict, Optional, Union
 
 from flask import Flask, Response, jsonify, request, send_file, session
@@ -93,6 +95,10 @@ def emit_log_realtime(message: str, level: str = "info") -> None:
 from tiny_scientist.reviewer import Reviewer  # noqa: E402
 from tiny_scientist.scientist import TinyScientist  # noqa: E402
 from tiny_scientist.thinker import Thinker  # noqa: E402
+from tiny_scientist.utils.agent_sdk import (  # noqa: E402
+    resolve_agent_sdk,
+    validate_agent_sdk_model_combo,
+)
 from tiny_scientist.writer import Writer  # noqa: E402
 
 
@@ -141,6 +147,89 @@ def patch_module_print() -> None:
 reviewer: Optional[Reviewer] = None
 global_cost_tracker: Optional[BudgetChecker] = None
 
+global_idea_storage: Dict[str, Any] = {}
+
+# Hierarchical ID counters
+# root_counter: next number for root-level ideas (1, 2, 3, ...)
+# child_counters: {parent_id: next_child_number}
+# modify_counters: {parent_id: next_X_number}
+_root_counter: int = 0
+_child_counters: Dict[str, int] = {}
+_modify_counters: Dict[str, int] = {}
+
+
+def _next_root_id() -> str:
+    global _root_counter
+    _root_counter += 1
+    return str(_root_counter)
+
+
+def _next_child_id(parent_id: str) -> str:
+    if parent_id not in _child_counters:
+        _child_counters[parent_id] = 0
+    _child_counters[parent_id] += 1
+    return f"{parent_id}-{_child_counters[parent_id]}"
+
+
+def _next_modify_id(parent_id: str) -> str:
+    if parent_id not in _modify_counters:
+        _modify_counters[parent_id] = 0
+    _modify_counters[parent_id] += 1
+    return f"{parent_id}-X{_modify_counters[parent_id]}"
+
+
+def _merge_id(id_a: str, id_b: str) -> str:
+    return f"{id_a}-Y-{id_b}-Y"
+
+
+def _reset_id_counters() -> None:
+    global _root_counter, _child_counters, _modify_counters
+    _root_counter = 0
+    _child_counters = {}
+    _modify_counters = {}
+
+
+def _store_or_update_idea(idea: Dict[str, Any]) -> None:
+    iid = idea.get("id")
+    if not iid:
+        return
+    existing = global_idea_storage.get(iid, {})
+    merged = {**existing, **idea}
+    global_idea_storage[iid] = merged
+
+
+def _list_stored_ideas() -> list[Dict[str, Any]]:
+    return list(global_idea_storage.values())
+
+
+def _bulk_update_scores(scored_payloads: list[Dict[str, Any]]) -> None:
+    for s in scored_payloads:
+        iid = s.get("id")
+        if not iid or iid not in global_idea_storage:
+            continue
+
+        update_dict: Dict[str, Any] = {}
+
+        incoming_scores = s.get("scores")
+        if incoming_scores and isinstance(incoming_scores, dict):
+            existing_scores = global_idea_storage[iid].get("scores")
+            if not isinstance(existing_scores, dict):
+                existing_scores = {}
+            update_dict["scores"] = {**existing_scores, **incoming_scores}
+
+        # Persist the most recent dimension scores/reasons as convenience fields
+        # (the canonical per-dimension values remain stored in `scores`).
+        for idx in (1, 2, 3):
+            score_key_in = f"dimension{idx}Score"
+            score_key_out = f"Dimension{idx}Score"
+            reason_key_out = f"Dimension{idx}Reason"
+            if s.get(score_key_in) is not None:
+                update_dict[score_key_out] = s.get(score_key_in)
+            if s.get(reason_key_out) is not None:
+                update_dict[reason_key_out] = s.get(reason_key_out, "")
+
+        global_idea_storage[iid].update(update_dict)
+
 
 def format_name_for_display(name: Optional[str]) -> str:
     """Formats a name"""
@@ -149,6 +238,26 @@ def format_name_for_display(name: Optional[str]) -> str:
     return " ".join(word.capitalize() for word in name.split("_"))
 
 
+def _auto_agent_sdk_for_model(model: str) -> str:
+    normalized = (model or "").strip().lower()
+    if normalized.startswith("claude-"):
+        return "claude"
+    return "openai"
+
+
+def _validate_idea_response_payload(response: Dict[str, Any]) -> bool:
+    ideas = response.get("ideas")
+    if not isinstance(ideas, list) or len(ideas) == 0:
+        return False
+    required = {"id", "title", "content", "originalData"}
+    for idea in ideas:
+        if not isinstance(idea, dict):
+            return False
+        if any(key not in idea for key in required):
+            return False
+    return True
+
+
 # Initialize the Thinker
 @app.route("/api/configure", methods=["POST"])
 def configure() -> Union[Response, tuple[Response, int]]:
@@ -158,12 +267,22 @@ def configure() -> Union[Response, tuple[Response, int]]:
         return jsonify({"error": "No JSON data provided"}), 400
     model = data.get("model")
     api_key = data.get("api_key")
+    requested_agent_sdk = data.get("agent_sdk")
     budget = data.get("budget")
     budget_preference = data.get("budget_preference")
 
     if not model or not api_key:
         return jsonify({"error": "Model and API key are required"}), 400
 
+    try:
+        if requested_agent_sdk:
+            resolved_agent_sdk = resolve_agent_sdk(agent_sdk=requested_agent_sdk)
+        else:
+            resolved_agent_sdk = _auto_agent_sdk_for_model(model)
+        validate_agent_sdk_model_combo(resolved_agent_sdk, model)
+    except ValueError as exc:
+        return jsonify({"error": str(exc)}), 400
+
     try:
         (
             resolved_budget,
@@ -175,11 +294,30 @@ def configure() -> Union[Response, tuple[Response, int]]:
 
     # Map models to their environment variables
     env_var_map = {
+        "gpt-5.2": "OPENAI_API_KEY",
+        "gpt-5.2-pro": "OPENAI_API_KEY",
+        "gpt-5.2-codex": "OPENAI_API_KEY",
+        "gpt-5": "OPENAI_API_KEY",
+        "gpt-5-pro": "OPENAI_API_KEY",
+        "gpt-5-mini": "OPENAI_API_KEY",
+        "gpt-5-nano": "OPENAI_API_KEY",
+        "gpt-4.1": "OPENAI_API_KEY",
+        "gpt-4.1-mini": "OPENAI_API_KEY",
+        "gpt-4.1-nano": "OPENAI_API_KEY",
+        "o3": "OPENAI_API_KEY",
+        "o4-mini-deep-research": "OPENAI_API_KEY",
+        "claude-opus-4-6": "ANTHROPIC_API_KEY",
+        "claude-opus-4-5": "ANTHROPIC_API_KEY",
+        "claude-sonnet-4-5": "ANTHROPIC_API_KEY",
+        "claude-haiku-4-5": "ANTHROPIC_API_KEY",
+        "claude-opus-4": "ANTHROPIC_API_KEY",
+        "claude-sonnet-4": "ANTHROPIC_API_KEY",
         "deepseek-chat": "DEEPSEEK_API_KEY",
         "deepseek-reasoner": "DEEPSEEK_API_KEY",
-        "gpt-4o": "OPENAI_API_KEY",
-        "gpt-o1": "OPENAI_API_KEY",
-        "claude-3-5-sonnet-20241022": "ANTHROPIC_API_KEY",
+        "gemini-2.5-pro": "GOOGLE_API_KEY",
+        "gemini-2.5-flash": "GOOGLE_API_KEY",
+        "gemini-2.5-flash-lite": "GOOGLE_API_KEY",
+        "gemini-2.0-flash": "GOOGLE_API_KEY",
     }
 
     # Set the appropriate environment variable
@@ -193,6 +331,7 @@ def configure() -> Union[Response, tuple[Response, int]]:
     session["configured"] = True
     session["budget"] = resolved_budget
     session["budget_preference"] = resolved_preference
+    session["agent_sdk"] = resolved_agent_sdk
 
     # Initialize all components with same parameters as TinyScientist
     global thinker, coder, writer, reviewer, global_cost_tracker
@@ -214,13 +353,15 @@ def configure() -> Union[Response, tuple[Response, int]]:
     thinker = Thinker(
         model=model,
         tools=[],
-        iter_num=0,
+        iter_num=1,
         output_dir="./",
-        search_papers=False,
+        search_papers=True,
         generate_exp_plan=True,
+        temperature=1.0,
         cost_tracker=BudgetChecker(
             budget=allocation.get("thinker"), parent=global_cost_tracker
         ),
+        agent_sdk=resolved_agent_sdk,
     )
     coder = Coder(
         model=model,
@@ -230,12 +371,14 @@ def configure() -> Union[Response, tuple[Response, int]]:
         cost_tracker=BudgetChecker(
             budget=allocation.get("coder"), parent=global_cost_tracker
         ),
+        agent_sdk=resolved_agent_sdk,
     )
 
     return jsonify(
         {
             "status": "configured",
             "model": model,
+            "agent_sdk": resolved_agent_sdk,
             "budget": resolved_budget,
             "budget_preference": resolved_preference,
         }
@@ -245,35 +388,45 @@ def configure() -> Union[Response, tuple[Response, int]]:
 @app.route("/api/generate-initial", methods=["POST"])
 def generate_initial() -> Union[Response, tuple[Response, int]]:
     """Generate initial ideas from an intent (handleAnalysisIntentSubmit)"""
-    emit_buffered_logs()  # Emit any buffered logs from module initialization
-    data = request.json
-    if data is None:
-        return jsonify({"error": "No JSON data provided"}), 400
-    if thinker is None:
-        return jsonify({"error": "Thinker not configured"}), 400
-    intent = data.get("intent")
-    num_ideas = data.get("num_ideas", 3)
+    try:
+        emit_buffered_logs()
+        data = request.json
+        if data is None:
+            return jsonify({"error": "No JSON data provided"}), 400
+        if thinker is None:
+            return jsonify({"error": "Thinker not configured"}), 400
+        intent = data.get("intent")
 
-    # Generate ideas
-    ideas = thinker.run(intent=intent, num_ideas=num_ideas)
+        idea = thinker.run(intent=intent, num_ideas=1)
 
-    # Return in the format expected by TreePlot
-    response = {
-        "ideas": [
-            {
-                "title": format_name_for_display(
-                    idea.get("Name") if isinstance(idea, dict) else None
-                ),
-                "content": (
-                    format_idea_content(idea) if isinstance(idea, dict) else str(idea)
-                ),
-                "originalData": idea,  # Preserve complete thinker JSON for coder/writer
-            }
-            for idea in ideas
-        ]
-    }
+        if not idea or not isinstance(idea, dict):
+            return jsonify({"error": "Failed to generate idea"}), 500
 
-    return jsonify(response)
+        # Ensure experiment plan is generated for experimental ideas (thinker.run may skip it on failure)
+        if idea.get("is_experimental", True) and not idea.get("Experiment"):
+            enriched_json = thinker.generate_experiment_plan(json.dumps(idea))
+            idea = json.loads(enriched_json)
+
+        print(f"[generate-initial] Returning idea keys: {list(idea.keys())}")
+        print(f"[generate-initial] Has Experiment: {'Experiment' in idea}")
+
+        new_id = _next_root_id()
+        response = {
+            "ideas": [
+                {
+                    "id": new_id,
+                    "title": format_name_for_display(idea.get("Name")),
+                    "content": format_idea_content(idea),
+                    "originalData": idea,
+                }
+            ]
+        }
+        if not _validate_idea_response_payload(response):
+            return jsonify({"error": "Invalid backend idea payload"}), 500
+        return jsonify(response)
+    except Exception as exc:
+        print(f"[ERROR] generate-initial failed: {exc}")
+        return jsonify({"error": f"generate-initial failed: {str(exc)}"}), 500
 
 
 @app.route("/api/set-system-prompt", methods=["POST"])
@@ -298,37 +451,9 @@ def set_system_prompt() -> Union[Response, tuple[Response, int]]:
     return jsonify({"status": "success", "message": "System prompt updated"})
 
 
-@app.route("/api/set-criteria", methods=["POST"])
-def set_criteria() -> Union[Response, tuple[Response, int]]:
-    """Set evaluation criteria for a specific dimension"""
-    global thinker
-
-    if not thinker:
-        return jsonify({"error": "Thinker not configured"}), 400
-
-    data = request.json
-    if data is None:
-        return jsonify({"error": "No JSON data provided"}), 400
-    dimension = data.get("dimension")  # 'novelty', 'feasibility', or 'impact'
-    criteria = data.get("criteria")
-
-    if dimension not in ["novelty", "feasibility", "impact"]:
-        return jsonify({"error": "Invalid dimension"}), 400
-
-    # If empty string or None, reset to default
-    if not criteria:
-        thinker.set_criteria(dimension, None)  # This will reset to default
-    else:
-        thinker.set_criteria(dimension, criteria)
-
-    return jsonify(
-        {"status": "success", "message": f"{dimension.capitalize()} criteria updated"}
-    )
-
-
 @app.route("/api/get-prompts", methods=["GET"])
 def get_prompts() -> Union[Response, tuple[Response, int]]:
-    """Get current prompts and criteria"""
+    """Get current system prompt (dynamic dimensions are configured client-side)."""
     global thinker
 
     if thinker is None:
@@ -337,16 +462,8 @@ def get_prompts() -> Union[Response, tuple[Response, int]]:
     return jsonify(
         {
             "system_prompt": thinker.get_system_prompt(),
-            "criteria": {
-                "novelty": thinker.get_criteria("novelty"),
-                "feasibility": thinker.get_criteria("feasibility"),
-                "impact": thinker.get_criteria("impact"),
-            },
             "defaults": {
                 "system_prompt": thinker.default_system_prompt,
-                "novelty": thinker.default_novelty_criteria,
-                "feasibility": thinker.default_feasibility_criteria,
-                "impact": thinker.default_impact_criteria,
             },
         }
     )
@@ -355,35 +472,110 @@ def get_prompts() -> Union[Response, tuple[Response, int]]:
 @app.route("/api/generate-children", methods=["POST"])
 def generate_children() -> Union[Response, tuple[Response, int]]:
     """Generate child ideas (generateChildNodes)"""
+    try:
+        data = request.json
+        if data is None:
+            return jsonify({"error": "No JSON data provided"}), 400
+        if thinker is None:
+            return jsonify({"error": "Thinker not configured"}), 400
+        parent_content = data.get("parent_content")
+        parent_id = data.get("parent_id", "root")
+        context = data.get("context", "")
+
+        combined_intent = f"{parent_content}\nAdditional Context: {context}"
+        idea = thinker.run(intent=combined_intent, num_ideas=1)
+
+        if not idea or not isinstance(idea, dict):
+            return jsonify({"error": "Failed to generate idea"}), 500
+
+        # Ensure experiment plan is generated for experimental ideas (thinker.run may skip it on failure)
+        if idea.get("is_experimental", True) and not idea.get("Experiment"):
+            enriched_json = thinker.generate_experiment_plan(json.dumps(idea))
+            idea = json.loads(enriched_json)
+
+        child_id = _next_child_id(parent_id)
+
+        response = {
+            "ideas": [
+                {
+                    "id": child_id,
+                    "title": format_name_for_display(idea.get("Name")),
+                    "content": format_idea_content(idea),
+                    "originalData": idea,
+                }
+            ]
+        }
+        if not _validate_idea_response_payload(response):
+            return jsonify({"error": "Invalid backend idea payload"}), 500
+        return jsonify(response)
+    except Exception as exc:
+        print(f"[ERROR] generate-children failed: {exc}")
+        return jsonify({"error": f"generate-children failed: {str(exc)}"}), 500
+
+
+@app.route("/api/suggest-dimensions", methods=["POST"])
+def suggest_dimensions() -> Union[Response, tuple[Response, int]]:
+    """Suggest dimension pairs for evaluating ideas based on research intent."""
     data = request.json
     if data is None:
         return jsonify({"error": "No JSON data provided"}), 400
     if thinker is None:
         return jsonify({"error": "Thinker not configured"}), 400
-    parent_content = data.get("parent_content")
-    context = data.get("context", "")
 
-    # Combine parent content and context as the intent
-    combined_intent = f"{parent_content}\nAdditional Context: {context}"
-    ideas = thinker.run(intent=combined_intent, num_ideas=3)
+    intent = data.get("intent")
+    if not intent:
+        return jsonify({"error": "Intent is required"}), 400
 
-    # Return in the format expected by TreePlot
-    response = {
-        "ideas": [
+    dimension_pairs = thinker.suggest_dimensions(intent=intent)
+    return jsonify({"dimension_pairs": dimension_pairs})
+
+
+@app.route("/api/evaluate-dimension", methods=["POST"])
+def evaluate_single_dimension() -> Union[Response, tuple[Response, int]]:
+    """Evaluate ideas on a single dimension pair only."""
+    data = request.json
+    if data is None:
+        return jsonify({"error": "No JSON data provided"}), 400
+    if thinker is None:
+        return jsonify({"error": "Thinker not configured"}), 400
+
+    ideas = data.get("ideas", [])
+    intent = data.get("intent")
+    dimension_pair = data.get("dimension_pair")
+    dimension_index = data.get("dimension_index", 0)
+
+    print("[DEBUG] Single dimension evaluation request:")
+    print(f"  - Ideas count: {len(ideas)}")
+    print(f"  - Dimension pair: {dimension_pair}")
+    print(f"  - Dimension index: {dimension_index}")
+
+    if not dimension_pair:
+        return jsonify({"error": "dimension_pair is required"}), 400
+
+    try:
+        scores = thinker.rank_single_dimension(
+            ideas=ideas,
+            intent=intent,
+            dimension_pair=dimension_pair,
+            dimension_index=dimension_index,
+        )
+        print(f"[DEBUG] Single dimension evaluation returned {len(scores)} scores")
+        return jsonify(
             {
-                "title": format_name_for_display(
-                    idea.get("Name") if isinstance(idea, dict) else None
-                ),
-                "content": (
-                    format_idea_content(idea) if isinstance(idea, dict) else str(idea)
-                ),
-                "originalData": idea,  # Preserve complete thinker JSON for coder/writer
+                "scores": scores,
+                "dimension_pair": dimension_pair,
+                "dimension_index": dimension_index,
             }
-            for idea in ideas
-        ]
-    }
+        )
+    except Exception as e:
+        print(f"[ERROR] Single dimension evaluation failed: {str(e)}")
+        import traceback
 
-    return jsonify(response)
+        traceback.print_exc()
+        return (
+            jsonify({"error": f"Error during single dimension evaluation: {str(e)}"}),
+            500,
+        )
 
 
 @app.route("/api/modify", methods=["POST"])
@@ -397,28 +589,108 @@ def modify_idea() -> Union[Response, tuple[Response, int]]:
     original_idea = data.get("original_idea")
     modifications = data.get("modifications")
     behind_idea = data.get("behind_idea")
+    original_id = data.get("original_id", "")
+    dimension_pairs = data.get("dimension_pairs") or []
+
+    if not isinstance(modifications, list) or len(modifications) == 0:
+        return jsonify({"error": "modifications must be a non-empty list"}), 400
+
+    if not isinstance(dimension_pairs, list) or len(dimension_pairs) < 3:
+        return jsonify({"error": "dimension_pairs (length >= 3) is required"}), 400
 
     # Use original data directly (no conversion needed)
     thinker_original = original_idea
     thinker_behind = behind_idea
-    # Convert modifications to Thinker format
-    thinker_mods = []
-    for mod in modifications:
-        thinker_mods.append(
-            {"metric": mod.get("metric"), "direction": mod.get("direction")}
-        )
+    thinker_mods = modifications
 
     # Modify the idea
     modified_idea = thinker.modify_idea(
         original_idea=thinker_original,
         modifications=thinker_mods,
         behind_idea=thinker_behind,
+        dimension_pairs=dimension_pairs,
     )
+
+    # Apply the requested score adjustments onto the modified idea's dynamic score map.
+    # This keeps the UI consistent even though modify_idea is a content rewrite step.
+    base_scores: Dict[str, Any] = {}
+    if isinstance(thinker_original, dict) and isinstance(
+        thinker_original.get("scores"), dict
+    ):
+        base_scores.update(thinker_original.get("scores") or {})
+    if isinstance(modified_idea, dict) and isinstance(
+        modified_idea.get("scores"), dict
+    ):
+        base_scores.update(modified_idea.get("scores") or {})
+
+    for mod in modifications:
+        if not isinstance(mod, dict):
+            continue
+        metric = mod.get("metric")
+        new_score = mod.get("newScore")
+        if isinstance(metric, str) and metric.strip() and new_score is not None:
+            base_scores[metric] = new_score
+
+    if isinstance(modified_idea, dict):
+        modified_idea["scores"] = base_scores
+
+        def _pair_key(pair: Dict[str, Any]) -> str:
+            return f"{str(pair.get('dimensionA', '')).strip()}-{str(pair.get('dimensionB', '')).strip()}"
+
+        for idx, pair in enumerate(dimension_pairs[:3]):
+            key = _pair_key(pair)
+            score_val = base_scores.get(key)
+            modified_idea[f"Dimension{idx + 1}Score"] = score_val
+
+    # Generate experiment plan for modified idea (only if experimental)
+    if modified_idea.get("is_experimental", True) and not modified_idea.get(
+        "Experiment"
+    ):
+        enriched_json = thinker.generate_experiment_plan(json.dumps(modified_idea))
+        modified_idea = json.loads(enriched_json)
+
+    # Generate hierarchical ID for the modified idea
+    modified_id = _next_modify_id(original_id) if original_id else str(uuid.uuid4())
+
     # Return in the format expected by TreePlot
     response = {
+        "id": modified_id,
         "title": format_name_for_display(modified_idea.get("Name")),
         "content": format_idea_content(modified_idea),
         "originalData": modified_idea,  # Preserve complete thinker JSON for coder/writer
+        "scores": modified_idea.get("scores")
+        if isinstance(modified_idea, dict)
+        else {},
+        "dimension1Score": (
+            modified_idea.get("Dimension1Score")
+            if isinstance(modified_idea, dict)
+            else None
+        ),
+        "dimension2Score": (
+            modified_idea.get("Dimension2Score")
+            if isinstance(modified_idea, dict)
+            else None
+        ),
+        "dimension3Score": (
+            modified_idea.get("Dimension3Score")
+            if isinstance(modified_idea, dict)
+            else None
+        ),
+        "Dimension1Reason": (
+            modified_idea.get("Dimension1Reason", "")
+            if isinstance(modified_idea, dict)
+            else ""
+        ),
+        "Dimension2Reason": (
+            modified_idea.get("Dimension2Reason", "")
+            if isinstance(modified_idea, dict)
+            else ""
+        ),
+        "Dimension3Reason": (
+            modified_idea.get("Dimension3Reason", "")
+            if isinstance(modified_idea, dict)
+            else ""
+        ),
     }
     return jsonify(response)
 
@@ -433,14 +705,32 @@ def merge_ideas() -> Union[Response, tuple[Response, int]]:
         return jsonify({"error": "Thinker not configured"}), 400
     idea_a = data.get("idea_a")
     idea_b = data.get("idea_b")
+    idea_a_id = data.get("idea_a_id", "")
+    idea_b_id = data.get("idea_b_id", "")
     # Use original data directly (no conversion needed)
     thinker_idea_a = idea_a
     thinker_idea_b = idea_b
     # Merge ideas
     merged_idea = thinker.merge_ideas(idea_a=thinker_idea_a, idea_b=thinker_idea_b)
 
+    # Generate experiment plan for merged idea (only if experimental)
+    if (
+        isinstance(merged_idea, dict)
+        and merged_idea.get("is_experimental", True)
+        and not merged_idea.get("Experiment")
+    ):
+        enriched_json = thinker.generate_experiment_plan(json.dumps(merged_idea))
+        merged_idea = json.loads(enriched_json)
+
+    # Generate hierarchical merged ID
+    if idea_a_id and idea_b_id:
+        merged_id = _merge_id(idea_a_id, idea_b_id)
+    else:
+        merged_id = str(uuid.uuid4())
+
     # Return in the format expected by TreePlot
     response = {
+        "id": merged_id,
         "title": format_name_for_display(
             merged_idea.get("Name") if isinstance(merged_idea, dict) else None
         ),
@@ -457,43 +747,299 @@ def merge_ideas() -> Union[Response, tuple[Response, int]]:
 
 @app.route("/api/evaluate", methods=["POST"])
 def evaluate_ideas() -> Union[Response, tuple[Response, int]]:
-    """Evaluate ideas (evaluateIdeas)"""
     data = request.json
     if data is None:
         return jsonify({"error": "No JSON data provided"}), 400
     if thinker is None:
         return jsonify({"error": "Thinker not configured"}), 400
-    ideas = data.get("ideas")
+
+    incoming_ideas = data.get("ideas", [])
     intent = data.get("intent")
+    dimension_pairs = data.get("dimension_pairs", [])
+    user_score_corrections = data.get("userScoreCorrections", [])
+    mode = data.get("mode", "incremental")
+    explicit_target_ids = set(data.get("targetIds", []) or [])
 
-    # Use original data directly (no conversion needed)
-    thinker_ideas = ideas
+    if not isinstance(dimension_pairs, list) or len(dimension_pairs) < 3:
+        return (
+            jsonify({"error": "dimension_pairs (length >= 3) is required"}),
+            400,
+        )
 
-    # Store original IDs in order - LLM doesn't preserve titles, use index mapping
-    original_ids = [idea.get("id") for idea in ideas]
+    def _pair_keys(pair: Dict[str, Any]) -> tuple[str, str]:
+        a = str(pair.get("dimensionA", "")).strip()
+        b = str(pair.get("dimensionB", "")).strip()
+        return f"{a}-{b}", f"{b}-{a}"
+
+    def _has_score_for_pair(idea: Dict[str, Any], pair: Dict[str, Any]) -> bool:
+        scores = idea.get("scores")
+        if not isinstance(scores, dict):
+            return False
+        k1, k2 = _pair_keys(pair)
+        v1 = scores.get(k1)
+        v2 = scores.get(k2)
+        return v1 is not None or v2 is not None
+
+    def _has_scores_for_pairs(
+        idea: Dict[str, Any], pairs: list[Dict[str, Any]]
+    ) -> bool:
+        return all(_has_score_for_pair(idea, pair) for pair in pairs)
+
+    print("[DEBUG] Evaluation request received:")
+    print(f"  - Mode: {mode}")
+    print(f"  - Incoming ideas count: {len(incoming_ideas)}")
+    print(f"  - Incoming idea IDs: {[i.get('id', 'NO_ID') for i in incoming_ideas]}")
+    print(f"  - Intent: {intent[:50] if intent else 'None'}...")
+    print(f"  - Target IDs: {list(explicit_target_ids)}")
+    print(f"  - Dimension pairs: {len(dimension_pairs)}")
+
+    existing_ids = {i["id"] for i in _list_stored_ideas()}
+    new_ids = []
+    for inc in incoming_ideas:
+        inc_id = inc.get("id") or str(uuid.uuid4())
+        inc["id"] = inc_id
+        if inc_id not in existing_ids:
+            new_ids.append(inc_id)
+        _store_or_update_idea({**inc})
+
+    stored_list = _list_stored_ideas()
+
+    if mode == "full":
+        target_ids_local = {idea.get("id") for idea in stored_list}
+    else:
+        target_ids_local = set(new_ids) | explicit_target_ids
+        if not explicit_target_ids:
+            for idea in stored_list:
+                if not _has_scores_for_pairs(idea, dimension_pairs[:3]):
+                    target_ids_local.add(idea.get("id"))
+
+    if mode == "full":
+        evaluation_input = stored_list
+    else:
+        evaluation_input = []
+        for idea in stored_list:
+            iid = idea.get("id")
+            has_scores = _has_scores_for_pairs(idea, dimension_pairs[:3])
+            idea_copy = idea.copy()
+            if iid in target_ids_local:
+                idea_copy.pop("AlreadyScored", None)
+                evaluation_input.append(idea_copy)
+            else:
+                if has_scores:
+                    idea_copy["AlreadyScored"] = True
+                evaluation_input.append(idea_copy)
+
+    print("[DEBUG] About to call thinker.rank with:")
+    print(f"  - Evaluation input count: {len(evaluation_input)}")
+    print(f"  - Evaluation input IDs: {[i.get('id') for i in evaluation_input]}")
+    print(f"  - Intent length: {len(intent) if intent else 0}")
+    print(f"  - Partial mode: {mode != 'full'}")
 
-    # Rank ideas
-    scored_ideas = thinker.rank(ideas=thinker_ideas, intent=intent)
+    try:
+        scored_ideas = thinker.rank(
+            ideas=evaluation_input,
+            intent=intent,
+            dimension_pairs=dimension_pairs if dimension_pairs else None,
+            user_score_corrections=user_score_corrections,
+            partial=(mode != "full"),
+        )
+        print(
+            f"[DEBUG] thinker.rank returned {len(scored_ideas) if scored_ideas else 0} scored ideas"
+        )
+        if scored_ideas:
+            print(
+                f"[DEBUG] First scored idea: {scored_ideas[0].get('Title', 'NO_TITLE')}"
+            )
+    except Exception as e:
+        print(f"[ERROR] thinker.rank failed: {str(e)}")
+        print(f"[ERROR] Exception type: {type(e).__name__}")
+        import traceback
 
-    # Return in the format expected by TreePlot
-    # Use index-based mapping since LLM changes titles but preserves order
-    response = []
-    for i, idea in enumerate(scored_ideas):
-        # Use index to map back to original ID
-        original_id = original_ids[i] if i < len(original_ids) else f"idea_{i}"
+        print(f"[ERROR] Traceback: {traceback.format_exc()}")
+        scored_ideas = []
+
+    title_maps = [{}, {}, {}]
+    for idea in stored_list:
+        iid = idea.get("id")
+        if not iid:
+            continue
+
+        for key in [idea.get("Title"), idea.get("Name"), idea.get("title")]:
+            if key and key.strip():
+                title_maps[0][key.strip()] = iid
+
+        for raw_name in [idea.get("Name"), idea.get("Title")]:
+            if raw_name and raw_name.strip():
+                formatted = format_name_for_display(raw_name)
+                title_maps[1][formatted] = iid
+
+        for key in [idea.get("Title"), idea.get("Name")]:
+            if key and key.strip():
+                variations = [
+                    key.strip().lower(),
+                    key.strip().replace(" ", "_").lower(),
+                    key.strip().replace("_", " ").lower(),
+                ]
+                for variation in variations:
+                    title_maps[2][variation] = iid
+
+    print("[DEBUG] Title maps built:")
+    print(f"  - Map 0 (original): {list(title_maps[0].keys())}")
+    print(f"  - Map 1 (formatted): {list(title_maps[1].keys())}")
+    print(f"  - Map 2 (variations): {list(title_maps[2].keys())}")
+
+    def find_idea_id(scored_idea):
+        scored_titles = [
+            scored_idea.get("Title", "").strip(),
+            scored_idea.get("Name", "").strip(),
+            scored_idea.get("title", "").strip(),
+        ]
 
-        response.append(
-            {
-                "id": original_id,  # Use index-based mapping
-                "noveltyScore": idea.get("NoveltyScore"),
-                "noveltyReason": idea.get("NoveltyReason", ""),
-                "feasibilityScore": idea.get("FeasibilityScore"),
-                "feasibilityReason": idea.get("FeasibilityReason", ""),
-                "impactScore": idea.get("ImpactScore"),
-                "impactReason": idea.get("ImpactReason", ""),
-            }
-        )
-    return jsonify(response)
+        print(f"[DEBUG] Finding ID for scored idea with titles: {scored_titles}")
+
+        for title in scored_titles:
+            if not title:
+                continue
+
+            for i, title_map in enumerate(title_maps):
+                if title in title_map:
+                    print(
+                        f"[DEBUG] Found exact match in map {i}: '{title}' -> {title_map[title]}"
+                    )
+                    return title_map[title]
+
+            title_lower = title.lower()
+            for i, title_map in enumerate(title_maps):
+                for stored_title, stored_id in title_map.items():
+                    if stored_title.lower() == title_lower:
+                        print(
+                            f"[DEBUG] Found case-insensitive match in map {i}: '{title}' -> {stored_id}"
+                        )
+                        return stored_id
+
+        print(f"[DEBUG] No match found for titles: {scored_titles}")
+        return None
+
+    payloads = []
+    unmatched_ideas = []
+    matched_ids = set()
+
+    pair_count = len(dimension_pairs)
+
+    for i, scored in enumerate(scored_ideas):
+        iid = find_idea_id(scored)
+
+        if not iid and mode == "incremental" and i < len(new_ids):
+            potential_id = new_ids[i]
+            if potential_id in target_ids_local and potential_id not in matched_ids:
+                iid = potential_id
+                print(f"[DEBUG] Fallback ID match: scored[{i}] -> {iid}")
+
+        if not iid:
+            unmatched_ideas.append(
+                {
+                    "title": scored.get("Title", scored.get("Name", "Unknown")),
+                    "scored_keys": list(scored.keys()),
+                    "index": i,
+                }
+            )
+            continue
+
+        if mode == "incremental" and iid not in target_ids_local:
+            continue
+
+        matched_ids.add(iid)
+        if iid and ("-CUSTOM-" in iid or iid.startswith("C-")):
+            print(f"[DEBUG] Custom idea {iid} reasoning fields:")
+            print(f"  Dimension1Reason: {scored.get('Dimension1Reason', '')}")
+            print(f"  Dimension2Reason: {scored.get('Dimension2Reason', '')}")
+            if pair_count >= 3:
+                print(f"  Dimension3Reason: {scored.get('Dimension3Reason', '')}")
+            print(f"  All scored keys: {list(scored.keys())}")
+
+        payload = {
+            "id": iid,
+            "scores": scored.get("scores", {})
+            if isinstance(scored.get("scores"), dict)
+            else {},
+        }
+        payload["dimension1Score"] = scored.get("Dimension1Score")
+        payload["dimension2Score"] = scored.get("Dimension2Score")
+        payload["Dimension1Reason"] = scored.get("Dimension1Reason", "")
+        payload["Dimension2Reason"] = scored.get("Dimension2Reason", "")
+        if pair_count >= 3:
+            payload["dimension3Score"] = scored.get("Dimension3Score")
+            payload["Dimension3Reason"] = scored.get("Dimension3Reason", "")
+        payloads.append(payload)
+
+    print("[DEBUG] Evaluation matching results:")
+    print(f"  - Mode: {mode}")
+    print(f"  - Stored ideas: {len(stored_list)}")
+    print(f"  - Scored ideas from LLM: {len(scored_ideas)}")
+    print(f"  - Target IDs: {list(target_ids_local)}")
+    print(f"  - New IDs: {new_ids}")
+    print(f"  - Successful matches: {len(payloads)}")
+    print(f"  - Failed matches: {len(unmatched_ideas)}")
+
+    if unmatched_ideas:
+        print(f"[WARNING] Could not match {len(unmatched_ideas)} ideas:")
+        for um in unmatched_ideas[:3]:
+            print(
+                f"  - [{um.get('index', '?')}] Title: '{um['title']}', Keys: {um['scored_keys']}"
+            )
+        print(f"[DEBUG] Available stored titles: {list(title_maps[0].keys())}")
+
+    if payloads:
+        print("[DEBUG] Matched payloads:")
+        for p in payloads[:2]:
+            print(
+                f"  - ID: {p['id']}, Scores: D1={p.get('dimension1Score')}, D2={p.get('dimension2Score')}, D3={p.get('dimension3Score')}"
+            )
+
+    _bulk_update_scores(payloads)
+
+    updated_all = _list_stored_ideas()
+
+    client_return = []
+    for i in updated_all:
+        item = {
+            "id": i.get("id"),
+            "title": format_name_for_display(i.get("Name") or i.get("Title")),
+            "content": format_idea_content(i),
+            "originalData": i,
+        }
+
+        if i.get("scores"):
+            item["scores"] = i.get("scores")
+            item["dimension1Score"] = i.get("Dimension1Score")
+            item["dimension2Score"] = i.get("Dimension2Score")
+            item["dimension3Score"] = i.get("Dimension3Score")
+            item["Dimension1Reason"] = i.get("Dimension1Reason", "")
+            item["Dimension2Reason"] = i.get("Dimension2Reason", "")
+            item["Dimension3Reason"] = i.get("Dimension3Reason", "")
+
+        client_return.append(item)
+
+    custom_ideas_in_return = [
+        item
+        for item in client_return
+        if item["id"] and ("-CUSTOM-" in item["id"] or item["id"].startswith("C-"))
+    ]
+    if custom_ideas_in_return:
+        print("[DEBUG] Custom ideas in client return:")
+        for item in custom_ideas_in_return:
+            print(f"  - ID: {item['id']}")
+            print(
+                f"    D1Reason: {item.get('Dimension1Reason', 'MISSING')[:50]}..., D2Reason: {item.get('Dimension2Reason', 'MISSING')[:50]}..., D3Reason: {item.get('Dimension3Reason', 'MISSING')[:50]}..."
+            )
+
+    meta = {
+        "mode": mode,
+        "scoredCount": len(payloads),
+        "totalIdeas": len(updated_all),
+        "targets": list(target_ids_local),
+    }
+    return jsonify({"ideas": client_return, "meta": meta})
 
 
 def format_idea_content(idea: Union[Dict[str, Any], str]) -> str:
@@ -505,16 +1051,16 @@ def format_idea_content(idea: Union[Dict[str, Any], str]) -> str:
     if isinstance(idea, str):
         return idea
 
-    description = idea.get("Description", "")
+    problem = idea.get("Problem", "") or idea.get("Description", "")
     importance = idea.get("Importance", "")
     difficulty = idea.get("Difficulty", "")
     novelty = idea.get("NoveltyComparison", "")
 
     content_sections = [
-        f"**Description:**\n{description}",
-        f"**Impact:**\n{importance}",
-        f"**Feasibility:**\n{difficulty}",
-        f"**Novelty:**\n{novelty}",
+        f"**Problem:**\n{problem}",
+        f"**Importance:**\n{importance}",
+        f"**Difficulty:**\n{difficulty}",
+        f"**Novelty Comparison:**\n{novelty}",
     ]
 
     return "\n\n".join(content_sections)
@@ -549,7 +1095,6 @@ def generate_code() -> Union[Response, tuple[Response, int]]:
 
         print(f"Using pre-configured Coder with model: {coder.model}")
         print(f"Idea keys: {list(idea.keys())}")
-        print(f"Idea has Experiment field: {'Experiment' in idea}")
 
         # Call coder.run() exactly like TinyScientist does
         print("Starting coder.run()...")
@@ -623,17 +1168,14 @@ def generate_paper() -> Union[Response, tuple[Response, int]]:
     idea_data = data.get("idea")
     experiment_dir = data.get("experiment_dir", None)
 
-    s2_api_key = data.get("s2_api_key", None)
-
-    if not s2_api_key:
-        return jsonify({"error": "Semantic Scholar API key is required"}), 400
+    s2_api_key = data.get("s2_api_key", None) or os.environ.get("S2_API_KEY")
 
     if not idea_data:
         print("ERROR: No idea provided in request")
         return jsonify({"error": "No idea provided"}), 400
 
     try:
-        writer_model = session.get("model", "deepseek-chat")  # Get model from session
+        writer_model = session["model"]
         papers_dir = os.path.join(project_root, "generated", "papers")
 
         try:
@@ -651,6 +1193,7 @@ def generate_paper() -> Union[Response, tuple[Response, int]]:
             cost_tracker=BudgetChecker(
                 budget=session_allocation.get("writer"), parent=global_cost_tracker
             ),
+            agent_sdk=session.get("agent_sdk"),
         )
         print(f"Writer initialized for this request with model: {writer.model}")
 
@@ -769,7 +1312,7 @@ def review_paper() -> Union[Response, tuple[Response, int]]:
         return jsonify({"error": "No JSON data provided"}), 400
 
     pdf_path = data.get("pdf_path")
-    s2_api_key = data.get("s2_api_key")
+    s2_api_key = data.get("s2_api_key") or os.environ.get("S2_API_KEY")
 
     if not pdf_path:
         return jsonify({"error": "No PDF path provided"}), 400
@@ -803,7 +1346,7 @@ def review_paper() -> Union[Response, tuple[Response, int]]:
         # Check if file exists
         if not os.path.exists(absolute_pdf_path):
             return jsonify({"error": "PDF file not found"}), 404
-        reviewer_model = session.get("model", "deepseek-chat")  # Get model from session
+        reviewer_model = session["model"]
         print("🔍 Starting paper review...")
         try:
             _, _, session_allocation = TinyScientist.resolve_budget_settings(
@@ -817,12 +1360,13 @@ def review_paper() -> Union[Response, tuple[Response, int]]:
             tools=[],
             num_reviews=1,
             num_reflections=1,
-            temperature=0.75,
+            temperature=1.0,
             s2_api_key=s2_api_key,
             cost_tracker=BudgetChecker(
                 budget=session_allocation.get("reviewer"),
                 parent=global_cost_tracker,
             ),
+            agent_sdk=session.get("agent_sdk"),
         )
         # Call reviewer.review() to get a single review
         review_result = reviewer.review(absolute_pdf_path)
@@ -850,6 +1394,16 @@ def review_paper() -> Union[Response, tuple[Response, int]]:
         return jsonify({"error": str(e), "success": False}), 500
 
 
+@app.route("/api/clear-session", methods=["POST"])
+def clear_session() -> Union[Response, tuple[Response, int]]:
+    """Clear session state and reset ID counters for a fresh start."""
+    global global_idea_storage
+    global_idea_storage = {}
+    _reset_id_counters()
+    session.clear()
+    return jsonify({"status": "cleared"})
+
+
 if __name__ == "__main__":
     # Configure Flask for long-running requests
     app.config["SEND_FILE_MAX_AGE_DEFAULT"] = 0
diff --git a/config.template.toml b/config.template.toml
index cbfda224..5c1c7808 100644
--- a/config.template.toml
+++ b/config.template.toml
@@ -9,7 +9,7 @@
 #name = "AI Scientist"
 
 # LLM Model
-model = "gpt-4o"
+model = "gpt-5-mini"
 
 # Temperature for controlling randomness in responses
 temperature = 0.75
diff --git a/examples/code.py b/examples/code.py
index 092ff54d..235a4157 100644
--- a/examples/code.py
+++ b/examples/code.py
@@ -3,7 +3,6 @@
 import os
 from typing import Any, Dict
 
-import _bootstrap
 from tiny_scientist.budget_checker import BudgetChecker
 
 # Import the Coder class - assuming it's in a module called "coder"
diff --git a/examples/demo.py b/examples/demo.py
index 49555f3b..87810d22 100644
--- a/examples/demo.py
+++ b/examples/demo.py
@@ -1,7 +1,6 @@
 import json
 import os
 
-import _bootstrap
 from tiny_scientist import TinyScientist
 
 scientist = TinyScientist(
diff --git a/examples/draw.py b/examples/draw.py
index 044275f3..59d1ca84 100644
--- a/examples/draw.py
+++ b/examples/draw.py
@@ -3,7 +3,6 @@
 import json
 import os
 
-import _bootstrap
 from tiny_scientist.tool_impls import DrawerTool
 
 
@@ -25,8 +24,8 @@ def parse_args() -> argparse.Namespace:
     parser.add_argument(
         "--model",
         type=str,
-        default="claude-3-5-sonnet-20241022",
-        help="LLM model to use (default: claude-3-5-sonnet-20241022)",
+        default="gpt-5-mini",
+        help="LLM model to use (default: gpt-5-mini)",
     )
     parser.add_argument(
         "--output",
diff --git a/examples/hf_auto_eval.py b/examples/hf_auto_eval.py
index b236b711..5f01ba36 100644
--- a/examples/hf_auto_eval.py
+++ b/examples/hf_auto_eval.py
@@ -1,6 +1,5 @@
 import argparse
 
-import _bootstrap
 from tiny_scientist import TinyScientist
 
 
diff --git a/examples/latex_compile.py b/examples/latex_compile.py
index ed2cc2dc..c7dbbe89 100644
--- a/examples/latex_compile.py
+++ b/examples/latex_compile.py
@@ -1,10 +1,9 @@
-import _bootstrap
 from tiny_scientist.utils.llm import create_client
 from tiny_scientist.utils.output_formatter import ACLOutputFormatter
 from tiny_scientist.utils.water_marker import WaterMarker
 
-client = create_client(model="gpt-4o")
-formatter = ACLOutputFormatter(model="gpt-4o", client=client)
+client = create_client(model="gpt-5-mini")
+formatter = ACLOutputFormatter(model="gpt-5-mini", client=client)
 watermarker = WaterMarker()
 formatter._compile_latex(
     cwd="../latex", output_pdf_path="../latex/output.pdf", timeout=1000
diff --git a/examples/review.py b/examples/review.py
index e006c091..80fc43d5 100644
--- a/examples/review.py
+++ b/examples/review.py
@@ -4,7 +4,6 @@
 import os.path as osp
 from typing import Any, List
 
-import _bootstrap
 from tiny_scientist.reviewer import Reviewer
 from tiny_scientist.utils.llm import AVAILABLE_LLMS
 
diff --git a/examples/think.py b/examples/think.py
index 3ef30080..21af211d 100644
--- a/examples/think.py
+++ b/examples/think.py
@@ -4,7 +4,6 @@
 import os
 from typing import Any, Dict, cast
 
-import _bootstrap
 from tiny_scientist.thinker import Thinker
 from tiny_scientist.utils.input_formatter import InputFormatter
 from tiny_scientist.utils.llm import AVAILABLE_LLMS
diff --git a/examples/write.py b/examples/write.py
index 2f920079..166a96e3 100644
--- a/examples/write.py
+++ b/examples/write.py
@@ -3,7 +3,6 @@
 import json
 import os
 
-import _bootstrap
 from tiny_scientist.writer import Writer
 
 
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index bbdba2a3..14977484 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,6 +9,8 @@
       "version": "0.1.0",
       "dependencies": {
         "@monaco-editor/react": "^4.7.0",
+        "@react-three/drei": "^9.122.0",
+        "@react-three/fiber": "^8.18.0",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
@@ -24,6 +26,7 @@
         "recharts": "^2.13.3",
         "remark-gfm": "^4.0.0",
         "socket.io-client": "^4.8.1",
+        "three": "^0.181.2",
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
@@ -2241,6 +2244,12 @@
         "postcss-selector-parser": "^6.0.10"
       }
     },
+    "node_modules/@dimforge/rapier3d-compat": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@dimforge/rapier3d-compat/-/rapier3d-compat-0.12.0.tgz",
+      "integrity": "sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow==",
+      "license": "Apache-2.0"
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz",
@@ -2829,6 +2838,12 @@
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz",
       "integrity": "sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw=="
     },
+    "node_modules/@mediapipe/tasks-vision": {
+      "version": "0.10.17",
+      "resolved": "https://registry.npmjs.org/@mediapipe/tasks-vision/-/tasks-vision-0.10.17.tgz",
+      "integrity": "sha512-CZWV/q6TTe8ta61cZXjfnnHsfWIdFhms03M9T7Cnd5y2mdpylJM0rF1qRq+wsQVRMLz1OYPVEBU9ph2Bx8cxrg==",
+      "license": "Apache-2.0"
+    },
     "node_modules/@monaco-editor/loader": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.5.0.tgz",
@@ -2852,6 +2867,18 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/@monogrid/gainmap-js": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@monogrid/gainmap-js/-/gainmap-js-3.4.0.tgz",
+      "integrity": "sha512-2Z0FATFHaoYJ8b+Y4y4Hgfn3FRFwuU5zRrk+9dFWp4uGAdHGqVEdP7HP+gLA3X469KXHmfupJaUbKo1b/aDKIg==",
+      "license": "MIT",
+      "dependencies": {
+        "promise-worker-transferable": "^1.0.4"
+      },
+      "peerDependencies": {
+        "three": ">= 0.159.0"
+      }
+    },
     "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -2968,6 +2995,195 @@
         }
       }
     },
+    "node_modules/@react-spring/animated": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.7.5.tgz",
+      "integrity": "sha512-Tqrwz7pIlsSDITzxoLS3n/v/YCUHQdOIKtOJf4yL6kYVSDTSmVK1LI1Q3M/uu2Sx4X3pIWF3xLUhlsA6SPNTNg==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-spring/shared": "~9.7.5",
+        "@react-spring/types": "~9.7.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-spring/core": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.7.5.tgz",
+      "integrity": "sha512-rmEqcxRcu7dWh7MnCcMXLvrf6/SDlSokLaLTxiPlAYi11nN3B5oiCUAblO72o+9z/87j2uzxa2Inm8UbLjXA+w==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-spring/animated": "~9.7.5",
+        "@react-spring/shared": "~9.7.5",
+        "@react-spring/types": "~9.7.5"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-spring/donate"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-spring/rafz": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.7.5.tgz",
+      "integrity": "sha512-5ZenDQMC48wjUzPAm1EtwQ5Ot3bLIAwwqP2w2owG5KoNdNHpEJV263nGhCeKKmuA3vG2zLLOdu3or6kuDjA6Aw==",
+      "license": "MIT"
+    },
+    "node_modules/@react-spring/shared": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.7.5.tgz",
+      "integrity": "sha512-wdtoJrhUeeyD/PP/zo+np2s1Z820Ohr/BbuVYv+3dVLW7WctoiN7std8rISoYoHpUXtbkpesSKuPIw/6U1w1Pw==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-spring/rafz": "~9.7.5",
+        "@react-spring/types": "~9.7.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-spring/three": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/three/-/three-9.7.5.tgz",
+      "integrity": "sha512-RxIsCoQfUqOS3POmhVHa1wdWS0wyHAUway73uRLp3GAL5U2iYVNdnzQsep6M2NZ994BlW8TcKuMtQHUqOsy6WA==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-spring/animated": "~9.7.5",
+        "@react-spring/core": "~9.7.5",
+        "@react-spring/shared": "~9.7.5",
+        "@react-spring/types": "~9.7.5"
+      },
+      "peerDependencies": {
+        "@react-three/fiber": ">=6.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "three": ">=0.126"
+      }
+    },
+    "node_modules/@react-spring/types": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.7.5.tgz",
+      "integrity": "sha512-HVj7LrZ4ReHWBimBvu2SKND3cDVUPWKLqRTmWe/fNY6o1owGOX0cAHbdPDTMelgBlVbrTKrre6lFkhqGZErK/g==",
+      "license": "MIT"
+    },
+    "node_modules/@react-three/drei": {
+      "version": "9.122.0",
+      "resolved": "https://registry.npmjs.org/@react-three/drei/-/drei-9.122.0.tgz",
+      "integrity": "sha512-SEO/F/rBCTjlLez7WAlpys+iGe9hty4rNgjZvgkQeXFSiwqD4Hbk/wNHMAbdd8vprO2Aj81mihv4dF5bC7D0CA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.26.0",
+        "@mediapipe/tasks-vision": "0.10.17",
+        "@monogrid/gainmap-js": "^3.0.6",
+        "@react-spring/three": "~9.7.5",
+        "@use-gesture/react": "^10.3.1",
+        "camera-controls": "^2.9.0",
+        "cross-env": "^7.0.3",
+        "detect-gpu": "^5.0.56",
+        "glsl-noise": "^0.0.0",
+        "hls.js": "^1.5.17",
+        "maath": "^0.10.8",
+        "meshline": "^3.3.1",
+        "react-composer": "^5.0.3",
+        "stats-gl": "^2.2.8",
+        "stats.js": "^0.17.0",
+        "suspend-react": "^0.1.3",
+        "three-mesh-bvh": "^0.7.8",
+        "three-stdlib": "^2.35.6",
+        "troika-three-text": "^0.52.0",
+        "tunnel-rat": "^0.1.2",
+        "utility-types": "^3.11.0",
+        "zustand": "^5.0.1"
+      },
+      "peerDependencies": {
+        "@react-three/fiber": "^8",
+        "react": "^18",
+        "react-dom": "^18",
+        "three": ">=0.137"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@react-three/fiber": {
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-8.18.0.tgz",
+      "integrity": "sha512-FYZZqD0UUHUswKz3LQl2Z7H24AhD14XGTsIRw3SJaXUxyfVMi+1yiZGmqTcPt/CkPpdU7rrxqcyQ1zJE5DjvIQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.17.8",
+        "@types/react-reconciler": "^0.26.7",
+        "@types/webxr": "*",
+        "base64-js": "^1.5.1",
+        "buffer": "^6.0.3",
+        "its-fine": "^1.0.6",
+        "react-reconciler": "^0.27.0",
+        "react-use-measure": "^2.1.7",
+        "scheduler": "^0.21.0",
+        "suspend-react": "^0.1.3",
+        "zustand": "^3.7.1"
+      },
+      "peerDependencies": {
+        "expo": ">=43.0",
+        "expo-asset": ">=8.4",
+        "expo-file-system": ">=11.0",
+        "expo-gl": ">=11.0",
+        "react": ">=18 <19",
+        "react-dom": ">=18 <19",
+        "react-native": ">=0.64",
+        "three": ">=0.133"
+      },
+      "peerDependenciesMeta": {
+        "expo": {
+          "optional": true
+        },
+        "expo-asset": {
+          "optional": true
+        },
+        "expo-file-system": {
+          "optional": true
+        },
+        "expo-gl": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@react-three/fiber/node_modules/scheduler": {
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0.tgz",
+      "integrity": "sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/@react-three/fiber/node_modules/zustand": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-3.7.2.tgz",
+      "integrity": "sha512-PIJDIZKtokhof+9+60cpockVOq05sJzHCriyvaLBmEJixseQ1a5Kdov6fWZfWOu5SK9c+FhH1jU0tntLxRJYMA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -3614,6 +3830,12 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/@tweenjs/tween.js": {
+      "version": "23.1.3",
+      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.3.tgz",
+      "integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==",
+      "license": "MIT"
+    },
     "node_modules/@types/aria-query": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
@@ -3753,6 +3975,12 @@
         "@types/ms": "*"
       }
     },
+    "node_modules/@types/draco3d": {
+      "version": "1.4.10",
+      "resolved": "https://registry.npmjs.org/@types/draco3d/-/draco3d-1.4.10.tgz",
+      "integrity": "sha512-AX22jp8Y7wwaBgAixaSvkoG4M/+PlAcm3Qs4OW8yT9DM4xUpWKeFhLueTAyZF39pviAdcDdeJoACapiAceqNcw==",
+      "license": "MIT"
+    },
     "node_modules/@types/eslint": {
       "version": "8.56.12",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.12.tgz",
@@ -4114,6 +4342,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/offscreencanvas": {
+      "version": "2019.7.3",
+      "resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.3.tgz",
+      "integrity": "sha512-ieXiYmgSRXUDeOntE1InxjWyvEelZGP63M+cGuquuRLuIKKT1osnkXjxev9B7d1nXSug5vpunx+gNlbVxMlC9A==",
+      "license": "MIT"
+    },
     "node_modules/@types/parse-json": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
@@ -4161,6 +4395,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-reconciler": {
+      "version": "0.26.7",
+      "resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.26.7.tgz",
+      "integrity": "sha512-mBDYl8x+oyPX/VBb3E638N0B7xG+SPk/EAMcVPeexqus/5aTpTphQi0curhhshOqRrc9t6OPoJfEUkbymse/lQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -4219,6 +4462,12 @@
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz",
       "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw=="
     },
+    "node_modules/@types/stats.js": {
+      "version": "0.17.4",
+      "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.4.tgz",
+      "integrity": "sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA==",
+      "license": "MIT"
+    },
     "node_modules/@types/testing-library__jest-dom": {
       "version": "5.14.9",
       "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.9.tgz",
@@ -4227,6 +4476,21 @@
         "@types/jest": "*"
       }
     },
+    "node_modules/@types/three": {
+      "version": "0.182.0",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.182.0.tgz",
+      "integrity": "sha512-WByN9V3Sbwbe2OkWuSGyoqQO8Du6yhYaXtXLoA5FkKTUJorZ+yOHBZ35zUUPQXlAKABZmbYp5oAqpA4RBjtJ/Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@dimforge/rapier3d-compat": "~0.12.0",
+        "@tweenjs/tween.js": "~23.1.3",
+        "@types/stats.js": "*",
+        "@types/webxr": ">=0.5.17",
+        "@webgpu/types": "*",
+        "fflate": "~0.8.2",
+        "meshoptimizer": "~0.22.0"
+      }
+    },
     "node_modules/@types/trusted-types": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
@@ -4238,6 +4502,12 @@
       "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
       "license": "MIT"
     },
+    "node_modules/@types/webxr": {
+      "version": "0.5.24",
+      "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.24.tgz",
+      "integrity": "sha512-h8fgEd/DpoS9CBrjEQXR+dIDraopAEfu4wYVNY2tEPwk60stPWhvZMf4Foo5FakuQ7HFZoa8WceaWFervK2Ovg==",
+      "license": "MIT"
+    },
     "node_modules/@types/ws": {
       "version": "8.5.13",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.13.tgz",
@@ -4482,6 +4752,24 @@
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
       "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ=="
     },
+    "node_modules/@use-gesture/core": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/@use-gesture/core/-/core-10.3.1.tgz",
+      "integrity": "sha512-WcINiDt8WjqBdUXye25anHiNxPc0VOrlT8F6LLkU6cycrOGUDyY/yyFmsg3k8i5OLvv25llc0QC45GhR/C8llw==",
+      "license": "MIT"
+    },
+    "node_modules/@use-gesture/react": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/@use-gesture/react/-/react-10.3.1.tgz",
+      "integrity": "sha512-Yy19y6O2GJq8f7CHf7L0nxL8bf4PZCPaVOCgJrusOeFHY1LvHgYXnmnXg6N5iwAnbgbZCDjo60SiM6IPJi9C5g==",
+      "license": "MIT",
+      "dependencies": {
+        "@use-gesture/core": "10.3.1"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0"
+      }
+    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz",
@@ -4613,6 +4901,12 @@
         "@xtuc/long": "4.2.2"
       }
     },
+    "node_modules/@webgpu/types": {
+      "version": "0.1.69",
+      "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.69.tgz",
+      "integrity": "sha512-RPmm6kgRbI8e98zSD3RVACvnuktIja5+yLgDAkTmxLr90BEwdTXRQWNLF3ETTTyH/8mKhznZuN5AveXYFEsMGQ==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -5411,7 +5705,6 @@
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
       "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -5447,6 +5740,15 @@
         "node": ">= 8.0.0"
       }
     },
+    "node_modules/bidi-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
+      "integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==",
+      "license": "MIT",
+      "dependencies": {
+        "require-from-string": "^2.0.2"
+      }
+    },
     "node_modules/big.js": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
@@ -5611,7 +5913,6 @@
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
       "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -5709,6 +6010,15 @@
         "node": ">= 6"
       }
     },
+    "node_modules/camera-controls": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/camera-controls/-/camera-controls-2.10.1.tgz",
+      "integrity": "sha512-KnaKdcvkBJ1Irbrzl8XD6WtZltkRjp869Jx8c0ujs9K+9WD+1D7ryBsCiVqJYUqt6i/HR5FxT7RLASieUD+Q5w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "three": ">=0.126.1"
+      }
+    },
     "node_modules/caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -5721,9 +6031,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001680",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001680.tgz",
-      "integrity": "sha512-rPQy70G6AGUMnbwS1z6Xg+RkHYPAi18ihs47GH0jcxIG7wArmPgY3XbS2sRdBbxJljp3thdT8BIqv9ccCypiPA==",
+      "version": "1.0.30001770",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001770.tgz",
+      "integrity": "sha512-x/2CLQ1jHENRbHg5PSId2sXq1CIO1CISvwWAj027ltMVG2UNgW+w9oH2+HzgEIRFembL8bUlXtfbBHR1fCg2xw==",
       "funding": [
         {
           "type": "opencollective",
@@ -5737,7 +6047,8 @@
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
-      ]
+      ],
+      "license": "CC-BY-4.0"
     },
     "node_modules/case-sensitive-paths-webpack-plugin": {
       "version": "2.4.0",
@@ -6266,6 +6577,24 @@
         "node": ">=10"
       }
     },
+    "node_modules/cross-env": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
+      "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
+      "license": "MIT",
+      "dependencies": {
+        "cross-spawn": "^7.0.1"
+      },
+      "bin": {
+        "cross-env": "src/bin/cross-env.js",
+        "cross-env-shell": "src/bin/cross-env-shell.js"
+      },
+      "engines": {
+        "node": ">=10.14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -7287,6 +7616,15 @@
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
+    "node_modules/detect-gpu": {
+      "version": "5.0.70",
+      "resolved": "https://registry.npmjs.org/detect-gpu/-/detect-gpu-5.0.70.tgz",
+      "integrity": "sha512-bqerEP1Ese6nt3rFkwPnGbsUF9a4q+gMmpTVVOEzoCyeCc+y7/RvJnQZJx1JwhgQI5Ntg0Kgat8Uu7XpBqnz1w==",
+      "license": "MIT",
+      "dependencies": {
+        "webgl-constants": "^1.1.1"
+      }
+    },
     "node_modules/detect-newline": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
@@ -7508,6 +7846,12 @@
       "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
       "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA=="
     },
+    "node_modules/draco3d": {
+      "version": "1.5.7",
+      "resolved": "https://registry.npmjs.org/draco3d/-/draco3d-1.5.7.tgz",
+      "integrity": "sha512-m6WCKt/erDXcw+70IJXnG7M3awwQPAsZvJGX5zY7beBqpELw6RDGkYVU0W43AFxye4pDZ5i2Lbyc/NNGqwjUVQ==",
+      "license": "Apache-2.0"
+    },
     "node_modules/duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
@@ -8730,6 +9074,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "license": "MIT"
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -9370,6 +9720,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/glsl-noise": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/glsl-noise/-/glsl-noise-0.0.0.tgz",
+      "integrity": "sha512-b/ZCF6amfAUb7dJM/MxRs7AetQEahYzJ8PtgfrmEdtw6uyGOr+ZSGtgjFm6mfsBkxJ4d2W7kg+Nlqzqvn3Bc0w==",
+      "license": "MIT"
+    },
     "node_modules/gopd": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
@@ -9537,6 +9893,12 @@
         "he": "bin/he"
       }
     },
+    "node_modules/hls.js": {
+      "version": "1.6.15",
+      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.6.15.tgz",
+      "integrity": "sha512-E3a5VwgXimGHwpRGV+WxRTKeSp2DW5DI5MWv34ulL3t5UNmyJWCQ1KmLEHbYzcfThfXG8amBL+fCYPneGHC4VA==",
+      "license": "Apache-2.0"
+    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -9843,7 +10205,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
       "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -10344,6 +10705,12 @@
       "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
       "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ=="
     },
+    "node_modules/is-promise": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
+      "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==",
+      "license": "MIT"
+    },
     "node_modules/is-regex": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
@@ -10634,6 +11001,27 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/its-fine": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/its-fine/-/its-fine-1.2.5.tgz",
+      "integrity": "sha512-fXtDA0X0t0eBYAGLVM5YsgJGsJ5jEmqZEPrGbzdf5awjv0xE7nqv3TVnvtUF060Tkes15DbDAKW/I48vsb6SyA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react-reconciler": "^0.28.0"
+      },
+      "peerDependencies": {
+        "react": ">=18.0"
+      }
+    },
+    "node_modules/its-fine/node_modules/@types/react-reconciler": {
+      "version": "0.28.9",
+      "resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.28.9.tgz",
+      "integrity": "sha512-HHM3nxyUZ3zAylX8ZEyrDNd2XZOnQ0D5XfunJF5FLQnZbHHYq4UWvW1QfelQNXv1ICNkwYhfxjwfnqivYB6bFg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/jackspeak": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
@@ -11972,6 +12360,16 @@
         "lz-string": "bin/bin.js"
       }
     },
+    "node_modules/maath": {
+      "version": "0.10.8",
+      "resolved": "https://registry.npmjs.org/maath/-/maath-0.10.8.tgz",
+      "integrity": "sha512-tRvbDF0Pgqz+9XUa4jjfgAQ8/aPKmQdWXilFu2tMy4GWj4NOsx99HlULO4IeREfbO3a0sA145DZYyvXPkybm0g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/three": ">=0.134.0",
+        "three": ">=0.134.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.25.9",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
@@ -12347,6 +12745,21 @@
         "node": ">= 8"
       }
     },
+    "node_modules/meshline": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/meshline/-/meshline-3.3.1.tgz",
+      "integrity": "sha512-/TQj+JdZkeSUOl5Mk2J7eLcYTLiQm2IDzmlSvYm7ov15anEcDJ92GHqqazxTSreeNgfnYu24kiEvvv0WlbCdFQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "three": ">=0.137"
+      }
+    },
+    "node_modules/meshoptimizer": {
+      "version": "0.22.0",
+      "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.22.0.tgz",
+      "integrity": "sha512-IebiK79sqIy+E4EgOr+CAw+Ke8hAspXKzBd0JdgEmPHiAwmvEj2S4h1rfvo+o/BnfEYd/jAOg5IeeIjzlzSnDg==",
+      "license": "MIT"
+    },
     "node_modules/methods": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
@@ -15113,6 +15526,12 @@
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
+    "node_modules/potpack": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz",
+      "integrity": "sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==",
+      "license": "ISC"
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -15178,6 +15597,16 @@
         "asap": "~2.0.6"
       }
     },
+    "node_modules/promise-worker-transferable": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/promise-worker-transferable/-/promise-worker-transferable-1.0.4.tgz",
+      "integrity": "sha512-bN+0ehEnrXfxV2ZQvU2PetO0n4gqBD4ulq3MI1WOPLgr7/Mg9yRQkX5+0v1vagr74ZTsl7XtzlaYDo2EuCeYJw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "is-promise": "^2.1.0",
+        "lie": "^3.0.2"
+      }
+    },
     "node_modules/prompts": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
@@ -15380,6 +15809,18 @@
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
       "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
     },
+    "node_modules/react-composer": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/react-composer/-/react-composer-5.0.3.tgz",
+      "integrity": "sha512-1uWd07EME6XZvMfapwZmc7NgCZqDemcvicRi3wMJzXsQLvZ3L7fTHVyPy1bZdnWXM4iPjYuNE+uJ41MLKeTtnA==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.6.0"
+      },
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -15528,6 +15969,31 @@
         "react": ">=18"
       }
     },
+    "node_modules/react-reconciler": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.27.0.tgz",
+      "integrity": "sha512-HmMDKciQjYmBRGuuhIaKA1ba/7a+UsM5FzOZsMO2JYHt9Jh8reCb7j1eDC95NOyUlKM9KRyvdx0flBuDvYSBoA==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.21.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0"
+      }
+    },
+    "node_modules/react-reconciler/node_modules/scheduler": {
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0.tgz",
+      "integrity": "sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -15637,6 +16103,21 @@
         "react-dom": ">=16.6.0"
       }
     },
+    "node_modules/react-use-measure": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.7.tgz",
+      "integrity": "sha512-KrvcAo13I/60HpwGO5jpW7E9DfusKyLPLvuHlUyP5zqnmAPhNc6qTRjUQrdTADl0lpPpDVU2/Gg51UlOGHXbdg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.13",
+        "react-dom": ">=16.13"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -16884,6 +17365,32 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/stats-gl": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/stats-gl/-/stats-gl-2.4.2.tgz",
+      "integrity": "sha512-g5O9B0hm9CvnM36+v7SFl39T7hmAlv541tU81ME8YeSb3i1CIP5/QdDeSB3A0la0bKNHpxpwxOVRo2wFTYEosQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/three": "*",
+        "three": "^0.170.0"
+      },
+      "peerDependencies": {
+        "@types/three": "*",
+        "three": "*"
+      }
+    },
+    "node_modules/stats-gl/node_modules/three": {
+      "version": "0.170.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.170.0.tgz",
+      "integrity": "sha512-FQK+LEpYc0fBD+J8g6oSEyyNzjp+Q7Ks1C568WWaoMRLW+TkNNWmenWeGgJjV105Gd+p/2ql1ZcjYvNiPZBhuQ==",
+      "license": "MIT"
+    },
+    "node_modules/stats.js": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/stats.js/-/stats.js-0.17.0.tgz",
+      "integrity": "sha512-hNKz8phvYLPEcRkeG1rsGmV5ChMjKDAWU7/OJJdDErPBNChQXxCo3WZurGpnWc6gZhAzEPFad1aVgyOANH1sMw==",
+      "license": "MIT"
+    },
     "node_modules/statuses": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
@@ -17321,6 +17828,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/suspend-react": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/suspend-react/-/suspend-react-0.1.3.tgz",
+      "integrity": "sha512-aqldKgX9aZqpoDp3e8/BZ8Dm7x1pJl+qI3ZKxDN0i/IQTWUwBx/ManmlVJ3wowqbno6c2bmiIfs+Um6LbsjJyQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=17.0"
+      }
+    },
     "node_modules/svg-parser": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
@@ -17679,6 +18195,45 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/three": {
+      "version": "0.181.2",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.181.2.tgz",
+      "integrity": "sha512-k/CjiZ80bYss6Qs7/ex1TBlPD11whT9oKfT8oTGiHa34W4JRd1NiH/Tr1DbHWQ2/vMUypxksLnF2CfmlmM5XFQ==",
+      "license": "MIT"
+    },
+    "node_modules/three-mesh-bvh": {
+      "version": "0.7.8",
+      "resolved": "https://registry.npmjs.org/three-mesh-bvh/-/three-mesh-bvh-0.7.8.tgz",
+      "integrity": "sha512-BGEZTOIC14U0XIRw3tO4jY7IjP7n7v24nv9JXS1CyeVRWOCkcOMhRnmENUjuV39gktAw4Ofhr0OvIAiTspQrrw==",
+      "deprecated": "Deprecated due to three.js version incompatibility. Please use v0.8.0, instead.",
+      "license": "MIT",
+      "peerDependencies": {
+        "three": ">= 0.151.0"
+      }
+    },
+    "node_modules/three-stdlib": {
+      "version": "2.36.1",
+      "resolved": "https://registry.npmjs.org/three-stdlib/-/three-stdlib-2.36.1.tgz",
+      "integrity": "sha512-XyGQrFmNQ5O/IoKm556ftwKsBg11TIb301MB5dWNicziQBEs2g3gtOYIf7pFiLa0zI2gUwhtCjv9fmjnxKZ1Cg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/draco3d": "^1.4.0",
+        "@types/offscreencanvas": "^2019.6.4",
+        "@types/webxr": "^0.5.2",
+        "draco3d": "^1.4.1",
+        "fflate": "^0.6.9",
+        "potpack": "^1.0.1"
+      },
+      "peerDependencies": {
+        "three": ">=0.128.0"
+      }
+    },
+    "node_modules/three-stdlib/node_modules/fflate": {
+      "version": "0.6.10",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.6.10.tgz",
+      "integrity": "sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==",
+      "license": "MIT"
+    },
     "node_modules/throat": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/throat/-/throat-6.0.2.tgz",
@@ -17761,6 +18316,36 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/troika-three-text": {
+      "version": "0.52.4",
+      "resolved": "https://registry.npmjs.org/troika-three-text/-/troika-three-text-0.52.4.tgz",
+      "integrity": "sha512-V50EwcYGruV5rUZ9F4aNsrytGdKcXKALjEtQXIOBfhVoZU9VAqZNIoGQ3TMiooVqFAbR1w15T+f+8gkzoFzawg==",
+      "license": "MIT",
+      "dependencies": {
+        "bidi-js": "^1.0.2",
+        "troika-three-utils": "^0.52.4",
+        "troika-worker-utils": "^0.52.0",
+        "webgl-sdf-generator": "1.1.1"
+      },
+      "peerDependencies": {
+        "three": ">=0.125.0"
+      }
+    },
+    "node_modules/troika-three-utils": {
+      "version": "0.52.4",
+      "resolved": "https://registry.npmjs.org/troika-three-utils/-/troika-three-utils-0.52.4.tgz",
+      "integrity": "sha512-NORAStSVa/BDiG52Mfudk4j1FG4jC4ILutB3foPnfGbOeIs9+G5vZLa0pnmnaftZUGm4UwSoqEpWdqvC7zms3A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "three": ">=0.125.0"
+      }
+    },
+    "node_modules/troika-worker-utils": {
+      "version": "0.52.0",
+      "resolved": "https://registry.npmjs.org/troika-worker-utils/-/troika-worker-utils-0.52.0.tgz",
+      "integrity": "sha512-W1CpvTHykaPH5brv5VHLfQo9D1OYuo0cSBEUQFFT/nBUzM8iD6Lq2/tgG/f1OelbAS1WtaTPQzE5uM49egnngw==",
+      "license": "MIT"
+    },
     "node_modules/trough": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/trough/-/trough-2.2.0.tgz",
@@ -17835,6 +18420,43 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
     },
+    "node_modules/tunnel-rat": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/tunnel-rat/-/tunnel-rat-0.1.2.tgz",
+      "integrity": "sha512-lR5VHmkPhzdhrM092lI2nACsLO4QubF0/yoOhzX7c+wIpbN1GjHNzCc91QlpxBi+cnx8vVJ+Ur6vL5cEoQPFpQ==",
+      "license": "MIT",
+      "dependencies": {
+        "zustand": "^4.3.2"
+      }
+    },
+    "node_modules/tunnel-rat/node_modules/zustand": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
+      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
+      "license": "MIT",
+      "dependencies": {
+        "use-sync-external-store": "^1.2.2"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -18213,6 +18835,15 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -18237,6 +18868,15 @@
       "resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz",
       "integrity": "sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA=="
     },
+    "node_modules/utility-types": {
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.11.0.tgz",
+      "integrity": "sha512-6Z7Ma2aVEWisaL6TvBCy7P8rm2LQoPv6dJ7ecIaIixHcwfbJ0x7mWdbcwlIM5IGQxPZSFYeqRCqlOOeKoJYMkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
     "node_modules/utils-merge": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
@@ -18398,6 +19038,17 @@
       "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-2.1.4.tgz",
       "integrity": "sha512-sVWcwhU5mX6crfI5Vd2dC4qchyTqxV8URinzt25XqVh+bHEPGH4C3NPrNionCP7Obx59wrYEbNlw4Z8sjALzZg=="
     },
+    "node_modules/webgl-constants": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/webgl-constants/-/webgl-constants-1.1.1.tgz",
+      "integrity": "sha512-LkBXKjU5r9vAW7Gcu3T5u+5cvSvh5WwINdr0C+9jpzVB41cjQAP5ePArDtk/WHYdVj0GefCgM73BA7FlIiNtdg=="
+    },
+    "node_modules/webgl-sdf-generator": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/webgl-sdf-generator/-/webgl-sdf-generator-1.1.1.tgz",
+      "integrity": "sha512-9Z0JcMTFxeE+b2x1LJTdnaT8rT8aEp7MVxkNwoycNmJWwPdzoXzMh0BjJSh/AEFP+KPYZUli814h8bJZFIZ2jA==",
+      "license": "MIT"
+    },
     "node_modules/webidl-conversions": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz",
@@ -19240,6 +19891,35 @@
         "url": "https://github.com/sponsors/colinhacks"
       }
     },
+    "node_modules/zustand": {
+      "version": "5.0.11",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.11.tgz",
+      "integrity": "sha512-fdZY+dk7zn/vbWNCYmzZULHRrss0jx5pPFiOuMZ/5HJN6Yv3u+1Wswy/4MpZEkEGhtNH+pwxZB8OKgUBPzYAGg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "immer": ">=9.0.6",
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/zwitch": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index bd5d8fa2..868117e6 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -5,6 +5,8 @@
   "proxy": "http://localhost:5000",
   "dependencies": {
     "@monaco-editor/react": "^4.7.0",
+    "@react-three/drei": "^9.122.0",
+    "@react-three/fiber": "^8.18.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -20,11 +22,12 @@
     "recharts": "^2.13.3",
     "remark-gfm": "^4.0.0",
     "socket.io-client": "^4.8.1",
+    "three": "^0.181.2",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start": "GENERATE_SOURCEMAP=false react-scripts start",
+    "build": "GENERATE_SOURCEMAP=false react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "shadcn-ui": "shadcn-ui"
diff --git a/frontend/src/App.test.js b/frontend/src/App.test.js
index 1f03afee..cb8484bc 100644
--- a/frontend/src/App.test.js
+++ b/frontend/src/App.test.js
@@ -1,8 +1,14 @@
-import { render, screen } from '@testing-library/react';
 import App from './App';
+import { render, screen } from '@testing-library/react';
+
+jest.mock('./components/TreePlotVisualization', () => {
+  const React = require('react');
+  return function MockedTreePlotVisualization() {
+    return React.createElement('div', { 'data-testid': 'tree-plot-visualization' });
+  };
+});
 
-test('renders learn react link', () => {
+test('renders the main visualization container', () => {
   render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
+  expect(screen.getByTestId('tree-plot-visualization')).toBeInTheDocument();
 });
diff --git a/frontend/src/components/DimensionEditDropdown.css b/frontend/src/components/DimensionEditDropdown.css
new file mode 100644
index 00000000..e8728293
--- /dev/null
+++ b/frontend/src/components/DimensionEditDropdown.css
@@ -0,0 +1,179 @@
+.dimension-edit-dropdown {
+  position: absolute;
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 1000;
+  width: 380px; /* Increased width */
+  display: flex;
+  flex-direction: column;
+  animation: fadeIn 0.15s ease-out;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(-5px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.edit-dropdown-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  border-bottom: 1px solid #f3f4f6;
+  background-color: #f9fafb;
+  border-radius: 8px 8px 0 0;
+}
+
+.edit-dropdown-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #374151;
+}
+
+.edit-close-btn {
+  background: none;
+  border: none;
+  font-size: 20px;
+  color: #9ca3af;
+  cursor: pointer;
+  padding: 0;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+}
+
+.edit-close-btn:hover {
+  background-color: #e5e7eb;
+  color: #4b5563;
+}
+
+.edit-dropdown-body {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.edit-field-group {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.edit-field-group label {
+    font-size: 12px;
+    font-weight: 600;
+    color: #6b7280;
+    margin-left: 2px;
+}
+
+.edit-dimension-input {
+  width: 100%;
+  padding: 8px 10px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  box-sizing: border-box;
+}
+
+.edit-dimension-input:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
+}
+
+.edit-dimension-desc {
+    width: 100%;
+    padding: 8px 10px;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+    font-size: 12px;
+    color: #4b5563;
+    background-color: white;
+    resize: vertical;
+    box-sizing: border-box;
+    font-family: inherit;
+}
+
+.edit-dimension-desc:focus {
+    outline: none;
+    border-color: #3b82f6;
+    background-color: white;
+}
+
+.edit-vs-separator-row {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 4px 0;
+}
+
+.edit-vs-separator {
+  color: #9ca3af;
+  font-size: 12px;
+  font-weight: 600;
+  background-color: #f3f4f6;
+  padding: 2px 8px;
+  border-radius: 10px;
+}
+
+/* Colors for inputs */
+.dimension-a {
+  /* border-left: 3px solid #3b82f6; */
+}
+
+.dimension-b {
+  /* border-left: 3px solid #f59e0b; */
+}
+
+.edit-dropdown-footer {
+  padding: 12px 16px;
+  border-top: 1px solid #f3f4f6;
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  background-color: #f9fafb;
+  border-radius: 0 0 8px 8px;
+}
+
+.edit-btn-cancel {
+  padding: 8px 12px;
+  background: white;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  color: #374151;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.edit-btn-cancel:hover {
+  background: #f3f4f6;
+}
+
+.edit-btn-confirm {
+  padding: 8px 12px;
+  background: #3b82f6;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  color: white;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.edit-btn-confirm:hover {
+  background: #2563eb;
+}
+
+.edit-btn-confirm:disabled {
+  background: #93c5fd;
+  cursor: not-allowed;
+}
diff --git a/frontend/src/components/DimensionEditDropdown.jsx b/frontend/src/components/DimensionEditDropdown.jsx
new file mode 100644
index 00000000..60ddbd20
--- /dev/null
+++ b/frontend/src/components/DimensionEditDropdown.jsx
@@ -0,0 +1,155 @@
+import React, { useState, useEffect, useRef } from 'react';
+import './DimensionEditDropdown.css';
+
+const DimensionEditDropdown = ({
+  isOpen,
+  anchorPosition,     // { top, left } 定位
+  currentPair,        // { dimensionA, dimensionB, descriptionA, descriptionB }
+  pairIndex,          // 0/1/2 - 维度索引
+  onClose,
+  onConfirm,          // (newPair, pairIndex) => void
+  isLoading = false,
+}) => {
+  const [editedA, setEditedA] = useState('');
+  const [editedB, setEditedB] = useState('');
+  const [editedDescA, setEditedDescA] = useState('');
+  const [editedDescB, setEditedDescB] = useState('');
+  const dropdownRef = useRef(null);
+
+  // 当currentPair变化时，更新输入框
+  useEffect(() => {
+    if (currentPair) {
+      setEditedA(currentPair.dimensionA || '');
+      setEditedB(currentPair.dimensionB || '');
+      setEditedDescA(currentPair.descriptionA || '');
+      setEditedDescB(currentPair.descriptionB || '');
+    }
+  }, [currentPair]);
+
+  // 点击外部关闭
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+        onClose();
+      }
+    };
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [isOpen, onClose]);
+
+  // ESC键关闭
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    };
+    if (isOpen) {
+      document.addEventListener('keydown', handleKeyDown);
+    }
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, onClose]);
+
+  if (!isOpen) return null;
+
+  const axisLabel = pairIndex === 0 ? 'X-axis' : pairIndex === 1 ? 'Y-axis' : 'Z-axis';
+  const hasChanges = editedA !== (currentPair?.dimensionA || '') ||
+                     editedB !== (currentPair?.dimensionB || '') ||
+                     editedDescA !== (currentPair?.descriptionA || '') ||
+                     editedDescB !== (currentPair?.descriptionB || '');
+
+  const isValid = editedA.trim() && editedB.trim();
+
+  const handleConfirm = () => {
+    if (!isValid || isLoading) return;
+    onConfirm({
+      ...currentPair,
+      dimensionA: editedA.trim(),
+      dimensionB: editedB.trim(),
+      descriptionA: editedDescA.trim(),
+      descriptionB: editedDescB.trim(),
+    }, pairIndex);
+  };
+
+  return (
+    <div
+      ref={dropdownRef}
+      className="dimension-edit-dropdown"
+      data-panel-root="dimension-edit"
+      style={{
+        top: anchorPosition?.top || 0,
+        left: anchorPosition?.left || 0,
+      }}
+    >
+      {/* Header */}
+      <div className="edit-dropdown-header">
+        <span className="edit-dropdown-title">
+          Dimension {pairIndex + 1} ({axisLabel})
+        </span>
+        <button className="edit-close-btn" onClick={onClose}>×</button>
+      </div>
+
+      {/* Input fields */}
+      <div className="edit-dropdown-body">
+        <div className="edit-field-group">
+            <label>Dimension A</label>
+            <input
+              type="text"
+              className="edit-dimension-input dimension-a"
+              value={editedA}
+              onChange={(e) => setEditedA(e.target.value)}
+              placeholder="Dimension A Name"
+              autoFocus
+            />
+            <textarea
+              className="edit-dimension-desc"
+              value={editedDescA}
+              onChange={(e) => setEditedDescA(e.target.value)}
+              placeholder="Description for Dimension A"
+              rows={2}
+            />
+        </div>
+
+        <div className="edit-vs-separator-row">
+            <span className="edit-vs-separator">vs</span>
+        </div>
+
+        <div className="edit-field-group">
+            <label>Dimension B</label>
+            <input
+              type="text"
+              className="edit-dimension-input dimension-b"
+              value={editedB}
+              onChange={(e) => setEditedB(e.target.value)}
+              placeholder="Dimension B Name"
+            />
+            <textarea
+              className="edit-dimension-desc"
+              value={editedDescB}
+              onChange={(e) => setEditedDescB(e.target.value)}
+              placeholder="Description for Dimension B"
+              rows={2}
+            />
+        </div>
+      </div>
+
+      {/* Footer buttons */}
+      <div className="edit-dropdown-footer">
+        <button className="edit-btn-cancel" onClick={onClose}>
+          Cancel
+        </button>
+        <button
+          className="edit-btn-confirm"
+          onClick={handleConfirm}
+          disabled={!isValid || isLoading}
+        >
+          {isLoading ? 'Scoring...' : hasChanges ? 'Confirm & Re-score' : 'Confirm'}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default DimensionEditDropdown;
diff --git a/frontend/src/components/DimensionSelector.css b/frontend/src/components/DimensionSelector.css
new file mode 100644
index 00000000..5961fb18
--- /dev/null
+++ b/frontend/src/components/DimensionSelector.css
@@ -0,0 +1,331 @@
+.dimension-selector {
+    width: 100%;
+    padding: 24px;
+    background: #f9fafb;
+    border-radius: 12px;
+    margin: 20px 0;
+}
+
+.dimension-selector-header {
+    margin-bottom: 24px;
+}
+
+.dimension-selector-header h3 {
+    font-size: 20px;
+    font-weight: 600;
+    color: #111827;
+    margin: 0 0 8px 0;
+}
+
+.dimension-selector-subtitle {
+    font-size: 14px;
+    color: #6b7280;
+    margin: 0;
+}
+
+.dimension-selector-loading {
+    text-align: center;
+    padding: 40px 20px;
+}
+
+.spinner {
+    border: 3px solid #f3f4f6;
+    border-top: 3px solid #3b82f6;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    animation: spin 1s linear infinite;
+    margin: 0 auto 16px;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.dimension-pairs-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 16px;
+    margin-bottom: 20px;
+}
+
+.dimension-pair-card {
+    background: white;
+    border: 2px solid #e5e7eb;
+    border-radius: 8px;
+    padding: 16px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.dimension-pair-card:hover {
+    border-color: #3b82f6;
+    box-shadow: 0 4px 6px rgba(59, 130, 246, 0.1);
+}
+
+.dimension-pair-card.selected {
+    border-color: #3b82f6;
+    background: #eff6ff;
+    box-shadow: 0 4px 6px rgba(59, 130, 246, 0.2);
+}
+
+.dimension-pair-spectrum {
+    margin-bottom: 12px;
+}
+
+.dimension-end {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+}
+
+.dimension-label {
+    font-weight: 600;
+    color: #111827;
+    font-size: 14px;
+}
+
+.dimension-score {
+    font-size: 12px;
+    color: #6b7280;
+    background: #f3f4f6;
+    padding: 2px 8px;
+    border-radius: 4px;
+}
+
+.spectrum-line {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 0;
+    border-top: 2px solid #e5e7eb;
+    border-bottom: 2px solid #e5e7eb;
+    margin: 8px 0;
+}
+
+.spectrum-arrow {
+    font-size: 18px;
+    color: #9ca3af;
+}
+
+.spectrum-center {
+    font-size: 12px;
+    color: #6b7280;
+    font-weight: 500;
+}
+
+.dimension-description {
+    font-size: 12px;
+    color: #6b7280;
+    margin: 4px 0;
+    line-height: 1.4;
+}
+
+.dimension-explanation {
+    font-size: 13px;
+    color: #374151;
+    margin-top: 8px;
+    padding-top: 8px;
+    border-top: 1px solid #e5e7eb;
+    font-style: italic;
+}
+
+.custom-dimension-button {
+    width: 100%;
+    padding: 12px 16px;
+    background: white;
+    border: 2px dashed #d1d5db;
+    border-radius: 8px;
+    color: #6b7280;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    margin-bottom: 20px;
+}
+
+.custom-dimension-button:hover {
+    border-color: #3b82f6;
+    color: #3b82f6;
+    background: #f9fafb;
+}
+
+.custom-dimension-input {
+    background: white;
+    border: 2px solid #3b82f6;
+    border-radius: 8px;
+    padding: 20px;
+    margin-bottom: 20px;
+}
+
+.custom-dimension-input h4 {
+    margin: 0 0 16px 0;
+    font-size: 16px;
+    color: #111827;
+}
+
+.custom-input-row {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    margin-bottom: 16px;
+}
+
+.custom-input-group {
+    flex: 1;
+}
+
+.custom-input-group label {
+    display: block;
+    font-size: 13px;
+    font-weight: 500;
+    color: #374151;
+    margin-bottom: 8px;
+}
+
+.custom-input-group input {
+    width: 100%;
+    padding: 8px 12px;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+    font-size: 14px;
+    margin-bottom: 8px;
+}
+
+.custom-input-group textarea {
+    width: 100%;
+    padding: 8px 12px;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+    font-size: 13px;
+    min-height: 60px;
+    resize: vertical;
+}
+
+.custom-input-divider {
+    font-size: 24px;
+    color: #9ca3af;
+    font-weight: bold;
+}
+
+.custom-input-actions {
+    display: flex;
+    gap: 12px;
+    justify-content: flex-end;
+}
+
+.custom-input-actions button {
+    padding: 8px 16px;
+    border-radius: 6px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.custom-input-actions button:first-child {
+    background: #3b82f6;
+    color: white;
+    border: none;
+}
+
+.custom-input-actions button:first-child:hover {
+    background: #2563eb;
+}
+
+.custom-input-actions button:last-child {
+    background: white;
+    color: #6b7280;
+    border: 1px solid #d1d5db;
+}
+
+.custom-input-actions button:last-child:hover {
+    background: #f9fafb;
+}
+
+.selected-pairs-summary {
+    background: white;
+    border: 2px solid #3b82f6;
+    border-radius: 8px;
+    padding: 16px;
+    margin-bottom: 20px;
+}
+
+.selected-pairs-summary h4 {
+    margin: 0 0 12px 0;
+    font-size: 14px;
+    font-weight: 600;
+    color: #111827;
+}
+
+.selected-pairs-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.selected-pair-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    background: #eff6ff;
+    border-radius: 6px;
+}
+
+.pair-number {
+    font-size: 13px;
+    font-weight: 600;
+    color: #3b82f6;
+}
+
+.pair-text {
+    flex: 1;
+    font-size: 14px;
+    color: #374151;
+}
+
+.remove-pair-button {
+    background: none;
+    border: none;
+    color: #9ca3af;
+    font-size: 20px;
+    cursor: pointer;
+    padding: 0 8px;
+    transition: color 0.2s ease;
+}
+
+.remove-pair-button:hover {
+    color: #ef4444;
+}
+
+.confirm-dimensions-button {
+    width: 100%;
+    padding: 14px 24px;
+    background: #3b82f6;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.confirm-dimensions-button:hover:not(:disabled) {
+    background: #2563eb;
+    box-shadow: 0 4px 6px rgba(37, 99, 235, 0.3);
+}
+
+.confirm-dimensions-button:disabled {
+    background: #d1d5db;
+    cursor: not-allowed;
+    opacity: 0.6;
+}
diff --git a/frontend/src/components/DimensionSelector.jsx b/frontend/src/components/DimensionSelector.jsx
new file mode 100644
index 00000000..911740f0
--- /dev/null
+++ b/frontend/src/components/DimensionSelector.jsx
@@ -0,0 +1,217 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import './DimensionSelector.css';
+
+const DimensionSelector = ({ intent, onDimensionsSelected }) => {
+    const [suggestedPairs, setSuggestedPairs] = useState([]);
+    const [selectedPairs, setSelectedPairs] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [showCustomInput, setShowCustomInput] = useState(false);
+    const [customPair, setCustomPair] = useState({
+        dimensionA: '',
+        dimensionB: '',
+        descriptionA: '',
+        descriptionB: '',
+    });
+
+    const fetchDimensionSuggestions = useCallback(async () => {
+        setLoading(true);
+        try {
+            const response = await fetch('/api/suggest-dimensions', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include',
+                body: JSON.stringify({ intent }),
+            });
+            if (!response.ok) throw new Error('Failed to fetch dimension suggestions');
+            const data = await response.json();
+            setSuggestedPairs(data.dimension_pairs || []);
+        } catch (error) {
+            console.error('Error fetching dimension suggestions:', error);
+        } finally {
+            setLoading(false);
+        }
+    }, [intent]);
+
+    useEffect(() => {
+        if (intent) {
+            fetchDimensionSuggestions();
+        }
+    }, [intent, fetchDimensionSuggestions]);
+
+    const togglePairSelection = (pair) => {
+        if (selectedPairs.find(p => p.dimensionA === pair.dimensionA && p.dimensionB === pair.dimensionB)) {
+            setSelectedPairs(selectedPairs.filter(p => !(p.dimensionA === pair.dimensionA && p.dimensionB === pair.dimensionB)));
+        } else {
+            if (selectedPairs.length < 3) {
+                setSelectedPairs([...selectedPairs, pair]);
+            } else {
+                // Replace the oldest selected pair to keep recency
+                setSelectedPairs([...selectedPairs.slice(1), pair]);
+            }
+        }
+    };
+
+    const handleCustomPairSubmit = () => {
+        if (customPair.dimensionA && customPair.dimensionB) {
+            if (selectedPairs.length < 3) {
+                setSelectedPairs([...selectedPairs, customPair]);
+            } else {
+                setSelectedPairs([...selectedPairs.slice(1), customPair]);
+            }
+            setCustomPair({
+                dimensionA: '',
+                dimensionB: '',
+                descriptionA: '',
+                descriptionB: '',
+            });
+            setShowCustomInput(false);
+        }
+    };
+
+    const handleConfirm = () => {
+        if (selectedPairs.length === 3) {
+            onDimensionsSelected(selectedPairs);
+        }
+    };
+
+    const isPairSelected = (pair) => {
+        return selectedPairs.some(p => p.dimensionA === pair.dimensionA && p.dimensionB === pair.dimensionB);
+    };
+
+    if (loading) {
+        return (
+            <div className="dimension-selector">
+                <div className="dimension-selector-loading">
+                    <div className="spinner"></div>
+                    <p>Suggesting evaluation dimensions...</p>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="dimension-selector">
+            <div className="dimension-selector-header">
+                <h3>Select Evaluation Dimensions</h3>
+                <p className="dimension-selector-subtitle">
+                    Choose 3 dimension pairs to evaluate your ideas ({selectedPairs.length}/3 selected)
+                </p>
+            </div>
+
+            <div className="dimension-pairs-grid">
+                {suggestedPairs.map((pair, index) => (
+                    <div
+                        key={index}
+                        className={`dimension-pair-card ${isPairSelected(pair) ? 'selected' : ''}`}
+                        data-tracking-click="true"
+                        data-tracking-name={`dimension_pair_${pair.dimensionA}_${pair.dimensionB}`}
+                        onClick={() => togglePairSelection(pair)}
+                    >
+                        <div className="dimension-pair-spectrum">
+                            <div className="dimension-end dimension-a">
+                                <span className="dimension-label">{pair.dimensionA}</span>
+                                <span className="dimension-score">0</span>
+                            </div>
+                            <div className="spectrum-line">
+                                <div className="spectrum-arrow">←</div>
+                                <div className="spectrum-center">50</div>
+                                <div className="spectrum-arrow">→</div>
+                            </div>
+                            <div className="dimension-end dimension-b">
+                                <span className="dimension-label">{pair.dimensionB}</span>
+                                <span className="dimension-score">100</span>
+                            </div>
+                        </div>
+                        <p className="dimension-description">{pair.descriptionA}</p>
+                        <p className="dimension-description">{pair.descriptionB}</p>
+                        {pair.explanation && (
+                            <p className="dimension-explanation">{pair.explanation}</p>
+                        )}
+                    </div>
+                ))}
+            </div>
+
+            {!showCustomInput && (
+                <button
+                    className="custom-dimension-button"
+                    onClick={() => setShowCustomInput(true)}
+                >
+                    + Add Custom Dimension Pair
+                </button>
+            )}
+
+            {showCustomInput && (
+                <div className="custom-dimension-input">
+                    <h4>Custom Dimension Pair</h4>
+                    <div className="custom-input-row">
+                        <div className="custom-input-group">
+                            <label>Dimension A (0)</label>
+                            <input
+                                type="text"
+                                placeholder="e.g., HCI-oriented"
+                                value={customPair.dimensionA}
+                                onChange={(e) => setCustomPair({ ...customPair, dimensionA: e.target.value })}
+                            />
+                            <textarea
+                                placeholder="Description for Dimension A"
+                                value={customPair.descriptionA}
+                                onChange={(e) => setCustomPair({ ...customPair, descriptionA: e.target.value })}
+                            />
+                        </div>
+                        <div className="custom-input-divider">↔</div>
+                        <div className="custom-input-group">
+                            <label>Dimension B (100)</label>
+                            <input
+                                type="text"
+                                placeholder="e.g., AI-oriented"
+                                value={customPair.dimensionB}
+                                onChange={(e) => setCustomPair({ ...customPair, dimensionB: e.target.value })}
+                            />
+                            <textarea
+                                placeholder="Description for Dimension B"
+                                value={customPair.descriptionB}
+                                onChange={(e) => setCustomPair({ ...customPair, descriptionB: e.target.value })}
+                            />
+                        </div>
+                    </div>
+                    <div className="custom-input-actions">
+                        <button onClick={handleCustomPairSubmit}>Add Custom Pair</button>
+                        <button onClick={() => setShowCustomInput(false)}>Cancel</button>
+                    </div>
+                </div>
+            )}
+
+            {selectedPairs.length > 0 && (
+                <div className="selected-pairs-summary">
+                    <h4>Selected Dimensions:</h4>
+                    <div className="selected-pairs-list">
+                        {selectedPairs.map((pair, index) => (
+                            <div key={index} className="selected-pair-item">
+                                <span className="pair-number">Dimension {index + 1}:</span>
+                                <span className="pair-text">
+                                    {pair.dimensionA} ←→ {pair.dimensionB}
+                                </span>
+                                <button
+                                    className="remove-pair-button"
+                                    onClick={() => setSelectedPairs(selectedPairs.filter((_, i) => i !== index))}
+                                >
+                                    ×
+                                </button>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            )}
+
+            <button
+                className="confirm-dimensions-button"
+                onClick={handleConfirm}
+                disabled={selectedPairs.length !== 3}
+            >
+                Confirm Dimensions ({selectedPairs.length}/3)
+            </button>
+        </div>
+    );
+};
+
+export default DimensionSelector;
diff --git a/frontend/src/components/DimensionSelectorModal.css b/frontend/src/components/DimensionSelectorModal.css
new file mode 100644
index 00000000..c8cae198
--- /dev/null
+++ b/frontend/src/components/DimensionSelectorModal.css
@@ -0,0 +1,350 @@
+/* 弹窗遮罩层 */
+.dimension-modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2000;
+    animation: fadeIn 0.2s ease;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+/* 弹窗主体 */
+.dimension-modal-content {
+    background: white;
+    border-radius: 12px;
+    width: 90%;
+    max-width: 900px;
+    max-height: 90vh;
+    overflow-y: auto;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+    animation: slideUp 0.3s ease;
+}
+
+@keyframes slideUp {
+    from {
+        transform: translateY(50px);
+        opacity: 0;
+    }
+
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+/* 弹窗头部 */
+.dimension-modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 24px 30px;
+    border-bottom: 2px solid #e5e7eb;
+}
+
+.dimension-modal-header h2 {
+    margin: 0;
+    font-size: 1.5rem;
+    color: #1f2937;
+    font-weight: 600;
+}
+
+.dimension-modal-close {
+    background: none;
+    border: none;
+    font-size: 2rem;
+    color: #6b7280;
+    cursor: pointer;
+    line-height: 1;
+    padding: 0;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 6px;
+    transition: all 0.2s;
+}
+
+.dimension-modal-close:hover {
+    background-color: #f3f4f6;
+    color: #1f2937;
+}
+
+/* 加载状态 */
+.dimension-modal-loading {
+    padding: 60px;
+    text-align: center;
+}
+
+.spinner {
+    width: 40px;
+    height: 40px;
+    border: 4px solid #e5e7eb;
+    border-top-color: #3b82f6;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+    margin: 0 auto 20px;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.dimension-modal-loading p {
+    color: #6b7280;
+    font-size: 0.95rem;
+}
+
+/* 错误状态 */
+.dimension-modal-error {
+    padding: 40px;
+    text-align: center;
+}
+
+.dimension-modal-error p {
+    color: #dc2626;
+    margin-bottom: 16px;
+}
+
+.dimension-modal-error button {
+    padding: 8px 16px;
+    background-color: #3b82f6;
+    color: white;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 0.9rem;
+}
+
+/* AI 建议的维度区域 */
+.dimension-modal-suggestions {
+    padding: 24px 30px;
+    background-color: #f9fafb;
+    border-bottom: 1px solid #e5e7eb;
+}
+
+.dimension-modal-suggestions h3 {
+    margin: 0 0 20px 0;
+    font-size: 1.1rem;
+    color: #374151;
+    font-weight: 600;
+}
+
+.dimension-suggestions-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 16px;
+}
+
+.dimension-suggestion-card {
+    background: white;
+    border: 2px solid #e5e7eb;
+    border-radius: 8px;
+    padding: 16px;
+    transition: all 0.2s;
+}
+
+.dimension-suggestion-card:hover {
+    border-color: #3b82f6;
+    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
+}
+
+.dimension-pair-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 12px;
+}
+
+.dimension-label {
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: #1f2937;
+    flex: 1;
+    text-align: center;
+}
+
+.dimension-arrow {
+    font-size: 1rem;
+    color: #9ca3af;
+}
+
+.dimension-explanation {
+    font-size: 0.8rem;
+    color: #6b7280;
+    line-height: 1.4;
+    margin: 0 0 12px 0;
+    min-height: 40px;
+}
+
+.dimension-actions {
+    display: flex;
+    gap: 8px;
+}
+
+.btn-use-as-pair1,
+.btn-use-as-pair2 {
+    flex: 1;
+    padding: 6px 10px;
+    font-size: 0.75rem;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-weight: 500;
+    transition: all 0.2s;
+}
+
+.btn-use-as-pair1 {
+    background-color: #dbeafe;
+    color: #1e40af;
+}
+
+.btn-use-as-pair1:hover {
+    background-color: #3b82f6;
+    color: white;
+}
+
+.btn-use-as-pair2 {
+    background-color: #fef3c7;
+    color: #92400e;
+}
+
+.btn-use-as-pair2:hover {
+    background-color: #f59e0b;
+    color: white;
+}
+
+/* 自定义维度区域 */
+.dimension-modal-custom {
+    padding: 24px 30px;
+}
+
+.dimension-modal-custom h3 {
+    margin: 0 0 20px 0;
+    font-size: 1.1rem;
+    color: #374151;
+    font-weight: 600;
+}
+
+.dimension-custom-pair {
+    margin-bottom: 20px;
+    padding: 16px;
+    background-color: #f9fafb;
+    border-radius: 8px;
+    border: 2px solid #e5e7eb;
+}
+
+.dimension-pair-label {
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: #4b5563;
+    margin-bottom: 12px;
+}
+
+.dimension-input-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.dimension-input {
+    flex: 1;
+    padding: 10px 14px;
+    border: 2px solid #d1d5db;
+    border-radius: 6px;
+    font-size: 0.9rem;
+    transition: all 0.2s;
+}
+
+.dimension-input:focus {
+    outline: none;
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.dimension-input::placeholder {
+    color: #9ca3af;
+}
+
+.dimension-separator {
+    font-size: 1.2rem;
+    color: #6b7280;
+    font-weight: 600;
+}
+
+/* 底部按钮 */
+.dimension-modal-footer {
+    padding: 20px 30px;
+    border-top: 2px solid #e5e7eb;
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+}
+
+.btn-cancel,
+.btn-confirm {
+    padding: 10px 24px;
+    border: none;
+    border-radius: 6px;
+    font-size: 0.95rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.btn-cancel {
+    background-color: #f3f4f6;
+    color: #4b5563;
+}
+
+.btn-cancel:hover {
+    background-color: #e5e7eb;
+}
+
+.btn-confirm {
+    background-color: #3b82f6;
+    color: white;
+}
+
+.btn-confirm:hover {
+    background-color: #2563eb;
+    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .dimension-modal-content {
+        width: 95%;
+        max-height: 95vh;
+    }
+
+    .dimension-suggestions-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .dimension-input-row {
+        flex-direction: column;
+        gap: 8px;
+    }
+
+    .dimension-separator {
+        transform: rotate(90deg);
+    }
+}
diff --git a/frontend/src/components/DimensionSelectorModal.jsx b/frontend/src/components/DimensionSelectorModal.jsx
new file mode 100644
index 00000000..5328b5d1
--- /dev/null
+++ b/frontend/src/components/DimensionSelectorModal.jsx
@@ -0,0 +1,214 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import './DimensionSelectorModal.css';
+
+/**
+ * 弹窗式维度选择器
+ * 用户输入 Intent 后弹出,显示 3 个 AI 建议的维度对
+ * 用户可以选择预设或自定义 2 对维度
+ */
+const DimensionSelectorModal = ({ isOpen, onClose, onConfirm, intent }) => {
+    const [suggestedPairs, setSuggestedPairs] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+
+    // 用户自定义的2对维度 (4个输入框)
+    const [customDimensions, setCustomDimensions] = useState({
+        pair1: { dimensionA: '', dimensionB: '' },
+        pair2: { dimensionA: '', dimensionB: '' }
+    });
+
+    const fetchSuggestedDimensions = useCallback(async () => {
+        setIsLoading(true);
+        setError(null);
+        try {
+            const response = await fetch('/api/suggest-dimensions', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ intent })
+            });
+
+            if (!response.ok) throw new Error('Failed to fetch dimension suggestions');
+
+            const data = await response.json();
+            setSuggestedPairs(data.dimension_pairs || []);
+        } catch (err) {
+            console.error('Error fetching dimensions:', err);
+            setError('Failed to load dimension suggestions. Please try again.');
+        } finally {
+            setIsLoading(false);
+        }
+    }, [intent]);
+
+    // 获取 AI 建议的维度对
+    useEffect(() => {
+        if (isOpen && intent) {
+            fetchSuggestedDimensions();
+        }
+    }, [isOpen, intent, fetchSuggestedDimensions]);
+
+    // 点击预设选项,填入对应的输入框
+    const handleSelectPreset = (pair, targetPairIndex) => {
+        setCustomDimensions(prev => ({
+            ...prev,
+            [`pair${targetPairIndex}`]: {
+                dimensionA: pair.dimensionA,
+                dimensionB: pair.dimensionB
+            }
+        }));
+    };
+
+    // 输入框变化
+    const handleInputChange = (pairIndex, dimension, value) => {
+        setCustomDimensions(prev => ({
+            ...prev,
+            [`pair${pairIndex}`]: {
+                ...prev[`pair${pairIndex}`],
+                [dimension]: value
+            }
+        }));
+    };
+
+    // 确认选择
+    const handleConfirm = () => {
+        const pair1 = customDimensions.pair1;
+        const pair2 = customDimensions.pair2;
+
+        // 验证必须填写2对维度
+        if (!pair1.dimensionA || !pair1.dimensionB || !pair2.dimensionA || !pair2.dimensionB) {
+            alert('Please fill in both dimension pairs (all 4 fields)');
+            return;
+        }
+
+        // 返回选中的2对维度
+        const selectedPairs = [
+            { dimensionA: pair1.dimensionA, dimensionB: pair1.dimensionB },
+            { dimensionA: pair2.dimensionA, dimensionB: pair2.dimensionB }
+        ];
+
+        onConfirm(selectedPairs);
+        onClose();
+    };
+
+    if (!isOpen) return null;
+
+    return (
+        <div className="dimension-modal-overlay" onClick={onClose}>
+            <div className="dimension-modal-content" data-panel-root="dimension-selector-modal" onClick={(e) => e.stopPropagation()}>
+                <div className="dimension-modal-header">
+                    <h2>Select Evaluation Dimensions</h2>
+                    <button className="dimension-modal-close" onClick={onClose}>×</button>
+                </div>
+
+                {isLoading && (
+                    <div className="dimension-modal-loading">
+                        <div className="spinner"></div>
+                        <p>Generating dimension suggestions...</p>
+                    </div>
+                )}
+
+                {error && (
+                    <div className="dimension-modal-error">
+                        <p>{error}</p>
+                        <button onClick={fetchSuggestedDimensions}>Retry</button>
+                    </div>
+                )}
+
+                {!isLoading && !error && (
+                    <>
+                        {/* AI 建议的 3 对维度 */}
+                        <div className="dimension-modal-suggestions">
+                            <h3>AI Suggested Dimension Pairs (click to use)</h3>
+                            <div className="dimension-suggestions-grid">
+                                {suggestedPairs.map((pair, index) => (
+                                    <div key={index} className="dimension-suggestion-card">
+                                        <div className="dimension-pair-header">
+                                            <span className="dimension-label">{pair.dimensionA}</span>
+                                            <span className="dimension-arrow">←→</span>
+                                            <span className="dimension-label">{pair.dimensionB}</span>
+                                        </div>
+                                        <p className="dimension-explanation">{pair.explanation}</p>
+                                        <div className="dimension-actions">
+                                            <button
+                                                className="btn-use-as-pair1"
+                                                onClick={() => handleSelectPreset(pair, 1)}
+                                            >
+                                                Use as Pair 1
+                                            </button>
+                                            <button
+                                                className="btn-use-as-pair2"
+                                                onClick={() => handleSelectPreset(pair, 2)}
+                                            >
+                                                Use as Pair 2
+                                            </button>
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+
+                        {/* 用户自定义的 2 对维度 (4个输入框) */}
+                        <div className="dimension-modal-custom">
+                            <h3>Your Selected Dimensions</h3>
+
+                            {/* 第一对维度 */}
+                            <div className="dimension-custom-pair">
+                                <div className="dimension-pair-label">Dimension Pair 1 (X-axis)</div>
+                                <div className="dimension-input-row">
+                                    <input
+                                        type="text"
+                                        placeholder="Dimension A (left/0)"
+                                        value={customDimensions.pair1.dimensionA}
+                                        onChange={(e) => handleInputChange(1, 'dimensionA', e.target.value)}
+                                        className="dimension-input"
+                                    />
+                                    <span className="dimension-separator">←→</span>
+                                    <input
+                                        type="text"
+                                        placeholder="Dimension B (right/100)"
+                                        value={customDimensions.pair1.dimensionB}
+                                        onChange={(e) => handleInputChange(1, 'dimensionB', e.target.value)}
+                                        className="dimension-input"
+                                    />
+                                </div>
+                            </div>
+
+                            {/* 第二对维度 */}
+                            <div className="dimension-custom-pair">
+                                <div className="dimension-pair-label">Dimension Pair 2 (Y-axis)</div>
+                                <div className="dimension-input-row">
+                                    <input
+                                        type="text"
+                                        placeholder="Dimension A (bottom/0)"
+                                        value={customDimensions.pair2.dimensionA}
+                                        onChange={(e) => handleInputChange(2, 'dimensionA', e.target.value)}
+                                        className="dimension-input"
+                                    />
+                                    <span className="dimension-separator">←→</span>
+                                    <input
+                                        type="text"
+                                        placeholder="Dimension B (top/100)"
+                                        value={customDimensions.pair2.dimensionB}
+                                        onChange={(e) => handleInputChange(2, 'dimensionB', e.target.value)}
+                                        className="dimension-input"
+                                    />
+                                </div>
+                            </div>
+                        </div>
+
+                        {/* 确认按钮 */}
+                        <div className="dimension-modal-footer">
+                            <button className="btn-cancel" onClick={onClose}>
+                                Cancel
+                            </button>
+                            <button className="btn-confirm" onClick={handleConfirm}>
+                                Confirm & Generate Ideas
+                            </button>
+                        </div>
+                    </>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default DimensionSelectorModal;
diff --git a/frontend/src/components/DimensionSelectorPanel.css b/frontend/src/components/DimensionSelectorPanel.css
new file mode 100644
index 00000000..d4134fab
--- /dev/null
+++ b/frontend/src/components/DimensionSelectorPanel.css
@@ -0,0 +1,507 @@
+/* 下拉展开面板容器 - 覆盖在原界面上方 */
+.dimension-selector-panel {
+    position: absolute;
+    top: 100%;
+    /* 紧贴在 Intent 输入框下方 */
+    left: 0;
+    right: 0;
+    margin-top: 8px;
+    background: white;
+    border: 1px solid #d1d5db;
+    border-radius: 8px;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+    z-index: 1000;
+    max-height: 80vh;
+    overflow-y: auto;
+    animation: slideDown 0.3s ease-out;
+}
+
+@keyframes slideDown {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* 面板头部 */
+.panel-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 20px;
+    border-bottom: 1px solid #e5e7eb;
+    position: sticky;
+    top: 0;
+    background: white;
+    z-index: 1;
+}
+
+.panel-header h3 {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: #111827;
+}
+
+.close-btn {
+    background: none;
+    border: none;
+    font-size: 28px;
+    color: #6b7280;
+    cursor: pointer;
+    padding: 0;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    transition: all 0.2s;
+}
+
+.close-btn:hover {
+    background: #f3f4f6;
+    color: #111827;
+}
+
+/* 加载状态 */
+.panel-loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60px 20px;
+    color: #6b7280;
+}
+
+.spinner {
+    width: 40px;
+    height: 40px;
+    border: 4px solid #e5e7eb;
+    border-top-color: #3b82f6;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+    margin-bottom: 16px;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.panel-loading p {
+    margin: 0;
+    font-size: 14px;
+}
+
+/* 错误状态 */
+.panel-error {
+    padding: 40px 20px;
+    text-align: center;
+    color: #dc2626;
+}
+
+.panel-error p {
+    margin: 0 0 16px 0;
+    font-size: 14px;
+    font-weight: 600;
+    color: #dc2626;
+}
+
+.panel-error button {
+    padding: 8px 16px;
+    background: #dc2626;
+    color: white;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 14px;
+    transition: background 0.2s;
+}
+
+.panel-error button:hover {
+    background: #b91c1c;
+}
+
+/* 左右两列布局容器 */
+.panel-two-columns {
+    display: flex;
+    gap: 24px;
+    padding: 20px;
+    align-items: stretch;
+}
+
+/* AI 建议区域 - 左列 */
+.suggestions-section {
+    flex: 3;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+.suggestions-section h4 {
+    margin: 0 0 16px 0;
+    font-size: 15px;
+    font-weight: 600;
+    color: #374151;
+    text-align: center;
+}
+
+/* 建议列表 - 垂直排列 */
+.suggestions-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    flex: 1;
+}
+
+/* 保留旧的grid样式以备不时之需 */
+.suggestions-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 16px;
+}
+
+.suggestion-card {
+    background: #f9fafb;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    padding: 16px;
+    transition: all 0.2s;
+    cursor: pointer;
+    position: relative;
+    flex: 1;
+    /* Distribute available vertical space equally */
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.suggestion-card:hover {
+    background: #f3f4f6;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    transform: translateY(-2px);
+    z-index: 1;
+}
+
+.suggestion-card.selected {
+    border-color: #3b82f6;
+    background: #eff6ff;
+    box-shadow: 0 6px 18px rgba(59, 130, 246, 0.15);
+}
+
+.suggestion-content {
+    display: flex;
+    align-items: stretch;
+    justify-content: space-between;
+    gap: 8px;
+    flex: 1;
+}
+
+.dimension-side {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    min-width: 0;
+    /* Allow text wrapping */
+}
+
+.side-a {
+    text-align: right;
+    align-items: flex-end;
+}
+
+.side-b {
+    text-align: left;
+    align-items: flex-start;
+}
+
+.dimension-label-a {
+    color: #3b82f6;
+    font-size: 15px;
+    font-weight: 600;
+}
+
+.dimension-label-b {
+    color: #f59e0b;
+    font-size: 15px;
+    font-weight: 600;
+}
+
+.description-label-a {
+    color: #60a5fa;
+    /* Lighter blue */
+    font-size: 14px;
+    margin: 0;
+    line-height: 1.3;
+    opacity: 0.8;
+
+}
+
+.description-label-b {
+    color: #f59e0b;
+    /* Same amber/orange but opacity or lighter shade if needed, keeping readable */
+    font-size: 14px;
+    margin: 0;
+    line-height: 1.3;
+    opacity: 0.8;
+}
+
+.vs-separator-vertical {
+    color: #9ca3af;
+    font-size: 12px;
+    font-weight: 600;
+    display: flex;
+    align-items: flex-start;
+    /* Align with top (titles) */
+    padding-top: 2px;
+}
+
+.selected-badge {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background: #dbeafe;
+    color: #1e3a8a;
+    border: 1px solid #bfdbfe;
+    border-radius: 999px;
+    padding: 4px 8px;
+    font-size: 12px;
+    font-weight: 600;
+}
+
+.selection-hint {
+    margin-top: 8px;
+    font-size: 12px;
+    color: #4b5563;
+}
+
+/* 自定义输入区域 - 右列 */
+.custom-section {
+    flex: 4;
+    /* Increased from 2 to accommodate larger inputs */
+    display: flex;
+    flex-direction: column;
+}
+
+.custom-section h4 {
+    margin: 0 0 16px 0;
+    font-size: 15px;
+    font-weight: 600;
+    color: #374151;
+}
+
+/* 输入框容器 - 带背景的盒子 */
+.custom-inputs-box {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    flex: 1;
+    justify-content: space-between;
+    padding: 20px;
+    background: #f9fafb;
+    border-radius: 8px;
+    border: 1px solid #e5e7eb;
+}
+
+/* 垂直排列的输入框 - 保留旧样式 */
+.custom-inputs-vertical {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    flex: 1;
+    justify-content: space-between;
+}
+
+/* 保留旧的grid样式以备不时之需 */
+.custom-inputs-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 20px;
+}
+
+.custom-inputs-grid.three-cols {
+    grid-template-columns: repeat(3, 1fr);
+}
+
+.dimension-pair-inputs {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    background: white;
+    padding: 12px;
+    border-radius: 6px;
+    border: 1px solid #e5e7eb;
+}
+
+.pair-label {
+    font-size: 14px;
+    font-weight: 600;
+    color: #111827;
+    margin-bottom: 4px;
+}
+
+/* New layout for dimension pair inputs */
+.pair-row {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+}
+
+.dimension-field-group {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.dimension-input {
+    width: 100%;
+    padding: 8px 10px;
+    border: 2px solid #d1d5db;
+    border-radius: 6px;
+    font-size: 13px;
+    font-weight: 500;
+    transition: all 0.2s;
+    box-sizing: border-box;
+}
+
+.description-input {
+    width: 100%;
+    padding: 6px 10px;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    font-size: 12px;
+    color: #4b5563;
+    transition: all 0.2s;
+    box-sizing: border-box;
+    background-color: white;
+    resize: vertical;
+    font-family: inherit;
+}
+
+.description-input:focus,
+.dimension-input:focus {
+    outline: none;
+    border-color: #3b82f6;
+    background-color: white;
+}
+
+.dimension-input:focus {
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
+}
+
+.dimension-input::placeholder {
+    color: #9ca3af;
+}
+
+.description-input::placeholder {
+    color: #9ca3af;
+    font-style: italic;
+}
+
+.input-separator {
+    padding-top: 10px;
+    text-align: center;
+    color: #9ca3af;
+    font-size: 12px;
+    font-weight: 600;
+}
+
+/* 底部按钮区 */
+.panel-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+    padding: 16px 20px;
+    border-top: 1px solid #e5e7eb;
+    background: white;
+    position: sticky;
+    bottom: 0;
+}
+
+.btn-cancel,
+.btn-confirm {
+    padding: 10px 20px;
+    border: none;
+    border-radius: 6px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.btn-cancel {
+    background: #f3f4f6;
+    color: #374151;
+}
+
+.btn-cancel:hover {
+    background: #e5e7eb;
+}
+
+.btn-confirm {
+    background: #3b82f6;
+    color: white;
+}
+
+.btn-confirm:hover {
+    background: #2563eb;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+}
+
+/* 响应式设计 */
+@media (max-width: 1024px) {
+    .panel-two-columns {
+        flex-direction: column;
+    }
+
+    .custom-section {
+        flex: none;
+        width: 100%;
+    }
+
+    .suggestions-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 768px) {
+    .suggestions-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .custom-inputs-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .dimension-selector-panel {
+        max-height: 70vh;
+    }
+}
+
+/* 滚动条美化 */
+.dimension-selector-panel::-webkit-scrollbar {
+    width: 8px;
+}
+
+.dimension-selector-panel::-webkit-scrollbar-track {
+    background: #f3f4f6;
+}
+
+.dimension-selector-panel::-webkit-scrollbar-thumb {
+    background: #9ca3af;
+    border-radius: 4px;
+}
+
+.dimension-selector-panel::-webkit-scrollbar-thumb:hover {
+    background: #6b7280;
+}
diff --git a/frontend/src/components/DimensionSelectorPanel.jsx b/frontend/src/components/DimensionSelectorPanel.jsx
new file mode 100644
index 00000000..d6a6e1b0
--- /dev/null
+++ b/frontend/src/components/DimensionSelectorPanel.jsx
@@ -0,0 +1,360 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import './DimensionSelectorPanel.css';
+
+/**
+ * 下拉展开面板式维度选择器
+ * 在 Intent 输入框下方展开,覆盖在界面上
+ * 显示 3 个 AI 建议的维度对,用户可选择或自定义 3 对维度
+ */
+const DimensionSelectorPanel = ({ isOpen, onClose, onConfirm, intent }) => {
+    const [suggestedPairs, setSuggestedPairs] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+
+    // 用户自定义的3对维度
+    const [customDimensions, setCustomDimensions] = useState({
+        pair1: { dimensionA: '', dimensionB: '', descriptionA: '', descriptionB: '' },
+        pair2: { dimensionA: '', dimensionB: '', descriptionA: '', descriptionB: '' },
+        pair3: { dimensionA: '', dimensionB: '', descriptionA: '', descriptionB: '' }
+    });
+
+    const fetchSuggestedDimensions = useCallback(async () => {
+        setIsLoading(true);
+        setError(null);
+        try {
+            const response = await fetch('/api/suggest-dimensions', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include', // 重要: 包含 session cookie
+                body: JSON.stringify({ intent })
+            });
+
+            if (!response.ok) {
+                const errorData = await response.json();
+                throw new Error(errorData.error || 'Failed to fetch dimension suggestions');
+            }
+
+            const data = await response.json();
+            setSuggestedPairs(data.dimension_pairs || []);
+        } catch (err) {
+            console.error('Error fetching dimensions:', err);
+            setError(err.message || 'Failed to load dimension suggestions. Please try again.');
+        } finally {
+            setIsLoading(false);
+        }
+    }, [intent]);
+
+    // 获取 AI 建议的维度对
+    useEffect(() => {
+        if (isOpen && intent) {
+            fetchSuggestedDimensions();
+        }
+    }, [isOpen, intent, fetchSuggestedDimensions]);
+
+    const findPairSlotForSuggestion = (pair, dimensions) => {
+        return Object.entries(dimensions).find(([, value]) =>
+            value.dimensionA === pair.dimensionA && value.dimensionB === pair.dimensionB
+        )?.[0] || null;
+    };
+
+    const findFirstEmptyPairSlot = (dimensions) => {
+        return ['pair1', 'pair2', 'pair3'].find(key => {
+            const pair = dimensions[key];
+            return !pair.dimensionA && !pair.dimensionB;
+        }) || null;
+    };
+
+    // 点击建议卡片，按顺序填入空的 pair 槽位；再次点击则清空该槽位
+    const handleToggleSuggestion = (pair) => {
+        setCustomDimensions(prev => {
+            const existingSlot = findPairSlotForSuggestion(pair, prev);
+            if (existingSlot) {
+                return {
+                    ...prev,
+                    [existingSlot]: { dimensionA: '', dimensionB: '', descriptionA: '', descriptionB: '' }
+                };
+            }
+
+            const emptySlot = findFirstEmptyPairSlot(prev);
+            if (!emptySlot) return prev;
+
+            return {
+                ...prev,
+                [emptySlot]: {
+                    dimensionA: pair.dimensionA,
+                    dimensionB: pair.dimensionB,
+                    descriptionA: pair.descriptionA || '',
+                    descriptionB: pair.descriptionB || ''
+                }
+            };
+        });
+    };
+
+    // 更新自定义输入框
+    const handleInputChange = (pairIndex, dimension, value) => {
+        setCustomDimensions(prev => ({
+            ...prev,
+            [`pair${pairIndex}`]: {
+                ...prev[`pair${pairIndex}`],
+                [dimension]: value
+            }
+        }));
+    };
+
+    // 确认选择
+    const handleConfirm = () => {
+        const { pair1, pair2, pair3 } = customDimensions;
+
+        // 验证所有输入框都已填写
+        if (
+            !pair1.dimensionA || !pair1.dimensionB ||
+            !pair2.dimensionA || !pair2.dimensionB ||
+            !pair3.dimensionA || !pair3.dimensionB
+        ) {
+            alert('Please fill in all dimension fields or select from suggestions above.');
+            return;
+        }
+
+        // 返回3对维度
+        const selectedPairs = [
+            {
+                dimensionA: pair1.dimensionA,
+                dimensionB: pair1.dimensionB,
+                descriptionA: pair1.descriptionA,
+                descriptionB: pair1.descriptionB
+            },
+            {
+                dimensionA: pair2.dimensionA,
+                dimensionB: pair2.dimensionB,
+                descriptionA: pair2.descriptionA,
+                descriptionB: pair2.descriptionB
+            },
+            {
+                dimensionA: pair3.dimensionA,
+                dimensionB: pair3.dimensionB,
+                descriptionA: pair3.descriptionA,
+                descriptionB: pair3.descriptionB
+            }
+        ];
+
+        onConfirm(selectedPairs);
+
+        // 重置状态
+        setCustomDimensions({
+            pair1: { dimensionA: '', dimensionB: '', descriptionA: '', descriptionB: '' },
+            pair2: { dimensionA: '', dimensionB: '', descriptionA: '', descriptionB: '' },
+            pair3: { dimensionA: '', dimensionB: '', descriptionA: '', descriptionB: '' }
+        });
+    };
+
+    if (!isOpen) return null;
+
+    return (
+        <div className="dimension-selector-panel" data-panel-root="dimension-selector">
+            <div className="panel-header">
+                <h3>Select Evaluation Dimensions</h3>
+                <button className="close-btn" onClick={onClose}>×</button>
+            </div>
+
+            {isLoading && (
+                <div className="panel-loading">
+                    <div className="spinner"></div>
+                    <p>Generating dimension suggestions...</p>
+                </div>
+            )}
+
+            {error && (
+                <div className="panel-error">
+                    <p>{error}</p>
+                    <button onClick={fetchSuggestedDimensions}>Retry</button>
+                </div>
+            )}
+
+            {!isLoading && !error && suggestedPairs.length > 0 && (
+                <>
+                    {/* 左右两列布局 */}
+                    <div className="panel-two-columns">
+                        {/* 左列：AI 建议的预设选项 */}
+                        <div className="suggestions-section">
+                            <h4>AI Suggested Dimensions (click to select)</h4>
+                            <div className="suggestions-list">
+                                {suggestedPairs.map((pair, index) => {
+                                    const selectedSlot = findPairSlotForSuggestion(pair, customDimensions);
+                                    const isSelected = !!selectedSlot;
+
+                                    return (
+                                        <div
+                                            key={index}
+                                            className={`suggestion-card ${isSelected ? 'selected' : ''}`}
+                                            onClick={() => handleToggleSuggestion(pair)}
+                                        >
+                                            {isSelected && (
+                                                <span className="selected-badge">Pair {selectedSlot.replace('pair', '')}</span>
+                                            )}
+
+                                            <div className="suggestion-content">
+                                                <div className="dimension-side side-a">
+                                                    <span className="dimension-label-a">{pair.dimensionA}</span>
+                                                    {pair.descriptionA && (
+                                                        <p className="description-label-a">{pair.descriptionA}</p>
+                                                    )}
+                                                </div>
+
+                                                <div className="vs-separator-vertical">vs</div>
+
+                                                <div className="dimension-side side-b">
+                                                    <span className="dimension-label-b">{pair.dimensionB}</span>
+                                                    {pair.descriptionB && (
+                                                        <p className="description-label-b">{pair.descriptionB}</p>
+                                                    )}
+                                                </div>
+                                            </div>
+                                        </div>
+                                    );
+                                })}
+                            </div>
+                        </div>
+
+                        {/* 右列：用户选择的3个槽位 */}
+                        <div className="custom-section">
+                            <h4>Your Selected Dimensions</h4>
+                            <div className="custom-inputs-box">
+                                {/* Pair 1 */}
+                                <div className="dimension-pair-inputs">
+                                    <div className="pair-label">Pair 1 (X-axis)</div>
+                                    <div className="pair-row">
+                                        <div className="dimension-field-group">
+                                            <input
+                                                type="text"
+                                                className="dimension-input"
+                                                placeholder="Dimension A Name"
+                                                value={customDimensions.pair1.dimensionA}
+                                                onChange={(e) => handleInputChange(1, 'dimensionA', e.target.value)}
+                                            />
+                                            <textarea
+                                                className="description-input"
+                                                placeholder="Description for Dimension A"
+                                                value={customDimensions.pair1.descriptionA}
+                                                onChange={(e) => handleInputChange(1, 'descriptionA', e.target.value)}
+                                                rows={3}
+                                            />
+                                        </div>
+                                        <span className="input-separator">vs</span>
+                                        <div className="dimension-field-group">
+                                            <input
+                                                type="text"
+                                                className="dimension-input"
+                                                placeholder="Dimension B Name"
+                                                value={customDimensions.pair1.dimensionB}
+                                                onChange={(e) => handleInputChange(1, 'dimensionB', e.target.value)}
+                                            />
+                                            <textarea
+                                                className="description-input"
+                                                placeholder="Description for Dimension B"
+                                                value={customDimensions.pair1.descriptionB}
+                                                onChange={(e) => handleInputChange(1, 'descriptionB', e.target.value)}
+                                                rows={3}
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+
+                                {/* Pair 2 */}
+                                <div className="dimension-pair-inputs">
+                                    <div className="pair-label">Pair 2 (Y-axis)</div>
+                                    <div className="pair-row">
+                                        <div className="dimension-field-group">
+                                            <input
+                                                type="text"
+                                                className="dimension-input"
+                                                placeholder="Dimension A Name"
+                                                value={customDimensions.pair2.dimensionA}
+                                                onChange={(e) => handleInputChange(2, 'dimensionA', e.target.value)}
+                                            />
+                                            <textarea
+                                                className="description-input"
+                                                placeholder="Description for Dimension A"
+                                                value={customDimensions.pair2.descriptionA}
+                                                onChange={(e) => handleInputChange(2, 'descriptionA', e.target.value)}
+                                                rows={3}
+                                            />
+                                        </div>
+                                        <span className="input-separator">vs</span>
+                                        <div className="dimension-field-group">
+                                            <input
+                                                type="text"
+                                                className="dimension-input"
+                                                placeholder="Dimension B Name"
+                                                value={customDimensions.pair2.dimensionB}
+                                                onChange={(e) => handleInputChange(2, 'dimensionB', e.target.value)}
+                                            />
+                                            <textarea
+                                                className="description-input"
+                                                placeholder="Description for Dimension B"
+                                                value={customDimensions.pair2.descriptionB}
+                                                onChange={(e) => handleInputChange(2, 'descriptionB', e.target.value)}
+                                                rows={3}
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+
+                                {/* Pair 3 */}
+                                <div className="dimension-pair-inputs">
+                                    <div className="pair-label">Pair 3 (Z-axis)</div>
+                                    <div className="pair-row">
+                                        <div className="dimension-field-group">
+                                            <input
+                                                type="text"
+                                                className="dimension-input"
+                                                placeholder="Dimension A Name"
+                                                value={customDimensions.pair3.dimensionA}
+                                                onChange={(e) => handleInputChange(3, 'dimensionA', e.target.value)}
+                                            />
+                                            <textarea
+                                                className="description-input"
+                                                placeholder="Description for Dimension A"
+                                                value={customDimensions.pair3.descriptionA}
+                                                onChange={(e) => handleInputChange(3, 'descriptionA', e.target.value)}
+                                                rows={3}
+                                            />
+                                        </div>
+                                        <span className="input-separator">vs</span>
+                                        <div className="dimension-field-group">
+                                            <input
+                                                type="text"
+                                                className="dimension-input"
+                                                placeholder="Dimension B Name"
+                                                value={customDimensions.pair3.dimensionB}
+                                                onChange={(e) => handleInputChange(3, 'dimensionB', e.target.value)}
+                                            />
+                                            <textarea
+                                                className="description-input"
+                                                placeholder="Description for Dimension B"
+                                                value={customDimensions.pair3.descriptionB}
+                                                onChange={(e) => handleInputChange(3, 'descriptionB', e.target.value)}
+                                                rows={3}
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* 底部操作按钮 */}
+                    <div className="panel-footer">
+                        <button className="btn-cancel" onClick={onClose}>
+                            Cancel
+                        </button>
+                        <button className="btn-confirm" onClick={handleConfirm}>
+                            Confirm & Generate Ideas
+                        </button>
+                    </div>
+                </>
+            )}
+        </div>
+    );
+};
+
+export default DimensionSelectorPanel;
diff --git a/frontend/src/components/Evaluation3D.jsx b/frontend/src/components/Evaluation3D.jsx
new file mode 100644
index 00000000..201b02b0
--- /dev/null
+++ b/frontend/src/components/Evaluation3D.jsx
@@ -0,0 +1,1011 @@
+import React, { useRef, useState, useMemo, useEffect, useCallback } from 'react';
+import { Canvas, useFrame, useThree } from '@react-three/fiber';
+import { TrackballControls, Text, Line, OrthographicCamera, Billboard } from '@react-three/drei';
+import * as THREE from 'three';
+
+// --- Constants ---
+const CUBE_SIZE = 100;
+const HALF_SIZE = CUBE_SIZE / 2;
+const NODE_RANGE = 90;
+const LABEL_COLOR = '#374151';
+const GRID_COLOR = '#e5e7eb';
+const CROSSHAIR_COLOR = '#9ca3af';
+
+// Keep node coloring consistent with Tree View
+const getNodeColor = (node, colorMap) => {
+  if (!node) return '#FF6B6B';
+  if (node.isMergedResult) return '#B22222';
+  if (node.isNewlyGenerated || node.isModified) return '#FFD700';
+  return (colorMap && colorMap[node.type]) || '#FF6B6B';
+};
+
+// --- Helpers ---
+const scoreToPos = (score) => {
+  // Score range: -50 to 50 → Position range: -NODE_RANGE/2 to NODE_RANGE/2
+  const clamped = Math.max(-50, Math.min(50, score));
+  return (clamped / 50) * (NODE_RANGE / 2);
+};
+const posToScore = (pos) => Math.max(-50, Math.min(50, (pos / (NODE_RANGE / 2)) * 50));
+const isFiniteNumber = (value) => typeof value === 'number' && Number.isFinite(value);
+const hasVector2 = (pos) => !!pos && isFiniteNumber(pos.x) && isFiniteNumber(pos.y);
+const hasVector3 = (pos) => !!pos && isFiniteNumber(pos.x) && isFiniteNumber(pos.y) && isFiniteNumber(pos.z);
+
+// --- Components ---
+
+const CameraController = ({ targetFaceIndex, targetUp, isSnapping, setSnapped, setIsSnapping, controlsRef }) => {
+  const { camera } = useThree();
+
+  // 6 orthogonal view positions
+  const faceConfigs = useMemo(() => [
+    { pos: [0, 0, 1] },   // Front
+    { pos: [1, 0, 0] },   // Right
+    { pos: [0, 0, -1] },  // Back
+    { pos: [-1, 0, 0] },  // Left
+    { pos: [0, 1, 0] },   // Top
+    { pos: [0, -1, 0] },  // Bottom
+  ], []);
+
+  useFrame(() => {
+    if (isSnapping && targetFaceIndex !== null && targetUp) {
+      const R = 200;
+      const config = faceConfigs[targetFaceIndex];
+      const targetPos = new THREE.Vector3(...config.pos).multiplyScalar(R);
+
+      // Lerp position and up vector
+      camera.position.lerp(targetPos, 0.15);
+      camera.up.lerp(targetUp, 0.15);
+
+      // Sync OrbitControls internal state
+      if (controlsRef?.current) {
+        controlsRef.current.update();
+      }
+
+      const dist = camera.position.distanceTo(targetPos);
+
+      if (dist < 0.5) {
+        camera.position.copy(targetPos);
+        camera.up.copy(targetUp);
+        if (controlsRef?.current) {
+          controlsRef.current.update();
+        }
+        setSnapped(true);
+        setIsSnapping(false);
+      }
+    }
+  });
+  return null;
+};
+
+const WireframeBox = () => {
+  return (
+    <lineSegments>
+      <edgesGeometry args={[new THREE.BoxGeometry(CUBE_SIZE, CUBE_SIZE, CUBE_SIZE)]} />
+      <lineBasicMaterial color={GRID_COLOR} />
+    </lineSegments>
+  );
+};
+
+const ProjectedAxis = ({ type }) => {
+  const points = useMemo(() => {
+    if (type === 'x') return [[-HALF_SIZE, 0, 0], [HALF_SIZE, 0, 0]];
+    if (type === 'y') return [[0, -HALF_SIZE, 0], [0, HALF_SIZE, 0]];
+    if (type === 'z') return [[0, 0, -HALF_SIZE], [0, 0, HALF_SIZE]];
+    return [[0, 0, 0], [0, 0, 0]];
+  }, [type]);
+
+  return (
+    <group>
+      <Line points={points} color={CROSSHAIR_COLOR} lineWidth={1.5} />
+    </group>
+  );
+};
+
+const AxisLabel = ({ position, text, rotationZ, anchorX, anchorY, fontSize = 3.5 }) => {
+  const { camera } = useThree();
+  const ref = useRef();
+  const rotQuat = useMemo(() => new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 0, 1), rotationZ), [rotationZ]);
+
+  useFrame(() => {
+    if (!ref.current) return;
+    ref.current.quaternion.copy(camera.quaternion);
+    if (rotationZ !== 0) {
+      ref.current.quaternion.multiply(rotQuat);
+    }
+  });
+
+  return (
+    <group ref={ref} position={position}>
+      <Text fontSize={fontSize} color={LABEL_COLOR} anchorX={anchorX} anchorY={anchorY} fontWeight="bold" outlineWidth={0.25} outlineColor="#ffffff">
+        {text}
+      </Text>
+    </group>
+  );
+};
+
+const AxisLabels3D = ({ activeFace, dims, isSnapped }) => {
+  const faceNormals = [
+    { id: 0, v: new THREE.Vector3(0, 0, 1), perpAxis: 'z' },   // Front
+    { id: 1, v: new THREE.Vector3(1, 0, 0), perpAxis: 'x' },   // Right
+    { id: 2, v: new THREE.Vector3(0, 0, -1), perpAxis: 'z' },  // Back
+    { id: 3, v: new THREE.Vector3(-1, 0, 0), perpAxis: 'x' },  // Left
+    { id: 4, v: new THREE.Vector3(0, 1, 0), perpAxis: 'y' },   // Top
+    { id: 5, v: new THREE.Vector3(0, -1, 0), perpAxis: 'y' },  // Bottom
+  ];
+
+  const axisDefs = [
+    { key: 'x', vec: new THREE.Vector3(1, 0, 0), dimIndex: 0 },
+    { key: 'y', vec: new THREE.Vector3(0, 1, 0), dimIndex: 1 },
+    { key: 'z', vec: new THREE.Vector3(0, 0, 1), dimIndex: 2 }
+  ];
+
+  const faceNormal = faceNormals[activeFace].v || faceNormals[0].v;
+
+  return (
+    <>
+      {axisDefs.map(({ key, vec, dimIndex }) => {
+        const dim = dims[dimIndex];
+        if (!dim) return null;
+
+        const isPerpendicular = Math.abs(vec.clone().normalize().dot(faceNormal)) > 0.999;
+        if (isSnapped && isPerpendicular) return null;
+
+        const posA = vec.clone().multiplyScalar(-HALF_SIZE);
+        const posB = vec.clone().multiplyScalar(HALF_SIZE);
+
+        return (
+          <React.Fragment key={key}>
+            <AxisLabel position={posA} text={dim.dimensionA} rotationZ={0} anchorX="center" anchorY="middle" fontSize={3} />
+            <AxisLabel position={posB} text={dim.dimensionB} rotationZ={0} anchorX="center" anchorY="middle" fontSize={3} />
+          </React.Fragment>
+        );
+      })}
+    </>
+  );
+};
+
+const Node3D = ({ node, position, color, isSelected, isHovered, onPointerOver, onPointerOut, onClick, onDragEnd, axisMapping, isSnapped, allNodes, dims, setIsDraggingNode, setDragVisual3D, setDragVisualState, projectToFace, dragVisual3D, dragVisualState, activeCount, activeDimensionIndices, dragHoverTarget }) => {
+  const meshRef = useRef();
+  const [isDragging, setIsDragging] = useState(false);
+  const { camera, raycaster } = useThree();
+  const dragPlane = useMemo(() => new THREE.Plane(), []);
+  const intersection = useMemo(() => new THREE.Vector3(), []);
+  const dragOffset = useMemo(() => new THREE.Vector3(), []);
+  const dragStart = useRef(new THREE.Vector3());
+  const movedRef = useRef(false);
+
+  // Nodes stay at their true 3D position (no projection to face)
+  const targetPos = new THREE.Vector3(...position);
+
+  useFrame(() => {
+    if (meshRef.current && !isDragging) {
+      meshRef.current.position.lerp(targetPos, 0.15);
+    }
+  });
+
+  // Get normal vector for the perpendicular axis
+  const getPerpendicularNormal = (axis) => {
+    switch (axis) {
+      case 'x': return new THREE.Vector3(1, 0, 0);
+      case 'y': return new THREE.Vector3(0, 1, 0);
+      case 'z': return new THREE.Vector3(0, 0, 1);
+      default: return new THREE.Vector3(0, 0, 1);
+    }
+  };
+
+  const handlePointerDown = (e) => {
+    e.stopPropagation();
+    if (e.button !== 0) return;
+
+    // Prevent canvas mousedown from triggering rotation
+    e.nativeEvent?.stopImmediatePropagation();
+
+    setIsDragging(true);
+    if (setIsDraggingNode) setIsDraggingNode(true);
+    movedRef.current = false;
+
+    let normal;
+    if (activeCount === 1) {
+      normal = new THREE.Vector3(0, 0, 1); // Force drag plane to be XY for 1D (allowing X movement)
+    } else {
+      normal = isSnapped && axisMapping
+        ? getPerpendicularNormal(axisMapping.perpAxis)
+        : new THREE.Vector3().copy(camera.position).normalize();
+    }
+    dragPlane.setFromNormalAndCoplanarPoint(normal, meshRef.current.position);
+    if (raycaster.ray.intersectPlane(dragPlane, intersection)) {
+      dragOffset.copy(intersection).sub(meshRef.current.position);
+    }
+    dragStart.current.copy(meshRef.current.position);
+    e.target.setPointerCapture(e.pointerId);
+  };
+
+  const handlePointerMove = (e) => {
+    if (!isDragging) return;
+    e.stopPropagation();
+    if (raycaster.ray.intersectPlane(dragPlane, intersection)) {
+      const newPos = intersection.sub(dragOffset);
+      const lim = NODE_RANGE / 2;
+      newPos.x = Math.max(-lim, Math.min(lim, newPos.x));
+
+      // For 1D view, restrict dragging to X-axis only
+      if (activeCount === 1) {
+        newPos.y = 0; // Force Y to 0
+        newPos.z = 0; // Force Z to 0
+      } else {
+        newPos.y = Math.max(-lim, Math.min(lim, newPos.y));
+        newPos.z = Math.max(-lim, Math.min(lim, newPos.z));
+      }
+      meshRef.current.position.copy(newPos);
+      movedRef.current = true;
+
+      // live visual for modify/merge - lock perpendicular axis
+      const curr = newPos.clone();
+      if (isSnapped && axisMapping) {
+        if (axisMapping.perpAxis === 'x') curr.x = position[0];
+        if (axisMapping.perpAxis === 'y') curr.y = position[1];
+        if (axisMapping.perpAxis === 'z') curr.z = position[2];
+      }
+      let mergeTargetId = null;
+      let mergeTargetPos = null;
+      let best = Infinity;
+      const thresh = 8;
+      allNodes.forEach(other => {
+        if (other.id === node.id || other.isGhost) return;
+        const px = scoreToPos(other.scores?.[`${dims[0]?.dimensionA}-${dims[0]?.dimensionB}`] ?? 0);
+        const py = scoreToPos(other.scores?.[`${dims[1]?.dimensionA}-${dims[1]?.dimensionB}`] ?? 0);
+        const pz = scoreToPos(other.scores?.[`${dims[2]?.dimensionA}-${dims[2]?.dimensionB}`] ?? 0);
+        const facePos = projectToFace(new THREE.Vector3(px, py, pz));
+        const dragFace = projectToFace(curr);
+        const d = Math.hypot(dragFace.a - facePos.a, dragFace.b - facePos.b);
+        if (d < thresh && d < best) {
+          best = d;
+          mergeTargetId = other.id;
+          mergeTargetPos = new THREE.Vector3(px, py, pz);
+        }
+      });
+      if (setDragVisual3D) {
+        if (mergeTargetId) {
+          setDragVisual3D({ type: 'merge', sourceId: node.id, current: curr.clone(), targetId: mergeTargetId, targetPos: mergeTargetPos });
+        } else {
+          setDragVisual3D({ type: 'modify', sourceId: node.id, start: dragStart.current.clone(), current: curr.clone() });
+        }
+      }
+      if (setDragVisualState) {
+        if (mergeTargetId && mergeTargetPos) {
+          setDragVisualState({
+            type: 'merge',
+            sourceNodeId: node.id,
+            targetNodeId: mergeTargetId,
+            ghostPosition: { x: dragStart.current.x, y: dragStart.current.y, z: dragStart.current.z },
+            targetPosition: { x: mergeTargetPos.x, y: mergeTargetPos.y, z: mergeTargetPos.z }
+          });
+        } else {
+          setDragVisualState({
+            type: 'modify',
+            sourceNodeId: node.id,
+            ghostPosition: { x: dragStart.current.x, y: dragStart.current.y, z: dragStart.current.z },
+            newPosition: { x: curr.x, y: curr.y, z: curr.z }
+          });
+        }
+      }
+    }
+  };
+
+  const handlePointerUp = (e) => {
+    if (!isDragging) return;
+    e.stopPropagation();
+    setIsDragging(false);
+    if (setIsDraggingNode) setIsDraggingNode(false);
+    e.target.releasePointerCapture(e.pointerId);
+    if (!movedRef.current) {
+      if (onClick) onClick(node);
+      return;
+    }
+    const curr = meshRef.current.position.clone();
+
+    // Lock perpendicular axis when snapped
+    if (isSnapped && activeCount > 1 && axisMapping) { // Apply for 2D/3D only
+      if (axisMapping.perpAxis === 'x') curr.x = position[0];
+      if (axisMapping.perpAxis === 'y') curr.y = position[1];
+      if (axisMapping.perpAxis === 'z') curr.z = position[2];
+    } else if (activeCount === 1) { // For 1D, ensure Y and Z are 0
+      curr.y = 0;
+      curr.z = 0;
+    }
+
+    // Build new score map
+    const scoreFromAxis = (val) => posToScore(val);
+    const scoresMap = {};
+    if (activeCount === 1) {
+      const activeDimIndex = activeDimensionIndices[0];
+      if (dims[activeDimIndex]) {
+        scoresMap[`${dims[activeDimIndex].dimensionA}-${dims[activeDimIndex].dimensionB}`] = scoreFromAxis(curr.x);
+      }
+    } else { // 2D or 3D
+      if (dims[0]) scoresMap[`${dims[0].dimensionA}-${dims[0].dimensionB}`] = scoreFromAxis(curr.x);
+      if (dims[1]) scoresMap[`${dims[1].dimensionA}-${dims[1].dimensionB}`] = scoreFromAxis(curr.y);
+      if (dims[2]) scoresMap[`${dims[2].dimensionA}-${dims[2].dimensionB}`] = scoreFromAxis(curr.z);
+    }
+
+    // Merge detection in 2D plane (use passed-in projectToFace)
+    const dragged2D = projectToFace(curr);
+    let mergeTargetId = null;
+    let mergeTargetPos = null;
+    let bestDist = Infinity;
+    const threshold = 8; // scene units
+
+    allNodes.forEach(other => {
+      if (other.id === node.id || other.isGhost) return;
+      const targetVec = new THREE.Vector3(
+        scoreToPos(other.scores?.[`${dims[0]?.dimensionA}-${dims[0]?.dimensionB}`] ?? 0),
+        scoreToPos(other.scores?.[`${dims[1]?.dimensionA}-${dims[1]?.dimensionB}`] ?? 0),
+        scoreToPos(other.scores?.[`${dims[2]?.dimensionA}-${dims[2]?.dimensionB}`] ?? 0)
+      );
+      const pos = projectToFace(targetVec);
+      const dx = dragged2D.a - pos.a;
+      const dy = dragged2D.b - pos.b;
+      const d = Math.hypot(dx, dy);
+      if (d < threshold && d < bestDist) {
+        bestDist = d;
+        mergeTargetId = other.id;
+        mergeTargetPos = targetVec;
+      }
+    });
+
+    if (setDragVisual3D) {
+      if (mergeTargetId && mergeTargetPos) {
+        setDragVisual3D({ type: 'merge', sourceId: node.id, current: curr.clone(), targetId: mergeTargetId, targetPos: mergeTargetPos.clone(), hold: true });
+      } else {
+        setDragVisual3D({ type: 'modify', sourceId: node.id, start: dragStart.current.clone(), current: curr.clone(), hold: true });
+      }
+    }
+    if (onDragEnd) onDragEnd(node.id, { scoresMap, mergeTargetId, clientX: e.clientX, clientY: e.clientY }, e);
+  };
+
+  return (
+    <group>
+      <mesh ref={meshRef} position={position} userData={{ nodeId: node.id }}
+        onPointerDown={handlePointerDown} onPointerMove={handlePointerMove} onPointerUp={handlePointerUp}
+        onPointerOver={(e) => { e.stopPropagation(); onPointerOver(node) }}
+        onPointerOut={(e) => { e.stopPropagation(); onPointerOut() }}
+        scale={
+          (dragVisualState?.type === 'merge' && dragVisualState.targetNodeId === node.id) ||
+            (dragVisual3D?.type === 'merge' && dragVisual3D.targetId === node.id) ||
+            (dragHoverTarget === node.id)
+            ? 1.35
+            : ((isHovered || isDragging) && !isSelected ? (activeCount === 1 ? 1.5 : 1.2) : (activeCount === 1 ? 1.2 : 1))
+        }
+      >
+        <sphereGeometry args={[isSelected ? 5 : (activeCount === 1 ? 4 : 3.5), 32, 32]} />
+        <meshBasicMaterial
+          color={color}
+          opacity={
+            (dragVisualState?.type === 'merge' && dragVisualState.sourceNodeId === node.id) ||
+              (dragVisual3D?.type === 'merge' && dragVisual3D.sourceId === node.id)
+              ? 0.15
+              : 1
+          }
+          transparent={
+            (dragVisualState?.type === 'merge' && dragVisualState.sourceNodeId === node.id) ||
+            (dragVisual3D?.type === 'merge' && dragVisual3D.sourceId === node.id)
+          }
+          toneMapped={false}
+        />
+        {isSelected && (
+          <mesh scale={[1.08, 1.08, 1.08]}>
+            <sphereGeometry args={[isSelected ? 5.3 : (activeCount === 1 ? 4.3 : 3.8), 32, 32]} />
+            <meshBasicMaterial color="#000" side={THREE.BackSide} />
+          </mesh>
+        )}
+      </mesh>
+      <Billboard position={position}>
+        <Text
+          fontSize={3}
+          color="#1f2937"
+          fillOpacity={isHovered || isSelected ? 1 : 0.3}
+          outlineWidth={0.2}
+          outlineColor="#ffffff"
+          anchorY="bottom"
+          position={[0, (activeCount === 1 ? 4 : 5), 0]} // Adjusted position for 1D
+        >
+          {node.title}
+        </Text>
+      </Billboard>
+    </group>
+  );
+};
+
+const SceneContent = ({
+  nodes,
+  dimensions,
+  onNodeDragEnd,
+  selectedNode,
+  onNodeClick,
+  hoveredNode,
+  onNodeHover,
+  targetFaceIndex,
+  setTargetFaceIndex,
+  pendingChange,
+  pendingMerge,
+  colorMap,
+  dragVisualState,
+  setDragVisualState,
+  mergeAnimationState,
+  activeDimensionIndices,
+  onDropExternal,
+  dragHoverTarget,
+  onDragHover
+}) => {
+  const { camera, gl, scene, raycaster } = useThree();
+  const controlsRef = useRef();
+  const [isSnapped, setSnapped] = useState(true);
+  const [isSnapping, setIsSnapping] = useState(false);
+  const [isDraggingNode, setIsDraggingNode] = useState(false);
+  const [dragVisual3D, setDragVisual3D] = useState(null);
+  const [targetUp, setTargetUp] = useState(null);
+  const [axisMapping, setAxisMapping] = useState({
+    perpAxis: 'z',
+    horizontalAxis: 'x',
+    verticalAxis: 'y'
+  });
+
+  // Handle external drops (HTML5 DnD)
+  useEffect(() => {
+    const canvas = gl.domElement;
+    // Prevent global DOM tracker from double-counting canvas-level events; track nodes semantically instead.
+    canvas.setAttribute('data-tracking-name', 'evaluation_3d_canvas');
+    canvas.setAttribute('data-uatrack-suppress-click', 'true');
+    canvas.setAttribute('data-uatrack-suppress-hover', 'true');
+    canvas.setAttribute('data-uatrack-suppress-drag', 'true');
+
+    const handleDragOver = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      if (!onDragHover) return;
+
+      const rect = canvas.getBoundingClientRect();
+      const mouse = new THREE.Vector2(
+        ((e.clientX - rect.left) / rect.width) * 2 - 1,
+        -((e.clientY - rect.top) / rect.height) * 2 + 1
+      );
+
+      raycaster.setFromCamera(mouse, camera);
+
+      const intersects = raycaster.intersectObjects(scene.children, true);
+      const hit = intersects.find(intersect =>
+        intersect.object.userData && intersect.object.userData.nodeId
+      );
+
+      if (hit) {
+        onDragHover(hit.object.userData.nodeId);
+      } else {
+        onDragHover(null);
+      }
+    };
+
+    const handleDrop = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      // Clear hover state on drop
+      if (onDragHover) onDragHover(null);
+
+      if (!onDropExternal) return;
+
+      const rect = canvas.getBoundingClientRect();
+      const mouse = new THREE.Vector2(
+        ((e.clientX - rect.left) / rect.width) * 2 - 1,
+        -((e.clientY - rect.top) / rect.height) * 2 + 1
+      );
+
+      raycaster.setFromCamera(mouse, camera);
+
+      // Filter for objects that are likely our nodes
+      const intersects = raycaster.intersectObjects(scene.children, true);
+
+      // Find the first intersected object that has nodeId in userData
+      const hit = intersects.find(intersect =>
+        intersect.object.userData && intersect.object.userData.nodeId
+      );
+
+      if (hit) {
+        const nodeId = hit.object.userData.nodeId;
+        const targetNode = nodes.find(n => n.id === nodeId);
+        if (targetNode) {
+          onDropExternal(e, targetNode);
+          return;
+        }
+      }
+
+      // If no valid node hit, drop on empty space
+      onDropExternal(e, null);
+    };
+
+    canvas.addEventListener('dragover', handleDragOver);
+    canvas.addEventListener('drop', handleDrop);
+    // Also handle dragleave to clear hover
+    const handleDragLeave = () => {
+      if (onDragHover) onDragHover(null);
+    };
+    canvas.addEventListener('dragleave', handleDragLeave);
+
+    return () => {
+      canvas.removeEventListener('dragover', handleDragOver);
+      canvas.removeEventListener('drop', handleDrop);
+      canvas.removeEventListener('dragleave', handleDragLeave);
+    };
+  }, [gl, camera, scene, raycaster, nodes, onDropExternal, onDragHover]);
+
+  // Compute axis mapping based on camera orientation
+  const computeAxisMapping = useCallback((cam) => {
+    const direction = new THREE.Vector3();
+    cam.getWorldDirection(direction);
+
+    const up = cam.up.clone().normalize();
+    const right = new THREE.Vector3().crossVectors(direction, up).normalize();
+
+    const axes = ['x', 'y', 'z'];
+    const vecs = {
+      x: new THREE.Vector3(1, 0, 0),
+      y: new THREE.Vector3(0, 1, 0),
+      z: new THREE.Vector3(0, 0, 1)
+    };
+
+    // 1. perpAxis: axis most aligned with view direction
+    let perpAxis = 'z', maxDirDot = 0;
+    axes.forEach(axis => {
+      const dot = Math.abs(direction.dot(vecs[axis]));
+      if (dot > maxDirDot) {
+        maxDirDot = dot;
+        perpAxis = axis;
+      }
+    });
+
+    // 2. horizontalAxis: remaining axis most aligned with screen right
+    const remaining = axes.filter(a => a !== perpAxis);
+    let horizontalAxis = remaining[0], maxRightDot = 0;
+    remaining.forEach(axis => {
+      const dot = Math.abs(right.dot(vecs[axis]));
+      if (dot > maxRightDot) {
+        maxRightDot = dot;
+        horizontalAxis = axis;
+      }
+    });
+
+    // 3. verticalAxis: the remaining one
+    const verticalAxis = remaining.find(a => a !== horizontalAxis);
+
+    return { perpAxis, horizontalAxis, verticalAxis };
+  }, []);
+
+  // Compute target up vector based on current camera orientation
+  const computeTargetUp = useCallback((cam, perpAxis) => {
+    // Get actual screen Y direction from camera matrix (not camera.up)
+    const screenUp = new THREE.Vector3();
+    cam.matrixWorld.extractBasis(new THREE.Vector3(), screenUp, new THREE.Vector3());
+    screenUp.normalize();
+
+    // Two axes on screen (non-perp)
+    const axes = ['x', 'y', 'z'].filter(a => a !== perpAxis);
+    const vecs = {
+      x: new THREE.Vector3(1, 0, 0),
+      y: new THREE.Vector3(0, 1, 0),
+      z: new THREE.Vector3(0, 0, 1)
+    };
+
+    // Find which axis is closer to screen vertical direction
+    const dot0 = Math.abs(screenUp.dot(vecs[axes[0]]));
+    const dot1 = Math.abs(screenUp.dot(vecs[axes[1]]));
+    const verticalAxis = dot0 > dot1 ? axes[0] : axes[1];
+
+    // Determine sign based on dot product (preserve visual direction)
+    const dot = screenUp.dot(vecs[verticalAxis]);
+    return dot > 0 ? vecs[verticalAxis].clone() : vecs[verticalAxis].clone().negate();
+  }, []);
+
+  const handleEnd = () => {
+    const camDir = camera.position.clone().normalize();
+    const directions = [
+      { id: 0, v: new THREE.Vector3(0, 0, 1), perpAxis: 'z' },   // Front
+      { id: 1, v: new THREE.Vector3(1, 0, 0), perpAxis: 'x' },   // Right
+      { id: 2, v: new THREE.Vector3(0, 0, -1), perpAxis: 'z' },  // Back
+      { id: 3, v: new THREE.Vector3(-1, 0, 0), perpAxis: 'x' },  // Left
+      { id: 4, v: new THREE.Vector3(0, 1, 0), perpAxis: 'y' },   // Top
+      { id: 5, v: new THREE.Vector3(0, -1, 0), perpAxis: 'y' },  // Bottom
+    ];
+
+    let best = 0, maxDot = -Infinity;
+    directions.forEach(d => {
+      const dot = camDir.dot(d.v);
+      if (dot > maxDot) {
+        maxDot = dot;
+        best = d.id;
+      }
+    });
+
+    // Compute axis mapping based on current camera orientation
+    const mapping = computeAxisMapping(camera);
+    setAxisMapping(mapping);
+
+    // Only snap if very close to an orthogonal face (threshold: 0.95)
+    const SNAP_THRESHOLD = 0.95;
+    const shouldSnap = maxDot > SNAP_THRESHOLD;
+
+    if (shouldSnap) {
+      // Compute target up vector based on current screen orientation
+      const up = computeTargetUp(camera, directions[best].perpAxis);
+      setTargetUp(up);
+
+      setTargetFaceIndex(best);
+      setIsSnapping(true);
+      setSnapped(false);
+    }
+
+  };
+
+  const handleStart = () => {
+    setSnapped(false);
+    setIsSnapping(false);
+  };
+
+  useEffect(() => {
+    const canvas = document.querySelector('canvas');
+    if (!canvas) return;
+
+    const handleWheel = (e) => {
+      e.preventDefault();
+      camera.zoom = Math.max(1, Math.min(10, camera.zoom - e.deltaY * 0.005));
+      camera.updateProjectionMatrix();
+    };
+
+    canvas.addEventListener('wheel', handleWheel, { passive: false });
+
+    return () => {
+      canvas.removeEventListener('wheel', handleWheel);
+    };
+  }, [camera]);
+
+  // Project 3D position to 2D plane based on axis mapping
+  const projectToPlane = useCallback((vec) => {
+    const getVal = (axis) => axis === 'x' ? vec.x : axis === 'y' ? vec.y : vec.z;
+    return {
+      a: getVal(axisMapping.horizontalAxis),
+      b: getVal(axisMapping.verticalAxis)
+    };
+  }, [axisMapping]);
+
+  // Filter out root node once at the top level
+  const validNodes = useMemo(() => nodes.filter(node => node.type !== 'root'), [nodes]);
+
+  // Clear internal dragVisual3D when parent clears dragVisualState (on cancel/error)
+  useEffect(() => {
+    if (!dragVisualState && dragVisual3D) {
+      setDragVisual3D(null);
+    }
+  }, [dragVisualState, dragVisual3D, setDragVisual3D]);
+
+  // Camera Transition Logic based on Active Dimensions
+  const activeCount = activeDimensionIndices ? activeDimensionIndices.length : 3;
+
+  const mergeTargetPosition = useMemo(() => {
+    if (!dragVisualState || dragVisualState.type !== 'merge') return null;
+    if (hasVector3(dragVisualState.targetPosition)) return dragVisualState.targetPosition;
+    if (!dragVisualState.targetNodeId) return null;
+    const targetNode = nodes.find(n => n.id === dragVisualState.targetNodeId);
+    if (!targetNode) return null;
+
+    const getScore = (dimObj) => {
+      if (!dimObj) return 0;
+      const key = `${dimObj.dimensionA}-${dimObj.dimensionB}`;
+      if (targetNode.scores && targetNode.scores[key] !== undefined) return targetNode.scores[key];
+      return 0;
+    };
+
+    let x, y, z;
+    if (activeCount === 1) {
+      const activeIdx = activeDimensionIndices ? activeDimensionIndices[0] : 0;
+      const activeDim = dimensions[activeIdx];
+      x = getScore(activeDim);
+      y = 0;
+      z = 0;
+    } else {
+      x = getScore(dimensions[0]);
+      y = getScore(dimensions[1]);
+      z = getScore(dimensions[2]);
+    }
+
+    return { x: scoreToPos(x), y: scoreToPos(y), z: scoreToPos(z) };
+  }, [dragVisualState, nodes, dimensions, activeCount, activeDimensionIndices]);
+  const mergeGhostPosition = useMemo(() => {
+    if (!dragVisualState || dragVisualState.type !== 'merge') return null;
+    if (hasVector3(dragVisualState.ghostPosition)) return dragVisualState.ghostPosition;
+    if (!hasVector2(dragVisualState.ghostPosition)) return null;
+    if (!gl?.domElement) return null;
+
+    const rect = gl.domElement.getBoundingClientRect();
+    if (!rect.width || !rect.height) return null;
+
+    const mouse = new THREE.Vector2(
+      (dragVisualState.ghostPosition.x / rect.width) * 2 - 1,
+      -((dragVisualState.ghostPosition.y / rect.height) * 2 - 1)
+    );
+
+    raycaster.setFromCamera(mouse, camera);
+    const viewDir = new THREE.Vector3();
+    camera.getWorldDirection(viewDir);
+    const planePoint = mergeTargetPosition
+      ? new THREE.Vector3(mergeTargetPosition.x, mergeTargetPosition.y, mergeTargetPosition.z)
+      : new THREE.Vector3(0, 0, 0);
+    const plane = new THREE.Plane().setFromNormalAndCoplanarPoint(viewDir, planePoint);
+    const hit = new THREE.Vector3();
+    const intersected = raycaster.ray.intersectPlane(plane, hit);
+    if (!intersected) return null;
+    return { x: hit.x, y: hit.y, z: hit.z };
+  }, [dragVisualState, gl, camera, raycaster, mergeTargetPosition]);
+
+  useEffect(() => {
+    if (activeCount < 3) {
+      // Determine target face and up vector to align axes with screen
+      // Requirement: First dimension (Horizontal) -> Left to Right
+      //              Second dimension (Vertical) -> Bottom to Top
+      let face = 0; // Default Front
+      let up = new THREE.Vector3(0, 1, 0);
+
+      if (activeCount === 2) {
+        const indices = activeDimensionIndices || [0, 1];
+        const [a, b] = [...indices].sort((i, j) => i - j);
+
+        if (a === 0 && b === 1) {
+          // XY: Front View (Looking at Z-)
+          // X (Horizontal): Left(-X) -> Right(+X)
+          // Y (Vertical): Bottom(-Y) -> Top(+Y)
+          face = 0;
+          up.set(0, 1, 0);
+        } else if (a === 0 && b === 2) {
+          // XZ: Bottom View (Looking at Y+)
+          // X (Horizontal): Left(-X) -> Right(+X)
+          // Z (Vertical): Bottom(-Z is Down? No, we want A(-Z) at Bottom).
+          // If Up is Z+, Screen Top is Z+, Screen Bottom is Z-.
+          // So A(-Z) is Bottom. B(+Z) is Top. Correct.
+          face = 5;
+          up.set(0, 0, 1);
+        } else if (a === 1 && b === 2) {
+          // YZ: Right View (Looking at X-)
+          // Y (Horizontal): Left(-Y) -> Right(+Y)
+          // Z (Vertical): Bottom(-Z) -> Top(+Z) (With Up=Z+)
+          face = 1;
+          up.set(0, 0, 1);
+        }
+      } else {
+        // 1D: Always Front (mapped to X)
+        face = 0;
+        up.set(0, 1, 0);
+      }
+
+      setTargetFaceIndex(face);
+      setTargetUp(up);
+      setIsSnapping(true);
+      setSnapped(false);
+    }
+  }, [activeCount, activeDimensionIndices, setTargetFaceIndex, setTargetUp, setIsSnapping, setSnapped]);
+
+  return (
+    <>
+      <CameraController targetFaceIndex={targetFaceIndex} targetUp={targetUp} isSnapping={isSnapping} setSnapped={setSnapped} setIsSnapping={setIsSnapping} controlsRef={controlsRef} />
+      <ambientLight intensity={0.8} />
+      <pointLight position={[100, 100, 100]} intensity={1} />
+      <pointLight position={[-100, -100, -100]} intensity={0.5} />
+
+      <TrackballControls
+        ref={controlsRef}
+        noZoom
+        noPan
+        rotateSpeed={3}
+        enabled={!isDraggingNode && !isSnapping && activeCount === 3}
+        onStart={handleStart}
+        onEnd={handleEnd}
+      />
+
+      {activeCount === 3 && <WireframeBox />}
+
+      {/* Render ProjectedAxis based on activeCount */}
+      {activeCount === 1 && <ProjectedAxis type="x" />}
+      {activeCount === 2 && (
+        <>
+          {activeDimensionIndices.includes(0) && <ProjectedAxis type="x" />}
+          {activeDimensionIndices.includes(1) && <ProjectedAxis type="y" />}
+          {activeDimensionIndices.includes(2) && <ProjectedAxis type="z" />}
+        </>
+      )}
+      {activeCount === 3 && (
+        <>
+          <ProjectedAxis type="x" />
+          <ProjectedAxis type="y" />
+          <ProjectedAxis type="z" />
+        </>
+      )}
+
+      {activeCount === 1 ? (
+        // For 1D, pass only the single active dimension (mapped to index 0 for correct X-axis labeling)
+        <AxisLabels3D activeFace={targetFaceIndex} dims={[dimensions[activeDimensionIndices[0]], null, null]} isSnapped={isSnapped} />
+      ) : (
+        // For 2D/3D, pass all dims (nulls will be filtered inside AxisLabels3D component logic itself)
+        <AxisLabels3D activeFace={targetFaceIndex} dims={dimensions} isSnapped={isSnapped} />
+      )}
+
+      {dragVisualState && dragVisualState.type === 'modify' && dragVisualState.ghostPosition && dragVisualState.newPosition && (
+        <>
+          <Line points={[
+            [dragVisualState.ghostPosition.x, dragVisualState.ghostPosition.y, dragVisualState.ghostPosition.z],
+            [dragVisualState.newPosition.x, dragVisualState.newPosition.y, dragVisualState.newPosition.z]
+          ]} color="#9ca3af" lineWidth={2} dashed dashSize={1} gapSize={1} />
+          <mesh position={[dragVisualState.ghostPosition.x, dragVisualState.ghostPosition.y, dragVisualState.ghostPosition.z]}>
+            <sphereGeometry args={[3.8, 24, 24]} />
+            <meshBasicMaterial color="#9ca3af" opacity={0.5} transparent />
+          </mesh>
+        </>
+      )}
+      {dragVisualState && dragVisualState.type === 'merge' && mergeGhostPosition && mergeTargetPosition && dragVisualState.targetNodeId && (
+        <>
+          <Line points={[
+            [mergeGhostPosition.x, mergeGhostPosition.y, mergeGhostPosition.z],
+            [mergeTargetPosition.x, mergeTargetPosition.y, mergeTargetPosition.z]
+          ]} color="#9ca3af" lineWidth={2} dashed dashSize={1} gapSize={1} />
+          <mesh position={[mergeGhostPosition.x, mergeGhostPosition.y, mergeGhostPosition.z]}>
+            <sphereGeometry args={[3.8, 24, 24]} />
+            <meshBasicMaterial color="#9ca3af" opacity={0.5} transparent />
+          </mesh>
+        </>
+      )}
+
+      {dimensions.filter(d => d !== null).length === 0 && (<Billboard position={[0, 0, 0]}><Text fontSize={6} color="#ef4444" bg="#fee2e2">Select Dimensions</Text></Billboard>)}
+
+      {validNodes.map(node => {
+        if (node.isGhost) return null;
+
+        // Check if all required dimension scores are available
+        // In 1D/2D mode, we only care about active dimensions
+        const hasAllScores = dimensions.every((dimObj, idx) => {
+          if (!dimObj) return true; // Inactive dimension
+          // For 1D, we only care about the single active dimension
+          if (activeCount === 1 && idx !== activeDimensionIndices[0]) return true;
+          // For 2D, we only care about the two active dimensions
+          if (activeCount === 2 && !activeDimensionIndices.includes(idx)) return true;
+
+          const key = `${dimObj.dimensionA}-${dimObj.dimensionB}`;
+          return node.scores && node.scores[key] !== undefined;
+        });
+
+        // Don't render node if scoring is incomplete
+        if (!hasAllScores) return null;
+
+        const getScore = (dimObj) => {
+          if (!dimObj) return 0; // Changed from 50 to 0 (center in -50 to 50 range)
+          const key = `${dimObj.dimensionA}-${dimObj.dimensionB}`;
+          if (node.scores && node.scores[key] !== undefined) return node.scores[key];
+          return 0; // Changed from 50 to 0
+        };
+
+        let x, y, z;
+        if (activeCount === 1) {
+          // 1D View: Remap the single active dimension to X axis
+          // Find the active dimension
+          const activeIdx = activeDimensionIndices ? activeDimensionIndices[0] : 0;
+          const activeDim = dimensions[activeIdx];
+          x = getScore(activeDim);
+          y = 0; // Center (0 is the center in -50 to 50 range)
+          z = 0; // Center
+        } else {
+          // 2D/3D View: Standard mapping
+          x = getScore(dimensions[0]);
+          y = getScore(dimensions[1]);
+          z = getScore(dimensions[2]);
+        }
+
+        const overridePos = dragVisual3D && dragVisual3D.sourceId === node.id && dragVisual3D.current;
+        const pos = overridePos
+          ? [overridePos.x, overridePos.y, overridePos.z]
+          : [scoreToPos(x), scoreToPos(y), scoreToPos(z)];
+
+        const color = getNodeColor(node, colorMap);
+
+        return (
+          <Node3D
+            key={node.id} node={node} position={pos} color={color}
+            isSelected={selectedNode?.id === node.id} isHovered={hoveredNode?.id === node.id}
+            onPointerOver={onNodeHover} onPointerOut={(n) => onNodeHover(null)}
+            onClick={onNodeClick} onDragEnd={onNodeDragEnd}
+            axisMapping={axisMapping} isSnapped={isSnapped} allNodes={validNodes} dims={dimensions} setIsDraggingNode={setIsDraggingNode}
+            setDragVisual3D={setDragVisual3D} setDragVisualState={setDragVisualState} projectToFace={projectToPlane} dragVisual3D={dragVisual3D} dragVisualState={dragVisualState}
+            activeCount={activeCount} // Pass activeCount to Node3D
+            activeDimensionIndices={activeDimensionIndices} // Pass activeDimensionIndices to Node3D
+            dragHoverTarget={dragHoverTarget}
+          />
+        );
+      })}
+    </>
+  );
+};
+
+const Evaluation3D = (props) => {
+  const [targetFaceIndex, setTargetFaceIndex] = useState(0);
+  const colorMap = useMemo(() => ({
+    root: '#4C84FF',
+    simple: '#45B649',
+    complex: '#FF6B6B',
+  }), []);
+  const activeDims = useMemo(() => {
+    if (!props.selectedDimensionPairs) return [null, null, null];
+    const indices = props.activeDimensionIndices || [0, 1, 2];
+    return [0, 1, 2].map(i => {
+      if (indices.includes(i)) return props.selectedDimensionPairs[i];
+      return null;
+    });
+  }, [props.selectedDimensionPairs, props.activeDimensionIndices]);
+
+  // Determine if we should show the operation status
+  const showOperationStatus = props.operationStatus &&
+    (props.operationStatus.toLowerCase().includes('merging') ||
+      props.operationStatus.toLowerCase().includes('evaluating') ||
+      props.operationStatus.toLowerCase().includes('modifying') ||
+      props.isGenerating);
+
+  return (
+    <div
+      data-uatrack-suppress-click="true"
+      data-uatrack-suppress-hover="true"
+      style={{ width: '100%', height: '100%', position: 'relative', background: '#fff', borderRadius: '8px', border: '1px solid #e5e7eb', overflow: 'hidden' }}
+    >
+      {/* Operation Status Banner */}
+      {showOperationStatus && (
+        <div style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          zIndex: 10,
+          background: 'rgba(255, 255, 255, 0.95)',
+          padding: '12px',
+          textAlign: 'center',
+          fontSize: '1.2rem',
+          fontWeight: '600',
+          color: '#374151',
+          borderBottom: '1px solid #e5e7eb',
+          pointerEvents: 'none'
+        }}>
+          {props.operationStatus || 'Processing...'}
+        </div>
+      )}
+      <Canvas shadows>
+        <OrthographicCamera makeDefault zoom={4} position={[0, 0, 200]} near={0.1} far={1000} />
+        <SceneContent
+          nodes={props.nodes}
+          dimensions={activeDims}
+          activeDimensionIndices={props.activeDimensionIndices}
+          onNodeDragEnd={props.onNodeDragEnd}
+          selectedNode={props.selectedNode}
+          onNodeClick={props.onNodeClick}
+          hoveredNode={props.hoveredNode}
+          onNodeHover={props.onNodeHover}
+          targetFaceIndex={targetFaceIndex}
+          setTargetFaceIndex={setTargetFaceIndex}
+          pendingChange={props.pendingChange}
+          pendingMerge={props.pendingMerge}
+          colorMap={colorMap}
+          dragVisualState={props.dragVisualState}
+          setDragVisualState={props.setDragVisualState}
+          mergeAnimationState={props.mergeAnimationState}
+          onDropExternal={props.onDropExternal}
+          dragHoverTarget={props.dragHoverTarget}
+          onDragHover={props.onDragHover}
+        />
+      </Canvas>
+      <div style={{ position: 'absolute', bottom: 10, left: 10, pointerEvents: 'none', background: 'rgba(255,255,255,0.8)', padding: '4px 8px', borderRadius: '4px', fontSize: '12px', color: '#666' }}>
+        Drag Cube to Rotate • Drag Nodes to Edit
+      </div>
+    </div>
+  );
+};
+
+export default Evaluation3D;
diff --git a/frontend/src/components/FactorBlock.jsx b/frontend/src/components/FactorBlock.jsx
deleted file mode 100644
index 23427f73..00000000
--- a/frontend/src/components/FactorBlock.jsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import React from 'react';
-
-/**
- * 单个因子（Novelty / Feasibility / Impact）分数与理由
- */
-const FactorBlock = ({
-  label,
-  color,
-  score,
-  reason,
-  beforeVal,
-  afterVal,
-  showAfter,
-}) => {
-  const hasBefore = beforeVal !== null && beforeVal !== undefined;
-  const round = (v) => Math.round(parseFloat(v) || 0);
-
-  /* 箭头 */
-  const Arrow = () => {
-    if (!hasBefore) return null;
-    const b = round(beforeVal);
-    const a = round(afterVal);
-    if (a > b) return <span style={{ margin: '0 6px' }}>▲</span>;
-    if (a < b) return <span style={{ margin: '0 6px' }}>▼</span>;
-    return <span style={{ margin: '0 6px' }}>─</span>;
-  };
-
-  return (
-    <div
-      style={{
-        backgroundColor: '#F9FAFB',
-        border: '1px solid #E5E7EB',
-        borderRadius: 8,
-        padding: 16,
-        marginBottom: 16,
-      }}
-    >
-      <div style={{ display: 'flex', alignItems: 'center', marginBottom: 8 }}>
-        <span
-          style={{
-            width: 12,
-            height: 12,
-            borderRadius: '50%',
-            backgroundColor: color,
-            marginRight: 8,
-          }}
-        />
-        <span
-          style={{ fontSize: '1rem', fontWeight: 600, paddingRight: '1em', color }}
-        >
-          {label}
-        </span>
-        {hasBefore ? (
-          <>
-            {round(beforeVal)}
-            <Arrow />
-            {round(afterVal)}
-          </>
-        ) : (
-          <span>Score: {round(score)}</span>
-        )}
-      </div>
-
-      <div
-        style={{
-          fontSize: '0.875rem',
-          color: '#111827',
-          lineHeight: 1.4,
-          whiteSpace: 'pre-wrap',
-        }}
-      >
-        {reason || '(No reason provided)'}
-      </div>
-    </div>
-  );
-};
-
-export default FactorBlock;
diff --git a/frontend/src/components/IdeaCard.css b/frontend/src/components/IdeaCard.css
new file mode 100644
index 00000000..5c2f6f34
--- /dev/null
+++ b/frontend/src/components/IdeaCard.css
@@ -0,0 +1,17 @@
+.problem-highlight {
+  background-color: #fef08a;
+  color: #92400e;
+  border-radius: 4px;
+  padding: 0 4px;
+  cursor: pointer;
+}
+
+.problem-highlight:hover {
+  box-shadow: 0 0 0 2px #fef08a inset;
+}
+
+.problem-content ::selection,
+.dimension-reasoning ::selection {
+  background: #fef08a;
+  color: #92400e;
+}
diff --git a/frontend/src/components/IdeaCard.jsx b/frontend/src/components/IdeaCard.jsx
index bc9bf24b..e67474e6 100644
--- a/frontend/src/components/IdeaCard.jsx
+++ b/frontend/src/components/IdeaCard.jsx
@@ -1,372 +1,1038 @@
-import React, { useState, useRef, useEffect } from 'react';
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-
-// Helper function to parse the specific markdown table format
-const parseMarkdownTable = (markdown) => {
-  if (!markdown || typeof markdown !== 'string') return [];
-  const lines = markdown.trim().split('\n');
-  if (lines.length < 3) return []; // Header, separator, at least one data row
-
-  // Assumes fixed headers: | Component | Specification | Justification / Rationale | Status |
-  const dataLines = lines.slice(2); // Skip header and separator
-
-  return dataLines.map(line => {
-    const cells = line.split('|').map(cell => cell.trim());
-    // cells[0] is empty because of the leading '|'
-    if (cells.length < 5) return null; // Handle malformed rows
-    return {
-      Component: cells[1] || '',
-      Specification: cells[2] || '',
-      'Justification / Rationale': cells[3] || '',
-      Status: cells[4] || ''
-    };
-  }).filter(Boolean); // Filter out any null rows
-};
-
-// Helper function to serialize data back to a markdown table string
-const serializeToMarkdown = (data) => {
-  const header = '| Component | Specification | Justification / Rationale | Status |';
-  const separator = '|---|---|---|---|';
-  const rows = data.map(row =>
-    `| ${row.Component} | ${row.Specification.replace(/\n/g, '<br />')} | ${row['Justification / Rationale'].replace(/\n/g, '<br />')} | ${row.Status} |`
-  );
-  return [header, separator, ...rows].join('\n');
-};
-
-/**
- * A new component for interactively editing the experiment table.
- */
-const EditableTable = ({ content, onSave, onCancel }) => {
-  const [tableData, setTableData] = useState(() => parseMarkdownTable(content));
-  const originalData = useRef(parseMarkdownTable(content)); // To store for reset
-
-  const handleCellChange = (index, field, value) => {
-    const newData = [...tableData];
-    newData[index][field] = value;
-    setTableData(newData);
-  };
-
-  const handleSave = () => {
-    const newMarkdown = serializeToMarkdown(tableData);
-    onSave(newMarkdown);
-  };
+import React, { useState } from 'react';
+import { extractContentSections } from '../utils/contentParser';
+import './IdeaCard.css';
 
-  const handleReset = () => {
-    setTableData(originalData.current);
-  };
+const escapeRegExp = (str = '') => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 
+const ExperimentTable = ({ src }) => {
+  if (!src || typeof src !== 'string') return null;
+  const lines = src.trim().split('\n').filter(l => l.trim());
+  if (lines.length < 2) return <pre style={{ whiteSpace: 'pre-wrap', fontSize: '0.85rem' }}>{src}</pre>;
+  const parseRow = (line) =>
+    line.split('|').map(c => c.trim()).filter((_, i, arr) => i !== 0 && i !== arr.length - 1);
+  const headers = parseRow(lines[0]);
+  const dataRows = lines.slice(2).map(parseRow);
   return (
-    <div>
-      <div style={{ maxHeight: '55vh', overflowY: 'auto', border: '1px solid #e5e7eb', borderRadius: '4px' }}>
-        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
-          <thead style={{ position: 'sticky', top: 0, zIndex: 1, backgroundColor: 'white' }}>
-            <tr>
-              {['Component', 'Specification', 'Justification / Rationale', 'Status'].map(header => (
-                <th key={header} style={{ border: '1px solid #ddd', padding: '12px', textAlign: 'left', backgroundColor: '#f6f8fa', fontWeight: 600 }}>{header}</th>
+    <div style={{ overflowX: 'auto' }}>
+      <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.85rem', lineHeight: 1.4 }}>
+        <thead>
+          <tr>
+            {headers.map((h, i) => (
+              <th key={i} style={{ padding: '6px 10px', backgroundColor: '#F3F4F6', border: '1px solid #E5E7EB', textAlign: 'left', fontWeight: 600, color: '#374151', whiteSpace: 'nowrap' }}>{h}</th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {dataRows.map((row, ri) => (
+            <tr key={ri} style={{ backgroundColor: ri % 2 === 0 ? '#fff' : '#F9FAFB' }}>
+              {row.map((cell, ci) => (
+                <td key={ci} style={{ padding: '6px 10px', border: '1px solid #E5E7EB', color: '#4B5563', verticalAlign: 'top' }}>{cell}</td>
               ))}
             </tr>
-          </thead>
-          <tbody>
-            {tableData.map((row, rowIndex) => (
-              <tr key={rowIndex}>
-                <td style={{ border: '1px solid #ddd', padding: '8px', verticalAlign: 'top', fontWeight: 500 }}>{row.Component}</td>
-                <td style={{ border: '1px solid #ddd', padding: '0' }}>
-                  <textarea
-                    value={row.Specification}
-                    onChange={(e) => handleCellChange(rowIndex, 'Specification', e.target.value)}
-                    style={{ width: '100%', height: '100%', minHeight: '80px', border: 'none', padding: '8px', resize: 'vertical', boxSizing: 'border-box' }}
-                  />
-                </td>
-                <td style={{ border: '1px solid #ddd', padding: '0' }}>
-                  <textarea
-                    value={row['Justification / Rationale']}
-                    onChange={(e) => handleCellChange(rowIndex, 'Justification / Rationale', e.target.value)}
-                    style={{ width: '100%', height: '100%', minHeight: '80px', border: 'none', padding: '8px', resize: 'vertical', boxSizing: 'border-box' }}
-                  />
-                </td>
-                <td style={{ border: '1px solid #ddd', padding: '8px', verticalAlign: 'top' }}>{row.Status}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-      <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '16px', gap: '10px' }}>
-         <button onClick={onCancel} style={{ padding: '8px 16px', border: '1px solid #ccc', borderRadius: '4px', cursor: 'pointer', backgroundColor: '#fff' }}>Cancel</button>
-         <button onClick={handleReset} style={{ padding: '8px 16px', border: '1px solid #e5e7eb', borderRadius: '4px', cursor: 'pointer', backgroundColor: '#f9fafb', color: '#dc2626' }}>Reset</button>
-         <button onClick={handleSave} style={{ padding: '8px 16px', border: 'none', borderRadius: '4px', cursor: 'pointer', backgroundColor: '#4C84FF', color: 'white' }}>Save</button>
-      </div>
+          ))}
+        </tbody>
+      </table>
     </div>
   );
 };
 
+const renderWithHighlights = (text, highlights, onClickHighlight) => {
+  if (!text || !highlights || highlights.length === 0) return text;
+  const sanitized = highlights
+    .map(h => (h || '').trim())
+    .filter(Boolean);
 
-/**
- * A reusable modal component, now with an optional onEdit handler.
- */
-const Modal = ({ isOpen, onClose, children, title, onEdit }) => {
-  if (!isOpen) {
-    return null;
-  }
+  if (sanitized.length === 0) return text;
 
-  return (
-    <div
-      onClick={onClose}
-      style={{
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        backgroundColor: 'rgba(0, 0, 0, 0.6)',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        zIndex: 1000,
-      }}
-    >
-      <div
-        onClick={(e) => e.stopPropagation()}
-        style={{
-          backgroundColor: '#fff',
-          borderRadius: '8px',
-          padding: '24px',
-          boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
-          border: '1px solid #e5e7eb',
-          width: '80%',
-          maxWidth: '900px',
-          maxHeight: '80vh',
-          display: 'flex',
-          flexDirection: 'column',
+  const regex = new RegExp(`(${sanitized.map(h => escapeRegExp(h)).join('|')})`, 'gi');
+  return text.split(regex).map((part, idx) => {
+    if (!part) return null;
+    const isHit = sanitized.some(h => h.toLowerCase() === part.toLowerCase());
+    if (!isHit) return part;
+    const payload = part.trim();
+    return (
+      <span
+        key={`hl-${idx}-${payload}`}
+        className="problem-highlight"
+        onClick={(e) => {
+          e.stopPropagation();
+          if (payload && onClickHighlight) {
+            onClickHighlight(payload);
+          }
         }}
       >
-        <div style={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          borderBottom: '1px solid #e5e7eb',
-          paddingBottom: '12px',
-          marginBottom: '16px',
-        }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-            <h3 style={{ margin: 0, fontSize: '1.25rem', fontWeight: 600, color: '#111827' }}>
-              {title || 'Details'}
-            </h3>
-            {/* Edit button only appears if onEdit function is provided */}
-            {onEdit && (
-              <button
-                onClick={onEdit}
-                style={{
-                  padding: '4px 10px',
-                  backgroundColor: '#f3f4f6',
-                  border: '1px solid #d1d5db',
-                  borderRadius: '4px',
-                  cursor: 'pointer',
-                  fontSize: '0.8rem',
-                  fontWeight: 500,
-                }}
-              >
-                ✏️ Edit
-              </button>
-            )}
-          </div>
-          <button
-            onClick={onClose}
-            style={{
-              background: 'none',
-              border: 'none',
-              fontSize: '1.5rem',
-              cursor: 'pointer',
-              color: '#6b7280',
-            }}
-          >
-            ×
-          </button>
-        </div>
-        <div style={{ overflowY: 'auto', flexGrow: 1 }}>
-          {children}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-
-/**
- * A styled component to render Markdown content.
- */
-const MarkdownRenderer = ({ content }) => {
-  const tableStyles = `
-    .markdown-table-container table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.9rem; }
-    .markdown-table-container th, .markdown-table-container td { border: 1px solid #dfe2e5; padding: 8px 12px; text-align: left; }
-    .markdown-table-container th { background-color: #f6f8fa; font-weight: 600; }
-    .markdown-table-container tr:nth-child(even) { background-color: #f9fafb; }
-  `;
-  const safeContent = typeof content === 'string' ? content : '';
-  return (
-    <div className="markdown-table-container">
-      <style>{tableStyles}</style>
-      <ReactMarkdown remarkPlugins={[remarkGfm]}>
-        {safeContent || "No content available."}
-      </ReactMarkdown>
-    </div>
-  );
+        {part}
+      </span>
+    );
+  });
 };
 
-
 /**
- * The main card component with editable experiment plans.
+ * 显示单条假设，可在 Before / After 之间切换
+ * 现在支持动态维度系统：
+ * - 如果有 selectedDimensionPairs，则显示动态维度分数
  */
 const IdeaCard = ({
   node,
   showAfter,
   setShowAfter,
-  onEditCriteria,
-  activeSection,
-  setActiveSection,
-  onUpdateTable, // Receive the update handler
+  onModifyScore, // Function to handle score modifications
+  showModifyButton = false, // Whether to show modify buttons (for tree view)
+  pendingChanges = null, // Pending changes from parent component
+  currentView = 'evaluation', // Current view context (exploration/evaluation)
+  selectedDimensionPairs = null, // 新增：选中的维度对，用于显示动态分数
+  activeDimensions = null, // 当前显示的维度面，用于高亮
+  onShowFragmentMenu = null, // 新增:显示 Fragment 菜单的回调
+  activeDimensionIndices = [0, 1, 2], // Active dimension indices
+  onToggleDimensionIndex = null, // Callback to toggle dimension index
+  onCreateFragmentFromHighlight = null, // 新增：点击重点直接生成 fragment
+  onSwapDimension = null, // 交换维度方向
+  onEditDimension = null, // 编辑维度名称 (pairIndex, anchorRect) => void
 }) => {
-  const [showComparisonModal, setShowComparisonModal] = useState(false);
-  const [showExperimentModal, setShowExperimentModal] = useState(false);
-  const [isEditingExperiment, setIsEditingExperiment] = useState(false);
+  const [expandedSections, setExpandedSections] = useState({ experiment: false });
 
-  const buttonRefs = useRef({});
+  const toggleSection = (sectionName) => {
+    setExpandedSections(prev => ({
+      ...prev,
+      [sectionName]: !prev[sectionName]
+    }));
+  };
 
+  // Handle root node differently
   if (node.type === 'root') {
     return (
-      <div style={{ border: '1px solid #e5e7eb', borderRadius: 8, padding: '16px', marginBottom: 16, backgroundColor: 'transparent' }}>
-        <h2 style={{ fontSize: '1.25rem', fontWeight: 700, marginBottom: '1rem' }}>Research Intent</h2>
-        <div style={{ fontSize: '0.95rem', lineHeight: 1.6, padding: '10px', backgroundColor: '#f9fafb', borderRadius: '4px', borderLeft: `3px solid #4C84FF` }}>
+      <div
+        style={{
+          border: '1px solid #e5e7eb',
+          borderRadius: 8,
+          padding: '16px',
+          marginBottom: 16,
+          backgroundColor: 'transparent',
+        }}
+      >
+        <h2 style={{ fontSize: '1.25rem', fontWeight: 700, marginBottom: '1rem' }}>
+          {'Research Intent'}
+        </h2>
+
+        <div style={{
+          fontSize: '0.95rem',
+          lineHeight: 1.6,
+          padding: '10px',
+          backgroundColor: '#f9fafb',
+          borderRadius: '4px',
+          borderLeft: `3px solid #4C84FF`,
+        }}>
+          {node.content}
+        </div>
+      </div>
+    );
+  }
+
+  // Handle fragment node
+  if (node.type === 'fragment') {
+    return (
+      <div
+        style={{
+          border: '2px solid #f59e0b',
+          borderRadius: 8,
+          padding: '16px',
+          marginBottom: 16,
+          backgroundColor: '#fffbeb',
+        }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', marginBottom: '12px' }}>
+          <div style={{
+            width: '32px',
+            height: '32px',
+            borderRadius: '50%',
+            backgroundColor: '#fef08a',
+            border: '2px solid #f59e0b',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontSize: '0.875rem',
+            fontWeight: '600',
+            color: '#92400e',
+            marginRight: '12px'
+          }}>
+            {node.id.split('-S')[1]}
+          </div>
+          <div>
+            <h2 style={{ fontSize: '1.125rem', fontWeight: 700, color: '#92400e', margin: 0 }}>
+              Fragment
+            </h2>
+            <p style={{ fontSize: '0.75rem', color: '#78716c', margin: '2px 0 0 0' }}>
+              from {node.parentId}
+            </p>
+          </div>
+        </div>
+
+        <div style={{
+          fontSize: '0.95rem',
+          lineHeight: 1.6,
+          padding: '12px',
+          backgroundColor: 'white',
+          borderRadius: '6px',
+          border: '1px solid #fbbf24',
+          whiteSpace: 'pre-wrap'
+        }}>
           {node.content}
         </div>
+
+        <div style={{
+          marginTop: '12px',
+          padding: '8px 12px',
+          backgroundColor: '#fef3c7',
+          borderRadius: '6px',
+          fontSize: '0.75rem',
+          color: '#92400e',
+          fontStyle: 'italic'
+        }}>
+          💡 This fragment has no evaluation scores yet. Merge it with other ideas to evaluate.
+        </div>
       </div>
     );
   }
 
+  // Regular idea node handling
   const hasPrevious = !!node.previousState;
-  const displayedNode = hasPrevious && !showAfter ? node.previousState : node;
-
-  const { originalData } = displayedNode;
-  const description = originalData?.Description || '';
-  const importance = originalData?.Importance || '';
-  const difficulty = originalData?.Difficulty || '';
-  const noveltyComparison = originalData?.NoveltyComparison || '';
-  const comparisonTable = originalData?.ComparisonTable || '';
-  const experimentTable = originalData?.ExperimentTable || '';
-
-  let activeContent = '';
-  if (activeSection === 'Impact') activeContent = importance;
-  else if (activeSection === 'Feasibility') activeContent = difficulty;
-  else if (activeSection === 'Novelty') activeContent = noveltyComparison;
-
-  const editIcon = (
-    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M11 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V20C2 20.5304 2.21071 21.0391 2.58579 21.4142C2.96086 21.7893 3.46957 22 4 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V13" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-      <path d="M18.5 2.50001C18.8978 2.10219 19.4374 1.87869 20 1.87869C20.5626 1.87869 21.1022 2.10219 21.5 2.50001C21.8978 2.89784 22.1213 3.4374 22.1213 4.00001C22.1213 4.56262 21.8978 5.10219 21.5 5.50001L12 15L8 16L9 12L18.5 2.50001Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-    </svg>
-  );
+  const hasNext = !hasPrevious && !!node.modifiedState;
+  const alternateNode = hasPrevious
+    ? node.previousState
+    : (hasNext ? node.modifiedState : null);
+  const isShowingAlternate = !!alternateNode && !showAfter;
+  const displayNode = isShowingAlternate ? alternateNode : node;
+  const content = displayNode?.content || '';
+
+  // TODO: Edit icon for future score editing UI
+  // const editIcon = (<svg>...</svg>);
+
+  // 解析内容中的各个章节
+  const sections = extractContentSections(content);
+
+  // 找到问题部分（作为主要内容显示）
+  const problemSection = sections.find(section => section.title === 'Problem');
+  const problemHighlights = node.problemHighlights || node.originalData?.problem_highlights || [];
+
+  // 处理文本选择事件
+  const handleMouseUp = (e) => {
+    if (!onShowFragmentMenu) {
+      console.log('[Fragment Debug] onShowFragmentMenu not provided');
+      return;
+    }
+
+    // 保存 currentTarget 引用（React 合成事件在异步回调中会被清空）
+    const cardElement = e.currentTarget;
+
+    // 延迟获取 selection，确保选择完成
+    setTimeout(() => {
+      const selection = window.getSelection();
+      const selectedText = selection.toString().trim();
+
+      console.log('[Fragment Debug] Text selected:', selectedText);
 
-  const getScore = (sectionName) => {
-    const scoreMap = { 'Impact': 'impactScore', 'Feasibility': 'feasibilityScore', 'Novelty': 'noveltyScore' };
-    const scoreField = scoreMap[sectionName];
-    if (!scoreField) return null;
-    return hasPrevious && !showAfter ? node.previousState[scoreField] : node[scoreField];
+      if (selectedText && selectedText.length > 0 && selection.rangeCount > 0) {
+        // 检查选中的文本是否在当前 IdeaCard 内
+        const range = selection.getRangeAt(0);
+        if (cardElement && range.commonAncestorContainer &&
+          cardElement.contains(range.commonAncestorContainer)) {
+
+          // 检查选中的文本是否在Problem部分内
+          let currentNode = range.commonAncestorContainer;
+          let inProblemSection = false;
+
+          // 向上遍历DOM树,查找data-section="problem"的元素
+          console.log('[Fragment Debug] Starting node:', currentNode);
+          let debugPath = [];
+          while (currentNode && currentNode !== cardElement) {
+            if (currentNode.nodeType === 1) {
+              const sectionAttr = currentNode.getAttribute ? currentNode.getAttribute('data-section') : null;
+              debugPath.push(`${currentNode.nodeName}[data-section="${sectionAttr}"]`);
+              if (sectionAttr === 'problem') {
+                inProblemSection = true;
+                break;
+              }
+            }
+            currentNode = currentNode.parentNode;
+          }
+
+          console.log('[Fragment Debug] DOM path:', debugPath.join(' > '));
+          console.log('[Fragment Debug] In Problem section:', inProblemSection);
+
+          // 只有在Problem部分选中文字才显示Fragment菜单
+          if (inProblemSection) {
+            // 获取选择的屏幕位置
+            const rect = range.getBoundingClientRect();
+            const x = rect.left + rect.width / 2;
+            const y = rect.bottom + 5; // 菜单显示在选中文本下方
+
+            console.log('[Fragment Debug] Showing fragment menu at', x, y);
+            onShowFragmentMenu(x, y, selectedText, node.id);
+          }
+        }
+      }
+    }, 10);
   };
 
-  const sectionColors = {
-    "Impact": "#4040a1",
-    "Feasibility": "#50394c",
-    "Novelty": "#618685",
+  // 获取维度分数(如果使用新系统)
+  const getDimensionScores = (targetNode) => {
+    if (!selectedDimensionPairs || selectedDimensionPairs.length < 2) {
+      return null; // 不显示动态维度分数
+    }
+
+    if (!targetNode || !targetNode.scores) {
+      return null; // 节点还没有动态维度分数
+    }
+
+    return selectedDimensionPairs.map((pair, index) => {
+      const primaryKey = `${pair.dimensionA}-${pair.dimensionB}`;
+      const reverseKey = `${pair.dimensionB}-${pair.dimensionA}`;
+
+      const extractScoreValue = (entry) => {
+        if (entry === null || entry === undefined) return null;
+        if (typeof entry === 'number') return entry;
+        if (typeof entry === 'object' && entry.value !== undefined) return entry.value;
+        return null;
+      };
+
+      const orientScoreValue = (value, flipped) => {
+        if (!flipped || typeof value !== 'number') return value;
+        if (value >= -50 && value <= 50) return -value;
+        if (value >= 0 && value <= 100) return 100 - value;
+        return -value;
+      };
+
+      const resolveScore = () => {
+        const getScoreEntry = (k) => {
+          if (!k) return undefined;
+          if (targetNode.scores && targetNode.scores[k] !== undefined) return targetNode.scores[k];
+          if (targetNode.originalData && targetNode.originalData.scores && targetNode.originalData.scores[k] !== undefined) {
+            return targetNode.originalData.scores[k];
+          }
+          return undefined;
+        };
+
+        const primaryEntry = getScoreEntry(primaryKey);
+        const primaryValue = extractScoreValue(primaryEntry);
+        if (primaryValue !== null) {
+          return { value: primaryValue, reasonKey: primaryKey };
+        }
+
+        const reverseEntry = getScoreEntry(reverseKey);
+        const reverseValue = extractScoreValue(reverseEntry);
+        if (reverseValue !== null) {
+          return { value: orientScoreValue(reverseValue, true), reasonKey: reverseKey };
+        }
+
+        return { value: null, reasonKey: primaryKey };
+      };
+
+      const { value: rawScore, reasonKey } = resolveScore();
+
+       // Helper: extract a reason for this dimension pair from multiple possible locations
+       const extractReasonForPair = () => {
+         try {
+           // 0) PRIORITY: Check for Dimension1Reason / Dimension2Reason directly on node or originalData
+           const dimensionReasonKey = `Dimension${index + 1}Reason`;
+           if (targetNode[dimensionReasonKey]) return targetNode[dimensionReasonKey];
+           if (targetNode.originalData && targetNode.originalData[dimensionReasonKey]) {
+             return targetNode.originalData[dimensionReasonKey];
+           }          // 1) originalData.scores may contain structured info
+           if (targetNode.originalData && targetNode.originalData.scores && targetNode.originalData.scores[reasonKey]) {
+             const s = targetNode.originalData.scores[reasonKey];
+             if (s && typeof s === 'object') {
+               if (s.reason) return s.reason;
+               if (s.reasons && Array.isArray(s.reasons)) return s.reasons.join('\n');
+             }
+           }
+
+           // 2) node.scores entry might be an object with reason
+           if (targetNode.scores && targetNode.scores[reasonKey] && typeof targetNode.scores[reasonKey] === 'object') {
+             const s = targetNode.scores[reasonKey];
+             if (s.reason) return s.reason;
+             if (s.reasons && Array.isArray(s.reasons)) return s.reasons.join('\n');
+             if (s.value !== undefined) return null; // structured but no reason
+           }
+
+           if (targetNode.originalData) {
+             const keys = Object.keys(targetNode.originalData);
+             for (const k of keys) {
+               if (k.toLowerCase().includes('reason')) {
+                 const lower = k.toLowerCase();
+                 const pairKey = reasonKey.toLowerCase();
+                 // if the reason key references either dimension name or the full pair, prefer it
+                 if (lower.includes(pairKey) || lower.includes(pair.dimensionA?.toLowerCase()) || lower.includes(pair.dimensionB?.toLowerCase())) {
+                   const v = targetNode.originalData[k];
+                   if (v) return v;
+                 }
+               }
+             }
+             // fallback: any Reason field
+             for (const k of keys) {
+               if (k.toLowerCase().includes('reason')) {
+                 const v = targetNode.originalData[k];
+                 if (v) return v;
+               }
+             }
+           }
+         } catch (err) {
+           // ignore and return null
+           console.error('Error extracting reason:', err);
+         }
+         return null;
+       };
+
+      const reason = extractReasonForPair();
+
+      return {
+        label: `${pair.dimensionA} ←→ ${pair.dimensionB}`,
+        score: rawScore !== undefined ? rawScore : null,
+        reason,
+        pair
+      };
+    });
   };
 
-  const tabs = ['Impact', 'Feasibility', 'Novelty'];
+  // 获取动态维度分数
+  const dimensionScores = getDimensionScores(displayNode);
 
   return (
-    <>
-      <div style={{ border: '1px solid #e5e7eb', borderRadius: 8, padding: 16, marginBottom: 16, position: 'relative' }}>
-        {hasPrevious && (
-          <button onClick={() => setShowAfter((prev) => !prev)} style={{ position: 'absolute', top: 12, right: 16, padding: '4px 8px', borderRadius: 9999, border: 'none', cursor: 'pointer', backgroundColor: '#E5E7EB', fontSize: '0.75rem', fontWeight: 500 }}>
-            {showAfter ? 'Check Original Idea' : 'Check Modified Idea'}
-          </button>
-        )}
+    <div
+      onMouseUp={handleMouseUp}
+      style={{
+        border: '1px solid #e5e7eb',
+        borderRadius: 8,
+        padding: 16,
+        marginBottom: 16,
+        position: 'relative',
+        userSelect: 'text', // 允许文本选择
+      }}
+    >
+      {/* Toggle 按钮 */}
+      {(hasPrevious || hasNext) && (
+        <button
+          onClick={() => {
+            setShowAfter((prev) => !prev);
+          }}
+          style={{
+            position: 'absolute',
+            top: 12,
+            right: 16,
+            padding: '4px 8px',
+            borderRadius: 9999,
+            border: 'none',
+            cursor: 'pointer',
+            backgroundColor: '#E5E7EB',
+            fontSize: '0.75rem',
+            fontWeight: 500,
+          }}
+        >
+          {hasPrevious
+            ? (showAfter ? 'Check Original Idea' : 'Back to Modified Idea')
+            : (hasNext
+              ? (showAfter ? 'Check Modified Idea' : 'Back to Original Idea')
+              : '')}
+        </button>
+      )}
 
-        <h2 style={{ fontSize: '1.25rem', fontWeight: 700, marginBottom: '0.5rem' }}>
-          {displayedNode.title || 'Untitled'}
+      {/* 标题 + ID Badge */}
+      <div style={{ display: 'flex', alignItems: 'flex-start', gap: '8px', marginBottom: '0.5rem' }}>
+        <h2 style={{ fontSize: '1.25rem', fontWeight: 700, margin: 0, flex: 1 }}>
+          {displayNode?.title || node.title || 'Untitled'}
         </h2>
+        {node.id && node.id !== 'root' && (
+          <span style={{
+            fontSize: '0.7rem',
+            fontWeight: 600,
+            color: '#6B7280',
+            backgroundColor: '#F3F4F6',
+            border: '1px solid #E5E7EB',
+            borderRadius: '4px',
+            padding: '2px 6px',
+            whiteSpace: 'nowrap',
+            flexShrink: 0,
+            marginTop: '4px',
+            fontFamily: 'monospace'
+          }}>
+            #{node.id}
+          </span>
+        )}
+      </div>
 
-        <div style={{ fontSize: '0.95rem', lineHeight: 1.5, color: '#374151', padding: '10px 0', borderBottom: '1px solid #e5e7eb' }}>
-          {description}
+      {/* 问题部分 - 直接显示在标题下方，添加下横线 */}
+      {problemSection && problemSection.content ? (
+        <div
+          data-section="problem"
+          className="problem-content"
+          style={{
+            fontSize: '0.95rem',
+            lineHeight: 1.5,
+            color: '#374151',
+            padding: '10px 0',
+            marginBottom: '15px',
+            borderBottom: '2px solid #e5e7eb',
+            paddingBottom: '15px'
+          }}>
+          {renderWithHighlights(problemSection.content, problemHighlights, (text) => {
+            if (onCreateFragmentFromHighlight) {
+              onCreateFragmentFromHighlight(text, node.id);
+            }
+          })}
         </div>
-
-        <div style={{ display: 'flex', gap: '10px', marginTop: '15px', marginBottom: '15px' }}>
-          {comparisonTable && (
-            <button onClick={() => setShowComparisonModal(true)} style={{ flex: 1, padding: '10px', backgroundColor: '#f9fafb', border: '1px solid #e5e7eb', borderRadius: '6px', cursor: 'pointer', textAlign: 'left', fontSize: '0.9rem', fontWeight: 600, color: '#374151' }}>
-              📊 View Comparison Table
-            </button>
-          )}
-          {experimentTable && (
-            <button onClick={() => setShowExperimentModal(true)} style={{ flex: 1, padding: '10px', backgroundColor: '#f9fafb', border: '1px solid #e5e7eb', borderRadius: '6px', cursor: 'pointer', textAlign: 'left', fontSize: '0.9rem', fontWeight: 600, color: '#374151' }}>
-              🧪 View Experiment Plan
-            </button>
-          )}
+      ) : content && content.trim() && !sections.length ? (
+        // Fallback: Show full content if no structured sections
+        <div className="problem-content" style={{
+          fontSize: '0.95rem',
+          lineHeight: 1.5,
+          color: '#374151',
+          padding: '10px',
+          marginBottom: '15px',
+          backgroundColor: '#f9fafb',
+          borderRadius: '4px',
+          borderLeft: '3px solid #4C84FF',
+          whiteSpace: 'pre-wrap',
+          borderBottom: '2px solid #e5e7eb',
+          paddingBottom: '15px'
+        }}>
+          {renderWithHighlights(content, problemHighlights, (text) => {
+            if (onCreateFragmentFromHighlight) {
+              onCreateFragmentFromHighlight(text, node.id);
+            }
+          })}
         </div>
+      ) : null}
+
+      {/* 动态维度分数显示（如果有）- 每个dimension一整行 */}
+      {dimensionScores && dimensionScores.length > 0 && (
+        <div style={{
+          marginBottom: '15px',
+          borderBottom: '1px solid #e5e7eb',
+          paddingBottom: '15px'
+        }}>
+          {dimensionScores.map((dim, idx) => {
+            // Determine signed display (-50..+50)
+            let signed = null;
+            if (dim.score !== null && dim.score !== undefined) {
+              const v = Number(dim.score);
+              if (!Number.isNaN(v)) {
+                if (v >= -50 && v <= 50) {
+                  signed = Math.round(v);
+                } else if (v >= 0 && v <= 100) {
+                  signed = Math.round(v) - 50;
+                } else {
+                  signed = Math.max(-50, Math.min(50, Math.round(v)));
+                }
+              }
+            }
+
+            // Color mapping per axis role
+            const xPosStyle = { background: '#dbeafe', color: '#1e3a8a' };
+            const xNegStyle = { background: '#fef3c7', color: '#92400e' };
+            const yPosStyle = { background: '#dcfce7', color: '#14532d' };
+            const yNegStyle = { background: '#fce7f3', color: '#831843' };
+            let scoreColor = '#374151';
+            let scoreBg = 'transparent';
+
+            const activeX = activeDimensions?.xDimension;
+            const activeY = activeDimensions?.yDimension;
+            const isX = activeX && (`${activeX.dimensionA}-${activeX.dimensionB}`) === `${dim.pair.dimensionA}-${dim.pair.dimensionB}`;
+            const isY = activeY && (`${activeY.dimensionA}-${activeY.dimensionB}`) === `${dim.pair.dimensionA}-${dim.pair.dimensionB}`;
+
+            if (signed !== null) {
+              if (isX) {
+                if (signed >= 0) {
+                  scoreColor = xPosStyle.color;
+                  scoreBg = xPosStyle.background;
+                } else {
+                  scoreColor = xNegStyle.color;
+                  scoreBg = xNegStyle.background;
+                }
+              } else if (isY) {
+                if (signed >= 0) {
+                  scoreColor = yPosStyle.color;
+                  scoreBg = yPosStyle.background;
+                } else {
+                  scoreColor = yNegStyle.color;
+                  scoreBg = yNegStyle.background;
+                }
+              } else {
+                if (signed >= 0) {
+                  scoreColor = xPosStyle.color;
+                  scoreBg = xPosStyle.background;
+                } else {
+                  scoreColor = xNegStyle.color;
+                  scoreBg = xNegStyle.background;
+                }
+              }
+            }
+
+            // Parse dimension label to get left and right parts
+            const labelParts = dim.label.split('←→').map(s => s.trim());
+            const leftDim = labelParts[0] || '';
+            const rightDim = labelParts[1] || '';
+            const isActiveDimension = activeDimensionIndices.includes(idx);
+            const canSwap = isActiveDimension && !!onSwapDimension;
 
-        <div style={{ display: 'flex', borderBottom: '1px solid #e5e7eb', marginBottom: '15px' }}>
-          {tabs.map(tab => {
-            const isActive = activeSection === tab;
-            const score = getScore(tab);
-            const color = sectionColors[tab];
-            const sectionKey = tab.toLowerCase().replace(' ', '_');
-            if (!buttonRefs.current[sectionKey]) buttonRefs.current[sectionKey] = React.createRef();
             return (
-              <div key={tab} onClick={() => setActiveSection(tab)} style={{ padding: '8px 12px', marginRight: '10px', cursor: 'pointer', position: 'relative', fontWeight: isActive ? 600 : 400, color: isActive ? color : '#6b7280', borderBottom: isActive ? `2px solid ${color}` : 'none', display: 'flex', alignItems: 'center' }}>
-                {isActive && <span style={{ width: 8, height: 8, borderRadius: '50%', backgroundColor: color, marginRight: 8, display: 'block' }} />}
-                {tab}
-                <button ref={buttonRefs.current[sectionKey]} onClick={(e) => { e.stopPropagation(); onEditCriteria(buttonRefs.current[sectionKey], sectionKey); }} style={{ marginLeft: '6px', padding: '2px', backgroundColor: 'transparent', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', opacity: 0.6, color: '#6b7280' }} title={`Edit ${tab} criteria`}>
-                  {editIcon}
-                </button>
-                {score !== null && (
-                  <span style={{ marginLeft: '8px', fontSize: '0.85rem', backgroundColor: isActive ? `${color}20` : '#f3f4f6', padding: '2px 5px', borderRadius: '4px', color: isActive ? color : '#6b7280' }}>
-                    {Math.round(score)}
+              <div key={idx} style={{
+                marginBottom: idx < dimensionScores.length - 1 ? '12px' : '0',
+                fontSize: '0.95rem',
+                lineHeight: 1.5,
+                color: '#374151'
+              }}>
+                {/* Dimension label and score on same line */}
+                <div style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '10px',
+                  marginBottom: dim.reason ? '6px' : '0'
+                }}>
+                  {/* Checkbox for toggling dimension */}
+                  <input
+                    type="checkbox"
+                    checked={isActiveDimension}
+                    onChange={(e) => {
+                      e.stopPropagation(); // Prevent card selection if any
+                      if (onToggleDimensionIndex) onToggleDimensionIndex(idx);
+                    }}
+                    style={{ cursor: 'pointer', width: '16px', height: '16px', accentColor: '#2563EB' }}
+                  />
+
+                  {/* Left dimension - highlight if score is negative, clickable to edit */}
+                  <span
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      if (onEditDimension) {
+                        const rect = e.currentTarget.getBoundingClientRect();
+                        onEditDimension(idx, { top: rect.bottom + 5, left: rect.left });
+                      }
+                    }}
+                    style={{
+                      fontWeight: 500,
+                      padding: '2px 6px',
+                      borderRadius: '4px',
+                      backgroundColor: signed !== null && signed < 0 ? scoreBg : 'transparent',
+                      color: signed !== null && signed < 0 ? scoreColor : '#374151',
+                      cursor: onEditDimension ? 'pointer' : 'default',
+                      display: 'inline-flex',
+                      alignItems: 'center',
+                      gap: '4px'
+                    }}
+                    title={onEditDimension ? 'Click to edit dimension' : undefined}
+                  >
+                    {leftDim}
+                    {onEditDimension && (
+                      <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" style={{ opacity: 0.5, marginLeft: '4px' }}>
+                        <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z" />
+                      </svg>
+                    )}
                   </span>
+
+                  {/* Score in the middle - clickable to swap */}
+                  {dim.score !== null ? (
+                    <span
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        if (canSwap) onSwapDimension(idx);
+                      }}
+                      style={{
+                        padding: '2px 10px',
+                        borderRadius: '6px',
+                        fontSize: '0.9rem',
+                        fontWeight: 700,
+                        backgroundColor: scoreBg,
+                        color: scoreColor,
+                        cursor: canSwap ? 'pointer' : 'default',
+                        opacity: canSwap ? 1 : 0.35,
+                        border: canSwap ? '1px solid rgba(55,65,81,0.15)' : '1px solid transparent',
+                        userSelect: 'none',
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        gap: '4px'
+                      }}
+                      title={canSwap ? 'Click to swap dimension direction' : 'Enable this dimension to swap'}
+                    >
+                      {signed !== null ? (signed > 0 ? `+${signed}` : signed) : 'N/A'}
+                      {canSwap && (
+                        <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" style={{ opacity: 0.6, marginLeft: '4px' }}>
+                          <path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z" />
+                          <path fillRule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z" />
+                        </svg>
+                      )}
+                    </span>
+                  ) : (
+                    <span style={{
+                      fontSize: '0.875rem',
+                      color: '#9CA3AF',
+                      fontStyle: 'italic'
+                    }}>
+                      N/A
+                    </span>
+                  )}
+
+                  {/* Right dimension - highlight if score is positive, clickable to edit */}
+                  <span
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      if (onEditDimension) {
+                        const rect = e.currentTarget.getBoundingClientRect();
+                        onEditDimension(idx, { top: rect.bottom + 5, left: rect.left });
+                      }
+                    }}
+                    style={{
+                      fontWeight: 500,
+                      padding: '2px 6px',
+                      borderRadius: '4px',
+                      backgroundColor: signed !== null && signed > 0 ? scoreBg : 'transparent',
+                      color: signed !== null && signed > 0 ? scoreColor : '#374151',
+                      cursor: onEditDimension ? 'pointer' : 'default',
+                      display: 'inline-flex',
+                      alignItems: 'center',
+                      gap: '4px'
+                    }}
+                    title={onEditDimension ? 'Click to edit dimension' : undefined}
+                  >
+                    {rightDim}
+                    {onEditDimension && (
+                      <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" style={{ opacity: 0.5, marginLeft: '4px' }}>
+                        <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z" />
+                      </svg>
+                    )}
+                  </span>
+                </div>
+
+                {/* Reason text below */}
+                {dim.reason && (
+                  <div style={{
+                    fontSize: '0.95rem',
+                    lineHeight: 1.5,
+                    color: '#6B7280',
+                    paddingLeft: '0',
+                    whiteSpace: 'pre-wrap'
+                  }}>
+                    <span className="dimension-reasoning">
+                      {renderWithHighlights(dim.reason, problemHighlights, (text) => {
+                        if (onCreateFragmentFromHighlight) {
+                          onCreateFragmentFromHighlight(text, node.id);
+                        }
+                      })}
+                    </span>
+                  </div>
                 )}
               </div>
             );
           })}
         </div>
+      )}
 
-        <div style={{ fontSize: '0.95rem', lineHeight: 1.6, color: '#374151', padding: '10px', backgroundColor: '#f9fafb', borderRadius: '4px', borderLeft: `3px solid ${sectionColors[activeSection] || '#ccc'}` }}>
-          <MarkdownRenderer content={activeContent} />
-        </div>
-      </div>
+      {/* Collapsible Detail Sections */}
+      {displayNode?.originalData && (
+        <div style={{ marginTop: '15px', borderTop: '1px solid #e5e7eb', paddingTop: '15px' }}>
+          {/* Approach Section */}
+          {displayNode.originalData.Approach && (
+            <div style={{ marginBottom: '10px' }}>
+              <button
+                onClick={() => toggleSection('approach')}
+                style={{
+                  width: '100%',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  padding: '10px 12px',
+                  backgroundColor: '#f9fafb',
+                  border: '1px solid #e5e7eb',
+                  borderRadius: '6px',
+                  cursor: 'pointer',
+                  fontSize: '0.95rem',
+                  fontWeight: 600,
+                  color: '#374151',
+                  transition: 'background-color 0.2s'
+                }}
+                onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#f3f4f6'}
+                onMouseLeave={(e) => e.currentTarget.style.backgroundColor = '#f9fafb'}
+              >
+                <span>🔬 Approach</span>
+                <svg
+                  width="16"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  fill="currentColor"
+                  style={{
+                    transform: expandedSections.approach ? 'rotate(180deg)' : 'rotate(0deg)',
+                    transition: 'transform 0.2s'
+                  }}
+                >
+                  <path d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" />
+                </svg>
+              </button>
+              {expandedSections.approach && (
+                <div style={{
+                  marginTop: '8px',
+                  padding: '12px',
+                  backgroundColor: '#ffffff',
+                  border: '1px solid #e5e7eb',
+                  borderRadius: '6px',
+                  fontSize: '0.9rem',
+                  lineHeight: 1.6,
+                  color: '#4B5563',
+                  whiteSpace: 'pre-wrap'
+                }}>
+                  {displayNode.originalData.Approach}
+                </div>
+              )}
+            </div>
+          )}
 
-      <Modal isOpen={showComparisonModal} onClose={() => setShowComparisonModal(false)} title="Novelty Comparison">
-        <MarkdownRenderer content={comparisonTable} />
-      </Modal>
+          {/* Experiment Section */}
+          {(displayNode.originalData.Experiment || displayNode.originalData.ExperimentTable) && (
+            <div style={{ marginBottom: '10px' }}>
+              <button
+                onClick={() => toggleSection('experiment')}
+                style={{
+                  width: '100%',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  padding: '10px 12px',
+                  backgroundColor: '#f9fafb',
+                  border: '1px solid #e5e7eb',
+                  borderRadius: '6px',
+                  cursor: 'pointer',
+                  fontSize: '0.95rem',
+                  fontWeight: 600,
+                  color: '#374151',
+                  transition: 'background-color 0.2s'
+                }}
+                onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#f3f4f6'}
+                onMouseLeave={(e) => e.currentTarget.style.backgroundColor = '#f9fafb'}
+              >
+                <span>🧪 Experiment Plan</span>
+                <svg
+                  width="16"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  fill="currentColor"
+                  style={{
+                    transform: expandedSections.experiment ? 'rotate(180deg)' : 'rotate(0deg)',
+                    transition: 'transform 0.2s'
+                  }}
+                >
+                  <path d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" />
+                </svg>
+              </button>
+              {expandedSections.experiment && (
+                <div style={{
+                  marginTop: '8px',
+                  padding: '12px',
+                  backgroundColor: '#ffffff',
+                  border: '1px solid #e5e7eb',
+                  borderRadius: '6px',
+                  fontSize: '0.9rem',
+                  lineHeight: 1.6,
+                  color: '#4B5563'
+                }}>
+                  {displayNode.originalData.ExperimentTable ? (
+                    <ExperimentTable src={displayNode.originalData.ExperimentTable} />
+                  ) : typeof displayNode.originalData.Experiment === 'object' ? (
+                    <div>
+                      {displayNode.originalData.Experiment.Model && (
+                        <div style={{ marginBottom: '8px' }}>
+                          <strong>Model:</strong> {displayNode.originalData.Experiment.Model}
+                        </div>
+                      )}
+                      {displayNode.originalData.Experiment.Dataset && (
+                        <div style={{ marginBottom: '8px' }}>
+                          <strong>Dataset:</strong>{' '}
+                          {typeof displayNode.originalData.Experiment.Dataset === 'object'
+                            ? JSON.stringify(displayNode.originalData.Experiment.Dataset, null, 2)
+                            : displayNode.originalData.Experiment.Dataset}
+                        </div>
+                      )}
+                      {displayNode.originalData.Experiment.Metric && (
+                        <div>
+                          <strong>Metric:</strong> {displayNode.originalData.Experiment.Metric}
+                        </div>
+                      )}
+                    </div>
+                  ) : (
+                    <div style={{ whiteSpace: 'pre-wrap' }}>
+                      {displayNode.originalData.Experiment}
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          )}
 
-      <Modal
-        isOpen={showExperimentModal}
-        onClose={() => {
-          setShowExperimentModal(false);
-          setIsEditingExperiment(false); // Ensure edit mode is off when closing
-        }}
-        title={isEditingExperiment ? "Edit Experiment Plan" : "Experiment Plan"}
-        onEdit={!isEditingExperiment ? () => setIsEditingExperiment(true) : undefined}
-      >
-        {isEditingExperiment ? (
-          <EditableTable
-            content={experimentTable}
-            onSave={(newMarkdown) => {
-              onUpdateTable(displayedNode.id, 'ExperimentTable', newMarkdown);
-              setIsEditingExperiment(false);
-            }}
-            onCancel={() => setIsEditingExperiment(false)}
-          />
-        ) : (
-          <MarkdownRenderer content={experimentTable} />
-        )}
-      </Modal>
-    </>
+          {/* Importance Section */}
+          {displayNode.originalData.Importance && (
+            <div style={{ marginBottom: '10px' }}>
+              <button
+                onClick={() => toggleSection('importance')}
+                style={{
+                  width: '100%',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  padding: '10px 12px',
+                  backgroundColor: '#f9fafb',
+                  border: '1px solid #e5e7eb',
+                  borderRadius: '6px',
+                  cursor: 'pointer',
+                  fontSize: '0.95rem',
+                  fontWeight: 600,
+                  color: '#374151',
+                  transition: 'background-color 0.2s'
+                }}
+                onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#f3f4f6'}
+                onMouseLeave={(e) => e.currentTarget.style.backgroundColor = '#f9fafb'}
+              >
+                <span>⭐ Importance</span>
+                <svg
+                  width="16"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  fill="currentColor"
+                  style={{
+                    transform: expandedSections.importance ? 'rotate(180deg)' : 'rotate(0deg)',
+                    transition: 'transform 0.2s'
+                  }}
+                >
+                  <path d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" />
+                </svg>
+              </button>
+              {expandedSections.importance && (
+                <div style={{
+                  marginTop: '8px',
+                  padding: '12px',
+                  backgroundColor: '#ffffff',
+                  border: '1px solid #e5e7eb',
+                  borderRadius: '6px',
+                  fontSize: '0.9rem',
+                  lineHeight: 1.6,
+                  color: '#4B5563',
+                  whiteSpace: 'pre-wrap'
+                }}>
+                  {displayNode.originalData.Importance}
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Difficulty Section */}
+          {displayNode.originalData.Difficulty && (
+            <div style={{ marginBottom: '10px' }}>
+              <button
+                onClick={() => toggleSection('difficulty')}
+                style={{
+                  width: '100%',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  padding: '10px 12px',
+                  backgroundColor: '#f9fafb',
+                  border: '1px solid #e5e7eb',
+                  borderRadius: '6px',
+                  cursor: 'pointer',
+                  fontSize: '0.95rem',
+                  fontWeight: 600,
+                  color: '#374151',
+                  transition: 'background-color 0.2s'
+                }}
+                onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#f3f4f6'}
+                onMouseLeave={(e) => e.currentTarget.style.backgroundColor = '#f9fafb'}
+              >
+                <span>⚠️ Difficulty</span>
+                <svg
+                  width="16"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  fill="currentColor"
+                  style={{
+                    transform: expandedSections.difficulty ? 'rotate(180deg)' : 'rotate(0deg)',
+                    transition: 'transform 0.2s'
+                  }}
+                >
+                  <path d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" />
+                </svg>
+              </button>
+              {expandedSections.difficulty && (
+                <div style={{
+                  marginTop: '8px',
+                  padding: '12px',
+                  backgroundColor: '#ffffff',
+                  border: '1px solid #e5e7eb',
+                  borderRadius: '6px',
+                  fontSize: '0.9rem',
+                  lineHeight: 1.6,
+                  color: '#4B5563',
+                  whiteSpace: 'pre-wrap'
+                }}>
+                  {displayNode.originalData.Difficulty}
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* NoveltyComparison Section */}
+          {displayNode.originalData.NoveltyComparison && (
+            <div style={{ marginBottom: '10px' }}>
+              <button
+                onClick={() => toggleSection('noveltyComparison')}
+                style={{
+                  width: '100%',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  padding: '10px 12px',
+                  backgroundColor: '#f9fafb',
+                  border: '1px solid #e5e7eb',
+                  borderRadius: '6px',
+                  cursor: 'pointer',
+                  fontSize: '0.95rem',
+                  fontWeight: 600,
+                  color: '#374151',
+                  transition: 'background-color 0.2s'
+                }}
+                onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#f3f4f6'}
+                onMouseLeave={(e) => e.currentTarget.style.backgroundColor = '#f9fafb'}
+              >
+                <span>🆕 Novelty Comparison</span>
+                <svg
+                  width="16"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  fill="currentColor"
+                  style={{
+                    transform: expandedSections.noveltyComparison ? 'rotate(180deg)' : 'rotate(0deg)',
+                    transition: 'transform 0.2s'
+                  }}
+                >
+                  <path d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" />
+                </svg>
+              </button>
+              {expandedSections.noveltyComparison && (
+                <div style={{
+                  marginTop: '8px',
+                  padding: '12px',
+                  backgroundColor: '#ffffff',
+                  border: '1px solid #e5e7eb',
+                  borderRadius: '6px',
+                  fontSize: '0.9rem',
+                  lineHeight: 1.6,
+                  color: '#4B5563',
+                  whiteSpace: 'pre-wrap'
+                }}>
+                  {displayNode.originalData.NoveltyComparison}
+                </div>
+              )}
+            </div>
+          )}
+
+        </div>
+      )}
+
+    </div>
   );
 };
 
diff --git a/frontend/src/components/IdeaFactorsAndScoresCard.jsx b/frontend/src/components/IdeaFactorsAndScoresCard.jsx
deleted file mode 100644
index 3b48442e..00000000
--- a/frontend/src/components/IdeaFactorsAndScoresCard.jsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import React from 'react';
-import FactorBlock from './FactorBlock';
-
-/**
- * 组合 3 个因子块的卡片
- */
-const IdeaFactorsAndScoresCard = ({ node, isEvaluating, showAfter }) => {
-  const hasPrev = !!node.previousState;
-
-  if (isEvaluating) {
-    return (
-      <p style={{ fontSize: '0.875rem', color: '#6b7280', marginBottom: 16 }}>
-        Scores will be displayed once evaluation is complete.
-      </p>
-    );
-  }
-
-  const pick = (field) =>
-    showAfter || !hasPrev ? node[field] : node.previousState[field];
-
-  return (
-    <>
-      <FactorBlock
-        label="Novelty"
-        color="#618685"
-        score={pick('noveltyScore')}
-        reason={pick('noveltyReason')}
-        beforeVal={hasPrev ? node.previousState.noveltyScore : null}
-        afterVal={node.noveltyScore}
-        showAfter={showAfter}
-      />
-
-      <FactorBlock
-        label="Feasibility"
-        color="#50394c"
-        score={pick('feasibilityScore')}
-        reason={pick('feasibilityReason')}
-        beforeVal={hasPrev ? node.previousState.feasibilityScore : null}
-        afterVal={node.feasibilityScore}
-        showAfter={showAfter}
-      />
-
-      <FactorBlock
-        label="Impact"
-        color="#4040a1"
-        score={pick('impactScore')}
-        reason={pick('impactReason')}
-        beforeVal={hasPrev ? node.previousState.impactScore : null}
-        afterVal={node.impactScore}
-        showAfter={showAfter}
-      />
-    </>
-  );
-};
-
-export default IdeaFactorsAndScoresCard;
diff --git a/frontend/src/components/LogDisplay.jsx b/frontend/src/components/LogDisplay.jsx
index 5d22c2a4..f7d17005 100644
--- a/frontend/src/components/LogDisplay.jsx
+++ b/frontend/src/components/LogDisplay.jsx
@@ -9,7 +9,7 @@ const LogDisplay = ({ isVisible, onToggle }) => {
 
   useEffect(() => {
     // Always maintain socket connection when component mounts
-    socketRef.current = io('http://localhost:5000');
+    socketRef.current = io(window.location.origin);
 
     socketRef.current.on('connect', () => {
       setIsConnected(true);
diff --git a/frontend/src/components/TopNav.jsx b/frontend/src/components/TopNav.jsx
index 047deb06..ef504005 100644
--- a/frontend/src/components/TopNav.jsx
+++ b/frontend/src/components/TopNav.jsx
@@ -196,51 +196,51 @@ const TopNav = ({ currentView, setCurrentView, showCodeView = false }) => {
       }}
     >
       <div style={{ display: 'flex', alignItems: 'center' }}>
-      {/* Home View */}
-      <div
-        style={{ ...tabStyle, ...getActiveStyle('home_view'), marginRight: 6 }}
-        onClick={() => setCurrentView('home_view')}
-      >
-        {overviewIcon}
-        Home View
-      </div>
-      {/* Exploration View */}
-      <div
-        style={{ ...tabStyle, ...getActiveStyle('exploration'), marginRight: 6 }}
-        onClick={() => setCurrentView('exploration')}
-      >
-        {explorationIcon}
-        Exploration View
-      </div>
-
-      {/* Evaluation View */}
-      <div
-        style={{ ...tabStyle, ...getActiveStyle('evaluation'), marginRight: 6 }}
-        onClick={() => setCurrentView('evaluation')}
-      >
-        {evaluationIcon}
-        Evaluation View
-      </div>
+        {/* Home View */}
+        <div
+          style={{ ...tabStyle, ...getActiveStyle('home_view'), marginRight: 6 }}
+          onClick={() => setCurrentView('home_view')}
+        >
+          {overviewIcon}
+          Home View
+        </div>
+        {/* Tree View */}
+        <div
+          style={{ ...tabStyle, ...getActiveStyle('exploration'), marginRight: 6 }}
+          onClick={() => setCurrentView('exploration')}
+        >
+          {explorationIcon}
+          Tree View
+        </div>
 
-      {/* Code View - only show if code has been generated */}
-      {showCodeView && (
+        {/* Cube View */}
         <div
-          style={{ ...tabStyle, ...getActiveStyle('code_view'), marginRight: 6 }}
-          onClick={() => setCurrentView('code_view')}
+          style={{ ...tabStyle, ...getActiveStyle('evaluation'), marginRight: 6 }}
+          onClick={() => setCurrentView('evaluation')}
         >
-          {codeIcon}
-          Code View
+          {evaluationIcon}
+          Cube View
         </div>
-      )}
 
-      {/* Paper View */}
-      <div
-        style={{ ...tabStyle, ...getActiveStyle('paper_view') }}
-        onClick={() => setCurrentView('paper_view')}
-      >
-        {paperIcon}
-        Paper View
-      </div>
+        {/* Code View - only show if code has been generated */}
+        {showCodeView && (
+          <div
+            style={{ ...tabStyle, ...getActiveStyle('code_view'), marginRight: 6 }}
+            onClick={() => setCurrentView('code_view')}
+          >
+            {codeIcon}
+            Code View
+          </div>
+        )}
+
+        {/* Paper View */}
+        <div
+          style={{ ...tabStyle, ...getActiveStyle('paper_view') }}
+          onClick={() => setCurrentView('paper_view')}
+        >
+          {paperIcon}
+          Paper View
+        </div>
       </div>
 
       {/* GitHub Logo */}
diff --git a/frontend/src/components/TreePlotVisualization.jsx b/frontend/src/components/TreePlotVisualization.jsx
index dafc82dc..b8a22101 100644
--- a/frontend/src/components/TreePlotVisualization.jsx
+++ b/frontend/src/components/TreePlotVisualization.jsx
@@ -1,12 +1,20 @@
 // ============== 段落1：导入依赖 ==============
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import * as d3 from 'd3';
-import Editor from '@monaco-editor/react';
 
 import TopNav from './TopNav';
 import IdeaCard from './IdeaCard';
-import IdeaFactorsAndScoresCard from './IdeaFactorsAndScoresCard';
-import LogDisplay from './LogDisplay';
+import DimensionSelectorPanel from './DimensionSelectorPanel';
+import DimensionEditDropdown from './DimensionEditDropdown';
+import Evaluation3D from './Evaluation3D';
+import { buildNodeContent } from '../utils/contentParser';
+
+
+const COLOR_MAP = {
+  root: '#4C84FF',
+  simple: '#45B649',
+  complex: '#FF6B6B',
+};
 
 
 // Helper components defined outside the main component to preserve state
@@ -26,7 +34,8 @@ const ContextAndGenerateCard = ({
   setIsEditingSystemPrompt,
   setModalAnchorEl,
   editIcon,
-  handleProceedWithSelectedIdea
+  handleProceedWithSelectedIdea,
+  getNodeTrackingInfo
 }) => {
   const newEditButtonRef = useRef(null);
   const generateButtonRef = useRef(null);
@@ -34,7 +43,7 @@ const ContextAndGenerateCard = ({
   const contextInputRef = useRef(null);
   const customFormRef = useRef(null);
 
-  // Removed user action tracking
+  // Track user interactions (disable hover to avoid conflicts with D3 node tracking)
 
   return (
     <div
@@ -56,7 +65,9 @@ const ContextAndGenerateCard = ({
             id="context-input"
             rows={2}
             value={userInput}
-            onChange={(e) => setUserInput(e.target.value)}
+            onChange={(e) => {
+              setUserInput(e.target.value);
+            }}
             onClick={(e) => e.stopPropagation()}
             style={{
               width: '100%',
@@ -151,34 +162,6 @@ const ContextAndGenerateCard = ({
               Add Custom Idea
             </button>
 
-            <button
-              onClick={(e) => {
-                console.log("=== BUTTON CLICK DETECTED ===");
-                console.log("Event:", e);
-                console.log("selectedNode:", selectedNode);
-                console.log("isGenerating:", isGenerating);
-                console.log("isEvaluating:", isEvaluating);
-                console.log("Button disabled:", !selectedNode || isGenerating || isEvaluating);
-
-                e.stopPropagation();
-                handleProceedWithSelectedIdea();
-              }}
-              disabled={!selectedNode || isGenerating || isEvaluating}
-              style={{
-                padding: '0 16px',
-                backgroundColor: selectedNode && !isGenerating && !isEvaluating ? '#4C84FF' : '#9CA3AF',
-                color: 'white',
-                border: 'none',
-                borderRadius: '6px',
-                fontSize: '0.875rem',
-                fontWeight: 500,
-                cursor: selectedNode && !isGenerating && !isEvaluating ? 'pointer' : 'not-allowed',
-                height: '38px',
-                boxSizing: 'border-box',
-              }}
-            >
-              Proceed
-            </button>
           </div>
         </div>
       ) : (
@@ -198,7 +181,9 @@ const ContextAndGenerateCard = ({
               id="custom-idea-title"
               type="text"
               value={customIdea.title}
-              onChange={(e) => setCustomIdea(prev => ({ ...prev, title: e.target.value }))}
+              onChange={(e) => {
+                setCustomIdea(prev => ({ ...prev, title: e.target.value }));
+              }}
               onClick={(e) => e.stopPropagation()}
               style={{
                 width: '100%',
@@ -218,7 +203,9 @@ const ContextAndGenerateCard = ({
             <textarea
               id="custom-idea-content"
               value={customIdea.content}
-              onChange={(e) => setCustomIdea(prev => ({ ...prev, content: e.target.value }))}
+              onChange={(e) => {
+                setCustomIdea(prev => ({ ...prev, content: e.target.value }));
+              }}
               onClick={(e) => e.stopPropagation()}
               rows={4}
               style={{
@@ -281,10 +268,10 @@ const ContextAndGenerateCard = ({
 const Dashboard = ({
   nodeId,
   nodes,
+  fragmentNodes = [], // 新增：Fragment 节点数组
   isEvaluating,
   showTree,
   setModalAnchorEl,
-  setEditingCriteria,
   // Props for ContextAndGenerateCard
   isAddingCustom,
   userInput,
@@ -300,18 +287,33 @@ const Dashboard = ({
   setIsEditingSystemPrompt,
   editIcon,
   handleProceedWithSelectedIdea,
-  onUpdateTable
+  getNodeTrackingInfo,
+  // Props for score modification
+  onModifyScore,
+  showModifyButton = false,
+  pendingChanges = null,
+  currentView = 'evaluation', // Current view context
+  selectedDimensionPairs = [], // 添加这个 prop
+  activeDimensions = null, // 当前展示的维度平面
+  reEvaluateAll, // pass down full re-eval handler
+  onShowFragmentMenu, // 新增：Fragment 菜单回调
+  activeDimensionIndices, // Active dimension indices
+  onToggleDimensionIndex, // Callback to toggle dimension index
+  onCreateFragmentFromHighlight, // 点击重点直接生成 fragment
+  onSwapDimension = null, // 交换维度方向
+  onEditDimension = null, // 编辑维度 (pairIndex, anchorRect) => void
 }) => {
   const [showAfter, setShowAfter] = useState(true);
-  const [activeSection, setActiveSection] = useState('Impact');
-
-  const node = nodeId ? nodes.find(n => n.id === nodeId) : null;
 
   useEffect(() => {
-    // When the node being viewed changes, reset the tab to Impact.
-    setActiveSection('Impact');
+    setShowAfter(true);
   }, [nodeId]);
 
+  // 先从 nodes 数组查找，如果没找到再从 fragmentNodes 查找
+  const node = nodeId ?
+    (nodes.find(n => n.id === nodeId) || fragmentNodes.find(f => f.id === nodeId))
+    : null;
+
   if (!node) {
     return (
       <div
@@ -342,14 +344,53 @@ const Dashboard = ({
         node={node}
         showAfter={showAfter}
         setShowAfter={setShowAfter}
-        activeSection={activeSection}
-        setActiveSection={setActiveSection}
-        onEditCriteria={(buttonRef, dimension) => {
-          setModalAnchorEl(buttonRef);
-          setEditingCriteria(dimension);
-        }}
-        onUpdateTable={onUpdateTable} // Pass the function down to IdeaCard
+        onModifyScore={onModifyScore}
+        showModifyButton={showModifyButton}
+        pendingChanges={pendingChanges}
+        currentView={currentView}
+        selectedDimensionPairs={selectedDimensionPairs}
+        activeDimensions={activeDimensions}
+        onReEvaluateAll={reEvaluateAll}
+        isEvaluating={isEvaluating}
+        onShowFragmentMenu={onShowFragmentMenu}
+        activeDimensionIndices={activeDimensionIndices}
+        onToggleDimensionIndex={onToggleDimensionIndex}
+        onCreateFragmentFromHighlight={onCreateFragmentFromHighlight}
+        onSwapDimension={onSwapDimension}
+        onEditDimension={onEditDimension}
       />
+
+      {/* Proceed button — only for real idea nodes */}
+      {node.type !== 'root' && node.type !== 'fragment' && handleProceedWithSelectedIdea && (
+        <div style={{ marginTop: '12px', paddingTop: '12px', borderTop: '1px solid #e5e7eb' }}>
+          <button
+            onClick={() => handleProceedWithSelectedIdea(node)}
+            style={{
+              width: '100%',
+              padding: '10px 16px',
+              backgroundColor: '#0F172A',
+              color: '#fff',
+              border: 'none',
+              borderRadius: '8px',
+              fontSize: '0.9rem',
+              fontWeight: 600,
+              cursor: 'pointer',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: '8px',
+            }}
+            onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#1e293b'}
+            onMouseLeave={(e) => e.currentTarget.style.backgroundColor = '#0F172A'}
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <polygon points="5 3 19 12 5 21 5 3" />
+            </svg>
+            Proceed with this Idea
+          </button>
+        </div>
+      )}
+
       {showTree ? (
         <ContextAndGenerateCard
           isAddingCustom={isAddingCustom}
@@ -368,6 +409,7 @@ const Dashboard = ({
           setModalAnchorEl={setModalAnchorEl}
           editIcon={editIcon}
           handleProceedWithSelectedIdea={handleProceedWithSelectedIdea}
+          getNodeTrackingInfo={getNodeTrackingInfo}
         />
       ) : null}
     </div>
@@ -377,6 +419,7 @@ const Dashboard = ({
 
 // ============== 段落2：定义 TreePlotVisualization 组件 ==============
 const TreePlotVisualization = () => {
+  // ... (all your existing state hooks remain here)
   const [currentView, setCurrentView] = useState('home_view'); // Start with home_view
   const [nodes, setNodes] = useState([]);
   const [links, setLinks] = useState([]);
@@ -389,66 +432,359 @@ const TreePlotVisualization = () => {
   const [isGenerating, setIsGenerating] = useState(false);
   const [isEvaluating, setIsEvaluating] = useState(false);
   const [error, setError] = useState(null);
+  // *** 新增：维度选择相关状态 ***
+  const [selectedDimensionPairs, setSelectedDimensionPairs] = useState([]);
+  const [activeDimensionIndices, setActiveDimensionIndices] = useState([0, 1, 2]); // Default all 3 active
+  const [currentFaceIndex, setCurrentFaceIndex] = useState(0); // 0/1/2 对应三张面
+  const [showDimensionPanel, setShowDimensionPanel] = useState(false); // 下拉面板控制
+  const [currentIntent, setCurrentIntent] = useState(''); // 存储当前 intent
+  // *** 新增：维度编辑弹窗状态 ***
+  const [editingDimensionIndex, setEditingDimensionIndex] = useState(null);
+  const [dimensionDropdownAnchor, setDimensionDropdownAnchor] = useState(null);
+  const [isSingleDimensionEvaluating, setIsSingleDimensionEvaluating] = useState(false);
   const svgRef = useRef(null);
   const [ideasList, setIdeasList] = useState([]);
+  const [userScoreCorrections, setUserScoreCorrections] = useState([]);
   const [pendingChange, setPendingChange] = useState(null);
   const [pendingMerge, setPendingMerge] = useState(null);
+  // Track user drag targets for visualization
+  const [userDragTargets, setUserDragTargets] = useState({});
   // *** 新增：用于放大被拖拽覆盖的目标节点 ***
   const [mergeTargetId, setMergeTargetId] = useState(null);
+  // *** Fragment 节点相关状态 ***
+  const [fragmentNodes, setFragmentNodes] = useState([]); // 存储所有 fragment 节点
+  const [fragmentMenuState, setFragmentMenuState] = useState(null); // { x, y, text, parentNodeId }
+  const [expandedFragmentId, setExpandedFragmentId] = useState(null); // 当前展开的 fragment ID
+  const [dragHoverTarget, setDragHoverTarget] = useState(null); // 拖动时 hover 的目标节点 ID
+  const [draggingNodeId, setDraggingNodeId] = useState(null); // 当前正在拖动的节点 ID (用于 z-index 提升)
+  // *** 新增：拖动视觉反馈状态 ***
+  const [dragVisualState, setDragVisualState] = useState(null); // { type: 'modify'|'merge', sourceNodeId, targetNodeId?, ghostPosition? }
+  const cubeDragRef = useRef(null); // 记录立方体自由旋转的拖拽起点
+  const snapTimerRef = useRef(null);
+  const [cubeRotation, setCubeRotation] = useState({ yaw: 0, pitch: 0 }); // yaw: 绕Y轴, pitch: 绕X轴
+  const [isSnapping, setIsSnapping] = useState(false);
   const [isAddingCustom, setIsAddingCustom] = useState(false);
   const [customIdea, setCustomIdea] = useState({ title: '', content: '' });
+  const [customIdeaCounter, setCustomIdeaCounter] = useState(1);
+
+  // Initialize custom idea counter based on existing custom ideas
+  useEffect(() => {
+    const existingCustomIdeas = nodes.filter(node => /^C-\d+$/.test(node.id));
+    if (existingCustomIdeas.length > 0) {
+      const maxNumber = Math.max(...existingCustomIdeas.map(node => {
+        const match = node.id.match(/^C-(\d+)$/);
+        return match ? parseInt(match[1]) : 0;
+      }));
+      setCustomIdeaCounter(maxNumber + 1);
+    }
+  }, [nodes]);
   // *** 新增：用于主界面模型选择和api-key输入
-  const [selectedModel, setSelectedModel] = useState('deepseek-chat');
+  const [selectedModel, setSelectedModel] = useState('gpt-5-mini');
   const [apiKey, setApiKey] = useState('');
   const [isConfigured, setIsConfigured] = useState(false);
   const [configError, setConfigError] = useState('');
+  const didClearSessionRef = useRef(false);
+  // Clear server session on page load to avoid stale ideas after refresh.
+  useEffect(() => {
+    if (didClearSessionRef.current) return;
+    didClearSessionRef.current = true;
+
+    const shouldClearSession = process.env.NODE_ENV === 'production' || process.env.REACT_APP_CLEAR_SESSION_ON_LOAD === 'true';
+    if (!shouldClearSession) return;
+
+    const clearSession = async () => {
+      try {
+        await fetch('/api/clear-session', {
+          method: 'POST',
+          credentials: 'include',
+        });
+        setIsConfigured(false);
+      } catch (err) {
+        console.error('[WARN] Failed to clear session on load:', err);
+      }
+    };
+    clearSession();
+  }, []);
   // *** 新增：用于用户自定义prompts
   const [systemPrompt, setSystemPrompt] = useState('');
   const [isEditingSystemPrompt, setIsEditingSystemPrompt] = useState(false);
-
-  const [impactCriteria, setImpactCriteria] = useState('');
-  const [feasibilityCriteria, setFeasibilityCriteria] = useState('');
-  const [noveltyCriteria, setNoveltyCriteria] = useState('');
-  const [editingCriteria, setEditingCriteria] = useState(null); // 'impact' | 'feasibility' | 'novelty' | null
   const [defaultPrompts, setDefaultPrompts] = useState({
     system_prompt: '',
-    novelty: '',
-    feasibility: '',
-    impact: '',
   });
   // Add refs for positioning modals
   const systemPromptButtonRef = useRef(null);
   const [modalAnchorEl, setModalAnchorEl] = useState(null);
-  const [dashboardWidth, setDashboardWidth] = useState(0);
   const dashboardContainerRef = useRef(null);
   const analysisFormRef = useRef(null);
-  const svgContainerRef = useRef(null);
+  const evaluationContainerRef = useRef(null); // Ref for plot view container
+  const explorationContainerRef = useRef(null); // Ref for tree view container
+  const fragmentDragOriginRef = useRef(null);
+
+  // Node merging state
+  const [mergeMode, setMergeMode] = useState({
+    active: false,
+    firstNode: null,
+    secondNode: null,
+    cursorPosition: { x: 0, y: 0 },
+    showDialog: false
+  });
+  const [mergeAnimationState, setMergeAnimationState] = useState(null); // Persist merge visuals while backend merges
 
-  // New state for Code View and Paper View
-  const [showProceedConfirm, setShowProceedConfirm] = useState(false);
+  // Toggle for hiding plot view
+  const [hideEvaluationView] = useState(false);
 
-  // State for log display
-  const [showLogs, setShowLogs] = useState(false);
-  const [isGeneratingCode, setIsGeneratingCode] = useState(false);
-  const [isGeneratingPaper, setIsGeneratingPaper] = useState(false);
+  // ============== Workflow state (Code → Write → Review) ==============
+  const [workflowIdea, setWorkflowIdea] = useState(null); // node being processed
+  const [workflowStep, setWorkflowStep] = useState(null); // 'coding'|'code_done'|'code_error'|'writing'|'paper_done'|'paper_error'|'reviewing'|'review_done'|'review_error'
+  const [workflowError, setWorkflowError] = useState(null);
   const [codeResult, setCodeResult] = useState(null);
+  const [codeFiles, setCodeFiles] = useState([]); // [{name, path}] list of files in experiment_dir
+  const [selectedCodeFile, setSelectedCodeFile] = useState(null); // {name, path, content}
+  const [showWriterPrompt, setShowWriterPrompt] = useState(false);
   const [paperResult, setPaperResult] = useState(null);
-  const [proceedError, setProceedError] = useState(null);
-  const [codeContent, setCodeContent] = useState('');
-  const [codeFileName, setCodeFileName] = useState('experiment.py');
-  const [activeCodeTab, setActiveCodeTab] = useState('experiment.py');
-  const [experimentFiles, setExperimentFiles] = useState({});
-  const [consoleOutput, setConsoleOutput] = useState('');
-  const [experimentRuns, setExperimentRuns] = useState([]);
-  const [isRunningExperiment, setIsRunningExperiment] = useState(false);
-  const [pdfComments, setPdfComments] = useState([]);
-  const [hasGeneratedCode, setHasGeneratedCode] = useState(false);
-  const [newComment, setNewComment] = useState('');
-  const [s2ApiKey, setS2ApiKey] = useState('');
   const [reviewResult, setReviewResult] = useState(null);
-  const [isReviewing, setIsReviewing] = useState(false);
-  const [rightPanelTab, setRightPanelTab] = useState('comments'); // 'comments' or 'review'
+  const [s2ApiKey, setS2ApiKey] = useState('');
+
+  // Helper function to create modifications array from score change
+  const createModificationFromScoreChange = (nodeId, metric, previousScore, newScore) => {
+    return [{
+      metric,
+      previousScore,
+      newScore,
+      change: newScore - previousScore
+    }];
+  };
+
+  const normalizeIdeaOriginalData = useCallback((source, fallback = {}) => {
+    const raw = source && typeof source === 'object' ? source : {};
+    const title = raw.Title || raw.title || raw.Name || raw.name || fallback.title;
+    const name = raw.Name || raw.name || raw.Title || raw.title || fallback.title;
+    const problem = raw.Problem || raw.problem || raw.content || fallback.content;
+    const normalized = { ...raw };
+    const id = raw.id || raw.ID || fallback.id;
+
+    if (id) normalized.id = id;
+    if (title) normalized.Title = title;
+    if (name) normalized.Name = name;
+    if (problem) normalized.Problem = problem;
+    if (raw.problem_highlights || fallback.problemHighlights) {
+      normalized.problem_highlights = raw.problem_highlights || fallback.problemHighlights;
+    }
+
+    delete normalized.title;
+    delete normalized.content;
+    delete normalized.originalData;
+    delete normalized.problemHighlights;
+
+    return normalized;
+  }, []);
+
+  const colorMap = COLOR_MAP;
+
+  // Unified node color helper to keep Exploration/Cube Views consistent
+  const getNodeColor = useCallback((node) => {
+    if (!node) return '#FF6B6B';
+    if (node.isMergedResult) return '#B22222';
+    if (node.isNewlyGenerated || node.isModified) return '#FFD700';
+    return colorMap[node.type] || '#FF6B6B';
+  }, [colorMap]);
+
+  // Helper function to create ghost node with modified score
+  const createGhostNodeWithModifiedScore = (originalNode, metric, newScore) => {
+    const ghostId = `${originalNode.id}-Xghost-${Date.now()}`;
+    const nextScores = {
+      ...(originalNode.scores || {}),
+      [metric]: newScore
+    };
+    const ghostNode = {
+      ...originalNode,
+      id: ghostId,
+      level: originalNode.level + 1, // Put on next level
+      scores: nextScores,
+      originalData: originalNode.originalData
+        ? {
+          ...originalNode.originalData,
+          scores: {
+            ...(originalNode.originalData.scores || {}),
+            [metric]: newScore
+          }
+        }
+        : originalNode.originalData,
+      isGhost: true,
+      isModified: true, // Mark as modified for different color
+      isNewlyGenerated: true, // Use same yellow color as plot view
+      x: originalNode.x + Math.random() * 40 - 20, // Random offset like child nodes
+      y: originalNode.y + 150 + Math.random() * 20 - 10 // Position below like child nodes
+    };
+    return ghostNode;
+  };
+
+  // Score modification handler for tree view
+  const handleScoreModification = (nodeId, metric, previousScore, newScore, screenX, screenY) => {
+    const originalNode = nodes.find(n => n.id === nodeId);
+    if (!originalNode) return;
+
+    // Create modifications array
+    const modifications = createModificationFromScoreChange(nodeId, metric, previousScore, newScore);
+
+    // Create ghost node with modified score
+    const ghostNode = createGhostNodeWithModifiedScore(originalNode, metric, newScore);
+
+    // Add ghost node to nodes
+    setNodes(prev => [...prev, ghostNode]);
+    setLinks(prev => [...prev, { source: originalNode.id, target: ghostNode.id }]);
+
+    // Set pending change to trigger the 3-option modal positioned beneath the score
+    setPendingChange({
+      originalNode,
+      ghostNode,
+      modifications,
+      behindNode: null, // Not needed for score modifications
+      screenX: screenX || window.innerWidth / 2,
+      screenY: screenY || window.innerHeight / 2
+    });
+  };
+
+  const applyModifyEvaluation = useCallback((change) => {
+    if (!change || !change.originalNode || !change.modifications?.length) {
+      return;
+    }
+
+    const { originalNode, ghostNode, modifications } = change;
+
+    const corrections = modifications
+      .filter(mod => Math.abs(mod.change) > 5)
+      .map(mod => ({
+        ideaTitle: originalNode.title,
+        ideaId: originalNode.id,
+        metric: mod.metric,
+        previousScore: mod.previousScore,
+        newScore: mod.newScore,
+        change: mod.change,
+        timestamp: new Date().toISOString()
+      }));
+
+    if (corrections.length > 0) {
+      setUserScoreCorrections(prev => [...prev, ...corrections]);
+    }
+
+    setNodes(prevNodes => {
+      const filteredNodes = ghostNode
+        ? prevNodes.filter(node => node.id !== ghostNode.id)
+        : [...prevNodes];
+
+      const updatedNodes = filteredNodes.map(node => {
+        if (node.id !== originalNode.id) {
+          return node;
+        }
+
+        const updatedNode = {
+          ...node,
+          // 更新 scores 对象（新的动态维度系统）
+          scores: { ...(node.scores || {}) },
+          originalData: node.originalData ? { ...node.originalData } : node.originalData
+        };
+
+        modifications.forEach(mod => {
+          // 更新动态维度分数（scores 对象）
+          if (updatedNode.scores) {
+            updatedNode.scores[mod.metric] = mod.newScore;
+          }
+
+          if (updatedNode.originalData) {
+            // 更新 originalData 中的 scores 对象
+            if (!updatedNode.originalData.scores) {
+              updatedNode.originalData.scores = {};
+            }
+            updatedNode.originalData.scores[mod.metric] = mod.newScore;
+          }
+        });
+
+        return updatedNode;
+      });
+
+      return updatedNodes;
+    });
+
+    setIdeasList(prevIdeas => prevIdeas.map(idea => {
+      if (idea.id !== originalNode.id) {
+        return idea;
+      }
+
+      const updatedIdea = {
+        ...idea,
+        // 更新 scores 对象
+        scores: { ...(idea.scores || {}) },
+        originalData: idea.originalData ? { ...idea.originalData } : idea.originalData
+      };
 
+      modifications.forEach(mod => {
+        // 更新动态维度分数
+        if (updatedIdea.scores) {
+          updatedIdea.scores[mod.metric] = mod.newScore;
+        }
+
+        if (updatedIdea.originalData) {
+          // 更新 originalData 中的 scores 对象
+          if (!updatedIdea.originalData.scores) {
+            updatedIdea.originalData.scores = {};
+          }
+          updatedIdea.originalData.scores[mod.metric] = mod.newScore;
+        }
+      });
+
+      return updatedIdea;
+    }));
+
+    if (ghostNode) {
+      setLinks(prev => prev.filter(link => link.target !== ghostNode.id));
+    }
+
+    // 清理拖动视觉状态
+    setDragVisualState(null);
+    setPendingChange(null);
+  }, [setIdeasList, setLinks, setPendingChange, setNodes, setUserScoreCorrections]);
+
+  // Clear drag visual state when newly generated node becomes visible (isGhost: false)
+  // Use ref to track if we've already cleared for a specific node to avoid repeated clears
+  const clearedNodesRef = useRef(new Set());
+
+  useEffect(() => {
+    if (!dragVisualState) return;
+
+    // Only clear if we have a pending operation and that specific node becomes visible
+    if (dragVisualState.type === 'modify' && dragVisualState.sourceNodeId) {
+      // Check if there's a newly generated node related to this drag operation
+      const relatedNode = nodes.find(n =>
+        n.isNewlyGenerated &&
+        !n.isGhost &&
+        n.isModified &&
+        // Match by checking if this node was modified from the source
+        (n.previousState?.id === dragVisualState.sourceNodeId || n.id.includes(dragVisualState.sourceNodeId))
+      );
+      if (relatedNode && !clearedNodesRef.current.has(relatedNode.id)) {
+        console.log('[DEBUG] Related modified node visible, clearing drag visual state:', relatedNode.id);
+        clearedNodesRef.current.add(relatedNode.id);
+        setDragVisualState(null);
+      }
+    } else if (dragVisualState.type === 'merge' && (dragVisualState.sourceNodeId || dragVisualState.targetNodeId)) {
+      // Check if merged result related to this specific merge is visible
+      const relatedMerge = nodes.find(n =>
+        n.isMergedResult &&
+        !n.isGhost &&
+        n.isNewlyGenerated &&
+        n.parentIds &&
+        (n.parentIds.includes(dragVisualState.sourceNodeId) || n.parentIds.includes(dragVisualState.targetNodeId))
+      );
+      if (relatedMerge && !clearedNodesRef.current.has(relatedMerge.id)) {
+        console.log('[DEBUG] Related merged node visible, clearing drag visual state:', relatedMerge.id);
+        clearedNodesRef.current.add(relatedMerge.id);
+        setDragVisualState(null);
+      }
+    }
+  }, [nodes, dragVisualState]);
+
+  // Initialize tracking hooks
 
   // Track view changes
   const previousViewRef = useRef(currentView); // Initialize with current view
@@ -467,60 +803,424 @@ const TreePlotVisualization = () => {
     }
   }, [currentView]);
 
-  // This effect will measure the dashboard container and update the width state
+  // 清理旋转吸附计时器
+  useEffect(() => {
+    return () => {
+      if (snapTimerRef.current) {
+        clearTimeout(snapTimerRef.current);
+      }
+    };
+  }, []);
+
+  // Evaluation metric scaling via external control lines (one per axis) with movable block (Option A1 refined)
+  // Control block at center (0.5) => scale=1.0.
+  const [xScalingCenter, setXScalingCenter] = useState(50); // Center point for X-axis scaling (0-100)
+  const [yScalingCenter, setYScalingCenter] = useState(50); // Center point for Y-axis scaling (0-100)
+
+  // Unified scale control for both axes (replaces individual xScaleControl/yScaleControl)
+  const [unifiedScale, setUnifiedScale] = useState(1.0); // 1.0 = normal, >1 = zoomed in, <1 = zoomed out
+  const [userHasInteractedWithScale, setUserHasInteractedWithScale] = useState(false); // Track if user has manually adjusted scale
+
+  // ============== Fragment 节点相关函数 ==============
+  const clearSelection = useCallback(() => {
+    const selection = window.getSelection && window.getSelection();
+    if (selection && selection.removeAllRanges) {
+      selection.removeAllRanges();
+    }
+  }, []);
+
+  /**
+   * 隐藏 Fragment 菜单
+   */
+  const hideFragmentMenu = useCallback(() => {
+    setFragmentMenuState(null);
+    clearSelection();
+  }, [clearSelection]);
+
+  /**
+   * 显示 Fragment 菜单
+   */
+  const showFragmentMenu = useCallback((x, y, selectedText, parentNodeId) => {
+    setFragmentMenuState({ x, y, text: selectedText, parentNodeId });
+  }, []);
+
+  /**
+   * 创建 Fragment 节点
+   * @param {string} selectedText - 用户选中的文本
+   * @param {string} parentNodeId - 父节点 ID
+   */
+  const createFragmentNode = useCallback((selectedText, parentNodeId) => {
+    const cleanText = (selectedText || '').trim();
+    if (!cleanText || !parentNodeId) return;
+
+    // 计算当前父节点已有的 Fragment 数量
+    const existingFragments = fragmentNodes.filter(fn =>
+      fn.id.startsWith(parentNodeId + '-S')
+    );
+    const nextIndex = existingFragments.length + 1;
+    const fragmentId = `${parentNodeId}-S${nextIndex}`;
+
+    // 创建 Fragment 节点（与正常节点结构一样，但无评分）
+    const fragmentNode = {
+      id: fragmentId,
+      title: cleanText.length > 50 ? cleanText.substring(0, 50) + '...' : cleanText,
+      content: cleanText,
+      type: 'fragment',
+      parentId: parentNodeId,
+      timestamp: Date.now(),
+      // 无评分字段
+    };
+
+    setFragmentNodes(prev => [...prev, fragmentNode]);
+
+  }, [fragmentNodes]);
+
+  /**
+   * 确认创建 Fragment 节点
+   */
+  const handleFragmentConfirm = useCallback(() => {
+    if (!fragmentMenuState) return;
+
+    createFragmentNode(fragmentMenuState.text, fragmentMenuState.parentNodeId);
+    hideFragmentMenu();
+    clearSelection();
+  }, [fragmentMenuState, createFragmentNode, hideFragmentMenu, clearSelection]);
+
+  /**
+   * 删除 Fragment 节点
+   */
+  const deleteFragmentNode = useCallback((fragmentId) => {
+    setFragmentNodes(prev => prev.filter(fn => fn.id !== fragmentId));
+
+  }, []);
+
+  // 点击外部关闭 Fragment 菜单
+  useEffect(() => {
+    if (!fragmentMenuState) return;
+
+    const handleClickOutside = (e) => {
+      // 检查点击是否在 Fragment 菜单外部
+      const target = e.target;
+      const isMenuClick = target.closest('[data-fragment-menu]');
+
+      if (!isMenuClick) {
+        hideFragmentMenu();
+      }
+    };
+
+    // 延迟添加监听器，避免立即触发
+    const timeoutId = setTimeout(() => {
+      document.addEventListener('mousedown', handleClickOutside);
+    }, 100);
+
+    return () => {
+      clearTimeout(timeoutId);
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [fragmentMenuState, hideFragmentMenu]);
+
+  // Fallback merge ID (matches backend _merge_id logic)
+  const createMergeId = useCallback((nodeAId, nodeBId) => `${nodeAId}-Y-${nodeBId}-Y`, []);
+
+  // Helper function to extract comprehensive node information for tracking
+  const getNodeTrackingInfo = (node) => {
+    return {
+      nodeId: node.id,
+      nodeTitle: node.title,
+      nodeContent: buildNodeContent(node)
+    };
+  };
+
+  // ============== 新增：辅助函数获取节点在动态维度系统下的分数 ==============
+  /**
+   * 获取节点在指定维度对上的分数
+   * @param {Object} node - 节点对象
+   * @param {Object} dimensionPair - 维度对对象 { dimensionA, dimensionB }
+   * @returns {number|undefined} - 分数值 (0-100)，如果不存在则返回 undefined
+   */
+  const getNodeDimensionScore = useCallback((node, dimensionPair) => {
+    if (!node || !dimensionPair) return undefined;
+
+    const extractScoreValue = (scoreEntry) => {
+      if (scoreEntry === null || scoreEntry === undefined) return undefined;
+      if (typeof scoreEntry === 'number') return scoreEntry;
+      if (typeof scoreEntry === 'object' && scoreEntry.value !== undefined) return scoreEntry.value;
+      return undefined;
+    };
+
+    const orientScoreValue = (value, flipped) => {
+      if (!flipped || typeof value !== 'number') return value;
+      if (value >= -50 && value <= 50) return -value;
+      if (value >= 0 && value <= 100) return 100 - value;
+      return -value;
+    };
+
+    const getScoreEntry = (key) => {
+      if (!key) return undefined;
+      if (node.scores && node.scores[key] !== undefined) return node.scores[key];
+      if (node.originalData && node.originalData.scores && node.originalData.scores[key] !== undefined) {
+        return node.originalData.scores[key];
+      }
+      return undefined;
+    };
+
+    // 新系统：从 node.scores 对象中获取
+    const key = `${dimensionPair.dimensionA}-${dimensionPair.dimensionB}`;
+    const primaryValue = extractScoreValue(getScoreEntry(key));
+    if (primaryValue !== undefined) {
+      return primaryValue;
+    }
+    // Fallback：如果用户交换了维度方向，尝试反向 key，并翻转符号
+    const reverseKey = `${dimensionPair.dimensionB}-${dimensionPair.dimensionA}`;
+    const reverseValue = extractScoreValue(getScoreEntry(reverseKey));
+    if (reverseValue !== undefined) {
+      return orientScoreValue(reverseValue, true);
+    }
+
+    return undefined;
+  }, []);
+
+  /**
+   * 获取当前选中的维度对（X轴和Y轴）
+   * @returns {{ xDimension: Object|null, yDimension: Object|null }}
+   */
+  const getCurrentDimensions = useCallback((faceIndexOverride = currentFaceIndex) => {
+    if (!selectedDimensionPairs || selectedDimensionPairs.length === 0) {
+      return { xDimension: null, yDimension: null, faceIndex: 0, faceName: '', xFlip: false, yFlip: false };
+    }
+
+    // Cube faces: 0 (Front), 1 (Right), 2 (Top), 3 (Back), 4 (Left), 5 (Bottom)
+    if (selectedDimensionPairs.length >= 3) {
+      const makeFace = (xPair, yPair, idx, isBack = false) => ({
+        xDimension: xPair,
+        yDimension: yPair,
+        faceIndex: idx,
+        faceName: `Face ${idx}: ${xPair.dimensionA}-${xPair.dimensionB} vs ${yPair.dimensionA}-${yPair.dimensionB}${isBack ? ' (Back)' : ''}`,
+        xFlip: isBack, // Use xFlip only for coordinate inversion, NOT for text mirroring
+        yFlip: false   // Never flip Y for now, unless we want upside down
+      });
+
+      // Face 0 (Front): Pair 0 vs Pair 1
+      // Face 1 (Right): Pair 1 vs Pair 2
+      // Face 2 (Top): Pair 2 vs Pair 0
+      // Face 3 (Back): Pair 0 vs Pair 1 (inverted X)
+      // Face 4 (Left): Pair 1 vs Pair 2 (inverted X)
+      // Face 5 (Bottom): Pair 2 vs Pair 0 (inverted X)
+
+      const faces = [
+        makeFace(selectedDimensionPairs[0], selectedDimensionPairs[1], 0, false),
+        makeFace(selectedDimensionPairs[1], selectedDimensionPairs[2], 1, false),
+        makeFace(selectedDimensionPairs[2], selectedDimensionPairs[0], 2, false),
+        makeFace(selectedDimensionPairs[0], selectedDimensionPairs[1], 3, true),
+        makeFace(selectedDimensionPairs[1], selectedDimensionPairs[2], 4, true),
+        makeFace(selectedDimensionPairs[2], selectedDimensionPairs[0], 5, true)];
+
+      const idx = ((faceIndexOverride % faces.length) + faces.length) % faces.length;
+      return faces[idx];
+    }
+
+    // Fallback: only two pairs selected
+    if (selectedDimensionPairs.length === 2) {
+      return {
+        xDimension: selectedDimensionPairs[0],
+        yDimension: selectedDimensionPairs[1],
+        faceIndex: 0,
+        faceName: `Face 0: ${selectedDimensionPairs[0].dimensionA}-${selectedDimensionPairs[0].dimensionB} vs ${selectedDimensionPairs[1].dimensionA}-${selectedDimensionPairs[1].dimensionB}`,
+        xFlip: false,
+        yFlip: false
+      };
+    }
+
+    // Single pair fallback
+    return {
+      xDimension: selectedDimensionPairs[0],
+      yDimension: selectedDimensionPairs[0],
+      faceIndex: 0,
+      faceName: `Face 0: ${selectedDimensionPairs[0].dimensionA}-${selectedDimensionPairs[0].dimensionB}`,
+      xFlip: false,
+      yFlip: false
+    };
+  }, [currentFaceIndex, selectedDimensionPairs]);
+
+  const { xDimension: activeXDimension, yDimension: activeYDimension } = getCurrentDimensions();
+  const xAxisMetric = activeXDimension ? `${activeXDimension.dimensionA}-${activeXDimension.dimensionB}` : '';
+  const yAxisMetric = activeYDimension ? `${activeYDimension.dimensionA}-${activeYDimension.dimensionB}` : '';
+  const xAxisLabel = activeXDimension ? `${activeXDimension.dimensionA} vs ${activeXDimension.dimensionB}` : '';
+  const yAxisLabel = activeYDimension ? `${activeYDimension.dimensionA} vs ${activeYDimension.dimensionB}` : '';
+
   useEffect(() => {
-    if (dashboardContainerRef.current) {
-      const resizeObserver = new ResizeObserver(entries => {
-        for (let entry of entries) {
-          setDashboardWidth(entry.contentRect.width);
+    setUserDragTargets(prev => {
+      const filtered = {};
+      Object.entries(prev).forEach(([nodeId, target]) => {
+        if (target.xAxisMetric === xAxisMetric && target.yAxisMetric === yAxisMetric) {
+          filtered[nodeId] = target;
         }
       });
-      resizeObserver.observe(dashboardContainerRef.current);
-      return () => resizeObserver.disconnect();
+      return filtered;
+    });
+  }, [xAxisMetric, yAxisMetric]);
+
+  /**
+   * 获取节点的 X 坐标值（基于当前选中的维度对）
+   * @param {Object} node - 节点对象
+   * @returns {number|undefined} - X 坐标值
+   */
+  const getNodeX = useCallback((node) => {
+    const { xDimension } = getCurrentDimensions();
+    if (xDimension) {
+      return getNodeDimensionScore(node, xDimension);
+    }
+    return undefined;
+  }, [getCurrentDimensions, getNodeDimensionScore]);
+
+  /**
+   * 获取节点的 Y 坐标值（基于当前选中的维度对）
+   * @param {Object} node - 节点对象
+   * @returns {number|undefined} - Y 坐标值
+   */
+  const getNodeY = useCallback((node) => {
+    const { yDimension } = getCurrentDimensions();
+    if (yDimension) {
+      return getNodeDimensionScore(node, yDimension);
+    }
+    return undefined;
+  }, [getCurrentDimensions, getNodeDimensionScore]);
+
+  // Reset face to the first plane when dimension selection changes
+
+  const calculateNodeMidpoints = useCallback(() => {
+    const visibleNodes = nodes.filter(n => {
+      const xVal = getNodeX(n);
+      const yVal = getNodeY(n);
+      return xVal !== undefined && yVal !== undefined && !n.isGhost;
+    });
+
+    if (visibleNodes.length === 0) {
+      return { xCenter: 70, yCenter: 70 };
     }
-  }, []); // Run only once on mount
-  // X/Y 轴指标（仅在 Evaluation View 用）
-  const [xAxisMetric, setXAxisMetric] = useState('feasibilityScore');
-  const [yAxisMetric, setYAxisMetric] = useState('noveltyScore');
-
-  // ID 计数器
-  const idCounterRef = useRef(0);
-  const generateUniqueId = () => {
-    idCounterRef.current += 1;
-    return `node-${idCounterRef.current}`;
-  };
 
-  // 配色映射
-  const colorMap = {
-    root: '#4C84FF',
-    simple: '#45B649',
-    complex: '#FF6B6B',
+    const xValues = visibleNodes.map(n => getNodeX(n));
+    const yValues = visibleNodes.map(n => getNodeY(n));
+
+    const xMin = Math.min(...xValues);
+    const xMax = Math.max(...xValues);
+    const yMin = Math.min(...yValues);
+    const yMax = Math.max(...yValues);
+
+    const xCenter = (xMin + xMax) / 2;
+    const yCenter = (yMin + yMax) / 2;
+
+    return { xCenter, yCenter };
+  }, [nodes, getNodeX, getNodeY]);
+
+
+  /**
+   * 从象限内的像素坐标反向计算分数
+   * @param {number} pixelX - 象限内的 X 像素坐标
+   * @param {number} pixelY - 象限内的 Y 像素坐标
+   * @param {number} quadrantWidth - 象限宽度
+   * @param {number} quadrantHeight - 象限高度
+   * @param {number} xMin - X 轴最小分数
+   * @param {number} xMax - X 轴最大分数
+   * @param {number} yMin - Y 轴最小分数
+   * @param {number} yMax - Y 轴最大分数
+   * @returns {{ xScore: number, yScore: number }} - 计算出的分数 (0-100)
+   */
+  const pixelToScore = (pixelX, pixelY, quadrantWidth, quadrantHeight, xMin, xMax, yMin, yMax) => {
+    // 反向计算：从90%空间映射回去（对应正向映射的90%容器空间）
+    const rawX = (pixelX - quadrantWidth * 0.05) / (quadrantWidth * 0.9);
+    const rawY = (pixelY - quadrantHeight * 0.05) / (quadrantHeight * 0.9);
+
+    // 将像素坐标归一化到 0-1 范围
+    const normalizedX = Math.max(0, Math.min(1, rawX));
+    const normalizedY = Math.max(0, Math.min(1, 1 - rawY)); // Y 轴翻转
+
+    // 映射到分数区间 (支持 signed ranges e.g., -50..50)
+    const xScoreRaw = xMin + normalizedX * (xMax - xMin);
+    const yScoreRaw = yMin + normalizedY * (yMax - yMin);
+
+    // 四舍五入并在提供的区间内截断
+    const xScore = Math.round(xScoreRaw);
+    const yScore = Math.round(yScoreRaw);
+
+    const clamp = (v, a, b) => Math.max(Math.min(v, Math.max(a, b)), Math.min(a, b));
+
+    return {
+      xScore: clamp(xScore, xMin, xMax),
+      yScore: clamp(yScore, yMin, yMax)
+    };
   };
-  const handleUpdateTable = (nodeId, tableName, newContent) => {
-    setNodes(prevNodes =>
-      prevNodes.map(node => {
-        if (node.id === nodeId) {
-          // Create a deep copy to avoid direct state mutation, which can cause bugs.
-          const updatedNode = JSON.parse(JSON.stringify(node));
-          if (!updatedNode.originalData) {
-            updatedNode.originalData = {};
-          }
-          updatedNode.originalData[tableName] = newContent;
-          console.log(`Updated table '${tableName}' for node ${nodeId}`);
-          return updatedNode;
-        }
+
+  /**
+   * 检测拖动节点是否与其他节点碰撞(用于 Merge 检测)
+   * @param {number} dragX - 拖动节点中心的屏幕 X 坐标
+   * @param {number} dragY - 拖动节点中心的屏幕 Y 坐标
+   * @param {string} dragNodeId - 拖动节点的 ID
+   * @param {Array} allNodes - 所有节点列表
+   * @param {number} threshold - 碰撞检测阈值(像素)
+   * @returns {Object|null} - 碰撞的目标节点,如果没有碰撞返回 null
+   */
+  const detectNodeCollision = (dragX, dragY, dragNodeId, allNodes, threshold = 30) => {
+    for (const node of allNodes) {
+      if (node.id === dragNodeId) continue; // 跳过自己
+
+      const nodeElement = document.querySelector(`[data-node-id="${node.id}"]`);
+      if (!nodeElement) continue;
+
+      const rect = nodeElement.getBoundingClientRect();
+      const nodeCenterX = rect.left + rect.width / 2;
+      const nodeCenterY = rect.top + rect.height / 2;
+
+      const distance = Math.sqrt(
+        Math.pow(dragX - nodeCenterX, 2) +
+        Math.pow(dragY - nodeCenterY, 2)
+      );
+
+      if (distance < threshold) {
         return node;
-      })
-    );
+      }
+    }
+    return null;
   };
+
+  // 获取节点中心相对于容器的坐标（用于在 merge 过程中维持视觉状态）
+  const getNodeCenterRelativeToContainer = useCallback((nodeId) => {
+    const container = (currentView === 'evaluation' ? evaluationContainerRef : explorationContainerRef).current;
+    const nodeElement = document.querySelector(`[data-node-id="${nodeId}"]`);
+    if (!container || !nodeElement) return null;
+    const containerRect = container.getBoundingClientRect();
+    const rect = nodeElement.getBoundingClientRect();
+    return {
+      x: rect.left - containerRect.left + rect.width / 2,
+      y: rect.top - containerRect.top + rect.height / 2
+    };
+  }, [currentView]);
   // ============== 配置模型和API Key ==============
   const modelOptions = [
+    { value: 'gpt-5.2', label: 'GPT-5.2' },
+    { value: 'gpt-5.2-pro', label: 'GPT-5.2 Pro' },
+    { value: 'gpt-5.2-codex', label: 'GPT-5.2 Codex' },
+    { value: 'gpt-5', label: 'GPT-5' },
+    { value: 'gpt-5-pro', label: 'GPT-5 Pro' },
+    { value: 'gpt-5-mini', label: 'GPT-5 Mini' },
+    { value: 'gpt-5-nano', label: 'GPT-5 Nano' },
+    { value: 'gpt-4.1', label: 'GPT-4.1' },
+    { value: 'gpt-4.1-mini', label: 'GPT-4.1 Mini' },
+    { value: 'gpt-4.1-nano', label: 'GPT-4.1 Nano' },
+    { value: 'o3', label: 'O3' },
+    { value: 'o4-mini-deep-research', label: 'O4 Mini Deep Research' },
+    { value: 'claude-opus-4-6', label: 'Claude Opus 4.6' },
+    { value: 'claude-opus-4-5', label: 'Claude Opus 4.5' },
+    { value: 'claude-sonnet-4-5', label: 'Claude Sonnet 4.5' },
+    { value: 'claude-haiku-4-5', label: 'Claude Haiku 4.5' },
+    { value: 'claude-opus-4', label: 'Claude Opus 4' },
+    { value: 'claude-sonnet-4', label: 'Claude Sonnet 4' },
     { value: 'deepseek-chat', label: 'DeepSeek Chat' },
     { value: 'deepseek-reasoner', label: 'DeepSeek Reasoner' },
-    { value: 'gpt-4o', label: 'GPT-4o' },
-    { value: 'o1-2024-12-17', label: 'GPT-o1' },
-    { value: 'claude-3-5-sonnet-20241022', label: 'Claude 3.5 Sonnet' },
-  ];
+    { value: 'gemini-2.5-pro', label: 'Gemini 2.5 Pro' },
+    { value: 'gemini-2.5-flash', label: 'Gemini 2.5 Flash' },
+    { value: 'gemini-2.5-flash-lite', label: 'Gemini 2.5 Flash Lite' },
+    { value: 'gemini-2.0-flash', label: 'Gemini 2.0 Flash' }];
   useEffect(() => {
     const fetchPrompts = async () => {
       if (isConfigured) {
@@ -532,9 +1232,6 @@ const TreePlotVisualization = () => {
           const data = await response.json();
           // Set the current prompts
           setSystemPrompt(data.system_prompt);
-          setImpactCriteria(data.criteria.impact);
-          setFeasibilityCriteria(data.criteria.feasibility);
-          setNoveltyCriteria(data.criteria.novelty);
           // Set the default prompts
           setDefaultPrompts(data.defaults);
         } catch (err) {
@@ -553,7 +1250,6 @@ const TreePlotVisualization = () => {
       return;
     }
 
-
     setConfigError('');
     setOperationStatus('Configuring model...');
 
@@ -570,53 +1266,26 @@ const TreePlotVisualization = () => {
         }),
       });
 
-      if (!response.ok) {
-        throw new Error('Failed to configure model');
+      const responseText = await response.text();
+      let configData = null;
+      try {
+        configData = JSON.parse(responseText);
+      } catch (parseErr) {
+        throw new Error(`Invalid configure response: ${responseText || 'non-JSON response'}`);
       }
 
-      setIsConfigured(true);
-      setOperationStatus('');
-      setCurrentView('exploration'); // Auto-switch to exploration view
-    } catch (err) {
-      console.error('Configuration error:', err);
-      setConfigError(err.message);
-      setOperationStatus('');
-    }
-  };
-
-  // Quick setup handler for GPT-4o with pre-configured API key
-  const handleQuickSetup = async () => {
-    // Pre-configured API key from environment variable
-    const preConfiguredApiKey = process.env.REACT_APP_OPENAI_API_KEY || 'your-openai-api-key-here';
-
-    // Auto-configure with GPT-4o
-    setSelectedModel('gpt-4o');
-    setApiKey(preConfiguredApiKey);
-    setConfigError('');
-    setOperationStatus('Configuring model...');
-
-    try {
-      const response = await fetch('/api/configure', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        credentials: 'include',
-        body: JSON.stringify({
-          model: 'gpt-4o',
-          api_key: preConfiguredApiKey,
-        }),
-      });
-
       if (!response.ok) {
-        throw new Error('Failed to configure model');
+        throw new Error(configData?.error || 'Failed to configure model');
       }
 
+      console.log('[CONFIG] Backend resolved agent_sdk:', configData?.agent_sdk);
+
       setIsConfigured(true);
       setOperationStatus('');
-      setCurrentView('exploration'); // Auto-switch to exploration view
+      setCurrentView('exploration'); // Auto-switch to tree view
+
     } catch (err) {
-      console.error('Quick setup error:', err);
+      console.error('Configuration error:', err);
       setConfigError(err.message);
       setOperationStatus('');
     }
@@ -625,6 +1294,8 @@ const TreePlotVisualization = () => {
   // Overview Component
   const OverviewPage = () => (
     <div
+      data-uatrack-suppress-hover="true"
+      data-uatrack-suppress-click="true"
       style={{
         display: 'flex',
         justifyContent: 'center',
@@ -719,15 +1390,6 @@ const TreePlotVisualization = () => {
                 boxSizing: 'border-box',
               }}
             />
-            <p style={{
-              fontSize: '0.75rem',
-              color: '#ef4444',
-              marginTop: '4px',
-              marginBottom: '0',
-              fontStyle: 'italic'
-            }}>
-              *We will not save the API key, it is only used for your following usage
-            </p>
           </div>
 
           {/* Error Message */}
@@ -767,38 +1429,6 @@ const TreePlotVisualization = () => {
             {operationStatus === 'Configuring model...' ? 'Configuring...' : 'Start Session'}
           </button>
 
-          {/* Quick Setup Button */}
-          {!isConfigured && (
-            <div style={{ marginTop: '12px', textAlign: 'center' }}>
-              <button
-                type="button"
-                onClick={handleQuickSetup}
-                disabled={operationStatus === 'Configuring model...'}
-                style={{
-                  padding: '8px 16px',
-                  backgroundColor: '#10b981',
-                  color: 'white',
-                  border: 'none',
-                  borderRadius: '6px',
-                  fontSize: '0.75rem',
-                  fontWeight: 500,
-                  cursor: operationStatus === 'Configuring model...' ? 'not-allowed' : 'pointer',
-                  opacity: operationStatus === 'Configuring model...' ? 0.7 : 1,
-                }}
-              >
-                🚀 Quick Setup with GPT-4o
-              </button>
-              <div style={{
-                marginTop: '4px',
-                fontSize: '0.7rem',
-                color: '#6b7280',
-                fontStyle: 'italic'
-              }}>
-                Auto-configure with recommended settings
-              </div>
-            </div>
-          )}
-
           {/* Status for already configured */}
           {isConfigured && (
             <div
@@ -834,23 +1464,6 @@ const TreePlotVisualization = () => {
       return false;
     }
   };
-
-  const updateCriteria = async (dimension, criteria) => {
-    try {
-      const response = await fetch('/api/set-criteria', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        credentials: 'include',
-        body: JSON.stringify({ dimension, criteria }),
-      });
-      if (!response.ok) throw new Error('Failed to update criteria');
-      return true;
-    } catch (err) {
-      console.error('Error updating criteria:', err);
-      setError(err.message);
-      return false;
-    }
-  };
   // Modal component for editing prompts
   const EditModal = ({ isOpen, onClose, title, defaultText, initialValue, onSave, height = '270px', anchorRef, width }) => {
     // Manages its own state while open, initialized by the parent's value
@@ -914,6 +1527,7 @@ const TreePlotVisualization = () => {
         onClick={onClose}
       >
         <div
+          data-panel-root="edit-modal"
           style={{
             position: 'absolute',
             top: position.top,
@@ -1037,26 +1651,114 @@ const TreePlotVisualization = () => {
     </svg>
   );
   // ============== 段落3：评估假设（evaluateIdeas） ==============
-  const evaluateIdeas = async (ideas) => {
+  // Helper: determine which ideas need evaluation (missing scores)
+  const getIdeasNeedingEvaluation = useCallback((ideasArr) => {
+    return ideasArr.filter(i => {
+      if (!selectedDimensionPairs || selectedDimensionPairs.length < 3) {
+        return true;
+      }
+
+      const hasAll = selectedDimensionPairs.slice(0, 3).every(pair => {
+        const val = getNodeDimensionScore(i, pair);
+        return val !== undefined && val !== null;
+      });
+
+      return !hasAll;
+    }).map(i => i.id);
+  }, [getNodeDimensionScore, selectedDimensionPairs]);
+
+  const evaluateIdeas = async (ideas, { mode = 'incremental', allowAutoCenter = false, dimensionPairs = null } = {}) => {
+
+    if (!ideas || !Array.isArray(ideas) || ideas.length === 0) {
+      return;
+    }
+
+    // Don't clear drag targets at start - they should persist during evaluation
 
     setIsEvaluating(true);
     setOperationStatus('Evaluating ideas...');
     setError(null);
-    setShowLogs(true); // Show logs when starting idea evaluation
 
     try {
-      const requestBody = {
-        ideas: ideas.map(h => ({
-          ...(h.originalData || {}),
-          id: h.id,  // Always include the frontend node ID
-          // Don't overwrite the original Title field - use it for evaluation
-          // title: h.title,
-          // content: h.content
-        })),
-        intent: analysisIntent
-      };
+      // Prepare the request body - ensuring merged ideas use their originalData properly
+      console.log('[DEBUG] Before filtering ideas:', {
+        totalIdeas: ideas.length,
+        ideaStructure: ideas.map(h => ({
+          id: h.id,
+          title: h.title,
+          hasOriginalData: !!h.originalData,
+          originalDataFields: h.originalData ? Object.keys(h.originalData) : []
+        }))
+      });
 
-      const response = await fetch('/api/evaluate', {
+      // Log each idea separately for easier debugging
+      ideas.forEach((idea, index) => {
+        console.log(`[DEBUG] Idea ${index}:`, {
+          id: idea.id,
+          title: idea.title,
+          hasOriginalData: !!idea.originalData,
+          originalData: idea.originalData
+        });
+      });
+
+      const requestIdeas = ideas
+        .filter(h => {
+          // Exclude root node (level 0) from evaluation
+          if (h.level === 0) {
+            console.log('[DEBUG] Excluding root node from evaluation:', h.id);
+            return false;
+          }
+          // For ideas from ideasList, they are already the original data
+          // For ideas from nodes, they need originalData
+          return h.originalData || (h.id && h.title && !h.level); // level indicates it's a node, not an idea
+        })
+        .map(h => {
+          if (h.originalData) {
+            // This is a node with originalData
+            const od = h.originalData;
+            return {
+              ...od,
+              id: od.id || h.id,
+              Title: od.Title || od.Name || h.title || h.name || '',
+              Name: od.Name || od.Title || h.title || h.name || ''
+            };
+          } else {
+            // This is already an idea from ideasList
+            return {
+              ...h,
+              Title: h.Title || h.Name || h.title || h.name || '',
+              Name: h.Name || h.Title || h.title || h.name || ''
+            };
+          }
+        });
+
+      console.log('[DEBUG] After filtering and mapping:', {
+        requestIdeasCount: requestIdeas.length,
+        requestIdeaIds: requestIdeas.map(i => i.id),
+        requestIdeaTitles: requestIdeas.map(i => i.Title || i.Name)
+      });
+
+      // Use selectedDimensionPairs if provided via parameter, otherwise use component state
+      const effectiveDimensionPairs = dimensionPairs || selectedDimensionPairs;
+
+      if (!effectiveDimensionPairs || effectiveDimensionPairs.length < 3) {
+        throw new Error('Please select 3 dimension pairs before evaluating ideas.');
+      }
+
+      const requestBody = {
+        ideas: requestIdeas,
+        intent: analysisIntent,
+        userScoreCorrections: userScoreCorrections,
+        mode,
+        // Only send explicit targetIds when incremental; backend will infer otherwise.
+        targetIds: mode === 'incremental' ? getIdeasNeedingEvaluation(requestIdeas) : undefined,
+        // Add dimension_pairs to request if available
+        dimension_pairs: effectiveDimensionPairs
+      };
+
+
+      // 1. Make the API call.
+      const response = await fetch('/api/evaluate', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
@@ -1066,33 +1768,212 @@ const TreePlotVisualization = () => {
       });
 
       if (!response.ok) {
-        throw new Error('Failed to evaluate ideas');
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      // 2. Wait for the full response body to arrive as text.
+      const responseText = await response.text();
+      console.log('[DEBUG] Evaluation response text length:', responseText.length);
+      console.log('[DEBUG] Evaluation response text preview:', responseText.substring(0, 1000));
+      console.log('[DEBUG] Evaluation response text end:', responseText.substring(responseText.length - 500));
+
+      // 3. Parse the text string into JSON.
+      const parsed = JSON.parse(responseText);
+      let evaluatedIdeas = [];
+      let metaMode = mode;
+      if (Array.isArray(parsed)) {
+        evaluatedIdeas = parsed; // legacy array shape
+      } else if (parsed.ideas) {
+        evaluatedIdeas = parsed.ideas; // new shape {ideas, meta}
+        if (parsed.meta && parsed.meta.mode) metaMode = parsed.meta.mode;
+      } else if (parsed.scores) {
+        evaluatedIdeas = parsed.scores; // older shape
+      }
+
+      // Debug: Log evaluation response structure
+      console.log('[DEBUG] Parsed evaluation response:', {
+        evaluatedIdeasCount: evaluatedIdeas.length,
+        evaluatedIdeas: evaluatedIdeas.map(ev => ({
+          id: ev.id,
+          title: ev.title,
+          hasScores: !!(ev.scores && Object.keys(ev.scores).length > 0),
+          hasReasoning: !!(ev.Dimension1Reason || ev.Dimension2Reason || ev.Dimension3Reason),
+          // Debug: Show all keys to see what's actually available
+          allKeys: Object.keys(ev),
+          // Debug: Check for any reasoning-related fields
+          reasoningFields: Object.keys(ev).filter(key => key.toLowerCase().includes('reason'))
+        }))
+      });
+
+      // Debug: Log the raw evaluatedIdeas for custom ideas
+      const customIdeas = evaluatedIdeas.filter(ev => ev.id && (ev.id.includes('-CUSTOM-') || /^C-\d+$/.test(ev.id)));
+      if (customIdeas.length > 0) {
+        console.log('[DEBUG] Custom ideas in evaluation response:', customIdeas.map(ev => ({
+          id: ev.id,
+          title: ev.title,
+          allKeys: Object.keys(ev),
+          reasoningFields: Object.keys(ev).filter(key => key.toLowerCase().includes('reason')),
+          rawData: ev
+        })));
+      }
+
+      // 4. Check if the backend returned a specific error message.
+      if (evaluatedIdeas.error) {
+        throw new Error(evaluatedIdeas.error);
       }
 
-      const evaluatedIdeas = await response.json();
 
+      // 5. Success! The data is ready. Log it and update the state.
+      console.log("Evaluation successful:", evaluatedIdeas);
+
+      // This logic now correctly runs inside the same block where 'evaluatedIdeas' is defined.
       setNodes((prevNodes) => {
+        // Build map keyed by backend idea id (each evaluated idea.id is backend id)
+        const evalMap = new Map(evaluatedIdeas.map(h => [h.id, h]));
+        const existingBackendIds = new Set(prevNodes.map(n => n.originalData && n.originalData.id).filter(Boolean));
+
+        console.log('[DEBUG] Frontend evaluation mapping:', {
+          evaluatedIdeas: evaluatedIdeas.map(e => ({
+            id: e.id,
+            title: e.title,
+            hasScores: !!(e.scores && Object.keys(e.scores).length > 0)
+          })),
+          nodes: prevNodes.map(n => ({
+            nodeId: n.id,
+            backendId: n.originalData?.id,
+            title: n.title,
+            hasExistingScores: !!(n.scores && Object.keys(n.scores).length > 0)
+          }))
+        });
 
-        const updatedNodes = prevNodes.map((node) => {
-          const evalIdea = evaluatedIdeas.find((h) => h.id === node.id);
-          if (evalIdea) {
-            const noveltyScore = evalIdea.noveltyScore;
-            const feasibilityScore = evalIdea.feasibilityScore;
-            const impactScore = evalIdea.impactScore;
+        const updatedNodes = prevNodes.map(node => {
+          const backendId = node.originalData && (node.originalData.id || node.originalData.ID);
+          let ev = backendId ? evalMap.get(backendId) : evalMap.get(node.id);
+
+          // Additional fallback: try finding by title if ID doesn't match
+          if (!ev && node.title) {
+            ev = evaluatedIdeas.find(e =>
+              e.title === node.title ||
+              e.Title === node.title ||
+              (e.title && e.title.toLowerCase() === node.title.toLowerCase())
+            );
+          }
 
-            return {
-              ...node,
-              noveltyScore,
-              feasibilityScore,
-              impactScore,
-              noveltyReason: evalIdea.noveltyReason || '(No reason provided)',
-              feasibilityReason: evalIdea.feasibilityReason || '(No reason provided)',
-              impactReason: evalIdea.impactReason || '(No reason provided)',
-            };
+          if (!ev) {
+            console.log(`[DEBUG] No evaluation match for node: ${node.id} (backend: ${backendId}, title: "${node.title}")`);
+            console.log(`[DEBUG] Available evaluations:`, evaluatedIdeas.map(e => ({ id: e.id, title: e.title })));
+            return node;
           }
-          return node;
+
+          console.log(`[DEBUG] Matched node ${node.id} with eval ${ev.id}, scores:`, JSON.stringify(ev.scores || {}));
+
+          // Debug: Check if this is a custom idea and log reasoning fields
+          const isCustomIdea = node.id && (node.id.includes('-CUSTOM-') || /^C-\d+$/.test(node.id));
+          if (isCustomIdea) {
+            console.log(`[DEBUG] Custom idea ${node.id} evaluation data:`, {
+              Dimension1Reason: ev.Dimension1Reason,
+              Dimension2Reason: ev.Dimension2Reason,
+              Dimension3Reason: ev.Dimension3Reason,
+              Dimension1Score: ev.Dimension1Score,
+              Dimension2Score: ev.Dimension2Score,
+              Dimension3Score: ev.Dimension3Score,
+              DimensionReasons: ev.Dimension1Reason || ev.Dimension2Reason || ev.Dimension3Reason,
+              hasDimension1Reason: !!ev.Dimension1Reason,
+              hasDimension2Reason: !!ev.Dimension2Reason,
+              hasDimension3Reason: !!ev.Dimension3Reason,
+              // Debug: Show all available fields
+              allEvKeys: Object.keys(ev),
+              reasoningFields: Object.keys(ev).filter(key => key.toLowerCase().includes('reason'))
+            });
+          }
+
+          // Calculate correct position based on actual scores (new or old system)
+          const updatedNode = {
+            ...node,
+            // 新系统分数
+            scores: ev.scores || node.scores,
+            dimension1Score: ev.dimension1Score ?? node.dimension1Score,
+            dimension2Score: ev.dimension2Score ?? node.dimension2Score,
+            dimension3Score: ev.dimension3Score ?? node.dimension3Score,
+            // Preserve original content and title from the node (don't overwrite with evaluation data)
+            title: node.title || ev.title || ev.Title || ev.Name,
+            content: node.content || ev.content || ev.Problem || '',
+            problemHighlights: node.problemHighlights || node.originalData?.problem_highlights || ev.problem_highlights || ev.problemHighlights || [],
+            // Update originalData to include reasoning fields for all ideas
+            originalData: {
+              ...(node.originalData || {}),
+              // 新系统字段 - 维度评分原因
+              Dimension1Reason: ev.Dimension1Reason || '',
+              Dimension2Reason: ev.Dimension2Reason || '',
+              Dimension3Reason: ev.Dimension3Reason || '',
+              Dimension3Score: ev.Dimension3Score || ev.dimension3Score,
+              scores: ev.scores || node.scores, // 重要: 也存到 originalData
+            },
+            // Explicitly preserve userDragTarget for visualization
+            userDragTarget: node.userDragTarget,
+            // Reveal ghost nodes when they receive scores (turn off ghost mode)
+            isGhost: false,
+            // Clear pending evaluation status
+            isPendingEvaluation: false
+          };
+
+          // Debug: Log userDragTarget preservation
+          if (node.userDragTarget) {
+            console.log('[DEBUG] Preserved userDragTarget for node:', node.id, node.userDragTarget);
+          }
+
+          // If this was a ghost node, clear explicit coordinates to use score-based positioning
+          if (node.isGhost) {
+            console.log(`[DEBUG] Converting ghost node ${node.id} to scored node - clearing explicit coordinates`);
+            // Clear explicit coordinates so the node positions based on its scores
+            delete updatedNode.x;
+            delete updatedNode.y;
+            delete updatedNode._tmpViewX;
+            delete updatedNode._tmpViewY;
+          }
+
+          // DON'T delete userDragTarget here - keep it for visualization until next evaluation
+          // delete updatedNode.userDragTarget;
+
+          return updatedNode;
         });
 
+        // If full mode, ensure every evaluated idea has a node; if missing, append (edge safety)
+        if (metaMode === 'full') {
+          evaluatedIdeas.forEach(ev => {
+            if (!existingBackendIds.has(ev.id)) {
+              updatedNodes.push({
+                id: ev.id, // fallback to backend id (no lineage info available)
+                level: 1,
+                title: ev.title || ev.Title || 'Untitled',
+                content: ev.content || '',
+                problemHighlights: ev.problem_highlights || ev.problemHighlights || [],
+                type: 'complex',
+                x: 0,
+                y: 0,
+                originalData: ev,
+                // 新系统分数
+                scores: ev.scores || {},
+                dimension1Score: ev.dimension1Score,
+                dimension2Score: ev.dimension2Score,
+                dimension3Score: ev.dimension3Score,
+              });
+            }
+          });
+        }
+
+        // Track evaluation updates
+
+        // Auto-center after evaluation completion (only if user hasn't manually adjusted scale and auto-centering is allowed)
+        if (!userHasInteractedWithScale && allowAutoCenter) {
+          setTimeout(() => {
+            // Keep xy scale at 0-100 for initial generation, don't auto-adjust to node midpoints
+            setXScalingCenter(50);
+            setYScalingCenter(50);
+            console.log(`[DEBUG] Kept scale centered at 50,50 for stable 0-100 view`);
+          }, 100);
+        }
+
         return updatedNodes;
       });
     } catch (err) {
@@ -1101,9 +1982,91 @@ const TreePlotVisualization = () => {
     } finally {
       setIsEvaluating(false);
       setOperationStatus('');
+
+      // Clear temporary view coordinates so nodes use score-based positioning
+      setNodes(prev => {
+        const updatedNodes = prev.map(node => {
+          const updatedNode = { ...node };
+          delete updatedNode._tmpViewX;
+          delete updatedNode._tmpViewY;
+          return updatedNode;
+        });
+
+        return updatedNodes;
+      });
+
+      // Clear ALL drag targets at evaluation end, then regenerate only the most recent one
+      console.log('[DEBUG] Clearing ALL drag targets at evaluation end');
+      setUserDragTargets({});
+
+      // Find the most recently modified node (highest timestamp)
+      let mostRecentDragTarget = null;
+      let mostRecentNodeId = null;
+      let mostRecentTimestamp = 0;
+
+      setNodes(currentNodes => {
+        // First pass: find the most recent drag target
+        currentNodes.forEach(node => {
+          if (node.userDragTarget && node.userDragTarget.timestamp > mostRecentTimestamp) {
+            mostRecentTimestamp = node.userDragTarget.timestamp;
+            mostRecentDragTarget = node.userDragTarget;
+            mostRecentNodeId = node.id;
+          }
+        });
+
+        console.log('[DEBUG] Most recent drag target:', mostRecentNodeId, 'timestamp:', mostRecentTimestamp);
+
+        // Second pass: clear ALL userDragTarget from ALL nodes
+        const clearedNodes = currentNodes.map(node => {
+          if (node.userDragTarget) {
+            const cleanedNode = { ...node };
+            delete cleanedNode.userDragTarget;
+            console.log('[DEBUG] Cleared userDragTarget from node:', node.id);
+            return cleanedNode;
+          }
+          return node;
+        });
+
+        return clearedNodes;
+      });
+
+      // Regenerate drag target only for the most recently modified node
+      setTimeout(() => {
+        if (mostRecentDragTarget && mostRecentNodeId) {
+          console.log('[DEBUG] Restoring drag target only for most recent node:', mostRecentNodeId);
+
+          // Restore userDragTarget only to the most recent node
+          setNodes(currentNodes => currentNodes.map(node => {
+            if (node.id === mostRecentNodeId) {
+              console.log('[DEBUG] Restoring userDragTarget for node:', node.id);
+              return {
+                ...node,
+                userDragTarget: mostRecentDragTarget
+              };
+            }
+            return node;
+          }));
+
+          // Set visualization for only this node
+          setUserDragTargets({
+            [mostRecentNodeId]: mostRecentDragTarget
+          });
+        } else {
+          console.log('[DEBUG] No recent drag targets to restore');
+        }
+      }, 50);
     }
   };
 
+  const evaluateIdeasRef = useRef(null);
+  evaluateIdeasRef.current = evaluateIdeas;
+
+  // New: re-evaluate all ideas handler
+  const reEvaluateAll = () => {
+    if (isEvaluating || nodes.length === 0) return;
+    evaluateIdeasRef.current(nodes, { mode: 'full', allowAutoCenter: true });
+  };
+
   // ============== 段落4：分析意图提交处理 (handleAnalysisIntentSubmit) ==============
   const handleAnalysisIntentSubmit = async (e) => {
     e.preventDefault();
@@ -1115,10 +2078,50 @@ const TreePlotVisualization = () => {
       return;
     }
 
+    // 保存 intent 并打开下拉面板让用户选择维度
+    setCurrentIntent(analysisIntent);
+    setShowDimensionPanel(true);
+  };
+
+  const parseIdeaGenerationResponse = (responseText, sourceLabel) => {
+    let data;
+    try {
+      data = JSON.parse(responseText);
+    } catch (err) {
+      throw new Error(`Invalid ${sourceLabel} response: expected JSON`);
+    }
+
+    if (!data || typeof data !== 'object') {
+      throw new Error(`Invalid ${sourceLabel} response: expected object payload`);
+    }
+
+    if (data.error) {
+      throw new Error(data.error);
+    }
+
+    if (!Array.isArray(data.ideas) || data.ideas.length === 0) {
+      throw new Error(`Invalid ${sourceLabel} response: ideas must be a non-empty array`);
+    }
+
+    const missingIdeaId = data.ideas.some((idea) => (
+      !idea || typeof idea !== 'object' || typeof idea.id !== 'string' || !idea.id.trim()
+    ));
+    if (missingIdeaId) {
+      throw new Error(`Invalid ${sourceLabel} response: missing idea id`);
+    }
+
+    return data;
+  };
+
+  // ============== 新增：维度确认后生成 Ideas ==============
+  const handleDimensionConfirm = async (dimensionPairs) => {
+    setSelectedDimensionPairs(dimensionPairs);
+    setCurrentFaceIndex(0); // Reset to front face
+    setShowDimensionPanel(false); // 关闭面板
+
     setIsGenerating(true);
     setOperationStatus('Generating initial ideas...');
     setError(null);
-    setShowLogs(true); // Show logs when starting idea generation
 
     try {
       // Call Flask backend
@@ -1130,7 +2133,8 @@ const TreePlotVisualization = () => {
         credentials: 'include',
         body: JSON.stringify({
           intent: analysisIntent,
-          num_ideas: 3
+          num_ideas: 1,
+          dimension_pairs: dimensionPairs // 传递维度对
         }),
       });
       console.log("Response status:", response.status);
@@ -1141,57 +2145,77 @@ const TreePlotVisualization = () => {
         throw new Error(`Failed to generate ideas: ${errorText}`);
       }
 
-      const data = await response.json();
+      // Wait for the full response as text (handles heartbeat stream)
+      const responseText = await response.text();
+
+      const data = parseIdeaGenerationResponse(responseText, 'generate-initial');
       console.log("Received data from API:", data);
 
       const ideas = data.ideas;
-
-      // Create IDs using the existing method
-      const ideasWithId = ideas.map((idea) => {
-        const id = generateUniqueId();
-        return { id, ...idea };
-      });
-
+      const ideasWithId = ideas; // backend already provides hierarchical ids
       const updatedIdeasList = [...ideasList, ...ideasWithId];
       setIdeasList(updatedIdeasList);
 
-      // Root node
-      const rootNode = {
-        id: 'root',
-        level: 0,
-        title: analysisIntent,
-        content: analysisIntent,
-        type: 'root',
-        x: 0,
-        y: 0,
-      };
-
-      // Child nodes
-      const childSpacing = 200;
-      const totalWidth = (ideas.length - 1) * childSpacing;
-      const startX = rootNode.x - totalWidth / 2;
-
-      const childNodes = ideasWithId.map((hyp, i) => ({
-        id: hyp.id,
-        level: 1,
-        title: hyp.title.trim(),
-        content: hyp.content.trim(),
-        type: 'complex',
-        x: startX + i * childSpacing,
-        y: rootNode.y + 150,
-        originalData: hyp.originalData, // Preserve original data for coder/writer
-      }));
-
-      const newNodes = [rootNode, ...childNodes];
-      const newLinks = childNodes.map((nd) => ({ source: rootNode.id, target: nd.id }));
-      setNodes(newNodes);
-      setLinks(newLinks);
+      // Determine if tree already exists (root already set up)
+      const treeAlreadyExists = nodes.some(n => n.id === 'root');
+
+      if (!treeAlreadyExists) {
+        // First idea: create root node + first child
+        const rootNode = {
+          id: 'root',
+          level: 0,
+          title: analysisIntent,
+          content: analysisIntent,
+          type: 'root',
+          x: 0,
+          y: 0,
+        };
+
+        const childNodes = ideasWithId.map((hyp, i) => ({
+          id: hyp.id,
+          level: 1,
+          title: hyp.title.trim(),
+          content: hyp.content.trim(),
+          type: 'complex',
+          x: i * 200,
+          y: 150,
+          originalData: hyp.originalData,
+          problemHighlights: hyp.problemHighlights || hyp.originalData?.problem_highlights || []
+        }));
+
+        setNodes([rootNode, ...childNodes]);
+        setLinks(childNodes.map((nd) => ({ source: 'root', target: nd.id })));
+      } else {
+        // Subsequent ideas: add new child nodes connected to root
+        const existingRootX = nodes.find(n => n.id === 'root')?.x ?? 0;
+        const existingLevel1 = nodes.filter(n => n.level === 1);
+        const nextX = existingLevel1.length > 0
+          ? Math.max(...existingLevel1.map(n => n.x || 0)) + 200
+          : existingRootX;
+
+        const newChildNodes = ideasWithId.map((hyp, i) => ({
+          id: hyp.id,
+          level: 1,
+          title: hyp.title.trim(),
+          content: hyp.content.trim(),
+          type: 'complex',
+          x: nextX + i * 200,
+          y: 150,
+          originalData: hyp.originalData,
+          problemHighlights: hyp.problemHighlights || hyp.originalData?.problem_highlights || []
+        }));
+
+        setNodes(prev => [...prev, ...newChildNodes]);
+        setLinks(prev => [
+          ...prev,
+          ...newChildNodes.map(nd => ({ source: 'root', target: nd.id }))
+        ]);
+      }
 
-      setAnalysisIntent('');
       setIsAnalysisSubmitted(true);
 
-      // 评估
-      await evaluateIdeas(updatedIdeasList);
+      // Incremental evaluation: only score the new idea
+      await evaluateIdeas(updatedIdeasList, { mode: 'incremental', allowAutoCenter: true, dimensionPairs });
       setIsGenerating(false);
       setOperationStatus('');
     } catch (err) {
@@ -1203,12 +2227,12 @@ const TreePlotVisualization = () => {
   };
 
   // ============== 段落5：生成子节点 (generateChildNodes) ==============
-  const generateChildNodes = async () => {
-    if (!selectedNode) return;
+  const generateChildNodes = async (overrideNode) => {
+    const activeNode = overrideNode || selectedNode;
+    if (!activeNode) return;
     setIsGenerating(true);
     setOperationStatus('Generating child ideas...');
     setError(null);
-    setShowLogs(true); // Show logs when generating child ideas
 
     try {
       const response = await fetch('/api/generate-children', {
@@ -1218,7 +2242,8 @@ const TreePlotVisualization = () => {
         },
         credentials: 'include',
         body: JSON.stringify({
-          parent_content: selectedNode.content,
+          parent_content: activeNode.content,
+          parent_id: activeNode.id,
           context: userInput
         }),
       });
@@ -1227,39 +2252,44 @@ const TreePlotVisualization = () => {
         throw new Error('Failed to generate child ideas');
       }
 
-      const data = await response.json();
-      const ideas = data.ideas;
-
-      const newIdeasWithId = ideas.map((hyp) => {
-        const id = generateUniqueId();
-        return { id, ...hyp };
-      });
+      // Wait for the full response as text (handles heartbeat stream)
+      const responseText = await response.text();
 
+      const data = parseIdeaGenerationResponse(responseText, 'generate-children');
+      const ideas = data.ideas;
+      const newIdeasWithId = ideas; // backend already supplied hierarchical ids
       const updatedIdeasList = [...ideasList, ...newIdeasWithId];
       setIdeasList(updatedIdeasList);
 
       // 布局
       const childSpacing = 200;
       const totalWidth = (ideas.length - 1) * childSpacing;
-      const startX = selectedNode.x - totalWidth / 2;
+      const startX = activeNode.x - totalWidth / 2;
 
       const newNodes = newIdeasWithId.map((hyp, i) => ({
         id: hyp.id,
-        level: selectedNode.level + 1,
+        level: activeNode.level + 1,
         title: hyp.title.trim(),
         content: hyp.content.trim(),
         type: 'complex',
         x: startX + i * childSpacing + Math.random() * 20 - 10,
-        y: selectedNode.y + 150 + Math.random() * 20 - 10,
-        originalData: hyp.originalData, // Preserve original data for coder/writer
+        y: activeNode.y + 150 + Math.random() * 20 - 10,
+        originalData: hyp.originalData,
+        problemHighlights: hyp.problemHighlights || hyp.originalData?.problem_highlights || []
       }));
 
-      const newLinks = newNodes.map((nd) => ({ source: selectedNode.id, target: nd.id, isParentChild: true }));
-      setNodes((prev) => [...prev, ...newNodes]);
+      const newLinks = newNodes.map((nd) => ({ source: activeNode.id, target: nd.id }));
+      setNodes((prev) => {
+        const existingIds = new Set(prev.map(n => n.id));
+        const uniqueNewNodes = newNodes.filter(n => !existingIds.has(n.id));
+        return [...prev, ...uniqueNewNodes];
+      });
       setLinks((prev) => [...prev, ...newLinks]);
 
-      // 评估
-      await evaluateIdeas(updatedIdeasList);
+      // Track child nodes generation will happen after evaluation
+
+      // 评估 - 传递维度对
+      await evaluateIdeas(updatedIdeasList, { allowAutoCenter: true });
 
       setIsGenerating(false);
       setOperationStatus('');
@@ -1273,22 +2303,35 @@ const TreePlotVisualization = () => {
   };
 
   // ============== 段落6：根据拖拽修改假设 (modifyIdeaBasedOnModifications) ==============
-  const modifyIdeaBasedOnModifications = async (
-    originalNode,
-    ghostNode,
-    modifications,
-    behindNode
-  ) => {
-    setError(null);
+  const modifyIdeaBasedOnModifications = async (originalNode, ghostNode, modifications, behindNode) => {
+    const deepClone = (value) => {
+      if (value === null || value === undefined) return value;
+      try {
+        return JSON.parse(JSON.stringify(value));
+      } catch (err) {
+        console.warn('[WARN] Failed to deep clone value, returning original reference.', err);
+        return value;
+      }
+    };
+    console.log('[DEBUG] modifyIdeaBasedOnModifications called with:', {
+      originalNodeId: originalNode?.id,
+      ghostNodeId: ghostNode?.id,
+      modifications,
+      behindNodeId: behindNode?.id
+    });
 
+    setError(null);
+    setIsGenerating(true);
+    setOperationStatus('Modifying idea...');
     try {
-      setIsGenerating(true);
-      setOperationStatus('Modifying idea...');
+      if (!selectedDimensionPairs || selectedDimensionPairs.length < 3) {
+        throw new Error('Please select 3 dimension pairs before modifying ideas.');
+      }
+
+      console.log('[DEBUG] About to call /api/modify...');
       const response = await fetch('/api/modify', {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         credentials: 'include',
         body: JSON.stringify({
           original_idea: originalNode.originalData || {
@@ -1296,149 +2339,203 @@ const TreePlotVisualization = () => {
             title: originalNode.title,
             content: originalNode.content
           },
-          modifications: modifications,
+          original_id: originalNode.id,
+          modifications,
           behind_idea: behindNode ? (behindNode.originalData || {
             id: behindNode.id,
             title: behindNode.title,
             content: behindNode.content
-          }) : null
-        }),
+          }) : null,
+          dimension_pairs: selectedDimensionPairs
+        })
       });
+      console.log('[DEBUG] /api/modify response status:', response.status);
+      if (!response.ok) throw new Error('Failed to modify idea');
+      const responseText = await response.text();
+      console.log('[DEBUG] /api/modify response received, parsing...');
+      const data = JSON.parse(responseText);
+      if (data.error) throw new Error(data.error);
+      console.log('[DEBUG] /api/modify successful, data:', { id: data.id, title: data.title, scores: data.scores });
+
+      // Update ghost node to show as modified
+      const oldGhostId = ghostNode.id;
+      const backendId = data.id || (data.originalData && data.originalData.id) || oldGhostId;
+      const resolvedLevel = Number.isFinite(originalNode.level)
+        ? originalNode.level + 1
+        : (Number.isFinite(ghostNode.level) ? ghostNode.level : 1);
+
+      // Create a new updated ghost node object (don't mutate existing object)
+      const originalSnapshot = originalNode ? {
+        id: originalNode.id,
+        title: originalNode.title,
+        content: originalNode.content,
+        type: originalNode.type,
+        level: originalNode.level,
+        scores: deepClone(originalNode.scores),
+        dimension1Score: originalNode.dimension1Score,
+        dimension2Score: originalNode.dimension2Score,
+        originalData: deepClone(originalNode.originalData)
+      } : null;
+
+      const updatedGhostNode = {
+        ...ghostNode,
+        id: backendId,
+        title: data.title,
+        content: data.content,
+        problemHighlights: data.problemHighlights || data.originalData?.problem_highlights || ghostNode.problemHighlights || originalNode?.problemHighlights || [],
+        isModified: true,
+        previousState: originalSnapshot,
+        isGhost: false, // Show the modified node
+        isPendingEvaluation: false, // Has been evaluated by backend
+        level: resolvedLevel, // Keep it directly under the original node
+        isNewlyGenerated: true, // Always highlight modified result
+        // Apply scores from backend (already evaluated by modify_idea)
+        scores: data.scores || ghostNode.scores || {},
+        dimension1Score: data.dimension1Score ?? ghostNode.dimension1Score,
+        dimension2Score: data.dimension2Score ?? ghostNode.dimension2Score,
+        originalData: {
+          id: backendId,
+          ...(data.originalData || {}),
+          Title: data.title,
+          Name: data.title,
+          content: data.content
+        }
+      };
 
-      if (!response.ok) {
-        throw new Error('Failed to modify idea');
-      }
-
-      const data = await response.json();
+      const modifiedSnapshot = {
+        id: backendId,
+        title: updatedGhostNode.title,
+        content: updatedGhostNode.content,
+        type: updatedGhostNode.type,
+        level: updatedGhostNode.level,
+        scores: deepClone(updatedGhostNode.scores),
+        dimension1Score: updatedGhostNode.dimension1Score,
+        dimension2Score: updatedGhostNode.dimension2Score,
+        originalData: deepClone(updatedGhostNode.originalData)
+      };
 
-      ghostNode.content = data.content;
-      ghostNode.title = data.title;
-      ghostNode.isModified = true;
-      ghostNode.previousState = originalNode;
-      ghostNode.isGhost = false;
-      ghostNode.originalData = data.originalData; // Preserve original data for coder/writer
+      // Preserve user drag target for visualization
+      const originalNodeId = originalNode.id;
+      console.log('[DEBUG] Checking userDragTargets for originalNodeId:', originalNodeId, 'oldGhostId:', oldGhostId, userDragTargets);
+
+      if (userDragTargets[originalNodeId]) {
+        console.log('[DEBUG] Found userDragTarget for', originalNodeId, ':', userDragTargets[originalNodeId]);
+        updatedGhostNode.userDragTarget = userDragTargets[originalNodeId];
+
+        // Update userDragTargets key to use new backend ID
+        setUserDragTargets(prev => {
+          const newTargets = { ...prev };
+          newTargets[backendId] = newTargets[originalNodeId];
+          delete newTargets[originalNodeId];
+          console.log('[DEBUG] Updated userDragTargets keys:', Object.keys(newTargets));
+          return newTargets;
+        });
+        console.log('[DEBUG] Assigned userDragTarget to updatedGhostNode:', updatedGhostNode.userDragTarget);
+      } else {
+        console.log('[DEBUG] No userDragTarget found for originalNodeId:', originalNodeId);
+        console.log('[DEBUG] Available userDragTargets keys:', Object.keys(userDragTargets));
+      }
 
+      // Create newIdea with scores already applied (from backend evaluation)
       const newIdea = {
-        id: ghostNode.id,
-        title: ghostNode.title,
-        content: data.content,
+        id: updatedGhostNode.id,
+        title: updatedGhostNode.title,
+        content: updatedGhostNode.content,
+        problemHighlights: updatedGhostNode.problemHighlights || [],
+        originalData: updatedGhostNode.originalData,
+        // Include scores so it won't be re-evaluated
+        scores: updatedGhostNode.scores,
+        dimension1Score: updatedGhostNode.dimension1Score,
+        dimension2Score: updatedGhostNode.dimension2Score
       };
-      setIdeasList((prevList) => [...prevList, newIdea]);
-
-      setNodes((prevNodes) => prevNodes.map((n) => (n.id === ghostNode.id ? ghostNode : n)));
-      setIsGenerating(false);
-      setIsEvaluating(true);
 
-      await evaluateIdeas([...ideasList, newIdea]);
-    } catch (err) {
-      console.error('Error modifying idea:', err);
-      setError(err.message);
-      setIsGenerating(false);
-      setOperationStatus('');
-    } finally {
-      setIsGenerating(false);
-      setIsEvaluating(false);
-      setOperationStatus('');
-    }
-  };
+      // Replace ghost node entry and relink edges
+      console.log('[DEBUG] Replacing ghost node:', { oldGhostId, newId: updatedGhostNode.id, isGhost: updatedGhostNode.isGhost, isModified: updatedGhostNode.isModified, scores: updatedGhostNode.scores });
+      setNodes(prev => {
+        let replaced = false;
+        const updated = prev.map(n => {
+          if (n.id === oldGhostId) {
+            replaced = true;
+            return updatedGhostNode;
+          }
+          if (n.id === originalNode.id) {
+            return {
+              ...n,
+              modifiedState: modifiedSnapshot
+            };
+          }
+          return n;
+        });
 
-  const mergeIdeas = async (nodeA, nodeB) => {
-    /* ------- ① 先打动画标记：后节点放大 ------- */
-    setNodes((prev) =>
-      prev.map((n) => {
-        if (n.id === nodeA.id) {
-          // Make nodeA disappear
-          return { ...n, evaluationOpacity: 0 };
-        } else if (n.id === nodeB.id) {
-          // Make nodeB bigger
-          return { ...n, isBeingMerged: true };
+        if (!replaced) {
+          console.warn('[WARN] Ghost node missing during modify replacement, appending modified node directly:', oldGhostId, '→', updatedGhostNode.id);
+          return [...updated, updatedGhostNode];
         }
-        return n;
-      })
-    );
 
-    setIsGenerating(true);
-    setOperationStatus('Merging ideas...');
-    setError(null);
-    try {
-      /* ---------- ② 调用 Flask API ---------- */
-      const response = await fetch('/api/merge', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        credentials: 'include',
-        body: JSON.stringify({
-          idea_a: nodeA.originalData || {
-            id: nodeA.id,
-            title: nodeA.title,
-            content: nodeA.content
-          },
-          idea_b: nodeB.originalData || {
-            id: nodeB.id,
-            title: nodeB.title,
-            content: nodeB.content
+        console.log('[DEBUG] Nodes after replacement:', updated.map(n => ({ id: n.id, isGhost: n.isGhost, isModified: n.isModified, scores: n.scores })));
+        return updated;
+      });
+      setLinks(prev => {
+        let rewiredParentLink = false;
+        const updatedLinks = prev.map(l => {
+          if (l.source === oldGhostId) {
+            return { ...l, source: backendId };
           }
-        }),
+          if (l.target === oldGhostId) {
+            rewiredParentLink = true;
+            return { ...l, target: backendId };
+          }
+          return l;
+        });
+
+        if (!rewiredParentLink && originalNode?.id) {
+          console.warn('[WARN] Missing parent link for modified node, creating fallback link:', originalNode.id, '→', backendId);
+          updatedLinks.push({ source: originalNode.id, target: backendId });
+        }
+
+        return updatedLinks;
       });
 
-      if (!response.ok) {
-        throw new Error('Failed to merge ideas');
-      }
+      // Add to idea list for evaluation - use current ideasList + newIdea directly
+      console.log('[DEBUG] Starting modify evaluation process...');
+      console.log('[DEBUG] New idea for evaluation:', { id: newIdea.id, title: newIdea.title, hasOriginalData: !!newIdea.originalData });
+      console.log('[DEBUG] Current ideas list count:', ideasList.length);
 
-      const data = await response.json();
+      const updatedIdeasList = [...ideasList, newIdea];
+      console.log('[DEBUG] Updated ideas count:', updatedIdeasList.length);
+      console.log('[DEBUG] Updated ideas IDs:', updatedIdeasList.map(i => i.id));
 
-      /* ---------- ③ 生成新节点（深红）并连线 ---------- */
-      const newId = generateUniqueId();
-      const newIdea = {
-        id: newId,
-        title: data.title,
-        content: data.content
-      };
-      const newNode = {
-        id: newId,
-        level: Math.min(nodeA.level, nodeB.level) + 1,
-        title: data.title.trim(),
-        content: data.content.trim(),
-        type: 'complex',
-        x: (nodeA.x + nodeB.x) / 2,
-        y: (nodeA.y + nodeB.y) / 2,
-        isMergedResult: true,
-        originalData: data.originalData, // Preserve original data for coder/writer
-      };
+      setIdeasList(updatedIdeasList);
 
-      setIdeasList((p) => [...p, newIdea]);
-      // Animation Step 2: Make nodeA reappear and nodeB normal size again
-      setNodes((prev) => [
-        ...prev.map((n) => {
-          if (n.id === nodeA.id) {
-            // Make nodeA reappear
-            return { ...n, evaluationOpacity: 1 };
-          } else if (n.id === nodeB.id) {
-            // Reset nodeB to normal size
-            return { ...n, isBeingMerged: false };
-          }
-          return n;
-        }),
-        newNode, // Add the new merged node
-      ]);
-      setLinks((prev) => [
-        ...prev,
-        { source: newId, target: nodeA.id },
-        { source: newId, target: nodeB.id },
-      ]);
+      // Check if there are other ideas that need evaluation
+      const ideasNeedingEval = getIdeasNeedingEvaluation(updatedIdeasList);
+      console.log('[DEBUG] Ideas needing evaluation:', ideasNeedingEval);
 
-      setMergeTargetId(null);
-      setIsGenerating(false);
+      if (ideasNeedingEval.length > 0) {
+        setOperationStatus('Evaluating remaining ideas...');
+        console.log('[DEBUG] About to call evaluateIdeas for remaining ideas...');
+
+        try {
+          // Use the updated list for evaluation
+          await evaluateIdeas(updatedIdeasList, { mode: 'incremental' });
+          console.log('[DEBUG] Evaluation completed successfully');
+        } catch (evalError) {
+          console.error('[DEBUG] Evaluation failed:', evalError);
+          throw evalError;
+        }
+      } else {
+        console.log('[DEBUG] All ideas already have scores, skipping evaluation');
+      }
+
+      // Node will be revealed automatically by evaluation when scores are applied
       setOperationStatus('');
-      setIsEvaluating(true);
-      await evaluateIdeas([...ideasList, newIdea]);
     } catch (err) {
-      console.error('[merge] Error merging ideas:', err);
+      console.error('Error modifying idea:', err);
       setError(err.message);
+      // Clear drag visual state on error
+      setDragVisualState(null);
     } finally {
       setIsGenerating(false);
-      setOperationStatus('');
     }
   };
 
@@ -1446,39 +2543,260 @@ const TreePlotVisualization = () => {
   // Note: Hover events are now handled by unified tracker to prevent duplicates
 
   const zoomTransformRef = useRef(null);
+  // Separate zoom state for evaluation (scatter) view so tree zoom persists independently
+  const evaluationZoomTransformRef = useRef(d3.zoomIdentity);
+  const layoutNodesRef = useRef([]);
+
+  // Merge functionality handlers
+  const handleMergeConfirm = useCallback(async (overrideFirst = null, overrideSecond = null) => {
+    const firstNode = overrideFirst || mergeMode.firstNode;
+    const secondNode = overrideSecond || mergeMode.secondNode;
+
+    if (firstNode && secondNode) {
+      // Store references before clearing merge mode
+
+      // Check if either node is a fragment
+      const isFirstFragment = firstNode.type === 'fragment';
+      const isSecondFragment = secondNode.type === 'fragment';
+
+      if (!mergeAnimationState) {
+        const ghostPos =
+          getNodeCenterRelativeToContainer(firstNode.id) ||
+          getNodeCenterRelativeToContainer(secondNode.id);
+        setMergeAnimationState({
+          sourceId: firstNode.id,
+          targetId: secondNode.id,
+          ghostPosition: ghostPos
+        });
+      }
 
-  // Cleanup is handled by D3's selectAll('*').remove() in the main useEffect
+      // Immediately hide the merge dialog and dashed circles
+      setMergeMode({
+        active: false,
+        firstNode: null,
+        secondNode: null,
+        cursorPosition: { x: 0, y: 0 },
+        showDialog: false
+      });
 
-  // ============== 段落8：D3 渲染逻辑 useEffect ==============
-  useEffect(() => {
-    if (!svgRef.current || currentView === 'home_view') return;
+      setIsGenerating(true);
+      setOperationStatus('Merging ideas...');
+      setError(null);
 
-    const width = 800;
-    const height = 600;
+      try {
+        // Call backend merge API
+        const response = await fetch('/api/merge', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          credentials: 'include',
+          body: JSON.stringify({
+            idea_a: firstNode.originalData || {
+              id: firstNode.id,
+              title: firstNode.title,
+              content: firstNode.content
+            },
+            idea_b: secondNode.originalData || {
+              id: secondNode.id,
+              title: secondNode.title,
+              content: secondNode.content
+            },
+            idea_a_id: firstNode.id,
+            idea_b_id: secondNode.id
+          }),
+        });
 
-    // 清空 SVG
-    d3.select(svgRef.current).selectAll('*').remove();
+        if (!response.ok) {
+          throw new Error('Failed to merge ideas');
+        }
 
-    if (currentView === 'exploration') {
-      /* ------------------- Exploration (Tree) View ------------------- */
-      const svg = d3.select(svgRef.current).attr('width', width).attr('height', height);
+        // Wait for the full response as text (handles heartbeat stream)
+        const responseText = await response.text();
 
-      /* 背景卡片 */
-      svg
-        .append('rect')
-        .attr('x', 2)
-        .attr('y', 2)
-        .attr('width', width - 4)
-        .attr('height', height - 4)
-        .attr('rx', 8)
-        .attr('ry', 8)
-        .style('fill', '#fff')
-        .style('stroke', '#e5e7eb')
-        .style('stroke-width', 1)
-        .style('filter', 'drop-shadow(0 4px 6px rgba(0,0,0,0.1))');
+        // Parse the text into JSON, ignoring heartbeats
+        const data = JSON.parse(responseText);
 
-      // Create a group for zooming and panning
-      const zoomGroup = svg.append('g').attr('class', 'zoom-group');
+        if (data.error) {
+          throw new Error(data.error);
+        }
+
+        // Create merged node with AI-generated content
+        const mergedNodeId = data.id || createMergeId(firstNode.id, secondNode.id);
+        const mergedOriginalData = normalizeIdeaOriginalData(
+          data.originalData,
+          {
+            id: mergedNodeId,
+            title: data.title,
+            content: data.content,
+            problemHighlights: data.problemHighlights
+          }
+        );
+        const mergedNode = {
+          id: mergedNodeId,
+          title: data.title.trim(),
+          content: data.content.trim(),
+          level: Math.max(firstNode.level || 0, secondNode.level || 0) + 1,
+          type: 'complex',
+          isMergedResult: true,
+          parentIds: [firstNode.id, secondNode.id],
+          mergeTimestamp: Date.now(),
+          problemHighlights: data.problemHighlights || data.originalData?.problem_highlights || [],
+          originalData: mergedOriginalData,
+          x: (firstNode.x || 0 + secondNode.x || 0) / 2,
+          y: Math.max(firstNode.y || 0, secondNode.y || 0) + 150
+        };
+
+        // Add the merged node to the nodes list and reset parent node visuals
+        setNodes(prevNodes => {
+          const cleaned = prevNodes.map(n => {
+            if (n.id === firstNode.id || n.id === secondNode.id) {
+              const updated = { ...n };
+              delete updated.evaluationOpacity;
+              delete updated.isBeingMerged;
+              return updated;
+            }
+            return n;
+          });
+          return [...cleaned, mergedNode];
+        });
+
+        // Delete fragment nodes if they were merged
+        if (isFirstFragment) {
+          setFragmentNodes(prev => prev.filter(f => f.id !== firstNode.id));
+        }
+        if (isSecondFragment) {
+          setFragmentNodes(prev => prev.filter(f => f.id !== secondNode.id));
+        }
+
+        // Add to ideas list for evaluation (same structure as original ideas)
+        const newIdea = {
+          id: mergedNodeId,
+          title: data.title,
+          content: data.content,
+          problemHighlights: data.problemHighlights || data.originalData?.problem_highlights || [],
+          originalData: mergedOriginalData
+        };
+        setIdeasList(prevIdeas => [...prevIdeas, newIdea]);
+
+
+        // Create links from both parent nodes to the merged node
+        const newLinks = [
+          {
+            source: firstNode.id,
+            target: mergedNode.id,
+            type: 'merge'
+          },
+          {
+            source: secondNode.id,
+            target: mergedNode.id,
+            type: 'merge'
+          }
+        ];
+        setLinks(prevLinks => [...prevLinks, ...newLinks]);
+
+        // Track the merge action
+
+        // Select the new merged node
+        setSelectedNode(mergedNode);
+
+        // Evaluate the new merged idea with full context
+        const updatedIdeasList = [...ideasList, newIdea];
+        setIdeasList(updatedIdeasList);
+        await evaluateIdeasRef.current(updatedIdeasList, { mode: 'incremental' });
+
+      } catch (err) {
+        console.error('Error merging ideas:', err);
+        setError(err.message);
+      } finally {
+        setIsGenerating(false);
+        setOperationStatus('');
+        setMergeAnimationState(null);
+
+        // Reset merge animation states for nodes
+        setNodes((prev) =>
+          prev.map((n) => {
+            if (n.evaluationOpacity === 0 || n.isBeingMerged) {
+              const updated = { ...n };
+              delete updated.evaluationOpacity;
+              delete updated.isBeingMerged;
+              return updated;
+            }
+            return n;
+          })
+        );
+
+        // Reset merge animation states for fragments (in case of error)
+        setFragmentNodes((prev) =>
+          prev.map((f) => {
+            if (f.evaluationOpacity === 0 || f.isPendingMerge) {
+              const updated = { ...f };
+              delete updated.evaluationOpacity;
+              delete updated.isPendingMerge;
+              return updated;
+            }
+            return f;
+          })
+        );
+
+        setMergeTargetId(null);
+      }
+
+      // Merge mode already reset at the beginning
+    }
+  }, [createMergeId, getNodeCenterRelativeToContainer, ideasList, mergeAnimationState, mergeMode, normalizeIdeaOriginalData]);
+
+  const handleMergeCancel = useCallback(() => {
+    // Track the cancel action
+    if (mergeMode.firstNode && mergeMode.secondNode) {
+    }
+
+    // Reset merge mode
+    setMergeMode({
+      active: false,
+      firstNode: null,
+      secondNode: null,
+      cursorPosition: { x: 0, y: 0 },
+      showDialog: false
+    });
+  }, [mergeMode]);
+
+  // Cleanup is handled by D3's selectAll('*').remove() in the main useEffect
+
+  // ============== 段落8：D3 渲染逻辑 useEffect ==============
+  useEffect(() => {
+    if (!svgRef.current || currentView === 'home_view') return;
+
+    const width = 800;
+    const height = 600;
+
+    // 清空 SVG and remove all event listeners to prevent duplicates
+    const svg = d3.select(svgRef.current);
+    svg.selectAll('*').remove();
+    svg.on('.tree-tracking', null); // Remove all tree-tracking events
+    svg.on('.scatter-tracking', null); // Remove all scatter-tracking events
+    svg.on('.tree-merge', null); // Remove tree merge events
+
+    if (currentView === 'exploration') {
+      /* ------------------- Exploration (Tree) View ------------------- */
+      const svg = d3.select(svgRef.current).attr('width', width).attr('height', height);
+
+      /* 背景卡片 */
+      svg
+        .append('rect')
+        .attr('x', 2)
+        .attr('y', 2)
+        .attr('width', width - 4)
+        .attr('height', height - 4)
+        .attr('rx', 8)
+        .attr('ry', 8)
+        .style('fill', '#fff')
+        .style('stroke', '#e5e7eb')
+        .style('stroke-width', 1)
+        .style('filter', 'drop-shadow(0 4px 6px rgba(0,0,0,0.1))');
+
+      // Create a group for zooming and panning
+      const zoomGroup = svg.append('g').attr('class', 'zoom-group');
 
       // Initial transform to center the tree
       const initialTransform = d3.zoomIdentity.translate(width / 2, 100);
@@ -1488,6 +2806,11 @@ const TreePlotVisualization = () => {
         .scaleExtent([0.3, 3]) // Min and max zoom levels
         .on('zoom', (event) => {
           zoomGroup.attr('transform', event.transform);
+          // Also transform merge UI layer if it exists
+          const mergeUILayer = svg.select('.merge-ui-layer');
+          if (!mergeUILayer.empty()) {
+            mergeUILayer.attr('transform', event.transform);
+          }
           zoomTransformRef.current = event.transform;
         });
 
@@ -1498,6 +2821,25 @@ const TreePlotVisualization = () => {
       const transformToUse = zoomTransformRef.current || initialTransform;
       svg.call(zoom.transform, transformToUse);
 
+      // Add mouse move listener for merge mode cursor tracking
+      svg.on('mousemove.merge', (event) => {
+        if (mergeMode.active && mergeMode.firstNode && !mergeMode.secondNode) {
+          const [x, y] = d3.pointer(event, zoomGroup.node());
+          setMergeMode(prev => ({
+            ...prev,
+            cursorPosition: { x, y }
+          }));
+        }
+      });
+
+      // Add click-outside handler to cancel merge mode
+      svg.on('click.merge-cancel', (event) => {
+        // Check if click was on background (not on a node)
+        if (mergeMode.active && event.target === svg.node()) {
+          handleMergeCancel();
+        }
+      });
+
       // Add invisible rect for better drag interaction
       svg
         .append('rect')
@@ -1541,6 +2883,13 @@ const TreePlotVisualization = () => {
         nodesAtLevel.sort((a, b) => {
           // Get parent X positions for sorting
           const getParentX = (node) => {
+            // Check if this is a custom idea (no parent links)
+            const hasParentLink = links.some(link => link.target === node.id);
+            if (!hasParentLink && node.level === 1) {
+              // Custom ideas without parents should be sorted after regular nodes
+              return 1000; // Large value to put them at the end
+            }
+
             if (node.isMergedResult) {
               // For merged nodes, find average of parent positions
               const parentLinks = links.filter(link => link.source === node.id);
@@ -1575,7 +2924,9 @@ const TreePlotVisualization = () => {
               return aIsModified ? 1 : -1;
             }
 
-            return a.id.localeCompare(b.id);
+            const aId = a.id || '';
+            const bId = b.id || '';
+            return aId.localeCompare(bId);
           }
 
           return aParentX - bParentX;
@@ -1592,8 +2943,16 @@ const TreePlotVisualization = () => {
         });
       });
 
-      /* 连线 */
-      links.forEach((lk) => {
+      // Store layoutNodes in ref for merge UI useEffect
+      layoutNodesRef.current = layoutNodes;
+
+      /* 连线 - filter out links to temporary ghost nodes in tree view */
+      const visibleLinks = links.filter(lk => {
+        const targetNode = layoutNodes.find(n => n.id === lk.target);
+        return !targetNode || !(targetNode.isGhost && !targetNode.isModified);
+      });
+
+      visibleLinks.forEach((lk) => {
         const s = layoutNodes.find((n) => n.id === lk.source);
         const t = layoutNodes.find((n) => n.id === lk.target);
         if (!s || !t) return;
@@ -1607,38 +2966,101 @@ const TreePlotVisualization = () => {
           .style('stroke-width', 2);
       });
 
-      /* 节点 */
+      /* 节点 - filter out only temporary ghost nodes in tree view */
+      const visibleNodes = layoutNodes.filter(node => !(node.isGhost && !node.isModified));
       const nodeG = g
         .selectAll('.node')
-        .data(layoutNodes)
+        .data(visibleNodes)
         .enter()
         .append('g')
         .attr('class', 'node')
         .attr('transform', (d) => `translate(${d.x},${d.y})`);
 
-      // Add event listeners with unique namespaces to prevent duplicates
+      // Add event listeners with unified tracking (no duplicates)
       nodeG
-        .on('mouseenter.exploration-tracking', function (event, d) {
-          // Don't track hover if any node is being dragged or events are suppressed after drag
-          if (!d._dragStarted && !nodes.some(n => n._dragStarted) && !d._suppressEventsAfterDrag) {
+        .on('mouseenter.tree-tracking', function (event, d) {
+          // Don't track hover if any node is being dragged, events are suppressed after drag, just clicked, or in merge mode
+          if (!d._dragStarted && !nodes.some(n => n._dragStarted) && !d._suppressEventsAfterDrag && !d._justClicked && !mergeMode.active) {
+            // Prevent duplicate tracking by checking if this exact same hover was just tracked
+            if (!d._lastHoverTime || Date.now() - d._lastHoverTime > 100) {
+              d._lastHoverTime = Date.now();
+            }
           }
           // UI functionality
           setHoveredNode(d);
-          d3.select(this).raise();
+          // Add hover styling directly to circle only
+          // Note: z-ordering is handled by selectedNode useEffect
+          d3.select(this).select('circle').style('stroke', '#000').style('stroke-width', 4);
         })
-        .on('mouseleave.exploration-tracking', function (event, d) {
-          // Don't track hover if any node is being dragged or events are suppressed after drag
-          if (!d._dragStarted && !nodes.some(n => n._dragStarted) && !d._suppressEventsAfterDrag) {
+        .on('mouseleave.tree-tracking', function (event, d) {
+          // Don't track hover if any node is being dragged, events are suppressed after drag, or in merge mode
+          if (!d._dragStarted && !nodes.some(n => n._dragStarted) && !d._suppressEventsAfterDrag && !mergeMode.active) {
           }
           // UI functionality
           setHoveredNode(null);
+          // Restore original styling to circle only (check if selected)
+          const isSelected = selectedNode?.id === d.id;
+          d3.select(this).select('circle').style('stroke', isSelected ? '#000' : '#fff').style('stroke-width', isSelected ? 4 : 2);
         })
-        .on('click.tracking', (_, d) => {
+        .on('click.tree-tracking', (_, d) => {
           // Don't track click if events are suppressed after drag
           if (!d._suppressEventsAfterDrag) {
+            // Set flag to prevent hover tracking immediately after click
+            d._justClicked = true;
+            setTimeout(() => { d._justClicked = false; }, 200);
+
+            // Clear any existing single click timeout
+            if (d._singleClickTimeout) {
+              clearTimeout(d._singleClickTimeout);
+              d._singleClickTimeout = null;
+            }
+
+            // Delay single click tracking to distinguish from double click
+            d._singleClickTimeout = setTimeout(() => {
+              d._singleClickTimeout = null;
+            }, 300); // 300ms delay to detect double clicks
           }
           // UI functionality
           setSelectedNode(d);
+        })
+        .on('dblclick.tree-merge', (event, d) => {
+          event.stopPropagation();
+
+          // Cancel any pending single click tracking since this is a double click
+          if (d._singleClickTimeout) {
+            clearTimeout(d._singleClickTimeout);
+            d._singleClickTimeout = null;
+          }
+
+          if (!mergeMode.active) {
+            // First node selected - enter merge mode
+            setMergeMode({
+              active: true,
+              firstNode: d,
+              secondNode: null,
+              cursorPosition: { x: d.x || 0, y: d.y || 0 },
+              showDialog: false
+            });
+
+          } else if (mergeMode.firstNode && mergeMode.firstNode.id !== d.id) {
+            // Second node selected - complete merge selection
+            setMergeMode(prev => ({
+              ...prev,
+              secondNode: d,
+              showDialog: true
+            }));
+
+          } else if (mergeMode.firstNode && mergeMode.firstNode.id === d.id) {
+            // Same node double-clicked - cancel merge mode
+            setMergeMode({
+              active: false,
+              firstNode: null,
+              secondNode: null,
+              cursorPosition: { x: 0, y: 0 },
+              showDialog: false
+            });
+
+          }
         });
 
       nodeG
@@ -1654,10 +3076,10 @@ const TreePlotVisualization = () => {
           return d.isGhost ? 0.5 : 1;
         })
         .style('stroke', (d) =>
-          selectedNode?.id === d.id ? '#000' : hoveredNode?.id === d.id ? '#555' : '#fff'
+          selectedNode?.id === d.id ? '#000' : '#fff'
         )
         .style('stroke-width', (d) =>
-          selectedNode?.id === d.id ? 4 : hoveredNode?.id === d.id ? 3 : 2
+          selectedNode?.id === d.id ? 4 : 2
         )
         .style('cursor', 'pointer');
 
@@ -1667,7 +3089,7 @@ const TreePlotVisualization = () => {
         .style('pointer-events', 'none'); // The label should not capture mouse events
 
       // Add text first to measure it
-      const text = label.append('text')
+      label.append('text')
         .attr('y', -40) // Position above the circle node (radius is 25)
         .attr('text-anchor', 'middle')
         .style('font-family', 'Arial, sans-serif')
@@ -1696,6 +3118,19 @@ const TreePlotVisualization = () => {
         }
       });
 
+      // Create or get persistent merge UI layer
+      let mergeUILayer = svg.select('.merge-ui-layer');
+      if (mergeUILayer.empty()) {
+        mergeUILayer = svg.append('g').attr('class', 'merge-ui-layer');
+      }
+      // Note: We no longer clear merge UI elements here to prevent flickering
+
+      // Apply current zoom transform to merge UI layer
+      if (zoomTransformRef.current) {
+        mergeUILayer.attr('transform', zoomTransformRef.current);
+      }
+
+      // Merge UI is now handled by a separate useEffect to prevent flickering
 
       // Add zoom controls (vertical layout)
       const controls = svg.append('g')
@@ -1713,7 +3148,7 @@ const TreePlotVisualization = () => {
         .style('stroke', '#d1d5db')
         .style('cursor', 'pointer')
         .on('click', () => {
-          svg.transition().call(zoom.scaleBy, 1.3);
+          svg.transition().call(zoom.scaleBy, 1.1);
         });
 
       controls.append('text')
@@ -1736,7 +3171,7 @@ const TreePlotVisualization = () => {
         .style('stroke', '#d1d5db')
         .style('cursor', 'pointer')
         .on('click', () => {
-          svg.transition().call(zoom.scaleBy, 0.7);
+          svg.transition().call(zoom.scaleBy, 0.9);
         });
 
       controls.append('text')
@@ -1772,26 +3207,18 @@ const TreePlotVisualization = () => {
         .style('pointer-events', 'none')
         .text('⟲');
 
-      if (operationStatus && operationStatus.toLowerCase().includes('generating')) {
-        svg
-          .append('rect')
-          .attr('x', 2)
-          .attr('y', 2)
-          .attr('width', width - 4)
-          .attr('height', height - 4)
-          .attr('rx', 8)
-          .attr('ry', 8)
-          .style('fill', 'rgba(255, 255, 255, 0.7)')
-          .style('pointer-events', 'none');
+      if (operationStatus && (operationStatus.toLowerCase().includes('generating') || (hideEvaluationView && (operationStatus.toLowerCase().includes('merging') || operationStatus.toLowerCase().includes('evaluating') || operationStatus.toLowerCase().includes('modifying'))))) {
+        // Add status text at top of plot instead of overlay
         svg
           .append('text')
           .attr('x', width / 2)
-          .attr('y', height / 2)
+          .attr('y', 30)
           .attr('text-anchor', 'middle')
           .attr('dominant-baseline', 'middle')
           .style('font-size', '1.2rem')
           .style('font-weight', '600')
           .style('fill', '#374151')
+          .style('background', 'rgba(255, 255, 255, 0.9)')
           .text(operationStatus);
       }
     } else {
@@ -1812,1895 +3239,2967 @@ const TreePlotVisualization = () => {
         .style('stroke-width', 1)
         .style('filter', 'drop-shadow(0 4px 6px rgba(0,0,0,0.1))');
 
-      /* 坐标轴下拉 */
-      const axisFO = svg
-        .append('foreignObject')
-        .attr('x', width - 210)
-        .attr('y', 20)
-        .attr('width', 200)
-        .attr('height', 60);
-
-      axisFO
-        .append('xhtml:div')
-        .style('display', 'flex')
-        .style('flexDirection', 'column')
-        .style('gap', '6px')
-        .html(`
-          <div>
-            <div style="display:flex;align-items:center;">
-              <label style="margin-right:6px;font-size:0.8rem;color:#374151;">X‑Axis:</label>
-              <select id="xSelect" style="padding:4px;border:1px solid #d1d5db;border-radius:4px;">
-                <option value="noveltyScore">Novelty</option>
-                <option value="feasibilityScore">Feasibility</option>
-                <option value="impactScore">Impact</option>
-              </select>
+      /* 获取当前维度对 */
+      const { xDimension, yDimension } = getCurrentDimensions();
+
+      /* 为每个节点计算并缓存坐标值（兼容新旧系统）*/
+      nodes.forEach(node => {
+        node._evalX = getNodeX(node);
+        node._evalY = getNodeY(node);
+      });
+
+      // 定义获取节点坐标的辅助函数（用于后续代码）
+      const getX = (n) => n._evalX;
+      const getY = (n) => n._evalY;
+
+      /* 显示当前选中的维度对（替代原来的下拉选择器）*/
+      if (xDimension && yDimension) {
+        const dimInfoFO = svg
+          .append('foreignObject')
+          .attr('x', width - 250)
+          .attr('y', 20)
+          .attr('width', 240)
+          .attr('height', 80);
+
+        dimInfoFO
+          .append('xhtml:div')
+          .style('display', 'flex')
+          .style('flexDirection', 'column')
+          .style('gap', '8px')
+          .style('padding', '12px')
+          .style('backgroundColor', '#F9FAFB')
+          .style('border', '1px solid #E5E7EB')
+          .style('borderRadius', '6px')
+          .html(`
+            <div style="font-size:0.75rem;color:#6B7280;font-weight:600;margin-bottom:4px;">Current Dimensions</div>
+            <div style="display:flex;align-items:center;gap:6px;">
+              <span style="font-size:0.7rem;color:#9CA3AF;">X:</span>
+              <span style="font-size:0.75rem;color:#374151;font-weight:500;">${xDimension.dimensionA}</span>
+              <span style="font-size:0.7rem;color:#9CA3AF;">←→</span>
+              <span style="font-size:0.75rem;color:#374151;font-weight:500;">${xDimension.dimensionB}</span>
             </div>
-            <div style="display:flex;align-items:center;margin-top:6px;">
-              <label style="margin-right:6px;font-size:0.8rem;color:#374151;">Y‑Axis:</label>
-              <select id="ySelect" style="padding:4px;border:1px solid #d1d5db;border-radius:4px;">
-                <option value="noveltyScore">Novelty</option>
-                <option value="feasibilityScore">Feasibility</option>
-                <option value="impactScore">Impact</option>
-              </select>
+            <div style="display:flex;align-items:center;gap:6px;">
+              <span style="font-size:0.7rem;color:#9CA3AF;">Y:</span>
+              <span style="font-size:0.75rem;color:#374151;font-weight:500;">${yDimension.dimensionA}</span>
+              <span style="font-size:0.7rem;color:#9CA3AF;">←→</span>
+              <span style="font-size:0.75rem;color:#374151;font-weight:500;">${yDimension.dimensionB}</span>
             </div>
-          </div>`);
-
-      const xSel = document.getElementById('xSelect');
-      const ySel = document.getElementById('ySelect');
-      if (xSel) xSel.value = xAxisMetric;
-      if (ySel) ySel.value = yAxisMetric;
-      if (xSel) xSel.onchange = (e) => {
-        setXAxisMetric(e.target.value);
-      };
-      if (ySel) ySel.onchange = (e) => {
-        setYAxisMetric(e.target.value);
-      };
+          `);
+      }
 
       /* 画布与比例尺 */
       const margin = { top: 100, right: 50, bottom: 80, left: 50 };
       const chartW = width - margin.left - margin.right;
       const chartH = height - margin.top - margin.bottom;
       const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`);
-      const x = d3.scaleLinear().domain([0, 100]).range([0, chartW]);
-      const y = d3.scaleLinear().domain([0, 100]).range([chartH, 0]);
-
-      /* 网格 & 轴 */
-      const xGrid = d3.axisBottom(x).tickValues(d3.range(0, 101, 20)).tickSize(-chartH).tickFormat('');
-      const yGrid = d3.axisLeft(y).tickValues(d3.range(0, 101, 20)).tickSize(-chartW).tickFormat('');
-      g.append('g').attr('class', 'x-grid').attr('transform', `translate(0,${chartH})`).call(xGrid).selectAll('line').style('stroke', '#F1F1F1');
-      g.append('g').attr('class', 'y-grid').call(yGrid).selectAll('line').style('stroke', '#F1F1F1');
-      g.append('g').attr('transform', `translate(0,${chartH})`).call(d3.axisBottom(x));
-      g.append('g').call(d3.axisLeft(y));
-
-      /* 轴标签 */
-      g.append('text')
-        .attr('x', chartW / 2)
-        .attr('y', chartH + 40)
-        .style('text-anchor', 'middle')
-        .style('fill', '#374151')
-        .style('font-size', '1.2rem')
-        .text(xAxisMetric.replace('Score', ''));
-
-      g.append('text')
-        .attr('transform', 'rotate(-90)')
-        .attr('x', -chartH / 2)
-        .attr('y', -30)
-        .style('text-anchor', 'middle')
-        .style('fill', '#374151')
-        .style('font-size', '1.2rem')
-        .text(yAxisMetric.replace('Score', ''));
-      if (!(operationStatus === 'Evaluating ideas...' && isEvaluating)) {
-
-
-        /* 过滤能绘制的节点 */
-        const drawable = nodes.filter(
-          (n) => n[xAxisMetric] !== undefined && n[yAxisMetric] !== undefined
-        );
-
-        /* ---------- 连线：evaluation + merge ---------- */
-        const hasCoords = (n) =>
-          n[xAxisMetric] !== undefined && n[yAxisMetric] !== undefined;
-
-        /* 两类连线
-        ① original → modified   （浅灰 #ccc, 1px）
-        ② mergedResult ↔ originals（深灰 #999, 1.5px） */
-        links.forEach((lk) => {
-          const s = nodes.find((n) => n.id === lk.source);
-          const t = nodes.find((n) => n.id === lk.target);
-          if (!s || !t) return;
-          if (!hasCoords(s) || !hasCoords(t)) return; // 任一端缺坐标则跳过
-
-          const isMergeEdge = s.isMergedResult || t.isMergedResult;
-          g.append('line')
-            .attr('x1', x(s[xAxisMetric]))
-            .attr('y1', y(s[yAxisMetric]))
-            .attr('x2', x(t[xAxisMetric]))
-            .attr('y2', y(t[yAxisMetric]))
-            .style('stroke', isMergeEdge ? '#999' : '#ccc')
-            .style('stroke-width', isMergeEdge ? 1.5 : 1)
-            .style('stroke-dasharray', lk.isParentChild ? '5,5' : 'none');
-        });
-
-        /* 节点绘制 & 拖拽 */
-        const nodeG = g
-          .selectAll('.node-group')
-          .data(drawable, (d) => d.id)
-          .enter()
-          .append('g')
-          .attr('class', 'node-group')
-          .attr('transform', (d) => `translate(${x(d[xAxisMetric])},${y(d[yAxisMetric])})`)
-          .style('cursor', 'pointer');
-
-        // Add event listeners with unique namespaces to prevent duplicates
-        nodeG
-          .on('mouseenter.eval-tracking', (e, d) => {
-            // Don't track hover if any node is being dragged or events are suppressed after drag
-            if (!d._dragStarted && !nodes.some(n => n._dragStarted) && !d._suppressEventsAfterDrag) {
-            }
-            // UI functionality
-            setHoveredNode(d);
-          })
-          .on('mouseleave.eval-tracking', (e, d) => {
-            // Don't track hover if any node is being dragged or events are suppressed after drag
-            if (!d._dragStarted && !nodes.some(n => n._dragStarted) && !d._suppressEventsAfterDrag) {
-            }
-            // UI functionality
-            setHoveredNode(null);
-          })
-          .on('click.eval-tracking', (e, d) => {
-            // Don't track click if events are suppressed after drag
-            if (!d._suppressEventsAfterDrag) {
-            }
-            // UI functionality
-            setSelectedNode(d);
-          })
-          .call(
-            d3
-              .drag()
-              .on('start', function (event, d) {
-                if (isGenerating || isEvaluating) return;
-                // Mark drag start but don't track yet - wait for actual movement
-                d._dragStarted = false;
-                d._dragStartValues = {
-                  x: d[xAxisMetric],
-                  y: d[yAxisMetric],
-                  xAxisMetric: xAxisMetric,
-                  yAxisMetric: yAxisMetric
-                };
-                d3.select(this).raise();
-              })
-              .on('drag', function (event, d) {
-                if (isGenerating || isEvaluating) return;
-
-                // Track drag_start only when actual dragging begins
-                if (!d._dragStarted) {
-                  d._dragStarted = true;
-                }
-
-                const [cx, cy] = d3.pointer(event, g.node());
-                d3.select(this).attr('transform', `translate(${cx},${cy})`);
-                d._tmpX = cx;
-                d._tmpY = cy;
-              })
-              .on('end', function (event, d) {
-                if (isGenerating || isEvaluating) return;
-                const endX = d._tmpX ?? d3.pointer(event, g.node())[0];
-                const endY = d._tmpY ?? d3.pointer(event, g.node())[1];
-
-                // Only track drag_end if dragging actually occurred
-                if (d._dragStarted) {
-                  // Convert screen coordinates back to metric values
-                  const endXValue = x.invert(endX);
-                  const endYValue = y.invert(endY);
-
-
-                  // Set flag to suppress automatic events after drag
-                  d._suppressEventsAfterDrag = true;
-                  // Clear the flag after a short delay to allow manual interactions
-                  setTimeout(() => {
-                    delete d._suppressEventsAfterDrag;
-                  }, 100);
-                }
-
-                // Clean up temporary variables
-                delete d._tmpX;
-                delete d._tmpY;
-                delete d._dragStarted;
-                delete d._dragStartValues;
-
-                /* ---------- ① 重叠检测：触发合并 ---------- */
-                const overlap = drawable.find(
-                  (n) =>
-                    n.id !== d.id &&
-                    Math.hypot(x(n[xAxisMetric]) - endX, y(n[yAxisMetric]) - endY) < 10
-                );
-                if (overlap) {
-                  setMergeTargetId(overlap.id);
-                  setPendingMerge({
-                    nodeA: d,
-                    nodeB: overlap,
-                    screenX: event.sourceEvent.clientX + 10,
-                    screenY: event.sourceEvent.clientY + 10,
-                  });
-
-                  // 回到原位
-                  d3.select(this).attr(
-                    'transform',
-                    `translate(${x(d[xAxisMetric])},${y(d[yAxisMetric])})`
-                  );
-                  return;
-                }
 
-                /* ---------- ② 原有拖拽修改逻辑 ---------- */
-                const newXVal = x.invert(endX);
-                const newYVal = y.invert(endY);
-                const deltaX = newXVal - d[xAxisMetric];
-                const deltaY = newYVal - d[yAxisMetric];
-
-                let mods = [];
-                let behind = null;
-                if (Math.abs(deltaX) > 5) {
-                  mods.push({ metric: xAxisMetric, direction: deltaX > 0 ? 'increase' : 'decrease' });
-                  behind = nodes
-                    .filter(
-                      (n) => n.id !== d.id && n[xAxisMetric] !== undefined && n[xAxisMetric] < newXVal
-                    )
-                    .sort((a, b) => b[xAxisMetric] - a[xAxisMetric])[0];
-                }
-                if (Math.abs(deltaY) > 5) {
-                  mods.push({ metric: yAxisMetric, direction: deltaY > 0 ? 'increase' : 'decrease' });
-                  behind =
-                    behind ||
-                    nodes
-                      .filter(
-                        (n) =>
-                          n.id !== d.id && n[yAxisMetric] !== undefined && n[yAxisMetric] < newYVal
-                      )
-                      .sort((a, b) => b[yAxisMetric] - a[yAxisMetric])[0];
-                }
+      // Linear zoom-window scaling around centers with uniform grid spacing
+      const scaleX = unifiedScale;
+      const scaleY = unifiedScale;
+
+      // Compute visible domains based on center + scale (clamped to [0,100])
+      let xMin = Math.max(0, xScalingCenter - 50 / scaleX);
+      let xMax = Math.min(100, xScalingCenter + 50 / scaleX);
+      if (xMax - xMin < 1e-6) { // Avoid degenerate domain
+        const mid = (xMin + xMax) / 2;
+        xMin = Math.max(0, mid - 0.5);
+        xMax = Math.min(100, mid + 0.5);
+      }
 
-                // 回弹
-                d3.select(this).attr(
-                  'transform',
-                  `translate(${x(d[xAxisMetric])},${y(d[yAxisMetric])})`
-                );
+      let yMin = Math.max(0, yScalingCenter - 50 / scaleY);
+      let yMax = Math.min(100, yScalingCenter + 50 / scaleY);
+      if (yMax - yMin < 1e-6) {
+        const mid = (yMin + yMax) / 2;
+        yMin = Math.max(0, mid - 0.5);
+        yMax = Math.min(100, mid + 0.5);
+      }
 
-                if (mods.length > 0) {
-                  const ghostId = generateUniqueId();
-                  const ghost = {
-                    ...d,
-                    id: ghostId,
-                    x: d.x,
-                    y: d.y,
-                    [xAxisMetric]: newXVal,
-                    [yAxisMetric]: newYVal,
-                    isGhost: true,
-                    isNewlyGenerated: true,
-                    level: d.level + 1,
-                  };
-                  setNodes((prev) => [...prev, ghost]);
-                  setLinks((prev) => [...prev, { source: d.id, target: ghostId }]);
-                  setPendingChange({
-                    originalNode: d,
-                    ghostNode: ghost,
-                    modifications: mods,
-                    behindNode: behind,
-                    screenX: event.sourceEvent.clientX + 10,
-                    screenY: event.sourceEvent.clientY + 10,
-                  });
-                }
-                // Track click and set selected node
-                setSelectedNode(d);
-              })
-          );
-
-        nodeG
-          .append('circle')
-          .attr('r', (d) =>
-            d.isBeingMerged ? 16 : d.id === mergeTargetId ? 12 : 8
-          )
-          .style('fill', (d) =>
-            d.isMergedResult
-              ? '#B22222'
-              : d.isNewlyGenerated
-                ? '#FFD700'
-                : colorMap[d.type]
-          )
-          .style('opacity', (d) => {
-            // Check if custom opacity is set
-            if (d.evaluationOpacity !== undefined) return d.evaluationOpacity;
-            // Otherwise use the default logic
-            return d.isGhost ? 0.5 : 1;
-          })
-          .style('stroke', (d) =>
-            selectedNode?.id === d.id ? '#000' : hoveredNode?.id === d.id ? '#555' : '#fff'
-          )
-          .style('stroke-width', (d) =>
-            selectedNode?.id === d.id ? 4 : hoveredNode?.id === d.id ? 3 : 2
-          );
+      // View scales map the current visible domain to screen space
+      const xView = d3.scaleLinear().domain([xMin, xMax]).range([0, chartW]);
+      const yView = d3.scaleLinear().domain([yMin, yMax]).range([chartH, 0]);
+
+      // Coordinate functions for nodes and ticks (uniform spacing)
+      const coordX = (raw) => xView(raw);
+      const coordY = (raw) => yView(raw);
+      const tickCoordX = (t) => xView(t);
+      const tickCoordY = (t) => yView(t);
+
+      // Static content layer (removed pan/move feature)
+      const contentLayer = g.append('g').attr('class', 'evaluation-zoom-layer');
+
+      /* 动态网格 & 轴 (reflect scaling + distribution) */
+      const allMajorTicks = d3.range(0, 101, 20);
+      const allMinorTicks = d3.range(0, 101, 10).filter(t => !allMajorTicks.includes(t));
+      // Only show ticks within the visible domain (hide out-of-bounds)
+      const tickMajorX = allMajorTicks.filter(t => t >= xMin && t <= xMax);
+      const tickMinorX = allMinorTicks.filter(t => t >= xMin && t <= xMax);
+      const tickMajorY = allMajorTicks.filter(t => t >= yMin && t <= yMax);
+      const tickMinorY = allMinorTicks.filter(t => t >= yMin && t <= yMax);
+      // X grid lines
+      const xGridGroup = g.append('g').attr('class', 'x-grid');
+      xGridGroup.selectAll('line.major')
+        .data(tickMajorX)
+        .enter().append('line')
+        .attr('class', 'major')
+        .attr('x1', d => tickCoordX(d))
+        .attr('x2', d => tickCoordX(d))
+        .attr('y1', 0)
+        .attr('y2', chartH)
+        .style('stroke', '#E5E7EB').style('stroke-width', 1);
+      xGridGroup.selectAll('line.minor')
+        .data(tickMinorX)
+        .enter().append('line')
+        .attr('class', 'minor')
+        .attr('x1', d => tickCoordX(d))
+        .attr('x2', d => tickCoordX(d))
+        .attr('y1', 0)
+        .attr('y2', chartH)
+        .style('stroke', '#F3F4F6').style('stroke-width', 1);
+      // Y grid lines
+      const yGridGroup = g.append('g').attr('class', 'y-grid');
+      yGridGroup.selectAll('line.major')
+        .data(tickMajorY)
+        .enter().append('line')
+        .attr('class', 'major')
+        .attr('x1', 0)
+        .attr('x2', chartW)
+        .attr('y1', d => tickCoordY(d))
+        .attr('y2', d => tickCoordY(d))
+        .style('stroke', '#E5E7EB').style('stroke-width', 1);
+      yGridGroup.selectAll('line.minor')
+        .data(tickMinorY)
+        .enter().append('line')
+        .attr('class', 'minor')
+        .attr('x1', 0)
+        .attr('x2', chartW)
+        .attr('y1', d => tickCoordY(d))
+        .attr('y2', d => tickCoordY(d))
+        .style('stroke', '#F3F4F6').style('stroke-width', 1);
+      // Custom X axis
+      const xAxisGroup = g.append('g').attr('class', 'dynamic-x-axis').attr('transform', `translate(0,${chartH})`);
+      xAxisGroup.selectAll('line.tick')
+        .data(tickMajorX)
+        .enter().append('line')
+        .attr('class', 'tick')
+        .attr('x1', d => tickCoordX(d))
+        .attr('x2', d => tickCoordX(d))
+        .attr('y1', 0)
+        .attr('y2', 6)
+        .style('stroke', '#374151');
+      xAxisGroup.selectAll('text.tick-label')
+        .data(tickMajorX)
+        .enter().append('text')
+        .attr('class', 'tick-label')
+        .attr('x', d => tickCoordX(d))
+        .attr('y', 20)
+        .attr('text-anchor', 'middle')
+        .style('font-size', '10px')
+        .style('fill', '#374151')
+        .text(d => d);
+      // Edge indicators for X (show true boundary values when 0/100 are out of view)
+      const EDGE_EPS = 1e-6;
+      const fmtEdge = (v) => Math.round(v);
+      // Left border (xMin)
+      if (xMin > 0 + EDGE_EPS) {
+        // Border-aligned grid line (left)
+        xGridGroup.append('line')
+          .attr('class', 'edge-grid')
+          .attr('x1', 0)
+          .attr('x2', 0)
+          .attr('y1', 0)
+          .attr('y2', chartH)
+          .style('stroke', '#E5E7EB').style('stroke-width', 1);
+        // Axis tick and label at border
+        xAxisGroup.append('line')
+          .attr('class', 'edge-tick')
+          .attr('x1', 0)
+          .attr('x2', 0)
+          .attr('y1', 0)
+          .attr('y2', 6)
+          .style('stroke', '#374151');
+        xAxisGroup.append('text')
+          .attr('class', 'edge-tick-label')
+          .attr('x', 0)
+          .attr('y', 20)
+          .attr('text-anchor', 'middle')
+          .style('font-size', '10px')
+          .style('fill', '#374151')
+          .text(fmtEdge(xMin));
       }
-      if (operationStatus) {
-        svg
-          .append('rect')
-          .attr('x', 2)
-          .attr('y', 2)
-          .attr('width', width - 4)
-          .attr('height', height - 4)
-          .attr('rx', 8)
-          .attr('ry', 8)
-          .style('fill', 'rgba(255, 255, 255, 0.7)')
-          .style('pointer-events', 'none');
-        svg
-          .append('text')
-          .attr('x', width / 2)
-          .attr('y', height / 2)
+      // Right border (xMax)
+      if (xMax < 100 - EDGE_EPS) {
+        // Border-aligned grid line (right)
+        xGridGroup.append('line')
+          .attr('class', 'edge-grid')
+          .attr('x1', chartW)
+          .attr('x2', chartW)
+          .attr('y1', 0)
+          .attr('y2', chartH)
+          .style('stroke', '#E5E7EB').style('stroke-width', 1);
+        // Axis tick and label at border
+        xAxisGroup.append('line')
+          .attr('class', 'edge-tick')
+          .attr('x1', chartW)
+          .attr('x2', chartW)
+          .attr('y1', 0)
+          .attr('y2', 6)
+          .style('stroke', '#374151');
+        xAxisGroup.append('text')
+          .attr('class', 'edge-tick-label')
+          .attr('x', chartW)
+          .attr('y', 20)
           .attr('text-anchor', 'middle')
-          .attr('dominant-baseline', 'middle')
-          .style('font-size', '1.2rem')
-          .style('font-weight', '600')
+          .style('font-size', '10px')
           .style('fill', '#374151')
-          .text(operationStatus);
+          .text(fmtEdge(xMax));
       }
-    }
-  }, [
-    currentView,
-    nodes,
-    links,
-    xAxisMetric,
-    yAxisMetric,
-    isGenerating,
-    isEvaluating,
-    operationStatus,
-    // selectedNode and hoveredNode handled by separate useEffect for styling updates only
-  ]);
-
-  // Separate useEffect for updating node hover/selection styling without recreating event listeners
-  useEffect(() => {
-    if (!svgRef.current || currentView === 'home_view') return;
-
-    // Update circle styling for hover and selection states
-    d3.select(svgRef.current)
-      .selectAll('circle')
-      .style('stroke', (d) =>
-        selectedNode?.id === d.id ? '#000' : hoveredNode?.id === d.id ? '#555' : '#fff'
-      )
-      .style('stroke-width', (d) =>
-        selectedNode?.id === d.id ? 4 : hoveredNode?.id === d.id ? 3 : 2
-      );
-  }, [selectedNode, hoveredNode, currentView]);
-
-  const handleAddCustomIdea = async (e) => {
-    e.preventDefault();
-    if (!customIdea.title.trim() || !customIdea.content.trim()) return;
-
-    setIsGenerating(true);
-    setOperationStatus('Adding custom idea...');
-    setError(null);
-
-    try {
-      const newId = generateUniqueId();
-      const newIdea = {
-        id: newId,
-        ...customIdea,
-      };
-
-      // 添加到假设列表
-      const updatedIdeasList = [...ideasList, newIdea];
-      setIdeasList(updatedIdeasList);
-
-      // 创建新节点
-      const newNode = {
-        id: newId,
-        level: selectedNode ? selectedNode.level + 1 : 1,
-        title: customIdea.title.trim(),
-        content: customIdea.content.trim(),
-        type: 'complex',
-        x: selectedNode ? selectedNode.x + Math.random() * 20 - 10 : 0,
-        y: selectedNode ? selectedNode.y + 150 + Math.random() * 20 - 10 : 150,
-        originalData: newIdea, // Preserve original data for coder/writer
-      };
-
-      // 添加节点和连接
-      setNodes((prev) => [...prev, newNode]);
-      if (selectedNode) {
-        setLinks((prev) => [...prev, { source: selectedNode.id, target: newId }]);
+      // Custom Y axis
+      const yAxisGroup = g.append('g').attr('class', 'dynamic-y-axis');
+      yAxisGroup.selectAll('line.tick')
+        .data(tickMajorY)
+        .enter().append('line')
+        .attr('class', 'tick')
+        .attr('x1', -6)
+        .attr('x2', 0)
+        .attr('y1', d => tickCoordY(d))
+        .attr('y2', d => tickCoordY(d))
+        .style('stroke', '#374151');
+      yAxisGroup.selectAll('text.tick-label')
+        .data(tickMajorY)
+        .enter().append('text')
+        .attr('class', 'tick-label')
+        .attr('x', -10)
+        .attr('y', d => tickCoordY(d) + 3)
+        .attr('text-anchor', 'end')
+        .style('font-size', '10px')
+        .style('fill', '#374151')
+        .text(d => d);
+      // Edge indicators for Y (show true boundary values when 0/100 are out of view)
+      // Bottom border (yMin)
+      if (yMin > 0 + EDGE_EPS) {
+        // Border-aligned grid line (bottom)
+        yGridGroup.append('line')
+          .attr('class', 'edge-grid')
+          .attr('x1', 0)
+          .attr('x2', chartW)
+          .attr('y1', chartH)
+          .attr('y2', chartH)
+          .style('stroke', '#E5E7EB').style('stroke-width', 1);
+        // Axis tick and label at border
+        yAxisGroup.append('line')
+          .attr('class', 'edge-tick')
+          .attr('x1', -6)
+          .attr('x2', 0)
+          .attr('y1', chartH)
+          .attr('y2', chartH)
+          .style('stroke', '#374151');
+        yAxisGroup.append('text')
+          .attr('class', 'edge-tick-label')
+          .attr('x', -10)
+          .attr('y', chartH + 3)
+          .attr('text-anchor', 'end')
+          .style('font-size', '10px')
+          .style('fill', '#374151')
+          .text(fmtEdge(yMin));
+      }
+      // Top border (yMax)
+      if (yMax < 100 - EDGE_EPS) {
+        // Border-aligned grid line (top)
+        yGridGroup.append('line')
+          .attr('class', 'edge-grid')
+          .attr('x1', 0)
+          .attr('x2', chartW)
+          .attr('y1', 0)
+          .attr('y2', 0)
+          .style('stroke', '#E5E7EB').style('stroke-width', 1);
+        // Axis tick and label at border
+        yAxisGroup.append('line')
+          .attr('class', 'edge-tick')
+          .attr('x1', -6)
+          .attr('x2', 0)
+          .attr('y1', 0)
+          .attr('y2', 0)
+          .style('stroke', '#374151');
+        yAxisGroup.append('text')
+          .attr('class', 'edge-tick-label')
+          .attr('x', -10)
+          .attr('y', 3)
+          .attr('text-anchor', 'end')
+          .style('font-size', '10px')
+          .style('fill', '#374151')
+          .text(fmtEdge(yMax));
       }
 
-      // 评估新假设
-      await evaluateIdeas(updatedIdeasList);
-
-      // 重置表单
-      setCustomIdea({ title: '', content: '' });
-      setIsAddingCustom(false);
-    } catch (err) {
-      console.error('Error adding custom idea:', err);
-      setError(err.message);
-    } finally {
-      setIsGenerating(false);
-      setOperationStatus('');
-    }
-  };
-
-  // Load generated files from public directory
-  const loadGeneratedFiles = async (experimentDir) => {
-    try {
-      const fileUrls = {
-        'experiment.py': `/api/files/${experimentDir}/experiment.py`,
-        'notes.txt': `/api/files/${experimentDir}/notes.txt`,
-        'experiment_results.txt': `/api/files/${experimentDir}/experiment_results.txt`,
-      };
+      // Ensure node/content layer is above grids & axes (z-order)
+      contentLayer.raise();
 
-      const loadedFiles = {};
-      for (const [fileName, url] of Object.entries(fileUrls)) {
-        try {
-          console.log(`Attempting to fetch: ${fileName} from ${url}`);
-          const response = await fetch(url);
-          console.log(`Response for ${fileName}:`, response.status, response.statusText);
-
-          if (response.ok) {
-            const data = await response.json();
-            if (data.content) {
-              loadedFiles[fileName] = data.content;
-              console.log(`Loaded ${fileName} successfully.`);
-            }
-          } else {
-            console.log(`Could not load ${fileName}, but this might be expected (e.g., no notes).`);
-          }
-        } catch (err) {
-          console.error(`Error fetching ${fileName}:`, err);
-        }
-      }
+      // Removed pan reset button (no movement allowed now)
 
-      // Update state all at once
-      setExperimentFiles(prev => ({ ...prev, ...loadedFiles }));
+      /* 轴标签 - 显示维度对名称 */
+      if (xDimension && yDimension) {
+        // X 轴标签：左侧显示 dimensionA，右侧显示 dimensionB
+        g.append('text')
+          .attr('x', 0)
+          .attr('y', chartH + 60)
+          .style('text-anchor', 'start')
+          .style('fill', '#374151')
+          .style('font-size', '0.9rem')
+          .style('font-weight', '600')
+          .text(xDimension.dimensionA);
+
+        g.append('text')
+          .attr('x', chartW / 2)
+          .attr('y', chartH + 60)
+          .style('text-anchor', 'middle')
+          .style('fill', '#9CA3AF')
+          .style('font-size', '0.75rem')
+          .text('←→');
+
+        g.append('text')
+          .attr('x', chartW)
+          .attr('y', chartH + 60)
+          .style('text-anchor', 'end')
+          .style('fill', '#374151')
+          .style('font-size', '0.9rem')
+          .style('font-weight', '600')
+          .text(xDimension.dimensionB);
+
+        // Y 轴标签：底部显示 dimensionA，顶部显示 dimensionB
+        g.append('text')
+          .attr('transform', 'rotate(-90)')
+          .attr('x', -chartH)
+          .attr('y', -40)
+          .style('text-anchor', 'start')
+          .style('fill', '#374151')
+          .style('font-size', '0.9rem')
+          .style('font-weight', '600')
+          .text(yDimension.dimensionA);
+
+        g.append('text')
+          .attr('transform', 'rotate(-90)')
+          .attr('x', -chartH / 2)
+          .attr('y', -40)
+          .style('text-anchor', 'middle')
+          .style('fill', '#9CA3AF')
+          .style('font-size', '0.75rem')
+          .text('←→');
+
+        g.append('text')
+          .attr('transform', 'rotate(-90)')
+          .attr('x', 0)
+          .attr('y', -40)
+          .style('text-anchor', 'start')
+          .style('fill', '#374151')
+          .style('font-size', '0.9rem')
+          .style('font-weight', '600')
+          .text(yDimension.dimensionB);
+      } else {
+        // Fallback: 显示旧的轴名称
+        g.append('text')
+          .attr('x', chartW / 2)
+          .attr('y', chartH + 40)
+          .style('text-anchor', 'middle')
+          .style('fill', '#374151')
+          .style('font-size', '1.2rem')
+      .text(xAxisLabel || xAxisMetric);
 
-      // Set the code content for the editor if experiment.py was loaded
-      if (loadedFiles['experiment.py']) {
-        setCodeContent(loadedFiles['experiment.py']);
-        setActiveCodeTab('experiment.py');
+        g.append('text')
+          .attr('transform', 'rotate(-90)')
+          .attr('x', -chartH / 2)
+          .attr('y', -30)
+          .style('text-anchor', 'middle')
+          .style('fill', '#374151')
+          .style('font-size', '1.2rem')
+      .text(yAxisLabel || yAxisMetric);
       }
 
-    } catch (err) {
-      console.log("Error loading generated files:", err);
-      setCodeContent(`# Generated experiment code\n# Files are being generated in: ${experimentDir}\n\n# Please check the directory for the actual code files.`);
-    }
-  };
-
-  // Manual file loading function for debugging
-  const handleManualLoadFiles = async () => {
-    try {
-      console.log("Manually loading generated files...");
+      // (Zoom controls removed previously)
+      // Remove any previous scaling controls before re-render (avoid duplicates)
+      svg.selectAll('.scaling-controls').remove();
 
-      // Stop any ongoing code generation polling
-      setIsGeneratingCode(false);
-      setIsGeneratingPaper(false);
-      setOperationStatus('');
+      // Unified scaling controls (similar to tree view)
+      const controlLayer = svg.append('g').attr('class', 'scaling-controls');
 
-      await loadGeneratedFiles("experiments");
-      setCurrentView('code_view');
-      console.log("Manual file loading completed");
+      // Check if there are visible nodes to enable/disable buttons
+      const hasVisibleNodes = nodes.some(n => getX(n) !== undefined && getY(n) !== undefined && !n.isGhost);
+      // Unified scaling controls positioned in top-right like tree view
+      const controls = controlLayer.append('g')
+        .attr('class', 'unified-scale-controls')
+        .attr('transform', `translate(${width - 40}, 20)`);
 
-      // Set a fake successful result to satisfy the UI
-      setCodeResult({
-        status: true,
-        success: true,
-        experiment_dir: "experiments"
+      // Lock scaling if any node touches the visible border
+      const pixelTol = 10; // include node radius and label padding
+      const lockScaling = hasVisibleNodes && nodes.some(n => {
+        if (getX(n) === undefined || getY(n) === undefined || n.isGhost) return false;
+        const px = coordX(getX(n));
+        const py = coordY(getY(n));
+        return px <= 0 + pixelTol || px >= chartW - pixelTol || py <= 0 + pixelTol || py >= chartH - pixelTol;
       });
 
-    } catch (err) {
-      console.log("Manual file loading failed:", err);
-    }
-  };
-
-  // Handler for Retry Code Generation button
-  const handleRetryCodeGeneration = async (node) => {
-    if (!node || !node.originalData) {
-      console.log("ERROR: Missing node or originalData for retry");
-      return;
-    }
+      // Separate disabled states for buttons (restore remains enabled when nodes exist)
+      const upDisabled = !hasVisibleNodes || lockScaling;
+      const downDisabled = !hasVisibleNodes || lockScaling;
+      const restoreDisabled = !hasVisibleNodes;
+      const upOpacity = upDisabled ? 0.3 : 1;
+      const downOpacity = downDisabled ? 0.3 : 1;
+      const restoreOpacity = restoreDisabled ? 0.3 : 1;
+      const upCursor = upDisabled ? 'not-allowed' : 'pointer';
+      const downCursor = downDisabled ? 'not-allowed' : 'pointer';
+      const restoreCursor = restoreDisabled ? 'not-allowed' : 'pointer';
 
-    console.log("Retrying code generation for idea:", node.originalData.Title);
-    setIsGeneratingCode(true);
-    setOperationStatus('Retrying code generation...');
-    setCodeResult(null);
-    setExperimentFiles({});
-    setShowLogs(true); // Show logs when starting code generation
+      // Scale up button (+)
 
-    try {
-      const codeResponse = await fetch('/api/code', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        credentials: 'include',
-        body: JSON.stringify({
-          idea: node.originalData
-        })
-      });
+      controls.append('rect')
+        .attr('x', 0)
+        .attr('y', 0)
+        .attr('width', 28)
+        .attr('height', 28)
+        .attr('rx', 4)
+        .style('fill', '#f3f4f6')
+        .style('stroke', '#d1d5db')
+        .style('opacity', upOpacity)
+        .style('cursor', upCursor)
+        .on('click', () => {
+          if (!upDisabled) {
+            // Mark that user has interacted with scale
+            setUserHasInteractedWithScale(true);
+            // Smart zoom: re-center to nodes while scaling up
+            const { xCenter, yCenter } = calculateNodeMidpoints();
+            setXScalingCenter(xCenter);
+            setYScalingCenter(yCenter);
+            setUnifiedScale(prev => Math.min(4.0, prev + 0.1));
+          }
+        });
+      controls.append('text')
+        .attr('x', 14)
+        .attr('y', 16)
+        .attr('text-anchor', 'middle')
+        .attr('dominant-baseline', 'middle')
+        .style('font-size', '18px')
+        .style('pointer-events', 'none')
+        .style('opacity', upOpacity)
+        .text('+');
 
-      if (!codeResponse.ok) {
-        const errorText = await codeResponse.text();
-        throw new Error(`Failed to generate code: ${codeResponse.status} ${errorText}`);
-      }
+      // Scale down button (-)
+      controls.append('rect')
+        .attr('x', 0)
+        .attr('y', 32)
+        .attr('width', 28)
+        .attr('height', 28)
+        .attr('rx', 4)
+        .style('fill', '#f3f4f6')
+        .style('stroke', '#d1d5db')
+        .style('opacity', downOpacity)
+        .style('cursor', downCursor)
+        .on('click', () => {
+          if (!downDisabled) {
+            // Mark that user has interacted with scale
+            setUserHasInteractedWithScale(true);
+            // Smart zoom: re-center to nodes while scaling down
+            const { xCenter, yCenter } = calculateNodeMidpoints();
+            setXScalingCenter(xCenter);
+            setYScalingCenter(yCenter);
+            setUnifiedScale(prev => Math.max(0.25, prev - 0.1));
+          }
+        });
+      controls.append('text')
+        .attr('x', 14)
+        .attr('y', 48)
+        .attr('text-anchor', 'middle')
+        .attr('dominant-baseline', 'middle')
+        .style('font-size', '18px')
+        .style('pointer-events', 'none')
+        .style('opacity', downOpacity)
+        .text('−');
+
+      // Restore button (reset to 1.0 with dynamic centering)
+      controls.append('rect')
+        .attr('x', 0)
+        .attr('y', 64)
+        .attr('width', 28)
+        .attr('height', 28)
+        .attr('rx', 4)
+        .style('fill', '#f3f4f6')
+        .style('stroke', '#d1d5db')
+        .style('opacity', restoreOpacity)
+        .style('cursor', restoreCursor)
+        .on('click', () => {
+          if (!restoreDisabled) {
+            // True restore: reset to initial state (full 0-100 view)
+            setUnifiedScale(1.0);
+            setXScalingCenter(50);
+            setYScalingCenter(50);
+            // Reset user interaction flag so auto-centering can work again
+            setUserHasInteractedWithScale(false);
+          }
+        });
+      controls.append('text')
+        .attr('x', 13)
+        .attr('y', 78)
+        .attr('text-anchor', 'middle')
+        .attr('dominant-baseline', 'middle')
+        .style('font-size', '18px')
+        .style('pointer-events', 'none')
+        .style('opacity', restoreOpacity)
+        .text('⟲');
 
-      const codeData = await codeResponse.json();
-      console.log("Retry code generation completed:", codeData);
-      setCodeResult(codeData);
+      // Reapply stored transform if previously zoomed
+      // Zoom persistence removed
+
+      /* 轴标签 - 显示维度对名称 */
+      if (xDimension && yDimension) {
+        // X 轴标签：左侧显示 dimensionA，右侧显示 dimensionB
+        g.append('text')
+          .attr('x', 0)
+          .attr('y', chartH + 60)
+          .style('text-anchor', 'start')
+          .style('fill', '#374151')
+          .style('font-size', '0.9rem')
+          .style('font-weight', '600')
+          .text(xDimension.dimensionA);
+
+        g.append('text')
+          .attr('x', chartW / 2)
+          .attr('y', chartH + 60)
+          .style('text-anchor', 'middle')
+          .style('fill', '#9CA3AF')
+          .style('font-size', '0.75rem')
+          .text('←→');
+
+        g.append('text')
+          .attr('x', chartW)
+          .attr('y', chartH + 60)
+          .style('text-anchor', 'end')
+          .style('fill', '#374151')
+          .style('font-size', '0.9rem')
+          .style('font-weight', '600')
+          .text(xDimension.dimensionB);
+
+        // Y 轴标签：底部显示 dimensionA，顶部显示 dimensionB
+        g.append('text')
+          .attr('transform', 'rotate(-90)')
+          .attr('x', -chartH)
+          .attr('y', -40)
+          .style('text-anchor', 'start')
+          .style('fill', '#374151')
+          .style('font-size', '0.9rem')
+          .style('font-weight', '600')
+          .text(yDimension.dimensionA);
+
+        g.append('text')
+          .attr('transform', 'rotate(-90)')
+          .attr('x', -chartH / 2)
+          .attr('y', -40)
+          .style('text-anchor', 'middle')
+          .style('fill', '#9CA3AF')
+          .style('font-size', '0.75rem')
+          .text('←→');
+
+        g.append('text')
+          .attr('transform', 'rotate(-90)')
+          .attr('x', 0)
+          .attr('y', -40)
+          .style('text-anchor', 'start')
+          .style('fill', '#374151')
+          .style('font-size', '0.9rem')
+          .style('font-weight', '600')
+          .text(yDimension.dimensionB);
+      } else {
+        // Fallback: 显示旧的轴名称
+        g.append('text')
+          .attr('x', chartW / 2)
+          .attr('y', chartH + 40)
+          .style('text-anchor', 'middle')
+          .style('fill', '#374151')
+          .style('font-size', '1.2rem')
+      .text(xAxisLabel || xAxisMetric);
 
-      if (!codeData.success) {
-        throw new Error(codeData.error || 'Code generation failed');
+        g.append('text')
+          .attr('transform', 'rotate(-90)')
+          .attr('x', -chartH / 2)
+          .attr('y', -30)
+          .style('text-anchor', 'middle')
+          .style('fill', '#374151')
+          .style('font-size', '1.2rem')
+      .text(yAxisLabel || yAxisMetric);
       }
 
-      // Load generated files
-      setOperationStatus('Loading generated files...');
-      await loadGeneratedFiles(codeData.experiment_dir);
-      setOperationStatus('Code generation retry completed successfully!');
-
-    } catch (error) {
-      console.error("Retry code generation failed:", error);
-      setOperationStatus('Retry code generation failed: ' + error.message);
-      setCodeResult({
-        success: false,
-        error: error.message,
-        error_details: error.message
+      // Ensure node/content layer is above grids & axes (z-order)
+      contentLayer.raise();
+
+      /* 过滤能绘制的节点 - keep all nodes visible during evaluation */
+      const drawable = nodes.filter((n) => {
+        // Must have coordinates to be drawable
+        const hasCoords = getX(n) !== undefined && getY(n) !== undefined;
+        // Always show all nodes with coordinates, even during evaluation
+        return hasCoords;
       });
-    } finally {
-      setIsGeneratingCode(false);
-    }
-  };
 
-  // Handler for Generate Paper button
-  const handleGeneratePaper = async (node, experimentDir) => {
-    if (!node || !node.originalData) {
-      console.log("ERROR: Missing node or originalData for paper generation");
-      return;
-    }
+      /* ---------- 连线：evaluation + merge ---------- */
+      const hasCoords = (n) => getX(n) !== undefined && getY(n) !== undefined;
+      const isNodeActive = (nodeId) => {
+        if (!nodeId) return false;
+        if (selectedNode && selectedNode.id === nodeId) return true;
+        if (hoveredNode && hoveredNode.id === nodeId) return true;
+        return false;
+      };
 
-    // Only require experiment directory for experimental ideas
-    const isExperimental = node.originalData.is_experimental;
-    if (isExperimental && !experimentDir) {
-      console.log("ERROR: Missing experiment directory for experimental idea");
-      return;
-    }
+      /* 两类连线
+      ① original → modified   （浅灰 #ccc, 1px）  - Always visible
+      ② mergedResult ↔ originals（深灰 #999, 1.5px） - Always visible
+      ③ parent → children (generated ideas) - Only visible on hover */
+      links.forEach((lk) => {
+        const s = nodes.find((n) => n.id === lk.source);
+        const t = nodes.find((n) => n.id === lk.target);
+        if (!s || !t) return;
+        if (!hasCoords(s) || !hasCoords(t)) return; // 任一端缺坐标则跳过
 
-    console.log("Generating paper for idea:", node.originalData.Title);
-    setIsGeneratingPaper(true);
-    setOperationStatus('Generating paper...');
-    setShowLogs(true); // Show logs when starting paper generation
+        const isMergeEdge = s.isMergedResult || t.isMergedResult;
+        const isModificationEdge = t.previousState && t.previousState.id === s.id;
 
-    try {
-      // Get S2 API key from localStorage or prompt user
-      let s2ApiKey = localStorage.getItem('s2_api_key');
-      if (!s2ApiKey) {
-        s2ApiKey = prompt('Please enter your Semantic Scholar API Key:');
-        if (!s2ApiKey) {
-          throw new Error('Semantic Scholar API key is required for paper generation');
+        // Check if this is a parent-child generation link (hide by default, show on hover)
+        const isParentChildGeneration = !isMergeEdge && !isModificationEdge;
+
+        // Modification edges: only show when either endpoint is hovered or selected
+        if (isModificationEdge && !isNodeActive(s.id) && !isNodeActive(t.id)) {
+          return;
         }
-        localStorage.setItem('s2_api_key', s2ApiKey);
-      }
 
-      const paperResponse = await fetch('/api/write', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        credentials: 'include',
-        body: JSON.stringify({
-          idea: node.originalData,
-          experiment_dir: experimentDir,
-          s2_api_key: s2ApiKey
-        })
+        // Show parent-child generation edges only when one endpoint selected
+        if (isParentChildGeneration &&
+          (!selectedNode || (selectedNode.id !== lk.source && selectedNode.id !== lk.target))) {
+          return;
+        }
+
+        contentLayer.append('line')
+          .attr('x1', coordX(getX(s)))
+          .attr('y1', coordY(getY(s)))
+          .attr('x2', coordX(getX(t)))
+          .attr('y2', coordY(getY(t)))
+          .style('stroke', (() => {
+            if (isModificationEdge) return '#fbbf24';
+            return isMergeEdge ? '#999' : '#ccc';
+          })())
+          .style('stroke-width', isModificationEdge ? 2 : (isMergeEdge ? 1.5 : 1))
+          .style('stroke-dasharray', isModificationEdge ? '6,4' : 'none')
+          .style('opacity', isParentChildGeneration ? 0.8 : 1);
       });
 
-      if (!paperResponse.ok) {
-        const errorText = await paperResponse.text();
-        throw new Error(`Failed to generate paper: ${paperResponse.status} ${errorText}`);
-      }
+      /* 节点绘制 & 拖拽 */
+      const nodeG = contentLayer
+        .selectAll('.node-group')
+        .data(drawable, (d) => d.id)
+        .enter()
+        .append('g')
+        .attr('class', 'node-group')
+        .attr('transform', (d) => {
+          if (d._tmpViewX !== undefined && d._tmpViewY !== undefined) {
+            return `translate(${d._tmpViewX},${d._tmpViewY})`;
+          }
+          return `translate(${coordX(getX(d))},${coordY(getY(d))})`;
+        })
+        .style('cursor', 'pointer');
 
-      const paperData = await paperResponse.json();
-      console.log("Paper generation completed:", paperData);
+      // Add event listeners with unified tracking (no duplicates)
+      nodeG
+        .on('mouseenter.scatter-tracking', function (e, d) {
+          // Don't track hover if any node is being dragged, events are suppressed after drag, or just clicked
+          if (!d._dragStarted && !nodes.some(n => n._dragStarted) && !d._suppressEventsAfterDrag && !d._justClicked) {
+            // Prevent duplicate tracking by checking if this exact same hover was just tracked
+            if (!d._lastHoverTime || Date.now() - d._lastHoverTime > 100) {
+              d._lastHoverTime = Date.now();
+            }
+          }
+          // UI functionality
+          setHoveredNode(d);
+          // Add hover styling directly to circle only
+          // Note: z-ordering is handled by selectedNode useEffect
+          d3.select(this).select('circle').style('stroke', '#000').style('stroke-width', 4);
+        })
+        .on('mouseleave.scatter-tracking', function (e, d) {
+          // Don't track hover if any node is being dragged or events are suppressed after drag
+          if (!d._dragStarted && !nodes.some(n => n._dragStarted) && !d._suppressEventsAfterDrag) {
+          }
+          // UI functionality
+          setHoveredNode(null);
+          // Restore original styling to circle only (check if selected)
+          const isSelected = selectedNode?.id === d.id;
+          d3.select(this).select('circle').style('stroke', isSelected ? '#000' : '#fff').style('stroke-width', isSelected ? 4 : 2);
+          // Selected node z-ordering is handled by useEffect
+        })
+        .on('click.scatter-tracking', function (e, d) {
+          // Don't track click if events are suppressed after drag
+          if (!d._suppressEventsAfterDrag) {
+            // Set flag to prevent hover tracking immediately after click
+            d._justClicked = true;
+            setTimeout(() => { d._justClicked = false; }, 200);
+
+            // Clear any existing single click timeout
+            if (d._singleClickTimeout) {
+              clearTimeout(d._singleClickTimeout);
+              d._singleClickTimeout = null;
+            }
 
-      if (!paperData.success) {
-        throw new Error(paperData.error || 'Paper generation failed');
-      }
+            // Delay single click tracking to distinguish from double click
+            d._singleClickTimeout = setTimeout(() => {
+              d._singleClickTimeout = null;
+            }, 300); // 300ms delay to detect double clicks
+          }
+          // UI functionality
+          setSelectedNode(d);
+          // Note: z-ordering is handled by selectedNode useEffect
+        })
+        .call(
+          d3
+            .drag()
+            .on('start', function (event, d) {
+              if (isGenerating || isEvaluating) return;
+              // Disable dragging when zoomed (non-identity) to avoid coordinate confusion
+              if (evaluationZoomTransformRef.current && evaluationZoomTransformRef.current.k !== 1) {
+                return;
+              }
+              // Mark drag start but don't track yet - wait for actual movement
+              d._dragStarted = false;
+              d._dragStartValues = {
+                x: getNodeX(d),
+                y: getNodeY(d),
+                xAxisMetric: xAxisMetric,
+                yAxisMetric: yAxisMetric
+              };
+              d3.select(this).raise();
+            })
+            .on('drag', function (event, d) {
+              if (isGenerating || isEvaluating) return;
+              if (evaluationZoomTransformRef.current && evaluationZoomTransformRef.current.k !== 1) {
+                return;
+              }
 
-      // Set the paper result and switch to paper view
-      setPaperResult(paperData);
-      setCurrentView('paper_view');
-      setOperationStatus('Paper generated successfully!');
+              if (!d._dragStarted) {
+                d._dragStarted = true;
+              }
+              const [cx, cy] = d3.pointer(event, g.node());
+              d3.select(this).attr('transform', `translate(${cx},${cy})`);
+              d._tmpViewX = cx;
+              d._tmpViewY = cy;
+            })
+            .on('end', function (event, d) {
+              if (isGenerating || isEvaluating) return;
+              if (evaluationZoomTransformRef.current && evaluationZoomTransformRef.current.k !== 1) {
+                return;
+              }
+              const endX = d._tmpViewX ?? d3.pointer(event, g.node())[0];
+              const endY = d._tmpViewY ?? d3.pointer(event, g.node())[1];
+
+              // Only track drag if dragging actually occurred
+              if (d._dragStarted) {
+                // Convert screen coordinates back to metric values (account for metric scaling)
+                const endXValue = xView.invert(endX);
+                const endYValue = yView.invert(endY);
+
+
+                // Record user drag target for visualization (with safety checks)
+                if (d.id && !isNaN(endXValue) && !isNaN(endYValue) && xAxisMetric && yAxisMetric) {
+                  setUserDragTargets(prev => ({
+                    ...prev,
+                    [d.id]: {
+                      x: endXValue,
+                      y: endYValue,
+                      xAxisMetric: xAxisMetric,
+                      yAxisMetric: yAxisMetric,
+                      timestamp: Date.now()
+                    }
+                  }));
+                }
 
-    } catch (error) {
-      console.error("Paper generation failed:", error);
-      setOperationStatus('Paper generation failed: ' + error.message);
-    } finally {
-      setIsGeneratingPaper(false);
-    }
-  };
+                // Set flag to suppress automatic events after drag
+                d._suppressEventsAfterDrag = true;
+                // Clear the flag after a short delay to allow manual interactions
+                setTimeout(() => {
+                  delete d._suppressEventsAfterDrag;
+                }, 100);
+              }
 
-  // Handler for Proceed button - with confirmation dialog
-  const handleProceedWithSelectedIdea = () => {
-    console.log("=== PROCEED BUTTON CLICKED ===");
-    console.log("selectedNode:", selectedNode);
-    console.log("selectedNode.originalData:", selectedNode?.originalData);
+              // Clean up temporary variables
+              delete d._tmpViewX;
+              delete d._tmpViewY;
+              delete d._dragStarted;
+              delete d._dragStartValues;
+
+              /* ---------- ① 重叠检测：触发合并 ---------- */
+              const overlap = drawable.find((n) =>
+                n.id !== d.id &&
+                Math.hypot(coordX(getX(n)) - endX, coordY(getY(n)) - endY) < 10
+              );
+              if (overlap) {
+                setMergeTargetId(overlap.id);
+
+                // Apply merge animation immediately when dragging A to B
+                setNodes((prev) =>
+                  prev.map((n) => {
+                    if (n.id === d.id) {
+                      // Make nodeA (dragged node) disappear
+                      return { ...n, evaluationOpacity: 0 };
+                    } else if (n.id === overlap.id) {
+                      // Make nodeB (target node) bigger
+                      return { ...n, isBeingMerged: true };
+                    }
+                    return n;
+                  })
+                );
 
-    if (!selectedNode || !selectedNode.originalData) {
-      console.log("ERROR: Missing selectedNode or originalData");
-      setProceedError('Please select an idea to proceed');
-      return;
-    }
+                setPendingMerge({
+                  nodeA: d,
+                  nodeB: overlap,
+                  screenX: event.sourceEvent.clientX + 10,
+                  screenY: event.sourceEvent.clientY + 10,
+                });
 
-    console.log("Showing proceed confirmation dialog");
-    setShowProceedConfirm(true);
-  };
+                // 回到原位
+                d3.select(this).attr('transform', `translate(${coordX(getX(d))},${coordY(getY(d))})`);
+                return;
+              }
 
-  // Handler for confirmed proceed action
-  const handleConfirmProceed = async () => {
-    console.log("=== PROCEED CONFIRMED ===");
-    console.log("selectedNode.originalData:", selectedNode?.originalData);
+              // Keep the node at the dropped position visually
+              d3.select(this).attr('transform', `translate(${endX},${endY})`);
+
+              /* ---------- ② 原有拖拽修改逻辑 ---------- */
+              const newXVal = xView.invert(endX);
+              const newYVal = yView.invert(endY);
+              const deltaX = newXVal - getX(d);
+              const deltaY = newYVal - getY(d);
+
+              let mods = [];
+              let behind = null;
+              const TOLERANCE = 5; // Only record changes larger than 5 points
+
+              if (Math.abs(deltaX) > TOLERANCE) {
+                mods.push({
+                  metric: xAxisMetric,
+                  previousScore: Math.round(getX(d)),
+                  newScore: Math.round(newXVal),
+                  change: Math.round(deltaX)
+                });
+                behind = nodes
+                  .filter(
+                    (n) => n.id !== d.id && getX(n) !== undefined && getX(n) < newXVal
+                  )
+                  .sort((a, b) => getX(b) - getX(a))[0];
+              }
+              if (Math.abs(deltaY) > TOLERANCE) {
+                mods.push({
+                  metric: yAxisMetric,
+                  previousScore: Math.round(getY(d)),
+                  newScore: Math.round(newYVal),
+                  change: Math.round(deltaY)
+                });
+                behind =
+                  behind ||
+                  nodes
+                    .filter(
+                      (n) =>
+                        n.id !== d.id && getY(n) !== undefined && getY(n) < newYVal
+                    )
+                    .sort((a, b) => getY(b) - getY(a))[0];
+              }
 
-    if (!selectedNode?.originalData) {
-      console.log("ERROR: No originalData available");
-      setProceedError('No idea selected');
-      setShowProceedConfirm(true); // Show dialog again to display error
-      return;
-    }
+              // After a short delay, snap back if no modification is triggered.
+              setTimeout(() => {
+                const currentDOMNode = d3.select(this);
+                if (mods.length === 0) {
+                  currentDOMNode.transition().duration(300)
+                    .attr('transform', `translate(${coordX(getX(d))},${coordY(getY(d))})`);
+                }
+              }, 100);
+
+
+              if (mods.length > 0) {
+                // Snap the original node back; the ghost represents the drag target.
+                d3.select(this).attr('transform', `translate(${coordX(getX(d))},${coordY(getY(d))})`);
+
+                // Update _evalX and _evalY for the ghost node
+                const ghost = {
+                  ...d,
+                  id: `${d.id}-Xghost-${Date.now()}`,
+                  x: d.x,
+                  y: d.y,
+                  _evalX: newXVal,
+                  _evalY: newYVal,
+                  isGhost: true,
+                  isNewlyGenerated: true,
+                  level: d.level + 1,
+                  _tmpViewX: endX,
+                  _tmpViewY: endY,
+                };
+                setNodes((prev) => [...prev, ghost]);
+
+                // Track ghost node creation
+                setLinks((prev) => [...prev, { source: d.id, target: ghost.id }]);
+                setPendingChange({
+                  originalNode: d,
+                  ghostNode: ghost,
+                  modifications: mods,
+                  behindNode: behind,
+                  screenX: event.sourceEvent.clientX + 10,
+                  screenY: event.sourceEvent.clientY + 10,
+                });
+              }
+              // Track click and set selected node
+              // Set flag to prevent hover tracking immediately after click
+              d._justClicked = true;
+              setTimeout(() => { d._justClicked = false; }, 200);
 
-    // Check if the idea is experimental to determine S2 API key requirement
-    const isExperimental = selectedNode.originalData.is_experimental === true;
+              setSelectedNode(d);
+            })
+        );
 
-    // Validate Semantic Scholar API key only for non-experimental ideas
-    if (!isExperimental && !s2ApiKey.trim()) {
-      setProceedError('Semantic Scholar API key is required for non-experimental ideas');
-      return;
-    }
+      // Add titles first (so they appear behind nodes by default)
+      const label = nodeG.append('g')
+        .attr('class', 'label-group')
+        .style('pointer-events', 'none'); // The label should not capture mouse events
 
-    setShowProceedConfirm(false);
-    setProceedError(null);
-
-    // // Set the Semantic Scholar API key as environment variable
-    // try {
-    //   console.log("Setting Semantic Scholar API key...");
-    //   const apiKeyResponse = await fetch('/api/set-env', {
-    //     method: 'POST',
-    //     headers: {
-    //       'Content-Type': 'application/json',
-    //     },
-    //     credentials: 'include',
-    //     body: JSON.stringify({
-    //       key: 'S2_API_KEY',
-    //       value: s2ApiKey.trim()
-    //     }),
-    //   });
-
-    //   if (!apiKeyResponse.ok) {
-    //     throw new Error('Failed to set Semantic Scholar API key');
-    //   }
-
-    //   console.log("Semantic Scholar API key set successfully");
-    // } catch (error) {
-    //   console.error("Error setting Semantic Scholar API key:", error);
-    //   setProceedError('Failed to set Semantic Scholar API key: ' + error.message);
-    //   setShowProceedConfirm(true); // Show dialog again to display error
-    //   return;
-    // }
-
-    // Check if the idea is experimental (AI-related) or not
-    const idea = selectedNode.originalData;
-
-    console.log(`Idea is experimental: ${isExperimental}`);
-    console.log(`Idea details:`, {
-      title: idea.Title || idea.Name,
-      is_experimental: idea.is_experimental
-    });
+      // Add text first to measure it
+      label.append('text')
 
-    try {
-      // Check if backend is configured first
-      console.log("Checking backend configuration...");
-      setOperationStatus('Checking configuration...');
+        .attr('y', -20) // Position above the circle node (radius is 8, so -20 gives good spacing)
+        .attr('text-anchor', 'middle')
+        .style('font-family', 'Arial, sans-serif')
+        .style('font-size', '12px')
+        .style('font-weight', '600')
+        .style('fill', '#1f2937') // A dark gray for good contrast
+        .style('opacity', d => {
+          // Default transparency in plot view, solid when hovered or selected
+          const isHovered = hoveredNode && hoveredNode.id === d.id;
+          const isSelected = selectedNode && selectedNode.id === d.id;
+          return isHovered || isSelected ? 1.0 : 0.2;
+        })
+        .text(d => d.title);
+
+      // Add a backing rectangle for each text element
+      label.each(function (d) {
+        const textNode = d3.select(this).select('text').node();
+        if (textNode) {
+          const bbox = textNode.getBBox();
+          const padding = { x: 8, y: 4 };
 
-      const configCheck = await fetch('/api/get-prompts', {
-        credentials: 'include'
+          d3.select(this).insert('rect', 'text') // Insert rect before text
+            .attr('x', bbox.x - padding.x)
+            .attr('y', bbox.y - padding.y)
+            .attr('width', bbox.width + 2 * padding.x)
+            .attr('height', bbox.height + 2 * padding.y)
+            .attr('rx', 4)
+            .attr('ry', 4)
+            .style('fill', 'rgba(255, 255, 255, 0.9)')
+            .style('stroke', '#e5e7eb')
+            .style('stroke-width', 1)
+            .style('opacity', () => {
+              // Match the text opacity for backing rectangle
+              const isHovered = hoveredNode && hoveredNode.id === d.id;
+              const isSelected = selectedNode && selectedNode.id === d.id;
+              return isHovered || isSelected ? 0.7 : 0.2;
+            });
+        }
       });
 
-      if (!configCheck.ok) {
-        console.log("Backend not configured, attempting to reconfigure...");
-        setOperationStatus('Reconfiguring backend...');
+      // Add circles after labels (so they appear on top by default)
+      nodeG
+        .append('circle')
+        .attr('r', (d) =>
+          d.isBeingMerged ? 16 : d.id === mergeTargetId ? 12 : 8
+        )
+        .style('fill', (d) => getNodeColor(d))
+        .style('opacity', (d) => {
+          // Check if custom opacity is set
+          if (d.evaluationOpacity !== undefined) return d.evaluationOpacity;
+          // Otherwise use the default logic
+          return d.isGhost ? 0.5 : 1;
+        })
+        .style('stroke', (d) =>
+          selectedNode?.id === d.id ? '#000' : '#fff'
+        )
+        .style('stroke-width', (d) =>
+          selectedNode?.id === d.id ? 4 : 2
+        );
 
-        if (!apiKey.trim()) {
-          throw new Error('Backend not configured and no API key available. Please configure the API key and model first.');
+      // Add user drag target visualization
+      const dragTargetData = nodes.filter(d => {
+        if (!d || !d.userDragTarget) return false;
+
+        // Check for data integrity
+        if (typeof d.userDragTarget.x !== 'number' ||
+          typeof d.userDragTarget.y !== 'number' ||
+          !d.userDragTarget.xAxisMetric ||
+          !d.userDragTarget.yAxisMetric) {
+          console.log('[DEBUG] Invalid userDragTarget data for node:', d.id, d.userDragTarget);
+          return false;
         }
 
-        // Auto-reconfigure the backend
-        const reconfigResponse = await fetch('/api/configure', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          credentials: 'include',
-          body: JSON.stringify({
-            model: selectedModel,
-            api_key: apiKey,
-          }),
-        });
-
-        if (!reconfigResponse.ok) {
-          throw new Error('Failed to reconfigure backend');
+        // Check if the axis metrics match what was recorded during drag
+        if (d.userDragTarget.xAxisMetric !== xAxisMetric ||
+          d.userDragTarget.yAxisMetric !== yAxisMetric) {
+          console.log('[DEBUG] Axis metrics mismatch for node:', d.id,
+            'recorded:', d.userDragTarget.xAxisMetric, d.userDragTarget.yAxisMetric,
+            'current:', xAxisMetric, yAxisMetric);
+          return false; // Don't show if axis metrics have changed
         }
 
-        console.log("Backend reconfigured successfully");
-      }
+        // Get current position using dynamic axis metrics
+        const currentXValue = getX(d) || 0;
+        const currentYValue = getY(d) || 0;
 
-      if (isExperimental) {
-        // For experimental (AI-related) ideas: Generate code first, then paper
-        console.log("Processing experimental idea - generating code first...");
-        setIsGeneratingCode(true);
-        setOperationStatus('Generating experiment code...');
-        setShowLogs(true); // Show logs when starting code generation
+        const xDiff = Math.abs(currentXValue - d.userDragTarget.x);
+        const yDiff = Math.abs(currentYValue - d.userDragTarget.y);
 
-        let codeData = null;
-        let timeoutOccurred = false;
+        console.log('[DEBUG] Drag target check for node:', d.id, {
+          currentPos: [currentXValue, currentYValue],
+          dragTarget: [d.userDragTarget.x, d.userDragTarget.y],
+          differences: [xDiff, yDiff],
+          willShow: xDiff > 1 || yDiff > 1
+        });
 
-        try {
-          // Try with a manual timeout using Promise.race
-          const controller = new AbortController();
-          const timeoutId = setTimeout(() => controller.abort(), 300000); // 5 minutes timeout
-
-          const codeResponse = await fetch('/api/code', {
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/json',
-            },
-            credentials: 'include',
-            body: JSON.stringify({
-              idea: selectedNode.originalData
-            }),
-            signal: controller.signal
-          });
+        // Only show if current position differs from drag target
+        return xDiff > 1 || yDiff > 1;
+      });
 
-          clearTimeout(timeoutId);
+      console.log('[DEBUG] dragTargetData count:', dragTargetData.length,
+        'nodeIds:', dragTargetData.map(d => d.id));
 
-          if (!codeResponse.ok) {
-            const errorText = await codeResponse.text();
-            throw new Error(`Failed to generate code: ${codeResponse.status} ${errorText}`);
-          }
+      // Debug: Check all nodes for userDragTarget
+      const nodesWithDragTargets = nodes.filter(d => d.userDragTarget);
+      console.log('[DEBUG] Total nodes with userDragTarget:', nodesWithDragTargets.length);
+      nodesWithDragTargets.forEach(d => {
+        console.log('[DEBUG] Node with userDragTarget:', d.id, d.userDragTarget);
+      });
 
-          codeData = await codeResponse.json();
-          console.log("Code generation completed:", codeData);
-          setCodeResult(codeData);
+      // Draw user drag target circles (where user originally wanted the node)
+      if (dragTargetData.length > 0 && xView && yView) {
+        g.selectAll('.drag-target-circle')
+          .data(dragTargetData, d => d.id)
+          .join('circle')
+          .attr('class', 'drag-target-circle')
+          .attr('cx', d => xView(d.userDragTarget.x))  // User's original target position
+          .attr('cy', d => yView(d.userDragTarget.y))
+          .attr('r', 6)
+          .style('fill', 'none')
+          .style('stroke', '#666')
+          .style('stroke-width', 2)
+          .style('stroke-dasharray', '4,4')
+          .style('opacity', 0.85);
+
+        // Draw connection lines from evaluation result (current node position) to user's original target
+        g.selectAll('.drag-target-line')
+          .data(dragTargetData, d => d.id)
+          .join('line')
+          .attr('class', 'drag-target-line')
+          .attr('x1', d => xView(getX(d) || 0))  // Current evaluation position
+          .attr('y1', d => yView(getY(d) || 0))
+          .attr('x2', d => xView(d.userDragTarget.x))   // User's original target position
+          .attr('y2', d => yView(d.userDragTarget.y))
+          .style('stroke', '#666')
+          .style('stroke-width', 1.5)
+          .style('stroke-dasharray', '4,2')
+          .style('opacity', 0.7);
+      }
+    }
+    if (operationStatus) {
+      // Add status text at top of plot instead of overlay
+      svg
+        .append('text')
+        .attr('x', width / 2)
+        .attr('y', 30)
+        .attr('text-anchor', 'middle')
+        .attr('dominant-baseline', 'middle')
+        .style('font-size', '1.2rem')
+        .style('font-weight', '600')
+        .style('fill', '#374151')
+        .style('background', 'rgba(255, 255, 255, 0.9)')
+        .text(operationStatus);
+    }
+  }, [
+    currentView,
+    nodes,
+    links,
+    xAxisMetric,
+    yAxisMetric,
+    xAxisLabel,
+    yAxisLabel,
+    isGenerating,
+    isEvaluating,
+    operationStatus,
+    selectedNode, // Added to trigger re-render when selecting to show/hide links
+    mergeMode, // Added to trigger re-render when merge mode state changes
+    unifiedScale, // re-render when unified scale changes
+    xScalingCenter, // re-render when X scaling center changes
+    yScalingCenter, // re-render when Y scaling center changes
+    calculateNodeMidpoints,
+    colorMap,
+    getCurrentDimensions,
+    getNodeColor,
+    getNodeX,
+    getNodeY,
+    mergeTargetId,
+    handleMergeConfirm,
+    handleMergeCancel,
+    hideEvaluationView, // trigger re-render when plot view visibility changes
+    userDragTargets, // trigger re-render when drag targets change
+    hoveredNode
+  ]);
 
-          if (!codeData.success) {
-            throw new Error(codeData.error || 'Code generation failed');
-          }
-        } catch (error) {
-          if (error.name === 'AbortError' || error.name === 'TimeoutError' ||
-            error.message.includes('ECONNRESET') || error.message.includes('socket hang up') ||
-            error.message.includes('Proxy error') || error.message.includes('network')) {
-            console.log("Request failed due to connection issue, checking for completed files...");
-            console.log("Error details:", error.message);
-            setOperationStatus('Connection lost, checking if code generation completed...');
-
-            // Single check for existing files (backend may have completed despite connection issue)
-            const expectedFileUrl = '/api/files/experiments/experiment.py';
-            try {
-              const fileCheck = await fetch(expectedFileUrl);
-              if (fileCheck.ok) {
-                const fileData = await fileCheck.json();
-                if (fileData.content && fileData.content.length > 50) {
-                  console.log("Generated files found! Code generation was completed.");
-                  codeData = {
-                    success: true,
-                    experiment_dir: "experiments",
-                    status: true,
-                    message: "Code generation completed (files found after connection issue)"
-                  };
-                } else {
-                  throw new Error('Code generation failed - connection lost and no files generated');
-                }
-              } else {
-                throw new Error('Code generation failed - connection lost and no files generated');
-              }
-            } catch (fileError) {
-              throw new Error('Code generation failed - connection lost and no files generated');
-            }
-          } else {
-            throw error;
-          }
-        }
+  // Separate useEffect for updating node hover/selection styling without recreating event listeners
+  useEffect(() => {
+    if (!svgRef.current || currentView === 'home_view') return;
 
-        // Store results
-        setCodeResult(codeData);
-        const finalExperimentDir = codeData.experiment_dir;
+    // Update circle styling for selection states only
+    d3.select(svgRef.current)
+      .selectAll('circle')
+      .style('stroke', (d) =>
+        d && d.id ? (selectedNode?.id === d.id ? '#000' : '#fff') : '#fff'
+      )
+      .style('stroke-width', (d) =>
+        d && d.id ? (selectedNode?.id === d.id ? 4 : 2) : 2
+      );
+  }, [selectedNode, currentView]);
 
-        // Load generated files
-        setOperationStatus('Loading generated files...');
-        await loadGeneratedFiles(finalExperimentDir);
+  // Separate useEffect for merge UI updates to prevent flickering
+  useEffect(() => {
+    if (!svgRef.current || currentView === 'home_view') return;
 
-        // Mark that code has been generated (this will show Code View tab)
-        setHasGeneratedCode(true);
+    const svg = d3.select(svgRef.current);
+    let mergeUILayer = svg.select('.merge-ui-layer');
 
-        // Automatically switch to Code View
-        setCurrentView('code_view');
-        console.log("Switched to Code View to display generated files");
-        setOperationStatus('Code generation completed successfully!');
+    // Clear existing merge UI elements
+    if (!mergeUILayer.empty()) {
+      mergeUILayer.selectAll('*').remove();
+    }
 
-        // Code generation completed successfully
-        setIsGeneratingCode(false);
-        setOperationStatus('Code generation completed successfully! You can now generate a paper if needed.');
+    // Only render merge UI if in merge mode and in tree view
+    if (mergeMode.active && mergeMode.firstNode && nodes.length > 0 && currentView === 'exploration') {
+      // Ensure merge UI layer exists
+      if (mergeUILayer.empty()) {
+        mergeUILayer = svg.append('g').attr('class', 'merge-ui-layer');
+      }
 
-      } else {
-        // For non-experimental (non-AI-related) ideas: Generate paper directly since S2 key is already provided
-        console.log("Processing non-experimental idea - generating paper directly...");
-        setIsGeneratingPaper(true);
-        setOperationStatus('Generating paper...');
-        setShowLogs(true); // Show logs when starting paper generation
+      // Apply current zoom transform to merge UI layer
+      if (zoomTransformRef.current) {
+        mergeUILayer.attr('transform', zoomTransformRef.current);
+      }
 
-        const paperResponse = await fetch('/api/write', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          credentials: 'include',
-          body: JSON.stringify({
-            idea: selectedNode.originalData,
-            experiment_dir: null, // No experiment directory for non-experimental papers
-            s2_api_key: s2ApiKey.trim(),
-          }),
-        });
+      // Get the positioned layout nodes from ref
+      const layoutNodes = layoutNodesRef.current;
+      const firstNodeElement = layoutNodes ? layoutNodes.find(n => n.id === mergeMode.firstNode.id) : null;
 
-        if (!paperResponse.ok) {
-          throw new Error('Failed to generate paper');
+
+      if (firstNodeElement) {
+        // Always add special stroke around the first selected node
+        mergeUILayer.append('circle')
+          .attr('class', 'merge-first-node')
+          .attr('cx', firstNodeElement.x)
+          .attr('cy', firstNodeElement.y)
+          .attr('r', 32)
+          .style('fill', 'none')
+          .style('stroke', 'rgb(192,192,192)')
+          .style('stroke-width', 4)
+          .style('pointer-events', 'none')
+          .style('opacity', 1)
+          .style('z-index', 1000);
+
+        if (!mergeMode.secondNode) {
+          // Draw line from first node to cursor
+          mergeUILayer.append('path')
+            .attr('class', 'merge-cursor-line')
+            .attr('d', `M${firstNodeElement.x},${firstNodeElement.y} L${mergeMode.cursorPosition.x},${mergeMode.cursorPosition.y}`)
+            .style('stroke', 'rgb(192,192,192)')
+            .style('stroke-width', 2)
+            .style('pointer-events', 'none')
+            .style('opacity', 0.7);
+        } else {
+          // Draw line between first and second node
+          const secondNodeElement = layoutNodes.find(n => n.id === mergeMode.secondNode.id);
+          if (secondNodeElement) {
+            // Add special stroke around second selected node
+            mergeUILayer.append('circle')
+              .attr('class', 'merge-second-node')
+              .attr('cx', secondNodeElement.x)
+              .attr('cy', secondNodeElement.y)
+              .attr('r', 32)
+              .style('fill', 'none')
+              .style('stroke', 'rgb(192,192,192)')
+              .style('stroke-width', 4)
+              .style('pointer-events', 'none')
+              .style('opacity', 1)
+              .style('z-index', 1000);
+
+            // Dashed line between nodes
+            mergeUILayer.append('path')
+              .attr('class', 'merge-connection-line')
+              .attr('d', `M${firstNodeElement.x},${firstNodeElement.y} L${secondNodeElement.x},${secondNodeElement.y}`)
+              .style('stroke', 'rgb(192,192,192)')
+              .style('stroke-width', 3)
+              .style('pointer-events', 'none');
+
+            // Merge dialog in the middle
+            if (mergeMode.showDialog) {
+              const midX = (firstNodeElement.x + secondNodeElement.x) / 2;
+              const midY = (firstNodeElement.y + secondNodeElement.y) / 2;
+
+              // Dialog background with dashed border
+              const dialogGroup = mergeUILayer.append('g')
+                .attr('class', 'merge-dialog')
+                .attr('data-panel-root', 'merge-dialog')
+                .attr('transform', `translate(${midX}, ${midY})`);
+
+              dialogGroup.append('rect')
+                .attr('x', -50)
+                .attr('y', -35)
+                .attr('width', 100)
+                .attr('height', 70)
+                .attr('rx', 8)
+                .style('fill', 'white')
+                .style('stroke', 'rgb(192,192,192)')
+                .style('stroke-width', 2)
+                .style('filter', 'drop-shadow(0 4px 8px rgba(0,0,0,0.1))');
+
+              // Merge button (top)
+              const mergeButton = dialogGroup.append('g')
+                .attr('class', 'merge-button')
+                .style('cursor', 'pointer');
+
+              mergeButton.append('rect')
+                .attr('x', -35)
+                .attr('y', -25)
+                .attr('width', 70)
+                .attr('height', 20)
+                .attr('rx', 4)
+                .style('fill', '#4CAF50')
+                .style('stroke', 'none');
+
+              mergeButton.append('text')
+                .attr('x', 0)
+                .attr('y', -15)
+                .attr('text-anchor', 'middle')
+                .attr('dominant-baseline', 'middle')
+                .style('fill', 'white')
+                .style('font-size', '12px')
+                .style('font-weight', 'bold')
+                .style('pointer-events', 'none')
+                .text('Merge');
+
+              // Cancel button (bottom)
+              const cancelButton = dialogGroup.append('g')
+                .attr('class', 'cancel-button')
+                .style('cursor', 'pointer');
+
+              cancelButton.append('rect')
+                .attr('x', -35)
+                .attr('y', 5)
+                .attr('width', 70)
+                .attr('height', 20)
+                .attr('rx', 4)
+                .style('fill', '#f44336')
+                .style('stroke', 'none');
+
+              cancelButton.append('text')
+                .attr('x', 0)
+                .attr('y', 15)
+                .attr('text-anchor', 'middle')
+                .attr('dominant-baseline', 'middle')
+                .style('fill', 'white')
+                .style('font-size', '12px')
+                .style('font-weight', 'bold')
+                .style('pointer-events', 'none')
+                .text('Cancel');
+
+              // Add click handlers for buttons
+              mergeButton.on('click', () => {
+                handleMergeConfirm(mergeMode.firstNode, mergeMode.secondNode);
+              });
+
+              cancelButton.on('click', () => {
+                handleMergeCancel();
+              });
+            }
+          }
         }
+      }
+    }
+  }, [
+    mergeMode.active,
+    mergeMode.firstNode,
+    mergeMode.secondNode,
+    mergeMode.showDialog,
+    mergeMode.cursorPosition,
+    nodes,
+    currentView,
+    handleMergeConfirm,
+    handleMergeCancel
+  ]);
+
+  // Keyboard event listener for merge mode cancellation
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === 'Escape' && mergeMode.active) {
+        event.preventDefault();
+        handleMergeCancel();
+      }
+    };
 
-        const paperData = await paperResponse.json();
-        console.log("Paper generation completed:", paperData);
-        setPaperResult(paperData);
+    if (mergeMode.active) {
+      document.addEventListener('keydown', handleKeyDown);
+    }
 
-        if (!paperData.success) {
-          throw new Error(paperData.error || 'Paper generation failed');
-        }
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [mergeMode.active, handleMergeCancel]);
+
+  // Unified useEffect for node and title layering
+  useEffect(() => {
+    // Exit early if the SVG isn't ready or we are in the home view
+    if (!svgRef.current || currentView === 'home_view') return;
 
-        // Switch to paper view to show results for non-experimental idea
-        setCurrentView('paper_view');
-        setOperationStatus('Paper generated successfully!');
+    const svg = d3.select(svgRef.current);
+
+    // --- Tree View Logic ---
+    // This logic remains unchanged.
+    if (currentView === 'exploration') {
+      if (selectedNode) {
+        svg.selectAll('.node')
+          .filter(d => d && d.id === selectedNode.id)
+          .raise();
       }
+      return; // End execution for tree view
+    }
 
-    } catch (err) {
-      console.error('=== ERROR IN PROCEED WORKFLOW ===');
-      console.error('Error details:', err);
-      console.error('Error message:', err.message);
-      console.error('Error stack:', err.stack);
-      setProceedError(err.message);
-
-      // Show Code View even when coder fails so user can see error and retry
-      if (isExperimental) {
-        console.log("Switching to Code View to show error details");
-        setCurrentView('code_view');
-        setHasGeneratedCode(true); // Enable Code View tab
+    // --- Plot View Logic ---
+    // This simplified logic correctly prioritizes the layering rules.
+    if (currentView === 'evaluation') {
+      const allNodeGroups = svg.selectAll('.node-group');
+      if (allNodeGroups.empty()) return;
+
+      // --- Hover State (The Exception) ---
+      // If a node is hovered, its entire group (title and circle) is
+      // brought to the absolute front. This is the highest-priority action.
+      if (hoveredNode) {
+        allNodeGroups
+          .filter(d => d && d.id === hoveredNode.id)
+          .raise();
+      } else {
+        // --- Default & Selected State (The Rule) ---
+        // In all non-hover states, the primary rule is that all circles
+        // must be on top of all titles. This single line enforces that rule.
+        // The selected node is distinguished by its stroke color, not by
+        // layering its title over other circles.
+        allNodeGroups.selectAll('circle').raise();
       }
-    } finally {
-      setIsGeneratingCode(false);
-      setIsGeneratingPaper(false);
-      setOperationStatus('');
     }
-  };
+  }, [hoveredNode, selectedNode, currentView]);
+
+  const handleAddCustomIdea = async (e) => {
+    e.preventDefault();
+    if (!customIdea.title.trim() || !customIdea.content.trim()) return;
+
+    setIsGenerating(true);
+    setOperationStatus('Adding custom idea...');
+    setError(null);
+
+    try {
+      // Generate custom idea ID in C-1, C-2, C-3 format
+      const newId = `C-${customIdeaCounter}`;
+      setCustomIdeaCounter(prev => prev + 1);
+
+      const newIdea = {
+        id: newId,
+        ...customIdea,
+        // Add required fields for evaluation API
+        Name: customIdea.title.trim(),
+        Title: customIdea.title.trim(),
+        Problem: customIdea.content.trim(),
+        Importance: '',
+        Difficulty: '',
+        NoveltyComparison: '',
+        Approach: ''
+      };
 
-  // PDF Comment functions
-  const addComment = (pageNumber = 1) => {
-    if (newComment.trim()) {
-      const comment = {
-        id: Date.now(),
-        text: newComment,
-        pageNumber,
-        timestamp: new Date().toLocaleString(),
-        author: 'User'
+      // 添加到假设列表
+      const updatedIdeasList = [...ideasList, newIdea];
+      setIdeasList(updatedIdeasList);
+
+      // 创建新节点 - custom idea始终在第一层，不连接任何节点
+      const newNode = {
+        id: newId,
+        level: 1, // 始终在第一层
+        title: customIdea.title.trim(),
+        content: customIdea.content.trim(),
+        type: 'complex',
+        x: 0, // 初始位置，后续会通过布局算法调整
+        y: 150, // 初始位置，后续会通过布局算法调整
+        originalData: newIdea,
       };
-      setPdfComments([...pdfComments, comment]);
-      setNewComment('');
+
+      console.log('[DEBUG] Created custom idea node:', {
+        id: newNode.id,
+        title: newNode.title,
+        originalData: newNode.originalData
+      });
+
+      // 添加节点（不添加任何连接）
+      setNodes((prev) => [...prev, newNode]);
+
+      // Custom idea不连接任何节点，保持独立
+
+      // 评估新假设
+      await evaluateIdeas(updatedIdeasList, { allowAutoCenter: true });
+
+      // 重置表单
+      setCustomIdea({ title: '', content: '' });
+      setIsAddingCustom(false);
+    } catch (err) {
+      console.error('Error adding custom idea:', err);
+      setError(err.message);
+    } finally {
+      setIsGenerating(false);
+      setOperationStatus('');
     }
   };
 
-  const deleteComment = (commentId) => {
-    setPdfComments(pdfComments.filter(c => c.id !== commentId));
-  };
+  // ============== Workflow: Code → Write → Review ==============
+  const handleProceedWithSelectedIdea = async (node) => {
+    if (!node || node.type === 'root' || node.type === 'fragment') return;
+    const idea = node.originalData || { id: node.id, title: node.title, content: node.content };
+    setWorkflowIdea(node);
+    setWorkflowStep('coding');
+    setWorkflowError(null);
+    setCodeResult(null);
+    setCodeFiles([]);
+    setSelectedCodeFile(null);
+    setShowWriterPrompt(false);
+    setPaperResult(null);
+    setReviewResult(null);
+    setCurrentView('code_view');
 
-  const downloadPDF = async (pdfPath) => {
     try {
-      // Fetch the PDF as a blob to force download
-      const response = await fetch(`http://localhost:5000${pdfPath}`);
-
-      if (!response.ok) {
-        throw new Error(`Failed to download PDF: ${response.status}`);
+      const response = await fetch('/api/code', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ idea: { originalData: idea } }),
+      });
+      const data = await response.json();
+      if (!response.ok || data.error) throw new Error(data.error || 'Code generation failed');
+      if (data.success === false) throw new Error(data.error_details || data.message || 'Code execution failed');
+      setCodeResult(data);
+      setWorkflowStep('code_done');
+
+      // Fetch file list from the experiment directory
+      if (data.experiment_dir) {
+        await fetchExperimentFiles(data.experiment_dir);
       }
+    } catch (err) {
+      setWorkflowError(err.message);
+      setWorkflowStep('code_error');
+    }
+  };
 
-      const blob = await response.blob();
+  const fetchExperimentFiles = async (expDir) => {
+    // Known files the coder always produces
+    const candidates = [
+      'experiment.py',
+      'experiment_results.txt',
+      'notes.txt',
+    ];
+    // Also check run_N.py variants (up to 5 runs)
+    for (let i = 1; i <= 5; i++) {
+      candidates.push(`run_${i}.py`);
+      candidates.push(`run_${i}/final_info.json`);
+    }
 
-      // Extract filename from path or use default
-      const filename = pdfPath.split('/').pop() || 'research_paper.pdf';
+    const found = [];
+    await Promise.all(
+      candidates.map(async (name) => {
+        const path = `${expDir}/${name}`;
+        try {
+          const r = await fetch(`/api/files/${path}`, { credentials: 'include' });
+          if (r.ok) found.push({ name, path });
+        } catch (_) { /* file absent, skip */ }
+      })
+    );
 
-      // Create download link
-      const link = document.createElement('a');
-      link.href = URL.createObjectURL(blob);
-      link.download = filename;
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
+    // Sort: experiment.py first, then alphabetical
+    found.sort((a, b) => {
+      if (a.name === 'experiment.py') return -1;
+      if (b.name === 'experiment.py') return 1;
+      return a.name.localeCompare(b.name);
+    });
 
-      // Clean up the object URL
-      URL.revokeObjectURL(link.href);
+    setCodeFiles(found);
 
-    } catch (error) {
-      console.error('Error downloading PDF:', error);
-      alert('Failed to download PDF. Please try again.');
-    }
+    // Auto-open experiment.py if present
+    const main = found.find(f => f.name === 'experiment.py') || found[0];
+    if (main) await loadCodeFile(main);
   };
 
-  const reviewPaper = async (pdfPath) => {
-    if (!pdfPath) {
-      console.error('No PDF path provided for review');
-      return;
+  const loadCodeFile = async (file) => {
+    try {
+      const r = await fetch(`/api/files/${file.path}`, { credentials: 'include' });
+      const data = await r.json();
+      setSelectedCodeFile({ ...file, content: data.content || '' });
+    } catch (_) {
+      setSelectedCodeFile({ ...file, content: '(failed to load file)' });
     }
+  };
 
-    setIsReviewing(true);
+  const handleRerunCoder = async () => {
+    if (!workflowIdea) return;
+    const idea = workflowIdea.originalData || { id: workflowIdea.id, title: workflowIdea.title, content: workflowIdea.content };
+    setWorkflowStep('coding');
+    setWorkflowError(null);
+    setCodeResult(null);
+    setCodeFiles([]);
+    setSelectedCodeFile(null);
+    setShowWriterPrompt(false);
+    setPaperResult(null);
     setReviewResult(null);
 
     try {
-      console.log('Starting paper review for:', pdfPath);
+      const response = await fetch('/api/code', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ idea: { originalData: idea } }),
+      });
+      const data = await response.json();
+      if (!response.ok || data.error) throw new Error(data.error || 'Code generation failed');
+      if (data.success === false) throw new Error(data.error_details || data.message || 'Code execution failed');
+      setCodeResult(data);
+      setWorkflowStep('code_done');
+      if (data.experiment_dir) {
+        await fetchExperimentFiles(data.experiment_dir);
+      }
+    } catch (err) {
+      setWorkflowError(err.message);
+      setWorkflowStep('code_error');
+    }
+  };
 
-      const response = await fetch('http://localhost:5000/api/review', {
+  const handleWritePaper = async () => {
+    if (!workflowIdea) return;
+    setShowWriterPrompt(false);
+    setWorkflowStep('writing');
+    setWorkflowError(null);
+    setCurrentView('paper_view');
+    const idea = workflowIdea.originalData || { id: workflowIdea.id, title: workflowIdea.title };
+    try {
+      const response = await fetch('/api/write', {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
         body: JSON.stringify({
-          pdf_path: pdfPath
+          idea: { originalData: idea },
+          experiment_dir: codeResult?.experiment_dir || null,
+          s2_api_key: s2ApiKey,
         }),
       });
+      const data = await response.json();
+      if (!response.ok || data.error) throw new Error(data.error || 'Paper generation failed');
+      setPaperResult(data);
+      setWorkflowStep('paper_done');
+    } catch (err) {
+      setWorkflowError(err.message);
+      setWorkflowStep('paper_error');
+    }
+  };
 
-      if (!response.ok) {
-        const errorData = await response.json();
-        throw new Error(errorData.error || 'Review failed');
-      }
-
+  const handleReviewPaper = async () => {
+    if (!paperResult?.pdf_path) return;
+    setWorkflowStep('reviewing');
+    setWorkflowError(null);
+    try {
+      const response = await fetch('/api/review', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ pdf_path: paperResult.pdf_path, s2_api_key: s2ApiKey }),
+      });
       const data = await response.json();
-      console.log('Review completed:', data);
+      if (!response.ok || data.error) throw new Error(data.error || 'Review failed');
       setReviewResult(data.review);
-      setRightPanelTab('review'); // Switch to review tab to show results
-
+      setWorkflowStep('review_done');
     } catch (err) {
-      console.error('Error reviewing paper:', err);
-      setReviewResult({ error: err.message });
-    } finally {
-      setIsReviewing(false);
+      setWorkflowError(err.message);
+      setWorkflowStep('review_error');
     }
   };
 
-  // Enhanced code editing functions
-  const switchCodeTab = (tabName) => {
-    // Save current content before switching
-    if (activeCodeTab && experimentFiles[activeCodeTab] !== undefined) {
-      setExperimentFiles(prev => ({
-        ...prev,
-        [activeCodeTab]: codeContent
-      }));
-    }
+  // === 拖放处理函数 ===
+  const handleNodeDropOnEvaluation = (e, targetNode) => {
+    e.preventDefault();
+    const draggedNodeId = e.dataTransfer.getData('nodeId');
+    const isFragment = e.dataTransfer.getData('isFragment') === 'true';
 
-    // Switch to new tab
-    setActiveCodeTab(tabName);
-    setCodeFileName(tabName);
-    setCodeContent(experimentFiles[tabName] || '');
-  };
+    if (!draggedNodeId) return;
 
+    // 从 nodes 或 fragmentNodes 查找被拖动的节点
+    const draggedNode = nodes.find(n => n.id === draggedNodeId) ||
+      fragmentNodes.find(f => f.id === draggedNodeId);
 
+    if (!draggedNode) return;
 
-  const downloadExperimentFiles = async () => {
-    // Create a zip file with all experiment files
-    const filesToDownload = Object.entries(experimentFiles);
-    if (filesToDownload.length === 0) {
-      alert('No experiment files to download');
+    // Fragment 只能拖到节点上进行 merge，不能拖到空白区域
+    if (isFragment && !targetNode) {
+      console.log('[Fragment] Cannot drop fragment on empty space - fragments can only merge with nodes');
       return;
     }
 
-    try {
-      const JSZip = (await import('jszip')).default;
-      const zip = new JSZip();
 
-      // Add all experiment files to the zip
-      filesToDownload.forEach(([fileName, content]) => {
-        zip.file(fileName, content);
+    // 如果是 fragment 拖到另一个节点上，触发 merge
+    if (isFragment && targetNode) {
+      // 计算目标节点在屏幕上的位置(象限正下方)
+      const targetElement = document.querySelector(`[data-node-id="${targetNode.id}"]`);
+      let screenX = e.clientX; // Default to mouse position for 3D
+      let screenY = e.clientY; // Default to mouse position for 3D
+
+      if (targetElement) {
+        const rect = targetElement.getBoundingClientRect();
+        screenX = rect.left + rect.width / 2; // Center of node
+        screenY = rect.bottom + 10; // 节点下方10px
+      }
+
+      // Adjust for modal width (centered)
+      screenX = screenX - 150;
+
+      const container = evaluationContainerRef.current;
+      let ghostPosition = fragmentDragOriginRef.current;
+      if (!ghostPosition && container) {
+        const containerRect = container.getBoundingClientRect();
+        ghostPosition = {
+          x: e.clientX - containerRect.left,
+          y: e.clientY - containerRect.top
+        };
+      }
+
+      setDragVisualState({
+        type: 'merge',
+        sourceNodeId: draggedNode.id,
+        targetNodeId: targetNode.id,
+        ghostPosition
       });
 
-      // Generate the zip file
-      const zipBlob = await zip.generateAsync({ type: 'blob' });
-
-      // Create download link
-      const link = document.createElement('a');
-      link.href = URL.createObjectURL(zipBlob);
-      link.download = 'experiment_files.zip';
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-
-      // Clean up the object URL
-      URL.revokeObjectURL(link.href);
-    } catch (error) {
-      console.error('Error creating zip file:', error);
-      alert('Failed to create zip file. Please try again.');
+      setPendingMerge({
+        action: 'merge',
+        sourceNode: draggedNode,
+        targetNode: targetNode,
+        isFragmentMerge: true,
+        screenX,
+        screenY
+      });
+      fragmentDragOriginRef.current = null;
+    } else {
+      // 显示操作选择：New Idea 或 Modify Eval
+      setMergeTargetId(null);
+      setPendingMerge({
+        sourceNode: draggedNode,
+        targetNode: targetNode, // 可能是 null（空白区域）
+        action: 'evaluation_drag',
+        isFragment
+      });
     }
   };
 
+  // ============== 3D Cube Navigation Logic ==============
+
+  const clampPitch = useCallback((value) => Math.max(-90, Math.min(90, value)), []);
+
+  const normalizeYaw = useCallback((value) => {
+    let v = value % 360;
+    if (v > 180) v -= 360;
+    if (v <= -180) v += 360;
+    return v;
+  }, []);
+
+  const snapRotation = useCallback((rotation) => {
+    const snappedYaw = normalizeYaw(Math.round(rotation.yaw / 90) * 90);
+    const snappedPitch = clampPitch(Math.round(rotation.pitch / 90) * 90);
+    return { yaw: snappedYaw, pitch: snappedPitch };
+  }, [clampPitch, normalizeYaw]);
+
+  const getFaceFromRotation = useCallback((rotation) => {
+    const yaw = normalizeYaw(rotation.yaw);
+    const pitch = clampPitch(rotation.pitch);
+
+    if (pitch > 45) return 2; // Top
+    if (pitch < -45) return 5; // Bottom
+    if (yaw >= 45 && yaw < 135) return 1; // Right
+    if (yaw <= -45 && yaw > -135) return 4; // Left
+    if (yaw >= 135 || yaw < -135) return 3; // Back
+    return 0; // Front
+  }, [clampPitch, normalizeYaw]);
+
+  const beginSnapToFace = useCallback((rotation) => {
+    const snapped = snapRotation(rotation);
+    setIsSnapping(true);
+    setCubeRotation(snapped);
+    setCurrentFaceIndex(getFaceFromRotation(snapped));
+    if (snapTimerRef.current) {
+      clearTimeout(snapTimerRef.current);
+    }
+    snapTimerRef.current = setTimeout(() => setIsSnapping(false), 350);
+  }, [getFaceFromRotation, snapRotation]);
+
+  const trackCubeRotate = useCallback((source, fromRotation, toRotation) => {
+  }, []);
+
+  const handleStepRotation = useCallback((direction, source = 'unknown') => {
+    let deltaYaw = 0;
+    let deltaPitch = 0;
+    if (direction === 'right') deltaYaw = 90;
+    if (direction === 'left') deltaYaw = -90;
+    if (direction === 'up') deltaPitch = 90;
+    if (direction === 'down') deltaPitch = -90;
+
+    const next = {
+      yaw: cubeRotation.yaw + deltaYaw,
+      pitch: clampPitch(cubeRotation.pitch + deltaPitch)
+    };
 
-  // ============== 段落11：整体布局，渲染主界面 JSX ==============
-  return (
-    <div style={{ fontFamily: 'Arial, sans-serif', position: 'relative' }}>
-      {/* 把 showTree 与 setShowTree 传给 TopNav，解决 setShowTree is not a function */}
-      <TopNav currentView={currentView} setCurrentView={setCurrentView} showCodeView={hasGeneratedCode} />
+    const snapped = snapRotation(next);
+    trackCubeRotate(source, cubeRotation, snapped);
+    beginSnapToFace(next);
+  }, [beginSnapToFace, clampPitch, cubeRotation, snapRotation, trackCubeRotate]);
 
-      {currentView === 'home_view' ? (
-        <OverviewPage />
-      ) : currentView === 'code_view' ? (
-        /* Enhanced Code View - Full Screen */
-        <div style={{ padding: '20px', backgroundColor: '#f9fafb', minHeight: '90vh' }}>
-          <div style={{ maxWidth: '1600px', margin: '0 auto' }}>
-            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
-              <h1 style={{ fontSize: '1.5rem', fontWeight: 600, color: '#1f2937', margin: 0 }}>
-                Experiment Code Editor
-              </h1>
-
-              {/* Enhanced Toolbar */}
-              <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
-
-                {/* Retry Code Generation Button */}
-                <button
-                  onClick={() => handleRetryCodeGeneration(selectedNode)}
-                  disabled={!selectedNode || isGeneratingCode}
-                  style={{
-                    padding: '8px 16px',
-                    backgroundColor: !selectedNode || isGeneratingCode ? '#9CA3AF' : '#F59E0B',
-                    color: 'white',
-                    border: 'none',
-                    borderRadius: '6px',
-                    cursor: !selectedNode || isGeneratingCode ? 'not-allowed' : 'pointer',
-                    fontSize: '0.875rem',
-                    fontWeight: 500,
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: '6px'
-                  }}
-                >
-                  🔄 Retry Code Generation
-                </button>
+  // Add keyboard navigation
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (currentView !== 'exploration') return;
+      if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+
+      switch (e.key) {
+        case 'ArrowRight': handleStepRotation('right', 'keyboard'); break;
+        case 'ArrowLeft': handleStepRotation('left', 'keyboard'); break;
+        case 'ArrowUp': handleStepRotation('up', 'keyboard'); break;
+        case 'ArrowDown': handleStepRotation('down', 'keyboard'); break;
+        default: break;
+      }
+    };
 
-                {/* Generate Paper Button */}
-                <button
-                  onClick={() => handleGeneratePaper(selectedNode, codeResult?.experiment_dir)}
-                  disabled={!selectedNode || isGeneratingPaper || (selectedNode?.originalData?.is_experimental && (!codeResult || !codeResult.success))}
-                  style={{
-                    padding: '8px 16px',
-                    backgroundColor: (!selectedNode || isGeneratingPaper || (selectedNode?.originalData?.is_experimental && (!codeResult || !codeResult.success))) ? '#9CA3AF' : '#10B981',
-                    color: 'white',
-                    border: 'none',
-                    borderRadius: '6px',
-                    cursor: (!selectedNode || isGeneratingPaper || (selectedNode?.originalData?.is_experimental && (!codeResult || !codeResult.success))) ? 'not-allowed' : 'pointer',
-                    fontSize: '0.875rem',
-                    fontWeight: 500,
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: '6px'
-                  }}
-                >
-                  {isGeneratingPaper ? '⏳ Generating...' : '📄 Generate Paper'}
-                </button>
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [currentView, handleStepRotation]);
 
-                {/* Download All Button */}
-                <button
-                  onClick={downloadExperimentFiles}
-                  disabled={Object.keys(experimentFiles).length === 0}
-                  style={{
-                    padding: '8px 16px',
-                    backgroundColor: Object.keys(experimentFiles).length > 0 ? '#4C84FF' : '#9CA3AF',
-                    color: 'white',
-                    border: 'none',
-                    borderRadius: '6px',
-                    cursor: Object.keys(experimentFiles).length > 0 ? 'pointer' : 'not-allowed',
-                    fontSize: '0.875rem',
-                    fontWeight: 500,
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: '6px'
-                  }}
-                >
-                  💾 Download All
-                </button>
+  // Pointer Drag Handlers (use pointer capture so we always get the "up" event)
+  const handleFacePointerDown = (e) => {
+    if (e.button !== 0) return;
+    if (e.target.closest('[data-node-id]')) return;
+    e.preventDefault();
 
-              </div>
-            </div>
-            {codeResult && !codeResult.success && codeResult.error_details && (
-              <div style={{
-                backgroundColor: '#fef2f2',
-                border: '1px solid #fecaca',
-                borderRadius: '8px',
-                padding: '16px',
-                marginBottom: '20px',
-                color: '#b91c1c',
-              }}>
-                <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '12px' }}>
-                  <span style={{ fontSize: '1.2rem' }}>❌</span>
-                  <strong style={{ fontSize: '1rem', color: '#991b1b' }}>Code Generation Failed</strong>
-                </div>
-                <p style={{ margin: '0 0 8px 0', color: '#374151' }}>The system failed to generate a runnable script. The final error message was:</p>
-                <pre style={{
-                  backgroundColor: '#1f2937',
-                  color: '#f3f4f6',
-                  padding: '12px',
-                  borderRadius: '6px',
-                  fontSize: '0.8rem',
-                  whiteSpace: 'pre-wrap',
-                  wordBreak: 'break-all',
-                  fontFamily: 'monospace',
-                  maxHeight: '200px', // Prevents huge error messages from taking over the screen
-                  overflowY: 'auto', // Add a scrollbar if the error is long
-                }}>
-                  {codeResult.error_details}
-                </pre>
-              </div>
-            )}
-            {isGeneratingCode && (
-              <div style={{
-                padding: '20px',
-                backgroundColor: '#eff6ff',
-                borderRadius: '8px',
-                marginBottom: '20px',
-                textAlign: 'center'
-              }}>
-                <div style={{ color: '#1d4ed8', fontSize: '1rem', fontWeight: 500 }}>
-                  🔄 Generating experimental code...
-                </div>
-                <div style={{ color: '#6b7280', fontSize: '0.875rem', marginTop: '8px' }}>
-                  This may take several minutes, please wait...
-                </div>
-              </div>
-            )}
+    cubeDragRef.current = {
+      pointerId: e.pointerId,
+      x: e.clientX,
+      y: e.clientY,
+      startYaw: cubeRotation.yaw,
+      startPitch: cubeRotation.pitch,
+      currentYaw: cubeRotation.yaw,
+      currentPitch: cubeRotation.pitch,
+      moved: false
+    };
+    e.currentTarget.setPointerCapture?.(e.pointerId);
+    setIsSnapping(false);
+  };
 
-            {codeResult && codeResult.success && (
-              <div style={{ backgroundColor: '#f0fdf4', border: '1px solid #bbf7d0', borderRadius: '8px', padding: '16px', marginBottom: '20px' }}>
-                <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px' }}>
-                  <span style={{ color: '#16a34a', fontSize: '1.1rem' }}>✅</span>
-                  <strong style={{ color: '#166534' }}>Experiment Generated Successfully</strong>
-                </div>
-                <div style={{ display: 'flex', gap: '20px', fontSize: '0.875rem', color: '#166534' }}>
-                  <div>
-                    <strong>Directory:</strong>
-                    <code style={{ backgroundColor: '#dcfce7', padding: '2px 6px', borderRadius: '4px', marginLeft: '8px' }}>
-                      {codeResult.experiment_dir}
-                    </code>
-                  </div>
-                  <div>
-                    <strong>Files:</strong> {Object.keys(experimentFiles).length} loaded
-                  </div>
-                </div>
-              </div>
-            )}
+  const handleFacePointerMove = (e) => {
+    if (!cubeDragRef.current) return;
+    if (cubeDragRef.current.pointerId !== e.pointerId) return;
+    e.preventDefault();
 
-            {/* Main Layout with Sidebar */}
-            <div style={{ display: 'flex', gap: '20px', height: '700px' }}>
-              {/* File Explorer Sidebar */}
-              <div style={{
-                width: '250px',
-                backgroundColor: 'white',
-                borderRadius: '8px',
-                border: '1px solid #e5e7eb',
-                boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
-                display: 'flex',
-                flexDirection: 'column'
-              }}>
-                <div style={{
-                  backgroundColor: '#f8fafc',
-                  padding: '12px 16px',
-                  borderBottom: '1px solid #e5e7eb',
-                  fontSize: '0.875rem',
-                  color: '#64748b',
-                  fontWeight: 500
-                }}>
-                  📁 Experiment Files
-                </div>
+    const dx = e.clientX - cubeDragRef.current.x;
+    const dy = e.clientY - cubeDragRef.current.y;
+    const sensitivity = 0.4;
+    const yaw = normalizeYaw(cubeDragRef.current.startYaw + dx * sensitivity);
+    const pitch = clampPitch(cubeDragRef.current.startPitch - dy * sensitivity);
+    cubeDragRef.current.moved = true;
+    cubeDragRef.current.currentYaw = yaw;
+    cubeDragRef.current.currentPitch = pitch;
+    setCubeRotation({ yaw, pitch });
+  };
 
-                <div style={{ flex: 1, padding: '8px' }}>
-                  {Object.keys(experimentFiles).length === 0 ? (
-                    <div style={{
-                      textAlign: 'center',
-                      padding: '20px',
-                      color: '#6b7280',
-                      fontSize: '0.875rem'
-                    }}>
-                      No files loaded
-                    </div>
-                  ) : (
-                    Object.keys(experimentFiles).map((fileName) => (
-                      <div
-                        key={fileName}
-                        onClick={() => switchCodeTab(fileName)}
-                        style={{
-                          padding: '8px 12px',
-                          cursor: 'pointer',
-                          borderRadius: '4px',
-                          marginBottom: '4px',
-                          backgroundColor: activeCodeTab === fileName ? '#eff6ff' : 'transparent',
-                          color: activeCodeTab === fileName ? '#1d4ed8' : '#374151',
-                          fontSize: '0.875rem',
-                          display: 'flex',
-                          alignItems: 'center',
-                          gap: '8px'
-                        }}
-                      >
-                        {fileName.endsWith('.py') ? '🐍' : fileName.endsWith('.txt') ? '📄' : '📝'}
-                        {fileName}
-                      </div>
-                    ))
-                  )}
+  const handleFacePointerUp = (e) => {
+    if (!cubeDragRef.current) return;
+    if (cubeDragRef.current.pointerId !== e.pointerId) return;
+    e.preventDefault();
+    e.currentTarget.releasePointerCapture?.(e.pointerId);
 
-                  {experimentRuns.length > 0 && (
-                    <>
-                      <div style={{
-                        padding: '8px 12px',
-                        fontSize: '0.875rem',
-                        fontWeight: 500,
-                        color: '#64748b',
-                        borderTop: '1px solid #e5e7eb',
-                        marginTop: '8px',
-                        paddingTop: '12px'
-                      }}>
-                        📊 Experiment Runs
-                      </div>
-                      {experimentRuns.map((run, index) => (
-                        <div
-                          key={index}
-                          style={{
-                            padding: '8px 12px',
-                            borderRadius: '4px',
-                            marginBottom: '4px',
-                            backgroundColor: '#f9fafb',
-                            fontSize: '0.875rem',
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: '8px'
-                          }}
-                        >
-                          {run.success ? '✅' : '❌'} Run {index + 1}
-                        </div>
-                      ))}
-                    </>
-                  )}
-                </div>
-              </div>
+    const { moved, startYaw, startPitch, currentYaw, currentPitch } = cubeDragRef.current;
+    cubeDragRef.current = null;
+    if (!moved) return;
 
-              {/* Main Editor Area */}
-              <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
-                {/* File Tabs */}
-                {Object.keys(experimentFiles).length > 0 && (
-                  <div style={{
-                    display: 'flex',
-                    backgroundColor: 'white',
-                    borderRadius: '8px 8px 0 0',
-                    border: '1px solid #e5e7eb',
-                    borderBottom: 'none'
-                  }}>
-                    {Object.keys(experimentFiles).map((fileName) => (
-                      <div
-                        key={fileName}
-                        onClick={() => switchCodeTab(fileName)}
-                        style={{
-                          padding: '8px 16px',
-                          cursor: 'pointer',
-                          backgroundColor: activeCodeTab === fileName ? '#f8fafc' : 'transparent',
-                          borderBottom: activeCodeTab === fileName ? '2px solid #4C84FF' : '2px solid transparent',
-                          fontSize: '0.875rem',
-                          fontWeight: activeCodeTab === fileName ? 500 : 400,
-                          color: activeCodeTab === fileName ? '#1f2937' : '#6b7280'
-                        }}
-                      >
-                        {fileName}
-                      </div>
-                    ))}
-                  </div>
-                )}
+    const endRotation = {
+      yaw: typeof currentYaw === 'number' ? currentYaw : cubeRotation.yaw,
+      pitch: typeof currentPitch === 'number' ? currentPitch : cubeRotation.pitch
+    };
+    const snapped = snapRotation(endRotation);
+    trackCubeRotate('drag', { yaw: startYaw, pitch: startPitch }, snapped);
+    beginSnapToFace(endRotation);
+  };
 
-                {/* Monaco Editor */}
-                <div style={{
-                  flex: 1,
-                  backgroundColor: 'white',
-                  borderRadius: Object.keys(experimentFiles).length > 0 ? '0 0 8px 8px' : '8px',
-                  border: '1px solid #e5e7eb',
-                  overflow: 'hidden',
-                  boxShadow: '0 1px 3px rgba(0,0,0,0.1)'
-                }}>
-                  <Editor
-                    height="100%"
-                    language={activeCodeTab.endsWith('.py') ? 'python' : activeCodeTab.endsWith('.js') ? 'javascript' : activeCodeTab.endsWith('.ts') ? 'typescript' : activeCodeTab.endsWith('.json') ? 'json' : activeCodeTab.endsWith('.md') ? 'markdown' : 'plaintext'}
-                    value={codeContent}
-                    onChange={(value) => setCodeContent(value || '')}
-                    theme="vs-dark"
-                    options={{
-                      minimap: { enabled: true },
-                      fontSize: 14,
-                      lineNumbers: 'on',
-                      wordWrap: 'on',
-                      automaticLayout: true,
-                      scrollBeyondLastLine: false,
-                      folding: true,
-                      renderLineHighlight: 'all',
-                      selectOnLineNumbers: true
-                    }}
-                  />
-                </div>
-              </div>
+  const handleFacePointerCancel = (e) => {
+    if (!cubeDragRef.current) return;
+    if (cubeDragRef.current.pointerId !== e.pointerId) return;
+    cubeDragRef.current = null;
+  };
 
-              {/* Console Output Panel */}
-              <div style={{
-                width: '300px',
-                backgroundColor: 'white',
-                borderRadius: '8px',
-                border: '1px solid #e5e7eb',
-                boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
-                display: 'flex',
-                flexDirection: 'column'
-              }}>
-                <div style={{
-                  backgroundColor: '#f8fafc',
-                  padding: '12px 16px',
-                  borderBottom: '1px solid #e5e7eb',
-                  fontSize: '0.875rem',
-                  color: '#64748b',
-                  fontWeight: 500,
-                  display: 'flex',
-                  justifyContent: 'space-between',
-                  alignItems: 'center'
-                }}>
-                  💻 Console Output
-                  <button
-                    onClick={() => setConsoleOutput('')}
-                    style={{
-                      background: 'none',
-                      border: 'none',
-                      color: '#6b7280',
-                      cursor: 'pointer',
-                      fontSize: '0.75rem'
-                    }}
-                  >
-                    Clear
-                  </button>
-                </div>
+  // Render navigation buttons
+  const renderNavigationButtons = () => (
+    <>
+      <div onClick={() => handleStepRotation('right', 'button')} style={navBtnStyle('right')}>
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M9 18l6-6-6-6" /></svg>
+      </div>
+      <div onClick={() => handleStepRotation('left', 'button')} style={navBtnStyle('left')}>
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M15 18l-6-6 6-6" /></svg>
+      </div>
+      <div onClick={() => handleStepRotation('up', 'button')} style={navBtnStyle('top')}>
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M18 15l-6-6-6 6" /></svg>
+      </div>
+      <div onClick={() => handleStepRotation('down', 'button')} style={navBtnStyle('bottom')}>
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6 6-6" /></svg>
+      </div>
+    </>
+  );
 
-                <div style={{
-                  flex: 1,
-                  padding: '12px',
-                  fontSize: '0.75rem',
-                  fontFamily: 'monospace',
-                  backgroundColor: '#1a1a1a',
-                  color: '#e5e7eb',
-                  overflow: 'auto',
-                  whiteSpace: 'pre-wrap'
-                }}>
-                  {consoleOutput || 'No output yet...'}
-                </div>
-              </div>
-            </div>
+  const navBtnStyle = (pos) => {
+    const base = {
+      position: 'absolute',
+      backgroundColor: '#ffffff',
+      borderRadius: '4px', // Flatter
+      display: 'flex', justifyContent: 'center', alignItems: 'center',
+      cursor: 'pointer',
+      boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
+      zIndex: 200,
+      fontSize: '16px',
+      userSelect: 'none',
+      color: '#6b7280',
+      transition: 'all 0.2s ease',
+      border: '1px solid #e5e7eb'
+    };
 
-            {proceedError && (
-              <div style={{
-                backgroundColor: '#fef2f2',
-                border: '1px solid #fecaca',
-                borderRadius: '8px',
-                padding: '16px',
-                color: '#dc2626',
-                marginTop: '20px'
-              }}>
-                <strong>Error:</strong> {proceedError}
-              </div>
-            )}
+    // Flat, space-saving bars outside the cube
+    if (pos === 'right') return {
+      ...base,
+      width: '24px', height: '60px',
+      top: '50%', right: '-34px',
+      transform: 'translateY(-50%)'
+    };
+    if (pos === 'left') return {
+      ...base,
+      width: '24px', height: '60px',
+      top: '50%', left: '-34px',
+      transform: 'translateY(-50%)'
+    };
+    if (pos === 'top') return {
+      ...base,
+      width: '60px', height: '24px',
+      top: '-34px', left: '50%',
+      transform: 'translateX(-50%)'
+    };
+    if (pos === 'bottom') return {
+      ...base,
+      width: '60px', height: '24px',
+      bottom: '-34px', left: '50%',
+      transform: 'translateX(-50%)'
+    };
+    return base;
+  };
 
-            {!codeResult && !isGeneratingCode && !proceedError && Object.keys(experimentFiles).length === 0 && (
-              <div style={{
-                textAlign: 'center',
-                padding: '40px',
-                color: '#6b7280',
-                backgroundColor: 'white',
-                borderRadius: '8px',
-                border: '2px dashed #d1d5db'
-              }}>
-                <div style={{ fontSize: '3rem', marginBottom: '16px' }}>🧪</div>
-                <div style={{ fontSize: '1.1rem', fontWeight: 500, marginBottom: '8px' }}>No experiment loaded</div>
-                <div style={{ fontSize: '0.875rem' }}>
-                  Use the "Proceed" button in Exploration View to generate an experiment, or upload files to get started
-                </div>
-              </div>
-            )}
+  // === CSS Grid 四象限布局渲染函数 (Planning.md 要求) ===
+  const renderQuadrantLayout = () => {
+    const { xDimension, yDimension } = getCurrentDimensions();
+
+    if (!xDimension || !yDimension) {
+      return (
+        <div style={{
+          width: '100%',
+          height: '600px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: '#f9fafb',
+          borderRadius: '8px',
+          border: '2px dashed #d1d5db'
+        }}>
+          <div style={{ textAlign: 'center', color: '#6b7280' }}>
+            <div style={{ fontSize: '1.2rem', marginBottom: '8px' }}>📊</div>
+            <div>Please select 3 dimension pairs to visualize</div>
           </div>
         </div>
-      ) : currentView === 'paper_view' ? (
-        /* Paper View - Full Screen */
-        <div style={{ padding: '20px', backgroundColor: '#f9fafb', minHeight: '90vh' }}>
-          <div style={{ maxWidth: '1600px', margin: '0 auto' }}>
-            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
-              <h1 style={{ fontSize: '1.5rem', fontWeight: 600, color: '#1f2937', margin: 0 }}>
-                Research Paper Viewer
-              </h1>
-
-              {paperResult && paperResult.pdf_path && (
-                <button
-                  onClick={() => downloadPDF(paperResult.pdf_path)}
-                  style={{
-                    padding: '8px 16px',
-                    backgroundColor: '#4C84FF',
-                    color: 'white',
-                    border: 'none',
-                    borderRadius: '6px',
-                    cursor: 'pointer',
-                    fontSize: '0.875rem',
-                    fontWeight: 500,
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: '6px'
-                  }}
-                >
-                  📄 Download PDF
-                </button>
-              )}
+      );
+    }
+
+    const containerWidth = 800;
+    const containerHeight = 600;
+
+    // Helper to render a single face content
+    const renderFaceContent = (faceIdx, isAnimating = false) => {
+      // Re-calculate dimensions for this specific face index
+      const targetFaceInfo = getCurrentDimensions(faceIdx);
+      const { xDimension: xDim, yDimension: yDim } = targetFaceInfo;
+
+      // Filter nodes for this face
+      const faceNodes = nodes.filter(n => {
+        const xScore = getNodeDimensionScore(n, xDim);
+        const yScore = getNodeDimensionScore(n, yDim);
+        return xScore !== undefined && yScore !== undefined && !n.isGhost;
+      });
+
+      const getArrowPoints = (from, to, size = 10, spread = 5) => {
+        const dx = to.pixelX - from.pixelX;
+        const dy = to.pixelY - from.pixelY;
+        const len = Math.hypot(dx, dy);
+        if (!len) return '';
+        const ux = dx / len;
+        const uy = dy / len;
+        const baseX = to.pixelX - ux * size;
+        const baseY = to.pixelY - uy * size;
+        const perpX = -uy * spread;
+        const perpY = ux * spread;
+        return `${to.pixelX},${to.pixelY} ${baseX + perpX},${baseY + perpY} ${baseX - perpX},${baseY - perpY}`;
+      };
+
+      const billboardTransform = `rotateX(${-cubeRotation.pitch}deg) rotateY(${-cubeRotation.yaw}deg)`;
+      const axisLabelBase = {
+        position: 'absolute',
+        backgroundColor: 'rgba(255,255,255,0.95)',
+        padding: '4px 10px',
+        borderRadius: '10px',
+        fontSize: '12px',
+        color: '#374151',
+        zIndex: 2,
+        boxShadow: '0 1px 3px rgba(0,0,0,0.08)',
+        backfaceVisibility: 'hidden',
+        transformStyle: 'preserve-3d',
+        pointerEvents: 'none',
+        whiteSpace: 'nowrap'
+      };
+
+      // Precompute positions so merge visuals can reference targets
+      const positionedNodes = faceNodes.map(node => {
+        const baseXScore = getNodeDimensionScore(node, xDim);
+        const baseYScore = getNodeDimensionScore(node, yDim);
+
+        const finalXScore = baseXScore;
+        const finalYScore = baseYScore;
+
+        const normalizedX = (finalXScore + 50) / 100;
+        const normalizedY = (finalYScore + 50) / 100;
+
+        const pixelX = normalizedX * containerWidth * 0.9 + containerWidth * 0.05;
+        const is1D = activeDimensionIndices.length === 1;
+        const pixelY = is1D
+          ? containerHeight / 2
+          : (1 - normalizedY) * containerHeight * 0.9 + containerHeight * 0.05;
+
+        return { node, pixelX, pixelY };
+      });
+
+      return (
+        <div style={{
+          width: '100%', height: '100%', position: 'absolute', top: 0, left: 0,
+          backgroundColor: '#ffffff',
+          backgroundImage: 'linear-gradient(135deg, rgba(240,244,255,0.9), #fff)',
+          boxSizing: 'border-box',
+          padding: '20px',
+          display: 'grid',
+          gridTemplateColumns: '1fr 1fr',
+          gridTemplateRows: '1fr 1fr',
+          gap: '2px',
+          backfaceVisibility: 'hidden', // Important for 3D
+          border: '1px solid #e5e7eb',
+          borderRadius: '8px',
+          boxShadow: '0 18px 40px rgba(0,0,0,0.12), inset 0 0 0 1px rgba(255,255,255,0.5)',
+          pointerEvents: isAnimating ? 'none' : 'auto' // Disable interaction during animation
+        }}>
+          {/* Quadrant Lines */}
+          <div style={{ position: 'absolute', top: '50%', left: 0, right: 0, height: '1px', backgroundColor: '#e5e7eb', zIndex: 0 }} />
+          {activeDimensionIndices.length > 1 && (
+            <div style={{ position: 'absolute', left: '50%', top: 0, bottom: 0, width: '1px', backgroundColor: '#e5e7eb', zIndex: 0 }} />
+          )}
+
+          {/* Labels */}
+          {activeDimensionIndices.length > 1 && (
+            <div style={{
+              ...axisLabelBase,
+              top: '-8px',
+              left: '50%',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              writingMode: 'vertical-rl',
+              transform: `translate(-50%, 0) ${billboardTransform}`
+            }}>
+              {yDim.dimensionB}
+            </div>
+          )}
+          {activeDimensionIndices.length > 1 && (
+            <div style={{
+              ...axisLabelBase,
+              bottom: '-8px',
+              left: '50%',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              writingMode: 'vertical-rl',
+              transform: `translate(-50%, 0) ${billboardTransform}`
+            }}>
+              {yDim.dimensionA}
             </div>
+          )}
+          <div style={{
+            ...axisLabelBase,
+            left: '-8px',
+            top: '50%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            transform: `translate(0, -50%) ${billboardTransform}`
+          }}>
+            {xDim.dimensionA}
+          </div>
+          <div style={{
+            ...axisLabelBase,
+            right: '-8px',
+            top: '50%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            transform: `translate(0, -50%) ${billboardTransform}`
+          }}>
+            {xDim.dimensionB}
+          </div>
 
-            {isGeneratingPaper && (
-              <div style={{
-                padding: '20px',
-                backgroundColor: '#eff6ff',
-                borderRadius: '8px',
-                marginBottom: '20px',
-                textAlign: 'center'
-              }}>
-                <div style={{ color: '#1d4ed8', fontSize: '1rem', fontWeight: 500 }}>
-                  📄 Generating research paper...
-                </div>
-                <div style={{ color: '#6b7280', fontSize: '0.875rem', marginTop: '8px' }}>
-                  This may take several minutes
-                </div>
-              </div>
-            )}
+          {/* Nodes */}
+          {positionedNodes.map(({ node, pixelX, pixelY }) => {
+            const isSelected = selectedNode && selectedNode.id === node.id;
+            const isHovered = hoveredNode && hoveredNode.id === node.id;
+
+            // Drag Visual State Checks
+            const activeMergeSourceId = dragVisualState?.type === 'merge'
+              ? dragVisualState.sourceNodeId
+              : mergeAnimationState?.sourceId;
+            const activeMergeTargetId = dragVisualState?.type === 'merge'
+              ? dragVisualState.targetNodeId
+              : mergeAnimationState?.targetId;
+            const activeGhostPosition = dragVisualState?.ghostPosition || mergeAnimationState?.ghostPosition;
+            const isFragmentMergeSource = activeMergeSourceId
+              ? fragmentNodes.some(f => f.id === activeMergeSourceId)
+              : false;
+            const targetPosition = activeMergeTargetId
+              ? positionedNodes.find(p => p.node.id === activeMergeTargetId)
+              : null;
+            const isMergeSource = activeMergeSourceId === node.id;
+            const isMergeTarget = activeMergeTargetId === node.id;
+            const isModifySource = dragVisualState && dragVisualState.type === 'modify' && dragVisualState.sourceNodeId === node.id;
+            const isMergeGrow = isMergeTarget;
+
+            const overridePosition = (isModifySource && dragVisualState?.newPosition)
+              ? { left: dragVisualState.newPosition.x - 25, top: dragVisualState.newPosition.y - 25 }
+              : null;
+
+            const shouldShowGhost = activeGhostPosition && (isMergeSource || (isMergeTarget && isFragmentMergeSource));
+            const showModifyLine = isModifySource && dragVisualState?.ghostPosition && dragVisualState?.newPosition;
+            const showMergeLine = activeGhostPosition && targetPosition && (isMergeSource || (isMergeTarget && isFragmentMergeSource));
+            const circleBaseSize = 50;
+            const circleHoverSize = 58;
+            const circleMergeSize = 64;
+            const circleSize = isMergeGrow ? circleMergeSize : (dragHoverTarget === node.id ? circleHoverSize : circleBaseSize);
+            const circleOffset = isMergeGrow
+              ? -(circleSize - circleBaseSize) / 2
+              : (dragHoverTarget === node.id ? -(circleHoverSize - circleBaseSize) / 2 : 0);
+
+            return (
+              <React.Fragment key={node.id}>
+                {/* Ghost Circle */}
+                {shouldShowGhost && (
+                  <div style={{
+                    position: 'absolute',
+                    left: activeGhostPosition.x - 25,
+                    top: activeGhostPosition.y - 25,
+                    width: '50px', height: '50px',
+                    zIndex: 50, pointerEvents: 'none'
+                  }}>
+                    <div style={{
+                      width: '100%', height: '100%', borderRadius: '50%',
+                      border: '2px dashed #9ca3af', backgroundColor: 'rgba(156, 163, 175, 0.1)', opacity: 0.6
+                    }} />
+                  </div>
+                )}
 
-            {paperResult && paperResult.success && (
-              <div style={{ backgroundColor: '#f0fdf4', border: '1px solid #bbf7d0', borderRadius: '8px', padding: '16px', marginBottom: '20px' }}>
-                <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px' }}>
-                  <span style={{ color: '#16a34a', fontSize: '1.1rem' }}>✅</span>
-                  <strong style={{ color: '#166534' }}>Paper Generated Successfully</strong>
-                </div>
-                <div style={{ display: 'flex', gap: '20px', fontSize: '0.875rem', color: '#166534' }}>
-                  {paperResult.pdf_path && (
-                    <div>
-                      <strong>PDF:</strong>
-                      <code style={{ backgroundColor: '#dcfce7', padding: '2px 6px', borderRadius: '4px', marginLeft: '8px' }}>
-                        {paperResult.pdf_path.split('/').pop()}
-                      </code>
-                    </div>
-                  )}
-                  {paperResult.latex_path && (
-                    <div>
-                      <strong>LaTeX:</strong>
-                      <code style={{ backgroundColor: '#dcfce7', padding: '2px 6px', borderRadius: '4px', marginLeft: '8px' }}>
-                        {paperResult.latex_path.split('/').pop()}
-                      </code>
-                    </div>
-                  )}
-                </div>
-              </div>
-            )}
+                {/* Modify Line */}
+                {showModifyLine && (
+                  <svg style={{ position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', pointerEvents: 'none', zIndex: 55 }}>
+                    <line
+                      x1={dragVisualState.ghostPosition.x} y1={dragVisualState.ghostPosition.y}
+                      x2={dragVisualState.newPosition.x} y2={dragVisualState.newPosition.y}
+                      stroke="#fbbf24" strokeWidth={2} strokeDasharray="6,6"
+                    />
+                  </svg>
+                )}
+                {/* Merge Line */}
+                {showMergeLine && targetPosition && (
+                  <svg style={{ position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', pointerEvents: 'none', zIndex: 55 }}>
+                    <line
+                      x1={activeGhostPosition.x} y1={activeGhostPosition.y}
+                      x2={targetPosition.pixelX} y2={targetPosition.pixelY}
+                      stroke="#9ca3af" strokeWidth={2} strokeDasharray="6,6"
+                    />
+                  </svg>
+                )}
 
-            {paperResult && paperResult.pdf_path && (
-              <div style={{ display: 'flex', gap: '20px', height: '800px' }}>
-                {/* PDF Viewer */}
-                <div style={{
-                  flex: '1',
-                  backgroundColor: 'white',
-                  borderRadius: '8px',
-                  border: '1px solid #e5e7eb',
-                  overflow: 'hidden',
-                  boxShadow: '0 1px 3px rgba(0,0,0,0.1)'
-                }}>
+                {/* Actual Node */}
+                <div
+                  data-node-id={node.id}
+                  onDragOver={(e) => { e.preventDefault(); e.stopPropagation(); }}
+                  onDragEnter={(e) => { e.preventDefault(); e.stopPropagation(); setDragHoverTarget(node.id); }}
+                  onDragLeave={(e) => { e.preventDefault(); e.stopPropagation(); setDragHoverTarget(null); }}
+                  onDrop={(e) => { e.preventDefault(); e.stopPropagation(); setDragHoverTarget(null); handleNodeDropOnEvaluation(e, node); }}
+                  style={{
+                    position: 'absolute',
+                    left: overridePosition ? overridePosition.left : pixelX - 25,
+                    top: overridePosition ? overridePosition.top : pixelY - 25,
+                    width: '50px', height: '50px',
+                    zIndex: draggingNodeId === node.id ? 9999 : 100,
+                    cursor: 'grab',
+                    opacity: isMergeSource ? 0 : 1,
+                    transform: billboardTransform,
+                    transformStyle: 'preserve-3d',
+                    backfaceVisibility: 'hidden'
+                  }}
+                  onMouseDown={(e) => {
+                    e.preventDefault(); e.stopPropagation();
+                    setDraggingNodeId(node.id);
+
+                    const nodeElement = e.currentTarget;
+                    // We use fixed positioning for dragging to escape the container's transform context if needed,
+                    // but here we are inside a 3D transformed container.
+                    // Fixed positioning might break the 3D illusion or coordinate system.
+                    // However, the original code used fixed positioning.
+                    // Let's stick to absolute within the face for now to keep it simple and 3D-compatible.
+                    // If we use fixed, it will pop out of the 3D face.
+
+                    // Actually, if we want to drag ACROSS faces, we might need fixed.
+                    // But for now, let's assume dragging is within the face.
+
+                    const startX = e.clientX;
+                    const startY = e.clientY;
+                    const startLeft = parseFloat(nodeElement.style.left);
+                    const startTop = parseFloat(nodeElement.style.top);
+
+                    let isDragging = true;
+                    let hasMoved = false;
+
+                    const handleMouseMove = (moveEvent) => {
+                      if (!isDragging) return;
+                      hasMoved = true;
+                      const deltaX = moveEvent.clientX - startX;
+                      const deltaY = moveEvent.clientY - startY;
+                      nodeElement.style.left = `${startLeft + deltaX}px`;
+                      nodeElement.style.top = `${startTop + deltaY}px`;
+                      nodeElement.style.cursor = 'grabbing';
+                    };
+
+                    const handleMouseUp = (upEvent) => {
+                      isDragging = false;
+                      document.removeEventListener('mousemove', handleMouseMove);
+                      document.removeEventListener('mouseup', handleMouseUp);
+                      nodeElement.style.cursor = 'grab';
+
+                      if (hasMoved) {
+                        // Logic for drop (Merge or Modify)
+                        // We need to calculate collision based on screen coordinates or relative coordinates
+                        // The original code used screen coordinates for collision detection
+                        const screenX = upEvent.clientX;
+                        const screenY = upEvent.clientY;
+                        const targetNode = detectNodeCollision(screenX, screenY, node.id, nodes);
+
+                        if (targetNode) {
+                          // Merge
+                          setDragVisualState({ type: 'merge', sourceNodeId: node.id, targetNodeId: targetNode.id, ghostPosition: { x: startLeft + 25, y: startTop + 25 } });
+                          setPendingMerge({ action: 'merge', sourceNode: node, targetNode: targetNode, screenX: screenX, screenY: screenY });
+                          // Reset position
+                          nodeElement.style.left = `${startLeft}px`;
+                          nodeElement.style.top = `${startTop}px`;
+                        } else {
+                          // Modify
+                          const currentLeft = parseFloat(nodeElement.style.left) + 25;
+                          const currentTop = parseFloat(nodeElement.style.top) + 25;
+
+                          // Convert back to score
+                          const newScores = pixelToScore(currentLeft, currentTop, containerWidth, containerHeight, -50, 50, -50, 50);
+
+                          // ... (Modify logic similar to original) ...
+                          // Simplified for brevity, assuming pixelToScore works
+                          const oldBaseXScore = getNodeDimensionScore(node, xDim);
+                          const oldBaseYScore = getNodeDimensionScore(node, yDim);
+
+                          const actualNewX = newScores.xScore;
+                          const actualNewY = newScores.yScore;
+
+                          setDragVisualState({ type: 'modify', sourceNodeId: node.id, ghostPosition: { x: startLeft + 25, y: startTop + 25 }, newPosition: { x: currentLeft, y: currentTop } });
+
+                          const modifications = [
+                            { metric: `${xDim.dimensionA}-${xDim.dimensionB}`, previousScore: oldBaseXScore, newScore: actualNewX, change: actualNewX - (oldBaseXScore ?? 0) },
+                            { metric: `${yDim.dimensionA}-${yDim.dimensionB}`, previousScore: oldBaseYScore, newScore: actualNewY, change: actualNewY - (oldBaseYScore ?? 0) }
+                          ];
+
+                          const ghostId = `${node.id}-Xghost-${Date.now()}`;
+                          const ghostNode = { ...node, id: ghostId, scores: { ...node.scores, [`${xDim.dimensionA}-${xDim.dimensionB}`]: actualNewX, [`${yDim.dimensionA}-${yDim.dimensionB}`]: actualNewY }, isGhost: true, isModified: true };
+
+                          setPendingChange({ originalNode: node, ghostNode: ghostNode, modifications: modifications, behindNode: null, screenX: screenX, screenY: screenY, draggedElement: nodeElement, finalPosition: { x: currentLeft, y: currentTop } });
+                        }
+                      } else {
+                        setSelectedNode(node);
+                      }
+                      setDraggingNodeId(null);
+                    };
+                    document.addEventListener('mousemove', handleMouseMove);
+                    document.addEventListener('mouseup', handleMouseUp);
+                  }}
+                  onMouseEnter={() => setHoveredNode(node)}
+                  onMouseLeave={() => setHoveredNode(null)}
+                >
+                  {/* Title */}
                   <div style={{
-                    backgroundColor: '#f8fafc',
-                    padding: '12px 16px',
-                    borderBottom: '1px solid #e5e7eb',
-                    fontSize: '0.875rem',
-                    color: '#64748b',
-                    fontWeight: 500,
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center'
+                    position: 'absolute', left: '50%', top: '-36px', transform: 'translateX(-50%)',
+                    fontSize: '12px', fontWeight: '600', color: '#1f2937', backgroundColor: '#f3f4f6',
+                    border: '1.5px solid #d1d5db', padding: '4px 8px', borderRadius: '4px', whiteSpace: 'nowrap',
+                    boxShadow: isHovered || isSelected ? '0 2px 8px rgba(0,0,0,0.15)' : 'none',
+                    pointerEvents: 'none', zIndex: 102, display: 'block'
                   }}>
-                    <span>📄 Research Paper</span>
-                    <button
-                      onClick={() => reviewPaper(paperResult.pdf_path)}
-                      disabled={isReviewing}
-                      style={{
-                        backgroundColor: isReviewing ? '#9ca3af' : '#3b82f6',
-                        color: 'white',
-                        border: 'none',
-                        borderRadius: '4px',
-                        padding: '6px 12px',
-                        fontSize: '0.75rem',
-                        cursor: isReviewing ? 'not-allowed' : 'pointer',
-                        fontWeight: 500
-                      }}
-                    >
-                      {isReviewing ? '🔄 Reviewing...' : '📝 Review Paper'}
-                    </button>
+                    {node.title.substring(0, 20)}
                   </div>
-                  <iframe
-                    src={`http://localhost:5000${paperResult.pdf_path}#toolbar=1&navpanes=1&scrollbar=1&page=1&view=FitH&zoom=100`}
-                    style={{
-                      width: '100%',
-                      height: 'calc(100% - 45px)',
-                      border: 'none',
-                      minHeight: '600px'
+                  {/* Circle */}
+                  <div style={{
+                    width: `${circleSize}px`,
+                    height: `${circleSize}px`,
+                    borderRadius: '50%',
+                    backgroundColor: node.isMergedResult ? '#B22222' : (node.isNewlyGenerated ? '#FFD700' : (colorMap[node.type] || '#FF6B6B')),
+                    border: (dragHoverTarget === node.id ? '3px solid #fbbf24' : (isSelected ? '4px solid #000' : '2px solid #fff')),
+                    boxShadow: (dragHoverTarget === node.id ? '0 0 20px rgba(251, 191, 36, 0.8)' : '0 2px 4px rgba(0,0,0,0.1)'),
+                    transition: 'all 0.2s ease',
+                    opacity: node.isGhost ? 0.5 : 1,
+                    transform: circleOffset ? `translate(${circleOffset}px, ${circleOffset}px)` : 'none'
+                  }} />
+                </div>
+              </React.Fragment>
+            );
+          })}
+
+          {/* Merge connectors after merge is done (selection based) */}
+          {(() => {
+            if (!selectedNode) return null;
+            const selectedId = selectedNode.id;
+
+            const mergedInfos = nodes
+              .filter(n => n.isMergedResult)
+              .map(m => {
+                const parents = new Set();
+                if (Array.isArray(m.parentIds)) {
+                  m.parentIds.forEach(id => parents.add(id));
+                }
+                links.forEach(lk => {
+                  if (lk.target === m.id) parents.add(lk.source);
+                  if (lk.source === m.id) parents.add(lk.target);
+                });
+                return { mergedId: m.id, parentIds: Array.from(parents) };
+              });
+
+            let relation = mergedInfos.find(info => info.mergedId === selectedId && info.parentIds.length > 0);
+            if (!relation) {
+              relation = mergedInfos.find(info => info.parentIds.includes(selectedId));
+            }
+            if (!relation) return null;
+
+            const mergedPos = positionedNodes.find(p => p.node.id === relation.mergedId);
+            if (!mergedPos) return null;
+            const parentPositions = relation.parentIds
+              .map(pid => positionedNodes.find(p => p.node.id === pid))
+              .filter(Boolean);
+            if (parentPositions.length === 0) return null;
+
+            return (
+              <svg style={{ position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', pointerEvents: 'none', zIndex: 60 }}>
+                {parentPositions.map((p, idx) => (
+                  <g key={`${p.node.id}-${idx}`}>
+                    <line
+                      x1={p.pixelX} y1={p.pixelY}
+                      x2={mergedPos.pixelX} y2={mergedPos.pixelY}
+                      stroke="#9ca3af" strokeWidth={2}
+                    />
+                    <polygon points={getArrowPoints(p, mergedPos)} fill="#9ca3af" opacity={0.9} />
+                  </g>
+                ))}
+              </svg>
+            );
+          })()}
+        </div>
+      );
+    };
+
+    // Determine mode
+    const numActive = activeDimensionIndices.length;
+    const is3D = numActive >= 3;
+
+    // For 2D/1D, we only show the first active dimension pair
+    const targetFaceIndex = is3D ? currentFaceIndex : activeDimensionIndices[0];
+
+    const containerStyle = {
+      width: containerWidth,
+      height: containerHeight,
+      position: 'relative',
+      perspective: '1200px', // Perspective on the container
+      margin: '0 auto', // Center it
+      touchAction: is3D ? 'none' : undefined
+    };
+
+    const cubeWrapperStyle = {
+      width: '100%',
+      height: '100%',
+      position: 'absolute',
+      transformStyle: 'preserve-3d',
+      transition: isSnapping ? 'transform 0.35s ease-out' : 'transform 0s linear',
+      transform: (() => {
+        const baseTransform = `translateZ(-${containerWidth / 2}px)`;
+        return `${baseTransform} rotateY(${cubeRotation.yaw}deg) rotateX(${cubeRotation.pitch}deg)`;
+      })()
+    };
+
+    const translateZ_X = containerWidth / 2;
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '100%', gap: '50px' }}>
+        <div style={{ position: 'relative', width: '100%', height: containerHeight, display: 'flex', justifyContent: 'center', alignItems: 'center', overflow: 'visible' }}>
+          {/* Cube Container */}
+          <div style={containerStyle}
+            data-uatrack-suppress-drag={is3D ? 'true' : undefined}
+            onPointerDown={is3D ? handleFacePointerDown : undefined}
+            onPointerUp={is3D ? handleFacePointerUp : undefined}
+            onPointerMove={is3D ? handleFacePointerMove : undefined}
+            onPointerCancel={is3D ? handleFacePointerCancel : undefined}
+          >
+            {/* Navigation Buttons - Only show in 3D mode */}
+            {is3D && renderNavigationButtons()}
+
+            <div style={is3D ? cubeWrapperStyle : { width: '100%', height: '100%', position: 'relative' }}>
+              {/* Current Face (or the only face in 2D/1D) */}
+              <div style={is3D ? {
+                position: 'absolute', width: '100%', height: '100%',
+                transform: `translateZ(${translateZ_X}px)`,
+                backfaceVisibility: 'hidden'
+              } : { width: '100%', height: '100%', position: 'absolute' }}>
+                {renderFaceContent(targetFaceIndex, isSnapping)}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Fragment Bar */}
+        <div style={{
+          width: containerWidth,
+          minHeight: '120px',
+          maxHeight: '300px',
+          marginTop: '0', // Controlled by parent flex gap/margin
+          backgroundColor: '#fffbeb',
+          border: '2px dashed #f59e0b',
+          borderRadius: '8px',
+          padding: '12px',
+          display: 'flex',
+          gap: '12px',
+          overflowX: 'auto',
+          overflowY: 'auto',
+          alignItems: 'flex-start',
+          boxSizing: 'border-box'
+        }}>
+          {fragmentNodes.length === 0 ? (
+            <div style={{ fontSize: '0.875rem', color: '#92400e', fontStyle: 'italic', margin: 'auto', textAlign: 'center' }}>
+              Select text in any idea card and click "Fragment" to create quick notes here
+            </div>
+          ) : (
+            fragmentNodes.map(fragment => {
+              const isExpanded = expandedFragmentId === fragment.id;
+              const parentNode = nodes.find(n => n.id === fragment.parentId);
+              const parentTitle = parentNode ? parentNode.title : fragment.parentId;
+              const isMergeSource = dragVisualState && dragVisualState.type === 'merge' && dragVisualState.sourceNodeId === fragment.id;
+              const showPendingOutline = isMergeSource || fragment.isPendingMerge;
+
+              return (
+                <div key={fragment.id} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', minWidth: '60px', maxWidth: isExpanded ? '220px' : '60px', flexShrink: 0, transition: 'max-width 0.3s ease' }}>
+                  <div
+                    draggable={true}
+                    onDragStart={(e) => {
+                      e.dataTransfer.setData('nodeId', fragment.id);
+                      e.dataTransfer.setData('isFragment', 'true');
+                      const container = evaluationContainerRef.current;
+                      if (container) {
+                        const rect = e.currentTarget.getBoundingClientRect();
+                        const containerRect = container.getBoundingClientRect();
+                        fragmentDragOriginRef.current = {
+                          x: rect.left - containerRect.left + rect.width / 2,
+                          y: rect.top - containerRect.top + rect.height / 2
+                        };
+                      } else {
+                        fragmentDragOriginRef.current = null;
+                      }
+                      const dragImage = document.createElement('div');
+                      dragImage.style.width = '50px'; dragImage.style.height = '50px'; dragImage.style.backgroundColor = '#fef08a';
+                      dragImage.style.border = '2px solid #f59e0b'; dragImage.style.borderRadius = '50%';
+                      dragImage.style.display = 'flex'; dragImage.style.alignItems = 'center'; dragImage.style.justifyContent = 'center';
+                      dragImage.style.fontSize = '0.875rem'; dragImage.style.fontWeight = '700'; dragImage.style.color = '#92400e';
+                      dragImage.style.position = 'fixed'; dragImage.style.top = '-1000px'; dragImage.style.left = '-1000px';
+                      document.body.appendChild(dragImage);
+                      e.dataTransfer.setDragImage(dragImage, 25, 25);
+                      setTimeout(() => { document.body.removeChild(dragImage); }, 0);
                     }}
-                    title="Research Paper PDF"
-                    onError={(e) => {
-                      console.error('PDF iframe load error:', e);
-                      console.log('PDF path:', paperResult.pdf_path);
+                    onDragEnd={() => {
+                      fragmentDragOriginRef.current = null;
                     }}
-                    onLoad={() => {
-                      console.log('PDF loaded successfully:', paperResult.pdf_path);
+                    onClick={() => {
+                      setExpandedFragmentId(isExpanded ? null : fragment.id);
+                      if (!isExpanded && parentNode) setSelectedNode(parentNode);
                     }}
-                  />
-                </div>
-
-                {/* Comments/Review Panel */}
-                <div style={{
-                  width: '400px',
-                  backgroundColor: 'white',
-                  borderRadius: '8px',
-                  border: '1px solid #e5e7eb',
-                  boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
-                  display: 'flex',
-                  flexDirection: 'column'
-                }}>
-                  {/* Tab Header */}
-                  <div style={{
-                    backgroundColor: '#f8fafc',
-                    borderBottom: '1px solid #e5e7eb',
-                    display: 'flex'
-                  }}>
-                    <button
-                      onClick={() => setRightPanelTab('comments')}
-                      style={{
-                        flex: 1,
-                        padding: '12px 16px',
-                        fontSize: '0.875rem',
-                        fontWeight: 500,
-                        border: 'none',
-                        backgroundColor: rightPanelTab === 'comments' ? 'white' : 'transparent',
-                        color: rightPanelTab === 'comments' ? '#1f2937' : '#64748b',
-                        cursor: 'pointer',
-                        borderBottom: rightPanelTab === 'comments' ? '2px solid #3b82f6' : 'none'
-                      }}
-                    >
-                      💬 Comments ({pdfComments.length})
-                    </button>
+                    style={{
+                      minWidth: '50px', width: '50px', height: '50px', backgroundColor: '#fef08a',
+                      border: showPendingOutline ? '3px dashed #fbbf24' : '2px solid #f59e0b',
+                      borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center',
+                      cursor: 'pointer', fontSize: '0.875rem', fontWeight: '700', color: '#92400e',
+                      position: 'relative', flexShrink: 0, marginBottom: isExpanded ? '8px' : '0',
+                      opacity: showPendingOutline ? 0.3 : (fragment.evaluationOpacity !== undefined ? fragment.evaluationOpacity : 1),
+                      transition: 'all 0.2s ease'
+                    }}
+                  >
                     <button
-                      onClick={() => setRightPanelTab('review')}
-                      style={{
-                        flex: 1,
-                        padding: '12px 16px',
-                        fontSize: '0.875rem',
-                        fontWeight: 500,
-                        border: 'none',
-                        backgroundColor: rightPanelTab === 'review' ? 'white' : 'transparent',
-                        color: rightPanelTab === 'review' ? '#1f2937' : '#64748b',
-                        cursor: 'pointer',
-                        borderBottom: rightPanelTab === 'review' ? '2px solid #3b82f6' : 'none'
-                      }}
+                      onClick={(e) => { e.stopPropagation(); deleteFragmentNode(fragment.id); if (expandedFragmentId === fragment.id) setExpandedFragmentId(null); }}
+                      style={{ position: 'absolute', top: '-6px', right: '-6px', width: '18px', height: '18px', borderRadius: '50%', backgroundColor: '#ef4444', color: 'white', border: 'none', cursor: 'pointer', fontSize: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 0, fontWeight: 'bold' }}
                     >
-                      📝 Review {reviewResult ? '✅' : ''}
+                      ×
                     </button>
                   </div>
-
-                  {/* Tab Content */}
-                  {rightPanelTab === 'comments' ? (
-                    <>
-                      {/* Add Comment */}
-                      <div style={{ padding: '16px', borderBottom: '1px solid #e5e7eb' }}>
-                        <textarea
-                          value={newComment}
-                          onChange={(e) => setNewComment(e.target.value)}
-                          placeholder="Add a comment about the paper..."
-                          style={{
-                            width: '100%',
-                            height: '80px',
-                            padding: '8px 12px',
-                            border: '1px solid #d1d5db',
-                            borderRadius: '6px',
-                            fontSize: '0.875rem',
-                            resize: 'vertical',
-                            fontFamily: 'inherit'
-                          }}
-                        />
-                        <button
-                          onClick={() => addComment()}
-                          disabled={!newComment.trim()}
-                          style={{
-                            marginTop: '8px',
-                            padding: '6px 12px',
-                            backgroundColor: newComment.trim() ? '#4C84FF' : '#9CA3AF',
-                            color: 'white',
-                            border: 'none',
-                            borderRadius: '4px',
-                            cursor: newComment.trim() ? 'pointer' : 'not-allowed',
-                            fontSize: '0.8rem',
-                            fontWeight: 500
-                          }}
-                        >
-                          Add Comment
-                        </button>
-                      </div>
-
-                      {/* Comments List */}
-                      <div style={{ flex: 1, overflow: 'auto', padding: '8px' }}>
-                        {pdfComments.length === 0 ? (
-                          <div style={{
-                            textAlign: 'center',
-                            padding: '40px 20px',
-                            color: '#6b7280',
-                            fontSize: '0.875rem'
-                          }}>
-                            <div style={{ fontSize: '2rem', marginBottom: '8px' }}>💭</div>
-                            No comments yet. Add your thoughts about the paper!
-                          </div>
-                        ) : (
-                          pdfComments.map((comment) => (
-                            <div key={comment.id} style={{
-                              backgroundColor: '#f9fafb',
-                              border: '1px solid #e5e7eb',
-                              borderRadius: '6px',
-                              padding: '12px',
-                              marginBottom: '8px'
-                            }}>
-                              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '8px' }}>
-                                <div style={{ fontSize: '0.75rem', color: '#6b7280' }}>
-                                  <strong>{comment.author}</strong> • {comment.timestamp}
-                                </div>
-                                <button
-                                  onClick={() => deleteComment(comment.id)}
-                                  style={{
-                                    background: 'none',
-                                    border: 'none',
-                                    color: '#dc2626',
-                                    cursor: 'pointer',
-                                    fontSize: '0.75rem',
-                                    padding: '2px'
-                                  }}
-                                >
-                                  ✕
-                                </button>
-                              </div>
-                              <div style={{ fontSize: '0.875rem', color: '#374151', lineHeight: '1.4' }}>
-                                {comment.text}
-                              </div>
-                            </div>
-                          ))
-                        )}
-                      </div>
-                    </>
-                  ) : (
-                    /* Review Tab Content */
-                    <div style={{ flex: 1, overflow: 'auto', padding: '16px' }}>
-                      {isReviewing ? (
-                        <div style={{
-                          textAlign: 'center',
-                          padding: '40px 20px',
-                          color: '#6b7280',
-                          fontSize: '0.875rem'
-                        }}>
-                          <div style={{ fontSize: '2rem', marginBottom: '16px' }}>🔄</div>
-                          <div style={{ fontWeight: 500, marginBottom: '8px' }}>Reviewing Paper...</div>
-                          <div>This may take a few moments. The AI reviewer is analyzing the paper's content, novelty, and quality.</div>
-                        </div>
-                      ) : reviewResult ? (
-                        reviewResult.error ? (
-                          <div style={{
-                            backgroundColor: '#fef2f2',
-                            border: '1px solid #fecaca',
-                            borderRadius: '6px',
-                            padding: '12px',
-                            color: '#dc2626',
-                            fontSize: '0.875rem'
-                          }}>
-                            <strong>Review Error:</strong> {reviewResult.error}
-                          </div>
-                        ) : (
-                          <div style={{ fontSize: '0.875rem', lineHeight: '1.5' }}>
-                            {/* Review Summary */}
-                            {reviewResult.Summary && (
-                              <div style={{ marginBottom: '16px' }}>
-                                <h4 style={{ fontSize: '1rem', fontWeight: 600, marginBottom: '8px', color: '#1f2937' }}>Summary</h4>
-                                <p style={{ color: '#374151' }}>{reviewResult.Summary}</p>
-                              </div>
-                            )}
-
-                            {/* Overall Score */}
-                            {reviewResult.Overall && (
-                              <div style={{ marginBottom: '16px', backgroundColor: '#f3f4f6', padding: '12px', borderRadius: '6px' }}>
-                                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                                  <span style={{ fontWeight: 600 }}>Overall Score:</span>
-                                  <span style={{
-                                    backgroundColor: reviewResult.Overall >= 6 ? '#10b981' : reviewResult.Overall >= 4 ? '#f59e0b' : '#ef4444',
-                                    color: 'white',
-                                    padding: '4px 8px',
-                                    borderRadius: '4px',
-                                    fontWeight: 600
-                                  }}>
-                                    {reviewResult.Overall}/10
-                                  </span>
-                                </div>
-                              </div>
-                            )}
-
-                            {/* Decision */}
-                            {reviewResult.Decision && (
-                              <div style={{ marginBottom: '16px' }}>
-                                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                                  <span style={{ fontWeight: 600 }}>Decision:</span>
-                                  <span style={{
-                                    backgroundColor: reviewResult.Decision === 'Accept' ? '#10b981' : '#ef4444',
-                                    color: 'white',
-                                    padding: '4px 8px',
-                                    borderRadius: '4px',
-                                    fontWeight: 600
-                                  }}>
-                                    {reviewResult.Decision}
-                                  </span>
-                                </div>
-                              </div>
-                            )}
-
-                            {/* Scores Grid */}
-                            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8px', marginBottom: '16px' }}>
-                              {['Originality', 'Quality', 'Clarity', 'Significance', 'Soundness', 'Presentation', 'Contribution', 'Confidence'].map(metric => (
-                                reviewResult[metric] && (
-                                  <div key={metric} style={{ backgroundColor: '#f9fafb', padding: '8px', borderRadius: '4px', fontSize: '0.75rem' }}>
-                                    <div style={{ fontWeight: 600, color: '#374151' }}>{metric}</div>
-                                    <div style={{ color: '#6b7280' }}>{reviewResult[metric]}/4</div>
-                                  </div>
-                                )
-                              ))}
-                            </div>
-
-                            {/* Strengths */}
-                            {reviewResult.Strengths && (
-                              <div style={{ marginBottom: '16px' }}>
-                                <h4 style={{ fontSize: '0.9rem', fontWeight: 600, marginBottom: '8px', color: '#10b981' }}>Strengths</h4>
-                                {Array.isArray(reviewResult.Strengths) ? (
-                                  <ul style={{ margin: 0, paddingLeft: '16px', color: '#374151' }}>
-                                    {reviewResult.Strengths.map((strength, index) => (
-                                      <li key={index} style={{ marginBottom: '4px' }}>{strength}</li>
-                                    ))}
-                                  </ul>
-                                ) : (
-                                  <p style={{ color: '#374151' }}>{reviewResult.Strengths}</p>
-                                )}
-                              </div>
-                            )}
-
-                            {/* Weaknesses */}
-                            {reviewResult.Weaknesses && (
-                              <div style={{ marginBottom: '16px' }}>
-                                <h4 style={{ fontSize: '0.9rem', fontWeight: 600, marginBottom: '8px', color: '#ef4444' }}>Weaknesses</h4>
-                                {Array.isArray(reviewResult.Weaknesses) ? (
-                                  <ul style={{ margin: 0, paddingLeft: '16px', color: '#374151' }}>
-                                    {reviewResult.Weaknesses.map((weakness, index) => (
-                                      <li key={index} style={{ marginBottom: '4px' }}>{weakness}</li>
-                                    ))}
-                                  </ul>
-                                ) : (
-                                  <p style={{ color: '#374151' }}>{reviewResult.Weaknesses}</p>
-                                )}
-                              </div>
-                            )}
-
-                            {/* Questions */}
-                            {reviewResult.Questions && (
-                              <div style={{ marginBottom: '16px' }}>
-                                <h4 style={{ fontSize: '0.9rem', fontWeight: 600, marginBottom: '8px', color: '#3b82f6' }}>Questions</h4>
-                                {Array.isArray(reviewResult.Questions) ? (
-                                  <ul style={{ margin: 0, paddingLeft: '16px', color: '#374151' }}>
-                                    {reviewResult.Questions.map((question, index) => (
-                                      <li key={index} style={{ marginBottom: '4px' }}>{question}</li>
-                                    ))}
-                                  </ul>
-                                ) : (
-                                  <p style={{ color: '#374151' }}>{reviewResult.Questions}</p>
-                                )}
-                              </div>
-                            )}
-
-                            {/* Limitations */}
-                            {reviewResult.Limitations && (
-                              <div style={{ marginBottom: '16px' }}>
-                                <h4 style={{ fontSize: '0.9rem', fontWeight: 600, marginBottom: '8px', color: '#f59e0b' }}>Limitations</h4>
-                                {Array.isArray(reviewResult.Limitations) ? (
-                                  <ul style={{ margin: 0, paddingLeft: '16px', color: '#374151' }}>
-                                    {reviewResult.Limitations.map((limitation, index) => (
-                                      <li key={index} style={{ marginBottom: '4px' }}>{limitation}</li>
-                                    ))}
-                                  </ul>
-                                ) : (
-                                  <p style={{ color: '#374151' }}>{reviewResult.Limitations}</p>
-                                )}
-                              </div>
-                            )}
-
-                            {/* Ethical Concerns */}
-                            {reviewResult['Ethical Concerns'] !== undefined && (
-                              <div style={{ marginBottom: '16px' }}>
-                                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                                  <span style={{ fontWeight: 600 }}>Ethical Concerns:</span>
-                                  <span style={{
-                                    backgroundColor: reviewResult['Ethical Concerns'] ? '#ef4444' : '#10b981',
-                                    color: 'white',
-                                    padding: '4px 8px',
-                                    borderRadius: '4px',
-                                    fontSize: '0.75rem'
-                                  }}>
-                                    {reviewResult['Ethical Concerns'] ? 'Yes' : 'No'}
-                                  </span>
-                                </div>
-                              </div>
-                            )}
-                          </div>
-                        )
-                      ) : (
-                        <div style={{
-                          textAlign: 'center',
-                          padding: '40px 20px',
-                          color: '#6b7280',
-                          fontSize: '0.875rem'
-                        }}>
-                          <div style={{ fontSize: '2rem', marginBottom: '8px' }}>📝</div>
-                          No review yet. Click the "Review Paper" button above to get an AI-generated peer review of this paper.
-                        </div>
-                      )}
+                  {isExpanded && (
+                    <div style={{ width: '100%', padding: '10px', backgroundColor: 'white', border: '1px solid #fbbf24', borderRadius: '6px', fontSize: '0.75rem', lineHeight: 1.4, color: '#374151', maxHeight: '150px', overflowY: 'auto', wordBreak: 'break-word', cursor: 'default', animation: 'fadeIn 0.2s ease-in' }}>
+                      <div style={{ fontSize: '0.7rem', color: '#78716c', marginBottom: '6px', fontWeight: '600' }}>Fragment of {parentTitle}</div>
+                      <div style={{ fontSize: '0.7rem', color: '#6b7280', lineHeight: 1.5 }}>{fragment.content}</div>
                     </div>
                   )}
                 </div>
-              </div>
-            )}
+              );
+            })
+          )}
+        </div>
+      </div>
+    );
+  };
 
-            {proceedError && (
-              <div style={{
-                backgroundColor: '#fef2f2',
-                border: '1px solid #fecaca',
-                borderRadius: '8px',
-                padding: '16px',
-                color: '#dc2626',
-                marginBottom: '20px'
-              }}>
-                <strong>Error:</strong> {proceedError}
-              </div>
-            )}
+  void renderQuadrantLayout;
+
+  // === 3D Drag Handler ===
+  const handle3DNodeDragEnd = (nodeId, payload, event) => {
+    const node = nodes.find(n => n.id === nodeId);
+    if (!node) return;
+
+    const { scoresMap = {}, mergeTargetId = null, clientX = event?.clientX, clientY = event?.clientY, cancelHold = false } = payload || {};
+
+    // Determine active dimensions
+    let dims = [];
+    if (selectedDimensionPairs && selectedDimensionPairs.length >= 1) {
+      dims = selectedDimensionPairs.slice(0, 3);
+    }
+
+    const modifications = [];
+
+    // Helper to get old score
+    const getScore = (dimObj) => {
+      if (!dimObj) return 0;
+      const v = getNodeDimensionScore(node, dimObj);
+      if (v === undefined || v === null) return 0;
+      return v;
+    };
+
+    // Check modifications for each dimension
+    dims.forEach((dim, index) => {
+      if (!dim) return;
+      const dimKey = `${dim.dimensionA}-${dim.dimensionB}`;
+      const newValue = scoresMap[dimKey];
+
+      if (newValue !== undefined) {
+        const oldVal = getScore(dim);
+        if (Math.abs(newValue - oldVal) > 2) {
+          modifications.push({
+            metric: dimKey,
+            previousScore: Math.round(oldVal),
+            newScore: Math.round(newValue),
+            change: Math.round(newValue - oldVal)
+          });
+        }
+      }
+    });
+
+    if (!cancelHold) {
+    }
+
+    if (cancelHold) {
+      setPendingChange(null);
+      setPendingMerge(null);
+      setDragVisualState(null); // Clear drag visual on cancel
+    } else if (mergeTargetId) {
+      const targetNode = nodes.find(n => n.id === mergeTargetId);
+      if (targetNode) {
+        setPendingMerge({
+          action: 'merge',
+          sourceNode: node,
+          targetNode,
+          isFragmentMerge: false,
+          screenX: clientX ?? window.innerWidth / 2,
+          screenY: clientY ?? window.innerHeight / 2
+        });
+      }
+    } else if (modifications.length > 0) {
+      // Create ghost node
+      const ghostId = `${node.id}-Xghost-${Date.now()}`;
+      const ghostNode = {
+        ...node,
+        id: ghostId,
+        scores: { ...(node.scores || {}) },
+        isGhost: true,
+        isModified: true
+      };
+
+      // Update ghost scores
+      modifications.forEach(mod => {
+        ghostNode.scores[mod.metric] = mod.newScore;
+      });
+
+      // Use event coordinates for popup
+      const screenX = event ? event.clientX : window.innerWidth / 2;
+      const screenY = event ? event.clientY : window.innerHeight / 2;
+
+      // Add ghost node to state so it renders
+      setNodes(prev => [...prev, ghostNode]);
+
+      setPendingChange({
+        originalNode: node,
+        ghostNode: ghostNode,
+        modifications: modifications,
+        behindNode: null,
+        screenX: screenX,
+        screenY: screenY
+      });
+    } else {
+      // No modifications - clear drag visual state
+      setDragVisualState(null);
+    }
+  };
+
+  const handle3DNodeDragEndRef = useRef(null);
+  handle3DNodeDragEndRef.current = handle3DNodeDragEnd;
+
+  const cancelPendingChange = useCallback((change, { reason = 'manual' } = {}) => {
+    if (!change) return;
+
+
+    const nodeElement = change.draggedElement || document.querySelector(`[data-node-id="${change.originalNode.id}"]`);
+    if (nodeElement) {
+      nodeElement.style.position = 'absolute';
+      if (dragVisualState?.ghostPosition) {
+        nodeElement.style.left = `${dragVisualState.ghostPosition.x - 25}px`;
+        nodeElement.style.top = `${dragVisualState.ghostPosition.y - 25}px`;
+      }
+      nodeElement.style.zIndex = '100';
+    }
+
+    setDragVisualState(null);
+
+    if (change.ghostNode?.id) {
+      const updatedNodesAfterCancel = nodes.filter((nd) => nd.id !== change.ghostNode.id);
+      setNodes(updatedNodesAfterCancel);
+      setLinks((prev) => prev.filter((lk) => lk.target !== change.ghostNode.id));
+    }
+
+    setPendingChange(null);
+
+    if (currentView === 'exploration') {
+      handle3DNodeDragEndRef.current(change.originalNode.id, { cancelHold: true });
+    }
+  }, [currentView, dragVisualState, nodes]);
+
+  const cancelPendingMerge = useCallback((merge) => {
+    if (!merge) return;
+
+    const sourceNode = merge.sourceNode || merge.nodeA;
+    const targetNode = merge.targetNode || merge.nodeB;
+
+    if (merge.action === 'evaluation_drag') {
+      if (sourceNode && dragVisualState?.ghostPosition) {
+        const nodeElement = document.querySelector(`[data-node-id="${sourceNode.id}"]`);
+        if (nodeElement) {
+          nodeElement.style.left = `${dragVisualState.ghostPosition.x - 25}px`;
+          nodeElement.style.top = `${dragVisualState.ghostPosition.y - 25}px`;
+        }
+      }
+
+      if (sourceNode || targetNode) {
+        setNodes((prev) =>
+          prev.map((n) => {
+            if (n.id === sourceNode?.id && n.evaluationOpacity === 0) {
+              return { ...n, evaluationOpacity: 1 };
+            }
+            if (n.id === targetNode?.id && n.isBeingMerged) {
+              return { ...n, isBeingMerged: false };
+            }
+            return n;
+          })
+        );
+      }
+
+      setDragVisualState(null);
+      setMergeAnimationState(null);
+      setPendingMerge(null);
+      return;
+    }
+
+    setDragVisualState(null);
+
+    if (sourceNode && targetNode) {
+      const isSourceFragment = fragmentNodes.some(f => f.id === sourceNode.id);
+
+      if (isSourceFragment) {
+        setFragmentNodes(prev => prev.map(f => {
+          if (f.id === sourceNode.id) {
+            const updated = { ...f, evaluationOpacity: 1 };
+            delete updated.isPendingMerge;
+            return updated;
+          }
+          return f;
+        }));
+        setNodes(prev => prev.map(n => {
+          if (n.id === targetNode.id) {
+            return { ...n, isBeingMerged: false };
+          }
+          return n;
+        }));
+      } else {
+        const updatedNodesAfterCancelMerge = nodes.map(n => {
+          if (n.id === sourceNode.id) {
+            return { ...n, evaluationOpacity: 1 };
+          }
+          if (n.id === targetNode.id) {
+            return { ...n, isBeingMerged: false };
+          }
+          return n;
+        });
+        setNodes(updatedNodesAfterCancelMerge);
+      }
+    }
+
+    setMergeTargetId(null);
+    setPendingMerge(null);
+    setMergeAnimationState(null);
+  }, [dragVisualState, fragmentNodes, nodes]);
+
+  const last3DHoverIdRef = useRef(null);
+  const handle3DNodeHover = (node) => {
+    const nextId = node?.id || null;
+    const prevId = last3DHoverIdRef.current;
+    if (prevId && prevId !== nextId) {
+      const prevNode = nodes.find(n => n.id === prevId);
+      if (prevNode) {
+      }
+    }
+    if (nextId && prevId !== nextId) {
+    }
+    last3DHoverIdRef.current = nextId;
+    setHoveredNode(node);
+  };
+
+  const handle3DNodeClick = (node) => {
+    if (!node) return;
+    setSelectedNode(node);
+  };
+
+  const activeDimensions = getCurrentDimensions();
+
+  // Toggle dimension index active state
+  const toggleDimensionIndex = (index) => {
+    setActiveDimensionIndices(prev => {
+      if (prev.includes(index)) {
+        // Don't allow unchecking the last one (at least 1 dimension needed)
+        if (prev.length <= 1) return prev;
+        return prev.filter(i => i !== index);
+      } else {
+        return [...prev, index].sort();
+      }
+    });
+  };
+
+  const extractScoreValue = (scoreEntry) => {
+    if (scoreEntry === null || scoreEntry === undefined) return undefined;
+    if (typeof scoreEntry === 'number') return scoreEntry;
+    if (typeof scoreEntry === 'string' && scoreEntry.trim() !== '' && !Number.isNaN(Number(scoreEntry))) {
+      return Number(scoreEntry);
+    }
+    if (typeof scoreEntry === 'object' && scoreEntry.value !== undefined) {
+      if (typeof scoreEntry.value === 'number') return scoreEntry.value;
+      if (typeof scoreEntry.value === 'string' && scoreEntry.value.trim() !== '' && !Number.isNaN(Number(scoreEntry.value))) {
+        return Number(scoreEntry.value);
+      }
+    }
+    return undefined;
+  };
+
+  const orientScoreValue = (value, flipped) => {
+    if (!flipped || typeof value !== 'number') return value;
+    if (value >= -50 && value <= 50) return -value;
+    if (value >= 0 && value <= 100) return 100 - value;
+    return -value;
+  };
+
+  const cloneWithSwappedScore = (node, fromKey, toKey) => {
+    if (!fromKey || !toKey || fromKey === toKey) return node;
+    let updatedNode = node;
+
+    const maybeUpdateScores = (scoresObj) => {
+      if (!scoresObj || scoresObj[toKey] !== undefined || scoresObj[fromKey] === undefined) return scoresObj;
+      const baseEntry = scoresObj[fromKey];
+      const baseValue = extractScoreValue(baseEntry);
+      if (baseValue === undefined) return scoresObj;
+
+      const flippedValue = orientScoreValue(baseValue, true);
+      const newEntry = (typeof baseEntry === 'object' && baseEntry !== null && baseEntry.value !== undefined)
+        ? { ...baseEntry, value: flippedValue }
+        : flippedValue;
+      return { ...scoresObj, [toKey]: newEntry };
+    };
+
+    const newScores = maybeUpdateScores(node.scores);
+    const newOriginalScores = maybeUpdateScores(node.originalData?.scores);
+
+    if (newScores !== node.scores || newOriginalScores !== node.originalData?.scores) {
+      updatedNode = { ...node };
+      if (newScores !== node.scores) {
+        updatedNode.scores = newScores;
+      }
+      if (newOriginalScores !== node.originalData?.scores) {
+        updatedNode.originalData = { ...(node.originalData || {}), scores: newOriginalScores };
+      }
+    }
+
+    return updatedNode;
+  };
+
+  // Swap the direction of a dimension pair (A ↔ B)
+  const swapDimensionDirection = (pairIndex) => {
+    setSelectedDimensionPairs(prev => {
+      const updated = [...prev];
+      const pair = updated[pairIndex];
+      if (!pair) return prev;
+
+      const swapped = {
+        ...pair,
+        dimensionA: pair.dimensionB,
+        dimensionB: pair.dimensionA
+      };
+      updated[pairIndex] = swapped;
+
+      const fromKey = `${pair.dimensionA}-${pair.dimensionB}`;
+      const toKey = `${swapped.dimensionA}-${swapped.dimensionB}`;
+
+      // Ensure all nodes carry the swapped key so downstream code that expects the "primary" key still works
+      setNodes(prevNodes => prevNodes.map(n => cloneWithSwappedScore(n, fromKey, toKey)));
+      setFragmentNodes(prevFragments => prevFragments.map(f => cloneWithSwappedScore(f, fromKey, toKey)));
+
+      return updated;
+    });
+  };
+
+  // *** 维度编辑相关函数 ***
+  const handleEditDimension = (pairIndex, anchorRect) => {
+    setEditingDimensionIndex(pairIndex);
+    setDimensionDropdownAnchor(anchorRect);
+  };
+
+  const handleCloseDimensionEdit = useCallback(() => {
+    setEditingDimensionIndex(null);
+    setDimensionDropdownAnchor(null);
+  }, []);
+
+  const cancelActivePanels = useCallback((reason = 'auto') => {
+    if (pendingChange) cancelPendingChange(pendingChange, { reason });
+    if (pendingMerge) cancelPendingMerge(pendingMerge);
+    if (mergeMode.showDialog) handleMergeCancel();
+    if (fragmentMenuState) hideFragmentMenu();
+    if (showDimensionPanel) setShowDimensionPanel(false);
+    if (editingDimensionIndex !== null) handleCloseDimensionEdit();
+    if (isEditingSystemPrompt) {
+      setIsEditingSystemPrompt(false);
+      setModalAnchorEl(null);
+    }
+  }, [
+    cancelPendingChange,
+    cancelPendingMerge,
+    fragmentMenuState,
+    handleCloseDimensionEdit,
+    handleMergeCancel,
+    hideFragmentMenu,
+    isEditingSystemPrompt,
+    editingDimensionIndex,
+    mergeMode.showDialog,
+    pendingChange,
+    pendingMerge,
+    showDimensionPanel
+  ]);
+
+  const hasActivePanel = Boolean(
+    pendingChange ||
+    pendingMerge ||
+    mergeMode.showDialog ||
+    fragmentMenuState ||
+    showDimensionPanel ||
+    editingDimensionIndex !== null ||
+    isEditingSystemPrompt
+  );
+
+  useEffect(() => {
+    if (!hasActivePanel) return;
+
+    const handlePointerDown = (event) => {
+      const rawTarget = event.target;
+      const target = rawTarget && rawTarget.nodeType === 3 ? rawTarget.parentElement : rawTarget;
+      if (target?.closest?.('[data-panel-root]')) return;
+      cancelActivePanels('auto');
+    };
+
+    document.addEventListener('pointerdown', handlePointerDown, true);
+    return () => document.removeEventListener('pointerdown', handlePointerDown, true);
+  }, [cancelActivePanels, hasActivePanel]);
+
+  const handleDimensionEditConfirm = async (newPair, pairIndex) => {
+    const oldPair = selectedDimensionPairs[pairIndex];
+    if (!oldPair) return;
+
+    const hasChanges = oldPair.dimensionA !== newPair.dimensionA ||
+      oldPair.dimensionB !== newPair.dimensionB ||
+      oldPair.descriptionA !== newPair.descriptionA ||
+      oldPair.descriptionB !== newPair.descriptionB;
+
+    // 1. 更新 selectedDimensionPairs
+    const updatedPairs = [...selectedDimensionPairs];
+    updatedPairs[pairIndex] = newPair;
+    setSelectedDimensionPairs(updatedPairs);
+
+    // 2. 迁移 score key
+    // Note: If description changed but dimension name didn't, key remains same, but we still re-evaluate
+    if (hasChanges) {
+      const oldKey = `${oldPair.dimensionA}-${oldPair.dimensionB}`;
+      const newKey = `${newPair.dimensionA}-${newPair.dimensionB}`;
+
+      if (oldKey !== newKey) {
+        setNodes(prevNodes => prevNodes.map(node => {
+          if (!node.scores || node.scores[oldKey] === undefined) return node;
+          const newScores = { ...node.scores };
+          newScores[newKey] = newScores[oldKey];
+          delete newScores[oldKey];
+          return {
+            ...node,
+            scores: newScores,
+            originalData: node.originalData ? {
+              ...node.originalData,
+              scores: newScores,
+            } : node.originalData,
+          };
+        }));
+      }
+
+      // 3. 调用单维度评分 API
+      await evaluateSingleDimension(newPair, pairIndex);
+    }
+
+    // 4. 关闭弹窗
+    handleCloseDimensionEdit();
+  };
+
+  const evaluateSingleDimension = async (dimensionPair, dimensionIndex) => {
+    setIsSingleDimensionEvaluating(true);
+
+    try {
+      const requestIdeas = nodes
+        .filter(n => n.level !== 0 && n.type !== 'fragment')
+        .map(n => ({
+          ...n.originalData,
+          id: n.originalData?.id || n.id,
+          Title: n.originalData?.Title || n.title,
+        }));
+
+      const response = await fetch('/api/evaluate-dimension', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({
+          ideas: requestIdeas,
+          intent: currentIntent || analysisIntent,
+          dimension_pair: dimensionPair,
+          dimension_index: dimensionIndex,
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`Failed to evaluate dimension: ${response.status}`);
+      }
+
+      const result = await response.json();
+      const dimKey = `${dimensionPair.dimensionA}-${dimensionPair.dimensionB}`;
+      const dimScoreKey = `Dimension${dimensionIndex + 1}Score`;
+      const dimReasonKey = `Dimension${dimensionIndex + 1}Reason`;
+
+      // 更新 nodes 中的单维度分数
+      setNodes(prevNodes => prevNodes.map(node => {
+        const evalResult = result.scores?.find(s => s.id === (node.originalData?.id || node.id));
+        if (!evalResult) return node;
+
+        return {
+          ...node,
+          scores: {
+            ...node.scores,
+            [dimKey]: evalResult.score,
+          },
+          [dimScoreKey]: evalResult.score,
+          [dimReasonKey]: evalResult.reason,
+          originalData: node.originalData ? {
+            ...node.originalData,
+            scores: {
+              ...(node.originalData.scores || {}),
+              [dimKey]: evalResult.score,
+            },
+            [dimReasonKey]: evalResult.reason,
+          } : node.originalData,
+        };
+      }));
+
+    } catch (err) {
+      console.error('Error evaluating single dimension:', err);
+      setError(`Failed to evaluate dimension: ${err.message}`);
+    } finally {
+      setIsSingleDimensionEvaluating(false);
+    }
+  };
 
-            {!paperResult && !isGeneratingPaper && !proceedError && (
-              <div style={{
-                textAlign: 'center',
-                padding: '40px',
-                color: '#6b7280',
-                backgroundColor: 'white',
-                borderRadius: '8px',
-                border: '2px dashed #d1d5db'
-              }}>
-                <div style={{ fontSize: '3rem', marginBottom: '16px' }}>📄</div>
-                <div style={{ fontSize: '1.1rem', fontWeight: 500, marginBottom: '8px' }}>No paper generated</div>
-                <div style={{ fontSize: '0.875rem' }}>
-                  Use the "Proceed" button in Exploration View to generate a research paper
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
+  return (
+    <div style={{ fontFamily: 'Arial, sans-serif', position: 'relative' }}>
+
+      {/* 把 showTree 与 setShowTree 传给 TopNav，解决 setShowTree is not a function */}
+      <TopNav
+        currentView={currentView}
+        setCurrentView={setCurrentView}
+        hideEvaluationView={hideEvaluationView}
+        onReEvaluateAll={() => reEvaluateAll()}
+        isEvaluating={isEvaluating}
+        showCodeView={!!workflowStep}
+      />
+
+      {currentView === 'home_view' ? (
+        <OverviewPage />
       ) : (
         <>
           {currentView === 'exploration' && !isAnalysisSubmitted && (
@@ -3708,10 +6207,12 @@ const TreePlotVisualization = () => {
               style={{
                 backgroundColor: '#1f2937',
                 display: 'flex',
-                alignItems: 'center',
+                flexDirection: 'column',
                 padding: '10px 20px',
+                position: 'relative', // 重要: 让下拉面板相对于此容器定位
               }}
             >
+              {/* Intent 输入表单 */}
               <form
                 ref={analysisFormRef}
                 onSubmit={handleAnalysisIntentSubmit}
@@ -3720,8 +6221,10 @@ const TreePlotVisualization = () => {
                 <input
                   type="text"
                   value={analysisIntent}
-                  onChange={(e) => setAnalysisIntent(e.target.value)}
-                  placeholder="Enter analysis intent"
+                  onChange={(e) => {
+                    setAnalysisIntent(e.target.value);
+                  }}
+                  placeholder="Enter research intent"
                   style={{
                     padding: '6px 10px',
                     borderRadius: '4px',
@@ -3775,7 +6278,7 @@ const TreePlotVisualization = () => {
                   <div
                     style={{
                       marginLeft: '16px',
-                      color: '#dc2626',
+                      color: '#ef4444',
                       fontSize: '0.875rem',
                     }}
                   >
@@ -3783,26 +6286,169 @@ const TreePlotVisualization = () => {
                   </div>
                 )}
               </form>
+
+              {/* 下拉展开的维度选择面板 */}
+              <DimensionSelectorPanel
+                isOpen={showDimensionPanel}
+                onClose={() => setShowDimensionPanel(false)}
+                onConfirm={handleDimensionConfirm}
+                intent={currentIntent}
+              />
             </div>
           )}
 
           <div
             style={{
-              display: 'flex',
-              padding: '20px',
+              display: (currentView === 'code_view' || currentView === 'paper_view') ? 'none' : 'flex',
+              alignItems: 'flex-start', // Prevent stretching
+              padding: '40px 20px 20px 20px', // Push down slightly for top button
               maxWidth: '1600px',
               margin: '0 auto',
               boxSizing: 'border-box',
             }}
           >
-            {/* 左侧图 */}
-            <div ref={svgContainerRef} style={{ flexBasis: '60%', marginRight: '20px' }}>
+            {/* 左侧图 - Plot View 使用 CSS Grid 四象限，Tree View 使用 SVG */}
+
+            {/* === 3D Plot View === */}
+            <div
+              ref={evaluationContainerRef}
+              style={{
+                width: '60%',
+                marginRight: '20px',
+                position: 'relative',
+                display: currentView === 'evaluation' ? 'flex' : 'none',
+                flexDirection: 'column',
+                gap: '20px'
+              }}
+            >
+              <div style={{ height: '800px', width: '100%' }}>
+                <Evaluation3D
+                  nodes={nodes}
+                  selectedDimensionPairs={selectedDimensionPairs}
+                  activeDimensionIndices={activeDimensionIndices}
+                  onNodeDragEnd={handle3DNodeDragEnd}
+                  selectedNode={selectedNode}
+                  onNodeClick={handle3DNodeClick}
+                  hoveredNode={hoveredNode}
+                  onNodeHover={handle3DNodeHover}
+                  dragHoverTarget={dragHoverTarget}
+                  onDragHover={setDragHoverTarget}
+                  pendingChange={pendingChange}
+                  pendingMerge={pendingMerge}
+                  dragVisualState={dragVisualState}
+                  setDragVisualState={setDragVisualState}
+                  mergeAnimationState={mergeAnimationState}
+                  operationStatus={operationStatus}
+                  isGenerating={isGenerating}
+                  onDropExternal={handleNodeDropOnEvaluation}
+                />
+              </div>
+
+              {/* Fragment Bar */}
+              <div style={{
+                width: '100%',
+                minHeight: '120px',
+                maxHeight: '300px',
+                backgroundColor: '#fffbeb',
+                border: '2px dashed #f59e0b',
+                borderRadius: '8px',
+                padding: '12px',
+                display: 'flex',
+                gap: '12px',
+                overflowX: 'auto',
+                overflowY: 'auto',
+                alignItems: 'flex-start',
+                boxSizing: 'border-box'
+              }}>
+                {fragmentNodes.length === 0 ? (
+                  <div style={{ fontSize: '0.875rem', color: '#92400e', fontStyle: 'italic', margin: 'auto', textAlign: 'center' }}>
+                    Select text in any idea card and click "Fragment" to create quick notes here
+                  </div>
+                ) : (
+                  fragmentNodes.map(fragment => {
+                    const isExpanded = expandedFragmentId === fragment.id;
+                    const parentNode = nodes.find(n => n.id === fragment.parentId);
+                    const parentTitle = parentNode ? parentNode.title : fragment.parentId;
+                    const isMergeSource = dragVisualState && dragVisualState.type === 'merge' && dragVisualState.sourceNodeId === fragment.id;
+                    const showPendingOutline = isMergeSource || fragment.isPendingMerge;
+
+                    return (
+                      <div key={fragment.id} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', minWidth: '60px', maxWidth: isExpanded ? '220px' : '60px', flexShrink: 0, transition: 'max-width 0.3s ease' }}>
+                        <div
+                          draggable={true}
+                          onDragStart={(e) => {
+                            e.dataTransfer.setData('nodeId', fragment.id);
+                            e.dataTransfer.setData('isFragment', 'true');
+                            const container = evaluationContainerRef.current;
+                            if (container) {
+                              const rect = e.currentTarget.getBoundingClientRect();
+                              const containerRect = container.getBoundingClientRect();
+                              fragmentDragOriginRef.current = {
+                                x: rect.left - containerRect.left + rect.width / 2,
+                                y: rect.top - containerRect.top + rect.height / 2
+                              };
+                            } else {
+                              fragmentDragOriginRef.current = null;
+                            }
+                            setDraggingNodeId(fragment.id);
+                            // Use a default style or transparent image if needed, but browser default is usually okay if opacity is handled
+                            const dragImage = document.createElement('div');
+                            dragImage.style.width = '50px'; dragImage.style.height = '50px'; dragImage.style.backgroundColor = '#fef08a';
+                            dragImage.style.border = '2px solid #f59e0b'; dragImage.style.borderRadius = '50%';
+                            dragImage.style.display = 'flex'; dragImage.style.alignItems = 'center'; dragImage.style.justifyContent = 'center';
+                            dragImage.style.fontSize = '0.875rem'; dragImage.style.fontWeight = '700'; dragImage.style.color = '#92400e';
+                            dragImage.style.position = 'fixed'; dragImage.style.top = '-1000px'; dragImage.style.left = '-1000px';
+                            document.body.appendChild(dragImage);
+                            e.dataTransfer.setDragImage(dragImage, 25, 25);
+                            setTimeout(() => { document.body.removeChild(dragImage); }, 0);
+                          }}
+                          onDragEnd={() => {
+                            fragmentDragOriginRef.current = null;
+                            setDraggingNodeId(null);
+                          }}
+                          onClick={() => {
+                            setExpandedFragmentId(isExpanded ? null : fragment.id);
+                            if (!isExpanded && parentNode) setSelectedNode(parentNode);
+                          }}
+                          style={{
+                            minWidth: '50px', width: '50px', height: '50px', backgroundColor: '#fef08a',
+                            border: showPendingOutline ? '3px dashed #fbbf24' : '2px solid #f59e0b',
+                            borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center',
+                            cursor: 'pointer', fontSize: '0.875rem', fontWeight: '700', color: '#92400e',
+                            position: 'relative', flexShrink: 0, marginBottom: isExpanded ? '8px' : '0',
+                            opacity: draggingNodeId === fragment.id ? 0.4 : (showPendingOutline ? 0.3 : (fragment.evaluationOpacity !== undefined ? fragment.evaluationOpacity : 1)),
+                            transition: 'all 0.2s ease'
+                          }}
+                        >                          <button
+                          onClick={(e) => { e.stopPropagation(); deleteFragmentNode(fragment.id); if (expandedFragmentId === fragment.id) setExpandedFragmentId(null); }}
+                          style={{ position: 'absolute', top: '-6px', right: '-6px', width: '18px', height: '18px', borderRadius: '50%', backgroundColor: '#ef4444', color: 'white', border: 'none', cursor: 'pointer', fontSize: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 0, fontWeight: 'bold' }}
+                        >
+                            ×
+                          </button>
+                        </div>
+                        {isExpanded && (
+                          <div style={{ width: '100%', padding: '10px', backgroundColor: 'white', border: '1px solid #fbbf24', borderRadius: '6px', fontSize: '0.75rem', lineHeight: 1.4, color: '#374151', maxHeight: '150px', overflowY: 'auto', wordBreak: 'break-word', cursor: 'default', animation: 'fadeIn 0.2s ease-in' }}>
+                            <div style={{ fontSize: '0.7rem', color: '#78716c', marginBottom: '6px', fontWeight: '600' }}>Fragment of {parentTitle}</div>
+                            <div style={{ fontSize: '0.7rem', color: '#6b7280', lineHeight: 1.5 }}>{fragment.content}</div>
+                          </div>
+                        )}
+                      </div>
+                    );
+                  })
+                )}
+              </div>
+            </div>
+
+            {/* === D3.js SVG (Tree View) === */}
+            <div
+              ref={explorationContainerRef}
+              style={{
+                flexBasis: '60%',
+                marginRight: '20px',
+                display: currentView === 'exploration' ? 'block' : 'none'
+              }}
+            >
               <svg ref={svgRef} />
-              {/* Log Display Panel - positioned directly under the plot */}
-              <LogDisplay
-                isVisible={showLogs}
-                onToggle={() => setShowLogs(!showLogs)}
-              />
             </div>
 
             {/* 右侧 Dashboard */}
@@ -3810,10 +6456,10 @@ const TreePlotVisualization = () => {
               <Dashboard
                 nodeId={hoveredNode?.id || selectedNode?.id}
                 nodes={nodes}
+                fragmentNodes={fragmentNodes}
                 isEvaluating={isEvaluating}
                 showTree={currentView === 'exploration'}
                 setModalAnchorEl={setModalAnchorEl}
-                setEditingCriteria={setEditingCriteria}
                 // Pass props down to ContextAndGenerateCard
                 isAddingCustom={isAddingCustom}
                 userInput={userInput}
@@ -3829,163 +6475,791 @@ const TreePlotVisualization = () => {
                 setIsEditingSystemPrompt={setIsEditingSystemPrompt}
                 editIcon={editIcon}
                 handleProceedWithSelectedIdea={handleProceedWithSelectedIdea}
-                onUpdateTable={handleUpdateTable} // Pass the new handler here
+                getNodeTrackingInfo={getNodeTrackingInfo}
+                // Props for score modification
+                onModifyScore={handleScoreModification}
+                showModifyButton={currentView === 'exploration'}
+                pendingChanges={pendingChange}
+                currentView={currentView}
+                selectedDimensionPairs={selectedDimensionPairs}
+                activeDimensions={activeDimensions}
+                onShowFragmentMenu={showFragmentMenu}
+                activeDimensionIndices={activeDimensionIndices}
+                onToggleDimensionIndex={toggleDimensionIndex}
+                onCreateFragmentFromHighlight={(text, parentId) => createFragmentNode(text, parentId || selectedNode?.id)}
+                onSwapDimension={swapDimensionDirection}
+                onEditDimension={handleEditDimension}
               />
+
+              {/* Re-eval All Button */}
+              {currentView === 'evaluation' && (
+                <div style={{
+                  padding: '16px',
+                  borderTop: '1px solid #e5e7eb',
+                  display: 'flex',
+                  justifyContent: 'flex-start'
+                }}>
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      reEvaluateAll && reEvaluateAll();
+                    }}
+                    disabled={isEvaluating}
+                    style={{
+                      padding: '8px 12px',
+                      backgroundColor: isEvaluating ? '#f3f4f6' : '#2563EB',
+                      color: isEvaluating ? '#9ca3af' : '#ffffff',
+                      border: 'none',
+                      borderRadius: '6px',
+                      cursor: isEvaluating ? 'not-allowed' : 'pointer',
+                      fontSize: '0.75rem',
+                      fontWeight: '600',
+                      transition: 'all 0.2s ease',
+                      boxShadow: isEvaluating ? 'none' : '0 1px 2px rgba(0, 0, 0, 0.05)',
+                    }}
+                    title="Re-evaluate all ideas with current criteria"
+                  >
+                    {isEvaluating ? 'Re-evaluating...' : 'Re-evaluate All'}
+                  </button>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* ============ Code View ============ */}
+          {currentView === 'code_view' && (
+            <div style={{ display: 'flex', flexDirection: 'column', height: '100%', padding: '20px', gap: '16px', boxSizing: 'border-box' }}>
+
+              {/* Header row */}
+              <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', flexShrink: 0, gap: '16px' }}>
+                <div>
+                  <h2 style={{ fontSize: '1.1rem', fontWeight: 700, margin: 0, color: '#0F172A' }}>
+                    Code Generation
+                    {workflowIdea && (
+                      <span style={{ fontSize: '0.8rem', fontWeight: 400, color: '#6B7280', marginLeft: '10px' }}>
+                        {workflowIdea.title}
+                      </span>
+                    )}
+                  </h2>
+                  {codeResult?.experiment_dir && (
+                    <div style={{ fontSize: '0.75rem', color: '#9CA3AF', fontFamily: 'monospace', marginTop: '2px' }}>
+                      {codeResult.experiment_dir}
+                    </div>
+                  )}
+                </div>
+
+                {/* Right-side actions */}
+                <div style={{ display: 'flex', alignItems: 'center', gap: '8px', flexShrink: 0 }}>
+                  {/* Spinning indicator while coding */}
+                  {workflowStep === 'coding' && (
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '6px', color: '#6B7280', fontSize: '0.82rem' }}>
+                      <div style={{ width: '14px', height: '14px', border: '2px solid #3B82F6', borderTopColor: 'transparent', borderRadius: '50%', animation: 'spin 1s linear infinite' }} />
+                      Generating…
+                    </div>
+                  )}
+
+                  {/* Status badge */}
+                  {codeResult && (
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '6px', padding: '4px 10px', borderRadius: '999px', fontSize: '0.8rem', fontWeight: 600, backgroundColor: codeResult.success ? '#DCFCE7' : '#FEE2E2', color: codeResult.success ? '#15803D' : '#DC2626' }}>
+                      {codeResult.success ? '✅ Success' : '❌ Failed'}
+                    </div>
+                  )}
+
+                  {/* Rerun Coder button — available once we have a result or error */}
+                  {(workflowStep === 'code_done' || workflowStep === 'code_error') && (
+                    <button
+                      onClick={handleRerunCoder}
+                      style={{ padding: '6px 14px', backgroundColor: '#fff', color: '#374151', border: '1px solid #D1D5DB', borderRadius: '6px', fontSize: '0.82rem', fontWeight: 600, cursor: 'pointer' }}
+                    >
+                      Rerun Coder
+                    </button>
+                  )}
+
+                  {/* Proceed to Writer button */}
+                  {(workflowStep === 'code_done' || workflowStep === 'writing' || workflowStep === 'paper_error') && (
+                    workflowStep === 'writing' ? (
+                      <div style={{ display: 'flex', alignItems: 'center', gap: '6px', color: '#6B7280', fontSize: '0.82rem' }}>
+                        <div style={{ width: '14px', height: '14px', border: '2px solid #3B82F6', borderTopColor: 'transparent', borderRadius: '50%', animation: 'spin 1s linear infinite' }} />
+                        Writing…
+                      </div>
+                    ) : (
+                      <button
+                        onClick={() => setShowWriterPrompt(p => !p)}
+                        style={{ padding: '6px 14px', backgroundColor: '#0F172A', color: '#fff', border: 'none', borderRadius: '6px', fontSize: '0.82rem', fontWeight: 600, cursor: 'pointer' }}
+                      >
+                        {showWriterPrompt ? 'Cancel' : 'Proceed to Writer'}
+                      </button>
+                    )
+                  )}
+                </div>
+              </div>
+
+              {/* Expandable S2 key panel — shown below header when writer prompt is open */}
+              {showWriterPrompt && workflowStep !== 'writing' && (
+                <div style={{ padding: '14px 16px', backgroundColor: '#F8FAFC', border: '1px solid #E2E8F0', borderRadius: '8px', flexShrink: 0 }}>
+                  <label style={{ display: 'block', fontSize: '0.8rem', color: '#6B7280', marginBottom: '6px' }}>
+                    Semantic Scholar API Key <span style={{ color: '#9CA3AF' }}>(optional — improves citation quality)</span>
+                  </label>
+                  <div style={{ display: 'flex', gap: '8px' }}>
+                    <input
+                      type="password"
+                      value={s2ApiKey}
+                      onChange={(e) => setS2ApiKey(e.target.value)}
+                      placeholder="sk-… or leave blank"
+                      style={{ flex: 1, padding: '7px 12px', border: '1px solid #D1D5DB', borderRadius: '6px', fontSize: '0.85rem', fontFamily: 'inherit' }}
+                      onKeyDown={(e) => { if (e.key === 'Enter') handleWritePaper(); }}
+                    />
+                    <button
+                      onClick={handleWritePaper}
+                      style={{ padding: '7px 16px', backgroundColor: '#0F172A', color: '#fff', border: 'none', borderRadius: '6px', fontSize: '0.85rem', fontWeight: 600, cursor: 'pointer', whiteSpace: 'nowrap' }}
+                    >
+                      Write Paper
+                    </button>
+                  </div>
+                </div>
+              )}
+
+              {/* Loading banner */}
+              {workflowStep === 'coding' && (
+                <div style={{ padding: '14px 16px', backgroundColor: '#EFF6FF', border: '1px solid #BFDBFE', borderRadius: '8px', color: '#1D4ED8', fontSize: '0.875rem', flexShrink: 0 }}>
+                  Generating experiment code — this may take several minutes…
+                </div>
+              )}
+
+              {/* Error banner */}
+              {(workflowStep === 'code_error') && workflowError && (
+                <div style={{ padding: '12px 16px', backgroundColor: '#FEF2F2', border: '1px solid #FECACA', borderRadius: '8px', color: '#DC2626', fontSize: '0.875rem', flexShrink: 0 }}>
+                  <strong>Error:</strong> {workflowError}
+                </div>
+              )}
+
+              {/* Error details (coder failure but returned 200) */}
+              {codeResult && !codeResult.success && codeResult.error_details && (
+                <details style={{ flexShrink: 0, backgroundColor: '#FEF2F2', border: '1px solid #FECACA', borderRadius: '8px', padding: '10px 14px' }}>
+                  <summary style={{ cursor: 'pointer', fontSize: '0.85rem', color: '#DC2626', fontWeight: 600 }}>Error details</summary>
+                  <pre style={{ marginTop: '8px', fontSize: '0.75rem', overflow: 'auto', backgroundColor: '#fff', padding: '8px', borderRadius: '4px', maxHeight: '160px', color: '#374151' }}>
+                    {codeResult.error_details}
+                  </pre>
+                </details>
+              )}
+
+              {/* ── Code browser ── */}
+              {codeFiles.length > 0 && (
+                <div style={{ display: 'flex', flex: 1, minHeight: 0, border: '1px solid #E2E8F0', borderRadius: '8px', overflow: 'hidden', fontFamily: 'monospace' }}>
+
+                  {/* File sidebar */}
+                  <div style={{ width: '190px', flexShrink: 0, borderRight: '1px solid #E2E8F0', backgroundColor: '#F8FAFC', overflowY: 'auto' }}>
+                    <div style={{ padding: '8px 12px', fontSize: '0.7rem', fontWeight: 700, color: '#6B7280', textTransform: 'uppercase', letterSpacing: '0.05em', borderBottom: '1px solid #E2E8F0' }}>
+                      Files
+                    </div>
+                    {codeFiles.map((file) => {
+                      const isSelected = selectedCodeFile?.path === file.path;
+                      const ext = file.name.split('.').pop();
+                      const icon = ext === 'py' ? '🐍' : ext === 'json' ? '{}' : ext === 'md' ? '📝' : '📄';
+                      return (
+                        <div
+                          key={file.path}
+                          onClick={() => loadCodeFile(file)}
+                          style={{
+                            padding: '7px 12px',
+                            fontSize: '0.78rem',
+                            cursor: 'pointer',
+                            backgroundColor: isSelected ? '#E0E7FF' : 'transparent',
+                            color: isSelected ? '#3730A3' : '#374151',
+                            fontWeight: isSelected ? 600 : 400,
+                            borderLeft: isSelected ? '3px solid #6366F1' : '3px solid transparent',
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '6px',
+                            wordBreak: 'break-all',
+                          }}
+                        >
+                          <span style={{ flexShrink: 0 }}>{icon}</span>
+                          {file.name}
+                        </div>
+                      );
+                    })}
+                  </div>
+
+                  {/* Code pane */}
+                  <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
+                    {/* Tab bar */}
+                    {selectedCodeFile && (
+                      <div style={{ display: 'flex', alignItems: 'center', padding: '6px 14px', borderBottom: '1px solid #E2E8F0', backgroundColor: '#FFFFFF', fontSize: '0.8rem', color: '#374151', gap: '8px', flexShrink: 0 }}>
+                        <span>{selectedCodeFile.name.endsWith('.py') ? '🐍' : selectedCodeFile.name.endsWith('.json') ? '{}' : '📄'}</span>
+                        <span style={{ fontWeight: 600 }}>{selectedCodeFile.name}</span>
+                        <span style={{ color: '#9CA3AF', fontSize: '0.72rem', marginLeft: 'auto' }}>
+                          {selectedCodeFile.content.split('\n').length} lines
+                        </span>
+                      </div>
+                    )}
+
+                    {/* Code content */}
+                    <div style={{ flex: 1, overflow: 'auto', backgroundColor: '#1E1E2E' }}>
+                      {selectedCodeFile ? (
+                        <pre style={{
+                          margin: 0,
+                          padding: '16px',
+                          fontSize: '0.8rem',
+                          lineHeight: 1.6,
+                          color: '#CDD6F4',
+                          whiteSpace: 'pre',
+                          minHeight: '100%',
+                          boxSizing: 'border-box',
+                          counterReset: 'line',
+                        }}>
+                          {selectedCodeFile.content.split('\n').map((line, i) => (
+                            <div key={i} style={{ display: 'flex', gap: '16px' }}>
+                              <span style={{ color: '#585B70', userSelect: 'none', minWidth: '2.5em', textAlign: 'right', flexShrink: 0 }}>{i + 1}</span>
+                              <span style={{ flex: 1 }}>{line || ' '}</span>
+                            </div>
+                          ))}
+                        </pre>
+                      ) : (
+                        <div style={{ padding: '24px', color: '#585B70', fontSize: '0.85rem' }}>Select a file to view</div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              )}
+
+            </div>
+          )}
+
+          {/* ============ Paper View ============ */}
+          {currentView === 'paper_view' && (
+            <div style={{ padding: '24px', maxWidth: '900px', margin: '0 auto' }}>
+              <h2 style={{ fontSize: '1.25rem', fontWeight: 700, marginBottom: '16px', color: '#0F172A' }}>Paper</h2>
+
+              {workflowStep === 'writing' ? (
+                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '80px 40px', gap: '20px' }}>
+                  <div style={{ width: '48px', height: '48px', border: '4px solid #E2E8F0', borderTopColor: '#0F172A', borderRadius: '50%', animation: 'spin 1s linear infinite' }} />
+                  <div style={{ textAlign: 'center' }}>
+                    <div style={{ fontSize: '1rem', fontWeight: 600, color: '#0F172A', marginBottom: '6px' }}>Writing paper…</div>
+                    <div style={{ fontSize: '0.85rem', color: '#9CA3AF' }}>This may take a few minutes</div>
+                  </div>
+                </div>
+              ) : !paperResult ? (
+                <div style={{ padding: '40px', textAlign: 'center', color: '#9CA3AF' }}>
+                  No paper generated yet. Use "Proceed with this Idea" from the idea card to start the workflow.
+                </div>
+              ) : (
+                <>
+                  <div style={{ marginBottom: '20px', padding: '16px', backgroundColor: '#F0FDF4', border: '1px solid #BBF7D0', borderRadius: '8px' }}>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px' }}>
+                      <span>✅</span>
+                      <strong style={{ color: '#15803D' }}>Paper generated: {paperResult.paper_name}</strong>
+                    </div>
+                    <a
+                      href={paperResult.pdf_path}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      style={{ fontSize: '0.85rem', color: '#2563EB', textDecoration: 'underline' }}
+                    >
+                      View PDF
+                    </a>
+                  </div>
+
+                  {/* Review section */}
+                  <div style={{ padding: '16px', backgroundColor: '#F8FAFC', border: '1px solid #E2E8F0', borderRadius: '8px', marginBottom: '16px' }}>
+                    <h3 style={{ fontSize: '1rem', fontWeight: 600, marginBottom: '12px', color: '#374151' }}>Review Paper</h3>
+                    {workflowStep === 'reviewing' ? (
+                      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: '#6B7280', fontSize: '0.875rem' }}>
+                        <div style={{ width: '16px', height: '16px', border: '2px solid #3B82F6', borderTopColor: 'transparent', borderRadius: '50%', animation: 'spin 1s linear infinite' }} />
+                        Reviewing paper...
+                      </div>
+                    ) : workflowStep === 'review_done' && reviewResult ? null : (
+                      <button
+                        onClick={handleReviewPaper}
+                        style={{ padding: '8px 16px', backgroundColor: '#0F172A', color: '#fff', border: 'none', borderRadius: '6px', fontSize: '0.875rem', fontWeight: 600, cursor: 'pointer' }}
+                      >
+                        Review Paper
+                      </button>
+                    )}
+                  </div>
+
+                  {/* Review results */}
+                  {workflowStep === 'review_done' && reviewResult && (
+                    <div style={{ padding: '16px', backgroundColor: '#fff', border: '1px solid #E2E8F0', borderRadius: '8px' }}>
+                      <h3 style={{ fontSize: '1rem', fontWeight: 600, marginBottom: '12px', color: '#374151' }}>Review Results</h3>
+                      {typeof reviewResult === 'object' ? (
+                        <div>
+                          {reviewResult.Summary && <div style={{ marginBottom: '12px' }}><strong>Summary:</strong><p style={{ margin: '4px 0 0', color: '#4B5563', lineHeight: 1.6 }}>{reviewResult.Summary}</p></div>}
+                          {reviewResult.Strengths && Array.isArray(reviewResult.Strengths) && (
+                            <div style={{ marginBottom: '12px' }}>
+                              <strong>Strengths:</strong>
+                              <ul style={{ margin: '4px 0 0', paddingLeft: '20px', color: '#4B5563' }}>
+                                {reviewResult.Strengths.map((s, i) => <li key={i}>{s}</li>)}
+                              </ul>
+                            </div>
+                          )}
+                          {reviewResult.Weaknesses && Array.isArray(reviewResult.Weaknesses) && (
+                            <div style={{ marginBottom: '12px' }}>
+                              <strong>Weaknesses:</strong>
+                              <ul style={{ margin: '4px 0 0', paddingLeft: '20px', color: '#4B5563' }}>
+                                {reviewResult.Weaknesses.map((w, i) => <li key={i}>{w}</li>)}
+                              </ul>
+                            </div>
+                          )}
+                          {reviewResult.Decision && (
+                            <div style={{ marginTop: '12px', padding: '10px 14px', backgroundColor: '#F0FDF4', border: '1px solid #BBF7D0', borderRadius: '6px' }}>
+                              <strong>Decision:</strong> {reviewResult.Decision}
+                              {reviewResult.Rating && <span style={{ marginLeft: '12px', fontWeight: 700 }}>Rating: {reviewResult.Rating}/10</span>}
+                            </div>
+                          )}
+                          {(!reviewResult.Summary && !reviewResult.Decision) && (
+                            <pre style={{ fontSize: '0.8rem', overflow: 'auto', whiteSpace: 'pre-wrap' }}>{JSON.stringify(reviewResult, null, 2)}</pre>
+                          )}
+                        </div>
+                      ) : (
+                        <pre style={{ fontSize: '0.8rem', overflow: 'auto', whiteSpace: 'pre-wrap' }}>{String(reviewResult)}</pre>
+                      )}
+                    </div>
+                  )}
+                </>
+              )}
+            </div>
+          )}
+        </>)}
+
+      {/* ========== 段落12：悬浮确认修改的按钮 (pendingChange) ========== */}
+      {pendingChange && (
+        currentView === 'exploration' ? (
+          // Tree View Modal - Smaller, simpler, positioned lower
+          <div
+            className="modify-popup"
+            data-panel-root="pending-change"
+            style={{
+              position: 'absolute',
+              left: pendingChange.screenX - 60, // Center the smaller modal
+              top: pendingChange.screenY + 20, // Position lower to avoid covering score
+              backgroundColor: '#ffffff',
+              border: '1px solid #d1d5db',
+              borderRadius: '6px',
+              padding: '8px',
+              zIndex: 1000,
+              boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
+              minWidth: '120px'
+            }}
+          >
+            <div style={{ display: 'flex', gap: '4px' }}>
+              {/* New Idea */}
+              <button
+                style={{
+                  padding: '4px 8px',
+                  backgroundColor: '#4C84FF',
+                  color: 'white',
+                  border: 'none',
+                  borderRadius: '4px',
+                  cursor: 'pointer',
+                  fontSize: '0.75rem',
+                  fontWeight: '500'
+                }}
+                onClick={() => {
+                  modifyIdeaBasedOnModifications(
+                    pendingChange.originalNode,
+                    pendingChange.ghostNode,
+                    pendingChange.modifications,
+                    pendingChange.behindNode
+                  );
+                  setPendingChange(null);
+                }}
+              >
+                New Idea
+              </button>
+              {/* Modify Eval */}
+              <button
+                style={{
+                  padding: '4px 8px',
+                  backgroundColor: '#4C84FF',
+                  color: 'white',
+                  border: 'none',
+                  borderRadius: '4px',
+                  cursor: 'pointer',
+                  fontSize: '0.75rem',
+                  fontWeight: '500'
+                }}
+                onClick={() => {
+                  if (!pendingChange) return;
+
+
+                  // 在应用修改前，先恢复节点到absolute定位的正确位置
+                  const nodeElement = pendingChange.draggedElement || document.querySelector(`[data-node-id="${pendingChange.originalNode.id}"]`);
+                  if (nodeElement && pendingChange.finalPosition) {
+                    nodeElement.style.position = 'absolute';
+                    nodeElement.style.left = `${pendingChange.finalPosition.x - 25}px`;
+                    nodeElement.style.top = `${pendingChange.finalPosition.y - 25}px`;
+                    nodeElement.style.zIndex = '100';
+                  }
+
+                  applyModifyEvaluation(pendingChange);
+                }}
+              >
+                Modify Eval
+              </button>
+              {/* Cancel */}
+              <button
+                style={{
+                  padding: '4px 8px',
+                  backgroundColor: '#fff',
+                  color: '#374151',
+                  border: '1px solid #d1d5db',
+                  borderRadius: '4px',
+                  cursor: 'pointer',
+                  fontSize: '0.75rem',
+                  fontWeight: '500'
+                }}
+                onClick={() => {
+                  cancelPendingChange(pendingChange, { reason: 'manual' });
+                }}
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        ) : (
+          // Plot View Modal - Original design
+          <div
+            className="modify-popup"
+            data-panel-root="pending-change"
+            style={{
+              position: 'absolute',
+              left: pendingChange.screenX,
+              top: pendingChange.screenY,
+              backgroundColor: '#f3f4f6',
+              border: '1px solid #d1d5db',
+              borderRadius: '4px',
+              padding: '6px 8px',
+              zIndex: 999,
+            }}
+          >
+            <div style={{ display: 'flex', gap: '8px' }}>
+              {/* Generate New Idea */}
+              <button
+                style={{
+                  padding: '4px 8px',
+                  backgroundColor: '#4C84FF',
+                  color: 'white',
+                  border: 'none',
+                  borderRadius: '4px',
+                  cursor: 'pointer',
+                }}
+                onClick={() => {
+                  modifyIdeaBasedOnModifications(
+                    pendingChange.originalNode,
+                    pendingChange.ghostNode,
+                    pendingChange.modifications,
+                    pendingChange.behindNode
+                  );
+                  setPendingChange(null);
+                }}
+              >
+                New Idea
+              </button>
+              {/* Modify Original */}
+              <button
+                style={{
+                  padding: '4px 8px',
+                  backgroundColor: '#4C84FF',
+                  color: 'white',
+                  border: 'none',
+                  borderRadius: '4px',
+                  cursor: 'pointer',
+                }}
+                onClick={() => {
+                  if (!pendingChange) return;
+
+
+                  // 在应用修改前，先恢复节点到absolute定位的正确位置
+                  const nodeElement = pendingChange.draggedElement || document.querySelector(`[data-node-id="${pendingChange.originalNode.id}"]`);
+                  if (nodeElement && pendingChange.finalPosition) {
+                    nodeElement.style.position = 'absolute';
+                    nodeElement.style.left = `${pendingChange.finalPosition.x - 25}px`;
+                    nodeElement.style.top = `${pendingChange.finalPosition.y - 25}px`;
+                    nodeElement.style.zIndex = '100';
+                  }
+
+                  applyModifyEvaluation(pendingChange);
+                }}
+              >
+                Modify Eval
+              </button>
+              {/* Cancel */}
+              <button
+                style={{
+                  padding: '4px 8px',
+                  backgroundColor: '#fff',
+                  color: '#374151',
+                  border: '1px solid #d1d5db',
+                  borderRadius: '4px',
+                  cursor: 'pointer',
+                }}
+                onClick={() => {
+                  cancelPendingChange(pendingChange, { reason: 'manual' });
+                }}
+              >
+                Cancel
+              </button>
             </div>
           </div>
+        )
+      )}
 
-        </>)}
-
-      {/* ========== 段落12：悬浮确认修改的按钮 (pendingChange) ========== */}
-      {pendingChange && (
+      {pendingMerge && (
         <div
+          className="merge-popup"
+          data-panel-root="pending-merge"
           style={{
             position: 'absolute',
-            left: pendingChange.screenX,
-            top: pendingChange.screenY,
+            left: pendingMerge.screenX || window.innerWidth / 2 - 150,
+            top: pendingMerge.screenY || window.innerHeight / 2 - 80,
             backgroundColor: '#f3f4f6',
             border: '1px solid #d1d5db',
             borderRadius: '4px',
             padding: '6px 8px',
-            zIndex: 999,
+            zIndex: 1000,
           }}
         >
-          <div style={{ display: 'flex', gap: '8px' }}>
-            {/* Generate New Idea */}
-            <button
-              style={{
-                padding: '4px 8px',
-                backgroundColor: '#4C84FF',
-                color: 'white',
-                border: 'none',
-                borderRadius: '4px',
-                cursor: 'pointer',
-              }}
-              onClick={() => {
-                modifyIdeaBasedOnModifications(
-                  pendingChange.originalNode,
-                  pendingChange.ghostNode,
-                  pendingChange.modifications,
-                  pendingChange.behindNode
-                );
-                setPendingChange(null);
-              }}
-            >
-              New Idea
-            </button>
-            {/* Modify Original */}
-            <button
-              style={{
-                padding: '4px 8px',
-                backgroundColor: '#4C84FF',
-                color: 'white',
-                border: 'none',
-                borderRadius: '4px',
-                cursor: 'pointer',
-              }}
-              onClick={() => {
-                const modifiedOriginal = {
-                  ...pendingChange.originalNode,
-                  x: pendingChange.ghostNode.x,
-                  y: pendingChange.ghostNode.y,
-                  [xAxisMetric]: pendingChange.ghostNode[xAxisMetric],
-                  [yAxisMetric]: pendingChange.ghostNode[yAxisMetric],
-                };
-                // Remove the ghost node and update the original node
-                setNodes((prev) =>
-                  prev
-                    .filter((n) => n.id !== pendingChange.ghostNode.id)
-                    .map((n) => (n.id === modifiedOriginal.id ? modifiedOriginal : n))
-                );
-                setLinks((prev) =>
-                  prev.filter((lk) => lk.target !== pendingChange.ghostNode.id)
-                );
-                setPendingChange(null);
-              }}
-            >
-              Modify Eval
-            </button>
-            {/* Cancel */}
-            <button
-              style={{
-                padding: '4px 8px',
-                backgroundColor: '#fff',
-                color: '#374151',
-                border: '1px solid #d1d5db',
-                borderRadius: '4px',
-                cursor: 'pointer',
-              }}
-              onClick={() => {
-                setNodes((prev) =>
-                  prev.filter((nd) => nd.id !== pendingChange.ghostNode.id)
-                );
-                setLinks((prev) =>
-                  prev.filter((lk) => lk.target !== pendingChange.ghostNode.id)
-                );
-                setPendingChange(null);
-              }}
-            >
-              Cancel
-            </button>
-          </div>
+          {pendingMerge.action === 'evaluation_drag' ? (
+            // Plot View 拖放选项
+            <>
+              <div style={{ marginBottom: '6px', fontSize: '0.8rem', color: '#374151' }}>
+                What would you like to do with "{pendingMerge.sourceNode.title}"?
+              </div>
+              <div style={{ display: 'flex', gap: '8px' }}>
+                <button
+                  style={{
+                    padding: '4px 12px',
+                    backgroundColor: '#4C84FF',
+                    color: 'white',
+                    border: 'none',
+                    borderRadius: '4px',
+                    cursor: 'pointer',
+                  }}
+                  onClick={() => {
+                    // 生成子节点: pass source node directly to avoid stale selectedNode state
+                    generateChildNodes(pendingMerge.sourceNode);
+                    setPendingMerge(null);
+                  }}
+                >
+                  New Idea
+                </button>
+                <button
+                  style={{
+                    padding: '4px 12px',
+                    backgroundColor: '#f59e0b',
+                    color: 'white',
+                    border: 'none',
+                    borderRadius: '4px',
+                    cursor: 'pointer',
+                  }}
+                  onClick={() => {
+                    // 选中节点供用户查看详情
+                    setSelectedNode(pendingMerge.sourceNode);
+                    setPendingMerge(null);
+                    // TODO: 实现修改评分的UI界面
+                  }}
+                >
+                  Modify Eval
+                </button>
+                <button
+                  style={{
+                    padding: '4px 12px',
+                    backgroundColor: '#fff',
+                    color: '#374151',
+                    border: '1px solid #d1d5db',
+                    borderRadius: '4px',
+                    cursor: 'pointer',
+                  }}
+                  onClick={() => {
+                    cancelPendingMerge(pendingMerge);
+                  }}
+                >
+                  Cancel
+                </button>
+              </div>
+            </>
+          ) : (
+            // 原有的 Merge 对话框
+            <>
+              <div style={{ marginBottom: '6px', fontSize: '0.8rem', color: '#374151' }}>
+                {pendingMerge.isFragmentMerge
+                  ? `Merge fragment with "${pendingMerge.targetNode?.title}"?`
+                  : 'Merge these two ideas?'}
+              </div>
+              <div style={{ display: 'flex', gap: '8px' }}>
+                <button
+                  style={{
+                    padding: '4px 12px',
+                    backgroundColor: '#4C84FF',
+                    color: 'white',
+                    border: 'none',
+                    borderRadius: '4px',
+                    cursor: 'pointer',
+                  }}
+                  onClick={async () => {
+                    const nodeA = pendingMerge.sourceNode || pendingMerge.nodeA;
+                    const nodeB = pendingMerge.targetNode || pendingMerge.nodeB;
+
+                    // Apply merge animation before starting merge
+                    // Check if source is a fragment
+                    const isSourceFragment = fragmentNodes.some(f => f.id === nodeA.id);
+                    const ghostPos =
+                      dragVisualState?.ghostPosition ||
+                      getNodeCenterRelativeToContainer(nodeA.id) ||
+                      getNodeCenterRelativeToContainer(nodeB.id);
+                    setMergeAnimationState({
+                      sourceId: nodeA.id,
+                      targetId: nodeB.id,
+                      ghostPosition: ghostPos
+                    });
+
+                    if (isSourceFragment) {
+                      // If source is fragment, update fragmentNodes for nodeA and nodes for nodeB
+                      setFragmentNodes((prev) =>
+                        prev.map((f) => {
+                          if (f.id === nodeA.id) {
+                            return { ...f, evaluationOpacity: 0, isPendingMerge: true };
+                          }
+                          return f;
+                        })
+                      );
+
+                      setNodes((prev) =>
+                        prev.map((n) => {
+                          if (n.id === nodeB.id) {
+                            return { ...n, isBeingMerged: true };
+                          }
+                          return n;
+                        })
+                      );
+                    } else {
+                      // Normal node merge
+                      setNodes((prev) =>
+                        prev.map((n) => {
+                          if (n.id === nodeA.id) {
+                            return { ...n, evaluationOpacity: 0 };
+                          } else if (n.id === nodeB.id) {
+                            return { ...n, isBeingMerged: true };
+                          }
+                          return n;
+                        })
+                      );
+                    }
+
+                    // 清理 pending 状态
+                    setPendingMerge(null);
+                    setDragVisualState(null);
+
+                    // 直接触发合并 - 通过设置 mergeMode 的方式
+                    setMergeMode({
+                      active: false,
+                      firstNode: nodeA,
+                      secondNode: nodeB,
+                      cursorPosition: { x: 0, y: 0 },
+                      showDialog: false
+                    });
+
+                    // 使用 setTimeout 确保状态已更新
+                    setTimeout(() => {
+                      handleMergeConfirm(nodeA, nodeB);
+                    }, 0);
+                  }}
+                >
+                  Merge
+                </button>
+                <button
+                  style={{
+                    padding: '4px 12px',
+                    backgroundColor: '#fff',
+                    color: '#374151',
+                    border: '1px solid #d1d5db',
+                    borderRadius: '4px',
+                    cursor: 'pointer',
+                  }}
+                  onClick={() => {
+                    cancelPendingMerge(pendingMerge);
+                  }}
+                >
+                  Cancel
+                </button>
+              </div>
+            </>
+          )}
         </div>
       )}
+      {/* System Prompt Edit Modal */}
+      <EditModal
+        isOpen={isEditingSystemPrompt}
+        onClose={() => {
+          setIsEditingSystemPrompt(false);
+          setModalAnchorEl(null);
+        }}
+        title="Edit System Prompt"
+        defaultText={defaultPrompts.system_prompt}
+        initialValue={systemPrompt}
+        onSave={async (finalValue) => {
+          const promptToSave = finalValue || defaultPrompts.system_prompt;
+          const success = await updateSystemPrompt(promptToSave);
+          if (success) {
+            setSystemPrompt(promptToSave);
+            setIsEditingSystemPrompt(false);
+            setModalAnchorEl(null);
+          }
+        }}
+        anchorRef={modalAnchorEl}
+      />
 
-      {pendingMerge && (
+      {/* Fragment Menu */}
+      {fragmentMenuState && (
         <div
+          data-fragment-menu
+          data-panel-root="fragment-menu"
           style={{
-            position: 'absolute',
-            left: pendingMerge.screenX,
-            top: pendingMerge.screenY,
-            backgroundColor: '#f3f4f6',
-            border: '1px solid #d1d5db',
-            borderRadius: '4px',
-            padding: '6px 8px',
+            position: 'fixed',
+            left: fragmentMenuState.x,
+            top: fragmentMenuState.y,
+            backgroundColor: 'white',
+            boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
+            borderRadius: '8px',
+            padding: '8px',
             zIndex: 1000,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '8px',
+            minWidth: '150px'
           }}
         >
-          <div style={{ marginBottom: '6px', fontSize: '0.8rem', color: '#374151' }}>
-            Merge these two ideas?
+          <div style={{ fontSize: '12px', color: '#666', marginBottom: '4px', padding: '0 4px' }}>
+            Create Fragment Node
           </div>
           <div style={{ display: 'flex', gap: '8px' }}>
             <button
+              onClick={handleFragmentConfirm}
               style={{
-                padding: '4px 12px',
+                padding: '6px 12px',
                 backgroundColor: '#4C84FF',
                 color: 'white',
                 border: 'none',
-                borderRadius: '4px',
+                borderRadius: '6px',
                 cursor: 'pointer',
-              }}
-              onClick={() => {
-                mergeIdeas(pendingMerge.nodeA, pendingMerge.nodeB);
-                setPendingMerge(null);
+                fontSize: '0.875rem',
+                fontWeight: '600'
               }}
             >
-              Merge
+              Fragment
             </button>
             <button
+              onClick={hideFragmentMenu}
               style={{
-                padding: '4px 12px',
+                padding: '6px 12px',
                 backgroundColor: '#fff',
                 color: '#374151',
                 border: '1px solid #d1d5db',
-                borderRadius: '4px',
+                borderRadius: '6px',
                 cursor: 'pointer',
-              }}
-              onClick={() => {
-                setNodes(prev =>
-                  prev.map(n => {
-                    if (n.id === pendingMerge.nodeA.id) {
-                      return { ...n, evaluationOpacity: 1 };
-                    } else if (n.id === pendingMerge.nodeB.id) {
-                      return { ...n, isBeingMerged: false };
-                    }
-                    return n;
-                  })
-                );
-                setMergeTargetId(null);
-                setPendingMerge(null)
+                fontSize: '0.875rem',
+                fontWeight: '600'
               }}
             >
               Cancel
@@ -3993,207 +7267,18 @@ const TreePlotVisualization = () => {
           </div>
         </div>
       )}
-      {/* System Prompt Edit Modal */}
-      <EditModal
-        isOpen={isEditingSystemPrompt}
-        onClose={() => {
-          setIsEditingSystemPrompt(false);
-          setModalAnchorEl(null);
-        }}
-        title="Edit System Prompt"
-        defaultText={defaultPrompts.system_prompt}
-        initialValue={systemPrompt}
-        onSave={async (finalValue) => {
-          const promptToSave = finalValue || defaultPrompts.system_prompt;
-          const success = await updateSystemPrompt(promptToSave);
-          if (success) {
-            setSystemPrompt(promptToSave);
-            setIsEditingSystemPrompt(false);
-            setModalAnchorEl(null);
-          }
-        }}
-        anchorRef={modalAnchorEl}
-      />
-
-      {/* Criteria Edit Modal */}
-      <EditModal
-        isOpen={editingCriteria !== null}
-        onClose={() => {
-          setEditingCriteria(null);
-          setModalAnchorEl(null);
-        }}
-        title={`Edit ${editingCriteria ? editingCriteria.charAt(0).toUpperCase() + editingCriteria.slice(1) : ''} Criteria`}
-        defaultText={
-          editingCriteria === 'impact' ? defaultPrompts.impact :
-            editingCriteria === 'feasibility' ? defaultPrompts.feasibility :
-              defaultPrompts.novelty
-        }
-        initialValue={
-          editingCriteria === 'impact' ? impactCriteria :
-            editingCriteria === 'feasibility' ? feasibilityCriteria :
-              noveltyCriteria
-        }
-        onSave={async (finalValue) => {
-          const criteriaToSave = finalValue || (editingCriteria === 'impact' ? defaultPrompts.impact : editingCriteria === 'feasibility' ? defaultPrompts.feasibility : defaultPrompts.novelty);
-
-          const currentCriteria = editingCriteria === 'impact' ? impactCriteria :
-            editingCriteria === 'feasibility' ? feasibilityCriteria :
-              noveltyCriteria;
-
-
-          const success = await updateCriteria(editingCriteria, criteriaToSave);
-          if (success) {
-            if (editingCriteria === 'impact') setImpactCriteria(criteriaToSave);
-            else if (editingCriteria === 'feasibility') setFeasibilityCriteria(criteriaToSave);
-            else if (editingCriteria === 'novelty') setNoveltyCriteria(criteriaToSave);
 
-            setEditingCriteria(null); // Close the modal
-          }
-        }}
-        anchorRef={modalAnchorEl}
-        width={dashboardWidth}
+      {/* Dimension Edit Dropdown */}
+      <DimensionEditDropdown
+        isOpen={editingDimensionIndex !== null}
+        anchorPosition={dimensionDropdownAnchor}
+        currentPair={editingDimensionIndex !== null ? selectedDimensionPairs[editingDimensionIndex] : null}
+        pairIndex={editingDimensionIndex}
+        onClose={handleCloseDimensionEdit}
+        onConfirm={handleDimensionEditConfirm}
+        isLoading={isSingleDimensionEvaluating}
       />
 
-      {/* Proceed Confirmation Dialog */}
-      {showProceedConfirm && (
-        <>
-          {/* Modal Backdrop */}
-          <div
-            style={{
-              position: 'fixed',
-              top: 0,
-              left: 0,
-              right: 0,
-              bottom: 0,
-              backgroundColor: 'rgba(0,0,0,0.5)',
-              zIndex: 999,
-            }}
-            onClick={() => {
-              setShowProceedConfirm(false);
-              setProceedError(null);
-            }}
-          />
-
-          {/* Modal Content */}
-          <div
-            style={{
-              position: 'fixed',
-              top: '50%',
-              left: '50%',
-              transform: 'translate(-50%, -50%)',
-              backgroundColor: 'white',
-              border: '1px solid #e5e7eb',
-              borderRadius: '8px',
-              padding: '20px',
-              zIndex: 1000,
-              boxShadow: '0 10px 25px rgba(0,0,0,0.15)',
-              minWidth: '400px',
-            }}
-          >
-            <div style={{ marginBottom: '16px', fontSize: '1rem', color: '#374151', fontWeight: 500 }}>
-              Generate Code and Paper
-            </div>
-            <div style={{ marginBottom: '16px', fontSize: '0.875rem', color: '#6B7280', lineHeight: '1.5' }}>
-              This will generate experimental code and write a research paper for the selected idea.
-              This process may take several minutes to complete.
-            </div>
-
-            {/* Semantic Scholar API Key Input */}
-            <div style={{ marginBottom: '16px' }}>
-              <label style={{
-                display: 'block',
-                marginBottom: '6px',
-                fontSize: '0.875rem',
-                color: '#374151',
-                fontWeight: 500
-              }}>
-                Semantic Scholar API Key {!selectedNode?.originalData?.is_experimental ? '*' : '(Optional for now)'}
-              </label>
-              <input
-                type="password"
-                value={s2ApiKey}
-                onChange={(e) => setS2ApiKey(e.target.value)}
-                placeholder={selectedNode?.originalData?.is_experimental ?
-                  "Enter your Semantic Scholar API key (can be provided later for paper generation)" :
-                  "Enter your Semantic Scholar API key"}
-                style={{
-                  width: '100%',
-                  padding: '8px 12px',
-                  border: '1px solid #d1d5db',
-                  borderRadius: '6px',
-                  fontSize: '0.875rem',
-                  color: '#374151',
-                  backgroundColor: '#fff',
-                  boxSizing: 'border-box'
-                }}
-              />
-              <div style={{ marginTop: '4px', fontSize: '0.75rem', color: '#6B7280' }}>
-                {selectedNode?.originalData?.is_experimental ?
-                  'For experimental ideas: Required only when generating paper. You can provide it later.' :
-                  'Required for paper generation.'
-                } Get your API key from{' '}
-                <a
-                  href="https://www.semanticscholar.org/product/api"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  style={{ color: '#4C84FF', textDecoration: 'underline' }}
-                >
-                  Semantic Scholar API
-                </a>
-              </div>
-            </div>
-
-            {proceedError && (
-              <div style={{
-                marginBottom: '16px',
-                padding: '8px 12px',
-                backgroundColor: '#FEF2F2',
-                border: '1px solid #FECACA',
-                borderRadius: '4px',
-                fontSize: '0.875rem',
-                color: '#DC2626'
-              }}>
-                {proceedError}
-              </div>
-            )}
-            <div style={{ display: 'flex', gap: '12px', justifyContent: 'flex-end' }}>
-              <button
-                style={{
-                  padding: '8px 16px',
-                  backgroundColor: '#fff',
-                  color: '#374151',
-                  border: '1px solid #d1d5db',
-                  borderRadius: '6px',
-                  cursor: 'pointer',
-                  fontSize: '0.875rem',
-                }}
-                onClick={() => {
-                  setShowProceedConfirm(false);
-                  setProceedError(null);
-                }}
-              >
-                Cancel
-              </button>
-              <button
-                style={{
-                  padding: '8px 16px',
-                  backgroundColor: ((!selectedNode?.originalData?.is_experimental && !s2ApiKey.trim()) || isGeneratingCode || isGeneratingPaper) ? '#9CA3AF' : '#4C84FF',
-                  color: 'white',
-                  border: 'none',
-                  borderRadius: '6px',
-                  cursor: ((!selectedNode?.originalData?.is_experimental && !s2ApiKey.trim()) || isGeneratingCode || isGeneratingPaper) ? 'not-allowed' : 'pointer',
-                  fontSize: '0.875rem',
-                  fontWeight: 500,
-                }}
-                onClick={handleConfirmProceed}
-                disabled={(!selectedNode?.originalData?.is_experimental && !s2ApiKey.trim()) || isGeneratingCode || isGeneratingPaper}
-              >
-                {isGeneratingCode || isGeneratingPaper ? 'Processing...' : 'Yes, Proceed'}
-              </button>
-            </div>
-          </div>
-        </>
-      )}
     </div>
 
   );
diff --git a/frontend/src/index.css b/frontend/src/index.css
index ec2585e8..e26f23bd 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -11,3 +11,7 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
diff --git a/frontend/src/utils/contentParser.js b/frontend/src/utils/contentParser.js
new file mode 100644
index 00000000..d773999b
--- /dev/null
+++ b/frontend/src/utils/contentParser.js
@@ -0,0 +1,158 @@
+const SECTION_DEFINITIONS = [
+  { title: 'Problem', regex: /\*\*Problem:\*\*|Problem:|Problem\s*\*\*|\*\*Description:\*\*|Description:/ },
+  { title: 'Approach', regex: /\*\*Approach:\*\*|Approach:|Approach\s*\*\*/ },
+  { title: 'Experiment', regex: /\*\*Experiment:\*\*|Experiment:|Experiment\s*\*\*/ },
+  { title: 'Importance', regex: /\*\*Importance:\*\*|Importance:|Importance\s*\*\*/ },
+  { title: 'Difficulty', regex: /\*\*Difficulty:\*\*|Difficulty:|Difficulty\s*\*\*/ },
+  { title: 'Novelty Comparison', regex: /\*\*Novelty Comparison:\*\*|Novelty Comparison:|Novelty\s*Comparison\s*\*\*/ }
+];
+
+
+export function extractContentSections(content = '') {
+  if (!content) {
+    return [];
+  }
+
+  const parsedSections = [];
+  const allMatches = [];
+
+  SECTION_DEFINITIONS.forEach((section) => {
+    const displayTitle = section.title;
+    let match;
+    let tempContent = content;
+    let offset = 0;
+
+    while ((match = tempContent.match(section.regex)) !== null) {
+      const startPos = match.index + offset;
+      const matchLength = match[0].length;
+
+      allMatches.push({
+        title: displayTitle,
+        position: startPos,
+        length: matchLength
+      });
+
+      offset += match.index + matchLength;
+      tempContent = content.substring(offset);
+    }
+  });
+
+  allMatches.sort((a, b) => a.position - b.position);
+
+  for (let i = 0; i < allMatches.length; i++) {
+    const currentMatch = allMatches[i];
+    const startPos = currentMatch.position + currentMatch.length;
+    let endPos = content.length;
+
+    if (i < allMatches.length - 1) {
+      endPos = allMatches[i + 1].position;
+    }
+
+    const sectionContent = content.substring(startPos, endPos).trim();
+
+    if (sectionContent) {
+      parsedSections.push({
+        title: currentMatch.title,
+        content: sectionContent
+      });
+    }
+  }
+
+  return parsedSections;
+}
+
+export function buildNodeContent(node = {}) {
+  if (!node || typeof node !== 'object') return {};
+
+  const source =
+    node.originalData && typeof node.originalData === 'object'
+      ? node.originalData
+      : null;
+  const idea = source ? { ...source } : {};
+
+  const pick = (...values) => {
+    for (const value of values) {
+      if (value !== undefined && value !== null && value !== '') return value;
+    }
+    return undefined;
+  };
+
+  const id = pick(idea.id, idea.ID, node.id);
+  const title = pick(idea.title, idea.Title, idea.Name, node.title);
+  const content = pick(idea.content, idea.Problem, node.content);
+
+  if (id !== undefined) idea.id = id;
+  if (title !== undefined) idea.title = title;
+  if (content !== undefined) idea.content = content;
+
+  if (node.scores && idea.scores == null) {
+    idea.scores = node.scores;
+  }
+  const problemHighlights = pick(
+    idea.problemHighlights,
+    idea.problem_highlights,
+    node.problemHighlights
+  );
+  if (problemHighlights !== undefined) {
+    idea.problemHighlights = problemHighlights;
+  }
+
+  const dimension1Score = pick(
+    idea.Dimension1Score,
+    idea.dimension1Score,
+    node.dimension1Score
+  );
+  const dimension2Score = pick(
+    idea.Dimension2Score,
+    idea.dimension2Score,
+    node.dimension2Score
+  );
+  const dimension3Score = pick(
+    idea.Dimension3Score,
+    idea.dimension3Score,
+    node.dimension3Score
+  );
+
+  const dimension1Reason = pick(
+    idea.Dimension1Reason,
+    idea.dimension1Reason
+  );
+  const dimension2Reason = pick(
+    idea.Dimension2Reason,
+    idea.dimension2Reason
+  );
+  const dimension3Reason = pick(
+    idea.Dimension3Reason,
+    idea.dimension3Reason
+  );
+
+  if (dimension1Score !== undefined) idea['dimension1'] = dimension1Score;
+  if (dimension2Score !== undefined) idea['dimension2'] = dimension2Score;
+  if (dimension3Score !== undefined) idea['dimension3'] = dimension3Score;
+  if (dimension1Reason !== undefined) idea['dimension1-reason'] = dimension1Reason;
+  if (dimension2Reason !== undefined) idea['dimension2-reason'] = dimension2Reason;
+  if (dimension3Reason !== undefined) idea['dimension3-reason'] = dimension3Reason;
+
+  [
+    'ID',
+    'Title',
+    'Name',
+    'Problem',
+    'Content',
+    'Dimension1Reason',
+    'Dimension2Reason',
+    'Dimension3Reason',
+    'Dimension1Score',
+    'Dimension2Score',
+    'Dimension3Score',
+    'dimension1Score',
+    'dimension2Score',
+    'dimension3Score',
+    'evaluationReasoning',
+    'problem_highlights'
+  ].forEach((key) => {
+    if (key in idea) delete idea[key];
+  });
+
+  return idea;
+}
diff --git a/scripts/code.sh b/scripts/code.sh
index 446a1564..541afd35 100644
--- a/scripts/code.sh
+++ b/scripts/code.sh
@@ -1,3 +1,3 @@
 #!/bin/zsh
 
-python ../examples/code.py --model gpt-4o --output_dir ../experiments
+python ../examples/code.py --model gpt-5-mini --output_dir ../experiments
diff --git a/scripts/demo.sh b/scripts/demo.sh
index 9139655f..abf3a81c 100644
--- a/scripts/demo.sh
+++ b/scripts/demo.sh
@@ -1,3 +1,3 @@
 #!/bin/zsh
 
-python ../examples/demo.py --output_dir ../demo --model gpt-4o-mini --template acl
+python ../examples/demo.py --output_dir ../demo --model gpt-5-mini --template acl
diff --git a/scripts/drawer.sh b/scripts/drawer.sh
index 66e12dab..570ec062 100644
--- a/scripts/drawer.sh
+++ b/scripts/drawer.sh
@@ -1,7 +1,7 @@
 #!/bin/bash
 
 # Define default parameters
-MODEL="gpt-4o-mini"
+MODEL="gpt-5-mini"
 OUTPUT="diagram_output.json"
 TEMPERATURE=0.75
 TMP_INPUT="example_input.txt"
diff --git a/scripts/review.sh b/scripts/review.sh
index 86bd4457..8b32bb28 100644
--- a/scripts/review.sh
+++ b/scripts/review.sh
@@ -1,3 +1,3 @@
 #!/bin/zsh
 
-python ../examples/review.py --model gpt-4o-2024-08-06
+python ../examples/review.py --model gpt-5-mini
diff --git a/scripts/think.sh b/scripts/think.sh
index b269393f..841d5492 100644
--- a/scripts/think.sh
+++ b/scripts/think.sh
@@ -1,3 +1,3 @@
 #!/bin/zsh
 
-python ../examples/think.py --model gpt-4o-2024-08-06 --num-ideas 2
+python ../examples/think.py --model gpt-5-mini --num-ideas 2
diff --git a/tests/test_backend_workflow.py b/tests/test_backend_workflow.py
new file mode 100644
index 00000000..f08525c5
--- /dev/null
+++ b/tests/test_backend_workflow.py
@@ -0,0 +1,441 @@
+"""
+Integration test: generate-initial → coder → writer → reviewer
+
+Run against a live backend:
+    python tests/test_backend_workflow.py [--url URL] [--model MODEL] [--intent INTENT]
+
+Environment variables (alternatively):
+    OPENAI_API_KEY / ANTHROPIC_API_KEY / DEEPSEEK_API_KEY
+    TEST_MODEL   (default: deepseek-chat)
+    TEST_INTENT  (default: "applying GNNs to improve LLM reasoning")
+    TEST_S2_KEY  (Semantic Scholar key, required for /api/write)
+    BACKEND_URL  (default: http://localhost:5000)
+
+Exit code 0 = all required steps passed, 1 = any required step failed.
+"""
+
+import argparse
+import json
+import logging
+import os
+import sys
+import time
+from datetime import datetime
+from typing import Any, Dict, Optional, Tuple
+
+import requests
+
+# ---------------------------------------------------------------------------
+# Logging
+# ---------------------------------------------------------------------------
+LOG_PATH = os.path.join(os.path.dirname(__file__), "test_backend_workflow.log")
+logging.basicConfig(
+    level=logging.INFO,
+    format="%(asctime)s  %(message)s",
+    datefmt="%H:%M:%S",
+    handlers=[
+        logging.StreamHandler(sys.stdout),
+        logging.FileHandler(LOG_PATH, mode="w"),
+    ],
+)
+log = logging.getLogger(__name__)
+
+SEPARATOR = "=" * 60
+
+
+# ---------------------------------------------------------------------------
+# Helpers
+# ---------------------------------------------------------------------------
+
+
+def _post(url: str, payload: Dict[str, Any], timeout: int = 600) -> Tuple[int, Dict]:
+    resp = requests.post(url, json=payload, timeout=timeout)
+    try:
+        body = resp.json()
+    except Exception:
+        body = {"_raw": resp.text}
+    return resp.status_code, body
+
+
+def _get(url: str, timeout: int = 30) -> Tuple[int, Dict]:
+    resp = requests.get(url, timeout=timeout)
+    try:
+        body = resp.json()
+    except Exception:
+        body = {"_raw": resp.text}
+    return resp.status_code, body
+
+
+def _assert(condition: bool, msg: str) -> None:
+    if not condition:
+        raise AssertionError(msg)
+
+
+# ---------------------------------------------------------------------------
+# Individual test steps
+# ---------------------------------------------------------------------------
+
+
+def step_health_check(base: str) -> None:
+    """Backend must be reachable; /api/generate-initial without config returns 400."""
+    code, body = _post(f"{base}/api/generate-initial", {"intent": "test"}, timeout=10)
+    _assert(
+        code in (400, 200),
+        f"Expected 400 (not configured) or 200, got {code}: {body}",
+    )
+    log.info("  backend reachable, status_code=%d", code)
+
+
+def step_configure(base: str, model: str, api_key: str) -> None:
+    code, body = _post(
+        f"{base}/api/configure",
+        {"model": model, "api_key": api_key},
+    )
+    _assert(code == 200, f"configure failed {code}: {body}")
+    _assert(body.get("status") == "configured", f"unexpected body: {body}")
+    log.info("  model=%s  budget=%s", body.get("model"), body.get("budget"))
+
+
+def step_generate_initial(base: str, intent: str) -> Dict[str, Any]:
+    """
+    Call /api/generate-initial and validate the idea shape required by coder.
+    Returns the idea node dict (with id, title, content, originalData).
+    """
+    log.info("  intent: %r", intent)
+    code, body = _post(f"{base}/api/generate-initial", {"intent": intent}, timeout=300)
+    _assert(code == 200, f"generate-initial failed {code}: {body.get('error', body)}")
+
+    ideas = body.get("ideas", [])
+    _assert(len(ideas) > 0, "generate-initial returned no ideas")
+
+    node = ideas[0]
+    log.info("  idea id=%s  title=%r", node.get("id"), node.get("title"))
+
+    original = node.get("originalData", {})
+    _assert(isinstance(original, dict), "originalData is not a dict")
+    _assert(bool(original), "originalData is empty")
+
+    # ---- Fields required by coder ----------------------------------------
+    missing_top = [
+        k
+        for k in ("Title", "Problem", "Approach", "NoveltyComparison")
+        if not original.get(k)
+    ]
+    if missing_top:
+        log.warning("  WARN: missing top-level fields: %s", missing_top)
+
+    is_exp = original.get("is_experimental", True)
+    log.info("  is_experimental=%s", is_exp)
+
+    if is_exp:
+        experiment = original.get("Experiment")
+        _assert(
+            isinstance(experiment, dict),
+            f"is_experimental=True but Experiment field is {type(experiment).__name__!r}: {experiment}",
+        )
+        missing_exp = [
+            k for k in ("Model", "Dataset", "Metric") if not experiment.get(k)
+        ]
+        _assert(
+            not missing_exp,
+            f"Experiment dict missing required keys: {missing_exp}  got: {list(experiment.keys())}",
+        )
+        log.info("  Experiment keys: %s", list(experiment.keys()))
+    else:
+        log.info("  non-experimental idea — skipping Experiment field check")
+
+    return node
+
+
+def step_coder(base: str, node: Dict[str, Any]) -> Optional[str]:
+    """
+    POST to /api/code.  Returns experiment_dir (relative) on success, None on failure.
+    A coder failure is reported but does NOT fail the overall test suite
+    (it is an LLM-dependent step that can fail for environment reasons).
+    """
+    original = node.get("originalData", {})
+    if not original.get("is_experimental", True):
+        log.info("  non-experimental idea — skipping coder step")
+        return None
+
+    log.info("  sending idea %r to coder …", node.get("title"))
+    code, body = _post(
+        f"{base}/api/code",
+        {"idea": node, "baseline_results": {}},
+        timeout=600,
+    )
+    _assert(code == 200, f"/api/code HTTP error {code}: {body.get('error', body)}")
+
+    success = body.get("success", False)
+    exp_dir = body.get("experiment_dir")
+    log.info("  coder success=%s  experiment_dir=%s", success, exp_dir)
+    if not success:
+        log.warning("  coder reported failure: %s", body.get("error_details", "")[:300])
+
+    return exp_dir if success else None
+
+
+def step_writer(
+    base: str, node: Dict[str, Any], exp_dir: Optional[str], s2_key: str
+) -> Optional[str]:
+    """
+    POST to /api/write.  Returns the API pdf_path on success, None otherwise.
+    Also a soft step — writer depends on LaTeX and can fail outside CI.
+    """
+    log.info("  sending idea %r to writer …", node.get("title"))
+    payload: Dict[str, Any] = {"idea": node, "s2_api_key": s2_key}
+    if exp_dir:
+        payload["experiment_dir"] = exp_dir
+
+    code, body = _post(f"{base}/api/write", payload, timeout=600)
+    _assert(code == 200, f"/api/write HTTP error {code}: {body.get('error', body)}")
+
+    success = body.get("success", False)
+    pdf_path = body.get("pdf_path")
+    log.info("  writer success=%s  pdf_path=%s", success, pdf_path)
+    if not success:
+        log.warning("  writer error: %s", body.get("error", "")[:300])
+
+    return pdf_path if success else None
+
+
+def step_reviewer(base: str, pdf_path: str, s2_key: str) -> None:
+    """POST to /api/review and validate the review structure."""
+    log.info("  reviewing pdf_path=%s …", pdf_path)
+    code, body = _post(
+        f"{base}/api/review",
+        {"pdf_path": pdf_path, "s2_api_key": s2_key},
+        timeout=300,
+    )
+    _assert(code == 200, f"/api/review HTTP error {code}: {body.get('error', body)}")
+    _assert(body.get("success"), f"review reported failure: {body.get('error', body)}")
+
+    review = body.get("review", {})
+    _assert(isinstance(review, dict), f"review is not a dict: {type(review)}")
+    log.info("  review keys: %s", list(review.keys()))
+
+
+def step_clear_session(base: str) -> None:
+    code, body = _post(f"{base}/api/clear-session", {})
+    _assert(code == 200, f"clear-session failed {code}: {body}")
+    log.info("  session cleared")
+
+
+# ---------------------------------------------------------------------------
+# Runner
+# ---------------------------------------------------------------------------
+
+
+class Result:
+    def __init__(self, name: str, required: bool = True):
+        self.name = name
+        self.required = required
+        self.status: str = "pending"  # pass | fail | skip
+        self.detail: str = ""
+        self.elapsed: float = 0.0
+
+
+def run_step(result: Result, fn, *args, **kwargs) -> bool:
+    log.info(SEPARATOR)
+    log.info("STEP: %s%s", result.name, "" if result.required else "  [optional]")
+    log.info(SEPARATOR)
+    t0 = time.time()
+    try:
+        fn(*args, **kwargs)
+        result.status = "pass"
+        result.elapsed = time.time() - t0
+        log.info("✓ PASS  (%.1fs)", result.elapsed)
+        return True
+    except AssertionError as exc:
+        result.status = "fail"
+        result.detail = str(exc)
+        result.elapsed = time.time() - t0
+        log.info("✗ FAIL  %s  (%.1fs)", exc, result.elapsed)
+        return False
+    except Exception as exc:
+        result.status = "fail"
+        result.detail = str(exc)
+        result.elapsed = time.time() - t0
+        log.info("✗ ERROR  %s  (%.1fs)", exc, result.elapsed)
+        return False
+
+
+def main() -> int:
+    parser = argparse.ArgumentParser(description="Backend workflow integration test")
+    parser.add_argument(
+        "--url", default=os.environ.get("BACKEND_URL", "http://localhost:5000")
+    )
+    parser.add_argument(
+        "--model", default=os.environ.get("TEST_MODEL", "deepseek-chat")
+    )
+    parser.add_argument(
+        "--intent",
+        default=os.environ.get("TEST_INTENT", "applying GNNs to improve LLM reasoning"),
+    )
+    parser.add_argument("--s2-key", default=os.environ.get("TEST_S2_KEY", ""))
+    parser.add_argument(
+        "--skip-coder", action="store_true", help="Skip the /api/code step"
+    )
+    parser.add_argument(
+        "--skip-writer", action="store_true", help="Skip the /api/write step"
+    )
+    parser.add_argument(
+        "--skip-reviewer", action="store_true", help="Skip the /api/review step"
+    )
+    args = parser.parse_args()
+
+    # Resolve API key from env
+    key_map = {
+        "deepseek-chat": "DEEPSEEK_API_KEY",
+        "deepseek-reasoner": "DEEPSEEK_API_KEY",
+        "claude-opus-4-6": "ANTHROPIC_API_KEY",
+        "claude-sonnet-4-5": "ANTHROPIC_API_KEY",
+        "gpt-5.2": "OPENAI_API_KEY",
+        "gpt-5-mini": "OPENAI_API_KEY",
+    }
+    env_var = key_map.get(args.model, "OPENAI_API_KEY")
+    api_key = os.environ.get(env_var, "")
+    if not api_key:
+        log.error("No API key found in $%s — set it before running.", env_var)
+        return 1
+
+    log.info("Backend Workflow Integration Test")
+    log.info("Intent : %r", args.intent)
+    log.info("URL    : %s", args.url)
+    log.info("Started: %s", datetime.now().isoformat())
+    log.info("Model  : %s", args.model)
+    log.info("")
+
+    results = []
+    node: Optional[Dict[str, Any]] = None
+    exp_dir: Optional[str] = None
+    pdf_path: Optional[str] = None
+
+    # ------------------------------------------------------------------
+    # Required steps
+    # ------------------------------------------------------------------
+    r = Result("health_check", required=True)
+    results.append(r)
+    if not run_step(r, step_health_check, args.url):
+        log.error("Backend unreachable — aborting.")
+        _print_summary(results)
+        return 1
+
+    r = Result("configure", required=True)
+    results.append(r)
+    if not run_step(r, step_configure, args.url, args.model, api_key):
+        _print_summary(results)
+        return 1
+
+    # generate-initial is the core required step
+    r = Result("generate_initial", required=True)
+    results.append(r)
+
+    def _generate_and_capture():
+        nonlocal node
+        node = step_generate_initial(args.url, args.intent)
+
+    if not run_step(r, _generate_and_capture):
+        _print_summary(results)
+        return 1
+
+    # ------------------------------------------------------------------
+    # Optional pipeline steps (failures logged but don't kill exit code)
+    # ------------------------------------------------------------------
+    if not args.skip_coder and node is not None:
+        r = Result("coder", required=False)
+        results.append(r)
+
+        def _code_and_capture():
+            nonlocal exp_dir
+            exp_dir = step_coder(args.url, node)
+
+        run_step(r, _code_and_capture)
+
+    s2_key = args.s2_key
+    if not args.skip_writer and node is not None and s2_key:
+        r = Result("writer", required=False)
+        results.append(r)
+
+        def _write_and_capture():
+            nonlocal pdf_path
+            pdf_path = step_writer(args.url, node, exp_dir, s2_key)
+
+        run_step(r, _write_and_capture)
+    elif not args.skip_writer and not s2_key:
+        log.info("")
+        log.info("Skipping writer — no TEST_S2_KEY / --s2-key provided.")
+
+    if not args.skip_reviewer and pdf_path and s2_key:
+        r = Result("reviewer", required=False)
+        results.append(r)
+        run_step(r, step_reviewer, args.url, pdf_path, s2_key)
+
+    # ------------------------------------------------------------------
+    # Cleanup
+    # ------------------------------------------------------------------
+    r = Result("clear_session", required=False)
+    results.append(r)
+    run_step(r, step_clear_session, args.url)
+
+    # ------------------------------------------------------------------
+    # Summary
+    # ------------------------------------------------------------------
+    _print_summary(results)
+
+    # Persist results JSON
+    results_path = os.path.join(
+        os.path.dirname(__file__), "test_backend_workflow_results.json"
+    )
+    with open(results_path, "w") as f:
+        json.dump(
+            {
+                "timestamp": datetime.now().isoformat(),
+                "model": args.model,
+                "intent": args.intent,
+                "results": [
+                    {
+                        "name": r.name,
+                        "required": r.required,
+                        "status": r.status,
+                        "elapsed": round(r.elapsed, 2),
+                        "detail": r.detail,
+                    }
+                    for r in results
+                ],
+            },
+            f,
+            indent=2,
+        )
+    log.info("Results → %s", results_path)
+    log.info("Log     → %s", LOG_PATH)
+    log.info(SEPARATOR)
+
+    # Fail if any required step failed
+    failed_required = [r for r in results if r.required and r.status == "fail"]
+    return 1 if failed_required else 0
+
+
+def _print_summary(results) -> None:
+    passed = sum(1 for r in results if r.status == "pass")
+    failed = sum(1 for r in results if r.status == "fail")
+    log.info("")
+    log.info(SEPARATOR)
+    log.info("SUMMARY  %d passed / %d failed  (total %d)", passed, failed, len(results))
+    for r in results:
+        icon = "✓" if r.status == "pass" else ("✗" if r.status == "fail" else "·")
+        opt = "" if r.required else "  [optional]"
+        detail = f"  — {r.detail}" if r.detail else ""
+        log.info(
+            "  %s [%-5s] %s  (%.1fs)%s%s",
+            icon,
+            r.status.upper(),
+            r.name,
+            r.elapsed,
+            opt,
+            detail,
+        )
+
+
+if __name__ == "__main__":
+    sys.exit(main())
diff --git a/tiny_scientist/coder.py b/tiny_scientist/coder.py
index 154c7788..e70ccab9 100644
--- a/tiny_scientist/coder.py
+++ b/tiny_scientist/coder.py
@@ -29,6 +29,11 @@
     make_write_file_tool,
 )
 from .utils.agent_sdk import AgentSdk, is_claude_agent_sdk, resolve_agent_sdk
+from .utils.llm import (
+    create_client,
+    extract_json_between_markers,
+    get_response_from_llm,
+)
 from .utils.openai_skills import build_openai_skill_shell_tool
 from .utils.rich_output import (
     print_cost_delta_summary,
@@ -36,10 +41,9 @@
     print_rows_table,
     print_stage_progress,
 )
+from .utils.sdk_client import configure_openai_agents_for_model, track_sdk_cost
 from .utils.sdk_mcp import claude_allowed_mcp_tools, ensure_mcp_config
 from .utils.skill_loader import skill_instructions
-from .utils.llm import create_client, extract_json_between_markers, get_response_from_llm
-from .utils.sdk_client import configure_openai_agents_for_model, track_sdk_cost
 
 
 class Coder:
@@ -213,13 +217,9 @@ def _setup_openai_sdk(
             code_tools.append(skill_shell_tool)
 
         coder_instructions = coder_base + self._openai_coder_tool_instructions()
-        coder_instructions += (
-            "Stay focused on implementing the current workspace step with the local files and blueprint."
-        )
+        coder_instructions += "Stay focused on implementing the current workspace step with the local files and blueprint."
         if skill_shell_tool is not None:
-            coder_instructions += (
-                " When a mounted OpenAI skill is relevant, use the shell tool to apply it."
-            )
+            coder_instructions += " When a mounted OpenAI skill is relevant, use the shell tool to apply it."
 
         self.agent = Agent(
             name="ExperimentCoder",
@@ -273,15 +273,15 @@ def _build_openai_code_tools(self) -> List[Any]:
         return [
             make_write_file_tool(WriteFileTool(self.output_dir)),
             make_read_file_tool(ReadFileTool(self.output_dir)),
-            make_run_experiment_tool(RunExperimentTool(self.output_dir, self.docker_runner)),
+            make_run_experiment_tool(
+                RunExperimentTool(self.output_dir, self.docker_runner)
+            ),
         ]
 
     def _openai_coder_tool_instructions(self) -> str:
         """Describe the active code tools for the OpenAI Agents SDK backend."""
         if self.use_codex_tool and self.model.startswith(("gpt-", "o1", "o3", "codex")):
-            return (
-                "Use the codex tool to write main.py and helper files, inspect files, and execute the script. "
-            )
+            return "Use the codex tool to write main.py and helper files, inspect files, and execute the script. "
         return (
             "Use write_file to save main.py and helper files, read_file to inspect them, "
             "and run_experiment to execute the workspace entrypoint. "
@@ -373,7 +373,10 @@ def _recover_from_codegen_interruption(
             return False, None
 
         self._print_run_summary(success=True)
-        return True, f"{interruption_reason} Recovered by running the current workspace."
+        return (
+            True,
+            f"{interruption_reason} Recovered by running the current workspace.",
+        )
 
     def _format_experiment_for_prompt(
         self, exp: Dict[str, Any]
@@ -449,20 +452,27 @@ def _plan(
             if baseline_results
             else ""
         )
-        prompt = self.prompts.experiment_plan_prompt.format(
-            title=idea["Title"],
-            problem=idea["Problem"],
-            approach=idea["Approach"],
-            model_details=model_text,
-            dataset_details=dataset_text,
-            metric_details=metric_text,
-            experiment_table=experiment_table,
-        ) + baseline_note
+        prompt = (
+            self.prompts.experiment_plan_prompt.format(
+                title=idea["Title"],
+                problem=idea["Problem"],
+                approach=idea["Approach"],
+                model_details=model_text,
+                dataset_details=dataset_text,
+                metric_details=metric_text,
+                experiment_table=experiment_table,
+            )
+            + baseline_note
+        )
 
         if self.agent_sdk == "claude":
             if self.claude_runners is None:
-                raise RuntimeError("Claude planner runner is not initialized for coder.")
-            response = self.claude_runners["planner"].run_sync(prompt, "experiment_plan")
+                raise RuntimeError(
+                    "Claude planner runner is not initialized for coder."
+                )
+            response = self.claude_runners["planner"].run_sync(
+                prompt, "experiment_plan"
+            )
         else:
             if self.planner_agent is None:
                 raise RuntimeError("Planner agent is not initialized for coder.")
@@ -492,7 +502,9 @@ def _plan(
                             "step": int(item.get("step", idx)),
                             "name": str(item.get("name", f"Step {idx}")),
                             "description": str(item.get("description", "")),
-                            "row_refs": [str(r).strip() for r in row_refs if str(r).strip()],
+                            "row_refs": [
+                                str(r).strip() for r in row_refs if str(r).strip()
+                            ],
                         }
                     )
                 if normalized:
@@ -565,7 +577,14 @@ def _run_experiment_loop(
         table_rows = self._extract_table_rows(experiment_table)
 
         experiment_spec = idea["Experiment"]
-        _, _, _, model_text, dataset_text, metric_text = self._format_experiment_for_prompt(experiment_spec)
+        (
+            _,
+            _,
+            _,
+            model_text,
+            dataset_text,
+            metric_text,
+        ) = self._format_experiment_for_prompt(experiment_spec)
 
         # Phase 1: Plan — generate implementation checklist
         before_total, before_tasks = self.cost_tracker.snapshot()
@@ -604,7 +623,10 @@ def _run_experiment_loop(
         total_steps = len(checklist)
         for step in checklist:
             before_total, before_tasks = self.cost_tracker.snapshot()
-            before_global_total, before_global_tasks = self.cost_tracker.global_snapshot()
+            (
+                before_global_total,
+                before_global_tasks,
+            ) = self.cost_tracker.global_snapshot()
             print_stage_progress(
                 "Coder Step Progress",
                 step["step"],
@@ -680,7 +702,10 @@ def _run_experiment_loop(
         next_prompt = ""
         while current_iter < self.max_iters:
             before_total, before_tasks = self.cost_tracker.snapshot()
-            before_global_total, before_global_tasks = self.cost_tracker.global_snapshot()
+            (
+                before_global_total,
+                before_global_tasks,
+            ) = self.cost_tracker.global_snapshot()
             if next_prompt:
                 self._generate_experiment(next_prompt)
 
@@ -694,7 +719,10 @@ def _run_experiment_loop(
             if return_code == 0:
                 self._print_run_summary(success=True)
                 after_total, after_tasks = self.cost_tracker.snapshot()
-                after_global_total, after_global_tasks = self.cost_tracker.global_snapshot()
+                (
+                    after_global_total,
+                    after_global_tasks,
+                ) = self.cost_tracker.global_snapshot()
                 print_cost_delta_summary(
                     "Coder Cost: run",
                     before_total,
@@ -759,7 +787,9 @@ def _generate_experiment(self, prompt: str) -> str:
         if self.agent_sdk == "claude":
             if self.claude_runners is None:
                 raise RuntimeError("Claude coder runner is not initialized.")
-            return self.claude_runners["coder"].run_sync(task_prompt, "generate_experiment")
+            return self.claude_runners["coder"].run_sync(
+                task_prompt, "generate_experiment"
+            )
 
         if self.agent is None:
             raise RuntimeError("Agent not initialized. Call setup_agent() first.")
@@ -858,7 +888,9 @@ def _build_blueprint_progress_rows(
         active_step: Optional[Dict[str, Any]],
     ) -> List[Dict[str, str]]:
         active_refs = (
-            set(self._resolve_row_refs(active_step, table_rows)) if active_step else set()
+            set(self._resolve_row_refs(active_step, table_rows))
+            if active_step
+            else set()
         )
         row_to_steps: Dict[str, List[Dict[str, Any]]] = {row: [] for row in table_rows}
         for item in checklist:
@@ -920,9 +952,7 @@ def _print_code_step_summary(
             },
         )
 
-    def _print_run_summary(
-        self, success: bool, error_message: str = ""
-    ) -> None:
+    def _print_run_summary(self, success: bool, error_message: str = "") -> None:
         results_path = osp.join(self.output_dir, "run", "final_info.json")
         keys = 0
         if osp.exists(results_path):
@@ -1160,13 +1190,19 @@ def _validate_run_results(
 
         if self.agent_sdk == "claude":
             if self.claude_runners is None:
-                raise RuntimeError("Claude validator runner is not initialized for coder.")
-            text = self.claude_runners["validator"].run_sync(prompt, "validate_experiment_run")
+                raise RuntimeError(
+                    "Claude validator runner is not initialized for coder."
+                )
+            text = self.claude_runners["validator"].run_sync(
+                prompt, "validate_experiment_run"
+            )
         else:
             if self.validation_agent is None:
                 raise RuntimeError("Validation agent is not initialized for coder.")
             result = Runner.run_sync(self.validation_agent, prompt)
-            track_sdk_cost(result, self.cost_tracker, self.model, "validate_experiment_run")
+            track_sdk_cost(
+                result, self.cost_tracker, self.model, "validate_experiment_run"
+            )
             text = result.final_output or ""
         parsed: Any = extract_json_between_markers(text)
         if not isinstance(parsed, dict):
@@ -1212,7 +1248,9 @@ def _workspace_python_files(self) -> List[str]:
         entries: List[str] = []
         for root, dirnames, filenames in os.walk(self.output_dir):
             dirnames[:] = [
-                d for d in dirnames if d not in {"run", "__pycache__", ".git", ".mypy_cache"}
+                d
+                for d in dirnames
+                if d not in {"run", "__pycache__", ".git", ".mypy_cache"}
             ]
             for filename in filenames:
                 if not filename.endswith(".py"):
diff --git a/tiny_scientist/data.py b/tiny_scientist/data.py
index 7e4fcb5b..1ab3551f 100644
--- a/tiny_scientist/data.py
+++ b/tiny_scientist/data.py
@@ -47,6 +47,9 @@ class ThinkerPrompt(BaseModel):
     idea_system_prompt: str
     evaluation_system_prompt: str
     idea_evaluation_prompt: str
+    idea_partial_evaluation_prompt: str
+    dimension_suggestion_prompt: str
+    single_dimension_evaluation_prompt: str
     modify_idea_prompt: str
     merge_ideas_prompt: str
     query_prompt: str
diff --git a/tiny_scientist/prompts/thinker_prompt.yaml b/tiny_scientist/prompts/thinker_prompt.yaml
index f0461b4d..2f64c025 100644
--- a/tiny_scientist/prompts/thinker_prompt.yaml
+++ b/tiny_scientist/prompts/thinker_prompt.yaml
@@ -7,8 +7,104 @@ idea_system_prompt: >
   Be critical and realistic in your assessments.
 evaluation_system_prompt: >
   You are an expert research reviewer who evaluates scientific ideas with rigor and fairness.
-  Your role is to comparatively evaluate multiple research ideas and score them based on their feasibility, novelty, impact, and alignment with the original research intent.
+  Your role is to comparatively evaluate multiple research ideas and score them strictly based on the provided dimension pairs and the original research intent.
   Be thoughtful, objective, and provide clear justifications for your scoring.
+dimension_suggestion_prompt: |
+  Based on the following research intent, suggest 5 pairs of contrasting evaluation dimensions that would be most relevant for comparing research ideas.
+
+  RESEARCH INTENT:
+  ```
+  {intent}
+  ```
+
+  Each dimension pair should represent TWO OPPOSING ENDS OF THE SAME SPECTRUM. These are trade-offs, not independent dimensions.
+
+  EXAMPLES OF DIMENSION PAIRS:
+  - (HCI-oriented, AI-oriented): Interaction design vs. algorithmic innovation
+  - (High Risk High Reward, Low Risk Incremental): Bold bets vs. safe iterations
+  - (Theoretical Depth, Practical Application): Theory vs. real-world utility
+  - (Computational Efficiency, Model Accuracy): Fast/lightweight vs. accurate/resource-intensive
+
+  REQUIREMENTS:
+  1. Each pair must be a single spectrum with two opposing ends (not two independent axes).
+  2. The pairs must be relevant to the intent and represent meaningful trade-offs.
+  3. Provide short, concrete descriptions for both ends.
+
+  Respond in the following format:
+
+  THOUGHT:
+  <THOUGHT>
+
+  DIMENSION PAIRS JSON:
+  ```json
+  <JSON>
+  ```
+
+  In <THOUGHT>, justify why these spectrums are the right trade-offs for this intent (2-4 sentences).
+
+  In <JSON>, provide exactly 5 dimension pairs with the following structure:
+  {{
+    "dimension_pairs": [
+      {{
+        "dimensionA": "First end of the spectrum (e.g., HCI-oriented)",
+        "dimensionB": "Opposite end of the spectrum (e.g., AI-oriented)",
+        "descriptionA": "Brief description of what dimensionA means",
+        "descriptionB": "Brief description of what dimensionB means"
+      }}
+    ]
+  }}
+
+  CRITICAL: Each pair represents ONE spectrum (later scored on a -50..+50 scale: -50 = dimensionA, +50 = dimensionB, 0 = balanced).
+
+single_dimension_evaluation_prompt: |
+  You are tasked with evaluating research ideas on a SINGLE dimension.
+
+  RESEARCH INTENT:
+  ```
+  {intent}
+  ```
+
+  IDEAS TO EVALUATE:
+  ```
+  {ideas}
+  ```
+
+  DIMENSION CRITERIA:
+  **{dimension_a} vs {dimension_b}**
+  - **{dimension_a} (Score: -50)**: {description_a}
+  - **{dimension_b} (Score: +50)**: {description_b}
+
+  This is a SPECTRUM where -50 means completely aligned with {dimension_a}, +50 means completely aligned with {dimension_b}, and 0 means balanced between both.
+
+  OUTPUT REQUIREMENTS:
+  - For each idea, provide a score (-50 to +50) and brief reasoning
+  - Preserve exact titles from the input
+  - Be consistent in your scoring scale
+  - Consider how each idea positions itself on this specific dimension spectrum
+  - JSON numeric values must be strict: use 30 not +30; only negative numbers use a leading "-"
+
+  Respond in the following format:
+
+  THOUGHT:
+  <THOUGHT>
+
+  EVALUATION JSON:
+  ```json
+  {{
+    "scored_ideas": [
+      {{
+        "Title": "exact idea title",
+        "Score": <number from -50 to +50>,
+        "Reason": "brief explanation of why this score (1-2 sentences)"
+      }}
+    ]
+  }}
+  ```
+
+  In <THOUGHT>, briefly describe how you interpret this spectrum and ensure consistent scoring (1-2 sentences).
+
+  IMPORTANT: The JSON inside the ```json block must be the evaluation object itself (do NOT wrap it inside another object with keys like "THOUGHT").
+
 idea_evaluation_prompt: |
   You are tasked with evaluating and scoring multiple research ideas generated for the following research intent:
 
@@ -21,31 +117,36 @@ idea_evaluation_prompt: |
   ```
   {ideas}
   ```
-  Please evaluate these ideas comparatively across three key dimensions:
+  {modify_context}
+  Please evaluate these ideas comparatively across THREE custom dimension pairs chosen specifically for this research context.
 
-  **NOVELTY DIMENSION**
-  {novelty_criteria}
+  Some ideas include a field "problem_highlights": a short list of key phrases copied verbatim from the Problem. Treat these as critical anchors: factor them into scoring where relevant and explicitly reference them in your reasoning when they influence the score.
 
-  **FEASIBILITY DIMENSION**
-  {feasibility_criteria}
+  **DIMENSION PAIR 1: {dimension_pair_1_name}**
+  - **{dimension_1_a} (Score: -50)**: {dimension_1_a_desc}
+  - **{dimension_1_b} (Score: +50)**: {dimension_1_b_desc}
 
-  **IMPACT DIMENSION**
-  {impact_criteria}
+  **DIMENSION PAIR 2: {dimension_pair_2_name}**
+  - **{dimension_2_a} (Score: -50)**: {dimension_2_a_desc}
+  - **{dimension_2_b} (Score: +50)**: {dimension_2_b_desc}
 
-  CRITICAL REQUIREMENTS:
-  1. For EACH idea, you MUST provide three separate rating fields that MUST follow this format:
-    - "FeasibilityScore": A number from 0 to 100, where 100 is most feasible
-    - "NoveltyScore": A number from 0 to 100, where 100 is most novel
-    - "ImpactScore": A number from 0 to 100, where 100 is highest impact
+  **DIMENSION PAIR 3: {dimension_pair_3_name}**
+  - **{dimension_3_a} (Score: -50)**: {dimension_3_a_desc}
+  - **{dimension_3_b} (Score: +50)**: {dimension_3_b_desc}
 
-  2. For EACH idea, also provide a brief reasoning for each score:
-    - "NoveltyReason": Brief explanation (1-2 sentences) of why this idea received its novelty score
-    - "FeasibilityReason": Brief explanation (1-2 sentences) of why this idea received its feasibility score
-    - "ImpactReason": Brief explanation (1-2 sentences) of why this idea received its impact score
-  These three scores must be completely separate and independent from each other. For example, the idea with the highest impact score might have a low feasibility score.
+  SCORING SCALE (all three pairs): -50 = fully aligned with the first endpoint (A), +50 = fully aligned with the second endpoint (B), 0 = balanced.
+
+  CRITICAL REQUIREMENTS:
+  1. For EACH idea, output ALL fields: "Title", "Dimension1Score", "Dimension2Score", "Dimension3Score", "Dimension1Reason", "Dimension2Reason", "Dimension3Reason".
+  2. Scores are integers in -50..+50 (-50 = {dimension_1_a}/{dimension_2_a}/{dimension_3_a}, +50 = {dimension_1_b}/{dimension_2_b}/{dimension_3_b}, 0 = balanced).
+  3. Ensure meaningful differentiation between ideas (avoid identical score triplets).
+  4. JSON numeric values must be strict: use 30 not +30; only negative numbers use a leading "-".
 
   Respond in the following format:
 
+  THOUGHT:
+  <THOUGHT>
+
   COMPARATIVE ANALYSIS:
   <ANALYSIS>
 
@@ -54,28 +155,108 @@ idea_evaluation_prompt: |
   <JSON>
   ```
 
-  In <ANALYSIS>, provide a thoughtful comparative analysis discussing the trade-offs between ideas.
+  In <THOUGHT>, briefly state your comparative evaluation strategy (1-2 sentences).
+  In <ANALYSIS>, provide a brief comparative summary highlighting the key differences across the three spectrums (3-6 sentences).
   In <JSON>, provide the evaluation results in JSON format with the following structure:
   "scored_ideas": A list of scored idea objects, each containing:
   - "Title": The EXACT original title of the idea as provided in the input JSON - DO NOT MODIFY OR CHANGE THE TITLE IN ANY WAY
-  - "FeasibilityScore": A number from 0 to 100, scoring feasibility
-  - "NoveltyScore": A number from 0 to 100, scoring novelty
-  - "ImpactScore": A number from 0 to 100, scoring impact
-  - "NoveltyReason": Explanation of the novelty score
-  - "FeasibilityReason": Explanation of the feasibility score
-  - "ImpactReason": Explanation of the impact score
+  - "Dimension1Score": A number from -50 to +50
+  - "Dimension2Score": A number from -50 to +50
+  - "Dimension3Score": A number from -50 to +50
+  - "Dimension1Reason": A brief explanation (1-2 sentences) - REQUIRED
+  - "Dimension2Reason": A brief explanation (1-2 sentences) - REQUIRED
+  - "Dimension3Reason": A brief explanation (1-2 sentences) - REQUIRED
+
+  IMPORTANT: The reasoning fields are MANDATORY and must be included for every idea. Do not omit these fields.
+
+  NOTE FOR ROBUSTNESS: If you are unable to provide a concise reason for a given dimension for any idea, you MUST still include the corresponding "Dimension1Reason" / "Dimension2Reason" / "Dimension3Reason" fields in the JSON and set their value to an empty string (""). Do not omit the keys. This helps downstream parsers reliably find the fields.
 
   CRITICAL: You MUST preserve the exact original titles from the input. Do not change, modify, or improve the titles in any way.
   Ensure your evaluation is fair, comprehensive, and based solely on the scientific and practical merits of each idea.
+
+idea_partial_evaluation_prompt: |
+  You are tasked with assigning scores ONLY to the newly added research ideas while being given the full previously scored idea list for calibration.
+
+  RESEARCH INTENT:
+  ```
+  {intent}
+  ```
+
+  FULL IDEA SET (context + new):
+  ```
+  {ideas}
+  ```
+  {modify_context}
+  Some ideas include a field "problem_highlights": a short list of key phrases copied verbatim from the Problem. Treat these as critical anchors: factor them into scoring where relevant and explicitly reference them in your reasoning when they influence the score.
+
+  PARTIAL SCORING PROTOCOL:
+  - Some ideas include "AlreadyScored": true along with existing *Score and *Reason fields; these are CONTEXT ONLY and must NOT be rescored or output again.
+  - Only ideas without "AlreadyScored" true (either missing the field or explicitly false) are NEW TARGETS requiring fresh scores.
+  - Calibrate new scores relative to existing contextual scores so the global scale remains consistent (avoid inflating or compressing scale unnecessarily).
+  - Do NOT repeat or copy existing contextual ideas in the output.
+  - If all ideas are new (no AlreadyScored true), then score them all (treat as first evaluation batch).
+
+  DIMENSION CRITERIA:
+  **DIMENSION PAIR 1: {dimension_pair_1_name}**
+  - **{dimension_1_a} (Score: -50)**: {dimension_1_a_desc}
+  - **{dimension_1_b} (Score: +50)**: {dimension_1_b_desc}
+
+  **DIMENSION PAIR 2: {dimension_pair_2_name}**
+  - **{dimension_2_a} (Score: -50)**: {dimension_2_a_desc}
+  - **{dimension_2_b} (Score: +50)**: {dimension_2_b_desc}
+
+  **DIMENSION PAIR 3: {dimension_pair_3_name}**
+  - **{dimension_3_a} (Score: -50)**: {dimension_3_a_desc}
+  - **{dimension_3_b} (Score: +50)**: {dimension_3_b_desc}
+
+  OUTPUT REQUIREMENTS:
+  1. Provide distinct, fine‑grained scores (-50 to +50) for each new idea: "Dimension1Score", "Dimension2Score", "Dimension3Score".
+  2. Provide brief reasoning for each score: "Dimension1Reason", "Dimension2Reason", "Dimension3Reason".
+  NOTE FOR ROBUSTNESS: If you cannot provide a reason for a given score, include the corresponding reason field and set it to an empty string ("") rather than omitting the key.
+  3. DO NOT include any context (AlreadyScored true) ideas in the output JSON.
+  4. Preserve exact titles.
+  5. JSON numeric values must be strict: use 30 not +30; only negative numbers use a leading "-".
+
+  Respond in the following format:
+
+  THOUGHT:
+  <THOUGHT>
+
+  CALIBRATION ANALYSIS:
+  <ANALYSIS>
+
+  EVALUATION JSON:
+  ```json
+  <JSON>
+  ```
+  In <THOUGHT>, briefly describe how you will calibrate scores against the context ideas (1-2 sentences).
+  In <ANALYSIS>, provide a concise calibration explanation describing how the contextual (AlreadyScored) ideas and their existing scores informed the scale you used for the NEW ideas.
+
+  In <JSON>, provide ONLY the newly scored idea objects in JSON format. Use the following structure:
+  "scored_ideas": A list of newly scored idea objects, each containing:
+  - "Title": The EXACT original title of the new idea (preserve exact text)
+  - "Dimension1Score": A number from -50 to +50
+  - "Dimension2Score": A number from -50 to +50
+  - "Dimension3Score": A number from -50 to +50
+  - "Dimension1Reason": A brief explanation (1-2 sentences) of the score - REQUIRED
+  - "Dimension2Reason": A brief explanation (1-2 sentences) of the score - REQUIRED
+  - "Dimension3Reason": A brief explanation (1-2 sentences) of the score - REQUIRED
+
+  IMPORTANT: The reasoning fields (Dimension1Reason, Dimension2Reason, Dimension3Reason) are MANDATORY and must be included for every idea. Do not omit these fields.
+
+  CRITICAL:
+  - Do NOT include any context ideas (those with "AlreadyScored": true) inside "scored_ideas".
+  - Do NOT invent or modify titles.
+  - Maintain meaningful differentiation between the numeric scores.
 modify_idea_prompt: |
-  Given a research idea and a set of requested modifications, generate a modified version of the idea.
+  Given a research idea and score adjustments based on user evaluation, generate a modified version of the idea that aligns with the specified target scores.
 
   ORIGINAL RESEARCH IDEA:
   ```
   {idea}
   ```
 
-  REQUESTED MODIFICATIONS:
+  SCORE ADJUSTMENTS:
   ```
   {modifications}
   ```
@@ -84,15 +265,30 @@ modify_idea_prompt: |
   ```
   {intent}
   ```
-  Carefully consider how to preserve the core strengths of the original idea while enhancing it according to the requested modifications. Ensure the modified idea maintains strong alignment with the original research intent.
 
-  For each modification request, adjust the corresponding aspect (Novelty, Feasibility, or Impact) by emphasizing or de-emphasizing relevant characteristics.
+  EVALUATION CRITERIA:
+  **DIMENSION PAIR 1: {dimension_pair_1_name}**
+  - **{dimension_1_a} (Score: -50)**: {dimension_1_a_desc}
+  - **{dimension_1_b} (Score: +50)**: {dimension_1_b_desc}
+
+  **DIMENSION PAIR 2: {dimension_pair_2_name}**
+  - **{dimension_2_a} (Score: -50)**: {dimension_2_a_desc}
+  - **{dimension_2_b} (Score: +50)**: {dimension_2_b_desc}
+
+  **DIMENSION PAIR 3: {dimension_pair_3_name}**
+  - **{dimension_3_a} (Score: -50)**: {dimension_3_a_desc}
+  - **{dimension_3_b} (Score: +50)**: {dimension_3_b_desc}
+
+  IMPORTANT: Use the score adjustments as concrete targets. For example, if a dimension moves from -30 to -5, the idea should shift slightly toward the opposite end but remain broadly similar; if it moves from -45 to +40, expect a major redesign.
+
+  Guidelines for modification:
+  1. Preserve the core contribution unless the target shifts are extreme (|score| >= 40 or a sign flip with large magnitude).
+  2. Change the parts that justify the new positions (methodology, supervision signal, constraints, evaluation, resources).
+  3. Keep it aligned with the original intent and keep changes concrete (not cosmetic).
 
   **CRITICAL**: When modifying the idea:
   - Keep the "Approach" field focused on the CORE NOVEL ALGORITHM (not basic preprocessing)
   - The "Approach" should describe YOUR algorithmic innovation with mathematical/technical detail
-  - If increasing Novelty, add more distinctive technical innovations to the CORE ALGORITHM
-  - If increasing Feasibility, provide implementation details for the NOVEL component specifically
   - Maintain detailed comparison with existing work in "NoveltyComparison"
   - AVOID filling "Approach" with standard data processing, tokenization, or routine training procedures
   - AVOID ethical considerations, societal impact, or bias discussions in "Approach" - focus ONLY on the technical algorithm
@@ -107,8 +303,35 @@ modify_idea_prompt: |
   <JSON>
   ```
 
-  In <THOUGHT>, explain your reasoning for the modifications and how they enhance the idea.
-  In <JSON>, provide the modified idea with the same structure as the original, including all original fields.
+  In <THOUGHT>, explain how you interpreted the score adjustments and what specific changes you made to achieve the target scores.
+
+  In <JSON>, provide the modified idea preserving ALL original fields:
+
+  **REQUIRED FIELDS** (must be present in output):
+  - "Name": Lowercase identifier with underscores
+  - "Title": Full title for the idea
+  - "Description": Brief 1-2 sentence summary
+  - "Problem": The research question being addressed
+  - "Importance": Why this problem matters
+  - "Difficulty": Technical challenges
+  - "NoveltyComparison": Detailed comparison with existing work (≥150 words)
+  - "Approach": Core algorithm/mechanism (CRITICAL - focus on novel component)
+  - "is_experimental": Boolean (true/false)
+  - "Interestingness": Score 1-10
+  - "Feasibility": Score 1-10
+  - "Novelty": Score 1-10
+  - "IntentAlignment": Score 1-10
+  - "Score": Overall score 1-10
+
+  **PRESERVE IF PRESENT** (copy from original if exists):
+  - "Experiment": Experimental plan (if already generated)
+  - "ResearchPlan": Alternative to Experiment
+  - Any evaluation scores: Dimension1Score, Dimension2Score, Dimension3Score, scores dict, etc.
+
+  **IMPORTANT**:
+  - If the original idea has an "Experiment" field, copy it exactly unless modifications specifically target the experimental design
+  - Preserve all fields even if not modified
+  - The "Approach" field is CRITICAL for downstream code generation
 
 merge_ideas_prompt: |
   You are tasked with merging two research ideas into a single, stronger idea that combines the best aspects of both.
@@ -144,13 +367,33 @@ merge_ideas_prompt: |
   ```
 
   In <THOUGHT>, explain your reasoning for how you combined elements from both ideas and why the merged result is stronger.
-  In <JSON>, provide the merged idea with the same structure as the original ideas, including all required fields:
-  - "Name": A shortened descriptor of the idea. Lowercase, no spaces, underscores allowed.
-  - "Title": A title for the idea, will be used for the report writing.
-  - "Problem": Answer to question 1.
-  - "Importance": Answer to question 2.
-  - "Difficulty": Answer to question 3.
-  - "NoveltyComparison": Answer to question 4.
+  In <JSON>, provide the merged idea with ALL required fields:
+
+  **REQUIRED FIELDS** (must be present in output):
+  - "Name": Lowercase identifier with underscores (create new merged name)
+  - "Title": New title combining aspects of both ideas
+  - "Description": Brief 1-2 sentence summary
+  - "Problem": Merged research question
+  - "Importance": Why the merged problem matters
+  - "Difficulty": Combined technical challenges
+  - "NoveltyComparison": Detailed comparison explaining how merged idea differs from existing work (≥150 words)
+  - "Approach": Core algorithm/mechanism combining both ideas (CRITICAL - describe the merged technical approach)
+  - "is_experimental": Boolean (true if either idea is experimental)
+  - "Interestingness": Score 1-10 (estimate for merged idea)
+  - "Feasibility": Score 1-10 (estimate for merged idea)
+  - "Novelty": Score 1-10 (estimate for merged idea)
+  - "IntentAlignment": Score 1-10 (estimate for merged idea)
+  - "Score": Overall score 1-10 (estimate for merged idea)
+
+  **PRESERVE IF PRESENT** (copy from most relevant source idea or merge intelligently):
+  - "Experiment": If one or both ideas have experimental plans, merge or choose the more comprehensive one
+  - "ResearchPlan": Alternative to Experiment
+
+  **IMPORTANT**:
+  - The "Approach" field is CRITICAL and must describe the merged technical approach
+  - If both ideas have "Experiment" fields, intelligently merge them or choose the more comprehensive one
+  - Create new Name/Title that reflects the merged nature
+  - Do not copy evaluation scores from either idea (Dimension1Score/Dimension2Score/Dimension3Score or scores dict) - the merged idea will be re-evaluated
 
 novelty_system_prompt: |
   You are an ambitious AI PhD student who is looking to publish a paper that will contribute significantly to the field.
diff --git a/tiny_scientist/safety_checker.py b/tiny_scientist/safety_checker.py
index d77d81c8..4ef6db98 100644
--- a/tiny_scientist/safety_checker.py
+++ b/tiny_scientist/safety_checker.py
@@ -45,7 +45,7 @@ def is_rejection_response(response: str) -> bool:
 
 class PromptAttackDetector:
     def __init__(
-        self, model: str = "gpt-4o", cost_tracker: Optional[BudgetChecker] = None
+        self, model: str = "gpt-5-mini", cost_tracker: Optional[BudgetChecker] = None
     ) -> None:
         self.client, self.model = create_client(model)
         self.cost_tracker = cost_tracker or BudgetChecker()
@@ -149,7 +149,7 @@ class SafetyChecker:
     """
 
     def __init__(
-        self, model: str = "gpt-4o", cost_tracker: Optional[BudgetChecker] = None
+        self, model: str = "gpt-5-mini", cost_tracker: Optional[BudgetChecker] = None
     ) -> None:
         self.model = model
         self.cost_tracker = cost_tracker or BudgetChecker()
diff --git a/tiny_scientist/scientist.py b/tiny_scientist/scientist.py
index acd5db15..909c9fdb 100644
--- a/tiny_scientist/scientist.py
+++ b/tiny_scientist/scientist.py
@@ -10,11 +10,7 @@
 from .reviewer import Reviewer
 from .safety_checker import SafetyChecker
 from .thinker import Thinker
-from .utils.agent_sdk import (
-    AgentSdk,
-    resolve_agent_sdk,
-    validate_agent_sdk_model_combo,
-)
+from .utils.agent_sdk import AgentSdk, resolve_agent_sdk, validate_agent_sdk_model_combo
 from .utils.input_formatter import InputFormatter
 from .utils.pricing import BUDGET_MODULE_KEYS as PRICING_BUDGET_MODULE_KEYS
 from .utils.pricing import (
diff --git a/tiny_scientist/thinker.py b/tiny_scientist/thinker.py
index 7731a9ef..54b78855 100644
--- a/tiny_scientist/thinker.py
+++ b/tiny_scientist/thinker.py
@@ -12,9 +12,7 @@
 from .configs import Config
 from .safety_checker import SafetyChecker
 from .tool_impls import PaperSearchTool
-from .tools.agent_tools import (
-    build_research_tools,
-)
+from .tools.agent_tools import build_research_tools
 from .utils.agent_sdk import is_claude_agent_sdk, resolve_agent_sdk
 from .utils.error_handler import api_calling_error_exponential_backoff
 from .utils.llm import (
@@ -22,6 +20,7 @@
     extract_json_between_markers,
     get_response_from_llm,
 )
+from .utils.openai_skills import build_openai_skill_shell_tool
 from .utils.pricing import estimate_prompt_cost, estimate_tokens_from_text
 from .utils.rich_output import (
     print_cost_delta_summary,
@@ -31,10 +30,9 @@
     print_todo_table,
     summarize_idea,
 )
-from .utils.openai_skills import build_openai_skill_shell_tool
+from .utils.sdk_client import configure_openai_agents_for_model, track_sdk_cost
 from .utils.sdk_mcp import claude_allowed_mcp_tools, ensure_mcp_config
 from .utils.skill_loader import skill_instructions
-from .utils.sdk_client import configure_openai_agents_for_model, track_sdk_cost
 
 
 class _ThinkerLegacy:
@@ -66,31 +64,12 @@ def __init__(
         self.intent = ""
         self._query_cache: Dict[str, List[Dict[str, Any]]] = {}
 
-        # Enhanced criteria system from TinyScientistUI
         self.default_system_prompt = """You are an ambitious AI PhD student who is looking to publish a paper that will contribute significantly to the field.
 You want to generate creative and impactful research ideas that can be feasibly investigated with the code provided.
 Be critical and realistic in your assessments."""
 
-        self.default_novelty_criteria = (
-            "How original is the idea compared to existing work?"
-        )
-        self.default_feasibility_criteria = (
-            "How practical is implementation within reasonable resource constraints?"
-        )
-        self.default_impact_criteria = "What is the potential impact of this research on the field and broader applications?"
-
         # Initialize with defaults
         self.system_prompt = self.default_system_prompt
-        self.novelty_criteria = self.default_novelty_criteria
-        self.feasibility_criteria = self.default_feasibility_criteria
-        self.impact_criteria = self.default_impact_criteria
-
-        # Legacy criteria descriptions for backward compatibility
-        self.default_criteria_descriptions = """1. Intent Alignment: How well does each idea address the original research intent?
-        2. Scientific Merit: How significant is the potential contribution to the field?
-        3. Novelty: How original is the idea compared to existing work?
-        4. Feasibility: How practical is implementation within reasonable resource constraints?
-        5. Impact: What is the potential impact of this research on the field and broader applications?"""
         self.cost_tracker = cost_tracker or BudgetChecker()
         self.pre_reflection_threshold = pre_reflection_threshold
         self.post_reflection_threshold = post_reflection_threshold
@@ -104,6 +83,46 @@ def __init__(
         else:
             self.safety_checker = None
 
+    def suggest_dimensions(self, intent: str) -> List[Dict[str, Any]]:
+        """Suggest dimension pairs for evaluating research ideas."""
+        print(f"Suggesting dimension pairs for intent: {intent}")
+
+        try:
+            text, _ = get_response_from_llm(
+                self.prompts.dimension_suggestion_prompt.format(intent=intent),
+                client=self.client,
+                model=self.model,
+                system_message=self.prompts.idea_system_prompt,
+                msg_history=[],
+                temperature=self.temperature,
+                print_debug=False,
+            )
+        except Exception as e:
+            print(f"Error calling LLM for dimension suggestion: {str(e)}")
+            return []
+
+        result = extract_json_between_markers(text)
+
+        if not result:
+            print("Failed to extract dimension pairs from LLM response")
+            print(f"Raw LLM response: {text}")
+            return []
+
+        # Handle both dict with 'dimension_pairs' key and direct list
+        if isinstance(result, dict) and "dimension_pairs" in result:
+            dimension_pairs = result["dimension_pairs"]
+        elif isinstance(result, list):
+            dimension_pairs = result
+        else:
+            dimension_pairs = [result] if result else []
+
+        if not isinstance(dimension_pairs, list) or len(dimension_pairs) == 0:
+            print(f"Expected list of dimension pairs but got: {type(dimension_pairs)}")
+            return []
+
+        print(f"✅ Successfully generated {len(dimension_pairs)} dimension pairs")
+        return dimension_pairs
+
     def think(self, intent: str, pdf_content: Optional[str] = None) -> str:
         self.intent = intent
         # If intent is too long, show simplified message
@@ -256,56 +275,193 @@ def set_system_prompt(self, prompt: Optional[str]) -> None:
         else:
             self.system_prompt = prompt
 
-    def get_criteria(self, dimension: str) -> str:
-        """Get criteria for a specific dimension"""
-        criteria_map = {
-            "novelty": self.novelty_criteria,
-            "feasibility": self.feasibility_criteria,
-            "impact": self.impact_criteria,
-        }
-        return criteria_map.get(dimension, "")
-
-    def set_criteria(self, dimension: str, criteria: Optional[str] = None) -> None:
-        """Set criteria for a specific dimension. If no criteria is provided, reset to default"""
-        if dimension == "novelty":
-            self.novelty_criteria = (
-                criteria if criteria else self.default_novelty_criteria
-            )
-        elif dimension == "feasibility":
-            self.feasibility_criteria = (
-                criteria if criteria else self.default_feasibility_criteria
-            )
-        elif dimension == "impact":
-            self.impact_criteria = (
-                criteria if criteria else self.default_impact_criteria
-            )
-        else:
-            raise ValueError(f"Unknown dimension: {dimension}")
-
     def rank(
         self,
         ideas: List[Dict[str, Any]],
         intent: Optional[str] = None,
+        dimension_pairs: Optional[List[Dict[str, Any]]] = None,
+        user_score_corrections: Optional[List[Dict[str, Any]]] = None,
+        partial: bool = False,
+        modify_context: Optional[str] = None,
     ) -> List[Dict[str, Any]]:
-        """Rank multiple research ideas."""
+        """Rank (score) research ideas using custom dimension pairs.
+
+        When partial=True, only newly added / target ideas should be scored; context ideas
+        (with AlreadyScored true) are ignored in output.
+
+        dimension_pairs: List of (at least) 3 dimension pair dicts, each containing:
+            - dimensionA: str
+            - dimensionB: str
+            - descriptionA: str
+            - descriptionB: str
+        """
         intent = intent or self.intent
 
+        if (
+            not dimension_pairs
+            or not isinstance(dimension_pairs, list)
+            or len(dimension_pairs) < 3
+        ):
+            raise ValueError("dimension_pairs (length >= 3) is required")
+
+        assert dimension_pairs is not None
+        dimension_pairs_local = dimension_pairs
+
         ideas_json = json.dumps(ideas, indent=2)
-        evaluation_result = self._get_idea_evaluation(ideas_json, intent)
-        ranked_ideas = self._parse_evaluation_result(evaluation_result, ideas)
+        evaluation_result = self._get_idea_evaluation(
+            ideas_json,
+            intent,
+            dimension_pairs=dimension_pairs_local,
+            user_score_corrections=user_score_corrections,
+            partial=partial,
+            modify_context=modify_context,
+        )
+        ranked_ideas = self._parse_evaluation_result(
+            evaluation_result, ideas, dimension_pairs=dimension_pairs_local
+        )
 
         self.cost_tracker.report()
         return ranked_ideas
 
+    def rank_single_dimension(
+        self,
+        ideas: List[Dict[str, Any]],
+        intent: Optional[str] = None,
+        dimension_pair: Optional[Dict[str, Any]] = None,
+        dimension_index: int = 0,
+    ) -> List[Dict[str, Any]]:
+        """Evaluate ideas on a single dimension pair only.
+
+        Returns a list of {id, score, reason} for each idea.
+        """
+        if not dimension_pair:
+            return []
+
+        intent = intent or self.intent
+        ideas_json = json.dumps(ideas, indent=2)
+
+        dim_a = dimension_pair.get("dimensionA", "Dimension A")
+        dim_b = dimension_pair.get("dimensionB", "Dimension B")
+        desc_a = dimension_pair.get("descriptionA", "")
+        desc_b = dimension_pair.get("descriptionB", "")
+
+        if hasattr(self.prompts, "single_dimension_evaluation_prompt"):
+            prompt = self.prompts.single_dimension_evaluation_prompt.format(
+                intent=intent,
+                ideas=ideas_json,
+                dimension_a=dim_a,
+                dimension_b=dim_b,
+                description_a=desc_a if desc_a else f"Aligned with {dim_a}",
+                description_b=desc_b if desc_b else f"Aligned with {dim_b}",
+            )
+        else:
+            prompt = f"""You are tasked with evaluating research ideas on a SINGLE dimension.
+
+RESEARCH INTENT:
+```
+{intent}
+```
+
+IDEAS TO EVALUATE:
+```
+{ideas_json}
+```
+
+DIMENSION CRITERIA:
+**{dim_a} vs {dim_b}**
+- **{dim_a} (Score: -50)**: {desc_a if desc_a else f'Aligned with {dim_a}'}
+- **{dim_b} (Score: +50)**: {desc_b if desc_b else f'Aligned with {dim_b}'}
+
+This is a SPECTRUM where -50 means completely aligned with {dim_a}, +50 means completely aligned with {dim_b}, and 0 means balanced between both.
+
+OUTPUT REQUIREMENTS:
+- For each idea, provide a score (-50 to +50) and brief reasoning
+- Preserve exact titles
+- Be consistent in your scoring scale
+
+Respond in JSON format:
+```json
+{{
+  "scored_ideas": [
+    {{
+      "Title": "exact idea title",
+      "Score": <number from -50 to +50>,
+      "Reason": "brief explanation"
+    }}
+  ]
+}}
+```"""
+
+        text, _ = get_response_from_llm(
+            prompt,
+            client=self.client,
+            model=self.model,
+            system_message=self.prompts.evaluation_system_prompt,
+            msg_history=[],
+            temperature=0.3,
+        )
+
+        return self._parse_single_dimension_result(text, ideas)
+
+    def _parse_single_dimension_result(
+        self, evaluation_text: str, original_ideas: List[Dict[str, Any]]
+    ) -> List[Dict[str, Any]]:
+        """Parse single dimension evaluation result."""
+        try:
+            evaluation_data = extract_json_between_markers(evaluation_text)
+            if not evaluation_data:
+                print("[WARN] No JSON found in single dimension evaluation response")
+                return []
+
+            scored_items = evaluation_data.get("scored_ideas", [])
+            idea_map = {idea.get("Title", "").strip(): idea for idea in original_ideas}
+
+            results = []
+            for scored_item in scored_items:
+                title = scored_item.get("Title", "").strip()
+                idea = idea_map.get(title)
+                if not idea:
+                    continue
+
+                raw_score = scored_item.get("Score", 0)
+                try:
+                    score = int(round(float(raw_score)))
+                    if score < -50:
+                        score = -50
+                    elif score > 50:
+                        score = 50
+                except (ValueError, TypeError):
+                    score = 0
+
+                results.append(
+                    {
+                        "id": idea.get("id"),
+                        "score": score,
+                        "reason": scored_item.get("Reason", ""),
+                    }
+                )
+
+            return results
+        except Exception as e:
+            print(f"[ERROR] Failed to parse single dimension result: {e}")
+            return []
+
     @api_calling_error_exponential_backoff(retries=5, base_wait_time=2)
     def modify_idea(
         self,
         original_idea: Dict[str, Any],
         modifications: List[Dict[str, Any]],
         behind_idea: Optional[Dict[str, Any]] = None,
+        dimension_pairs: Optional[List[Dict[str, Any]]] = None,
     ) -> Dict[str, Any]:
         """
         Modify an idea based on score adjustments.
+
+        Args:
+            original_idea: The idea to modify
+            modifications: List of modification instructions
+            behind_idea: Optional reference idea
+            dimension_pairs: Optional list of dimension pairs for dynamic evaluation
         """
         # Extract required information from modifications
         instruction_lines = []
@@ -314,26 +470,57 @@ def modify_idea(
         )
 
         for mod in modifications:
-            metric_name = {
-                "noveltyScore": "Novelty",
-                "feasibilityScore": "Feasibility",
-                "impactScore": "Impact",
-            }.get(mod["metric"])
+            if not isinstance(mod, dict):
+                continue
+            if "previousScore" not in mod or "newScore" not in mod:
+                continue
+
+            metric_name = mod.get("metric")
+            if not metric_name:
+                continue
 
-            direction = mod["direction"]
             instruction_lines.append(
                 {
                     "metric": metric_name,
-                    "direction": direction,
+                    "previousScore": mod["previousScore"],
+                    "newScore": mod["newScore"],
+                    "change": mod.get("change", 0),
                     "reference": behind_content,
                 }
             )
 
         # Prepare the prompt using the template from YAML
+        # Format varies based on whether dimension_pairs are provided
+        if (
+            not dimension_pairs
+            or not isinstance(dimension_pairs, list)
+            or len(dimension_pairs) < 3
+        ):
+            raise ValueError("dimension_pairs (length >= 3) is required")
+
+        pair1 = dimension_pairs[0]
+        pair2 = dimension_pairs[1]
+        pair3 = dimension_pairs[2]
+
         prompt = self.prompts.modify_idea_prompt.format(
             idea=json.dumps(original_idea),
             modifications=json.dumps(instruction_lines),
             intent=self.intent,
+            dimension_pair_1_name=f"{pair1.get('dimensionA', '')} - {pair1.get('dimensionB', '')}",
+            dimension_1_a=pair1.get("dimensionA", "Dimension 1A"),
+            dimension_1_b=pair1.get("dimensionB", "Dimension 1B"),
+            dimension_1_a_desc=pair1.get("descriptionA", ""),
+            dimension_1_b_desc=pair1.get("descriptionB", ""),
+            dimension_pair_2_name=f"{pair2.get('dimensionA', '')} - {pair2.get('dimensionB', '')}",
+            dimension_2_a=pair2.get("dimensionA", "Dimension 2A"),
+            dimension_2_b=pair2.get("dimensionB", "Dimension 2B"),
+            dimension_2_a_desc=pair2.get("descriptionA", ""),
+            dimension_2_b_desc=pair2.get("descriptionB", ""),
+            dimension_pair_3_name=f"{pair3.get('dimensionA', '')} - {pair3.get('dimensionB', '')}",
+            dimension_3_a=pair3.get("dimensionA", "Dimension 3A"),
+            dimension_3_b=pair3.get("dimensionB", "Dimension 3B"),
+            dimension_3_a_desc=pair3.get("descriptionA", ""),
+            dimension_3_b_desc=pair3.get("descriptionB", ""),
         )
 
         text, _ = get_response_from_llm(
@@ -419,22 +606,21 @@ def generate_experiment_plan(self, idea: str) -> str:
             task_name="generate_experiment_plan",
         )
 
-        # Extract both the original JSON and the new Markdown table
+        # Extract experiment plan JSON and optional markdown table
         experiment_plan_json = extract_json_between_markers(text)
         try:
             experiment_plan_table = text.split("```markdown")[1].split("```")[0].strip()
         except IndexError:
             experiment_plan_table = None
 
-        if not experiment_plan_json or not experiment_plan_table:
-            print("Failed to generate one or both parts of the experimental plan.")
-            # Return the original idea if generation fails
+        if not experiment_plan_json:
+            print("Failed to generate experiment plan JSON. Returning original idea.")
             return idea
 
-        # Store the JSON in 'Experiment' and the table in 'ExperimentTable'
         idea_dict["Experiment"] = experiment_plan_json
-        idea_dict["ExperimentTable"] = experiment_plan_table
-        print("Dual-format experimental plan generated successfully.")
+        if experiment_plan_table:
+            idea_dict["ExperimentTable"] = experiment_plan_table
+        print("Experimental plan generated successfully.")
 
         self.cost_tracker.report()
         return json.dumps(idea_dict, indent=2)
@@ -569,18 +755,73 @@ def _estimate_reflection_cost(self, idea_json: str) -> Optional[float]:
         )
 
     def _get_idea_evaluation(
-        self, ideas_json: str, intent: str, custom_criteria: Optional[str] = None
+        self,
+        ideas_json: str,
+        intent: str,
+        dimension_pairs: Optional[List[Dict[str, Any]]] = None,
+        user_score_corrections: Optional[List[Dict[str, Any]]] = None,
+        partial: bool = False,
+        modify_context: Optional[str] = None,
     ) -> str:
-        """Get comparative evaluation from LLM"""
-        prompt = self.prompts.idea_evaluation_prompt.format(
+        corrections_context = ""
+        if user_score_corrections and len(user_score_corrections) > 0:
+            corrections_context = "\n\nUSER SCORE CORRECTIONS (In-context learning):\n"
+            corrections_context += (
+                "The user has previously corrected the following evaluations:\n"
+            )
+            for correction in user_score_corrections[-10:]:
+                corrections_context += f"- Idea '{correction['ideaTitle']}': {correction['metric']} score corrected from {correction['previousScore']} to {correction['newScore']} (change: {correction['change']:+d})\n"
+            corrections_context += "\nPlease consider these corrections as learning context for your current evaluation.\n"
+
+        if partial and hasattr(self.prompts, "idea_partial_evaluation_prompt"):
+            base_template = self.prompts.idea_partial_evaluation_prompt
+        else:
+            base_template = self.prompts.idea_evaluation_prompt
+
+        modify_context_text = ""
+        if modify_context:
+            modify_context_text = f"\n\nMODIFICATION CONTEXT:\n{modify_context}\nPlease consider this modification context when evaluating the ideas, particularly if any ideas are result of user-guided modifications.\n"
+
+        if (
+            not dimension_pairs
+            or not isinstance(dimension_pairs, list)
+            or len(dimension_pairs) < 3
+        ):
+            raise ValueError("dimension_pairs (length >= 3) is required")
+
+        assert dimension_pairs is not None
+        dimension_pairs_local = dimension_pairs
+        pair1 = dimension_pairs_local[0]
+        pair2 = dimension_pairs_local[1]
+        pair3 = dimension_pairs_local[2]
+
+        prompt_kwargs = dict(
             intent=intent,
             ideas=ideas_json,
-            novelty_criteria=self.novelty_criteria,
-            feasibility_criteria=self.feasibility_criteria,
-            impact_criteria=self.impact_criteria,
+            dimension_pair_1_name=f"{pair1.get('dimensionA', '')} - {pair1.get('dimensionB', '')}",
+            dimension_1_a=pair1.get("dimensionA", "Dimension 1A"),
+            dimension_1_b=pair1.get("dimensionB", "Dimension 1B"),
+            dimension_1_a_desc=pair1.get("descriptionA", ""),
+            dimension_1_b_desc=pair1.get("descriptionB", ""),
+            dimension_pair_2_name=f"{pair2.get('dimensionA', '')} - {pair2.get('dimensionB', '')}",
+            dimension_2_a=pair2.get("dimensionA", "Dimension 2A"),
+            dimension_2_b=pair2.get("dimensionB", "Dimension 2B"),
+            dimension_2_a_desc=pair2.get("descriptionA", ""),
+            dimension_2_b_desc=pair2.get("descriptionB", ""),
+            dimension_pair_3_name=f"{pair3.get('dimensionA', '')} - {pair3.get('dimensionB', '')}",
+            dimension_3_a=pair3.get("dimensionA", "Dimension 3A"),
+            dimension_3_b=pair3.get("dimensionB", "Dimension 3B"),
+            dimension_3_a_desc=pair3.get("descriptionA", ""),
+            dimension_3_b_desc=pair3.get("descriptionB", ""),
+            modify_context=modify_context_text,
         )
-        if custom_criteria:
-            prompt = prompt.replace(self.default_criteria_descriptions, custom_criteria)
+        prompt = base_template.format(**prompt_kwargs)
+
+        if corrections_context:
+            print(
+                "*****************Adding user score corrections context to evaluation prompt**************"
+            )
+            prompt = prompt + corrections_context
 
         text, _ = get_response_from_llm(
             prompt,
@@ -597,41 +838,104 @@ def _get_idea_evaluation(
         return text
 
     def _parse_evaluation_result(
-        self, evaluation_text: str, original_ideas: List[Dict[str, Any]]
+        self,
+        evaluation_text: str,
+        original_ideas: List[Dict[str, Any]],
+        dimension_pairs: Optional[List[Dict[str, Any]]] = None,
     ) -> List[Dict[str, Any]]:
-        """Parse evaluation result and update idea dictionaries with scores"""
-        # Extract JSON from response
         evaluation_data = extract_json_between_markers(evaluation_text)
 
         if not evaluation_data:
             print("Failed to extract JSON from evaluation response")
             return []
-        # Create mapping from idea title to original idea dict (check both Title and title)
+
+        def _get_field(scored_item: Dict[str, Any], variants: List[str]) -> Any:
+            for key in variants:
+                if key in scored_item and scored_item[key] is not None:
+                    return scored_item[key]
+            return None
+
+        def _score_variants(prefix: str) -> List[str]:
+            camel = prefix[0].lower() + prefix[1:]
+            snake = "".join(
+                ["_" + c.lower() if c.isupper() else c for c in prefix]
+            ).lstrip("_")
+            compact = snake.replace("_", "")
+            return [
+                prefix,
+                camel,
+                prefix.lower(),
+                snake,
+                compact,
+            ]
+
         idea_map = {}
         for idea in original_ideas:
             title = idea.get("Title", "") or idea.get("title", "")
             if title:
                 idea_map[title] = idea
 
-        # Create scored list
         scored_ideas = []
         scored_items = evaluation_data.get("scored_ideas", [])
 
-        # FIX: The key from the prompt is "scored_ideas", not "ranked_ideas"
+        if (
+            not dimension_pairs
+            or not isinstance(dimension_pairs, list)
+            or len(dimension_pairs) < 3
+        ):
+            print(
+                "[WARN] dimension_pairs missing/invalid; cannot parse evaluation output"
+            )
+            return []
+
+        assert dimension_pairs is not None
+        dimension_pairs_local = dimension_pairs
+
+        pair_count = len(dimension_pairs_local)
+
+        def _to_signed(v):
+            try:
+                if v is None:
+                    return None
+                fv = float(v)
+                if -50.0 <= fv <= 50.0:
+                    return int(round(fv))
+                if 0.0 <= fv <= 100.0:
+                    return int(round(fv)) - 50
+                if fv > 50.0:
+                    return 50
+                if fv < -50.0:
+                    return -50
+                return int(round(fv))
+            except Exception:
+                return None
+
         for scored_item in scored_items:
             idea_name = scored_item.get("Title", "")
 
             if idea_name in idea_map:
-                # Get original idea and update with scoring data
                 idea = idea_map[idea_name].copy()
 
-                # Add scoring information
-                idea["FeasibilityScore"] = scored_item.get("FeasibilityScore")
-                idea["NoveltyScore"] = scored_item.get("NoveltyScore")
-                idea["ImpactScore"] = scored_item.get("ImpactScore")
-                idea["NoveltyReason"] = scored_item.get("NoveltyReason", "")
-                idea["FeasibilityReason"] = scored_item.get("FeasibilityReason", "")
-                idea["ImpactReason"] = scored_item.get("ImpactReason", "")
+                idea["scores"] = {}
+                max_dimensions = min(pair_count, 3)
+                for idx in range(max_dimensions):
+                    pair = dimension_pairs_local[idx]
+                    dim_score_raw = _get_field(
+                        scored_item, _score_variants(f"Dimension{idx + 1}Score")
+                    )
+                    dim_reason = (
+                        _get_field(
+                            scored_item,
+                            _score_variants(f"Dimension{idx + 1}Reason"),
+                        )
+                        or ""
+                    )
+                    dim_score = _to_signed(dim_score_raw)
+                    dim_key = f"{pair.get('dimensionA', f'Dim{idx + 1}A')}-{pair.get('dimensionB', f'Dim{idx + 1}B')}"
+
+                    idea["scores"][dim_key] = dim_score
+                    idea[f"Dimension{idx + 1}Score"] = dim_score
+                    idea[f"Dimension{idx + 1}Reason"] = dim_reason
 
                 scored_ideas.append(idea)
 
@@ -713,8 +1017,6 @@ def _reflect_idea(
             task_name="reflect_idea",
         )
         new_idea = extract_json_between_markers(text)
-        if isinstance(new_idea, list) and new_idea:
-            new_idea = new_idea[0]
 
         if not new_idea:
             print("Failed to extract a valid idea from refinement")
@@ -757,8 +1059,6 @@ def _generate_idea(
 
         print(f"[DEBUG] Idea generation response length: {len(text)} chars")
         idea = extract_json_between_markers(text)
-        if isinstance(idea, list) and idea:
-            idea = idea[0]
 
         if not idea:
             print("Failed to generate a valid idea")
@@ -944,7 +1244,9 @@ def _setup_openai_sdk(self) -> None:
             "support and citations, and code_search for implementation baselines."
         )
         if skill_shell_tool is not None:
-            tool_policy += " Use the shell tool when a mounted OpenAI skill is relevant."
+            tool_policy += (
+                " Use the shell tool when a mounted OpenAI skill is relevant."
+            )
 
         self.agent = Agent(
             name="IdeaGenerator",
@@ -1120,6 +1422,7 @@ def default_todo() -> List[Dict[str, Any]]:
                     )
                 )
             return items
+
         return default_todo()
 
     def run(
@@ -1144,7 +1447,10 @@ def run(
             for idx, item in enumerate(todo, start=1):
                 action = item.get("action", "")
                 before_total, before_tasks = self.cost_tracker.snapshot()
-                before_global_total, before_global_tasks = self.cost_tracker.global_snapshot()
+                (
+                    before_global_total,
+                    before_global_tasks,
+                ) = self.cost_tracker.global_snapshot()
                 print_stage_progress(
                     "Thinker Progress",
                     idx,
@@ -1200,7 +1506,10 @@ def run(
                     status="done",
                 )
                 after_total, after_tasks = self.cost_tracker.snapshot()
-                after_global_total, after_global_tasks = self.cost_tracker.global_snapshot()
+                (
+                    after_global_total,
+                    after_global_tasks,
+                ) = self.cost_tracker.global_snapshot()
                 print_cost_delta_summary(
                     f"Thinker Cost: {action}",
                     before_total,
@@ -1246,9 +1555,7 @@ def _run_sdk_call(self, agent: Any, prompt: str, task_name: str) -> str:
         print_task_event("Thinker", task_name, "START")
         if self.agent_sdk == "claude":
             result = agent.run_sync(prompt, task_name)
-            print_task_event(
-                "Thinker", task_name, "END", time.perf_counter() - start
-            )
+            print_task_event("Thinker", task_name, "END", time.perf_counter() - start)
             return result
         result = Runner.run_sync(agent, prompt)
         track_sdk_cost(result, self.cost_tracker, self.model, task_name)
@@ -1351,7 +1658,9 @@ def _add(title: str, url: str, source_type: str, relevance: str) -> None:
                     continue
                 _add(
                     title=str(item.get("title") or item.get("name") or key),
-                    url=str(item.get("url") or item.get("link") or item.get("source") or ""),
+                    url=str(
+                        item.get("url") or item.get("link") or item.get("source") or ""
+                    ),
                     source_type=str(item.get("source_type") or key),
                     relevance=str(item.get("relevance") or ""),
                 )
@@ -1462,7 +1771,9 @@ def _refine_idea_components(self, idea_json: str) -> str:
             "Refine this idea to be specific and execution-ready:\n"
             f"{json.dumps(idea_obj, ensure_ascii=False)}"
         )
-        text = self._run_sdk_call(self.spec_refiner_agent, prompt, "refine_idea_components")
+        text = self._run_sdk_call(
+            self.spec_refiner_agent, prompt, "refine_idea_components"
+        )
         refined = extract_json_between_markers(text)
         if not isinstance(refined, dict):
             try:
@@ -1508,9 +1819,9 @@ def _generate_idea(
         if not idea:
             return json.dumps({})
         try:
-            idea["ComparisonTable"] = text.split("```markdown")[1].split("```")[
-                0
-            ].strip()
+            idea["ComparisonTable"] = (
+                text.split("```markdown")[1].split("```")[0].strip()
+            )
         except IndexError:
             pass
         self.cost_tracker.report()