feat: add debug buttons to view API and UI history

- Add roo-cline.debug package.json setting (default: false)
- Add debug property to ExtensionState for webview
- Add Open API History and Open UI History buttons in TaskActions
- Buttons appear when debug=true and task has ID
- Opens prettified JSON in temporary file for debugging
- Add tests for new debug button functionality

Author: hannesrudolph

src/core/webview/ClineProvider.ts

@@ -2101,6 +2101,7 @@ export class ClineProvider
 			openRouterImageGenerationSelectedModel,
 			openRouterUseMiddleOutTransform,
 			featureRoomoteControlEnabled,
+			debug: vscode.workspace.getConfiguration(Package.name).get<boolean>("debug", false),
 		}
 	}
 

src/core/webview/webviewMessageHandler.ts

@@ -3043,6 +3043,63 @@ export const webviewMessageHandler = async (
 			})
 			break
 		}
+
+		case "openDebugApiHistory":
+		case "openDebugUiHistory": {
+			const currentTask = provider.getCurrentTask()
+			if (!currentTask) {
+				vscode.window.showErrorMessage("No active task to view history for")
+				break
+			}
+
+			try {
+				const { getTaskDirectoryPath } = await import("../../utils/storage")
+				const globalStoragePath = provider.contextProxy.globalStorageUri.fsPath
+				const taskDirPath = await getTaskDirectoryPath(globalStoragePath, currentTask.taskId)
+
+				const fileName =
+					message.type === "openDebugApiHistory" ? "api_conversation_history.json" : "ui_messages.json"
+				const sourceFilePath = path.join(taskDirPath, fileName)
+
+				// Check if file exists
+				if (!(await fileExistsAtPath(sourceFilePath))) {
+					vscode.window.showErrorMessage(`File not found: ${fileName}`)
+					break
+				}
+
+				// Read the source file
+				const content = await fs.readFile(sourceFilePath, "utf8")
+				let jsonContent: unknown
+
+				try {
+					jsonContent = JSON.parse(content)
+				} catch {
+					vscode.window.showErrorMessage(`Failed to parse ${fileName}`)
+					break
+				}
+
+				// Prettify the JSON
+				const prettifiedContent = JSON.stringify(jsonContent, null, 2)
+
+				// Create a temporary file
+				const tmpDir = os.tmpdir()
+				const timestamp = Date.now()
+				const tempFileName = `roo-debug-${message.type === "openDebugApiHistory" ? "api" : "ui"}-${currentTask.taskId.slice(0, 8)}-${timestamp}.json`
+				const tempFilePath = path.join(tmpDir, tempFileName)
+
+				await fs.writeFile(tempFilePath, prettifiedContent, "utf8")
+
+				// Open the temp file in VS Code
+				const doc = await vscode.workspace.openTextDocument(tempFilePath)
+				await vscode.window.showTextDocument(doc, { preview: true })
+			} catch (error) {
+				const errorMessage = error instanceof Error ? error.message : String(error)
+				provider.log(`Error opening debug history: ${errorMessage}`)
+				vscode.window.showErrorMessage(`Failed to open debug history: ${errorMessage}`)
+			}
+			break
+		}
+
 		default: {
 			// console.log(`Unhandled message type: ${message.type}`)
 			//

src/package.json

@@ -436,6 +436,11 @@
 					"minimum": 1,
 					"maximum": 200,
 					"description": "%settings.codeIndex.embeddingBatchSize.description%"
+				},
+				"roo-cline.debug": {
+					"type": "boolean",
+					"default": false,
+					"description": "%settings.debug.description%"
 				}
 			}
 		}

src/package.nls.json

@@ -43,5 +43,6 @@
 	"settings.useAgentRules.description": "Enable loading of AGENTS.md files for agent-specific rules (see https://agent-rules.org/)",
 	"settings.apiRequestTimeout.description": "Maximum time in seconds to wait for API responses (0 = no timeout, 1-3600s, default: 600s). Higher values are recommended for local providers like LM Studio and Ollama that may need more processing time.",
 	"settings.newTaskRequireTodos.description": "Require todos parameter when creating new tasks with the new_task tool",
-	"settings.codeIndex.embeddingBatchSize.description": "The batch size for embedding operations during code indexing. Adjust this based on your API provider's limits. Default is 60."
+	"settings.codeIndex.embeddingBatchSize.description": "The batch size for embedding operations during code indexing. Adjust this based on your API provider's limits. Default is 60.",
+	"settings.debug.description": "Enable debug mode to show additional buttons for viewing API conversation history and UI messages as prettified JSON in temporary files."
 }

src/shared/ExtensionMessage.ts

@@ -358,6 +358,7 @@ export type ExtensionState = Pick<
 	remoteControlEnabled: boolean
 	taskSyncEnabled: boolean
 	featureRoomoteControlEnabled: boolean
+	debug?: boolean
 }
 
 export interface ClineSayTool {

src/shared/WebviewMessage.ts

@@ -173,6 +173,8 @@ export interface WebviewMessage {
 		| "showBrowserSessionPanelAtStep"
 		| "refreshBrowserSessionPanel"
 		| "browserPanelDidLaunch"
+		| "openDebugApiHistory"
+		| "openDebugUiHistory"
 	text?: string
 	editedMessageContent?: string
 	tab?: "settings" | "history" | "mcp" | "modes" | "chat" | "marketplace" | "cloud"

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

@@ -5,11 +5,12 @@ import type { HistoryItem } from "@roo-code/types"
 
 import { vscode } from "@/utils/vscode"
 import { useCopyToClipboard } from "@/utils/clipboard"
+import { useExtensionState } from "@/context/ExtensionStateContext"
 
 import { DeleteTaskDialog } from "../history/DeleteTaskDialog"
 import { ShareButton } from "./ShareButton"
 import { CloudTaskButton } from "./CloudTaskButton"
-import { CopyIcon, DownloadIcon, Trash2Icon } from "lucide-react"
+import { CopyIcon, DownloadIcon, Trash2Icon, FileJsonIcon, MessageSquareCodeIcon } from "lucide-react"
 import { LucideIconButton } from "./LucideIconButton"
 
 interface TaskActionsProps {
@@ -21,6 +22,7 @@ export const TaskActions = ({ item, buttonsDisabled }: TaskActionsProps) => {
 	const [deleteTaskId, setDeleteTaskId] = useState<string | null>(null)
 	const { t } = useTranslation()
 	const { copyWithFeedback } = useCopyToClipboard()
+	const { debug } = useExtensionState()
 
 	return (
 		<div className="flex flex-row items-center -ml-0.5 mt-1 gap-1">
@@ -63,6 +65,20 @@ export const TaskActions = ({ item, buttonsDisabled }: TaskActionsProps) => {
 			)}
 			<ShareButton item={item} disabled={false} />
 			<CloudTaskButton item={item} disabled={buttonsDisabled} />
+			{debug && item?.id && (
+				<>
+					<LucideIconButton
+						icon={FileJsonIcon}
+						title="Open API History"
+						onClick={() => vscode.postMessage({ type: "openDebugApiHistory" })}
+					/>
+					<LucideIconButton
+						icon={MessageSquareCodeIcon}
+						title="Open UI History"
+						onClick={() => vscode.postMessage({ type: "openDebugUiHistory" })}
+					/>
+				</>
+			)}
 		</div>
 	)
 }

webview-ui/src/components/chat/__tests__/TaskActions.spec.tsx

@@ -380,4 +380,109 @@ describe("TaskActions", () => {
 			expect(deleteButton).toBeDisabled()
 		})
 	})
+
+	describe("Debug Buttons", () => {
+		it("does not render debug buttons when debug is false", () => {
+			mockUseExtensionState.mockReturnValue({
+				sharingEnabled: true,
+				cloudIsAuthenticated: true,
+				cloudUserInfo: { organizationName: "Test Organization" },
+				debug: false,
+			} as any)
+
+			render(<TaskActions item={mockItem} buttonsDisabled={false} />)
+
+			const apiHistoryButton = screen.queryByLabelText("Open API History")
+			const uiHistoryButton = screen.queryByLabelText("Open UI History")
+
+			expect(apiHistoryButton).not.toBeInTheDocument()
+			expect(uiHistoryButton).not.toBeInTheDocument()
+		})
+
+		it("does not render debug buttons when debug is undefined", () => {
+			mockUseExtensionState.mockReturnValue({
+				sharingEnabled: true,
+				cloudIsAuthenticated: true,
+				cloudUserInfo: { organizationName: "Test Organization" },
+			} as any)
+
+			render(<TaskActions item={mockItem} buttonsDisabled={false} />)
+
+			const apiHistoryButton = screen.queryByLabelText("Open API History")
+			const uiHistoryButton = screen.queryByLabelText("Open UI History")
+
+			expect(apiHistoryButton).not.toBeInTheDocument()
+			expect(uiHistoryButton).not.toBeInTheDocument()
+		})
+
+		it("renders debug buttons when debug is true and item has id", () => {
+			mockUseExtensionState.mockReturnValue({
+				sharingEnabled: true,
+				cloudIsAuthenticated: true,
+				cloudUserInfo: { organizationName: "Test Organization" },
+				debug: true,
+			} as any)
+
+			render(<TaskActions item={mockItem} buttonsDisabled={false} />)
+
+			const apiHistoryButton = screen.getByLabelText("Open API History")
+			const uiHistoryButton = screen.getByLabelText("Open UI History")
+
+			expect(apiHistoryButton).toBeInTheDocument()
+			expect(uiHistoryButton).toBeInTheDocument()
+		})
+
+		it("does not render debug buttons when debug is true but item has no id", () => {
+			mockUseExtensionState.mockReturnValue({
+				sharingEnabled: true,
+				cloudIsAuthenticated: true,
+				cloudUserInfo: { organizationName: "Test Organization" },
+				debug: true,
+			} as any)
+
+			render(<TaskActions item={undefined} buttonsDisabled={false} />)
+
+			const apiHistoryButton = screen.queryByLabelText("Open API History")
+			const uiHistoryButton = screen.queryByLabelText("Open UI History")
+
+			expect(apiHistoryButton).not.toBeInTheDocument()
+			expect(uiHistoryButton).not.toBeInTheDocument()
+		})
+
+		it("sends openDebugApiHistory message when Open API History button is clicked", () => {
+			mockUseExtensionState.mockReturnValue({
+				sharingEnabled: true,
+				cloudIsAuthenticated: true,
+				cloudUserInfo: { organizationName: "Test Organization" },
+				debug: true,
+			} as any)
+
+			render(<TaskActions item={mockItem} buttonsDisabled={false} />)
+
+			const apiHistoryButton = screen.getByLabelText("Open API History")
+			fireEvent.click(apiHistoryButton)
+
+			expect(mockPostMessage).toHaveBeenCalledWith({
+				type: "openDebugApiHistory",
+			})
+		})
+
+		it("sends openDebugUiHistory message when Open UI History button is clicked", () => {
+			mockUseExtensionState.mockReturnValue({
+				sharingEnabled: true,
+				cloudIsAuthenticated: true,
+				cloudUserInfo: { organizationName: "Test Organization" },
+				debug: true,
+			} as any)
+
+			render(<TaskActions item={mockItem} buttonsDisabled={false} />)
+
+			const uiHistoryButton = screen.getByLabelText("Open UI History")
+			fireEvent.click(uiHistoryButton)
+
+			expect(mockPostMessage).toHaveBeenCalledWith({
+				type: "openDebugUiHistory",
+			})
+		})
+	})
 })