feat: add task header highlight for visual status indication#11305
Open
hannesrudolph wants to merge 2 commits intomainfrom
Open
feat: add task header highlight for visual status indication#11305hannesrudolph wants to merge 2 commits intomainfrom
hannesrudolph wants to merge 2 commits intomainfrom
Conversation
Add a 'Task Header Highlight' toggle under Settings > UI that colors the task header based on its current state: - Green (--vscode-charts-green) when task completes (completion_result) - Yellow (--vscode-charts-yellow) when user attention is needed (follow-up questions, tool approvals, etc.) The highlight is skipped for subtasks and partial/streaming messages, matching the same defensive logic used by sound notifications. CSS classes with !important and --vscode-foreground variable overrides ensure all child text, icons, SVGs, and the context progress bar use appropriate contrasting colors. Includes tests (37 passing) and translations for all 18 locales.
Contributor
Re-reviewed the 2 changed files since last review. Both previously flagged issues are now resolved.
Mention @roomote in a comment to request specific changes to this pull request or fix all unresolved issues. |
…d logic - Replace theme-dependent --vscode-charts-green/yellow backgrounds with hardcoded colors (#15803d, #ca8a04) that guarantee WCAG AA 4.5:1 contrast - Extract shared lastRelevantMessage useMemo to deduplicate findLastIndex filtering between isTaskComplete and highlightClass
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
I want to be able to see if my task is ready for me to switch to it's desktop

So I added this setting

That does this

Adds a Task Header Highlight toggle under Settings → UI that colors the task header based on its current state, providing an at-a-glance visual indicator when tasks need attention or are complete.
--vscode-charts-green) when a task completes (completion_result)--vscode-charts-yellow) when user attention is needed (follow-up questions, tool approvals, etc.)CSS classes override
--vscode-foregroundwithin the highlighted header so all child text, icons, SVGs, and the context window progress bar automatically use appropriate contrasting colors.Changes
taskHeaderHighlightEnabledboolean setting to global settings schema with defaultfalseClineProvider.tsstate persistence,ExtensionStateContext, andSettingsViewcached state patternUISettingsunder the UI tabTaskHeader.tsxusinguseMemowithfindLastIndexto determine current task stateindex.csswith!importantoverrides and--vscode-foregroundvariable scoping for full child element contrastTaskHeader.spec.tsxandUISettings.spec.tsxImportant
Introduces task header color highlights in
TaskHeader.tsxto indicate task status, with settings and tests updated accordingly.taskHeaderHighlightEnabledsetting to highlight task headers based on status: green for complete, yellow for attention needed.TaskHeader.tsxusinguseMemo.UISettings.tsxfor toggling highlight.ClineProvider.ts,SettingsView.tsx, andExtensionStateContext.tsxto handle new setting..task-header-highlight-greenand.task-header-highlight-yellowclasses inindex.css.TaskHeader.spec.tsxandUISettings.spec.tsx.This description was created by
for b3a19a8. You can customize this summary. It will automatically update as commits are pushed.