prjct-cli 0.18.2 → 0.20.0

package/packages/web/context/TerminalContext.tsx

@@ -1,45 +0,0 @@
-'use client'
-
-/**
- * Terminal Context - Share terminal commands across components
- */
-
-import { createContext, useContext, useRef, useCallback, useState, ReactNode } from 'react'
-
-interface TerminalContextType {
-  isConnected: boolean
-  setIsConnected: (connected: boolean) => void
-  sendCommand: (command: string) => void
-  registerSendInput: (fn: (data: string) => void) => void
-}
-
-const TerminalContext = createContext<TerminalContextType | null>(null)
-
-export function TerminalProvider({ children }: { children: ReactNode }) {
-  const [isConnected, setIsConnected] = useState(false)
-  const sendInputRef = useRef<((data: string) => void) | null>(null)
-
-  const registerSendInput = useCallback((fn: (data: string) => void) => {
-    sendInputRef.current = fn
-  }, [])
-
-  const sendCommand = useCallback((command: string) => {
-    if (sendInputRef.current && isConnected) {
-      sendInputRef.current(command + '\n')
-    }
-  }, [isConnected])
-
-  return (
-    <TerminalContext.Provider value={{ isConnected, setIsConnected, sendCommand, registerSendInput }}>
-      {children}
-    </TerminalContext.Provider>
-  )
-}
-
-export function useTerminalContext() {
-  const context = useContext(TerminalContext)
-  if (!context) {
-    throw new Error('useTerminalContext must be used within TerminalProvider')
-  }
-  return context
-}

package/packages/web/context/TerminalTabsContext.tsx

@@ -1,181 +0,0 @@
-'use client'
-
-/**
- * Terminal Tabs Context - Manage multiple terminal sessions
- */
-
-import { createContext, useContext, useCallback, useState, useRef, useEffect, 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])
-
-  // Check if any session is connected
-  const hasConnectedSessions = sessions.some(s => s.isConnected)
-
-  // Prevent page unload when terminal sessions are active
-  useEffect(() => {
-    if (!hasConnectedSessions) return
-
-    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
-      e.preventDefault()
-      // Modern browsers require returnValue to be set
-      e.returnValue = 'You have active terminal sessions. Are you sure you want to leave?'
-      return e.returnValue
-    }
-
-    window.addEventListener('beforeunload', handleBeforeUnload)
-    return () => window.removeEventListener('beforeunload', handleBeforeUnload)
-  }, [hasConnectedSessions])
-
-  // Prevent back/forward navigation when terminal sessions are active
-  useEffect(() => {
-    if (!hasConnectedSessions) return
-
-    // Push a state to history so we can intercept back navigation
-    const currentPath = window.location.pathname + window.location.search
-    window.history.pushState({ terminalActive: true }, '', currentPath)
-
-    const handlePopState = (e: PopStateEvent) => {
-      // User pressed back/forward
-      const confirmLeave = window.confirm(
-        'You have active terminal sessions. Leaving will terminate them. Are you sure?'
-      )
-
-      if (!confirmLeave) {
-        // Cancel navigation by pushing state back
-        window.history.pushState({ terminalActive: true }, '', currentPath)
-      }
-      // If confirmed, let the navigation happen naturally
-    }
-
-    window.addEventListener('popstate', handlePopState)
-    return () => {
-      window.removeEventListener('popstate', handlePopState)
-    }
-  }, [hasConnectedSessions])
-
-  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

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

@@ -1,425 +0,0 @@
-'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 resizeObserverRef = useRef<ResizeObserver | null>(null)
-  const outputBufferRef = useRef<string[]>([])
-  const flushScheduledRef = useRef(false)
-
-  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,
-      // Performance optimizations
-      scrollback: 5000,
-      smoothScrollDuration: 0,  // Instant scroll for better performance
-    })
-
-    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
-
-    // Use ResizeObserver for better resize handling (works with container, not just window)
-    const resizeObserver = new ResizeObserver(() => {
-      if (fitAddonRef.current && containerRef.current) {
-        // Only fit if container has dimensions (not hidden)
-        if (containerRef.current.offsetWidth > 0 && containerRef.current.offsetHeight > 0) {
-          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
-            }))
-          }
-        }
-      }
-    })
-
-    resizeObserver.observe(container)
-    resizeObserverRef.current = resizeObserver
-  }, [])
-
-  // 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
-          }))
-        }
-      }
-
-      // Flush buffered output using requestAnimationFrame for smooth rendering
-      const flushOutput = () => {
-        if (outputBufferRef.current.length > 0 && terminalRef.current) {
-          const combined = outputBufferRef.current.join('')
-          terminalRef.current.write(combined)
-          outputBufferRef.current = []
-        }
-        flushScheduledRef.current = false
-      }
-
-      ws.onmessage = (event) => {
-        try {
-          const message = JSON.parse(event.data)
-
-          switch (message.type) {
-            case 'output':
-              // Buffer output and flush on next animation frame for smooth rendering
-              outputBufferRef.current.push(message.data)
-              if (!flushScheduledRef.current) {
-                flushScheduledRef.current = true
-                requestAnimationFrame(flushOutput)
-              }
-              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 (also buffered)
-          outputBufferRef.current.push(event.data)
-          if (!flushScheduledRef.current) {
-            flushScheduledRef.current = true
-            requestAnimationFrame(flushOutput)
-          }
-        }
-      }
-
-      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()
-    }
-  }, [])
-
-  // Fit terminal to container (useful when tab becomes visible)
-  const fit = useCallback(() => {
-    if (fitAddonRef.current && containerRef.current) {
-      // Only fit if container has dimensions (not hidden)
-      if (containerRef.current.offsetWidth > 0 && containerRef.current.offsetHeight > 0) {
-        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
-          }))
-        }
-      }
-    }
-  }, [])
-
-  // 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()
-      }
-      // Cleanup ResizeObserver
-      if (resizeObserverRef.current) {
-        resizeObserverRef.current.disconnect()
-      }
-    }
-  }, []) // Empty deps - run cleanup only on unmount
-
-  return {
-    initTerminal,
-    connect,
-    disconnect,
-    sendInput,
-    focusTerminal,
-    fit,
-    isConnected,
-    isLoading,
-    isReconnecting,
-    terminalRef,
-    containerRef
-  }
-}