prjct-cli 0.11.3 → 0.11.5

package/packages/web/app/project/[id]/stats/page.tsx

@@ -1,32 +1,29 @@
 'use client'
 
-import { use, useMemo, useState } from 'react'
+import { use, useMemo } from 'react'
 import { useRouter } from 'next/navigation'
-import Link from 'next/link'
 import { useProject } from '@/hooks/useProjects'
 import { useProjectStats } from '@/hooks/useProjectStats'
 import { Button } from '@/components/ui/button'
-import {
-  ArrowLeft,
-  Zap,
-  TrendingUp,
-  TrendingDown,
-  Lightbulb,
-  AlertTriangle,
-  CheckCircle2,
-  Bot,
-  Rocket,
-  Flame,
-  Play,
-  Copy,
-  FileText,
-  Target,
-  Clock
-} from 'lucide-react'
-import { cn } from '@/lib/utils'
+import { ArrowLeft } from 'lucide-react'
 import type { TimelineEvent } from '@/lib/parse-prjct-files'
 
-// Calculate streak
+import {
+  BentoGrid,
+  BentoCardSkeleton,
+  HeroSection,
+  NowCard,
+  VelocityCard,
+  StreakCard,
+  QueueCard,
+  ShipsCard,
+  IdeasCard,
+  AgentsCard,
+  RoadmapCard,
+  ActivityTimeline,
+} from '@/components/stats'
+
+// Calculate streak from timeline
 function calculateStreak(timeline: TimelineEvent[]): number {
   if (!timeline.length) return 0
   const dates = new Set(timeline.map(e => e.ts?.split('T')[0]).filter(Boolean))
@@ -51,36 +48,14 @@ function getHealthScore(stats: any): number {
   const recentActivity = stats?.timeline?.slice(0, 7).length || 0
 
   let score = 0
-  score += Math.min(30, velocity * 15) // Up to 30 for velocity
-  score += hasCurrentTask ? 20 : 0 // 20 for active work
-  score += queueSize > 0 && queueSize < 15 ? 20 : queueSize === 0 ? 5 : 10 // Queue health
-  score += Math.min(30, recentActivity * 5) // Recent activity
+  score += Math.min(30, velocity * 15)
+  score += hasCurrentTask ? 20 : 0
+  score += queueSize > 0 && queueSize < 15 ? 20 : queueSize === 0 ? 5 : 10
+  score += Math.min(30, recentActivity * 5)
 
   return Math.min(100, Math.round(score))
 }
 
-// Copy to clipboard
-function copyCommand(cmd: string) {
-  navigator.clipboard.writeText(cmd)
-}
-
-// Format relative time
-function formatRelativeTime(dateString: string): string {
-  const date = new Date(dateString)
-  const now = new Date()
-  const diffMs = now.getTime() - date.getTime()
-  const diffMins = Math.floor(diffMs / 60000)
-  const diffHours = Math.floor(diffMs / 3600000)
-  const diffDays = Math.floor(diffMs / 86400000)
-
-  if (diffMins < 1) return 'NOW'
-  if (diffMins < 60) return `${diffMins}M`
-  if (diffHours < 24) return `${diffHours}H`
-  if (diffDays === 1) return '1D'
-  if (diffDays < 7) return `${diffDays}D`
-  return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }).toUpperCase()
-}
-
 // Contextual insight message
 function getInsightMessage(stats: any, streak: number): string {
   if (!stats) return ''
@@ -99,72 +74,52 @@ function getInsightMessage(stats: any, streak: number): string {
   return 'Steady progress. Pick the next task.'
 }
 
-// Section label component
-function SectionLabel({ children, className }: { children: React.ReactNode; className?: string }) {
-  return (
-    <p className={cn("text-[9px] font-bold uppercase tracking-[0.2em] text-foreground/40", className)}>
-      {children}
-    </p>
-  )
+// Calculate velocity change (simulated)
+function getVelocityChange(velocity: number): number {
+  return velocity > 2 ? 15 : velocity > 1 ? 5 : velocity > 0 ? 0 : -10
 }
 
-// Health ring component
-function HealthRing({ score, size = 'md' }: { score: number; size?: 'sm' | 'md' | 'lg' }) {
-  const sizes = {
-    sm: { container: 'h-8 w-8', text: 'text-[10px]' },
-    md: { container: 'h-12 w-12', text: 'text-xs' },
-    lg: { container: 'h-16 w-16', text: 'text-sm' },
-  }
-  const { container, text } = sizes[size]
+// Get weekly velocity data from timeline
+function getWeeklyVelocityData(timeline: TimelineEvent[]): number[] {
+  const today = new Date()
+  const counts: number[] = []
 
-  return (
-    <div className={cn('relative', container)}>
-      <svg className="h-full w-full -rotate-90" viewBox="0 0 36 36">
-        <circle cx="18" cy="18" r="15" fill="none" stroke="currentColor" strokeWidth="3" className="text-foreground/10" />
-        <circle
-          cx="18" cy="18" r="15" fill="none" stroke="currentColor" strokeWidth="3"
-          strokeDasharray={`${score} 100`}
-          strokeLinecap="round"
-          className="text-foreground transition-all duration-700"
-        />
-      </svg>
-      <span className={cn('absolute inset-0 flex items-center justify-center font-bold', text)}>
-        {score}
-      </span>
-    </div>
-  )
-}
+  for (let i = 6; i >= 0; i--) {
+    const date = new Date(today)
+    date.setDate(date.getDate() - i)
+    const dateStr = date.toISOString().split('T')[0]
+
+    const count = timeline.filter(e => {
+      if (!e.ts) return false
+      return e.ts.startsWith(dateStr) && e.type === 'task_complete'
+    }).length
 
-// Stat card component
-function StatCard({ value, label, suffix, size = 'md' }: {
-  value: string | number
-  label: string
-  suffix?: string
-  size?: 'sm' | 'md' | 'lg'
-}) {
-  const sizeClasses = {
-    sm: { value: 'text-lg font-bold', label: 'text-[9px] font-bold uppercase tracking-[0.2em] text-foreground/40' },
-    md: { value: 'text-2xl font-bold', label: 'text-xs text-muted-foreground' },
-    lg: { value: 'text-3xl font-black tracking-tight tabular-nums', label: 'text-[9px] font-bold uppercase tracking-[0.2em] text-foreground/40 mt-1' },
+    counts.push(count)
   }
-  const styles = sizeClasses[size]
 
-  return (
-    <div>
-      <p className={cn(styles.value, 'text-foreground')}>
-        {value}
-        {suffix && <span className="text-foreground/50 font-normal text-sm ml-1">{suffix}</span>}
-      </p>
-      <p className={styles.label}>{label}</p>
-    </div>
-  )
+  return counts
 }
 
-// Stats row component - minimal divider
-function StatsRow({ children, className }: { children: React.ReactNode; className?: string }) {
+function LoadingSkeleton() {
   return (
-    <div className={cn('flex flex-wrap gap-x-10 gap-y-4', className)}>
-      {children}
+    <div className="p-8 space-y-8">
+      <div className="flex items-start gap-6">
+        <div className="h-20 w-20 rounded-full bg-muted animate-pulse" />
+        <div className="space-y-3">
+          <div className="h-16 w-32 bg-muted rounded animate-pulse" />
+          <div className="h-4 w-48 bg-muted rounded animate-pulse" />
+        </div>
+      </div>
+      <BentoGrid>
+        <BentoCardSkeleton size="2x2" />
+        <BentoCardSkeleton size="1x1" />
+        <BentoCardSkeleton size="2x2" />
+        <BentoCardSkeleton size="1x1" />
+        <BentoCardSkeleton size="1x2" />
+        <BentoCardSkeleton size="1x2" />
+        <BentoCardSkeleton size="1x1" />
+        <BentoCardSkeleton size="1x1" />
+      </BentoGrid>
     </div>
   )
 }
@@ -172,7 +127,6 @@ function StatsRow({ children, className }: { children: React.ReactNode; classNam
 export default function ProjectStatsPage({ params }: { params: Promise<{ id: string }> }) {
   const { id: projectId } = use(params)
   const router = useRouter()
-  const [expandedSection, setExpandedSection] = useState<string | null>(null)
 
   const { data: project, isLoading: projectLoading } = useProject(projectId)
   const { data, isLoading: statsLoading } = useProjectStats(projectId)
@@ -181,27 +135,12 @@ export default function ProjectStatsPage({ params }: { params: Promise<{ id: str
   const streak = useMemo(() => calculateStreak(stats?.timeline || []), [stats?.timeline])
   const healthScore = useMemo(() => getHealthScore(stats), [stats])
   const insightMessage = useMemo(() => getInsightMessage(stats, streak), [stats, streak])
-
-  const completionRate = useMemo(() => {
-    if (!stats?.metrics) return 0
-    const { tasksStarted, tasksCompleted } = stats.metrics
-    return tasksStarted > 0 ? Math.round((tasksCompleted / tasksStarted) * 100) : 0
-  }, [stats?.metrics])
-
-  const velocityChange = useMemo(() => {
-    // Simulated - in reality would compare to previous period
-    const velocity = stats?.metrics?.velocity?.tasksPerDay || 0
-    return velocity > 2 ? 15 : velocity > 1 ? 5 : -10
-  }, [stats?.metrics?.velocity?.tasksPerDay])
-
-  // Recent activity - last 5 for chips
-  const recentActivity = useMemo(() => {
-    if (!stats?.timeline) return []
-    return stats.timeline.slice(0, 5)
-  }, [stats?.timeline])
+  const velocity = stats?.metrics?.velocity?.tasksPerDay || 0
+  const velocityChange = useMemo(() => getVelocityChange(velocity), [velocity])
+  const weeklyVelocityData = useMemo(() => getWeeklyVelocityData(stats?.timeline || []), [stats?.timeline])
 
   if (projectLoading || statsLoading) {
-    return <div className="flex items-center justify-center h-full"><div className="animate-pulse text-muted-foreground">Loading...</div></div>
+    return <LoadingSkeleton />
   }
 
   if (!project || !stats) {
@@ -209,7 +148,10 @@ export default function ProjectStatsPage({ params }: { params: Promise<{ id: str
       <div className="flex items-center justify-center h-full">
         <div className="text-center space-y-4">
           <p className="text-4xl text-muted-foreground">404</p>
-          <Button variant="ghost" onClick={() => router.back()}><ArrowLeft className="w-4 h-4 mr-2" />Back</Button>
+          <Button variant="ghost" onClick={() => router.back()}>
+            <ArrowLeft className="w-4 h-4 mr-2" />
+            Back
+          </Button>
         </div>
       </div>
     )
@@ -217,228 +159,45 @@ export default function ProjectStatsPage({ params }: { params: Promise<{ id: str
 
   return (
     <div className="flex h-full flex-col p-8 overflow-auto">
-      {/* Hero Section - Big number + insight */}
-      <div className="flex items-start justify-between mb-2">
-        <div>
-          {/* Big Number - Tasks Completed */}
-          <h1 className="text-8xl font-bold tracking-tighter text-foreground tabular-nums">
-            {stats.metrics.tasksCompleted}
-          </h1>
-          <p className="text-lg text-muted-foreground mt-2">{insightMessage}</p>
-        </div>
-
-        {/* Navigation back */}
-        <Link href={`/project/${projectId}`} className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground">
-          <ArrowLeft className="w-4 h-4" />{project.name}
-        </Link>
-      </div>
-
-      {/* Trend indicator */}
-      {velocityChange !== 0 && (
-        <div className="flex items-center gap-2 mt-4">
-          <span className={cn(
-            'flex items-center gap-1 text-sm font-medium px-2 py-1 rounded-md',
-            velocityChange >= 0 ? 'bg-foreground/5 text-foreground' : 'bg-muted text-muted-foreground'
-          )}>
-            {velocityChange >= 0 ? <TrendingUp className="h-3.5 w-3.5" /> : <TrendingDown className="h-3.5 w-3.5" />}
-            {velocityChange >= 0 ? '+' : ''}{velocityChange}%
-          </span>
-          <span className="text-sm text-muted-foreground">velocity vs last week</span>
-        </div>
-      )}
-
-      {/* Secondary KPIs Row */}
-      <StatsRow className="mt-8">
-        <div className="flex items-center gap-3">
-          <HealthRing score={healthScore} />
-          <div>
-            <p className="text-sm font-medium">Health</p>
-            <p className="text-xs text-muted-foreground">Project score</p>
-          </div>
-        </div>
-
-        <StatCard value={`${completionRate}%`} label="Completion" />
-        <StatCard value={stats.summary.totalShipsEver} label="Ships" />
-        <StatCard value={stats.metrics.velocity.tasksPerDay} label="Tasks/day" />
-        <StatCard
-          value={<>{stats.queue.length} / {stats.ideas.pending.length}</>}
-          label="Queue / Ideas"
+      {/* Hero Section */}
+      <HeroSection
+        projectId={projectId}
+        projectName={project.name || projectId}
+        tasksCompleted={stats.metrics.tasksCompleted}
+        healthScore={healthScore}
+        velocity={velocity}
+        velocityChange={velocityChange}
+        insightMessage={insightMessage}
+        timeline={stats.timeline}
+      />
+
+      {/* Bento Grid */}
+      <BentoGrid className="mt-8">
+        {/* Row 1: NOW (2x2), VELOCITY (1x1), ROADMAP (2x2) */}
+        <NowCard currentTask={stats.currentTask} />
+        <VelocityCard
+          tasksPerDay={velocity}
+          weeklyData={weeklyVelocityData}
+          change={velocityChange}
         />
-        {streak > 0 && (
-          <div className="flex items-center gap-2">
-            <Flame className={cn('w-5 h-5', streak > 3 ? 'text-orange-500' : 'text-foreground/40')} />
-            <StatCard value={streak} label="Day streak" />
-          </div>
-        )}
-      </StatsRow>
+        <RoadmapCard roadmap={stats.roadmap} />
 
-      {/* Recent Activity - Chips style */}
-      {recentActivity.length > 0 && (
-        <div className="mt-8">
-          <SectionLabel className="mb-4">RECENT</SectionLabel>
-          <div className="flex flex-wrap gap-3">
-            {recentActivity.map((event: TimelineEvent, i: number) => {
-              const e = event as Record<string, unknown>
-              const label = event.type === 'feature_ship' ? (e.name as string) :
-                           event.type === 'task_complete' ? (e.task as string) :
-                           event.type === 'task_start' ? (e.task as string) :
-                           event.type === 'sync' ? 'Sync' : event.type
-              const status = event.type === 'feature_ship' ? 'SHIP' :
-                            event.type === 'task_complete' ? 'DONE' :
-                            event.type === 'task_start' ? 'START' :
-                            event.type === 'sync' ? 'SYNC' : event.type.toUpperCase()
-              return (
-                <div
-                  key={i}
-                  className="group flex items-center gap-3 rounded-lg border-2 border-foreground/10 px-4 py-2 transition-all hover:border-foreground hover:bg-foreground hover:text-background cursor-default"
-                >
-                  <span className="text-sm font-bold text-foreground group-hover:text-background truncate max-w-[150px]">
-                    {label}
-                  </span>
-                  <span className="text-[9px] font-bold tracking-wider text-foreground/40 group-hover:text-background/60">
-                    {status}
-                  </span>
-                  {event.ts && (
-                    <span className="text-[9px] font-bold tracking-wider text-foreground/30 group-hover:text-background/40">
-                      {formatRelativeTime(event.ts)}
-                    </span>
-                  )}
-                </div>
-              )
-            })}
-          </div>
-        </div>
-      )}
+        {/* STREAK under VELOCITY */}
+        <StreakCard streak={streak} />
 
-      {/* Masonry Grid Layout */}
-      <div className="columns-1 md:columns-2 lg:columns-3 gap-8 mt-10 [column-fill:_balance]">
-        {/* Current Task */}
-        <div className="break-inside-avoid mb-8">
-          <SectionLabel className="mb-3">NOW</SectionLabel>
-          {stats.currentTask ? (
-            <div>
-              <div className="flex items-center gap-2 mb-2">
-                <div className="w-1.5 h-1.5 rounded-full bg-amber-500 animate-pulse" />
-                <span className="text-[10px] font-medium text-amber-600 uppercase tracking-wider">Working</span>
-              </div>
-              <p className="text-lg font-semibold leading-tight">{stats.currentTask.task}</p>
-              {stats.currentTask.duration && (
-                <p className="text-xs text-muted-foreground mt-2">{stats.currentTask.duration}</p>
-              )}
-            </div>
-          ) : (
-            <p className="text-sm text-muted-foreground">No active task</p>
-          )}
-        </div>
-
-        {/* Queue */}
-        {stats.queue.length > 0 && (
-          <div className="break-inside-avoid mb-8">
-            <div className="flex items-center gap-2 mb-3">
-              <SectionLabel>QUEUE</SectionLabel>
-              <span className="text-xs text-muted-foreground">{stats.queue.length}</span>
-            </div>
-            <div className="space-y-1.5">
-              {stats.queue.slice(0, 6).map((task: any, i: number) => (
-                <div key={i} className="flex items-center gap-2 group">
-                  <span className="text-[10px] text-muted-foreground w-3">{i + 1}</span>
-                  <p className="flex-1 text-sm truncate">{task.task}</p>
-                </div>
-              ))}
-              {stats.queue.length > 6 && (
-                <p className="text-[10px] text-muted-foreground">+{stats.queue.length - 6} more</p>
-              )}
-            </div>
-          </div>
-        )}
-
-        {/* Ships */}
-        {stats.shipped.length > 0 && (
-          <div className="break-inside-avoid mb-8">
-            <SectionLabel className="mb-3">SHIPS</SectionLabel>
-            <div className="space-y-3">
-              {stats.shipped.slice(0, 5).map((ship: any, i: number) => (
-                <div key={i}>
-                  <p className="text-sm font-medium">{ship.name}</p>
-                  <p className="text-[10px] text-muted-foreground">
-                    {new Date(ship.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
-                    {ship.version && ` · ${ship.version}`}
-                  </p>
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-
-        {/* Agents */}
-        {stats.agents.length > 0 && (
-          <div className="break-inside-avoid mb-8">
-            <div className="flex items-center gap-2 mb-3">
-              <SectionLabel>AGENTS</SectionLabel>
-              <span className="text-xs text-muted-foreground">{stats.agents.length}</span>
-            </div>
-            <div className="flex flex-wrap gap-1.5">
-              {stats.agents.slice(0, 10).map((agent: any) => (
-                <span
-                  key={agent.name}
-                  className="text-xs px-2 py-0.5 bg-foreground/5 rounded"
-                >
-                  {agent.name}
-                </span>
-              ))}
-            </div>
-          </div>
-        )}
-
-        {/* Ideas */}
-        {stats.ideas.pending.length > 0 && (
-          <div className="break-inside-avoid mb-8">
-            <div className="flex items-center gap-2 mb-3">
-              <SectionLabel>IDEAS</SectionLabel>
-              <span className="text-xs text-muted-foreground">{stats.ideas.pending.length}</span>
-            </div>
-            <div className="space-y-2">
-              {stats.ideas.pending.slice(0, 5).map((idea: any, i: number) => (
-                <div key={i} className="flex items-start gap-2">
-                  <Lightbulb className={cn(
-                    'w-3 h-3 mt-0.5 shrink-0',
-                    idea.impact === 'HIGH' ? 'text-foreground' : 'text-muted-foreground'
-                  )} />
-                  <p className="text-sm">{idea.title}</p>
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
+        {/* Row 2: QUEUE (1x2), SHIPS (1x2), IDEAS (1x1), AGENTS (1x1) */}
+        <QueueCard queue={stats.queue || []} />
+        <ShipsCard
+          ships={stats.shipped || []}
+          totalShips={stats.summary?.totalShipsEver || 0}
+        />
+        <IdeasCard ideas={stats.ideas?.pending || []} />
+        <AgentsCard agents={stats.agents || []} />
+      </BentoGrid>
 
-        {/* Roadmap */}
-        {stats.roadmap?.phases?.length > 0 && (
-          <div className="break-inside-avoid mb-8">
-            <div className="flex items-center justify-between mb-3">
-              <SectionLabel>ROADMAP</SectionLabel>
-              <span className="text-lg font-bold">{stats.roadmap.progress}%</span>
-            </div>
-            <div className="space-y-2">
-              {stats.roadmap.phases.filter((p: any) => (p.features || []).length > 0).slice(0, 4).map((phase: any) => (
-                <div key={phase.name}>
-                  <div className="flex items-center justify-between text-xs mb-1">
-                    <span>{phase.name}</span>
-                    <span className="text-muted-foreground">{phase.progress}%</span>
-                  </div>
-                  <div className="h-1 bg-muted rounded-full overflow-hidden">
-                    <div
-                      className={cn(
-                        'h-full rounded-full',
-                        phase.progress === 100 ? 'bg-emerald-500' : 'bg-foreground'
-                      )}
-                      style={{ width: `${phase.progress}%` }}
-                    />
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
+      {/* Activity Timeline */}
+      <div className="mt-8">
+        <ActivityTimeline timeline={stats.timeline || []} />
       </div>
 
       <div className="h-8" />