prjct-cli 0.18.2 → 0.20.0

package/packages/web/components/DashboardContent/DashboardContent.tsx

@@ -1,284 +0,0 @@
-'use client'
-
-import { useState, useCallback, useTransition } from 'react'
-import Link from 'next/link'
-import { useRouter } from 'next/navigation'
-import { SessionsChart } from '@/components/charts/SessionsChart'
-import { Button } from '@/components/ui/button'
-import { ProgressRing } from '@/components/ProgressRing'
-import { TechStackBadges } from '@/components/TechStackBadges'
-import { formatRelativeTime, formatPath } from '@/lib/format'
-import {
-  MoreHorizontal,
-  Trash2,
-  AlertTriangle,
-  Target,
-  Lightbulb,
-  ListTodo,
-  Zap,
-  FolderGit2,
-  Play,
-  FileText
-} from 'lucide-react'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '@/components/ui/alert-dialog'
-import { deleteProject } from '@/lib/actions/projects'
-
-// Traffic light colors based on completion rate
-type AccentColor = 'default' | 'success' | 'warning' | 'destructive'
-function getCompletionColor(rate: number): AccentColor {
-  if (rate >= 75) return 'success'
-  if (rate >= 25) return 'warning'
-  return 'destructive'
-}
-
-export interface Project {
-  id: string
-  name: string
-  path: string
-  repoPath?: string | null
-  currentTask?: string | null
-  hasActiveSession?: boolean
-  lastActivity?: string | null
-  ideasCount?: number
-  nextTasksCount?: number
-  shippedCount?: number
-  techStack?: string[]
-  iconPath?: string | null
-  version?: string
-  stack?: string
-  filesCount?: number
-  commitsCount?: number
-}
-
-export interface GlobalStats {
-  userName: string
-  totalProjects: number
-}
-
-interface DashboardContentProps {
-  projects: Project[]
-  stats: GlobalStats
-}
-
-export function DashboardContent({ projects, stats }: DashboardContentProps) {
-  const [projectToDelete, setProjectToDelete] = useState<Project | null>(null)
-  const [isPending, startTransition] = useTransition()
-  const router = useRouter()
-
-  const handleDeleteClick = useCallback((project: Project, e: React.MouseEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    setProjectToDelete(project)
-  }, [])
-
-  const handleConfirmDelete = useCallback(() => {
-    if (projectToDelete) {
-      startTransition(async () => {
-        await deleteProject(projectToDelete.id)
-        setProjectToDelete(null)
-        router.refresh()
-      })
-    }
-  }, [projectToDelete, router])
-
-  const projectCount = projects?.length || 0
-
-  return (
-    <div className="p-4 sm:p-6 md:p-8 h-full overflow-auto">
-      {/* Mobile: Add padding for hamburger menu */}
-      <div className="pl-10 md:pl-0">
-        <p className="text-sm sm:text-base text-muted-foreground">Hola! {stats?.userName || 'Developer'}</p>
-
-        <h1 className="text-6xl sm:text-7xl md:text-8xl font-bold tracking-tighter tabular-nums mt-2">{projectCount}</h1>
-        <p className="text-sm sm:text-base text-muted-foreground mt-1">{projectCount === 1 ? 'project' : 'projects'}</p>
-      </div>
-
-      <section className="mt-6 sm:mt-8">
-        <SessionsChart />
-      </section>
-
-      <section className="mt-8 sm:mt-10 md:mt-12">
-        <h2 className="font-bold uppercase tracking-wide text-muted-foreground mb-4 sm:mb-6 text-sm">Active Projects</h2>
-
-        {projects?.length === 0 ? (
-          <div className="border-2 border-dashed border-border rounded-xl p-6 sm:p-8 text-center">
-            <p className="text-muted-foreground text-sm sm:text-base">
-              No projects yet. Initialize with <code className="bg-muted px-2 py-1 rounded font-mono text-xs sm:text-sm">/p:init</code>
-            </p>
-          </div>
-        ) : (
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
-            {projects?.map((project: Project) => (
-              <ProjectCard key={project.id} project={project} onDeleteClick={handleDeleteClick} />
-            ))}
-          </div>
-        )}
-      </section>
-
-      <AlertDialog open={!!projectToDelete} onOpenChange={(open: boolean) => !open && setProjectToDelete(null)}>
-        <AlertDialogContent className="max-w-[calc(100vw-2rem)] sm:max-w-lg">
-          <AlertDialogHeader>
-            <AlertDialogTitle className="flex items-center gap-2">
-              <AlertTriangle className="w-5 h-5 text-destructive shrink-0" />
-              Delete Project?
-            </AlertDialogTitle>
-            <AlertDialogDescription>
-              <strong>&quot;{projectToDelete?.name}&quot;</strong> will be moved to trash.
-              <br />
-              <span className="text-muted-foreground text-xs sm:text-sm break-all">
-                Location: ~/.prjct-cli/.trash/{projectToDelete?.id}
-              </span>
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter className="flex-col sm:flex-row gap-2">
-            <AlertDialogCancel disabled={isPending} className="w-full sm:w-auto">Cancel</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={handleConfirmDelete}
-              disabled={isPending}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90 w-full sm:w-auto"
-            >
-              {isPending ? 'Deleting...' : 'Delete'}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-
-      {/* Bottom safe area padding */}
-      <div className="h-6 sm:h-8" />
-    </div>
-  )
-}
-
-interface ProjectCardProps {
-  project: Project
-  onDeleteClick: (project: Project, e: React.MouseEvent) => void
-}
-
-function ProjectCard({ project, onDeleteClick }: ProjectCardProps) {
-  const hasStats = project.currentTask || project.nextTasksCount || project.ideasCount || project.lastActivity
-
-  // Calculate completion rate
-  const shipped = project.shippedCount ?? 0
-  const pending = project.nextTasksCount ?? 0
-  const total = shipped + pending
-  const completionRate = total > 0 ? Math.round((shipped / total) * 100) : 0
-  const completionColor = getCompletionColor(completionRate)
-
-  return (
-    <div className="group relative bg-card border border-border rounded-lg overflow-hidden hover:border-primary/50 active:scale-[0.99] transition-all">
-      {project.hasActiveSession && <div className="absolute top-0 left-0 right-0 h-0.5 bg-green-500" />}
-
-      <Link href={`/project/${project.id}`} className="block p-3 sm:p-4">
-        <div className="flex items-start gap-3">
-          <ProgressRing value={completionRate} size="md" accentColor={completionColor} className="shrink-0" />
-
-          <div className="flex-1 min-w-0">
-            <div className="flex items-center gap-2">
-              <h3 className="font-bold truncate text-sm sm:text-base">{project.name}</h3>
-              {project.hasActiveSession && (
-                <span className="flex h-2 w-2 shrink-0">
-                  <span className="animate-ping absolute inline-flex h-2 w-2 rounded-full bg-green-400 opacity-75" />
-                  <span className="relative inline-flex rounded-full h-2 w-2 bg-green-500" />
-                </span>
-              )}
-            </div>
-            {project.repoPath && (
-              <p className="text-xs text-muted-foreground truncate mt-0.5 flex items-center gap-1">
-                <FolderGit2 className="w-3 h-3 shrink-0" />
-                {formatPath(project.repoPath)}
-              </p>
-            )}
-          </div>
-
-          {/* Mobile: Always show menu button */}
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon-sm"
-                className="shrink-0 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity"
-                onClick={(e) => e.preventDefault()}
-              >
-                <MoreHorizontal className="w-4 h-4" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuItem asChild className="min-h-[44px] sm:min-h-0">
-                <Link href={`/project/${project.id}/code`}>
-                  <Play className="w-4 h-4 mr-2" />
-                  Start working
-                </Link>
-              </DropdownMenuItem>
-              <DropdownMenuItem asChild className="min-h-[44px] sm:min-h-0">
-                <Link href={`/project/${project.id}/reports`}>
-                  <FileText className="w-4 h-4 mr-2" />
-                  Reports
-                </Link>
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                className="text-destructive focus:text-destructive min-h-[44px] sm:min-h-0"
-                onClick={(e: React.MouseEvent) => onDeleteClick(project, e)}
-              >
-                <Trash2 className="w-4 h-4 mr-2" />
-                Delete
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-
-        {project.currentTask && (
-          <div className="mt-3 p-2 bg-primary/5 rounded border border-primary/10">
-            <div className="flex items-start gap-2">
-              <Target className="w-3.5 h-3.5 text-primary shrink-0 mt-0.5" />
-              <span className="text-xs sm:text-sm text-foreground line-clamp-2">{project.currentTask}</span>
-            </div>
-          </div>
-        )}
-
-        {hasStats && (
-          <div className="mt-3 flex flex-wrap items-center gap-2 sm:gap-3 text-xs text-muted-foreground">
-            {(project.nextTasksCount ?? 0) > 0 && (
-              <div className="flex items-center gap-1">
-                <ListTodo className="w-3.5 h-3.5" />
-                <span>{project.nextTasksCount} queued</span>
-              </div>
-            )}
-            {(project.ideasCount ?? 0) > 0 && (
-              <div className="flex items-center gap-1">
-                <Lightbulb className="w-3.5 h-3.5" />
-                <span>{project.ideasCount} ideas</span>
-              </div>
-            )}
-            {project.lastActivity && (
-              <div className="flex items-center gap-1 ml-auto">
-                <Zap className="w-3.5 h-3.5" />
-                <span>{formatRelativeTime(project.lastActivity)}</span>
-              </div>
-            )}
-          </div>
-        )}
-
-        {project.techStack && project.techStack.length > 0 && (
-          <div className="mt-3">
-            <TechStackBadges techStack={project.techStack} />
-          </div>
-        )}
-      </Link>
-    </div>
-  )
-}

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

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

package/packages/web/components/DateGroup/DateGroup.tsx

@@ -1,18 +0,0 @@
-import { EventRow } from '@/components/EventRow'
-import { formatTimelineDate } from './DateGroup.utils'
-import type { DateGroupProps } from './DateGroup.types'
-
-export function DateGroup({ dateKey, events }: DateGroupProps) {
-  return (
-    <div>
-      <p className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-2">
-        {formatTimelineDate(dateKey + 'T00:00:00')}
-      </p>
-      <div className="space-y-1">
-        {events.map((event, i) => (
-          <EventRow key={i} event={event} />
-        ))}
-      </div>
-    </div>
-  )
-}

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

@@ -1,6 +0,0 @@
-import type { TimelineEvent } from '@/lib/parse-prjct-files'
-
-export interface DateGroupProps {
-  dateKey: string
-  events: TimelineEvent[]
-}

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

@@ -1,11 +0,0 @@
-export function formatTimelineDate(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' })
-}

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

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

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

@@ -1,76 +0,0 @@
-'use client'
-
-import Link from 'next/link'
-import { cn } from '@/lib/utils'
-import { ArrowRight } from 'lucide-react'
-import type { EmptyStateProps } from './EmptyState.types'
-
-export function EmptyState({
-  icon: Icon,
-  title,
-  description,
-  command,
-  href,
-  className,
-  compact = false,
-}: EmptyStateProps) {
-  // Command button content
-  const CommandButton = href ? (
-    <Link
-      href={href}
-      className="inline-flex items-center gap-1.5 px-2 py-1 rounded-md bg-emerald-500/10 text-xs font-mono text-emerald-600 dark:text-emerald-400 hover:bg-emerald-500/20 transition-colors group border border-emerald-500/20"
-    >
-      {command}
-      <ArrowRight className="h-3 w-3 group-hover:translate-x-0.5 transition-transform" />
-    </Link>
-  ) : command ? (
-    <button
-      onClick={() => navigator.clipboard.writeText(command)}
-      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>
-  ) : null
-
-  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>
-        {CommandButton}
-      </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 && (
-        <div className="mt-2">
-          {href ? (
-            <Link
-              href={href}
-              className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md bg-emerald-500/10 text-xs font-mono text-emerald-600 dark:text-emerald-400 hover:bg-emerald-500/20 transition-colors group border border-emerald-500/20"
-            >
-              {command}
-              <ArrowRight className="h-3 w-3 group-hover:translate-x-0.5 transition-transform" />
-            </Link>
-          ) : (
-            <button
-              onClick={() => navigator.clipboard.writeText(command)}
-              className="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"
-            >
-              {command}
-            </button>
-          )}
-        </div>
-      )}
-    </div>
-  )
-}

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

@@ -1,11 +0,0 @@
-import type { LucideIcon } from 'lucide-react'
-
-export interface EmptyStateProps {
-  icon: LucideIcon
-  title: string
-  description?: string
-  command?: string
-  href?: string
-  className?: string
-  compact?: boolean
-}

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

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

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

@@ -1,10 +0,0 @@
-import { Activity, CheckCircle2, Rocket, Target, RefreshCw } from 'lucide-react'
-import type { EventIconName } from './EventRow.types'
-
-export const EVENT_ICON_MAP: Record<EventIconName, typeof Activity> = {
-  check: CheckCircle2,
-  target: Target,
-  rocket: Rocket,
-  refresh: RefreshCw,
-  activity: Activity,
-}

package/packages/web/components/EventRow/EventRow.tsx

@@ -1,49 +0,0 @@
-import { cn } from '@/lib/utils'
-import { EVENT_ICON_MAP } from './EventRow.constants'
-import {
-  formatTime,
-  getEventIconName,
-  getEventColor,
-  getEventBadge,
-  getEventLabel,
-} from './EventRow.utils'
-import type { EventRowProps } from './EventRow.types'
-
-export function EventRow({ event }: EventRowProps) {
-  const iconName = getEventIconName(event.type)
-  const Icon = EVENT_ICON_MAP[iconName]
-  const duration = 'duration' in event && typeof event.duration === 'string' ? event.duration : null
-
-  return (
-    <div className="flex items-center gap-2 sm:gap-3 py-2 sm:py-1.5 px-2 -mx-2 rounded-md hover:bg-muted/50 active:bg-muted/70 transition-colors group">
-      {event.ts && (
-        <span className="hidden sm:block text-xs text-muted-foreground w-14 shrink-0 tabular-nums">
-          {formatTime(event.ts)}
-        </span>
-      )}
-
-      <Icon className={cn('h-4 w-4 sm:h-3.5 sm:w-3.5 shrink-0', getEventColor(event.type))} />
-
-      <div className="flex-1 min-w-0">
-        <span className="text-sm truncate block group-hover:text-foreground transition-colors">
-          {getEventLabel(event)}
-        </span>
-        {event.ts && (
-          <span className="sm:hidden text-xs text-muted-foreground">
-            {formatTime(event.ts)}
-          </span>
-        )}
-      </div>
-
-      <span className="text-xs font-bold tracking-wider text-muted-foreground shrink-0">
-        {getEventBadge(event.type)}
-      </span>
-
-      {duration && (
-        <span className="text-xs text-muted-foreground shrink-0">
-          {duration}
-        </span>
-      )}
-    </div>
-  )
-}

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

@@ -1,7 +0,0 @@
-import type { TimelineEvent } from '@/lib/parse-prjct-files'
-
-export type EventIconName = 'check' | 'target' | 'rocket' | 'refresh' | 'activity'
-
-export interface EventRowProps {
-  event: TimelineEvent
-}

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

@@ -1,49 +0,0 @@
-import type { EventIconName } from './EventRow.types'
-
-export function formatTime(dateString: string): string {
-  const date = new Date(dateString)
-  return date.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true })
-}
-
-export function getEventIconName(type: string): EventIconName {
-  const iconMap: Record<string, EventIconName> = {
-    task_complete: 'check',
-    task_start: 'target',
-    feature_ship: 'rocket',
-    sync: 'refresh',
-  }
-  return iconMap[type] ?? 'activity'
-}
-
-export function getEventColor(type: string): string {
-  const colorMap: Record<string, string> = {
-    task_complete: 'text-muted-foreground',
-    task_start: 'text-muted-foreground',
-    feature_ship: 'text-muted-foreground',
-    sync: 'text-muted-foreground',
-  }
-  return colorMap[type] ?? 'text-muted-foreground'
-}
-
-export function getEventBadge(type: string): string {
-  const badgeMap: Record<string, string> = {
-    task_complete: 'DONE',
-    task_start: 'START',
-    feature_ship: 'SHIP',
-    sync: 'SYNC',
-  }
-  return badgeMap[type] ?? type.toUpperCase()
-}
-
-export function getEventLabel(event: unknown): string {
-  const e = event as { type?: string; task?: string; name?: string }
-  const type = e.type ?? ''
-
-  const labelMap: Record<string, string> = {
-    task_complete: e.task ?? 'Task completed',
-    task_start: e.task ?? 'Task started',
-    feature_ship: e.name ?? 'Feature shipped',
-    sync: 'Project synced',
-  }
-  return labelMap[type] ?? type
-}

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

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

package/packages/web/components/ExpandButton/ExpandButton.tsx

@@ -1,18 +0,0 @@
-import { ChevronDown } from 'lucide-react'
-import { cn } from '@/lib/utils'
-import { Button } from '@/components/ui/button'
-import type { ExpandButtonProps } from './ExpandButton.types'
-
-export function ExpandButton({ expanded, totalCount, collapsedLimit, onToggle }: ExpandButtonProps) {
-  return (
-    <Button
-      variant="ghost"
-      size="sm"
-      onClick={onToggle}
-      className="w-full text-muted-foreground min-h-[44px]"
-    >
-      <ChevronDown className={cn('h-4 w-4 mr-1 transition-transform', expanded && 'rotate-180')} />
-      {expanded ? 'Show less' : `Show ${totalCount - collapsedLimit} more`}
-    </Button>
-  )
-}

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

@@ -1,6 +0,0 @@
-export interface ExpandButtonProps {
-  expanded: boolean
-  totalCount: number
-  collapsedLimit: number
-  onToggle: () => void
-}

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

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

package/packages/web/components/HealthGradientBackground/HealthGradientBackground.tsx

@@ -1,14 +0,0 @@
-import { cn } from '@/lib/utils'
-import { getHealthGradient } from './HealthGradientBackground.utils'
-import type { HealthGradientBackgroundProps } from './HealthGradientBackground.types'
-
-export function HealthGradientBackground({ score }: HealthGradientBackgroundProps) {
-  return (
-    <div
-      className={cn(
-        'absolute inset-0 -m-4 md:-m-8 rounded-2xl opacity-30 blur-3xl transition-colors duration-1000',
-        getHealthGradient(score)
-      )}
-    />
-  )
-}

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

@@ -1,5 +0,0 @@
-export type AccentColor = 'default' | 'success' | 'warning' | 'destructive'
-
-export interface HealthGradientBackgroundProps {
-  score: number
-}

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

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

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