diff --git a/package.json b/package.json index 7caf3cd..9a116b1 100644 --- a/package.json +++ b/package.json @@ -53,6 +53,11 @@ "title": "New Task", "icon": "$(add)" }, + { + "command": "claude-dev.historyButtonTapped", + "title": "History", + "icon": "$(history)" + }, { "command": "claude-dev.popoutButtonTapped", "title": "Open in Editor", @@ -73,17 +78,22 @@ "view/title": [ { "command": "claude-dev.plusButtonTapped", - "group": "navigation", + "group": "navigation@1", + "when": "view == claude-dev.SidebarProvider" + }, + { + "command": "claude-dev.historyButtonTapped", + "group": "navigation@2", "when": "view == claude-dev.SidebarProvider" }, { "command": "claude-dev.popoutButtonTapped", - "group": "navigation", + "group": "navigation@3", "when": "view == claude-dev.SidebarProvider" }, { "command": "claude-dev.settingsButtonTapped", - "group": "navigation", + "group": "navigation@4", "when": "view == claude-dev.SidebarProvider" } ] diff --git a/src/ClaudeDev.ts b/src/ClaudeDev.ts index db737ca..eaedb06 100644 --- a/src/ClaudeDev.ts +++ b/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 +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 { + 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 { + 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 { + 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: `\n${task}\n\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\n${modifiedOldUserContentText}\n\n` + : "") + + (newUserContentText + ? `\n\nNew instructions for task continuation:\n\n${newUserContentText}\n\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 { + 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 { 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 { 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 { 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 { 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 { 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 { 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 { 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 { // 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 { + async recursivelyMakeClaudeRequests(userContent: UserContent): Promise { 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: [ { diff --git a/src/extension.ts b/src/extension.ts index bb254b7..30d44d1 100644 --- a/src/extension.ts +++ b/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. diff --git a/src/providers/ClaudeDevProvider.ts b/src/providers/ClaudeDevProvider.ts index 884e690..0a314cb 100644 --- a/src/providers/ClaudeDevProvider.ts +++ b/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("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, this.getGlobalState("apiModelId") as Promise, @@ -446,6 +561,7 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider { this.getGlobalState("maxRequestsPerTask") as Promise, this.getGlobalState("lastShownAnnouncementId") as Promise, this.getGlobalState("customInstructions") as Promise, + this.getGlobalState("taskHistory") as Promise, ]) let apiProvider: ApiProvider @@ -475,9 +591,22 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider { maxRequestsPerTask, lastShownAnnouncementId, customInstructions, + taskHistory, } } + async updateTaskHistory(item: HistoryItem): Promise { + 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) { diff --git a/src/shared/ExtensionMessage.ts b/src/shared/ExtensionMessage.ts index 2527ff7..f99c1fe 100644 --- a/src/shared/ExtensionMessage.ts +++ b/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" diff --git a/src/shared/HistoryItem.ts b/src/shared/HistoryItem.ts new file mode 100644 index 0000000..d4539f6 --- /dev/null +++ b/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 +} diff --git a/src/shared/WebviewMessage.ts b/src/shared/WebviewMessage.ts index 86e0aca..d8815be 100644 --- a/src/shared/WebviewMessage.ts +++ b/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 diff --git a/webview-ui/src/utils/combineApiRequests.ts b/src/shared/combineApiRequests.ts similarity index 96% rename from webview-ui/src/utils/combineApiRequests.ts rename to src/shared/combineApiRequests.ts index b78c146..106423a 100644 --- a/webview-ui/src/utils/combineApiRequests.ts +++ b/src/shared/combineApiRequests.ts @@ -1,4 +1,4 @@ -import { ClaudeMessage } from "../../../src/shared/ExtensionMessage" +import { ClaudeMessage } from "./ExtensionMessage" /** * Combines API request start and finish messages in an array of ClaudeMessages. diff --git a/webview-ui/src/utils/combineCommandSequences.ts b/src/shared/combineCommandSequences.ts similarity index 97% rename from webview-ui/src/utils/combineCommandSequences.ts rename to src/shared/combineCommandSequences.ts index 2b2cf15..6ebe50f 100644 --- a/webview-ui/src/utils/combineCommandSequences.ts +++ b/src/shared/combineCommandSequences.ts @@ -1,4 +1,4 @@ -import { ClaudeMessage } from "../../../src/shared/ExtensionMessage" +import { ClaudeMessage } from "./ExtensionMessage" /** * Combines sequences of command and command_output messages in an array of ClaudeMessages. diff --git a/webview-ui/src/utils/getApiMetrics.ts b/src/shared/getApiMetrics.ts similarity index 96% rename from webview-ui/src/utils/getApiMetrics.ts rename to src/shared/getApiMetrics.ts index 736b214..fa42584 100644 --- a/webview-ui/src/utils/getApiMetrics.ts +++ b/src/shared/getApiMetrics.ts @@ -1,4 +1,4 @@ -import { ClaudeMessage } from "../../../src/shared/ExtensionMessage" +import { ClaudeMessage } from "./ExtensionMessage" interface ApiMetrics { totalTokensIn: number diff --git a/src/utils/export-markdown.ts b/src/utils/export-markdown.ts index cc1860c..7a33905 100644 --- a/src/utils/export-markdown.ts +++ b/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 diff --git a/webview-ui/src/App.tsx b/webview-ui/src/App.tsx index 63e863e..5d2dfe8 100644 --- a/webview-ui/src/App.tsx +++ b/webview-ui/src/App.tsx @@ -8,6 +8,8 @@ import ChatView from "./components/ChatView" import SettingsView from "./components/SettingsView" import WelcomeView from "./components/WelcomeView" import { vscode } from "./utils/vscode" +import HistoryView from "./components/HistoryView" +import { HistoryItem } from "../../src/shared/HistoryItem" /* The contents of webviews however are created when the webview becomes visible and destroyed when the webview is moved into the background. Any state inside the webview will be lost when the webview is moved to a background tab. @@ -18,6 +20,7 @@ The best way to solve this is to make your webview stateless. Use message passin const App: React.FC = () => { const [didHydrateState, setDidHydrateState] = useState(false) const [showSettings, setShowSettings] = useState(false) + const [showHistory, setShowHistory] = useState(false) const [showWelcome, setShowWelcome] = useState(false) const [version, setVersion] = useState("") const [apiConfiguration, setApiConfiguration] = useState(undefined) @@ -25,6 +28,7 @@ const App: React.FC = () => { const [customInstructions, setCustomInstructions] = useState("") const [vscodeThemeName, setVscodeThemeName] = useState(undefined) const [claudeMessages, setClaudeMessages] = useState([]) + const [taskHistory, setTaskHistory] = useState([]) const [showAnnouncement, setShowAnnouncement] = useState(false) useEffect(() => { @@ -48,6 +52,7 @@ const App: React.FC = () => { setCustomInstructions(message.state!.customInstructions || "") setVscodeThemeName(message.state!.themeName) setClaudeMessages(message.state!.claudeMessages) + setTaskHistory(message.state!.taskHistory) // don't update showAnnouncement to false if shouldShowAnnouncement is false if (message.state!.shouldShowAnnouncement) { setShowAnnouncement(true) @@ -59,9 +64,15 @@ const App: React.FC = () => { switch (message.action!) { case "settingsButtonTapped": setShowSettings(true) + setShowHistory(false) break - case "plusButtonTapped": + case "historyButtonTapped": setShowSettings(false) + setShowHistory(true) + break + case "chatButtonTapped": + setShowSettings(false) + setShowHistory(false) break } break @@ -97,11 +108,17 @@ const App: React.FC = () => { onDone={() => setShowSettings(false)} /> )} + {showHistory && setShowHistory(false)} />} {/* Do not conditionally load ChatView, it's expensive and there's state we don't want to lose (user input, disableInput, askResponse promise, etc.) */} { + setShowSettings(false) + setShowHistory(true) + }} + isHidden={showSettings || showHistory} vscodeThemeName={vscodeThemeName} showAnnouncement={showAnnouncement} selectedModelSupportsImages={selectedModelInfo.supportsImages} diff --git a/webview-ui/src/components/ChatRow.tsx b/webview-ui/src/components/ChatRow.tsx index e4b1cc7..b3ae2f2 100644 --- a/webview-ui/src/components/ChatRow.tsx +++ b/webview-ui/src/components/ChatRow.tsx @@ -3,7 +3,7 @@ import React from "react" import Markdown from "react-markdown" import { Prism as SyntaxHighlighter } from "react-syntax-highlighter" import { ClaudeAsk, ClaudeMessage, ClaudeSay, ClaudeSayTool } from "../../../src/shared/ExtensionMessage" -import { COMMAND_OUTPUT_STRING } from "../utils/combineCommandSequences" +import { COMMAND_OUTPUT_STRING } from "../../../src/shared/combineCommandSequences" import { SyntaxHighlighterStyle } from "../utils/getSyntaxHighlighterStyleFromTheme" import CodeBlock from "./CodeBlock/CodeBlock" import Thumbnails from "./Thumbnails" diff --git a/webview-ui/src/components/ChatView.tsx b/webview-ui/src/components/ChatView.tsx index 31a228f..228769e 100644 --- a/webview-ui/src/components/ChatView.tsx +++ b/webview-ui/src/components/ChatView.tsx @@ -5,25 +5,29 @@ import DynamicTextArea from "react-textarea-autosize" import { useEvent, useMount } from "react-use" import { Virtuoso, type VirtuosoHandle } from "react-virtuoso" import { ClaudeAsk, ClaudeMessage, ExtensionMessage } from "../../../src/shared/ExtensionMessage" -import { combineApiRequests } from "../utils/combineApiRequests" -import { combineCommandSequences } from "../utils/combineCommandSequences" -import { getApiMetrics } from "../utils/getApiMetrics" +import { getApiMetrics } from "../../../src/shared/getApiMetrics" +import { combineApiRequests } from "../../../src/shared/combineApiRequests" +import { combineCommandSequences } from "../../../src/shared/combineCommandSequences" import { getSyntaxHighlighterStyleFromTheme } from "../utils/getSyntaxHighlighterStyleFromTheme" import { vscode } from "../utils/vscode" import Announcement from "./Announcement" import ChatRow from "./ChatRow" +import HistoryPreview from "./HistoryPreview" import TaskHeader from "./TaskHeader" import Thumbnails from "./Thumbnails" +import { HistoryItem } from "../../../src/shared/HistoryItem" interface ChatViewProps { version: string messages: ClaudeMessage[] + taskHistory: HistoryItem[] isHidden: boolean vscodeThemeName?: string showAnnouncement: boolean selectedModelSupportsImages: boolean selectedModelSupportsPromptCache: boolean hideAnnouncement: () => void + showHistoryView: () => void } const MAX_IMAGES_PER_MESSAGE = 20 // Anthropic limits to 20 images @@ -31,14 +35,16 @@ const MAX_IMAGES_PER_MESSAGE = 20 // Anthropic limits to 20 images const ChatView = ({ version, messages, + taskHistory, isHidden, vscodeThemeName, showAnnouncement, selectedModelSupportsImages, selectedModelSupportsPromptCache, hideAnnouncement, + showHistoryView, }: ChatViewProps) => { - //const task = messages.length > 0 ? (messages[0].say === "task" ? messages[0] : undefined) : undefined + //const task = messages.length > 0 ? (messages[0].say === "task" ? messages[0] : undefined) : undefined) : undefined const task = messages.length > 0 ? messages[0] : undefined // leaving this less safe version here since if the first message is not a task, then the extension is in a bad state and needs to be debugged (see ClaudeDev.abort) const modifiedMessages = useMemo(() => combineApiRequests(combineCommandSequences(messages.slice(1))), [messages]) // has to be after api_req_finished are all reduced into api_req_started messages @@ -137,6 +143,13 @@ const ChatView = ({ setPrimaryButtonText("Start New Task") setSecondaryButtonText(undefined) break + case "resume_task": + setTextAreaDisabled(false) + setClaudeAsk("resume_task") + setEnableButtons(true) + setPrimaryButtonText("Resume Task") + setSecondaryButtonText(undefined) + break } break case "say": @@ -199,6 +212,7 @@ const ChatView = ({ case "command": // user can provide feedback to a tool or command use case "command_output": // user can send input to command stdin case "completion_result": // if this happens then the user has feedback for the completion result + case "resume_task": vscode.postMessage({ type: "askResponse", askResponse: "messageResponse", @@ -229,6 +243,7 @@ const ChatView = ({ case "command": case "command_output": case "tool": + case "resume_task": vscode.postMessage({ type: "askResponse", askResponse: "yesButtonTapped" }) break case "completion_result": @@ -392,6 +407,8 @@ const ChatView = ({ break case "api_req_failed": // this message is used to update the latest api_req_started that the request failed return false + case "resume_task": + return false } switch (message.say) { case "api_req_finished": // combineApiRequests removes this from modifiedMessages anyways @@ -460,7 +477,7 @@ const ChatView = ({ ) : ( <> {showAnnouncement && } -
+
0 ? undefined : 1 }}>

What can I do for you?

Thanks to{" "} @@ -474,64 +491,72 @@ const ChatView = ({ permission), I can assist you in ways that go beyond simple code completion or tech support.

+ {taskHistory.length > 0 && ( + + )} )} - { - // const lastMessage = modifiedMessages.at(-1) - // if (lastMessage && shouldShowChatRow(lastMessage)) { - // return "smooth" - // } - // return false - // }} - increaseViewportBy={{ top: 0, bottom: Number.MAX_SAFE_INTEGER }} // hack to make sure the last message is always rendered to get truly perfect scroll to bottom animation when new messages are added (Number.MAX_SAFE_INTEGER is safe for arithmetic operations, which is all virtuoso uses this value for in src/sizeRangeSystem.ts) - data={visibleMessages} // messages is the raw format returned by extension, modifiedMessages is the manipulated structure that combines certain messages of related type, and visibleMessages is the filtered structure that removes messages that should not be rendered - itemContent={(index, message) => ( - toggleRowExpansion(message.ts)} - lastModifiedMessage={modifiedMessages.at(-1)} - isLast={index === visibleMessages.length - 1} - /> - )} - /> -
- {primaryButtonText && ( - + - {primaryButtonText} - - )} - {secondaryButtonText && ( - - {secondaryButtonText} - - )} -
+ // followOutput={(isAtBottom) => { + // const lastMessage = modifiedMessages.at(-1) + // if (lastMessage && shouldShowChatRow(lastMessage)) { + // return "smooth" + // } + // return false + // }} + increaseViewportBy={{ top: 0, bottom: Number.MAX_SAFE_INTEGER }} // hack to make sure the last message is always rendered to get truly perfect scroll to bottom animation when new messages are added (Number.MAX_SAFE_INTEGER is safe for arithmetic operations, which is all virtuoso uses this value for in src/sizeRangeSystem.ts) + data={visibleMessages} // messages is the raw format returned by extension, modifiedMessages is the manipulated structure that combines certain messages of related type, and visibleMessages is the filtered structure that removes messages that should not be rendered + itemContent={(index, message) => ( + toggleRowExpansion(message.ts)} + lastModifiedMessage={modifiedMessages.at(-1)} + isLast={index === visibleMessages.length - 1} + /> + )} + /> +
+ {primaryButtonText && ( + + {primaryButtonText} + + )} + {secondaryButtonText && ( + + {secondaryButtonText} + + )} +
+ + )} +
void +} + +const HistoryPreview = ({ taskHistory, showHistoryView }: HistoryPreviewProps) => { + const handleHistorySelect = (id: string) => { + vscode.postMessage({ type: "showTaskWithId", text: id }) + } + + const formatDate = (timestamp: number) => { + const date = new Date(timestamp) + return date + .toLocaleString("en-US", { + month: "long", + day: "numeric", + hour: "numeric", + minute: "2-digit", + hour12: true, + }) + .replace(", ", " ") + .replace(" at", ",") + .toUpperCase() + } + + return ( +
+ + +
+ + + Recent Tasks + +
+ +
+ {taskHistory.slice(0, 3).map((item) => ( +
handleHistorySelect(item.id)}> +
+
+ + {formatDate(item.ts)} + +
+
+ {item.task} +
+
+ + Tokens: ↑{item.tokensIn.toLocaleString()} ↓{item.tokensOut.toLocaleString()} + + {" • "} + {item.cacheWrites && item.cacheReads && ( + <> + + Cache: +{item.cacheWrites.toLocaleString()} →{" "} + {item.cacheReads.toLocaleString()} + + {" • "} + + )} + API Cost: ${item.totalCost.toFixed(4)} +
+
+
+ ))} +
+ showHistoryView()} + style={{ + opacity: 0.9, + }}> +
+ View all history +
+ +
+
+
+ ) +} + +export default HistoryPreview diff --git a/webview-ui/src/components/HistoryView.tsx b/webview-ui/src/components/HistoryView.tsx new file mode 100644 index 0000000..11091ab --- /dev/null +++ b/webview-ui/src/components/HistoryView.tsx @@ -0,0 +1,295 @@ +import { VSCodeButton } from "@vscode/webview-ui-toolkit/react" +import { vscode } from "../utils/vscode" +import { HistoryItem } from "../../../src/shared/HistoryItem" + +type HistoryViewProps = { + taskHistory: HistoryItem[] + onDone: () => void +} + +const HistoryView = ({ taskHistory, onDone }: HistoryViewProps) => { + const handleHistorySelect = (id: string) => { + vscode.postMessage({ type: "showTaskWithId", text: id }) + } + + const handleDeleteHistoryItem = (id: string) => { + vscode.postMessage({ type: "deleteTaskWithId", text: id }) + } + + const handleExportMd = (id: string) => { + vscode.postMessage({ type: "exportTaskWithId", text: id }) + } + + const formatDate = (timestamp: number) => { + const date = new Date(timestamp) + return date + .toLocaleString("en-US", { + month: "long", + day: "numeric", + hour: "numeric", + minute: "2-digit", + hour12: true, + }) + .replace(", ", " ") + .replace(" at", ",") + .toUpperCase() + } + + return ( + <> + +
+
+

History

+ Done +
+
+ {taskHistory.length === 0 && ( +
+ +
+ No history found, +
+ start a new task to see it here... +
+
+ )} + + {taskHistory.map((item, index) => ( +
handleHistorySelect(item.id)}> +
+
+ + {formatDate(item.ts)} + + { + e.stopPropagation() + handleDeleteHistoryItem(item.id) + }} + className="delete-button"> + + +
+
+ {item.task} +
+
+
+ + Tokens: + + + + {item.tokensIn.toLocaleString()} + + + + {item.tokensOut.toLocaleString()} + +
+ {item.cacheWrites && item.cacheReads && ( +
+ + Cache: + + + + +{item.cacheWrites.toLocaleString()} + + + + {item.cacheReads.toLocaleString()} + +
+ )} +
+
+ + API Cost: + + + ${item.totalCost.toFixed(4)} + +
+ { + e.stopPropagation() + handleExportMd(item.id) + }}> +
+ EXPORT .MD +
+ +
+
+
+
+ ))} +
+
+ + ) +} + +export default HistoryView diff --git a/webview-ui/src/components/TabNavbar.tsx b/webview-ui/src/components/TabNavbar.tsx new file mode 100644 index 0000000..cdf40c6 --- /dev/null +++ b/webview-ui/src/components/TabNavbar.tsx @@ -0,0 +1,167 @@ +import { VSCodeButton } from "@vscode/webview-ui-toolkit/react" +import React, { useState } from "react" + +export const TAB_NAVBAR_HEIGHT = 24 +const BUTTON_MARGIN_RIGHT = "3px" +const LAST_BUTTON_MARGIN_RIGHT = "13px" + +type TabNavbarProps = { + onPlusClick: () => void + onHistoryClick: () => void + onSettingsClick: () => void +} + +type TooltipProps = { + text: string + isVisible: boolean + position: { x: number; y: number } + align?: "left" | "center" | "right" +} + +const Tooltip: React.FC = ({ text, isVisible, position, align = "center" }) => { + let leftPosition = position.x + let triangleStyle: React.CSSProperties = { + left: "50%", + marginLeft: "-5px", + } + + if (align === "right") { + leftPosition = position.x - 10 // Adjust this value as needed + triangleStyle = { + right: "10px", // Adjust this value to match the tooltip's right padding + marginLeft: "0", + } + } else if (align === "left") { + leftPosition = position.x + 10 // Adjust this value as needed + triangleStyle = { + left: "10px", // Adjust this value to match the tooltip's left padding + marginLeft: "0", + } + } + + return ( +
+
+
+ {text} +
+ ) +} + +const TabNavbar = ({ onPlusClick, onHistoryClick, onSettingsClick }: TabNavbarProps) => { + const [tooltip, setTooltip] = useState({ + text: "", + isVisible: false, + position: { x: 0, y: 0 }, + align: "center", + }) + + const showTooltip = (text: string, event: React.MouseEvent, align: "left" | "center" | "right" = "center") => { + const rect = event.currentTarget.getBoundingClientRect() + setTooltip({ + text, + isVisible: true, + position: { x: rect.left + rect.width / 2, y: rect.bottom + 7 }, + align, + }) + } + + const hideTooltip = () => { + setTooltip((prev) => ({ ...prev, isVisible: false })) + } + + const buttonStyle = { + marginRight: BUTTON_MARGIN_RIGHT, + } + + const lastButtonStyle = { + ...buttonStyle, + marginRight: LAST_BUTTON_MARGIN_RIGHT, + } + + return ( + <> +
+ showTooltip("New Chat", e, "center")} + onMouseLeave={hideTooltip} + onMouseMove={(e) => showTooltip("New Chat", e, "center")}> + + + showTooltip("History", e, "center")} + onMouseLeave={hideTooltip} + onMouseMove={(e) => showTooltip("History", e, "center")}> + + + showTooltip("Settings", e, "right")} + onMouseLeave={hideTooltip} + onMouseMove={(e) => showTooltip("Settings", e, "right")}> + + +
+ + + ) +} + +export default TabNavbar diff --git a/webview-ui/src/components/TaskHeader.tsx b/webview-ui/src/components/TaskHeader.tsx index bfb356a..5e8f6ec 100644 --- a/webview-ui/src/components/TaskHeader.tsx +++ b/webview-ui/src/components/TaskHeader.tsx @@ -92,11 +92,11 @@ const TaskHeader: React.FC = ({ const toggleExpand = () => setIsExpanded(!isExpanded) const handleDownload = () => { - vscode.postMessage({ type: "downloadTask" }) + vscode.postMessage({ type: "exportCurrentTask" }) } return ( -
+
= ({ + style={{ marginTop: "-6px", marginRight: "-4px" }}>