Save to markdown instead of json

Author: napter

src/core/Cline.ts

@@ -74,7 +74,24 @@ type UserContent = Array<
 
 export class Cline {
 	readonly taskId: string
-	api: ApiHandler
+	private _api: ApiHandler
+	private _apiProvider: string = "anthropic" // Default to anthropic as fallback
+
+	get api(): ApiHandler {
+		return this._api
+	}
+
+	set api(newApi: ApiHandler) {
+		this._api = newApi
+	}
+
+	get apiProvider(): string {
+		return this._apiProvider
+	}
+
+	set apiProvider(provider: string) {
+		this._apiProvider = provider
+	}
 	private terminalManager: TerminalManager
 	private urlContentFetcher: UrlContentFetcher
 	private browserSession: BrowserSession
@@ -121,12 +138,15 @@ export class Cline {
 		historyItem?: HistoryItem | undefined,
 		experiments?: Record<string, boolean>,
 	) {
+		this._api = buildApiHandler(apiConfiguration)
+		this._apiProvider = apiConfiguration.apiProvider ?? "anthropic"
 		if (!task && !images && !historyItem) {
 			throw new Error("Either historyItem or task/images must be provided")
 		}
 
 		this.taskId = crypto.randomUUID()
 		this.api = buildApiHandler(apiConfiguration)
+		this.apiProvider = apiConfiguration.apiProvider ?? "anthropic"
 		this.terminalManager = new TerminalManager()
 		this.urlContentFetcher = new UrlContentFetcher(provider.context)
 		this.browserSession = new BrowserSession(provider.context)
@@ -2726,11 +2746,18 @@ export class Cline {
 
 		// getting verbose details is an expensive operation, it uses globby to top-down build file structure of project which for large projects can take a few seconds
 		// for the best UX we show a placeholder api_req_started message with a loading spinner as this happens
+		const model = this.api.getModel()
+		const apiInfo = {
+			provider: this.apiProvider,
+			model: model.id,
+		}
+
 		await this.say(
 			"api_req_started",
 			JSON.stringify({
 				request:
 					userContent.map((block) => formatContentBlockToMarkdown(block)).join("\n\n") + "\n\nLoading...",
+				...apiInfo,
 			}),
 		)
 
@@ -2745,6 +2772,7 @@ export class Cline {
 		const lastApiReqIndex = findLastIndex(this.clineMessages, (m) => m.say === "api_req_started")
 		this.clineMessages[lastApiReqIndex].text = JSON.stringify({
 			request: userContent.map((block) => formatContentBlockToMarkdown(block)).join("\n\n"),
+			...apiInfo,
 		} satisfies ClineApiReqInfo)
 		await this.saveClineMessages()
 		await this.providerRef.deref()?.postStateToWebview()
@@ -2760,6 +2788,11 @@ export class Cline {
 			// fortunately api_req_finished was always parsed out for the gui anyways, so it remains solely for legacy purposes to keep track of prices in tasks from history
 			// (it's worth removing a few months from now)
 			const updateApiReqMsg = (cancelReason?: ClineApiReqCancelReason, streamingFailedMessage?: string) => {
+				const model = this.api.getModel()
+				const apiInfo = {
+					provider: this.apiProvider,
+					model: model.id,
+				}
 				this.clineMessages[lastApiReqIndex].text = JSON.stringify({
 					...JSON.parse(this.clineMessages[lastApiReqIndex].text || "{}"),
 					tokensIn: inputTokens,
@@ -2768,15 +2801,10 @@ export class Cline {
 					cacheReads: cacheReadTokens,
 					cost:
 						totalCost ??
-						calculateApiCost(
-							this.api.getModel().info,
-							inputTokens,
-							outputTokens,
-							cacheWriteTokens,
-							cacheReadTokens,
-						),
+						calculateApiCost(model.info, inputTokens, outputTokens, cacheWriteTokens, cacheReadTokens),
 					cancelReason,
 					streamingFailedMessage,
+					...apiInfo,
 				} satisfies ClineApiReqInfo)
 			}
 

src/core/conversation-saver/index.ts

@@ -10,6 +10,68 @@ export class ConversationSaver {
 		this.saveFolder = saveFolder
 	}
 
+	private formatMessagesAsMarkdown(messages: ClineMessage[]): string {
+		const lines: string[] = []
+		lines.push(`# Conversation saved at ${new Date().toISOString()}\n`)
+
+		for (const msg of messages) {
+			const timestamp = new Date(msg.ts).toLocaleTimeString()
+
+			if (msg.type === "say") {
+				if (msg.say === "task") {
+					lines.push(`## Task (${timestamp})`)
+					if (msg.text) lines.push(msg.text)
+				} else if (msg.say === "text") {
+					lines.push(`### Assistant (${timestamp})`)
+					if (msg.text) lines.push(msg.text)
+				} else if (msg.say === "user_feedback") {
+					lines.push(`### User Feedback (${timestamp})`)
+					if (msg.text) lines.push(msg.text)
+				} else if (msg.say === "error") {
+					lines.push(`### Error (${timestamp})`)
+					if (msg.text) lines.push(`\`\`\`\n${msg.text}\n\`\`\``)
+				} else if (msg.say === "api_req_started") {
+					try {
+						const apiInfo = JSON.parse(msg.text || "{}")
+						if (apiInfo.tokensIn || apiInfo.tokensOut || apiInfo.cost) {
+							lines.push(`### API Usage (${timestamp})`)
+							if (apiInfo.provider) lines.push(`- Provider: ${apiInfo.provider}`)
+							if (apiInfo.model) lines.push(`- Model: ${apiInfo.model}`)
+							if (apiInfo.tokensIn) lines.push(`- Input tokens: ${apiInfo.tokensIn}`)
+							if (apiInfo.tokensOut) lines.push(`- Output tokens: ${apiInfo.tokensOut}`)
+							if (apiInfo.cost) lines.push(`- Cost: $${apiInfo.cost.toFixed(6)}`)
+						}
+					} catch (e) {
+						// Skip malformed JSON
+					}
+				}
+			} else if (msg.type === "ask") {
+				if (msg.ask === "followup") {
+					lines.push(`### Question (${timestamp})`)
+					if (msg.text) lines.push(msg.text)
+				} else if (msg.ask === "command") {
+					lines.push(`### Command (${timestamp})`)
+					if (msg.text) lines.push(`\`\`\`bash\n${msg.text}\n\`\`\``)
+				} else if (msg.ask === "command_output") {
+					lines.push(`### Command Output (${timestamp})`)
+					if (msg.text) lines.push(`\`\`\`\n${msg.text}\n\`\`\``)
+				}
+			}
+
+			// Handle images if present
+			if (msg.images && msg.images.length > 0) {
+				lines.push("\n**Images:**")
+				msg.images.forEach((img, i) => {
+					lines.push(`![Image ${i + 1}](${img})`)
+				})
+			}
+
+			lines.push("") // Add blank line between messages
+		}
+
+		return lines.join("\n")
+	}
+
 	/**
 	 * Creates a new conversation file with the given messages
 	 * @param messages The messages to save
@@ -27,18 +89,15 @@ export class ConversationSaver {
 			const timestamp = new Date().toISOString().replace(/[:.]/g, "-")
 			const firstMessage = messages.find((m) => m.type === "say" && m.say === "task")
 			const taskText = firstMessage?.text?.slice(0, 50).replace(/[^a-zA-Z0-9]/g, "-") || "conversation"
-			const filename = `${timestamp}-${taskText}.json`
+			const filename = `${timestamp}-${taskText}.md`
 			console.log("Generated filename:", filename)
 
 			// Save to file
 			this.currentFilePath = path.join(this.saveFolder, filename)
 			console.log("Attempting to write to:", this.currentFilePath)
 
-			await fs.writeFile(
-				this.currentFilePath,
-				JSON.stringify({ messages, lastUpdated: new Date().toISOString() }, null, 2),
-				"utf-8",
-			)
+			const markdown = this.formatMessagesAsMarkdown(messages)
+			await fs.writeFile(this.currentFilePath, markdown, "utf-8")
 			console.log("Successfully wrote file")
 
 			return this.currentFilePath
@@ -66,11 +125,8 @@ export class ConversationSaver {
 
 		try {
 			console.log("Updating existing file at:", this.currentFilePath)
-			await fs.writeFile(
-				this.currentFilePath,
-				JSON.stringify({ messages, lastUpdated: new Date().toISOString() }, null, 2),
-				"utf-8",
-			)
+			const markdown = this.formatMessagesAsMarkdown(messages)
+			await fs.writeFile(this.currentFilePath, markdown, "utf-8")
 			console.log("Successfully updated conversation file")
 			return this.currentFilePath
 		} catch (error) {

src/core/webview/ClineProvider.ts

@@ -1463,7 +1463,9 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 		await this.storeSecret("unboundApiKey", unboundApiKey)
 		await this.updateGlobalState("unboundModelId", unboundModelId)
 		if (this.cline) {
-			this.cline.api = buildApiHandler(apiConfiguration)
+			const newApi = buildApiHandler(apiConfiguration)
+			this.cline.api = newApi
+			this.cline.apiProvider = apiConfiguration.apiProvider ?? "anthropic"
 		}
 	}
 
@@ -1594,7 +1596,9 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 		await this.storeSecret("openRouterApiKey", apiKey)
 		await this.postStateToWebview()
 		if (this.cline) {
-			this.cline.api = buildApiHandler({ apiProvider: openrouter, openRouterApiKey: apiKey })
+			const newApi = buildApiHandler({ apiProvider: openrouter, openRouterApiKey: apiKey })
+			this.cline.api = newApi
+			this.cline.apiProvider = openrouter
 		}
 		// await this.postMessageToWebview({ type: "action", action: "settingsButtonClicked" }) // bad ux if user is on welcome
 	}
@@ -1626,10 +1630,12 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 		await this.storeSecret("glamaApiKey", apiKey)
 		await this.postStateToWebview()
 		if (this.cline) {
-			this.cline.api = buildApiHandler({
+			const newApi = buildApiHandler({
 				apiProvider: glama,
 				glamaApiKey: apiKey,
 			})
+			this.cline.api = newApi
+			this.cline.apiProvider = glama
 		}
 		// await this.postMessageToWebview({ type: "action", action: "settingsButtonClicked" }) // bad ux if user is on welcome
 	}

src/shared/ExtensionMessage.ts

@@ -218,6 +218,8 @@ export interface ClineApiReqInfo {
 	cost?: number
 	cancelReason?: ClineApiReqCancelReason
 	streamingFailedMessage?: string
+	provider?: string
+	model?: string
 }
 
 export type ClineApiReqCancelReason = "streaming_failed" | "user_cancelled"