prjct-cli 0.18.1 → 0.19.0

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

@@ -1,92 +0,0 @@
-'use client'
-
-import Link from 'next/link'
-import { Play, FileText, Flame } from 'lucide-react'
-import { ProgressRing } from '@/components/ProgressRing'
-import { TasksCounter } from '@/components/TasksCounter'
-import { InsightMessage } from '@/components/InsightMessage'
-import { WeeklySparkline } from '@/components/WeeklySparkline'
-import { HealthGradientBackground } from '@/components/HealthGradientBackground'
-import { useCountUp, useWeeklyActivity } from './hooks'
-import { getCompletionColor } from './HeroSection.utils'
-import type { HeroProps } from './HeroSection.types'
-
-export function HeroSection({
-  projectId,
-  projectName,
-  projectVersion,
-  totalShips,
-  completionRate,
-  streak,
-  insightMessage,
-  timeline = [],
-}: HeroProps) {
-  const animatedCount = useCountUp(totalShips)
-  const weeklyData = useWeeklyActivity(timeline)
-  const completionColor = getCompletionColor(completionRate)
-
-  return (
-    <div className="relative mb-6 md:mb-8">
-      <HealthGradientBackground score={completionRate} />
-
-      <div className="relative z-10 flex items-center justify-between my-16">
-        <div className="flex items-baseline gap-3">
-          <h1 className="text-5xl md:text-6xl font-bold tracking-tight">{projectName}</h1>
-          {projectVersion && (
-            <span className="text-lg md:text-xl font-mono text-muted-foreground">v{projectVersion}</span>
-          )}
-        </div>
-
-        <div className="flex items-center gap-3">
-          {/* Reports Link */}
-          <Link
-            href={`/project/${projectId}/reports`}
-            className="inline-flex items-center gap-2 px-4 py-3 bg-muted hover:bg-muted/80 text-foreground font-medium rounded-xl transition-all duration-200 hover:scale-105"
-          >
-            <FileText className="h-5 w-5" />
-            <span>Reports</span>
-          </Link>
-
-          {/* Start Working CTA */}
-          <Link
-            href={`/project/${projectId}/code`}
-            className="group relative inline-flex items-center gap-2 px-6 py-3 bg-emerald-500 hover:bg-emerald-600 text-white font-semibold rounded-xl shadow-lg shadow-emerald-500/25 hover:shadow-emerald-500/40 transition-all duration-200 hover:scale-105"
-          >
-            <Play className="h-5 w-5 fill-current" />
-            <span>Start Working</span>
-            <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-emerald-400 to-emerald-600 opacity-0 group-hover:opacity-100 transition-opacity -z-10" />
-          </Link>
-        </div>
-      </div>
-
-      <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={completionRate}
-            size="xl"
-            accentColor={completionColor}
-            className="shrink-0"
-          />
-
-          <div className="flex-1 min-w-0">
-            <TasksCounter count={animatedCount} />
-            {/* Streak badge */}
-            {streak > 0 && (
-              <div className="flex items-center gap-1.5 mt-1">
-                <Flame className="h-4 w-4 text-muted-foreground" />
-                <span className="text-sm font-medium text-muted-foreground">
-                  {streak} day streak
-                </span>
-              </div>
-            )}
-            <InsightMessage message={insightMessage} />
-          </div>
-        </div>
-
-        <div className="flex flex-col items-start md:items-end gap-3 md:gap-4">
-          <WeeklySparkline data={weeklyData} size="lg" />
-        </div>
-      </div>
-    </div>
-  )
-}

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

@@ -1,14 +0,0 @@
-import type { TimelineEvent } from '@/lib/parse-prjct-files'
-
-export type { TimelineEvent }
-
-export interface HeroProps {
-  projectId: string
-  projectName: string
-  projectVersion?: string | null
-  totalShips: number
-  completionRate: number
-  streak: number
-  insightMessage: string
-  timeline?: TimelineEvent[]
-}

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

@@ -1,11 +0,0 @@
-export type AccentColor = 'default' | 'success' | 'warning' | 'destructive'
-
-// Completion rate color: traffic light based on project progress
-// Green >= 75% (almost done!)
-// Yellow 25-74% (good progress)
-// Red < 25% (just getting started)
-export function getCompletionColor(rate: number): AccentColor {
-  if (rate >= 75) return 'success'
-  if (rate >= 25) return 'warning'
-  return 'destructive'
-}

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

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

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

@@ -1,45 +0,0 @@
-'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

@@ -1,18 +0,0 @@
-'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

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

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

@@ -1,115 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import Link from 'next/link'
-import { EmptyState } from '@/components/EmptyState'
-import { ExpandButton } from '@/components/ExpandButton'
-import { Lightbulb, Sparkles, Rocket, X } from 'lucide-react'
-import { cn } from '@/lib/utils'
-import type { IdeasCardProps } from './IdeasCard.types'
-
-const COLLAPSED_LIMIT = 8
-const EXPANDED_LIMIT = 30
-
-export function IdeasCard({ ideas, codeHref, className }: IdeasCardProps) {
-  const [expanded, setExpanded] = useState(false)
-  const limit = expanded ? EXPANDED_LIMIT : COLLAPSED_LIMIT
-  const displayIdeas = ideas.slice(0, limit)
-  const highImpactCount = ideas.filter(i => i.impact === 'HIGH').length
-  const hasMore = ideas.length > limit
-
-  return (
-    <div className={cn(
-      'relative overflow-hidden rounded-xl border bg-card p-4',
-      className
-    )}>
-      <div className="flex items-center justify-between mb-3">
-        <div className="flex items-center gap-2">
-          <Lightbulb className="h-4 w-4 text-muted-foreground" />
-          <span className="text-xs font-bold uppercase tracking-[0.15em] text-muted-foreground">
-            Ideas
-          </span>
-        </div>
-        <div className="flex items-center gap-2">
-          {highImpactCount > 0 && (
-            <span className="text-xs font-medium text-muted-foreground bg-muted px-1.5 py-0.5 rounded">
-              {highImpactCount} high impact
-            </span>
-          )}
-          <span className="text-xs font-medium text-muted-foreground tabular-nums">
-            {ideas.length}
-          </span>
-        </div>
-      </div>
-
-      {ideas.length === 0 ? (
-        <EmptyState
-          icon={Lightbulb}
-          title="No ideas yet"
-          command="/p:idea"
-          href={codeHref}
-          compact
-        />
-      ) : (
-        <div className="space-y-1">
-          {displayIdeas.map((idea, i) => {
-            const featureHref = codeHref
-              ? `${codeHref}?cmd=${encodeURIComponent(`p. feature "${idea.title}"`)}`
-              : undefined
-            const deleteHref = codeHref
-              ? `${codeHref}?cmd=${encodeURIComponent(`p. idea remove ${i + 1}`)}`
-              : undefined
-
-            return (
-              <div
-                key={i}
-                className="flex items-start gap-2 py-1.5 group hover:bg-muted/50 rounded px-1 -mx-1"
-              >
-                {idea.impact === 'HIGH' ? (
-                  <Sparkles className="h-3 w-3 mt-0.5 shrink-0 text-foreground" />
-                ) : (
-                  <Lightbulb className="h-3 w-3 mt-0.5 shrink-0 text-muted-foreground" />
-                )}
-                <p className={cn(
-                  'text-sm flex-1 min-w-0',
-                  idea.impact === 'HIGH' && 'font-medium'
-                )}>
-                  {idea.title}
-                </p>
-                {/* Always visible action buttons */}
-                <div className="flex items-center gap-1 shrink-0">
-                  {featureHref && (
-                    <Link
-                      href={featureHref}
-                      className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
-                      title="Convert to feature"
-                    >
-                      <Rocket className="h-3.5 w-3.5" />
-                    </Link>
-                  )}
-                  {deleteHref && (
-                    <Link
-                      href={deleteHref}
-                      className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
-                      title="Delete idea"
-                    >
-                      <X className="h-3.5 w-3.5" />
-                    </Link>
-                  )}
-                </div>
-              </div>
-            )
-          })}
-          {(hasMore || expanded) && ideas.length > COLLAPSED_LIMIT && (
-            <ExpandButton
-              expanded={expanded}
-              totalCount={ideas.length}
-              collapsedLimit={COLLAPSED_LIMIT}
-              onToggle={() => setExpanded(!expanded)}
-            />
-          )}
-        </div>
-      )}
-    </div>
-  )
-}

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

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

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

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

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

@@ -1,9 +0,0 @@
-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

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

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

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

package/packages/web/components/Logo/Logo.tsx

@@ -1,65 +0,0 @@
-import { cn } from '@/lib/utils'
-
-interface LogoProps {
-  showText?: boolean
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-  rounded?: boolean
-}
-
-export function Logo({ showText = true, size = 'md', rounded = false }: LogoProps) {
-  const logoSize = {
-    xs: 'size-7',
-    sm: 'size-10',
-    md: 'size-12',
-    lg: 'size-14',
-    xl: 'size-16',
-  }
-
-  const textSize = {
-    xs: 'text-sm',
-    sm: 'text-lg',
-    md: 'text-lg',
-    lg: 'text-2xl',
-    xl: 'text-3xl',
-  }
-
-  const containerTextSize = {
-    xs: 'text-sm',
-    sm: 'text-base',
-    md: 'text-xl',
-    lg: 'text-2xl',
-    xl: 'text-3xl',
-  }
-
-  const brandTextSize = {
-    xs: 'text-xs',
-    sm: 'text-sm',
-    md: 'text-lg',
-    lg: 'text-xl',
-    xl: 'text-2xl',
-  }
-
-  return (
-    <div
-      className={cn('flex items-center gap-2', containerTextSize[size])}
-      data-testid="prjct-logo"
-    >
-      <div className="relative isolate overflow-visible">
-        <div className={cn("fancy-border pointer-events-none", rounded && "rounded-full")}></div>
-        <div
-          className={cn(
-            'relative z-10 flex items-center justify-center border border-border bg-foreground text-background shadow-sm',
-            rounded ? 'rounded-full' : 'rounded-lg',
-            logoSize[size]
-          )}
-          data-testid="prjct-logo-icon"
-        >
-          <p className={cn('mb-0.5 inline-block font-bold leading-none', textSize[size])}>p/</p>
-        </div>
-      </div>
-      {showText && (
-        <span className={cn(brandTextSize[size], 'font-bold text-foreground')}>prjct</span>
-      )}
-    </div>
-  )
-}

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

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

package/packages/web/components/MarkdownContent/MarkdownContent.tsx

@@ -1,123 +0,0 @@
-'use client'
-
-import ReactMarkdown from 'react-markdown'
-import remarkGfm from 'remark-gfm'
-import { cn } from '@/lib/utils'
-
-interface MarkdownContentProps {
-  content: string
-  className?: string
-}
-
-export function MarkdownContent({ content, className }: MarkdownContentProps) {
-  if (!content || !content.trim()) {
-    return (
-      <p className="text-sm text-muted-foreground italic">No content</p>
-    )
-  }
-
-  return (
-    <div className={cn('prose prose-sm dark:prose-invert max-w-none', className)}>
-      <ReactMarkdown
-        remarkPlugins={[remarkGfm]}
-        components={{
-          // Headers
-          h1: ({ children }) => (
-            <h1 className="text-xl font-bold mt-4 mb-2 first:mt-0">{children}</h1>
-          ),
-          h2: ({ children }) => (
-            <h2 className="text-lg font-semibold mt-4 mb-2 border-b pb-1">{children}</h2>
-          ),
-          h3: ({ children }) => (
-            <h3 className="text-base font-medium mt-3 mb-1">{children}</h3>
-          ),
-          // Lists
-          ul: ({ children }) => (
-            <ul className="list-disc list-inside space-y-1 my-2">{children}</ul>
-          ),
-          ol: ({ children }) => (
-            <ol className="list-decimal list-inside space-y-1 my-2">{children}</ol>
-          ),
-          li: ({ children }) => (
-            <li className="text-sm">{children}</li>
-          ),
-          // Checkbox lists (GFM)
-          input: ({ checked, ...props }) => (
-            <input
-              type="checkbox"
-              checked={checked}
-              readOnly
-              className="mr-2 rounded"
-              {...props}
-            />
-          ),
-          // Paragraphs
-          p: ({ children }) => (
-            <p className="text-sm my-1.5 leading-relaxed">{children}</p>
-          ),
-          // Code
-          code: ({ className, children, ...props }) => {
-            const isInline = !className
-            if (isInline) {
-              return (
-                <code className="bg-muted px-1 py-0.5 rounded text-xs font-mono" {...props}>
-                  {children}
-                </code>
-              )
-            }
-            return (
-              <code className={cn('block bg-muted p-2 rounded text-xs font-mono overflow-x-auto', className)} {...props}>
-                {children}
-              </code>
-            )
-          },
-          pre: ({ children }) => (
-            <pre className="bg-muted p-3 rounded-md overflow-x-auto my-2 text-xs">
-              {children}
-            </pre>
-          ),
-          // Tables
-          table: ({ children }) => (
-            <div className="overflow-x-auto my-2">
-              <table className="min-w-full text-xs border-collapse">{children}</table>
-            </div>
-          ),
-          thead: ({ children }) => (
-            <thead className="bg-muted">{children}</thead>
-          ),
-          th: ({ children }) => (
-            <th className="px-2 py-1 text-left font-medium border-b">{children}</th>
-          ),
-          td: ({ children }) => (
-            <td className="px-2 py-1 border-b">{children}</td>
-          ),
-          // Blockquotes
-          blockquote: ({ children }) => (
-            <blockquote className="border-l-2 border-muted-foreground/30 pl-3 italic text-muted-foreground my-2">
-              {children}
-            </blockquote>
-          ),
-          // Horizontal rules
-          hr: () => (
-            <hr className="my-4 border-border" />
-          ),
-          // Strong/em
-          strong: ({ children }) => (
-            <strong className="font-semibold">{children}</strong>
-          ),
-          em: ({ children }) => (
-            <em className="italic">{children}</em>
-          ),
-          // Links
-          a: ({ href, children }) => (
-            <a href={href} className="text-primary hover:underline" target="_blank" rel="noopener noreferrer">
-              {children}
-            </a>
-          ),
-        }}
-      >
-        {content}
-      </ReactMarkdown>
-    </div>
-  )
-}

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

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

package/packages/web/components/MasonryGrid/MasonryGrid.tsx

@@ -1,18 +0,0 @@
-import { cn } from '@/lib/utils'
-
-interface MasonryGridProps {
-  children: React.ReactNode
-  className?: string
-}
-
-export function MasonryGrid({ children, className }: MasonryGridProps) {
-  return (
-    <div className={cn(
-      'columns-1 sm:columns-2 xl:columns-3 gap-4 max-w-full overflow-x-hidden',
-      '[&>*]:mb-4 [&>*]:break-inside-avoid',
-      className
-    )}>
-      {children}
-    </div>
-  )
-}

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

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

package/packages/web/components/MomentumWidget/MomentumWidget.tsx

@@ -1,119 +0,0 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-import { SparklineChart } from '@/components/SparklineChart'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
-import { Flame, TrendingUp, Activity, Heart } from 'lucide-react'
-import { cn } from '@/lib/utils'
-import type { MomentumWidgetProps, MomentumData, MomentumStatus } from './MomentumWidget.types'
-
-const statusConfig: Record<MomentumStatus, {
-  color: string
-  bgColor: string
-  textColor: string
-  icon: typeof Flame
-}> = {
-  // Growing - you're killing it!
-  hot: {
-    color: '#22c55e',
-    bgColor: 'bg-green-500/10',
-    textColor: 'text-green-500',
-    icon: Flame
-  },
-  // Normal activity - neutral tones
-  active: {
-    color: '#a1a1aa',
-    bgColor: 'bg-muted',
-    textColor: 'text-muted-foreground',
-    icon: Activity
-  },
-  // Slight slowdown - still neutral
-  cooling: {
-    color: '#a1a1aa',
-    bgColor: 'bg-muted',
-    textColor: 'text-muted-foreground',
-    icon: TrendingUp
-  },
-  // Abandoned (7+ days) - red alert
-  cold: {
-    color: '#ef4444',
-    bgColor: 'bg-red-500/10',
-    textColor: 'text-red-500',
-    icon: Heart
-  }
-}
-
-export function MomentumWidget({ projectId }: MomentumWidgetProps) {
-  const [data, setData] = useState<MomentumData | null>(null)
-  const [loading, setLoading] = useState(true)
-
-  useEffect(() => {
-    async function fetchMomentum() {
-      try {
-        const res = await fetch(`/api/projects/${projectId}/momentum`)
-        const json = await res.json()
-        if (json.success) {
-          setData(json.data)
-        }
-      } catch (error) {
-        console.error('Failed to fetch momentum:', error)
-      } finally {
-        setLoading(false)
-      }
-    }
-
-    fetchMomentum()
-  }, [projectId])
-
-  if (loading) {
-    return (
-      <div className="flex items-center gap-2 h-10 animate-pulse">
-        <div className="h-10 w-32 bg-muted rounded" />
-        <div className="h-4 w-16 bg-muted rounded" />
-      </div>
-    )
-  }
-
-  if (!data) return null
-
-  const config = statusConfig[data.status]
-  const Icon = config.icon
-
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <div className={cn(
-          'flex items-center gap-2 px-2 py-1 rounded-md cursor-default transition-colors',
-          config.bgColor
-        )}>
-          {/* Mini sparkline - matching button width for visual weight */}
-          <div className="w-32 h-10">
-            <SparklineChart
-              data={data.dailyTasks}
-              color={config.color}
-              height={40}
-              showArea={true}
-            />
-          </div>
-
-          {/* Status badge */}
-          <div className={cn('flex items-center gap-1.5', config.textColor)}>
-            <Icon className="w-4 h-4" />
-            <span className="text-sm font-medium whitespace-nowrap">
-              {data.message}
-            </span>
-          </div>
-        </div>
-      </TooltipTrigger>
-      <TooltipContent side="bottom" className="text-xs">
-        <div className="space-y-1">
-          <p className="font-medium">7-day activity</p>
-          <p>{data.totalTasks} tasks, {data.totalShips} ships</p>
-          {data.streak > 0 && (
-            <p className="text-foreground font-medium">{data.streak} day streak!</p>
-          )}
-        </div>
-      </TooltipContent>
-    </Tooltip>
-  )
-}