prjct-cli 0.13.3 → 0.15.0

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

@@ -0,0 +1,119 @@
+'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>
+  )
+}

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

@@ -0,0 +1,16 @@
+export type MomentumStatus = 'hot' | 'active' | 'cooling' | 'cold'
+
+export interface MomentumData {
+  dailyTasks: number[]
+  totalTasks: number
+  totalShips: number
+  lastActivityDate: string | null
+  daysSinceActivity: number
+  streak: number
+  status: MomentumStatus
+  message: string
+}
+
+export interface MomentumWidgetProps {
+  projectId: string
+}

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

@@ -0,0 +1,2 @@
+export { MomentumWidget } from './MomentumWidget'
+export type { MomentumWidgetProps, MomentumData, MomentumStatus } from './MomentumWidget.types'

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

@@ -1,84 +1,108 @@
-import { BentoCard } from '@/components/BentoCard'
+'use client'
+
+import Link from 'next/link'
 import { EmptyState } from '@/components/EmptyState'
-import { Target, Clock, Bot, Pause } from 'lucide-react'
+import { Target, Clock, Bot, Pause, Play, CheckCircle2 } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import type { NowCardProps } from './NowCard.types'
 
-export function NowCard({ currentTask, className }: NowCardProps) {
+export function NowCard({ currentTask, codeHref, 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">
+    <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">
+          <Target className="h-4 w-4 text-muted-foreground" />
+          <span className="text-xs font-bold uppercase tracking-[0.15em] text-muted-foreground">
+            Now
+          </span>
+        </div>
+        {currentTask && (
+          <div className="flex items-center gap-2">
             {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>
-              </>
+              <span className="inline-flex items-center gap-1 text-xs font-semibold text-muted-foreground bg-muted px-2 py-0.5 rounded-full">
+                <Pause className="w-2.5 h-2.5" />
+                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>
-              </>
+              <span className="inline-flex items-center gap-1 text-xs font-semibold text-foreground bg-muted px-2 py-0.5 rounded-full">
+                <Play className="w-2.5 h-2.5 fill-current" />
+                Working
+              </span>
             )}
           </div>
+        )}
+      </div>
 
-          <p className="text-xl font-semibold leading-tight flex-1">
+      {currentTask ? (
+        <div className="space-y-3">
+          <p className="text-sm font-medium leading-tight break-words">
             {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 flex-wrap items-center gap-3">
+            {currentTask.agent && (
+              <div className="inline-flex items-center gap-1.5 text-xs text-muted-foreground bg-muted/50 px-2 py-1 rounded">
+                <Bot className="h-3 w-3" />
+                <span className="font-mono">{currentTask.agent}</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>
+            {currentTask.startedAt && (
+              <div className="inline-flex items-center gap-1.5 text-xs text-muted-foreground">
+                <Clock className="h-3 w-3" />
+                <span>Started {new Date(currentTask.startedAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span>
               </div>
             )}
+
             {currentTask.estimatedDuration && (
-              <span className="text-xs">
-                / est. {currentTask.estimatedDuration}
+              <span className="text-xs text-muted-foreground">
+                Est. {currentTask.estimatedDuration}
               </span>
             )}
           </div>
 
-          <div className="mt-4">
+          {/* Progress indicator */}
+          <div className="pt-1">
             <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%' }}
+                className="h-full rounded-full transition-all duration-300 bg-foreground"
+                style={{ width: currentTask.pausedAt ? '30%' : '60%' }}
               />
             </div>
           </div>
+
+          {/* Action buttons */}
+          {codeHref && (
+            <div className="flex gap-2 pt-2">
+              <Link
+                href={`${codeHref}?cmd=p.%20done`}
+                className="flex-1 flex items-center justify-center gap-1.5 text-xs font-medium px-3 py-2 rounded-lg bg-muted text-foreground hover:bg-muted/80 transition-colors"
+              >
+                <CheckCircle2 className="h-3.5 w-3.5" />
+                Done
+              </Link>
+              {currentTask.pausedAt ? (
+                <Link
+                  href={`${codeHref}?cmd=p.%20resume`}
+                  className="flex-1 flex items-center justify-center gap-1.5 text-xs font-medium px-3 py-2 rounded-lg bg-muted text-foreground hover:bg-muted/80 transition-colors"
+                >
+                  <Play className="h-3.5 w-3.5" />
+                  Resume
+                </Link>
+              ) : (
+                <Link
+                  href={`${codeHref}?cmd=p.%20pause`}
+                  className="flex-1 flex items-center justify-center gap-1.5 text-xs font-medium px-3 py-2 rounded-lg bg-muted text-foreground hover:bg-muted/80 transition-colors"
+                >
+                  <Pause className="h-3.5 w-3.5" />
+                  Pause
+                </Link>
+              )}
+            </div>
+          )}
         </div>
       ) : (
         <EmptyState
@@ -86,8 +110,9 @@ export function NowCard({ currentTask, className }: NowCardProps) {
           title="No active task"
           description="Start working on something"
           command="/p:now"
+          href={codeHref}
         />
       )}
-    </BentoCard>
+    </div>
   )
 }

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

@@ -11,5 +11,6 @@ export interface CurrentTask {
 
 export interface NowCardProps {
   currentTask: CurrentTask | null
+  codeHref?: string
   className?: string
 }

package/packages/web/components/PageHeader/PageHeader.tsx

@@ -0,0 +1,24 @@
+import { getProjectBgClass } from '@/lib/project-colors'
+
+interface PageHeaderProps {
+  projectId: string
+  projectName: string
+  section?: string
+}
+
+export function PageHeader({ projectId, projectName, section }: PageHeaderProps) {
+  const colorBg = getProjectBgClass(projectId)
+
+  return (
+    <div className="flex items-center gap-3 mb-6">
+      <div className={`w-3 h-3 rounded-full shrink-0 ${colorBg}`} />
+      <h1 className="text-2xl font-semibold">{projectName}</h1>
+      {section && (
+        <>
+          <span className="text-muted-foreground/50">/</span>
+          <span className="text-xl text-muted-foreground">{section}</span>
+        </>
+      )}
+    </div>
+  )
+}

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

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

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

@@ -6,7 +6,7 @@ export const PROGRESS_RING_SIZES: Record<ProgressRingSize, {
   viewBox: number
   radius: number
 }> = {
-  sm: { container: 'h-8 w-8', text: 'text-[10px]', viewBox: 36, radius: 14 },
+  sm: { container: 'h-8 w-8', text: 'text-xs', 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 },
@@ -16,5 +16,5 @@ export const PROGRESS_RING_COLOR_STYLES: Record<AccentColor, string> = {
   default: 'text-foreground',
   success: 'text-emerald-500',
   warning: 'text-amber-500',
-  destructive: 'text-destructive',
+  destructive: 'text-red-500',
 }

package/packages/web/components/ProjectAvatar/ProjectAvatar.tsx

@@ -28,7 +28,7 @@ export function ProjectAvatar({
   return (
     <div
       className={cn(
-        'rounded-lg bg-muted flex items-center justify-center overflow-hidden shrink-0',
+        'rounded-lg flex items-center justify-center overflow-hidden shrink-0 bg-muted border border-border',
         sizeClasses[size],
         className
       )}
@@ -46,7 +46,7 @@ export function ProjectAvatar({
           }}
         />
       ) : null}
-      <span className={cn('font-bold text-muted-foreground', iconPath ? 'hidden' : '')}>
+      <span className={cn('font-medium text-muted-foreground', iconPath ? 'hidden' : '')}>
         {initials}
       </span>
     </div>

package/packages/web/components/ProjectColorDot/ProjectColorDot.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import { getProjectColor } from '@/lib/project-colors'
+
+interface ProjectColorDotProps {
+  projectId: string
+  size?: 'sm' | 'md' | 'lg' | 'xl'
+  className?: string
+}
+
+const sizeClasses = {
+  sm: 'w-2 h-2',
+  md: 'w-3 h-3',
+  lg: 'w-4 h-4',
+  xl: 'w-5 h-5',
+}
+
+export function ProjectColorDot({
+  projectId,
+  size = 'md',
+  className
+}: ProjectColorDotProps) {
+  const color = getProjectColor(projectId)
+
+  return (
+    <div
+      className={cn(
+        'rounded-full shrink-0',
+        sizeClasses[size],
+        color.bg,
+        className
+      )}
+      aria-hidden="true"
+    />
+  )
+}

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

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

package/packages/web/components/ProjectSelectorModal/ProjectSelectorModal.tsx

@@ -0,0 +1,104 @@
+'use client'
+
+import { useState } from 'react'
+import { useProjects } from '@/hooks/useProjects'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { ProjectAvatar } from '@/components/ProjectAvatar'
+import { Loader2, Search, FolderGit2 } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { formatPath } from '@/lib/format'
+
+interface ProjectSelectorModalProps {
+  isOpen: boolean
+  onClose: () => void
+  onSelectProject: (projectId: string, projectName: string, projectPath: string) => void
+}
+
+export function ProjectSelectorModal({
+  isOpen,
+  onClose,
+  onSelectProject,
+}: ProjectSelectorModalProps) {
+  const [search, setSearch] = useState('')
+  const { data: projects, isLoading } = useProjects()
+
+  const filteredProjects = projects?.filter((project) =>
+    project.name?.toLowerCase().includes(search.toLowerCase()) ||
+    project.repoPath?.toLowerCase().includes(search.toLowerCase())
+  ) || []
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Select a Project</DialogTitle>
+          <DialogDescription>
+            Choose a project to open a terminal session
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder="Search projects..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="pl-9"
+          />
+        </div>
+
+        <div className="max-h-[300px] overflow-y-auto space-y-1">
+          {isLoading ? (
+            <div className="flex items-center justify-center py-8">
+              <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+            </div>
+          ) : filteredProjects.length === 0 ? (
+            <div className="text-center py-8 text-muted-foreground">
+              {search ? 'No projects found' : 'No projects available'}
+            </div>
+          ) : (
+            filteredProjects.map((project) => (
+              <button
+                key={project.id}
+                onClick={() => {
+                  const projectPath = project.repoPath || project.path || '/tmp'
+                  const projectName = project.name || project.id
+                  onSelectProject(project.id, projectName, projectPath)
+                }}
+                className={cn(
+                  'w-full flex items-center gap-3 p-3 rounded-lg transition-colors',
+                  'hover:bg-accent text-left'
+                )}
+              >
+                <ProjectAvatar
+                  projectId={project.id}
+                  name={project.name || project.id}
+                  iconPath={project.iconPath}
+                  size="sm"
+                />
+                <div className="flex-1 min-w-0">
+                  <div className="font-medium truncate">
+                    {project.name || project.id}
+                  </div>
+                  {project.repoPath && (
+                    <div className="text-xs text-muted-foreground flex items-center gap-1 truncate">
+                      <FolderGit2 className="h-3 w-3 shrink-0" />
+                      <span className="truncate">{formatPath(project.repoPath)}</span>
+                    </div>
+                  )}
+                </div>
+              </button>
+            ))
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

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

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

package/packages/web/components/Providers/Providers.tsx

@@ -4,6 +4,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { useState, type ReactNode } from 'react'
 import { ThemeProvider, type ThemeProviderProps } from 'next-themes'
 import { TerminalProvider } from '@/context/TerminalContext'
+import { GlobalTerminalProvider } from '@/context/GlobalTerminalContext'
 
 function ThemeWrapper({ children, ...props }: ThemeProviderProps & { children: ReactNode }) {
   return <ThemeProvider {...props}>{children}</ThemeProvider>
@@ -37,7 +38,9 @@ export function Providers({ children }: { children: ReactNode }) {
         disableTransitionOnChange
       >
         <TerminalProvider>
-          {children}
+          <GlobalTerminalProvider>
+            {children}
+          </GlobalTerminalProvider>
         </TerminalProvider>
       </ThemeWrapper>
     </QueryClientProvider>