fix(ChatView): React crash from malformed follow-up suggestion mode

[edelauna]

Related GitHub Issue

Closes: #413

Description

Fixes a webview crash when rendering follow-up suggestions whose mode value is malformed as an object, such as { "mode_slug": "code" }, instead of a string.

The issue reported React error #31 from FollowUpSuggest, where React attempted to render the malformed object directly. This PR hardens the follow-up flow in two places:

• Normalizes suggestion mode values in AskFollowupQuestionTool before follow-up data is stored/sent to the webview.
• Normalizes mode values in the webview render and click paths so existing task history with malformed mode objects does not crash the UI and still switches to the intended mode.

Test Procedure

Validated locally with Node v20.20.2 and pnpm 10.8.1:

• pnpm --dir webview-ui exec vitest run src/components/chat/__tests__/FollowUpSuggest.spec.tsx
• pnpm --dir src exec vitest run core/tools/__tests__/askFollowupQuestionTool.spec.ts
• pnpm --filter zoo-code check-types
• pnpm --filter @roo-code/vscode-webview check-types
• pnpm --filter @roo-code/vscode-webview test -- src/components/chat/__tests__/FollowUpSuggest.spec.tsx

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

Not applicable. This is a crash fix covered by focused React and tool tests.

Documentation Updates

• No documentation updates are required.

Additional Notes

pnpm --filter zoo-code test -- core/tools/__tests__/askFollowupQuestionTool.spec.ts was also attempted through the package script, but that script ran the broader src suite in this workspace. The focused regression test passed directly, and the broader run failed only on unrelated local/environment tests.

Get in Touch

N/A

Summary by CodeRabbit

• Bug Fixes

  • Normalize follow-up suggestion modes from malformed values so mode badges, mode switching, and the follow-up payload use a consistent string when available.
  • Validate available modes before switching to prevent unintended mode changes on suggestion click.

• Tests

  • Added tests covering follow-up suggestion mode normalization, UI rendering with malformed modes, and mode-switching edge cases.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 14603813-d25f-40f6-b261-aba79bc1a005

📥 Commits

Reviewing files that changed from the base of the PR and between 77a61df and 6fd04d6.

📒 Files selected for processing (1)

• packages/types/src/followup.ts

🚧 Files skipped from review as they are similar to previous changes (1)

• packages/types/src/followup.ts

---

📝 Walkthrough

Walkthrough

Adds getSuggestionMode(...) and applies it to normalize follow-up suggestion modes across types, backend task payloads, ChatView/FollowUpSuggest rendering, and related tests.

Changes

Suggestion Mode Normalization

Layer / File(s)	Summary
Mode normalization utility packages/types/src/followup.ts	getSuggestionMode(mode: unknown) exported; returns trimmed non-empty string for string modes or objects with mode_slug, otherwise undefined.
Backend tool suggestion processing src/core/tools/AskFollowupQuestionTool.ts, src/core/tools/__tests__/askFollowupQuestionTool.spec.ts	AskFollowupQuestionTool treats suggestion mode as unknown and calls getSuggestionMode(...) when building follow_up_json. New test verifies object-shaped modes normalize to string in payload.
ChatView mode validation and suggestion handling webview-ui/src/components/chat/ChatView.tsx, webview-ui/src/components/chat/__tests__/ChatView.spec.tsx	ChatView imports getSuggestionMode, validates modeSlug against available modes in switchToMode, and resolves suggestion-driven mode via getSuggestionMode before switching. Tests mock follow-up suggestions and assert posted mode and askResponse messages.
FollowUpSuggest badge rendering webview-ui/src/components/chat/FollowUpSuggest.tsx, webview-ui/src/components/chat/__tests__/FollowUpSuggest.spec.tsx	Component computes suggestionMode using getSuggestionMode and uses it to conditionally render the mode badge. Test ensures object-shaped modes render safely and display derived text.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• Zoo-Code-Org/Zoo-Code#212: Overlapping changes around AskFollowupQuestionTool follow-up suggestion handling and mode normalization/test coverage.

Suggested reviewers

• taltas
• hannesrudolph
• navedmerchant
• JamesRobert20

Poem

🐰 I found a mode with slug inside a shell,
Strings and objects mixed, it rang a bell.
I trim and check and make it right,
No React crash, the UI sleeps tonight.
hops off, nibbling a carrot 🥕

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix(ChatView): React crash from malformed follow-up suggestion mode' accurately and concisely describes the main change—fixing a React crash caused by malformed follow-up suggestion mode values.
Description check	✅ Passed	The PR description comprehensively covers all required sections: linked issue, detailed implementation description, test procedures with specific commands, completed pre-submission checklist, and documentation impact statement.
Linked Issues check	✅ Passed	The PR successfully addresses all objectives from issue #413: it normalizes malformed mode values in AskFollowupQuestionTool before sending to webview, hardens webview render/click paths to handle malformed objects without crashing, and includes comprehensive test coverage for the fix.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to fixing the reported React crash from malformed follow-up suggestion modes; no unrelated modifications are present in the changeset.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch issue/413

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

packages/types/src/followup.ts

ESLint skipped: missing config or dependency (missing-dependency). The ESLint configuration references a package that is not available in the sandbox.

---

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

🤖 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 `@packages/types/src/followup.ts`:
- Around line 25-36: The getSuggestionMode function currently validates strings
by trimming but returns the original untrimmed values; update it so both return
paths return trimmed strings: when mode is a string trim and return it, and when
extracting mode_slug (modeSlug) trim and return that trimmed value if non-empty;
otherwise return undefined. Ensure you reference getSuggestionMode, the mode
parameter and modeSlug extraction to locate and change the two return points.

🪄 Autofix (Beta)

✅ Autofix completed

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: bb6f49e6-a71c-45b3-b76c-8d7ab0983f2f

📥 Commits

Reviewing files that changed from the base of the PR and between 24de98f and 77a61df.

📒 Files selected for processing (7)

• packages/types/src/followup.ts
• src/core/tools/AskFollowupQuestionTool.ts
• src/core/tools/__tests__/askFollowupQuestionTool.spec.ts
• webview-ui/src/components/chat/ChatView.tsx
• webview-ui/src/components/chat/FollowUpSuggest.tsx
• webview-ui/src/components/chat/__tests__/ChatView.spec.tsx
• webview-ui/src/components/chat/__tests__/FollowUpSuggest.spec.tsx

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[coderabbitai]

Note

Autofix is a beta feature. Expect some limitations and changes as we gather feedback and continue to improve it.

Fixes Applied Successfully

Fixed 1 file(s) based on 1 unresolved review comment.

Files modified:

• packages/types/src/followup.ts

Commit: 6fd04d6af568ff78463e8fd2e73024d87651125c

The changes have been pushed to the issue/413 branch.

Time taken: 3m 59s