prjct-cli 0.11.4 → 0.12.0

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

@@ -0,0 +1,15 @@
+export interface RoadmapPhase {
+  name: string
+  progress: number
+  features?: Array<{ name: string; status: string }>
+}
+
+export interface RoadmapData {
+  phases: RoadmapPhase[]
+  progress: number
+}
+
+export interface RoadmapCardProps {
+  roadmap: RoadmapData | null
+  className?: string
+}

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

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

package/packages/web/components/ShipsCard/ShipsCard.tsx

@@ -0,0 +1,52 @@
+import { BentoCard } from '@/components/BentoCard'
+import { EmptyState } from '@/components/EmptyState'
+import { Rocket } from 'lucide-react'
+import { Badge } from '@/components/ui/badge'
+import { formatShipDate } from './ShipsCard.utils'
+import type { ShipsCardProps } from './ShipsCard.types'
+
+export function ShipsCard({ ships, totalShips = 0, className }: ShipsCardProps) {
+  const displayShips = ships.slice(0, 4)
+
+  return (
+    <BentoCard
+      size="1x2"
+      title="Ships"
+      icon={Rocket}
+      count={totalShips}
+      accentColor={ships.length > 0 ? 'success' : 'default'}
+      className={className}
+    >
+      {ships.length === 0 ? (
+        <EmptyState
+          icon={Rocket}
+          title="Nothing shipped yet"
+          description="Ship your first feature"
+          command="/p:ship"
+          compact
+        />
+      ) : (
+        <div className="space-y-3">
+          {displayShips.map((ship, i) => (
+            <div key={i} className="group">
+              <div className="flex items-center gap-2">
+                {ship.version && (
+                  <Badge variant="outline" className="text-[10px] px-1.5 py-0 font-mono shrink-0">
+                    {ship.version}
+                  </Badge>
+                )}
+                <p className="text-sm font-medium truncate group-hover:text-foreground transition-colors">
+                  {ship.name}
+                </p>
+              </div>
+              <p className="text-[10px] text-muted-foreground mt-0.5">
+                {formatShipDate(ship.date)}
+                {ship.duration && ` · ${ship.duration}`}
+              </p>
+            </div>
+          ))}
+        </div>
+      )}
+    </BentoCard>
+  )
+}

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

@@ -0,0 +1,12 @@
+export interface Ship {
+  name: string
+  date: string
+  version?: string
+  duration?: string
+}
+
+export interface ShipsCardProps {
+  ships: Ship[]
+  totalShips?: number
+  className?: string
+}

package/packages/web/components/ShipsCard/ShipsCard.utils.ts

@@ -0,0 +1,4 @@
+export function formatShipDate(dateString: string): string {
+  const date = new Date(dateString)
+  return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+}

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

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

package/packages/web/components/SparklineChart/SparklineChart.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import { Area, AreaChart, ResponsiveContainer } from 'recharts'
+import type { SparklineChartProps } from './SparklineChart.types'
+
+export function SparklineChart({
+  data,
+  color = 'currentColor',
+  height = 32,
+  showArea = true,
+}: SparklineChartProps) {
+  const chartData = data.map((value, index) => ({ index, value }))
+
+  if (data.length === 0) {
+    return <div style={{ height }} className="w-full" />
+  }
+
+  return (
+    <ResponsiveContainer width="100%" height={height}>
+      <AreaChart data={chartData} margin={{ top: 0, right: 0, bottom: 0, left: 0 }}>
+        <defs>
+          <linearGradient id="sparklineGradient" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stopColor={color} stopOpacity={0.3} />
+            <stop offset="100%" stopColor={color} stopOpacity={0} />
+          </linearGradient>
+        </defs>
+        <Area
+          type="monotone"
+          dataKey="value"
+          stroke={color}
+          strokeWidth={1.5}
+          fill={showArea ? 'url(#sparklineGradient)' : 'none'}
+          isAnimationActive={false}
+        />
+      </AreaChart>
+    </ResponsiveContainer>
+  )
+}

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

@@ -0,0 +1,6 @@
+export interface SparklineChartProps {
+  data: number[]
+  color?: string
+  height?: number
+  showArea?: boolean
+}

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

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

package/packages/web/components/StreakCard/StreakCard.constants.ts

@@ -0,0 +1,2 @@
+export const STREAK_HOT_THRESHOLD = 3
+export const STREAK_ON_FIRE_THRESHOLD = 7

package/packages/web/components/StreakCard/StreakCard.tsx

@@ -0,0 +1,53 @@
+import { BentoCard } from '@/components/BentoCard'
+import { Flame } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { STREAK_HOT_THRESHOLD, STREAK_ON_FIRE_THRESHOLD } from './StreakCard.constants'
+import type { StreakCardProps } from './StreakCard.types'
+
+export function StreakCard({ streak, className }: StreakCardProps) {
+  const isHot = streak >= STREAK_HOT_THRESHOLD
+  const isOnFire = streak >= STREAK_ON_FIRE_THRESHOLD
+
+  return (
+    <BentoCard
+      size="1x1"
+      title="Streak"
+      icon={Flame}
+      accentColor={isOnFire ? 'warning' : 'default'}
+      className={className}
+    >
+      <div className="flex flex-col h-full justify-between">
+        <div className="flex items-center gap-3">
+          <Flame
+            className={cn(
+              'h-8 w-8 transition-colors',
+              isOnFire ? 'text-orange-500' : isHot ? 'text-amber-500' : 'text-muted-foreground'
+            )}
+          />
+          <div>
+            <p className="text-3xl font-bold tabular-nums">{streak}</p>
+            <p className="text-xs text-muted-foreground">day{streak !== 1 ? 's' : ''}</p>
+          </div>
+        </div>
+
+        <div className="flex gap-1 mt-3">
+          {Array.from({ length: 7 }).map((_, i) => (
+            <div
+              key={i}
+              className={cn(
+                'h-1.5 flex-1 rounded-full transition-colors',
+                i < streak
+                  ? isOnFire
+                    ? 'bg-orange-500'
+                    : isHot
+                    ? 'bg-amber-500'
+                    : 'bg-foreground'
+                  : 'bg-muted'
+              )}
+            />
+          ))}
+        </div>
+      </div>
+    </BentoCard>
+  )
+}

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

@@ -0,0 +1,4 @@
+export interface StreakCardProps {
+  streak: number
+  className?: string
+}

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

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

package/packages/web/components/TasksCounter/TasksCounter.tsx

@@ -0,0 +1,14 @@
+import type { TasksCounterProps } from './TasksCounter.types'
+
+export function TasksCounter({ count }: TasksCounterProps) {
+  return (
+    <div className="flex flex-col sm:flex-row sm:items-baseline gap-1 sm:gap-3">
+      <span className="text-5xl sm:text-6xl md:text-7xl font-bold tracking-tighter tabular-nums">
+        {count}
+      </span>
+      <span className="text-sm sm:text-base md:text-lg text-muted-foreground">
+        tasks completed
+      </span>
+    </div>
+  )
+}

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

@@ -0,0 +1,3 @@
+export interface TasksCounterProps {
+  count: number
+}

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

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

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

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

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/components/ui/tooltip.tsx

@@ -46,13 +46,13 @@ function TooltipContent({
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(
-          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          "bg-popover text-popover-foreground border shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
           className
         )}
         {...props}
       >
         {children}
-        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+        <TooltipPrimitive.Arrow className="bg-popover fill-popover z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
   )

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,