@nine-lab/nine-mu 0.1.327 → 0.1.329

package/package.json

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

package/public/css/nine-mu.css

@@ -248,169 +248,6 @@
 }
 
 
-:host(nx-ai-message) {
-	display: flex;
-	justify-content: flex-start;
-	padding: 5px;
-	flex-direction: column;
-
-	.chat-message {
-		max-width: 70%;
-		border-radius: 8px;
-		font-size: 14px;
-		background-color: #fff;
-		color: black;
-		align-self: flex-start;
-		text-align: left;
-		position: relative;
-		box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
-		text-overflow: ellipsis;
-		padding: 8px 16px;
-		display: flex;
-		align-items: center;
-
-		div.message {
-			display: contents;
-			-webkit-line-clamp: 3;
-			-webkit-box-orient: vertical;
-			overflow: hidden;
-			padding: 0;
-			flex-grow: 1;
-			/* 줄바꿈 강제 적용 */
-			/**word-wrap: break-word;*/ /* 긴 단어를 줄바꿈 */
-			overflow-wrap: anywhere; /* 텍스트 길이에 따라 자동 줄바꿈 */
-			white-space: normal; /* 공백 처리 */
-		}
-
-		span.more {
-			display: none;
-			right: 4px;
-			bottom: 0px;
-			font-size: 9px;
-			font-weight: 700;
-
-			a {
-				position: relative;
-				color: green;
-				text-decoration: none;
-			}
-
-			a::after {
-				content: "";
-				position: absolute;
-				left: 0;
-				bottom: -2px;
-				width: 100%;
-				height: 2px;
-				background-color: green;
-				transform: scaleX(0);
-				transition: transform 0.3s ease-in-out;
-			}
-
-			a:hover::after {
-				transform: scaleX(1);
-			}
-		}
-	}
-
-	.grid {
-		margin-top: 8px;
-	}
-
-	.chat-menu {
-		display: flex;
-		justify-content: space-between; /* 좌우 정렬 */
-		align-items: center; /* 세로 중앙 정렬 */
-		width: 100%;
-		margin-top: 2px;
-
-		.left-menu{
-			display: flex;
-			gap: 4px;
-
-			.filter.disabled, .database.disabled {
-				pointer-events: none;
-				color: #ccc;
-			}
-
-			.filter, .database, .excel, .maximize {
-				margin-left: 0;
-				cursor: pointer;
-				color: #999;
-				width: 16px;
-				height: 16px;
-				background-repeat: no-repeat;
-				background-position: center;
-				background-size: auto;
-			}
-
-			.filter svg {
-				color: #999;
-			}
-
-			.filter:hover, .database:hover, .excel:hover, .maximize:hover {
-				color: green;
-			}
-
-			.filter {
-				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gray" viewBox="0 0 16 16"><path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2z"/></svg>');
-			}
-			.database {
-				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gray" viewBox="0 0 16 16"><path d="M4.318 2.687C5.234 2.271 6.536 2 8 2s2.766.27 3.682.687C12.644 3.125 13 3.627 13 4c0 .374-.356.875-1.318 1.313C10.766 5.729 9.464 6 8 6s-2.766-.27-3.682-.687C3.356 4.875 3 4.373 3 4c0-.374.356-.875 1.318-1.313M13 5.698V7c0 .374-.356.875-1.318 1.313C10.766 8.729 9.464 9 8 9s-2.766-.27-3.682-.687C3.356 7.875 3 7.373 3 7V5.698c.271.202.58.378.904.525C4.978 6.711 6.427 7 8 7s3.022-.289 4.096-.777A5 5 0 0 0 13 5.698M14 4c0-1.007-.875-1.755-1.904-2.223C11.022 1.289 9.573 1 8 1s-3.022.289-4.096.777C2.875 2.245 2 2.993 2 4v9c0 1.007.875 1.755 1.904 2.223C4.978 15.71 6.427 16 8 16s3.022-.289 4.096-.777C13.125 14.755 14 14.007 14 13zm-1 4.698V10c0 .374-.356.875-1.318 1.313C10.766 11.729 9.464 12 8 12s-2.766-.27-3.682-.687C3.356 10.875 3 10.373 3 10V8.698c.271.202.58.378.904.525C4.978 9.71 6.427 10 8 10s3.022-.289 4.096-.777A5 5 0 0 0 13 8.698m0 3V13c0 .374-.356.875-1.318 1.313C10.766 14.729 9.464 15 8 15s-2.766-.27-3.682-.687C3.356 13.875 3 13.373 3 13v-1.302c.271.202.58.378.904.525C4.978 12.71 6.427 13 8 13s3.022-.289 4.096-.777c.324-.147.633-.323.904-.525"/></svg>');
-			}
-			.excel {
-				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gray" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M14 4.5V14a2 2 0 0 1-2 2h-1v-1h1a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5zM6.472 15.29a1.2 1.2 0 0 1-.111-.449h.765a.58.58 0 0 0 .254.384q.106.073.25.114.143.041.319.041.246 0 .413-.07a.56.56 0 0 0 .255-.193.5.5 0 0 0 .085-.29.39.39 0 0 0-.153-.326q-.152-.12-.462-.193l-.619-.143a1.7 1.7 0 0 1-.539-.214 1 1 0 0 1-.351-.367 1.1 1.1 0 0 1-.123-.524q0-.366.19-.639.19-.272.527-.422.338-.15.777-.149.457 0 .78.152.324.153.5.41.18.255.2.566h-.75a.56.56 0 0 0-.12-.258.6.6 0 0 0-.247-.181.9.9 0 0 0-.369-.068q-.325 0-.513.152a.47.47 0 0 0-.184.384q0 .18.143.3a1 1 0 0 0 .405.175l.62.143q.326.075.566.211a1 1 0 0 1 .375.358q.135.222.135.56 0 .37-.188.656a1.2 1.2 0 0 1-.539.439q-.351.158-.858.158-.381 0-.665-.09a1.4 1.4 0 0 1-.478-.252 1.1 1.1 0 0 1-.29-.375m-2.945-3.358h-.893L1.81 13.37h-.036l-.832-1.438h-.93l1.227 1.983L0 15.931h.861l.853-1.415h.035l.85 1.415h.908L2.253 13.94zm2.727 3.325H4.557v-3.325h-.79v4h2.487z"/></svg>');
-			}
-			.maximize {
-				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gray" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M5.828 10.172a.5.5 0 0 0-.707 0l-4.096 4.096V11.5a.5.5 0 0 0-1 0v3.975a.5.5 0 0 0 .5.5H4.5a.5.5 0 0 0 0-1H1.732l4.096-4.096a.5.5 0 0 0 0-.707m4.344 0a.5.5 0 0 1 .707 0l4.096 4.096V11.5a.5.5 0 1 1 1 0v3.975a.5.5 0 0 1-.5.5H11.5a.5.5 0 0 1 0-1h2.768l-4.096-4.096a.5.5 0 0 1 0-.707m0-4.344a.5.5 0 0 0 .707 0l4.096-4.096V4.5a.5.5 0 1 0 1 0V.525a.5.5 0 0 0-.5-.5H11.5a.5.5 0 0 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 0 .707m-4.344 0a.5.5 0 0 1-.707 0L1.025 1.732V4.5a.5.5 0 0 1-1 0V.525a.5.5 0 0 1 .5-.5H4.5a.5.5 0 0 1 0 1H1.732l4.096 4.096a.5.5 0 0 1 0 .707"/></svg>');
-			}
-		}
-	}
-}
-
-
-:host(nx-ai-ing-message) {
-	display: flex;
-	justify-content: flex-start;
-	padding: 0;
-
-	.chat-message {
-		padding: 0px 8px;
-		color: #999;
-		align-self: flex-start;
-		text-align: left;
-		position: relative;
-		font-size: 32px;
-		font-weight: bold;
-	}
-}
-
-
-:host(nx-ai-my-message) {
-	display: flex;
-	justify-content: flex-end;
-	padding: 5px;
-
-	.chat-message {
-		max-width: 70%;
-		padding: 8px 16px;
-		border-radius: 8px;
-		font-size: 14px;
-		background-color: #fef01b;
-		text-align: left;
-		color: #333;
-		align-self: flex-end;
-		position: relative;
-		box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
-	}
-}
-
-:host(nx-ai-chat) {
-	width: 100%;
-	height: 100%;
-	overflow: scroll;
-}
-
 
 
 
@@ -512,147 +349,6 @@
 	animation: slideRight 0.3s ease-out forwards;
 }
 
-:host(nine-ai-diff-popup) {
-
-	div.buttons {
-		position: absolute;
-		right: 16px;
-		/* width: 100px; */
-		display: flex;
-		flex-direction: row;
-		justify-content: flex-end;
-		z-index: 1;
-	}
-
-	button.save {
-		cursor: pointer;
-		outline: none;
-	}
-}
-
-:host(nine-ai-diff) {
-	width: 100%;
-	height: 100%;
-
-	.wrapper {
-		display: flex;
-		position: relative;
-		--gap: 8px;
-		--font-family: monospace;
-		height: 100%;
-	}
-	.panel {
-		width: 50%;
-		border: 1px solid #ccc;
-		--padding: 8px;
-		overflow: auto;
-		white-space: pre-wrap;
-		text-align: left;
-		display: flex;
-		justify-content: flex-start; /* 좌측 정렬 */
-		align-items: flex-start;     /* 상단 정렬 */
-		flex-direction: column;
-		box-sizing: border-box;
-	}
-	.panel pre {
-		margin: 0;
-		--padding: 8px;
-		text-align: left;
-		white-space: pre-wrap;
-		word-break: break-word;
-	}
-
-	.cm-editor {
-		height: 100%;
-		width: 100%;
-		--padding-left: 80px;
-	}
-	.cm-content { /* CodeMirror 텍스트 내용을 감싸는 내부 div */
-	}
-	/* 각 라인에 버튼 공간 확보 */
-
-	/* ideDiff.css */
-
-	/* 기본적인 CodeMirror 라인 포지셔닝 */
-	.cm-line {
-		position: relative;
-		--display: flex;
-		padding-left: 18px;
-	}
-
-	/* 병합 버튼 컨테이너 */
-	.cm-merge-button-container {
-		position: absolute;
-		height: 16px;
-		width: 16px; /* 버튼 너비 고정으로 겹침 방지 */
-		left: 2px; /* 라인 번호 영역 바로 옆에 배치. 필요에 따라 조절하세요. */
-		top: 50%;
-		transform: translateY(-50%);
-		--z-index: 1; /* 다른 요소 위에 표시되도록 Z-index를 높게 설정 */
-		display: flex;
-		--gap: 5px;
-		justify-content: center; /* 버튼 중앙 정렬 */
-	}
-
-	/* 병합 버튼 기본 스타일 */
-	.cm-merge-button {
-		--margin: 2px 0;
-		width: 100%;
-		border: none;
-		border-radius: 3px;
-		cursor: pointer;
-		opacity: 0.7; /* 기본적으로 약간 투명하게 */
-		transition: opacity 0.2s ease-in-out; /* 호버 시 부드러운 전환 */
-		background-repeat: no-repeat;
-		background-position: center;
-		background-size: auto;
-	}
-
-	/* 호버 시 버튼 불투명도 증가 */
-	.cm-merge-button:hover {
-		opacity: 1;
-		background-color: #e0e0e0;
-	}
-
-	/* AI 추천을 현재 소스에 '적용'하는 버튼 (오른쪽 TOBE 에디터에 붙음) */
-	.cm-merge-button.accept {
-		background-color: #4CAF50; /* 녹색 */
-		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-arrow-left-short" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5"/></svg>');
-	}
-
-	/* AI의 삭제를 현재 소스 기준으로 '되돌리는' 버튼 (왼쪽 ASIS 에디터에 붙음) */
-	.cm-merge-button.revert {
-		background-color: #f44336; /* 빨간색 */
-		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-x" viewBox="0 0 16 16"><path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/></svg>');
-	}
-
-	/* 삽입된 라인 (AI 추천 소스에 새로 추가된 라인) 배경색 및 경계선 */
-	.cm-inserted-line-bg {
-		background-color: #e6ffed; /* 연한 녹색 */
-		--border-left: 3px solid #66bb6a; /* 진한 녹색 */
-	}
-
-	/* 삭제된 라인 (현재 소스에서 AI가 삭제한 것으로 판단된 라인) 배경색 및 경계선 */
-	.cm-deleted-line-bg {
-		background-color: #ffebe9; /* 연한 빨간색 */
-		--border-left: 3px solid #ef5350; /* 진한 빨간색 */
-	}
-
-	/* CodeMirror 선택 영역 배경색 */
-	.cm-selectionBackground {
-		background-color: #d7d4f9 !important; /* 보라색 계열 */
-	}
-
-	/* 텍스트 선택 시 배경색 (브라우저 기본 선택색 재정의) */
-	.cm-editor ::selection {
-		background-color: #d7d4f9 !important;
-		color: inherit !important; /* 텍스트 색상은 유지 */
-	}
-	.cm-editor::-moz-selection { /* Firefox를 위한 접두사 */
-		background-color: #d7d4f9 !important;
-		color: inherit !important;
-	}
-}
 
 @keyframes slide {
 	0% { left: -40%; }
@@ -1084,6 +780,7 @@
 				font-weight: 700;
 
 				a {
+					display: none;
 					position: relative;
 					color: green;
 					text-decoration: none;

package/src/components/ChatMessage.js

@@ -68,8 +68,6 @@ class AiMessage extends HTMLElement
 					Object.fromEntries(this.#unique.map(key => [key, item[key]]))
 				);
 
-				console.log(keys);
-
 				this.dispatchEvent(new CustomEvent("database", { bubbles: true, detail: { key : keys } }));
 			});
 
@@ -368,7 +366,8 @@ class ChatMessageBody extends HTMLElement
 	};
 
 	#renderer = () => {
-		const customImport = this.getAttribute("css-path") ? `@import "${this.getAttribute("css-path")}";` : "";
+
+		const customImport = nine.cssPath ? `@import "${nine.cssPath}/ninePanel.css";` : "";
 
 		this.shadowRoot.innerHTML = `
             <style>

package/src/components/NineChat.js

@@ -72,7 +72,6 @@ export class NineChat extends HTMLElement {
             });
         });
 
-        this.shadowRoot.querySelector(".make-menu")?.addEventListener("click", this.#makeMenuHandler);
         this.shadowRoot.querySelector(".source-gen")?.addEventListener("click", this.#sourceGenHandler);
     }
 
@@ -112,49 +111,15 @@ export class NineChat extends HTMLElement {
                 } else {
                     trace.log(result);
 
-                    try {
-                        // 💡 [핵심] MCP 규격의 content[0].text에서 스트링을 추출합니다.
-                        const rawText = result?.content?.[0]?.text;
-                        //trace.log(rawText);
-                        // 텍스트를 JSON 객체로 파싱
-                        const parsed = JSON.parse(rawText);
+                    // 💡 [핵심] MCP 규격의 content[0].text에서 스트링을 추출합니다.
+                    const rawText = result?.content?.[0]?.text;
+                    //trace.log(rawText);
+                    // 텍스트를 JSON 객체로 파싱
+                    const parsed = JSON.parse(rawText);
 
+                    if (parsed.message) {
                         this.#manager.addChatHistory(parsed.message);
                         this.#$nineChatMessage.add("ai", parsed.message);
-
-                        //trace.log(parsed.action);
-                        //"source-missing"
-                        //trace.log(parsed.data);
-
-
-                        const asis = await this.#manager.getRoutes();
-
-                        /**
-                        if (parsed?.selected_tool === "generate-menu") {
-                            const hasCreated = parsed?.data.some(item => item.action === 'CREATE');
-                            const hasUpdated = parsed?.data.some(item => item.action === 'UPDATE');
-                            const hasDeleted = parsed?.data.some(item => item.action === 'DELETE');
-
-                            if (hasUpdated || hasCreated || hasDeleted) {
-                                // 진짜 메뉴명 변경이나 이동만 요청한 경우
-                                nine.alert("메뉴 정리를 위한 라우터 정보 저장 화면으로 이동합니다.").then(res => {
-                                    const tobe = (parsed?.data || [])
-                                        .filter(item => item.action !== 'DELETE')
-                                        .map(({ isNew, action, ...rest }) => rest);
-
-                                    this.#showDiff(asis, tobe, "json");
-                                });
-                            }
-                        } */
-
-                        // 💡 만약 intent가 EXECUTE_TOOL이거나 NAVIGATE일 때 프론트에서
-                        // 화면 이동(Routing)이나 추가 액션을 해야 한다면 여기서 parsedData.target_path 등을 활용하면 됩니다!
-
-                    } catch (err) {
-                        trace.error(err);
-                        // 만약 AI가 JSON 형식이 아닌 일반 텍스트로 답장했을 경우를 대비한 예외 처리
-                        const fallbackMessage = result?.content?.[0]?.text || "응답 데이터를 해석하지 못했습니다.";
-                        this.#$nineChatMessage.add("ai", fallbackMessage);
                     }
                 }
             }
@@ -213,55 +178,11 @@ export class NineChat extends HTMLElement {
         this.#$nineChatMessage.add(who, message);
     }
 
-    #makeMenuHandler = async e => {
-
-        const prompt = await nine.prompt("메뉴생성시 필요한 AI 프롬프트를 입력하세요.").rgb();
-        if (prompt === null || prompt === undefined) return;
-
-        const res = await api.post(`/nine-mu/source/readFile`, { path: this.#routesPath });
-        trace.log(res);
-
-        if (!res || !res?.contents) return;
-
-        const jsonRoutes = res?.contents ? JSON.parse(res?.contents) : {};
-        trace.log(jsonRoutes);
-
-        // 1. 미생성 소스 분석 요청
-        const res2 = await api.post(`${this.#connectorUrl}/api/source/missing`, {
-            routes : jsonRoutes,
-            prompt : prompt
-        });
-        //trace.log("분석 완료. 생성할 태스크:", res2?.tasks);
-
-        if (res2.success && res2?.tasks) {
-            this.#showDiff(jsonRoutes, res2?.tasks, "json");
-        }
-    }
-
     #sourceGenHandler = async e => {
         const routes = await this.#manager.getRoutes();
         const response = await this.#manager.analyzeUnmappedRoutes(routes);
         trace.log(response);
     }
-
-    #showDiff = (asis, tobe, lang) => {
-        // 1. 혹시 잔상이 남아있을지 모르니 기존에 생성된 팝업이 있다면 강제 제거
-        const oldPopup = this.shadowRoot.querySelector('nine-menu-diff-popup');
-        if (oldPopup) {
-            oldPopup.remove();
-        }
-
-        // 2. 동적으로 커스텀 엘리먼트 생성
-        const $diffPopup = document.createElement('nine-menu-diff-popup');
-
-        // 3. 래퍼(wrapper) 안이나 shadowRoot 제일 밑바닥에 부착
-        const container = this.shadowRoot.querySelector('.wrapper') || this.shadowRoot;
-        container.appendChild($diffPopup);
-
-        // 4. 데이터 주입 및 팝업 실행
-        // 💡 팝업이 네이티브 <dialog> 기반이라면 .popup() 내부에서 showModal()이 실행될 겁니다.
-        $diffPopup.popup().data(asis, tobe, lang);
-    }
 }
 
 if (!customElements.get('nine-chat')) {

package/src/components/NotificationHandler.js

@@ -33,33 +33,12 @@ export class NotificationHandler {
             this.#owner.addMessage("ing", "");
         }
 
-        // 2. 🚨 [나중에 100시간짜리 완벽을 채울 핵심 길목]
-        // 데이터에 소스코드 알맹이(data.source)나 메타데이터가 실려 내려왔을 때의 행위를 여기서 격리 처리합니다.
-
-        /**
-        switch (logger) {
-            case "generate-source-brain":
-                this.#generateSource(data);
-                break;
-
-            case "modify-source-brain":
-                this.#collectModifySource(data);
-                break;
-
-            case "modify-source-brain-completed":
-                this.#openDiffPopup();
-                break;
-        } */
-
-        // 자바의 -> 처럼 자바스크립트의 => (화살표 함수)를 활용한 매핑
-        const runAction = {
-            "generate-menu-completed":         () => this.#generateMenu(data),
-            "generate-source-brain":         () => this.#generateSource(data),
-            "modify-source-brain":           () => this.#collectModifySource(data),
-            "modify-source-brain-completed": () => this.#openDiffPopup(),
-        }[logger];
-
-        runAction?.();
+        ({
+            "generate-menu-completed":          () => this.#generateMenu(data),
+            "generate-source-brain":            () => this.#generateSource(data),
+            "modify-source-brain":              () => this.#collectModifySource(data),
+            "modify-source-brain-completed":    () => this.#openDiffPopup(),
+        }[logger])?.();
     }
 
     /**