prjct-cli 0.11.4 → 0.11.5

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

@@ -0,0 +1,71 @@
+'use client'
+
+import { BentoCard } from './BentoCard'
+import { EmptyState } from './EmptyState'
+import { Target, Clock } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface CurrentTask {
+  task: string
+  duration?: string
+  startedAt?: string
+}
+
+interface NowCardProps {
+  currentTask: CurrentTask | null
+  className?: string
+}
+
+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">
+          {/* Status indicator */}
+          <div className="flex items-center gap-2 mb-3">
+            <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>
+
+          {/* Task name */}
+          <p className="text-xl font-semibold leading-tight flex-1">
+            {currentTask.task}
+          </p>
+
+          {/* Duration */}
+          {currentTask.duration && (
+            <div className="flex items-center gap-2 mt-4 text-muted-foreground">
+              <Clock className="h-3.5 w-3.5" />
+              <span className="text-sm">{currentTask.duration} elapsed</span>
+            </div>
+          )}
+
+          {/* Progress visualization - simple bar */}
+          <div className="mt-4">
+            <div className="h-1.5 bg-muted rounded-full overflow-hidden">
+              <div
+                className="h-full bg-amber-500 rounded-full 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/stats/ProgressRing.tsx

@@ -0,0 +1,74 @@
+'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',
+}
+
+export function ProgressRing({
+  value,
+  size = 'md',
+  showValue = true,
+  strokeWidth = 3,
+  className,
+  accentColor = 'default',
+}: ProgressRingProps) {
+  const { container, text, viewBox, radius } = 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}
+          r={radius}
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={strokeWidth}
+          className="text-foreground/10"
+        />
+        {/* Progress ring */}
+        <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', colorStyles[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/stats/QueueCard.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+import { BentoCard } from './BentoCard'
+import { EmptyState } from './EmptyState'
+import { ListTodo } from 'lucide-react'
+
+interface QueueItem {
+  task: string
+  priority?: number
+}
+
+interface QueueCardProps {
+  queue: QueueItem[]
+  className?: string
+}
+
+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) => (
+            <div key={i} className="flex items-start gap-2 group">
+              <span className="text-[10px] font-medium text-muted-foreground w-4 shrink-0 pt-0.5 tabular-nums">
+                {i + 1}
+              </span>
+              <p className="text-sm leading-tight truncate flex-1 group-hover:text-foreground transition-colors">
+                {item.task}
+              </p>
+            </div>
+          ))}
+          {remaining > 0 && (
+            <p className="text-[10px] text-muted-foreground mt-2 pl-6">
+              +{remaining} more
+            </p>
+          )}
+        </div>
+      )}
+    </BentoCard>
+  )
+}

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

@@ -0,0 +1,97 @@
+'use client'
+
+import { BentoCard } from './BentoCard'
+import { EmptyState } from './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
+}
+
+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">
+          {/* 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>
+              <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>
+
+          {/* Phases */}
+          <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>
+
+          {/* 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
+            </p>
+          )}
+        </div>
+      )}
+    </BentoCard>
+  )
+}

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

@@ -0,0 +1,70 @@
+'use client'
+
+import { BentoCard } from './BentoCard'
+import { EmptyState } from './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' })
+}
+
+export function ShipsCard({ ships, totalShips = 0, className }: ShipsCardProps) {
+  const displayShips = ships.slice(0, 4)
+
+  return (
+    <BentoCard
+      size="1x2"
+      title="Ships"
+      icon={Rocket}
+      count={totalShips}
+      accentColor={ships.length > 0 ? 'success' : 'default'}
+      className={className}
+    >
+      {ships.length === 0 ? (
+        <EmptyState
+          icon={Rocket}
+          title="Nothing shipped yet"
+          description="Ship your first feature"
+          command="/p:ship"
+          compact
+        />
+      ) : (
+        <div className="space-y-3">
+          {displayShips.map((ship, i) => (
+            <div key={i} className="group">
+              <div className="flex items-center gap-2">
+                {ship.version && (
+                  <Badge variant="outline" className="text-[10px] px-1.5 py-0 font-mono shrink-0">
+                    {ship.version}
+                  </Badge>
+                )}
+                <p className="text-sm font-medium truncate group-hover:text-foreground transition-colors">
+                  {ship.name}
+                </p>
+              </div>
+              <p className="text-[10px] text-muted-foreground mt-0.5">
+                {formatShipDate(ship.date)}
+                {ship.duration && ` · ${ship.duration}`}
+              </p>
+            </div>
+          ))}
+        </div>
+      )}
+    </BentoCard>
+  )
+}

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

@@ -0,0 +1,44 @@
+'use client'
+
+import { Area, AreaChart, ResponsiveContainer } from 'recharts'
+
+interface SparklineChartProps {
+  data: number[]
+  color?: string
+  height?: number
+  showArea?: boolean
+}
+
+export function SparklineChart({
+  data,
+  color = 'currentColor',
+  height = 32,
+  showArea = true,
+}: SparklineChartProps) {
+  const chartData = data.map((value, index) => ({ index, value }))
+
+  if (data.length === 0) {
+    return <div style={{ height }} className="w-full" />
+  }
+
+  return (
+    <ResponsiveContainer width="100%" height={height}>
+      <AreaChart data={chartData} margin={{ top: 0, right: 0, bottom: 0, left: 0 }}>
+        <defs>
+          <linearGradient id="sparklineGradient" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stopColor={color} stopOpacity={0.3} />
+            <stop offset="100%" stopColor={color} stopOpacity={0} />
+          </linearGradient>
+        </defs>
+        <Area
+          type="monotone"
+          dataKey="value"
+          stroke={color}
+          strokeWidth={1.5}
+          fill={showArea ? 'url(#sparklineGradient)' : 'none'}
+          isAnimationActive={false}
+        />
+      </AreaChart>
+    </ResponsiveContainer>
+  )
+}

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

@@ -0,0 +1,59 @@
+'use client'
+
+import { BentoCard } from './BentoCard'
+import { Flame } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface StreakCardProps {
+  streak: number
+  className?: string
+}
+
+export function StreakCard({ streak, className }: StreakCardProps) {
+  const isHot = streak >= 3
+  const isOnFire = streak >= 7
+
+  return (
+    <BentoCard
+      size="1x1"
+      title="Streak"
+      icon={Flame}
+      accentColor={isOnFire ? 'warning' : 'default'}
+      className={className}
+    >
+      <div className="flex flex-col h-full justify-between">
+        <div className="flex items-center gap-3">
+          <Flame
+            className={cn(
+              'h-8 w-8 transition-colors',
+              isOnFire ? 'text-orange-500' : isHot ? 'text-amber-500' : 'text-muted-foreground'
+            )}
+          />
+          <div>
+            <p className="text-3xl font-bold tabular-nums">{streak}</p>
+            <p className="text-xs text-muted-foreground">day{streak !== 1 ? 's' : ''}</p>
+          </div>
+        </div>
+
+        {/* Visual streak indicator - dots */}
+        <div className="flex gap-1 mt-3">
+          {Array.from({ length: 7 }).map((_, i) => (
+            <div
+              key={i}
+              className={cn(
+                'h-1.5 flex-1 rounded-full transition-colors',
+                i < streak
+                  ? isOnFire
+                    ? 'bg-orange-500'
+                    : isHot
+                    ? 'bg-amber-500'
+                    : 'bg-foreground'
+                  : 'bg-muted'
+              )}
+            />
+          ))}
+        </div>
+      </div>
+    </BentoCard>
+  )
+}

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

@@ -0,0 +1,60 @@
+'use client'
+
+import { BentoCard } from './BentoCard'
+import { SparklineChart } from './SparklineChart'
+import { Zap, TrendingUp, TrendingDown } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface VelocityCardProps {
+  tasksPerDay: number
+  weeklyData?: number[]
+  change?: number
+  className?: string
+}
+
+export function VelocityCard({
+  tasksPerDay,
+  weeklyData = [],
+  change = 0,
+  className,
+}: VelocityCardProps) {
+  return (
+    <BentoCard
+      size="1x1"
+      title="Velocity"
+      icon={Zap}
+      className={className}
+    >
+      <div className="flex flex-col h-full justify-between">
+        <div>
+          <p className="text-3xl font-bold tabular-nums">{tasksPerDay}</p>
+          <p className="text-xs text-muted-foreground">tasks/day</p>
+        </div>
+
+        {weeklyData.length > 0 && (
+          <div className="mt-2">
+            <SparklineChart data={weeklyData} height={28} />
+          </div>
+        )}
+
+        {change !== 0 && (
+          <div className="flex items-center gap-1 mt-2">
+            {change >= 0 ? (
+              <TrendingUp className="h-3 w-3 text-emerald-500" />
+            ) : (
+              <TrendingDown className="h-3 w-3 text-muted-foreground" />
+            )}
+            <span
+              className={cn(
+                'text-xs font-medium',
+                change >= 0 ? 'text-emerald-600 dark:text-emerald-400' : 'text-muted-foreground'
+              )}
+            >
+              {change >= 0 ? '+' : ''}{change}%
+            </span>
+          </div>
+        )}
+      </div>
+    </BentoCard>
+  )
+}

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

@@ -0,0 +1,17 @@
+export { BentoCard, BentoCardSkeleton } from './BentoCard'
+export type { BentoSize, BentoCardProps } from './BentoCard'
+
+export { BentoGrid } from './BentoGrid'
+export { SparklineChart } from './SparklineChart'
+export { ProgressRing } from './ProgressRing'
+export { EmptyState } from './EmptyState'
+export { HeroSection } from './HeroSection'
+export { NowCard } from './NowCard'
+export { VelocityCard } from './VelocityCard'
+export { StreakCard } from './StreakCard'
+export { QueueCard } from './QueueCard'
+export { ShipsCard } from './ShipsCard'
+export { IdeasCard } from './IdeasCard'
+export { AgentsCard } from './AgentsCard'
+export { RoadmapCard } from './RoadmapCard'
+export { ActivityTimeline } from './ActivityTimeline'

package/packages/web/components/ui/tooltip.tsx

@@ -46,13 +46,13 @@ function TooltipContent({
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(
-          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          "bg-popover text-popover-foreground border shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
           className
         )}
         {...props}
       >
         {children}
-        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+        <TooltipPrimitive.Arrow className="bg-popover fill-popover z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
   )

package/packages/web/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/packages/web/package.json

@@ -6,7 +6,8 @@
     "dev": "tsx server.ts",
     "dev:next": "next dev",
     "build": "next build",
-    "start": "node server.js",
+    "start": "NODE_ENV=production node server.js",
+    "start:prod": "NODE_ENV=production tsx server.ts",
     "lint": "eslint"
   },
   "dependencies": {