session-wrap-dashboard 3.9.0

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "session-wrap-dashboard",
+  "version": "3.9.0",
+  "type": "module",
+  "description": "React 18 dashboard for Session Wrap Backend (Phase 9 - Complete)",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint src --ext ts,tsx",
+    "type-check": "tsc --noEmit",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest --coverage",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:debug": "playwright test --debug"
+  },
+  "dependencies": {
+    "axios": "^1.6.0",
+    "lucide-react": "^0.294.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.20.0",
+    "recharts": "^2.10.0",
+    "zustand": "^4.4.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.40.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/node": "^20.10.0",
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@vitejs/plugin-react": "^4.2.0",
+    "@vitest/coverage-v8": "^4.1.2",
+    "@vitest/ui": "^4.1.2",
+    "autoprefixer": "^10.4.16",
+    "happy-dom": "^20.8.9",
+    "postcss": "^8.4.32",
+    "tailwindcss": "^3.3.0",
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0",
+    "vitest": "^4.1.2"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}

package/playwright.config.ts

@@ -0,0 +1,38 @@
+import { defineConfig, devices } from '@playwright/test'
+
+export default defineConfig({
+  testDir: './tests/e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: [['html', { outputFolder: 'playwright-report' }]],
+  use: {
+    baseURL: 'http://localhost:3000',
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+    video: 'retain-on-failure'
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] }
+    },
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] }
+    },
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] }
+    }
+  ],
+
+  webServer: {
+    command: 'npm run dev',
+    url: 'http://localhost:3000',
+    reuseExistingServer: !process.env.CI,
+    timeout: 120000
+  }
+})

package/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/src/App.tsx

@@ -0,0 +1,67 @@
+import { Routes, Route, Navigate } from 'react-router-dom'
+import { useAuth } from './hooks'
+import { Sidebar, Header } from './components'
+import {
+  HomePage,
+  DashboardPage,
+  WorkspacesPage,
+  RolesPage,
+  IntegrationsPage,
+  SettingsPage
+} from './pages'
+
+// 登入頁面
+const LoginPage = () => (
+  <div className="flex items-center justify-center h-screen bg-gradient-to-br from-blue-50 to-indigo-50">
+    <div className="text-center">
+      <h1 className="text-4xl font-bold text-slate-900 mb-2">🎯 Session Wrap</h1>
+      <p className="text-slate-600 mb-8">Connecting to auth service...</p>
+      <div className="inline-block w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
+    </div>
+  </div>
+)
+
+interface AppLayoutProps {
+  isAuthenticated: boolean
+  children: React.ReactNode
+}
+
+const AppLayout = ({ isAuthenticated, children }: AppLayoutProps) => {
+  if (!isAuthenticated) {
+    return <LoginPage />
+  }
+
+  return (
+    <div className="flex h-screen bg-slate-50">
+      <Sidebar />
+      <div className="flex-1 flex flex-col overflow-hidden">
+        <Header />
+        <main className="flex-1 overflow-auto">
+          {children}
+        </main>
+      </div>
+    </div>
+  )
+}
+
+export default function App() {
+  const { isAuthenticated, isLoading } = useAuth()
+
+  if (isLoading) {
+    return <LoginPage />
+  }
+
+  return (
+    <AppLayout isAuthenticated={isAuthenticated}>
+      <Routes>
+        <Route path="/" element={<HomePage />} />
+        <Route path="/dashboard" element={<DashboardPage />} />
+        <Route path="/workspaces" element={<WorkspacesPage />} />
+        <Route path="/roles" element={<RolesPage />} />
+        <Route path="/integrations" element={<IntegrationsPage />} />
+        <Route path="/settings" element={<SettingsPage />} />
+        <Route path="*" element={<Navigate to="/" />} />
+      </Routes>
+    </AppLayout>
+  )
+}

package/src/api.ts

@@ -0,0 +1,130 @@
+import axios, { AxiosInstance } from 'axios'
+import * as types from './types'
+
+const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:3000'
+
+// 創建 Axios 實例
+const api: AxiosInstance = axios.create({
+  baseURL: API_URL,
+  headers: {
+    'Content-Type': 'application/json'
+  }
+})
+
+// 請求攔截器 - 添加認證令牌
+api.interceptors.request.use((config) => {
+  const token = localStorage.getItem(import.meta.env.VITE_JWT_STORAGE_KEY || 'auth_token')
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`
+  }
+  return config
+})
+
+// 響應攔截器 - 處理錯誤
+api.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error.response?.status === 401) {
+      localStorage.removeItem(import.meta.env.VITE_JWT_STORAGE_KEY || 'auth_token')
+      window.location.href = '/login'
+    }
+    return Promise.reject(error)
+  }
+)
+
+// 認證端點
+export const authAPI = {
+  login: (claudeToken: string) =>
+    api.post<{ token: string; user: types.User }>('/api/auth/login', { claudeToken }),
+  verify: (token: string) =>
+    api.post<{ valid: boolean }>('/api/auth/verify', { token })
+}
+
+// 用戶端點
+export const userAPI = {
+  getProfile: () =>
+    api.get<{ user: types.User }>('/api/users/profile'),
+  getStorage: () =>
+    api.get<any>('/api/users/storage')
+}
+
+// 工作區端點
+export const workspaceAPI = {
+  list: () =>
+    api.get<types.Workspace[]>('/api/workspaces'),
+  create: (name: string, isPublic: boolean = false) =>
+    api.post<types.Workspace>('/api/workspaces', { name, is_public: isPublic }),
+  get: (id: string) =>
+    api.get<types.Workspace>(`/api/workspaces/${id}`),
+  getMembers: (workspaceId: string) =>
+    api.get<types.WorkspaceMember[]>(`/api/workspaces/${workspaceId}/members`),
+  addMember: (workspaceId: string, userId: string, roleName: string) =>
+    api.post(`/api/workspaces/${workspaceId}/members`, { user_id: userId, role_name: roleName }),
+  updateMember: (workspaceId: string, userId: string, roleName: string) =>
+    api.put(`/api/workspaces/${workspaceId}/members/${userId}`, { role_name: roleName }),
+  removeMember: (workspaceId: string, userId: string) =>
+    api.delete(`/api/workspaces/${workspaceId}/members/${userId}`)
+}
+
+// RBAC 端點
+export const rbacAPI = {
+  getRoles: () =>
+    api.get<types.Role[]>('/api/roles'),
+  getPermissions: (workspaceId?: string) =>
+    api.get(`/api/me/permissions${workspaceId ? `?workspaceId=${workspaceId}` : ''}`),
+  checkPermission: (resourceType: string, resourceId: string, permission: string) =>
+    api.get(`/api/permissions/check`, {
+      params: { resource_type: resourceType, resource_id: resourceId, permission }
+    })
+}
+
+// 分析端點
+export const analyticsAPI = {
+  getDashboard: (workspaceId: string, days: number = 30) =>
+    api.get<types.AnalyticsDashboard>(`/api/analytics/dashboard/${workspaceId}`, {
+      params: { days }
+    }),
+  getTrends: (workspaceId: string, days: number = 30) =>
+    api.get<any>(`/api/analytics/trends/${workspaceId}`, {
+      params: { days }
+    }),
+  getAgents: (workspaceId: string, days: number = 30) =>
+    api.get<{ agents: types.AgentPerformance[] }>(`/api/analytics/agents/${workspaceId}`, {
+      params: { days }
+    }),
+  getDecisions: (workspaceId: string, days: number = 30) =>
+    api.get<any>(`/api/analytics/decisions/${workspaceId}`, {
+      params: { days }
+    }),
+  getInsights: (workspaceId: string, days: number = 30) =>
+    api.get<{ insights: types.Insight[] }>(`/api/analytics/insights/${workspaceId}`, {
+      params: { days }
+    })
+}
+
+// 集成端點
+export const integrationAPI = {
+  list: (workspaceId: string) =>
+    api.get<{ integrations: types.Integration[] }>(`/api/integrations/${workspaceId}`),
+  setup: (workspaceId: string, serviceName: string, config: any) =>
+    api.post(`/api/integrations/${workspaceId}/setup`, { service_name: serviceName, config }),
+  toggle: (integrationId: string) =>
+    api.put(`/api/integrations/${integrationId}/toggle`),
+  delete: (integrationId: string) =>
+    api.delete(`/api/integrations/${integrationId}`),
+  getEvents: (integrationId: string) =>
+    api.get<{ events: types.IntegrationEvent[] }>(`/api/integrations/${integrationId}/events`),
+  testSlack: (workspaceId: string) =>
+    api.post(`/api/integrations/${workspaceId}/slack/test`),
+  testGitHub: (workspaceId: string) =>
+    api.post(`/api/integrations/${workspaceId}/github/test`),
+  testJira: (workspaceId: string) =>
+    api.post(`/api/integrations/${workspaceId}/jira/test`)
+}
+
+// 健康檢查
+export const healthAPI = {
+  check: () => api.get('/health')
+}
+
+export default api

package/src/auth.ts

@@ -0,0 +1,74 @@
+import { authAPI } from './api'
+
+const TOKEN_KEY = import.meta.env.VITE_JWT_STORAGE_KEY || 'auth_token'
+
+export interface AuthState {
+  token: string | null
+  isAuthenticated: boolean
+}
+
+/**
+ * 使用 Claude Code token 登入
+ */
+export const login = async (claudeToken: string) => {
+  const response = await authAPI.login(claudeToken)
+  const { token } = response.data
+
+  // 保存 token
+  localStorage.setItem(TOKEN_KEY, token)
+
+  return response.data
+}
+
+/**
+ * 驗證 token 是否有效
+ */
+export const verifyToken = async (token: string): Promise<boolean> => {
+  try {
+    const response = await authAPI.verify(token)
+    return response.data.valid
+  } catch {
+    return false
+  }
+}
+
+/**
+ * 取得已保存的 token
+ */
+export const getAuthToken = (): string | null => {
+  return localStorage.getItem(TOKEN_KEY)
+}
+
+/**
+ * 檢查用戶是否已認證
+ */
+export const isAuthenticated = (): boolean => {
+  return getAuthToken() !== null
+}
+
+/**
+ * 登出
+ */
+export const logout = () => {
+  localStorage.removeItem(TOKEN_KEY)
+}
+
+/**
+ * 初始化認證狀態
+ */
+export const initAuth = async (): Promise<AuthState> => {
+  const token = getAuthToken()
+
+  if (!token) {
+    return { token: null, isAuthenticated: false }
+  }
+
+  const isValid = await verifyToken(token)
+
+  if (!isValid) {
+    logout()
+    return { token: null, isAuthenticated: false }
+  }
+
+  return { token, isAuthenticated: true }
+}

package/src/components/AgentLeaderboard.tsx

@@ -0,0 +1,84 @@
+import { memo } from 'react'
+import { AgentPerformance } from '../types'
+import { TrendingUp } from 'lucide-react'
+
+interface AgentLeaderboardProps {
+  agents: AgentPerformance[]
+}
+
+const AgentLeaderboardComponent = ({ agents }: AgentLeaderboardProps) => {
+  if (!agents || agents.length === 0) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <p className="text-slate-500">No agent data available</p>
+      </div>
+    )
+  }
+
+  // Sort by efficiency score
+  const sorted = [...agents].sort(
+    (a, b) => (b.efficiency_score || 0) - (a.efficiency_score || 0)
+  )
+
+  const getMedalEmoji = (index: number) => {
+    if (index === 0) return '🥇'
+    if (index === 1) return '🥈'
+    if (index === 2) return '🥉'
+    return '·'
+  }
+
+  return (
+    <div className="overflow-x-auto">
+      <table className="w-full text-sm">
+        <thead>
+          <tr className="border-b border-slate-200">
+            <th className="text-left py-3 px-4 font-semibold text-slate-700">#</th>
+            <th className="text-left py-3 px-4 font-semibold text-slate-700">Agent</th>
+            <th className="text-center py-3 px-4 font-semibold text-slate-700">Tasks Created</th>
+            <th className="text-center py-3 px-4 font-semibold text-slate-700">Completed</th>
+            <th className="text-center py-3 px-4 font-semibold text-slate-700">Comments</th>
+            <th className="text-center py-3 px-4 font-semibold text-slate-700">Avg Response Time</th>
+            <th className="text-center py-3 px-4 font-semibold text-slate-700">Score</th>
+          </tr>
+        </thead>
+        <tbody>
+          {sorted.map((agent, index) => (
+            <tr
+              key={agent.agent_name}
+              className="border-b border-slate-100 hover:bg-slate-50 transition-colors"
+            >
+              <td className="py-3 px-4">
+                <span className="text-lg">{getMedalEmoji(index)}</span>
+              </td>
+              <td className="py-3 px-4 font-medium text-slate-900">
+                {agent.agent_name}
+              </td>
+              <td className="py-3 px-4 text-center text-slate-600">
+                {agent.tasks_created}
+              </td>
+              <td className="py-3 px-4 text-center text-slate-600">
+                {agent.tasks_completed}
+              </td>
+              <td className="py-3 px-4 text-center text-slate-600">
+                {agent.comments_added}
+              </td>
+              <td className="py-3 px-4 text-center text-slate-600">
+                {agent.avg_response_time}ms
+              </td>
+              <td className="py-3 px-4 text-center">
+                <div className="flex items-center justify-center gap-1">
+                  <TrendingUp size={14} className="text-green-600" />
+                  <span className="font-semibold text-slate-900">
+                    {(agent.efficiency_score || 0).toFixed(1)}
+                  </span>
+                </div>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+export const AgentLeaderboard = memo(AgentLeaderboardComponent)

package/src/components/AnalyticsDashboard.tsx

@@ -0,0 +1,223 @@
+import { memo } from 'react'
+import { useAnalytics, useWorkspace } from '../hooks'
+import { TrendChart } from './TrendChart'
+import { AgentLeaderboard } from './AgentLeaderboard'
+import { Insight } from '../types'
+import { AlertCircle, CheckCircle2, Zap } from 'lucide-react'
+
+interface KPICardProps {
+  title: string
+  value: string | number
+  icon: React.ReactNode
+  trend?: string
+  color: 'blue' | 'green' | 'yellow' | 'purple'
+}
+
+const KPICardComponent = ({ title, value, icon, trend, color }: KPICardProps) => {
+  const colorClasses = {
+    blue: 'bg-blue-50 text-blue-600',
+    green: 'bg-green-50 text-green-600',
+    yellow: 'bg-yellow-50 text-yellow-600',
+    purple: 'bg-purple-50 text-purple-600'
+  }
+
+  return (
+    <div className={`${colorClasses[color]} rounded-lg p-6 flex items-start gap-4`}>
+      <div className="text-3xl">{icon}</div>
+      <div className="flex-1">
+        <p className="text-sm font-medium text-slate-600">{title}</p>
+        <p className="text-2xl font-bold mt-1">{value}</p>
+        {trend && <p className="text-xs text-green-600 mt-2">{trend}</p>}
+      </div>
+    </div>
+  )
+}
+
+const KPICard = memo(KPICardComponent)
+
+const InsightCardComponent = (insight: Insight) => {
+  const iconMap = {
+    positive: <CheckCircle2 size={18} className="text-green-600" />,
+    warning: <AlertCircle size={18} className="text-yellow-600" />,
+    info: <Zap size={18} className="text-blue-600" />
+  }
+
+  const bgMap = {
+    positive: 'bg-green-50 border-green-200',
+    warning: 'bg-yellow-50 border-yellow-200',
+    info: 'bg-blue-50 border-blue-200'
+  }
+
+  return (
+    <div className={`${bgMap[insight.type]} border rounded-lg p-4`}>
+      <div className="flex gap-3">
+        <div className="flex-shrink-0">{iconMap[insight.type]}</div>
+        <div className="flex-1">
+          <p className="font-medium text-slate-900">{insight.message}</p>
+          <p className="text-sm text-slate-600 mt-1">{insight.recommendation}</p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const InsightCard = memo(InsightCardComponent)
+
+interface AnalyticsDashboardProps {
+  workspaceId?: string | null
+}
+
+const AnalyticsDashboardComponent = ({ workspaceId }: AnalyticsDashboardProps) => {
+  const { currentWorkspace } = useWorkspace()
+  const wsId = workspaceId || currentWorkspace?.id
+  const { dashboard, insights, agents, isLoading, error, days, setDays } = useAnalytics(wsId || null)
+
+  if (!wsId) {
+    return (
+      <div className="flex items-center justify-center h-screen">
+        <div className="text-center">
+          <p className="text-slate-600">Please select a workspace</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-screen">
+        <div className="loading-spinner"></div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center h-screen">
+        <div className="text-center">
+          <p className="text-red-600">{error}</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (!dashboard) {
+    return (
+      <div className="flex items-center justify-center h-screen">
+        <div className="text-center">
+          <p className="text-slate-600">No analytics data available</p>
+        </div>
+      </div>
+    )
+  }
+
+  const completionRate = dashboard.completion_rate * 100
+
+  return (
+    <div className="p-6 space-y-6">
+      {/* Header with Controls */}
+      <div className="flex justify-between items-center">
+        <h1 className="text-2xl font-bold text-slate-900">Analytics Dashboard</h1>
+        <select
+          value={days}
+          onChange={(e) => setDays(Number(e.target.value))}
+          className="input"
+        >
+          <option value={7}>Last 7 days</option>
+          <option value={30}>Last 30 days</option>
+          <option value={90}>Last 90 days</option>
+        </select>
+      </div>
+
+      {/* KPI Cards */}
+      <div className="grid grid-cols-4 gap-4">
+        <KPICard
+          title="Task Completion"
+          value={`${completionRate.toFixed(1)}%`}
+          icon="📊"
+          color="blue"
+          trend="+5% from last period"
+        />
+        <KPICard
+          title="Total Tasks"
+          value={dashboard.snapshot.total_tasks}
+          icon="✓"
+          color="green"
+        />
+        <KPICard
+          title="Avg Decision Quality"
+          value={dashboard.snapshot.avg_decision_quality.toFixed(2)}
+          icon="⭐"
+          color="purple"
+          trend="Scale: 1-5"
+        />
+        <KPICard
+          title="Active Agents"
+          value={dashboard.snapshot.active_agents}
+          icon="🤖"
+          color="yellow"
+        />
+      </div>
+
+      {/* Trends Chart */}
+      {dashboard.trends.length > 0 && (
+        <div className="card">
+          <h2 className="text-lg font-semibold mb-4">Trends ({days} days)</h2>
+          <TrendChart data={dashboard.trends} />
+        </div>
+      )}
+
+      {/* Two Column Layout */}
+      <div className="grid grid-cols-3 gap-6">
+        {/* Agent Leaderboard */}
+        {agents.length > 0 && (
+          <div className="col-span-2 card">
+            <h2 className="text-lg font-semibold mb-4">Top Agents</h2>
+            <AgentLeaderboard agents={agents} />
+          </div>
+        )}
+
+        {/* Insights */}
+        <div className="card space-y-3">
+          <h2 className="text-lg font-semibold">Key Insights</h2>
+          {insights.length > 0 ? (
+            insights.map((insight) => (
+              <InsightCard key={insight.message} {...insight} />
+            ))
+          ) : (
+            <p className="text-sm text-slate-500">No insights available</p>
+          )}
+        </div>
+      </div>
+
+      {/* Task Status Breakdown */}
+      <div className="card grid grid-cols-4 gap-4">
+        <div>
+          <p className="text-sm text-slate-600">Completed</p>
+          <p className="text-2xl font-bold text-green-600">
+            {dashboard.snapshot.completed_tasks}
+          </p>
+        </div>
+        <div>
+          <p className="text-sm text-slate-600">In Progress</p>
+          <p className="text-2xl font-bold text-blue-600">
+            {dashboard.snapshot.in_progress_tasks}
+          </p>
+        </div>
+        <div>
+          <p className="text-sm text-slate-600">Pending</p>
+          <p className="text-2xl font-bold text-yellow-600">
+            {dashboard.snapshot.pending_tasks}
+          </p>
+        </div>
+        <div>
+          <p className="text-sm text-slate-600">Total Decisions</p>
+          <p className="text-2xl font-bold text-purple-600">
+            {dashboard.snapshot.total_decisions}
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export const AnalyticsDashboard = memo(AnalyticsDashboardComponent)