@nine-lab/nine-mu 0.1.359 → 0.1.361

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nine-lab/nine-mu",
-  "version": "0.1.359",
+  "version": "0.1.361",
   "description": "AI-Driven Full-Stack Code Fabrication Engine",
   "type": "module",
   "main": "./dist/nine-mu.umd.js",

package/src/components/exception/ExceptionHook.js

@@ -5,60 +5,64 @@ import React from 'react';
 // ==========================================
 export const NineExceptionStyles = {
 	container: {
-		height: '100%',
-		padding: '20px 25px',        // 위아래 여백을 적절히 줄여 꽉 찬 느낌 유도
-		background: '#121314',       // 터미널 다크 블랙 배경
-		// ⭐ 모든 요소가 완벽한 터미널 정렬을 갖추도록 고정폭 서체를 부모에 강제 주입
+		minHeight: '100%',
+		flexGrow: 1,
+		padding: '25px',
+		background: '#121314',              // 터미널 다크 블랙 배경
+		// ⭐ 모든 요소의 폰트 크기, 패딩, 높이 기준을 부모 레벨에서 완벽히 통일
 		fontFamily: 'Consolas, Monaco, "Courier New", monospace',
+		fontSize: '14px',
+		lineHeight: '1.6',                  // 줄간격을 터미널 배시 화면 비율(1.6)로 고정
+		color: '#999',                      // 기본 텍스트 색상 #999 적용
 		textAlign: 'left',
 		boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
-
-		// 내부 라인들을 인라인 텍스트 흐름처럼 촘촘하게 쌓기 위해 flex 간격 조정
-		display: 'flex',
-		flexDirection: 'column',
-		gap: '10px',                 // 줄간 간격을 10px로 타이트하게 조여 터미널 감성 극대화
-		lineHeight: '1.2'            // 모든 라인의 글자 높이 기준 통일
+		boxSizing: 'border-box'
 	},
+	// 1. 모든 라인의 display 형식을 'block'으로 맞추고 마진/패딩을 0으로 통일
 	systemError: {
-		color: '#999',               // 요청하신 대로 #999 색상 지정
+		color: '#999',
 		fontWeight: 'bold',
-		fontSize: '14px',
-		margin: '0',                 // 수동 마진 제거 (부모 gap으로 일괄 제어)
-		letterSpacing: '0.5px',
-		padding: '0'
+		margin: '0',
+		padding: '0',
+		display: 'block'
 	},
+	// 2. 에러 본문 텍스트도 불필요한 속성을 다 버리고 일반 라인과 똑같이 흐르게 교정
 	pre: {
 		background: 'transparent',
-		color: '#666',
+		color: '#666',                      // aa is not defined는 요청하신 #666 적용
 		padding: '0',
-		margin: '0',                 // pre 태그 고유의 불규칙한 여백 완전 제거
+		margin: '0',
 		border: 'none',
 		overflowX: 'auto',
 		whiteSpace: 'pre-wrap',
-		fontFamily: 'Consolas, Monaco, monospace',
-		fontSize: '14px',
+		fontFamily: 'inherit',              // 부모 폰트 그대로 상속
+		fontSize: 'inherit',                // 부모 크기 그대로 상속
 		display: 'block'
 	},
+	// 3. 에러 위치 추적 라인
+	locationRow: {
+		color: '#666',
+		margin: '0',
+		padding: '0',
+		display: 'block'
+	},
+	// 4. 하단 영역의 flex와 gap을 완전히 제거하여 줄간격 왜곡 원천 차단
 	footer: {
-		fontSize: '14px',
-		color: '#999',
 		margin: '0',
 		padding: '0',
-		display: 'flex',
-		flexDirection: 'column',
-		gap: '10px'                  // 후속 로그가 찍힐 때도 동일한 간격 유지
+		display: 'block'
 	},
 	promptRow: {
 		margin: '0',
 		padding: '0',
 		display: 'block',
-		color: '#999'                // 대화형 구문도 완벽하게 #999 색상 일치
+		color: '#999'
 	},
 	cliLink: {
-		color: '#38A169',            // 선택지 y는 선명한 터미널 그린
-		padding: '0 2px',
-		fontFamily: 'Consolas, Monaco, monospace',
-		fontSize: '14px',
+		color: '#38A169',                   // y 링크 터미널 그린
+		padding: '0',
+		fontFamily: 'inherit',
+		fontSize: 'inherit',
 		fontWeight: 'bold',
 		cursor: 'pointer',
 		textDecoration: 'underline',
@@ -86,6 +90,11 @@ export class NineExceptionHook extends React.Component {
 
 	componentDidCatch(error, errorInfo) {
 		console.error("🚨 [Nine-Library] 본문 렌더링 에러 포착:", error);
+
+		this.setState({
+			errorInfo: errorInfo || null
+		});
+
 		if (this.props.onCatch) {
 			this.props.onCatch(error, errorInfo);
 		}
@@ -114,7 +123,8 @@ export class NineExceptionHook extends React.Component {
 
 	handleLocationChange() {
 		setTimeout(() => {
-			if (this.state.hasError && this.state.reportStatus !== 'idle') {
+			// reportStatus 조건 대신, 에러가 나 있는 상태에서 주소가 바뀌었는지만 체크해야 안전합니다.
+			if (this.state.hasError && this.lastPath !== window.location.pathname) {
 				console.log("[Nine-Library] 페이지 주소 변경 감지 -> 에러 상태 초기화");
 				this.lastPath = window.location.pathname;
 				this.setState({ hasError: false, error: null, reportStatus: 'idle' });
@@ -147,23 +157,43 @@ export class NineExceptionHook extends React.Component {
 			const errorMessage = this.state.error?.message || String(this.state.error);
 			const customStyles = this.props.styles || {};
 
+			// 🔍 React 컴포넌트 스택에서 파일명과 라인 번호 추출
+			let errorLocation = '';
+			if (this.state.errorInfo?.componentStack) {
+				const lines = this.state.errorInfo.componentStack.trim().split('\n');
+				const targetLine = lines[0] || '';
+				const match = targetLine.match(/at\s+(\w+)\s+\((.*)\)/) || targetLine.match(/at\s+(.*)/);
+				if (match) {
+					errorLocation = match[2] ? `${match[1]} (${match[2]})` : match[1];
+				} else {
+					errorLocation = targetLine.trim();
+				}
+			}
+
 			return React.createElement(
 				'div',
 				{
 					style: { ...NineExceptionStyles.container, ...customStyles.container, ...this.props.containerStyle }
 				},
 
-				// 1. 에러 감지 로그
+				// 1. [SYSTEM] 라인
 				React.createElement(
 					'div',
 					{ style: { ...NineExceptionStyles.systemError, ...customStyles.systemError } },
 					'[SYSTEM] COMPONENT RENDER ERROR DETECTED'
 				),
 
-				// 2. 에러 내용
+				// 2. aa is not defined 라인
 				React.createElement('pre', { style: { ...NineExceptionStyles.pre, ...customStyles.pre } }, errorMessage),
 
-				// 3. CLI 프롬프트 영역
+				// 3. at MemberUsers 라인
+				errorLocation && React.createElement(
+					'div',
+					{ style: { ...NineExceptionStyles.locationRow, ...customStyles.locationRow } },
+					`  at ${errorLocation}`
+				),
+
+				// 4. CLI 프롬프트 및 후속 결과 라인 영역
 				React.createElement(
 					'div',
 					{ style: { ...NineExceptionStyles.footer, ...customStyles.footer } },
@@ -183,17 +213,18 @@ export class NineExceptionHook extends React.Component {
 						React.createElement('span', null, '/n)?')
 					),
 
+					// display: 'block'과 margin/padding 0을 주어 다른 라인들과 오차 없이 간격을 맞춤
 					this.state.reportStatus === 'sending' && React.createElement(
 						'div',
-						{ style: { color: '#ED8936', margin: '0', lineHeight: '1' } },
+						{ style: { color: '#ED8936', margin: '0', padding: '0', display: 'block' } },
 						'>> Connecting to Control Tower... Sending payload.'
 					),
 
 					this.state.reportStatus === 'success' && React.createElement(
 						'div',
-						{ style: { display: 'flex', flexDirection: 'column', gap: '12px', margin: '0' } },
-						React.createElement('div', { style: { color: '#38A169', fontWeight: 'bold', lineHeight: '1' } }, '>> Transmit complete. Core engine initialized.'),
-						React.createElement('div', { style: { color: '#A0AEC0', fontStyle: 'italic', fontSize: '13px', lineHeight: '1' } }, 'AI가 소스 코드를 재수정하는 동안 잠시만 기다려주세요...')
+						{ style: { margin: '0', padding: '0', display: 'block' } },
+						React.createElement('div', { style: { color: '#38A169', fontWeight: 'bold', display: 'block', margin: '0' } }, '>> Transmit complete. Core engine initialized.'),
+						React.createElement('div', { style: { color: '#A0AEC0', fontStyle: 'italic', fontSize: '13px', display: 'block', margin: '4px 0 0 0' } }, 'AI가 소스 코드를 재수정하는 동안 잠시만 기다려주세요...')
 					)
 				)
 			);