@mandujs/core 0.18.22 → 0.19.2

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

@@ -1,244 +1,374 @@
-/**
- * Mandu Kitchen DevTools - Guard Panel
- * @version 1.0.3
- */
-
-import React, { useMemo } from 'react';
-import type { DevToolsGuardViolation } 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',
-  },
-  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,
-    fontSize: typography.fontSize.sm,
-    textAlign: 'center' as const,
-  },
-  violationItem: {
-    padding: spacing.md,
-    borderRadius: borderRadius.md,
-    backgroundColor: colors.background.medium,
-    borderLeft: '3px solid',
-    transition: `all ${animation.duration.fast}`,
-  },
-  violationHeader: {
-    display: 'flex',
-    alignItems: 'flex-start',
-    justifyContent: 'space-between',
-    gap: spacing.sm,
-    marginBottom: spacing.xs,
-  },
-  ruleName: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: spacing.xs,
-  },
-  badge: {
-    padding: `2px ${spacing.xs}`,
-    borderRadius: borderRadius.sm,
-    fontSize: typography.fontSize.xs,
-    fontWeight: typography.fontWeight.medium,
-  },
-  message: {
-    fontSize: typography.fontSize.sm,
-    color: colors.text.primary,
-    lineHeight: typography.lineHeight.normal,
-    marginBottom: spacing.sm,
-  },
-  location: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: spacing.sm,
-    fontSize: typography.fontSize.xs,
-    fontFamily: typography.fontFamily.mono,
-    color: colors.text.muted,
-  },
-  arrow: {
-    color: colors.text.muted,
-  },
-  suggestion: {
-    marginTop: spacing.sm,
-    padding: spacing.sm,
-    borderRadius: borderRadius.sm,
-    backgroundColor: `${colors.semantic.info}10`,
-    borderLeft: `2px solid ${colors.semantic.info}`,
-    fontSize: typography.fontSize.xs,
-    color: colors.text.secondary,
-    lineHeight: typography.lineHeight.normal,
-  },
-  suggestionLabel: {
-    fontWeight: typography.fontWeight.semibold,
-    color: colors.semantic.info,
-    marginBottom: '4px',
-  },
-};
-
-const severityStyles: Record<string, { border: string; bg: string; color: string }> = {
-  error: {
-    border: colors.semantic.error,
-    bg: `${colors.semantic.error}20`,
-    color: colors.semantic.error,
-  },
-  warning: {
-    border: colors.semantic.warning,
-    bg: `${colors.semantic.warning}20`,
-    color: colors.semantic.warning,
-  },
-};
-
-// ============================================================================
-// Props
-// ============================================================================
-
-export interface GuardPanelProps {
-  violations: DevToolsGuardViolation[];
-  onClear: () => void;
-}
-
-// ============================================================================
-// Component
-// ============================================================================
-
-export function GuardPanel({ violations, onClear }: GuardPanelProps): React.ReactElement {
-  // Group by rule
-  const groupedByRule = useMemo(() => {
-    const groups = new Map<string, DevToolsGuardViolation[]>();
-    for (const v of violations) {
-      const existing = groups.get(v.ruleId) ?? [];
-      groups.set(v.ruleId, [...existing, v]);
-    }
-    return groups;
-  }, [violations]);
-
-  if (violations.length === 0) {
-    return (
-      <div style={styles.container}>
-        <div style={styles.emptyState}>
-          🛡️
-          <p>
-            아키텍처 위반이 없어요!<br />
-            코드가 규칙을 잘 따르고 있어요.
-          </p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div style={styles.container}>
-      {/* Header */}
-      <div style={styles.header}>
-        <span style={{ fontSize: typography.fontSize.sm, color: colors.text.secondary }}>
-          {violations.length}개의 위반 ({groupedByRule.size}개 규칙)
-        </span>
-        <button style={styles.clearButton} onClick={onClear}>
-          모두 지우기
-        </button>
-      </div>
-
-      {/* Violation List */}
-      <div style={styles.list}>
-        {violations.map((violation) => {
-          const severity = severityStyles[violation.severity] ?? severityStyles.warning;
-
-          return (
-            <div
-              key={violation.id}
-              style={{
-                ...styles.violationItem,
-                borderLeftColor: severity.border,
-              }}
-            >
-              <div style={styles.violationHeader}>
-                <div style={styles.ruleName}>
-                  <span
-                    style={{
-                      ...styles.badge,
-                      backgroundColor: severity.bg,
-                      color: severity.color,
-                    }}
-                  >
-                    {violation.severity}
-                  </span>
-                  <span
-                    style={{
-                      ...styles.badge,
-                      backgroundColor: colors.background.light,
-                      color: colors.text.secondary,
-                    }}
-                  >
-                    {violation.ruleName}
-                  </span>
-                </div>
-              </div>
-
-              <p style={styles.message}>{violation.message}</p>
-
-              <div style={styles.location}>
-                <span>
-                  {violation.source.file}
-                  {violation.source.line && `:${violation.source.line}`}
-                </span>
-                {violation.target && (
-                  <>
-                    <span style={styles.arrow}>→</span>
-                    <span>
-                      {violation.target.file}
-                      {violation.target.line && `:${violation.target.line}`}
-                    </span>
-                  </>
-                )}
-              </div>
-
-              {violation.suggestion && (
-                <div style={styles.suggestion}>
-                  <div style={styles.suggestionLabel}>💡 제안</div>
-                  {violation.suggestion}
-                </div>
-              )}
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
+/**
+ * Mandu Kitchen DevTools - Guard Panel
+ * @version 1.0.3
+ */
+
+import React, { useMemo, useState, useCallback } from 'react';
+import type { DevToolsGuardViolation } 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',
+  },
+  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,
+    fontSize: typography.fontSize.sm,
+    textAlign: 'center' as const,
+  },
+  violationItem: {
+    padding: spacing.md,
+    borderRadius: borderRadius.md,
+    backgroundColor: colors.background.medium,
+    borderLeft: '3px solid',
+    transition: `all ${animation.duration.fast}`,
+  },
+  violationHeader: {
+    display: 'flex',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    gap: spacing.sm,
+    marginBottom: spacing.xs,
+  },
+  ruleName: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: spacing.xs,
+  },
+  badge: {
+    padding: `2px ${spacing.xs}`,
+    borderRadius: borderRadius.sm,
+    fontSize: typography.fontSize.xs,
+    fontWeight: typography.fontWeight.medium,
+  },
+  message: {
+    fontSize: typography.fontSize.sm,
+    color: colors.text.primary,
+    lineHeight: typography.lineHeight.normal,
+    marginBottom: spacing.sm,
+  },
+  location: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: spacing.sm,
+    fontSize: typography.fontSize.xs,
+    fontFamily: typography.fontFamily.mono,
+    color: colors.text.muted,
+  },
+  arrow: {
+    color: colors.text.muted,
+  },
+  suggestion: {
+    marginTop: spacing.sm,
+    padding: spacing.sm,
+    borderRadius: borderRadius.sm,
+    backgroundColor: `${colors.semantic.info}10`,
+    borderLeft: `2px solid ${colors.semantic.info}`,
+    fontSize: typography.fontSize.xs,
+    color: colors.text.secondary,
+    lineHeight: typography.lineHeight.normal,
+  },
+  suggestionLabel: {
+    fontWeight: typography.fontWeight.semibold,
+    color: colors.semantic.info,
+    marginBottom: '4px',
+  },
+};
+
+const severityStyles: Record<string, { border: string; bg: string; color: string }> = {
+  error: {
+    border: colors.semantic.error,
+    bg: `${colors.semantic.error}20`,
+    color: colors.semantic.error,
+  },
+  warning: {
+    border: colors.semantic.warning,
+    bg: `${colors.semantic.warning}20`,
+    color: colors.semantic.warning,
+  },
+};
+
+// ============================================================================
+// Props
+// ============================================================================
+
+export interface GuardDecisionState {
+  violationKey: string;
+  action: 'approve' | 'reject';
+}
+
+export interface GuardPanelProps {
+  violations: DevToolsGuardViolation[];
+  onClear: () => void;
+}
+
+// ============================================================================
+// Component
+// ============================================================================
+
+export function GuardPanel({ violations, onClear }: GuardPanelProps): React.ReactElement {
+  const [scanning, setScanning] = useState(false);
+  const [scanResult, setScanResult] = useState<{ total: number; errors: number; warnings: number } | null>(null);
+  const [decisions, setDecisions] = useState<Map<string, 'approve' | 'reject'>>(new Map());
+  const [showApproved, setShowApproved] = useState(false);
+
+  const handleDecision = useCallback(async (ruleId: string, filePath: string, action: 'approve' | 'reject') => {
+    try {
+      const endpoint = action === 'approve' ? '/__kitchen/api/guard/approve' : '/__kitchen/api/guard/reject';
+      const res = await fetch(endpoint, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ ruleId, filePath }),
+      });
+      if (res.ok) {
+        setDecisions(prev => {
+          const next = new Map(prev);
+          next.set(`${ruleId}::${filePath}`, action);
+          return next;
+        });
+      }
+    } catch {
+      // Kitchen API not available
+    }
+  }, []);
+
+  const handleScan = useCallback(async () => {
+    setScanning(true);
+    setScanResult(null);
+    try {
+      const res = await fetch('/__kitchen/api/guard/scan', { method: 'POST' });
+      if (res.ok) {
+        const data = await res.json();
+        if (data.report) {
+          setScanResult({
+            total: data.report.totalViolations,
+            errors: data.report.bySeverity?.error ?? 0,
+            warnings: data.report.bySeverity?.warn ?? data.report.bySeverity?.warning ?? 0,
+          });
+        }
+      }
+    } catch {
+      // Kitchen API not available (non-dev or older version)
+    } finally {
+      setScanning(false);
+    }
+  }, []);
+
+  // Group by rule
+  const groupedByRule = useMemo(() => {
+    const groups = new Map<string, DevToolsGuardViolation[]>();
+    for (const v of violations) {
+      const existing = groups.get(v.ruleId) ?? [];
+      groups.set(v.ruleId, [...existing, v]);
+    }
+    return groups;
+  }, [violations]);
+
+  if (violations.length === 0) {
+    return (
+      <div style={styles.container}>
+        <div style={styles.emptyState}>
+          🛡️
+          <p>
+            아키텍처 위반이 없어요!<br />
+            코드가 규칙을 잘 따르고 있어요.
+          </p>
+          <button
+            style={{
+              ...styles.clearButton,
+              padding: `${spacing.sm} ${spacing.md}`,
+              marginTop: spacing.sm,
+              opacity: scanning ? 0.5 : 1,
+            }}
+            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>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div style={styles.container}>
+      {/* Header */}
+      <div style={styles.header}>
+        <span style={{ fontSize: typography.fontSize.sm, color: colors.text.secondary }}>
+          {violations.length}개의 위반 ({groupedByRule.size}개 규칙)
+        </span>
+        <div style={{ display: 'flex', gap: spacing.xs }}>
+          <button
+            style={styles.clearButton}
+            onClick={() => setShowApproved(!showApproved)}
+          >
+            {showApproved ? '승인 숨기기' : '승인 보기'}
+          </button>
+          <button
+            style={{ ...styles.clearButton, opacity: scanning ? 0.5 : 1 }}
+            onClick={handleScan}
+            disabled={scanning}
+          >
+            {scanning ? '스캔 중...' : '🔍 스캔'}
+          </button>
+          <button style={styles.clearButton} onClick={onClear}>
+            모두 지우기
+          </button>
+        </div>
+      </div>
+
+      {/* Violation List */}
+      <div style={styles.list}>
+        {violations.map((violation) => {
+          const severity = severityStyles[violation.severity] ?? severityStyles.warning;
+          const decisionKey = `${violation.ruleId}::${violation.source.file}`;
+          const decision = decisions.get(decisionKey);
+          const isApproved = decision === 'approve';
+
+          if (isApproved && !showApproved) return null;
+
+          return (
+            <div
+              key={violation.id}
+              style={{
+                ...styles.violationItem,
+                borderLeftColor: severity.border,
+                opacity: isApproved ? 0.5 : 1,
+              }}
+            >
+              <div style={styles.violationHeader}>
+                <div style={styles.ruleName}>
+                  <span
+                    style={{
+                      ...styles.badge,
+                      backgroundColor: severity.bg,
+                      color: severity.color,
+                    }}
+                  >
+                    {violation.severity}
+                  </span>
+                  <span
+                    style={{
+                      ...styles.badge,
+                      backgroundColor: colors.background.light,
+                      color: colors.text.secondary,
+                    }}
+                  >
+                    {violation.ruleName}
+                  </span>
+                  {isApproved && (
+                    <span
+                      style={{
+                        ...styles.badge,
+                        backgroundColor: `${colors.semantic.success}20`,
+                        color: colors.semantic.success,
+                      }}
+                    >
+                      Approved
+                    </span>
+                  )}
+                </div>
+                <div style={{ display: 'flex', gap: '4px' }}>
+                  <button
+                    style={{
+                      ...styles.clearButton,
+                      fontSize: typography.fontSize.xs,
+                      padding: '2px 6px',
+                      backgroundColor: isApproved ? `${colors.semantic.success}20` : colors.background.light,
+                      color: isApproved ? colors.semantic.success : colors.text.secondary,
+                    }}
+                    onClick={() => handleDecision(violation.ruleId, violation.source.file, 'approve')}
+                  >
+                    ✅
+                  </button>
+                  <button
+                    style={{
+                      ...styles.clearButton,
+                      fontSize: typography.fontSize.xs,
+                      padding: '2px 6px',
+                      backgroundColor: decision === 'reject' ? `${colors.semantic.error}20` : colors.background.light,
+                      color: decision === 'reject' ? colors.semantic.error : colors.text.secondary,
+                    }}
+                    onClick={() => handleDecision(violation.ruleId, violation.source.file, 'reject')}
+                  >
+                    ❌
+                  </button>
+                </div>
+              </div>
+
+              <p style={styles.message}>{violation.message}</p>
+
+              <div style={styles.location}>
+                <span>
+                  {violation.source.file}
+                  {violation.source.line && `:${violation.source.line}`}
+                </span>
+                {violation.target && (
+                  <>
+                    <span style={styles.arrow}>→</span>
+                    <span>
+                      {violation.target.file}
+                      {violation.target.line && `:${violation.target.line}`}
+                    </span>
+                  </>
+                )}
+              </div>
+
+              {violation.suggestion && (
+                <div style={styles.suggestion}>
+                  <div style={styles.suggestionLabel}>💡 제안</div>
+                  {violation.suggestion}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}