prjct-cli 0.11.4 → 0.12.0

package/packages/web/hooks/useClaudeTerminal.ts

@@ -89,6 +89,9 @@ export function useClaudeTerminal(options: UseClaudeTerminalOptions) {
   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)
@@ -122,7 +125,10 @@ export function useClaudeTerminal(options: UseClaudeTerminalOptions) {
       fontFamily: '"JetBrains Mono", "Fira Code", monospace',
       fontSize: 14,
       lineHeight: 1.2,
-      theme: initialTheme
+      theme: initialTheme,
+      // Performance optimizations
+      scrollback: 5000,
+      smoothScrollDuration: 0,  // Instant scroll for better performance
     })
 
     const fitAddon = new FitAddon()
@@ -138,26 +144,27 @@ export function useClaudeTerminal(options: UseClaudeTerminalOptions) {
     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
-          }))
+    // 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
+            }))
+          }
         }
       }
-    }
-
-    window.addEventListener('resize', handleResize)
+    })
 
-    // Note: cleanup is handled by the component unmount, not here
-    // The terminal persists for the lifetime of the TerminalTab component
+    resizeObserver.observe(container)
+    resizeObserverRef.current = resizeObserver
   }, [])
 
   // Clear reconnect timeout
@@ -238,13 +245,28 @@ export function useClaudeTerminal(options: UseClaudeTerminalOptions) {
         }
       }
 
+      // 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':
-              terminalRef.current?.write(message.data)
+              // 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':
@@ -261,8 +283,12 @@ export function useClaudeTerminal(options: UseClaudeTerminalOptions) {
               break
           }
         } catch {
-          // Raw data, write directly
-          terminalRef.current?.write(event.data)
+          // Raw data, write directly (also buffered)
+          outputBufferRef.current.push(event.data)
+          if (!flushScheduledRef.current) {
+            flushScheduledRef.current = true
+            requestAnimationFrame(flushOutput)
+          }
         }
       }
 
@@ -347,6 +373,25 @@ export function useClaudeTerminal(options: UseClaudeTerminalOptions) {
     }
   }, [])
 
+  // 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 () => {
@@ -357,6 +402,10 @@ export function useClaudeTerminal(options: UseClaudeTerminalOptions) {
       if (wsRef.current) {
         wsRef.current.close()
       }
+      // Cleanup ResizeObserver
+      if (resizeObserverRef.current) {
+        resizeObserverRef.current.disconnect()
+      }
     }
   }, []) // Empty deps - run cleanup only on unmount
 
@@ -366,6 +415,7 @@ export function useClaudeTerminal(options: UseClaudeTerminalOptions) {
     disconnect,
     sendInput,
     focusTerminal,
+    fit,
     isConnected,
     isLoading,
     isReconnecting,

package/packages/web/hooks/useProjectStats.ts

@@ -2,6 +2,13 @@
 
 import { useQuery } from '@tanstack/react-query'
 import type { ProjectStats, RawProjectFiles } from '@/lib/parse-prjct-files'
+import type {
+  UnifiedApiResponse,
+  ProjectState,
+  OutcomeSummary,
+  AgentPerformance,
+  ProjectInsights,
+} from '@prjct/shared'
 
 interface ProjectStatsResponse {
   success: boolean
@@ -15,6 +22,7 @@ interface ProjectStatsData {
   raw: RawProjectFiles
 }
 
+// Legacy fetch
 async function fetchProjectStats(projectId: string): Promise<ProjectStatsData> {
   const res = await fetch(`/api/projects/${projectId}/stats`, {
     cache: 'no-store',
@@ -36,3 +44,50 @@ export function useProjectStats(projectId: string) {
     enabled: !!projectId,
   })
 }
+
+// ============== Unified API ==============
+
+interface UnifiedProjectData {
+  state: ProjectState | null
+  outcomes: OutcomeSummary | null
+  agentPerformance: AgentPerformance[]
+  insights: ProjectInsights
+  legacyFallback: boolean
+  // Legacy data when fallback
+  legacyData?: ProjectStats
+  legacyRaw?: RawProjectFiles
+}
+
+async function fetchUnifiedProjectData(projectId: string): Promise<UnifiedProjectData> {
+  const res = await fetch(`/api/v2/projects/${projectId}/unified`, {
+    cache: 'no-store',
+  })
+  if (!res.ok) throw new Error('Failed to fetch unified project data')
+  const json: UnifiedApiResponse = await res.json()
+  if (!json.success) {
+    throw new Error('Failed to fetch unified project data')
+  }
+  return {
+    state: json.state,
+    outcomes: json.outcomes,
+    agentPerformance: json.agentPerformance,
+    insights: json.insights,
+    legacyFallback: json.legacyFallback,
+    legacyData: json.legacyData as ProjectStats | undefined,
+    legacyRaw: json.legacyRaw as RawProjectFiles | undefined,
+  }
+}
+
+/**
+ * Hook for fetching unified project data from v2 API.
+ * Falls back to legacy data if unified state doesn't exist.
+ */
+export function useUnifiedProjectStats(projectId: string) {
+  return useQuery({
+    queryKey: ['project-unified', projectId],
+    queryFn: () => fetchUnifiedProjectData(projectId),
+    staleTime: 30_000, // Cache 30s
+    refetchOnWindowFocus: true,
+    enabled: !!projectId,
+  })
+}

package/packages/web/hooks/useProjects.ts

@@ -2,6 +2,7 @@
 
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { queryPresets } from '@/lib/query-config'
+import { deleteProject as deleteProjectAction } from '@/lib/actions/projects'
 
 export interface Project {
   id: string
@@ -53,18 +54,17 @@ export function useProject(projectId: string | null) {
   })
 }
 
-// Hook for deleting a project
+// Hook for deleting a project (uses Server Action)
 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')
+      const result = await deleteProjectAction(projectId)
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to delete project')
       }
-      return res.json()
+      return result
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['projects'] })

package/packages/web/lib/actions/projects.ts

@@ -0,0 +1,15 @@
+'use server'
+
+import { revalidatePath } from 'next/cache'
+import { moveToTrash } from '@/lib/projects'
+
+export async function deleteProject(projectId: string) {
+  try {
+    const result = await moveToTrash(projectId)
+    revalidatePath('/')
+    return { success: true, ...result }
+  } catch (error) {
+    const message = error instanceof Error ? error.message : 'Failed to delete project'
+    return { success: false, error: message }
+  }
+}