feat: added vscode start task button (#1201)

Co-authored-by: Carlos Montoya <carlos@Carloss-MacBook-Pro.local>
Co-authored-by: Carlos Montoya <los@losmontoya.com>

apps/extension/src/components/TaskDetails/TaskMetadataSidebar.tsx

@@ -1,9 +1,10 @@
 import type React from 'react';
 import { useState, useEffect } from 'react';
 import { Button } from '@/components/ui/button';
-import { Loader2 } from 'lucide-react';
+import { Loader2, Play } from 'lucide-react';
 import { PriorityBadge } from './PriorityBadge';
 import type { TaskMasterTask } from '../../webview/types';
+import { useVSCodeContext } from '../../webview/contexts/VSCodeContext';
 
 interface TaskMetadataSidebarProps {
 	currentTask: TaskMasterTask;
@@ -28,10 +29,12 @@ export const TaskMetadataSidebar: React.FC<TaskMetadataSidebarProps> = ({
 	isRegenerating = false,
 	isAppending = false
 }) => {
+	const { vscode } = useVSCodeContext();
 	const [isLoadingComplexity, setIsLoadingComplexity] = useState(false);
 	const [mcpComplexityScore, setMcpComplexityScore] = useState<
 		number | undefined
 	>(undefined);
+	const [isStartingTask, setIsStartingTask] = useState(false);
 
 	// Get complexity score from task
 	const currentComplexityScore = complexity?.score;
@@ -97,6 +100,29 @@ export const TaskMetadataSidebar: React.FC<TaskMetadataSidebarProps> = ({
 		}
 	};
 
+	// Handle starting a task
+	const handleStartTask = () => {
+		if (!currentTask || isStartingTask) {
+			return;
+		}
+		
+		setIsStartingTask(true);
+		
+		// Send message to extension to open terminal
+		if (vscode) {
+			vscode.postMessage({
+				type: 'openTerminal',
+				taskId: currentTask.id,
+				taskTitle: currentTask.title
+			});
+		}
+		
+		// Reset loading state after a short delay
+		setTimeout(() => {
+			setIsStartingTask(false);
+		}, 500);
+	};
+
 	// Effect to handle complexity on task change
 	useEffect(() => {
 		if (currentTask?.id) {
@@ -284,6 +310,24 @@ export const TaskMetadataSidebar: React.FC<TaskMetadataSidebarProps> = ({
 					{currentTask.dependencies && currentTask.dependencies.length > 0 && (
 						<div className="border-b border-textSeparator-foreground" />
 					)}
+
+					{/* Start Task Button */}
+					<div className="mt-4">
+						<Button
+							onClick={handleStartTask}
+							variant="default"
+							size="sm"
+							className="w-full text-xs"
+							disabled={isRegenerating || isAppending || isStartingTask || currentTask?.status === 'done'}
+						>
+							{isStartingTask ? (
+								<Loader2 className="w-4 h-4 mr-2 animate-spin" />
+							) : (
+								<Play className="w-4 h-4 mr-2" />
+							)}
+							{isStartingTask ? 'Starting...' : 'Start Task'}
+						</Button>
+					</div>
 				</div>
 			</div>
 		</div>

apps/extension/src/components/TaskDetailsView.tsx

@@ -202,16 +202,16 @@ export const TaskDetailsView: React.FC<TaskDetailsViewProps> = ({
 					/>
 				</div>
 
-				{/* Right column - Metadata (1/3 width) */}
-				<TaskMetadataSidebar
-					currentTask={currentTask}
-					tasks={allTasks}
-					complexity={complexity}
-					isSubtask={isSubtask}
-					sendMessage={sendMessage}
-					onStatusChange={handleStatusChange}
-					onDependencyClick={handleDependencyClick}
-				/>
+			{/* Right column - Metadata (1/3 width) */}
+			<TaskMetadataSidebar
+				currentTask={currentTask}
+				tasks={allTasks}
+				complexity={complexity}
+				isSubtask={isSubtask}
+				sendMessage={sendMessage}
+				onStatusChange={handleStatusChange}
+				onDependencyClick={handleDependencyClick}
+			/>
 			</div>
 		</div>
 	);

apps/extension/src/services/webview-manager.ts

@@ -361,6 +361,25 @@ export class WebviewManager {
 					}
 					return;
 
+				case 'openTerminal':
+					// Open VS Code terminal for task execution
+					this.logger.info(`Opening terminal for task ${data.taskId}: ${data.taskTitle}`);
+					
+					try {
+						const terminal = vscode.window.createTerminal({
+							name: `Task ${data.taskId}: ${data.taskTitle}`,
+							cwd: this.workspaceRoot
+						});
+						terminal.show();
+						
+						this.logger.info('Terminal created and shown successfully');
+						response = { success: true };
+					} catch (error) {
+						this.logger.error('Failed to create terminal:', error);
+						response = { success: false, error: error.message };
+					}
+					break;
+
 				default:
 					throw new Error(`Unknown message type: ${type}`);
 			}