feat: implement feature to mark tasks as 'Completed' after successful execution (#98)

Author: yashu183

.changeset/lovely-avocados-do.md

@@ -0,0 +1,5 @@
+---
+"hai-build-code-generator": minor
+---
+
+Marking the Hai tasks as 'Completed' upon successful execution

src/core/controller/index.ts

@@ -965,6 +965,44 @@ export class Controller {
 					break
 				}
 				break
+			case "writeTaskStatus":
+				// write status to the file
+				const folder = message.folder
+				const taskId = message?.taskId ?? ""
+				const status = message?.status
+				const taskIdMatch = taskId.match(/^(\d+)-US(\d+)-TASK(\d+)$/)
+				if (!folder || !taskIdMatch || !status) {
+					const message = `Failed to update task status. Error: Either folder, taskId or status is invalid.`
+					vscode.window.showErrorMessage(message)
+				} else {
+					const [_, prdId, usId, taskId] = taskIdMatch
+					const prdFeatureFilePath = path.join(`${folder}`, "PRD", `PRD${prdId}-feature.json`)
+					try {
+						const fileContent = await fs.readFile(prdFeatureFilePath, "utf-8")
+						const prdFeatureJson = JSON.parse(fileContent)
+						const feature = prdFeatureJson["features"].find((feature: { id: string }) => feature.id === `US${usId}`)
+						if (feature) {
+							const selectedTask = feature["tasks"].find((task: { id: string }) => task.id === `TASK${taskId}`)
+							selectedTask.status = status
+						}
+
+						await fs.writeFile(prdFeatureFilePath, JSON.stringify(prdFeatureJson, null, 2), "utf-8")
+						const message = `Successfully marked task as ${status.toLowerCase()}.`
+						vscode.window.showInformationMessage(message)
+						await this.postMessageToWebview({
+							type: "writeTaskStatus",
+							writeTaskStatusResult: {
+								success: true,
+								message,
+								status,
+							},
+						})
+					} catch (error) {
+						const message = `Failed to mark task as ${status.toLowerCase()}. Error: ${error.message}`
+						vscode.window.showErrorMessage(message)
+					}
+				}
+				break
 			default:
 				this.customWebViewMessageHandlers(message)
 				break
@@ -2460,7 +2498,13 @@ Here is the project's README to help you get started:\n\n${mcpDetails.readmeCont
 				.filter((file: string) => file.match(/\-feature.json$/))
 				.forEach((file: string) => {
 					const content = fs.readFileSync(path.join(`${url}/PRD`, file), "utf-8")
-					haiTaskList = [...haiTaskList, ...JSON.parse(content).features]
+					const prdId = file.split("-")[0].replace("PRD", "")
+					const parsedFeaturesList = JSON.parse(content).features
+					const featuresListWithPrdId = parsedFeaturesList.map((feature: any) => ({
+						...feature,
+						prdId: prdId,
+					}))
+					haiTaskList = [...haiTaskList, ...featuresListWithPrdId]
 				})
 			return haiTaskList
 		} catch (e) {

src/shared/ExtensionMessage.ts

@@ -53,6 +53,7 @@ export interface ExtensionMessage {
 		| "expertsUpdated"
 		| "defaultExpertsLoaded"
 		| "expertPrompt"
+		| "writeTaskStatus"
 	text?: string
 	bool?: boolean
 	action?:
@@ -108,6 +109,11 @@ export interface ExtensionMessage {
 		serverName: string
 		error?: string
 	}
+	writeTaskStatusResult?: {
+		success: boolean
+		message: string
+		status: string
+	}
 }
 
 export type Invoke = "sendMessage" | "primaryButtonClick" | "secondaryButtonClick"

src/shared/WebviewMessage.ts

@@ -92,6 +92,7 @@ export interface WebviewMessage {
 		| "optionsResponse"
 		| "requestTotalTasksSize"
 		| "taskFeedback"
+		| "writeTaskStatus"
 	// | "relaunchChromeDebugMode"
 	text?: string
 	expert?: string
@@ -110,6 +111,9 @@ export interface WebviewMessage {
 	isDefault?: boolean
 	prompt?: string
 	category?: string
+	folder?: string
+	taskId?: string
+	status?: string
 
 	buildContextOptions?: HaiBuildContextOptions
 	embeddingConfiguration?: EmbeddingConfiguration

webview-ui/src/App.tsx

@@ -241,6 +241,7 @@ const AppContent = () => {
 								hideAnnouncement={() => {
 									setShowAnnouncement(false)
 								}}
+								haiConfig={haiConfig}
 							/>
 						</>
 					)}

webview-ui/src/components/chat/ChatView.tsx

@@ -39,6 +39,9 @@ interface ChatViewProps {
 	showHistoryView: () => void
 	onTaskSelect: (task: IHaiClineTask) => void
 	selectedHaiTask: IHaiClineTask | null
+	haiConfig: {
+		[x: string]: any
+	}
 }
 
 export const MAX_IMAGES_PER_MESSAGE = 20 // Anthropic limits to 20 images
@@ -50,6 +53,7 @@ const ChatView = ({
 	showHistoryView,
 	onTaskSelect,
 	selectedHaiTask,
+	haiConfig,
 }: ChatViewProps) => {
 	const { version, clineMessages: messages, taskHistory, apiConfiguration, telemetrySetting } = useExtensionState()
 
@@ -90,14 +94,18 @@ const ChatView = ({
 	const disableAutoScrollRef = useRef(false)
 	const [showScrollToBottom, setShowScrollToBottom] = useState(false)
 	const [isAtBottom, setIsAtBottom] = useState(false)
+	const [lastSuccessfullyExecutedTaskId, setLastSuccessfullyExecutedTaskId] = useState<string | undefined>(undefined)
 
 	// UI layout depends on the last 2 messages
 	// (since it relies on the content of these messages, we are deep comparing. i.e. the button state after hitting button sets enableButtons to false, and this effect otherwise would have to true again even if messages didn't change
 	const lastMessage = useMemo(() => messages.at(-1), [messages])
 	const secondLastMessage = useMemo(() => messages.at(-2), [messages])
 
 	useEffect(() => {
-		selectedHaiTask && setInputValue(`Task: ${selectedHaiTask.list} ${selectedHaiTask.acceptance} ${selectedHaiTask.context}`)
+		// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+		selectedHaiTask &&
+			selectedHaiTask?.id &&
+			setInputValue(`Task: ${selectedHaiTask.list} ${selectedHaiTask.acceptance} ${selectedHaiTask.context}`)
 	}, [selectedHaiTask])
 
 	useDeepCompareEffect(() => {
@@ -200,6 +208,7 @@ const ChatView = ({
 							setEnableButtons(!isPartial)
 							setPrimaryButtonText("Start New Task")
 							setSecondaryButtonText(undefined)
+							setLastSuccessfullyExecutedTaskId(selectedHaiTask?.id)
 							break
 						case "resume_task":
 							setTextAreaDisabled(false)
@@ -378,6 +387,9 @@ const ChatView = ({
 					setSelectedImages([])
 					break
 				case "completion_result":
+					clearSelectedHaiTaskId()
+					startNewTask()
+					break
 				case "resume_completed_task":
 					// extension waiting for feedback. but we can just present a new task button
 					startNewTask()
@@ -467,6 +479,10 @@ const ChatView = ({
 								textAreaRef.current?.focus()
 							}
 							break
+						case "chatButtonClicked":
+							// Starting new chat so setting the current selected HaiTask Id to null
+							clearSelectedHaiTaskId()
+							break
 					}
 					break
 				case "selectedImages":
@@ -499,6 +515,10 @@ const ChatView = ({
 							handleSecondaryButtonClick(message.text ?? "", message.images ?? [])
 							break
 					}
+					break
+				case "writeTaskStatus":
+					if (message.writeTaskStatusResult?.success && message.writeTaskStatusResult?.status === "Completed")
+						setLastSuccessfullyExecutedTaskId(undefined)
 			}
 			// textAreaRef.current is not explicitly required here since react guarantees that ref will be stable across re-renders, and we're not using its value but its reference.
 		},
@@ -790,6 +810,16 @@ const ChatView = ({
 		[expandedRows, modifiedMessages, groupedMessages.length, toggleRowExpansion, handleRowHeightChange],
 	)
 
+	const clearSelectedHaiTaskId = () => {
+		onTaskSelect({
+			acceptance: selectedHaiTask?.acceptance ?? "",
+			context: selectedHaiTask?.context ?? "",
+			id: "",
+			list: selectedHaiTask?.list ?? "",
+			status: selectedHaiTask?.status ?? "",
+		})
+	}
+
 	return (
 		<div
 			style={{
@@ -910,6 +940,45 @@ const ChatView = ({
 						/>
 					</div>
 					<AutoApproveMenu />
+					{selectedHaiTask?.id &&
+						enableButtons &&
+						!isStreaming &&
+						lastSuccessfullyExecutedTaskId &&
+						selectedHaiTask?.id === lastSuccessfullyExecutedTaskId && (
+							<div style={{ padding: "12px 15px 0px" }}>
+								<p style={{ margin: "0px 0px 6px" }}>Do you want to mark this task as completed?</p>
+								<div
+									style={{
+										display: "flex",
+									}}>
+									<VSCodeButton
+										appearance="primary"
+										style={{
+											marginRight: "6px",
+											flexGrow: 1,
+										}}
+										onClick={async () => {
+											// write status to the file
+											vscode.postMessage({
+												type: "writeTaskStatus",
+												folder: haiConfig?.folder,
+												taskId: selectedHaiTask?.id,
+												status: "Completed",
+											})
+										}}>
+										Yes
+									</VSCodeButton>
+									<VSCodeButton
+										appearance="secondary"
+										style={{
+											flexGrow: 1,
+										}}
+										onClick={() => setLastSuccessfullyExecutedTaskId(undefined)}>
+										No
+									</VSCodeButton>
+								</div>
+							</div>
+						)}
 					{showScrollToBottom ? (
 						<div
 							style={{

webview-ui/src/components/hai/HaiStoryAccordion.tsx

@@ -11,6 +11,7 @@ interface HaiStoryAccordionProps {
 	tasks: IHaiTask[]
 	onTaskSelect: (task: IHaiClineTask) => void
 	id: string
+	prdId: string
 	storyTicketId?: string
 	isAllExpanded: boolean
 }
@@ -24,6 +25,7 @@ export const HaiStoryAccordion: React.FC<HaiStoryAccordionProps> = ({
 	description,
 	storyTicketId,
 	id,
+	prdId,
 	isAllExpanded,
 }) => {
 	const [isExpanded, setIsExpanded] = useState<boolean>(true)
@@ -136,7 +138,7 @@ export const HaiStoryAccordion: React.FC<HaiStoryAccordionProps> = ({
 					<VSCodeButton
 						appearance="icon"
 						title="View Story"
-						onClick={() => onStoryClick({ id, name, description, storyTicketId, tasks })}>
+						onClick={() => onStoryClick({ id, prdId, name, description, storyTicketId, tasks })}>
 						<span
 							className="codicon codicon-eye"
 							style={{
@@ -169,6 +171,7 @@ export const HaiStoryAccordion: React.FC<HaiStoryAccordionProps> = ({
 											name={name}
 											description={description}
 											task={task}
+											prdId={prdId}
 											onTaskSelect={onTaskSelect}
 											onTaskClick={onTaskClick}
 										/>

webview-ui/src/components/hai/HaiTaskComponent.tsx

@@ -5,14 +5,15 @@ import CopyClipboard from "../common/CopyClipboard"
 
 interface HaiTaskComponentProps {
 	id: string
+	prdId: string
 	name: string
 	description: string
 	task: IHaiTask
 	onTaskClick: (task: IHaiTask) => void
 	onTaskSelect: (task: IHaiClineTask) => void
 }
 
-const HaiTaskComponent: React.FC<HaiTaskComponentProps> = ({ id, name, description, task, onTaskSelect, onTaskClick }) => {
+const HaiTaskComponent: React.FC<HaiTaskComponentProps> = ({ id, prdId, name, description, task, onTaskSelect, onTaskClick }) => {
 	return (
 		<div
 			style={{
@@ -43,6 +44,7 @@ const HaiTaskComponent: React.FC<HaiTaskComponentProps> = ({ id, name, descripti
 						textOverflow: "ellipsis",
 						display: "flex",
 						flexDirection: "row",
+						alignItems: "center",
 					}}>
 					<span
 						style={{
@@ -65,6 +67,12 @@ const HaiTaskComponent: React.FC<HaiTaskComponentProps> = ({ id, name, descripti
 							/>
 						)}{" "}
 					</span>
+					{task.status === "Completed" && (
+						<span
+							className={`codicon codicon-pass-filled`}
+							style={{ marginLeft: "4px", color: "green", fontSize: "13px" }}
+						/>
+					)}
 				</div>
 				<span
 					style={{
@@ -92,7 +100,7 @@ const HaiTaskComponent: React.FC<HaiTaskComponentProps> = ({ id, name, descripti
 						onTaskSelect({
 							context: `${name}: ${description}`,
 							...task,
-							id: `${id}-${task.id}`,
+							id: `${prdId}-${id}-${task.id}`,
 						})
 					}}>
 					<span className="codicon codicon-play" style={{ fontSize: 14, cursor: "pointer" }} />

webview-ui/src/components/hai/hai-tasks-list.tsx

@@ -210,6 +210,7 @@ export function HaiTasksList({
 								name={story.name}
 								tasks={story.tasks}
 								id={story.id}
+								prdId={story.prdId}
 								onTaskSelect={selectedHaiTask}
 								onTaskClick={onTaskClick}
 								onStoryClick={onStoryClick}

webview-ui/src/components/welcome/QuickActions.tsx

@@ -13,6 +13,7 @@ const createHaiTask = (title: string, description: string, context: string): IHa
 	list: title,
 	acceptance: description,
 	id: "",
+	status: "",
 })
 
 const QuickActions = ({ onTaskSelect }: QuickActionProps) => {