updated settings tab

Author: matannahmani

extension-state-summary.md

@@ -0,0 +1,50 @@
+# ExtensionStateContext State Management Summary
+
+The ExtensionStateContext manages the state for the extension using Jotai, a state management library for React. Here's an overview of how the state is structured and managed:
+
+## State Structure
+
+The main state is contained in the `extensionStateAtom`, which is a derived atom combining various individual state atoms. The state includes:
+
+1. version
+2. claudeMessages
+3. taskHistory
+4. useUdiff
+5. currentTask
+6. currentTaskId
+7. shouldShowAnnouncement
+8. shouldShowKoduPromo
+9. apiConfiguration
+10. uriScheme
+11. maxRequestsPerTask
+12. customInstructions
+13. fingerprint
+14. technicalBackground
+15. alwaysAllowReadOnly
+16. experimentalTerminal
+17. fpjsKey
+18. extensionName
+19. themeName
+20. user
+21. alwaysAllowWriteOnly
+22. creativeMode
+
+## State Management
+
+1. Individual atoms are created for each piece of state using `atom()` from Jotai.
+2. The `extensionStateAtom` combines all individual atoms into a single state object.
+3. The `ExtensionStateProvider` component manages the state updates:
+   - It sets up event listeners for messages from the extension.
+   - Updates the state based on received messages.
+   - Provides the state to child components.
+4. The `useExtensionState` hook allows components to access the state and update functions:
+   - It returns the current state and setter functions for various state properties.
+
+## State Updates
+
+State updates occur through:
+
+1. Message events from the extension (e.g., 'claudeMessages', 'state', 'action').
+2. Setter functions provided by the `useExtensionState` hook.
+
+This structure allows for centralized state management and easy access to state and update functions throughout the application.

extension/src/agent/v1/api-handler.ts

@@ -159,9 +159,9 @@ ${this.customInstructions.trim()}
 		} else {
 			// reverse claude messages to find the last message that is typeof v1 and has apiMetrics
 			const reversedClaudeMessages = claudeMessages?.slice().reverse()
-			const lastV1Message = reversedClaudeMessages?.find((m) => isV1ClaudeMessage(m) && m.apiMetrics)
+			const lastV1Message = reversedClaudeMessages?.find((m) => isV1ClaudeMessage(m) && m?.apiMetrics)
 			if (lastV1Message) {
-				apiMetrics = (lastV1Message as V1ClaudeMessage).apiMetrics!
+				apiMetrics = (lastV1Message as V1ClaudeMessage)?.apiMetrics!
 			}
 		}
 

extension/src/agent/v1/prompts/base-system.ts

@@ -24,6 +24,16 @@ export const BASE_SYSTEM_PROMPT = async (
 - in your thinking, always write current step and next step, think like engineer so explain your thoughts in a way that is clear and concise, from technical perspective (ex: "I will read the file to understand the current state of the project, then I will use the execute_command tool to run the project locally").
 - if it logically make sense to do multiple tool calls in one request do it, but if it doesn't make sense just do one tool call per request.
 
+====
+
+RESPONSE FORMAT
+
+You must always respond with the following format
+<format>
+... best instructions for Chain of Thought, with best practices and guidelines to prevent the ai
+</format>
+
+
 ====
 
 TOOL USE
@@ -263,7 +273,7 @@ RULES
 - You are STRICTLY FORBIDDEN from starting your messages with "Great", "Certainly", "Okay", "Sure". You should NOT be conversational in your responses, but rather direct and to the point. For example you should NOT say "Great, I've updated the CSS" but instead something like "I've updated the CSS". It is important you be clear and technical in your messages.
 - When presented with images, utilize your vision capabilities to thoroughly examine them and extract meaningful information. Incorporate these insights into your thought process as you accomplish the user's task.
 - At the end of each user message, you will automatically receive environment_details. This information is not written by the user themselves, but is auto-generated to provide potentially relevant context about the project structure and environment. While this information can be valuable for understanding the project context, do not treat it as a direct part of the user's request or response. Use it to inform your actions and decisions, but don't assume the user is explicitly asking about or referring to this information unless they clearly do so in their message. When using environment_details, explain your actions clearly to ensure the user understands, as they may not be aware of these details.
-- Before executing commands, check the "Actively Running Terminals" section in environment_details. If present, consider how these active processes might impact your task. For example, if a local development server is already running, you wouldn't need to start it again. If no active terminals are listed, proceed with command execution as normal.
+- Before executing commands, check the "Actively Running Terminals" section in <environment_details>. If present, consider how these active processes might impact your task. For example, if a local development server is already running, you wouldn't need to start it again. If no active terminals are listed, proceed with command execution as normal.
 
 ====
 
@@ -337,7 +347,6 @@ Key notes:
 - you should never apologize to the user more than twice in a row, if you find yourself apologizing to the user more than twice in a row, it's a red flag that you are stuck in a loop.
 - Linting errors might presist in the chat, they aren't refreshed automatically, the only way to get the linting errors is by writing back to the file, only do it if it's absolutely necessary. otherwise ignore the linting errors and go forward with the task.
 </error_handling>
-
 Critical instructions for using multiple tool calls in one request:
 <multiple_tool_calls>
 multiple tool calls in one request are allowed, but only if it logically makes sense to do so.

extension/src/agent/v1/tools/runners/execute-command.tool.ts

@@ -107,7 +107,7 @@ export class ExecuteCommandTool extends BaseAgentTool {
 			const terminalInfo = await terminalManager.getOrCreateTerminal(this.cwd)
 			console.log("Terminal created")
 			terminalInfo.terminal.show() // weird visual bug when creating new terminals (even manually) where there's an empty space at the top.
-			const process = terminalManager.runCommand(terminalInfo, command)
+			const process = terminalManager.runCommand(terminalInfo, command, { autoClose: false })
 			await delay(100)
 
 			let userFeedback: { text?: string; images?: string[] } | undefined

extension/src/api/index.ts

@@ -1,5 +1,5 @@
 import { Anthropic } from "@anthropic-ai/sdk"
-import { ApiModelId, ModelInfo } from "../shared/api"
+import { ApiModelId, KoduModelId, ModelInfo } from "../shared/api"
 import { KoduHandler } from "./kodu"
 import { AskConsultantResponseDto, SummaryResponseDto, WebSearchResponseDto } from "./interfaces"
 import { z } from "zod"
@@ -14,7 +14,7 @@ export interface ApiHandlerMessageResponse {
 
 export type ApiConfiguration = {
 	koduApiKey?: string
-	apiModelId?: ApiModelId
+	apiModelId?: KoduModelId
 }
 export const bugReportSchema = z.object({
 	description: z.string(),

extension/src/api/kodu.ts

@@ -97,6 +97,137 @@ export class KoduHandler implements ApiHandler {
 		}
 	}
 
+	async *createBaseMessageStream(
+		systemPrompt: string,
+		messages: Anthropic.Messages.MessageParam[],
+		abortSignal?: AbortSignal | null,
+		tempature?: number,
+		top_p?: number
+	): AsyncIterableIterator<koduSSEResponse> {
+		const modelId = this.getModel().id
+		let requestBody: Anthropic.Beta.PromptCaching.Messages.MessageCreateParamsNonStreaming
+
+		switch (modelId) {
+			case "claude-3-5-sonnet-20240620":
+			case "claude-3-opus-20240229":
+			case "claude-3-haiku-20240307":
+				console.log("Matched anthropic cache model")
+				const userMsgIndices = messages.reduce(
+					(acc, msg, index) => (msg.role === "user" ? [...acc, index] : acc),
+					[] as number[]
+				)
+				const lastUserMsgIndex = userMsgIndices[userMsgIndices.length - 1] ?? -1
+				const secondLastMsgUserIndex = userMsgIndices[userMsgIndices.length - 2] ?? -1
+				requestBody = {
+					model: modelId,
+					max_tokens: this.getModel().info.maxTokens,
+					system: systemPrompt,
+					messages: messages.map((message, index) => {
+						if (index === lastUserMsgIndex || index === secondLastMsgUserIndex) {
+							return {
+								...message,
+								content:
+									typeof message.content === "string"
+										? [
+												{
+													type: "text",
+													text: message.content,
+													cache_control: { type: "ephemeral" },
+												},
+										  ]
+										: message.content.map((content, contentIndex) =>
+												contentIndex === message.content.length - 1
+													? { ...content, cache_control: { type: "ephemeral" } }
+													: content
+										  ),
+							}
+						}
+						return message
+					}),
+				}
+				break
+			default:
+				console.log("Matched default model")
+				requestBody = {
+					model: modelId,
+					max_tokens: this.getModel().info.maxTokens,
+					system: [{ text: systemPrompt, type: "text" }],
+					messages,
+					temperature: tempature ?? 0.2,
+					top_p: top_p ?? 0.8,
+				}
+		}
+		this.cancelTokenSource = axios.CancelToken.source()
+
+		const response = await axios.post(
+			getKoduInferenceUrl(),
+			{
+				...requestBody,
+			},
+			{
+				headers: {
+					"Content-Type": "application/json",
+					"x-api-key": this.options.koduApiKey || "",
+				},
+				responseType: "stream",
+				signal: abortSignal ?? undefined,
+				timeout: 60_000,
+			}
+		)
+
+		if (response.status !== 200) {
+			if (response.status in koduErrorMessages) {
+				throw new KoduError({
+					code: response.status as keyof typeof koduErrorMessages,
+				})
+			}
+			throw new KoduError({
+				code: KODU_ERROR_CODES.NETWORK_REFUSED_TO_CONNECT,
+			})
+		}
+
+		if (response.data) {
+			const reader = response.data
+			const decoder = new TextDecoder("utf-8")
+			let finalResponse: Extract<koduSSEResponse, { code: 1 }> | null = null
+			let partialResponse: Extract<koduSSEResponse, { code: 2 }> | null = null
+			let buffer = ""
+
+			for await (const chunk of reader) {
+				buffer += decoder.decode(chunk, { stream: true })
+				const lines = buffer.split("\n\n")
+				buffer = lines.pop() || ""
+				for (const line of lines) {
+					if (line.startsWith("data: ")) {
+						const eventData = JSON.parse(line.slice(6)) as koduSSEResponse
+						if (eventData.code === 2) {
+							// -> Happens to the current message
+							// We have a partial response, so we need to add it to the message shown to the user and refresh the UI
+						}
+						if (eventData.code === 0) {
+						} else if (eventData.code === 1) {
+							finalResponse = eventData
+						} else if (eventData.code === -1) {
+							console.error("Network / API ERROR")
+							// we should yield the error and not throw it
+						}
+						yield eventData
+					}
+				}
+
+				if (finalResponse) {
+					break
+				}
+			}
+
+			if (!finalResponse) {
+				throw new KoduError({
+					code: KODU_ERROR_CODES.NETWORK_REFUSED_TO_CONNECT,
+				})
+			}
+		}
+	}
+
 	async *createMessageStream(
 		systemPrompt: string,
 		messages: Anthropic.Messages.MessageParam[],
@@ -136,13 +267,6 @@ export class KoduHandler implements ApiHandler {
 			console.error(`Length difference: ${previousSystemPrompt.length - systemPrompt.length}`)
 		}
 		previousSystemPrompt = systemPrompt
-		// if (dotKoduFileContent) {
-		// 	system.push({
-		// 		text: dotKoduFileContent,
-		// 		type: "text",
-		// 		// cache_control: { type: "ephemeral" },
-		// 	})
-		// }
 		if (customInstructions && customInstructions.trim()) {
 			system.push({
 				text: customInstructions,
@@ -152,20 +276,6 @@ export class KoduHandler implements ApiHandler {
 		} else {
 			system[0].cache_control = { type: "ephemeral" }
 		}
-		// if (environmentDetails) {
-		// 	system.push({
-		// 		text: environmentDetails,
-		// 		type: "text",
-		// 	})
-		// }
-		/**
-		 * push it last to not break the cache
-		 */
-		// system.push({
-		// 	text: USER_TASK_HISTORY_PROMPT(userMemory),
-		// 	type: "text",
-		// 	cache_control: { type: "ephemeral" },
-		// })
 
 		switch (modelId) {
 			case "claude-3-5-sonnet-20240620":

extension/src/extension.ts

@@ -7,6 +7,8 @@ import * as dotenv from "dotenv"
 import * as path from "path"
 import { extensionName } from "./shared/Constants"
 import "./utils/path-helpers"
+import { TerminalManager } from "./integrations/terminal/terminal-manager"
+import { getCwd } from "./agent/v1/utils"
 
 /*
 Built using https://github.com/microsoft/vscode-webview-ui-toolkit
@@ -234,6 +236,49 @@ export function activate(context: vscode.ExtensionContext) {
 			},
 		})
 	)
+
+	// Test the terminal manager
+	// testTerminalManager()
+}
+
+async function testTerminalManager() {
+	console.log(`Testing terminal manager`)
+	const terminalManager = new TerminalManager()
+
+	// Run a command
+	const terminalInfo = await terminalManager.getOrCreateTerminal(getCwd())
+	const process = terminalManager.runCommand(terminalInfo, "echo 25", { autoClose: false })
+
+	// Wait for the process to complete
+	await process
+	console.log(`CWD: ${terminalInfo.terminal.shellIntegration?.cwd}`)
+
+	// Retrieve all output
+	const fullOutput = terminalManager.getFullOutput(terminalInfo.id)
+
+	// Retrieve unretrieved output without updating the retrieved index
+	const unretrievedOutput = terminalManager.getUnretrievedOutput(terminalInfo.id, false)
+
+	// Retrieve partial output
+	const partialOutput = terminalManager.getPartialOutput(terminalInfo.id, 2, 5)
+
+	// is terminal hot?
+
+	// try sending another 50 + 50 echo to the terminal
+	const terminalInfo2 = await terminalManager.getOrCreateTerminal(getCwd())
+	const process2 = terminalManager.runCommand(terminalInfo2, "echo 50", { autoClose: false })
+	await process2
+	console.log(`CWD2: ${terminalInfo.terminal.shellIntegration?.cwd}`)
+	const fullOutput2 = terminalManager.getFullOutput(terminalInfo.id)
+
+	// Retrieve unretrieved output without updating the retrieved index
+	const unretrievedOutput2 = terminalManager.getUnretrievedOutput(terminalInfo.id, false)
+
+	// Retrieve partial output
+	const partialOutput2 = terminalManager.getPartialOutput(terminalInfo.id, 2, 5)
+
+	// is terminal hot?
+	console.log("Is terminal hot?", terminalInfo.busy)
 }
 
 // This method is called when your extension is deactivated