Background
The web client uses Mantine TextInput, Autocomplete, and the
shared search/filter inputs across many surfaces (prompt arguments,
resource-template variables, sidebar search fields, the message-history
search, the sampling-request panel, etc.). None of them surface a
clear (×) affordance today — to reset a field the user has to
select-all + delete, which is fine for a token-length argument but
miserable for a multi-line draft or a search query they want to retype.
Mantine ships clear-button support on its input primitives via the
clearable + clearButtonProps props, with the visual placement
documented under "Left and right sections":
https://mantine.dev/core/input/#left-and-right-sections
Scope
Apply clearable to every user-editable text input across the app so
each one renders a Mantine clear × in the right section when it has
a value. Concretely:
- Prompt argument inputs —
clients/web/src/components/groups/PromptArgumentsForm/PromptArgumentsForm.tsx (both the Autocomplete and the TextInput branch)
- Resource-template variable inputs —
clients/web/src/components/groups/ResourceTemplatePanel/ResourceTemplatePanel.tsx (both branches)
- Search inputs — anywhere
TextInput is used with a placeholder like \"Search...\" (sidebar controls for resources / prompts / tools / tasks / history / apps; the History screen filter; the MessagesPanel filter; etc. — grep for placeholder=\"Search)
- Sampling response textarea —
SamplingRequestPanel model-used input and the response Textarea
- Model-used input — same panel, the small
TextInput
- Any other user-facing
TextInput / Textarea / Autocomplete found by grep -rn TextInput src and grep -rn Autocomplete src. Skip read-only/display-only inputs (e.g. the URI preview, which is Text not an input).
The minimal change per input is adding clearable (plus onClear where the host needs to know — e.g. to also clear the value of a controlled-component prop, or to clear other state like cached completions).
Implementation notes
- Most inputs in the project are controlled (
value + onChange). Mantine's clear button calls onChange("") internally, so a default clearable is enough — no onClear plumbing needed for plain text fields.
- For inputs that own additional derived state (e.g.
PromptArgumentsForm caching completions per argument, ResourceTemplatePanel doing the same), pass onClear={() => /* drop cached completions for this arg */} so the stale dropdown is reset along with the value.
- For app-wide defaults, prefer a Mantine theme override in
clients/web/src/theme/TextInput.ts (and add similar files / variants for Autocomplete and Textarea if needed) that sets clearable: true by default. Per-site overrides (clearable={false}) can opt out for inputs where a clear button doesn't make sense.
- For autocomplete / template variable inputs, clearing the value should also collapse any open dropdown — Mantine handles this automatically via
onChange(\"\"), no extra work expected.
Acceptance criteria
- Every user-editable
TextInput / Autocomplete / Textarea across the app shows the Mantine clear × when populated.
- Clicking the clear button empties the field. For prompt / resource-template arguments, the stale completion dropdown for that argument is also cleared.
- Read-only / display-only text surfaces (URI previews, message bubbles, etc.) are untouched.
npm run validate, npm run test:integration, and npm run test:storybook all pass; new / updated unit tests cover the clear behavior on a representative input from each category (sidebar search, prompt argument, resource-template variable, sampling response).
Background
The web client uses Mantine
TextInput,Autocomplete, and theshared search/filter inputs across many surfaces (prompt arguments,
resource-template variables, sidebar search fields, the message-history
search, the sampling-request panel, etc.). None of them surface a
clear (
×) affordance today — to reset a field the user has toselect-all + delete, which is fine for a token-length argument but
miserable for a multi-line draft or a search query they want to retype.
Mantine ships clear-button support on its input primitives via the
clearable+clearButtonPropsprops, with the visual placementdocumented under "Left and right sections":
https://mantine.dev/core/input/#left-and-right-sections
Scope
Apply
clearableto every user-editable text input across the app soeach one renders a Mantine clear
×in the right section when it hasa value. Concretely:
clients/web/src/components/groups/PromptArgumentsForm/PromptArgumentsForm.tsx(both theAutocompleteand theTextInputbranch)clients/web/src/components/groups/ResourceTemplatePanel/ResourceTemplatePanel.tsx(both branches)TextInputis used with aplaceholderlike\"Search...\"(sidebar controls for resources / prompts / tools / tasks / history / apps; theHistoryscreen filter; theMessagesPanelfilter; etc. — grep forplaceholder=\"Search)SamplingRequestPanelmodel-used input and the responseTextareaTextInputTextInput/Textarea/Autocompletefound bygrep -rn TextInput srcandgrep -rn Autocomplete src. Skip read-only/display-only inputs (e.g. the URI preview, which isTextnot an input).The minimal change per input is adding
clearable(plusonClearwhere the host needs to know — e.g. to also clear the value of a controlled-component prop, or to clear other state like cached completions).Implementation notes
value+onChange). Mantine's clear button callsonChange("")internally, so a defaultclearableis enough — noonClearplumbing needed for plain text fields.PromptArgumentsFormcaching completions per argument,ResourceTemplatePaneldoing the same), passonClear={() => /* drop cached completions for this arg */}so the stale dropdown is reset along with the value.clients/web/src/theme/TextInput.ts(and add similar files / variants forAutocompleteandTextareaif needed) that setsclearable: trueby default. Per-site overrides (clearable={false}) can opt out for inputs where a clear button doesn't make sense.onChange(\"\"), no extra work expected.Acceptance criteria
TextInput/Autocomplete/Textareaacross the app shows the Mantine clear×when populated.npm run validate,npm run test:integration, andnpm run test:storybookall pass; new / updated unit tests cover the clear behavior on a representative input from each category (sidebar search, prompt argument, resource-template variable, sampling response).