prjct-cli 0.18.2 → 0.20.0

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

@@ -1,142 +0,0 @@
-'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

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

package/packages/web/components/TerminalTabs/TerminalTab.tsx

@@ -1,95 +0,0 @@
-'use client'
-
-import { useEffect, useRef, useCallback } from 'react'
-import { useClaudeTerminal } from '@/hooks/useClaudeTerminal'
-import { useTerminalTabs, type TerminalSession } from '@/context/TerminalTabsContext'
-
-interface TerminalTabProps {
-  session: TerminalSession
-  projectDir: string
-  isActive: boolean
-}
-
-export function TerminalTab({ session, projectDir, isActive }: TerminalTabProps) {
-  const containerRef = useRef<HTMLDivElement>(null)
-  const hasInitializedRef = useRef(false)
-  const hasConnectedRef = useRef(false)
-  const { updateSession, registerSendInput, registerFocusTerminal } = useTerminalTabs()
-
-  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(`[Terminal ${session.id}] Error:`, error)
-    updateSession(session.id, { isLoading: false })
-  }, [session.id, updateSession])
-
-  const {
-    initTerminal,
-    connect,
-    disconnect,
-    sendInput,
-    focusTerminal,
-    fit,
-  } = useClaudeTerminal({
-    sessionId: session.id,
-    projectDir,
-    onConnect: handleConnect,
-    onDisconnect: handleDisconnect,
-    onError: handleError,
-  })
-
-  // 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 (fixes resize issues when tab was hidden)
-  useEffect(() => {
-    if (isActive && hasInitializedRef.current) {
-      // Use requestAnimationFrame to ensure container is fully visible
-      requestAnimationFrame(() => {
-        fit()
-      })
-    }
-  }, [isActive, fit])
-
-  // 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(() => {
-    // Store disconnect function on window for access from parent
-    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
-      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/TerminalTabs/TerminalTabs.tsx

@@ -1,211 +0,0 @@
-'use client'
-
-import { useCallback, useState, useRef, useEffect } from 'react'
-import { useTerminalTabs } from '@/context/TerminalTabsContext'
-import { TerminalTab } from './TerminalTab'
-import { Button } from '@/components/ui/button'
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '@/components/ui/alert-dialog'
-import { X, Terminal as TerminalIcon, Plus, Loader2, AlertTriangle } from 'lucide-react'
-import { cn } from '@/lib/utils'
-
-interface TerminalTabsProps {
-  projectDir: string
-}
-
-export function TerminalTabs({ projectDir }: TerminalTabsProps) {
-  const {
-    sessions,
-    activeSessionId,
-    createSession,
-    closeSession,
-    setActiveSession,
-    updateSession
-  } = useTerminalTabs()
-
-  const [sessionToClose, setSessionToClose] = useState<string | null>(null)
-  const [editingSessionId, setEditingSessionId] = useState<string | null>(null)
-  const [editValue, setEditValue] = useState('')
-  const inputRef = useRef<HTMLInputElement>(null)
-
-  const handleCloseTab = useCallback((sessionId: string, e: React.MouseEvent) => {
-    e.stopPropagation()
-    const session = sessions.find(s => s.id === sessionId)
-    if (session?.isConnected) {
-      setSessionToClose(sessionId)
-    } else {
-      closeSession(sessionId)
-    }
-  }, [sessions, closeSession])
-
-  const handleConfirmClose = useCallback(() => {
-    if (sessionToClose) {
-      // Call disconnect on the terminal
-      const disconnectFn = (window as unknown as Record<string, () => void>)[`terminal_disconnect_${sessionToClose}`]
-      if (disconnectFn) disconnectFn()
-      closeSession(sessionToClose)
-      setSessionToClose(null)
-    }
-  }, [sessionToClose, closeSession])
-
-  const startEditing = useCallback((sessionId: string, currentLabel: string) => {
-    setEditingSessionId(sessionId)
-    setEditValue(currentLabel)
-  }, [])
-
-  const finishEditing = useCallback(() => {
-    if (editingSessionId && editValue.trim()) {
-      updateSession(editingSessionId, { label: editValue.trim() })
-    }
-    setEditingSessionId(null)
-    setEditValue('')
-  }, [editingSessionId, editValue, updateSession])
-
-  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
-    if (e.key === 'Enter') {
-      finishEditing()
-    } else if (e.key === 'Escape') {
-      setEditingSessionId(null)
-      setEditValue('')
-    }
-  }, [finishEditing])
-
-  // Focus input when editing starts
-  useEffect(() => {
-    if (editingSessionId && inputRef.current) {
-      inputRef.current.focus()
-      inputRef.current.select()
-    }
-  }, [editingSessionId])
-
-  const hasNoSessions = sessions.length === 0
-
-  return (
-    <div className="flex flex-col h-full">
-      {/* Tab bar - scrollable on mobile */}
-      <div className="flex items-center gap-1 px-2 py-1.5 bg-card border-b border-border min-h-[44px] md:min-h-[40px] overflow-x-auto scrollbar-hide">
-        {sessions.map(session => (
-          <div
-            key={session.id}
-            onClick={() => setActiveSession(session.id)}
-            onDoubleClick={() => startEditing(session.id, session.label)}
-            role="tab"
-            tabIndex={0}
-            onKeyDown={(e) => e.key === 'Enter' && setActiveSession(session.id)}
-            className={cn(
-              'flex items-center gap-2 px-3 py-2 md:py-1.5 rounded-md text-sm transition-colors cursor-pointer shrink-0',
-              'hover:bg-muted active:bg-muted/80',
-              'min-h-[36px] md:min-h-0', // Touch-friendly height on mobile
-              session.id === activeSessionId
-                ? 'bg-muted text-foreground'
-                : 'text-muted-foreground'
-            )}
-          >
-            {session.isLoading ? (
-              <Loader2 className="w-3.5 h-3.5 animate-spin shrink-0" />
-            ) : session.isConnected ? (
-              <span className="relative flex h-2.5 w-2.5 shrink-0">
-                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
-                <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-green-500" />
-              </span>
-            ) : (
-              <span className="h-2.5 w-2.5 rounded-full bg-muted-foreground/50 shrink-0" />
-            )}
-            {editingSessionId === session.id ? (
-              <input
-                ref={inputRef}
-                type="text"
-                value={editValue}
-                onChange={(e) => setEditValue(e.target.value)}
-                onBlur={finishEditing}
-                onKeyDown={handleKeyDown}
-                onClick={(e) => e.stopPropagation()}
-                className="w-[100px] bg-background border border-border rounded px-1 py-0.5 text-sm outline-none focus:ring-1 focus:ring-ring"
-              />
-            ) : (
-              <span className="truncate max-w-[80px] md:max-w-[100px]">{session.label}</span>
-            )}
-            <button
-              onClick={(e) => handleCloseTab(session.id, e)}
-              className="p-1 md:p-0.5 rounded hover:bg-background/50 text-muted-foreground hover:text-foreground shrink-0"
-            >
-              <X className="w-4 h-4 md:w-3 md:h-3" />
-            </button>
-          </div>
-        ))}
-
-        {/* New tab button - larger touch target on mobile */}
-        <Button
-          variant="ghost"
-          size="icon"
-          className="h-9 w-9 md:h-7 md:w-7 ml-1 shrink-0"
-          onClick={createSession}
-        >
-          <Plus className="w-5 h-5 md:w-4 md:h-4" />
-        </Button>
-      </div>
-
-      {/* Terminal area */}
-      <div className="flex-1 relative">
-        {hasNoSessions ? (
-          <div className="absolute inset-0 flex items-center justify-center bg-background p-4">
-            <div className="text-center max-w-xs">
-              <div className="w-14 h-14 md:w-16 md:h-16 rounded-full bg-muted flex items-center justify-center mx-auto mb-3 md:mb-4">
-                <TerminalIcon className="w-7 h-7 md:w-8 md:h-8 text-muted-foreground" />
-              </div>
-              <h2 className="text-base md:text-lg font-medium mb-1.5 md:mb-2">No active sessions</h2>
-              <p className="text-muted-foreground text-sm mb-3 md:mb-4">
-                Tap + to create a new terminal
-              </p>
-              <Button onClick={createSession} className="min-h-[44px]">
-                <Plus className="w-4 h-4 mr-2" />
-                New Terminal
-              </Button>
-            </div>
-          </div>
-        ) : (
-          sessions.map(session => (
-            <TerminalTab
-              key={session.id}
-              session={session}
-              projectDir={projectDir}
-              isActive={session.id === activeSessionId}
-            />
-          ))
-        )}
-      </div>
-
-      {/* Close confirmation dialog - responsive */}
-      <AlertDialog open={!!sessionToClose} onOpenChange={(open: boolean) => !open && setSessionToClose(null)}>
-        <AlertDialogContent className="max-w-[calc(100vw-2rem)] sm:max-w-lg">
-          <AlertDialogHeader>
-            <AlertDialogTitle className="flex items-center gap-2">
-              <AlertTriangle className="w-5 h-5 text-destructive shrink-0" />
-              Close Terminal?
-            </AlertDialogTitle>
-            <AlertDialogDescription>
-              This terminal has an active session. Closing it will terminate the connection.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter className="flex-col sm:flex-row gap-2">
-            <AlertDialogCancel className="w-full sm:w-auto">Cancel</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={handleConfirmClose}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90 w-full sm:w-auto"
-            >
-              Close Terminal
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </div>
-  )
-}

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

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

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

@@ -1,32 +0,0 @@
-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
-
-  const isPositive = change >= 0
-  const Icon = isPositive ? TrendingUp : TrendingDown
-
-  return (
-    <div className="flex items-center gap-2 mt-2">
-      <span
-        className={cn(
-          'inline-flex items-center gap-1 text-xs sm:text-sm font-medium px-2 py-0.5 rounded-md',
-          getChangeColor(change)
-        )}
-      >
-        <Icon className="h-3 w-3 sm:h-3.5 sm:w-3.5" />
-        {isPositive ? '+' : ''}{change}%
-      </span>
-      <span className="text-xs sm:text-sm text-muted-foreground">vs last week</span>
-    </div>
-  )
-}

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

@@ -1,3 +0,0 @@
-export interface VelocityBadgeProps {
-  change: number
-}

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

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

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

@@ -1,73 +0,0 @@
-'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 = [],
-  change = 0,
-  estimateAccuracy,
-  className,
-}: VelocityCardProps) {
-  return (
-    <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 avg</p>
-        </div>
-
-        {weeklyData.length > 0 && (
-          <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>
-
-      {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>
-  )
-}

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

@@ -1,7 +0,0 @@
-export interface VelocityCardProps {
-  tasksPerDay: number
-  weeklyData?: number[]
-  change?: number
-  estimateAccuracy?: number
-  className?: string
-}

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

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