Redesigned Task Header (#6561)

* Reorganizes the task header for cleanliness and in preparation for Cloud link

* More task ehader visual tweaks

* Translations for new task header

* Fixes TaskHeader color

* Removes stray string

* Fixes tests

* Iterates on visual details

* More visual tweaks

* Missing localization call

* Fixes tests

---------

Co-authored-by: Bruno Bergher <[email protected]>

Author: brunobergher

webview-ui/src/__tests__/ContextWindowProgress.spec.tsx

@@ -1,6 +1,6 @@
 // npm run test ContextWindowProgress.spec.tsx
 
-import { render, screen } from "@/utils/test-utils"
+import { render, screen, fireEvent } from "@/utils/test-utils"
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 
 import TaskHeader from "@src/components/chat/TaskHeader"
@@ -70,6 +70,10 @@ describe("ContextWindowProgress", () => {
 	it("renders correctly with valid inputs", () => {
 		renderComponent({ contextTokens: 1000, contextWindow: 4000 })
 
+		// First expand the TaskHeader to access ContextWindowProgress
+		const taskHeader = screen.getByText("Test task")
+		fireEvent.click(taskHeader)
+
 		// Check for basic elements
 		// The context-window-label is not part of the ContextWindowProgress component
 		// but rather part of the parent TaskHeader component in expanded state
@@ -83,6 +87,10 @@ describe("ContextWindowProgress", () => {
 	it("handles zero context window gracefully", () => {
 		renderComponent({ contextTokens: 0, contextWindow: 0 })
 
+		// First expand the TaskHeader to access ContextWindowProgress
+		const taskHeader = screen.getByText("Test task")
+		fireEvent.click(taskHeader)
+
 		// In the current implementation, the component is still displayed with zero values
 		// rather than being hidden completely
 		// The context-window-label is not part of the ContextWindowProgress component
@@ -93,6 +101,10 @@ describe("ContextWindowProgress", () => {
 	it("handles edge cases with negative values", () => {
 		renderComponent({ contextTokens: -100, contextWindow: 4000 })
 
+		// First expand the TaskHeader to access ContextWindowProgress
+		const taskHeader = screen.getByText("Test task")
+		fireEvent.click(taskHeader)
+
 		// Should show 0 instead of -100
 		expect(screen.getByTestId("context-tokens-count")).toHaveTextContent("0")
 		// The actual context window might be different than what we pass in
@@ -102,6 +114,10 @@ describe("ContextWindowProgress", () => {
 	it("calculates percentages correctly", () => {
 		renderComponent({ contextTokens: 1000, contextWindow: 4000 })
 
+		// First expand the TaskHeader to access ContextWindowProgress
+		const taskHeader = screen.getByText("Test task")
+		fireEvent.click(taskHeader)
+
 		// Verify that the token count and window size are displayed correctly
 		const tokenCount = screen.getByTestId("context-tokens-count")
 		const windowSize = screen.getByTestId("context-window-size")

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

@@ -805,8 +805,6 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 		[clineAsk, startNewTask, isStreaming],
 	)
 
-	const handleTaskCloseButtonClick = useCallback(() => startNewTask(), [startNewTask])
-
 	const { info: model } = useSelectedModel(apiConfiguration)
 
 	const selectImages = useCallback(() => vscode.postMessage({ type: "selectImages" }), [])
@@ -1765,7 +1763,6 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 						contextTokens={apiMetrics.contextTokens}
 						buttonsDisabled={sendingDisabled}
 						handleCondenseContext={handleCondenseContext}
-						onClose={handleTaskCloseButtonClick}
 						todos={latestTodos}
 					/>
 

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

@@ -55,7 +55,7 @@ export const ContextWindowProgress = ({ contextWindow, contextTokens, maxTokens
 
 	return (
 		<>
-			<div className="flex items-center gap-2 flex-1 whitespace-nowrap px-2">
+			<div className="flex items-center gap-2 flex-1 whitespace-nowrap">
 				<div data-testid="context-tokens-count">{formatLargeNumber(safeContextTokens)}</div>
 				<StandardTooltip content={tooltipContent} side="top" sideOffset={8}>
 					<div className="flex-1 relative">

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

@@ -1,5 +1,6 @@
 import { useState, useEffect, useRef } from "react"
 import { useTranslation } from "react-i18next"
+import { SquareArrowOutUpRightIcon } from "lucide-react"
 
 import type { HistoryItem, ShareVisibility } from "@roo-code/types"
 import { TelemetryEventName } from "@roo-code/types"
@@ -26,9 +27,10 @@ import {
 interface ShareButtonProps {
 	item?: HistoryItem
 	disabled?: boolean
+	showLabel?: boolean
 }
 
-export const ShareButton = ({ item, disabled = false }: ShareButtonProps) => {
+export const ShareButton = ({ item, disabled = false, showLabel = false }: ShareButtonProps) => {
 	const [shareDropdownOpen, setShareDropdownOpen] = useState(false)
 	const [connectModalOpen, setConnectModalOpen] = useState(false)
 	const [shareSuccess, setShareSuccess] = useState<{ visibility: ShareVisibility; url: string } | null>(null)
@@ -155,14 +157,21 @@ export const ShareButton = ({ item, disabled = false }: ShareButtonProps) => {
 						<PopoverTrigger asChild>
 							<Button
 								variant="ghost"
-								size="icon"
+								size={showLabel ? "sm" : "icon"}
 								disabled={disabled || shareButtonState.disabled}
-								className="h-7 w-7 p-1.5 hover:bg-vscode-toolbar-hoverBackground"
-								onClick={handleShareButtonClick}>
-								<span className="codicon codicon-link"></span>
+								className={
+									showLabel
+										? "h-7 px-2 hover:bg-vscode-toolbar-hoverBackground"
+										: "h-7 w-7 p-1.5 hover:bg-vscode-toolbar-hoverBackground"
+								}
+								onClick={handleShareButtonClick}
+								data-testid="share-button">
+								<SquareArrowOutUpRightIcon />
+								{showLabel && <span className="ml-0">{t("chat:task.share")}</span>}
 							</Button>
 						</PopoverTrigger>
 					</StandardTooltip>
+
 					<PopoverContent className="w-56 p-0" align="start">
 						{shareSuccess ? (
 							<div className="p-3">
@@ -217,11 +226,17 @@ export const ShareButton = ({ item, disabled = false }: ShareButtonProps) => {
 				<StandardTooltip content={shareButtonState.title}>
 					<Button
 						variant="ghost"
-						size="icon"
+						size={showLabel ? "sm" : "icon"}
 						disabled={disabled || shareButtonState.disabled}
-						className="h-7 w-7 p-1.5 hover:bg-vscode-toolbar-hoverBackground"
-						onClick={handleShareButtonClick}>
-						<span className="codicon codicon-link"></span>
+						className={
+							showLabel
+								? "h-7 px-2 hover:bg-vscode-toolbar-hoverBackground"
+								: "h-7 w-7 p-1.5 hover:bg-vscode-toolbar-hoverBackground"
+						}
+						onClick={handleShareButtonClick}
+						data-testid="share-button">
+						<SquareArrowOutUpRightIcon />
+						{showLabel && <span className="ml-1">{t("chat:task.share")}</span>}
 					</Button>
 				</StandardTooltip>
 			)}

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

@@ -1,5 +1,4 @@
 import { useState } from "react"
-import prettyBytes from "pretty-bytes"
 import { useTranslation } from "react-i18next"
 
 import type { HistoryItem } from "@roo-code/types"
@@ -22,8 +21,7 @@ export const TaskActions = ({ item, buttonsDisabled }: TaskActionsProps) => {
 	const { copyWithFeedback, showCopyFeedback } = useCopyToClipboard()
 
 	return (
-		<div className="flex flex-row gap-1">
-			<ShareButton item={item} disabled={false} />
+		<div className="flex flex-row items-center">
 			<IconButton
 				iconClass="codicon-desktop-download"
 				title={t("chat:task.export")}
@@ -53,7 +51,6 @@ export const TaskActions = ({ item, buttonsDisabled }: TaskActionsProps) => {
 								}
 							}}
 						/>
-						<span className="ml-1 text-xs text-vscode-foreground opacity-85">{prettyBytes(item.size)}</span>
 					</div>
 					{deleteTaskId && (
 						<DeleteTaskDialog
@@ -64,6 +61,7 @@ export const TaskActions = ({ item, buttonsDisabled }: TaskActionsProps) => {
 					)}
 				</>
 			)}
+			<ShareButton item={item} disabled={false} showLabel={false} />
 		</div>
 	)
 }