feat(terminal): add directory selector for customizable deploy path (#127)

* refactor: move actions to root and add sandbox runCommand

- Move lib/actions to root /actions directory
- Implement runCommand action in actions/sandbox.ts
- Extract TTYD context helper to lib/util/ttyd-context.ts
- Create actions/types.ts for shared action types
- Update component imports

* refactor: restructure terminal toolbar component

- Move terminal-toolbar.tsx to toolbar/toolbar.tsx
- Update imports in terminal-container.tsx

* refactor(terminal): extract app runner logic into custom hook and separate components

- Extract app runner state and logic into useAppRunner custom hook
- Split app runner UI into dedicated AppRunner and AppRunnerDialog components
- Simplify TerminalToolbar by removing inline app runner implementation
- Improve code organization and reusability

This refactoring separates concerns by moving app runner business logic
into a reusable hook and component, making the toolbar component cleaner
and easier to maintain.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

* feat(terminal): extract DirectorySelector as separate component with dropdown

- Extract directory selector from app-runner.tsx into directory-selector.tsx
- Implement dropdown menu using shadcn DropdownMenu for directory selection
- Add placeholder options (./ and /app) for testing
- Increase width from 80px to 120px for better readability
- Support both controlled and uncontrolled modes via value/onChange props

* feat(terminal): implement dynamic directory fetching in DirectorySelector

- Add sandboxId prop and fetch directories via runCommand('find . -type d -maxdepth 2')
- Filter out node_modules, .git, .next, and other build directories
- Filter welcome message lines by only keeping paths starting with . or /
- Add loading spinner while fetching directories
- Match dropdown width to trigger button using CSS variable
- Limit directory list to 20 items with overflow scroll
- Move separator outside the flex container in AppRunner

* feat(terminal): use selected directory as workdir when starting app

- Add deployDirectory state to AppRunner and pass to DirectorySelector (controlled mode)
- Modify useAppRunner to accept deployDir param and dynamically calculate workdir
- workdir defaults to /home/fulling/next, appends relative path when non-root selected
- Reduce directory search depth to maxdepth 1 for cleaner listing
- Increase DirectorySelector width from 120px to 180px for better readability

* fix: fix lint issue

---------

Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com>

Author: Che-Zhu

actions/sandbox.ts

@@ -0,0 +1,65 @@
+'use server'
+
+/**
+ * Sandbox Server Actions
+ *
+ * Server Actions for sandbox operations. Frontend components call these
+ * instead of API Routes directly.
+ *
+ * TODO: Migrate from app/api/sandbox/:
+ *   - app-status (GET/DELETE)
+ *   - exec (POST)
+ *   - cwd (GET/PUT)
+ */
+
+import { auth } from '@/lib/auth'
+import { getSandboxTtydContext } from '@/lib/util/ttyd-context'
+import { execCommand, TtydExecError } from '@/lib/util/ttyd-exec'
+
+import type { ExecResult } from './types'
+
+/**
+ * Execute a command in the sandbox and wait for output.
+ *
+ * @param sandboxId - The sandbox ID
+ * @param command - The command to execute
+ * @param timeoutMs - Optional timeout in milliseconds (default: 30000)
+ */
+export async function runCommand(
+  sandboxId: string,
+  command: string,
+  timeoutMs?: number
+): Promise<ExecResult> {
+  const session = await auth()
+
+  if (!session) {
+    return { success: false, error: 'Unauthorized' }
+  }
+
+  try {
+    const { ttyd } = await getSandboxTtydContext(sandboxId, session.user.id)
+    const { baseUrl, accessToken, authorization } = ttyd
+
+    const output = await execCommand(baseUrl, accessToken, command, timeoutMs, authorization)
+
+    return { success: true, output }
+  } catch (error) {
+    console.error('Failed to execute command in sandbox:', error)
+    const errorMessage = error instanceof TtydExecError ? error.message : 'Unknown error'
+    return { success: false, error: errorMessage }
+  }
+}
+
+/**
+ * Execute a command in the sandbox without waiting for output.
+ *
+ * @param sandboxId - The sandbox ID
+ * @param command - The command to execute
+ */
+export async function runCommandDetached(
+  _sandboxId: string,
+  _command: string
+): Promise<ExecResult> {
+  // TODO: Implement detached command execution
+  throw new Error('Not implemented')
+}

lib/actions/sealos-auth.ts actions/sealos-auth.tslib/actions/sealos-auth.ts renamed to actions/sealos-auth.ts

@@ -0,0 +1,13 @@
+/**
+ * Type definitions for Server Actions
+ */
+
+// =============================================================================
+// Sandbox Actions
+// =============================================================================
+
+export type ExecResult = {
+  success: boolean
+  output?: string
+  error?: string
+}

actions/types.ts

@@ -6,9 +6,9 @@ import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { useSession } from 'next-auth/react';
 
+import { authenticateWithSealos } from '@/actions/sealos-auth';
 import { MatrixRain } from '@/components/MatrixRain';
 import { Button } from '@/components/ui/button';
-import { authenticateWithSealos } from '@/lib/actions/sealos-auth';
 import { useSealos } from '@/provider/sealos';
 
 /**

components/home-page.tsx

@@ -16,8 +16,8 @@
 import { useState } from 'react';
 import type { Prisma } from '@prisma/client';
 
+import { type Tab, TerminalToolbar } from './toolbar/toolbar';
 import { TerminalDisplay } from './terminal-display';
-import { type Tab, TerminalToolbar } from './terminal-toolbar';
 
 // ============================================================================
 // Types

components/terminal/terminal-container.tsx

@@ -0,0 +1,91 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+
+interface AppRunnerDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: () => void;
+  sandboxUrl: string | null | undefined;
+}
+
+export function AppRunnerDialog({
+  open,
+  onOpenChange,
+  onConfirm,
+  sandboxUrl,
+}: AppRunnerDialogProps) {
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent className="bg-[#252526] border-[#3e3e42] text-white">
+        <AlertDialogHeader>
+          <AlertDialogTitle>Run Application & Keep Active?</AlertDialogTitle>
+          <AlertDialogDescription className="text-gray-400 space-y-3" asChild>
+            <div className="text-sm text-gray-400 space-y-3">
+              <div>
+                This will build and start your application by running:
+                <br />
+                <code className="bg-[#1e1e1e] px-1.5 py-0.5 rounded text-xs border border-[#3e3e42] mt-1 inline-block font-mono text-blue-400">
+                  pnpm build && pnpm start
+                </code>
+              </div>
+
+              <div className="bg-[#1e1e1e]/50 rounded-md border border-[#3e3e42]/50 text-sm">
+                <div className="p-3 space-y-2">
+                  <div className="flex gap-2.5 items-start">
+                    <span className="text-blue-400 mt-0.5">•</span>
+                    <span>App runs continuously in the background</span>
+                  </div>
+                  <div className="flex gap-2.5 items-start">
+                    <span className="text-blue-400 mt-0.5">•</span>
+                    <span>Remains active even if you leave this page</span>
+                  </div>
+                  <div className="flex gap-2.5 items-start">
+                    <span className="text-blue-400 mt-0.5">•</span>
+                    <span>
+                      Can be stopped anytime by clicking this button again
+                    </span>
+                  </div>
+                </div>
+
+                {sandboxUrl && (
+                  <div className="px-3 pb-3 pt-2 border-t border-[#3e3e42]/30">
+                    <div className="text-xs text-gray-500 mb-1">
+                      Once running, your application will be available at:
+                    </div>
+                    <a
+                      href={sandboxUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-xs text-[#3794ff] hover:text-[#4fc1ff] break-all underline underline-offset-2 hover:underline-offset-4 transition-all block"
+                    >
+                      {sandboxUrl}
+                    </a>
+                  </div>
+                )}
+              </div>
+            </div>
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel className="bg-transparent border-[#3e3e42] text-gray-300 hover:bg-[#37373d] hover:text-white">
+            Cancel
+          </AlertDialogCancel>
+          <AlertDialogAction
+            onClick={onConfirm}
+            className="bg-[#007fd4] hover:bg-[#0060a0] text-white"
+          >
+            Confirm & Run
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

components/terminal/toolbar/app-runner-dialog.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import { useState } from 'react';
+import type { Prisma } from '@prisma/client';
+import { Loader2, Play, Square } from 'lucide-react';
+
+import { useAppRunner } from '@/hooks/use-app-runner';
+import { cn } from '@/lib/utils';
+
+import { AppRunnerDialog } from './app-runner-dialog';
+import { DirectorySelector } from './directory-selector';
+
+type Sandbox = Prisma.SandboxGetPayload<object>;
+
+interface AppRunnerProps {
+  sandbox: Sandbox | undefined;
+}
+
+export function AppRunner({ sandbox }: AppRunnerProps) {
+  const [showStartConfirm, setShowStartConfirm] = useState(false);
+  const [deployDirectory, setDeployDirectory] = useState('./');
+  const {
+    isStartingApp,
+    isStoppingApp,
+    isAppRunning,
+    startApp,
+    stopApp,
+  } = useAppRunner(sandbox?.id, deployDirectory);
+
+  // Toggle app start/stop
+  const handleToggleApp = () => {
+    if (isAppRunning) {
+      stopApp();
+    } else {
+      setShowStartConfirm(true); // Open confirmation modal
+    }
+  };
+
+  const handleConfirmStart = () => {
+    setShowStartConfirm(false);
+    startApp();
+  };
+
+  return (
+    <>
+      <div className="flex items-center gap-2">
+        {/* Directory Selector */}
+        <DirectorySelector
+          sandboxId={sandbox?.id}
+          value={deployDirectory}
+          onChange={setDeployDirectory}
+        />
+
+
+
+        {/* Run App 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 ? 'Starting...' : isStoppingApp ? 'Stopping...' : isAppRunning ? 'Running' : 'Run App'}
+          </span>
+        </button>
+      </div>
+
+      {/* Separator */}
+      <div className="h-4 w-[1px] bg-[#3e3e42]" />
+
+      {/* Confirmation Alert Dialog */}
+      <AppRunnerDialog
+        open={showStartConfirm}
+        onOpenChange={setShowStartConfirm}
+        onConfirm={handleConfirmStart}
+        sandboxUrl={sandbox?.publicUrl}
+      />
+    </>
+  );
+}