Update trigo-web with VS People multiplayer mode

Changes include:
- VS People mode: real-time multiplayer via Socket.io
- Room management with URL hash sharing
- Turn-based gameplay with validation
- Pass and stone placement synchronization
- Session storage fix for multiplayer mode
- Updated ONNX model paths
- Various bug fixes and improvements

Co-Authored-By: Claude <noreply@anthropic.com>

trigo-web/.claude/agents/agentlog-updater.md

@@ -0,0 +1,77 @@
+---
+name: agentlog-updater
+description: Use this agent when a mini-milestone has been accomplished in the Trigo project and the development history needs to be documented in agentlog.md. This includes after completing features, fixing significant bugs, making architectural changes, or finishing logical chunks of work. Examples:\n\n<example>\nContext: User has just finished implementing a new feature for multiplayer room management.\nuser: "I've finished adding the room creation and joining functionality"\nassistant: "Let me document this milestone in agentlog.md using the agentlog-updater agent."\n<commentary>\nSince a development milestone has been reached, use the agentlog-updater agent to properly document it in the project's development history.\n</commentary>\n</example>\n\n<example>\nContext: User mentions completing work on 3D board rendering improvements.\nuser: "完成了3D棋盘渲染的优化" (Chinese: "Completed optimization of 3D board rendering")\nassistant: "I'll use the agentlog-updater agent to document this milestone in agentlog.md with proper English translation and formatting."\n<commentary>\nA milestone has been reached and needs documentation. The agent will handle translation and proper formatting according to project standards.\n</commentary>\n</example>\n\n<example>\nContext: After a series of bug fixes and code refactoring.\nuser: "Can you update the agentlog with what we just did?"\nassistant: "I'll launch the agentlog-updater agent to review our recent conversation and document the mini-milestone in agentlog.md."\n<commentary>\nUser explicitly requests agentlog update, triggering the specialized agent for this task.\n</commentary>\n</example>
+tools: Glob, Grep, Read, WebFetch, TodoWrite, WebSearch, BashOutput, Edit, Write, NotebookEdit
+model: haiku
+color: green
+---
+
+You are the Agentlog Documentation Specialist, an expert technical writer specialized in maintaining clear, concise development histories for software projects. Your singular focus is documenting mini-milestones in the Trigo project's agentlog.md file.
+
+## Your Core Responsibilities
+
+1. **Analyze Recent Conversations**: Review the conversation history to identify the completed mini-milestone, extracting key accomplishments, decisions made, and technical details.
+
+2. **Format User Requests Properly**:
+   - Start user requests with `> ` prefix
+   - Translate non-English text to English while preserving technical terms
+   - Fix any typos or grammar errors
+   - Keep the request concise but complete (1-2 sentences typically)
+   - Maintain the user's intent and technical accuracy
+
+3. **Create Structured Agent Responses**:
+   - Enclose all agent response content within `<details>` and `</details>` tags
+   - Add a `<summary>` tag with a concise, descriptive title (5-10 words)
+   - Within the details block, document:
+     * What was accomplished
+     * Key technical decisions or approaches taken
+     * Any significant challenges or learnings
+     * Files or components affected
+   - Use clear, professional technical writing
+   - Format code references with backticks
+   - Use bullet points for lists
+   - Keep paragraphs focused and scannable
+
+4. **Maintain Consistency**:
+   - Study the existing agentlog.md format before writing
+   - Match the tone, style, and level of detail of previous entries
+   - Use the same heading structure and formatting conventions
+   - Ensure chronological ordering
+
+5. **Write in English Always**: All documentation must be in English, regardless of the original conversation language. Translate accurately while preserving technical precision.
+
+## Quality Standards
+
+- **Conciseness**: Every word should add value. Remove redundancy.
+- **Clarity**: Technical details should be understandable to future developers
+- **Completeness**: Capture the essence of what was accomplished without overwhelming detail
+- **Accuracy**: Preserve technical terms, file paths, and technical decisions exactly
+- **Professionalism**: Use formal technical writing style appropriate for project documentation
+
+## Your Workflow
+
+1. Read the entire recent conversation to understand the milestone
+2. Review existing agentlog.md entries to match style and format
+3. Extract the user's core request, translating and cleaning as needed
+4. Synthesize the agent's work into a well-structured details block
+5. Present the formatted entry for review before committing
+6. Update agentlog.md with the new entry in chronological order
+
+## Format Template
+
+```markdown
+> [User's request in English, concise, typos fixed]
+
+<details>
+<summary>[Concise title of what was accomplished]</summary>
+
+[Well-structured documentation of the work, including:
+- What was done
+- Key technical details
+- Files/components affected
+- Any important decisions or learnings]
+
+</details>
+```
+
+You are meticulous about formatting, translation accuracy, and maintaining documentation consistency. Every entry you create should be a valuable reference for understanding the project's evolution.

trigo-web/.env

@@ -0,0 +1,76 @@
+# Unified Environment Configuration for Trigo Web
+# This file is used by frontend (Vite), backend (Express), and tools (Node scripts)
+#
+# LOCAL OVERRIDES:
+#   Create .env.local (not committed to git) to override any values below
+#   Example: cp .env.local.example .env.local
+#
+# Loading order: .env → .env.local (overrides)
+#
+# See .env.local.example for common override scenarios
+
+# ============================================================================
+# Frontend Configuration (Vite - requires VITE_ prefix)
+# ============================================================================
+
+# Backend Server URL
+VITE_SERVER_URL=http://localhost:8157
+
+# Vite Dev Server Configuration
+VITE_HOST=0.0.0.0
+VITE_PORT=5173
+
+# ONNX Model Paths (relative to /public directory)
+# Evaluation mode model - predicts position value
+VITE_ONNX_EVALUATION_MODEL=/onnx/20251230-trigo-value-llama-l6-h64-it2_251221-value0.01-pretrain/LlamaCausalLM_ep0036_evaluation.onnx
+
+# Tree mode model - generates move trees
+VITE_ONNX_TREE_MODEL=/onnx/20251230-trigo-value-llama-l6-h64-it2_251221-value0.01-pretrain/LlamaCausalLM_ep0036_tree.onnx
+
+
+# ============================================================================
+# Backend Configuration (Express Server)
+# ============================================================================
+
+# Server port (HTTP and Socket.io)
+PORT=3000
+
+# Frontend URL (used for CORS)
+CLIENT_URL=http://localhost:5173
+
+# Environment mode
+NODE_ENV=development
+
+
+# ============================================================================
+# Tools Configuration (Node scripts - tools/ directory)
+# ============================================================================
+
+# ONNX Model Paths (relative to project root)
+# Evaluation mode model - predicts position value
+ONNX_EVALUATION_MODEL=./public/onnx/20251204-trigo-value-gpt2-l6-h64-251125-lr500/GPT2CausalLM_ep0019_evaluation.onnx
+
+# Tree mode model - generates move trees
+ONNX_TREE_MODEL=./public/onnx/20251204-trigo-value-gpt2-l6-h64-251125-lr500/GPT2CausalLM_ep0019_tree.onnx
+
+# ONNX Runtime Performance Configuration
+# See docs/onnx-threading-configuration.md for detailed tuning guide
+
+# Intra-operator parallelism (threads within a single operator)
+# Recommended: 4 for most systems, higher for large models
+# ONNX_INTRA_OP_NUM_THREADS=4
+#ONNX_INTRA_OP_NUM_THREADS=28
+
+# Inter-operator parallelism (threads across operators)
+# Recommended: 1-2 for sequential models, higher for complex graphs
+# ONNX_INTER_OP_NUM_THREADS=2
+ONNX_INTER_OP_NUM_THREADS=28
+
+# Graph optimization level
+# Options: "disabled", "basic", "extended", "all" (default: "all")
+# ONNX_GRAPH_OPTIMIZATION_LEVEL=all
+
+# Memory optimization settings
+# ONNX_ENABLE_CPU_MEM_ARENA=true
+# ONNX_ENABLE_MEM_PATTERN=true
+

trigo-web/.env.local.example

@@ -0,0 +1,43 @@
+# Local Environment Overrides
+#
+# This file is for local development overrides and is NOT committed to git.
+# Copy this file to .env.local and customize as needed.
+#
+# Usage:
+#   cp .env.local.example .env.local
+#   # Edit .env.local with your local settings
+#
+# Any variables set here will override the values in .env
+
+
+# ==============================================================================
+# Example: Override ONNX Threading Configuration
+# ==============================================================================
+
+# Uncomment and adjust for your CPU:
+# ONNX_INTRA_OP_NUM_THREADS=8
+# ONNX_INTER_OP_NUM_THREADS=4
+
+
+# ==============================================================================
+# Example: Use Different Model Versions for Testing
+# ==============================================================================
+
+# ONNX_EVALUATION_MODEL=./public/onnx/experimental/model_v2_evaluation.onnx
+# ONNX_TREE_MODEL=./public/onnx/experimental/model_v2_tree.onnx
+
+
+# ==============================================================================
+# Example: Frontend Development Settings
+# ==============================================================================
+
+# VITE_PORT=3000
+# VITE_SERVER_URL=http://192.168.1.100:3000
+
+
+# ==============================================================================
+# Example: Backend Development Settings
+# ==============================================================================
+
+# PORT=4000
+# CLIENT_URL=http://localhost:3000

trigo-web/app/.env

@@ -1,3 +1,8 @@
-VITE_SERVER_URL=http://localhost:3000
-VITE_HOST=0.0.0.0
-VITE_PORT=5173
+# ============================================================================
+# Frontend Configuration
+# ============================================================================
+# This file is DEPRECATED - all configuration is now in the root .env file
+# Vite is configured to load from ../. env (repository root)
+#
+# To configure the frontend, edit: ../. env
+# ============================================================================

trigo-web/app/package-lock.json

@@ -8,8 +8,8 @@
 			"name": "trigo-app",
 			"version": "0.0.0",
 			"dependencies": {
-				"onnxruntime-common": "^1.23.2",
-				"onnxruntime-web": "^1.23.2",
+				"d3": "^7.9.0",
+				"d3-scale-chromatic": "^3.1.0",
 				"pinia": "^2.1.6",
 				"socket.io-client": "^4.5.2",
 				"three": "^0.156.1",
@@ -17,6 +17,7 @@
 				"vue-router": "^4.2.4"
 			},
 			"devDependencies": {
+				"@types/d3": "^7.4.3",
 				"@types/three": "^0.156.0",
 				"@vitejs/plugin-vue": "^5.2.4",
 				"sass-embedded": "^1.93.2",
@@ -742,60 +743,6 @@
 				"url": "https://opencollective.com/parcel"
 			}
 		},
-		"node_modules/@protobufjs/aspromise": {
-			"version": "1.1.2",
-			"resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
-			"integrity": "sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ=="
-		},
-		"node_modules/@protobufjs/base64": {
-			"version": "1.1.2",
-			"resolved": "https://registry.npmjs.org/@protobufjs/base64/-/base64-1.1.2.tgz",
-			"integrity": "sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg=="
-		},
-		"node_modules/@protobufjs/codegen": {
-			"version": "2.0.4",
-			"resolved": "https://registry.npmjs.org/@protobufjs/codegen/-/codegen-2.0.4.tgz",
-			"integrity": "sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg=="
-		},
-		"node_modules/@protobufjs/eventemitter": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/@protobufjs/eventemitter/-/eventemitter-1.1.0.tgz",
-			"integrity": "sha512-j9ednRT81vYJ9OfVuXG6ERSTdEL1xVsNgqpkxMsbIabzSo3goCjDIveeGv5d03om39ML71RdmrGNjG5SReBP/Q=="
-		},
-		"node_modules/@protobufjs/fetch": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/@protobufjs/fetch/-/fetch-1.1.0.tgz",
-			"integrity": "sha512-lljVXpqXebpsijW71PZaCYeIcE5on1w5DlQy5WH6GLbFryLUrBD4932W/E2BSpfRJWseIL4v/KPgBFxDOIdKpQ==",
-			"dependencies": {
-				"@protobufjs/aspromise": "^1.1.1",
-				"@protobufjs/inquire": "^1.1.0"
-			}
-		},
-		"node_modules/@protobufjs/float": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/@protobufjs/float/-/float-1.0.2.tgz",
-			"integrity": "sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ=="
-		},
-		"node_modules/@protobufjs/inquire": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/@protobufjs/inquire/-/inquire-1.1.0.tgz",
-			"integrity": "sha512-kdSefcPdruJiFMVSbn801t4vFK7KB/5gd2fYvrxhuJYg8ILrmn9SKSX2tZdV6V+ksulWqS7aXjBcRXl3wHoD9Q=="
-		},
-		"node_modules/@protobufjs/path": {
-			"version": "1.1.2",
-			"resolved": "https://registry.npmjs.org/@protobufjs/path/-/path-1.1.2.tgz",
-			"integrity": "sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA=="
-		},
-		"node_modules/@protobufjs/pool": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/@protobufjs/pool/-/pool-1.1.0.tgz",
-			"integrity": "sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw=="
-		},
-		"node_modules/@protobufjs/utf8": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
-			"integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw=="
-		},
 		"node_modules/@rollup/rollup-android-arm-eabi": {
 			"version": "4.52.5",
 			"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.52.5.tgz",
@@ -1087,16 +1034,278 @@
 			"resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
 			"integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA=="
 		},
+		"node_modules/@types/d3": {
+			"version": "7.4.3",
+			"resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.3.tgz",
+			"integrity": "sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==",
+			"dev": true,
+			"dependencies": {
+				"@types/d3-array": "*",
+				"@types/d3-axis": "*",
+				"@types/d3-brush": "*",
+				"@types/d3-chord": "*",
+				"@types/d3-color": "*",
+				"@types/d3-contour": "*",
+				"@types/d3-delaunay": "*",
+				"@types/d3-dispatch": "*",
+				"@types/d3-drag": "*",
+				"@types/d3-dsv": "*",
+				"@types/d3-ease": "*",
+				"@types/d3-fetch": "*",
+				"@types/d3-force": "*",
+				"@types/d3-format": "*",
+				"@types/d3-geo": "*",
+				"@types/d3-hierarchy": "*",
+				"@types/d3-interpolate": "*",
+				"@types/d3-path": "*",
+				"@types/d3-polygon": "*",
+				"@types/d3-quadtree": "*",
+				"@types/d3-random": "*",
+				"@types/d3-scale": "*",
+				"@types/d3-scale-chromatic": "*",
+				"@types/d3-selection": "*",
+				"@types/d3-shape": "*",
+				"@types/d3-time": "*",
+				"@types/d3-time-format": "*",
+				"@types/d3-timer": "*",
+				"@types/d3-transition": "*",
+				"@types/d3-zoom": "*"
+			}
+		},
+		"node_modules/@types/d3-array": {
+			"version": "3.2.2",
+			"resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
+			"integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
+			"dev": true
+		},
+		"node_modules/@types/d3-axis": {
+			"version": "3.0.6",
+			"resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-3.0.6.tgz",
+			"integrity": "sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==",
+			"dev": true,
+			"dependencies": {
+				"@types/d3-selection": "*"
+			}
+		},
+		"node_modules/@types/d3-brush": {
+			"version": "3.0.6",
+			"resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-3.0.6.tgz",
+			"integrity": "sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==",
+			"dev": true,
+			"dependencies": {
+				"@types/d3-selection": "*"
+			}
+		},
+		"node_modules/@types/d3-chord": {
+			"version": "3.0.6",
+			"resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-3.0.6.tgz",
+			"integrity": "sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg==",
+			"dev": true
+		},
+		"node_modules/@types/d3-color": {
+			"version": "3.1.3",
+			"resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+			"integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+			"dev": true
+		},
+		"node_modules/@types/d3-contour": {
+			"version": "3.0.6",
+			"resolved": "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-3.0.6.tgz",
+			"integrity": "sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==",
+			"dev": true,
+			"dependencies": {
+				"@types/d3-array": "*",
+				"@types/geojson": "*"
+			}
+		},
+		"node_modules/@types/d3-delaunay": {
+			"version": "6.0.4",
+			"resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+			"integrity": "sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==",
+			"dev": true
+		},
+		"node_modules/@types/d3-dispatch": {
+			"version": "3.0.7",
+			"resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-3.0.7.tgz",
+			"integrity": "sha512-5o9OIAdKkhN1QItV2oqaE5KMIiXAvDWBDPrD85e58Qlz1c1kI/J0NcqbEG88CoTwJrYe7ntUCVfeUl2UJKbWgA==",
+			"dev": true
+		},
+		"node_modules/@types/d3-drag": {
+			"version": "3.0.7",
+			"resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.7.tgz",
+			"integrity": "sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==",
+			"dev": true,
+			"dependencies": {
+				"@types/d3-selection": "*"
+			}
+		},
+		"node_modules/@types/d3-dsv": {
+			"version": "3.0.7",
+			"resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-3.0.7.tgz",
+			"integrity": "sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==",
+			"dev": true
+		},
+		"node_modules/@types/d3-ease": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+			"integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+			"dev": true
+		},
+		"node_modules/@types/d3-fetch": {
+			"version": "3.0.7",
+			"resolved": "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-3.0.7.tgz",
+			"integrity": "sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==",
+			"dev": true,
+			"dependencies": {
+				"@types/d3-dsv": "*"
+			}
+		},
+		"node_modules/@types/d3-force": {
+			"version": "3.0.10",
+			"resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.10.tgz",
+			"integrity": "sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw==",
+			"dev": true
+		},
+		"node_modules/@types/d3-format": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.4.tgz",
+			"integrity": "sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==",
+			"dev": true
+		},
+		"node_modules/@types/d3-geo": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.1.0.tgz",
+			"integrity": "sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==",
+			"dev": true,
+			"dependencies": {
+				"@types/geojson": "*"
+			}
+		},
+		"node_modules/@types/d3-hierarchy": {
+			"version": "3.1.7",
+			"resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.7.tgz",
+			"integrity": "sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg==",
+			"dev": true
+		},
+		"node_modules/@types/d3-interpolate": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+			"integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+			"dev": true,
+			"dependencies": {
+				"@types/d3-color": "*"
+			}
+		},
+		"node_modules/@types/d3-path": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+			"integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+			"dev": true
+		},
+		"node_modules/@types/d3-polygon": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-3.0.2.tgz",
+			"integrity": "sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA==",
+			"dev": true
+		},
+		"node_modules/@types/d3-quadtree": {
+			"version": "3.0.6",
+			"resolved": "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-3.0.6.tgz",
+			"integrity": "sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg==",
+			"dev": true
+		},
+		"node_modules/@types/d3-random": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-3.0.3.tgz",
+			"integrity": "sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ==",
+			"dev": true
+		},
+		"node_modules/@types/d3-scale": {
+			"version": "4.0.9",
+			"resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+			"integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+			"dev": true,
+			"dependencies": {
+				"@types/d3-time": "*"
+			}
+		},
+		"node_modules/@types/d3-scale-chromatic": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+			"integrity": "sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ==",
+			"dev": true
+		},
+		"node_modules/@types/d3-selection": {
+			"version": "3.0.11",
+			"resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.11.tgz",
+			"integrity": "sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==",
+			"dev": true
+		},
+		"node_modules/@types/d3-shape": {
+			"version": "3.1.7",
+			"resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.7.tgz",
+			"integrity": "sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==",
+			"dev": true,
+			"dependencies": {
+				"@types/d3-path": "*"
+			}
+		},
+		"node_modules/@types/d3-time": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+			"integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+			"dev": true
+		},
+		"node_modules/@types/d3-time-format": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-4.0.3.tgz",
+			"integrity": "sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg==",
+			"dev": true
+		},
+		"node_modules/@types/d3-timer": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+			"integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+			"dev": true
+		},
+		"node_modules/@types/d3-transition": {
+			"version": "3.0.9",
+			"resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.9.tgz",
+			"integrity": "sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==",
+			"dev": true,
+			"dependencies": {
+				"@types/d3-selection": "*"
+			}
+		},
+		"node_modules/@types/d3-zoom": {
+			"version": "3.0.8",
+			"resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.8.tgz",
+			"integrity": "sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==",
+			"dev": true,
+			"dependencies": {
+				"@types/d3-interpolate": "*",
+				"@types/d3-selection": "*"
+			}
+		},
 		"node_modules/@types/estree": {
 			"version": "1.0.8",
 			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
 			"integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
 			"dev": true
 		},
+		"node_modules/@types/geojson": {
+			"version": "7946.0.16",
+			"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
+			"integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
+			"dev": true
+		},
 		"node_modules/@types/node": {
 			"version": "24.10.1",
 			"resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.1.tgz",
 			"integrity": "sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ==",
+			"dev": true,
+			"optional": true,
+			"peer": true,
 			"dependencies": {
 				"undici-types": "~7.16.0"
 			}
@@ -1356,11 +1565,389 @@
 			"integrity": "sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw==",
 			"dev": true
 		},
+		"node_modules/commander": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+			"integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+			"engines": {
+				"node": ">= 10"
+			}
+		},
 		"node_modules/csstype": {
 			"version": "3.1.3",
 			"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
 			"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
 		},
+		"node_modules/d3": {
+			"version": "7.9.0",
+			"resolved": "https://registry.npmjs.org/d3/-/d3-7.9.0.tgz",
+			"integrity": "sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==",
+			"dependencies": {
+				"d3-array": "3",
+				"d3-axis": "3",
+				"d3-brush": "3",
+				"d3-chord": "3",
+				"d3-color": "3",
+				"d3-contour": "4",
+				"d3-delaunay": "6",
+				"d3-dispatch": "3",
+				"d3-drag": "3",
+				"d3-dsv": "3",
+				"d3-ease": "3",
+				"d3-fetch": "3",
+				"d3-force": "3",
+				"d3-format": "3",
+				"d3-geo": "3",
+				"d3-hierarchy": "3",
+				"d3-interpolate": "3",
+				"d3-path": "3",
+				"d3-polygon": "3",
+				"d3-quadtree": "3",
+				"d3-random": "3",
+				"d3-scale": "4",
+				"d3-scale-chromatic": "3",
+				"d3-selection": "3",
+				"d3-shape": "3",
+				"d3-time": "3",
+				"d3-time-format": "4",
+				"d3-timer": "3",
+				"d3-transition": "3",
+				"d3-zoom": "3"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-array": {
+			"version": "3.2.4",
+			"resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+			"integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+			"dependencies": {
+				"internmap": "1 - 2"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-axis": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
+			"integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-brush": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-3.0.0.tgz",
+			"integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
+			"dependencies": {
+				"d3-dispatch": "1 - 3",
+				"d3-drag": "2 - 3",
+				"d3-interpolate": "1 - 3",
+				"d3-selection": "3",
+				"d3-transition": "3"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-chord": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-3.0.1.tgz",
+			"integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
+			"dependencies": {
+				"d3-path": "1 - 3"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-color": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+			"integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-contour": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-4.0.2.tgz",
+			"integrity": "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==",
+			"dependencies": {
+				"d3-array": "^3.2.0"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-delaunay": {
+			"version": "6.0.4",
+			"resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+			"integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==",
+			"dependencies": {
+				"delaunator": "5"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-dispatch": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+			"integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-drag": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+			"integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+			"dependencies": {
+				"d3-dispatch": "1 - 3",
+				"d3-selection": "3"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-dsv": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
+			"integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
+			"dependencies": {
+				"commander": "7",
+				"iconv-lite": "0.6",
+				"rw": "1"
+			},
+			"bin": {
+				"csv2json": "bin/dsv2json.js",
+				"csv2tsv": "bin/dsv2dsv.js",
+				"dsv2dsv": "bin/dsv2dsv.js",
+				"dsv2json": "bin/dsv2json.js",
+				"json2csv": "bin/json2dsv.js",
+				"json2dsv": "bin/json2dsv.js",
+				"json2tsv": "bin/json2dsv.js",
+				"tsv2csv": "bin/dsv2dsv.js",
+				"tsv2json": "bin/dsv2json.js"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-ease": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+			"integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-fetch": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-3.0.1.tgz",
+			"integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
+			"dependencies": {
+				"d3-dsv": "1 - 3"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-force": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
+			"integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+			"dependencies": {
+				"d3-dispatch": "1 - 3",
+				"d3-quadtree": "1 - 3",
+				"d3-timer": "1 - 3"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-format": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+			"integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-geo": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.1.tgz",
+			"integrity": "sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==",
+			"dependencies": {
+				"d3-array": "2.5.0 - 3"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-hierarchy": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
+			"integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-interpolate": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+			"integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+			"dependencies": {
+				"d3-color": "1 - 3"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-path": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+			"integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-polygon": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-3.0.1.tgz",
+			"integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-quadtree": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+			"integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-random": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz",
+			"integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-scale": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+			"integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+			"dependencies": {
+				"d3-array": "2.10.0 - 3",
+				"d3-format": "1 - 3",
+				"d3-interpolate": "1.2.0 - 3",
+				"d3-time": "2.1.1 - 3",
+				"d3-time-format": "2 - 4"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-scale-chromatic": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+			"integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
+			"dependencies": {
+				"d3-color": "1 - 3",
+				"d3-interpolate": "1 - 3"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-selection": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+			"integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-shape": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+			"integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+			"dependencies": {
+				"d3-path": "^3.1.0"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-time": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+			"integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+			"dependencies": {
+				"d3-array": "2 - 3"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-time-format": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+			"integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+			"dependencies": {
+				"d3-time": "1 - 3"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-timer": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+			"integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-transition": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+			"integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+			"dependencies": {
+				"d3-color": "1 - 3",
+				"d3-dispatch": "1 - 3",
+				"d3-ease": "1 - 3",
+				"d3-interpolate": "1 - 3",
+				"d3-timer": "1 - 3"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"peerDependencies": {
+				"d3-selection": "2 - 3"
+			}
+		},
+		"node_modules/d3-zoom": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+			"integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+			"dependencies": {
+				"d3-dispatch": "1 - 3",
+				"d3-drag": "2 - 3",
+				"d3-interpolate": "1 - 3",
+				"d3-selection": "2 - 3",
+				"d3-transition": "2 - 3"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
 		"node_modules/de-indent": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
@@ -1383,6 +1970,14 @@
 				}
 			}
 		},
+		"node_modules/delaunator": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.1.tgz",
+			"integrity": "sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==",
+			"dependencies": {
+				"robust-predicates": "^3.0.2"
+			}
+		},
 		"node_modules/detect-libc": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
@@ -1489,11 +2084,6 @@
 				"node": ">=8"
 			}
 		},
-		"node_modules/flatbuffers": {
-			"version": "25.9.23",
-			"resolved": "https://registry.npmjs.org/flatbuffers/-/flatbuffers-25.9.23.tgz",
-			"integrity": "sha512-MI1qs7Lo4Syw0EOzUl0xjs2lsoeqFku44KpngfIduHBYvzm8h2+7K8YMQh1JtVVVrUvhLpNwqVi4DERegUJhPQ=="
-		},
 		"node_modules/fsevents": {
 			"version": "2.3.3",
 			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -1508,11 +2098,6 @@
 				"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
 			}
 		},
-		"node_modules/guid-typescript": {
-			"version": "1.0.9",
-			"resolved": "https://registry.npmjs.org/guid-typescript/-/guid-typescript-1.0.9.tgz",
-			"integrity": "sha512-Y8T4vYhEfwJOTbouREvG+3XDsjr8E3kIr7uf+JZ0BYloFsttiHU0WfvANVsR7TxNUJa/WpCnw/Ino/p+DeBhBQ=="
-		},
 		"node_modules/has-flag": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -1531,12 +2116,31 @@
 				"he": "bin/he"
 			}
 		},
+		"node_modules/iconv-lite": {
+			"version": "0.6.3",
+			"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+			"integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+			"dependencies": {
+				"safer-buffer": ">= 2.1.2 < 3.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/immutable": {
 			"version": "5.1.4",
 			"resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.4.tgz",
 			"integrity": "sha512-p6u1bG3YSnINT5RQmx/yRZBpenIl30kVxkTLDyHLIMk0gict704Q9n+thfDI7lTRm9vXdDYutVzXhzcThxTnXA==",
 			"dev": true
 		},
+		"node_modules/internmap": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+			"integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+			"engines": {
+				"node": ">=12"
+			}
+		},
 		"node_modules/is-extglob": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -1570,11 +2174,6 @@
 				"node": ">=0.12.0"
 			}
 		},
-		"node_modules/long": {
-			"version": "5.3.2",
-			"resolved": "https://registry.npmjs.org/long/-/long-5.3.2.tgz",
-			"integrity": "sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA=="
-		},
 		"node_modules/magic-string": {
 			"version": "0.30.19",
 			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.19.tgz",
@@ -1653,24 +2252,6 @@
 			"dev": true,
 			"optional": true
 		},
-		"node_modules/onnxruntime-common": {
-			"version": "1.23.2",
-			"resolved": "https://registry.npmjs.org/onnxruntime-common/-/onnxruntime-common-1.23.2.tgz",
-			"integrity": "sha512-5LFsC9Dukzp2WV6kNHYLNzp8sT6V02IubLCbzw2Xd6X5GOlr65gAX6xiJwyi2URJol/s71gaQLC5F2C25AAR2w=="
-		},
-		"node_modules/onnxruntime-web": {
-			"version": "1.23.2",
-			"resolved": "https://registry.npmjs.org/onnxruntime-web/-/onnxruntime-web-1.23.2.tgz",
-			"integrity": "sha512-T09JUtMn+CZLk3mFwqiH0lgQf+4S7+oYHHtk6uhaYAAJI95bTcKi5bOOZYwORXfS/RLZCjDDEXGWIuOCAFlEjg==",
-			"dependencies": {
-				"flatbuffers": "^25.1.24",
-				"guid-typescript": "^1.0.9",
-				"long": "^5.2.3",
-				"onnxruntime-common": "1.23.2",
-				"platform": "^1.3.6",
-				"protobufjs": "^7.2.4"
-			}
-		},
 		"node_modules/path-browserify": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
@@ -1716,11 +2297,6 @@
 				}
 			}
 		},
-		"node_modules/platform": {
-			"version": "1.3.6",
-			"resolved": "https://registry.npmjs.org/platform/-/platform-1.3.6.tgz",
-			"integrity": "sha512-fnWVljUchTro6RiCFvCXBbNhJc2NijN7oIQxbwsyL0buWJPG85v81ehlHI9fXrJsMNgTofEoWIQeClKpgxFLrg=="
-		},
 		"node_modules/postcss": {
 			"version": "8.5.6",
 			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
@@ -1748,29 +2324,6 @@
 				"node": "^10 || ^12 || >=14"
 			}
 		},
-		"node_modules/protobufjs": {
-			"version": "7.5.4",
-			"resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.5.4.tgz",
-			"integrity": "sha512-CvexbZtbov6jW2eXAvLukXjXUW1TzFaivC46BpWc/3BpcCysb5Vffu+B3XHMm8lVEuy2Mm4XGex8hBSg1yapPg==",
-			"hasInstallScript": true,
-			"dependencies": {
-				"@protobufjs/aspromise": "^1.1.2",
-				"@protobufjs/base64": "^1.1.2",
-				"@protobufjs/codegen": "^2.0.4",
-				"@protobufjs/eventemitter": "^1.1.0",
-				"@protobufjs/fetch": "^1.1.0",
-				"@protobufjs/float": "^1.0.2",
-				"@protobufjs/inquire": "^1.1.0",
-				"@protobufjs/path": "^1.1.2",
-				"@protobufjs/pool": "^1.1.0",
-				"@protobufjs/utf8": "^1.1.0",
-				"@types/node": ">=13.7.0",
-				"long": "^5.0.0"
-			},
-			"engines": {
-				"node": ">=12.0.0"
-			}
-		},
 		"node_modules/readdirp": {
 			"version": "4.1.2",
 			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
@@ -1785,6 +2338,11 @@
 				"url": "https://paulmillr.com/funding/"
 			}
 		},
+		"node_modules/robust-predicates": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
+			"integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg=="
+		},
 		"node_modules/rollup": {
 			"version": "4.52.5",
 			"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.52.5.tgz",
@@ -1826,6 +2384,11 @@
 				"fsevents": "~2.3.2"
 			}
 		},
+		"node_modules/rw": {
+			"version": "1.3.3",
+			"resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+			"integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
+		},
 		"node_modules/rxjs": {
 			"version": "7.8.2",
 			"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
@@ -1835,6 +2398,11 @@
 				"tslib": "^2.1.0"
 			}
 		},
+		"node_modules/safer-buffer": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+			"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+		},
 		"node_modules/sass": {
 			"version": "1.93.2",
 			"resolved": "https://registry.npmjs.org/sass/-/sass-1.93.2.tgz",
@@ -2296,7 +2864,10 @@
 		"node_modules/undici-types": {
 			"version": "7.16.0",
 			"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
-			"integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw=="
+			"integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
+			"dev": true,
+			"optional": true,
+			"peer": true
 		},
 		"node_modules/varint": {
 			"version": "6.0.0",

trigo-web/app/package.json

@@ -10,6 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "d3": "^7.9.0",
+    "d3-scale-chromatic": "^3.1.0",
     "pinia": "^2.1.6",
     "socket.io-client": "^4.5.2",
     "three": "^0.156.1",
@@ -18,6 +20,7 @@
     "onnxruntime-web": "^1.23.2"
   },
   "devDependencies": {
+    "@types/d3": "^7.4.3",
     "@types/three": "^0.156.0",
     "@vitejs/plugin-vue": "^5.2.4",
     "sass-embedded": "^1.93.2",

trigo-web/app/src/components/InlineNicknameEditor.vue

@@ -0,0 +1,225 @@
+<template>
+	<div class="inline-nickname-editor" :class="{ editable, editing, [playerColor || 'neutral']: true }">
+		<!-- Display mode -->
+		<div
+			v-if="!editing"
+			class="nickname-display"
+			:title="editable ? 'Click to edit nickname' : ''"
+			@click="startEdit"
+		>
+			<span class="stone-icon" :class="playerColor"></span>
+			<span class="nickname-text">{{ displayNickname }}</span>
+			<span v-if="editable" class="edit-icon">✏️</span>
+		</div>
+
+		<!-- Edit mode -->
+		<div v-else class="nickname-edit">
+			<span class="stone-icon" :class="playerColor"></span>
+			<input
+				ref="inputRef"
+				v-model="editValue"
+				type="text"
+				class="nickname-input"
+				:class="{ error: hasError }"
+				:maxlength="20"
+				:title="inputTooltip"
+				@keydown.enter="confirmEdit"
+				@keydown.esc="cancelEdit"
+				@blur="confirmEdit"
+			/>
+			<span v-if="hasError" class="error-icon" :title="errorMessage">⚠️</span>
+		</div>
+
+		<!-- Character count and help text when editing -->
+		<div v-if="editing" class="edit-info">
+			<span class="help-text">Enter to save • Esc to cancel</span>
+			<span class="char-count">{{ editValue.length }}/20</span>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, nextTick } from "vue";
+
+const props = defineProps<{
+	nickname: string;
+	editable: boolean;
+	playerColor: "black" | "white" | null;
+}>();
+
+const emit = defineEmits<{
+	(e: "update", nickname: string): void;
+}>();
+
+const editing = ref(false);
+const editValue = ref(props.nickname);
+const errorMessage = ref("");
+const inputRef = ref<HTMLInputElement | null>(null);
+
+const displayNickname = computed(() => props.nickname || "Guest");
+const hasError = computed(() => errorMessage.value !== "");
+const inputTooltip = computed(() =>
+	"3-20 characters, letters/numbers/spaces only"
+);
+
+function validateNickname(nickname: string): { valid: boolean; error: string } {
+	const trimmed = nickname.trim();
+
+	if (trimmed.length < 3) return { valid: false, error: "Must be 3+ chars" };
+	if (trimmed.length > 20) return { valid: false, error: "Max 20 chars" };
+	if (!/^[a-zA-Z0-9 ]+$/.test(trimmed)) return { valid: false, error: "Letters, numbers, spaces only" };
+	if (trimmed !== nickname) return { valid: false, error: "No leading/trailing spaces" };
+
+	return { valid: true, error: "" };
+}
+
+function startEdit() {
+	if (!props.editable) return;
+
+	editing.value = true;
+	editValue.value = props.nickname;
+	errorMessage.value = "";
+
+	nextTick(() => {
+		inputRef.value?.focus();
+		inputRef.value?.select();
+	});
+}
+
+function confirmEdit() {
+	if (!editing.value) return;
+
+	const trimmed = editValue.value.trim();
+
+	if (trimmed === props.nickname) {
+		cancelEdit();
+		return;
+	}
+
+	const validation = validateNickname(trimmed);
+	if (!validation.valid) {
+		errorMessage.value = validation.error;
+		return;
+	}
+
+	editing.value = false;
+	errorMessage.value = "";
+	emit("update", trimmed);
+}
+
+function cancelEdit() {
+	editing.value = false;
+	editValue.value = props.nickname;
+	errorMessage.value = "";
+}
+
+watch(
+	() => props.nickname,
+	(newNickname) => {
+		if (!editing.value) {
+			editValue.value = newNickname;
+		}
+	}
+);
+</script>
+
+<style lang="scss" scoped>
+.inline-nickname-editor {
+	display: flex;
+	flex-direction: column;
+	gap: 0.25rem;
+
+	&.editable .nickname-display {
+		cursor: pointer;
+		transition: background-color 0.2s ease;
+
+		&:hover {
+			background-color: rgba(255, 255, 255, 0.05);
+		}
+	}
+
+	.nickname-display,
+	.nickname-edit {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.5rem;
+		border-radius: 6px;
+		background-color: rgba(0, 0, 0, 0.2);
+	}
+
+	.stone-icon {
+		width: 20px;
+		height: 20px;
+		border-radius: 50%;
+		flex-shrink: 0;
+
+		&.black {
+			background-color: #2c2c2c;
+			border: 2px solid #fff;
+		}
+
+		&.white {
+			background-color: #f0f0f0;
+			border: 2px solid #000;
+		}
+	}
+
+	.nickname-text {
+		font-weight: 600;
+		color: #e0e0e0;
+	}
+
+	.edit-icon {
+		opacity: 0;
+		transition: opacity 0.2s ease;
+		font-size: 0.8rem;
+	}
+
+	&.editable:hover .edit-icon {
+		opacity: 0.6;
+	}
+
+	.nickname-input {
+		flex: 1;
+		background-color: rgba(255, 255, 255, 0.1);
+		border: 2px solid #60a5fa;
+		border-radius: 4px;
+		padding: 0.25rem 0.5rem;
+		color: #e0e0e0;
+		font-weight: 600;
+		font-size: 0.95rem;
+		outline: none;
+
+		&.error {
+			border-color: #ef4444;
+		}
+
+		&:focus {
+			background-color: rgba(255, 255, 255, 0.15);
+		}
+	}
+
+	.error-icon {
+		font-size: 1rem;
+		cursor: help;
+	}
+
+	.edit-info {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 0 0.5rem;
+		font-size: 0.75rem;
+	}
+
+	.help-text {
+		color: #60a5fa;
+		font-style: italic;
+	}
+
+	.char-count {
+		color: #9ca3af;
+	}
+}
+</style>

trigo-web/app/src/components/mcts/MCTSBoardHeatmap.vue

@@ -0,0 +1,434 @@
+<template>
+	<div class="board-heatmap">
+		<div v-if="!hasData" class="no-data">
+			<p>No data loaded. Please upload files to begin.</p>
+		</div>
+
+		<div v-else class="heatmap-wrapper">
+			<!-- SVG Board -->
+			<svg
+				:width="svgWidth"
+				:height="svgHeight"
+				@mouseleave="onMouseLeave"
+				class="board-svg"
+			>
+				<!-- Grid lines -->
+				<g class="grid-lines">
+					<!-- Vertical lines -->
+					<line
+						v-for="i in shape.x + 1"
+						:key="'v' + i"
+						:x1="(i - 1) * cellSize + margin"
+						:y1="margin"
+						:x2="(i - 1) * cellSize + margin"
+						:y2="boardHeight + margin"
+						stroke="#505050"
+						stroke-width="1"
+					/>
+					<!-- Horizontal lines -->
+					<line
+						v-for="j in shape.y + 1"
+						:key="'h' + j"
+						:x1="margin"
+						:y1="(j - 1) * cellSize + margin"
+						:x2="boardWidth + margin"
+						:y2="(j - 1) * cellSize + margin"
+						stroke="#505050"
+						stroke-width="1"
+					/>
+				</g>
+
+				<!-- Heatmap cells -->
+				<g class="heatmap-cells">
+					<rect
+						v-for="stat in statistics"
+						:key="stat.actionKey"
+						v-show="stat.position"
+						:x="stat.position ? stat.position.x * cellSize + margin : 0"
+						:y="stat.position ? stat.position.y * cellSize + margin : 0"
+						:width="cellSize"
+						:height="cellSize"
+						:fill="getColor(stat)"
+						:opacity="0.7"
+						:class="{ selected: isSelected(stat.actionKey) }"
+						@mouseenter="onCellHover(stat)"
+						@click="onCellClick(stat)"
+						class="heatmap-cell"
+					/>
+				</g>
+
+				<!-- Stones (current game state) -->
+				<g class="stones">
+					<circle
+						v-for="(stone, idx) in currentStones"
+						:key="idx"
+						:cx="(stone.x + 0.5) * cellSize + margin"
+						:cy="(stone.y + 0.5) * cellSize + margin"
+						:r="cellSize * 0.35"
+						:fill="stone.color === 1 ? '#070707' : '#f0f0f0'"
+						:stroke="stone.color === 1 ? '#202020' : '#d0d0d0'"
+						stroke-width="1"
+						class="stone"
+					/>
+				</g>
+
+				<!-- Last move marker -->
+				<g class="last-move-marker" v-if="lastMovePosition">
+					<circle
+						:cx="(lastMovePosition.x + 0.5) * cellSize + margin"
+						:cy="(lastMovePosition.y + 0.5) * cellSize + margin"
+						:r="cellSize * 0.15"
+						fill="#e94560"
+						class="last-move-circle"
+					/>
+				</g>
+
+				<!-- Coordinate labels -->
+				<g class="coord-labels">
+					<!-- Column labels (A, B, C...) -->
+					<text
+						v-for="i in shape.x"
+						:key="'col-' + i"
+						:x="(i - 0.5) * cellSize + margin"
+						:y="svgHeight - margin / 3"
+						text-anchor="middle"
+						class="coord-label"
+					>
+						{{ String.fromCharCode(64 + i) }}
+					</text>
+					<!-- Row labels (1, 2, 3...) -->
+					<text
+						v-for="j in shape.y"
+						:key="'row-' + j"
+						:x="margin / 3"
+						:y="(j - 0.5) * cellSize + margin"
+						text-anchor="middle"
+						dominant-baseline="middle"
+						class="coord-label"
+					>
+						{{ j }}
+					</text>
+				</g>
+			</svg>
+
+			<!-- Legend -->
+			<div class="legend">
+				<div class="legend-title">{{ legendTitle }}</div>
+				<div class="legend-gradient">
+					<div
+						v-for="stop in legendStops"
+						:key="stop.value"
+						:style="{ backgroundColor: stop.color }"
+						class="legend-stop"
+					></div>
+				</div>
+				<div class="legend-labels">
+					<span class="legend-label-min">{{ minLabel }}</span>
+					<span class="legend-label-max">{{ maxLabel }}</span>
+				</div>
+			</div>
+
+			<!-- Tooltip -->
+			<div
+				v-if="hoveredCell"
+				class="tooltip"
+				:style="{ left: tooltipX + 'px', top: tooltipY + 'px' }"
+			>
+				<div class="tooltip-position">{{ formatPosition(hoveredCell.position) }}</div>
+				<div class="tooltip-stat">N: {{ hoveredCell.N }}</div>
+				<div class="tooltip-stat">π: {{ (hoveredCell.pi * 100).toFixed(2) }}%</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import { useMCTSStore } from "@/stores/mctsStore";
+import type { MCTSMoveStatistic } from "@/types/mcts";
+import { getColorForStatistic, generateLegendStops, getStatisticLabel } from "@/utils/mctsColorScale";
+import { formatPosition } from "@/utils/mctsDataParser";
+import { StepType } from "../../../../inc/trigo/game";
+
+const mctsStore = useMCTSStore();
+
+// Constants
+const cellSize = 50;
+const margin = 40;
+
+// Computed
+const hasData = computed(() => mctsStore.hasData);
+
+const currentMoveData = computed(() => mctsStore.currentMoveData);
+
+const statistics = computed(() => mctsStore.currentStatistics);
+
+const shape = computed(() => {
+	if (!currentMoveData.value) return { x: 5, y: 5, z: 1 };
+	return currentMoveData.value.gameState.getShape();
+});
+
+const boardWidth = computed(() => shape.value.x * cellSize);
+const boardHeight = computed(() => shape.value.y * cellSize);
+const svgWidth = computed(() => boardWidth.value + margin * 2);
+const svgHeight = computed(() => boardHeight.value + margin * 2);
+
+const currentStones = computed(() => {
+	if (!currentMoveData.value) return [];
+
+	const board = currentMoveData.value.gameState.getBoard();
+	const stones: Array<{ x: number; y: number; color: number }> = [];
+
+	for (let x = 0; x < shape.value.x; x++) {
+		for (let y = 0; y < shape.value.y; y++) {
+			const color = board[x][y][0]; // z=0 for 2D boards
+			if (color !== 0) {
+				stones.push({ x, y, color });
+			}
+		}
+	}
+
+	return stones;
+});
+
+// Get last move position for highlighting
+const lastMovePosition = computed(() => {
+	if (!currentMoveData.value || currentMoveData.value.moveNumber === 0) return null;
+
+	const history = currentMoveData.value.gameState.getHistory();
+	if (history.length === 0) return null;
+
+	const lastMove = history[history.length - 1];
+
+	// Skip pass moves or moves without position
+	if (lastMove.type !== StepType.DROP || !lastMove.position) return null;
+
+	// Return position for 2D boards (z=0)
+	return {
+		x: lastMove.position.x,
+		y: lastMove.position.y,
+		z: 0
+	};
+});
+
+// Color scale
+const minValue = computed(() => {
+	if (statistics.value.length === 0) return 0;
+	const values = statistics.value.map((s) => {
+		return mctsStore.selectedStatistic === "N" ? s.N : s.pi;
+	});
+	return Math.min(...values);
+});
+
+const maxValue = computed(() => {
+	if (statistics.value.length === 0) return 1;
+	const values = statistics.value.map((s) => {
+		return mctsStore.selectedStatistic === "N" ? s.N : s.pi;
+	});
+	return Math.max(...values);
+});
+
+// Legend
+const legendTitle = computed(() => getStatisticLabel(mctsStore.selectedStatistic));
+
+const legendStops = computed(() => {
+	return generateLegendStops(mctsStore.selectedStatistic, minValue.value, maxValue.value, 5);
+});
+
+const minLabel = computed(() => {
+	if (mctsStore.selectedStatistic === "pi") {
+		return `${(minValue.value * 100).toFixed(1)}%`;
+	}
+	return Math.round(minValue.value).toString();
+});
+
+const maxLabel = computed(() => {
+	if (mctsStore.selectedStatistic === "pi") {
+		return `${(maxValue.value * 100).toFixed(1)}%`;
+	}
+	return Math.round(maxValue.value).toString();
+});
+
+// Hover state
+const hoveredCell = ref<MCTSMoveStatistic | null>(null);
+const tooltipX = ref(0);
+const tooltipY = ref(0);
+
+// Functions
+function getColor(stat: MCTSMoveStatistic): string {
+	const value = mctsStore.selectedStatistic === "N" ? stat.N : stat.pi;
+	return getColorForStatistic(
+		value,
+		mctsStore.selectedStatistic,
+		minValue.value,
+		maxValue.value,
+		mctsStore.colorScale
+	);
+}
+
+function isSelected(actionKey: string): boolean {
+	return mctsStore.selectedActionKey === actionKey;
+}
+
+function onCellHover(stat: MCTSMoveStatistic) {
+	hoveredCell.value = stat;
+	// Tooltip position will be updated via mouse position
+}
+
+function onCellClick(stat: MCTSMoveStatistic) {
+	mctsStore.selectAction(stat.actionKey);
+}
+
+function onMouseLeave() {
+	hoveredCell.value = null;
+}
+
+// Track mouse position for tooltip
+function onMouseMove(event: MouseEvent) {
+	tooltipX.value = event.clientX + 10;
+	tooltipY.value = event.clientY + 10;
+}
+
+// Set up mouse tracking
+if (typeof window !== "undefined") {
+	window.addEventListener("mousemove", onMouseMove);
+}
+</script>
+
+<style scoped lang="scss">
+.board-heatmap {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+
+.no-data {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 100%;
+	color: #606060;
+	font-size: 14px;
+}
+
+.heatmap-wrapper {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 20px;
+	max-width: 100%;
+	max-height: 100%;
+}
+
+.board-svg {
+	border-radius: 4px;
+}
+
+.heatmap-cell {
+	cursor: pointer;
+	transition: opacity 0.2s;
+
+	&:hover {
+		opacity: 0.9 !important;
+		stroke: #4a90e2;
+		stroke-width: 2;
+	}
+
+	&.selected {
+		stroke: #e94560;
+		stroke-width: 3;
+	}
+}
+
+.stone {
+	pointer-events: none;
+}
+
+.last-move-circle {
+	pointer-events: none;
+	animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse {
+	0%, 100% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0.4;
+	}
+}
+
+.coord-label {
+	fill: #808080;
+	font-size: 11px;
+	user-select: none;
+}
+
+/* ============================================================================
+   Legend
+   ============================================================================ */
+
+.legend {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	width: 300px;
+}
+
+.legend-title {
+	font-size: 13px;
+	font-weight: 500;
+	color: #c0c0c0;
+	text-align: center;
+}
+
+.legend-gradient {
+	display: flex;
+	height: 20px;
+	border-radius: 3px;
+	overflow: hidden;
+	border: 1px solid #404040;
+}
+
+.legend-stop {
+	flex: 1;
+}
+
+.legend-labels {
+	display: flex;
+	justify-content: space-between;
+	font-size: 11px;
+	color: #808080;
+}
+
+/* ============================================================================
+   Tooltip
+   ============================================================================ */
+
+.tooltip {
+	position: fixed;
+	background-color: rgba(0, 0, 0, 0.9);
+	border: 1px solid #4a90e2;
+	border-radius: 4px;
+	padding: 8px 12px;
+	font-size: 12px;
+	color: #e0e0e0;
+	pointer-events: none;
+	z-index: 1000;
+	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+}
+
+.tooltip-position {
+	font-weight: 600;
+	color: #4a90e2;
+	margin-bottom: 4px;
+}
+
+.tooltip-stat {
+	color: #c0c0c0;
+	line-height: 1.4;
+}
+</style>

trigo-web/app/src/components/mcts/MCTSDataLoader.vue

@@ -0,0 +1,283 @@
+<template>
+	<div class="mcts-data-loader">
+		<div class="file-inputs">
+			<!-- TGN File Input -->
+			<div class="file-input-group">
+				<label for="tgn-file" class="file-label">
+					TGN Game File
+					<span class="file-status" :class="{ ready: tgnFile }">
+						{{ tgnFile ? `✓ ${tgnFile.name}` : "Not selected" }}
+					</span>
+				</label>
+				<input
+					id="tgn-file"
+					type="file"
+					accept=".tgn"
+					@change="onTGNFileChange"
+					class="file-input"
+				/>
+			</div>
+
+			<!-- Visit Counts JSON Input -->
+			<div class="file-input-group">
+				<label for="json-file" class="file-label">
+					Visit Counts JSON
+					<span class="file-status" :class="{ ready: jsonFile }">
+						{{ jsonFile ? `✓ ${jsonFile.name}` : "Not selected" }}
+					</span>
+				</label>
+				<input
+					id="json-file"
+					type="file"
+					accept=".json"
+					@change="onJSONFileChange"
+					class="file-input"
+				/>
+			</div>
+		</div>
+
+		<!-- Load Button -->
+		<button
+			@click="loadData"
+			:disabled="!canLoad || loading"
+			class="btn-load"
+			:class="{ loading }"
+		>
+			{{ loading ? "Loading..." : "Load Data" }}
+		</button>
+
+		<!-- Status Messages -->
+		<div v-if="loading" class="status-message loading">
+			<div class="spinner"></div>
+			<span>Parsing data...</span>
+		</div>
+
+		<div v-if="error" class="status-message error">
+			<strong>Error:</strong> {{ error }}
+		</div>
+
+		<div v-if="success" class="status-message success">
+			<strong>Success:</strong> Loaded {{ movesCount }} moves from a {{ boardShape }} board
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { useMCTSStore } from "@/stores/mctsStore";
+import { parseMCTSData } from "@/utils/mctsDataParser";
+
+const mctsStore = useMCTSStore();
+
+// File state
+const tgnFile = ref<File | null>(null);
+const jsonFile = ref<File | null>(null);
+
+// Loading state
+const loading = ref(false);
+const error = ref<string | null>(null);
+const success = ref(false);
+
+// Success data
+const movesCount = ref(0);
+const boardShape = ref("");
+
+// Computed
+const canLoad = computed(() => tgnFile.value !== null && jsonFile.value !== null);
+
+// Handlers
+function onTGNFileChange(event: Event) {
+	const target = event.target as HTMLInputElement;
+	tgnFile.value = target.files?.[0] || null;
+	clearMessages();
+}
+
+function onJSONFileChange(event: Event) {
+	const target = event.target as HTMLInputElement;
+	jsonFile.value = target.files?.[0] || null;
+	clearMessages();
+}
+
+function clearMessages() {
+	error.value = null;
+	success.value = false;
+}
+
+async function loadData() {
+	if (!canLoad.value) return;
+
+	loading.value = true;
+	clearMessages();
+
+	try {
+		// Read files
+		const tgnContent = await tgnFile.value!.text();
+		const jsonContent = await jsonFile.value!.text();
+
+		// Parse data
+		const data = await parseMCTSData(tgnContent, jsonContent);
+
+		// Store data
+		mctsStore.setGameHistory(data);
+
+		// Show success
+		success.value = true;
+		movesCount.value = data.length;
+		const shape = data[0].gameState.getShape();
+		boardShape.value = `${shape.x}×${shape.y}×${shape.z}`;
+
+		console.log(`[MCTS Loader] Successfully loaded ${data.length} moves`);
+	} catch (err) {
+		error.value = err instanceof Error ? err.message : String(err);
+		console.error("[MCTS Loader] Error loading data:", err);
+	} finally {
+		loading.value = false;
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.mcts-data-loader {
+	display: flex;
+	flex-direction: column;
+	gap: 15px;
+}
+
+.file-inputs {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+.file-input-group {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+
+.file-label {
+	font-size: 13px;
+	font-weight: 500;
+	color: #c0c0c0;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.file-status {
+	font-size: 11px;
+	color: #808080;
+	font-weight: normal;
+
+	&.ready {
+		color: #4a90e2;
+	}
+}
+
+.file-input {
+	padding: 8px;
+	background-color: #1a1a1a;
+	border: 1px solid #404040;
+	border-radius: 4px;
+	color: #e0e0e0;
+	font-size: 13px;
+	cursor: pointer;
+
+	&:hover {
+		border-color: #4a90e2;
+	}
+
+	&:focus {
+		outline: none;
+		border-color: #4a90e2;
+	}
+
+	&::file-selector-button {
+		padding: 6px 12px;
+		background-color: #2a2a2a;
+		border: 1px solid #404040;
+		border-radius: 3px;
+		color: #e0e0e0;
+		font-size: 12px;
+		cursor: pointer;
+		margin-right: 10px;
+
+		&:hover {
+			background-color: #3a3a3a;
+			border-color: #4a90e2;
+		}
+	}
+}
+
+.btn-load {
+	padding: 12px 20px;
+	background-color: #4a90e2;
+	border: none;
+	border-radius: 4px;
+	color: #ffffff;
+	font-size: 14px;
+	font-weight: 500;
+	cursor: pointer;
+	transition: background-color 0.2s, opacity 0.2s;
+
+	&:hover:not(:disabled) {
+		background-color: #357abd;
+	}
+
+	&:active:not(:disabled) {
+		background-color: #2a6ba8;
+	}
+
+	&:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	&.loading {
+		opacity: 0.7;
+	}
+}
+
+.status-message {
+	padding: 10px;
+	border-radius: 4px;
+	font-size: 13px;
+	display: flex;
+	align-items: center;
+	gap: 10px;
+
+	&.loading {
+		background-color: #2a3a4a;
+		color: #4a90e2;
+	}
+
+	&.error {
+		background-color: #4a2a2a;
+		color: #ff6b6b;
+	}
+
+	&.success {
+		background-color: #2a4a2a;
+		color: #6bff6b;
+	}
+
+	strong {
+		font-weight: 600;
+	}
+}
+
+.spinner {
+	width: 16px;
+	height: 16px;
+	border: 2px solid #4a90e2;
+	border-top-color: transparent;
+	border-radius: 50%;
+	animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+	to {
+		transform: rotate(360deg);
+	}
+}
+</style>

trigo-web/app/src/components/mcts/MCTSMoveNavigation.vue

@@ -0,0 +1,148 @@
+<template>
+	<div class="mcts-move-navigation">
+		<div class="nav-buttons">
+			<button @click="mctsStore.firstMove()" :disabled="isFirst" class="nav-btn">⏮ First</button>
+			<button @click="mctsStore.prevMove()" :disabled="isFirst" class="nav-btn">◀ Prev</button>
+			<button @click="mctsStore.nextMove()" :disabled="isLast" class="nav-btn">Next ▶</button>
+			<button @click="mctsStore.lastMove()" :disabled="isLast" class="nav-btn">Last ⏭</button>
+		</div>
+
+		<div class="move-slider">
+			<input
+				type="range"
+				:min="0"
+				:max="maxMove"
+				:value="currentMove"
+				@input="onSliderChange"
+				class="slider"
+			/>
+			<span class="move-label">Move {{ currentMove + 1 }} / {{ maxMove + 1 }}</span>
+		</div>
+
+		<div class="move-info">
+			<span>Player: <strong>{{ currentPlayer }}</strong></span>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useMCTSStore } from "@/stores/mctsStore";
+
+const mctsStore = useMCTSStore();
+
+const currentMove = computed(() => mctsStore.currentMoveIndex);
+const maxMove = computed(() => mctsStore.maxMoveIndex);
+const isFirst = computed(() => currentMove.value === 0);
+const isLast = computed(() => currentMove.value === maxMove.value);
+
+const currentPlayer = computed(() => {
+	const moveData = mctsStore.currentMoveData;
+	return moveData ? moveData.player : "-";
+});
+
+function onSliderChange(event: Event) {
+	const target = event.target as HTMLInputElement;
+	mctsStore.setCurrentMoveIndex(parseInt(target.value, 10));
+}
+</script>
+
+<style scoped lang="scss">
+.mcts-move-navigation {
+	display: flex;
+	flex-direction: column;
+	gap: 15px;
+}
+
+.nav-buttons {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 8px;
+}
+
+.nav-btn {
+	padding: 8px 12px;
+	background-color: #3a3a3a;
+	border: 1px solid #505050;
+	border-radius: 4px;
+	color: #e0e0e0;
+	font-size: 12px;
+	cursor: pointer;
+	transition: all 0.2s;
+
+	&:hover:not(:disabled) {
+		background-color: #4a4a4a;
+		border-color: #4a90e2;
+	}
+
+	&:active:not(:disabled) {
+		background-color: #2a2a2a;
+	}
+
+	&:disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
+}
+
+.move-slider {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.slider {
+	width: 100%;
+	height: 6px;
+	border-radius: 3px;
+	background-color: #3a3a3a;
+	outline: none;
+	-webkit-appearance: none;
+
+	&::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		appearance: none;
+		width: 16px;
+		height: 16px;
+		border-radius: 50%;
+		background-color: #4a90e2;
+		cursor: pointer;
+
+		&:hover {
+			background-color: #357abd;
+		}
+	}
+
+	&::-moz-range-thumb {
+		width: 16px;
+		height: 16px;
+		border-radius: 50%;
+		background-color: #4a90e2;
+		cursor: pointer;
+		border: none;
+
+		&:hover {
+			background-color: #357abd;
+		}
+	}
+}
+
+.move-label {
+	font-size: 13px;
+	color: #c0c0c0;
+	text-align: center;
+}
+
+.move-info {
+	padding: 8px;
+	background-color: #1a1a1a;
+	border-radius: 4px;
+	font-size: 12px;
+	color: #a0a0a0;
+
+	strong {
+		color: #e0e0e0;
+		text-transform: capitalize;
+	}
+}
+</style>

trigo-web/app/src/components/mcts/MCTSStatisticsPanel.vue

@@ -0,0 +1,221 @@
+<template>
+	<div class="mcts-statistics-panel">
+		<div v-if="!hasData" class="no-data">No data</div>
+
+		<div v-else class="stats-content">
+			<div class="stats-summary">
+				<div class="stat-item">
+					<span class="stat-label">Total visits:</span>
+					<span class="stat-value">{{ totalVisits }}</span>
+				</div>
+			</div>
+
+			<div class="stats-options">
+				<label class="option-label">Display:</label>
+				<div class="radio-group">
+					<label class="radio-option">
+						<input
+							type="radio"
+							value="N"
+							:checked="selectedStat === 'N'"
+							@change="onStatChange"
+						/>
+						<span>Visit Count (N)</span>
+					</label>
+					<label class="radio-option">
+						<input
+							type="radio"
+							value="pi"
+							:checked="selectedStat === 'pi'"
+							@change="onStatChange"
+						/>
+						<span>Policy (π)</span>
+					</label>
+				</div>
+			</div>
+
+			<div class="top-moves-table">
+				<table>
+					<thead>
+						<tr>
+							<th>#</th>
+							<th>Pos</th>
+							<th>N</th>
+							<th>%</th>
+							<th>π</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr
+							v-for="(move, idx) in topMoves"
+							:key="move.actionKey"
+							:class="{ selected: isSelected(move.actionKey) }"
+							@click="onMoveClick(move.actionKey)"
+							class="move-row"
+						>
+							<td>{{ idx + 1 }}</td>
+							<td>{{ formatPosition(move.position) }}</td>
+							<td>{{ move.N }}</td>
+							<td>{{ ((move.N / totalVisits) * 100).toFixed(1) }}%</td>
+							<td>{{ move.pi.toFixed(3) }}</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useMCTSStore } from "@/stores/mctsStore";
+import { formatPosition } from "@/utils/mctsDataParser";
+import type { MCTSStatisticType } from "@/types/mcts";
+
+const mctsStore = useMCTSStore();
+
+const hasData = computed(() => mctsStore.hasData);
+const totalVisits = computed(() => mctsStore.totalVisits);
+const topMoves = computed(() => mctsStore.topMoves);
+const selectedStat = computed(() => mctsStore.selectedStatistic);
+
+function isSelected(actionKey: string): boolean {
+	return mctsStore.selectedActionKey === actionKey;
+}
+
+function onMoveClick(actionKey: string) {
+	mctsStore.selectAction(actionKey);
+}
+
+function onStatChange(event: Event) {
+	const target = event.target as HTMLInputElement;
+	mctsStore.setSelectedStatistic(target.value as MCTSStatisticType);
+}
+</script>
+
+<style scoped lang="scss">
+.mcts-statistics-panel {
+	display: flex;
+	flex-direction: column;
+}
+
+.no-data {
+	text-align: center;
+	color: #606060;
+	font-size: 12px;
+	padding: 20px;
+}
+
+.stats-content {
+	display: flex;
+	flex-direction: column;
+	gap: 15px;
+}
+
+.stats-summary {
+	padding: 10px;
+	background-color: #1a1a1a;
+	border-radius: 4px;
+}
+
+.stat-item {
+	display: flex;
+	justify-content: space-between;
+	font-size: 13px;
+}
+
+.stat-label {
+	color: #a0a0a0;
+}
+
+.stat-value {
+	color: #e0e0e0;
+	font-weight: 500;
+}
+
+.stats-options {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.option-label {
+	font-size: 12px;
+	color: #a0a0a0;
+	font-weight: 500;
+}
+
+.radio-group {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+
+.radio-option {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	font-size: 12px;
+	color: #c0c0c0;
+	cursor: pointer;
+
+	input[type="radio"] {
+		cursor: pointer;
+	}
+}
+
+.top-moves-table {
+	max-height: 300px;
+
+	table {
+		width: 100%;
+		border-collapse: collapse;
+		font-size: 12px;
+
+		thead {
+			position: sticky;
+			top: 0;
+			background-color: #2a2a2a;
+			z-index: 1;
+
+			th {
+				padding: 8px 6px;
+				text-align: left;
+				color: #4a90e2;
+				font-weight: 600;
+				border-bottom: 1px solid #404040;
+			}
+		}
+
+		tbody {
+			tr {
+				cursor: pointer;
+				transition: background-color 0.2s;
+
+				&:hover {
+					background-color: #3a3a3a;
+				}
+
+				&.selected {
+					background-color: #4a3030;
+
+					td {
+						color: #e94560;
+						font-weight: 500;
+					}
+				}
+
+				td {
+					padding: 8px 6px;
+					color: #c0c0c0;
+					border-bottom: 1px solid #303030;
+
+					&:first-child {
+						color: #808080;
+					}
+				}
+			}
+		}
+	}
+}
+</style>

trigo-web/app/src/components/mcts/MCTSTreeVisualization.vue

@@ -0,0 +1,407 @@
+<template>
+	<div class="tree-visualization">
+		<div v-if="!hasData" class="no-data">
+			<p>No data loaded. Please upload files to begin.</p>
+			<p class="note">Note: Only root-level statistics available from saved data</p>
+		</div>
+
+		<div v-else class="tree-content">
+			<svg
+				:width="svgWidth"
+				:height="svgHeight"
+				:viewBox="`0 0 ${svgWidth} ${svgHeight}`"
+				preserveAspectRatio="xMidYMid meet"
+				class="tree-svg"
+				ref="svgRef"
+			>
+				<g :transform="`translate(${centerX}, ${rootY})`">
+					<!-- Root node -->
+					<g class="root-node">
+						<circle
+							:r="rootRadius"
+							fill="#4a90e2"
+							stroke="#357abd"
+							stroke-width="2"
+							class="node-circle"
+						/>
+						<text y="5" text-anchor="middle" class="node-label">Root</text>
+						<text y="20" text-anchor="middle" class="node-value">
+							{{ totalVisits }} visits
+						</text>
+					</g>
+
+					<!-- Links to children -->
+					<g class="links">
+						<path
+							v-for="(child, idx) in visibleChildren"
+							:key="child.actionKey"
+							:d="getLinkPath(idx)"
+							:stroke="getChildColor(child)"
+							:stroke-width="getStrokeWidth(child)"
+							fill="none"
+							opacity="0.6"
+							class="tree-link"
+						/>
+					</g>
+
+					<!-- Child nodes -->
+					<g class="child-nodes">
+						<g
+							v-for="(child, idx) in visibleChildren"
+							:key="child.actionKey"
+							:transform="getChildTransform(idx)"
+							@mouseenter="onChildHover(child)"
+							@mouseleave="onChildLeave"
+							@click="onChildClick(child)"
+							class="child-node"
+							:class="{ selected: isSelected(child.actionKey) }"
+						>
+							<circle
+								:r="getChildRadius(child)"
+								:fill="getChildColor(child)"
+								:stroke="isSelected(child.actionKey) ? '#e94560' : '#2a2a2a'"
+								:stroke-width="isSelected(child.actionKey) ? 3 : 1"
+								class="node-circle"
+							/>
+							<text y="-15" text-anchor="middle" class="node-label">
+								{{ formatPosition(child.position) }}
+							</text>
+							<text y="0" text-anchor="middle" class="node-value">
+								{{ child.N }}
+							</text>
+							<text y="12" text-anchor="middle" class="node-percent">
+								{{ (child.pi * 100).toFixed(1) }}%
+							</text>
+						</g>
+					</g>
+				</g>
+			</svg>
+
+			<!-- Settings -->
+			<div class="tree-settings">
+				<label class="setting-label">
+					Show top:
+					<input
+						type="range"
+						min="5"
+						max="20"
+						:value="topN"
+						@input="onTopNChange"
+						class="setting-slider"
+					/>
+					<span class="setting-value">{{ topN }} moves</span>
+				</label>
+			</div>
+
+			<!-- Tooltip -->
+			<div
+				v-if="hoveredChild"
+				class="tooltip"
+				:style="{ left: tooltipX + 'px', top: tooltipY + 'px' }"
+			>
+				<div class="tooltip-pos">{{ formatPosition(hoveredChild.position) }}</div>
+				<div class="tooltip-line">Visit count: {{ hoveredChild.N }}</div>
+				<div class="tooltip-line">
+					Percentage: {{ ((hoveredChild.N / totalVisits) * 100).toFixed(1) }}%
+				</div>
+				<div class="tooltip-line">Policy π: {{ hoveredChild.pi.toFixed(3) }}</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { useMCTSStore } from "@/stores/mctsStore";
+import type { MCTSMoveStatistic } from "@/types/mcts";
+import { formatPosition } from "@/utils/mctsDataParser";
+import { getColorForStatistic } from "@/utils/mctsColorScale";
+
+const mctsStore = useMCTSStore();
+
+// Layout constants
+const rootRadius = 30;
+const rootY = 50; // Root node Y position
+const childY = 150; // Child nodes Y position
+const padding = 20; // Padding around content
+
+// Settings
+const topN = ref(10);
+
+// Computed
+const hasData = computed(() => mctsStore.hasData);
+const totalVisits = computed(() => mctsStore.totalVisits);
+const currentStatistics = computed(() => mctsStore.currentStatistics);
+
+const visibleChildren = computed(() => {
+	return currentStatistics.value
+		.filter((stat: MCTSMoveStatistic) => stat.position !== null) // Exclude pass for tree view
+		.sort((a: MCTSMoveStatistic, b: MCTSMoveStatistic) => b.N - a.N)
+		.slice(0, topN.value);
+});
+
+// Calculate max child radius for accurate bounds
+const maxChildRadius = computed(() => {
+	if (visibleChildren.value.length === 0) return 15;
+	const maxN = Math.max(...visibleChildren.value.map((c: MCTSMoveStatistic) => c.N));
+	const minRadius = 15;
+	const maxRadius = 35;
+	return maxRadius; // Use max possible radius for bounds calculation
+});
+
+// Calculate horizontal spread
+const horizontalSpread = computed(() => {
+	const count = visibleChildren.value.length;
+	if (count === 0) return 100;
+	return Math.min(count * 80, 800);
+});
+
+// Calculate SVG dimensions based on content
+const svgWidth = computed(() => {
+	const calculatedWidth = horizontalSpread.value + padding * 2 + maxChildRadius.value * 2;
+	return Math.max(calculatedWidth, 300); // Minimum width of 300px
+});
+
+const svgHeight = computed(() => {
+	// Root at rootY with rootRadius, children at childY with maxChildRadius
+	const calculatedHeight = childY + maxChildRadius.value + padding * 2;
+	return Math.max(calculatedHeight, 250); // Minimum height of 250px
+});
+
+const centerX = computed(() => svgWidth.value / 2);
+
+// Hover state
+const hoveredChild = ref<MCTSMoveStatistic | null>(null);
+const tooltipX = ref(0);
+const tooltipY = ref(0);
+
+// Functions
+function getChildTransform(index: number): string {
+	const count = visibleChildren.value.length;
+	const spread = horizontalSpread.value;
+	const startX = -spread / 2;
+	const x = startX + (spread / (count - 1 || 1)) * index;
+	return `translate(${x}, ${childY})`;
+}
+
+function getLinkPath(index: number): string {
+	const count = visibleChildren.value.length;
+	const spread = horizontalSpread.value;
+	const startX = -spread / 2;
+	const x = startX + (spread / (count - 1 || 1)) * index;
+
+	// Curved path from root to child
+	return `M 0,${rootRadius} Q 0,${childY / 2} ${x},${childY - getChildRadius(visibleChildren.value[index])}`;
+}
+
+function getChildRadius(child: MCTSMoveStatistic): number {
+	// Size based on visit count
+	const maxN = Math.max(...visibleChildren.value.map((c: MCTSMoveStatistic) => c.N));
+	const minRadius = 15;
+	const maxRadius = 35;
+	return minRadius + ((child.N / maxN) * (maxRadius - minRadius));
+}
+
+function getChildColor(child: MCTSMoveStatistic): string {
+	const maxN = Math.max(...visibleChildren.value.map((c: MCTSMoveStatistic) => c.N));
+	return getColorForStatistic(child.N, "N", 0, maxN, mctsStore.colorScale);
+}
+
+function getStrokeWidth(child: MCTSMoveStatistic): number {
+	// Thicker lines for more visited nodes
+	const maxN = Math.max(...visibleChildren.value.map((c: MCTSMoveStatistic) => c.N));
+	return 1 + (child.N / maxN) * 4;
+}
+
+function isSelected(actionKey: string): boolean {
+	return mctsStore.selectedActionKey === actionKey;
+}
+
+function onChildHover(child: MCTSMoveStatistic) {
+	hoveredChild.value = child;
+}
+
+function onChildLeave() {
+	hoveredChild.value = null;
+}
+
+function onChildClick(child: MCTSMoveStatistic) {
+	mctsStore.selectAction(child.actionKey);
+}
+
+function onTopNChange(event: Event) {
+	const target = event.target as HTMLInputElement;
+	topN.value = parseInt(target.value, 10);
+	mctsStore.setTopNFilter(topN.value);
+}
+
+// Track mouse for tooltip
+function onMouseMove(event: MouseEvent) {
+	tooltipX.value = event.clientX + 10;
+	tooltipY.value = event.clientY + 10;
+}
+
+if (typeof window !== "undefined") {
+	window.addEventListener("mousemove", onMouseMove);
+}
+</script>
+
+<style scoped lang="scss">
+.tree-visualization {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: flex-start;
+}
+
+.no-data {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	height: 100%;
+	gap: 10px;
+
+	p {
+		color: #606060;
+		font-size: 14px;
+		margin: 0;
+	}
+
+	.note {
+		font-size: 11px;
+		color: #808080;
+		font-style: italic;
+	}
+}
+
+.tree-content {
+	display: flex;
+	flex-direction: column;
+	gap: 15px;
+	width: 100%;
+	align-items: center;
+	justify-content: flex-start;
+}
+
+.tree-svg {
+	display: block;
+	max-width: 100%;
+	height: auto;
+}
+
+.node-circle {
+	cursor: pointer;
+	transition: all 0.2s;
+}
+
+.child-node {
+	cursor: pointer;
+
+	&:hover .node-circle {
+		filter: brightness(1.2);
+	}
+
+	&.selected .node-circle {
+		filter: brightness(1.3);
+	}
+}
+
+.node-label {
+	fill: #e0e0e0;
+	font-size: 11px;
+	font-weight: 600;
+	pointer-events: none;
+}
+
+.node-value {
+	fill: #e0e0e0;
+	font-size: 10px;
+	pointer-events: none;
+}
+
+.node-percent {
+	fill: #a0a0a0;
+	font-size: 9px;
+	pointer-events: none;
+}
+
+.tree-link {
+	pointer-events: none;
+}
+
+/* Tree Settings */
+.tree-settings {
+	padding: 10px 15px;
+	background-color: #1a1a1a;
+	border-radius: 4px;
+	display: flex;
+	justify-content: center;
+}
+
+.setting-label {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	font-size: 12px;
+	color: #c0c0c0;
+}
+
+.setting-slider {
+	width: 150px;
+	height: 4px;
+	border-radius: 2px;
+	background-color: #3a3a3a;
+	outline: none;
+	-webkit-appearance: none;
+
+	&::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		width: 12px;
+		height: 12px;
+		border-radius: 50%;
+		background-color: #4a90e2;
+		cursor: pointer;
+	}
+
+	&::-moz-range-thumb {
+		width: 12px;
+		height: 12px;
+		border-radius: 50%;
+		background-color: #4a90e2;
+		cursor: pointer;
+		border: none;
+	}
+}
+
+.setting-value {
+	font-weight: 500;
+	color: #e0e0e0;
+}
+
+/* Tooltip */
+.tooltip {
+	position: fixed;
+	background-color: rgba(0, 0, 0, 0.9);
+	border: 1px solid #4a90e2;
+	border-radius: 4px;
+	padding: 8px 12px;
+	font-size: 11px;
+	color: #e0e0e0;
+	pointer-events: none;
+	z-index: 1000;
+	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+}
+
+.tooltip-pos {
+	font-weight: 600;
+	color: #4a90e2;
+	margin-bottom: 4px;
+}
+
+.tooltip-line {
+	color: #c0c0c0;
+	line-height: 1.4;
+}
+</style>

trigo-web/app/src/composables/useRoomHash.ts

@@ -0,0 +1,55 @@
+/**
+ * Composable for managing room ID in URL hash
+ * Enables shareable room links for VS People multiplayer mode
+ */
+
+export function useRoomHash() {
+	/**
+	 * Extract room ID from URL hash
+	 * @returns Room ID string or null if no hash present
+	 */
+	function getRoomIdFromHash(): string | null {
+		const hash = window.location.hash.substring(1); // Remove '#' prefix
+		return hash || null;
+	}
+
+
+	/**
+	 * Update URL hash with room ID
+	 * Uses replaceState to avoid adding browser history entry
+	 * @param roomId - 8-character uppercase alphanumeric room ID
+	 */
+	function updateHash(roomId: string): void {
+		const newUrl = `${window.location.pathname}#${roomId}`;
+		window.history.replaceState(null, "", newUrl);
+	}
+
+
+	/**
+	 * Remove hash from URL
+	 * Clears room ID from address bar
+	 */
+	function clearHash(): void {
+		const newUrl = window.location.pathname;
+		window.history.replaceState(null, "", newUrl);
+	}
+
+
+	/**
+	 * Validate room ID format
+	 * Must match backend generation: 8 uppercase alphanumeric characters
+	 * @param roomId - Room ID to validate
+	 * @returns true if valid format, false otherwise
+	 */
+	function isValidRoomId(roomId: string): boolean {
+		return /^[A-Z0-9]{8}$/.test(roomId);
+	}
+
+
+	return {
+		getRoomIdFromHash,
+		updateHash,
+		clearHash,
+		isValidRoomId
+	};
+}

trigo-web/app/src/composables/useSocket.ts

@@ -4,9 +4,11 @@ import { io, Socket } from "socket.io-client";
 // Singleton socket instance
 let socketInstance: Socket | null = null;
 
+// Singleton reactive refs (shared across all useSocket() calls)
+const connected = ref(false);
+const error = ref<string | null>(null);
+
 export function useSocket() {
-	const connected = ref(false);
-	const error = ref<string | null>(null);
 
 	// Get or create socket instance
 	const getSocket = (): Socket => {
@@ -16,10 +18,8 @@ export function useSocket() {
 
 			let serverUrl: string;
 			if (isDev) {
-				// Development: Use same host as frontend, port 3000
-				// This allows accessing from local IP (e.g., 192.168.x.x:5173)
-				const currentHost = window.location.hostname;
-				serverUrl = `http://${currentHost}:3000`;
+				// Development: Use VITE_SERVER_URL from .env or .env.local
+				serverUrl = import.meta.env.VITE_SERVER_URL || "http://localhost:3000";
 			} else {
 				// Production: same origin
 				serverUrl = window.location.origin;
@@ -50,6 +50,9 @@ export function useSocket() {
 				error.value = err.message;
 				console.error("[Socket.io] Connection error:", err.message);
 			});
+		} else {
+			// Socket already exists, sync the connected state
+			connected.value = socketInstance.connected;
 		}
 
 		return socketInstance;
@@ -85,6 +88,171 @@ export function useSocket() {
 		});
 	};
 
+	// Join a room
+	const joinRoom = (
+		data: { roomId?: string; nickname: string },
+		callback: (response: any) => void
+	): void => {
+		const socket = getSocket();
+		console.log("[useSocket] joinRoom called:", {
+			roomId: data.roomId,
+			nickname: data.nickname,
+			socketConnected: socket.connected,
+			socketId: socket.id
+		});
+		socket.emit("joinRoom", data, callback);
+		console.log("[useSocket] joinRoom event emitted");
+	};
+
+	// Leave current room
+	const leaveRoom = (): void => {
+		const socket = getSocket();
+		socket.emit("leaveRoom");
+	};
+
+	// Change player nickname
+	const changeNickname = (nickname: string, callback?: (response: any) => void): void => {
+		const socket = getSocket();
+		socket.emit("changeNickname", { nickname }, callback);
+	};
+
+
+	// Game actions
+
+	// Make a move (place stone)
+	const makeMove = (x: number, y: number, z: number): void => {
+		const socket = getSocket();
+		socket.emit("makeMove", { x, y, z });
+	};
+
+	// Pass turn
+	const pass = (): void => {
+		const socket = getSocket();
+		socket.emit("pass");
+	};
+
+	// Resign game
+	const resign = (): void => {
+		const socket = getSocket();
+		socket.emit("resign");
+	};
+
+	// Undo move
+	const undoMove = (callback?: (response: any) => void): void => {
+		const socket = getSocket();
+		socket.emit("undoMove", callback);
+	};
+
+	// Redo move
+	const redoMove = (callback?: (response: any) => void): void => {
+		const socket = getSocket();
+		socket.emit("redoMove", callback);
+	};
+
+	// Reset game
+	const resetGame = (
+		options?: { boardShape?: { x: number; y: number; z: number }; playerColors?: { [playerId: string]: "black" | "white" } },
+		callback?: (response: any) => void
+	): void => {
+		const socket = getSocket();
+		socket.emit("resetGame", options, callback);
+	};
+
+
+	// Event listeners
+	const onPlayerJoined = (handler: (data: { playerId: string; nickname: string }) => void): void => {
+		const socket = getSocket();
+		socket.on("playerJoined", handler);
+	};
+
+	const onPlayerLeft = (handler: (data: { playerId: string }) => void): void => {
+		const socket = getSocket();
+		socket.on("playerLeft", handler);
+	};
+
+	const onNicknameChanged = (
+		handler: (data: { playerId: string; nickname: string; oldNickname: string }) => void
+	): void => {
+		const socket = getSocket();
+		socket.on("nicknameChanged", handler);
+	};
+
+	const onRoomJoined = (handler: (data: any) => void): void => {
+		const socket = getSocket();
+		socket.on("roomJoined", handler);
+	};
+
+	const onGameUpdate = (handler: (data: any) => void): void => {
+		const socket = getSocket();
+		socket.on("gameUpdate", handler);
+	};
+
+	const onGameEnded = (handler: (data: any) => void): void => {
+		const socket = getSocket();
+		socket.on("gameEnded", handler);
+	};
+
+	const onGameReset = (handler: (data: any) => void): void => {
+		const socket = getSocket();
+		socket.on("gameReset", handler);
+	};
+
+	const onPlayerDisconnected = (handler: (data: { playerId: string }) => void): void => {
+		const socket = getSocket();
+		socket.on("playerDisconnected", handler);
+	};
+
+	const onError = (handler: (data: { message: string }) => void): void => {
+		const socket = getSocket();
+		socket.on("error", handler);
+	};
+
+	// Remove event listeners
+	const offPlayerJoined = (handler?: any): void => {
+		const socket = getSocket();
+		socket.off("playerJoined", handler);
+	};
+
+	const offPlayerLeft = (handler?: any): void => {
+		const socket = getSocket();
+		socket.off("playerLeft", handler);
+	};
+
+	const offNicknameChanged = (handler?: any): void => {
+		const socket = getSocket();
+		socket.off("nicknameChanged", handler);
+	};
+
+	const offRoomJoined = (handler?: any): void => {
+		const socket = getSocket();
+		socket.off("roomJoined", handler);
+	};
+
+	const offGameUpdate = (handler?: any): void => {
+		const socket = getSocket();
+		socket.off("gameUpdate", handler);
+	};
+
+	const offGameEnded = (handler?: any): void => {
+		const socket = getSocket();
+		socket.off("gameEnded", handler);
+	};
+
+	const offGameReset = (handler?: any): void => {
+		const socket = getSocket();
+		socket.off("gameReset", handler);
+	};
+
+	const offPlayerDisconnected = (handler?: any): void => {
+		const socket = getSocket();
+		socket.off("playerDisconnected", handler);
+	};
+
+	const offError = (handler?: any): void => {
+		const socket = getSocket();
+		socket.off("error", handler);
+	};
+
 	// Clean up on unmount
 	onUnmounted(() => {
 		// Note: We don't disconnect the singleton instance
@@ -95,7 +263,38 @@ export function useSocket() {
 		socket: getSocket(),
 		connected,
 		error,
-		sendEcho
+		sendEcho,
+		// Room management
+		joinRoom,
+		leaveRoom,
+		changeNickname,
+		// Game actions
+		makeMove,
+		pass,
+		resign,
+		undoMove,
+		redoMove,
+		resetGame,
+		// Event listeners
+		onPlayerJoined,
+		onPlayerLeft,
+		onNicknameChanged,
+		onRoomJoined,
+		onGameUpdate,
+		onGameEnded,
+		onGameReset,
+		onPlayerDisconnected,
+		onError,
+		// Event cleanup
+		offPlayerJoined,
+		offPlayerLeft,
+		offNicknameChanged,
+		offRoomJoined,
+		offGameUpdate,
+		offGameEnded,
+		offGameReset,
+		offPlayerDisconnected,
+		offError
 	};
 }
 

trigo-web/app/src/composables/useTrigoAgent.ts

@@ -14,7 +14,7 @@ import { ref, onUnmounted } from "vue";
 import { TrigoTreeAgent } from "@inc/trigoTreeAgent";
 import { OnnxInferencer } from "@/services/onnxInferencer";
 import type { TrigoGame } from "@inc/trigo/game";
-import type { Position } from "@inc/trigo/types";
+import type { Move } from "@inc/trigo/types";
 
 /**
  * Composable for using the Trigo AI agent in Vue components
@@ -49,9 +49,9 @@ export function useTrigoAgent() {
 
 			// Create OnnxInferencer with evaluation model
 			inferencer = new OnnxInferencer({
-				modelPath: "/onnx/GPT2CausalLM_ep0015_evaluation.onnx",
-				vocabSize: 259,
-				seqLen: 2048 // Evaluation models support longer sequences
+				modelPath: import.meta.env.VITE_ONNX_TREE_MODEL,
+				vocabSize: 128,
+				seqLen: 256
 			});
 
 			// Initialize ONNX model
@@ -75,10 +75,10 @@ export function useTrigoAgent() {
 	 * Generate the next move for the AI player
 	 *
 	 * @param game - Current game instance
-	 * @returns The selected move position, or null if no valid moves or pass move
+	 * @returns The selected move (can be a pass move with isPass: true), or null if no valid moves
 	 * @throws Error if agent is not initialized
 	 */
-	const generateMove = async (game: TrigoGame): Promise<Position | null> => {
+	const generateMove = async (game: TrigoGame): Promise<Move | null> => {
 		if (!agent) {
 			throw new Error("AI agent not initialized. Call initialize() first.");
 		}
@@ -106,14 +106,19 @@ export function useTrigoAgent() {
 			lastMoveTime.value = elapsed;
 			console.log(`[useTrigoAgent] ✓ Move generated in ${elapsed.toFixed(2)}ms`);
 
-			// Convert Move to Position (return null if pass move)
-			if (!move || move.isPass) {
-				console.log("[useTrigoAgent] AI chose to pass");
+			// Return the Move object directly (can be pass move or normal move)
+			if (!move) {
+				console.log("[useTrigoAgent] No valid move available");
 				return null;
 			}
 
+			if (move.isPass) {
+				console.log("[useTrigoAgent] AI chose to pass");
+				return move; // Return the pass move object
+			}
+
 			if (move.x !== undefined && move.y !== undefined && move.z !== undefined) {
-				return { x: move.x, y: move.y, z: move.z };
+				return move; // Return the normal move object
 			}
 
 			console.warn("[useTrigoAgent] Move has undefined coordinates:", move);

trigo-web/app/src/data/defaultNicknames.ts

@@ -0,0 +1,140 @@
+/**
+ * Default Nicknames for Trigo Players
+ *
+ * A curated list of common first names used for random nickname generation.
+ * When a user first visits the VS People mode, they're assigned a random
+ * nickname from this list. The nickname persists in localStorage and can
+ * be changed at any time.
+ */
+
+export const DEFAULT_NICKNAMES: string[] = [
+	// Male names (50)
+	"John",
+	"James",
+	"Michael",
+	"David",
+	"William",
+	"Richard",
+	"Joseph",
+	"Thomas",
+	"Charles",
+	"Daniel",
+	"Matthew",
+	"Anthony",
+	"Mark",
+	"Donald",
+	"Steven",
+	"Paul",
+	"Andrew",
+	"Joshua",
+	"Kenneth",
+	"Kevin",
+	"Brian",
+	"George",
+	"Edward",
+	"Ronald",
+	"Timothy",
+	"Jason",
+	"Jeffrey",
+	"Ryan",
+	"Jacob",
+	"Gary",
+	"Nicholas",
+	"Eric",
+	"Jonathan",
+	"Stephen",
+	"Larry",
+	"Justin",
+	"Scott",
+	"Brandon",
+	"Benjamin",
+	"Samuel",
+	"Raymond",
+	"Gregory",
+	"Frank",
+	"Alexander",
+	"Patrick",
+	"Jack",
+	"Dennis",
+	"Jerry",
+	"Tyler",
+	"Aaron",
+
+	// Female names (50)
+	"Mary",
+	"Patricia",
+	"Jennifer",
+	"Linda",
+	"Barbara",
+	"Elizabeth",
+	"Susan",
+	"Jessica",
+	"Sarah",
+	"Karen",
+	"Nancy",
+	"Lisa",
+	"Betty",
+	"Margaret",
+	"Sandra",
+	"Ashley",
+	"Kimberly",
+	"Emily",
+	"Donna",
+	"Michelle",
+	"Dorothy",
+	"Carol",
+	"Amanda",
+	"Melissa",
+	"Deborah",
+	"Stephanie",
+	"Rebecca",
+	"Sharon",
+	"Laura",
+	"Cynthia",
+	"Kathleen",
+	"Amy",
+	"Angela",
+	"Shirley",
+	"Anna",
+	"Brenda",
+	"Pamela",
+	"Emma",
+	"Nicole",
+	"Helen",
+	"Samantha",
+	"Katherine",
+	"Christine",
+	"Debra",
+	"Rachel",
+	"Catherine",
+	"Carolyn",
+	"Janet",
+	"Ruth",
+	"Maria",
+
+	// Neutral/Additional (15)
+	"Alex",
+	"Jordan",
+	"Taylor",
+	"Morgan",
+	"Casey",
+	"Riley",
+	"Jamie",
+	"Avery",
+	"Quinn",
+	"Sage",
+	"Robin",
+	"Charlie",
+	"Blake",
+	"Cameron",
+	"Hayden"
+];
+
+/**
+ * Get a random nickname from the default list
+ * @returns A randomly selected name from DEFAULT_NICKNAMES
+ */
+export function getRandomNickname(): string {
+	const index = Math.floor(Math.random() * DEFAULT_NICKNAMES.length);
+	return DEFAULT_NICKNAMES[index];
+}

trigo-web/app/src/router/index.ts

@@ -3,6 +3,8 @@ import TrigoView from "@/views/TrigoView.vue";
 import OnnxTestView from "@/views/OnnxTestView.vue";
 import TrigoAgentTestView from "@/views/TrigoAgentTestView.vue";
 import TrigoTreeTestView from "@/views/TrigoTreeTestView.vue";
+import SocketTestView from "@/views/SocketTestView.vue";
+import MCTSAnalysisView from "@/views/MCTSAnalysisView.vue";
 
 const router = createRouter({
 	history: createWebHistory(import.meta.env.BASE_URL),
@@ -45,6 +47,16 @@ const router = createRouter({
 			path: "/tree-test",
 			name: "tree-test",
 			component: TrigoTreeTestView
+		},
+		{
+			path: "/socket-test",
+			name: "socket-test",
+			component: SocketTestView
+		},
+		{
+			path: "/mcts-analysis",
+			name: "mcts-analysis",
+			component: MCTSAnalysisView
 		}
 	]
 });

trigo-web/app/src/stores/gameStore.ts

@@ -297,6 +297,76 @@ export const useGameStore = defineStore("game", {
 			} catch (error) {
 				console.error("Failed to clear session storage:", error);
 			}
+		},
+
+
+		/**
+		 * Set current player (for multiplayer sync)
+		 */
+		setCurrentPlayer(player: Player): void {
+			// This is handled by the underlying game state
+			// The current player is determined by the move history
+			// For proper sync, use loadFromTGN instead
+			console.log(`[gameStore] setCurrentPlayer called with: ${player}`);
+		},
+
+
+		/**
+		 * Load game state from TGN string (for multiplayer sync)
+		 */
+		loadFromTGN(tgn: string): boolean {
+			try {
+				// Create a new game from TGN
+				const { TrigoGame } = require("../../../inc/trigo/game");
+				const newGame = TrigoGame.fromTGN(tgn);
+
+				// Create new frontend game with same shape
+				const shape = newGame.getShape();
+				this.game = new TrigoGameFrontend(shape);
+
+				// Replay all moves to sync state
+				const history = newGame.getStepHistory();
+				this.game.startGame();
+
+				for (const step of history) {
+					if (step.type === "drop" && step.position) {
+						this.game.makeMove(step.position.x, step.position.y, step.position.z);
+					} else if (step.type === "pass") {
+						this.game.pass();
+					}
+				}
+
+				this.saveToSessionStorage();
+				return true;
+			} catch (error) {
+				console.error("[gameStore] Failed to load from TGN:", error);
+				return false;
+			}
+		},
+
+
+		/**
+		 * Get all stones on the board (for viewport sync)
+		 */
+		getAllStones(): Array<{ x: number; y: number; z: number; color: Player }> {
+			const stones: Array<{ x: number; y: number; z: number; color: Player }> = [];
+			const board = this.game.getBoard();
+			const shape = this.game.getShape();
+
+			for (let x = 0; x < shape.x; x++) {
+				for (let y = 0; y < shape.y; y++) {
+					for (let z = 0; z < shape.z; z++) {
+						const stone = board[x][y][z];
+						if (stone === 1) {
+							stones.push({ x, y, z, color: "black" });
+						} else if (stone === 2) {
+							stones.push({ x, y, z, color: "white" });
+						}
+					}
+				}
+			}
+
+			return stones;
 		}
 	}
 });

trigo-web/app/src/stores/mctsStore.ts

@@ -0,0 +1,179 @@
+/**
+ * Pinia store for MCTS visualization state
+ */
+
+import { defineStore } from "pinia";
+import { ref, computed } from "vue";
+import type {
+	MCTSMoveData,
+	MCTSMoveStatistic,
+	MCTSStatisticType,
+	ColorScaleType
+} from "@/types/mcts";
+import type { Position } from "../../../inc/trigo/types";
+
+
+export const useMCTSStore = defineStore("mcts", () => {
+	// ============================================================================
+	// State
+	// ============================================================================
+
+	// Game data
+	const gameHistory = ref<MCTSMoveData[]>([]);
+	const currentMoveIndex = ref<number>(0);
+
+	// Visualization settings
+	const selectedStatistic = ref<MCTSStatisticType>("N");
+	const colorScale = ref<ColorScaleType>("linear");
+	const topNFilter = ref<number>(10);  // Show top N moves in tree/table
+
+	// Selection state
+	const selectedActionKey = ref<string | null>(null);
+
+
+	// ============================================================================
+	// Getters
+	// ============================================================================
+
+	const hasData = computed(() => gameHistory.value.length > 0);
+
+	const currentMoveData = computed((): MCTSMoveData | null => {
+		if (!hasData.value) return null;
+		return gameHistory.value[currentMoveIndex.value] || null;
+	});
+
+	const maxMoveIndex = computed(() => {
+		return Math.max(0, gameHistory.value.length - 1);
+	});
+
+	const currentStatistics = computed((): MCTSMoveStatistic[] => {
+		return currentMoveData.value?.statistics || [];
+	});
+
+	const topMoves = computed((): MCTSMoveStatistic[] => {
+		const stats = currentStatistics.value;
+		return stats
+			.slice()
+			.sort((a, b) => b.N - a.N)
+			.slice(0, topNFilter.value);
+	});
+
+	const totalVisits = computed((): number => {
+		return currentStatistics.value.reduce((sum, stat) => sum + stat.N, 0);
+	});
+
+	const selectedMove = computed((): MCTSMoveStatistic | null => {
+		if (!selectedActionKey.value) return null;
+		return (
+			currentStatistics.value.find(
+				(stat) => stat.actionKey === selectedActionKey.value
+			) || null
+		);
+	});
+
+
+	// ============================================================================
+	// Actions
+	// ============================================================================
+
+	function setGameHistory(history: MCTSMoveData[]) {
+		gameHistory.value = history;
+		currentMoveIndex.value = 0;
+		selectedActionKey.value = null;
+	}
+
+	function clearGameHistory() {
+		gameHistory.value = [];
+		currentMoveIndex.value = 0;
+		selectedActionKey.value = null;
+	}
+
+	function setCurrentMoveIndex(index: number) {
+		if (index < 0 || index > maxMoveIndex.value) return;
+		currentMoveIndex.value = index;
+		// Clear selection when moving to different move
+		selectedActionKey.value = null;
+	}
+
+	function nextMove() {
+		if (currentMoveIndex.value < maxMoveIndex.value) {
+			setCurrentMoveIndex(currentMoveIndex.value + 1);
+		}
+	}
+
+	function prevMove() {
+		if (currentMoveIndex.value > 0) {
+			setCurrentMoveIndex(currentMoveIndex.value - 1);
+		}
+	}
+
+	function firstMove() {
+		setCurrentMoveIndex(0);
+	}
+
+	function lastMove() {
+		setCurrentMoveIndex(maxMoveIndex.value);
+	}
+
+	function setSelectedStatistic(stat: MCTSStatisticType) {
+		selectedStatistic.value = stat;
+	}
+
+	function setColorScale(scale: ColorScaleType) {
+		colorScale.value = scale;
+	}
+
+	function setTopNFilter(n: number) {
+		topNFilter.value = Math.max(3, Math.min(50, n));
+	}
+
+	function selectAction(actionKey: string | null) {
+		selectedActionKey.value = actionKey;
+	}
+
+	function selectPosition(position: Position | null) {
+		if (!position) {
+			selectedActionKey.value = "pass";
+			return;
+		}
+		selectedActionKey.value = `${position.x},${position.y},${position.z}`;
+	}
+
+
+	// ============================================================================
+	// Return
+	// ============================================================================
+
+	return {
+		// State
+		gameHistory,
+		currentMoveIndex,
+		selectedStatistic,
+		colorScale,
+		topNFilter,
+		selectedActionKey,
+
+		// Getters
+		hasData,
+		currentMoveData,
+		maxMoveIndex,
+		currentStatistics,
+		topMoves,
+		totalVisits,
+		selectedMove,
+
+		// Actions
+		setGameHistory,
+		clearGameHistory,
+		setCurrentMoveIndex,
+		nextMove,
+		prevMove,
+		firstMove,
+		lastMove,
+		setSelectedStatistic,
+		setColorScale,
+		setTopNFilter,
+		selectAction,
+		selectPosition
+	};
+});

trigo-web/app/src/stores/playerStore.ts

@@ -0,0 +1,211 @@
+/**
+ * Player Store
+ *
+ * Manages player state for multiplayer mode, including nickname, connection status,
+ * and opponent information.
+ */
+
+import { defineStore } from "pinia";
+import { StorageKey, localStorageManager } from "@/utils/storage";
+import { getRandomNickname } from "@/data/defaultNicknames";
+
+
+/**
+ * Player state interface
+ */
+export interface PlayerState {
+	nickname: string; // Local player nickname
+	playerId: string | null; // Socket ID
+	playerColor: "black" | "white" | null; // Player's stone color in current game
+	roomId: string | null; // Current room ID
+	opponentNickname: string | null; // Opponent's nickname
+	connectionStatus: "disconnected" | "connected" | "in-room"; // Connection state
+}
+
+
+/**
+ * Nickname validation result
+ */
+interface ValidationResult {
+	valid: boolean;
+	error?: string;
+}
+
+
+/**
+ * Validate a nickname against the rules:
+ * - Length: 3-20 characters
+ * - Characters: alphanumeric + spaces only
+ * - No leading/trailing whitespace
+ */
+function validateNickname(nickname: string): ValidationResult {
+	if (!nickname || typeof nickname !== "string") {
+		return { valid: false, error: "Nickname is required" };
+	}
+
+	if (nickname.length < 3) {
+		return { valid: false, error: "Nickname must be at least 3 characters" };
+	}
+
+	if (nickname.length > 20) {
+		return { valid: false, error: "Nickname must be 20 characters or less" };
+	}
+
+	if (!/^[a-zA-Z0-9 ]+$/.test(nickname)) {
+		return { valid: false, error: "Only letters, numbers, and spaces allowed" };
+	}
+
+	if (nickname.trim() !== nickname) {
+		return { valid: false, error: "No leading or trailing spaces allowed" };
+	}
+
+	return { valid: true };
+}
+
+
+/**
+ * Load nickname from localStorage or generate a random one
+ */
+function loadNickname(): string {
+	const stored = localStorageManager.getString(StorageKey.PLAYER_NICKNAME);
+	if (stored) {
+		// Validate stored nickname
+		const validation = validateNickname(stored);
+		if (validation.valid) {
+			return stored;
+		}
+	}
+	// Generate random nickname if none exists or invalid
+	return getRandomNickname();
+}
+
+
+/**
+ * Save nickname to localStorage
+ */
+function saveNickname(nickname: string): void {
+	localStorageManager.setString(StorageKey.PLAYER_NICKNAME, nickname);
+}
+
+
+/**
+ * Player store
+ */
+export const usePlayerStore = defineStore("player", {
+	state: (): PlayerState => ({
+		nickname: loadNickname(),
+		playerId: null,
+		playerColor: null,
+		roomId: null,
+		opponentNickname: null,
+		connectionStatus: "disconnected"
+	}),
+
+	getters: {
+		/**
+		 * Is player currently in a room?
+		 */
+		isInRoom: (state): boolean => state.connectionStatus === "in-room",
+
+		/**
+		 * Does player have an opponent in the room?
+		 */
+		hasOpponent: (state): boolean => state.opponentNickname !== null,
+
+		/**
+		 * Display name with fallback to "Guest"
+		 */
+		displayName: (state): string => state.nickname || "Guest",
+
+		/**
+		 * Is player connected to socket server?
+		 */
+		isConnected: (state): boolean => state.connectionStatus !== "disconnected"
+	},
+
+	actions: {
+		/**
+		 * Set the player's nickname
+		 * @param nickname - New nickname to set
+		 * @returns true if successful, false if validation failed
+		 */
+		setNickname(nickname: string): boolean {
+			const validation = validateNickname(nickname);
+			if (!validation.valid) {
+				console.warn(`[PlayerStore] Invalid nickname: ${validation.error}`);
+				return false;
+			}
+
+			this.nickname = nickname;
+			saveNickname(nickname);
+			return true;
+		},
+
+		/**
+		 * Set the player's socket ID
+		 * @param id - Socket ID from server
+		 */
+		setPlayerId(id: string): void {
+			this.playerId = id;
+			this.connectionStatus = "connected";
+		},
+
+		/**
+		 * Join a room with the given ID and assigned color
+		 * @param roomId - Room ID
+		 * @param color - Assigned player color
+		 */
+		joinRoom(roomId: string, color: "black" | "white"): void {
+			this.roomId = roomId;
+			this.playerColor = color;
+			this.connectionStatus = "in-room";
+		},
+
+		/**
+		 * Set the opponent's nickname
+		 * @param nickname - Opponent's nickname
+		 */
+		setOpponentNickname(nickname: string): void {
+			this.opponentNickname = nickname;
+		},
+
+		/**
+		 * Leave the current room
+		 */
+		leaveRoom(): void {
+			this.roomId = null;
+			this.playerColor = null;
+			this.opponentNickname = null;
+			this.connectionStatus = "connected";
+		},
+
+		/**
+		 * Disconnect from the server
+		 */
+		disconnect(): void {
+			this.playerId = null;
+			this.roomId = null;
+			this.playerColor = null;
+			this.opponentNickname = null;
+			this.connectionStatus = "disconnected";
+		},
+
+		/**
+		 * Reset player state to initial state
+		 * Note: Nickname is preserved in localStorage
+		 */
+		reset(): void {
+			this.playerId = null;
+			this.playerColor = null;
+			this.roomId = null;
+			this.opponentNickname = null;
+			this.connectionStatus = "disconnected";
+		}
+	}
+});
+
+
+/**
+ * Export validation function for use in other components
+ */
+export { validateNickname };

trigo-web/app/src/styles/test-pages.scss

@@ -0,0 +1,554 @@
+/**
+ * Shared styles for test/analysis pages
+ *
+ * Provides consistent styling for:
+ * - MCTSAnalysisView
+ * - TrigoTreeTestView
+ * - TrigoAgentTestView
+ * - OnnxTestView
+ * - SocketTestView
+ */
+
+
+// ============================================================================
+//   Theme Variables
+// ============================================================================
+
+// Light theme colors
+$light-bg-primary: #f5f5f5;
+$light-bg-secondary: white;
+$light-bg-tertiary: #f8f9fa;
+$light-text-primary: #333;
+$light-text-secondary: #666;
+$light-border: #e1e4e8;
+$light-shadow: rgba(0, 0, 0, 0.1);
+
+// Dark theme colors
+$dark-bg-primary: #1a1a1a;
+$dark-bg-secondary: #2a2a2a;
+$dark-bg-tertiary: #3a3a3a;
+$dark-text-primary: #e0e0e0;
+$dark-text-secondary: #a0a0a0;
+$dark-border: #404040;
+$dark-shadow: rgba(0, 0, 0, 0.3);
+
+// Status colors (shared)
+$color-success: #28a745;
+$color-warning: #ffc107;
+$color-error: #dc3545;
+$color-info: #007bff;
+$color-primary: #4a90e2;
+$color-accent: #e94560;
+
+
+// ============================================================================
+//   Custom Scrollbar Mixin
+// ============================================================================
+
+@mixin custom-scrollbar($theme: 'dark') {
+	@if $theme == 'dark' {
+		&::-webkit-scrollbar {
+			width: 8px;
+			height: 8px;
+		}
+
+		&::-webkit-scrollbar-track {
+			background: $dark-bg-primary;
+			border-radius: 4px;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background: #4a4a4a;
+			border-radius: 4px;
+
+			&:hover {
+				background: #5a5a5a;
+			}
+		}
+	} @else {
+		&::-webkit-scrollbar {
+			width: 8px;
+			height: 8px;
+		}
+
+		&::-webkit-scrollbar-track {
+			background: $light-bg-tertiary;
+			border-radius: 4px;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background: #c0c0c0;
+			border-radius: 4px;
+
+			&:hover {
+				background: #a0a0a0;
+			}
+		}
+	}
+}
+
+
+// ============================================================================
+//   Base Container Styles
+// ============================================================================
+
+@mixin test-page-container($theme: 'light') {
+	width: 100%;
+	height: 100vh;
+	overflow-y: auto;
+	overflow-x: hidden;
+
+	@if $theme == 'dark' {
+		background-color: $dark-bg-primary;
+		color: $dark-text-primary;
+	} @else {
+		background-color: $light-bg-primary;
+		color: $light-text-primary;
+	}
+
+	@include custom-scrollbar($theme);
+}
+
+
+// ============================================================================
+//   Header Styles
+// ============================================================================
+
+@mixin test-page-header() {
+	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+	color: white;
+	padding: 2rem;
+	text-align: center;
+
+	h1 {
+		margin: 0 0 0.5rem 0;
+		font-size: 2rem;
+		font-weight: 700;
+	}
+
+	.subtitle {
+		margin: 0;
+		opacity: 0.9;
+		font-size: 1.1rem;
+	}
+}
+
+
+// ============================================================================
+//   Section Styles
+// ============================================================================
+
+@mixin test-section($theme: 'light') {
+	border-radius: 8px;
+	padding: 20px;
+	margin-bottom: 20px;
+
+	@if $theme == 'dark' {
+		background-color: $dark-bg-secondary;
+		border: 1px solid $dark-border;
+	} @else {
+		background-color: $light-bg-secondary;
+		border: 1px solid $light-border;
+		box-shadow: 0 2px 8px $light-shadow;
+	}
+
+	h2, h3 {
+		margin-top: 0;
+		margin-bottom: 15px;
+		font-weight: 600;
+
+		@if $theme == 'dark' {
+			color: $color-primary;
+		} @else {
+			color: $light-text-primary;
+		}
+	}
+
+	h2 {
+		font-size: 20px;
+	}
+
+	h3 {
+		font-size: 16px;
+	}
+
+	p {
+		margin: 0 0 1rem 0;
+
+		@if $theme == 'dark' {
+			color: $dark-text-secondary;
+		} @else {
+			color: $light-text-secondary;
+		}
+	}
+}
+
+
+// ============================================================================
+//   Panel Styles (for sidebars/control panels)
+// ============================================================================
+
+@mixin control-panel($theme: 'dark') {
+	border-radius: 8px;
+	padding: 20px;
+	overflow-y: auto;
+	max-height: calc(100vh - 80px);
+
+	@if $theme == 'dark' {
+		background-color: $dark-bg-secondary;
+	} @else {
+		background-color: $light-bg-secondary;
+		border: 1px solid $light-border;
+	}
+
+	@include custom-scrollbar($theme);
+
+	h2 {
+		margin: 0 0 20px 0;
+		font-size: 20px;
+		padding-bottom: 10px;
+
+		@if $theme == 'dark' {
+			color: $color-accent;
+			border-bottom: 1px solid $dark-border;
+		} @else {
+			color: $light-text-primary;
+			border-bottom: 1px solid $light-border;
+		}
+	}
+
+	h3 {
+		margin: 0 0 15px 0;
+		font-size: 16px;
+		color: $color-primary;
+	}
+}
+
+
+// ============================================================================
+//   Button Styles
+// ============================================================================
+
+@mixin test-button($variant: 'primary') {
+	padding: 0.75rem 1.5rem;
+	border: none;
+	border-radius: 8px;
+	font-weight: 600;
+	font-size: 1rem;
+	cursor: pointer;
+	transition: all 0.3s ease;
+
+	&:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	@if $variant == 'primary' {
+		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+		color: white;
+
+		&:hover:not(:disabled) {
+			transform: translateY(-2px);
+			box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+		}
+	} @else if $variant == 'secondary' {
+		background: #6c757d;
+		color: white;
+
+		&:hover:not(:disabled) {
+			background: #5a6268;
+		}
+	} @else if $variant == 'success' {
+		background: $color-success;
+		color: white;
+
+		&:hover:not(:disabled) {
+			background: darken($color-success, 10%);
+			transform: translateY(-2px);
+			box-shadow: 0 4px 12px rgba($color-success, 0.4);
+		}
+	} @else if $variant == 'test' {
+		background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+		color: white;
+
+		&:hover:not(:disabled) {
+			transform: translateY(-2px);
+			box-shadow: 0 4px 12px rgba(245, 87, 108, 0.4);
+		}
+	}
+}
+
+
+// ============================================================================
+//   Status Display
+// ============================================================================
+
+@mixin status-display($theme: 'light') {
+	border-radius: 8px;
+	padding: 1rem;
+	margin-bottom: 1rem;
+
+	@if $theme == 'dark' {
+		background-color: $dark-bg-primary;
+	} @else {
+		background-color: $light-bg-tertiary;
+	}
+
+	.status-item {
+		display: flex;
+		justify-content: space-between;
+		padding: 0.5rem 0;
+
+		@if $theme == 'dark' {
+			border-bottom: 1px solid $dark-border;
+		} @else {
+			border-bottom: 1px solid #e9ecef;
+		}
+
+		&:last-child {
+			border-bottom: none;
+		}
+
+		.status-label {
+			font-weight: 600;
+
+			@if $theme == 'dark' {
+				color: $dark-text-secondary;
+			} @else {
+				color: $light-text-secondary;
+			}
+		}
+
+		.status-value {
+			@if $theme == 'dark' {
+				color: $dark-text-primary;
+			} @else {
+				color: $light-text-primary;
+			}
+		}
+
+		&.ready .status-value {
+			color: $color-success;
+			font-weight: 600;
+		}
+
+		&.loading .status-value {
+			color: $color-warning;
+			font-weight: 600;
+		}
+
+		&.error .status-value {
+			color: $color-error;
+			font-weight: 600;
+		}
+	}
+}
+
+
+// ============================================================================
+//   Error/Success Messages
+// ============================================================================
+
+@mixin error-message() {
+	background: #fff3cd;
+	border: 1px solid #ffeaa7;
+	border-radius: 6px;
+	padding: 0.75rem;
+	color: #856404;
+	margin-top: 1rem;
+}
+
+@mixin success-message() {
+	background: #d4edda;
+	border: 1px solid #c3e6cb;
+	border-radius: 6px;
+	padding: 0.75rem;
+	color: #155724;
+	font-weight: 600;
+	margin-top: 1rem;
+}
+
+
+// ============================================================================
+//   Table Styles
+// ============================================================================
+
+@mixin data-table($theme: 'light') {
+	width: 100%;
+	border-collapse: collapse;
+	font-size: 12px;
+
+	thead {
+		position: sticky;
+		top: 0;
+		z-index: 1;
+
+		@if $theme == 'dark' {
+			background-color: $dark-bg-secondary;
+		} @else {
+			background-color: $light-bg-tertiary;
+		}
+
+		th {
+			padding: 8px 6px;
+			text-align: left;
+			font-weight: 600;
+
+			@if $theme == 'dark' {
+				color: $color-primary;
+				border-bottom: 1px solid $dark-border;
+			} @else {
+				color: $light-text-secondary;
+				border-bottom: 2px solid #dee2e6;
+			}
+		}
+	}
+
+	tbody {
+		tr {
+			cursor: pointer;
+			transition: background-color 0.2s;
+
+			@if $theme == 'dark' {
+				&:hover {
+					background-color: $dark-bg-tertiary;
+				}
+
+				&.selected {
+					background-color: #4a3030;
+
+					td {
+						color: $color-accent;
+						font-weight: 500;
+					}
+				}
+			} @else {
+				&:hover {
+					background-color: $light-bg-tertiary;
+				}
+
+				&.selected {
+					background-color: #e7f5ff;
+
+					td {
+						color: $color-info;
+						font-weight: 500;
+					}
+				}
+			}
+		}
+
+		td {
+			padding: 8px 6px;
+
+			@if $theme == 'dark' {
+				color: #c0c0c0;
+				border-bottom: 1px solid #303030;
+			} @else {
+				color: $light-text-primary;
+				border-bottom: 1px solid #dee2e6;
+			}
+		}
+	}
+}
+
+
+// ============================================================================
+//   Input Styles
+// ============================================================================
+
+@mixin input-field($theme: 'light') {
+	width: 100%;
+	padding: 0.75rem;
+	border-radius: 8px;
+	font-size: 1rem;
+	transition: border-color 0.3s ease;
+
+	@if $theme == 'dark' {
+		background-color: $dark-bg-primary;
+		border: 2px solid $dark-border;
+		color: $dark-text-primary;
+
+		&:focus {
+			outline: none;
+			border-color: $color-primary;
+		}
+
+		&:disabled {
+			background-color: $dark-bg-tertiary;
+			cursor: not-allowed;
+		}
+	} @else {
+		background-color: white;
+		border: 2px solid #e9ecef;
+		color: $light-text-primary;
+
+		&:focus {
+			outline: none;
+			border-color: #667eea;
+		}
+
+		&:disabled {
+			background-color: $light-bg-tertiary;
+			cursor: not-allowed;
+		}
+	}
+}
+
+
+// ============================================================================
+//   Code/Debug Display
+// ============================================================================
+
+@mixin code-display($theme: 'light') {
+	border-radius: 8px;
+	padding: 1rem;
+	font-family: "Courier New", monospace;
+	font-size: 0.9rem;
+	overflow-x: auto;
+	white-space: pre-wrap;
+	word-break: break-word;
+	margin: 0;
+
+	@if $theme == 'dark' {
+		background-color: $dark-bg-primary;
+		color: $dark-text-primary;
+		border: 1px solid $dark-border;
+	} @else {
+		background-color: white;
+		color: $light-text-primary;
+		border: 1px solid $light-border;
+	}
+}
+
+
+// ============================================================================
+//   Utility Classes
+// ============================================================================
+
+.no-data-message {
+	text-align: center;
+	padding: 2rem;
+	font-size: 14px;
+	font-style: italic;
+}
+
+.panel-section {
+	margin-bottom: 30px;
+
+	&:last-child {
+		margin-bottom: 0;
+	}
+}
+
+.button-group {
+	display: flex;
+	gap: 0.5rem;
+	flex-wrap: wrap;
+}
+
+.info-text {
+	font-size: 13px;
+	line-height: 1.5;
+	margin: 0 0 15px 0;
+}

trigo-web/app/src/types/mcts.ts

@@ -0,0 +1,52 @@
+/**
+ * TypeScript type definitions for MCTS visualization
+ */
+
+import type { TrigoGame } from "../../../inc/trigo/game";
+import type { Position } from "../../../inc/trigo/types";
+
+
+/**
+ * Statistics for a single move (position) at a given game state
+ */
+export interface MCTSMoveStatistic {
+	position: Position | null;  // null for pass move
+	actionKey: string;          // "x,y,z" or "pass"
+	N: number;                  // Visit count
+	pi: number;                 // Search policy (normalized visit count)
+}
+
+
+/**
+ * Complete MCTS data for a single move in the game
+ */
+export interface MCTSMoveData {
+	moveNumber: number;         // Move index (0-based)
+	player: "black" | "white";  // Player to move
+	gameState: TrigoGame;       // Game state at this move
+	statistics: MCTSMoveStatistic[];  // Statistics for all legal moves
+}
+
+
+/**
+ * Statistic type for visualization selection
+ */
+export type MCTSStatisticType = "N" | "pi";
+
+
+/**
+ * Color scale type for heatmap
+ */
+export type ColorScaleType = "linear" | "log";
+
+
+/**
+ * Tree node for D3 visualization
+ */
+export interface MCTSTreeNode {
+	id: string;
+	label: string;
+	N: number;
+	pi: number;
+	children: MCTSTreeNode[];
+}

trigo-web/app/src/utils/mctsColorScale.ts

@@ -0,0 +1,184 @@
+/**
+ * Color scale utilities for MCTS visualization
+ *
+ * Uses D3 color scales to map statistics to colors
+ */
+
+import * as d3 from "d3";
+import * as d3Chromatic from "d3-scale-chromatic";
+import type { MCTSStatisticType, ColorScaleType } from "@/types/mcts";
+
+
+/**
+ * Get color for a statistic value
+ *
+ * @param value - The statistic value
+ * @param statistic - Which statistic (N or pi)
+ * @param min - Minimum value in the range
+ * @param max - Maximum value in the range
+ * @param scale - Linear or logarithmic scale
+ * @returns CSS color string
+ */
+export function getColorForStatistic(
+	value: number,
+	statistic: MCTSStatisticType,
+	min: number,
+	max: number,
+	scale: ColorScaleType = "linear"
+): string {
+	// Handle edge cases
+	if (!Number.isFinite(value) || max === min) {
+		return "#808080"; // Gray for undefined/invalid
+	}
+
+	// Normalize value to [0, 1]
+	let normalized: number;
+
+	if (scale === "log") {
+		// Logarithmic scale (useful for visit counts with wide range)
+		const logMin = Math.log(Math.max(min, 1));
+		const logMax = Math.log(Math.max(max, 1));
+		const logValue = Math.log(Math.max(value, 1));
+		normalized = (logValue - logMin) / (logMax - logMin);
+	} else {
+		// Linear scale
+		normalized = (value - min) / (max - min);
+	}
+
+	// Clamp to [0, 1]
+	normalized = Math.max(0, Math.min(1, normalized));
+
+	// Apply color scale based on statistic type
+	switch (statistic) {
+		case "N":
+			// Visit counts: Blue scale (light to dark)
+			return d3Chromatic.interpolateBlues(normalized * 0.9 + 0.1);
+
+		case "pi":
+			// Search policy: Yellow-Orange-Red scale
+			return d3Chromatic.interpolateYlOrRd(normalized * 0.9 + 0.1);
+
+		default:
+			return "#808080";
+	}
+}
+
+
+/**
+ * Create a D3 color scale for a statistic
+ *
+ * @param statistic - Which statistic
+ * @param min - Minimum value
+ * @param max - Maximum value
+ * @param scaleType - Linear or logarithmic
+ * @returns D3 scale function
+ */
+export function createColorScale(
+	statistic: MCTSStatisticType,
+	min: number,
+	max: number,
+	scaleType: ColorScaleType = "linear"
+) {
+	// Create domain based on scale type
+	let domain: number[];
+
+	if (scaleType === "log") {
+		const logMin = Math.log(Math.max(min, 1));
+		const logMax = Math.log(Math.max(max, 1));
+		domain = [logMin, logMax];
+	} else {
+		domain = [min, max];
+	}
+
+	// Create range based on statistic
+	let range: string[];
+
+	switch (statistic) {
+		case "N":
+			// Blues
+			range = [d3Chromatic.interpolateBlues(0.1), d3Chromatic.interpolateBlues(0.9)];
+			break;
+
+		case "pi":
+			// Yellow-Orange-Red
+			range = [d3Chromatic.interpolateYlOrRd(0.1), d3Chromatic.interpolateYlOrRd(0.9)];
+			break;
+
+		default:
+			range = ["#e0e0e0", "#404040"];
+	}
+
+	// Create scale
+	if (scaleType === "log") {
+		return d3.scaleLinear().domain(domain).range(range);
+	} else {
+		return d3.scaleLinear().domain(domain).range(range);
+	}
+}
+
+
+/**
+ * Generate legend color stops for display
+ *
+ * @param statistic - Which statistic
+ * @param min - Minimum value
+ * @param max - Maximum value
+ * @param steps - Number of color stops (default: 10)
+ * @returns Array of {value, color} objects
+ */
+export function generateLegendStops(
+	statistic: MCTSStatisticType,
+	min: number,
+	max: number,
+	steps: number = 10
+): Array<{ value: number; color: string; label: string }> {
+	const stops: Array<{ value: number; color: string; label: string }> = [];
+
+	for (let i = 0; i <= steps; i++) {
+		const t = i / steps;
+		const value = min + (max - min) * t;
+		const color = getColorForStatistic(value, statistic, min, max, "linear");
+
+		// Format label based on statistic type
+		let label: string;
+		if (statistic === "pi") {
+			label = `${(value * 100).toFixed(1)}%`;
+		} else {
+			label = value < 10 ? value.toFixed(1) : Math.round(value).toString();
+		}
+
+		stops.push({ value, color, label });
+	}
+
+	return stops;
+}
+
+
+/**
+ * Get appropriate label for a statistic
+ */
+export function getStatisticLabel(statistic: MCTSStatisticType): string {
+	switch (statistic) {
+		case "N":
+			return "Visit Count";
+		case "pi":
+			return "Search Policy π";
+		default:
+			return "Unknown";
+	}
+}
+
+
+/**
+ * Get descriptive text for a statistic
+ */
+export function getStatisticDescription(statistic: MCTSStatisticType): string {
+	switch (statistic) {
+		case "N":
+			return "Number of times MCTS explored this move";
+		case "pi":
+			return "Final probability of selecting this move after search";
+		default:
+			return "";
+	}
+}

trigo-web/app/src/utils/mctsDataParser.ts

@@ -0,0 +1,174 @@
+/**
+ * MCTS Data Parser
+ *
+ * Parses TGN game files and visit count JSON files to reconstruct
+ * move-by-move MCTS statistics.
+ */
+
+import { TrigoGame } from "../../../inc/trigo/game";
+import type { MCTSMoveData, MCTSMoveStatistic } from "../types/mcts";
+
+
+/**
+ * Parse MCTS data from TGN and visit counts JSON
+ *
+ * @param tgnContent - TGN game notation string
+ * @param visitCountsJson - JSON string containing visit counts array
+ * @returns Array of MCTS move data for each move in the game
+ * @throws Error if parsing fails or data is invalid
+ */
+export async function parseMCTSData(
+	tgnContent: string,
+	visitCountsJson: string
+): Promise<MCTSMoveData[]> {
+	// 1. Parse TGN to get game
+	let game: TrigoGame;
+	try {
+		game = TrigoGame.fromTGN(tgnContent);
+	} catch (error) {
+		throw new Error(`Failed to parse TGN file: ${error instanceof Error ? error.message : String(error)}`);
+	}
+
+	// 2. Validate board shape (must be 2D)
+	const shape = game.getShape();
+	if (shape.z !== 1) {
+		throw new Error(
+			`Only 2D boards (z=1) are supported. This game has shape ${shape.x}×${shape.y}×${shape.z}`
+		);
+	}
+
+	// 3. Parse visit counts JSON
+	let visitCounts: number[][];
+	try {
+		visitCounts = JSON.parse(visitCountsJson);
+
+		if (!Array.isArray(visitCounts)) {
+			throw new Error("Visit counts must be an array");
+		}
+
+		if (visitCounts.length === 0) {
+			throw new Error("Visit counts array is empty");
+		}
+
+		// Validate that each element is an array of numbers
+		for (let i = 0; i < visitCounts.length; i++) {
+			if (!Array.isArray(visitCounts[i])) {
+				throw new Error(`Visit counts at index ${i} is not an array`);
+			}
+		}
+	} catch (error) {
+		throw new Error(`Failed to parse visit counts JSON: ${error instanceof Error ? error.message : String(error)}`);
+	}
+
+	// 4. Replay game move-by-move and map visit counts to positions
+	const result: MCTSMoveData[] = [];
+	const replayGame = new TrigoGame(shape, {});
+	const stepHistory = game.getHistory();
+
+	// Ensure we have visit counts for each move
+	if (visitCounts.length !== stepHistory.length) {
+		console.warn(
+			`Visit counts length (${visitCounts.length}) doesn't match step history length (${stepHistory.length}). Using minimum.`
+		);
+	}
+
+	const minLength = Math.min(visitCounts.length, stepHistory.length);
+
+	for (let i = 0; i < minLength; i++) {
+		// Get current player
+		const currentPlayer = replayGame.getCurrentPlayer() === 1 ? "black" : "white";
+
+		// Get all valid positions at this state
+		const validPos = replayGame.validMovePositions();
+
+		// Map visit counts to positions
+		const statistics: MCTSMoveStatistic[] = validPos.map((pos, idx) => ({
+			position: pos,
+			actionKey: `${pos.x},${pos.y},${pos.z}`,
+			N: visitCounts[i][idx] || 0,
+			pi: 0 // Will be calculated after
+		}));
+
+		// Add pass move (typically the last element in visit counts)
+		const passN = visitCounts[i][validPos.length] || 0;
+		statistics.push({
+			position: null,
+			actionKey: "pass",
+			N: passN,
+			pi: 0
+		});
+
+		// Calculate total visits
+		const totalN = statistics.reduce((sum, stat) => sum + stat.N, 0);
+
+		// Normalize to get search policy π
+		if (totalN > 0) {
+			statistics.forEach((stat) => {
+				stat.pi = stat.N / totalN;
+			});
+		}
+
+		// Store move data
+		result.push({
+			moveNumber: i,
+			player: currentPlayer,
+			gameState: replayGame.clone(),
+			statistics
+		});
+
+		// Apply move to advance game state
+		const step = stepHistory[i];
+		if (step.type === 1) { // StepType.PASS
+			replayGame.pass();
+		} else if (step.position) {
+			replayGame.drop(step.position);
+		}
+	}
+
+	if (result.length === 0) {
+		throw new Error("No MCTS data could be parsed");
+	}
+
+	console.log(`[MCTS Parser] Successfully parsed ${result.length} moves`);
+	return result;
+}
+
+
+/**
+ * Validate that visit counts data has the expected structure
+ */
+export function validateVisitCounts(visitCounts: any): visitCounts is number[][] {
+	if (!Array.isArray(visitCounts)) {
+		return false;
+	}
+
+	for (const counts of visitCounts) {
+		if (!Array.isArray(counts)) {
+			return false;
+		}
+
+		for (const count of counts) {
+			if (typeof count !== "number" || !Number.isFinite(count) || count < 0) {
+				return false;
+			}
+		}
+	}
+
+	return true;
+}
+
+
+/**
+ * Format position for display
+ */
+export function formatPosition(position: { x: number; y: number; z?: number } | null): string {
+	if (!position) {
+		return "Pass";
+	}
+
+	// Convert to chess-like notation: column letter + row number
+	const col = String.fromCharCode(65 + position.x); // A, B, C, ...
+	const row = position.y + 1; // 1, 2, 3, ...
+
+	return `${col}${row}`;
+}

trigo-web/app/src/utils/storage.ts

@@ -32,6 +32,9 @@ export enum StorageKey {
 	// AI settings
 	AI_PLAYER_COLOR = "trigoAIPlayerColor",
 
+	// Player settings
+	PLAYER_NICKNAME = "trigoPlayerNickname",
+
 	// User preferences (examples for future use)
 	// THEME = "trigoTheme",
 	// LANGUAGE = "trigoLanguage",

trigo-web/app/src/views/MCTSAnalysisView.vue

@@ -0,0 +1,176 @@
+<template>
+	<div class="mcts-analysis-container">
+		<h1>MCTS Analysis</h1>
+
+		<div class="mcts-grid">
+			<!-- Left sidebar: Control Panel -->
+			<div class="control-panel">
+				<h2>Controls</h2>
+
+				<!-- Data Loader Section -->
+				<section class="panel-section">
+					<h3>Data Source</h3>
+					<p class="info-text">
+						Upload a TGN game file and its corresponding visit counts JSON to analyze MCTS
+						behavior. Only 2D boards are supported.
+					</p>
+					<MCTSDataLoader />
+				</section>
+
+				<!-- Move Navigation Section -->
+				<section class="panel-section">
+					<h3>Navigation</h3>
+					<MCTSMoveNavigation v-if="hasData" />
+					<div v-else class="nav-placeholder">
+						<p>Load data to enable navigation</p>
+					</div>
+				</section>
+
+				<!-- Visualization Settings Section -->
+				<section class="panel-section">
+					<h3>Statistics</h3>
+					<MCTSStatisticsPanel />
+				</section>
+			</div>
+
+			<!-- Right content area -->
+			<div class="content-area">
+				<!-- Tree Visualization -->
+				<div class="visualization-panel tree-panel">
+					<h3>Search Tree</h3>
+					<MCTSTreeVisualization />
+				</div>
+
+				<!-- Board Heatmap -->
+				<div class="visualization-panel heatmap-panel">
+					<h3>Board Heatmap</h3>
+					<MCTSBoardHeatmap />
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from "vue";
+import { useMCTSStore } from "@/stores/mctsStore";
+import MCTSDataLoader from "@/components/mcts/MCTSDataLoader.vue";
+import MCTSMoveNavigation from "@/components/mcts/MCTSMoveNavigation.vue";
+import MCTSStatisticsPanel from "@/components/mcts/MCTSStatisticsPanel.vue";
+import MCTSBoardHeatmap from "@/components/mcts/MCTSBoardHeatmap.vue";
+import MCTSTreeVisualization from "@/components/mcts/MCTSTreeVisualization.vue";
+
+const mctsStore = useMCTSStore();
+
+const hasData = computed(() => mctsStore.hasData);
+
+onMounted(() => {
+	console.log("[MCTS Analysis] View mounted");
+});
+</script>
+
+<style scoped lang="scss">
+@use "@/styles/test-pages.scss" as *;
+
+.mcts-analysis-container {
+	@include test-page-container('dark');
+	padding: 20px;
+
+	h1 {
+		margin: 0 0 20px 0;
+		font-size: 28px;
+		color: #e94560;
+	}
+}
+
+.mcts-grid {
+	display: grid;
+	grid-template-columns: 320px 1fr;
+	gap: 20px;
+	min-height: calc(100vh - 80px);
+}
+
+/* ============================================================================
+   Control Panel (Left Sidebar)
+   ============================================================================ */
+
+.control-panel {
+	@include control-panel('dark');
+}
+
+.panel-section {
+	@extend .panel-section;
+}
+
+.info-text {
+	@extend .info-text;
+	color: #a0a0a0;
+}
+
+.nav-placeholder {
+	padding: 15px;
+	background-color: #1a1a1a;
+	border-radius: 4px;
+	border: 1px dashed #404040;
+	text-align: center;
+	color: #606060;
+	font-size: 12px;
+}
+
+/* ============================================================================
+   Content Area (Right Side)
+   ============================================================================ */
+
+.content-area {
+	display: grid;
+	grid-template-rows: auto 1fr;
+	gap: 20px;
+	overflow: hidden;
+}
+
+.visualization-panel {
+	@include test-section('dark');
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+	padding: 20px;
+
+	h3 {
+		margin: 0 0 15px 0;
+		font-size: 18px;
+		color: #4a90e2;
+		flex-shrink: 0;
+	}
+}
+
+.tree-panel {
+	overflow: visible;
+}
+
+/* ============================================================================
+   Responsive
+   ============================================================================ */
+
+@media (max-width: 1200px) {
+	.mcts-grid {
+		grid-template-columns: 280px 1fr;
+	}
+}
+
+@media (max-width: 900px) {
+	.mcts-grid {
+		grid-template-columns: 1fr;
+		grid-template-rows: auto 1fr;
+		min-height: auto;
+	}
+
+	.control-panel {
+		max-height: 400px;
+	}
+
+	.content-area {
+		min-height: 800px;
+		max-height: none;
+	}
+}
+</style>

trigo-web/app/src/views/OnnxTestView.vue

@@ -179,9 +179,9 @@
 			console.log("=".repeat(80));
 
 			inferencer = new OnnxInferencer({
-				modelPath: "/onnx/GPT2CausalLM_ep0015_int8_seq2048_int8.onnx",
-				vocabSize: 259,
-				seqLen: 2048,
+				modelPath: import.meta.env.VITE_ONNX_TREE_MODEL,
+				vocabSize: 128,
+				seqLen: 256,
 				executionProviders: ["wasm"] // Use WebAssembly for compatibility
 			});
 

trigo-web/app/src/views/SocketTestView.vue

@@ -0,0 +1,932 @@
+<template>
+	<div class="socket-test-view">
+		<div class="test-header">
+			<h1>Socket API Test Page</h1>
+			<p class="subtitle">Testing Backend Game Socket Handlers</p>
+		</div>
+
+		<div class="test-body">
+			<!-- Left Column: Controls and Status -->
+			<div class="left-column">
+				<!-- Connection Status -->
+				<div class="test-section">
+					<h2>Connection Status</h2>
+				<div class="status-info">
+					<div class="status-item" :class="{ ready: connected, error: error }">
+						<span class="status-label">Socket:</span>
+						<span class="status-value">
+							{{ connected ? "✓ Connected" : "⚪ Disconnected" }}
+						</span>
+					</div>
+					<div v-if="socket" class="status-item">
+						<span class="status-label">Socket ID:</span>
+						<span class="status-value code">{{ socket.id }}</span>
+					</div>
+					<div v-if="error" class="error-message">❌ Error: {{ error }}</div>
+				</div>
+			</div>
+
+			<!-- Room Management -->
+			<div class="test-section">
+				<h2>Room Management</h2>
+				<div class="room-info">
+					<div class="info-item">
+						<span class="label">Current Room:</span>
+						<span class="value code">{{ currentRoomId || "Not in room" }}</span>
+					</div>
+					<div v-if="playerColor" class="info-item">
+						<span class="label">Player Color:</span>
+						<span class="value" :class="playerColor">{{ playerColor }}</span>
+					</div>
+					<div v-if="currentRoomId" class="info-item">
+						<span class="label">Room Admin:</span>
+						<span class="value">{{ isAdmin ? "You (Admin)" : "Other player" }}</span>
+					</div>
+				</div>
+
+				<div class="room-controls">
+					<div class="control-group">
+						<input
+							v-model="nickname"
+							type="text"
+							placeholder="Nickname"
+							class="input-text"
+						/>
+						<input
+							v-model="roomIdInput"
+							type="text"
+							placeholder="Room ID (leave empty to create)"
+							class="input-text"
+						/>
+					</div>
+					<div class="button-group">
+						<button
+							class="btn btn-primary"
+							@click="testJoinRoom"
+							:disabled="!connected || currentRoomId !== null"
+						>
+							Join/Create Room
+						</button>
+						<button
+							class="btn btn-secondary"
+							@click="testLeaveRoom"
+							:disabled="!currentRoomId"
+						>
+							Leave Room
+						</button>
+					</div>
+				</div>
+			</div>
+
+			<!-- Game State Display -->
+			<div class="test-section">
+				<h2>Game State</h2>
+				<div class="game-info">
+					<div class="info-item">
+						<span class="label">Game Status:</span>
+						<span class="value">{{ gameState.gameStatus || "N/A" }}</span>
+					</div>
+					<div class="info-item">
+						<span class="label">Current Player:</span>
+						<span class="value" :class="gameState.currentPlayer">
+							{{ gameState.currentPlayer || "N/A" }}
+						</span>
+					</div>
+					<div class="info-item">
+						<span class="label">Current Index:</span>
+						<span class="value">{{ gameState.currentMoveIndex }}</span>
+					</div>
+					<div class="info-item">
+						<span class="label">Captured (Black):</span>
+						<span class="value">{{ gameState.capturedStones.black }}</span>
+					</div>
+					<div class="info-item">
+						<span class="label">Captured (White):</span>
+						<span class="value">{{ gameState.capturedStones.white }}</span>
+					</div>
+				</div>
+
+				<!-- TGN Display -->
+				<div v-if="gameState.tgn" class="tgn-display">
+					<h3>Current TGN:</h3>
+					<pre class="tgn-content">{{ gameState.tgn }}</pre>
+				</div>
+			</div>
+
+			<!-- Game Actions -->
+			<div class="test-section">
+				<h2>Game Actions</h2>
+				<div class="game-controls">
+					<div class="control-group">
+						<input
+							v-model.number="moveX"
+							type="number"
+							placeholder="X"
+							class="input-number"
+							min="0"
+							max="4"
+						/>
+						<input
+							v-model.number="moveY"
+							type="number"
+							placeholder="Y"
+							class="input-number"
+							min="0"
+							max="4"
+						/>
+						<input
+							v-model.number="moveZ"
+							type="number"
+							placeholder="Z"
+							class="input-number"
+							min="0"
+							max="4"
+						/>
+						<button
+							class="btn btn-primary"
+							@click="testMakeMove"
+							:disabled="!currentRoomId"
+						>
+							Make Move
+						</button>
+					</div>
+					<div class="button-group">
+						<button
+							class="btn btn-secondary"
+							@click="testPass"
+							:disabled="!currentRoomId"
+						>
+							Pass
+						</button>
+						<button
+							class="btn btn-warning"
+							@click="testResign"
+							:disabled="!currentRoomId"
+						>
+							Resign
+						</button>
+					</div>
+				</div>
+			</div>
+
+			<!-- Admin Actions -->
+			<div class="test-section admin-section">
+				<h2>Admin Actions (Undo/Redo/Reset)</h2>
+				<p class="section-desc">Test the new admin APIs</p>
+				<div v-if="!isAdmin && currentRoomId" class="admin-warning">
+					⚠️ Only the room admin can reset the game
+				</div>
+				<div class="button-group">
+					<button
+						class="btn btn-admin"
+						@click="testUndo"
+						:disabled="!currentRoomId || gameState.currentMoveIndex === 0"
+					>
+						Undo Move
+					</button>
+					<button
+						class="btn btn-admin"
+						@click="testRedo"
+						:disabled="!currentRoomId"
+					>
+						Redo Move
+					</button>
+				</div>
+				<div class="reset-controls">
+					<div class="control-group">
+						<label class="input-label">Board Shape:</label>
+						<input
+							v-model.number="boardShapeX"
+							type="number"
+							placeholder="X"
+							class="input-number"
+							min="3"
+							max="9"
+						/>
+						<input
+							v-model.number="boardShapeY"
+							type="number"
+							placeholder="Y"
+							class="input-number"
+							min="3"
+							max="9"
+						/>
+						<input
+							v-model.number="boardShapeZ"
+							type="number"
+							placeholder="Z"
+							class="input-number"
+							min="3"
+							max="9"
+						/>
+					</div>
+					<div v-if="roomPlayers.length === 2" class="control-group">
+						<label class="checkbox-label">
+							<input type="checkbox" v-model="swapColors" />
+							Swap Player Colors (Black ↔ White)
+						</label>
+					</div>
+					<button class="btn btn-danger" @click="testReset" :disabled="!currentRoomId || !isAdmin">
+						Reset Game (Admin Only)
+					</button>
+				</div>
+			</div>
+
+			</div>
+			<!-- End Left Column -->
+
+			<!-- Right Column: Event Log -->
+			<div class="right-column">
+				<!-- Event Log -->
+				<div class="test-section event-log-section">
+					<h2>Event Log</h2>
+					<div class="event-log-controls">
+						<button class="btn btn-secondary" @click="clearEventLog">Clear Log</button>
+						<label class="checkbox-label">
+							<input type="checkbox" v-model="autoScroll" />
+							Auto-scroll
+						</label>
+					</div>
+					<div class="event-log" ref="eventLogRef">
+						<div v-if="eventLog.length === 0" class="empty-state">No events yet</div>
+						<div
+							v-for="(event, index) in eventLog"
+							:key="index"
+							class="event-item"
+							:class="event.type"
+						>
+							<span class="event-timestamp">{{ event.timestamp }}</span>
+							<span class="event-name">{{ event.name }}</span>
+							<span class="event-type-badge">{{ event.type }}</span>
+							<pre class="event-data">{{ JSON.stringify(event.data, null, 2) }}</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+			<!-- End Right Column -->
+
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, onUnmounted, nextTick, watch } from "vue";
+import { useSocket } from "@/composables/useSocket";
+
+// Socket composable
+const { socket, connected, error } = useSocket();
+
+// Room state
+const currentRoomId = ref<string | null>(null);
+const playerColor = ref<string | null>(null);
+const nickname = ref("TestUser");
+const roomIdInput = ref("");
+const isAdmin = ref(false);
+const roomPlayers = ref<string[]>([]);
+const playerColorAssignments = reactive<{ [playerId: string]: "black" | "white" }>({});
+const swapColors = ref(false);
+
+// Game state
+const gameState = reactive({
+	currentPlayer: null as string | null,
+	currentMoveIndex: 0,
+	capturedStones: { black: 0, white: 0 },
+	gameStatus: null as string | null,
+	tgn: "" as string
+});
+
+// Move inputs
+const moveX = ref(0);
+const moveY = ref(0);
+const moveZ = ref(0);
+
+// Board shape inputs for reset
+const boardShapeX = ref(5);
+const boardShapeY = ref(5);
+const boardShapeZ = ref(5);
+
+// Event log
+const eventLog = ref<
+	Array<{
+		timestamp: string;
+		name: string;
+		type: "sent" | "received" | "error";
+		data: any;
+	}>
+>([]);
+const eventLogRef = ref<HTMLElement | null>(null);
+const autoScroll = ref(true);
+
+// Helper to log events
+function logEvent(name: string, data: any, type: "sent" | "received" | "error" = "received") {
+	const timestamp = new Date().toLocaleTimeString();
+	eventLog.value.push({ timestamp, name, type, data });
+
+	if (autoScroll.value) {
+		nextTick(() => {
+			if (eventLogRef.value) {
+				eventLogRef.value.scrollTop = eventLogRef.value.scrollHeight;
+			}
+		});
+	}
+}
+
+function clearEventLog() {
+	eventLog.value = [];
+}
+
+// Room management
+function testJoinRoom() {
+	const data = {
+		roomId: roomIdInput.value || undefined,
+		nickname: nickname.value
+	};
+	logEvent("joinRoom", data, "sent");
+
+	socket.emit("joinRoom", data, (response: any) => {
+		logEvent("joinRoom:response", response, response.success ? "received" : "error");
+
+		if (response.success) {
+			currentRoomId.value = response.roomId;
+			playerColor.value = response.playerColor;
+			isAdmin.value = response.isAdmin || false;
+
+			// Initialize room players from response
+			if (response.players) {
+				roomPlayers.value = Object.keys(response.players);
+				// Initialize player color assignments
+				for (const [playerId, playerInfo] of Object.entries(response.players) as any) {
+					playerColorAssignments[playerId] = playerInfo.color;
+				}
+			}
+
+			// Update game state
+			if (response.gameState) {
+				Object.assign(gameState, response.gameState);
+
+				// Update board shape inputs
+				if (response.gameState.boardShape) {
+					boardShapeX.value = response.gameState.boardShape.x;
+					boardShapeY.value = response.gameState.boardShape.y;
+					boardShapeZ.value = response.gameState.boardShape.z;
+				}
+			}
+		}
+	});
+}
+
+function testLeaveRoom() {
+	logEvent("leaveRoom", {}, "sent");
+	socket.emit("leaveRoom");
+
+	// Reset local state
+	currentRoomId.value = null;
+	playerColor.value = null;
+	Object.assign(gameState, {
+		currentPlayer: null,
+		currentMoveIndex: 0,
+		capturedStones: { black: 0, white: 0 },
+		gameStatus: null,
+		tgn: ""
+	});
+}
+
+// Game actions
+function testMakeMove() {
+	const data = { x: moveX.value, y: moveY.value, z: moveZ.value };
+	logEvent("makeMove", data, "sent");
+	socket.emit("makeMove", data);
+}
+
+function testPass() {
+	logEvent("pass", {}, "sent");
+	socket.emit("pass");
+}
+
+function testResign() {
+	if (!confirm("Are you sure you want to resign?")) return;
+	logEvent("resign", {}, "sent");
+	socket.emit("resign");
+}
+
+// Admin actions
+function testUndo() {
+	logEvent("undoMove", {}, "sent");
+	socket.emit("undoMove", (response: any) => {
+		logEvent("undoMove:response", response, response.success ? "received" : "error");
+	});
+}
+
+function testRedo() {
+	logEvent("redoMove", {}, "sent");
+	socket.emit("redoMove", (response: any) => {
+		logEvent("redoMove:response", response, response.success ? "received" : "error");
+	});
+}
+
+function testReset() {
+	if (!confirm("Reset entire game?")) return;
+	const data: any = {
+		boardShape: {
+			x: boardShapeX.value,
+			y: boardShapeY.value,
+			z: boardShapeZ.value
+		}
+	};
+
+	// Apply color swap if checkbox is checked
+	if (swapColors.value && roomPlayers.value.length === 2) {
+		const [player1, player2] = roomPlayers.value;
+		const color1 = playerColorAssignments[player1];
+		const color2 = playerColorAssignments[player2];
+
+		// Swap the colors
+		data.playerColors = {
+			[player1]: color2,
+			[player2]: color1
+		};
+	}
+
+	logEvent("resetGame", data, "sent");
+	socket.emit("resetGame", data, (response: any) => {
+		logEvent("resetGame:response", response, response.success ? "received" : "error");
+	});
+}
+
+// Socket event listeners
+onMounted(() => {
+	// Listen to gameUpdate
+	socket.on("gameUpdate", (data: any) => {
+		logEvent("gameUpdate", data, "received");
+
+		// Update local game state
+		if (data.currentPlayer !== undefined) gameState.currentPlayer = data.currentPlayer;
+		if (data.currentMoveIndex !== undefined) gameState.currentMoveIndex = data.currentMoveIndex;
+		if (data.capturedStones !== undefined) gameState.capturedStones = data.capturedStones;
+		if (data.tgn !== undefined) gameState.tgn = data.tgn;
+	});
+
+	// Listen to gameReset
+	socket.on("gameReset", (data: any) => {
+		logEvent("gameReset", data, "received");
+
+		// Reset local game state
+		gameState.currentPlayer = data.currentPlayer;
+		gameState.currentMoveIndex = 0;
+		gameState.capturedStones = { black: 0, white: 0 };
+		gameState.tgn = data.tgn || "";
+
+		// Update board shape inputs
+		if (data.boardShape) {
+			boardShapeX.value = data.boardShape.x;
+			boardShapeY.value = data.boardShape.y;
+			boardShapeZ.value = data.boardShape.z;
+		}
+
+		// Update player list and colors if provided
+		if (data.players) {
+			roomPlayers.value = Object.keys(data.players);
+			// Initialize player color assignments
+			for (const [playerId, playerInfo] of Object.entries(data.players) as any) {
+				playerColorAssignments[playerId] = playerInfo.color;
+			}
+
+			// Update current player's color display
+			if (data.players[socket.id]) {
+				playerColor.value = data.players[socket.id].color;
+			}
+		}
+	});
+
+	// Listen to gameEnded
+	socket.on("gameEnded", (data: any) => {
+		logEvent("gameEnded", data, "received");
+		gameState.gameStatus = "finished";
+	});
+
+	// Listen to playerJoined
+	socket.on("playerJoined", (data: any) => {
+		logEvent("playerJoined", data, "received");
+
+		// Add the new player to the room players list
+		if (data.playerId && !roomPlayers.value.includes(data.playerId)) {
+			roomPlayers.value.push(data.playerId);
+			// Default the new player to white (second player)
+			playerColorAssignments[data.playerId] = "white";
+		}
+	});
+
+	// Listen to playerLeft
+	socket.on("playerLeft", (data: any) => {
+		logEvent("playerLeft", data, "received");
+	});
+
+	// Listen to nicknameChanged
+	socket.on("nicknameChanged", (data: any) => {
+		logEvent("nicknameChanged", data, "received");
+	});
+
+	// Listen to error events
+	socket.on("error", (data: any) => {
+		logEvent("error", data, "error");
+	});
+});
+
+onUnmounted(() => {
+	// Clean up listeners
+	socket.off("gameUpdate");
+	socket.off("gameReset");
+	socket.off("gameEnded");
+	socket.off("playerJoined");
+	socket.off("playerLeft");
+	socket.off("nicknameChanged");
+	socket.off("error");
+});
+</script>
+
+<style scoped>
+.socket-test-view {
+	max-width: 1200px;
+	margin: 0 auto;
+	padding: 20px;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+.test-header {
+	text-align: center;
+	margin-bottom: 30px;
+	padding-bottom: 20px;
+	border-bottom: 2px solid #e0e0e0;
+}
+
+.test-header h1 {
+	margin: 0 0 10px 0;
+	font-size: 2em;
+	color: #333;
+}
+
+.subtitle {
+	margin: 0;
+	color: #666;
+	font-size: 1.1em;
+}
+
+.test-body {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 20px;
+	overflow: auto;
+	max-height: calc(100vh - 200px);
+}
+
+.left-column {
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+	overflow-y: auto;
+}
+
+.right-column {
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+}
+
+.event-log-section {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	min-height: 0;
+}
+
+.test-section {
+	background: #f9f9f9;
+	border: 1px solid #ddd;
+	border-radius: 8px;
+	padding: 20px;
+}
+
+.test-section h2 {
+	margin: 0 0 15px 0;
+	font-size: 1.5em;
+	color: #333;
+}
+
+.section-desc {
+	margin: -10px 0 15px 0;
+	color: #666;
+	font-size: 0.9em;
+}
+
+.admin-section {
+	background: #fff8e1;
+	border-color: #ffd54f;
+}
+
+/* Status */
+.status-info,
+.room-info,
+.game-info {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	margin-bottom: 15px;
+}
+
+.status-item,
+.info-item {
+	display: flex;
+	gap: 10px;
+	align-items: center;
+	padding: 8px;
+	background: white;
+	border-radius: 4px;
+}
+
+.status-item.ready {
+	background: #e8f5e9;
+}
+
+.status-item.error {
+	background: #ffebee;
+}
+
+.status-label,
+.label {
+	font-weight: 600;
+	min-width: 120px;
+}
+
+.status-value,
+.value {
+	flex: 1;
+}
+
+.value.black {
+	color: #000;
+	font-weight: bold;
+}
+
+.value.white {
+	color: #999;
+	font-weight: bold;
+}
+
+.code {
+	font-family: "Courier New", monospace;
+	background: #f0f0f0;
+	padding: 2px 6px;
+	border-radius: 3px;
+	font-size: 0.9em;
+}
+
+.error-message {
+	padding: 10px;
+	background: #ffebee;
+	border: 1px solid #ef5350;
+	border-radius: 4px;
+	color: #c62828;
+}
+
+/* Controls */
+.room-controls,
+.game-controls {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+}
+
+.control-group,
+.button-group {
+	display: flex;
+	gap: 10px;
+	flex-wrap: wrap;
+	align-items: center;
+}
+
+.reset-controls {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	margin-top: 10px;
+}
+
+.input-label {
+	font-weight: 600;
+	margin-right: 5px;
+}
+
+.input-text,
+.input-number,
+.input-select {
+	padding: 8px 12px;
+	border: 1px solid #ddd;
+	border-radius: 4px;
+	font-size: 1em;
+	flex: 1;
+	min-width: 150px;
+}
+
+.input-number {
+	min-width: 80px;
+	max-width: 100px;
+}
+
+.input-select {
+	min-width: 200px;
+	cursor: pointer;
+	background: white;
+}
+
+.admin-warning {
+	padding: 10px;
+	background: #fff8e1;
+	border: 1px solid #ffd54f;
+	border-radius: 4px;
+	color: #f57c00;
+	font-weight: 500;
+	margin-bottom: 10px;
+}
+
+.btn {
+	padding: 10px 20px;
+	border: none;
+	border-radius: 4px;
+	font-size: 1em;
+	cursor: pointer;
+	transition: background 0.2s;
+	font-weight: 500;
+}
+
+.btn:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+.btn-primary {
+	background: #2196f3;
+	color: white;
+}
+
+.btn-primary:hover:not(:disabled) {
+	background: #1976d2;
+}
+
+.btn-secondary {
+	background: #757575;
+	color: white;
+}
+
+.btn-secondary:hover:not(:disabled) {
+	background: #616161;
+}
+
+.btn-warning {
+	background: #ff9800;
+	color: white;
+}
+
+.btn-warning:hover:not(:disabled) {
+	background: #f57c00;
+}
+
+.btn-danger {
+	background: #f44336;
+	color: white;
+}
+
+.btn-danger:hover:not(:disabled) {
+	background: #d32f2f;
+}
+
+.btn-admin {
+	background: #9c27b0;
+	color: white;
+}
+
+.btn-admin:hover:not(:disabled) {
+	background: #7b1fa2;
+}
+
+.checkbox-label {
+	display: flex;
+	align-items: center;
+	gap: 5px;
+	cursor: pointer;
+}
+
+/* Event Log */
+.event-log-controls {
+	display: flex;
+	gap: 10px;
+	align-items: center;
+	margin-bottom: 10px;
+}
+
+.event-log {
+	flex: 1;
+	overflow-y: auto;
+	background: white;
+	border: 1px solid #ddd;
+	border-radius: 4px;
+	padding: 10px;
+	min-height: 0;
+}
+
+.empty-state {
+	text-align: center;
+	color: #999;
+	padding: 20px;
+}
+
+/* TGN Display */
+.tgn-display {
+	margin-top: 15px;
+}
+
+.tgn-display h3 {
+	margin: 0 0 10px 0;
+	font-size: 1.1em;
+	color: #333;
+}
+
+.tgn-content {
+	background: white;
+	border: 1px solid #ddd;
+	border-radius: 4px;
+	padding: 10px;
+	margin: 0;
+	font-family: "Courier New", monospace;
+	font-size: 0.9em;
+	overflow-x: auto;
+	white-space: pre-wrap;
+	word-wrap: break-word;
+	max-height: 200px;
+	overflow-y: auto;
+}
+
+.event-item {
+	margin-bottom: 10px;
+	padding: 10px;
+	border-radius: 4px;
+	border-left: 4px solid #2196f3;
+	background: #f5f5f5;
+}
+
+.event-item.sent {
+	border-left-color: #4caf50;
+	background: #e8f5e9;
+}
+
+.event-item.error {
+	border-left-color: #f44336;
+	background: #ffebee;
+}
+
+.event-timestamp {
+	font-size: 0.85em;
+	color: #666;
+	margin-right: 10px;
+}
+
+.event-name {
+	font-weight: 600;
+	margin-right: 10px;
+}
+
+.event-type-badge {
+	display: inline-block;
+	padding: 2px 8px;
+	border-radius: 12px;
+	font-size: 0.75em;
+	font-weight: 600;
+	text-transform: uppercase;
+}
+
+.event-item.sent .event-type-badge {
+	background: #4caf50;
+	color: white;
+}
+
+.event-item.received .event-type-badge {
+	background: #2196f3;
+	color: white;
+}
+
+.event-item.error .event-type-badge {
+	background: #f44336;
+	color: white;
+}
+
+.event-data {
+	margin: 10px 0 0 0;
+	padding: 10px;
+	background: white;
+	border: 1px solid #ddd;
+	border-radius: 4px;
+	font-size: 0.85em;
+	overflow-x: auto;
+	white-space: pre-wrap;
+	word-wrap: break-word;
+}
+</style>

trigo-web/app/src/views/TrigoAgentTestView.vue

@@ -218,9 +218,9 @@
 
 			// Create and initialize inferencer
 			inferencer = new OnnxInferencer({
-				modelPath: "/onnx/GPT2CausalLM_ep0015_int8_seq2048_int8.onnx",
-				vocabSize: 259,
-				seqLen: 2048
+				modelPath: import.meta.env.VITE_ONNX_TREE_MODEL,
+				vocabSize: 128,
+				seqLen: 256
 			});
 
 			await inferencer.initialize();

trigo-web/app/src/views/TrigoTreeTestView.vue

@@ -158,7 +158,7 @@
 					>
 						<span class="move-notation">{{ move.notation }}</span>
 						<span class="move-positions"
-							>parent={{ move.parentPos }}, leaf={{ move.leafPos }}</span
+							>leaf={{ move.leafPos }}, parent={{ treeVisualization.parent[move.leafPos] }}</span
 						>
 					</div>
 				</div>
@@ -264,7 +264,7 @@
 	import type { Move } from "../../../inc/trigo/types";
 
 	// Configuration
-	const modelPath = "/onnx/GPT2CausalLM_ep0015_evaluation.onnx";
+	const modelPath = import.meta.env.VITE_ONNX_TREE_MODEL;
 	const vocabSize = 259;
 
 	// State
@@ -285,7 +285,8 @@
 	const treeVisualization = ref<{
 		evaluatedIds: number[];
 		mask: number[];
-		moveData: Array<{ notation: string; parentPos: number; leafPos: number }>;
+		parent: Array<number | null>;
+		moveData: Array<{ notation: string; leafPos: number }>;
 	} | null>(null);
 
 	// Computed properties
@@ -329,6 +330,16 @@
 		// Compute sum of exp scores
 		const sumExp = expScores.reduce((sum, exp) => sum + exp, 0);
 
+		// Handle edge case where all probabilities underflow to 0
+		if (sumExp === 0 || !isFinite(sumExp)) {
+			console.warn("Probability sum is 0 or non-finite, using uniform distribution");
+			const uniformProb = 1.0 / scoredMoves.value.length;
+			return scoredMoves.value.map((move) => ({
+				...move,
+				probability: uniformProb
+			}));
+		}
+
 		// Return moves with normalized probabilities
 		return scoredMoves.value.map((move, i) => ({
 			...move,
@@ -416,9 +427,9 @@
 			treeVisualization.value = {
 				evaluatedIds: treeStructure.evaluatedIds,
 				mask: treeStructure.mask,
+				parent: treeStructure.parent,
 				moveData: treeStructure.moveData.map((m) => ({
 					notation: m.notation,
-					parentPos: m.parentPos,
 					leafPos: m.leafPos
 				}))
 			};

trigo-web/app/src/views/TrigoView.vue

@@ -41,14 +41,43 @@
 			<div v-else-if="gameMode === 'vs-people'" class="view-status people-mode">
 				<div class="room-info">
 					<span class="room-label">Room:</span>
-					<span class="room-code">ABC123</span>
+					<span class="room-code">{{ playerStore.roomId || "---" }}</span>
+					<button
+						v-if="playerStore.roomId"
+						class="btn-copy-room"
+						@click="copyRoomCode"
+						title="Copy room code"
+					>
+						📋
+					</button>
 				</div>
+
 				<div class="players-info">
-					<span class="player-name">You (Black)</span>
+					<div class="player-display" :class="{ 'on-turn': isLocalPlayerTurn }">
+						<inline-nickname-editor
+							:nickname="playerStore.nickname"
+							:editable="true"
+							:player-color="playerStore.playerColor"
+							@update="updateLocalNickname"
+						/>
+					</div>
+
 					<span class="vs-divider">vs</span>
-					<span class="player-name">Waiting...</span>
+
+					<div class="player-display" :class="{ 'on-turn': !isLocalPlayerTurn }">
+						<inline-nickname-editor
+							v-if="playerStore.opponentNickname"
+							:nickname="playerStore.opponentNickname"
+							:editable="false"
+							:player-color="opponentPlayerColor"
+						/>
+						<span v-else class="waiting-text">Waiting...</span>
+					</div>
 				</div>
-				<span class="connection-status connected">🟢 Connected</span>
+
+				<span class="connection-status" :class="connectionStatusClass">
+					{{ connectionStatusIcon }} {{ connectionStatusText }}
+				</span>
 			</div>
 
 			<!-- Library Mode: Game Info & Controls -->
@@ -62,6 +91,60 @@
 					<button class="btn-library btn-export" title="Export TGN">📤 Export</button>
 				</div>
 			</div>
+
+			<!-- Header Controls (right side) -->
+			<div class="header-controls" v-if="gameMode === 'single'">
+				<select v-model="selectedBoardShape" class="board-shape-select">
+					<option value="3x3x3">3×3×3</option>
+					<option value="5x5x5">5×5×5</option>
+					<option value="7x7x7">7×7×7</option>
+					<option value="9x9x1">9×9×1 (2D)</option>
+					<option value="9x9x9">9×9×9</option>
+					<option value="5x5x1">5×5×1 (2D)</option>
+					<option value="7x7x1">7×7×1 (2D)</option>
+				</select>
+				<button class="btn-reset" @click="newGame">
+					{{ gameStarted ? "Reset" : "Start" }}
+				</button>
+			</div>
+
+			<div class="header-controls" v-else-if="gameMode === 'vs-ai'">
+				<select v-model="selectedBoardShape" class="board-shape-select">
+					<option value="3x3x3">3×3×3</option>
+					<option value="5x5x5">5×5×5</option>
+					<option value="7x7x7">7×7×7</option>
+					<option value="9x9x1">9×9×1 (2D)</option>
+					<option value="9x9x9">9×9×9</option>
+					<option value="5x5x1">5×5×1 (2D)</option>
+					<option value="7x7x1">7×7×1 (2D)</option>
+				</select>
+				<button class="btn-reset" @click="newGame">
+					{{ gameStarted ? "Reset" : "Start" }}
+				</button>
+			</div>
+
+			<div class="header-controls" v-else-if="gameMode === 'vs-people'">
+				<select
+					v-model="preferredColor"
+					class="color-preference-select"
+					:disabled="gameStarted || connectionStatus === 'in-room'"
+				>
+					<option value="black">Play as Black</option>
+					<option value="white">Play as White</option>
+				</select>
+
+				<select v-model="selectedBoardShape" class="board-shape-select">
+					<option value="3x3x3">3×3×3</option>
+					<option value="5x5x5">5×5×5</option>
+					<option value="7x7x7">7×7×7</option>
+					<option value="9x9x1">9×9×1 (2D)</option>
+					<option value="9x9x9">9×9×9</option>
+					<option value="5x5x1">5×5×1 (2D)</option>
+					<option value="7x7x1">7×7×1 (2D)</option>
+				</select>
+
+				<button class="btn-reset" @click="resetMultiplayerGame">Reset</button>
+			</div>
 		</div>
 
 		<div class="view-body">
@@ -213,36 +296,6 @@
 						</div>
 					</div>
 				</div>
-
-				<!-- Game Settings -->
-				<div class="panel-section settings-section">
-					<h3 class="section-title">Settings</h3>
-					<div class="settings-content">
-						<div class="setting-item">
-							<label for="board-shape">
-								Board Shape:
-								<span
-									v-if="isBoardShapeDirty"
-									class="dirty-indicator"
-									title="Board shape will change on next game"
-									>*</span
-								>
-							</label>
-							<select id="board-shape" v-model="selectedBoardShape">
-								<option value="3*3*3">3×3×3</option>
-								<option value="5*5*5">5×5×5</option>
-								<option value="7*7*7">7×7×7</option>
-								<option value="9*9*1">9×9×1 (2D)</option>
-								<option value="13*13*1">13×13×1 (2D)</option>
-								<option value="19*19*1">19×19×1 (2D)</option>
-								<option value="9*9*2">9×9×2</option>
-							</select>
-						</div>
-						<button class="btn btn-primary btn-new-game" @click="newGame">
-							{{ gameStarted ? "Reset Game" : "Start Game" }}
-						</button>
-					</div>
-				</div>
 			</div>
 		</div>
 
@@ -281,7 +334,11 @@
 	import { useRoute } from "vue-router";
 	import { TrigoViewport } from "@/services/trigoViewport";
 	import { useGameStore } from "@/stores/gameStore";
+	import { usePlayerStore } from "@/stores/playerStore";
 	import { useTrigoAgent } from "@/composables/useTrigoAgent";
+	import { useSocket } from "@/composables/useSocket";
+	import { useRoomHash } from "@/composables/useRoomHash";
+	import InlineNicknameEditor from "@/components/InlineNicknameEditor.vue";
 	import { storeToRefs } from "pinia";
 	import type { BoardShape } from "../../../inc/trigo";
 	import { Stone, validateMove, StoneType, validateTGN } from "../../../inc/trigo";
@@ -293,6 +350,31 @@
 	const route = useRoute();
 	const gameMode = computed(() => (route.meta.mode as string) || "single");
 
+	// Game store
+	const gameStore = useGameStore();
+	const {
+		game,
+		currentPlayer,
+		moveHistory,
+		currentMoveIndex,
+		capturedStones,
+		gameStatus,
+		boardShape,
+		moveCount,
+		isGameActive,
+		passCount
+	} = storeToRefs(gameStore);
+
+	// Player store (for multiplayer)
+	const playerStore = usePlayerStore();
+
+	// Socket.io (for multiplayer)
+	const socketApi = useSocket();
+
+	// Room hash management (for VS People mode)
+	const { getRoomIdFromHash, updateHash, clearHash, isValidRoomId } = useRoomHash();
+	const isJoiningRoom = ref(false);
+
 	// Helper functions for board shape parsing
 	const parseBoardShape = (shapeStr: string): BoardShape => {
 		const parts = shapeStr
@@ -312,21 +394,6 @@
 		return encodeAb0yz([move.x, move.y, move.z], [shape.x, shape.y, shape.z]);
 	};
 
-	// Use game store
-	const gameStore = useGameStore();
-	const {
-		currentPlayer,
-		moveHistory,
-		currentMoveIndex,
-		capturedStones,
-		gameStatus,
-		boardShape,
-		moveCount,
-		isGameActive,
-		passCount
-	} = storeToRefs(gameStore);
-
-
 	// AI Agent (for VS AI mode)
 	const aiAgent = useTrigoAgent();
 	const { isReady: aiReady, isThinking: aiThinking, error: aiError, lastMoveTime } = aiAgent;
@@ -340,6 +407,19 @@
 	const aiPlayerColor = ref<"black" | "white">(loadAIColor());
 	const humanPlayerColor = computed(() => (aiPlayerColor.value === "white" ? "black" : "white"));
 
+	// VS People color preference with storage persistence
+	const loadPreferredColor = (): "black" | "white" => {
+		const stored = storage.getString("vs-people-color-preference");
+		return stored === "black" || stored === "white" ? stored : "black";
+	};
+
+	const preferredColor = ref<"black" | "white">(loadPreferredColor());
+
+	// Watch for color preference changes and persist to storage
+	watch(preferredColor, (newColor) => {
+		storage.setString("vs-people-color-preference", newColor);
+	});
+
 	// Local state
 	const hoveredPosition = ref<string | null>(null);
 	const blackScore = ref(0);
@@ -497,29 +577,39 @@
 
 			// Apply AI move if valid
 			if (aiMove) {
-				console.log(`[TrigoView] AI suggests move at (${aiMove.x}, ${aiMove.y}, ${aiMove.z})`);
-
-				// Make move in store
-				const result = gameStore.makeMove(aiMove.x, aiMove.y, aiMove.z);
-
-				if (result.success && viewport) {
-					// Add AI stone to viewport
-					const stoneColor = gameStore.opponentPlayer;
-					viewport.addStone(aiMove.x, aiMove.y, aiMove.z, stoneColor);
-
-					// Remove captured stones
-					if (result.capturedPositions && result.capturedPositions.length > 0) {
-						result.capturedPositions.forEach((pos: any) => {
-							viewport.removeStone(pos.x, pos.y, pos.z);
-						});
-						console.log(`[TrigoView] AI captured ${result.capturedPositions.length} stone(s)`);
+				// Check if AI chose to pass
+				if (aiMove.isPass) {
+					console.log("[TrigoView] AI chose to pass");
+					const result = gameStore.pass();
+					if (result.success) {
+						console.log(`[TrigoView] AI pass applied successfully (${lastMoveTime.value.toFixed(0)}ms)`);
+					} else {
+						console.error("[TrigoView] Failed to apply AI pass");
 					}
+				} else {
+					console.log(`[TrigoView] AI suggests move at (${aiMove.x}, ${aiMove.y}, ${aiMove.z})`);
+
+					// Make move in store
+					const result = gameStore.makeMove(aiMove.x, aiMove.y, aiMove.z);
+
+					if (result.success && viewport) {
+						// Add AI stone to viewport
+						const stoneColor = gameStore.opponentPlayer;
+						viewport.addStone(aiMove.x, aiMove.y, aiMove.z, stoneColor);
+
+						// Remove captured stones
+						if (result.capturedPositions && result.capturedPositions.length > 0) {
+							result.capturedPositions.forEach((pos: any) => {
+								viewport.removeStone(pos.x, pos.y, pos.z);
+							});
+							console.log(`[TrigoView] AI captured ${result.capturedPositions.length} stone(s)`);
+						}
 
-					console.log(`[TrigoView] AI move applied successfully (${lastMoveTime.value.toFixed(0)}ms)`);
+						console.log(`[TrigoView] AI move applied successfully (${lastMoveTime.value.toFixed(0)}ms)`);
+					}
 				}
 			} else {
-				console.log("[TrigoView] AI chose to pass");
-				// Handle AI pass if needed
+				console.log("[TrigoView] AI returned no move");
 			}
 		} catch (err) {
 			console.error("[TrigoView] Failed to generate AI move:", err);
@@ -527,11 +617,39 @@
 	};
 
 
+	// Sync viewport with current game state (for undo/redo/reset)
+	const syncViewportWithGame = () => {
+		if (!viewport) return;
+
+		// Get all stones from game store and add to viewport
+		const stones = gameStore.getAllStones();
+		for (const stone of stones) {
+			viewport.addStone(stone.x, stone.y, stone.z, stone.color);
+		}
+
+		console.log(`[TrigoView] Synced viewport with ${stones.length} stones`);
+	};
+
+
 	// Handle stone placement
 	const handleStoneClick = async (x: number, y: number, z: number) => {
 		if (!gameStarted.value) return;
 
-		// Make move in store
+		// VS People mode: validate turn and emit socket event
+		if (gameMode.value === "vs-people") {
+			// Check if it's the local player's turn
+			if (!isLocalPlayerTurn.value) {
+				console.log("[TrigoView] Not your turn, ignoring click");
+				return;
+			}
+
+			// Emit move to server (server will validate and broadcast)
+			console.log(`[TrigoView] Emitting makeMove: (${x}, ${y}, ${z})`);
+			socketApi.makeMove(x, y, z);
+			return;
+		}
+
+		// Single player and VS AI mode: make move locally
 		const result = gameStore.makeMove(x, y, z);
 
 		if (result.success && viewport) {
@@ -656,7 +774,40 @@
 		}
 	};
 
+	// Reset game for multiplayer (VS People mode)
+	const resetMultiplayerGame = () => {
+		if (!confirm("Reset the game? This will clear all moves.")) return;
+
+		const shape = parseBoardShape(selectedBoardShape.value);
+		const swapColors = playerStore.playerColor !== preferredColor.value;
+
+		socketApi.socket.emit("resetGame", {
+			boardShape: shape,
+			swapColors: swapColors
+		}, (response: any) => {
+			if (response.success) {
+				console.log("Multiplayer game reset successfully");
+				// Local reset is handled by gameReset event listener
+			} else {
+				console.error("Reset failed:", response.error);
+				alert(`Failed to reset game: ${response.error || "Unknown error"}`);
+			}
+		});
+	};
+
 	const pass = () => {
+		// VS People mode: validate turn and emit socket event
+		if (gameMode.value === "vs-people") {
+			if (!isLocalPlayerTurn.value) {
+				console.log("[TrigoView] Not your turn, cannot pass");
+				return;
+			}
+			console.log("[TrigoView] Emitting pass");
+			socketApi.pass();
+			return;
+		}
+
+		// Single player and VS AI mode: pass locally
 		const previousPlayer = currentPlayer.value;
 		const success = gameStore.pass();
 
@@ -840,6 +991,265 @@
 		}
 	};
 
+	// ===== VS People Mode: Nickname Management =====
+
+	// Computed properties for multiplayer
+	const opponentPlayerColor = computed(() => {
+		if (!playerStore.playerColor) return null;
+		return playerStore.playerColor === "black" ? "white" : "black";
+	});
+
+	const isLocalPlayerTurn = computed(() => {
+		return currentPlayer.value === playerStore.playerColor;
+	});
+
+	const connectionStatusClass = computed(() => {
+		return playerStore.connectionStatus === "in-room" ? "connected" : "disconnected";
+	});
+
+	const connectionStatusText = computed(() => {
+		if (playerStore.connectionStatus === "in-room") return "Connected";
+		if (playerStore.connectionStatus === "connected") return "Joining room...";
+		return "Disconnected";
+	});
+
+	const connectionStatusIcon = computed(() => {
+		if (playerStore.connectionStatus === "in-room") return "🟢";
+		if (playerStore.connectionStatus === "connected") return "🟡"; // Yellow while joining
+		return "🔴";
+	});
+
+	// Update local player nickname
+	const updateLocalNickname = (newNickname: string) => {
+		const success = playerStore.setNickname(newNickname);
+
+		if (!success) {
+			console.error("Failed to update nickname");
+			return;
+		}
+
+		// If in a room, broadcast nickname change to opponents
+		if (playerStore.isInRoom) {
+			socketApi.changeNickname(newNickname, (response: any) => {
+				if (!response.success) {
+					console.error("Failed to broadcast nickname change:", response.error);
+					alert(`Failed to change nickname: ${response.error}`);
+				}
+			});
+		}
+	};
+
+	// Copy room code to clipboard
+	const copyRoomCode = () => {
+		if (!playerStore.roomId) return;
+
+		navigator.clipboard
+			.writeText(playerStore.roomId)
+			.then(() => alert("Room code copied to clipboard!"))
+			.catch((err) => console.error("Failed to copy room code:", err));
+	};
+
+
+	// ===== Room Management Functions (VS People Mode) =====
+
+	/**
+	 * Wait for socket connection with timeout
+	 * Prevents race condition where hash is read before socket connects
+	 */
+	async function waitForSocketConnection(timeout = 5000): Promise<void> {
+		return new Promise((resolve, reject) => {
+			if (socketApi.socket.connected) {
+				resolve();
+				return;
+			}
+
+			const checkInterval = setInterval(() => {
+				if (socketApi.socket.connected) {
+					clearInterval(checkInterval);
+					clearTimeout(timeoutHandle);
+					resolve();
+				}
+			}, 100);
+
+			const timeoutHandle = setTimeout(() => {
+				clearInterval(checkInterval);
+				reject(new Error("Socket connection timeout"));
+			}, timeout);
+		});
+	}
+
+
+	/**
+	 * Initialize multiplayer room based on URL hash
+	 * - No hash: create new room
+	 * - Valid hash: join existing room
+	 * - Invalid hash: redirect to create new room
+	 */
+	async function initializeMultiplayerRoom() {
+		console.log("[TrigoView] ========== INITIALIZE MULTIPLAYER ROOM ==========");
+		console.log("[TrigoView] isJoiningRoom:", isJoiningRoom.value);
+		console.log("[TrigoView] Socket connected:", socketApi.socket.connected);
+		console.log("[TrigoView] Socket ID:", socketApi.socket.id);
+
+		if (isJoiningRoom.value) {
+			console.log("[TrigoView] Already joining, skipping");
+			return; // Prevent duplicate joins
+		}
+
+		const hashRoomId = getRoomIdFromHash();
+		console.log("[TrigoView] hashRoomId from URL:", hashRoomId);
+
+		if (!hashRoomId) {
+			// No hash: create new room
+			console.log("[TrigoView] No hash found, creating new room");
+			await createAndJoinRoom();
+		} else if (isValidRoomId(hashRoomId)) {
+			// Valid hash: join existing room
+			console.log("[TrigoView] Valid hash found, joining room:", hashRoomId);
+			await joinRoomByHash(hashRoomId);
+		} else {
+			// Invalid hash: redirect to create new room
+			console.warn(`[TrigoView] Invalid room ID in hash: ${hashRoomId}`);
+			clearHash();
+			await createAndJoinRoom();
+		}
+	}
+
+
+	/**
+	 * Create a new room and join it
+	 */
+	async function createAndJoinRoom() {
+		console.log("[TrigoView] createAndJoinRoom called, isJoiningRoom:", isJoiningRoom.value);
+		if (isJoiningRoom.value) {
+			console.log("[TrigoView] Already joining, returning");
+			return;
+		}
+		isJoiningRoom.value = true;
+		console.log("[TrigoView] Set isJoiningRoom to true");
+
+		try {
+			console.log("[TrigoView] Waiting for socket connection...");
+			await waitForSocketConnection();
+			console.log("[TrigoView] Socket connection ready, calling joinRoom");
+
+			socketApi.joinRoom({ nickname: playerStore.nickname }, (response: any) => {
+				console.log("[TrigoView] joinRoom callback received:", response);
+				isJoiningRoom.value = false;
+
+				if (response.success !== false && response.roomId) {
+					playerStore.joinRoom(response.roomId, response.playerColor);
+					updateHash(response.roomId);
+					console.log(`[TrigoView] Room created: ${response.roomId}`);
+				} else {
+					console.error("[TrigoView] Failed to create room:", response.error);
+					alert("Failed to create room. Please try again.");
+				}
+			});
+		} catch (err) {
+			isJoiningRoom.value = false;
+			console.error("[TrigoView] Socket connection failed:", err);
+			alert("Connection failed. Please check your internet and try again.");
+		}
+	}
+
+
+	/**
+	 * Join an existing room by room ID from hash
+	 */
+	async function joinRoomByHash(roomId: string) {
+		if (isJoiningRoom.value) return;
+		isJoiningRoom.value = true;
+
+		try {
+			await waitForSocketConnection();
+
+			socketApi.joinRoom({ roomId, nickname: playerStore.nickname }, (response: any) => {
+				isJoiningRoom.value = false;
+
+				if (response.success !== false && response.roomId) {
+					playerStore.joinRoom(response.roomId, response.playerColor);
+					console.log(`[TrigoView] Room joined: ${response.roomId}`);
+
+					// Extract opponent from players list
+					if (response.players && socketApi.socket.id) {
+						for (const [playerId, player] of Object.entries(response.players) as [string, any][]) {
+							if (playerId !== socketApi.socket.id) {
+								playerStore.setOpponentNickname(player.nickname);
+								console.log(`[TrigoView] Opponent found: ${player.nickname}`);
+								break;
+							}
+						}
+					}
+
+					// Start game if both players are present
+					const playerCount = response.players ? Object.keys(response.players).length : 0;
+					if (playerCount >= 2 && !gameStarted.value) {
+						gameStore.startGame();
+						if (viewport) {
+							viewport.setGameActive(true);
+						}
+						console.log("[TrigoView] Game started - both players present");
+					}
+				} else {
+					console.warn(`[TrigoView] Failed to join room:`, response.error);
+					handleJoinFailure(response.error || "Failed to join room");
+				}
+			});
+		} catch (err) {
+			isJoiningRoom.value = false;
+			console.error("[TrigoView] Socket connection failed:", err);
+			alert("Connection failed. Please check your internet and try again.");
+		}
+	}
+
+
+	/**
+	 * Handle room join failure
+	 * Clears invalid hash and creates new room
+	 */
+	function handleJoinFailure(error: string) {
+		clearHash();
+
+		if (error.includes("not found")) {
+			alert("Room not found. Creating a new room...");
+		} else if (error.includes("full")) {
+			alert("This room is full. Creating a new room...");
+		} else {
+			alert(`Failed to join room: ${error}. Creating a new room...`);
+		}
+
+		createAndJoinRoom();
+	}
+
+
+	/**
+	 * Handle browser navigation (back/forward) and manual hash edits
+	 */
+	function handleHashChange() {
+		if (gameMode.value !== "vs-people") return;
+
+		const currentHash = getRoomIdFromHash();
+		const currentRoom = playerStore.roomId;
+
+		if (currentHash !== currentRoom) {
+			if (currentHash && isValidRoomId(currentHash)) {
+				// User navigated to different room hash
+				if (currentRoom) socketApi.leaveRoom();
+				joinRoomByHash(currentHash);
+			} else {
+				// Invalid hash or removed hash
+				if (currentRoom) {
+					updateHash(currentRoom); // Restore correct hash
+				} else {
+					createAndJoinRoom(); // Create new room
+				}
+			}
+		}
+	}
+
+	// ===== Watchers =====
+
 	// Watch for current player changes to update viewport preview
 	watch(currentPlayer, (newPlayer) => {
 		if (viewport) {
@@ -862,6 +1272,20 @@
 		});
 	});
 
+	// Watch playerStore.roomId to sync URL hash (VS People mode)
+	watch(
+		() => playerStore.roomId,
+		(newRoomId) => {
+			if (gameMode.value !== "vs-people") return;
+
+			if (newRoomId) {
+				updateHash(newRoomId);
+			} else {
+				clearHash();
+			}
+		}
+	);
+
 	// Watch TGN modal to populate editable content when opened
 	watch(showTGNModal, (isVisible) => {
 		if (isVisible) {
@@ -876,8 +1300,12 @@
 	onMounted(() => {
 		console.log("TrigoDemo component mounted");
 
-		// Try to restore game state from session storage
-		const restoredFromStorage = gameStore.loadFromSessionStorage();
+		// In VS People mode, always start fresh (server maintains authoritative state)
+		// In other modes, try to restore from session storage
+		let restoredFromStorage = false;
+		if (gameMode.value !== "vs-people") {
+			restoredFromStorage = gameStore.loadFromSessionStorage();
+		}
 
 		// If not restored from storage, initialize new game
 		if (!restoredFromStorage) {
@@ -947,6 +1375,171 @@
 			});
 		}
 
+		// Setup socket listeners for VS People mode
+		if (gameMode.value === "vs-people") {
+			console.log("[TrigoView] Setting up socket listeners for VS People mode...");
+
+			// Listen for nickname changes
+			socketApi.onNicknameChanged((data) => {
+				console.log(
+					`[TrigoView] Player ${data.playerId} changed nickname: ${data.oldNickname} -> ${data.nickname}`
+				);
+
+				// If it's not us, update opponent nickname
+				if (data.playerId !== socketApi.socket.id) {
+					playerStore.setOpponentNickname(data.nickname);
+				}
+			});
+
+			// Listen for game updates (moves, passes, undo, redo)
+			socketApi.onGameUpdate((data) => {
+				console.log("[TrigoView] Game update received:", data);
+
+				// Update current player from server
+				if (data.currentPlayer) {
+					gameStore.setCurrentPlayer(data.currentPlayer);
+				}
+
+				// Handle different actions
+				if (data.action === "move" && data.lastMove) {
+					const { x, y, z } = data.lastMove;
+					// Apply move to local game state
+					const result = gameStore.makeMove(x, y, z);
+
+					if (result.success && viewport) {
+						// Add stone to viewport
+						const stoneColor = gameStore.opponentPlayer;
+						viewport.addStone(x, y, z, stoneColor);
+
+						// Remove captured stones
+						if (data.capturedPositions && data.capturedPositions.length > 0) {
+							data.capturedPositions.forEach((pos: { x: number; y: number; z: number }) => {
+								viewport.removeStone(pos.x, pos.y, pos.z);
+							});
+							console.log(`[TrigoView] Captured ${data.capturedPositions.length} stone(s)`);
+						}
+
+						// Hide territory visualization
+						viewport.hideDomainCubes();
+						showTerritoryMode.value = false;
+					}
+				} else if (data.action === "pass") {
+					gameStore.pass();
+					console.log("[TrigoView] Pass received from server");
+				} else if (data.action === "undo" || data.action === "redo") {
+					// For undo/redo, reload game from TGN
+					if (data.tgn && viewport) {
+						gameStore.loadFromTGN(data.tgn);
+						// Resync viewport with game state
+						viewport.clearBoard();
+						syncViewportWithGame();
+					}
+				}
+			});
+
+			// Listen for player joined
+			socketApi.onPlayerJoined((data) => {
+				console.log("[TrigoView] Player joined:", data);
+				playerStore.setOpponentNickname(data.nickname);
+
+				// Start game when second player joins
+				if (!gameStarted.value) {
+					gameStore.startGame();
+					if (viewport) {
+						viewport.setGameActive(true);
+					}
+					console.log("[TrigoView] Game started - opponent joined");
+				}
+			});
+
+			// Listen for player left
+			socketApi.onPlayerLeft((data) => {
+				console.log("[TrigoView] Player left:", data);
+				playerStore.setOpponentNickname(null);
+			});
+
+			// Listen for player disconnected
+			socketApi.onPlayerDisconnected((data) => {
+				console.log("[TrigoView] Player disconnected:", data);
+				if (data.playerId !== socketApi.socket.id) {
+					playerStore.setOpponentNickname(null);
+				}
+			});
+
+			// Listen for game ended
+			socketApi.onGameEnded((data) => {
+				console.log("[TrigoView] Game ended:", data);
+				alert(`Game ended! Winner: ${data.winner || "None"}\nReason: ${data.reason}`);
+			});
+
+			// Listen for game reset
+			socketApi.onGameReset((data) => {
+				console.log("[TrigoView] Game reset:", data);
+				// Reload game state
+				if (data.tgn) {
+					gameStore.loadFromTGN(data.tgn);
+				} else {
+					gameStore.resetGame(boardShape.value);
+				}
+				if (viewport) {
+					viewport.clearBoard();
+				}
+				// Update player colors if changed
+				if (data.players && socketApi.socket.id) {
+					const myPlayer = data.players[socketApi.socket.id];
+					if (myPlayer) {
+						playerStore.playerColor = myPlayer.color;
+					}
+				}
+			});
+
+			// Listen for errors
+			socketApi.onError((data) => {
+				console.error("[TrigoView] Socket error:", data.message);
+			});
+
+			// Set player ID when socket connects
+			if (socketApi.socket.id) {
+				playerStore.setPlayerId(socketApi.socket.id);
+			}
+
+			// Listen for browser navigation (back/forward) and manual hash edits
+			window.addEventListener("hashchange", handleHashChange);
+
+			// Handle socket connection and reconnection
+			socketApi.socket.on("connect", () => {
+				console.log("[TrigoView] Socket connected in VS People mode");
+
+				// Update player ID and connection status
+				if (socketApi.socket.id) {
+					playerStore.setPlayerId(socketApi.socket.id);
+				}
+
+				// Initialize room based on URL hash (only if not already in a room)
+				if (!playerStore.roomId && !isJoiningRoom.value) {
+					console.log("[TrigoView] Initializing room after socket connection");
+					initializeMultiplayerRoom();
+				}
+			});
+
+			// Handle socket disconnection
+			socketApi.socket.on("disconnect", () => {
+				console.log("[TrigoView] Socket disconnected in VS People mode");
+				// Don't reset roomId - we want to rejoin on reconnect
+				if (playerStore.roomId) {
+					playerStore.connectionStatus = "connected"; // Still have room info, just disconnected
+				} else {
+					playerStore.disconnect();
+				}
+			});
+
+			// If socket is already connected, initialize room immediately
+			if (socketApi.socket.connected) {
+				console.log("[TrigoView] Socket already connected, initializing room");
+				initializeMultiplayerRoom();
+			}
+		}
+
 		// Add keyboard shortcuts
 		window.addEventListener("keydown", handleKeyPress);
 	});
@@ -978,6 +1571,22 @@
 		// Remove keyboard shortcuts
 		window.removeEventListener("keydown", handleKeyPress);
 
+		// Cleanup socket listeners for VS People mode
+		if (gameMode.value === "vs-people") {
+			console.log("[TrigoView] Cleaning up socket listeners...");
+			socketApi.offNicknameChanged();
+			socketApi.offGameUpdate();
+			socketApi.offPlayerJoined();
+			socketApi.offPlayerLeft();
+			socketApi.offPlayerDisconnected();
+			socketApi.offGameEnded();
+			socketApi.offGameReset();
+			socketApi.offError();
+
+			// Remove hashchange listener
+			window.removeEventListener("hashchange", handleHashChange);
+		}
+
 		// Disconnect ResizeObserver
 		if (resizeObserver) {
 			resizeObserver.disconnect();
@@ -1081,7 +1690,7 @@
 
 		.view-header {
 			display: flex;
-			justify-content: center;
+			justify-content: space-between;
 			align-items: center;
 			padding: 1rem 2rem;
 			background: linear-gradient(135deg, #505050 0%, #454545 100%);
@@ -1225,6 +1834,21 @@
 						font-size: 1.1rem;
 					}
 
+					.btn-copy-room {
+						padding: 0.25rem 0.5rem;
+						background-color: transparent;
+						border: 1px solid #606060;
+						border-radius: 4px;
+						cursor: pointer;
+						font-size: 0.9rem;
+						transition: all 0.2s ease;
+
+						&:hover {
+							background-color: #505050;
+							border-color: #808080;
+						}
+					}
+
 					.players-info {
 						display: flex;
 						align-items: center;
@@ -1234,11 +1858,24 @@
 						border-radius: 8px;
 					}
 
+					.player-display {
+						transition: all 0.3s ease;
+
+						&.on-turn {
+							filter: brightness(1.3);
+						}
+					}
+
 					.player-name {
 						color: #e0e0e0;
 						font-weight: 600;
 					}
 
+					.waiting-text {
+						color: #9ca3af;
+						font-style: italic;
+					}
+
 					.vs-divider {
 						color: #606060;
 						font-weight: 500;
@@ -1325,6 +1962,68 @@
 			}
 		}
 
+		.header-controls {
+			display: flex;
+			align-items: center;
+			gap: 0.75rem;
+			margin-left: auto;
+
+			.board-shape-select,
+			.color-preference-select {
+				background: rgba(0, 0, 0, 0.3);
+				border: 1px solid rgba(255, 255, 255, 0.3);
+				border-radius: 4px;
+				color: #fff;
+				padding: 0.4rem 0.6rem;
+				font-size: 0.9rem;
+				cursor: pointer;
+				transition: background 0.2s;
+
+				&:hover {
+					background: rgba(0, 0, 0, 0.4);
+				}
+
+				&:disabled {
+					opacity: 0.5;
+					cursor: not-allowed;
+				}
+
+				// Ensure dropdown options are readable
+				option {
+					background: #3a3a3a;
+					color: #e0e0e0;
+				}
+			}
+
+			.color-preference-select {
+				min-width: 130px;
+			}
+
+			.board-shape-select {
+				min-width: 90px;
+			}
+
+			.btn-reset {
+				background: #e94560;
+				color: white;
+				border: none;
+				border-radius: 4px;
+				padding: 0.4rem 1rem;
+				font-size: 0.9rem;
+				font-weight: 600;
+				cursor: pointer;
+				transition: background 0.2s;
+
+				&:hover {
+					background: #d63850;
+				}
+
+				&:active {
+					background: #c02040;
+				}
+			}
+		}
+
 		.view-body {
 			display: flex;
 			flex: 1;
@@ -1690,68 +2389,6 @@
 					}
 				}
 
-				.settings-section {
-					.settings-content {
-						display: flex;
-						flex-direction: column;
-						gap: 1rem;
-
-						.setting-item {
-							display: flex;
-							align-items: center;
-							justify-content: space-between;
-
-							label {
-								font-weight: 600;
-								color: #a0a0a0;
-								display: flex;
-								align-items: center;
-								gap: 0.3rem;
-
-								.dirty-indicator {
-									color: #e94560;
-									font-size: 1.2rem;
-									font-weight: 700;
-									animation: pulse 2s ease-in-out infinite;
-								}
-							}
-
-							select {
-								padding: 0.5rem;
-								border: 2px solid #505050;
-								border-radius: 8px;
-								background-color: #484848;
-								color: #e0e0e0;
-								cursor: pointer;
-								font-weight: 600;
-
-								&:disabled {
-									opacity: 0.5;
-									cursor: not-allowed;
-								}
-							}
-						}
-
-						.btn-new-game {
-							width: 100%;
-							padding: 0.75rem;
-							background-color: #e94560;
-							color: #fff;
-							border: none;
-							border-radius: 8px;
-							font-weight: 700;
-							cursor: pointer;
-							transition: all 0.3s ease;
-							text-transform: uppercase;
-
-							&:hover {
-								background-color: #f95670;
-								transform: translateY(-2px);
-								box-shadow: 0 4px 12px rgba(233, 69, 96, 0.4);
-							}
-						}
-					}
-				}
 			}
 		}
 	}

trigo-web/app/vite.config.ts

@@ -4,10 +4,12 @@ import { fileURLToPath, URL } from "node:url";
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
-	// Load env file based on `mode` in the current working directory.
-	const env = loadEnv(mode, process.cwd(), "");
+	// Load env file from repository root (parent directory)
+	const env = loadEnv(mode, fileURLToPath(new URL("..", import.meta.url)), "");
 
 	return {
+		// Load .env files from repository root
+		envDir: "..",
 		plugins: [
 			vue(),
 			// Plugin to set correct MIME types

trigo-web/backend/.env

@@ -1,3 +1,9 @@
-PORT=3000
-CLIENT_URL=http://localhost:5173
-NODE_ENV=development
+# ============================================================================
+# Backend Server Configuration
+# ============================================================================
+# This file is DEPRECATED - all configuration is now in the root .env file
+# Backend should load environment variables from ../. env (repository root)
+#
+# To configure the backend, edit: ../. env
+# ============================================================================
+

trigo-web/backend/.env.local

@@ -0,0 +1,2 @@
+
+PORT=8157

trigo-web/backend/package-lock.json

@@ -22,6 +22,7 @@
 				"@types/node": "^20.5.0",
 				"nodemon": "^3.0.1",
 				"ts-node": "^10.9.1",
+				"tsx": "^4.20.6",
 				"typescript": "^5.2.2"
 			}
 		},
@@ -37,6 +38,422 @@
 				"node": ">=12"
 			}
 		},
+		"node_modules/@esbuild/aix-ppc64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
+			"integrity": "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==",
+			"cpu": [
+				"ppc64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"aix"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/android-arm": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.12.tgz",
+			"integrity": "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/android-arm64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.12.tgz",
+			"integrity": "sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/android-x64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.12.tgz",
+			"integrity": "sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/darwin-arm64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.12.tgz",
+			"integrity": "sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/darwin-x64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.12.tgz",
+			"integrity": "sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/freebsd-arm64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.12.tgz",
+			"integrity": "sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"freebsd"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/freebsd-x64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.12.tgz",
+			"integrity": "sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"freebsd"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/linux-arm": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.12.tgz",
+			"integrity": "sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/linux-arm64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.12.tgz",
+			"integrity": "sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/linux-ia32": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.12.tgz",
+			"integrity": "sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==",
+			"cpu": [
+				"ia32"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/linux-loong64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.12.tgz",
+			"integrity": "sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==",
+			"cpu": [
+				"loong64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/linux-mips64el": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.12.tgz",
+			"integrity": "sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==",
+			"cpu": [
+				"mips64el"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/linux-ppc64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.12.tgz",
+			"integrity": "sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==",
+			"cpu": [
+				"ppc64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/linux-riscv64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.12.tgz",
+			"integrity": "sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==",
+			"cpu": [
+				"riscv64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/linux-s390x": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.12.tgz",
+			"integrity": "sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==",
+			"cpu": [
+				"s390x"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/linux-x64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.12.tgz",
+			"integrity": "sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/netbsd-arm64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.12.tgz",
+			"integrity": "sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"netbsd"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/netbsd-x64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.12.tgz",
+			"integrity": "sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"netbsd"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/openbsd-arm64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.12.tgz",
+			"integrity": "sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"openbsd"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/openbsd-x64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.12.tgz",
+			"integrity": "sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"openbsd"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/openharmony-arm64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.12.tgz",
+			"integrity": "sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"openharmony"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/sunos-x64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.12.tgz",
+			"integrity": "sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"sunos"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/win32-arm64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.12.tgz",
+			"integrity": "sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/win32-ia32": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.12.tgz",
+			"integrity": "sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==",
+			"cpu": [
+				"ia32"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/win32-x64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.12.tgz",
+			"integrity": "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
 		"node_modules/@jridgewell/resolve-uri": {
 			"version": "3.1.2",
 			"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
@@ -613,6 +1030,47 @@
 				"node": ">= 0.4"
 			}
 		},
+		"node_modules/esbuild": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
+			"integrity": "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==",
+			"dev": true,
+			"hasInstallScript": true,
+			"bin": {
+				"esbuild": "bin/esbuild"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"optionalDependencies": {
+				"@esbuild/aix-ppc64": "0.25.12",
+				"@esbuild/android-arm": "0.25.12",
+				"@esbuild/android-arm64": "0.25.12",
+				"@esbuild/android-x64": "0.25.12",
+				"@esbuild/darwin-arm64": "0.25.12",
+				"@esbuild/darwin-x64": "0.25.12",
+				"@esbuild/freebsd-arm64": "0.25.12",
+				"@esbuild/freebsd-x64": "0.25.12",
+				"@esbuild/linux-arm": "0.25.12",
+				"@esbuild/linux-arm64": "0.25.12",
+				"@esbuild/linux-ia32": "0.25.12",
+				"@esbuild/linux-loong64": "0.25.12",
+				"@esbuild/linux-mips64el": "0.25.12",
+				"@esbuild/linux-ppc64": "0.25.12",
+				"@esbuild/linux-riscv64": "0.25.12",
+				"@esbuild/linux-s390x": "0.25.12",
+				"@esbuild/linux-x64": "0.25.12",
+				"@esbuild/netbsd-arm64": "0.25.12",
+				"@esbuild/netbsd-x64": "0.25.12",
+				"@esbuild/openbsd-arm64": "0.25.12",
+				"@esbuild/openbsd-x64": "0.25.12",
+				"@esbuild/openharmony-arm64": "0.25.12",
+				"@esbuild/sunos-x64": "0.25.12",
+				"@esbuild/win32-arm64": "0.25.12",
+				"@esbuild/win32-ia32": "0.25.12",
+				"@esbuild/win32-x64": "0.25.12"
+			}
+		},
 		"node_modules/escape-html": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
@@ -773,6 +1231,18 @@
 				"node": ">= 0.4"
 			}
 		},
+		"node_modules/get-tsconfig": {
+			"version": "4.13.0",
+			"resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.13.0.tgz",
+			"integrity": "sha512-1VKTZJCwBrvbd+Wn3AOgQP/2Av+TfTCOlE4AcRJE72W1ksZXbAx8PPBR9RzgTeSPzlPMHrbANMH3LbltH73wxQ==",
+			"dev": true,
+			"dependencies": {
+				"resolve-pkg-maps": "^1.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
+			}
+		},
 		"node_modules/glob-parent": {
 			"version": "5.1.2",
 			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
@@ -1188,6 +1658,15 @@
 				"node": ">=8.10.0"
 			}
 		},
+		"node_modules/resolve-pkg-maps": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
+			"integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
+			"dev": true,
+			"funding": {
+				"url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
+			}
+		},
 		"node_modules/safe-buffer": {
 			"version": "5.2.1",
 			"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -1552,6 +2031,25 @@
 				}
 			}
 		},
+		"node_modules/tsx": {
+			"version": "4.20.6",
+			"resolved": "https://registry.npmjs.org/tsx/-/tsx-4.20.6.tgz",
+			"integrity": "sha512-ytQKuwgmrrkDTFP4LjR0ToE2nqgy886GpvRSpU0JAnrdBYppuY5rLkRUYPU1yCryb24SsKBTL/hlDQAEFVwtZg==",
+			"dev": true,
+			"dependencies": {
+				"esbuild": "~0.25.0",
+				"get-tsconfig": "^4.7.5"
+			},
+			"bin": {
+				"tsx": "dist/cli.mjs"
+			},
+			"engines": {
+				"node": ">=18.0.0"
+			},
+			"optionalDependencies": {
+				"fsevents": "~2.3.3"
+			}
+		},
 		"node_modules/type-is": {
 			"version": "1.6.18",
 			"resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",

trigo-web/backend/package.json

@@ -1,10 +1,11 @@
 {
 	"name": "trigo-backend",
 	"version": "1.0.0",
+	"type": "module",
 	"description": "Backend server for Trigo game",
 	"main": "dist/backend/src/server.js",
 	"scripts": {
-		"dev": "nodemon --watch src --exec ts-node src/server.ts",
+		"dev": "nodemon --watch src --exec tsx src/server.ts",
 		"build": "tsc",
 		"start": "node dist/backend/src/server.js",
 		"test": "echo \"Error: no test specified\" && exit 1"
@@ -31,6 +32,7 @@
 		"@types/node": "^20.5.0",
 		"nodemon": "^3.0.1",
 		"ts-node": "^10.9.1",
+		"tsx": "^4.20.6",
 		"typescript": "^5.2.2"
 	}
 }

trigo-web/backend/src/server.ts

@@ -1,11 +1,42 @@
-const express = require("express");
-const { createServer } = require("http");
-const { Server } = require("socket.io");
-const cors = require("cors");
-const dotenv = require("dotenv");
-const path = require("path");
+import express from "express";
+import { createServer } from "http";
+import { Server } from "socket.io";
+import cors from "cors";
+import dotenv from "dotenv";
+import path from "path";
+import fs from "fs";
+import { fileURLToPath } from "url";
+import { GameManager } from "./services/gameManager";
+import { setupSocketHandlers } from "./sockets/gameSocket";
 
-dotenv.config();
+// Get __dirname equivalent in ES modules
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Load environment variables
+// Priority: .env.local > .env (load .env first, then .env.local overwrites)
+// When running via ts-node: __dirname = backend/src/, so go up 1 level
+// When running compiled: __dirname = dist/backend/src/, so go up 3 levels
+const isDev = __dirname.includes("/src") && !__dirname.includes("/dist");
+const levelsUp = isDev ? "../" : "../../../";
+const envPath = path.join(__dirname, levelsUp, ".env");
+const envLocalPath = path.join(__dirname, levelsUp, ".env.local");
+
+// Load .env first (base configuration)
+if (fs.existsSync(envPath)) {
+	dotenv.config({ path: envPath });
+	console.log("[Config] Loaded .env");
+} else {
+	console.log(`[Config] .env not found at: ${envPath}`);
+}
+
+// Load .env.local second (overrides .env for local development)
+if (fs.existsSync(envLocalPath)) {
+	dotenv.config({ path: envLocalPath, override: true });
+	console.log("[Config] Loaded .env.local (overriding .env)");
+} else {
+	console.log(`[Config] .env.local not found at: ${envLocalPath}`);
+}
 
 const app = express();
 const httpServer = createServer(app);
@@ -20,8 +51,17 @@ const io = new Server(httpServer, {
 	}
 });
 
-const PORT = process.env.PORT || 3000;
-const HOST = process.env.HOST || "localhost";
+// Create GameManager instance
+const gameManager = new GameManager();
+
+const PORT = parseInt(process.env.PORT || "3000", 10);
+const HOST = process.env.HOST || "0.0.0.0";
+
+console.log(`[Config] Server Configuration:`);
+console.log(`[Config]   PORT: ${PORT}`);
+console.log(`[Config]   HOST: ${HOST}`);
+console.log(`[Config]   NODE_ENV: ${process.env.NODE_ENV || "development"}`);
+console.log(`[Config]   CLIENT_URL: ${process.env.CLIENT_URL || "not set"}`);
 
 // Middleware
 app.use(cors());
@@ -50,7 +90,10 @@ app.get("/health", (_req: any, res: any) => {
 io.on("connection", (socket: any) => {
 	console.log(`New client connected: ${socket.id}`);
 
-	// Echo test handler
+	// Setup game-related socket handlers
+	setupSocketHandlers(io, socket, gameManager);
+
+	// Echo test handler (for testing)
 	socket.on("echo", (data: any, callback: any) => {
 		const timestamp = new Date().toISOString();
 		const responseMessage = `Hello from server! Received: "${data.message}" at ${timestamp}`;

trigo-web/backend/src/services/gameManager.ts

@@ -16,6 +16,7 @@ export interface GameState {
 
 export interface GameRoom {
 	id: string;
+	adminId: string; // Room creator who has admin permissions
 	players: { [playerId: string]: Player };
 	game: TrigoGame; // The actual game instance
 	gameState: GameState; // Game status metadata
@@ -32,17 +33,21 @@ export class GameManager {
 		console.log("GameManager initialized");
 	}
 
-	createRoom(playerId: string, nickname: string, boardShape?: BoardShape): GameRoom | null {
+	createRoom(playerId: string, nickname: string, boardShape?: BoardShape, preferredColor?: "black" | "white"): GameRoom | null {
 		const roomId = this.generateRoomId();
 		const shape = boardShape || this.defaultBoardShape;
 
+		// Use preferred color if specified, default to black
+		const playerColor = preferredColor || "black";
+
 		const room: GameRoom = {
 			id: roomId,
+			adminId: playerId, // Room creator is admin
 			players: {
 				[playerId]: {
 					id: playerId,
 					nickname,
-					color: "black",
+					color: playerColor,
 					connected: true
 				}
 			},
@@ -72,7 +77,7 @@ export class GameManager {
 		return room;
 	}
 
-	joinRoom(roomId: string, playerId: string, nickname: string): GameRoom | null {
+	joinRoom(roomId: string, playerId: string, nickname: string, preferredColor?: "black" | "white"): GameRoom | null {
 		const room = this.rooms.get(roomId);
 		if (!room) {
 			return null;
@@ -83,11 +88,22 @@ export class GameManager {
 			return null; // Room is full
 		}
 
-		// Assign white color to the second player
+		// Try to assign preferred color if specified
+		const firstPlayer = Object.values(room.players)[0];
+		let assignedColor: "black" | "white";
+
+		if (preferredColor && preferredColor !== firstPlayer.color) {
+			// Preferred color is available
+			assignedColor = preferredColor;
+		} else {
+			// Assign opposite of first player's color
+			assignedColor = firstPlayer.color === "black" ? "white" : "black";
+		}
+
 		room.players[playerId] = {
 			id: playerId,
 			nickname,
-			color: "white",
+			color: assignedColor,
 			connected: true
 		};
 
@@ -207,6 +223,98 @@ export class GameManager {
 		return room.game.undo();
 	}
 
+
+	/**
+	 * Redo the last undone move (forward in history)
+	 */
+	redoMove(roomId: string, playerId: string): boolean {
+		const room = this.rooms.get(roomId);
+		if (!room) return false;
+
+		const player = room.players[playerId];
+		if (!player) return false;
+
+		if (room.gameState.gameStatus !== "playing") {
+			return false;
+		}
+
+		return room.game.redo();
+	}
+
+
+	/**
+	 * Reset the game to initial state (new game in same room)
+	 * Only admin can reset the game
+	 */
+	resetGame(
+		roomId: string,
+		adminId: string,
+		options?: {
+			boardShape?: BoardShape;
+			playerColors?: { [playerId: string]: "black" | "white" };
+		}
+	): { success: boolean; error?: string } {
+		const room = this.rooms.get(roomId);
+		if (!room) return { success: false, error: "Room not found" };
+
+		// Check admin permission
+		if (room.adminId !== adminId) {
+			return { success: false, error: "Only room admin can reset the game" };
+		}
+
+		const boardShape = options?.boardShape;
+		const playerColors = options?.playerColors;
+
+		// Apply player color assignments if provided
+		if (playerColors) {
+			const playerIds = Object.keys(room.players);
+			for (const playerId of playerIds) {
+				if (playerColors[playerId]) {
+					room.players[playerId].color = playerColors[playerId];
+				}
+			}
+			console.log(`Player colors assigned:`, playerColors);
+		}
+
+		// If board shape is provided and different from current, create a new game
+		if (boardShape) {
+			const currentShape = room.game.getShape();
+			if (
+				boardShape.x !== currentShape.x ||
+				boardShape.y !== currentShape.y ||
+				boardShape.z !== currentShape.z
+			) {
+				// Create new game with new board shape
+				room.game = new TrigoGame(boardShape, {
+					onStepAdvance: (_step, history) => {
+						console.log(`Step ${history.length}: Player made move`);
+					},
+					onCapture: (captured) => {
+						console.log(`Captured ${captured.length} stones`);
+					},
+					onWin: (winner) => {
+						console.log(`Game won by ${winner}`);
+					}
+				});
+				console.log(`Game ${roomId} reset with new board shape: ${boardShape.x}x${boardShape.y}x${boardShape.z}`);
+			} else {
+				// Same shape, just reset
+				room.game.reset();
+				console.log(`Game ${roomId} reset to initial state`);
+			}
+		} else {
+			// No shape provided, just reset
+			room.game.reset();
+			console.log(`Game ${roomId} reset to initial state`);
+		}
+
+		room.gameState.gameStatus = "playing";
+		room.gameState.winner = null;
+		room.startedAt = new Date();
+
+		return { success: true };
+	}
+
 	/**
 	 * Get game board state for a room
 	 */

trigo-web/backend/src/sockets/gameSocket.ts

@@ -5,52 +5,141 @@ export function setupSocketHandlers(io: Server, socket: Socket, gameManager: Gam
 	console.log(`Setting up socket handlers for ${socket.id}`);
 
 	// Join room
-	socket.on("joinRoom", (data: { roomId?: string; nickname: string }) => {
-		const { roomId, nickname } = data;
+	socket.on(
+		"joinRoom",
+		(data: { roomId?: string; nickname: string; preferredColor?: "black" | "white" }, callback?: (response: any) => void) => {
+			console.log("[gameSocket] joinRoom event received:", {
+				roomId: data.roomId,
+				nickname: data.nickname,
+				preferredColor: data.preferredColor,
+				hasCallback: !!callback,
+				socketId: socket.id
+			});
 
-		// Create or join room
-		const room = roomId
-			? gameManager.joinRoom(roomId, socket.id, nickname)
-			: gameManager.createRoom(socket.id, nickname);
+			const { roomId, nickname, preferredColor } = data;
 
-		if (room) {
-			socket.join(room.id);
+			// Try to create or join room
+			try {
+				let room;
 
-			// Get complete game data for frontend
-			const board = gameManager.getGameBoard(room.id);
-			const currentPlayer = gameManager.getCurrentPlayer(room.id);
-			const stats = gameManager.getGameStats(room.id);
+				if (roomId) {
+					// Joining existing room
+					const existingRoom = gameManager.getRoom(roomId);
 
-			socket.emit("roomJoined", {
-				roomId: room.id,
-				playerId: socket.id,
-				playerColor: room.players[socket.id]?.color,
-				gameState: {
-					board,
-					boardShape: room.game.getShape(),
-					currentPlayer,
-					moveHistory: room.game.getHistory(),
-					currentMoveIndex: room.game.getCurrentStep(),
-					capturedStones: {
-						black: stats?.capturedByBlack || 0,
-						white: stats?.capturedByWhite || 0
-					},
-					gameStatus: room.gameState.gameStatus,
-					winner: room.gameState.winner
+					if (!existingRoom) {
+						// Room doesn't exist
+						if (callback) {
+							callback({
+								success: false,
+								error: "Room not found",
+								errorCode: "ROOM_NOT_FOUND"
+							});
+						}
+						return;
+					}
+
+					const playerCount = Object.keys(existingRoom.players).length;
+					if (playerCount >= 2) {
+						// Room is full
+						if (callback) {
+							callback({
+								success: false,
+								error: "Room is full",
+								errorCode: "ROOM_FULL"
+							});
+						}
+						return;
+					}
+
+					room = gameManager.joinRoom(roomId, socket.id, nickname, preferredColor);
+				} else {
+					// Creating new room
+					room = gameManager.createRoom(socket.id, nickname, undefined, preferredColor);
 				}
-			});
 
-			// Notify other players
-			socket.to(room.id).emit("playerJoined", {
-				playerId: socket.id,
-				nickname: nickname
-			});
+				if (room) {
+					socket.join(room.id);
 
-			console.log(`Player ${socket.id} joined room ${room.id}`);
-		} else {
-			socket.emit("error", { message: "Failed to join room" });
+					// Get complete game data for frontend
+					const currentPlayer = gameManager.getCurrentPlayer(room.id);
+					const stats = gameManager.getGameStats(room.id);
+					const tgn = room.game.toTGN();
+
+					// Get player list with colors
+					const players: { [playerId: string]: { nickname: string; color: "black" | "white" } } = {};
+					for (const [pid, player] of Object.entries(room.players)) {
+						players[pid] = {
+							nickname: player.nickname,
+							color: player.color
+						};
+					}
+
+					const response = {
+						success: true,
+						roomId: room.id,
+						playerId: socket.id,
+						playerColor: room.players[socket.id]?.color,
+						isAdmin: room.adminId === socket.id,
+						adminId: room.adminId,
+						players, // Include all players in room
+						gameState: {
+							boardShape: room.game.getShape(),
+							currentPlayer,
+							currentMoveIndex: room.game.getCurrentStep(),
+							capturedStones: {
+								black: stats?.capturedByBlack || 0,
+								white: stats?.capturedByWhite || 0
+							},
+							gameStatus: room.gameState.gameStatus,
+							winner: room.gameState.winner,
+							tgn
+						}
+					};
+
+					// Send response via callback
+					if (callback) {
+						console.log("[gameSocket] Sending response via callback:", {
+							roomId: response.roomId,
+							playerColor: response.playerColor
+						});
+						callback(response);
+					} else {
+						// Fallback to event emit for backward compatibility
+						console.log("[gameSocket] No callback, using roomJoined emit");
+						socket.emit("roomJoined", response);
+					}
+
+					// Notify other players
+					socket.to(room.id).emit("playerJoined", {
+						playerId: socket.id,
+						nickname: nickname
+					});
+
+					console.log(
+						`Player ${socket.id} ${roomId ? "joined" : "created"} room ${room.id}`
+					);
+				} else {
+					// Generic failure
+					if (callback) {
+						callback({
+							success: false,
+							error: "Failed to join or create room",
+							errorCode: "UNKNOWN_ERROR"
+						});
+					}
+				}
+			} catch (error) {
+				console.error(`Error in joinRoom handler:`, error);
+				if (callback) {
+					callback({
+						success: false,
+						error: "Server error",
+						errorCode: "SERVER_ERROR"
+					});
+				}
+			}
 		}
-	});
+	);
 
 	// Leave room
 	socket.on("leaveRoom", () => {
@@ -71,23 +160,23 @@ export function setupSocketHandlers(io: Server, socket: Socket, gameManager: Gam
 		const room = gameManager.getPlayerRoom(socket.id);
 		if (room && gameManager.makeMove(room.id, socket.id, data)) {
 			// Get updated game data
-			const board = gameManager.getGameBoard(room.id);
 			const currentPlayer = gameManager.getCurrentPlayer(room.id);
 			const stats = gameManager.getGameStats(room.id);
 			const lastStep = room.game.getLastStep();
+			const tgn = room.game.toTGN();
 
 			// Broadcast game update to all players in the room
 			io.to(room.id).emit("gameUpdate", {
-				board,
 				currentPlayer,
+				action: "move",
 				lastMove: data,
 				capturedStones: {
 					black: stats?.capturedByBlack || 0,
 					white: stats?.capturedByWhite || 0
 				},
 				capturedPositions: lastStep?.capturedPositions,
-				moveHistory: room.game.getHistory(),
-				currentMoveIndex: room.game.getCurrentStep()
+				currentMoveIndex: room.game.getCurrentStep(),
+				tgn
 			});
 		} else {
 			socket.emit("error", { message: "Invalid move" });
@@ -99,12 +188,13 @@ export function setupSocketHandlers(io: Server, socket: Socket, gameManager: Gam
 		const room = gameManager.getPlayerRoom(socket.id);
 		if (room && gameManager.passTurn(room.id, socket.id)) {
 			const currentPlayer = gameManager.getCurrentPlayer(room.id);
+			const tgn = room.game.toTGN();
 
 			io.to(room.id).emit("gameUpdate", {
 				currentPlayer,
 				action: "pass",
-				moveHistory: room.game.getHistory(),
-				currentMoveIndex: room.game.getCurrentStep()
+				currentMoveIndex: room.game.getCurrentStep(),
+				tgn
 			});
 
 			// Check for consecutive passes (game end)
@@ -130,6 +220,150 @@ export function setupSocketHandlers(io: Server, socket: Socket, gameManager: Gam
 		}
 	});
 
+
+	// Undo move
+	socket.on("undoMove", (callback?: (response: any) => void) => {
+		const room = gameManager.getPlayerRoom(socket.id);
+
+		if (!room) {
+			if (callback) callback({ success: false, error: "Not in a room", errorCode: "NOT_IN_ROOM" });
+			return;
+		}
+
+		if (room.gameState.gameStatus !== "playing") {
+			if (callback) callback({ success: false, error: "Game not active", errorCode: "GAME_NOT_ACTIVE" });
+			return;
+		}
+
+		const success = gameManager.undoMove(room.id, socket.id);
+
+		if (success) {
+			const currentPlayer = gameManager.getCurrentPlayer(room.id);
+			const stats = gameManager.getGameStats(room.id);
+			const tgn = room.game.toTGN();
+
+			io.to(room.id).emit("gameUpdate", {
+				currentPlayer,
+				action: "undo",
+				currentMoveIndex: room.game.getCurrentStep(),
+				capturedStones: {
+					black: stats?.capturedByBlack || 0,
+					white: stats?.capturedByWhite || 0
+				},
+				tgn
+			});
+
+			if (callback) callback({ success: true });
+		} else {
+			if (callback) callback({ success: false, error: "Cannot undo", errorCode: "UNDO_FAILED" });
+		}
+	});
+
+
+	// Redo move
+	socket.on("redoMove", (callback?: (response: any) => void) => {
+		const room = gameManager.getPlayerRoom(socket.id);
+
+		if (!room) {
+			if (callback) callback({ success: false, error: "Not in a room", errorCode: "NOT_IN_ROOM" });
+			return;
+		}
+
+		if (room.gameState.gameStatus !== "playing") {
+			if (callback) callback({ success: false, error: "Game not active", errorCode: "GAME_NOT_ACTIVE" });
+			return;
+		}
+
+		if (!room.game.canRedo()) {
+			if (callback) callback({ success: false, error: "Nothing to redo", errorCode: "NOTHING_TO_REDO" });
+			return;
+		}
+
+		const success = gameManager.redoMove(room.id, socket.id);
+
+		if (success) {
+			const currentPlayer = gameManager.getCurrentPlayer(room.id);
+			const stats = gameManager.getGameStats(room.id);
+			const lastStep = room.game.getLastStep();
+			const tgn = room.game.toTGN();
+
+			io.to(room.id).emit("gameUpdate", {
+				currentPlayer,
+				action: "redo",
+				lastMove: lastStep?.position,
+				capturedStones: {
+					black: stats?.capturedByBlack || 0,
+					white: stats?.capturedByWhite || 0
+				},
+				capturedPositions: lastStep?.capturedPositions,
+				currentMoveIndex: room.game.getCurrentStep(),
+				tgn
+			});
+
+			if (callback) callback({ success: true });
+		} else {
+			if (callback) callback({ success: false, error: "Redo failed", errorCode: "REDO_FAILED" });
+		}
+	});
+
+
+	// Reset game
+	socket.on("resetGame", (
+		data?: {
+			boardShape?: { x: number; y: number; z: number };
+			playerColors?: { [playerId: string]: "black" | "white" };
+		} | ((response: any) => void),
+		callback?: (response: any) => void
+	) => {
+		const room = gameManager.getPlayerRoom(socket.id);
+
+		if (!room) {
+			const cb = typeof data === 'function' ? data : callback;
+			if (cb) cb({ success: false, error: "Not in a room", errorCode: "NOT_IN_ROOM" });
+			return;
+		}
+
+		// Handle both old signature (no data) and new signature (with options)
+		const options = typeof data === 'object' && data !== null ? {
+			boardShape: data.boardShape,
+			playerColors: data.playerColors
+		} : undefined;
+		const responseCb = typeof data === 'function' ? data : callback;
+
+		const result = gameManager.resetGame(room.id, socket.id, options);
+
+		if (result.success) {
+			const currentPlayer = gameManager.getCurrentPlayer(room.id);
+			const tgn = room.game.toTGN();
+
+			// Get updated player info with new colors
+			const players: { [playerId: string]: { nickname: string; color: "black" | "white" } } = {};
+			for (const [pid, player] of Object.entries(room.players)) {
+				players[pid] = {
+					nickname: player.nickname,
+					color: player.color
+				};
+			}
+
+			io.to(room.id).emit("gameReset", {
+				currentPlayer,
+				boardShape: room.game.getShape(),
+				currentMoveIndex: 0,
+				capturedStones: { black: 0, white: 0 },
+				players,
+				tgn
+			});
+
+			if (responseCb) responseCb({ success: true });
+		} else {
+			if (responseCb) responseCb({
+				success: false,
+				error: result.error || "Reset failed",
+				errorCode: result.error === "Only room admin can reset the game" ? "NOT_ADMIN" : "RESET_FAILED"
+			});
+		}
+	});
+
 	// Chat messages
 	socket.on("chatMessage", (data: { content: string }) => {
 		const room = gameManager.getPlayerRoom(socket.id);
@@ -143,6 +377,48 @@ export function setupSocketHandlers(io: Server, socket: Socket, gameManager: Gam
 		}
 	});
 
+	// Change nickname
+	socket.on(
+		"changeNickname",
+		(data: { nickname: string }, callback?: (response: any) => void) => {
+			const room = gameManager.getPlayerRoom(socket.id);
+
+			if (!room) {
+				const error = { success: false, error: "Not in a room" };
+				if (callback) callback(error);
+				return;
+			}
+
+			// Validate nickname
+			const validation = validateNickname(data.nickname);
+			if (!validation.valid) {
+				const error = { success: false, error: validation.error };
+				if (callback) callback(error);
+				return;
+			}
+
+			// Update player nickname
+			const player = room.players[socket.id];
+			if (player) {
+				const oldNickname = player.nickname;
+				player.nickname = data.nickname;
+
+				// Broadcast to all players in room
+				io.to(room.id).emit("nicknameChanged", {
+					playerId: socket.id,
+					nickname: data.nickname,
+					oldNickname: oldNickname
+				});
+
+				console.log(`Player ${socket.id} changed nickname: ${oldNickname} -> ${data.nickname}`);
+
+				if (callback) {
+					callback({ success: true, nickname: data.nickname });
+				}
+			}
+		}
+	);
+
 	// Handle disconnection
 	socket.on("disconnect", () => {
 		console.log(`Client disconnected: ${socket.id}`);
@@ -155,3 +431,33 @@ export function setupSocketHandlers(io: Server, socket: Socket, gameManager: Gam
 		}
 	});
 }
+
+
+/**
+ * Validate nickname according to the rules:
+ * - Length: 3-20 characters
+ * - Characters: alphanumeric + spaces only
+ * - No leading/trailing whitespace
+ */
+function validateNickname(nickname: string): { valid: boolean; error?: string } {
+	if (!nickname || typeof nickname !== "string") {
+		return { valid: false, error: "Invalid nickname" };
+	}
+
+	const trimmed = nickname.trim();
+
+	if (trimmed.length < 3) {
+		return { valid: false, error: "Nickname must be at least 3 characters" };
+	}
+	if (trimmed.length > 20) {
+		return { valid: false, error: "Nickname must be 20 characters or less" };
+	}
+	if (!/^[a-zA-Z0-9 ]+$/.test(trimmed)) {
+		return { valid: false, error: "Only letters, numbers, and spaces allowed" };
+	}
+	if (trimmed !== nickname) {
+		return { valid: false, error: "No leading or trailing spaces allowed" };
+	}
+
+	return { valid: true };
+}

trigo-web/inc/config.ts

@@ -0,0 +1,181 @@
+/**
+ * Configuration Utilities
+ *
+ * Provides centralized access to environment variables for ONNX model paths
+ * and other configuration values.
+ *
+ * Works across different contexts:
+ * - Frontend (Vite): Uses import.meta.env.VITE_* variables
+ * - Backend/Tools (Node): Uses process.env.* variables with dotenv
+ */
+
+import * as path from "path";
+import { fileURLToPath } from "url";
+
+
+// Environment detection
+const isNode = typeof process !== "undefined" && process.versions?.node;
+const isBrowser = typeof window !== "undefined";
+
+
+/**
+ * ONNX Session Options
+ */
+export interface OnnxSessionOptions {
+	executionProviders: string[];
+	intraOpNumThreads?: number;
+	interOpNumThreads?: number;
+	graphOptimizationLevel?: "disabled" | "basic" | "extended" | "all";
+	enableCpuMemArena?: boolean;
+	enableMemPattern?: boolean;
+}
+
+
+/**
+ * Get ONNX model paths
+ * Returns paths appropriate for the current environment
+ */
+export function getOnnxModelPaths(): {
+	evaluationModel: string;
+	treeModel: string;
+} {
+	// Frontend (Vite environment)
+	if (isBrowser && typeof import.meta.env !== "undefined") {
+		const evaluationModel = import.meta.env.VITE_ONNX_EVALUATION_MODEL;
+		const treeModel = import.meta.env.VITE_ONNX_TREE_MODEL;
+
+		if (!evaluationModel || !treeModel) {
+			throw new Error("ONNX model paths not configured. Check VITE_ONNX_EVALUATION_MODEL and VITE_ONNX_TREE_MODEL in .env");
+		}
+
+		return { evaluationModel, treeModel };
+	}
+
+	// Backend/Tools (Node environment)
+	if (isNode) {
+		const evaluationModel = process.env.ONNX_EVALUATION_MODEL;
+		const treeModel = process.env.ONNX_TREE_MODEL;
+
+		if (!evaluationModel || !treeModel) {
+			throw new Error("ONNX model paths not configured. Check ONNX_EVALUATION_MODEL and ONNX_TREE_MODEL in .env");
+		}
+
+		return { evaluationModel, treeModel };
+	}
+
+	// Should not reach here
+	throw new Error("Unknown environment - cannot determine model paths");
+}
+
+
+/**
+ * Get ONNX session options from environment variables
+ * Returns session options with threading and optimization configuration
+ */
+export function getOnnxSessionOptions(): OnnxSessionOptions {
+	// Default values
+	const options: OnnxSessionOptions = {
+		executionProviders: ["cpu"],
+		graphOptimizationLevel: "all",
+		enableCpuMemArena: true,
+		enableMemPattern: true
+	};
+
+	// Frontend (Vite environment)
+	if (isBrowser && typeof import.meta.env !== "undefined") {
+		const intraThreadsEnv = import.meta.env.VITE_ONNX_INTRA_OP_NUM_THREADS;
+		const interThreadsEnv = import.meta.env.VITE_ONNX_INTER_OP_NUM_THREADS;
+		const graphOptEnv = import.meta.env.VITE_ONNX_GRAPH_OPTIMIZATION_LEVEL;
+
+		if (intraThreadsEnv) options.intraOpNumThreads = parseInt(intraThreadsEnv, 10);
+		if (interThreadsEnv) options.interOpNumThreads = parseInt(interThreadsEnv, 10);
+		if (graphOptEnv) options.graphOptimizationLevel = graphOptEnv as any;
+	}
+
+	// Backend/Tools (Node environment)
+	if (isNode) {
+		const intraThreadsEnv = process.env.ONNX_INTRA_OP_NUM_THREADS;
+		const interThreadsEnv = process.env.ONNX_INTER_OP_NUM_THREADS;
+		const graphOptEnv = process.env.ONNX_GRAPH_OPTIMIZATION_LEVEL;
+		const cpuMemArenaEnv = process.env.ONNX_ENABLE_CPU_MEM_ARENA;
+		const memPatternEnv = process.env.ONNX_ENABLE_MEM_PATTERN;
+
+		if (intraThreadsEnv) options.intraOpNumThreads = parseInt(intraThreadsEnv, 10);
+		if (interThreadsEnv) options.interOpNumThreads = parseInt(interThreadsEnv, 10);
+		if (graphOptEnv) options.graphOptimizationLevel = graphOptEnv as any;
+		if (cpuMemArenaEnv) options.enableCpuMemArena = cpuMemArenaEnv === "true";
+		if (memPatternEnv) options.enableMemPattern = memPatternEnv === "true";
+	}
+
+	return options;
+}
+
+
+/**
+ * Get absolute path to model file (Node.js only)
+ * Resolves relative paths to absolute paths from project root
+ */
+export function getAbsoluteModelPath(relativePath: string): string {
+	if (!isNode) {
+		return relativePath; // Browser environment - return as-is
+	}
+
+	// If already absolute, return as-is
+	if (path.isAbsolute(relativePath)) {
+		return relativePath;
+	}
+
+	// Resolve relative to project root
+	const __filename = fileURLToPath(import.meta.url);
+	const __dirname = path.dirname(__filename);
+	const rootDir = path.resolve(__dirname, "..");
+	return path.resolve(rootDir, relativePath);
+}
+
+
+/**
+ * Load environment variables from .env file (Node.js only)
+ * Call this at the start of tool scripts
+ *
+ * Loading order:
+ * 1. .env (base configuration, committed to git)
+ * 2. .env.local (local overrides, not committed to git)
+ */
+export async function loadEnvConfig(): Promise<void> {
+	if (!isNode) {
+		console.warn("[Config] loadEnvConfig() called in non-Node environment");
+		return;
+	}
+
+	try {
+		// Dynamically import dotenv (ESM-compatible)
+		const dotenv = (await import("dotenv")).default;
+		const __filename = fileURLToPath(import.meta.url);
+		const __dirname = path.dirname(__filename);
+		const rootDir = path.resolve(__dirname, "..");
+
+		// Load base .env file
+		const baseResult = dotenv.config({ path: path.join(rootDir, ".env") });
+
+		if (baseResult.error) {
+			console.warn("[Config] Failed to load .env:", baseResult.error.message);
+		} else {
+			console.log("[Config] ✓ Base environment variables loaded from .env");
+		}
+
+		// Load .env.local for local overrides (if exists)
+		// Use override: true to allow .env.local to override .env values
+		const localResult = dotenv.config({
+			path: path.join(rootDir, ".env.local"),
+			override: true
+		});
+
+		if (!localResult.error) {
+			console.log("[Config] ✓ Local overrides loaded from .env.local");
+		}
+		// Silently ignore if .env.local doesn't exist (optional file)
+
+	} catch (error) {
+		console.warn("[Config] dotenv not available:", error);
+	}
+}

trigo-web/inc/mctsAgent.ts

@@ -0,0 +1,855 @@
+/**
+ * Monte Carlo Tree Search (MCTS) Agent for Trigo
+ *
+ * Implements AlphaGo Zero-style MCTS with:
+ * - PUCT (Polynomial Upper Confidence Trees) selection
+ * - Neural network guidance for policy and value
+ * - Visit count statistics for training data generation
+ *
+ * Based on: Silver et al., "Mastering the Game of Go without Human Knowledge"
+ */
+
+import { TrigoGame } from "./trigo/game";
+import type { Move } from "./trigo/types";
+import { TrigoTreeAgent } from "./trigoTreeAgent";
+import { TrigoEvaluationAgent } from "./trigoEvaluationAgent";
+
+
+/**
+ * MCTS Configuration
+ */
+export interface MCTSConfig {
+	numSimulations: number;      // Number of MCTS simulations per move (default: 600)
+	cPuct: number;               // PUCT exploration constant (default: 1.0)
+	temperature: number;         // Selection temperature for first 30 moves (default: 1.0)
+	dirichletAlpha: number;      // Dirichlet noise alpha parameter (default: 0.03)
+	dirichletEpsilon: number;    // Dirichlet noise mixing weight (default: 0.25)
+}
+
+
+/**
+ * MCTS Tree Node
+ * Stores search statistics for all legal actions from a given game state
+ *
+ * Memory optimization: Only root node stores the full game state.
+ * Non-root nodes only store the action that led to them.
+ * During simulation, a working state is cloned once and mutated along the path.
+ */
+interface MCTSNode {
+	state: TrigoGame | null;     // Game state (only stored at root node for memory efficiency)
+	parent: MCTSNode | null;     // Parent node (null for root)
+	action: Move | null;         // Action that led to this node (null for root)
+
+	// MCTS statistics per action (action key -> value)
+	N: Map<string, number>;      // Visit counts N(s,a)
+	W: Map<string, number>;      // Total action-value W(s,a)
+	Q: Map<string, number>;      // Mean action-value Q(s,a) = W(s,a) / N(s,a)
+	P: Map<string, number>;      // Prior probabilities P(s,a) from policy network
+
+	children: Map<string, MCTSNode>;  // Child nodes (action key -> child node)
+	expanded: boolean;           // Whether this node has been expanded
+	terminalValue: number | null; // Cached terminal value (null if not terminal or not computed)
+
+	// Terminal propagation optimization (GPT-5.1 suggestions)
+	depth: number;               // Distance from root (0 for root)
+	playerToMove: number;        // Player to move at this node (1=Black, 2=White)
+}
+
+
+/**
+ * MCTS Agent
+ * Combines tree search with neural network evaluation
+ */
+export class MCTSAgent {
+	private treeAgent: TrigoTreeAgent;           // For policy priors
+	private evaluationAgent: TrigoEvaluationAgent;  // For value evaluation
+	private config: MCTSConfig;
+	public debugMode: boolean = false;  // Enable debug logging
+
+
+	constructor(
+		treeAgent: TrigoTreeAgent,
+		evaluationAgent: TrigoEvaluationAgent,
+		config: Partial<MCTSConfig> = {}
+	) {
+		this.treeAgent = treeAgent;
+		this.evaluationAgent = evaluationAgent;
+
+		// Default configuration (AlphaGo Zero-inspired)
+		this.config = {
+			numSimulations: config.numSimulations ?? 600,
+			cPuct: config.cPuct ?? 1.0,
+			temperature: config.temperature ?? 1.0,
+			dirichletAlpha: config.dirichletAlpha ?? 0.03,
+			dirichletEpsilon: config.dirichletEpsilon ?? 0.25
+		};
+	}
+
+
+	/**
+	 * Select best move using MCTS
+	 *
+	 * @param game Current game state
+	 * @param moveNumber Move number (for temperature schedule)
+	 * @returns Selected move with visit count statistics
+	 */
+	async selectMove(game: TrigoGame, moveNumber: number): Promise<{
+		move: Move;
+		visitCounts: Map<string, number>;
+		searchPolicy: Map<string, number>;  // Normalized visit counts π(a|s)
+		rootValue: number;
+	}> {
+		// Create root node
+		const root = this.createNode(game, null, null);
+
+		// Check if root is already terminal (game over)
+		const terminalResult = this.checkTerminal(game);
+		if (terminalResult !== null) {
+			const currentPlayer = game.getCurrentPlayer();
+			return {
+				move: { player: currentPlayer === 1 ? "black" : "white", isPass: true },
+				visitCounts: new Map(),
+				searchPolicy: new Map(),
+				rootValue: terminalResult
+			};
+		}
+
+		// Run MCTS simulations
+		for (let i = 0; i < this.config.numSimulations; i++) {
+			await this.runSimulation(root, i);
+		}
+
+		// Temperature schedule: τ=1 for first 30 moves, τ→0 afterward
+		const temperature = moveNumber < 30 ? this.config.temperature : 0.01;
+
+		// Select move based on visit counts
+		const move = this.selectPlayAction(root, temperature);
+
+		// Set correct player for returned move
+		const currentPlayer = game.getCurrentPlayer();
+		move.player = currentPlayer === 1 ? "black" : "white";
+
+		// Compute search policy (normalized visit counts)
+		const searchPolicy = this.computeSearchPolicy(root, temperature);
+
+		// Get root value estimate (average Q-value weighted by visit counts)
+		const rootValue = this.getRootValue(root);
+
+		return {
+			move,
+			visitCounts: new Map(root.N),
+			searchPolicy,
+			rootValue
+		};
+	}
+
+
+	/**
+	 * Run a single MCTS simulation
+	 * Select -> Expand & Evaluate -> Backup
+	 *
+	 * Memory optimization: Clone state once at start, mutate along path.
+	 * This reduces memory from O(nodes) to O(simulations).
+	 */
+	private async runSimulation(root: MCTSNode, simIndex?: number): Promise<void> {
+		// Invariant: root node must always have a non-null state
+		if (!root.state) {
+			throw new Error("runSimulation: root node must have a non-null state");
+		}
+
+		// Clone root state once for this simulation
+		const workingState = root.state.clone();
+
+		// 1. Selection: Traverse tree using PUCT until reaching unexpanded node
+		const { node, path } = this.select(root, workingState);
+
+		// 2. Expand and Evaluate: Get value from neural network
+		const value = await this.expandAndEvaluate(node, workingState);
+
+		// Debug logging
+		if (this.debugMode && simIndex !== undefined && simIndex < 10) {
+			const pathStr = path.map(p => p.actionKey).join(" → ");
+			const terminalStr = node.terminalValue !== null ? " [TERMINAL]" : "";
+			console.log(`Sim ${simIndex + 1}: ${pathStr || "(root)"} → value=${value.toFixed(4)}${terminalStr}`);
+		}
+
+		// 3. Backup: Propagate value up the tree
+		this.backup(path, value);
+	}
+
+
+	/**
+	 * Selection phase: Traverse tree using PUCT
+	 *
+	 * @param root Root node to start selection from
+	 * @param workingState Mutable game state that gets updated along the path
+	 * @returns Leaf node and path taken
+	 */
+	private select(root: MCTSNode, workingState: TrigoGame): {
+		node: MCTSNode;
+		path: Array<{ node: MCTSNode; actionKey: string }>;
+	} {
+		const path: Array<{ node: MCTSNode; actionKey: string }> = [];
+		let node = root;
+
+		// Traverse until we reach an unexpanded node
+		while (node.expanded) {
+			// GPT-5.1 recommendation: Stop at terminal nodes immediately
+			// Terminal nodes should not be expanded or evaluated further
+			if (node.terminalValue !== null) {
+				break;  // Return terminal node, use its cached value
+			}
+
+			// Get all legal actions
+			const actionKeys = Array.from(node.P.keys());
+
+			// Terminal node check: if expanded but no actions, this is a terminal node
+			if (actionKeys.length === 0) {
+				break;  // Return this terminal node as leaf
+			}
+
+			// Select action with best PUCT value
+			// Both players select HIGHEST PUCT value:
+			// - Black: PUCT = -Q + U, max PUCT = max(-Q) = min(Q) ✓
+			// - White: PUCT = Q + U, max PUCT = max(Q) ✓
+			const currentPlayer = workingState.getCurrentPlayer();
+			const isWhite = currentPlayer === 2;
+
+			let bestActionKey = actionKeys[0];
+			let bestPuct = this.calculatePUCT(node, bestActionKey, isWhite);
+
+			for (let i = 1; i < actionKeys.length; i++) {
+				const actionKey = actionKeys[i];
+				const puct = this.calculatePUCT(node, actionKey, isWhite);
+
+				if (puct > bestPuct) {
+					bestPuct = puct;
+					bestActionKey = actionKey;
+				}
+			}
+
+			// Record path
+			path.push({ node, actionKey: bestActionKey });
+
+			// Apply action to working state (instead of cloning)
+			const action = this.decodeAction(bestActionKey);
+			if (action.isPass) {
+				workingState.pass();
+			} else if (action.x !== undefined && action.y !== undefined && action.z !== undefined) {
+				workingState.drop({ x: action.x, y: action.y, z: action.z });
+			}
+
+			// Move to child (create if doesn't exist)
+			if (!node.children.has(bestActionKey)) {
+				// Create child node WITHOUT storing state (memory optimization)
+				const childNode = this.createNode(null, node, action);
+				node.children.set(bestActionKey, childNode);
+			}
+
+			node = node.children.get(bestActionKey)!;
+		}
+
+		return { node, path };
+	}
+
+
+	/**
+	 * Expand and evaluate leaf node using neural networks
+	 *
+	 * @param node Leaf node to expand
+	 * @param workingState Current game state at this node (passed from simulation)
+	 * @returns Value estimate from evaluation network
+	 */
+	private async expandAndEvaluate(node: MCTSNode, workingState: TrigoGame): Promise<number> {
+		// Check if terminal value is already cached
+		if (node.terminalValue !== null) {
+			return node.terminalValue;
+		}
+
+		// Check if game is over (terminal state)
+		const terminalValue = this.checkTerminal(workingState);
+		if (terminalValue !== null) {
+			// Mark terminal node as expanded with empty action set to prevent revisits
+			// Cache the terminal value to avoid repeated checks
+			node.expanded = true;
+			node.terminalValue = terminalValue;
+			node.P = new Map();  // No actions available (terminal)
+			node.N = new Map();
+			node.W = new Map();
+			node.Q = new Map();
+			node.children = new Map();
+
+			return terminalValue;
+		}
+
+		// Non-terminal state: expand with policy network and evaluate
+		// Get all valid moves
+		const currentPlayer = workingState.getCurrentPlayer() === 1 ? "black" : "white";
+		const validPositions = workingState.validMovePositions();
+		const moves: Move[] = validPositions.map(pos => ({
+			x: pos.x,
+			y: pos.y,
+			z: pos.z,
+			player: currentPlayer
+		}));
+		moves.push({ player: currentPlayer, isPass: true });
+
+		// Get policy priors from tree agent
+		const scoredMoves = await this.treeAgent.scoreMoves(workingState, moves);
+
+		// Convert log probabilities to probabilities and normalize (stable softmax)
+		const maxScore = Math.max(...scoredMoves.map(m => m.score));
+		const expScores = scoredMoves.map(m => Math.exp(m.score - maxScore));
+		const sumExp = expScores.reduce((sum, exp) => sum + exp, 0);
+
+		// Initialize priors P(s,a)
+		node.P = new Map();
+		node.N = new Map();
+		node.W = new Map();
+		node.Q = new Map();
+
+		// Handle edge case: if all scores are -Infinity or sumExp is 0/NaN
+		const useFallback = !isFinite(sumExp) || sumExp < 1e-10;
+
+		for (let i = 0; i < scoredMoves.length; i++) {
+			const actionKey = this.encodeAction(scoredMoves[i].move);
+
+			// Use uniform distribution as fallback if normalization fails
+			const prior = useFallback ? (1.0 / scoredMoves.length) : (expScores[i] / sumExp);
+
+			node.P.set(actionKey, prior);
+			node.N.set(actionKey, 0);
+			node.W.set(actionKey, 0);
+			node.Q.set(actionKey, 0);
+		}
+
+		// Add Dirichlet noise at root
+		if (node.parent === null) {
+			this.addDirichletNoise(node.P);
+		}
+
+		// Mark as expanded
+		node.expanded = true;
+
+		// Get value estimate from evaluation agent
+		const evaluation = await this.evaluationAgent.evaluatePosition(workingState);
+
+		// Return value directly (value model returns white-positive by design)
+		return evaluation.value;
+	}
+
+
+	/**
+	 * Backup phase: Propagate value up the tree
+	 *
+	 * White-positive minimax propagation:
+	 * - All Q-values represent White's advantage (positive = White winning)
+	 * - When all children are terminal, mark parent as terminal with minimax value:
+	 *   * White's turn: terminal_value = max(children terminal values)
+	 *   * Black's turn: terminal_value = min(children terminal values)
+	 *
+	 * Improvements (based on GPT-5.1 review):
+	 * - Uses stored playerToMove instead of computing from depth
+	 * - Uses stored depth instead of recomputing via parent walk
+	 *
+	 * @param path Path from root to leaf
+	 * @param value Value to propagate (white-positive: positive = white winning)
+	 */
+	private backup(path: Array<{ node: MCTSNode; actionKey: string }>, value: number): void {
+		// Propagate value up the tree (white-positive throughout)
+		// No sign flipping needed - Q values are always white-positive
+		for (let i = path.length - 1; i >= 0; i--) {
+			const { node, actionKey } = path[i];
+
+			// Update statistics
+			const n = node.N.get(actionKey) ?? 0;
+			const w = node.W.get(actionKey) ?? 0;
+
+			node.N.set(actionKey, n + 1);
+			node.W.set(actionKey, w + value);
+			node.Q.set(actionKey, (w + value) / (n + 1));
+
+			// ========== Terminal State Propagation ==========
+			// Check if this node should be marked as terminal
+			// Condition: node is fully expanded AND all children are terminal AND node itself not yet marked
+			if (node.expanded && node.terminalValue === null) {
+				const actionKeys = Array.from(node.P.keys());
+
+				// Skip propagation if no actions (already a terminal leaf, or error state)
+				if (actionKeys.length === 0) {
+					continue;
+				}
+
+				// Check if ALL children are terminal
+				let allChildrenTerminal = true;
+				const childTerminalValues: number[] = [];
+
+				for (const key of actionKeys) {
+					const child = node.children.get(key);
+
+					// If child doesn't exist yet, not all children explored
+					if (!child) {
+						allChildrenTerminal = false;
+						break;
+					}
+
+					// If child is not terminal, not all children terminal
+					if (child.terminalValue === null) {
+						allChildrenTerminal = false;
+						break;
+					}
+
+					// Child is terminal, collect its value
+					childTerminalValues.push(child.terminalValue);
+				}
+
+				// If all children are terminal, mark current node as terminal with minimax value
+				if (allChildrenTerminal && childTerminalValues.length > 0) {
+					// Use stored playerToMove instead of computing from depth (GPT-5.1 suggestion)
+					const isWhiteTurn = node.playerToMove === 2;  // 2 = White, 1 = Black
+
+					// Apply minimax: choose best child value from current player's perspective
+					let terminalValue: number;
+
+					if (isWhiteTurn) {
+						// White maximizes Q-value (white-positive)
+						terminalValue = Math.max(...childTerminalValues);
+					} else {
+						// Black minimizes Q-value (white-positive)
+						terminalValue = Math.min(...childTerminalValues);
+					}
+
+					// Mark this node as terminal with the minimax value
+					node.terminalValue = terminalValue;
+
+					// Debug logging for terminal propagation
+					if (this.debugMode) {
+						const playerName = isWhiteTurn ? 'White' : 'Black';
+						console.log(
+							`[Terminal Propagation] Node at depth ${node.depth} (${playerName}) marked terminal: ` +
+							`value=${terminalValue.toFixed(4)}, children=[${childTerminalValues.map(v => v.toFixed(2)).join(', ')}]`
+						);
+					}
+				}
+			}
+			// ================================================
+		}
+	}
+
+
+	/**
+	 * Calculate PUCT value for action selection
+	 *
+	 * PUCT = Q(s,a) + U(s,a)  [for White, who maximizes]
+	 * PUCT = -Q(s,a) + U(s,a) [for Black, who minimizes]
+	 * where U(s,a) = c_puct * P(s,a) * sqrt(Σ_b N(s,b)) / (1 + N(s,a))
+	 *
+	 * @param node Current node
+	 * @param actionKey Action to evaluate
+	 * @param isWhite Whether current player is White
+	 * @returns PUCT value
+	 */
+	private calculatePUCT(node: MCTSNode, actionKey: string, isWhite: boolean): number {
+		const Q = node.Q.get(actionKey) ?? 0;
+		const N = node.N.get(actionKey) ?? 0;
+		const P = node.P.get(actionKey) ?? 0;
+
+		// Sum of all visit counts at this node
+		const totalN = Array.from(node.N.values()).reduce((sum, n) => sum + n, 0);
+
+		// Exploration term: U(s,a) = c_puct * P(s,a) * sqrt(Σ_b N(s,b) + 1) / (1 + N(s,a))
+		// +1 in sqrt to avoid zero exploration when node first expanded
+		const U = this.config.cPuct * P * Math.sqrt(totalN + 1) / (1 + N);
+
+		// Black minimizes Q (flips sign), White maximizes Q
+		return (isWhite ? Q : -Q) + U;
+	}
+
+
+	/**
+	 * Select action to play based on visit counts
+	 * Uses temperature to control exploration vs exploitation
+	 *
+	 * @param node Root node
+	 * @param temperature Selection temperature (τ=1 for exploration, τ→0 for greedy)
+	 * @returns Selected move
+	 */
+	private selectPlayAction(node: MCTSNode, temperature: number): Move {
+		const actionKeys = Array.from(node.N.keys());
+
+		// Edge case: no actions available (unexpanded root or terminal state)
+		if (actionKeys.length === 0) {
+			// Fallback to priors if available
+			const priorKeys = Array.from(node.P.keys());
+			if (priorKeys.length > 0) {
+				// Sample from prior distribution
+				const priors = priorKeys.map(key => node.P.get(key) ?? 0);
+				const sumP = priors.reduce((sum, p) => sum + p, 0);
+				if (sumP > 0) {
+					let rand = Math.random() * sumP;
+					for (let i = 0; i < priorKeys.length; i++) {
+						rand -= priors[i];
+						if (rand <= 0) {
+							return this.decodeAction(priorKeys[i]);
+						}
+					}
+					return this.decodeAction(priorKeys[priorKeys.length - 1]);
+				}
+				// Uniform fallback
+				const randomIndex = Math.floor(Math.random() * priorKeys.length);
+				return this.decodeAction(priorKeys[randomIndex]);
+			}
+			// No actions at all - return Pass as last resort
+			return { player: "black", isPass: true };
+		}
+
+		if (temperature < 0.01) {
+			// Greedy: Select action with highest visit count
+			let bestActionKey = actionKeys[0];
+			let bestN = node.N.get(bestActionKey) ?? 0;
+
+			for (let i = 1; i < actionKeys.length; i++) {
+				const actionKey = actionKeys[i];
+				const n = node.N.get(actionKey) ?? 0;
+				if (n > bestN) {
+					bestN = n;
+					bestActionKey = actionKey;
+				}
+			}
+
+			return this.decodeAction(bestActionKey);
+		} else {
+			// Temperature-based sampling: π(a|s) ∝ N(s,a)^(1/τ)
+			const nValues = actionKeys.map(key => node.N.get(key) ?? 0);
+			const nPowered = nValues.map(n => Math.pow(n, 1 / temperature));
+			const sumN = nPowered.reduce((sum, n) => sum + n, 0);
+
+			// Handle edge case: if all visits are 0 or sum is invalid
+			if (!isFinite(sumN) || sumN <= 0) {
+				// Fallback to uniform random selection (or use priors)
+				const randomIndex = Math.floor(Math.random() * actionKeys.length);
+				return this.decodeAction(actionKeys[randomIndex]);
+			}
+
+			// Sample from distribution
+			let rand = Math.random() * sumN;
+			for (let i = 0; i < actionKeys.length; i++) {
+				rand -= nPowered[i];
+				if (rand <= 0) {
+					return this.decodeAction(actionKeys[i]);
+				}
+			}
+
+			// Fallback (shouldn't reach here due to floating point precision)
+			return this.decodeAction(actionKeys[actionKeys.length - 1]);
+		}
+	}
+
+
+	/**
+	 * Compute search policy from visit counts
+	 * π(a|s) = N(s,a)^(1/τ) / Σ_b N(s,b)^(1/τ)
+	 *
+	 * @param node Root node
+	 * @param temperature Selection temperature
+	 * @returns Normalized policy distribution
+	 */
+	private computeSearchPolicy(node: MCTSNode, temperature: number): Map<string, number> {
+		const policy = new Map<string, number>();
+		const actionKeys = Array.from(node.N.keys());
+
+		// Compute π(a|s) ∝ N(s,a)^(1/τ)
+		const nPowered = actionKeys.map(key => Math.pow(node.N.get(key) ?? 0, 1 / temperature));
+		const sumN = nPowered.reduce((sum, n) => sum + n, 0);
+
+		// Handle edge case: if all visits are 0 or sum is invalid
+		if (!isFinite(sumN) || sumN <= 0) {
+			// Fallback to uniform distribution
+			const uniform = 1 / actionKeys.length;
+			for (const key of actionKeys) {
+				policy.set(key, uniform);
+			}
+			return policy;
+		}
+
+		for (let i = 0; i < actionKeys.length; i++) {
+			const actionKey = actionKeys[i];
+			policy.set(actionKey, nPowered[i] / sumN);
+		}
+
+		return policy;
+	}
+
+
+	/**
+	 * Get root value estimate (weighted average of Q-values)
+	 */
+	private getRootValue(node: MCTSNode): number {
+		const actionKeys = Array.from(node.N.keys());
+		const totalN = Array.from(node.N.values()).reduce((sum, n) => sum + n, 0);
+
+		if (totalN === 0) {
+			return 0;
+		}
+
+		let weightedSum = 0;
+		for (const actionKey of actionKeys) {
+			const q = node.Q.get(actionKey) ?? 0;
+			const n = node.N.get(actionKey) ?? 0;
+			weightedSum += q * n;
+		}
+
+		return weightedSum / totalN;
+	}
+
+
+	/**
+	 * Add Dirichlet noise to prior probabilities at root
+	 * P(s,a) = (1 - ε) * p_a + ε * η_a
+	 * where η ~ Dir(α)
+	 *
+	 * Note: Pass move is excluded from noise to prevent exploration of
+	 * clearly suboptimal opening passes.
+	 */
+	private addDirichletNoise(priors: Map<string, number>): void {
+		// Exclude Pass from Dirichlet noise - it should not be explored at root
+		const actionKeys = Array.from(priors.keys()).filter(key => key !== "pass");
+		const alpha = this.config.dirichletAlpha;
+		const epsilon = this.config.dirichletEpsilon;
+
+		// If only Pass is available, no noise to add
+		if (actionKeys.length === 0) {
+			return;
+		}
+
+		// Generate Dirichlet noise (simplified using Gamma distribution)
+		const noise: number[] = [];
+		let noiseSum = 0;
+
+		for (let i = 0; i < actionKeys.length; i++) {
+			// Gamma(α, 1) approximation using rejection sampling
+			const sample = this.sampleGamma(alpha);
+			noise.push(sample);
+			noiseSum += sample;
+		}
+
+		// Handle edge case: if all Gamma samples are 0 (extremely unlikely but possible)
+		if (!isFinite(noiseSum) || noiseSum <= 0) {
+			// Fallback: use uniform noise (no mixing, keep original priors)
+			return;
+		}
+
+		// Normalize and mix with priors (only for non-Pass actions)
+		for (let i = 0; i < actionKeys.length; i++) {
+			const actionKey = actionKeys[i];
+			const prior = priors.get(actionKey) ?? 0;
+			const noiseFraction = noise[i] / noiseSum;
+			priors.set(actionKey, (1 - epsilon) * prior + epsilon * noiseFraction);
+		}
+	}
+
+
+	/**
+	 * Sample from Gamma distribution using Marsaglia and Tsang method (2000)
+	 * Used for Dirichlet noise generation
+	 */
+	private sampleGamma(alpha: number): number {
+		if (alpha <= 0) {
+			throw new Error("Gamma distribution alpha must be > 0");
+		}
+
+		// For alpha < 1, use transformation: sample Gamma(alpha+1) then multiply by U^(1/alpha)
+		if (alpha < 1) {
+			const u = Math.random();
+			const g = this.sampleGamma(alpha + 1);
+			return g * Math.pow(u, 1 / alpha);
+		}
+
+		// For alpha >= 1, use Marsaglia and Tsang's method
+		const d = alpha - 1/3;
+		const c = 1 / Math.sqrt(9 * d);
+
+		while (true) {
+			let x, v;
+			do {
+				x = this.randomNormal();
+				v = 1 + c * x;
+			} while (v <= 0);
+
+			v = v * v * v;
+			const u = Math.random();
+
+			// Fast acceptance check
+			if (u < 1 - 0.0331 * x * x * x * x) {
+				return d * v;
+			}
+
+			// Fallback acceptance check
+			if (Math.log(u) < 0.5 * x * x + d * (1 - v + Math.log(v))) {
+				return d * v;
+			}
+		}
+	}
+
+
+	/**
+	 * Sample from standard normal distribution (Box-Muller transform)
+	 */
+	private randomNormal(): number {
+		const u1 = Math.random();
+		const u2 = Math.random();
+		return Math.sqrt(-2 * Math.log(u1)) * Math.cos(2 * Math.PI * u2);
+	}
+
+
+	/**
+	 * Check if game state is terminal and return value if so
+	 *
+	 * Terminal conditions (checked in order of cost):
+	 * 1. Game already finished (double-pass or resignation) - CHEAPEST
+	 * 2. Board coverage > 50% AND naturally terminal (calls isNaturallyTerminal) - EXPENSIVE
+	 *
+	 * NOTE: The coverage check (> 50%) is an optimization to avoid expensive
+	 * territory calculations on sparse boards where natural termination is unlikely.
+	 *
+	 * @param state Game state to check
+	 * @returns Terminal value (white-positive) if terminal, null otherwise
+	 */
+	private checkTerminal(state: TrigoGame): number | null {
+		// 1. Check if game is already finished (double-pass, resignation, etc.)
+		// This is the cheapest check - just reading a status flag
+		if (state.getGameStatus() === "finished") {
+			const territory = state.getTerritory();
+			return this.calculateTerminalValue(territory);
+		}
+
+		// 2. Check for "natural" game end (all territory claimed, no capturing moves)
+		// Optimization: Only check if board is reasonably full (> 50% coverage)
+		// because natural termination is unlikely on sparse boards
+		const board = state.getBoard();
+		const shape = state.getShape();
+		const totalPositions = shape.x * shape.y * shape.z;
+
+		// Count stones (cheap)
+		let stoneCount = 0;
+
+		for (let x = 0; x < shape.x; x++) {
+			for (let y = 0; y < shape.y; y++) {
+				for (let z = 0; z < shape.z; z++) {
+					const stone = board[x][y][z];
+					if (stone === 1 || stone === 2) {  // StoneType.BLACK or WHITE
+						stoneCount++;
+					}
+				}
+			}
+		}
+
+		const coverageRatio = stoneCount / totalPositions;
+
+		// Only check for natural termination if board is reasonably full
+		if (coverageRatio > 0.5) {
+			if (state.isNaturallyTerminal()) {
+				const territory = state.getTerritory();
+				return this.calculateTerminalValue(territory);
+			}
+		}
+
+
+		return null;  // Not terminal
+	}
+
+
+	/**
+	 * Calculate terminal value from territory scores
+	 * Uses logarithmic scaling matching the training code
+	 *
+	 * @param territory Territory counts from game
+	 * @returns Value (white-positive: positive = white winning)
+	 */
+	private calculateTerminalValue(territory: { black: number; white: number; neutral: number }): number {
+		const scoreDiff = territory.white - territory.black;
+
+		if (Math.abs(scoreDiff) < 1e-6) {
+			// Draw/tie case
+			return 0.0;
+		}
+
+		// Match training formula from valueCausalLoss.py:_expand_value_targets
+		// target = sign(score) * (1 + log(|score|)) * territory_value_factor
+		// The log term incentivizes winning by larger margins (logarithmically)
+		const territory_value_factor = 1.0;  // Default from training config
+		const signScore = Math.sign(scoreDiff);
+		return signScore * (1 + Math.log(Math.abs(scoreDiff))) * territory_value_factor;
+	}
+
+
+	/**
+	 * Create a new MCTS node
+	 *
+	 * @param state Game state (only provided for root node, null for others to save memory)
+	 * @param parent Parent node
+	 * @param action Action that led to this node
+	 * @param playerToMove Player to move at this node (derived from state if available)
+	 */
+	private createNode(state: TrigoGame | null, parent: MCTSNode | null, action: Move | null, playerToMove?: number): MCTSNode {
+		// Determine player to move
+		let player: number;
+		if (playerToMove !== undefined) {
+			player = playerToMove;
+		} else if (state) {
+			// Most reliable: derive from actual game state
+			player = state.getCurrentPlayer();
+		} else if (parent) {
+			// NOTE: Fallback assumes strictly alternating turns (no passes keeping same player)
+			// For standard Go-like games with strict alternation, this is safe.
+			player = parent.playerToMove === 1 ? 2 : 1;
+		} else {
+			// Default to Black for root if no info
+			player = 1;
+		}
+
+		return {
+			state,
+			parent,
+			action,
+			N: new Map(),
+			W: new Map(),
+			Q: new Map(),
+			P: new Map(),
+			children: new Map(),
+			expanded: false,
+			terminalValue: null,
+			depth: parent ? parent.depth + 1 : 0,
+			playerToMove: player
+		};
+	}
+
+
+	/**
+	 * Encode move to string key for storage in maps
+	 * Note: Only encodes position, player info is handled separately
+	 */
+	private encodeAction(move: Move): string {
+		if (move.isPass) {
+			return "pass";
+		}
+		return `${move.x},${move.y},${move.z}`;
+	}
+
+
+	/**
+	 * Decode string key back to move
+	 * Note: Returns move with placeholder player - caller must set correct player
+	 * based on game state before using the move externally
+	 */
+	private decodeAction(key: string): Move {
+		if (key === "pass") {
+			// Player is placeholder - will be set by caller (selectMove sets it from game state)
+			return { player: "black", isPass: true };
+		}
+
+		const [x, y, z] = key.split(",").map(Number);
+		// Player is placeholder - will be set by caller (selectMove sets it from game state)
+		return { player: "black", x, y, z };
+	}
+}

trigo-web/inc/modelInferencer.ts

@@ -6,6 +6,15 @@
  *
  * Adapted from Node.js test_inference.js for cross-platform use
  * Provides causal language model inference using GPT-2 ONNX model
+ *
+ * Vocabulary Design (128 tokens):
+ *   0-3:    Special tokens (PAD=0, START=1, END=2, VALUE=3)
+ *   4-7:    Reserved for future use
+ *   10:     LF (newline) for multi-line game records
+ *   32-127: ASCII printable characters (direct identity mapping)
+ *
+ * This design uses direct identity mapping: token_id = ascii_value
+ * No complex formulas needed - simple and efficient.
  */
 
 /**
@@ -82,15 +91,20 @@ export class ModelInferencer {
 	private config: InferencerConfig;
 	private TensorClass: TensorConstructor;
 
-	// TGN tokenizer: byte-level (0-255) + PAD(256) + START(257) + END(258)
-	private readonly PAD_TOKEN = 256;
-	private readonly START_TOKEN = 257;
-	private readonly END_TOKEN = 258;
+	// TGN tokenizer: Compact 128-token vocabulary with direct ASCII mapping
+	// 0-3: Special tokens (PAD, START, END, VALUE)
+	// 4-7: Reserved for future use
+	// 10: Newline (LF)
+	// 32-127: ASCII printable characters (direct identity mapping)
+	private readonly PAD_TOKEN = 0;
+	private readonly START_TOKEN = 1;
+	private readonly END_TOKEN = 2;
+	private readonly VALUE_TOKEN = 3;
 
 	constructor(TensorClass: TensorConstructor, config: Partial<InferencerConfig> = {}) {
 		this.TensorClass = TensorClass;
 		this.config = {
-			vocabSize: 259,
+			vocabSize: config.vocabSize || 128,  // Allow override via config
 			seqLen: 256,
 			...config
 		};
@@ -342,6 +356,47 @@ export class ModelInferencer {
 	}
 
 
+	/**
+	 * Run value prediction inference (for evaluation mode models)
+	 * For models exported with --evaluation-mode flag
+	 * @param tokens - Token IDs (already includes START/END tokens and padding)
+	 * @returns Predicted game outcome value in range [-1, 1]
+	 */
+	async runValuePrediction(tokens: number[]): Promise<number> {
+		if (!this.session) {
+			throw new Error("Inferencer not initialized. Call setSession() first.");
+		}
+
+		const seqLen = tokens.length;
+
+		// Convert to BigInt64Array for ONNX int64 tensors
+		const inputIds = new BigInt64Array(seqLen);
+		for (let i = 0; i < seqLen; i++) {
+			inputIds[i] = BigInt(tokens[i]);
+		}
+
+		// Create input tensor [1, seq_len]
+		const inputTensor = new this.TensorClass("int64", inputIds, [1, seqLen]);
+
+		// Run inference
+		const results = await this.session.run({
+			input_ids: inputTensor
+		});
+
+		// Extract value
+		// Output shape: [batch_size] = [1]
+		// For evaluation models, output name is "values" not "logits"
+		const values = results.values;
+		if (!values) {
+			throw new Error("Evaluation model did not return 'values' output. Check model export.");
+		}
+
+		const predictedValue = values.data[0] as number;
+
+		return predictedValue;
+	}
+
+
 	/**
 	 * Compute softmax for a single position's logits
 	 * @param logits - Full logits array

trigo-web/inc/trigo/game.ts

@@ -105,9 +105,10 @@ export class TrigoGame {
 	// Last captured stones for Ko rule detection
 	private lastCapturedPositions: Position[] | null = null;
 
-	// Territory cache
-	private territoryDirty: boolean = true;
+	// Static analysis cache (territory, capturing moves)
+	// Invalidated on any board state change
 	private cachedTerritory: TerritoryResult | null = null;
+	private cachedCapturingMove: Map<Stone, boolean> = new Map();
 
 	/**
 	 * Constructor
@@ -152,13 +153,22 @@ export class TrigoGame {
 		this.stepHistory = [];
 		this.currentStepIndex = 0;
 		this.lastCapturedPositions = null;
-		this.territoryDirty = true;
-		this.cachedTerritory = null;
+		this.invalidateAnalysisCache();
 		this.gameStatus = "idle";
 		this.gameResult = undefined;
 		this.passCount = 0;
 	}
 
+
+	/**
+	 * Invalidate all static analysis caches
+	 * Called when board state changes
+	 */
+	private invalidateAnalysisCache(): void {
+		this.cachedTerritory = null;
+		this.cachedCapturingMove.clear();
+	}
+
 	/**
 	 * Clone the game state (deep copy)
 	 * Creates an independent copy with all state preserved
@@ -197,9 +207,8 @@ export class TrigoGame {
 			};
 		}
 
-		// Territory cache will be recalculated on demand
-		cloned.territoryDirty = true;
-		cloned.cachedTerritory = null;
+		// Analysis cache will be recalculated on demand
+		cloned.invalidateAnalysisCache();
 
 		return cloned;
 	}
@@ -386,6 +395,115 @@ export class TrigoGame {
 		return validPositions;
 	}
 
+
+	/**
+	 * Check if any valid move can capture enemy stones
+	 * Used by MCTS to determine if a position is truly terminal
+	 *
+	 * Results are cached and invalidated when board state changes.
+	 *
+	 * @param player - Optional player color (defaults to current player)
+	 * @returns true if at least one valid move would capture stones
+	 */
+	hasCapturingMove(player?: Stone): boolean {
+		const playerColor = player ?? this.currentPlayer;
+
+		// Check cache first
+		if (this.cachedCapturingMove.has(playerColor)) {
+			return this.cachedCapturingMove.get(playerColor)!;
+		}
+
+		// Compute and cache the result
+		const result = this.computeHasCapturingMove(playerColor);
+		this.cachedCapturingMove.set(playerColor, result);
+
+		return result;
+	}
+
+
+	/**
+	 * Internal: Compute whether a player has any capturing move
+	 */
+	private computeHasCapturingMove(playerColor: Stone): boolean {
+		// Iterate through all board positions
+		for (let x = 0; x < this.shape.x; x++) {
+			for (let y = 0; y < this.shape.y; y++) {
+				for (let z = 0; z < this.shape.z; z++) {
+					// Skip occupied positions
+					if (this.board[x][y][z] !== StoneType.EMPTY) {
+						continue;
+					}
+
+					const pos: Position = { x, y, z };
+
+					// Skip invalid moves (Ko, suicide)
+					if (
+						isKoViolation(
+							pos,
+							playerColor,
+							this.board,
+							this.shape,
+							this.lastCapturedPositions
+						)
+					) {
+						continue;
+					}
+
+					if (isSuicideMove(pos, playerColor, this.board, this.shape)) {
+						continue;
+					}
+
+					// Check if this move would capture any stones
+					const capturedGroups = findCapturedGroups(pos, playerColor, this.board, this.shape);
+					if (capturedGroups.length > 0) {
+						return true;  // Found a capturing move
+					}
+				}
+			}
+		}
+
+		return false;  // No capturing moves available
+	}
+
+
+	/**
+	 * Check if the game has reached a natural terminal state
+	 *
+	 * A game is naturally terminal when:
+	 * - All territory is claimed (neutral === 0)
+	 * - AND neither player has any capturing moves available
+	 *
+	 * This is different from the "finished" status which requires double pass.
+	 * Natural termination means the game state is completely settled and
+	 * no further moves can meaningfully change the outcome.
+	 *
+	 * NOTE: This method is expensive due to territory calculation and capture move checking.
+	 * Use coverage ratio check as a pre-filter when calling frequently.
+	 *
+	 * Used by:
+	 * - MCTS agent (terminal detection for tree search)
+	 * - Model battle (early stopping when settled)
+	 * - Self-play games (early stopping when settled)
+	 *
+	 * @returns true if the game is naturally terminal, false otherwise
+	 */
+	isNaturallyTerminal(): boolean {
+		// Check if all territory is claimed (uses cached territory)
+		const territory = this.getTerritory();
+		if (territory.neutral !== 0) {
+			return false;  // Still has neutral territory - not terminal
+		}
+
+		// All territory claimed - check if capturing moves are possible
+		// IMPORTANT: Check even if one player has no stones - they might still capture!
+		const blackCanCapture = this.hasCapturingMove(StoneType.BLACK);
+		const whiteCanCapture = this.hasCapturingMove(StoneType.WHITE);
+
+		// Terminal only if neither player can capture
+		return !blackCanCapture && !whiteCanCapture;
+	}
+
+
 	/**
 	 * Reset pass count (called when a stone is placed)
 	 */
@@ -419,8 +537,8 @@ export class TrigoGame {
 		// Store captured positions for Ko rule
 		this.lastCapturedPositions = capturedPositions.length > 0 ? capturedPositions : null;
 
-		// Mark territory as dirty
-		this.territoryDirty = true;
+		// Invalidate analysis cache
+		this.invalidateAnalysisCache();
 
 		// Reset pass count when a stone is placed
 		this.resetPassCount();
@@ -442,7 +560,7 @@ export class TrigoGame {
 			this.callbacks.onCapture(capturedPositions);
 		}
 
-		if (this.territoryDirty && this.callbacks.onTerritoryChange) {
+		if (this.callbacks.onTerritoryChange) {
 			this.callbacks.onTerritoryChange(this.getTerritory());
 		}
 
@@ -584,8 +702,8 @@ export class TrigoGame {
 			this.lastCapturedPositions = null;
 		}
 
-		// Mark territory as dirty
-		this.territoryDirty = true;
+		// Invalidate analysis cache
+		this.invalidateAnalysisCache();
 
 		// Trigger callback
 		if (this.callbacks.onStepBack) {
@@ -631,8 +749,8 @@ export class TrigoGame {
 		this.currentStepIndex++;
 		this.currentPlayer = getEnemyColor(nextStep.player); // Switch to next player
 
-		// Mark territory as dirty
-		this.territoryDirty = true;
+		// Invalidate analysis cache
+		this.invalidateAnalysisCache();
 
 		// Trigger callback
 		if (this.callbacks.onStepAdvance) {
@@ -718,8 +836,8 @@ export class TrigoGame {
 		// Recalculate pass count based on new history position
 		this.recalculatePassCount();
 
-		// Mark territory as dirty
-		this.territoryDirty = true;
+		// Invalidate analysis cache
+		this.invalidateAnalysisCache();
 
 		// Trigger callback based on direction
 		if (index < oldStepIndex && this.callbacks.onStepBack) {
@@ -763,10 +881,9 @@ export class TrigoGame {
 	 * Returns cached result if territory hasn't changed
 	 */
 	getTerritory(): TerritoryResult {
-		if (this.territoryDirty || !this.cachedTerritory) {
+		if (!this.cachedTerritory)
 			this.cachedTerritory = calculateTerritory(this.board, this.shape);
-			this.territoryDirty = false;
-		}
+
 		return this.cachedTerritory;
 	}
 
@@ -842,8 +959,7 @@ export class TrigoGame {
 				this.lastCapturedPositions = null;
 			}
 
-			this.territoryDirty = true;
-			this.cachedTerritory = null;
+			this.invalidateAnalysisCache();
 
 			return true;
 		} catch (error) {
@@ -987,7 +1103,7 @@ export class TrigoGame {
 		timeControl?: string;
 		application?: string;
 		[key: string]: string | undefined;
-	}): string {
+	}, {markResult}: {markResult?: boolean} = {}): string {
 		const lines: string[] = [];
 
 		// Add metadata tags
@@ -1020,7 +1136,7 @@ export class TrigoGame {
 				resultStr += "Resign";
 			}
 
-			lines.push(`[Result "${resultStr}"]`);
+			//lines.push(`[Result "${resultStr}"]`);
 		}
 
 		// Add board size (without quotes - parser expects unquoted board shape)
@@ -1097,6 +1213,16 @@ export class TrigoGame {
 			lines.push(currentLine);
 		}
 
+		// Add score result if game has finished
+		if (markResult) {
+			// Calculate territory to get final score
+			const territory = this.getTerritory();
+			const scoreDiff = territory.black - territory.white;
+
+			// Add score comment: negative means black wins, positive means white wins
+			lines.push(`; ${scoreDiff > 0 ? '-' : scoreDiff < 0 ? '+' : ''}${Math.abs(scoreDiff)}`);
+		}
+
 		// Add empty line at the end
 		lines.push("");
 

trigo-web/inc/trigoAgent.ts

@@ -61,7 +61,9 @@ export class TrigoAgent {
 	}
 
 	/**
-	 * Convert string to token IDs (byte-level encoding)
+	 * Convert string to token IDs (byte-level encoding with ASCII direct mapping)
+	 * For characters 32-127, token_id = ascii_value
+	 * Special tokens (0-3) and newline (10) are handled by the tokenizer
 	 */
 	private stringToTokens(text: string): number[] {
 		return Array.from(text).map((char) => char.charCodeAt(0));

trigo-web/inc/trigoEvaluationAgent.ts

@@ -0,0 +1,266 @@
+/**
+ * Trigo Evaluation Agent - AI agent using value prediction for position evaluation
+ *
+ * Uses evaluation mode ONNX model to predict game outcomes.
+ * The model takes a TGN sequence and returns a value in [-1, 1]:
+ * - Positive values favor White (second player)
+ * - Negative values favor Black (first player)
+ * - Values near ±1 indicate strong advantage
+ * - Values near 0 indicate balanced position
+ */
+
+import { ModelInferencer } from "./modelInferencer";
+import { TrigoGame, StoneType } from "./trigo/game";
+import type { Move, Stone, Position } from "./trigo/types";
+import { encodeAb0yz } from "./trigo/ab0yz";
+
+export interface ValuedMove {
+	move: Move;
+	value: number; // Position value in [-1, 1] after this move
+	notation: string; // TGN notation
+}
+
+export interface PositionEvaluation {
+	value: number; // Current position value
+	interpretation: string; // Human-readable interpretation
+}
+
+export class TrigoEvaluationAgent {
+	private inferencer: ModelInferencer;
+	private readonly START_TOKEN = 1;
+	private readonly END_TOKEN = 2;
+	private readonly VALUE_TOKEN = 3;
+
+	constructor(inferencer: ModelInferencer) {
+		this.inferencer = inferencer;
+	}
+
+	/**
+	 * Check if agent is initialized (checks if inferencer has a session)
+	 */
+	isInitialized(): boolean {
+		return this.inferencer !== null && this.inferencer.isReady();
+	}
+
+	/**
+	 * Convert Stone type to player string
+	 */
+	private stoneToPlayer(stone: Stone): "black" | "white" {
+		if (stone === StoneType.BLACK) return "black";
+		if (stone === StoneType.WHITE) return "white";
+		throw new Error(`Invalid stone type: ${stone}`);
+	}
+
+	/**
+	 * Encode a position to TGN notation
+	 */
+	private positionToTGN(pos: Position, shape: { x: number; y: number; z: number }): string {
+		const posArray = [pos.x, pos.y, pos.z];
+		const shapeArray = [shape.x, shape.y, shape.z];
+		return encodeAb0yz(posArray, shapeArray);
+	}
+
+	/**
+	 * Convert string to byte tokens (ASCII encoding)
+	 */
+	private stringToTokens(str: string): number[] {
+		const tokens: number[] = [];
+		for (let i = 0; i < str.length; i++) {
+			const charCode = str.charCodeAt(i);
+			// Only accept valid ASCII tokens (0-127)
+			if (charCode < 128) {
+				tokens.push(charCode);
+			}
+		}
+		return tokens;
+	}
+
+	/**
+	 * Tokenize TGN text with special tokens
+	 * Adds START and END tokens for proper sequence formatting
+	 */
+	private tokenizeTGN(tgnText: string, maxLength: number = 256): number[] {
+		// Convert TGN to tokens
+		const contentTokens = this.stringToTokens(tgnText);
+
+		// Add special tokens: START + content + END
+		const tokens = [this.START_TOKEN, ...contentTokens, this.END_TOKEN];
+
+		// Truncate if needed (preserve END token)
+		if (tokens.length > maxLength) {
+			return [...tokens.slice(0, maxLength - 1), this.END_TOKEN];
+		}
+
+		// Pad with PAD tokens (0) to fixed length
+		while (tokens.length < maxLength) {
+			tokens.push(0); // PAD_TOKEN
+		}
+
+		return tokens;
+	}
+
+	/**
+	 * Evaluate a position by predicting the game outcome value
+	 * @param game - The game to evaluate
+	 * @returns Position evaluation with value and interpretation
+	 */
+	async evaluatePosition(game: TrigoGame): Promise<PositionEvaluation> {
+		if (!this.isInitialized()) {
+			throw new Error("Agent not initialized. Inferencer must have a session.");
+		}
+
+		// Get current TGN
+		const tgn = game.toTGN().trim();
+
+		// Tokenize
+		const config = this.inferencer.getConfig();
+		const tokens = this.tokenizeTGN(tgn, config.seqLen);
+
+		// Run value prediction inference
+		const value = await this.inferencer.runValuePrediction(tokens);
+
+		return {
+			value,
+			interpretation: this.interpretValue(value)
+		};
+	}
+
+	/**
+	 * Interpret a position value to human-readable text
+	 */
+	private interpretValue(value: number): string {
+		if (value > 0.5) {
+			return `Strong advantage for White (+${value.toFixed(3)})`;
+		} else if (value > 0.1) {
+			return `Slight advantage for White (+${value.toFixed(3)})`;
+		} else if (value > -0.1) {
+			return `Balanced position (${value.toFixed(3)})`;
+		} else if (value > -0.5) {
+			return `Slight advantage for Black (${value.toFixed(3)})`;
+		} else {
+			return `Strong advantage for Black (${value.toFixed(3)})`;
+		}
+	}
+
+	/**
+	 * Evaluate all valid moves and return them sorted by value
+	 * @param game - Current game state
+	 * @returns Array of moves with their position values
+	 */
+	async evaluateMoves(game: TrigoGame): Promise<ValuedMove[]> {
+		if (!this.isInitialized()) {
+			throw new Error("Agent not initialized");
+		}
+
+		const currentPlayer = this.stoneToPlayer(game.getCurrentPlayer());
+
+		// Get all valid moves
+		const validMoves: Move[] = game.validMovePositions().map((pos) => ({
+			x: pos.x,
+			y: pos.y,
+			z: pos.z,
+			player: currentPlayer
+		}));
+		validMoves.push({ player: currentPlayer, isPass: true }); // Add pass move
+
+		if (validMoves.length === 0) {
+			return [];
+		}
+
+		console.log(`[TrigoEvaluationAgent] Evaluating ${validMoves.length} moves...`);
+
+		// Evaluate each move by simulating it and evaluating the resulting position
+		const valuedMoves: ValuedMove[] = [];
+
+		for (const move of validMoves) {
+			// Clone game and apply move
+			const testGame = game.clone();
+			let success: boolean;
+
+			if (move.isPass) {
+				success = testGame.pass();
+			} else if (move.x !== undefined && move.y !== undefined && move.z !== undefined) {
+				success = testGame.drop({ x: move.x, y: move.y, z: move.z });
+			} else {
+				continue; // Invalid move format
+			}
+
+			if (!success) {
+				continue; // Move failed
+			}
+
+			// Evaluate the resulting position
+			const evaluation = await this.evaluatePosition(testGame);
+
+			// Get move notation
+			const notation = move.isPass
+				? "P"
+				: this.positionToTGN(
+					{ x: move.x!, y: move.y!, z: move.z! },
+					testGame.getShape()
+				);
+
+			// Model returns white-positive values (positive = white advantage)
+			// Adjust to current player perspective: positive = advantage for current player
+			const adjustedValue = currentPlayer === "white" ? evaluation.value : -evaluation.value;
+
+			valuedMoves.push({
+				move,
+				value: adjustedValue,
+				notation
+			});
+		}
+
+		// Sort by value (highest first - best for current player)
+		valuedMoves.sort((a, b) => b.value - a.value);
+
+		return valuedMoves;
+	}
+
+	/**
+	 * Select the best move based on position evaluation
+	 * @param game - Current game state
+	 * @returns Best move or null if no moves available
+	 */
+	async selectBestMove(game: TrigoGame): Promise<Move | null> {
+		const valuedMoves = await this.evaluateMoves(game);
+
+		if (valuedMoves.length === 0) {
+			return null;
+		}
+
+		console.log(`[TrigoEvaluationAgent] Best move: ${valuedMoves[0].notation} (value: ${valuedMoves[0].value.toFixed(4)})`);
+		console.log(`[TrigoEvaluationAgent] Top 3 moves:`);
+		for (let i = 0; i < Math.min(3, valuedMoves.length); i++) {
+			console.log(`  ${i + 1}. ${valuedMoves[i].notation}: ${valuedMoves[i].value.toFixed(4)}`);
+		}
+
+		return valuedMoves[0].move;
+	}
+
+	/**
+	 * Get detailed evaluation report for current position
+	 */
+	async getEvaluationReport(game: TrigoGame): Promise<{
+		currentValue: PositionEvaluation;
+		topMoves: ValuedMove[];
+		moveCount: number;
+	}> {
+		const currentEval = await this.evaluatePosition(game);
+		const valuedMoves = await this.evaluateMoves(game);
+
+		return {
+			currentValue: currentEval,
+			topMoves: valuedMoves.slice(0, 5), // Top 5 moves
+			moveCount: valuedMoves.length
+		};
+	}
+
+	/**
+	 * Clean up resources
+	 */
+	destroy(): void {
+		// Agent doesn't own the inferencer, so just clear reference
+		console.log("[TrigoEvaluationAgent] Destroyed");
+	}
+}

trigo-web/inc/trigoTreeAgent.ts

@@ -20,6 +20,9 @@ export interface ScoredMove {
 export class TrigoTreeAgent {
 	private inferencer: ModelInferencer;
 
+	// Special token constants (must match TGN tokenizer)
+	private readonly START_TOKEN = 1;
+
 	constructor(inferencer: ModelInferencer) {
 		this.inferencer = inferencer;
 	}
@@ -78,6 +81,7 @@ export class TrigoTreeAgent {
 		evaluatedIds: number[];
 		mask: number[];
 		moveToLeafPos: number[];
+		parent: Array<number | null>;
 	} {
 		type Seq = { moveIndex: number; tokens: number[] };
 
@@ -154,6 +158,9 @@ export class TrigoTreeAgent {
 		}
 		for (const r of roots) dfs(r);
 
+		// NOTE: moveToLeafPos[i] = -1 means the move has empty tokens (e.g., single-char notation)
+		// In this case, we use prefix logits directly for scoring (valid behavior)
+
 		// --- Build ancestor mask ---
 		const mask = new Array(total * total).fill(0);
 		for (let i = 0; i < total; i++) {
@@ -164,7 +171,7 @@ export class TrigoTreeAgent {
 			}
 		}
 
-		return { evaluatedIds, mask, moveToLeafPos };
+		return { evaluatedIds, mask, moveToLeafPos, parent };
 	}
 
 	/**
@@ -178,7 +185,8 @@ export class TrigoTreeAgent {
 		prefixTokens: number[];
 		evaluatedIds: number[];
 		mask: number[];
-		moveData: Array<{ move: Move; notation: string; leafPos: number; parentPos: number }>;
+		parent: Array<number | null>;
+		moveData: Array<{ move: Move; notation: string; leafPos: number }>;
 	} {
 		// Get current TGN as prefix
 		const currentTGN = game.toTGN().trim();
@@ -206,7 +214,7 @@ export class TrigoTreeAgent {
 			prefix = currentTGN + " ";
 		}
 
-		const prefixTokens = this.stringToTokens(prefix);
+		const prefixTokens = [this.START_TOKEN, ...this.stringToTokens(prefix)];
 
 		// Encode each move to tokens (only first 2 tokens)
 		const shape = game.getShape();
@@ -221,6 +229,8 @@ export class TrigoTreeAgent {
 			}
 
 			// Exclude the last token
+			// For single-char notations, this results in empty tokens array,
+			// which means we use prefix logits directly for scoring
 			const fullTokens = this.stringToTokens(notation);
 			const tokens = fullTokens.slice(0, fullTokens.length - 1);
 
@@ -229,38 +239,19 @@ export class TrigoTreeAgent {
 
 		// Build prefix tree
 		const tokenArrays = movesWithTokens.map((m) => m.tokens);
-		const { evaluatedIds, mask, moveToLeafPos } = this.buildPrefixTree(tokenArrays);
+		const { evaluatedIds, mask, moveToLeafPos, parent } = this.buildPrefixTree(tokenArrays);
 
-		// Build move data with leaf positions and parent positions
+		// Build move data with leaf positions only
 		const moveData = movesWithTokens.map((m, index) => {
 			const leafPos = moveToLeafPos[index];
-			// Find parent position (root position for this move)
-			// Parent is the first token position
-			const firstToken = m.tokens[0];
-			let parentPos = -1;
-			for (let i = 0; i < evaluatedIds.length; i++) {
-				if (evaluatedIds[i] === firstToken && i < leafPos) {
-					// This is a potential parent
-					// Check if it's in the same branch by checking mask
-					// If leafPos can see position i, then i might be the parent
-					if (mask[leafPos * evaluatedIds.length + i] === 1.0 && i !== leafPos) {
-						// Find the closest parent (maximum index less than leafPos that leaf can see)
-						if (i > parentPos) {
-							parentPos = i;
-						}
-					}
-				}
-			}
-
 			return {
 				move: m.move,
 				notation: m.notation,
-				leafPos,
-				parentPos
+				leafPos
 			};
 		});
 
-		return { prefixTokens, evaluatedIds, mask, moveData };
+		return { prefixTokens, evaluatedIds, mask, parent, moveData };
 	}
 
 	/**
@@ -272,16 +263,19 @@ export class TrigoTreeAgent {
 	): {
 		evaluatedIds: number[];
 		mask: number[];
-		moveData: Array<{ move: Move; notation: string; leafPos: number; parentPos: number }>;
+		parent: Array<number | null>;
+		moveData: Array<{ move: Move; notation: string; leafPos: number }>;
 	} {
 		return this.buildMoveTree(game, moves);
 	}
 
 	/**
-	 * Select best move using tree attention
-	 * Evaluates all valid moves in a single inference call
+	 * Select move using tree attention with optional temperature sampling
+	 * @param game Current game state
+	 * @param temperature Sampling temperature (0 = greedy, higher = more random)
+	 * @returns Selected move (position or Pass if no valid positions)
 	 */
-	async selectBestMove(game: TrigoGame): Promise<Move | null> {
+	async selectMove(game: TrigoGame, temperature: number = 0): Promise<Move> {
 		if (!this.inferencer.isReady()) {
 			throw new Error("Inferencer not initialized");
 		}
@@ -289,29 +283,76 @@ export class TrigoTreeAgent {
 		// Get current player as string
 		const currentPlayer = this.stoneToPlayer(game.getCurrentPlayer());
 
-		// Get all valid moves
+		// Get all valid position moves (excluding Pass)
 		const validMoves: Move[] = game.validMovePositions().map((pos) => ({
 			x: pos.x,
 			y: pos.y,
 			z: pos.z,
 			player: currentPlayer
 		}));
-		validMoves.push({ player: currentPlayer, isPass: true }); // Add pass move
 
+		// If no position moves available, return Pass directly
 		if (validMoves.length === 0) {
-			return null;
+			return { player: currentPlayer, isPass: true };
 		}
 
-		// Score all moves using tree attention
+		// Score only position moves (Pass excluded from inference)
 		const scoredMoves = await this.scoreMoves(game, validMoves);
 
-		// Return move with highest score
+		// Fallback to Pass if scoring fails
 		if (scoredMoves.length === 0) {
-			return null;
+			return { player: currentPlayer, isPass: true };
+		}
+
+		// Select move based on temperature
+		if (temperature <= 0.01) {
+			// Greedy selection (use reduce to avoid mutating scoredMoves)
+			const best = scoredMoves.reduce((a, b) => (b.score > a.score ? b : a));
+			return best.move;
+		}
+
+		// Temperature sampling
+		return this.sampleMove(scoredMoves, temperature);
+	}
+
+	/**
+	 * Select best move using tree attention (greedy, temperature=0)
+	 * Evaluates all valid moves in a single inference call
+	 * Pass is excluded from model prediction - returned directly if no positions available
+	 */
+	async selectBestMove(game: TrigoGame): Promise<Move> {
+		return this.selectMove(game, 0);
+	}
+
+	/**
+	 * Sample a move from scored moves using temperature
+	 */
+	private sampleMove(scoredMoves: ScoredMove[], temperature: number): Move {
+		// Apply temperature scaling to log probabilities
+		const adjustedScores = scoredMoves.map((m) => m.score / temperature);
+		const maxScore = Math.max(...adjustedScores);
+		const expScores = adjustedScores.map((score) => Math.exp(score - maxScore));
+		const sumExp = expScores.reduce((sum, exp) => sum + exp, 0);
+
+		if (sumExp === 0 || !isFinite(sumExp)) {
+			// Fallback to uniform random
+			const idx = Math.floor(Math.random() * scoredMoves.length);
+			return scoredMoves[idx].move;
 		}
 
-		scoredMoves.sort((a, b) => b.score - a.score);
-		return scoredMoves[0].move;
+		const probabilities = expScores.map((exp) => exp / sumExp);
+
+		// Weighted random sampling
+		const random = Math.random();
+		let cumulative = 0;
+		for (let i = 0; i < scoredMoves.length; i++) {
+			cumulative += probabilities[i];
+			if (random <= cumulative) {
+				return scoredMoves[i].move;
+			}
+		}
+
+		return scoredMoves[scoredMoves.length - 1].move;
 	}
 
 	/**
@@ -323,13 +364,13 @@ export class TrigoTreeAgent {
 		}
 
 		// Build tree structure
-		const { prefixTokens, evaluatedIds, mask, moveData } = this.buildMoveTree(game, moves);
+		const { prefixTokens, evaluatedIds, mask, parent, moveData } = this.buildMoveTree(game, moves);
 
-		console.debug(`Tree structure: ${evaluatedIds.length} nodes for ${moveData.length} moves`);
-		console.debug(`Evaluated IDs:`, evaluatedIds.map((id) => String.fromCharCode(id)).join(""));
+		//console.debug(`Tree structure: ${evaluatedIds.length} nodes for ${moveData.length} moves`);
+		//console.debug(`Evaluated IDs:`, evaluatedIds.map((id) => String.fromCharCode(id)).join(""));
 		//console.debug(
 		//	`Move positions:`,
-		//	moveData.map((m) => `${m.notation}@${m.leafPos}(parent=${m.parentPos})`)
+		//	moveData.map((m) => `${m.notation}@${m.leafPos}`)
 		//);
 
 		// Prepare inputs for evaluation
@@ -343,10 +384,14 @@ export class TrigoTreeAgent {
 		const output = await this.inferencer.runEvaluationInference(inputs);
 		const { logits, numEvaluated } = output;
 
-		console.debug(`Inference output: ${numEvaluated} evaluated positions`);
+		//console.debug(`Inference output: ${numEvaluated} evaluated positions`);
+		//process.stdout.write(".");
+
+		// Minimum probability threshold to avoid log(0) while preserving small probabilities
+		const MIN_PROB = 1e-10;  // log(1e-10) ≈ -23
 
-		// Score each move by accumulating log probabilities for all tokens in the path
-		// For each move, traverse the full path from root to leaf and sum log probabilities
+		// Score each move by accumulating log probabilities along the path
+		// For each move, build the path from root to leaf using parent array
 		const scoredMoves: ScoredMove[] = [];
 
 		// Cache softmax results for each output position to avoid recomputation
@@ -361,46 +406,122 @@ export class TrigoTreeAgent {
 		for (const data of moveData) {
 			let logProb = 0;
 
-			// Reconstruct the full path from root to leaf using the mask
-			// The mask tells us which positions each position can attend to (ancestors)
-			// We need to find all positions from root (or first move token) to leaf
-			const leafPos = data.leafPos;
-			const path: number[] = [0];
-
-			// Build path by finding all ancestors that this leaf can see
-			// Start from position 0 and find all positions up to leafPos that are in the path
-			for (let pos = 0; pos <= leafPos; pos++) {
-				// Check if leaf can see this position (it's an ancestor or self)
-				if (mask[leafPos * evaluatedIds.length + pos] === 1) {
-					path.push(pos + 1);
+			// Special case: leafPos = -1 means empty tokens (single-char notation)
+			// Use prefix logits directly to predict the single character
+			if (data.leafPos === -1) {
+				const notationTokens = this.stringToTokens(data.notation);
+				if (notationTokens.length === 1) {
+					// Single-char notation: use prefix output (logits[0]) to predict it
+					const token = notationTokens[0];
+					const probs = getSoftmax(0);  // Prefix output
+					const prob = Math.max(probs[token], MIN_PROB);
+					logProb = Math.log(prob);
+				} else {
+					console.error(`Unexpected: leafPos=-1 but notation length=${notationTokens.length}`);
+					logProb = Math.log(MIN_PROB);
 				}
+
+				scoredMoves.push({
+					move: data.move,
+					score: logProb,
+					notation: data.notation
+				});
+				continue;  // Skip the normal path processing
 			}
-			//console.debug("path:", data.notation, "->", path);
 
-			// Now accumulate log probabilities for all transitions in the path
-			// For each token in the path, we need P(token[i] | context up to token[i-1])
-			// The logits at output position j predict the NEXT token after position j
-			// So to get P(token at position i | context), we look at output from parent position
-			for (let i = 0; i < path.length; i++) {
-				const currentPos = path[i];
-				const currentToken = data.notation.charCodeAt(i);
+			// Build path from leaf to root using parent array, then reverse
+			const pathReverse: number[] = [];
+			let pos: number | null = data.leafPos;
+			const visited = new Set<number>();
+
+			// Safety checks: prevent infinite loops and invalid indices
+			while (pos !== null && pos !== undefined) {
+				// Check for cycles
+				if (visited.has(pos)) {
+					console.error(`Cycle detected in parent array at position ${pos}`);
+					break;
+				}
 
-				// Subsequent tokens: predicted from previous position
-				// The output at prevPos predicts the token at currentPos
+				// Check for valid index
+				if (pos < 0 || pos >= parent.length) {
+					console.error(`Invalid position ${pos}, parent array length: ${parent.length}`);
+					break;
+				}
+
+				visited.add(pos);
+				pathReverse.push(pos);
+				pos = parent[pos];
+
+				// Safety limit to prevent runaway loops
+				if (pathReverse.length > 10000) {
+					console.error(`Path too long (>10000), possible infinite loop. leafPos: ${data.leafPos}`);
+					break;
+				}
+			}
 
-				console.assert(currentPos <= numEvaluated, `Output position ${currentPos} exceeds numEvaluated ${numEvaluated}`);
+			// Reverse to get root→leaf path (indices in evaluatedIds array)
+			const path = pathReverse.reverse();
+
+			// Now accumulate log probabilities for each transition in path
+			// TreeLM returns logits[0..m] where:
+			//   logits[0] = output at prefix last position (n-1) → predicts evaluatedIds[0]
+			//   logits[i] = output at position (n-1+i) → predicts evaluatedIds[i]
+			//
+			// For a parent→child transition:
+			//   Parent: evaluatedIds[parentIdx] at input position (n+parentIdx)
+			//   Parent output: at position (n+parentIdx), which is logits[parentIdx+1]
+			//   Child token: evaluatedIds[childIdx]
+			//   Probability: softmax(logits[parentIdx+1])[evaluatedIds[childIdx]]
+
+			// Special case: root token (predicted from prefix last position)
+			if (path.length > 0) {
+				const rootPos = path[0];
+				const rootToken = evaluatedIds[rootPos];
+
+				// Root is predicted by prefix last position output (logits[0])
+				const probs = getSoftmax(0);
+				const prob = Math.max(probs[rootToken], MIN_PROB);  // Clip to minimum
+				logProb += Math.log(prob);
+			}
 
-				if (currentPos <= numEvaluated) {
-					const probs = getSoftmax(currentPos);
-					const prob = probs[currentToken];
+			// Subsequent transitions: parent→child in tree
+			for (let i = 1; i < path.length; i++) {
+				const parentPos = path[i - 1];  // evaluatedIds index
+				const childPos = path[i];        // evaluatedIds index
+				const childToken = evaluatedIds[childPos];
+
+				// Parent output is at logits[parentPos+1]
+				const logitsIndex = parentPos + 1;
+
+				// Check bounds: logitsIndex must be <= numEvaluated
+				// (logits has length numEvaluated+1, indices 0 to numEvaluated)
+				if (logitsIndex <= numEvaluated) {
+					const probs = getSoftmax(logitsIndex);
+					const prob = Math.max(probs[childToken], MIN_PROB);  // Clip to minimum
+					logProb += Math.log(prob);
+				} else {
+					// Parent position out of bounds
+					logProb += Math.log(MIN_PROB);
+				}
+			}
 
-					if (prob > 0)
-						logProb += Math.log(prob);
-					else
-						logProb += -100;
+			// CRITICAL: Add probability for the LAST token (excluded from tree)
+			// The last character of the move notation was excluded from evaluatedIds
+			// We need to predict it using the leaf node's output
+			if (path.length > 0) {
+				const leafPos = path[path.length - 1];  // Last position in path
+				const lastToken = this.stringToTokens(data.notation).pop()!;  // Last char of notation
+
+				// Leaf output is at logits[leafPos+1]
+				const logitsIndex = leafPos + 1;
+
+				if (logitsIndex <= numEvaluated) {
+					const probs = getSoftmax(logitsIndex);
+					const prob = Math.max(probs[lastToken], MIN_PROB);  // Clip to minimum
+					logProb += Math.log(prob);
+				} else {
+					logProb += Math.log(MIN_PROB);
 				}
-				else
-					logProb += -100;
 			}
 
 			scoredMoves.push({

trigo-web/package.json

@@ -48,7 +48,7 @@
 		"jison": "^0.4.18",
 		"jsdom": "^27.1.0",
 		"lint-staged": "^16.2.7",
-		"onnxruntime-node": "1.23.2",
+		"onnxruntime-node": "^1.23.2",
 		"onnxruntime-web": "1.23.2",
 		"prettier": "^3.6.2",
 		"tsx": "^4.20.6",
@@ -58,5 +58,8 @@
 		"vue": "^3.3.4",
 		"vue-tsc": "^3.1.3",
 		"yargs": "^18.0.0"
+	},
+	"dependencies": {
+		"dotenv": "^17.2.3"
 	}
 }

trigo-web/public/onnx/{GPT2CausalLM_ep0015_evaluation.onnx → 20251220-trigo-value-llama-l6-h64-251220-value0.02/LlamaCausalLM_ep0036_evaluation.onnx}

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:91e47b22b07bc5bef2083637dabd6d51e3c9f2faf84fdaa808f5ab3afaf769f8
-size 3676431
+oid sha256:f28ac6d8655eec8189887baff3677159e0c9b4dbc4c415884de9159b6d0ee621
+size 1387656

trigo-web/public/onnx/20251220-trigo-value-llama-l6-h64-251220-value0.02/LlamaCausalLM_ep0036_tree.onnx

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:84f0441fa4688cd3b3b02195237a3bce8ff9380f1ba57db6fd8fe1fa9ffcec01
+size 1378983