feat: add deploy button for persistent background app execution (#122)

- Add execCommandInBackground method in sandbox-manager.ts for nohup execution
- Add isPortListening and killProcessOnPort methods for app status detection
- Create /api/sandbox/[id]/exec endpoint for background command execution
- Create /api/sandbox/[id]/app-status endpoint for status check and stop
- Add Deploy button in terminal-toolbar with polling-based status detection
- Support start/stop toggle with visual feedback (Deploy -> Live -> Stop)

Closes #116

Author: Che-Zhu

app/api/sandbox/[id]/app-status/route.ts

@@ -0,0 +1,69 @@
+/**
+ * GET /api/sandbox/[id]/app-status
+ * Check if application is running (port 3000 listening)
+ *
+ * DELETE /api/sandbox/[id]/app-status
+ * Stop the application (kill process on port 3000)
+ */
+
+import { NextResponse } from 'next/server'
+
+import { verifySandboxAccess, withAuth } from '@/lib/api-auth'
+import { getK8sServiceForUser } from '@/lib/k8s/k8s-service-helper'
+import { logger as baseLogger } from '@/lib/logger'
+
+const logger = baseLogger.child({ module: 'api/sandbox/[id]/app-status' })
+const APP_PORT = 3000
+
+export const GET = withAuth<{ running: boolean }>(async (req, context, session) => {
+  const resolvedParams = await context.params
+  const sandboxId = Array.isArray(resolvedParams.id) ? resolvedParams.id[0] : resolvedParams.id
+
+  try {
+    const sandbox = await verifySandboxAccess(sandboxId, session.user.id)
+    const k8sService = await getK8sServiceForUser(session.user.id)
+
+    const running = await k8sService.isPortListening(
+      sandbox.k8sNamespace,
+      sandbox.sandboxName,
+      APP_PORT
+    )
+
+    return NextResponse.json({ running })
+  } catch (error) {
+    logger.error(`Failed to check app status: ${error}`)
+    return NextResponse.json({ running: false })
+  }
+})
+
+export const DELETE = withAuth<{ success: boolean; error?: string }>(
+  async (req, context, session) => {
+    const resolvedParams = await context.params
+    const sandboxId = Array.isArray(resolvedParams.id) ? resolvedParams.id[0] : resolvedParams.id
+
+    try {
+      const sandbox = await verifySandboxAccess(sandboxId, session.user.id)
+      const k8sService = await getK8sServiceForUser(session.user.id)
+
+      logger.info(`Stopping app in sandbox ${sandboxId} (${sandbox.sandboxName})`)
+
+      const result = await k8sService.killProcessOnPort(
+        sandbox.k8sNamespace,
+        sandbox.sandboxName,
+        APP_PORT
+      )
+
+      if (result.success) {
+        logger.info(`App stopped in sandbox ${sandboxId}`)
+      } else {
+        logger.warn(`Failed to stop app in sandbox ${sandboxId}: ${result.error}`)
+      }
+
+      return NextResponse.json(result)
+    } catch (error) {
+      logger.error(`Failed to stop app: ${error}`)
+      const errorMessage = error instanceof Error ? error.message : 'Unknown error'
+      return NextResponse.json({ success: false, error: errorMessage }, { status: 500 })
+    }
+  }
+)

app/api/sandbox/[id]/exec/route.ts

@@ -0,0 +1,87 @@
+/**
+ * POST /api/sandbox/[id]/exec
+ *
+ * Execute a command in the sandbox background.
+ * Runs command with nohup, returns PID immediately.
+ *
+ * Request Body:
+ * - command: Command to execute (required)
+ * - workdir: Working directory (optional, default: /home/fulling)
+ *
+ * Returns:
+ * - success: Whether execution was successful
+ * - pid: Process ID
+ * - error: Error message if failed
+ *
+ * Security:
+ * - Requires authentication
+ * - Verifies user owns the sandbox
+ */
+
+import { NextResponse } from 'next/server'
+
+import { verifySandboxAccess, withAuth } from '@/lib/api-auth'
+import { getK8sServiceForUser } from '@/lib/k8s/k8s-service-helper'
+import { logger as baseLogger } from '@/lib/logger'
+
+const logger = baseLogger.child({ module: 'api/sandbox/[id]/exec' })
+
+interface ExecRequestBody {
+  command: string
+  workdir?: string
+}
+
+interface ExecResponse {
+  success: boolean
+  pid?: number
+  error?: string
+}
+
+export const POST = withAuth<ExecResponse>(async (req, context, session) => {
+  const resolvedParams = await context.params
+  const sandboxId = Array.isArray(resolvedParams.id) ? resolvedParams.id[0] : resolvedParams.id
+
+  try {
+    // Parse request body
+    const body: ExecRequestBody = await req.json()
+
+    if (!body.command) {
+      logger.warn(`Missing command in request body for sandbox ${sandboxId}`)
+      return NextResponse.json({ success: false, error: 'command is required' }, { status: 400 })
+    }
+
+    // Verify user owns this sandbox
+    const sandbox = await verifySandboxAccess(sandboxId, session.user.id)
+
+    logger.info(
+      `Executing background command in sandbox ${sandboxId} (${sandbox.sandboxName}): "${body.command}"`
+    )
+
+    // Get K8s service for user
+    const k8sService = await getK8sServiceForUser(session.user.id)
+
+    // Execute command in sandbox background
+    const result = await k8sService.execCommandInBackground(
+      sandbox.k8sNamespace,
+      sandbox.sandboxName,
+      body.command,
+      body.workdir
+    )
+
+    if (result.success) {
+      logger.info(`Command started in sandbox ${sandboxId} (PID: ${result.pid})`)
+    } else {
+      logger.warn(`Command execution failed in sandbox ${sandboxId}: ${result.error}`)
+    }
+
+    return NextResponse.json(result, { status: result.success ? 200 : 500 })
+  } catch (error) {
+    logger.error(`Failed to execute command in sandbox: ${error}`)
+
+    const errorMessage = error instanceof Error ? error.message : 'Unknown error'
+    return NextResponse.json(
+      { success: false, error: `Failed to execute command: ${errorMessage}` },
+      { status: 500 }
+    )
+  }
+})

components/terminal/terminal-toolbar.tsx

@@ -6,9 +6,10 @@
 
 'use client';
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import type { Prisma } from '@prisma/client';
-import { Copy, Eye, EyeOff, Network, Plus, Terminal as TerminalIcon, X } from 'lucide-react';
+import { Copy, Eye, EyeOff, Loader2, Network, Play, Plus, Square, Terminal as TerminalIcon, X } from 'lucide-react';
+import { toast } from 'sonner';
 
 import {
   Dialog,
@@ -72,6 +73,26 @@ export function TerminalToolbar({
   const [showNetworkDialog, setShowNetworkDialog] = useState(false);
   const [showPassword, setShowPassword] = useState(false);
   const [copiedField, setCopiedField] = useState<string | null>(null);
+  const [isStartingApp, setIsStartingApp] = useState(false);
+  const [isStoppingApp, setIsStoppingApp] = useState(false);
+  const [isAppRunning, setIsAppRunning] = useState(false);
+
+  // Check app status on mount
+  useEffect(() => {
+    if (!sandbox?.id) return;
+
+    const checkStatus = async () => {
+      try {
+        const response = await fetch(`/api/sandbox/${sandbox.id}/app-status`);
+        const data = await response.json();
+        setIsAppRunning(data.running);
+      } catch (error) {
+        console.error('Failed to check app status:', error);
+      }
+    };
+
+    checkStatus();
+  }, [sandbox?.id]);
 
   // Build network endpoints list, filtering out any without URLs
   const allEndpoints = [
@@ -99,6 +120,107 @@ export function TerminalToolbar({
     }
   };
 
+  // Start application in background
+  const handleStartApp = async () => {
+    if (!sandbox?.id || isStartingApp) return;
+
+    setIsStartingApp(true);
+
+    // Send exec command (fire and forget, don't wait for response)
+    fetch(`/api/sandbox/${sandbox.id}/exec`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        command: 'pnpm run build && pnpm run start',
+        workdir: '/home/fulling/next',
+      }),
+    }).catch(() => {
+      // Ignore errors, we'll detect success via port polling
+    });
+
+    toast.info('Deploying...', {
+      description: 'Building and starting your app. This may take a few minutes.',
+    });
+
+    // Poll for app status every 10 seconds, max 5 minutes
+    const maxAttempts = 30; // 30 * 10s = 5 minutes
+    let attempts = 0;
+
+    const pollStatus = async (): Promise<boolean> => {
+      try {
+        const response = await fetch(`/api/sandbox/${sandbox.id}/app-status`);
+        const data = await response.json();
+        return data.running;
+      } catch {
+        return false;
+      }
+    };
+
+    const poll = async () => {
+      while (attempts < maxAttempts) {
+        attempts++;
+        const running = await pollStatus();
+        if (running) {
+          setIsAppRunning(true);
+          setIsStartingApp(false);
+          toast.success('Deployed', {
+            description: 'Your app is now live',
+          });
+          return;
+        }
+        // Wait 10 seconds before next check
+        await new Promise((resolve) => setTimeout(resolve, 10000));
+      }
+
+      // Timeout after max attempts
+      setIsStartingApp(false);
+      toast.error('Deploy Timeout', {
+        description: 'App did not start within 5 minutes. Check terminal for errors.',
+      });
+    };
+
+    poll();
+  };
+
+  // Stop application
+  const handleStopApp = async () => {
+    if (!sandbox?.id || isStoppingApp) return;
+
+    setIsStoppingApp(true);
+    try {
+      const response = await fetch(`/api/sandbox/${sandbox.id}/app-status`, {
+        method: 'DELETE',
+      });
+
+      const result = await response.json();
+
+      if (result.success) {
+        setIsAppRunning(false);
+        toast.success('App Stopped');
+      } else {
+        toast.error('Stop Failed', {
+          description: result.error || 'Unknown error',
+        });
+      }
+    } catch (error) {
+      console.error('Failed to stop app:', error);
+      toast.error('Stop Failed', {
+        description: 'Network error, please try again',
+      });
+    } finally {
+      setIsStoppingApp(false);
+    }
+  };
+
+  // Toggle app start/stop
+  const handleToggleApp = () => {
+    if (isAppRunning) {
+      handleStopApp();
+    } else {
+      handleStartApp();
+    }
+  };
+
   return (
     <>
       <div className="h-12 bg-[#2d2d30] border-b border-[#3e3e42] flex items-center justify-between">
@@ -150,10 +272,38 @@ export function TerminalToolbar({
         {/* Action Buttons */}
         <div className="flex items-center gap-2">
           {/* Status Badge */}
-          <div className="flex items-center gap-1.5 px-2 py-1 text-xs text-gray-300">
+          {/* <div className="flex items-center gap-1.5 px-2 py-1 text-xs text-gray-300">
             <div className={cn('h-1.5 w-1.5 rounded-full', getStatusBgClasses(project.status))} />
             <span>{project.status}</span>
-          </div>
+          </div> */}
+
+          {/* Deploy Button */}
+          <button
+            onClick={handleToggleApp}
+            disabled={isStartingApp || isStoppingApp || !sandbox}
+            className={cn(
+              'px-2 py-1 text-xs rounded transition-colors flex items-center gap-1 disabled:cursor-not-allowed',
+              isAppRunning
+                ? 'text-green-400 hover:text-red-400 hover:bg-red-400/10 bg-green-400/10'
+                : 'text-gray-300 hover:text-white hover:bg-[#37373d] disabled:opacity-50'
+            )}
+            title={
+              isAppRunning
+                ? 'Click to stop. Your app will no longer be accessible.'
+                : 'Build and run your app in production mode. It will keep running even if you close this terminal.'
+            }
+          >
+            {isStartingApp || isStoppingApp ? (
+              <Loader2 className="h-3 w-3 animate-spin" />
+            ) : isAppRunning ? (
+              <Square className="h-3 w-3" />
+            ) : (
+              <Play className="h-3 w-3" />
+            )}
+            <span>
+              {isStartingApp ? 'Deploying...' : isStoppingApp ? 'Stopping...' : isAppRunning ? 'Live' : 'Deploy'}
+            </span>
+          </button>
 
           {/* Network Button */}
           <button