prjct-cli 0.11.0 → 0.11.1

package/packages/web/context/TerminalTabsContext.tsx

@@ -0,0 +1,136 @@
+'use client'
+
+/**
+ * Terminal Tabs Context - Manage multiple terminal sessions
+ */
+
+import { createContext, useContext, useCallback, useState, useRef, ReactNode } from 'react'
+
+export interface TerminalSession {
+  id: string
+  createdAt: Date
+  isConnected: boolean
+  isLoading: boolean
+  label: string
+}
+
+interface TerminalTabsContextType {
+  sessions: TerminalSession[]
+  activeSessionId: string | null
+  createSession: () => string
+  closeSession: (sessionId: string) => void
+  setActiveSession: (sessionId: string) => void
+  updateSession: (sessionId: string, updates: Partial<TerminalSession>) => void
+  getActiveSession: () => TerminalSession | null
+  sendCommandToActive: (command: string) => void
+  registerSendInput: (sessionId: string, fn: (data: string) => void) => void
+  registerFocusTerminal: (sessionId: string, fn: () => void) => void
+  focusActiveTerminal: () => void
+}
+
+const TerminalTabsContext = createContext<TerminalTabsContextType | null>(null)
+
+let sessionCounter = 0
+
+export function TerminalTabsProvider({ children, projectId }: { children: ReactNode; projectId: string }) {
+  const [sessions, setSessions] = useState<TerminalSession[]>([])
+  const [activeSessionId, setActiveSessionId] = useState<string | null>(null)
+  const sendInputRefs = useRef<Map<string, (data: string) => void>>(new Map())
+  const focusTerminalRefs = useRef<Map<string, () => void>>(new Map())
+
+  const createSession = useCallback(() => {
+    sessionCounter++
+    const newSession: TerminalSession = {
+      id: `pty_${projectId}_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`,
+      createdAt: new Date(),
+      isConnected: false,
+      isLoading: true,
+      label: `Terminal ${sessionCounter}`
+    }
+
+    setSessions(prev => [...prev, newSession])
+    setActiveSessionId(newSession.id)
+    return newSession.id
+  }, [projectId])
+
+  const closeSession = useCallback((sessionId: string) => {
+    setSessions(prev => {
+      const filtered = prev.filter(s => s.id !== sessionId)
+      // If closing active session, switch to last remaining
+      if (sessionId === activeSessionId && filtered.length > 0) {
+        setActiveSessionId(filtered[filtered.length - 1].id)
+      } else if (filtered.length === 0) {
+        setActiveSessionId(null)
+      }
+      return filtered
+    })
+    sendInputRefs.current.delete(sessionId)
+    focusTerminalRefs.current.delete(sessionId)
+  }, [activeSessionId])
+
+  const setActiveSession = useCallback((sessionId: string) => {
+    setActiveSessionId(sessionId)
+  }, [])
+
+  const updateSession = useCallback((sessionId: string, updates: Partial<TerminalSession>) => {
+    setSessions(prev => prev.map(s =>
+      s.id === sessionId ? { ...s, ...updates } : s
+    ))
+  }, [])
+
+  const getActiveSession = useCallback(() => {
+    return sessions.find(s => s.id === activeSessionId) || null
+  }, [sessions, activeSessionId])
+
+  const registerSendInput = useCallback((sessionId: string, fn: (data: string) => void) => {
+    sendInputRefs.current.set(sessionId, fn)
+  }, [])
+
+  const registerFocusTerminal = useCallback((sessionId: string, fn: () => void) => {
+    focusTerminalRefs.current.set(sessionId, fn)
+  }, [])
+
+  const focusActiveTerminal = useCallback(() => {
+    if (!activeSessionId) return
+    const focusFn = focusTerminalRefs.current.get(activeSessionId)
+    if (focusFn) focusFn()
+  }, [activeSessionId])
+
+  const sendCommandToActive = useCallback((command: string) => {
+    if (!activeSessionId) return
+    const sendFn = sendInputRefs.current.get(activeSessionId)
+    const session = sessions.find(s => s.id === activeSessionId)
+    if (sendFn && session?.isConnected) {
+      sendFn(command + '\n')
+      // Auto-focus terminal after sending command
+      const focusFn = focusTerminalRefs.current.get(activeSessionId)
+      if (focusFn) focusFn()
+    }
+  }, [activeSessionId, sessions])
+
+  return (
+    <TerminalTabsContext.Provider value={{
+      sessions,
+      activeSessionId,
+      createSession,
+      closeSession,
+      setActiveSession,
+      updateSession,
+      getActiveSession,
+      sendCommandToActive,
+      registerSendInput,
+      registerFocusTerminal,
+      focusActiveTerminal
+    }}>
+      {children}
+    </TerminalTabsContext.Provider>
+  )
+}
+
+export function useTerminalTabs() {
+  const context = useContext(TerminalTabsContext)
+  if (!context) {
+    throw new Error('useTerminalTabs must be used within TerminalTabsProvider')
+  }
+  return context
+}

package/packages/web/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

package/packages/web/hooks/useClaudeTerminal.ts

@@ -0,0 +1,375 @@
+'use client'
+
+/**
+ * useClaudeTerminal - WebSocket connection to Claude Code CLI via PTY
+ *
+ * Features:
+ * - Auto-reconnect with exponential backoff
+ * - Session persistence across server restarts
+ * - NO API costs - uses your existing Claude Max subscription!
+ * - Light/Dark theme support
+ */
+
+import { useEffect, useRef, useCallback, useState } from 'react'
+import { useTheme } from 'next-themes'
+import type { Terminal, ITheme } from '@xterm/xterm'
+import type { FitAddon } from '@xterm/addon-fit'
+
+// Terminal themes
+const darkTheme: ITheme = {
+  background: '#0a0a0f',
+  foreground: '#e4e4e7',
+  cursor: '#e4e4e7',
+  cursorAccent: '#0a0a0f',
+  selectionBackground: '#3f3f46',
+  black: '#18181b',
+  red: '#ef4444',
+  green: '#22c55e',
+  yellow: '#eab308',
+  blue: '#3b82f6',
+  magenta: '#a855f7',
+  cyan: '#06b6d4',
+  white: '#e4e4e7',
+  brightBlack: '#52525b',
+  brightRed: '#f87171',
+  brightGreen: '#4ade80',
+  brightYellow: '#facc15',
+  brightBlue: '#60a5fa',
+  brightMagenta: '#c084fc',
+  brightCyan: '#22d3ee',
+  brightWhite: '#fafafa'
+}
+
+const lightTheme: ITheme = {
+  background: '#ffffff',
+  foreground: '#18181b',
+  cursor: '#18181b',
+  cursorAccent: '#ffffff',
+  selectionBackground: '#d4d4d8',
+  black: '#18181b',
+  red: '#dc2626',
+  green: '#16a34a',
+  yellow: '#ca8a04',
+  blue: '#2563eb',
+  magenta: '#9333ea',
+  cyan: '#0891b2',
+  white: '#f4f4f5',
+  brightBlack: '#71717a',
+  brightRed: '#ef4444',
+  brightGreen: '#22c55e',
+  brightYellow: '#eab308',
+  brightBlue: '#3b82f6',
+  brightMagenta: '#a855f7',
+  brightCyan: '#06b6d4',
+  brightWhite: '#fafafa'
+}
+
+interface UseClaudeTerminalOptions {
+  sessionId: string
+  projectDir: string
+  onConnect?: () => void
+  onDisconnect?: () => void
+  onError?: (error: string) => void
+  onReconnecting?: (attempt: number, maxAttempts: number) => void
+}
+
+const MAX_RECONNECT_ATTEMPTS = 10
+const BASE_RECONNECT_DELAY = 1000 // 1 second
+const MAX_RECONNECT_DELAY = 30000 // 30 seconds
+
+export function useClaudeTerminal(options: UseClaudeTerminalOptions) {
+  const { sessionId, projectDir, onConnect, onDisconnect, onError, onReconnecting } = options
+  const { resolvedTheme } = useTheme()
+
+  const terminalRef = useRef<Terminal | null>(null)
+  const fitAddonRef = useRef<FitAddon | null>(null)
+  const wsRef = useRef<WebSocket | null>(null)
+  const containerRef = useRef<HTMLDivElement | null>(null)
+  const reconnectTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+  const reconnectAttemptsRef = useRef(0)
+  const intentionalDisconnectRef = useRef(false)
+  const currentSessionIdRef = useRef<string | null>(null)
+
+  const [isConnected, setIsConnected] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+  const [isReconnecting, setIsReconnecting] = useState(false)
+
+  // Update terminal theme when resolvedTheme changes
+  useEffect(() => {
+    if (terminalRef.current) {
+      const newTheme = resolvedTheme === 'light' ? lightTheme : darkTheme
+      terminalRef.current.options.theme = newTheme
+    }
+  }, [resolvedTheme])
+
+  // Initialize terminal - returns Promise<void>
+  const initTerminal = useCallback(async (container: HTMLDivElement): Promise<void> => {
+    if (terminalRef.current) return
+
+    // Dynamic imports for client-side only
+    const { Terminal } = await import('@xterm/xterm')
+    const { FitAddon } = await import('@xterm/addon-fit')
+    const { WebLinksAddon } = await import('@xterm/addon-web-links')
+    // CSS is loaded globally via globals.css
+
+    // Determine initial theme based on document class
+    const isDark = typeof document !== 'undefined' && document.documentElement.classList.contains('dark')
+    const initialTheme = isDark ? darkTheme : lightTheme
+
+    const term = new Terminal({
+      cursorBlink: true,
+      cursorStyle: 'block',
+      fontFamily: '"JetBrains Mono", "Fira Code", monospace',
+      fontSize: 14,
+      lineHeight: 1.2,
+      theme: initialTheme
+    })
+
+    const fitAddon = new FitAddon()
+    const webLinksAddon = new WebLinksAddon()
+
+    term.loadAddon(fitAddon)
+    term.loadAddon(webLinksAddon)
+
+    term.open(container)
+    fitAddon.fit()
+
+    terminalRef.current = term
+    fitAddonRef.current = fitAddon
+    containerRef.current = container
+
+    // Handle window resize
+    const handleResize = () => {
+      if (fitAddonRef.current) {
+        fitAddonRef.current.fit()
+
+        // Send resize to server
+        if (wsRef.current?.readyState === WebSocket.OPEN && terminalRef.current) {
+          wsRef.current.send(JSON.stringify({
+            type: 'resize',
+            cols: terminalRef.current.cols,
+            rows: terminalRef.current.rows
+          }))
+        }
+      }
+    }
+
+    window.addEventListener('resize', handleResize)
+
+    // Note: cleanup is handled by the component unmount, not here
+    // The terminal persists for the lifetime of the TerminalTab component
+  }, [])
+
+  // Clear reconnect timeout
+  const clearReconnectTimeout = useCallback(() => {
+    if (reconnectTimeoutRef.current) {
+      clearTimeout(reconnectTimeoutRef.current)
+      reconnectTimeoutRef.current = null
+    }
+  }, [])
+
+  // Schedule reconnect with exponential backoff
+  const scheduleReconnect = useCallback(() => {
+    if (intentionalDisconnectRef.current) return
+    if (reconnectAttemptsRef.current >= MAX_RECONNECT_ATTEMPTS) {
+      setIsReconnecting(false)
+      onError?.(`Failed to reconnect after ${MAX_RECONNECT_ATTEMPTS} attempts`)
+      return
+    }
+
+    const delay = Math.min(
+      BASE_RECONNECT_DELAY * Math.pow(2, reconnectAttemptsRef.current),
+      MAX_RECONNECT_DELAY
+    )
+
+    reconnectAttemptsRef.current++
+    setIsReconnecting(true)
+    onReconnecting?.(reconnectAttemptsRef.current, MAX_RECONNECT_ATTEMPTS)
+
+    console.log(`[Terminal] Reconnecting in ${delay}ms (attempt ${reconnectAttemptsRef.current}/${MAX_RECONNECT_ATTEMPTS})`)
+
+    reconnectTimeoutRef.current = setTimeout(() => {
+      connectWebSocket()
+    }, delay)
+  }, [onError, onReconnecting])
+
+  // Connect WebSocket (internal)
+  const connectWebSocket = useCallback(async () => {
+    // Close existing connection if any
+    if (wsRef.current) {
+      wsRef.current.close()
+      wsRef.current = null
+    }
+
+    const activeSessionId = currentSessionIdRef.current || sessionId
+
+    try {
+      // Create PTY session on server
+      const response = await fetch('/api/claude/sessions', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ sessionId: activeSessionId, projectDir })
+      })
+
+      if (!response.ok) {
+        throw new Error('Failed to create PTY session')
+      }
+
+      // Connect WebSocket
+      const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
+      const wsUrl = `${protocol}//${window.location.host}/ws/claude/${activeSessionId}`
+      const ws = new WebSocket(wsUrl)
+
+      ws.onopen = () => {
+        console.log('[Terminal] WebSocket connected')
+        reconnectAttemptsRef.current = 0
+        setIsConnected(true)
+        setIsLoading(false)
+        setIsReconnecting(false)
+        onConnect?.()
+
+        // Send initial resize
+        if (terminalRef.current) {
+          ws.send(JSON.stringify({
+            type: 'resize',
+            cols: terminalRef.current.cols,
+            rows: terminalRef.current.rows
+          }))
+        }
+      }
+
+      ws.onmessage = (event) => {
+        try {
+          const message = JSON.parse(event.data)
+
+          switch (message.type) {
+            case 'output':
+              terminalRef.current?.write(message.data)
+              break
+
+            case 'connected':
+              console.log('[Terminal] Connected to Claude Code CLI')
+              break
+
+            case 'exit':
+              console.log('[Terminal] Claude Code exited with code:', message.code)
+              terminalRef.current?.write('\r\n[Session ended]\r\n')
+              break
+
+            case 'error':
+              onError?.(message.message)
+              break
+          }
+        } catch {
+          // Raw data, write directly
+          terminalRef.current?.write(event.data)
+        }
+      }
+
+      ws.onclose = (event) => {
+        console.log(`[Terminal] WebSocket closed (code: ${event.code})`)
+        setIsConnected(false)
+        wsRef.current = null
+
+        // Only trigger reconnect if not intentional
+        if (!intentionalDisconnectRef.current) {
+          terminalRef.current?.write('\r\n\x1b[33m[Disconnected - Reconnecting...]\x1b[0m\r\n')
+          scheduleReconnect()
+        } else {
+          onDisconnect?.()
+        }
+      }
+
+      ws.onerror = (error) => {
+        console.error('[Terminal] WebSocket error:', error)
+        // Don't call onError here, onclose will handle reconnect
+      }
+
+      wsRef.current = ws
+
+      // Forward terminal input to WebSocket
+      terminalRef.current?.onData((data) => {
+        if (ws.readyState === WebSocket.OPEN) {
+          ws.send(JSON.stringify({ type: 'input', data }))
+        }
+      })
+
+    } catch (error) {
+      console.error('[Terminal] Connection error:', error)
+      setIsLoading(false)
+
+      // Schedule reconnect on connection failure
+      if (!intentionalDisconnectRef.current) {
+        scheduleReconnect()
+      } else {
+        onError?.(error instanceof Error ? error.message : 'Connection failed')
+      }
+    }
+  }, [sessionId, projectDir, onConnect, onDisconnect, onError, scheduleReconnect])
+
+  // Public connect function
+  const connect = useCallback(async () => {
+    if (wsRef.current?.readyState === WebSocket.OPEN) return
+
+    intentionalDisconnectRef.current = false
+    reconnectAttemptsRef.current = 0
+    currentSessionIdRef.current = sessionId
+    setIsLoading(true)
+
+    await connectWebSocket()
+  }, [sessionId, connectWebSocket])
+
+  // Disconnect (intentional)
+  const disconnect = useCallback(() => {
+    intentionalDisconnectRef.current = true
+    clearReconnectTimeout()
+    setIsReconnecting(false)
+
+    if (wsRef.current) {
+      wsRef.current.close()
+      wsRef.current = null
+    }
+    setIsConnected(false)
+    onDisconnect?.()
+  }, [clearReconnectTimeout, onDisconnect])
+
+  // Send input
+  const sendInput = useCallback((data: string) => {
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      wsRef.current.send(JSON.stringify({ type: 'input', data }))
+    }
+  }, [])
+
+  // Focus terminal
+  const focusTerminal = useCallback(() => {
+    if (terminalRef.current) {
+      terminalRef.current.focus()
+    }
+  }, [])
+
+  // Cleanup on unmount - empty deps to run only on unmount
+  useEffect(() => {
+    return () => {
+      intentionalDisconnectRef.current = true
+      if (reconnectTimeoutRef.current) {
+        clearTimeout(reconnectTimeoutRef.current)
+      }
+      if (wsRef.current) {
+        wsRef.current.close()
+      }
+    }
+  }, []) // Empty deps - run cleanup only on unmount
+
+  return {
+    initTerminal,
+    connect,
+    disconnect,
+    sendInput,
+    focusTerminal,
+    isConnected,
+    isLoading,
+    isReconnecting,
+    terminalRef,
+    containerRef
+  }
+}

package/packages/web/hooks/useProjectStats.ts

@@ -0,0 +1,38 @@
+'use client'
+
+import { useQuery } from '@tanstack/react-query'
+import type { ProjectStats, RawProjectFiles } from '@/lib/parse-prjct-files'
+
+interface ProjectStatsResponse {
+  success: boolean
+  data?: ProjectStats
+  raw?: RawProjectFiles
+  error?: string
+}
+
+interface ProjectStatsData {
+  stats: ProjectStats
+  raw: RawProjectFiles
+}
+
+async function fetchProjectStats(projectId: string): Promise<ProjectStatsData> {
+  const res = await fetch(`/api/projects/${projectId}/stats`, {
+    cache: 'no-store',
+  })
+  if (!res.ok) throw new Error('Failed to fetch project stats')
+  const json: ProjectStatsResponse = await res.json()
+  if (!json.success || !json.data || !json.raw) {
+    throw new Error(json.error || 'Failed to fetch project stats')
+  }
+  return { stats: json.data, raw: json.raw }
+}
+
+export function useProjectStats(projectId: string) {
+  return useQuery({
+    queryKey: ['project-stats', projectId],
+    queryFn: () => fetchProjectStats(projectId),
+    staleTime: 30_000, // Cache 30s
+    refetchOnWindowFocus: true,
+    enabled: !!projectId,
+  })
+}

package/packages/web/hooks/useProjects.ts

@@ -0,0 +1,73 @@
+'use client'
+
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { queryPresets } from '@/lib/query-config'
+
+export interface Project {
+  id: string
+  name: string
+  path: string
+  repoPath?: string | null
+  currentTask?: string | null
+  hasActiveSession?: boolean
+  lastActivity?: string | null
+  ideasCount?: number
+  nextTasksCount?: number
+  techStack?: string[]
+  iconPath?: string | null
+  version?: string
+  stack?: string
+  filesCount?: number
+  commitsCount?: number
+}
+
+// Fetch with no-cache headers for fresh data
+async function fetchJson<T>(url: string): Promise<T> {
+  const res = await fetch(url, {
+    cache: 'no-store',
+    headers: {
+      'Cache-Control': 'no-cache',
+    },
+  })
+  if (!res.ok) throw new Error(`Failed to fetch ${url}`)
+  const json = await res.json()
+  return json.data ?? json
+}
+
+// Hook for fetching all projects
+export function useProjects() {
+  return useQuery({
+    queryKey: ['projects'],
+    queryFn: () => fetchJson<Project[]>('/api/projects'),
+    ...queryPresets.normal,
+  })
+}
+
+// Hook for fetching a single project
+export function useProject(projectId: string | null) {
+  return useQuery({
+    queryKey: ['project', projectId],
+    queryFn: () => fetchJson<Project>(`/api/projects/${projectId}`),
+    enabled: !!projectId,
+    ...queryPresets.fast,
+  })
+}
+
+// Hook for deleting a project
+export function useDeleteProject() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (projectId: string) => {
+      const res = await fetch(`/api/projects/${projectId}/delete`, { method: 'POST' })
+      if (!res.ok) {
+        const error = await res.json()
+        throw new Error(error.error || 'Failed to delete project')
+      }
+      return res.json()
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['projects'] })
+    },
+  })
+}

package/packages/web/hooks/useStats.ts

@@ -0,0 +1,28 @@
+'use client'
+
+import { useQuery } from '@tanstack/react-query'
+import { queryPresets } from '@/lib/query-config'
+
+export interface Stats {
+  userName?: string
+  totalProjects?: number
+  activeProjects?: number
+  totalSessions?: number
+  sessionsThisWeek?: number
+}
+
+export function useStats() {
+  return useQuery({
+    queryKey: ['stats'],
+    queryFn: async () => {
+      const res = await fetch('/api/stats', {
+        cache: 'no-store',
+        headers: { 'Cache-Control': 'no-cache' },
+      })
+      if (!res.ok) throw new Error('Failed to fetch stats')
+      const json = await res.json()
+      return json.data as Stats
+    },
+    ...queryPresets.normal,
+  })
+}

package/packages/web/lib/format.ts

@@ -0,0 +1,23 @@
+/**
+ * Shared formatting utilities
+ */
+
+export function formatRelativeTime(dateStr: string | null | undefined): string {
+  if (!dateStr) return ''
+  const date = new Date(dateStr)
+  const now = new Date()
+  const diffMs = now.getTime() - date.getTime()
+  const diffMins = Math.floor(diffMs / 60000)
+  const diffHours = Math.floor(diffMs / 3600000)
+  const diffDays = Math.floor(diffMs / 86400000)
+
+  if (diffMins < 1) return 'just now'
+  if (diffMins < 60) return `${diffMins}m ago`
+  if (diffHours < 24) return `${diffHours}h ago`
+  if (diffDays < 7) return `${diffDays}d ago`
+  return date.toLocaleDateString()
+}
+
+export function formatPath(path: string): string {
+  return path.replace(/^\/Users\/[^/]+\//, '~/')
+}