@nine-lab/nine-mu 0.1.332 → 0.1.334

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nine-lab/nine-mu",
-  "version": "0.1.332",
+  "version": "0.1.334",
   "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,82 @@
 			/* JS로 내용이 채워지므로 별도의 CSS 애니메이션은 필요 없음 */
 		}
 	}
+}
+
+:host(nine-exception-hook) {
+	display: block;
+	width: 100%;
+	height: 100%;
+
+	.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

@@ -0,0 +1,160 @@
+// src/components/exception/ExceptionHook.js
+export class ExceptionHook extends HTMLElement {
+	constructor() {
+		super();
+		this.lastPath = window.location.pathname;
+		this.hasError = false;
+		this.cssPath = "/css/nine-exception-hook.css";
+
+		// 💡 1. Shadow DOM(open 모드) 활성화 및 슬롯 공간 준비
+		this.attachShadow({ mode: 'open' });
+
+		// 기본 구조 선언: 자식 엘리먼트들이 위치할 <slot>을 배치합니다.
+
+	}
+
+	connectedCallback() {
+
+		this.#renderer();
+
+		// Shadow DOM 내부에 캡슐화된 스타일시트 링크 주입
+		this.#injectShadowStylesheet();
+
+		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);
+	}
+
+	disconnectedCallback() {
+		window.removeEventListener('error', this.#handleRuntimeError);
+		window.removeEventListener('unhandledrejection', this.#handlePromiseError);
+		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>
+		`;
+	}
+
+	// 💡 2. Shadow Root 내부 전용 스타일 링크 주입 함수
+	#injectShadowStylesheet() {
+		if (this.shadowRoot.querySelector(`link[href="${this.cssPath}"]`)) return;
+
+		const link = document.createElement('link');
+		link.rel = 'stylesheet';
+		link.href = this.cssPath;
+		// head가 아닌 shadowRoot에 집어넣어 글로벌 오염을 완벽히 격리합니다.
+		this.shadowRoot.appendChild(link);
+	}
+
+	#handleRuntimeError(event) {
+		// Shadow DOM 외부의 자식 영역(Light DOM) 검증을 위해 여전히 this.contains 활용
+		if (this.contains(event.target) || event.error) {
+			this.#renderError(event.error?.message || event.message, event.error?.stack);
+		}
+	}
+
+
+	#handlePromiseError(event) {
+		this.#renderError(event.reason?.message || String(event.reason), event.reason?.stack);
+	}
+
+	#handleLocationChange() {
+		setTimeout(() => {
+			if (this.hasError && this.lastPath !== window.location.pathname) {
+				console.log("✨ [nine-exception-hook] Shadow DOM 내부 예외 청소 및 정상 복구");
+				this.lastPath = window.location.pathname;
+				this.hasError = false;
+
+				// 💡 3. 복구 시 Shadow Root 내부의 에러 컨테이너만 타겟팅해서 제거
+				const errorBox = this.shadowRoot.querySelector('.nine-error-container');
+				if (errorBox) errorBox.remove();
+
+				// 숨겨두었던 원래 본문 슬롯 구역을 다시 노출
+				const coreContainer = this.shadowRoot.querySelector('.nine-hook-core');
+				if (coreContainer) coreContainer.style.display = '';
+			}
+		}, 10);
+	}
+
+	async #sendToAiAction(errorMessage, errorStack) {
+		// 💡 4. DOM 쿼리 탐색을 모두 this가 아닌 this.shadowRoot로 전환
+		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
+				});
+
+				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;
+
+		// 💡 5. 리액트의 원본 마크업을 건드리지 않고, 슬롯이 감싸진 껍데기만 숨김 처리
+		const coreContainer = this.shadowRoot.querySelector('.nine-hook-core');
+		if (coreContainer) coreContainer.style.display = 'none';
+
+		// Shadow DOM 내부에 렌더링할 마크업 구조 설계
+		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-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>
+        `;
+
+		// shadowRoot 최하단에 안전하게 안착시킵니다.
+		this.shadowRoot.insertAdjacentHTML('beforeend', errorHTML);
+
+		// 버튼 이벤트 바인딩도 shadowRoot 기준 처리
+		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);
+}

package/src/index.js

@@ -4,6 +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 './components/exception/ExceptionHook.js';
 
 /**
  * Nine-Mu 엔진 메인 클래스