feat: implement enhanced chat history management with favorites and custom naming

roomote · roomote · commit f677db3501b8 · 2025-07-30T03:20:12.000Z
- Add isFavorite and customName fields to HistoryItem type with backward compatibility - Create FavoriteButton component with star icon and toggle functionality - Create RenameButton component with inline editing capability - Update TaskItemHeader to include favorite and rename buttons - Add favorites filtering toggle to HistoryView - Enhance useTaskSearch hook with favorites filtering and custom name search - Update webview message handlers for toggleTaskFavorite and renameTask operations - Add comprehensive test coverage for new components and functionality - Maintain backward compatibility with existing history data Resolves #6410
diff --git a/packages/types/src/history.ts b/packages/types/src/history.ts
@@ -17,6 +17,8 @@ export const historyItemSchema = z.object({
 	size: z.number().optional(),
 	workspace: z.string().optional(),
 	mode: z.string().optional(),
+	isFavorite: z.boolean().optional(),
+	customName: z.string().optional(),
 })
 
 export type HistoryItem = z.infer<typeof historyItemSchema>
diff --git a/src/core/task-persistence/taskMetadata.ts b/src/core/task-persistence/taskMetadata.ts
@@ -95,6 +95,8 @@ export async function taskMetadata({
 		size: taskDirSize,
 		workspace,
 		mode,
+		isFavorite: false, // Initialize as not favorited
+		customName: undefined, // Initialize with no custom name
 	}
 
 	return { historyItem, tokenUsage }
diff --git a/src/core/webview/webviewMessageHandler.ts b/src/core/webview/webviewMessageHandler.ts
@@ -2558,5 +2558,57 @@ export const webviewMessageHandler = async (
 			}
 			break
 		}
+		case "toggleTaskFavorite": {
+			if (message.taskId) {
+				try {
+					// Get the task and update its favorite status
+					const { historyItem } = await provider.getTaskWithId(message.taskId)
+					if (historyItem) {
+						// Toggle the favorite status
+						const updatedHistoryItem = {
+							...historyItem,
+							isFavorite: !historyItem.isFavorite,
+						}
+
+						// Update the task metadata
+						await provider.updateTaskHistory(updatedHistoryItem)
+
+						// Refresh the webview state to reflect the change
+						await provider.postStateToWebview()
+					}
+				} catch (error) {
+					provider.log(
+						`Error toggling task favorite: ${JSON.stringify(error, Object.getOwnPropertyNames(error), 2)}`,
+					)
+					vscode.window.showErrorMessage(t("common:errors.toggle_favorite_failed"))
+				}
+			}
+			break
+		}
+		case "renameTask": {
+			if (message.taskId && message.newName !== undefined) {
+				try {
+					// Get the task and update its custom name
+					const { historyItem } = await provider.getTaskWithId(message.taskId)
+					if (historyItem) {
+						// Update the custom name (empty string means remove custom name)
+						const updatedHistoryItem = {
+							...historyItem,
+							customName: message.newName.trim() || undefined,
+						}
+
+						// Update the task metadata
+						await provider.updateTaskHistory(updatedHistoryItem)
+
+						// Refresh the webview state to reflect the change
+						await provider.postStateToWebview()
+					}
+				} catch (error) {
+					provider.log(`Error renaming task: ${JSON.stringify(error, Object.getOwnPropertyNames(error), 2)}`)
+					vscode.window.showErrorMessage(t("common:errors.rename_task_failed"))
+				}
+			}
+			break
+		}
 	}
 }
diff --git a/src/i18n/locales/en/common.json b/src/i18n/locales/en/common.json
@@ -78,6 +78,8 @@
 		"command_already_exists": "Command \"{{commandName}}\" already exists",
 		"create_command_failed": "Failed to create command",
 		"command_template_content": "---\ndescription: \"Brief description of what this command does\"\n---\n\nThis is a new slash command. Edit this file to customize the command behavior.",
+		"toggle_favorite_failed": "Failed to toggle task favorite status",
+		"rename_task_failed": "Failed to rename task",
 		"claudeCode": {
 			"processExited": "Claude Code process exited with code {{exitCode}}.",
 			"errorOutput": "Error output: {{output}}",
diff --git a/src/shared/WebviewMessage.ts b/src/shared/WebviewMessage.ts
@@ -208,6 +208,8 @@ export interface WebviewMessage {
 		| "deleteCommand"
 		| "createCommand"
 		| "insertTextIntoTextarea"
+		| "toggleTaskFavorite"
+		| "renameTask"
 	text?: string
 	editedMessageContent?: string
 	tab?: "settings" | "history" | "mcp" | "modes" | "chat" | "marketplace" | "account"
@@ -270,6 +272,8 @@ export interface WebviewMessage {
 		codebaseIndexGeminiApiKey?: string
 		codebaseIndexMistralApiKey?: string
 	}
+	taskId?: string
+	newName?: string
 }
 
 export const checkoutDiffPayloadSchema = z.object({
diff --git a/webview-ui/src/components/history/FavoriteButton.tsx b/webview-ui/src/components/history/FavoriteButton.tsx
@@ -0,0 +1,28 @@
+import React from "react"
+import { StandardTooltip } from "@/components/ui"
+
+interface FavoriteButtonProps {
+	isFavorite: boolean
+	onToggleFavorite: () => void
+	className?: string
+}
+
+export const FavoriteButton: React.FC<FavoriteButtonProps> = ({ isFavorite, onToggleFavorite, className = "" }) => {
+	return (
+		<StandardTooltip content={isFavorite ? "Remove from favorites" : "Add to favorites"}>
+			<button
+				onClick={(e) => {
+					e.stopPropagation()
+					onToggleFavorite()
+				}}
+				className={`p-1 rounded hover:bg-vscode-toolbar-hoverBackground transition-colors ${className}`}
+				data-testid="favorite-button">
+				<span
+					className={`codicon ${
+						isFavorite ? "codicon-star-full" : "codicon-star-empty"
+					} text-sm ${isFavorite ? "text-yellow-400" : "text-vscode-descriptionForeground"}`}
+				/>
+			</button>
+		</StandardTooltip>
+	)
+}
diff --git a/webview-ui/src/components/history/HistoryView.tsx b/webview-ui/src/components/history/HistoryView.tsx
@@ -37,6 +37,10 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 		setLastNonRelevantSort,
 		showAllWorkspaces,
 		setShowAllWorkspaces,
+		showFavoritesOnly,
+		setShowFavoritesOnly,
+		handleToggleFavorite,
+		handleRename,
 	} = useTaskSearch()
 	const { t } = useAppTranslation()
 
@@ -152,6 +156,27 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 								</SelectItem>
 							</SelectContent>
 						</Select>
+						<Select
+							value={showFavoritesOnly ? "favorites" : "all"}
+							onValueChange={(value) => setShowFavoritesOnly(value === "favorites")}>
+							<SelectTrigger className="flex-1">
+								<SelectValue>{showFavoritesOnly ? "Favorites Only" : "All Tasks"}</SelectValue>
+							</SelectTrigger>
+							<SelectContent>
+								<SelectItem value="all">
+									<div className="flex items-center gap-2">
+										<span className="codicon codicon-list-unordered" />
+										All Tasks
+									</div>
+								</SelectItem>
+								<SelectItem value="favorites">
+									<div className="flex items-center gap-2">
+										<span className="codicon codicon-star-full text-yellow-400" />
+										Favorites Only
+									</div>
+								</SelectItem>
+							</SelectContent>
+						</Select>
 						<Select value={sortOption} onValueChange={(value) => setSortOption(value as SortOption)}>
 							<SelectTrigger className="flex-1">
 								<SelectValue>
@@ -243,6 +268,8 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 							isSelected={selectedTaskIds.includes(item.id)}
 							onToggleSelection={toggleTaskSelection}
 							onDelete={setDeleteTaskId}
+							onToggleFavorite={handleToggleFavorite}
+							onRename={handleRename}
 							className="m-2 mr-0"
 						/>
 					)}
diff --git a/webview-ui/src/components/history/RenameButton.tsx b/webview-ui/src/components/history/RenameButton.tsx
@@ -0,0 +1,80 @@
+import React, { useState } from "react"
+import { StandardTooltip } from "@/components/ui"
+import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
+
+interface RenameButtonProps {
+	currentName: string
+	onRename: (newName: string) => void
+	className?: string
+}
+
+export const RenameButton: React.FC<RenameButtonProps> = ({ currentName, onRename, className = "" }) => {
+	const [isEditing, setIsEditing] = useState(false)
+	const [editValue, setEditValue] = useState(currentName)
+
+	const handleStartEdit = (e: React.MouseEvent) => {
+		e.stopPropagation()
+		setEditValue(currentName)
+		setIsEditing(true)
+	}
+
+	const handleSave = () => {
+		const trimmedValue = editValue.trim()
+		if (trimmedValue !== currentName) {
+			onRename(trimmedValue)
+		}
+		setIsEditing(false)
+	}
+
+	const handleCancel = () => {
+		setEditValue(currentName)
+		setIsEditing(false)
+	}
+
+	const handleKeyDown = (e: React.KeyboardEvent) => {
+		if (e.key === "Enter") {
+			handleSave()
+		} else if (e.key === "Escape") {
+			handleCancel()
+		}
+	}
+
+	if (isEditing) {
+		return (
+			<div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
+				<VSCodeTextField
+					value={editValue}
+					onInput={(e) => setEditValue((e.target as HTMLInputElement).value)}
+					onKeyDown={handleKeyDown}
+					className="text-xs"
+					style={{ minWidth: "120px" }}
+					autoFocus
+					data-testid="rename-input"
+				/>
+				<button
+					onClick={handleSave}
+					className="p-1 rounded hover:bg-vscode-toolbar-hoverBackground transition-colors"
+					data-testid="rename-save">
+					<span className="codicon codicon-check text-xs text-green-400" />
+				</button>
+				<button
+					onClick={handleCancel}
+					className="p-1 rounded hover:bg-vscode-toolbar-hoverBackground transition-colors"
+					data-testid="rename-cancel">
+					<span className="codicon codicon-close text-xs text-red-400" />
+				</button>
+			</div>
+		)
+	}
+
+	return (
+		<StandardTooltip content="Rename task">
+			<button
+				onClick={handleStartEdit}
+				className={`p-1 rounded hover:bg-vscode-toolbar-hoverBackground transition-colors ${className}`}
+				data-testid="rename-button">
+				<span className="codicon codicon-edit text-sm text-vscode-descriptionForeground" />
+			</button>
+		</StandardTooltip>
+	)
+}
diff --git a/webview-ui/src/components/history/TaskItem.tsx b/webview-ui/src/components/history/TaskItem.tsx
@@ -20,6 +20,8 @@ interface TaskItemProps {
 	isSelected?: boolean
 	onToggleSelection?: (taskId: string, isSelected: boolean) => void
 	onDelete?: (taskId: string) => void
+	onToggleFavorite?: (taskId: string) => void
+	onRename?: (taskId: string, newName: string) => void
 	className?: string
 }
 
@@ -31,6 +33,8 @@ const TaskItem = ({
 	isSelected = false,
 	onToggleSelection,
 	onDelete,
+	onToggleFavorite,
+	onRename,
 	className,
 }: TaskItemProps) => {
 	const handleClick = () => {
@@ -70,7 +74,13 @@ const TaskItem = ({
 
 				<div className="flex-1 min-w-0">
 					{/* Header with metadata */}
-					<TaskItemHeader item={item} isSelectionMode={isSelectionMode} onDelete={onDelete} />
+					<TaskItemHeader
+						item={item}
+						isSelectionMode={isSelectionMode}
+						onDelete={onDelete}
+						onToggleFavorite={onToggleFavorite}
+						onRename={onRename}
+					/>
 
 					{/* Task content */}
 					<div
@@ -80,7 +90,7 @@ const TaskItem = ({
 						})}
 						data-testid="task-content"
 						{...(item.highlight ? { dangerouslySetInnerHTML: { __html: item.highlight } } : {})}>
-						{item.highlight ? undefined : item.task}
+						{item.highlight ? undefined : item.customName || item.task}
 					</div>
 
 					{/* Task Item Footer */}
diff --git a/webview-ui/src/components/history/TaskItemHeader.tsx b/webview-ui/src/components/history/TaskItemHeader.tsx
@@ -2,15 +2,27 @@ import React from "react"
 import type { HistoryItem } from "@roo-code/types"
 import { formatDate } from "@/utils/format"
 import { DeleteButton } from "./DeleteButton"
+import { FavoriteButton } from "./FavoriteButton"
+import { RenameButton } from "./RenameButton"
 import { cn } from "@/lib/utils"
 
 export interface TaskItemHeaderProps {
 	item: HistoryItem
 	isSelectionMode: boolean
 	onDelete?: (taskId: string) => void
+	onToggleFavorite?: (taskId: string) => void
+	onRename?: (taskId: string, newName: string) => void
 }
 
-const TaskItemHeader: React.FC<TaskItemHeaderProps> = ({ item, isSelectionMode, onDelete }) => {
+const TaskItemHeader: React.FC<TaskItemHeaderProps> = ({
+	item,
+	isSelectionMode,
+	onDelete,
+	onToggleFavorite,
+	onRename,
+}) => {
+	const displayName = item.customName || item.task
+
 	return (
 		<div
 			className={cn("flex justify-between items-center", {
@@ -22,11 +34,23 @@ const TaskItemHeader: React.FC<TaskItemHeaderProps> = ({ item, isSelectionMode,
 				<span className="text-vscode-descriptionForeground font-medium text-sm uppercase">
 					{formatDate(item.ts)}
 				</span>
+				{item.isFavorite && (
+					<span className="codicon codicon-star-full text-yellow-400 text-xs" title="Favorited" />
+				)}
 			</div>
 
 			{/* Action Buttons */}
 			{!isSelectionMode && (
 				<div className="flex flex-row gap-0 items-center opacity-20 group-hover:opacity-50 hover:opacity-100">
+					{onToggleFavorite && (
+						<FavoriteButton
+							isFavorite={item.isFavorite || false}
+							onToggleFavorite={() => onToggleFavorite(item.id)}
+						/>
+					)}
+					{onRename && (
+						<RenameButton currentName={displayName} onRename={(newName) => onRename(item.id, newName)} />
+					)}
 					{onDelete && <DeleteButton itemId={item.id} onDelete={onDelete} />}
 				</div>
 			)}
diff --git a/webview-ui/src/components/history/__tests__/FavoriteButton.spec.tsx b/webview-ui/src/components/history/__tests__/FavoriteButton.spec.tsx
diff --git a/webview-ui/src/components/history/__tests__/RenameButton.spec.tsx b/webview-ui/src/components/history/__tests__/RenameButton.spec.tsx
diff --git a/webview-ui/src/components/history/__tests__/useTaskSearch.spec.tsx b/webview-ui/src/components/history/__tests__/useTaskSearch.spec.tsx
diff --git a/webview-ui/src/components/history/useTaskSearch.ts b/webview-ui/src/components/history/useTaskSearch.ts

Original file line number	Diff line number	Diff line change
`@@ -95,6 +95,8 @@ export async function taskMetadata({`
`95`	`95`	`size: taskDirSize,`
`96`	`96`	`workspace,`
`97`	`97`	`mode,`
	`98`	`+ isFavorite: false, // Initialize as not favorited`
	`99`	`+ customName: undefined, // Initialize with no custom name`
`98`	`100`	`}`
`99`	`101`
`100`	`102`	`return { historyItem, tokenUsage }`