session-wrap-dashboard 3.9.0

package/src/components/TrendChart.tsx

@@ -0,0 +1,92 @@
+import { memo, useMemo } from 'react'
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer
+} from 'recharts'
+import { AnalyticsTrend } from '../types'
+
+interface TrendChartProps {
+  data: AnalyticsTrend[]
+}
+
+const TrendChartComponent = ({ data }: TrendChartProps) => {
+  if (!data || data.length === 0) {
+    return (
+      <div className="flex items-center justify-center h-80">
+        <p className="text-slate-500">No trend data available</p>
+      </div>
+    )
+  }
+
+  // Memoize chart data transformation
+  const chartData = useMemo(() =>
+    data.map((item) => ({
+      date: new Date(item.snapshot_date).toLocaleDateString('en-US', {
+        month: 'short',
+        day: 'numeric'
+      }),
+      completed: item.completed_tasks,
+      pending: item.pending_tasks,
+      inProgress: item.in_progress_tasks,
+      decisions: item.total_decisions,
+      quality: (item.avg_decision_quality * 100).toFixed(0) // Scale to 0-100 for visibility
+    })), [data])
+
+  return (
+    <ResponsiveContainer width="100%" height={300}>
+      <LineChart data={chartData}>
+        <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
+        <XAxis dataKey="date" stroke="#64748b" />
+        <YAxis stroke="#64748b" />
+        <Tooltip
+          contentStyle={{
+            backgroundColor: '#fff',
+            border: '1px solid #e2e8f0',
+            borderRadius: '0.5rem'
+          }}
+        />
+        <Legend />
+        <Line
+          type="monotone"
+          dataKey="completed"
+          stroke="#10b981"
+          strokeWidth={2}
+          name="Completed"
+          connectNulls
+        />
+        <Line
+          type="monotone"
+          dataKey="inProgress"
+          stroke="#3b82f6"
+          strokeWidth={2}
+          name="In Progress"
+          connectNulls
+        />
+        <Line
+          type="monotone"
+          dataKey="pending"
+          stroke="#f59e0b"
+          strokeWidth={2}
+          name="Pending"
+          connectNulls
+        />
+        <Line
+          type="monotone"
+          dataKey="quality"
+          stroke="#8b5cf6"
+          strokeWidth={2}
+          name="Decision Quality (%)"
+          connectNulls
+        />
+      </LineChart>
+    </ResponsiveContainer>
+  )
+}
+
+export const TrendChart = memo(TrendChartComponent)

package/src/components/WorkspaceSelector.tsx

@@ -0,0 +1,157 @@
+import { useState } from 'react'
+import { useWorkspace } from '../hooks'
+import { Plus, Lock, Globe } from 'lucide-react'
+
+export const WorkspaceSelector = () => {
+  const { workspaces, currentWorkspace, setCurrentWorkspace, createWorkspace, isLoading } =
+    useWorkspace()
+  const [showCreateForm, setShowCreateForm] = useState(false)
+  const [formData, setFormData] = useState({ name: '', isPublic: false })
+  const [isCreating, setIsCreating] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const handleCreate = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!formData.name.trim()) {
+      setError('Workspace name is required')
+      return
+    }
+
+    try {
+      setIsCreating(true)
+      setError(null)
+      await createWorkspace(formData.name, formData.isPublic)
+      setFormData({ name: '', isPublic: false })
+      setShowCreateForm(false)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to create workspace')
+    } finally {
+      setIsCreating(false)
+    }
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="loading-spinner"></div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold text-slate-900">Workspaces</h1>
+        <p className="text-slate-600 mt-2">Manage your workspaces and collaboration spaces</p>
+      </div>
+
+      {/* Workspaces Grid */}
+      <div className="grid grid-cols-3 gap-4">
+        {workspaces.map((workspace) => (
+          <div
+            key={workspace.id}
+            onClick={() => setCurrentWorkspace(workspace)}
+            className={`card cursor-pointer transition-all ${
+              currentWorkspace?.id === workspace.id
+                ? 'border-blue-500 bg-blue-50'
+                : 'hover:border-blue-300'
+            }`}
+          >
+            <div className="flex items-start justify-between mb-3">
+              <h3 className="text-lg font-semibold text-slate-900">{workspace.name}</h3>
+              <div className="text-slate-500">
+                {workspace.is_public ? (
+                  <Globe size={18} />
+                ) : (
+                  <Lock size={18} />
+                )}
+              </div>
+            </div>
+            <p className="text-sm text-slate-600">
+              {workspace.is_public ? 'Public' : 'Private'} workspace
+            </p>
+            {workspace.roles && (
+              <div className="mt-3 pt-3 border-t border-slate-200">
+                <p className="text-xs text-slate-500">
+                  {workspace.roles.length} role{workspace.roles.length !== 1 ? 's' : ''}
+                </p>
+              </div>
+            )}
+          </div>
+        ))}
+
+        {/* Create New Workspace Card */}
+        <button
+          onClick={() => setShowCreateForm(true)}
+          className="card border-2 border-dashed border-slate-300 hover:border-blue-400 flex flex-col items-center justify-center gap-2 cursor-pointer transition-colors"
+        >
+          <Plus size={32} className="text-slate-400" />
+          <span className="text-slate-600 font-medium">Create New</span>
+        </button>
+      </div>
+
+      {/* Create Form Modal */}
+      {showCreateForm && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg p-6 max-w-md w-full mx-4">
+            <h2 className="text-xl font-bold mb-4">Create Workspace</h2>
+
+            {error && (
+              <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-2 rounded mb-4">
+                {error}
+              </div>
+            )}
+
+            <form onSubmit={handleCreate} className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-slate-700 mb-2">
+                  Workspace Name
+                </label>
+                <input
+                  type="text"
+                  value={formData.name}
+                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                  className="input w-full"
+                  placeholder="e.g., Engineering Team"
+                  disabled={isCreating}
+                />
+              </div>
+
+              <div className="flex items-center gap-2">
+                <input
+                  type="checkbox"
+                  id="isPublic"
+                  checked={formData.isPublic}
+                  onChange={(e) => setFormData({ ...formData, isPublic: e.target.checked })}
+                  className="cursor-pointer"
+                  disabled={isCreating}
+                />
+                <label htmlFor="isPublic" className="text-sm text-slate-700 cursor-pointer">
+                  Make this workspace public
+                </label>
+              </div>
+
+              <div className="flex gap-3 pt-4">
+                <button
+                  type="submit"
+                  disabled={isCreating}
+                  className="btn btn-primary flex-1"
+                >
+                  {isCreating ? 'Creating...' : 'Create'}
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setShowCreateForm(false)}
+                  disabled={isCreating}
+                  className="btn btn-secondary flex-1"
+                >
+                  Cancel
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/__tests__/Header.test.tsx

@@ -0,0 +1,64 @@
+import { describe, it, expect, vi } from 'vitest'
+import { screen } from '@testing-library/react'
+import { render } from '../../test/utils'
+import { Header } from '../Header'
+
+vi.mock('../../hooks', () => ({
+  useAuth: () => ({
+    user: {
+      id: '1',
+      github_login: 'testuser',
+      email: 'test@example.com',
+      created_at: '2026-01-01'
+    },
+    logout: vi.fn()
+  }),
+  useWorkspace: () => ({
+    currentWorkspace: {
+      id: '1',
+      name: 'Test Workspace',
+      owner_id: 'user1',
+      is_public: false,
+      created_at: '2026-01-01',
+      updated_at: '2026-01-01'
+    },
+    workspaces: [
+      {
+        id: '1',
+        name: 'Test Workspace',
+        owner_id: 'user1',
+        is_public: false,
+        created_at: '2026-01-01',
+        updated_at: '2026-01-01'
+      }
+    ],
+    setCurrentWorkspace: vi.fn()
+  })
+}))
+
+describe('Header Component', () => {
+  it('should render header with title', () => {
+    render(<Header title="Test Dashboard" />)
+
+    expect(screen.getByText('Test Dashboard')).toBeInTheDocument()
+  })
+
+  it('should display user login name', () => {
+    render(<Header />)
+
+    expect(screen.getByText('testuser')).toBeInTheDocument()
+  })
+
+  it('should have logout button', () => {
+    render(<Header />)
+
+    expect(screen.getByText('Logout')).toBeInTheDocument()
+  })
+
+  it('should show workspace selector', () => {
+    render(<Header />)
+
+    const select = screen.getByDisplayValue('Test Workspace')
+    expect(select).toBeInTheDocument()
+  })
+})

package/src/components/__tests__/Sidebar.test.tsx

@@ -0,0 +1,39 @@
+import { describe, it, expect } from 'vitest'
+import { screen } from '@testing-library/react'
+import { render } from '../../test/utils'
+import { Sidebar } from '../Sidebar'
+
+describe('Sidebar Component', () => {
+  it('should render sidebar logo', () => {
+    render(<Sidebar />)
+
+    expect(screen.getByText(/Session Wrap/i)).toBeInTheDocument()
+  })
+
+  it('should render navigation items', () => {
+    render(<Sidebar />)
+
+    expect(screen.getByText('Home')).toBeInTheDocument()
+    expect(screen.getByText('Analytics')).toBeInTheDocument()
+    expect(screen.getByText('Workspaces')).toBeInTheDocument()
+    expect(screen.getByText('Roles & Members')).toBeInTheDocument()
+    expect(screen.getByText('Integrations')).toBeInTheDocument()
+    expect(screen.getByText('Settings')).toBeInTheDocument()
+  })
+
+  it('should have correct navigation links', () => {
+    render(<Sidebar />)
+
+    const homeLink = screen.getByRole('link', { name: /Home/i })
+    expect(homeLink).toHaveAttribute('href', '/')
+
+    const dashboardLink = screen.getByRole('link', { name: /Analytics/i })
+    expect(dashboardLink).toHaveAttribute('href', '/dashboard')
+  })
+
+  it('should display version', () => {
+    render(<Sidebar />)
+
+    expect(screen.getByText('v3.9.0')).toBeInTheDocument()
+  })
+})

package/src/components/index.ts

@@ -0,0 +1,8 @@
+export { Header } from './Header'
+export { Sidebar } from './Sidebar'
+export { AnalyticsDashboard } from './AnalyticsDashboard'
+export { TrendChart } from './TrendChart'
+export { AgentLeaderboard } from './AgentLeaderboard'
+export { WorkspaceSelector } from './WorkspaceSelector'
+export { RoleManager } from './RoleManager'
+export { IntegrationManager } from './IntegrationManager'

package/src/hooks/__tests__/useAuth.test.ts

@@ -0,0 +1,88 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { renderHook, act } from '@testing-library/react'
+import { useAuth } from '../useAuth'
+import * as authService from '../../auth'
+
+vi.mock('../../auth')
+vi.mock('../../api', () => ({
+  userAPI: {
+    getProfile: vi.fn(() =>
+      Promise.resolve({
+        data: {
+          user: {
+            id: '1',
+            github_login: 'testuser',
+            email: 'test@example.com',
+            created_at: '2026-01-01'
+          }
+        }
+      })
+    )
+  }
+}))
+
+describe('useAuth', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    ;(authService.initAuth as any).mockResolvedValue({
+      token: null,
+      isAuthenticated: false
+    })
+  })
+
+  it('should initialize with loading state', () => {
+    const { result } = renderHook(() => useAuth())
+
+    expect(result.current.isLoading).toBe(true)
+    expect(result.current.isAuthenticated).toBe(false)
+    expect(result.current.user).toBe(null)
+  })
+
+  it('should handle login', async () => {
+    ;(authService.login as any).mockResolvedValue({
+      user: {
+        id: '1',
+        github_login: 'testuser',
+        email: 'test@example.com',
+        created_at: '2026-01-01'
+      }
+    })
+
+    const { result } = renderHook(() => useAuth())
+
+    await act(async () => {
+      await result.current.login('test-token')
+    })
+
+    expect(result.current.isAuthenticated).toBe(true)
+    expect(result.current.user?.github_login).toBe('testuser')
+  })
+
+  it('should handle logout', async () => {
+    ;(authService.logout as any).mockImplementation(() => {})
+
+    const { result } = renderHook(() => useAuth())
+
+    await act(async () => {
+      result.current.logout()
+    })
+
+    expect(authService.logout).toHaveBeenCalled()
+    expect(result.current.isAuthenticated).toBe(false)
+    expect(result.current.user).toBe(null)
+  })
+
+  it('should catch login errors', async () => {
+    ;(authService.login as any).mockRejectedValue(
+      new Error('Auth failed')
+    )
+
+    const { result } = renderHook(() => useAuth())
+
+    await expect(
+      act(async () => {
+        await result.current.login('invalid-token')
+      })
+    ).rejects.toThrow('Auth failed')
+  })
+})

package/src/hooks/__tests__/useWorkspace.test.ts

@@ -0,0 +1,101 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { renderHook, act } from '@testing-library/react'
+import { useWorkspace } from '../useWorkspace'
+
+vi.mock('../../api', () => ({
+  workspaceAPI: {
+    list: vi.fn(() =>
+      Promise.resolve({
+        data: [
+          {
+            id: '1',
+            name: 'Test Workspace',
+            owner_id: 'user1',
+            is_public: false,
+            created_at: '2026-01-01',
+            updated_at: '2026-01-01',
+            roles: ['admin']
+          }
+        ]
+      })
+    ),
+    getMembers: vi.fn(() =>
+      Promise.resolve({
+        data: [
+          {
+            id: 'member1',
+            github_login: 'testuser',
+            email: 'test@example.com',
+            avatar_url: null,
+            roles: ['admin']
+          }
+        ]
+      })
+    ),
+    addMember: vi.fn(() => Promise.resolve({})),
+    updateMember: vi.fn(() => Promise.resolve({})),
+    removeMember: vi.fn(() => Promise.resolve({}))
+  },
+  rbacAPI: {
+    getRoles: vi.fn(() =>
+      Promise.resolve({
+        data: [
+          {
+            id: '1',
+            name: 'admin',
+            description: 'Administrator',
+            permissions: {}
+          }
+        ]
+      })
+    )
+  }
+}))
+
+describe('useWorkspace', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should load workspaces on mount', async () => {
+    const { result } = renderHook(() => useWorkspace())
+
+    expect(result.current.isLoading).toBe(true)
+
+    // Wait for initial load
+    await new Promise((resolve) => setTimeout(resolve, 100))
+
+    expect(result.current.workspaces.length).toBe(1)
+    expect(result.current.currentWorkspace?.name).toBe('Test Workspace')
+  })
+
+  it('should set current workspace', async () => {
+    const { result } = renderHook(() => useWorkspace())
+
+    await new Promise((resolve) => setTimeout(resolve, 100))
+
+    const workspace = result.current.workspaces[0]
+
+    await act(async () => {
+      result.current.setCurrentWorkspace(workspace)
+    })
+
+    expect(result.current.currentWorkspace).toBe(workspace)
+  })
+
+  it('should load members for current workspace', async () => {
+    const { result } = renderHook(() => useWorkspace())
+
+    await new Promise((resolve) => setTimeout(resolve, 100))
+
+    expect(result.current.members.length).toBe(1)
+    expect(result.current.members[0].github_login).toBe('testuser')
+  })
+
+  it('should handle errors gracefully', () => {
+    const { result } = renderHook(() => useWorkspace())
+
+    // Should not throw
+    expect(result.current.error).toBe(null)
+  })
+})

package/src/hooks/index.ts

@@ -0,0 +1,4 @@
+export { useAuth } from './useAuth'
+export { useWorkspace } from './useWorkspace'
+export { useAnalytics } from './useAnalytics'
+export { useApi } from './useApi'

package/src/hooks/useAnalytics.ts

@@ -0,0 +1,76 @@
+import { useState, useEffect, useCallback } from 'react'
+import { analyticsAPI } from '../api'
+import * as types from '../types'
+
+interface UseAnalyticsReturn {
+  dashboard: types.AnalyticsDashboard | null
+  insights: types.Insight[]
+  trends: types.AnalyticsTrend[]
+  agents: types.AgentPerformance[]
+  isLoading: boolean
+  error: string | null
+  days: number
+  setDays: (days: number) => void
+  refresh: () => Promise<void>
+}
+
+export const useAnalytics = (workspaceId: string | null): UseAnalyticsReturn => {
+  const [dashboard, setDashboard] = useState<types.AnalyticsDashboard | null>(null)
+  const [insights, setInsights] = useState<types.Insight[]>([])
+  const [trends, setTrends] = useState<types.AnalyticsTrend[]>([])
+  const [agents, setAgents] = useState<types.AgentPerformance[]>([])
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [days, setDays] = useState(30)
+
+  const loadData = useCallback(async () => {
+    if (!workspaceId) {
+      setDashboard(null)
+      setInsights([])
+      setTrends([])
+      setAgents([])
+      return
+    }
+
+    try {
+      setIsLoading(true)
+      setError(null)
+
+      const [dashboardRes, insightsRes, agentsRes] = await Promise.all([
+        analyticsAPI.getDashboard(workspaceId, days),
+        analyticsAPI.getInsights(workspaceId, days),
+        analyticsAPI.getAgents(workspaceId, days)
+      ])
+
+      setDashboard(dashboardRes.data)
+      setInsights(insightsRes.data.insights)
+      setAgents(agentsRes.data.agents)
+      setTrends(dashboardRes.data.trends)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load analytics')
+    } finally {
+      setIsLoading(false)
+    }
+  }, [workspaceId, days])
+
+  // Load data when workspace or days changes
+  useEffect(() => {
+    loadData()
+  }, [loadData])
+
+  const refresh = useCallback(async () => {
+    await loadData()
+  }, [loadData])
+
+  return {
+    dashboard,
+    insights,
+    trends,
+    agents,
+    isLoading,
+    error,
+    days,
+    setDays,
+    refresh
+  }
+}

package/src/hooks/useApi.ts

@@ -0,0 +1,62 @@
+import { useState, useCallback } from 'react'
+
+interface UseApiOptions {
+  onSuccess?: (data: any) => void
+  onError?: (error: Error) => void
+}
+
+interface UseApiReturn<T> {
+  data: T | null
+  isLoading: boolean
+  error: Error | null
+  execute: (...args: any[]) => Promise<T>
+  reset: () => void
+}
+
+export const useApi = <T,>(
+  apiFunction: (...args: any[]) => Promise<any>,
+  options?: UseApiOptions
+): UseApiReturn<T> => {
+  const [data, setData] = useState<T | null>(null)
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<Error | null>(null)
+
+  const execute = useCallback(
+    async (...args: any[]): Promise<T> => {
+      try {
+        setIsLoading(true)
+        setError(null)
+
+        const response = await apiFunction(...args)
+        const result = response.data
+
+        setData(result)
+        options?.onSuccess?.(result)
+
+        return result
+      } catch (err) {
+        const error = err instanceof Error ? err : new Error(String(err))
+        setError(error)
+        options?.onError?.(error)
+        throw error
+      } finally {
+        setIsLoading(false)
+      }
+    },
+    [apiFunction, options]
+  )
+
+  const reset = useCallback(() => {
+    setData(null)
+    setError(null)
+    setIsLoading(false)
+  }, [])
+
+  return {
+    data,
+    isLoading,
+    error,
+    execute,
+    reset
+  }
+}