prjct-cli 0.11.0 → 0.11.2

package/packages/web/app/loading.tsx

@@ -0,0 +1,7 @@
+export default function Loading() {
+  return (
+    <div className="flex items-center justify-center h-full">
+      <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" />
+    </div>
+  )
+}

package/packages/web/app/not-found.tsx

@@ -0,0 +1,25 @@
+import Link from 'next/link'
+import { Button } from '@/components/ui/button'
+import { Home } from 'lucide-react'
+
+export default function NotFound() {
+  return (
+    <div className="flex items-center justify-center h-full">
+      <div className="text-center space-y-4">
+        <h1 className="text-6xl font-bold text-muted-foreground">404</h1>
+        <div>
+          <h2 className="text-lg font-medium">Page not found</h2>
+          <p className="text-sm text-muted-foreground mt-1">
+            The page you're looking for doesn't exist.
+          </p>
+        </div>
+        <Button asChild variant="outline">
+          <Link href="/">
+            <Home className="w-4 h-4 mr-2" />
+            Back to Dashboard
+          </Link>
+        </Button>
+      </div>
+    </div>
+  )
+}

package/packages/web/app/page.tsx

@@ -0,0 +1,227 @@
+'use client'
+
+import { useState, useCallback } from 'react'
+import Link from 'next/link'
+import { SessionsChart } from '@/components/charts/SessionsChart'
+import { Button } from '@/components/ui/button'
+import { ProjectAvatar } from '@/components/ProjectAvatar'
+import { TechStackBadges } from '@/components/TechStackBadges'
+import { formatRelativeTime, formatPath } from '@/lib/format'
+import { useProjects, useDeleteProject, type Project } from '@/hooks/useProjects'
+import { useStats } from '@/hooks/useStats'
+import {
+  MoreHorizontal,
+  Trash2,
+  AlertTriangle,
+  Target,
+  Lightbulb,
+  ListTodo,
+  Zap,
+  FolderGit2
+} 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'
+
+export default function Dashboard() {
+  const [projectToDelete, setProjectToDelete] = useState<Project | null>(null)
+
+  const { data: projects, isLoading: projectsLoading } = useProjects()
+  const { data: stats } = useStats()
+  const deleteMutation = useDeleteProject()
+
+  const handleDeleteClick = useCallback((project: Project, e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setProjectToDelete(project)
+  }, [])
+
+  const handleConfirmDelete = useCallback(() => {
+    if (projectToDelete) {
+      deleteMutation.mutate(projectToDelete.id, {
+        onSuccess: () => setProjectToDelete(null)
+      })
+    }
+  }, [projectToDelete, deleteMutation])
+
+  if (projectsLoading) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" />
+      </div>
+    )
+  }
+
+  const projectCount = projects?.length || 0
+
+  return (
+    <div className="p-8 h-full overflow-auto">
+      <p className="text-muted-foreground">Hola! {stats?.userName || 'Developer'}</p>
+
+      <h1 className="text-8xl font-bold tracking-tighter tabular-nums mt-2">{projectCount}</h1>
+      <p className="text-muted-foreground mt-1">{projectCount === 1 ? 'project' : 'projects'}</p>
+
+      <section className="mt-8">
+        <SessionsChart />
+      </section>
+
+      <section className="mt-12">
+        <h2 className="font-bold uppercase tracking-wide text-muted-foreground mb-6">Active Projects</h2>
+
+        {projects?.length === 0 ? (
+          <div className="border-2 border-dashed border-border rounded-xl p-8 text-center">
+            <p className="text-muted-foreground">
+              No projects yet. Initialize with <code className="bg-muted px-2 py-1 rounded font-mono">/p:init</code>
+            </p>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 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>
+          <AlertDialogHeader>
+            <AlertDialogTitle className="flex items-center gap-2">
+              <AlertTriangle className="w-5 h-5 text-destructive" />
+              Delete Project?
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              <strong>&quot;{projectToDelete?.name}&quot;</strong> will be moved to trash.
+              <br />
+              <span className="text-muted-foreground text-sm">
+                Location: ~/.prjct-cli/.trash/{projectToDelete?.id}
+              </span>
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={deleteMutation.isPending}>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleConfirmDelete}
+              disabled={deleteMutation.isPending}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              {deleteMutation.isPending ? 'Deleting...' : 'Delete'}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </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
+
+  return (
+    <div className="group relative bg-card border border-border rounded-lg overflow-hidden hover:border-primary/50 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-4">
+        <div className="flex items-start gap-3">
+          <ProjectAvatar projectId={project.id} name={project.name} iconPath={project.iconPath} size="lg" />
+
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2">
+              <h3 className="font-bold truncate">{project.name}</h3>
+              {project.hasActiveSession && (
+                <span className="flex h-2 w-2">
+                  <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>
+        </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-sm text-foreground line-clamp-2">{project.currentTask}</span>
+            </div>
+          </div>
+        )}
+
+        {hasStats && (
+          <div className="mt-3 flex items-center 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>
+
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            className="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity"
+            onClick={(e) => e.preventDefault()}
+          >
+            <MoreHorizontal className="w-4 h-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem
+            className="text-destructive focus:text-destructive"
+            onClick={(e: React.MouseEvent) => onDeleteClick(project, e)}
+          >
+            <Trash2 className="w-4 h-4 mr-2" />
+            Delete
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}

package/packages/web/app/project/[id]/error.tsx

@@ -0,0 +1,41 @@
+'use client'
+
+import { useEffect } from 'react'
+import { useRouter } from 'next/navigation'
+import { Button } from '@/components/ui/button'
+import { AlertTriangle, ArrowLeft } from 'lucide-react'
+
+export default function ProjectError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  const router = useRouter()
+
+  useEffect(() => {
+    console.error(error)
+  }, [error])
+
+  return (
+    <div className="flex items-center justify-center h-full">
+      <div className="text-center space-y-4">
+        <div className="w-16 h-16 rounded-full bg-destructive/10 flex items-center justify-center mx-auto">
+          <AlertTriangle className="w-8 h-8 text-destructive" />
+        </div>
+        <div>
+          <h2 className="text-lg font-medium">Failed to load project</h2>
+          <p className="text-sm text-muted-foreground mt-1">{error.message}</p>
+        </div>
+        <div className="flex gap-2 justify-center">
+          <Button onClick={() => router.push('/')} variant="outline">
+            <ArrowLeft className="w-4 h-4 mr-2" />
+            Dashboard
+          </Button>
+          <Button onClick={reset}>Try again</Button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/packages/web/app/project/[id]/loading.tsx

@@ -0,0 +1,9 @@
+import { Loader2 } from 'lucide-react'
+
+export default function ProjectLoading() {
+  return (
+    <div className="flex items-center justify-center h-full">
+      <Loader2 className="w-8 h-8 animate-spin text-muted-foreground" />
+    </div>
+  )
+}

package/packages/web/app/project/[id]/not-found.tsx

@@ -0,0 +1,27 @@
+import Link from 'next/link'
+import { Button } from '@/components/ui/button'
+import { FolderX, ArrowLeft } from 'lucide-react'
+
+export default function ProjectNotFound() {
+  return (
+    <div className="flex items-center justify-center h-full">
+      <div className="text-center space-y-4">
+        <div className="w-16 h-16 rounded-full bg-muted flex items-center justify-center mx-auto">
+          <FolderX className="w-8 h-8 text-muted-foreground" />
+        </div>
+        <div>
+          <h2 className="text-lg font-medium">Project not found</h2>
+          <p className="text-sm text-muted-foreground mt-1">
+            This project may have been deleted or moved.
+          </p>
+        </div>
+        <Button asChild variant="outline">
+          <Link href="/">
+            <ArrowLeft className="w-4 h-4 mr-2" />
+            Back to Dashboard
+          </Link>
+        </Button>
+      </div>
+    </div>
+  )
+}

package/packages/web/app/project/[id]/page.tsx

@@ -0,0 +1,253 @@
+'use client'
+
+import { useState, use } from 'react'
+import { useRouter } from 'next/navigation'
+import { useProject, useDeleteProject } from '@/hooks/useProjects'
+import { TerminalTabsProvider, useTerminalTabs } from '@/context/TerminalTabsContext'
+import { TerminalTabs } from '@/components/TerminalTabs'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { TooltipProvider } from '@/components/ui/tooltip'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog'
+import { ProjectAvatar } from '@/components/ProjectAvatar'
+import { TechStackBadges } from '@/components/TechStackBadges'
+import { CommandButton } from '@/components/CommandButton'
+import { formatPath } from '@/lib/format'
+import {
+  Loader2,
+  Play,
+  Target,
+  Lightbulb,
+  ListTodo,
+  Rocket,
+  Sparkles,
+  CheckCircle2,
+  AlertTriangle,
+  Trash2,
+  ArrowLeft,
+  FolderGit2,
+  Pause,
+  BarChart3,
+  TrendingUp,
+  Activity,
+  History,
+  Undo2,
+  Redo2
+} from 'lucide-react'
+
+// Commands ordered by real developer workflow
+const WORKFLOW_COMMANDS = [
+  { cmd: 'p. now', icon: Target, tip: 'Set task', group: 'work' },
+  { cmd: 'p. done', icon: CheckCircle2, tip: 'Complete', group: 'work' },
+  { cmd: 'p. pause', icon: Pause, tip: 'Pause', group: 'session' },
+  { cmd: 'p. resume', icon: Play, tip: 'Resume', group: 'session' },
+  { cmd: 'p. feature', icon: Sparkles, tip: 'Feature', group: 'plan' },
+  { cmd: 'p. idea', icon: Lightbulb, tip: 'Idea', group: 'plan' },
+  { cmd: 'p. next', icon: ListTodo, tip: 'Queue', group: 'plan' },
+  { cmd: 'p. ship', icon: Rocket, tip: 'Ship', group: 'ship' },
+  { cmd: 'p. recap', icon: BarChart3, tip: 'Recap', group: 'status' },
+  { cmd: 'p. progress', icon: TrendingUp, tip: 'Progress', group: 'status' },
+  { cmd: 'p. status', icon: Activity, tip: 'Status', group: 'status' },
+  { cmd: 'p. history', icon: History, tip: 'History', group: 'status' },
+  { cmd: 'p. undo', icon: Undo2, tip: 'Undo', group: 'recovery' },
+  { cmd: 'p. redo', icon: Redo2, tip: 'Redo', group: 'recovery' },
+] as const
+
+const COMMAND_GROUPS = ['work', 'session', 'plan', 'ship', 'status', 'recovery'] as const
+
+// Inner component that uses the terminal context
+function ProjectPageContent({ projectId, project }: { projectId: string; project: NonNullable<ReturnType<typeof useProject>['data']> }) {
+  const router = useRouter()
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
+  const deleteMutation = useDeleteProject()
+
+  const {
+    sessions,
+    sendCommandToActive,
+    getActiveSession
+  } = useTerminalTabs()
+
+  const activeSession = getActiveSession()
+  const hasActiveSessions = sessions.length > 0
+  const isActiveConnected = activeSession?.isConnected ?? false
+
+  return (
+    <div className="h-full">
+      <TooltipProvider>
+        <div className="flex h-full">
+          {/* Sidebar */}
+          <aside className="w-14 border-r border-border flex flex-col bg-card/50 items-center">
+            <div className="h-14 flex items-center justify-center border-b border-border w-full">
+              <ProjectAvatar
+                projectId={projectId}
+                name={project.name || projectId}
+                iconPath={project.iconPath}
+              />
+            </div>
+
+            <div className="flex-1 flex flex-col gap-1 overflow-auto py-3">
+              {/* Stats button - navigates to stats page */}
+              <CommandButton
+                cmd="Project stats"
+                icon={BarChart3}
+                tip="Stats"
+                disabled={false}
+                onClick={() => router.push(`/project/${projectId}/stats`)}
+              />
+              <div className="border-b border-border w-8 my-2 mx-auto" />
+
+              {COMMAND_GROUPS.map((group, groupIndex) => (
+                <div key={group} className="flex flex-col items-center">
+                  {WORKFLOW_COMMANDS.filter(c => c.group === group).map(({ cmd, icon, tip }) => (
+                    <CommandButton
+                      key={cmd}
+                      cmd={cmd}
+                      icon={icon}
+                      tip={tip}
+                      disabled={!isActiveConnected}
+                      onClick={() => sendCommandToActive(cmd)}
+                    />
+                  ))}
+                  {groupIndex < COMMAND_GROUPS.length - 1 && (
+                    <div className="border-b border-border w-8 my-2" />
+                  )}
+                </div>
+              ))}
+            </div>
+          </aside>
+
+          {/* Main */}
+          <main className="flex-1 flex flex-col">
+            <header className="h-14 flex items-center justify-between px-4 border-b border-border bg-card">
+              <div className="flex items-center gap-4">
+                <div className="flex flex-col">
+                  <div className="flex items-center gap-2">
+                    <span className="font-bold leading-tight">{project.name || projectId}</span>
+                    {project.version && (
+                      <Badge variant="outline" className="text-[10px] px-1.5 py-0 font-mono">
+                        v{project.version}
+                      </Badge>
+                    )}
+                  </div>
+                  {project.repoPath && (
+                    <span className="text-xs text-muted-foreground leading-tight flex items-center gap-1">
+                      <FolderGit2 className="w-3 h-3" />
+                      {formatPath(project.repoPath)}
+                    </span>
+                  )}
+                </div>
+                {hasActiveSessions && (
+                  <Badge variant="outline" className="text-green-500 border-green-500/50">
+                    {sessions.filter(s => s.isConnected).length} active
+                  </Badge>
+                )}
+              </div>
+              <div className="flex items-center gap-4">
+                <div className="flex items-center gap-3 text-xs text-muted-foreground">
+                  {project.stack && <span>{project.stack}</span>}
+                  {project.filesCount && (
+                    <span><span className="font-medium text-foreground">{project.filesCount}</span> files</span>
+                  )}
+                  {project.commitsCount && (
+                    <span><span className="font-medium text-foreground">{project.commitsCount}</span> commits</span>
+                  )}
+                </div>
+                <TechStackBadges techStack={project.techStack || []} />
+              </div>
+            </header>
+
+            {/* Terminal tabs area */}
+            <div className="flex-1">
+              <TerminalTabs projectDir={project.repoPath || project.path || '/tmp'} />
+            </div>
+          </main>
+        </div>
+
+      </TooltipProvider>
+    </div>
+  )
+}
+
+export default function ProjectPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id: projectId } = use(params)
+  const router = useRouter()
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
+
+  const { data: project, isLoading: projectLoading } = useProject(projectId)
+  const deleteMutation = useDeleteProject()
+
+  if (projectLoading) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <Loader2 className="w-8 h-8 animate-spin text-muted-foreground" />
+      </div>
+    )
+  }
+
+  if (!project) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="text-center space-y-4">
+          <div className="w-16 h-16 rounded-full bg-muted flex items-center justify-center mx-auto">
+            <AlertTriangle className="w-8 h-8 text-muted-foreground" />
+          </div>
+          <div>
+            <h2 className="text-lg font-medium">Project not found</h2>
+            <p className="text-sm text-muted-foreground mt-1">ID: {projectId}</p>
+          </div>
+          <div className="flex gap-2 justify-center">
+            <Button variant="outline" onClick={() => router.push('/')}>
+              <ArrowLeft className="w-4 h-4 mr-2" />
+              Back to Dashboard
+            </Button>
+            <Button variant="destructive" onClick={() => setShowDeleteConfirm(true)}>
+              <Trash2 className="w-4 h-4 mr-2" />
+              Delete from Storage
+            </Button>
+          </div>
+
+          <AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogTitle className="flex items-center gap-2">
+                  <AlertTriangle className="w-5 h-5 text-destructive" />
+                  Delete Project Data?
+                </AlertDialogTitle>
+                <AlertDialogDescription>
+                  This will move the project storage to trash.
+                  <br />
+                  <span className="text-muted-foreground text-sm">ID: {projectId}</span>
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel disabled={deleteMutation.isPending}>Cancel</AlertDialogCancel>
+                <AlertDialogAction
+                  onClick={() => deleteMutation.mutate(projectId, { onSuccess: () => router.push('/') })}
+                  disabled={deleteMutation.isPending}
+                  className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                >
+                  {deleteMutation.isPending ? 'Deleting...' : 'Delete'}
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <TerminalTabsProvider projectId={projectId}>
+      <ProjectPageContent projectId={projectId} project={project} />
+    </TerminalTabsProvider>
+  )
+}