prjct-cli 0.11.5 → 0.12.1

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

@@ -0,0 +1,50 @@
+'use client'
+
+import { Activity } from 'lucide-react'
+import { BentoCard } from '@/components/BentoCard'
+import { EmptyState } from '@/components/EmptyState'
+import { DateGroup } from '@/components/DateGroup'
+import { ExpandButton } from '@/components/ExpandButton'
+import { useExpandable, useGroupedEvents } from './hooks'
+import { TIMELINE_COLLAPSED_LIMIT, TIMELINE_EXPANDED_LIMIT } from './ActivityTimeline.constants'
+import type { ActivityTimelineProps } from './ActivityTimeline.types'
+
+export function ActivityTimeline({ timeline, className }: ActivityTimelineProps) {
+  const { expanded, toggle } = useExpandable(false)
+  const limit = expanded ? TIMELINE_EXPANDED_LIMIT : TIMELINE_COLLAPSED_LIMIT
+  const { grouped, hasMore } = useGroupedEvents(timeline, limit)
+
+  return (
+    <BentoCard
+      size="full"
+      title="Recent Activity"
+      icon={Activity}
+      count={timeline.length > 0 ? `${timeline.length} events` : undefined}
+      className={className}
+    >
+      {timeline.length === 0 ? (
+        <EmptyState
+          icon={Activity}
+          title="No recent activity"
+          description="Activity will appear as you work"
+          compact
+        />
+      ) : (
+        <div className="space-y-3 sm:space-y-4">
+          {Array.from(grouped.entries()).map(([dateKey, events]) => (
+            <DateGroup key={dateKey} dateKey={dateKey} events={events} />
+          ))}
+
+          {hasMore && (
+            <ExpandButton
+              expanded={expanded}
+              totalCount={timeline.length}
+              collapsedLimit={TIMELINE_COLLAPSED_LIMIT}
+              onToggle={toggle}
+            />
+          )}
+        </div>
+      )}
+    </BentoCard>
+  )
+}

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

@@ -0,0 +1,8 @@
+import type { TimelineEvent } from '@/lib/parse-prjct-files'
+
+export type { TimelineEvent }
+
+export interface ActivityTimelineProps {
+  timeline: TimelineEvent[]
+  className?: string
+}

package/packages/web/components/ActivityTimeline/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useExpandable } from './useExpandable'
+export { useGroupedEvents } from './useGroupedEvents'

package/packages/web/components/ActivityTimeline/hooks/useExpandable.ts

@@ -0,0 +1,9 @@
+'use client'
+
+import { useState } from 'react'
+
+export function useExpandable(initialExpanded: boolean = false) {
+  const [expanded, setExpanded] = useState(initialExpanded)
+  const toggle = () => setExpanded(prev => !prev)
+  return { expanded, toggle }
+}

package/packages/web/components/ActivityTimeline/hooks/useGroupedEvents.ts

@@ -0,0 +1,23 @@
+'use client'
+
+import { useMemo } from 'react'
+import type { TimelineEvent } from '../ActivityTimeline.types'
+
+export function useGroupedEvents(events: TimelineEvent[], limit: number) {
+  return useMemo(() => {
+    const displayEvents = events.slice(0, limit)
+    const groups = new Map<string, TimelineEvent[]>()
+
+    displayEvents.forEach(event => {
+      if (!event.ts) return
+      const dateKey = event.ts.split('T')[0]
+      const existing = groups.get(dateKey) ?? []
+      groups.set(dateKey, [...existing, event])
+    })
+
+    return {
+      grouped: groups,
+      hasMore: events.length > limit,
+    }
+  }, [events, limit])
+}

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

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

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

@@ -0,0 +1,63 @@
+import { BentoCard } from '@/components/BentoCard'
+import { EmptyState } from '@/components/EmptyState'
+import { Bot, Star, TrendingUp } 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)
+
+  return (
+    <BentoCard
+      size="1x1"
+      title="Agents"
+      icon={Bot}
+      count={agents.length}
+      className={className}
+    >
+      {agents.length === 0 ? (
+        <EmptyState
+          icon={Bot}
+          title="No agents"
+          description="Run /p:sync to generate"
+          compact
+        />
+      ) : (
+        <div className="flex flex-wrap gap-1.5">
+          {displayAgents.map((agent) => {
+            const hasPerformance = agent.successRate !== undefined
+            const isTopPerformer = hasPerformance && agent.successRate! >= 80
+
+            return (
+              <Badge
+                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"
+                )}
+              >
+                {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>
+            )
+          })}
+          {agents.length > 8 && (
+            <Badge variant="outline" className="text-xs px-2 py-0.5">
+              +{agents.length - 8}
+            </Badge>
+          )}
+        </div>
+      )}
+    </BentoCard>
+  )
+}

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

@@ -0,0 +1,13 @@
+export interface Agent {
+  name: string
+  description?: string
+  successRate?: number
+  tasksCompleted?: number
+  improving?: boolean
+  bestFor?: string[]
+}
+
+export interface AgentsCardProps {
+  agents: Agent[]
+  className?: string
+}

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

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

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

@@ -0,0 +1,190 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import {
+  LayoutDashboard,
+  Settings,
+  HelpCircle,
+  Menu,
+  PanelLeft,
+} from 'lucide-react'
+import { Logo } from '@/components/Logo'
+import { cn } from '@/lib/utils'
+import { useState, useEffect } from 'react'
+import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+
+const navItems = [
+  { href: '/', icon: LayoutDashboard, label: 'Dashboard' },
+]
+
+function SidebarContent({
+  onNavigate,
+  isCollapsed = false,
+  onToggleCollapse
+}: {
+  onNavigate?: () => void
+  isCollapsed?: boolean
+  onToggleCollapse?: () => void
+}) {
+  const pathname = usePathname()
+
+  return (
+    <>
+      {/* Header */}
+      <div className={cn(
+        "flex h-14 items-center border-b border-border",
+        isCollapsed ? "justify-center px-2" : "justify-between px-3"
+      )}>
+        <Link href="/" onClick={onNavigate}>
+          <Logo size="xs" showText={!isCollapsed} rounded />
+        </Link>
+        {onToggleCollapse && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                onClick={onToggleCollapse}
+                className="h-8 w-8 rounded-md flex items-center justify-center text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
+                aria-label={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+              >
+                <PanelLeft className="h-4 w-4" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="right">
+              {isCollapsed ? "Expand" : "Collapse"}
+            </TooltipContent>
+          </Tooltip>
+        )}
+      </div>
+
+      {/* Nav */}
+      <nav className={cn("flex-1 overflow-y-auto py-4", isCollapsed ? "px-2" : "px-3")}>
+        <div className="space-y-1">
+          {navItems.map(({ href, icon: Icon, label }) => {
+            const isActive = pathname === href || (href !== '/' && pathname.startsWith(href))
+            const linkContent = (
+              <Link
+                key={href}
+                href={href}
+                onClick={onNavigate}
+                className={cn(
+                  'flex items-center rounded-md transition-colors min-h-[44px]',
+                  isCollapsed ? 'justify-center px-2' : 'gap-3 px-3',
+                  'py-2.5',
+                  isActive
+                    ? 'bg-accent text-accent-foreground'
+                    : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
+                )}
+              >
+                <Icon className="h-5 w-5 shrink-0" />
+                {!isCollapsed && <span className="text-sm font-medium">{label}</span>}
+              </Link>
+            )
+
+            if (isCollapsed) {
+              return (
+                <Tooltip key={href}>
+                  <TooltipTrigger asChild>{linkContent}</TooltipTrigger>
+                  <TooltipContent side="right">{label}</TooltipContent>
+                </Tooltip>
+              )
+            }
+            return linkContent
+          })}
+        </div>
+      </nav>
+
+      {/* Footer */}
+      <div className={cn("border-t border-border space-y-1", isCollapsed ? "p-2" : "p-3")}>
+        {[
+          { href: '/settings', icon: Settings, label: 'Settings' },
+          { href: '/help', icon: HelpCircle, label: 'Need help?' }
+        ].map(({ href, icon: Icon, label }) => {
+          const isActive = pathname === href
+          const linkContent = (
+            <Link
+              key={href}
+              href={href}
+              onClick={onNavigate}
+              className={cn(
+                'flex items-center rounded-md transition-colors min-h-[44px]',
+                isCollapsed ? 'justify-center px-2' : 'gap-3 px-3',
+                'py-2.5',
+                isActive
+                  ? 'bg-accent text-accent-foreground'
+                  : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
+              )}
+            >
+              <Icon className="h-5 w-5 shrink-0" />
+              {!isCollapsed && <span className="text-sm font-medium">{label}</span>}
+            </Link>
+          )
+
+          if (isCollapsed) {
+            return (
+              <Tooltip key={href}>
+                <TooltipTrigger asChild>{linkContent}</TooltipTrigger>
+                <TooltipContent side="right">{label}</TooltipContent>
+              </Tooltip>
+            )
+          }
+          return linkContent
+        })}
+      </div>
+    </>
+  )
+}
+
+export function AppSidebar() {
+  const [isOpen, setIsOpen] = useState(false)
+  const [isMobile, setIsMobile] = useState(false)
+  const [isCollapsed, setIsCollapsed] = useState(false)
+
+  // Detect mobile on mount and resize
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 768)
+    }
+    checkMobile()
+    window.addEventListener('resize', checkMobile)
+    return () => window.removeEventListener('resize', checkMobile)
+  }, [])
+
+  // Mobile: Sheet/Drawer
+  if (isMobile) {
+    return (
+      <Sheet open={isOpen} onOpenChange={setIsOpen}>
+        <SheetTrigger asChild>
+          <button
+            className="fixed top-3 left-3 z-50 h-10 w-10 rounded-lg bg-card border border-border flex items-center justify-center text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors shadow-sm"
+            aria-label="Open menu"
+          >
+            <Menu className="h-5 w-5" />
+          </button>
+        </SheetTrigger>
+        <SheetContent side="left" className="w-[280px] p-0 flex flex-col">
+          <SidebarContent onNavigate={() => setIsOpen(false)} />
+        </SheetContent>
+      </Sheet>
+    )
+  }
+
+  // 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>
+  )
+}
+
+// Mobile header spacer - use in pages that need top padding for the menu button
+export function MobileHeaderSpacer() {
+  return <div className="h-16 md:h-0" />
+}

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

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

package/packages/web/components/BackLink/BackLink.tsx

@@ -0,0 +1,18 @@
+import Link from 'next/link'
+import { ArrowLeft } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import type { BackLinkProps } from './BackLink.types'
+
+export function BackLink({ projectId, projectName, className }: BackLinkProps) {
+  return (
+    <div className={cn('relative flex', className)}>
+      <Link
+        href={`/project/${projectId}`}
+        className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors min-h-[44px]"
+      >
+        <ArrowLeft className="w-4 h-4" />
+        {projectName}
+      </Link>
+    </div>
+  )
+}

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

@@ -0,0 +1,5 @@
+export interface BackLinkProps {
+  projectId: string
+  projectName: string
+  className?: string
+}

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

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

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

@@ -0,0 +1,16 @@
+import type { AccentColor, BentoSize } from './BentoCard.types'
+
+export const BENTO_SIZE_CLASSES: Record<BentoSize, string> = {
+  '1x1': 'col-span-1 row-span-1',
+  '1x2': 'col-span-1 row-span-2',
+  '2x1': 'col-span-1 sm:col-span-2 row-span-1',
+  '2x2': 'col-span-1 sm:col-span-2 row-span-2',
+  'full': 'col-span-1 sm:col-span-2 lg:col-span-full',
+}
+
+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',
+}

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

@@ -0,0 +1,47 @@
+import { cn } from '@/lib/utils'
+import { BENTO_SIZE_CLASSES, ACCENT_STYLES } from './BentoCard.constants'
+import type { BentoCardProps } from './BentoCard.types'
+
+export function BentoCard({
+  size = '1x1',
+  title,
+  count,
+  icon: Icon,
+  accentColor = 'default',
+  className,
+  headerClassName,
+  children,
+}: BentoCardProps) {
+  return (
+    <div
+      className={cn(
+        'relative overflow-hidden rounded-xl border bg-card transition-all duration-200',
+        'p-3 sm:p-4',
+        'hover:shadow-md hover:border-foreground/20',
+        'active:scale-[0.99]',
+        BENTO_SIZE_CLASSES[size],
+        ACCENT_STYLES[accentColor],
+        className
+      )}
+    >
+      {(title || count !== undefined || Icon) && (
+        <div className={cn('flex items-center justify-between mb-2 sm:mb-3', headerClassName)}>
+          <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">
+                {title}
+              </span>
+            )}
+          </div>
+          {count !== undefined && (
+            <span className="text-sm sm:text-xs font-medium text-muted-foreground tabular-nums">
+              {count}
+            </span>
+          )}
+        </div>
+      )}
+      {children}
+    </div>
+  )
+}

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

@@ -0,0 +1,15 @@
+import type { LucideIcon } from 'lucide-react'
+
+export type BentoSize = '1x1' | '1x2' | '2x1' | '2x2' | 'full'
+export type AccentColor = 'default' | 'success' | 'warning' | 'destructive'
+
+export interface BentoCardProps {
+  size?: BentoSize
+  title?: string
+  count?: number | string
+  icon?: LucideIcon
+  accentColor?: AccentColor
+  className?: string
+  headerClassName?: string
+  children: React.ReactNode
+}

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

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

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

@@ -0,0 +1,9 @@
+import type { BentoSize } from './BentoCardSkeleton.types'
+
+export const BENTO_SIZE_CLASSES: Record<BentoSize, string> = {
+  '1x1': 'col-span-1 row-span-1',
+  '1x2': 'col-span-1 row-span-2',
+  '2x1': 'col-span-1 sm:col-span-2 row-span-1',
+  '2x2': 'col-span-1 sm:col-span-2 row-span-2',
+  'full': 'col-span-1 sm:col-span-2 lg:col-span-full',
+}

package/packages/web/components/BentoCardSkeleton/BentoCardSkeleton.tsx

@@ -0,0 +1,18 @@
+import { cn } from '@/lib/utils'
+import { BENTO_SIZE_CLASSES } from './BentoCardSkeleton.constants'
+import type { BentoCardSkeletonProps } from './BentoCardSkeleton.types'
+
+export function BentoCardSkeleton({ size = '1x1' }: BentoCardSkeletonProps) {
+  return (
+    <div
+      className={cn(
+        'rounded-xl border bg-card p-4 animate-pulse',
+        BENTO_SIZE_CLASSES[size]
+      )}
+    >
+      <div className="h-3 w-16 bg-muted rounded mb-3" />
+      <div className="h-6 w-24 bg-muted rounded mb-2" />
+      <div className="h-3 w-full bg-muted rounded" />
+    </div>
+  )
+}

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

@@ -0,0 +1,5 @@
+export type BentoSize = '1x1' | '1x2' | '2x1' | '2x2' | 'full'
+
+export interface BentoCardSkeletonProps {
+  size?: BentoSize
+}

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

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

package/packages/web/components/{stats → BentoGrid}/BentoGrid.tsx

@@ -1,18 +1,14 @@
-import * as React from 'react'
 import { cn } from '@/lib/utils'
-
-interface BentoGridProps {
-  className?: string
-  children: React.ReactNode
-}
+import type { BentoGridProps } from './BentoGrid.types'
 
 export function BentoGrid({ className, children }: BentoGridProps) {
   return (
     <div
       className={cn(
-        'grid gap-4',
+        'grid',
+        'gap-3 sm:gap-4',
         'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
-        'auto-rows-[minmax(140px,auto)]',
+        'auto-rows-[minmax(120px,auto)] sm:auto-rows-[minmax(140px,auto)]',
         className
       )}
     >

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

@@ -0,0 +1,4 @@
+export interface BentoGridProps {
+  children: React.ReactNode
+  className?: string
+}

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

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

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

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

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

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