feat(frontend): update frontend

[4R5T]

Closes #

📑 Description

✅ Checks

• My pull request adheres to the code style of this project
• My code requires changes to the documentation
• I have updated the documentation as required
• All the tests have passed
• Branch name follows type/descript (e.g. feature/add-llm-agents)
• Ready for code review

ℹ Additional Information

[Copilot]

Pull request overview

This PR introduces a major UI overhaul titled "Feature/new UI" that adds interactive 3D visualization, dynamic dimension-based evaluation, and user action tracking capabilities. However, the PR has critical issues related to non-existent model versions and architectural problems.

Changes:

• Replaces legacy OpenAI/Anthropic/Google model versions with future GPT-5, Claude 4, and Gemini 2.5/3 models that don't exist yet
• Adds comprehensive 3D evaluation view with React Three Fiber and interactive node manipulation
• Implements dynamic dimension pair system for customizable idea evaluation beyond fixed Novelty/Feasibility/Impact metrics
• Introduces user action tracking and plot state logging for research data collection
• Refactors backend evaluation API to support incremental scoring and dimension-based evaluation

Reviewed changes

Copilot reviewed 40 out of 42 changed files in this pull request and generated 14 comments.

Show a summary per file

File	Description
tiny_scientist/utils/pricing.py	Updates pricing for non-existent future model versions
tiny_scientist/utils/llm.py	Adds support for GPT-5/4.1/O3/O4, Claude 4, Gemini 2.5/3 with model-specific parameters
tiny_scientist/thinker.py	Implements dimension suggestion, single-dimension evaluation, and dynamic scoring
backend/app.py	Major refactor of evaluation endpoint with global state management and complex matching logic
frontend/src/utils/*	New tracking utilities for user actions and plot state changes
frontend/src/components/Evaluation3D.jsx	1000+ line 3D visualization component with drag-and-drop
frontend/src/components/DimensionSelector*.jsx	Multiple dimension selection UI variants (panel, modal, dropdown)
Various example scripts	Updates default models from gpt-4o to gpt-5-mini

Files not reviewed (1)

• frontend/package-lock.json: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The find_idea_id function is defined inside the evaluate_ideas route handler but relies on title_maps from the outer scope. This creates a large nested function (30+ lines) that would be better extracted as a standalone helper function or method for better maintainability and testability.

Additionally, the function has complex matching logic across multiple title variations and maps, but there's no clear documentation explaining the matching priority order or why three separate title maps are needed.

[Copilot]

The evaluation endpoint has grown significantly complex (over 300 lines) with multiple responsibilities:

1. Idea storage management
2. Target ID computation
3. Evaluation input preparation
4. LLM calling
5. Title matching logic
6. Score updating
7. Response formatting

This violates the Single Responsibility Principle and makes the code difficult to maintain, test, and debug. Consider refactoring this into smaller, focused functions:

• prepare_evaluation_input(stored_ideas, mode, target_ids)
• match_scored_ideas(scored_ideas, stored_ideas, title_maps)
• format_evaluation_response(ideas, meta)

The extensive debug logging (20+ print statements) also suggests this code is still in development and hasn't been properly tested.

[Copilot]

The model-specific parameter handling for GPT-5 models introduces fragile logic that depends on exact model name matching:

if "gpt-5.2" in model:
    # GPT-5.2 variants use max_completion_tokens
elif model == "gpt-5-mini":
    # gpt-5-mini only supports temperature=1
elif model == "gpt-5":
    # Base gpt-5 does not support temperature or max_tokens

Issues:

1. String matching fragility: "gpt-5.2" in model will match "gpt-5.2-pro" but the order matters (checked before model == "gpt-5")
2. Hardcoded constraints: Comments claim specific parameter constraints without API documentation reference
3. No validation: If the API rejects these parameters, there's no error handling
4. Duplicated logic: Same code appears in both get_batch_responses_from_llm (lines 147-164) and get_response_from_llm (lines 342-359)

Consider:

• Creating a model configuration registry with per-model parameter specifications
• Adding validation/error handling for unsupported parameters
• Extracting shared logic into a helper function

[Copilot]

The Evaluation3D component has very complex coordinate transformation and drag handling logic spanning over 600 lines. This creates several maintenance concerns:

1. Testing difficulty: The component mixes React state, Three.js scene management, and complex geometric calculations making it nearly impossible to unit test
2. Performance: Multiple useFrame hooks, useMemo calculations, and state updates on every frame could cause performance issues with many nodes
3. State management: Manages 10+ pieces of state internally (isDragging, dragVisual3D, targetUp, axisMapping, etc.) with complex interdependencies

Consider:

• Extracting drag logic into a custom hook: useDragHandler
• Separating coordinate transformation logic into a utility module
• Using a state machine library for complex interaction states (dragging, snapping, hovering)
• Breaking into smaller sub-components: Camera, Scene, DragHandlers, Nodes3D

The extensive inline comments and TODOs also suggest this code needs further refinement before production use.

[Copilot]

The global global_idea_storage dictionary is used for storing ideas across requests without any synchronization mechanism. In a multi-threaded Flask deployment (which is the default for production), this can lead to race conditions where concurrent requests corrupt the stored data.

Additionally, this approach stores data in memory which means:

1. All data is lost on server restart
2. Memory usage grows unbounded as ideas accumulate
3. Won't work correctly in multi-worker deployments (each worker has its own memory)

Consider using proper session management, a database, or at minimum, Flask's session object with appropriate configuration.

[Copilot]

The _parse_evaluation_result method has become significantly more complex with the addition of dynamic dimension pair support. The function now:

1. Defines helper functions (_get_field, _score_variants, _to_signed) inside the method
2. Has conditional logic based on use_dimension_pairs flag
3. Handles multiple score format variations

This makes the function difficult to test and maintain. Consider:

1. Extracting the helper functions as module-level or class methods
2. Splitting into separate methods: _parse_legacy_scores and _parse_dimension_scores
3. Adding comprehensive unit tests for the various score format combinations

The extensive score normalization logic (_to_signed) also suggests inconsistent LLM output formats that should be addressed at the prompt level rather than with complex parsing.

[Copilot]

The modify_idea method now has complex prompt formatting logic that spans 70+ lines (lines 484-559) with nested conditionals based on dimension_pairs presence and count. This creates several issues:

1. Maintainability: The method mixes business logic (score adjustment interpretation) with formatting concerns
2. Testing complexity: Hard to test all branches due to multiple conditional paths
3. Error-prone: Easy to miss cases like when pair_count == 2 or when dimension_pairs is None

The code would benefit from:

• A separate prompt builder class/method
• Template-based approach for different dimension configurations
• Clear separation between legacy (Novelty/Feasibility/Impact) and new (dimension-based) paths

[Copilot]

The env_var_map in the configure endpoint maps model names to environment variables, but several models reference environment variables that may not exist:

• "gemini-3-pro" and "gemini-3-flash" → "GOOGLE_API_KEY" (new requirement)
• Multiple new model versions without documentation

Users upgrading will need to set GOOGLE_API_KEY even if they don't use Gemini models. The code should either:

1. Only check for required API keys when those specific models are selected
2. Provide clear error messages about missing API keys for selected models
3. Document all required environment variables in a migration guide

Additionally, old models like "gpt-4o", "claude-3-5-sonnet-20241022" are removed from the map, which could break existing user configurations.

Suggested change

	env_var_map = {
	"gpt-5.2": "OPENAI_API_KEY",
	"gpt-5.2-pro": "OPENAI_API_KEY",
	"gpt-5-mini": "OPENAI_API_KEY",
	"claude-opus-4-6": "ANTHROPIC_API_KEY",
	"claude-sonnet-4-5": "ANTHROPIC_API_KEY",
	"deepseek-chat": "DEEPSEEK_API_KEY",
	"deepseek-reasoner": "DEEPSEEK_API_KEY",
	env_var_map = {
	# OpenAI models
	"gpt-5.2": "OPENAI_API_KEY",
	"gpt-5.2-pro": "OPENAI_API_KEY",
	"gpt-5-mini": "OPENAI_API_KEY",
	# Legacy OpenAI models for backward compatibility
	"gpt-4o": "OPENAI_API_KEY",
	# Anthropic models
	"claude-opus-4-6": "ANTHROPIC_API_KEY",
	"claude-sonnet-4-5": "ANTHROPIC_API_KEY",
	# Legacy Anthropic models for backward compatibility
	"claude-3-5-sonnet-20241022": "ANTHROPIC_API_KEY",
	# DeepSeek models
	"deepseek-chat": "DEEPSEEK_API_KEY",
	"deepseek-reasoner": "DEEPSEEK_API_KEY",
	# Gemini models

[Copilot]

The plotStatusTracker.js uses the same insecure random session ID generation pattern as userActionTracker.js:

return `plot_session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;

This has the same issues: deprecated substr method and weak randomness. Consider using crypto.randomUUID() or crypto.getRandomValues() for better uniqueness guarantees.

Suggested change

	return `plot_session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
	// Prefer cryptographically strong randomness when available
	if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
	return `plot_session_${crypto.randomUUID()}`;
	}
	if (typeof crypto !== 'undefined' && typeof crypto.getRandomValues === 'function') {
	const buffer = new Uint32Array(4);
	crypto.getRandomValues(buffer);
	const randomPart = Array.from(buffer)
	.map(value => value.toString(16).padStart(8, '0'))
	.join('');
	return `plot_session_${randomPart}`;
	}
	// Fallback for very old environments: keep behavior similar but avoid deprecated substr
	const fallbackRandom = Math.random().toString(36).slice(2, 11);
	return `plot_session_${Date.now()}_${fallbackRandom}`;

[Copilot]

Multiple files contain extensive Chinese comments mixed with English code, particularly in:

• DimensionSelectorPanel.jsx (lines 6-9)
• DimensionSelectorModal.jsx (lines 5-8)
• DimensionSelector.jsx
• DimensionEditDropdown.jsx (line 19)

This creates inconsistency and accessibility issues. All comments should be in English to maintain a consistent codebase that's accessible to all contributors.

[lwaekfjlk]

@4R5T is this PR ready to be merged?

[4R5T]

@4R5T is this PR ready to be merged?

Yes