feat: add optional editable task titles #8689

jmalmo · 2025-10-16T18:49:33Z

Related GitHub Issue

Closes: #8366

Description

This feature introduces editable titles for tasks, allowing users to label active work, persist those titles into task history, and search them—while providing a settings toggle and aligning the visual treatment across the UI.

Server ↔️ Webview plumbing

Expand HistoryItem with title and update ClineProvider.updateTaskHistory to merge partial updates so existing titles survive incremental syncs; explicitly allow undefined to clear a title.
Add a setTaskTitle branch in webviewMessageHandler that normalizes/dedupes task IDs, trims/sanitizes the incoming title, skips no-op updates, persists via updateTaskHistory, and re-syncs the webview state.
Thread a persisted taskTitlesEnabled flag through extension messages/state and surface it to the webview context so both chat and history components react to the toggle.

Webview UI

Chat header (TaskHeader.tsx): introduce an inline editing experience (VS Code styled input, focus/keyboard handling, hover pencil) gated by the feature flag; when a title exists, display the text with standard weight instead of bolding.
History list (TaskItem.tsx): prefer titles when enabled, apply shared truncation/highlight behaviour, and render HTML highlights without the previous font-semibold class so edited titles visually match default entries.
History search (useTaskSearch.ts): augment FZF selector to search titles + task prompts, split highlight ranges between title/task, and retain results ordering across sort modes.

Settings & Telemetry

Add a “Task titles” checkbox in UISettings that toggles the new flag and emits ui_settings_task_titles_enabled_changed.
Ensure initial extension state defaults opt-out and hydrate from cached settings.

Tests & Localization

Extend chat header tests to cover editing workflows and disabled states.
Update history item and search hooks tests to assert new title/highlight paths and the removal of bold styling.
Add localisation strings for add/edit title affordances and the new settings copy.

Test Procedure

pnpm vitest webview-ui/src/components/chat/__tests__/TaskHeader.spec.tsx
pnpm vitest webview-ui/src/components/history/__tests__/TaskItem.spec.tsx
pnpm vitest webview-ui/src/components/history/__tests__/useTaskSearch.spec.tsx
(Optional manual) enable “Task titles” in Settings → UI and verify titles can be created/edited in the chat header and task history list without bold styling

Screenshots / Videos

Documentation Updates

[ x] No documentation updates are required.
Yes, documentation updates are required.

Important

Introduces editable task titles feature with UI support and settings toggle, including backend logic and tests.

Behavior:
- Adds editable task titles feature, controlled by taskTitlesEnabled flag in global-settings.ts and history.ts.
- Updates ClineProvider to handle task title updates and sync with webview.
- Adds setTaskTitle and setTaskTitlesEnabled message types in webviewMessageHandler.
UI:
- TaskHeader.tsx: Implements inline editing for task titles with a pencil icon, focus handling, and keyboard shortcuts.
- TaskItem.tsx: Displays task titles if enabled, with fallback to task text.
- UISettings.tsx: Adds checkbox to toggle task titles feature.
Tests:
- Extends tests in TaskHeader.spec.tsx, TaskItem.spec.tsx, and useTaskSearch.spec.tsx to cover new title editing and display logic.
Localization:
- Adds strings for task title editing in chat.json and settings.json.

^{This description was created by}^{for abf7eca. You can customize this summary. It will automatically update as commits are pushed.}

roomote · 2025-10-16T18:49:58Z

Rooviewer See task on Roo Cloud

Review Complete ✅

Re-reviewed the 6 new commits since the last review. After examining the implementation, tests, and integration points, I found no issues that require changes.

Summary

This PR successfully implements editable task titles with:

Proper title preservation logic in updateTaskHistory using hasOwnProperty check
Feature flag gating (taskTitlesEnabled) throughout the UI
Correct search integration with title highlighting in useTaskSearch
Comprehensive test coverage
Consistent styling (titles render without bold as requested)
Complete localization across all supported languages

The implementation is production-ready and can be merged.

Previous reviews

89c105b: Review #1

abf7eca: Review #2

_{Mention @roomote in a comment to request specific changes to this pull request or fix all unresolved issues.}

…ow render without font-semibold

jmalmo · 2026-01-07T22:20:53Z

Rebased feature/task-titles onto latest main and resolved conflicts. @hannesrudolph

heyseth

Executive Summary

This PR introduces editable task titles as a user-facing feature, allowing users to label active work, persist those titles into task history, and search them.

The implementation is well-architected and demonstrates strong attention to detail. The code quality is high, with proper separation of concerns, comprehensive i18n support, and excellent test coverage.

Strengths

✅ Architecture: Clean separation between backend persistence and frontend state.
✅ Quality Assurance: Comprehensive test coverage across UI components, search hooks, and backend logic.
✅ UX/UI: Thoughtful implementation with inline editing, keyboard shortcuts, and full internationalization support.
✅ State Management: Proper handling of merge semantics for history updates.

Suggested Enhancements (Code Included)

I’ve included a few specific code suggestions inline to help handle edge cases and polish the UI behavior:

1. Defense-in-Depth for Long Titles
I noticed that extremely long titles could break the visual layout of the sidebar. I've added a two-pronged fix:

CSS: Added block truncate classes to ensure the UI handles overflow gracefully on small screens.
Schema: Added a Zod limit to ensure data consistency at the source.

2. Robust Input Sanitization
Since titles might come from copy-pasted text or LLM outputs (in future updates), trim() might not be enough. I provided a stricter sanitizer snippet that:

Strips invisible control characters (safety for JSON/Logging).
Collapses newlines and multiple spaces (keeps the history list clean).
Enforces a hard character limit with a warning log.

3. Visual Polish
I suggested a small tweak to the CSS to match the hover behavior described in the PR (hiding the edit pencil by default and only showing it on hover).

Conclusion
The core implementation is solid and ready for production! Once those edge cases are patched up, this is a great addition. Great work!

heyseth · 2026-01-13T19:20:05Z

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

+
+		if (currentTitle.length > 0) {
+			return (
+				<span className="truncate text-base" data-testid="task-title-text">


Suggested change

<span className="truncate text-base" data-testid="task-title-text">

<span className="block truncate text-base" data-testid="task-title-text">

This handles the visual overflow of task titles we discussed. Adding block ensures the text cuts off with an ellipsis if it gets too long for the sidebar.

heyseth · 2026-01-13T19:20:46Z

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

+
+		if (currentTitle.length > 0) {
+			return (
+				<span className="text-base" data-testid="task-title-text">


Suggested change

<span className="text-base" data-testid="task-title-text">

<span className="block truncate text-base" data-testid="task-title-text">

This handles the visual overflow of task titles we discussed. Adding block truncate ensures the text cuts off with an ellipsis if it gets too long for the sidebar.

heyseth · 2026-01-13T19:30:08Z

packages/types/src/history.ts

 	parentTaskId: z.string().optional(),
 	number: z.number(),
 	ts: z.number(),
+	title: z.string().optional(),


Suggestion: Defense-in-Depth for Long Titles

I noticed that extremely long titles can visually overlap the edit button in the history sidebar (see screenshot). I recommend a two-pronged approach to handle this:

1. Data Integrity
We can enforce a hard limit here to prevent edge cases or massive strings.

Suggested change

title: z.string().optional(),

title: z.string().max(255).optional(),

2. CSS truncation
Add the block truncate classes to both title spans. This ensures that the titles properly truncate with an ellipsis (...) when they get too long. (see suggestions for TaskHeader.tsx)

heyseth · 2026-01-13T19:59:39Z

src/core/webview/webviewMessageHandler.ts

+			const trimmedTitle = rawTitle.trim()
+			const normalizedTitle = trimmedTitle.length > 0 ? trimmedTitle : undefined


While .trim() handles the basics, we should probably be a bit more defensive here since this title might come from copy-pasted text.

I’ve drafted a stricter sanitizer that adds three layers of safety:

Strip Control Characters: Removes invisible chars (like \x00) that can cause issues in JSON serialization or logs.

Normalize Whitespace: Collapses multiple spaces and newlines into a single space. This keeps the history sidebar clean even if the user pastes a paragraph with line breaks.

Graceful Truncation: Enforces the 255-char limit with a warning log, so we never accidentally store a massive string.

This ensures that normalizedTitle is always display-ready before it hits our state.

Suggested change

const trimmedTitle = rawTitle.trim()

const normalizedTitle = trimmedTitle.length > 0 ? trimmedTitle : undefined

const MAX_TITLE_LENGTH = 255

// Sanitize: remove control characters and normalize whitespace

const sanitized = rawTitle

// eslint-disable-next-line no-control-regex

.replace(/[\x00-\x1F\x7F-\x9F]/g, "") // Remove control characters

.replace(/\s+/g, " ") // Normalize whitespace

.trim()

// Truncate if too long, or clear if empty

let normalizedTitle: string | undefined

if (sanitized.length === 0) {

normalizedTitle = undefined // Clear empty titles

} else if (sanitized.length > MAX_TITLE_LENGTH) {

normalizedTitle = sanitized.slice(0, MAX_TITLE_LENGTH).trim() // Truncate and trim

console.warn(

`[setTaskTitle] Title truncated from ${sanitized.length} to ${MAX_TITLE_LENGTH} chars for task(s): ${ids.join(", ")}`,

)

} else {

normalizedTitle = sanitized // Use as-is

}

heyseth · 2026-01-13T20:18:54Z

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

+					}}
+					aria-label={t(tooltipKey)}
+					data-testid="task-title-edit-button">
+					<Pencil size={16} />


I've added a suggestion to fix the hover behavior so it matches the PR description (hiding the pencil by default and displaying on hover).

Suggested change

<Pencil size={16} />

<Pencil size={16} className="opacity-0 group-hover:opacity-100" />

Before:

before.mp4

After:

after.mp4

jmalmo requested review from cte, jr and mrubens as code owners October 16, 2025 18:49

github-project-automation bot added this to Roo Code Roadmap and Roo Code Roadmap Oct 16, 2025

github-project-automation bot moved this to Triage in Roo Code Roadmap Oct 16, 2025

github-project-automation bot moved this to New in Roo Code Roadmap Oct 16, 2025

dosubot bot added size:XL This PR changes 500-999 lines, ignoring generated files. Enhancement New feature or request labels Oct 16, 2025

roomote bot approved these changes Oct 16, 2025

View reviewed changes

hannesrudolph added the Issue/PR - Triage New issue. Needs quick review to confirm validity and assign labels. label Oct 16, 2025

jmalmo mentioned this pull request Oct 16, 2025

[ENHANCEMENT] Add editable titles to Roo Code tasks and task history #8366

Open

2 tasks

roomote bot approved these changes Oct 16, 2025

View reviewed changes

hannesrudolph moved this from Triage to PR [Needs Prelim Review] in Roo Code Roadmap Oct 22, 2025

hannesrudolph added PR - Needs Preliminary Review and removed Issue/PR - Triage New issue. Needs quick review to confirm validity and assign labels. labels Oct 22, 2025

jmalmo added 6 commits January 7, 2026 21:21

feat: add editable titles to task history

9ce039d

feat: add setting to toggle task titles

788c6ea

fix: Confirmed the follow-up styling tweak is in place: chat titles n…

2cd9eaa

…ow render without font-semibold

chore: translate task title strings across locales

f84feec

test: update TaskHeader title toggle expectations

214eebc

test: add browser session flag to TaskHeader mock

9765932

jmalmo force-pushed the feature/task-titles branch from 89c105b to 9765932 Compare January 7, 2026 22:02

roomote bot approved these changes Jan 7, 2026

View reviewed changes

heyseth suggested changes Jan 13, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: add optional editable task titles #8689

feat: add optional editable task titles #8689

jmalmo commented Oct 16, 2025 •

edited by ellipsis-dev bot

Loading

Uh oh!

roomote bot commented Oct 16, 2025 •

edited

Loading

Uh oh!

jmalmo commented Jan 7, 2026

Uh oh!

heyseth left a comment

Uh oh!

heyseth Jan 13, 2026

Uh oh!

heyseth Jan 13, 2026

Uh oh!

heyseth Jan 13, 2026

Uh oh!

heyseth Jan 13, 2026

Uh oh!

heyseth Jan 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	<span className="truncate text-base" data-testid="task-title-text">
	<span className="block truncate text-base" data-testid="task-title-text">

	<span className="text-base" data-testid="task-title-text">
	<span className="block truncate text-base" data-testid="task-title-text">

	title: z.string().optional(),
	title: z.string().max(255).optional(),

		const trimmedTitle = rawTitle.trim()
		const normalizedTitle = trimmedTitle.length > 0 ? trimmedTitle : undefined

-			const trimmedTitle = rawTitle.trim()
-			const normalizedTitle = trimmedTitle.length > 0 ? trimmedTitle : undefined
+			const MAX_TITLE_LENGTH = 255
+			// Sanitize: remove control characters and normalize whitespace
+			const sanitized = rawTitle
+				// eslint-disable-next-line no-control-regex
+				.replace(/[\x00-\x1F\x7F-\x9F]/g, "") // Remove control characters
+				.replace(/\s+/g, " ") // Normalize whitespace
+				.trim()
+			// Truncate if too long, or clear if empty
+			let normalizedTitle: string | undefined
+			if (sanitized.length === 0) {
+				normalizedTitle = undefined // Clear empty titles
+			} else if (sanitized.length > MAX_TITLE_LENGTH) {
+				normalizedTitle = sanitized.slice(0, MAX_TITLE_LENGTH).trim() // Truncate and trim
+				console.warn(
+					`[setTaskTitle] Title truncated from ${sanitized.length} to ${MAX_TITLE_LENGTH} chars for task(s): ${ids.join(", ")}`,
+				)
+			} else {
+				normalizedTitle = sanitized // Use as-is
+			}

	<Pencil size={16} />
	<Pencil size={16} className="opacity-0 group-hover:opacity-100" />

feat: add optional editable task titles #8689

Are you sure you want to change the base?

feat: add optional editable task titles #8689

Conversation

jmalmo commented Oct 16, 2025 • edited by ellipsis-dev bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Related GitHub Issue

Description

Test Procedure

Screenshots / Videos

Documentation Updates

Uh oh!

roomote bot commented Oct 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review Complete ✅

Summary

Uh oh!

jmalmo commented Jan 7, 2026

Uh oh!

heyseth left a comment

Choose a reason for hiding this comment

Executive Summary

Strengths

Suggested Enhancements (Code Included)

Uh oh!

heyseth Jan 13, 2026

Choose a reason for hiding this comment

Uh oh!

heyseth Jan 13, 2026

Choose a reason for hiding this comment

Uh oh!

heyseth Jan 13, 2026

Choose a reason for hiding this comment

Uh oh!

heyseth Jan 13, 2026

Choose a reason for hiding this comment

Uh oh!

heyseth Jan 13, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

jmalmo commented Oct 16, 2025 •

edited by ellipsis-dev bot

Loading

roomote bot commented Oct 16, 2025 •

edited

Loading