fix(ui): handle undefined branch names in autocomplete components

[wcpaxx]

Summary

• Add defensive checks to prevent TypeError when branch names are undefined or null
• Filter out options with undefined/null values in Autocomplete component
• Use optional chaining for toLowerCase() calls to prevent crashes
• Add null/empty string filtering in branch-autocomplete
• Add b.name checks in board-view, graph-view-page, and related dialogs

Problem

Opening the AddFeature dialog with certain project data that contains invalid branch references causes a crash:

TypeError: Cannot read properties of undefined (reading 'toLowerCase')
    at use-worktrees-BT4LVcAL.js:17:19597

This happens when the branches array contains undefined values, which then get passed to the Autocomplete component where toLowerCase() is called without null checks.

Solution

Added defensive filtering and optional chaining at multiple levels:

1. Autocomplete component: Filter out options with undefined/null values before processing
2. BranchAutocomplete: Filter invalid branches (null, undefined, empty string) before creating the Set
3. Board views and dialogs: Add && b.name checks when filtering branches

Test plan

• Build desktop client successfully
• Open AddFeature dialog in a project with existing features
• Verify no crash occurs on first and subsequent openings
• Test branch autocomplete functionality works correctly

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features
  • Autocomplete options can display badges and mark default items in the UI.
• Bug Fixes
  • Improved stability and consistent suggestions by filtering out null/invalid branch and option values across autocompletes, branch selectors, dialogs, and views.
• Documentation
  • Added public JSDoc comments describing several UI components and their behavior.

[gemini-code-assist]

Summary of Changes

Hello @wcpaxx, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request addresses a critical TypeError crash that occurred when UI components, particularly autocomplete fields, encountered undefined or null branch names. The changes introduce comprehensive null and undefined checks, along with filtering logic, at multiple layers of the application's UI. This ensures that only valid branch data is processed, significantly improving the stability and resilience of the application when dealing with potentially malformed or incomplete branch references.

Highlights

• Defensive Checks for Branch Names: Implemented robust checks to prevent TypeError crashes when branch names are undefined or null in autocomplete components and various views.
• Filtering Invalid Options: Added filtering mechanisms in the Autocomplete and BranchAutocomplete components to exclude options with undefined, null, or empty string values before processing.
• Optional Chaining for toLowerCase(): Utilized optional chaining (?.) for toLowerCase() calls to safely handle potentially null or undefined values, preventing runtime errors.
• Consistent b.name Checks: Introduced b.name checks across board-view, graph-view-page, and related dialogs to ensure only branches with valid names are processed.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog

• apps/ui/src/components/ui/autocomplete.tsx
  • Added a filter to filteredOptions to remove null or undefined values from normalizedOptions before filtering by input.
  • Applied optional chaining (?.) to opt.value.toLowerCase() within the isNewValue calculation to prevent errors if opt.value is null or undefined.
  • Used nullish coalescing (?? '') with toLowerCase() when constructing data-testid to safely handle potentially null or undefined option values.
• apps/ui/src/components/ui/branch-autocomplete.tsx
  • Implemented a filter for the branches array to exclude undefined, null, and empty string values before creating the branchSet.
• apps/ui/src/components/views/board-view.tsx
  • Modified the localBranches filter to include a check for b.name to ensure only branches with a defined name are mapped.
• apps/ui/src/components/views/board-view/dialogs/create-pr-dialog.tsx
  • Added a filter for b.name to ensure only branches with a defined name are included in the list of available branches.
• apps/ui/src/components/views/board-view/dialogs/merge-worktree-dialog.tsx
  • Included a check for b.name in the filter for availableBranches to prevent processing branches without a defined name.
• apps/ui/src/components/views/graph-view-page.tsx
  • Updated the localBranches filter to verify b.name exists before mapping branch names.

Activity

• No human activity (comments, reviews, etc.) has been recorded on this pull request yet.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds null/undefined guards and trims empty branch/name values across several UI components; extends AutocompleteOption with optional badge and isDefault properties and updates rendering/filtering and test-id generation to be null-safe.

Changes

Cohort / File(s)	Summary
Autocomplete component & types apps/ui/src/components/ui/autocomplete.tsx	Adds badge?: string and isDefault?: boolean to AutocompleteOption; centralizes validOptions (filters out null/undefined values), tightens null-safety in comparisons, and uses (option.value ?? '') for test-id generation and rendering.
Branch autocomplete apps/ui/src/components/ui/branch-autocomplete.tsx	Filters out null/empty branch names before building options (preserves 'main' first); adds JSDoc.
Board & graph views apps/ui/src/components/views/board-view.tsx, apps/ui/src/components/views/graph-view-page.tsx	Add JSDoc and require truthy b.name when filtering/mapping local branches to avoid undefined names in suggestions.
Board dialogs (PR / merge) apps/ui/src/components/views/board-view/dialogs/create-pr-dialog.tsx, apps/ui/src/components/views/board-view/dialogs/merge-worktree-dialog.tsx	Add JSDoc and filter out falsy branch names before mapping/excluding branches (tighten branch-list construction).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• fix: branch list issue and improve ui feedback #251 — touches branch-list handling and frontend branch-filtering logic; likely overlaps with branch name filtering changes.
• fix: use dynamic branch references instead of hardcoded origin/main #477 — modifies board-view/CreatePRDialog branch handling; may interact with the tightened branch-name guards.

Suggested labels

Bug

Poem

🐰 I hopped through lists and cleared the mess,
Nulled out the blanks and trimmed the excess.
A badge and default tucked in with care,
Autocomplete’s tidy — light as air! 🥕

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The pull request title accurately describes the main purpose of the changeset: fixing handling of undefined branch names in autocomplete-related components throughout the UI.
Docstring Coverage	✅ Passed	Docstring coverage is 85.71% 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 docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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.}

[gemini-code-assist]

Code Review

This pull request effectively addresses the TypeError caused by undefined branch names in autocomplete components. The solution is robust, with defensive checks added at multiple layers, from the generic Autocomplete component to specific views and dialogs. This ensures that null or undefined values are handled gracefully, preventing crashes.

I've added a couple of suggestions in autocomplete.tsx to further improve code clarity and efficiency by centralizing the filtering of invalid options. Overall, this is a solid fix that improves the application's stability.