feat: Add editable titles to tasks and task history #8367
Conversation
- Add optional title field to HistoryItem type schema - Add updateTaskTitle message types to Extension and Webview messages - Implement title update handler in webviewMessageHandler with trimming - Add title editing UI to TaskHeader component with inline edit mode - Update TaskItem component to display titles prominently in history - Add translations for title editing UI elements - Add tests for backend title update functionality Implements #8366
dosubot
bot
added
size:XL
hannesrudolph
added
the
Issue/PR - Triage
![roomote[bot]](https://avatars.githubusercontent.com/in/1546624?s=60&v=4){kind=small}
| )} | ||
|
|
||
| <div className="flex-1 min-w-0"> | ||
| {/* Display title if it exists */} |
There was a problem hiding this comment.
P1: Titles aren’t included in the history search. The acceptance criteria require titles to be searchable alongside the existing content. Consider updating the search logic (useTaskSearch) to index both title and task, and adjust highlighting accordingly.
| const handleSaveTitle = () => { | ||
| if (currentTaskItem) { | ||
| // Send message to update the task title | ||
| vscode.postMessage({ | ||
| type: "updateTaskTitle", | ||
| taskId: currentTaskItem.id, | ||
| title: editedTitle.trim(), | ||
| }) | ||
| } | ||
| setIsEditingTitle(false) | ||
| } |
There was a problem hiding this comment.
P3: Avoid no-op updates. If the trimmed title hasn’t changed (treat undefined as ""), skip posting an update.
| const handleSaveTitle = () => { | |
| if (currentTaskItem) { | |
| // Send message to update the task title | |
| vscode.postMessage({ | |
| type: "updateTaskTitle", | |
| taskId: currentTaskItem.id, | |
| title: editedTitle.trim(), | |
| }) | |
| } | |
| setIsEditingTitle(false) | |
| } | |
| const handleSaveTitle = () => { | |
| if (currentTaskItem) { | |
| const newTitle = editedTitle.trim() | |
| const prevTitle = currentTaskItem.title ?? "" | |
| if (newTitle === prevTitle) { | |
| setIsEditingTitle(false) | |
| return | |
| } | |
| vscode.postMessage({ | |
| type: "updateTaskTitle", | |
| taskId: currentTaskItem.id, | |
| title: newTitle, | |
| }) | |
| } | |
| setIsEditingTitle(false) | |
| } |
| placeholder={t("chat:task.titlePlaceholder")} | ||
| /> | ||
| <StandardTooltip content={t("chat:task.saveTitle")}> | ||
| <button |
There was a problem hiding this comment.
P2: Accessibility – add an aria-label to the save button so screen readers (and tests) can reliably target it. Example: aria-label={t("chat:task.saveTitle")}.
| </button> | ||
| </StandardTooltip> | ||
| <StandardTooltip content={t("chat:task.cancelEdit")}> | ||
| <button |
There was a problem hiding this comment.
P2: Accessibility – add an aria-label to the cancel button. Example: aria-label={t("chat:task.cancelEdit")}.
| </span> | ||
| <StandardTooltip content={t("chat:task.editTitle")}> | ||
| <button | ||
| onClick={(e) => { |
There was a problem hiding this comment.
P2: Accessibility – add an aria-label to the edit button. Example: aria-label={t("chat:task.editTitle")}.
| fireEvent.mouseEnter(titleElement.parentElement!) | ||
|
|
||
| // Edit button should now be visible | ||
| expect(screen.getByLabelText("chat:editTitle")).toBeInTheDocument() |
There was a problem hiding this comment.
P1: i18n mismatch – tests query "chat:editTitle" but the component uses the "chat:task.*" keys. Update the label to match.
| expect(screen.getByLabelText("chat:editTitle")).toBeInTheDocument() | |
| expect(screen.getByLabelText("chat:task.editTitle")).toBeInTheDocument() |
| expect(input.tagName).toBe("INPUT") | ||
|
|
||
| // Should show save and cancel buttons | ||
| expect(screen.getByLabelText("chat:saveTitle")).toBeInTheDocument() |
There was a problem hiding this comment.
P1: i18n mismatch – update to the namespaced key used in the UI.
| expect(screen.getByLabelText("chat:saveTitle")).toBeInTheDocument() | |
| expect(screen.getByLabelText("chat:task.saveTitle")).toBeInTheDocument() |
|
|
||
| // Should show save and cancel buttons | ||
| expect(screen.getByLabelText("chat:saveTitle")).toBeInTheDocument() | ||
| expect(screen.getByLabelText("chat:cancelEdit")).toBeInTheDocument() |
There was a problem hiding this comment.
P1: i18n mismatch – update to the namespaced key used in the UI.
| expect(screen.getByLabelText("chat:cancelEdit")).toBeInTheDocument() | |
| expect(screen.getByLabelText("chat:task.cancelEdit")).toBeInTheDocument() |
| fireEvent.click(screen.getByLabelText("chat:editTitle")) | ||
|
|
||
| // Should show input with placeholder | ||
| const input = screen.getByPlaceholderText("chat:titlePlaceholder") as HTMLInputElement |
There was a problem hiding this comment.
P1: i18n mismatch – placeholder key should match the UI’s "chat:task.titlePlaceholder".
| const input = screen.getByPlaceholderText("chat:titlePlaceholder") as HTMLInputElement | |
| const input = screen.getByPlaceholderText("chat:task.titlePlaceholder") as HTMLInputElement |
Summary
This PR implements the feature requested in #8366 to add editable titles to Roo Code tasks and task history.
Changes
Core Implementation
titlefield to HistoryItem type schemaUser Experience
Technical Details
Testing
Screenshots
The implementation adds an inline edit UI to the task header and displays titles prominently in the history list.
Fixes #8366
Important
This PR adds editable task titles to the UI, allowing users to modify titles inline, with changes persisting across sessions and reflected in task history.
titlefield toHistoryItemschema inhistory.ts.updateTaskTitlemessage handling inwebviewMessageHandler.ts.TaskHeader.tsx.TaskItem.tsxto display titles in history.TaskHeadercomponent.TaskHeader.spec.tsx.updateTaskTitleinwebviewMessageHandler.spec.ts.chat.jsonandcommon.json.This description was created by
for da79983. You can customize this summary. It will automatically update as commits are pushed.