prjct-cli 0.11.5 → 0.12.1

package/packages/web/components/{TerminalTab.tsx → TerminalTabs/TerminalTab.tsx}

@@ -35,6 +35,7 @@ export function TerminalTab({ session, projectDir, isActive }: TerminalTabProps)
     disconnect,
     sendInput,
     focusTerminal,
+    fit,
   } = useClaudeTerminal({
     sessionId: session.id,
     projectDir,
@@ -57,6 +58,16 @@ export function TerminalTab({ session, projectDir, isActive }: TerminalTabProps)
     }
   }, []) // 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)

package/packages/web/components/{TerminalTabs.tsx → TerminalTabs/TerminalTabs.tsx}

@@ -90,8 +90,8 @@ export function TerminalTabs({ projectDir }: TerminalTabsProps) {
 
   return (
     <div className="flex flex-col h-full">
-      {/* Tab bar */}
-      <div className="flex items-center gap-1 px-2 py-1 bg-card border-b border-border min-h-[40px]">
+      {/* 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}
@@ -101,22 +101,23 @@ export function TerminalTabs({ projectDir }: TerminalTabsProps) {
             tabIndex={0}
             onKeyDown={(e) => e.key === 'Enter' && setActiveSession(session.id)}
             className={cn(
-              'flex items-center gap-2 px-3 py-1.5 rounded-md text-sm transition-colors cursor-pointer',
-              'hover:bg-muted',
+              '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" />
+              <Loader2 className="w-3.5 h-3.5 animate-spin shrink-0" />
             ) : session.isConnected ? (
-              <span className="relative flex h-2 w-2">
+              <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 w-2 bg-green-500" />
+                <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-green-500" />
               </span>
             ) : (
-              <span className="h-2 w-2 rounded-full bg-muted-foreground/50" />
+              <span className="h-2.5 w-2.5 rounded-full bg-muted-foreground/50 shrink-0" />
             )}
             {editingSessionId === session.id ? (
               <input
@@ -130,41 +131,41 @@ export function TerminalTabs({ projectDir }: TerminalTabsProps) {
                 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-[100px]">{session.label}</span>
+              <span className="truncate max-w-[80px] md:max-w-[100px]">{session.label}</span>
             )}
             <button
               onClick={(e) => handleCloseTab(session.id, e)}
-              className="p-0.5 rounded hover:bg-background/50 text-muted-foreground hover:text-foreground"
+              className="p-1 md:p-0.5 rounded hover:bg-background/50 text-muted-foreground hover:text-foreground shrink-0"
             >
-              <X className="w-3 h-3" />
+              <X className="w-4 h-4 md:w-3 md:h-3" />
             </button>
           </div>
         ))}
 
-        {/* New tab button */}
+        {/* New tab button - larger touch target on mobile */}
         <Button
           variant="ghost"
           size="icon"
-          className="h-7 w-7 ml-1"
+          className="h-9 w-9 md:h-7 md:w-7 ml-1 shrink-0"
           onClick={createSession}
         >
-          <Plus className="w-4 h-4" />
+          <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">
-            <div className="text-center">
-              <div className="w-16 h-16 rounded-full bg-muted flex items-center justify-center mx-auto mb-4">
-                <TerminalIcon className="w-8 h-8 text-muted-foreground" />
+          <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-lg font-medium mb-2">No active sessions</h2>
-              <p className="text-muted-foreground text-sm mb-4">
-                Click + or press Start to create a new terminal
+              <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}>
+              <Button onClick={createSession} className="min-h-[44px]">
                 <Plus className="w-4 h-4 mr-2" />
                 New Terminal
               </Button>
@@ -182,23 +183,23 @@ export function TerminalTabs({ projectDir }: TerminalTabsProps) {
         )}
       </div>
 
-      {/* Close confirmation dialog */}
+      {/* Close confirmation dialog - responsive */}
       <AlertDialog open={!!sessionToClose} onOpenChange={(open: boolean) => !open && setSessionToClose(null)}>
-        <AlertDialogContent>
+        <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" />
+              <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>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <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"
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90 w-full sm:w-auto"
             >
               Close Terminal
             </AlertDialogAction>

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

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

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

@@ -0,0 +1,27 @@
+import { TrendingUp, TrendingDown } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import type { VelocityBadgeProps } from './VelocityBadge.types'
+
+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',
+          isPositive
+            ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+            : 'bg-muted text-muted-foreground'
+        )}
+      >
+        <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

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

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

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

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

@@ -0,0 +1,71 @@
+import { BentoCard } from '@/components/BentoCard'
+import { SparklineChart } from '@/components/SparklineChart'
+import { Zap, TrendingUp, TrendingDown, Target } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import type { VelocityCardProps } from './VelocityCard.types'
+
+export function VelocityCard({
+  tasksPerDay,
+  weeklyData = [],
+  change = 0,
+  estimateAccuracy,
+  className,
+}: VelocityCardProps) {
+  return (
+    <BentoCard
+      size="1x1"
+      title="Velocity"
+      icon={Zap}
+      className={className}
+    >
+      <div className="flex flex-col h-full justify-between">
+        <div>
+          <p className="text-3xl font-bold tabular-nums">{tasksPerDay}</p>
+          <p className="text-xs text-muted-foreground">tasks/day</p>
+        </div>
+
+        {weeklyData.length > 0 && (
+          <div className="mt-2">
+            <SparklineChart data={weeklyData} height={28} />
+          </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>
+          )}
+        </div>
+      </div>
+    </BentoCard>
+  )
+}

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

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

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

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

package/packages/web/components/WeeklySparkline/WeeklySparkline.tsx

@@ -0,0 +1,13 @@
+import { SparklineChart } from '@/components/SparklineChart'
+import type { WeeklySparklineProps } from './WeeklySparkline.types'
+
+export function WeeklySparkline({ data }: WeeklySparklineProps) {
+  return (
+    <div className="w-full sm:w-32">
+      <p className="text-[10px] uppercase tracking-wider text-muted-foreground mb-1 md:text-right">
+        7-day activity
+      </p>
+      <SparklineChart data={data} height={40} />
+    </div>
+  )
+}

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

@@ -0,0 +1,3 @@
+export interface WeeklySparklineProps {
+  data: number[]
+}

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

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

package/packages/web/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

package/packages/web/context/TerminalTabsContext.tsx

@@ -4,7 +4,7 @@
  * Terminal Tabs Context - Manage multiple terminal sessions
  */
 
-import { createContext, useContext, useCallback, useState, useRef, ReactNode } from 'react'
+import { createContext, useContext, useCallback, useState, useRef, useEffect, ReactNode } from 'react'
 
 export interface TerminalSession {
   id: string
@@ -108,6 +108,51 @@ export function TerminalTabsProvider({ children, projectId }: { children: ReactN
     }
   }, [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,

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 }
+  }
+}