aiwf 0.3.6 → 0.3.8

package/src/lib/resources/templates/web-app/template/src/pages/AiwfDashboard.tsx

@@ -0,0 +1,60 @@
+import { useState, useEffect } from 'react'
+import { useAiwfStore } from '@/stores/aiwfStore'
+import FeatureLedger from '@/components/aiwf/FeatureLedger'
+import TokenUsage from '@/components/aiwf/TokenUsage'
+import ContextStatus from '@/components/aiwf/ContextStatus'
+
+export default function AiwfDashboard() {
+  const { features, tokenUsage, contextStatus, loadDashboardData } = useAiwfStore()
+  const [activeTab, setActiveTab] = useState('features')
+
+  useEffect(() => {
+    loadDashboardData()
+  }, [loadDashboardData])
+
+  const tabs = [
+    { id: 'features', name: 'Feature Ledger', icon: '📋' },
+    { id: 'tokens', name: '토큰 사용량', icon: '🪙' },
+    { id: 'context', name: 'Context 상태', icon: '📊' },
+  ]
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div className="mb-8">
+        <h2 className="text-2xl font-bold text-gray-900 dark:text-white">
+          AIWF 대시보드
+        </h2>
+        <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+          프로젝트의 AI 지원 개발 현황을 한눈에 확인하세요.
+        </p>
+      </div>
+
+      <div className="border-b border-gray-200 dark:border-gray-700">
+        <nav className="-mb-px flex space-x-8" aria-label="Tabs">
+          {tabs.map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={`
+                whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm
+                ${activeTab === tab.id
+                  ? 'border-primary text-primary'
+                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
+                }
+              `}
+            >
+              <span className="mr-2">{tab.icon}</span>
+              {tab.name}
+            </button>
+          ))}
+        </nav>
+      </div>
+
+      <div className="mt-8">
+        {activeTab === 'features' && <FeatureLedger features={features} />}
+        {activeTab === 'tokens' && <TokenUsage usage={tokenUsage} />}
+        {activeTab === 'context' && <ContextStatus status={contextStatus} />}
+      </div>
+    </div>
+  )
+}

package/src/lib/resources/templates/web-app/template/src/pages/HomePage.tsx

@@ -0,0 +1,89 @@
+export default function HomePage() {
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div className="text-center">
+        <h2 className="text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
+          {{projectName}}에 오신 것을 환영합니다
+        </h2>
+        <p className="mt-4 max-w-2xl mx-auto text-xl text-gray-500 dark:text-gray-400">
+          AIWF가 통합된 React + TypeScript 웹 애플리케이션입니다.
+        </p>
+      </div>
+
+      <div className="mt-10">
+        <dl className="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
+          <div className="relative">
+            <dt>
+              <div className="absolute flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white">
+                <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+                </svg>
+              </div>
+              <p className="ml-16 text-lg leading-6 font-medium text-gray-900 dark:text-white">
+                빠른 개발
+              </p>
+            </dt>
+            <dd className="mt-2 ml-16 text-base text-gray-500 dark:text-gray-400">
+              Vite를 사용한 빠른 HMR과 빌드 속도
+            </dd>
+          </div>
+
+          <div className="relative">
+            <dt>
+              <div className="absolute flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white">
+                <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3" />
+                </svg>
+              </div>
+              <p className="ml-16 text-lg leading-6 font-medium text-gray-900 dark:text-white">
+                타입 안정성
+              </p>
+            </dt>
+            <dd className="mt-2 ml-16 text-base text-gray-500 dark:text-gray-400">
+              TypeScript로 견고한 타입 시스템 구축
+            </dd>
+          </div>
+
+          <div className="relative">
+            <dt>
+              <div className="absolute flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white">
+                <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
+                </svg>
+              </div>
+              <p className="ml-16 text-lg leading-6 font-medium text-gray-900 dark:text-white">
+                AIWF 통합
+              </p>
+            </dt>
+            <dd className="mt-2 ml-16 text-base text-gray-500 dark:text-gray-400">
+              AI 지원 개발 워크플로우 내장
+            </dd>
+          </div>
+
+          <div className="relative">
+            <dt>
+              <div className="absolute flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white">
+                <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
+                </svg>
+              </div>
+              <p className="ml-16 text-lg leading-6 font-medium text-gray-900 dark:text-white">
+                모던 스타일링
+              </p>
+            </dt>
+            <dd className="mt-2 ml-16 text-base text-gray-500 dark:text-gray-400">
+              Tailwind CSS로 빠른 UI 개발
+            </dd>
+          </div>
+        </dl>
+      </div>
+
+      <div className="mt-10 text-center">
+        <h3 className="text-lg font-medium text-gray-900 dark:text-white">시작하기</h3>
+        <div className="mt-3 text-base text-gray-500 dark:text-gray-400">
+          <code className="bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded">npm run dev</code>로 개발 서버를 시작하세요.
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/lib/resources/templates/web-app/template/src/pages/NotFound.tsx

@@ -0,0 +1,25 @@
+import { Link } from 'react-router-dom'
+
+export default function NotFound() {
+  return (
+    <div className="min-h-[60vh] flex items-center justify-center px-4 sm:px-6 lg:px-8">
+      <div className="text-center">
+        <p className="text-base font-semibold text-primary">404</p>
+        <h1 className="mt-2 text-4xl font-bold text-gray-900 dark:text-white tracking-tight sm:text-5xl">
+          페이지를 찾을 수 없습니다
+        </h1>
+        <p className="mt-2 text-base text-gray-500 dark:text-gray-400">
+          요청하신 페이지가 존재하지 않습니다.
+        </p>
+        <div className="mt-6">
+          <Link
+            to="/"
+            className="text-base font-medium text-primary hover:text-primary/80"
+          >
+            홈으로 돌아가기<span aria-hidden="true"> &rarr;</span>
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/lib/resources/templates/web-app/template/src/stores/aiwfStore.ts

@@ -0,0 +1,126 @@
+import { create } from 'zustand'
+
+interface Feature {
+  id: string
+  name: string
+  description: string
+  status: 'completed' | 'in_progress' | 'planned'
+  type: string
+  created_at: string
+  completed_at?: string
+  tags: string[]
+}
+
+interface TokenUsageData {
+  total: number
+  used: number
+  remaining: number
+  percentage: number
+  history: Array<{
+    date: string
+    tokens: number
+    action: string
+  }>
+}
+
+interface ContextStatusData {
+  compressionLevel: 'none' | 'balanced' | 'aggressive'
+  cacheEnabled: boolean
+  cacheSize: number
+  maxCacheSize: number
+  lastCompression: string
+  savedTokens: number
+  activePersona: string
+}
+
+interface AiwfStore {
+  features: Feature[]
+  tokenUsage: TokenUsageData
+  contextStatus: ContextStatusData
+  loadDashboardData: () => Promise<void>
+  updateFeature: (featureId: string, updates: Partial<Feature>) => void
+  addFeature: (feature: Feature) => void
+}
+
+export const useAiwfStore = create<AiwfStore>((set) => ({
+  features: [],
+  tokenUsage: {
+    total: 100000,
+    used: 45000,
+    remaining: 55000,
+    percentage: 45,
+    history: []
+  },
+  contextStatus: {
+    compressionLevel: 'balanced',
+    cacheEnabled: true,
+    cacheSize: 5242880, // 5MB
+    maxCacheSize: 52428800, // 50MB
+    lastCompression: new Date().toISOString(),
+    savedTokens: 15000,
+    activePersona: 'fullstack-developer'
+  },
+
+  loadDashboardData: async () => {
+    try {
+      // 실제 구현에서는 API를 호출하거나 로컬 파일을 읽습니다
+      const mockFeatures: Feature[] = [
+        {
+          id: 'F001',
+          name: '프로젝트 초기 설정',
+          description: 'React + TypeScript + Vite 기반 웹 애플리케이션 초기 설정',
+          type: 'setup',
+          status: 'completed',
+          created_at: new Date().toISOString(),
+          completed_at: new Date().toISOString(),
+          tags: ['초기설정', '인프라', '설정']
+        }
+      ]
+
+      const mockHistory = [
+        {
+          date: new Date().toISOString(),
+          tokens: 1500,
+          action: '컴포넌트 생성'
+        },
+        {
+          date: new Date(Date.now() - 3600000).toISOString(),
+          tokens: 2300,
+          action: 'API 통합'
+        },
+        {
+          date: new Date(Date.now() - 7200000).toISOString(),
+          tokens: 800,
+          action: '코드 리뷰'
+        }
+      ]
+
+      set({
+        features: mockFeatures,
+        tokenUsage: {
+          total: 100000,
+          used: 45000,
+          remaining: 55000,
+          percentage: 45,
+          history: mockHistory
+        }
+      })
+    } catch (error) {
+      console.error('Failed to load AIWF dashboard data:', error)
+    }
+  },
+
+  updateFeature: (featureId, updates) => {
+    set((state) => ({
+      features: state.features.map((feature) =>
+        feature.id === featureId ? { ...feature, ...updates } : feature
+      )
+    }))
+  },
+
+  addFeature: (feature) => {
+    set((state) => ({
+      features: [...state.features, feature]
+    }))
+  }
+}))

package/src/lib/resources/templates/web-app/template/src/types/global.d.ts

@@ -0,0 +1,9 @@
+interface Window {
+  aiwf: {
+    trackPage: (path: string) => void
+    trackEvent: (event: string, data?: any) => void
+    getFeatures: () => Promise<any[]>
+    getTokenUsage: () => Promise<any>
+    getContextStatus: () => Promise<any>
+  }
+}

package/src/lib/resources/templates/web-app/template/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/src/lib/resources/templates/web-app/template/tailwind.config.js

@@ -0,0 +1,30 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#eff6ff',
+          100: '#dbeafe',
+          200: '#bfdbfe',
+          300: '#93bbfd',
+          400: '#60a5fa',
+          500: '#3b82f6',
+          600: '#2563eb',
+          700: '#1d4ed8',
+          800: '#1e40af',
+          900: '#1e3a8a',
+          950: '#172554',
+        }
+      },
+      fontFamily: {
+        sans: ['Pretendard', 'Inter', 'system-ui', 'sans-serif'],
+      }
+    },
+  },
+  plugins: [],
+}

package/src/lib/resources/templates/web-app/template/tsconfig.json

@@ -0,0 +1,37 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Path Aliases */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"],
+      "@components/*": ["src/components/*"],
+      "@pages/*": ["src/pages/*"],
+      "@hooks/*": ["src/hooks/*"],
+      "@utils/*": ["src/utils/*"],
+      "@stores/*": ["src/stores/*"],
+      "@types/*": ["src/types/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/src/lib/resources/templates/web-app/template/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/src/lib/resources/templates/web-app/template/vite.config.ts

@@ -0,0 +1,23 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+      '@components': path.resolve(__dirname, './src/components'),
+      '@pages': path.resolve(__dirname, './src/pages'),
+      '@hooks': path.resolve(__dirname, './src/hooks'),
+      '@utils': path.resolve(__dirname, './src/utils'),
+      '@stores': path.resolve(__dirname, './src/stores'),
+      '@types': path.resolve(__dirname, './src/types'),
+    }
+  },
+  server: {
+    port: 3000,
+    host: true
+  }
+})

package/src/lib/resources/utils/background-monitor.js

@@ -0,0 +1,223 @@
+/**
+ * 백그라운드 평가 모니터
+ * 사용자 작업을 방해하지 않고 품질 모니터링
+ */
+
+import { SimplifiedEvaluator } from './simplified-evaluator.js';
+import fs from 'fs/promises';
+import path from 'path';
+
+export class BackgroundMonitor {
+  constructor() {
+    this.evaluator = new SimplifiedEvaluator();
+    this.recentEvaluations = [];
+    this.maxHistorySize = 100;
+    this.statsFile = null;
+    this.initialized = false;
+  }
+
+  /**
+   * 모니터 초기화
+   */
+  async initialize() {
+    if (this.initialized) return;
+
+    try {
+      // 프로젝트 루트의 .aiwf 디렉토리 찾기
+      const projectRoot = await this.findProjectRoot();
+      if (projectRoot) {
+        this.statsFile = path.join(projectRoot, '.aiwf', '.evaluation-stats.json');
+        await this.loadStats();
+      }
+      this.initialized = true;
+    } catch (error) {
+      // 초기화 실패해도 기본 기능은 작동
+      this.initialized = true;
+    }
+  }
+
+  /**
+   * 프로젝트 루트 찾기
+   */
+  async findProjectRoot() {
+    let currentDir = process.cwd();
+    
+    while (currentDir !== path.dirname(currentDir)) {
+      try {
+        await fs.access(path.join(currentDir, '.aiwf'));
+        return currentDir;
+      } catch {
+        currentDir = path.dirname(currentDir);
+      }
+    }
+    
+    return null;
+  }
+
+  /**
+   * 통계 로드
+   */
+  async loadStats() {
+    if (!this.statsFile) return;
+
+    try {
+      const data = await fs.readFile(this.statsFile, 'utf8');
+      const stats = JSON.parse(data);
+      this.recentEvaluations = stats.recentEvaluations || [];
+    } catch {
+      // 파일이 없으면 새로 시작
+      this.recentEvaluations = [];
+    }
+  }
+
+  /**
+   * 통계 저장 (비동기, 에러 무시)
+   */
+  async saveStats() {
+    if (!this.statsFile) return;
+
+    try {
+      const stats = {
+        recentEvaluations: this.recentEvaluations.slice(-this.maxHistorySize),
+        lastUpdated: new Date().toISOString()
+      };
+      
+      await fs.writeFile(this.statsFile, JSON.stringify(stats, null, 2));
+    } catch {
+      // 저장 실패해도 무시
+    }
+  }
+
+  /**
+   * 백그라운드에서 응답 모니터링
+   */
+  async monitorResponse(response, persona, options = {}) {
+    // 초기화 확인
+    if (!this.initialized) {
+      await this.initialize();
+    }
+
+    // 빠른 평가 수행
+    const evaluation = this.evaluator.quickEvaluate(response, persona);
+    
+    // 기록 추가
+    this.recentEvaluations.push({
+      persona,
+      score: evaluation.score,
+      timestamp: new Date().toISOString(),
+      responseLength: response.length
+    });
+
+    // 크기 제한
+    if (this.recentEvaluations.length > this.maxHistorySize) {
+      this.recentEvaluations = this.recentEvaluations.slice(-this.maxHistorySize);
+    }
+
+    // 비동기 저장 (차단하지 않음)
+    this.saveStats().catch(() => {});
+
+    // 피드백이 필요한 경우만 반환
+    if (evaluation.needsFeedback && !options.silent) {
+      return {
+        feedback: evaluation.feedback,
+        score: evaluation.score
+      };
+    }
+
+    return null;
+  }
+
+  /**
+   * 최근 통계 요약
+   */
+  getRecentStats(persona = null) {
+    let evaluations = this.recentEvaluations;
+    
+    if (persona) {
+      evaluations = evaluations.filter(e => e.persona === persona);
+    }
+
+    if (evaluations.length === 0) {
+      return { message: '아직 평가 기록이 없습니다.' };
+    }
+
+    const scores = evaluations.map(e => e.score);
+    const avgScore = scores.reduce((sum, s) => sum + s, 0) / scores.length;
+    
+    // 페르소나별 통계
+    const personaStats = {};
+    evaluations.forEach(e => {
+      if (!personaStats[e.persona]) {
+        personaStats[e.persona] = { count: 0, totalScore: 0 };
+      }
+      personaStats[e.persona].count++;
+      personaStats[e.persona].totalScore += e.score;
+    });
+
+    Object.keys(personaStats).forEach(p => {
+      const stats = personaStats[p];
+      stats.avgScore = (stats.totalScore / stats.count).toFixed(2);
+      delete stats.totalScore;
+    });
+
+    return {
+      totalEvaluations: evaluations.length,
+      averageScore: avgScore.toFixed(2),
+      personaStats,
+      trend: this.calculateTrend(scores)
+    };
+  }
+
+  /**
+   * 점수 추세 계산
+   */
+  calculateTrend(scores) {
+    if (scores.length < 2) return 'stable';
+    
+    const recent = scores.slice(-10);
+    const older = scores.slice(-20, -10);
+    
+    if (older.length === 0) return 'stable';
+    
+    const recentAvg = recent.reduce((sum, s) => sum + s, 0) / recent.length;
+    const olderAvg = older.reduce((sum, s) => sum + s, 0) / older.length;
+    
+    if (recentAvg > olderAvg + 0.1) return 'improving';
+    if (recentAvg < olderAvg - 0.1) return 'declining';
+    return 'stable';
+  }
+
+  /**
+   * 주간 요약 생성
+   */
+  getWeeklySummary() {
+    const oneWeekAgo = new Date();
+    oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);
+    
+    const weeklyEvals = this.recentEvaluations.filter(e => 
+      new Date(e.timestamp) > oneWeekAgo
+    );
+
+    if (weeklyEvals.length === 0) {
+      return { message: '최근 일주일간 평가 기록이 없습니다.' };
+    }
+
+    const summary = this.getRecentStats();
+    summary.period = 'weekly';
+    summary.evaluationCount = weeklyEvals.length;
+    
+    return summary;
+  }
+}
+
+// 싱글톤 인스턴스
+let monitorInstance = null;
+
+export function getBackgroundMonitor() {
+  if (!monitorInstance) {
+    monitorInstance = new BackgroundMonitor();
+  }
+  return monitorInstance;
+}
+
+export default BackgroundMonitor;