prjct-cli 0.11.5 → 0.12.0

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/{stats → IdeasCard}/IdeasCard.tsx

@@ -1,19 +1,8 @@
-'use client'
-
-import { BentoCard } from './BentoCard'
-import { EmptyState } from './EmptyState'
+import { BentoCard } from '@/components/BentoCard'
+import { EmptyState } from '@/components/EmptyState'
 import { Lightbulb } from 'lucide-react'
 import { cn } from '@/lib/utils'
-
-interface Idea {
-  title: string
-  impact?: string
-}
-
-interface IdeasCardProps {
-  ideas: Idea[]
-  className?: string
-}
+import type { IdeasCardProps } from './IdeasCard.types'
 
 export function IdeasCard({ ideas, className }: IdeasCardProps) {
   const displayIdeas = ideas.slice(0, 4)

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/{stats → ProgressRing}/ProgressRing.tsx

@@ -1,29 +1,8 @@
 'use client'
 
 import { cn } from '@/lib/utils'
-
-interface ProgressRingProps {
-  value: number // 0-100
-  size?: 'sm' | 'md' | 'lg' | 'xl'
-  showValue?: boolean
-  strokeWidth?: number
-  className?: string
-  accentColor?: 'default' | 'success' | 'warning' | 'destructive'
-}
-
-const sizes = {
-  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 },
-}
-
-const colorStyles = {
-  default: 'text-foreground',
-  success: 'text-emerald-500',
-  warning: 'text-amber-500',
-  destructive: 'text-destructive',
-}
+import { PROGRESS_RING_SIZES, PROGRESS_RING_COLOR_STYLES } from './ProgressRing.constants'
+import type { ProgressRingProps } from './ProgressRing.types'
 
 export function ProgressRing({
   value,
@@ -33,14 +12,13 @@ export function ProgressRing({
   className,
   accentColor = 'default',
 }: ProgressRingProps) {
-  const { container, text, viewBox, radius } = sizes[size]
+  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}`}>
-        {/* Background ring */}
         <circle
           cx={viewBox / 2}
           cy={viewBox / 2}
@@ -50,7 +28,6 @@ export function ProgressRing({
           strokeWidth={strokeWidth}
           className="text-foreground/10"
         />
-        {/* Progress ring */}
         <circle
           cx={viewBox / 2}
           cy={viewBox / 2}
@@ -61,7 +38,7 @@ export function ProgressRing({
           strokeDasharray={circumference}
           strokeDashoffset={strokeDashoffset}
           strokeLinecap="round"
-          className={cn('transition-all duration-700 ease-out', colorStyles[accentColor])}
+          className={cn('transition-all duration-700 ease-out', PROGRESS_RING_COLOR_STYLES[accentColor])}
         />
       </svg>
       {showValue && (

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/{stats → RoadmapCard}/RoadmapCard.tsx

@@ -1,25 +1,8 @@
-'use client'
-
-import { BentoCard } from './BentoCard'
-import { EmptyState } from './EmptyState'
+import { BentoCard } from '@/components/BentoCard'
+import { EmptyState } from '@/components/EmptyState'
 import { Map } from 'lucide-react'
 import { cn } from '@/lib/utils'
-
-interface RoadmapPhase {
-  name: string
-  progress: number
-  features?: { name: string; status: string }[]
-}
-
-interface RoadmapData {
-  phases: RoadmapPhase[]
-  progress: number
-}
-
-interface RoadmapCardProps {
-  roadmap: RoadmapData | null
-  className?: string
-}
+import type { RoadmapCardProps } from './RoadmapCard.types'
 
 export function RoadmapCard({ roadmap, className }: RoadmapCardProps) {
   const hasPhases = roadmap?.phases && roadmap.phases.length > 0
@@ -41,7 +24,6 @@ export function RoadmapCard({ roadmap, className }: RoadmapCardProps) {
         />
       ) : (
         <div className="flex flex-col h-full">
-          {/* Overall progress */}
           <div className="mb-4">
             <div className="flex items-center justify-between text-xs mb-1.5">
               <span className="text-muted-foreground">Overall progress</span>
@@ -58,7 +40,6 @@ export function RoadmapCard({ roadmap, className }: RoadmapCardProps) {
             </div>
           </div>
 
-          {/* Phases */}
           <div className="space-y-3 flex-1">
             {roadmap.phases
               .filter(p => (p.features || []).length > 0)
@@ -84,7 +65,6 @@ export function RoadmapCard({ roadmap, className }: RoadmapCardProps) {
               ))}
           </div>
 
-          {/* Feature count */}
           {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

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

@@ -0,0 +1,15 @@
+export interface RoadmapPhase {
+  name: string
+  progress: number
+  features?: Array<{ name: string; status: string }>
+}
+
+export interface RoadmapData {
+  phases: RoadmapPhase[]
+  progress: number
+}
+
+export interface RoadmapCardProps {
+  roadmap: RoadmapData | null
+  className?: string
+}

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

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

package/packages/web/components/{stats → ShipsCard}/ShipsCard.tsx

@@ -1,27 +1,9 @@
-'use client'
-
-import { BentoCard } from './BentoCard'
-import { EmptyState } from './EmptyState'
+import { BentoCard } from '@/components/BentoCard'
+import { EmptyState } from '@/components/EmptyState'
 import { Rocket } from 'lucide-react'
 import { Badge } from '@/components/ui/badge'
-
-interface Ship {
-  name: string
-  date: string
-  version?: string
-  duration?: string
-}
-
-interface ShipsCardProps {
-  ships: Ship[]
-  totalShips?: number
-  className?: string
-}
-
-function formatShipDate(dateString: string): string {
-  const date = new Date(dateString)
-  return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
-}
+import { formatShipDate } from './ShipsCard.utils'
+import type { ShipsCardProps } from './ShipsCard.types'
 
 export function ShipsCard({ ships, totalShips = 0, className }: ShipsCardProps) {
   const displayShips = ships.slice(0, 4)

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

@@ -0,0 +1,12 @@
+export interface Ship {
+  name: string
+  date: string
+  version?: string
+  duration?: string
+}
+
+export interface ShipsCardProps {
+  ships: Ship[]
+  totalShips?: number
+  className?: string
+}

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

@@ -0,0 +1,4 @@
+export function formatShipDate(dateString: string): string {
+  const date = new Date(dateString)
+  return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+}

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

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

package/packages/web/components/{stats → SparklineChart}/SparklineChart.tsx

@@ -1,13 +1,7 @@
 'use client'
 
 import { Area, AreaChart, ResponsiveContainer } from 'recharts'
-
-interface SparklineChartProps {
-  data: number[]
-  color?: string
-  height?: number
-  showArea?: boolean
-}
+import type { SparklineChartProps } from './SparklineChart.types'
 
 export function SparklineChart({
   data,

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

@@ -0,0 +1,6 @@
+export interface SparklineChartProps {
+  data: number[]
+  color?: string
+  height?: number
+  showArea?: boolean
+}

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

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

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

@@ -0,0 +1,2 @@
+export const STREAK_HOT_THRESHOLD = 3
+export const STREAK_ON_FIRE_THRESHOLD = 7

package/packages/web/components/{stats → StreakCard}/StreakCard.tsx

@@ -1,17 +1,12 @@
-'use client'
-
-import { BentoCard } from './BentoCard'
+import { BentoCard } from '@/components/BentoCard'
 import { Flame } from 'lucide-react'
 import { cn } from '@/lib/utils'
-
-interface StreakCardProps {
-  streak: number
-  className?: string
-}
+import { STREAK_HOT_THRESHOLD, STREAK_ON_FIRE_THRESHOLD } from './StreakCard.constants'
+import type { StreakCardProps } from './StreakCard.types'
 
 export function StreakCard({ streak, className }: StreakCardProps) {
-  const isHot = streak >= 3
-  const isOnFire = streak >= 7
+  const isHot = streak >= STREAK_HOT_THRESHOLD
+  const isOnFire = streak >= STREAK_ON_FIRE_THRESHOLD
 
   return (
     <BentoCard
@@ -35,7 +30,6 @@ export function StreakCard({ streak, className }: StreakCardProps) {
           </div>
         </div>
 
-        {/* Visual streak indicator - dots */}
         <div className="flex gap-1 mt-3">
           {Array.from({ length: 7 }).map((_, i) => (
             <div

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

@@ -0,0 +1,4 @@
+export interface StreakCardProps {
+  streak: number
+  className?: string
+}

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

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

package/packages/web/components/TasksCounter/TasksCounter.tsx

@@ -0,0 +1,14 @@
+import type { TasksCounterProps } from './TasksCounter.types'
+
+export function TasksCounter({ count }: TasksCounterProps) {
+  return (
+    <div className="flex flex-col sm:flex-row sm:items-baseline gap-1 sm:gap-3">
+      <span className="text-5xl sm:text-6xl md:text-7xl font-bold tracking-tighter tabular-nums">
+        {count}
+      </span>
+      <span className="text-sm sm:text-base md:text-lg text-muted-foreground">
+        tasks completed
+      </span>
+    </div>
+  )
+}

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

@@ -0,0 +1,3 @@
+export interface TasksCounterProps {
+  count: number
+}

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

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

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

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