@mandujs/core 0.53.3 → 0.54.1

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

@@ -1,259 +1,259 @@
-/**
- * Mandu Kitchen DevTools - Errors Panel
- * @version 1.0.3
- */
-
-import React, { useCallback } from 'react';
-import type { NormalizedError } from '../../../types';
-import { colors, typography, spacing, borderRadius, animation, testIds } from '../../../design-tokens';
-import { ManduCharacter } from '../mandu-character';
-import { sanitizeErrorMessage } from '../../filters';
-
-// ============================================================================
-// 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',
-  },
-  clearButton: {
-    padding: `${spacing.xs} ${spacing.sm}`,
-    borderRadius: borderRadius.sm,
-    backgroundColor: colors.background.light,
-    border: 'none',
-    color: colors.text.secondary,
-    fontSize: typography.fontSize.xs,
-    cursor: 'pointer',
-    transition: `all ${animation.duration.fast}`,
-  },
-  list: {
-    flex: 1,
-    overflow: 'auto',
-    display: 'flex',
-    flexDirection: 'column' as const,
-    gap: spacing.sm,
-  },
-  emptyState: {
-    flex: 1,
-    display: 'flex',
-    flexDirection: 'column' as const,
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: spacing.md,
-    padding: spacing.xl,
-    color: colors.text.muted,
-  },
-  emptyMessage: {
-    fontSize: typography.fontSize.sm,
-    textAlign: 'center' as const,
-  },
-  errorItem: {
-    padding: spacing.md,
-    borderRadius: borderRadius.md,
-    backgroundColor: colors.background.medium,
-    cursor: 'pointer',
-    transition: `all ${animation.duration.fast}`,
-    borderLeft: '3px solid',
-  },
-  errorHeader: {
-    display: 'flex',
-    alignItems: 'flex-start',
-    justifyContent: 'space-between',
-    gap: spacing.sm,
-    marginBottom: spacing.xs,
-  },
-  errorType: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: spacing.xs,
-  },
-  errorBadge: {
-    padding: `2px ${spacing.xs}`,
-    borderRadius: borderRadius.sm,
-    fontSize: typography.fontSize.xs,
-    fontWeight: typography.fontWeight.medium,
-    textTransform: 'uppercase' as const,
-  },
-  errorTime: {
-    fontSize: typography.fontSize.xs,
-    color: colors.text.muted,
-    whiteSpace: 'nowrap' as const,
-  },
-  errorMessage: {
-    fontSize: typography.fontSize.sm,
-    color: colors.text.primary,
-    lineHeight: typography.lineHeight.normal,
-    wordBreak: 'break-word' as const,
-    display: '-webkit-box',
-    WebkitLineClamp: 2,
-    WebkitBoxOrient: 'vertical' as const,
-    overflow: 'hidden',
-  },
-  errorSource: {
-    marginTop: spacing.xs,
-    fontSize: typography.fontSize.xs,
-    color: colors.text.muted,
-    fontFamily: typography.fontFamily.mono,
-  },
-  actionButton: {
-    padding: spacing.xs,
-    borderRadius: borderRadius.sm,
-    backgroundColor: 'transparent',
-    border: 'none',
-    color: colors.text.muted,
-    fontSize: typography.fontSize.sm,
-    cursor: 'pointer',
-    opacity: 0,
-    transition: `opacity ${animation.duration.fast}`,
-  },
-};
-
-const severityColors: Record<string, { bg: string; border: string; text: string }> = {
-  critical: {
-    bg: `${colors.semantic.error}15`,
-    border: colors.semantic.error,
-    text: colors.semantic.error,
-  },
-  error: {
-    bg: `${colors.semantic.error}15`,
-    border: colors.semantic.error,
-    text: colors.semantic.error,
-  },
-  warning: {
-    bg: `${colors.semantic.warning}15`,
-    border: colors.semantic.warning,
-    text: colors.semantic.warning,
-  },
-  info: {
-    bg: `${colors.semantic.info}15`,
-    border: colors.semantic.info,
-    text: colors.semantic.info,
-  },
-};
-
-// ============================================================================
-// Props
-// ============================================================================
-
-export interface ErrorsPanelProps {
-  errors: NormalizedError[];
-  onErrorClick: (error: NormalizedError) => void;
-  onErrorIgnore: (id: string) => void;
-  onClearAll: () => void;
-}
-
-// ============================================================================
-// Component
-// ============================================================================
-
-export function ErrorsPanel({
-  errors,
-  onErrorClick,
-  onErrorIgnore: _onErrorIgnore,
-  onClearAll,
-}: ErrorsPanelProps): React.ReactElement {
-  const formatTime = useCallback((timestamp: number): string => {
-    return new Date(timestamp).toLocaleTimeString('ko-KR', {
-      hour: '2-digit',
-      minute: '2-digit',
-      second: '2-digit',
-    });
-  }, []);
-
-  if (errors.length === 0) {
-    return (
-      <div style={styles.container}>
-        <div style={styles.emptyState}>
-          <ManduCharacter state="normal" compact />
-          <p style={styles.emptyMessage}>
-            활성 오류가 없습니다.<br />
-            새 이슈가 생기면 여기에 표시됩니다.
-          </p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div style={styles.container}>
-      {/* Header */}
-      <div style={styles.header}>
-        <span style={{ fontSize: typography.fontSize.sm, color: colors.text.secondary }}>
-          {errors.length}개의 이슈
-        </span>
-        <button style={styles.clearButton} onClick={onClearAll}>
-          모두 지우기
-        </button>
-      </div>
-
-      {/* Error List */}
-      <div data-testid={testIds.errorList} style={styles.list}>
-        {errors.map((error) => {
-          const severity = severityColors[error.severity] ?? severityColors.error;
-
-          return (
-            <div
-              key={error.id}
-              style={{
-                ...styles.errorItem,
-                borderLeftColor: severity.border,
-              }}
-              onClick={() => onErrorClick(error)}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter') onErrorClick(error);
-              }}
-              tabIndex={0}
-              role="button"
-            >
-              <div style={styles.errorHeader}>
-                <div style={styles.errorType}>
-                  <span
-                    style={{
-                      ...styles.errorBadge,
-                      backgroundColor: severity.bg,
-                      color: severity.text,
-                    }}
-                  >
-                    {error.type}
-                  </span>
-                  <span
-                    style={{
-                      ...styles.errorBadge,
-                      backgroundColor: severity.bg,
-                      color: severity.text,
-                    }}
-                  >
-                    {error.severity}
-                  </span>
-                </div>
-                <span style={styles.errorTime}>{formatTime(error.timestamp)}</span>
-              </div>
-
-              <p style={styles.errorMessage}>
-                {sanitizeErrorMessage(error.message)}
-              </p>
-
-              {error.source && (
-                <p style={styles.errorSource}>
-                  {error.source}
-                  {error.line && `:${error.line}`}
-                  {error.column && `:${error.column}`}
-                </p>
-              )}
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
+/**
+ * Mandu Kitchen DevTools - Errors Panel
+ * @version 1.0.3
+ */
+
+import React, { useCallback } from 'react';
+import type { NormalizedError } from '../../../types';
+import { colors, typography, spacing, borderRadius, animation, testIds } from '../../../design-tokens';
+import { ManduCharacter } from '../mandu-character';
+import { sanitizeErrorMessage } from '../../filters';
+
+// ============================================================================
+// 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',
+  },
+  clearButton: {
+    padding: `${spacing.xs} ${spacing.sm}`,
+    borderRadius: borderRadius.sm,
+    backgroundColor: colors.background.light,
+    border: 'none',
+    color: colors.text.secondary,
+    fontSize: typography.fontSize.xs,
+    cursor: 'pointer',
+    transition: `all ${animation.duration.fast}`,
+  },
+  list: {
+    flex: 1,
+    overflow: 'auto',
+    display: 'flex',
+    flexDirection: 'column' as const,
+    gap: spacing.sm,
+  },
+  emptyState: {
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'column' as const,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: spacing.md,
+    padding: spacing.xl,
+    color: colors.text.muted,
+  },
+  emptyMessage: {
+    fontSize: typography.fontSize.sm,
+    textAlign: 'center' as const,
+  },
+  errorItem: {
+    padding: spacing.md,
+    borderRadius: borderRadius.md,
+    backgroundColor: colors.background.medium,
+    cursor: 'pointer',
+    transition: `all ${animation.duration.fast}`,
+    borderLeft: '3px solid',
+  },
+  errorHeader: {
+    display: 'flex',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    gap: spacing.sm,
+    marginBottom: spacing.xs,
+  },
+  errorType: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: spacing.xs,
+  },
+  errorBadge: {
+    padding: `2px ${spacing.xs}`,
+    borderRadius: borderRadius.sm,
+    fontSize: typography.fontSize.xs,
+    fontWeight: typography.fontWeight.medium,
+    textTransform: 'uppercase' as const,
+  },
+  errorTime: {
+    fontSize: typography.fontSize.xs,
+    color: colors.text.muted,
+    whiteSpace: 'nowrap' as const,
+  },
+  errorMessage: {
+    fontSize: typography.fontSize.sm,
+    color: colors.text.primary,
+    lineHeight: typography.lineHeight.normal,
+    wordBreak: 'break-word' as const,
+    display: '-webkit-box',
+    WebkitLineClamp: 2,
+    WebkitBoxOrient: 'vertical' as const,
+    overflow: 'hidden',
+  },
+  errorSource: {
+    marginTop: spacing.xs,
+    fontSize: typography.fontSize.xs,
+    color: colors.text.muted,
+    fontFamily: typography.fontFamily.mono,
+  },
+  actionButton: {
+    padding: spacing.xs,
+    borderRadius: borderRadius.sm,
+    backgroundColor: 'transparent',
+    border: 'none',
+    color: colors.text.muted,
+    fontSize: typography.fontSize.sm,
+    cursor: 'pointer',
+    opacity: 0,
+    transition: `opacity ${animation.duration.fast}`,
+  },
+};
+
+const severityColors: Record<string, { bg: string; border: string; text: string }> = {
+  critical: {
+    bg: `${colors.semantic.error}15`,
+    border: colors.semantic.error,
+    text: colors.semantic.error,
+  },
+  error: {
+    bg: `${colors.semantic.error}15`,
+    border: colors.semantic.error,
+    text: colors.semantic.error,
+  },
+  warning: {
+    bg: `${colors.semantic.warning}15`,
+    border: colors.semantic.warning,
+    text: colors.semantic.warning,
+  },
+  info: {
+    bg: `${colors.semantic.info}15`,
+    border: colors.semantic.info,
+    text: colors.semantic.info,
+  },
+};
+
+// ============================================================================
+// Props
+// ============================================================================
+
+export interface ErrorsPanelProps {
+  errors: NormalizedError[];
+  onErrorClick: (error: NormalizedError) => void;
+  onErrorIgnore: (id: string) => void;
+  onClearAll: () => void;
+}
+
+// ============================================================================
+// Component
+// ============================================================================
+
+export function ErrorsPanel({
+  errors,
+  onErrorClick,
+  onErrorIgnore: _onErrorIgnore,
+  onClearAll,
+}: ErrorsPanelProps): React.ReactElement {
+  const formatTime = useCallback((timestamp: number): string => {
+    return new Date(timestamp).toLocaleTimeString('ko-KR', {
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+    });
+  }, []);
+
+  if (errors.length === 0) {
+    return (
+      <div style={styles.container}>
+        <div style={styles.emptyState}>
+          <ManduCharacter state="normal" compact />
+          <p style={styles.emptyMessage}>
+            활성 오류가 없습니다.<br />
+            새 이슈가 생기면 여기에 표시됩니다.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div style={styles.container}>
+      {/* Header */}
+      <div style={styles.header}>
+        <span style={{ fontSize: typography.fontSize.sm, color: colors.text.secondary }}>
+          {errors.length}개의 이슈
+        </span>
+        <button style={styles.clearButton} onClick={onClearAll}>
+          모두 지우기
+        </button>
+      </div>
+
+      {/* Error List */}
+      <div data-testid={testIds.errorList} style={styles.list}>
+        {errors.map((error) => {
+          const severity = severityColors[error.severity] ?? severityColors.error;
+
+          return (
+            <div
+              key={error.id}
+              style={{
+                ...styles.errorItem,
+                borderLeftColor: severity.border,
+              }}
+              onClick={() => onErrorClick(error)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') onErrorClick(error);
+              }}
+              tabIndex={0}
+              role="button"
+            >
+              <div style={styles.errorHeader}>
+                <div style={styles.errorType}>
+                  <span
+                    style={{
+                      ...styles.errorBadge,
+                      backgroundColor: severity.bg,
+                      color: severity.text,
+                    }}
+                  >
+                    {error.type}
+                  </span>
+                  <span
+                    style={{
+                      ...styles.errorBadge,
+                      backgroundColor: severity.bg,
+                      color: severity.text,
+                    }}
+                  >
+                    {error.severity}
+                  </span>
+                </div>
+                <span style={styles.errorTime}>{formatTime(error.timestamp)}</span>
+              </div>
+
+              <p style={styles.errorMessage}>
+                {sanitizeErrorMessage(error.message)}
+              </p>
+
+              {error.source && (
+                <p style={styles.errorSource}>
+                  {error.source}
+                  {error.line && `:${error.line}`}
+                  {error.column && `:${error.column}`}
+                </p>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

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

@@ -204,11 +204,11 @@ export function GuardPanel({ violations, onClear }: GuardPanelProps): React.Reac
   if (violations.length === 0) {
     return (
       <div style={styles.container}>
-        <div style={styles.emptyState}>
-          <p>
-            현재 아키텍처 위반이 없습니다.<br />
-            새 스캔 결과가 생기면 여기에 표시됩니다.
-          </p>
+        <div style={styles.emptyState}>
+          <p>
+            현재 아키텍처 위반이 없습니다.<br />
+            새 스캔 결과가 생기면 여기에 표시됩니다.
+          </p>
           <button
             style={{
               ...styles.clearButton,
@@ -218,16 +218,16 @@ export function GuardPanel({ violations, onClear }: GuardPanelProps): React.Reac
             }}
             onClick={handleScan}
             disabled={scanning}
-          >
-            {scanning ? '스캔 중...' : '전체 스캔'}
-          </button>
-          {scanResult && (
-            <p style={{ marginTop: spacing.sm, fontSize: typography.fontSize.xs }}>
-              스캔 결과: {scanResult.total === 0
-                ? '위반 없음'
-                : `${scanResult.total}개 위반 (에러 ${scanResult.errors}, 경고 ${scanResult.warnings})`
-              }
-            </p>
+          >
+            {scanning ? '스캔 중...' : '전체 스캔'}
+          </button>
+          {scanResult && (
+            <p style={{ marginTop: spacing.sm, fontSize: typography.fontSize.xs }}>
+              스캔 결과: {scanResult.total === 0
+                ? '위반 없음'
+                : `${scanResult.total}개 위반 (에러 ${scanResult.errors}, 경고 ${scanResult.warnings})`
+              }
+            </p>
           )}
         </div>
       </div>
@@ -252,9 +252,9 @@ export function GuardPanel({ violations, onClear }: GuardPanelProps): React.Reac
             style={{ ...styles.clearButton, opacity: scanning ? 0.5 : 1 }}
             onClick={handleScan}
             disabled={scanning}
-          >
-            {scanning ? '스캔 중...' : '스캔'}
-          </button>
+          >
+            {scanning ? '스캔 중...' : '스캔'}
+          </button>
           <button style={styles.clearButton} onClick={onClear}>
             모두 지우기
           </button>
@@ -322,9 +322,9 @@ export function GuardPanel({ violations, onClear }: GuardPanelProps): React.Reac
                       color: isApproved ? colors.semantic.success : colors.text.secondary,
                     }}
                     onClick={() => handleDecision(violation.ruleId, violation.source.file, 'approve')}
-                  >
-                    허용
-                  </button>
+                  >
+                    허용
+                  </button>
                   <button
                     style={{
                       ...styles.clearButton,
@@ -334,9 +334,9 @@ export function GuardPanel({ violations, onClear }: GuardPanelProps): React.Reac
                       color: decision === 'reject' ? colors.semantic.error : colors.text.secondary,
                     }}
                     onClick={() => handleDecision(violation.ruleId, violation.source.file, 'reject')}
-                  >
-                    차단
-                  </button>
+                  >
+                    차단
+                  </button>
                 </div>
               </div>
 
@@ -358,12 +358,12 @@ export function GuardPanel({ violations, onClear }: GuardPanelProps): React.Reac
                 )}
               </div>
 
-              {violation.suggestion && (
-                <div style={styles.suggestion}>
-                  <div style={styles.suggestionLabel}>제안</div>
-                  {violation.suggestion}
-                </div>
-              )}
+              {violation.suggestion && (
+                <div style={styles.suggestion}>
+                  <div style={styles.suggestionLabel}>제안</div>
+                  {violation.suggestion}
+                </div>
+              )}
             </div>
           );
         })}