feat(webview): surface condense button and context progress bar in collapsed task header

.changeset/add-condense-button-to-collapsed-task-header.md

@@ -0,0 +1,5 @@
+---
+"zoo-code": patch
+---
+
+Surface the manual context compaction button and linear context window progress bar on the right side of the collapsed task header.

webview-ui/package.json

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

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

@@ -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"
@@ -81,7 +81,7 @@ const TaskHeader = ({
 	const condenseButton = (
 		<LucideIconButton
 			title={t("chat:task.condenseContext")}
-			icon={FoldVertical}
+			icon={ListChevronsDownUp}
 			disabled={buttonsDisabled}
 			onClick={() => currentTaskItem && handleCondenseContext(currentTaskItem.id)}
 		/>
@@ -274,6 +274,14 @@ const TaskHeader = ({
 								</>
 							)}
 						</div>
+						<div className="flex items-center gap-1 ml-8 w-60 min-w-[120px] shrink">
+							<ContextWindowProgress
+								contextWindow={contextWindow}
+								contextTokens={contextTokens || 0}
+								maxTokens={maxTokens || undefined}
+							/>
+							{condenseButton}
+						</div>
 					</div>
 				)}
 				{/* Expanded state: Show task text and images */}

webview-ui/src/components/chat/__tests__/TaskHeader.spec.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,13 +157,9 @@ 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")
@@ -166,13 +169,9 @@ describe("TaskHeader", () => {
 		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/context-management/CondensationResultRow.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/TruncationResultRow.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>

webview-ui/src/components/settings/ContextManagementSettings.tsx

@@ -2,7 +2,7 @@ import { HTMLAttributes } from "react"
 import React from "react"
 import { useAppTranslation } from "@/i18n/TranslationContext"
 import { VSCodeCheckbox, VSCodeTextArea } from "@vscode/webview-ui-toolkit/react"
-import { FoldVertical } from "lucide-react"
+import { ListChevronsDownUp } from "lucide-react"
 
 import { supportPrompt } from "@roo/support-prompt"
 
@@ -487,7 +487,7 @@ export const ContextManagementSettings = ({
 				{autoCondenseContext && (
 					<div className="flex flex-col gap-3 pl-3 border-l-2 border-vscode-button-background">
 						<div className="flex items-center gap-4 font-bold">
-							<FoldVertical size={16} />
+							<ListChevronsDownUp size={16} />
 							<div>{t("settings:contextManagement.condensingThreshold.label")}</div>
 						</div>
 						<div>