feat: add setting to toggle task titles

Author: jmalmo

packages/types/src/global-settings.ts

@@ -148,6 +148,7 @@ export const globalSettingsSchema = z.object({
 	includeTaskHistoryInEnhance: z.boolean().optional(),
 	historyPreviewCollapsed: z.boolean().optional(),
 	reasoningBlockCollapsed: z.boolean().optional(),
+	taskTitlesEnabled: z.boolean().optional(),
 	profileThresholds: z.record(z.string(), z.number()).optional(),
 	hasOpenedModeSelector: z.boolean().optional(),
 	lastModeExportPath: z.string().optional(),

src/core/webview/ClineProvider.ts

@@ -1793,6 +1793,7 @@ export class ClineProvider
 			terminalCompressProgressBar,
 			historyPreviewCollapsed,
 			reasoningBlockCollapsed,
+			taskTitlesEnabled,
 			cloudUserInfo,
 			cloudIsAuthenticated,
 			sharingEnabled,
@@ -1866,6 +1867,7 @@ export class ClineProvider
 			taskHistory: (taskHistory || [])
 				.filter((item: HistoryItem) => item.ts && item.task)
 				.sort((a: HistoryItem, b: HistoryItem) => b.ts - a.ts),
+			taskTitlesEnabled: taskTitlesEnabled ?? false,
 			soundEnabled: soundEnabled ?? false,
 			ttsEnabled: ttsEnabled ?? false,
 			ttsSpeed: ttsSpeed ?? 1.0,
@@ -2142,6 +2144,7 @@ export class ClineProvider
 			maxConcurrentFileReads: stateValues.maxConcurrentFileReads ?? 5,
 			historyPreviewCollapsed: stateValues.historyPreviewCollapsed ?? false,
 			reasoningBlockCollapsed: stateValues.reasoningBlockCollapsed ?? true,
+			taskTitlesEnabled: stateValues.taskTitlesEnabled ?? false,
 			cloudUserInfo,
 			cloudIsAuthenticated,
 			sharingEnabled,

src/core/webview/webviewMessageHandler.ts

@@ -1673,6 +1673,10 @@ export const webviewMessageHandler = async (
 			await updateGlobalState("reasoningBlockCollapsed", message.bool ?? true)
 			// No need to call postStateToWebview here as the UI already updated optimistically
 			break
+		case "setTaskTitlesEnabled":
+			await updateGlobalState("taskTitlesEnabled", message.bool ?? false)
+			await provider.postStateToWebview()
+			break
 		case "toggleApiConfigPin":
 			if (message.text) {
 				const currentPinned = getGlobalState("pinnedApiConfigs") ?? {}

src/shared/ExtensionMessage.ts

@@ -288,6 +288,7 @@ export type ExtensionState = Pick<
 	| "openRouterImageGenerationSelectedModel"
 	| "includeTaskHistoryInEnhance"
 	| "reasoningBlockCollapsed"
+	| "taskTitlesEnabled"
 > & {
 	version: string
 	clineMessages: ClineMessage[]
@@ -327,6 +328,7 @@ export type ExtensionState = Pick<
 	renderContext: "sidebar" | "editor"
 	settingsImportedAt?: number
 	historyPreviewCollapsed?: boolean
+	taskTitlesEnabled?: boolean
 
 	cloudUserInfo: CloudUserInfo | null
 	cloudIsAuthenticated: boolean

src/shared/WebviewMessage.ts

@@ -196,6 +196,7 @@ export interface WebviewMessage {
 		| "profileThresholds"
 		| "setHistoryPreviewCollapsed"
 		| "setReasoningBlockCollapsed"
+		| "setTaskTitlesEnabled"
 		| "openExternal"
 		| "filterMarketplaceItems"
 		| "marketplaceButtonClicked"

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

@@ -53,7 +53,7 @@ const TaskHeader = ({
 	todos,
 }: TaskHeaderProps) => {
 	const { t } = useTranslation()
-	const { apiConfiguration, currentTaskItem, clineMessages } = useExtensionState()
+	const { apiConfiguration, currentTaskItem, clineMessages, taskTitlesEnabled = false } = useExtensionState()
 	const { id: modelId, info: model } = useSelectedModel(apiConfiguration)
 	const [isTaskExpanded, setIsTaskExpanded] = useState(false)
 	const [showLongRunningTaskMessage, setShowLongRunningTaskMessage] = useState(false)
@@ -102,16 +102,25 @@ const TaskHeader = ({
 	}, [currentTaskItem?.id])
 
 	useEffect(() => {
+		if (!taskTitlesEnabled) {
+			setIsEditingTitle(false)
+			return
+		}
+
 		if (isEditingTitle) {
 			skipBlurSubmitRef.current = false
 			requestAnimationFrame(() => {
 				titleInputRef.current?.focus()
 				titleInputRef.current?.select()
 			})
 		}
-	}, [isEditingTitle])
+	}, [isEditingTitle, taskTitlesEnabled])
 
 	const submitTitle = useCallback(() => {
+		if (!taskTitlesEnabled) {
+			return
+		}
+
 		if (!currentTaskItem) {
 			setIsEditingTitle(false)
 			return
@@ -134,7 +143,7 @@ const TaskHeader = ({
 		})
 
 		setTitleInput(trimmed)
-	}, [currentTaskItem, titleInput])
+	}, [currentTaskItem, taskTitlesEnabled, titleInput])
 
 	useEffect(() => {
 		if (!isEditingTitle) {
@@ -143,15 +152,22 @@ const TaskHeader = ({
 	}, [isEditingTitle])
 
 	const handleTitleBlur = useCallback(() => {
+		if (!taskTitlesEnabled) {
+			return
+		}
 		if (skipBlurSubmitRef.current) {
 			skipBlurSubmitRef.current = false
 			return
 		}
 		submitTitle()
-	}, [submitTitle])
+	}, [submitTitle, taskTitlesEnabled])
 
 	const handleTitleKeyDown = useCallback(
 		(event: ReactKeyboardEvent<HTMLInputElement>) => {
+			if (!taskTitlesEnabled) {
+				return
+			}
+
 			if (event.key === "Enter") {
 				event.preventDefault()
 				skipBlurSubmitRef.current = true
@@ -163,7 +179,7 @@ const TaskHeader = ({
 				setTitleInput(currentTaskItem?.title ?? "")
 			}
 		},
-		[currentTaskItem?.title, submitTitle],
+		[currentTaskItem?.title, submitTitle, taskTitlesEnabled],
 	)
 
 	const textContainerRef = useRef<HTMLDivElement>(null)
@@ -181,9 +197,13 @@ const TaskHeader = ({
 		</StandardTooltip>
 	)
 
-	const renderTitleSection = () => {
-		if (!currentTaskItem) {
-			return null
+	const renderPrimaryValue = () => {
+		if (!taskTitlesEnabled || !currentTaskItem) {
+			return (
+				<div className="truncate min-w-0" data-testid="task-primary-text">
+					<Mention text={task.text} />
+				</div>
+			)
 		}
 
 		if (isEditingTitle) {
@@ -203,17 +223,20 @@ const TaskHeader = ({
 		}
 
 		const tooltipKey = currentTitle.length > 0 ? "chat:task.editTitle" : "chat:task.addTitle"
+		const showTitle = currentTitle.length > 0
+		const displayNode = showTitle ? (
+			<span className="truncate text-base font-semibold" data-testid="task-title-text">
+				{currentTitle}
+			</span>
+		) : (
+			<div className="truncate min-w-0" data-testid="task-title-text">
+				<Mention text={task.text} />
+			</div>
+		)
 
 		return (
-			<div className="flex items-center gap-1 text-vscode-foreground" data-testid="task-title-display">
-				<span
-					className={cn(
-						"text-base font-semibold truncate max-w-full",
-						currentTitle.length === 0 && "italic text-vscode-descriptionForeground font-normal",
-					)}
-					data-testid="task-title-text">
-					{currentTitle || t("chat:task.titlePlaceholder")}
-				</span>
+			<div className="flex items-center gap-1 min-w-0 text-vscode-foreground" data-testid="task-title-display">
+				<div className="min-w-0 flex-1">{displayNode}</div>
 				<StandardTooltip content={t(tooltipKey)}>
 					<button
 						type="button"
@@ -233,6 +256,13 @@ const TaskHeader = ({
 		)
 	}
 
+	const renderCollapsedSummary = () => (
+		<div className="flex items-baseline gap-1 min-w-0">
+			<span className="font-bold shrink-0">{t("chat:task.title")}</span>
+			<div className="min-w-0 flex-1">{renderPrimaryValue()}</div>
+		</div>
+	)
+
 	const hasTodos = todos && Array.isArray(todos) && todos.length > 0
 
 	return (
@@ -279,15 +309,14 @@ const TaskHeader = ({
 					}}>
 					<div className="flex justify-between items-start gap-0">
 						<div className="flex flex-col grow min-w-0 gap-1">
-							{renderTitleSection()}
 							<div className="whitespace-nowrap overflow-hidden text-ellipsis grow min-w-0 select-none">
 								{isTaskExpanded ? (
-									<span className="font-bold">{t("chat:task.title")}</span>
-								) : (
-									<div className="flex items-baseline gap-1">
+									<div className="flex flex-col gap-1 min-w-0">
 										<span className="font-bold">{t("chat:task.title")}</span>
-										<Mention text={task.text} />
+										<div className="min-w-0">{renderPrimaryValue()}</div>
 									</div>
+								) : (
+									renderCollapsedSummary()
 								)}
 							</div>
 						</div>

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

@@ -49,6 +49,7 @@ let mockExtensionState: {
 	apiConfiguration: ProviderSettings
 	currentTaskItem: { id: string } | null
 	clineMessages: any[]
+	taskTitlesEnabled: boolean
 } = {
 	apiConfiguration: {
 		apiProvider: "anthropic",
@@ -57,6 +58,7 @@ let mockExtensionState: {
 	} as ProviderSettings,
 	currentTaskItem: { id: "test-task-id" },
 	clineMessages: [],
+	taskTitlesEnabled: true,
 }
 
 // Mock the ExtensionStateContext
@@ -111,6 +113,7 @@ describe("TaskHeader", () => {
 			} as ProviderSettings,
 			currentTaskItem: { id: "test-task-id" },
 			clineMessages: [],
+			taskTitlesEnabled: true,
 		}
 	})
 	const defaultProps: TaskHeaderProps = {
@@ -221,6 +224,14 @@ describe("TaskHeader", () => {
 		})
 	})
 
+	it("hides title controls when task titles are disabled", () => {
+		mockExtensionState.taskTitlesEnabled = false
+		renderTaskHeader()
+
+		expect(screen.queryByTestId("task-title-edit-button")).not.toBeInTheDocument()
+		expect(screen.queryByTestId("task-title-display")).not.toBeInTheDocument()
+	})
+
 	describe("DismissibleUpsell behavior", () => {
 		beforeEach(() => {
 			vi.useFakeTimers()
@@ -233,6 +244,7 @@ describe("TaskHeader", () => {
 				} as ProviderSettings,
 				currentTaskItem: { id: "test-task-id" },
 				clineMessages: [],
+				taskTitlesEnabled: true,
 			}
 		})
 

webview-ui/src/components/history/TaskItem.tsx

@@ -4,6 +4,7 @@ import type { HistoryItem } from "@roo-code/types"
 import { vscode } from "@/utils/vscode"
 import { cn } from "@/lib/utils"
 import { Checkbox } from "@/components/ui/checkbox"
+import { useExtensionState } from "@/context/ExtensionStateContext"
 
 import TaskItemFooter from "./TaskItemFooter"
 
@@ -33,6 +34,7 @@ const TaskItem = ({
 	onDelete,
 	className,
 }: TaskItemProps) => {
+	const { taskTitlesEnabled = false } = useExtensionState()
 	const handleClick = () => {
 		if (isSelectionMode && onToggleSelection) {
 			onToggleSelection(item.id, !isSelected)
@@ -42,6 +44,9 @@ const TaskItem = ({
 	}
 
 	const isCompact = variant === "compact"
+	const showTitle = taskTitlesEnabled && Boolean(item.title?.trim())
+	const displayHighlight = showTitle && item.titleHighlight ? item.titleHighlight : item.highlight
+	const displayText = showTitle && item.title ? item.title : item.task
 
 	return (
 		<div
@@ -69,37 +74,24 @@ const TaskItem = ({
 				)}
 
 				<div className="flex-1 min-w-0">
-					{(item.title || item.titleHighlight) &&
-						(item.titleHighlight ? (
-							<div
-								className={cn("text-vscode-foreground font-semibold truncate mb-1", {
-									"text-base": !isCompact,
-									"text-sm": isCompact,
-								})}
-								data-testid="task-item-title"
-								dangerouslySetInnerHTML={{ __html: item.titleHighlight }}
-							/>
-						) : (
-							<div
-								className={cn("text-vscode-foreground font-semibold truncate mb-1", {
-									"text-base": !isCompact,
-									"text-sm": isCompact,
-								})}
-								data-testid="task-item-title">
-								{item.title}
-							</div>
-						))}
 					<div
 						className={cn(
 							"overflow-hidden whitespace-pre-wrap text-vscode-foreground text-ellipsis line-clamp-2",
 							{
 								"text-base": !isCompact,
+								"text-sm": isCompact,
 							},
 							!isCompact && isSelectionMode ? "mb-1" : "",
 						)}
-						data-testid="task-content"
-						{...(item.highlight ? { dangerouslySetInnerHTML: { __html: item.highlight } } : {})}>
-						{item.highlight ? undefined : item.task}
+						data-testid="task-content">
+						{displayHighlight ? (
+							<span
+								className={cn(showTitle && "font-semibold")}
+								dangerouslySetInnerHTML={{ __html: displayHighlight }}
+							/>
+						) : (
+							<span className={cn(showTitle && "font-semibold")}>{displayText}</span>
+						)}
 					</div>
 					<TaskItemFooter
 						item={item}