Merge pull request #1691 from Hack23/copilot/update-node-version-configs

Resolve remaining review threads for Node 25 / ES2024 alignment docs and config

Author: pethers

.devcontainer/devcontainer.json

@@ -1,6 +1,6 @@
 {
   "name": "Black Trigram Dev Container",
-  "image": "mcr.microsoft.com/devcontainers/javascript-node:24-trixie",
+  "image": "mcr.microsoft.com/devcontainers/base:debian",
   "features": {
     "ghcr.io/devcontainers/features/github-cli:1": {
       "installDirectlyFromGitHubRelease": true,
@@ -9,7 +9,7 @@
     // Using a single feature for Node.js for simplicity
     "ghcr.io/devcontainers/features/node:1": {
       "nodeGypDependencies": true,
-      "version": "24" // Aligned with base image
+      "version": "25" // Aligned with package.json engines (>=25)
     },
     "ghcr.io/devcontainers/features/git:1": {
       "ppa": true,

.github/COPILOT_MCP_SETUP.md

@@ -17,7 +17,7 @@ Model Context Protocol (MCP) is a protocol that allows AI assistants like GitHub
 
 ## 🔧 Configured MCP Servers
 
-This project uses the following MCP servers to optimize Copilot for our React + PixiJS game development stack:
+This project uses the following MCP servers to optimize Copilot for our React + Three.js/@react-three/fiber game development stack:
 
 ### 1. GitHub Server (`@modelcontextprotocol/server-github`)
 
@@ -52,7 +52,7 @@ This project uses the following MCP servers to optimize Copilot for our React +
 - E2E test development
 - Visual regression testing
 - Debugging UI issues
-- Testing PixiJS rendering
+- Testing Three.js/@react-three/fiber rendering
 - Validating game mechanics
 
 ### 3. Filesystem Server (`@modelcontextprotocol/server-filesystem`)
@@ -97,8 +97,8 @@ This project uses the following MCP servers to optimize Copilot for our React +
 The `.github/copilot-setup-steps.yml` file configures automatic dependency installation when Copilot Workspace starts:
 
 **Pre-installed dependencies**:
-- Node.js 24 environment
-- System libraries for PixiJS and graphics rendering
+- Node.js 25 environment
+- System libraries for Three.js and 3D graphics rendering
 - Chrome browser for testing
 - Display server for headless testing
 - npm packages and dependencies
@@ -164,13 +164,13 @@ This will check:
 3. **Filesystem**: Generate trigram component files with Korean translations
 4. **Playwright**: Test stance selection and combat animations
 
-### PixiJS Performance Optimization
+### Three.js/@react-three/fiber Performance Optimization
 
-**Scenario**: Optimizing sprite rendering and animation
+**Scenario**: Optimizing 3D rendering and scene performance
 
 **MCP Assistance**:
 1. **Sequential Thinking**: Analyze performance bottlenecks
-2. **Filesystem**: Locate all sprite usage across components
+2. **Filesystem**: Locate all Three.js component usage across the codebase
 3. **Playwright**: Capture performance metrics during gameplay
 4. **GitHub**: Review commit history for previous optimizations
 
@@ -201,7 +201,7 @@ This will check:
 When working with Copilot Chat, you can explicitly request MCP functionality:
 
 **Examples**:
-- "Use the filesystem server to find all components that use PixiJS containers"
+- "Use the filesystem server to find all components that use Three.js/@react-three/fiber Canvas elements"
 - "With the GitHub server, show me recent changes to the combat system"
 - "Use Playwright to take a screenshot of the trigram selector"
 - "Apply sequential thinking to design the new vital points targeting system"

.github/agents/AGENT_CAPABILITIES.md

@@ -7,7 +7,7 @@ This document provides a comprehensive overview of all custom agents available f
 All agents should reference these key files to understand the project environment:
 
 1. **Setup & Environment**: `.github/workflows/copilot-setup-steps.yml`
-   - Available build tools and dependencies (Node.js 24, npm, TypeScript)
+   - Available build tools and dependencies (Node.js 25, npm, TypeScript)
    - Environment setup and cache configuration
    - Workflow permissions and capabilities
 
@@ -22,9 +22,9 @@ All agents should reference these key files to understand the project environmen
 | Agent | Primary Role | Key Capabilities | MCP Servers | Best For |
 |-------|-------------|------------------|-------------|----------|
 | 🎯 **Task Agent** | Product Orchestrator | Issue creation, quality analysis, ISMS compliance, agent delegation | GitHub, Playwright, AWS | Product management, quality oversight, issue tracking |
-| 🛠️ **Coding Agent** | Full-Stack Developer | Feature implementation, bug fixes, Korean theming, PixiJS integration | Standard | General development tasks, new features |
+| 🛠️ **Coding Agent** | Full-Stack Developer | Feature implementation, bug fixes, Korean theming, Three.js/R3F integration | Standard | General development tasks, new features |
 | ⚛️ **Frontend Specialist** | React Expert | Type-safe components, React 19 features, state management | Standard | Complex React components, UI architecture |
-| 🎮 **Game Developer** | PixiJS Specialist | Game loops, rendering optimization, audio integration, 60fps performance | Standard | Game mechanics, PixiJS systems, performance |
+| 🎮 **Game Developer** | Three.js/R3F Specialist | Game loops, rendering optimization, audio integration, 60fps performance | Standard | Game mechanics, Three.js/R3F systems, performance |
 | 🧪 **Testing Agent** | Test Writer | Unit tests, E2E tests, test debugging, mocking | Standard | Writing tests, debugging test failures |
 | 🔬 **Test Engineer** | Test Strategist | Test architecture, coverage enforcement, CI integration | Standard | Test strategy, coverage improvement, CI/CD |
 | 📝 **Documentation Writer** | Documentation Expert | JSDoc/TSDoc, user guides, security policies, bilingual content | Standard | API docs, user guides, SECURITY.md |
@@ -134,16 +134,16 @@ for missing ISMS policy references. Create issues for gaps."
 
 | Aspect | Coding Agent | Frontend Specialist | Game Developer |
 |--------|-------------|-------------------|----------------|
-| **Primary Focus** | General features | React components | PixiJS systems |
+| **Primary Focus** | General features | React components | Three.js/R3F systems |
 | **Best For** | New features, bug fixes | Component architecture | Game mechanics |
-| **Technologies** | TypeScript, React, PixiJS | React 19, strict TS | PixiJS 8.x, audio |
+| **Technologies** | TypeScript, React, Three.js | React 19, strict TS | Three.js 0.183.x, audio |
 | **Complexity** | General | Advanced React | Game-specific |
 | **When to Use** | Most dev tasks | Complex UI patterns | Performance-critical game code |
 
 **Decision Tree:**
 ```
 Development Task
-├─ Is it PixiJS game mechanics? → Game Developer
+├─ Is it Three.js game mechanics? → Game Developer
 ├─ Is it complex React patterns? → Frontend Specialist  
 └─ Is it general feature/bug? → Coding Agent
 ```
@@ -255,7 +255,7 @@ Eight Trigram stance system features"
 # - Assigns to @game-developer
 
 # 2. Game Developer: Implement feature
-@game-developer "Implement issue #123 - Geon stance mechanics with PixiJS"
+@game-developer "Implement issue #123 - Geon stance mechanics with Three.js/R3F"
 
 # 3. Testing Agent: Create tests
 @testing-agent "Create unit and E2E tests for Geon stance (issue #123)"
@@ -279,7 +279,7 @@ Eight Trigram stance system features"
 - [ ] Need agent coordination? → **Task Agent**
 
 ### For Development
-- [ ] PixiJS game mechanics? → **Game Developer**
+- [ ] Three.js game mechanics? → **Game Developer**
 - [ ] Complex React patterns? → **Frontend Specialist**
 - [ ] General feature/bug? → **Coding Agent**
 

.github/agents/README.md

@@ -37,7 +37,7 @@ All agents reference these key files to understand the project environment and c
 
 ### 1. 🔧 Setup & Environment
 **File**: `.github/workflows/copilot-setup-steps.yml`
-- Node.js 24, npm, TypeScript toolchain
+- Node.js 25, npm, TypeScript toolchain
 - Build and test environment setup
 - Cache configuration for dependencies
 - Workflow permissions (read/write access levels)
@@ -75,7 +75,7 @@ All agents have access to essential project configuration files that define the
 | File | Purpose | What Agents Find Here |
 |------|---------|----------------------|
 | **[`README.md`](/README.md)** | Main Project Context | Project overview, tech stack, ISMS compliance framework, combat mechanics, Korean martial arts philosophy |
-| **[`.github/workflows/copilot-setup-steps.yml`](/.github/workflows/copilot-setup-steps.yml)** | Environment Setup | Node.js 24 configuration, npm dependencies, build/test commands, GitHub Actions permissions |
+| **[`.github/workflows/copilot-setup-steps.yml`](/.github/workflows/copilot-setup-steps.yml)** | Environment Setup | Node.js 25 configuration, npm dependencies, build/test commands, GitHub Actions permissions |
 | **[`.github/copilot-mcp.json`](/.github/copilot-mcp.json)** | MCP Server Configuration | Available MCP servers (filesystem, github, git, memory, sequential-thinking, playwright, brave-search, aws), tool capabilities, integration patterns |
 
 ### MCP Servers Available

.github/agents/code-review-agent.md

@@ -11,7 +11,7 @@ You are a specialized code review agent for the Black Trigram (흑괘) project.
 **ALWAYS read these files at the start of each session to understand the environment and configuration:**
 
 1. **Setup & Environment**: `.github/workflows/copilot-setup-steps.yml`
-   - Available build tools and dependencies (Node.js 24, npm, TypeScript)
+   - Available build tools and dependencies (Node.js 25, npm, TypeScript)
    - Environment setup and cache configuration
    - Workflow permissions and capabilities
 
@@ -35,7 +35,7 @@ You perform thorough code reviews, provide constructive feedback, and ensure all
    - Combat mechanics and Korean martial arts game design philosophy
 
 2. **Environment Setup**: [`.github/workflows/copilot-setup-steps.yml`](/.github/workflows/copilot-setup-steps.yml)
-   - Development environment configuration (Node.js 24, npm dependencies)
+   - Development environment configuration (Node.js 25, npm dependencies)
    - Build and test commands that are run in CI
    - Available GitHub Actions permissions for automation
 

.github/agents/coding-agent.md

@@ -1,17 +1,17 @@
 ---
 name: coding-agent
-description: TypeScript/React/PixiJS specialist for Black Trigram (흑괘) - implements features, fixes bugs, and follows project patterns for Korean martial arts game development
+description: TypeScript/React/Three.js specialist for Black Trigram (흑괘) - implements features, fixes bugs, and follows project patterns for Korean martial arts game development
 tools: ["*"]
 ---
 
-You are a specialized coding agent for the Black Trigram (흑괘) project - a realistic 2D precision combat game built with React, TypeScript, and PixiJS.
+You are a specialized coding agent for the Black Trigram (흑괘) project - a realistic 3D precision combat game built with React, TypeScript, and Three.js/@react-three/fiber.
 
 ## Essential Context Files
 
 **ALWAYS read these files at the start of each session to understand the environment and configuration:**
 
 1. **Setup & Environment**: `.github/workflows/copilot-setup-steps.yml`
-   - Available build tools and dependencies (Node.js 24, npm, TypeScript)
+   - Available build tools and dependencies (Node.js 25, npm, TypeScript)
    - Environment setup and cache configuration
    - Workflow permissions and capabilities
 
@@ -35,7 +35,7 @@ You help implement new features, fix bugs, and refactor code following the proje
    - Combat mechanics and Korean martial arts game design philosophy
 
 2. **Environment Setup**: [`.github/workflows/copilot-setup-steps.yml`](/.github/workflows/copilot-setup-steps.yml)
-   - Development environment configuration (Node.js 24, npm dependencies)
+   - Development environment configuration (Node.js 25, npm dependencies)
    - Build and test commands that are run in CI
    - Available GitHub Actions permissions for automation
 
@@ -48,10 +48,10 @@ You help implement new features, fix bugs, and refactor code following the proje
 
 ## Core Technologies
 
-- **React 18+** with TypeScript
-- **PixiJS v8** with `@pixi/react` for rendering
-- **@pixi/layout** for responsive UI layouts
-- **@pixi/ui** for UI components
+- **React 19+** with TypeScript
+- **Three.js 0.183.x with @react-three/fiber for 3D rendering**
+- **@react-three/drei for 3D helpers and UI overlays**
+- **@react-three/postprocessing for visual effects**
 - **Vite** for build tooling
 - **Vitest** for unit testing
 - **Cypress** for E2E testing
@@ -64,16 +64,11 @@ When creating or modifying components:
 
 ```typescript
 // ALWAYS follow this pattern from copilot-instructions.md
-import "@pixi/layout";
-import { LayoutContainer } from "@pixi/layout/components";
-import "@pixi/layout/react";
-import { extend } from "@pixi/react";
-import { Container } from "pixi.js";
-import { extendPixiComponents } from "../../utils/pixiExtensions";
-
-// Register components
-extend({ Container, LayoutContainer });
-extendPixiComponents();
+import { Canvas } from "@react-three/fiber";
+import { Html, PerspectiveCamera } from "@react-three/drei";
+import * as THREE from "three";
+import { useFrame, useThree } from "@react-three/fiber";
+import { KOREAN_COLORS, FONT_FAMILY } from "../../types/constants";
 
 export const ComponentName: React.FC<ComponentProps> = ({
   width = 1200,
@@ -107,18 +102,20 @@ import { KOREAN_COLORS, FONT_FAMILY } from "../../types/constants";
 - CARDINAL_CENTER: 0xffaa00 // 중앙 황색
 
 // Bilingual text pattern
-<pixiText
-  text={`${korean} | ${english}`}
-  style={{
+// Bilingual text pattern
+<Html center>
+  <div style={{
     fontFamily: FONT_FAMILY.KOREAN,
-    fill: KOREAN_COLORS.ACCENT_GOLD,
-  }}
-/>
+    color: KOREAN_COLORS.ACCENT_GOLD,
+  }}>
+    {korean} | {english}
+  </div>
+</Html>
 ```
 
 ### 3. Layout System Usage
 
-**Use @pixi/layout for all positioning:**
+**Use Html overlays from @react-three/drei for UI:**
 
 ```typescript
 const layoutConstants = useMemo(() => ({
@@ -127,7 +124,7 @@ const layoutConstants = useMemo(() => ({
   spacing: isMobile ? 8 : 15,
 }), [isMobile]);
 
-<pixiContainer
+<group
   layout={{
     width: "100%",
     flexDirection: "column",
@@ -182,7 +179,7 @@ if (typeof value === 'string' && value.length > 0) {
 - Target 60fps for all UI interactions
 - Use `useMemo` and `useCallback` appropriately
 - Avoid unnecessary re-renders
-- Optimize PixiJS draw calls
+- Optimize Three.js draw calls
 
 ### Testing
 - Add `data-testid` to all interactive elements
@@ -193,7 +190,7 @@ if (typeof value === 'string' && value.length > 0) {
 ## Anti-Patterns to Avoid
 
 ❌ **Don't:**
-- Create custom UI components when @pixi/ui alternatives exist
+- Create custom UI components when @react-three/drei alternatives exist
 - Use hardcoded positioning instead of layout system
 - Skip Korean cultural context in UI design
 - Ignore accessibility requirements
@@ -202,7 +199,7 @@ if (typeof value === 'string' && value.length > 0) {
 - Skip error handling and null checks
 
 ✅ **Do:**
-- Extend existing @pixi/ui components
+- Use existing @react-three/drei helpers
 - Use layout properties for responsive design
 - Integrate Korean martial arts theming
 - Include comprehensive accessibility
@@ -217,7 +214,7 @@ Follow the established structure:
 ```
 src/
 ├── components/
-│   ├── ui/          # PixiJS UI components
+│   ├── ui/          # Three.js UI components
 │   ├── screens/     # Screen-level components
 │   └── game/        # Game-specific components
 ├── hooks/           # Custom React hooks
@@ -231,7 +228,7 @@ src/
 
 ### Adding a New UI Component
 
-1. Check if @pixi/ui has a base component to extend
+1. Check if @react-three/drei has a helper component to extend
 2. Create in appropriate `src/components/ui/` subdirectory
 3. Apply Korean theming and layout system
 4. Add bilingual text support
@@ -259,7 +256,7 @@ src/
 
 Your code changes should:
 
-✅ Follow React + PixiJS + layout integration patterns
+✅ Follow React + Three.js/R3F + Html overlay patterns
 ✅ Include proper TypeScript typing with readonly properties
 ✅ Apply Korean theming and bilingual support
 ✅ Use layout system for responsive design

.github/agents/documentation-writer.md

@@ -11,7 +11,7 @@ You are a specialized documentation agent for the Black Trigram (흑괘) project
 **ALWAYS read these files at the start of each session to understand the environment and configuration:**
 
 1. **Setup & Environment**: `.github/workflows/copilot-setup-steps.yml`
-   - Available build tools and dependencies (Node.js 24, npm, TypeScript)
+   - Available build tools and dependencies (Node.js 25, npm, TypeScript)
    - Environment setup and cache configuration
    - Workflow permissions and capabilities
 
@@ -35,7 +35,7 @@ You help create clear, comprehensive, and accessible documentation for this Kore
    - Combat mechanics and Korean martial arts game design philosophy
 
 2. **Environment Setup**: [`.github/workflows/copilot-setup-steps.yml`](/.github/workflows/copilot-setup-steps.yml)
-   - Development environment configuration (Node.js 24, npm dependencies)
+   - Development environment configuration (Node.js 25, npm dependencies)
    - Build and test commands that are run in CI
    - Available GitHub Actions permissions for automation
 

.github/agents/frontend-specialist.md

@@ -10,7 +10,7 @@ You are a specialized frontend development agent for the Black Trigram (흑괘)
 
 **ALWAYS read these files at the start of each session:**
 
-1. **Setup & Environment**: `.github/workflows/copilot-setup-steps.yml` - Node.js 24, npm, TypeScript configuration
+1. **Setup & Environment**: `.github/workflows/copilot-setup-steps.yml` - Node.js 25, npm, TypeScript configuration
 2. **Project Context**: `README.md` - Architecture, Korean martial arts philosophy, tech stack, ISMS compliance
 3. **MCP Configuration**: `.github/copilot-mcp.json` - Available MCP servers (filesystem, github, playwright, etc.)
 4. **Copilot Instructions**: `.github/copilot-instructions.md` - Project-wide patterns and standards

.github/agents/game-developer.md

@@ -13,7 +13,7 @@ Your focus is **pure 3D with Three.js and @react-three/fiber**. When the user as
 **ALWAYS read these files at the start of each session to understand the environment and configuration:**
 
 1. **Setup & Environment**: `.github/workflows/copilot-setup-steps.yml`
-   - Available build tools and dependencies (Node.js 24, npm, TypeScript)
+   - Available build tools and dependencies (Node.js 25, npm, TypeScript)
    - Environment setup and cache configuration
    - Workflow permissions and capabilities
 
@@ -46,7 +46,7 @@ You:
    - Combat mechanics and Korean martial arts game design philosophy
 
 2. **Environment Setup**: [`.github/workflows/copilot-setup-steps.yml`](/.github/workflows/copilot-setup-steps.yml)
-   - Development environment configuration (Node.js 24, npm dependencies)
+   - Development environment configuration (Node.js 25, npm dependencies)
    - Build and test commands that are run in CI
    - Available GitHub Actions permissions for automation
 

.github/agents/korean-martial-arts-expert.md

@@ -11,7 +11,7 @@ You are a **Korean Martial Arts Expert** specializing in traditional and modern
 **ALWAYS read these files at the start of each session to understand the environment and configuration:**
 
 1. **Setup & Environment**: `.github/workflows/copilot-setup-steps.yml`
-   - Available build tools and dependencies (Node.js 24, npm, TypeScript)
+   - Available build tools and dependencies (Node.js 25, npm, TypeScript)
    - Environment setup and cache configuration
    - Workflow permissions and capabilities