prjct-cli 0.11.4 → 0.12.0

package/packages/web/components/HealthGradientBackground/HealthGradientBackground.utils.ts

@@ -0,0 +1,13 @@
+import type { AccentColor } from './HealthGradientBackground.types'
+
+export function getHealthColor(score: number): AccentColor {
+  if (score >= 70) return 'success'
+  if (score >= 40) return 'warning'
+  return 'destructive'
+}
+
+export function getHealthGradient(score: number): string {
+  if (score >= 70) return 'bg-gradient-to-br from-emerald-500/20 to-transparent'
+  if (score >= 40) return 'bg-gradient-to-br from-amber-500/20 to-transparent'
+  return 'bg-gradient-to-br from-destructive/20 to-transparent'
+}

package/packages/web/components/HealthGradientBackground/index.ts

@@ -0,0 +1,2 @@
+export { HealthGradientBackground } from './HealthGradientBackground'
+export type { HealthGradientBackgroundProps } from './HealthGradientBackground.types'

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

@@ -0,0 +1,55 @@
+'use client'
+
+import { ProgressRing } from '@/components/ProgressRing'
+import { BackLink } from '@/components/BackLink'
+import { TasksCounter } from '@/components/TasksCounter'
+import { VelocityBadge } from '@/components/VelocityBadge'
+import { InsightMessage } from '@/components/InsightMessage'
+import { WeeklySparkline } from '@/components/WeeklySparkline'
+import { HealthGradientBackground } from '@/components/HealthGradientBackground'
+import { useCountUp, useWeeklyActivity } from './hooks'
+import { getHealthColor } from './HeroSection.utils'
+import type { HeroProps } from './HeroSection.types'
+
+export function HeroSection({
+  projectId,
+  projectName,
+  tasksCompleted,
+  healthScore,
+  velocityChange,
+  insightMessage,
+  timeline = [],
+}: HeroProps) {
+  const animatedCount = useCountUp(tasksCompleted)
+  const weeklyData = useWeeklyActivity(timeline)
+  const healthColor = getHealthColor(healthScore)
+
+  return (
+    <div className="relative mb-6 md:mb-8">
+      <HealthGradientBackground score={healthScore} />
+      <BackLink projectId={projectId} projectName={projectName} className="md:hidden mb-4" />
+
+      <div className="relative flex flex-col md:flex-row md:items-start md:justify-between gap-4 md:gap-0">
+        <div className="flex items-center md:items-start gap-4 md:gap-6">
+          <ProgressRing
+            value={healthScore}
+            size="xl"
+            accentColor={healthColor}
+            className="shrink-0"
+          />
+
+          <div className="flex-1 min-w-0">
+            <TasksCounter count={animatedCount} />
+            <VelocityBadge change={velocityChange} />
+            <InsightMessage message={insightMessage} />
+          </div>
+        </div>
+
+        <div className="flex flex-col items-start md:items-end gap-3 md:gap-4">
+          <BackLink projectId={projectId} projectName={projectName} className="hidden md:flex" />
+          <WeeklySparkline data={weeklyData} />
+        </div>
+      </div>
+    </div>
+  )
+}

package/packages/web/components/HeroSection/HeroSection.types.ts

@@ -0,0 +1,14 @@
+import type { TimelineEvent } from '@/lib/parse-prjct-files'
+
+export type { TimelineEvent }
+
+export interface HeroProps {
+  projectId: string
+  projectName: string
+  tasksCompleted: number
+  healthScore: number
+  velocity: number
+  velocityChange: number
+  insightMessage: string
+  timeline?: TimelineEvent[]
+}

package/packages/web/components/HeroSection/HeroSection.utils.ts

@@ -0,0 +1,7 @@
+export type AccentColor = 'default' | 'success' | 'warning' | 'destructive'
+
+export function getHealthColor(score: number): AccentColor {
+  if (score >= 70) return 'success'
+  if (score >= 40) return 'warning'
+  return 'destructive'
+}

package/packages/web/components/HeroSection/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useCountUp } from './useCountUp'
+export { useWeeklyActivity } from './useWeeklyActivity'

package/packages/web/components/HeroSection/hooks/useCountUp.ts

@@ -0,0 +1,45 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+
+export function useCountUp(target: number, duration: number = 800): number {
+  const [count, setCount] = useState(0)
+  const prevTargetRef = useRef(target)
+
+  useEffect(() => {
+    if (target === 0) {
+      // Only reset if target changed to 0 (not if it was already 0)
+      if (prevTargetRef.current !== 0) {
+        // Defer state update to avoid synchronous setState in effect
+        const timeoutId = setTimeout(() => setCount(0), 0)
+        prevTargetRef.current = target
+        return () => clearTimeout(timeoutId)
+      }
+      prevTargetRef.current = target
+      return
+    }
+
+    prevTargetRef.current = target
+
+    const startTime = performance.now()
+
+    const animate = (currentTime: number) => {
+      const elapsed = currentTime - startTime
+      const progress = Math.min(elapsed / duration, 1)
+      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
+}

package/packages/web/components/HeroSection/hooks/useWeeklyActivity.ts

@@ -0,0 +1,18 @@
+'use client'
+
+import { useMemo } from 'react'
+import type { TimelineEvent } from '../HeroSection.types'
+
+export function useWeeklyActivity(timeline: TimelineEvent[]): number[] {
+  return useMemo(() => {
+    const today = new Date()
+
+    return Array.from({ length: 7 }, (_, i) => {
+      const date = new Date(today)
+      date.setDate(date.getDate() - (6 - i))
+      const dateStr = date.toISOString().split('T')[0]
+
+      return timeline.filter(e => e.ts?.startsWith(dateStr)).length
+    })
+  }, [timeline])
+}

package/packages/web/components/HeroSection/index.ts

@@ -0,0 +1,2 @@
+export { HeroSection } from './HeroSection'
+export type { HeroProps } from './HeroSection.types'

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

@@ -0,0 +1,48 @@
+import { BentoCard } from '@/components/BentoCard'
+import { EmptyState } from '@/components/EmptyState'
+import { Lightbulb } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import type { IdeasCardProps } from './IdeasCard.types'
+
+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>
+  )
+}

package/packages/web/components/IdeasCard/IdeasCard.types.ts

@@ -0,0 +1,9 @@
+export interface Idea {
+  title: string
+  impact?: string
+}
+
+export interface IdeasCardProps {
+  ideas: Idea[]
+  className?: string
+}

package/packages/web/components/IdeasCard/index.ts

@@ -0,0 +1,2 @@
+export { IdeasCard } from './IdeasCard'
+export type { IdeasCardProps } from './IdeasCard.types'

package/packages/web/components/InsightMessage/InsightMessage.tsx

@@ -0,0 +1,9 @@
+import type { InsightMessageProps } from './InsightMessage.types'
+
+export function InsightMessage({ message }: InsightMessageProps) {
+  return (
+    <p className="text-sm md:text-base text-muted-foreground mt-2 md:mt-3 max-w-md">
+      {message}
+    </p>
+  )
+}

package/packages/web/components/InsightMessage/InsightMessage.types.ts

@@ -0,0 +1,3 @@
+export interface InsightMessageProps {
+  message: string
+}

package/packages/web/components/InsightMessage/index.ts

@@ -0,0 +1,2 @@
+export { InsightMessage } from './InsightMessage'
+export type { InsightMessageProps } from './InsightMessage.types'

package/packages/web/components/Logo/index.ts

@@ -0,0 +1 @@
+export { Logo } from './Logo'

package/packages/web/components/MarkdownContent/index.ts

@@ -0,0 +1 @@
+export { MarkdownContent } from './MarkdownContent'

package/packages/web/components/NowCard/NowCard.tsx

@@ -0,0 +1,93 @@
+import { BentoCard } from '@/components/BentoCard'
+import { EmptyState } from '@/components/EmptyState'
+import { Target, Clock, Bot, Pause } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import type { NowCardProps } from './NowCard.types'
+
+export function NowCard({ currentTask, className }: NowCardProps) {
+  return (
+    <BentoCard
+      size="2x2"
+      title="Now"
+      icon={Target}
+      accentColor={currentTask ? 'warning' : 'default'}
+      className={className}
+    >
+      {currentTask ? (
+        <div className="flex flex-col h-full">
+          <div className="flex items-center gap-2 mb-3">
+            {currentTask.pausedAt ? (
+              <>
+                <Pause className="w-3 h-3 text-muted-foreground" />
+                <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider">
+                  Paused
+                </span>
+              </>
+            ) : (
+              <>
+                <div className="w-2 h-2 rounded-full bg-amber-500 animate-pulse" />
+                <span className="text-[10px] font-semibold text-amber-600 dark:text-amber-400 uppercase tracking-wider">
+                  Working
+                </span>
+              </>
+            )}
+          </div>
+
+          <p className="text-xl font-semibold leading-tight flex-1">
+            {currentTask.task}
+          </p>
+
+          {currentTask.agent && (
+            <div className="flex items-center gap-2 mt-2 text-xs text-muted-foreground">
+              <Bot className="h-3 w-3" />
+              <span className="font-mono">{currentTask.agent}</span>
+              {currentTask.agentConfidence !== undefined && (
+                <span className={cn(
+                  'px-1.5 py-0.5 rounded text-[10px]',
+                  currentTask.agentConfidence >= 0.8 ? 'bg-emerald-500/10 text-emerald-600' :
+                  currentTask.agentConfidence >= 0.5 ? 'bg-amber-500/10 text-amber-600' :
+                  'bg-muted text-muted-foreground'
+                )}>
+                  {Math.round(currentTask.agentConfidence * 100)}% confidence
+                </span>
+              )}
+            </div>
+          )}
+
+          <div className="flex items-center gap-4 mt-3 text-muted-foreground">
+            {currentTask.duration && (
+              <div className="flex items-center gap-1.5">
+                <Clock className="h-3.5 w-3.5" />
+                <span className="text-sm">{currentTask.duration}</span>
+              </div>
+            )}
+            {currentTask.estimatedDuration && (
+              <span className="text-xs">
+                / est. {currentTask.estimatedDuration}
+              </span>
+            )}
+          </div>
+
+          <div className="mt-4">
+            <div className="h-1.5 bg-muted rounded-full overflow-hidden">
+              <div
+                className={cn(
+                  "h-full rounded-full",
+                  currentTask.pausedAt ? "bg-muted-foreground" : "bg-amber-500 animate-pulse"
+                )}
+                style={{ width: '60%' }}
+              />
+            </div>
+          </div>
+        </div>
+      ) : (
+        <EmptyState
+          icon={Target}
+          title="No active task"
+          description="Start working on something"
+          command="/p:now"
+        />
+      )}
+    </BentoCard>
+  )
+}

package/packages/web/components/NowCard/NowCard.types.ts

@@ -0,0 +1,15 @@
+export interface CurrentTask {
+  task: string
+  startedAt?: string
+  agent?: string
+  agentConfidence?: number
+  estimatedDuration?: string
+  pausedAt?: string
+  pauseReason?: string
+  duration?: string
+}
+
+export interface NowCardProps {
+  currentTask: CurrentTask | null
+  className?: string
+}

package/packages/web/components/NowCard/index.ts

@@ -0,0 +1,2 @@
+export { NowCard } from './NowCard'
+export type { NowCardProps } from './NowCard.types'

package/packages/web/components/ProgressRing/ProgressRing.constants.ts

@@ -0,0 +1,20 @@
+import type { ProgressRingSize, AccentColor } from './ProgressRing.types'
+
+export const PROGRESS_RING_SIZES: Record<ProgressRingSize, {
+  container: string
+  text: string
+  viewBox: number
+  radius: number
+}> = {
+  sm: { container: 'h-8 w-8', text: 'text-[10px]', viewBox: 36, radius: 14 },
+  md: { container: 'h-12 w-12', text: 'text-xs', viewBox: 36, radius: 14 },
+  lg: { container: 'h-16 w-16', text: 'text-sm', viewBox: 36, radius: 14 },
+  xl: { container: 'h-20 w-20', text: 'text-base', viewBox: 36, radius: 14 },
+}
+
+export const PROGRESS_RING_COLOR_STYLES: Record<AccentColor, string> = {
+  default: 'text-foreground',
+  success: 'text-emerald-500',
+  warning: 'text-amber-500',
+  destructive: 'text-destructive',
+}

package/packages/web/components/ProgressRing/ProgressRing.tsx

@@ -0,0 +1,51 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import { PROGRESS_RING_SIZES, PROGRESS_RING_COLOR_STYLES } from './ProgressRing.constants'
+import type { ProgressRingProps } from './ProgressRing.types'
+
+export function ProgressRing({
+  value,
+  size = 'md',
+  showValue = true,
+  strokeWidth = 3,
+  className,
+  accentColor = 'default',
+}: ProgressRingProps) {
+  const { container, text, viewBox, radius } = PROGRESS_RING_SIZES[size]
+  const circumference = 2 * Math.PI * radius
+  const strokeDashoffset = circumference - (value / 100) * circumference
+
+  return (
+    <div className={cn('relative', container, className)}>
+      <svg className="h-full w-full -rotate-90" viewBox={`0 0 ${viewBox} ${viewBox}`}>
+        <circle
+          cx={viewBox / 2}
+          cy={viewBox / 2}
+          r={radius}
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={strokeWidth}
+          className="text-foreground/10"
+        />
+        <circle
+          cx={viewBox / 2}
+          cy={viewBox / 2}
+          r={radius}
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={strokeWidth}
+          strokeDasharray={circumference}
+          strokeDashoffset={strokeDashoffset}
+          strokeLinecap="round"
+          className={cn('transition-all duration-700 ease-out', PROGRESS_RING_COLOR_STYLES[accentColor])}
+        />
+      </svg>
+      {showValue && (
+        <span className={cn('absolute inset-0 flex items-center justify-center font-bold tabular-nums', text)}>
+          {value}
+        </span>
+      )}
+    </div>
+  )
+}

package/packages/web/components/ProgressRing/ProgressRing.types.ts

@@ -0,0 +1,11 @@
+export type ProgressRingSize = 'sm' | 'md' | 'lg' | 'xl'
+export type AccentColor = 'default' | 'success' | 'warning' | 'destructive'
+
+export interface ProgressRingProps {
+  value: number
+  size?: ProgressRingSize
+  showValue?: boolean
+  strokeWidth?: number
+  className?: string
+  accentColor?: AccentColor
+}

package/packages/web/components/ProgressRing/index.ts

@@ -0,0 +1,2 @@
+export { ProgressRing } from './ProgressRing'
+export type { ProgressRingProps } from './ProgressRing.types'

package/packages/web/components/ProjectAvatar/index.ts

@@ -0,0 +1 @@
+export { ProjectAvatar } from './ProjectAvatar'

package/packages/web/components/Providers/index.ts

@@ -0,0 +1 @@
+export { Providers } from './Providers'

package/packages/web/components/QueueCard/QueueCard.tsx

@@ -0,0 +1,72 @@
+import { BentoCard } from '@/components/BentoCard'
+import { EmptyState } from '@/components/EmptyState'
+import { ListTodo, Bot } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { getPriorityColor } from './QueueCard.utils'
+import type { QueueCardProps } from './QueueCard.types'
+
+export function QueueCard({ queue, className }: QueueCardProps) {
+  const displayItems = queue.slice(0, 5)
+  const remaining = queue.length - 5
+
+  return (
+    <BentoCard
+      size="1x2"
+      title="Queue"
+      icon={ListTodo}
+      count={queue.length}
+      className={className}
+    >
+      {queue.length === 0 ? (
+        <EmptyState
+          icon={ListTodo}
+          title="Queue empty"
+          description="Plan your next tasks"
+          command="/p:next"
+          compact
+        />
+      ) : (
+        <div className="space-y-2">
+          {displayItems.map((item, i) => {
+            const priorityColor = getPriorityColor(item.priority)
+            return (
+              <div key={i} className="flex items-start gap-2 group">
+                <span className={cn(
+                  "text-[10px] font-medium w-4 shrink-0 pt-0.5 tabular-nums",
+                  priorityColor
+                )}>
+                  {i + 1}
+                </span>
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm leading-tight truncate group-hover:text-foreground transition-colors">
+                    {item.task}
+                  </p>
+                  {(item.suggestedAgent || item.estimatedDuration) && (
+                    <div className="flex items-center gap-2 mt-0.5">
+                      {item.suggestedAgent && (
+                        <span className="inline-flex items-center gap-0.5 text-[9px] text-muted-foreground">
+                          <Bot className="h-2.5 w-2.5" />
+                          {item.suggestedAgent}
+                        </span>
+                      )}
+                      {item.estimatedDuration && (
+                        <span className="text-[9px] text-muted-foreground">
+                          ~{item.estimatedDuration}
+                        </span>
+                      )}
+                    </div>
+                  )}
+                </div>
+              </div>
+            )
+          })}
+          {remaining > 0 && (
+            <p className="text-[10px] text-muted-foreground mt-2 pl-6">
+              +{remaining} more
+            </p>
+          )}
+        </div>
+      )}
+    </BentoCard>
+  )
+}

package/packages/web/components/QueueCard/QueueCard.types.ts

@@ -0,0 +1,11 @@
+export interface QueueItem {
+  task: string
+  priority?: 'low' | 'medium' | 'high' | 'critical' | number
+  suggestedAgent?: string
+  estimatedDuration?: string
+}
+
+export interface QueueCardProps {
+  queue: QueueItem[]
+  className?: string
+}

package/packages/web/components/QueueCard/QueueCard.utils.ts

@@ -0,0 +1,12 @@
+export function getPriorityColor(priority?: 'low' | 'medium' | 'high' | 'critical' | number): string {
+  if (typeof priority === 'string') {
+    const colors: Record<string, string> = {
+      critical: 'text-red-500',
+      high: 'text-amber-500',
+      medium: 'text-blue-500',
+      low: 'text-muted-foreground',
+    }
+    return colors[priority] ?? 'text-muted-foreground'
+  }
+  return 'text-muted-foreground'
+}

package/packages/web/components/QueueCard/index.ts

@@ -0,0 +1,2 @@
+export { QueueCard } from './QueueCard'
+export type { QueueCardProps } from './QueueCard.types'

package/packages/web/components/RoadmapCard/RoadmapCard.tsx

@@ -0,0 +1,77 @@
+import { BentoCard } from '@/components/BentoCard'
+import { EmptyState } from '@/components/EmptyState'
+import { Map } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import type { RoadmapCardProps } from './RoadmapCard.types'
+
+export function RoadmapCard({ roadmap, className }: RoadmapCardProps) {
+  const hasPhases = roadmap?.phases && roadmap.phases.length > 0
+
+  return (
+    <BentoCard
+      size="2x2"
+      title="Roadmap"
+      icon={Map}
+      count={hasPhases ? `${roadmap.progress}%` : undefined}
+      className={className}
+    >
+      {!hasPhases ? (
+        <EmptyState
+          icon={Map}
+          title="No roadmap yet"
+          description="Plan your features"
+          command="/p:feature"
+        />
+      ) : (
+        <div className="flex flex-col h-full">
+          <div className="mb-4">
+            <div className="flex items-center justify-between text-xs mb-1.5">
+              <span className="text-muted-foreground">Overall progress</span>
+              <span className="font-bold tabular-nums">{roadmap.progress}%</span>
+            </div>
+            <div className="h-2 bg-muted rounded-full overflow-hidden">
+              <div
+                className={cn(
+                  'h-full rounded-full transition-all duration-500',
+                  roadmap.progress === 100 ? 'bg-emerald-500' : 'bg-foreground'
+                )}
+                style={{ width: `${roadmap.progress}%` }}
+              />
+            </div>
+          </div>
+
+          <div className="space-y-3 flex-1">
+            {roadmap.phases
+              .filter(p => (p.features || []).length > 0)
+              .slice(0, 4)
+              .map((phase) => (
+                <div key={phase.name}>
+                  <div className="flex items-center justify-between text-xs mb-1">
+                    <span className="font-medium truncate">{phase.name}</span>
+                    <span className="text-muted-foreground tabular-nums shrink-0 ml-2">
+                      {phase.progress}%
+                    </span>
+                  </div>
+                  <div className="h-1.5 bg-muted rounded-full overflow-hidden">
+                    <div
+                      className={cn(
+                        'h-full rounded-full transition-all duration-300',
+                        phase.progress === 100 ? 'bg-emerald-500' : 'bg-foreground/70'
+                      )}
+                      style={{ width: `${phase.progress}%` }}
+                    />
+                  </div>
+                </div>
+              ))}
+          </div>
+
+          {roadmap.phases.length > 0 && (
+            <p className="text-[10px] text-muted-foreground mt-3">
+              {roadmap.phases.reduce((acc, p) => acc + (p.features?.length || 0), 0)} features across {roadmap.phases.length} phases
+            </p>
+          )}
+        </div>
+      )}
+    </BentoCard>
+  )
+}