Merge branch 'Zoo-Code-Org:main' into fix/tab-mode-model-isolation

Author: easonLiangWorldedtech

apps/vscode-e2e/src/suite/providers/xai.test.ts

@@ -12,7 +12,7 @@ const XAI_API_KEY = process.env.XAI_API_KEY
 const XAI_BASE_URL = "https://api.x.ai/v1"
 const XAI_RESPONSES_URL = `${XAI_BASE_URL}/responses`
 // Primary model for the full round-trip test (completion-text assertion included).
-const XAI_MODEL_ID = "grok-4.20"
+const XAI_MODEL_ID = "grok-4.5"
 // Fast variants: tested for API parameter contract only.  They consistently call
 // attempt_completion with an empty result field after a no-tool-error recovery
 // loop, so they cannot satisfy the completion-text assertion at this time.
@@ -492,7 +492,7 @@ suite("xAI provider", function () {
 				const readCallId = modelFixture?.readCallId ?? "call_xai_read_001"
 
 				if (request.functionCallOutputIds.some((id) => id === readCallId)) {
-					// Use recorded turn2 when it contains a function_call (grok-4.20).
+					// Use recorded turn2 when it contains a function_call (grok-4.5).
 					// Fast models return plain text in turn2 — hand-craft attempt_completion
 					// so the task can reach completion.
 					const turn2HasFunctionCall = (modelFixture?.turn2 as ResponsesStreamEvent[] | undefined)?.some(

packages/types/src/providers/xai.ts

@@ -3,9 +3,25 @@ import type { ModelInfo } from "../model.js"
 // https://docs.x.ai/docs/api-reference
 export type XAIModelId = keyof typeof xaiModels
 
-export const xaiDefaultModelId: XAIModelId = "grok-4.20"
+export const xaiDefaultModelId: XAIModelId = "grok-4.5"
 
 export const xaiModels = {
+	"grok-4.5": {
+		maxTokens: 65_536,
+		contextWindow: 500_000,
+		supportsImages: true,
+		supportsPromptCache: true,
+		inputPrice: 2.0,
+		outputPrice: 6.0,
+		cacheWritesPrice: 0.5,
+		cacheReadsPrice: 0.5,
+		description:
+			"xAI's flagship Grok 4.5 model with 500K context, configurable reasoning (low/medium/high), and agentic tool calling via Responses API.",
+		supportsReasoningEffort: ["low", "medium", "high"],
+		reasoningEffort: "high",
+		includedTools: ["search_replace"],
+		excludedTools: ["apply_diff"],
+	},
 	"grok-4.20": {
 		maxTokens: 65_536,
 		contextWindow: 2_000_000,

pnpm-lock.yaml

@@ -255,7 +255,7 @@ describe("XAIHandler", () => {
 		await expect(handler.completePrompt("test prompt")).rejects.toThrow(`xAI completion error: ${errorMessage}`)
 	})
 
-	it("should include reasoning_effort for mini models", async () => {
+	it("should include reasoning effort for mini models in Responses API format", async () => {
 		const miniModelHandler = new XAIHandler({
 			apiModelId: "grok-3-mini",
 			reasoningEffort: "high",
@@ -269,7 +269,48 @@ describe("XAIHandler", () => {
 		expect(mockResponsesCreate).toHaveBeenCalledWith(
 			expect.objectContaining({
 				reasoning: expect.objectContaining({
-					reasoning_effort: "high",
+					effort: "high",
+				}),
+			}),
+		)
+	})
+
+	it("should include reasoning effort for grok-4.5 with default high effort", async () => {
+		const grok45Handler = new XAIHandler({
+			apiModelId: "grok-4.5",
+		})
+
+		mockResponsesCreate.mockResolvedValueOnce(mockStream([]))
+
+		const stream = grok45Handler.createMessage("test prompt", [])
+		await stream.next()
+
+		expect(mockResponsesCreate).toHaveBeenCalledWith(
+			expect.objectContaining({
+				model: "grok-4.5",
+				reasoning: expect.objectContaining({
+					effort: "high",
+				}),
+			}),
+		)
+	})
+
+	it("should include reasoning effort for grok-4.5 with custom low effort", async () => {
+		const grok45Handler = new XAIHandler({
+			apiModelId: "grok-4.5",
+			reasoningEffort: "low",
+		})
+
+		mockResponsesCreate.mockResolvedValueOnce(mockStream([]))
+
+		const stream = grok45Handler.createMessage("test prompt", [])
+		await stream.next()
+
+		expect(mockResponsesCreate).toHaveBeenCalledWith(
+			expect.objectContaining({
+				model: "grok-4.5",
+				reasoning: expect.objectContaining({
+					effort: "low",
 				}),
 			}),
 		)

src/api/providers/__tests__/xai.spec.ts

@@ -120,9 +120,11 @@ export class XAIHandler extends BaseProvider implements SingleCompletionHandler
 			requestBody.parallel_tool_calls = metadata?.parallelToolCalls ?? true
 		}
 
-		// Pass reasoning effort for models that support it (e.g., mini models)
+		// Pass reasoning effort for models that support it (e.g., grok-4.5, grok-3-mini).
+		// The xAI Responses API uses `reasoning: { effort }` format (not `reasoning_effort`
+		// which is the Chat Completions format), so we convert from the OpenAI params shape.
 		if (model.reasoning) {
-			requestBody.reasoning = model.reasoning
+			requestBody.reasoning = { effort: model.reasoning.reasoning_effort }
 		}
 
 		let stream: AsyncIterable<any>

src/api/providers/xai.ts

@@ -50,7 +50,7 @@
 		"i18next": "^25.0.0",
 		"katex": "^0.16.11",
 		"lru-cache": "^11.1.0",
-		"lucide-react": "^0.577.0",
+		"lucide-react": "^1.18.0",
 		"mermaid": "^11.4.1",
 		"posthog-js": "^1.227.2",
 		"pretty-bytes": "^7.0.0",

webview-ui/package.json

@@ -1,6 +1,6 @@
 import { memo, useRef, useState, useMemo } from "react"
 import { useTranslation } from "react-i18next"
-import { ChevronUp, ChevronDown, HardDriveDownload, HardDriveUpload, FoldVertical, ArrowLeft } from "lucide-react"
+import { ChevronUp, ChevronDown, HardDriveDownload, HardDriveUpload, ListChevronsDownUp, ArrowLeft } from "lucide-react"
 import prettyBytes from "pretty-bytes"
 
 import type { ClineMessage } from "@roo-code/types"
@@ -82,7 +82,7 @@ const TaskHeader = ({
 	const condenseButton = (
 		<LucideIconButton
 			title={t("chat:task.condenseContext")}
-			icon={FoldVertical}
+			icon={ListChevronsDownUp}
 			disabled={buttonsDisabled}
 			onClick={() => currentTaskItem && handleCondenseContext(currentTaskItem.id)}
 		/>
@@ -275,6 +275,16 @@ const TaskHeader = ({
 								</>
 							)}
 						</div>
+						<div
+							className="flex items-center gap-1 ml-8 w-60 min-w-[120px] shrink"
+							onClick={(e) => e.stopPropagation()}>
+							<ContextWindowProgress
+								contextWindow={contextWindow}
+								contextTokens={contextTokens || 0}
+								maxTokens={maxTokens ?? undefined}
+							/>
+							{condenseButton}
+						</div>
 					</div>
 				)}
 				{/* Expanded state: Show task text and images */}
@@ -315,7 +325,7 @@ const TaskHeader = ({
 													<ContextWindowProgress
 														contextWindow={contextWindow}
 														contextTokens={contextTokens || 0}
-														maxTokens={maxTokens || undefined}
+														maxTokens={maxTokens ?? undefined}
 													/>
 													{condenseButton}
 												</div>

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

@@ -133,15 +133,22 @@ describe("TaskHeader", () => {
 		expect(screen.queryByText(/\$/)).not.toBeInTheDocument()
 	})
 
+	it("should render the condense context button in the collapsed state", () => {
+		renderTaskHeader()
+		// Button is visible without expanding the task header
+		const buttons = screen.getAllByRole("button")
+		const condenseButton = buttons.find((button) => button.querySelector("svg.lucide-list-chevrons-down-up"))
+		expect(condenseButton).toBeDefined()
+		expect(condenseButton?.querySelector("svg")).toBeInTheDocument()
+	})
+
 	it("should render the condense context button when expanded", () => {
 		renderTaskHeader()
-		// First click to expand the task header
 		const taskHeader = screen.getByText("Test task")
 		fireEvent.click(taskHeader)
 
-		// Now find the condense button in the expanded state
 		const buttons = screen.getAllByRole("button")
-		const condenseButton = buttons.find((button) => button.querySelector("svg.lucide-fold-vertical"))
+		const condenseButton = buttons.find((button) => button.querySelector("svg.lucide-list-chevrons-down-up"))
 		expect(condenseButton).toBeDefined()
 		expect(condenseButton?.querySelector("svg")).toBeInTheDocument()
 	})
@@ -150,29 +157,24 @@ describe("TaskHeader", () => {
 		const handleCondenseContext = vi.fn()
 		renderTaskHeader({ handleCondenseContext })
 
-		// First click to expand the task header
-		const taskHeader = screen.getByText("Test task")
-		fireEvent.click(taskHeader)
-
-		// Find the button that contains the FoldVertical icon
+		// Button is clickable in collapsed state without expanding first
 		const buttons = screen.getAllByRole("button")
-		const condenseButton = buttons.find((button) => button.querySelector("svg.lucide-fold-vertical"))
+		const condenseButton = buttons.find((button) => button.querySelector("svg.lucide-list-chevrons-down-up"))
 		expect(condenseButton).toBeDefined()
 		fireEvent.click(condenseButton!)
 		expect(handleCondenseContext).toHaveBeenCalledWith("test-task-id")
+		// Clicking the condense button must not expand the header (stopPropagation guard).
+		// The expanded state renders the "chat:task.title" label, which stays absent while collapsed.
+		expect(screen.queryByText("chat:task.title")).not.toBeInTheDocument()
 	})
 
 	it("should disable the condense context button when buttonsDisabled is true", () => {
 		const handleCondenseContext = vi.fn()
 		renderTaskHeader({ buttonsDisabled: true, handleCondenseContext })
 
-		// First click to expand the task header
-		const taskHeader = screen.getByText("Test task")
-		fireEvent.click(taskHeader)
-
-		// Find the button that contains the FoldVertical icon
+		// Button is disabled in collapsed state without expanding first
 		const buttons = screen.getAllByRole("button")
-		const condenseButton = buttons.find((button) => button.querySelector("svg.lucide-fold-vertical"))
+		const condenseButton = buttons.find((button) => button.querySelector("svg.lucide-list-chevrons-down-up"))
 		expect(condenseButton).toBeDefined()
 		expect(condenseButton).toBeDisabled()
 		fireEvent.click(condenseButton!)

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

@@ -1,7 +1,7 @@
 import { useState } from "react"
 import { useTranslation } from "react-i18next"
 import { VSCodeBadge } from "@vscode/webview-ui-toolkit/react"
-import { FoldVertical } from "lucide-react"
+import { ListChevronsDownUp } from "lucide-react"
 
 import type { ContextCondense } from "@roo-code/types"
 
@@ -32,7 +32,7 @@ export function CondensationResultRow({ data }: CondensationResultRowProps) {
 				className="flex items-center justify-between cursor-pointer select-none"
 				onClick={() => setIsExpanded(!isExpanded)}>
 				<div className="flex items-center gap-2 flex-grow">
-					<FoldVertical size={16} className="text-vscode-foreground" />
+					<ListChevronsDownUp size={16} className="text-vscode-foreground" />
 					<span className="font-bold text-vscode-foreground">
 						{t("chat:contextManagement.condensation.title")}
 					</span>

webview-ui/src/components/chat/context-management/CondensationResultRow.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react"
 import { useTranslation } from "react-i18next"
-import { FoldVertical } from "lucide-react"
+import { ScissorsLineDashed } from "lucide-react"
 
 import type { ContextTruncation } from "@roo-code/types"
 
@@ -33,7 +33,7 @@ export function TruncationResultRow({ data }: TruncationResultRowProps) {
 				className="flex items-center justify-between cursor-pointer select-none"
 				onClick={() => setIsExpanded(!isExpanded)}>
 				<div className="flex items-center gap-2 flex-grow">
-					<FoldVertical size={16} className="text-vscode-foreground" />
+					<ScissorsLineDashed size={16} className="text-vscode-foreground" />
 					<span className="font-bold text-vscode-foreground">
 						{t("chat:contextManagement.truncation.title")}
 					</span>