diff --git a/.changeset/add-condense-button-to-collapsed-task-header.md b/.changeset/add-condense-button-to-collapsed-task-header.md new file mode 100644 index 0000000000..2e231eb8e1 --- /dev/null +++ b/.changeset/add-condense-button-to-collapsed-task-header.md @@ -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. diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a4d46a1685..aa6c45d442 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -842,8 +842,8 @@ importers: specifier: ^11.1.0 version: 11.2.2 lucide-react: - specifier: ^0.518.0 - version: 0.518.0(react@18.3.1) + specifier: ^1.18.0 + version: 1.21.0(react@18.3.1) mermaid: specifier: ^11.4.1 version: 11.15.0 @@ -6468,8 +6468,8 @@ packages: resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==} engines: {node: '>=10'} - lucide-react@0.518.0: - resolution: {integrity: sha512-kFg34uQqnVl/7HwAiigxPSpj//43VIVHQbMygQPtS1yT4btMXHCWUipHcgcXHD2pm1Z2nUBA/M+Vnh/YmWXQUw==} + lucide-react@1.21.0: + resolution: {integrity: sha512-reEZMXq8Qdd5jg5XYkQ5TR1fB/GiQ7ih4vcrthYDtgjSDwh0i6/YLiGjsWsIwgN49gpAnd4J2elSNzncMEEUUQ==} peerDependencies: react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0 @@ -15231,7 +15231,7 @@ snapshots: dependencies: yallist: 4.0.0 - lucide-react@0.518.0(react@18.3.1): + lucide-react@1.21.0(react@18.3.1): dependencies: react: 18.3.1 diff --git a/webview-ui/package.json b/webview-ui/package.json index be4df7650c..8b89f53b52 100644 --- a/webview-ui/package.json +++ b/webview-ui/package.json @@ -50,7 +50,7 @@ "i18next": "^25.0.0", "katex": "^0.16.11", "lru-cache": "^11.1.0", - "lucide-react": "^0.518.0", + "lucide-react": "^1.18.0", "mermaid": "^11.4.1", "posthog-js": "^1.227.2", "pretty-bytes": "^7.0.0", diff --git a/webview-ui/src/components/chat/TaskHeader.tsx b/webview-ui/src/components/chat/TaskHeader.tsx index 4ddf5ef35c..c59813eb91 100644 --- a/webview-ui/src/components/chat/TaskHeader.tsx +++ b/webview-ui/src/components/chat/TaskHeader.tsx @@ -1,6 +1,6 @@ import { memo, useRef, useState, useMemo } from "react" import { useTranslation } from "react-i18next" -import { ChevronUp, ChevronDown, HardDriveDownload, HardDriveUpload, FoldVertical, ArrowLeft } from "lucide-react" +import { ChevronUp, ChevronDown, HardDriveDownload, HardDriveUpload, ListChevronsDownUp, ArrowLeft } from "lucide-react" import prettyBytes from "pretty-bytes" import type { ClineMessage } from "@roo-code/types" @@ -81,7 +81,7 @@ const TaskHeader = ({ const condenseButton = ( currentTaskItem && handleCondenseContext(currentTaskItem.id)} /> @@ -274,6 +274,14 @@ const TaskHeader = ({ )} +
+ + {condenseButton} +
)} {/* Expanded state: Show task text and images */} diff --git a/webview-ui/src/components/chat/__tests__/TaskHeader.spec.tsx b/webview-ui/src/components/chat/__tests__/TaskHeader.spec.tsx index 41aa452ab1..dfa30d1982 100644 --- a/webview-ui/src/components/chat/__tests__/TaskHeader.spec.tsx +++ b/webview-ui/src/components/chat/__tests__/TaskHeader.spec.tsx @@ -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() + }) + it("should render the condense context button when expanded", () => { renderTaskHeader() - // First click to expand the task header const taskHeader = screen.getByText("Test task") fireEvent.click(taskHeader) - // Now find the condense button in the expanded state const buttons = screen.getAllByRole("button") - const condenseButton = buttons.find((button) => button.querySelector("svg.lucide-fold-vertical")) + 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 }) - // First click to expand the task header - const taskHeader = screen.getByText("Test task") - fireEvent.click(taskHeader) - - // Find the button that contains the FoldVertical icon + // Button is clickable in collapsed state without expanding first const buttons = screen.getAllByRole("button") - const condenseButton = buttons.find((button) => button.querySelector("svg.lucide-fold-vertical")) + 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") @@ -166,13 +169,9 @@ describe("TaskHeader", () => { const handleCondenseContext = vi.fn() renderTaskHeader({ buttonsDisabled: true, handleCondenseContext }) - // First click to expand the task header - const taskHeader = screen.getByText("Test task") - fireEvent.click(taskHeader) - - // Find the button that contains the FoldVertical icon + // Button is disabled in collapsed state without expanding first const buttons = screen.getAllByRole("button") - const condenseButton = buttons.find((button) => button.querySelector("svg.lucide-fold-vertical")) + const condenseButton = buttons.find((button) => button.querySelector("svg.lucide-list-chevrons-down-up")) expect(condenseButton).toBeDefined() expect(condenseButton).toBeDisabled() fireEvent.click(condenseButton!) diff --git a/webview-ui/src/components/chat/context-management/CondensationResultRow.tsx b/webview-ui/src/components/chat/context-management/CondensationResultRow.tsx index 526ebebbe7..e9a9cfdf09 100644 --- a/webview-ui/src/components/chat/context-management/CondensationResultRow.tsx +++ b/webview-ui/src/components/chat/context-management/CondensationResultRow.tsx @@ -1,7 +1,7 @@ import { useState } from "react" import { useTranslation } from "react-i18next" import { VSCodeBadge } from "@vscode/webview-ui-toolkit/react" -import { FoldVertical } from "lucide-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)}>
- + {t("chat:contextManagement.condensation.title")} diff --git a/webview-ui/src/components/chat/context-management/TruncationResultRow.tsx b/webview-ui/src/components/chat/context-management/TruncationResultRow.tsx index ec6a32f316..625c850161 100644 --- a/webview-ui/src/components/chat/context-management/TruncationResultRow.tsx +++ b/webview-ui/src/components/chat/context-management/TruncationResultRow.tsx @@ -1,6 +1,6 @@ import { useState } from "react" import { useTranslation } from "react-i18next" -import { FoldVertical } from "lucide-react" +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)}>
- + {t("chat:contextManagement.truncation.title")} diff --git a/webview-ui/src/components/settings/ContextManagementSettings.tsx b/webview-ui/src/components/settings/ContextManagementSettings.tsx index 8663ea6e03..8a6fa079ff 100644 --- a/webview-ui/src/components/settings/ContextManagementSettings.tsx +++ b/webview-ui/src/components/settings/ContextManagementSettings.tsx @@ -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 { FoldVertical } from "lucide-react" +import { ListChevronsDownUp } from "lucide-react" import { supportPrompt } from "@roo/support-prompt" @@ -487,7 +487,7 @@ export const ContextManagementSettings = ({ {autoCondenseContext && (
- +
{t("settings:contextManagement.condensingThreshold.label")}