@nine-lab/nine-mu 0.1.333 → 0.1.335

package/package.json

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

package/public/css/nine-mu.css

@@ -940,4 +940,92 @@
 			/* JS로 내용이 채워지므로 별도의 CSS 애니메이션은 필요 없음 */
 		}
 	}
+}
+
+:host(nine-exception-hook) {
+	display: block;
+	width: 100%;
+	height: 100%;
+	color: inherit;
+	font-size: inherit;
+	line-height: inherit;
+
+	/* 내부 모든 엘리먼트의 여백 계산법을 어드민 기본형에 동기화 */
+	.nine-error-container *,
+	.nine-error-container *::before,
+	.nine-error-container *::after {
+		box-sizing: border-box;
+	}
+
+	.nine-error-container {
+		padding: 30px;
+		margin: 20px;
+		background-color: #FFF5F5;
+		border: 1px solid #FEB2B2;
+		border-radius: 8px;
+		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+	}
+
+	.nine-error-title {
+		color: #C53030;
+		margin-top: 0;
+		font-size: 18px;
+		font-weight: bold;
+	}
+
+	.nine-error-label {
+		margin: 10px 0 5px 0;
+		font-weight: bold;
+		color: #4A5568;
+	}
+
+	.nine-error-log {
+		background-color: #1A202C;
+		color: #EDF2F7;
+		padding: 15px;
+		border-radius: 6px;
+		overflow-x: auto;
+		white-space: pre-wrap;
+		font-family: 'Courier New', Courier, monospace;
+		font-size: 14px;
+	}
+
+	/* 💡 버튼 커스텀 디자인 세트 */
+	.nine-ai-btn {
+		background-color: #3182CE;
+		color: white;
+		padding: 10px 20px;
+		font-size: 14px;
+		font-weight: bold;
+		border: none;
+		border-radius: 6px;
+		cursor: pointer;
+		transition: background-color 0.2s ease;
+		white-space: nowrap;
+	}
+
+	.nine-ai-btn:hover {
+		background-color: #2B6CB0;
+	}
+
+	.nine-ai-btn:disabled {
+		background-color: #A0AEC0;
+		cursor: not-allowed;
+	}
+
+	.nine-ai-btn.loading {
+		background-color: #4A5568;
+		animation: pulse 1.5s infinite ease-in-out;
+	}
+
+	.nine-error-footer {
+		font-size: 14px;
+		color: #718096;
+	}
+}
+
+@keyframes pulse {
+	0% { opacity: 0.6; }
+	50% { opacity: 1; }
+	100% { opacity: 0.6; }
 }

package/src/components/ChatMessage.js

@@ -367,7 +367,7 @@ class ChatMessageBody extends HTMLElement
 
 	#renderer = () => {
 
-		const customImport = nine.cssPath ? `@import "${nine.cssPath}/ninePanel.css";` : "";
+		const customImport = nine.cssPath ? `@import "${nine.cssPath}/nine-mu.css";` : "";
 
 		this.shadowRoot.innerHTML = `
             <style>

package/src/components/NineChat.js

@@ -131,7 +131,8 @@ export class NineChat extends HTMLElement {
 
     #render() {
         const placeholder = this.getAttribute("placeholder") || "나에게 무엇이든 물어봐...";
-        const customImport = this.getAttribute("css-path") ? `@import "${this.getAttribute("css-path")}";` : "";
+
+        const customImport = nine.cssPath ? `@import "${nine.cssPath}/nine-mu.css";` : "";
 
         this.shadowRoot.innerHTML = `
             <style>

package/src/components/NineDiff.js

@@ -196,7 +196,7 @@ export class NineDiff extends HTMLElement {
 
 	connectedCallback() {
 
-		const customImport = this.getAttribute("css-path") ? `@import "${this.getAttribute("css-path")}";` : "";
+		const customImport = nine.cssPath ? `@import "${nine.cssPath}/nine-mu.css";` : "";
 
 		this.shadowRoot.innerHTML = `
            	<style>

package/src/components/NineNatualQueryInput.js

@@ -161,7 +161,7 @@ export class NineChat extends HTMLElement {
 
     #render() {
         const placeholder = this.getAttribute("placeholder") || "나에게 무엇이든 물어봐...";
-        const customImport = this.getAttribute("css-path") ? `@import "${this.getAttribute("css-path")}";` : "";
+        const customImport = nine.cssPath ? `@import "${nine.cssPath}/nine-mu.css";` : "";
 
         this.shadowRoot.innerHTML = `
             <style>

package/src/components/exception/ExceptionHook.js

@@ -1,94 +1,155 @@
+// src/components/exception/ExceptionHook.js
 export class ExceptionHook extends HTMLElement {
+	// 💡 [핵심] 비공개 인스턴스 필드는 클래스 최상단에 먼저 선언해야 합니다.
+	#lastPath = window.location.pathname;
+	#hasError = false;
+	#cssPath = "/css/nine-exception-hook.css";
+
 	constructor() {
 		super();
-		this.lastPath = window.location.pathname;
-		this.hasError = false;
-
-		// 💡 깔끔하게 명칭을 싱크한 외부 CSS 경로
-		this.cssPath = "/css/nine-exception-hook.css";
+		// Shadow DOM(open 모드) 활성화
+		this.attachShadow({ mode: 'open' });
 	}
 
 	connectedCallback() {
-		this.injectStylesheet();
+		// 기본 스켈레톤 마크업 렌더링
+		this.#renderer();
 
-		// 런타임 에러 및 비동기 거부(Promise Rejection)에 갈고리(Hook)를 겁니다.
-		window.addEventListener('error', this.handleRuntimeError.bind(this), true);
-		window.addEventListener('unhandledrejection', this.handlePromiseError.bind(this), true);
-		window.addEventListener('popstate', this.handleLocationChange.bind(this));
-		document.addEventListener('click', this.handleLocationChange.bind(this), true);
+		// 정적 외부 스타일시트 링크 안전하게 결합
+		this.#injectShadowStylesheet();
+
+		window.addEventListener('error', this.#handleRuntimeError, true);
+		window.addEventListener('unhandledrejection', this.#handlePromiseError, true);
+		window.addEventListener('popstate', this.#handleLocationChange);
+		document.addEventListener('click', this.#handleLocationChange, true);
 	}
 
 	disconnectedCallback() {
-		window.removeEventListener('error', this.handleRuntimeError);
-		window.removeEventListener('unhandledrejection', this.handlePromiseError);
-		window.removeEventListener('popstate', this.handleLocationChange);
-		document.removeEventListener('click', this.handleLocationChange, true);
+		window.removeEventListener('error', this.#handleRuntimeError, true);
+		window.removeEventListener('unhandledrejection', this.#handlePromiseError, true);
+		window.removeEventListener('popstate', this.#handleLocationChange);
+		document.removeEventListener('click', this.#handleLocationChange, true);
+	}
+
+	#renderer = () => {
+		const customImport = nine.cssPath ? `@import "${nine.cssPath}/nine-mu.css";` : "";
+
+		this.shadowRoot.innerHTML = `
+            <style>
+                @import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${__APP_VERSION__}/dist/css/nine-mu.css";
+                ${customImport}
+            </style>
+            
+			<div class="nine-hook-core">
+				<slot></slot>
+			</div>
+			<div class="nine-exception-board"></div>
+		`;
 	}
 
-	injectStylesheet() {
-		if (document.querySelector(`link[href="${this.cssPath}"]`)) return;
+	#injectShadowStylesheet() {
+		// 💡 내부 필드 호출 시에도 모두 this.#형식으로 매핑합니다.
+		if (this.shadowRoot.querySelector(`link[href="${this.#cssPath}"]`)) return;
 
 		const link = document.createElement('link');
 		link.rel = 'stylesheet';
-		link.href = this.cssPath;
-		document.head.appendChild(link);
+		link.href = this.#cssPath;
+		this.shadowRoot.appendChild(link);
 	}
 
-	handleRuntimeError(event) {
+	#handleRuntimeError = (event) => {
+		if (this.#hasError) return;
+
 		if (this.contains(event.target) || event.error) {
-			this.renderError(event.error?.message || event.message);
+			this.#renderError(event.error?.message || event.message, event.error?.stack);
 		}
 	}
 
-	handlePromiseError(event) {
-		this.renderError(event.reason?.message || String(event.reason));
+	#handlePromiseError = (event) => {
+		if (this.#hasError) return;
+		this.#renderError(event.reason?.message || String(event.reason), event.reason?.stack);
 	}
 
-	handleLocationChange() {
+	#handleLocationChange = () => {
 		setTimeout(() => {
-			// 주소가 바뀌면 훅(Hook)을 일시적으로 풀고 화면을 부드럽게 복구
-			if (this.hasError && this.lastPath !== window.location.pathname) {
-				console.log("✨ [nine-exception-hook] 예외 해제 및 렌더링 정상 복구");
-				this.lastPath = window.location.pathname;
-				this.hasError = false;
+			if (this.#hasError && this.#lastPath !== window.location.pathname) {
+				console.log("✨ [nine-exception-hook] Shadow DOM 내부 예외 청소 및 정상 복구");
+				this.#lastPath = window.location.pathname;
+				this.#hasError = false;
 
-				const errorBox = this.querySelector('.nine-error-container');
-				if (errorBox) errorBox.remove();
+				const exceptionBoard = this.shadowRoot.querySelector('.nine-exception-board');
+				if (exceptionBoard) exceptionBoard.innerHTML = '';
 
-				Array.from(this.children).forEach(child => {
-					if (child.tagName !== 'LINK') child.style.display = '';
-				});
+				const coreContainer = this.shadowRoot.querySelector('.nine-hook-core');
+				if (coreContainer) coreContainer.style.display = '';
 			}
 		}, 10);
 	}
 
-	renderError(errorMessage) {
-		if (this.hasError) return;
-		this.hasError = true;
+	#sendToAiAction = async (errorMessage, errorStack) => {
+		const btn = this.shadowRoot.querySelector('.nine-ai-btn');
+		const footer = this.shadowRoot.querySelector('.nine-error-footer');
+		if (!btn) return;
+
+		btn.disabled = true;
+		btn.innerText = "⚡ AI 관제탑에 소스 분석 요청 중...";
+		btn.classList.add('loading');
+
+		try {
+			if (window.triggerAutoRecovery) {
+				await window.triggerAutoRecovery({
+					message: errorMessage,
+					stack: errorStack || "No stack trace available",
+					path: window.location.pathname
+				});
 
-		if (window.triggerAutoRecovery) {
-			window.triggerAutoRecovery(errorMessage);
+				footer.innerHTML = `✅ <b>AI 관제탑 접수 완료:</b> 분석을 바탕으로 소스 코드를 교정하고 있습니다. 잠시만 기다려주세요.`;
+				btn.innerText = "🚀 전송 완료";
+			} else {
+				throw new Error("window.triggerAutoRecovery 관제탑 엔진이 로드되지 않았습니다.");
+			}
+		} catch (err) {
+			console.error("❌ AI 전송 실패:", err);
+			btn.disabled = false;
+			btn.innerText = "❌ 재전송 시도";
+			footer.innerHTML = `<span style="color: #E53E3E;">⚠️ 전송 실패: ${err.message}</span>`;
 		}
+	}
+
+	#renderError(errorMessage, errorStack) {
+		if (this.#hasError) return;
+		this.#hasError = true;
+
+		const coreContainer = this.shadowRoot.querySelector('.nine-hook-core');
+		if (coreContainer) coreContainer.style.display = 'none';
 
-		Array.from(this.children).forEach(child => {
-			if (child.tagName !== 'LINK') child.style.display = 'none';
-		});
+		const exceptionBoard = this.shadowRoot.querySelector('.nine-exception-board');
+		if (!exceptionBoard) return;
 
 		const errorHTML = `
             <div class="nine-error-container">
                 <h3 class="nine-error-title">⚠️ 시스템 예외 감지 (${this.tagName.toLowerCase()})</h3>
                 <p class="nine-error-label">[에러 원인 로그]:</p>
                 <pre class="nine-error-log">${errorMessage}</pre>
-                <div class="nine-error-footer">
-                    🔄 에러 로그가 관제탑으로 자동 피드백되었습니다. AI가 소스 코드를 재수정하는 동안 잠시만 기다려주세요...
+                
+                <div class="nine-action-area" style="margin-top: 20px; display: flex; align-items: center; gap: 15px;">
+                    <button class="nine-ai-btn">🤖 AI에게 소스코드 수정 요청</button>
+                    <div class="nine-error-footer">
+                        버튼을 누르면 AI가 로그 및 컴포넌트 맵을 역추적하여 수정을 시작합니다.
+                    </div>
                 </div>
             </div>
         `;
-		this.insertAdjacentHTML('beforeend', errorHTML);
+
+		exceptionBoard.innerHTML = errorHTML;
+
+		const aiBtn = this.shadowRoot.querySelector('.nine-ai-btn');
+		if (aiBtn) {
+			aiBtn.addEventListener('click', () => this.#sendToAiAction(errorMessage, errorStack));
+		}
 	}
 }
 
-// 💡 전역 브라우저 템플릿 태그로 공식 등록
 if (!customElements.get('nine-exception-hook')) {
 	customElements.define('nine-exception-hook', ExceptionHook);
 }