@mandujs/core 0.9.40 → 0.9.42

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

@@ -0,0 +1,292 @@
+/**
+ * Mandu Kitchen DevTools - Network Panel
+ * @version 1.0.3
+ */
+
+import React, { useMemo, useState } from 'react';
+import type { NetworkRequest } from '../../../types';
+import { colors, typography, spacing, borderRadius, animation } from '../../../design-tokens';
+
+// ============================================================================
+// Styles
+// ============================================================================
+
+const styles = {
+  container: {
+    padding: spacing.md,
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column' as const,
+    gap: spacing.md,
+  },
+  header: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: spacing.md,
+  },
+  filterGroup: {
+    display: 'flex',
+    gap: spacing.xs,
+  },
+  filterButton: {
+    padding: `${spacing.xs} ${spacing.sm}`,
+    borderRadius: borderRadius.sm,
+    border: 'none',
+    backgroundColor: colors.background.light,
+    color: colors.text.secondary,
+    fontSize: typography.fontSize.xs,
+    cursor: 'pointer',
+    transition: `all ${animation.duration.fast}`,
+  },
+  filterButtonActive: {
+    backgroundColor: colors.brand.accent,
+    color: colors.background.dark,
+  },
+  stats: {
+    display: 'flex',
+    gap: spacing.md,
+    fontSize: typography.fontSize.xs,
+    color: colors.text.muted,
+  },
+  list: {
+    flex: 1,
+    overflow: 'auto',
+    display: 'flex',
+    flexDirection: 'column' as const,
+    gap: spacing.xs,
+  },
+  emptyState: {
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'column' as const,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: spacing.md,
+    padding: spacing.xl,
+    color: colors.text.muted,
+    fontSize: typography.fontSize.sm,
+    textAlign: 'center' as const,
+  },
+  requestItem: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: spacing.sm,
+    padding: spacing.sm,
+    borderRadius: borderRadius.md,
+    backgroundColor: colors.background.medium,
+    transition: `all ${animation.duration.fast}`,
+    cursor: 'pointer',
+  },
+  method: {
+    padding: `2px ${spacing.xs}`,
+    borderRadius: borderRadius.sm,
+    fontSize: typography.fontSize.xs,
+    fontWeight: typography.fontWeight.semibold,
+    fontFamily: typography.fontFamily.mono,
+    minWidth: '50px',
+    textAlign: 'center' as const,
+  },
+  url: {
+    flex: 1,
+    fontSize: typography.fontSize.sm,
+    color: colors.text.primary,
+    fontFamily: typography.fontFamily.mono,
+    whiteSpace: 'nowrap' as const,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
+  status: {
+    padding: `2px ${spacing.xs}`,
+    borderRadius: borderRadius.sm,
+    fontSize: typography.fontSize.xs,
+    fontWeight: typography.fontWeight.medium,
+    minWidth: '36px',
+    textAlign: 'center' as const,
+  },
+  timing: {
+    fontSize: typography.fontSize.xs,
+    color: colors.text.muted,
+    fontFamily: typography.fontFamily.mono,
+    minWidth: '50px',
+    textAlign: 'right' as const,
+  },
+  streamingBadge: {
+    padding: `2px ${spacing.xs}`,
+    borderRadius: borderRadius.sm,
+    backgroundColor: `${colors.semantic.info}20`,
+    color: colors.semantic.info,
+    fontSize: typography.fontSize.xs,
+    fontWeight: typography.fontWeight.medium,
+  },
+};
+
+const methodColors: Record<string, { bg: string; color: string }> = {
+  GET: { bg: `${colors.semantic.success}20`, color: colors.semantic.success },
+  POST: { bg: `${colors.semantic.info}20`, color: colors.semantic.info },
+  PUT: { bg: `${colors.semantic.warning}20`, color: colors.semantic.warning },
+  PATCH: { bg: `${colors.semantic.warning}20`, color: colors.semantic.warning },
+  DELETE: { bg: `${colors.semantic.error}20`, color: colors.semantic.error },
+};
+
+type FilterType = 'all' | 'fetch' | 'sse' | 'error';
+
+// ============================================================================
+// Props
+// ============================================================================
+
+export interface NetworkPanelProps {
+  requests: NetworkRequest[];
+}
+
+// ============================================================================
+// Component
+// ============================================================================
+
+export function NetworkPanel({ requests }: NetworkPanelProps): React.ReactElement {
+  const [filter, setFilter] = useState<FilterType>('all');
+
+  // Filter requests
+  const filteredRequests = useMemo(() => {
+    return requests.filter((req) => {
+      switch (filter) {
+        case 'fetch':
+          return !req.isStreaming;
+        case 'sse':
+          return req.isStreaming;
+        case 'error':
+          return req.status && req.status >= 400;
+        default:
+          return true;
+      }
+    });
+  }, [requests, filter]);
+
+  // Stats
+  const stats = useMemo(() => {
+    const total = requests.length;
+    const streaming = requests.filter((r) => r.isStreaming).length;
+    const errors = requests.filter((r) => r.status && r.status >= 400).length;
+    const totalTime = requests.reduce((sum, r) => {
+      if (r.startTime && r.endTime) {
+        return sum + (r.endTime - r.startTime);
+      }
+      return sum;
+    }, 0);
+
+    return { total, streaming, errors, totalTime };
+  }, [requests]);
+
+  const getStatusStyle = (status?: number): React.CSSProperties => {
+    if (!status) {
+      return { backgroundColor: colors.background.light, color: colors.text.muted };
+    }
+    if (status >= 500) {
+      return { backgroundColor: `${colors.semantic.error}20`, color: colors.semantic.error };
+    }
+    if (status >= 400) {
+      return { backgroundColor: `${colors.semantic.warning}20`, color: colors.semantic.warning };
+    }
+    if (status >= 300) {
+      return { backgroundColor: `${colors.semantic.info}20`, color: colors.semantic.info };
+    }
+    return { backgroundColor: `${colors.semantic.success}20`, color: colors.semantic.success };
+  };
+
+  const formatUrl = (url: string): string => {
+    try {
+      const parsed = new URL(url);
+      return parsed.pathname + parsed.search;
+    } catch {
+      return url;
+    }
+  };
+
+  const formatDuration = (start: number, end?: number): string => {
+    if (!end) return '...';
+    const duration = end - start;
+    if (duration < 1000) return `${duration.toFixed(0)}ms`;
+    return `${(duration / 1000).toFixed(1)}s`;
+  };
+
+  if (requests.length === 0) {
+    return (
+      <div style={styles.container}>
+        <div style={styles.emptyState}>
+          📡
+          <p>
+            아직 네트워크 요청이 없어요.<br />
+            API 호출이 발생하면 여기에 표시됩니다.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div style={styles.container}>
+      {/* Header */}
+      <div style={styles.header}>
+        <div style={styles.filterGroup}>
+          {(['all', 'fetch', 'sse', 'error'] as FilterType[]).map((f) => (
+            <button
+              key={f}
+              style={{
+                ...styles.filterButton,
+                ...(filter === f ? styles.filterButtonActive : {}),
+              }}
+              onClick={() => setFilter(f)}
+            >
+              {f === 'all' && `전체 (${stats.total})`}
+              {f === 'fetch' && 'Fetch'}
+              {f === 'sse' && `SSE (${stats.streaming})`}
+              {f === 'error' && `에러 (${stats.errors})`}
+            </button>
+          ))}
+        </div>
+        <div style={styles.stats}>
+          <span>총 시간: {(stats.totalTime / 1000).toFixed(1)}s</span>
+        </div>
+      </div>
+
+      {/* Request List */}
+      <div style={styles.list}>
+        {filteredRequests.map((request) => {
+          const methodStyle = methodColors[request.method] ?? methodColors.GET;
+
+          return (
+            <div key={request.id} style={styles.requestItem}>
+              <span
+                style={{
+                  ...styles.method,
+                  backgroundColor: methodStyle.bg,
+                  color: methodStyle.color,
+                }}
+              >
+                {request.method}
+              </span>
+
+              <span style={styles.url} title={request.url}>
+                {formatUrl(request.url)}
+              </span>
+
+              {request.isStreaming && (
+                <span style={styles.streamingBadge}>
+                  SSE {request.chunkCount && `(${request.chunkCount})`}
+                </span>
+              )}
+
+              <span style={{ ...styles.status, ...getStatusStyle(request.status) }}>
+                {request.status ?? '...'}
+              </span>
+
+              <span style={styles.timing}>
+                {formatDuration(request.startTime, request.endTime)}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,259 @@
+/**
+ * Mandu Kitchen DevTools - Panel Container
+ * @version 1.0.3
+ */
+
+import React, { useState, useCallback } from 'react';
+import { colors, typography, spacing, borderRadius, shadows, zIndex, animation, testIds } from '../../../design-tokens';
+import type { KitchenState } from '../../state-manager';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type TabId = 'errors' | 'islands' | 'network' | 'guard';
+
+export interface TabDefinition {
+  id: TabId;
+  label: string;
+  icon: string;
+  testId: string;
+}
+
+export interface PanelContainerProps {
+  state: KitchenState;
+  activeTab: TabId;
+  onTabChange: (tab: TabId) => void;
+  onClose: () => void;
+  position: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+  children: React.ReactNode;
+}
+
+// ============================================================================
+// Constants
+// ============================================================================
+
+export const TABS: TabDefinition[] = [
+  { id: 'errors', label: '에러', icon: '🔥', testId: testIds.tabErrors },
+  { id: 'islands', label: 'Islands', icon: '🏝️', testId: testIds.tabIslands },
+  { id: 'network', label: 'Network', icon: '📡', testId: testIds.tabNetwork },
+  { id: 'guard', label: 'Guard', icon: '🛡️', testId: testIds.tabGuard },
+];
+
+// ============================================================================
+// Styles
+// ============================================================================
+
+const styles = {
+  container: {
+    position: 'fixed' as const,
+    width: '420px',
+    maxHeight: '70vh',
+    backgroundColor: colors.background.dark,
+    borderRadius: borderRadius.lg,
+    boxShadow: shadows.xl,
+    display: 'flex',
+    flexDirection: 'column' as const,
+    overflow: 'hidden',
+    zIndex: zIndex.devtools,
+    fontFamily: typography.fontFamily.sans,
+    transition: `all ${animation.duration.normal} ${animation.easing.easeOut}`,
+  },
+  header: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: `${spacing.sm} ${spacing.md}`,
+    borderBottom: `1px solid ${colors.background.light}`,
+    backgroundColor: colors.background.medium,
+  },
+  title: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: spacing.sm,
+    fontSize: typography.fontSize.sm,
+    fontWeight: typography.fontWeight.semibold,
+    color: colors.text.primary,
+  },
+  logo: {
+    fontSize: typography.fontSize.lg,
+  },
+  closeButton: {
+    background: 'transparent',
+    border: 'none',
+    color: colors.text.secondary,
+    fontSize: typography.fontSize.lg,
+    cursor: 'pointer',
+    padding: spacing.xs,
+    borderRadius: borderRadius.sm,
+    lineHeight: 1,
+    transition: `color ${animation.duration.fast}`,
+  },
+  tabs: {
+    display: 'flex',
+    borderBottom: `1px solid ${colors.background.light}`,
+    backgroundColor: colors.background.dark,
+  },
+  tab: {
+    flex: 1,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: spacing.xs,
+    padding: `${spacing.sm} ${spacing.md}`,
+    background: 'transparent',
+    border: 'none',
+    borderBottom: '2px solid transparent',
+    color: colors.text.secondary,
+    fontSize: typography.fontSize.sm,
+    cursor: 'pointer',
+    transition: `all ${animation.duration.fast}`,
+  },
+  tabActive: {
+    color: colors.brand.accent,
+    borderBottomColor: colors.brand.accent,
+    backgroundColor: colors.background.medium,
+  },
+  tabIcon: {
+    fontSize: typography.fontSize.md,
+  },
+  tabBadge: {
+    minWidth: '18px',
+    height: '18px',
+    padding: '0 4px',
+    borderRadius: borderRadius.full,
+    backgroundColor: colors.semantic.error,
+    color: colors.text.primary,
+    fontSize: typography.fontSize.xs,
+    fontWeight: typography.fontWeight.semibold,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  content: {
+    flex: 1,
+    overflow: 'auto',
+    minHeight: '200px',
+    maxHeight: '50vh',
+  },
+  resizeHandle: {
+    position: 'absolute' as const,
+    width: '100%',
+    height: '4px',
+    cursor: 'ns-resize',
+    backgroundColor: 'transparent',
+  },
+};
+
+const positionStyles: Record<string, React.CSSProperties> = {
+  'bottom-right': { bottom: '80px', right: '16px' },
+  'bottom-left': { bottom: '80px', left: '16px' },
+  'top-right': { top: '16px', right: '16px' },
+  'top-left': { top: '16px', left: '16px' },
+};
+
+// ============================================================================
+// Component
+// ============================================================================
+
+export function PanelContainer({
+  state,
+  activeTab,
+  onTabChange,
+  onClose,
+  position,
+  children,
+}: PanelContainerProps): React.ReactElement {
+  const [isResizing, setIsResizing] = useState(false);
+  const [height, setHeight] = useState(400);
+
+  const getTabBadgeCount = useCallback((tabId: TabId): number => {
+    switch (tabId) {
+      case 'errors':
+        return state.errors.filter(e => e.severity === 'error' || e.severity === 'critical').length;
+      case 'islands':
+        return Array.from(state.islands.values()).filter(i => i.status === 'error').length;
+      case 'guard':
+        return state.guardViolations.length;
+      default:
+        return 0;
+    }
+  }, [state]);
+
+  const containerStyle: React.CSSProperties = {
+    ...styles.container,
+    ...positionStyles[position],
+    height: `${height}px`,
+  };
+
+  return (
+    <div
+      data-testid={testIds.panel}
+      style={containerStyle}
+    >
+      {/* Resize Handle (top) */}
+      {position.startsWith('bottom') && (
+        <div
+          style={{ ...styles.resizeHandle, top: 0 }}
+          onMouseDown={() => setIsResizing(true)}
+        />
+      )}
+
+      {/* Header */}
+      <div style={styles.header}>
+        <div style={styles.title}>
+          <span style={styles.logo}>🥟</span>
+          <span>Mandu Kitchen</span>
+        </div>
+        <button
+          style={styles.closeButton}
+          onClick={onClose}
+          aria-label="패널 닫기"
+        >
+          ×
+        </button>
+      </div>
+
+      {/* Tabs */}
+      <div style={styles.tabs} role="tablist">
+        {TABS.map((tab) => {
+          const isActive = activeTab === tab.id;
+          const badgeCount = getTabBadgeCount(tab.id);
+
+          return (
+            <button
+              key={tab.id}
+              data-testid={tab.testId}
+              role="tab"
+              aria-selected={isActive}
+              style={{
+                ...styles.tab,
+                ...(isActive ? styles.tabActive : {}),
+              }}
+              onClick={() => onTabChange(tab.id)}
+            >
+              <span style={styles.tabIcon}>{tab.icon}</span>
+              <span>{tab.label}</span>
+              {badgeCount > 0 && (
+                <span style={styles.tabBadge}>{badgeCount > 99 ? '99+' : badgeCount}</span>
+              )}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Content */}
+      <div style={styles.content} role="tabpanel">
+        {children}
+      </div>
+
+      {/* Resize Handle (bottom) */}
+      {position.startsWith('top') && (
+        <div
+          style={{ ...styles.resizeHandle, bottom: 0 }}
+          onMouseDown={() => setIsResizing(true)}
+        />
+      )}
+    </div>
+  );
+}