feat(webview): surface condense button and context progress bar in collapsed task header #680
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "zoo-code": patch | ||
| --- | ||
|
|
||
| Surface the manual context compaction button and linear context window progress bar on the right side of the collapsed task header. |
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -133,15 +133,22 @@ describe("TaskHeader", () => { | |
| expect(screen.queryByText(/\$/)).not.toBeInTheDocument() | ||
| }) | ||
|
|
||
| it("should render the condense context button in the collapsed state", () => { | ||
| renderTaskHeader() | ||
| // Button is visible without expanding the task header | ||
| const buttons = screen.getAllByRole("button") | ||
| const condenseButton = buttons.find((button) => button.querySelector("svg.lucide-list-chevrons-down-up")) | ||
| expect(condenseButton).toBeDefined() | ||
| expect(condenseButton?.querySelector("svg")).toBeInTheDocument() | ||
| }) | ||
|
coderabbitai[bot] marked this conversation as resolved.
|
||
|
|
||
| it("should render the condense context button when expanded", () => { | ||
| renderTaskHeader() | ||
| const taskHeader = screen.getByText("Test task") | ||
| fireEvent.click(taskHeader) | ||
|
|
||
| const buttons = screen.getAllByRole("button") | ||
| const condenseButton = buttons.find((button) => button.querySelector("svg.lucide-list-chevrons-down-up")) | ||
| expect(condenseButton).toBeDefined() | ||
| expect(condenseButton?.querySelector("svg")).toBeInTheDocument() | ||
| }) | ||
|
|
@@ -150,13 +157,9 @@ describe("TaskHeader", () => { | |
| const handleCondenseContext = vi.fn() | ||
| renderTaskHeader({ handleCondenseContext }) | ||
|
|
||
| // Button is clickable in collapsed state without expanding first | ||
| const buttons = screen.getAllByRole("button") | ||
| const condenseButton = buttons.find((button) => button.querySelector("svg.lucide-list-chevrons-down-up")) | ||
| expect(condenseButton).toBeDefined() | ||
| fireEvent.click(condenseButton!) | ||
| expect(handleCondenseContext).toHaveBeenCalledWith("test-task-id") | ||
|
Contributor
There was a problem hiding this comment. This test verifies the handler fires, but not that clicking the button doesn't expand the header — which is the core UX promise of surfacing it in the collapsed state. Could we add an assertion like |
||
|
|
@@ -166,13 +169,9 @@ describe("TaskHeader", () => { | |
| const handleCondenseContext = vi.fn() | ||
| renderTaskHeader({ buttonsDisabled: true, handleCondenseContext }) | ||
|
|
||
| // Button is disabled in collapsed state without expanding first | ||
| const buttons = screen.getAllByRole("button") | ||
| const condenseButton = buttons.find((button) => button.querySelector("svg.lucide-list-chevrons-down-up")) | ||
| expect(condenseButton).toBeDefined() | ||
| expect(condenseButton).toBeDisabled() | ||
| fireEvent.click(condenseButton!) | ||
|
|
||
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,7 @@ | ||
| import { useState } from "react" | ||
| import { useTranslation } from "react-i18next" | ||
| import { VSCodeBadge } from "@vscode/webview-ui-toolkit/react" | ||
| import { ListChevronsDownUp } from "lucide-react" | ||
|
|
||
| import type { ContextCondense } from "@roo-code/types" | ||
|
|
||
|
|
@@ -32,7 +32,7 @@ export function CondensationResultRow({ data }: CondensationResultRowProps) { | |
| className="flex items-center justify-between cursor-pointer select-none" | ||
| onClick={() => setIsExpanded(!isExpanded)}> | ||
| <div className="flex items-center gap-2 flex-grow"> | ||
| <ListChevronsDownUp size={16} className="text-vscode-foreground" /> | ||
| <span className="font-bold text-vscode-foreground"> | ||
| {t("chat:contextManagement.condensation.title")} | ||
| </span> | ||
|
|
||
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| import { useState } from "react" | ||
| import { useTranslation } from "react-i18next" | ||
| import { ScissorsLineDashed } from "lucide-react" | ||
|
|
||
| import type { ContextTruncation } from "@roo-code/types" | ||
|
|
||
|
|
@@ -33,7 +33,7 @@ export function TruncationResultRow({ data }: TruncationResultRowProps) { | |
| className="flex items-center justify-between cursor-pointer select-none" | ||
| onClick={() => setIsExpanded(!isExpanded)}> | ||
| <div className="flex items-center gap-2 flex-grow"> | ||
| <ScissorsLineDashed size={16} className="text-vscode-foreground" /> | ||
| <span className="font-bold text-vscode-foreground"> | ||
| {t("chat:contextManagement.truncation.title")} | ||
| </span> | ||
|
|
||
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -2,7 +2,7 @@ import { HTMLAttributes } from "react" | |
| import React from "react" | ||
| import { useAppTranslation } from "@/i18n/TranslationContext" | ||
| import { VSCodeCheckbox, VSCodeTextArea } from "@vscode/webview-ui-toolkit/react" | ||
| import { ListChevronsDownUp } from "lucide-react" | ||
|
|
||
| import { supportPrompt } from "@roo/support-prompt" | ||
|
|
||
|
|
@@ -487,7 +487,7 @@ export const ContextManagementSettings = ({ | |
| {autoCondenseContext && ( | ||
| <div className="flex flex-col gap-3 pl-3 border-l-2 border-vscode-button-background"> | ||
| <div className="flex items-center gap-4 font-bold"> | ||
| <ListChevronsDownUp size={16} /> | ||
| <div>{t("settings:contextManagement.condensingThreshold.label")}</div> | ||
| </div> | ||
| <div> | ||
|
|
||
Oops, something went wrong.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This div relies on the ancestor div (line 177) for
stopPropagation. TheContextWindowProgressbar inside renders plain<div>elements — not<button>s — so it's not covered by thee.target.closest("button")early-return guard either. If this div ever moves outside that ancestor during a refactor, clicking the progress bar would silently start toggling the header.Worth adding its own guard?