prjct-cli 0.11.4 → 0.11.5

package/packages/web/components/stats/ActivityTimeline.tsx

@@ -0,0 +1,201 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import { BentoCard } from './BentoCard'
+import { EmptyState } from './EmptyState'
+import { Activity, CheckCircle2, Rocket, Target, RefreshCw, ChevronDown } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import type { TimelineEvent } from '@/lib/parse-prjct-files'
+
+interface ActivityTimelineProps {
+  timeline: TimelineEvent[]
+  className?: string
+}
+
+function getEventIcon(type: string) {
+  switch (type) {
+    case 'task_complete':
+      return CheckCircle2
+    case 'task_start':
+      return Target
+    case 'feature_ship':
+      return Rocket
+    case 'sync':
+      return RefreshCw
+    default:
+      return Activity
+  }
+}
+
+function getEventColor(type: string) {
+  switch (type) {
+    case 'task_complete':
+      return 'text-emerald-500'
+    case 'task_start':
+      return 'text-amber-500'
+    case 'feature_ship':
+      return 'text-blue-500'
+    case 'sync':
+      return 'text-muted-foreground'
+    default:
+      return 'text-muted-foreground'
+  }
+}
+
+function getEventLabel(event: TimelineEvent): string {
+  const e = event as Record<string, unknown>
+  switch (event.type) {
+    case 'task_complete':
+      return (e.task as string) || 'Task completed'
+    case 'task_start':
+      return (e.task as string) || 'Task started'
+    case 'feature_ship':
+      return (e.name as string) || 'Feature shipped'
+    case 'sync':
+      return 'Project synced'
+    default:
+      return event.type
+  }
+}
+
+function getEventBadge(type: string): string {
+  switch (type) {
+    case 'task_complete':
+      return 'DONE'
+    case 'task_start':
+      return 'START'
+    case 'feature_ship':
+      return 'SHIP'
+    case 'sync':
+      return 'SYNC'
+    default:
+      return type.toUpperCase()
+  }
+}
+
+function formatTime(dateString: string): string {
+  const date = new Date(dateString)
+  return date.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true })
+}
+
+function formatDate(dateString: string): string {
+  const date = new Date(dateString)
+  const today = new Date()
+  const yesterday = new Date(today)
+  yesterday.setDate(yesterday.getDate() - 1)
+
+  if (date.toDateString() === today.toDateString()) return 'Today'
+  if (date.toDateString() === yesterday.toDateString()) return 'Yesterday'
+
+  return date.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' })
+}
+
+// Group events by date
+function groupEventsByDate(events: TimelineEvent[]): Map<string, TimelineEvent[]> {
+  const groups = new Map<string, TimelineEvent[]>()
+
+  events.forEach(event => {
+    if (!event.ts) return
+    const dateKey = event.ts.split('T')[0]
+    const existing = groups.get(dateKey) || []
+    groups.set(dateKey, [...existing, event])
+  })
+
+  return groups
+}
+
+export function ActivityTimeline({ timeline, className }: ActivityTimelineProps) {
+  const [showAll, setShowAll] = useState(false)
+
+  const displayEvents = showAll ? timeline.slice(0, 20) : timeline.slice(0, 8)
+  const groupedEvents = useMemo(() => groupEventsByDate(displayEvents), [displayEvents])
+  const hasMore = timeline.length > displayEvents.length
+
+  return (
+    <BentoCard
+      size="full"
+      title="Recent Activity"
+      icon={Activity}
+      count={timeline.length > 0 ? `${timeline.length} events` : undefined}
+      className={className}
+    >
+      {timeline.length === 0 ? (
+        <EmptyState
+          icon={Activity}
+          title="No recent activity"
+          description="Activity will appear as you work"
+          compact
+        />
+      ) : (
+        <div className="space-y-4">
+          {Array.from(groupedEvents.entries()).map(([dateKey, events]) => (
+            <div key={dateKey}>
+              {/* Date header */}
+              <p className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground mb-2">
+                {formatDate(dateKey + 'T00:00:00')}
+              </p>
+
+              {/* Events for this date */}
+              <div className="space-y-1">
+                {events.map((event, i) => {
+                  const Icon = getEventIcon(event.type)
+                  const e = event as Record<string, unknown>
+
+                  const duration = typeof e.duration === 'string' ? e.duration : null
+
+                  return (
+                    <div
+                      key={i}
+                      className="flex items-center gap-3 py-1.5 px-2 -mx-2 rounded-md hover:bg-muted/50 transition-colors group"
+                    >
+                      {/* Time */}
+                      {event.ts && (
+                        <span className="text-[10px] text-muted-foreground w-14 shrink-0 tabular-nums">
+                          {formatTime(event.ts)}
+                        </span>
+                      )}
+
+                      {/* Icon */}
+                      <Icon className={cn('h-3.5 w-3.5 shrink-0', getEventColor(event.type))} />
+
+                      {/* Label */}
+                      <span className="text-sm truncate flex-1 group-hover:text-foreground transition-colors">
+                        {getEventLabel(event)}
+                      </span>
+
+                      {/* Badge */}
+                      <span className="text-[9px] font-bold tracking-wider text-muted-foreground shrink-0">
+                        {getEventBadge(event.type)}
+                      </span>
+
+                      {/* Duration if available */}
+                      {duration && (
+                        <span className="text-[10px] text-muted-foreground shrink-0">
+                          {duration}
+                        </span>
+                      )}
+                    </div>
+                  )
+                })}
+              </div>
+            </div>
+          ))}
+
+          {/* Load more button */}
+          {hasMore && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setShowAll(!showAll)}
+              className="w-full text-muted-foreground"
+            >
+              <ChevronDown className={cn('h-4 w-4 mr-1 transition-transform', showAll && 'rotate-180')} />
+              {showAll ? 'Show less' : `Show ${timeline.length - 8} more`}
+            </Button>
+          )}
+        </div>
+      )}
+    </BentoCard>
+  )
+}

package/packages/web/components/stats/AgentsCard.tsx

@@ -0,0 +1,56 @@
+'use client'
+
+import { BentoCard } from './BentoCard'
+import { EmptyState } from './EmptyState'
+import { Bot } from 'lucide-react'
+import { Badge } from '@/components/ui/badge'
+
+interface Agent {
+  name: string
+  description?: string
+}
+
+interface AgentsCardProps {
+  agents: Agent[]
+  className?: string
+}
+
+export function AgentsCard({ agents, className }: AgentsCardProps) {
+  const displayAgents = agents.slice(0, 8)
+
+  return (
+    <BentoCard
+      size="1x1"
+      title="Agents"
+      icon={Bot}
+      count={agents.length}
+      className={className}
+    >
+      {agents.length === 0 ? (
+        <EmptyState
+          icon={Bot}
+          title="No agents"
+          description="Run /p:sync to generate"
+          compact
+        />
+      ) : (
+        <div className="flex flex-wrap gap-1.5">
+          {displayAgents.map((agent) => (
+            <Badge
+              key={agent.name}
+              variant="secondary"
+              className="text-xs px-2 py-0.5 font-mono"
+            >
+              @{agent.name}
+            </Badge>
+          ))}
+          {agents.length > 8 && (
+            <Badge variant="outline" className="text-xs px-2 py-0.5">
+              +{agents.length - 8}
+            </Badge>
+          )}
+        </div>
+      )}
+    </BentoCard>
+  )
+}

package/packages/web/components/stats/BentoCard.tsx

@@ -0,0 +1,88 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+import type { LucideIcon } from 'lucide-react'
+
+export type BentoSize = '1x1' | '1x2' | '2x1' | '2x2' | 'full'
+
+const sizeClasses: Record<BentoSize, string> = {
+  '1x1': 'col-span-1 row-span-1',
+  '1x2': 'col-span-1 row-span-2',
+  '2x1': 'col-span-2 row-span-1',
+  '2x2': 'col-span-2 row-span-2',
+  'full': 'col-span-full',
+}
+
+export interface BentoCardProps {
+  size?: BentoSize
+  title?: string
+  count?: number | string
+  icon?: LucideIcon
+  accentColor?: 'default' | 'success' | 'warning' | 'destructive'
+  className?: string
+  headerClassName?: string
+  children: React.ReactNode
+}
+
+const accentStyles: Record<NonNullable<BentoCardProps['accentColor']>, string> = {
+  default: '',
+  success: 'border-emerald-500/20 bg-emerald-500/5',
+  warning: 'border-amber-500/20 bg-amber-500/5',
+  destructive: 'border-destructive/20 bg-destructive/5',
+}
+
+export function BentoCard({
+  size = '1x1',
+  title,
+  count,
+  icon: Icon,
+  accentColor = 'default',
+  className,
+  headerClassName,
+  children,
+}: BentoCardProps) {
+  return (
+    <div
+      className={cn(
+        'relative overflow-hidden rounded-xl border bg-card p-4 transition-all duration-200',
+        'hover:shadow-md hover:border-foreground/20',
+        sizeClasses[size],
+        accentStyles[accentColor],
+        className
+      )}
+    >
+      {(title || count !== undefined || Icon) && (
+        <div className={cn('flex items-center justify-between mb-3', headerClassName)}>
+          <div className="flex items-center gap-2">
+            {Icon && <Icon className="h-3.5 w-3.5 text-muted-foreground" />}
+            {title && (
+              <span className="text-[10px] font-bold uppercase tracking-[0.15em] text-muted-foreground">
+                {title}
+              </span>
+            )}
+          </div>
+          {count !== undefined && (
+            <span className="text-xs font-medium text-muted-foreground tabular-nums">
+              {count}
+            </span>
+          )}
+        </div>
+      )}
+      {children}
+    </div>
+  )
+}
+
+export function BentoCardSkeleton({ size = '1x1' }: { size?: BentoSize }) {
+  return (
+    <div
+      className={cn(
+        'rounded-xl border bg-card p-4 animate-pulse',
+        sizeClasses[size]
+      )}
+    >
+      <div className="h-3 w-16 bg-muted rounded mb-3" />
+      <div className="h-6 w-24 bg-muted rounded mb-2" />
+      <div className="h-3 w-full bg-muted rounded" />
+    </div>
+  )
+}

package/packages/web/components/stats/BentoGrid.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+interface BentoGridProps {
+  className?: string
+  children: React.ReactNode
+}
+
+export function BentoGrid({ className, children }: BentoGridProps) {
+  return (
+    <div
+      className={cn(
+        'grid gap-4',
+        'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
+        'auto-rows-[minmax(140px,auto)]',
+        className
+      )}
+    >
+      {children}
+    </div>
+  )
+}

package/packages/web/components/stats/EmptyState.tsx

@@ -0,0 +1,67 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import { Copy } from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
+
+interface EmptyStateProps {
+  icon: LucideIcon
+  title: string
+  description?: string
+  command?: string
+  className?: string
+  compact?: boolean
+}
+
+export function EmptyState({
+  icon: Icon,
+  title,
+  description,
+  command,
+  className,
+  compact = false,
+}: EmptyStateProps) {
+  const handleCopy = () => {
+    if (command) {
+      navigator.clipboard.writeText(command)
+    }
+  }
+
+  if (compact) {
+    return (
+      <div className={cn('flex items-center gap-2 text-muted-foreground', className)}>
+        <Icon className="h-4 w-4" />
+        <span className="text-sm">{title}</span>
+        {command && (
+          <button
+            onClick={handleCopy}
+            className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-muted text-xs font-mono hover:bg-muted/80"
+          >
+            {command}
+          </button>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn('flex flex-col items-center justify-center text-center py-4', className)}>
+      <div className="w-10 h-10 rounded-full bg-muted flex items-center justify-center mb-3">
+        <Icon className="h-5 w-5 text-muted-foreground" />
+      </div>
+      <p className="text-sm font-medium text-muted-foreground">{title}</p>
+      {description && (
+        <p className="text-xs text-muted-foreground/70 mt-1">{description}</p>
+      )}
+      {command && (
+        <button
+          onClick={handleCopy}
+          className="mt-2 inline-flex items-center gap-1.5 px-2 py-1 rounded-md bg-muted text-xs font-mono text-muted-foreground hover:bg-muted/80 hover:text-foreground transition-colors group"
+        >
+          {command}
+          <Copy className="h-3 w-3 opacity-0 group-hover:opacity-100 transition-opacity" />
+        </button>
+      )}
+    </div>
+  )
+}

package/packages/web/components/stats/HeroSection.tsx

@@ -0,0 +1,172 @@
+'use client'
+
+import { useEffect, useState, useMemo } from 'react'
+import Link from 'next/link'
+import { cn } from '@/lib/utils'
+import { ArrowLeft, TrendingUp, TrendingDown } from 'lucide-react'
+import { ProgressRing } from './ProgressRing'
+import { SparklineChart } from './SparklineChart'
+import type { TimelineEvent } from '@/lib/parse-prjct-files'
+
+interface HeroSectionProps {
+  projectId: string
+  projectName: string
+  tasksCompleted: number
+  healthScore: number
+  velocity: number
+  velocityChange: number
+  insightMessage: string
+  timeline?: TimelineEvent[]
+}
+
+// Animated count-up hook
+function useCountUp(target: number, duration: number = 800) {
+  const [count, setCount] = useState(0)
+
+  useEffect(() => {
+    if (target === 0) {
+      setCount(0)
+      return
+    }
+
+    let start = 0
+    const startTime = performance.now()
+
+    const animate = (currentTime: number) => {
+      const elapsed = currentTime - startTime
+      const progress = Math.min(elapsed / duration, 1)
+
+      // Easing function (ease-out cubic)
+      const easeOut = 1 - Math.pow(1 - progress, 3)
+      const current = Math.floor(easeOut * target)
+
+      setCount(current)
+
+      if (progress < 1) {
+        requestAnimationFrame(animate)
+      } else {
+        setCount(target)
+      }
+    }
+
+    requestAnimationFrame(animate)
+  }, [target, duration])
+
+  return count
+}
+
+// Calculate 7-day activity data from timeline
+function getWeeklyActivityData(timeline: TimelineEvent[]): number[] {
+  const today = new Date()
+  const counts: number[] = []
+
+  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)
+    }).length
+
+    counts.push(count)
+  }
+
+  return counts
+}
+
+export function HeroSection({
+  projectId,
+  projectName,
+  tasksCompleted,
+  healthScore,
+  velocity,
+  velocityChange,
+  insightMessage,
+  timeline = [],
+}: HeroSectionProps) {
+  const animatedCount = useCountUp(tasksCompleted)
+  const weeklyData = useMemo(() => getWeeklyActivityData(timeline), [timeline])
+
+  const healthColor = healthScore >= 70 ? 'success' : healthScore >= 40 ? 'warning' : 'destructive'
+
+  return (
+    <div className="relative mb-8">
+      {/* Background gradient based on health */}
+      <div
+        className={cn(
+          'absolute inset-0 -m-8 rounded-2xl opacity-30 blur-3xl transition-colors duration-1000',
+          healthScore >= 70 && 'bg-gradient-to-br from-emerald-500/20 to-transparent',
+          healthScore >= 40 && healthScore < 70 && 'bg-gradient-to-br from-amber-500/20 to-transparent',
+          healthScore < 40 && 'bg-gradient-to-br from-destructive/20 to-transparent'
+        )}
+      />
+
+      <div className="relative flex items-start justify-between">
+        {/* Left: Health ring + Main metric */}
+        <div className="flex items-start gap-6">
+          <ProgressRing
+            value={healthScore}
+            size="xl"
+            accentColor={healthColor}
+          />
+
+          <div>
+            {/* Tasks completed - big number */}
+            <div className="flex items-baseline gap-3">
+              <span className="text-7xl font-bold tracking-tighter tabular-nums">
+                {animatedCount}
+              </span>
+              <span className="text-lg text-muted-foreground">tasks completed</span>
+            </div>
+
+            {/* Velocity trend */}
+            {velocityChange !== 0 && (
+              <div className="flex items-center gap-2 mt-2">
+                <span
+                  className={cn(
+                    'inline-flex items-center gap-1 text-sm font-medium px-2 py-0.5 rounded-md',
+                    velocityChange >= 0
+                      ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+                      : '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">vs last week</span>
+              </div>
+            )}
+
+            {/* Insight message */}
+            <p className="text-muted-foreground mt-3 max-w-md">{insightMessage}</p>
+          </div>
+        </div>
+
+        {/* Right: Sparkline + Navigation */}
+        <div className="flex flex-col items-end gap-4">
+          <Link
+            href={`/project/${projectId}`}
+            className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
+          >
+            <ArrowLeft className="w-4 h-4" />
+            {projectName}
+          </Link>
+
+          {/* 7-day sparkline */}
+          <div className="w-32">
+            <p className="text-[10px] uppercase tracking-wider text-muted-foreground mb-1 text-right">
+              7-day activity
+            </p>
+            <SparklineChart data={weeklyData} height={40} />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/packages/web/components/stats/IdeasCard.tsx

@@ -0,0 +1,59 @@
+'use client'
+
+import { BentoCard } from './BentoCard'
+import { EmptyState } from './EmptyState'
+import { Lightbulb } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface Idea {
+  title: string
+  impact?: string
+}
+
+interface IdeasCardProps {
+  ideas: Idea[]
+  className?: string
+}
+
+export function IdeasCard({ ideas, className }: IdeasCardProps) {
+  const displayIdeas = ideas.slice(0, 4)
+  const highImpactCount = ideas.filter(i => i.impact === 'HIGH').length
+
+  return (
+    <BentoCard
+      size="1x1"
+      title="Ideas"
+      icon={Lightbulb}
+      count={ideas.length}
+      className={className}
+    >
+      {ideas.length === 0 ? (
+        <EmptyState
+          icon={Lightbulb}
+          title="No ideas yet"
+          command="/p:idea"
+          compact
+        />
+      ) : (
+        <div className="space-y-1.5">
+          {displayIdeas.map((idea, i) => (
+            <div key={i} className="flex items-start gap-2">
+              <Lightbulb
+                className={cn(
+                  'h-3 w-3 mt-0.5 shrink-0',
+                  idea.impact === 'HIGH' ? 'text-amber-500' : 'text-muted-foreground'
+                )}
+              />
+              <p className="text-sm truncate">{idea.title}</p>
+            </div>
+          ))}
+          {highImpactCount > 0 && (
+            <p className="text-[10px] text-amber-600 dark:text-amber-400 mt-2 pl-5 font-medium">
+              {highImpactCount} high impact
+            </p>
+          )}
+        </div>
+      )}
+    </BentoCard>
+  )
+}