prjct-cli 0.13.3 → 0.15.0

package/packages/web/components/StatsMasonry/StatsMasonry.tsx

@@ -0,0 +1,95 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { MasonryGrid } from '@/components/MasonryGrid'
+import { NowCard } from '@/components/NowCard'
+import { VelocityCard } from '@/components/VelocityCard'
+import { StreakCard } from '@/components/StreakCard'
+import { QueueCard } from '@/components/QueueCard'
+import { ShipsCard } from '@/components/ShipsCard'
+import { IdeasCard } from '@/components/IdeasCard'
+import { AgentsCard } from '@/components/AgentsCard'
+import { RoadmapCard } from '@/components/RoadmapCard'
+import { BlockersCard } from '@/components/BlockersCard'
+import { RecoverCard, type AbandonedSession } from '@/components/RecoverCard'
+import { ActivityTimeline } from '@/components/ActivityTimeline'
+import type { TimelineEvent } from '@/lib/parse-prjct-files'
+
+interface StatsMasonryProps {
+  projectId: string
+  currentTask: any
+  velocity: number
+  weeklyVelocityData: number[]
+  velocityChange: number
+  estimateAccuracy?: number
+  roadmap: any
+  queue: any[]
+  shipped: any[]
+  totalShips: number
+  streak: number
+  blockers: any[]
+  ideas: any[]
+  agents: any[]
+  timeline: TimelineEvent[]
+}
+
+export function StatsMasonry({
+  projectId,
+  currentTask,
+  velocity,
+  weeklyVelocityData,
+  velocityChange,
+  estimateAccuracy,
+  roadmap,
+  queue,
+  shipped,
+  totalShips,
+  streak,
+  blockers,
+  ideas,
+  agents,
+  timeline,
+}: StatsMasonryProps) {
+  const codeHref = `/project/${projectId}/code`
+  const [abandonedSessions, setAbandonedSessions] = useState<AbandonedSession[]>([])
+
+  // Fetch abandoned sessions from API
+  useEffect(() => {
+    async function fetchAbandonedSessions() {
+      try {
+        const res = await fetch(`/api/sessions/current?projectId=${projectId}`)
+        const data = await res.json()
+        if (data.success && data.data.abandonedSessions) {
+          setAbandonedSessions(data.data.abandonedSessions)
+        }
+      } catch {
+        // Silently fail - abandoned sessions are not critical
+      }
+    }
+    fetchAbandonedSessions()
+  }, [projectId])
+
+  return (
+    <MasonryGrid>
+      {/* Show RecoverCard first if there are abandoned sessions */}
+      {abandonedSessions.length > 0 && (
+        <RecoverCard abandonedSessions={abandonedSessions} codeHref={codeHref} />
+      )}
+      <NowCard currentTask={currentTask} codeHref={codeHref} />
+      <VelocityCard
+        tasksPerDay={velocity}
+        weeklyData={weeklyVelocityData}
+        change={velocityChange}
+        estimateAccuracy={estimateAccuracy}
+      />
+      <RoadmapCard roadmap={roadmap} codeHref={codeHref} />
+      <QueueCard queue={queue} codeHref={codeHref} />
+      <ShipsCard ships={shipped} totalShips={totalShips} codeHref={codeHref} />
+      <StreakCard streak={streak} />
+      <BlockersCard blockers={blockers} codeHref={codeHref} />
+      <IdeasCard ideas={ideas} codeHref={codeHref} />
+      <AgentsCard agents={agents} codeHref={codeHref} />
+      <ActivityTimeline timeline={timeline} />
+    </MasonryGrid>
+  )
+}

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

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

package/packages/web/components/StreakCard/StreakCard.tsx

@@ -1,53 +1,55 @@
-import { BentoCard } from '@/components/BentoCard'
-import { Flame } from 'lucide-react'
+'use client'
+
+import { Flame, Calendar } from 'lucide-react'
 import { cn } from '@/lib/utils'
-import { STREAK_HOT_THRESHOLD, STREAK_ON_FIRE_THRESHOLD } from './StreakCard.constants'
 import type { StreakCardProps } from './StreakCard.types'
 
-export function StreakCard({ streak, className }: StreakCardProps) {
-  const isHot = streak >= STREAK_HOT_THRESHOLD
-  const isOnFire = streak >= STREAK_ON_FIRE_THRESHOLD
+function getStreakColor(streak: number): string {
+  if (streak >= 7) return 'text-emerald-600 dark:text-emerald-400'
+  if (streak >= 3) return 'text-amber-600 dark:text-amber-400'
+  return 'text-red-600 dark:text-red-400'
+}
 
+export function StreakCard({ streak, className }: StreakCardProps) {
   return (
-    <BentoCard
-      size="1x1"
-      title="Streak"
-      icon={Flame}
-      accentColor={isOnFire ? 'warning' : 'default'}
-      className={className}
-    >
-      <div className="flex flex-col h-full justify-between">
-        <div className="flex items-center gap-3">
-          <Flame
-            className={cn(
-              'h-8 w-8 transition-colors',
-              isOnFire ? 'text-orange-500' : isHot ? 'text-amber-500' : 'text-muted-foreground'
-            )}
-          />
-          <div>
-            <p className="text-3xl font-bold tabular-nums">{streak}</p>
-            <p className="text-xs text-muted-foreground">day{streak !== 1 ? 's' : ''}</p>
-          </div>
+    <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">
+          <Flame className="h-4 w-4 text-muted-foreground" />
+          <span className="text-xs font-bold uppercase tracking-[0.15em] text-muted-foreground">
+            Streak
+          </span>
         </div>
+      </div>
 
-        <div className="flex gap-1 mt-3">
+      <div className="flex items-center gap-4">
+        <Flame className={cn("h-10 w-10", getStreakColor(streak))} />
+        <div>
+          <p className="text-3xl font-bold tabular-nums">{streak}</p>
+          <p className="text-xs text-muted-foreground">consecutive day{streak !== 1 ? 's' : ''}</p>
+        </div>
+      </div>
+
+      <div className="mt-4">
+        <div className="flex items-center gap-1.5 mb-2">
+          <Calendar className="h-3 w-3 text-muted-foreground" />
+          <span className="text-xs text-muted-foreground">Last 7 days</span>
+        </div>
+        <div className="flex gap-1">
           {Array.from({ length: 7 }).map((_, i) => (
             <div
               key={i}
               className={cn(
-                'h-1.5 flex-1 rounded-full transition-colors',
-                i < streak
-                  ? isOnFire
-                    ? 'bg-orange-500'
-                    : isHot
-                    ? 'bg-amber-500'
-                    : 'bg-foreground'
-                  : 'bg-muted'
+                'h-2 flex-1 rounded-full transition-colors',
+                i < streak ? 'bg-foreground' : 'bg-muted'
               )}
             />
           ))}
         </div>
       </div>
-    </BentoCard>
+    </div>
   )
 }

package/packages/web/components/TasksCounter/TasksCounter.tsx

@@ -7,7 +7,7 @@ export function TasksCounter({ count }: TasksCounterProps) {
         {count}
       </span>
       <span className="text-sm sm:text-base md:text-lg text-muted-foreground">
-        tasks completed
+        shipped
       </span>
     </div>
   )

package/packages/web/components/TechStackBadges/TechStackBadges.tsx

@@ -1,17 +1,25 @@
 import { Badge } from '@/components/ui/badge'
 
 interface TechStackBadgesProps {
-  techStack: string[]
+  techStack: string[] | Record<string, string[]> | undefined
   max?: number
 }
 
+function normalizeTechStack(techStack: string[] | Record<string, string[]> | undefined): string[] {
+  if (!techStack) return []
+  if (Array.isArray(techStack)) return techStack
+  // Handle object format: { languages: [...], frameworks: [...] }
+  return Object.values(techStack).flat()
+}
+
 export function TechStackBadges({ techStack, max = 4 }: TechStackBadgesProps) {
-  if (!techStack || techStack.length === 0) return null
+  const normalized = normalizeTechStack(techStack)
+  if (normalized.length === 0) return null
 
   return (
     <div className="flex gap-1">
-      {techStack.slice(0, max).map((tech) => (
-        <Badge key={tech} variant="secondary" className="text-[10px] px-1.5 py-0">
+      {normalized.slice(0, max).map((tech) => (
+        <Badge key={tech} variant="secondary" className="text-xs px-1.5 py-0">
           {tech}
         </Badge>
       ))}

package/packages/web/components/TerminalDock/DockToggleTab.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import { ChevronUp } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface DockToggleTabProps {
+  sessionCount: number
+  connectedCount: number
+  onClick: () => void
+}
+
+export function DockToggleTab({ sessionCount, connectedCount, onClick }: DockToggleTabProps) {
+  const hasActiveSessions = sessionCount > 0
+
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        'fixed bottom-0 left-1/2 -translate-x-1/2 z-40',
+        'flex items-center gap-2 px-4 py-2 rounded-t-lg',
+        'bg-orange-500 hover:bg-orange-600 text-white',
+        'shadow-lg transition-all duration-200',
+        'hover:-translate-y-0.5'
+      )}
+    >
+      <ChevronUp className="w-4 h-4" />
+    </button>
+  )
+}

package/packages/web/components/TerminalDock/TerminalDock.tsx

@@ -0,0 +1,386 @@
+'use client'
+
+/**
+ * TerminalDock v3.1
+ * - Drawer with native overlay when >50% (respects sidebar)
+ * - Commands on left side inside drawer
+ * - Chrome-style tabs
+ * - Rename tabs via double-click
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { usePathname, useParams } from 'next/navigation'
+import { useGlobalTerminal } from '@/context/GlobalTerminalContext'
+import { TerminalDockTab } from './TerminalDockTab'
+import { TerminalTabBar } from './TerminalTabBar'
+import { DockToggleTab } from './DockToggleTab'
+import { ProjectSelectorModal } from '@/components/ProjectSelectorModal'
+import { CommandBar } from '@/components/CommandBar'
+import { cn } from '@/lib/utils'
+import { Minus, SplitSquareHorizontal } from 'lucide-react'
+import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider } from '@/components/ui/tooltip'
+import {
+  Drawer,
+  DrawerContent,
+  DrawerTitle,
+} from '@/components/ui/drawer'
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
+import {
+  Panel,
+  PanelGroup,
+  PanelResizeHandle,
+} from 'react-resizable-panels'
+
+// Threshold for showing drawer with overlay (50% of viewport)
+const DRAWER_THRESHOLD = 0.5
+
+export function TerminalDock() {
+  const pathname = usePathname()
+  const params = useParams()
+  const {
+    isDockOpen,
+    dockHeight,
+    isFullScreen,
+    isSplitEnabled,
+    setDockHeight,
+    openDock,
+    closeDock,
+    setSplitEnabled,
+    projectSessions,
+    activeSessionId,
+    secondActiveSessionId,
+    switchSession,
+    closeSession,
+    createSessionForProject,
+    sendCommandToActive,
+    getActiveSession,
+    getAllSessions,
+    getLeftPanelSessions,
+    getRightPanelSessions,
+    getTotalSessionCount,
+    getConnectedSessionCount,
+    updateSession,
+  } = useGlobalTerminal()
+
+  const dockRef = useRef<HTMLDivElement>(null)
+  const [isResizing, setIsResizing] = useState(false)
+  const [showProjectSelector, setShowProjectSelector] = useState(false)
+  const [projectSelectorPanel, setProjectSelectorPanel] = useState<'left' | 'right'>('left')
+  const [viewportHeight, setViewportHeight] = useState(800)
+
+
+  // Update viewport height on mount and resize
+  useEffect(() => {
+    const updateViewport = () => setViewportHeight(window.innerHeight)
+    updateViewport()
+    window.addEventListener('resize', updateViewport)
+    return () => window.removeEventListener('resize', updateViewport)
+  }, [])
+
+  // Get all sessions
+  const allSessions = getAllSessions()
+  const activeSession = getActiveSession()
+  const isConnected = activeSession?.isConnected ?? false
+  const totalSessions = getTotalSessionCount()
+  const connectedSessions = getConnectedSessionCount()
+
+  // Always use drawer mode
+  const useDrawerMode = true
+
+  // Hide dock on code page (full-screen terminal)
+  const isCodePage = pathname?.includes('/code')
+
+  // Get current project context from URL
+  const currentProjectId = params?.id as string | undefined
+
+  // Resize handlers (only for non-drawer mode)
+  const startResize = useCallback((e: React.MouseEvent) => {
+    e.preventDefault()
+    setIsResizing(true)
+  }, [])
+
+  useEffect(() => {
+    if (!isResizing) return
+
+    const handleMouseMove = (e: MouseEvent) => {
+      const newHeight = window.innerHeight - e.clientY
+      setDockHeight(newHeight)
+    }
+
+    const handleMouseUp = () => {
+      setIsResizing(false)
+    }
+
+    document.addEventListener('mousemove', handleMouseMove)
+    document.addEventListener('mouseup', handleMouseUp)
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove)
+      document.removeEventListener('mouseup', handleMouseUp)
+    }
+  }, [isResizing, setDockHeight])
+
+  // Handle new terminal - creates session directly in the specified panel
+  const handleNewTerminal = useCallback((panel: 'left' | 'right' = 'left') => {
+    if (currentProjectId) {
+      const project = projectSessions.get(currentProjectId)
+      if (project) {
+        createSessionForProject(project.projectId, project.projectName, project.projectPath, panel)
+        return
+      }
+    }
+    setProjectSelectorPanel(panel)
+    setShowProjectSelector(true)
+  }, [currentProjectId, projectSessions, createSessionForProject])
+
+  // Handle project selection from modal
+  const handleSelectProject = useCallback((projectId: string, projectName: string, projectPath: string) => {
+    createSessionForProject(projectId, projectName, projectPath, projectSelectorPanel)
+    setShowProjectSelector(false)
+  }, [createSessionForProject, projectSelectorPanel])
+
+  // Handle command click
+  const handleCommand = useCallback((cmd: string) => {
+    sendCommandToActive(cmd)
+  }, [sendCommandToActive])
+
+  // Handle close session
+  const handleCloseSession = useCallback((sessionId: string) => {
+    const disconnectKey = `terminal_disconnect_${sessionId}`
+    const disconnectFn = (window as unknown as Record<string, () => void>)[disconnectKey]
+    if (disconnectFn) {
+      disconnectFn()
+    }
+    closeSession(sessionId)
+  }, [closeSession])
+
+  // Handle rename session
+  const handleRenameSession = useCallback((sessionId: string, newLabel: string) => {
+    updateSession(sessionId, { label: newLabel })
+  }, [updateSession])
+
+  // Don't render if on code page (full-screen mode)
+  if (isCodePage || isFullScreen) {
+    return null
+  }
+
+  // Show toggle tab when dock is closed
+  if (!isDockOpen) {
+    return (
+      <DockToggleTab
+        sessionCount={totalSessions}
+        connectedCount={connectedSessions}
+        onClick={openDock}
+      />
+    )
+  }
+
+
+  // Terminal content (sessions)
+  const TerminalContent = (
+    <div className="flex-1 relative overflow-hidden">
+      {allSessions.length === 0 ? (
+        <div className="flex flex-col items-center justify-center h-full text-muted-foreground text-sm gap-2">
+          <span>No terminal sessions</span>
+          <button
+            onClick={() => handleNewTerminal('left')}
+            className="text-muted-foreground hover:text-foreground underline"
+          >
+            Open a terminal
+          </button>
+        </div>
+      ) : isSplitEnabled ? (
+        <PanelGroup direction="horizontal">
+          <Panel defaultSize={50} minSize={20}>
+            <div className="h-full flex flex-col">
+              <div className="border-b border-border bg-muted/30">
+                <TerminalTabBar
+                  sessions={getLeftPanelSessions()}
+                  activeSessionId={activeSessionId}
+                  onSwitchSession={(id) => switchSession(id, 'left')}
+                  onCloseSession={handleCloseSession}
+                  onNewTerminal={() => handleNewTerminal('left')}
+                  onRenameSession={handleRenameSession}
+                />
+              </div>
+              <div className="flex-1 relative">
+                {getLeftPanelSessions().length > 0 ? (
+                  getLeftPanelSessions().map((session) => (
+                    <TerminalDockTab
+                      key={session.id}
+                      session={session}
+                      isActive={session.id === activeSessionId}
+                    />
+                  ))
+                ) : (
+                  <div className="absolute inset-0 flex items-center justify-center bg-card/95 text-muted-foreground text-sm">
+                    <button
+                      onClick={() => handleNewTerminal('left')}
+                      className="text-muted-foreground hover:text-foreground underline"
+                    >
+                      Open terminal in left panel
+                    </button>
+                  </div>
+                )}
+              </div>
+            </div>
+          </Panel>
+
+          <PanelResizeHandle className="w-1 bg-border hover:bg-muted transition-colors" />
+
+          <Panel defaultSize={50} minSize={20}>
+            <div className="h-full flex flex-col">
+              <div className="border-b border-border bg-muted/30">
+                <TerminalTabBar
+                  sessions={getRightPanelSessions()}
+                  activeSessionId={secondActiveSessionId}
+                  onSwitchSession={(id) => switchSession(id, 'right')}
+                  onCloseSession={handleCloseSession}
+                  onNewTerminal={() => handleNewTerminal('right')}
+                  onRenameSession={handleRenameSession}
+                />
+              </div>
+              <div className="flex-1 relative">
+                {getRightPanelSessions().length > 0 ? (
+                  getRightPanelSessions().map((session) => (
+                    <TerminalDockTab
+                      key={`right-${session.id}`}
+                      session={session}
+                      isActive={session.id === secondActiveSessionId}
+                    />
+                  ))
+                ) : (
+                  <div className="absolute inset-0 flex items-center justify-center bg-card/95 text-muted-foreground text-sm">
+                    <button
+                      onClick={() => handleNewTerminal('right')}
+                      className="text-muted-foreground hover:text-foreground underline"
+                    >
+                      Open terminal in right panel
+                    </button>
+                  </div>
+                )}
+              </div>
+            </div>
+          </Panel>
+        </PanelGroup>
+      ) : (
+        <div className="h-full flex flex-col">
+          <div className="border-b border-border bg-muted/30">
+            <TerminalTabBar
+              sessions={allSessions}
+              activeSessionId={activeSessionId}
+              onSwitchSession={(id) => switchSession(id)}
+              onCloseSession={handleCloseSession}
+              onNewTerminal={() => handleNewTerminal('left')}
+              onRenameSession={handleRenameSession}
+            />
+          </div>
+          <div className="flex-1 relative">
+            {allSessions.map((session) => (
+              <TerminalDockTab
+                key={session.id}
+                session={session}
+                isActive={session.id === activeSessionId}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+
+  // Header with split/minimize (right side)
+  const HeaderActions = (
+    <div className="flex items-center gap-1 px-2">
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            onClick={() => setSplitEnabled(!isSplitEnabled)}
+            className={cn(
+              'p-1.5 rounded transition-colors',
+              isSplitEnabled
+                ? 'bg-accent text-accent-foreground'
+                : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
+            )}
+          >
+            <SplitSquareHorizontal className="w-4 h-4" />
+          </button>
+        </TooltipTrigger>
+        <TooltipContent>{isSplitEnabled ? 'Single view' : 'Split view'}</TooltipContent>
+      </Tooltip>
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            onClick={closeDock}
+            className="p-1.5 rounded text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
+          >
+            <Minus className="w-4 h-4" />
+          </button>
+        </TooltipTrigger>
+        <TooltipContent>Minimize</TooltipContent>
+      </Tooltip>
+    </div>
+  )
+
+  return (
+    <TooltipProvider>
+      {useDrawerMode ? (
+        // Simple drawer
+        <Drawer open={isDockOpen} onOpenChange={(open) => !open && closeDock()}>
+          <DrawerContent className="h-[60vh] flex flex-col">
+            <VisuallyHidden>
+              <DrawerTitle>Terminal</DrawerTitle>
+            </VisuallyHidden>
+
+            {/* Header: commands left, actions right */}
+            <div className="flex items-center justify-between border-b border-border bg-card/95 shrink-0">
+              <CommandBar isConnected={isConnected} onCommand={handleCommand} />
+              {HeaderActions}
+            </div>
+
+            {TerminalContent}
+          </DrawerContent>
+        </Drawer>
+      ) : (
+        // Regular dock when <=50%
+        <div
+          ref={dockRef}
+          className={cn(
+            'relative flex flex-col shrink-0',
+            'bg-card border-t border-border',
+            isResizing && 'select-none'
+          )}
+          style={{ height: dockHeight }}
+        >
+          {/* Resize Handle */}
+          <div
+            className={cn(
+              'absolute top-0 left-0 right-0 h-2 cursor-ns-resize z-10',
+              'hover:bg-muted transition-colors',
+              'before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-border',
+              isResizing && 'bg-muted'
+            )}
+            onMouseDown={startResize}
+          >
+            <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-12 h-1 rounded-full bg-muted-foreground/30" />
+          </div>
+
+          {/* Header: commands left, actions right */}
+          <div className="flex items-center justify-between border-b border-border bg-card/95 shrink-0 mt-2">
+            <CommandBar isConnected={isConnected} onCommand={handleCommand} />
+            {HeaderActions}
+          </div>
+
+          {TerminalContent}
+        </div>
+      )}
+
+      <ProjectSelectorModal
+        isOpen={showProjectSelector}
+        onClose={() => setShowProjectSelector(false)}
+        onSelectProject={handleSelectProject}
+      />
+    </TooltipProvider>
+  )
+}