@nine-lab/nine-mu 0.1.346 → 0.1.348

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nine-lab/nine-mu",
-  "version": "0.1.346",
+  "version": "0.1.348",
   "description": "AI-Driven Full-Stack Code Fabrication Engine",
   "type": "module",
   "main": "./dist/nine-mu.umd.js",
@@ -25,6 +25,7 @@
     "@nine-lab/nine-nomenu": "*",
     "@nine-lab/nine-util": "^0.9.126",
     "@nine-lab/nine-ux": "^0.1.244",
+    "@vitejs/plugin-react": "^6.0.2",
     "terser": "^5.31.0",
     "vite": "^6.0.0"
   },

package/src/components/exception/ExceptionHook.js

@@ -1,30 +1,85 @@
-// src/components/exception/ExceptionHook.js
-import { nine } from '@nine-lab/nine-util';
-import { trace } from '@nopeer';
-// npm 라이브러리용 패키지의 핵심 소스 (예: src/components/ContentErrorBoundary.jsx)
 import React from 'react';
 
+// ==========================================
+// 1. 외부에서 수정 및 관리가 용이하도록 CSS 분리
+// ==========================================
+export const NineExceptionStyles = {
+	container: {
+		padding: '30px',
+		margin: '20px',
+		background: '#FFF5F5',
+		border: '1px solid #FEB2B2',
+		borderRadius: '8px',
+		fontFamily: 'sans-serif',
+		textAlign: 'left'
+	},
+	title: {
+		color: '#C53030',
+		marginTop: 0,
+		fontSize: '18px',
+		display: 'flex',
+		alignItems: 'center',
+		gap: '8px'
+	},
+	label: {
+		margin: '10px 0 5px 0',
+		fontWeight: 'bold',
+		color: '#4A5568'
+	},
+	pre: {
+		background: '#1A202C',
+		color: '#EDF2F7',
+		padding: '15px',
+		borderRadius: '6px',
+		overflowX: 'auto',
+		whiteSpace: 'pre-wrap',
+		fontFamily: 'monospace',
+		fontSize: '14px'
+	},
+	footer: {
+		marginTop: '15px',
+		fontSize: '14px',
+		color: '#718096',
+		display: 'flex',
+		flexDirection: 'column',
+		gap: '10px'
+	},
+	button: {
+		padding: '10px 16px',
+		background: '#E53E3E',
+		color: '#FFFFFF',
+		border: 'none',
+		borderRadius: '6px',
+		cursor: 'pointer',
+		fontWeight: 'bold',
+		fontSize: '14px',
+		alignSelf: 'flex-start',
+		transition: 'background 0.2s',
+	}
+};
+
+// ==========================================
+// 2. 컴포넌트 본문
+// ==========================================
 export class NineExceptionHook extends React.Component {
+
 	constructor(props) {
 		super(props);
-		this.state = { hasError: false, error: null };
+		// 관제탑 전송 상태 관리를 위해 정송 단계(idle, sending, success) 추가
+		this.state = { hasError: false, error: null, reportStatus: 'idle' };
 		this.lastPath = window.location.pathname;
 		this.handleLocationChange = this.handleLocationChange.bind(this);
+		this.handleReport = this.handleReport.bind(this);
 	}
 
 	static getDerivedStateFromError(error) {
-		return { hasError: true, error };
+		return { hasError: true, error, reportStatus: 'idle' };
 	}
 
 	componentDidCatch(error, errorInfo) {
 		console.error("🚨 [Nine-Library] 본문 렌더링 에러 포착:", error);
 
-		// 1. 외부 전역 복구 엔진(triggerAutoRecovery)이 있으면 호출
-		if (window.triggerAutoRecovery) {
-			window.triggerAutoRecovery(error.message || String(error));
-		}
-
-		// 2. 라이브러리 확장성: 컴포넌트 자체 Props로 콜백을 넘겨받았다면 실행
+		// 자동 복구 엔진 호출 제거 (버튼 클릭 시 처리로 이관)
 		if (this.props.onCatch) {
 			this.props.onCatch(error, errorInfo);
 		}
@@ -45,31 +100,78 @@ export class NineExceptionHook extends React.Component {
 			if (this.state.hasError && this.lastPath !== window.location.pathname) {
 				console.log("✨ [Nine-Library] 페이지 주소 변경 감지 -> 리액트 에러 상태 초기화");
 				this.lastPath = window.location.pathname;
-				this.setState({ hasError: false, error: null });
+				this.setState({ hasError: false, error: null, reportStatus: 'idle' });
 			}
 		}, 10);
 	}
 
+	// 🚀 버튼 클릭 시 실행될 관제탑 수동 신고 핸들러
+	handleReport() {
+		if (this.state.reportStatus !== 'idle') return;
+
+		this.setState({ reportStatus: 'sending' });
+		const errorMessage = this.state.error?.message || String(this.state.error);
+
+		setTimeout(() => {
+			if (window.triggerAutoRecovery) {
+				window.triggerAutoRecovery(errorMessage);
+			} else {
+				console.warn("⚠️ [Nine-Library] window.triggerAutoRecovery 가 정의되지 않았습니다.");
+			}
+			this.setState({ reportStatus: 'success' });
+		}, 500); // 사용자 경험(UX) 피드백용 0.5초 딜레이
+	}
+
 	render() {
 		if (this.state.hasError) {
-			// 라이브러리 커스텀 UI 제공 (외부에서 커스텀 fallback UI를 주입하지 않았다면 기본 템플릿 사용)
 			if (this.props.fallback) {
 				return this.props.fallback(this.state.error);
 			}
 
-			return (
-				<div style={{ padding: '30px', margin: '20px', background: '#FFF5F5', border: '1px solid #FEB2B2', borderRadius: '8px', fontFamily: 'sans-serif', textAlign: 'left', ...this.props.containerStyle }}>
-					<h3 style={{ color: '#C53030', marginTop: 0, fontSize: '18px' }}>⚠️ 컴포넌트 빌드/렌더링 에러 감지</h3>
-					<p style={{ margin: '10px 0 5px 0', fontWeight: 'bold', color: '#4A5568' }}>[에러 원인 로그]:</p>
-					<pre style={{ background: '#1A202C', color: '#EDF2F7', padding: '15px', borderRadius: '6px', overflowX: 'auto', whiteSpace: 'pre-wrap', fontFamily: 'monospace' }}>
-                        {this.state.error?.message || String(this.state.error)}
-                    </pre>
-					<div style={{ marginTop: '15px', fontSize: '14px', color: '#718096' }}>
-						🔄 에러 로그가 관제탑으로 자동 피드백되었습니다. AI가 소스 코드를 재수정하는 동안 잠시만 기다려주세요...
-					</div>
-				</div>
+			const errorMessage = this.state.error?.message || String(this.state.error);
+			const customStyles = this.props.styles || {}; // props로 스타일 통째로 덮어쓰기 지원
+
+			// 버튼 텍스트 상태 제어
+			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 }
+				},
+				React.createElement('h3', { style: { ...NineExceptionStyles.title, ...customStyles.title } }, '⚠️ 컴포넌트 빌드/렌더링 에러 감지'),
+				React.createElement('p', { style: { ...NineExceptionStyles.label, ...customStyles.label } }, '[에러 원인 로그]:'),
+				React.createElement('pre', { style: { ...NineExceptionStyles.pre, ...customStyles.pre } }, errorMessage),
+
+				// 하단 안내 영역 및 수동 전송 버튼
+				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'
+							},
+							disabled: this.state.reportStatus !== 'idle',
+							onClick: this.handleReport
+						},
+						buttonText
+					),
+					this.state.reportStatus === 'success' && React.createElement(
+						'div',
+						{ style: { color: '#4A5568', fontSize: '13px', marginTop: '5px' } },
+						'🔄 AI가 소스 코드를 재수정하는 동안 잠시만 기다려주세요...'
+					)
+				)
 			);
 		}
+
 		return this.props.children;
 	}
 }

package/src/index.js

@@ -4,7 +4,7 @@ import { NineDiff } from './components/NineDiff.js';
 import { NineDiffPopup } from './components/NineDiffPopup.js';
 import { NineMenuDiffPopup } from './components/NineMenuDiffPopup.js';
 import './components/ChatMessage.js';
-//import { NineExceptionHook } from './components/exception/ExceptionHook.js';
+import { NineExceptionHook } from './components/exception/ExceptionHook.js';
 
 /**
  * Nine-Mu 엔진 메인 클래스
@@ -20,4 +20,4 @@ export const NineMu = {
 
 // 기본 export 및 컴포넌트 export
 export default NineMu;
-export { NineChat, NineDiff, NineDiffPopup };
+export { NineChat, NineDiff, NineDiffPopup, NineExceptionHook };

package/vite.config.js

@@ -19,7 +19,7 @@ export default defineConfig({
       formats: ['es', 'umd']
     },
     rollupOptions: {
-      external: ['@nine-lab/nine-ai', '@nine-lab/nine-util', '@nine-lab/nine-ux'],
+      external: ['@nine-lab/nine-ai', '@nine-lab/nine-util', '@nine-lab/nine-ux', 'react', 'react-dom'],
       output: {
         globals: {
           '@nine-lab/nine-ai': 'NineAi',
@@ -31,5 +31,9 @@ export default defineConfig({
     minify: 'terser',
     sourcemap: true,
     emptyOutDir: true
+  },
+  esbuild: {
+    loader: 'jsx',
+    include: /src\/.*\.js$/, // src 폴더 내의 모든 .js 파일을 대상으로 지정
   }
 });