@mandujs/core 0.18.13 → 0.18.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mandujs/core",
-  "version": "0.18.13",
+  "version": "0.18.15",
   "description": "Mandu Framework Core - Spec, Generator, Guard, Runtime",
   "type": "module",
   "main": "./src/index.ts",

package/src/devtools/client/components/kitchen-root.tsx

@@ -43,6 +43,19 @@ const baseStyles = `
     line-height: 1.5;
   }
 
+  button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-family: inherit;
+    color: inherit;
+    font-size: inherit;
+    -webkit-appearance: none;
+    appearance: none;
+    padding: 0;
+    margin: 0;
+  }
+
   .mk-badge-container {
     position: fixed;
     z-index: ${zIndex.devtools};

package/src/devtools/client/components/mandu-character.tsx

@@ -247,7 +247,10 @@ export function ManduBadge({
       onBlur={() => setIsHovered(false)}
       aria-label={`Mandu Kitchen: ${character.message}${count > 0 ? `, ${count} issues` : ''}`}
     >
-      <span aria-hidden="true">🥟</span>
+      <span
+        aria-hidden="true"
+        style={{ fontFamily: "'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif" }}
+      >🥟</span>
       {count > 0 && <span style={countStyle}>{count}</span>}
     </button>
   );

package/src/devtools/client/components/panel/panel-container.tsx

@@ -112,7 +112,7 @@ const styles = {
   tabActive: {
     color: colors.brand.accent,
     borderBottomColor: colors.brand.accent,
-    backgroundColor: colors.background.medium,
+    backgroundColor: 'rgba(232, 150, 122, 0.12)',
   },
   tabIcon: {
     fontSize: typography.fontSize.md,
@@ -166,6 +166,8 @@ export function PanelContainer({
 }: PanelContainerProps): React.ReactElement {
   const [isResizing, setIsResizing] = useState(false);
   const [height, setHeight] = useState(400);
+  const [hoveredTab, setHoveredTab] = useState<TabId | null>(null);
+  const [isCloseHovered, setIsCloseHovered] = useState(false);
 
   const getTabBadgeCount = useCallback((tabId: TabId): number => {
     switch (tabId) {
@@ -206,8 +208,13 @@ export function PanelContainer({
           <span>Mandu Kitchen</span>
         </div>
         <button
-          style={styles.closeButton}
+          style={{
+            ...styles.closeButton,
+            ...(isCloseHovered ? { color: colors.text.primary, backgroundColor: 'rgba(255, 255, 255, 0.08)' } : {}),
+          }}
           onClick={onClose}
+          onMouseEnter={() => setIsCloseHovered(true)}
+          onMouseLeave={() => setIsCloseHovered(false)}
           aria-label="패널 닫기"
         >
           ×
@@ -229,8 +236,14 @@ export function PanelContainer({
               style={{
                 ...styles.tab,
                 ...(isActive ? styles.tabActive : {}),
+                ...(!isActive && hoveredTab === tab.id ? {
+                  color: colors.text.primary,
+                  backgroundColor: 'rgba(255, 255, 255, 0.05)',
+                } : {}),
               }}
               onClick={() => onTabChange(tab.id)}
+              onMouseEnter={() => setHoveredTab(tab.id)}
+              onMouseLeave={() => setHoveredTab(null)}
             >
               <span style={styles.tabIcon}>{tab.icon}</span>
               <span>{tab.label}</span>

package/src/guard/negotiation.ts

@@ -37,6 +37,13 @@ export interface NegotiationRequest {
   /** 구현하려는 기능의 의도 */
   intent: string;
 
+  /**
+   * 영문 feature name slug (에이전트가 제공).
+   * 제공되면 extractFeatureName()을 건너뛰고 이 값을 그대로 사용.
+   * 예: "chat", "user-auth", "payment", "file-upload"
+   */
+  featureName?: string;
+
   /** 요구사항 목록 */
   requirements?: string[];
 
@@ -1010,24 +1017,26 @@ function toCamelCase(str: string): string {
     .replace(/^(.)/, (_, c) => c.toLowerCase());
 }
 
-// 한국어 도메인 키워드 → 영문 slug 매핑
-const KOREAN_DOMAIN_MAP: Record<string, string> = {
-  "채팅": "chat", "메시지": "message", "사용자": "user", "유저": "user",
-  "인증": "auth", "로그인": "login", "로그아웃": "logout", "회원가입": "signup",
-  "결제": "payment", "주문": "order", "상품": "product", "장바구니": "cart",
-  "알림": "notification", "푸시": "push",
-  "게시글": "post", "게시판": "board", "댓글": "comment", "좋아요": "like",
-  "검색": "search", "필터": "filter", "정렬": "sort",
-  "파일": "file", "업로드": "upload", "다운로드": "download", "이미지": "image",
-  "대시보드": "dashboard", "통계": "stats", "분석": "analytics",
-  "설정": "settings", "프로필": "profile", "계정": "account",
-  "팀": "team", "프로젝트": "project", "태스크": "task", "일정": "schedule",
-  "컴포넌트": "component", "레이아웃": "layout", "네비게이션": "navigation",
-  "실시간": "realtime", "스트리밍": "streaming", "웹소켓": "websocket",
-};
+/** 에이전트 제공 slug 정리: lowercase kebab-case, 빈 문자열이면 falsy */
+function sanitizeSlug(slug: string | undefined): string {
+  if (!slug) return "";
+  return slug
+    .trim()
+    .toLowerCase()
+    .replace(/\s+/g, "-")
+    .replace(/[^a-z0-9-]/g, "")
+    .replace(/-{2,}/g, "-")
+    .replace(/^-+|-+$/g, "");
+}
 
+/**
+ * intent에서 feature name 추출 (featureName 미제공 시 fallback)
+ *
+ * MCP 에이전트는 항상 featureName을 영문으로 제공하므로,
+ * 이 함수는 CLI/프로그래밍 직접 호출 시 fallback으로만 사용.
+ */
 function extractFeatureName(intent: string): string {
-  // 1. 영문 패턴 우선 시도 (가장 신뢰도 높음)
+  // 1. 영문 패턴 추출
   const englishPatterns = [
     /(?:add|implement|create|build)\s+(.+)/i,
     /(.+?)\s+(?:feature|system|module|service)/i,
@@ -1046,46 +1055,13 @@ function extractFeatureName(intent: string): string {
     }
   }
 
-  // 2. 한글 패턴 시도 → 매칭된 텍스트에서 도메인 키워드 추출
-  const koreanPatterns = [
-    /(?:추가|구현|만들|개발|작성|생성)(?:어|해|하)[줘요]?\s*[:\-]?\s*(.+)/,
-    /(.+?)\s*(?:기능|시스템|모듈|서비스|페이지|컴포넌트)\s*(?:추가|구현|만들|개발)?/,
-    /(.+?)\s*(?:을|를|의|에)\s/,
-  ];
-
-  for (const pattern of koreanPatterns) {
-    const match = intent.match(pattern);
-    if (match) {
-      const captured = match[1].trim();
-      // 캡처된 텍스트에서 도메인 키워드 매칭
-      const slug = koreanToSlug(captured);
-      if (slug) return slug;
-    }
-  }
-
-  // 3. intent 전체에서 도메인 키워드 직접 탐색
-  const slug = koreanToSlug(intent);
-  if (slug) return slug;
-
-  // 4. intent에서 영문 단어 추출 시도
+  // 2. intent 내 영문 단어 추출
   const englishWord = intent.match(/[a-z][a-z0-9-]{2,}/i)?.[0]?.toLowerCase();
   if (englishWord) return englishWord;
 
   return "feature";
 }
 
-function koreanToSlug(text: string): string {
-  const matches: string[] = [];
-  for (const [korean, english] of Object.entries(KOREAN_DOMAIN_MAP)) {
-    if (text.includes(korean)) {
-      matches.push(english);
-    }
-  }
-  if (matches.length === 0) return "";
-  // 여러 키워드 매칭 시 하이폰으로 연결 (최대 2개)
-  return matches.slice(0, 2).join("-");
-}
-
 /**
  * 프리셋에 따라 구조를 조정
  * FSD, Clean, Hexagonal 등 프리셋별 레이어 매핑 적용
@@ -1181,8 +1157,8 @@ export async function negotiate(
   // 1. 카테고리 감지
   const category = request.category || detectCategory(intent);
 
-  // 2. 기능 이름 추출
-  const featureName = extractFeatureName(intent);
+  // 2. 기능 이름: 에이전트 제공 값 우선, 없으면 자동 추출
+  const featureName = sanitizeSlug(request.featureName) || extractFeatureName(intent);
 
   // 3. 관련 결정 검색
   const categoryTags = CATEGORY_KEYWORDS[category] || [];