Description
Add inline client-side validation for connection field values (subdomains, API keys, etc.) on both the link auth page and developer dashboard forms. When a toolkit field has regex and expected_format metadata from the API, the form now:
- Shows the expected format as a hint below the field (before the user even types)
- Validates on submit with a clear error message if the value doesn't match the pattern
This is the frontend companion to ComposioHQ/hermes#9115 which added server-side regex validation.
Files changed:
link-screen.tsx / types.ts — Added regex and expected_format to field type definitions
form-content.tsx — Added validate function to register() with regex check, and shows expected_format hint
schema.ts — Added .refine() with regex validation to buildFieldValuesSchema
credential-field.tsx — Shows expected_format hint below field description
How did I test this PR
- Lint:
pnpm lint — no errors on changed files (pre-existing errors only)
- Typecheck:
pnpm typecheck — no errors on changed files (pre-existing errors only)
- E2E browser test with Freshdesk (API_KEY auth, subdomain regex
^[a-zA-Z0-9][a-zA-Z0-9-]*$):
- Invalid input (
https://my-company.freshdesk.com) → red error "Just the subdomain (e.g. 'mycompany'), not the full URL", form blocked
- Valid input (
my-company) → error clears, hint shows in neutral gray
expected_format hint displays in gray when no error, replaced by red error text on validation failure
- Video demo (validation in action): https://pub-b70cb36a6853407fa468c5d6dec16633.r2.dev/260902/generic/file_upload/request/a27fe5270887d7db2dc0ef63d1d1461f
- Also addressed Cursor Bugbot review: guarded against empty
expected_format strings