fix: update browser start + stop commands

Author: fukouda

source/commands/browser/start.tsx

@@ -178,7 +178,7 @@ export default function Start({options}: Props) {
 		return (
 			<Callout variant="info" title="Starting Development Environment">
 				<Text>
-					<Spinner type="dots" /> {status}
+					<Spinner type="dots" /> {status + '\n'}
 				</Text>
 				{output && (
 					<Text dimColor>{output.split('\n').slice(-5).join('\n')}</Text>

source/commands/browser/stop.tsx

@@ -1,19 +1,201 @@
-import path from 'path';
-import {useEffect} from 'react';
-import {exec} from 'child_process';
+import React, {useEffect, useState} from 'react';
+import {spawn} from 'child_process';
 import {CONFIG_DIR, REPO_URL} from '../../utils/constants.js';
+import path from 'path';
+import zod from 'zod';
+import {option} from 'pastel';
+import Spinner from 'ink-spinner';
+import {Text} from 'ink';
+import Callout from '../../components/callout.js';
+
+export const description = 'Stops the development environment';
+
+export const options = zod.object({
+	verbose: zod
+		.string()
+		.describe(
+			option({
+				description: 'Enable verbose logging',
+				alias: 'v',
+			}),
+		)
+		.optional(),
+	docker_check: zod
+		.string()
+		.describe(option({description: 'Verify Docker is running', alias: 'dc'}))
+		.optional(),
+	force: zod
+		.boolean()
+		.describe(
+			option({
+				description: 'Force stop containers and remove orphaned containers',
+				alias: 'f',
+			}),
+		)
+		.optional(),
+});
+
+type Props = {
+	options: zod.infer<typeof options>;
+};
+
+function isDockerRunning(): Promise<boolean> {
+	return new Promise(resolve => {
+		const isRunning = spawn('docker', ['info']);
+		isRunning.on('close', code => {
+			resolve(code === 0);
+		});
+		isRunning.on('error', () => {
+			resolve(false);
+		});
+	});
+}
 
-export const description = 'Stops the development server';
+export default function Stop({options}: Props) {
+	const [loading, setLoading] = useState(false);
+	const [dockerError, setDockerError] = useState(false);
+	const [status, setStatus] = useState('');
+	const [output, setOutput] = useState<string>('');
+	const [stopped, setStopped] = useState(false);
 
-export default function Stop() {
-	const folderName = path.basename(REPO_URL, '.git');
 	useEffect(() => {
 		async function stop() {
-			console.log('🚀 Stopping Docker Compose...');
-			exec('docker-compose down', {
+			setLoading(true);
+			setStatus('Checking Docker status...');
+
+			const dockerRunning = await isDockerRunning();
+			if (!dockerRunning) {
+				setDockerError(true);
+				setLoading(false);
+				return;
+			}
+
+			setStatus(
+				options?.force
+					? 'Force stopping Docker Compose...'
+					: 'Stopping Docker Compose...',
+			);
+
+			const folderName = path.basename(REPO_URL, '.git');
+
+			// Build docker-compose command arguments
+			const dockerCommand = 'docker-compose';
+			let dockerArgs: string[];
+
+			if (options?.force) {
+				// Use kill for force stop (sends SIGKILL)
+				dockerArgs = ['-f', 'docker-compose.dev.yml', 'kill'];
+			} else {
+				// Use down for graceful stop
+				dockerArgs = ['-f', 'docker-compose.dev.yml', 'down'];
+			}
+
+			const dockerCompose = spawn(dockerCommand, dockerArgs, {
 				cwd: path.join(CONFIG_DIR, folderName),
+				stdio: ['pipe', 'pipe', 'pipe'], // Capture stdout and stderr
+				env: {
+					...process.env,
+					ENABLE_VERBOSE_LOGGING: options?.verbose || 'false',
+				},
+			});
+
+			// Stream stdout to output state
+			dockerCompose.stdout?.on('data', data => {
+				const text = data.toString();
+				setOutput(prev => prev + text);
+			});
+
+			// Stream stderr to output state
+			dockerCompose.stderr?.on('data', data => {
+				const text = data.toString();
+				setOutput(prev => prev + text);
+			});
+
+			dockerCompose.on('close', async code => {
+				if (code !== 0) {
+					setDockerError(true);
+					setLoading(false);
+					return;
+				}
+
+				// If we used kill (force), we still need to clean up with down
+				if (options?.force) {
+					setStatus('Cleaning up containers...');
+					const cleanup = spawn(
+						'docker-compose',
+						['-f', 'docker-compose.dev.yml', 'down'],
+						{
+							cwd: path.join(CONFIG_DIR, folderName),
+							env: {
+								...process.env,
+								ENABLE_VERBOSE_LOGGING: options?.verbose || 'false',
+							},
+						},
+					);
+
+					cleanup.on('close', () => {
+						setStatus('Development environment force stopped and cleaned up');
+						setStopped(true);
+						setLoading(false);
+					});
+
+					cleanup.on('error', () => {
+						setStatus('Development environment force stopped (cleanup failed)');
+						setStopped(true);
+						setLoading(false);
+					});
+				} else {
+					setStatus('Development environment stopped successfully');
+					setStopped(true);
+					setLoading(false);
+				}
+			});
+
+			dockerCompose.on('error', error => {
+				console.error('Error stopping Docker Compose:', error);
+				setDockerError(true);
+				setLoading(false);
 			});
 		}
 		stop();
 	}, []);
+
+	if (dockerError) {
+		return (
+			<Callout variant="failed" title="Stop Failed">
+				Docker is not running or there was an error stopping the containers.
+			</Callout>
+		);
+	}
+
+	if (loading) {
+		return (
+			<Callout variant="info" title="Stopping Development Environment">
+				<Text>
+					<Spinner type="dots" /> {status + '\n'}
+				</Text>
+				{output && (
+					<Text dimColor>{output.split('\n').slice(-5).join('\n')}</Text>
+				)}
+			</Callout>
+		);
+	}
+
+	if (stopped) {
+		return (
+			<Callout variant="success" title="Development Environment Stopped">
+				{options?.force
+					? 'All containers have been force stopped and cleaned up successfully.'
+					: 'All containers have been stopped successfully.'}
+			</Callout>
+		);
+	}
+
+	return (
+		<Callout variant="info" title="Stopping Development Environment">
+			<Text>
+				<Spinner type="dots" /> {status}
+			</Text>
+		</Callout>
+	);
 }