prjct-cli 0.13.2 → 0.15.0

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

@@ -0,0 +1,130 @@
+'use client'
+
+/**
+ * TerminalDockTab - Single terminal instance for the dock
+ * With ResizeObserver for proper fit on resize
+ */
+
+import { useEffect, useRef, useCallback } from 'react'
+import { useClaudeTerminal } from '@/hooks/useClaudeTerminal'
+import { useGlobalTerminal, type GlobalTerminalSession } from '@/context/GlobalTerminalContext'
+
+interface TerminalDockTabProps {
+  session: GlobalTerminalSession
+  isActive: boolean
+}
+
+export function TerminalDockTab({ session, isActive }: TerminalDockTabProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const wrapperRef = useRef<HTMLDivElement>(null)
+  const hasInitializedRef = useRef(false)
+  const hasConnectedRef = useRef(false)
+  const fitTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+  const { updateSession, registerSendInput, registerFocusTerminal, dockHeight } = useGlobalTerminal()
+
+  const handleConnect = useCallback(() => {
+    updateSession(session.id, { isConnected: true, isLoading: false })
+  }, [session.id, updateSession])
+
+  const handleDisconnect = useCallback(() => {
+    updateSession(session.id, { isConnected: false, isLoading: false })
+  }, [session.id, updateSession])
+
+  const handleError = useCallback((error: string) => {
+    console.error(`[TerminalDock ${session.id}] Error:`, error)
+    updateSession(session.id, { isLoading: false })
+  }, [session.id, updateSession])
+
+  const {
+    initTerminal,
+    connect,
+    disconnect,
+    sendInput,
+    focusTerminal,
+    fit,
+  } = useClaudeTerminal({
+    sessionId: session.id,
+    projectDir: session.projectPath,
+    onConnect: handleConnect,
+    onDisconnect: handleDisconnect,
+    onError: handleError,
+  })
+
+  // Debounced fit function
+  const debouncedFit = useCallback(() => {
+    if (fitTimeoutRef.current) {
+      clearTimeout(fitTimeoutRef.current)
+    }
+    fitTimeoutRef.current = setTimeout(() => {
+      if (isActive && hasInitializedRef.current) {
+        fit()
+      }
+    }, 50)
+  }, [fit, isActive])
+
+  // Initialize terminal AND connect - only once
+  useEffect(() => {
+    if (containerRef.current && !hasInitializedRef.current) {
+      hasInitializedRef.current = true
+
+      initTerminal(containerRef.current).then(() => {
+        if (!hasConnectedRef.current) {
+          hasConnectedRef.current = true
+          connect()
+        }
+      })
+    }
+  }, []) // Empty deps - run only on mount
+
+  // Re-fit terminal when tab becomes active or dock height changes
+  useEffect(() => {
+    if (isActive && hasInitializedRef.current) {
+      requestAnimationFrame(() => {
+        fit()
+      })
+    }
+  }, [isActive, fit, dockHeight])
+
+  // ResizeObserver for container size changes
+  useEffect(() => {
+    if (!wrapperRef.current) return
+
+    const resizeObserver = new ResizeObserver(() => {
+      debouncedFit()
+    })
+
+    resizeObserver.observe(wrapperRef.current)
+
+    return () => {
+      resizeObserver.disconnect()
+      if (fitTimeoutRef.current) {
+        clearTimeout(fitTimeoutRef.current)
+      }
+    }
+  }, [debouncedFit])
+
+  // Register sendInput and focusTerminal for this session
+  useEffect(() => {
+    registerSendInput(session.id, sendInput)
+    registerFocusTerminal(session.id, focusTerminal)
+  }, [session.id, sendInput, focusTerminal, registerSendInput, registerFocusTerminal])
+
+  // Expose disconnect for external use
+  useEffect(() => {
+    const key = `terminal_disconnect_${session.id}`
+    ;(window as unknown as Record<string, () => void>)[key] = disconnect
+    return () => {
+      delete (window as unknown as Record<string, () => void>)[key]
+    }
+  }, [session.id, disconnect])
+
+  return (
+    <div
+      ref={wrapperRef}
+      className="absolute inset-0 bg-[#0a0a0f] px-2 py-2"
+      style={{ display: isActive ? 'block' : 'none' }}
+    >
+      <div ref={containerRef} className="h-full w-full" />
+    </div>
+  )
+}

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

@@ -0,0 +1,142 @@
+'use client'
+
+import { useState, useRef, useEffect } from 'react'
+import { X, Plus } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import type { GlobalTerminalSession } from '@/context/GlobalTerminalContext'
+
+interface TerminalTabBarProps {
+  sessions: GlobalTerminalSession[]
+  activeSessionId: string | null
+  onSwitchSession: (sessionId: string) => void
+  onCloseSession: (sessionId: string) => void
+  onNewTerminal: () => void
+  onRenameSession: (sessionId: string, newLabel: string) => void
+}
+
+export function TerminalTabBar({
+  sessions,
+  activeSessionId,
+  onSwitchSession,
+  onCloseSession,
+  onNewTerminal,
+  onRenameSession,
+}: TerminalTabBarProps) {
+  const [editingSessionId, setEditingSessionId] = useState<string | null>(null)
+  const [editValue, setEditValue] = useState('')
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  // Group sessions by project
+  const sessionsByProject = sessions.reduce((acc, session) => {
+    const existing = acc.find(g => g.projectId === session.projectId)
+    if (existing) {
+      existing.sessions.push(session)
+    } else {
+      acc.push({
+        projectId: session.projectId,
+        projectName: session.projectName,
+        sessions: [session],
+      })
+    }
+    return acc
+  }, [] as { projectId: string; projectName: string; sessions: GlobalTerminalSession[] }[])
+
+  // Focus input when editing starts
+  useEffect(() => {
+    if (editingSessionId && inputRef.current) {
+      inputRef.current.focus()
+      inputRef.current.select()
+    }
+  }, [editingSessionId])
+
+  const handleDoubleClick = (session: GlobalTerminalSession) => {
+    setEditingSessionId(session.id)
+    setEditValue(session.label)
+  }
+
+  const handleBlur = () => {
+    if (editingSessionId && editValue.trim()) {
+      onRenameSession(editingSessionId, editValue.trim())
+    }
+    setEditingSessionId(null)
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleBlur()
+    } else if (e.key === 'Escape') {
+      setEditingSessionId(null)
+    }
+  }
+
+  return (
+    <div className="flex items-center gap-0.5 flex-1 overflow-x-auto py-1 px-1">
+      {sessionsByProject.map((group, groupIndex) => (
+        <div key={group.projectId} className="flex items-center">
+          {/* Group separator */}
+          {groupIndex > 0 && (
+            <div className="w-px h-5 bg-border mx-2" />
+          )}
+
+          {/* Tabs for this project */}
+          {group.sessions.map((session) => {
+            const isActive = session.id === activeSessionId
+            const isEditing = session.id === editingSessionId
+
+            return (
+              <button
+                key={session.id}
+                onClick={() => onSwitchSession(session.id)}
+                onDoubleClick={() => handleDoubleClick(session)}
+                className={cn(
+                  'group flex items-center gap-1.5 px-3 py-1.5 text-xs transition-all relative',
+                  // Chrome-style: rounded top corners, flat bottom
+                  'rounded-t-md',
+                  isActive
+                    ? 'bg-card border-t border-l border-r border-border text-foreground -mb-px z-10'
+                    : 'text-muted-foreground hover:text-foreground hover:bg-muted/50'
+                )}
+              >
+                {/* Label - editable or display */}
+                {isEditing ? (
+                  <input
+                    ref={inputRef}
+                    type="text"
+                    value={editValue}
+                    onChange={(e) => setEditValue(e.target.value)}
+                    onBlur={handleBlur}
+                    onKeyDown={handleKeyDown}
+                    className="w-24 bg-transparent border-b border-orange-500 outline-none text-xs"
+                    onClick={(e) => e.stopPropagation()}
+                  />
+                ) : (
+                  <span className="truncate max-w-[120px]">
+                    {session.label}
+                  </span>
+                )}
+
+                {/* Close button */}
+                <X
+                  className="w-3 h-3 opacity-0 group-hover:opacity-100 hover:text-destructive transition-opacity shrink-0"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    onCloseSession(session.id)
+                  }}
+                />
+              </button>
+            )
+          })}
+        </div>
+      ))}
+
+      {/* Add Terminal Button */}
+      <button
+        onClick={onNewTerminal}
+        className="p-1.5 rounded text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors ml-1"
+        title="New terminal"
+      >
+        <Plus className="w-4 h-4" />
+      </button>
+    </div>
+  )
+}

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

@@ -0,0 +1,2 @@
+export { TerminalDock } from './TerminalDock'
+export { TerminalDockTab } from './TerminalDockTab'

package/packages/web/components/VelocityBadge/VelocityBadge.tsx

@@ -2,6 +2,13 @@ import { TrendingUp, TrendingDown } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import type { VelocityBadgeProps } from './VelocityBadge.types'
 
+function getChangeColor(change: number): string {
+  if (change >= 10) return 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+  if (change >= 0) return 'bg-amber-500/10 text-amber-600 dark:text-amber-400'
+  if (change >= -10) return 'bg-amber-500/10 text-amber-600 dark:text-amber-400'
+  return 'bg-red-500/10 text-red-600 dark:text-red-400'
+}
+
 export function VelocityBadge({ change }: VelocityBadgeProps) {
   if (change === 0) return null
 
@@ -13,9 +20,7 @@ export function VelocityBadge({ change }: VelocityBadgeProps) {
       <span
         className={cn(
           'inline-flex items-center gap-1 text-xs sm:text-sm font-medium px-2 py-0.5 rounded-md',
-          isPositive
-            ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
-            : 'bg-muted text-muted-foreground'
+          getChangeColor(change)
         )}
       >
         <Icon className="h-3 w-3 sm:h-3.5 sm:w-3.5" />

package/packages/web/components/VelocityCard/VelocityCard.tsx

@@ -1,9 +1,17 @@
-import { BentoCard } from '@/components/BentoCard'
+'use client'
+
 import { SparklineChart } from '@/components/SparklineChart'
 import { Zap, TrendingUp, TrendingDown, Target } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import type { VelocityCardProps } from './VelocityCard.types'
 
+function getChangeColor(change: number): string {
+  if (change >= 10) return 'text-emerald-600 dark:text-emerald-400'
+  if (change >= 0) return 'text-amber-600 dark:text-amber-400'
+  if (change >= -10) return 'text-amber-600 dark:text-amber-400'
+  return 'text-red-600 dark:text-red-400'
+}
+
 export function VelocityCard({
   tasksPerDay,
   weeklyData = [],
@@ -12,60 +20,54 @@ export function VelocityCard({
   className,
 }: VelocityCardProps) {
   return (
-    <BentoCard
-      size="1x1"
-      title="Velocity"
-      icon={Zap}
-      className={className}
-    >
-      <div className="flex flex-col h-full justify-between">
+    <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">
+          <Zap className="h-4 w-4 text-muted-foreground" />
+          <span className="text-xs font-bold uppercase tracking-[0.15em] text-muted-foreground">
+            Velocity
+          </span>
+        </div>
+        {change !== 0 && (
+          <div className={cn("flex items-center gap-1", getChangeColor(change))}>
+            {change >= 0 ? (
+              <TrendingUp className="h-3.5 w-3.5" />
+            ) : (
+              <TrendingDown className="h-3.5 w-3.5" />
+            )}
+            <span className="text-xs font-bold">
+              {change >= 0 ? '+' : ''}{change}%
+            </span>
+          </div>
+        )}
+      </div>
+
+      <div className="flex items-end justify-between gap-4">
         <div>
           <p className="text-3xl font-bold tabular-nums">{tasksPerDay}</p>
-          <p className="text-xs text-muted-foreground">tasks/day</p>
+          <p className="text-xs text-muted-foreground">tasks/day avg</p>
         </div>
 
         {weeklyData.length > 0 && (
-          <div className="mt-2">
-            <SparklineChart data={weeklyData} height={28} />
+          <div className="flex-1 max-w-[120px]">
+            <SparklineChart data={weeklyData} height={40} />
+            <p className="text-xs text-muted-foreground text-right mt-1">Last 7 days</p>
           </div>
         )}
+      </div>
 
-        <div className="flex items-center justify-between mt-2">
-          {change !== 0 && (
-            <div className="flex items-center gap-1">
-              {change >= 0 ? (
-                <TrendingUp className="h-3 w-3 text-emerald-500" />
-              ) : (
-                <TrendingDown className="h-3 w-3 text-muted-foreground" />
-              )}
-              <span
-                className={cn(
-                  'text-xs font-medium',
-                  change >= 0 ? 'text-emerald-600 dark:text-emerald-400' : 'text-muted-foreground'
-                )}
-              >
-                {change >= 0 ? '+' : ''}{change}%
-              </span>
-            </div>
-          )}
-
-          {estimateAccuracy !== undefined && estimateAccuracy > 0 && (
-            <div className="flex items-center gap-1">
-              <Target className="h-3 w-3 text-muted-foreground" />
-              <span
-                className={cn(
-                  'text-xs font-medium',
-                  estimateAccuracy >= 70 ? 'text-emerald-600 dark:text-emerald-400' :
-                  estimateAccuracy >= 40 ? 'text-amber-600 dark:text-amber-400' :
-                  'text-muted-foreground'
-                )}
-              >
-                {estimateAccuracy}% acc
-              </span>
-            </div>
-          )}
+      {estimateAccuracy !== undefined && estimateAccuracy > 0 && (
+        <div className="flex items-center gap-1.5 mt-3 pt-3 border-t">
+          <Target className="h-3 w-3 text-muted-foreground" />
+          <span className="text-xs text-muted-foreground">Estimate accuracy:</span>
+          <span className="text-xs font-bold text-muted-foreground">
+            {estimateAccuracy}%
+          </span>
         </div>
-      </div>
-    </BentoCard>
+      )}
+    </div>
   )
 }

package/packages/web/components/WeeklyReports/PrintableReport.tsx

@@ -0,0 +1,259 @@
+'use client'
+
+import { useMemo } from 'react'
+import { useParams } from 'next/navigation'
+import Link from 'next/link'
+import { Rocket, CheckCircle2, Bug, Calendar, Printer, ArrowLeft } from 'lucide-react'
+import {
+  filterDataByWeek,
+  formatDateRange,
+  type WeekData,
+} from '@/lib/generate-week-report'
+import type { StatsResult } from '@/lib/services/stats.server'
+
+interface PrintableReportProps {
+  stats: StatsResult
+  projectName: string
+  selectedWeeks: number[]
+  year: number
+}
+
+export function PrintableReport({
+  stats,
+  projectName,
+  selectedWeeks,
+  year,
+}: PrintableReportProps) {
+  const params = useParams()
+  const projectId = params.id as string
+
+  const weekDataList = useMemo(() => {
+    return selectedWeeks.map(w => filterDataByWeek(stats, year, w))
+  }, [stats, year, selectedWeeks])
+
+  // Aggregate data
+  const allShipped = weekDataList.flatMap(w => w.shipped)
+  const uniqueShipsMap = new Map<string, typeof allShipped[0]>()
+  for (const ship of allShipped) {
+    if (!uniqueShipsMap.has(ship.name)) {
+      uniqueShipsMap.set(ship.name, ship)
+    }
+  }
+  // Sort by date descending (most recent first)
+  const uniqueShips = Array.from(uniqueShipsMap.values())
+    .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
+
+  // Group ships by date for display
+  const shipsByDate = new Map<string, typeof uniqueShips>()
+  for (const ship of uniqueShips) {
+    const dateKey = ship.date
+    if (!shipsByDate.has(dateKey)) {
+      shipsByDate.set(dateKey, [])
+    }
+    shipsByDate.get(dateKey)!.push(ship)
+  }
+
+  const totalTasks = weekDataList.reduce((sum, w) => sum + w.tasksCompleted, 0)
+  const totalBugs = weekDataList.reduce((sum, w) => sum + w.bugsFixed, 0)
+  const totalDays = weekDataList.reduce((sum, w) => sum + w.activeDays, 0)
+
+  // Date range
+  const firstWeek = weekDataList[0]
+  const lastWeek = weekDataList[weekDataList.length - 1]
+  const dateRangeStr = weekDataList.length === 1
+    ? formatDateRange(firstWeek.startDate, firstWeek.endDate)
+    : formatDateRange(firstWeek.startDate, lastWeek.endDate)
+
+  const weekLabel = weekDataList.length === 1
+    ? `Semana ${firstWeek.week}`
+    : `Semanas ${firstWeek.week}-${lastWeek.week}`
+
+  const handlePrint = () => {
+    window.print()
+  }
+
+  return (
+    <div className="min-h-screen bg-white">
+      {/* Action buttons - hidden when printing */}
+      <div className="print:hidden fixed top-4 right-4 z-50 flex items-center gap-2">
+        <Link
+          href={`/project/${projectId}/reports`}
+          className="flex items-center gap-2 px-4 py-2 bg-white text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors shadow-lg"
+        >
+          <ArrowLeft className="h-4 w-4" />
+          Regresar
+        </Link>
+        <button
+          onClick={handlePrint}
+          className="flex items-center gap-2 px-4 py-2 bg-gray-900 text-white rounded-lg hover:bg-gray-800 transition-colors shadow-lg"
+        >
+          <Printer className="h-4 w-4" />
+          Imprimir / PDF
+        </button>
+      </div>
+
+      {/* Printable content */}
+      <div className="max-w-2xl mx-auto p-8 print:p-0 print:max-w-none">
+        {/* Header */}
+        <header className="mb-8 pb-6 border-b-2 border-gray-200">
+          <h1 className="text-3xl font-bold text-gray-900 mb-2">{projectName}</h1>
+          <p className="text-lg text-gray-600">
+            Reporte de Progreso - {weekLabel}
+          </p>
+          <p className="text-gray-500">{dateRangeStr}, {year}</p>
+        </header>
+
+        {/* Stats Summary */}
+        <section className="mb-8">
+          <div className="grid grid-cols-4 gap-4">
+            <StatBox
+              icon={<Rocket className="h-6 w-6" />}
+              value={uniqueShips.length}
+              label="Entregados"
+              color="text-emerald-600"
+            />
+            <StatBox
+              icon={<CheckCircle2 className="h-6 w-6" />}
+              value={totalTasks}
+              label="Tareas"
+              color="text-blue-600"
+            />
+            <StatBox
+              icon={<Bug className="h-6 w-6" />}
+              value={totalBugs}
+              label="Bugs"
+              color="text-orange-600"
+            />
+            <StatBox
+              icon={<Calendar className="h-6 w-6" />}
+              value={totalDays}
+              label="Dias Activos"
+              color="text-purple-600"
+            />
+          </div>
+        </section>
+
+        {/* Shipped Features grouped by date */}
+        {uniqueShips.length > 0 && (
+          <section className="mb-8">
+            <h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-2">
+              <Rocket className="h-5 w-5 text-emerald-600" />
+              Entregado
+            </h2>
+            <div className="space-y-5">
+              {Array.from(shipsByDate.entries()).map(([date, ships]) => (
+                <div key={date}>
+                  <p className="text-sm font-medium text-gray-500 mb-2">
+                    {new Date(date).toLocaleDateString('es-MX', {
+                      weekday: 'long',
+                      month: 'long',
+                      day: 'numeric'
+                    })}
+                  </p>
+                  <ul className="space-y-2 pl-4 border-l-2 border-emerald-200">
+                    {ships.map((ship, i) => (
+                      <li key={i} className="pl-3 text-gray-700">
+                        <span className="font-medium">{ship.name}</span>
+                        {ship.version && (
+                          <span className="ml-2 text-sm text-gray-500 bg-gray-100 px-2 py-0.5 rounded">
+                            {ship.version}
+                          </span>
+                        )}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              ))}
+            </div>
+          </section>
+        )}
+
+        {/* Activity Details */}
+        {(totalTasks > 0 || totalBugs > 0) && (
+          <section className="mb-8">
+            <h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-2">
+              <CheckCircle2 className="h-5 w-5 text-blue-600" />
+              Actividad
+            </h2>
+            <ul className="space-y-2 text-gray-700">
+              {totalTasks > 0 && (
+                <li className="flex items-center gap-2">
+                  <CheckCircle2 className="h-4 w-4 text-blue-500" />
+                  {totalTasks} tarea{totalTasks !== 1 ? 's' : ''} completada{totalTasks !== 1 ? 's' : ''}
+                </li>
+              )}
+              {totalBugs > 0 && (
+                <li className="flex items-center gap-2">
+                  <Bug className="h-4 w-4 text-orange-500" />
+                  {totalBugs} bug{totalBugs !== 1 ? 's' : ''} corregido{totalBugs !== 1 ? 's' : ''}
+                </li>
+              )}
+              {totalDays > 0 && (
+                <li className="flex items-center gap-2">
+                  <Calendar className="h-4 w-4 text-purple-500" />
+                  {totalDays} dia{totalDays !== 1 ? 's' : ''} activo{totalDays !== 1 ? 's' : ''}
+                </li>
+              )}
+            </ul>
+          </section>
+        )}
+
+        {/* No activity message */}
+        {uniqueShips.length === 0 && totalTasks === 0 && totalBugs === 0 && (
+          <section className="mb-8 p-6 bg-gray-50 rounded-lg text-center text-gray-500">
+            Sin actividad registrada para este periodo
+          </section>
+        )}
+
+        {/* Next Steps placeholder */}
+        <section className="mb-8">
+          <h2 className="text-xl font-semibold text-gray-900 mb-4">
+            Siguiente
+          </h2>
+          <ul className="space-y-2 text-gray-600">
+            <li className="flex items-center gap-2">
+              <span className="text-gray-400">&#x2022;</span>
+              <span className="italic text-gray-400">[Pendiente por definir]</span>
+            </li>
+          </ul>
+        </section>
+
+        {/* Footer */}
+        <footer className="mt-12 pt-6 border-t border-gray-200 text-sm text-gray-400 text-center print:mt-8">
+          <p>Generado con prjct - {new Date().toLocaleDateString('es-MX')}</p>
+        </footer>
+      </div>
+
+      {/* Print styles */}
+      <style jsx global>{`
+        @media print {
+          @page {
+            size: letter;
+            margin: 1in;
+          }
+          body {
+            -webkit-print-color-adjust: exact;
+            print-color-adjust: exact;
+          }
+        }
+      `}</style>
+    </div>
+  )
+}
+
+interface StatBoxProps {
+  icon: React.ReactNode
+  value: number
+  label: string
+  color: string
+}
+
+function StatBox({ icon, value, label, color }: StatBoxProps) {
+  return (
+    <div className="text-center p-4 border border-gray-200 rounded-lg">
+      <div className={`${color} flex justify-center mb-2`}>{icon}</div>
+      <div className="text-2xl font-bold text-gray-900">{value}</div>
+      <div className="text-sm text-gray-500">{label}</div>
+    </div>
+  )
+}