@mandujs/core 0.19.2 → 0.20.1

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

@@ -67,10 +67,20 @@ const styles = {
     transition: `all ${animation.duration.fast}`,
     fontSize: typography.fontSize.sm,
   },
-  changeIcon: {
-    flexShrink: 0,
-    fontSize: typography.fontSize.md,
-  },
+  changeIcon: {
+    flexShrink: 0,
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minWidth: '42px',
+    height: '24px',
+    padding: '0 8px',
+    borderRadius: borderRadius.full,
+    fontSize: typography.fontSize.xs,
+    fontWeight: typography.fontWeight.semibold,
+    fontFamily: typography.fontFamily.mono,
+    letterSpacing: '0.08em',
+  },
   changePath: {
     flex: 1,
     overflow: 'hidden',
@@ -87,11 +97,17 @@ const styles = {
   },
 };
 
-const typeIcons: Record<string, string> = {
-  add: '➕',
-  change: '✏️',
-  delete: '🗑️',
-};
+const typeIcons: Record<string, string> = {
+  add: 'ADD',
+  change: 'EDIT',
+  delete: 'DEL',
+};
+
+const typeStyles: Record<string, { bg: string; color: string }> = {
+  add: { bg: `${colors.semantic.success}20`, color: colors.semantic.success },
+  change: { bg: `${colors.semantic.info}20`, color: colors.semantic.info },
+  delete: { bg: `${colors.semantic.error}20`, color: colors.semantic.error },
+};
 
 // ============================================================================
 // Props
@@ -136,11 +152,10 @@ export function PreviewPanel({ recentChanges, onClearChanges }: PreviewPanelProp
   if (recentChanges.length === 0) {
     return (
       <div style={styles.container}>
-        <div style={styles.emptyState}>
-          📝
-          <p>파일을 수정하면 여기에 변경사항이 표시됩니다</p>
-        </div>
-      </div>
+        <div style={styles.emptyState}>
+          <p>파일을 수정하면 여기에 최근 변경사항이 표시됩니다.</p>
+        </div>
+      </div>
     );
   }
 
@@ -158,19 +173,28 @@ export function PreviewPanel({ recentChanges, onClearChanges }: PreviewPanelProp
       </div>
 
       <div style={styles.list}>
-        {recentChanges.map((change, i) => {
-          const isLoading = loadingDiff === change.filePath;
-          return (
-            <div
+        {recentChanges.map((change, i) => {
+          const isLoading = loadingDiff === change.filePath;
+          const changeStyle = typeStyles[change.type] ?? typeStyles.change;
+          return (
+            <div
               key={`${change.filePath}-${change.timestamp}-${i}`}
               style={{
                 ...styles.changeItem,
                 opacity: isLoading ? 0.5 : 1,
               }}
-              onClick={() => !isLoading && handleFileClick(change.filePath)}
-            >
-              <span style={styles.changeIcon}>{typeIcons[change.type] ?? '✏️'}</span>
-              <span style={styles.changePath}>{change.filePath}</span>
+              onClick={() => !isLoading && handleFileClick(change.filePath)}
+            >
+              <span
+                style={{
+                  ...styles.changeIcon,
+                  backgroundColor: changeStyle.bg,
+                  color: changeStyle.color,
+                }}
+              >
+                {typeIcons[change.type] ?? 'EDIT'}
+              </span>
+              <span style={styles.changePath}>{change.filePath}</span>
               <span style={styles.changeTime}>
                 {formatTime(change.timestamp)}
               </span>

package/src/devtools/init.ts

@@ -141,7 +141,7 @@ export function initManduKitchen(config: DevToolsConfig = {}): KitchenInstance {
 
     isInitialized = true;
 
-    console.log('[Mandu Kitchen] DevTools v1.1 initialized 🥟');
+    console.log('[Mandu Kitchen] DevTools v1.1 initialized');
 
     return createInstance();
   } catch (error) {

package/src/devtools/types.ts

@@ -308,38 +308,38 @@ export interface KitchenMetaLog {
 // Mandu Character Types
 // ============================================================================
 
-export type ManduState = 'normal' | 'warning' | 'error' | 'loading' | 'hmr';
-
-export interface ManduCharacterData {
-  state: ManduState;
-  emoji: string;
-  message: string;
-}
-
-export const MANDU_CHARACTERS: Record<ManduState, ManduCharacterData> = {
-  normal: {
-    state: 'normal',
-    emoji: '(◕‿◕)',
-    message: '모든 만두가 잘 익고 있어요~',
-  },
-  warning: {
-    state: 'warning',
-    emoji: '(◕_◕)',
-    message: '뭔가 이상해요...',
-  },
-  error: {
-    state: 'error',
-    emoji: '(ノಠ益ಠ)ノ彡┻━┻',
-    message: '만두가 타버렸어요!',
-  },
-  loading: {
-    state: 'loading',
-    emoji: '(◕‿◕)💨',
-    message: '만두 찌는 중...',
-  },
-  hmr: {
-    state: 'hmr',
-    emoji: '(◕‿◕)✨',
-    message: '레시피 업데이트됨!',
-  },
-};
+export type ManduState = 'normal' | 'warning' | 'error' | 'loading' | 'hmr';
+
+export interface ManduCharacterData {
+  state: ManduState;
+  mark: string;
+  message: string;
+}
+
+export const MANDU_CHARACTERS: Record<ManduState, ManduCharacterData> = {
+  normal: {
+    state: 'normal',
+    mark: 'OK',
+    message: '시스템이 안정적으로 동작 중입니다.',
+  },
+  warning: {
+    state: 'warning',
+    mark: 'WARN',
+    message: '확인이 필요한 항목이 있습니다.',
+  },
+  error: {
+    state: 'error',
+    mark: 'ERR',
+    message: '즉시 확인이 필요한 오류가 있습니다.',
+  },
+  loading: {
+    state: 'loading',
+    mark: 'SYNC',
+    message: '상태를 새로 불러오는 중입니다.',
+  },
+  hmr: {
+    state: 'hmr',
+    mark: 'HMR',
+    message: '코드 변경을 반영했습니다.',
+  },
+};

package/src/filling/filling.ts

@@ -68,7 +68,7 @@ export interface LoaderCacheOptions {
 }
 
 /** 렌더링 모드 */
-export type RenderMode = "dynamic" | "isr" | "swr";
+export type RenderMode = "dynamic" | "isr" | "swr" | "ppr";
 
 /** Loader 타임아웃 에러 */
 export class LoaderTimeoutError extends Error {
@@ -463,16 +463,16 @@ export class ManduFilling<TLoaderData = unknown> {
     return this;
   }
 
-  async handle(
-    request: Request,
-    params: Record<string, string> = {},
-    routeContext?: { routeId: string; pattern: string },
-    options?: ExecuteOptions & { deps?: FillingDeps }
-  ): Promise<Response> {
-    const deps = options?.deps ?? globalDeps.get();
-    const normalizedRequest = await applyMethodOverride(request);
-    const ctx = new ManduContext(normalizedRequest, params, deps);
-    const method = normalizedRequest.method.toUpperCase() as HttpMethod;
+  async handle(
+    request: Request,
+    params: Record<string, string> = {},
+    routeContext?: { routeId: string; pattern: string },
+    options?: ExecuteOptions & { deps?: FillingDeps }
+  ): Promise<Response> {
+    const deps = options?.deps ?? globalDeps.get();
+    const normalizedRequest = await applyMethodOverride(request);
+    const ctx = new ManduContext(normalizedRequest, params, deps);
+    const method = normalizedRequest.method.toUpperCase() as HttpMethod;
 
     // Action 디스패치: POST/PUT/PATCH/DELETE + 등록된 action이 있을 때
     if (this.config.actions.size > 0 && method !== "GET" && method !== "HEAD" && method !== "OPTIONS") {
@@ -501,7 +501,7 @@ export class ManduFilling<TLoaderData = unknown> {
       return composed(ctx);
     };
     return executeLifecycle(lifecycleWithDefaults, ctx, runHandler, options);
-  }
+  }
 
   /**
    * Action 디스패치 시도
@@ -659,60 +659,60 @@ export class ManduFilling<TLoaderData = unknown> {
   hasMethod(method: HttpMethod): boolean {
     return this.config.handlers.has(method);
   }
-}
-
-const OVERRIDABLE_METHODS = new Set<HttpMethod>(["GET", "POST", "PUT", "PATCH", "DELETE", "HEAD", "OPTIONS"]);
-
-async function applyMethodOverride(request: Request): Promise<Request> {
-  if (request.method.toUpperCase() !== "POST") {
-    return request;
-  }
-
-  const override = await detectMethodOverride(request);
-  if (!override || override === "POST") {
-    return request;
-  }
-
-  return new Request(request, { method: override });
-}
-
-async function detectMethodOverride(request: Request): Promise<HttpMethod | null> {
-  const headerOverride = normalizeOverrideMethod(request.headers.get("X-HTTP-Method-Override"));
-  if (headerOverride) return headerOverride;
-
-  const url = new URL(request.url);
-  const queryOverride = normalizeOverrideMethod(url.searchParams.get("_method"));
-  if (queryOverride) return queryOverride;
-
-  const contentType = request.headers.get("content-type") ?? "";
-  const cloned = request.clone();
-
-  try {
-    if (contentType.includes("application/json")) {
-      const body = await cloned.json() as { _method?: unknown };
-      return normalizeOverrideMethod(typeof body?._method === "string" ? body._method : null);
-    }
-
-    if (
-      contentType.includes("application/x-www-form-urlencoded") ||
-      contentType.includes("multipart/form-data")
-    ) {
-      const form = await cloned.formData();
-      const override = form.get("_method");
-      return normalizeOverrideMethod(typeof override === "string" ? override : null);
-    }
-  } catch {
-    return null;
-  }
-
-  return null;
-}
-
-function normalizeOverrideMethod(value: string | null): HttpMethod | null {
-  if (!value) return null;
-  const method = value.toUpperCase() as HttpMethod;
-  return OVERRIDABLE_METHODS.has(method) ? method : null;
-}
+}
+
+const OVERRIDABLE_METHODS = new Set<HttpMethod>(["GET", "POST", "PUT", "PATCH", "DELETE", "HEAD", "OPTIONS"]);
+
+async function applyMethodOverride(request: Request): Promise<Request> {
+  if (request.method.toUpperCase() !== "POST") {
+    return request;
+  }
+
+  const override = await detectMethodOverride(request);
+  if (!override || override === "POST") {
+    return request;
+  }
+
+  return new Request(request, { method: override });
+}
+
+async function detectMethodOverride(request: Request): Promise<HttpMethod | null> {
+  const headerOverride = normalizeOverrideMethod(request.headers.get("X-HTTP-Method-Override"));
+  if (headerOverride) return headerOverride;
+
+  const url = new URL(request.url);
+  const queryOverride = normalizeOverrideMethod(url.searchParams.get("_method"));
+  if (queryOverride) return queryOverride;
+
+  const contentType = request.headers.get("content-type") ?? "";
+  const cloned = request.clone();
+
+  try {
+    if (contentType.includes("application/json")) {
+      const body = await cloned.json() as { _method?: unknown };
+      return normalizeOverrideMethod(typeof body?._method === "string" ? body._method : null);
+    }
+
+    if (
+      contentType.includes("application/x-www-form-urlencoded") ||
+      contentType.includes("multipart/form-data")
+    ) {
+      const form = await cloned.formData();
+      const override = form.get("_method");
+      return normalizeOverrideMethod(typeof override === "string" ? override : null);
+    }
+  } catch {
+    return null;
+  }
+
+  return null;
+}
+
+function normalizeOverrideMethod(value: string | null): HttpMethod | null {
+  if (!value) return null;
+  const method = value.toUpperCase() as HttpMethod;
+  return OVERRIDABLE_METHODS.has(method) ? method : null;
+}
 
 /**
  * Mandu Filling factory functions

package/src/index.ts

@@ -22,6 +22,7 @@ export * from "./island";
 export * from "./intent";
 export * from "./devtools";
 export * from "./paths";
+export * from "./observability";
 export * from "./resource";
 export * from "./types";
 export * from "./kitchen";

package/src/kitchen/kitchen-handler.ts

@@ -7,6 +7,7 @@
 
 import type { RoutesManifest } from "../spec/schema";
 import type { GuardConfig } from "../guard/types";
+import { getGlobalCache, getCacheStoreStats } from "../runtime/cache";
 import { ActivitySSEBroadcaster } from "./stream/activity-sse";
 import { GuardAPI } from "./api/guard-api";
 import { handleRoutesRequest } from "./api/routes-api";
@@ -14,6 +15,8 @@ import { FileAPI } from "./api/file-api";
 import { GuardDecisionManager } from "./api/guard-decisions";
 import { ContractPlaygroundAPI } from "./api/contract-api";
 import { renderKitchenHTML } from "./kitchen-ui";
+import fs from "fs/promises";
+import path from "path";
 
 export const KITCHEN_PREFIX = "/__kitchen";
 
@@ -50,6 +53,30 @@ export function clearKitchenErrors(): void {
   storedErrors = [];
 }
 
+// ========== Request Ring Buffer ==========
+
+export interface RequestEntry {
+  id: string;
+  method: string;
+  path: string;
+  status: number;
+  duration: number;
+  timestamp: number;
+  cacheStatus?: string;
+}
+
+const MAX_REQUESTS = 100;
+const recentRequests: RequestEntry[] = [];
+
+export function recordRequest(entry: RequestEntry): void {
+  recentRequests.push(entry);
+  if (recentRequests.length > MAX_REQUESTS) recentRequests.shift();
+}
+
+export function getRecentRequests(): RequestEntry[] {
+  return [...recentRequests].reverse();
+}
+
 export class KitchenHandler {
   private sse: ActivitySSEBroadcaster;
   private guardAPI: GuardAPI;
@@ -67,8 +94,23 @@ export class KitchenHandler {
     this.contractAPI = new ContractPlaygroundAPI(options.manifest, options.rootDir);
   }
 
-  start(): void {
+  async start(): Promise<void> {
     this.sse.start();
+    await this.loadPersistedErrors();
+  }
+
+  /** Load errors persisted from previous sessions */
+  private async loadPersistedErrors(): Promise<void> {
+    const errorsPath = path.join(this.options.rootDir, ".mandu", "errors.jsonl");
+    try {
+      const content = await fs.readFile(errorsPath, "utf-8");
+      const lines = content.trim().split("\n").filter(Boolean);
+      for (const line of lines.slice(-MAX_STORED_ERRORS)) {
+        try {
+          storedErrors.push(JSON.parse(line));
+        } catch { /* skip malformed lines */ }
+      }
+    } catch { /* file doesn't exist yet — fine */ }
   }
 
   stop(): void {
@@ -180,6 +222,27 @@ export class KitchenHandler {
       return Response.json({ removed: true });
     }
 
+    // Requests API — recent HTTP request log
+    if (sub === "/api/requests" && req.method === "GET") {
+      return Response.json({ requests: getRecentRequests() });
+    }
+
+    // Activity API — recent MCP tool calls from activity.jsonl
+    if (sub === "/api/activity" && req.method === "GET") {
+      const events = await this.readRecentActivity();
+      return Response.json({ events });
+    }
+
+    // Cache API — cache store stats
+    if (sub === "/api/cache" && req.method === "GET") {
+      const store = getGlobalCache();
+      return Response.json({
+        enabled: !!store,
+        size: store?.size ?? 0,
+        stats: getCacheStoreStats(store),
+      });
+    }
+
     // Error API (Kitchen → MCP bridge)
     if (sub === "/api/errors" && req.method === "POST") {
       try {
@@ -193,6 +256,10 @@ export class KitchenHandler {
           if (storedErrors.length > MAX_STORED_ERRORS) {
             storedErrors.shift();
           }
+          // Persist to disk
+          const errorLine = JSON.stringify(error) + "\n";
+          const errorsPath = path.join(this.options.rootDir, ".mandu", "errors.jsonl");
+          fs.appendFile(errorsPath, errorLine).catch(() => {});
         }
         return Response.json({ received: errors.length, total: storedErrors.length });
       } catch {
@@ -253,4 +320,16 @@ export class KitchenHandler {
       { status: 404 },
     );
   }
+
+  /** Read last 50 entries from .mandu/activity.jsonl */
+  private async readRecentActivity(): Promise<unknown[]> {
+    const logPath = path.join(this.options.rootDir, ".mandu", "activity.jsonl");
+    try {
+      const content = await fs.readFile(logPath, "utf-8");
+      const lines = content.trim().split("\n").filter(Boolean);
+      return lines.slice(-50).reverse().map((line) => {
+        try { return JSON.parse(line); } catch { return null; }
+      }).filter(Boolean);
+    } catch { return []; }
+  }
 }

package/src/observability/event-bus.ts

@@ -0,0 +1,79 @@
+/** Mandu Unified EventBus -- foundation for the observability system. */
+
+export type EventType = "http" | "mcp" | "guard" | "build" | "error" | "cache" | "ws";
+export type ObservabilitySeverity = "info" | "warn" | "error";
+
+export interface ObservabilityEvent {
+  id: string;
+  correlationId?: string;
+  type: EventType;
+  severity: ObservabilitySeverity;
+  source: string;
+  timestamp: number;
+  message: string;
+  data?: Record<string, unknown>;
+  duration?: number;
+}
+
+export type EventHandler = (event: ObservabilityEvent) => void;
+
+class ManduEventBus {
+  private handlers = new Map<string, Set<EventHandler>>();
+  private recent: ObservabilityEvent[] = [];
+  private maxRecent = 200;
+
+  on(type: EventType | "*", handler: EventHandler): () => void {
+    let set = this.handlers.get(type);
+    if (!set) {
+      set = new Set();
+      this.handlers.set(type, set);
+    }
+    set.add(handler);
+    return () => { set!.delete(handler); };
+  }
+
+  emit(event: Omit<ObservabilityEvent, "id" | "timestamp">): void {
+    const full: ObservabilityEvent = {
+      ...event,
+      id: crypto.randomUUID(),
+      timestamp: Date.now(),
+    };
+    this.recent.push(full);
+    if (this.recent.length > this.maxRecent) {
+      this.recent = this.recent.slice(-this.maxRecent);
+    }
+    this.handlers.get(full.type)?.forEach((h) => h(full));
+    this.handlers.get("*")?.forEach((h) => h(full));
+  }
+
+  getRecent(
+    count?: number,
+    filter?: { type?: EventType; severity?: ObservabilitySeverity },
+  ): ObservabilityEvent[] {
+    let result = this.recent;
+    if (filter?.type) result = result.filter((e) => e.type === filter.type);
+    if (filter?.severity) result = result.filter((e) => e.severity === filter.severity);
+    return count ? result.slice(-count) : result;
+  }
+
+  getStats(windowMs?: number): Record<EventType, { count: number; errors: number; avgDuration: number }> {
+    const cutoff = windowMs ? Date.now() - windowMs : 0;
+    const ALL: EventType[] = ["http", "mcp", "guard", "build", "error", "cache", "ws"];
+    const stats = {} as Record<EventType, { count: number; errors: number; avgDuration: number }>;
+    const dur = {} as Record<EventType, number[]>;
+    for (const t of ALL) { stats[t] = { count: 0, errors: 0, avgDuration: 0 }; dur[t] = []; }
+    for (const e of this.recent) {
+      if (e.timestamp < cutoff) continue;
+      stats[e.type].count++;
+      if (e.severity === "error") stats[e.type].errors++;
+      if (e.duration !== undefined) dur[e.type].push(e.duration);
+    }
+    for (const t of ALL) {
+      const d = dur[t];
+      stats[t].avgDuration = d.length ? d.reduce((a, b) => a + b, 0) / d.length : 0;
+    }
+    return stats;
+  }
+}
+
+export const eventBus = new ManduEventBus();

package/src/observability/index.ts

@@ -0,0 +1,8 @@
+export {
+  eventBus,
+  type ObservabilityEvent,
+  type EventType,
+  type ObservabilitySeverity,
+  type EventHandler,
+} from "./event-bus";
+export { connectLoggerToEventBus } from "./logger-adapter";

package/src/observability/logger-adapter.ts

@@ -0,0 +1,36 @@
+/**
+ * Logger -> EventBus adapter
+ * Bridges the existing logger sink pattern into the unified observability bus.
+ */
+
+import { eventBus } from "./event-bus";
+import type { ObservabilitySeverity } from "./event-bus";
+import type { LogEntry, LogLevel } from "../runtime/logger";
+
+const LEVEL_MAP: Record<LogLevel, ObservabilitySeverity> = {
+  debug: "info",
+  info: "info",
+  warn: "warn",
+  error: "error",
+};
+
+export function connectLoggerToEventBus(loggerInstance: { sink?: (entry: LogEntry) => void } & Record<string, unknown>): void {
+  const originalSink = loggerInstance.sink as ((entry: LogEntry) => void) | undefined;
+  loggerInstance.sink = (entry: LogEntry) => {
+    originalSink?.(entry);
+    eventBus.emit({
+      type: "http",
+      severity: LEVEL_MAP[entry.level] ?? "info",
+      source: "logger",
+      message: `${entry.method} ${entry.path} ${entry.status ?? ""}`.trim(),
+      duration: entry.duration,
+      data: {
+        requestId: entry.requestId,
+        method: entry.method,
+        path: entry.path,
+        status: entry.status,
+        slow: entry.slow,
+      },
+    });
+  };
+}

package/src/runtime/index.ts

@@ -1,5 +1,6 @@
 export * from "./ssr";
 export * from "./streaming-ssr";
+export { extractShellHtml, createPPRResponse, PPR_SHELL_MARKER } from "./ppr";
 export * from "./router";
 export * from "./server";
 export * from "./cors";
@@ -10,14 +11,14 @@ export * from "./trace";
 export * from "./logger";
 export * from "./boundary";
 export * from "./stable-selector";
-export {
-  revalidatePath,
-  revalidateTag,
-  getCacheStoreStats,
-  type CacheStore,
-  type CacheStoreStats,
-  MemoryCacheStore,
-} from "./cache";
+export {
+  revalidatePath,
+  revalidateTag,
+  getCacheStoreStats,
+  type CacheStore,
+  type CacheStoreStats,
+  MemoryCacheStore,
+} from "./cache";
 export { type MiddlewareContext, type MiddlewareNext, type MiddlewareFn, type MiddlewareConfig } from "./middleware";
 export { type ManduAdapter, type AdapterOptions, type AdapterServer } from "./adapter";
 export { adapterBun } from "./adapter-bun";