@nine-lab/nine-mu 0.1.360 → 0.1.362

package/package.json

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

package/src/components/exception/ExceptionHook.js

@@ -9,57 +9,62 @@ export const NineExceptionStyles = {
 		flexGrow: 1,
 		padding: '25px',
 		background: '#121314',
-		// ⭐ 모든 요소가 완벽한 터미널 정렬을 갖추도록 고정폭 서체를 부모에 강제 주입
 		fontFamily: 'Consolas, Monaco, "Courier New", monospace',
 		textAlign: 'left',
 		boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
-
-		// 내부 라인들을 인라인 텍스트 흐름처럼 촘촘하게 쌓기 위해 flex 간격 조정
 		display: 'flex',
 		flexDirection: 'column',
-		gap: '10px',                 // 줄간 간격을 10px로 타이트하게 조여 터미널 감성 극대화
-		lineHeight: '1.2'            // 모든 라인의 글자 높이 기준 통일
+		gap: '10px',
+		// ⭐ 수정: 아까 보기 좋았던 넉넉하고 정돈된 줄간격 비율로 복구
+		lineHeight: '1.5'
 	},
+	// 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'
 	},
-	footer: {
-		fontSize: '14px',
+	// 3. 에러 위치 추적 라인
+	locationRow: {
 		color: '#999',
 		margin: '0',
 		padding: '0',
-		display: 'flex',
-		flexDirection: 'column',
-		gap: '10px'                  // 후속 로그가 찍힐 때도 동일한 간격 유지
+		display: 'block',
+		fontFamily: 'inherit',
+		fontSize: 'inherit'
+	},
+	// 4. 하단 영역의 flex와 gap을 완전히 제거하여 줄간격 왜곡 원천 차단
+	footer: {
+		margin: '0',
+		padding: '0',
+		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',
@@ -154,17 +159,27 @@ export class NineExceptionHook extends React.Component {
 			const errorMessage = this.state.error?.message || String(this.state.error);
 			const customStyles = this.props.styles || {};
 
-			// 🔍 React 컴포넌트 스택에서 파일명과 라인 번호 추출기
+			// 🔍 React 컴포넌트 스택에서 파일명과 라인 번호 추출
+			// 🔍 React 컴포넌트 스택에서 파일명과 라인 번호 추출기 (경로 정밀 정제 버전)
 			let errorLocation = '';
 			if (this.state.errorInfo?.componentStack) {
-				// 스택 트레이스 문자열에서 실제 파일 경로가 포함된 첫 줄을 타겟팅합니다.
 				const lines = this.state.errorInfo.componentStack.trim().split('\n');
 				const targetLine = lines[0] || '';
 
-				// 정규식을 이용해 파일명과 라인 번호 정제 (예: at UserList (at users.js:42) -> UserList (users.js:42))
+				// 1. 기존 방식대로 컴포넌트 이름과 전체 경로를 먼저 매칭합니다.
 				const match = targetLine.match(/at\s+(\w+)\s+\((.*)\)/) || targetLine.match(/at\s+(.*)/);
 				if (match) {
-					errorLocation = match[2] ? `${match[1]} (${match[2]})` : match[1];
+					const componentName = match[1];
+					let rawPath = match[2] || '';
+
+					// 2. ⭐ 핵심: 경로에서 'http://localhost:5173/admin' 또는 'http://.../any-path' 파트를 찾아 통째로 날려버립니다.
+					if (rawPath.includes('http://') || rawPath.includes('https://')) {
+						// URL 객체나 정규식을 이용해 도메인 영역을 지우고 /src 포맷만 남깁니다.
+						rawPath = rawPath.replace(/^https?:\/\/[^\/]+/, '');
+					}
+
+					// 3. 컴포넌트 이름 뒤에 깔끔해진 /src 경로만 붙여줍니다.
+					errorLocation = rawPath ? `${componentName} (${rawPath})` : componentName;
 				} else {
 					errorLocation = targetLine.trim();
 				}
@@ -176,24 +191,24 @@ export class NineExceptionHook extends React.Component {
 					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. 에러 내용 (aa is not defined)
+				// 2. aa is not defined 라인
 				React.createElement('pre', { style: { ...NineExceptionStyles.pre, ...customStyles.pre } }, errorMessage),
 
-				// ⭐ 3. [추가] 파싱된 에러 발생 파일명 및 라인 위치 (터미널 그레이 색상 매칭)
+				// 3. at MemberUsers 라인
 				errorLocation && React.createElement(
 					'div',
-					{ style: { color: '#666', fontSize: '14px', margin: '0 0 12px 0', fontFamily: 'Consolas, Monaco, monospace', lineHeight: '1' } },
+					{ style: { ...NineExceptionStyles.locationRow, ...customStyles.locationRow } },
 					`  at ${errorLocation}`
 				),
 
-				// 4. CLI 프롬프트 영역
+				// 4. CLI 프롬프트 및 후속 결과 라인 영역
 				React.createElement(
 					'div',
 					{ style: { ...NineExceptionStyles.footer, ...customStyles.footer } },
@@ -213,17 +228,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가 소스 코드를 재수정하는 동안 잠시만 기다려주세요...')
 					)
 				)
 			);