feat: add next step suggestions and XML utilities

- Add NextStepSuggest component for displaying suggested next steps
- Add XML utilities for improved XML parsing
- Update ChatView and ChatRow to handle next step suggestions
- Add fast-xml-parser dependency
- Update package dependencies

update snapshoot

feat(ui): enhance next step suggestions UX and documentation

- Improve next step UI with collapsible view and show more/less toggle
- Add type validation and error handling for suggestion parsing
- Update documentation with clearer formatting guidelines and examples
- Enhance button styling and accessibility for better user interaction

update snapshot

refactor: move next step suggestions into chat row for better UX

feat: enhance next step suggestions with mode selection

- Make next_step parameter required in attempt_completion tool
- Update suggestion format to include task and mode fields
- Enhance UI to display mode alongside task description
- Update parsing logic to handle new suggestion format
- Improve error handling for missing or invalid suggestions

refactor(NextStepSuggest): improve component with shadcn UI and better styling

- Replace native buttons with shadcn Button component
- Increase button dimensions for better readability
- Add proper text wrapping and overflow handling
- Style mode text as VSCode badge
- Improve hover and active states
- Maintain VSCode theming integration
- Show 3 suggestions in non-expanded mode

feat: make next step suggestions official

- Remove next_step_suggest from experiments
- Make next step suggestions a required parameter in attempt_completion
- Update documentation to reflect next step suggestions as core functionality
- Remove experimental conditionals from objective and rules sections

update snapshoot

update UI UX

update UI UX

fix potiential issues

use same scrollbar with chat convension

better hover color

feat(NextStepSuggest): add expand/collapse functionality with instance isolation

- Add expand/collapse functionality to show more/less suggestions
- Implement instance-specific state management via instanceId prop
- Add Show More/Less button with suggestion count
- Improve accessibility with ARIA labels
- Add Lucide icons for visual indicators

refactor: move next step suggestions parsing to wrapper component

- Add NextStepSuggestionsWrapper to handle suggestion parsing
- Remove suggestion state management from ChatView
- Update ChatRow to use wrapper component
- Clean up NextStepSuggest component props

Implement badge for mode display and theme-aware component variants

feat(ui): add toolkit badge variant and apply to NextStepSuggest component

Improve NextStepSuggest component UX by adding auto-scroll to toggle button and fixing text alignment

refactor(ui): improve NextStepSuggest component styling

- Remove padding and borders for cleaner appearance
- Add toolkit-no-border variant to Badge component
- Add ui-toolkit-primary-no-border variant to Button component
- Reposition mode badge from bottom-left to bottom-right
- Update styling classes for better visual consistency

fix pr comment

fix pr comemnt

fix UX

Author: samhvw8

package-lock.json

@@ -342,6 +342,7 @@
 		"diff": "^5.2.0",
 		"diff-match-patch": "^1.0.5",
 		"fast-deep-equal": "^3.1.3",
+		"fast-xml-parser": "^4.5.1",
 		"fastest-levenshtein": "^1.0.16",
 		"get-folder-size": "^5.0.0",
 		"globby": "^14.0.2",

package.json

@@ -78,6 +78,7 @@ import { DiffStrategy, getDiffStrategy } from "./diff/DiffStrategy"
 import { insertGroups } from "./diff/insert-groups"
 import { telemetryService } from "../services/telemetry/TelemetryService"
 import { validateToolUse, isToolAllowedForMode, ToolName } from "./mode-validator"
+import { parseXml } from "../utils/xml"
 import { getWorkspacePath } from "../utils/path"
 
 type ToolResponse = string | Array<Anthropic.TextBlockParam | Anthropic.ImageBlockParam>
@@ -2945,6 +2946,7 @@ export class Cline extends EventEmitter<ClineEvents> {
 					case "attempt_completion": {
 						const result: string | undefined = block.params.result
 						const command: string | undefined = block.params.command
+						const next_step: string | undefined = block.params.next_step
 						try {
 							const lastMessage = this.clineMessages.at(-1)
 							if (block.partial) {
@@ -2995,8 +2997,44 @@ export class Cline extends EventEmitter<ClineEvents> {
 									break
 								}
 
+								if (!next_step) {
+									this.consecutiveMistakeCount++
+									pushToolResult(
+										await this.sayAndCreateMissingParamError("attempt_completion", "next_step"),
+									)
+									break
+								}
+
+								let normalizedSuggest = null
+
+								type Suggest = {
+									task: string
+									mode: string
+								}
+
+								let parsedSuggest: {
+									suggest: Suggest[] | Suggest
+								}
+
+								try {
+									parsedSuggest = parseXml(next_step, ["suggest.task", "suggest.mode"]) as {
+										suggest: Suggest[] | Suggest
+									}
+									console.log("next_step", next_step)
+								} catch (error) {
+									this.consecutiveMistakeCount++
+									await this.say("error", `Failed to parse operations: ${error.message}`)
+									pushToolResult(formatResponse.toolError("Invalid operations xml format"))
+									break
+								}
+
+
 								this.consecutiveMistakeCount = 0
 
+								normalizedSuggest = Array.isArray(parsedSuggest?.suggest)
+									? parsedSuggest.suggest
+									: [parsedSuggest?.suggest].filter((sug): sug is Suggest => sug !== undefined)
+
 								let commandResult: ToolResponse | undefined
 
 								if (command) {
@@ -3042,6 +3080,10 @@ export class Cline extends EventEmitter<ClineEvents> {
 									break
 								}
 
+								const toolResults: (Anthropic.TextBlockParam | Anthropic.ImageBlockParam)[] = []
+
+								await this.say("next_step_suggest", JSON.stringify(normalizedSuggest))
+
 								// We already sent completion_result says, an
 								// empty string asks relinquishes control over
 								// button and field.
@@ -3056,7 +3098,6 @@ export class Cline extends EventEmitter<ClineEvents> {
 								}
 
 								await this.say("user_feedback", text ?? "", images)
-								const toolResults: (Anthropic.TextBlockParam | Anthropic.ImageBlockParam)[] = []
 
 								if (commandResult) {
 									if (typeof commandResult === "string") {

src/core/Cline.ts

@@ -57,6 +57,7 @@ export const toolParamNames = [
 	"mode",
 	"message",
 	"cwd",
+	"next_step",
 ] as const
 
 export type ToolParamName = (typeof toolParamNames)[number]
@@ -127,7 +128,7 @@ export interface AskFollowupQuestionToolUse extends ToolUse {
 
 export interface AttemptCompletionToolUse extends ToolUse {
 	name: "attempt_completion"
-	params: Partial<Pick<Record<ToolParamName, string>, "result" | "command">>
+	params: Partial<Pick<Record<ToolParamName, string>, "result" | "command" | "next_step">>
 }
 
 export interface SwitchModeToolUse extends ToolUse {