Add task history

src/ClaudeDev.ts

@@ -20,6 +20,10 @@ import { ClaudeAsk, ClaudeMessage, ClaudeSay, ClaudeSayTool } from "./shared/Ext
 import { Tool, ToolName } from "./shared/Tool"
 import { ClaudeAskResponse } from "./shared/WebviewMessage"
 import delay from "delay"
+import { getApiMetrics } from "./shared/getApiMetrics"
+import { HistoryItem } from "./shared/HistoryItem"
+import { combineApiRequests } from "./shared/combineApiRequests"
+import { combineCommandSequences } from "./shared/combineCommandSequences"
 
 const SYSTEM_PROMPT =
 	() => `You are Claude Dev, a highly skilled software developer with extensive knowledge in many programming languages, frameworks, design patterns, and best practices.
@@ -219,8 +223,12 @@ const tools: Tool[] = [
 ]
 
 type ToolResponse = string | Array<Anthropic.TextBlockParam | Anthropic.ImageBlockParam>
+type UserContent = Array<
+	Anthropic.TextBlockParam | Anthropic.ImageBlockParam | Anthropic.ToolUseBlockParam | Anthropic.ToolResultBlockParam
+>
 
 export class ClaudeDev {
+	readonly taskId: string
 	private api: ApiHandler
 	private maxRequestsPerTask: number
 	private customInstructions?: string
@@ -241,14 +249,23 @@ export class ClaudeDev {
 		maxRequestsPerTask?: number,
 		customInstructions?: string,
 		task?: string,
-		images?: string[]
+		images?: string[],
+		historyItem?: HistoryItem
 	) {
 		this.providerRef = new WeakRef(provider)
 		this.api = buildApiHandler(apiConfiguration)
 		this.maxRequestsPerTask = maxRequestsPerTask ?? DEFAULT_MAX_REQUESTS_PER_TASK
 		this.customInstructions = customInstructions
 
-		this.startTask(task, images)
+		if (historyItem) {
+			this.taskId = historyItem.id
+			this.resumeTaskFromHistory()
+		} else if (task || images) {
+			this.taskId = Date.now().toString()
+			this.startTask(task, images)
+		} else {
+			throw new Error("Either historyItem or task/images must be provided")
+		}
 	}
 
 	updateApi(apiConfiguration: ApiConfiguration) {
@@ -269,9 +286,97 @@ export class ClaudeDev {
 		this.askResponseImages = images
 	}
 
+	// storing task to disk for history
+
+	private async ensureTaskDirectoryExists(): Promise<string> {
+		const globalStoragePath = this.providerRef.deref()?.context.globalStorageUri.fsPath
+		if (!globalStoragePath) {
+			throw new Error("Global storage uri is invalid")
+		}
+		const taskDir = path.join(globalStoragePath, "tasks", this.taskId)
+		await fs.mkdir(taskDir, { recursive: true })
+		return taskDir
+	}
+
+	private async getSavedApiConversationHistory(): Promise<Anthropic.MessageParam[]> {
+		const filePath = path.join(await this.ensureTaskDirectoryExists(), "api_conversation_history.json")
+		const fileExists = await fs
+			.access(filePath)
+			.then(() => true)
+			.catch(() => false)
+		if (fileExists) {
+			return JSON.parse(await fs.readFile(filePath, "utf8"))
+		}
+		return []
+	}
+
+	private async addToApiConversationHistory(message: Anthropic.MessageParam) {
+		this.apiConversationHistory.push(message)
+		await this.saveApiConversationHistory()
+	}
+
+	private async overwriteApiConversationHistory(newHistory: Anthropic.MessageParam[]) {
+		this.apiConversationHistory = newHistory
+		await this.saveApiConversationHistory()
+	}
+
+	private async saveApiConversationHistory() {
+		try {
+			const filePath = path.join(await this.ensureTaskDirectoryExists(), "api_conversation_history.json")
+			await fs.writeFile(filePath, JSON.stringify(this.apiConversationHistory))
+		} catch (error) {
+			// in the off chance this fails, we don't want to stop the task
+			console.error("Failed to save API conversation history:", error)
+		}
+	}
+
+	private async getSavedClaudeMessages(): Promise<ClaudeMessage[]> {
+		const filePath = path.join(await this.ensureTaskDirectoryExists(), "claude_messages.json")
+		const fileExists = await fs
+			.access(filePath)
+			.then(() => true)
+			.catch(() => false)
+		if (fileExists) {
+			return JSON.parse(await fs.readFile(filePath, "utf8"))
+		}
+		return []
+	}
+
+	private async addToClaudeMessages(message: ClaudeMessage) {
+		this.claudeMessages.push(message)
+		await this.saveClaudeMessages()
+	}
+
+	private async overwriteClaudeMessages(newMessages: ClaudeMessage[]) {
+		this.claudeMessages = newMessages
+		await this.saveClaudeMessages()
+	}
+
+	private async saveClaudeMessages() {
+		try {
+			const filePath = path.join(await this.ensureTaskDirectoryExists(), "claude_messages.json")
+			await fs.writeFile(filePath, JSON.stringify(this.claudeMessages))
+			// combined as they are in ChatView
+			const apiMetrics = getApiMetrics(combineApiRequests(combineCommandSequences(this.claudeMessages.slice(1))))
+			const taskMessage = this.claudeMessages[0] // first message is always the task say
+			await this.providerRef.deref()?.updateTaskHistory({
+				id: this.taskId,
+				ts: taskMessage.ts,
+				task: taskMessage.text ?? "",
+				tokensIn: apiMetrics.totalTokensIn,
+				tokensOut: apiMetrics.totalTokensOut,
+				cacheWrites: apiMetrics.totalCacheWrites,
+				cacheReads: apiMetrics.totalCacheReads,
+				totalCost: apiMetrics.totalCost,
+			})
+		} catch (error) {
+			console.error("Failed to save claude messages:", error)
+		}
+	}
+
 	async ask(
 		type: ClaudeAsk,
-		question: string
+		question?: string
 	): Promise<{ response: ClaudeAskResponse; text?: string; images?: string[] }> {
 		// If this ClaudeDev instance was aborted by the provider, then the only thing keeping us alive is a promise still running in the background, in which case we don't want to send its result to the webview as it is attached to a new instance of ClaudeDev now. So we can safely ignore the result of any active promises, and this class will be deallocated. (Although we set claudeDev = undefined in provider, that simply removes the reference to this instance, but the instance is still alive until this promise resolves or rejects.)
 		if (this.abort) {
@@ -282,7 +387,7 @@ export class ClaudeDev {
 		this.askResponseImages = undefined
 		const askTs = Date.now()
 		this.lastMessageTs = askTs
-		this.claudeMessages.push({ ts: askTs, type: "ask", ask: type, text: question })
+		await this.addToClaudeMessages({ ts: askTs, type: "ask", ask: type, text: question })
 		await this.providerRef.deref()?.postStateToWebview()
 		await pWaitFor(() => this.askResponse !== undefined || this.lastMessageTs !== askTs, { interval: 100 })
 		if (this.lastMessageTs !== askTs) {
@@ -301,7 +406,7 @@ export class ClaudeDev {
 		}
 		const sayTs = Date.now()
 		this.lastMessageTs = sayTs
-		this.claudeMessages.push({ ts: sayTs, type: "say", say: type, text: text, images })
+		await this.addToClaudeMessages({ ts: sayTs, type: "say", say: type, text: text, images })
 		await this.providerRef.deref()?.postStateToWebview()
 	}
 
@@ -342,22 +447,177 @@ export class ClaudeDev {
 			text: `<task>\n${task}\n</task>\n\n${this.getPotentiallyRelevantDetails()}`, // cannot be sent with system prompt since it's cached and these details can change
 		}
 		let imageBlocks: Anthropic.ImageBlockParam[] = this.formatImagesIntoBlocks(images)
-
-		// TODO: create tools that let Claude interact with VSCode (e.g. open a file, list open files, etc.)
-		//const openFiles = vscode.window.visibleTextEditors?.map((editor) => editor.document.uri.fsPath).join("\n")
-
 		await this.say("text", task, images)
+		await this.initiateTaskLoop([textBlock, ...imageBlocks])
+	}
 
-		let totalInputTokens = 0
-		let totalOutputTokens = 0
+	private async resumeTaskFromHistory() {
+		const modifiedClaudeMessages = await this.getSavedClaudeMessages()
+		// need to modify claude messages for good ux, i.e. if the last message is an api_request_started, then remove it otherwise the user will think the request is still loading
+		const lastApiReqStartedIndex = modifiedClaudeMessages.reduce(
+			(lastIndex, m, index) => (m.type === "say" && m.say === "api_req_started" ? index : lastIndex),
+			-1
+		)
+		const lastApiReqFinishedIndex = modifiedClaudeMessages.reduce(
+			(lastIndex, m, index) => (m.type === "say" && m.say === "api_req_finished" ? index : lastIndex),
+			-1
+		)
+		if (lastApiReqStartedIndex > lastApiReqFinishedIndex && lastApiReqStartedIndex !== -1) {
+			modifiedClaudeMessages.splice(lastApiReqStartedIndex, 1)
+		}
+		await this.overwriteClaudeMessages(modifiedClaudeMessages)
+		this.claudeMessages = await this.getSavedClaudeMessages()
+
+		// Now present the claude messages to the user and ask if they want to resume
+
+		const lastClaudeMessage = this.claudeMessages
+			.slice()
+			.reverse()
+			.find((m) => m.ask !== "resume_task") // could be multiple resume tasks
+		const { response, text, images } = await this.ask("resume_task") // calls poststatetowebview
+
+		let newUserContent: UserContent = []
+		if (response === "messageResponse") {
+			await this.say("user_feedback", text, images)
+			if (images && images.length > 0) {
+				newUserContent.push(...this.formatImagesIntoBlocks(images))
+			}
+			if (text) {
+				newUserContent.push({ type: "text", text })
+			}
+		}
+
+		// need to make sure that the api conversation history can be resumed by the api, even if it goes out of sync with claude messages
+
+		// if the last message is an assistant message, we need to check if there's tool use since every tool use has to have a tool response
+		// if there's no tool use and only a text block, then we can just add a user message
+
+		// if the last message is a user message, we can need to get the assistant message before it to see if it made tool calls, and if so, fill in the remaining tool responses with 'interrupted'
+
+		const existingApiConversationHistory: Anthropic.Messages.MessageParam[] =
+			await this.getSavedApiConversationHistory()
+
+		let modifiedOldUserContent: UserContent
+		let modifiedApiConversationHistory: Anthropic.Messages.MessageParam[]
+		if (existingApiConversationHistory.length > 0) {
+			const lastMessage = existingApiConversationHistory[existingApiConversationHistory.length - 1]
+
+			if (lastMessage.role === "assistant") {
+				const content = Array.isArray(lastMessage.content)
+					? lastMessage.content
+					: [{ type: "text", text: lastMessage.content }]
+				const hasToolUse = content.some((block) => block.type === "tool_use")
+
+				if (hasToolUse) {
+					const toolUseBlocks = content.filter(
+						(block) => block.type === "tool_use"
+					) as Anthropic.Messages.ToolUseBlock[]
+					const toolResponses: Anthropic.ToolResultBlockParam[] = toolUseBlocks.map((block) => ({
+						type: "tool_result",
+						tool_use_id: block.id,
+						content: "Task was interrupted before this tool call could be completed.",
+					}))
+					modifiedApiConversationHistory = [...existingApiConversationHistory] // no changes
+					modifiedOldUserContent = [...toolResponses]
+				} else {
+					modifiedApiConversationHistory = [...existingApiConversationHistory]
+					modifiedOldUserContent = []
+				}
+			} else if (lastMessage.role === "user") {
+				const previousAssistantMessage =
+					existingApiConversationHistory[existingApiConversationHistory.length - 2]
+
+				const existingUserContent: UserContent = Array.isArray(lastMessage.content)
+					? lastMessage.content
+					: [{ type: "text", text: lastMessage.content }]
+				if (previousAssistantMessage && previousAssistantMessage.role === "assistant") {
+					const assistantContent = Array.isArray(previousAssistantMessage.content)
+						? previousAssistantMessage.content
+						: [{ type: "text", text: previousAssistantMessage.content }]
+
+					const toolUseBlocks = assistantContent.filter(
+						(block) => block.type === "tool_use"
+					) as Anthropic.Messages.ToolUseBlock[]
+
+					if (toolUseBlocks.length > 0) {
+						const existingToolResults = existingUserContent.filter(
+							(block) => block.type === "tool_result"
+						) as Anthropic.ToolResultBlockParam[]
+
+						const missingToolResponses: Anthropic.ToolResultBlockParam[] = toolUseBlocks
+							.filter(
+								(toolUse) => !existingToolResults.some((result) => result.tool_use_id === toolUse.id)
+							)
+							.map((toolUse) => ({
+								type: "tool_result",
+								tool_use_id: toolUse.id,
+								content: "Task was interrupted before this tool call could be completed.",
+							}))
+
+						modifiedApiConversationHistory = existingApiConversationHistory.slice(0, -1)
+						modifiedOldUserContent = [...existingUserContent, ...missingToolResponses]
+					} else {
+						modifiedApiConversationHistory = existingApiConversationHistory.slice(0, -1)
+						modifiedOldUserContent = [...existingUserContent]
+					}
+				} else {
+					modifiedApiConversationHistory = existingApiConversationHistory.slice(0, -1)
+					modifiedOldUserContent = [...existingUserContent]
+				}
+			} else {
+				throw new Error("Unexpected: Last message is not a user or assistant message")
+			}
+		} else {
+			throw new Error("Unexpected: No existing API conversation history")
+		}
+
+		// now we have newUserContent which is user's current message, and the modifiedOldUserContent which is the old message with tool responses filled in
+		// we need to combine them while ensuring there is only one text block
+		const modifiedOldUserContentText = modifiedOldUserContent.find((block) => block.type === "text")?.text
+		const newUserContentText = newUserContent.find((block) => block.type === "text")?.text
+		const agoText = (() => {
+			const timestamp = lastClaudeMessage?.ts ?? Date.now()
+			const now = Date.now()
+			const diff = now - timestamp
+			const minutes = Math.floor(diff / 60000)
+			const hours = Math.floor(minutes / 60)
+			const days = Math.floor(hours / 24)
+
+			if (days > 0) {
+				return `${days} day${days > 1 ? "s" : ""} ago`
+			}
+			if (hours > 0) {
+				return `${hours} hour${hours > 1 ? "s" : ""} ago`
+			}
+			if (minutes > 0) {
+				return `${minutes} minute${minutes > 1 ? "s" : ""} ago`
+			}
+			return "just now"
+		})()
+
+		const combinedText =
+			`Task resumption: This autonomous coding task was interrupted ${agoText}. It may or may not be complete. Be aware that the conversation history and project state may have changed since then. The current working directory is now ${cwd}. Please reassess the task context before proceeding.` +
+			(modifiedOldUserContentText
+				? `\n\nLast recorded user input before interruption:\n<previous_message>\n${modifiedOldUserContentText}\n</previous_message>\n`
+				: "") +
+			(newUserContentText
+				? `\n\nNew instructions for task continuation:\n<user_message>\n${newUserContentText}\n</user_message>\n`
+				: "") +
+			`\n\n${this.getPotentiallyRelevantDetails()}`
+
+		const combinedModifiedOldUserContentWithNewUserContent: UserContent = (
+			modifiedOldUserContent.filter((block) => block.type !== "text") as UserContent
+		).concat([{ type: "text", text: combinedText }])
+
+		await this.overwriteApiConversationHistory(modifiedApiConversationHistory)
+		await this.initiateTaskLoop(combinedModifiedOldUserContentWithNewUserContent)
+	}
+
+	private async initiateTaskLoop(userContent: UserContent): Promise<void> {
+		let nextUserContent = userContent
 
 		while (!this.abort) {
-			const { didEndLoop, inputTokens, outputTokens } = await this.recursivelyMakeClaudeRequests([
-				textBlock,
-				...imageBlocks,
-			])
-			totalInputTokens += inputTokens
-			totalOutputTokens += outputTokens
+			const { didEndLoop } = await this.recursivelyMakeClaudeRequests(nextUserContent)
 
 			//  The way this agentic loop works is that claude will be given a task that he then calls tools to complete. unless there's an attempt_completion call, we keep responding back to him with his tool's responses until he either attempt_completion or does not use anymore tools. If he does not use anymore tools, we ask him to consider if he's completed the task and then call attempt_completion, otherwise proceed with completing the task.
 			// There is a MAX_REQUESTS_PER_TASK limit to prevent infinite requests, but Claude is prompted to finish the task as efficiently as he can.
@@ -372,11 +632,12 @@ export class ClaudeDev {
 				// 	"tool",
 				// 	"Claude responded with only text blocks but has not called attempt_completion yet. Forcing him to continue with task..."
 				// )
-				textBlock = {
-					type: "text",
-					text: "If you have completed the user's task, use the attempt_completion tool. If you require additional information from the user, use the ask_followup_question tool. Otherwise, if you have not completed the task and do not need additional information, then proceed with the next step of the task. (This is an automated message, so do not respond to it conversationally.)",
-				}
-				imageBlocks = []
+				nextUserContent = [
+					{
+						type: "text",
+						text: "If you have completed the user's task, use the attempt_completion tool. If you require additional information from the user, use the ask_followup_question tool. Otherwise, if you have not completed the task and do not need additional information, then proceed with the next step of the task. (This is an automated message, so do not respond to it conversationally.)",
+					},
+				]
 			}
 		}
 	}
@@ -436,7 +697,7 @@ export class ClaudeDev {
 
 	async writeToFile(relPath?: string, newContent?: string, isLast: boolean = true): Promise<ToolResponse> {
 		if (relPath === undefined) {
-			this.say(
+			await this.say(
 				"error",
 				"Claude tried to use write_to_file without value for required parameter 'path'. Retrying..."
 			)
@@ -445,7 +706,7 @@ export class ClaudeDev {
 
 		if (newContent === undefined) {
 			// Special message for this case since this tends to happen the most
-			this.say(
+			await this.say(
 				"error",
 				`Claude tried to use write_to_file for '${relPath}' without value for required parameter 'content'. This is likely due to output token limits. Retrying...`
 			)
@@ -557,7 +818,10 @@ export class ClaudeDev {
 			}
 		} catch (error) {
 			const errorString = `Error writing file: ${JSON.stringify(serializeError(error))}`
-			this.say("error", `Error writing file:\n${error.message ?? JSON.stringify(serializeError(error), null, 2)}`)
+			await this.say(
+				"error",
+				`Error writing file:\n${error.message ?? JSON.stringify(serializeError(error), null, 2)}`
+			)
 			return errorString
 		}
 	}
@@ -577,7 +841,10 @@ export class ClaudeDev {
 
 	async readFile(relPath?: string): Promise<ToolResponse> {
 		if (relPath === undefined) {
-			this.say("error", "Claude tried to use read_file without value for required parameter 'path'. Retrying...")
+			await this.say(
+				"error",
+				"Claude tried to use read_file without value for required parameter 'path'. Retrying..."
+			)
 			return "Error: Missing value for required parameter 'path'. Please retry with complete response."
 		}
 		try {
@@ -597,14 +864,17 @@ export class ClaudeDev {
 			return content
 		} catch (error) {
 			const errorString = `Error reading file: ${JSON.stringify(serializeError(error))}`
-			this.say("error", `Error reading file:\n${error.message ?? JSON.stringify(serializeError(error), null, 2)}`)
+			await this.say(
+				"error",
+				`Error reading file:\n${error.message ?? JSON.stringify(serializeError(error), null, 2)}`
+			)
 			return errorString
 		}
 	}
 
 	async listFilesTopLevel(relDirPath?: string): Promise<ToolResponse> {
 		if (relDirPath === undefined) {
-			this.say(
+			await this.say(
 				"error",
 				"Claude tried to use list_files_top_level without value for required parameter 'path'. Retrying..."
 			)
@@ -632,7 +902,7 @@ export class ClaudeDev {
 			return result
 		} catch (error) {
 			const errorString = `Error listing files and directories: ${JSON.stringify(serializeError(error))}`
-			this.say(
+			await this.say(
 				"error",
 				`Error listing files and directories:\n${
 					error.message ?? JSON.stringify(serializeError(error), null, 2)
@@ -644,7 +914,7 @@ export class ClaudeDev {
 
 	async listFilesRecursive(relDirPath?: string): Promise<ToolResponse> {
 		if (relDirPath === undefined) {
-			this.say(
+			await this.say(
 				"error",
 				"Claude tried to use list_files_recursive without value for required parameter 'path'. Retrying..."
 			)
@@ -672,7 +942,7 @@ export class ClaudeDev {
 			return result
 		} catch (error) {
 			const errorString = `Error listing files recursively: ${JSON.stringify(serializeError(error))}`
-			this.say(
+			await this.say(
 				"error",
 				`Error listing files recursively:\n${error.message ?? JSON.stringify(serializeError(error), null, 2)}`
 			)
@@ -731,7 +1001,7 @@ export class ClaudeDev {
 
 	async viewSourceCodeDefinitionsTopLevel(relDirPath?: string): Promise<ToolResponse> {
 		if (relDirPath === undefined) {
-			this.say(
+			await this.say(
 				"error",
 				"Claude tried to use view_source_code_definitions_top_level without value for required parameter 'path'. Retrying..."
 			)
@@ -758,7 +1028,7 @@ export class ClaudeDev {
 			return result
 		} catch (error) {
 			const errorString = `Error parsing source code definitions: ${JSON.stringify(serializeError(error))}`
-			this.say(
+			await this.say(
 				"error",
 				`Error parsing source code definitions:\n${
 					error.message ?? JSON.stringify(serializeError(error), null, 2)
@@ -770,7 +1040,7 @@ export class ClaudeDev {
 
 	async executeCommand(command?: string, returnEmptyStringOnSuccess: boolean = false): Promise<ToolResponse> {
 		if (command === undefined) {
-			this.say(
+			await this.say(
 				"error",
 				"Claude tried to use execute_command without value for required parameter 'command'. Retrying..."
 			)
@@ -863,7 +1133,7 @@ export class ClaudeDev {
 			const error = e as any
 			let errorMessage = error.message || JSON.stringify(serializeError(error), null, 2)
 			const errorString = `Error executing command:\n${errorMessage}`
-			this.say("error", `Error executing command:\n${errorMessage}`) // TODO: in webview show code block for command errors
+			await this.say("error", `Error executing command:\n${errorMessage}`) // TODO: in webview show code block for command errors
 			this.executeCommandRunningProcess = undefined
 			return errorString
 		}
@@ -871,7 +1141,7 @@ export class ClaudeDev {
 
 	async askFollowupQuestion(question?: string): Promise<ToolResponse> {
 		if (question === undefined) {
-			this.say(
+			await this.say(
 				"error",
 				"Claude tried to use ask_followup_question without value for required parameter 'question'. Retrying..."
 			)
@@ -885,7 +1155,7 @@ export class ClaudeDev {
 	async attemptCompletion(result?: string, command?: string): Promise<ToolResponse> {
 		// result is required, command is optional
 		if (result === undefined) {
-			this.say(
+			await this.say(
 				"error",
 				"Claude tried to use attempt_completion without value for required parameter 'result'. Retrying..."
 			)
@@ -943,19 +1213,12 @@ ${this.customInstructions.trim()}
 		}
 	}
 
-	async recursivelyMakeClaudeRequests(
-		userContent: Array<
-			| Anthropic.TextBlockParam
-			| Anthropic.ImageBlockParam
-			| Anthropic.ToolUseBlockParam
-			| Anthropic.ToolResultBlockParam
-		>
-	): Promise<ClaudeRequestResult> {
+	async recursivelyMakeClaudeRequests(userContent: UserContent): Promise<ClaudeRequestResult> {
 		if (this.abort) {
 			throw new Error("ClaudeDev instance aborted")
 		}
 
-		this.apiConversationHistory.push({ role: "user", content: userContent })
+		await this.addToApiConversationHistory({ role: "user", content: userContent })
 		if (this.requestCount >= this.maxRequestsPerTask) {
 			const { response } = await this.ask(
 				"request_limit_reached",
@@ -965,7 +1228,7 @@ ${this.customInstructions.trim()}
 			if (response === "yesButtonTapped") {
 				this.requestCount = 0
 			} else {
-				this.apiConversationHistory.push({
+				await this.addToApiConversationHistory({
 					role: "assistant",
 					content: [
 						{
@@ -989,6 +1252,10 @@ ${this.customInstructions.trim()}
 			const response = await this.attemptApiRequest()
 			this.requestCount++
 
+			if (this.abort) {
+				throw new Error("ClaudeDev instance aborted")
+			}
+
 			let assistantResponses: Anthropic.Messages.ContentBlock[] = []
 			let inputTokens = response.usage.input_tokens
 			let outputTokens = response.usage.output_tokens
@@ -1056,11 +1323,11 @@ ${this.customInstructions.trim()}
 			}
 
 			if (assistantResponses.length > 0) {
-				this.apiConversationHistory.push({ role: "assistant", content: assistantResponses })
+				await this.addToApiConversationHistory({ role: "assistant", content: assistantResponses })
 			} else {
 				// this should never happen! it there's no assistant_responses, that means we got no text or tool_use content blocks from API which we should assume is an error
-				this.say("error", "Unexpected Error: No assistant messages were found in the API response")
-				this.apiConversationHistory.push({
+				await this.say("error", "Unexpected Error: No assistant messages were found in the API response")
+				await this.addToApiConversationHistory({
 					role: "assistant",
 					content: [{ type: "text", text: "Failure: I did not have a response to provide." }],
 				})
@@ -1090,8 +1357,8 @@ ${this.customInstructions.trim()}
 
 			if (toolResults.length > 0) {
 				if (didEndLoop) {
-					this.apiConversationHistory.push({ role: "user", content: toolResults })
-					this.apiConversationHistory.push({
+					await this.addToApiConversationHistory({ role: "user", content: toolResults })
+					await this.addToApiConversationHistory({
 						role: "assistant",
 						content: [
 							{

src/extension.ts

@@ -49,7 +49,7 @@ export function activate(context: vscode.ExtensionContext) {
 			outputChannel.appendLine("Plus button tapped")
 			await sidebarProvider.clearTask()
 			await sidebarProvider.postStateToWebview()
-			await sidebarProvider.postMessageToWebview({ type: "action", action: "plusButtonTapped" })
+			await sidebarProvider.postMessageToWebview({ type: "action", action: "chatButtonTapped" })
 		})
 	)
 
@@ -87,6 +87,12 @@ export function activate(context: vscode.ExtensionContext) {
 		})
 	)
 
+	context.subscriptions.push(
+		vscode.commands.registerCommand("claude-dev.historyButtonTapped", () => {
+			sidebarProvider.postMessageToWebview({ type: "action", action: "historyButtonTapped" })
+		})
+	)
+
 	/*
 	We use the text document content provider API to show a diff view for new files/edits by creating a virtual document for the new content.
 

src/providers/ClaudeDevProvider.ts

@@ -1,9 +1,14 @@
+import { Anthropic } from "@anthropic-ai/sdk"
 import * as vscode from "vscode"
 import { ClaudeDev } from "../ClaudeDev"
 import { ApiModelId, ApiProvider } from "../shared/api"
 import { ExtensionMessage } from "../shared/ExtensionMessage"
 import { WebviewMessage } from "../shared/WebviewMessage"
 import { downloadTask, getNonce, getUri, selectImages } from "../utils"
+import * as path from "path"
+import fs from "fs/promises"
+import { HistoryItem } from "../shared/HistoryItem"
+
 /*
 https://github.com/microsoft/vscode-webview-ui-toolkit-samples/blob/main/default/weather-webview/src/providers/WeatherViewProvider.ts
 
@@ -18,6 +23,7 @@ type GlobalStateKey =
 	| "maxRequestsPerTask"
 	| "lastShownAnnouncementId"
 	| "customInstructions"
+	| "taskHistory"
 
 export class ClaudeDevProvider implements vscode.WebviewViewProvider {
 	public static readonly sideBarId = "claude-dev.SidebarProvider" // used in package.json as the view's id. This value cannot be changed due to how vscode caches views based on their id, and updating the id would break existing instances of the extension.
@@ -27,10 +33,7 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider {
 	private claudeDev?: ClaudeDev
 	private latestAnnouncementId = "aug-15-2024" // update to some unique identifier when we add a new announcement
 
-	constructor(
-		private readonly context: vscode.ExtensionContext,
-		private readonly outputChannel: vscode.OutputChannel
-	) {
+	constructor(readonly context: vscode.ExtensionContext, private readonly outputChannel: vscode.OutputChannel) {
 		this.outputChannel.appendLine("ClaudeDevProvider instantiated")
 	}
 
@@ -142,6 +145,20 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider {
 		this.claudeDev = new ClaudeDev(this, apiConfiguration, maxRequestsPerTask, customInstructions, task, images)
 	}
 
+	async initClaudeDevWithHistoryItem(historyItem: HistoryItem) {
+		await this.clearTask()
+		const { maxRequestsPerTask, apiConfiguration, customInstructions } = await this.getState()
+		this.claudeDev = new ClaudeDev(
+			this,
+			apiConfiguration,
+			maxRequestsPerTask,
+			customInstructions,
+			undefined,
+			undefined,
+			historyItem
+		)
+	}
+
 	// Send any JSON serializable data to the react app
 	async postMessageToWebview(message: ExtensionMessage) {
 		await this.view?.webview.postMessage(message)
@@ -304,13 +321,23 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider {
 						await this.updateGlobalState("lastShownAnnouncementId", this.latestAnnouncementId)
 						await this.postStateToWebview()
 						break
-					case "downloadTask":
-						downloadTask(this.claudeDev?.apiConversationHistory ?? [])
-						break
 					case "selectImages":
 						const images = await selectImages()
 						await this.postMessageToWebview({ type: "selectedImages", images })
 						break
+					case "exportCurrentTask":
+						const firstMessageTs = this.claudeDev?.claudeMessages.at(0)?.ts ?? Date.now()
+						downloadTask(firstMessageTs, this.claudeDev?.apiConversationHistory ?? [])
+						break
+					case "showTaskWithId":
+						this.showTaskWithId(message.text!)
+						break
+					case "deleteTaskWithId":
+						this.deleteTaskWithId(message.text!)
+						break
+					case "exportTaskWithId":
+						this.exportTaskWithId(message.text!)
+						break
 					// Add more switch case statements here as more webview message commands
 					// are created within the webview context (i.e. inside media/main.js)
 				}
@@ -320,8 +347,94 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider {
 		)
 	}
 
+	// Task history
+
+	async getTaskWithId(id: string): Promise<{
+		historyItem: HistoryItem
+		taskDirPath: string
+		apiConversationHistoryFilePath: string
+		claudeMessagesFilePath: string
+		apiConversationHistory: Anthropic.MessageParam[]
+	}> {
+		const history = ((await this.getGlobalState("taskHistory")) as HistoryItem[] | undefined) || []
+		const historyItem = history.find((item) => item.id === id)
+		if (historyItem) {
+			const taskDirPath = path.join(this.context.globalStorageUri.fsPath, "tasks", id)
+			const apiConversationHistoryFilePath = path.join(taskDirPath, "api_conversation_history.json")
+			const claudeMessagesFilePath = path.join(taskDirPath, "claude_messages.json")
+			const fileExists = await fs
+				.access(apiConversationHistoryFilePath)
+				.then(() => true)
+				.catch(() => false)
+			if (fileExists) {
+				const apiConversationHistory = JSON.parse(await fs.readFile(apiConversationHistoryFilePath, "utf8"))
+				return {
+					historyItem,
+					taskDirPath,
+					apiConversationHistoryFilePath,
+					claudeMessagesFilePath,
+					apiConversationHistory,
+				}
+			}
+		}
+		// if we tried to get a task that doesn't exist, remove it from state
+		await this.deleteTaskFromState(id)
+		throw new Error("Task not found")
+	}
+
+	async showTaskWithId(id: string) {
+		if (id !== this.claudeDev?.taskId) {
+			// non-current task
+			const { historyItem } = await this.getTaskWithId(id)
+			await this.initClaudeDevWithHistoryItem(historyItem) // clears existing task
+		}
+		await this.postMessageToWebview({ type: "action", action: "chatButtonTapped" })
+	}
+
+	async exportTaskWithId(id: string) {
+		const { historyItem, apiConversationHistory } = await this.getTaskWithId(id)
+		await downloadTask(historyItem.ts, apiConversationHistory)
+	}
+
+	async deleteTaskWithId(id: string) {
+		if (id === this.claudeDev?.taskId) {
+			await this.clearTask()
+		}
+
+		const { taskDirPath, apiConversationHistoryFilePath, claudeMessagesFilePath } = await this.getTaskWithId(id)
+
+		// Delete the task files
+		const apiConversationHistoryFileExists = await fs
+			.access(apiConversationHistoryFilePath)
+			.then(() => true)
+			.catch(() => false)
+		if (apiConversationHistoryFileExists) {
+			await fs.unlink(apiConversationHistoryFilePath)
+		}
+		const claudeMessagesFileExists = await fs
+			.access(claudeMessagesFilePath)
+			.then(() => true)
+			.catch(() => false)
+		if (claudeMessagesFileExists) {
+			await fs.unlink(claudeMessagesFilePath)
+		}
+		await fs.rmdir(taskDirPath) // succeeds if the dir is empty
+
+		await this.deleteTaskFromState(id)
+	}
+
+	async deleteTaskFromState(id: string) {
+		// Remove the task from history
+		const taskHistory = ((await this.getGlobalState("taskHistory")) as HistoryItem[] | undefined) || []
+		const updatedTaskHistory = taskHistory.filter((task) => task.id !== id)
+		await this.updateGlobalState("taskHistory", updatedTaskHistory)
+
+		// Notify the webview that the task has been deleted
+		await this.postStateToWebview()
+	}
+
 	async postStateToWebview() {
-		const { apiConfiguration, maxRequestsPerTask, lastShownAnnouncementId, customInstructions } =
+		const { apiConfiguration, maxRequestsPerTask, lastShownAnnouncementId, customInstructions, taskHistory } =
 			await this.getState()
 		this.postMessageToWebview({
 			type: "state",
@@ -332,6 +445,7 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider {
 				customInstructions,
 				themeName: vscode.workspace.getConfiguration("workbench").get<string>("colorTheme"),
 				claudeMessages: this.claudeDev?.claudeMessages || [],
+				taskHistory: (taskHistory || []).sort((a, b) => b.ts - a.ts),
 				shouldShowAnnouncement: lastShownAnnouncementId !== this.latestAnnouncementId,
 			},
 		})
@@ -435,6 +549,7 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider {
 			maxRequestsPerTask,
 			lastShownAnnouncementId,
 			customInstructions,
+			taskHistory,
 		] = await Promise.all([
 			this.getGlobalState("apiProvider") as Promise<ApiProvider | undefined>,
 			this.getGlobalState("apiModelId") as Promise<ApiModelId | undefined>,
@@ -446,6 +561,7 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider {
 			this.getGlobalState("maxRequestsPerTask") as Promise<number | undefined>,
 			this.getGlobalState("lastShownAnnouncementId") as Promise<string | undefined>,
 			this.getGlobalState("customInstructions") as Promise<string | undefined>,
+			this.getGlobalState("taskHistory") as Promise<HistoryItem[] | undefined>,
 		])
 
 		let apiProvider: ApiProvider
@@ -475,9 +591,22 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider {
 			maxRequestsPerTask,
 			lastShownAnnouncementId,
 			customInstructions,
+			taskHistory,
 		}
 	}
 
+	async updateTaskHistory(item: HistoryItem): Promise<HistoryItem[]> {
+		const history = ((await this.getGlobalState("taskHistory")) as HistoryItem[]) || []
+		const existingItemIndex = history.findIndex((h) => h.id === item.id)
+		if (existingItemIndex !== -1) {
+			history[existingItemIndex] = item
+		} else {
+			history.push(item)
+		}
+		await this.updateGlobalState("taskHistory", history)
+		return history
+	}
+
 	// global
 
 	private async updateGlobalState(key: GlobalStateKey, value: any) {

src/shared/ExtensionMessage.ts

@@ -1,12 +1,13 @@
 // type that represents json data that is sent from extension to webview, called ExtensionMessage and has 'type' enum which can be 'plusButtonTapped' or 'settingsButtonTapped' or 'hello'
 
 import { ApiConfiguration } from "./api"
+import { HistoryItem } from "./HistoryItem"
 
 // webview will hold state
 export interface ExtensionMessage {
 	type: "action" | "state" | "selectedImages"
 	text?: string
-	action?: "plusButtonTapped" | "settingsButtonTapped" | "didBecomeVisible"
+	action?: "chatButtonTapped" | "settingsButtonTapped" | "historyButtonTapped" | "didBecomeVisible"
 	state?: ExtensionState
 	images?: string[]
 }
@@ -18,6 +19,7 @@ export interface ExtensionState {
 	customInstructions?: string
 	themeName?: string
 	claudeMessages: ClaudeMessage[]
+	taskHistory: HistoryItem[]
 	shouldShowAnnouncement: boolean
 }
 
@@ -38,6 +40,7 @@ export type ClaudeAsk =
 	| "completion_result"
 	| "tool"
 	| "api_req_failed"
+	| "resume_task"
 
 export type ClaudeSay =
 	| "task"

src/shared/HistoryItem.ts

@@ -0,0 +1,10 @@
+export type HistoryItem = {
+	id: string
+	ts: number
+	task: string
+	tokensIn: number
+	tokensOut: number
+	cacheWrites?: number
+	cacheReads?: number
+	totalCost: number
+}

src/shared/WebviewMessage.ts

@@ -10,8 +10,11 @@ export interface WebviewMessage {
 		| "askResponse"
 		| "clearTask"
 		| "didShowAnnouncement"
-		| "downloadTask"
 		| "selectImages"
+		| "exportCurrentTask"
+		| "showTaskWithId"
+		| "deleteTaskWithId"
+		| "exportTaskWithId"
 	text?: string
 	askResponse?: ClaudeAskResponse
 	apiConfiguration?: ApiConfiguration

src/shared/combineApiRequests.ts

@@ -0,0 +1,62 @@
+import { ClaudeMessage } from "./ExtensionMessage"
+
+/**
+ * Combines API request start and finish messages in an array of ClaudeMessages.
+ *
+ * This function looks for pairs of 'api_req_started' and 'api_req_finished' messages.
+ * When it finds a pair, it combines them into a single 'api_req_combined' message.
+ * The JSON data in the text fields of both messages are merged.
+ *
+ * @param messages - An array of ClaudeMessage objects to process.
+ * @returns A new array of ClaudeMessage objects with API requests combined.
+ *
+ * @example
+ * const messages = [
+ *   { type: "say", say: "api_req_started", text: '{"request":"GET /api/data"}', ts: 1000 },
+ *   { type: "say", say: "api_req_finished", text: '{"cost":0.005}', ts: 1001 }
+ * ];
+ * const result = combineApiRequests(messages);
+ * // Result: [{ type: "say", say: "api_req_started", text: '{"request":"GET /api/data","cost":0.005}', ts: 1000 }]
+ */
+export function combineApiRequests(messages: ClaudeMessage[]): ClaudeMessage[] {
+	const combinedApiRequests: ClaudeMessage[] = []
+
+	for (let i = 0; i < messages.length; i++) {
+		if (messages[i].type === "say" && messages[i].say === "api_req_started") {
+			let startedRequest = JSON.parse(messages[i].text || "{}")
+			let j = i + 1
+
+			while (j < messages.length) {
+				if (messages[j].type === "say" && messages[j].say === "api_req_finished") {
+					let finishedRequest = JSON.parse(messages[j].text || "{}")
+					let combinedRequest = { ...startedRequest, ...finishedRequest }
+
+					combinedApiRequests.push({
+						...messages[i],
+						text: JSON.stringify(combinedRequest),
+					})
+
+					i = j // Skip to the api_req_finished message
+					break
+				}
+				j++
+			}
+
+			if (j === messages.length) {
+				// If no matching api_req_finished found, keep the original api_req_started
+				combinedApiRequests.push(messages[i])
+			}
+		}
+	}
+
+	// Replace original api_req_started and remove api_req_finished
+	return messages
+		.filter((msg) => !(msg.type === "say" && msg.say === "api_req_finished"))
+		.map((msg) => {
+			if (msg.type === "say" && msg.say === "api_req_started") {
+				const combinedRequest = combinedApiRequests.find((req) => req.ts === msg.ts)
+				return combinedRequest || msg
+			}
+			return msg
+		})
+}

src/shared/combineCommandSequences.ts

@@ -0,0 +1,73 @@
+import { ClaudeMessage } from "./ExtensionMessage"
+
+/**
+ * Combines sequences of command and command_output messages in an array of ClaudeMessages.
+ *
+ * This function processes an array of ClaudeMessage objects, looking for sequences
+ * where a 'command' message is followed by one or more 'command_output' messages.
+ * When such a sequence is found, it combines them into a single message, merging
+ * their text contents.
+ *
+ * @param messages - An array of ClaudeMessage objects to process.
+ * @returns A new array of ClaudeMessage objects with command sequences combined.
+ *
+ * @example
+ * const messages: ClaudeMessage[] = [
+ *   { type: 'ask', ask: 'command', text: 'ls', ts: 1625097600000 },
+ *   { type: 'ask', ask: 'command_output', text: 'file1.txt', ts: 1625097601000 },
+ *   { type: 'ask', ask: 'command_output', text: 'file2.txt', ts: 1625097602000 }
+ * ];
+ * const result = simpleCombineCommandSequences(messages);
+ * // Result: [{ type: 'ask', ask: 'command', text: 'ls\nfile1.txt\nfile2.txt', ts: 1625097600000 }]
+ */
+export function combineCommandSequences(messages: ClaudeMessage[]): ClaudeMessage[] {
+	const combinedCommands: ClaudeMessage[] = []
+
+	// First pass: combine commands with their outputs
+	for (let i = 0; i < messages.length; i++) {
+		if (messages[i].type === "ask" && messages[i].ask === "command") {
+			let combinedText = messages[i].text || ""
+			let didAddOutput = false
+			let j = i + 1
+
+			while (j < messages.length) {
+				if (messages[j].type === "ask" && messages[j].ask === "command") {
+					// Stop if we encounter the next command
+					break
+				}
+				if (messages[j].ask === "command_output" || messages[j].say === "command_output") {
+					if (!didAddOutput) {
+						// Add a newline before the first output
+						combinedText += `\n${COMMAND_OUTPUT_STRING}`
+						didAddOutput = true
+					}
+					// handle cases where we receive empty command_output (ie when extension is relinquishing control over exit command button)
+					const output = messages[j].text || ""
+					if (output.length > 0) {
+						combinedText += "\n" + output
+					}
+				}
+				j++
+			}
+
+			combinedCommands.push({
+				...messages[i],
+				text: combinedText,
+			})
+
+			i = j - 1 // Move to the index just before the next command or end of array
+		}
+	}
+
+	// Second pass: remove command_outputs and replace original commands with combined ones
+	return messages
+		.filter((msg) => !(msg.ask === "command_output" || msg.say === "command_output"))
+		.map((msg) => {
+			if (msg.type === "ask" && msg.ask === "command") {
+				const combinedCommand = combinedCommands.find((cmd) => cmd.ts === msg.ts)
+				return combinedCommand || msg
+			}
+			return msg
+		})
+}
+export const COMMAND_OUTPUT_STRING = "Output:"

src/shared/getApiMetrics.ts

@@ -0,0 +1,65 @@
+import { ClaudeMessage } from "./ExtensionMessage"
+
+interface ApiMetrics {
+	totalTokensIn: number
+	totalTokensOut: number
+	totalCacheWrites?: number
+	totalCacheReads?: number
+	totalCost: number
+}
+
+/**
+ * Calculates API metrics from an array of ClaudeMessages.
+ *
+ * This function processes 'api_req_started' messages that have been combined with their
+ * corresponding 'api_req_finished' messages by the combineApiRequests function.
+ * It extracts and sums up the tokensIn, tokensOut, cacheWrites, cacheReads, and cost from these messages.
+ *
+ * @param messages - An array of ClaudeMessage objects to process.
+ * @returns An ApiMetrics object containing totalTokensIn, totalTokensOut, totalCacheWrites, totalCacheReads, and totalCost.
+ *
+ * @example
+ * const messages = [
+ *   { type: "say", say: "api_req_started", text: '{"request":"GET /api/data","tokensIn":10,"tokensOut":20,"cost":0.005}', ts: 1000 }
+ * ];
+ * const { totalTokensIn, totalTokensOut, totalCost } = getApiMetrics(messages);
+ * // Result: { totalTokensIn: 10, totalTokensOut: 20, totalCost: 0.005 }
+ */
+export function getApiMetrics(messages: ClaudeMessage[]): ApiMetrics {
+	const result: ApiMetrics = {
+		totalTokensIn: 0,
+		totalTokensOut: 0,
+		totalCacheWrites: undefined,
+		totalCacheReads: undefined,
+		totalCost: 0,
+	}
+
+	messages.forEach((message) => {
+		if (message.type === "say" && message.say === "api_req_started" && message.text) {
+			try {
+				const parsedData = JSON.parse(message.text)
+				const { tokensIn, tokensOut, cacheWrites, cacheReads, cost } = parsedData
+
+				if (typeof tokensIn === "number") {
+					result.totalTokensIn += tokensIn
+				}
+				if (typeof tokensOut === "number") {
+					result.totalTokensOut += tokensOut
+				}
+				if (typeof cacheWrites === "number") {
+					result.totalCacheWrites = (result.totalCacheWrites ?? 0) + cacheWrites
+				}
+				if (typeof cacheReads === "number") {
+					result.totalCacheReads = (result.totalCacheReads ?? 0) + cacheReads
+				}
+				if (typeof cost === "number") {
+					result.totalCost += cost
+				}
+			} catch (error) {
+				console.error("Error parsing JSON:", error)
+			}
+		}
+	})
+
+	return result
+}

src/utils/export-markdown.ts

@@ -3,18 +3,19 @@ import os from "os"
 import * as path from "path"
 import * as vscode from "vscode"
 
-export async function downloadTask(conversationHistory: Anthropic.MessageParam[]) {
+export async function downloadTask(dateTs: number, conversationHistory: Anthropic.MessageParam[]) {
 	// File name
-	const date = new Date()
+	const date = new Date(dateTs)
 	const month = date.toLocaleString("en-US", { month: "short" }).toLowerCase()
 	const day = date.getDate()
 	const year = date.getFullYear()
 	let hours = date.getHours()
 	const minutes = date.getMinutes().toString().padStart(2, "0")
+	const seconds = date.getSeconds().toString().padStart(2, "0")
 	const ampm = hours >= 12 ? "pm" : "am"
 	hours = hours % 12
 	hours = hours ? hours : 12 // the hour '0' should be '12'
-	const fileName = `claude_dev_task_${month}-${day}-${year}_${hours}-${minutes}-${ampm}.md`
+	const fileName = `claude_dev_task_${month}-${day}-${year}_${hours}-${minutes}-${seconds}-${ampm}.md`
 
 	// Generate markdown
 	const markdownContent = conversationHistory