Add UI for file regex editing

[mrubens]

A UI was added to the modes tab for displaying and editing the fileRegex property of the "edit" tool group.

Changes include:

• webview-ui/src/components/modes/ModesView.tsx:
  • New state variables (editingFileRegex, fileRegexValue, fileRegexDescription) were introduced to manage the editing state and input values.
  • Functions startEditingFileRegex, saveFileRegex, and cancelEditingFileRegex were added to handle the lifecycle of the editing process.
  • The UI for the "edit" tool group was updated to conditionally render either the display-only view or an editable form with input fields for fileRegex and description, along with "Save" and "Cancel" buttons.
  • An edit icon button was added, visible only for custom modes, to initiate the editing process.
  • The saveFileRegex function now correctly handles GroupEntry types, converting simple "edit" strings to ["edit", { fileRegex, description }] tuples when options are added, and updating existing tuples.
• webview-ui/src/i18n/locales/en/prompts.json:
  • New translation keys (fileRegex, description, save, cancel, editFileRegex) were added to support the new UI elements.

This allows users to visually configure file regex patterns and descriptions for custom modes directly within the UI.

---

Important

Adds UI for editing fileRegex in custom modes, with new state management and localization in ModesView.tsx and prompts.json.

• Behavior:
  • Adds UI for editing fileRegex in custom modes in ModesView.tsx.
  • Introduces editingFileRegex, fileRegexValue, and fileRegexDescription state variables.
  • Adds startEditingFileRegex, saveFileRegex, and cancelEditingFileRegex functions.
  • Updates UI to conditionally render input fields and buttons for fileRegex and description.
  • Edit button visible only for custom modes.
  • saveFileRegex updates GroupEntry types, converting "edit" strings to tuples with options.
• Localization:
  • Adds translation keys in prompts.json for fileRegex, description, save, cancel, and editFileRegex.

^{This description was created by for c093e96. You can customize this summary. It will automatically update as commits are pushed.}

[hannesrudolph]

Nice screenshots :p

[ellipsis-dev]

The placeholder texts for the file regex and description inputs are hardcoded (e.g. 'e.g., .*.(js|ts|jsx|tsx)$'). To support localization consistently, please use translation keys instead of inline examples.

Suggested change

	placeholder="e.g., .*\\.(js|ts|jsx|tsx)$"
	placeholder={t("prompts:tools.fileRegexPlaceholder")}

^{This comment was generated because it violated a code review rule: irule_C0ez7Rji6ANcGkkX.}

[daniel-lxs]

I gave this a try, here's what I saw:

2025-06-23_07-59-00.mp4

Maybe something related to the state of the component.

[hannesrudolph]

stale