prjct-cli 0.13.2 → 0.15.0

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

@@ -0,0 +1,59 @@
+import { notFound } from 'next/navigation'
+import Link from 'next/link'
+import type { Metadata } from 'next'
+import { ArrowLeft } from 'lucide-react'
+import { getStats } from '@/lib/services/stats.server'
+import { getProject } from '@/lib/services/projects.server'
+import { getProjectEmoji } from '@/lib/project-colors'
+import { WeeklyReports } from '@/components/WeeklyReports'
+
+export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
+  const { id: projectId } = await params
+  const project = await getProject(projectId)
+  const projectName = project?.name ?? projectId
+  const emoji = getProjectEmoji(projectId)
+
+  return {
+    title: `${emoji} ${projectName} / Reports / p.`,
+  }
+}
+
+interface PageProps {
+  params: Promise<{ id: string }>
+}
+
+export default async function ReportsPage({ params }: PageProps) {
+  const { id: projectId } = await params
+
+  const [project, stats] = await Promise.all([
+    getProject(projectId),
+    getStats(projectId)
+  ])
+
+  if (!stats.hasData) {
+    notFound()
+  }
+
+  const projectName = project?.name ?? projectId
+
+  return (
+    <div className="flex h-full flex-col p-4 md:p-6 overflow-auto">
+      {/* Header with back navigation */}
+      <div className="pl-10 md:pl-0 mb-6">
+        <Link
+          href={`/project/${projectId}`}
+          className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors mb-4"
+        >
+          <ArrowLeft className="h-4 w-4" />
+          Back to {projectName}
+        </Link>
+        <h1 className="text-3xl font-bold">Weekly Reports</h1>
+      </div>
+
+      <div className="pl-10 md:pl-0">
+        <WeeklyReports stats={stats} projectName={projectName} />
+      </div>
+      <div className="h-4" />
+    </div>
+  )
+}

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

@@ -0,0 +1,58 @@
+import type { Metadata } from 'next'
+import { getStats } from '@/lib/services/stats.server'
+import { getProject } from '@/lib/projects'
+import { getProjectEmoji } from '@/lib/project-colors'
+import { PrintableReport } from '@/components/WeeklyReports/PrintableReport'
+
+export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
+  const { id: projectId } = await params
+  const project = await getProject(projectId)
+  const projectName = project?.name ?? projectId
+  const emoji = getProjectEmoji(projectId)
+
+  return {
+    title: `${emoji} ${projectName} / Print / p.`,
+  }
+}
+
+interface Props {
+  params: Promise<{ id: string }>
+  searchParams: Promise<{ weeks?: string; year?: string }>
+}
+
+export default async function PrintReportPage({ params, searchParams }: Props) {
+  const { id } = await params
+  const { weeks, year } = await searchParams
+
+  const project = await getProject(id)
+  if (!project) {
+    return <div className="p-8 text-center">Project not found</div>
+  }
+
+  const stats = await getStats(id)
+
+  // Parse weeks from query params (comma-separated)
+  const selectedWeeks = weeks
+    ? weeks.split(',').map(Number).filter(n => !isNaN(n))
+    : [getCurrentWeek()]
+
+  const selectedYear = year ? parseInt(year) : new Date().getFullYear()
+
+  return (
+    <PrintableReport
+      stats={stats}
+      projectName={project.name}
+      selectedWeeks={selectedWeeks}
+      year={selectedYear}
+    />
+  )
+}
+
+function getCurrentWeek(): number {
+  const now = new Date()
+  const d = new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate()))
+  const dayNum = d.getUTCDay() || 7
+  d.setUTCDate(d.getUTCDate() + 4 - dayNum)
+  const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1))
+  return Math.ceil((((d.getTime() - yearStart.getTime()) / 86400000) + 1) / 7)
+}

package/packages/web/components/ActivityTimeline/ActivityTimeline.tsx

@@ -16,7 +16,6 @@ export function ActivityTimeline({ timeline, className }: ActivityTimelineProps)
 
   return (
     <BentoCard
-      size="full"
       title="Recent Activity"
       icon={Activity}
       count={timeline.length > 0 ? `${timeline.length} events` : undefined}

package/packages/web/components/AgentsCard/AgentsCard.tsx

@@ -1,63 +1,93 @@
-import { BentoCard } from '@/components/BentoCard'
+'use client'
+
+import { useState } from 'react'
 import { EmptyState } from '@/components/EmptyState'
-import { Bot, Star, TrendingUp } from 'lucide-react'
+import { ExpandButton } from '@/components/ExpandButton'
+import { Bot, Star, TrendingUp, Wrench } from 'lucide-react'
 import { Badge } from '@/components/ui/badge'
 import { cn } from '@/lib/utils'
 import type { AgentsCardProps } from './AgentsCard.types'
 
-export function AgentsCard({ agents, className }: AgentsCardProps) {
-  const displayAgents = agents.slice(0, 8)
+const COLLAPSED_LIMIT = 12
+
+export function AgentsCard({ agents, codeHref, className }: AgentsCardProps) {
+  const [expanded, setExpanded] = useState(false)
+  const displayAgents = expanded ? agents : agents.slice(0, COLLAPSED_LIMIT)
+  const hasMore = agents.length > COLLAPSED_LIMIT
 
   return (
-    <BentoCard
-      size="1x1"
-      title="Agents"
-      icon={Bot}
-      count={agents.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">
+          <Bot className="h-4 w-4 text-muted-foreground" />
+          <span className="text-xs font-bold uppercase tracking-[0.15em] text-muted-foreground">
+            Agents
+          </span>
+        </div>
+        <span className="text-xs font-medium text-muted-foreground tabular-nums">
+          {agents.length} available
+        </span>
+      </div>
+
       {agents.length === 0 ? (
         <EmptyState
           icon={Bot}
           title="No agents"
           description="Run /p:sync to generate"
+          command="/p:sync"
+          href={codeHref}
           compact
         />
       ) : (
-        <div className="flex flex-wrap gap-1.5">
+        <div className="space-y-2">
           {displayAgents.map((agent) => {
             const hasPerformance = agent.successRate !== undefined
             const isTopPerformer = hasPerformance && agent.successRate! >= 80
 
             return (
-              <Badge
+              <div
                 key={agent.name}
-                variant="secondary"
-                className={cn(
-                  "text-xs px-2 py-0.5 font-mono inline-flex items-center gap-1",
-                  isTopPerformer && "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20"
-                )}
+                className="flex items-center justify-between gap-2 py-1.5 px-2 rounded-lg -mx-2 hover:bg-muted/50"
               >
-                {isTopPerformer && <Star className="h-2.5 w-2.5" />}
-                @{agent.name}
-                {hasPerformance && (
-                  <span className="text-[9px] opacity-70">
-                    {agent.successRate}%
-                  </span>
-                )}
-                {agent.improving && (
-                  <TrendingUp className="h-2.5 w-2.5 text-emerald-500" />
-                )}
-              </Badge>
+                <div className="flex items-center gap-2 min-w-0">
+                  {isTopPerformer ? (
+                    <Star className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+                  ) : (
+                    <Wrench className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+                  )}
+                  <span className="font-mono text-sm truncate">@{agent.name}</span>
+                </div>
+                <div className="flex items-center gap-2 shrink-0">
+                  {hasPerformance && (
+                    <span className="text-xs font-medium tabular-nums text-muted-foreground">
+                      {agent.successRate}%
+                    </span>
+                  )}
+                  {agent.improving && (
+                    <TrendingUp className="h-3 w-3 text-muted-foreground" />
+                  )}
+                  {agent.tasksCompleted !== undefined && agent.tasksCompleted > 0 && (
+                    <Badge variant="secondary" className="text-xs px-1.5 py-0 h-4">
+                      {agent.tasksCompleted} tasks
+                    </Badge>
+                  )}
+                </div>
+              </div>
             )
           })}
-          {agents.length > 8 && (
-            <Badge variant="outline" className="text-xs px-2 py-0.5">
-              +{agents.length - 8}
-            </Badge>
+          {hasMore && (
+            <ExpandButton
+              expanded={expanded}
+              totalCount={agents.length}
+              collapsedLimit={COLLAPSED_LIMIT}
+              onToggle={() => setExpanded(!expanded)}
+            />
           )}
         </div>
       )}
-    </BentoCard>
+    </div>
   )
 }

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

@@ -9,5 +9,6 @@ export interface Agent {
 
 export interface AgentsCardProps {
   agents: Agent[]
+  codeHref?: string
   className?: string
 }

package/packages/web/components/AppSidebar/AppSidebar.tsx

@@ -8,7 +8,11 @@ import {
   HelpCircle,
   Menu,
   PanelLeft,
+  Terminal,
 } from 'lucide-react'
+import { useGlobalTerminal } from '@/context/GlobalTerminalContext'
+import { Badge } from '@/components/ui/badge'
+import { ProjectSelectorModal } from '@/components/ProjectSelectorModal'
 import { Logo } from '@/components/Logo'
 import { cn } from '@/lib/utils'
 import { useState, useEffect } from 'react'
@@ -22,11 +26,15 @@ const navItems = [
 function SidebarContent({
   onNavigate,
   isCollapsed = false,
-  onToggleCollapse
+  onToggleCollapse,
+  onTerminalClick,
+  sessionCount
 }: {
   onNavigate?: () => void
   isCollapsed?: boolean
   onToggleCollapse?: () => void
+  onTerminalClick?: () => void
+  sessionCount?: number
 }) {
   const pathname = usePathname()
 
@@ -94,6 +102,45 @@ function SidebarContent({
             }
             return linkContent
           })}
+
+          {/* Terminal Button */}
+          {onTerminalClick && (
+            (() => {
+              const terminalButton = (
+                <button
+                  onClick={onTerminalClick}
+                  className={cn(
+                    'flex items-center rounded-md transition-colors min-h-[44px] w-full',
+                    isCollapsed ? 'justify-center px-2' : 'gap-3 px-3',
+                    'py-2.5',
+                    'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
+                  )}
+                >
+                  <div className="relative">
+                    <Terminal className="h-5 w-5 shrink-0" />
+                    {sessionCount !== undefined && sessionCount > 0 && (
+                      <Badge
+                        className="absolute -top-2 -right-2 h-4 w-4 p-0 flex items-center justify-center text-[10px] bg-primary"
+                      >
+                        {sessionCount}
+                      </Badge>
+                    )}
+                  </div>
+                  {!isCollapsed && <span className="text-sm font-medium">Terminal</span>}
+                </button>
+              )
+
+              if (isCollapsed) {
+                return (
+                  <Tooltip key="terminal">
+                    <TooltipTrigger asChild>{terminalButton}</TooltipTrigger>
+                    <TooltipContent side="right">Terminal</TooltipContent>
+                  </Tooltip>
+                )
+              }
+              return terminalButton
+            })()
+          )}
         </div>
       </nav>
 
@@ -138,10 +185,66 @@ function SidebarContent({
   )
 }
 
+const SIDEBAR_COLLAPSED_KEY = 'prjct-sidebar-collapsed'
+
 export function AppSidebar() {
   const [isOpen, setIsOpen] = useState(false)
   const [isMobile, setIsMobile] = useState(false)
   const [isCollapsed, setIsCollapsed] = useState(false)
+  const [showProjectSelector, setShowProjectSelector] = useState(false)
+  const pathname = usePathname()
+
+  // Terminal context
+  const {
+    toggleDock,
+    openDock,
+    getTotalSessionCount,
+    projectSessions,
+    createSessionForProject,
+  } = useGlobalTerminal()
+
+  const sessionCount = getTotalSessionCount()
+
+  // Handle terminal button click
+  const handleTerminalClick = () => {
+    // If we're on a project page, auto-detect project
+    const projectMatch = pathname?.match(/\/project\/([^/]+)/)
+
+    if (projectMatch) {
+      const projectId = projectMatch[1]
+      const existingProject = projectSessions.get(projectId)
+
+      if (existingProject) {
+        // Project already has sessions, just toggle dock
+        toggleDock()
+      } else {
+        // Need to show project selector to get project details
+        // For now, open dock (will be empty) - the user should create session from the dock
+        setShowProjectSelector(true)
+      }
+    } else if (sessionCount > 0) {
+      // Has sessions, toggle dock
+      toggleDock()
+    } else {
+      // No sessions and no project context - show project selector
+      setShowProjectSelector(true)
+    }
+  }
+
+  // Load collapsed state from localStorage on mount
+  useEffect(() => {
+    const stored = localStorage.getItem(SIDEBAR_COLLAPSED_KEY)
+    if (stored !== null) {
+      setIsCollapsed(stored === 'true')
+    }
+  }, [])
+
+  // Persist collapsed state to localStorage
+  const handleToggleCollapse = () => {
+    const newValue = !isCollapsed
+    setIsCollapsed(newValue)
+    localStorage.setItem(SIDEBAR_COLLAPSED_KEY, String(newValue))
+  }
 
   // Detect mobile on mount and resize
   useEffect(() => {
@@ -166,7 +269,11 @@ export function AppSidebar() {
           </button>
         </SheetTrigger>
         <SheetContent side="left" className="w-[280px] p-0 flex flex-col">
-          <SidebarContent onNavigate={() => setIsOpen(false)} />
+          <SidebarContent
+            onNavigate={() => setIsOpen(false)}
+            onTerminalClick={handleTerminalClick}
+            sessionCount={sessionCount}
+          />
         </SheetContent>
       </Sheet>
     )
@@ -174,15 +281,32 @@ export function AppSidebar() {
 
   // Desktop: Collapsible sidebar
   return (
-    <aside className={cn(
-      "hidden md:flex h-full flex-col border-r border-border bg-card transition-all duration-200",
-      isCollapsed ? "w-14" : "w-60"
-    )}>
-      <SidebarContent
-        isCollapsed={isCollapsed}
-        onToggleCollapse={() => setIsCollapsed(!isCollapsed)}
-      />
-    </aside>
+    <>
+      <aside className={cn(
+        "hidden md:flex h-full flex-col border-r border-border bg-card transition-all duration-200",
+        isCollapsed ? "w-14" : "w-60"
+      )}>
+        <SidebarContent
+          isCollapsed={isCollapsed}
+          onToggleCollapse={handleToggleCollapse}
+          onTerminalClick={handleTerminalClick}
+          sessionCount={sessionCount}
+        />
+      </aside>
+
+      {/* Project Selector Modal - will be implemented separately */}
+      {showProjectSelector && (
+        <ProjectSelectorModal
+          isOpen={showProjectSelector}
+          onClose={() => setShowProjectSelector(false)}
+          onSelectProject={(projectId, projectName, projectPath) => {
+            createSessionForProject(projectId, projectName, projectPath)
+            openDock()
+            setShowProjectSelector(false)
+          }}
+        />
+      )}
+    </>
   )
 }
 

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

@@ -10,7 +10,7 @@ export const BENTO_SIZE_CLASSES: Record<BentoSize, string> = {
 
 export const ACCENT_STYLES: Record<AccentColor, string> = {
   default: '',
-  success: 'border-emerald-500/20 bg-emerald-500/5',
-  warning: 'border-amber-500/20 bg-amber-500/5',
-  destructive: 'border-destructive/20 bg-destructive/5',
+  success: 'border-muted-foreground/20',
+  warning: 'border-muted-foreground/20',
+  destructive: 'border-muted-foreground/20',
 }

package/packages/web/components/BentoCard/BentoCard.tsx

@@ -19,6 +19,7 @@ export function BentoCard({
         'p-3 sm:p-4',
         'hover:shadow-md hover:border-foreground/20',
         'active:scale-[0.99]',
+        'min-w-0 max-w-full',
         BENTO_SIZE_CLASSES[size],
         ACCENT_STYLES[accentColor],
         className
@@ -29,7 +30,7 @@ export function BentoCard({
           <div className="flex items-center gap-2">
             {Icon && <Icon className="h-4 w-4 sm:h-3.5 sm:w-3.5 text-muted-foreground" />}
             {title && (
-              <span className="text-[11px] sm:text-[10px] font-bold uppercase tracking-[0.15em] text-muted-foreground">
+              <span className="text-xs font-bold uppercase tracking-wider text-muted-foreground">
                 {title}
               </span>
             )}

package/packages/web/components/BentoGrid/BentoGrid.tsx

@@ -7,8 +7,8 @@ export function BentoGrid({ className, children }: BentoGridProps) {
       className={cn(
         'grid',
         'gap-3 sm:gap-4',
-        'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
-        'auto-rows-[minmax(120px,auto)] sm:auto-rows-[minmax(140px,auto)]',
+        'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
+        'auto-rows-[minmax(160px,auto)] sm:auto-rows-[minmax(180px,auto)]',
         className
       )}
     >

package/packages/web/components/BlockersCard/BlockersCard.tsx

@@ -1,67 +1,75 @@
-import { BentoCard } from '@/components/BentoCard'
-import { AlertTriangle, Clock } from 'lucide-react'
+'use client'
+
+import { useState } from 'react'
+import { AlertTriangle, Clock, CheckCircle2 } from 'lucide-react'
+import { ExpandButton } from '@/components/ExpandButton'
 import { cn } from '@/lib/utils'
 import type { BlockersCardProps } from './BlockersCard.types'
 
-export function BlockersCard({ blockers, className }: BlockersCardProps) {
+const COLLAPSED_LIMIT = 5
+
+export function BlockersCard({ blockers, codeHref, className }: BlockersCardProps) {
+  const [expanded, setExpanded] = useState(false)
   const hasBlockers = blockers.length > 0
+  const displayBlockers = expanded ? blockers : blockers.slice(0, COLLAPSED_LIMIT)
+  const hasMore = blockers.length > COLLAPSED_LIMIT
 
   return (
-    <BentoCard
-      size="1x1"
-      title="Blockers"
-      icon={AlertTriangle}
-      className={cn(
-        hasBlockers && 'border-amber-500/50 dark:border-amber-500/30',
-        className
-      )}
-    >
-      <div className="flex flex-col h-full">
-        {!hasBlockers ? (
-          <div className="flex flex-col items-center justify-center h-full text-center">
-            <div className="text-2xl mb-1">&#x2705;</div>
-            <p className="text-sm text-muted-foreground">No blockers</p>
-            <p className="text-xs text-muted-foreground mt-1">Keep the momentum!</p>
-          </div>
-        ) : (
-          <>
-            <div className="flex items-center gap-2 mb-2">
-              <span className="text-2xl font-bold text-amber-600 dark:text-amber-400">
-                {blockers.length}
-              </span>
-              <span className="text-xs text-muted-foreground">
-                {blockers.length === 1 ? 'task blocked' : 'tasks blocked'}
-              </span>
-            </div>
-
-            <div className="flex-1 overflow-auto space-y-2">
-              {blockers.slice(0, 3).map((blocker, i) => (
-                <div
-                  key={i}
-                  className="p-2 rounded-md bg-amber-500/10 dark:bg-amber-500/5 border border-amber-500/20"
-                >
-                  <p className="text-xs font-medium truncate">{blocker.task}</p>
-                  <p className="text-xs text-muted-foreground truncate mt-0.5">
-                    {blocker.reason}
-                  </p>
-                  <div className="flex items-center gap-1 mt-1">
-                    <Clock className="h-3 w-3 text-muted-foreground" />
-                    <span className="text-xs text-muted-foreground">
-                      {blocker.daysBlocked}d
-                    </span>
-                  </div>
-                </div>
-              ))}
-            </div>
-
-            {blockers.length > 3 && (
-              <p className="text-xs text-muted-foreground mt-2">
-                +{blockers.length - 3} more
-              </p>
-            )}
-          </>
+    <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">
+          <AlertTriangle className="h-4 w-4 text-muted-foreground" />
+          <span className="text-xs font-bold uppercase tracking-[0.15em] text-muted-foreground">
+            Blockers
+          </span>
+        </div>
+        {hasBlockers && (
+          <span className="text-xs font-bold text-muted-foreground tabular-nums">
+            {blockers.length}
+          </span>
         )}
       </div>
-    </BentoCard>
+
+      {!hasBlockers ? (
+        <div className="flex items-center gap-3 py-2">
+          <CheckCircle2 className="h-5 w-5 text-muted-foreground" />
+          <div>
+            <p className="text-sm font-medium">No blockers</p>
+            <p className="text-xs text-muted-foreground">Keep the momentum</p>
+          </div>
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {displayBlockers.map((blocker, i) => (
+            <div
+              key={i}
+              className="p-2.5 rounded-lg bg-muted/50 border"
+            >
+              <p className="text-sm font-medium">{blocker.task}</p>
+              <p className="text-xs text-muted-foreground mt-0.5">
+                {blocker.reason}
+              </p>
+              <div className="flex items-center gap-1 mt-1.5">
+                <Clock className="h-3 w-3 text-muted-foreground" />
+                <span className="text-xs font-medium text-muted-foreground">
+                  {blocker.daysBlocked} day{blocker.daysBlocked !== 1 ? 's' : ''} blocked
+                </span>
+              </div>
+            </div>
+          ))}
+          {hasMore && (
+            <ExpandButton
+              expanded={expanded}
+              totalCount={blockers.length}
+              collapsedLimit={COLLAPSED_LIMIT}
+              onToggle={() => setExpanded(!expanded)}
+            />
+          )}
+        </div>
+      )}
+    </div>
   )
 }

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

@@ -7,5 +7,6 @@ export interface Blocker {
 
 export interface BlockersCardProps {
   blockers: Blocker[]
+  codeHref?: string
   className?: string
 }