Skip to content

feat: add task header highlight for visual status indication#11305

Open
hannesrudolph wants to merge 2 commits intomainfrom
feat/task-header-highlight
Open

feat: add task header highlight for visual status indication#11305
hannesrudolph wants to merge 2 commits intomainfrom
feat/task-header-highlight

Conversation

@hannesrudolph
Copy link
Collaborator

@hannesrudolph hannesrudolph commented Feb 8, 2026

Summary

I want to be able to see if my task is ready for me to switch to it's desktop
image

So I added this setting
image

That does this
image

image

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.

  • Green (--vscode-charts-green) when a task completes (completion_result)
  • Yellow (--vscode-charts-yellow) when user attention is needed (follow-up questions, tool approvals, etc.)
  • Skipped for subtasks and partial/streaming messages, matching the same defensive logic used by sound notifications

CSS classes override --vscode-foreground within the highlighted header so all child text, icons, SVGs, and the context window progress bar automatically use appropriate contrasting colors.

Changes

  • Add taskHeaderHighlightEnabled boolean setting to global settings schema with default false
  • Wire setting through ClineProvider.ts state persistence, ExtensionStateContext, and SettingsView cached state pattern
  • Add checkbox toggle in UISettings under the UI tab
  • Implement dual-color highlight logic in TaskHeader.tsx using useMemo with findLastIndex to determine current task state
  • Add CSS classes in index.css with !important overrides and --vscode-foreground variable scoping for full child element contrast
  • Add 37 tests across TaskHeader.spec.tsx and UISettings.spec.tsx
  • Add translations for all 18 locales

Important

Introduces task header color highlights in TaskHeader.tsx to indicate task status, with settings and tests updated accordingly.

  • Behavior:
    • Adds taskHeaderHighlightEnabled setting to highlight task headers based on status: green for complete, yellow for attention needed.
    • Skips highlighting for subtasks and partial messages.
  • UI Components:
    • Implements highlight logic in TaskHeader.tsx using useMemo.
    • Adds checkbox in UISettings.tsx for toggling highlight.
  • State Management:
    • Updates ClineProvider.ts, SettingsView.tsx, and ExtensionStateContext.tsx to handle new setting.
  • CSS:
    • Adds .task-header-highlight-green and .task-header-highlight-yellow classes in index.css.
  • Tests:
    • Adds tests in TaskHeader.spec.tsx and UISettings.spec.tsx.
  • Localization:
    • Adds translations for 18 locales.

This description was created by Ellipsis for b3a19a8. You can customize this summary. It will automatically update as commits are pushed.

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.
@dosubot dosubot bot added size:L This PR changes 100-499 lines, ignoring generated files. Enhancement New feature or request labels Feb 8, 2026
@roomote
Copy link
Contributor

roomote bot commented Feb 8, 2026

Rooviewer Clock   See task

Re-reviewed the 2 changed files since last review. Both previously flagged issues are now resolved.

  • Accessibility: Now uses hardcoded background colors (#15803d, #ca8a04) instead of theme-dependent --vscode-charts-* variables, guaranteeing WCAG AA 4.5:1 contrast
  • Duplicated logic: Extracted shared lastRelevantMessage useMemo consumed by both isTaskComplete and highlightClass
Previous reviews

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Enhancement New feature or request size:L This PR changes 100-499 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant