feat(webview): surface condense button and context progress bar in collapsed task header

[awschmeder]

Related GitHub Issue

Closes: #606

Description

Surfaces the context compaction button and linear context window progress bar in the collapsed task header, so users don't need to expand the header to monitor or act on context pressure.

Implementation:

• In TaskHeader.tsx, renders a small right-side container within the collapsed header containing ContextWindowProgress and the condense button, wrapped in a stopPropagation click handler so interacting with these controls does not toggle header expansion.
• Replaces FoldVertical (removed in lucide-react 1.x) with ListChevronsDownUp for all condense-related UI: the collapsed header button, CondensationResultRow, and the condensing threshold section in ContextManagementSettings.
• Replaces FoldVertical with ScissorsLineDashed in TruncationResultRow to visually distinguish truncation events from condensation events.
• Bumps lucide-react from ^0.518.0 to ^1.18.0 (resolved to 1.21.0) to gain access to the new icons.

Test Procedure

1. Open a task and collapse the task header.
2. Verify the linear context progress bar and condense button are visible on the right side of the collapsed header.
3. Click the condense button -- confirm context compaction triggers without expanding the header.
4. Click the progress bar area -- confirm the header does not expand.
5. Verify the condense button is disabled when task buttons are disabled.
6. Expand the header and confirm the condensation/truncation result rows show the correct icons (ListChevronsDownUp for condensation, ScissorsLineDashed for truncation).
7. Open Settings > Context Management and confirm the condensing threshold section shows the ListChevronsDownUp icon.

Pre-Submission Checklist

• Issue Linked: This PR is linked to an approved GitHub Issue (see "Related GitHub Issue" above).
• Scope: My changes are focused on the linked issue (one major feature/fix per PR).
• Self-Review: I have performed a thorough self-review of my code.
• Testing: New and/or updated tests have been added to cover my changes (if applicable).
• Documentation Impact: I have considered if my changes require documentation updates (see "Documentation Updates" section below).
• Contribution Guidelines: I have read and agree to the Contributor Guidelines.

Screenshots / Videos

See comments.

Documentation Updates

• No documentation updates are required.

Additional Notes

The FoldVertical icon was removed in lucide-react 1.x. The version bump is required to access ListChevronsDownUp and ScissorsLineDashed. The pnpm-lock.yaml update is a side effect of the version bump.

Get in Touch

aws

Summary by CodeRabbit

• New Features

  • Context compaction control and the linear context window progress indicator are now shown on the collapsed task header.

• Dependencies

  • Updated lucide-react to a newer version.

• Style

  • Refreshed icons and header layout for context management controls to better reflect condensed/expanded states.

• Tests

  • Updated component tests to validate the condensed-state behavior of the context compaction control.

[coderabbitai]

Important

Review skipped

Review was skipped due to path filters

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including **/dist/** will override the default block on the dist directory, by removing the pattern from both the lists.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 69dd45d5-28a3-4c1d-8387-4c1ced00d177

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

📝 Walkthrough

Walkthrough

The PR adds ContextWindowProgress and the condense button to the collapsed TaskHeader layout, wrapping them in a flex container on the right side. FoldVertical is replaced with ListChevronsDownUp across TaskHeader, CondensationResultRow, and ContextManagementSettings; TruncationResultRow gets ScissorsLineDashed. Tests are updated to assert collapsed-state behavior directly. lucide-react is bumped to ^1.18.0.

Changes

Collapsed header controls and icon refresh

Layer / File(s)	Summary
TaskHeader: collapsed-state controls + lucide-react bump webview-ui/package.json, webview-ui/src/components/chat/TaskHeader.tsx	Bumps lucide-react to ^1.18.0, swaps FoldVertical → ListChevronsDownUp in TaskHeader, and adds a flex wrapper in the non-expanded header that renders ContextWindowProgress beside condenseButton.
TaskHeader tests for collapsed-state controls webview-ui/src/components/chat/__tests__/TaskHeader.spec.tsx	Adds a new test for collapsed-state button visibility, updates expanded-state and interaction tests to use the new ListChevronsDownUp icon selector, and removes the "expand first" step to verify clickability and disabled state while the header is collapsed.
Icon replacements across context management components webview-ui/src/components/chat/context-management/CondensationResultRow.tsx, webview-ui/src/components/chat/context-management/TruncationResultRow.tsx, webview-ui/src/components/settings/ContextManagementSettings.tsx	Replaces FoldVertical with ListChevronsDownUp in CondensationResultRow and ContextManagementSettings; replaces FoldVertical with ScissorsLineDashed in TruncationResultRow for icon consistency across context management surfaces.
Changeset entry .changeset/add-condense-button-to-collapsed-task-header.md	Adds the patch changeset entry documenting the UI updates to surface context compaction controls in the collapsed task header.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐇 Hop hop, no need to expand the header wide,
The condense button now sits right there inside!
A progress bar glows on the collapsed right side,
ListChevronsDownUp replaces the fold with pride.
Scissors snip truncation, icons fresh and new —
The rabbit ships UI without any ado! ✂️

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: surfacing the condense button and context progress bar in the collapsed task header, which directly aligns with the primary objective.
Description check	✅ Passed	The description is comprehensive and follows the template structure with all required sections: Related GitHub Issue, detailed implementation notes, thorough test procedure, completed checklist, and documentation consideration.
Linked Issues check	✅ Passed	The PR implementation fully addresses all four acceptance criteria from issue #606: context controls are surfaced in the collapsed header, clicking condense triggers compaction, stopPropagation prevents header expansion, and the condense button respects disabled state.
Out of Scope Changes check	✅ Passed	All changes are directly tied to issue #606 objectives: the lucide-react version bump is necessary due to FoldVertical removal, and icon replacements address the feature requirements and maintain visual consistency.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

.changeset/add-condense-button-to-collapsed-task-header.md (1)

1-6: ⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Remove this changeset file from the PR.

This repo’s review policy says agents should not generate .changeset entries during normal development.

As per coding guidelines, ".changeset/**: Do NOT create .changeset files for each commit or code change. Changesets are managed separately by maintainers and should not be generated by agents during normal development."

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In @.changeset/add-condense-button-to-collapsed-task-header.md around lines 1 -
6, The file `.changeset/add-condense-button-to-collapsed-task-header.md` should
not be included in this PR according to the repository's review policy. Agents
should not generate `.changeset` entries during normal development as changesets
are managed separately by maintainers. Remove this entire changeset file from
the PR.

Source: Coding guidelines

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@webview-ui/src/components/chat/__tests__/TaskHeader.spec.tsx`:
- Around line 136-143: In the test "should render the condense context button in
the collapsed state", update the SVG selector in the find method that currently
looks for "svg.lucide-fold-vertical" to instead look for the correct lucide
class corresponding to the ListChevronsDownUp icon that the component now
renders. Replace the selector string to match the actual class name generated by
the ListChevronsDownUp icon from lucide-react.

---

Outside diff comments:
In @.changeset/add-condense-button-to-collapsed-task-header.md:
- Around line 1-6: The file
`.changeset/add-condense-button-to-collapsed-task-header.md` should not be
included in this PR according to the repository's review policy. Agents should
not generate `.changeset` entries during normal development as changesets are
managed separately by maintainers. Remove this entire changeset file from the
PR.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 4d51dfe2-a513-4c80-b2ce-f0275d6c3442

📥 Commits

Reviewing files that changed from the base of the PR and between e2fce6c and ff85f67.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (7)

• .changeset/add-condense-button-to-collapsed-task-header.md
• webview-ui/package.json
• webview-ui/src/components/chat/TaskHeader.tsx
• webview-ui/src/components/chat/__tests__/TaskHeader.spec.tsx
• webview-ui/src/components/chat/context-management/CondensationResultRow.tsx
• webview-ui/src/components/chat/context-management/TruncationResultRow.tsx
• webview-ui/src/components/settings/ContextManagementSettings.tsx

[awschmeder]

context-compress-icon-compressed.mov

[awschmeder]

Demonstration of the new ScissorsLineDashed icon replacing "FoldVertical" to represent Context Truncation:

context-truncated.mov

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!