@mandujs/core 0.18.16 → 0.18.18

package/package.json

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

package/src/bundler/dev.ts

@@ -347,6 +347,8 @@ export interface HMRServer {
   broadcast: (message: HMRMessage) => void;
   /** 서버 중지 */
   close: () => void;
+  /** 재시작 핸들러 등록 */
+  setRestartHandler: (handler: () => Promise<void>) => void;
 }
 
 export interface HMRMessage {
@@ -368,10 +370,49 @@ export interface HMRMessage {
 export function createHMRServer(port: number): HMRServer {
   const clients = new Set<any>();
   const hmrPort = port + PORTS.HMR_OFFSET;
+  let restartHandler: (() => Promise<void>) | null = null;
+
+  const corsHeaders: Record<string, string> = {
+    "Access-Control-Allow-Origin": `http://localhost:${port}`,
+    "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
+    "Access-Control-Allow-Headers": "Content-Type",
+  };
 
   const server = Bun.serve({
     port: hmrPort,
-    fetch(req, server) {
+    async fetch(req, server) {
+      const url = new URL(req.url);
+
+      // CORS preflight
+      if (req.method === "OPTIONS") {
+        return new Response(null, { status: 204, headers: corsHeaders });
+      }
+
+      // POST /restart → 재시작 핸들러 호출
+      if (req.method === "POST" && url.pathname === "/restart") {
+        if (!restartHandler) {
+          return new Response(
+            JSON.stringify({ error: "No restart handler registered" }),
+            { status: 503, headers: { ...corsHeaders, "Content-Type": "application/json" } }
+          );
+        }
+        try {
+          console.log("🔄 Full restart requested from DevTools");
+          await restartHandler();
+          return new Response(
+            JSON.stringify({ status: "restarted" }),
+            { headers: { ...corsHeaders, "Content-Type": "application/json" } }
+          );
+        } catch (err) {
+          const message = err instanceof Error ? err.message : String(err);
+          console.error("❌ Restart failed:", message);
+          return new Response(
+            JSON.stringify({ error: message }),
+            { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
+          );
+        }
+      }
+
       // WebSocket 업그레이드
       if (server.upgrade(req)) {
         return;
@@ -385,7 +426,7 @@ export function createHMRServer(port: number): HMRServer {
           port: hmrPort,
         }),
         {
-          headers: { "Content-Type": "application/json" },
+          headers: { ...corsHeaders, "Content-Type": "application/json" },
         }
       );
     },
@@ -443,6 +484,9 @@ export function createHMRServer(port: number): HMRServer {
       clients.clear();
       server.stop();
     },
+    setRestartHandler: (handler: () => Promise<void>) => {
+      restartHandler = handler;
+    },
   };
 }
 
@@ -455,6 +499,7 @@ export function generateHMRClientScript(port: number): string {
 
   return `
 (function() {
+  window.__MANDU_HMR_PORT__ = ${hmrPort};
   const HMR_PORT = ${hmrPort};
   let ws = null;
   let reconnectAttempts = 0;

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

@@ -56,6 +56,37 @@ const baseStyles = `
     margin: 0;
   }
 
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
+  }
+
+  *:hover {
+    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
+  }
+
+  *::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  *::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.12);
+    border-radius: 3px;
+  }
+
+  *::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.25);
+  }
+
+  *::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
   .mk-badge-container {
     position: fixed;
     z-index: ${zIndex.devtools};
@@ -213,6 +244,47 @@ function KitchenApp({ config }: KitchenAppProps): React.ReactElement | null {
     getStateManager().clearGuardViolations();
   }, []);
 
+  const handleRestart = useCallback(async () => {
+    try {
+      // 1. Service Worker 해제
+      if ('serviceWorker' in navigator) {
+        const registrations = await navigator.serviceWorker.getRegistrations();
+        for (const reg of registrations) {
+          await reg.unregister();
+        }
+      }
+
+      // 2. Cache API 클리어
+      if ('caches' in window) {
+        const cacheNames = await caches.keys();
+        for (const name of cacheNames) {
+          await caches.delete(name);
+        }
+      }
+
+      // 3. window.__MANDU_* globals 삭제
+      for (const key of Object.keys(window)) {
+        if (key.startsWith('__MANDU_')) {
+          delete (window as any)[key];
+        }
+      }
+
+      // 4. HMR 서버에 POST /restart
+      const hmrPort = (window as any).__MANDU_HMR_PORT__;
+      if (hmrPort) {
+        await fetch(`http://localhost:${hmrPort}/restart`, { method: 'POST' });
+      }
+
+      // 5. 3초 fallback reload (서버가 reload 브로드캐스트를 못 보낸 경우)
+      setTimeout(() => {
+        location.reload();
+      }, 3000);
+    } catch (err) {
+      console.error('[Mandu Kitchen] Restart failed:', err);
+      location.reload();
+    }
+  }, []);
+
   // Calculate error count
   const errorCount = useMemo(() => {
     return state.errors.filter(
@@ -284,6 +356,7 @@ function KitchenApp({ config }: KitchenAppProps): React.ReactElement | null {
           activeTab={state.activeTab}
           onTabChange={handleTabChange}
           onClose={handlePanelClose}
+          onRestart={handleRestart}
           position={position}
         >
           {renderPanelContent()}

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

@@ -6,7 +6,7 @@
 import React from 'react';
 import type { ManduState } from '../../types';
 import { MANDU_CHARACTERS } from '../../types';
-import { colors, animation, testIds } from '../../design-tokens';
+import { colors, typography, animation, testIds } from '../../design-tokens';
 
 // ============================================================================
 // Styles
@@ -246,13 +246,16 @@ export function ManduBadge({
             : 'none',
   };
 
-  const emojiStyle: React.CSSProperties = {
-    fontFamily: "'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif",
-    color: colors.text.primary,
-    fontSize: '24px',
+  const textStyle: React.CSSProperties = {
+    fontFamily: typography.fontFamily.sans,
+    color: colors.brand.accent,
+    fontSize: '14px',
+    fontWeight: typography.fontWeight.bold,
     lineHeight: 1,
+    letterSpacing: '0.5px',
     transition: `transform 200ms ${animation.easing.spring}`,
     transform: isHovered ? 'rotate(-8deg)' : 'rotate(0deg)',
+    userSelect: 'none',
   };
 
   const countBubbleStyle: React.CSSProperties = {
@@ -290,7 +293,7 @@ export function ManduBadge({
       onBlur={() => { setIsHovered(false); setIsPressed(false); }}
       aria-label={`Mandu Kitchen: ${character.message}${count > 0 ? `, ${count} issues` : ''}`}
     >
-      <span aria-hidden="true" style={emojiStyle}>🥟</span>
+      <span aria-hidden="true" style={textStyle}>MK</span>
       {count > 0 && (
         <span style={countBubbleStyle}>
           {count > 99 ? '99+' : count}

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

@@ -25,6 +25,7 @@ export interface PanelContainerProps {
   activeTab: TabId;
   onTabChange: (tab: TabId) => void;
   onClose: () => void;
+  onRestart?: () => void;
   position: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
   children: React.ReactNode;
 }
@@ -78,6 +79,22 @@ const styles = {
   logo: {
     fontSize: typography.fontSize.lg,
   },
+  headerActions: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: spacing.xs,
+  },
+  restartButton: {
+    background: 'transparent',
+    border: 'none',
+    color: colors.text.secondary,
+    fontSize: typography.fontSize.md,
+    cursor: 'pointer',
+    padding: spacing.xs,
+    borderRadius: borderRadius.sm,
+    lineHeight: 1,
+    transition: `all ${animation.duration.fast}`,
+  },
   closeButton: {
     background: 'transparent',
     border: 'none',
@@ -161,6 +178,7 @@ export function PanelContainer({
   activeTab,
   onTabChange,
   onClose,
+  onRestart,
   position,
   children,
 }: PanelContainerProps): React.ReactElement {
@@ -168,6 +186,7 @@ export function PanelContainer({
   const [height, setHeight] = useState(400);
   const [hoveredTab, setHoveredTab] = useState<TabId | null>(null);
   const [isCloseHovered, setIsCloseHovered] = useState(false);
+  const [isRestartHovered, setIsRestartHovered] = useState(false);
 
   const getTabBadgeCount = useCallback((tabId: TabId): number => {
     switch (tabId) {
@@ -207,18 +226,39 @@ export function PanelContainer({
           <span style={styles.logo}>🥟</span>
           <span>Mandu Kitchen</span>
         </div>
-        <button
-          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="패널 닫기"
-        >
-          ×
-        </button>
+        <div style={styles.headerActions}>
+          {onRestart && (
+            <button
+              data-testid={testIds.restartButton}
+              style={{
+                ...styles.restartButton,
+                ...(isRestartHovered ? {
+                  color: colors.semantic.warning,
+                  backgroundColor: `${colors.semantic.warning}18`,
+                } : {}),
+              }}
+              onClick={onRestart}
+              onMouseEnter={() => setIsRestartHovered(true)}
+              onMouseLeave={() => setIsRestartHovered(false)}
+              aria-label="캐시 지우고 완전 재시작"
+              title="캐시 지우고 완전 재시작"
+            >
+              🔄
+            </button>
+          )}
+          <button
+            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="패널 닫기"
+          >
+            ×
+          </button>
+        </div>
       </div>
 
       {/* Tabs */}

package/src/devtools/design-tokens.ts

@@ -258,6 +258,7 @@ export const testIds = {
   tabGuard: 'mk-tab-guard',
   errorList: 'mk-error-list',
   mandu: 'mk-mandu',
+  restartButton: 'mk-restart-button',
 } as const;
 
 export type TestId = (typeof testIds)[keyof typeof testIds];

package/src/runtime/ssr.ts

@@ -316,6 +316,7 @@ function generateClientRouterScript(manifest: BundleManifest): string {
 function generateHMRScript(port: number): string {
   const hmrPort = port + PORTS.HMR_OFFSET;
   return `<script>
+window.__MANDU_HMR_PORT__ = ${hmrPort};
 (function() {
   var ws = null;
   var reconnectAttempts = 0;

package/src/runtime/streaming-ssr.ts

@@ -587,6 +587,7 @@ function generateDeferredDataScript(routeId: string, key: string, data: unknown)
 function generateHMRScript(port: number): string {
   const hmrPort = port + PORTS.HMR_OFFSET;
   return `<script>
+window.__MANDU_HMR_PORT__ = ${hmrPort};
 (function() {
   var ws = null;
   var reconnectAttempts = 0;