@nine-lab/nine-mu 0.1.351 → 0.1.353

package/package.json

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

package/src/components/exception/ExceptionHook.js

@@ -1,73 +1,68 @@
 import React from 'react';
 
 // ==========================================
-// 1. 터미널 프롬프트 테마 스타일 (블랙/화이트/그레이 기반)
+// 1. 터미널 프롬프트 테마 스타일 (줄간격 및 마진 정밀 교정)
 // ==========================================
 export const NineExceptionStyles = {
 	container: {
-		padding: '30px',
+		padding: '25px',
 		margin: '20px',
 		background: '#121314',              // 터미널 다크 블랙 배경
-		border: '1px solid #343A40',        // 소프트한 메탈릭 테두리
+		border: '1px solid #343A40',        // 외곽 메탈릭 테두리
 		borderRadius: '6px',
-		fontFamily: 'Consolas, Monaco, "Courier New", monospace', // 터미널 고정폭 글꼴 우선
+		fontFamily: 'Consolas, Monaco, "Courier New", monospace',
 		textAlign: 'left',
-		boxShadow: '0 4px 12px rgba(0,0,0,0.3)' // 터미널 윈도우 입체감
+		boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
+		lineHeight: '1.2'                   // ⭐ 줄간격을 터미널처럼 촘촘하게 제어
 	},
-	title: {
-		color: '#FFFFFF',                   // 화이트 타이틀
-		marginTop: 0,
-		fontSize: '16px',
-		fontWeight: '600',
-		display: 'flex',
-		alignItems: 'center',
-		gap: '8px',
-		borderBottom: '1px solid #2D3139',  // 상단 바 구분선 느낌
-		paddingBottom: '12px'
-	},
-	label: {
-		margin: '15px 0 8px 0',
+	systemError: {
+		color: '#E53E3E',                   // 터미널 레드 Warning
 		fontWeight: 'bold',
-		color: '#A0AEC0',                   // 프롬프트 서브 텍스트 (연한 그레이)
-		fontSize: '13px'
+		fontSize: '14px',
+		margin: '0 0 8px 0',                // 하단 마진 축소
+		letterSpacing: '0.5px'
 	},
 	pre: {
-		background: '#1A1C1E',              // 코드 블록 내부의 살짝 더 깊은 블랙
-		color: '#F8F9FA',                   // 에러 로그 화이트 출력
-		padding: '15px',
-		borderRadius: '4px',
-		border: '1px solid #2A2D30',
+		background: 'transparent',
+		color: '#F8F9FA',
+		padding: '0',
+		margin: '0 0 12px 0',               // 하단 마진 축소하여 다음 라인과 밀착
+		border: 'none',
 		overflowX: 'auto',
 		whiteSpace: 'pre-wrap',
 		fontFamily: 'Consolas, Monaco, monospace',
-		fontSize: '13px',
-		lineHeight: '1.5'
+		fontSize: '14px'
 	},
 	footer: {
-		marginTop: '20px',
-		fontSize: '13px',
-		color: '#718096',
+		fontSize: '14px',
+		color: '#E2E8F0',
+		margin: '0',                        // 불필요한 공백 제거
 		display: 'flex',
 		flexDirection: 'column',
-		gap: '10px'
+		gap: '6px'
 	},
-	button: {
-		padding: '10px 16px',
-		background: '#E53E3E',              // 버튼의 고유 아이덴티티 유지 (레드)
-		color: '#FFFFFF',
+	promptRow: {
+		display: 'block',                   // 자연스러운 텍스트 흐름을 위해 block 처리
+		margin: '0'
+	},
+	// ⭐ y 글자에 직접 바인딩할 터미널 링크 스타일
+	cliLink: {
+		background: 'transparent',
+		color: '#38A169',                   // 터미널 그린
 		border: 'none',
-		borderRadius: '4px',
-		cursor: 'pointer',
+		padding: '0 2px',
+		fontFamily: 'Consolas, Monaco, monospace',
+		fontSize: '14px',
 		fontWeight: 'bold',
-		fontSize: '13px',
-		alignSelf: 'flex-start',
-		transition: 'background 0.2s',
-		fontFamily: 'sans-serif'             // 버튼 텍스트는 일반 폰트로 가독성 확보
+		cursor: 'pointer',
+		textDecoration: 'underline',
+		textUnderlineOffset: '2px',
+		display: 'inline'
 	}
 };
 
 // ==========================================
-// 2. 컴포넌트 본문 (기존 로직 유지)
+// 2. 컴포넌트 본문
 // ==========================================
 export class NineExceptionHook extends React.Component {
 
@@ -77,6 +72,7 @@ export class NineExceptionHook extends React.Component {
 		this.lastPath = window.location.pathname;
 		this.handleLocationChange = this.handleLocationChange.bind(this);
 		this.handleReport = this.handleReport.bind(this);
+		this.handleKeyDown = this.handleKeyDown.bind(this);
 	}
 
 	static getDerivedStateFromError(error) {
@@ -85,7 +81,6 @@ export class NineExceptionHook extends React.Component {
 
 	componentDidCatch(error, errorInfo) {
 		console.error("🚨 [Nine-Library] 본문 렌더링 에러 포착:", error);
-
 		if (this.props.onCatch) {
 			this.props.onCatch(error, errorInfo);
 		}
@@ -94,17 +89,28 @@ export class NineExceptionHook extends React.Component {
 	componentDidMount() {
 		window.addEventListener('popstate', this.handleLocationChange);
 		document.addEventListener('click', this.handleLocationChange, true);
+		window.addEventListener('keydown', this.handleKeyDown);
 	}
 
 	componentWillUnmount() {
 		window.removeEventListener('popstate', this.handleLocationChange);
 		document.removeEventListener('click', this.handleLocationChange, true);
+		window.removeEventListener('keydown', this.handleKeyDown);
+	}
+
+	handleKeyDown(e) {
+		if (this.state.hasError && this.state.reportStatus === 'idle') {
+			if (e.key === 'y' || e.key === 'Y') {
+				e.preventDefault();
+				this.handleReport();
+			}
+		}
 	}
 
 	handleLocationChange() {
 		setTimeout(() => {
 			if (this.state.hasError && this.lastPath !== window.location.pathname) {
-				console.log("[Nine-Library] 페이지 주소 변경 감지 -> 리액트 에러 상태 초기화");
+				console.log("[Nine-Library] 페이지 주소 변경 감지 -> 에러 상태 초기화");
 				this.lastPath = window.location.pathname;
 				this.setState({ hasError: false, error: null, reportStatus: 'idle' });
 			}
@@ -124,7 +130,7 @@ export class NineExceptionHook extends React.Component {
 				console.warn("[Nine-Library] window.triggerAutoRecovery 가 정의되지 않았습니다.");
 			}
 			this.setState({ reportStatus: 'success' });
-		}, 500);
+		}, 600);
 	}
 
 	render() {
@@ -136,66 +142,53 @@ export class NineExceptionHook extends React.Component {
 			const errorMessage = this.state.error?.message || String(this.state.error);
 			const customStyles = this.props.styles || {};
 
-			let buttonText = '🚀 관제탑에 에러 피드백 전송하기';
-			if (this.state.reportStatus === 'sending') buttonText = '⏳ 관제탑 연락 중...';
-			if (this.state.reportStatus === 'success') buttonText = '✅ 전송 완료! AI 분석 시작';
-
 			return React.createElement(
 				'div',
 				{
 					style: { ...NineExceptionStyles.container, ...customStyles.container, ...this.props.containerStyle }
 				},
 
-				/**
-				// 1. 상단 프롬프트 헤더 (시스템 상태 알림)
-				React.createElement(
-					'div',
-					{ style: { ...NineExceptionStyles.title, ...customStyles.title } },
-					React.createElement('span', { style: { color: '#38A169', marginRight: '5px' } }, 'nandoo@nine-mu:~$'),
-					'./system-check --status'
-				), */
-
-				// 2. 시스템 에러 감지 출력 로그
+				// 1. 에러 감지 로그
 				React.createElement(
 					'div',
-					{ style: { color: 'red', margin: '15px 0 5px 0', letterSpacing: '0.5px' } },
+					{ style: { ...NineExceptionStyles.systemError, ...customStyles.systemError } },
 					'[SYSTEM] COMPONENT RENDER ERROR DETECTED'
 				),
 
-				/**
-				// 3. 명령어 입력 시뮬레이션 ($ cat error.log)
-				React.createElement(
-					'p',
-					{ style: { ...NineExceptionStyles.label, ...customStyles.label } },
-					React.createElement('span', { style: { color: '#3182CE', marginRight: '6px' } }, 'nandoo@nine-mu:~$'),
-					'cat error.log'
-				), */
-
-				// 4. 에러 내용 본문 박스
+				// 2. 에러 내용 (하단 마진을 줄여 다음 줄과 간격을 맞춤)
 				React.createElement('pre', { style: { ...NineExceptionStyles.pre, ...customStyles.pre } }, errorMessage),
 
-				// 5. 하단 버튼 및 피드백 영역
+				// 3. CLI 프롬프트 및 링크 영역
 				React.createElement(
 					'div',
 					{ style: { ...NineExceptionStyles.footer, ...customStyles.footer } },
-					React.createElement(
-						'button',
-						{
-							style: {
-								...NineExceptionStyles.button,
-								...customStyles.button,
-								backgroundColor: this.state.reportStatus === 'success' ? '#38A169' : (this.state.reportStatus === 'sending' ? '#A0AEC0' : '#E53E3E'),
-								cursor: this.state.reportStatus === 'idle' ? 'pointer' : 'not-allowed'
+
+					this.state.reportStatus === 'idle' && React.createElement(
+						'div',
+						{ style: NineExceptionStyles.promptRow },
+						React.createElement('span', null, 'Send error log to Control Tower ('),
+						React.createElement(
+							'button',
+							{
+								style: { ...NineExceptionStyles.cliLink, ...customStyles.cliLink },
+								onClick: this.handleReport
 							},
-							disabled: this.state.reportStatus !== 'idle',
-							onClick: this.handleReport
-						},
-						buttonText
+							'y'
+						),
+						React.createElement('span', null, '/n)?')
+					),
+
+					this.state.reportStatus === 'sending' && React.createElement(
+						'div',
+						{ style: { color: '#ED8936' } },
+						'>> Connecting to Control Tower... Sending payload.'
 					),
+
 					this.state.reportStatus === 'success' && React.createElement(
 						'div',
-						{ style: { color: '#CBD5E0', fontSize: '13px', marginTop: '5px', fontStyle: 'italic' } },
-						'>> AI가 소스 코드를 재수정하는 동안 잠시만 기다려주세요...'
+						{ style: { display: 'flex', flexDirection: 'column', gap: '4px' } },
+						React.createElement('div', { style: { color: '#38A169', fontWeight: 'bold' } }, '>> Transmit complete. Core engine initialized.'),
+						React.createElement('div', { style: { color: '#A0AEC0', fontStyle: 'italic', fontSize: '13px' } }, 'AI가 소스 코드를 재수정하는 동안 잠시만 기다려주세요...')
 					)
 				)
 			);