prjct-cli 0.13.2 → 0.15.0

package/packages/web/components/QueueCard/QueueCard.tsx

@@ -1,72 +1,125 @@
-import { BentoCard } from '@/components/BentoCard'
+'use client'
+
+import { useState } from 'react'
+import Link from 'next/link'
 import { EmptyState } from '@/components/EmptyState'
-import { ListTodo, Bot } from 'lucide-react'
+import { ExpandButton } from '@/components/ExpandButton'
+import { ListTodo, Bot, Play, X } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { getPriorityColor } from './QueueCard.utils'
 import type { QueueCardProps } from './QueueCard.types'
 
-export function QueueCard({ queue, className }: QueueCardProps) {
-  const displayItems = queue.slice(0, 5)
-  const remaining = queue.length - 5
+const COLLAPSED_LIMIT = 10
+const EXPANDED_LIMIT = 50
+
+export function QueueCard({ queue, codeHref, className }: QueueCardProps) {
+  const [expanded, setExpanded] = useState(false)
+  const limit = expanded ? EXPANDED_LIMIT : COLLAPSED_LIMIT
+  const displayItems = queue.slice(0, limit)
+  const hasMore = queue.length > limit
 
   return (
-    <BentoCard
-      size="1x2"
-      title="Queue"
-      icon={ListTodo}
-      count={queue.length}
-      className={className}
-    >
+    <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">
+          <ListTodo className="h-4 w-4 text-muted-foreground" />
+          <span className="text-xs font-bold uppercase tracking-[0.15em] text-muted-foreground">
+            Queue
+          </span>
+        </div>
+        <span className="text-xs font-medium text-muted-foreground tabular-nums">
+          {queue.length} tasks
+        </span>
+      </div>
+
       {queue.length === 0 ? (
         <EmptyState
           icon={ListTodo}
           title="Queue empty"
           description="Plan your next tasks"
           command="/p:next"
+          href={codeHref}
           compact
         />
       ) : (
-        <div className="space-y-2">
+        <div className="space-y-1.5">
           {displayItems.map((item, i) => {
             const priorityColor = getPriorityColor(item.priority)
+            const startHref = codeHref
+              ? `${codeHref}?cmd=${encodeURIComponent(`p. now "${item.task}"`)}`
+              : undefined
+            const deleteHref = codeHref
+              ? `${codeHref}?cmd=${encodeURIComponent(`p. queue remove ${i + 1}`)}`
+              : undefined
+
             return (
-              <div key={i} className="flex items-start gap-2 group">
+              <div
+                key={i}
+                className="flex items-start gap-2 group py-1.5 hover:bg-muted/50 rounded px-1 -mx-1"
+              >
                 <span className={cn(
-                  "text-[10px] font-medium w-4 shrink-0 pt-0.5 tabular-nums",
+                  "text-xs font-bold w-5 shrink-0 pt-0.5 tabular-nums",
                   priorityColor
                 )}>
-                  {i + 1}
+                  {i + 1}.
                 </span>
                 <div className="flex-1 min-w-0">
-                  <p className="text-sm leading-tight truncate group-hover:text-foreground transition-colors">
+                  <p className="text-sm leading-tight">
                     {item.task}
                   </p>
                   {(item.suggestedAgent || item.estimatedDuration) && (
                     <div className="flex items-center gap-2 mt-0.5">
                       {item.suggestedAgent && (
-                        <span className="inline-flex items-center gap-0.5 text-[9px] text-muted-foreground">
-                          <Bot className="h-2.5 w-2.5" />
+                        <span className="inline-flex items-center gap-0.5 text-xs text-muted-foreground">
+                          <Bot className="h-3 w-3" />
                           {item.suggestedAgent}
                         </span>
                       )}
                       {item.estimatedDuration && (
-                        <span className="text-[9px] text-muted-foreground">
+                        <span className="text-xs text-muted-foreground">
                           ~{item.estimatedDuration}
                         </span>
                       )}
                     </div>
                   )}
                 </div>
+                {/* Always visible action buttons */}
+                <div className="flex items-center gap-1 shrink-0">
+                  {startHref && (
+                    <Link
+                      href={startHref}
+                      className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+                      title="Start now"
+                    >
+                      <Play 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="Remove from queue"
+                    >
+                      <X className="h-3.5 w-3.5" />
+                    </Link>
+                  )}
+                </div>
               </div>
             )
           })}
-          {remaining > 0 && (
-            <p className="text-[10px] text-muted-foreground mt-2 pl-6">
-              +{remaining} more
-            </p>
+          {(hasMore || expanded) && queue.length > COLLAPSED_LIMIT && (
+            <ExpandButton
+              expanded={expanded}
+              totalCount={queue.length}
+              collapsedLimit={COLLAPSED_LIMIT}
+              onToggle={() => setExpanded(!expanded)}
+            />
           )}
         </div>
       )}
-    </BentoCard>
+    </div>
   )
 }

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

@@ -7,5 +7,6 @@ export interface QueueItem {
 
 export interface QueueCardProps {
   queue: QueueItem[]
+  codeHref?: string
   className?: string
 }

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

@@ -1,9 +1,9 @@
 export function getPriorityColor(priority?: 'low' | 'medium' | 'high' | 'critical' | number): string {
   if (typeof priority === 'string') {
     const colors: Record<string, string> = {
-      critical: 'text-red-500',
-      high: 'text-amber-500',
-      medium: 'text-blue-500',
+      critical: 'text-foreground font-bold',
+      high: 'text-foreground',
+      medium: 'text-muted-foreground',
       low: 'text-muted-foreground',
     }
     return colors[priority] ?? 'text-muted-foreground'

package/packages/web/components/RecoverCard/RecoverCard.tsx

@@ -0,0 +1,72 @@
+'use client'
+
+import Link from 'next/link'
+import { AlertCircle, ChevronRight, Clock, MessageSquare } from 'lucide-react'
+import { Badge } from '@/components/ui/badge'
+import { cn } from '@/lib/utils'
+import type { RecoverCardProps } from './RecoverCard.types'
+
+export function RecoverCard({ abandonedSessions, codeHref, className }: RecoverCardProps) {
+  if (abandonedSessions.length === 0) return null
+
+  return (
+    <div className={cn(
+      'relative overflow-hidden rounded-xl border border-yellow-500/30 bg-yellow-500/5 p-4 min-w-0 max-w-full',
+      className
+    )}>
+      <div className="flex items-center justify-between mb-3 min-w-0">
+        <div className="flex items-center gap-2 min-w-0">
+          <AlertCircle className="h-4 w-4 text-yellow-500 shrink-0" />
+          <span className="text-xs font-bold uppercase tracking-[0.15em] text-yellow-600 dark:text-yellow-500 truncate">
+            Recover
+          </span>
+        </div>
+        <Badge variant="outline" className="text-yellow-600 dark:text-yellow-500 border-yellow-500/50 shrink-0">
+          {abandonedSessions.length}
+        </Badge>
+      </div>
+
+      <div className="space-y-2 min-w-0 max-w-full">
+        {abandonedSessions.slice(0, 3).map((session) => (
+          <Link
+            key={session.id}
+            href={`${codeHref}?cmd=p.%20recover`}
+            className="block py-2 px-2 -mx-2 hover:bg-yellow-500/10 rounded-lg transition-colors group"
+          >
+            <div className="flex items-start justify-between gap-2">
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium leading-tight truncate group-hover:text-foreground transition-colors">
+                  {session.task}
+                </p>
+                <div className="flex items-center gap-2 mt-1 text-xs text-muted-foreground">
+                  <Clock className="h-3 w-3 shrink-0" />
+                  <span>{session.hoursAgo}h ago</span>
+                  {session.projectName && (
+                    <>
+                      <span className="text-muted-foreground/50">|</span>
+                      <span className="truncate">{session.projectName}</span>
+                    </>
+                  )}
+                </div>
+                {session.prompt && (
+                  <div className="flex items-start gap-1.5 mt-1.5">
+                    <MessageSquare className="h-3 w-3 text-muted-foreground/70 shrink-0 mt-0.5" />
+                    <p className="text-xs text-muted-foreground/70 italic line-clamp-2">
+                      &quot;{session.prompt.slice(0, 80)}{session.prompt.length > 80 ? '...' : ''}&quot;
+                    </p>
+                  </div>
+                )}
+              </div>
+              <ChevronRight className="h-4 w-4 text-muted-foreground/50 opacity-0 group-hover:opacity-100 transition-opacity shrink-0 mt-1" />
+            </div>
+          </Link>
+        ))}
+        {abandonedSessions.length > 3 && (
+          <p className="text-xs text-yellow-600/70 dark:text-yellow-500/70 text-center pt-1">
+            +{abandonedSessions.length - 3} more abandoned sessions
+          </p>
+        )}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,16 @@
+export interface AbandonedSession {
+  id: string
+  task: string
+  projectId: string
+  projectName?: string
+  startedAt: string
+  lastActivity?: string
+  hoursAgo: number
+  prompt?: string
+}
+
+export interface RecoverCardProps {
+  abandonedSessions: AbandonedSession[]
+  codeHref: string
+  className?: string
+}

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

@@ -0,0 +1,2 @@
+export { RecoverCard } from './RecoverCard'
+export type { RecoverCardProps, AbandonedSession } from './RecoverCard.types'

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

@@ -1,77 +1,145 @@
-import { BentoCard } from '@/components/BentoCard'
+'use client'
+
+import Link from 'next/link'
 import { EmptyState } from '@/components/EmptyState'
-import { Map } from 'lucide-react'
+import { Map, ChevronRight, CheckCircle2, Circle } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import type { RoadmapCardProps } from './RoadmapCard.types'
 
-export function RoadmapCard({ roadmap, className }: RoadmapCardProps) {
+// Traffic light colors for progress: green=100%, yellow=50-99%, red=<50%
+function getProgressColor(progress: number): string {
+  if (progress >= 100) return 'bg-emerald-500'
+  if (progress >= 50) return 'bg-amber-500'
+  return 'bg-red-500'
+}
+
+export function RoadmapCard({ roadmap, codeHref, 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}
-    >
+    <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">
+          <Map className="h-4 w-4 text-muted-foreground" />
+          <span className="text-xs font-bold uppercase tracking-[0.15em] text-muted-foreground">
+            Roadmap
+          </span>
+        </div>
+        {hasPhases && (
+          <span className="text-xs font-bold tabular-nums">
+            {roadmap.progress}%
+          </span>
+        )}
+      </div>
+
       {!hasPhases ? (
         <EmptyState
           icon={Map}
           title="No roadmap yet"
           description="Plan your features"
           command="/p:feature"
+          href={codeHref}
         />
       ) : (
-        <div className="flex flex-col h-full">
-          <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 className="space-y-4">
+          {/* Overall progress */}
+          <div>
+            <div className="flex items-center justify-between mb-2">
+              <span className="text-xs text-muted-foreground">Overall progress</span>
+              <span className="text-sm font-bold tabular-nums">{roadmap.progress}%</span>
             </div>
-            <div className="h-2 bg-muted rounded-full overflow-hidden">
+            <div className="h-3 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'
-                )}
+                className={cn("h-full rounded-full transition-all duration-500", getProgressColor(roadmap.progress))}
                 style={{ width: `${roadmap.progress}%` }}
               />
             </div>
           </div>
 
-          <div className="space-y-3 flex-1">
+          {/* Phases with features */}
+          <div className="space-y-4">
             {roadmap.phases
               .filter(p => (p.features || []).length > 0)
-              .slice(0, 4)
+              .slice(0, 6)
               .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">
+                <div key={phase.name} className="group">
+                  <div className="flex items-center justify-between mb-2">
+                    <div className="flex items-center gap-2">
+                      {phase.progress === 100 ? (
+                        <CheckCircle2 className="h-4 w-4 text-muted-foreground" />
+                      ) : (
+                        <Circle className="h-4 w-4 text-muted-foreground" />
+                      )}
+                      <span className="text-sm font-medium">
+                        {phase.name}
+                      </span>
+                    </div>
+                    <span className="text-xs font-bold tabular-nums shrink-0 ml-2 text-muted-foreground">
                       {phase.progress}%
                     </span>
                   </div>
-                  <div className="h-1.5 bg-muted rounded-full overflow-hidden">
+                  <div className="h-2 bg-muted rounded-full overflow-hidden ml-6">
                     <div
-                      className={cn(
-                        'h-full rounded-full transition-all duration-300',
-                        phase.progress === 100 ? 'bg-emerald-500' : 'bg-foreground/70'
-                      )}
+                      className={cn("h-full rounded-full transition-all duration-300", getProgressColor(phase.progress))}
                       style={{ width: `${phase.progress}%` }}
                     />
                   </div>
+                  {/* Show features under each phase */}
+                  {phase.features && phase.features.length > 0 && (
+                    <div className="ml-6 mt-2 space-y-1">
+                      {phase.features.slice(0, 3).map((feature, i) => {
+                        const isCompleted = feature.status === 'completed'
+                        const cmdHref = codeHref && !isCompleted
+                          ? `${codeHref}?cmd=${encodeURIComponent(`p. work "${feature.name}"`)}`
+                          : undefined
+
+                        const content = (
+                          <>
+                            <ChevronRight className="h-3 w-3 shrink-0" />
+                            <span className={cn(
+                              'truncate',
+                              isCompleted && 'line-through opacity-60'
+                            )}>
+                              {feature.name}
+                            </span>
+                          </>
+                        )
+
+                        return cmdHref ? (
+                          <Link
+                            key={i}
+                            href={cmdHref}
+                            className="flex items-center gap-2 text-xs text-muted-foreground hover:text-foreground hover:bg-muted/50 rounded px-1 -mx-1 py-0.5 transition-colors cursor-pointer"
+                          >
+                            {content}
+                          </Link>
+                        ) : (
+                          <div key={i} className="flex items-center gap-2 text-xs text-muted-foreground">
+                            {content}
+                          </div>
+                        )
+                      })}
+                      {phase.features.length > 3 && (
+                        <span className="text-xs text-muted-foreground/70 ml-5">
+                          +{phase.features.length - 3} more
+                        </span>
+                      )}
+                    </div>
+                  )}
                 </div>
               ))}
           </div>
 
           {roadmap.phases.length > 0 && (
-            <p className="text-[10px] text-muted-foreground mt-3">
+            <p className="text-xs text-muted-foreground border-t pt-3 mt-3">
               {roadmap.phases.reduce((acc, p) => acc + (p.features?.length || 0), 0)} features across {roadmap.phases.length} phases
             </p>
           )}
         </div>
       )}
-    </BentoCard>
+    </div>
   )
 }

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

@@ -11,5 +11,6 @@ export interface RoadmapData {
 
 export interface RoadmapCardProps {
   roadmap: RoadmapData | null
+  codeHref?: string
   className?: string
 }

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

@@ -1,52 +1,95 @@
-import { BentoCard } from '@/components/BentoCard'
+'use client'
+
+import { useState } from 'react'
 import { EmptyState } from '@/components/EmptyState'
-import { Rocket } from 'lucide-react'
+import { ExpandButton } from '@/components/ExpandButton'
+import { Rocket, Clock, FileCode, Check } from 'lucide-react'
 import { Badge } from '@/components/ui/badge'
+import { cn } from '@/lib/utils'
 import { formatShipDate } from './ShipsCard.utils'
 import type { ShipsCardProps } from './ShipsCard.types'
 
-export function ShipsCard({ ships, totalShips = 0, className }: ShipsCardProps) {
-  const displayShips = ships.slice(0, 4)
+const COLLAPSED_LIMIT = 10
+
+export function ShipsCard({ ships, totalShips = 0, codeHref, className }: ShipsCardProps) {
+  const [expanded, setExpanded] = useState(false)
+  const displayShips = expanded ? ships : ships.slice(0, COLLAPSED_LIMIT)
+  const hasMore = ships.length > COLLAPSED_LIMIT
 
   return (
-    <BentoCard
-      size="1x2"
-      title="Ships"
-      icon={Rocket}
-      count={totalShips}
-      accentColor={ships.length > 0 ? 'success' : 'default'}
-      className={className}
-    >
+    <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">
+          <Rocket className="h-4 w-4 text-muted-foreground" />
+          <span className="text-xs font-bold uppercase tracking-[0.15em] text-muted-foreground">
+            Shipped
+          </span>
+        </div>
+        <span className="text-xs font-medium text-muted-foreground tabular-nums">
+          {totalShips} total
+        </span>
+      </div>
+
       {ships.length === 0 ? (
         <EmptyState
           icon={Rocket}
           title="Nothing shipped yet"
           description="Ship your first feature"
           command="/p:ship"
+          href={codeHref}
           compact
         />
       ) : (
-        <div className="space-y-3">
+        <div className="space-y-2">
           {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 key={i} className="group py-1.5 hover:bg-muted/50 rounded px-2 -mx-2 border-l-2 border-transparent hover:border-foreground/20">
+              <div className="flex items-start justify-between gap-2">
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2">
+                    <Check className="h-3 w-3 text-muted-foreground shrink-0" />
+                    <p className="text-sm font-medium truncate">
+                      {ship.name}
+                    </p>
+                    {ship.version && (
+                      <Badge variant="outline" className="text-xs px-1 py-0 font-mono shrink-0 h-4">
+                        {ship.version}
+                      </Badge>
+                    )}
+                  </div>
+                  <div className="flex items-center gap-3 mt-1 ml-5">
+                    <span className="text-xs text-muted-foreground">
+                      {formatShipDate(ship.date)}
+                    </span>
+                    {ship.duration && (
+                      <span className="inline-flex items-center gap-0.5 text-xs text-muted-foreground">
+                        <Clock className="h-2.5 w-2.5" />
+                        {ship.duration}
+                      </span>
+                    )}
+                    {ship.filesChanged && (
+                      <span className="inline-flex items-center gap-0.5 text-xs text-muted-foreground">
+                        <FileCode className="h-2.5 w-2.5" />
+                        {ship.filesChanged} files
+                      </span>
+                    )}
+                  </div>
+                </div>
               </div>
-              <p className="text-[10px] text-muted-foreground mt-0.5">
-                {formatShipDate(ship.date)}
-                {ship.duration && ` · ${ship.duration}`}
-              </p>
             </div>
           ))}
+          {hasMore && (
+            <ExpandButton
+              expanded={expanded}
+              totalCount={ships.length}
+              collapsedLimit={COLLAPSED_LIMIT}
+              onToggle={() => setExpanded(!expanded)}
+            />
+          )}
         </div>
       )}
-    </BentoCard>
+    </div>
   )
 }

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

@@ -3,10 +3,12 @@ export interface Ship {
   date: string
   version?: string
   duration?: string
+  filesChanged?: number
 }
 
 export interface ShipsCardProps {
   ships: Ship[]
   totalShips?: number
+  codeHref?: string
   className?: string
 }

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

@@ -16,23 +16,25 @@ export function SparklineChart({
   }
 
   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>
+    <div className="w-full min-w-0" style={{ height }}>
+      <ResponsiveContainer width="100%" height="100%">
+        <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>
+    </div>
   )
 }